/* ─────────────────────────────────────────────────────────────
   Kinety 덱 — 슬라이드별 스타일
   토큰과 모티프(잔상·관통선)는 ../tokens.css. 여기는 장별 배치만.
   ───────────────────────────────────────────────────────────── */

/* 장마다 광원 위치가 다르다 — 빛이 덱을 가로질러 이동한다 */
.s01 { --glow:
  radial-gradient(760px 420px at 88% 62%, rgba(110,123,240,.20), transparent 66%),
  radial-gradient(520px 360px at 8% 10%,  rgba(110,123,240,.075), transparent 70%); }
.s02 { --glow: radial-gradient(900px 420px at 76% 104%, rgba(110,123,240,.19), transparent 68%); }
.s03 { --glow: radial-gradient(820px 400px at 18% 96%,  rgba(110,123,240,.16), transparent 70%); }
.s04 { --glow: radial-gradient(900px 380px at 50% -6%,  rgba(110,123,240,.13), transparent 70%); }
.s05 { --glow: radial-gradient(760px 420px at 92% 50%,  rgba(110,123,240,.20), transparent 66%); }
.s06 { --glow: radial-gradient(820px 400px at 84% 88%,  rgba(110,123,240,.17), transparent 68%); }
.s07 { --glow: radial-gradient(700px 380px at 70% 20%,  rgba(110,123,240,.15), transparent 70%); }
.s08 { --glow: radial-gradient(880px 420px at 22% 12%,  rgba(110,123,240,.14), transparent 70%); }

/* ── 공통 ── */
.h2  { font-size: var(--fs-h-cover); }
.head-block { margin-top: 44px; }
/* 서브카피 — 코멘트 반영: 밝기·크기 상향 (안 보인다는 지적, 전 장 공통) */
.sub { margin-top: 14px; font-size: 15px; font-weight: var(--w-regular);
       letter-spacing: -.005em; color: var(--tx-3); }


/* 연락처 — 코멘트 반영: 어필 대상이라 크기·밝기 상향 (커버·CTA 공통) */
.foot { font-size: 15px; font-weight: var(--w-regular); color: var(--tx-3); letter-spacing: -.005em; }
.foot b { font-weight: var(--w-regular); color: var(--tx-4); padding: 0 5px; }
/* 연락처는 클릭커블 유지하되 밑줄은 제거 — 눌림은 hover 색으로만 (코멘트 2026-07-20) */
.foot a { color: var(--tx-2); text-decoration: none; }
.foot a:hover { color: var(--tx); }


/* ═══════════ 01 커버 ═══════════ */
.cover-body { flex: 1; display: flex; flex-direction: column; justify-content: center;
              padding-bottom: 48px; position: relative; }
.lede   { margin-top: 22px; font-size: var(--fs-lede); font-weight: var(--w-medium);
          letter-spacing: -.022em; color: var(--tx-lede); position: relative; z-index: 1; }
.cover-body .wordmark { position: relative; z-index: 1; }
.contact { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; }

/* ═══════════ 02 지도 ═══════════ */
/* 레일 — 단계가 진행될수록 선이 밝아지고 마디가 커진다.
   '움직임'을 화살표로 그리지 않고 빛의 세기 구배로 말한다 */
/* flex:none 필수 — .layer가 flex column이라 1px 선이 shrink 대상이 되면
   콘텐츠가 조금만 넘쳐도 높이 0으로 찌그러져 선이 통째로 사라진다. */
.rail { position: relative; flex: none; height: 1px; margin-top: 44px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 0%, rgba(110,123,240,.30) 33%,
    rgba(110,123,240,.55) 66%, rgba(160,170,255,.95) 100%); }
.node { position: absolute; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; }
.n1 { left: calc(84px + (100% - 84px) * .1667); width: 5px; height: 5px; background: #2A2E3C;
      box-shadow: 0 0 0 1px rgba(255,255,255,.10); }
.n2 { left: calc(84px + (100% - 84px) * .5);    width: 6px; height: 6px; background: #4B54A8;
      box-shadow: 0 0 0 1px rgba(110,123,240,.35), 0 0 8px 1px rgba(110,123,240,.35); }
.n3 { left: calc(84px + (100% - 84px) * .8333); width: 7.5px; height: 7.5px; background: #EEF0FF;
      box-shadow: var(--glow-node); }

.grid3 { display: grid; grid-template-columns: 104px repeat(3, 1fr); }
.grid3 > * { border-bottom: 1px solid var(--line-faint); }
.grid3 .rowlab { display: flex; align-items: flex-start; padding: 20px 0 0;
  font-size: var(--fs-tag); font-weight: var(--w-semibold); letter-spacing: .055em; color: var(--tx-5); }
.grid3 .cell { padding: 20px 26px 22px; border-left: 1px solid var(--line-faint); }
.grid3 .r-what { min-height: 84px; }
.grid3 .r-how  { min-height: 68px; }
.step { padding: 22px 26px 18px; border-left: 1px solid var(--line-faint); }
.step h3 { font-size: var(--fs-step); font-weight: var(--w-semibold); letter-spacing: -.025em; color: var(--tx); }
/* 단계 헤더: 표면이 단계마다 아주 조금씩 더 밝아진다 = 빛이 도착하는 중 */
.c1 { background: rgba(255,255,255,.010); }
.c2 { background: rgba(255,255,255,.020); }
.c3 { background: rgba(255,255,255,.032); }
.what { font-size: var(--fs-body); font-weight: var(--w-regular); line-height: 1.62;
        letter-spacing: -.012em; color: var(--tx-2); }
.how  { font-size: var(--fs-meta); font-weight: var(--w-regular); line-height: 1.6;
        letter-spacing: -.008em; color: var(--tx-3); }

/* ═══════════ 03 선별 기준 ═══════════ */


.ab { margin-top: 34px; border: 1px solid var(--line); border-radius: var(--r-table); overflow: hidden;
      background: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.006)); }
.ab table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ab thead th { background: rgba(255,255,255,.022); border-bottom: 1px solid var(--line);
         padding: 11px 18px; text-align: left;
         font-size: var(--fs-th); font-weight: var(--w-semibold); letter-spacing: .055em; color: var(--tx-4); }
.ab td { padding: 16px 18px; border-bottom: 1px solid var(--line-faint); vertical-align: middle;
         font-size: var(--fs-data); font-weight: var(--w-medium); color: var(--tx-2); letter-spacing: -.01em; }
.ab tr:last-child td { border-bottom: none; }
/* 행 레이블은 접근성상 th(scope=row)지만 표 헤더 띠가 아니다 — 데이터 셀과 같은 규격으로 둔다 */
.ab tbody th { padding: 16px 18px; border-bottom: 1px solid var(--line-faint); vertical-align: middle;
               text-align: left; }
.ab tr:last-child th { border-bottom: none; }
.ab .lab { font-size: 13px; font-weight: var(--w-regular); color: var(--tx-3); }


/* 반복되던 인라인 규칙을 클래스로. 각주는 장 하단에 붙고, 표 마지막 행은 밑줄이 없다. */
.fine.push { margin-top: auto; }
.grid3 .last { border-bottom: none; }
.grid3 .rowlab.pad0 { padding: 0; }

.fine { margin-top: 16px; font-size: var(--fs-cell); font-weight: var(--w-regular);
        letter-spacing: -.005em; color: var(--tx-3); line-height: 1.7; }
.fine em { font-style: normal; color: var(--tx-5); }
/* 각주 구분자 — 가로 나열이 안 읽힌다는 QA. 점 대신 막대 + 넓은 간격 (2026-07-21) */
.fine .bar { display: inline-block; width: 1px; height: 10px; margin: 0 14px;
             background: var(--line); vertical-align: -1px; }


/* 06 — 2열 세로 비교. 양쪽 카드는 같은 높이, 오른쪽 확인 3개는 빈 행 없이 붙인다. */
.ops-compare { margin-top: auto; margin-bottom: auto; width: 100%; display: grid;
  grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); align-items: stretch; }
.ops-lane { min-width: 0; }
.ops-lane-hd { display: flex; align-items: center; margin-bottom: 11px; }
.ops-lane-hd b { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.02);
  font-size: 12px; font-weight: var(--w-medium); letter-spacing: -.005em; color: var(--tx-3); }
.ops-lane-hd b::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--tx-4); }
.ops-track { height: 374px; display: grid; grid-template-rows: repeat(7, 1fr); gap: 6px; }
.confirm-track { height: auto; grid-template-rows: repeat(3, 46px); }
.ops-track div { min-width: 0; min-height: 0; padding: 0 14px; border: 1px solid var(--line-faint);
  border-radius: 8px; display: flex; align-items: center; gap: 13px; }
.ops-track i { font-style: normal; font-size: 9px; font-weight: var(--w-semibold); letter-spacing: .05em; color: var(--tx-5); }
.ops-track span { font-size: 13px; font-weight: var(--w-medium); line-height: 1.35;
  letter-spacing: -.008em; color: var(--tx-3); word-break: keep-all; }
.direct-track div { background: rgba(255,255,255,.014); }
.confirm-track div { padding: 0 20px; border-color: rgba(110,123,240,.4); background: rgba(110,123,240,.09); }
.confirm-track i { font-size: 10px; color: var(--light); }
.confirm-track span { font-size: 14px; font-weight: var(--w-semibold); color: var(--tx); }
.ops-divider { padding-top: 35px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ops-divider i { flex: 1; width: 1px; background: var(--line-faint); }
.ops-divider i:first-child { flex: 0 0 48px; }
.ops-divider span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(110,123,240,.62); background: rgba(110,123,240,.16);
  font-size: 11px; font-weight: var(--w-semibold); letter-spacing: .06em; color: var(--light-bright); }
.ops-note { margin-top: 9px; text-align: left; font-size: 12px; font-weight: var(--w-regular);
  letter-spacing: -.008em; color: var(--tx-3); }


/* ═══════════ 12 CTA ═══════════ */
.ask { margin-top: 40px; display: flex; flex-direction: column; gap: 13px; }
.ask div { display: flex; align-items: center; gap: 12px;
           font-size: 19px; font-weight: var(--w-medium); letter-spacing: -.02em; color: var(--tx-2); }
.ask div i { width: 4px; height: 4px; border-radius: 50%; background: var(--tx-5); }


/* 02 — 헤드라인 아래 서브 한 줄 */
.head-block .sub { margin-top: 12px; }

/* 03 — 6지표 표. 지표별 최고 칸만 밝힌다.
   색은 탈락에만 — 강조는 채도가 아니라 '빛'(밝기)으로 말한다 */
.mx td { padding: 13px 18px; }
.mx .v { font-size: var(--fs-data); font-weight: var(--w-medium); color: var(--tx-3); }
.mx .v.dim { color: var(--tx-4); font-weight: var(--w-regular); }
.mx td.win .v { color: var(--light-bright); font-weight: var(--w-semibold); }
.mx td.win { position: relative; }
.mx td.win::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--light); box-shadow: var(--glow-tip); }

/* 헤드라인 "팔로워 수 말고 여섯 가지" — 우리가 보는 여섯 지표 행에만 무채색 점.
   win 점(빛)·pick 행과 혼동 금지: 이 점은 채도 없는 --tx-4 (색은 결론에만) */
.mx tbody tr:not(.flw):not(.pick) th.lab { position: relative; }
.mx tbody tr:not(.flw):not(.pick) th.lab::before { content: ""; position: absolute;
  left: 6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--tx-4); }

/* 04 — 풀 카드 그리드. 사진이 승부처.
   .ph에 실제 사진이 들어오면 background-image로 교체 (object-fit cover 동일 규격) */
.pool { margin-top: 30px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pool .card { border: 1px solid var(--line); border-radius: var(--r-table); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.006)); }
.pool .ph { height: 176px; border-bottom: 1px solid var(--line-faint);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 60%),
    radial-gradient(120% 90% at 30% 20%, rgba(110,123,240,.12), transparent 70%);
  background-size: cover; background-position: center top; }
.pool figcaption { padding: 14px 16px 16px; }
.pool figcaption b { display: block; font-size: 15px; font-weight: var(--w-semibold);
  letter-spacing: -.015em; color: var(--tx); }
.pool .scene { display: block; margin-top: 3px; font-size: 11px; font-weight: var(--w-regular);
  letter-spacing: -.005em; color: var(--tx-3); }
.pool dl { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.pool dl div { display: flex; align-items: baseline; justify-content: space-between; }
.pool dt { font-size: 10.5px; font-weight: var(--w-regular); letter-spacing: -.005em; color: var(--tx-4); }
.pool dd { font-size: 12.5px; font-weight: var(--w-semibold); letter-spacing: -.01em; color: var(--tx); }
.pool dd i { font-style: normal; font-size: 10px; color: var(--tx-4); }


/* 10 — CTA 버튼 (덱에서 유일한 면 채움 — 행동 하나뿐이라 허용) */
.cta-btn { margin-top: 38px; align-self: flex-start; padding: 13px 26px; border-radius: 8px;
  background: var(--light); color: #FFFFFF; text-decoration: none;
  font-size: 15px; font-weight: var(--w-semibold); letter-spacing: -.01em; }
.cta-btn:hover { background: var(--light-soft); }

/* ═══════════ 인쇄 (PDF) ═══════════
   "PDF로 주세요"는 자주 오는 요청이고, 다운로드 버튼(render.js)도 이 블록으로 렌더한다.
   @page를 슬라이드 실측(1280x720)으로 잡아야 한 장이 한 페이지에 꽉 찬다 —
   기본 A4 세로에 얹으면 위쪽에만 붙고 아래 2/3이 빈다. */
@page { size: 1280px 720px; margin: 0; }
@media print {
  body { background: #fff; padding: 0; gap: 0; display: block; }
  .slide { border: none; border-radius: 0; break-after: page; margin: 0;
           /* 화면 폭에 맞추는 축소는 인쇄에서 꺼야 한다 — 페이지가 이미 슬라이드 크기다 */
           zoom: 1; }
  .slide:last-child { break-after: auto; }
  /* 뷰어 크롬(레일·여는 손잡이·다운로드 버튼)은 PDF에 남지 않는다 */
  .deck-rail, .rail-handle, .deck-tools { display: none !important; }
  /* 레일이 밀어둔 본문 여백도 인쇄에서는 없앤다 */
  :root:not([data-rail="off"]) body { padding-left: 0; }
  /* 사진·표면 색을 인쇄에 살린다 (기본값은 배경을 전부 날린다) */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* 헤드라인의 background-clip:text는 PDF 래스터화에서 클립이 새서
     글자 주변에 그라디언트 사각형 테두리가 남는다. 인쇄에서는 솔리드 잉크로 간다 —
     '위에서 빛을 받는' 효과는 화면 전용이고, 종이에는 어차피 광원이 없다. */
  .h, .wordmark {
    background: none !important;
    -webkit-text-fill-color: currentColor;
    color: var(--tx) !important;
  }
  /* 잔상도 인쇄에서는 뭉개져 얼룩으로 읽힌다 */
  .wm-smear .sm { display: none; }
}


/* ═══════════ 툴바 (뷰어 크롬) ═══════════
   오른쪽 위 한 줄 — 웹사이트 · 다운로드 · 톤 토글. 덱의 일부가 아니므로
   브랜드 언어를 따르지 않는 중립 크롬. 인쇄에서는 사라진다. */
.deck-tools {
  position: fixed; right: 24px; top: 24px; z-index: 100;
  display: flex; align-items: center; gap: 8px;
}
.tool-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px 9px 13px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--tx-3);
  font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tool-btn:hover { color: var(--tx); border-color: var(--tx-5); }
.tool-btn svg { width: 13px; height: 13px; flex: none; }
.tool-btn.tone-toggle { padding: 9px 11px; }
.tool-btn.tone-toggle svg { width: 14px; height: 14px; }
:root:not([data-tone="dark"]) .tool-btn { background: #FFFFFF; border-color: #E3E8EE; }

@media print { .deck-tools { display: none !important; } }

/* ═══════════ 슬라이드 레일 (썸네일 네비) ═══════════
   FeatPaper식 상시 사이드바 — 왼쪽에 페이지 썸네일을 세우고 클릭으로 점프한다.
   덱 크롬이라 브랜드 언어를 따르지 않는 중립 톤. 토글(S)로 접히고, 접히면
   왼쪽 모서리에 얇은 손잡이만 남는다. 인쇄·단일 슬라이드 모드에서는 사라진다.
   썸네일은 실제 슬라이드를 그대로 복제해 0.125배로 줄인 것 — 별도 이미지가 아니다. */
.deck-rail {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 200px; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--canvas); border-right: 1px solid var(--line);
  transition: transform .28s ease;
}
.rail-head {
  flex: none; display: flex; align-items: center;
  padding: 15px 18px 13px; border-bottom: 1px solid var(--line-faint);
}
.rail-brand { font-size: 13px; font-weight: 700; letter-spacing: -.03em; color: var(--tx); }

/* 접기/열기 — 한 자리(왼쪽 세로 중앙). 레일이 열리면 레일 오른쪽 경계에 ‹,
   접히면 화면 왼쪽 가장자리에 › — 손이 기억하는 위치가 안 바뀐다 (QA 2026-07-21) */
.rail-handle {
  position: fixed; left: 200px; top: 50%; transform: translateY(-50%); z-index: 95;
  width: 22px; height: 58px; border: 1px solid var(--line); border-left: none;
  border-radius: 0 8px 8px 0; background: var(--canvas);
  color: var(--tx-4); cursor: pointer; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
  transition: left .28s ease, color .15s, border-color .15s;
}
.rail-handle:hover { color: var(--tx); border-color: var(--tx-5); }
:root[data-rail="off"] .rail-handle { left: 0; }
.rail-list {
  flex: 1; position: relative; overflow-y: auto; padding: 14px 0;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rail-thumb {
  position: relative; flex: none; padding: 0;
  width: 160px; height: 90px;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--bg); cursor: pointer;
  transition: border-color .15s;
}
.rail-thumb:hover { border-color: var(--tx-5); }
.rail-thumb.on { border-color: var(--light); box-shadow: 0 0 0 1px var(--light); }
.rail-mini {
  width: var(--slide-w); height: var(--slide-h);
  transform: scale(.125); transform-origin: top left; pointer-events: none;
  border: none !important; border-radius: 0 !important; margin: 0 !important;
}
.rail-no {
  position: absolute; left: 6px; top: 5px; z-index: 2;
  font-size: 9px; font-weight: 600; letter-spacing: .02em; color: var(--tx-3);
  background: rgba(5,5,6,.55); padding: 1px 5px; border-radius: 4px;
}
:root:not([data-tone="dark"]) .rail-no { color: #3A4657; background: rgba(255,255,255,.7); }

:root[data-rail="off"] .deck-rail { transform: translateX(-100%); }

/* 레일이 열려 있으면 본문을 오른쪽으로 밀어 슬라이드가 레일에 가리지 않게 한다 */
body { transition: padding .28s ease; }
:root:not([data-rail="off"]) body { padding-left: 232px; }

/* 모바일: 썸네일 레일은 232px라 좁은 화면을 통째로 먹는다. 숨긴다 —
   폰에서는 그냥 세로로 스크롤하며 8장을 훑는 게 낫다. */
@media (max-width: 820px) {
  .deck-rail, .rail-handle { display: none !important; }
  :root:not([data-rail="off"]) body { padding-left: 0; }
}

:root:not([data-tone="dark"]) .deck-rail { background: #F4F6F8; }
:root:not([data-tone="dark"]) .rail-handle { background: #F4F6F8; }

/* ═══════════ v3 (8장 개편) 추가 컴포넌트 ═══════════ */

/* 05 — '누구를' 행의 지표 배지. 04 표의 지표명이 그대로 넘어온다 */
.grid3 .ki { display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: rgba(110,123,240,.10); border: 1px solid rgba(110,123,240,.34);
  font-size: 11px; font-weight: var(--w-semibold); letter-spacing: -.005em; color: var(--light-bright); }
.grid3 .ki + .how { margin-top: 8px; }
.grid3 .r-what .what + .how { margin-top: 7px; color: var(--tx-4); }

/* 07 — 보고 2패널. 목업은 디자인 패스에서 실물화 */
.report { margin-top: auto; margin-bottom: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.report .panel { border: 1px solid var(--line); border-radius: var(--r-table); padding: 24px 26px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006)); }
.report .panel h3 { font-size: var(--fs-step); font-weight: var(--w-semibold); letter-spacing: -.025em; color: var(--tx); }
.report .panel p { margin-top: 9px; font-size: var(--fs-meta); font-weight: var(--w-regular);
  line-height: 1.6; letter-spacing: -.008em; color: var(--tx-3); }
.report .mock { margin-top: 20px; height: 148px; border: 1px solid var(--line-faint); border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.008) 60%); }

/* 08 — 오퍼 리스트: 제목 + 설명 */
.ask div b { font-weight: var(--w-semibold); color: var(--tx); letter-spacing: -.02em; }
.ask div span { font-size: var(--fs-meta); font-weight: var(--w-regular); color: var(--tx-3); }

/* 04 — 서브 줄이 추가되며 7행 표가 720을 넘침 → 행 밀도 소폭 압축 */
.s04 .mx td { padding: 11px 18px; }
.s04 .mx th:first-child, .s04 .mx td:first-child { white-space: nowrap; }
.s04 .mx td.calc { font-size: 11px; font-weight: var(--w-regular); letter-spacing: -.005em; color: var(--tx-4); }

/* ═══════════ v3 디자인 패스 ═══════════ */

/* 02 — 카드 스택: 뒤로 익명 카드 2겹이 페이드되며 깊이감 (규모는 시각으로만 암시).
   하단 각주가 빠지며(코멘트) 남는 공간은 세로 센터링으로 흡수 */
.pool-stack { position: relative; margin-top: auto; margin-bottom: auto; }
.pool-stack .pool { margin-top: 0; }
.pool-stack .pool:not(.ghost) { position: relative; z-index: 1; }
.pool.ghost { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pool.ghost .card { background: linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,.004)); }
.pool.ghost .ph { height: 100%; border-bottom: none; opacity: .55; }
.pool.ghost.g1 { transform: translateY(-19px) scale(.958); opacity: .42; }
.pool.ghost.g2 { transform: translateY(-36px) scale(.918); opacity: .20; }
/* 03 — 브리프 실물 목업 2장. 표가 아니라 '보내는 문서'로 보이게 (CTA 브리프 샘플과 연결) */
.briefs { margin-top: auto; margin-bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; }
.briefs .vs { align-self: center; justify-self: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: var(--w-semibold); letter-spacing: .01em; color: var(--tx-4); }
.brief { border: 1px solid var(--line); border-radius: var(--r-table); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.006)); }
.brief header { display: flex; align-items: baseline; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.022); }
.brief header b { font-size: 15px; font-weight: var(--w-semibold); letter-spacing: -.015em; color: var(--tx); }
.brief header span { font-size: 11px; font-weight: var(--w-regular); letter-spacing: .02em; color: var(--tx-4); }
.brief .row { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 15px 20px;
  border-bottom: 1px solid var(--line-faint); }
.brief .row:last-child { border-bottom: none; }
.brief .row i { font-style: normal; font-size: var(--fs-cell); font-weight: var(--w-regular); color: var(--tx-4); }
.brief .row p { font-size: var(--fs-meta); font-weight: var(--w-regular); line-height: 1.6;
  letter-spacing: -.008em; color: var(--tx-2); }

/* 05 — '어떻게' 불릿 (코멘트: 내용을 불릿으로) */
.grid3 .dol { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.grid3 .dol li { position: relative; padding-left: 13px; font-size: var(--fs-meta);
  font-weight: var(--w-regular); line-height: 1.5; letter-spacing: -.008em;
  color: var(--tx-2); word-break: keep-all; }
.grid3 .dol li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 3px; height: 3px; border-radius: 50%; background: var(--tx-4); }

/* 05 — 지표 배지 앞에 04 표와 같은 빛 점 — "그 표의 지표가 넘어왔다" */
.grid3 .ki::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--light); box-shadow: var(--glow-tip); margin-right: 7px; vertical-align: 2px; }

/* 07 — 목업 내부: 예시 데이터를 채운다 (코멘트 2차 — 하단 '예시 화면' 각주와 한 몸) */
.report .mock { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.mock .m-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mock .m-bar span { font-size: 10px; font-weight: var(--w-semibold);
  letter-spacing: .04em; color: var(--tx-4); }
.mock .m-bar em { padding: 3px 8px; border: 1px solid rgba(110,123,240,.35); border-radius: 999px;
  background: rgba(110,123,240,.08); font-style: normal; font-size: 10px;
  font-weight: var(--w-medium); letter-spacing: -.005em; color: var(--light-bright); }
.mock .m-steps { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding-top: 8px; }
.mock .m-steps div { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mock .m-steps div:not(:last-child)::after { content: ""; position: absolute; z-index: 0;
  top: 11px; left: 50%; width: 100%; height: 1px; background: var(--line); }
.mock .m-steps div.done:not(:last-child)::after { background: rgba(110,123,240,.55); }
.mock .m-steps i { position: relative; z-index: 1; width: 23px; height: 23px; border-radius: 50%;
  border: 1px solid var(--line); background: #171A22; display: grid; place-items: center;
  font-style: normal; font-size: 9px; font-weight: var(--w-semibold); color: var(--tx-5); }
.mock .m-steps div.done i { border-color: rgba(110,123,240,.65); background: #252A54; color: var(--light-bright); }
.mock .m-steps div.now i { border-color: var(--light); background: var(--light); color: #0B0C12; }
.mock .m-steps b { margin-top: 9px; font-size: 10px; font-weight: var(--w-regular);
  letter-spacing: -.005em; color: var(--tx-4); white-space: nowrap; }
.mock .m-steps div.done b { color: var(--tx-3); }
.mock .m-steps div.now b { font-weight: var(--w-semibold); color: var(--tx); }
.mock .m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock .m-tiles div { height: 32px; border-radius: 6px; border: 1px solid var(--line-faint); background: rgba(255,255,255,.02); }
/* ═══════════ v4 코멘트 반영 (2026-07-20) ═══════════ */

/* 본문 텍스트 어절 단위 줄바꿈 — "진행해/요" 같은 음절 중간 절단 방지 */
.grid3 .what, .grid3 .how, .brief .row p, .report .panel p, .fine { word-break: keep-all; }

/* 02 — 사진을 키우고 씬은 사진 위로, 팔로워는 닉네임 층으로(규모를 먼저 읽힌다).
   씬 배지는 밝은 사진 위에서도 읽히게 다크 글래스(코멘트: 잘 안 보임).
   지표는 04와 같은 6개 그대로. 안 잰 건 '미측정', 협찬 표본 없으면 '이력 드묾'. */
.pool .ph { height: 236px; position: relative; }
.pool .ph .scene { position: absolute; left: 10px; top: 10px; display: inline-block; margin-top: 0;
  padding: 3px 10px; border-radius: 999px; background: #15171E;
  border: 1px solid rgba(255,255,255,.16); font-size: 10.5px; font-weight: var(--w-semibold);
  color: #F4F6FF; letter-spacing: -.005em; }
.pool .who { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pool .who .foll { font-size: 13px; font-weight: var(--w-semibold); letter-spacing: -.015em; color: var(--tx-2); }
.pool .who + dl { margin-top: 11px; }
.pool dd.dim { color: var(--tx-4); }

/* 03 — 브리프 위 예시 라벨: 두 카드가 같은 제품의 브리프 예시임을 먼저 밝힌다.
   이 정보를 먼저 읽어야 아래 두 카드가 '같은 제품, 다른 씬'으로 읽힌다 → 존재감을 준다 */
.briefs-lbl { margin-top: auto; display: inline-flex; align-self: center; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.02); font-size: 12px; font-weight: var(--w-medium);
  letter-spacing: -.005em; color: var(--tx-3); }
.briefs-lbl::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--tx-4); }
.briefs-lbl + .briefs { margin-top: 16px; margin-bottom: auto; }

/* 03 — 문서로 보이게: 레퍼런스 썸네일 행.
   두 브리프 사이의 "VS" 칩은 제거(2026-07-21). 러닝 씬과 필라테스 씬은 경쟁 관계가 아니라
   같은 원칙의 두 사례다 — 이 장의 논지가 "씬마다 다르게 설계한다"인데 VS는 "둘 중 하나가 이긴다"로
   읽혀 정반대를 말했다. VS는 06장(직접 vs 키네티)에서만 쓴다. 한 장치는 한 뜻으로. */
.briefs { position: relative; }
.brief .row.refs { align-items: start; }
.brief .thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.brief .thumbs figure { margin: 0; }
.brief .thumbs span { display: block; aspect-ratio: 1 / 1; border-radius: 6px; border: 1px solid var(--line-faint);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 60%),
    radial-gradient(120% 90% at 30% 20%, rgba(110,123,240,.10), transparent 70%); }
/* 실제 레퍼런스 이미지가 붙은 칸은 cover — 인물·동작이 프레임에 들어오게 */
.brief .thumbs span[style] { background-size: cover; background-repeat: no-repeat; background-position: center; }
.brief .thumbs em { display: block; margin-top: 6px; font-style: normal; font-size: 10px;
  letter-spacing: -.005em; color: var(--tx-4); text-align: center; }


/* 04 — 표의 결론 행: 누가 어디에 맞는가. 05 매칭으로 이어지는 다리.
   지표 행과 다른 물건임이 보이게 — 인디고 헤어라인 + 틴트 (코멘트: 구분되게) */
.mx tr:has(+ tr.pick) th,
.mx tr:has(+ tr.pick) td { border-bottom-color: rgba(110,123,240,.35); }
.mx tr.pick th,
.mx tr.pick td { border-top: 1px solid rgba(110,123,240,.35); background: rgba(110,123,240,.05); }
.mx tr.pick th.lab { color: var(--tx); font-weight: var(--w-semibold); }
.mx tr.pick .ki { display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: rgba(110,123,240,.10); border: 1px solid rgba(110,123,240,.34);
  font-size: 11px; font-weight: var(--w-semibold); letter-spacing: -.005em; color: var(--light-bright); }
.mx tr.pick .ki + .ki { margin-left: 6px; }

/* 04 — 유지율 각주 연계 별표 */
.mx td.lab i { font-style: normal; color: var(--tx-4); }

/* 07 — 리포트 목업 디테일: 라벨은 읽히되 숫자는 없음 */
.report .mock { height: 180px; }
.mock .m-tiles div { height: 40px; padding: 7px 9px;
  display: flex; flex-direction: column; justify-content: space-between; }
.mock .m-tiles div i { font-style: normal; font-size: 9px; font-weight: var(--w-semibold);
  letter-spacing: .05em; color: var(--tx-5); }
.mock .m-tiles div b { display: block; font-size: 14px; font-weight: var(--w-semibold);
  letter-spacing: -.01em; color: var(--tx); }
.mock .m-insight { flex: 1; padding: 14px 16px; border-radius: 7px; border: 1px solid rgba(110,123,240,.28);
  background: rgba(110,123,240,.07); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 12px; }
.mock .m-insight i { grid-column: 1 / -1; font-style: normal; font-size: 10px; font-weight: var(--w-semibold);
  letter-spacing: .02em; color: var(--tx-4); }
.mock .m-insight b { font-size: 13px; font-weight: var(--w-semibold); letter-spacing: -.01em; color: var(--tx); }
.mock .m-insight span { font-size: 12px; font-weight: var(--w-semibold); letter-spacing: -.01em; color: var(--light-bright); }

/* 08 — 버튼 둘: 주는 면, 보조는 테두리만 (위계로 CTA 하나 원칙 유지) */
.cta-row { margin-top: 38px; display: flex; gap: 12px; }
.cta-row .cta-btn { margin-top: 0; align-self: auto; }
.cta-btn.ghost { background: transparent; border: 1px solid var(--tx-5); color: var(--tx);
  padding: 12px 25px; }   /* 보더 1px만큼 빼서 주 버튼과 높이 정렬 */
.cta-btn.ghost:hover { background: transparent; border-color: var(--tx-5); color: var(--tx); }