/* ANINA — 3D 작업 화면
   바탕은 스튜디오 회색 계열, 강조는 Maya 타임 슬라이더의 키프레임 빨강 하나.
   섹션 구분은 선이 아니라 바탕색: 작업 화면 → 흰 종이 → 연회색 → 먹. */

@font-face{
  font-family:"SUIT Variable";
  src:url("../assets/fonts/SUIT-Variable.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
}

:root{
  color-scheme:light;
  --stage:#E9E5DC;   /* 뷰포트·이미지 바탕 */
  --paper:#F6F6F4;
  --mist:#ECECE8;
  --bg:var(--paper); /* 섹션마다 바꾼다 */
  --ink:#202022;
  --ink-2:#46464A;
  --ink-3:#6B6B70;
  --line:#D9D9D4;
  --key:#D3261C;     /* 키프레임 빨강 */
  --gutter:clamp(20px,5vw,72px);
  --header:64px;
  --shell:1240px;
  /* 모든 왼쪽 시작선을 본문 상자에 맞춘다 (헤더·히어로 문구·섹션) */
  --edge:max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:var(--header) }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"SUIT Variable","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  font-size:15px; line-height:1.7; letter-spacing:-.005em;
  word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{ margin:0 }
p,li{ text-wrap:pretty }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit }
img{ max-width:100%; display:block }
:focus-visible{ outline:2px solid var(--key); outline-offset:3px; border-radius:4px }

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter) }

.skip-link{ position:absolute; left:16px; top:-60px; padding:10px 14px; background:var(--ink); color:var(--paper); z-index:200 }
.skip-link:focus{ top:12px }

/* ---------- 헤더 ---------- */
.site-header{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--line) }
.header-inner{ display:flex; align-items:center; gap:32px; height:var(--header); padding-inline:var(--edge) }
.brand{ display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; margin-right:auto }
.brand .mark{ width:26px; height:26px }
.brand-word{ font-weight:800; font-size:18px; letter-spacing:.06em }
.site-nav{ display:none; gap:32px }
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:15px; font-weight:700; color:var(--ink); text-decoration:none;
}
.site-nav a:hover{ color:var(--key) }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px;
  background:var(--ink); color:var(--bg); border-radius:8px;
  font-size:15px; font-weight:700; text-decoration:none;
  transition:background-color .15s, color .15s;
}
.btn:hover{ background:var(--key); color:#fff }
.btn-quiet{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink) }
.btn-quiet:hover{ background:var(--ink); color:var(--bg) }

/* ---------- 히어로: 화면을 채운 작업 화면 위에 문구 ---------- */
.hero{
  --bg:var(--stage);
  position:relative; overflow:hidden; background:var(--stage);
  height:calc(100svh - var(--header)); min-height:600px; max-height:1000px;
  container-type:size; /* 캔버스와 같은 크기 → hero3d.js 와 같은 비율 기준 */
}
#hero-3d{ position:absolute; inset:0; width:100%; height:100%; display:block }
.hero-copy{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  width:calc(var(--edge) + min(28rem, 40cqw)); padding-left:var(--edge); /* 나머지는 공이 움직이는 자리 (hero3d.js 가 이 상자를 피한다) */
}
/* 줄은 <br> 로만 나눈다. 글자 크기는 문구 칸 폭에 맞춘다 ("상상을 현실로," ≈ 5.4em) */
.hero-title{ font-size:clamp(34px, calc(min(26rem, 36cqw) / 5.7), 64px); white-space:nowrap; font-weight:800; line-height:1.12; letter-spacing:-.045em }
.hero-lead{ margin-top:20px; max-width:27em; font-size:17px; line-height:1.75; color:var(--ink-2) }
.hero-actions{ margin-top:36px; display:flex; flex-wrap:wrap; gap:12px }

/* 세로로 긴 화면: 문구는 위, 동작은 아래 (hero3d.js 와 같은 1.15 기준) */
@container (max-aspect-ratio:115/100){
  .hero-copy{ width:auto; height:auto; justify-content:flex-start; padding:56px var(--gutter) 0 }
  .hero-title{ font-size:clamp(32px,9.5cqw,52px) }
  .hero-lead{ margin-top:16px; font-size:16px }
  .hero-actions{ margin-top:24px }
}

/* 낮은 가로 화면(가로 모드 휴대폰 등): 문구를 줄여 잘리지 않게 */
@container (min-aspect-ratio:115/100) and (max-height:640px){
  .hero-lead{ margin-top:14px; font-size:15px }
  .hero-actions{ margin-top:20px }
}

/* 로딩: 캔버스 인트로(공 착지 ~1.7초)에 맞춰 문구가 차례로 뜬다. JS 가 없어도 CSS 만으로 동작 */
@keyframes show{ from{ opacity:0; transform:translateY(18px) } }
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{ animation:show .9s cubic-bezier(.2,.7,.2,1) both }
  .hero-title{ animation-delay:1.2s }  /* 공이 떨어지는 동안 뜨기 시작해 착지(1.7초) 무렵 다 보인다 */
  .hero-lead{ animation-delay:1.35s }
  .hero-actions{ animation-delay:1.5s }
}

/* ---------- 섹션 공통 ---------- */
.section{ padding-block:clamp(72px,9vw,128px); background:var(--bg); color:var(--ink) }
.sec-head{ max-width:40em; margin-bottom:clamp(40px,5vw,64px) }
.sec-title{ font-size:clamp(26px,2.6vw,36px); font-weight:800; line-height:1.2; letter-spacing:-.035em; text-wrap:balance }
.sec-sub{ margin-top:12px; font-size:16px; color:var(--ink-2) }

/* ---------- 커리큘럼: 실제 제작 순서라 번호를 단다 ---------- */
.pipeline{ display:grid; gap:48px 28px }
.stage-media{ position:relative; display:block; width:100%; padding:0; border:0; border-radius:12px; overflow:hidden; background:var(--stage); cursor:pointer }
.stage-media img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover }
.stage-media .before{ position:absolute; inset:0; height:100%; opacity:0 }
/* 누를 수 있다는 표시: 재생 삼각형 + 문구 */
.play-hint{ position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 10px; border-radius:999px; background:var(--paper); color:var(--ink); font-size:13px; font-weight:700 }
.play-hint::before{ content:""; width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--key) }
/* 마우스가 있으면 올렸을 때·키보드로 골랐을 때만 보인다. 터치 기기는 작은 글자 표시만 */
@media (hover:hover){
  .play-hint{ opacity:0; transition:opacity .15s }
  .stage-media:hover .play-hint, .stage-media:focus-visible .play-hint{ opacity:1 }
}
@media (hover:none){
  .play-hint{ left:8px; bottom:8px; padding:3px 8px; border-radius:4px; font-size:12px; font-weight:600 }
  .play-hint::before{ content:none }
}
/* 재생: 전 이미지를 잠깐 보여 주고, 빨간 재생선이 지나가며 지금 이미지가 드러난다 */
.stage-media::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--key); opacity:0; pointer-events:none }
.is-playing .before{ animation:wipe 2.4s cubic-bezier(.45,0,.25,1) both }
.is-playing::after{ animation:sweep 2.4s cubic-bezier(.45,0,.25,1) both }
.is-playing .play-hint{ animation:hint-hide 2.4s step-end } /* 재생 중에만 숨기고 끝나면 원래 규칙으로 */
@keyframes wipe{ 0%,30%{ opacity:1; clip-path:inset(0 0 0 0) } 100%{ opacity:1; clip-path:inset(0 0 0 100%) } }
@keyframes sweep{ 0%,30%{ left:0; opacity:1 } 99%{ left:calc(100% - 2px); opacity:1 } 100%{ opacity:0 } }
@keyframes hint-hide{ 0%, 100%{ opacity:0 } }
@media (prefers-reduced-motion:reduce){
  /* 움직임 없이 전 → 후 로 바꿔 보여 주기만 한다 */
  .is-playing .before{ animation:hold 2.4s step-end both }
  .is-playing::after{ animation:none }
}
@keyframes hold{ 0%{ opacity:1 } 100%{ opacity:0 } }
.stage-body{ padding-top:20px }
.stage h3{ display:flex; align-items:baseline; gap:10px; font-size:18px; font-weight:750; letter-spacing:-.02em }
.stage-no{ font-size:14px; font-weight:700; color:var(--key); font-variant-numeric:tabular-nums }
.tools{ margin-top:2px; font-size:14px; color:var(--ink-3) }
.stage p:last-child{ margin-top:8px; font-size:15px; color:var(--ink-2); max-width:30em }

/* ---------- 강점 ---------- */
#why{ --bg:var(--mist) }
.points li{ padding-block:22px; border-top:1px solid var(--line) }
.points li:last-child{ border-bottom:1px solid var(--line) }
.points h3{ font-size:18px; font-weight:750; letter-spacing:-.02em }
.points p{ margin-top:4px; font-size:15px; color:var(--ink-2); max-width:34em }

/* ---------- LMS · CLOUD · 문의: 줄 단위 안내 ---------- */
/* 한 줄: [이름 ··· 바로가기] / 설명 / 기능 목록 */
.svc{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:24px; padding-block:28px; border-top:1px solid var(--line) }
.svc:last-child{ border-bottom:1px solid var(--line) }
.svc-name{ font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2 }
.svc-body{ grid-column:1 / -1; margin-top:12px }
.svc-sub{ font-size:16px; font-weight:600; color:var(--ink) }
.svc .btn{ grid-column:2; grid-row:1; min-height:44px; padding:0 18px; font-size:15px }

/* ---------- 문의: 히어로와 같은 작업 화면 바탕으로 페이지를 닫는다 ---------- */
#contact{ --bg:var(--stage) }
.contact-name{ font-size:22px; font-weight:800; letter-spacing:-.02em }
.contact-name span{ margin-left:10px; font-size:15px; font-weight:600; color:var(--ink-2) } /* --ink-3 은 작업 화면 바탕에서 대비 부족 */
.contact-org{ margin-top:2px; font-size:15px; color:var(--ink-2) }
.contact-mail{ display:inline-flex; align-items:center; min-height:44px; margin-top:8px; font-size:16px; font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:5px }
.contact-mail:hover{ text-decoration-color:var(--key) }

/* ---------- 푸터 ---------- */
.site-footer{ background:var(--mist); border-top:1px solid var(--line) }
.footer-inner{ padding-block:28px; text-align:center }
.legal-links{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center }
.legal-links a{ display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--ink-2); text-decoration:none }
.legal-links a + a::before{ content:""; width:1px; height:12px; margin-inline:16px; background:var(--line) }
.legal-links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px }
.legal-links .strong{ font-weight:800; color:var(--ink) }
.copyright{ font-size:13px; color:var(--ink-2) }
.copyright span{ display:inline-block; margin-left:12px; white-space:nowrap }
.copyright a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink-2); text-underline-offset:3px }

/* ---------- 반응형 ---------- */
@media (min-width:640px){
  .pipeline{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:720px){
  .site-nav{ display:flex }
}
@media (min-width:900px){
}
@media (min-width:960px){
  .pipeline{ grid-template-columns:repeat(3,1fr) }
  .split{ display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:start }
  .split .sec-head{ position:sticky; top:calc(var(--header) + 48px) }
}

/* 헤더 아래 재생 막대: 페이지 스크롤 위치 = 타임 슬라이더 재생 위치 (사용자 스크롤에만 반응) */
@keyframes playhead{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .site-header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
      background:var(--key); transform-origin:0 50%; animation:playhead linear both; animation-timeline:scroll(root) }
  }
}

/* ---------- 약관·방침 문서 ---------- */
.doc{ max-width:46em; margin-inline:auto; padding:clamp(48px,7vw,96px) var(--gutter) 96px }
.doc h1{ font-size:clamp(28px,3.2vw,40px); font-weight:800; letter-spacing:-.03em; text-wrap:balance }
.doc .meta{ margin-top:12px; font-size:15px; color:var(--ink-3) }
.doc h2{ margin-top:48px; font-size:20px; font-weight:750 }
.doc p, .doc li{ margin-top:12px; font-size:16px; color:var(--ink-2) }
.doc ol, .doc ul{ padding-left:1.4em }
.doc ol{ list-style:decimal } .doc ul{ list-style:disc }
.doc table{ width:100%; margin-top:16px; border-collapse:collapse; font-size:15px }
.doc th, .doc td{ padding:10px 12px; border:1px solid var(--line); text-align:left; vertical-align:top }
.doc th{ background:var(--mist); font-weight:700 }
.table-wrap{ overflow-x:auto }
.todo{ background:#FFF1C2; color:#5A4500; padding:0 4px; border-radius:3px; font-weight:600 }
.draft-note{ margin-top:24px; padding:14px 16px; border:1px solid #E7C65B; background:#FFF8DC; border-radius:8px; font-size:15px; color:#5A4500 }