/* 경고 방송 (broadcast) 페이지 전용 스타일.
   index.html <head> 에서 <link rel="stylesheet"> 으로 로드 — fragment innerHTML mount
   시점과 무관하게 페이지 진입 직후 100% 적용 보장. 기존 broadcast_fragment.html 의
   inline <style> 가 일부 브라우저 / mount 타이밍에서 미적용되는 케이스 회피용. */

.broadcast-page .grid-2col{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
@media (max-width:980px){.broadcast-page .grid-2col{grid-template-columns:1fr}}
.broadcast-page .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.broadcast-page .panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.broadcast-page .panel-title{font-size:15px;font-weight:700;margin:0}
.broadcast-page .panel-body{padding:14px 16px}
.broadcast-page .bc-table{width:100%;border-collapse:collapse;font-size:13px}
.broadcast-page .bc-table th{text-align:left;font-weight:700;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--line-2)}
.broadcast-page .bc-table td{padding:8px 6px;border-bottom:1px dashed var(--line-2);vertical-align:top}
.broadcast-page .bc-table .col-actions{width:90px;text-align:right}
.broadcast-page .bc-form{display:flex;flex-direction:column;gap:10px}
.broadcast-page .bc-field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.broadcast-page .bc-field input, .broadcast-page .bc-field select, .broadcast-page .bc-field textarea{
  width:100%;min-width:0;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;font-weight:500;color:var(--ink)
}
.broadcast-page .bc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:640px){.broadcast-page .bc-row{grid-template-columns:repeat(2,1fr)}}
.broadcast-page .bc-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.broadcast-page .btn{padding:8px 14px;border-radius:10px;font-weight:700;font-size:13px;border:1px solid transparent;cursor:pointer}
.broadcast-page .btn-primary{background:var(--accent);color:#fff}
.broadcast-page .btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.broadcast-page .bc-status{font-size:12px;color:var(--muted);min-height:18px;margin-top:6px}
.broadcast-page .bc-status.ok{color:var(--ok)}
.broadcast-page .bc-status.err{color:var(--err)}
.broadcast-page .pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}
.broadcast-page .pill-ok{background:var(--ok-bg);color:var(--ok)}
.broadcast-page .pill-dry{background:var(--info-bg);color:var(--info)}
.broadcast-page .pill-fail{background:var(--err-bg);color:var(--err)}
.broadcast-page .pill-partial{background:var(--warn-bg);color:var(--warn)}

/* PTT — touch friendly. desktop default */
.broadcast-page .bc-panel-spaced{margin-top:18px}
.broadcast-page .bc-ptt-row{justify-content:flex-start;gap:12px;align-items:center}
.broadcast-page .bc-ptt-button{min-width:160px;padding:14px 22px;font-size:14px}
.broadcast-page .bc-ptt-info-inline{margin-top:0;min-width:240px}
#bc-ptt-btn{transition:background .12s ease,transform .08s ease;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#bc-ptt-btn[aria-pressed="true"]{transform:scale(.97)}
#bc-ptt-error{color:var(--err);font-size:12px;min-height:16px}

/* 모바일 최적화 — width 기반 단일 조건 (≤1024px). 모바일 세로/가로 + 태블릿
   모두 cover. landscape touch 조합 미디어 쿼리는 일부 브라우저/DevTools
   emulation 에서 inconsistent 라 width 단일 기준 채택. 글로벌 styles.css
   의 .page-head / .grid-2col override 위해 !important 명시. */
@media (max-width:1024px){
  .broadcast-page .page-title{font-size:18px !important}
  .broadcast-page .page-eyebrow{font-size:11px !important}
  .broadcast-page .page-head{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
  .broadcast-page .page-actions{width:100%}
  .broadcast-page .page-actions .btn{width:100%}
  .broadcast-page .panel-head{padding:12px !important;flex-direction:column !important;align-items:flex-start !important;gap:4px !important}
  .broadcast-page .panel-body{padding:12px !important}
  .broadcast-page .grid,
  .broadcast-page .grid-2col{grid-template-columns:1fr !important;gap:12px !important}
  .broadcast-page .bc-row{grid-template-columns:repeat(2,1fr) !important}
  .broadcast-page .bc-field input,
  .broadcast-page .bc-field select,
  .broadcast-page .bc-field textarea{font-size:15px !important;padding:10px 12px !important;min-height:44px}
  .broadcast-page .btn{padding:12px 18px !important;font-size:14px !important;min-height:44px}
  .broadcast-page .bc-actions{flex-direction:column !important;align-items:stretch !important;gap:8px !important;justify-content:stretch !important}
  .broadcast-page .bc-actions .btn{width:100% !important;min-width:0 !important}
  .broadcast-page .bc-ptt-row{flex-direction:column !important;gap:8px !important}
  .broadcast-page .bc-ptt-button{width:100% !important;min-width:0 !important;min-height:60px !important;padding:16px !important;font-size:16px !important}
  .broadcast-page .bc-ptt-info-inline{min-width:0 !important;text-align:center;width:100%}
  .broadcast-page .bc-table{font-size:12px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .broadcast-page .bc-table th,
  .broadcast-page .bc-table td{padding:6px 4px}
  .broadcast-page .bc-panel-spaced{margin-top:12px}
}

/* page-head 내부 div + page-sub 강제 wrap (1024px 보강) */
@media (max-width:768px){
  .broadcast-page .page-head > div{width:100%;min-width:0;max-width:100%}
  .broadcast-page .page-sub{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
}

/* 매우 좁은 폭 — ≤640px (모바일 세로/작은 가로) */
@media (max-width:640px){
  .broadcast-page .bc-row{grid-template-columns:1fr !important}
}
