/* 가족 공유 복용표 */
.sh-sub { font-size: 13.5px; color: var(--sub); line-height: 1.5; margin: 0 0 6px; }
.sh-h { font-size: 14px; font-weight: 800; margin: 16px 0 8px; }
.sh-eds { display: grid; gap: 10px; }
.sh-ed { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.sh-ed-n { display: block; font-size: 15px; font-weight: 800; }
.sh-ed-h { display: block; font-size: 12px; color: var(--primary-dark); margin-top: 2px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sh-chip { appearance: none; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 7px 12px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.sh-chip .ms { font-size: 17px; }
.sh-chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
/* 보관법은 시간대(노랑)와 구분해 연노랑 */
.sh-store .sh-chip.on { background: var(--primary-soft); border-color: #F5D58A; color: var(--primary-dark); }
.sh-roles .sh-role-in { width: 100px; padding: 7px 10px; font-size: 14px; border-radius: 10px; }
.sh-priv { display: flex; gap: 6px; font-size: 12.5px; color: var(--sub); line-height: 1.5; background: var(--mint); border-radius: 12px; padding: 10px 12px; margin: 16px 0 12px; }
.sh-priv .ms { font-size: 16px; margin-top: 1px; }

#t-share { padding-top: 6px; }
.sh-bar { position: sticky; top: var(--navh); z-index: 50; background: #fff; display: flex; align-items: center; gap: 6px; height: 48px; margin: 0 -16px 4px; padding: 0 8px; }
.sh-bar b { font-size: 16px; font-weight: 800; }
.sh-back { appearance: none; border: 0; background: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.sh-back .ms { font-size: 22px; }
.sh-loading { color: var(--sub); font-size: 14px; display: flex; gap: 8px; align-items: center; padding: 30px 0; }
.sh-loading i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #E5E8EB; border-top-color: var(--ink); animation: spin .8s linear infinite; }
.sh-empty { text-align: center; padding: 40px 8px; display: grid; gap: 10px; justify-items: center; }
.sh-empty > .ms { font-size: 52px; color: var(--sub); }
.sh-empty h3 { margin: 0; font-size: 17px; }
.sh-empty p { margin: 0 0 6px; color: var(--sub); font-size: 14px; }
.sh-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; margin: 4px 0 10px; }
.sh-from { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 700; color: var(--accent); }
.sh-from .ms { font-size: 17px; }
.sh-me { appearance: none; cursor: pointer; border: 0; background: var(--primary-soft); color: var(--primary-dark); border-radius: 10px; padding: 5px 9px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.sh-me b { color: var(--ink); }
.sh-me .ms { font-size: 18px; }
.sh-day { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 8px; }
.sh-day b { font-size: 14.5px; font-weight: 800; }
.sh-nav { appearance: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; }
.sh-nav:disabled { opacity: .35; cursor: default; }
.sh-drug { padding: 12px; margin-bottom: 8px; border-radius: 16px; }
.sh-dh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-dh b { font-size: 14.5px; font-weight: 800; flex: 1; min-width: 0; }
.sh-st { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: var(--mint); color: var(--sub); }
.sh-st .ms { font-size: 15px; }
.sh-st.cold { background: #E3F2FD; color: #1565C0; }
.sh-warn { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; font-size: 12px; font-weight: 800; color: #C62828; }
.sh-warn .ms { font-size: 16px; }
.sh-slots { display: grid; gap: 4px; margin-top: 8px; }
.sh-slot { appearance: none; cursor: pointer; text-align: left; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 1px 6px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 10px; color: var(--ink); }
.sh-slot .sl { font-weight: 800; font-size: 13px; }
.sh-slot .sv { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--sub); font-weight: 600; }
.sh-slot .sv .ms { font-size: 17px; }
.sh-slot.done { background: #E6F4EA; border-color: #BFE3C9; }
.sh-slot.done .sv { color: #1E7B3A; font-weight: 800; }
.sh-slot.twice { background: #FDECEC; border-color: #F5C2C2; }
.sh-slot.twice .sv { color: #C62828; font-weight: 800; }
.sh-slot small { grid-column: 2; color: #C62828; font-weight: 800; font-size: 11px; }
.sh-note { display: block; margin-top: 6px; font-size: 11px; color: var(--sub); }
.sh-edit { margin-top: 6px; }
.sh-foot { display: flex; justify-content: space-between; margin-top: 6px; }
.sh-foot .tbtn { display: inline-flex; align-items: center; gap: 4px; }
.sh-foot .tbtn.danger { color: #C62828; }

/* 복용표: 메인 기록 목록 같은 얇은 목록 */
.sh-list { padding: 0; margin-bottom: 10px; border-radius: 18px; overflow: hidden; }
.sh-lh { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; }
.sh-lic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-text); }
.sh-lic .ms { font-size: 18px; }
.sh-lt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sh-lt b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-lt small { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-list .sh-warn { margin: -2px 14px 8px 56px; }
.sh-row { appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 10px 14px 10px 56px; border: 0; border-top: 1px solid var(--card-line); background: #fff; text-align: left; color: var(--ink); }
.sh-row .sl { font-size: 14px; font-weight: 800; width: 52px; }
.sh-row .sv { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--sub); }
.sh-row .sv .ms { font-size: 18px; }
.sh-row.done { background: #F4FBF6; }
.sh-row.done .sv { color: #1E7B3A; font-weight: 800; }
.sh-row.twice { background: #FFF5F5; }
.sh-row.twice .sv { color: #C62828; font-weight: 800; }
.sh-row .tw { width: 100%; text-align: right; color: #C62828; font-weight: 800; font-size: 11px; }

/* 복용표 단순화: 약마다 한 줄 + 시간대 알약 */
.sh-bar b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-top { display: flex; align-items: center; justify-content: space-between; margin: 0 2px; }
.sh-top .sh-from { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.sh-top .sh-me { padding: 4px 8px; font-size: 12.5px; }
.sh-top .sh-me .ms { font-size: 16px; }
.sh-day { margin: 8px 0; }
.sh-grid { padding: 0; border-radius: 18px; overflow: hidden; }
.sh-drow { padding: 10px 12px 12px; }
.sh-drow + .sh-drow { border-top: 1px solid var(--card-line); }
.sh-dname { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sh-dname b { font-size: 15px; font-weight: 800; }
.sh-wtag { font-size: 11px; font-weight: 800; color: #C62828; background: #FDECEC; border-radius: 6px; padding: 2px 6px; }
.sh-dname .sh-st { margin-left: auto; font-size: 11px; padding: 2px 7px; }
.sh-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sh-pill { appearance: none; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 7px 4px 6px; display: grid; justify-items: center; gap: 1px; min-width: 0; }
.sh-pill .pt { display: inline-flex; align-items: center; gap: 1px; font-size: 13.5px; font-weight: 800; }
.sh-pill .pt .ms { font-size: 15px; }
.sh-pill small { font-size: 10.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sh-pill.done { background: #E6F4EA; border-color: #BFE3C9; color: #1E7B3A; }
.sh-pill.done small { color: #1E7B3A; font-weight: 700; }
.sh-pill.twice { background: #FDECEC; border-color: #F5C2C2; color: #C62828; }
.sh-pill.twice small { color: #C62828; font-weight: 800; }
.sh-noslot { color: var(--sub); font-size: 12px; grid-column: 1 / -1; }
.sh-tpick { display: flex; gap: 8px; margin-top: 10px; }
.sh-tpick label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 16px; padding: 0 12px; }
.sh-tpick input { border: 0; padding: 0; flex: 1; min-width: 0; font-weight: 700; background: transparent; height: 48px; }
.sh-tpick input:focus { outline: none; }
.sh-tpick button { flex: none; }

/* 시각 고르기 (기본 시계 대신) */
.sh-h2 { margin: 16px 0 8px; font-size: 13.5px; font-weight: 800; color: var(--sub); }
.sh-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-quick .sh-chip { padding: 6px 10px; font-size: 13px; }
.sh-clock { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--mint); border-radius: 16px; padding: 10px; margin-bottom: 12px; }
.sh-ampm { display: grid; gap: 4px; margin-right: 6px; }
.sh-ampm button { appearance: none; border: 0; cursor: pointer; border-radius: 10px; padding: 7px 12px; background: #fff; color: var(--sub); font-size: 14px; font-weight: 700; }
.sh-ampm button.on { background: var(--primary); color: var(--on-primary); }
.sh-spin { display: grid; justify-items: center; }
.sh-spin button { appearance: none; border: 0; background: none; cursor: pointer; width: 44px; height: 30px; display: grid; place-items: center; color: var(--primary-dark); }
.sh-spin button .ms { font-size: 26px; }
.sh-spin b { font-size: 34px; font-weight: 800; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.sh-colon { font-size: 30px; font-weight: 800; color: var(--sub); margin-top: -4px; }
.sh-sheet #shNow + .sh-clock { margin-top: 12px; }

/* 지금 / 이때 고르기 → 입력하기 */
.sh-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.sh-opt { appearance: none; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 16px; padding: 12px 8px; display: grid; justify-items: center; gap: 2px; }
.sh-opt b { font-size: 15px; font-weight: 800; }
.sh-opt small { font-size: 12.5px; color: var(--sub); }
.sh-opt.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sh-opt.on small { color: var(--on-primary); }
.sh-clock[hidden] { display: none !important; }

/* 복용 시간·보관법: 모든 약 같게 */
.sh-edhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-edhead h4 { margin: 0; font-size: 14px; font-weight: 800; }
.sh-same { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; }
.sh-same input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary-dark); }
.sh-ed-all { display: none !important; }
.sh-ed-all small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--sub); }
.sh-eds.same .sh-ed:not(:first-child) { display: none; }
.sh-eds.same .sh-ed:first-child > .sh-ed-n:not(.sh-ed-all), .sh-eds.same .sh-ed:first-child > .sh-ed-h { display: none; }
.sh-eds.same .sh-ed-all { display: block !important; }
.sh-must { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFF8E1; color: #6B4E00; font-size: 13px; line-height: 1.5; }
.sh-must .ms { font-size: 18px; color: #D98000; margin-top: 1px; }
.sh-must b { font-weight: 800; }