:root{
    --bg:#0C0D0F;
    --bg-deep:#08090A;
    --bg-raise:#101114;
    --text:#E7E3DA;
    --accent:#E7E3DA;
    --accent-ink:#0C0D0F;      /* 액센트 배경 위 글자색 */
    --accent-line:rgba(231,227,218,.42);
    --accent-wash:rgba(231,227,218,.045);

    /* 좌우 여백. 레일(좌측 진행 표시)의 세로 라벨이 본문을 침범하지 않도록
       레일이 보이는 폭(901px+)에서는 왼쪽만 넓힌다. 아래 미디어쿼리 참조. */
    --pad:clamp(20px,3.4vw,64px);
    --pad-l:var(--pad);

    --hair:rgba(231,227,218,.14);
    --hair-soft:rgba(231,227,218,.08);

    /* --- 확정값 (2026-08-11, Jay) — 슬라이더가 실시간으로 덮어씀 --- */
    --noise-opacity:.2;
    --noise-size:80px;
    --overlay-opacity:.76;
  }

  @media(min-width:901px){
    :root{ --pad-l:clamp(78px,6.4vw,112px); }
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Archivo',system-ui,-apple-system,sans-serif;
    min-height:100vh;
  }
  /* 가로 넘침은 html에서 clip으로 자른다.
     body에 overflow-x:hidden을 걸면 overflow-y가 auto로 계산되어 body가
     스크롤 컨테이너가 되고, 그 안의 position:sticky가 뷰포트가 아니라
     body를 기준으로 잡힌다 — 모바일에서 도판이 안 멈추던 원인.
     clip은 스크롤 컨테이너를 만들지 않아 sticky가 살아 있다. */
  html{overflow-x:clip}

  /* 상단바가 sticky(top:0, 높이 63px)라, 앵커나 scrollIntoView로 이동하면
     대상의 첫 줄이 그 뒤로 들어간다. 무료 툴에서 특히 나빴다 — 결과가
     나오는 순간 판정 문장의 첫 줄이 정확히 가려졌다.
     여유분 13px을 더해 76px. 상단바 padding을 바꾸면 여기도 같이 볼 것. */
  html{scroll-padding-top:76px}

  /* ============================================================
     레이어 구조 — 대표님이 말한 순서 그대로
     0. 베이스 컬러
     1. 노이즈 패턴 (repeat)
     2. 블랙 오버레이 (opacity로 세기 조절)
     3. 콘텐츠
     ============================================================ */
  .layer-noise,
  .layer-overlay{
    position:fixed;
    inset:0;
    pointer-events:none;
  }
  .layer-noise{
    z-index:1;
    background-repeat:repeat;
    background-size:var(--noise-size) var(--noise-size);
    opacity:var(--noise-opacity);
  }
  .layer-overlay{
    z-index:2;
    background:#000;
    opacity:var(--overlay-opacity);
  }
  /* 비네트 — 가장자리를 눌러 중앙 가독성을 올린다 */
  .layer-overlay.vignette{
    background:
      radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.9) 100%),
      #000;
  }
  .page{position:relative;z-index:3}
  /* 키보드 사용자용 본문 바로가기 — 포커스 전에는 화면 밖에 둔다 */
  .skip{
    position:fixed;left:16px;top:-60px;z-index:60;
    background:var(--text);color:var(--bg);
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.6px;
    text-transform:uppercase;text-decoration:none;padding:12px 18px;
    transition:top .18s ease;
  }
  .skip:focus{top:16px}

  /* ============================================================
     SCROLL RAIL — 좌측 진행 레일 (ATLAS BRUT 참조)
     캡(위/아래) · 진행선 · 도트 · 세로 판독기
     ============================================================ */
  .rail{
    position:fixed;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    z-index:4;
    height:56vh;min-height:300px;
    display:flex;flex-direction:column;align-items:center;gap:16px;
    font-family:'Space Mono',monospace;
    pointer-events:none;
    transition:opacity .25s ease;
  }
  .rail[hidden]{display:none}
  .rail-cap{
    font-size:9px;letter-spacing:1.6px;
    color:rgba(231,227,218,.34);
    font-weight:700;
  }
  .rail-track{
    position:relative;
    flex:1;width:1px;
    background:var(--hair-soft);
  }
  /* 지나온 구간 */
  .rail-fill{
    position:absolute;left:0;top:0;width:1px;height:0;
    background:rgba(231,227,218,.42);
  }
  .rail-dot{
    position:absolute;left:50%;top:0;
    width:6px;height:6px;border-radius:50%;
    background:var(--accent);
    transform:translate(-50%,-50%);
  }
  /* 세로 판독기 — 아래에서 위로 읽힌다 */
  .rail-read-wrap{
    position:absolute;left:13px;top:50%;
    transform:translateY(-50%);
  }
  .rail-read{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    white-space:nowrap;
    font-size:9px;letter-spacing:2.4px;text-transform:uppercase;
    color:rgba(231,227,218,.4);
  }
  .rail-read em{font-style:normal;color:var(--accent)}

  /* 우하단 상태줄 — 레퍼런스의 "SCROLL TO DESCEND" 자리 */
  .rail-status{
    position:fixed;right:32px;bottom:22px;z-index:4;
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.33);
    pointer-events:none;
  }
  .rail-status em{font-style:normal;color:rgba(231,227,218,.62)}
  /* 푸터가 보이면 물러난다 — 고정 요소라 어느 위치에 둬도 페이지 끝에서 부딪히고,
     100%에 닿은 진행률 표시는 더 할 일이 없다. */
  .rail-status.tucked{opacity:0;transform:translateY(6px)}
  .rail-status{transition:opacity .3s ease, transform .3s ease}

  @media(max-width:900px){
    .rail,.rail-status{display:none}
  }

  /* 모션 최소화 설정을 켠 사용자에게는 애니메이션 노이즈를 정지시킨다 */
  @media(prefers-reduced-motion:reduce){
    .rail{transition:none}
  }

  /* ============================================================
     콘텐츠 — 실제 판매 문구로 가독성을 판정한다
     ============================================================ */
  /* 풀블리드 — 컨테이너 폭 제한을 없애고 여백만 남긴다.
     대신 읽는 요소는 각자 max-width(ch)로 스스로를 묶는다. */
  .wrap{
    max-width:none;
    margin:0;
    padding:0 var(--pad) 0 var(--pad-l);
  }
  /* 화면 끝까지 가는 블록 — .wrap 안에서도 여백을 탈출한다 */
  .bleed{
    margin-left:calc(-1 * var(--pad-l));
    margin-right:calc(-1 * var(--pad));
  }

  /* 상단바 — 스크롤해도 따라온다. 도판 위에서도 읽히도록 뒤를 살짝 눌러준다. */
  .topbar{
    position:sticky;top:0;z-index:20;
    border-bottom:1px solid var(--hair);
    padding:16px var(--pad) 16px var(--pad-l);
    margin:0 calc(-1 * var(--pad)) 0 calc(-1 * var(--pad-l));
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(16px,3vw,48px);
    background:rgba(8,9,10,.78);
    backdrop-filter:blur(10px);
  }
  .mark-link{display:block;line-height:0}
  .nav{
    display:flex;align-items:center;
    gap:clamp(14px,2.2vw,34px);
    margin-left:auto;
  }
  .nav a{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(231,227,218,.62);
    text-decoration:none;
    white-space:nowrap;
    transition:color .15s ease;
  }
  .nav a:hover{color:var(--text)}
  .nav-cta{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
    color:var(--accent);
    border:1px solid var(--accent);
    padding:9px 16px;
    text-decoration:none;white-space:nowrap;
    transition:background .15s ease,color .15s ease;
  }
  .nav-cta:hover{background:var(--accent);color:var(--accent-ink)}

  @media(max-width:860px){
    .nav{display:none}
  }
  @media(max-width:520px){
    .nav-cta{display:none}
  }
  .mark{
    font-family:'Space Mono',monospace;
    font-size:11px;letter-spacing:3.2px;text-transform:uppercase;
  }
  .mark b{color:var(--accent);font-weight:700}
  .mark-logo{display:block;height:28px;width:auto}
  .navmeta{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.45);
  }

  .hero{padding:110px 0 90px;border-bottom:1px solid var(--hair)}
  .eyebrow{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:3.8px;text-transform:uppercase;
    color:var(--accent);
    margin:0 0 34px;
  }
  h1{
    font-weight:900;
    /* 하한 52px은 320px 화면에서 'remembers.' 같은 긴 단어를 못 담아
       페이지가 가로로 밀렸다. 좁은 쪽 하한을 낮추고 기울기를 키운다. */
    font-size:clamp(34px,10.5vw,148px);
    line-height:.82;
    letter-spacing:-.055em;
    text-transform:uppercase;
    margin:0 0 38px;
  }
  /* ── 2톤 헤드라인: 결론 쪽이 밝다 ────────────────────────────────────
     .key 는 문장의 결론 절을 감싼다 — "Endings are where the / DAMAGE
     HAPPENS.", "Silence is not a no. / IT IS NOT A YES EITHER."
     예전 이름은 .dim 이었고 이 절을 어둡게 칠했다. 그래서 모든 헤드라인에서
     알맹이가 가장 안 읽히는 글자가 됐다 — H1 "once." 는 대비 2.16으로
     WCAG 대형 텍스트 기준 3.0에 미달했고, "Terms of / Service." 는 페이지
     제목이 "Terms of" 로 읽혔다. 강약 규칙이 '어느 쪽이 알맹이냐' 가 아니라
     '두 번째 줄이냐' 만 보고 있었다.

     이제 뒤집는다: 셋업이 물러나고 결론이 전면에 선다.

     --setup 은 .46 — 대비 3.9:1 로 대형 텍스트 기준을 넘기면서도 결론과
     뚜렷한 단차를 남긴다. 다섯 컨테이너 전부 19px 이상 · weight 900 이라
     대형 텍스트로 계산된다.
     :has() 를 못 읽는 브라우저에서는 양쪽 다 밝게 나온다 — 연출은 사라지지만
     읽히지 않는 글자는 생기지 않는다. 옛 규칙과 반대로, 실패해도 안전한 쪽. */
  :root{--setup:rgba(231,227,218,.46)}
  h1:has(.key),
  .sec-title:has(.key),
  .closing-h:has(.key),
  .chart-title:has(.key),
  .plate-title:has(.key),
  .foot-tag:has(.key){color:var(--setup)}
  h1 .key,
  .sec-title .key,
  .closing-h .key,
  .chart-title .key,
  .plate-title .key,
  .foot-tag .key{color:var(--text)}
  .lede{
    font-size:19px;line-height:1.62;
    max-width:56ch;
    color:rgba(231,227,218,.78);
    margin:0 0 44px;
  }
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  /* 기본은 테두리, 호버에서 솔리드로 채워지며 살짝 떠오른다.
     라벨은 레퍼런스에 맞춰 13px / 700. */
  .btn{
    display:inline-flex;align-items:center;gap:12px;
    font-family:'Space Mono',monospace;
    font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
    font-weight:700;
    padding:17px 30px;
    border:1px solid var(--accent);
    background:transparent;
    color:var(--text);
    text-decoration:none;
    will-change:transform;
    transition:background .2s ease, color .2s ease,
               transform .2s cubic-bezier(.2,.7,.3,1),
               box-shadow .2s ease;
  }
  .btn .arrow{
    color:var(--accent);
    transition:color .2s ease, transform .2s cubic-bezier(.2,.7,.3,1);
  }
  .btn:hover{
    background:var(--accent);
    color:var(--accent-ink);
    transform:translateY(-3px);
    box-shadow:0 10px 26px rgba(0,0,0,.45);
  }
  .btn:hover .arrow{ color:var(--accent-ink); transform:translateX(3px); }
  .btn:active{ transform:translateY(-1px); }

  /* 보조 버튼 — 테두리는 헤어라인, 채워질 때는 크림 */
  .btn.ghost{border-color:var(--hair)}
  .btn.ghost .arrow{color:rgba(231,227,218,.45)}
  .btn.ghost:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
  .btn.ghost:hover .arrow{color:var(--bg)}

  @media(prefers-reduced-motion:reduce){
    .btn,.btn .arrow{transition:background .2s ease,color .2s ease}
    .btn:hover{transform:none}
    .btn:hover .arrow{transform:none}
  }
  .price-note{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:1.4px;
    color:rgba(231,227,218,.42);
  }
  /* 히어로 사양 줄 — 제품이 무엇인지(파일 하나)를 사양으로 못 박는다 */
  .hero-meta{
    list-style:none;margin:clamp(26px,3.4vh,42px) 0 0;padding:0;
    display:flex;flex-wrap:wrap;align-items:center;
    gap:0 clamp(14px,1.8vw,26px);
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.4);
  }
  .hero-meta li{position:relative;padding:6px 0}
  .hero-meta li + li::before{
    content:'';position:absolute;
    left:calc(-1 * clamp(14px,1.8vw,26px) / 2);
    top:50%;transform:translateY(-50%);
    width:1px;height:10px;background:var(--hair);
  }

  /* 스크립트 블록 — 노이즈 위에서 본문 가독성이 살아있는지가 핵심 판정 */
  .strip{padding:80px 0;border-bottom:1px solid var(--hair)}
  .strip-label{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.6px;text-transform:uppercase;
    color:rgba(231,227,218,.4);
    margin:0 0 26px;
  }
  .script{
    border:1px solid var(--hair);
    background:rgba(16,17,20,.72);
    padding:26px 28px;
    max-width:640px;
  }
  .script .tag{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2px;text-transform:uppercase;
    color:var(--accent);
    display:block;margin-bottom:14px;
  }
  .script p{
    margin:0;font-size:15.5px;line-height:1.75;
    color:rgba(231,227,218,.88);
  }
  .body-copy{
    font-size:15.5px;line-height:1.8;max-width:62ch;
    color:rgba(231,227,218,.7);
    margin:22px 0 0;
  }

  /* ============================================================
     EXPANDING PLATE — 스크롤에 따라 가운데에서 좌우로 펼쳐지는 이미지
     clip-path inset을 줄인다. 이미지 자체는 처음부터 풀블리드 크기라
     늘어나거나 찌그러지지 않고 "드러난다".
     ============================================================ */
  /* 스테이지는 화면 한 개 높이 + 고정 거리만큼 길다. 그 안의 핀이 sticky로
     붙어 있는 동안 스크롤은 계속 진행되고, 그 진행이 확대를 굴린다. */
  .plate-stage,
  .chart-stage{
    position:relative;
    padding:0;
    height:calc(100vh + var(--chart-pin, 95vh));
  }
  /* 도판은 핀 안에서 두 동작(상자 성장 → 이미지 확대)을 굴리므로 더 길게 */
  /* 도판 핀 110vh (원래 150vh) — 상자 성장→이미지 확대 두 동작이 아직 구분된다 */
  .plate-stage{--chart-pin:110vh}
  .plate-pin,
  .chart-pin{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .plate-pin{
    /* 핀이 --reveal/--inset/--zoom을 들고 있고 자식들이 상속받는다.
       .plate는 잘리고 .plate-copy는 안 잘린다.
       가로·세로를 함께 줄여야 "작은 상자"에서 시작한다 — 세로를 0으로 두면
       화면 높이만큼 긴 띠가 좌우로만 열린다. */
    --reveal:0;
    --inset:calc((1 - var(--reveal)) * 34%);
    --inset-y:calc((1 - var(--reveal)) * 33%);
  }
  .plate-frame{position:relative}

  /* ============================================================
     CLOSING — 바탕에 거대한 워드마크를 깔고 그 위에 마지막 제안.
     ============================================================ */
  /* 워드마크 높이 — 아래 padding으로 자리를 비워 본문과 겹치지 않게 한다.
     워드마크는 absolute라 레이아웃을 밀지 못하므로 직접 예약해야 한다. */
  .closing{
    --mark-size:clamp(96px,21vw,360px);
    --gutter:var(--pad-l);
    position:relative;
    /* .wrap의 여백을 탈출해 화면 끝까지 넓힌다.
       그러지 않으면 overflow:hidden이 콘텐츠 폭에서 워드마크를 잘라
       오른쪽에 빈 띠가 남는다.
       좌우 여백이 다르므로 각각 제 값으로 빼야 한다 — 한쪽 값으로
       양쪽을 빼면 그 차이만큼 화면 밖으로 나가 가로 스크롤이 생긴다. */
    margin-left:calc(-1 * var(--pad-l));
    margin-right:calc(-1 * var(--pad));
    padding-left:var(--pad-l);
    padding-right:var(--pad);
    overflow:hidden;                 /* 워드마크가 화면 밖으로 나가도 가로 스크롤이 생기지 않게 */
    padding-top:clamp(80px,12vh,150px);
    padding-bottom:calc(var(--mark-size) * 0.82);
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:flex-start;
  }
  /* 폭 제한은 본문 문단에만 — 제목과 버튼줄에 걸면 둘 다 접힌다 */
  .closing-body{position:relative;z-index:2}
  .closing-body .cta-row{flex-wrap:nowrap}
  .closing-h{
    font-weight:900;
    font-size:clamp(34px,6vw,92px);
    line-height:.9;letter-spacing:-.05em;text-transform:uppercase;
    margin:0 0 22px;
  }
  .closing-lead{
    margin:0 0 34px;
    font-size:clamp(13.5px,1.05vw,16.5px);line-height:1.66;
    color:rgba(231,227,218,.62);max-width:46ch;
  }
  /* 거대한 워드마크 — 배경보다 아주 조금 밝다. 읽히기보다 느껴지는 층.
     왼쪽 끝에서 시작해 스크롤을 따라 오른쪽으로 흐른다.
     시작점에서 'CLEAR'가 온전히 보이도록 left:0에 붙인다. */
  .closing-mark{
    position:absolute;
    /* 시작점의 C가 본문과 같은 정렬선에 놓이도록 여백만큼 들여쓴다.
       오른쪽은 제한이 없어 화면 끝까지 이어진다. */
    left:var(--gutter);bottom:-3%;
    transform:translateX(var(--mark-x,0px));
    will-change:transform;
    z-index:1;
    font-weight:900;
    font-size:var(--mark-size);
    line-height:.76;
    letter-spacing:-.055em;
    color:rgba(231,227,218,.05);
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
  }

  @media(max-width:700px){
    .closing{--mark-size:26vw;min-height:auto}
    .closing-mark{bottom:-1%}
    .closing-body .cta-row{flex-wrap:wrap}
  }
  @media(prefers-reduced-motion:reduce){
    .closing-mark{transform:none}
  }

  /* ============================================================
     FOOTER — 색인 카드처럼. 목록이지 장식이 아니다.
     ============================================================ */
  .foot{
    border-top:1px solid var(--hair);
    padding:clamp(56px,8vh,96px) 0 clamp(28px,4vh,44px);
  }
  .foot-top{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:clamp(28px,4vw,64px);
    padding-bottom:clamp(40px,6vh,72px);
  }
  .foot-brand .mark-logo{height:26px;margin-bottom:20px}
  .foot-tag{
    font-weight:900;
    font-size:clamp(19px,2.2vw,30px);
    line-height:1.04;letter-spacing:-.04em;text-transform:uppercase;
    margin:0 0 18px;max-width:14ch;
  }
  .foot-meta{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:1.9px;text-transform:uppercase;
    line-height:2;color:rgba(231,227,218,.34);
    margin:0;
  }
  .foot-col h4{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.6px;text-transform:uppercase;
    color:rgba(231,227,218,.34);
    margin:0 0 18px;padding-bottom:10px;
    border-bottom:1px solid var(--hair-soft);
  }
  .foot-col ul{list-style:none;margin:0;padding:0}
  .foot-col li{margin-bottom:9px}
  .foot-col a{
    display:flex;justify-content:space-between;gap:12px;
    font-size:13px;line-height:1.5;
    color:rgba(231,227,218,.64);
    text-decoration:none;
    transition:color .15s ease;
  }
  .foot-col a:hover{color:var(--text)}
  .foot-col a span{
    font-family:'Space Mono',monospace;
    font-size:10.5px;color:rgba(231,227,218,.3);
    font-variant-numeric:tabular-nums;
  }

  .foot-bottom{
    display:flex;justify-content:space-between;align-items:center;
    gap:20px;flex-wrap:wrap;
    padding-top:clamp(20px,3vh,32px);
    border-top:1px solid var(--hair);
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.32);
  }
  .foot-legal{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
  .foot-legal a{color:rgba(231,227,218,.44);text-decoration:none}
  .foot-legal a:hover{color:var(--text)}

  @media(max-width:900px){
    .foot-top{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){
    .foot-top{grid-template-columns:1fr}
  }

  /* ============================================================
     CHART — 강도 분포. 핀에 붙어 있는 동안 막대가 순차로 자란다.
     막대는 scaleX라 레이아웃을 건드리지 않고 컴포지터에서 돈다.
     ============================================================ */
  /* 폭 제한은 제목이 아니라 설명문에만 건다.
     60ch는 본문 크기 기준이라 큰 제목에 적용하면 <br>과 무관하게 또 접힌다. */
  .chart-head,
  .sec-head{margin:0 0 clamp(20px,3vh,34px)}
  /* 핀 안에서는 화면 높이에 비례해 조여진다 — 낮은 화면에서 잘리지 않게 */
  .chart-pin .chart-head{margin-bottom:2.4vh;max-width:none}
  /* 크기는 원래대로(4vw). 다만 핀 섹션의 예산은 세로라서, 넓고 낮은 화면
     (예: 1440×620)에서는 가로 기준 크기가 예산을 넘는다. 세로 상한만 건다 —
     일반적인 화면 높이에서는 8.6vh가 60px 상한보다 커서 아무 영향이 없다. */
  .chart-pin .chart-title{
    font-size:min(clamp(28px,4vw,60px), 8.6vh);
    margin-bottom:1.2vh;
  }
  /* 설명은 한 줄로 — 폭을 풀어야 줄바꿈이 안 생긴다 */
  .chart-pin .chart-desc{max-width:none;font-size:clamp(12.5px,1.55vh,15.5px);line-height:1.5}
  .chart-pin .plate-eyebrow{margin-bottom:1.4vh}
  .chart-title,
  .sec-title{
    font-weight:900;
    font-size:clamp(28px,4vw,60px);
    line-height:.94;letter-spacing:-.045em;text-transform:uppercase;
    margin:0 0 16px;
  }
  .chart-desc,
  .sec-desc{
    margin:0;font-size:clamp(13.5px,1vw,16px);line-height:1.68;
    max-width:52ch;color:rgba(231,227,218,.68);
  }

  .chart-rows{border-top:1px solid var(--hair)}
  .chart-row{
    display:grid;
    grid-template-columns:minmax(124px,232px) 1fr 58px 68px;
    align-items:center;
    gap:clamp(14px,1.8vw,30px);
    padding:0.95vh 0;
    border-bottom:1px solid var(--hair-soft);
  }
  .chart-label{
    font-family:'Space Mono',monospace;
    font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.86);
    white-space:nowrap;
  }
  .chart-label span{
    display:block;
    letter-spacing:.6px;font-size:10px;
    color:rgba(231,227,218,.38);
    margin-top:4px;text-transform:none;
  }
  .chart-track{
    position:relative;height:11px;
    background:rgba(231,227,218,.055);
  }
  /* 마지막 행의 선은 지운다 — 표를 닫는 선은 SOURCE 줄 아래에 있다 */
  .chart-rows .chart-row:last-child{border-bottom:0}

  /* 아주 낮은 창에서는 보조 설명(ask precisely 등)을 버린다.
     행의 글자 높이는 vh로 줄일 수 없어서, 여기서 양보하지 않으면
     표 전체가 잘린다. 전략 이름과 숫자는 그대로 남는다. */
  @media(max-height:660px){
    .chart-pin .chart-label span{display:none}
  }
  .chart-fill{
    position:absolute;inset:0;
    transform:scaleX(0);
    transform-origin:left center;
    background:rgba(231,227,218,.42);
    will-change:transform;
  }
  /* 마지막 한 줄만 액센트 — 논점이 거기 있다 */
  .chart-row.accent .chart-fill{background:var(--accent)}
  .chart-row.accent .chart-label{color:var(--accent)}
  .chart-num,
  .chart-pct{
    font-family:'Space Mono',monospace;
    text-align:right;
    font-variant-numeric:tabular-nums;
  }
  .chart-num{color:var(--text);font-size:15px;font-weight:700}
  .chart-pct{color:rgba(231,227,218,.4);font-size:11px}

  .chart-foot{
    display:flex;justify-content:space-between;gap:20px;
    margin-top:3.6vh;
    padding-bottom:1.5vh;
    border-bottom:1px solid var(--hair);
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.32);
  }
  .chart-foot em{font-style:normal;color:rgba(231,227,218,.6)}

  @media(max-width:640px){
    .chart-row{grid-template-columns:minmax(104px,1fr) 1fr 44px;gap:12px}
    .chart-pct{display:none}
    .chart-label{font-size:11px}
    .chart-num{font-size:13px}
  }

  /* ============================================================
     LEDGER — 6권. 카드 대신 장부 행. 아카이브 문법에 맞고
     시나리오·초안·가격을 나란히 비교하기도 낫다.
     ============================================================ */
  .sec{padding:clamp(80px,11vh,150px) 0;border-bottom:1px solid var(--hair)}

  /* ============================================================
     VOLUME CARDS — 표지는 타이포그래피로 그린다.
     구 배너 이미지는 "122 SCENARIOS" 같은 옛 수치가 픽셀로 박혀 있어
     새 수치(158) 옆에 놓으면 서로를 반박한다.
     실제 표지 이미지가 오면 .vol-cover 안에 <img>만 넣으면 된다.
     ============================================================ */
  .volgrid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:1px;background:var(--hair);
    border:1px solid var(--hair);
  }
  .volcard{
    background:var(--bg);
    padding:clamp(18px,2vw,26px);
    text-decoration:none;color:inherit;
    display:flex;flex-direction:column;
    transition:background .18s ease;
  }
  .volcard:hover{background:var(--bg-raise)}

  .vol-cover{
    position:relative;
    aspect-ratio:4 / 5;
    overflow:hidden;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:clamp(14px,1.5vw,20px);
    margin-bottom:18px;
    border:1px solid rgba(231,227,218,.09);
    background:
      linear-gradient(163deg, rgba(12,13,15,.30) 0%, rgba(12,13,15,.86) 68%, rgba(12,13,15,.95) 100%),
      var(--vol, #4a4a4a);
  }
  /* 책등 */
  .vol-cover::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:7px;
    background:var(--vol,#4a4a4a);
  }
  /* 실제 표지 이미지가 들어오면 그림을 덮는다 */
  .vol-cover img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
  }
  .vol-code{
    font-family:'Space Mono',monospace;
    font-size:8.5px;letter-spacing:2.4px;text-transform:uppercase;
    color:rgba(231,227,218,.5);
    position:relative;
  }
  .vol-cover h3{
    margin:0;position:relative;
    font-weight:900;
    font-size:clamp(17px,1.9vw,26px);
    line-height:.94;letter-spacing:-.035em;text-transform:uppercase;
    color:var(--text);
  }

  .vol-meta{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
    margin:0 0 10px;
  }
  .vol-note{
    margin:0 0 18px;font-size:13.5px;line-height:1.6;
    color:rgba(231,227,218,.7);
  }
  /* 분량 내역 — 본편과 예방을 나눠 보여준다 */
  .vol-split{
    display:flex;gap:1px;margin:0 0 16px;
    background:var(--hair-soft);
  }
  .vol-split span{
    flex:var(--w,1);
    font-family:'Space Mono',monospace;
    font-size:8px;letter-spacing:1.2px;text-transform:uppercase;
    padding:5px 7px;white-space:nowrap;overflow:hidden;
    background:rgba(231,227,218,.05);
    color:rgba(231,227,218,.5);
  }
  .vol-split span.prev{background:rgba(231,227,218,.02);color:rgba(231,227,218,.34)}

  /* 실제 시나리오 발췌 — "내 상황이 있냐"에 직접 답한다 */
  .vol-eg{
    margin:0 0 auto;padding:0;list-style:none;
    border-top:1px solid var(--hair-soft);
  }
  .vol-eg li{
    position:relative;
    padding:9px 0 9px 15px;
    font-size:12.5px;line-height:1.55;
    color:rgba(231,227,218,.52);
    border-bottom:1px solid var(--hair-soft);
  }
  .vol-eg li::before{
    content:'';position:absolute;left:0;top:15px;
    width:5px;height:1px;background:var(--vol,#666);
  }
  .vol-eg-label{
    font-family:'Space Mono',monospace;
    font-size:8px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.3);
    margin:0 0 6px;
  }
  .vol-buy{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;margin-top:20px;
    padding-top:14px;border-top:1px solid var(--hair-soft);
  }
  .vol-buy .p{font-family:'Space Mono',monospace;font-size:17px;color:var(--text)}
  .vol-buy .go{
    font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:2px;
    text-transform:uppercase;color:var(--accent);
  }

  /* ============================================================
     VOLUME STAGE — 권마다 한 화면. 붙어 있는 동안
     책이 정면으로 돌고 → 스펙 행이 하나씩 들어오고 → 가격 버튼이 뜬다.
     ============================================================ */
  .vol-stage{
    position:relative;padding:0;
    /* 활주로 62vh (원래 100vh). 홈이 데스크톱 26스크롤이었고 그 절반이 이
       여섯 스테이지였다. 애니메이션 진행도는 (높이-100vh)로 정규화되므로
       짧아져도 연출은 끝까지 재생된다 — 회전·스펙 캐스케이드가 조금 빨라질
       뿐이다. 더 줄이면 스치듯 지나가 물건으로 안 읽힌다. */
    height:calc(100vh + var(--vol-pin, 62vh));
  }
  .vol-pin{
    position:sticky;top:0;height:100vh;
    display:flex;align-items:center;
  }
  .vol-layout{
    display:grid;
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    gap:clamp(30px,6vw,110px);
    align-items:center;
    width:100%;
  }

  /* ── 3D 책 ──────────────────────────────────────────────
     책등을 실제 면으로 세운다. 책 전체를 왼쪽 모서리를 축으로 돌리면
     오른쪽이 뒤로 물러나면서 왼쪽 책등이 드러난다 — 실제 책과 같다.
     ───────────────────────────────────────────────────── */
  .vol-book{
    perspective:1700px;
    perspective-origin:46% 40%;
    display:flex;flex-direction:column;align-items:center;
  }
  /* 표지 아래 스펙 — 전시 도판의 명판처럼 */
  .spec-under{
    width:min(100%,320px);
    margin-top:clamp(28px,4vh,52px);
  }
  /* 회전은 표지 하나에만 건다. 별도의 3D 면을 두지 않으므로
     기하가 어긋나 떠도는 조각이 생길 수 없다. 두께감은 표지 위에
     그림자와 하이라이트로 그린다. */
  .book3d{
    position:relative;
    width:min(100%,320px);
    aspect-ratio:3 / 4;
    transform:rotateY(var(--book-rot,-22deg));
    transform-origin:left center;
    overflow:visible;
  }
  /* 책등 — 표지 "안"에 그린다.
     .vol-cover에 overflow:hidden이 걸려 있으므로 무슨 일이 있어도
     표지 사각형 밖으로 나갈 수 없다. 앞선 초록/검정 조각은 이게
     표지 밖(.book3d의 자식)에 있었기 때문에 생긴 것이다. */
  .book-spine{
    position:absolute;left:0;top:0;bottom:0;
    width:8.5%;
    z-index:3;
    background:
      linear-gradient(90deg,
        rgba(0,0,0,.46) 0%,
        rgba(0,0,0,.14) 30%,
        rgba(255,255,255,.10) 50%,
        rgba(0,0,0,.18) 76%,
        rgba(0,0,0,.40) 100%);
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
  }
  .book-spine span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-family:'Space Mono',monospace;
    font-size:7.5px;letter-spacing:3.4px;text-transform:uppercase;
    color:rgba(231,227,218,.5);
    white-space:nowrap;
  }
  /* 표지 = 앞면. 내용은 책등 폭만큼 안쪽에서 시작한다. */
  .book3d .vol-cover{
    position:absolute;inset:0;
    width:auto;margin:0;
    padding-left:calc(10.5% + clamp(16px,1.8vw,26px));
    border-radius:1px 3px 3px 1px;
    box-shadow:
      36px 30px 76px rgba(0,0,0,.62),
      inset 0 0 0 1px rgba(231,227,218,.07);
  }
  /* 제본 그림자 — 책등 바로 오른쪽에서 부드럽게 풀린다 */
  .book3d .vol-cover .bind{
    position:absolute;left:10.5%;top:0;bottom:0;width:18%;
    background:linear-gradient(90deg,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 48%, rgba(0,0,0,0) 100%);
    pointer-events:none;z-index:2;
  }
  /* 인라인 보더도 책등을 침범하지 않게 왼쪽만 밀어준다 */
  .book3d .vol-cover::after{
    left:calc(10.5% + clamp(13px,1.4vw,19px));
  }
  /* 바닥 그림자는 두지 않는다. 표지 밖에 놓이는 유일한 요소였고,
     그림자 역할은 .vol-cover의 box-shadow가 이미 하고 있다. */
  /* 스테이지의 표지 — 위에 권 코드, 가운데 큰 제목, 아래 캡션. 전부 왼쪽 정렬 */
  .vol-book .vol-cover{
    justify-content:space-between;align-items:flex-start;
    text-align:left;
    padding:clamp(26px,3vw,40px);
  }
  .vol-book .vol-cover h3{
    font-size:clamp(27px,3.3vw,46px);
    line-height:.92;
    letter-spacing:-.045em;
  }
  .cover-cap{
    position:relative;
    font-family:'Space Mono',monospace;
    font-size:8px;letter-spacing:1.9px;text-transform:uppercase;
    line-height:1.7;
    color:rgba(231,227,218,.46);
    max-width:22ch;
  }
  /* 인라인 보더 — 가장자리에서 안쪽으로 물러난 테두리 */
  .vol-book .vol-cover::after{
    content:'';position:absolute;
    inset:clamp(13px,1.4vw,19px);
    border:1px solid rgba(231,227,218,.26);
    pointer-events:none;
  }
  /* 권 코드는 흐름 안의 첫 요소다. absolute로 띄우면 제목과 겹친다. */
  .book3d .vol-cover .vol-code{
    position:relative;
    text-align:left;
  }
  /* 카드용 7px 색 바는 3D 책에서 제거한다 — 진짜 책등이 그 역할을 한다 */
  .book3d .vol-cover::before{ display:none; }

  .vol-info{min-width:0}
  .vol-kicker{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:3.2px;text-transform:uppercase;
    color:var(--accent);margin:0 0 20px;
  }
  /* 제목은 작게 — 큰 제목은 왼쪽 표지가 이미 맡고 있다.
     시각적 무게는 그 아래 서브타이틀이 진다. */
  /* 제목은 한 줄, 작게 — 큰 제목은 왼쪽 표지가 맡는다 */
  .vol-h{
    font-family:'Space Mono',monospace;
    font-weight:700;
    font-size:clamp(11px,1.1vw,13px);
    line-height:1;letter-spacing:3px;text-transform:uppercase;
    white-space:nowrap;
    margin:0 0 18px;
    color:rgba(231,227,218,.62);
  }
  /* 설명이 헤딩 역할을 한다 */
  .vol-sub{
    font-weight:900;
    font-size:clamp(30px,4.6vw,68px);
    line-height:.92;letter-spacing:-.05em;text-transform:uppercase;
    margin:0 0 24px;
    max-width:16ch;
    color:var(--text);
  }
  .vol-lead{
    margin:0 0 clamp(20px,3vh,34px);
    font-size:clamp(13.5px,1.05vw,16px);line-height:1.66;
    max-width:50ch;color:rgba(231,227,218,.66);
  }

  /* 스펙 표 — 행이 순차로 들어온다 */
  .spec{border-top:1px solid var(--hair);max-width:560px}
  .spec-row{
    display:flex;justify-content:space-between;align-items:baseline;
    gap:20px;padding:clamp(8px,1.3vh,13px) 0;
    border-bottom:1px solid var(--hair-soft);
    font-family:'Space Mono',monospace;
    font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
    /* JS가 채운다. 이동 거리가 짧으면 "슬라이드 업"이 안 읽힌다. */
    opacity:0;transform:translateY(26px);
  }
  .spec-row .k{color:rgba(231,227,218,.42)}
  .spec-row .v{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
  .spec-row .v em{font-style:normal;color:rgba(231,227,218,.4)}

  .vol-cta{
    display:flex;align-items:center;gap:clamp(14px,2vw,26px);
    flex-wrap:wrap;
    margin-top:clamp(22px,3.4vh,38px);
    opacity:0;transform:translateY(34px);
  }
  .vol-cta .btn{border-color:var(--accent)}
  .vol-cta .after{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(231,227,218,.38);
  }

  @media(max-width:860px){
    /* 핀은 풀되 스테이지는 화면보다 길게 둔다 — 그래야 스크롤 진행률이
       0→1로 흐르고 스펙 행이 차례로 올라오는 애니메이션이 살아 있다.
       (책과 스펙표를 되살리는 규칙은 파일 끝의 VOLUME STAGE — 모바일 절에.) */
    .vol-pin{align-items:flex-start;padding-top:7vh;height:auto;position:relative}
    .vol-stage{height:auto;padding:56px 0 64px}
  }

  /* System 카드의 6권 책등 띠 — 화면에 들어오면 왼쪽부터 차례로 켜진다 */
  .system-spines{display:flex;gap:4px;margin-bottom:22px}
  .system-spines i{
    display:block;width:100%;height:16px;background:var(--s);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .52s cubic-bezier(.2,.7,.3,1);
    transition-delay:calc(var(--i) * 95ms);
  }
  .system-spines.on i{transform:scaleX(1)}
  @media(prefers-reduced-motion:reduce){
    .system-spines i{transition:none;transform:scaleX(1)}
  }

  @media(max-width:900px){ .volgrid{grid-template-columns:1fr 1fr} }
  @media(max-width:560px){ .volgrid{grid-template-columns:1fr} }

  .ledger{border-top:1px solid var(--hair)}
  .ledger-row{
    display:grid;
    grid-template-columns:3px minmax(150px,1.5fr) 1fr 84px 112px;
    align-items:center;
    gap:clamp(14px,2vw,32px);
    padding:clamp(16px,2.4vh,26px) 0;
    border-bottom:1px solid var(--hair-soft);
    text-decoration:none;color:inherit;
    transition:background .18s ease;
  }
  .ledger-row:hover{background:rgba(231,227,218,.028)}
  .ledger-bar{width:3px;height:30px;background:var(--vol,#6b6b6b)}
  .ledger-name{
    font-weight:600;font-size:clamp(16px,1.5vw,21px);
    text-transform:uppercase;letter-spacing:-.015em;
  }
  .ledger-note{
    font-size:13px;line-height:1.6;color:rgba(231,227,218,.55);
    margin:0;max-width:44ch;
  }
  .ledger-count,
  .ledger-price{
    font-family:'Space Mono',monospace;
    text-align:right;font-variant-numeric:tabular-nums;
  }
  .ledger-count{font-size:9.5px;letter-spacing:1.2px;color:rgba(231,227,218,.4);line-height:1.7}
  .ledger-price{font-size:16px;color:var(--text)}

  /* 장부 행은 원래 <a> 하나가 전부를 감쌌고, 그 하나가 권 소개 페이지로 갔다.
     그래서 가격 페이지에서 "$25"를 누르면 결제가 아니라 읽을거리로 돌아갔다 —
     구매 의도가 가장 높은 화면이 사람을 퍼널 위로 되돌려 보내고 있었다.
     이제 행 안에 목적지가 둘이다: 이름은 "무엇이 들었나", 가격은 "산다". */
  .ledger-row>.ledger-name{text-decoration:none;color:inherit}
  .ledger-row>.ledger-name:hover{text-decoration:underline;text-underline-offset:3px}
  .ledger-buy{
    font-family:'Space Mono',monospace;
    font-size:13px;letter-spacing:.5px;font-variant-numeric:tabular-nums;
    text-align:center;text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    /* 44px — 터치 타깃 하한. 이 행들이 20px이라 모바일에서 누르기 어려웠다. */
    min-height:44px;padding:0 12px;
    color:var(--text);
    border:1px solid var(--accent-line);
    background:transparent;
    transition:background .16s ease,border-color .16s ease;
    white-space:nowrap;
  }
  .ledger-buy:hover{background:var(--vol,rgba(231,227,218,.09));border-color:var(--vol,var(--text))}
  .ledger-buy .arrow{opacity:.6}
  /* /checkout/ 에서, 방금 사려던 그 권의 줄. 스크립트가 붙인다. */
  .ledger-row.is-wanted{background:rgba(231,227,218,.04)}
  .ledger-row.is-wanted .ledger-bar{height:44px}
  .ledger-row.is-wanted .ledger-buy{border-color:var(--vol,var(--text))}

  /* System은 7번째 책이 아니다 — 장부 밖으로 꺼낸다 */
  .system-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:clamp(20px,3vw,48px);
    align-items:center;
    margin-top:26px;padding:clamp(24px,3.4vh,36px) clamp(20px,2.6vw,34px);
    border:1px solid var(--accent-line);
    background:var(--accent-wash);
  }
  .system-price .btn{margin-top:22px}
  .system-row .k{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:3px;text-transform:uppercase;
    color:var(--accent);margin:0 0 14px;
  }
  /* 도표 헤딩과 같은 크기 — 이 섹션이 그만한 무게를 갖는다 */
  .system-row h3{
    margin:0 0 16px;
    font-size:clamp(28px,4vw,60px);
    line-height:.94;font-weight:900;
    text-transform:uppercase;letter-spacing:-.045em;
  }
  /* 권 스테이지의 설명(.vol-lead)과 같은 규격으로 맞춘다 */
  .system-row p{
    margin:0;
    font-size:clamp(13.5px,1.05vw,16px);
    line-height:1.66;
    color:rgba(231,227,218,.66);
    max-width:52ch;
  }
  .system-price{text-align:right;font-family:'Space Mono',monospace;white-space:nowrap}
  .system-price b{display:block;font-size:clamp(26px,3.2vw,40px);color:var(--accent);font-weight:700}
  .system-price s{display:block;font-size:11px;color:rgba(231,227,218,.35);margin-top:6px}
  .system-price em{display:block;font-style:normal;font-size:9px;letter-spacing:1.8px;color:rgba(231,227,218,.5);margin-top:8px;text-transform:uppercase}

  /* ============================================================
     LEDGER + MEDIA — 무료 툴. 왼쪽 목록에 호버하면 오른쪽 이미지가 바뀐다.
     ============================================================ */
  .ledger-layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(30px,5vw,90px);
    align-items:start;
  }

  .ledger-list{border-top:1px solid var(--hair)}
  .lrow{
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:clamp(12px,2vw,28px);
    padding:clamp(14px,2.2vh,24px) 0;
    border-bottom:1px solid var(--hair-soft);
    text-decoration:none;color:inherit;
    transition:opacity .25s ease, padding-left .25s cubic-bezier(.2,.7,.3,1);
  }
  .lnum{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.4px;
    color:var(--accent);
  }
  .lname{
    font-weight:900;
    font-size:clamp(19px,2.5vw,34px);
    line-height:1;letter-spacing:-.035em;text-transform:uppercase;
    color:var(--text);
    transition:color .25s ease;
  }
  .lmeta{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.36);
    white-space:nowrap;
  }
  /* 하나에 호버하면 나머지는 물러난다 — 목록 전체가 하나의 선택 상태가 된다 */
  .ledger-list:hover .lrow{opacity:.34}
  .ledger-list .lrow:hover,
  .ledger-list .lrow:focus-visible{opacity:1;padding-left:12px;outline:none}
  .lrow:focus-visible .lname{color:var(--accent)}

  /* 오른쪽 도판 */
  .ledger-media{position:relative}
  .lmedia-frame{
    position:relative;
    aspect-ratio:1200 / 630;      /* 실제 이미지 비율 */
    overflow:hidden;
    border:1px solid var(--hair);
    background:linear-gradient(150deg,#17191d 0%,#0e0f12 55%,#1b1d22 100%);
  }
  .lmedia-frame img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;
    opacity:0;transform:scale(1.04);
    transition:opacity .38s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  }
  .lmedia-frame img.on{opacity:1;transform:scale(1)}
  /* 모서리 마커 */
  .lmedia-frame::before,
  .lmedia-frame::after{
    content:'';position:absolute;width:14px;height:14px;z-index:2;
    border:1px solid var(--accent);
  }
  .lmedia-frame::before{top:12px;left:12px;border-right:0;border-bottom:0}
  .lmedia-frame::after{bottom:12px;right:12px;border-left:0;border-top:0}

  .lmedia-cap{
    display:flex;justify-content:space-between;gap:18px;
    margin-top:14px;
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(231,227,218,.34);
  }
  .lmedia-cap em{font-style:normal;color:var(--accent)}
  .lmedia-desc{
    margin:14px 0 0;
    font-size:clamp(13px,1vw,15px);line-height:1.62;
    color:rgba(231,227,218,.62);
    min-height:3.3em;
  }

  @media(max-width:900px){
    .ledger-layout{grid-template-columns:1fr;gap:26px}
    .ledger-media{display:none}          /* 호버가 없는 환경에선 의미가 없다 */
    .ledger-list:hover .lrow{opacity:1}
    .lrow{grid-template-columns:30px 1fr;row-gap:6px}
    .lmeta{grid-column:2;justify-self:start}
  }

  /* ============================================================
     APP DISPATCHES — 카드가 차례로 sticky로 쌓인다.
     뒤 카드가 앞 카드를 덮으며 올라오므로 배경은 불투명해야 한다.
     ============================================================ */
  .stack{position:relative}
  .dispatch{
    position:sticky;
    top:calc(92px + var(--i) * 26px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,4vw,64px);
    align-items:center;
    padding:clamp(26px,3.4vw,48px);
    background:var(--bg-raise);
    border:1px solid var(--hair);
  }
  .dispatch + .dispatch{margin-top:9vh}
  .dispatch-meta{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;
    color:var(--accent);margin:0 0 16px;
  }
  .dispatch h3{
    margin:0 0 14px;
    font-size:clamp(24px,3.1vw,44px);
    line-height:.96;font-weight:900;
    text-transform:uppercase;letter-spacing:-.045em;
  }
  .dispatch-lead{
    margin:0 0 20px;
    font-size:clamp(13.5px,1.05vw,16px);line-height:1.66;
    color:rgba(231,227,218,.66);max-width:44ch;
  }
  .dispatch-list{list-style:none;margin:0 0 24px;padding:0}
  .dispatch-list li{
    position:relative;padding-left:20px;margin-bottom:9px;
    font-size:13.5px;line-height:1.55;color:rgba(231,227,218,.62);
  }
  .dispatch-list li::before{
    content:'';position:absolute;left:0;top:8px;
    width:9px;height:1px;background:var(--accent);
  }
  .dispatch-price{
    display:flex;align-items:baseline;gap:12px;margin-bottom:22px;
    font-family:'Space Mono',monospace;
  }
  .dispatch-price b{font-size:26px;color:var(--text);font-weight:700}
  .dispatch-price s{font-size:12px;color:rgba(231,227,218,.3)}
  .dispatch-price em{font-style:normal;font-size:9px;letter-spacing:1.8px;
    text-transform:uppercase;color:rgba(231,227,218,.45)}

  /* ── 목업 공통 (useclearbound.com/ai-tools 마크업을 다크로 입힘) ── */
  .demo{
    background:var(--bg-deep);
    border:1px solid var(--hair);
    padding:clamp(18px,2vw,26px);
    font-size:13px;
  }
  .demo__label,
  .respond-demo__label,.read-demo__title,.track-demo__title{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.4px;text-transform:lowercase;
    color:rgba(231,227,218,.38);
    margin-bottom:14px;
  }
  .respond-demo__message{
    font-style:italic;line-height:1.6;
    color:rgba(231,227,218,.78);
    padding:14px 16px;
    background:rgba(231,227,218,.04);
    border-left:2px solid var(--hair);
  }
  .respond-demo__divider{
    display:flex;align-items:center;gap:12px;
    margin:16px 0;
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2px;color:var(--accent);
  }
  .respond-demo__divider::before,
  .respond-demo__divider::after{content:'';flex:1;height:1px;background:var(--hair)}
  .respond-demo__answer{
    line-height:1.62;color:var(--text);
    padding:14px 16px;border:1px solid var(--hair);
  }
  .respond-demo__footer{display:flex;justify-content:flex-end;margin-top:12px}
  .respond-demo__copy{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2px;text-transform:uppercase;
    color:var(--accent-ink);background:var(--accent);
    padding:6px 12px;
  }

  .read-demo__tone{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
  .read-demo__tone span{color:rgba(231,227,218,.6)}
  .read-demo__tone strong{color:#e0a94f;font-weight:700}
  .read-demo__meter{display:flex;gap:5px;margin:12px 0 18px}
  .read-demo__meter span{flex:1;height:6px;background:rgba(231,227,218,.09)}
  .read-demo__meter span.is-active{background:#e0a94f}
  .read-demo__flags{list-style:none;margin:0 0 18px;padding:0}
  .read-demo__flags li{
    position:relative;padding-left:18px;margin-bottom:8px;
    color:rgba(231,227,218,.7);line-height:1.5;
  }
  .read-demo__flags li::before{
    content:'';position:absolute;left:0;top:6px;
    width:7px;height:7px;background:#c8503f;
  }
  .read-demo__mode{
    padding:12px 14px;border:1px solid var(--hair);
    color:rgba(231,227,218,.7);
  }
  .read-demo__mode strong{color:var(--accent);font-weight:700}

  .track-demo__list{display:flex;flex-direction:column;gap:13px}
  .track-demo__item{display:flex;justify-content:space-between;align-items:center;gap:16px}
  .track-demo__client{color:var(--text)}
  .track-demo__status{display:flex;align-items:center;gap:11px}
  .track-demo__bar{display:block;width:64px;height:6px;background:rgba(231,227,218,.09)}
  .track-demo__fill{display:block;height:100%}
  .track-demo__fill.is-good{width:82%;background:#3f9e6f}
  .track-demo__fill.is-drift{width:52%;background:#e0a94f}
  .track-demo__fill.is-risk{width:24%;background:#c8503f}
  .track-demo__state{
    font-family:'Space Mono',monospace;font-size:10px;
    min-width:52px;text-align:right;
  }
  .is-good-text{color:#3f9e6f}
  .is-drift-text{color:#e0a94f}
  .is-risk-text{color:#c8503f}
  .track-demo__summary{
    margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.4px;
    color:rgba(231,227,218,.4);
  }

  @media(max-width:900px){
    .dispatch{grid-template-columns:1fr;position:relative;top:auto}
    .dispatch + .dispatch{margin-top:20px}
  }

  /* ============================================================
     GRID CELLS — 앱 3종
     ============================================================ */
  .cellgrid{
    display:grid;gap:1px;background:var(--hair);
    border:1px solid var(--hair);
  }
  .cellgrid.six{grid-template-columns:repeat(3,1fr)}
  .cellgrid.three{grid-template-columns:repeat(3,1fr)}
  .gcell{
    background:var(--bg);
    padding:clamp(22px,2.8vh,32px) clamp(18px,2vw,28px);
    text-decoration:none;color:inherit;
    display:flex;flex-direction:column;
    transition:background .18s ease;
  }
  .gcell:hover{background:var(--bg-raise)}
  .gcell .n{
    font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;
    color:rgba(231,227,218,.32);margin-bottom:16px;
  }
  .gcell h3{
    margin:0 0 10px;font-size:15.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:-.012em;
  }
  .gcell p{margin:0;font-size:13px;line-height:1.62;color:rgba(231,227,218,.58)}
  .gcell .price{
    font-family:'Space Mono',monospace;margin-top:18px;
    font-size:15px;color:var(--text);
  }
  .gcell .price s{color:rgba(231,227,218,.3);font-size:11px;margin-left:8px}
  .gcell .free{
    font-family:'Space Mono',monospace;margin-top:18px;
    font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
    color:var(--accent);
  }

  @media(max-width:900px){
    .cellgrid.six,.cellgrid.three{grid-template-columns:1fr 1fr}
    .ledger-row{grid-template-columns:3px 1fr 68px 104px;gap:12px}
    .ledger-note{display:none}
    .system-row{grid-template-columns:1fr}
    .system-price{text-align:left}
  }
  @media(max-width:560px){
    .cellgrid.six,.cellgrid.three{grid-template-columns:1fr}
  }
  .plate{
    position:relative;
    /* .bleed와 같은 값을 여기서 직접 준다. 예전에는 margin:0이었는데,
       이 규칙이 .bleed보다 뒤에 선언돼 풀블리드를 덮어쓰고 있었다 —
       그 결과 도판만 좌 78px / 우 39px로 어긋난 채 갇혀 있었다. */
    margin:0 calc(-1 * var(--pad)) 0 calc(-1 * var(--pad-l));
    overflow:hidden;
    clip-path:inset(var(--inset-y) var(--inset) var(--inset-y) var(--inset));
    will-change:clip-path;
  }
  .plate-media{
    position:relative;
    width:100%;
    /* 화면 높이를 채운다. 캡션 줄(약 33px)만 빼서 도판과 캡션이
       한 화면 안에 같이 들어오게 한다. 띠로 두면 스크롤 애니메이션이
       움직여도 면적이 작아 "아무 일도 안 일어난 것"처럼 보인다. */
    height:calc(100vh - 34px);
    overflow:hidden;
    border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
  }
  /* 확대되는 층은 이미지뿐. 스크림·모서리 마커·캡션은 제자리에 있어야
     프레임이 고정된 느낌이 나고 이미지만 밀려 커진다. */
  .plate-img{
    position:absolute;inset:0;
    background:linear-gradient(135deg, #17191d 0%, #0e0f12 46%, #1b1d22 100%);
    transform:scale(var(--zoom,1));
    transform-origin:center center;
    will-change:transform;
  }
  .plate-img img,
  .plate-img video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
  }
  /* 실제 사진이 들어오기 전 자리표시 */
  .plate-ph{
    position:absolute;right:22px;top:22px;
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.6px;text-transform:uppercase;
    color:rgba(231,227,218,.22);
    text-align:right;line-height:1.9;
    margin:0;
  }

  /* 스크림 — 이미지 위에서 글자가 읽히게 만드는 유일한 장치.
     왼쪽에서 오른쪽으로, 그리고 아래에서 위로 두 겹. */
  .plate-scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(90deg, rgba(8,9,10,.92) 0%, rgba(8,9,10,.72) 38%, rgba(8,9,10,.12) 72%, rgba(8,9,10,0) 100%),
      linear-gradient(0deg, rgba(8,9,10,.78) 0%, rgba(8,9,10,0) 55%);
    pointer-events:none;
  }

  /* 오버레이 카피 — .plate 밖(프레임 직속)이라 clip-path에 잘리지 않는다 */
  .plate-copy{
    position:absolute;
    left:var(--pad-l);
    right:var(--pad);
    bottom:clamp(28px,4vw,56px);
    z-index:2;
    pointer-events:none;
    /* 도판이 거의 다 열린 뒤에 들어온다. 일찍 나오면 이미지 바깥 배경 위에
       글자가 떠서 어색하다 — 카피는 이미지 위에 있어야 한다. */
    opacity:calc((var(--reveal) - .78) * 4.6);
    transform:translateY(calc((1 - var(--reveal)) * 46px));
  }
  .plate-eyebrow{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:3.2px;text-transform:uppercase;
    color:var(--accent);
    margin:0 0 16px;
  }
  .plate-title{
    font-weight:900;
    font-size:clamp(30px,4.4vw,68px);
    line-height:.92;
    letter-spacing:-.045em;
    text-transform:uppercase;
    margin:0 0 18px;
    color:var(--text);
  }
  .plate-desc{
    margin:0;
    font-size:clamp(14px,1.05vw,16.5px);
    line-height:1.68;
    max-width:46ch;
    color:rgba(231,227,218,.72);
  }
  /* 모서리 마커 — 아카이브 도판 느낌 */
  .plate-media::before,
  .plate-media::after{
    content:'';position:absolute;width:14px;height:14px;
    border:1px solid rgba(231,227,218,.28);
  }
  .plate-media::before{top:16px;left:16px;border-right:0;border-bottom:0}
  .plate-media::after{bottom:16px;right:16px;border-left:0;border-top:0}

  .plate-cap{
    display:flex;justify-content:space-between;gap:20px;
    padding:12px var(--pad) 0 var(--pad-l);
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.34);
  }
  .plate-cap em{font-style:normal;color:var(--accent)}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:38px}
  .cell{background:var(--bg);padding:28px 24px}
  .cell .n{
    font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;
    color:rgba(231,227,218,.35);display:block;margin-bottom:16px;
  }
  .cell h3{margin:0 0 10px;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:-.01em}
  .cell p{margin:0;font-size:13.5px;line-height:1.65;color:rgba(231,227,218,.6)}


  @media(max-width:900px){
    .grid{grid-template-columns:1fr}
    .panel{width:100%}
  }

  /* ============================================================
     SYSTEM 페이지 전용 컴포넌트
     ============================================================ */

  /* 라우터 사다리 — 위에서부터 예/아니오로 내려가며 권을 판정한다 */
  .ladder{border-top:1px solid var(--hair);counter-reset:rung}
  .ladder-step{
    display:grid;
    grid-template-columns:38px 1fr minmax(96px,auto);
    align-items:start;
    gap:clamp(14px,2vw,28px);
    padding:clamp(16px,2.4vh,26px) 0;
    border-bottom:1px solid var(--hair-soft);
  }
  .ladder-n{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.4px;
    color:rgba(231,227,218,.34);
    padding-top:3px;
  }
  .ladder-q{
    margin:0;font-size:clamp(14px,1.15vw,17px);line-height:1.6;
    color:rgba(231,227,218,.82);max-width:62ch;
  }
  .ladder-vol{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
    text-align:right;white-space:nowrap;padding-top:5px;
    color:var(--v,rgba(231,227,218,.5));
  }
  .ladder-note{
    margin:clamp(18px,2.6vh,30px) 0 0;
    font-size:13.5px;line-height:1.66;
    color:rgba(231,227,218,.55);max-width:56ch;
  }
  .ladder-note b{color:var(--text);font-weight:700}

  /* New client setup — 계약 전에 정할 6가지 */
  .setup{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:1px;background:var(--hair);
    border:1px solid var(--hair);
  }
  .setup-item{background:var(--bg);padding:clamp(20px,2.6vw,32px)}
  .setup-area{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.4px;text-transform:uppercase;
    color:var(--v,var(--accent));margin:0 0 12px;
  }
  .setup-item h3{
    margin:0 0 10px;font-size:clamp(16px,1.5vw,21px);
    font-weight:600;line-height:1.2;letter-spacing:-.015em;
  }
  .setup-when{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:1.4px;text-transform:uppercase;
    color:rgba(231,227,218,.36);margin:0;
  }

  /* 가격 비교 — 개별 합계 vs System */
  .compare{
    display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:clamp(20px,3vw,48px);
    border:1px solid var(--hair);
    padding:clamp(24px,3.4vh,40px) clamp(20px,2.6vw,36px);
  }
  .compare-rows{display:flex;flex-direction:column;gap:10px;min-width:0}
  .compare-row{
    display:flex;justify-content:space-between;gap:16px;
    font-family:'Space Mono',monospace;font-size:11px;
    letter-spacing:1.2px;color:rgba(231,227,218,.5);
    padding-bottom:9px;border-bottom:1px solid var(--hair-soft);
  }
  .compare-row.total{color:var(--text);border-bottom:0;padding-top:4px}
  .compare-row .n{font-variant-numeric:tabular-nums}
  .compare-buy{text-align:right;white-space:nowrap}
  .compare-buy b{display:block;font-family:'Space Mono',monospace;
    font-size:clamp(30px,4vw,52px);font-weight:700;color:var(--text)}
  .compare-buy em{display:block;font-style:normal;font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(231,227,218,.5);margin:8px 0 18px}

  /* FAQ */
  .faq{border-top:1px solid var(--hair);max-width:78ch}
  .faq-item{border-bottom:1px solid var(--hair-soft);padding:clamp(18px,2.4vh,26px) 0}
  .faq-item h3{
    margin:0 0 10px;font-size:clamp(15px,1.3vw,18px);
    font-weight:600;letter-spacing:-.012em;
  }
  .faq-item p{margin:0;font-size:14px;line-height:1.68;color:rgba(231,227,218,.62)}

  @media(max-width:760px){
    .setup{grid-template-columns:1fr}
    .compare{grid-template-columns:1fr}
    .compare-buy{text-align:left}
    .ladder-step{grid-template-columns:30px 1fr;row-gap:8px}
    .ladder-vol{grid-column:2;text-align:left;padding-top:0}
  }

  /* ============================================================
     SHOTS — 제품 화면 슬라이더. 비율 2:1로 고정해 두었으므로
     나중에 같은 비율의 영상이 나오면 <img>를 <video>로 바꾸기만 하면 된다.
     ============================================================ */
  .shots{position:relative}
  .shots-frame{
    position:relative;
    aspect-ratio:2 / 1;
    overflow:hidden;
    border:1px solid var(--hair);
    background:var(--bg-raise);
  }
  .shots-frame > img,
  .shots-frame > video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;display:block;
    opacity:0;transform:scale(1.015);
    transition:opacity .42s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .shots-frame > .on{opacity:1;transform:scale(1)}
  /* 모서리 마커 — 도판과 같은 아카이브 문법 */
  .shots-frame::before,
  .shots-frame::after{
    content:'';position:absolute;width:14px;height:14px;z-index:2;
    border:1px solid var(--accent);opacity:.5;
  }
  .shots-frame::before{top:12px;left:12px;border-right:0;border-bottom:0}
  .shots-frame::after{bottom:12px;right:12px;border-left:0;border-top:0}

  /* 탭 — 점이 아니라 이름으로. 무엇을 보는지가 곧 설명이다. */
  .shots-tabs{
    display:flex;gap:1px;background:var(--hair);
    border:1px solid var(--hair);border-top:0;
  }
  .shots-tabs button{
    flex:1;min-width:0;
    background:var(--bg);border:0;cursor:pointer;
    padding:clamp(12px,1.8vh,18px) clamp(10px,1.4vw,20px);
    text-align:left;
    font-family:'Space Mono',monospace;
    color:rgba(231,227,218,.42);
    transition:background .18s ease, color .18s ease;
  }
  .shots-tabs button:hover{background:var(--bg-raise);color:rgba(231,227,218,.7)}
  .shots-tabs button.on{background:var(--bg-raise);color:var(--text)}
  .shots-tabs .n{
    display:block;font-size:8.5px;letter-spacing:2px;
    color:rgba(231,227,218,.3);margin-bottom:7px;
  }
  .shots-tabs button.on .n{color:var(--accent)}
  .shots-tabs .t{
    display:block;font-size:11px;letter-spacing:1.4px;
    text-transform:uppercase;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  .shots-cap{
    margin:14px 0 0;
    font-size:clamp(13px,1vw,15px);line-height:1.62;
    color:rgba(231,227,218,.6);max-width:64ch;
  }

  @media(max-width:640px){
    .shots-tabs{flex-direction:column}
    .shots-tabs .t{white-space:normal}
  }


  /* ============================================================
     VOLUME PAGE — 개별 권 랜딩 (playbooks/<slug>/)
     권별 색은 .page에 인라인으로 얹은 --vol 하나로 갈린다.
     ============================================================ */
  .vol-chip{
    display:inline-block;width:7px;height:7px;margin-right:9px;
    background:var(--vol,var(--accent));vertical-align:middle;
  }

  /* 상황 — 이 권이 다루는 순간 하나 */
  .unit{
    border-left:2px solid var(--vol,var(--accent));
    padding:2px 0 2px 22px;margin:0 0 34px;max-width:78ch;
  }
  .unit-label{
    margin:0 0 12px;font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.4px;text-transform:uppercase;
    color:rgba(231,227,218,.4);
  }
  .unit-sit{
    margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.55;
    color:var(--text);
  }
  .unit-risk{
    margin:16px 0 0;font-size:14.5px;line-height:1.7;
    color:rgba(231,227,218,.6);
  }
  .unit-risk span{
    display:block;margin-bottom:5px;
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.38);
  }

  /* ❌ / ✅ 한 쌍 */
  .replies{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair)}
  .reply{background:var(--bg);padding:clamp(22px,2.2vw,34px)}
  .reply-label{
    margin:0 0 18px;font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
  }
  .reply-label::before{
    content:'✕';margin-right:9px;font-size:11px;
    color:rgba(231,227,218,.34);
  }
  .reply.good .reply-label::before{content:'✓';color:var(--vol,var(--accent))}
  .reply-body{
    border:1px solid var(--hair);background:var(--bg-raise);
    padding:clamp(18px,1.8vw,26px);
  }
  .reply.good .reply-body{border-color:color-mix(in srgb,var(--vol,var(--accent)) 34%,transparent)}
  .reply-body p{
    margin:0 0 14px;font-size:14.5px;line-height:1.78;
    color:rgba(231,227,218,.86);
  }
  .reply-body p:last-child{margin-bottom:0}
  .reply.bad .reply-body p{color:rgba(231,227,218,.55)}
  .draft-subject{
    margin:0 0 20px !important;padding-bottom:14px;
    border-bottom:1px solid var(--hair);
    font-family:'Space Mono',monospace;
    font-size:12.5px !important;line-height:1.6 !important;
    color:var(--text) !important;
  }
  .draft-subject span{
    display:block;margin-bottom:6px;
    font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.38);
  }
  .reply-note{
    margin:14px 0 0;font-size:12.5px;line-height:1.6;
    color:rgba(231,227,218,.45);
  }

  /* 선택지 카드 */
  /* 열 수는 카드 수를 따라간다. 3열로 고정하면 선택지가 2개인 권
     (Ghosted·Difficult Client·Breakup)에서 빈 칸이 배경색 상자로 남는다. */
  .choice{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
    gap:1px;background:var(--hair);
  }
  .choice-card{background:var(--bg);padding:clamp(22px,2.2vw,32px)}
  .choice-tag{
    display:inline-block;margin-bottom:16px;padding:5px 10px;
    border:1px solid color-mix(in srgb,var(--vol,var(--accent)) 40%,transparent);
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.2px;color:var(--vol,var(--accent));
  }
  .choice-card h3{
    margin:0 0 10px;font-size:clamp(16px,1.3vw,19px);
    font-weight:600;line-height:1.35;letter-spacing:-.01em;
  }
  .choice-desc{
    margin:0 0 20px;font-size:14px;line-height:1.65;
    color:rgba(231,227,218,.62);
  }
  .choice-tradeoff{
    margin:0;display:grid;grid-template-columns:auto 1fr;
    gap:8px 14px;align-items:start;
    padding-top:18px;border-top:1px solid var(--hair);
  }
  .choice-tradeoff dt{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.38);padding-top:2px;
  }
  .choice-tradeoff dd{
    margin:0;font-size:13.5px;line-height:1.55;
    color:rgba(231,227,218,.75);
  }
  .choice-foot{
    margin:22px 0 0;font-size:13.5px;line-height:1.7;
    color:rgba(231,227,218,.5);max-width:64ch;
  }

  /* 시나리오 지도 — 22개 전량 */
  .map{border-top:1px solid var(--hair)}
  .map-group{border-bottom:1px solid var(--hair);padding:clamp(24px,2.4vw,34px) 0}
  .map-head{
    display:grid;grid-template-columns:1fr auto;
    gap:6px 24px;align-items:baseline;margin-bottom:16px;
  }
  .map-head h3{
    margin:0;font-size:clamp(16px,1.4vw,20px);
    font-weight:600;letter-spacing:-.01em;line-height:1.3;
  }
  .map-sub{
    grid-column:1;margin:0;font-size:13px;line-height:1.5;
    color:rgba(231,227,218,.45);
  }
  .map-count{
    grid-column:2;grid-row:1 / span 2;
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.8px;white-space:nowrap;
    color:var(--vol,var(--accent));
  }
  .map-list{list-style:none;margin:0;padding:0;max-width:96ch}
  .map-list li{
    position:relative;padding:9px 0 9px 26px;
    font-size:14.5px;line-height:1.65;
    color:rgba(231,227,218,.72);
    border-top:1px solid rgba(231,227,218,.055);
  }
  .map-list li::before{
    content:'';position:absolute;left:2px;top:19px;
    width:9px;height:1px;background:var(--vol,var(--accent));opacity:.55;
  }

  /* 시스템 업셀 */
  .up{border-top:1px solid var(--hair)}
  .up-row{
    display:grid;grid-template-columns:minmax(140px,1fr) 3fr auto;
    gap:12px 28px;align-items:baseline;
    padding:20px 0;border-bottom:1px solid var(--hair);
  }
  .up-k{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(231,227,218,.5);
  }
  .up-v{font-size:14.5px;line-height:1.6;color:rgba(231,227,218,.78)}
  .up-n{
    font-family:'Space Mono',monospace;font-size:15px;
    color:var(--text);text-align:right;
  }
  .up .btn{margin-top:26px}

  /* 구매 블록 */
  .buy{
    display:grid;grid-template-columns:1.4fr 1fr;gap:1px;
    background:var(--hair);border:1px solid var(--hair);
  }
  .buy-what,.buy-act{background:var(--bg);padding:clamp(24px,2.6vw,38px)}
  .buy-what h3{
    margin:0 0 20px;font-size:clamp(17px,1.5vw,21px);
    font-weight:600;letter-spacing:-.01em;
  }
  .buy-list{list-style:none;margin:0;padding:0}
  .buy-list li{
    position:relative;padding:9px 0 9px 22px;
    font-size:14px;line-height:1.6;
    color:rgba(231,227,218,.72);
  }
  .buy-list li::before{
    content:'';position:absolute;left:0;top:17px;
    width:8px;height:1px;background:var(--vol,var(--accent));
  }
  .buy-act{display:flex;flex-direction:column;justify-content:center;text-align:center}
  .buy-act b{
    display:block;font-family:'Archivo',sans-serif;font-weight:900;
    font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.04em;
    margin-bottom:22px;
  }
  .buy-credit{
    margin:16px 0 0;font-size:12.5px;line-height:1.6;
    color:rgba(231,227,218,.5);
  }

  @media(max-width:900px){
    .replies,.choice,.buy{grid-template-columns:1fr}
    .up-row{grid-template-columns:1fr auto;gap:8px 18px}
    .up-v{grid-column:1 / -1;order:3}
  }

  /* 살아 있는 도판 — 안에 든 것이 사진이 아니라 제품 화면일 때.
     사진 도판은 카피를 받치는 배경이지만, 여기서는 화면 자체가 증거라
     스크림을 왼쪽 아래로만 남기고 오른쪽은 걷어낸다. */
  .plate-live .plate-scrim{
    background:
      linear-gradient(90deg, rgba(8,9,10,.88) 0%, rgba(8,9,10,.52) 28%, rgba(8,9,10,.06) 56%, rgba(8,9,10,0) 100%),
      linear-gradient(0deg, rgba(8,9,10,.74) 0%, rgba(8,9,10,0) 40%);
  }

  /* ============================================================
     MOBILE HEADER — 860px 아래에서 내비를 숨기던 규칙을 대체한다.
     숨기면 폰에서 헤더에 로고만 남아 어느 페이지로도 갈 수 없었다
     (520px 아래에서는 CTA까지 사라졌다).
     햄버거를 두지 않는 이유: 링크가 5개뿐이고, 이 디자인의 문법은
     장부·라벨이라 접었다 펴는 장치보다 한 줄로 늘어놓는 편이 맞다.
     ============================================================ */
  @media(max-width:860px){
    .topbar{
      flex-wrap:wrap;
      row-gap:12px;
      padding-top:14px;padding-bottom:0;
    }
    .mark-link{order:1}
    .nav-cta{order:2;margin-left:auto}
    .nav{
      display:flex;
      order:3;
      flex:0 0 100%;
      margin-left:calc(-1 * var(--pad-l));
      margin-right:calc(-1 * var(--pad));
      padding:0 var(--pad) 12px var(--pad-l);
      gap:clamp(16px,4.6vw,30px);
      /* 좁으면 가로로 밀어서 본다 — 줄바꿈보다 헤더 높이가 덜 흔들린다 */
      overflow-x:auto;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }
    .nav::-webkit-scrollbar{display:none}
    /* 오른쪽 끝을 흐리게 — 더 있다는 신호. 스크롤바가 없으니 이게 유일한 단서다. */
    .nav{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent 100%);
         mask-image:linear-gradient(90deg,#000 84%,transparent 100%)}
    .nav a{font-size:10.5px}
  }
  @media(max-width:520px){
    /* CTA도 남긴다. 가격을 떼어 폭만 줄인다 — 링크가 사라지는 것보다 낫다. */
    .nav-cta{display:inline-block;font-size:9px;padding:8px 12px}
    .nav-cta .price-off{display:none}
  }

  @media(max-width:560px){
    /* 로고와 CTA가 한 줄에 들어가야 헤더가 2단(로고+CTA / 링크)으로 끝난다.
       셋으로 나뉘면 sticky 헤더가 화면의 15%를 먹는다. */
    .topbar .mark-logo{height:22px;width:auto}
    .nav-cta{font-size:8.5px;letter-spacing:1.4px;padding:7px 10px}
  }


  /* 도판 카피 배치 (2026-08-12) — 제목은 하단 왼쪽 절반, 설명은 하단 전폭.
     제목이 화면 폭을 다 먹으면 사진이 글자 뒤로 사라진다. */
  .plate-copy .plate-title{width:50%;max-width:none}
  .plate-copy .plate-desc{width:100%;max-width:none}
  @media(max-width:860px){
    .plate-copy .plate-title{width:100%}
  }

  /* 영상 도판은 제 비율대로 — 세로로 늘리면 녹화 화면이 잘린다 */
  .plate-live .plate-media{height:auto}

  /* ============================================================
     MOBILE PIN — 폰에서 도판이 멈추지 않던 문제 (2026-08-12)
     원인 둘:
     1) 100vh는 주소창이 차지하는 영역까지 포함한다. 실제 보이는 높이보다
        핀이 커서, 붙어 있는 동안에도 아래가 잘려 "그냥 흘러간" 것처럼 보인다.
        → dvh(동적 뷰포트 높이)로 잡는다. vh 줄을 먼저 둬서 미지원 브라우저는
          기존 동작을 그대로 받는다.
     2) 핀 거리가 화면 하나보다 짧아, 손가락 한 번에 지나가 버린다.
        → 좁은 화면에서 더 길게 준다.
     ============================================================ */
  @supports (height:100dvh){
    .plate-stage,
    .chart-stage{height:calc(100dvh + var(--chart-pin, 95vh))}
    .plate-pin,
    .chart-pin{height:100dvh}
    .plate-media{height:calc(100dvh - 34px)}
  }
  @media(max-width:860px){
    /* 핀 거리 1.2화면 — 스와이프 한 번에 지나가지 않으면서, 폰에서
       도판 세 개가 연달아 붙어 있는 시간이 지루해지지 않는 선. */
    .plate-stage{--chart-pin:120vh}
  }

  /* ============================================================
     MEGA MENU — 데스크톱에서 Playbooks에 호버하면 헤어라인 아래로
     전폭 패널이 내려온다. 안은 시스템 페이지와 같은 장부 문법.
     JS 없이 :hover / :focus-within 으로만 연다 — 링크 6개짜리 메뉴에
     스크립트를 붙일 이유가 없고, JS가 죽어도 링크는 살아 있다.
     터치 기기에는 호버가 없으므로 860px 이하에서는 아예 없다.
     ============================================================ */
  .has-mega{position:static}
  .mega{display:none}

  @media(min-width:861px){
    .mega{
      display:block;
      position:absolute;
      left:0;right:0;top:100%;
      background:var(--bg-raise);
      border-bottom:1px solid var(--hair);
      box-shadow:0 24px 60px rgba(0,0,0,.5);
      opacity:0;visibility:hidden;
      transform:translateY(-6px);
      transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility 0s .2s;
      z-index:19;
    }
    .has-mega:hover .mega,
    .has-mega:focus-within .mega{
      opacity:1;visibility:visible;transform:translateY(0);
      transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility 0s;
    }
    .mega-inner{padding:22px var(--pad) 26px var(--pad-l)}
    .mega-label{
      margin:0 0 14px;
      font-family:'Space Mono',monospace;
      font-size:9px;letter-spacing:2.6px;text-transform:uppercase;
      color:rgba(231,227,218,.34);
    }
    .mega-row{
      display:grid;
      grid-template-columns:34px 168px minmax(0,1fr) 152px 52px;
      align-items:baseline;
      gap:0 20px;
      padding:11px 0;
      border-top:1px solid var(--hair);
      text-decoration:none;
      transition:background .14s ease;
    }
    .mega-row:hover{background:rgba(231,227,218,.045)}
    /* .nav a 가 이 안의 링크까지 잡아서 전부 대문자 모노로 나온다.
       클래스 두 개짜리 선택자로 되돌린다 — 숫자·수량·가격만 모노로 남긴다. */
    .nav .mega-row,
    .nav .mega-foot a{
      font-family:'Archivo',system-ui,-apple-system,sans-serif;
      text-transform:none;
      letter-spacing:normal;
      font-size:14.5px;
      white-space:normal;
    }
    .mega-n{
      font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.6px;
      color:var(--vol,rgba(231,227,218,.4));
    }
    .mega-name{
      font-size:14.5px;font-weight:600;letter-spacing:-.01em;
      color:var(--text);
      /* 권 색은 왼쪽 짧은 막대로만 — 이름을 물들이면 6줄이 산만해진다 */
      position:relative;
    }
    .mega-name::before{
      content:'';position:absolute;left:-11px;top:.32em;
      width:3px;height:.82em;background:var(--vol,transparent);
    }
    .mega-note{
      font-size:12.5px;line-height:1.5;
      color:rgba(231,227,218,.5);
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .mega-count,.mega-price{
      font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.4px;
      color:rgba(231,227,218,.4);
    }
    .mega-price{text-align:right;color:rgba(231,227,218,.72)}
    /* 수량·가격은 접히면 행 높이가 흔들린다 */
    .mega-count,.mega-price{white-space:nowrap}
    /* 푸터 링크는 위의 리셋에 딸려가지 않게 다시 모노로 */
    .nav .mega-foot a{
      font-family:'Space Mono',monospace;
      font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
    }
    .mega-row:hover .mega-price{color:var(--accent)}
    /* System 행 — 6권과 같은 목록에 있지만 다른 물건이다 */
    .mega-sys{border-top:1px solid var(--accent-dim,rgba(231,227,218,.22));margin-top:6px}
    .mega-sys .mega-name{color:var(--accent)}
    .mega-foot{
      display:flex;justify-content:space-between;gap:20px;
      padding-top:14px;
      font-family:'Space Mono',monospace;
      font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
      color:rgba(231,227,218,.3);
    }
    .mega-foot a{color:rgba(231,227,218,.5);text-decoration:none}
    .mega-foot a:hover{color:var(--accent)}
  }

  /* ============================================================
     MOBILE DRAWER — 860px 이하에서는 링크를 한 줄로 늘어놓는 대신
     햄버거로 연다. 앞의 "둘째 줄" 규칙을 여기서 덮는다.
     ============================================================ */
  .burger{display:none}
  .mobile-nav{display:none}

  @media(max-width:860px){
    .topbar{flex-wrap:nowrap;padding-bottom:14px;row-gap:0}
    .nav{display:none}
    /* 앞선 "둘째 줄" 규칙이 남긴 order를 되돌린다 —
       그대로 두면 CTA가 로고보다 앞에 서서 헤더가 뒤집힌다. */
    .mark-link{order:0}
    .nav-cta{order:1;margin-left:auto}
    .burger{order:2}

    .burger{
      display:inline-flex;flex-direction:column;justify-content:center;
      gap:5px;width:42px;height:34px;padding:0 10px;margin-left:12px;
      background:none;border:1px solid var(--hair);cursor:pointer;
    }
    .burger span{
      display:block;height:1px;width:100%;background:var(--text);
      transition:transform .22s cubic-bezier(.2,.7,.3,1),opacity .16s ease;
    }
    .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
    .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
    .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

    .mobile-nav{
      display:block;
      position:fixed;inset:0;
      z-index:19;                       /* 상단바(20) 아래로 깔려 버튼이 계속 눌린다 */
      background:var(--bg);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding:78px var(--pad) 40px var(--pad-l);
      opacity:0;visibility:hidden;
      transform:translateY(-10px);
      transition:opacity .2s ease,transform .26s cubic-bezier(.2,.7,.3,1),visibility 0s .24s;
    }
    .mobile-nav.is-open{
      opacity:1;visibility:visible;transform:none;
      transition:opacity .2s ease,transform .26s cubic-bezier(.2,.7,.3,1),visibility 0s;
    }
    /* 서랍이 열려 있는 동안 뒤 페이지가 따라 움직이지 않게 */
    html.nav-open,html.nav-open body{overflow:hidden}

    .mnav-label{
      margin:22px 0 10px;
      font-family:'Space Mono',monospace;
      font-size:9px;letter-spacing:2.6px;text-transform:uppercase;
      color:rgba(231,227,218,.34);
    }
    .mnav-label:first-child{margin-top:0}
    .mnav-row{
      display:grid;
      grid-template-columns:28px minmax(0,1fr) 58px 44px;
      align-items:baseline;gap:0 10px;
      padding:13px 0;
      border-top:1px solid var(--hair);
      text-decoration:none;
      /* 링크에 색을 안 주면 span 이 안 덮은 텍스트가 순정 파랑으로 샌다 */
      color:var(--text);
    }
    .mnav-n{
      font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.4px;
      color:var(--vol,rgba(231,227,218,.4));
    }
    .mnav-name{
      font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text);
      position:relative;
    }
    .mnav-name::before{
      content:'';position:absolute;left:-10px;top:.3em;
      width:3px;height:.84em;background:var(--vol,transparent);
    }
    .mnav-count,.mnav-price{
      font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.2px;
      white-space:nowrap;color:rgba(231,227,218,.4);
    }
    .mnav-price{text-align:right;color:rgba(231,227,218,.75)}
    .mnav-sys{border-top-color:rgba(231,227,218,.22);margin-top:6px}
    .mnav-sys .mnav-name{color:var(--accent)}
    .mnav-link{
      display:block;padding:13px 0;
      border-top:1px solid var(--hair);
      font-size:16px;color:rgba(231,227,218,.8);text-decoration:none;
    }
    .mnav-foot{
      margin:26px 0 0;
      font-family:'Space Mono',monospace;
      font-size:9px;letter-spacing:2px;line-height:2;text-transform:uppercase;
      color:rgba(231,227,218,.3);
    }
  }

  /* CTA 라벨 — 좁은 화면에서는 짧은 쪽으로 바꾼다.
     긴 라벨이 154px을 먹으면 햄버거가 화면 밖으로 밀린다. */
  .cta-mini{display:none}
  @media(max-width:560px){
    .nav-cta .cta-full{display:none}
    .nav-cta .cta-mini{display:inline}
    .burger{flex:none}       /* 눌러야 하는 버튼이므로 절대 줄어들지 않는다 */
  }

  /* 핀 스테이지는 자기 끝선을 이미 갖고 있다 —
     도표는 .chart-foot의 밑줄, 도판은 .plate-cap 줄.
     여기에 .strip의 섹션 경계선까지 그으면, 핀이 풀린 뒤 빈 띠를 사이에 두고
     선이 하나 더 뜬다. 그 선을 없앤다. */
  .plate-stage,
  .chart-stage{border-bottom:0}

  /* 막대는 스테이지 83% 지점에서 다 자란다. 남은 17%는 아무 일도 없는
     스크롤이라 그만큼 짧게 잡는다 (95vh → 80vh). */
  .chart-stage{--chart-pin:80vh}

  /* 도판 높이를 캡션에 맡긴다.
     "100dvh - 34px"은 캡션이 한 줄이라는 가정이었는데, 좁은 화면에서는
     두 줄이 되어 핀 상자를 5px 넘치고 다음 도판을 파고들었다.
     이제 캡션이 제 높이를 먼저 가져가고 도판이 나머지를 받는다. */
  .plate-frame{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .plate-stage:not(.plate-live) .plate{flex:1 1 auto;min-height:0}
  .plate-stage:not(.plate-live) .plate-media{height:100%}

  @media(max-width:860px){
    /* 핀 스테이지가 연달아 오면 숨 쉴 틈을 준다 — 붙여 놓으면 앞 도판의
       캡션과 다음 도판의 첫 화면이 한 덩어리로 읽힌다. */
    .plate-stage + .plate-stage,
    .plate-stage + .chart-stage,
    .chart-stage + .plate-stage{margin-top:clamp(30px,5vh,56px)}
  }

  /* 영상 도판은 제 비율(2:1)을 지키므로 좁은 화면에서 높이가 짧다.
     프레임 위쪽에 붙여 두면 아래가 텅 비므로 가운데에 앉힌다. */
  .plate-live .plate-frame{justify-content:center}

  /* ============================================================
     VOLUME STAGE — 모바일 (2026-08-13)
     데스크톱은 2열(왼쪽 책+스펙 / 오른쪽 설명)인데, 모바일에서는 왼쪽 열을
     통째로 숨기고 있었다. 이제 한 줄로 세우되 순서를 섞는다:
       제목 → 책 → 설명 → 스펙표 → 예시 → 구매
     두 열의 자식을 같은 레벨로 올려야 섞을 수 있어서 display:contents를 쓴다.
     그러면 .vol-book이 들고 있던 perspective가 사라지므로,
     원근을 transform 안으로 옮긴다.
     ============================================================ */
  @media(max-width:860px){
    .vol-layout{display:flex;flex-direction:column;gap:clamp(18px,3.4vh,30px)}
    .vol-book,
    .vol-info{display:contents}

    .vol-kicker{order:1}
    .vol-h{order:2}
    .vol-sub{order:3}
    .book3d{
      order:4;
      width:min(72%,240px);margin:6px auto 2px;
      transform:perspective(1400px) rotateY(var(--book-rot,-22deg));
    }
    .vol-lead{order:5}
    .spec-under{order:6;width:100%;margin:0}
    .vol-info .spec:not(.spec-under){order:7}
    .vol-cta{order:8}

    /* 세로로 세우면 각 요소의 아래 여백이 이중으로 쌓인다 — gap에 맡긴다 */
    .vol-kicker,.vol-h,.vol-sub,.vol-lead{margin-bottom:0}
  }

  /* 섹션 설명 아래 덧붙이는 한 줄 — 약속·조건 같은 부수 정보.
     본문보다 한 단 죽이고 액센트 막대로 묶는다. */
  .sec-note{
    margin:16px 0 0;
    padding-left:14px;
    border-left:2px solid var(--accent);
    font-size:clamp(13px,.95vw,15px);line-height:1.65;
    max-width:56ch;color:rgba(231,227,218,.56);
  }

  /* 허브의 증상 그룹 제목은 해당 권으로 가는 링크다.
     스타일이 없으면 브라우저 기본 파란 밑줄로 떨어진다. */
  .map-head h3 a{
    color:inherit;text-decoration:none;
    display:inline-flex;align-items:baseline;gap:10px;
    transition:color .16s ease;
  }
  .map-head h3 a::after{
    content:'→';
    font-size:.72em;color:var(--vol,var(--accent));
    transition:transform .18s cubic-bezier(.2,.7,.3,1);
  }
  .map-head h3 a:hover{color:var(--vol,var(--accent))}
  .map-head h3 a:hover::after{transform:translateX(5px)}

  /* ============================================================
     SHOTS AS PLATE — 권 페이지의 제품 화면에도 도판과 같은 동작을 준다.
     화면 가운데 멈춘 뒤, 작은 상자에서 사방으로 열리고 이미지가 115%까지
     커진다. 탭은 그동안 계속 눌린다.
     ============================================================ */
  /* 핀 구간은 패딩이 아니라 높이로 잡는다 — 패딩으로 주면 sticky가
     붙지 않고 그대로 흘러간다(홈 도판이 쓰는 방식과 같게 맞춤). */
  .shots-stage{height:calc(100vh + var(--shots-pin,120vh));padding-bottom:0}
  .shots-pin{
    position:sticky;top:0;
    height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    /* 도판과 같은 변수를 쓴다 — site.js가 여기에 값을 넣는다 */
    --reveal:0;
    --inset:calc((1 - var(--reveal)) * 34%);
    --inset-y:calc((1 - var(--reveal)) * 33%);
  }
  @supports (height:100dvh){ .shots-pin{height:100dvh} }

  .shots-pin .shots-frame{
    clip-path:inset(var(--inset-y) var(--inset) var(--inset-y) var(--inset));
    will-change:clip-path;
  }
  /* 켜진 슬라이드만 확대된다. 꺼진 슬라이드의 1.015는 크로스페이드용이라 그대로 둔다. */
  .shots-pin .shots-frame > .on{transform:scale(var(--zoom,1))}

  @media(max-width:860px){
    /* 폰에서는 스와이프 한 번에 지나가지 않을 만큼만 */
    .shots-stage{--shots-pin:100vh}
  }

  /* 지도의 마지막 그룹은 밑줄을 갖지 않는다.
     섹션 경계선이 바로 아래에 또 그어져서, 둘 사이에 섹션 여백(80px)이
     빈 띠로 남고 줄이 두 개로 보였다. 닫는 선은 섹션 것 하나면 된다. */
  .map-group:last-child{border-bottom:0}

  /* ============================================================
     SHELF — 6권 표지를 한 줄로. 가격 페이지의 랜드마크.
     홈에서 쓰는 .book3d / .vol-cover 부품을 그대로 쓰고, 배치와
     등장만 여기서 정한다. 새 이미지 자산은 쓰지 않는다.
     ============================================================ */
  .shelf{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:clamp(10px,1.4vw,22px);
    perspective:2000px;
    perspective-origin:50% 40%;
    padding:clamp(10px,2vh,26px) 0 0;
  }
  .shelf-item{
    display:block;text-decoration:none;color:var(--text);
    /* 등장 — 컨테이너가 화면에 들어오면 차례로 선다 */
    opacity:0;
    transform:translateY(20px);
    transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.3,1);
    transition-delay:calc(var(--i, 0) * 80ms);
  }
  .shelf.is-in .shelf-item{opacity:1;transform:none}

  .shelf .book3d{
    width:100%;
    transform:rotateY(-15deg);
    transition:transform .45s cubic-bezier(.2,.7,.3,1);
  }
  .shelf-item:hover .book3d{transform:rotateY(-4deg) translateY(-6px)}

  .shelf-cap{
    display:flex;justify-content:space-between;align-items:baseline;
    gap:8px;margin-top:14px;
    padding-top:10px;border-top:1px solid var(--hair);
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
  }
  .shelf-cap b{font-weight:400;color:var(--text)}
  .shelf-item:hover .shelf-cap b{color:var(--vol)}

  @media(prefers-reduced-motion:reduce){
    .shelf-item{opacity:1;transform:none;transition:none}
  }
  @media(max-width:900px){
    .shelf{grid-template-columns:repeat(3,1fr);gap:clamp(12px,3vw,20px)}
  }
  @media(max-width:520px){
    .shelf{grid-template-columns:repeat(2,1fr)}
    .shelf-cap{font-size:8.5px;letter-spacing:1.2px}
  }

  /* 선반의 표지는 홈보다 훨씬 작다(133px). 홈 기준 제목 크기를 그대로 쓰면
     "DIFFICULT"·"GHOSTED" 같은 낱말이 표지 밖으로 17px까지 밀린다.
     표지 폭에 맞춰 줄이고, 그래도 넘치면 글자 간격을 더 좁힌다. */
  .shelf .vol-cover h3{
    font-size:clamp(11px,1.15vw,17px);
    letter-spacing:-.045em;
    line-height:.98;
    overflow-wrap:anywhere;
  }
  .shelf .cover-cap{font-size:7px;letter-spacing:1.5px;line-height:1.6}
  .shelf .vol-cover .vol-code{font-size:7px;letter-spacing:1.4px}

  /* 선반 표지의 괘선 — 진짜 인쇄된 표지처럼 보이게.
     액자 테두리는 홈 표지(.vol-book)에만 걸려 있어서 선반에는 안 나왔다.
     여기서 다시 열고, 제목 밑줄과 캡션 위 실선을 더한다. */
  .shelf .vol-cover{padding:11px 12px}
  .shelf .vol-cover::after{
    content:'';position:absolute;
    /* 왼쪽은 책등(10.5%)을 피해서 들어간다 */
    inset:8px 8px 8px calc(10.5% + 8px);
    border:1px solid rgba(231,227,218,.22);
    pointer-events:none;
  }
  /* 제목 — 조금 더 크게. 표지 폭(109px)에 "DIFFICULT"가 들어가는 상한이 이 근처다. */
  .shelf .vol-cover h3{
    font-size:clamp(13px,1.55vw,18px);
    letter-spacing:-.04em;
    line-height:1.0;
  }
  /* 제목 아래 짧은 괘선 — 표제지의 규칙선 */
  .shelf .vol-cover h3::after{
    content:'';display:block;
    width:34%;height:1px;margin-top:8px;
    background:rgba(231,227,218,.55);
  }
  /* 캡션 위 실선 — 아래쪽에도 인쇄물의 단이 생긴다 */
  .shelf .cover-cap{
    padding-top:7px;
    border-top:1px solid rgba(231,227,218,.18);
    width:100%;
  }

  /* 표지 글자는 화면이 아니라 "표지 폭"을 따라야 한다.
     vw로 잡으면 넓은 화면에서 표지만 커지고 글자는 상한에 걸려 작아 보인다.
     14cqw = 표지 폭의 14% — "DIFFICULT"(9자)가 안쪽 폭에 딱 들어가는 상한. */
  .shelf-item{container-type:inline-size}
  .shelf .vol-cover h3{font-size:clamp(12px,14cqw,30px)}
  .shelf .vol-cover .vol-code{font-size:clamp(6.5px,4.6cqw,10px)}
  .shelf .cover-cap{font-size:clamp(6.5px,4.4cqw,10px)}
  .shelf .book-spine span{font-size:clamp(5.5px,3.4cqw,8px)}

  /* 앞의 선반 규칙이 padding 단축형으로 덮어써서, 책등을 피하려고 잡아둔
     padding-left(10.5% + 여백)가 사라졌다. 그래서 제목이 책등에 붙었다.
     세로 여백만 줄이고 왼쪽은 다시 책등 뒤로 물린다. */
  .shelf .vol-cover{
    padding:11px 12px;
    padding-left:calc(10.5% + 12px);
  }

  /* ============================================================
     SHELF OPEN — 표지를 누르면 책이 열리며 화면을 덮고 그 권으로 간다.
     호버는 예고(살짝 열림), 클릭은 완성(활짝 열림 + 확대 + 색 전환).
     원본을 그대로 움직이지 않고 복제본을 fixed로 띄운다 —
     .shelf가 perspective를 갖고 있어서 원본은 화면 기준으로 못 키운다.
     ============================================================ */
  .shelf .vol-cover{
    transform-origin:left center;
    transition:transform .4s cubic-bezier(.2,.7,.3,1);
    backface-visibility:hidden;
  }
  .shelf-item:hover .vol-cover{transform:rotateY(-9deg)}

  /* 클릭 후 떠오르는 복제본 */
  .book-open{
    position:fixed;z-index:60;
    pointer-events:none;
    transform-origin:center center;
    transition:transform .52s cubic-bezier(.55,0,.25,1), opacity .5s ease .18s;
    will-change:transform,opacity;
  }
  .book-open .book3d{transform:none;transition:none}
  .book-open .vol-cover{
    transition:transform .5s cubic-bezier(.55,0,.25,1);
    box-shadow:44px 34px 90px rgba(0,0,0,.7), inset 0 0 0 1px rgba(231,227,218,.08);
  }
  /* 표지 뒤의 속지 — 열렸을 때 드러난다 */
  .book-pages{
    position:absolute;inset:0;
    background:
      repeating-linear-gradient(180deg,
        rgba(231,227,218,.10) 0 1px, rgba(231,227,218,0) 1px 9px),
      linear-gradient(100deg, rgba(231,227,218,.14) 0%, rgba(231,227,218,.05) 40%, rgba(12,13,15,.2) 100%),
      #14161a;
    border:1px solid rgba(231,227,218,.12);
    z-index:0;
  }
  .book-open.go{transform:scale(var(--open-scale,4)) translateZ(0)}
  .book-open.go .vol-cover{transform:rotateY(-124deg)}
  .book-open.gone{opacity:0}

  /* 그 권의 색으로 화면을 덮는다 — 다음 페이지가 그릴 때까지의 다리 */
  .page-wipe{
    position:fixed;inset:0;z-index:55;
    background:var(--vol,#0C0D0F);
    opacity:0;transition:opacity .42s ease;
    pointer-events:none;
  }
  .page-wipe.on{opacity:1}

  @media(prefers-reduced-motion:reduce){
    .shelf-item:hover .vol-cover{transform:none}
  }

  /* ============================================================
     LEGAL — 약관·개인정보·환불. 읽는 문서라 장치를 줄인다.
     번호는 왼쪽 여백에 두고 본문은 한 단으로 흐른다.
     ============================================================ */
  .legal-hero h1{font-size:clamp(30px,6.2vw,84px)}
  .legal-hero .lede{max-width:52ch}

  .legal-part{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:0 clamp(16px,2.4vw,40px);
    align-items:start;
  }
  .legal-num{
    margin:6px 0 0;
    font-family:'Space Mono',monospace;
    font-size:11px;letter-spacing:2.4px;
    color:rgba(231,227,218,.34);
  }
  .legal-h{
    margin:0 0 18px;
    font-size:clamp(18px,1.9vw,26px);
    font-weight:600;letter-spacing:-.015em;line-height:1.25;
  }
  .legal-body{max-width:68ch}
  .legal-body p{
    margin:0 0 16px;
    font-size:15px;line-height:1.78;
    color:rgba(231,227,218,.74);
  }
  .legal-body p:last-child{margin-bottom:0}
  /* ── 본문 링크의 집 스타일 (2026-08-20 통일) ──────────────────────────
     이 규칙은 원래 .legal-body 에만 있었다. 그 밖의 본문 컨테이너 —
     FAQ, 상태 상자, 섹션 설명, 리드 — 의 링크는 아무 규칙도 못 받아
     순정 파랑(#0000EE)으로 떨어졌고, 이 배경에서 그 파랑은 대비 2.07이다.
     크림 + 헤어라인 밑선, 호버에 액센트. 밑선은 .32에서 .5로 올렸다 —
     밑선이 링크의 유일한 표식인데 .32는 표식이 아니라 얼룩이었다.
     새 본문 컨테이너를 만들면 이 목록에 넣을 것. */
  .legal-body a,
  .legal-list a,
  .legal-callout a,
  .faq-item a,
  .status a,
  .sec-desc a,
  .sec-note a,
  .sec-foot a,
  .lede a,
  .closing-lead a,
  .cform a,
  .bio a,
  .rules a,
  .plan a,
  .pair a,
  .tool-note a,
  .dispatch-lead a{
    color:var(--text);text-decoration:none;
    border-bottom:1px solid rgba(231,227,218,.5);
  }
  .legal-body a:hover,
  .legal-list a:hover,
  .legal-callout a:hover,
  .faq-item a:hover,
  .status a:hover,
  .sec-desc a:hover,
  .sec-note a:hover,
  .sec-foot a:hover,
  .lede a:hover,
  .closing-lead a:hover,
  .cform a:hover,
  .bio a:hover,
  .rules a:hover,
  .plan a:hover,
  .pair a:hover,
  .tool-note a:hover,
  .dispatch-lead a:hover{border-bottom-color:var(--accent);color:var(--accent)}

  /* 요약 상자 — 원문의 콜아웃 */
  .legal-callout{
    border-left:2px solid var(--accent);
    padding:2px 0 2px 16px;
    color:var(--text) !important;
  }
  .legal-callout + .legal-callout{
    border-left-color:rgba(231,227,218,.22);
    margin-top:-8px;
  }

  .legal-list{list-style:none;margin:0 0 18px;padding:0}
  .legal-list li{
    position:relative;padding:7px 0 7px 22px;
    font-size:15px;line-height:1.7;
    color:rgba(231,227,218,.74);
  }
  .legal-list li::before{
    content:'';position:absolute;left:0;top:18px;
    width:9px;height:1px;background:rgba(231,227,218,.4);
  }

  @media(max-width:640px){
    .legal-part{grid-template-columns:1fr;gap:6px}
    .legal-num{margin:0 0 6px}
  }

  /* .legal-part의 자식은 셋(번호·제목·본문)인데 열은 둘이다.
     그대로 두면 본문이 다음 줄 첫 칸(64px)으로 떨어져 한 줄에 한 단어씩 흐른다. */
  .legal-h,
  .legal-body{grid-column:2}
  @media(max-width:640px){
    .legal-h,
    .legal-body{grid-column:1}
  }

  /* ============================================================
     무료 툴 — /free-tools/
     ------------------------------------------------------------
     툴 자체는 워드프레스에서 옮겨 온 규칙 엔진이 돌린다. 엔진이 잡는
     손잡이(#tool-form, #r-card, #r-tags …)는 이름을 바꿀 수 없어서
     그대로 두고, 여기서 껍데기만 다시 입힌다.

     엔진이 인라인으로 덮어쓰는 것 세 가지 — 판정 색이므로 의도한 것이다:
       #r-card    border   (판정별 상태색)
       #r-verdict background
       #r-tags    --tv / --tvdim / --tvbg
     ============================================================ */
  .tool{ --ft:var(--text); margin:0 0 8px; }

  /* ── 입력 ── */
  .tool-form{
    border:1px solid var(--hair);
    background:rgba(16,17,20,.72);
    padding:clamp(22px,3vw,34px);
    display:flex;flex-direction:column;
    gap:clamp(18px,2.4vw,26px);
  }
  .tool-label{
    display:block;
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
    margin:0 0 12px;
  }
  .field{
    width:100%;
    background:var(--bg);
    border:1px solid var(--hair);
    color:var(--text);
    font-family:'Archivo',system-ui,sans-serif;
    font-size:15.5px;line-height:1.6;
    padding:14px 16px;
    border-radius:0;
    -webkit-appearance:none;appearance:none;
    transition:border-color .18s ease, background .18s ease;
  }
  .field::placeholder{color:rgba(231,227,218,.3)}
  .field:focus{outline:none;border-color:var(--ft);background:var(--bg-deep)}
  textarea.field{min-height:132px;resize:vertical;display:block}
  /* 날짜·셀렉트는 브라우저 기본 위젯이 밝은 색으로 그려진다 */
  select.field{background-image:none}
  select.field option{background:var(--bg);color:var(--text)}
  input[type=date].field::-webkit-calendar-picker-indicator{
    filter:invert(1);opacity:.5;cursor:pointer;
  }
  .tool-grid2,
  .tool-grid3{display:grid;gap:clamp(16px,2vw,22px)}
  @media(min-width:760px){
    .tool-grid3{grid-template-columns:repeat(3,1fr)}
    .tool-grid2{grid-template-columns:repeat(2,1fr)}
  }
  /* 실행 버튼 — 툴 색으로 채운다. 페이지에서 유일하게 색이 찬 요소다. */
  .btn-ft{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    width:100%;
    font-family:'Space Mono',monospace;
    font-size:13px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
    padding:17px 26px;
    border:1px solid var(--ft);
    background:var(--ft);
    color:var(--accent-ink);
    text-decoration:none;
    border-radius:0;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.2,.7,.3,1);
  }
  .btn-ft:hover{background:transparent;color:var(--ft);transform:translateY(-2px)}
  .btn-ft:active{transform:translateY(0)}
  .btn-ft[disabled]{opacity:.5;cursor:default;transform:none}
  @media(prefers-reduced-motion:reduce){ .btn-ft:hover{transform:none} }

  /* ── 결과 ── */
  .tool-result{
    display:none;              /* 엔진이 flex 로 연다 */
    flex-direction:column;
    gap:clamp(14px,1.8vw,20px);
    margin-top:clamp(14px,1.8vw,20px);
  }
  .tool-card{
    border:1px solid var(--hair);
    background:rgba(16,17,20,.72);
    padding:clamp(24px,3vw,34px);
  }
  .tool-verdict-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
  #r-verdict{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:2.2px;text-transform:uppercase;font-weight:700;
    color:var(--accent-ink);
    background:var(--ft);
    padding:6px 13px;
  }
  #r-confidence{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
  }
  #r-headline{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
    font-size:clamp(21px,2.6vw,30px);line-height:1.12;
    margin:0 0 14px;
  }
  #r-explain{
    font-size:16px;line-height:1.68;
    color:rgba(231,227,218,.78);
    max-width:62ch;margin:0;
  }
  #r-tags{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
  /* 엔진이 넣는 태그의 인라인 스타일은 색만 쓴다 — 모서리는 사이트 규칙을 따른다 */
  #r-tags span{
    border-radius:0 !important;
    font-family:'Space Mono',monospace;
    letter-spacing:1.8px !important;text-transform:uppercase;
    padding:5px 12px !important;
  }
  /* 숫자 비교 (요율·수익성) */
  .rcompare{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:clamp(14px,2.4vw,30px);
    border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
    padding:clamp(20px,2.6vw,28px) 0;
    margin:0 0 24px;
  }
  .rcompare-label{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
    margin:0 0 10px;
  }
  .rcompare-n{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;font-size:clamp(28px,4.6vw,46px);line-height:1;
    letter-spacing:-.02em;
  }
  /* .unit 은 권 페이지의 '상황' 블록이 이미 쓰고 있다 (좌측 2px 규칙선).
     같은 이름을 쓰면 숫자 옆에 세로줄이 딸려 온다 — 이름을 따로 둔다. */
  .rcompare-unit{font-size:.42em;letter-spacing:1px;opacity:.5;margin-left:4px}
  #r-arrow{font-family:'Space Mono',monospace;font-size:20px;color:rgba(231,227,218,.42)}
  @media(max-width:560px){
    .rcompare{grid-template-columns:1fr;gap:16px;text-align:left}
    #r-arrow{transform:rotate(90deg);width:20px}
  }

  /* ── 다음 수: 권으로 넘기는 자리 ── */
  .tool-xs{
    border:1px solid var(--ft);
    background:linear-gradient(160deg,
      color-mix(in srgb, var(--ft) 9%, transparent),
      rgba(231,227,218,.02));
    padding:clamp(24px,3vw,32px);
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  }
  .tool-xs-label{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
    color:var(--ft);margin:0 0 12px;
  }
  #r-xs-headline,
  #r-xs-lead{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;text-transform:uppercase;
    font-size:clamp(16px,1.9vw,21px);line-height:1.18;letter-spacing:-.01em;
    margin:0 0 10px;
  }
  #r-xs-desc,
  .tool-xs p{font-size:14.5px;line-height:1.62;color:rgba(231,227,218,.7);margin:0;max-width:52ch}
  .tool-xs-buy{
    display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0;
  }
  .tool-xs-price{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;font-size:clamp(26px,3.4vw,34px);line-height:1;letter-spacing:-.02em;
  }
  .tool-xs-buy .btn-ft{width:auto;padding:13px 22px;font-size:11.5px}
  /* 좁은 화면에서는 값과 버튼을 한 줄로 — 오른쪽에 세로로 몰아두면
     왼쪽 문단과 정렬이 어긋나 떠 보인다 */
  @media(max-width:560px){
    .tool-xs-buy{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  }
  /* 수익성 계산기 — 지렛대가 둘이라 카드도 둘 */
  .tool-xs-dual{display:block}
  .tool-xs-grid{
    display:grid;gap:clamp(16px,2vw,22px);margin-top:22px;
  }
  @media(min-width:720px){ .tool-xs-grid{grid-template-columns:1fr 1fr} }
  .tool-lever{
    border:1px solid var(--hair);
    background:rgba(12,13,15,.5);
    padding:clamp(20px,2.4vw,26px);
    display:flex;flex-direction:column;gap:10px;
  }
  .tool-lever-k{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
    color:var(--ft);margin:0;
  }
  .tool-lever-name{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:-.01em;margin:0;
  }
  .tool-lever p{font-size:14px;line-height:1.6;color:rgba(231,227,218,.7);margin:0;flex:1}
  .tool-lever-foot{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:6px;
  }
  .tool-lever-foot .tool-xs-price{font-size:24px}
  .tool-lever-foot .btn-ft{width:auto;padding:11px 18px;font-size:11px}

  /* ── 리드킷 캡처 ── */
  .tool-cap{
    border:1px solid var(--hair);
    background:rgba(16,17,20,.72);
    padding:clamp(22px,2.6vw,30px);
  }
  .tool-cap-row{
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(20px,3vw,36px);flex-wrap:wrap;
  }
  .tool-cap-h{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;text-transform:uppercase;font-size:16px;letter-spacing:-.01em;
    margin:0 0 8px;
  }
  .tool-cap-row p{font-size:14px;line-height:1.6;color:rgba(231,227,218,.7);margin:0;max-width:46ch}
  /* min-width는 화면 폭으로 묶는다 — 고정 280px를 두면 좁은 기기에서
     칸이 컨테이너 밖으로 나가 페이지가 가로로 밀린다 */
  .tool-cap-fields{display:flex;gap:10px;flex:1;min-width:min(280px,100%);max-width:440px}
  .tool-cap-fields .field{flex:1}
  .tool-cap-fields .btn-ft{width:auto;padding:0 22px;font-size:11.5px;white-space:nowrap}
  @media(max-width:560px){
    .tool-cap-fields{flex-wrap:wrap}
    .tool-cap-fields .btn-ft{width:100%;padding:15px 22px}
  }
  #email-note{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.36);
    margin-top:16px;
  }

  /* ── 체크리스트 (FT-004) ── */
  .chklist{display:grid;gap:2px}
  @media(min-width:800px){ .chklist{grid-template-columns:1fr 1fr;gap:2px 26px} }
  .chk{
    display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
    padding:13px 2px;
    border-bottom:1px solid var(--hair-soft);
    cursor:pointer;
  }
  .chk input{position:absolute;opacity:0;width:0;height:0}
  .chk .box{
    width:20px;height:20px;margin-top:2px;
    border:1px solid var(--hair);
    background:var(--bg);
    position:relative;
    transition:border-color .15s ease,background .15s ease;
  }
  .chk:hover .box{border-color:var(--ft)}
  .chk input:focus-visible + .box{outline:2px solid var(--ft);outline-offset:2px}
  .chk input:checked + .box{background:var(--ft);border-color:var(--ft)}
  .chk input:checked + .box::after{
    content:'';position:absolute;left:6px;top:2px;
    width:5px;height:10px;
    /* 체크 표시는 두 변만 그린다. border 단축표기 안에 var()를 쓰면 뒤따르는
       border-width가 무시되고 네 변이 다 그려져 사각형이 된다 — 각 변을 따로. */
    border-right:2px solid var(--accent-ink);
    border-bottom:2px solid var(--accent-ink);
    transform:rotate(45deg);
  }
  .chk .txt{font-size:15px;line-height:1.45}
  .chk .sub{
    display:block;margin-top:5px;
    font-size:13px;line-height:1.5;
    color:rgba(231,227,218,.48);
  }

  /* ── 어떻게 판단하는가 (3단계) ── */
  .tsteps{display:grid;gap:0;border-top:1px solid var(--hair)}
  .tstep{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:0 clamp(20px,3vw,44px);
    padding:clamp(24px,3vw,34px) 0;
    border-bottom:1px solid var(--hair);
  }
  .tstep-n{
    font-family:'Space Mono',monospace;
    font-size:11px;letter-spacing:1.6px;
    color:var(--ft);
    margin:6px 0 0;
  }
  .tstep h3{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;text-transform:uppercase;
    font-size:clamp(17px,2.1vw,23px);line-height:1.12;letter-spacing:-.01em;
    margin:0 0 12px;
  }
  .tstep p{font-size:16px;line-height:1.68;color:rgba(231,227,218,.74);margin:0;max-width:60ch}
  @media(max-width:640px){
    .tstep{grid-template-columns:1fr;gap:10px}
    .tstep-n{margin:0}
  }

  /* ── 다른 툴 / 허브 목록 ── */
  .tgrid{display:grid;gap:0;border-top:1px solid var(--hair)}
  .trow{
    display:grid;
    grid-template-columns:74px minmax(0,1.05fr) minmax(0,1.35fr) auto;
    align-items:center;
    gap:0 clamp(16px,2.4vw,34px);
    padding:clamp(20px,2.4vw,26px) 0;
    border-bottom:1px solid var(--hair);
    text-decoration:none;color:inherit;
    transition:background .18s ease,padding-left .18s ease;
  }
  .trow:hover{background:rgba(231,227,218,.03);padding-left:10px}
  .trow-n{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:1.8px;color:var(--ft);
  }
  .trow-name{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;text-transform:uppercase;
    font-size:clamp(16px,2vw,21px);letter-spacing:-.01em;line-height:1.1;
  }
  .trow-note{font-size:15px;line-height:1.5;color:rgba(231,227,218,.62)}
  .trow-go{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
    transition:color .18s ease,transform .18s ease;
  }
  .trow:hover .trow-go{color:var(--ft);transform:translateX(3px)}
  @media(max-width:820px){
    .trow{grid-template-columns:56px 1fr auto;gap:4px clamp(14px,3vw,22px)}
    .trow-note{grid-column:2 / -1;margin-top:6px}
  }

  /* ============================================================
     AI 툴 — /ai-tools/
     ------------------------------------------------------------
     아직 열지 않은 제품이다. 화면 그림은 전부 목업이므로 그렇게
     적어 두고(.demo-cap), 상태 띠(.status)를 페이지마다 세운다.
     데모 자체는 홈에서 쓰는 .demo / .respond-demo / .read-demo /
     .track-demo 를 그대로 쓴다.
     ============================================================ */
  .status{
    border:1px solid var(--hair);
    background:rgba(16,17,20,.72);
    padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px);
    display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);flex-wrap:wrap;
    margin:0 0 clamp(26px,3vw,38px);
  }
  .status-k{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
    color:var(--accent);flex-shrink:0;
  }
  .status p{margin:0;font-size:14.5px;line-height:1.62;color:rgba(231,227,218,.72);max-width:74ch}
  .demo-cap{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(231,227,218,.34);
    margin:14px 0 0;
  }

  /* 셀 안의 값 — .gcell .price s 는 '옛 가격(취소선)'용이라 여기 쓸 수 없다.
     할인가에 취소선을 그으면 정반대로 읽힌다. */
  .gcell .per{font-size:11px;opacity:.5}
  /* 값은 셀 바닥에 붙인다 — 설명 길이가 달라도 가격 줄이 한 선에 선다 */
  .gcell .price,
  .gcell .free{margin-top:auto;padding-top:18px}
  .gcell .half{
    font-family:'Space Mono',monospace;margin-top:8px;
    font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
  }

  /* 앱 페이지의 "나머지 둘" 목록 — .trow 는 무료 툴에서 온 컴포넌트라
     툴 색(--ft)을 전제한다. 앱에는 색이 없으므로 여기서 정해 준다:
     코드(S-002)는 물러나고, 호버할 때만 크림으로 살아난다. */
  #others .tgrid{ --ft:var(--text); }
  #others .trow-n{ color:rgba(231,227,218,.38); }

  /* 두 패널 비교 — "이 문장이 하는 말 / 뜻하는 것" */
  .pair{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:var(--hair);border:1px solid var(--hair);
    margin-top:clamp(22px,2.6vw,32px);
  }
  .pair > div{background:var(--bg);padding:clamp(22px,2.6vw,32px)}
  .pair-k{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
    color:rgba(231,227,218,.42);margin:0 0 14px;
  }
  .pair-body{font-size:15.5px;line-height:1.68;color:rgba(231,227,218,.8);margin:0}
  .pair-body.quote{color:rgba(231,227,218,.6);font-style:italic}
  .pair .good{color:var(--text)}
  @media(max-width:760px){ .pair{grid-template-columns:1fr} }

  /* 6주 타임라인 (Track) */
  .tline{border-top:1px solid var(--hair);margin-top:clamp(22px,2.6vw,32px)}
  .tline-row{
    display:grid;grid-template-columns:74px 1fr auto;
    gap:10px clamp(16px,2.4vw,30px);align-items:baseline;
    padding:18px 0;border-bottom:1px solid var(--hair);
  }
  .tline-w{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
  }
  .tline-e{font-size:15px;line-height:1.55;color:rgba(231,227,218,.8)}
  .tline-s{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(231,227,218,.5);text-align:right;
  }
  .tline-read{
    margin:22px 0 0;font-size:15px;line-height:1.66;
    color:rgba(231,227,218,.72);
    border-left:2px solid var(--accent);padding-left:22px;max-width:70ch;
  }
  /* 좁은 화면 — 주차와 판정을 한 줄에 두고 사건은 그 아래로.
     배치를 명시하지 않으면 셋이 각자 한 줄씩 차지해 세 줄이 된다. */
  @media(max-width:640px){
    .tline-row{grid-template-columns:1fr auto;gap:6px 16px}
    .tline-w{grid-column:1;grid-row:1}
    .tline-s{grid-column:2;grid-row:1}
    .tline-e{grid-column:1 / -1;grid-row:2}
  }

  /* 값 — 아직 못 파는 물건이므로 버튼이 아니라 표로 둔다 */
  .plan{
    border:1px solid var(--hair);background:rgba(16,17,20,.72);
    padding:clamp(24px,3vw,34px);
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:clamp(22px,2.6vw,30px);
  }
  .plan-k{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
    color:rgba(231,227,218,.42);margin:0 0 10px;
  }
  .plan-h{
    font-family:'Archivo',system-ui,sans-serif;font-weight:900;
    text-transform:uppercase;font-size:clamp(17px,2vw,22px);
    letter-spacing:-.01em;line-height:1.14;margin:0 0 10px;
  }
  .plan p{margin:0;font-size:14.5px;line-height:1.62;color:rgba(231,227,218,.7);max-width:54ch}
  .plan-n{
    display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;
  }
  .plan-full{
    font-family:'Archivo',system-ui,sans-serif;font-weight:900;
    font-size:clamp(26px,3.4vw,34px);line-height:1;letter-spacing:-.02em;
  }
  .plan-half{
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.8px;
    text-transform:uppercase;color:rgba(231,227,218,.5);
  }
  @media(max-width:560px){
    .plan-n{align-items:flex-start;width:100%}
  }

  /* ============================================================
     연락 / 소개 — /contact/, /about/
     ------------------------------------------------------------
     연락 폼은 서버가 없다. 고른 주제로 제목을 만들고 메일 앱을 여는
     mailto 조립기다 — 워드프레스에서 그대로 옮겨 온 스크립트가
     #cb-contact 안의 id 로 동작하므로 이름은 건드리지 않는다.
     ============================================================ */
  .addr{
    display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
    border:1px solid var(--hair);background:rgba(16,17,20,.72);
    padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px);
    margin:0 0 clamp(24px,3vw,34px);
  }
  .addr a{
    font-family:'Archivo',system-ui,sans-serif;font-weight:900;
    font-size:clamp(17px,2.4vw,26px);letter-spacing:-.02em;
    color:var(--text);text-decoration:none;word-break:break-all;
  }
  .addr a:hover{text-decoration:underline;text-underline-offset:4px}
  .addr button{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
    background:transparent;border:1px solid var(--hair);color:rgba(231,227,218,.6);
    padding:9px 14px;cursor:pointer;flex-shrink:0;
    transition:border-color .18s ease,color .18s ease;
  }
  .addr button:hover{border-color:var(--text);color:var(--text)}

  .cform{
    border:1px solid var(--hair);background:rgba(16,17,20,.72);
    padding:clamp(22px,3vw,34px);
    display:flex;flex-direction:column;gap:clamp(18px,2.2vw,24px);
  }
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .topic-chip{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
    background:transparent;border:1px solid var(--hair);color:rgba(231,227,218,.58);
    padding:10px 15px;cursor:pointer;
    transition:background .16s ease,color .16s ease,border-color .16s ease;
  }
  .topic-chip:hover{border-color:rgba(231,227,218,.42);color:var(--text)}
  .topic-chip.active{background:var(--text);border-color:var(--text);color:var(--bg)}
  .cform-note{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.36);margin:0;
  }
  /* 길이 경고 — mailto URL 한계에 걸렸을 때만 뜬다 */
  .cform-warn{
    display:none;
    border-left:2px solid #f0a848;padding:2px 0 2px 16px;margin:0;
    font-size:13.5px;line-height:1.6;color:rgba(231,227,218,.78);
  }
  .cform-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .cform-act .btn{flex-shrink:0}
  #cb-order-field{display:none}

  /* 소개 — 규칙 세 가지 */
  .rules{border-top:1px solid var(--hair)}
  .rule{
    display:grid;grid-template-columns:64px 1fr;
    gap:0 clamp(20px,3vw,44px);
    padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--hair);
  }
  .rule-n{
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.6px;
    color:rgba(231,227,218,.4);margin:6px 0 0;
  }
  .rule h3{
    font-family:'Archivo',system-ui,sans-serif;font-weight:900;text-transform:uppercase;
    font-size:clamp(17px,2.1vw,23px);line-height:1.12;letter-spacing:-.01em;margin:0 0 12px;
  }
  .rule p{font-size:16px;line-height:1.68;color:rgba(231,227,218,.74);margin:0;max-width:62ch}
  @media(max-width:640px){
    .rule{grid-template-columns:1fr;gap:10px}
    .rule-n{margin:0}
  }

  /* 소개 — 만든 사람 */
  .bio{
    border:1px solid var(--hair);background:rgba(16,17,20,.72);
    padding:clamp(24px,3vw,40px);
    max-width:76ch;
  }
  .bio p{font-size:16.5px;line-height:1.72;color:rgba(231,227,218,.8);margin:0 0 18px}
  .bio p:last-child{margin:0}

  /* ── 툴 결과물: 사다리 + 채워진 이메일 (FT-006 부터) ──
     판정 카드 아래에 붙는 실전 산출물. 진단이 아니라 이걸 주는 것이
     "이게 무료야?" 의 실체다. */
  .tool-part{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
    color:var(--ft);margin:0 0 16px;
  }
  .lad-row{
    display:grid;grid-template-columns:86px 1fr auto;
    gap:8px clamp(14px,2vw,24px);align-items:baseline;
    padding:12px 0;border-bottom:1px solid var(--hair-soft);
  }
  .lad-row:last-of-type{border-bottom:0}
  .lad-when{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
    color:rgba(231,227,218,.42);
  }
  .lad-what{font-size:15px;line-height:1.5}
  .lad-row.is-done{opacity:.34}
  .lad-row.is-now .lad-when{color:var(--ft);font-weight:700}
  .lad-badge{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:1.8px;font-weight:700;
    color:var(--accent-ink);background:var(--ft);
    padding:4px 10px;
  }
  .lad-note{
    margin:16px 0 0;font-size:14px;line-height:1.6;
    color:rgba(231,227,218,.62);
  }
  .tool-draft{
    border:1px solid var(--hair);
    background:rgba(16,17,20,.72);
    padding:clamp(20px,2.6vw,28px);
    margin-top:14px;
  }
  .tool-draft.is-now{border-color:var(--ft)}
  #r-drafts .tool-part{margin:22px 0 4px}
  .tool-draft-sub{
    display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
    margin:0 0 14px;font-size:15.5px;font-weight:600;
  }
  .tool-draft-sub span{
    font-family:'Space Mono',monospace;
    font-size:9px;letter-spacing:2.2px;
    color:rgba(231,227,218,.38);
  }
  .tool-draft-body{
    font-size:15px;line-height:1.7;color:rgba(231,227,218,.8);
    white-space:pre-wrap;
    border-top:1px solid var(--hair-soft);padding-top:14px;
  }
  .tool-draft-foot{
    display:flex;align-items:center;justify-content:space-between;
    gap:14px;margin-top:16px;
  }
  .tool-draft-now{
    font-family:'Space Mono',monospace;
    font-size:9.5px;letter-spacing:2px;font-weight:700;color:var(--ft);
  }
  .tool-draft-copy{
    font-family:'Space Mono',monospace;
    font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
    background:transparent;border:1px solid var(--hair);color:rgba(231,227,218,.65);
    padding:9px 16px;cursor:pointer;
    transition:border-color .16s ease,color .16s ease;
  }
  .tool-draft-copy:hover{border-color:var(--ft);color:var(--ft)}
  @media(max-width:560px){
    .lad-row{grid-template-columns:72px 1fr}
    .lad-badge{grid-column:2;justify-self:start}
  }

  /* 숫자 산출 행 (FT-003 · FT-005) — 라벨과 큰 숫자 */
  .stat-row{
    display:grid;grid-template-columns:1fr auto;
    gap:8px clamp(16px,2.4vw,32px);align-items:baseline;
    padding:14px 0;border-bottom:1px solid var(--hair-soft);
  }
  .stat-row:last-of-type{border-bottom:0}
  .stat-k{font-size:14.5px;line-height:1.5;color:rgba(231,227,218,.66)}
  .stat-v{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:900;font-size:clamp(20px,2.6vw,28px);
    letter-spacing:-.02em;white-space:nowrap;
  }
  @media(max-width:480px){
    .stat-row{grid-template-columns:1fr}
    .stat-v{font-size:22px}
  }

  /* ── 모바일 활자 하한 (2026-08-20 디자인 점검) ─────────────────────────
     375px 측정에서 본문 외 텍스트의 3분의 2가 11px 이하였다 — 라벨·칩·
     메타가 전부 8~11px. 데스크톱의 와이드 트래킹 라벨은 의도지만, 타깃
     독자(시니어 프리랜서)의 폰에서 그 크기는 의도가 아니라 장벽이다.
     데스크톱은 그대로 두고 좁은 화면에서만 바닥을 올린다. 파일 끝이라
     동일 특이도의 앞선 선언을 캐스케이드로 이긴다 — 이 블록보다 뒤에
     활자 규칙을 추가하지 말 것. 새 라벨 클래스는 여기 하한에도 넣을 것. */
  @media (max-width:560px){
    .book-spine span,
    .cell .n,
    .chart-foot,
    .choice-tag,
    .choice-tradeoff dt,
    .cover-cap,
    .demo__label,
    .dispatch-price em,
    .draft-subject span,
    .foot-bottom,
    .foot-col h4,
    .foot-meta,
    .gcell .free,
    .gcell .n,
    .lad-badge,
    .lmedia-cap,
    .mega-foot,
    .mega-label,
    .mnav-foot,
    .mnav-label,
    .navmeta,
    .plate-cap,
    .read-demo__title,
    .respond-demo__copy,
    .respond-demo__divider,
    .respond-demo__label,
    .script .tag,
    .setup-area,
    .setup-when,
    .shelf .cover-cap,
    .shelf .vol-cover .vol-code,
    .shots-tabs .n,
    .strip-label,
    .system-price em,
    .tool-draft-sub span,
    .track-demo__title,
    .unit-label,
    .unit-risk span,
    .vol-buy .go,
    .vol-code,
    .vol-cta .after,
    .vol-eg-label,
    .vol-meta,
    .vol-split span,
    /* CTA도 남긴다. 가격을 떼어 폭만 줄인다 — 링크가 사라지는 것보다 낫다. */ .nav-cta,
    /* 푸터 링크는 위의 리셋에 딸려가지 않게 다시 모노로 */ .nav .mega-foot a{font-size:11px}
    .chart-label,
    .chart-pct,
    .compare-row,
    .gcell .price s,
    .legal-num,
    .mark,
    .plan-half,
    .reply-label::before,
    .rule-n,
    .shots-tabs .t,
    .system-price s,
    .tool-cap-fields .btn-ft,
    .tool-lever-foot .btn-ft,
    .tool-xs-buy .btn-ft,
    .tstep-n,
    /* 셀 안의 값 — .gcell .price s 는 '옛 가격(취소선)'용이라 여기 쓸 수 없다. 할인가에 취소선을 그으면 정반대로 읽힌다. */ .gcell .per,
    /* 키보드 사용자용 본문 바로가기 — 포커스 전에는 화면 밖에 둔다 */ .skip{font-size:12px}
    #email-note,
    #r-confidence,
    #r-verdict,
    .addr button,
    .cform-note,
    .chart-label span,
    .compare-buy em,
    .demo-cap,
    .dispatch-meta,
    .eyebrow,
    .foot-col a span,
    .gcell .half,
    .lad-when,
    .ladder-n,
    .ladder-vol,
    .ledger-count,
    .lmeta,
    .lnum,
    .map-count,
    .mega-count,
    .mega-n,
    .mega-price,
    .mnav-count,
    .mnav-n,
    .mnav-price,
    .nav a,
    .nav-cta,
    .pair-k,
    .plan-k,
    .plate-eyebrow,
    .price-note,
    .rcompare-label,
    .reply-label,
    .shelf-cap,
    .spec-row,
    .status-k,
    .system-row .k,
    .tline-s,
    .tline-w,
    .tool-draft-copy,
    .tool-draft-now,
    .tool-label,
    .tool-lever-k,
    .tool-xs-label,
    .topic-chip,
    .track-demo__state,
    .track-demo__summary,
    .trow-go,
    .trow-n,
    .up-k,
    .vol-kicker,
    /* ── 툴 결과물: 사다리 + 채워진 이메일 (FT-006 부터) ── 판정 카드 아래에 붙는 실전 산출물. 진단이 아니라 이걸 주는 것이 "이게 무료야?" 의 실체다. */ .tool-part,
    /* 히어로 사양 줄 — 제품이 무엇인지(파일 하나)를 사양으로 못 박는다 */ .hero-meta{font-size:11.5px}
  }

  /* ── 샘플 게이트 (2026-08-20) ─────────────────────────────────────────
     권 페이지의 "Try the sample" 을 이메일 입력 + 다운로드로 바꾼 인라인 폼.
     히어로 CTA 바로 아래에 열리므로 버튼과 같은 각진 언어를 쓴다. */
  .sgate{
    margin:14px 0 0;padding:16px;
    border:1px solid var(--accent-line);background:var(--accent-wash);
    max-width:420px;
  }
  .sgate-l{
    display:block;margin:0 0 8px;
    font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.6px;
    text-transform:uppercase;color:rgba(231,227,218,.62);
  }
  .sgate-row{display:flex;gap:8px;flex-wrap:wrap}
  .sgate-i{
    flex:1 1 200px;min-width:0;
    padding:11px 12px;font-size:14px;font-family:inherit;
    color:var(--text);background:var(--bg-raise);
    border:1px solid var(--accent-line);border-radius:0;outline:none;
  }
  .sgate-i:focus{border-color:var(--text)}
  .sgate-b{
    padding:11px 18px;min-height:44px;
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.4px;
    text-transform:uppercase;cursor:pointer;
    color:var(--accent-ink);background:var(--text);
    border:1px solid var(--text);border-radius:0;
  }
  .sgate-b:hover{background:transparent;color:var(--text)}
  .sgate-b:disabled{opacity:.6;cursor:default}
  .sgate-n{
    margin:10px 0 0;font-size:12.5px;line-height:1.5;
    color:rgba(231,227,218,.55);
  }
  .sgate-n a{color:var(--text);border-bottom:1px solid var(--accent-line)}