/* ══ 24h 🔎 종목 화면 전용 CSS ══════════════════════════════════════════
   색·글꼴·상단메뉴·.wrap·footer·details(아코디언) 는 /24h/assets/shell.css 가 담당한다.
   🔴 여기서 :root · body · details · summary 를 다시 선언하지 말 것 (shell 을 고쳐도 이 화면만 안 바뀐다).
   🔴 shell.css 에 이미 있는 이름(.bar .bar-sub .seg .exp .note .warn .live .dot)을 쓰지 말 것.
      2026-09-30 매출비중 줄에 .seg 를 썼다가 shell 의 메뉴 스위치 모양(inline-flex·테두리)이 덮여 깨졌다.
      새 이름이 필요하면 sp- 를 붙인다.
   🔴 격자 칸은 minmax(0,1fr) + .card{min-width:0}. 그냥 1fr 이면 넓은 표(사업보고서 원문)가
      칸을 밀어 폰에서 화면이 가로로 넘친다(→ 폰 브라우저가 페이지를 통째로 축소해 PC 화면처럼 보인다).
══════════════════════════════════════════════════════════════════════════ */
.srch{position:relative;margin:14px 0 6px}
.srch input{width:100%;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
background:var(--card);color:var(--tx);outline:none}
.srch input:focus{border-color:var(--accent)}
.sug{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--card);border:1px solid var(--line);
border-radius:10px;margin-top:4px;max-height:320px;overflow:auto;display:none}
.sug div{padding:10px 14px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)}
.sug div:hover,.sug div.on{background:var(--card2)}
.sug small{color:var(--tx3);margin-left:6px}
.hint{font-size:12px;color:var(--tx3);margin:4px 2px 12px}
.grid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.card.wide{grid-column:1/-1}
.card h2{font-size:15px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.card h2 small{font-size:11px;font-weight:500;color:var(--tx3);margin-left:auto}
.easy{background:var(--card2);border-radius:10px;padding:9px 12px;font-size:14px;line-height:1.6;margin:6px 0 10px}
.easy b{color:var(--tx)}
.easy::before{content:'쉽게 말하면 · ';color:var(--accent);font-weight:700}
.muted{color:var(--tx3);font-size:12px}
.up{color:var(--up)} .dn{color:var(--dn)}
.hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hd .nm{font-size:22px;font-weight:800;letter-spacing:-.5px}
.hd .tk{font-size:12px;color:var(--tx3);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.hd .px{margin-left:auto;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.kv div{background:var(--card2);border-radius:10px;padding:8px 10px}
.kv .k{font-size:11px;color:var(--tx3)} .kv .v{font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.sp-seg{margin:10px 0 12px}
.sp-seg .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}
.sp-seg .name{font-weight:700}
.sp-seg .pc{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-seg .tr{display:block;height:8px;background:var(--card2);border-radius:4px;overflow:hidden;margin:5px 0 4px}
.sp-seg .fl{display:block;height:100%;background:var(--accent);border-radius:4px}
.sp-seg .ds{font-size:12px;color:var(--tx3);line-height:1.45}
.doc{font-size:13px;line-height:1.75;color:var(--tx2);padding:0 16px 16px;overflow-x:auto}
.doc h3{font-size:14px;color:var(--tx);margin:14px 0 6px}
.doc table{border-collapse:collapse;margin:8px 0;font-size:12px;min-width:100%}
.doc td,.doc th{border:1px solid var(--line);padding:4px 6px;vertical-align:top}
.doc th{background:var(--card2);color:var(--tx)}
.doc p{margin:6px 0}
.ln{font-size:14px;line-height:1.9}
.ln b{font-weight:800}
.th{border-top:1px solid var(--line);padding:9px 0}
.th:first-of-type{border-top:0}
.th .t{display:flex;gap:8px;align-items:baseline;font-size:14px;font-weight:700}
.th .t .r{margin-left:auto;font-size:12px;color:var(--tx3);font-weight:500}
.lead{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.lead a{font-size:12px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:3px 9px;color:var(--tx);text-decoration:none}
.lead a.me{border-color:var(--accent)}
.dsc{font-size:13px;border-top:1px solid var(--line);padding:7px 0;display:flex;gap:8px}
.dsc:first-of-type{border-top:0}
.dsc .d{color:var(--tx3);flex:0 0 44px;font-variant-numeric:tabular-nums}
.dsc a{color:var(--tx);text-decoration:none}
.bad{font-size:11px;font-weight:700;color:var(--err);border:1px solid var(--err);border-radius:4px;padding:0 5px;margin-left:4px;white-space:nowrap}
.qbars{display:flex;align-items:flex-end;gap:6px;height:90px;margin:10px 0 4px}
.qbars div{flex:1;text-align:center;font-size:10px;color:var(--tx3)}
.qbars i{display:block;border-radius:4px 4px 0 0;margin:0 auto 3px;width:70%}
table.q{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px;font-variant-numeric:tabular-nums}
table.q td,table.q th{border-bottom:1px solid var(--line);padding:5px 4px;text-align:right}
table.q th:first-child,table.q td:first-child{text-align:left}
.empty{color:var(--tx3);text-align:center;padding:40px 0;font-size:14px}
.gl{font-size:12px;color:var(--tx3);line-height:1.7}
.ck{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:700px){.ck{grid-template-columns:1fr 1fr}}
.ck h3{font-size:14px;margin-bottom:6px}
.ck .it{border-top:1px solid var(--line);padding:7px 0;font-size:14px;line-height:1.55}
.ck .it:first-of-type{border-top:0}
.ck .it .w{font-size:12px;color:var(--tx3)}
.ck .g h3{color:var(--up)} .ck .x h3{color:var(--anchor)}

/* ── 폰 (좁은 화면) ── */
.card h2{flex-wrap:wrap}
.dsc a,.th .t,.lead a{overflow-wrap:anywhere}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:480px){
  .card{padding:12px 13px;border-radius:12px}
  .hd .nm,.hd .px{font-size:19px}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  table.q{font-size:11.5px}
  table.q td,table.q th{padding:5px 3px}
  .doc{padding:0 12px 12px}
}
/* 🆕 09-30 저녁 — DART 공식 API 카드(자사주 흐름·배당·큰손·최대주주 변동) */
.sub{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;font-weight:700}
.flow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;font-size:13px;font-variant-numeric:tabular-nums}
.flow span{background:var(--card2);border-radius:8px;padding:4px 9px;white-space:nowrap}
.flow b{font-weight:800}
.hchg{font-size:13px;line-height:1.7;margin:4px 0 0 2px}
.hchg .d{color:var(--tx3);font-size:12px;margin-right:6px;font-variant-numeric:tabular-nums}
table.q td.who{max-width:0;width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 🆕 09-30 자사주 계획 대비 진행 막대 */
.pbar{height:8px;border-radius:5px;background:var(--card2);overflow:hidden;margin:6px 0 2px}
.pbar i{display:block;height:100%;background:var(--accent);border-radius:5px}
/* 🆕 09-30 공용 페이지 넘김(pager) — 카드 안 표·목록 10개씩. 모바일에서 누르기 쉽게 32px */
.pg{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums}
.pg button{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--card2);color:var(--tx);font:inherit;cursor:pointer}
.pg button:disabled{opacity:.35;cursor:default}