:root{--bg:#0a101b;--panel:#101a2a;--panel2:#162235;--line:#3b5277;--line2:#4d698e;--tx:#edf3fd;--tx2:#ced9e9;--tx3:#94a8c4}
.script-item{border-bottom:1px solid var(--line);padding:12px 0}.script-item summary{cursor:pointer;font-size:13px;line-height:1.7;color:var(--tx2)}.script-item .tm{color:var(--tx3);margin-right:10px;font-size:12px}.script-item .rk{font-size:12px;color:#a9c9ef}.script-item .preview{display:block;margin-top:5px;color:var(--tx3)}.script-body{padding:10px 0 4px}.script-body p{font-size:14px;line-height:1.8;margin:0 0 12px}.replay{padding:6px 10px;border:1px solid var(--line2);border-radius:5px;background:var(--panel2);font-size:12px}.script-item summary:focus-visible{outline:2px solid #77b8ff}
body{height:auto;min-height:100vh;overflow:auto;display:block}#hd{height:auto;min-height:54px;padding:12px 20px;flex-wrap:wrap;overflow:visible;background:var(--panel);border-bottom:0}#hd .nm{display:none}#hd .wm{font-size:20px}#hd .n{white-space:normal}#hd #test{margin-left:auto}#hd .n{margin-left:0}
#radio-nav{display:flex;align-items:center;gap:5px;margin:0 12px;padding:0;background:none;border:0}
#hd .brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;text-decoration:none;color:var(--tx)}
#hd .brand .radar{width:30px;height:30px;display:block;flex:0 0 auto}
#hd .brand .wm{font-weight:700;font-size:19px;letter-spacing:.4px;line-height:1}
#hd .brand .radar .sweep{transform-origin:24px 24px;animation:radar-sweep 4s linear infinite}
#hd .brand .radar .blip{animation:radar-blink 2.4s ease-in-out infinite}
@keyframes radar-sweep{to{transform:rotate(360deg)}}@keyframes radar-blink{0%,100%{opacity:1}50%{opacity:.25}}#radio-nav a{padding:8px 12px;color:var(--tx3);text-decoration:none;font-size:14px;border-radius:6px}#radio-nav a[aria-current=page]{color:#b7d9ff;background:#213854}#radio-nav a:hover{background:#253750;color:white}
#radio-intro{margin:20px 20px 16px}#radio-intro h2{font-size:23px;font-weight:650;margin:0 0 5px}#radio-intro p{font-size:13px;color:var(--tx3);margin:0}#radio{margin:0 20px 16px;height:auto;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;overflow:visible;flex-wrap:wrap;background:var(--panel)}#radio .rt,#radio .rn{display:none}#radio .po{display:none}
#cap{margin:0 20px 16px;padding:22px 24px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);min-height:180px;max-height:none;overflow:visible}#cap .tx{font-size:21px;line-height:1.8;max-width:1300px}#cap .k{font-size:12px;padding:4px 10px;margin-bottom:12px}#cap .tm{margin-top:16px;font-size:12px}
#lists{height:auto;min-height:0;margin:0 20px 20px;gap:16px;background:transparent;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start}#lists>div{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:16px;overflow:visible}#lists .hd{position:static;font-size:16px;font-weight:600;background:transparent;padding:0 0 12px;margin:0;border-bottom:1px solid var(--line)}#lists .row{padding:12px 0;grid-template-columns:auto 1fr;gap:6px 10px;cursor:default}#lists .row .tx{grid-column:1/-1;white-space:normal;overflow:visible;line-height:1.7}#lists .row .rk{justify-self:start}#h .row{cursor:pointer}#h .row:hover{background:#1b2d46}#lists .n{padding:16px 0;font-size:13px}#dis{white-space:normal;margin:0 20px 16px;padding:12px 0;line-height:1.7}button:focus-visible,a:focus-visible{outline:2px solid #77b8ff;outline-offset:3px}
@media(max-width:760px){#lists{grid-template-columns:1fr}#lists>div{max-height:none}#cap{padding:16px;min-height:140px}#cap .tx{font-size:18px}#hd{padding-left:10px;padding-right:10px}#radio-nav{order:3;width:100%;margin:0 0 6px;gap:2px;flex-wrap:nowrap;overflow-x:auto}#radio-intro,#radio,#cap,#lists,#dis{margin-left:12px;margin-right:12px}#radio-nav a{font-size:12.5px;padding:7px 8px}#hd .n{width:100%}}
@media print{body{height:auto;overflow:visible}#radio,#test{display:none}#lists{display:block}#lists>div,#cap{break-inside:avoid;margin-bottom:16px}#hd,.hd{position:static!important}*{print-color-adjust:exact}}
/* Compact briefing desk; scripts stay complete when expanded. */
#hd{padding:0 14px;min-height:50px;height:auto;flex-wrap:wrap}#hd .wm{font-size:19px}#radio{margin:8px 16px;padding:7px 10px;min-height:36px}#cap{margin:0 16px 10px;padding:14px 16px;min-height:0;border-left:3px solid #68aaf3;border-radius:7px}#cap .tx{font-size:18px;line-height:1.65;max-width:none}#cap .k{margin-bottom:6px}#cap .tm{margin-top:8px}#lists{margin:0 16px 12px;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#lists>div{padding:12px;border-radius:7px}#lists .hd{font-size:14px;padding-bottom:8px}.script-item{padding:8px 0}.script-item summary{font-size:14px;line-height:1.5}.script-item .preview{font-size:13px;line-height:1.5;margin-top:4px}.script-body p{font-size:15px;line-height:1.7}#dis{margin:0 16px 10px;padding:4px 0;font-size:12px}
@media(max-width:760px){#lists{grid-template-columns:1fr}#cap .tx{font-size:16px}#radio-nav{flex-wrap:nowrap}.rb{min-height:34px}
  #radio-nav a{font-size:12.5px;padding:7px 8px}}   /* 27차-26: 네 화면 메뉴 치수 통일 — 이 블록이 파일 끝이라 위 규칙을 이긴다 */
@media(max-width:360px){#radio-nav a{font-size:12px;padding:7px 6px}}
/* Unequal queue/history lengths must not leave a full-height empty column. */
#lists{grid-template-columns:1fr}#q,#h{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:0 18px}#q[data-expanded=false]>.script-item:nth-child(n+7),#h[data-expanded=false]>.script-item:nth-child(n+7){display:none}.list-more{margin-top:8px;padding:6px 12px;border:1px solid var(--line2);border-radius:5px;background:var(--panel2);color:var(--tx2);font:inherit;cursor:pointer}.list-more[hidden]{display:none}#lists .n{padding:10px 0}.script-item[open]{grid-column:1/-1}

/* ══ 27차-27 공통 머리 띠 — 정적 화면(거래소 시세차·에너지 맵)과 **같은 값**이다.
   PC 50px 한 줄 · 휴대폰 71px 두 줄(상표 40 + 메뉴 31). 값이 어긋나면 화면을 옮길 때 머리줄이 흔들린다. ══ */
.sa-strip{display:flex;align-items:center;gap:6px;height:50px;padding:0 14px;box-sizing:border-box;
  white-space:nowrap;overflow:hidden;border-bottom:1px solid var(--line)}
.sa-strip .brand,.sa-strip #home-link{display:flex;align-items:center;gap:9px;flex:0 0 auto;text-decoration:none;color:var(--tx)}
.sa-strip .radar{width:30px;height:30px;display:block;flex:0 0 auto}
.sa-strip .wm{font-weight:700;font-size:19px;letter-spacing:.4px;line-height:1;margin:0;padding:0}
.sa-strip nav{display:flex;align-items:center;gap:5px;margin:0 0 0 12px;flex:0 1 auto;min-width:0;padding:0;background:none;border:0}
.sa-strip nav a{font-size:14px;color:var(--tx3);padding:8px 12px;text-decoration:none;border-radius:6px;white-space:nowrap}
.sa-strip nav a:hover{color:#fff;background:#253750;text-decoration:none}
.sa-strip nav a[aria-current=page]{color:#b7d9ff;background:#213854}
.sa-strip .sp{flex:1 1 0;min-width:0}
@media(max-width:700px){
  .sa-strip{height:71px;padding:0 10px;flex-wrap:wrap;align-content:flex-start}
  .sa-strip .brand,.sa-strip #home-link{height:40px}
  .sa-strip .radar{width:26px;height:26px} .sa-strip .wm{font-size:17px}
  .sa-strip nav{order:3;flex:0 0 100%;width:100%;height:31px;margin:0;gap:2px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sa-strip nav a{padding:6px 8px;font-size:12.5px}
}
@media(max-width:380px){ .sa-strip nav a{padding:6px 6px;font-size:12px} }

/* 브리핑은 띠 안에 소리 시험·설명 버튼이 함께 있다 — 높이는 띠가 정한다 */
#hd .rb{flex:0 0 auto}
#hd .n{flex:0 0 auto;max-width:38%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){#hd .n{display:none}}

/* 27차-27 못 박기 — 특이도를 옛 규칙보다 높여 띠의 치수가 반드시 이기게 한다 */
#bar .row.sa-strip,#hd.sa-strip{height:50px;min-height:50px;max-height:50px;padding:0 14px;gap:6px;
  align-items:center;flex-wrap:nowrap;overflow:hidden;border-bottom:1px solid var(--line)}
#bar .row.sa-strip nav a,#hd.sa-strip nav a{line-height:1.55;font-size:14px;padding:8px 12px}
@media(max-width:700px){
  #bar .row.sa-strip,#hd.sa-strip{height:71px;min-height:71px;max-height:71px;padding:0 10px;flex-wrap:wrap;align-content:flex-start}
  #bar .row.sa-strip nav a,#hd.sa-strip nav a{padding:6px 8px;font-size:12.5px}
  #hd.sa-strip .rb{padding:4px 7px;font-size:12px;min-height:28px}
  #hd.sa-strip .n{display:none}
}
@media(max-width:380px){
  #bar .row.sa-strip nav a,#hd.sa-strip nav a{padding:6px 6px;font-size:12px}
  #hd.sa-strip .rb{padding:4px 5px;font-size:11.5px}
}

/* 27차-27: 상표 글자 폭이 화면마다 111/115px 로 달라 메뉴 시작 x 가 4~6px 어긋났다(실측) → 폭을 못 박는다 */
@media(min-width:701px){
  #bar .row.sa-strip .wm,#hd.sa-strip .wm{min-width:115px;display:inline-block}
  #bar .row.sa-strip .brand,#bar .row.sa-strip #home-link,#hd.sa-strip #home-link{min-width:154px}
}

/* ══ 27차-28(대표님 지시) 공통 블록 — 네 화면(시장 스캐너·시장 브리핑·거래소 시세차·에너지 맵)에
   **같은 내용**으로 들어간다. 한 곳을 고치면 네 곳을 같이 고쳐야 한다(시험이 네 곳의 동일성을 확인한다). ══ */

/* ① 머리 띠 오른쪽 두 단추 — '설명 켬/끔' 과 언어. 에너지 맵의 모양이 기준이다. */
.sa-strip .hbtn{flex:0 0 auto;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  height:30px;padding:0 11px;border:1px solid var(--line2);border-radius:999px;background:var(--panel2);
  color:var(--tx3);font:inherit;font-size:12.5px;line-height:1;white-space:nowrap}
.sa-strip .hbtn:hover{background:var(--hover);color:var(--tx)}
.sa-strip .hbtn[aria-pressed="true"]{border-color:var(--ok);color:var(--ok)}
.sa-strip .hbtn.lang{min-width:62px;color:var(--tx2)}
@media(max-width:700px){
  .sa-strip .hbtn{height:28px;padding:0 8px;font-size:12px}
  .sa-strip .hbtn.lang{min-width:50px}
}

/* ② 조작 접기 — 핵심 조작만 남기고 나머지는 단추 하나 뒤로 접는다. 기본은 접힘.
   PC 에서는 .ctl-rest 가 display:contents 라 지금 줄 모양이 한 칸도 바뀌지 않는다(대표님 지시: PC 는 그대로).
   휴대폰에서만 접기 단추가 나오고, 접히면 나머지 조작이 사라진다.
   .fold-always 를 붙인 상자(에너지 맵)는 넓은 화면에서도 접는다. */
.ctl-more{display:none;align-items:center;justify-content:center;cursor:pointer;
  height:30px;padding:0 11px;border:1px solid var(--line2);border-radius:999px;background:var(--panel2);
  color:var(--tx2);font:inherit;font-size:12.5px;line-height:1;white-space:nowrap;flex:0 0 auto}
.ctl-more::after{content:"▾";margin-left:5px}
.ctl-more[aria-expanded="true"]::after{content:"▴"}
.ctl-more:hover{background:var(--hover);color:var(--tx)}
.ctl-more[aria-expanded="true"]{border-color:#5f8fc4;color:#cfe3ff}
.ctl-rest{display:contents}
.fold-always>.ctl-more{display:inline-flex}
.fold-always.ctl-folded>.ctl-rest{display:none}
@media(max-width:700px){
  .ctl-more{display:inline-flex;height:28px;padding:0 9px;font-size:12px}
  .ctl-rest{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;flex:1 1 100%;width:100%;min-width:0}
  .ctl-folded>.ctl-rest{display:none}
}

/* ③ 휴대폰에서 메뉴 넉 줄이 다 보이게 — 영어 문구가 한글보다 길어 '에너지 맵' 이 띠 밖으로 밀려 있었다(실측). */
@media(max-width:700px){
  .sa-strip nav{gap:1px}
  #bar .row.sa-strip nav a,#hd.sa-strip nav a,.sa-strip nav a{padding:6px 5px;font-size:12px;letter-spacing:-.1px}
}
@media(max-width:380px){
  #bar .row.sa-strip nav a,#hd.sa-strip nav a,.sa-strip nav a{padding:6px 4px;font-size:11.5px}
}

/* ══ 27차-30(대표님 지시 "이 기호가 작아서 잘 안 보인다") 방향 기호 확대 — 네 화면 공통 블록 ══
   ▾ ▴ ▸ ▲ ▼ 를 11.5~13px 에서 24px 으로 키운다(글자 크기 2.1배 · 보이는 넓이 약 4배).
   줄 높이를 0 으로 눌러 두므로 **단추·제목의 높이는 한 픽셀도 늘지 않는다**(실측으로 확인). */
.sa-caret{font-size:24px;line-height:0;display:inline-block;vertical-align:-3px;
  font-style:normal;letter-spacing:0;transform:scaleY(.82);transform-origin:center}

/* 27차-28: 휴대폰에서도 상표 폭을 못 박는다 — 실측 상표 폭이 화면마다 135/139px 로 달랐다
   (브리핑은 레이더가 30px 로 남았고, 스캐너는 글자가 4px 좁았다). PC 는 27차-27 의 115/154px 못 박기가 그대로다. */
@media(max-width:700px){
  #bar .row.sa-strip .radar,#hd.sa-strip .radar,.sa-strip .radar{width:26px;height:26px;display:block;flex:0 0 auto}
  #bar .row.sa-strip .wm,#hd.sa-strip .wm,.sa-strip .wm{min-width:104px;display:inline-block;font-size:17px}
}

/* 27차-28: 접힌 상자에서는 남은 묶음이 제 폭만 쓰게 해 '설정' 이 같은 줄에 앉는다(휴대폰 한 줄 실측). */
@media(max-width:700px){ .ctlbar.ctl-folded .grp{flex:1 1 auto} }

/* ══ 27차-31(대표님 지시) 휴대폰 메뉴 글자 능동 확대 — 네 화면 공통 블록 ══
   메뉴 줄(31px)에 빈 자리가 남는데 글자가 12px 이라 읽기 어려웠다. 화면 폭에 따라 글자와 여백이 함께 커지게
   clamp(최소, 화면비례, 최대) 로 둔다 — 기기마다 폭이 달라도 그 폭에 맞는 가장 큰 글자를 쓴다.
   한국어(가장 긴 '거래소 시세차')와 영어(가장 긴 'Market briefing') 둘 다 344~430px 에서 안 잘리는 값으로 실측해 정했다.
   메뉴 줄 자체도 31 → 34px 로 키워 글자가 눌리지 않게 한다. */
@media(max-width:700px){
  .sa-strip nav,#bar .row.sa-strip nav,#hd.sa-strip nav{height:34px;gap:clamp(0px,0.4vw,3px);justify-content:space-between}
  #bar .row.sa-strip nav a,#hd.sa-strip nav a,.sa-strip nav a{
    font-size:clamp(12px,3.35vw,16px);
    padding:5px clamp(3px,1.1vw,9px);
    letter-spacing:-.2px;flex:0 1 auto;min-width:0}
  /* 띠 높이도 그만큼 — 상표 40 + 메뉴 34 = 74px */
  #bar .row.sa-strip,#hd.sa-strip,.sa-strip{height:74px;min-height:74px;max-height:74px}
}
@media(max-width:380px){
  #bar .row.sa-strip nav a,#hd.sa-strip nav a,.sa-strip nav a{font-size:clamp(11.5px,3.3vw,14px);padding:5px 3px}
}
@media(max-width:700px){
  /* 27차-31: 한국어 문구가 영어보다 짧아 같은 규칙으로는 자리가 남는다(실측 344px 에서 62px 여유) —
     한국어일 때만 조금 더 키워 상자를 채운다. 언어는 <html lang> 이 알려 준다. */
  html[lang="ko"] #bar .row.sa-strip nav a,html[lang="ko"] #hd.sa-strip nav a,html[lang="ko"] .sa-strip nav a{
    font-size:clamp(13px,3.75vw,17.5px);padding:5px clamp(4px,1.4vw,10px)}
}

/* ══ 27차-28(대표님 지시) 방송 띠 — index.html 과 radio.html 에 **같은 내용**으로 들어간다 ══
   PC 는 지금 줄 모양 그대로(.ctl-rest 가 display:contents).
   휴대폰에서는 '방송 켬/끔 · 거래소 · 설정' 한 줄 + 자막 한 줄로 줄이고, 코너·속도·기록·별창은 '설정' 안으로 접는다. */
@media(max-width:700px){
  #radio{flex-wrap:wrap;height:auto;min-height:44px;padding-top:6px;padding-bottom:6px;overflow:visible;row-gap:6px}
  #radio .rk{display:none}
  #radio .rt{flex:0 0 100%;width:100%;order:10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-basis:100%}
  #radio .ctl-rest{order:9}
  #radio .rn{max-width:100%}
}
/* 27차-27: radio.html 의 `#hd .wm{font-size:18px}` 가 띠의 19px 을 이겨 상표가 2px 좁았다(실측) */
#hd.sa-strip .wm{font-size:19px;letter-spacing:.4px;font-weight:700}
@media(max-width:700px){#hd.sa-strip .wm{font-size:17px}}
/* 27차-27: `#radio-nav{margin:0 12px}` 이 좁은 폭 규칙에서 10px 으로 덮여 메뉴가 2px 왼쪽에 있었다(실측) */
#hd.sa-strip #radio-nav{margin:0 0 0 12px}
@media(max-width:700px){#hd.sa-strip #radio-nav{margin:0}}