/* 화면 구성: 폰 한 열 — 위에 송출 카운트다운, 아래에 탭 작업 영역 */
:root{
  --bg:#f3f5f7; --surface:#ffffff; --line:#d9dee4; --fg:#16202b; --muted:#5d6b79;
  --tally:#d7263d; --tally-soft:#fde8eb; --cue:#1f6feb; --cue-soft:#e6efff;
  --ok:#17803d; --ok-soft:#e3f5e9; --warn:#a85d00; --warn-soft:#fff2dc;
  --f-body:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0f141a; --surface:#18202a; --line:#2a3542; --fg:#e7edf3; --muted:#93a2b1;
  --tally:#ff5468; --tally-soft:#3a1820; --cue:#6ea8ff; --cue-soft:#172a45;
  --ok:#4cc77a; --ok-soft:#16301f; --warn:#ffb54d; --warn-soft:#352612; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(40px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:16px}
#loginView,#mainView{display:flex;flex-direction:column;gap:16px}
h1{font-size:20px;margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:16px;margin:0;font-weight:700}
.brand{display:flex;align-items:center;gap:10px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.who{font-size:13px;color:var(--muted)}
.hint{font-size:13px;color:var(--muted);margin:0}
.center{text-align:center}
.err{color:var(--tally);font-size:13px;margin:0}
select,input,button{font:inherit;color:inherit}
input,select,textarea{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:9px 10px;min-width:0;width:100%;font-size:16px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
button{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:8px;padding:10px 14px;font-weight:600}
button.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
button.ghost{background:transparent}
button:disabled{opacity:.5;cursor:default}
.small{font-size:13px;padding:6px 10px}
.lamp{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.lamp.on{background:var(--tally)}

.monitor{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.monitor .label{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--muted);font-weight:600}
.monitor.armed .lamp{background:var(--warn)}
.monitor.live{border-color:var(--tally)}
.monitor.live .lamp{background:var(--tally);box-shadow:0 0 0 4px var(--tally-soft)}
.count{font-family:var(--f-mono);font-size:44px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em}
.monitor.live .count{color:var(--tally)}
.meta{color:var(--muted);font-size:14px}
.meta b{color:var(--fg);font-weight:600}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:8px;padding:10px 14px;font-weight:600}
a.btn.tally{background:var(--tally);color:#fff}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px}
.tabs button{border:0;background:transparent;padding:8px 2px;font-size:13px;border-radius:7px;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
section.panel{display:flex;flex-direction:column;gap:12px}

.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .t{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600}
.item .t small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.item .body{min-width:0}
.item .title{font-weight:600;overflow-wrap:anywhere}
.item .sub{font-size:12px;color:var(--muted)}
.item .end{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.item.simple{grid-template-columns:1fr auto}
.dayhead{padding:8px 14px;background:var(--bg);font-size:12px;font-weight:600;color:var(--muted);border-top:1px solid var(--line)}
.dayhead:first-child{border-top:0}
.chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.wait{background:var(--warn-soft);color:var(--warn)}
.chip.past{background:var(--bg);color:var(--muted)}
.chip.mine{background:var(--cue-soft);color:var(--cue)}
.empty{padding:22px 16px;text-align:center;color:var(--muted);font-size:14px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid2>*{min-width:0}
.inline{display:grid;grid-template-columns:1fr auto;gap:8px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600;min-width:0}
.drop{border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center;cursor:pointer;background:var(--surface);display:flex;flex-direction:column;gap:4px}
.preview{max-width:100%;max-height:260px;object-fit:contain;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.ext{display:flex;flex-direction:column;gap:8px}
.ext .x{display:flex;justify-content:space-between;align-items:center}
.notice{font-size:13px;background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.notice ol{margin:4px 0 0;padding-left:18px}

.alert{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--bg) 75%,transparent);display:flex;align-items:center;justify-content:center;padding:16px}
.alert .box{background:var(--surface);border:2px solid var(--tally);border-radius:16px;padding:22px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:12px;text-align:center}
.alert .big{font-family:var(--f-mono);font-size:40px;font-weight:600;color:var(--tally)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;z-index:60;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){.monitor.live .lamp{animation:blink 1s steps(2) infinite}}
@keyframes blink{50%{opacity:.25}}
@media (max-width:380px){.count{font-size:36px}.item{grid-template-columns:62px 1fr}.item .end{grid-column:1/-1;justify-content:flex-start}}
.chip.slot{background:var(--fg);color:var(--bg);font-size:12px;padding:2px 8px;vertical-align:1px}
.slotline{margin-top:6px;color:var(--fg);font-weight:600}
.meta .warn{color:var(--tally)}
textarea{font-family:var(--f-mono);font-size:13px;line-height:1.5;resize:vertical}
.chip.skip{background:var(--bg);color:var(--muted)}
.chip.new{background:var(--cue-soft);color:var(--cue)}
.bulkhead{padding:10px 14px;font-size:13px;font-weight:600;border-bottom:1px solid var(--line)}

/* 지금 재방 현황 */
.nowhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.nowboard{display:flex;flex-direction:column;gap:8px}
.nowrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--bg)}
.nowrow.live{background:var(--tally-soft)}
.nowrow .who{font-weight:700;color:var(--fg);font-size:15px}
.nowrow .ttl{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.onair{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;padding:2px 7px;border-radius:4px;background:var(--tally);color:#fff}
.nextlbl{font-size:12px;font-weight:600;color:var(--muted);margin-top:4px}
/* 요일 선택 */
.daybar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.daybar button{padding:8px 0;border-radius:8px;font-size:12px;line-height:1.25;display:flex;flex-direction:column;align-items:center;gap:1px}
.daybar button b{font-size:15px;font-family:var(--f-mono)}
.daybar button small{font-size:10px;color:var(--muted);font-weight:500}
.daybar button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.daybar button[aria-selected="true"] small{color:var(--bg)}
/* 편성 목록 */
.timehead{padding:8px 14px;background:var(--bg);font-family:var(--f-mono);font-size:13px;font-weight:600;border-top:1px solid var(--line);display:flex;justify-content:space-between}
.timehead:first-child{border-top:0}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:11px 14px;border-top:1px solid var(--line);cursor:pointer;background:var(--surface);width:100%;text-align:left;border-left:0;border-right:0;border-bottom:0;border-radius:0;font-weight:400}
.row:hover{background:var(--bg)}
.row .who{font-weight:700}
.row .ttl{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.row.mine{box-shadow:inset 3px 0 0 var(--cue)}
.row.live{background:var(--tally-soft)}
/* 수정 시트 */
.sheet{position:fixed;inset:0;z-index:55;background:color-mix(in srgb,var(--fg) 35%,transparent);display:flex;align-items:flex-end;justify-content:center}
.sheet .box{background:var(--surface);width:100%;max-width:560px;border-radius:16px 16px 0 0;padding:18px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px;max-height:92vh;overflow:auto}
button.danger{color:var(--tally);border-color:var(--tally)}
details{display:flex;flex-direction:column;gap:8px}details[open]>summary{margin-bottom:8px}details textarea,details button{width:100%;margin-top:8px}

button.issue{background:var(--tally);color:#fff;border-color:var(--tally);width:100%}
.notice.danger{background:var(--tally-soft);color:var(--tally)}
.memo{display:block;font-size:12px;color:var(--muted)}
.weekbar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.weekbar button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.stat{display:grid;grid-template-columns:1fr auto auto auto;gap:6px 12px;font-size:14px;font-variant-numeric:tabular-nums}
.stat .h{font-size:12px;color:var(--muted);font-weight:600}
.stat .n{text-align:right}
.ck ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.ck .contact{font-weight:700}
.resrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.resrow:first-child{border-top:0}
.chip.bad{background:var(--tally-soft);color:var(--tally)}
.diag{display:flex;flex-direction:column;gap:6px;font-size:14px}.diag div{display:flex;justify-content:space-between;gap:8px}.diag .ok{color:var(--ok);font-weight:600}.diag .bad{color:var(--tally);font-weight:600}
.swapbox{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}#eSwapAsk{display:flex;flex-direction:column;gap:8px}