:root{
  --paper:#f6f4ee; --card:#fffdf8; --ink:#1d1d1b; --sub:#6b6a64; --line:#dcd8cc;
  --green:#2f6b3f; --green-soft:#e3eee2; --blue:#2d5a8c; --blue-soft:#e2eaf4;
  --amber:#9a6a12; --amber-soft:#f5ead2; --red:#a33a2a; --red-soft:#f4e0db;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#171715; --card:#22221f; --ink:#ecebe5; --sub:#a09e95; --line:#3a3934;
    --green:#8cc79b; --green-soft:#24352a; --blue:#8fb4de; --blue-soft:#1f2b3a;
    --amber:#e0b866; --amber-soft:#3a3020; --red:#e69484; --red-soft:#3d2622; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:"Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;font-size:15px;line-height:1.55;
  padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:880px;margin:0 auto;padding:16px 16px 24px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:8px}
header.top h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.3px}
.sub{color:var(--sub);font-size:13px}
.people{display:flex;gap:6px;margin:12px 0;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);padding:5px 12px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.stat b{display:block;font-size:18px;font-weight:500}
.stat span{font-size:12px;color:var(--sub)}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
.search{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;margin-bottom:10px}
.visit{display:grid;grid-template-columns:76px 1fr auto;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;cursor:pointer;text-decoration:none;color:inherit}
.vdate{font-size:12px;color:var(--sub)} .vdate b{display:block;color:var(--ink);font-size:15px;font-weight:500}
.vtitle{font-weight:500}
.vpay{text-align:right;font-size:14px} .vpay small{display:block;color:var(--sub);font-size:11px}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.tag{font-size:11.5px;padding:1px 7px;border-radius:4px;background:var(--green-soft);color:var(--green)}
.tag.a{background:var(--amber-soft);color:var(--amber)} .tag.b{background:var(--blue-soft);color:var(--blue)}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
h2{font-size:16px;margin:18px 0 8px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:500;color:var(--sub);font-size:12px;padding:6px;border-bottom:1px solid var(--line)}
td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
td .g,.g{color:var(--sub);font-size:12px}
dl.meta{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:13.5px;margin:0}
dl.meta dt{color:var(--sub)} dl.meta dd{margin:0}
.rate{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.rate button{width:42px;height:36px;border:1px solid var(--line);background:var(--paper);border-radius:6px;font:inherit;cursor:pointer;color:var(--ink)}
.rate button.on{background:var(--green);color:#fff;border-color:var(--green)}
label.f{display:block;font-size:12.5px;color:var(--sub);margin:10px 0 3px}
input.i,textarea.i,select.i{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font:inherit;font-size:14.5px}
textarea.i{min-height:60px;resize:vertical}
.i.unclear{border-color:var(--amber);background:var(--amber-soft)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 8px}
@media (max-width:560px){.grid4{grid-template-columns:1fr 1fr}}
.drugedit{border:1px solid var(--line);border-radius:8px;padding:4px 10px 10px;margin-bottom:8px;position:relative}
.drugedit .x{position:absolute;right:6px;top:6px;border:0;background:none;color:var(--red);font:inherit;font-size:13px;cursor:pointer}
.btn{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font:inherit;font-weight:500;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--red);border-color:var(--red-soft)}
.btn:disabled{opacity:.5}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.drop{display:block;border:2px dashed var(--line);border-radius:12px;padding:30px 16px;text-align:center;cursor:pointer;background:var(--card)}
.drop b{display:block;font-size:16px;margin-bottom:4px}
.preview{max-width:100%;max-height:340px;border-radius:8px;border:1px solid var(--line);display:block;margin:0 auto 10px}
.warn{border-left:3px solid var(--amber);padding:8px 12px;background:var(--amber-soft);border-radius:0 6px 6px 0;font-size:13.5px;margin:8px 0}
.err{border-left:3px solid var(--red);padding:8px 12px;background:var(--red-soft);border-radius:0 6px 6px 0;font-size:13.5px;margin:8px 0}
.drugrow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.drugrow:last-child{border:0}
.drugrow .n{font-weight:500} .drugrow .c{font-size:12.5px;color:var(--sub)}
.drugrow .cnt{font-size:13px;text-align:right;color:var(--sub)}
.card-doc{border:2px solid var(--ink);border-radius:12px;padding:16px;background:var(--card)}
.card-doc h3{margin:0 0 2px;font-size:18px}
.card-doc .sec{margin-top:14px;font-size:12px;color:var(--sub);letter-spacing:.3px;border-bottom:1px solid var(--line);padding-bottom:3px}
nav.bottom{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:center;
  padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav.bottom a{flex:1;max-width:180px;text-align:center;padding:10px 0 9px;color:var(--sub);text-decoration:none;font-size:12.5px}
nav.bottom a b{display:block;font-size:18px;font-weight:400;line-height:1.2}
nav.bottom a.on{color:var(--ink);font-weight:500}
nav.bottom a.add b{display:flex;margin:0 auto 1px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);align-items:center;justify-content:center}
.empty{text-align:center;color:var(--sub);padding:40px 10px}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-3px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.hidden{display:none!important}