/* Mega Kangnam — demo. Tokens from Shinhan Beauty design system (black + gold). */
:root {
  color-scheme: dark;
  --sb-gold-100:#f3ecdd; --sb-gold-300:#dfbf82; --sb-gold-400:#d4af6a; --sb-gold-500:#c9a15a;
  --sb-gold-600:#9d6f24; --sb-gold-700:#7d5716; --sb-gold-800:#6a4911; --sb-gold-900:#573b0d;
  --sb-gold-glow:173 140 87;
  --sb-blue-300:#7d94d1; --sb-blue-600:#3a589d; --sb-blue-700:#2f4a87;
  --sb-n-0:#ffffff; --sb-n-50:#faf8f4; --sb-n-200:#e6e1d6; --sb-n-300:#b3aca0; --sb-n-400:#8a8478;
  --sb-n-500:#7a7468; --sb-n-600:#6b6558; --sb-n-700:#5c564b; --sb-n-750:#4a443b; --sb-n-800:#2e2a24;
  --sb-n-850:#26221d; --sb-n-875:#1e1b17; --sb-n-900:#141210; --sb-n-950:#000000;

  --sb-bg-canvas:var(--sb-n-950); --sb-bg-surface:var(--sb-n-900); --sb-bg-raised:var(--sb-n-875);
  --sb-bg-overlay:var(--sb-n-850); --sb-bg-hover:rgb(var(--sb-gold-glow) / .10);
  --sb-bg-selected:rgb(212 175 106 / .16); --sb-scrim:rgb(0 0 0 / .64);
  --sb-text-primary:var(--sb-n-0); --sb-text-secondary:var(--sb-n-300); --sb-text-muted:var(--sb-n-400);
  --sb-text-brand:var(--sb-gold-400); --sb-text-link:var(--sb-blue-300); --sb-text-disabled:#5e584f;
  --sb-border-subtle:var(--sb-n-800); --sb-border-default:var(--sb-n-750); --sb-border-control:var(--sb-n-500);
  --sb-focus-ring:var(--sb-blue-300);
  --sb-action-primary:var(--sb-gold-400); --sb-action-primary-hover:var(--sb-gold-300);
  --sb-action-primary-active:var(--sb-gold-500); --sb-on-action-primary:var(--sb-n-900);
  --sb-action-secondary:var(--sb-blue-600); --sb-on-action-secondary:var(--sb-n-0);
  --sb-success:#4ade80; --sb-success-bg:rgb(74 222 128 / .12);
  --sb-warning:#fbbf24; --sb-warning-bg:rgb(251 191 36 / .12);
  --sb-danger:#f87171; --sb-danger-bg:rgb(248 113 113 / .12);
  --sb-info:var(--sb-blue-300); --sb-info-bg:rgb(125 148 209 / .14); --sb-on-danger:var(--sb-n-900);

  --sb-font-sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sb-text-xs:12px; --sb-lh-xs:18px; --sb-text-sm:13px; --sb-lh-sm:20px; --sb-text-md:14px; --sb-lh-md:22px;
  --sb-text-lg:16px; --sb-lh-lg:24px; --sb-text-xl:18px; --sb-lh-xl:26px; --sb-text-2xl:20px; --sb-lh-2xl:28px;
  --sb-text-3xl:24px; --sb-lh-3xl:32px; --sb-text-4xl:30px; --sb-lh-4xl:40px;
  --sb-weight-regular:400; --sb-weight-medium:500; --sb-weight-semibold:600; --sb-weight-bold:700;

  --sb-space-1:4px; --sb-space-2:8px; --sb-space-3:12px; --sb-space-4:16px; --sb-space-5:20px;
  --sb-space-6:24px; --sb-space-8:32px; --sb-space-10:40px; --sb-space-12:48px; --sb-space-16:64px;
  --sb-radius-sm:6px; --sb-radius-md:10px; --sb-radius-lg:16px; --sb-radius-xl:24px; --sb-radius-pill:999px;
  --sb-shadow-sm:0 3px 6px 0 rgb(0 0 0 / .10); --sb-shadow-md:0 8px 24px 0 rgb(0 0 0 / .40);
  --sb-shadow-brand:0 4px 10px 0 rgb(var(--sb-gold-glow) / .40);
  --sb-duration-fast:150ms; --sb-duration-normal:250ms; --sb-duration-slow:350ms; --sb-ease:cubic-bezier(.2,0,0,1);
  --sb-control-sm:32px; --sb-control-md:40px; --sb-control-lg:48px; --sb-target-touch:44px;
  --sb-topbar-h:64px; --sb-content-max:1200px; --sb-z-sticky:100; --sb-z-modal:400;
}
[data-theme="light"] {
  color-scheme: light;
  --sb-bg-canvas:var(--sb-n-50); --sb-bg-surface:var(--sb-n-0); --sb-bg-raised:var(--sb-n-0); --sb-bg-overlay:var(--sb-n-0);
  --sb-bg-hover:rgb(125 87 22 / .07); --sb-bg-selected:var(--sb-gold-100); --sb-scrim:rgb(20 18 16 / .48);
  --sb-text-primary:var(--sb-n-900); --sb-text-secondary:var(--sb-n-700); --sb-text-muted:var(--sb-n-600);
  --sb-text-brand:var(--sb-gold-700); --sb-text-link:var(--sb-blue-700); --sb-text-disabled:#a39d90;
  --sb-border-subtle:var(--sb-n-200); --sb-border-default:var(--sb-n-200); --sb-border-control:var(--sb-n-400);
  --sb-focus-ring:var(--sb-blue-700);
  --sb-action-primary:var(--sb-gold-700); --sb-action-primary-hover:var(--sb-gold-800);
  --sb-action-primary-active:var(--sb-gold-900); --sb-on-action-primary:var(--sb-n-0);
  --sb-success:#166534; --sb-success-bg:rgb(22 101 52 / .08); --sb-warning:#92400e; --sb-warning-bg:rgb(146 64 14 / .08);
  --sb-danger:#b91c1c; --sb-danger-bg:rgb(185 28 28 / .08); --sb-info:var(--sb-blue-700); --sb-info-bg:rgb(47 74 135 / .08);
  --sb-on-danger:var(--sb-n-0);
  --sb-shadow-sm:0 1px 2px 0 rgb(20 18 16 / .08); --sb-shadow-md:0 8px 24px 0 rgb(20 18 16 / .14);
}
@media (pointer:coarse) { :root { --sb-control-md:var(--sb-target-touch); --sb-control-sm:var(--sb-target-touch); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:1ms !important; transition-duration:1ms !important; scroll-behavior:auto !important; } }

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--sb-bg-canvas); color:var(--sb-text-primary); font-family:var(--sb-font-sans);
  font-size:var(--sb-text-lg); line-height:var(--sb-lh-lg); -webkit-font-smoothing:antialiased; }
img,video { max-width:100%; display:block; }
h1,h2,h3,h4 { margin:0; font-weight:var(--sb-weight-bold); line-height:1.3; }
h1 { font-size:clamp(28px,5vw,44px); line-height:1.3; }
h2 { font-size:var(--sb-text-4xl); line-height:var(--sb-lh-4xl); }
h3 { font-size:var(--sb-text-xl); line-height:var(--sb-lh-xl); font-weight:var(--sb-weight-semibold); }
p { margin:0; }
a { color:var(--sb-text-link); text-decoration:underline; text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--sb-focus-ring); outline-offset:2px; }
.skip { position:absolute; left:var(--sb-space-4); top:-100px; background:var(--sb-action-primary); color:var(--sb-on-action-primary);
  padding:var(--sb-space-2) var(--sb-space-4); border-radius:var(--sb-radius-pill); z-index:var(--sb-z-modal); font-weight:var(--sb-weight-semibold); }
.skip:focus { top:var(--sb-space-2); }
.wrap { width:100%; max-width:var(--sb-content-max); margin-inline:auto; padding-inline:var(--sb-space-4); }
@media (min-width:768px){ .wrap{ padding-inline:var(--sb-space-6);} }
@media (min-width:1280px){ .wrap{ padding-inline:var(--sb-space-8);} }
.section { padding-block:var(--sb-space-12); }
@media (min-width:1024px){ .section{ padding-block:var(--sb-space-16);} }
.section--alt { background:var(--sb-bg-surface); border-block:1px solid var(--sb-border-subtle); }
.eyebrow { color:var(--sb-text-brand); font-size:var(--sb-text-sm); line-height:var(--sb-lh-sm); font-weight:var(--sb-weight-semibold); letter-spacing:.08em; text-transform:uppercase; }
.lead { color:var(--sb-text-secondary); font-size:var(--sb-text-xl); line-height:var(--sb-lh-xl); max-width:62ch; }
.muted { color:var(--sb-text-muted); }
.sec-head { display:grid; gap:var(--sb-space-3); margin-bottom:var(--sb-space-8); }
.sec-head--row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--sb-space-4); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sb-space-2); min-height:var(--sb-control-md);
  padding:0 var(--sb-space-5); border-radius:var(--sb-radius-pill); border:1px solid transparent; font:inherit;
  font-size:var(--sb-text-md); line-height:var(--sb-lh-md); font-weight:var(--sb-weight-semibold); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:color,background-color,border-color,box-shadow,transform var(--sb-duration-fast) var(--sb-ease); transition-property:color,background-color,border-color,box-shadow,transform; }
.btn--lg { min-height:var(--sb-control-lg); padding-inline:var(--sb-space-6); font-size:var(--sb-text-lg); }
.btn--primary { background:var(--sb-action-primary); color:var(--sb-on-action-primary); }
.btn--primary:active { background:var(--sb-action-primary-active); box-shadow:none; transform:translateY(0); }
.btn--outline { background:transparent; color:var(--sb-text-primary); border-color:var(--sb-border-control); }
.btn--ghost { background:transparent; color:var(--sb-text-brand); padding-inline:var(--sb-space-3); }
.btn[aria-busy="true"] { cursor:progress; }
.btn[disabled] { color:var(--sb-text-disabled); cursor:not-allowed; box-shadow:none; }
@media (hover:hover){
  .btn--primary:hover { background:var(--sb-action-primary-hover); box-shadow:var(--sb-shadow-brand); }
  .btn--outline:hover { background:var(--sb-bg-hover); }
  .btn--ghost:hover { background:var(--sb-bg-hover); }
}
.icon { width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.icon--lg { width:24px; height:24px; }

/* Header */
.topbar { background:var(--sb-bg-canvas); border-bottom:1px solid var(--sb-border-subtle); font-size:var(--sb-text-sm); line-height:var(--sb-lh-sm); }
.topbar .wrap { display:flex; justify-content:space-between; gap:var(--sb-space-4); padding-block:var(--sb-space-2); flex-wrap:wrap; color:var(--sb-text-secondary); }
.topbar a { color:var(--sb-text-brand); }
.header { position:sticky; top:0; z-index:var(--sb-z-sticky); background:var(--sb-bg-canvas); border-bottom:1px solid var(--sb-border-subtle); }
.header .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--sb-space-4); min-height:var(--sb-topbar-h); }
.logo { display:flex; align-items:center; gap:var(--sb-space-3); text-decoration:none; color:var(--sb-text-primary); font-weight:var(--sb-weight-bold); font-size:var(--sb-text-xl); line-height:var(--sb-lh-xl); }
.logo__mark { width:36px; height:36px; border-radius:var(--sb-radius-pill); background:linear-gradient(135deg,var(--sb-gold-300),var(--sb-gold-600)); color:var(--sb-n-950); display:grid; place-items:center; font-weight:var(--sb-weight-bold); }
.logo small { display:block; color:var(--sb-text-brand); font-size:var(--sb-text-xs); line-height:var(--sb-lh-xs); letter-spacing:.14em; font-weight:var(--sb-weight-medium); }
.nav { display:none; }
.nav ul { list-style:none; margin:0; padding:0; display:flex; gap:var(--sb-space-1); }
.nav a { display:block; padding:var(--sb-space-2) var(--sb-space-3); border-radius:var(--sb-radius-pill); color:var(--sb-text-secondary); text-decoration:none; font-size:var(--sb-text-md); line-height:var(--sb-lh-md); font-weight:var(--sb-weight-medium); }
.nav a[aria-current="page"] { color:var(--sb-text-brand); font-weight:var(--sb-weight-semibold); box-shadow:inset 0 -2px 0 var(--sb-action-primary); border-radius:0; }
@media (hover:hover){ .nav a:hover { background:var(--sb-bg-hover); color:var(--sb-text-primary); } }
.header__tools { display:flex; align-items:center; gap:var(--sb-space-2); }
.iconbtn { display:inline-grid; place-items:center; width:var(--sb-control-md); height:var(--sb-control-md); border-radius:var(--sb-radius-pill); background:transparent; border:1px solid var(--sb-border-control); color:var(--sb-text-primary); cursor:pointer; }
@media (hover:hover){ .iconbtn:hover { background:var(--sb-bg-hover); } }
.header .btn--primary { display:none; }
@media (min-width:1024px){ .nav{display:block;} .menu-toggle{display:none;} .header .btn--primary{display:inline-flex;} }
.mobile-nav { display:none; border-top:1px solid var(--sb-border-subtle); background:var(--sb-bg-surface); }
.mobile-nav.is-open { display:block; }
.mobile-nav ul { list-style:none; margin:0; padding:var(--sb-space-2) var(--sb-space-4) var(--sb-space-4); display:grid; }
.mobile-nav a { display:block; padding:var(--sb-space-3) var(--sb-space-2); min-height:var(--sb-target-touch); color:var(--sb-text-primary); text-decoration:none; border-bottom:1px solid var(--sb-border-subtle); }
.mobile-nav a[aria-current="page"] { color:var(--sb-text-brand); font-weight:var(--sb-weight-semibold); box-shadow:inset 3px 0 0 var(--sb-action-primary); padding-inline-start:var(--sb-space-4); }
@media (min-width:1024px){ .mobile-nav{display:none !important;} }

/* Hero */
.hero { position:relative; overflow:hidden; background:radial-gradient(900px 420px at 80% -10%, rgb(var(--sb-gold-glow) / .28), transparent 60%), var(--sb-bg-canvas); }
.hero .wrap { display:grid; gap:var(--sb-space-8); padding-block:var(--sb-space-12); align-items:center; }
@media (min-width:1024px){ .hero .wrap{ grid-template-columns:1.1fr .9fr; padding-block:var(--sb-space-16);} }
.hero h1 { margin-block:var(--sb-space-3) var(--sb-space-4); }
.hero h1 em { font-style:normal; color:var(--sb-text-brand); }
.hero__cta { display:flex; flex-wrap:wrap; gap:var(--sb-space-3); margin-top:var(--sb-space-6); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sb-space-4); margin-top:var(--sb-space-8); }
.stat strong { display:block; font-size:var(--sb-text-4xl); line-height:var(--sb-lh-4xl); color:var(--sb-text-brand); font-variant-numeric:tabular-nums; }
.stat span { font-size:var(--sb-text-sm); line-height:var(--sb-lh-sm); color:var(--sb-text-secondary); }
.page-hero { background:radial-gradient(700px 260px at 85% -20%, rgb(var(--sb-gold-glow) / .22), transparent 60%), var(--sb-bg-canvas); border-bottom:1px solid var(--sb-border-subtle); }
.page-hero .wrap { padding-block:var(--sb-space-10); display:grid; gap:var(--sb-space-3); }
.crumbs { font-size:var(--sb-text-sm); line-height:var(--sb-lh-sm); color:var(--sb-text-muted); }
.crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sb-space-2); }
.crumbs li+li::before { content:"/"; margin-right:var(--sb-space-2); }
.crumbs a { color:var(--sb-text-secondary); }

/* Media placeholders */
.media { position:relative; overflow:hidden; border-radius:var(--sb-radius-lg); background:linear-gradient(135deg,var(--sb-bg-overlay),var(--sb-bg-raised) 55%, rgb(var(--sb-gold-glow) / .22)); border:1px solid var(--sb-border-default); aspect-ratio:4/3; }
.media img,.media video { width:100%; height:100%; object-fit:cover; }
.media--tall { aspect-ratio:4/5; }
.media--wide { aspect-ratio:16/9; }
.media__tag { position:absolute; left:var(--sb-space-3); bottom:var(--sb-space-3); background:var(--sb-scrim); color:var(--sb-n-0); font-size:var(--sb-text-xs); line-height:var(--sb-lh-xs); padding:var(--sb-space-1) var(--sb-space-3); border-radius:var(--sb-radius-pill); }
.play { position:absolute; inset:0; display:grid; place-items:center; }
.play span { width:72px; height:72px; border-radius:var(--sb-radius-pill); background:var(--sb-action-primary); color:var(--sb-on-action-primary); display:grid; place-items:center; box-shadow:var(--sb-shadow-brand); }

/* Grids & cards */
.grid { display:grid; gap:var(--sb-space-4); }
@media (min-width:768px){ .grid--2{grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:repeat(2,1fr);} .grid--4{grid-template-columns:repeat(2,1fr);} .grid{gap:var(--sb-space-6);} }
@media (min-width:1024px){ .grid--3{grid-template-columns:repeat(3,1fr);} .grid--4{grid-template-columns:repeat(4,1fr);} }
.card { position:relative; background:var(--sb-bg-surface); border:1px solid var(--sb-border-default); border-radius:var(--sb-radius-lg); padding:var(--sb-space-4); display:grid; gap:var(--sb-space-3); align-content:start; transition-property:background-color,box-shadow,border-color; transition-duration:var(--sb-duration-fast); transition-timing-function:var(--sb-ease); }
@media (min-width:640px){ .card{ padding:var(--sb-space-5);} }
.card--flat { padding:0; overflow:hidden; }
.card--flat .card__body { padding:var(--sb-space-5); display:grid; gap:var(--sb-space-2); }
.card--flat .media { border-radius:0; border:0; border-bottom:1px solid var(--sb-border-default); }
.card h3 a { color:var(--sb-text-primary); text-decoration:none; }
.card h3 a::after { content:""; position:absolute; inset:0; border-radius:var(--sb-radius-lg); }
.card h3 a:focus-visible { outline:none; }
.card:has(h3 a:focus-visible) { outline:2px solid var(--sb-focus-ring); outline-offset:2px; }
@media (hover:hover){ .card:has(h3 a):hover { background:var(--sb-bg-raised); box-shadow:var(--sb-shadow-brand); border-color:var(--sb-gold-600); } }
.card p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); line-height:var(--sb-lh-md); }
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.badge { display:inline-flex; align-items:center; gap:var(--sb-space-1); width:fit-content; padding:2px var(--sb-space-3); border-radius:var(--sb-radius-pill); background:var(--sb-info-bg); color:var(--sb-info); font-size:var(--sb-text-xs); line-height:var(--sb-lh-xs); font-weight:var(--sb-weight-medium); }
.badge--gold { background:var(--sb-bg-selected); color:var(--sb-text-brand); }
.badge--ok { background:var(--sb-success-bg); color:var(--sb-success); }
.price { font-variant-numeric:tabular-nums; color:var(--sb-text-brand); font-weight:var(--sb-weight-semibold); }
.ico-wrap { width:48px; height:48px; border-radius:var(--sb-radius-pill); display:grid; place-items:center; background:var(--sb-bg-selected); color:var(--sb-text-brand); }

/* Category tabs (anchor chips) */
.chips { display:flex; gap:var(--sb-space-2); overflow-x:auto; padding-bottom:var(--sb-space-2); margin-bottom:var(--sb-space-6); }
.chips a { white-space:nowrap; padding:var(--sb-space-2) var(--sb-space-4); border:1px solid var(--sb-border-control); border-radius:var(--sb-radius-pill); color:var(--sb-text-primary); text-decoration:none; font-size:var(--sb-text-md); line-height:var(--sb-lh-md); min-height:var(--sb-control-md); display:inline-flex; align-items:center; }
.chips a[aria-current="true"] { background:var(--sb-bg-selected); color:var(--sb-text-brand); border-color:var(--sb-action-primary); font-weight:var(--sb-weight-semibold); }
@media (hover:hover){ .chips a:hover { background:var(--sb-bg-hover); } }

/* Content blocks */
.split { display:grid; gap:var(--sb-space-8); align-items:start; }
@media (min-width:1024px){ .split{ grid-template-columns:1fr 1fr; align-items:center; } .split--detail{ grid-template-columns:1.6fr 1fr; align-items:start; } }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:var(--sb-space-3); }
.checks li { display:flex; gap:var(--sb-space-3); align-items:flex-start; color:var(--sb-text-secondary); }
.checks .icon { color:var(--sb-text-brand); margin-top:2px; }
.steps { list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:var(--sb-space-4); }
.steps li { counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:var(--sb-space-4); align-items:start; }
.steps li::before { content:counter(s); width:44px; height:44px; border-radius:var(--sb-radius-pill); background:var(--sb-action-primary); color:var(--sb-on-action-primary); display:grid; place-items:center; font-weight:var(--sb-weight-bold); font-variant-numeric:tabular-nums; }
.steps h3 { font-size:var(--sb-text-lg); line-height:var(--sb-lh-lg); }
.steps p { color:var(--sb-text-secondary); font-size:var(--sb-text-md); line-height:var(--sb-lh-md); }
.aside { position:sticky; top:calc(var(--sb-topbar-h) + var(--sb-space-4)); display:grid; gap:var(--sb-space-4); }
.facts { display:grid; gap:var(--sb-space-3); margin:0; }
.facts div { display:flex; justify-content:space-between; gap:var(--sb-space-4); padding-bottom:var(--sb-space-3); border-bottom:1px solid var(--sb-border-subtle); }
.facts dt { color:var(--sb-text-secondary); font-size:var(--sb-text-md); }
.facts dd { margin:0; font-weight:var(--sb-weight-semibold); text-align:right; font-variant-numeric:tabular-nums; }
details.faq { background:var(--sb-bg-surface); border:1px solid var(--sb-border-default); border-radius:var(--sb-radius-lg); padding:0 var(--sb-space-5); }
details.faq + details.faq { margin-top:var(--sb-space-3); }
details.faq summary { cursor:pointer; padding:var(--sb-space-4) 0; font-weight:var(--sb-weight-semibold); list-style:none; display:flex; justify-content:space-between; gap:var(--sb-space-4); min-height:var(--sb-target-touch); align-items:center; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::after { content:"+"; color:var(--sb-text-brand); font-size:var(--sb-text-3xl); line-height:1; }
details.faq[open] summary::after { content:"–"; }
details.faq p { padding-bottom:var(--sb-space-4); color:var(--sb-text-secondary); }
.quote { font-size:var(--sb-text-lg); color:var(--sb-text-primary); }
.person { display:flex; gap:var(--sb-space-3); align-items:center; }
.avatar { width:44px; height:44px; border-radius:var(--sb-radius-pill); background:linear-gradient(135deg,var(--sb-gold-300),var(--sb-gold-700)); color:var(--sb-n-950); display:grid; place-items:center; font-weight:var(--sb-weight-bold); }
.ba { display:grid; grid-template-columns:1fr 1fr; gap:var(--sb-space-2); }
.ba .media { aspect-ratio:1/1; border-radius:var(--sb-radius-md); }
.banner { background:linear-gradient(135deg,var(--sb-bg-overlay),var(--sb-bg-surface)); border:1px solid var(--sb-gold-600); border-radius:var(--sb-radius-xl); padding:var(--sb-space-8) var(--sb-space-6); display:grid; gap:var(--sb-space-4); justify-items:start; box-shadow:var(--sb-shadow-md); }
.notice { display:flex; gap:var(--sb-space-3); align-items:flex-start; padding:var(--sb-space-3) var(--sb-space-4); border-radius:var(--sb-radius-md); background:var(--sb-info-bg); color:var(--sb-text-primary); font-size:var(--sb-text-md); line-height:var(--sb-lh-md); }
.notice .icon { color:var(--sb-info); margin-top:1px; }
.notice--ok { background:var(--sb-success-bg); } .notice--ok .icon { color:var(--sb-success); }
.notice--err { background:var(--sb-danger-bg); } .notice--err .icon { color:var(--sb-danger); }

/* Table */
.table-wrap { background:var(--sb-bg-surface); border:1px solid var(--sb-border-default); border-radius:var(--sb-radius-lg); overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:560px; }
caption { text-align:left; padding:var(--sb-space-4); font-weight:var(--sb-weight-semibold); color:var(--sb-text-brand); }
th,td { padding:var(--sb-space-3) var(--sb-space-4); text-align:left; border-top:1px solid var(--sb-border-subtle); font-size:var(--sb-text-md); line-height:var(--sb-lh-md); }
th { color:var(--sb-text-secondary); font-weight:var(--sb-weight-medium); }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:hover { background:var(--sb-bg-hover); }

/* Forms */
.form { display:grid; gap:var(--sb-space-4); }
.field { display:grid; gap:var(--sb-space-2); }
.field label { font-weight:var(--sb-weight-medium); font-size:var(--sb-text-md); line-height:var(--sb-lh-md); }
.field input,.field select,.field textarea { min-height:var(--sb-control-md); width:100%; background:var(--sb-bg-raised); color:var(--sb-text-primary); border:1px solid var(--sb-border-control); border-radius:var(--sb-radius-md); padding:var(--sb-space-2) var(--sb-space-3); font:inherit; font-size:var(--sb-text-lg); line-height:var(--sb-lh-lg); }
.field textarea { min-height:112px; resize:vertical; }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible { border-color:var(--sb-focus-ring); }
.field [aria-invalid="true"] { border-color:var(--sb-danger); }
.help { color:var(--sb-text-muted); font-size:var(--sb-text-sm); line-height:var(--sb-lh-sm); }
.err { color:var(--sb-danger); font-size:var(--sb-text-sm); line-height:var(--sb-lh-sm); display:flex; gap:var(--sb-space-2); align-items:flex-start; }
.err[hidden] { display:none; }
.row2 { display:grid; gap:var(--sb-space-4); }
@media (min-width:640px){ .row2{ grid-template-columns:1fr 1fr; } }

/* Footer */
.footer { background:var(--sb-bg-surface); border-top:1px solid var(--sb-border-subtle); padding-block:var(--sb-space-12) var(--sb-space-6); }
.footer .grid { gap:var(--sb-space-8); }
.footer h2 { font-size:var(--sb-text-lg); line-height:var(--sb-lh-lg); margin-bottom:var(--sb-space-3); color:var(--sb-text-brand); }
.footer ul { list-style:none; padding:0; margin:0; display:grid; gap:var(--sb-space-2); }
.footer a { color:var(--sb-text-secondary); font-size:var(--sb-text-md); }
.footer .fine { margin-top:var(--sb-space-8); padding-top:var(--sb-space-4); border-top:1px solid var(--sb-border-subtle); color:var(--sb-text-muted); font-size:var(--sb-text-sm); line-height:var(--sb-lh-sm); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sb-space-3); }
.sticky-cta { position:fixed; inset-inline:var(--sb-space-4); bottom:max(var(--sb-space-4), env(safe-area-inset-bottom)); z-index:var(--sb-z-sticky); display:grid; }
@media (min-width:1024px){ .sticky-cta{ display:none; } }
@media (max-width:1023px){ body{ padding-bottom:80px; } }
.prose { max-width:70ch; display:grid; gap:var(--sb-space-4); }
.prose h2 { font-size:var(--sb-text-3xl); line-height:var(--sb-lh-3xl); margin-top:var(--sb-space-4); }
.prose p { color:var(--sb-text-secondary); }
.meta { color:var(--sb-text-muted); font-size:var(--sb-text-sm); line-height:var(--sb-lh-sm); }