@import url("./tokens/fonts.css");
@import url("./tokens/colors.css");
@import url("./tokens/typography.css");
@import url("./tokens/spacing.css");

/* ============================================================
   오승하 × 소영 결혼준비 운영 시스템 — Warm Operations UI
   Source: Claude Design System folder, applied to legacy HTML v2.
   Goal: keep information architecture, replace visual layer only.
   ============================================================ */

*{box-sizing:border-box}
html{background:var(--bg-app);scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(circle at 16% -10%, rgba(184,124,104,.16), transparent 34rem),
  radial-gradient(circle at 90% 4%, rgba(198,163,91,.16), transparent 26rem),
  linear-gradient(180deg,var(--paper-1),var(--paper-2));
  color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-normal);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--rose-deep);text-underline-offset:3px}a:hover{color:var(--gold-deep)}
.layout{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;background:linear-gradient(180deg,var(--char-1),#211d18);color:var(--ink-on-dark);padding:26px 20px;border-right:1px solid rgba(255,252,247,.08);box-shadow:12px 0 34px rgba(47,42,37,.12)}
.brand{font-family:var(--font-serif);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.035em;margin:0 0 8px;color:var(--ink-on-dark)}
.brand::after{content:"오승하 × 소영";display:block;margin-top:8px;width:max-content;max-width:100%;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(198,163,91,.12);border:1px solid rgba(198,163,91,.28);border-radius:999px;padding:5px 9px}
.sub{font-size:12.5px;color:rgba(247,241,232,.62);line-height:1.65;margin-bottom:22px}
.nav{display:grid;gap:4px}
.nav a{display:flex;align-items:center;gap:9px;min-height:42px;color:rgba(247,241,232,.78);text-decoration:none;padding:10px 12px;border-radius:var(--radius-md);font-size:14px;font-weight:600;border:1px solid transparent;transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft),border-color var(--dur-base) var(--ease-soft),transform var(--dur-fast) var(--ease-out)}
.nav a::before{content:"";width:6px;height:6px;border-radius:999px;background:rgba(247,241,232,.28);flex:0 0 auto}
.nav a:hover::before,.nav a.active::before{background:var(--rose)}
.nav a:hover,.nav a.active{background:rgba(255,252,247,.09);border-color:rgba(255,252,247,.12);color:var(--ink-on-dark);transform:translateX(2px)}
.nav a.active{box-shadow:inset 3px 0 0 var(--rose)}
.main{min-width:0;width:100%;max-width:var(--content-max);padding:30px 32px 72px;margin:0 auto}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--paper-0),var(--paper-2));color:var(--text-heading);border:1px solid var(--line);border-radius:var(--radius-xl);padding:32px 34px;margin-bottom:24px;box-shadow:var(--shadow-md)}
.hero::before{content:"";position:absolute;right:-92px;top:-92px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(184,124,104,.22),transparent 64%)}
.hero::after{content:"Wedding Preparation OS";position:absolute;right:26px;bottom:18px;font-family:var(--font-serif);font-size:17px;color:rgba(184,124,104,.18);letter-spacing:.02em;pointer-events:none}
.hero h1{position:relative;margin:8px 0 8px;font-family:var(--font-serif);font-weight:600;font-size:clamp(28px,3vw,var(--fs-display));line-height:var(--lh-tight);letter-spacing:-.045em;color:var(--text-heading)}
.hero p{position:relative;max-width:820px;margin:0;color:var(--text-body);font-size:var(--fs-lg);line-height:var(--lh-relaxed)}
.tag{position:relative;display:inline-flex;align-items:center;gap:7px;border-radius:var(--radius-pill);background:var(--rose-soft);color:var(--rose-ink);border:1px solid var(--rose-line);padding:6px 11px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em}.tag::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--rose)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card,.usage-mini div,.step{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:19px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;background:var(--rose);border-radius:0 999px 999px 0;opacity:.85}.card:nth-child(2n)::before{background:var(--sage)}.card:nth-child(3n)::before{background:var(--gold)}
.label{color:var(--text-muted);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}.kpi{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-kpi);font-weight:800;line-height:1.15;color:var(--text-heading);letter-spacing:-.035em}.card p{margin:9px 0 0;color:var(--text-body);font-size:var(--fs-sm);line-height:var(--lh-body)}
.warn,.risk,.ok{display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:5px 10px;font-size:var(--fs-xs);font-weight:800;border:1px solid transparent}.warn{background:var(--st-check-soft);color:var(--st-check-ink);border-color:var(--st-check-line)}.risk{background:var(--st-risk-soft);color:var(--st-risk-ink);border-color:var(--st-risk-line)}.ok{background:var(--st-done-soft);color:var(--st-done-ink);border-color:var(--st-done-line)}
.section{margin:26px 0}.section h2{font-family:var(--font-serif);font-size:var(--fs-h2);font-weight:600;letter-spacing:-.03em;color:var(--text-heading);margin:0 0 14px}.section>p{color:var(--text-body);line-height:var(--lh-relaxed)}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;margin:16px 0;box-shadow:var(--shadow-sm)}th,td{padding:13px 14px;border-bottom:1px solid var(--border-divider);text-align:left;vertical-align:top}th{background:var(--char-1);color:var(--ink-on-dark);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em}td{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-body)}tr:last-child td{border-bottom:0}td:first-child,td:nth-child(2){font-variant-numeric:tabular-nums}tbody tr:hover td,table tr:hover td{background:rgba(246,239,231,.52)}
.flow{display:grid;gap:12px}.step{border-left:0}.step::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--sage)}.flow .step span{display:block;color:var(--text-muted);font-size:var(--fs-sm);margin-top:6px;line-height:var(--lh-body)}
.diagram-card{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-xl);padding:18px;box-shadow:var(--shadow-sm);overflow:auto}.diagram-card svg{width:100%;min-width:860px;height:auto;display:block}.usage-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.usage-mini div{box-shadow:var(--shadow-xs)}.usage-mini b{display:block;color:var(--rose-ink);margin-bottom:8px;font-weight:800}.usage-mini span{font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-body)}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--rose);color:white;text-decoration:none;border-radius:var(--radius-pill);padding:12px 17px;font-weight:800;box-shadow:var(--shadow-sm);transition:background var(--dur-base) var(--ease-soft),transform var(--dur-fast) var(--ease-out)}.cta:hover{background:var(--rose-deep);color:white;transform:translateY(-1px)}
.sheet-action-panel{background:linear-gradient(135deg,var(--paper-0),var(--sage-soft));border:1px solid var(--sage-line);border-radius:var(--radius-xl);padding:20px;margin:24px 0;box-shadow:var(--shadow-md)}.sheet-action-panel h2{margin-top:0}.sheet-action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.sheet-action-grid button{border:0;border-radius:var(--radius-md);padding:13px 12px;background:var(--rose);color:white;font-weight:800;cursor:pointer;box-shadow:var(--shadow-xs);transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-base) var(--ease-soft)}.sheet-action-grid button:hover{transform:translateY(-1px);filter:brightness(.97)}.sheet-action-grid button:nth-child(2){background:var(--sage-deep)}.sheet-action-grid button:nth-child(3){background:var(--gold-deep)}.sheet-action-grid button:nth-child(4){background:var(--char-2)}.sheet-action-inputs{display:grid;grid-template-columns:180px 1fr;gap:10px}.sheet-action-inputs input{border:1px solid var(--border-card);background:var(--paper-0);color:var(--text-body);border-radius:var(--radius-md);padding:11px 12px;font-size:14px;outline:0}.sheet-action-inputs input:focus{box-shadow:var(--shadow-focus);border-color:var(--rose-line)}.sheet-action-status{margin-top:10px;color:var(--rose-ink);font-weight:800}.sheet-action-note{font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-body)}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{position:sticky;top:0;z-index:20;height:auto;max-height:none;padding:14px 14px 10px;background:linear-gradient(180deg,var(--char-1),#211d18);box-shadow:0 10px 24px rgba(47,42,37,.22)}
  .brand{font-size:18px;margin-bottom:6px}.brand::after{display:inline-flex;margin-top:6px;font-size:10px;padding:4px 8px}.sub{display:none}
  .nav{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;scroll-snap-type:x proximity}.nav::-webkit-scrollbar{height:4px}.nav::-webkit-scrollbar-thumb{background:rgba(255,252,247,.22);border-radius:999px}
  .nav a{flex:0 0 auto;min-height:34px;white-space:nowrap;padding:8px 11px;font-size:12.5px;scroll-snap-align:start}.nav a:hover,.nav a.active{transform:none}.nav a.active{box-shadow:inset 0 -2px 0 var(--rose)}
  .main{padding:18px 14px 56px}.grid,.grid3,.usage-mini,.sheet-action-grid,.sheet-action-inputs{grid-template-columns:1fr}.hero{padding:22px 18px;margin-bottom:18px}.hero::after{display:none}.section{overflow-x:auto}.section table{min-width:560px}.diagram-card svg{min-width:680px}.sheet-action-panel{padding:16px}
}
@media(max-width:520px){
  .hero h1{font-size:27px}th,td{padding:11px 10px}.kpi{font-size:25px}.card,.usage-mini div,.step{padding:16px}.sheet-action-grid button{width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}