/* COREON Design System v1 (2026-10-03)
 * One visual language for every customer-facing product screen.
 * Loaded after page styles; it normalises type, colour, surfaces and the shared chrome
 * without changing page behaviour. Tokens are the single source of truth.
 */
@font-face{font-family:"Pretendard Variable";font-weight:45 920;font-style:normal;font-display:swap;src:url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations")}

:root{
  --cx-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Hiragino Sans","Noto Sans JP","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --cx-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* neutrals */
  --cx-bg:#F4F6F9; --cx-surface:#FFFFFF; --cx-surface-2:#F8FAFC; --cx-border:#DCE2EA; --cx-border-strong:#C5CFDB;
  --cx-text:#0E1726; --cx-text-2:#3B4A5C; --cx-muted:#5F6E80; --cx-faint:#8C99A8;
  /* brand */
  --cx-ink:#0A1A2F; --cx-ink-2:#13294A; --cx-accent:#0E7C74; --cx-accent-hover:#0A635D; --cx-accent-soft:#E6F4F2;
  /* semantic */
  --cx-danger:#B42318; --cx-danger-soft:#FEF3F2; --cx-warning:#B54708; --cx-warning-soft:#FFFAEB; --cx-success:#067647; --cx-success-soft:#ECFDF3; --cx-info:#175CD3; --cx-info-soft:#EFF8FF;
  /* shape */
  --cx-r-sm:6px; --cx-r:10px; --cx-r-lg:14px;
  --cx-shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --cx-shadow-2:0 4px 12px rgba(16,24,40,.08);
  /* type scale */
  --cx-fs-xs:12px; --cx-fs-sm:13px; --cx-fs:15px; --cx-fs-md:17px; --cx-fs-lg:20px; --cx-fs-xl:26px; --cx-fs-2xl:32px;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--cx-font)!important;color:var(--cx-text);background:var(--cx-bg);letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum" 0}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{letter-spacing:-0.018em;color:inherit}
code,pre,.mono,kbd{font-family:var(--cx-mono)}
b,strong{font-weight:700}
:where(table) td,:where(table) th,.kpi b,.kpi strong,.metric b{font-variant-numeric:tabular-nums}
::selection{background:#CDEBE7}
:focus-visible{outline:2px solid var(--cx-accent)!important;outline-offset:2px!important}

/* ---------- shared product chrome ---------- */
.coreon-product-nav{position:sticky!important;top:0!important;z-index:900;display:flex;align-items:center;gap:4px;min-height:56px;padding:0 20px!important;background:var(--cx-ink)!important;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none!important;overflow-x:auto;scrollbar-width:none;font-family:var(--cx-font)}
.coreon-product-nav::-webkit-scrollbar{display:none}
.coreon-product-nav .brand{display:inline-flex;align-items:center;gap:10px;margin-right:18px;color:#fff!important;font-size:15px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;text-decoration:none;background:none!important;border:0!important;padding:0!important}
.coreon-product-nav .brand:before{content:"";width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#19A595,#0E7C74);box-shadow:none;font-size:0}
.coreon-product-nav a{display:inline-flex;align-items:center;min-height:56px;padding:0 12px;border-radius:0!important;border:0!important;border-bottom:2px solid transparent!important;background:none!important;color:#B8C4D3!important;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none}
.coreon-product-nav a:hover{color:#fff!important}
.coreon-product-nav a[aria-current="page"]{color:#fff!important;border-bottom-color:#2BC0AE!important}
.coreon-product-nav .lang{margin-left:auto;min-height:32px!important;padding:0 10px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:var(--cx-r-sm)!important;font-size:12px;letter-spacing:.04em}
.coreon-product-nav .lang:hover{border-color:rgba(255,255,255,.5)!important}

/* product status line (truth gate) — quiet, informational */
body .coreon-product-truth{background:var(--cx-surface)!important;color:var(--cx-text-2)!important;border:0!important;border-bottom:1px solid var(--cx-border)!important;font:500 12.5px/1.5 var(--cx-font)!important;padding:7px 20px!important;text-align:left!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body .coreon-product-truth:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cx-warning);flex:none}
body .coreon-product-truth[data-state="VERIFIED"]:before,body .coreon-product-truth[data-state="PRODUCTION_VALIDATED"]:before,body .coreon-product-truth[data-state="AVAILABLE_BY_CONTRACT"]:before{background:var(--cx-success)}
body .coreon-product-truth a{color:var(--cx-accent)!important;font-weight:600;text-decoration:none!important;margin-left:4px!important}
body .coreon-product-truth a:hover{text-decoration:underline!important}

/* ---------- page heroes: one calm header pattern ---------- */
.hero{background:var(--cx-ink)!important;background-image:none!important;color:#fff;border-radius:var(--cx-r-lg)!important;box-shadow:none!important;border:0!important}
.hero h1{font-size:clamp(24px,2.4vw,32px)!important;font-weight:700!important;line-height:1.22!important;margin:.25em 0 .35em!important;color:#fff}
.hero p{color:#C9D3E0!important;font-size:var(--cx-fs)!important;line-height:1.65!important;font-weight:400!important}
.hero .eyebrow,.hero small,.hero .kicker{color:#7FD9CC!important;letter-spacing:.06em;font-weight:600}

/* ---------- surfaces ---------- */
.card,.panel,.kpi,.metric,.box,.tile{border-color:var(--cx-border)!important;box-shadow:var(--cx-shadow-1)!important;border-radius:var(--cx-r-lg)}
.card h2,.panel h2,.card h3,.panel h3{font-weight:700;color:var(--cx-text)}
.kpi span,.kpi small,.metric span{color:var(--cx-muted)!important;font-weight:500}
.kpi b,.kpi strong,.metric b{font-weight:700;letter-spacing:-0.02em;color:var(--cx-text)}
.note,.hint,.muted{color:var(--cx-muted)}

/* ---------- controls ---------- */
.btn,button.primary,.button.primary,.action{font-weight:600!important;letter-spacing:-0.005em;border-radius:var(--cx-r)!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn.primary,button.primary,.button.primary,.btn-primary{background:var(--cx-ink)!important;border-color:var(--cx-ink)!important;color:#fff!important}
.btn.primary:hover,button.primary:hover,.btn-primary:hover{background:var(--cx-ink-2)!important}
.btn.secondary,.btn.ghost,.btn.light,button.secondary{background:var(--cx-surface)!important;color:var(--cx-text)!important;border:1px solid var(--cx-border-strong)!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{border-color:var(--cx-border-strong);border-radius:var(--cx-r)}
input:focus,select:focus,textarea:focus{border-color:var(--cx-accent)!important;box-shadow:0 0 0 3px rgba(14,124,116,.14)!important;outline:none}
.pill,.chip,.badge,.tag{font-weight:600;letter-spacing:0}

/* tabs used across workbench/workspace */
.tab{font-weight:600}
.tab[aria-selected="true"],.tab.active{background:var(--cx-ink)!important;color:#fff!important;border-color:var(--cx-ink)!important}

/* tables */
:where(table){border-collapse:collapse}
:where(table) th{color:var(--cx-muted);font-weight:600;font-size:var(--cx-fs-sm);text-align:left}

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.coreon-product-nav,.coreon-product-truth{display:none!important}body{background:#fff}}
@media (max-width:720px){.coreon-product-nav{padding:0 12px!important;min-height:52px}.coreon-product-nav a{min-height:52px;padding:0 10px;font-size:13px}.coreon-product-nav .brand{margin-right:8px;font-size:14px}}

/* ---------- v1.1 (2026-10-03): executive surfaces ---------- */
/* Executive header: one calm ink band, no gradient. */
.top{background:var(--cx-ink)!important;border-bottom:1px solid rgba(255,255,255,.06)}
.top h1{font-weight:760;letter-spacing:-0.025em}
.top .button.export,.top button.export{min-height:36px!important;padding:0 14px!important;border-radius:8px!important;font-size:13px!important;font-weight:650!important;background:rgba(255,255,255,.06)!important;color:#E6EDF5!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important}
.top .button.export:hover,.top button.export:hover{background:rgba(255,255,255,.12)!important}
.top .button.primary.export,.top button.primary.export{background:#fff!important;color:var(--cx-ink)!important;border-color:#fff!important}
/* KPI cards: neutral surface; status shown by a small labelled dot, not a heavy colour bar. */
.kpi{border:1px solid var(--cx-border)!important;border-radius:12px!important;box-shadow:var(--cx-shadow-1)!important;background:var(--cx-surface)!important}
.kpi:before{inset:16px 16px auto auto!important;width:8px!important;height:8px!important;border-radius:50%!important;background:var(--cx-faint)!important}
.kpi.danger:before{background:var(--cx-danger)!important}
.kpi.warn:before{background:var(--cx-warning)!important}
.kpi.good:before{background:var(--cx-success)!important}
.kpi.danger{border-color:#F3D3CF!important}
.kpi b,.kpi strong{letter-spacing:-0.02em}
/* Workspace product-structure note: quiet informational panel instead of a green banner. */
.arch{background:var(--cx-surface)!important;border:1px solid var(--cx-border)!important;border-left:3px solid var(--cx-accent)!important;color:var(--cx-text-2)!important;font-weight:500!important;border-radius:10px!important;box-shadow:none!important}
.arch strong{color:var(--cx-text)!important;font-weight:700!important}