/* 레이아웃 — 섹션·컨테이너·히어로·그리드·스크롤 연출
   이 층이 화면의 인상을 결정한다. 컴포넌트보다 먼저 잡는다. */

/* ── 컨테이너 ─────────────────────────────────────────────
   좌우 거터를 컨테이너 하나에서만 준다. 안쪽 요소는 거터를 모른다. */
.container{width:100%;margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.container{padding-inline:32px}}
@media (min-width:1280px){.container{padding-inline:40px}}
.container--sm{max-width:calc(var(--w-sm) + 80px)}
.container--narrow{max-width:calc(var(--w-narrow) + 80px)}
.container--base{max-width:calc(var(--w-base) + 80px)}
.container--wide{max-width:calc(var(--w-wide) + 80px)}
.container--max{max-width:calc(var(--w-max) + 80px)}
.container--full{max-width:none}

/* ── 섹션 ─────────────────────────────────────────────────
   배경은 화면 끝까지 차고, 내용만 컨테이너에 갇힌다.
   면이 바뀌는 것으로 구획을 나눈다. 선이나 카드로 나누지 않는다. */
.section{padding-block:var(--sec-md);position:relative}
.section--sm{padding-block:var(--sec-sm)}
.section--lg{padding-block:var(--sec-lg)}
.section--xl{padding-block:var(--sec-xl)}
.section--flush{padding-block:0}
@media (max-width:767px){
  .section{padding-block:64px}
  .section--lg,.section--xl{padding-block:80px}
  .section--sm{padding-block:48px}
}
.surface-base{background:var(--canvas);color:var(--ink-body)}
.surface-alt{background:var(--canvas-alt);color:var(--ink-body)}
.surface-sunken{background:var(--canvas-sunken);color:var(--ink-body)}
.surface-invert{background:var(--surface-invert);color:var(--canvas)}
.surface-invert :where(h1,h2,h3,h4){color:inherit}
.surface-accent{background:var(--accent-soft);color:var(--ink-body)}

/* 섹션 머리 — 눈썹, 제목, 리드를 한 덩어리로 */
.section-head{display:flex;flex-direction:column;gap:16px;max-width:44rem}
.section-head--center{margin-inline:auto;text-align:center;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-caption);line-height:1;font-weight:600;letter-spacing:.04em;
  color:var(--accent-text);text-transform:uppercase}
.eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor;border-radius:2px}
.section-head--center .eyebrow::before{display:none}
.section-lede{color:var(--ink-muted);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh)}

/* ── 히어로 ───────────────────────────────────────────────
   화면 높이를 채우지 않는다. 내용이 높이를 정한다. */
.hero{position:relative;padding-block:76px 88px;overflow:clip}
@media (min-width:1024px){.hero{padding-block:104px 120px}}
@media (max-width:640px){.hero{padding-block:56px 64px}}
.hero__grid{display:grid;gap:56px;align-items:center}
@media (min-width:1024px){.hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:72px}}
.hero__title{color:var(--ink)}
.hero__lede{margin-top:20px;color:var(--ink-muted);font-size:var(--t-body-lg);
  line-height:var(--t-body-lg-lh);max-width:30rem}
.hero__actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}

/* 히어로 배경 — 은은한 빛무리. 색을 칠하지 않고 빛을 얹는다. */
.aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.aurora::before,.aurora::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.aurora::before{width:620px;height:620px;top:-220px;right:-120px;
  background:radial-gradient(circle,var(--accent-200),transparent 68%)}
.aurora::after{width:520px;height:520px;bottom:-260px;left:-140px;
  background:radial-gradient(circle,var(--violet-200),transparent 68%)}
[data-theme="dark"] .aurora::before,[data-theme="dark"] .aurora::after{opacity:.22}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .aurora::before,
  :root:not([data-theme="light"]) .aurora::after{opacity:.22}
}
.hero > .container{position:relative;z-index:1}

/* 점 격자 배경 */
.dotfield{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 20%,transparent 75%);
  opacity:.6}

/* ── 그리드 ───────────────────────────────────────────────*/
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--gap-sm{gap:12px}
.grid--gap-lg{gap:40px}
@media (max-width:1023px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* 벤토 — 크기가 다른 칸이 섞인 격자. 전부 같은 크기면 지루하다. */
.bento{display:grid;gap:16px;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:minmax(150px,auto)}
.bento > *{grid-column:span 2}
.bento .span-2{grid-column:span 2}
.bento .span-3{grid-column:span 3}
.bento .span-4{grid-column:span 4}
.bento .span-6{grid-column:span 6}
.bento .row-2{grid-row:span 2}
@media (max-width:1023px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento > *,.bento .span-2,.bento .span-3{grid-column:span 2}
  .bento .span-4,.bento .span-6{grid-column:span 4}
}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .bento > *{grid-column:span 1 !important;grid-row:span 1 !important}
}

/* 세로 흐름 */
.stack{display:flex;flex-direction:column;gap:var(--stack,16px)}
.stack--sm{--stack:8px}.stack--lg{--stack:24px}.stack--xl{--stack:40px}
.row{display:flex;align-items:center;gap:var(--row,12px);flex-wrap:wrap}
.row--tight{--row:8px}.row--loose{--row:20px}
.spacer{flex:1}

/* ── 스크롤 연출 ──────────────────────────────────────────
   화면에 들어오면 켜진다. 들어오기 전에도 내용은 읽을 수 있어야 하므로
   투명도는 0이 아니라 0.001에서 시작하지 않는다 — JS 가 꺼지면 그냥 보인다. */
[data-reveal]{
  --reveal-y:20px;
  opacity:0;transform:translate3d(0,var(--reveal-y),0);
  transition:opacity var(--d-6) var(--ease-out),transform var(--d-6) var(--ease-out);
  will-change:opacity,transform}
[data-reveal="sm"]{--reveal-y:12px}
[data-reveal="lg"]{--reveal-y:40px}
[data-reveal="xl"]{--reveal-y:64px}
[data-reveal="scale"]{--reveal-y:24px;transform:translate3d(0,var(--reveal-y),0) scale(.97)}
[data-reveal].is-in{opacity:1;transform:none}
/* 전환이 끝나면 합성 레이어를 걷는다. 남겨두면 메모리를 쓰고 글자 가장자리가 지저분해진다. */
[data-reveal].is-done{will-change:auto;transition:none}
/* 순차 등장 — 자식이 차례로 올라온다 */
[data-reveal-group] > *{transition-delay:calc(var(--i,0) * 70ms)}
/* JS 가 없거나 모션을 줄이는 경우 즉시 보인다 */
.no-js [data-reveal],
html:not(.js) [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}

/* 스크롤 진행 레일 — 화면 왼쪽에 문서 진행도를 눈금으로 표시 */
.railmark{position:fixed;left:24px;top:50%;translate:0 -50%;z-index:var(--z-sticky);
  display:none;flex-direction:column;gap:7px;pointer-events:none}
@media (min-width:1280px){.railmark{display:flex}}
.railmark__tick{position:relative;width:16px;height:1.5px;border-radius:2px;background:var(--line-strong);
  transition:width var(--d-3) var(--ease-out),background-color var(--d-3) var(--ease-out)}
.railmark__tick::before{content:"";position:absolute;inset:50% auto auto 50%;translate:-50% -50%;
  width:44px;height:14px}
.railmark__tick.is-on{width:28px;background:var(--ink)}

/* 상단 진행 막대 */
.progressbar{position:fixed;inset:0 0 auto 0;height:2px;z-index:var(--z-header);
  background:transparent;pointer-events:none}
.progressbar__fill{height:100%;width:0;background:var(--accent);
  transform-origin:left;transition:width 80ms linear}

/* ── 거대 고스트 글자 ─────────────────────────────────────
   푸터 바닥에 브랜드 문구를 크게 깔아 여백을 채운다. 장식이자 마무리다. */
.ghosttype{font-size:clamp(64px,13vw,200px);line-height:.9;font-weight:700;
  letter-spacing:-.04em;color:var(--ink);opacity:.055;user-select:none;
  white-space:nowrap;overflow:hidden}

/* 화면 끝까지 가는 가로 스크롤 띠 */
.marquee{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;
  padding-inline:20px;margin-inline:-20px;scroll-snap-type:x mandatory}
.marquee::-webkit-scrollbar{display:none}
.marquee > *{scroll-snap-align:start;flex:none}