/* 약효 비교 테스트 — 독립 스타일 (본체 디자인 참고, 코드 공유 없음) */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef1f6; --line:#dfe4ec;
  --ink:#1c2430; --ink-2:#5b6675; --accent:#2563eb; --accent-ink:#ffffff;
  --danger:#c0392b; --ok:#1e8e5a; --shadow:0 1px 3px rgba(20,30,50,.08);
  --fs:1;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  font-size:calc(16px*var(--fs)); line-height:1.55}
.wrap{max-width:560px; margin:0 auto; padding:14px 14px 90px}
h1{font-size:calc(20px*var(--fs)); margin:8px 0 4px}
h2{font-size:calc(17px*var(--fs)); margin:14px 0 6px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 0; box-shadow:var(--shadow)}
.hint{color:var(--ink-2); font-size:calc(13.5px*var(--fs))}
.disc{background:#fff7ec; border:1px solid #f0d9b5; border-radius:10px; padding:10px 12px; font-size:calc(13px*var(--fs)); color:#6b4e16; margin:10px 0}
.warn{background:#fdecea; border:1px solid #f3c1bb; color:#8c2f26}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:52px; min-width:48px; padding:0 16px; width:100%;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  font-size:calc(16px*var(--fs)); font-weight:700; color:var(--ink); cursor:pointer}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.ghost{background:var(--surface-2)}
.btn.small{min-height:44px; width:auto; font-size:calc(14px*var(--fs))}
.btn-row{display:flex; gap:8px; margin-top:10px}
.btn-row .btn{flex:1}
.field{margin:10px 0}
.field label{display:block; font-size:calc(13.5px*var(--fs)); color:var(--ink-2); margin-bottom:4px; font-weight:700}
input[type=text],input[type=time],textarea,select{width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:calc(16px*var(--fs)); background:var(--surface); color:var(--ink)}
textarea{min-height:70px; resize:vertical}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:48px; padding:8px 14px; border-radius:24px; border:1px solid var(--line);
  background:var(--surface-2); font-size:calc(14.5px*var(--fs)); font-weight:700; cursor:pointer}
.chip.sel{background:var(--accent); border-color:var(--accent); color:#fff}
.scorerow{display:flex; align-items:center; gap:6px; margin:8px 0; flex-wrap:wrap}
.scorerow .sylabel{flex:1 1 100%; font-weight:800; font-size:calc(15px*var(--fs))}
.scorebtn{flex:1; min-width:48px; min-height:52px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-2); font-size:calc(18px*var(--fs)); font-weight:800; cursor:pointer}
.scorebtn.sel{background:var(--accent); border-color:var(--accent); color:#fff}
.stagebar{display:flex; gap:4px; margin:8px 0}
.stagebar .st{flex:1; text-align:center; font-size:calc(12px*var(--fs)); padding:6px 2px; border-radius:8px; background:var(--surface-2); color:var(--ink-2)}
.stagebar .st.done{background:#dcefe4; color:var(--ok)}
.stagebar .st.cur{background:var(--accent); color:#fff; font-weight:800}
table{width:100%; border-collapse:collapse; font-size:calc(13.5px*var(--fs)); margin:8px 0}
th,td{border-bottom:1px solid var(--line); padding:7px 6px; text-align:left; vertical-align:top}
td.num{text-align:right; white-space:nowrap}
.graph{margin:8px 0}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#222c3a; color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; z-index:99; opacity:0; transition:opacity .2s}
.toast.show{opacity:1}
.topbar{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.topbar .btn{width:auto}
.sr{position:absolute; left:-9999px}
/* 인쇄: 결과 영역만, A4 */
@page{ size:A4; margin:12mm }
@media print{
  body{background:#fff}
  .no-print{display:none !important}
  .wrap{max-width:none; padding:0}
  .card{border:none; box-shadow:none; padding:0; margin:0 0 12px}
  body{font-size:11pt} h1{font-size:18pt} h2{font-size:13pt} table{font-size:9.5pt}
  table,.graph,.disc,li{break-inside:avoid; page-break-inside:avoid}
}

/* ---- v2 추가 ---- */
details.grp{border:1px solid var(--line); border-radius:10px; margin:8px 0; background:var(--surface)}
details.grp>summary{padding:10px 12px; font-weight:800; cursor:pointer; list-style:none}
details.grp>summary::before{content:"▸ "; color:var(--ink-2)}
details.grp[open]>summary::before{content:"▾ "}
details.grp>.inner{padding:0 12px 10px}
.aerow{display:flex; align-items:center; gap:4px; margin:5px 0; flex-wrap:wrap}
.aerow .aelabel{flex:1 1 110px; font-size:calc(13.5px*var(--fs)); font-weight:700}
.aebtn{min-width:44px; min-height:44px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); font-weight:800; cursor:pointer}
.aebtn.sel{background:var(--accent); border-color:var(--accent); color:#fff}
.aebtn.warnsel{background:var(--danger); border-color:var(--danger); color:#fff}
.nextdue{font-size:calc(22px*var(--fs)); font-weight:900; text-align:center; padding:10px 0}
.nextdue small{display:block; font-size:calc(13px*var(--fs)); font-weight:700; color:var(--ink-2)}
.doserow{display:grid; grid-template-columns:1.3fr .8fr .9fr auto; gap:6px; align-items:center; margin:6px 0}
.doserow input{min-height:44px; padding:6px 8px}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:calc(12.5px*var(--fs)); color:var(--ink-2); margin:4px 0}
.legend .sw{display:inline-block; width:14px; height:4px; border-radius:2px; vertical-align:middle; margin-right:4px}