/* ===========================================
   공통 CSS 변수 정의

   색은 `30.ai_center`·`24.home_iot`·`10.auth`·`31.ai_usage` 와 **같은 팔레트**다
   (2026-08-18). 한 계정으로 오가는 서비스가 서로 다른 색이면 남의 사이트로 넘어간
   것처럼 보인다 — 저쪽 중 하나를 고치면 여기도 고칠 것.

   ⚠️ 저쪽은 Tailwind + 시맨틱 클래스(`.surface`·`.txt-muted`)를 쓰지만 여기는 안 쓴다.
      이 블로그는 PHP 시절 CSS 7천 줄을 물려받았고 그것들이 전부 아래 **옛 이름**을
      참조한다. 이름을 다 갈아치우면 diff 가 파일 전체가 되어 무엇이 실제로 바뀌었는지
      안 보인다 — 정본은 `--bae-*` 하나로 두고 옛 이름은 여기서 별칭으로만 잇는다
      (`24.home_iot` 과 같은 판단: **색만 같고 구조는 각자 방식**).

   ⚠️ 주식 등락(빨강/파랑)은 팔레트 밖이다 — 시장 관례에 붙은 색이라 테마를 따라가지
      않는다. 반면 **분류 색**(시장·유형·글 카테고리)은 뜻이 아니라 구분이 목적이므로,
      아래 "분류 보조색" 규칙에 맞춰 같은 밝기대로 통일한다.
      (순위 배지 색은 2026-09-23 에 걷어냈다 — 빨강 1위가 "상승" 과 겹쳐 읽혀 순위 강조를
      색이 아니라 밝기로 바꿨다. stocks.css 의 TOP10 블록 참조.)
   =========================================== */

:root {
    /* ── 정본: bae 공용 팔레트 ─────────────────────────────────────────
     * 테마색을 바꾸려면 아래 accent 5줄만 고친다. tint 는 rgba(--bae-accent-rgb, α)
     * 로 파생되므로 따로 손댈 곳이 없다.
     *
     * ⚠️ --bae-accent-rgb 는 --bae-accent 와 반드시 같은 색의 R,G,B 채널값.
     * ⚠️ CSS 밖은 이 토큰이 닿지 않아 함께 갱신해야 한다:
     *    ① public/favicon.ico — 파비콘. 색이 이미지에 구워져 있다.
     *    ② public/res/favicon.svg · icon-192/512(-maskable).png · apple-touch-icon.png — 같은 그림
     *    ③ layout.html 아이콘 링크 셋과 site.webmanifest `icons[].src` 의 `?v=` 날짜를 올린다
     *       — 안 올리면 설치된 PWA·서비스워커가 옛 아이콘을 한 번 더 쓴다.
     *    (배경색을 바꿀 때는 layout.html `theme-color` · site.webmanifest `theme_color`·`background_color` ·
     *     sw.js 오프라인 화면 색도 — 이건 accent 가 아니다.)
     *    (2026-09-22) `public/res/title.png` 는 목록에서 빠졌다 — 상단바 워드마크가
     *    텍스트라 accent 를 CSS 토큰에서 그대로 받는다. 그 파일은 이제 안 쓰인다.
     */
    --bae-accent:        #C4B5FD;
    --bae-accent-rgb:    196, 181, 253;
    --bae-accent-hover:  #D3C2FF;
    --bae-accent-press:  #AC9BEF;
    /* ⚠️ accent 가 **연보라(밝은 색)** 라 그 위 글씨는 흰색이 아니라 검정이어야 읽힌다.
       초록 시절의 `color: white` 를 그대로 두면 버튼 글씨가 안 보인다. */
    --bae-accent-text:   #000000;

    /* Surfaces */
    --bae-bg:            #202020;
    --bae-bg-alt:        #1C1C1C;
    --bae-surface:       #2B2B2B;
    --bae-surface-alt:   #323232;
    --bae-surface-hover: #3A3A3A;

    /* Borders */
    --bae-border:        #3A3A3A;
    --bae-border-hover:  #4A4A4A;

    /* Text */
    --bae-text-primary:  #FFFFFF;
    --bae-text-muted:    #C7C7C7;
    --bae-text-dim:      #9A9A9A;

    /* ── 분류 보조색 ─────────────────────────────────────────────────
     * accent 는 **강조·상호작용 전용**이라 분류 라벨에는 쓰지 않는다. 그렇다고 전부
     * 회색으로 두면 표가 단색이 된다 — 분류마다 색이 다른 것이 원래 이 화면을 읽는
     * 방법이었다(시장=파랑·유형=초록·글쓴이=연파랑).
     *
     * 옛 원색(#2196F3·#4CAF50·#a8e3a1)은 채도가 높아 다크 표면에서 튀므로, accent
     * (violet-300)와 **같은 밝기대(Tailwind 300)** 로 골라 한 가족으로 묶는다.
     * 시장별 색은 도메인이라 stocks.css 에 둔다(여기 규칙과 같은 300 계열).
     */
    --bae-info:          #93C5FD;   /* 파랑 — 분류·메타·정보 알림 */
    --bae-mint:          #6EE7B7;   /* 민트 — 분류(글 카테고리·등급 라벨) */

    /* Status — 채운 배경으로도 쓰므로 rgb 채널값을 함께 둔다(tint 파생용). */
    --bae-danger:        #FF99A4;
    --bae-danger-rgb:    255, 153, 164;
    --bae-danger-hover:  #FFB3BC;
    --bae-success:       #6CCB5F;
    --bae-success-rgb:   108, 203, 95;
    --bae-warn:          #FDE047;
    --bae-warn-rgb:      253, 224, 71;

    /* ── 정본(30.ai_center theme.css)에 맞춘 토큰 ────────────────────
     * 글씨·테두리·outline 자리의 accent 는 --bae-accent-fg 를 쓴다 — 칠하는 자리(버튼 배경·
     * tint·점)는 계속 --bae-accent. 다크 전용이라 지금은 같은 값이다. */
    --bae-accent-fg:       var(--bae-accent);
    --bae-accent-fg-hover: var(--bae-accent-hover);
    --bae-surface-press:   #272727;
    --bae-divider:         #2D2D2D;
    --float-max:           70vh;
    /* 내 말풍선(투자 계획 상담) — accent 88% + #1a1a1a 를 미리 계산한 정본 값. accent 를 바꾸면 같이 바꾼다. */
    --user-bubble-bg:      rgb(176, 162, 226);

    /* ── 옛 이름 ────────────────────────────────────────────────────
     * 값이 `--bae-*` 하나와 같던 1:1 별칭(`--primary-color`·`--bg-tertiary`·`--text-muted`·
     * `--border-color` …)은 2026-10-12 에 걷었다 — 쓰는 곳이 `--bae-*` 를 바로 쓴다.
     * ⚠️ 이름이 한 칸씩 어긋나 있었다: 옛 `--text-secondary` = `--bae-text-muted`,
     *    옛 `--text-muted` = `--bae-text-dim`. 옛 CSS 를 옮겨 올 때 이름만 보고 바꾸지 말 것.
     * 아래 남은 것은 값이 `--bae-*` 와 다르거나(투명도·그림자·둥글기) 자리가 정해지지 않은 것이다.
     */

    /* 배경 사다리 — 2026-10-12 페이지 배경을 정본 `--bae-bg`(#202020)로 올렸다(전엔 `--bae-bg-alt` #1C1C1C).
       본문 영역(옛 `--bg-secondary`)과 같은 색이 되고, 카드(`--bae-surface`) < 칩(`--bae-surface-alt`) 은 그대로다.
       옛 `--bg-primary` 를 **안쪽 우물**(히트맵 판·백테스트 설정 칸·검색 목록)로 쓰던 자리는 `--bae-bg-alt` 로
       남겨 한 단 어두운 채다 — 정본에서도 bg-alt 는 바탕보다 어두운 칸(사이드바·헤더)이다.
       ⚠️ theme-color(layout.html)·site.webmanifest·sw.js 오프라인 화면도 같은 값이다 — 함께 바꾼다. */

    --text-tertiary: rgba(255,255,255,0.3);

    /* 차트 색상 — ⚠️ 도메인 색(등락 관례). 테마를 따라가지 않는다. */
    --chart-up-color: #ef5350;
    --chart-down-color: #3b82f6;
    /* 등락 **글자** 전용 — 캔들·히트맵 칸 같은 채움은 위 두 색을 그대로 쓴다.
       ⚠️ 표시 요소(채움·선)는 3:1 이면 되지만 작은 글자는 4.5:1 이 필요하다. 채움색을 글자로
          쓰면 바탕 #1C1C1C · #202020 · #2B2B2B(카드) · #3A3A3A(카드 호버) 에서
            빨강 #ef5350 4.89 · 4.67 · 4.06 · 3.26
            파랑 #3b82f6 4.63 · 4.43 · 3.85 · 3.09
          라 카드 위에서는 둘 다 미달이었다. 같은 색상각(OKLCH hue)을 지킨 채 밝기만 올려
          모든 바탕에서 4.5 를 넘는 값을 골랐다(밝을수록 sRGB 안에서 채도가 줄어 조금 옅어진다):
            빨강 #FF847C 7.18 · 6.86 · 5.96 · **4.79**
            파랑 #70AEFB 7.41 · 7.09 · 6.16 · **4.95**
          두 색의 밝기(OKLCH L .750 · .741)를 맞춰 어느 한쪽이 더 튀지 않게 했다.
          Tailwind red-400(#F87171)·blue-400(#60A5FA)은 호버 바탕에서 4.11 · 4.47 로 모자라다.
       ⚠️ 글자에 등락색을 새로 칠할 때는 이 토큰을 쓴다(`.q-up`·`.q-down` 이 이미 쓴다). */
    --chart-up-text: #FF847C;
    --chart-down-text: #70AEFB;
    --chart-unchanged-color: #999;
    --chart-grid-color: #333;
    --chart-crosshair-color: rgba(255, 255, 255, 0.4);
    --chart-volume-up: rgba(239, 83, 80, 0.35);
    --chart-volume-down: rgba(59, 130, 246, 0.35);
    --chart-tooltip-bg: rgba(20, 20, 20, 0.92);
    --chart-zoom-drag-bg: rgba(33, 150, 243, 0.15);
    --chart-zoom-drag-border: rgba(33, 150, 243, 0.6);
    --chart-sma5-color: rgba(251, 192, 45, 0.68);
    --chart-sma20-color: rgba(255, 112, 67, 0.66);
    --chart-sma60-color: rgba(38, 198, 218, 0.66);
    --chart-bb-upper-color: rgba(144, 202, 249, 0.58);
    --chart-bb-middle-color: rgba(176, 190, 197, 0.52);
    --chart-bb-lower-color: rgba(144, 202, 249, 0.58);
    --chart-bb-fill: rgba(144, 202, 249, 0.06);
    --chart-volume-ma20-color: rgba(255, 224, 130, 0.60);

    /* 그림자 */
    /* 그림자 — 정본 단계(spacing-radius-shadow.md, 2026-10-12 결정 #9). 툴팁·토스트(`0 4px 12px .35`)는 ui.css 에.
       sm = 카드·작은 원형 버튼 · lg = 떠 있는 목록·패널(Tailwind 기본 그대로 — 어두운 바탕에서 옅은 것이 정본) ·
       xl = 모달 · drawer = 옆에서 나오는 서랍(바텀시트는 위로 같은 값). */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.35);

    /* Primary 투명도 계열 */
    --primary-bg-subtle: rgba(var(--bae-accent-rgb), 0.05);
    --primary-bg-light: rgba(var(--bae-accent-rgb), 0.12);
    --primary-bg: rgba(var(--bae-accent-rgb), 0.15);
    --primary-bg-emphasis: rgba(var(--bae-accent-rgb), 0.2);

    /* Danger 투명도 계열 */
    --danger-outline: rgba(var(--bae-danger-rgb), 0.25);

    /* 유형 배지 — 시장(찬 계열)과 다른 축이라 따뜻한 계열로 묶는다. 같은 300 밝기대.
       ⚠️ ETN 이 #9c27b0 이던 것을 바꿨다 — 진한 보라라 accent 와 부딪혔다. */
    --color-etf: #FCD34D;
    --color-etn: #F0ABFC;
    --color-coin: #FDBA74;

    /* IP 뱃지 색상 — 라이트 테마 시절의 파스텔 칩(밝은 배경 + 진한 글씨)이 어두운
       관리자 표에 그대로 남아 있던 것. 다크 tint 로 바꾼다. */
    --ip-badge-auto-bg: rgba(133, 77, 14, 0.40);        /* 정본 .badge-warn 바탕(badge-status.md) */
    --ip-badge-auto-color: var(--bae-warn);
    /* 수동 차단은 분류 라벨이지 강조가 아니다 — accent 를 주면 표에서 그것만 튄다.
       (주식 액면분할 화면이 시장 라벨 KR/US 에 이 클래스를 재사용한다.) */
    --ip-badge-manual-bg: var(--bae-border-hover);      /* 정본 .badge-neutral */
    --ip-badge-manual-color: var(--bae-text-muted);

    /* 테이블 배경 */
    --bg-table-header: rgba(255, 255, 255, 0.03);
    --bg-table-stripe: rgba(255, 255, 255, 0.02);
    --bg-selected: rgba(255, 255, 255, 0.06);

    /* 둥글기 — 정본 단계 4/8/12/9999(2026-10-12 결정 #9). 주식 카드 `--sh-radius`·`--sd-radius`(1rem)는
       토스증권 모양 변형으로 따로 둔다. */
    --border-radius-xs: 4px;
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-pill: 999px;
    --border-radius-circle: 50%;

    /* 그림자 (보조) */
    --shadow-focus: 0 0 0 2px var(--bae-accent-fg);    /* 정본 포커스 링 — 2px, 불투명(form-field.md) */
    --shadow-focus-danger: 0 0 0 2px var(--danger-outline);
    --shadow-overlay: rgba(0, 0, 0, 0.60);   /* 막 — 정본 modal.md 가벼운 창(.60). 체결 시트·계획 버전 기록·관심 종목 서랍 */

    /* 트랜지션 */
    --transition: all 0.2s ease;

    /* 의미별 배경색 — 알림 상자 배경. 저쪽의 .tint-* 와 같은 방식(색 위 α tint). */
    --bg-danger: rgba(var(--bae-danger-rgb), 0.15);
    --bg-info: rgba(var(--bae-accent-rgb), 0.15);

    /* 수정/활성/비활성 3종 칩 — 관리자에서 뜻으로 구분되는 어두운 칩이라 명도는 그대로 두고,
       초록이던 '수정'만 accent 계열로 옮겼다. (정본 버튼으로 바꿀지는 결정 전 — 기준 문서 확인 필요 #6) */
    --btn-edit: #4A4266;
    --btn-edit-hover: #3E3856;
    --btn-disable: #8a3a3a;
    --btn-disable-hover: #7a3030;
    --btn-enable: #3a5a8a;
    --btn-enable-hover: #30407a;
}

/* ===========================================
   입력칸 글자 — 손가락·좁은 폭은 16px 하한
   =========================================== */
/* 데스크톱 입력칸은 14px(ui.css `input, select, textarea`, 정본 결정 #8). 손가락(`pointer: coarse`)이나
   좁은 폭에서는 16px 아래로 내리지 않는다 — iOS 는 16px 미만 입력칸에 포커스하면 화면을 확대하고 되돌리지 않는다.
   ⚠️ 레이어 밖 화면 CSS(stocks·admin·plan)가 입력칸 글자를 따로 정해도 이겨야 해서 레이어 밖 + `!important` 다. */
@media (pointer: coarse), (max-width: 47.99rem) {
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea, .cs-btn) {
        font-size: max(1rem, 1em) !important;
    }
}

/* ===========================================
   공통 페이지네이션
   =========================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--bae-text-muted);
    text-decoration: none;
    background: var(--bae-surface-alt);
    transition: var(--transition);
}

.page-link:hover {
    background: var(--bae-surface-hover);
    color: var(--bae-text-primary);
    text-decoration: none;
}

.page-current {
    background: var(--bae-accent);
    color: var(--bae-accent-text);
    font-weight: 700;
}

.page-current:hover {
    background: var(--bae-accent);
    color: var(--bae-accent-text);
}

.page-ellipsis {
    color: var(--bae-text-dim);
    font-size: 14px;
    padding: 0 4px;
}