/* 고정 틀 1단계(2026-10-09, Claude). 지금 사이트의 마스트헤드·메뉴·옵션 탭을 Streamlit 없이 재현한다.
   치수는 운영 화면 실측(1440·744·390, docs/2026-10-09_고정틀_0단계_설계.md)과 dashboard-shell.css /
   options/newspaper.css 의 확정 값이다. 확정 디자인을 바꾸지 않는다 — 다르면 이쪽이 틀린 것이다. */
:root {
  --mm-bg: #0f1a14; --mm-ink: #d3d6cf; --mm-muted: #a4aa9f; --mm-hair: #2e3f35;
  --mm-accent: #e3a052; --mm-brand-red: #b12f49;
  --mm-font: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', sans-serif; /* 10/18 Noto Sans KR 폐기(로고는 그림) */
  --mm-font-ui: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', sans-serif; /* 10/18 글꼴 3종(B안) */
  --mm-font-nav: 'MM Nav', 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif; /* 2026-10-13 사용자: 메인 메뉴만 */
  --mm-gutter: 48px;
  color-scheme: dark;
}
:root[data-mm-theme='day'] {
  --mm-bg: #f2eee4; --mm-ink: #1c1b18; --mm-muted: #57524a; --mm-hair: #cfc7b7;
  --mm-accent: #b4531d;
  color-scheme: light;
}
@media (max-width: 1200px) { :root { --mm-gutter: 28px; } }
@media (max-width: 640px) { :root { --mm-gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--mm-bg); color: var(--mm-ink); }
/* 지금 사이트의 얇은 스크롤바(10px)와 같은 폭 — 콘텐츠 폭이 1334px 로 맞는다. */
html { scrollbar-width: thin; scrollbar-gutter: stable; }
body { font: 400 13px/1.5 var(--mm-font); -webkit-font-smoothing: antialiased; overflow-y: scroll; }
button { font: inherit; color: inherit; }

.mm-page { max-width: 1536px; margin: 0 auto; padding: 0 var(--mm-gutter) 24px; }

/* 로고: 가운데. 10/18 부터 그림(PNG, 낮·밤 두 장) — 옛 글자 56px(폰 32·26px) 로고를 그대로 찍은 것.
   --lf = 글자 56px 기준 배율. 그림은 막대 기울기·g 꼬리만큼 상자 밖으로 나가므로 여백으로 옛 자리에 맞춘다. */
.mm-masthead { padding-top: 56px; } /* 2026-10-18 사용자: 54 → 56(간격 단계 4·8·16·24·32·40·56) */
.mm-brand {
  appearance: none; display: flex; align-items: center; justify-content: center; gap: 22px;
  width: fit-content; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: 500 56px/1 var(--mm-font); letter-spacing: -.04em; color: var(--mm-ink); cursor: pointer;
}
.mm-brand:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 6px; }
.mm-brand { --lf: 1; display: block; height: calc(60px * var(--lf)); }
.mm-logo { display: block; width: auto; height: calc(64px * var(--lf));
  margin: calc(4px * var(--lf)) calc(1.67px * var(--lf)) calc(-8px * var(--lf)) calc(-6.25px * var(--lf)); }
:root[data-mm-theme='day'] .mm-logo-night, :root:not([data-mm-theme='day']) .mm-logo-day { display: none; }

/* 메뉴 줄: 위 가는 선 + 아래 이중선. 17px 은 짝수 원칙의 의도된 예외(10/7). */
.mm-nav {
  display: flex; align-items: center; gap: 32px; margin-top: 40px; padding: 8px 0; /* 2026-10-18 사용자: 30·36·6 → 32·40·8 */
  border-top: 1px solid var(--mm-ink); border-bottom: 3px double var(--mm-ink);
}
.mm-nav-item {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
  font: 500 17px/1.5 var(--mm-font-nav); color: var(--mm-muted);
}
.mm-nav-item[hidden], .mm-round[hidden] { display: none; }
.mm-nav-item:hover, .mm-nav-item[aria-current='page'] { color: var(--mm-ink); }
.mm-nav-item[aria-current='page'] { font-weight: 700; }
.mm-nav-item > span { padding-bottom: 3px; }
.mm-nav-item[aria-current='page'] > span { box-shadow: inset 0 -2px 0 var(--mm-accent); }
.mm-nav-item:focus-visible, .mm-tab:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }

/* 굵기가 바뀌어도 글자 폭이 흔들리지 않게 700 폭을 미리 잡는다(운영의 폭 예약과 같은 목적). */
:is(.mm-nav-item, .mm-tab) > span { display: inline-flex; flex-direction: column; align-items: flex-start; }
:is(.mm-nav-item, .mm-tab) > span::after {
  content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; user-select: none;
}

/* 오른쪽 끝 둥근 버튼 둘: 밤/낮, 카메라. 둘 사이 8px(폰 0px) — 메뉴 간격 32 에서 24px 당긴다(10/18, 옛 10px·20px). */
/* 카메라 버튼(#mm-options-screenshot-button)은 운영 screenshot_button.js 가 메뉴 끝에 만든다. 쉬는 동안은 아이콘만,
   저장 중에는 '이미지 생성…'·'복사됨 …' 글자가 붙어 넓어진다(data-mm-idle, shell.js 가 표시 — 운영 theme-toggle.js 역할). */
.mm-round, #mm-options-screenshot-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--mm-hair); border-radius: 22px; background: transparent; color: var(--mm-ink); cursor: pointer;
  font: 500 13px/1 var(--mm-font);
}
.mm-round { width: 44px; }
:is(.mm-round, #mm-options-screenshot-button):hover:not(:disabled) { border-color: var(--mm-muted); }
:is(.mm-round, #mm-options-screenshot-button):focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }
#mm-theme-toggle { margin-left: auto; overflow: hidden; }
#mm-options-screenshot-button { margin-left: -24px; } /* 둥근 버튼 사이 10 → 8(10/18) */
/* 게시판 연필(2026-10-14 사용자 결정, 개발 중): 밤/낮 · 연필 · 카메라 순서, 둥근 버튼끼리 같은 간격. 게시판에 있는 동안 accent 테두리. */
#mm-board-button { margin-left: -24px; }
#mm-board-button svg { width: 20px; height: 20px; }
#mm-board-button[aria-current='page'] { border-color: var(--mm-accent); color: var(--mm-accent); }
#mm-options-screenshot-button[data-mm-idle='true'] { width: 44px; font-size: 0; gap: 0; }
#mm-options-screenshot-button:not([data-mm-idle='true']) { padding: 0 16px 0 12px; }
@keyframes mm-header-icon-in { from { opacity: 0; } to { opacity: 1; } }
#mm-options-screenshot-button[data-mm-enter] { animation: mm-header-icon-in .32s ease-out both; }
#mm-options-screenshot-button::before {
  content: ''; flex: none; width: 20px; height: 20px; background: var(--mm-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mm-theme-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.mm-theme-icon svg { width: 22px; height: 22px; }
.mm-sun { opacity: 0; transform: rotate(-120deg) scale(.3); }
.mm-moon { opacity: 1; transform: none; }
:root[data-mm-theme='day'] .mm-sun { opacity: 1; transform: none; }
:root[data-mm-theme='day'] .mm-moon { opacity: 0; transform: rotate(120deg) scale(.3); }

/* 낮↔밤 전환: 지금 사이트와 같은 해 지기/뜨기 화면 전환. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-mm-sweep='down']::view-transition-old(root) { z-index: 2; box-shadow: 0 -28px 70px rgba(232,137,43,.38); animation: mm-sun-set 1.15s cubic-bezier(.6,0,.25,1) both; }
html[data-mm-sweep='down']::view-transition-new(root) { z-index: 1; }
html[data-mm-sweep='up']::view-transition-new(root) { z-index: 2; box-shadow: 0 -28px 70px rgba(232,137,43,.38); animation: mm-sun-rise 1.15s cubic-bezier(.6,0,.25,1) both; }
html[data-mm-sweep='up']::view-transition-old(root) { z-index: 1; }
@keyframes mm-sun-set { from { transform: translateY(0); } to { transform: translateY(calc(100% + 140px)); } }
@keyframes mm-sun-rise { from { transform: translateY(calc(100% + 140px)); } to { transform: translateY(0); } }

/* 옵션 하위 탭: 14px, 선택 700, 글자 2px 아래 이동 밑줄(460ms). */
.mm-tabs {
  position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 22px;
  margin-top: 0; padding: 11.5px 0 18px 8px; /* 10/18: 메뉴선 → 'GEX' 글자 24px(옛 16+16 → 44.5px) */
}
.mm-tab {
  height: 32px; padding: 12.5px 0 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  font: 500 14px/normal var(--mm-font-ui); color: var(--mm-muted); white-space: nowrap; transition: color 180ms ease;
}
.mm-tab:hover, .mm-tab[aria-selected='true'] { color: var(--mm-ink); }
.mm-tab[aria-selected='true'] { font-weight: 700; }
@keyframes mm-options-fixed-in { from { opacity: 0; } to { opacity: 1; } }
.mm-tabs[data-mm-enter] { animation: mm-options-fixed-in 240ms ease-out both; }
.mm-tabs::after {
  content: ''; position: absolute; inset: 0 auto auto 0; width: var(--light-width, 0px); height: 2px;
  transform: translate3d(var(--light-x, 0px), var(--light-y, 0px), 0); background: var(--mm-accent);
  pointer-events: none; opacity: 0;
}
.mm-tabs[data-light-ready]::after { opacity: 1; }
.mm-tabs:not([data-light-snap])::after { transition: transform 460ms cubic-bezier(.22,1,.36,1), width 460ms cubic-bezier(.22,1,.36,1); }

/* 화면 iframe: 높이는 화면이 알려 준다(setFrameHeight).
   10/18 사용자 "업계 관례만큼": 메뉴선 → 각 화면 첫 글자 줄 24px(PC, 8pt 단계 · 구역 사이 40 보다 가깝게).
   네 탭 첫 글자가 44.5px 로 맞춰져 있던 것을 그대로 20.5px 끌어올렸다 — 옛 값 브리핑 38·종목 24.5·옵션 탭 줄 16+16.
   아래 값이 단계 밖인 것은 화면 안쪽 여백(브리핑 main 10−버튼 9, 종목 버튼 안쪽)을 빼고 글자를 24에 맞춘 결과. 폰은 m2 블록이 덮는다. */
.mm-screen { display: block; width: 100%; height: 0; border: 0; background: transparent; }
.mm-view[data-view='briefing'] { margin-top: 17.5px; }
/* 종목: 메뉴 아래 4px(옛 24.5) — Cutler/Wilder 글자는 옵션 탭 글자 높이에 맞춘다(rsi-host.css 의 7.5px 당김 포함). */
.mm-view[data-view='symbols'] { margin-top: 4px; }
/* 옵션 GEX·경보·거래대금: 탭 줄 아래 6px(운영 실측). */
.mm-tab-panel { margin-top: 6px; }
/* 작은 알림(GEX 새로고침 시작 등). 운영 st.toast 자리 — 오른쪽 아래. */
#mm-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 10; max-width: min(360px, calc(100vw - 32px));
  padding: 10px 14px; border: 1px solid var(--mm-hair); background: var(--mm-bg); color: var(--mm-ink);
  font: 500 14px/1.5 var(--mm-font); opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#mm-toast[data-show] { opacity: 1; transform: none; }
.mm-placeholder { margin: 40px 0 0; color: var(--mm-muted); font-size: 12px; }

@media (max-width: 640px) {
  .mm-masthead { padding-top: 42px; }
  .mm-brand { --lf: .5714; } /* 옛 글자 32px */
  .mm-nav { gap: 20px; margin-top: 30px; padding: 6px 0; } /* 폰은 10/18 PC 정석 값 변경 전 그대로(폰 정리는 ?m2=1 시안) */
  #mm-options-screenshot-button, #mm-board-button { margin-left: -20px; }
  /* 2026-10-18 휴대폰 가독성 시안(?m2=1, index.html): 머리가 아이폰 첫 화면의 1/3(약 220px)을 써서 줄인다. */
  :root[data-mm-m2] .mm-masthead { padding-top: 8px; }
  :root[data-mm-m2] .mm-brand { --lf: .4643; } /* 옛 글자 26px */
  :root[data-mm-m2] .mm-nav { margin-top: 8px; padding: 4px 0; }
  :root[data-mm-m2] .mm-view[data-view='briefing'] { margin-top: 6px; }
  :root[data-mm-m2] .mm-view[data-view='symbols'] { margin-top: 8px; }
  :root[data-mm-m2] .mm-tabs { margin-top: 0; padding-top: 4px; padding-bottom: 4px; }
  :root[data-mm-m2] .mm-tab-panel { margin-top: 8px; } /* 옵션 탭 줄 → 화면 6→8(10/18 간격 단계) */
}
/* 2026-10-18 시안(?gexrot=1): 세로 휴대폰에서 옵션 → GEX 만 90도 돌린다. 폰을 왼쪽으로 돌리면 똑바로 보인다.
   위 로고·메뉴·옵션 탭은 그대로. 돌린 GEX 의 가로 길이 = 메뉴 아래 남은 높이(--gexrot-len, shell.js 가 잰다),
   세로 = 화면 폭. GEX 는 이 안에 스크롤 없이 들어가게 차트를 줄인다(board.js rotated()). 회전 잠금을 푼 폰은
   돌리는 순간 가로 화면이 되어 이 규칙이 꺼진다. */
@media (max-width: 640px) and (orientation: portrait) {
  :root[data-mm-gexrot][data-mm-category='options'] .mm-tab-panel[data-panel='gex'] {
    position: relative; height: var(--gexrot-len, 640px); overflow: hidden;
  }
  :root[data-mm-gexrot][data-mm-category='options'] .mm-tab-panel[data-panel='gex'] .mm-screen {
    position: absolute; top: 0; left: 0; width: var(--gexrot-len, 640px); height: calc(100vw - 2 * var(--mm-gutter)) !important;
    transform-origin: 0 0; transform: translateX(calc(100vw - 2 * var(--mm-gutter))) rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-theme-icon, .mm-tabs::after, .mm-tab { transition: none !important; }
}