/* 폰 공통 남색 머리 키트 (2026-09-27) — 메인(/) E4 머리를 다른 공개 페이지에 씌운다. 짝 파일 mhead.js.
   모든 규칙은 html.mh-on + (max-width:768px) 아래에서만 작동한다(mh-on 은 mhead.js 가 켤 때만 붙는다).
   색: 남색 #1F2B52(다크 #1B2440) · 호박색 #F2A93B. 파랑은 하락 전용이라 여기선 안 쓴다. */
@media (max-width:768px){

/* ── 공통 토큰·초기화 (페이지 CSS 가 header/nav/a/button 에 건 규칙이 새지 않게 div + 명시값) ── */
html.mh-on .mhk-top,html.mh-on .mhk-menu{
  --mhk-nv:#1F2B52;--mhk-dim:rgba(255,255,255,.76);--mhk-glass:rgba(255,255,255,.12);--mhk-glass2:rgba(255,255,255,.22);--mhk-mark:#F2A93B;
  display:block!important;box-sizing:border-box;width:auto;max-width:none;min-width:0;height:auto;
  margin:0 calc(-1 * var(--mhk-br,0px)) 0 calc(-1 * var(--mhk-bl,0px));padding:0;border:0;border-radius:0;box-shadow:none;
  background:var(--mhk-nv);color:#fff;float:none;transform:none;filter:none;opacity:1;
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  font-size:16px;font-weight:500;font-style:normal;line-height:1.3;letter-spacing:normal;text-align:left;text-transform:none;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.mh-on[data-theme="dark"] .mhk-top,html.mh-on[data-theme="dark"] .mhk-menu,
html.mh-on.dark .mhk-top,html.mh-on.dark .mhk-menu,
html.mh-on body.t-dark .mhk-top,html.mh-on body.t-dark .mhk-menu,
html.mh-on body.t-pc .mhk-top,html.mh-on body.t-pc .mhk-menu{--mhk-nv:#1B2440}
html.mh-on .mhk-top *,html.mh-on .mhk-menu *{box-sizing:border-box}
html.mh-on .mhk-top a,html.mh-on .mhk-menu a{text-decoration:none;-webkit-tap-highlight-color:transparent}

/* ── 머리 한 줄(56px) — 메인처럼 이 줄만 위에 붙어 따라온다 ── */
html.mh-on .mhk-top{position:sticky!important;top:0;z-index:150;margin-top:calc(-1 * var(--mhk-bt,0px))}
html.mh-on .mhk-in{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;margin:0;max-width:none}
html.mh-on .mhk-brand{display:inline-flex;align-items:center;flex:none;line-height:0;padding:0;margin:0;background:none;border:0}
html.mh-on .mhk-brand img{display:none;width:auto;max-width:none;border:0;margin:0;padding:0;background:none}
html.mh-on .mhk-brand .mhk-lk{display:block;height:17px}
html.mh-on .mhk-mkt{display:flex;flex:none;align-items:center;background:var(--mhk-glass);padding:3px;margin:0;border-radius:999px;gap:2px}
html.mh-on .mhk-mkt a{display:block;color:var(--mhk-dim);background:transparent;font-size:14.5px;font-weight:600;line-height:1.2;
  padding:8px 12px;margin:0;border-radius:999px;white-space:nowrap;letter-spacing:-.01em}
html.mh-on .mhk-mkt a.on{background:#fff;color:#1B2440;font-weight:800}
html.mh-on .mhk-r{margin:0 0 0 auto;display:flex;align-items:center;gap:6px;flex:none}
html.mh-on .mhk-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;margin:0;padding:0;
  border:0;border-radius:999px;background:var(--mhk-glass);color:#fff;font-family:inherit;font-size:16px;font-weight:700;line-height:1;
  cursor:pointer;box-shadow:none;min-width:0;min-height:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
html.mh-on .mhk-btn:active{background:var(--mhk-glass2)}
html.mh-on .mhk-btn svg{display:block;width:17px;height:17px;fill:currentColor}

/* ── 주 메뉴 한 줄 — 흰 글자 탭, 현재 칸 호박색 밑줄 ── */
html.mh-on .mhk-menu{position:relative!important;z-index:1}
html.mh-on .mhk-mi{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:2px;margin:0;padding:0 46px;
  scroll-padding:0 64px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;background:transparent}
html.mh-on .mhk-mi::-webkit-scrollbar{display:none}
html.mh-on .mhk-mi a{flex:none;position:relative;display:flex;align-items:center;height:46px;padding:0 11px;margin:0;border-radius:0;
  font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--mhk-dim);background:transparent;white-space:nowrap;box-shadow:none;border:0}
html.mh-on .mhk-mi a.on{color:#fff;font-weight:800}
html.mh-on .mhk-mi a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:3px;border-radius:3px;background:var(--mhk-mark)}
html.mh-on .mhk-mi a:active{color:#fff}

/* ── ← → 짝 (주 메뉴 + 바꿔 단 페이지 탭 줄 공통) ── */
html.mh-on .mhk-host{position:relative}
html.mh-on .mhk-arr{position:absolute;top:0;bottom:0;z-index:4;width:64px;height:auto;min-height:0;border:0;border-radius:0;padding:0;margin:0;
  cursor:pointer;display:flex;align-items:center;font:inherit;background:transparent;box-shadow:none;-webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;transition:opacity .18s ease}
html.mh-on .mhk-arr.l{left:0;justify-content:flex-start;padding-left:6px}
html.mh-on .mhk-arr.r{right:0;justify-content:flex-end;padding-right:6px}
html.mh-on .mhk-arr i{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-style:normal;
  background:var(--mhk-mark,#F2A93B);color:#1B2440;box-shadow:0 2px 6px rgba(27,36,64,.22)}
html.mh-on .mhk-arr svg{width:16px;height:16px;display:block}
html.mh-on .mhk-arr:active i{transform:scale(.92)}
/* 줄 끝이면 버튼은 흐리게 남기고(← → 짝이 늘 보이게) 밑의 흐림은 걷는다 */
html.mh-on .mhk-arr.dim{pointer-events:none;background:transparent!important}
html.mh-on .mhk-arr.dim i{background:rgba(128,134,148,.16);color:rgba(128,134,148,.75);box-shadow:none}
html.mh-on .mhk-menu .mhk-arr.dim i{background:rgba(255,255,255,.12);color:rgba(255,255,255,.45)}
html.mh-on .mhk-menu .mhk-arr.l{background:linear-gradient(90deg,var(--mhk-nv) 40px,color-mix(in srgb,var(--mhk-nv) 0%,transparent) 64px)}
html.mh-on .mhk-menu .mhk-arr.r{background:linear-gradient(270deg,var(--mhk-nv) 40px,color-mix(in srgb,var(--mhk-nv) 0%,transparent) 64px)}

/* ── 페이지 탭 줄(미장 메뉴·매크로 목차·부동산 목차) — 여러 줄이면 한 줄로 쓸기 ── */
html.mh-on .mhk-row{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
  align-items:center;padding-left:46px!important;padding-right:46px!important;scroll-padding:0 64px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:none!important}
html.mh-on .mhk-row::-webkit-scrollbar{display:none}
html.mh-on .mhk-row>a{flex:none!important;white-space:nowrap;display:inline-flex!important;align-items:center;min-height:40px;font-size:14px!important}
html.mh-on .mhk-host>.mhk-arr.l,html.mh-on .mhk-wrap>.mhk-arr.l,html.mh-on .mhk-st>.mhk-arr.l,html.mh-on nav>.mhk-arr.l{
  background:linear-gradient(90deg,var(--mhk-rowbg,#fff) 40px,color-mix(in srgb,var(--mhk-rowbg,#fff) 0%,transparent) 64px)}
html.mh-on .mhk-host>.mhk-arr.r,html.mh-on .mhk-wrap>.mhk-arr.r,html.mh-on .mhk-st>.mhk-arr.r,html.mh-on nav>.mhk-arr.r{
  background:linear-gradient(270deg,var(--mhk-rowbg,#fff) 40px,color-mix(in srgb,var(--mhk-rowbg,#fff) 0%,transparent) 64px)}
html.mh-on .mhk-menu>.mhk-arr.l{background:linear-gradient(90deg,var(--mhk-nv) 40px,color-mix(in srgb,var(--mhk-nv) 0%,transparent) 64px)}
html.mh-on .mhk-menu>.mhk-arr.r{background:linear-gradient(270deg,var(--mhk-nv) 40px,color-mix(in srgb,var(--mhk-nv) 0%,transparent) 64px)}
html.mh-on .mhk-arr.dim{background:transparent!important}
html.mh-on .mhk-wrap{position:relative;margin-left:var(--mhk-ml,0px);margin-right:var(--mhk-mr,0px)}
html.mh-on .mhk-wrap{padding-top:12px}
html.mh-on .mhk-wrap>nav.jmp{margin-top:0!important}
html.mh-on .mhk-wrap>.mhk-arr{top:12px}

/* ── 옛 전역 머리 숨김 + 남은 페이지 고정 줄은 남색 머리 밑으로 ── */
html.mh-on .mhk-hide{display:none!important}
html.mh-on .mhk-st{top:var(--mhk-st,56px)!important}
/* html,body{overflow-x:hidden} 인 페이지는 body 가 스크롤 틀이 돼 sticky 가 전부 안 붙는다(미장·시황·뉴스·워치·IPO·종목, 원래 페이지 고정 줄도 같은 증상).
   가로 넘침은 똑같이 막는 clip 으로 바꿔 머리와 페이지 고정 줄이 붙게 한다 — clip 모르는 옛 브라우저는 원래대로 */
@supports (overflow:clip){
  html.mh-on.mhk-clip,html.mh-on.mhk-clip body{overflow-x:clip!important;overflow-y:visible!important}
  html.mh-on.mhk-clip .mhk-unstick{position:relative!important;top:auto!important}
}

/* 화면 전체가 fixed 판인 페이지 — 히트맵 */
html.mh-on.mhk-fx-heat body>.top-bar{top:var(--mhk-h,102px)!important}
html.mh-on.mhk-fx-heat #treemap-container{top:calc(var(--mhk-tb,104px) + var(--mhk-h,102px))!important}
/* 라이브 */
html.mh-on.mhk-fx-live body>.pnl{top:calc(96px + var(--mhk-h,102px))!important}
html.mh-on.mhk-fx-live body.compact>.pnl{top:calc(40px + var(--mhk-h,102px))!important}
html.mh-on.mhk-fx-live body>.tmenu{top:calc(54px + var(--mhk-h,102px))!important}

@media (max-width:420px){
  html.mh-on .mhk-brand .mhk-lk{display:none}
  html.mh-on .mhk-brand .mhk-sy{display:block;height:30px}
}
@media (max-width:370px){
  html.mh-on .mhk-in{padding:0 12px;gap:8px}
  html.mh-on .mhk-mkt a{padding:8px 9px;font-size:14px}
  html.mh-on .mhk-btn{width:36px;height:36px}
  html.mh-on .mhk-mi a{padding:0 9px;font-size:15.5px}
  html.mh-on .mhk-mi a.on::after{left:9px;right:9px}
}
@media (prefers-reduced-motion:reduce){
  html.mh-on .mhk-arr{transition:none}
}
}

/* ── F3 아이콘 탭 (2026-10-02 사장님 "ㅇㅇ" — 메인과 같은 모양) ───────────────
   주 메뉴 줄만 한 톤 밝은 남색 띠 + 위아래 가는 선, 칸마다 선 아이콘 위·글자 아래, 지금 칸 호박색.
   메뉴 줄 46px → 64px 이라 고정 배치 페이지(히트맵·라이브)의 머리 높이 --mhk-h 도 102 → 120.
   되돌리기 = 이 구획 + mhead.js 의 ICON 구획 삭제 */
@media (max-width:768px){
html.mh-on{--mhk-h:120px}
html.mh-on .mhk-menu{--mhk-nvh:#2A3A6B;background:var(--mhk-nvh);border-top:1px solid rgba(255,255,255,.10)!important;border-bottom:1px solid rgba(255,255,255,.10)!important}
html.mh-on[data-theme="dark"] .mhk-menu,html.mh-on.dark .mhk-menu,html.mh-on body.t-dark .mhk-menu,html.mh-on body.t-pc .mhk-menu{--mhk-nvh:#26345E}
html.mh-on .mhk-mi a{flex-direction:column;justify-content:center;gap:3px;height:62px;min-width:60px;padding:0 8px;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.80)}
html.mh-on .mhk-mi a .mhk-ic{display:block;width:22px;height:22px;line-height:0;font-style:normal;margin:0;padding:0;background:none}
html.mh-on .mhk-mi a .mhk-ic svg{display:block;width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.mh-on .mhk-mi a.on{color:var(--mhk-mark)}
html.mh-on .mhk-mi a.on::after{display:none}
html.mh-on .mhk-menu>.mhk-arr.l,html.mh-on .mhk-menu .mhk-arr.l{background:linear-gradient(90deg,var(--mhk-nvh) 40px,color-mix(in srgb,var(--mhk-nvh) 0%,transparent) 64px)}
html.mh-on .mhk-menu>.mhk-arr.r,html.mh-on .mhk-menu .mhk-arr.r{background:linear-gradient(270deg,var(--mhk-nvh) 40px,color-mix(in srgb,var(--mhk-nvh) 0%,transparent) 64px)}
}

/* ── #582 칸 구분 B안 (2026-10-05 사장님 "메뉴칸의 구분") ─────────────────
   칸마다 연한 둥근 타일 + 6px 틈, 지금 칸은 호박색으로 채움. 줄 높이 62px 그대로(타일 54 + 위아래 4) → --mhk-h 120 유지.
   되돌리기 = 이 구획 삭제 */
@media (max-width:768px){
html.mh-on .mhk-mi{gap:6px;padding-top:4px;padding-bottom:4px}
html.mh-on .mhk-mi a{height:54px;min-width:64px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
html.mh-on .mhk-mi a.on{background:var(--mhk-mark);color:#1B2440;box-shadow:none}
}