/* tokens.css — delpai2 디자인 토큰 (2026-07-29 리디자인)
   방향: 표준 SaaS 가독성 문법. 시안 docs/preview/redesign.html 승인분.
   Pretendard · 본문 16px · 검정+회색2단+파랑1 · 컨테이너 폭 통일.
   변수명은 리디자인 전(잉크 팔레트 시절) 것을 유지한다 — 화면 인라인 스타일이
   var()로 물려 있어서, 값만 갈아끼우면 전 화면에 일괄 적용된다. */

@import url('/assets/fonts/pretendard.css');

:root{
  /* 텍스트: 검정 + 회색 2단계 */
  --ink:#191F28; --ink2:#4E5968; --ink3:#8B95A1;
  --paper:#FFFFFF; --surface:#FFFFFF;
  --rule:#E5E8EB; --rule-hair:#F2F4F6; --rule-strong:#191F28;
  /* 액센트는 파랑 하나 */
  --indigo:#3182F6; --indigo-dark:#1B64DA; --indigo-soft:#EBF2FE; --indigo-line:#BFD7FB;
  --plum:#3182F6; --plum-soft:#EBF2FE;          /* 구 자주색 자리 — 파랑으로 통합 */
  --brick:#F04452; --brick-soft:#FDEDEE;
  --moss:#12B76A; --moss-soft:#EAF8F1;
  --amber:#B7791F; --amber-soft:#FCF4E4;
  --gray-bg:#F9FAFB;
  --r:10px; --rc:14px;
  --serif:Pretendard,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --sans:Pretendard,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --mono:'SF Mono','Cascadia Mono','Consolas','D2Coding',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
     font-size:16px;line-height:1.65;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}

/* 숫자는 항상 등폭 + 자릿수 정렬 */
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

h1{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.35}
h2{font-size:21px;font-weight:800;margin:30px 0 12px;letter-spacing:-.02em}
h3{font-size:17px;font-weight:700;margin:16px 0 8px}
p{line-height:1.65;color:var(--ink2)}
a{color:var(--indigo);text-decoration:none}

.eyebrow{font-size:14px;font-weight:600;color:var(--indigo);margin-bottom:6px}
.secno{font-weight:800;margin-right:7px}
.sub{color:var(--ink3);font-size:15.5px;margin-top:6px}
.muted{color:var(--ink3)}

/* ── 상단 네비 ── */
.nav{background:var(--surface);border-bottom:1px solid var(--rule-hair);padding:0 26px;
     display:flex;align-items:center;gap:24px;height:60px;position:sticky;top:0;z-index:8}
.brand{font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.02em;text-decoration:none}
.brand .dot{color:var(--indigo)}
.nav a{font-size:15px;font-weight:500;color:var(--ink2);text-decoration:none;padding:4px 0}
.nav a:hover{color:var(--ink)}
.nav .spacer{flex:1}
.credit{font-variant-numeric:tabular-nums;font-size:14px;
        background:#fff;color:var(--ink2);border:1px solid var(--rule);
        border-radius:8px;padding:6px 13px;font-weight:600;text-decoration:none}
.credit:hover{border-color:var(--ink3)}
.credit.zero{background:var(--amber-soft);color:var(--amber);border-color:#EAD9AE}

/* ── 레이아웃 ── */
.page{padding:32px 24px 64px;max-width:920px;margin:0 auto}
.page.narrow{max-width:920px}
.page.tight{max-width:420px;margin:48px auto}
.row{display:flex;align-items:center;gap:11px}
.row .spacer{flex:1}
.split{display:flex;gap:14px;flex-wrap:wrap}
.split>*{flex:1;min-width:250px}

.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--rc);
      padding:22px 24px;margin-bottom:12px}
.card.click{cursor:pointer;transition:border-color .12s;display:block;text-decoration:none;color:inherit}
.card.click:hover{border-color:var(--ink3)}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;
     background:var(--indigo);color:#fff;border:1px solid var(--indigo);border-radius:var(--r);
     padding:11px 20px;font-size:15.5px;font-weight:600;cursor:pointer;letter-spacing:-.01em;
     text-decoration:none}
.btn:hover{background:var(--indigo-dark);border-color:var(--indigo-dark);color:#fff}
.btn.sm{padding:7px 13px;font-size:14px;border-radius:8px}
.btn.ghost{background:#fff;color:var(--ink2);border-color:var(--rule)}
.btn.ghost:hover{background:#fff;border-color:var(--ink3);color:var(--ink)}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}

/* ── 폼 ── */
label.fl{display:block;font-size:14px;color:var(--ink2);font-weight:500;margin-bottom:5px}
input[type=text],input[type=password],input[type=email],textarea,select{
  width:100%;border:1px solid var(--rule);border-radius:var(--r);padding:11px 13px;
  background:#fff;font-family:inherit;font-size:16px;color:var(--ink);margin-bottom:13px;
  line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px var(--indigo-soft)}
.hint{font-size:13.5px;color:var(--ink3);margin:-8px 0 13px}

/* ── 태그 ── */
.tag{font-size:13px;font-weight:600;border-radius:6px;padding:3px 9px;display:inline-block;
     border:0;vertical-align:2px}
.t-draft{background:var(--rule-hair);color:var(--ink3)}
.t-active{background:var(--moss-soft);color:var(--moss)}
.t-closed{background:var(--rule-hair);color:var(--ink3)}
.t-new{background:var(--indigo-soft);color:var(--indigo)}
.t-carry{background:var(--indigo-soft);color:var(--indigo)}
.t-warn{background:var(--amber-soft);color:var(--amber)}

/* ── 배너 ── */
.banner{border-radius:var(--r);padding:13px 16px;font-size:15px;margin-bottom:14px;
        display:flex;gap:10px;align-items:flex-start;line-height:1.6;border:1px solid}
.banner.info{background:var(--indigo-soft);color:#1957AE;border-color:var(--indigo-line)}
.banner.warn{background:var(--amber-soft);color:var(--amber);border-color:#EAD9AE}
.banner.ok{background:var(--moss-soft);color:#0E8A53;border-color:#BEE7D2}
.banner.err{background:var(--brick-soft);color:var(--brick);border-color:#F8C6CA}
.banner.gray{background:var(--gray-bg);color:var(--ink2);border-color:var(--rule)}

.empty{color:var(--ink3);text-align:center;padding:64px 20px;display:flex;
       flex-direction:column;align-items:center;gap:14px}
.empty .big{font-size:20px;color:var(--ink);font-weight:700}

/* ── 표 — 연회색 헤더 + 수평선. 숫자 열은 등폭 ── */
.tcap{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--ink)}
.tcap b{font-weight:800}
.tblwrap{overflow-x:auto}
table.tri{width:100%;border-collapse:collapse;font-size:15px;background:transparent}
table.tri th,table.tri td{padding:11px 12px;text-align:center;border:0}
table.tri thead th{background:var(--gray-bg);color:var(--ink2);font-weight:600;font-size:14px;
                   border-bottom:1px solid var(--rule);white-space:nowrap}
table.tri thead th:first-child{border-radius:8px 0 0 8px}
table.tri thead th:last-child{border-radius:0 8px 8px 0}
table.tri tbody td{border-bottom:1px solid var(--rule-hair);white-space:nowrap}
table.tri tbody tr:last-child td{border-bottom:0}
table.tri td.q{text-align:left;color:var(--ink);white-space:normal}
table.tri td.n{font-variant-numeric:tabular-nums}
table.tri tr.reject td{color:var(--brick)}
.tnote{font-size:13.5px;color:var(--ink3);margin-top:10px;line-height:1.55}

/* ── 시그니처: CVR 역치선 ── */
.thr{display:inline-flex;align-items:center;gap:9px}
.thr .v{font-variant-numeric:tabular-nums;min-width:44px;text-align:right;font-weight:700}
.thr .track{position:relative;width:84px;height:8px;background:var(--rule-hair);border-radius:4px}
.thr .fill{position:absolute;left:0;top:0;bottom:0;background:var(--indigo);border-radius:4px;width:var(--w)}
.thr.miss .fill{background:var(--brick);opacity:.6}
.thr .line{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);left:var(--x);border-radius:1px}

/* ── 마크다운 렌더 결과 (AI 해석) ── */
.md h2{font-size:18px;margin:20px 0 9px}
.md h3,.md h4{font-size:16px;margin:15px 0 7px}
.md p{margin:0 0 11px;font-size:15.5px;line-height:1.7;color:var(--ink)}
.md ul,.md ol{margin:0 0 11px 21px;font-size:15.5px;line-height:1.7;color:var(--ink)}
.md li{margin-bottom:3px}
.md blockquote{border-left:3px solid var(--indigo);padding-left:13px;margin:0 0 11px;color:var(--ink2)}
.md code{font-family:var(--mono);font-size:13.5px;background:var(--rule-hair);padding:1px 5px;border-radius:4px}
.md b{font-weight:700;color:var(--ink)}
.md>*:last-child{margin-bottom:0}

svg.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
         stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.sm{width:15px;height:15px}

@media (max-width:640px){
  .page{padding:20px 16px 48px}
  .nav{padding:0 16px;gap:14px}
  h1{font-size:24px}
  /* 손가락으로 누른다. 44px는 그 최소선이다 —
     전문가는 응답 링크를 폰 메일로 받아 폰으로 연다. */
  .btn{min-height:44px}
  .btn.sm{min-height:38px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}