/* 디자인 기준: site/phone-spec-compare.html(Claude 디자인, 2026-10-27 사용자 요청). 위쪽은 디자인의 스타일을 그대로 옮긴 것이고,
   '추가' 표시 구획은 디자인에 없던 우리 내용(항목 메뉴·출처·추정 표시·모델 요약·항목 표)이다.
   글꼴은 저장소에 둔 Pretendard다 (NFR-SITE-01). 밝은 테마 하나다(사용자 결정 2026-10-23) */

/* ===== 디자인 토큰 ===== */
:root {
  /* 시그니처: 미드나잇 네이비 oklch(0.30 0.07 262) */
  --sig: #1A2D51;
  --sig-chip: #354666;   /* sig + 흰색 12% */
  --sig-tray: #53627D;   /* sig + 흰색 25% */
  --sig-soft: #D1D5DC;   /* sig + 흰색 80% (sig 배경 위 보조 글자) */

  /* 비교 슬롯 B~D (A = --sig) */
  --slot-b: #21716D;     /* 청록 oklch(0.50 0.075 190) */
  --slot-c: #7D3B5D;     /* 플럼 oklch(0.45 0.10 350) */
  --slot-d: #7D6F5F;     /* 토프 oklch(0.55 0.03 70) */

  /* 중립 */
  --ink: #16181D;
  --ink-2: #3F4652;
  --muted: #5B6270;
  --faint: #C4C8CF;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #FAFAFB;
  --line: #E2E4E8;
  --line-2: #EEF0F2;
  --control: #D9DCE1;
  --seg: #E7E9EC;

  /* 증감 톤: 유리 / 불리 / 중립 / 동일 */
  --up: #1F4FC4;   --up-bg: #E7EEFC;
  --down: #A3490A; --down-bg: #FBEDE1;
  --neu: #4B5260;  --neu-bg: #EDEFF2;
  --same: #6B7280;

  /* 추가: 추정·실측 집계 표시와 대가성 문구(쿠팡 표시 가이드: 본문과 다른 색) */
  --est: #8A5200;  --est-bg: #FFF0D6;
  --bench: #21716D; --bench-bg: #E4EEED;
  --notice: #A3490A;

  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color-scheme: light;
}

/* ===== 기본 ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  padding-bottom: 64px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 8% -80px, rgba(26, 45, 81, 0.06), transparent 70%),
    radial-gradient(900px 560px at 94% 40px, rgba(125, 59, 93, 0.05), transparent 70%),
    radial-gradient(1200px 700px at 80% 100%, rgba(33, 113, 109, 0.045), transparent 70%),
    radial-gradient(rgba(22, 24, 29, 0.055) 1px, transparent 1.5px);
  background-size: auto, auto, auto, 24px 24px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
button { font: inherit; cursor: pointer; }
a { color: var(--ink); }
a:hover { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right, 0px));
}

/* ===== 헤더 ===== */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-top: 12px; padding-bottom: 12px; }
.logo { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--sig); text-decoration: none; }
/* 추가: 쿠팡 표시 가이드에 맞춰 디자인의 12px 회색 대신 본문과 다른 색·굵기로 둔다 */
.disclosure { margin: 0; font-size: 13px; font-weight: 600; color: var(--notice); }
/* 추가: 항목 페이지 메뉴(디자인의 세그먼트 컨트롤을 링크로)와 오른쪽 필터 */
.site-header { position: relative; z-index: 20; }
.site-header .head-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 12px; }
.tabs { display: flex; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; flex: none; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--neu); text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 24, 29, 0.14); }
/* 추가: '모델 비교'와 항목별 전체 표 페이지를 나누는 표시 */
.tabs-label { display: inline-flex; flex: none; align-items: center; margin-left: 6px; padding: 0 4px 0 12px; border-left: 1px solid var(--control); font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ===== 추가: 머리글 필터. 평소에는 접어 두고 펼치면 머리글 아래에 겹쳐 연다 ===== */
.model-filter > summary { list-style: none; }
.model-filter > summary::-webkit-details-marker { display: none; }
.filter-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px 0 14px; border: 1px solid var(--control); border-radius: var(--r-md); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none; }
.filter-btn:hover { border-color: var(--ink-2); }
.model-filter[open] .filter-btn, .model-filter.active .filter-btn { border-color: var(--sig); color: var(--sig); }
.filter-count { padding: 1px 7px; border-radius: 6px; background: var(--neu-bg); color: var(--neu); font-size: 12px; font-variant-numeric: tabular-nums; }
.model-filter.active .filter-count { background: var(--sig); color: #FFFFFF; }
.filter-panel { position: absolute; left: 0; right: 0; top: 100%; padding-top: 8px; }
.filter-card { max-height: min(72vh, 680px); overflow: auto; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 18px 40px -14px rgba(22, 24, 29, 0.3); }
.filter-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.filter-actions { display: flex; gap: 8px; }
.filter-actions .btn-ghost { min-height: 40px; }
.filter-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px 32px; }
.filter-brand { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-brand legend { padding: 0 0 6px; font-size: 15px; font-weight: 700; }
.filter-link { position: absolute; top: -4px; right: 0; min-height: 32px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--sig); text-decoration: underline; text-underline-offset: 2px; }
.filter-line { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 8px; padding-block: 8px; border-top: 1px solid var(--line-2); }
.filter-line-name { padding-top: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.filter-models { display: flex; flex-wrap: wrap; gap: 6px; }
.fchk { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px 0 8px; border: 1px solid var(--control); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; cursor: pointer; }
.fchk input { width: 16px; height: 16px; margin: 0; accent-color: var(--sig); }
.fchk:has(input:checked) { border-color: var(--sig-soft); background: #EEF0F5; }
.fchk:has(input:not(:checked)) span { color: var(--muted); }
.fchk:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.filter-status { margin: 0; font-size: 13px; font-weight: 600; color: var(--sig); }
@media (max-width: 520px) {
  .filter-line { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .filter-line-name { padding-top: 0; }
}

/* ===== 레이아웃 ===== */
.main { display: flex; flex-direction: column; gap: 44px; }
.intro { display: flex; flex-direction: column; gap: 12px; padding-top: 40px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--sig); }
h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.lead { margin: 0; max-width: 640px; font-size: 16px; color: var(--ink-2); }
.section { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.stack-4 { display: flex; flex-direction: column; gap: 4px; }
.h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.h2 .count { font-size: 15px; font-weight: 500; color: var(--muted); }
.h2-sm { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.note { margin: 0; font-size: 13px; color: var(--muted); }
.note-sm { font-size: 13px; color: var(--muted); }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ===== 세그먼트 컨트롤 ===== */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--seg); border-radius: var(--r-md); }
.seg button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; color: var(--neu); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 24, 29, 0.14); }
.btn-ghost { min-height: 46px; padding: 0 14px; border: 1px solid var(--control); border-radius: var(--r-md); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--ink-2); }

/* ===== 빠른 비교 ===== */
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.preset .t { font-size: 15px; font-weight: 600; }
.preset .s { font-size: 12px; color: var(--muted); }
.preset:hover { border-color: var(--sig); }
.preset[aria-pressed="true"] { background: var(--sig); border-color: var(--sig); color: #FFFFFF; }
.preset[aria-pressed="true"] .s { color: var(--sig-soft); }
/* 추가: 휴대폰에서는 빠른 비교를 한 줄로 옆으로 넘겨 고른 모델 카드(가격 버튼)까지의 거리를 줄인다 */
@media (max-width: 520px) {
  .presets { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .presets::-webkit-scrollbar { display: none; }
  .preset { flex: 0 0 auto; max-width: 72%; scroll-snap-align: start; }
}

/* ===== 라인업 매트릭스 ===== */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: 20px; align-items: start; }
.panel { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.panel-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mx-head, .mx-row { display: grid; grid-template-columns: minmax(84px, 112px) repeat(var(--cols, 3), minmax(0, 1fr)); }
.mx-head { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mx-head span { padding: 8px; }
.mx-head span:first-child { padding-left: 18px; }
.mx-head .now { color: var(--sig); font-weight: 600; }
.mx-row { border-bottom: 1px solid var(--line-2); }
.mx-row:last-child { border-bottom: 0; }
.mx-label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 8px 10px 18px; border-right: 1px solid var(--line-2); }
.mx-label b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.gen-link { min-height: 32px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--sig); text-decoration: underline; text-underline-offset: 2px; }
.mx-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 6px; }
.mx-empty { padding: 12px 6px; font-size: 13px; color: var(--faint); }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 48px; padding: 6px 8px 6px 10px; text-align: left; border: 1px solid var(--control); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.chip:hover { border-color: var(--ink-2); }
.chip-text { display: flex; flex-direction: column; min-width: 0; }
.chip .name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.chip-meta { font-size: 11px; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--slot); border-color: var(--slot); color: #FFFFFF; }
.chip[aria-pressed="true"] .chip-meta { color: #FFFFFF; }
.chip .letter { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #FFFFFF; border-radius: 6px; font-size: 11px; font-weight: 600; }
/* 추가: 4개가 찼을 때 고르지 않은 칩. 누르면 선택 바에 안내가 나온다 */
.chip[aria-disabled="true"] { opacity: 0.45; }
.chip[aria-disabled="true"]:hover { border-color: var(--control); }

@media (max-width: 520px) {
  /* 추가: 연도 열이 넷이면(출시일 미확인 열) 칩을 더 줄이지 않고 표를 옆으로 넘긴다 */
  .mx { overflow-x: auto; }
  .mx-head, .mx-row { grid-template-columns: 64px repeat(var(--cols, 3), minmax(84px, 1fr)); }
  .mx-head span:first-child, .mx-label { padding-left: 12px; }
  .mx-cell { padding: 6px 4px; }
  .chip { padding: 6px 6px 6px 8px; }
  .chip-meta { font-size: 10.5px; }
  .chip .letter { display: none; }
}

/* ===== 하단 선택 바 ===== */
.tray-wrap { position: sticky; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 5; }
/* 개요는 라인업이 비교 화면 위에 있어 '비교 보기'가 아래로 간다 */
.lineup-above .tray-link svg { transform: rotate(180deg); }
.tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; background: var(--sig); color: #FFFFFF; border-radius: 14px; box-shadow: 0 8px 24px rgba(26, 45, 81, 0.24); }
.tray-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tray-count { font-size: 13px; font-weight: 600; }
.tray-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px 4px 6px; border: 0; border-radius: 8px; background: var(--sig-chip); color: #FFFFFF; font-size: 12px; cursor: pointer; }
.tray-chip:hover { background: #46577A; }
.tray-x { font-size: 15px; line-height: 1; opacity: 0.75; }
.tray-chip:hover .tray-x { opacity: 1; }
.tray-notice { flex-basis: 100%; margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--sig-chip); font-size: 13px; font-weight: 600; }
.tray-badge { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 600; }
.tray-link { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-sm); background: #FFFFFF; color: var(--sig); font-size: 13px; font-weight: 600; text-decoration: none; }
.tray-link:hover { color: var(--sig); background: var(--sig-soft); }

/* ===== 비교: 공통 ===== */
.compare-body { display: flex; flex-direction: column; gap: 20px; }
.compare-empty { padding: 56px 24px; border: 1px dashed #C9CDD3; border-radius: var(--r-lg); text-align: center; font-size: 15px; color: var(--muted); }
.compare-empty p { margin: 0 0 12px; }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.badge { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--slot); color: #FFFFFF; font-size: 13px; font-weight: 600; }
.badge-sm { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.badge-xs { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.pill { padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pill-xs { padding: 1px 6px; border-radius: 5px; font-size: 11px; }
.tone-up { color: var(--up); background: var(--up-bg); }
.tone-down { color: var(--down); background: var(--down-bg); }
.tone-neu { color: var(--neu); background: var(--neu-bg); }
.tone-same { color: var(--same); background: transparent; }

/* ===== 선택 모델 카드 ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.model-card { gap: 14px; padding: 16px; }
.mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mc-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc-name { display: flex; flex-direction: column; min-width: 0; }
.mc-name h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.mc-name h3 a { text-decoration: none; }
.mc-name h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mc-name span { font-size: 12px; color: var(--muted); }
.icon-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.mc-diff { display: flex; flex-direction: column; gap: 8px; }
.mc-base { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.price-row span { font-size: 12px; color: var(--muted); }
.price-row strong { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-primary { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); background: var(--sig); color: #FFFFFF; font-size: 14px; font-weight: 600; text-decoration: none; }
.btn-primary:hover { background: var(--sig-chip); color: #FFFFFF; }
.btn-secondary { min-height: 44px; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink-2); }
.btn-outline { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--sig); border-radius: var(--r-sm); background: var(--surface); color: var(--sig); font-size: 13px; font-weight: 600; text-decoration: none; }
.btn-outline:hover { background: var(--sig); color: #FFFFFF; }
.tcell .btn-outline { align-self: stretch; }
/* 추가: 모델 페이지 이름·색상 아래 가격 버튼과 상세표 모델 이름 옆 작은 쿠팡 링크 */
.buy-row { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; }
.buy-row .btn-primary { min-height: 48px; font-size: 15px; }
.thead-buy { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sig); text-decoration: none; white-space: nowrap; }
.thead-buy:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== 실제 크기 비율 ===== */
/* 추가: 크기 그림 배율. 앱은 mm(--w·--h)만 넘긴다. 격자 한 칸은 늘 10mm */
.size-card { --mm: 1.5px; --grid: calc(var(--mm) * 10); gap: 18px; padding: 20px; }
.size-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.size-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.stage {
  border-radius: var(--r-md);
  background-color: #FBFBFC;
  background-image: linear-gradient(#ECEEF1 1px, transparent 1px), linear-gradient(90deg, #ECEEF1 1px, transparent 1px);
  background-size: var(--grid, 15px) var(--grid, 15px); /* 1.5px/mm × 10mm. 추가: 라인업 선반은 축척에 맞춰 --grid를 넣는다 */
}
.stage-side { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; justify-content: safe center; gap: 28px 48px; padding: 28px 16px 20px; overflow-x: auto; background-attachment: local; }
.stage-overlay { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 20px 48px; padding: 24px 16px 20px; }
/* 추가: 겹쳐 보기 묶음. 폴더블이 있으면 펼친 모습·접은 모습 묶음을 따로 둔다. 묶음 안 그림은 아래 가운데를 맞춘다 */
.ov-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ov-shapes { position: relative; width: calc(var(--w) * var(--mm)); height: calc(var(--h) * var(--mm)); }
.sil-fig { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.sil-box { position: relative; flex: none; width: calc(var(--w) * var(--mm)); height: calc(var(--h) * var(--mm)); border: 2px solid var(--slot); border-radius: var(--r, 16px); background: var(--surface); }
.stage-overlay .sil-box { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: transparent; }
/* 추가: 화면을 색상 근사색 그러데이션으로 칠한다(예전 디자인). 테두리는 비교 슬롯 색 그대로 */
.sil-box.painted { box-shadow: 0 10px 18px -10px rgba(22, 24, 29, 0.35); }
.sil-screen { position: absolute; inset: 2px; border-radius: max(0px, calc(var(--r, 16px) - 4px)); }
.hinge { position: absolute; opacity: 0.45; }
.sil-box.painted .hinge { border-color: rgba(255, 255, 255, 0.85); opacity: 1; }
.hinge-h { left: 6px; right: 6px; top: 50%; border-top: 2px dashed var(--slot); }
.hinge-v { top: 6px; bottom: 6px; left: 50%; border-left: 2px dashed var(--slot); }
/* 추가: 폴더블은 펼친 모습과 접은 모습을 아래쪽을 맞춰 나란히 둔다. 좁으면 접은 모습이 아래로 내려간다 */
.sil-pair { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px 18px; }
.sil-part { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sil-tag { font-size: 11px; font-weight: 600; color: var(--muted); }
.sil-cap { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sil-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.sil-dims { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.legend-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; }
.legend-swatch { width: 14px; height: 14px; border: 2px solid var(--slot); border-radius: 4px; }
.legend-item b { font-weight: 600; white-space: nowrap; }
.bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px 36px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.bar-group { display: flex; flex-direction: column; gap: 10px; }
.bar-title { display: flex; align-items: baseline; gap: 8px; }
.bar-title h4 { margin: 0; font-size: 14px; font-weight: 600; }
.bar-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 92px; align-items: center; gap: 10px; }
.bar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--ink-2); }
.bar-track { display: block; height: 10px; overflow: hidden; border-radius: 5px; background: var(--line-2); }
.bar-fill { display: block; height: 100%; border-radius: 5px; }
.bar-val { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.bar-val.is-best { font-weight: 600; }

/* ===== 상세 사양표 ===== */
.table-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.table-scroll { overflow-x: auto; }
/* 열 너비: 항목명 열 + 모델 수(--n)만큼. 휴대폰 폭에서는 줄여 두 모델이 가로 스크롤 없이 들어가게 한다 */
.table { --label: 176px; --col: 184px; min-width: calc(var(--label) + var(--n, 1) * var(--col)); }
.trow { display: grid; grid-template-columns: var(--label) repeat(var(--n, 1), minmax(var(--col), 1fr)); border-bottom: 1px solid var(--line-2); }
/* 추가: 가로로 넘겨도 항목명 열과 묶음 이름은 왼쪽에 남긴다 */
.trow > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line-2); }
.thead > :first-child, .tfoot > :first-child { background: var(--surface-2); }
.tgroup h3 { position: sticky; left: 18px; }
.tgroup { scroll-margin-top: 72px; }
/* 추가: 표를 내려 읽을 때 화면 위에 붙는 모델 이름 줄(app.ts syncFloatHead) */
.thead-float { display: none; position: fixed; top: env(safe-area-inset-top, 0px); z-index: 15; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(22, 24, 29, 0.35); }
.thead-float.on { display: block; }
.thead-float .thead { border-bottom: 1px solid var(--line); }
.thead-float .tlabel { align-items: center; }
.thead { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.tlegend { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; }
.tlegend > span:first-child { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.legend-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.thead-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding: 14px 16px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.thead-cell a { text-decoration: none; }
.thead-cell a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tgroup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 18px; background: var(--bg); border-bottom: 1px solid var(--line); }
.tgroup h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.tgroup span { font-size: 12px; color: var(--muted); }
.tlabel { display: flex; align-items: flex-start; padding: 12px 18px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.tcell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px 16px; }
.tval { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tval .is-diff { font-weight: 600; }
.tval.tnone { color: var(--faint); }
.tval.tunknown, td.none.unknown { font-size: 13px; font-style: italic; }
.diff-dot { flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--sig); }
.tsub { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.delta { padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.delta.tone-same { padding-left: 0; }
.tfoot { background: var(--surface-2); border-bottom: 0; }
.tfoot .tlabel { align-items: center; }
/* 추가: 이 비교 안에서 상세 사양 묶음으로 바로 가기 */
.spec-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spec-jump span { margin-right: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.spec-jump a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--control); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--ink-2); text-decoration: none; }
.spec-jump a:hover { border-color: var(--ink-2); color: var(--ink); }
@media (max-width: 520px) {
  /* 휴대폰 폭에서는 1px/mm. 폴더블의 펼친 모습과 접은 모습이 한 줄에 들어간다(트라이폴드는 접은 모습이 아래로) */
  .size-card { --mm: 1px; padding: 16px; }
  .stage-side, .stage-overlay { gap: 24px 32px; padding-inline: 12px; }
  /* 두 모델이 320px 폭에서도 가로 스크롤 없이 들어가게 열 너비를 화면 폭으로 맞춘다(바깥 여백 16px×2·테두리·여유 포함 48px) */
  .table { --label: 76px; --col: max(100px, calc((100vw - 48px - var(--label)) / 2)); }
  .tlabel, .tlegend { padding: 10px 8px; }
  .tcell { padding: 10px 8px; }
  .thead-cell { gap: 6px; padding: 10px; font-size: 13px; }
  .tgroup { padding: 8px 10px; }
  .tgroup h3 { left: 10px; }
  .tval { font-size: 13px; }
}

/* ===== 추가: 값 표시(추정·실측 집계·출처 번호·색 견본) ===== */
em.est, em.bench { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
em.est { color: var(--est); background: var(--est-bg); }
em.bench { color: var(--bench); background: var(--bench-bg); }
sup a { margin-left: 1px; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; }
sup a:hover { color: var(--sig); }
.sws { display: flex; flex-wrap: wrap; gap: 4px; }
.sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.16); }
.disclosure.small { font-size: 12px; }

/* ===== 추가: 라인업 선반(예전 디자인). 라인별 최신 모델이 같은 선 위에 서고 이름은 선 아래 ===== */
.shelf { gap: 12px; margin: 0; padding: 20px; }
.shelf-row { display: flex; flex-wrap: wrap; justify-content: center; justify-content: safe center; align-items: flex-end; gap: 24px 48px; padding: 28px 16px 14px; overflow-x: auto; background-attachment: local; }
.shelf-brand { display: flex; flex-direction: column; gap: 6px; }
.shelf-brand > p { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.stands { position: relative; display: flex; align-items: flex-end; gap: 10px; font-size: 10.5px; }
.stands::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: calc(2.6em + 5px); height: 1.5px; border-radius: 2px; background: var(--ink-2); }
.stand { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.stand .sil { filter: drop-shadow(0 10px 10px rgba(22, 24, 29, 0.16)); transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); transform-origin: 50% 100%; }
.stand span { height: 2.6em; max-width: 60px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--ink-2); overflow-wrap: normal; }
.stand:hover .sil { transform: translateY(-6px); }
.stand:hover span { color: var(--sig); }
@media (prefers-reduced-motion: reduce) { .stand .sil { transition: none; } }

/* ===== 추가: 출처 ===== */
/* 길어서 접어 둔다. 값 옆 번호를 누르면 펼친다(app.ts) */
details.sources-card { display: block; padding: 0; }
.sources-card > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 20px; list-style: none; cursor: pointer; }
.sources-card > summary::-webkit-details-marker { display: none; }
.sources-card > summary::after { content: "펼치기"; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--sig); }
.sources-card[open] > summary::after { content: "접기"; }
.sources-card h3 { margin: 0; font-size: 17px; font-weight: 700; }
.sources-card .src-list { padding: 0 20px 20px; }
.src-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px 32px; }
.src-name { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.src-model ol { margin: 0; padding-left: 20px; font-size: 12px; color: var(--ink-2); }
.src-model li { padding-block: 1px; }
.src-model a { color: var(--ink-2); text-underline-offset: 2px; }
.src-model li:target { background: var(--up-bg); border-radius: 4px; }

/* ===== 추가: 모델 페이지 요약 ===== */
h1 .en { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px 20px; max-width: 880px; margin: 8px 0 0; }
.facts div { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts dd a { color: var(--sig); text-underline-offset: 2px; text-decoration-color: var(--sig-soft); }
.colors, .price-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.colors li, .price-list li { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 8px; font-size: 13px; background: var(--surface); border: 1px solid var(--control); border-radius: var(--r-sm); }
.colors li .sw { width: 16px; height: 16px; }
.colors img { max-height: 120px; width: auto; }
.price-list li { max-width: 100%; flex-wrap: wrap; padding-left: 12px; }
.price-list span { color: var(--muted); }
.price-list b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===== 추가: 항목 페이지 표 ===== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.filters label { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px 0 14px; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--control); border-radius: var(--r-md); }
.filters label:hover, .filters label:focus-within { border-color: var(--ink-2); }
.filters select { font: inherit; font-weight: 600; color: var(--ink); background: transparent; border: 0; padding: 4px; }
.tbl { display: flex; flex-direction: column; gap: 14px; }
.tbl > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.tbl > h2 span { font-size: 15px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
.compare th, .compare td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.compare thead th { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.compare thead th:first-child { position: sticky; left: 0; z-index: 2; }
.compare tbody th { position: sticky; left: 0; z-index: 1; min-width: 156px; background: var(--surface); font-weight: 400; box-shadow: 1px 0 0 var(--line-2); }
.compare tbody th a { display: block; text-decoration: none; }
.compare tbody th b { display: block; font-size: 14px; font-weight: 600; }
.compare tbody th span { font-size: 12px; color: var(--muted); }
.compare tbody th .sws { margin-top: 6px; gap: 2px; }
.compare tbody th .sws .sw { width: 8px; height: 8px; }
.compare tbody th a:hover b { color: var(--sig); text-decoration: underline; text-underline-offset: 2px; }
.compare .line-row th { padding: 10px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: none; }
.compare tr.m:hover th, .compare tr.m:hover td { background: var(--surface-2); }
.compare td { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.compare td.none { color: var(--faint); }
.compare td.shape { padding-block: 10px; }
.cv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.v { white-space: nowrap; font-variant-numeric: tabular-nums; }
.v b { font-weight: 600; }
.v i { font-style: normal; font-size: 0.78em; font-weight: 500; color: var(--muted); margin-left: 2px; }
small { font-size: 13px; color: var(--muted); }
.d { padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d.tone-same { padding-left: 0; }
.bar { position: relative; display: block; height: 6px; margin-top: 8px; min-width: 64px; overflow: hidden; background: var(--line-2); border-radius: 3px; }
.bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--sig); border-radius: inherit; }
th button { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
th button::after { content: " ↕"; color: var(--faint); }
th button:hover { color: var(--ink); }
th[aria-sort] button { color: var(--sig); }
th[aria-sort="ascending"] button::after { content: " ↑"; color: var(--sig); }
th[aria-sort="descending"] button::after { content: " ↓"; color: var(--sig); }
.buy { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--sig); border-radius: var(--r-sm); font-size: 12px; font-weight: 600; color: var(--sig); text-decoration: none; }
.buy:hover { background: var(--sig); color: #FFFFFF; }
/* 항목 표의 실루엣(SVG): 화면은 공식 색상명 근사색 */
.sil { display: block; max-width: 100%; height: auto; overflow: visible; }
.sil .body { fill: var(--surface); stroke: var(--sig); stroke-width: 1.5; }
.sil .glass { fill: #E3E6EC; }
.sil .fold { stroke: var(--sig); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.45; }
.sil.painted .fold { stroke: rgba(255, 255, 255, 0.85); opacity: 1; }
.sil-none { padding: 24px 12px; font-size: 12px; text-align: center; color: var(--muted); border: 1px dashed var(--control); border-radius: var(--r-md); }

/* ===== 푸터 ===== */
.site-footer { margin-top: 56px; }
.site-footer .inner { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.site-footer p { margin: 0; max-width: 820px; }

@media (max-width: 760px) {
  .intro { padding-top: 28px; }
  .compare th, .compare td { padding: 10px 12px; }
  .compare tbody th { min-width: 128px; }
  .bar-row { grid-template-columns: 96px minmax(0, 1fr) 84px; }
}