/* 언리얼 페스트 2026 서울 · 현장 운영
   디자인: /design-system (다크 + 시안 #00C1D5, 샤프 모서리)
   레이아웃: 폰(기본) → 아이패드 세로(768+) → 아이패드 가로·데스크톱(1024+) */
:root{
  /* 배경 — 어두운→밝은 */
  --bg:#09090b; --bg2:#0e0f14; --bg3:#111115; --bg4:#3f3f46;
  /* 보더 */
  --line:#27272a; --line-soft:#1b1b20; --line-hover:rgba(255,255,255,.2);
  /* 텍스트 — 색이 아니라 명도로 위계 */
  --tx:#ffffff; --tx2:#a1a1aa; --tx3:#71717a;
  /* 액센트 — 화면에 1~2개만 */
  --accent:#00C1D5; --accent-h:#00a8ba; --accent-soft:#9adbe8; --on-accent:#09090b;
  /* 시맨틱 상태 */
  --live:#1a9e54; --live-2:#39d98a;
  --soon:#FF8F1C; --danger:#c0392b; --danger-soft:#ff8674;
  --info:#307FE2; --info-2:#7dabf0; --purple:#7c3aed; --brand:#FA4616;
  /* 현재 시각 표시 전용 — 상태색(중계 제외 빨강 · 진행 중 초록)과 헷갈리지 않게 밝은 민트로 */
  --now:#5eead4;
  /* 트랙 색 (정보 구분용 — 액센트와 겹치지 않게) */
  --art:#FF8F1C; --prog:#307FE2; --me:#39d98a; --common:#71717a; --mfg:#7c3aed;
  /* 라운드 — 공개 폼은 0, 관리자 툴은 카드 6 / 컨트롤 4 / 배지 3 */
  --radius:6px; --radius-sm:4px; --radius-badge:3px;
  --font-head:'Inter Tight','Noto Sans KR',system-ui,Arial,sans-serif;
  --topbar-h:57px;
  --page:1180px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;word-break:keep-all}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
    "Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(24px + var(--safe-b));
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}

/* ---------- 게이트 ---------- */
.gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:50;overflow-y:auto}
.gate-inner{width:100%;max-width:460px}
.gate-logo{font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:800;margin-bottom:14px}
.gate h1{font-family:var(--font-head);font-size:28px;font-weight:800;margin-bottom:6px}
.gate-sub{color:var(--tx2);font-size:14px;margin:0 0 24px}
.gate-list{display:flex;flex-direction:column;gap:10px}
.gate-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  transition:border-color .2s ease,background .2s ease}
.gate-btn:hover{border-color:var(--line-hover)}
.gate-btn:active{background:var(--bg3)}
.gate-btn .dot{width:10px;height:10px;flex:none}
.gate-btn .g-room{font-weight:700;font-size:16px}
.gate-btn .g-meta{color:var(--tx2);font-size:13px;margin-top:2px}

/* ---------- 상단 ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;height:var(--topbar-h);padding:0 16px;background:rgba(9,9,11,.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-room{text-align:left;line-height:1.25}
.tb-room{display:block;font-weight:700;font-size:15px}
.tb-name{display:block;color:var(--tx2);font-size:12px}
.topbar-right{display:flex;align-items:center;gap:10px}
.clock{font-family:var(--font-head);font-variant-numeric:tabular-nums;font-weight:800;
  font-size:20px;letter-spacing:.02em;padding:2px 4px;border-radius:var(--radius-sm)}
/* 시뮬레이션이 켜져 있으면 시계를 주황으로 — 실시간이 아님을 한눈에 */
.clock.is-sim{color:var(--soon);background:rgba(255,143,28,.12)}
.icon-btn{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--bg2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:15px;
  transition:border-color .2s,background .2s,color .2s}
.icon-btn:hover{border-color:var(--line-hover)}
.icon-btn.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.simbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;
  background:rgba(255,143,28,.08);border-bottom:1px solid rgba(255,143,28,.3);font-size:13px}
.simbar label{color:var(--soon);font-weight:700}
.simbar input{background:var(--bg2);border:1px solid var(--line);color:var(--tx);
  border-radius:var(--radius-sm);padding:6px 8px;font:inherit;font-size:13px;
  outline:none;transition:border-color .2s ease}
.simbar input:focus{border-color:var(--accent)}
.simbar button{color:var(--soon);text-decoration:underline;font-size:13px}
.simbar .sim-btn{padding:5px 12px;border:1px solid rgba(255,143,28,.4);
  border-radius:var(--radius-sm);color:var(--soon);text-decoration:none;
  font-size:12.5px;font-weight:800;white-space:nowrap;transition:background .2s,border-color .2s}
.simbar .sim-btn.is-on{background:var(--soon);color:var(--on-accent);border-color:var(--soon)}
/* 시각 이동 슬라이더 — 끌면 현재 시각 라인과 진행률 바가 따라 움직인다 */
#sim-range{flex:1 1 100%;margin:2px 0 0;height:20px;accent-color:var(--soon);cursor:pointer}

/* ---------- 탭 ---------- */
.tabs{position:sticky;top:var(--topbar-h);z-index:19;display:flex;gap:6px;padding:8px 16px;
  overflow-x:auto;background:rgba(9,9,11,.95);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:8px 14px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:700;
  color:var(--tx2);background:transparent;border:1px solid var(--line);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color .2s,border-color .2s,background .2s}
.tab:hover{color:var(--tx);border-color:var(--line-hover)}
.tab.is-on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.tab-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-badge);
  background:var(--danger);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.tab.is-on .tab-badge{background:var(--on-accent);color:var(--accent)}

main{padding:16px 16px 0}
.view{display:flex;flex-direction:column;gap:14px}

/* ---------- 카드 공통 ---------- */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card-lab{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--tx3);margin-bottom:12px}
.muted{color:var(--tx2)}
.tiny{font-size:12.5px}

/* ---------- 지금 카드 ---------- */
.now{border-radius:var(--radius);padding:20px;border:1px solid var(--line);background:var(--bg2);
  position:relative;overflow:hidden}
.now::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tx3)}
.now.s-live::before{background:var(--live-2)}
.now.s-soon::before{background:var(--soon)}
.now.s-turn::before{background:var(--info)}
.now.s-idle::before{background:var(--tx3)}
.now-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-badge);
  font-size:11.5px;font-weight:800;letter-spacing:.02em}
.pill.live{background:rgba(26,158,84,.18);color:var(--live-2)}
.pill.soon{background:rgba(255,143,28,.16);color:var(--soon)}
.pill.turn{background:rgba(48,127,226,.18);color:var(--info-2)}
.pill.idle{background:var(--bg3);color:var(--tx2)}
.pill.red{background:rgba(192,57,43,.22);color:var(--danger-soft)}
.pill.star{background:rgba(255,143,28,.16);color:var(--soon)}
.blink{width:7px;height:7px;border-radius:50%;background:currentColor;animation:bl 1.4s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
.now-timer{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;color:var(--tx2)}
.now-time{font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums;margin-bottom:5px}
.now-kind{font-size:11px;font-weight:800;color:var(--tx3);letter-spacing:.1em;margin-bottom:7px}
.now-title{font-family:var(--font-head);font-size:22px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.now-spk{margin-top:8px;font-size:14px;color:var(--tx2)}
.now-note{margin-top:12px;padding:10px 12px;border-radius:var(--radius-sm);
  background:rgba(255,143,28,.1);border:1px solid rgba(255,143,28,.3);color:var(--soon);
  font-size:13px;font-weight:600}
.now-none{font-size:19px;font-weight:700;color:var(--tx2)}
.bar{height:4px;background:var(--bg3);margin-top:16px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--live);transition:width .5s}
.now.s-soon .bar span{background:var(--soon)}

/* ---------- 할 일 ---------- */
.todo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.todo-head h2{font-size:17px}
/* .todo-head 로 한정한다 — 트랙 클래스 .prog(게임: 프로그래밍)와 이름이 겹쳐서,
   한정하지 않으면 .gcard.prog 카드가 이 스타일을 상속해 제목 색·굵기가 틀어진다 */
.todo-head .prog{font-size:12.5px;font-weight:800;color:var(--tx2);font-variant-numeric:tabular-nums}
.todo{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:var(--radius-sm);
  background:var(--bg3);border:1px solid var(--line-soft);text-align:left;width:100%;
  transition:border-color .2s,background .2s}
.item:hover{border-color:var(--line)}
.item.on{background:rgba(26,158,84,.1);border-color:rgba(26,158,84,.4)}
.box{width:22px;height:22px;border-radius:var(--radius-badge);border:2px solid var(--tx3);flex:none;
  margin-top:1px;display:grid;place-items:center;font-size:13px;font-weight:900;color:transparent}
.item.on .box{background:var(--live);border-color:var(--live);color:#fff}
.item-txt{flex:1;font-size:14px;line-height:1.45}
.item.on .item-txt{color:var(--tx2);text-decoration:line-through;text-decoration-color:var(--tx3)}
.item-meta{display:block;margin-top:4px;font-size:12px;color:var(--tx3)}
.item.hot{border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.12)}

/* ---------- 다음 ---------- */
.next{display:flex;gap:12px;align-items:flex-start}
.next-t{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;color:var(--accent);flex:none;
  min-width:46px;padding-top:1px}
.next-b{flex:1}
.next-b .t{font-weight:700;font-size:15px;line-height:1.4}
.next-b .s{color:var(--tx2);font-size:13px;margin-top:3px}

/* ---------- 타임라인 ---------- */
.tl{display:flex;flex-direction:column;gap:0;position:relative}
.row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:none}
.row.past{opacity:.4}
/* 선이 지나는 동안 그 카드에 포커스 — 민트 테두리 + 은은한 글로우 */
.row.cur{position:relative;background:rgba(94,234,212,.07);margin:0 -12px;padding:12px;
  border:1px solid rgba(94,234,212,.4);border-radius:var(--radius-sm);
  box-shadow:0 0 18px rgba(94,234,212,.10)}
.row-t{flex:none;min-width:52px;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;
  color:var(--tx2);line-height:1.35}
.row-t .e{display:block;color:var(--tx3);font-weight:500}
.row-b{flex:1;min-width:0}
.row-k{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--tx3);margin-bottom:3px}
.row-tt{font-size:14.5px;font-weight:650;line-height:1.4}
.row-s{font-size:12.5px;color:var(--tx2);margin-top:3px}
.row-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.tag{font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:var(--radius-badge);
  background:var(--bg3);color:var(--tx2)}
.tag.red{background:rgba(192,57,43,.22);color:var(--danger-soft)}
.tag.warn{background:rgba(255,143,28,.16);color:var(--soon)}
.tag.ok{background:rgba(26,158,84,.18);color:var(--live-2)}
.row.brk .row-tt{color:var(--tx3);font-weight:500;font-size:13.5px}

/* 현재 시각 라인 — 20초마다 재렌더되며 위치가 내려간다 */
.nowline{display:flex;align-items:center;gap:8px;margin:2px 0;pointer-events:none}
.nowline::after{content:"";flex:1;height:2px;background:var(--now)}
.nl-t{flex:none;font-size:10.5px;font-weight:800;color:var(--on-accent);background:var(--now);
  padding:2px 7px;border-radius:var(--radius-badge);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;box-shadow:0 0 12px rgba(94,234,212,.35)}
.tl-hint{padding:9px 12px;margin-bottom:8px;border-radius:var(--radius-sm);
  background:rgba(255,143,28,.07);border:1px dashed rgba(255,143,28,.3);
  color:var(--tx3);font-size:11.5px;line-height:1.5}
.tl-hint b{color:var(--soon);font-weight:800}

/* 진행 중인 행들을 가로지르는 선. 여러 룸이 동시에 진행돼도 하나의 선으로 내려간다 */
.nowline.abs{position:absolute;left:0;right:0;margin:0;z-index:3;
  transform:translateY(-50%);pointer-events:none;transition:top .25s linear}

/* ---------- 체크리스트 ---------- */
.phase{margin-bottom:6px}
.phase-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--tx)}
.phase-h .p{font-size:12px;color:var(--tx3);font-weight:700;font-variant-numeric:tabular-nums}
.phase.now-phase{border-color:var(--accent)}
.phase.now-phase .phase-h{color:var(--accent)}

/* ---------- 전체 룸 ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:10px}
.gcard{padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg3);
  border:1px solid var(--line-soft);border-left:3px solid var(--tx3)}
.gcard.art{border-left-color:var(--art)} .gcard.prog{border-left-color:var(--prog)}
.gcard.me{border-left-color:var(--me)} .gcard.common{border-left-color:var(--common)}
.gcard.mfg{border-left-color:var(--mfg)}
.gcard .r{font-size:11px;font-weight:800;color:var(--tx3);letter-spacing:.06em}
.gcard .t{font-size:14px;font-weight:650;color:var(--tx);margin-top:5px;line-height:1.4}
.gcard .s{font-size:12.5px;font-weight:400;color:var(--tx2);margin-top:3px}
.slot-h{display:flex;align-items:baseline;gap:10px;margin:20px 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.slot-h:first-child{margin-top:0}
.slot-h .h{font-family:var(--font-head);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.slot-h .k{font-size:11px;color:var(--tx3);font-weight:800;letter-spacing:.08em}

/* ---------- 연락 ---------- */
.call{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--radius-sm);
  background:var(--bg3);border:1px solid var(--line-soft);text-decoration:none;color:inherit;
  transition:border-color .2s}
.call:hover{border-color:var(--line-hover)}
.call .av{width:42px;height:42px;border-radius:var(--radius-sm);display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;flex:none}
.call .n{font-weight:700;font-size:15px}
.call .r{font-size:12.5px;color:var(--tx2);margin-top:2px}
.call .p{margin-left:auto;font-weight:800;color:var(--accent);font-size:13.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.link{color:var(--accent);text-decoration:none;font-size:13.5px;word-break:break-all}
.link:hover{color:var(--accent-soft);text-decoration:underline}
.issue{padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg3);
  border:1px solid var(--line-soft);border-left:3px solid var(--soon)}
.issue .c{font-size:10.5px;font-weight:800;color:var(--soon);letter-spacing:.08em}
.issue .t{font-weight:700;font-size:14px;margin-top:4px}
.issue .d{font-size:13px;color:var(--tx2);margin-top:5px;line-height:1.5}
.issue .o{font-size:12px;color:var(--tx3);margin-top:6px}

/* 일차 선택 = 목록 필터. 디자인 시스템 규칙에 따라 채움이 아니라 보더로 선택을 표시한다
   (채움 시안은 활성 탭 하나에만 쓴다) */
/* 이 화면이 "내 룸만"인지 "전 룸"인지 알려주는 한 줄 */
.scope-note{padding:9px 13px;border-radius:var(--radius-sm);background:var(--bg3);
  border:1px solid var(--line-soft);color:var(--tx2);font-size:12px;line-height:1.5}
.scope-note b{color:var(--tx);font-weight:800}

.daysel{display:flex;gap:6px;margin-bottom:4px;max-width:520px}
.ds-n{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:var(--radius-badge);
  background:var(--bg3);color:var(--tx3);font-size:10.5px;font-weight:800;
  font-variant-numeric:tabular-nums}
.daysel button.is-on .ds-n{background:rgba(0,193,213,.18);color:var(--accent)}
.daysel button{flex:1;padding:10px;border-radius:var(--radius-sm);background:transparent;
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--tx2);
  transition:color .2s,border-color .2s,background .2s}
.daysel button:hover{color:var(--tx);border-color:var(--line-hover)}
.daysel button.is-on{background:rgba(0,193,213,.08);border-color:var(--accent);color:var(--accent)}

/* ---------- 공지 배너 · 토스트 ---------- */
.notices{display:flex;flex-direction:column;gap:6px;padding:12px 16px 0}
.notice{padding:11px 14px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:650;
  line-height:1.45;background:rgba(255,143,28,.1);border:1px solid rgba(255,143,28,.35);color:var(--soon)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + var(--safe-b));
  z-index:40;max-width:88vw;padding:12px 18px;border-radius:var(--radius-sm);font-size:13.5px;
  font-weight:700;background:var(--bg2);border:1px solid var(--accent);color:var(--accent-soft);
  box-shadow:0 8px 26px rgba(0,0,0,.6)}

/* ---------- 송출 현황 (AV) ---------- */
.av-alert{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--bg3);border:1px solid var(--line-soft);border-left:3px solid var(--tx3);
  margin-bottom:16px}
.av-alert b{font-family:var(--font-head);font-size:17px;font-weight:800}
.av-alert span{font-size:12.5px;color:var(--tx2)}
.av-alert.on{background:rgba(192,57,43,.12);border-color:rgba(192,57,43,.35);
  border-left-color:var(--danger)}
.av-alert.on b{color:var(--danger-soft)}

.avgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.avroom{padding:12px;border-radius:var(--radius-sm);background:var(--bg3);
  border:1px solid var(--line-soft);border-top:3px solid var(--tx3)}
.avroom.o-off{border-top-color:var(--danger);background:rgba(192,57,43,.09)}
.avroom.o-on{border-top-color:var(--live-2)}
.avroom.o-chk{border-top-color:var(--soon);background:rgba(255,143,28,.08)}
.avroom.o-none{opacity:.5}
.avr-h{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.avr-n{font-size:12px;font-weight:800;padding-left:7px;border-left:3px solid var(--tx3)}
.avr-h .pill{font-size:10px;padding:3px 7px}
.avr-t{font-size:13px;font-weight:650;line-height:1.35;margin-top:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.avr-s{font-size:11.5px;color:var(--tx2);margin-top:3px}
.avr-m{font-size:11px;color:var(--tx3);margin-top:7px;font-variant-numeric:tabular-nums}

.av-next{margin-top:16px;padding:13px 15px;border-radius:var(--radius-sm);background:var(--bg3);
  border:1px dashed var(--line)}
.avn-h{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--tx3)}
.avn-b{font-size:14px;font-weight:700;margin-top:6px}
.avn-b.off{color:var(--danger-soft)}

.av-toggle{width:100%;padding:11px;border-radius:var(--radius-sm);background:transparent;
  border:1px solid var(--line);color:var(--tx2);font-size:13px;font-weight:700;margin-bottom:8px;
  transition:color .2s,border-color .2s}
.av-toggle:hover{color:var(--tx);border-color:var(--line-hover)}
.av-toggle.is-on{color:var(--accent);border-color:var(--accent)}

/* ---------- 라이브 진행 ---------- */
.tag.live-tag{background:rgba(124,58,237,.25);color:#c4b5fd}
.tag.prep{background:rgba(48,127,226,.22);color:var(--info-2)}
.row.is-live{background:rgba(124,58,237,.07);margin:0 -12px;padding:12px;
  border-left:3px solid var(--purple)}
.row.is-live .row-tt{color:#ddd6fe}
.row.is-live.cur{background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.45);
  border-left:3px solid var(--purple);border-radius:var(--radius-sm)}
.live-empty{padding:12px 14px;margin-bottom:12px;border-radius:var(--radius-sm);
  background:var(--bg3);border:1px dashed var(--line);color:var(--tx2);
  font-size:12.5px;line-height:1.55}
.live-empty b{color:var(--accent);font-weight:800}

/* ---------- 시간표 (AV) — design-system .ufs-table 규격 ---------- */
.tt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px;
  position:relative}
/* 현재 시각 선. 표가 가로로 넘칠 때도 항상 보이도록 뷰 폭에 고정한다
   (.tt-inner 로 표 폭에 맞추면 table-layout:fixed 의 열 계산이 깨진다) */
.tt-line{left:18px;right:auto;z-index:4}   /* width 는 placeTableLines() 가 표 폭으로 잡는다 */
/* table-layout:fixed — 룸 열을 균등 폭으로 고정해 나란히 비교할 수 있게 한다 */
.ttable{width:100%;border-collapse:collapse;font-size:13px;min-width:780px;table-layout:fixed}
.ttable th,.ttable td{border:1px solid var(--line);padding:8px 10px;vertical-align:top;
  text-align:left;overflow-wrap:anywhere}
.ttable thead th{background:var(--bg3);color:var(--tx2);font-weight:800;font-size:11.5px;
  letter-spacing:.06em;text-align:center;white-space:nowrap}
.ttable thead th span{display:block;margin-top:3px;font-size:10px;font-weight:600;color:var(--tx3);
  letter-spacing:0}
/* table-layout:fixed 는 첫 행 기준으로 열 폭을 정하므로 th 에도 같은 폭을 준다 */
.ttable th.tt-time,.ttable td.tt-time{width:62px}
.ttable td.tt-time{text-align:center;font-variant-numeric:tabular-nums;
  font-weight:800;font-size:12px;color:var(--tx2);background:var(--bg2);
  position:sticky;left:0;z-index:1}
.ttable td.tt-time span{display:block;font-weight:500;color:var(--tx3)}
.tt-b{display:inline-block;font-size:9.5px;font-weight:800;line-height:1.3;padding:2px 6px;
  border-radius:var(--radius-badge);margin-bottom:5px;letter-spacing:.04em}
.tt-b.on{background:rgba(26,158,84,.2);color:var(--live-2)}
.tt-b.off{background:var(--danger);color:#fff}
.tt-b.chk{background:var(--soon);color:var(--on-accent)}
.tt-odd{display:inline-block;margin-left:5px;font-size:10px;font-weight:800;color:var(--soon);
  font-variant-numeric:tabular-nums}
.tt-t{font-size:12.5px;font-weight:650;line-height:1.35;color:var(--tx)}
.tt-s{font-size:11.5px;color:var(--tx2);margin-top:3px;line-height:1.35}
.tt-n{font-size:10.5px;color:var(--soon);margin-top:4px;line-height:1.35}
.ttable td.s-off{background:rgba(192,57,43,.15);box-shadow:inset 0 -2px 0 rgba(192,57,43,.55)}
.ttable td.s-chk{background:rgba(255,143,28,.13);box-shadow:inset 0 -2px 0 rgba(255,143,28,.5)}
.ttable td.tt-all{text-align:center;color:var(--tx2)}
/* 휴식 시간대에 함께 진행되는 시설 작업(파티션 설치/철거) */
.tt-work{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--radius-badge);
  background:rgba(255,143,28,.16);color:var(--soon);font-size:11px;font-weight:800}
.ttable td.tt-empty{text-align:center;color:var(--tx3)}
/* 행 상태 클래스는 반드시 tt- 접두사를 유지할 것 — .now / .past 같은 이름을 <tr>에 쓰면
   카드용 규칙(.now 등)과 충돌해 표의 열 정렬이 깨진다 */
.ttable tr.tt-brk td{background:var(--bg3);color:var(--tx3);font-size:12px;padding:5px 10px}
.ttable tr.tt-brk td.tt-time{background:var(--bg3)}
.ttable tr.tt-past td{opacity:.38}
.ttable tr.tt-cur td{background:rgba(94,234,212,.07)}
.ttable tr.tt-cur td.s-off{background:rgba(192,57,43,.16)}
.ttable tr.tt-cur td.s-chk{background:rgba(255,143,28,.16)}
.ttable tr.tt-cur td.tt-time{background:var(--bg2);box-shadow:inset 3px 0 0 var(--now)}
/* 리허설 그리드 — 10분 격자에 rowspan 으로 항목을 눕힌다 */
.ttable.reh td{padding:5px 9px}
.ttable.reh td.tt-time{font-size:11px;font-weight:700;color:var(--tx3)}
.ttable.reh tr.reh-gap td{height:16px;padding:2px 9px}
.ttable.reh tr.reh-gap td.tt-time{color:var(--line)}
.reh-cell{background:rgba(255,255,255,.02);vertical-align:top!important}
.reh-time{font-size:10.5px;font-weight:800;color:var(--accent);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;margin-bottom:4px}
.tt-b.multi{background:var(--purple);color:#fff;margin:0 0 0 4px;vertical-align:1px}
.ttable.reh .tt-t{font-size:12px}
.ttable.reh .tt-s{font-size:11px}

.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:26px 16px calc(26px + var(--safe-b));margin-top:24px;color:var(--tx3);font-size:12px;
  border-top:1px solid var(--line)}
.linkish{color:var(--tx2);text-decoration:underline;font-size:12px}
.linkish:hover{color:var(--tx)}
.empty{padding:26px 0;text-align:center;color:var(--tx3);font-size:14px}

/* ============================================================
   아이패드 세로 (768px+) — 폭을 넓게 쓰고 카드를 2열로
   ============================================================ */
@media(min-width:768px){
  :root{--topbar-h:64px}
  body{font-size:15.5px}
  main{padding:22px 24px 0}
  .topbar{padding:0 24px}
  .tabs{padding:10px 24px}
  .notices,.simbar{padding-left:24px;padding-right:24px}
  .foot{padding-left:24px;padding-right:24px}
  .card{padding:22px}
  .now{padding:24px}
  .now-title{font-size:25px}
  .clock{font-size:22px}
  .grid{grid-template-columns:1fr 1fr}
  .avgrid{grid-template-columns:repeat(4,1fr)}
  .view{gap:16px}
  /* 체크리스트 전체 목록은 세로에서도 2열이 한눈에 들어온다 */
  #view-check{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  #view-check > .check-info{grid-column:1/-1}
  #view-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  #view-info > .card:first-child{grid-column:1/-1}
}

/* ============================================================
   아이패드 가로 · 데스크톱 (1024px+)
   "지금"과 "송출 현황"은 좌우 2열 — 오른쪽 칼럼은 스크롤을 따라온다
   ============================================================ */
@media(min-width:1024px){
  main{max-width:var(--page);margin:0 auto;padding:26px 28px 0}
  .topbar,.tabs,.notices,.simbar,.foot{
    padding-left:max(28px,calc(50vw - (var(--page)/2) + 28px));
    padding-right:max(28px,calc(50vw - (var(--page)/2) + 28px));
  }
  .grid{grid-template-columns:repeat(4,1fr)}

  /* 지금: 좌 = 현재/다음/연락, 우 = 체크리스트(고정) */
  #view-now{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:16px;align-items:start}
  #view-now > .now{grid-column:1}
  #view-now > .now-todo{grid-column:2;grid-row:1 / span 3;
    position:sticky;top:calc(var(--topbar-h) + 56px);max-height:calc(100vh - var(--topbar-h) - 80px);
    overflow-y:auto}
  #view-now > .now-next,#view-now > .now-call{grid-column:1}
  .now-title{font-size:27px}

  /* 송출 현황: 상태판은 전폭, 그 아래 계획(좌) + 연락망(고정, 우) */
  #view-av{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
    gap:16px;align-items:start}
  #view-av > .av-now,#view-av > .daysel,#view-av > .scope-note{grid-column:1/-1}
  #view-av > .av-plan{grid-column:1}
  #view-av > .av-contact{grid-column:2;position:sticky;top:calc(var(--topbar-h) + 56px)}

  /* 라이브: 진행 순서(좌) + 지금·연락망(우, 고정) */
  #view-live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
    gap:16px;align-items:start}
  #view-live > .daysel{grid-column:1;order:1}
  #view-live > .scope-note{grid-column:1;order:2}
  #view-live > .live-list{grid-column:1;order:3}
  #view-live > .live-now{grid-column:2;grid-row:1;order:4;
    position:sticky;top:calc(var(--topbar-h) + 56px)}
  #view-live > .live-contact{grid-column:2;order:5}

  /* 모든 뷰는 main 의 폭을 그대로 쓴다 — 탭을 바꿔도 콘텐츠 폭이 달라지지 않게.
     타임라인 한 줄이 길어지는 건 행 안에서 제한한다(.row-b) */
  #view-today .row-b{max-width:760px}
}

@media(min-width:1280px){
  main{padding-top:30px}
  .card{padding:24px}
  .now{padding:28px}
}

/* 마우스가 없는 기기에서는 hover 스타일을 적용하지 않는다 */
@media(hover:none){
  .gate-btn:hover,.tab:hover,.item:hover,.call:hover,.icon-btn:hover,
  .daysel button:hover,.av-toggle:hover{border-color:inherit;color:inherit}
}