/* CPX 가상 환자 공통 스타일: 색 토큰(밝은·어두운 테마)·글꼴·버튼·칩·입력·카드.
   index.html · nova-evaluate.html · nova-rules.html 이 함께 쓴다. 화면마다 다른 것은 각 파일 <style> 에. */
:root{
  --bg:#f8f9fb; --surface:#fff; --s1:#f3f5f8; --s2:#eceff4; --s3:#e1e5ec;
  --on:#1b1d22; --on2:#505668; --on3:#7b8193;
  --line:#e3e6ec; --line2:#cfd4dd;
  --pri:#3456c6; --on-pri:#fff; --pri-c:#e3e9ff; --on-pri-c:#17307a;
  --ok:#1d7a4e; --ok-c:#dcf3e6; --warn:#8a5600; --warn-c:#fdecc8; --bad:#b42318; --bad-c:#fde8e6;
  --exam-c:#e4f4ec; --on-exam-c:#155c3b; --test-c:#fff0dc; --on-test-c:#7a4700;
  --scrim:rgba(15,18,25,.42); --shadow:0 8px 28px rgba(16,24,40,.16),0 2px 6px rgba(16,24,40,.06);
  --r:6px; --r2:8px; --r3:12px;
  --appbar:60px; --drawer:296px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#111318; --surface:#181b21; --s1:#1d2128; --s2:#242932; --s3:#2d333e;
  --on:#e6e8ee; --on2:#adb4c3; --on3:#818899;
  --line:#2a2f38; --line2:#3b414d;
  --pri:#aabcff; --on-pri:#0e2160; --pri-c:#2b3f86; --on-pri-c:#e0e6ff;
  --ok:#83d9ab; --ok-c:#173b2a; --warn:#f3c370; --warn-c:#3d2e12; --bad:#ffb4ab; --bad-c:#4a1e1b;
  --exam-c:#173b2a; --on-exam-c:#a8e8c5; --test-c:#3d2e12; --on-test-c:#f8d394;
  --scrim:rgba(0,0,0,.6); --shadow:0 8px 28px rgba(0,0,0,.5); }}
:root[data-theme="dark"]{
  --bg:#111318; --surface:#181b21; --s1:#1d2128; --s2:#242932; --s3:#2d333e;
  --on:#e6e8ee; --on2:#adb4c3; --on3:#818899;
  --line:#2a2f38; --line2:#3b414d;
  --pri:#aabcff; --on-pri:#0e2160; --pri-c:#2b3f86; --on-pri-c:#e0e6ff;
  --ok:#83d9ab; --ok-c:#173b2a; --warn:#f3c370; --warn-c:#3d2e12; --bad:#ffb4ab; --bad-c:#4a1e1b;
  --exam-c:#173b2a; --on-exam-c:#a8e8c5; --test-c:#3d2e12; --on-test-c:#f8d394;
  --scrim:rgba(0,0,0,.6); --shadow:0 8px 28px rgba(0,0,0,.5); }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-y:scroll;touch-action:manipulation}  /* 스크롤바 자리를 늘 잡아 화면이 옆으로 흔들리지 않게 */
body{margin:0;background:var(--bg);color:var(--on);font:16px/1.6 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;letter-spacing:-.003em;-webkit-font-smoothing:antialiased}
h1{font-size:23px;line-height:1.3;font-weight:700;margin:0;letter-spacing:-.01em}
h2{font-size:18px;line-height:1.4;font-weight:700;margin:0}
h3{font-size:16px;font-weight:700;margin:0 0 10px}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
.meta{font-size:14px;color:var(--on2)}
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:22px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;user-select:none;flex:none;overflow:hidden;width:1em}
.ms.f{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
[hidden]{display:none!important}

/* ── 버튼·칩·입력 ── */
.btn{height:38px;padding:0 16px;border-radius:var(--r);border:0;font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;text-decoration:none;flex:none;transition:background .15s}
.btn .ms{font-size:20px;margin-left:-3px}
.btn.filled{background:var(--pri);color:var(--on-pri)}
.btn.filled:hover{background:color-mix(in srgb,var(--pri) 88%,#000)}
.btn.tonal{background:var(--pri-c);color:var(--on-pri-c)}
.btn.tonal:hover{background:color-mix(in srgb,var(--pri-c) 85%,var(--pri))}
.btn.outline{background:transparent;border:1px solid var(--line2);color:var(--on)}
.btn.text{background:transparent;color:var(--pri);padding:0 10px}
.btn.outline:hover,.btn.text:hover{background:color-mix(in srgb,var(--pri) 8%,transparent)}
.btn.danger{background:var(--bad);color:#fff}
.btn.block{width:100%;height:46px;font-size:16px}
.btn:disabled{opacity:.38;cursor:default}
.iconbtn{width:38px;height:38px;border-radius:var(--r);border:0;background:transparent;color:var(--on2);display:inline-grid;place-items:center;cursor:pointer;flex:none;transition:background .15s}
.iconbtn:hover{background:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:4px;background:var(--s2);color:var(--on2);font-size:14px;font-weight:500;white-space:nowrap}
.chip .ms{font-size:18px}
.chip.sm{height:22px;padding:0 7px;font-size:12.5px}
.chip.lv{margin-left:6px;vertical-align:1px}
.chip.g{background:var(--ok-c);color:var(--ok)} .chip.y{background:var(--warn-c);color:var(--warn)} .chip.r{background:var(--bad-c);color:var(--bad)} .chip.p{background:var(--pri-c);color:var(--on-pri-c)}
.inp{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);color:var(--on);font:inherit;font-size:16px;line-height:1.55}
.inp:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 16%,transparent)}
textarea.inp{resize:vertical;min-height:76px}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--on2) 50%),linear-gradient(135deg,var(--on2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fld label{font-size:14px;font-weight:600;color:var(--on2)}
.fld .hint{font-weight:400;color:var(--on3)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;height:38px;flex:none}
.seg button{border:0;background:transparent;padding:0 16px;font-size:15px;font-weight:500;cursor:pointer}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--pri-c);color:var(--on-pri-c);font-weight:600}
.search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:var(--r);background:var(--s2);color:var(--on3)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--on);font:inherit;font-size:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)}
.pad{padding:18px 20px}

/* ── 보조 화면(nova-evaluate·nova-rules): index.html 의 상단바·본문·카드와 같은 모양 ── */
.subbar{position:sticky;top:0;height:var(--appbar);display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--bg);border-bottom:1px solid var(--line);z-index:30}
.subbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;text-decoration:none;padding:0 6px;white-space:nowrap}
.subbar .brand .ms{color:var(--pri);font-size:25px}
.subbar .spacer{flex:1}
.subbar nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subbar nav a{height:38px;padding:0 12px;border-radius:var(--r);display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--on2);text-decoration:none;white-space:nowrap}
.subbar nav a:hover{background:var(--s2)}
.subbar nav a.on{background:var(--pri-c);color:var(--on-pri-c)}
.subbar nav a .ms{font-size:19px}
.page{max-width:960px;margin:0 auto;padding:30px 30px 72px}
.page>header{margin-bottom:20px}
.page>header .meta{margin-top:4px}
.page a:not(.btn){color:var(--pri)}
.sec{margin:0 0 16px}
.sec>h2{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sec>h2 .ms{color:var(--pri)}
.tbl{border-collapse:collapse;width:100%;font-size:15px}
.tbl th{background:var(--s1);color:var(--on2);font-weight:700;text-align:left;padding:9px 12px;border:1px solid var(--line);vertical-align:top}
.tbl td{padding:9px 12px;border:1px solid var(--line);vertical-align:top;line-height:1.6}
.tag{display:inline-block;padding:1px 6px;border-radius:4px;background:var(--pri-c);color:var(--on-pri-c);font:600 12.5px/1.6 ui-monospace,Menlo,monospace}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r2);background:var(--s1);border:1px solid var(--line);color:var(--on2);font-size:15px;margin-top:12px}
.note.warn{background:var(--warn-c);border-color:transparent;color:var(--warn)}
.note.bad{background:var(--bad-c);border-color:transparent;color:var(--bad);white-space:pre-wrap}
.note .ms{margin-top:1px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 14px}
.cell{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface)}
.cell b{display:block;margin-bottom:2px}
.sec ul{margin:0;padding-left:20px}
.sec li{margin:4px 0}
@media (max-width:840px){ :root{--appbar:56px} .page{padding:18px 16px 56px} .subbar .brand .t{display:none} h1{font-size:21px} }