/* P8 design-c 2026-10-21 — SourceTrail. Loaded last. Tokens: SourceTrail/DESIGN_TOKENS.md (refero "Seline": analyst's desk
   on warm stone). Whisper-weight headings, one cyan signal. Radius 8 (cards, controls) / 4 (marks) + full for chips. */
body.sourcetrail{
  --p8-canvas:#fafaf9;      /* Seline Stone Canvas */
  --p8-surface:#ffffff;     /* Pure White: cards only */
  --p8-line:#e8e6e5;        /* Stone Border */
  --p8-line-strong:#d6d3d1; /* Stone Muted */
  --p8-ink:#0c0a09;         /* Ink Black: headings, figures */
  --p8-text:#1c1917;        /* Soot: body */
  --p8-sub:#78716c;         /* Warm Gray: secondary (4.6:1 on canvas) */
  --p8-quiet:#a8a29e;       /* Ash Gray: placeholders, disabled */
  --p8-accent:#3398e1;      /* Cyan Edge: primary fill (ink text), chart line */
  --p8-accent-2:#3ba6f1;    /* Cyan Signal: hover */
  --p8-wash:#c1e1f7;        /* Sky Wash: current location, headline highlight */
  --p8-success:#167a4e; --p8-danger:#c4262b; --p8-warn:#b45309;
  --p8-r-ctl:8px; --p8-r-box:8px; --p8-r-mark:4px;
  --ink:var(--p8-ink); --muted:var(--p8-sub); --line:var(--p8-line); --surface:#fff; --bg:var(--p8-canvas);
  --accent:var(--p8-ink); --soft:var(--p8-wash); /* legacy rules use --accent as text: ink keeps AA */ --success:var(--p8-success); --danger:var(--p8-danger); --radius:8px;
  background:var(--p8-canvas); color:var(--p8-text);
}
body.sourcetrail h1,body.sourcetrail h2,body.sourcetrail h3{color:var(--p8-ink)}
body.sourcetrail a.text-link{color:var(--p8-ink);text-decoration:underline;text-decoration-color:var(--p8-accent);text-decoration-thickness:2px;text-underline-offset:4px}
body.sourcetrail :focus-visible{outline:2px solid var(--p8-ink);outline-offset:2px}

/* ---------- Buttons: primary / secondary / text; hover · focus · active · disabled · loading ---------- */
body.sourcetrail .btn{min-height:40px;padding:0 16px;border:1px solid var(--p8-line-strong);border-radius:var(--p8-r-ctl);background:var(--p8-surface);color:var(--p8-ink);font-size:14px;font-weight:600;box-shadow:none;transition:background-color .15s,border-color .15s,color .15s}
body.sourcetrail .btn:hover:not(:disabled){border-color:var(--p8-ink);background:#fff}
body.sourcetrail .btn:active:not(:disabled){background:var(--p8-line);transform:none}
body.sourcetrail .btn.primary{background:var(--p8-accent);border-color:var(--p8-accent);color:var(--p8-ink)}
body.sourcetrail .btn.primary:hover:not(:disabled){background:var(--p8-accent-2);border-color:var(--p8-accent-2);filter:none}
body.sourcetrail .btn.primary:active:not(:disabled){background:var(--p8-accent);box-shadow:inset 0 2px 0 rgba(12,10,9,.18)}
body.sourcetrail .btn.ghost{background:transparent;border-color:transparent;color:var(--p8-text)}
body.sourcetrail .btn.ghost:hover:not(:disabled){background:var(--p8-line);border-color:transparent}
body.sourcetrail .btn.small{min-height:40px;padding:0 12px;font-size:13px}
body.sourcetrail .btn:disabled,body.sourcetrail .btn[aria-disabled=true]{opacity:1;background:var(--p8-canvas);border-color:var(--p8-line);color:var(--p8-quiet);cursor:not-allowed}
body.sourcetrail .btn.primary:disabled,body.sourcetrail .btn.primary[aria-disabled=true]{background:var(--p8-line);border-color:var(--p8-line);color:var(--p8-sub)}
body.sourcetrail .btn.is-loading,body.sourcetrail .btn[aria-busy=true]{position:relative;color:transparent!important;pointer-events:none}
body.sourcetrail .btn.is-loading::after,body.sourcetrail .btn[aria-busy=true]::after{content:'';position:absolute;inset:calc(50% - 8px) auto auto calc(50% - 8px);width:16px;height:16px;border:2px solid var(--p8-ink);border-right-color:transparent;border-radius:50%;animation:p8spin .7s linear infinite}
@keyframes p8spin{to{transform:rotate(360deg)}}

/* ---------- Forms + inline errors ---------- */
body.sourcetrail input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body.sourcetrail select,body.sourcetrail textarea{border-radius:var(--p8-r-ctl);border-color:var(--p8-line-strong);background-color:#fff}
body.sourcetrail input:focus,body.sourcetrail select:focus,body.sourcetrail textarea:focus{border-color:var(--p8-ink);box-shadow:0 0 0 3px var(--p8-wash);outline:none}
body.sourcetrail input::placeholder{color:var(--p8-quiet)}
body.sourcetrail [aria-invalid=true]{border-color:var(--p8-danger)!important;box-shadow:0 0 0 1px var(--p8-danger)!important}
body.sourcetrail .p8-field-error{display:flex;gap:6px;margin:6px 0 0;color:var(--p8-danger);font-size:13px;font-weight:600;line-height:1.5}
body.sourcetrail .p8-field-error::before,body.sourcetrail .form-error:not([hidden])::before{content:'오류';flex:none;padding:0 6px;border:1px solid currentColor;border-radius:var(--p8-r-mark);font-size:12px;line-height:18px;height:20px;font-weight:600}
body.sourcetrail .form-error:not([hidden]){display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid #f1c9ca;border-radius:var(--p8-r-box);background:#fff;color:var(--p8-danger);font-size:14px;font-weight:600}

/* ---------- Public pages ---------- */
body.sourcetrail .public-header{background:var(--p8-canvas);border-bottom:0;backdrop-filter:none}
body.sourcetrail .public-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--p8-r-ctl);color:var(--p8-sub);font-size:15px}
body.sourcetrail .public-header nav a:hover{color:var(--p8-ink)}
body.sourcetrail .public-header nav a.active{color:var(--p8-ink);background:var(--p8-line);box-shadow:none;font-weight:600}
body.sourcetrail .public-header nav a.active::after,body.sourcetrail .public-header nav a.active::before{display:none}
body.sourcetrail .public-header .btn.primary{background:#fff;border-color:var(--p8-line-strong);color:var(--p8-ink)}
body.sourcetrail .public-header .btn.primary:hover{border-color:var(--p8-ink)}
body.sourcetrail .public-header .button-row>a:not(.btn){display:inline-flex;align-items:center;min-height:44px;color:var(--p8-sub)}
body.sourcetrail .hero-wrap{background:var(--p8-canvas)}
body.sourcetrail .hero{min-height:0;padding-top:88px;padding-bottom:96px;gap:64px}
body.sourcetrail .hero h1{font-size:clamp(34px,3.4vw,48px);font-weight:400;line-height:1.22;letter-spacing:-.025em;margin:16px 0 24px;color:var(--p8-ink)}
/* Seline: one highlighted phrase per headline (ink on Sky Wash). */
body.sourcetrail .hero h1 em{font-style:normal;color:var(--p8-ink);background:var(--p8-wash);border-radius:var(--p8-r-mark);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body.sourcetrail .hero p{font-size:17px;line-height:1.75;color:var(--p8-sub);max-width:32em}
body.sourcetrail .hero .button-row .btn{min-height:48px;padding:0 22px;font-size:15px}
body.sourcetrail .eyebrow{color:var(--p8-sub);letter-spacing:.06em;font-size:13px;font-weight:600}
body.sourcetrail .hero-preview>*{border-radius:var(--p8-r-box)!important;border:1px solid var(--p8-line);box-shadow:0 16px 40px -16px rgba(28,25,23,.18)!important;background:#fff}
body.sourcetrail .hero-preview .kpi{box-shadow:none}
body.sourcetrail .positive{color:var(--p8-success)}
body.sourcetrail .public-section{padding-top:96px;padding-bottom:96px}
body.sourcetrail .public-section:nth-of-type(even){background:#fff;border-top:1px solid var(--p8-line);border-bottom:1px solid var(--p8-line)}
body.sourcetrail .public-copy h2,body.sourcetrail .public-section h2{font-size:clamp(24px,2.3vw,32px);font-weight:400;line-height:1.35;letter-spacing:-.02em}
body.sourcetrail .public-copy p{font-size:16px;line-height:1.75;color:var(--p8-sub)}
body.sourcetrail .feature-card{border-radius:var(--p8-r-box);border:1px solid var(--p8-line);background:#fff;box-shadow:none;padding:24px}
body.sourcetrail .feature-card h3{font-size:18px;font-weight:600}
body.sourcetrail .feature-card p{font-size:15px;color:var(--p8-sub)}
body.sourcetrail .channel-bar{border-radius:var(--p8-r-mark)}
body.sourcetrail .cta-banner{background:#fff;border:1px solid var(--p8-line);border-radius:var(--p8-r-box);padding:48px}
body.sourcetrail .cta-banner h2{font-weight:400;font-size:clamp(22px,2vw,28px)}
body.sourcetrail .cta-banner p{color:var(--p8-sub)}
body.sourcetrail .public-footer{background:var(--p8-canvas);border-top:1px solid var(--p8-line)}
body.sourcetrail .public-footer a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Work screens ---------- */
body.sourcetrail .topbar{background:var(--p8-canvas);border-bottom:1px solid var(--p8-line)}
body.sourcetrail .sidebar{background:var(--p8-canvas);border-right:1px solid var(--p8-line)}
body.sourcetrail .sidebar .brand{color:var(--p8-ink)}
body.sourcetrail .nav-link{color:var(--p8-sub);border-radius:var(--p8-r-ctl);min-height:40px;font-size:14px}
body.sourcetrail .nav-link:hover{background:var(--p8-line);color:var(--p8-ink)}
body.sourcetrail .nav-link.active{background:#fff;color:var(--p8-ink);font-weight:600;box-shadow:0 0 0 1px var(--p8-line)}
body.sourcetrail .nav-link.active:before{background:var(--p8-accent);left:-13px;border-radius:0 2px 2px 0}
body.sourcetrail .sidebar-status{border-radius:var(--p8-r-box);background:#fff;border:1px solid var(--p8-line)}
body.sourcetrail .workspace>header h1,body.sourcetrail .workspace h1{font-weight:400;font-size:26px;letter-spacing:-.02em}
body.sourcetrail .panel{border-radius:var(--p8-r-box);border-color:var(--p8-line);box-shadow:none;background:#fff}
body.sourcetrail .panel h2{font-weight:600;font-size:17px}
body.sourcetrail .kpi{border-radius:var(--p8-r-box);border-color:var(--p8-line);box-shadow:none;background:#fff}
body.sourcetrail .kpi .value{font-weight:400;font-size:30px;color:var(--p8-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
body.sourcetrail .data-table th{background:var(--p8-canvas);color:var(--p8-sub);font-size:13px;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--p8-line)}
body.sourcetrail .data-table td{padding:10px 12px;border-bottom:1px solid var(--p8-line);font-size:14px}
body.sourcetrail .data-table td small{color:var(--p8-sub)}
body.sourcetrail .badge{border-radius:999px;background:var(--p8-canvas);color:var(--p8-ink);border:1px solid var(--p8-line-strong);font-weight:600}
body.sourcetrail .badge.amber{background:#fff;color:var(--p8-warn);border-color:#f3d3a8}
body.sourcetrail .badge.green{background:#fff;color:var(--p8-success);border-color:#c7e9d9}
body.sourcetrail .badge.red{background:#fff;color:var(--p8-danger);border-color:#f1c9ca}
body.sourcetrail .tabs button[aria-selected=true],body.sourcetrail .tabs .active{color:var(--p8-ink);box-shadow:inset 0 -2px 0 var(--p8-accent)}
body.sourcetrail .source-guide{border-radius:var(--p8-r-box);background:#fff;border:1px solid var(--p8-line)}
body.sourcetrail .st-first-run{border-radius:var(--p8-r-box);border:1px solid var(--p8-line);box-shadow:none}
body.sourcetrail .st-step{border-radius:var(--p8-r-box);border-color:var(--p8-line);background:#fff}
body.sourcetrail .st-step.is-current{border-color:var(--p8-ink);background:#fff;box-shadow:inset 3px 0 0 var(--p8-accent)}
body.sourcetrail .st-step-num{background:var(--p8-canvas);color:var(--p8-ink);border:1px solid var(--p8-line-strong)}
body.sourcetrail .st-step.is-current .st-step-num{background:var(--p8-wash);border-color:var(--p8-wash)}
body.sourcetrail .st-step.is-done .st-step-num{background:var(--p8-success);border-color:var(--p8-success);color:#fff}
body.sourcetrail .st-empty-next{color:var(--p8-ink)}
body.sourcetrail .modal,body.sourcetrail [role=dialog]{border-radius:var(--p8-r-box)}

@media (max-width:768px),(pointer:coarse){
  body.sourcetrail .btn,body.sourcetrail .btn.small,body.sourcetrail .nav-link{min-height:44px}
  body.sourcetrail .btn.icon-only{min-width:44px}
  body.sourcetrail .public-footer a,body.sourcetrail .rv-biz a{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:768px){
  body.sourcetrail .hero{padding-top:40px;padding-bottom:48px;gap:32px}
  body.sourcetrail .public-section{padding-top:56px;padding-bottom:56px}
  body.sourcetrail .cta-banner{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){body.sourcetrail *{transition:none!important;animation:none!important}}

/* Touch targets for links and icon controls on phones/tablets. */
@media (max-width:768px),(pointer:coarse){
  body.sourcetrail a.brand,body.sourcetrail .team,body.sourcetrail .topbar-icon,body.sourcetrail .source-notification-button,body.sourcetrail .source-guide-toggle,body.sourcetrail .text-link,body.sourcetrail .public-header .btn,body.sourcetrail form a,body.sourcetrail .auth-links a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  body.sourcetrail .text-link,body.sourcetrail form a{justify-content:flex-start}
  body.sourcetrail .btn.menu,body.sourcetrail .mobile-menu{min-height:44px}
  body.sourcetrail input:not([type=checkbox]):not([type=radio]),body.sourcetrail select{min-height:44px!important}
}
/* B43 header actions were 36px; the button scale is 40 (desktop) / 44 (touch). */
body.sourcetrail .workspace>header .button-row .btn,body.sourcetrail .workspace>header .button-row .btn.primary{min-height:40px}
@media (max-width:768px),(pointer:coarse){body.sourcetrail .btn{min-height:44px!important}}
