/* 약 안전 확인 탭 (med.js) — 앱 theme.dart·각 화면의 색·둥글기·글자 크기를 그대로. 바탕은 흰색. */
#medRoot { word-break: keep-all; overflow-wrap: anywhere; }
#medRoot button { font: inherit; color: inherit; cursor: pointer; }
#medRoot b, #medRoot strong { font-weight: 700; }
#medRoot h2, #medRoot h3, #medRoot p { margin: 0; }
.md-page { padding: 4px 0 24px; }
.md-page.with-bar { padding-bottom: 120px; }
.md-pad { padding-top: 16px; }
.mt6 { margin-top: 6px !important; } .mt8 { margin-top: 8px !important; } .mt10 { margin-top: 10px !important; }
.mt12 { margin-top: 12px !important; } .mt14 { margin-top: 14px !important; } .mt28 { margin-top: 28px !important; } .mb6 { margin-bottom: 6px !important; }
.md-small { font-size: 12px; color: var(--ink); line-height: 1.45; }
.md-right { display: flex; justify-content: flex-end; }
.md-hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0 4px; }
.tbtn.sm { font-size: 14px; padding: 4px 8px; min-height: 32px; }
.tbtn:disabled { opacity: .4; cursor: default; }

/* 스피너 */
.md-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--primary-soft); border-top-color: var(--primary-dark); animation: mdspin .8s linear infinite; flex: none; display: inline-block; }
.md-spin.sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes mdspin { to { transform: rotate(360deg); } }

/* 위쪽 막대 (AppBar) */
.md-bar { display: flex; align-items: center; gap: 4px; min-height: 56px; margin: 0 -16px; padding: 0 8px; background: #fff; position: sticky; top: var(--navh); z-index: 50; }
.md-bar h2 { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.md-iconbtn { appearance: none; border: 0; background: none; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--ink); flex: none; }
.md-iconbtn:hover { background: var(--mint); }
.md-iconbtn .ms { font-size: 24px; }
.md-iconbtn.sm { width: 36px; height: 36px; } .md-iconbtn.sm .ms { font-size: 20px; color: var(--sub); }

/* 기록 머리 (흰 띠) */
.md-rhead { display: flex; gap: 12px; align-items: flex-start; padding: 2px 4px 18px; border-bottom: 1px solid var(--card-line); margin: 0 -16px; padding-left: 20px; padding-right: 20px; }
.md-rhead-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; flex: none; }
.md-rhead-ic .ms { font-size: 24px; }
.md-rhead b { display: block; font-size: 20px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-rhead small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--sub); }

/* 메인: 처음 안내 */
.md-welcome { background: var(--primary-soft); border: 1px solid var(--card-line); border-radius: 22px; box-shadow: 0 2px 12px rgba(27,39,51,.04); padding: 18px 18px 18px; margin-top: 20px; }
.md-welcome h2 { font-size: 19px; font-weight: 800; }
.md-welcome p { margin: 6px 0 14px; font-size: 14px; line-height: 1.45; }
.md-welcome .fbtn { min-height: 50px; font-size: 15.5px; font-weight: 800; }

/* 대상자 줄 (PersonBar) */
.md-people { display: flex; align-items: center; height: 70px; overflow-x: auto; scrollbar-width: none; margin: 2px -16px 14px; padding: 0 16px; }
.md-people::-webkit-scrollbar { display: none; }
.md-person { appearance: none; border: 0; background: none; width: 52px; margin-right: 10px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 14px; flex: none;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.md-ava { width: 44px; height: 44px; border-radius: 50%; padding: 2.5px; border: 2.5px solid transparent; transition: border-color .16s; display: grid; place-items: center; }
.md-ava > span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.md-person.sel .md-ava { border-color: var(--primary-dark); }
.md-pname { font-size: 12px; font-weight: 500; color: var(--sub); max-width: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-person.sel .md-pname { font-weight: 800; color: var(--ink); }
.md-person.add .md-ava { background: #fff; border: 1.5px solid var(--line); padding: 0; }
.md-person.add .md-ava .ms { color: var(--sub); font-size: 22px; }
.md-people-hint { font-size: 11.5px; color: var(--sub); line-height: 1.35; white-space: nowrap; margin: 0 8px 14px 2px; flex: none; }

/* 섹션 제목 */
.md-sec { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.md-sec h3 { flex: 1; font-size: 17px; font-weight: 700; }
.md-count { color: var(--sub); }
.md-label { font-size: 14px; font-weight: 700; color: rgba(0,0,0,.54); margin-bottom: 8px; }

/* 직접 추가 */
.md-action { appearance: none; width: 100%; height: 48px; margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--primary-dark); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14.5px; font-weight: 800; }
.md-action .ms { font-size: 20px; }
.md-action-note { margin: 6px 2px 12px; font-size: 12px; color: var(--sub); line-height: 1.45; }

/* 빈 상태 */
.md-empty { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 20px; text-align: center; }
.md-empty .ms { font-size: 40px; color: #B0B8C1; }
.md-empty p { margin-top: 10px; color: var(--sub); line-height: 1.5; }
.md-empty.plain { padding: 24px; } .md-empty.plain p { margin: 0; }

/* 기록 카드 */
.md-rlist { display: flex; flex-direction: column; gap: 10px; }
.md-rc { appearance: none; width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; }
.md-rc.picked { border-color: var(--primary); }
.md-rc-kind { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.md-rc-box { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.md-rc-kind small { font-size: 11px; font-weight: 700; }
.md-rc-kind.rx .md-rc-box { background: var(--brand-tint); color: var(--brand-text); } .md-rc-kind.rx small { color: var(--brand-text); }
.md-rc-kind.otc .md-rc-box { background: #FCEEE4; color: #D06A2E; } .md-rc-kind.otc small { color: #D06A2E; }
.md-rc-box .ms { font-size: 24px; }
.md-rc-check { margin-right: -8px; flex: none; } .md-rc-check .ms { font-size: 26px; color: var(--sub); }
.md-rc.picked .md-rc-check .ms { color: var(--primary-dark); }
.md-rc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-rc-row { display: flex; align-items: center; gap: 6px; }
.md-rc-row b, .md-rc-sub { font-size: 16px; font-weight: 700; }
.md-rc-row b { flex: 1; min-width: 0; }
.md-rc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-badge { background: var(--accent-tint); color: var(--accent); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 8px; flex: none; }
.md-rc-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13px; color: var(--sub); flex-wrap: wrap; }
.md-rc-st { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.md-rc-st .ms { font-size: 14px; }
.md-rc-drugs { margin-top: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-chev { color: var(--sub); flex: none; }

/* 선택 모드 */
.md-selbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.md-selall { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; }
.md-selall .ms { font-size: 24px; color: var(--primary-dark); }
.md-del { color: #C62828 !important; display: inline-flex; align-items: center; gap: 4px; }
.md-del .ms { font-size: 20px; }

/* 아래 고정 단추 */
.md-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff; border-top: 1px solid var(--line); padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); }
.md-bottom-in { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.md-bottom p { text-align: center; font-size: 12px; color: var(--sub); margin-bottom: 8px; }
.md-bottom .fbtn { min-height: 52px; } .md-bottom .fbtn.tall { min-height: 56px; }
.md-bottom .fbtn .ms { font-size: 22px; }
.md-home.with-bar { padding-bottom: 150px; }

/* 맨 위로 */
.md-fab { position: fixed; right: max(16px, calc(50% - 344px)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 800; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.12); display: grid; place-items: center; transform: scale(0); transition: transform .18s; }
.md-fab.show { transform: scale(1); }
.md-home.with-bar ~ .md-fab { bottom: calc(140px + env(safe-area-inset-bottom)); }

/* 안전 요약 카드 (SafetySummaryCard) */
.md-summary { border-radius: 18px; padding: 14px 16px 12px; margin-bottom: 16px; }
.md-sum-name { font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 8px; }
.md-sum-head { display: flex; align-items: center; gap: 10px; }
.md-sum-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--fg); background: color-mix(in srgb, var(--fg) 9.5%, transparent); flex: none; }
.md-sum-head b { display: block; font-size: 17.5px; font-weight: 800; letter-spacing: -0.3px; color: var(--fg); }
.md-sum-head small { display: block; font-size: 12px; color: var(--sub); line-height: 1.4; }
.md-sum-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; font-weight: 600; }
.md-sum-line .ms { font-size: 18px; }
.md-sum-line.bad { color: #C62828; } .md-sum-line.ok { color: #1E7B3A; }
.md-sum-rec { appearance: none; border: 0; background: none; width: 100%; text-align: left; display: flex; align-items: center; padding: 3px 0 1px 26px; }
.md-sum-rec > span { flex: 1; min-width: 0; }
.md-sum-rec b, .md-sum-rec small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-sum-rec b { font-size: 12.5px; font-weight: 600; } .md-sum-rec small { font-size: 12px; color: var(--sub); }
.md-sum-rec .ms { font-size: 18px; color: var(--sub); }
.md-sum-busy { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
.md-sum-busy .md-spin { margin-top: 2px; }
.md-sum-busy span:not(.md-spin) { font-size: 12.5px; color: var(--sub); }
.md-sum-busy small { display: block; font-size: 12px; color: var(--sub); line-height: 1.4; }
.md-sum-fail { display: flex; align-items: center; gap: 8px; background: #FFF4E8; border-radius: 12px; padding: 6px 4px 6px 12px; margin-top: 10px; color: #9A3412; }
.md-sum-fail .ms { font-size: 18px; } .md-sum-fail b { flex: 1; font-size: 13.5px; }
.md-sum-fail .tbtn { color: #9A3412; }

/* 타일 (SafetyTiles) */
.md-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.md-tiles.two { grid-template-columns: repeat(2, 1fr); }
.md-tiles-cap { font-size: 12px; font-weight: 600; color: var(--sub); margin: 12px 0 6px; }
.md-tile { appearance: none; border: 1px solid transparent; text-align: left; display: flex; flex-direction: column; min-width: 0; }
.md-tile.big { border-radius: 16px; padding: 11px 10px 11px 12px; }
.md-tile.small { border-radius: 14px; padding: 9px 10px 9px 12px; }
.md-tile-l { color: #6B7684; font-weight: 600; font-size: 12.5px; line-height: 1.25; display: flex; flex-direction: column; }
.md-tile-l span { white-space: nowrap; overflow: hidden; }
.md-tile.big .md-tile-l { height: 34px; }
.md-tile.small .md-tile-l { font-size: 12px; }
.md-tile-v { display: flex; align-items: flex-end; gap: 4px; margin-top: 4px; }
.md-tile.small .md-tile-v { margin-top: 3px; align-items: center; }
.md-tile-v b { flex: 1; min-width: 0; font-weight: 800; font-size: 21px; letter-spacing: -0.4px; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.md-tile.small .md-tile-v b { font-size: 16px; letter-spacing: -0.3px; }
.md-tile-v .ms { font-size: 18px; margin-bottom: 3px; }
.md-tile.small .md-tile-v .ms { font-size: 16px; margin: 0; }
.md-tile.ok { background: #F3F6F5; } .md-tile.ok .ms { color: #12A37A; } .md-tile.ok b { color: var(--ink); }
.md-tile.hit { background: #FFF0F0; border-color: rgba(229,72,77,.27); } .md-tile.hit .ms, .md-tile.hit b { color: #E5484D; }
.md-tile.na { background: #F5F6F8; } .md-tile.na .ms { color: #B8C0C8; } .md-tile.na b { color: #9AA3AD; }

/* 결과 대시보드 */
.md-dash { padding: 16px; }
.md-dash-h { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.md-dash-h b { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-pill { background: var(--mint); color: var(--primary-dark); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 10px; flex: none; }
.md-line { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-weight: 600; }
.md-line.bad { color: #C62828; } .md-line .ms { font-size: 20px; }
.md-sub-h { font-size: 13px; font-weight: 700; color: var(--sub); margin-top: 12px; }
.md-mixpair { color: #C62828; font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-drugrow { display: flex; gap: 8px; padding: 5px 0; align-items: flex-start; }
.md-drugrow > b { flex: 5; min-width: 0; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-chips { flex: 6; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.md-chip { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.md-chip.red { color: #C62828; background: #FDECEC; } .md-chip.orange { color: #B45309; background: #FFF4E8; } .md-chip.gray { color: #455A64; background: #ECEFF1; }
.md-dash-note { margin-top: 10px !important; font-size: 12px; color: var(--sub); }

/* 결과: 확인 중 / 아직 안 끝남 */
.md-loading { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
.md-loading > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-incomplete { padding: 16px; }
.md-inc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.md-inc-h .ms { color: var(--primary-dark); font-size: 24px; } .md-inc-h b { font-size: 16px; font-weight: 800; }
.md-incomplete p { font-size: 13.5px; color: var(--sub); line-height: 1.45; margin-bottom: 4px; }
.md-incomplete .md-inc-foot { font-size: 12.5px; margin: 0; }
.md-inc-retry { margin-top: 10px; }

/* 약별 카드 */
.md-card { background: #fff; border: 1px solid var(--card-line); border-radius: 20px; box-shadow: 0 1px 3px rgba(27,39,51,.08); padding: 16px; margin-bottom: 12px; }
.md-card-h { display: flex; align-items: center; gap: 10px; }
.md-card-ic .ms { font-size: 24px; }
.md-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-card-t > b { font-size: 16px; font-weight: 700; line-height: 1.35; }
.md-card-t small { font-size: 12px; color: rgba(0,0,0,.54); line-height: 1.35; }
.md-card-t .md-recname { font-size: 11.5px; }
.md-card-t .md-origin { color: var(--primary-dark); font-weight: 600; }
.md-status { padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 700; white-space: nowrap; flex: none; align-self: center; }
.md-verdict { margin-top: 10px !important; font-weight: 600; line-height: 1.4; }
.md-alert { margin-top: 10px; padding: 12px; border-radius: 12px; }
.md-alert b { display: block; font-weight: 700; }
.md-alert p { margin-top: 4px !important; line-height: 1.45; }
.md-alert.danger { background: #FDECEC; color: #B71C1C; } .md-alert.caution { background: #FFF4E8; color: #9A3412; }
.md-link { width: 100%; margin-top: 6px; font-size: 14px; min-height: 44px; }
.md-link .ms { font-size: 18px; }
.md-err { margin-top: 8px !important; }
.md-info { background: #F4F7F6; border-radius: 12px; padding: 8px 12px 12px; margin-top: 10px; }
.md-ir { appearance: none; border: 0; background: none; width: 100%; text-align: left; display: flex; align-items: flex-start; padding: 0; margin-top: 6px; border-radius: 8px; line-height: 1.45; }
.md-ir-l { width: 40px; flex: none; font-size: 12px; color: rgba(0,0,0,.54); line-height: 1.5; padding-top: 1px; }
.md-ir-t { flex: 1; min-width: 0; }
.md-ir-t.b { font-weight: 600; }
.md-ir-t.pre { white-space: pre-line; }
.md-ir-x { font-size: 18px; color: var(--sub); margin: 2px 0 0 4px; }
.md-cold { appearance: none; border: 0; width: 100%; margin-top: 8px; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #E3F2FD; color: #1565C0; text-align: left; }
.md-cold span:not(.ms) { flex: 1; font-weight: 700; font-size: 15px; }
.md-cold .ms { font-size: 18px; }
.md-ingr { background: #F4F7F6; border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.md-ingr > b { font-size: 16px; font-weight: 700; }
.md-ingr p { margin-top: 4px !important; font-size: 14px; }
.md-ingr small { display: block; font-size: 12px; line-height: 1.4; }
.md-ingr .md-reason { margin-top: 4px; }
.md-ingr .md-assumed { color: #B71C1C; font-size: 13px; margin-top: 6px !important; }
.md-cand-h { margin: 12px 0 6px; font-size: 14px; font-weight: 700; }
.md-cand { appearance: none; border: 0; width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; background: #F4F7F6; border-radius: 12px; }
.md-cand-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-cand-t b { font-weight: 600; } .md-cand-t small { font-size: 12px; color: rgba(0,0,0,.54); }
.md-ctag { background: #FDE7E7; color: #C62828; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 10px; margin-left: -4px; flex: none; }
.md-cand .md-chev { color: rgba(0,0,0,.38); }

/* 끊지 말라는 안내 */
.md-stopwarn { display: flex; gap: 8px; align-items: flex-start; background: #FFF4E5; border: 1px solid #F5C77E; border-radius: 14px; padding: 12px 14px; margin-top: 16px; }
.md-stopwarn .ms { color: #B45309; } .md-stopwarn p { font-size: 14px; line-height: 1.45; font-weight: 600; color: #7C3E06; }

/* 약 사진 */
.md-img { appearance: none; border: 0; padding: 0; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .25); background: #F3F4F6; display: grid; place-items: center; position: relative; overflow: hidden; flex: none; }
.md-img .ms { font-size: calc(var(--s) * .5); color: var(--sub); }
.md-img.wait .ms { color: #C7CBD1; }
.md-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.md-img.has { border: 1px solid #E5E7EB; background: #fff; }
.md-photo { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: 14px; }
.md-photo-name { display: block; margin-top: 10px; font-weight: 700; }
.md-photo-cap { margin-top: 2px !important; font-size: 11.5px; color: var(--sub); }

/* 가운데 창 */
.md-dlg-bg { position: fixed; inset: 0; z-index: 3500; background: rgba(0,0,0,.4); display: grid; place-items: center; padding: 24px 16px; animation: fade .15s ease-out; }
.md-dlg { width: 100%; max-width: 360px; max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 24px; padding: 22px 22px 10px; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.md-dlg.wide { max-width: 420px; }
.md-dlg h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; margin: 0 0 12px; }
.md-dlg-body { font-size: 15px; line-height: 1.5; color: var(--ink); }
.md-dlg-body p { margin: 0; }
.md-dlg-in { width: 100%; margin-top: 4px; }
.md-dlg-act { display: flex; justify-content: flex-end; gap: 4px; margin-top: 14px; }
.md-dlg-act .tbtn { padding: 10px 12px; font-size: 15px; }
.md-pre { white-space: pre-line; }
.md-info-p { margin: 8px 0 0 !important; } .md-info-p:first-child { margin-top: 0 !important; }
.md-info-p span { display: block; }
.md-info-h { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.md-info-row { appearance: none; border: 0; background: none; width: 100%; text-align: left; display: flex; align-items: center; padding: 6px 0; }
.md-info-row > span { flex: 1; min-width: 0; }
.md-info-row b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-info-row small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: var(--sub); }
.md-info-row .ms { color: var(--sub); }
.md-info-list.folded .md-info-row.more { display: none; }
.md-info-more { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; padding: 6px 0; color: var(--primary-dark); font-size: 13.5px; font-weight: 700; }

/* 시트 안 (어떤 약인가요?, 직접 입력, 생년월일) */
.md-kinds { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.md-kind { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; font: inherit; color: var(--ink); cursor: pointer; }
.md-kind > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.md-kind b { font-weight: 700; } .md-kind small { font-size: 13px; color: var(--sub); }
.md-kind > .ms { color: var(--sub); }
.md-kind-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.md-kind-ic.rx { background: var(--brand-tint); color: var(--brand-text); } .md-kind-ic.otc { background: #FCEEE4; color: #D06A2E; }
.md-sheet-sub { color: var(--sub); margin: 0 0 14px; }
#mdManual { width: 100%; background: #F7F8FA; border: 0; border-radius: 14px; resize: none; margin-bottom: 14px; display: block; }
.md-ymd { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 8px 0 16px; }
.md-ymd select { width: 100%; height: 52px; font-size: 17px; font-weight: 600; text-align: center; text-align-last: center; }
.md-date { width: 100%; height: 52px; margin: 8px 0 16px; font-size: 17px; }

/* 대상자 추가·수정 */
.md-intro { font-size: 13.5px; color: var(--sub); line-height: 1.45; margin-bottom: 14px !important; }
.md-field { display: flex; flex-direction: column; gap: 6px; }
.md-field > span { font-size: 13px; color: var(--sub); font-weight: 600; }
.md-field input { width: 100%; height: 52px; }
.md-field small { font-size: 12px; color: var(--sub); }
.md-birth { margin-top: 16px; min-height: 56px; justify-content: flex-start; gap: 10px; }
.md-birth .ms { font-size: 22px; color: var(--primary-dark); }
.md-help { font-size: 12.5px; color: var(--sub); margin-top: 4px !important; line-height: 1.45; }
.md-help.ink { color: var(--ink); font-size: 14px; margin-top: 8px !important; }
.md-allergy { margin-top: 24px; }
.md-allergy > b { display: block; }
.md-allergy > p { font-size: 13px; color: var(--sub); margin-top: 4px !important; }
.md-achips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.md-achips:empty { display: none; }
.md-achip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: 8px; background: #FDECEC; color: #C62828; font-weight: 700; font-size: 14px; border: 1px solid #F5C2C2; }
.md-achip button { appearance: none; border: 0; background: none; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: #C62828; }
.md-achip .ms { font-size: 18px; }
.md-search { display: flex; align-items: center; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding-right: 2px; }
.md-search:focus-within { outline: 2px solid var(--primary); border-color: transparent; }
.md-search input { flex: 1; border: 0; outline: none !important; background: transparent; }
.md-found { margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.md-found-row { appearance: none; border: 0; background: none; width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--card-line); }
.md-found-row:first-child { border-top: 0; }
.md-found-row > .ms { color: var(--primary-dark); }
.md-found-row b { display: block; font-weight: 600; font-size: 14px; } .md-found-row small { display: block; font-size: 12.5px; color: var(--sub); }
.md-found-none { padding: 12px; color: var(--sub); font-size: 14px; }
.md-adult { margin-top: 20px; }
.md-adult-h { display: block; font-weight: 700; margin-bottom: 4px; }
.md-switch-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; }
.md-switch-row > span:first-child { flex: 1; display: flex; flex-direction: column; }
.md-switch-row b { font-weight: 500; font-size: 16px; } .md-switch-row small { font-size: 13.5px; color: var(--sub); }
.md-due { min-height: 52px; justify-content: flex-start; gap: 10px; margin-top: 2px; }
.md-due .ms { color: var(--primary-dark); font-size: 22px; }
.md-due.need { border: 1.5px solid var(--primary-dark); }
.md-save { margin-top: 24px; min-height: 52px; }

/* 복용 기록 화면 */
.md-stale { display: flex; align-items: center; gap: 8px; background: #FFF4E8; border-radius: 12px; padding: 10px 12px; color: #9A3412; font-weight: 600; }
.md-stale .ms { font-size: 18px; color: #B45309; }
.md-addtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.md-addtile { appearance: none; height: 64px; border-radius: 18px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 700; }
.md-addtile .ms { font-size: 22px; color: var(--primary-dark); }
.md-hint { margin: 6px 0 12px !important; font-size: 12px; color: var(--sub); line-height: 1.5; }
.md-dlist { border-radius: 20px; overflow: hidden; }
.md-drug { display: flex; align-items: center; gap: 14px; padding: 10px 2px 10px 14px; }
.md-drug + .md-drug { border-top: 1px solid var(--card-line); margin-left: 0; }
.md-drug-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-drug-t b { font-weight: 600; }
.md-dsub { font-size: 12px; font-weight: 800; }
.md-dsub.rec { color: #B71C1C; } .md-dsub.inj { color: #334155; }
.md-busy { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.26); display: grid; place-items: center; }
.md-busy-card { background: #fff; border-radius: 20px; padding: 24px; display: flex; align-items: center; gap: 18px; box-shadow: 0 4px 20px rgba(0,0,0,.15); }

/* 사진에서 찾은 약 */
.md-cf-who { font-size: 16px; font-weight: 500; }
.md-cf-desc { margin: 4px 0 12px !important; font-size: 14px; line-height: 1.45; }
.md-cf-none { padding: 16px; margin-bottom: 8px; border-radius: 20px; }
.md-cf { display: flex; align-items: center; padding: 4px 4px 4px 0; margin-bottom: 8px; border-radius: 20px; }
.md-cf-l { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 16px; cursor: pointer; min-width: 0; }
.md-cf-l input { width: 20px; height: 20px; accent-color: var(--primary-dark); flex: none; }
.md-cf-l > span { display: flex; flex-direction: column; min-width: 0; }
.md-cf-l small { font-size: 12px; color: var(--sub); } .md-cf-l small.ok { color: var(--primary-dark); }
.md-cf-add { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.md-cf-add .md-field { flex: 1; }
.md-tonal { appearance: none; border: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; margin-top: 26px; flex: none; }
.md-raw { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.md-raw-h { appearance: none; border: 0; background: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 16px; text-align: left; }
.md-raw-t { margin: 0 0 12px; padding: 12px; white-space: pre-wrap; font: inherit; font-size: 14px; user-select: text; background: var(--mint); border-radius: 12px; }

.md-sources .sources { margin-top: 16px; }

/* 기록·약 주의 표시 */
.md-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.md-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; padding: 3px 8px 3px 6px; border-radius: 8px; line-height: 1.3; }
.md-tag .ms { font-size: 14px; }
.md-tag.bad { color: #C62828; background: #FDECEC; }
.md-tag.warn { color: #B45309; background: #FFE9D6; }
.md-tag.pick { color: var(--primary-dark); background: var(--primary-soft); }
.md-tags.sm { margin-top: 3px; }
.md-tags.sm .md-tag { font-size: 11px; padding: 2px 7px 2px 5px; }
.md-rc-share { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--accent); }
.md-rc-share .ms { font-size: 15px; }
.md-sum-fail.softcard { padding: 12px 14px; margin-bottom: 14px; }

/* 가족 공유 버튼 (복용 기록 화면) */
.md-share { appearance: none; cursor: pointer; width: 100%; margin-top: 12px; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.md-share > .ms:first-child { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-size: 22px; flex: none; }
.md-share > span:not(.ms) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.md-share b { font-size: 15px; font-weight: 800; }
.md-share small { font-size: 12.5px; color: var(--sub); line-height: 1.4; }
.md-share > .ms:last-child { color: var(--sub); }
.md-share.on { border-color: var(--accent); }

/* 받은 날 고르기 */
.md-rcv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 10px; }
.md-rcv-b { appearance: none; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 10px 6px; font-size: 15px; font-weight: 800; display: grid; gap: 2px; }
.md-rcv-b small { font-size: 12px; font-weight: 600; color: var(--sub); }
.md-rcv-b:active { background: var(--primary); }
.md-rcv-pick { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px 4px 12px; margin-bottom: 8px; font-weight: 700; }
.md-rcv-pick span { flex: none; }
.md-rcv-pick input { flex: 1; border: 0; text-align: right; font-weight: 700; padding: 8px 4px; }
.md-del-btn { color: #C62828; border-color: #F5C2C2; margin-top: 8px; }
.md-rc { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.md-share small .nw { white-space: nowrap; }
.md-share { gap: 10px; padding: 14px 10px 14px 14px; }
.md-share small { font-size: 12px; letter-spacing: -0.2px; }
.md-rcv-unk { margin-top: 6px; justify-content: center; }

/* 결과 화면 종합 결과(대시보드): 아래 약별 카드(흰색)와 구분되게 연노랑 바탕, 안쪽 타일은 흰색 */
.md-dash.softcard { background: var(--primary-soft); border-color: #F3DC9E; box-shadow: none; }
.md-dash .md-tile.ok, .md-dash .md-tile.na { background: #fff; }
.md-dash .md-tile.hit { background: #fff; }
.md-dash .md-hr { border-color: #F0DDA8; }

/* 처방·구입 기록: 얇은 목록 */
.md-rlist.thin { display: block; padding: 2px 0; border-radius: 18px; overflow: hidden; }
.md-rl { appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 10px 11px 14px; background: #fff; border: 0; border-radius: 0; text-align: left; color: var(--ink); box-shadow: none; }
.md-rl + .md-rl { border-top: 1px solid var(--card-line); }
.md-rl.picked { background: var(--primary-soft); }
.md-rl-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.md-rl-ic .ms { font-size: 18px; }
.md-rl-ic.rx { background: var(--brand-tint); color: var(--brand-text); }
.md-rl-ic.otc { background: #FCEEE4; color: #D06A2E; }
.md-rl-check .ms { font-size: 22px; color: var(--primary-dark); }
.md-rl-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.md-rl-t { display: flex; align-items: center; gap: 4px; min-width: 0; }
.md-rl-t b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-rl-share .ms { font-size: 15px; color: var(--accent); }
.md-rl-body small { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-rl-right { flex: none; }
.md-rl-right .md-tag { font-size: 11.5px; padding: 3px 7px 3px 5px; }
.md-rl-st { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; }
.md-rl-st .ms { font-size: 15px; }
.md-rl .md-chev { color: #B0B8C1; font-size: 20px; margin-left: -4px; }

/* 결과 대시보드 안 타일 테두리 */
.md-dash .md-tile.ok, .md-dash .md-tile.na { border-color: #EADFC3; }

/* 첫 화면: 회수된 약 알림 */
.md-recall-alert { background: #FDECEC; border: 1px solid #F5C2C2; border-radius: 18px; padding: 12px 12px 10px; margin: 4px 0 16px; }
.md-ra-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #B71C1C; }
.md-ra-h .ms { font-size: 20px; }
.md-ra-h b { font-size: 15px; font-weight: 800; }
.md-ra-h small { margin-left: auto; font-weight: 800; font-size: 13px; }
.md-ra-row { appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; background: #fff; border: 0; border-radius: 12px; padding: 9px 10px 9px 12px; margin-bottom: 6px; color: var(--ink); }
.md-ra-row > span:not(.ms) { flex: 1; min-width: 0; display: grid; }
.md-ra-row b { font-size: 14px; font-weight: 800; }
.md-ra-row small { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-ra-row .ms { color: #B0B8C1; }
.md-ra-more { margin: 0 0 4px; font-size: 12px; color: #B71C1C; }
.md-ra-note { margin: 2px 2px 0; font-size: 12px; color: #9A3412; line-height: 1.45; }

/* 복용 기록 화면 위쪽 간격 줄이기 */
.md-record .md-bar { min-height: 46px; }
.md-record .md-rhead { padding-top: 0; padding-bottom: 10px; gap: 10px; align-items: center; }
.md-record .md-rhead-ic { width: 34px; height: 34px; border-radius: 10px; }
.md-record .md-rhead-ic .ms { font-size: 19px; }
.md-record .md-rhead b { font-size: 17px; line-height: 1.25; }
.md-record .md-rhead small { margin-top: 1px; font-size: 12.5px; }
.md-record .md-pad { padding-top: 10px; }
.md-record .md-sec.mt10 { margin-top: 0 !important; margin-bottom: 6px; }
.md-record .md-sec h3 { font-size: 15px; margin: 0; }
.md-record .md-addtiles { gap: 8px; }
.md-record .md-addtile { height: 56px; border-radius: 14px; gap: 2px; font-size: 14px; }
.md-record .md-addtile .ms { font-size: 20px; }
.md-record .md-hint { margin-top: 6px; }

/* 결과 대시보드 위아래로 줄이기 */
.md-dash { padding: 12px 12px 10px; }
.md-dash .md-dash-h { margin-bottom: 8px; }
.md-dash .md-dash-h b { font-size: 15px; }
.md-dash .md-tiles { gap: 6px; }
.md-dash .md-tile.big { padding: 8px 8px 7px 10px; border-radius: 12px; }
.md-dash .md-tile.big .md-tile-l { height: 30px; font-size: 12px; }
.md-dash .md-tile.big .md-tile-v { margin-top: 2px; }
.md-dash .md-tile.big .md-tile-v b { font-size: 18px; }
.md-dash .md-tile.big .md-tile-v .ms { font-size: 16px; margin-bottom: 2px; }
.md-dash .md-tile.small { padding: 6px 8px 6px 10px; border-radius: 12px; }
.md-dash .md-tile.small .md-tile-v b { font-size: 14.5px; }
.md-dash .md-tiles-cap { margin: 8px 0 4px; font-size: 11.5px; }
.md-dash .md-hr { margin: 8px 0; }
.md-dash .md-dash-note { margin-top: 6px !important; }

/* 대시보드: 흰 바탕 + 진노랑 얇은 테두리 (연노랑 바탕은 되돌림) */
.md-dash.softcard { background: #fff; border: 1.5px solid var(--brand); box-shadow: none; }
.md-dash .md-tile.ok, .md-dash .md-tile.na { background: #fff; border-color: var(--line); }
.md-dash .md-tile.hit { background: #FFF0F0; }
.md-dash .md-hr { border-color: var(--card-line); }

/* 복용 기록: '약 추가'(회색 상자)와 '약 목록' 구분 */
.md-addbox { background: var(--mint); border-radius: 16px; padding: 10px 10px 8px; }
.md-addbox-h { margin: 0 2px 8px; font-size: 13px; font-weight: 800; color: var(--sub); }
.md-addbox .md-addtile { border-color: transparent; box-shadow: 0 1px 3px rgba(27,39,51,.06); }
.md-addbox .md-hint { margin: 8px 2px 0; font-size: 11.5px; }
.md-record .md-listh { margin: 18px 0 8px; }
.md-record .md-listh h3 { font-size: 16px; font-weight: 800; }
.md-tiles.three { grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.md-tiles.three .md-tile.small .md-tile-l span { font-size: 11.5px; }
.md-tiles.three .md-tile.small .md-tile-v b { font-size: 14px; }
.md-tile.small.na .md-tile-v b { font-size: 12.5px; }

/* 약 추가: 목록 아래 작은 버튼 한 줄 */
.md-record .md-listh { margin: 4px 0 8px; }
.md-addrow { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.md-addrow-h { font-size: 13px; font-weight: 800; color: var(--sub); margin-right: 2px; }
.md-addchip { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; }
.md-addchip .ms { font-size: 17px; color: var(--primary-dark); }
.md-addrow-hint { margin: 6px 2px 0; font-size: 11.5px; color: var(--sub); }

/* 약 이름으로 찾기 (식약처 제품 고르기) */
.md-msearch { display: flex; gap: 8px; margin: 10px 0 8px; }
.md-msearch input { flex: 1; }
.md-madded { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.md-madded b { font-size: 12.5px; color: var(--sub); margin-right: 4px; }
.md-mchip { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; background: var(--primary-soft); color: var(--primary-dark); border-radius: 8px; padding: 3px 8px 3px 5px; }
.md-mchip .ms { font-size: 14px; }
.md-mres { max-height: 46vh; overflow: auto; margin: 0 -4px 12px; }
.md-mrow { appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--card-line); padding: 8px 4px; color: var(--ink); }
.md-mrow > span:not(.ms) { flex: 1; min-width: 0; display: grid; }
.md-mrow b { font-size: 14px; font-weight: 700; }
.md-mrow small { font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-mrow > .ms { font-size: 24px; color: var(--primary-dark); flex: none; }
.md-mrow.on { background: #F4FBF6; }
.md-mrow.on > .ms { color: #1E7B3A; }
.md-mload, .md-mnone, .md-merr { font-size: 13px; color: var(--sub); padding: 10px 4px; display: flex; align-items: center; gap: 6px; margin: 0; }
.md-merr { color: #C62828; }
.md-mraw { font-size: 12.5px; margin-top: 4px; }
.md-mimg { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #F3F4F6; flex: none; display: grid; place-items: center; color: #C7CBD1; }
/* '약 추가' 제목보다 버튼이 튀지 않게 */
.md-addrow-h { font-size: 14px; color: var(--ink); }
.md-addchip { height: 30px; padding: 0 8px; border-radius: 9px; font-size: 12.5px; font-weight: 600; gap: 2px; }
.md-addchip .ms { font-size: 15px; }
.md-addrow .md-addchip { height: 30px; padding: 0 8px; border-radius: 9px; font-size: 12.5px; font-weight: 600; gap: 2px; }
.md-addrow .md-addchip .ms { font-size: 15px; }
#medRoot .md-addrow .md-addchip { font-size: 12.5px; }