/**
 * MiraiSignal Responsive Design System
 * Mobile-first breakpoints, card grids, touch targets, swipe gestures.
 * Import AFTER main.css and theme-system.css.
 */

/* Skip-to-content (a11y, CSP compliant — no inline onfocus/onblur) */
.skip-to-content {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
    text-decoration: none;
}
.skip-to-content:focus {
    position: fixed; top: 0; left: 0; z-index: 9999;
    width: auto; height: auto; overflow: visible;
    padding: 12px 24px; background: #0b1120; color: #60a5fa;
    font-weight: bold; font-size: 14px;
}

/* 화면에서만 숨긴다 — 크롤러와 스크린리더는 읽는다.
   왜 필요한가(2026-09-22 실측): 라이브 DOM 에 h1 이 0개, h2 도 0개였다. 검색엔진에
   페이지 주제를 말해 주는 제목 구조가 통째로 없었다는 뜻이다. 그렇다고 대시보드 위에
   큰 제목줄을 얹을 수는 없다 — '보면 아는 제목줄'은 정보밀도를 깎는다(Park 규칙).
   그래서 자리를 0px 쓰면서 의미만 남긴다. display:none 은 안 된다(읽히지 않는다). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Breakpoint Tokens (reference) =====
 * xs:  0–479px     (small phone)
 * sm:  480–767px   (large phone)
 * md:  768–1023px  (tablet)
 * lg:  1024–1439px (laptop)
 * xl:  1440–1919px (desktop)
 * 2xl: 1920+       (wide)
 * ===== */

/* ===== Base: Mobile First (xs) ===== */

.container {
    width: 100%;
    padding-left: var(--space-3, 12px);
    padding-right: var(--space-3, 12px);
    margin: 0 auto;
}

/* Card grid — single column by default */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3, 12px);
}

/* ===== Touch-Friendly Targets ===== */

/* Ensure minimum 44px tap target on interactive elements */
.btn,
button,
a.btn,
select,
input[type="checkbox"],
input[type="radio"],
.form-control,
.tab-btn,
.badge[role="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Increase touch area for small buttons without changing visual size */
.btn-sm {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
}

/* Larger tap zone on table rows on touch devices */
@media (pointer: coarse) {
    .table td,
    .table th {
        padding: 14px 12px;
    }

    /* Increase spacing between interactive items */
    .btn + .btn,
    .badge + .badge {
        margin-left: 8px;
    }
}

/* ===== Small Phone (xs: < 480px) ===== */

@media (max-width: 479px) {
    html {
        font-size: 13px;
    }

    .container {
        padding-left: var(--space-2, 8px);
        padding-right: var(--space-2, 8px);
    }

    /* Stack everything vertically */
    .flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2, 8px);
    }

    /* Full-width buttons on small screens */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-sm {
        width: auto;
    }

    /* Cards: reduce padding */
    .card {
        padding: var(--space-2, 8px);
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1, 4px);
    }

    /* Price display — smaller on tiny screens */
    .price-lg { font-size: 22px; }
    .price-md { font-size: 16px; }

    /* Table: horizontal scroll */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--space-2, 8px));
        padding: 0 var(--space-2, 8px);
    }

    .table {
        min-width: 600px;
    }

    /* Hide non-essential columns */
    .hide-xs {
        display: none !important;
    }

    /* Notification: full-width */
    .notification,
    .toast-container {
        left: var(--space-2, 8px) !important;
        right: var(--space-2, 8px) !important;
        max-width: none !important;
    }

    /* ===== 모바일 밀도 강화 (Park 요청: 상하/좌우 패딩 대폭 축소 + 테이블 컬럼 축소) ===== */
    /* 좌우 패딩 최소화 */
    .container { padding-left: 6px !important; padding-right: 6px !important; }
    /* 카드 상하/좌우 패딩 대폭 축소 */
    .us-card, .kr-card, .card, .tile, .us-card.tile { padding: 4px 6px !important; }
    /* 카드/타일/섹션 간격 축소 */
    .us-tiles, .kr-tiles, .us-board-bottom, .kr-board-bottom, .us-dashboard, .kr-dashboard { gap: 6px !important; }
    /* 카드 제목 여백 축소 */
    .us-card h3, .kr-card h3, .tile h3 { margin: 0 0 4px !important; }
    /* 섹터 카드 행 간격 */
    .sector-card { padding: 5px 7px !important; }
    .sector-card-row { padding: 0 !important; line-height: 1.5 !important; }

    /* 테이블 행 패딩 축소 (모든 stock 테이블) */
    .screener-table td, .screener-table th,
    .us-stock-table td, .us-stock-table th,
    .kr-stock-table td, .kr-stock-table th { padding: 4px 5px !important; }

    /* 스크리너 열 숨김은 480px 만으로 부족해 파일 하단의 2단(≤1023 / ≤767) 블록으로 옮겼다.
       (여기 있던 규칙 = "스크리너 열 숨김" 항목) */

    /* 지수표(.index-table US+KR): 모바일은 현재/1D/추세만 — 1M/3M/6M/1Y 숨김 (우측 이탈 해소) */
    .index-table thead th:nth-child(4), .index-table tbody td:nth-child(4),  /* 1M */
    .index-table thead th:nth-child(5), .index-table tbody td:nth-child(5),  /* 3M */
    .index-table thead th:nth-child(6), .index-table tbody td:nth-child(6),  /* 6M */
    .index-table thead th:nth-child(7), .index-table tbody td:nth-child(7) { display: none !important; } /* 1Y */

    /* crypto strategies(#strategies-table): 모바일은 #/전략명/승률/수익률/액션만 — 글자 세로 쪼개짐 해소 */
    #strategies-table thead th:nth-child(3), #strategies-table tbody td:nth-child(3),   /* 카테고리 */
    #strategies-table thead th:nth-child(4), #strategies-table tbody td:nth-child(4),   /* 설명 */
    #strategies-table thead th:nth-child(7), #strategies-table tbody td:nth-child(7),   /* 거래 */
    #strategies-table thead th:nth-child(8), #strategies-table tbody td:nth-child(8),   /* MDD */
    #strategies-table thead th:nth-child(9), #strategies-table tbody td:nth-child(9),   /* 샤프 */
    #strategies-table thead th:nth-child(10), #strategies-table tbody td:nth-child(10), /* 손익비 */
    #strategies-table thead th:nth-child(11), #strategies-table tbody td:nth-child(11) { display: none !important; } /* 상태 */
}

/* ===== Large Phone (sm: 480-767px) ===== */

@media (min-width: 480px) {
    .container {
        padding-left: var(--space-4, 16px);
        padding-right: var(--space-4, 16px);
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hide-sm-up {
        display: none !important;
    }
}

/* ===== Tablet (md: 768-1023px) ===== */

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }

    .container {
        padding-left: var(--space-6, 24px);
        padding-right: var(--space-6, 24px);
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4, 16px);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hide-md-up {
        display: none !important;
    }

    .show-md-up {
        display: block !important;
    }
}

/* ===== Laptop (lg: 1024-1439px) ===== */

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-8, 32px);
        padding-right: var(--space-8, 32px);
    }

    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .hide-lg-up {
        display: none !important;
    }
}

/* ===== Desktop (xl: 1440+) ===== */

@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Wide (2xl: 1920+) ===== */

@media (min-width: 1920px) {
    html {
        font-size: 15px;
    }

    .container {
        max-width: 1800px;
        padding-left: var(--space-10, 40px);
        padding-right: var(--space-10, 40px);
    }
}

/* ===== Ultra-Wide (2560+) ===== */

@media (min-width: 2560px) {
    html {
        font-size: 16px;
    }

    .container {
        max-width: 2200px;
    }
}

/* ===== Mobile Bottom Nav ===== */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--bg-secondary, #1a1a2e);
        border-top: 1px solid var(--border-color, #333);
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        flex: 1;
        min-width: 0;                 /* flex 셀 축소 허용 (긴 라벨이 이웃 칸 밀지 않게) */
        display: flex;
        flex-direction: column;       /* 아이콘 위·라벨 아래 — 라벨에 셀 전체폭 확보 */
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-secondary, #888);
        text-decoration: none;
        font-size: 10px;              /* 11→10: 5칸(Strategies 등) 가로 여유 */
        font-weight: 600;
        letter-spacing: 0.2px;        /* 0.5→0.2: 라벨 폭 절약 */
        white-space: nowrap;          /* 줄바꿈 금지 — 'Strategi/es' 어색한 줄바꿈 방지(2026-07-14) */
        background: transparent;
        border: 0;
        font-family: inherit;
        padding: 0 2px;
    }
    .mobile-bottom-nav a.active {
        color: var(--accent-gold, #c8a870);
    }
    .mobile-bottom-nav a svg,
    .mobile-bottom-nav button svg {
        width: 18px;
        height: 18px;
        margin: 0;                    /* column 배치이므로 오른쪽 여백 제거 */
    }
}

/* ===== Chart Page Mobile ===== */

@media (max-width: 767px) {
    .page-container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        grid-template-columns: none !important;
        overflow: visible !important;
    }
    .chart-section, .strategy-section, .info-section {
        width: 100% !important;
        border-right: none !important;
        display: flex !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .strategy-section, .info-section {
        border-top: 1px solid var(--border-color, #333);
        max-height: none;
        overflow-y: visible;
    }
    .chart-section {
        min-height: 0;
    }
}

/* ===== Dashboard Layout Mobile ===== */

@media (max-width: 767px) {
    .dashboard-header { display: none; }
    .dashboard-main { padding: 6px !important; }
    body { padding-bottom: calc(56px + var(--disclaimer-h, 0px)) !important; }
    #disclaimer-bar { bottom: 56px !important; border-bottom: 1px solid #333; }
    .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
    html, body { overflow-x: hidden; max-width: 100%; }
    img, svg, canvas, video, table { max-width: 100%; }

    /* Strategies page: horizontal scroll for controls */
    .table-controls-bar.two-rows .controls-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .strategies-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Macro page */
    .macro-container { padding: 6px !important; }
    .macro-grid { grid-template-columns: 1fr !important; }
    .macro-card[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }

    /* Heatmap page */
    .heatmap-container { padding: 6px !important; }
}

/* ===== Swipe Gesture Support ===== */

.swipeable {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.swipeable::-webkit-scrollbar {
    display: none;
}

.swipeable > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Horizontal scroll indicators for swipeable areas */
.swipeable-wrapper {
    position: relative;
}

.swipeable-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, var(--bg-primary, #0a0a0a));
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Hide gradient when fully scrolled */
.swipeable-wrapper.scrolled-end::after {
    opacity: 0;
}

/* ===== Landscape Phone Adjustments ===== */

@media (max-height: 500px) and (orientation: landscape) {
    .page-container {
        padding: var(--space-2, 8px) var(--space-4, 16px);
    }

    /* Reduce vertical spacing in landscape */
    .card {
        padding: var(--space-2, 8px);
    }

    .card-header {
        margin-bottom: var(--space-1, 4px);
        padding-bottom: var(--space-1, 4px);
    }
}

/* ===== High-DPI / Retina Optimizations ===== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders on retina */
    .card,
    .btn,
    .badge,
    .form-control {
        border-width: 1px;
    }

    /* Ensure crisp pixel rendering */
    img, canvas {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ===== Responsive Utility Classes ===== */

.hide-mobile { display: none; }
.show-mobile { display: block; }

@media (min-width: 768px) {
    .hide-mobile { display: block; }
    .show-mobile { display: none; }
    .hide-desktop { display: none; }
}

/* Text alignment responsive */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: left;
    }
}

/* Stack columns on mobile */
.stack-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

@media (min-width: 768px) {
    .stack-mobile {
        flex-direction: row;
    }
}

/* ════════════════════════════════════════════════════
   R3 — mobile density + disclaimer relocation
   scope: 모바일 전용 (≤767px). 데스크톱·태블릿 영향 없음.
   ════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* (1) 폰트·패딩 1단계 축소 */
  html { font-size: 13px; }

  .dashboard-main,
  .macro-container,
  .heatmap-container { padding: 4px 6px !important; }

  .card { padding: 6px 8px; }
  .card-header { margin-bottom: 3px; padding-bottom: 3px; }
  section, .section, .panel { padding-top: 6px; padding-bottom: 6px; }
  .card-grid { gap: 6px; }

  /* 터치 안전 floor — 시각은 작아도 hit-area는 살림 */
  .btn, button, select, .tab-btn { min-height: 40px; }
  .btn-sm, .tf-btn, .ind-btn { min-height: 32px; }

  /* (2) 순서 swap — disclaimer 맨 아래, nav가 그 위로 */
  #disclaimer-bar {
    bottom: 0 !important;
    height: 22px;
    padding: 0 32px 0 8px !important;
    font-size: 10.5px !important;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
    z-index: 48;
  }
  .mobile-bottom-nav {
    bottom: 22px !important;
    z-index: 49;
  }
  body {
    padding-bottom: calc(56px + 22px) !important;
  }

  /* (3) 닫기 버튼 + dismissed 상태 */
  #disclaimer-bar .dismiss {
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    background: transparent; border: 0;
    color: #888; font-size: 14px;
    cursor: pointer; line-height: 1;
  }
  #disclaimer-bar .dismiss:hover { color: #c8a870; }

  #disclaimer-bar.dismissed { display: none; }
  body.disc-dismissed { padding-bottom: 56px !important; }
  body.disc-dismissed .mobile-bottom-nav { bottom: 0 !important; }
}

/* 데스크톱에서 닫기 버튼 숨김 */
@media (min-width: 768px) {
  #disclaimer-bar .dismiss { display: none; }
}

/* 닫기 버튼 접근성 */
#disclaimer-bar .dismiss:focus-visible {
  outline: 2px solid #c8a870;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== 스크리너 표 열 숨김 — 2단 (2026-08-04 재편) =====
   셀에 white-space:nowrap 을 걸어 열마다 폭이 최소내용폭으로 고정된다(헤더-값 정렬을 위해 필요).
   그래서 좁은 폭에서는 텍스트 줄바꿈으로 표가 저절로 좁아지지 않고 오른쪽 열이 컨테이너 밖으로
   잘려 나간다(보이지도 않고 스크롤도 안 되는 상태). 480px 한 단계만으로는 480~1023 구간이
   전부 잘렸다(실측: en/US 최소내용폭 810px > 768px 뷰포트 가용 728px).
   → 표가 항상 컨테이너 안에 들어가도록 폭 구간별로 열을 덜어낸다. 가로스크롤은 만들지 않는다.
   nth-child 번호는 thead/tbody 가 동일하다 — 즐겨찾기 td(2026-08-04 삭제)로 한 칸 밀려 있던
   과거 규칙을 그대로 쓰면 헤더와 값이 어긋난 채 지워진다. */

/* 태블릿·작은 노트북: 식별용 텍스트 열을 덜어낸다 (수치는 전부 유지) */
@media (max-width: 1023px) {
    #screener-table thead th:nth-child(2), #screener-table tbody td:nth-child(2),  /* 회사 */
    #screener-table thead th:nth-child(3), #screener-table tbody td:nth-child(3) { display: none !important; } /* 섹터 */

    #kr-screener-table thead th:nth-child(2), #kr-screener-table tbody td:nth-child(2),  /* 시장 */
    #kr-screener-table thead th:nth-child(3), #kr-screener-table tbody td:nth-child(3) { display: none !important; } /* 섹터 */
}

/* 모바일: 위에 더해 파생 지표까지 덜어내고 핵심만 남긴다
   US = 종목/가격/등락%/시그널/잠재력 · KR = 종목/현재가/등락/시그널/점수 */
@media (max-width: 767px) {
    #screener-table thead th:nth-child(4), #screener-table tbody td:nth-child(4),  /* 시총 */
    #screener-table thead th:nth-child(8), #screener-table tbody td:nth-child(8),  /* 강도 */
    #screener-table thead th:nth-child(9), #screener-table tbody td:nth-child(9) { display: none !important; } /* 동의 */

    #kr-screener-table thead th:nth-child(6), #kr-screener-table tbody td:nth-child(6),  /* 거래대금 */
    #kr-screener-table thead th:nth-child(7), #kr-screener-table tbody td:nth-child(7) { display: none !important; } /* 시총 */
}

/* ===== 표 폭 정책 — 잘려서 못 보는 것을 없앤다 (R447, 2026-08-26) =====
   증상: `width:100%` 인 표라도 셀이 nowrap 이면 100% 는 상한이 아니라 하한이 된다.
   내용의 min-content 가 그보다 크면 표가 컨테이너를 뚫는데, 문서는 가로로 안 늘어나므로
   **오른쪽이 그냥 잘려 어떤 조작으로도 볼 수 없다**. 스크롤바도 안 뜬다.
   실측(라이브·6폭 전수, 320~1440): 4개 표가 320/390 에서 잘렸다 —
     .ab-idx(5열) 38px · .strat-table(8열) 67px · .mk-cal 186px · #kr-screener-table 15px

   정책: 열을 숨겨 맞추지 않는다. 비교용 표는 열이 곧 정보다(Park: 정보 없이 칸만
   차지하는 건 싫다 = 반대로 정보를 지워 칸을 맞추는 것도 답이 아니다).
   ①좁은 폭에서 여백·글자를 조여 최대한 다 넣고 → ②그래도 넘치면 표만 스크롤한다.
   카드째 스크롤 컨테이너로 만들면 제목·기준일 배지까지 같이 움직이므로 표만 감싼다.

   ※ 이 파일에 이미 있는 열 숨김 규칙(.index-table, #strategies-table, #screener-table)은
     이 라운드에서 건드리지 않았다. 지금 잘리고 있지 않고, 바꾸면 라이브 정보 노출이
     달라진다 — '정보를 조용히 지우는 게 맞나'는 Park 결정으로 올린다. */
.tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 모바일 OS 는 가로 스크롤바를 숨긴다. 그러면 '잘림'이 '못 찾는 정보'로 바뀔 뿐이다
       (크로스모델 2/2 지적). 그러데이션 4겹 = 양끝 덮개 2 + 그림자 2.
       local 은 내용과 같이 스크롤하고 scroll 은 제자리에 있으므로, 끝에 닿으면 덮개가
       그림자를 덮어 저절로 사라진다 — JS 없이 실제로 넘칠 때만 보인다. */
    background:
        linear-gradient(to right, var(--bg-secondary, #121212) 30%, rgba(18,18,18,0)) left center / 22px 100% no-repeat local,
        linear-gradient(to left,  var(--bg-secondary, #121212) 30%, rgba(18,18,18,0)) right center / 22px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,.5), rgba(0,0,0,0)) left center / 11px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) right center / 11px 100% no-repeat scroll;
}

/* ===== 표를 세로로 흐르게 — 폰의 스크롤 축은 하나다 (2026-08-27 Park 지시) =====
   > "아래로 밀어서 보는게 맞잖아 스크롤에서는. 특히 세로모드에서는.
   >  ... 가로로 뭔가 길었던거 내가 짤랐던 적도 있거든 폭안에 넣고 아래로 두라고"

   R447 에서 나는 넘치는 표를 .tbl-scroll(가로 스크롤)로 처리했다. 방향이 틀렸다.
   근거로 삼은 업계 권고("8~12열 금융 비교표는 숨기지 말고 가로 스크롤")는 **가로 화면
   전제**였는데, 우리 조건(폰 세로)에 대보지 않고 옮겼다 — 카고 컬트였다.
   세로는 사용자가 원래 미는 축이라 공짜다. 가로는 **존재를 먼저 알아채야** 하는 축이라
   비용이다. 그래서 폰에서 답은 셋 중 하나뿐이다:
     ① 조여서 폭 안에 넣는다(1순위) → ② 안 되면 아래로 흐르게 재배치(여기) →
     ③ 열 숨김은 여전히 금지(정보를 지우는 것이라 Park 가 거부)

   .tbl-scroll 은 남겨 둔다 — 예상 못 한 내용(긴 종목명 등)에 대한 마지막 그물이다.
   다만 **세로 폭에서는 절대 발동하면 안 된다**. 스윕이 이걸 매 실행 기계 검증한다. */
/* 발동 폭 560px. tbl-stack 은 **조여도 안 들어가는 표에만** 붙인다(현재 8열 전략표 2종).
   한때 6열 주식표·스크리너에도 붙였다가 되돌렸다 — 그 표들은 390 에서 멀쩡히 들어가는데
   재배치가 걸려 페이지가 11,000px 로 늘어났다(실측). 클래스를 붙일지는 표마다 판단한다. */
@media (max-width: 560px) {
    table.tbl-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
                            clip: rect(0 0 0 0); white-space: nowrap; }  /* 화면에서만 숨김 — 스크린리더는 읽는다 */
    table.tbl-stack, table.tbl-stack tbody, table.tbl-stack td { display: block; width: auto; }
    /* 한 항목당 한 줄씩 쌓으면 8행 × 18전략 = 144줄이라 스크롤이 과하게 길어진다.
       세로로 흐르되 **밀도는 지킨다** — 값 칸은 2열로 접고, 이름처럼 긴 것만 한 줄 통으로.
       (Park 정보밀도 원칙: 화면이 빡빡한 게 돈 다루는 사람들의 특징) */
    table.tbl-stack tr {
        display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px;
        border-bottom: 1px solid var(--border-color, #282828);
        padding: 5px 0;
    }
    table.tbl-stack td[colspan] { grid-column: 1 / -1; }
    /* 첫 칸은 그 행이 무엇인지 말하는 식별자(종목명+코드 등)라 대개 길다.
       반쪽 칸에 가두면 이웃 칸으로 넘쳐 글자가 포갠다(실측 /kr-stock @390: 등락률이
       종목명 위에 32px 겹침). 기본은 한 줄 통으로 두고, 짧은 식별자를 쓰는 표만
       아래에서 되돌린다(예: 전략표의 #번호). */
    table.tbl-stack td:first-child { grid-column: 1 / -1; justify-content: flex-start;
                                     text-align: left !important; font-weight: 700; gap: 6px; }
    table.tbl-stack td:first-child::before { content: none; }
    table.tbl-stack td { min-width: 0; }
    table.tbl-stack td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
        border: 0 !important; padding: 1px 0 !important; text-align: right !important;
        white-space: normal;
    }
    /* 라벨은 stackLabels(navigation.js)가 thead 에서 복사해 data-label 로 심는다(i18n 자동 추종) */
    table.tbl-stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto; text-align: left;
        color: var(--text-dim, #606058); font-weight: 400;
    }
    /* 값이 없는 칸은 줄만 차지한다 — Park: 정보 없이 칸만 차지하는 건 싫다 */
    table.tbl-stack td:empty { display: none; }
    /* 안내행(로딩·에러·제외 사유)은 한 줄 그대로 */
    table.tbl-stack td[colspan] { display: block; text-align: center !important; }

    /* 첫 줄은 '#번호 | 이름' 이 제목 노릇을 한다 — 라벨 없이 값만, 왼쪽 정렬.
       나머지 지표만 2열로 접는다. (겹치기 쉬운 음수 마진 대신 그리드 칸으로 나눈다) */
    table.tbl-stack td.strat-id   { grid-column: 1; }
    table.tbl-stack td.strat-name { grid-column: 2; }
    /* #번호는 칸 오른쪽 끝에 붙여 이름과 붙어 읽히게 한다 — 가운데 빈 칸이 뜨면
       Park 가 싫어하는 '정보 없이 칸만 차지' 다. */
    table.tbl-stack td.strat-id   { justify-content: flex-end; padding-right: 6px !important; }
    table.tbl-stack td.strat-name { justify-content: flex-start; }
    table.tbl-stack td.strat-id,
    table.tbl-stack td.strat-name { text-align: left !important;
                                    font-weight: 700; padding-bottom: 3px !important; }
    table.tbl-stack td.strat-id::before,
    table.tbl-stack td.strat-name::before { content: none; }
}

    /* ★2026-08-27: 320px 에서 27px 넘쳐 가로로 밀어야 했다. 세로 모드의 스크롤 축은
       하나뿐이므로(Park) 조여서 폭 안에 넣는다. tbl-stack(세로 재배치)은 여기 안 쓴다 —
       이 표는 고정 높이 스크롤 컨테이너 안에 있어 display:block 으로 바꾸면 행이 겹친다
       (실측으로 확인하고 되돌렸다). 안 아픈 데를 손대면 그게 다음 회귀다. */
    @media (max-width: 400px) {
        .table-scroll { overflow-x: hidden; }
        /* ★크로스모델 2/2 지적 수용(2026-08-27): 0.62rem 은 root 15px 기준 9.3px 로
           가독성 하한(11~12px) 아래다. 밀도를 위해 읽을 수 없게 만드는 건 밀도가 아니다.
           그리고 종목코드를 숨겼던 건 **내가 금지한 '열 숨김'과 같은 잘못**이었다 —
           우선주·유사종목을 코드 없이 구별할 수 없다. 되돌리고 폭은 이름 말줄임으로 뺀다. */
        /* 320px 대에서는 조여도 11px 이 남는다 — 조일 자리를 다 썼으면 재배치할 자리다.
           단 이 표들은 고정 높이 내부 스크롤(.table-scroll) 안에 있어서, 먼저 그 높이를
           풀지 않으면 display 를 바꾼 행들이 서로 겹친다(한 번 겪고 되돌린 적 있다).
           폰에서 페이지 스크롤 안에 또 스크롤 영역을 두는 것도 어차피 좋지 않다. */
        .us-stock-table, .kr-stock-table { font-size: 0.75rem; }
        .us-stock-table th, .us-stock-table td,
        .kr-stock-table th, .kr-stock-table td { padding: 3px 3px !important; }
        /* ★R500(2026-09-22): 영어 종목명("Hyundai Engineering & Construction Co.,Ltd.")이 nowrap 그대로라
           첫 열이 282px, 표 399px > 컨테이너 356px — 위의 overflow-x:hidden 때문에 오른쪽 열이 잘려
           도달 불가였다(배포 스윕 SIDE_SCROLL +37~54px, 08-27 이후 상존). 종목코드 [000720] 는 그대로
           보이고(코드 숨김 금지) **이름만** 말줄임. 폭은 vw 로 — 320px 에서도 같은 비율. */
        .kr-stock-table .stock-name, .us-stock-table .stock-name {
            display: inline-block; max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; vertical-align: bottom;
        }
    }
    /* 320px 대에서 11~13px 이 남는다. **글꼴은 더 못 줄인다**(하한 0.75rem) —
       여백만 한 단계 더 깎는다. 여백은 판독성 하한이 아니라 밀도의 문제다.
       6열 × 1px × 양쪽 = 12px 회수. */
    @media (max-width: 340px) {
        .us-stock-table th, .us-stock-table td,
        .kr-stock-table th, .kr-stock-table td,
        .screener-table th, .screener-table td { padding: 3px 2px !important; }
        .stock-name { max-width: 64px; }
        .stock-name { max-width: 72px; display: inline-block; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
    }