/* 2026-10 redesign v4: "Nightly Build": a verified directory that reads
   like a status page. Light on :root, dark when the OS asks for it.

   Order: 1 tokens · 2 base · 3 shell · 4 hero · 5 toolbar · 6 sections ·
   7 rows · 8 discovery · 9 panels (purposes, months, saved) · 10 footer ·
   11 detail · 12 other pages · 13 responsive · 14 utilities.

   Contracts kept for the i18n pass, the client script and the tests:
   deal, title, body, dfacts, fact, condition-summary, evidence, badge,
   advanced-filters, discovery, slot, consumer-conditions, saved-link …
   Rows use one grid; .row-main/.dfacts/.row-foot are display: contents so
   their children land in fixed columns. Unknown values stay hatched. */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
    "Noto Sans CJK KR", "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  /* Latin digits from a system mono; Hangul falls through to Pretendard. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "DejaVu Sans Mono", "Pretendard Variable", Pretendard, monospace;
  /* surfaces (Toss Design System TDS palette) */
  --canvas: #f9fafb; --surface: #ffffff; --surface-2: #f2f4f6; --surface-3: #e5e8eb;
  --glass: rgba(249, 250, 251, .88);
  --line: #e5e8eb; --line-strong: #d1d6db; --hatch: rgba(25, 31, 40, .055);
  /* text: Toss Grey 900 / 700 / 500 */
  --ink: #191f28; --ink-2: #4e5968; --ink-3: #6b7684;
  /* brand: Toss Blue */
  --brand: #3182f6; --brand-2: #1b64da; --brand-ink: #1b64da; --on-brand: #ffffff;
  --brand-soft: rgba(49, 130, 246, .08); --brand-line: rgba(49, 130, 246, .28);
  --glow-a: rgba(49, 130, 246, .16); --glow-b: rgba(27, 100, 218, .10);
  --glow-c: rgba(49, 130, 246, .07); --grid-line: rgba(25, 31, 40, .04);
  /* states */
  --ok: #027a48;
  --warn: #b45309; --warn-soft: #fff8eb; --warn-line: #f3c677;
  --risk: #e11d48; --risk-soft: #ffecee; --risk-line: #f9a8b0;
  /* monogram hues (letter colour; the tile tint is mixed from it; >= 4.7:1 on it) */
  --h0: #1b64da; --h1: #047857; --h2: #0369a1; --h3: #4338ca;
  --h4: #be185d; --h5: #b53d0b; --h6: #955a06; --h7: #48730e;
  --tile-mix: 10%;
  /* shape + depth */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow-pop: 0 18px 44px -14px rgba(25, 31, 40, .22), 0 0 0 1px var(--line-strong);
  --shadow-bar: 0 8px 22px -14px rgba(25, 31, 40, .18);
  --row-hover: linear-gradient(90deg, rgba(49, 130, 246, .045), rgba(25, 31, 40, .012) 60%, transparent);
  /* type scale (px names) */
  --fs-11: .6875rem; --fs-12: .75rem; --fs-13: .8125rem; --fs-135: .84375rem;
  --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem; --fs-17: 1.0625rem;
  --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem;
  /* layout */
  --content: 1120px; --read: 760px; --gutter: 24px;
  --pad-x: max(var(--gutter), calc((100% - var(--content)) / 2));
  --toolbar-h: 60px;
  /* verified row grid (desktop) */
  --c-tile: 56px; --c-pay: 212px; --c-due: 140px; --c-state: 104px;
  --c-save: 48px; --c-chev: 16px; --row-pad-y: 13px; --row-pad-x: 16px;
  /* aliases read by /assets/revenue.css (compare pages, offer panel) */
  --text: var(--ink); --muted: var(--ink-2); --faint: var(--ink-3);
  --accent: var(--brand-ink); --accent-strong: var(--brand-ink);
  --accent-soft: var(--brand-soft); --on-accent: var(--on-brand);
  --on-ink: var(--canvas); --rule: var(--line-strong); --font-mono: var(--mono);
  --st-warn: var(--warn); --st-warn-bg: var(--warn-soft); --st-warn-line: var(--warn-line);
  --st-unknown: var(--ink-3); --st-ad: #1b64da; --st-ad-bg: #f2f6fc; --st-ad-line: #c9e2ff;
  --fs-label: var(--fs-13); --fs-sm: var(--fs-14); --fs-body: var(--fs-15);
  --fs-lead: var(--fs-17); --fs-title: 1.1875rem; --fs-h2: var(--fs-20);
  --fs-h1: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --radius: var(--r-sm); --tap: 2.75rem; --w-read: var(--read);
  /* icons (masks; coloured by background: currentColor) */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.6 4.9L6.9 9.6 4.5 7.3 3.4 8.4l3.5 3.4 5.8-5.8z'/%3E%3C/svg%3E");
  --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.6 3.6 5.4 3.6 8.5s-1.1 5.9-3.6 8.5c-2.5-2.6-3.6-5.4-3.6-8.5s1.1-5.9 3.6-8.5z'/%3E%3C/svg%3E");
  --i-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3.5 1.75h9v12.5L8 11 3.5 14.25z'/%3E%3C/svg%3E");
  --i-mark-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3.5 1.75h9v12.5L8 11 3.5 14.25z'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M19.5 19.5l-4.6-4.6'/%3E%3C/svg%3E");
  --i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8l-4 4 4 4M15.5 8l4 4-4 4M13.5 5.5l-3 13'/%3E%3C/svg%3E");
  --i-term: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M7.5 9.5L10.5 12l-3 2.5M12.5 14.5h4'/%3E%3C/svg%3E");
  --i-api: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
  --i-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4'/%3E%3C/svg%3E");
  --i-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='14' rx='2.5'/%3E%3Cpath d='M17 10l4-2.5v9L17 14'/%3E%3C/svg%3E");
  --i-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='7' rx='2'/%3E%3Crect x='4' y='13' width='16' height='7' rx='2'/%3E%3Cpath d='M8 7.5h.01M8 16.5h.01'/%3E%3C/svg%3E");
  --i-db: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cellipse cx='12' cy='6' rx='7' ry='2.8'/%3E%3Cpath d='M5 6v12c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8V6M5 12c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #101318; --surface: #171b22; --surface-2: #1e242d; --surface-3: #272e3a;
    --glass: rgba(16, 19, 24, .85);
    --line: #242b35; --line-strong: #333c4a; --hatch: rgba(255, 255, 255, .06);
    --ink: #f2f4f6; --ink-2: #b0b8c1; --ink-3: #8b95a1;
    --brand: #4593fc; --brand-2: #3182f6; --brand-ink: #64a8ff; --on-brand: #ffffff;
    --brand-soft: rgba(69, 147, 252, .12); --brand-line: rgba(69, 147, 252, .34);
    --glow-a: rgba(69, 147, 252, .22); --glow-b: rgba(49, 130, 246, .14);
    --glow-c: rgba(49, 130, 246, .08); --grid-line: rgba(255, 255, 255, .035);
    --ok: #20c997;
    --warn: #f2b54a; --warn-soft: rgba(242, 181, 74, .10); --warn-line: rgba(242, 181, 74, .42);
    --risk: #ff7b87; --risk-soft: rgba(255, 99, 112, .12); --risk-line: rgba(255, 123, 135, .40);
    --h0: #64a8ff; --h1: #3ddc97; --h2: #38bdf8; --h3: #818cf8;
    --h4: #f472b6; --h5: #fb923c; --h6: #facc15; --h7: #a3e635;
    --tile-mix: 15%;
    --shadow-pop: 0 18px 48px -12px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-strong);
    --shadow-bar: 0 10px 28px -16px rgba(0, 0, 0, .9);
    --row-hover: linear-gradient(90deg, rgba(69, 147, 252, .075), rgba(255, 255, 255, .018) 55%, rgba(255, 255, 255, .012));
    --st-ad: #64a8ff; --st-ad-bg: rgba(49, 130, 246, .10); --st-ad-line: rgba(100, 168, 255, .32);
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 var(--fs-15)/1.6 var(--font); overflow-wrap: anywhere;
  font-feature-settings: "ss06" 1; -webkit-font-smoothing: antialiased; }
/* Korean breaks between words; Japanese and Chinese keep their own rules. */
:lang(ko) { word-break: keep-all; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
time, .num, .n, .cnt { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--brand); color: var(--on-brand); }
.wrap { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
/* Every main block shares one centred measure; full-bleed bands opt out. */
main > * { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
main > .hero, main > .toolbar, main > .toolbar-sentinel { width: auto; margin-inline: 0; }
/* Compare pages (revenue.css): reading blocks start at the content edge. */
main > .rev-back { width: auto; margin-left: var(--pad-x); }
main > .rev-intro, main > .rev-reading, main > .rev-policy, main > .rev-note,
main > .rev-shortfall, main > .rev-sponsor { margin-left: var(--pad-x); margin-right: auto; }
.badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 4px 7px; border-radius: var(--r-xs); background: var(--surface-3);
  color: var(--ink-2); font: 600 var(--fs-11)/1 var(--font); letter-spacing: .01em; }
.badge.svc { color: var(--ink); }
.badge.verified { background: var(--brand-soft); color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--brand-line); }
.badge.verified::before { content: ""; width: 11px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat;
          mask: var(--i-check) center / contain no-repeat; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.unverified { background: transparent; color: var(--warn); border: 1px dashed var(--warn-line); padding: 3px 6px; }
.badge.unverified::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px dashed currentColor; }
.badge.risk, .badge.warn.risk { background: var(--risk-soft); color: var(--risk); box-shadow: inset 0 0 0 1px var(--risk-line); }
.badge.gray { background: var(--surface-3); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge.gray::before { content: ""; width: 6px; height: 6px; background: currentColor; }
/* "기타" (other) carries no information; the badge keeps its text for search. */
.badge[data-cat="기타"] { display: none; }

/* ---------- 3. Shell ---------- */
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px;
  border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand); font-weight: 700; }
.skip:focus { top: 10px; }
.wrap > header { position: relative; z-index: 60; display: flex; align-items: center; gap: 8px;
  min-height: 60px; padding-inline: var(--pad-x); border-bottom: 1px solid var(--line);
  background: var(--surface); }
.brand { display: flex; align-items: center; gap: 28px; flex: 1; min-width: 0; }
.logo { display: inline-flex; align-items: center; gap: 2px; flex: none;
  font: 800 var(--fs-20)/1 var(--font); letter-spacing: -.03em; color: var(--ink); }
.logo .accent { display: inline-grid; place-items: center; height: 26px; padding: 0 6px; margin-left: 2px;
  border-radius: 7px; color: var(--on-brand);
  background: var(--brand); box-shadow: 0 4px 12px -2px var(--glow-a); }
.hnav { display: flex; gap: 4px; }
.hnav a { padding: 7px 12px; border-radius: 999px; font-size: var(--fs-14); font-weight: 500; color: var(--ink-2);
  white-space: nowrap; transition: color .15s, background .15s; }
.hnav a:hover { color: var(--ink); background: var(--surface-2); }
.hnav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.desktop-nav { min-width: 0; }
.saved-link { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 34px; padding: 0 6px 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: var(--fs-13); color: var(--ink-2); white-space: nowrap; transition: border-color .15s, color .15s; }
.saved-link:hover { color: var(--ink); border-color: var(--ink-3); }
.saved-link svg { width: 14px; height: 14px; flex: none; }
.saved-link .n { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px;
  border-radius: 6px; background: var(--surface-3); font: 600 var(--fs-12)/1 var(--mono); color: var(--ink); }
.mobile-menu { display: none; position: relative; }
.mobile-menu > summary, .lang-picker > summary { list-style: none; display: inline-flex; align-items: center;
  gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-13);
  color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.mobile-menu > summary::-webkit-details-marker, .lang-picker > summary::-webkit-details-marker { display: none; }
.mobile-menu > summary:hover, .lang-picker > summary:hover, .mobile-menu[open] > summary,
.lang-picker[open] > summary { background: var(--surface-2); color: var(--ink); }
.lang-picker > summary::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--i-globe) center / contain no-repeat;
          mask: var(--i-globe) center / contain no-repeat; }
.lang-picker > summary::after, .mobile-menu > summary::after { content: ""; width: 6px; height: 6px;
  margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .7; }
.language-menu { position: relative; flex: none; }
.lang-list { display: none; }
.lang-picker[open] .lang-list, .mobile-menu[open] .hnav { position: absolute; right: 0; top: calc(100% + 8px);
  z-index: 70; min-width: 180px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.lang-list a, .mobile-menu .hnav a { padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-14); color: var(--ink-2); }
.lang-list a:hover { background: var(--surface-2); color: var(--ink); }
.lang-list a[aria-current="page"] { color: var(--brand-ink); font-weight: 600; }
main > .translation-notice { margin: 12px auto 0; padding: 8px 12px; border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm); font-size: var(--fs-12); color: var(--ink-3); }

/* ---------- 4. Hero (home) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 26px var(--pad-x) 24px;
  background: radial-gradient(640px 300px at 4% -40%, var(--glow-a), transparent 70%),
    radial-gradient(760px 280px at 42% -70%, var(--glow-b), transparent 72%),
    radial-gradient(520px 260px at 88% 115%, var(--glow-c), transparent 70%), var(--canvas); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 120% at 20% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 120% at 20% 0%, #000 20%, transparent 75%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-line) 25%, var(--line) 60%, transparent); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: center; }
.hero h1 { font: 700 var(--fs-30)/1.25 var(--font); letter-spacing: -.028em; }
.hero h1 .hl { color: var(--brand-ink); }
.hero-trust { margin-top: 8px; font-size: var(--fs-15); color: var(--ink-2); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.stat { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: var(--fs-13); color: var(--ink-2); white-space: nowrap; }
a.stat { transition: border-color .15s; }
a.stat:hover { border-color: var(--ink-3); }
.stat .v { font: 600 var(--fs-13)/1 var(--mono); color: var(--ink); }
.stat--ok .v { color: var(--ok); }
.stat--new .v { color: var(--warn); }
.stat--ok::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--ok); }
.stat--new::before { content: ""; width: 7px; height: 7px; border-radius: 2px; border: 1.5px dashed var(--warn); }
.pulse { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--brand); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--brand);
  opacity: 0; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .8; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
.hero-log { border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 24px 48px -28px var(--glow-a);
  font: 400 var(--fs-12)/1.5 var(--mono); color: var(--ink-2); overflow: hidden; }
.log-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.log-head .dots { display: inline-flex; gap: 5px; }
.log-head .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.log-lines { padding: 8px 12px 10px; display: grid; gap: 3px; }
.log-lines li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.log-lines .ok { color: var(--ok); }
.log-lines .host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-lines .ts { color: var(--ink-3); }
.log-lines .last { color: var(--ink-3); grid-template-columns: 14px auto 1fr; }
.log-lines .last .ok { color: var(--brand-2); }
.caret { width: 7px; height: 13px; background: var(--brand); align-self: center; animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- 5. Toolbar: search, section chips, filter panel (sticky) ---------- */
.toolbar-sentinel { height: 1px; margin-bottom: -1px; }
.toolbar { position: sticky; top: 0; z-index: 50; background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.toolbar.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-bar); }
.toolbar-in { display: flex; align-items: center; gap: 10px; min-height: var(--toolbar-h); padding: 11px var(--pad-x); }
.search { position: relative; flex: 0 0 300px; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 8px 0 11px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface-2); cursor: text; transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent); }
.search .ico { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-14); }
.search input::placeholder { color: var(--ink-3); opacity: 1; }
.search input:focus-visible { outline: none; }
.search input:disabled { cursor: not-allowed; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* One visible way back to the full list while a search or filter is active. */
.qclear { position: relative; flex: none; width: 26px; height: 26px; margin-right: -2px; padding: 0; border: 0;
  border-radius: var(--r-xs); background: transparent; color: var(--ink-3); transition: color .15s, background .15s; }
.qclear::before, .qclear::after { content: ""; position: absolute; left: 7px; right: 7px; top: calc(50% - .75px); height: 1.5px;
  border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.qclear::after { transform: rotate(-45deg); }
.qclear:hover { color: var(--ink); background: var(--surface-3); }
.qclear[hidden], .search:has(.qclear:not([hidden])) .kbd { display: none; }
.kbd { flex: none; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-xs);
  font: 500 var(--fs-11)/1 var(--mono); color: var(--ink-3); }
.search:focus-within .kbd { opacity: 0; }
.chips { position: relative; flex: 1; min-width: 0; }
.chips-track { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.chips-track::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-135); font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s; }
.chip .n { font: 500 var(--fs-12)/1 var(--mono); color: var(--ink-3); }
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip.is-active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--ink); font-weight: 700; }
.chip.is-active .n { color: var(--brand-ink); }
.chip--new { position: relative; margin-left: 6px; }
.chip--new::before { content: ""; position: absolute; left: -5px; top: 9px; bottom: 9px; width: 1px; background: var(--line-strong); }
.chip--new .n { color: var(--warn); }
.chip--new.is-active { background: var(--warn-soft); border-color: var(--warn-line); }
.chip--new.is-active .n { color: var(--warn); }
.chips::before, .chips::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 28px;
  pointer-events: none; opacity: 0; transition: opacity .2s; }
.chips::before { left: 0; background: linear-gradient(90deg, var(--canvas), transparent); }
.chips::after { right: 0; background: linear-gradient(270deg, var(--canvas), transparent); }
.chips.fade-l::before, .chips.fade-r::after { opacity: 1; }
.advanced-filters { position: relative; flex: none; }
.advanced-filters > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  font-size: var(--fs-135); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.advanced-filters > summary::-webkit-details-marker { display: none; }
.advanced-filters > summary .ico { width: 16px; height: 16px; flex: none; }
.advanced-filters > summary:hover, .advanced-filters[open] > summary { color: var(--ink); border-color: var(--ink-3); background: var(--surface-2); }
.advanced-filters.has-filters > summary { color: var(--ink); border-color: var(--brand-line); background: var(--brand-soft); }
.advanced-filters.has-filters > summary::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.filter-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 340px; max-width: calc(100vw - 32px);
  display: grid; gap: 14px; padding: 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-pop); }
.filter-h { font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cat-chips button { height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--fs-13); color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; }
.cat-chips button:hover { color: var(--ink); border-color: var(--ink-3); }
.cat-chips button.on { color: var(--ink); font-weight: 700; background: var(--brand-soft); border-color: var(--brand-line); }
.cat-chips button.reset { border-style: dashed; color: var(--ink); }
.filter-fields { display: grid; gap: 10px; }
.filter-fields label { display: grid; gap: 6px; font-size: var(--fs-13); color: var(--ink-2); }
.filter-fields select { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); }
.filter-fields select:disabled { opacity: .6; }
.remember-filter { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--ink-2); cursor: pointer; }
.remember-filter input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.filter-note { font-size: var(--fs-12); line-height: 1.55; color: var(--ink-3); }
.searchinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 var(--pad-x) 10px;
  font-size: var(--fs-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.searchinfo[hidden] { display: none; }
.searchinfo button { height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--fs-13); font-weight: 600; }
.nojs-note { margin: 0 var(--pad-x) 12px; padding: 10px 12px; border: 1px solid var(--warn-line); border-radius: var(--r-sm);
  background: var(--warn-soft); font-size: var(--fs-13); color: var(--ink); }

/* ---------- 6. Sections (home directory) ---------- */
.board { padding: 18px 0 8px; }
.sec, .discovery, #savedoffers, .board { scroll-margin-top: calc(var(--toolbar-h) + 10px); }
.sec + .sec, .purpose-strip + .sec, .sec + .purpose-strip { margin-top: 30px; }
.sec-head { display: grid; align-items: baseline; padding: 0 calc(var(--row-pad-x) + 1px) 10px;
  grid-template-columns: auto auto minmax(0, 1fr) var(--c-pay) var(--c-due) var(--c-state) calc(var(--c-save) + var(--c-chev)); }
.sec-idx { padding-right: 10px; font: 500 var(--fs-12)/1 var(--mono); color: var(--brand-ink); }
.sec-head h2, .disc-title h2 { display: inline-flex; align-items: baseline; gap: 8px;
  font: 700 var(--fs-17)/1.3 var(--font); letter-spacing: -.015em; white-space: nowrap; }
.sec-count { padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  font: 500 var(--fs-12)/1 var(--mono); color: var(--ink-3); transform: translateY(-1px); }
.sec-desc { margin-left: 12px; font-size: var(--fs-13); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-cols { display: contents; }
.sec-cols span { grid-row: 1; padding-left: 20px; font-size: var(--fs-12); color: var(--ink-3); }
/* Pinned: the descriptor cell may be hidden, auto-placement must not shift these. */
.sec-cols span:nth-child(1) { grid-column: 4; } .sec-cols span:nth-child(2) { grid-column: 5; }
.sec-cols span:last-child { grid-column: 6; text-align: right; }
.rows { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
#noresults { display: none; padding: 40px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  text-align: center; color: var(--ink-2); }
.board > #noresults { margin-top: 10px; }
.board.is-searching > .sec, .board.is-searching > .purpose-strip { display: none; }

/* ---------- 7. Rows ---------- */
/* 7a. Verified row: tile | kicker | title + benefit | 결제 | 기한 | 확인 | save | chevron */
.deal { position: relative; isolation: isolate; display: grid; align-items: start;
  grid-template-columns: var(--c-tile) auto minmax(0, 1fr) var(--c-pay) var(--c-due) var(--c-state) var(--c-save) var(--c-chev);
  grid-template-rows: auto auto auto; padding: var(--row-pad-y) var(--row-pad-x); transition: background .18s; }
.deal + .deal { border-top: 1px solid var(--line); }
.deal .row-main, .deal .dfacts, .deal .row-foot { display: contents; }
.deal:hover { background: var(--row-hover); }
.deal::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 0 2px 2px 0;
  background: var(--brand); opacity: 0; transform: scaleY(.4); transition: opacity .18s, transform .18s; }
.deal:hover::before, .deal:focus-within::before { opacity: 1; transform: none; }
.deal:has(.title:focus-visible) { box-shadow: inset 0 0 0 2px var(--brand); }
.tile { grid-column: 1; grid-row: 1 / 3; align-self: center; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px; --h: var(--h0);
  background: color-mix(in srgb, var(--h) var(--tile-mix), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 30%, transparent); }
.tile::before { content: attr(data-initial); font: 700 var(--fs-16)/1 var(--mono); color: var(--h); }
/* Small official favicon or monogram beside a service name; the name stays text. */
.bi { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-right: 6px;
  vertical-align: -4px; border-radius: 5px; --h: var(--h0);
  background-color: color-mix(in srgb, var(--h) var(--tile-mix), var(--surface)); }
.bi::before { content: attr(data-initial); font: 700 10px/1 var(--mono); color: var(--h); }
/* A light tile keeps dark logos visible in dark mode. */
:is(.bi, .tile, .sim-tile, .svc-mark)[data-bi] { background-color: #fff; background-position: center; background-repeat: no-repeat;
  background-size: 72%; box-shadow: inset 0 0 0 1px var(--line); }
:is(.bi, .tile, .sim-tile, .svc-mark)[data-bi]::before { content: ""; }
:is(.v4-insp-svc, .v4-mob-top) .bi { margin-right: 0; }
.svc-link--plain { display: inline-flex; align-items: center; font-weight: 600; color: var(--ink); }
.svc-link > .bi { margin-right: 6px; }
/* Hues are shared by row tiles and the service directory's monograms. */
:is(.tile, .bi, .svclist a, .svcmini a, .svc-mark)[data-hue="1"] { --h: var(--h1); } :is(.tile, .bi, .svclist a, .svcmini a, .svc-mark)[data-hue="2"] { --h: var(--h2); }
:is(.tile, .bi, .svclist a, .svcmini a, .svc-mark)[data-hue="3"] { --h: var(--h3); } :is(.tile, .bi, .svclist a, .svcmini a, .svc-mark)[data-hue="4"] { --h: var(--h4); }
:is(.tile, .bi, .svclist a, .svcmini a, .svc-mark)[data-hue="5"] { --h: var(--h5); } :is(.tile, .bi, .svclist a, .svcmini a, .svc-mark)[data-hue="6"] { --h: var(--h6); }
:is(.tile, .bi, .svclist a, .svcmini a, .svc-mark)[data-hue="7"] { --h: var(--h7); }
.row-kicker { grid-column: 2; grid-row: 1; align-self: center; display: flex; gap: 4px; margin-right: 8px; }
.deal .t { grid-column: 3; grid-row: 1; min-width: 0; font: 600 var(--fs-15)/22px var(--font);
  letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal .title { color: var(--ink); }
.deal .title::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.deal .title:focus-visible { outline: none; }
.t-tail { color: var(--ink-3); font-weight: 500; }
.deal:hover .t-name { text-decoration: underline; text-decoration-color: var(--brand-line);
  text-underline-offset: 4px; text-decoration-thickness: 1px; }
.deal .fact dt { margin-top: 2px; font-size: var(--fs-12); line-height: 16px; color: var(--ink-3); font-weight: 500; }
.deal .fact--benefit dt, .sec .deal .fact dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.deal .fact--benefit { grid-column: 2 / 4; grid-row: 2; margin-top: 3px; padding-right: 8px; }
.deal .fact--benefit dd { min-height: 40px; font-size: var(--fs-135); line-height: 20px; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal:has(.condition-summary) .fact--benefit dd { min-height: 0; }
.deal .fact--pay, .deal .fact--due { grid-row: 1 / -1; padding-left: 20px; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.deal .fact--pay { grid-column: 4; }
.deal .fact--due { grid-column: 5; }
.deal .fact--pay dd, .deal .fact--due dd { margin-top: 1px; font-size: var(--fs-135); line-height: 20px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal .fact--pay dd { color: var(--ink); }
.deal .fact--pay .lead { margin: 0; font: inherit; font-weight: 600; color: var(--ink); }
.deal .fact--pay .rest { color: var(--ink-3); }
.deal .fact--due dd { color: var(--ink); font-weight: 500; }
/* Unknown is hatched: a value that must not be read as zero or "none". */
dd.absent, .deal .fact dd.absent { align-self: flex-start; display: inline-block; width: max-content; max-width: 100%;
  padding: 0 7px; border: 1px dashed var(--line-strong); border-radius: var(--r-xs); color: var(--ink-3);
  background: repeating-linear-gradient(135deg, transparent 0 4px, var(--hatch) 4px 5px);
  font-size: var(--fs-13); font-weight: 500; }
.deal .fact--benefit dd.absent { min-height: 0; }
.condition-summary { grid-column: 2 / 4; grid-row: 3; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.condition-summary:empty { display: none; }
.elig { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-12); font-weight: 500; }
.elig.cost { background: var(--warn-soft); color: var(--warn); }
.elig.warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.row-state { grid-column: 6; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 6px;
  height: 22px; padding-left: 12px; white-space: nowrap; }
/* In rows the check is a glyph; its words stay for assistive technology. */
.row-state .badge.verified { width: 15px; height: 15px; padding: 0; overflow: hidden; border-radius: 0;
  background: var(--ok); box-shadow: none; color: transparent; font-size: var(--fs-11); text-indent: 40px;
  -webkit-mask: var(--i-check) center / contain no-repeat;
          mask: var(--i-check) center / contain no-repeat; }
.row-state .badge.verified::before { display: none; }
.checked > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.checked time { font: 500 var(--fs-13)/1 var(--mono); color: var(--ink); }
.evidence { grid-column: 6; grid-row: 2; justify-self: end; position: relative; z-index: 1; margin-top: 3px; }
.src { padding: 2px 0; border-bottom: 1px solid transparent; font-size: var(--fs-12); font-weight: 500;
  color: var(--ink-3); white-space: nowrap; transition: border-color .15s, color .15s; }
.src:hover, .src:focus-visible { color: var(--brand-ink); border-bottom-color: currentColor; }
.deal:hover .src { color: var(--ink-2); }
.save-offer { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); font-size: var(--fs-13); font-weight: 500; white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s; }
.save-offer::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--i-mark) center / contain no-repeat;
          mask: var(--i-mark) center / contain no-repeat; }
.save-offer[aria-pressed="true"] { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
.save-offer[aria-pressed="true"]::before {
  -webkit-mask-image: var(--i-mark-on);
          mask-image: var(--i-mark-on); }
.save-offer:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-3); background: var(--surface-3); }
.save-offer:disabled { opacity: .55; cursor: default; }
/* Inside rows the save toggle is an icon button; its name is sr-only text. */
.deal .save-offer { width: 36px; height: 36px; padding: 0; border-color: transparent; }
.deal .save-offer[aria-pressed="true"] { border-color: var(--brand-line); }
.deal:not(.flat) .save-offer { grid-column: 7; grid-row: 1 / 3; align-self: center; justify-self: end; }
.deal:not(.flat)::after { content: ""; grid-column: 8; grid-row: 1 / 3; align-self: center; justify-self: end;
  width: 7px; height: 7px; margin-right: 2px; border: solid var(--ink-3); border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg); transition: transform .18s, border-color .18s; }
.deal:not(.flat):hover::after { border-color: var(--brand-ink); transform: translateX(2px) rotate(45deg); }
.deal.ended { opacity: .66; }
.deal.ended .t-name, .deal.ended .title { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.badge.sec-tag { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* 7b. Rows grouped by day (weekly, free, svc, past): the day is a ruled label;
   verified groups carry the column labels on the same line (desktop). */
.day { position: relative; }
.day > h2 { display: flex; align-items: center; gap: 8px; padding: 22px 2px 8px;
  font: 600 var(--fs-12)/1.4 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.day > h2::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.day:has(> .day-cols) > h2 { padding-right: calc(var(--c-pay) + var(--c-due) + var(--c-state) + var(--c-save) + var(--c-chev) + var(--row-pad-x) + 12px); }
.day-cols { position: absolute; top: 22px; right: calc(var(--row-pad-x) + 1px); display: grid;
  grid-template-columns: var(--c-pay) var(--c-due) var(--c-state) calc(var(--c-save) + var(--c-chev));
  font-size: var(--fs-12); line-height: 1.4; color: var(--ink-3); }
.day-cols span { padding-left: 20px; }
.day-cols span:nth-child(3) { text-align: right; }
.day .deal .fact dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.day > .deal { border-inline: 1px solid var(--line); background: var(--surface); }
.day > h2 + .deal, .day > .day-cols + .deal { border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.day > .deal:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.day > h2 + .deal:last-child, .day > .day-cols + .deal:last-child { border-radius: var(--r-lg); }
.results:empty { display: none !important; }
.rows-note { margin-top: 14px; font-size: var(--fs-13); color: var(--ink-3); }

/* 7c. Flat rows: records (archive, unverified): title, summary, one meta line. */
.deal.flat { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 16px; padding: 13px 14px 13px 18px; }
.deal.flat .t { grid-column: 1; grid-row: 1; white-space: normal; font-size: var(--fs-15); }
.deal.flat .body { grid-column: 1; grid-row: 2; margin-top: 2px; font-size: var(--fs-13); line-height: 20px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal.flat .meta { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 6px; font-size: var(--fs-12); line-height: 18px; color: var(--ink-2); }
.deal.flat .save-offer { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: -4px -4px 0 0; }
/* Meta in two lines: source, time and state; then the facts and the link. */
.deal.flat .meta::after { content: ""; order: 1; flex-basis: 100%; height: 0; margin-block: -2px; }
.deal.flat .meta > .slot { order: 2; }
.meta > .badge:has(+ [data-ts]) { order: -2; font: 600 var(--fs-11)/1 var(--mono); padding: 4px 6px;
  background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.meta > [data-ts] { order: -1; font: 500 var(--fs-12)/1 var(--mono); color: var(--ink-3); }
.meta > a { position: relative; z-index: 1; order: 9; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.meta > a:hover { color: var(--brand-ink); }
.slot { display: inline-flex; gap: 5px; min-width: 0; max-width: 100%; }
.slot .k { flex: none; font-weight: 600; color: var(--ink-3); }
.slot b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink-2); }
.slot.cost b { color: var(--ink); }
.slot.unknown b { padding: 0 6px; border: 1px dashed var(--line-strong); border-radius: 4px; color: var(--ink-3);
  background: repeating-linear-gradient(135deg, transparent 0 4px, var(--hatch) 4px 5px); }

/* ---------- 8. Discovery feed (unverified; a different material) ---------- */
.discovery { margin-top: 44px; }
.disc-head { display: flex; align-items: center; gap: 12px; margin: 0 2px 12px; }
.disc-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px;
  color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.disc-icon .ico { width: 18px; height: 18px; }
.disc-title { flex: 1; min-width: 0; }
.disc-title .sec-desc { margin: 2px 0 0; white-space: normal; }
.disc-title .sec-count { color: var(--warn); border-color: var(--warn-line); }
.finds { border: 1px dashed var(--warn-line); border-radius: var(--r-lg); overflow: hidden;
  background: repeating-linear-gradient(135deg, transparent 0 10px, var(--hatch) 10px 11px), color-mix(in srgb, var(--surface) 55%, transparent); }
.finds .day > h2 { padding: 9px 18px 7px; font: 500 var(--fs-12)/1.4 var(--mono); color: var(--ink-3); }
.finds .day > h2::after { border-top-style: dashed; border-color: var(--line-strong); }
.finds .day + .day > h2 { border-top: 1px dashed var(--line-strong); }
.finds .day > .deal, .finds .day > h2 + .deal, .finds .day > .deal:last-child { border: 0; border-radius: 0; background: none; }
.finds .deal + .deal { border-top: 1px dashed var(--line-strong); }
.finds .deal.flat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0;
  background: repeating-linear-gradient(180deg, var(--warn) 0 4px, transparent 4px 8px); opacity: .7; transform: none; }
.finds .deal.flat:hover { background: color-mix(in srgb, var(--warn-soft) 60%, transparent); }
.finds .deal.flat .title::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.finds .deal.flat:hover .title { text-decoration: underline; text-decoration-color: var(--warn-line); text-underline-offset: 4px; }
.find-more > summary { list-style: none; display: flex; justify-content: center; align-items: center; gap: 8px;
  height: 42px; margin-top: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font-size: var(--fs-14); font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.find-more > summary::-webkit-details-marker { display: none; }
.find-more > summary:hover { background: var(--surface-2); border-color: var(--ink-3); }
.find-more > summary .cnt { font: 500 var(--fs-13)/1 var(--mono); color: var(--warn); }
.find-more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.find-more[open] > summary { display: none; }
.find-more[open] > .finds { margin-top: 10px; }
.find-more-note { margin: 10px 2px 0; font-size: var(--fs-12); color: var(--ink-3); }
/* Record lists elsewhere (/svc) keep the collapsed disclosure. */
details.discovery { margin-top: 32px; }
details.discovery > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 0 14px; border: 1px dashed var(--warn-line); border-radius: var(--r-md); cursor: pointer;
  font-size: var(--fs-14); font-weight: 600; }
details.discovery > summary::-webkit-details-marker { display: none; }
details.discovery > summary::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--warn); }
details.discovery > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid var(--ink-3);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
details.discovery[open] > summary::after { transform: rotate(-135deg); }

/* ---------- 9. Panels: purposes, months, saved ---------- */
.purpose-strip { position: relative; }
.purpose-strip h2, .months-section > h2 { margin: 0 2px 10px; font: 700 var(--fs-16)/1.4 var(--font); letter-spacing: -.015em; color: var(--ink); }
.purpose-strip ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.purpose-strip li { position: relative; }
.purpose-strip li:has(> a[href$="/services"]) { position: absolute; right: 2px; top: 0; }
.purpose-strip li::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border: solid var(--ink-3); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); pointer-events: none; transition: transform .15s, border-color .15s; }
.purpose-strip li:hover::after { border-color: var(--brand); transform: translateX(2px) rotate(45deg); }
.purpose-strip li:has(> a[href$="/services"])::after { display: none; }
.purpose-strip a { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  align-content: center; column-gap: 12px; row-gap: 2px; min-height: 68px; padding: 12px 34px 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); box-shadow: 0 1px 2px rgba(25, 31, 40, .03);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.purpose-strip a:hover { border-color: var(--brand-line); background: var(--surface); transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(25, 31, 40, .10); }
.purpose-strip li:has(> a[href$="/services"]) a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px;
  background: transparent; border: 0; box-shadow: none; transform: none; }
.purpose-strip li:has(> a[href$="/services"]) a:hover { background: var(--brand-soft); transform: none; box-shadow: none; }
.purpose-strip a::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); align-self: center; transition: background .15s, box-shadow .15s; }
.purpose-strip a:hover::before { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.purpose-strip li:has(> a[href$="/services"]) a::before { display: none; }
.purpose-strip a::after { content: ""; position: absolute; left: 24px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: var(--ink-2); transition: background .15s;
  -webkit-mask: var(--icon, var(--i-search)) center / contain no-repeat;
          mask: var(--icon, var(--i-search)) center / contain no-repeat; }
.purpose-strip a:hover::after { background: var(--brand); }
.purpose-strip li:has(> a[href$="/services"]) a::after { position: static; width: 6px; height: 6px; margin: 0; background: none;
  -webkit-mask: none; mask: none; border: solid var(--brand); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.purpose-strip a[href$="/ai-coding"] { --icon: var(--i-term); }
.purpose-strip a[href$="/llm-api"] { --icon: var(--i-api); }
.purpose-strip a[href$="/ai-creative"] { --icon: var(--i-wave); }
.purpose-strip a[href$="/ai-video"] { --icon: var(--i-video); }
.purpose-strip a[href$="/compute"] { --icon: var(--i-code); }
.purpose-strip a[href$="/backend"] { --icon: var(--i-server); }
.purpose-strip a[href$="/database"] { --icon: var(--i-db); }
.purpose-strip .name { grid-column: 2; grid-row: 1; min-width: 0; font-size: var(--fs-14); font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.purpose-strip a:not(:has(.cnt)) .name { font-size: var(--fs-13); font-weight: 600; color: var(--brand); }
.purpose-strip a:not(:has(.cnt)):hover .name { color: var(--brand-2); }
.purpose-strip .preview { grid-column: 2 / 4; grid-row: 2; min-width: 0; font-size: var(--fs-12); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.purpose-strip .cnt { grid-column: 3; grid-row: 1; align-self: center; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-11); color: var(--ink-3); white-space: nowrap; }
.purpose-strip .cnt > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.purpose-strip .cnt b { padding: 2px 7px; border-radius: 999px; background: var(--surface-2);
  font: 600 var(--fs-11)/1.3 var(--mono); color: var(--ink-2); transition: background .15s, color .15s; }
.purpose-strip a:hover .cnt b { background: var(--brand-soft); color: var(--brand); }
.months-section { margin-top: 44px; }
.months { display: flex; flex-wrap: wrap; gap: 6px; }
.months a { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-13); color: var(--ink-2);
  font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s; }
.months a:hover { border-color: var(--brand-line); color: var(--ink); }
main > .browser-tools { margin-top: 32px; }
#savedoffers { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
#savedoffers > summary { list-style: none; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
  cursor: pointer; font-size: var(--fs-14); font-weight: 600; }
#savedoffers > summary::-webkit-details-marker { display: none; }
#savedoffers > summary::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--brand-ink);
  -webkit-mask: var(--i-mark) center / contain no-repeat;
          mask: var(--i-mark) center / contain no-repeat; }
#savedoffers > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid var(--ink-3);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
#savedoffers[open] > summary::after { transform: rotate(-135deg); }
#savedcount { padding: 4px 7px; border-radius: 6px; background: var(--surface-3); font: 600 var(--fs-12)/1 var(--mono); color: var(--ink); }
#savedoffers > :not(summary) { margin-inline: 14px; }
#savedlist { margin-top: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-14); color: var(--ink-2); }
.saved-items { display: grid; gap: 4px; }
.saved-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px 0; }
.saved-items li + li { border-top: 1px solid var(--line); }
.saved-items a { font-weight: 600; color: var(--ink); }
.saved-items a:hover { color: var(--brand-ink); }
.saved-state { grid-column: 1; font-size: var(--fs-12); color: var(--ink-3); }
.saved-state.is-missing, .saved-state.is-overdue { color: var(--warn); font-weight: 600; }
.saved-items .save-offer { grid-column: 2; grid-row: 1 / 3; }
#savedlist .save-offer[aria-pressed="true"] { color: var(--ink-2); background: transparent; border-color: var(--line-strong); }
#savedlist .save-offer::before { display: none; }
.browser-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; }
.browser-actions button { height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; font-size: var(--fs-13); color: var(--ink-2); }
.browser-actions button:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-3); }
.browser-actions button:disabled { opacity: .5; cursor: default; }
.storage-notice { margin-top: 8px; padding: 8px 12px; border: 1px solid var(--warn-line); border-radius: var(--r-sm);
  background: var(--warn-soft); font-size: var(--fs-12); color: var(--warn); }

/* ---------- 10. Footer ---------- */
footer { margin-top: 56px; padding: 28px var(--pad-x) 40px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 50%, transparent), transparent 70%);
  font-size: var(--fs-13); line-height: 1.7; color: var(--ink-3); }
footer p { max-width: 780px; }
footer p + p { margin-top: 6px; }
footer .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.foot-links a { color: var(--ink-2); font-weight: 500; }
.foot-links a:hover { color: var(--brand-ink); }

/* ---------- 11. Detail page (/d/{id}); article.post text is frozen, CSS only ---------- */
.detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 6px; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--ink-2); transition: color .15s; }
.back::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
.back:hover { color: var(--ink); }
main > .back { display: flex; width: min(100% - 2 * var(--gutter), var(--content)); margin-top: 28px; }
/* Two columns: the record on the left, a rail (primary link, then the
   verification card) on the right. The rail is placed by fixed rows from the
   top (1-3 = title block, 4+ = facts), so a held notice above the title or a
   missing lede never shifts it. */
article.post:not(.info) { display: grid; grid-template-columns: minmax(0, 1fr) 328px; column-gap: 40px; align-items: start; padding: 10px 0 8px; }
.post > * { grid-column: 1; }
.post > .policy-held { margin-top: 10px; }
.post > h1 { margin-top: 10px; font: 700 var(--fs-30)/1.3 var(--font); letter-spacing: -.028em; }
.post > .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
/* The category is said once by the page context; "기타" says nothing. */
/* With nothing left to show the row stays (the rail counts rows) but collapses. */
.post > .meta:not(:has(> :not([data-cat="기타"]))) { margin: 0 0 12px; }
.post .meta .badge { padding: 5px 8px; background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 var(--fs-12)/1 var(--mono); }
.post .meta .badge.svc { color: var(--ink); font-family: var(--font); font-weight: 600; }
.post .meta .badge.warn { color: var(--risk); box-shadow: inset 0 0 0 1px var(--risk-line); background: var(--risk-soft); }
.post > .lede { padding-bottom: 6px; font-size: var(--fs-17); line-height: 1.7; color: var(--ink-2); }
.note { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--fs-14); }
.note strong { margin-right: 8px; }
.post > p.note { border-color: var(--risk-line); background: var(--risk-soft); }
.post > p.note strong { color: var(--risk); }
.note.policy-held { border: 1px solid var(--warn-line); background: var(--warn-soft); }
.note.policy-held strong { display: flex; align-items: center; gap: 8px; color: var(--warn); font-size: var(--fs-15); }
.note.policy-held strong::before { content: ""; width: 9px; height: 9px; flex: none; background: currentColor; transform: rotate(45deg); }
.note.policy-held p { margin-top: 4px; color: var(--ink-2); }
[data-record-context] { color: var(--warn); }
.post > .dfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.post .dfacts .fact { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.post .dfacts .fact--benefit { grid-column: 1 / -1; border-color: var(--brand-line);
  background: linear-gradient(135deg, var(--brand-soft), transparent 60%), var(--surface); }
.post .dfacts dt { margin-bottom: 4px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); }
.post .dfacts dd { font-size: var(--fs-15); line-height: 1.65; color: var(--ink); font-variant-numeric: tabular-nums; }
.post .dfacts .fact--benefit dd { font-size: var(--fs-16); font-weight: 500; }
.post .qual { margin-top: 6px; font-size: var(--fs-12); line-height: 1.55; color: var(--ink-3); }
.post > .consumer-conditions, .post > .rev-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; }
.post .consumer-conditions h2, .post .rev-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 13px 18px;
  border-bottom: 1px solid var(--line); font: 700 var(--fs-15)/1.4 var(--font); letter-spacing: -.01em; }
.post .consumer-conditions h2::before, .post .rev-panel h2::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--brand); }
.post .consumer-conditions .facts, .post .rev-facts { display: grid; grid-template-columns: 148px minmax(0, 1fr); margin: 0; border: 0; }
.post .consumer-conditions .facts dt, .post .consumer-conditions .facts dd, .post .rev-row dt, .post .rev-row dd {
  padding: 10px 18px; border-top: 1px solid var(--line); border-bottom: 0; font-size: var(--fs-14); line-height: 1.6; }
.post .consumer-conditions .facts dt:first-of-type, .post .consumer-conditions .facts dd:first-of-type,
.post .rev-row:first-child dt, .post .rev-row:first-child dd { border-top: 0; }
.post .consumer-conditions .facts dt, .post .rev-row dt { padding-right: 8px; color: var(--ink-3); font-weight: 500; }
.post .consumer-conditions .facts dd { padding-left: 0; color: var(--ink-2); }
.post .rev-row { display: contents; }
.post .rev-row dd { justify-self: stretch; padding-left: 0; color: var(--ink); }
.post .rev-row dd.rev-unknown { display: block; margin-left: -18px; padding-left: 18px; border-radius: 0;
  color: var(--ink-3); font-weight: 500;
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hatch) 5px 6px); }
.post .eligfine, .post .rev-panel .rev-note { margin: 0; padding: 11px 18px; border-top: 1px solid var(--line); font-size: var(--fs-12);
  line-height: 1.6; color: var(--ink-3); background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
/* A standalone disclosure (featured referral) reads as a note, not a panel foot. */
.post > .rev-note { max-width: none; margin-top: 14px; padding: 11px 16px; border: 1px dashed var(--st-ad-line);
  border-radius: var(--r-md); background: var(--st-ad-bg); font-size: var(--fs-12); line-height: 1.6; color: var(--ink-2); }
.post > dl.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin-top: 14px; padding: 0 2px; font-size: var(--fs-13); }
.post > dl.facts dt { color: var(--ink-3); font-weight: 600; }
.post > dl.facts dd { color: var(--ink-2); }
.facts .code { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; color: var(--ink); }
.code-copy-btn { appearance: none; min-height: 24px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface-2); font-family: var(--sans, sans-serif); font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.code-copy-btn:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--surface); }
.facts a { color: var(--brand-ink); }
/* Right rail: CTA first, the verification card under it (sticky). */
.post > .srcline, .post > .rev-links { grid-column: 2; grid-row: 1 / span 3; align-self: end; display: grid; gap: 8px; margin: 0 0 6px; }
.post .srcline a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 16px;
  border-radius: var(--r-md); text-align: center; background: var(--brand);
  color: var(--on-brand); font-size: var(--fs-15); font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 8px 20px -10px var(--glow-a); transition: background .15s, transform .15s, box-shadow .15s; }
.post .srcline a:hover { background: var(--brand-2); transform: translateY(-1px); }
.post .evline.unverified + .srcline a, .post:has(.policy-held) .srcline a { background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong); }
.post .srcline .cap { text-align: center; font-size: var(--fs-12); color: var(--ink-3); }
/* Disclosed referral offers (revenue_ui.render_links): verification status sits
   at the top of the rail (rows 1-2, top-aligned alongside title/meta) and
   the CTA + invite card sit directly below it (row 3+, top-aligned) so there is
   never an empty gap between h1 and .meta or between .evline and .rev-links. */
.post:has(> .rev-links) > .evline { grid-row: 1 / span 2; align-self: start; position: static; margin: 4px 0 6px; }
.post > .rev-links { grid-row: 3 / span 7; align-self: start; margin-top: 4px; }
.post > .rev-links .rev-official-wrap { display: grid; gap: 8px; justify-items: stretch; }
.post .rev-links .rev-official { min-height: 48px; padding: 6px 16px; border: 0; border-radius: var(--r-md);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-15); letter-spacing: -.01em; box-shadow: 0 8px 20px -10px var(--glow-a); transition: background .15s, transform .15s; }
.post .rev-links .rev-official:hover { background: var(--brand-2); color: var(--on-brand); transform: translateY(-1px); }
.post .rev-links .rev-cap { text-align: center; font-size: var(--fs-12); color: var(--ink-3); }
.post .rev-links .rev-actions { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--st-ad-line);
  border-radius: var(--r-md); background: var(--st-ad-bg); font-size: var(--fs-12); }
.post .rev-actions > p { font-size: var(--fs-12); line-height: 1.55; color: var(--ink-2); }
.post .rev-action { gap: 6px; font-size: var(--fs-12); color: var(--ink-2); }
.post .rev-action a { width: 100%; min-height: 38px; font-size: var(--fs-13); }
.post .rev-action .rev-unknown { padding: 0 6px; font-weight: 500; }
.post > .evline { grid-column: 2; grid-row: 4 / span 6; position: sticky; top: 16px; margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--brand-line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--brand-soft), transparent 55%), var(--surface);
  font-size: var(--fs-13); line-height: 1.75; color: var(--ink-2); }
.evline .st { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--fs-15); font-weight: 700; color: var(--ink); }
.evline .st::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--ok);
  -webkit-mask: var(--i-check) center / contain no-repeat;
          mask: var(--i-check) center / contain no-repeat; }
.evline time { font: 500 var(--fs-13)/1 var(--mono); color: var(--ink); white-space: nowrap; }
.evline .sep { margin: 0 6px; color: var(--ink-3); }
.evline .note { margin-top: 10px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; font-size: var(--fs-12); line-height: 1.6; color: var(--ink-3); }
.post > .evline.unverified { border-color: var(--warn-line); background: linear-gradient(160deg, var(--warn-soft), transparent 55%), var(--surface); }
.evline.unverified .st { color: var(--warn); }
.evline.unverified .st::before { width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; background: none;
  border: 1.5px dashed currentColor; -webkit-mask: none; mask: none; }
.post > .desc { position: relative; margin-top: 22px; padding: 38px 18px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 70%, var(--canvas)); font-size: var(--fs-14); line-height: 1.75; color: var(--ink-2); }
.post > .desc::before { content: ""; position: absolute; left: 16px; top: 15px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-3); box-shadow: 13px 0 0 var(--surface-3), 26px 0 0 var(--surface-3); }
.post > .desc::after { content: ""; position: absolute; left: 0; right: 0; top: 30px; border-top: 1px solid var(--line); }
.post > .desc p + p { margin-top: 2px; }
/* Writer-only notes ("publish_caution: …") stay in the record, off screen. */
.post > .desc p[data-internal] { display: none; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); font-weight: 700; }
.links a.primary { border: 0; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); }
.guide { margin-top: 20px; font-size: var(--fs-14); color: var(--ink-2); }
.guide h2 { font-size: var(--fs-16); color: var(--ink); }
.guide p, .guide ol { margin-top: 10px; }
.guide ol { padding-left: 20px; list-style: decimal; }
.guide li + li { margin-top: 6px; }
.guide strong { color: var(--ink); }
.guide a, .post .desc a { color: var(--brand-ink); }
.guide code, .spotlight code { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.guide-fig { margin: 12px 0 4px; }
.guide-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.guide-fig figcaption { margin-top: 6px; font-size: var(--fs-12); color: var(--ink-3); }
.guide-fine { font-size: var(--fs-12); color: var(--ink-3); }
.post .provenance { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.post .provenance > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; height: 48px;
  padding: 0 16px; cursor: pointer; font-size: var(--fs-14); font-weight: 600; }
.post .provenance > summary::-webkit-details-marker { display: none; }
.post .provenance > summary::after { content: ""; width: 7px; height: 7px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.post .provenance[open] > summary::after { transform: rotate(-135deg); }
.post .provenance .facts { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 6px 12px; margin: 0; padding: 4px 16px 10px; font-size: var(--fs-13); }
.post .provenance .facts dt { color: var(--ink-3); }
.post .provenance .facts dd { color: var(--ink-2); }
.post .provenance .facts time { font-family: var(--mono); }
.post .provenance .note { margin: 0; padding: 0 16px 14px; border: 0; background: none; font-size: var(--fs-12); color: var(--ink-3); }
.timestamp-label { font-weight: 600; }
.post > .back { margin-top: 22px; justify-self: start; }
.detail-bar .save-offer { height: 34px; }

/* ---------- 12. Other pages ---------- */
.intro { padding-top: 28px; }
.intro h1, .rev-intro h1 { font: 700 var(--fs-h1)/1.3 var(--font); letter-spacing: -.025em; }
.intro p { max-width: var(--read); margin-top: 8px; font-size: var(--fs-15); color: var(--ink-2); }
.intro a { color: var(--brand-ink); }
p.lead { margin-top: 8px; font-size: var(--fs-15); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.eligfine { margin-top: 6px; font-size: var(--fs-12); color: var(--ink-3); }
.empty { margin-top: 24px; padding: 48px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  text-align: center; color: var(--ink-2); background: var(--surface); }
.empty strong, .empty h1 { display: block; margin-bottom: 8px; font-size: var(--fs-20); color: var(--ink); }
.empty a { display: inline-flex; margin-top: 12px; font-weight: 700; color: var(--brand-ink); }
/* 404: a status-page card: the code, the sentence, one primary way back. */
.notfound { margin-top: 40px; padding: 44px 20px 36px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, var(--hatch) 10px 11px), var(--surface); }
.nf-code { font: 700 var(--fs-13)/1 var(--mono); letter-spacing: .2em; color: var(--warn); margin-bottom: 14px; }
.notfound h1 { font-size: var(--fs-24); letter-spacing: -.02em; }
.notfound .nf-home { align-items: center; height: 44px; margin-top: 20px; padding: 0 18px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.nf-links a { height: 34px; margin: 0; align-items: center; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); }
.nf-links a:hover { color: var(--ink); border-color: var(--ink-3); }
.spotlight { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--brand-line); border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-soft), transparent 60%), var(--surface); }
.spotlight h2 { margin-top: 8px; font-size: var(--fs-20); line-height: 1.35; }
.spotlight p { margin-top: 8px; font-size: var(--fs-14); color: var(--ink-2); }
.spotlight .cta { display: inline-flex; align-items: center; height: 40px; margin-top: 12px; padding: 0 16px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); font-weight: 700; }
/* Text pages (about, api) read from the content edge like every other page. */
main > .post.info { max-width: var(--read); margin-left: var(--pad-x); margin-right: auto; padding: 28px 0 8px; }
.post.info > h1 { margin-top: 0; font-size: var(--fs-h1); }
.info h2 { margin-top: 28px; font-size: var(--fs-17); }
.info p, .info ul { margin-top: 10px; color: var(--ink-2); }
.info ul:not(.legend) { padding-left: 20px; list-style: disc; }
.info ul:not(.legend) li + li { margin-top: 4px; }
.info a { color: var(--brand-ink); }
.legend { display: grid; border-top: 1px solid var(--line); }
.legend li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 12px 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-14); }
.legend .badge { justify-self: start; white-space: normal; }
/* Service directory: a dense grid of monogram cards (long list, scannable). */
.svclist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); gap: 10px; margin-top: 20px; }
.svclist a { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
  min-height: 68px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 1px 2px rgba(25, 31, 40, .03);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; --h: var(--h0); }
.svclist a::before { content: attr(data-initial); grid-row: 1 / 4; align-self: start; margin-top: 2px; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; font: 700 var(--fs-14)/1 var(--mono); color: var(--h);
  background: color-mix(in srgb, var(--h) var(--tile-mix), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 24%, transparent); }
.svclist a:hover { border-color: var(--brand-line); background: var(--surface); transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(25, 31, 40, .10); }
.svclist a > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-14); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.svclist .count { grid-column: 2; min-width: 0; font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.svclist a:not([data-verified="0"]) .count > span:first-child { color: var(--ok); font-weight: 600; }
.svc-h2 { margin-top: 28px; font-size: var(--fs-17); }
.svc-none { margin-top: 10px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-2); }
/* Service directory tools: find by name, narrow by kind, jump by initial. */
.svc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.svc-tools .search { flex: 1 1 280px; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); background: var(--surface); }
.svc-tools .search:focus-within { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.svc-tools .chips { flex: 1 1 100%; }
.svc-result { margin: 0; font: 500 var(--fs-12)/1 var(--mono); color: var(--ink-3); }
.svc-result:empty { display: none; }
.svc-empty { margin-top: 16px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-2); }
/* Official-site favicons from one sprite, on a light tile so dark logos stay visible in dark mode. */
.svclist a[data-ico]::before { content: ""; box-sizing: border-box; padding: 6px;
  background: var(--svc-sprite) calc(var(--ix) * -24px) calc(var(--iy) * -24px) / calc(var(--svc-cols) * 24px) auto no-repeat content-box content-box, #fff;
  box-shadow: inset 0 0 0 1px var(--line); }
.svc-index { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 2px; }
.svc-index a { min-width: 30px; height: 30px; padding: 0 6px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; font: 600 var(--fs-12)/1 var(--mono); color: var(--ink-2); }
.svc-index a:hover { border-color: var(--brand-line); color: var(--ink); }
.svc-letter { margin-top: 18px; scroll-margin-top: 88px; }
.svc-letter h3 { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font: 700 var(--fs-14)/1 var(--mono); color: var(--ink-3); }
.svcmini { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 2px 14px; }
.svcmini a { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  min-height: 36px; padding: 6px 8px; border-radius: 8px; color: var(--ink-2); font-size: var(--fs-14); --h: var(--h0); }
.svcmini a::before { content: attr(data-initial); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px;
  font: 700 10px/1 var(--mono); color: var(--h); background: color-mix(in srgb, var(--h) var(--tile-mix), var(--surface)); }
.svcmini a[data-ico]::before { content: ""; box-sizing: border-box; padding: 2px;
  background: var(--svc-sprite) calc(var(--ix) * -16px) calc(var(--iy) * -16px) / calc(var(--svc-cols) * 16px) auto no-repeat content-box content-box, #fff;
  box-shadow: inset 0 0 0 1px var(--line); }
.svcmini a > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svcmini .n { font: 500 var(--fs-12)/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.svcmini a:hover { background: var(--surface-2); color: var(--ink); }
.svc-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.svc-head > :not(.svc-mark) { grid-column: 2; }
.svc-mark { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font: 700 var(--fs-17)/1 var(--mono); color: var(--h); --h: var(--h0);
  background: color-mix(in srgb, var(--h) var(--tile-mix), var(--surface)); }
.svc-mark::before { content: attr(data-initial); }
.svc-mark[data-ico] { box-sizing: border-box; padding: 6px;
  background: var(--svc-sprite) calc(var(--ix) * -32px) calc(var(--iy) * -32px) / calc(var(--svc-cols) * 32px) auto no-repeat content-box content-box, #fff;
  box-shadow: inset 0 0 0 1px var(--line); }
.svc-mark[data-ico]::before { content: ""; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1100px) {
  :root { --c-pay: 184px; --c-due: 120px; }
  .hero-in { grid-template-columns: minmax(0, 1fr) 300px; }
  .sec-desc { display: none; }
  .disc-title .sec-desc { display: block; }
}
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-log { display: none; }
  .purpose-strip ul { grid-template-columns: 1fr 1fr; }
  article.post:not(.info) { grid-template-columns: 1fr; }
  .post > .srcline, .post > .rev-links, .post > .evline { grid-column: 1; grid-row: auto; position: static; }
  /* Lift the CTA and the verification card right under the key facts. */
  .post > .dfacts ~ * { order: 3; }
  .post > .srcline, .post > .rev-links { order: 1; margin-top: 16px; align-self: stretch; }
  .post > .evline, .post:has(> .rev-links) > .evline { order: 2; grid-row: auto; margin-top: 10px; }
}
@media (max-width: 860px) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .search { flex-basis: 220px; }
  .advanced-filters .lbl { display: none; }

  /* Rows switch to the stacked band layout here: below this the desktop
     columns leave the title too little room. */
  .sec-head { display: flex; flex-wrap: wrap; align-items: baseline; padding: 0 2px 8px; }
  /* Headings wrap here: longer locale strings must never overflow. */
  .sec-head h2, .disc-title h2 { flex-wrap: wrap; white-space: normal; }
  .sec-desc, .disc-title .sec-desc { display: block; flex: 1 0 100%; margin: 1px 0 0; font-size: var(--fs-12); line-height: 17px; white-space: normal; }
  .sec-cols { display: none; }
  .rows { border-radius: var(--r-md); }

  /* Row: tile + title + save / benefit / band 결제 | 기한 | 확인 (values over captions). */
  .deal { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 42px 36px; grid-template-rows: repeat(6, auto); column-gap: 0; }
  .deal:not(.flat)::after { display: none; }
  .deal:not(.flat)::before { display: block; position: static; grid-column: 1 / -1; grid-row: 5 / 7; z-index: -1; align-self: stretch;
    width: auto; height: auto; margin-top: 8px; border-radius: var(--r-sm); opacity: 1; transform: none;
    background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .tile { grid-column: 1; grid-row: 2; align-self: start; width: 24px; height: 24px; margin-top: -1px; border-radius: 7px; }
  .tile::before { font-size: var(--fs-12); }
  .row-kicker { grid-column: 2 / -1; grid-row: 1; flex-wrap: wrap; margin: 0 0 6px; }
  .deal .t { grid-column: 2 / 5; grid-row: 2; padding-right: 6px; line-height: 22px; white-space: normal; text-wrap: pretty;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .deal:not(.flat) .save-offer { grid-column: 5; grid-row: 2; align-self: start; margin: -7px -8px -7px 0; }
  .deal .fact--benefit { grid-column: 1 / -1; grid-row: 3; margin-top: 3px; padding-right: 0; }
  .deal .fact--benefit dd { min-height: 0; font-size: var(--fs-13); line-height: 19.5px; }
  .condition-summary { grid-column: 1 / -1; grid-row: 4; }
  .deal .fact--pay, .deal .fact--due { grid-row: 5 / 7; min-width: 0; margin-top: 8px; padding: 6px 8px 6px 10px; }
  .deal .fact--pay { grid-column: 1 / 3; }
  .deal .fact--due { grid-column: 3; border-left: 1px solid var(--line); }
  .day-cols { display: none; }
  .day:has(> .day-cols) > h2 { padding-right: 2px; }
  .deal .fact--pay dt, .sec .deal .fact--pay dt, .day .deal .fact--pay dt,
  .deal .fact--due dt, .sec .deal .fact--due dt, .day .deal .fact--due dt { position: static; width: auto; height: auto;
    overflow: hidden; clip-path: none; font-size: var(--fs-11); line-height: 15px; white-space: nowrap; text-overflow: ellipsis; }
  /* Two lines: the 결제 qualifier stays visible, so a "무료" lead never hides a paid condition. */
  .deal .fact--pay dd, .deal .fact--due dd { margin-top: 0; font-size: var(--fs-13); line-height: 19px; -webkit-line-clamp: 2; }
  .deal dd.absent { padding: 0 5px; font-size: var(--fs-12); line-height: 17px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .row-state { grid-column: 4 / 6; grid-row: 5; justify-self: stretch; justify-content: flex-start; gap: 5px; height: auto;
    margin-top: 8px; padding: 6px 8px 0 10px; border-left: 1px solid var(--line); line-height: 19px; }
  .row-state .badge.verified { width: 13px; height: 13px; }
  .checked time { font-size: var(--fs-13); line-height: 19px; }
  .evidence { grid-column: 4 / 6; grid-row: 6; justify-self: stretch; min-width: 0; margin: 0; padding: 0 8px 6px 10px; border-left: 1px solid var(--line); }
  .src { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0; overflow: hidden;
    font-size: var(--fs-11); line-height: 15px; white-space: normal; }

  .deal.flat { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 8px; padding: 11px 10px 12px 16px; }
  .deal.flat .t { grid-column: 1; -webkit-line-clamp: 3; }
  .deal.flat .body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .deal.flat .save-offer { grid-column: 2; grid-row: 1; }
  .deal.flat .meta { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --toolbar-h: 98px; --row-pad-x: 14px; --row-pad-y: 12px; }
  body { font-size: var(--fs-14); }
  .wrap > header { min-height: 52px; gap: 4px; }
  .brand { gap: 8px; }
  .logo { font-size: var(--fs-17); }
  .logo .accent { height: 23px; padding: 0 4px; border-radius: 6px; }
  .saved-link { height: 32px; padding: 0 4px 0 8px; gap: 5px; }
  .saved-link .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-menu > summary, .lang-picker > summary { height: 32px; padding: 0 8px; }
  .lang-picker > summary::before { width: 16px; height: 16px; }

  .hero { padding: 14px var(--pad-x); }
  .hero h1 { font-size: 1.1875rem; line-height: 1.4; letter-spacing: -.03em; }
  /* Always two lines: the web font and its fallback break the same way (no shift on swap). */
  .hero h1 > span { display: block; }
  .hero-trust { margin-top: 6px; font-size: var(--fs-13); line-height: 1.55; }
  .hero-stats { gap: 6px; margin-top: 10px; }
  .stat { height: 28px; padding: 0 9px; font-size: var(--fs-12); }
  .stat .v { font-size: var(--fs-12); }
  .hero-stats li:last-child { flex-basis: 100%; }
  .stat--live { height: auto; padding: 0; border: 0; background: none; white-space: normal; flex-wrap: wrap; }

  .toolbar-in { flex-wrap: wrap; gap: 8px; padding: 8px var(--pad-x) 6px; }
  .search { flex: 1 1 0; height: 40px; }
  .qclear { width: 32px; height: 32px; margin-right: -4px; }
  .qclear::before, .qclear::after { left: 9px; right: 9px; }
  .kbd { display: none; }
  .advanced-filters { order: 1; }
  .advanced-filters > summary { width: 44px; height: 40px; padding: 0; justify-content: center; }
  .advanced-filters.has-filters > summary::after { position: absolute; top: 6px; right: 6px; }
  .chips { order: 2; flex: 0 0 calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); }
  .chips-track { padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); }
  .chip { padding: 0 10px; font-size: var(--fs-13); }
  .chips::before { background: linear-gradient(90deg, var(--canvas) 30%, transparent); }
  .chips::after { width: 40px; background: linear-gradient(270deg, var(--canvas) 30%, transparent); }
  .filter-panel { position: fixed; left: 16px; right: 16px; top: auto; width: auto; max-width: none; margin-top: 8px; }

  .board { padding-top: 14px; }
  .sec + .sec, .purpose-strip + .sec, .sec + .purpose-strip { margin-top: 24px; }
  .sec-head h2 { font-size: var(--fs-16); line-height: 22px; }

  .purpose-strip ul { grid-template-columns: 1fr; gap: 8px; }
  .purpose-strip li:has(> a[href$="/services"]) { position: static; justify-self: end; margin-top: 2px; }
  .purpose-strip a { height: auto; min-height: 58px; column-gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto; padding: 10px 30px 10px 12px; }
  .purpose-strip a::before { width: 32px; height: 32px; border-radius: 8px; }
  .purpose-strip a::after { left: 19px; width: 16px; height: 16px; margin-top: -8px; }
  .purpose-strip .name { font-size: var(--fs-13); line-height: 1.35; }

  .disc-head { align-items: flex-start; }
  .months-section, .discovery { margin-top: 36px; }
  main > .browser-tools { margin-top: 24px; }
  footer { margin-top: 40px; padding: 24px var(--pad-x) 32px; font-size: var(--fs-12); }

  .post > h1 { font-size: var(--fs-24); line-height: 1.38; }
  .post > .lede { font-size: var(--fs-15); }
  .post > .dfacts { grid-template-columns: 1fr; gap: 8px; }
  .post .consumer-conditions .facts, .post .rev-facts, .post .provenance .facts { grid-template-columns: 96px minmax(0, 1fr); }
  .post .consumer-conditions .facts dt, .post .consumer-conditions .facts dd, .post .rev-row dt, .post .rev-row dd { padding-block: 9px; font-size: var(--fs-13); }
  .post .consumer-conditions .facts dt, .post .rev-row dt { padding-left: 14px; }
  .post .consumer-conditions .facts dd, .post .rev-row dd { padding-right: 14px; }
  .post > .desc { padding: 36px 14px 14px; font-size: var(--fs-13); }
  .legend li { grid-template-columns: minmax(0, 1fr); }
  .links a { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 14. Utilities and no-script ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.ico { display: block; }
/* Controls that only work with script stay hidden without it; the note says
   what still works. Section chips are plain anchors and stay. */
html:not(.js) .save-offer, html:not(.js) .saved-link, html:not(.js) .advanced-filters,
html:not(.js) .browser-actions, html:not(.js) .kbd { display: none; }
html:not(.js) .toolbar { position: static; }
html:not(.js) :is(.sec, .discovery, #savedoffers, .board) { scroll-margin-top: 10px; }
html.js .nojs-note { display: none; }

/* ---------- Similar deals (web/similar.py) ---------- */
.similar { margin-top: 28px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.similar[hidden] { display: none; }
.board > .similar { margin-top: 10px; }
.similar-head h2 { margin: 0; font: 700 var(--fs-17)/1.4 var(--font); letter-spacing: -.012em; color: var(--ink); }
.similar-head p { margin: 4px 0 0; font-size: var(--fs-14); line-height: 1.6; color: var(--ink-2); }
.similar-follow { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-13); font-weight: 600;
  color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.similar-follow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.similar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.similar-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas); transition: border-color .15s, background .15s; }
.similar-item:hover { border-color: var(--brand-line); background: var(--row-hover), var(--canvas); }
.sim-tile { --h: var(--h0); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--h) var(--tile-mix), var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 30%, transparent); }
.sim-tile::before { content: attr(data-initial); font: 700 var(--fs-15)/1 var(--mono); color: var(--h); }
.sim-tile[data-hue="1"] { --h: var(--h1); } .sim-tile[data-hue="2"] { --h: var(--h2); } .sim-tile[data-hue="3"] { --h: var(--h3); }
.sim-tile[data-hue="4"] { --h: var(--h4); } .sim-tile[data-hue="5"] { --h: var(--h5); } .sim-tile[data-hue="6"] { --h: var(--h6); }
.sim-tile[data-hue="7"] { --h: var(--h7); }
.similar-main { min-width: 0; }
.similar-kicker { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 3px; font-size: var(--fs-12); color: var(--ink-3); }
.similar-kicker .sim-group { font-family: var(--mono); }
.similar-kicker .sim-check { color: var(--ok); }
.similar-kicker .sim-check::before { content: "✓ "; }
.similar-title { display: block; font-size: var(--fs-15); font-weight: 600; line-height: 1.45; color: var(--ink); }
.similar-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.similar-title:focus-visible { outline: none; }
.similar-item:has(.similar-title:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.similar-benefit { margin: 3px 0 0; font-size: var(--fs-13); line-height: 1.55; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Partner slot: its own box after the organic list, never a list item. */
.similar-ad { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--st-ad-line);
  border-radius: var(--r-md); background: var(--st-ad-bg); font-size: var(--fs-14); }
.similar-ad-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.similar-ad-label { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 700 var(--fs-12)/1 var(--font); color: var(--st-ad); background: var(--surface); box-shadow: inset 0 0 0 1px var(--st-ad-line); }
.similar-ad-partner { font-size: var(--fs-13); color: var(--ink-2); }
.similar-ad-title { font-weight: 600; color: var(--ink); }
.similar-ad p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.similar-ad a.similar-ad-cta { justify-self: start; font-weight: 600; color: var(--st-ad); text-decoration: underline; text-underline-offset: 3px; }
.similar-ad .similar-ad-note { font-size: var(--fs-12); color: var(--ink-3); }
@media (max-width: 640px) {
  .similar { padding: 14px; }
  .similar-list { grid-template-columns: 1fr; }
}

/* ---------- 15. One scannable list (scan-20261005) ---------- */
:root { --o-sn: 184px; --o-pay: 136px; --o-cond: 184px; --o-chk: 76px; --o-save: 36px; --o-gap: 16px; }
@media (max-width: 1100px) { :root { --o-sn: 148px; --o-pay: 116px; --o-cond: 150px; --o-chk: 64px; --o-gap: 12px; } }

/* Hero: one compact line of identity and state, no widget or glow. */
.hero { padding: 18px var(--pad-x) 12px; background: var(--canvas); overflow: visible; isolation: auto; }
.hero::before, .hero::after { content: none; }
.hero-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.hero h1 { font: 700 var(--fs-24)/1.25 var(--font); letter-spacing: -.025em; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: var(--fs-13); color: var(--ink-3); }
.hero-meta .stat { display: inline-flex; align-items: baseline; gap: 6px; height: auto; padding: 0; border: 0;
  background: none; font-size: var(--fs-13); color: var(--ink-3); }
.hero-meta .stat::before { content: none; }
.hero-meta .stat .v { font: 600 var(--fs-13)/1.4 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hero-meta a.stat:hover .v { color: var(--brand-ink); }

/* Field chips are filter buttons now. */
button.chip { background: transparent; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--ink); font-weight: 700; }
html:not(.js) .chips { display: none; }

/* List head: the one place that says the list is officially checked. */
.board { padding: 10px 0 8px; }
.list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 0 2px 8px; }
.list-head h2 { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--fs-16)/1.4 var(--font); letter-spacing: -.01em; }
.list-head h2::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--ok);
  -webkit-mask: var(--i-check) center / contain no-repeat;
          mask: var(--i-check) center / contain no-repeat; }
.list-head .sec-count { flex: none; white-space: nowrap; transform: none; }
.list-head h2 > span:first-child { min-width: 0; }
.list-sort { font-size: var(--fs-12); font-weight: 500; color: var(--ink-3); }
.list-cols { display: grid; column-gap: var(--o-gap); padding: 0 17px 6px;
  grid-template-columns: var(--o-sn) minmax(0, 1fr) var(--o-pay) var(--o-cond) var(--o-chk) var(--o-save);
  font-size: var(--fs-12); font-weight: 500; color: var(--ink-3); }
.list-cols span:last-child { grid-column: 5 / 7; text-align: right; padding-right: calc(var(--o-save) + var(--o-gap)); }
.board.is-searching > .olist, .board.is-searching > .more-rows { display: none; }
.board > #noresults { margin-top: 0; }

/* Row grid: service | headline + benefit | pay | known terms | check, source | save. */
.deal:not(.flat) { grid-template-columns: var(--o-sn) minmax(0, 1fr) var(--o-pay) var(--o-cond) var(--o-chk) var(--o-save);
  grid-template-rows: auto auto auto; column-gap: var(--o-gap); row-gap: 0; padding: 12px 16px; align-items: start; }
.deal:not(.flat)::after { content: none; }
.deal:not(.flat) .sn { grid-column: 1; grid-row: 1 / span 2; align-self: start; min-width: 0; font: 600 var(--fs-14)/22px var(--font); color: var(--ink);
  letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal:not(.flat) .sn .sn-link { position: relative; z-index: 1; display: inline-flex; align-items: center; max-width: 100%;
  padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: var(--fs-13); font-weight: 600;
  text-decoration: none !important; transition: background .15s, color .15s; }
.deal:not(.flat) .sn .sn-link:hover { background: var(--brand-soft); color: var(--brand-ink); }
.deal:not(.flat) .row-kicker { grid-column: 1; grid-row: 3; flex-wrap: wrap; margin: 4px 0 0; }
.deal:not(.flat) .t { grid-column: 2; grid-row: 1; font: 650 var(--fs-15)/22px var(--font); letter-spacing: -.012em; color: var(--ink);
  white-space: normal; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal:not(.flat) .fact > dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.deal:not(.flat) .fact--benefit { grid-column: 2; grid-row: 2; margin: 2px 0 0; padding: 0; }
.deal:not(.flat) .fact--benefit dd { min-height: 0; font-size: var(--fs-13); line-height: 19px; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal:not(.flat) .fact--pay { grid-column: 3; grid-row: 1 / span 2; display: block; padding: 0; }
.deal:not(.flat) .fact--pay dd { margin: 0; font-size: var(--fs-14); line-height: 22px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal:not(.flat) .fact--pay .lead { font-weight: 600; }
.deal:not(.flat) .fact--due { grid-column: 4; grid-row: 1 / span 2; align-self: start; display: block; padding: 0; }
.deal:not(.flat) .fact--due dd { margin: 2px 0 0; font-size: var(--fs-13); line-height: 19px; color: var(--ink-2); font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal:not(.flat) .condition-summary { grid-column: 4; grid-row: 3; margin: 4px 0 0; }
.deal:not(.flat):not(:has(.fact--due)) .condition-summary { grid-row: 1 / span 2; align-self: start; margin-top: 1px; }
/* Unknown is a plain word in the meta tone: honest, never decorated. */
.deal:not(.flat) .fact dd.absent { display: block; width: auto; padding: 0; border: 0; background: none;
  font-size: var(--fs-13); font-weight: 400; color: var(--ink-3); white-space: normal; }
.deal:not(.flat) .row-state { grid-column: 5; grid-row: 1; justify-self: end; height: 22px; padding: 0; gap: 6px; border: 0; margin: 0; }
.deal:not(.flat) .checked time { font: 500 var(--fs-12)/22px var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.deal:not(.flat) .evidence { grid-column: 5; grid-row: 2; justify-self: end; margin: 0; padding: 0; border: 0; }
.deal:not(.flat) .src { display: inline; font-size: var(--fs-12); line-height: 19px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.deal:not(.flat) .row-foot .save-offer { grid-column: 6; grid-row: 1 / span 2; align-self: start; justify-self: end; margin: -7px -6px 0 0; }

/* The rest of the list sits behind one native disclosure. */
.more-rows > summary { list-style: none; display: flex; justify-content: center; align-items: center; gap: 8px;
  height: 44px; margin-top: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
  font-size: var(--fs-14); font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s; }
.more-rows > summary::-webkit-details-marker { display: none; }
.more-rows > summary:hover { border-color: var(--ink-3); }
.more-rows > summary .cnt { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.more-rows > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.more-rows[open] > summary { display: none; }
.more-rows > .olist { margin-top: 8px; }

/* Records: unreviewed finds and the archive are quiet disclosures. */
main > details.discovery, main > details.months-section { margin-top: 28px; }
main > details.months-section + details, main > details.discovery + details { margin-top: 10px; }
details.discovery > summary .cnt { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
details.discovery[open] > .finds { margin-top: 10px; }
details.months-section > summary { list-style: none; display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-14); font-weight: 600; cursor: pointer; }
details.months-section > summary::-webkit-details-marker { display: none; }
details.months-section > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid var(--ink-3);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
details.months-section[open] > summary::after { transform: rotate(-135deg); }
details.months-section > .months { margin-top: 10px; }

/* Day-grouped lists elsewhere (/free, /weekly, /svc, /ai) use the same row. */
.day-cols { grid-template-columns: var(--o-pay) var(--o-cond) calc(var(--o-chk) + var(--o-gap) + var(--o-save)); column-gap: var(--o-gap);
  right: 17px; }
.day-cols span { padding-left: 0; }
.day-cols span:nth-child(3) { text-align: right; padding-right: calc(var(--o-save) + var(--o-gap)); }
.day:has(> .day-cols) > h2 { padding-right: calc(var(--o-pay) + var(--o-cond) + var(--o-chk) + var(--o-save) + 4 * var(--o-gap) + 20px); }

/* Narrow screens: one reading column. Service, headline, benefit, then
   pay with the known terms and a low-key check/source line. */
@media (max-width: 860px) {
  .list-cols { display: none; }
  .deal:not(.flat) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 0; padding: 11px 14px 11px 16px; }
  .deal:not(.flat)::before { position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; height: auto; margin: 0; z-index: auto;
    grid-column: auto; grid-row: auto; border-radius: 0 2px 2px 0; background: var(--brand); box-shadow: none; opacity: 0; transform: scaleY(.4); }
  .deal:not(.flat) .row-main, .deal:not(.flat) .dfacts, .deal:not(.flat) .row-foot { display: contents; }
  .deal:not(.flat) .sn { order: 1; flex: 1 1 0; min-width: 0; font-size: var(--fs-13); line-height: 18px; color: var(--ink-2); -webkit-line-clamp: 1; }
  .deal:not(.flat) .row-foot .save-offer { order: 2; flex: none; width: 36px; height: 36px; margin: -10px -8px -10px 0; }
  .deal:not(.flat) .row-kicker { order: 3; flex: 1 0 100%; margin: 4px 0 2px; }
  .deal:not(.flat) .t { order: 4; flex: 1 0 100%; margin-top: 2px; line-height: 21px; }
  .deal:not(.flat) .fact--benefit { order: 5; flex: 1 0 100%; margin-top: 2px; }
  .deal:not(.flat) .fact--benefit dd { -webkit-line-clamp: 1; }
  .deal:not(.flat) .fact--pay, .deal:not(.flat) .fact--due { order: 6; display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 5px;
    min-width: 0; max-width: 100%; margin-top: 6px; padding: 0; border: 0; }
  .deal:not(.flat) .fact--due { order: 7; }
  .deal:not(.flat) .fact--pay > dt, .deal:not(.flat) .fact--due > dt { position: static; width: auto; height: auto; overflow: visible;
    clip-path: none; flex: none; margin: 0; font-size: var(--fs-12); line-height: 18px; font-weight: 500; color: var(--ink-3); }
  /* The deadline value names itself ("기한 제한 없음", "공식 신청 마감: ..."); only 결제 keeps its caption. */
  .deal:not(.flat) .fact--due > dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .deal:not(.flat) .fact--pay dd, .deal:not(.flat) .fact--due dd { margin: 0; font-size: var(--fs-13); line-height: 18px; -webkit-line-clamp: 2; }
  .deal:not(.flat) .fact--pay dd { color: var(--ink); }
  .deal:not(.flat) .condition-summary, .deal:not(.flat):not(:has(.fact--due)) .condition-summary { order: 8; flex: 1 0 100%; margin: 5px 0 0; }
  .deal:not(.flat) .row-state { order: 9; margin: 6px 0 0 auto; height: auto; padding: 0; }
  .deal:not(.flat) .checked time { line-height: 18px; }
  .deal:not(.flat) .evidence { order: 10; margin: 6px 0 0; }
  .deal:not(.flat) .src { line-height: 18px; }
  .day-cols { display: none; }
  .day:has(> .day-cols) > h2 { padding-right: 2px; }
}
@media (max-width: 720px) {
  .hero { padding: 10px var(--pad-x) 4px; }
  .hero-in { gap: 2px 14px; }
  .hero h1 { font-size: var(--fs-17); line-height: 1.4; letter-spacing: -.02em; }
  .hero h1 > span { display: inline; }
  .hero-meta { gap: 2px 14px; font-size: var(--fs-12); }
  .hero-meta .stat, .hero-meta .stat .v { font-size: var(--fs-12); }
  .toolbar-in { padding: 6px var(--pad-x) 6px; row-gap: 6px; }
  .board { padding-top: 6px; }
  .list-head { padding-bottom: 4px; }
  .list-head h2 { font-size: var(--fs-15); }
  main > details.discovery, main > details.months-section { margin-top: 24px; }
}
/* ---------- V4 Hybrid A+B (Toss/KREAM surface + Raycast/Linear Receipt Inspector) ---------- */
:root,
:root[data-theme="light"] {
  --canvas: #F2F4F6;
  --surface: #FFFFFF;
  --surface-2: #F2F4F6;
  --surface-3: #E5E8EB;
  --glass: rgba(242, 244, 246, 0.88);
  --brand: #2563EB;
  --brand-2: #1D4ED8;
  --brand-ink: #1D4ED8;
  --brand-soft: #EFF6FF;
  --brand-line: #BFDBFE;
  --ok: #047857;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --canvas: #F2F4F6;
    --surface: #FFFFFF;
    --surface-2: #F2F4F6;
    --surface-3: #E5E8EB;
    --glass: rgba(242, 244, 246, 0.88);
    --brand: #2563EB;
    --brand-2: #1D4ED8;
    --brand-ink: #1D4ED8;
    --brand-soft: #EFF6FF;
    --brand-line: #BFDBFE;
    --ok: #047857;
  }
}
body { word-break: normal; overflow-wrap: break-word; }
:lang(ko), :lang(ko) body, [lang="ko"] { word-break: keep-all; }
.board.has-v4-inspector,
.v4-inspector,
.v4-sheet-backdrop {
  --v4-muted: var(--muted, #6B7684);
  --v4-sticky-top: calc(var(--toolbar-h, 64px) + 14px);
  --v4-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.board.has-v4-inspector > .olist,
.board.has-v4-inspector > .more-rows > .olist,
.board.has-v4-inspector > .results:not(:empty) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(25, 31, 40, 0.04);
  overflow: hidden;
  padding: 0;
}
.board.has-v4-inspector > .more-rows > .olist { margin-top: 10px; }
.board.has-v4-inspector > .olist > .deal:not(.flat),
.board.has-v4-inspector > .more-rows > .olist > .deal:not(.flat),
.board.has-v4-inspector > .results > .deal:not(.flat) {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background-color 0.16s var(--v4-ease);
}
.board.has-v4-inspector > .olist > .deal:not(.flat):last-child,
.board.has-v4-inspector > .more-rows > .olist > .deal:not(.flat):last-child,
.board.has-v4-inspector > .results > .deal:not(.flat):last-child {
  border-bottom: 0;
}
.board.has-v4-inspector .deal:not(.flat) { cursor: pointer; }
.board.has-v4-inspector .deal:not(.flat) .evidence a.src,
.board.has-v4-inspector .deal:not(.flat) button[data-save-id] { cursor: pointer; }
@media (hover: hover) {
  .board.has-v4-inspector .deal:not(.flat):hover { background: var(--surface-2); }
  .board.has-v4-inspector .deal:not(.flat):hover .v4-pick-btn:not([aria-pressed="true"]) {
    background: var(--brand-soft);
    border-color: var(--brand);
  }
}
.board.has-v4-inspector .deal:not(.flat):focus-visible,
.board.has-v4-inspector .deal.is-v4-active:has(.title:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.board.has-v4-inspector > .olist > .deal.is-v4-active,
.board.has-v4-inspector > .more-rows > .olist > .deal.is-v4-active,
.board.has-v4-inspector > .results > .deal.is-v4-active,
.board.has-v4-inspector .deal.is-v4-active,
.board.has-v4-inspector .deal.is-v4-active:hover {
  background: #F8FAFF;
  box-shadow: inset 3px 0 0 var(--brand);
}
.board.has-v4-inspector .deal:not(.flat) .fact--pay .lead {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  :root { --content: 1280px; }
  .board.has-v4-inspector {
    --o-sn: 104px;
    --o-pay: 122px;
    --o-cond: 118px;
    --o-chk: 58px;
    --o-save: 32px;
    --o-gap: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 18px;
    align-items: start;
  }
  .board.has-v4-inspector > * { grid-column: 1; min-width: 0; }
  .board.has-v4-inspector > .list-cols { padding-inline: 16px; }
  .board.has-v4-inspector > .v4-inspector {
    grid-column: 2;
    grid-row: 1 / span 40;
    align-self: start;
    position: sticky;
    top: var(--v4-sticky-top);
    max-height: calc(100vh - var(--v4-sticky-top) - 16px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(25, 31, 40, 0.04);
    overflow: hidden;
  }
  .v4-insp-close,
  .v4-sheet-handle,
  .v4-sheet-backdrop { display: none !important; }
}
@media (min-width: 1280px) {
  .board.has-v4-inspector {
    --o-sn: 118px;
    --o-pay: 136px;
    --o-cond: 136px;
    --o-chk: 64px;
    --o-save: 34px;
    --o-gap: 12px;
    grid-template-columns: minmax(0, 1fr) 356px;
    column-gap: 22px;
  }
}
.v4-pick-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brand-ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.16s var(--v4-ease), border-color 0.16s var(--v4-ease), color 0.16s var(--v4-ease);
}
.v4-pick-btn::before {
  content: "";
  display: none;
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-left: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(-45deg);
}
@media (hover: hover) {
  .v4-pick-btn:not([aria-pressed="true"]):hover {
    background: var(--brand-soft);
    border-color: var(--brand);
  }
}
.v4-pick-btn[aria-pressed="true"],
.v4-pick-btn[aria-pressed="true"]:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
  cursor: default;
}
.v4-pick-btn[aria-pressed="true"]::before { display: block; }
.v4-pick-btn:focus-visible,
.v4-inspector a:focus-visible,
.v4-inspector button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (min-width: 861px) {
  .deal:not(.flat) .v4-pick-btn {
    grid-column: 5 / 7;
    grid-row: 3;
    justify-self: end;
    margin-top: 4px;
  }
}
@media (max-width: 860px) {
  .deal:not(.flat) .v4-pick-btn {
    order: 11;
    margin: 6px 0 0 8px;
    min-height: 28px;
    padding: 0 9px;
  }
}
.v4-insp-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.v4-insp-heading {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--v4-muted);
}
.v4-insp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.v4-insp-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 18px;
}
.v4-insp-empty {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--v4-muted);
  word-break: keep-all;
}
.v4-insp-svc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--v4-muted);
}
.v4-insp-name { font-weight: 600; color: var(--ink); }
.v4-tag {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 600;
}
.v4-insp-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.v4-bill { margin: 0; border-top: 1px solid var(--line); }
.v4-bill > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.v4-bill dt {
  padding-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--v4-muted);
}
.v4-bill dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.v4-bill .is-benefit dd { font-weight: 700; color: var(--ok); }
.v4-insp-sec { margin-top: 14px; }
.v4-insp-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--v4-muted);
}
.v4-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.v4-chips li {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.v4-conds {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  word-break: keep-all;
}
.v4-code {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 8px 8px 12px;
  border: 1px dashed var(--brand-line);
  border-radius: 10px;
  background: var(--brand-soft);
}
.v4-code-label { flex: none; font-size: 12px; color: var(--v4-muted); }
.v4-code code {
  flex: 1;
  min-width: 0;
  font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--brand-ink);
  overflow-wrap: anywhere;
}
.v4-copy {
  flex: none;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brand-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.v4-insp-state {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--v4-muted);
}
.v4-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.v4-insp-state .v4-state-text { min-width: 0; }
.v4-insp-src {
  flex: none;
  margin-left: auto;
  padding: 2px 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--v4-muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.v4-insp-src:hover { color: var(--ink); text-decoration-color: currentColor; }
.v4-insp-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.v4-code + .v4-insp-actions { margin-top: 8px; }
.v4-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.16s var(--v4-ease);
}
.v4-insp-actions .v4-btn, .v4-sheet-foot .v4-btn { flex: 1; }
.v4-btn--full { flex: none; width: 100%; min-height: 44px; }
.v4-btn--primary { border: 0; background: var(--brand); color: #FFFFFF; }
.v4-btn--primary:hover { background: var(--brand-2); color: #FFFFFF; }
.v4-btn--ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.v4-btn--ghost:hover { background: var(--surface-2); }
.aff-spotlight {
  display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--brand-line);
  border-radius: var(--r-lg); background: var(--surface); margin-block: 16px 24px;
}
.aff-spot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.aff-spot-brand { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-17); color: var(--ink); }
.aff-spot-brand .bi { flex: 0 0 26px; width: 26px; height: 26px; margin: 0; }
.aff-spot-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aff-spot-tier { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.aff-spot-tier--paid { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.aff-spot-tier strong { font-size: var(--fs-135); font-weight: 700; color: var(--ink); }
.aff-spot-tier--paid strong { color: var(--brand-ink); }
.aff-spot-tier span { font-size: var(--fs-13); line-height: 1.5; color: var(--ink-2); }
.aff-spot-tier a { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aff-spot-cond { font-size: var(--fs-12); line-height: 1.55; color: var(--ink-2); }
.aff-spot-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.aff-spot-disc { flex: 1 1 280px; font-size: var(--fs-12); line-height: 1.5; color: var(--ink-3); }
.aff-spot-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-sm); font-size: var(--fs-14);
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
@media (max-width: 640px) {
  .aff-spot-split { grid-template-columns: 1fr; }
  .aff-spot-cta { width: 100%; white-space: normal; text-align: center; }
}
.v4-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.v4-steps {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.v4-steps-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--v4-muted);
  letter-spacing: -0.01em;
}
.v4-steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.v4-steps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
}
.v4-steps li b {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v4-steps li code {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}
@media (min-width: 1024px) {
  .v4-mobile-bar { display: none !important; }
}
@media (max-width: 1023.98px) {
  body:has(.v4-mobile-bar.is-ready) { padding-bottom: 84px; }
  .v4-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 58;
    background: #191F28;
    color: #FFFFFF;
    border-top: 1px solid #333D4B;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: opacity 0.18s var(--v4-ease);
  }
  .v4-mobile-bar:not(.is-ready) { display: none; }
  html.v4-sheet-open .v4-mobile-bar {
    opacity: 0;
    pointer-events: none;
  }
  .v4-mob-info { min-width: 0; flex: 1; }
  .v4-mob-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .v4-mob-name {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .v4-mob-code {
    flex: none;
    max-width: 56%;
    font-size: 11px;
    font-family: var(--mono);
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.22);
    color: #93C5FD;
    border: 1px solid rgba(96, 165, 250, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .v4-mob-sub {
    font-size: 11.5px;
    color: #D1D6DB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
  }
  .v4-mob-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
  }
  .v4-mob-open {
    height: 44px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #4E5968;
    background: #262F3D;
    color: #F9FAFB;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .v4-mob-cta {
    height: 44px;
    padding: 0 11px;
    border-radius: 8px;
    border: 0;
    background: #2563EB;
    color: #FFFFFF;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .v4-inspector {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--v4-sheet-kb, 0px);
    z-index: 62;
    width: 100%;
    max-width: 640px;
    max-height: var(--v4-sheet-max, min(82vh, 680px));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(25, 31, 40, 0.12);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.26s var(--v4-ease), visibility 0s linear 0.26s;
  }
  .v4-inspector.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.26s var(--v4-ease), max-height 0.26s var(--v4-ease);
  }
  .v4-inspector.is-open.is-dragging { transition: none; }
  .v4-inspector:focus { outline: none; }
  .v4-insp-head { padding: 14px 12px 6px 18px; }
  .v4-sheet-handle {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  .v4-inspector.is-dragging .v4-sheet-handle { cursor: grabbing; }
  .v4-inspector .v4-sheet-handle:focus-visible { outline-offset: -2px; }
  .v4-sheet-handle::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--surface-3);
  }
  .v4-insp-close {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    background: transparent;
  }
  .v4-insp-close span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--surface-2);
  }
  .v4-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 61;
    background: rgba(25, 31, 40, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--v4-ease);
  }
  .v4-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
  html.v4-sheet-open { overscroll-behavior: none; }
  html.v4-sheet-open .v4-mobile-bar { display: none !important; }
  html.v4-sheet-open .v4-inspector.is-open { box-sizing: border-box; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .v4-inspector,
  .v4-inspector.is-open,
  .v4-sheet-backdrop,
  .v4-pick-btn,
  .board.has-v4-inspector .deal:not(.flat) {
    transition: none;
  }
}

.partner-shelf { margin: 4px 0 18px; padding: 14px 16px 12px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); }
.board.is-searching > .partner-shelf { display: none; }
.ps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ps-head h2 { margin: 0; font: 700 var(--fs-16)/1.4 var(--font); letter-spacing: -.01em; color: var(--ink); }
.ps-disclosure { flex: 1 1 16rem; min-width: 0; margin: 0; font-size: var(--fs-12); line-height: 1.5; color: var(--ink-3); }
.ps-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ps-item { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas); transition: border-color .15s; }
.ps-item:hover { border-color: var(--brand-line); }
.ps-item:has(.ps-btn:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.ps-name { margin: 0; overflow: hidden; font-size: var(--fs-14); font-weight: 700; line-height: 1.4; color: var(--ink);
  white-space: nowrap; text-overflow: ellipsis; }
.ps-benefit { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  font-size: var(--fs-13); line-height: 1.5; color: var(--ink-2); }
.ps-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: auto 0 0; padding-top: 6px; }
.ps-tag { flex: none; padding: 1px 7px; border-radius: 999px; font-size: var(--fs-11); font-weight: 600; line-height: 1.5;
  color: var(--st-ad); background: var(--st-ad-bg); box-shadow: inset 0 0 0 1px var(--st-ad-line); }
.ps-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ps-go { position: relative; z-index: 2; font-size: var(--fs-12); font-weight: 700; line-height: 1.5; color: var(--st-ad); text-decoration: none; white-space: nowrap; }
.ps-go:hover, .ps-go:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ps-btn { font-size: var(--fs-13); font-weight: 600; line-height: 1.5; color: var(--brand-ink); text-decoration: none; white-space: nowrap; }
.ps-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ps-btn:focus-visible { outline: none; }
.ps-item:hover .ps-btn { text-decoration: underline; text-underline-offset: 3px; }
.ps-more-wrap { margin: 10px 0 0; text-align: right; }
.ps-more { font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ps-more:hover { color: var(--ink); }
@media (max-width: 900px) { .ps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .partner-shelf { margin: 2px 0 14px; padding: 12px 12px 10px; } }

/* ---------- 16. Purpose chips on their own row (taxonomy-20261005) ---------- */
@media (min-width: 721px) {
  :root { --toolbar-h: 102px; }
  .toolbar-in { flex-wrap: wrap; row-gap: 8px; padding-bottom: 9px; }
  .search { flex: 1 1 300px; max-width: 480px; }
  .advanced-filters { margin-left: auto; }
  .chips { order: 2; flex: 1 0 100%; }
  .chips-track { flex-wrap: wrap; row-gap: 4px; overflow: visible; }
  .chips::before, .chips::after { display: none; }
}

.svclist .svc-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.svclist .svc-tag, .svc-head .svc-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); }
.svc-head .svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- 11b. Compact detail page ---------- */
.post > dl.facts.terms { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--fs-14); }
.post > dl.facts.terms dd { color: var(--ink); }
.post > .evline .st { margin-bottom: 0; }
.post > .evline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.post > .evline .sep { margin: 0 8px; }
.post > details.more { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.post > details.more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; height: 48px;
  padding: 0 16px; font-size: var(--fs-14); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.post > details.more > summary::-webkit-details-marker { display: none; }
.post > details.more > summary::after { content: ""; width: 7px; height: 7px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.post > details.more[open] > summary::after { transform: rotate(-135deg); }
.post details.more > .desc { margin: 0; padding: 4px 16px 14px; border: 0; background: none; }
.post details.more > .desc::before, .post details.more > .desc::after { content: none; }
.post details.more > .rev-panel { margin: 0 16px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 960px) {
  .post > .dfacts + dl.facts.terms { order: 0; }
}

/* service-hub: service name -> /services/{slug}; above the stretched title link */
.sn .sn-link{position:relative;z-index:2;color:inherit;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px}
.sn .sn-link:hover,.sn .sn-link:focus-visible{text-decoration-color:currentColor}
.detail-bar .svc-link{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);margin-right:auto;margin-left:var(--s4);font-size:var(--fs-14);color:var(--ink-2)}
.detail-bar .svc-link .svc-link-name{font-weight:600;color:var(--ink)}
@media (max-width:480px){.detail-bar:has(.svc-link){flex-wrap:wrap;gap:8px}.detail-bar .svc-link{order:3;flex:1 1 100%;margin-left:0;white-space:normal;overflow-wrap:anywhere;min-height:44px}}

/* ---------- Single-Viewport Glanceability Overhaul (2026-11-07) ---------- */
.hdr-in { min-height: 50px; }

/* 1. Home (/): compact above-the-fold chrome + 1-line toolbar + 54px deal rows */
.hero { padding: 10px var(--pad-x) 4px; }
.hero h1 { font-size: var(--fs-20); line-height: 1.25; }
.purpose-strip { margin: 4px auto 4px; }
.purpose-strip h2 { margin: 0 2px 6px; font-size: var(--fs-14); }
.purpose-strip ul { gap: 7px; }
.purpose-strip a { min-height: 46px; padding: 7px 26px 7px 10px;
  grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; border-radius: var(--r-sm); }
.purpose-strip a::before { width: 28px; height: 28px; border-radius: 7px; box-shadow: none; background: var(--surface-2); }
.purpose-strip a::after { left: 17px; width: 14px; height: 14px; margin-top: -7px; }
.purpose-strip .name { font-size: var(--fs-135); line-height: 1.25; }
.purpose-strip .preview { font-size: 11.5px; line-height: 1.25; }
.purpose-strip .cnt b { padding: 1px 6px; font-size: 11px; }
.purpose-strip + .toolbar { margin-top: 2px; }

@media (min-width: 1100px) {
  .toolbar-in { flex-wrap: nowrap; min-height: 44px; padding: 5px var(--pad-x); gap: 6px; }
  .toolbar-in .search { flex: 0 0 264px; min-width: 248px; height: 32px; padding: 0 6px 0 9px; font-size: var(--fs-12); }
  .toolbar-in .search input { font-size: var(--fs-12); }
  .toolbar-in .chips { order: 0; flex: 1 1 auto; min-width: 0; margin: 0; overflow-x: auto; }
  .toolbar-in .chips-track { flex-wrap: nowrap; gap: 2px; }
  .toolbar-in .chip { height: 28px; padding: 0 6.5px; font-size: 12px; border: 0; background: var(--surface-2); color: var(--ink-2); }
  .toolbar-in .chip[aria-pressed="true"], .toolbar-in .chip.is-active { background: var(--brand); color: #fff; font-weight: 600; }
  .toolbar-in .chip[aria-pressed="true"] .n, .toolbar-in .chip.is-active .n { color: rgba(255, 255, 255, .85); }
  .toolbar-in .advanced-filters { margin-left: 0; flex: none; }
  .toolbar-in .advanced-filters > summary { height: 32px; padding: 0 9px; font-size: var(--fs-12); }
}

.board { padding: 6px 0 8px; }
.list-head { padding: 0 2px 4px; }
.list-head h2 { font-size: var(--fs-15); }
.list-cols { padding: 0 14px 4px; }
@media (min-width: 861px) {
  .deal:not(.flat) { padding: 8px 14px; align-items: center; }
  .deal:not(.flat) .sn { align-self: center; -webkit-line-clamp: 1; }
  .deal:not(.flat) .t { font: 650 var(--fs-14)/20px var(--font); -webkit-line-clamp: 2; }
  .deal:not(.flat) .fact--benefit { margin-top: 1px; }
  .deal:not(.flat) .fact--benefit dd { min-height: 0; font-size: var(--fs-12); line-height: 17px; color: var(--ink-3); -webkit-line-clamp: 1; }
  .deal:not(.flat) .fact--pay { align-self: center; }
  .deal:not(.flat) .fact--pay dd { font-size: var(--fs-13); line-height: 18px; font-weight: 600; color: var(--ink); -webkit-line-clamp: 2; }
  .deal:not(.flat) .fact--due { align-self: center; }
  .deal:not(.flat) .fact--due dd { margin-top: 0; font-size: var(--fs-12); line-height: 17px; color: var(--ink-2); -webkit-line-clamp: 1; }
  .deal:not(.flat) .row-foot .save-offer { align-self: center; margin: 0 -6px 0 0; }
}

/* 2. Services (/services): 1-line search/filter bar + borderless soft tags */
.intro { padding: 14px 0 6px; }
.intro h1 { font-size: var(--fs-20); line-height: 1.25; }
.intro p { margin-top: 4px; font-size: var(--fs-135); line-height: 1.45; }
.free-crosslink { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-13); font-weight: 600;
  line-height: 1.35; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.free-crosslink:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); text-decoration: none; }
.free-crosslink:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kind-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block: 6px 4px; }
.kind-bar .chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font: 500 var(--fs-13)/1 var(--font); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.kind-bar .chip:hover { border-color: var(--line-strong); color: var(--ink); }
.kind-bar .chip .n { font-family: var(--mono); font-size: var(--fs-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kind-bar .chip.is-active, .kind-bar .chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: var(--on-brand); font-weight: 600; }
.kind-bar .chip.is-active .n, .kind-bar .chip[aria-pressed="true"] .n { color: rgba(255, 255, 255, .85); }
@media (max-width: 860px) {
  .brand { gap: 10px; }
  .desktop-nav { display: flex; align-items: center; gap: 2px; }
  .desktop-nav a { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; font-size: var(--fs-13); line-height: 1; }
  .desktop-nav a:nth-child(n+3) { display: none; }
  .deal:not(.flat) .fact--pay, .deal:not(.flat) .fact--due { align-self: center; }
}
@media (max-width: 600px) {
  .kind-bar { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kind-bar::-webkit-scrollbar { display: none; }
  .kind-bar .chip { height: 28px; padding: 0 9px; font-size: var(--fs-12); flex-shrink: 0; }
}
@media (min-width: 960px) {
  .svc-tools { flex-wrap: nowrap; margin-top: 8px; gap: 10px; }
  .svc-tools .search { flex: 0 0 240px; height: 34px; }
  .svc-tools .chips { order: 0; flex: 1 1 auto; }
  .svc-tools .chip { height: 28px; padding: 0 9px; font-size: var(--fs-12); border: 0; background: var(--surface-2); }
  .svc-tools .chip.is-active, .svc-tools .chip[aria-pressed="true"] { background: var(--brand); color: #fff; font-weight: 600; }
  .svc-tools .chip.is-active .n, .svc-tools .chip[aria-pressed="true"] .n { color: rgba(255, 255, 255, .85); }
}
.svc-h2 { margin: 12px 0 8px; font-size: var(--fs-15); }
.svclist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; margin-top: 8px; }
.svclist a { min-height: 54px; padding: 9px 12px; column-gap: 10px; grid-template-columns: 32px minmax(0, 1fr); }
.svclist a::before { width: 32px; height: 32px; border-radius: 8px; margin-top: 1px; box-shadow: none; }
.svclist a[data-ico]::before { padding: 4px;
  background: var(--svc-sprite) calc(var(--ix) * -24px) calc(var(--iy) * -24px) / calc(var(--svc-cols) * 24px) auto no-repeat content-box content-box, #fff;
  box-shadow: inset 0 0 0 1px var(--line); }
.svclist .svc-tags { gap: 4px; margin-top: 3px; }
.svclist .svc-tag { padding: 1px 6px; border: 0; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; }
.svclist .svc-tag:nth-child(n+3) { display: none; }

/* 3. Deal Detail (/d/<id>): remove 3x echo duplication & unify spec card */
.detail-bar { padding: 10px 0 4px; }
article.post:not(.info) { padding: 4px 0 12px; column-gap: 32px; }
.post > h1 { margin-top: 4px; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3; }
.post > .meta { margin: 6px 0 8px; }
.post > .lede { font-size: var(--fs-14); line-height: 1.55; color: var(--ink-2); padding-bottom: 0; }
.post:has(> .lede) > .dfacts > .fact--benefit { display: none; }
.post > .dfacts { margin-top: 12px; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.post > .dfacts:has(+ dl.facts.terms) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.post > .dfacts > .fact { padding: 10px 14px; border: 0; border-radius: 0; background: transparent; }
.post > .dfacts > .fact + .fact:not(.fact--benefit) { border-left: 1px solid var(--line); }
.post > .dfacts > .fact--benefit { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface)); }
.post > dl.facts.terms { margin-top: 0; padding: 10px 14px; border: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-md) var(--r-md); background: var(--surface-2); font-size: var(--fs-135); }
.post > details.more, .post .provenance { margin-top: 10px; }
.post > details.more > summary, .post .provenance > summary { height: 40px; font-size: var(--fs-135); }
.similar { margin-top: 16px; padding: 14px; }

/* 4. Home Slim Hub Pill Bar (.hub-pill-bar) & Desktop #v4-inspector Idle Guide (.insp-idle) */
.hub-pill-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: var(--content);
  margin: 8px auto 6px;
  padding-inline: var(--pad-x, 0);
}
.board > .hub-pill-bar {
  max-width: none;
  margin: 2px 0 8px;
  padding-inline: 0;
}
.hub-pill-bar .home-ko-guides,
.hub-pill-bar .home-crosslink-row {
  display: contents !important;
}
.hub-pill,
.hub-pill-bar .free-crosslink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: 600 var(--fs-12, 12.5px)/1 var(--font);
  white-space: nowrap;
  text-decoration: none;
  flex: 0 0 auto;
  transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .12s ease-out;
}
.hub-pill::after,
.hub-pill-bar .free-crosslink::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}
@media (hover: hover) and (pointer: fine) {
  .hub-pill:hover,
  .hub-pill-bar .free-crosslink:hover {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand-ink);
    text-decoration: none;
  }
}
.hub-pill:active,
.hub-pill-bar .free-crosslink:active {
  transform: scale(.98);
}
.hub-pill:focus-visible,
.hub-pill-bar .free-crosslink:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .hub-pill-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 2px;
  }
  .hub-pill-bar::-webkit-scrollbar { display: none; }
}
@media (min-width: 1024px) {
  .board.has-v4-inspector > .v4-inspector {
    border-color: var(--line-strong);
    border-radius: var(--r-md, 12px);
  }
}
#v4-inspector .insp-idle,
#v4-inspector .insp-idle-guide {
  display: grid;
  gap: 14px;
}
#v4-inspector .insp-idle-lead {
  margin: 0;
  font-size: var(--fs-13, 13px);
  line-height: 1.55;
  color: var(--ink-2);
  word-break: keep-all;
}
#v4-inspector .insp-idle-sec {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
#v4-inspector .insp-idle-kicker {
  margin: 0 0 2px;
  font: 700 var(--fs-12, 12px)/1.3 var(--font);
  color: var(--ink-3);
  letter-spacing: -.01em;
}
#v4-inspector .insp-idle-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#v4-inspector .insp-idle-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  #v4-inspector .insp-idle-link:hover {
    border-color: var(--brand-line);
    background: var(--brand-soft);
  }
  #v4-inspector .insp-idle-link:hover .insp-idle-text strong {
    color: var(--brand-ink);
  }
  #v4-inspector .insp-idle-link:hover .insp-idle-chev {
    color: var(--brand-ink);
    transform: translateX(2px);
  }
}
#v4-inspector .insp-idle-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}
#v4-inspector .insp-idle-text strong {
  font-size: var(--fs-13, 13px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color .15s ease-out;
}
#v4-inspector .insp-idle-text span {
  font-size: var(--fs-12, 12px);
  line-height: 1.4;
  color: var(--ink-2);
}
#v4-inspector .insp-idle-chev {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-3);
  transition: color .15s ease-out, transform .15s ease-out;
}
#v4-inspector .insp-idle-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
#v4-inspector .insp-idle-sublink {
  font-size: var(--fs-12, 12px);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  #v4-inspector .insp-idle-sublink:hover {
    color: var(--brand-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hub-pill, .hub-pill-bar .free-crosslink, #v4-inspector .insp-idle-link, #v4-inspector .insp-idle-chev { transition: none; }
  .hub-pill:active, .hub-pill-bar .free-crosslink:active, #v4-inspector .insp-idle-link:hover .insp-idle-chev { transform: none; }
}

/* ---------- 5. Mobile UX Overhaul (2026-11-11: Toss/KREAM/Cash App Density & Touch Ergonomics) ---------- */
@media (max-width: 1023.98px) {
  .v4-inspector .v4-insp-body {
    padding: 14px 16px 0;
    display: flex;
    flex-direction: column;
  }
  .v4-inspector .v4-insp-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: auto -16px 0;
    padding: 10px 16px 12px;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, .06);
  }
  .v4-inspector .v4-btn {
    min-height: 46px;
    font-size: 14.5px;
  }
}

@media (max-width: 720px) {
  /* 5a. Global Header: zero collision at 320px-390px + >=44px touch targets */
  .desktop-nav { display: none !important; }
  .top-in { gap: 8px; }
  .brand .logo { min-height: 44px; display: inline-flex; align-items: center; }
  .saved-link,
  .mobile-menu > summary,
  .lang-picker > summary {
    height: 44px;
    min-height: 44px;
  }
  .mobile-menu .hnav a,
  .lang-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* 5b. Home Above-the-Fold Chrome & Filter Bottom Sheet */
  .hero { padding: 8px var(--pad-x) 4px; }
  .hero h1 { font-size: var(--fs-17); line-height: 1.34; }
  .hero-stats { margin-top: 8px; gap: 6px; }
  .toolbar-in { padding: 6px var(--pad-x); gap: 6px; }
  .search { height: 42px; }
  .advanced-filters > summary { width: 44px; height: 44px; }
  .chips-track { gap: 4px; padding-block: 2px; }
  .chip { position: relative; height: 38px; min-height: 38px; padding: 0 11px; }
  .chip::after { content: ""; position: absolute; inset: -3px 0; }
  .hub-pill,
  .hub-pill-bar .free-crosslink { height: 36px; min-height: 36px !important; }

  .toolbar:has(.advanced-filters[open]) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--canvas);
    z-index: 95;
  }
  .advanced-filters[open] > summary::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(15, 23, 42, .36);
  }
  .advanced-filters[open] .filter-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 95;
    width: 100%;
    max-width: none;
    max-height: min(78dvh, 620px);
    overflow-y: auto;
    margin: 0;
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, .24);
  }
  .cat-chips button { min-height: 40px; padding: 0 12px; }
  .filter-fields select,
  .filter-reset { min-height: 44px; height: 44px; }

  /* 5c. Home Deal List (.deal:not(.flat)): compact 4-row grid (4-5 deals in 844px fold) */
  .deal:not(.flat) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 14px;
  }
  .deal:not(.flat) .row-main,
  .deal:not(.flat) .dfacts,
  .deal:not(.flat) .row-foot { display: contents; }

  .deal:not(.flat) .sn {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-12, 12px);
    font-weight: 600;
    line-height: 18px;
    color: var(--ink-2);
  }
  .deal:not(.flat) .row-kicker {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    min-width: 0;
    overflow: hidden;
  }
  .deal:not(.flat) .row-foot .save-offer {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
  }
  .deal:not(.flat) .t {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 1px;
    font-size: var(--fs-15, 15px);
    font-weight: 700;
    line-height: 1.36;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .deal:not(.flat) .fact--benefit {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 1px;
    padding: 0;
  }
  .deal:not(.flat) .fact--benefit dd {
    min-height: 0;
    font-size: var(--fs-13, 13px);
    line-height: 1.38;
    color: var(--ink-2);
    -webkit-line-clamp: 1;
  }
  .deal:not(.flat) .fact--benefit:has(> dd.absent),
  .deal:not(.flat) .fact--pay:has(> dd.absent),
  .deal:not(.flat) .fact--due:has(> dd.absent),
  .deal:not(.flat) .evidence,
  .deal:not(.flat) .row-state {
    display: none;
  }
  .deal:not(.flat) .fact--pay > dt,
  .deal:not(.flat) .fact--due > dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .deal:not(.flat) .fact--pay {
    grid-column: 1 / 3;
    grid-row: 4;
    margin-top: 3px;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .deal:not(.flat) .fact--pay dd {
    min-width: 0;
    font-size: var(--fs-12, 12px);
    line-height: 1.35;
    color: var(--ink-2);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deal:not(.flat) .fact--pay:has(> dd:not(.absent)) + .fact--due,
  .deal:not(.flat):has(.fact--pay > dd:not(.absent)) .fact--due,
  .deal:not(.flat):has(.fact--pay > dd:not(.absent)) .condition-summary {
    display: none;
  }
  .deal:not(.flat) .fact--due {
    grid-column: 1 / 3;
    grid-row: 4;
    margin-top: 3px;
    padding: 0;
    min-width: 0;
    overflow: hidden;
  }
  .deal:not(.flat) .fact--due dd {
    min-width: 0;
    font-size: var(--fs-12, 12px);
    line-height: 1.35;
    color: var(--ink-3);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deal:not(.flat):has(.fact--due > dd:not(.absent)) .condition-summary {
    display: none;
  }
  .deal:not(.flat) .condition-summary {
    grid-column: 1 / 3;
    grid-row: 4;
    margin-top: 3px;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  @supports not selector(:has(*)) {
    .deal:not(.flat) .fact--due { grid-row: 5; }
    .deal:not(.flat) .condition-summary { grid-row: 6; }
  }
  .deal:not(.flat) .v4-pick-btn {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
    align-self: center;
    margin: 2px 0 0;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    position: relative;
  }
  .deal:not(.flat) .v4-pick-btn::after {
    content: "";
    position: absolute;
    inset: -6px -2px;
  }

  /* 5d. Home Purpose Strip: 2-column compact category grid */
  .purpose-strip ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .purpose-strip a {
    min-height: 48px;
    padding: 8px 22px 8px 10px;
    column-gap: 8px;
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .purpose-strip a::before { width: 28px; height: 28px; border-radius: 7px; }
  .purpose-strip a::after { left: 17px; width: 14px; height: 14px; margin-top: -7px; }
  .purpose-strip .preview { display: none; }
  .purpose-strip li:has(> a[href$="/services"]) {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  /* 5e. Deal Detail (/d/<id>): compact 2-col dfacts + pure-CSS sticky bottom single outlink */
  .detail-bar { padding: 6px 0 2px; }
  .detail-bar .back,
  .detail-bar .save-offer {
    min-height: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .post > h1 {
    font-size: clamp(18.5px, 5vw, 21px);
    line-height: 1.32;
    letter-spacing: -.02em;
    word-break: keep-all;
  }
  .post > .meta { margin: 4px 0 6px; gap: 5px; }
  article.post > .dfacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 10px;
  }
  article.post > .dfacts > .fact { padding: 9px 12px; }
  article.post > .dfacts > .fact:only-child,
  article.post:not(:has(> .lede)) > .dfacts > .fact--benefit {
    grid-column: 1 / -1;
  }
  article.post > .dfacts > .fact--pay + .fact--due {
    border-left: 1px solid var(--line);
    border-top: 0;
  }
  .post > details.more > summary,
  .post .provenance > summary {
    min-height: 44px;
    height: 44px;
  }
  .post > .srcline {
    order: 10;
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin: 12px calc(-1 * var(--gutter, 16px)) -12px;
    padding: 10px var(--gutter, 16px) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
  }
  .post > .srcline a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .22);
  }

  /* 5f. Services Directory (/services): touch-ready chips & A-Z index */
  .svc-tools .search { height: 44px; }
  .svc-tools .chip,
  .kind-bar .chip {
    position: relative;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    font-size: var(--fs-13);
  }
  .svc-tools .chip::after,
  .kind-bar .chip::after { content: ""; position: absolute; inset: -3px 0; }
  .svc-index { gap: 6px; }
  .svc-index a {
    position: relative;
    min-width: 38px;
    height: 38px;
  }
  .svc-index a::after { content: ""; position: absolute; inset: -3px; }
  .svcmini a { min-height: 44px; padding: 8px 10px; }
}

@media (max-width: 400px) {
  .top-in { gap: 8px; }
  .saved-link { padding: 0 5px 0 8px; font-size: var(--fs-12); }
  .mobile-menu > summary,
  .lang-picker > summary { padding: 0 7px; font-size: var(--fs-12); gap: 4px; }
}

/* Mobile UX overhaul overrides (2026-11-15) */
html { scroll-padding-top: 120px; }
.hero::before, .hero::after { content: none !important; }
.brand .logo { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: 600 var(--fs-13)/1 var(--font);
  cursor: pointer;
}
.theme-toggle--bar { flex: none; min-width: 44px; padding: 0 10px; }
.theme-toggle--menu { width: 100%; margin-top: 6px; border-radius: var(--r-sm); text-align: left; justify-content: flex-start; }
@media (max-width: 860px) { .theme-toggle--bar { display: none; } }
@media (min-width: 861px) { .theme-toggle--menu { display: none; } }
.mobile-menu .hnav { max-width: calc(100vw - 32px); min-width: 210px; }
.mobile-menu .hnav a,
.lang-list a { white-space: normal; line-height: 1.3; min-height: 44px; display: flex; align-items: center; }
#savedoffers[hidden] { display: none !important; }
.filter-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.filter-close,
.noresults-reset {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--fs-14)/1 var(--font);
  cursor: pointer;
}
#noresults p { margin: 0 0 12px; }
.ps-head h2 { min-width: 0; overflow-wrap: anywhere; }
.ps-btn::after { content: none; }
.ps-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; width: 100%; margin-top: 10px; }
.ps-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--on-brand);
  font: 700 var(--fs-13)/1.2 var(--font);
  text-decoration: none;
  text-align: center;
}
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  text-align: center;
}
.post > * { min-width: 0; overflow-wrap: anywhere; }
.post .code-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.svc-h2 { width: min(100% - 2 * var(--gutter, 16px), var(--content, 920px)); margin-inline: auto; }
@media (max-width: 720px) {
  .top-in, .wrap > header { gap: 8px; }
  #q, .search input, .filter-fields select, .svc-tools input, .follow-url input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
  .search, .follow-url input, .follow-url button, details.follow > summary { min-height: 44px; }
  .search { height: 44px; }
  #qclear { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin-right: 0; }
  #chipreset,
  .cat-chips button,
  .searchinfo button,
  .remember-filter,
  .browser-actions button,
  footer .foot-links a,
  .hero a.stat,
  .purpose-strip a,
  .purpose-strip li:has(> a[href$="/services"]) a,
  #savedoffers button,
  .save-offer,
  .code-copy-btn { min-height: 44px; }
  footer .foot-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
  .code-copy-btn { padding: 0 12px; }
  .chips-track,
  .kind-bar,
  .hub-pill-bar,
  .fa-chips {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    padding-right: 20px;
  }
  .chips-track, .kind-bar, .cat-chips, .fa-chips, .hub-pill-bar { gap: 8px; }
  .filter-panel { max-height: calc(100dvh - 110px); overflow-y: auto; }
  .partner-shelf .ps-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(228px, 76%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .partner-shelf .ps-item { scroll-snap-align: start; }
  .post .guide-fig img {
    max-height: 440px;
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
    object-fit: contain;
  }
  .fa-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 14px;
  }
  .fa-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 6px 0;
    border-top: 1px dashed var(--line);
    white-space: normal;
    text-align: right;
  }
  .fa-table tbody td.fa-amount { display: block; text-align: left; }
  .fa-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    text-align: left;
  }
  .fa-table tbody td.fa-amount::before { display: block; margin-bottom: 4px; }
}
@media (max-width: 520px) {
  .svc-head .svc-cta { grid-column: 1 / -1; width: 100%; }
  .svc-cta .rev-official { width: 100%; min-height: 44px; justify-content: center; }
}
@media (max-width: 480px) {
  .post > dl.facts,
  .post .consumer-conditions .facts,
  .post .rev-facts,
  .post .provenance .facts { grid-template-columns: minmax(0, 1fr); }
  .post > dl.facts dt { border-top: 1px solid var(--line); padding-top: 10px; }
  .post > dl.facts dt:first-of-type { border-top: 0; padding-top: 0; }
}

/* aideal-theme-repair-20261108-v1 */
:root {
  --ink-3: #596370;
  --brand-text: var(--brand);
  --brand-text-2: var(--brand-2);
  --v4-selected-surface: #F8FAFF;
  --fg-soft: var(--ink-2);
  --muted: var(--ink-3);
  --accent: var(--brand-ink);
}
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #F2F4F6; --surface: #FFFFFF; --surface-2: #F2F4F6; --surface-3: #E5E8EB;
  --glass: rgba(242, 244, 246, 0.88);
  --line: #e5e8eb; --line-strong: #d1d6db; --hatch: rgba(25, 31, 40, .055);
  --ink: #191f28; --ink-2: #4e5968; --ink-3: #596370;
  --brand: #2563EB; --brand-2: #1D4ED8; --brand-ink: #1D4ED8; --on-brand: #ffffff;
  --brand-soft: #EFF6FF; --brand-line: #BFDBFE;
  --glow-a: rgba(49, 130, 246, .16); --glow-b: rgba(27, 100, 218, .10);
  --glow-c: rgba(49, 130, 246, .07); --grid-line: rgba(25, 31, 40, .04);
  --ok: #047857;
  --warn: #b45309; --warn-soft: #fff8eb; --warn-line: #f3c677;
  --risk: #e11d48; --risk-soft: #ffecee; --risk-line: #f9a8b0;
  --h0: #1b64da; --h1: #047857; --h2: #0369a1; --h3: #4338ca;
  --h4: #be185d; --h5: #b53d0b; --h6: #955a06; --h7: #48730e;
  --tile-mix: 10%;
  --shadow-pop: 0 18px 44px -14px rgba(25, 31, 40, .22), 0 0 0 1px var(--line-strong);
  --shadow-bar: 0 8px 22px -14px rgba(25, 31, 40, .18);
  --row-hover: linear-gradient(90deg, rgba(49, 130, 246, .045), rgba(25, 31, 40, .012) 60%, transparent);
  --st-ad: #1b64da; --st-ad-bg: #f2f6fc; --st-ad-line: #c9e2ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #101318; --surface: #171b22; --surface-2: #1e242d; --surface-3: #272e3a;
    --glass: rgba(16, 19, 24, .85);
    --line: #242b35; --line-strong: #333c4a; --hatch: rgba(255, 255, 255, .06);
    --ink: #f2f4f6; --ink-2: #b0b8c1; --ink-3: #8b95a1;
    --brand: #2563EB; --brand-2: #1D4ED8; --brand-ink: #64a8ff; --on-brand: #ffffff;
    --brand-text: #4593fc; --brand-text-2: #64a8ff;
    --brand-soft: rgba(69, 147, 252, .12); --brand-line: rgba(69, 147, 252, .34);
    --glow-a: rgba(69, 147, 252, .22); --glow-b: rgba(49, 130, 246, .14);
    --glow-c: rgba(49, 130, 246, .08); --grid-line: rgba(255, 255, 255, .035);
    --ok: #20c997;
    --warn: #f2b54a; --warn-soft: rgba(242, 181, 74, .10); --warn-line: rgba(242, 181, 74, .42);
    --risk: #ff7b87; --risk-soft: rgba(255, 99, 112, .12); --risk-line: rgba(255, 123, 135, .40);
    --h0: #64a8ff; --h1: #3ddc97; --h2: #38bdf8; --h3: #818cf8;
    --h4: #f472b6; --h5: #fb923c; --h6: #facc15; --h7: #a3e635;
    --tile-mix: 15%;
    --shadow-pop: 0 18px 48px -12px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-strong);
    --shadow-bar: 0 10px 28px -16px rgba(0, 0, 0, .9);
    --row-hover: linear-gradient(90deg, rgba(69, 147, 252, .075), rgba(255, 255, 255, .018) 55%, rgba(255, 255, 255, .012));
    --st-ad: #64a8ff; --st-ad-bg: rgba(49, 130, 246, .10); --st-ad-line: rgba(100, 168, 255, .32);
    --v4-selected-surface: color-mix(in srgb, var(--brand) 14%, var(--surface));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101318; --surface: #171b22; --surface-2: #1e242d; --surface-3: #272e3a;
  --glass: rgba(16, 19, 24, .85);
  --line: #242b35; --line-strong: #333c4a; --hatch: rgba(255, 255, 255, .06);
  --ink: #f2f4f6; --ink-2: #b0b8c1; --ink-3: #8b95a1;
  --brand: #2563EB; --brand-2: #1D4ED8; --brand-ink: #64a8ff; --on-brand: #ffffff;
  --brand-text: #4593fc; --brand-text-2: #64a8ff;
  --brand-soft: rgba(69, 147, 252, .12); --brand-line: rgba(69, 147, 252, .34);
  --glow-a: rgba(69, 147, 252, .22); --glow-b: rgba(49, 130, 246, .14);
  --glow-c: rgba(49, 130, 246, .08); --grid-line: rgba(255, 255, 255, .035);
  --ok: #20c997;
  --warn: #f2b54a; --warn-soft: rgba(242, 181, 74, .10); --warn-line: rgba(242, 181, 74, .42);
  --risk: #ff7b87; --risk-soft: rgba(255, 99, 112, .12); --risk-line: rgba(255, 123, 135, .40);
  --h0: #64a8ff; --h1: #3ddc97; --h2: #38bdf8; --h3: #818cf8;
  --h4: #f472b6; --h5: #fb923c; --h6: #facc15; --h7: #a3e635;
  --tile-mix: 15%;
  --shadow-pop: 0 18px 48px -12px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-strong);
  --shadow-bar: 0 10px 28px -16px rgba(0, 0, 0, .9);
  --row-hover: linear-gradient(90deg, rgba(69, 147, 252, .075), rgba(255, 255, 255, .018) 55%, rgba(255, 255, 255, .012));
  --st-ad: #64a8ff; --st-ad-bg: rgba(49, 130, 246, .10); --st-ad-line: rgba(100, 168, 255, .32);
  --v4-selected-surface: color-mix(in srgb, var(--brand) 14%, var(--surface));
}
.hnav a[aria-current="page"] { color: var(--brand-text); }
.log-lines .last .ok { color: var(--brand-text-2); }
.purpose-strip a:not(:has(.cnt)) .name { color: var(--brand-text); }
.purpose-strip a:not(:has(.cnt)):hover .name { color: var(--brand-text-2); }
.purpose-strip a:hover .cnt b { color: var(--brand-text); }
.board.has-v4-inspector > .olist > .deal.is-v4-active,
.board.has-v4-inspector > .more-rows > .olist > .deal.is-v4-active,
.board.has-v4-inspector > .results > .deal.is-v4-active,
.board.has-v4-inspector .deal.is-v4-active,
.board.has-v4-inspector .deal.is-v4-active:hover {
  background: var(--v4-selected-surface);
}

@media(min-width:600px){.facts{grid-template-columns:minmax(8rem,.3fr) 1fr}}