/* ---------- 색 ----------
   어두운 모드가 기본. theme.js가 <html data-theme="light">를 붙이면 아래 밝은 모드 값으로 바뀐다
   새 색은 여기에 이름을 지어 두 모드 값을 함께 넣는다 (화면 코드에 색을 직접 쓰지 않기) */
:root {
  color-scheme: dark;
  --bg: #0b0e13;
  --card: #141821;
  --line: #232a36;
  --row-line: #1e2430;    /* 표 줄 사이 */
  --surface: #1a1f2a;     /* 카드 안쪽 칸(지수 타일·비교 칸·정보 칸) 바탕: 카드보다 한 단계 밝게 */
  --surface-line: #232a37;
  --seg-bg: #0f1218;      /* 기간·모드 버튼 묶음 바탕과 고른 버튼 */
  --seg-on: #2a3141;
  --card-shadow: none;
  --ghost-hover: rgba(255, 255, 255, .06); /* 테두리 없는 버튼에 마우스를 올렸을 때 */
  --raise: #1f2430;       /* 알림 띠·툴팁처럼 카드 위에 뜨는 것 */
  --hover: rgba(255, 255, 255, .03);
  --text: #e6e9ef;
  --muted: #8a93a6;
  --accent: #5ee7ff;      /* 강조(하늘색): 선택된 탭·버튼·링크 */
  --accent-rgb: 94, 231, 255;
  --on-accent: #0e1117;   /* 강조색 바탕 위 글자 */
  --brand: linear-gradient(90deg, #5ee7ff, #8b7bff 60%, #ff6ad5);
  --shadow: rgba(0, 0, 0, .5);
  --backdrop: rgba(0, 0, 0, .55);
  --scroll: #343b4b;
  --star: #f0c94a;
  --cc-us: #8fb6ff; --cc-us-line: #34507e;
  --cc-kr: #ff9a9a; --cc-kr-line: #7e3434;
  /* 히트맵: 종목 칸 색은 heatmap.js PALETTE가 모드별로 정한다 (밝은 모드는 0% 회색이 밝음). 여기는 틈·머리글 색 */
  --map-gap: #000;
  --map-focus: #fff;      /* 히트맵 칸에 마우스·초점이 갔을 때 테두리 */
  --map-mkt: #5ee7ff; --map-mkt-bg: #0b1a22;
  --map-sec: #fff; --map-sec-bg: #000;
  --extreme-fear: #d64545;
  --fear: #f08a3c;
  --neutral: #c9b84a;
  --greed: #7cc35a;
  --extreme-greed: #2fa36b;
  --up: #f0554f;   /* 상승: 빨강 (국내 관례) */
  --down: #4f8ff0; /* 하락: 파랑 */
  --up-rgb: 240, 85, 79;    /* --up과 같은 색 (반투명 바탕용) */
  --fear-rgb: 240, 138, 60; /* --fear와 같은 색 */
  --on-up: #fff;            /* 상승색 바탕 위 글자 (알림 개수) */
  --gap: 10px;
  /* 왼쪽·오른쪽 안전 여백 (휴대폰 가로 모드의 아일랜드·노치 자리). env() 대신 이 둘을 쓴다:
     아이폰은 아일랜드가 한쪽에만 있어도 양쪽에 같은 폭을 알려 주므로, theme.js가 돌린 방향을 보고
     html.island-left/right를 붙이면 반대쪽은 0 (PLAY와 같은 방식, 2026-11-10) */
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}
html.island-left { --sa-r: 0px; }
html.island-right { --sa-l: 0px; }
/* 밝은 모드: 흰 바탕에서 글자 대비 4.5:1 이상이 되도록 강조·상승·하락·공포탐욕 색을 한 단계 진하게 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f7;
  --card: #ffffff;
  --line: #e3e7ee;
  --row-line: #eef1f5;
  --surface: #f8f9fb;
  --surface-line: #e9ecf1;
  --seg-bg: #eef1f5;
  --seg-on: #ffffff;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .04);
  --ghost-hover: rgba(15, 25, 45, .06);
  --raise: #ffffff;
  --hover: rgba(15, 25, 45, .04);
  --text: #1a1f2b;
  --muted: #5d6676;
  --accent: #0a7c99;
  --accent-rgb: 10, 124, 153;
  --on-accent: #ffffff;
  --brand: linear-gradient(90deg, #0a8fb0, #5b4ae0 60%, #c9309a);
  --shadow: rgba(20, 30, 50, .16);
  --backdrop: rgba(15, 20, 30, .35);
  --scroll: #c9ced8;
  --star: #b8860b;
  --cc-us: #2457b8; --cc-us-line: #a9bfe8;
  --cc-kr: #c0392b; --cc-kr-line: #ebb0aa;
  --map-gap: #fff;
  --map-focus: #1a1f2b;
  --map-mkt: #0a7c99; --map-mkt-bg: #e2f3f7;
  --map-sec: #1a1f2b; --map-sec-bg: #fff;
  --extreme-fear: #c62f2f;
  --fear: #c8641a;
  --neutral: #9a8714;
  --greed: #4a9128;
  --extreme-greed: #1c7f52;
  --up: #d42a24;
  --down: #1d63cc;
  --up-rgb: 212, 42, 36;
  --fear-rgb: 200, 100, 26;
  --on-up: #fff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
:where(button, a, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* 누르는 것은 두 번 눌러도 화면이 커지지 않게 (공통 규칙 /srv/infra/shared/UX.md '7. 터치') */
:where(button, a, label, summary, [role="tab"], .ix[data-sym], .stk, .wl-row, .wl-results li, .card-foot[data-long]) { touch-action: manipulation; }

/* ---------- 상단 바 ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .06), transparent 40%), var(--card);
}
.topbar h1 { margin: 0; font-size: 15px; font-weight: 600; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-name {
  font-size: 15px; font-weight: 800; letter-spacing: .08em; white-space: nowrap;
  background: var(--brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-live {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .15em; color: var(--accent); white-space: nowrap;
  border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 3px; padding: 1px 6px;
  font-family: Consolas, 'Cascadia Mono', monospace;
}
.brand-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
/* 장 마감: 깜빡이지 않는 회색 / 지연: 주황 */
.brand-live.closed { color: var(--muted); border-color: var(--line); letter-spacing: .05em; font-family: inherit; }
.brand-live.closed i { background: var(--muted); box-shadow: none; animation: none; }
.brand-live.stale { color: var(--fear); border-color: rgba(var(--fear-rgb), .5); letter-spacing: .05em; font-family: inherit; }
.brand-live.stale i { background: var(--fear); box-shadow: none; }
/* 프리·애프터마켓: 깜빡임은 그대로, 한글('애프터'·'미국 프리')이 띄엄띄엄 보이지 않게 자간·글꼴은 '장 마감'과 같게 */
.brand-live.nxt { letter-spacing: .05em; font-family: inherit; }
@keyframes pulse { 50% { opacity: .25; } }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.fs-btn { background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px; font: inherit; font-size: 11px; cursor: pointer; }
@media (hover: hover) { .fs-btn:hover { color: var(--text); } }
.fs-btn.fs-pending { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
.topbar .fs-btn { background: transparent; border-color: transparent; border-radius: 6px; padding: 3px 8px; font-size: 12px; }
@media (hover: hover) { .topbar .fs-btn:hover { background: var(--ghost-hover); color: var(--text); } }
.topbar .fs-btn.fs-pending { border-color: rgba(var(--accent-rgb), .5); }
.topbar .fs-btn.admin-warn { border-color: var(--up); }
.topbar .fs-btn.admin-pending { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); text-decoration: none; } /* 가입 승인 대기 */
/* 계정 묶음(⚠ 장애 · 가입 승인 N · 👤)은 한 줄로: 글자가 두 줄로 깨져 위로 잘리지 않게 (휴대폰은 '승인 N'·'⚠'만) */
.topbar #acct-wrap:not([hidden]) { display: flex; align-items: center; gap: 4px; flex: none; }
.topbar .fs-btn { white-space: nowrap; }
.topbar .fs-btn[aria-expanded="true"], .topbar .alert-wrap:has(> .alert-pop:not([hidden])) > .fs-btn { background: var(--ghost-hover); color: var(--text); }
.clock { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; } /* 자리가 모자라도 시각이 여러 줄로 눌리지 않게 */

/* ---------- 레이아웃 ----------
   기준 화면: 1920x1080 모니터 125% 배율 = 브라우저 약 1536x730 (F11 전체화면이면 1536x864)
   넓은 화면(1200x640 이상): 한 화면에 꽉 차게 고정 배치
   그보다 작으면 위아래로 쌓고 스크롤 (태블릿 2단, 휴대폰 1단) */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--gap);
}
.dash > * { min-width: 0; } /* 줄바꿈 없는 안내 문구가 화면 폭을 밀어내지 않도록 */
.area-side { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }

/* 휴대폰 브라우저는 스크롤하면 주소창·도구막대를 숨겼다 보여 vh가 바뀐다 -> 히트맵 배치가 다시 계산돼 칸이 움직임.
   도구막대와 상관없이 일정한 svh(가장 작은 화면 높이)를 쓰고, 모르는 브라우저는 vh */
.map { height: clamp(420px, 62vh, 760px); height: clamp(420px, 62svh, 760px); }

/* 화면 틀: 위 바는 그대로, 아래 내용(.dash)만 스크롤 (2026-11-04, golf와 같은 방식).
   페이지 전체가 스크롤되면 아이폰이 주소창을 접은 뒤 고정 요소 자리를 잘못 계산해, 아래에서 올라오는 상세 팝업이
   화면 중간에 떠 보였다. 페이지는 스크롤되지 않으니 주소창이 접히지 않고 화면 높이가 일정하다.
   페이지 전체는 끝에서 튕기지 않게 (위 바를 끌어도 틀이 밀리지 않게).
   모든 서비스가 같은 틀을 쓴다: /srv/infra/shared/UX.md '1. 화면 틀' */
html, body { overscroll-behavior: none; }
body.dash-page { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.dash-page .topbar { flex: none; }
.dash-page .dash { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; align-content: start; }
.history { height: 260px; }

@media (min-width: 1200px) and (min-height: 640px) {
  /* 대시보드만 한 화면에 고정 (관리자·로그인 화면은 보통처럼 스크롤) */
  .dash-page .dash { overflow: visible; } /* 여기서는 오른쪽 칸(.area-side)이 스크롤 */
  .dash {
    grid-template-columns: minmax(0, 1fr) clamp(420px, 30vw, 560px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "ix ix" "map side";
  }
  .area-ix { grid-area: ix; }
  .area-map { grid-area: map; }
  .area-side { grid-area: side; overflow-y: auto; }
  #tab-card { min-height: 260px; }

  .flex-card { display: flex; flex-direction: column; min-height: 0; }
  .grow { flex: 1; min-height: 0; }
  .dash .ix-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .map { height: 100%; }
  .history { height: 100%; }
}

/* ---------- 카드 공통 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  border-radius: 8px;
  padding: 10px 12px;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card h2 { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.src { color: var(--muted); font-size: 11px; text-decoration: none; }
@media (hover: hover) { .src:hover { color: var(--text); } }
.card-foot { margin-top: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot.warn { color: var(--fear); white-space: normal; }
.card-foot.open { white-space: pre-line; }
#ix-foot { min-height: 1lh; } /* 설명 한 줄 자리를 미리: 글자가 들어와도 아래 카드가 밀리지 않게 */
@media (hover: none) { .card-foot[data-long]:not(.warn) { cursor: pointer; } .card-foot[data-long]:not(.warn):not(.open)::after { content: ' ⓘ'; } }

/* 기간·시장 모드 버튼: 한 묶음 바탕 위에서 고른 버튼만 떠 보이게 (주요 지수·히트맵·추이·상세 창이 같은 모양) */
.ranges { display: flex; gap: 2px; flex: none; padding: 2px; background: var(--seg-bg); border: 1px solid var(--line); border-radius: 7px; }
.ranges button {
  background: transparent; color: var(--muted); border: 0; white-space: nowrap;
  border-radius: 5px; padding: 2px 9px; font: inherit; font-size: 11px; line-height: 16px; cursor: pointer;
}
@media (hover: hover) { .ranges button:hover { color: var(--text); } }
.ranges button.on { color: var(--text); background: var(--seg-on); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

.tip {
  position: absolute; top: 4px; pointer-events: none; white-space: nowrap;
  background: var(--raise); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 16px var(--shadow);
  padding: 4px 8px; font-size: 12px; font-variant-numeric: tabular-nums;
}

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
.c-extreme-fear { color: var(--extreme-fear); }
.c-fear { color: var(--fear); }
.c-neutral { color: var(--neutral); }
.c-greed { color: var(--greed); }
.c-extreme-greed { color: var(--extreme-greed); }

/* ---------- 주요 지수 ---------- */
/* 타일 높이 맞추기: 줄마다 같은 높이(1fr)로 늘리고, 타일 안에서는 그래프가 남는 높이를 채운다.
   그래서 수급 줄이 있는 타일(코스피·코스닥)은 그만큼 그래프가 낮아지고, 다른 타일과 높이를 손으로 맞출 필요가 없다 */
.ix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin-top: 8px; }
.ix { background: var(--surface); border: 1px solid var(--surface-line); border-radius: 6px; padding: 6px 10px; min-width: 0; display: flex; flex-direction: column; }
/* 빈 자리 타일 (데이터 오기 전): 진짜 타일과 같은 구조로 높이를 맞추고, 글자 자리는 옅은 막대로 */
.ix.skel { pointer-events: none; }
.ix.skel .ix-name, .ix.skel .ix-price, .ix.skel .ix-chg { color: transparent; background: var(--surface-line); border-radius: 3px; }
.ix.skel .ix-name { width: 45%; }
.ix.skel .ix-price { width: 55%; }
.ix.skel .ix-chg { width: 18%; }
.ix-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ix-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-state { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ix-state.open { color: var(--greed); }
.ix-line { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 2px; }
.ix-grid2 { margin-top: 6px; }
.ix-price small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 1px; }
.ix-price { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ix-chg { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ix-spark { width: 100%; flex: 1 0 30px; min-height: 0; display: block; margin-top: 3px; }
/* 등락 기준(전일 종가·정산가) 점선: 배경에 묻히지 않을 만큼만 밝게 */
/* 픽셀 경계에 맞춰 그려 지표마다 굵기가 같게 (--hair = 화면 픽셀 정수 배의 선 굵기, common.js) */
.ix-spark .base { stroke: var(--muted); stroke-opacity: .55; stroke-width: var(--hair, 1px); stroke-dasharray: 3 3; shape-rendering: crispEdges; }
.ix-spark path { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ix-err { font-size: 11px; color: var(--fear); margin-top: 6px; }
.ix-more { display: none; width: 100%; margin-top: 8px; padding: 8px; background: var(--surface); color: var(--muted); border: 1px solid var(--surface-line); border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; }

/* 주요 지수 크게 보기 팝업 */
.ix[data-sym] { cursor: pointer; transition: border-color .15s; }
.ix[data-sym]:focus-visible { border-color: var(--muted); outline: none; }
@media (hover: hover) { .ix[data-sym]:hover { border-color: var(--muted); outline: none; } }
/* 팝업이 열린 동안 뒤 화면이 스크롤되지 않게. 스크롤되는 것은 내용 칸뿐이라 거기만 막는다
   (html·body에 걸면 아이폰에서 고정 요소 자리가 어긋났다: golf 2026-11-02) */
body:has(.ix-dlg[open]) .dash { overflow: hidden; }
/* 터치 기기: 어떤 창(상세·내 계정·확인)이든 작은 메뉴(알림·화면 모드)든 열려 있으면 뒤의 스크롤 칸을 모두 잠근다 (UX.md '3. 닫는 방법').
   넓은 화면·가로 모드에서는 스크롤 칸이 오른쪽 칸(.area-side)·지수 칸(#ix-card)이라 그것도 함께 */
@media (pointer: coarse) {
  body:has(dialog[open], .alert-pop:not([hidden])) :is(.dash, .area-side, #ix-card) { overflow: hidden; }
}
/* 팝업·메뉴·목록 안을 끝까지 스크롤해도 남은 스크롤이 뒤 화면으로 넘어가지 않게 */
.ix-dlg, .alert-pop, .wl-results, .wl-scroll, .cal-scroll, .area-side { overscroll-behavior: contain; }
.ix-dlg {
  width: min(760px, 94vw); max-height: 92vh; max-height: 92dvh; padding: 0; overflow: auto;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 40px var(--shadow);
}
.ix-dlg:focus, .ix-dlg:focus-visible { outline: none; } /* 열 때 브라우저가 그리는 초점 테두리 없애기 */
.ix-dlg::backdrop { background: var(--backdrop); }
.dlg-body { padding: 14px 18px 16px; }
.dlg-msg { padding: 24px; } /* 불러오는 중·오류 문구 */
.dlg-grab { display: none; }
.dlg-head { display: flex; align-items: center; gap: 12px; }
/* 머리(이름·기간·✕)는 내용을 내려도 창 맨 위에 붙어 있다: 닫는 단추가 늘 보이게 (UX.md '3. 닫는 방법'). 창 안쪽 여백까지 덮도록 여백을 머리로 옮긴다 */
.dlg-head { position: sticky; top: 0; z-index: 2; background: var(--card); margin: -14px -18px -6px; padding: 14px 18px 6px; }
.dlg-head > div:first-child { flex: 1; min-width: 0; }
.dlg-head h3 { margin: 0; font-size: 17px; }
.dlg-sym { font-size: 11px; color: var(--muted); }
.dlg-x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 6px; line-height: 1; }
@media (hover: hover) { .dlg-x:hover { color: var(--text); } }
.dlg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.dlg-price b { font-size: 26px; }
.dlg-price b small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.dlg-price span { font-size: 14px; }
.dlg-price .dlg-rl { font-size: 12px; color: var(--muted); }
/* 미국 프리·애프터마켓 가격: 정규장 현재가 아래 한 줄 */
.dlg-price .dlg-ext { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.dlg-ext b { font-size: 13px; color: var(--text); font-weight: 600; }
.dlg-ext small { font-size: 11px; margin-left: 2px; }
.dlg-chart { position: relative; margin-top: 10px; touch-action: none; }
.dlg-chart svg { width: 100%; height: 280px; display: block; }
.dlg-chart .grid-line { stroke: var(--line); opacity: .6; }
.dlg-chart .axis { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.dlg-chart .cursor { stroke: var(--muted); stroke-dasharray: 3 3; }
.dlg-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
/* 미국 프리·애프터마켓 구간 (Yahoo처럼 배경과 선을 옅게) */
.dlg-line-ext { opacity: .5; }
.dlg-ext-bg { fill: var(--muted); opacity: .07; }
.dlg-base { stroke: var(--muted); stroke-dasharray: 4 3; opacity: .8; }
.dlg-base-lbl { fill: var(--text); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dlg-chart .tip { top: -2px; }
.dlg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.dlg-stats > div { background: var(--surface); border: 1px solid var(--surface-line); border-radius: 6px; padding: 6px 10px; min-width: 0; }
.dlg-stats dt { font-size: 11px; color: var(--muted); }
.dlg-stats dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dlg-stats dd small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg-stats .up-open { color: var(--greed); }
.dlg-inv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.dlg-inv small { color: var(--muted); font-size: 11px; margin-left: 2px; }
.dlg-note { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.dlg-note.warn { color: var(--fear); } /* 이전 값·종가 출처 경고 */
.dlg-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 12.5px; }
.dlg-gap { flex: 1; }
.dlg-add { font-size: 12.5px; padding: 4px 12px; color: var(--text); }
.dlg-add.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
.dlg-add:disabled { cursor: default; }
.dlg-inv-sub { margin-top: 4px; font-size: 12px; color: var(--muted); }
.dlg-hold { padding: 8px 10px; margin-top: 10px; background: var(--surface); border: 1px solid var(--surface-line); border-radius: 6px; }
.dlg-inv-sub b { font-weight: 600; }
.dlg-links a { color: var(--accent); text-decoration: none; }
@media (hover: hover) { .dlg-links a:hover { text-decoration: underline; } }
@media (max-width: 599.98px) {
  /* 휴대폰: 아래에서 올라오는 화면 */
  .ix-dlg {
    width: 100%; max-width: 100%; max-height: 90vh; max-height: 90dvh; margin: auto 0 0; border-radius: 14px 14px 0 0; border-bottom: 0;
    animation: sheet-up .22s ease-out;
  }
  .dlg-body { padding: 6px 14px calc(14px + env(safe-area-inset-bottom)); }
  /* 끌어 내려 닫기 (kit dragToClose, js/detail.js): 손잡이 막대 40×5, 머리는 어디를 잡아도 끌린다 (UX.md '2. 끌어 내려 닫기') */
  .ix-dlg { transition: transform .18s ease-out; }
  .dlg-grab { display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--line); margin: 2px auto 8px; }
  .dlg-grab, .dlg-head { touch-action: none; }
  .dlg-head { flex-wrap: wrap; margin: -6px -14px -6px; padding: 6px 14px 6px; }
  .dlg-x { width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; } /* 보이는 ✕는 그대로, 누르는 곳만 44px */
  .dlg-head .dlg-ranges { order: 3; flex-basis: 100%; }
  .dlg-chart svg { height: 210px; }
  .dlg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dlg-add { flex: 1 1 100%; } /* 관심종목 버튼은 한 줄 전체, 링크는 그 아래 한 줄 */
  .dlg-gap { flex-basis: 0; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
/* 수급 줄 (단위 억원은 툴팁에, 타일 폭이 좁아 10px). 한글 이름표(개·외·기)와 숫자를 같은 크기·같은 줄 높이로 세로 가운데 정렬 */
.ix-inv, .wl-inv { display: flex; align-items: center; font-size: 10px; line-height: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.ix-inv i, .wl-inv i { font-style: normal; line-height: 12px; margin-right: 3px; }
.ix-inv i::before, .wl-inv i::before { content: attr(data-l); }
.inv-fit.short i::before { content: attr(data-s); }
.wl-table .wl-sym.inv-fit { white-space: nowrap; overflow: hidden; } /* 넘침을 잴 수 있게 */
.ix-inv span, .wl-inv span { line-height: 12px; }
/* 지수 타일: 개·외·기 세 묶음을 타일 양쪽 끝까지 고르게 */
.ix-inv { margin-top: 2px; justify-content: space-between; }
.ix-inv b { display: flex; align-items: center; font-weight: 400; }
.ix-inv-date { color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 2px; flex: none; } /* 직전 거래일 수급 날짜 */
.ix-inv { gap: 6px; } /* 묶음 사이 최소 간격: 긴 이름표(개인)가 붙어 버리면 넘친 것으로 보고 짧은 이름표(개)로 */
.ix-inv.tight { gap: 3px; font-size: 9.5px; }
.ix-inv.wrap { flex-wrap: wrap; row-gap: 1px; } /* 짧은 이름표·조 단위로도 넘치면(320 폭) 묶음째 다음 줄로 (숫자를 자르지 않게) */
/* 관심종목: 코드 뒤에 왼쪽 정렬 */
.wl-inv { display: inline-flex; margin-left: 6px; font-size: 10.5px; vertical-align: middle; gap: 0; }
.wl-inv b { display: inline-flex; align-items: center; font-weight: 400; white-space: nowrap; }
.wl-inv b:not(:first-child) { margin-left: 6px; }
.wl-sym.inv-fit.wrap .wl-inv { display: flex; margin: 1px 0 0; } /* 한 줄에 안 들어가면 코드 아래 줄로 */
.ix.has-inv .ix-spark { flex-basis: 0; } /* 수급 줄이 있으면 그래프는 남는 높이만 (줄 높이는 다른 타일이 정한다) */

/* ---------- 히트맵 (미국/한국) ---------- */
.h2-sub { font-size: 11px; font-weight: 400; color: var(--muted); }
.map-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.map-head-left .h2-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 600px) { #map-title { min-width: 10.5em; } } /* 미국·한국 제목 중 긴 쪽 폭: 제목이 바뀌어도 옆 버튼이 움직이지 않게 */
.map-loading { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.map-legend { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-legend .lg-bar { display: block; width: 132px; height: 8px; border-radius: 4px; }
/* 요약 줄: 장 상태 · 상승/하락 비율 막대 · 시총가중 등락 */
#map-sub { display: inline-flex; align-items: center; min-width: 0; }
#map-sub > span { white-space: nowrap; }
#map-sub > span + span::before { content: '·'; margin: 0 7px; color: var(--muted); }
#map-sub b { font-weight: 600; }
.breadth { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.breadth i { display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--down); overflow: hidden; }
.breadth i span { display: block; height: 100%; background: var(--up); }
.map-wrap { position: relative; margin-top: 8px; }
.map { position: relative; background: var(--map-gap); overflow: hidden; border-radius: 4px; contain: layout paint; } /* 칸을 다시 그려도 계산이 지도 안에서 끝나게 */
.map .stk {
  position: absolute; overflow: hidden; cursor: pointer; /* 누르면 상세 팝업 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; line-height: 1.12; /* 칸 사이 틈은 위치로 (heatmap.js TILE_GAP) */
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
/* 그룹 머리글: 시장(mkt) > 섹터(sec) > 업종(ind) */
.map .gh { position: absolute; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px; white-space: nowrap; overflow: hidden; }
.map .gh span { overflow: hidden; text-overflow: ellipsis; }
.map .gh em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.map .gh.mkt { font-size: 11px; font-weight: 700; line-height: 17px; border-radius: 3px; color: var(--map-mkt); background: var(--map-mkt-bg); letter-spacing: .05em; }
.map .gh.sec { font-size: 11px; font-weight: 700; line-height: 16px; padding-left: 2px; color: var(--map-sec); background: var(--map-sec-bg); }
.map .stk.ink-dark { color: #1a1f2b; text-shadow: none; } /* 밝은 칸(밝은 모드의 작은 등락)은 진한 글자 */
.map .stk span { opacity: .92; font-variant-numeric: tabular-nums; }
/* 내 관심종목: 오른쪽 위 모서리 삼각형 */
.map .stk.mine::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent var(--map-focus) transparent transparent; }
.map .stk:focus { outline: 2px solid var(--map-focus); outline-offset: -2px; z-index: 1; }
@media (hover: hover) { .map .stk:hover { outline: 2px solid var(--map-focus); outline-offset: -2px; z-index: 1; } }
.map:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map .stk b { font-weight: 700; }
.map-tip { top: 0; left: 0; z-index: 5; white-space: normal; width: 230px; max-width: 100%; line-height: 1.5; }
.map-tip .t-head { font-weight: 700; font-size: 13px; }
.map-tip .t-sub { color: var(--muted); font-size: 11px; }
.map-tip .t-row { display: flex; justify-content: space-between; }

/* ---------- CNN 공포탐욕 ---------- */
.fg-top { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.gauge { width: 150px; flex: none; }
.gauge path { fill: none; stroke-width: 16; }
#fg-needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; transform-origin: 100px 100px; transition: transform .8s ease; }
.hub { fill: var(--text); }
.fg-score { text-align: center; width: 84px; flex: none; }
.score { font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rating { margin-top: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1; }
.fg-compare div { background: var(--surface); border-radius: 5px; padding: 3px 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.fg-compare .lbl { font-size: 11px; color: var(--muted); white-space: nowrap; }
.fg-compare .val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.indicators { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.indicators li { display: grid; grid-template-columns: 6.2em minmax(24px, 1fr) 22px; align-items: center; gap: 6px; font-size: 11.5px; }
.indicators li > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 5px; background: var(--seg-bg); border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 3px; }
.ind-val { text-align: right; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 공포탐욕 추이 ---------- */
.range-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.range-stats { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.range-stats b { font-weight: 600; }
.chart-wrap { position: relative; touch-action: pan-y; } /* 휴대폰: 옆으로 끌면 툴팁, 위아래로 끌면 화면 스크롤 */
.history { width: 100%; display: block; }
.history .band { opacity: .09; }
.history .grid-line { stroke: var(--line); }
.history .axis { fill: var(--muted); font-size: 10px; }
.history .line { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; }
.history .cursor { stroke: var(--muted); stroke-dasharray: 3 3; }

@media (max-width: 599.98px) {
  .fg-top { flex-wrap: wrap; }
  .indicators { grid-template-columns: 1fr; }
}

/* ---------- 상단 바: 다음 일정 · 알림 · 소리 ---------- */
.next-events {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; text-align: center; cursor: pointer;
  min-height: 19px; /* 일정이 들어와도 높이가 그대로 */
}
@media (hover: hover) { .next-events:hover { color: var(--text); } }
.next-events .ne-label { color: var(--accent); font-weight: 600; margin-right: 6px; }
.next-events .ne-item { margin: 0 8px; }
.next-events .ne-in { color: var(--fear); }
.alert-wrap { position: relative; }
.alert-btn { position: relative; }
.alert-count {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--up); color: var(--on-up); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.alert-pop {
  position: absolute; right: 0; top: 30px; z-index: 50; width: 420px; max-height: 70vh; max-height: 70dvh; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 8px 30px var(--shadow);
}
.alert-pop-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.alert-list { list-style: none; margin: 8px 0; padding: 0; font-size: 12px; }
.alert-list li { padding: 5px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.alert-list li time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.alert-list li.empty { color: var(--muted); border: 0; }
.alert-rules { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.alert-rules b { color: var(--text); font-size: 12px; }
.alert-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; margin: 6px 0; }
.alert-groups label, .alert-step { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.alert-groups small { font-size: 11px; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.alert-groups input { margin: 0; accent-color: var(--accent); }
.alert-step input { width: 52px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; font: inherit; text-align: right; }
.alert-rules p { margin: 6px 0 0; }
.link-btn { background: none; border: 0; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; padding: 0; }
@media (hover: hover) { .link-btn:hover { color: var(--text); } }

/* 시세 경보 띠: 지수·관심종목을 가리지 않게 왼쪽 아래(히트맵 위).
   공통 '아래 알림'(kit toast, UX.md 4번)과 다른 것이다: 경보는 여러 지수·종목이 한꺼번에 기준을 넘을 수 있어
   최대 4개가 20초 동안 쌓여 보여야 한다 (하나만 보이면 앞의 경보가 지워진다). 일반 안내는 kit toast를 쓴다 (js/common.js say) */
.toasts { position: fixed; left: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast {
  pointer-events: auto; cursor: pointer; min-width: 320px; max-width: 420px; padding: 10px 16px; border-radius: 8px;
  background: var(--raise); border: 1px solid var(--line); border-left: 4px solid var(--accent); font-size: 14px;
  box-shadow: 0 8px 30px var(--shadow); animation: toast-in .25s ease;
}
.toast.up { border-left-color: var(--up); }
.toast.down { border-left-color: var(--down); }
.toast small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
body.alerting .topbar { animation: flash 1s ease-in-out 6; }
@keyframes flash { 50% { background: rgba(var(--up-rgb), .35); } }
.ix.flash { animation: tile-flash 1s ease-in-out 8; }
@keyframes tile-flash { 50% { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent) inset; } }

/* ---------- 탭 카드 ---------- */
.tabs { display: flex; gap: 2px; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; padding: 2px 8px 4px; cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .tabs button:hover { color: var(--text); } }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tab-actions { display: flex; align-items: center; gap: 8px; }
.tab-panel { display: none; }
.tab-panel.on { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 6px; }
.wl-scroll, .cal-scroll { overflow-y: auto; min-height: 120px; scrollbar-gutter: stable; padding-right: 8px; }
/* 얇고 어두운 스크롤바 */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* 관심종목 */
.wl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wl-table th { color: var(--muted); font-weight: 500; font-size: 11px; text-align: right; padding: 3px 4px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.wl-table td { padding: 5px 4px; text-align: right; border-bottom: 1px solid var(--row-line); white-space: nowrap; }
.wl-table th:first-child, .wl-table td:first-child { text-align: left; }
/* 첫 칸(종목)이 남는 폭을 다 쓰고, 넘치면 첫 칸만 잘린다 -> 좁은 화면에서도 숫자 칸(현재가·손익)은 잘리지 않음 */
.wl-table td:first-child { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wl-table .wl-sym { display: block; font-size: 11px; color: var(--muted); }
.wl-table .wl-name { font-weight: 600; }
/* 넥스트레이드 시간(08:00~08:50·15:30~20:00) 가격 표시 */
.wl-nxt { margin-left: 4px; padding: 0 3px; border: 1px solid var(--line); border-radius: 3px; font-size: 10.5px; color: var(--muted); vertical-align: 1px; }
/* 미국 종목 프리·애프터마켓 가격 (현재가 아래 작은 줄) */
.wl-ext { display: block; font-size: 11px; color: var(--muted); }
.wl-table tr.total td { color: var(--muted); font-size: 11px; border-bottom: 0; }
.wl-table tr.total td.up { color: var(--up); }
.wl-table tr.total td.down { color: var(--down); }
.wl-table td.wl-empty { text-align: center; padding: 18px 0; max-width: none; }
#wl-table tr.wl-row { cursor: pointer; } /* 누르면 상세 팝업 */
@media (hover: hover) { #wl-table tr.wl-row:hover td { background: var(--hover); } }
.wl-table input.bad { border-color: var(--up); background: rgba(var(--up-rgb), .1); }
.wl-table input { width: 72px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; font: inherit; font-size: 11.5px; text-align: right; }
.wl-table input.wl-alias { width: 120px; text-align: left; }
.wl-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px 0 4px; }
@media (hover: hover) { .wl-del:hover { color: var(--up); } }
/* 편집 표: 칸 폭을 고정 비율로 나눠 좁은 화면에서도 넘치지 않게 */
.wl-table.editing { table-layout: fixed; }
.wl-table.editing .wl-col-alias { width: 24%; }
.wl-table.editing .wl-col-num { width: 16%; }
.wl-table.editing .wl-col-act { width: 88px; }
.wl-table.editing td { overflow: hidden; text-overflow: ellipsis; padding: 4px 3px; }
.wl-table.editing td:first-child { width: auto; max-width: none; }
.wl-table.editing input, .wl-table.editing input.wl-alias { width: 100%; min-width: 0; }
.wl-order { white-space: nowrap; text-align: right; }
.wl-move { background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; font-size: 10px; line-height: 1; padding: 3px 5px; margin-left: 2px; cursor: pointer; }
@media (hover: hover) { .wl-move:hover:not(:disabled) { color: var(--text); border-color: var(--muted); } }
.wl-move:disabled { opacity: .3; cursor: default; }
.wl-add { position: relative; margin-bottom: 6px; }
.wl-add input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px; font: inherit; font-size: 12px; }
.wl-results { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 30px; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 5px; max-height: 220px; overflow: auto; }
.wl-results:empty { display: none; }
.wl-results li { padding: 5px 8px; font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
@media (hover: hover) { .wl-results li:hover { background: var(--ghost-hover); } }
.wl-results li span { color: var(--muted); font-size: 11px; }
.wl-actions { display: inline-flex; align-items: center; gap: 10px; }
.save-btn { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 5px; padding: 3px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

/* 일정 */
.cal-day { font-size: 11px; color: var(--accent); font-weight: 600; padding: 6px 0 3px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.cal-row { display: grid; grid-template-columns: 38px 22px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--row-line); font-size: 12px; }
.cal-row.past { opacity: .5; }
.cal-row.soon { background: rgba(var(--fear-rgb), .08); }
.cal-row time { color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-cc { font-size: 10.5px; font-weight: 700; border-radius: 3px; text-align: center; padding: 0 2px; }
.cal-cc.US { color: var(--cc-us); border: 1px solid var(--cc-us-line); }
.cal-cc.KR { color: var(--cc-kr); border: 1px solid var(--cc-kr-line); }
.cal-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-title b { color: var(--star); font-weight: 400; margin-right: 3px; letter-spacing: -1px; }
.cal-title .cal-sub { color: var(--muted); font-size: 11px; margin-left: 4px; }
.cal-title.watch { color: var(--accent); }
.cal-vals { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-vals .act { color: var(--text); font-weight: 600; }
.cal-empty { padding: 8px 0; }

/* ---------- 기준 화면처럼 높이가 낮은 넓은 화면 (높이 900 미만): 세로 공간 아끼기 ---------- */
@media (min-width: 1200px) and (min-height: 640px) and (max-height: 900px) {
  .card { padding: 8px 10px; }
  .ix-grid { margin-top: 6px; gap: 6px; } /* 둘째 줄(.ix-grid2)도 같은 6px */
  .ix { padding: 4px 8px; }
  .ix-price { font-size: 17px; }
  .ix-spark { flex-basis: 24px; margin-top: 2px; }
  .card-foot { margin-top: 4px; }
  .fg-top { margin-top: 2px; }
  .gauge { width: 118px; }
  .score { font-size: 34px; }
  .fg-score { width: 70px; }
  .fg-compare .val { font-size: 14px; }
  .indicators { margin-top: 4px; gap: 1px 14px; }
  .indicators li { font-size: 11px; }
  .wl-table td { padding: 3px 4px; }
  .cal-row { padding: 3px 0; }
}

/* ---------- 태블릿·작은 노트북 (1200 미만): 오른쪽 카드 두 개를 나란히 ---------- */
@media (min-width: 760px) and (max-width: 1199.98px), (min-width: 760px) and (max-height: 639.98px) {
  #fg-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-items: center; }
  #fg-card > .card-head, #fg-card > .card-foot { grid-column: 1 / -1; }
  #fg-card .indicators { margin-top: 6px; }
  #tab-card { display: flex; flex-direction: column; }
  .wl-scroll, .cal-scroll { max-height: 420px; }
  .dash .ix-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 8개씩 두 줄로 고르게 */
}

/* ---------- 좁은 화면 공통 (760 미만) ---------- */
@media (max-width: 759.98px) {
  .wl-scroll, .cal-scroll { max-height: 60vh; max-height: 60dvh; }
  .card-head { flex-wrap: wrap; row-gap: 6px; }
  .map-head-left { flex-wrap: wrap; row-gap: 4px; }
  /* 좁으면 상승·하락 막대·시총가중을 다음 줄로 (오른쪽에서 잘리지 않게). 줄 맨 앞에 '·'가 오지 않게 점 대신 간격 */
  #map-sub { flex-wrap: wrap; row-gap: 2px; column-gap: 12px; }
  #map-sub > span + span::before { content: none; }
  #map-card > .card-head { min-height: 66px; } /* 휴대폰: 설명·범례가 들어와 두 줄이 되어도 지도가 밀리지 않게 (미리 두 줄 높이) */
  .map-legend .lg-bar { width: 96px; }
  .next-events { display: none; }
  .topbar { gap: 8px; }
  .dash .ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* iOS는 16px보다 작은 입력칸을 누르면 화면을 확대한다 (공통 규칙: 760 미만이면 입력칸 16px) */
  .wl-add input, .wl-table input, .alert-step input, .acct-form input { font-size: 16px; }
}

/* ---------- 태블릿 세로 (600~899): 위 바 버튼은 글자 없이 아이콘만 ----------
   아이패드 세로(820)에서 관리자 표시(⚠ 장애·가입 승인 N)가 붙으면 '전체 화면'이 화면 밖으로 밀려 가로 스크롤이 생겼다 (2026-11-11 몽키 테스트).
   관리자 표시가 있으면 휴대폰처럼 시계의 초도 숨긴다 */
@media (min-width: 600px) and (max-width: 899.98px) {
  .btn-label { display: none; }
  .topbar-right { gap: 8px; }
  .topbar:has(.admin-pending:not([hidden]), .admin-warn:not([hidden])) .clk-sec { display: none; }
}

/* ---------- 휴대폰 (600 미만) ---------- */
@media (max-width: 599.98px) {
  :root { --gap: 8px; }
  .topbar { padding: 0 8px; height: 40px; }
  .brand-live { display: none; }
  .clk-wide, .btn-label { display: none; }
  #fs-btn { display: none; } /* 휴대폰 브라우저는 전체화면 버튼이 잘 안 됨 */
  .topbar-right { gap: 8px; }
  .ix-price { font-size: 16px; }
  /* 관리자 표시(가입 승인 N·⚠)가 있으면 시계의 초를 숨기고 버튼 여백을 줄여 한 줄에 들어가게 (390·320 폭) */
  .topbar:has(.admin-pending:not([hidden]), .admin-warn:not([hidden])) .clk-sec { display: none; }
  .topbar:has(.admin-pending:not([hidden]), .admin-warn:not([hidden])) .topbar-right { gap: 4px; }
  .topbar:has(.admin-pending:not([hidden]), .admin-warn:not([hidden])) .fs-btn:not(.admin-pending):not(.admin-warn) { padding: 3px 3px; }
}
/* 아주 좁은 휴대폰(폭 380 미만: 작은 폰·폴더블 바깥 화면): 위쪽 버튼 간격을 줄여 가로로 넘치지 않게 (로그인하면 버튼이 하나 더 있음) */
@media (max-width: 379.98px) {
  .topbar { gap: 4px; }
  .topbar h1 { font-size: 13px; }
  .topbar-right { gap: 0; }
  .topbar .fs-btn { padding: 3px 5px; }
  .topbar .fs-btn.admin-pending, .topbar .fs-btn.admin-warn { padding: 2px 4px; font-size: 11px; }
  .topbar #acct-wrap:not([hidden]) { gap: 2px; }
  .clock { font-size: 12px; }
  .brand-name { letter-spacing: .03em; }
  .topbar:has(.admin-pending:not([hidden]), .admin-warn:not([hidden])) .topbar-right { gap: 0; }
  /* 지수 타일: 값과 등락이 한 줄에 안 들어가면(다우존스 '53,356.12 ▲1,569.40') 등락을 다음 줄 오른쪽으로 (잘리지 않게) */
  .ix-line { flex-wrap: wrap; row-gap: 0; }
  .ix-chg { margin-left: auto; }
  /* 관심종목 편집 표: 순서 버튼을 위아래로 쌓아 칸을 줄이고, 종목 이름·코드는 줄을 바꿔 다 보이게 ('삼…'·'00593' 잘림) */
  .wl-table.editing .wl-col-alias { width: 22%; }
  .wl-table.editing .wl-col-num { width: 15%; }
  .wl-table.editing .wl-col-act { width: 46px; }
  .wl-table.editing td:first-child { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .wl-table.editing input::placeholder { font-size: 12px; }
  .wl-ord { display: grid; grid-template-columns: auto auto; gap: 2px; justify-content: end; align-items: center; }
  .wl-ord .wl-move { margin: 0; grid-column: 1; }
  .wl-ord .wl-del { grid-column: 2; grid-row: 1 / span 2; padding: 0 0 0 2px; }
}
/* 휴대폰(600 미만) 나머지. 2026-11-03 8d0c863에서 380 미만 규칙을 넣을 때 이 아래 규칙들이 380 미만 안으로 딸려 들어가,
   390·430 폭 아이폰에서 관심종목 입력칸 16px(확대 막기)·히트맵 3:5 높이·지수 6개만 등이 빠져 있었다 */
@media (max-width: 599.98px) {
  /* 휴대폰: 높이를 화면 높이가 아니라 폭에 비례하게. 앱 안 브라우저(카카오톡 등)는 스크롤하면 도구막대를 숨기며
     화면 크기 자체를 바꿔 vh·svh가 모두 변한다 -> 배치가 다시 계산되거나 여백이 생김. 폭은 스크롤해도 그대로 */
  .map { height: auto; aspect-ratio: 3 / 5; min-height: 380px; }
  .card-foot { white-space: normal; }
  .toast { min-width: 0; max-width: none; }
  .alert-pop { position: fixed; left: 8px; right: 8px; top: 46px; width: auto; }
  .tabs button { padding: 2px 6px 4px; font-size: 12.5px; }
  .wl-add input { font-size: 16px; } /* iOS가 입력 시 화면을 확대하지 않도록 */
  .wl-table input { font-size: 16px; }
  /* 수급은 코드 아래 따로 한 줄 (같은 줄에 두면 잘림) */
  .wl-table .wl-inv { display: flex; flex-wrap: wrap; margin: 1px 0 0; } /* 좁으면 묶음째 다음 줄로 (잘리지 않게) */
  .wl-table .wl-sym.inv-fit { white-space: normal; }
  .wl-inv i::before, .ix-inv i::before { content: attr(data-s); } /* 휴대폰은 늘 짧은 이름표(개·외·기) */
  /* 지수: 처음에는 6개만 */
  .ix-more { display: block; }
  .ix-collapsed #ix-grid2, .ix-collapsed #ix-grid > .ix:nth-child(n+7) { display: none; }
  .toasts { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .alert-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 로그인 화면 · 계정 메뉴 ---------- */
/* 위·아래는 아이폰 상태 표시줄·홈 막대 자리를 비운다 (login.html이 viewport-fit=cover라 화면 끝까지 그림) */
/* 틀은 화면 높이에 고정, 안쪽 칸(.login-scroll) 하나만 스크롤 (UX.md '1. 화면 틀'·'9. 관리·로그인 화면도 같다').
   가운데 정렬은 안의 상자에 margin: auto (내용이 화면보다 길어도 위가 잘리지 않는다) */
body.login-page { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.login-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; display: flex;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
}
.login-scroll > .login-box, .login-scroll > .login-pending { margin: auto; }
.login-box { width: 100%; max-width: 360px; padding: 22px 22px 16px; }
.login-box .brand { justify-content: center; margin: 0 0 18px; font-size: 15px; }
.login-tabs { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.login-form label small { font-size: 11px; }
.login-form input {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 5px;
  padding: 8px 10px; font: inherit; font-size: 16px;
}
.login-form input:focus { outline: none; border-color: var(--accent); }
.login-form .pw-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } /* label과 같은 모양 */
.pw-wrap { position: relative; display: block; }
.login-form .pw-wrap input { width: 100%; box-sizing: border-box; padding-right: 64px; } /* 가로 모드 padding보다 세게 */
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-width: 56px; min-height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.login-form .save-btn { padding: 8px 12px; font-size: 14px; margin-top: 4px; }
.login-form .save-btn:disabled { opacity: .6; cursor: default; }
.login-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 12px; color: var(--fear); }
.login-msg.ok { color: var(--greed); } /* 가입 신청 접수 */
.acct-pop { width: 280px; }
/* 화면 모드 메뉴 */
.theme-pop { width: 200px; padding: 8px; }
.theme-pop .alert-pop-head { padding: 0 4px 6px; }
.theme-pop button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.theme-pop button span { width: 16px; text-align: center; color: var(--muted); }
.theme-pop button small { margin-left: auto; font-size: 11px; color: var(--muted); }
@media (hover: hover) { .theme-pop button:hover { background: var(--hover); } }
.theme-pop button.on { background: rgba(var(--accent-rgb), .12); }
.theme-pop button.on span { color: var(--accent); }
.acct-form { margin-top: 10px; gap: 6px; font-size: 12px; }
.acct-form input { padding: 5px 8px; font-size: 13px; }
.acct-form .save-btn { font-size: 12px; padding: 4px 10px; align-self: flex-end; }
.acct-form .login-msg { margin: 0; }

/* ---------- 관리자 관련 (대시보드에서도 씀). 관리자 화면 자체는 admin.css ---------- */
.admin-warn { color: var(--up); border-color: var(--up); text-decoration: none; font-weight: 700; animation: pulse 1.6s ease-in-out infinite; }

/* 앱으로 설치 안내 (kit installBanner): 위 바와 대시보드 사이 한 줄. 닫거나 설치하면 상자가 사라지고 줄도 접힌다 */
.install-strip { flex: none; padding: var(--gap) var(--gap) 0; }
.install-strip:not(:has(.ak-install:not([hidden]))) { display: none; }
/* 넓은 화면(대시보드 고정 배치)에서는 대시보드 공간을 덜 먹게 설명을 제목 옆 한 줄로, 위아래 여백도 줄임 */
@media (min-width: 1200px) and (min-height: 640px) {
  .install-strip .ak-install { padding-top: 6px; padding-bottom: 6px; }
  .install-strip .ak-install-txt { display: flex; align-items: baseline; gap: 10px; }
  .install-strip .ak-install-txt p { margin: 0; }
}

/* 아이폰 홈 화면 앱(iOS 26~): 화면 맨 위에 고정된 띠가 없으면 아이폰이 머리줄 위에 뿌연 흐림을 덮는다.
   보이지 않는 고정 띠(.ios-edge, 각 HTML의 body 첫 줄)를 두면 흐림 대신 이 배경색으로 상태 표시줄 자리를 칠한다.
   글자 모양으로만 칠해서(background-clip: text) 실제로는 아무것도 그리지 않고, 누를 수도 없다 (2026-11-09) */
.ios-edge {
  position: fixed; top: 0; left: 0; right: 0; height: 11px; z-index: 2147483647; pointer-events: none;
  background-color: var(--card); -webkit-background-clip: text; background-clip: text;
}
body.login-page .ios-edge { background-color: var(--bg); }
body.ak .ios-edge { background-color: var(--ak-card); }

/* ---------- 터치 기기: 누르는 곳 44px 이상 (UX.md '7. 터치') ----------
   보이는 모양은 그대로 두고 ::after로 누르는 곳만 넓힌다 (줄 높이가 달라지지 않게). 폭과 상관없이 휴대폰 세로·태블릿 모두.
   휴대폰 가로 모드는 바로 아래 블록이 자기 크기로 다시 정한다 */
@media (pointer: coarse) {
  /* 기간(1일·1개월·1년)·히트맵 시장(자동·미국·한국) */
  .ranges button { position: relative; min-width: 44px; }
  .ranges button::after { content: ''; position: absolute; inset: -12px 0; }
  /* 위 바 단추(계정·알림·화면 모드·소리·화면 켜 두기·전체 화면·장애·가입 승인): 위아래로 넓힌다. 옆은 단추 사이 틈만큼만 */
  .topbar .fs-btn { position: relative; }
  .topbar .fs-btn::after { content: ''; position: absolute; inset: -6px -4px -16px; } /* 위는 화면 끝이라 아래로 더 넓힌다 */
  /* 다음 일정: 넘치는 글자를 자르는 칸이라 ::after가 잘린다. 안쪽 여백을 주고 같은 만큼 바깥 여백을 빼서 줄 높이는 그대로 */
  .next-events { position: relative; padding-block: 6px 20px; margin-block: -6px -20px; }
  /* 아래 탭 카드: 탭(관심종목·일정·추이)과 오른쪽 작은 글자 단추(편집·세부 지표·CNN ↗) */
  .tabs button { position: relative; min-width: 44px; }
  .tabs button::after { content: ''; position: absolute; inset: -15px 0 -6px; } /* 아래는 표 머리·목록이 덮으므로 위로 더 넓힌다 */
  .tab-actions { gap: 16px; }
  .tab-actions .link-btn, .tab-actions .src, .tab-actions .save-btn { position: relative; }
  .tab-actions .link-btn::after, .tab-actions .src::after { content: ''; position: absolute; inset: -22px -11px -8px; }
  .tab-actions .save-btn::after { content: ''; position: absolute; inset: -14px 0 -6px; }
  .ix-more { min-height: 44px; }
  /* 상세 창: ✕(태블릿도 44px), 관심종목에 추가, 바깥 사이트 링크 */
  .dlg-x { width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; }
  .dlg-links { row-gap: 0; }
  .dlg-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .dlg-add { min-height: 44px; }
  /* 알림 메뉴·화면 모드 메뉴: 줄 높이 44px */
  .alert-groups { row-gap: 0; }
  .alert-groups label, .alert-step { min-height: 44px; }
  .alert-groups input { width: 18px; height: 18px; flex: none; }
  .theme-pop button { min-height: 44px; }
  .alert-pop-head .link-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 8px; margin-block: -10px -18px; }
}

/* ---------- 휴대폰 가로 모드 (가로로 눕힘, 높이 520 이하, 폭 560 이상): 스크롤 없는 한 화면 ----------
   조건은 모든 서비스가 같다 (UX.md '5. 가로 모드 조건'). js/common.js의 LANDSCAPE도 같은 글자
   높이가 390쯤이라 카드를 위아래로 쌓으면 어느 것도 한 화면에 안 들어온다. 그래서 배치를 통째로 바꾼다:
     [세로 막대] [ 히트맵 (높이 가득) ] [ 오른쪽 칸: 지수 / 관심종목 / 공포·탐욕 / 일정 중 하나 ]
   - 위 바는 세로 막대로: 가장 모자란 높이 36px를 돌려받고, 아일랜드 옆 빈 자리를 막대가 쓴다 (아일랜드가 오른쪽이면 막대도 오른쪽)
   - 오른쪽 칸에 볼 것은 js/land.js가 <body data-land>로 정한다. 지수는 16개가 한눈에 들어오는 작은 타일 2줄
   폭 560 이상만: 세로로 든 휴대폰에서 자판이 올라와 높이가 줄어든 경우와 섞이지 않게.
   폭 560~599는 위쪽의 '휴대폰(600 미만)' 규칙도 함께 걸리므로, 가로 배치와 부딪치는 것은 이 블록 안에서 되돌린다 */
.land-tabs { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  :root { --gap: 6px; --rail: 48px; }
  /* 공통 부품(kit)의 아래 알림이 막대를 피해 내용 가운데에 뜨게 막대 폭을 알려 준다 (kit README '가로 모드') */
  body.dash-page { --ak-rail-l: var(--rail); }
  html.island-right body.dash-page { --ak-rail-l: 0px; --ak-rail-r: var(--rail); }

  /* 틀: 막대 | (설치 안내 / 대시보드) */
  body.dash-page { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  body.dash-page .topbar { grid-column: 1; grid-row: 1 / -1; }
  .install-strip { grid-column: 2; grid-row: 1; }
  .dash-page .dash { grid-column: 2; grid-row: 2; }
  html.island-right body.dash-page { grid-template-columns: minmax(0, 1fr) auto; }
  html.island-right body.dash-page .topbar { grid-column: 2; }
  html.island-right .install-strip, html.island-right .dash-page .dash { grid-column: 1; }

  /* 세로 막대 (위 바): 위에서부터 아이콘 · 장 상태 · 시각, 아래에 버튼들 */
  .topbar {
    flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; box-sizing: content-box;
    width: var(--rail); padding: 10px 0 max(8px, env(safe-area-inset-bottom, 0px)) var(--sa-l);
    border-bottom: 0; border-right: 1px solid var(--line); background: var(--card);
    min-height: 0; overflow: hidden; /* 자판이 올라와 높이가 150px쯤 남아도 막대가 화면 틀을 밀어 늘리지 않게 (알림 창은 fixed라 잘리지 않음) */
  }
  html.island-right .topbar { padding-left: 0; padding-right: var(--sa-r); border-right: 0; border-left: 1px solid var(--line); }
  .topbar .brand { flex-direction: column; gap: 8px; }
  .topbar .brand-name { font-size: 0; background: none; }
  .topbar .brand-name::before { content: ''; display: block; width: 30px; height: 30px; border-radius: 8px; background: url(favicon.svg) center / contain no-repeat; box-shadow: 0 0 0 1px var(--line); }
  .brand-live { margin: 0; padding: 2px 4px; max-width: 46px; flex-direction: column; gap: 3px; font-size: 9px; letter-spacing: 0; line-height: 1.15; white-space: normal; text-align: center; word-break: keep-all; font-family: inherit; }
  .next-events, .btn-label, .clk-wide, .clk-sec, #fs-btn { display: none; }
  .topbar-right { flex: 1; flex-direction: column; gap: 2px; min-height: 0; }
  .clock { margin-bottom: auto; font-size: 12px; white-space: nowrap; } /* 시각은 위쪽, 버튼은 아래쪽으로 밀림 */
  .topbar .fs-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font-size: 17px; }
  .topbar .alert-count { top: 2px; right: 0; }
  .topbar #acct-wrap:not([hidden]) { flex-direction: column; gap: 2px; }
  /* 관리자만 보는 경고·승인 대기: 글자는 작아도 누르는 곳은 위아래로 넓힘 (바로 위·아래 버튼과 겹치지 않는 만큼) */
  .topbar .fs-btn.admin-pending, .topbar .fs-btn.admin-warn { position: relative; height: auto; min-height: 28px; padding: 2px; font-size: 11px; line-height: 1.15; white-space: normal; word-break: keep-all; text-align: center; }
  .topbar .fs-btn::after { inset: 0; } /* 터치 블록의 넓힘을 되돌림: 여기서는 단추가 이미 44×44 */
  .topbar .fs-btn.admin-pending::after, .topbar .fs-btn.admin-warn::after { content: ''; position: absolute; inset: -1px 0; }
  /* 알림·화면 모드 창: 막대 옆에 화면 높이 안에서 */
  .alert-pop { position: fixed; top: 8px; left: calc(var(--rail) + var(--sa-l) + 8px); right: auto; width: min(500px, 66vw); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 10px 14px max(10px, env(safe-area-inset-bottom, 0px)); }
  html.island-right .alert-pop { left: auto; right: calc(var(--rail) + var(--sa-r) + 8px); }
  .theme-pop { width: 240px; padding: 8px; }
  /* 창 안 글자는 13px, 누르는 곳(체크 줄·메뉴 줄·모두 지우기)은 44px */
  .alert-pop-head { font-size: 14px; min-height: 28px; }
  .alert-list { font-size: 13px; margin: 4px 0 8px; }
  .alert-list li { padding: 7px 0; }
  .alert-rules { font-size: 13px; }
  .alert-rules b { font-size: 13px; }
  .alert-rules p { font-size: 12px; }
  .alert-groups { gap: 0 10px; margin: 2px 0; }
  .alert-groups label { min-height: 44px; gap: 7px; }
  .alert-groups small { font-size: 12px; }
  .alert-groups input { width: 18px; height: 18px; flex: none; }
  .alert-step { min-height: 44px; }
  .alert-step input { width: 68px; height: 40px; font-size: 16px; } /* 16px보다 작으면 아이폰이 누를 때 화면을 키움 */
  .theme-pop button { min-height: 44px; font-size: 14px; }
  .theme-pop button small { font-size: 12px; }
  .alert-pop .link-btn { position: relative; font-size: 13px; }
  .alert-pop .link-btn::after { content: ''; position: absolute; inset: -14px -10px; }

  /* 설치 안내: 바깥 여백만 정한다. 한 줄로 얇게 만드는 것은 공통 부품(kit.css 가로 블록)이 한다 */
  .install-strip { padding: 6px calc(var(--gap) + var(--sa-r)) 0 var(--gap); }
  html.island-right .install-strip { padding-right: var(--gap); padding-left: calc(var(--gap) + var(--sa-l)); }

  /* 대시보드: 왼쪽 히트맵, 오른쪽 칸(고르는 버튼 + 내용). 페이지는 스크롤하지 않고 오른쪽 칸 안만 스크롤 */
  .dash-page .dash {
    overflow: hidden; grid-template-columns: minmax(0, 1fr) clamp(264px, 37%, 330px); grid-template-rows: auto minmax(0, 1fr);
    padding: var(--gap) calc(var(--gap) + var(--sa-r)) max(var(--gap), env(safe-area-inset-bottom, 0px)) var(--gap);
  }
  html.island-right .dash-page .dash { padding-right: var(--gap); padding-left: calc(var(--gap) + var(--sa-l)); }
  .card { padding: 7px 9px; }
  #map-card { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; min-height: 0; container-type: inline-size; }
  .land-tabs { grid-column: 2; grid-row: 1; display: flex; gap: 2px; padding: 2px; background: var(--seg-bg); border: 1px solid var(--line); border-radius: 9px; }
  .land-tabs button { position: relative; flex: 1 1 0; min-width: 0; height: 34px; padding: 0 2px; background: transparent; color: var(--muted); border: 0; border-radius: 7px; font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
  .land-tabs button.on { color: var(--text); background: var(--seg-on); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
  .land-tabs button::after { content: ''; position: absolute; inset: -5px 0; } /* 보이는 높이는 34px, 누르는 곳은 위아래 여백까지 44px (높이를 아끼려고) */
  #ix-card, .area-side { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  #ix-card::-webkit-scrollbar, .area-side::-webkit-scrollbar { display: none; }
  body[data-land="ix"] .area-side, body:not([data-land="ix"]) #ix-card { display: none; }
  body[data-land="watch"] #fg-card, body[data-land="cal"] #fg-card { display: none; }

  /* 히트맵: 제목·범례를 빼고 한 줄 머리 (어느 시장인지는 지도 안 머리줄이 알려 줌), 지도가 남은 높이를 다 씀 */
  #map-title, .map-legend { display: none; }
  /* 묶음 버튼(자동·미국·한국, 1일·1개월·1년, 3개월…전체): 보이는 크기를 조금 키우고 누르는 곳은 위아래로 44px */
  .ranges button { position: relative; min-width: 44px; padding: 5px 10px; font-size: 13px; line-height: 18px; }
  .ranges button::after { content: ''; position: absolute; inset: -8px 0; }
  #map-card > .card-head { min-height: 0; }
  .map-head-left { flex-wrap: nowrap; min-width: 0; }
  #map-sub { flex-wrap: nowrap; min-width: 0; overflow: hidden; white-space: nowrap; }
  #map-sub > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* 긴 장 상태 글자('장 시작 전 (NXT 프리마켓 08:50 마감)')는 말줄임, 상승·하락 수는 그대로 */
  #map-sub > .breadth { flex: none; }
  #map-card .grow { flex: 1; min-height: 0; margin-top: 6px; }
  .map { height: 100%; aspect-ratio: auto; min-height: 0; } /* 휴대폰(600 미만)의 3:5 높이를 되돌림 */
  @container (max-width: 450px) { #map-sub > span:last-child { display: none; } } /* 좁으면 '시총가중'을 뺌 (글자 중간에서 잘리지 않게) */
  @container (max-width: 345px) { .breadth i { width: 28px; } } /* 더 좁으면 상승·하락 막대를 짧게 */
  @container (max-width: 315px) { .breadth i { display: none; } }

  /* 지수: 16개를 작은 타일 2줄 8칸으로 한눈에 (타일 높이는 남은 높이를 8등분, 모자라면 스크롤).
     타일 바탕을 등락 방향 색으로 옅게 칠해 옆의 히트맵과 같은 말로 읽히게. 그래프·등락 폭·수급은 눌러서 보는 상세 창에 */
  #ix-card { display: flex; flex-direction: column; padding: 0; background: none; border: 0; box-shadow: none; container-type: inline-size; }
  #ix-card > .card-head, #ix-foot:not(.warn), .ix-spark, .ix-abs, .ix-inv, .ix-more { display: none; }
  .ix-collapsed #ix-grid2 { display: contents; } /* 휴대폰(600 미만)의 '6개만'을 되돌림: 가로에서는 16개 모두 */
  .ix-collapsed #ix-grid > .ix:nth-child(n+7) { display: flex; }
  .ix-rows { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(34px, 1fr); gap: 4px; }
  .dash .ix-rows .ix-grid { display: contents; }
  .ix { justify-content: center; padding: 1px 8px; border-radius: 7px; background: var(--card); border-color: var(--line); }
  /* 타일 높이가 35~38px라 누르는 곳만 위아래 틈(6px)의 반씩 넓힌다 (41~44px. 16개를 한 화면에 넣느라 더는 못 넓힘) */
  .ix[data-sym] { position: relative; }
  .ix[data-sym]::after { content: ''; position: absolute; inset: -3px 0; }
  .ix:has(.ix-chg.up) { background: color-mix(in srgb, var(--up) 13%, var(--card)); border-color: color-mix(in srgb, var(--up) 30%, var(--line)); }
  .ix:has(.ix-chg.down) { background: color-mix(in srgb, var(--down) 13%, var(--card)); border-color: color-mix(in srgb, var(--down) 30%, var(--line)); }
  .ix-name { font-size: 11px; line-height: 13px; color: var(--muted); font-weight: 500; }
  /* 장 상태는 글자 대신 점 하나: 열려 있으면 초록 점, 닫혔으면 없음 (시각·휴장 사유는 상세 창) */
  .ix-state { font-size: 0; flex: none; }
  .ix-state.open::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--greed); }
  .ix-head { align-items: center; }
  .ix-line { margin-top: 0; align-items: baseline; flex-wrap: wrap; row-gap: 0; }
  .ix-price { font-size: 15px; line-height: 17px; white-space: nowrap; }
  .ix-price small { font-size: 10px; }
  .ix-chg { font-size: 11.5px; font-weight: 600; margin-left: auto; }
  @container (max-width: 275px) { .ix { padding: 1px 6px; } .ix-price { font-size: 13.5px; } .ix-chg { font-size: 10.5px; } }

  /* 관심종목·일정·공포탐욕: 오른쪽 칸 하나가 통째로 스크롤 (안쪽에서 또 스크롤하지 않게 다 펼침) */
  .area-side { gap: var(--gap); }
  #tab-card { display: flex; flex-direction: column; flex: 1 0 auto; }
  #side-tabs { display: none; } /* 위 버튼이 대신함 */
  #tab-card > .card-head { justify-content: flex-end; }
  .tab-panel.on { margin-top: 0; }
  .wl-scroll, .cal-scroll { max-height: none; min-height: 0; overflow: visible; padding-right: 0; scrollbar-gutter: auto; }
  /* 카드 머리의 글자 버튼(편집·취소·세부 지표·출처): 글자 13px, 누르는 곳은 둘레로 44px */
  .tab-actions { gap: 14px; }
  #tab-card > .card-head, #fg-card > .card-head { min-height: 30px; } /* 글자 버튼의 누르는 곳이 카드 밖으로 나가 잘리지 않을 만큼 */
  .tab-actions .link-btn, .tab-actions .src { position: relative; font-size: 13px; line-height: 18px; white-space: nowrap; }
  .tab-actions .link-btn::after, .tab-actions .src::after { content: ''; position: absolute; inset: -13px -9px; }
  .tab-actions .save-btn { position: relative; padding: 6px 16px; font-size: 13px; }
  .tab-actions .save-btn::after { content: ''; position: absolute; inset: -7px 0; }
  .card-foot { font-size: 12px; }

  /* 관심종목 (보기): 표 대신 한 종목이 한 묶음. 좁은 칸에서 표로 두면 값 칸들이 폭을 다 가져가 종목 이름이 한 글자만 남았다.
       1줄: 이름 | 현재가 | 등락률     2줄: 코드·수량 (왼쪽), 프리·애프터 가격 (오른쪽)     3줄: 평가손익 (있을 때만)
     2줄의 두 글자는 칸을 나눠 갖지 않고 한 줄을 같이 쓴다 (첫 두 td를 풀어(display: contents) 안의 것을 줄에 직접 놓음) */
  .wl-table:not(.editing), .wl-table:not(.editing) tbody { display: block; }
  .wl-table:not(.editing) thead { display: none; }
  .wl-table:not(.editing) { font-size: 14px; }
  .wl-table:not(.editing) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(54px, auto); align-items: baseline; column-gap: 10px; align-content: center; min-height: 48px; padding: 6px 2px; border-bottom: 1px solid var(--row-line); }
  .wl-table:not(.editing) td { display: block; padding: 0; border: 0; min-width: 0; }
  .wl-table:not(.editing) td:first-child { width: auto; max-width: none; }
  .wl-table:not(.editing) td:empty { display: none; }
  .wl-table:not(.editing) tr.wl-row > td:nth-child(-n+2) { display: contents; }
  .wl-table .wl-name { grid-row: 1; grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wl-table .wl-px { grid-row: 1; grid-column: 2; text-align: right; white-space: nowrap; }
  .wl-table:not(.editing) tr.wl-row > td:nth-child(3) { grid-row: 1; grid-column: 3; }
  .wl-table:not(.editing) tr.wl-row .wl-sym { grid-row: 2; grid-column: 1 / -1; justify-self: start; max-width: 100%; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wl-table:not(.editing) tr.wl-row:has(.wl-ext) td:first-child .wl-sym { max-width: 40%; }
  .wl-table .wl-ext { grid-row: 2; grid-column: 1 / -1; justify-self: end; max-width: 58%; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wl-table .wl-inv { display: none; } /* 수급은 좁은 칸에서 세 줄로 꺾여 뺌 (종목을 누르면 상세 창에 있음) */
  .wl-table:not(.editing) tr.wl-row > td:nth-child(4) { grid-row: 3; grid-column: 1 / -1; font-size: 13px; }
  .wl-table:not(.editing) tr.wl-row > td:nth-child(4) .wl-sym { display: inline; margin-left: 8px; }
  .wl-table:not(.editing) tr.total { min-height: 38px; }
  .wl-table:not(.editing) tr.total td { font-size: 12.5px; }
  .wl-table:not(.editing) tr.total td:nth-child(4) { grid-column: 2 / -1; }
  .wl-table:not(.editing) tr.total .wl-sym { display: inline; margin-left: 8px; font-size: 12px; }
  .wl-table td.wl-empty { grid-column: 1 / -1; padding: 22px 0; }
  .wl-empty .fs-btn { min-height: 44px; padding: 0 16px; font-size: 13px; }
  #wl-table tr.wl-row:hover td { background: none; }

  /* 관심종목 (편집): 히트맵을 잠시 접고 화면 폭을 다 씀 (watchlist.js가 body.wl-editing을 붙임).
     오른쪽 칸 폭(약 280px)에 다섯 칸을 넣으면 입력칸이 37px이라 숫자가 안 보였다.
     검색칸을 맨 위 한 줄에(취소·저장은 그 오른쪽): 자판이 올라와 화면이 150px쯤 남아도 검색칸과 결과가 보이게 */
  body.wl-editing #map-card, body.wl-editing .land-tabs, body.wl-editing #ix-card, body.wl-editing #fg-card { display: none; }
  body.wl-editing .area-side { display: flex; grid-column: 1 / -1; grid-row: 1 / -1; }
  body.wl-editing #tab-card { position: relative; padding: 8px 12px; }
  body.wl-editing #tab-card > .card-head { position: absolute; top: 8px; right: 12px; height: 44px; z-index: 21; }
  body.wl-editing .tab-actions .link-btn { padding: 0 6px; }
  body.wl-editing .tab-actions .save-btn { padding: 9px 20px; font-size: 14px; }
  .wl-add { margin: 0 150px 6px 0; }
  .wl-add input { height: 44px; padding: 0 12px; font-size: 16px; border-radius: 8px; }
  .wl-results { top: 48px; max-height: min(264px, calc(100vh - 70px)); max-height: min(264px, calc(100dvh - 70px)); border-radius: 8px; box-shadow: 0 8px 30px var(--shadow); }
  .wl-results li { align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; }
  .wl-results li span { font-size: 12px; white-space: nowrap; }
  .wl-table.editing { font-size: 14px; }
  .wl-table.editing th { font-size: 12px; padding: 4px 6px; }
  .wl-table.editing td { padding: 4px 6px; }
  .wl-table.editing .wl-sym { font-size: 12px; }
  .wl-table.editing .wl-col-alias { width: 26%; }
  .wl-table.editing .wl-col-num { width: 17%; }
  .wl-table.editing .wl-col-act { width: 152px; }
  .wl-table.editing input, .wl-table.editing input.wl-alias { height: 44px; padding: 0 10px; font-size: 16px; border-radius: 6px; }
  .wl-ord { display: flex; justify-content: flex-end; gap: 4px; }
  .wl-move, .wl-del { width: 44px; height: 44px; margin: 0; padding: 0; font-size: 13px; border-radius: 6px; }
  .wl-del { font-size: 16px; }

  /* 일정: 한 줄 높이를 조금 키움 */
  .cal-day { font-size: 12px; }
  .cal-row { padding: 6px 0; font-size: 13px; }
  .cal-vals, .cal-title .cal-sub { font-size: 12px; }

  #fg-card { display: block; }
  #fg-card h2 { display: none; } /* 위 버튼이 이름을 대신함 (제목과 '세부 지표·CNN'이 한 줄에 안 들어가 꺾였음) */
  #fg-card > .card-head { justify-content: flex-end; }
  #fg-card .tab-actions { white-space: nowrap; }
  .fg-top { flex-wrap: wrap; }
  .gauge { width: 112px; }
  .score { font-size: 32px; }
  .fg-score { width: 62px; }
  .indicators { grid-template-columns: 1fr; margin-top: 6px; }
  .indicators li { grid-template-columns: 8em minmax(24px, 1fr) 22px; }
  .history { height: 150px; }
  #fgh-ranges { flex: 1; } /* 다섯 버튼이 좁은 칸(264px)을 넘지 않게 칸 폭을 똑같이 나눔 */
  #fgh-ranges button { flex: 1 1 0; min-width: 0; padding: 5px 2px; }
  .range-stats { font-size: 12px; }

  /* 상세 창: kit 창처럼 아래에서 올라오고 끌어 내려 닫는다 (UX.md '2. 끌어 내려 닫기', js/detail.js). 손잡이 막대도 보인다.
     왼쪽에 가격·그래프, 오른쪽에 나머지. 머리(이름·기간·✕)와 그래프는 그대로 있고 오른쪽 칸만 스크롤한다:
     창 전체가 스크롤되면 내렸을 때 ✕가 위로 사라져 닫는 단추가 하나도 안 보였다 (2026-11-11 몽키 테스트).
     폭 600 이상에서는 휴대폰(600 미만)의 '아래에서 올라오는 창' 규칙이 안 걸리므로 여기서 다시 적는다 */
  .ix-dlg {
    width: auto; max-width: none; margin: auto calc(12px + var(--sa-r)) 0 calc(12px + var(--sa-l));
    /* 높이를 정해 둔다: 내용에 맡기면 사파리에서 안쪽 칸(스크롤 칸)이 0으로 접힌다 */
    height: calc(100vh - 12px); height: calc(100dvh - 12px); max-height: none; overflow: hidden;
    border-radius: 14px 14px 0 0; border-bottom: 0; animation: sheet-up .22s ease-out; transition: transform .18s ease-out;
  }
  .ix-dlg[open] { display: flex; flex-direction: column; }
  .dlg-grab { display: block; grid-column: 1 / -1; grid-row: 1; width: 40px; height: 5px; border-radius: 5px; background: var(--line); margin: 0 auto 2px; }
  .dlg-grab, .dlg-head { touch-action: none; }
  .dlg-head { flex-wrap: nowrap; }
  .dlg-head .dlg-ranges { order: 0; flex-basis: auto; }
  .dlg-body {
    flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: 16px; padding: 6px 14px 0;
  }
  .dlg-body > .dlg-head, .dlg-body > .dlg-msg { grid-column: 1 / -1; }
  .dlg-body > .dlg-head { grid-row: 2; }
  .dlg-body > .dlg-live { grid-column: 1; grid-row: 3; }
  .dlg-body > .dlg-chart, .dlg-body > .ix-err { grid-column: 1; grid-row: 4; }
  .dlg-body > .dlg-chart { margin-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .dlg-body > .dlg-rest {
    grid-column: 2; grid-row: 3 / span 2; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); scrollbar-width: none;
  }
  .dlg-rest::-webkit-scrollbar { display: none; }
  .dlg-body > .dlg-msg { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .dlg-rest > :first-child { margin-top: 8px; }
  .dlg-head { position: static; margin: 0; padding: 0; min-height: 44px; } /* 여기서는 오른쪽 칸만 스크롤하므로 붙일 필요가 없다 */
  .dlg-x { width: 44px; height: 44px; margin: 0 -8px 0 0; padding: 0; font-size: 20px; }
  .dlg-sym { font-size: 12px; }
  .dlg-price { margin-top: 2px; }
  .dlg-price b { font-size: 22px; }
  .dlg-chart { margin-top: 6px; }
  .dlg-chart svg { height: clamp(90px, calc(100vh - 190px), 280px); height: clamp(90px, calc(100dvh - 190px), 280px); } /* 창 높이 안에 그래프가 다 들어오게 (머리·가격 줄·여백을 뺀 높이) */
  .dlg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dlg-stats dt, .dlg-stats dd small { font-size: 12px; }
  .dlg-note { font-size: 12px; }
  .dlg-links { gap: 0 18px; margin-top: 6px; font-size: 13px; }
  .dlg-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .dlg-add { min-height: 44px; padding: 0 14px; font-size: 13px; }

  /* 로그인·가입: 왼쪽에 이름, 오른쪽에 입력칸 (세로로 쌓으면 가입 칸 다섯 개가 화면 두 배 높이였음).
     가입은 칸을 두 줄로 나란히. 아일랜드·홈 막대 자리는 비움. 입력칸·버튼은 44px */
  .login-scroll { padding: 8px max(16px, var(--sa-r)) max(8px, env(safe-area-inset-bottom, 0px)) max(16px, var(--sa-l)); }
  .login-box { max-width: 620px; display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: 22px; padding: 10px 22px 10px 0; }
  .login-box:has(#signup-form:not([hidden])) { max-width: 780px; }
  .login-box > * { grid-column: 2; }
  .login-box .brand { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; flex-direction: column; justify-content: center; gap: 12px; margin: 0; padding: 0 8px; border-right: 1px solid var(--line); text-align: center; }
  .login-box .brand::before { content: ''; width: 52px; height: 52px; border-radius: 13px; background: url(favicon.svg) center / contain no-repeat; box-shadow: 0 0 0 1px var(--line); }
  .login-tabs { margin-bottom: 6px; }
  .login-tabs button { min-width: 64px; min-height: 44px; font-size: 14px; }
  .login-tabs button::after { inset: 0; } /* 이미 44px */
  .login-form { gap: 8px; }
  .login-form label, .login-form .pw-field { font-size: 13px; }
  .login-form label small { font-size: 12px; }
  .login-form input { height: 44px; padding: 0 12px; border-radius: 7px; }
  .login-form .save-btn { min-height: 44px; margin-top: 6px; border-radius: 7px; }
  #signup-form:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: end; }
  #signup-form label { display: block; }
  #signup-form label input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
  #signup-form .save-btn { margin-top: 0; }
  #signup-form #invite-field[hidden] ~ .save-btn { grid-column: 1 / -1; } /* 초대 링크로 와서 코드 칸이 없으면 버튼이 한 줄 전체 */
  .login-msg { margin-top: 4px; font-size: 13px; }
  /* 가입 신청 뒤 안내(.login-pending): 가로용 두 칸 배치는 공통 부품(kit.css 가로 블록의 .ak-pending)이 한다. 여기서 덮어쓰면 제목과 안내가 겹친다 */

  /* 시세 경보 띠: 막대를 가리지 않게 그 옆에서, 작게 */
  .toasts { left: calc(var(--rail) + var(--sa-l) + 8px); bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  html.island-right .toasts { left: 8px; }
  .toast { min-width: 0; max-width: 300px; padding: 6px 12px; font-size: 13px; }
}

/* ---------- 화면 켜 두기 (js/keep-awake.js): 휴대폰 가로 모드에서만 버튼이 보임 ----------
   켜 둔 동안(html.keep-awake)은 화면 자국(번인)을 막으려고: 화면 전체를 3분마다 2px씩 옮기고(--aw-x·--aw-y),
   늘 같은 자리에 있는 글자는 흐리게, 10분 동안 손대지 않으면(html.awake-dimmed) 화면 전체를 어둡게.
   옮기는 것은 막대의 버튼·로고·시각과 대시보드만: 막대 전체를 옮기면 그 안의 알림 창(fixed)이 막대를 기준으로 떠서 자리가 틀어진다 */
.topbar .awake-btn { display: none; }
.awake-dim { position: fixed; inset: 0; z-index: 2147483646; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.5s ease; }
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .topbar .awake-btn:not([hidden]) { display: grid; }
  .topbar .awake-btn.on { color: var(--accent); background: rgba(var(--accent-rgb), .14); }
  html.keep-awake .dash, html.keep-awake .topbar .brand, html.keep-awake .clock, html.keep-awake .topbar .fs-btn {
    translate: var(--aw-x, 0) var(--aw-y, 0); transition: translate 2s ease;
  }
  html.keep-awake .topbar .brand, html.keep-awake .clock, html.keep-awake .topbar .fs-btn:not(.on),
  html.keep-awake .land-tabs, html.keep-awake .ix-name { opacity: .6; }
  html.awake-dimmed .awake-dim { opacity: .5; }
  html.awake-dimmed .ix-dlg { filter: brightness(.5); } /* 상세 창은 맨 위 층이라 어둡게 덮는 판보다 위에 뜬다 */
}
@media (prefers-reduced-motion: reduce) {
  html.keep-awake .dash, html.keep-awake .topbar .brand, html.keep-awake .clock, html.keep-awake .topbar .fs-btn { transition: none; }
}

/* ---------- 터치 기기의 입력칸: 폭과 상관없이 16px (아이폰이 누를 때 화면을 키우지 않게. UX.md '6. 입력칸') ----------
   더 센 선택자로 작게 정한 칸(관심종목 검색·편집 표·알림 기준·계정 칸)도 함께 올린다. 맨 아래에 둬서 위의 어떤 블록보다 나중에 걸린다 */
@media (pointer: coarse) {
  input, select, textarea, .wl-add input, .wl-table input, .wl-table.editing input, .alert-step input, .acct-form input, .login-form input { font-size: 16px; }
}