/* =========================================================
   LABS 아카데믹 센터 — 홈 전용 (v1 · 2026-10-27 리뉴얼)
   index.html에서만 로드. 기준: 문서/홈페이지_PC시안_2026-10-27
   사진: hero-student-2026*.webp · card-*-2026.webp · worldmap-dots-2026.webp
         = 힉스필드 이미지 생성(2026-10-27, 기록은 문서/홈페이지_PC시안_2026-10-27/소재기록.md)
   그림자는 상담 카드(.ask)와 시험 찾기(.tf) 두 곳만
   ========================================================= */
.page-home .wrap{max-width:1280px; padding:0 40px}
.page-home .hd .wrap{max-width:1320px; padding:0 24px}
.page-home .kicker{font-size:14px}

/* 사진 위 흰 테두리 버튼 · 밝은 바탕 위 테두리 버튼 */
.btn--line{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.85)}
.btn--line:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.page-home .sec .btn--o{background:#fff; color:var(--navy); border:1.5px solid var(--navy)}
.page-home .sec .btn--o:hover{background:#EEF3FF}
.ic-play{width:14px; height:14px; fill:currentColor}

/* ── [01] 첫 화면 ── */
.hh{position:relative; isolation:isolate; color:#fff; background:var(--black); overflow:hidden; padding:52px 0 140px}
.hh__bg{position:absolute; inset:0; z-index:-2}
.hh__bg img{width:100%; height:100%; object-fit:cover; object-position:58% 25%}
.hh::before{content:""; position:absolute; inset:0; background:rgba(8,11,18,.6); z-index:-1}
.hh__g{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start}
.hh__txt{max-width:800px; padding-top:18px}
.hh .kicker{color:#E7C27A}
.hh__h{font-family:var(--serif); font-weight:700; color:#fff; font-size:clamp(30px,3.3vw,48px); line-height:1.28; letter-spacing:-.01em; margin:0 0 20px}
.hh__lead{font-size:18px; line-height:1.7; color:#E3E7EE; margin:0 0 30px}
.hh__nums{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 0}
.hh__nums li{display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:12px; align-items:center;
  padding:0 26px; border-left:1px solid rgba(255,255,255,.32)}
.hh__nums li:first-child{padding-left:0; border-left:0}
.hh__nums svg{grid-row:1 / 3; width:34px; height:34px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.hh__nums b{font-family:var(--serif); font-size:30px; line-height:1.1; color:#fff}
.hh__nums span{font-size:14.5px; color:#E3E7EE}
.hh__src{font-size:12.5px; color:#C9CFDB; margin:12px 0 0}
.hh__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hh .ask{position:relative; z-index:3; box-shadow:0 18px 40px rgba(0,0,0,.35); padding:24px 22px 20px}
.hh .ask__t{font-size:21px}
.hh .ask__d{font-size:14px; margin-bottom:14px}
.hh .ask__f{margin-bottom:9px}
.hh .ask__f select,.hh .ask__f input{height:46px}
.hh .ask__fine{font-size:12px}

/* ── [02] 30초 시험 찾기 ── */
.tfs{position:relative; z-index:4; margin-top:-96px; padding-bottom:20px; scroll-margin-top:80px}
.tf{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:28px; background:#fff; border-radius:var(--r);
  box-shadow:0 16px 40px rgba(10,13,20,.14); border:1px solid #E3E7EE; padding:30px 32px}
.tf__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-bottom:18px}
.tf__t{font-family:var(--serif); font-size:clamp(26px,2.6vw,34px); color:var(--navy); margin:0; line-height:1.2}
.tf__head p{margin:0; font-size:14.5px; color:var(--ink-2)}
.tf__q{display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:center; padding:9px 0}
.tf__lb{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); font-size:16px}
.tf__n{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:var(--act); color:#fff; font-size:14px; font-weight:800; flex:none}
.tf .pchips{gap:8px}
.tf .pchip{min-height:44px; padding:8px 16px; font-size:15px; min-width:88px}
.tf__res{background:#EEF3FF; border-radius:10px; padding:20px 22px}
.tf__res .tres__r{display:block; padding:0 0 12px; border:0}
.tf__res .k{font-size:13.5px; font-weight:800; color:var(--navy); margin-bottom:2px}
.tf__res .v{font-size:15.5px; line-height:1.6; color:var(--ink)}
.tf__res #tRec b{font-family:var(--serif); font-size:28px; color:var(--navy); line-height:1.25}
.tf__go a{font-weight:700; color:var(--ribbon-d); text-decoration:underline; text-underline-offset:3px}
.tf__disc{margin:10px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.55}

/* ── [03] 나라마다 ── */
.cty{padding:72px 0}
.cty__g{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) minmax(0,1.25fr); gap:28px; align-items:center}
.cty__txt p{color:var(--ink-2); font-size:16.5px; margin:0 0 22px}
.cty__map{position:relative}
.cty__map img,.cty__map svg{width:100%; height:auto; display:block}
.cty__map svg{position:absolute; inset:0}
.cty__ln path{fill:none; stroke:var(--navy); stroke-width:2.2; stroke-dasharray:6 7; opacity:.85}
.cty__pin circle{fill:var(--navy); stroke:#fff; stroke-width:3}
.cty__plane{fill:var(--navy)}
.cty__cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ctyc{display:flex; flex-direction:column; gap:2px; height:100%; background:#fff; border:1px solid #E1E5EC; border-radius:var(--r);
  padding:16px 18px; font-size:14.5px; color:var(--ink); transition:border-color .15s}
.ctyc:hover{border-color:var(--ribbon)}
.ctyc__n{display:flex; align-items:center; gap:7px; font-size:16.5px; color:var(--navy); margin-bottom:4px}
.ctyc__n::before{content:""; width:12px; height:16px; background:var(--navy); flex:none;
  clip-path:path("M6 0C2.7 0 0 2.6 0 5.9 0 10.3 6 16 6 16s6-5.7 6-10.1C12 2.6 9.3 0 6 0zm0 8.2A2.3 2.3 0 116 3.6a2.3 2.3 0 010 4.6z")}
.ctyc__s{color:var(--ink-2); font-size:14px}
.ctyc em{font-style:normal; font-weight:700; color:var(--ribbon-d); margin-top:8px; text-decoration:underline; text-underline-offset:3px}

/* ── [04] 시험 카드 ── */
.ex{padding:8px 0 0; background:#fff}
.ex__g{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.exc{position:relative; display:block; min-height:200px; border-radius:var(--r); overflow:hidden; isolation:isolate; color:#fff; background:var(--black)}
.exc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.exc::before{content:""; position:absolute; inset:0; z-index:-1}
.exc--pte::before{background:rgba(20,38,90,.74)}
.exc--ielts::before{background:rgba(10,13,20,.7)}
.exc--toefl::before{background:rgba(74,50,16,.74)}
.exc:hover::before{opacity:.92}
.exc__b{display:flex; flex-direction:column; padding:24px 76px 24px 26px}
.exc__n{font-family:var(--serif); font-size:36px; line-height:1.1}
.exc__t{font-family:var(--serif); font-size:23px; font-weight:700; margin:4px 0 14px}
.exc__d{font-size:15px; line-height:1.6; color:#F0F2F6}
.exc__go{position:absolute; right:20px; bottom:20px; width:38px; height:38px; border-radius:50%; background:#fff}
.exc__go::after{content:""; position:absolute; left:13px; top:13px; width:9px; height:9px; border-top:2px solid var(--navy); border-right:2px solid var(--navy); transform:rotate(45deg)}

/* ── [05] 공식 인증 띠 ── */
.cert{background:#fff; padding:18px 0; border-bottom:1px solid #E7EAF0}
.cert__g{display:flex; align-items:center; gap:28px}
.cert__ph{display:flex; gap:16px; flex:none}
.cert__ph span{display:block; width:132px; height:46px; background:#D9DDE4; border-radius:4px}
.cert__t{display:flex; flex-direction:column; line-height:1.5}
.cert__t b{font-size:15.5px; color:var(--navy)}
.cert__t span{font-size:14px; color:var(--ink)}
.cert__t a{color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#9AA3B5}
.cert__t small{font-size:12.5px; color:var(--ink-2)}

/* ── [06] 준비 세 단계 ── */
.prep{padding:64px 0}
.prep__g{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:36px; align-items:center}
.prep__txt p{color:var(--ink-2); margin:0 0 20px; font-size:16px}
.prep__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:36px}
.prep__c{position:relative; background:#fff; border:1px solid #E1E5EC; border-radius:var(--r); padding:22px 22px 24px}
.prep__c:not(:last-child)::after{content:""; position:absolute; right:-25px; top:50%; width:12px; height:12px;
  border-top:1.5px solid #6B7487; border-right:1.5px solid #6B7487; transform:translateY(-50%) rotate(45deg)}
.prep__top{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.prep__n{font-family:var(--serif); font-size:30px; font-weight:700; color:var(--navy); line-height:1}
.prep__top b{font-family:var(--serif); font-size:19px; color:var(--navy)}
.prep__top svg{margin-left:auto; width:32px; height:32px; fill:none; stroke:var(--navy); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.prep__c p{margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.65}

/* ── [07] 무료 도구 ── */
.free{padding:56px 0}
.free__g{display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; align-items:center}
.free__txt p{margin:0; color:var(--ink-2); font-size:15.5px}
.free__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.freec{display:grid; grid-template-columns:30px 1fr; column-gap:10px; align-items:start; height:100%; background:#fff;
  border:1px solid #E1E5EC; border-radius:var(--r); padding:18px 16px; transition:border-color .15s}
.freec:hover{border-color:var(--ribbon)}
.freec svg{grid-row:1 / 4; width:28px; height:28px; fill:none; stroke:var(--navy); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.freec b{font-size:15.5px; color:var(--navy); line-height:1.4}
.freec span{font-size:13.5px; color:var(--ink-2); margin:4px 0 10px; line-height:1.45}
.freec em{font-style:normal; font-weight:700; font-size:14px; color:var(--ribbon-d); text-decoration:underline; text-underline-offset:3px}

/* ── [08][09] FAQ·블로그 (기존 모양 유지) ── */
.faqs{padding:64px 0}
#blog{padding:64px 0; scroll-margin-top:80px}

/* ── [10] 마무리 띠 ── */
.cl{position:relative; isolation:isolate; color:#fff; background:var(--navy) var(--photo) center 55%/cover no-repeat; padding:46px 0}
.cl::before{content:""; position:absolute; inset:0; background:rgba(13,26,64,.86); z-index:-1}
.cl__g{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px}
.cl .kicker{color:#E7C27A; margin-bottom:6px}
.cl__h{font-family:var(--serif); font-size:clamp(24px,2.8vw,34px); color:#fff; margin:0 0 6px; line-height:1.3}
.cl p{margin:0; color:#D8DDE6; font-size:16px}
.cl__btns{display:flex; flex-wrap:wrap; gap:12px}
.cl .btn--w{color:var(--navy)}
.cl .btn--w:hover{background:#EEF3FF}

/* 영상 대화상자 (main.js ⑥) */
.ytd{border:0; padding:0; background:transparent; width:min(960px,92vw); max-width:none}
.ytd::backdrop{background:rgba(8,11,18,.82)}
.ytd__box{position:relative; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden}
.ytd__box iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ytd__x{position:absolute; right:0; top:-52px; min-height:44px; padding:0 14px; border:1.5px solid rgba(255,255,255,.7); border-radius:6px;
  background:transparent; color:#fff; font:inherit; font-size:15px; cursor:pointer}

/* ─────────── 반응형 ─────────── */
@media (max-width:1279px){
  .page-home .wrap{padding:0 28px}
  .cty__g{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
  .cty__txt{grid-column:1 / 2}
  .cty__map{grid-column:2 / 3}
  .cty__cards{grid-column:1 / -1; grid-template-columns:repeat(4,1fr)}
  .free__g{grid-template-columns:1fr}
  .free__txt h2 br{display:none}
  .free__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
  .page-home .wrap{padding:0 24px}
  .hh{padding:44px 0 40px}
  .hh::before{background:rgba(8,11,18,.66)}
  .hh__g{grid-template-columns:1fr; gap:32px}
  .hh__txt{max-width:none; padding-top:0}
  .hh .ask{max-width:560px}
  .tfs{margin-top:0; padding:36px 0 8px; background:#fff}
  .tf{grid-template-columns:1fr; padding:26px 24px}
  .cty__cards{grid-template-columns:1fr 1fr}
  .ex__g{grid-template-columns:1fr 1fr}
  .exc--toefl{grid-column:1 / -1}
  .prep__g{grid-template-columns:1fr}
  .prep__txt h2 br{display:none}
  .prep__list{gap:28px}
  .prep__c:not(:last-child)::after{right:-20px}
  .free__list{grid-template-columns:1fr 1fr}
  .br-pc{display:none}
}
@media (max-width:767px){
  .page-home .wrap,.page-home .hd .wrap{padding:0 18px}
  .hh{padding:36px 0 32px}
  .hh__bg img{object-position:50% 30%}
  .hh__lead{font-size:16.5px; margin-bottom:24px}
  .hh__nums{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0}
  .hh__nums li{display:flex; flex-direction:column; align-items:flex-start; padding:0 10px}
  .hh__nums svg{width:24px; height:24px; margin-bottom:6px}
  .hh__nums b{font-size:23px}
  .hh__nums span{font-size:13px}
  .hh__cta .btn{flex:1 1 100%}
  .tfs{padding-top:28px}
  .tf{padding:22px 18px}
  .tf__q{grid-template-columns:1fr; gap:8px; padding:8px 0}
  .tf .pchip{min-width:0; padding:8px 14px}
  .cty{padding:52px 0}
  .cty__g{grid-template-columns:1fr; gap:22px}
  .cty__map{display:none}
  .cty__cards{grid-template-columns:1fr}
  .ex__g{grid-template-columns:1fr}
  .exc{min-height:180px}
  .exc__n{font-size:30px}
  .exc__t{font-size:20px; margin-bottom:10px}
  .cert__g{flex-direction:column; align-items:flex-start; gap:14px}
  .cert__ph span{width:118px; height:42px}
  .prep{padding:48px 0}
  .prep__list{grid-template-columns:1fr; gap:30px}
  .prep__c:not(:last-child)::after{right:auto; left:50%; top:auto; bottom:-21px; transform:translateX(-50%) rotate(135deg)}
  .free{padding:48px 0}
  .free__list{grid-template-columns:1fr}
  .faqs,#blog{padding:48px 0}
  .cl{padding:40px 0}
  .cl__btns{width:100%}
  .cl__btns .btn{flex:1 1 100%}
}
@media (min-width:480px) and (max-width:767px){ .free__list{grid-template-columns:1fr 1fr} }
@media (max-width:380px){ .page-home .wrap,.page-home .hd .wrap{padding:0 16px} }