/* =====================================================================
   mock-apple/apple.css — DESIGNapple.md(Apple 분석본)의 토큰을 1:1 로 옮긴 것
   규칙: 여기 없는 색 · 글꼴 · 간격은 쓰지 않는다. 값은 DESIGNapple.md 와 같아야 한다.
   글꼴: SF Pro 는 비공개. 문서 지침대로 system-ui 스택을 먼저, 비 Apple 플랫폼은 Inter 대체
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
  /* ---- colors (DESIGNapple.md colors:) ---- */
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --primary-on-dark: #2997ff;
  --ink: #1d1d1f;
  --body: #1d1d1f;
  --body-on-dark: #ffffff;
  --body-muted: #cccccc;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;
  --divider-soft: #f0f0f0;
  --hairline: #e0e0e0;
  --canvas: #ffffff;
  --canvas-parchment: #f5f5f7;
  --surface-pearl: #fafafc;
  --surface-tile-1: #272729;
  --surface-tile-2: #2a2a2c;
  --surface-tile-3: #252527;
  --surface-black: #000000;
  --surface-chip-translucent: #d2d2d7;
  --on-primary: #ffffff;
  --on-dark: #ffffff;

  /* ---- DashB 확장 토큰 (DESIGNapple.md 끝 절) ---- */
  --senti-pos-ink: #248a3d; --senti-pos-tint: #e8f6ec;
  --senti-neu-ink: #6e6e73; --senti-neu-tint: #f2f2f7;
  --senti-neg-ink: #d70015; --senti-neg-tint: #fdeaea;
  --thread-parent-bg: #1d1d1f; --thread-parent-ink: #ffffff;
  --thread-reply-ink: #6e6e73; --thread-reply-tint: #f2f2f7;
  /* 플랫폼 로고색 — ① 로고 아이콘에만 (DESIGNapple.md "플랫폼 로고색", 2026-09-28) */
  --color-platform-instagram: #c13584; --color-platform-instagram-warm: #f58529; --color-platform-youtube: #cc0000;

  /* ---- font families (문서 "Note on Font Substitutes") ---- */
  --font-display: -apple-system, BlinkMacSystemFont, system-ui, 'Inter', 'Segoe UI', sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, system-ui, 'Inter', 'Segoe UI', sans-serif;

  /* ---- rounded ---- */
  --r-none: 0; --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 18px; --r-pill: 9999px; --r-full: 9999px;

  /* ---- spacing ---- */
  --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 17px; --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px; --s-section: 80px;

  /* ---- 문서의 유일한 그림자 · 유일한 테두리 ---- */
  --product-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  --soft-hairline: rgba(0, 0, 0, 0.08);
}

/* ---- typography tokens (DESIGNapple.md typography:) ---- */
.t-hero-display   { font: 600 56px/1.07 var(--font-display); letter-spacing: -0.28px; }
.t-display-lg     { font: 600 40px/1.10 var(--font-display); letter-spacing: 0; }
.t-display-md     { font: 600 34px/1.47 var(--font-text); letter-spacing: -0.374px; }
.t-lead           { font: 400 28px/1.14 var(--font-display); letter-spacing: 0.196px; }
.t-lead-airy      { font: 300 24px/1.5 var(--font-text); }
.t-tagline        { font: 600 21px/1.19 var(--font-display); letter-spacing: 0.231px; }
.t-body-strong    { font: 600 17px/1.24 var(--font-text); letter-spacing: -0.374px; }
.t-body           { font: 400 17px/1.47 var(--font-text); letter-spacing: -0.374px; }
.t-dense-link     { font: 400 17px/2.41 var(--font-text); }
.t-caption        { font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; }
.t-caption-strong { font: 600 14px/1.29 var(--font-text); letter-spacing: -0.224px; }
.t-button-large   { font: 300 18px/1 var(--font-text); }
.t-button-utility { font: 400 14px/1.29 var(--font-text); letter-spacing: -0.224px; }
.t-fine-print     { font: 400 12px/1 var(--font-text); letter-spacing: -0.12px; }
.t-micro-legal    { font: 400 10px/1.3 var(--font-text); letter-spacing: -0.08px; }
.t-nav-link       { font: 400 12px/1 var(--font-text); letter-spacing: -0.12px; }

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: 108px; }
[id] { scroll-margin-top: 108px; }
h1, h2, h3, .card-title, .section-title { text-wrap: balance; }
body {
  margin: 0; background: var(--canvas); color: var(--body);
  font: 400 17px/1.47 var(--font-text); letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }
.muted80 { color: var(--ink-muted-80); }
.muted48 { color: var(--ink-muted-48); }
.on-dark { color: var(--on-dark); }
.on-dark-muted { color: var(--body-muted); }

.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-xl); }
.container.narrow { max-width: 980px; }
.stack > * + * { margin-top: var(--s-lg); }
.row { display: flex; align-items: center; gap: var(--s-sm); }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---- 본문 건너뛰기 링크: 포커스될 때만 보인다 ---- */
.skip { position: absolute; left: 16px; top: -48px; z-index: 20; background: var(--ink); color: var(--on-dark); padding: 8px 14px; border-radius: var(--r-sm); font: 400 14px/1.29 var(--font-text); }
.skip:focus-visible { top: 8px; outline: 2px solid var(--primary-focus); }

/* ---- global-nav (surface-black · on-dark · nav-link 12 · 44px) ---- */
.global-nav { background: var(--surface-black); color: var(--on-dark); height: 44px; }
.global-nav .container { height: 100%; display: flex; align-items: center; gap: var(--s-lg); }
.global-nav .brand { color: var(--on-dark); font: 600 14px/1 var(--font-display); letter-spacing: -0.12px; }
.global-nav .brand .sub { color: var(--body-muted); font: 400 12px/1 var(--font-text); letter-spacing: -0.12px; margin-left: var(--s-xs); }
.global-nav .nav-chip { color: var(--on-dark); font: 400 12px/1 var(--font-text); letter-spacing: -0.12px; border: 1px solid var(--ink-muted-48); border-radius: var(--r-pill); padding: 5px 10px; }

/* 단계 표시기 — nav-link. 현재 단계 = 흰 알약(on-dark 바탕 · 검정 글자), 나머지 = body-muted 글자 */
.stepper { display: flex; align-items: center; gap: var(--s-md); margin-left: auto; margin-right: auto; }
.step { display: flex; align-items: center; gap: var(--s-xs); color: var(--body-muted); font: 400 12px/1 var(--font-text); letter-spacing: -0.12px; }
.step .n { width: 22px; height: 22px; border-radius: var(--r-full); display: grid; place-items: center; border: 1px solid var(--ink-muted-48); color: var(--body-muted); font: 600 11px/1 var(--font-text); }
.step.current { color: var(--on-dark); }
.step.current .n { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.step.done .n { background: var(--surface-tile-2); border-color: var(--surface-tile-2); color: var(--on-dark); }
.step-line { width: 28px; height: 1px; background: var(--ink-muted-48); }

/* ---- sub-nav-frosted (parchment 80% + blur · 52px · tagline 21/600 · 우측 상시 CTA) ---- */
.sub-nav { position: sticky; top: 0; z-index: 10; height: 52px; background: rgba(245, 245, 247, 0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--soft-hairline); }
.sub-nav .container { height: 100%; display: flex; align-items: center; gap: var(--s-lg); }
.sub-nav .title { font: 600 21px/1.19 var(--font-display); letter-spacing: 0.231px; color: var(--ink); margin: 0; }
.sub-nav .links { margin-left: auto; display: flex; align-items: center; gap: var(--s-lg); font: 400 14px/1.29 var(--font-text); letter-spacing: -0.224px; }
.sub-nav .links a { color: var(--ink); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs); cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(0.95); }               /* 문서: 시스템 공통 눌림 상태 */
.btn:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
/* button-primary — Action Blue 알약. 비용 버튼 전용 (화면당 하나) */
.btn-primary, .btn-ghost { font: 400 17px/1.2 var(--font-text); letter-spacing: -0.374px; border-radius: var(--r-pill); padding: 0 22px; height: 44px; line-height: 1.2; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-focus); }
/* button-secondary-pill — 투명 · 파란 글자 · 1px 파란 테두리 (이동 · 보조 동작) */
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover { background: var(--canvas-parchment); }
/* button-dark-utility — ink 바탕 · 흰 글자 · r-sm · 8px 15px */
.btn-dark:hover { background: var(--surface-tile-2); }
.btn-dark { background: var(--ink); color: var(--on-dark); font: 400 14px/1.29 var(--font-text); letter-spacing: -0.224px; border-radius: var(--r-sm); padding: 8px 15px; min-height: 36px; }
/* button-pearl-capsule — pearl 바탕 · muted-80 글자 · 3px divider-soft 링 · r-md */
.btn-pearl:hover { background: var(--canvas-parchment); }
.btn-pearl { background: var(--surface-pearl); color: var(--ink-muted-80); font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; border: 3px solid var(--divider-soft); border-radius: var(--r-md); padding: 8px 14px; min-height: 40px; }
/* text-link */
.link { color: var(--primary); font: 400 17px/1.47 var(--font-text); letter-spacing: -0.374px; touch-action: manipulation; }
.link:hover, .pager a.pg:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.sm { font-size: 14px; letter-spacing: -0.224px; }
.link.on-dark { color: var(--primary-on-dark); }
/* disabled — 문서: ink-muted-48 = disabled button text */
.btn[aria-disabled="true"] { background: var(--canvas-parchment); color: var(--ink-muted-48); border-color: transparent; cursor: default; }
.btn[aria-disabled="true"]:active { transform: none; }
/* button-icon-circular — 44px · chip-translucent 64% */
.btn-circle:hover { background: var(--surface-chip-translucent); }
.btn-circle { width: 44px; height: 44px; border-radius: var(--r-full); background: rgba(210, 210, 215, 0.64); color: var(--ink); padding: 0; }
.btn-circle.sm { width: 32px; height: 32px; font-size: 14px; }

/* ---- configurator-option-chip (알약 · canvas · caption · 12px 16px; 선택 = 2px primary-focus 테두리) ---- */
.chips { display: inline-flex; flex-wrap: wrap; gap: var(--s-xs); }
.chip:hover { background: var(--canvas-parchment); }
.chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; background: var(--canvas); color: var(--ink); font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer; min-height: 36px; }
.chip.selected, .chip[aria-pressed="true"] { border: 2px solid var(--primary-focus); padding: 7px 15px; }

/* ---- 배지: 문서에 배지 부품이 없어 chip 문법(알약 · caption)으로 만든다. 색은 문서의 회색 사다리만 ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/1 var(--font-text); letter-spacing: -0.12px; border-radius: var(--r-pill); padding: 5px 10px; white-space: nowrap; background: var(--canvas-parchment); color: var(--ink-muted-80); }
.badge.outline { background: var(--canvas); border: 1px solid var(--hairline); color: var(--ink); }
.badge.dark { background: var(--ink); color: var(--on-dark); }
.badge.eyebrow { font: 600 14px/1.29 var(--font-text); letter-spacing: -0.224px; color: var(--ink); background: var(--canvas-parchment); padding: 6px 12px; }
/* 감성 3단계 — 확장 토큰: 연한 배경 + 진한 글자(AA). 글자를 반드시 담는다 */
.senti-pos { background: var(--senti-pos-tint); color: var(--senti-pos-ink); }
.senti-neu { background: var(--senti-neu-tint); color: var(--senti-neu-ink); }
.senti-neg { background: var(--senti-neg-tint); color: var(--senti-neg-ink); }
/* 댓글 위계 — 원댓글(상위) 진한 ink, 답글(하위) 같은 회색 계열의 옅은 톤 */
.thread-parent { background: var(--thread-parent-bg); color: var(--thread-parent-ink); }
.thread-reply { background: var(--thread-reply-tint); color: var(--thread-reply-ink); }
/* 필터 칩이 선택되면 같은 색을 입는다 (테두리는 그 색의 진한 톤) */
.chip.senti-pos[aria-pressed="true"] { border-color: var(--senti-pos-ink); }
.chip.senti-neu[aria-pressed="true"] { border-color: var(--senti-neu-ink); }
.chip.senti-neg[aria-pressed="true"] { border-color: var(--senti-neg-ink); }
.chip.thread-parent-outline[aria-pressed="true"] { border-color: var(--thread-parent-bg); color: var(--thread-parent-bg); }
.chip.thread-reply-outline[aria-pressed="true"] { border-color: var(--thread-reply-ink); color: var(--thread-reply-ink); }
.chip.senti-pos, .chip.senti-neu, .chip.senti-neg { border-color: var(--hairline); }
.chip.senti-pos:hover { background: var(--senti-pos-tint); } .chip.senti-neu:hover { background: var(--senti-neu-tint); } .chip.senti-neg:hover { background: var(--senti-neg-tint); }

/* ---- store-utility-card (canvas · 1px hairline · r-lg 18 · 24px · 그림자 없음) ---- */
.card { background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-lg); }
.card.parchment { background: var(--canvas-parchment); border-color: transparent; }
.card-title { font: 600 21px/1.19 var(--font-display); letter-spacing: 0.231px; margin: 0; }
.section-title { font: 600 34px/1.47 var(--font-text); letter-spacing: -0.374px; margin: 0; }

/* ---- product tiles (edge-to-edge · r-none · 80px) — 색이 바뀌는 것이 구분선 ---- */
.tile { border-radius: 0; padding: var(--s-section) 0; }
.tile.light { background: var(--canvas); color: var(--ink); }
.tile.parchment { background: var(--canvas-parchment); color: var(--ink); }
.tile.dark { background: var(--surface-tile-1); color: var(--on-dark); }
.tile.dark .card { background: var(--surface-tile-2); border-color: transparent; color: var(--on-dark); }
.tile.dark .badge { background: var(--surface-tile-3); color: var(--body-muted); }


/* ---- search-input (canvas · body 17 · 1px 0.08 검정 · 알약 · 12px 20px · 44px) ---- */
.input { width: 100%; background: var(--canvas); color: var(--ink); font: 400 17px/1.47 var(--font-text); letter-spacing: -0.374px; border: 1px solid var(--soft-hairline); border-radius: var(--r-pill); padding: 12px 20px; height: 44px; outline: none; }
.input::placeholder { color: var(--ink-muted-48); }
.input:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 0; }
.input.sm { height: 36px; font-size: 14px; letter-spacing: -0.224px; padding: 6px 14px; }
.input.error { border: 2px solid var(--ink); }   /* 문서에 오류 색 없음 — 굵은 ink 테두리 + 문구 */

/* ---- 화면 머리 ---- */
.page-head { padding: var(--s-xxl) 0 var(--s-xl); }
.page-head h1 { font: 600 40px/1.1 var(--font-display); letter-spacing: 0; margin: 0 0 var(--s-sm); }
.page-head.with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-lg); flex-wrap: wrap; }
.page-head.with-action .action { flex: 0 0 auto; margin-bottom: 4px; }
.page-head p { font: 400 17px/1.47 var(--font-text); letter-spacing: -0.374px; color: var(--ink-muted-80); margin: 0; max-width: 720px; }

/* ---- 표 — 문서에 표 부품이 없다. 유틸리티 카드 문법(canvas · hairline · r-lg)으로 만든다 ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas); }
table { width: 100%; border-collapse: collapse; font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; }
thead th { text-align: left; font: 600 14px/1.29 var(--font-text); letter-spacing: -0.224px; color: var(--ink-muted-48); background: var(--canvas-parchment); padding: 12px 16px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--divider-soft); vertical-align: top; color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
td.nowrap, th.nowrap { white-space: nowrap; }
td.reply { padding-left: 40px; }
td.reply .arrow { color: var(--ink-muted-48); margin-right: 6px; }
/* 작성자 · 계정 프로필 사진 (세션 38) — 주소만 쓰고 파일은 복사하지 않는다. 없거나 만료면 아이디 첫 글자 */
.avatar { width: 24px; height: 24px; border-radius: var(--r-full); background: var(--surface-chip-translucent); color: var(--ink-muted-80);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; vertical-align: middle; margin-right: 8px; flex: 0 0 auto;
  font: 600 11px/1 var(--font-text); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post .avatar { width: 32px; height: 32px; font-size: 13px; margin-right: 0; }

/* ---- 페이지네이션 ---- */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-xxs); padding: var(--s-md) 0; }
.pager .pg { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--primary); font: 400 14px/1 var(--font-text); }
.pager .pg.current { background: var(--ink); color: var(--on-dark); }
.pager span.pg { color: var(--ink-muted-48); }

/* ---- 누적 막대 · 가로 막대 — 회색 사다리 ---- */
.bar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--canvas-parchment); }
.bar .pos { background: var(--senti-pos-ink); }
.bar .neu { background: var(--senti-neu-ink); }
.bar .neg { background: var(--senti-neg-ink); }
.tile.dark .bar { background: var(--surface-tile-3); }
/* 감정 막대 (두꺼운 것) + 상자 3칸 — ② ③ 공용 부품 components/sentiment.js (세션 38, B안 sentibox 형식을 Apple 토큰으로).
   조각 사이 2px 는 바탕(canvas)이 비쳐 나뉜다. 글자는 흰색 — 세 감정 ink 모두 흰 글자와 AA 대비 */
.senti-bar { display: flex; gap: 2px; height: 40px; border-radius: var(--r-md); overflow: hidden; background: var(--canvas); }
.senti-bar .seg { min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; color: var(--on-dark); font: 600 14px/1 var(--font-text); letter-spacing: -0.224px; }
.senti-bar .seg.pos { background: var(--senti-pos-ink); }
.senti-bar .seg.neu { background: var(--senti-neu-ink); }
.senti-bar .seg.neg { background: var(--senti-neg-ink); }
.senti-bar.empty { align-items: center; justify-content: center; background: var(--canvas-parchment); color: var(--ink-muted-48); font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; }
.senti-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-sm); }
.senti-box { display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-md) var(--s-lg); }
.senti-box.pos { border-color: var(--senti-pos-ink); }
.senti-box.neu { border-color: var(--senti-neu-ink); }
.senti-box.neg { border-color: var(--senti-neg-ink); }
.senti-box .v { font: 600 28px/1.14 var(--font-display); letter-spacing: 0.196px; color: var(--ink); }
@media (max-width: 640px) { .senti-boxes { grid-template-columns: 1fr; } }
.hbar { height: 8px; border-radius: var(--r-xs); background: var(--ink-muted-80); }

/* ---- 지표 칸 (유틸리티 카드 축소) ---- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-sm); }
.metric { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-md) var(--s-lg); }
.metric .label { font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; color: var(--ink-muted-48); }
.metric .value { font: 600 21px/1.19 var(--font-display); letter-spacing: 0.231px; margin-top: 6px; }
.metric .value.none { font: 400 14px/1.43 var(--font-text); color: var(--ink-muted-48); }
.tile.dark .metric { background: var(--surface-tile-2); border-color: transparent; }
.tile.dark .metric .label { color: var(--body-muted); }

/* ---- floating-sticky-bar (parchment 80% + blur · 64px · 12px 32px · 좌 합계 · 우 primary) ---- */
.sticky-bar { position: sticky; bottom: 0; z-index: 9; background: rgba(245, 245, 247, 0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--soft-hairline); min-height: 64px; padding: 12px 32px; }
.sticky-bar .inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: var(--s-lg); flex-wrap: wrap; }

/* ---- footer (parchment · muted-80 · fine-print · 64px) ---- */
.footer { background: var(--canvas-parchment); color: var(--ink-muted-80); padding: 64px 32px; margin-top: var(--s-section); }
.footer p { margin: 0 0 var(--s-xs); font: 400 12px/1.5 var(--font-text); letter-spacing: -0.12px; }
.footer .legal { color: var(--ink-muted-48); }

/* ---- 읽기 폭 ---- */
.measure-text, .page-head p, .prose { max-width: 65ch; }

/* ---- 메타 줄: 가운뎃점 대신 간격으로 나눈다 (라벨 muted-48 · 값 ink) ---- */
.meta-row { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-lg); font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; align-items: center; }
.meta-row .k { color: var(--ink-muted-48); margin-right: 6px; }

/* ---- 평문 구역: 카드 대신 위 헤어라인 + 여백 ---- */
.plain { padding-top: var(--s-xl); border-top: 1px solid var(--hairline); }
.plain h2 { margin-bottom: var(--s-md); }

/* ---- 감정 범례 (막대 옆 3항목) ---- */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-xl); }
.legend .item { display: flex; align-items: baseline; gap: var(--s-xs); }
.legend .v { font: 600 21px/1.19 var(--font-display); letter-spacing: 0.231px; }

/* ---- 벤토: 항목 4 = 칸 4, 첫 칸이 넓다 (2:1:1:1) ---- */
.bento { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-sm); }
.bento .cell { background: var(--canvas-parchment); border-radius: var(--r-lg); padding: var(--s-lg); }
.bento .cell.lead { background: var(--ink); color: var(--on-dark); }
.bento .cell.lead .muted48 { color: var(--body-muted); }
.bento .cell.lead .badge { background: var(--surface-tile-2); color: var(--body-muted); }
.bento .cell h3 { margin: 0 0 6px; font: 600 17px/1.24 var(--font-text); letter-spacing: -0.374px; }
.bento .cell.lead h3 { font: 600 21px/1.19 var(--font-display); letter-spacing: 0.231px; }

/* ---- 키워드 알약 목록 (긴 목록을 행 구분선 대신 알약으로) ---- */
.pill-list { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.pill-list .pill { display: inline-flex; align-items: baseline; gap: var(--s-xs); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 8px 14px; font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; }
.pill-list .pill .c { color: var(--ink-muted-48); font-variant-numeric: tabular-nums; }
.pill-list .pill.top { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.pill-list .pill.top .c { color: var(--body-muted); }

/* ---- 두 열 본문 (헤어라인으로 나눔) ---- */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-xxl); }
.cols-2 > * + * { border-left: 1px solid var(--hairline); padding-left: var(--s-xxl); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }

/* ---- ① 분할: 좌 제목(5/12) · 우 폼(7/12) — VARIANCE 8 ---- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-xxl); align-items: start; padding-top: var(--s-xxl); }
.split .page-head { padding: 0; position: sticky; top: 76px; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .cell.lead { grid-column: 1 / -1; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .cols-2 > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-lg); margin-top: var(--s-lg); }
  .split { grid-template-columns: 1fr; gap: var(--s-lg); }
  .split .page-head { position: static; }
}

/* ---- 시안 주석 — 실제 화면에는 없는 것 ---- */
.note { border: 1px dashed var(--hairline); border-radius: var(--r-sm); padding: var(--s-sm) var(--s-md); color: var(--ink-muted-48); font: 400 12px/1.5 var(--font-text); letter-spacing: -0.12px; }
.note b { color: var(--ink-muted-80); font-weight: 600; }

@media (max-width: 833px) {
  .container { padding: 0 var(--s-md); }
  .page-head h1 { font-size: 34px; letter-spacing: -0.374px; }
  .stepper .step .label { display: none; }
  .global-nav .brand .sub { display: none; }
  .sub-nav .links a.hide-m { display: none; }
  .tile { padding: var(--s-xxl) 0; }
}


/* ---- 시안 ① 링크 입력 의 페이지 스타일 (a3485b8 01-url-input.html <style>) ---- */
  .url-row { display: grid; gap: var(--s-xs); padding: var(--s-md) 0; border-top: 1px solid var(--divider-soft); }
  .url-row:first-of-type { border-top: 0; padding-top: 0; }
  .url-row .head { display: flex; align-items: center; gap: var(--s-xs); }
  /* B안 로고 아이콘(Lucide) — 늘 브랜드색으로 보인다 (2026-09-28 사용자 지시 — 그 전 IG · YT 글자 상자) */
  .platform-icons { display: inline-flex; align-items: center; gap: 6px; }
  .platform-icons .icon-svg { width: 18px; height: 18px; }
  .platform-icons .plat-youtube { color: var(--color-platform-youtube); }
  .help { font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; color: var(--ink-muted-48); }
  .help.error { color: var(--ink); }

/* ---- 시안 ② 표 · 필터 의 페이지 스타일 (a3485b8 02-table-filter.html <style>) ---- */
  .post { display: grid; grid-template-columns: 112px 1fr; gap: var(--s-lg); align-items: start; }
  /* 썸네일 = "표면 위에 놓인 제품 이미지" — 문서의 유일한 그림자를 여기에만 쓴다 */
  .thumb { width: 112px; height: 112px; border-radius: var(--r-sm); background: var(--canvas-parchment); box-shadow: var(--product-shadow); display: grid; place-items: center; color: var(--ink-muted-48); font: 400 12px/1 var(--font-text); }
  .post .meta { color: var(--ink-muted-48); font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; }
  .measure { margin-top: var(--s-md); padding-top: var(--s-md); border-top: 1px solid var(--divider-soft); display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; }
  .toolbar { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; }
  .toolbar .search { flex: 1 1 320px; }
  .filter-label { color: var(--ink-muted-48); font: 600 14px/1.29 var(--font-text); letter-spacing: -0.224px; margin-right: 4px; }
  .likes-min { width: 80px; text-align: right; }
  .filters + .table-wrap { margin-top: var(--s-xs); }   /* 필터 줄이 표에 붙는다 */
  .fgroup { display: inline-flex; align-items: center; gap: var(--s-xs); }
  @media (max-width: 640px) { .post { grid-template-columns: 1fr; } }

/* ---- 시안 ③ AI 분석 의 페이지 스타일 (a3485b8 03-ai-report.html <style>) ---- */
  /* 썸네일 = "표면 위에 놓인 제품 이미지". 문서의 유일한 그림자를 여기에만 쓴다 */
  .summary { margin-top: var(--s-md); padding: var(--s-sm) var(--s-md); background: var(--canvas-parchment); border-radius: var(--r-md); }
  .summary .k { color: var(--ink-muted-48); font: 600 14px/1.29 var(--font-text); letter-spacing: -0.224px; margin-right: 8px; }
  .comment { padding: var(--s-sm) 0; }
  .comment + .comment { border-top: 1px solid var(--divider-soft); }
  .comment .who { display: flex; align-items: center; gap: var(--s-xs); color: var(--ink-muted-48); font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; }
  .comment .why { color: var(--ink-muted-48); font: 400 12px/1.5 var(--font-text); letter-spacing: -0.12px; margin-top: 4px; }
  .emoji { display: inline-flex; gap: var(--s-xs); align-items: baseline; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 8px 14px; }
  .example h4 { margin: 0 0 6px; font: 600 17px/1.24 var(--font-text); letter-spacing: -0.374px; }
  .example blockquote { margin: 0; color: var(--ink-muted-80); font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; }
  @media (max-width: 640px) { .post { grid-template-columns: 1fr; } }

/* =====================================================================
   web-a 추가 부품 (셸 · 로그인 · 배너 · 진행 · 선택 줄). 색은 DESIGNapple.md 값만 쓴다.
   ===================================================================== */
.global-nav .nav-user { display: inline-flex; gap: var(--s-xs); align-items: center; }
.nav-chip.as-button { background: transparent; cursor: pointer; font: 400 12px/1 var(--font-text); }
.nav-chip.as-button:hover { background: var(--surface-tile-2); }
.nav-chip.as-button:focus-visible { outline: 2px solid var(--primary-on-dark); outline-offset: 2px; }
/* 로그인 표시 — 사람 아이콘 + 이메일 + 로그아웃 (세션 38, '팀 공유' 칩 자리). 좁은 화면에서는 이메일을 숨기고 아이콘에 title 로 남긴다 */
.nav-avatar { width: 24px; height: 24px; border-radius: var(--r-full); background: var(--surface-tile-2); color: var(--on-dark); display: grid; place-items: center; flex: 0 0 auto; }
.nav-avatar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-email { color: var(--body-muted); font: 400 12px/1 var(--font-text); letter-spacing: -0.12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 833px) { .nav-email { display: none; } }
.badge.as-button { cursor: pointer; border: 0; font: 400 12px/1 var(--font-text); }
.badge.as-button:hover { background: var(--surface-chip-translucent); }

/* 배너 — 서브 내비 아래 한 줄. 종류: stop(정지) · off(워커 꺼짐) · oldcode · ok(예산) */
.banner { font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.banner.ok { background: var(--canvas-parchment); color: var(--ink-muted-80); }
.banner.stop { background: var(--senti-neg-tint); color: var(--senti-neg-ink); }
.banner.off, .banner.oldcode { background: var(--senti-neu-tint); color: var(--ink); }

/* 로그인 — 머리 · 카드 · 안내를 가운데로 (세션 38 사용자 지시). 카드 안 입력칸은 왼쪽 정렬 그대로 */
.login-screen { max-width: 520px; margin-left: auto; margin-right: auto; text-align: center; word-break: keep-all; }
.login-screen .page-head p { margin-left: auto; margin-right: auto; }
.login-wrap { max-width: 440px; margin-left: auto; margin-right: auto; text-align: left; }
.login-card .field { display: grid; gap: 6px; }
.login-card .is-error { color: var(--senti-neg-ink); }

/* 게시물 선택 줄 (측정이 있는 게시물이 둘 이상일 때) */
.post-select { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.post-select .chip { text-decoration: none; }

/* 카드 본문 2줄 자르기 · 썸네일 이미지 */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb img { width: 112px; height: 112px; object-fit: cover; border-radius: var(--r-sm); display: block; }

/* 수집 중 — 스피너는 동작 피드백. 움직임을 줄인 환경에서는 멈춘 점 */
.spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-muted-48); border-top-color: transparent; display: inline-block; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--ink-muted-48); } }

/* 로딩 팝업 (components/loading.js, 세션 38 P42) — 스피너 + 한 줄, 닫는 단추 없음. 뒤 화면은 surface-black 48% 로 가린다 */
.loading-dialog { border: 0; border-radius: var(--r-lg); background: var(--canvas); color: var(--ink); padding: var(--s-xl) var(--s-xxl); min-width: 240px; text-align: center; }
.loading-dialog::backdrop { background: rgba(0, 0, 0, 0.48); }
.loading-dialog:focus-visible { outline: none; }
/* 돌아가는 표시를 눈에 띄게 (세션 38 사용자 "빙글빙글 도는 움직임"): 굵은 회색 고리 위를 파란 호가 돈다 + 글자 뒤 점 셋이 차례로 깜빡인다.
   로딩 표시는 필수 동작이라 '움직임 줄이기' 에서도 멈추지 않고 느리게만 돈다 */
.loading-dialog .spinner { width: 44px; height: 44px; border: 4px solid var(--hairline); border-top-color: var(--primary); animation: spin 0.8s linear infinite; }
.loading-dialog p { margin: var(--s-md) 0 0; font: 600 17px/1.24 var(--font-text); letter-spacing: -0.374px; }
.loading-dialog .dots span { display: inline-block; animation: blink 1.2s ease-in-out infinite both; }
.loading-dialog .dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dialog .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loading-dialog .spinner { animation: spin 1.6s linear infinite; border-top-color: var(--primary); }
  .loading-dialog .dots span { animation-duration: 2.4s; }
}

/* 팝오버 메뉴 — <details>(② 컬럼 표시/제외 · CSV · JSON, 세션 38 P45 · ui.js menu()). 카드 문법(canvas · hairline · r-md), 그림자 없음.
   바깥을 누르면 ui.js 가 닫는다 */
.popover { position: relative; display: inline-block; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover[open] > summary { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
.popover-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-xs); display: grid; gap: 2px; }
.popover-body label { display: flex; align-items: center; gap: var(--s-xs); padding: 6px 8px; border-radius: var(--r-sm); font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; cursor: pointer; white-space: nowrap; }
.popover-body label:hover { background: var(--canvas-parchment); }
.popover-body input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.popover-note { margin: 4px 8px 2px; max-width: 260px; color: var(--ink-muted-48); font: 400 12px/1.5 var(--font-text); letter-spacing: -0.12px; }
.menu-list .btn { justify-content: flex-start; width: 100%; background: transparent; color: var(--ink); border: 0; font: 400 14px/1.43 var(--font-text); letter-spacing: -0.224px; padding: 8px 10px; border-radius: var(--r-sm); }
.menu-list .btn:hover { background: var(--canvas-parchment); }
/* ui.js icon() 의 SVG (Lucide 선 아이콘) — 글자 크기에 맞춘다 */
.icon-svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex: 0 0 auto; }

/* 정렬 select 를 칩 모양으로 */
select.chip { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px; background-size: 5px 5px; background-repeat: no-repeat; color: var(--ink); }

/* 토스트 — 우하단, aria-live */
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 30; background: var(--ink); color: var(--on-dark); font: 400 14px/1.43 var(--font-text); padding: 10px 14px; border-radius: var(--r-sm); max-width: min(90vw, 480px); }