/*!
 * 주식고(jusikgo) — 서학프리미엄 대시보드 스타일
 * Copyright (c) 2026 jusikgo. All Rights Reserved.
 * 무단 복제 및 재배포를 금합니다.
 */

/*
 * 김프고와 뼈대(폭·레일·광고자리)는 같게 두되 색은 일부러 갈랐다.
 * 두 사이트가 같은 손에서 나온 것은 맞지만, 화면을 보는 사람이
 * 어느 사이트에 있는지 한눈에 알아야 하기 때문이다.
 *
 *  - 김프고: 검정 + 라임, 오름=초록 / 내림=빨강 (코인 관례)
 *  - 주식고: 남색 + 앰버, 오름=빨강 / 내림=파랑 (국내 증시 관례)
 *
 * 오르내림 색은 취향이 아니라 관례다. 국내 주식 화면에서 초록이 오름이면
 * 사람들이 값을 거꾸로 읽는다.
 */
:root {
    --bg: #0a0e17;
    --surface: #121826;
    --surface-2: #1b2333;
    --surface-3: #0e1420;      /* 입력칸처럼 한 단계 더 눌린 면 */
    --border: #26304a;
    --border-strong: #3a4766;  /* 마우스를 올렸을 때 드러나는 테두리 */
    --border-soft: #1b2334;    /* 표의 줄과 줄 사이 — 있는 줄 모르게 옅다 */
    --text: #f2f5fa;
    --text-sub: #ccd4e2;
    --label: #9aa6bd;
    /*
     * 곁들이 글자. 이전 값(#6f7c94)은 판 바탕에서 대비가 4.21로
     * 접근성 기준(4.5) 아래였다. 배당수익률처럼 실제 값을 담은 칸에도
     * 쓰이는 색이라 안 보이면 곤란하다. 5.08까지 올렸다 —
     * --label(7.23)보다는 여전히 옅어 주·부 구분은 남는다.
     */
    --muted: #7b8aa4;
    --accent: #ffb648;
    --accent-soft: rgba(255, 182, 72, 0.14);

    --up: #ff5a5a;             /* 오름 = 빨강 */
    --down: #4d8bff;           /* 내림 = 파랑 */
    --on-solid: #1a1200;       /* 색을 꽉 채운 딱지 위에 얹는 글자 */

    --tint: rgba(255, 255, 255, 0.04);
    --shadow: rgba(0, 0, 0, 0.5);

    /*
     * 모서리.
     *
     * 시안(stockgohome.html)을 입히면서 셋으로 나눴다. 전부 4px 로 각지게
     * 두었더니 판·표·단추가 한 덩어리로 보여서, 무엇이 담는 그릇이고 무엇이
     * 눌리는 것인지 눈으로 안 갈렸다.
     *   card — 판·표를 감싸는 큰 그릇
     *   sm   — 단추·입력칸처럼 손이 닿는 것
     *   radius — 딱지처럼 작은 것
     */
    --radius: 4px;
    --radius-sm: 8px;
    --radius-card: 12px;

    /* 좌 300 + 간격 20 + 본문 1000 + 간격 20 + 우 300.
       좌우 레일은 애드센스 300×600 규격에 맞춘 폭이다. */
    --content-width: 1000px;
    --rail-width: 300px;
    --gutter: 20px;
    --page-pad: 16px;
    --shell-width: calc(
        var(--content-width) + var(--rail-width) * 2 +
        var(--gutter) * 2 + var(--page-pad) * 2
    );
}

/*
 * 밝은 테마. 기본은 어두운 화면이고 data-theme="light"일 때만 갈아끼운다.
 * 오르내림 색은 뜻이 흔들리면 안 되므로 밝은 바탕에서 읽히게만 눌러 쓴다.
 */
:root[data-theme="light"] {
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #eaeef5;
    --surface-3: #f7f9fc;
    --border: #dde3ec;
    --border-strong: #b3bccb;
    --border-soft: #eef1f6;
    --text: #101724;
    --text-sub: #3a4658;
    --label: #5a6678;
    /*
     * 2026-08-31 에 다시 재 보니 흰 바탕(4.59)은 넘는데 **눌린 면
     * (`--surface-2` #eaeef5) 위에서 4.31** 로 모자랐다. 한 곳만 보고
     * 잡았던 값이다. 네 바탕을 다 재서 5.00 으로 올렸다.
     */
    --muted: #5c6675;
    /*
     * 앰버는 흰 바탕에서 안 보여 눌러 쓴다. 처음 잡은 #b06b00은 흰 판에서
     * 대비가 4.24로 기준(4.5) 아래였다. 강조색은 링크·소제목·딱지 등
     * 사이트 곳곳에 쓰여서 한 곳이 모자라면 수십 곳이 같이 모자란다.
     * 네 가지 바탕(흰 판·연한 판·회색 칸·앰버 칸) 모두에서 넘도록 골랐다.
     */
    --accent: #9c5d00;
    /* 이 칸 위에 앰버 글자를 얹으므로 진하면 글자가 묻힌다 (0.12일 때 4.48) */
    --accent-soft: rgba(156, 93, 0, 0.07);
    /* 눌린 면 위에서 4.17 이었다. 네 바탕 최소 4.83 으로 눌러 잡았다. */
    --up: #c62828;
    --down: #1f5fd0;
    --on-solid: #ffffff;
    --tint: rgba(0, 0, 0, 0.03);
    --shadow: rgba(0, 0, 0, 0.12);
}

/*
 * 베이지 테마 — 2026-08-31
 *
 * 흰 화면이 눈에 시려서 오래 못 보겠다는 사람이 있다. 종이 같은 따뜻한
 * 바탕을 하나 더 둔다.
 *
 * ─ 바탕만 바꾸면 안 된다 ──────────────────────────────────────────────
 * 바탕을 누런 쪽으로 옮기면서 테두리·흐린 글자를 밝은 테마 것 그대로 두면
 * **그것들만 파랗게 떠 보인다.** 회색은 중립이 아니라 그 자체로 찬 색이다.
 * 그래서 테두리·이름표·곁들이 글자까지 같은 폭으로 따뜻한 쪽으로 옮겼다.
 *
 * ─ 카드는 바탕보다 밝게 ───────────────────────────────────────────────
 * `--surface` 를 바탕보다 밝게 둔다. 그래야 판이 바탕 위에 떠 보인다.
 * 밝은 테마의 흰 카드가 하는 일과 같다.
 *
 * ─ 강조색 ─────────────────────────────────────────────────────────────
 * 밝은 테마의 `#9c5d00` 을 그대로 쓰면 누런 바탕에서 대비가 모자란다.
 * 한 단계 더 눌러 잡았다. 아래 대비값은 브라우저에서 실제로 잰 것이다.
 */
:root[data-theme="beige"] {
    --bg: #ece2cc;
    --surface: #f9f3e4;        /* 바탕보다 밝게 — 판이 떠 보이게 */
    --surface-2: #e3d8c0;
    --surface-3: #f4ecda;      /* 입력칸 */
    --border: #d2c3a4;
    --border-strong: #a8977a;
    --border-soft: #e0d5bc;
    --text: #241f14;
    --text-sub: #443c2a;
    --label: #5f5540;
    --muted: #655a43;
    /*
     * 아래 셋은 브라우저에서 재서 골랐다. 처음 잡은 값은 눌린 면
     * (`--surface-2` #e3d8c0) 위에서 기준(4.5)에 못 미쳤다 —
     * 앰버 4.11, 오름빨강 3.98. 누런 바탕은 흰 바탕보다 밝아서 같은 색도
     * 대비가 더 적게 나온다.
     */
    --accent: #7a5003;         /* 네 바탕 최소 4.99 */
    --accent-soft: rgba(122, 80, 3, 0.09);
    --up: #a81f1f;             /* 네 바탕 최소 5.15 */
    --down: #1b52b8;           /* 네 바탕 최소 5.04 */
    --on-solid: #fffaf0;
    --tint: rgba(90, 70, 30, 0.05);
    --shadow: rgba(90, 70, 30, 0.16);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Malgun Gothic", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    /*
     * 한글 줄바꿈.
     *
     * 브라우저 기본값은 한글을 '아무 글자 사이에서나' 자른다. 영어는 낱말
     * 사이에 띄어쓰기가 있어 거기서 끊기지만, 한글은 글자 하나하나가 끊을 수
     * 있는 자리로 취급되기 때문이다. 그래서 "볼 수 있습니 / 다."처럼
     * 낱말이 반으로 갈린다. 읽는 사람은 다음 줄로 눈을 옮긴 뒤에야
     * 무슨 말인지 알게 된다.
     *
     * keep-all은 띄어쓰기에서만 끊게 한다. 다만 이것만 두면 띄어쓰기 없는
     * 아주 긴 덩어리(긴 URL, 종목 코드가 붙은 문자열)가 칸을 밀어내므로
     * overflow-wrap으로 그때만 강제로 끊게 둔다.
     */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 숫자는 자리가 흔들리면 읽기 나쁘다. 폭이 고정된 숫자로 쓴다. */
.num, table.rows td, .summary-item strong { font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }

/* --- 상단 요약 바 ---------------------------------------------------- */

/*
 * 시안의 티커 띠를 입혔다.
 *
 * 전에는 '환율 1,383.30 -0.27%' 가 한 줄에 같은 크기로 붙어 있어서 이름과
 * 값이 안 갈렸다. 이름을 작고 옅게, 값을 크게 두고 칸 사이를 세로줄로
 * 나눈다. 눈이 값부터 잡는다.
 */
.summary-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.summary-inner {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 0 var(--page-pad);
    display: flex;
    gap: 0;
    align-items: center;
    flex-wrap: wrap;
}

.summary-item {
    display: flex;
    gap: 7px;
    align-items: baseline;
    padding: 9px 18px 9px 0;
    margin-right: 18px;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.summary-item .label { color: var(--label); font-size: 11px; font-weight: 600; }
.summary-item strong { font-weight: 600; font-size: 14px; }
.summary-item .sub { font-size: 11.5px; font-weight: 600; }

/* 오른쪽 끝(동시접속자)에는 칸막이를 두지 않는다 — 끝이라 나눌 것이 없다 */
.summary-right {
    margin-left: auto;
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

.status {
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
}
.status[data-state="live"] { color: var(--up); border-color: var(--up); }
.status[data-state="lost"] { color: var(--muted); }

/* --- 헤더 ------------------------------------------------------------ */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

/*
 * 로고 · 탭 · 오른쪽 단추를 세 칸으로 나눈다.
 *
 * flex에 margin-left:auto로 밀면 탭이 로고 바로 옆에 붙는다. 로고와 오른쪽
 * 단추의 폭이 다르기 때문이다. 양옆을 같은 몫(1fr)으로 잡아야 탭이 화면
 * 한가운데에 온다. 양옆 내용이 길어져도 가운데는 흔들리지 않는다.
 */
.header-inner {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 0 var(--page-pad);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    height: 56px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text);
    flex-shrink: 0;
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-solid);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: -0.5px;
    flex: none;
}

.nav { display: flex; gap: 2px; height: 100%; align-items: stretch; justify-content: center; }

/*
 * 탭. 시안처럼 굵고 크게 두고, 지금 자리만 앰버 밑줄로 짚는다.
 * 전에는 13px 보통 굵기라 오른쪽 '문의하기·로그인'과 무게가 같았다.
 */
.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
    border-bottom: 2.5px solid transparent;
    white-space: nowrap;
    transition: color 0.12s;
}
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--text); border-bottom-color: var(--accent); }

.nav-two-line { flex-direction: column; justify-content: center; gap: 0; line-height: 1.15; }
.nav-top { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 0.5px; }
.nav-main { font-size: 14px; }

/* 오른쪽 칸 안에서 오른쪽 끝으로 */
.header-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.header-link { color: var(--muted); font-size: 13px; }
.header-link.disabled { cursor: default; opacity: 0.55; }

.theme-toggle {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-sub);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    gap: 5px;
    align-items: center;
    font-family: inherit;
}
.theme-toggle:hover { border-color: var(--border-strong); }
/*
 * 지금 테마의 **바탕색**을 담는 동그라미. 색은 app.js 가 넣는다
 * (테마 목록이 거기 한 곳에만 있어야 고르개가 거짓말을 안 한다).
 *
 * 테두리를 두른다 — 어두운 테마의 동그라미는 거의 검정이라 단추 바탕에
 * 묻히고, 베이지는 단추 바탕과 비슷해서 역시 안 보인다.
 */
.theme-icon {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); display: inline-block;
    border: 1px solid var(--border-strong);
    flex: none;
}

/* --- 3열 껍데기 ------------------------------------------------------ */

.page-shell {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 20px var(--page-pad) 48px;
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--rail-width);
    gap: var(--gutter);
    align-items: start;
}

.rail-sticky { position: sticky; top: 76px; }
.content { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* 화면이 좁으면 광고 레일부터 접는다. 본문이 먼저다. */
@media (max-width: 1500px) {
    .page-shell { grid-template-columns: minmax(0, 1fr) var(--rail-width); }
    .rail-left { display: none; }
}
@media (max-width: 1100px) {
    .page-shell { grid-template-columns: minmax(0, 1fr); }
    .rail-right { display: none; }
}

/* --- 광고 자리 ------------------------------------------------------- */

.ad-slot {
    background: var(--surface-3);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
.ad-rail { height: 600px; }
.ad-banner { min-height: 250px; }

/* --- 판 ------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 20px;
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
/*
 * 판 제목 앞에 앰버 막대를 하나 세운다. 판이 여럿 쌓이는 화면에서
 * 어디서부터가 새 덩어리인지 눈이 먼저 잡는다.
 */
.panel-head h2 {
    margin: 0;
    font-size: 16px;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
    line-height: 1.2;
}
.panel-note { color: var(--muted); font-size: 12px; }

/* --- 첫 화면 설명 ---------------------------------------------------- */

.hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 20px 22px;
}
/*
 * 화면마다 맨 위 제목만 h1 이고 나머지는 h2 다. 검색과 읽기 프로그램은
 * h1 을 "이 화면의 주제"로 읽는다. 첫 화면은 표가 위에 오고 설명이 아래로
 * 내려가 있어서, 표 위의 제목이 h1 이고 아래 설명이 h2 다.
 * 보이는 모습은 둘이 같아야 하므로 여기서 함께 묶는다.
 */
.hero h1, .hero > h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.5px; }
/*
 * 제목 옆에 붙는 업계 표준 용어.
 *
 * '서학프리미엄'은 우리가 만든 말이고, 증권사·거래소가 쓰는 말은 '괴리율'이다.
 * 사람들이 검색하는 말도 그쪽이다. 우리 말만 걸어 두면 찾아올 길이 없어서
 * 제목에 같이 적는다. 제목보다는 작게, 그러나 읽히게 둔다.
 */
.hero-alias {
    font-size: 15px;
    font-weight: 600;
    color: var(--label);
    letter-spacing: 0;
    white-space: nowrap;
}

.hero-lead { margin: 0; color: var(--text-sub); max-width: 68ch; }
.hero-lead strong { color: var(--accent); }

.hero-how { margin-top: 14px; font-size: 13px; }
.hero-how summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    width: fit-content;
}
.how-steps { margin: 10px 0 0; padding-left: 20px; color: var(--text-sub); }
.how-steps li { margin-bottom: 7px; }
.how-steps b { color: var(--text); }
.how-caveat {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--surface-3);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 12px;
}

/*
 * 설명 글은 한 문장씩 끊는다 — 2026-08-29
 *
 * 전에는 문장 서넛을 한 덩이로 붙여 놓았다. 폰에서 읽으면 마침표가 줄
 * 한가운데 찍히고 그 자리에서 다음 문장이 곧바로 이어져 어디서 끊어
 * 읽어야 할지 모른다. 문장마다 줄을 바꾸면 마침표가 늘 줄 끝에 온다.
 *
 * 상자(.how-caveat)는 하나로 두고 안에서만 나눈다. 문단마다 상자를
 * 만들면 상자가 넷이 된다.
 */
.hero-lead > p,
.how-caveat > p {
    margin: 0 0 4px;
}
.hero-lead > p:last-child,
.how-caveat > p:last-child { margin-bottom: 0; }

/* 상자가 둘 이어지면 사이를 좁혀 한 덩이로 보이게 */
.how-caveat + .how-caveat { margin-top: 6px; }

/* --- 지수 묶음 ------------------------------------------------------- */

.groups { display: flex; flex-direction: column; gap: 22px; }

.group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.group-head h3 { margin: 0; font-size: 15px; }
.group-index { color: var(--label); font-size: 12px; }
.group-note { color: var(--muted); font-size: 11px; margin-left: auto; }

table.rows { width: 100%; border-collapse: collapse; font-size: 13px; }

/*
 * 제목줄에 바탕을 깔았다(시안). 표가 길어지면 제목이 어디까지가 제목인지
 * 안 보였는데, 한 단계 밝은 면을 깔면 몸통과 갈린다.
 */
table.rows th {
    text-align: right;
    background: var(--surface-2);
    color: var(--label);
    font-weight: 700;
    font-size: 11px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.rows th:first-child { text-align: left; }

/*
 * 칸 사이를 넓히고 줄 경계를 옅게 했다. 전에는 9px 에 진한 선이라
 * 열두 줄만 쌓여도 격자무늬처럼 보였다.
 */
table.rows td {
    padding: 12px;
    border-bottom: 1px solid var(--border-soft, var(--border));
    text-align: right;
    white-space: nowrap;
}
table.rows tbody tr:last-child td { border-bottom: 0; }
table.rows td:first-child { text-align: left; white-space: normal; }
table.rows tr:hover td { background: var(--tint); }

.etf-name { font-weight: 600; }
/*
 * 이름 옆에 붙는 곁들이 정보(종목코드·운용사·통화·우선주 이름).
 *
 * --muted에 11px이면 어두운 바탕에서 대비가 4.2:1까지 떨어져 거의 안 보인다.
 * 한 단계 밝은 --label로 올리면 7.2:1이 된다. 본문보다는 여전히 옅어서
 * 주가 되는 이름과 구분은 그대로 남는다.
 */
.etf-code {
    color: var(--label);
    font-size: 11.5px;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

.tag {
    display: inline-block;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid var(--border-strong);
    color: var(--label);
}
.tag-cheap { background: var(--accent); color: var(--on-solid); border-color: var(--accent); }

.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--muted); }

/* 대표 숫자는 다른 열보다 크게 둔다. 무엇을 보러 온 화면인지 보이도록. */
td.premium { font-size: 15px; font-weight: 700; }
td.premium[data-grade="flat"] { color: var(--text-sub); }
td.premium[data-grade="warm"] { color: var(--accent); }
td.premium[data-grade="hot"] { color: var(--up); }
td.premium[data-side="under"][data-grade="warm"],
td.premium[data-side="under"][data-grade="hot"] { color: var(--down); }
td.premium[data-grade="none"] { color: var(--muted); font-weight: 400; }

.grade-word { display: block; font-size: 10px; font-weight: 600; color: var(--muted); }

/*
 * .grade-word는 원래 대표 숫자 아래에 '쌈/비쌈'을 적으려고 만든 것이라
 * 회색이 기본이다. 그런데 우선주 화면이 값 아래 등락률을 적는 데 이것을
 * 같이 쓰면서, 뒤에 온 회색이 오르내림 색을 덮어 +3.87%도 -5.73%도
 * 전부 회색으로 나왔다. 방향이 붙은 것만 색을 되돌린다.
 */
.grade-word.up { color: var(--up); }
.grade-word.down { color: var(--down); }

/* --- 준비 중 --------------------------------------------------------- */

.placeholder { text-align: center; padding: 64px 20px; }
.placeholder h1 { margin: 0 0 12px; font-size: 20px; }
.placeholder-note { color: var(--text-sub); max-width: 52ch; margin: 0 auto 18px; }
.placeholder-tag {
    display: inline-block;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 999px;
    font-size: 12px;
}

.loading { color: var(--muted); padding: 24px 0; text-align: center; }

.disclaimer {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
    margin: 4px 0 0;
}
.disclaimer > p { margin: 0 0 5px; }
.disclaimer > p:last-child { margin-bottom: 0; }

/* --- 좁은 화면 ------------------------------------------------------- */

@media (max-width: 720px) {
    /* 좁은 화면에서는 가운데 정렬을 포기한다. 세 칸을 유지하면 탭이 눌린다 */
    /*
     * 머리·탭·소제목은 **차림새**다 — 2026-08-30
     *
     * 로고 줄과 탭과 갈래 칩과 쪽 제목이 합해서 169px, 폰 한 판의 21% 를
     * 먹고 있었다. 매일 오는 사람은 값을 보러 오지 로고를 보러 오지 않는다.
     * 위 티커는 키우고 이쪽은 줄인다.
     */
    .header-inner {
        display: flex;
        height: auto;
        padding: 5px 8px;
        flex-wrap: wrap;
        gap: 4px;
    }
    .logo { font-size: 17px; gap: 7px; }
    .logo-mark { width: 22px; height: 22px; font-size: 9.5px; }
    .nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
    .header-actions { margin-left: auto; }

    /*
     * 판 안여백을 14 → 10 으로. 바깥 page-shell 8 과 테두리 1 을 더하면
     * 한쪽에 19px 다 (고치기 전에는 27px 였다).
     */
    .panel { padding: 10px; }

    /*
     * 여기 있던 `min-width: 560px` 를 걷어냈다 — 2026-08-29
     *
     * 그 값은 '좁으면 표를 옆으로 밀어 본다'는 뜻이었다. 열을 접으면 비교가
     * 안 된다고 봤기 때문이다. 그런데 360px 에서 재 보니 그게 아니었다.
     *
     *   pref-table   573px  →  304px 그릇
     *   adr-table    786px
     *   screen-table 797px
     *   choose-table 828px
     *
     * 회사 이름 칸이 한 글자 폭으로 눌려 '삼/성/전/자' 로 세로로 쌓였다.
     * 옆으로 밀어야 보이는 표는 안 보이는 표다. 전부 카드로 접는다(아래).
     */
    .table-scroll { overflow-x: visible; }
}

/* --- 서학계산기 ------------------------------------------------------ */

/*
 * 입력칸을 세 묶음으로 나눈다(공통 / 국내 / 미국). 한 줄로 죽 늘어놓으면
 * 어느 값이 어느 쪽 계산에 쓰이는지 알 수 없다.
 */
.calc-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/*
 * `fieldset.` 을 붙인다 — 계산기 **결과표**의 덩어리 제목줄도 `tr.calc-group`
 * 이라 이름이 겹친다. 그냥 `.calc-group` 으로 두면 표의 그 줄까지 세로 flex
 * 가 되어 `<th colspan>` 이 표 밖으로 나온다. 눈에 잘 안 띄었을 뿐 버그였다.
 */
fieldset.calc-group {
    margin: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.calc-group legend {
    padding: 0 6px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

/*
 * 라벨을 flex 로 두면 안 된다 — 2026-08-29
 *
 * `금액 <span class="unit">원</span>` 처럼 글 다음에 딱지가 오는 라벨이 있다.
 * flex-direction: column 이면 글('금액')과 span('원')이 **각각 항목이 되어
 * 세로로 쌓인다.** 그래서 라벨이 두 줄이 되고, 나란히 놓은 옆 칸과 입력칸
 * 높이가 어긋났다.
 *
 * 그냥 블록으로 둔다. 글과 딱지는 한 줄로 흐르고, 입력칸만 block 이라
 * 다음 줄로 내려간다.
 */
.calc-group label {
    display: block;
    font-size: 12px;
    color: var(--label);
    min-width: 0;
}
.calc-group label > input { display: block; margin-top: 3px; }

.calc-group .unit { color: var(--muted); font-size: 11px; }

/*
 * 입력칸 서식 — 2026-08-29 에 넓혔다
 *
 * 전에는 `input[type="number"]` 에만 걸려 있었다. 그런데 금액칸은
 * `type="text" data-money`(쉼표를 넣으려고)이고 시점칸은 `type="month"` 다.
 * 그 둘은 서식이 하나도 안 걸려 브라우저 기본 흰 상자로 나왔다.
 * 어두운 화면에 흰 상자가 세 개 떠 있었다.
 */
.calc-group input:not([type="radio"]):not([type="checkbox"]) {
    width: 100%;
    padding: 7px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 0;
    /* 나란히 놓은 칸끼리 높이를 맞춘다 — month 칸이 달력 단추 탓에 2px 높다 */
    height: 34px;
    box-sizing: border-box;
}
.calc-group input:not([type="radio"]):not([type="checkbox"]):focus {
    outline: none;
    border-color: var(--accent);
}
.calc-group input:not([type="radio"]):not([type="checkbox"]):disabled {
    color: var(--muted);
    background: var(--surface-2);
}
/* 글자를 넣는 칸은 왼쪽에서 시작한다. 오른쪽 정렬은 숫자에만 맞는다. */
.calc-group input[type="text"]:not([data-money]) {
    text-align: left;
    font-variant-numeric: normal;
}
.calc-group input::placeholder { color: var(--faint, var(--muted)); }

/*
 * 달력 단추가 어두운 화면에서 까맣게 묻힌다. 밝기를 뒤집어 띄운다.
 * (밝은 테마에서는 원래대로 둔다)
 */
/*
 * 어두운 테마에서만. `:not([data-theme="light"])` 로 두면 **베이지에도
 * 걸린다** — 밝은 바탕에서 아이콘 밝기를 뒤집으면 안 보인다.
 * 밝은 것 둘을 다 뺀다.
 */
:root:not([data-theme="light"]):not([data-theme="beige"]) .calc-group input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.55);
}

/* 고르는 칸은 동그라미와 글이 한 줄이라 가로 flex 로 되돌린다 */
.calc-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    color: var(--text-sub);
    cursor: pointer;
}
.calc-check > input { display: inline-block !important; margin-top: 0 !important; }
.calc-check input { accent-color: var(--accent); }

.mini-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-sub);
    border-radius: var(--radius);
    padding: 3px 9px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.mini-btn:hover { border-color: var(--border-strong); color: var(--text); }

/* 결론 한 줄. 표를 다 읽지 않아도 답이 보여야 한다. */
.calc-verdict {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 15px;
    color: var(--text);
}
.calc-verdict b { color: var(--accent); }

/* 결과 표는 첫 열이 이름이라 왼쪽, 나머지는 숫자라 오른쪽 */
table.calc-result td:first-child,
table.calc-result th:first-child { text-align: left; color: var(--label); }
table.calc-result tr.strong td { font-weight: 700; color: var(--text); }
table.calc-result tr.strong td:first-child { color: var(--text); }
table.calc-result tr.dim td { color: var(--text-sub); }

/* 설명용 비교표는 값이 아니라 글이라 왼쪽으로 붙인다 */
table.compare-note td, table.compare-note th { text-align: left; white-space: normal; }
table.compare-note b { color: var(--accent); }

/* 묶음 머리에 붙는 통화 딱지 */
.group-fx {
    color: var(--label);
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
}

@media (max-width: 900px) {
    .calc-form { grid-template-columns: minmax(0, 1fr); }
}

/*
 * 폰에서는 묶음 안에 입력칸을 둘씩 놓는다 — 2026-08-30
 *
 * 한 줄에 하나씩 쌓았더니 칸 열둘이 세로로 늘어서 계산기 폼만 화면 두 판이
 * 됐다. 칸 하나가 300px 를 다 쓸 이유가 없다 — 들어가는 것은 숫자다.
 *
 * 고르는 칸(환헤지·종합과세)과 넓은 칸(종목 찾기)은 줄을 통째로 쓴다.
 */
@media (max-width: 720px) {
    /*
     * `fieldset.` 을 반드시 붙인다 — 계산기 **결과표**의 덩어리 제목줄도
     * `tr.calc-group` 이라 이름이 겹친다. 그냥 `.calc-group` 으로 쓰면
     * 표 안의 줄에까지 격자와 안여백이 걸린다.
     */
    fieldset.calc-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px 8px;
        padding: 8px 10px 10px;
    }
    fieldset.calc-group legend { padding: 0 4px; }
    fieldset.calc-group .calc-check,
    fieldset.calc-group .bt-wide,
    fieldset.calc-group .bt-picks,
    fieldset.calc-group .bt-chosen,
    fieldset.calc-group .bt-modes,
    fieldset.calc-group .bt-two,
    fieldset.calc-group .bt-quick { grid-column: 1 / -1; }

    /* 360px 에 여섯 개가 두 줄로 앉는다. 더 줄이면 글자가 읽히지 않는다. */
    .bt-quick { gap: 3px; margin-top: 6px; }
    .bt-quick button { padding: 4px 7px; font-size: 10.5px; }
    /*
     * 이름과 칸을 한 줄에 — 2026-08-30
     *
     * 이름이 칸 위에 따로 놓여 한 칸이 두 줄이었다. 두 칸씩 여섯 줄이면
     * 열두 줄 높이다. 옆에 붙이면 여섯 줄로 끝난다.
     */
    /*
     * 이름은 늘 윗줄, 입력칸은 늘 아랫줄 — 2026-08-30
     *
     * 이름 길이에 맡겨 두면 짧은 것은 칸과 한 줄에 눕고 긴 것만 접힌다.
     * 나란한 두 칸이 서로 다른 모양이 된다.
     *
     *                  매매수수료 편도 %      ← 혼자 윗줄에 뜬 이름
     *     총보수 연 % [0.0068]  [0.015]
     *
     * 입력칸을 아래로 내리는 것만으로는 이름줄이 어긋난 채 남는다.
     * **모든 칸을 두 줄로 못박는다.** `환전수수료 편도 %`·`살 때 환율`
     * 처럼 이미 접혀 있던 줄이 다수라, 통일하면 오히려 눈에 익다.
     * 칸 높이는 어차피 48px 로 늘어나 있어 세로로 더 길어지지도 않는다.
     */
    fieldset.calc-group label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: flex-start;
        gap: 3px 4px;
        font-size: 10.5px;
    }
    fieldset.calc-group .unit { font-size: 9.5px; }
    /*
     * `:not()` 둘을 그대로 달아야 한다 — 위의
     * `.calc-group input:not([type=radio]):not([type=checkbox])` 가 (0,3,1)
     * 이라 `min-width: 0` 이 이긴다. 여기도 셋을 채워 (0,3,3) 으로 만든다.
     */
    fieldset.calc-group label > input:not([type="radio"]):not([type="checkbox"]) {
        display: block;
        margin: 0;
        min-width: 0;
        /* `100%` 바탕폭이 이름줄과 저를 갈라놓는다 — 늘 둘째 줄로 간다. */
        flex: 1 0 100%;
        padding: 5px 5px;
        height: 28px;
        font-size: 11px;
        /*
         * '2,500,000' 이 61px 칸에서 잘려 나갔다. 값이 잘리느니 이름이
         * 접히는 편이 낫다 — 이름은 두 줄이어도 다 읽히지만 값은 못 읽는다.
         */
        min-width: 72px;
    }
    /* 고르는 칸(라디오·체크)은 원래대로 */
    fieldset.calc-group .calc-check > input { flex: none; height: auto; }
}

/* --- 설명 펼침 안쪽 ---------------------------------------------------- */

/*
 * 처음 온 사람이 읽는 자리다. 글이 길어질 수밖에 없어서 소제목으로 끊어 준다.
 * 한 덩어리로 두면 아무도 안 읽는다.
 */
.how-title {
    margin: 16px 0 6px;
    font-size: 13px;
    color: var(--text);
}
.how-title:first-of-type { margin-top: 12px; }

.how-text {
    margin: 0;
    color: var(--text-sub);
    max-width: 72ch;
    line-height: 1.65;
}
.how-text b { color: var(--text); }

/*
 * 설명표. 내용만큼만 넓어지되 칸을 넘지는 않는다.
 * (좁은 화면에서 이 표를 밀어내던 min-width는 위 미디어쿼리에서 뺐다)
 */
table.how-table { width: auto; max-width: 100%; margin: 6px 0 0; }
table.how-table td { text-align: left; white-space: normal; color: var(--text-sub); }
table.how-table td:first-child { width: 80px; color: var(--accent); }

/* 실제 숫자를 넣은 보기. 말로 열 번 설명하는 것보다 한 줄이 낫다. */
.how-example {
    margin: 8px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    overflow: hidden;
}
.how-example-head {
    padding: 7px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
.how-example-list { margin: 0; padding: 10px 12px; list-style: none; }
.how-example-list li {
    display: flex;
    gap: 12px;
    padding: 5px 0;
    align-items: baseline;
    flex-wrap: wrap;
}
.how-example-list li + li { border-top: 1px solid var(--border); }
.ex-label {
    flex: 0 0 190px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ex-label b { color: var(--accent); }
.ex-note { flex: 1 1 240px; color: var(--muted); font-size: 12px; }

@media (max-width: 720px) {
    .ex-label { flex-basis: 100%; }
}

/* --- 경고 띠 --------------------------------------------------------- */

/*
 * 값이 틀렸을 수 있다는 사실은 화면 맨 위에서 말해야 한다.
 * 표 아래 작은 글씨로 적으면 아무도 안 읽고, 그건 안 적은 것과 같다.
 */
.warn-bar {
    padding: 11px 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: 12.5px;
    line-height: 1.6;
}
.warn-bar b { color: var(--accent); }

/* NAV 칸 밑에 붙는 기준일. 시세와 날짜가 다르면 눈에 띄게 한다. */
.nav-date {
    display: block;
    font-size: 10px;
    color: var(--muted);
    font-weight: 400;
}
.nav-date.stale { color: var(--accent); }

/* --- 종목 고르기 ------------------------------------------------------ */

.assume-form {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.assume-form label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--label);
    min-width: 150px;
}
.assume-form .unit { color: var(--muted); font-size: 11px; }
.assume-form input {
    /* 다른 화면 입력칸과 높이를 맞춘다 (34px) */
    height: 34px;
    box-sizing: border-box;
    padding: 6px 9px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.assume-form input:focus { outline: none; border-color: var(--accent); }

/*
 * 폰에서는 세 칸을 한 줄에 — 2026-08-30
 *
 * 라벨이 세로 flex 라 `투자금액` 과 `<span>원</span>` 이 **각각 항목이 되어
 * 갈렸다.** 한 칸이 이름·단위·입력칸 세 줄, 셋이면 아홉 줄이었다.
 * 오른쪽은 통째로 비어 있었다.
 *
 * 라벨을 블록으로 두면 이름과 단위가 한 줄로 흐르고, 셋을 나란히 놓으면
 * 아홉 줄이 두 줄이 된다.
 *
 *     투자금액 원   보유기간 년   연 수익률 %
 *     10,000,000        10             8
 */
@media (max-width: 720px) {
    .assume-form {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }
    .assume-form label {
        display: block;
        min-width: 0;
        font-size: 10px;
        line-height: 1.3;
    }
    .assume-form .unit { font-size: 9.5px; }
    .assume-form input {
        display: block;
        width: 100%;
        margin-top: 2px;
        height: 28px;
        padding: 4px 5px;
        font-size: 11.5px;
    }
}

/*
 * '보수로 나가는 돈'이 이 화면의 핵심이다. 0.0047%와 0.49%가 둘 다 작은
 * 숫자로 보이는 문제를 풀려고 만든 칸이라, 다른 칸보다 크게 둔다.
 */
table.choose-table td.cost {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

/*
 * 화면 폭에 따라 갈리는 글자.
 *
 * `font-size: 0` 으로 한쪽을 지우지 않는다 — 그건 글자 숨기기 수법과
 * 모양이 똑같아서, 뜻이 달라도 검색 쪽에서 그렇게 읽힐 이유가 없다.
 * 둘 다 HTML 에 두고 보이는 쪽만 바꾼다.
 */
.좁을때 { display: none; }

/* 숫자만으로는 "이게 적은 건가"를 모른다. 말과 색을 같이 준다. */
.badge {
    display: inline-block;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    color: var(--muted);
    cursor: help;
}
.badge[data-grade="ok"],
.badge[data-grade="good"] { color: var(--text-sub); border-color: var(--border); }
.badge[data-grade="small"],
.badge[data-grade="fair"] { color: var(--accent); border-color: var(--accent); }
.badge[data-grade="tiny"],
.badge[data-grade="thin"] { color: var(--up); border-color: var(--up); }

table.choose-table td { vertical-align: top; }
table.choose-table { min-width: 820px; }

.how-text a { color: var(--accent); text-decoration: underline; }

/* --- 뉴스 ------------------------------------------------------------ */

.news-list { display: flex; flex-direction: column; }

.news-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: none; padding-bottom: 0; }

/*
 * 그림은 public/뉴스그림/ 에 둔 파일을 쓴다. 파일이 없으면 이 칸 자체가
 * 안 그려지고 글만 나온다 — 까닭은 src/services/뉴스그림.js 머리말.
 *
 * 왼쪽에 둔다 — 김프고 뉴스 화면과 같다. 목록을 훑을 때 그림이 먼저
 * 걸리고, 그림이 있는 자리가 줄마다 같아야 눈이 미끄러지지 않는다.
 * 우리가 그리는 그림이라 '사진을 안 주는 매체' 가 없어, 전에 왼쪽을
 * 못 썼던 까닭(빈 칸이 생기고 줄이 어긋남)이 사라졌다.
 */
.news-thumb {
    order: 0;
    flex: 0 0 148px;
    align-self: stretch;
    max-height: 128px;
    overflow: hidden;
    border-radius: var(--radius);
}
.news-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    /* 자리에 맞춰 자른다 — 가장자리가 잘리므로 한가운데에 중요한 것을 둔다 */
    object-fit: cover;
}

.news-body { order: 1; min-width: 0; flex: 1; }

.news-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}
.news-title:hover { color: var(--accent); }

.news-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}
.news-source { color: var(--label); }

.news-summary {
    margin: 6px 0 0;
    color: var(--text-sub);
    font-size: 13px;
    line-height: 1.6;
}

/*
 * 붙어 있는 값이 이 화면에서 우리 것이다. 기사 요약보다 눈에 먼저
 * 들어와야 해서 테두리를 두르고 바탕색을 준다.
 *
 * 처음에는 칩처럼 옆으로 늘어놓고 각 칩을 두 줄로 썼다. 그랬더니 칩 세 개가
 * 세로로 쌓여 기사 하나가 300px을 넘었고, 오른쪽 사진 아래로 176px짜리 빈
 * 칸이 남았다. 한 줄에 하나씩 쌓으니 높이가 절반이 되고, 지수 이름과 값의
 * 자리가 맞아 읽기도 낫다.
 */
.topics {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 9px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: 7px 10px;
}

.topic {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.5;
}

.topic-head {
    flex: 0 0 190px;
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.topic-body { flex: 1 1 260px; color: var(--muted); font-size: 11px; }
.topic-fx .topic-head { color: var(--label); font-weight: 400; }
.topic-body b { font-weight: 700; }
.topic-fee { color: var(--label); }
.topic-fee::before { content: ' · '; color: var(--muted); }

.news-more {
    display: inline-block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}
.news-more:hover { color: var(--accent); }

#news-foot a { color: var(--label); text-decoration: underline; }

@media (max-width: 720px) {
    /* 좁은 화면에서는 그림을 위로 올린다 */
    .news-item { flex-direction: column; }
    .news-thumb { order: 0; flex-basis: auto; width: 100%; height: 120px; max-height: none; }
    .topic-head { flex-basis: 100%; }
    .topic-fee::before { content: ''; }
    .topic-fee { display: block; }
}

/* --- 시장온도 --------------------------------------------------------- */

.how-formula {
    margin: 8px 0;
    padding: 9px 12px;
    background: var(--surface-3);
    border-radius: var(--radius);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/*
 * '원화 기준'이 이 화면의 주인공이다. 다른 칸보다 크게 두고,
 * 환율이 부호를 뒤집은 줄은 바탕색으로 눈에 띄게 한다.
 */
table.temp-table td.krw { font-size: 15px; font-weight: 700; }
table.temp-table tr.flipped td { background: var(--accent-soft); }
table.temp-table tr.flipped:hover td { background: var(--accent-soft); }

.tag-flip {
    background: var(--accent);
    color: var(--on-solid);
    border-color: var(--accent);
}

/* 국내지수·환율·배경지표가 같은 모양을 쓴다 */
.gauge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.gauge {
    padding: 11px 13px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.gauge-label { color: var(--label); font-size: 11px; }
.gauge-value {
    margin-top: 3px;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.gauge-change { font-size: 12px; font-variant-numeric: tabular-nums; }
.gauge-note { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }

/*
 * 칸 안에 있던 설명을 묶음 아래로 모았다 — 2026-08-30
 * 설명이 붙은 칸만 키가 커져 같은 묶음인데 상자가 제각각이었다.
 */
.gauge-notes {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}
.gauge-notes li { margin-bottom: 2px; word-break: keep-all; }
.gauge-notes li:last-child { margin-bottom: 0; }
.gauge-notes b { color: var(--text-sub); font-weight: 600; }

/*
 * 폰에서는 셋씩 — 2026-08-30
 *
 * 값과 등락률이 따로 줄을 차지해 한 장이 세 줄이었다. 등락률을 값 옆에
 * 붙이면 두 줄이 되고, 그러면 한 줄에 셋이 들어간다.
 *
 *     코스피   [차트]
 *     6,788.88 −1.79%
 */
@media (max-width: 720px) {
    .gauge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .gauge { padding: 6px 7px; }
    .gauge-label { font-size: 10px; line-height: 1.25; }
    .gauge-value { display: inline; margin-top: 0; font-size: 13px; }
    .gauge-change { font-size: 10px; margin-left: 3px; }
    .gauge-note { margin-top: 3px; font-size: 9px; }
    .chart-toggle { padding: 0 4px; font-size: 9px; }
    /*
     * 머리가 밀리지 않게. '필라델피아 반도체' 처럼 긴 이름이 오면 이름이
     * 접혀야지 [차트] 단추가 칸 밖으로 나가면 안 된다.
     */
    /*
     * 위끝(flex-start)이 아니라 밑줄(baseline)로 맞춘다 — 2026-08-30
     *
     * [차트] 단추는 테두리 1px + 안여백 4px 을 이고 있어서, 위끝을 맞추면
     * 글자가 이름보다 7px 아래에서 시작한다. 어깨가 어긋나 보인다.
     * 밑줄을 맞추면 두 글자가 같은 줄에 앉고, 긴 이름은 그대로 아래로 접힌다.
     */
    .gauge-top { gap: 4px; align-items: baseline; }
    .gauge-label { min-width: 0; overflow-wrap: anywhere; }
}

/*
 * 여기 있던 `table.temp-table { min-width: 560px }` 를 뺐다 — 2026-08-29
 * 여섯 열짜리 지수표다. 360px 에서는 카드로 접힌다.
 */

/* --- 시장온도: 판정 · 지표판 ------------------------------------------ */

/*
 * 오늘의 판정. 지표가 스물몇 개라 사람이 훑어서 결론을 내기 어렵다.
 * 김프고의 시장온도 화면에서 가져온 틀이다.
 */
.verdict-panel { display: flex; flex-direction: column; gap: 12px; }

.verdict {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.verdict-word { display: flex; flex-direction: column; gap: 2px; }
.verdict-word strong { font-size: 24px; letter-spacing: -0.5px; }
.verdict-word span { color: var(--muted); font-size: 12px; }

/* 판정마다 색을 달리해 한눈에 구분되게 한다 */
.verdict-word strong[data-key="risk"] { color: var(--up); }
.verdict-word strong[data-key="safe"] { color: var(--down); }
.verdict-word strong[data-key="mixed"] { color: var(--text-sub); }

.verdict-nums { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }

/*
 * 폰에서 판정 상자를 가운데로 — 2026-08-30
 * 왼쪽에 큰 글씨, 오른쪽에 숫자 셋이 떨어져 있어 한쪽으로 쏠려 보였다.
 */
@media (max-width: 720px) {
    .verdict-panel { gap: 7px; padding: 9px 10px; }
    .verdict { flex-direction: column; align-items: center; gap: 6px; }
    .verdict-word { align-items: center; text-align: center; }
    .verdict-word strong { font-size: 20px; }
    .verdict-word span { font-size: 11px; }
    .verdict-nums {
        margin-left: 0;
        gap: 18px;
        justify-content: center;
    }
    .verdict-num { align-items: center; }
}
.verdict-num { display: flex; flex-direction: column; gap: 1px; }
.verdict-num .label { color: var(--label); font-size: 11px; }
.verdict-num strong { font-size: 16px; font-variant-numeric: tabular-nums; }

/* 환율이 대표 숫자에 어떻게 작용하는지 */
.fx-effect {
    margin: 0 0 4px;
    color: var(--text-sub);
    font-size: 14px;
    line-height: 1.7;
}
.fx-effect b { color: var(--text); }

.sort-pick { display: flex; gap: 4px; }
.sort-pick .mini-btn.active {
    background: var(--accent);
    color: var(--on-solid);
    border-color: var(--accent);
}

.board { display: flex; flex-direction: column; gap: 20px; }
.board-group .group-head { margin-bottom: 8px; }

/* --- 지표 카드 안 차트 ------------------------------------------------ */

.gauge-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* 차트를 편 카드는 격자 한 줄을 통째로 쓴다. 옆 카드가 밀려나지 않게. */
.gauge.open {
    grid-column: 1 / -1;
    border-color: var(--border-strong);
}

.chart-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: var(--radius);
    padding: 1px 7px;
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}
.chart-toggle:hover { border-color: var(--accent); color: var(--accent); }
.gauge.open .chart-toggle { border-color: var(--accent); color: var(--accent); }

.chart-box { margin-top: 10px; }

.chart-ranges { display: flex; gap: 3px; margin-bottom: 8px; flex-wrap: wrap; }

/*
 * 고르는 단추(갈래·정렬·기간).
 *
 * 시안처럼 키우고 둥글렸다. 11px 짜리 각진 단추는 딱지처럼 보여서
 * 누를 수 있는 것인 줄 몰랐다.
 */
.chart-range {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: var(--radius-sm);
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.chart-range:hover { color: var(--text); border-color: var(--border-strong); }
.chart-range:hover { color: var(--text); }
.chart-range.active {
    background: var(--accent);
    color: var(--on-solid);
    border-color: var(--accent);
}

/*
 * 그림은 가로로만 늘린다(preserveAspectRatio="none"). 지표 흐름을 보는
 * 용도라 세로 비율이 정확할 필요가 없고, 좁은 화면에서도 높이가 유지된다.
 */
.chart-svg {
    display: block;
    width: 100%;
    height: 150px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.chart-axis {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.chart-msg {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    padding: 0 16px;
}

/* --- 우선주 괴리 ------------------------------------------------------ */

/*
 * 괴리와 배당 배수가 이 화면의 두 숫자다. 다만 거래대금 칸을 작게 두면
 * "싸다"만 남는다. 우선주가 싼 가장 큰 이유가 거래가 안 되는 것이라,
 * 경고 딱지를 값과 비슷한 무게로 둔다.
 */
table.pref-table td.gap { font-size: 15px; font-weight: 700; }
table.pref-table td.ratio { font-size: 14px; }
table.pref-table td.ratio b { color: var(--accent); }
table.pref-table td { vertical-align: top; }
table.pref-table { min-width: 760px; }

/* 거래가 적은 줄은 눈에 띄게 눌러 둔다 */
table.pref-table tr:has(.badge[data-grade="thin"]) td.gap { opacity: 0.55; }

/* --- 종목 훑어보기 ---------------------------------------------------- */

.screen-picks { display: flex; flex-direction: column; gap: 10px; }

.pick-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pick-label {
    flex: 0 0 70px;
    color: var(--label);
    font-size: 12px;
}
.pick-buttons { display: flex; gap: 4px; flex-wrap: wrap; }

/*
 * 관심 별 — 김프고와 같은 방식.
 *
 * 줄 안에 있지만 줄을 누른 것과는 다른 일이다(별은 담고, 줄은 카드를 연다).
 * 그래서 크기를 넉넉히 준다 — 손가락으로 눌러 카드가 열려 버리면 다시
 * 닫아야 한다.
 */
.fav {
    background: none;
    border: 0;
    padding: 0 4px 0 0;
    color: var(--faint, var(--muted));
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    vertical-align: baseline;
}
.fav:hover { color: var(--accent); }
.fav.on { color: var(--accent); }
.fav:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fav-count { color: var(--muted); font-size: 11.5px; align-self: center; }

table.screen-table td.move { font-size: 14px; font-weight: 700; }
/*
 * `:not([colspan])` 이 꼭 있어야 한다 — '찾는 종목이 없습니다' 같은 안내 줄도
 * `:first-child` 다. 폭 40px 에 걸려 글자가 한 자씩 세로로 쌓였다.
 */
table.screen-table td:first-child:not([colspan]) { text-align: right; width: 40px; }
table.screen-table { min-width: 720px; }

/*
 * 조건 칩을 한 줄로 — 2026-08-30
 *
 * '정렬' 다섯 개와 '거래대금' 넷이 접혀 두 줄씩 됐다. 이름표를 옆에 두고
 * 칩은 한 줄에 두어 옆으로 밀게 한다. 칩은 하나가 온전히 보이고 다음 칩이
 * 반쯤 보여 **더 있다는 것이 눈에 보인다** — 표를 미는 것과는 다르다.
 */
@media (max-width: 720px) {
    .screen-picks { gap: 6px; }
    .pick-row { flex-wrap: nowrap; gap: 7px; align-items: center; }
    .pick-label { flex: 0 0 auto; font-size: 11px; }
    .pick-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 4px;
        min-width: 0;
    }
    .pick-buttons::-webkit-scrollbar { display: none; }
    .pick-buttons .chart-range {
        flex: none;
        padding: 4px 7px;
        font-size: 11px;
    }
}

/* --- 하단 푸터 ------------------------------------------------------- */

/*
 * 개인정보처리방침·이용약관·문의하기가 사는 자리. 매일 보는 화면이 아니라
 * 필요할 때 찾는 문서라 눈에 덜 띄게 두되, 찾으면 반드시 있어야 한다.
 */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface-3);
    margin-top: 8px;
}

.footer-inner {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 24px var(--page-pad) 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-brand { display: flex; gap: 10px; align-items: baseline; }
.footer-brand b { color: var(--accent); font-size: 15px; }
.footer-brand span { color: var(--muted); font-size: 12px; }

.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: var(--text-sub); font-size: 13px; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }

.footer-notice {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
    max-width: 80ch;
}
.footer-copy { margin: 0; color: var(--muted); font-size: 11px; }

/* --- 문서 화면 (방침·약관·문의) ---------------------------------------- */

/*
 * 읽으라고 만든 화면이라 표·숫자 화면과 규칙이 다르다.
 * 글줄 길이를 72자 근처로 묶는다. 본문이 화면 폭만큼 길어지면
 * 줄을 바꿀 때마다 눈이 시작점을 놓친다.
 */
.doc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px 32px;
    line-height: 1.75;
}

.doc h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.5px; }
.doc h2 {
    margin: 30px 0 10px;
    font-size: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.doc h3 { margin: 20px 0 6px; font-size: 14px; color: var(--text-sub); }
.doc p { margin: 0 0 12px; color: var(--text-sub); max-width: 72ch; }
.doc b { color: var(--text); }
.doc a { color: var(--accent); text-decoration: underline; }

.doc-updated { color: var(--muted); font-size: 12px; margin-bottom: 18px; }

.doc-lead {
    background: var(--surface-3);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 6px;
}
.doc-lead p:last-child { margin-bottom: 0; }

/* 약관 맨 위의 '가장 중요한 것' — 여기만 읽고 나가도 되게 */
.doc-warn {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 8px;
}
.doc-warn-title { margin: 0 0 8px !important; border: none !important; color: var(--accent); font-size: 15px; }
.doc-warn p:last-child { margin-bottom: 0; }

.doc-list { margin: 0 0 12px; padding-left: 20px; color: var(--text-sub); max-width: 72ch; }
.doc-list li { margin-bottom: 5px; }

.doc-note { font-size: 12px; color: var(--muted) !important; }

/* 아직 채우지 못한 칸. 빈칸으로 두면 잊어버린 것인지 일부러인지 알 수 없다 */
.doc-pending {
    background: var(--surface-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0 0 12px;
    color: var(--text-sub);
    font-size: 13px;
    max-width: 72ch;
}
.todo-mark {
    color: var(--accent) !important;
    border-bottom: 1px dotted var(--accent);
}

.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 12px; }
.doc-table th, .doc-table td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.doc-table th { background: var(--surface-2); color: var(--label); font-weight: 600; white-space: nowrap; }
.doc-table td { color: var(--text-sub); }

.doc-history { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); }
.doc-history h3 { margin-top: 0; }

@media (max-width: 720px) {
    .doc { padding: 18px 16px 24px; }
    .doc h1 { font-size: 20px; }
}

/* --- 읽을거리 (화면 아래 긴 설명) -------------------------------------- */

/*
 * 표와는 규칙이 다르다. 표는 훑는 것이고 이건 읽는 것이다.
 * 글줄을 68자 근처로 묶는다. 화면 폭만큼 길어지면 줄을 바꿀 때마다
 * 눈이 다음 줄의 시작점을 놓친다.
 */
.longform {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px 32px;
    line-height: 1.8;
}

.longform-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.longform-head h2 { margin: 0; font-size: 18px; letter-spacing: -0.4px; }
.longform-head .longform-kicker {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.longform h3 {
    margin: 28px 0 8px;
    font-size: 15px;
    color: var(--text);
}
.longform h4 { margin: 18px 0 6px; font-size: 13px; color: var(--text-sub); }

.longform p {
    margin: 0 0 13px;
    color: var(--text-sub);
    max-width: 68ch;
}
.longform b { color: var(--text); }
.longform a { color: var(--accent); text-decoration: underline; }

.longform ul, .longform ol {
    margin: 0 0 13px;
    padding-left: 20px;
    color: var(--text-sub);
    max-width: 68ch;
}
.longform li { margin-bottom: 6px; }

/* 셈을 보여줄 때. 등폭 글꼴이라야 자리가 맞는다 */
.lf-calc {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0 0 13px;
    font-family: 'D2Coding', Consolas, 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-sub);
    overflow-x: auto;
    white-space: pre;
}
.lf-calc b { color: var(--accent); }

/*
 * 폰에서는 글자를 줄이고 안여백을 좁힌다 — 2026-08-29
 *
 * 등폭 글꼴이라 줄 폭이 글자 수로 정해진다. 360px 화면의 그릇은 300px 남짓이라
 * 12.5px 로는 40칸이 안 들어간다. 안에 든 그림표는 37칸까지 줄여 두었고,
 * 여기서 글자를 11.5px 로 낮춰 여유를 둔다.
 */
@media (max-width: 720px) {
    .lf-calc {
        font-size: 11.5px;
        line-height: 1.7;
        padding: 10px 11px;
    }
}

/* 꼭 짚고 넘어가야 하는 것 */
.lf-key {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 13px 18px;
    margin: 0 0 14px;
    max-width: 68ch;
}
.lf-key p { margin: 0; color: var(--text); }
.lf-key p + p { margin-top: 8px; }

/* 값의 한계 — 감추지 않고 같은 크기로 적는다 */
.lf-limit {
    background: var(--surface-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 13px 18px;
    margin: 0 0 14px;
    max-width: 68ch;
}
.lf-limit p { margin: 0; font-size: 13px; }
.lf-limit p + p { margin-top: 8px; }

/* 오해하기 쉬운 것 — 틀린 읽기와 맞는 읽기를 나란히 */
.lf-vs { margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.lf-vs-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    max-width: 68ch;
}
.lf-vs-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 2px;
    margin-bottom: 6px;
}
/*
 * 이 사이트에서 빨강·파랑은 '올랐다·내렸다'라는 뜻을 이미 갖고 있다.
 * 맞다·틀리다에 그 색을 쓰면 뜻이 겹쳐 읽는 사람이 헷갈린다.
 * 그래서 틀린 쪽은 색 없이 회색으로만 눌러 둔다.
 */
.lf-wrong { border-style: dashed; }
.lf-wrong .lf-vs-tag { background: var(--surface-2); color: var(--label); border: 1px solid var(--border-strong); }
.lf-wrong p { color: var(--muted); }
.lf-right .lf-vs-tag { background: var(--accent); color: var(--on-solid); }
.lf-vs-item p { margin: 0; }

/* 출처 표 */
.lf-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 14px; }
.lf-table th, .lf-table td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.lf-table th { background: var(--surface-2); color: var(--label); font-weight: 600; white-space: nowrap; }
.lf-table td { color: var(--text-sub); }

.longform-foot {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}
.longform-foot b { color: var(--text-sub); }

@media (max-width: 720px) {
    .longform { padding: 18px 16px 24px; }
    .longform-head h2 { font-size: 16px; }
}

/* --- 없는 화면 (404) --------------------------------------------------- */

/*
 * 기본 오류 화면을 그대로 두면 영문 한 줄짜리 페이지가 나온다.
 * 링크 하나 잘못 눌렀을 때 그런 화면을 보면 사이트가 미완성으로 보이고,
 * 무엇보다 되돌아갈 길이 없다. 그래서 갈 곳을 같이 놓는다.
 */
.notfound { text-align: center; }
.nf-code {
    margin: 0;
    font-size: 56px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -2px;
    line-height: 1;
}
.notfound h1 { margin: 8px 0 10px; }
.notfound > p { margin-left: auto; margin-right: auto; }

.nf-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 24px 0 20px;
    text-align: left;
}
.nf-links a {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    text-decoration: none;
}
.nf-links a:hover { border-color: var(--accent); background: var(--tint); }
.nf-links b { display: block; color: var(--text); font-size: 14px; }
.nf-links span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/*
 * 광고 레일이 없는 화면(준비 중·404). 3열 격자를 그대로 두면 본문이
 * 레일 폭 칸에 끼어 화면이 옆으로 넘친다.
 */
.page-shell-plain {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(var(--content-width) + var(--page-pad) * 2);
}

/*
 * 광고를 내지 않을 때. 본문 열이 1000px로 좁아지므로 머리말·요약 바·꼬리말도
 * 같은 폭에 맞춘다. 안 맞추면 로고가 본문보다 300px 넘게 왼쪽에 떠서
 * 머리말과 본문이 따로 노는 것처럼 보인다.
 */
body.no-ads .summary-inner,
body.no-ads .header-inner,
body.no-ads .footer-inner {
    max-width: calc(var(--content-width) + var(--page-pad) * 2);
}

/*
 * 머리말 오른쪽 단추. keep-all을 걸어도 '문의하기'와 '로그인'은 띄어쓰기가
 * 없어 한 낱말이지만, 칸이 좁아지면 브라우저가 그래도 끊는다.
 * 이 둘은 어떤 경우에도 한 줄로 둔다.
 */
.header-link, .theme-toggle, .theme-label { white-space: nowrap; }

/*
 * 자리 계산.
 *
 * 가운데 정렬은 양옆 칸을 같은 폭으로 잡아야 이뤄진다. 그 폭은 둘 중
 * 넓은 쪽(오른쪽 단추 약 200px)을 따라간다. 그런데 본문 폭이 1000px이라
 *
 *   200(왼) + 623(탭) + 200(오) + 여백 48 = 1071px  →  71px 모자란다
 *
 * 모자라면 브라우저가 오른쪽 칸을 눌러 '문의하 / 기'로 접는다.
 * 꼼수로 오른쪽만 넓히면 이번엔 탭이 가운데를 벗어난다.
 * 그래서 탭 자체를 줄여 실제로 자리를 만든다 — 아래 .nav-item 여백과
 * .header-inner 간격이 그 몫이다.
 */

/* --- 글줄 다듬기 ------------------------------------------------------ */

/*
 * 제목은 줄을 고르게 나눈다.
 *
 * 두 줄짜리 제목이 "0.0047%와 0.49%는 둘 다 작은 숫자로 / 보인다"처럼
 * 마지막 줄에 한 낱말만 남으면 어설퍼 보인다. balance는 브라우저가
 * 줄 길이를 비슷하게 맞춰 나눈다. (지원하지 않는 브라우저는 그냥 무시한다)
 */
h1, h2, h3, h4,
.hero h1, .hero > h2, .longform-head h2, .panel-head h2, .group-head h3 {
    text-wrap: balance;
}

/*
 * 본문은 마지막 줄에 낱말 하나만 떨어지는 것을 막는다.
 * balance와 달리 pretty는 긴 글에서도 성능 부담이 없다.
 */
p, li, .doc-table td, .lf-table td, td, .ex-note, .how-text {
    text-wrap: pretty;
}

/*
 * 읽는 글은 왼쪽 정렬로 둔다.
 *
 * 양쪽 정렬(justify)이 반듯해 보이지만, 한글에서 keep-all과 같이 쓰면
 * 낱말 사이가 들쭉날쭉 벌어져 오히려 읽기 나빠진다. 명시해 둔다 —
 * 나중에 누가 "가지런하게" 하려고 justify를 넣는 것을 막기 위해서다.
 */
.longform, .doc, .hero-lead { text-align: left; }

/*
 * 표 안의 이름 칸. keep-all이 걸려 있어 'TIGER 미국필라델피아반도체나스닥'
 * 같은 긴 이름이 한 덩어리로 남는다. 칸을 밀어내지 않도록 여기서만 풀어준다.
 *
 * 다만 설명표(.how-table)는 뺀다. 거기 첫 칸은 '의결권'·'길이 막히면' 같은
 * 짧은 이름표라 밀어낼 일이 없는데, 이 규칙에 걸려 좁은 화면에서
 * '길이 막 / 히면'으로 갈렸다.
 */
table.rows:not(.how-table):not(.calc-result) td:first-child,
.pref-table td:first-child,
.screen-table td:first-child {
    word-break: break-word;
}

/*
 * ADR 표의 회사 칸.
 *
 * 회사 이름이 'SK하이닉스'처럼 짧아서 굳이 갈릴 이유가 없는데, 좁은 화면에서
 * 칸이 눌리면 'SK하 / 이닉스'가 됐다. 표는 이미 자기 칸 안에서 옆으로
 * 스크롤되므로, 눌러 담지 말고 최소 너비를 줘서 넘치면 밀어내게 둔다.
 */
.adr-table td:first-child,
.adr-table th:first-child {
    min-width: 8.5rem;
}

/*
 * 종목 고르기 표의 이름 칸도 같다.
 *
 * '괴리' 열이 하나 늘면서 좁은 화면에서 이름 칸이 더 눌렸고,
 * 'KODEX 미 / 국S&P500'이나 '삼성자산운 / 용'처럼 갈렸다.
 * 이 표도 .table-scroll 안에서 옆으로 스크롤되니 눌러 담을 이유가 없다.
 */
.choose-table td:first-child,
.choose-table th:first-child {
    min-width: 10rem;
}

/*
 * 빗금 뒤에서 줄이 바뀌는 것을 막는다.
 *
 * '원/달러'는 이 사이트에서 자주 나오는 말인데, 브라우저는 빗금 뒤를
 * 끊어도 되는 자리로 본다. 그러면 "주가와 원/ / 달러 환율"처럼
 * 한 낱말이 두 줄에 걸린다. keep-all로도 막히지 않는다 — 빗금은
 * 낱말 사이 구분자로 취급되기 때문이다.
 */
.nobr { white-space: nowrap; }

/* --- 종목 훑어보기 표의 종목 칸 ---------------------------------------- */

/*
 * 이 표는 첫 칸이 순번(#)이라 종목 이름이 둘째 칸에 온다. 그런데 왼쪽 정렬
 * 규칙이 td:first-child에만 걸려 있어서, 종목 이름이 숫자와 같은 오른쪽
 * 정렬을 물려받고 있었다. 의도한 것이 아니라 사고였다.
 */
table.screen-table td.stock,
table.screen-table thead th:nth-child(2) {
    text-align: center;
}
table.screen-table td.stock { line-height: 1.7; }

/*
 * 종목코드와 시장.
 *
 * 회색(--muted)에 11px이라 어두운 바탕에서 거의 안 보였다. 코드는 한 단계
 * 밝히고 숫자 폭을 고정해 자리가 흔들리지 않게 한다.
 */
.stock-code {
    margin-left: 7px;
    color: var(--label);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

/*
 * 시장은 글자 대신 딱지로 만든다. 코스피와 코스닥은 성격이 다른 시장이라
 * (코스닥은 대체로 작고 많이 흔들린다) 한눈에 갈리는 편이 낫다.
 *
 * 빨강·파랑은 쓰지 않는다. 이 사이트에서 그 둘은 '올랐다·내렸다'라는 뜻을
 * 이미 갖고 있어서, 시장 이름에 쓰면 값이 오른 줄로 읽힌다.
 */
.mkt {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    vertical-align: 1px;
    white-space: nowrap;
}
.mkt-kospi {
    color: var(--text-sub);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
}
.mkt-kosdaq {
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
}

/*
 * 밝은 테마의 코스닥 딱지.
 *
 * 어두운 바탕에서는 앰버가 잘 보이지만, 밝은 바탕에서는 옅은 앰버 칸 위에
 * 앰버 글자라 대비가 3.7:1까지 떨어졌다(기준 4.5). 글자만 한 단계 더
 * 눌러 쓴다. 칸 색은 그대로 두어 코스피와 구분되는 인상은 유지한다.
 */
/* 베이지도 밝은 바탕이라 같이 걸어야 한다 — 안 걸면 옅은 칸에 옅은 글자다 */
:root[data-theme="light"] .mkt-kosdaq,
:root[data-theme="beige"] .mkt-kosdaq {
    color: #7a4a00;
    border-color: #9c5d00;
}

/* --- 우선주 표의 회사 칸 ----------------------------------------------- */

/*
 * 종목훑기와 같은 이유로 가운데에 둔다. 이름이 한쪽 끝에 붙어 있으면
 * 옆 칸 숫자와 사이가 멀어져 어느 줄인지 눈으로 좇기 어렵다.
 * 머리글도 같이 옮긴다 — 값만 옮기면 둘이 어긋난다.
 */
table.pref-table td:first-child,
table.pref-table thead th:first-child {
    text-align: center;
}
table.pref-table td:first-child { line-height: 1.7; }

/* --- 뉴스 시각 --------------------------------------------------------- */

/*
 * '3시간 전'처럼 지금과의 거리로 적은 것만 색을 준다. 목록을 훑을 때
 * 방금 올라온 기사가 눈에 먼저 들어오게 하려는 것이다.
 * 하루가 지나 날짜로 적힌 것은 색 없이 둔다 — 전부 칠하면 구분이 없어진다.
 */
.news-when.fresh {
    color: var(--accent);
    font-weight: 600;
}

/* --- 종목 고르기 표의 종목 칸 ------------------------------------------ */

/*
 * 종목훑기·우선주와 같은 이유로 가운데에 둔다. 머리글도 같이 옮긴다 —
 * 값만 옮기면 둘이 어긋난다.
 */
table.choose-table td.stock,
table.choose-table thead th:first-child {
    text-align: center;
}
table.choose-table td.stock { line-height: 1.8; }

/*
 * 합쳐 들어간 화면의 머리 부분.
 *
 * /calc 는 계산기 + 종목고르기, /market 은 시장온도 + 뉴스를 한 화면에 담는다
 * (2026-08-23에 탭을 여덟에서 넷으로 줄이면서 합쳤다). 합쳐 넣은 쪽의 제목을
 * h1으로 두면 한 화면에 h1이 둘이 되어 문서 구조가 깨지고 검색에도 나쁘다.
 * h2로 낮추되, 아래 문단들과는 구분되게 크기를 준다.
 */
.hero-sub { margin-top: 28px; }
.hero-sub h2 {
    margin: 0 0 8px;
    font-size: 20px;
    letter-spacing: -0.4px;
    text-wrap: balance;
}

/* --- 첫 화면: 오늘 제일 벌어진 것 --------------------------------------- */

/*
 * 표를 열두 줄 놓아도 눈에 남는 것은 없다. 하나를 크게 걸어야
 * "그래서 뭐?"에 답이 된다. 김프고의 첫 화면이 김프 하나를 크게 거는 것과 같다.
 */
.headline-panel { padding: 0; overflow: hidden; }

.headline {
    display: grid;
    gap: 4px;
    padding: 22px 22px 20px;
    background: linear-gradient(180deg, var(--accent-soft), transparent);
    text-align: center;
}
.headline:hover { background: linear-gradient(180deg, var(--accent-soft), var(--tint)); }

.headline-kind {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.5px;
}
.headline-name { font-size: 17px; font-weight: 700; }

/*
 * 이 숫자가 첫 화면의 주인공이다. 다른 무엇보다 커야 한다.
 *
 * ─ 왜 왼쪽으로 당기나 ─────────────────────────────────────────────────
 * 재 보면 정확히 가운데다(글 가운데 149 = 상자 가운데 149). 그런데 눈에는
 * 오른쪽으로 쏠려 보인다. **앞의 `−`·`+` 기호는 가늘고 여백이 많은데 뒤의
 * `%` 는 꽉 차 있어서**, 글자 덩어리의 무게중심이 오른쪽에 있기 때문이다.
 *
 * 기계가 맞춘 가운데와 눈이 보는 가운데가 다르다. 기호 폭의 절반쯤 왼쪽으로
 * 당겨 눈에 맞춘다. em 으로 두어 글자 크기가 바뀌어도 비율이 유지된다.
 */
.headline-value {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    font-variant-numeric: tabular-nums;
    transform: translateX(-0.13em);
}

.headline-sides { font-size: 13px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.headline-why {
    font-size: 12px;
    color: var(--label);
    max-width: 46ch;
    margin: 6px auto 0;
    line-height: 1.5;
}

/* --- 첫 화면: 갈래 카드 ------------------------------------------------ */

.kind-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.kind-card {
    display: grid;
    gap: 2px;
    padding: 12px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.kind-card:hover { border-color: var(--border-strong); }
.kind-card.active { border-color: var(--accent); background: var(--accent-soft); }

.kind-card-label { font-size: 11px; color: var(--label); font-weight: 600; }
.kind-card-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.kind-card-name { font-size: 12px; color: var(--text-sub); }
.kind-card-note { font-size: 10px; color: var(--muted); margin-top: 2px; }

.gaps-picks { margin-bottom: 10px; }

/* ======================================================================
 * 첫 화면 요약 칸을 폰에서 바싹 조인다 — 2026-08-30
 *
 * '오늘 시장' 이 300px, '갈래별 오늘 최대' 가 226px 였다. 둘이 합쳐 폰 한 판
 * 가까이(0.9판) 를 먹는데, 정작 담긴 것은 숫자 열 개다. 안여백이 12~14px 라
 * 상자가 내용보다 컸다.
 *
 * 값은 하나도 안 버린다. 상자와 여백만 줄인다.
 * ====================================================================== */
@media (max-width: 720px) {
    /*
     * 갈래 넷을 한 칸에 넉 줄로 눕힌다 — 2026-08-30
     *
     * 두 칸 × 두 줄로 두었더니 칸마다 넉 줄(갈래·값·이름·곁들이)이 쌓여
     * 한 장이 76px, 판이 227px 이 됐다. 가로로 눕히면 한 줄에 다 들어간다.
     *
     *     서울 vs 뉴욕   SK하이닉스   9종목   +35.0%
     *
     * 이름 칸만 늘었다 줄었다 하게 두고(minmax(0,1fr)) 말줄임을 건다.
     * 'KODEX WTI원유선물(H)' 같은 긴 이름이 와도 줄이 안 늘어난다.
     */
    .kind-cards {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    /*
     * 칸 폭을 못박아 넉 줄이 세로로 맞아떨어지게 — 2026-08-30
     *
     * `auto` 로 두면 카드마다 제 내용에 맞춰 폭이 정해져서 줄마다 값이
     * 들쭉날쭉했다. 카드가 저마다 딴 격자를 쓰기 때문이다. 폭을 고정하면
     * 넷이 한 표처럼 줄이 선다.
     */
    .kind-card {
        grid-template-columns: 78px minmax(0, 1fr) 34px 54px;
        grid-template-areas: "label name note value";
        align-items: baseline;
        column-gap: 6px;
        padding: 7px 9px;
    }
    .kind-card-note { text-align: right; }
    .kind-card-value { text-align: right; }
    .kind-card-label { grid-area: label; font-size: 10px; }
    .kind-card-name {
        grid-area: name;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .kind-card-note { grid-area: note; font-size: 9.5px; margin: 0; }
    .kind-card-value {
        grid-area: value;
        font-size: 15px;
        line-height: 1.2;
        text-align: right;
    }

    /* 왜 그런가는 접는다 — 날마다 같은 설명이고, 판 곁들이에 이미 있다 */
    .kind-card .note-why { display: none; }

    .headline-value { font-size: 36px; }

    /* 판 제목과 알맹이 사이도 조인다 */
    .panel-head { margin-bottom: 7px; }
}

/* --- 좁은 화면에서는 표를 카드로 --------------------------------------- */

/*
 * 첫 화면에만 걸려 있던 것을 표 전체로 넓혔다 — 2026-08-29
 *
 * 나머지 표는 옆으로 밀어 보게 두었는데, 360px 에서 재 보니 밀어도 못 본다.
 * 회사 이름 칸이 한 글자 폭으로 눌려 '삼/성/전/자' 로 세로로 쌓였다.
 * 한 눈에 안 들어오면 표가 아니다.
 *
 * 같은 값을 두 벌 그리지 않는다. 표 하나만 만들고 여기서 모양만 바꾼다 —
 * 마크업을 둘로 두면 한쪽만 고쳐져 값이 갈라진다.
 * 칸 이름은 각 td 의 data-label 에서 가져온다(app.js 의 표이름표).
 *
 * .how-table 은 뺀다. 두 칸짜리 설명표라 이미 들어간다.
 */
@media (max-width: 720px) {
    .gaps-wrap { overflow-x: visible; }

    table.rows:not(.how-table):not(.calc-result) { min-width: 0; display: block; }
    table.rows:not(.how-table):not(.calc-result) thead { display: none; }
    table.rows:not(.how-table):not(.calc-result) tbody,
    table.rows:not(.how-table):not(.calc-result) tr { display: block; }

    table.rows:not(.how-table):not(.calc-result) tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 8px 10px;
        margin-bottom: 6px;
        background: var(--surface-2);
    }
    table.rows:not(.how-table):not(.calc-result) tr:hover td { background: none; }

    /*
     * 값을 세 칸씩 가로로 세운다 — 2026-08-30
     *
     * 전에는 `이름표 ······ 값` 을 한 줄씩 세로로 쌓았다. 그랬더니 칸이
     * 일곱인 표(우선주)는 한 줄이 **196px**, 열두 줄이면 화면 두 판이 넘었다.
     * PC 는 가로로 한눈에 들어오는데 폰만 끝없이 내려야 했다.
     *
     * 이름을 값 위에 얹고 셋씩 가로로 세운다. 같은 값이 3분의 1 높이에 들어간다.
     *
     *     삼성전자  삼성전자우
     *     보통주      우선주      괴리
     *     257,000     186,800     −27.3%
     *     −3.38%      −3.86%
     *
     *     배당수익률   배당 배수   우선주 거래대금
     *     0.65%→0.89%  1.37배      5,408억
     *
     * flex 는 여전히 안 쓴다 — 안에 든 `<br>`(등락률·딱지)이 값을 별개
     * 항목으로 쪼갠다. 블록으로 두면 한 덩어리로 남는다.
     */
    table.rows:not(.how-table):not(.calc-result) tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 8px;
        row-gap: 7px;
        align-items: start;
    }

    /*
     * 칸이 다섯인 표는 한 줄에 다 세운다 — 2026-08-30
     *
     * 셋씩이면 두 줄이 되는데, 이 둘은 값이 짧아서 다섯이 한 줄에 들어간다.
     * 300px 를 다섯으로 나누면 한 칸 56px 이고, 가장 긴 값이 '2,796,942'(55px)다.
     */
    table.rows.temp-table:not(.how-table) tbody tr,
    table.rows.screen-table:not(.how-table) tbody tr {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 4px;
        row-gap: 4px;
        padding: 6px 7px;
        margin-bottom: 4px;
    }
    table.rows.temp-table:not(.how-table) tbody td,
    table.rows.screen-table:not(.how-table) tbody td { font-size: 12px; }
    /*
     * 다섯 칸짜리 표는 이름과 값을 가운데로 맞춘다 — 2026-08-30
     *
     * 왼쪽에 붙여 두면 이름은 짧고 값은 길어서 둘이 어긋나 보인다.
     * 가운데로 맞추면 이름이 제 값 바로 위에 온다.
     */
    table.rows.temp-table:not(.how-table) tbody td,
    table.rows.screen-table:not(.how-table) tbody td { text-align: center; }
    table.rows.temp-table:not(.how-table) tbody td::before,
    table.rows.screen-table:not(.how-table) tbody td::before {
        font-size: 9px;
        text-align: center;
    }
    /* 제목(종목 이름)은 왼쪽 그대로 */
    table.rows.temp-table:not(.how-table) tbody td.card-title,
    table.rows.screen-table:not(.how-table) tbody td.card-title { text-align: left; }

    /*
     * /choose 는 이름을 값 옆에 붙인다 — 2026-08-31
     *
     * 08-30 에 한 번 붙였다가 되돌렸었다. 이름 길이에 값 높이가 끌려다녔다.
     *
     *     총보수 0.0047%          ← 값이 39px 자리
     *     보수로 나가는 돈
     *     9,393원                 ← 값이 51px 자리   ← 어깨가 어긋난다
     *
     * 원인은 붙인 것이 아니라 **이름이 길어서**였다. `보수로 나가는 돈
     * 9,393원`은 125px 이고 칸은 94px 다. 그래서 화면용 짧은 이름을 따로
     * 달았다(`th[data-short]` — app.js 의 표이름표 참고).
     *
     *     보수액 9,393원   76px      거래 33억      64px
     *     오차 0.25%       60px      순자산 1.5조   63px
     *
     * 이제 모든 칸이 한 줄이라 어깨가 저절로 맞고, 카드가 여덟 줄에서
     * 세 줄로 준다.
     */
    table.rows.choose-table:not(.how-table) tbody td {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        column-gap: 3px;
        font-size: 11px;
        /* 한 줄을 지킨다. 넘치면 값이 아니라 이름이 잘리게 아래에서 정한다. */
        white-space: nowrap;
        overflow: hidden;
    }
    table.rows.choose-table:not(.how-table) tbody td::before {
        display: inline;
        margin: 0;
        font-size: 9px;
        /* 자리가 모자라면 이름부터 줄어든다 — 값은 끝까지 다 보여야 한다. */
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    table.rows.choose-table:not(.how-table) tbody td .badge {
        margin: 0 0 0 2px;
        padding: 0 3px;
        font-size: 8px;
        flex: none;
    }
    /*
     * `기준일 어긋남`은 여섯 자라 94px 칸에서 반드시 넘어간다. 좁은 화면에서만
     * 짧은 꼴을 보인다. 두 글자 다 HTML 에 있고 `title` 에도 원문이 있다.
     */
    .넓을때 { display: none; }
    .좁을때 { display: inline; font-weight: 700; }

    /*
     * 여백을 걷어낸다 — 2026-08-31
     *
     * 칸이 한 줄이 되고 나니 줄 사이 7px 이 글자만큼 넓어 보인다. 카드
     * 하나가 106px 인데 그중 20px 이 빈자리였다.
     */
    table.rows.choose-table:not(.how-table) tbody tr {
        row-gap: 2px;
        column-gap: 5px;
        padding: 5px 7px;
        margin-bottom: 3px;
    }
    /* 이름줄과 값 사이도 좁힌다. 밑줄이 이미 둘을 가른다. */
    table.rows.choose-table:not(.how-table) tbody td.card-title {
        padding: 0 0 3px;
        margin-bottom: 1px;
    }
    table.rows:not(.how-table):not(.calc-result) td {
        display: block;
        border: 0;
        padding: 0;
        text-align: left;
        white-space: normal;
        min-width: 0;
        line-height: 1.35;
    }
    table.rows:not(.how-table):not(.calc-result) td::before {
        content: attr(data-label);
        display: block;
        color: var(--label);
        font-size: 10px;
        font-weight: 400;
        line-height: 1.3;
        margin-bottom: 1px;
    }
    /* 이름표가 없는 칸은 빈 줄을 만들지 않는다 */
    table.rows:not(.how-table):not(.calc-result) td:not([data-label])::before { content: none; }

    /*
     * 카드 제목 — 무엇에 대한 줄인지. 이름표 없이 왼쪽에 크게 두고 밑줄로
     * 값들과 가른다. 제목이 없으면 숫자만 남아 어느 회사 것인지 모른다.
     */
    table.rows:not(.how-table):not(.calc-result) td.card-title,
    table.rows:not(.how-table):not(.calc-result) td.etf-cell {
        grid-column: 1 / -1;      /* 제목은 줄 하나를 통째로 */
        display: block;
        text-align: left;
        font-weight: 700;
        padding: 0 0 5px;
        border-bottom: 1px solid var(--border);
    }
    table.rows:not(.how-table):not(.calc-result) td.card-title::before,
    table.rows:not(.how-table):not(.calc-result) td.etf-cell::before { content: none; }

    /* 카드는 이미 차례대로 놓인다 — 순번 칸은 자리만 먹는다 */
    table.rows:not(.how-table):not(.calc-result) td.card-hide { display: none; }

    /* 안내 줄('오늘은 아직…')은 카드가 아니라 한 줄 글이다 */
    table.rows:not(.how-table):not(.calc-result) td[colspan] {
        grid-column: 1 / -1;
        display: block;
        text-align: center;
    }
    table.rows:not(.how-table):not(.calc-result) td[colspan]::before { content: none; }

    /*
     * tbody 안의 th — 계산기 표의 덩어리 제목줄('손에 남기까지')이다.
     * 이걸 빼놓으면 th 가 table-cell 로 남아 익명 표 상자를 만들고, 그 상자가
     * 표를 다시 431px 로 벌린다. 카드가 아니라 소제목으로 그린다.
     */
    table.rows:not(.how-table):not(.calc-result) tbody th {
        grid-column: 1 / -1;
        display: block;
        text-align: left;
        padding: 4px 0;
        white-space: normal;
    }
    table.rows:not(.how-table):not(.calc-result) tbody tr.calc-group {
        border: 0;
        background: none;
        padding: 10px 0 2px;
        margin: 0;
    }

    /* ------------------------------------------------------------------
     * 첫 화면 표는 폰에서 '세 줄'로 접는다 — 2026-08-30
     *
     * 여섯 칸을 위아래로 쌓았더니 한 줄이 181px 이 됐다. 12줄이면 2,379px,
     * 첫 화면 전체 5,295px 의 **절반이 넘는다.** 스크롤이 한없이 길어졌다.
     *
     * 게다가 같은 말이 두 번 있었다 — 제목에 '보통주 아모레퍼시픽' 이라고
     * 적어 놓고 바로 밑에 '무엇과 무엇: 보통주 vs 우선주' 가 또 있었다.
     *
     *     아모레퍼시픽우                    −68.92%
     *     보통주 vs 우선주                      14억
     *     보통주 150,600           우선주 46,800
     *
     * 값은 하나도 안 버렸다. 자리만 바꿨다.
     *
     * **선택자를 `table.rows.gaps-table` 로 적는다.** 위의 일반 카드 규칙이
     * `table.rows:not(.how-table):not(.calc-result)` 이라 `.gaps-table` 만으로는 우선순위에서
     * 진다. 처음에 그렇게 적었다가 display:grid 가 통째로 무시됐다.
     * ------------------------------------------------------------------ */
    /*
     * 세 줄에서 두 줄로 — 2026-08-30
     *
     *     아모레퍼시픽우  보통주 vs 우선주        −68.92%
     *     보통주 150,600   우선주 46,800            14억
     *
     * 종목코드와 상대 종목명(`090435 · 보통주 아모레퍼시픽`)을 접었다.
     * 그것 때문에 제목이 두 줄로 접혀 한 줄이 97px 이 됐다. 줄을 누르면
     * 종목 카드가 열리고 거기 다 있다.
     *
     * 값 옆의 이름(보통주·우선주·NAV…)은 **접으면 안 된다.** 갈래에 따라
     * 왼쪽·오른쪽이 무엇인지 다르고, '가격 vs NAV' 는 갈래 이름과 값의
     * 차례가 반대다(왼쪽이 NAV). 이름을 빼면 어느 쪽이 어느 쪽인지 모른다.
     */
    table.rows.gaps-table:not(.how-table) tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "name  name  gap"
            "left  right turn";
        column-gap: 8px;
        row-gap: 1px;
        padding: 7px 10px;
    }
    /*
     * 이름은 안 자르고 접는다.
     *
     * 말줄임을 걸었더니 'TIGER 미국나스닥100레버리지(합성)' 이 27px 모자라
     * 끝이 잘렸다. 하필 **'레버리지'·'인버스' 는 이름 끝에 붙는다.**
     * 거기가 잘리면 딴 상품이 된다. 두 줄이 되더라도 다 보이는 쪽을 택한다.
     *
     * 칸을 `minmax(0, 1fr)` 로 묶어 두었으므로 두 줄에서 멈춘다. 전에 `auto`
     * 로 두었다가 한 글자 폭으로 눌려 한 줄이 213px 로 터진 적이 있다.
     */
    table.rows.gaps-table:not(.how-table) tbody td.etf-cell {
        grid-area: name;
        white-space: normal;
        line-height: 1.25;
    }
    table.rows.gaps-table:not(.how-table) tbody td.gap           { grid-area: gap; }

    /*
     * 갈래 이름(보통주 vs 우선주…)을 접는다 — 2026-08-30
     *
     * 이름 옆에 두었더니 'TIGER 미국나스닥100레버리지(합성)' 같은 긴 이름이
     * 자리를 다투다 한 글자 폭으로 눌려 **한 줄이 213px 로 터졌다.**
     *
     * 접어도 무엇과 무엇을 견주는지는 아랫줄이 말해 준다 —
     * `NAV 23,133 · 현재가 23,375`, `보통주 150,600 · 우선주 46,800`.
     * 위 칩으로 갈래를 고를 수도 있다. 이름을 자르는 것보다 낫다:
     * '인버스' 와 '레버리지' 는 이름 끝에 붙는데 거기가 잘리면 딴 상품이 된다.
     */
    table.rows.gaps-table:not(.how-table) tbody td.kind-cell { display: none; }
    table.rows.gaps-table:not(.how-table) tbody td.side-left     { grid-area: left; }
    table.rows.gaps-table:not(.how-table) tbody td.side-right    { grid-area: right; }
    table.rows.gaps-table:not(.how-table) tbody td.turnover-cell { grid-area: turn; }

    /* 종목코드와 상대 이름은 접는다 — 줄을 누르면 종목 카드에 다 있다 */
    table.rows.gaps-table:not(.how-table) tbody td.etf-cell .etf-code { display: none; }

    /*
     * '공시 기준' 을 같은 줄에 붙인다.
     *
     * `<br>` 로 아래에 달아 두었더니 그 줄만 61 → 86px 이 됐다. 가격 vs NAV
     * 갈래는 전부 이 딱지가 붙어서 표 절반이 커졌다. 딱지를 뗄 수는 없다 —
     * 실시간이 아니라 하루 한 번 공시된 값이라는 뜻이라 빼면 거짓이 된다.
     */
    table.rows.gaps-table:not(.how-table) tbody td.gap br { display: none; }
    table.rows.gaps-table:not(.how-table) tbody td.gap .etf-code {
        margin-left: 4px;
        font-size: 9.5px;
    }


    /* 이름표(::before)는 이제 필요 없다 — 값 옆에 제 이름이 붙어 있다 */
    table.rows.gaps-table:not(.how-table) tbody td::before { content: none; }

    /*
     * 값 위에 얹었던 이름(보통주·서울…)을 옆으로 내린다.
     * `<br>` 을 그대로 두면 '보통주 / 150,600' 두 줄이 된다.
     */
    table.rows.gaps-table:not(.how-table) tbody td .side-lab { display: inline; font-size: 10.5px; }
    table.rows.gaps-table:not(.how-table) tbody td .side-lab::after { content: ' '; }
    table.rows.gaps-table:not(.how-table) tbody td .side-lab + br { display: none; }

    /* 제목은 밑줄 없이 — 세 줄짜리 카드에 줄이 하나 더 있으면 답답하다 */
    table.rows.gaps-table:not(.how-table) tbody td.etf-cell {
        display: block;
        padding: 0;
        margin: 0;
        border: 0;
        text-align: left;
        font-weight: 600;
    }

    /* 벌어진 정도는 이 카드의 주인공이다 */
    table.rows.gaps-table:not(.how-table) tbody td.gap {
        font-size: 17px;
        font-weight: 700;
        align-self: start;
        padding: 0;
    }
    table.rows.gaps-table:not(.how-table) tbody td.kind-cell,
    table.rows.gaps-table:not(.how-table) tbody td.turnover-cell,
    table.rows.gaps-table:not(.how-table) tbody td.side-left,
    table.rows.gaps-table:not(.how-table) tbody td.side-right {
        font-size: 11.5px;
        padding: 0;
    }
    table.rows.gaps-table:not(.how-table) tbody td.kind-cell,
    table.rows.gaps-table:not(.how-table) tbody td.side-left { text-align: left; }

    /*
     * 여섯 줄만 두고 나머지는 감춘다. '더 보기'가 .펼침 을 붙인다.
     * 자바스크립트로 줄을 자르지 않는 이유는 app.js BOARD_FOLD 옆에 적어 두었다.
     */
    table.rows.gaps-table:not(.펼침) tbody tr:nth-child(n+7) { display: none; }
    .board-more { display: block; width: 100%; margin-top: 8px; padding: 8px; }

    /*
     * 순위 카드는 여덟 줄인데 폰에서는 몇 줄만 보인다(위에서 정한다).
     * 자르지 않고 감춘다 — 넓은 화면은 여덟 줄 그대로다.
     */
}

/* '더 보기' 단추 — 표 아래 가로로 꽉 */
.more-btn { display: block; width: 100%; margin-top: 8px; padding: 9px; }

/* 넓은 화면에서는 감출 이유가 없다 — 표가 한 줄에 한 종목이다 */
@media (min-width: 721px) {
    .board-more { display: none; }

}

/* --- 홈 화면에 추가 안내 ------------------------------------------------ */

/*
 * 화면 아래에 붙는 띠.
 *
 * 위에 띄우면 머리말과 겹치고, 가운데 띄우면 읽던 것을 가린다. 아래가 낫다.
 * 안전영역(safe-area)을 더하는 것은 아이폰 홈 막대에 단추가 가리지 않게 하려는 것이다.
 */
.install-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--surface-2);
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -6px 24px var(--shadow);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.install-inner {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 12px var(--page-pad);
    display: flex;
    align-items: center;
    gap: 14px;
}

.install-icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    background: var(--bg) url('/icons/icon.svg') center / 78% no-repeat;
    border: 1px solid var(--border);
}

.install-text { display: grid; gap: 1px; min-width: 0; }
.install-text b { font-size: 14px; }
.install-text span { font-size: 12px; color: var(--label); }

.install-buttons { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }

.install-go,
.install-later {
    font-family: inherit;
    font-size: 13px;
    border-radius: var(--radius);
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.install-go {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-solid);
    font-weight: 700;
}

.install-later {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-sub);
}
.install-later:hover { border-color: var(--label); color: var(--text); }

.install-close {
    flex: none;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    font-family: inherit;
}
.install-close:hover { color: var(--text); }

/*
 * 좁은 화면에서는 단추를 아래로 내린다.
 * 한 줄에 다 밀어 넣으면 '6시간 동안 안 보기'가 두 글자씩 접힌다.
 */
@media (max-width: 620px) {
    .install-inner { flex-wrap: wrap; gap: 10px; }
    .install-text { flex: 1; }
    .install-buttons { margin-left: 0; width: 100%; }
    .install-go, .install-later { flex: 1; text-align: center; }
    .install-close { position: absolute; top: 8px; right: 10px; }
}

/* --- ADR 프리미엄 추이 -------------------------------------------------- */

/*
 * 표 한 줄 아래에 끼워 넣는 차트.
 * 표 밖에 띄우면 어느 종목 차트인지 눈으로 안 이어진다.
 */
.chart-row td { padding: 0 8px 12px; border-bottom: 1px solid var(--border); }
.chart-row:hover td { background: none; }

.chart-note {
    margin: 6px 2px 0;
    font-size: 12px;
    color: var(--label);
    line-height: 1.5;
}
.chart-note b { color: var(--text); }

/* 이름 옆 '추이' 단추. 이름을 가리지 않게 작게 둔다. */
.etf-code .chart-toggle {
    font-family: inherit;
    font-size: 10px;
    padding: 1px 6px;
    margin-left: 4px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--accent);
    cursor: pointer;
    vertical-align: 1px;
}
.etf-code .chart-toggle:hover { border-color: var(--accent); }


/* =====================================================================
 * 폰 전용 (640px 이하)
 * ---------------------------------------------------------------------
 * 실제 폰(375px)에서 재 보니 맨 위 지표 띠 하나가 156px 이었다.
 * 일곱 항목이 접히면서 다섯 줄이 된 것이다. 그 아래 머리띠 82px,
 * 인사말 222px 까지 더하면, 정작 보러 온 표는 화면 밖에서 시작한다.
 *
 * 김프고와 같은 방식으로 고친다.
 *   1. 같은 종류가 여럿이면 접지 말고 옆으로 민다 (가로 스크롤)
 *   2. 값을 지우지 않는다
 *   3. 보러 온 것을 화면 첫 판에 올린다
 *
 * 폰에서만 쓰는 규칙을 파일 맨 끝에 한 덩이로 모은다. 여기만 지우면
 * 폰도 예전으로 돌아간다.
 * ===================================================================== */
@media (max-width: 640px) {

    /* --- 맨 위 지표 띠 (156px → 32px) ----------------------------------
     * 환율·코스피·코스닥·선물 넷... 일곱을 접으면 다섯 줄이다.
     * 한 줄로 두고 옆으로 밀게 한다. 환율은 늘 왼쪽에 보인다. */
    /* 처음에는 한 줄로 두고 옆으로 밀게 했다. 높이는 가장 낮았지만
     * 오른쪽 끝이 잘려 보여서 고장 난 화면으로 읽혔다 - 미는 줄인지
     * 잘린 줄인지 눈으로는 구별이 안 된다. 접되 빽빽하게 접는다. */
    .summary-inner {
        flex-wrap: wrap;
        gap: 2px 8px;
        padding: 4px 12px;
        /* 10.5px 인 까닭 - 11px 이면 둘째 줄의 셋(S&P500 선물·국내 장·
           동시접속자)이 합해서 360px 이 되어 351px 을 9px 넘긴다.
           그 9px 때문에 줄이 하나 더 생겼다. */
        font-size: 10.5px;
        /*
         * 숨 쉴 자리를 준다 — 2026-08-30
         *
         * 두 줄이 되면서 띠가 55px 로 납작해져 글자가 서로 붙어 보였다.
         * 세로 여백과 줄 높이는 **폭과 무관하므로 공짜다.** 가로(틈·안여백)는
         * 오히려 줄여서 그 자리를 글자 키우는 데 썼다.
         */
        line-height: 1.8;
        gap: 9px 3px;
        padding: 9px 2px;
    }
    .summary-item { flex: 0 0 auto; }

    /*
     * 줄바꿈 자리를 못박는다 — 2026-08-30
     *
     * 폭에 맡기면 `코스닥 | S&P500 선물` 처럼 국내 지수와 미국 선물이 한
     * 줄에 붙는다. 성격이 다른 둘이라 눈이 걸린다.
     *
     *     환율   코스피   코스닥          ← 국내
     *     S&P500 선물   나스닥100 선물   ← 미국
     *     국내 장   실시간
     *
     * 이 자리에 맞추려면 첫 줄에 셋이 들어가야 하는데 376px 이라 348px 을
     * 넘었다. 값 글자를 13.5 → 12px 로 낮춰 341px 로 맞췄다. 여유가 7px
     * 뿐이라, 값이 길어지는 날에는 그 줄만 두 줄이 된다 — 묶음은 안 흐트러진다.
     */
    .sum-break { display: block; flex-basis: 100%; height: 0; }

    /*
     * 폰에서만 차례를 바꾼다 — 2026-08-30
     *
     * '국내 장 마감' 이 셋째 줄에 혼자 남아 한 줄을 통째로 먹고 있었다.
     * 첫 줄로 올리려면 자리를 내줘야 하는데, 첫 줄이 341/348px 로 이미 꽉
     * 찼다. 일곱 항목을 두 줄에 넣는 것은 폭이 안 나온다 — 다 합쳐 836px
     * 인데 두 줄은 696px 이다.
     *
     * 그래서 차례를 바꿨다. **국내는 국내끼리 첫 줄**로 묶고, 환율은
     * 상태 딱지와 함께 셋째 줄로 내렸다.
     *
     *     코스피   코스닥   국내 장 마감      321 / 348
     *     S&P500 선물   나스닥100 선물      337 / 348
     *     환율   실시간                     168 / 348
     *
     * 넓은 화면에서는 차례를 안 바꾼다 — 거기서는 환율이 맨 앞이다.
     */
    /*
     * 세 줄을 국내 / 미국 / 환율·상태 로 가른다.
     *
     * '실시간' 딱지를 첫 줄에 두려고 order 4 로 올렸다가 되돌렸다 —
     * 첫 줄이 315px 라 딱지(49px)를 더하면 356px 을 넘어 둘째 줄로 밀리고,
     * 그러면 `실시간 | S&P500 선물` 처럼 성격이 다른 둘이 붙는다.
     */
    .summary-item:has(#sum-kospi) { order: 1; }
    .summary-item:has(#sum-kosdaq) { order: 2; }
    .summary-item:has(#sum-market) { order: 3; }
    .sum-break-1 { order: 4; }
    .summary-item:has(#sum-sp500) { order: 5; }
    .summary-item:has(#sum-nasdaq) { order: 6; }
    .sum-break-2 { order: 7; }
    .summary-item:has(#sum-fx) { order: 8; }
    .summary-right { order: 9; margin-left: 0; }

    /*
     * `nth-of-type` 은 여기서 못 쓴다 — 형제가 전부 `div` 라 반이 아니라
     * 태그를 센다. 끊기 둘에 이름을 따로 붙였다.
     *
     * ─ '국내 장' 이름을 감췄다가 되살렸다 ─────────────────────────────
     * 자리를 벌려고 이름을 감추고 값('마감')만 남겼다. "바로 앞이
     * 코스피·코스닥이라 무엇의 마감인지는 자리가 말해 준다"고 봤는데,
     * **틀렸다.** "뭐가 마감이야" 라는 말을 들었다.
     *
     * 값만 남기고 이름을 지우면, 그 값이 무엇의 값인지는 만든 사람 머릿속에만
     * 있다. 이름을 되살리고 대신 '실시간' 딱지를 제목 줄로 내보냈다.
     *
     *     코스피   코스닥   국내 장 마감        315 / 356
     *     S&P500 선물   나스닥100 선물        344 / 356
     */
    /*
     * 코스닥과 나스닥100 선물을 되살렸다 — 2026-08-30
     *
     * 전에는 폰에서 이 둘을 감췄다. "코스닥은 코스피와, 나스닥100 은
     * S&P500 과 같은 성격이라 하나씩만 남겨도 읽힌다"고 봤기 때문이다.
     * 그런데 **같은 성격이 같은 값은 아니다.** 이 날도 코스피 −1.79% 인데
     * 코스닥은 +0.09% 로 방향이 반대였다. 하나를 보고 다른 하나를 짐작할 수
     * 없으니, 감추면 그냥 없는 값이 된다.
     *
     * 줄이 둘에서 셋으로 는다(56 → 79px). 그 값을 치를 만하다 —
     * 화면에서 실시간으로 바뀌는 곳은 여기 하나뿐이다.
     */

    /*
     * 폰에서는 접속자 수를 빼고 '실시간' 딱지만 남긴다 — 2026-08-30
     *
     * 처음에는 이름('동시접속자')만 감췄다. 그랬더니 `2  실시간` 이 되어
     * **2가 무엇의 2인지 알 수 없는 숫자**가 됐다. 이름을 되살리면 넷째
     * 줄이 생긴다(78 → 100px).
     *
     * 이름 없는 숫자보다 없는 편이 낫다. 딱지만 남기면 '지금 값이 살아
     * 있다'는 것은 그대로 전해지고, 접속자 수는 넓은 화면에 그대로 있다.
     */
    .summary-right .label,
    .summary-right #sum-viewers { display: none; }

    /* --- 인사말 (222px → 약 120px) --------------------------------------
     * 첫 화면 맨 위에서 넉 줄짜리 설명이 화면의 4분의 1을 쓴다.
     * 무슨 사이트인지는 한 번 읽으면 되고, 매일 오는 사람은 값을 보러 온다.
     * 글자를 줄이고 여백을 좁힌다. 문장은 그대로 둔다. */
    /*
     * 설명 글의 여백을 더 조인다 — 2026-08-30
     * 한 문장씩 끊어 놓으니 문단 사이 여백이 문장 수만큼 쌓인다.
     */
    .hero { padding: 10px 11px; }
    /* 제목만 있는 소개 상자는 더 조인다 */
    .hero-slim { padding: 8px 11px; }
    .hero-slim h1 { margin-bottom: 0; }
    .hero-slim .hero-lead { margin-top: 3px; }

    /* 판 곁들이는 제목 밑에서 가운데로 — 왼쪽에 붙이면 제목과 겹쳐 보인다 */
    .panel-note { text-align: center; }
    .hero h1 { font-size: 18px; margin-bottom: 4px; }
    .hero h2 { font-size: 16px; margin-bottom: 4px; }
    .hero p { font-size: 12.5px; line-height: 1.5; }
    .hero-lead > p, .how-caveat > p { margin-bottom: 3px; }
    .hero-how { margin-top: 9px; }
    .how-caveat { padding: 8px 10px; margin-top: 8px; }
    .how-title { margin: 11px 0 4px; }
    .how-text { line-height: 1.55; }

    /* --- 화면 좌우 여백 --------------------------------------------------
     * 16px 은 넓은 화면에서 정한 값이라 375px 에서는 양옆으로 32px,
     * 곧 화면의 9%가 글자 없는 자리로 나간다. 아래 48px 은 빈 화면이다. */
    /*
     * 폰에서 바깥 여백 — 12 → 8. 카드마다 제 테두리가 있어서 바깥까지
     * 넉넉할 이유가 없다. 글 자리가 304 → 320px 로 는다.
     */
    .page-shell { padding: 10px 8px 28px; }
}

/* ======================================================================
 * 종목 훑어보기 — 검색·정렬 제목칸·더보기, 그리고 종목 카드(서랍)
 *
 * 시안(stockgohome.html)에서 표현만 가져왔다. 글꼴은 안 가져왔다 —
 * 시안은 구글 폰트 세 벌을 밖에서 받아오는데, 한글 폰트는 무거워서
 * 도착할 때까지 글자가 안 그려진다. 우리는 서비스워커로 오프라인에서도
 * 뜨게 해 둔 터라 폰트만 남의 서버에 있으면 그 부분이 깨진다.
 * ====================================================================== */

/* --- 검색칸 --------------------------------------------------------- */
.screen-search {
    position: relative;
    margin: 10px 0 2px;
}
.screen-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}
.screen-search input::placeholder { color: var(--muted); }
.screen-search input:focus {
    outline: none;
    border-color: var(--border-strong);
}
.screen-search .search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    pointer-events: none;
}

/* --- 정렬되는 제목칸 ------------------------------------------------- */
.screen-table thead th[data-sort] {
    cursor: pointer;
    user-select: none;
}
.screen-table thead th[data-sort]:hover { color: var(--text); }

/* 지금 정렬 중인 칸. 화살표는 글자 뒤에 붙여 자리를 따로 안 쓴다. */
.screen-table thead th[aria-sort] { color: var(--accent); }
.screen-table thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }
.screen-table thead th[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }

/* --- 누를 수 있는 줄 ------------------------------------------------- */
.card-row { cursor: pointer; }
.card-row:hover { background: var(--tint); }
.card-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.screen-more {
    display: block;
    width: 100%;
    padding: 11px;
    margin-top: 1px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.screen-more:hover { border-color: var(--border-strong); }

/* --- 종목 카드 (오른쪽 서랍) ----------------------------------------- */
.drawer-scrim {
    position: fixed;
    inset: 0;
    background: var(--shadow);
    z-index: 60;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(430px, 92vw);
    z-index: 61;
    overflow-y: auto;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 40px -18px var(--shadow);
}

/* 서랍이 열려 있는 동안 뒤쪽 표가 같이 굴러가면 어지럽다 */
body.drawer-open { overflow: hidden; }

.drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 15px 16px 13px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.drawer-close {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
}
.drawer-close:hover { color: var(--text); border-color: var(--border); }

.drawer-eyebrow { font-size: 11.5px; color: var(--label); }
.drawer-title {
    margin: 2px 0 0;
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.drawer-price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 7px;
}
.drawer-price strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.drawer-price span { font-size: 13px; font-variant-numeric: tabular-nums; }

.drawer-body {
    padding: 15px 16px 26px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

/* 두 칸짜리 값 목록 */
.kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.kv > div { background: var(--surface); padding: 9px 11px; }
.kv .k { font-size: 11px; color: var(--label); }
.kv .v {
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dsec h4 {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--label);
    letter-spacing: 0.03em;
}
.dsec-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.75;
    color: var(--muted);
    word-break: keep-all;      /* 한글이 낱말 중간에서 갈리지 않게 */
}

/* --- 52주 자리 막대 ---------------------------------------------------
 * 색을 중립으로 둔다. 아래쪽이라고 초록으로 칠하면 그 순간 '사라'는
 * 말이 된다. 우리는 잰 값만 적고 판단은 적지 않는다. */
.range-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.range-bar i {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--text-sub);
    transform: translateX(-50%);
}
.range-ends {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.range-ends b {
    color: var(--text-sub);
    font-size: 12px;
    word-break: keep-all;
}

@media (max-width: 640px) {
    /* 폰에서는 서랍이 아래에서 올라오는 편이 엄지에 가깝다 */
    .drawer {
        top: auto;
        width: 100%;
        max-height: 88vh;
        border-left: 0;
        border-top: 1px solid var(--border);
        border-radius: 12px 12px 0 0;
    }
    .drawer-title { font-size: 17px; }
    .drawer-price strong { font-size: 22px; }
}

/* ======================================================================
 * 첫 화면(벌어진 곳)에도 시안의 표 다루는 법을 입혔다.
 * 정렬되는 제목칸 · 누르면 열리는 종목 카드 · 갈래별 개수.
 * ====================================================================== */

/* 갈래 단추 옆의 개수. 눌러 보기 전에 "여긴 볼 게 있나"를 알 수 있다. */
.pick-count {
    margin-left: 5px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}
.chart-range.active .pick-count { color: inherit; opacity: 0.75; }

/* 정렬되는 제목칸 — /screen 과 같은 규칙이다 */
.gaps-table thead th[data-gsort] {
    cursor: pointer;
    user-select: none;
}
.gaps-table thead th[data-gsort]:hover { color: var(--text); }
.gaps-table thead th[aria-sort] { color: var(--accent); }
.gaps-table thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }
.gaps-table thead th[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }

/*
 * 첫 화면 표는 좁은 화면에서 카드로 바뀐다(.gaps-table 미디어쿼리).
 * 그때도 누를 수 있다는 것이 보여야 한다.
 */
@media (max-width: 760px) {
    .gaps-table tbody tr.card-row { cursor: pointer; }
}

/* ======================================================================
 * 시안(stockgohome.html) 생김새 입히기 — 표를 담는 그릇
 *
 * 시안의 표는 테두리 있는 둥근 상자 안에 들어 있고 제목줄이 그 위쪽을
 * 채운다. 우리는 표가 판 안에 맨몸으로 놓여 있어서, 판과 표의 경계가
 * 없었다. 표에 그릇을 씌운다.
 * ====================================================================== */

.table-scroll {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;      /* 제목줄 바탕이 둥근 모서리를 넘지 않게 */
    overflow-x: auto;
    background: var(--surface);
}

/* 그릇이 이미 테두리를 가졌으므로 표는 자기 테두리를 그리지 않는다 */
.table-scroll > table.rows { border-collapse: collapse; }

/*
 * 판 안에 표가 통째로 들어가는 화면(첫 화면·종목훑기)에서는 판의 아래
 * 여백이 겹쳐 보인다. 그릇이 경계를 맡으므로 판 쪽을 줄인다.
 */
.panel > .table-scroll { margin-top: 2px; }

/* 더 보기 단추는 그릇 바로 아래에 붙여 한 덩어리로 보이게 한다 */
.screen-more {
    margin-top: -1px;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* 히어로·서랍도 같은 모서리로 맞춘다 */
.hero { border-radius: var(--radius-card); }
.drawer { border-radius: var(--radius-card) 0 0 var(--radius-card); }

/* 검색칸·입력칸은 손이 닿는 것이라 한 단계 작은 모서리 */
.screen-search input { border-radius: var(--radius-sm); }

/*
 * 갈래별 요약 카드(첫 화면). 시안의 '오늘의 이상 신호' 카드와 같은 자리다.
 * 누를 수 있다는 것이 보여야 해서 마우스를 올리면 테두리가 앰버로 선다.
 */
.kind-card {
    border-radius: var(--radius-sm);
    transition: border-color 0.12s;
}
.kind-card:hover { border-color: var(--accent); }

/* --- 폰에서 티커 -------------------------------------------------------
 * 시안식 칸막이·여백을 그대로 쓰면 375px 에서 세 줄(약 90px)을 먹는다.
 * 화면 맨 위에서 90px 은 첫 화면의 9분의 1이다. 폰에서는 칸막이를 떼고
 * 여백을 좁혀 두 줄로 되돌린다. 값은 그대로 다 보인다. */
@media (max-width: 760px) {
    .summary-item {
        padding: 0;
        margin-right: 0;      /* 칸 사이는 .summary-inner 의 gap 이 맡는다 */
        border-right: 0;
        line-height: 1.5;
    }
    /*
     * 값을 키운다 — 2026-08-30
     *
     * 전에는 셋 다 10.5px 로 눌러 두었다. 한 줄이라도 덜 먹는 것이 낫다고
     * 봤기 때문이다. 그런데 이 띠가 **화면에서 유일하게 실시간으로 바뀌는
     * 곳**이다. 나머지는 다 마감 기준이다. 여기가 제일 작으면 안 된다.
     *
     * 이름은 작게 두고 값만 키운다. 줄바꿈을 정하는 것은 전체 폭이라,
     * 이름까지 키우면 줄이 하나 더 생긴다.
     */
    /*
     * 환율이 셋째 줄로 내려가면서 자리가 남아 글자를 도로 키웠다 — 2026-08-30
     *
     * 값 12 → 13.5px. 재 보니 여기가 한계다.
     *
     *     값 13.5  →  [318, 339, 166] / 352   ✔ 여유 13px
     *     값 14    →  줄이 넷이 된다            ✘
     *
     * 앞서 코스닥을 첫 줄로 올리느라 13.5 → 12 로 줄였던 것을 되돌린 셈이다.
     */
    /*
     * 이름·값·등락을 한 크기로, 어깨를 맞춘다 — 2026-08-30
     *
     * 이름 10px 에 값 14.5px 이라 글자 크기가 널을 뛰었다. 크기가 다르면
     * 밑줄(baseline)을 맞춰도 눈에는 들쭉날쭉해 보인다.
     *
     * 셋을 같은 크기로 두고, **값은 굵기와 색으로 구별한다** — 크기를 키우지
     * 않아도 굵은 흰 글씨는 옅은 이름 옆에서 충분히 도드라진다.
     *
     * 크기는 둘째 줄(S&P500 선물 + 나스닥100 선물)이 정한다. 재 본 값:
     *
     *     13    [346, 175, 194]  셋째 줄이 생긴다
     *     12.5  [335, 169, 186]  셋째 줄이 생긴다
     *     12    [325, 344] / 356  여유 12   ← 여기
     *     11.5  [314, 331] / 356  여유 25
     *
     * 12px 이 최대다. 값이 한 자리 늘어도(약 7px) 버틴다.
     */
    .summary-item .label,
    .summary-item strong,
    .summary-item .sub,
    .summary-item .status { font-size: 12px; }
    .summary-item { gap: 3px; align-items: baseline; }
}

/* ======================================================================
 * 첫 화면 — 오늘 시장(신호 카드) · 오늘 어디가 움직였나(랭킹 탭)
 * 시안(stockgohome.html)의 '오늘의 이상 신호'와 탭을 우리 자료로 담은 것.
 * ====================================================================== */

.signal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.signal {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 12px 14px;
}
.signal .l { font-size: 11.5px; color: var(--label); font-weight: 600; }
.signal .v {
    margin-top: 3px;
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.signal .m { margin-top: 2px; font-size: 11px; color: var(--muted); }

/*
 * 폰에서는 바싹 조인다 — 2026-08-30
 *
 * 여섯 칸을 세 칸씩 두 줄로. 두 칸씩이면 세 줄이 되고, 칸마다 남는 가로
 * 자리가 그대로 버려진다. 360px 에서 한 칸이 102px 이면 '2,138' 도
 * '8 · 0' 도 들어간다.
 *
 * **이 규칙은 반드시 `.signal-cards` 정의 뒤에 있어야 한다.** 앞에 두었다가
 * 기본값(`repeat(auto-fit, minmax(150px, 1fr))`)에 덮여 두 칸 그대로였다.
 * 무게가 같으면 뒤가 이긴다.
 */
@media (max-width: 720px) {
    .signal-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    /*
     * 이름과 값을 한 줄에 — 2026-08-30
     *
     * 이름·값·곁들이를 세로로 쌓아 한 장이 세 줄이었다. 이름 옆이 통째로
     * 비는데 값은 그 아래에 있었다. 값을 오른쪽에 붙이면 두 줄이 된다.
     *
     *     오른 종목  2,138
     *     전체 4,305종목의 50%
     *
     * 안여백을 6 → 5px 로 줄인 것은 곁들이 두 개가 2px 차이로 두 줄이 되기
     * 때문이다. '거래대금 상위 200종목' 이 92px, 칸이 90px 이었다.
     */
    .signal {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 4px;
        align-items: baseline;
        padding: 5px 5px 6px;
        border-radius: 7px;
    }
    /*
     * 이름을 크게, 숫자를 작게 — 2026-08-30
     *
     * 이름 9.5px 에 숫자 17px 이라 주객이 뒤바뀌었다. **무엇을 센 값인지가
     * 먼저 읽혀야** 숫자가 뜻을 갖는다. '2,138' 만 커 봐야 무엇의 2,138 인지
     * 모르면 아무 말도 아니다.
     */
    .signal .l {
        grid-area: 1 / 1 / 2 / 2;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--text-sub);
        line-height: 1.25;
    }
    .signal .v { grid-area: 1 / 2 / 2 / 3; font-size: 14px; margin: 0; line-height: 1.2; }
    .signal .m {
        grid-column: 1 / -1;
        font-size: 9px;
        margin-top: 1px;
        line-height: 1.3;
    }
}

/*
 * 랭킹 탭. 시안처럼 굵고 크게 두고 밑줄로 지금 자리를 짚는다.
 * 고르는 단추(.chart-range)와 생김새를 일부러 다르게 했다 — 저쪽은 조건을
 * 좁히는 것이고 이쪽은 보는 것을 통째로 바꾸는 것이라 무게가 다르다.
 */
.rank-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.rank-tabs::-webkit-scrollbar { display: none; }

.rank-tab {
    padding: 0 2px 9px;
    background: none;
    border: 0;
    border-bottom: 2.5px solid transparent;
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s;
}
.rank-tab:hover { color: var(--text); }
.rank-tab.active { color: var(--text); border-bottom-color: var(--accent); }

/*
 * '옆으로 밀어 본다'를 그만뒀다 — 2026-08-29
 * 접으면 더 안 읽힌다고 봤는데, 360px 에서 재 보니 밀어도 안 읽힌다.
 * 종목 이름 칸이 한 글자 폭으로 눌린다.
 */
@media (max-width: 640px) {
    /*
     * 여기 있던 `.signal-cards { 1fr 1fr }` 와 `.signal .v { 20px }` 를 뺐다.
     * 위 720px 블록에서 세 칸으로 바꿔 놓았는데 이 블록이 뒤에 있어서
     * 그대로 두 칸으로 되돌려 놓고 있었다 — 무게가 같으면 뒤가 이긴다.
     */
    .rank-tabs { gap: 14px; }
    .rank-tab { font-size: 14px; }
}

/* ======================================================================
 * 첫 화면 게시판 — 시안의 뼈대(탭 → 표)
 * ====================================================================== */

.board-panel { padding-top: 4px; }

/*
 * 탭. 시안처럼 굵고 크게, 지금 자리는 앰버 밑줄.
 * 아래 칩(.chart-range)과 생김새를 일부러 다르게 했다 — 탭은 보는 것을
 * 통째로 바꾸고 칩은 조건을 좁힐 뿐이라 무게가 다르다.
 */
.board-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.board-tabs::-webkit-scrollbar { display: none; }

.board-tab {
    padding: 12px 2px 11px;
    background: none;
    border: 0;
    border-bottom: 2.5px solid transparent;
    color: var(--muted);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s;
}
.board-tab:hover { color: var(--text); }
.board-tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* 탭 옆 개수. 눌러 보기 전에 "여긴 볼 게 있나"를 알 수 있다. */
.board-tab .cnt {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.board-tab.active .cnt { color: var(--accent); }

.board-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding: 13px 0 12px;
}
/* 넓은 화면은 원래 이름 — 짧은 이름은 폰에서만(아래 미디어쿼리) */
.board-chips .chip-short { display: none; }

/* 폰에서만 줄을 끊는다 — 넓은 화면은 한 줄에 다 들어간다 */
.sum-break { display: none; }

/*
 * 오늘 제일 벌어진 것 하나. 표 바로 위에 앉는다.
 * 판 안에 들어왔으므로 자기 테두리는 그리지 않고 바탕만 한 단계 눌러 둔다.
 */
.board-panel .headline-panel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.board-panel #board-note { margin: 12px 0 0; }

/* ----------------------------------------------------------------------
 * 폰에서 '제일 크게 벌어진 순' 판을 조인다 — 2026-08-30
 * ---------------------------------------------------------------------- */
@media (max-width: 720px) {
    /*
     * ① 갈래 칩을 한 줄로.
     *
     * 다섯 개가 접혀 세 줄(약 100px)이 됐다. 한 줄에 두고 옆으로 밀게 한다.
     * 표를 옆으로 미는 것과는 다르다 — 저쪽은 한 종목의 값이 잘려 못 읽지만,
     * 이쪽은 칩 하나가 온전히 보이고 다음 칩이 반쯤 보여 **더 있다는 것이
     * 눈에 보인다.** 위 갈래 탭(.subnav)도 같은 방식이다.
     */
    .board-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 4px;
        padding: 0 0 9px;
    }
    .board-chips::-webkit-scrollbar { display: none; }
    .board-chips .chart-range {
        flex: none;
        padding: 5px 7px;
        font-size: 11px;
    }
    .board-chips .pick-count { margin-left: 4px; }

    /* 폰에서는 짧은 이름을 쓴다 — 원래 이름 다섯이면 481px 이 필요하다 */
    .board-chips .chip-long { display: none; }
    .board-chips .chip-short { display: inline; }

    /*
     * ② 오늘 제일 벌어진 것 하나 — 상자를 줄인다.
     * 안여백 16px 에 큰 숫자 36px, 설명 두 줄로 255px 이었다.
     */
    .board-panel .headline-panel {
        padding: 10px 11px 11px;
        margin-bottom: 9px;
    }
    /* 안쪽 상자에도 22px 여백이 또 있었다 — 42px 이 그냥 빈 자리였다 */
    .headline { padding: 10px 12px 11px; gap: 2px; }
    .headline-kind { font-size: 11px; }
    .headline-name { font-size: 15px; }
    .headline-value { font-size: 30px; line-height: 1.05; margin: 1px 0; }
    .headline-sides { font-size: 12px; }
    .headline-why { font-size: 11px; line-height: 1.45; margin-top: 4px; }

    .board-panel #board-note { margin: 9px 0 0; }
}

/* ======================================================================
 * 종목 순위 — 김프고와 같은 방식(crypto-ball 의 .rank-grid)
 *
 * 넷을 나란히 놓아 한눈에 보여준다. 탭은 하나씩 눌러 봐야 알기 때문이다.
 * 형제 사이트끼리 같은 자리에 같은 모양으로 두어, 주소를 안 봐도 어느
 * 사이트에 있는지 알게 한다.
 * ====================================================================== */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 9px;
    row-gap: 1px;
    margin: 0 0 10px;
}
.section-head h1,
.section-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
    line-height: 1.2;
}
.section-sub { color: var(--muted); font-size: 12.5px; }

.rank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 10px;
}

.rank-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    /*
     * 이게 없으면 폰에서 화면이 옆으로 밀린다.
     *
     * 그리드 칸의 기본 최소 폭은 min-content 다. 카드 제목('제일 벌어진 곳
     * 같은 것의 두 값 차이')이 길어서 그 최소 폭이 311px 이 되고, 1fr 로
     * 나눠도 칸이 그만큼 벌어져 375px 화면을 넘어섰다.
     * 0 으로 두어야 칸이 제 몫까지 줄어든다.
     */
    min-width: 0;
}
.rank-card h4 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 9px;
    font-size: 13.5px;
    font-weight: 700;
    flex-wrap: wrap;
}
.rank-card h4 a { color: var(--text); }
.rank-card h4 a:hover { color: var(--accent); }
/* 곁들이에 무엇과 견줬는지를 적는다. 제목은 잰 것만 적는다. */
.rank-card h4 span { color: var(--muted); font-size: 11.5px; font-weight: 400; }

.rank-list { margin: 0; padding: 0; list-style: none; min-width: 0; }

.rank-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 5px 4px;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
}
button.rank-row { cursor: pointer; }
button.rank-row:hover { background: var(--tint); }
button.rank-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.rank-no {
    color: var(--faint, var(--muted));
    font-size: 11px;
    width: 12px;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.rank-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rank-row strong {
    flex: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    /* 두 칸씩. 한 칸으로 떨어뜨리면 네 칸이 세로로 길게 늘어져 그 아래
       표가 화면 밖으로 밀린다. */
    .rank-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .rank-card { padding: 11px 11px; }
    .rank-card h4 { font-size: 12.5px; }
    .rank-row { font-size: 11.5px; gap: 6px; padding: 4px 2px; }

    /*
     * 한 칸에 한 카드씩 — 2026-08-30
     *
     * 두 칸으로 놓으면 이름 칸이 62px 밖에 안 돼서 '아모레퍼시픽우'가
     * '아모레퍼시 / 픽우' 로 접혔다. 자르면 어느 종목인지 모르고, 접으면
     * 줄이 들쭉날쭉해 훑기가 나쁘다.
     *
     * 한 칸으로 펴면 이름 칸이 200px 남짓이 되어 **한 줄에 다 들어간다.**
     * 대신 카드 넷이 세로로 쌓이므로 줄 수를 다섯에서 넷으로 줄인다.
     */
    .rank-grid { grid-template-columns: 1fr; gap: 6px; }
    .rank-card { padding: 8px 10px 6px; }
    .rank-card h4 { font-size: 12px; margin-bottom: 5px; }
    .rank-row { padding: 3px 2px; }
    .rank-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
    }
    .rank-list li:nth-child(n+5) { display: none; }
}

/* ======================================================================
 * 서학계산기 결과 표
 *
 * 두 덩어리로 갈랐다 — 위에서 아래로 더해 맞아떨어지는 '사슬'과,
 * 평가금액 안에 이미 반영돼 있어 또 빼면 안 되는 '참고'.
 * 전에는 이 둘이 섞여 있어 사람이 빼 보면 실수령액이 안 나왔다.
 * ====================================================================== */

/* 덩어리 제목줄 */
.calc-result tr.calc-group th {
    text-align: left;
    padding: 16px 12px 8px;
    background: none;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text);
}
.calc-result tr.calc-group:first-child th { padding-top: 4px; }
.calc-result tr.calc-group th span {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--muted);
}

/* 사슬의 마디 — 여기서 값이 한 번 정해진다 */
.calc-result tr.step td { font-weight: 600; }

/*
 * 빼는 줄. 한 칸 들여써서 '위 줄에서 빠져나가는 것'임을 눈으로 보이게 한다.
 * 색은 쓰지 않는다 — 빨강·파랑은 이 사이트에서 오르내림을 뜻한다.
 */
.calc-result tr.sub td { color: var(--text-sub); }
.calc-result tr.sub td:first-child { padding-left: 26px; font-size: 12.5px; }

/* 실수령액 — 이 표의 답 */
.calc-result tr.total td {
    border-top: 2px solid var(--border-strong);
    font-weight: 700;
    font-size: 15px;
}
.calc-result tr.strong td { font-weight: 600; }

.calc-result td:not(:first-child) { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    /* min-width: 460px 를 뺐다 — 320px 그릇에서 옆으로 밀려 안 보였다 */
    .calc-result tr.sub td:first-child { padding-left: 18px; }
}

/* ======================================================================
 * 그때 샀으면 지금 얼마
 *
 * 종목이 오른 폭과 내 수익률을 나란히 두는 것이 이 화면의 요점이다.
 * 적립식은 나중에 넣은 돈이 오를 시간이 짧아 둘이 크게 갈린다.
 * ====================================================================== */

.bt-wide { grid-column: 1 / -1; }

/* --- 종목 고르는 판 (김프고의 방식) ------------------------------------
 *
 * 단추를 누르면 찾는 칸과 목록이 같이 열린다. 여는 단추는 달 고르는 판
 * (.mp-open)과 같은 옷을 입어야 한다 — 나란히 놓이는 자리라 하나만 다르면
 * 어긋나 보인다.
 */
.sp-field { position: relative; font-size: 12px; color: var(--label); min-width: 0; }

.sp-open {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-top: 3px;
    padding: 7px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    height: 34px;
    box-sizing: border-box;
    cursor: pointer;
}
.sp-open:hover { border-color: var(--border-strong); }
.sp-open[aria-expanded="true"] { border-color: var(--accent); }
.sp-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 이름이 길면 이름이 줄고, 코드는 끝까지 보인다 */
.sp-open > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-open .dim { margin-left: auto; flex: none; font-size: 11.5px; }
/* 아래를 가리키는 표시. 무엇을 눌러야 하는지 알린다. */
.sp-open::after { content: '⌄'; flex: none; margin-left: 4px; color: var(--muted); line-height: 1; }
.sp-open:not(:has(span))::after { margin-left: auto; }

.sp-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/*
 * `:not()` 셋을 그대로 달아야 한다 — 위의
 * `.calc-group input:not([type=radio]):not([type=checkbox])` 가 숫자용으로
 * `text-align: right` 를 건다. 그대로 두면 찾는 글자가 오른쪽에 붙는다.
 */
.sp-pop input[type="search"]:not([type="radio"]):not([type="checkbox"]) {
    width: 100%;
    height: auto;
    padding: 7px 9px;
    margin-bottom: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    font-variant-numeric: normal;
    box-sizing: border-box;
}
.sp-pop input[type="search"]:focus { outline: none; border-color: var(--accent); }

/*
 * 목록. 열둘이 넘으면 판이 화면을 다 먹으니 안에서 굴린다.
 * 세로로 쌓아 이름과 코드를 양끝에 둔다 — 김프고와 같다.
 */
.bt-picks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 232px;
    overflow-y: auto;
}
.bt-picks:empty { display: none; }

/*
 * 사는 방식 고르기.
 *
 * 라디오 동그라미를 세로로 늘어놓으면 고르는 것인지 읽는 것인지 헷갈린다.
 * 누를 수 있어 보이는 칸 둘로 만들고, 고른 쪽에 테두리 색을 준다.
 */
.bt-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.bt-mode {
    display: block;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}
.bt-mode input { position: absolute; opacity: 0; pointer-events: none; }
.bt-mode span { display: block; font-size: 11px; color: var(--muted); }
.bt-mode b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 1px;
}
.bt-mode:hover { border-color: var(--border-strong); }
.bt-mode:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.bt-mode:has(input:checked) b { color: var(--accent); }
.bt-mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * 빠른 기간 단추.
 *
 * 김프고의 '그때 샀다면' 에 있는 방식을 가져왔다. 날짜를 고르기 전에
 * **무슨 날짜를 넣어야 하나**에서 막히는 것이 제일 큰 걸림돌이었다.
 */
.bt-quick {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}
.bt-quick button {
    padding: 4px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-sub);
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
}
.bt-quick button:hover { border-color: var(--accent); color: var(--text); }
.bt-quick button.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-solid);
    font-weight: 700;
}
.bt-quick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 짧은 칸 둘은 나란히. 세로로 쌓으면 자리만 먹는다. */
.bt-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.bt-two label { display: block; font-size: 12px; color: var(--label); min-width: 0; }

/* --- 달 고르는 판 ------------------------------------------------------
 *
 * `<input type="month">` 자리를 대신한다. 여는 단추는 옆칸 '금액' 과
 * 똑같이 생겨야 한다 — 하나는 입력칸이고 하나는 단추라는 걸 눈이 알 필요가
 * 없다. 그래서 `.calc-group input` 의 서식을 그대로 베낀다.
 */
.mp-field { position: relative; }

.mp-open {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 7px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    /* 고른 값이니 왼쪽에서 읽는다. 옆칸 금액은 숫자라 오른쪽 정렬이 맞다. */
    text-align: left;
    height: 34px;
    box-sizing: border-box;
    cursor: pointer;
}
.mp-open:hover { border-color: var(--border-strong); }
.mp-open[aria-expanded="true"] { border-color: var(--accent); }
.mp-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mp-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 232px;
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.mp-head {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    margin-bottom: 6px;
}
/*
 * 가운데 제목은 누를 수 있는 것이다 — 눌러서 해 고르는 판으로 넘어간다.
 * 화살표만 두었더니 열 해를 거스르려면 열 번을 눌러야 했고, 화살표가 작아
 * 연도를 아예 못 바꾼다고 여긴 사람이 있었다. 밑줄로 누를 곳임을 밝힌다.
 */
.mp-title,
.mp-title-flat {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.mp-title {
    background: none;
    border: none;
    padding: 4px 0;
    font-family: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
    cursor: pointer;
}
.mp-title:hover { color: var(--accent); text-decoration-color: var(--accent); }
.mp-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 해 판은 네 자리 숫자라 달보다 칸이 넓어야 한다. */
.mp-grid-year .mp-cell { font-size: 11.5px; padding: 8px 0; }

/* 왜 날이 없는지. 고르는 것을 가리지 않게 맨 아래에 작게 둔다. */
.mp-foot {
    margin: 7px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    word-break: keep-all;
}
.mp-nav {
    height: 24px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.mp-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mp-nav:disabled { opacity: 0.3; cursor: default; }

.mp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.mp-cell {
    padding: 7px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.mp-cell:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
/*
 * 고른 달은 테두리만이 아니라 바탕까지 바꾼다. 열두 칸 중 하나를 테두리
 * 색 하나로 찾게 하면 눈이 훑어야 한다.
 */
.mp-cell.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-solid);
    font-weight: 700;
}
/* 아직 오지 않은 달. 지난 시세가 없으니 고를 것이 없다. */
.mp-cell:disabled { opacity: 0.28; cursor: default; }

/* ======================================================================
 * '오늘 시장' 칸에서 넘어왔을 때 — 무엇으로 좁혀졌나
 *
 * 안 밝히면 '5% 넘게 움직임 265' 를 눌러 온 사람이 265줄짜리 표를 보고
 * 전체 목록인 줄 안다.
 * ====================================================================== */

.screen-only {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 10px;
}
.only-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 11px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
}
.only-tag button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0.75;
}
.only-tag button:hover { opacity: 1; }
.only-note { color: var(--muted); font-size: 11.5px; }

/* ======================================================================
 * 종목 마크
 *
 * "코인은 엠블럼이 있는데 주식은 없나" — 없다.
 *
 * 코인은 CoinGecko 같은 곳이 심볼 그림을 표준처럼 모아 두지만, 국내 주식은
 * 그런 것이 없다. 회사 로고를 쓰면 두 가지가 걸린다.
 *   1. 로고는 상표다. 남의 CDN(네이버 등)에서 끌어 쓰면 권리도 트래픽도 남의 것이다.
 *   2. 밖에서 그림을 받아 오면 우리가 끊어 둔 데이터를 다시 쓰게 된다.
 *
 * 그래서 **우리가 그린다.** 종목코드로 색을 정하고 이름 앞 두 글자를 넣는다.
 * 같은 종목은 늘 같은 색이라 목록에서 눈으로 찾을 수 있고, 밖으로 아무것도
 * 안 부르며, 남의 상표를 쓰지 않는다.
 * ====================================================================== */

.mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;

    /* --mark-h(색상각)는 종목코드에서 나온다. app.js 의 마크색() */
    background: hsl(var(--mark-h) 42% 20%);
    color: hsl(var(--mark-h) 72% 76%);
    border: 1px solid hsl(var(--mark-h) 38% 30%);
}
/*
 * 밝은 바탕용 마크. **베이지도 같이 걸어야 한다** — 안 걸면 어두운 테마
 * 마크(짙은 상자에 옅은 글자)가 누런 바탕에 그대로 얹혀 저 혼자 판다.
 */
:root[data-theme="light"] .mark,
:root[data-theme="beige"] .mark {
    background: hsl(var(--mark-h) 62% 93%);
    color: hsl(var(--mark-h) 55% 32%);
    border-color: hsl(var(--mark-h) 45% 80%);
}
.mark-sm { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; }

/*
 * 우선주 이름 끝의 '우' — 2026-08-30
 *
 * 이름은 공식 상장명 그대로 두고 끝 글자만 짚는다. 오르내림 색(빨강·파랑)은
 * 뜻이 정해져 있으므로 안 쓴다. 앰버는 이 사이트에서 '짚어 두는 것'의 색이다.
 */
.pref-mark {
    color: var(--accent);
    font-weight: 700;
}

/*
 * '오늘 시장' 칸은 이제 링크다 — 2026-08-30
 *
 * 전에는 그냥 <div> 라 눌러도 아무 일이 없었다. 첫 화면의 다른 것은 전부
 * 넘어가거나 카드가 열리는데 여기만 죽어 있었다.
 */
.signal {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s;
}
.signal:hover { border-color: var(--accent); background: var(--tint); }
.signal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * 찾은 종목 단추. 마크와 이름과 코드를 한 줄에 세운다.
 * 좁은 화면에서는 한 줄에 하나씩 — 두 개씩 세우면 이름이 잘린다.
 */
/*
 * 판 안의 한 줄. 이름은 왼쪽, 코드는 오른쪽 끝 — 김프고와 같다.
 * 테두리를 없앤다. 판 안에서는 줄마다 테두리가 있으면 눈이 시끄럽다.
 */
.bt-pick {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 7px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    /*
     * 글자색을 꼭 적어야 한다 — 2026-08-31
     *
     * `<button>` 은 아무것도 안 적으면 브라우저 기본색(검정)이 된다.
     * `chart-range` 를 떼면서 그 클래스가 주던 색까지 같이 잃었고, 어두운
     * 판에 **검은 글씨**가 얹혀 대비가 1.33 이 됐다. 거의 안 보인다.
     * 물려받게(`inherit`) 두는 것도 안 된다 — 위 `.sp-field` 가 이름표용
     * 흐린 색이라 그것을 물려받는다.
     */
    color: var(--text);
    cursor: pointer;
}
.bt-pick:hover { background: var(--surface); }
/*
 * 이름은 한 줄로 자른다. 접히면 줄 높이가 들쭉날쭉해져 목록을 훑기 어렵다
 * (`KODEX SK하이닉스단일종목레버리지` 같은 것이 흔하다). 코드가 오른쪽
 * 끝에 있으니 무엇인지는 가려지지 않는다.
 */
.bt-pick .pick-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.bt-pick .pick-count {
    margin-left: auto;
    flex: none;
    color: var(--muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.bt-chosen {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.bt-result {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-2);
    padding: 18px;
}

/* 답 하나를 크게 건다 — 줄을 늘어놓으면 눈에 안 남는다 */
.bt-head { text-align: center; padding-bottom: 14px; }
.bt-eyebrow { font-size: 12px; color: var(--label); }
.bt-big {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    margin: 4px 0 6px;
    font-variant-numeric: tabular-nums;
}
.bt-sub { font-size: 13.5px; color: var(--text-sub); word-break: keep-all; }
.bt-sub b { color: var(--text); }

/* 종목 등락률 vs 내 수익률 */
.bt-compare {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
    margin-bottom: 12px;
}
.bt-compare .bt-mine b { font-size: 15px; }
.bt-why {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.75;
    color: var(--muted);
    word-break: keep-all;
}

/*
 * 물어본 달과 다른 달부터 계산했을 때의 알림.
 *
 * 카드 맨 아래에 둔다. 수익률을 가리면 안 되지만, 다 읽고 나서는 반드시
 * 봐야 하는 말이다. 왼쪽에 선을 세워 본문과 가른다.
 */
.bt-shift {
    margin: 8px 0 0;
    padding-left: 8px;
    border-left: 2px solid var(--accent);
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--muted);
    word-break: keep-all;
}
.bt-shift b { color: var(--text-sub); }

/* 계산 못 한 카드. 값이 없으니 자리도 작게 잡는다. */
.bt-card-fail { align-self: start; }

.bt-rows { display: flex; flex-direction: column; }

.bt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}
.bt-row span { color: var(--label); word-break: keep-all; }
.bt-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-row.dim b { color: var(--muted); font-weight: 400; }

.bt-row.bt-total {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
}
.bt-row.bt-total b { font-size: 16px; font-weight: 700; }

/*
 * 결과 줄을 두 칸으로 — 2026-08-31
 *
 * 한 줄에 하나씩 놓으니 여덟 줄이었다. 값이 짧아(`184주`·`4.7배`) 오른쪽이
 * 늘 비어 있었는데, 그 빈자리에 다음 줄을 넣으면 절반이 된다.
 *
 * `지금 평가액` 두 줄만 통째로 쓴다 — 그게 답이라서 옆에 뭘 붙이면 묻힌다.
 */
.bt-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
}
.bt-row.bt-total { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .bt-result { padding: 12px; }
    .bt-big { font-size: 32px; }
    .bt-row { font-size: 12px; padding: 4px 0; gap: 6px; }
    .bt-rows { column-gap: 10px; }
    .bt-row.bt-total { margin-top: 2px; padding-top: 7px; }
    .bt-row.bt-total b { font-size: 15px; }
}

/* --- 그때 샀으면: 그래프와 두 종목 견주기 ------------------------------ */

.bt-when { margin: 0 0 10px; font-size: 12.5px; color: var(--label); }

.bt-chart { margin-bottom: 6px; }
.bt-svg {
    width: 100%;
    height: 200px;
    display: block;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* 어느 선이 무엇인지. 색만으로는 못 알아보는 사람이 있어 글자를 같이 둔다. */
.bt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 7px;
    font-size: 11.5px;
    color: var(--label);
}
.bt-key { display: inline-flex; align-items: center; gap: 5px; }
.bt-key i { width: 14px; height: 3px; border-radius: 2px; display: block; }
.bt-key i.dash {
    background: none;
    border-top: 2px dashed var(--muted);
    height: 0;
}

.bt-note {
    margin: 6px 0 14px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--muted);
    word-break: keep-all;
}

/* 종목 딱지 — 고른 것 */
.bt-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 9px;
    margin-right: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--text);
}
/* 동그라미는 그래프의 선 색이다 — 마크(종목의 표시)와 뜻이 다르니 둘 다 둔다 */
.bt-tag i { width: 8px; height: 8px; border-radius: 50%; display: block; flex: none; }
.bt-tag { padding-left: 7px; gap: 5px; }
.bt-drop {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    padding: 0 2px;
    line-height: 1;
}
.bt-drop:hover { color: var(--text); }

/* 결과 카드 — 하나면 한 칸, 둘이면 두 칸 */
.bt-cards { display: grid; gap: 12px; }
.bt-cards.two { grid-template-columns: 1fr 1fr; }

.bt-card {
    min-width: 0;          /* 그리드 칸이 안 줄어들어 화면이 밀리는 것을 막는다 */
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 14px;
}
.bt-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 4px;
}
.bt-card-head i { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.bt-card .bt-big { font-size: 30px; margin: 0 0 4px; text-align: left; }
.bt-card .bt-sub { text-align: left; font-size: 12.5px; }
.bt-card .bt-compare { margin: 10px 0 8px; }

@media (max-width: 640px) {
    /* 두 칸으로 나누면 한 칸이 150px밖에 안 돼 숫자가 줄바꿈된다 */
    .bt-cards.two { grid-template-columns: 1fr; }
    .bt-svg { height: 150px; }
    .bt-card { padding: 10px; }
    .bt-card .bt-big { font-size: 26px; margin: 0 0 2px; }
    .bt-card .bt-sub { font-size: 11.5px; line-height: 1.45; }
    .bt-card .bt-compare { margin: 7px 0 5px; }
    .bt-card-head { margin-bottom: 2px; }
    .bt-when { margin-bottom: 6px; font-size: 11.5px; }
    .bt-chart { margin-bottom: 4px; }
    .bt-legend { gap: 8px; margin-bottom: 4px; font-size: 11px; }
    /*
     * 두 종목을 나란히 견줄 때만 뜻이 있는 줄이다. 하나만 보고 있으면
     * '이 종목이 오른 폭'과 '내 수익률'이 남은 현금만큼만 다르다.
     * 자리를 반씩 나눠 한 줄에 앉힌다.
     */
    .bt-card .bt-compare { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
}

/* ======================================================================
 * 하위 탭 — 같은 무리 안에서 화면을 옮긴다
 *
 * /calc 한 화면에 도구 셋이 들어 있어 폰에서 11.3판이었다. 도구마다
 * 주소를 나누면서 상단 탭을 늘리는 대신 여기에 뒀다.
 *
 * 상단 탭과 생김새를 일부러 다르게 했다 — 위는 화면을 통째로 바꾸는 것이고
 * 여기는 같은 주제 안에서 옮기는 것이라 무게가 다르다.
 * ====================================================================== */

.subnav {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav:empty { display: none; }

.subnav-item {
    flex: 1;
    padding: 8px 14px;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: color 0.12s, background 0.12s;
}
.subnav-item:hover { color: var(--text); }
.subnav-item.active {
    background: var(--accent);
    color: var(--on-solid);
}

@media (max-width: 640px) {
    .subnav { margin-bottom: 13px; }
    .subnav-item { padding: 8px 10px; font-size: 12.5px; }
}

/* ======================================================================
 * 읽을거리를 절 단위로 접는다
 *
 * 폰에서 이 덩어리만 2,900px(약 3.6판)이었다. 제목만 늘어놓고 누르면
 * 펴지게 바꿨다 — 목차처럼 훑고 궁금한 절만 연다.
 *
 * **글은 HTML 안에 그대로 있다.** <details>로 보이지 않게만 접은 것이고
 * 눌러서 불러오는 방식이 아니다. 검색엔진은 이 안의 글을 그대로 읽는다.
 * ====================================================================== */

.lf-part {
    border-bottom: 1px solid var(--border);
}
.lf-part:last-of-type { border-bottom: 0; }

.lf-part > summary {
    list-style: none;
    cursor: pointer;
    padding: 13px 28px 13px 0;
    position: relative;
}
.lf-part > summary::-webkit-details-marker { display: none; }

/* 제목의 바깥 여백은 summary가 맡는다 — 안 그러면 접었을 때 틈이 뜬다 */
.lf-part > summary > h3 {
    display: inline;
    margin: 0;
}

/* 펴짐 표시. 오른쪽 끝에 두어 제목 길이와 상관없이 자리가 같다. */
.lf-part > summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.15s;
}
.lf-part[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}

.lf-part > summary:hover::after { border-color: var(--accent); }
.lf-part > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* 펼쳤을 때 본문. 제목과 붙지 않게 위를 띄우고 아래도 여백을 준다. */
.lf-part[open] > :not(summary):first-of-type { margin-top: 2px; }
.lf-part[open] { padding-bottom: 10px; }

/* 절 안의 소제목은 한 단계 들여 제목과 헷갈리지 않게 한다 */
.lf-part h4 { margin-top: 16px; }

/* --- 칸 하나가 종목 하나일 때 (우선주·ADR) ----------------------------
 * 한 줄에 종목이 둘이라 줄 전체를 누르게 할 수 없다. 값이 적힌 칸마다
 * 따로 연다. 누를 수 있다는 것이 보여야 하므로 손 모양과 밑줄을 준다. */
.card-cell { cursor: pointer; }
.card-cell:hover { background: var(--tint); }
.card-cell:hover .grade-word { text-decoration: underline; }
.card-cell:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

/* 하위 탭 옆 개수. 눌러 보기 전에 "여긴 볼 게 있나"를 알 수 있다. */
.subnav-count {
    margin-left: 5px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* --- 오프라인 표시 (개발용) --------------------------------------------
 * OFFLINE=1 로 띄웠을 때만 나온다. 안 그러면 개발하다가 오프라인인 걸 잊고
 * "값이 왜 어제 거지?"를 한참 뒤지게 된다. 스위치를 끄면 같이 사라진다. */
body.offline::after {
    content: "오프라인 · 받아 둔 자료";
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 90;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-solid);
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0.9;
}

/* ======================================================================
 * 폰(360px)에서 글이 눌려 깨지던 것 — 2026-08-28
 *
 * 360x800 에서 재 보니 판 제목이 두 줄로 접혔다. '오늘 시장' 이 80px 로
 * 눌려 '오늘 / 시장' 이 됐고 '갈래별 오늘 최대' 도 마찬가지였다.
 *
 * 까닭은 .panel-head 가 가로 flex 라서 제목과 곁들이가 폭을 다투기
 * 때문이다. 넓은 화면에서는 한 줄에 나란히 놓는 게 맞지만, 좁으면
 * 제목이 먼저 눌린다. 좁을 때는 세로로 쌓는다.
 * ====================================================================== */

@media (max-width: 480px) {
    .panel-head,
    .section-head {
        display: block;
    }
    .panel-head h2,
    .section-head h1,
    .section-head h2 {
        /* 제목은 제 폭을 다 쓴다 — 곁들이에 밀려 접히지 않게 */
        display: block;
        margin-bottom: 3px;
    }
    .panel-note,
    .section-sub {
        display: block;
        line-height: 1.5;
    }

    /*
     * 곁들이는 낱말 중간에서 안 끊기게 한다. 한글은 기본이 글자 단위
     * 줄바꿈이라 '거래대' / '금' 처럼 갈린다.
     */
    .panel-note,
    .section-sub,
    .signal .m,
    .rank-card h4 span { word-break: keep-all; }
}

/*
 * 오프라인 딱지가 설치 안내 띠에 가리지 않게.
 *
 * 둘 다 화면 아래에 붙는다. 띠가 떠 있는 동안에는 딱지를 그 위로 올린다.
 * (:has 를 못 쓰는 브라우저에서는 원래 자리에 그대로 있고, 잠깐 가려질 뿐이다)
 */
body.offline:has(.install-bar:not([hidden]))::after {
    bottom: 96px;
}

/* ======================================================================
 * 폰에서 차림새를 조인다 — 2026-08-30
 *
 * **이 블록은 파일 맨 끝에 있어야 한다.** `.subnav`(3404줄) 와
 * `.section-head`(2892줄) 가 위쪽 `@media (max-width: 720px)` 블록(562줄)
 * 보다 **뒤에** 정의돼 있어서, 거기서 아무리 고쳐도 기본값이 덮어썼다.
 * CSS 는 무게가 같으면 뒤가 이긴다. 오늘만 이 함정에 세 번 걸렸다.
 *
 * 로고 줄·탭·갈래 칩·쪽 제목이 합해서 169px, 폰 한 판의 21% 였다.
 * 매일 오는 사람은 값을 보러 오지 로고를 보러 오지 않는다.
 * ====================================================================== */
@media (max-width: 720px) {
    /*
     * 덩어리 사이 여백을 걷어낸다 — 2026-08-30
     *
     * `.content` 가 `gap: 16px` 인데 그 위에 요소마다 `margin-bottom` 이
     * 또 붙어 **둘이 겹쳐 쌓였다.** 재 보니 이랬다.
     *
     *     subnav ↓ 26px      (gap 16 + margin 10)
     *     쪽 제목 ↓ 24px      (gap 16 + margin 8)
     *     판 ↓ 16px
     *
     * 첫 화면에만 그런 틈이 아홉 군데, 합쳐 182px 다. 폰 한 판의 23% 가
     * 아무것도 없는 자리였다. 틈을 10px 로 낮추고 겹치는 margin 을 줄인다.
     */
    .content { gap: 10px; }
    .page-shell { padding-bottom: 16px; }

    .subnav {
        gap: 4px;
        padding: 3px;
        margin-bottom: 3px;
    }
    .subnav-item { padding: 5px 10px; font-size: 12px; }

    /*
     * 쪽 제목과 곁들이. 둘을 세로로 쌓는 것은 그대로 둔다 — 가로로 두면
     * 좁은 화면에서 제목이 눌려 '오늘 / 시장' 으로 접힌다(2026-08-29 참고).
     * 줄 높이만 조인다.
     */
    .section-head { margin-bottom: 2px; }
    .section-head h1 { font-size: 17px; line-height: 1.2; }

    /*
     * 쪽 제목 옆 빈자리에 환율을 앉힌다 — 2026-08-30
     *
     * 제목 오른쪽이 통째로 비어 있었고, 시세 띠에서는 환율 한 줄이 반쯤
     * 비어 있었다. 빈자리 둘을 하나로 합쳤다. 마디는 app.js 가 옮긴다.
     *
     * `.section-head` 는 좁을 때 세로로 쌓게 해 두었으므로(제목이 눌려
     * '오늘 / 시장' 으로 접히던 것을 고친 규칙), 환율만 오른쪽 위로 띄운다.
     */
    /* 환율을 여기 앉히던 규칙은 뺐다 — 화면마다 띠 모양이 갈렸다 */
    .section-head h2 { font-size: 15px; line-height: 1.25; }
    .section-sub { font-size: 11.5px; line-height: 1.35; }

    /* 탭도 차림새다 */
    .nav-item { font-size: 13.5px; padding: 0 10px; }
}

/* ======================================================================
 * 계산기 결과는 폰에서도 표 그대로 둔다 — 2026-08-30
 *
 * 카드로 접었더니 칸 이름('국내 상장 ETF'·'미국 직접투자')이 열여섯 줄에
 * 걸쳐 되풀이됐다. 한 줄이 80px, 표가 1,440px 이었다.
 *
 * 그런데 이 표는 칸이 셋뿐이다. 글자를 11px 로 줄이면 320px 에 들어가고,
 * 표로 두면 칸 이름이 머리글에 **한 번만** 나온다.
 *
 * ─ 어떻게 뺐나 ─────────────────────────────────────────────────────────
 * 처음에는 카드 규칙을 하나씩 되돌리려 했다. 그런데 일반 규칙이
 * `table.rows:not(.how-table)` 로 열댓 군데에 흩어져 있어서, 되돌린 것마다
 * 우선순위와 순서를 따져야 했다. 하나를 고치면 다음이 어긋났다 —
 * 머리글 줄이 105px 로 눌리고, 칸이 39px 로 오그라들었다.
 *
 * **일반 규칙에서 아예 빼는 것이 맞다.** `.how-table` 이 이미 그렇게 돼 있다.
 * 그래서 `:not(.calc-result)` 를 더했다. 이제 이 표는 폰에서도 PC 와 같은
 * 표 서식을 그대로 쓰고, 여기서는 글자와 여백만 줄인다.
 * ====================================================================== */
@media (max-width: 720px) {
    /*
     * 선택자에 `table.rows.` 를 붙인다 — `.calc-result td` 는 (0,1,1) 이라
     * 데스크톱의 `table.rows td` (0,1,2) 에 진다. 여백이 12px 로 남아
     * 한 줄이 23px 이 아니라 42px 이었다.
     */
    table.rows.calc-result { table-layout: fixed; width: 100%; }
    table.rows.calc-result td,
    table.rows.calc-result th { padding: 4px 3px; font-size: 11px; white-space: nowrap; }

    /*
     * 항목 이름 칸을 넓게. 셋으로 똑같이 나누면 '살 때 환전수수료' 가 접힌다.
     * 값은 '10,000,000원'(68px)만 들어가면 된다.
     */
    table.rows.calc-result td:first-child:not([colspan]),
    table.rows.calc-result th:first-child:not([colspan]) { width: 46%; white-space: normal; }

    /*
     * 덩어리 제목줄은 반드시 접혀야 한다.
     *
     * 위에서 `td, th { white-space: nowrap }` 을 걸었는데 이 `th[colspan=3]`
     * 도 거기 걸려서, '손에 남기까지 위에서 아래로 …' 한 문장이 한 줄로
     * 뻗어 표를 320 → 347px 로 밀었다. 표 폭은 320 그대로인데 **그릇이
     * 옆으로 굴러가** 왼쪽 항목 이름이 잘려 보였다.
     */
    table.rows.calc-result [colspan] { white-space: normal; }
    table.rows.calc-result tr.calc-group th { padding: 9px 0 5px; font-size: 11px; }
    table.rows.calc-result tr.calc-group th span { font-size: 10px; }
    table.rows.calc-result tr.sub td:first-child { padding-left: 10px; font-size: 10.5px; }
    table.rows.calc-result tr.total td { font-size: 12.5px; }
}

/* ======================================================================
 * 그때 샀으면 — 폰에서 한 눈에 (2026-08-31)
 *
 * **파일 맨 끝에 둔다.** 앞에 놓았더니 `.bt-mode b { display: block }`
 * 같은 기본 규칙과 무게가 같아(둘 다 (0,1,1)) 뒤에 있는 기본이 이겼다.
 * 이 저장소는 기본 정의가 미디어쿼리보다 뒤에 오는 곳이 여럿이라, 폰용
 * 규칙은 끝에 두는 편이 안전하다.
 * ====================================================================== */
@media (max-width: 720px) {
    /*
     * '한 번에 / 매달 나눠' 를 한 줄로 눕힌다.
     *
     * 이름과 설명을 위아래로 쌓아 57px 이었다. 고르는 것이 둘뿐인데 그만한
     * 자리를 쓸 이유가 없다. 옆으로 눕히면 30px 이다.
     */
    .bt-modes { gap: 6px; }
    .bt-mode { padding: 6px 9px; }
    /*
     * 설명(`거치식`)은 `<span>` 안의 **맨 글자**다. 따로 감싼 것이 아니라
     * span 에 여백을 줘도 안 벌어진다 — `한 번에거치식` 으로 붙었다.
     * 이름 쪽 오른편에 준다.
     */
    .bt-mode b { display: inline; margin-right: 5px; font-size: 12.5px; }
    .bt-mode span { display: inline; font-size: 10.5px; }

    /* 모양만 보는 그림이지 눈금을 읽는 그림이 아니다 */
    .bt-svg { height: 128px; }
}

/* --- 판 날 ------------------------------------------------------------
 *
 * '지금까지 들고 있음' 이 기본이라, 그것을 끄기 전에는 고르는 칸이 없다.
 * 자리를 비워 두면 폼이 들썩이지 않는다.
 */
.bt-sell { align-items: end; }
.bt-hold {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-sub);
    cursor: pointer;
}
.bt-hold input { flex: none; width: auto; height: auto; margin: 0; }

@media (max-width: 720px) {
    .bt-sell { row-gap: 4px; }
    .bt-hold { font-size: 11.5px; }
    /* 고르는 칸이 숨겨져 있으면 체크칸이 줄을 통째로 쓴다 */
    .bt-sell:has(#bt-until-field[hidden]) { grid-template-columns: 1fr; }
}

/* --- 그때 샀으면: 폼을 더 좁게 (2026-08-31) --------------------------- */
@media (max-width: 720px) {
    /* 안내 한 줄. 딱지가 없을 때는 이것만 남는다 */
    .bt-chosen { margin: 2px 0 0; font-size: 11px; line-height: 1.35; }

    /* 묶음 안여백 — 테두리와 글자 사이가 넓었다 */
    fieldset.calc-group { padding: 7px 9px 9px; }
    fieldset.calc-group legend { font-size: 11.5px; }

    .bt-quick { margin-top: 5px; }
    .bt-two { gap: 6px; }
}

/*
 * `hidden` 을 되살린다 — 2026-08-31
 *
 * `fieldset.calc-group label { display: flex }` 가 브라우저 기본
 * `[hidden] { display: none }` 을 이긴다. 작성자 서식이 기본보다 먼저다.
 * 그래서 '지금까지 들고 있음' 을 켜 둬도 판 날 칸이 그대로 보였다.
 *
 * `hidden` 은 "이건 지금 없는 것" 이라는 뜻이다. 그것을 덮어쓰는 서식이
 * 있으면 어디서든 같은 사고가 난다 — 폼 전체에 걸어 둔다.
 */
/*
 * `!important` 를 쓴다.
 *
 * `hidden` 은 "이건 지금 없는 것" 이라는 뜻이라 어떤 서식도 이겨서는 안
 * 된다. 그런데 두 번 졌다 — 먼저 `fieldset.calc-group label { display: flex }`
 * (0,1,2)에 지고, 그걸 고치자 이번엔 `#bt-form .bt-two > label`(1,1,1)에
 * 졌다. 무게 싸움을 계속할 자리가 아니다.
 */
.calc-form [hidden] { display: none !important; }

/* ======================================================================
 * 그때 샀으면 — 폼을 김프고만큼 좁게 (2026-08-31)
 *
 * 김프고의 같은 화면은 폼이 세 줄인데 우리는 여섯 줄이었다. 큰 차이는
 * **이름표를 칸 위에 쌓았다는 것**이다. 김프고는 옆에 둔다.
 *
 *     우리   언제부터          김프고   산 날 [2021-08-31]
 *            [2020년 1월]
 *
 * 이 화면만 옆에 둔다 — /calc 는 칸이 좁아(94px) 옆에 두면 값이 잘린다.
 * 여기는 칸이 넓어서 들어간다.
 * ====================================================================== */
@media (max-width: 720px) {
    #bt-form .sp-field,
    #bt-form .bt-two > label {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
    }
    /* 이름표는 줄지 않고, 칸이 남는 자리를 다 쓴다 */
    #bt-form .sp-field > .sp-open,
    #bt-form .bt-two > label > input:not([type="radio"]):not([type="checkbox"]),
    #bt-form .bt-two > label > .mp-open {
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 0;
    }
    #bt-form .sp-field { font-size: 11.5px; }
    #bt-form .bt-two > label { font-size: 11.5px; }
    #bt-form .bt-two > label > .unit { flex: none; }

    /* 판은 이름표 밑이 아니라 칸 밑에서 열려야 한다 */
    #bt-form .sp-field .sp-pop,
    #bt-form .bt-two > label .mp-pop { top: calc(100% + 3px); }

    /*
     * 칩은 접어서 두 줄로 — 2026-08-31
     *
     * 한 줄에 두고 옆으로 밀게 해 봤는데 **가로로 미는 것 자체가 안 된다.**
     * 이 화면들은 폰에서 가로 스크롤이 없는 것을 원칙으로 삼았다.
     *
     * 대신 이름을 줄여 두 줄에 담는다 — `가장 쌌던 달` → `최저가`.
     * 어느 달이고 얼마였는지는 단추에 얹어 두었다(`title`).
     */
    .bt-quick-row {
        grid-column: 1 / -1;
        display: flex;
        align-items: baseline;
        gap: 7px;
        margin-top: 6px;
        min-width: 0;
    }
    .bt-quick-label { flex: none; font-size: 11px; color: var(--label); }
    .bt-quick { flex-wrap: wrap; margin-top: 0; min-width: 0; }

    /* 딱지가 없을 때 빈 줄이 남지 않게 */
    .bt-chosen:empty { display: none; }

    /*
     * 결과 카드 — 잔여백을 마저 깎는다.
     *
     * 칩이 두 줄이 되면서 28px 이 늘어 카드가 11px 넘쳤다. 줄마다 1px 씩만
     * 줄여도 여덟 줄이면 그만큼이 나온다.
     */
    .bt-card { padding: 8px; }
    .bt-card .bt-big { font-size: 24px; }
    .bt-row { padding: 2px 0; }
    .bt-result { padding: 8px; }
    .bt-when { margin-bottom: 3px; }
    .bt-card .bt-sub { line-height: 1.35; white-space: nowrap; }
    .bt-quick-row { margin-top: 4px; }
    .bt-row.bt-total { margin-top: 1px; padding-top: 6px; }
}

/* 고르는 판 아래의 안내. 고를 때만 보이면 된다. */
.sp-foot {
    margin: 6px 0 0;
    padding-top: 5px;
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    color: var(--muted);
    text-align: center;
}

/* ======================================================================
 * 하단 탭바 — 폰에서 쓰는 길잡이
 *
 * 넓은 화면에서는 통째로 숨는다. 거기서는 상단 탭이 그대로 낫고, 둘 다
 * 보이면 같은 것이 두 군데 있는 꼴이 된다.
 *
 * 까닭은 src/pages.js 의 renderTabBar 머리말에 있다 — 요약하면 엄지가
 * 안 닿는 자리에 가장 자주 누르는 것이 있었다.
 * ==================================================================== */
.tabbar { display: none; }

@media (max-width: 720px) {
    .tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        background: var(--surface);
        border-top: 1px solid var(--line);
        /* 아이폰 홈 막대에 가리지 않게 */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .tab-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* 손가락이 닿는 자리는 44px 아래로 내리지 않는다 */
        min-height: 52px;
        padding: 6px 2px 7px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
    }

    .tab-icon {
        width: 22px;
        height: 22px;
        fill: currentColor;
        display: block;
    }

    .tab-item.active { color: var(--accent); }

    /*
     * 켜진 칸에 위쪽 줄을 얹는다. 색만으로 가르면 색을 못 가리는 사람에게
     * 네 칸이 다 같아 보인다.
     */
    .tab-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        width: 28px;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--accent);
    }
    .tab-item { position: relative; }

    /* 상단 탭은 숨긴다 — 같은 것이 두 군데 있으면 안 된다 */
    .site-header .nav { display: none; }

    /*
     * 탭바가 화면 아래를 덮으므로 그만큼 본문을 띄운다.
     * 안 띄우면 마지막 줄과 푸터가 탭바 밑으로 들어간다.
     */
    body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }

    /* 종목 카드는 탭바 위로 올라온다 */
    .drawer { z-index: 70; }
    .drawer-scrim { z-index: 65; }
}

/* ======================================================================
 * 폰에서 시세 띠를 카드로 편다
 *
 * 전에는 한 줄에 욱여넣고 끊기(.sum-break)로 세 줄을 만들었다. 좁아서
 * 이름과 값과 등락이 한 줄에 붙어 다녔고, 세 줄을 다 읽어야 무엇이
 * 얼마인지 알 수 있었다. 값 다섯 개를 보여주려고 화면 위 95px 을 썼는데
 * 그중 읽히는 것이 얼마 없었다.
 *
 * 카드로 편다. 이름을 위에, 값을 아래에 둔다. 한 칸이 한 가지만 말하면
 * 눈이 옮겨 다닐 일이 없다.
 *
 * 세 칸씩 두 줄이다.
 *
 *     환율        코스피      코스닥
 *     S&P500선물  나스닥100선물  국내 장
 *
 * 넓은 화면에서는 손대지 않는다 — 거기서는 한 줄 띠가 그대로 낫다.
 * ==================================================================== */
@media (max-width: 720px) {
    .summary-inner {
        display: grid;
        /*
         * 여섯 칸으로 나누고 값 길이에 맞춰 나눠 쓴다. 셋씩 똑같이 자르면
         * '나스닥100 선물 29,695.75 +1.39%' 가 안 들어가 그 칸만 석 줄이
         * 되고, 격자는 줄 높이를 맞추므로 그 줄 전체가 같이 두꺼워진다.
         *
         *     환율   코스피   코스닥        (2칸씩)
         *     S&P500 선물   나스닥100 선물   (3칸씩 — 값이 길다)
         *     국내 장            실시간     (3칸씩, 테두리 없이)
         */
        grid-template-columns: repeat(6, 1fr);
        gap: 5px;
        padding: 7px var(--page-pad);
        align-items: stretch;
    }

    .summary-item:has(#sum-fx),
    .summary-item:has(#sum-kospi),
    .summary-item:has(#sum-kosdaq) { grid-column: span 2; }

    .summary-item:has(#sum-sp500),
    .summary-item:has(#sum-nasdaq) { grid-column: span 3; }

    /* 장 상태와 접속자는 값이 아니다. 테두리를 지우고 한 줄로 눕힌다 */
    .summary-item:has(#sum-market) {
        grid-column: span 3;
        flex-wrap: nowrap;
        border: 0;
        background: none;
        padding: 0 4px;
    }
    .summary-item:has(#sum-market) .label { flex: 0 0 auto; }

    .summary-item {
        display: flex;
        /*
         * 줄바꿈으로 두 줄을 만든다 — 세로 배치(column)로 하면 이름·값·등락이
         * 각각 한 줄씩 차지해 칸이 석 줄이 된다. 값과 등락은 같이 읽는
         * 것이라 한 줄에 있어야 한다.
         */
        flex-flow: row wrap;
        align-items: baseline;
        align-content: center;
        column-gap: 5px;
        row-gap: 1px;
        margin: 0;
        padding: 6px 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface-2);
        white-space: nowrap;
        overflow: hidden;
    }

    /* 이름은 제 줄을 통째로 차지해 값을 아래로 내린다 */
    .summary-item .label { flex: 0 0 100%; }

    /*
     * 차례를 격자에 맞게 다시 잡는다.
     *
     * 위쪽 한 줄 띠에서 쓰던 차례가 `:has()` 로 걸려 있어(0,2,0) 그냥 두면
     * 그것이 이긴다. 같은 무게로 다시 적어야 덮인다 — 안 적으면 동시접속자가
     * 맨 앞으로 올라온다.
     */
    .summary-item:has(#sum-fx) { order: 1; }
    .summary-item:has(#sum-kospi) { order: 2; }
    .summary-item:has(#sum-kosdaq) { order: 3; }
    .summary-item:has(#sum-sp500) { order: 4; }
    .summary-item:has(#sum-nasdaq) { order: 5; }
    .summary-item:has(#sum-market) { order: 6; }
    .summary-item:has(#sum-viewers) { order: 7; }

    /* 이름은 작게 위에, 값은 크게 아래에 */
    .summary-item .label {
        font-size: 10.5px;
        letter-spacing: -0.2px;
        /* 이름이 길면 잘라서 한 줄로 — 두 줄이 되면 칸 높이가 들쭉날쭉해진다 */
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .summary-item strong { font-size: 13.5px; line-height: 1.15; }
    .summary-item .sub { font-size: 10.5px; }

    /* 끊기는 격자에서 쓸 데가 없다 */
    .sum-break { display: none; }

    /*
     * 동시접속자는 격자 밖에 둔다. 값이 아니라 상태라 같은 무게로 놓으면
     * 시세 다섯을 읽는 눈을 흐린다. 칸막이 없이 오른쪽 위에 작게 붙인다.
     */
    /*
     * 동시접속자는 값이 아니라 상태다. 시세 여섯과 같은 무게로 놓으면
     * 읽는 눈이 흐려지므로 격자 아래에 한 줄로 깔고 테두리를 지운다.
     */
    .summary-right {
        grid-column: span 3;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        padding: 1px 2px 0;
        border: 0;
        background: none;
    }
    .summary-right .label { flex: 0 0 auto; font-size: 10.5px; }
    .summary-right #sum-viewers { font-size: 11px; }
}

/* 아주 좁은 폰 — 한 줄에 둘씩 */
@media (max-width: 359px) {
    .summary-inner { grid-template-columns: repeat(2, 1fr); }
    .summary-item:has(#sum-fx),
    .summary-item:has(#sum-kospi),
    .summary-item:has(#sum-kosdaq),
    .summary-item:has(#sum-sp500),
    .summary-item:has(#sum-nasdaq) { grid-column: span 1; }
    .summary-item:has(#sum-market) { grid-column: span 1; }
    .summary-right { grid-column: span 1; }
}

/* 오프라인 표시(개발용)가 탭바에 깔리지 않게 위로 올린다 */
@media (max-width: 720px) {
    body.offline::after { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}