/* 섹션 라이브러리: 소개·랜딩·요금 같은 공개 페이지를 쌓는 역할 단위 덩어리.
   코어(layout·components·modules·fx)의 .section .hero .bento .panel .quotes .phone .dockbar .footer .scene .hscroll .stackcards 를
   조합하고, 코어에 없는 것만 여기서 더한다. 색은 역할 토큰만 쓴다. 다크 모드는 토큰이 알아서 따라온다.
   동작이 필요한 것(월/연 전환·메가 메뉴·하단 바 비켜서기·흐르는 띠 멈춤)은 js/sections.js 가 맡는다.
   문서: docs/08_sections.md */

/* ══ 공통 조합 ═══════════════════════════════════════════
   인라인 style 로 간격을 주지 않기 위한 조각들. */
.section-body{margin-top:var(--s-48)}
.section-body--xs{margin-top:var(--s-12)}
.section-body--sm{margin-top:var(--s-24)}
.section-body--lg{margin-top:var(--s-64)}
@media (max-width:640px){.section-body{margin-top:var(--s-40)}.section-body--lg{margin-top:var(--s-48)}}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12)}
.btn-row--center{justify-content:center}
/* 좁은 폭에서는 버튼을 가로로 꽉 채워 쌓는다. 한 줄에 둘을 억지로 넣으면 글자가 잘리거나 버튼이 제각각 줄바꿈된다. */
@media (max-width:479px){.btn-row--fill > .btn,.btn-row--fill > .pill{flex:1 1 100%;justify-content:center}}
.text-center{text-align:center}
/* 앞 섹션과 같은 면이면 위 여백을 빼 한 덩어리로 잇는다. 같은 면 둘의 여백이 겹쳐 빈 화면이 생기지 않게. */
.section--join{padding-top:0 !important}
/* 제목 줄 나눔: <br> 대신 줄마다 블록으로 둔다. 줄마다 따로 균형을 잡고, 크로미움이 br 이 든 제목에 balance 를 포기하는 문제를 피한다. */
.title-line{display:block}

/* 섹션 안의 글은 어절 단위로 줄을 바꾼다. span·div 로 쓴 글(아코디언 답·목업·메타 줄)도 "돼/요"처럼 낱글자에서 끊기지 않게
   덩어리 쪽에 한 번 준다(word-break 는 물려받는다). nowrap 인 곳은 그대로 한 줄이다. */
:where(.hero,.page-hero,.logos,.problem,.features,.split,.steps-flow,.bento,.usecases,.stackcards,.stats-band,.testimonial,.testimonials,
  .plans,.compare,.faq,.cta-final,.trust,.footer--site,.stage,.mock){word-break:keep-all;overflow-wrap:break-word}

/* 첫 화면 글자는 관찰을 기다리지 않고 차례로 올라온다. 지연은 모션 토큰 단계로만 준다. */
.rise{animation:rise var(--d-7) var(--ease-out) backwards}
.rise--lg{animation-name:rise-lg}
.rise--2{animation-delay:var(--d-1)}
.rise--3{animation-delay:var(--d-3)}
.rise--4{animation-delay:var(--d-4)}
.rise--5{animation-delay:var(--d-5)}
.rise--6{animation-delay:var(--d-6)}
@keyframes rise-lg{from{opacity:0;transform:translate3d(0,var(--s-28),0);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* 빛: 색을 칠하지 않고 빛을 얹는다. 역할 토큰을 투명하게 섞어 다크 모드에서도 같은 느낌을 낸다.
   얹는 쪽(.glow-host)이 넘침을 자르고 내용을 빛 위로 올린다. */
.glow-host{position:relative;overflow:clip;isolation:isolate}
.glow-host > .container{position:relative;z-index:1}
.glow{position:absolute;z-index:0;pointer-events:none;width:var(--glow-size,min(720px,150%));max-width:none;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow-color,var(--accent)) 34%,transparent) 0%,transparent 66%)}
/* 빛의 가운데를 모서리에 맞춘다. 판이 좁아져도(모바일) 빛이 엉뚱한 쪽으로 옮겨 가지 않는다. */
.glow--tl{top:0;left:0;translate:-42% -42%}
.glow--tr{top:0;right:0;translate:42% -42%}
.glow--bl{bottom:0;left:0;translate:-42% 42%}
.glow--br{bottom:0;right:0;translate:42% 42%}
.glow--note{--glow-color:var(--note-text)}
.glow--good{--glow-color:var(--good-text)}

/* 반전면 보정: 반전면(.surface-invert) 위의 눈썹·리드·보조 버튼·보조 글자를 면에 맞춘다. 역할색 그대로면 대비가 모자란다. */
.surface-invert .eyebrow{color:inherit;opacity:.72}
.surface-invert .section-lede{color:inherit;opacity:.78}
.surface-invert .ink-muted,.surface-invert .ink-subtle{color:inherit;opacity:.72}
.surface-invert .btn--secondary{background:color-mix(in srgb,var(--canvas) 12%,transparent);color:inherit}
.surface-invert .btn--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--canvas) 20%,transparent)}

/* 장면 번호: 두 자리 숫자 + 짧은 선. 스크롤 장면·쌓이는 카드의 단계 머리.
   순번은 보통 숫자로 둔다(고정폭 숫자의 1 은 칸 가운데 떠서 '0 1' 처럼 벌어져 보인다). */
.step-no{display:inline-flex;align-items:center;gap:var(--s-8);color:var(--accent-text);font-weight:700;
  font-size:var(--t-caption);line-height:var(--t-caption-lh)}
.step-no::after{content:"";width:var(--s-24);height:1.5px;border-radius:var(--r-full);background:currentColor;opacity:.5}

/* 이니셜 아바타는 extras 의 .avatar--text(+ --accent --good --note --warn)·.avatars 를 쓴다. 여기서는 큰 자리의 글자 크기만 맞춘다. */
.quotes__face.avatar--text{font-size:var(--t-heading-md)}
.testimonial__by .avatar--text{font-size:var(--t-body-lg)}

/* ══ 상단 내비(사이트) ════════════════════════════════════
   코어 .nav 에 더한다. 맨 위에서는 투명해 첫 화면의 빛이 비치고, 내리면 코어 [data-stuck] 이 흐린 유리를 깐다.
   1024px 부터 가운데 메뉴(.nav--balanced), 그 아래는 서랍. 로그인은 넓은 화면에만, 햄버거는 좁은 화면에만. */
.nav--site .nav__login{display:none}
@media (min-width:1024px){.nav--site .nav__login{display:inline-flex}.nav--site .nav__burger{display:none}}
/* 첫 화면이 내비 밑까지 차오르게 한다. 다음 첫 섹션에 .under-nav 를 붙여 내비 높이만큼 안쪽을 늘린다. */
.nav--float{margin-bottom:calc(-1 * var(--nav-h))}
.hero.under-nav{padding-top:calc(var(--nav-h) + 76px)}
@media (min-width:1024px){.hero.under-nav{padding-top:calc(var(--nav-h) + 104px)}}
@media (max-width:640px){.hero.under-nav{padding-top:calc(var(--nav-h) + 56px)}}

.nav__menu{position:relative;display:flex;align-items:center;gap:var(--s-2)}
/* 패널을 메뉴 줄 전체 기준으로 가운데에 둔다. 항목 기준이면 첫 항목의 패널이 왼쪽으로 쏠린다. */
.nav__item{position:static}
.nav__trigger{gap:var(--s-4);cursor:pointer}
.nav__chev{color:var(--ink-subtle);transition:transform var(--d-3) var(--ease-out),color var(--d-2) var(--ease-inout)}
.nav__trigger[aria-expanded="true"]{background:var(--tint);color:var(--ink)}
.nav__trigger[aria-expanded="true"] .nav__chev{transform:rotate(180deg);color:var(--ink-body)}

/* 메가 메뉴 패널: 닫힌 동안에도 그려 두고 visibility 로 탭 순서에서 뺀다. 등장은 ease-out, 퇴장은 ease-in. */
.mega{position:absolute;top:calc(100% + var(--s-8));left:50%;translate:-50% 0;z-index:var(--z-pop);
  width:min(720px,calc(100vw - var(--s-32)));padding:var(--s-12);
  background:var(--surface);border-radius:var(--r-2xl);box-shadow:var(--sh-pop);
  opacity:0;visibility:hidden;transform:translateY(calc(-1 * var(--s-8))) scale(.98);transform-origin:top center;
  transition:opacity var(--d-2) var(--ease-in),transform var(--d-2) var(--ease-in),visibility 0s linear var(--d-2)}
/* 버튼과 패널 사이 틈을 마우스가 지나가도 닫히지 않게 잇는 투명 다리 */
.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--s-16)}
.nav__item[data-open] .mega{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out),visibility 0s}
html:not(.js) .nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,200px);gap:var(--s-12)}
.mega__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);align-content:start}
.mega__link{display:flex;align-items:flex-start;gap:var(--s-12);min-height:44px;padding:var(--s-12);
  border-radius:var(--r-lg);color:var(--ink);transition:background-color var(--d-2) var(--ease-inout)}
.mega__link:hover,.mega__link:focus-visible{background:var(--tint)}
.mega__link[aria-current="page"]{background:var(--accent-soft)}
.mega__icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-md);
  background:var(--canvas-alt);color:var(--accent-text);
  transition:background-color var(--d-2) var(--ease-inout),color var(--d-2) var(--ease-inout),transform var(--d-3) var(--ease-out)}
.mega__link:hover .mega__icon{background:var(--accent);color:var(--accent-ink);transform:translateY(calc(-1 * var(--s-2)))}
.mega__text{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.mega__title{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:600;color:var(--ink)}
.mega__desc{font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted)}
/* 패널 오른쪽 소식 칸: 연한 그라데이션 면(.panel--sky 등) 위 */
.mega__aside{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-16);border-radius:var(--r-lg);color:var(--ink);
  transition:transform var(--d-3) var(--ease-out)}
.mega__aside:hover{transform:translateY(calc(-1 * var(--s-2)))}
.mega__eyebrow{font-size:var(--t-micro);font-weight:700;color:var(--accent-text)}
.mega__aside-title{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:600;text-wrap:pretty}
.mega__aside-more{margin-top:auto;display:inline-flex;align-items:center;gap:var(--s-4);font-size:var(--t-caption);font-weight:600;color:var(--ink-muted)}
/* 패널 항목이 살짝 늦게 차례로 올라온다 */
.nav__item[data-open] .mega__items > li,.nav__item[data-open] .mega__aside{animation:rise var(--d-4) var(--ease-out) both}
.nav__item[data-open] .mega__items > li:nth-child(2){animation-delay:calc(var(--d-1) / 4)}
.nav__item[data-open] .mega__items > li:nth-child(3){animation-delay:calc(var(--d-1) / 2)}
.nav__item[data-open] .mega__items > li:nth-child(4){animation-delay:calc(var(--d-1) * 3 / 4)}
.nav__item[data-open] .mega__aside{animation-delay:var(--d-1)}
:where(.mega,.drawer--site){word-break:keep-all;overflow-wrap:break-word}

/* ── 서랍(사이트) ─────────────────────────────────────────
   머리(브랜드·닫기) 고정, 가운데만 스크롤, 바닥에 주 버튼 고정. 코어 .drawer 의 열고 닫기를 그대로 쓴다. */
.drawer--site .drawer__panel{display:flex;flex-direction:column;padding:0;overflow:hidden;width:min(88vw,380px)}
.drawer--site .drawer__head{flex:none;display:flex;align-items:center;gap:var(--s-8);
  padding:calc(var(--safe-t) + var(--s-8)) var(--s-12) var(--s-8) var(--s-20);box-shadow:inset 0 -1px 0 var(--line)}
.drawer--site .drawer__head .nav__brand{margin-right:auto}
.drawer--site .drawer__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-4) var(--s-20) var(--s-16)}
.drawer--site .drawer__item{min-height:56px}
.drawer--site .accordion__trigger{min-height:56px;padding:var(--s-12) 0;font-size:var(--t-body-lg)}
/* 접힌 묶음의 링크는 탭 순서에서 뺀다(높이 전환이 끝난 뒤 숨김) */
.drawer--site .accordion__panel{transition:height var(--d-4) var(--ease-inout),visibility 0s linear var(--d-4)}
.drawer--site .accordion__trigger[aria-expanded="false"] + .accordion__panel{visibility:hidden}
.drawer--site .accordion__trigger[aria-expanded="true"] + .accordion__panel{transition:height var(--d-4) var(--ease-inout),visibility 0s}
.drawer--site .drawer__links{display:flex;flex-direction:column;gap:var(--s-2);padding-bottom:var(--s-12)}
.drawer--site .drawer__link{display:flex;align-items:center;gap:var(--s-12);min-height:48px;padding:var(--s-8);border-radius:var(--r-lg);color:var(--ink);
  font-size:var(--t-body-md);font-weight:500}
.drawer--site .drawer__link:active{background:var(--tint)}
.drawer--site .drawer__link .mega__icon{width:32px;height:32px}
.drawer--site .drawer__foot{flex:none;display:flex;flex-direction:column;gap:var(--s-8);
  padding:var(--s-16) var(--s-20) calc(var(--safe-b) + var(--s-16));background:var(--surface);box-shadow:inset 0 1px 0 var(--line)}
/* 서랍이 열리면 묶음이 위에서부터 차례로 올라오고, 바닥 버튼은 그 뒤에 떠오른다 */
.drawer--site[data-open] .drawer__body > *{animation:rise var(--d-5) var(--ease-out) both;animation-delay:var(--d-1)}
.drawer--site[data-open] .drawer__body > :nth-child(2){animation-delay:calc(var(--d-1) * 1.4)}
.drawer--site[data-open] .drawer__body > :nth-child(3){animation-delay:calc(var(--d-1) * 1.8)}
.drawer--site[data-open] .drawer__body > :nth-child(n+4){animation-delay:calc(var(--d-1) * 2.2)}
.drawer--site[data-open] .drawer__foot{animation:rise var(--d-5) var(--ease-out) both;animation-delay:calc(var(--d-1) * 2.4)}

/* ══ 히어로 ═══════════════════════════════════════════════
   코어 .hero(내용이 높이를 정한다, 화면 높이를 채우지 않는다)에 변형을 더한다.
   --center 가운데 정렬 + 아래 무대 · --split 왼쪽 글 + 오른쪽 무대(코어 .hero__grid) · --photo 사진 위 글. */
.hero__badge{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--c-md-h);margin-bottom:var(--s-24);
  padding:var(--s-4) var(--s-12) var(--s-4) var(--s-6);border-radius:var(--r-full);
  background:color-mix(in srgb,var(--surface) 72%,transparent);box-shadow:inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:var(--t-caption);line-height:1.3;font-weight:600;color:var(--ink-body);
  transition:background-color var(--d-2) var(--ease-inout)}
.hero__badge .badge{flex:none}
.hero__badge .ico{flex:none;color:var(--ink-subtle);transition:transform var(--d-3) var(--ease-out)}
a.hero__badge:hover{background:var(--surface)}
a.hero__badge:hover .ico{transform:translateX(3px)}
.hero__title em{font-style:normal;color:var(--accent-text)}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-12);margin-top:var(--s-24);
  font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.hero__meta strong{color:var(--ink);font-weight:600}

.hero--center .hero__copy{display:flex;flex-direction:column;align-items:center;max-width:62rem;margin-inline:auto;text-align:center}
.hero--center .hero__lede{margin-inline:auto;max-width:36rem}
.hero--center .hero__actions,.hero--center .hero__meta{justify-content:center}
.hero--split .hero__lede{max-width:34rem}

/* 빛무리는 첫 화면 아래로 갈수록 스러지게 한다. 다음 섹션도 같은 면이면 잘린 경계가 선처럼 보인다. */
.hero > .bg-aurora,.page-hero > .bg-aurora{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 96%);mask-image:linear-gradient(180deg,#000 50%,transparent 96%)}

/* 사진 첫 화면: 사진 위 글자와 그늘은 media-ink·media-shade 역할 토큰(모드와 상관없이 사진 위에서 읽힌다) */
.hero--photo{color:var(--media-ink);isolation:isolate}
.hero__photo{position:absolute;inset:0;z-index:-2}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero--photo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--media-shade) 0%,transparent 40%,transparent 55%,var(--media-shade) 100%)}
.hero--photo .hero__title,.hero--photo .hero__lede,.hero--photo .hero__meta,.hero--photo .hero__meta strong{color:var(--media-ink)}
.hero--photo .hero__lede,.hero--photo .hero__meta{opacity:.88}
@media (min-width:1024px){.hero--photo{padding-block:160px 144px}}

/* ── 무대: 첫 화면의 기기 목업과 떠 있는 조각 ─────────────
   폰 뒤에 빛 한 덩어리, 옆에 떠 있는 카드(시차는 data-parallax). 좁은 화면에서도 조각 둘은 남겨 폰 가장자리에 걸친다.
   조각의 크기 줄임은 transform 대신 scale 속성으로 준다. transform 은 시차가 프레임마다 쓴다. */
.stage{position:relative;display:grid;place-items:center;margin-top:var(--s-64);padding-block:var(--s-32) var(--s-48)}
.stage__glow{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(640px,120%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent) 0%,color-mix(in srgb,var(--note-text) 8%,transparent) 40%,transparent 70%)}
.stage .phone{position:relative;z-index:1}
.stage__chip{position:absolute;z-index:2;width:max-content;max-width:228px}
.stage__card{display:flex;align-items:center;gap:var(--s-10);padding:var(--s-12) var(--s-16) var(--s-12) var(--s-12);border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:var(--sh-lg),inset 0 0 0 1px var(--line);text-align:left;
  animation:bob 7s var(--ease-inout) infinite alternate}
.stage[data-fx-idle] .stage__card{animation-play-state:paused}
.stage__chip:nth-of-type(2n) .stage__card{animation-duration:9s;animation-delay:-3s}
.stage__icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-text)}
.stage__icon--good{background:var(--good-soft);color:var(--good-text)}
.stage__icon--note{background:var(--note-soft);color:var(--note-text)}
.stage__text{display:flex;flex-direction:column;min-width:0}
.stage__k{font-size:var(--t-micro);line-height:var(--t-micro-lh);color:var(--ink-muted)}
.stage__v{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:600;color:var(--ink);white-space:nowrap}
@keyframes bob{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-1 * var(--s-10)),0)}}
.stage__chip--tl{top:14%;right:calc(50% + 116px)}
.stage__chip--bl{bottom:20%;right:calc(50% + 150px)}
.stage__chip--tr{top:28%;left:calc(50% + 132px)}
.stage__chip--br{bottom:9%;left:calc(50% + 104px)}
@media (max-width:899px){
  .stage{margin-top:var(--s-48);padding-block:var(--s-24) var(--s-32)}
  .stage__chip--bl,.stage__chip--tr{display:none}
  .stage__chip{max-width:196px;scale:.9}
  .stage__chip--tl{top:9%;right:auto;left:calc(50% - 176px);transform-origin:left top}
  .stage__chip--br{bottom:11%;left:auto;right:calc(50% - 176px);transform-origin:right bottom}
}
@media (max-width:374px){.stage__chip--tl{left:0}.stage__chip--br{right:0}}

/* ══ 로고 띠 ══════════════════════════════════════════════
   코어 .ticker 위에 얹는다. 같은 두 묶음을 이어 붙여 -50% 에서 끊김 없이 돈다(묶음 안 간격 = 묶음 사이 간격).
   화면 밖에서는 멈추고(sections.js), 멈춤 버튼이 있다(움직이는 내용은 멈출 수 있어야 한다). */
.logos{padding-block:var(--s-40) var(--s-64)}
.logos__head{display:flex;align-items:center;justify-content:center;gap:var(--s-4)}
.logos__title{font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;color:var(--ink-muted);text-align:center}
.logos .ticker{margin-top:var(--s-16)}
.logos .ticker__track{gap:0;animation-duration:44s}
.logos__group{display:flex;flex:none;align-items:center;gap:var(--s-56);padding-right:var(--s-56)}
.logos__item{display:inline-flex;align-items:center;gap:var(--s-8);height:var(--s-48);white-space:nowrap;
  color:var(--ink-subtle);font-size:var(--t-heading-sm);font-weight:700;letter-spacing:-.02em}
.logos__item .ico{width:26px;height:26px}
.ticker[data-paused] .ticker__track{animation-play-state:paused}
.ticker-toggle[hidden]{display:none}
/* 움직임 줄이기: 멈춘 띠는 양 끝 로고가 잘린 채 서 있다. 흐르지 않는 한 벌(aria-hidden 둘째 묶음은 뺀다)을 가운데 정렬로 줄바꿈해 다 보인다 */
@media (prefers-reduced-motion:reduce){
  .logos .ticker{-webkit-mask-image:none;mask-image:none}
  .logos .ticker__track{width:auto;flex-wrap:wrap;justify-content:center}
  .logos__group{flex:1 1 auto;flex-wrap:wrap;justify-content:center;row-gap:var(--s-12);padding-right:0}
  .logos__group[aria-hidden="true"]{display:none}
}

/* ══ 문제 제시 ════════════════════════════════════════════
   큰 문장(.lit 으로 단어가 차례로 진해진다)과 겪는 일 알약. */
.problem{display:grid;gap:var(--s-40)}
@media (min-width:1024px){.problem{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s-64);align-items:end}}
.pains{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.pain{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--c-md-h);padding:var(--s-6) var(--s-20) var(--s-6) var(--s-6);
  border-radius:var(--r-full);background:var(--surface);box-shadow:var(--sh-xs);
  font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:600;color:var(--ink-body)}
.pain__icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--canvas-sunken);color:var(--ink-muted)}

/* ══ 기능 목록 ════════════════════════════════════════════
   코어 .feature(아이콘·제목·설명, 카드가 아니다)를 격자로 늘어놓는다. */
.features{display:grid;gap:var(--s-40) var(--s-32);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.features--3{grid-template-columns:repeat(3,minmax(0,1fr))}.features--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ══ 두 칸: 제목 + 목록 ══════════════════════════════════
   1024px 부터 두 칸, 제목이 붙어 따라온다. 목록이 길어도 무엇에 대한 목록인지 놓치지 않는다. */
.split{display:grid;gap:var(--s-32)}
@media (min-width:1024px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s-64);align-items:start}
  .split > .section-head{position:sticky;top:calc(var(--nav-h) + var(--s-40))}
  .split--center{align-items:center}
  .split--center > .section-head{position:static}
  .split--reverse > :first-child{order:2}
}
.split__list{display:flex;flex-direction:column;gap:var(--s-32)}
.split__list p{margin-top:var(--s-8)}

/* 체크 목록 */
.checks{display:flex;flex-direction:column;gap:var(--s-10)}
.checks li{display:flex;gap:var(--s-10);align-items:flex-start;color:var(--ink-body)}
.checks .ico{flex:none;margin-top:3px;color:var(--good-text)}
.checks--muted .ico{color:var(--ink-subtle)}
.checks--invert li,.checks--invert .ico{color:inherit}
.checks--cards{gap:var(--s-8)}
.checks--cards li{align-items:center;gap:var(--s-12);padding:var(--s-16) var(--s-20);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-xs)}
.checks--cards .ico{margin-top:0;width:36px;height:36px;padding:var(--s-8);border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-text)}

/* ══ 단계 흐름 ════════════════════════════════════════════
   번호와 잇는 선. 좁은 화면은 세로(왼쪽 선), 768px 부터 가로(위쪽 선). 칸 수는 --n.
   보이면(data-reveal 의 is-in) 선이 차례로 채워진다. 모션 축소면 처음부터 채워져 있다. */
.steps-flow{--n:3;display:grid;gap:var(--s-32)}
@media (min-width:768px){.steps-flow{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--s-24)}}
.steps-flow__item{position:relative;display:flex;flex-direction:column;gap:var(--s-8);padding-left:var(--s-56)}
.steps-flow__no{position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:var(--t-body-sm);font-variant-numeric:tabular-nums;z-index:1}
.steps-flow__title{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);letter-spacing:var(--t-heading-sm-ls);font-weight:600;color:var(--ink);padding-top:var(--s-6)}
.steps-flow__desc{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.steps-flow__item:not(:last-child)::before,.steps-flow__item:not(:last-child)::after{content:"";position:absolute;border-radius:var(--r-full)}
.steps-flow__item:not(:last-child)::before{left:19px;top:48px;bottom:calc(-1 * var(--s-32) + var(--s-8));width:2px;background:var(--line)}
.steps-flow__item:not(:last-child)::after{left:19px;top:48px;bottom:calc(-1 * var(--s-32) + var(--s-8));width:2px;background:var(--accent);
  transform-origin:top;transform:scaleY(0);transition:transform var(--d-7) var(--ease-out);transition-delay:calc(var(--d-4) + var(--i,0) * var(--d-5))}
@media (min-width:768px){
  .steps-flow__item{padding-left:0;padding-top:var(--s-56)}
  .steps-flow__title{padding-top:0}
  .steps-flow__item:not(:last-child)::before,.steps-flow__item:not(:last-child)::after{left:52px;right:calc(-1 * var(--s-24) + var(--s-12));top:19px;bottom:auto;width:auto;height:2px}
  .steps-flow__item:not(:last-child)::after{transform-origin:left;transform:scaleX(0)}
}
.steps-flow.is-in .steps-flow__item::after,html:not(.js) .steps-flow__item::after{transform:none}
@media (prefers-reduced-motion:reduce){.steps-flow__item::after{transform:none !important}}

/* ══ 벤토 칸 ══════════════════════════════════════════════
   코어 .bento 격자 안에 넣는 칸. 주인공 칸(--hero)은 하나만. 테두리 없이 면으로 구분한다. */
.tile{position:relative;display:flex;flex-direction:column;gap:var(--s-10);min-height:100%;padding:var(--s-28);
  border-radius:var(--r-2xl);background:var(--surface);overflow:hidden;isolation:isolate;
  transition:transform var(--d-3) var(--ease-out)}
@media (hover:hover){.tile:hover{transform:translateY(-3px)}}
@media (max-width:640px){.tile{padding:var(--s-24)}}
.tile__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);margin-bottom:var(--s-6);
  background:var(--accent-soft);color:var(--accent-text)}
.tile__title{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);letter-spacing:var(--t-heading-sm-ls);font-weight:600;color:var(--ink)}
.tile__desc{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.tile__media{margin-top:auto;padding-top:var(--s-16)}
.tile--hero{color:var(--accent-ink);background:linear-gradient(150deg,var(--accent) 0%,var(--accent-hover) 100%)}
.tile--hero .tile__title{font-size:var(--t-heading-lg);line-height:var(--t-heading-lg-lh);letter-spacing:var(--t-heading-lg-ls);font-weight:700}
.tile--hero .tile__title,.tile--hero .tile__desc{color:inherit}
.tile--hero .tile__desc{opacity:.86;font-size:var(--t-body-md);line-height:var(--t-body-md-lh);max-width:30rem}
.tile--hero .tile__icon{background:color-mix(in srgb,var(--accent-ink) 16%,transparent);color:inherit}
.tile--hero.spotlight::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent-ink) 18%,transparent),transparent 70%)}
/* 주인공 칸 오른쪽 위의 빛 고리: 칠한 면에 깊이를 준다 */
.tile--hero::after{content:"";position:absolute;z-index:-1;right:-20%;top:-35%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-ink) 22%,transparent),transparent 65%)}
/* 칠한 주인공 칸 위의 목업 조각: 면 색을 투명하게 섞어 칸과 한 몸처럼 보이게 한다 */
.tile--hero .mock__slot{background:color-mix(in srgb,var(--accent-ink) 14%,transparent);color:inherit;box-shadow:none}
.tile--hero .mock__slot--on{background:var(--accent-ink);color:var(--accent)}
.tile--hero .mock__chip{background:color-mix(in srgb,var(--accent-ink) 14%,transparent);color:inherit}
.tile--hero .mock__label{color:inherit;opacity:.72}
.tile--invert{background:var(--surface-invert);color:var(--canvas)}
.tile--invert .tile__title{color:inherit}
.tile--invert .tile__desc{color:inherit;opacity:.74}
.tile--invert .tile__icon{background:color-mix(in srgb,var(--canvas) 12%,transparent);color:inherit}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}

/* ══ 사용 사례 가로 띠 ════════════════════════════════════
   코어 .hscroll 위에 얹는다. 768px 부터 세로 스크롤이 띠를 민다(구역 높이 --hscroll-h), 그 아래는 넘기는 띠 + 진행 점.
   띠의 첫 카드를 컨테이너 왼쪽 선에 맞춘다. */
.usecases{--hscroll-h:calc(var(--fx-vh) * 2.6)}
.usecases__inner{width:100%;padding-block:var(--sec-lg)}
@media (max-width:767px){.usecases__inner{padding-block:var(--s-80)}}
/* fx.css 가 이 파일 뒤에 불리므로 코어 .hscroll__track 을 덮을 때는 두 단계 선택자로 적는다 */
.usecases .usecases__track{margin-top:var(--s-32)}
@media (min-width:768px){
  .usecases__inner{padding-block:0}
  .usecases .usecases__track{margin-top:var(--s-40);padding-inline:max(var(--s-32),calc((100vw - var(--w-wide)) / 2 + var(--s-40)))}
}
.usecase{display:flex;flex-direction:column;gap:var(--s-12);padding:var(--s-28);border-radius:var(--r-2xl);background:var(--canvas-alt)}
.usecase.hscroll__card{width:min(84vw,380px)}
@media (min-width:768px){.usecase.hscroll__card{width:min(44vw,440px);min-height:440px}}
.usecase__visual .mock__row,.usecase__visual .mock__msg{box-shadow:var(--sh-xs)}
.usecase__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.usecase__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--surface);color:var(--accent-text);box-shadow:var(--sh-xs)}
.usecase__visual{margin-top:var(--s-8)}
.usecase__note{margin-top:auto;padding-top:var(--s-16);box-shadow:inset 0 1px 0 var(--line);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}

/* ══ 쌓이는 기둥 카드 ════════════════════════════════════
   코어 .stackcards__item 안에 둔다. 쌓일 때 뒤 카드가 비치지 않게 배경은 불투명하게(연한 역할색을 면 위에 겹친다). */
.pillar{display:grid;gap:var(--s-24);padding:var(--s-48);border-radius:var(--r-3xl);background:var(--surface)}
@media (min-width:768px){.pillar{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-48);align-items:center}}
@media (min-width:1024px){.pillar{padding:var(--s-64)}}
@media (max-width:767px){.pillar{padding:var(--s-24);gap:var(--s-20);border-radius:var(--r-2xl)}}
.pillar--accent{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface)}
.pillar--good{background:linear-gradient(var(--good-soft),var(--good-soft)),var(--surface)}
.pillar--note{background:linear-gradient(var(--note-soft),var(--note-soft)),var(--surface)}
.pillar__copy{display:flex;flex-direction:column;gap:var(--s-12)}
.pillar__visual{padding:var(--s-16);border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-md)}
.pillar__visual .mock__row,.pillar__visual .mock__msg{background:var(--canvas-alt);box-shadow:none}
@media (min-width:768px){.pillar__visual{padding:var(--s-24)}}

/* ══ 숫자 띠 ══════════════════════════════════════════════
   숫자가 주인공일 때만. 칸 사이는 세로 선 하나. 좁은 화면 2열, 768px 부터 4열(--3 은 늘 3열).
   숫자는 data-count 로 들어올 때 한 번 센다(fx.js). 반전면에서는 선과 글자가 면을 따른다. */
.stats-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-40) var(--s-16)}
@media (min-width:768px){.stats-band{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-24)}}
.stats-band--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats-band__item{display:flex;flex-direction:column;gap:var(--s-8);padding-left:var(--s-20);box-shadow:inset 1px 0 0 var(--line)}
@media (max-width:639px){.stats-band__item{padding-left:var(--s-16)}}
.stats-band__value{order:-1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.stats-band__label{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.surface-invert .stats-band__item{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--canvas) 18%,transparent)}
.surface-invert .stats-band__value{color:inherit}
.surface-invert .stats-band__label{color:inherit;opacity:.72}

/* ══ 고객 이야기 ══════════════════════════════════════════
   .testimonial 한 사람의 큰 인용(옆에 결과 숫자) · 여럿은 코어 .quotes 캐러셀을 .testimonials 판 위에. */
.testimonial{display:grid;gap:var(--s-40);align-items:center}
@media (min-width:1024px){.testimonial{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s-80)}}
.testimonial__quote{display:flex;flex-direction:column;gap:var(--s-28)}
.testimonial__mark{display:block;height:var(--s-40);font-family:var(--font);font-size:96px;line-height:1;font-weight:800;color:var(--accent-text)}
.testimonial__text{color:var(--ink)}
.testimonial__by{display:flex;align-items:center;gap:var(--s-12)}
.testimonial__name{display:block;font-weight:600;color:var(--ink)}
.testimonial__role{display:block;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.testimonial__facts{display:grid;gap:var(--s-12)}
.testimonial__fact{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-20) var(--s-24);border-radius:var(--r-xl);background:var(--canvas-alt)}
.testimonial__fact dt{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.testimonial__fact dd{font-size:var(--t-heading-lg);line-height:var(--t-heading-lg-lh);letter-spacing:var(--t-heading-lg-ls);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.on-alt .testimonial__fact{background:var(--surface)}
.testimonials{padding:var(--s-56) var(--s-24);border-radius:var(--r-3xl);background:var(--canvas-alt)}
@media (min-width:768px){.testimonials{padding:var(--s-64) var(--s-48)}}
.testimonials .quotes__text{font-size:var(--t-heading-sm);line-height:1.6;color:var(--ink);font-weight:500;letter-spacing:-.01em}
@media (max-width:640px){.testimonials .quotes__text{font-size:var(--t-body-lg)}}
.testimonials .quotes__by strong{display:block;color:var(--ink-body);font-weight:600}

/* ══ 요금제 ═══════════════════════════════════════════════
   묶음([data-billing="monthly|annual"])의 값에 따라 [data-billing-monthly]·[data-billing-annual] 중 하나만 보인다.
   전환은 sections.js(.billing__btn[data-billing-value]). 스크립트가 없으면 마크업에 적은 값(보통 월)이 보인다. */
.billing{display:inline-flex;gap:var(--s-4);padding:var(--s-4);border-radius:var(--r-full);background:var(--tint)}
.billing__btn{display:inline-flex;align-items:center;gap:var(--s-6);height:var(--c-md-h);padding-inline:var(--s-16) var(--s-16);border-radius:var(--r-full);
  font-size:var(--t-body-sm);font-weight:600;color:var(--ink-muted);white-space:nowrap;cursor:pointer;
  transition:background-color var(--d-2) var(--ease-inout),color var(--d-2) var(--ease-inout),box-shadow var(--d-2) var(--ease-inout)}
.billing__btn:hover{color:var(--ink-body)}
.billing__btn[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
/* 다크 모드에서는 흰 면이 없어 고른 칸이 바탕에 묻힌다. 한 단계 밝은 면과 가는 선으로 고른 것을 드러낸다. */
[data-theme="dark"] .billing__btn[aria-pressed="true"]{background:var(--surface-alt);box-shadow:inset 0 0 0 1px var(--line-strong)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .billing__btn[aria-pressed="true"]{background:var(--surface-alt);box-shadow:inset 0 0 0 1px var(--line-strong)}}
.billing__save{display:inline-flex;align-items:center;height:22px;padding-inline:var(--s-8);border-radius:var(--r-full);
  background:var(--good-soft);color:var(--good-text);font-size:var(--t-nano);font-weight:700}
[data-billing="annual"] [data-billing-monthly],[data-billing="monthly"] [data-billing-annual]{display:none}

.plans{display:grid;gap:var(--s-16);align-items:stretch}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px) and (max-width:1099px){.plans--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.plans--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plan{position:relative;display:flex;flex-direction:column;gap:var(--s-16);padding:var(--s-32);border-radius:var(--r-2xl);background:var(--surface)}
@media (max-width:640px){.plan{padding:var(--s-24)}}
/* 표 테두리가 필요한 바탕(흰 면 위)에서는 .plans--line. 테두리는 자식 위 덮개로 그린다(코어 card--line 과 같은 이유). */
.plans--line .plan::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px var(--line)}
.plan--hot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px var(--accent)}
.plans--line .plan--hot::after{box-shadow:inset 0 0 0 2px var(--accent)}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);min-height:var(--s-28)}
.plan__name{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);letter-spacing:var(--t-heading-sm-ls);font-weight:700;color:var(--ink)}
.plan__for{margin-top:calc(-1 * var(--s-8));font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.plan__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2) var(--s-6);min-height:var(--t-display-sm-lh)}
.plan__amount{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.plan__unit{font-size:var(--t-body-sm);color:var(--ink-muted);white-space:nowrap}
.plan__was{font-size:var(--t-body-sm);color:var(--ink-subtle);text-decoration:line-through;white-space:nowrap}
.plan__note{margin-top:calc(-1 * var(--s-10));font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-subtle);min-height:var(--t-caption-lh)}
.plan__list{padding-top:var(--s-20);box-shadow:inset 0 1px 0 var(--line);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.plan__list .ico{margin-top:2px}
.plan__cta{margin-top:auto;padding-top:var(--s-8)}
.plan__cta .btn{width:100%}
/* 값을 바꾼 순간 새 가격만 짧게 올라온다(모션 축소면 없음) */
.plan__price .is-swap{animation:plan-swap var(--d-4) var(--ease-out) both}
@keyframes plan-swap{from{opacity:0;transform:translate3d(0,var(--s-8),0)}to{opacity:1;transform:none}}
/* 요금제 아래 가로 한 줄: 큰 조직·맞춤 상담 */
.plans__more{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-16) var(--s-24);
  padding:var(--s-24) var(--s-32);border-radius:var(--r-2xl);background:var(--surface)}
.plans--line .plans__more{background:var(--canvas-alt)}
.plans__more-text{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
@media (max-width:640px){.plans__more{padding:var(--s-24)}.plans__more .btn{width:100%}}

/* ══ 비교표 ═══════════════════════════════════════════════
   좁은 화면에서는 표만 옆으로 밀린다(문서는 밀리지 않는다). 첫 열(항목 이름)은 붙어 있어 무엇을 비교하는지 놓치지 않는다.
   강조 열(.compare__hot)은 연한 강조 면. 있음·없음은 아이콘과 화면 읽기 글자로 함께 알린다(색만으로 구분하지 않는다). */
.compare{position:relative;border-radius:var(--r-2xl);background:var(--surface);overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.compare:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.compare__table{min-width:680px;table-layout:fixed;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
/* 항목 열만 넓게, 요금제 열은 같은 폭으로 둔다(값 길이에 따라 열이 들쭉날쭉하지 않게) */
.compare col:first-child{width:31%}
.compare th,.compare td{padding:var(--s-16) var(--s-20);text-align:center;vertical-align:middle;box-shadow:inset 0 -1px 0 var(--line);color:var(--ink-body)}
.compare thead th{padding-block:var(--s-24) var(--s-16);vertical-align:bottom;font-weight:700;color:var(--ink);font-size:var(--t-body-md)}
.compare thead th small{display:block;margin-top:var(--s-2);font-size:var(--t-caption);font-weight:500;color:var(--ink-muted)}
.compare th[scope="row"],.compare thead th:first-child{position:sticky;left:0;z-index:1;text-align:left;background:var(--surface);
  min-width:168px;font-weight:500;color:var(--ink-body)}
.compare thead th:first-child{font-size:var(--t-caption);color:var(--ink-subtle)}
/* 붙는 첫 열 오른쪽에 세로 선: 옆으로 밀 때 값이 첫 열 밑으로 들어가는 경계가 보이게 */
.compare th[scope="row"],.compare thead th:first-child{box-shadow:inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
.compare__group th{padding-block:var(--s-12);text-align:left;background:var(--canvas-alt) !important;
  font-size:var(--t-caption);font-weight:700;letter-spacing:.02em;color:var(--ink-muted)}
/* 묶음 제목 칸은 표 전체 폭이라 붙지 못한다. 안의 글자만 붙인다. */
.compare__group th > span{position:sticky;left:var(--s-20)}
.compare__hot{background:var(--accent-soft)}
.compare thead .compare__hot{color:var(--accent-text)}
/* 강조 열(연한 강조 면) 위 보조 글자: 틴트 면용 보조 글자색(다크에서 한 단계 밝다) */
.compare__hot :is(small,.ink-muted){color:var(--ink-muted-alt)}
.compare__yes{display:inline-block;color:var(--good-text)}
.compare__no{display:inline-block;color:var(--ink-disabled)}
.compare tbody tr:last-child > *{box-shadow:none}
.compare tbody tr:last-child > th[scope="row"]{box-shadow:inset -1px 0 0 var(--line)}
.compare__hint{display:flex;align-items:center;gap:var(--s-6);margin-top:var(--s-12);font-size:var(--t-caption);color:var(--ink-muted)}
@media (min-width:768px){.compare__hint{display:none}}
@media (max-width:640px){.compare th,.compare td{padding:var(--s-12) var(--s-16)}.compare th[scope="row"],.compare thead th:first-child{min-width:132px}}

/* ══ 자주 묻는 질문 ═══════════════════════════════════════
   1024px 부터 왼쪽 머리(붙어 따라옴) + 오른쪽 아코디언(코어). --center 는 가운데 한 칸. */
.faq{display:grid;gap:var(--s-40)}
@media (min-width:1024px){
  .faq{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--s-80);align-items:start}
  .faq__side{position:sticky;top:calc(var(--nav-h) + var(--s-40))}
}
.faq--center{max-width:calc(var(--w-md) + 0px);margin-inline:auto;grid-template-columns:minmax(0,1fr) !important;gap:var(--s-32)}
.faq--center .faq__side{position:static;text-align:center}
.faq--center .section-head{margin-inline:auto;align-items:center}
.faq--center .faq__nav{justify-content:center}
.faq__nav{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-24)}
.faq__group + .faq__group{margin-top:var(--s-40)}
.faq__group-title{margin-bottom:var(--s-8);font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);font-weight:600;color:var(--ink)}
.faq .accordion__trigger{text-align:left;padding-inline:0}
.faq .accordion__body{padding-inline:0}
.faq .accordion__body{max-width:44rem}
.faq__more{display:flex;align-items:center;gap:var(--s-12);margin-top:var(--s-24);padding:var(--s-16) var(--s-20);border-radius:var(--r-xl);background:var(--canvas-alt)}
.on-alt .faq__more,.surface-alt .faq__more{background:var(--surface)}
.faq__more-text{flex:1;min-width:0;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.faq__more-text strong{display:block;color:var(--ink);font-weight:600}

/* ══ 마지막 CTA ═══════════════════════════════════════════
   반전면 큰 판. 빛 두 덩어리와 점 격자를 얹는다. data-scrub="clip" 을 주면 스크롤에 맞춰 가운데서 펼쳐진다.
   --soft 는 연한 강조 면(반전이 부담스러운 화면). 하단 고정 바는 이 판이 보이면 비켜 선다(data-dock-hide). */
.cta-final{position:relative;overflow:hidden;isolation:isolate;padding:var(--s-120) var(--s-48);border-radius:var(--r-4xl);
  background:var(--surface-invert);color:var(--canvas);text-align:center}
@media (max-width:767px){.cta-final{padding:var(--s-80) var(--s-24);border-radius:var(--r-3xl)}}
.cta-final :where(h1,h2,h3){color:inherit}
.cta-final > *{position:relative;z-index:1}
.cta-final > .glow,.cta-final > .dotfield{position:absolute;z-index:0}
.cta-final > .dotfield{opacity:.28;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 10%,transparent 75%)}
.cta-final__eyebrow{font-size:var(--t-caption);font-weight:600;letter-spacing:.04em;opacity:.72}
.cta-final__title{margin-top:var(--s-12);margin-inline:auto;max-width:44rem}
.cta-final__lede{margin:var(--s-20) auto 0;max-width:32rem;font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);opacity:.78}
.cta-final__actions{margin-top:var(--s-40);justify-content:center}
.cta-final__note{margin-top:var(--s-20);font-size:var(--t-caption);line-height:var(--t-caption-lh);opacity:.64}
.cta-final .btn--secondary{background:color-mix(in srgb,var(--canvas) 12%,transparent);color:inherit}
.cta-final .btn--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--canvas) 20%,transparent)}
.cta-final[data-scrub="clip"]{will-change:clip-path}
.cta-final--soft{background:var(--accent-soft);color:var(--ink)}
.cta-final--soft .cta-final__lede,.cta-final--soft .cta-final__note{color:var(--ink-muted);opacity:1}
.cta-final--soft .cta-final__eyebrow{color:var(--accent-text);opacity:1}
.cta-final--soft .btn--secondary{background:var(--tint);color:var(--ink-body)}
.cta-final--soft > .glow{opacity:.55}

/* 하단 고정 바(코어 .dockbar)의 숨김 상태: 비켜 설 것(data-dock-hide)이 보이면 sections.js 가 붙인다. 주 버튼이 한 화면에 둘 보이지 않게. */
.dockbar.is-off{opacity:0;translate:-50% 12px;pointer-events:none}
/* 스크롤 장면처럼 '맨 위로'가 캡션을 가리는 곳(data-totop-hide)이 보이는 동안 숨긴다 */
.is-totop-off .totop{opacity:0;pointer-events:none}

/* ══ 신뢰(반전면) ═════════════════════════════════════════
   .surface-invert 섹션 안에 둔다. 아이콘 칸은 면 색을 투명하게 섞어 반전면에서도 튀지 않는다. */
.trust{display:grid;gap:var(--s-40) var(--s-32);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.trust{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trust__item{display:flex;flex-direction:column;gap:var(--s-10)}
.trust__icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--s-6);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--canvas) 12%,transparent);color:inherit}
.trust__title{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);letter-spacing:var(--t-heading-sm-ls);font-weight:600;color:inherit}
.trust__desc{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:inherit;opacity:.76}

/* ══ 하위 페이지 머리 ═════════════════════════════════════
   요금·소개 같은 하위 페이지의 첫 구역. 가운데 정렬, 은은한 빛. */
.page-hero{position:relative;overflow:clip;isolation:isolate;padding-block:var(--s-80) var(--s-56)}
@media (min-width:768px){.page-hero{padding-block:var(--s-120) var(--s-64)}}
.page-hero > .container{position:relative;z-index:1}
.page-hero .section-head{max-width:48rem}
.page-hero.under-nav{padding-top:calc(var(--nav-h) + var(--s-80))}
@media (min-width:768px){.page-hero.under-nav{padding-top:calc(var(--nav-h) + var(--s-120))}}

/* ══ 푸터(사이트) ═════════════════════════════════════════
   코어 .footer 에 더한다. 좁은 화면은 브랜드 한 줄 + 링크 2열, 768px 부터 브랜드 칸 + 3열.
   바닥에 브랜드 글자(코어 .ghosttype)를 깔아 마무리한다. */
.footer--site .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer--site .footer__brand{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-12)}
@media (min-width:768px){
  .footer--site .footer__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
  .footer--site .footer__brand{grid-column:auto}
}
.footer--site .footer__blurb{max-width:24em;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--ink-muted)}
.footer--site .footer__link[aria-current="page"]{color:var(--ink);font-weight:600}
.footer--site .footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-8) var(--s-24)}
.footer__legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-16)}
.footer__legal-links a{display:inline-flex;align-items:center;min-height:var(--c-md-h);color:var(--ink-muted)}
.footer__legal-links a:hover{color:var(--ink)}
.footer--site .ghosttype{margin-top:var(--s-40);text-align:center;line-height:.8;margin-bottom:calc(-1 * var(--s-40))}

/* ══ 폰 목업 속 앱 화면 ═══════════════════════════════════
   .phone__screen 안에 두는 정적 조각. 실제 앱처럼 보이게 치수를 앱과 맞춘다. 장식이라 폰에 aria-hidden 을 두고,
   같은 내용을 문장으로 곁에 적는다(화면 읽기). 폰 밖에서 조각만 쓸 때는 .mock--flat.
   스크롤 장면(.scene)에서는 폰을 디자인 크기로 그린 뒤 비율만 줄이므로(fx.css) 안쪽 글자가 다시 줄바꿈되지 않는다. */
.mock{display:flex;flex-direction:column;height:100%;background:var(--canvas-alt);color:var(--ink-body);text-align:left;overflow:hidden;
  font-size:var(--t-micro);line-height:var(--t-micro-lh);word-break:keep-all}
.mock--flat{height:auto;gap:var(--s-8);background:none;overflow:visible}
.mock__status{flex:none;display:flex;align-items:center;justify-content:space-between;height:40px;padding:6px 22px 0 26px;
  font-size:var(--t-nano);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mock__sig{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.mock__sig > span{width:3px;border-radius:1px;background:currentColor}
.mock__sig > span:nth-child(1){height:4px}.mock__sig > span:nth-child(2){height:7px}.mock__sig > span:nth-child(3){height:10px}
.mock__head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);padding:var(--s-6) var(--s-16) var(--s-12)}
.mock__head > div{min-width:0}
.mock__kicker{display:block;font-size:var(--t-nano);line-height:var(--t-nano-lh);font-weight:600;color:var(--ink-muted)}
.mock__title{display:block;font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);letter-spacing:var(--t-heading-sm-ls);font-weight:700;color:var(--ink)}
.mock__back{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--sh-xs)}
.mock__body{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s-8);padding:0 var(--s-12) var(--s-12);overflow:hidden}
.mock__label{display:block;margin-top:var(--s-4);font-size:var(--t-nano);line-height:var(--t-nano-lh);font-weight:700;color:var(--ink-subtle)}
.mock__card{padding:var(--s-12);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-xs)}
.mock__sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.mock__sum > span{display:flex;flex-direction:column;gap:1px;padding:var(--s-8) var(--s-10);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-xs);color:var(--ink-muted);font-size:var(--t-nano);line-height:var(--t-nano-lh)}
.mock__sum b{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mock__sum b.is-accent{color:var(--accent-text)}
.mock__row{display:flex;align-items:center;gap:var(--s-10);padding:var(--s-10) var(--s-12);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-xs)}
.mock__row--new{box-shadow:inset 0 0 0 1.5px var(--accent-line),var(--sh-sm)}
.mock__row--empty{background:transparent;box-shadow:none;outline:1px dashed var(--line-strong);outline-offset:-1px;color:var(--ink-subtle)}
.mock__time{flex:none;width:36px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mock__row--empty .mock__time{color:var(--ink-subtle)}
.mock__main{flex:1;min-width:0;display:flex;flex-direction:column}
.mock__name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock__sub{font-size:var(--t-nano);line-height:var(--t-nano-lh);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock__tag{flex:none;display:inline-flex;align-items:center;height:20px;padding-inline:7px;border-radius:var(--r-xs);
  font-size:10px;font-weight:700;line-height:1;white-space:nowrap;background:var(--tint);color:var(--ink-muted-alt)}
.mock__tag--accent{background:var(--accent-soft);color:var(--accent-text)}
.mock__tag--good{background:var(--good-soft);color:var(--good-text)}
.mock__tag--warn{background:var(--warn-soft);color:var(--warn-text)}
.mock__tabbar{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:56px;padding-bottom:var(--s-6);
  background:var(--canvas);box-shadow:inset 0 1px 0 var(--line)}
.mock__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;line-height:1;color:var(--ink-subtle)}
.mock__tab .ico{width:20px;height:20px}
.mock__tab--on{color:var(--accent-text)}
/* 예약 화면: 가게 줄·날짜 띠·시간 칸 */
.mock__shop{display:flex;align-items:center;gap:var(--s-10)}
.mock__shop .avatar{width:36px;height:36px}
.mock__dates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-4)}
.mock__date{display:flex;flex-direction:column;align-items:center;gap:1px;padding:var(--s-6) 0;border-radius:var(--r-md);background:var(--surface);
  font-size:10px;line-height:1.3;color:var(--ink-muted)}
.mock__date b{font-size:var(--t-body-xs);color:var(--ink);font-variant-numeric:tabular-nums}
.mock__date--on{background:var(--ink);color:var(--canvas)}
.mock__date--on b{color:inherit}
.mock__slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.mock__slot{display:grid;place-items:center;height:32px;border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font-weight:600;color:var(--ink-body);font-variant-numeric:tabular-nums}
.mock__slot--on{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.mock__slot--off{background:transparent;color:var(--ink-disabled);text-decoration:line-through}
.mock__cta{flex:none;display:grid;place-items:center;height:44px;margin-top:auto;border-radius:var(--r-md);
  background:var(--accent);color:var(--accent-ink);font-size:var(--t-body-xs);font-weight:700}
/* 팀 달력(하루): 시간 줄은 배경 선으로, 일정은 격자 칸(--c 열, --r 시작 줄, --s 길이)으로 둔다 */
.mock__cal{flex:1;min-height:0;display:grid;grid-template-columns:26px repeat(3,minmax(0,1fr));grid-template-rows:26px repeat(8,minmax(0,1fr));gap:0 var(--s-4);
  padding:0 var(--s-2) var(--s-4);border-radius:var(--r-lg);
  background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% calc((100% - 30px) / 8);background-position:0 26px;background-repeat:repeat-y}
.mock__cal-who{grid-row:1;display:flex;align-items:center;justify-content:center;gap:var(--s-4);font-size:10px;font-weight:700;color:var(--ink-muted)}
.mock__cal-who .avatar{width:18px;height:18px;font-size:9px}
.mock .avatar--text{font-size:var(--t-nano)}
.mock__head .avatar--text,.mock__shop .avatar--text{font-size:var(--t-caption)}
.mock__cal-h{grid-column:1;font-size:9px;line-height:1;color:var(--ink-subtle);font-variant-numeric:tabular-nums;padding-top:2px}
.mock__ev{grid-column:var(--c,2);grid-row:var(--r,2) / span var(--s,1);margin-block:2px;padding:4px 6px;border-radius:6px;overflow:hidden;
  font-size:10px;line-height:13px;font-weight:600;background:var(--accent-soft);color:var(--accent-text)}
.mock__ev small{display:block;font-weight:500;opacity:.8;font-size:9px}
.mock__ev--good{background:var(--good-soft);color:var(--good-text)}
.mock__ev--note{background:var(--note-soft);color:var(--note-text)}
.mock__ev--new{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-md)}
/* 메시지: 알림 문자와 답 */
.mock__day{align-self:center;padding:2px var(--s-8);border-radius:var(--r-full);background:var(--tint);font-size:10px;color:var(--ink-muted)}
.mock__msg{align-self:flex-start;max-width:90%;padding:var(--s-10) var(--s-12);border-radius:14px 14px 14px 4px;background:var(--surface);box-shadow:var(--sh-xs);color:var(--ink-body)}
.mock__msg strong{display:block;margin-bottom:2px;color:var(--ink)}
.mock__msg--me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--accent);color:var(--accent-ink);box-shadow:none}
.mock__msg-btns{display:flex;gap:var(--s-6);margin-top:var(--s-8)}
.mock__msg-btn{flex:1;display:grid;place-items:center;height:30px;border-radius:var(--r-sm);background:var(--tint);font-weight:700;color:var(--ink)}
.mock__msg-btn--primary{background:var(--accent-soft);color:var(--accent-text)}
.mock__meta{align-self:flex-end;font-size:10px;color:var(--ink-subtle)}
.mock__notice{display:flex;align-items:center;gap:var(--s-8);padding:var(--s-10) var(--s-12);border-radius:var(--r-md);background:var(--good-soft);color:var(--good-text);font-weight:600}
.mock__compose{flex:none;display:flex;align-items:center;gap:var(--s-8);padding:var(--s-8) var(--s-12) var(--s-12);background:var(--canvas)}
.mock__compose > span:first-child{flex:1;display:flex;align-items:center;height:36px;padding-inline:var(--s-12);border-radius:var(--r-full);background:var(--canvas-alt);color:var(--ink-disabled)}
.mock__compose .ico{flex:none;color:var(--ink-subtle)}
.mock__chips{display:flex;flex-wrap:wrap;gap:var(--s-6)}
.mock__chip{display:inline-flex;align-items:center;gap:var(--s-4);height:28px;padding-inline:var(--s-10);border-radius:var(--r-full);background:var(--surface);color:var(--ink-body);font-weight:600;font-size:var(--t-nano)}
.mock__chip .ico{width:14px;height:14px}
/* 리포트: 큰 숫자·막대 */
.mock__big{display:block;font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.mock__delta{font-size:var(--t-nano);font-weight:700;color:var(--good-text)}
.mock__chart{display:flex;align-items:flex-end;gap:var(--s-6);height:92px;margin-top:var(--s-10)}
.mock__chart > span{flex:1;height:var(--h,50%);border-radius:4px 4px 2px 2px;background:var(--accent-soft);transform-origin:bottom}
.mock__chart > span.is-hi{background:var(--accent)}
.mock__axis{display:flex;justify-content:space-between;margin-top:var(--s-4);font-size:9px;color:var(--ink-subtle)}
.mock__kv{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);padding-block:var(--s-6)}
.mock__kv + .mock__kv{box-shadow:inset 0 1px 0 var(--line)}
.mock__kv b{color:var(--ink);font-variant-numeric:tabular-nums}
/* 링크 상자: 예약 링크·복사 */
.mock__link{display:flex;align-items:center;gap:var(--s-8);height:44px;padding:0 var(--s-6) 0 var(--s-12);border-radius:var(--r-md);background:var(--surface);
  color:var(--ink);font-weight:600;font-size:var(--t-caption)}
.mock__link-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock__link-copy{flex:none;display:inline-flex;align-items:center;gap:var(--s-4);height:32px;padding-inline:var(--s-10);border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);font-size:var(--t-nano);font-weight:700}
.mock__toggle{flex:none;position:relative;width:34px;height:20px;border-radius:var(--r-full);background:var(--line-strong)}
.mock__toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-xs)}
.mock__toggle--on{background:var(--accent)}
.mock__toggle--on::after{left:16px}
/* 장면에서 화면이 켜지면 막대가 아래서 자란다 */
.scene__shot[data-on] .mock__chart > span,.mock__chart.is-in > span{animation:bar-grow var(--d-7) var(--ease-out) both}
.mock__chart > span:nth-child(2){animation-delay:40ms}.mock__chart > span:nth-child(3){animation-delay:80ms}
.mock__chart > span:nth-child(4){animation-delay:120ms}.mock__chart > span:nth-child(5){animation-delay:160ms}
.mock__chart > span:nth-child(6){animation-delay:200ms}.mock__chart > span:nth-child(n+7){animation-delay:240ms}
@keyframes bar-grow{from{transform:scaleY(.08)}to{transform:none}}

/* ══ 브라우저 창 속 앱 화면(.dmock) ═══════════════════════
   .browser__canvas(설계 폭 1280 × 800) 안에 두는 정적 데스크톱 앱 화면. 뼈대(사이드바 · 위 막대 · 본문 · 오른쪽 칸)와 목업 조각만 여기서 정하고,
   배지·아바타·키 같은 조각은 실제 컴포넌트(.badge .avatar .kbd …)를 그대로 쓴다. 창 안은 늘 설계 폭이라 화면 폭 미디어 쿼리에 기대는 컴포넌트는 넣지 않는다.
   창이 장식이라 누를 수 있는 요소(a·button·input)는 두지 않고, 창에 role="img" + 한 줄 설명(또는 aria-hidden + 곁의 sr-only 문장)을 준다.
     .dmock(--aside 오른쪽 칸 · --bare 사이드바 없이) > .dmock__side + .dmock__main(.dmock__top + .dmock__body) + .dmock__aside */
.dmock{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);height:100%;background:var(--canvas);color:var(--ink-body);text-align:left;
  font-size:var(--t-caption);line-height:var(--t-caption-lh);word-break:keep-all;overflow:hidden}
.dmock--aside{grid-template-columns:240px minmax(0,1fr) 300px}
.dmock--bare{grid-template-columns:minmax(0,1fr)}
.dmock .ico{flex:none;width:16px;height:16px}
/* 사이드바: 로고 · 새로 만들기 · 메뉴 · 프로젝트 나무 · 바닥 */
.dmock__side{display:flex;flex-direction:column;gap:2px;min-height:0;padding:var(--s-16) var(--s-12);background:var(--canvas-alt);box-shadow:inset -1px 0 0 var(--line);overflow:hidden}
.dmock__brand{display:flex;align-items:center;height:var(--s-32);padding-inline:var(--s-6);margin-bottom:var(--s-8)}
.dmock__brand > img{width:auto;height:22px}
.dmock__new{display:flex;align-items:center;justify-content:center;gap:var(--s-6);flex:none;height:36px;margin-bottom:var(--s-8);border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);font-weight:600}
.dmock__label{display:flex;align-items:center;justify-content:space-between;padding:var(--s-12) var(--s-8) var(--s-4);
  font-size:var(--t-nano);line-height:var(--t-nano-lh);font-weight:600;color:var(--ink-subtle)}
.dmock__item{position:relative;display:flex;align-items:center;gap:var(--s-8);flex:none;height:32px;padding-inline:var(--s-8);border-radius:var(--r-sm);
  color:var(--ink-body);white-space:nowrap}
.dmock__item > .ico{color:var(--ink-subtle)}
.dmock__item > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dmock__item--on{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.dmock__item--on > .ico{color:inherit}
/* 프로젝트 → 하위 폴더 나무: 한 칸 들여 쓰고 왼쪽에 안내 선 */
.dmock__item--sub{padding-left:calc(var(--s-8) + var(--s-24))}
.dmock__item--sub::before{content:"";position:absolute;left:calc(var(--s-8) + 7px);top:0;bottom:0;width:1px;background:var(--line-strong)}
.dmock__count{flex:none;margin-left:auto;font-size:var(--t-nano);font-weight:600;color:var(--ink-subtle);font-variant-numeric:tabular-nums}
.dmock__count--bad{display:inline-grid;place-items:center;min-width:18px;height:18px;padding-inline:5px;border-radius:var(--r-full);background:var(--bad-soft);color:var(--bad-text)}
.dmock__item--on .dmock__count{color:inherit}
.dmock__side-foot{display:grid;gap:var(--s-8);margin-top:auto;padding:var(--s-12) var(--s-8) 0;box-shadow:inset 0 1px 0 var(--line);font-size:var(--t-nano);color:var(--ink-muted)}
.dmock__meter{height:4px;border-radius:var(--r-full);background:var(--tint);overflow:hidden}
.dmock__meter > span{display:block;width:calc(var(--p,.5) * 100%);height:100%;border-radius:inherit;background:var(--accent)}
/* 본문 기둥: 위 막대(경로 · 찾기 · 알림 · 계정) + 본문 */
.dmock__main{display:flex;flex-direction:column;min-width:0;min-height:0}
.dmock__top{flex:none;display:flex;align-items:center;gap:var(--s-12);height:56px;padding-inline:var(--s-24);box-shadow:inset 0 -1px 0 var(--line)}
.dmock__crumbs{display:flex;align-items:center;gap:var(--s-6);min-width:0;color:var(--ink-muted);white-space:nowrap}
.dmock__crumbs .ico{width:14px;height:14px;color:var(--ink-disabled)}
.dmock__crumbs b{font-weight:600;color:var(--ink)}
.dmock__find{display:flex;align-items:center;gap:var(--s-8);flex:none;width:280px;height:34px;margin-left:auto;padding-inline:var(--s-10) var(--s-6);
  border-radius:var(--r-sm);background:var(--canvas-alt);color:var(--ink-subtle)}
.dmock__find .kbd{margin-left:auto}
.dmock--aside .dmock__find{width:220px}
.dmock__crumbs > :is(span,b){min-width:0;overflow:hidden;text-overflow:ellipsis}
.dmock__crumbs > b{flex:0 1 auto}
.dmock__crumbs > span{flex:0 999 auto}
.dmock__icon{position:relative;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:var(--r-sm);color:var(--ink-muted)}
.dmock__icon .ico{width:18px;height:18px}
.dmock__icon--dot::after{content:"";position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--canvas)}
.dmock__body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s-16);padding:var(--s-24) var(--s-32);overflow:hidden}
.dmock__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-16)}
.dmock__head > div{display:grid;gap:var(--s-4);min-width:0}
.dmock__kicker{display:flex;align-items:center;gap:var(--s-8);font-size:var(--t-micro);line-height:var(--t-micro-lh);font-weight:600;color:var(--ink-muted)}
.dmock__title{font-size:var(--t-heading-lg);line-height:var(--t-heading-lg-lh);letter-spacing:var(--t-heading-lg-ls);font-weight:700;color:var(--ink)}
.dmock__sub{color:var(--ink-muted)}
.dmock__acts{display:flex;align-items:center;gap:var(--s-8);flex:none}
.dmock__btn{display:inline-flex;align-items:center;gap:var(--s-6);flex:none;height:34px;padding-inline:var(--s-12);border-radius:var(--r-sm);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);font-weight:600;white-space:nowrap}
.dmock__btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.dmock__chips{display:flex;align-items:center;gap:var(--s-6)}
.dmock__chip{display:inline-flex;align-items:center;gap:var(--s-6);height:30px;padding-inline:var(--s-12);border-radius:var(--r-full);background:var(--canvas-alt);
  color:var(--ink-muted);font-weight:600;white-space:nowrap}
.dmock__chip b{font-weight:600;color:var(--ink-subtle);font-variant-numeric:tabular-nums}
.dmock__chip--on{background:var(--ink);color:var(--canvas)}
.dmock__chip--on b{color:inherit}
/* 목록 표: 줄 칸은 --dmock-cols 로 바꾼다 */
.dmock__table{display:grid;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.dmock__tr{display:grid;grid-template-columns:var(--dmock-cols,16px minmax(0,1fr) 150px 110px 104px);align-items:center;gap:var(--s-16);min-height:54px;
  padding-inline:var(--s-16);box-shadow:inset 0 -1px 0 var(--line)}
.dmock__tr:last-child{box-shadow:none}
.dmock__tr--head{min-height:38px;background:var(--canvas-alt);font-size:var(--t-nano);line-height:var(--t-nano-lh);font-weight:600;color:var(--ink-subtle)}
.dmock__tr--on{background:var(--accent-soft)}
.dmock__tr--new{box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.dmock__box{position:relative;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.dmock__box--on{background:var(--accent);box-shadow:none}
.dmock__box--on::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--accent-ink);border-width:0 2px 2px 0;rotate:45deg}
.dmock__cell{display:flex;flex-direction:column;min-width:0}
.dmock__name{overflow:hidden;font-size:var(--t-body-xs);line-height:var(--t-body-xs-lh);font-weight:600;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.dmock__meta{overflow:hidden;font-size:var(--t-nano);line-height:var(--t-nano-lh);color:var(--ink-subtle);white-space:nowrap;text-overflow:ellipsis}
.dmock__who{display:flex;align-items:center;gap:var(--s-8);min-width:0;white-space:nowrap}
.dmock__time{color:var(--ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
/* 문서 편집기: 도구막대 · 제목 · 문단 · 첨부 */
.dmock__doc{display:flex;flex-direction:column;gap:var(--s-12);min-height:0;max-width:720px}
.dmock__tools{display:flex;align-items:center;gap:2px;flex:none;height:40px;padding:var(--s-4);border-radius:var(--r-md);background:var(--canvas-alt)}
.dmock__tool{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-sm);color:var(--ink-muted);font-weight:700}
.dmock__tool--on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-xs)}
.dmock__tool-sep{flex:none;width:1px;height:20px;margin-inline:var(--s-6);background:var(--line-strong)}
.dmock__saved{display:inline-flex;align-items:center;gap:var(--s-4);margin-left:auto;padding-inline:var(--s-8);font-size:var(--t-nano);font-weight:600;color:var(--good-text);white-space:nowrap}
.dmock__h{margin-top:var(--s-4);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);font-weight:700;color:var(--ink)}
.dmock__p{font-size:var(--t-body-xs);line-height:1.75;color:var(--ink-body)}
.dmock__ol{margin:0;padding-left:1.3em;list-style:decimal;font-size:var(--t-body-xs);line-height:1.75;color:var(--ink-body)}
.dmock__mark{padding-inline:2px;border-radius:3px;background:var(--warn-soft);color:var(--ink)}
/* 쓰는 중인 자리의 깜빡이는 막대. 모션 축소면 멈춘 채 보인다(아래 모션 축소 규칙) */
.dmock__caret{display:inline-block;width:2px;height:1.15em;margin-left:1px;vertical-align:-.2em;background:var(--accent);animation:dmock-caret 1.1s steps(1) infinite}
@keyframes dmock-caret{50%{opacity:0}}
.dmock__files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-10)}
.dmock__file{display:flex;align-items:center;gap:var(--s-10);min-width:0;padding:var(--s-10) var(--s-12);border-radius:var(--r-md);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)}
.dmock__file--new{box-shadow:inset 0 0 0 1.5px var(--accent-line),var(--sh-sm)}
.dmock__file-ico{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-text)}
.dmock__file-ico--good{background:var(--good-soft);color:var(--good-text)}
.dmock__file-ico--note{background:var(--note-soft);color:var(--note-text)}
.dmock__progress{height:4px;margin-top:var(--s-6);border-radius:var(--r-full);background:var(--tint);overflow:hidden}
.dmock__progress > span{display:block;width:calc(var(--p,.6) * 100%);height:100%;border-radius:inherit;background:var(--accent)}
.dmock__drop{display:flex;align-items:center;justify-content:center;gap:var(--s-8);min-height:52px;padding:var(--s-10) var(--s-16);border-radius:var(--r-md);
  outline:1.5px dashed var(--line-strong);outline-offset:-1.5px;color:var(--ink-subtle)}
.dmock__drop--on{outline-color:var(--accent);background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.dmock__notice{display:flex;align-items:center;gap:var(--s-8);padding:var(--s-10) var(--s-12);border-radius:var(--r-md);background:var(--good-soft);color:var(--good-text);font-weight:600}
.dmock__notice--lock{background:var(--tint);color:var(--ink-body)}
/* 오른쪽 칸: 메타데이터 · 서명 · 변경 기록 */
.dmock__aside{display:flex;flex-direction:column;gap:var(--s-20);min-height:0;padding:var(--s-20);background:var(--canvas-alt);box-shadow:inset 1px 0 0 var(--line);overflow:hidden}
.dmock__sec{display:grid;gap:var(--s-10)}
.dmock__sec-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);font-size:var(--t-micro);line-height:var(--t-micro-lh);font-weight:700;color:var(--ink)}
.dmock__kv{display:grid;padding:var(--s-4) var(--s-12);border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dmock__kv > div{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);min-height:34px;color:var(--ink-muted)}
.dmock__kv > div + div{box-shadow:inset 0 1px 0 var(--line)}
.dmock__kv b{min-width:0;overflow:hidden;font-weight:600;color:var(--ink);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.dmock__sign{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-10);padding:var(--s-10) var(--s-12);border-radius:var(--r-md);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dmock__sign--now{box-shadow:inset 0 0 0 1.5px var(--accent-line),var(--sh-sm)}
.dmock__state{display:inline-flex;align-items:center;gap:var(--s-4);font-size:var(--t-nano);font-weight:700;color:var(--ink-subtle);white-space:nowrap}
.dmock__state--good{color:var(--good-text)}
.dmock__state--wait{color:var(--warn-text)}
.dmock__log{display:grid;gap:var(--s-10);margin:0;padding:0;list-style:none}
.dmock__log > li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:baseline;gap:var(--s-8);color:var(--ink-body)}
.dmock__log > li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong);translate:0 1px}
.dmock__log > li.is-on::before{background:var(--accent)}
.dmock__log time{font-size:var(--t-nano);color:var(--ink-subtle);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 화면 위에 뜬 창(서명 확인 등) */
.dmock__scrim{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:var(--scrim)}
.dmock__dialog{display:grid;gap:var(--s-16);width:420px;padding:var(--s-24);border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-xl)}
.dmock__dialog-title{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);font-weight:700;color:var(--ink)}
.dmock__field{display:flex;align-items:center;gap:var(--s-8);height:44px;padding-inline:var(--s-12);border-radius:var(--r-md);box-shadow:inset 0 0 0 1.5px var(--accent);
  color:var(--ink);letter-spacing:.3em}
.dmock__dialog-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}
.dmock__dialog-foot > span{display:grid;place-items:center;height:44px;border-radius:var(--r-md);background:var(--tint);font-weight:700;color:var(--ink)}
.dmock__dialog-foot > span:last-child{background:var(--accent);color:var(--accent-ink)}

/* 무대 · 데스크톱(stage--desktop): 폰 대신 브라우저 창(.browser). 조각은 창 가장자리에 걸치되 중요한 칸(본문·서명)을 덜 가리는 자리에 둔다
   (왼쪽은 사이드바 위, 오른쪽은 창 위 모서리와 오른쪽 칸 아래). 900px 이상 넷, 900px 미만 둘, 640px 미만은 창이 작아 조각을 숨긴다.
   --bleed: 640px 미만에서 창을 1.5배로 키워 오른쪽 화면 끝 너머로 잘리게 둔다(창 속 글자가 덜 작아진다). 무대가 .container 안에 있어야 한다(좌우 여백 20px 만큼 밖으로 편다). */
.stage--desktop{padding-inline:var(--s-64)}
.stage--desktop > .browser{position:relative;z-index:1;margin-inline:auto}
.stage--desktop .stage__glow{width:min(1180px,130%);aspect-ratio:16/9}
.stage--desktop .stage__chip--tl{top:26%;left:0;right:auto}
.stage--desktop .stage__chip--bl{bottom:10%;left:var(--s-16);right:auto}
.stage--desktop .stage__chip--tr{top:var(--s-4);right:var(--s-24);left:auto}
.stage--desktop .stage__chip--br{bottom:16%;right:0;left:auto}
@media (max-width:899px){
  .stage--desktop{padding-inline:0}
  .stage--desktop .stage__chip--tl{top:calc(-1 * var(--s-4));left:var(--s-8);right:auto}
  .stage--desktop .stage__chip--br{bottom:0;right:var(--s-8);left:auto}
}
@media (max-width:639px){
  .stage--desktop .stage__chip{display:none}
  .stage--bleed{justify-items:start;margin-inline:calc(-1 * var(--s-20));padding-inline:var(--s-20) 0;overflow:clip}
  .stage--bleed > .browser{width:150%;max-width:none;margin-inline:0}
}

/* 두 칸 · 화면(split--media): 글 칸은 좁게, 화면(브라우저 창) 칸은 넓게. 창은 .split__media 에 둔다. */
.split__media{min-width:0}
@media (min-width:1024px){
  .split--media{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:var(--s-56)}
}

/* 스크롤 장면(코어 .scene)을 넓은 화면에서 한 단계씩 더 오래 머물게 한다. 설명 한 단락이 화면 가운데를 지나는 동안 화면이 바뀌지 않는다. */
@media (min-width:1000px){
  .scene--roomy .scene__step{min-height:calc(var(--fx-vh) * .72);display:flex;flex-direction:column;justify-content:center;padding-block:var(--s-80)}
  .scene--roomy .scene__step:last-child{min-height:var(--fx-vh)}
  .scene--roomy .scene__stage{top:calc(var(--nav-h) + var(--s-24))}
}
.scene__step .step-no + *{margin-top:var(--s-12)}
.scene__step p{margin-top:var(--s-10)}
/* 모바일 유리 캡션(scene--glass): 캡션을 흐린 유리 카드로 만들어 폰 아래쪽에 걸친다. 폰 화면이 유리 뒤로 비쳐 한 장면처럼 보인다.
   폰과 겹치는 만큼만 끌어올려 무대 높이(--scene-reserve 안)는 그대로다. */
@media (max-width:999px){
  .fx-js .scene--glass .scene__caption{position:relative;z-index:2;width:calc(100% - var(--s-8));margin-top:calc(-1 * var(--s-56));
    padding:var(--s-16) var(--s-20) var(--s-20);border-radius:var(--r-2xl);
    background:color-mix(in srgb,var(--surface) 76%,transparent);
    -webkit-backdrop-filter:saturate(170%) blur(20px);backdrop-filter:saturate(170%) blur(20px);
    box-shadow:var(--sh-lg),inset 0 0 0 1px var(--line)}
  .fx-js[data-fx-compact] .scene--glass .scene__caption{margin-top:calc(-1 * var(--s-48));padding:var(--s-12) var(--s-16) var(--s-16)}
}

/* 단계 제목을 h3 로 둘 때(섹션 제목이 h2)도 모바일 캡션 크기를 코어 h2 규칙과 같게 맞춘다. */
@media (max-width:999px){
  .scene__caption h3,.scene__shot-caption h3{font-size:var(--t-heading-md);line-height:var(--t-heading-md-lh);letter-spacing:var(--t-heading-md-ls)}
  .fx-js[data-fx-compact] .scene__caption h3{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);letter-spacing:var(--t-heading-sm-ls)}
}

/* ══ 모션 축소 ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .rise,.stage__card,.nav__item[data-open] .mega__items > li,.nav__item[data-open] .mega__aside,
  .drawer--site[data-open] .drawer__body > *,.drawer--site[data-open] .drawer__foot,
  .mock__chart > span,.plan__price .is-swap,.dmock__caret{animation:none !important}
  .mega,.nav__item[data-open] .mega{transition:none;transform:none}
  .mega__link:hover .mega__icon,.mega__aside:hover,a.hero__badge:hover .ico{transform:none}
}