/* ========================================================== 영단컷 홈페이지 — 학습 목표 전환 (수능 준비 / 토익·토플) 에 따라 [data-only] 블록을 보이고 숨긴다. ========================================================== */ :root { --track-h: 78px; } html { scroll-padding-top: calc(var(--header-h) + var(--track-h)); } html[data-track="suneung"] [data-only="adult"], html[data-track="adult"] [data-only="suneung"] { display: none !important; } /* ---------- 상단 전환 줄 (헤더 두 번째 줄) ---------- */ .header { height: calc(var(--header-h) + var(--track-h)); } .header .inner { height: var(--header-h); } .track-row { height: var(--track-h); display: flex; align-items: flex-start; justify-content: center; gap: 14px; } .track-label { align-self: center; margin-top: -8px; font-size: 16px; font-weight: 900; color: var(--navy); white-space: nowrap; } .track-switch { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--navy); box-shadow: 0 12px 30px rgba(8, 24, 53, .28); } .track-switch a { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 28px; border-radius: 999px; color: rgba(255, 255, 255, .7); font-size: 20px; font-weight: 900; white-space: nowrap; transition: background .2s, color .2s, transform .2s; } .track-switch a .ic { font-size: 22px; } .track-switch a small { font-size: 13px; font-weight: 800; opacity: .8; } .track-switch a:hover { color: var(--white); background: rgba(255, 255, 255, .1); } /* 지금 보고 있는 과정 — 스크립트 없이 로 칠한다 */ html[data-track="suneung"] .track-switch a[data-track-btn="suneung"], html[data-track="adult"] .track-switch a[data-track-btn="adult"] { background: var(--white); color: var(--navy); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); } html[data-track="adult"] .track-switch a[data-track-btn="adult"] { background: #FFC61A; } html[data-track="suneung"] .track-switch a[data-track-btn="suneung"] small, html[data-track="adult"] .track-switch a[data-track-btn="adult"] small { opacity: .7; } .hero { padding-top: calc(var(--header-h) + var(--track-h) + 60px); } /* ---------- 토익·토플 페이지 순서: 토익 표현·토플을 학습 사례 바로 뒤로 ---------- */ html[data-track="adult"] main { display: flex; flex-direction: column; } html[data-track="adult"] main > #toeic, html[data-track="adult"] main > #toefl { order: 2; } html[data-track="adult"] main > #cases-adult ~ section { order: 3; } html[data-track="adult"] .nav a[href="#toeic"], html[data-track="adult"] .nav a[href="#toefl"] { order: 2; } html[data-track="adult"] .nav a[href="#cases-adult"] ~ a { order: 3; } /* ---------- 토익·토플 첫 화면 ---------- */ .hero-adult .hero-photo { aspect-ratio: 1000 / 1055; } .hero-adult .lead b { color: var(--blue); } /* ---------- 단어 그물망: 4층 ---------- */ .ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 70px; align-items: stretch; } .rung { position: relative; padding: 32px 26px; border-radius: var(--r); background: var(--white); box-shadow: 0 16px 40px rgba(8, 24, 53, .08), inset 0 0 0 1px var(--line); } .rung .step { font-size: 14px; font-weight: 900; color: var(--muted); letter-spacing: .02em; } .rung h3 { margin-top: 10px; font-size: 24px; font-weight: 900; line-height: 1.3; color: var(--navy); letter-spacing: -.03em; } .rung .cnt { margin-top: 14px; font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--navy); } .rung .cnt small { margin-left: 4px; font-size: 17px; letter-spacing: 0; color: var(--muted); } .rung p { margin-top: 14px; font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--text); } .rung .how { display: inline-block; margin-top: 16px; padding: 7px 12px; border-radius: 999px; background: var(--ice); color: var(--blue); font-size: 13px; font-weight: 900; } .rung.core { background: var(--navy); box-shadow: 0 20px 44px rgba(8, 24, 53, .25); } .rung.core .step, .rung.core p { color: rgba(255, 255, 255, .75); } .rung.core h3, .rung.core .cnt { color: var(--white); } .rung.core .cnt small { color: rgba(255, 255, 255, .6); } .rung.core .how { background: rgba(255, 255, 255, .14); color: var(--sky); } .rung:not(:last-child)::after { content: "→"; position: absolute; right: -19px; top: 50%; z-index: 1; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--white); font-size: 17px; font-weight: 900; } .net-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; padding: 22px; border-radius: var(--r); background: var(--ice); } .nf-step { display: flex; gap: 12px; align-items: flex-start; } .nf-step .n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--blue); font-size: 16px; font-weight: 900; } .nf-step b { display: block; font-size: 17px; font-weight: 900; color: var(--navy); } .nf-step p { margin-top: 4px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--muted); } .nf-step.end .n { background: #12B76A; color: var(--white); } .nf-step.end b { color: #0E9F5C; } .ladder-note { margin-top: 26px; text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); } /* ---------- 토익: 덩어리 표현 4종 ---------- */ .chunk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 70px; } .chunk { padding: 36px 34px; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); } .chunk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .chunk-top small { font-size: 15px; font-weight: 900; color: var(--blue); } .chunk-top b { font-size: 34px; font-weight: 900; letter-spacing: -.04em; color: var(--navy); } .chunk-top b i { font-style: normal; margin-left: 2px; font-size: 16px; color: var(--muted); } .chunk h3 { margin-top: 8px; font-size: 24px; font-weight: 900; line-height: 1.35; color: var(--navy); letter-spacing: -.03em; } .chunk p { margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--text); } .pairs { margin-top: 20px; display: grid; gap: 8px; } .pairs li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--gray); font-size: 16px; } .pairs li b { font-weight: 900; color: var(--navy); } .pairs li span { font-weight: 700; color: var(--muted); text-align: right; } .topics { margin-top: 40px; padding: 30px; border-radius: var(--r); background: var(--ice); text-align: center; } .topics h3 { font-size: 20px; font-weight: 900; color: var(--navy); } .topics ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } .topics li { padding: 9px 15px; border-radius: 999px; background: var(--white); font-size: 15px; font-weight: 800; color: var(--text); } /* ---------- 토플: 과목별 학술 어휘 ---------- */ .toefl-box { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; margin-top: 70px; padding: 48px; border-radius: 36px; background: var(--navy); color: var(--white); } .toefl-box h3 { font-size: 30px; font-weight: 900; line-height: 1.3; letter-spacing: -.04em; } .toefl-box h3 em { font-style: normal; color: #FFC61A; } .toefl-box > div > p { margin-top: 14px; font-size: 17px; font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, .75); } .toefl-now { display: grid; gap: 12px; } .toefl-now li { padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .08); } .toefl-now li b { display: flex; justify-content: space-between; gap: 10px; font-size: 18px; font-weight: 900; } .toefl-now li p { margin-top: 6px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .7); } .acad { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .acad span { padding: 7px 12px; border-radius: 999px; background: rgba(143, 184, 255, .16); color: var(--sky); font-size: 14px; font-weight: 800; } /* ---------- 마지막 가입: 트랙별 배경 ---------- */ html[data-track="adult"] .final-photo { background: linear-gradient(180deg, rgba(8, 24, 53, .6) 0%, rgba(8, 24, 53, .2) 55%, rgba(8, 24, 53, .1) 100%), url("../img/photos/final_adult.webp") center bottom / cover no-repeat, var(--navy); } /* ---------- 반응형 ---------- */ @media (max-width: 1024px) { .ladder { grid-template-columns: 1fr 1fr; } .rung:not(:last-child)::after { display: none; } .net-flow { grid-template-columns: 1fr 1fr; row-gap: 18px; } .toefl-box { grid-template-columns: 1fr; padding: 38px 30px; } } @media (max-width: 760px) { :root { --track-h: 64px; } .track-label { display: none; } .track-switch { padding: 5px; } .track-switch a { height: 46px; padding: 0 18px; font-size: 17px; gap: 6px; } .track-switch a .ic { font-size: 19px; } .track-switch a small { display: none; } .hero { padding-top: calc(var(--header-h) + var(--track-h) + 30px); } .chunk-grid, .ladder, .net-flow { grid-template-columns: 1fr; } .chunk { padding: 30px 24px; } .rung .cnt { font-size: 38px; } }