@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1b2333; --muted:#6b7487; --line:#e3e7ef;
  --pri:#2457f5; --pri-d:#1a44c7; --pri-soft:#eaf0ff;
  --ok:#12a150; --ok-soft:#e5f7ec; --warn:#e8890c; --warn-soft:#fff3e0; --bad:#d93a3a; --bad-soft:#fdeaea;
  --call:#7b3ff2; --call-soft:#f1eaff;
  --r:12px; --sh:0 1px 2px rgba(20,30,60,.06),0 4px 14px rgba(20,30,60,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 'Noto Sans KR',system-ui,-apple-system,'Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:24px;margin:2px 0 4px;font-weight:900;letter-spacing:-.02em}
h2{font-size:18px;margin:0;font-weight:700}
h3{font-size:16px;margin:0 0 10px}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center} .nowrap{white-space:nowrap}
em{color:var(--bad);font-style:normal}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--ink);font-size:17px}
.brand:hover{text-decoration:none}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--pri);color:#fff;font-size:15px}
.top nav{display:flex;align-items:center;gap:14px;font-size:14px}
.top nav a{color:var(--ink)} .who{color:var(--muted)}

.wrap{max-width:1180px;margin:0 auto;padding:22px 16px 60px}
.wrap.full{max-width:none;padding:18px 18px 60px}
.wrap.narrow{max-width:560px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:14px}
.empty{text-align:center;padding:34px 18px}
.alert{background:var(--bad-soft);color:var(--bad);border:1px solid #f6c6c6;border-radius:10px;padding:10px 12px;margin-bottom:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--pri);background:var(--pri);color:#fff;border-radius:9px;padding:9px 16px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--pri-d);text-decoration:none}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:#fff;color:var(--pri)} .btn.ghost:hover{background:var(--pri-soft)}
.btn.danger{background:#fff;color:var(--bad);border-color:#f0c2c2} .btn.danger:hover{background:var(--bad-soft)}
.btn.warn{background:#fff;color:var(--warn);border-color:#f3d2a3} .btn.warn:hover{background:var(--warn-soft)}
.btn.sm{padding:6px 12px;font-size:14px} .btn.xs{padding:3px 9px;font-size:12.5px;border-radius:7px;font-weight:500}
.btn.lg{padding:12px 22px;font-size:16px} .btn.xl{padding:18px 20px;font-size:18px;border-radius:14px;margin-bottom:14px}
.btn.block{display:flex;width:100%}
.btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

label{display:block;font-size:13.5px;font-weight:500;color:#3b4457;margin-bottom:10px}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid #cfd5e1;border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri-soft);border-color:var(--pri)}
input[type=checkbox]{display:inline;width:auto;margin:0 4px 0 0;vertical-align:-2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
form.inline{display:flex;gap:6px;margin-top:10px} form.inline input{margin:0}

.badge{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:#eef1f6;color:#4b5568;vertical-align:1px;margin-left:4px}
.b-reserved{background:#eef1f6;color:#4b5568} .b-arrived{background:var(--pri-soft);color:var(--pri)}
.b-called{background:var(--call-soft);color:var(--call)} .b-consulting{background:var(--ok-soft);color:var(--ok)}
.b-done{background:#eceff3;color:#8a93a3} .b-noshow{background:var(--bad-soft);color:var(--bad)} .b-cancelled{background:#eee;color:#999}
.tag{font-size:11px;background:var(--warn-soft);color:var(--warn);border-radius:5px;padding:1px 6px;margin-left:4px;font-weight:700}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#1b2333;color:#fff;padding:11px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:99;max-width:90vw;font-size:14px}
#toast.show{opacity:1;transform:translateX(-50%)} #toast.bad{background:var(--bad)}

dialog.modal{border:0;border-radius:16px;padding:22px;width:min(520px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog.modal::backdrop{background:rgba(15,20,35,.45)}
.modal-f{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* landing */
.hero{text-align:center;padding:50px 10px 30px}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.25}
.hero p{max-width:640px;margin:16px auto;color:var(--muted);font-size:16px}
.hero-cta{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:20px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.feat p{margin:6px 0 0;color:var(--muted);font-size:14px}
.auth{max-width:440px;margin:30px auto}

/* dashboard & fair */
.page-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.fair-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.fc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fc-name{font-weight:900;font-size:17px;color:var(--ink)}
.fc-stats{display:flex;gap:14px;margin:12px 0;font-size:14px;color:var(--muted)} .fc-stats b{color:var(--ink)}
.fc-act{display:flex;gap:6px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:10px 14px;color:var(--muted);font-weight:500;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--pri);border-color:var(--pri);font-weight:700} .tabs a:hover{text-decoration:none;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
.grid2.wide-left{grid-template-columns:1.8fr 1fr}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 12px}
.filter{max-width:220px;margin:0}
.cons-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pers{list-style:none;margin:10px 0 0;padding:0}
.pers li{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:8px;background:#f7f9fc;margin-bottom:5px}
.tbl-wrap{padding:0;overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl th{background:#f7f9fc;font-weight:700;font-size:13px;color:#4b5568;position:sticky;top:0}
textarea{font-family:ui-monospace,Consolas,monospace;font-size:13px}

.sched-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.date-tabs{display:flex;gap:4px;flex-wrap:wrap}
.date-tabs a{padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:14px}
.date-tabs a.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700} .date-tabs a:hover{text-decoration:none}
.sched-wrap{max-height:75vh}
.sched{border-collapse:separate;border-spacing:0;font-size:13.5px;min-width:100%}
.sched th,.sched td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:6px 8px;min-width:130px;vertical-align:top}
.sched thead th{background:#f7f9fc;position:sticky;z-index:2}
.sched thead tr:first-child th{top:0} .sched thead tr:nth-child(2) th{top:33px}
.sched .ch{background:var(--pri-soft);color:var(--pri);text-align:center}
.sched .tcol{min-width:64px;width:64px;font-weight:700;background:#fafbfd;position:sticky;left:0;z-index:1}
.sched thead .tcol{z-index:3}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--pri-soft);color:#1a3aa8;border-radius:7px;padding:3px 4px 3px 9px;margin:1px 0;font-weight:500}
.chip small{font-size:11px;opacity:.8}
.chip.st-noshow{background:var(--bad-soft);color:var(--bad);text-decoration:line-through}
.chip.st-done{background:#eceff3;color:#77808f} .chip.st-consulting{background:var(--ok-soft);color:var(--ok)} .chip.st-called{background:var(--call-soft);color:var(--call)}
.chip .x{border:0;background:none;color:inherit;opacity:.5;cursor:pointer;font-size:12px;padding:0 3px}
.chip .x:hover{opacity:1}
.plus{border:1px dashed #c4cbe0;background:none;color:#97a0b8;border-radius:7px;width:100%;padding:3px;cursor:pointer;font-size:15px}
.plus:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft)}

.assign .as-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.assign .as-tools .as-q{flex:1 1 200px;margin:0}
.assign .as-tools label{margin:0}
.as-list{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.as-list.wait{opacity:.5;pointer-events:none}
.as-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:9px 12px;font:inherit;cursor:pointer}
.as-item:hover{background:var(--pri-soft)}
.as-new{margin-top:10px} .as-new summary{cursor:pointer;color:var(--pri);font-size:14px;margin-bottom:8px}

.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-bottom:20px}
.link-row{display:flex;gap:6px;margin:10px 0} .link-row input{margin:0;font-size:13px}
.link-foot{display:flex;justify-content:space-between;align-items:flex-end}
.qr img,.qr canvas{display:block}

/* live */
.live-top{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:10px}
.walkin{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:12px;margin:0}
.walkin input,.walkin select{margin:0;width:auto;flex:1 1 120px}
.summary{display:flex;gap:10px;flex-wrap:wrap}
.sum{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:14px}
.sum-n{font-size:12.5px;color:var(--muted)} .sum b{font-size:20px;color:var(--pri)}
.live-opts{display:flex;gap:14px;align-items:center;margin:6px 0 10px}
.live-opts label{margin:0}
.unassigned{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px;padding:12px}
.un-item{display:flex;gap:6px;align-items:center;justify-content:space-between;background:#f7f9fc;border-radius:8px;padding:5px 8px}
.un-item select{width:auto;margin:0;padding:4px 6px;font-size:13px}
.board-cols{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.col{flex:0 0 290px;background:#eef1f7;border-radius:14px;padding:10px}
.col-h{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 8px}
.col-c{text-align:center;line-height:1.1} .col-c b{display:block;font-size:24px;color:var(--pri)} .col-c span{font-size:11px;color:var(--muted)}
.col-cur{background:#fff;border-radius:9px;padding:7px 10px;font-size:14px;margin-bottom:8px;border-left:4px solid var(--ok)}
.col-tools{display:flex;gap:6px;margin-bottom:8px}
.ap{background:#fff;border-radius:10px;padding:9px 10px;margin-bottom:7px;border:1px solid var(--line);border-left:4px solid #c9cfdb}
.ap.st-arrived{border-left-color:var(--pri)} .ap.st-called{border-left-color:var(--call);background:#faf7ff}
.ap.st-consulting{border-left-color:var(--ok);background:#f4fbf6} .ap.st-done{opacity:.6} .ap.st-noshow{border-left-color:var(--bad);background:#fff8f8}
.ap-h{display:flex;align-items:center;gap:4px;font-size:13px}
.ap-h .badge{margin-left:auto}
.ap-h .tm{font-size:14px}
.pos{font-size:11px;background:#1b2333;color:#fff;border-radius:5px;padding:1px 6px}
.ap-n{font-weight:700;margin:3px 0 6px}
.ap-note{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.ap-b{display:flex;gap:4px;flex-wrap:wrap}

/* public pages */
body.pub{background:linear-gradient(180deg,#eaf0ff 0,#f4f6fb 260px)}
.pub-h{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin:6px 0 16px}
.center-h{justify-content:center;text-align:center}
.date-sel{width:auto;margin:0}
.cur-card .big{font-size:30px;font-weight:900;margin:2px 0}
.cur-card.on{border:2px solid var(--ok);background:#f6fcf8}
.note-row{display:flex;gap:6px;margin:12px 0} .note-row input{margin:0}
.qlist{padding:6px 12px}
.q-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.q-item:last-child{border-bottom:0}
.q-item.st-called{background:var(--call-soft);margin:0 -12px;padding:10px 12px}
.q-no{flex:0 0 30px;height:30px;border-radius:50%;background:#1b2333;color:#fff;display:grid;place-items:center;font-weight:700}
.q-main{flex:1;min-width:0}
.q-b{display:flex;gap:4px}
details summary{cursor:pointer;font-weight:700}
.hello{margin:8px 0 10px}
.me-card{border-width:2px}
.me-top{display:flex;justify-content:space-between;align-items:center;font-size:17px}
.me-msg{font-size:19px;font-weight:700;margin:10px 0 4px}
.me-big{font-size:54px;font-weight:900;color:var(--pri);line-height:1.1}
.me-big small{font-size:18px;color:var(--muted);margin-left:4px}
.me-card .btn{margin-top:12px}
.k-call{border-color:var(--call);background:var(--call-soft);animation:pulse 1.2s infinite}
.k-call .me-msg{color:var(--call);font-size:24px}
.k-go{border-color:var(--ok);background:var(--ok-soft)} .k-soon{border-color:var(--warn);background:var(--warn-soft)}
.k-bad{border-color:#f0c2c2} .k-done{opacity:.75}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(123,63,242,.15)}}

/* TV board */
body.board-body{background:#0f1729;color:#e8edf8}
.board-body .muted{color:#94a0b8}
.board-h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.board-h h1{font-size:30px}
.board-me{display:flex;align-items:center;gap:14px;background:#18233d;border-radius:14px;padding:10px 14px}
.board-me #qr{background:#fff;padding:5px;border-radius:8px}
.clock{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.bc{background:#18233d;border-radius:16px;padding:16px}
.bc-h{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2a3858;padding-bottom:10px;margin-bottom:10px}
.bc-h h2{font-size:22px}
.bc-n{text-align:right;line-height:1} .bc-n b{font-size:46px;color:#6ea0ff} .bc-n span{display:block;font-size:13px;color:#94a0b8}
.bp{background:#0f1729;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.bp-h{font-size:16px}
.bp-cur{font-size:15px;margin:4px 0 6px;color:#8fe3ae}
.bp-q{list-style:none;margin:0;padding:0}
.bp-q li{display:flex;gap:10px;align-items:center;padding:5px 0;border-top:1px dashed #24324f;font-size:18px}
.bp-q .no{flex:0 0 26px;height:26px;border-radius:50%;background:#2a3858;display:grid;place-items:center;font-size:13px;font-weight:700}
.bp-q .nm{flex:1;font-weight:700}
.bp-q .tm{color:#94a0b8;font-size:14px}
.bp-q li.called{color:#d6c2ff} .bp-q li.called .no{background:var(--call)} .bp-q li.called .tm{color:#d6c2ff;font-weight:700}

@media (max-width:860px){
  .grid2,.grid2.wide-left{grid-template-columns:1fr}
  .row3{grid-template-columns:1fr 1fr}
  .top{padding:10px 14px} .top nav{gap:10px;font-size:13px} .who{display:none}
  h1{font-size:21px}
  .col{flex-basis:260px}
}
@media (max-width:520px){
  .row2,.row3{grid-template-columns:1fr}
  .wrap{padding:16px 16px 50px}
  .board-h h1{font-size:22px} .clock{font-size:24px}
  .board-grid{grid-template-columns:1fr}
  form.inline{flex-wrap:wrap}
}

/* ── TV 신청 현황표 (가로 화면 기준) ── */
.board-main{padding:0;margin:0}
body.board-body.tv-light{background:#d9dde3;color:#1b2333}
.tv{display:grid;grid-template-columns:minmax(250px,23vw) 1fr;gap:1.1vw;height:100vh;padding:1.1vw;overflow:hidden}
.tv-side{background:#eef0f3;border-radius:6px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tv-brand{padding:2.2vh 1.4vw 1.8vh;text-align:center;border-bottom:1px solid #cfd4db;background:#f7f8fa}
.tv-logo{max-width:100%;max-height:15vh;object-fit:contain;display:block;margin:0 auto 1vh}
[hidden]{display:none!important}
.tv-fair{word-break:keep-all;font-weight:900;font-size:clamp(18px,1.9vw,40px);line-height:1.25;letter-spacing:-.02em;color:#121a2e}
.tv-period{font-size:clamp(13px,1.05vw,22px);font-weight:700;margin-top:.8vh;color:#26304a}
.tv-venue{font-size:clamp(12px,.9vw,18px);color:#5d6678;margin-top:.3vh}
.tv-sec{display:flex;gap:.9vw;align-items:center;padding:2vh 1.2vw;border-bottom:1px solid #cfd4db}
.tv-sec:last-child{border-bottom:0}
.tv-ico{flex:0 0 auto;width:clamp(34px,2.6vw,56px);height:clamp(34px,2.6vw,56px);border-radius:50%;background:#7d838d;color:#fff;display:grid;place-items:center;font-weight:900;font-size:clamp(15px,1.2vw,26px);font-style:italic}
.tv-legend ul{list-style:none;margin:0;padding:0;font-size:clamp(12px,.95vw,20px);font-weight:700}
.tv-legend li{display:flex;align-items:center;gap:.5vw;margin:.4vh 0}
.lg{display:inline-block;width:.95em;height:.95em;border-radius:2px}
.lg.open{background:#2f6fc0} .lg.full{background:#c8393b} .lg.lunch{background:#8f9a2c}
.lg-note{font-weight:500;color:#5d6678;font-size:.9em}
.tv-notice p{word-break:keep-all;margin:0;font-size:clamp(12px,.92vw,19px);line-height:1.5;color:#2b3448}
.tv-qr{flex-direction:column;text-align:center;justify-content:center;flex:1}
.tv-qr p{margin:1vh 0 0;font-size:clamp(11px,.85vw,17px);color:#3b4457}
.qrbox{background:#fff;padding:6px;border-radius:6px;display:inline-block;line-height:0}
.tv-qr .qrbox img,.tv-qr .qrbox canvas{width:clamp(96px,8vw,170px)!important;height:auto!important}
.tv-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.tv-head{display:flex;align-items:center;justify-content:center;gap:2vw;position:relative;background:#1e2a4a;color:#fff;font-weight:900;font-size:clamp(18px,1.9vw,42px);padding:1.5vh 1vw;border-radius:6px 6px 0 0;letter-spacing:-.01em}
.tv-head .tv-date{font-size:.55em;font-weight:500;opacity:.8;position:absolute;left:1.2vw}
.tv-head .tv-clock{font-size:.7em;font-variant-numeric:tabular-nums;position:absolute;right:1.2vw}
.tv-tblwrap{flex:1;min-height:0;background:#1e2a4a;padding:0 3px 3px;border-radius:0 0 6px 6px}
.tv-tbl{width:100%;height:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed}
.tv-tbl thead tr{height:64px}
.tv-tbl th{background:#e6e9ee;color:#1b2333;font-weight:700;font-size:clamp(11px,.9vw,19px);padding:.6vh .3vw;line-height:1.15;height:58px}
.tv-tbl th.c-time span{display:block}
.tv-tbl .c-booth{width:7%}
.tv-tbl .c-name{width:24%}
.tv-tbl td.c-booth,.tv-tbl td.c-name{background:#1c1d21;color:#f2f4f8;font-size:clamp(12px,1.05vw,24px);padding:.4vh .8vw;text-align:center}
.tv-tbl td.c-name{text-align:left;font-weight:500;line-height:1.25}
.tv-tbl td.c-name div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tv-tbl td.c-name small{display:block;color:#9aa3b5;font-size:.72em}
.tv-tbl td.cell{text-align:center;color:#fff;font-weight:500;font-size:clamp(18px,2.4vw,56px);font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,rgba(255,255,255,.2) 0 50%,transparent 50%),#2f6fc0}
.tv-tbl td.cell.full{background:linear-gradient(90deg,rgba(255,255,255,.2) 0 50%,transparent 50%),#c8393b}
.tv-tbl td.cell.lunch{background:linear-gradient(90deg,rgba(255,255,255,.2) 0 50%,transparent 50%),#8f9a2c}
.tv-tbl td.cell.none{background:#3a3f4b;color:#7d8596}
.tv-tbl td.cell.past{filter:saturate(.35) brightness(.8)}
.tv-tbl td.cell .lunch-t{font-size:.42em;opacity:.85;letter-spacing:.1em}
.tv-tbl .c-empty{background:#1c1d21;color:#9aa3b5;text-align:center;font-size:18px}
.tv-page{text-align:right;font-size:13px;color:#5d6678;min-height:18px;padding-top:4px}
.view-sw{position:fixed;right:12px;bottom:10px;display:flex;gap:2px;background:rgba(20,28,48,.75);border-radius:8px;padding:3px;z-index:30;transition:opacity .4s}
.view-sw a{color:#cdd5e6;font-size:12px;padding:4px 10px;border-radius:6px}
.view-sw a.on{background:#fff;color:#1e2a4a;font-weight:700} .view-sw a:hover{text-decoration:none}
body.idle .view-sw{opacity:0}
#vQueue{padding:18px}
.bno{background:#6ea0ff;color:#0f1729;border-radius:6px;padding:1px 8px;font-size:.75em;margin-right:8px;vertical-align:2px}
@media (max-width:900px){
  .tv{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible}
  .tv-sec,.tv-sec p,.tv-legend ul{min-width:0}
  .tv-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tv-brand{grid-column:1/-1}
  .tv-tblwrap{overflow-x:auto;min-height:60vh}
  .tv-tbl{min-width:760px;height:auto}
  .tv-tbl tbody tr{height:52px!important}
  .tv-head .tv-date{display:none}
}
.bno-s{display:inline-block;background:#1e2a4a;color:#fff;border-radius:6px;padding:0 7px;font-size:12px;font-weight:700;margin-right:6px;vertical-align:1px}
code{background:#eef1f6;border-radius:4px;padding:0 4px;font-size:12.5px}
@media (max-width:600px){
  .tv-side{grid-template-columns:minmax(0,1fr)}
  .tv-sec{padding:14px 16px}
  .tv-qr{flex-direction:row;text-align:left;gap:14px}
}