/* =========================================================
   셀프검토 업무 화면 공통 (semodangdang.css 위에 얹는 층)
   - 각 화면은 예전 변수(--bg, --ink, --accent …)를 쓰므로 여기서 어게인택스 토큰으로 연결한다.
   - 이 파일은 각 화면의 <style> 뒤에 불러와서 버튼·입력·표 모양을 디자인 시스템에 맞춘다.
   - 업무 화면에는 애니메이션을 넣지 않는다(DESIGN.md 4장).
   ========================================================= */
:root{
  color-scheme:dark;
  --bg:var(--sd-bg); --surface:var(--sd-surface); --surface-2:var(--sd-surface-2);
  --ink:var(--sd-fg); --muted:var(--sd-mute); --line:var(--sd-line); --line-strong:var(--sd-line-strong);
  --accent:var(--sd-accent); --accent-ink:#00141c; --accent-soft:rgba(95,211,255,.08);
  --warn:var(--sd-warning); --warn-soft:rgba(245,194,107,.09);
  --bad:var(--sd-danger); --bad-soft:rgba(255,122,122,.09);
  --ok:var(--sd-success); --ok-soft:rgba(79,209,165,.09);
  --info:#8fb7ff; --info-soft:rgba(143,183,255,.09);
  --f-body:var(--sd-font); --f-mono:var(--sd-font-num);
}
html{color-scheme:dark}
body{font-family:var(--sd-font);font-weight:var(--sd-w-light);background:var(--sd-bg);color:var(--sd-fg);position:relative}
body::before{content:"";position:absolute;left:0;right:0;top:0;height:380px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(143,240,255,.14) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%)}
h1,h2,h3{font-weight:var(--sd-w-regular);letter-spacing:-.03em}
b,strong,th{font-weight:var(--sd-w-bold)}
.mono,code{font-family:var(--sd-font-num);font-variant-numeric:tabular-nums}
.r,.num,.amt,td.r{font-variant-numeric:tabular-nums}
a{color:var(--sd-accent)}

/* ---------- 공통 머리글 ---------- */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  margin:0 -16px;padding:14px 24px;position:sticky;top:0;z-index:40;
  background:linear-gradient(to bottom,rgba(6,7,10,.94),rgba(6,7,10,.72));backdrop-filter:blur(8px);border-bottom:1px solid var(--sd-line)}
.app-header .sd-logo{text-decoration:none;flex:none}
.app-header .sd-logo img.mark{width:40px;height:40px;margin:-6px 0}
.app-header .sd-logo img.wordmark{height:19px}
.app-header .partner{font-size:12px;color:var(--sd-mute);letter-spacing:.02em;border-left:1px solid var(--sd-line-strong);padding-left:12px;margin-left:2px}
.app-header .brandside{display:flex;align-items:center;gap:10px;min-width:0}
.app-header .area{font-size:var(--sd-text-xs);letter-spacing:var(--sd-label-spacing);color:var(--sd-accent);text-transform:uppercase}
@media (max-width:760px){.app-header{padding:12px 16px}.app-header .partner{display:none}}

/* ---------- 버튼: 주요=흰색, 보조=테두리 (DESIGN.md 3장) ---------- */
.btn{border-radius:var(--sd-radius)!important;font-family:var(--sd-font);font-weight:var(--sd-w-bold)}
.btn.primary,.btn:not(.ghost):not(.kakao){background:var(--sd-fg);color:#000;border-color:var(--sd-fg)}
.btn.ghost{background:transparent;color:var(--sd-fg);border-color:var(--sd-line-strong)}
.btn.accent{background:var(--sd-accent);color:#00141c;border-color:var(--sd-accent)}
.btn:disabled{opacity:.4}
.mini,.ubtn{background:transparent!important;color:var(--sd-fg)!important;border:1px solid var(--sd-line-strong)!important;border-radius:var(--sd-radius)!important;font-family:var(--sd-font)}
.ubtn.p{color:var(--sd-accent)!important;border-color:var(--sd-accent)!important}

/* ---------- 입력 ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  background:var(--sd-surface-2)!important;color:var(--sd-fg)!important;border:1px solid var(--sd-line)!important;
  border-radius:var(--sd-radius)!important;font-family:var(--sd-font);font-weight:var(--sd-w-regular)}
input::placeholder,textarea::placeholder{color:#5b6372}
input:focus,select:focus,textarea:focus{border-color:var(--sd-accent)!important;box-shadow:0 0 0 3px rgba(95,211,255,.15);outline:none}
input[type=checkbox],input[type=radio]{accent-color:var(--sd-accent)}

/* ---------- 카드·표·배지 ---------- */
.panel,.card,.box,.tile,.mod,.item{border-color:var(--sd-line)}
.panel,.card{background:var(--sd-surface);border-radius:var(--sd-radius-lg)}
table th{background:var(--sd-surface-2);color:var(--sd-mute);font-weight:var(--sd-w-regular)}
table td{border-color:var(--sd-line)}
tr.total td{border-top-color:var(--sd-line-strong)!important}
.pill{border-radius:var(--sd-radius-pill);font-weight:var(--sd-w-bold);background:transparent!important}
.err{color:var(--sd-danger)}
:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 회사 화면: 핵심 숫자는 어두운 카드 위 하늘색 (sd-stat__value.accent) ---------- */
.tile{background:var(--sd-surface)}
.tile .v{font-weight:var(--sd-w-bold);letter-spacing:-.02em}
.tile.main{background:var(--sd-surface);border-color:rgba(95,211,255,.45);color:var(--sd-fg)}
.tile.main .v{color:var(--sd-accent)}
.tile.main .k,.tile.main .s{color:var(--sd-mute);opacity:1}
.step-link.done .n{background:transparent;border-color:var(--sd-accent);color:var(--sd-accent)}
.step-link.on .n{background:var(--sd-accent);border-color:var(--sd-accent);color:#00141c}