/* ===== 토큰 ===== */
:root{
  --green:#2cff05;      /* 헤드라인·액티브 텍스트 */
  --green-band:#23dc0e; /* 밴드·벡터 그래픽 */
  --green-pill:#4fe82e; /* 버튼·프로그레스 바 */
  --ink-on-green:#06150a;
  --bg:#000;
  --bar:#151515;
  --panel:#0d0d0d;
  --dim:#777;
  --dim2:#5a5a5a;
  --line:#4c4c4c;
  --gray-d2:#d2d2d2;
}

/* ===== 스케일링: 피그마 px ÷ 10 = rem ===== */
/* 데스크탑(1280+): 1920 기준 비례, 2560 이상은 고정(과확대 방지) */
html{font-size:min(calc(100vw/192), 13.3px)}
/* 모바일·태블릿(~1279): 360 기준 비례, 500 이상은 고정(과확대·붕괴 방지) */
@media (max-width:1279px){
  html{font-size:min(calc(100vw/36), 13.9px)}
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:#fff;
  font-family:Pretendard,'Pretendard Variable',-apple-system,sans-serif;
  overflow-x:hidden;
}
/* height:auto 필수: width/height 속성(CLS 힌트)이 CSS width와 결합해 고정 높이로 왜곡되는 것 방지 */
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{background:none;border:0;cursor:pointer}
main{overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.footer-social{display:flex;justify-content:center;gap:1.6rem;margin:2rem 0 1.4rem}
.footer-social .soc{display:inline-flex;width:3.2rem;height:3.2rem;align-items:center;justify-content:center;border:1px solid #3a3a3a;border-radius:50%;color:#d2d2d2;transition:color .2s,border-color .2s}
.footer-social .soc svg{width:1.6rem;height:1.6rem}
.footer-social .soc:hover{color:var(--green);border-color:var(--green)}
@media (min-width:1280px){
  .footer-social{gap:2.2rem;margin:3rem 0 2rem}
  .footer-social .soc{width:4.4rem;height:4.4rem}
  .footer-social .soc svg{width:2.2rem;height:2.2rem}
}

.disp{font-family:TlabMixCoffee,'Black Han Sans',Pretendard,sans-serif;font-weight:400}
/* 폴백(BHS)은 믹스커피체보다 글자폭이 넓어 스펙 크기 그대로면 줄바꿈이 늘어난다.
   zoom 보정으로 스펙 대비 시각 폭을 맞춘다. SVG/정식 폰트 교체 시 이 규칙만 제거. */
.disp.hfall{zoom:.73;letter-spacing:-.02em}
.disp{word-break:keep-all}
h1,h2,h3,h4,p,li,figcaption{word-break:keep-all}

/* ===== 스크롤 프로그레스 바 (1차 디자인 유지) ===== */
#progress{
  position:fixed;top:0;left:0;height:.3rem;width:0;
  background:var(--green-pill);z-index:1000;
}

/* ===== 상단바 ===== */
.topbar{
  position:sticky;top:0;z-index:900;
  display:flex;align-items:center;
  height:7.2rem;background:var(--bar);
  padding:0 5.4rem;gap:4rem;
}
.logo{
  font-family:TlabMixCoffee,'Black Han Sans',Pretendard,sans-serif;
  color:var(--green);font-size:2.4rem;letter-spacing:.04em;white-space:nowrap;
  display:inline-flex;align-items:center;
}
.logo-svg{height:1.7rem;width:auto;display:block;min-height:14px}
.nav-social{display:none}
@media (min-width:1280px){
  .nav-social{display:flex;align-items:center;gap:2.7rem;margin-left:2.6rem} /* 피그마 아이콘 피치 ~50px */
  .nav-social .nsoc{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;color:#d2d2d2;transition:color .2s}
  .nav-social .nsoc svg{width:2.2rem;height:2.2rem}
  .nav-social .nsoc .ic-img{width:2.2rem;height:2.2rem;display:block}
  .nav-social .nsoc:hover{color:var(--green)}
}
.dtnav{display:flex;gap:5rem;margin-left:16rem}
.nv{font-family:Inter,Pretendard,sans-serif;font-size:2rem;color:#fff}
.nv.on{color:var(--green)}
.nv:hover{color:var(--green)}
.cta-pill{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--green-pill);color:var(--ink-on-green);
  font-weight:700;font-size:1.5rem;border-radius:99rem;
  padding:0 2rem;height:3.5rem;white-space:nowrap; /* 피그마 1:163321: 124×35 캡슐 */
}
.burger{display:none}
.mbnav{display:none}

@media (max-width:1279px){
  .topbar{height:4.6rem;background:#000;padding:0 1.5rem;gap:1rem}
  .logo{font-size:1.3rem}
  .dtnav{display:none}
  .cta-pill{
    margin-left:auto;font-size:1rem;font-weight:700;
    padding:.4rem 1rem;height:2.2rem;border-radius:.3rem;
  }
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:.5rem;
    width:2.4rem;height:2.4rem;align-items:center;
    /* 터치 타겟 44px 보장(시각 크기 유지, 히트 영역만 확장) */
    min-width:44px;min-height:44px;
  }
  .burger span{display:block;width:1.4rem;height:.15rem;background:#fff}
  .mbnav{
    display:none;position:fixed;top:4.6rem;left:0;right:0;z-index:890;
    background:var(--panel);text-align:center;padding:1.4rem 0 1.6rem;
  }
  body.menu-open .mbnav{display:block}
  .mnv{
    display:block;font-size:1.1rem;font-weight:700;color:var(--gray-d2);
    padding: .65rem 0;
  }
  .mnv.on{color:var(--green)}
}

/* ===== 디스플레이 헤딩 SVG 폭 (피그마 실측 px ÷ 10 = rem, 규약 1rem=10px) ===== */
img.hsvg{display:block;max-width:100%;height:auto}
img.hsvg.awards-main-title{width:31.5rem;margin:2rem auto}
img.hsvg.diff-title{width:29.3rem;margin:0 auto 2rem}
img.hsvg.reviews-section-title{width:26.7rem;margin:2rem auto}
img.hsvg.cta-title{width:22.5rem;margin:0 auto 1.5rem}
img.hsvg.director-section-title{width:24.7rem;margin-bottom:1rem}
img.hsvg.faq-title{width:18.4rem;margin:5rem auto 3rem;padding:0}
.page-portfolio img.hsvg.h1-style{width:100%;max-width:134.4rem;margin:0 auto 2rem}
.page-portfolio img.hsvg.h2-style{width:100%;max-width:112.8rem;margin:0 auto 2rem}
.page-reviews img.hsvg.h1-style{width:100%;max-width:109.2rem;margin:0 auto 2rem}
.page-curriculum img.hsvg.h-class-feature{width:25.4rem;margin-bottom:2rem}
.page-curriculum img.hsvg.h-fva-curriculum{width:74.1rem;max-width:90%;margin:0 auto 1.6rem}
@media (min-width:1280px){
  img.hsvg.awards-main-title{width:167.5rem}
  img.hsvg.diff-title{width:155.9rem}
  img.hsvg.reviews-section-title{width:141.9rem}
  img.hsvg.cta-title{width:60rem}
  img.hsvg.director-section-title{width:131.9rem}
  img.hsvg.faq-title{width:97.8rem;margin:10rem auto 6rem}
  .page-curriculum img.hsvg.h-class-feature{width:74.1rem}
}

/* ===== 태블릿·중간 폭(768~1279): 모바일 레이아웃을 중앙 칼럼으로 제한 =====
   폰 디자인이 광폭으로 늘어나며 흐트러지는 것을 방지(피그마에 태블릿 시안 없음) */
@media (min-width:768px) and (max-width:1279px){
  main, .mbnav{max-width:52rem;margin-left:auto;margin-right:auto}
  .topbar{padding-left:calc((100vw - 52rem)/2);padding-right:calc((100vw - 52rem)/2)}
  .footer{padding-left:calc((100vw - 52rem)/2);padding-right:calc((100vw - 52rem)/2)}
}

/* ===== 접근성 ===== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--green);color:#000;font-weight:700;
  padding:1rem 1.6rem;border-radius:0 0 .4rem 0;font-size:max(1.2rem,14px);
}
.skip-link:focus{left:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ===== 푸터 ===== */
.footer{padding:6rem 12rem 8rem;text-align:center}
.footer-line{height:.1rem;background:var(--line);opacity:.5;margin-bottom:4rem}
.footer-txt{
  color:var(--line);font-weight:700;font-size:2.8rem;line-height:1.18;
  letter-spacing:-.03em;
}
@media (max-width:1279px){
  .footer{padding:3rem 2.2rem 4rem}
  .footer-line{margin-bottom:2rem}
  .footer-txt{font-size:1.2rem;line-height:1.4}
}

/* ===== 스크롤 리빌 ===== */
.rv{opacity:0;transform:translateY(3rem);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}


/* ===== 피그마 좌표 렌더 ===== */
.fg-root{position:relative;margin:0 auto;overflow:hidden;isolation:isolate}
.fg-n{position:absolute}
.fg-svg{position:absolute;object-fit:contain}
.fg-t{white-space:pre-wrap;word-break:keep-all;overflow:visible}
.fg-img{border-radius:inherit}
h3.fg-t,p.fg-t,div.fg-t,.fg-a{position:absolute;font-weight:inherit}
.fg-a{display:block;cursor:pointer;transition:opacity .2s}
.fg-a:hover{opacity:.75}
.fg-disp{position:absolute;margin:0;font-weight:400;line-height:1}
.fg-disp .fg-svg{position:static;width:100%;height:100%;object-fit:contain}
.fg-fall{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  font-family:'Black Han Sans',Pretendard,sans-serif;color:var(--green);
  font-size:.55em;line-height:1.05;text-align:center}
/* 썸네일 재생 (페이지 문구: "썸네일을 누르면 크게 재생됩니다") */
.fg-play{position:absolute;padding:0;border:0;background:none;cursor:pointer;overflow:hidden}
.fg-play-ico{position:absolute;left:50%;top:50%;width:6.4rem;height:6.4rem;margin:-3.2rem 0 0 -3.2rem;
  border-radius:50%;background:rgba(0,0,0,.55);transition:background .2s,transform .2s}
.fg-play-ico::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-left:2.2rem solid #fff;border-top:1.3rem solid transparent;border-bottom:1.3rem solid transparent}
.fg-play:hover .fg-play-ico{background:var(--green);transform:scale(1.08)}
.fg-play:hover .fg-play-ico::after{border-left-color:#06150a}
.fg-play:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* 영상 모달 */
.vb{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.94);padding:4rem}
.vb.open{display:flex}
.vb-frame{width:min(100%,160rem);aspect-ratio:16/9;border:0}
.vb-close{position:absolute;top:2rem;right:2.4rem;width:4rem;height:4rem;font-size:3rem;
  line-height:1;color:#fff;background:none;border:0;cursor:pointer}
.vb-close:hover{color:var(--green)}
.fg-burger{position:absolute;padding:0;border:0;background:none;cursor:pointer}
.fg-burger:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* 햄버거 패널 — 피그마: 상단 바 46px 아래에 360x200 */
.fg-mnav{position:fixed;left:0;right:0;top:4.6rem;z-index:900;background:#151515;
  border-top:1px solid #2a2a2a}
.fg-mnav[hidden]{display:none}
.fg-mnav-inner{position:relative;margin:0 auto}
body.mnav-open{overflow:hidden}
@media (min-width:1280px){.fg-mnav{display:none}}
.fg-soc{display:block;transition:opacity .2s}
.fg-soc:hover{opacity:.7}
.fg-shot:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* 게시물 상세 모달 (피그마 주석: "게시물 클릭 시 콘텐츠 상세 모달") */
.lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);padding:4rem}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:90vh;object-fit:contain}
.lb-close{position:absolute;top:2rem;right:2.4rem;width:4rem;height:4rem;
  font-size:3rem;line-height:1;color:#fff;background:none;border:0;cursor:pointer}
.lb-close:hover{color:var(--green)}
/* 데스크탑/모바일 스펙 전환 */
.fg-root.dt{display:block}
.fg-root.mb{display:none}
@media (max-width:1279px){
  .fg-root.dt{display:none}
  .fg-root.mb{display:block}
}