/* P8 design-d 2026-10-21 — SubCheck. Loaded last. Tokens: SubCheck/DESIGN_TOKENS.md (refero "Wise": forest ink + lime action on paper).
   Radius 8 (controls, cards) / 4 (small marks) + full only for tags and chips. No shadows, no gradients.
   Lime is a fill only (never text on light); one lime element per area. */
:root{
  --p8-paper:#ffffff;      /* Wise Paper */
  --p8-fog:#e8ebe6;        /* Fog: section bands, table head, hover, hairlines */
  --p8-pebble:#868685;     /* Pebble: input borders (3.6:1), placeholders */
  --p8-ink:#0e0f0c;        /* Obsidian: headings, amounts */
  --p8-text:#454745;       /* Charcoal: body */
  --p8-sub:#6a6c6a;        /* Slate: secondary (5.3:1 on white) */
  --p8-forest:#163300;     /* Forest Ink: dark bands, outlines, current location */
  --p8-lime:#9fe870;       /* Lime Voltage: primary fill only */
  --p8-red:#cb272f;        /* Alarm Red */
  --p8-blue:#0b4c72;       /* Signal Blue: info */
  --p8-ok:#054d28;         /* Spruce */
  --p8-warn:#8a5a00;       /* existing AA amber (Wise has no amber) */
  --bg:var(--p8-paper);--surface:#fff;--surface-2:var(--p8-paper);--line:var(--p8-fog);--line-2:var(--p8-fog);
  --ink:var(--p8-ink);--muted:var(--p8-sub);--muted-2:var(--p8-pebble);--green:var(--p8-forest);--green-2:var(--p8-forest);
  --mint:var(--p8-fog);--mint-2:var(--p8-fog);--danger:var(--p8-red);--danger-bg:#fff;--warn:var(--p8-warn);--warn-bg:#fff;
  --blue:var(--p8-blue);--blue-bg:#fff;--shadow:none;--radius:8px;
}
body{color:var(--p8-text);background:var(--p8-paper)}
h1,h2,h3,.card-title,.service-name{color:var(--p8-ink)}
:focus-visible{outline:2px solid var(--p8-forest)!important;outline-offset:2px!important}

/* ---------- Buttons: primary (lime fill) / secondary (forest outline) / text (underlined) × hover · focus · active · disabled · loading ---------- */
.btn{height:auto;min-height:40px;padding:0 16px;border:1px solid var(--p8-forest);border-radius:8px;background:#fff;color:var(--p8-forest);font-size:14px;font-weight:600;letter-spacing:0;box-shadow:none;transition:background-color .15s,color .15s,filter .15s}
.btn:hover:not(:disabled):not([aria-disabled=true]){background:var(--p8-fog)}
.btn:active:not(:disabled){background:var(--p8-fog);box-shadow:inset 0 0 0 1px var(--p8-forest)}
.btn.primary{background:var(--p8-lime);border-color:var(--p8-lime);color:var(--p8-forest)}
.btn.primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--p8-lime);filter:brightness(.94)}
.btn.primary:active:not(:disabled){background:var(--p8-forest);border-color:var(--p8-forest);color:var(--p8-lime);filter:none;box-shadow:none}
.btn.ghost{border-color:transparent;background:transparent;color:var(--p8-forest);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.btn.ghost:hover:not(:disabled){background:var(--p8-fog);text-decoration-thickness:2px}
.btn.danger{border-color:var(--p8-red);color:var(--p8-red);background:#fff}
.btn.danger:hover:not(:disabled){background:#fff;box-shadow:inset 0 0 0 1px var(--p8-red)}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px}
.btn.lg{min-height:48px;padding:0 24px;font-size:16px}
.btn[disabled],.btn:disabled,.btn[aria-disabled=true]{opacity:1;background:var(--p8-fog);border-color:var(--p8-fog);color:var(--p8-sub);text-decoration:none;filter:none;cursor:not-allowed}
.btn.is-busy,.btn.is-loading,.btn[aria-busy=true]{opacity:1;position:relative;color:transparent!important;pointer-events:none}
.btn.is-busy::after,.btn.is-loading::after,.btn[aria-busy=true]::after{content:'';position:absolute;left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;border:2px solid var(--p8-forest);border-right-color:transparent;border-radius:50%;animation:p8spin .7s linear infinite}
@keyframes p8spin{to{transform:rotate(360deg)}}

/* ---------- Forms + inline errors ---------- */
.field,.top-search{border-radius:8px;border-color:var(--p8-pebble)}
.field{height:auto;min-height:44px;color:var(--p8-ink)}
.field.area{min-height:88px}
.field:hover:not(:disabled){border-color:var(--p8-text)}
.field:focus,.field:focus-visible{border-color:var(--p8-forest);box-shadow:0 0 0 1px var(--p8-forest);outline:none!important}
.field::placeholder{color:var(--p8-pebble)}
.label{font-size:14px;font-weight:600;color:var(--p8-ink)}
[aria-invalid=true],.field[aria-invalid="true"]{border-color:var(--p8-red)!important;box-shadow:0 0 0 1px var(--p8-red)!important}
.field-error,.p8-field-error{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;color:var(--p8-red);font-size:13px;font-weight:600;line-height:1.5}
.field-error::before,.p8-field-error::before{content:'오류';flex:none;padding:0 6px;border:1px solid currentColor;border-radius:4px;font-size:13px;line-height:18px;font-weight:600}
.check-row{font-size:14px;color:var(--p8-text)}
.check-row input{accent-color:var(--p8-forest);width:18px;height:18px}

/* ---------- Surfaces ---------- */
.card{border:1px solid var(--p8-fog);border-radius:8px;box-shadow:none}
.card-title{font-size:17px;font-weight:600;letter-spacing:-.01em}
.soft-box,.warning-box{border-radius:8px}
.badge{min-height:24px;padding:0 9px;border:1px solid currentColor;border-radius:999px;background:transparent;color:var(--p8-forest);font-size:13px;font-weight:600}
.badge.red{background:transparent;color:var(--p8-red)}
.badge.yellow{background:transparent;color:var(--p8-warn)}
.badge.blue{background:transparent;color:var(--p8-blue)}
.badge.gray{background:transparent;color:var(--p8-text)}
.pill-tab,.chip{height:auto;min-height:36px;padding:0 14px;border:1px solid var(--p8-fog);border-radius:999px;background:#fff;color:var(--p8-text);font-size:14px;font-weight:600}
.pill-tab:hover,.chip:hover{border-color:var(--p8-forest)}
.pill-tab.active,.chip.active{background:var(--p8-forest);border-color:var(--p8-forest);color:#fff}
.settings-tabs .pill-tab{border-radius:8px}
.toggle{background:var(--p8-pebble)}
.toggle.on{background:var(--p8-forest)}
.toggle:after{box-shadow:none}
.toast,.toast-stack .toast{background:var(--p8-forest);border-radius:8px;box-shadow:none;font-size:14px}
.toast .check{background:var(--p8-lime);color:var(--p8-forest)}
.toast-stack .toast.error{background:#5c1d1c}
.modal{border-radius:8px;box-shadow:none;border:1px solid var(--p8-pebble)}
.modal-head h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.modal-head p{font-size:14px;color:var(--p8-sub)}
.overlay,.sheet-backdrop{background:rgba(14,15,12,.55)}
.drawer{box-shadow:none;border-left:1px solid var(--p8-pebble)}
.drop-menu{border-radius:8px;box-shadow:none;border:1px solid var(--p8-pebble)}
.drop-menu a{min-height:40px;display:flex;align-items:center;font-size:14px}
.drop-menu a:hover,.drop-menu a.active{background:var(--p8-fog);color:var(--p8-forest)}
.drop-zone{border-radius:8px;border-color:var(--p8-pebble)}
.drop-zone.drag{background:var(--p8-fog);border-color:var(--p8-forest)}

/* ---------- Work screens: dense, left-aligned ---------- */
.sidebar{border-right:1px solid var(--p8-fog);background:#fff}
.side-link{height:44px;border-radius:8px;color:var(--p8-text);font-weight:400;gap:12px}
.side-link:hover{background:var(--p8-fog)}
.side-link.active{background:var(--p8-fog);color:var(--p8-forest);font-weight:600;box-shadow:inset 3px 0 0 var(--p8-forest)}
.sidebar-note{background:transparent;border-top:1px solid var(--p8-fog);border-radius:0;color:var(--p8-sub);font-size:13px}
.topbar{border-bottom:1px solid var(--p8-fog)}
.top-search{height:40px;background:#fff;color:var(--p8-sub)}
.page-head{margin-bottom:20px}
.page-head h1{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--p8-ink)}
.page-head p{font-size:14px;color:var(--p8-sub)}
.kpi-grid{gap:12px}
.kpi{min-height:88px;padding:16px}
.kpi .cap{font-size:13px;font-weight:600;color:var(--p8-sub)}
.kpi strong{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--p8-ink);font-variant-numeric:tabular-nums}
.kpi .kpi-icon{border-radius:4px;background:var(--p8-fog);color:var(--p8-forest)}
/* Reading order 2: the money figure sits on the one forest panel (lime figure on forest, Wise DO). */
.kpi-grid>.kpi:nth-child(2){background:var(--p8-forest);border-color:var(--p8-forest)}
.kpi-grid>.kpi:nth-child(2) .cap,.kpi-grid>.kpi:nth-child(2) small,.kpi-grid>.kpi:nth-child(2) span{color:var(--p8-fog)}
.kpi-grid>.kpi:nth-child(2) strong{color:var(--p8-lime)}
.data-table{font-size:14px}
.data-table th{height:36px;color:var(--p8-sub);font-size:13px;font-weight:600;border-bottom:1px solid var(--p8-pebble)}
.data-table td{height:44px;border-bottom:1px solid var(--p8-fog);color:var(--p8-text)}
.data-table .amount{color:var(--p8-ink);font-weight:600;font-variant-numeric:tabular-nums}
.data-table tr[data-go]:hover td{background:var(--p8-fog)}
/* Dense rows: per-row actions are text level so the page primary stays the only filled button. */
.data-table .btn:not(.primary):not(.danger){border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:4px;min-height:36px;padding:0 8px}
.data-table .btn:not(.primary):not(.danger):hover{background:var(--p8-fog)}
/* Side summary next to the list: its action is secondary to the page's add button. */
.work-grid .summary-card .btn.primary{background:#fff;border-color:var(--p8-forest);color:var(--p8-forest)}
.chart-area .bar{background:var(--p8-forest)!important;background-image:none!important;border-radius:4px 4px 0 0}
.chart-area .bar:hover,.chart-area .bar:focus-visible{background:var(--p8-ink)!important}
.summary-card .service-name{font-weight:800}
.summary-card .meta{font-size:14px;color:var(--p8-sub)}
.cal-cell{border-color:var(--p8-fog);color:var(--p8-text)}
.cal-cell.other{background:#fff;color:var(--p8-pebble)}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--p8-forest)}
.cal-cell .event{background:var(--p8-fog);color:var(--p8-forest);border-radius:4px}
.cal-total{font-weight:800;color:var(--p8-ink)}
.choice-card{border-radius:8px}
.choice-card.active{border-color:var(--p8-forest);box-shadow:inset 0 0 0 1px var(--p8-forest)}
.timeline-item{border-color:var(--p8-fog)}

/* First use: say what is missing + one next action, left-aligned (no centred icon tile). */
.empty{min-height:0;align-items:flex-start;justify-content:flex-start;text-align:left;padding:32px;border-left:3px solid var(--p8-forest)}
.empty-icon{width:40px;height:40px;border-radius:4px;background:var(--p8-fog);color:var(--p8-forest);margin-bottom:16px}
.empty h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.empty p{font-size:14px;color:var(--p8-sub);max-width:520px}
.empty>div{display:flex;flex-wrap:wrap;gap:8px}
.empty .btn{min-height:44px}
/* One primary per screen: while the screen is empty its own empty card carries the add action, so the header copy steps down. */
:is(.workspace-main,.mobile-body):has(.card.empty) .page-head .btn.primary,.mobile-page:has(.card.empty) h1+.btn.primary{background:#fff;border-color:var(--p8-forest);color:var(--p8-forest)}

/* Mobile app chrome */
.mobile-top{border-bottom:1px solid var(--p8-fog)}
.mobile-nav{border-top:1px solid var(--p8-fog)}
.mobile-nav a{color:var(--p8-sub);font-size:13px}
.mobile-nav a.active{color:var(--p8-forest);font-weight:600;box-shadow:inset 0 2px 0 var(--p8-forest)}
.mobile-card,.mobile-kpi{border-radius:8px}
.mobile-cal .cal-cell{border-radius:4px;border-color:var(--p8-fog)}
.mobile-cal .cal-dot{background:var(--p8-forest)}

/* ---------- Public pages: Wise rhythm — white sections, one forest band ---------- */
.public-header{border-bottom:1px solid var(--p8-fog);background:#fff}
.public-nav a{color:var(--p8-text);font-size:15px}
.public-nav a:hover,.public-nav a.active{color:var(--p8-forest);text-decoration:underline;text-underline-offset:6px}
/* The hero owns the page's primary action; the header copy is a secondary outline. */
.public-actions .btn.primary{background:#fff;border-color:var(--p8-forest);color:var(--p8-forest)}
.public .hero{background:#fff}
.public .hero h1{font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--p8-ink)}
.public .hero h1 :is(em,span,strong,b){color:var(--p8-forest);font-style:normal}
.public .hero h1 em{display:block}
.public .hero p{color:var(--p8-text);font-size:17px}
.public .eyebrow{color:var(--p8-forest);font-weight:600;letter-spacing:0}
.public .hero-actions .btn{min-height:48px;padding:0 24px;font-size:16px}
.public .hero-demo{border:1px solid var(--p8-pebble);border-radius:8px;box-shadow:none}
/* Wise rhythm: the strip under the hero is a forest band (white on forest), echoed by the closing CTA. */
.public .trust-strip{background:var(--p8-forest);border:0;border-radius:8px;box-shadow:none}
.public .trust-item{border-right-color:rgba(255,255,255,.18)}
.public .trust-item strong{color:#fff;font-weight:800;letter-spacing:-.02em}
.public .trust-item span{color:var(--p8-fog);font-size:14px}
.public .section.tint{background:var(--p8-fog)}
.public .section-head h2,.public .public-title h1{font-weight:800;letter-spacing:-.03em;color:var(--p8-ink)}
.public .feature-card,.public .price-card,.public .reason-card{border:1px solid var(--p8-fog);border-radius:8px;box-shadow:none}
.public .section.tint :is(.feature-card,.price-card,.reason-card){border-color:#fff}
.public .feature-card .fi,.public .avatar-letter{border-radius:4px;background:var(--p8-fog);color:var(--p8-forest)}
.public .cta-strip{background:var(--p8-forest);border-radius:8px}
.public .cta-strip :is(h2,h3){color:#fff}
.public .cta-strip p{color:var(--p8-fog)}
.public .cta-strip .btn:not(.primary){background:transparent;border-color:#fff;color:#fff}
.public .cta-strip .btn:not(.primary):hover{background:rgba(255,255,255,.12)}
.public .faq-button{min-height:48px}
.public-footer{border-top:1px solid var(--p8-fog)}
.auth-page{background:var(--p8-fog)}
.auth-card{border:1px solid var(--p8-fog);border-radius:8px;box-shadow:none}
.auth-title{color:var(--p8-ink);font-weight:800;letter-spacing:-.02em}

/* ---------- Touch: 44px targets on small screens ---------- */
@media (max-width:760px){
  .btn,.btn.sm,.pill-tab,.chip,.field,.top-search,.drop-menu a,.side-link{min-height:44px}
  .public-nav a,.public-footer a,.footer-links a,.auth-foot a,.auth-card a,.check-row a,.mobile-top a,.mobile-top button,.logo{min-height:44px;display:inline-flex;align-items:center}
  .toggle{width:60px;height:44px;border:11px solid transparent;background-clip:padding-box;outline-offset:-6px}
  .empty{padding:24px}
  .public .hero h1{font-size:28px}
  .data-table .btn:not(.primary):not(.danger){min-height:44px}
  .mobile-card h2 a,.card-title a,.section-head a{min-height:44px;display:inline-flex;align-items:center}
  .kpi strong{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}