/* ============================================================
   수업용 종목 추천 — DTW 종목추천 시스템의 디자인 언어를 이식(팔레트는 연두 계열).
   토큰·타이포·테이블·카드·버튼 규격을 dtw/system.html 에서 그대로 가져왔다.
   (dtw 는 단일 파일 SPA, 이쪽은 Flask 다중 페이지라 라우팅만 다르게 처리)
   ============================================================ */

:root {
    /* 포근한 연두.
       - 색상을 순수 초록(≈85°)에서 노랑 쪽(≈72°)으로 당겨 날카로움을 뺐다.
       - 채도를 낮추고 회색기를 섞어 형광 느낌을 없앴다.
       - 셋 다 같은 색상 위 명도 사다리: surface2 < bg < surface.
         (카드를 순수 흰색으로 두면 배경의 연두와 어긋나 카드만 떠 보인다.) */
    --bg:      #faf7f8;   /* 페이지 바탕 (로즈) */
    --surface: #fffdfd;   /* 카드 — 바탕보다 밝게 */
    --surface2:#eee7ea;   /* 표 헤더·칩 — 바탕보다 어둡게 */
    --border:  rgba(88,70,76,0.11);
    --border2: rgba(88,70,76,0.18);
    --accent:  #9c5a71;   /* 회색을 섞어 채도를 낮춘 장미빛.
                          분홍은 연두보다 뜨겁게 읽혀서, 같은 채도로 두면
                          화면 전체가 붉어 보인다. 한 단계 내려 잡았다. */
    --danger:  #b94040;   /* 되돌릴 수 없는 동작(삭제·탈퇴·로그아웃) 전용 */
    /* 분홍 테마에서는 '문제'를 빨강으로 칠하면 바탕·강조색에 묻힌다.
       상태 표시는 분홍에서 먼 색으로 따로 뺀다. 버튼의 빨강은 모양으로
       이미 구분되므로 그대로 둔다. */
    --flag:    #b94040;   /* 미제출·미가입 — 빠진 것. 빨강이 '문제' 로 바로 읽힌다 */
    --flag-bg: rgba(185,64,64,0.10);
    --flag-bd: rgba(185,64,64,0.30);
    /* '나' 행 강조는 보라로 뺀다. 강조색(로즈)과 같은 계열로 두면
       내 행인지 그냥 강조된 행인지 구분이 안 된다. */
    --me:       #6d3f9e;
    --me-bg:    rgba(109,63,158,0.12);
    --me-solid: #ebe2f0;   /* 고정열용 — surface 위에 --me 14% 를 얹은 불투명값 */
    --info:    #0e7490;   /* 휴장으로 매매일이 조정됨 — 문제가 아니라 안내 */
    --info-bg: rgba(14,116,144,0.08);
    --info-bd: rgba(14,116,144,0.26);
    --text:    #2f2b2d;   /* 따뜻한 먹색 */
    --text2:   #5d5559;
    --text3:   #9b9296;
    --ok:      #2e7d56;
    /* 한글은 JetBrains Mono 에 없음 → Pretendard 폴백(시스템 임의 폰트 방지) */
    --mono:    'JetBrains Mono', 'Pretendard Variable', 'Pretendard', monospace;
    /* 동적 서브셋 빌드는 'Pretendard Variable' 로 등록된다(통짜 static 빌드는
       'Pretendard'). 이름이 안 맞으면 조용히 시스템 폰트로 떨어지므로 둘 다 적는다. */
    --sans:    'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 스크롤바 유무로 폭이 흔들리지 않게 항상 표시 */
html { zoom: 1.15; overflow-y: scroll; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    /* ★ min-height 에 100vh 를 쓰면 html{zoom:1.15} 와 곱해져 문서가 뷰포트보다
       15% 길어진다(900px 화면에서 1035px). 내용이 짧은 화면인데도 스크롤이 생기던 원인.
       zoom 으로 나눠 실제 화면 높이에 맞춘다. 폰(zoom:1)에서는 값이 그대로다. */
    min-height: calc(100vh / 1.15);
    min-height: calc(100dvh / 1.15);   /* iOS: 100vh 는 주소창을 포함해 실제보다 크다 */
    display: flex;
}

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .8; }

/* ─────────────────────────── 사이드바 ─────────────────────────── */

.sidebar {
    width: 222px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 0.5px solid var(--border2);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    overflow-y: auto;
}

.sidebar-logo {
    padding: 22px 18px 18px;
    border-bottom: 0.5px solid var(--border);
}
.sidebar-logo-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    display: block;
}
.sidebar-logo-sub {
    font-size: 10px;
    color: var(--text3);
    margin-top: 3px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text3);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--surface2); color: var(--text2); opacity: 1; }
.nav-item.active {
    background: var(--surface2);
    color: var(--accent);
    font-weight: 800;
}
.nav-icon { font-size: 15px; font-weight: 800; opacity: .7; line-height: 1; width: 18px; text-align: center; }

.nav-section-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--text3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 12px 4px;
    cursor: default;
}

.sidebar-foot { margin-top: auto; padding: 12px 8px 16px; }
.btn-logout {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 8px; border: none;
    background: transparent; color: var(--danger);
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    cursor: pointer; text-align: left; transition: background 0.12s;
}
.btn-logout:hover { background: rgba(185,64,64,0.07); opacity: 1; }
.sidebar-who {
    font-size: 10px; color: var(--text3);
    padding: 0 12px 8px;
}
.sidebar-who b { color: var(--text2); font-weight: 700; }

/* ─────────────────────────── 본문 ─────────────────────────── */

.content {
    margin-left: 222px;
    flex: 1;
    padding: 28px 24px 40px;
    min-width: 0;
}
.page { display: flex; flex-direction: column; gap: 16px; max-width: 1160px; }

.top-header {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface);
    border: 0.5px solid var(--border2);
    border-radius: 16px;
    padding: 11px 16px;
    box-shadow: 0 2px 8px rgba(88,70,76,0.05);
}
/* 제목 · 주차 선택자 · 오늘 날짜를 한 줄에. 세로를 최대한 아낀다. */
.head-main {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* 첫 줄은 제목(왼쪽)과 날짜(오른쪽). 주차 선택자 묶음은 flex-basis 100% 로
   반드시 아랫줄로 내려가고, 그 줄 안에서 가운데 정렬한다. */
.head-main .header-date { margin-left: auto; }
/* 순위표처럼 아랫줄이 붙는 헤더가 아니라, 좌우로만 나뉘는 헤더.
   오른쪽 요소(오늘 날짜·CSV 버튼)가 박스 높이의 한가운데 온다. */
.top-header.head-split {
    flex-direction: row; align-items: center;
    justify-content: space-between; gap: 14px;
}
.top-header.head-split > :first-child { min-width: 0; }
.head-main .wk-step { flex: 0 0 100%; justify-content: center; margin: 0; }
.head-lbl { font-size: 12px; font-weight: 800; color: var(--text2); }
.header-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.header-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; }
.header-date  { font-size: 11px; color: var(--text3); font-family: var(--mono); white-space: nowrap; }

/* ─────────────────────────── 카드 ─────────────────────────── */

.card {
    background: var(--surface);
    border: 0.5px solid var(--border2);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.card-head h2 { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
/* 제목 바로 밑에 붙는 설명은 카드 gap 을 그대로 두면 한 줄 띄운 것처럼 보인다 */
.card-head + p, .card-head + ul, .card-head + .muted { margin-top: -4px; }
.card-sub { font-size: 11px; color: var(--text3); font-family: var(--mono); }

.grid-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: 16px;
    align-items: start;
}
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.empty-card {
    background: var(--surface);
    border: 0.5px dashed var(--border2);
    border-radius: 14px;
    padding: 36px 20px;
    text-align: center;
}
.empty-card h2 { font-size: 14px; font-weight: 800; margin-bottom: 5px; }
.empty-card p { font-size: 11px; color: var(--text3); }

.muted { color: var(--text3); }
.small { font-size: 11px; }
.mono  { font-family: var(--mono); }

/* ─────────────────────────── 플래시 ─────────────────────────── */

.flash-stack { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.flash {
    padding: 10px 14px; border-radius: 10px;
    font-size: 12px; font-weight: 600;
    border: 0.5px solid var(--border2);
    background: var(--surface2); color: var(--text2);
}
.flash-success { background: rgba(46,125,86,0.08); color: var(--ok);     border-color: rgba(46,125,86,0.25); }
.flash-error   { background: rgba(185,64,64,0.07); color: var(--danger); border-color: rgba(185,64,64,0.28); }


/* ─────────────────────────── 테이블 ─────────────────────────── */

.lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.lb-table th, .lb-table td {
    border-bottom: 0.5px solid var(--border);
    padding: 7px 10px;
    text-align: left;
    vertical-align: middle;
}
.lb-table th {
    font-size: 10px;
    font-weight: 800;
    color: var(--text3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--surface2);
    white-space: nowrap;
}
.lb-table th:first-child { border-top-left-radius: 8px; }
.lb-table th:last-child  { border-top-right-radius: 8px; }
.lb-table tbody tr:last-child td { border-bottom: none; }
.lb-table td.num, .lb-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-table tr.active-row td { background: var(--surface2); }
.table-wrap { overflow-x: auto; border-radius: 8px; border: 0.5px solid var(--border); }

/* 순위 (dtw 메달 색) */
.rank-cell {
    width: 34px; text-align: center;
    font-family: var(--mono); font-weight: 800; font-size: 12px;
    color: var(--text3);
}
.rank-cell.gold   { color: #b8860b; font-size: 13px; }
.rank-cell.silver { color: #808080; font-size: 13px; }
.rank-cell.bronze { color: #a0522d; font-size: 13px; }

.lb-name-cell { font-weight: 700; color: var(--text); font-size: 12px; }

/* 수익률 — 한국 시장 관례: 빨강 = 상승, 파랑 = 하락 */
.ret-pos  { color: #c0392b; font-weight: 700; font-family: var(--mono); }
.ret-neg  { color: #2980b9; font-weight: 700; font-family: var(--mono); }
.ret-zero { color: var(--text3); font-family: var(--mono); }

.lb-code { font-family: var(--mono); font-weight: 700; color: var(--text); font-size: 12px; }
.lb-name-pick { font-size: 10px; color: var(--text3); font-weight: 500; margin-top: 1px; }
.lb-price { font-family: var(--mono); color: var(--text2); font-size: 11px; }

.type-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge-ok   { background: rgba(46,125,86,0.10);  color: var(--ok); }
.badge-err  { background: var(--flag-bg);  color: var(--flag); }
.badge-miss { background: var(--surface2);       color: var(--text3); }

/* ─────────────────────────── 버튼 ─────────────────────────── */

.btn-all {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px 22px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
.btn-all:hover  { opacity: 0.88; }
.btn-all:active { transform: scale(0.97); }
.btn-all:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }


.btn-sm {
    border-radius: 5px; padding: 4px 9px; font-family: var(--sans);
    font-size: 10px; font-weight: 800; cursor: pointer;
    transition: opacity .15s, background .12s;
    /* 색을 안 주면 currentColor(진한 본문색)가 테두리에 그대로 나와 과하게 튄다 */
    border: 0.5px solid var(--border2); background: transparent; color: var(--text2);
}
.btn-sm:hover { opacity: 0.75; }

/* 취소·닫기 같은 물러나는 동작 — 확인 버튼과 경쟁하지 않게 조용히 */
.btn-quiet {
    border: none; background: transparent; color: var(--text3);
    border-radius: 7px; padding: 8px 14px;
    font-family: var(--sans); font-size: 12px; font-weight: 700;
    cursor: pointer; transition: background .12s, color .12s;
}
.btn-quiet:hover { background: var(--surface2); color: var(--text2); }
.btn-edit { color: var(--accent); border-color: rgba(156,90,113,0.30); background: rgba(156,90,113,0.10); }
.btn-del  { color: var(--danger); border-color: rgba(185,64,64,0.30);  background: rgba(185,64,64,0.06); }
.btn-ghost {
    color: var(--text2); border-color: var(--border2); background: var(--surface);
    border-radius: 8px; padding: 7px 12px; font-size: 11px; font-weight: 700;
    border-width: 0.5px; border-style: solid; cursor: pointer; font-family: var(--sans);
    display: inline-flex; align-items: center; gap: 5px; transition: background .12s;
}
.btn-ghost:hover { background: var(--surface2); opacity: 1; }

/* ─────────────────────────── 폼 ─────────────────────────── */

.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-label { font-size: 11px; font-weight: 700; color: var(--text2); }
.form-input {
    width: 100%; padding: 9px 12px;
    border: 0.5px solid var(--border2); border-radius: 8px;
    font-family: var(--sans); font-size: 12px; background: var(--bg);
    color: var(--text); outline: none; transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--accent); }
textarea.form-input { resize: vertical; min-height: 140px; font-family: var(--mono); font-size: 12px; line-height: 1.65; }
/* iOS 확대를 막으려면 입력 글자는 16px 이어야 하지만, 안내 문구까지 크면 혼자 튄다.
   placeholder 만 본문 크기로 낮춘다 (입력 자체는 16px 이라 확대되지 않는다). */
textarea.form-input::placeholder, .form-input::placeholder { font-size: 12px; }
.form-sep { height: 0.5px; background: var(--border); margin: 14px 0; }
.input-btn-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.input-btn-row .form-row { flex: 1; margin-bottom: 0; min-width: 140px; }

.inline-edit { display: flex; gap: 5px; align-items: center; }
.inline-edit .form-input {
    padding: 4px 8px; font-family: var(--mono); font-size: 11px; width: 108px;
}

/* ─────────────────────────── 로그인 ─────────────────────────── */

.login-wrap {
    position: fixed; inset: 0; background: var(--bg);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-card {
    background: var(--surface); border: 0.5px solid var(--border2);
    border-radius: 20px; padding: 44px 48px; width: 360px; max-width: 100%;
    box-shadow: 0 8px 32px rgba(88,70,76,0.11);
}
.login-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.35; }
.login-sub   { font-size: 11px; color: var(--text3); margin-bottom: 30px; }
.login-input {
    width: 100%; padding: 11px 14px;
    border: 0.5px solid var(--border2); border-radius: 9px;
    font-family: var(--sans); font-size: 13px;
    background: var(--bg); color: var(--text);
    outline: none; margin-bottom: 10px;
    transition: border-color 0.15s;
}
.login-input:focus { border-color: var(--accent); }
.btn-login {
    width: 100%; padding: 12px; background: var(--accent); color: #fff;
    border: none; border-radius: 9px; font-family: var(--sans);
    font-size: 13px; font-weight: 800; cursor: pointer; transition: opacity 0.15s;
}
.btn-login:hover { opacity: 0.88; }

/* ─────────────────────────── 내 등수 조회 결과 ─────────────────────────── */

.result-card {
    background: var(--surface2);
    border: 0.5px solid var(--border2);
    border-radius: 10px; padding: 11px 13px;
    display: flex; flex-direction: column; gap: 4px;
}
.result-name { font-weight: 800; font-size: 12.5px; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 2px 0; }
.result-row.sub { font-size: 11px; color: var(--text3); padding-top: 0; margin-top: -3px; }
.result-row.hl { border-top: 0.5px solid var(--border2); padding-top: 6px; margin-top: 4px; }
.result-row strong { font-weight: 800; font-family: var(--mono); }
.result-history { margin-top: 8px; border-top: 0.5px solid var(--border2); padding-top: 8px; }
.result-history-title {
    font-size: 10px; color: var(--text3); font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;
}
.history-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.history-table th, .history-table td { padding: 4px 5px; text-align: left; border-bottom: 0.5px solid var(--border); }
.history-table th { color: var(--text3); font-weight: 800; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.history-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.history-table tr.missed td { color: var(--text3); }
.history-table tr:last-child td { border-bottom: none; }
.lookup-err { color: var(--danger); font-size: 11.5px; font-weight: 600; }

/* ─────────────────────────── 프롬프트 ─────────────────────────── */

.prompt-item {
    border: 0.5px solid var(--border2);
    border-radius: 10px;
    padding: 11px 13px;
    background: var(--surface2);
}
.prompt-item + .prompt-item { margin-top: 9px; }
.prompt-item.is-current { border-color: var(--accent); background: rgba(156,90,113,0.06); }
.prompt-meta {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 7px; font-size: 11px;
}
.prompt-week { font-weight: 800; color: var(--accent); font-size: 11px; }
.prompt-body {
    white-space: pre-wrap; word-break: break-word;
    font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
    background: var(--surface); border: 0.5px solid var(--border);
    border-radius: 8px; padding: 9px 11px;
    max-height: 280px; overflow: auto;
}

/* ─────────────────────────── 차트 ─────────────────────────── */

.hidden { display: none !important; }



/* ─────────────────────────── 모바일 ─────────────────────────── */

.mtabbar { display: none; }

@media (max-width: 768px) {
    /* 모바일은 1배율. 전역 zoom 1.15 는 폰에서 가용 폭을 깎아먹는다. */
    html { zoom: 1; }
    /* zoom 이 1 이므로 높이 보정도 풀어준다 */
    body { min-height: 100vh; min-height: 100dvh; }
    body { font-size: 12px; display: block; }

    .sidebar { display: none !important; }
    .content { margin-left: 0; padding: 16px 12px calc(88px + env(safe-area-inset-bottom, 0px)); }

    /* 하단 탭바 — 엄지가 닿는 위치에 주요 페이지 고정 */
    .mtabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
        background: var(--surface); border-top: 0.5px solid var(--border2);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.07);
    }
    .mtab {
        flex: 1 1 0; min-width: 0; min-height: 54px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        padding: 6px 4px; border: none; background: transparent;
        color: var(--text3); font-family: var(--sans); font-size: 10px; font-weight: 700;
        letter-spacing: -0.02em; cursor: pointer;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mtab:active { background: rgba(128,128,128,0.10); }
    .mtab.active { color: var(--accent); font-weight: 800; }
    .mtab .mtab-ico { font-size: 16px; line-height: 1; opacity: .8; }

    .top-header { border-radius: 12px; padding: 10px 12px; gap: 8px; }
    .head-main { gap: 8px; }
    .head-main .header-date { margin-left: auto; }
    .header-title { font-size: 15px; }

    .grid-two { grid-template-columns: 1fr; gap: 12px; }
    .stack { gap: 12px; }
    .card { border-radius: 12px; padding: 12px 13px; }

    .lb-table { font-size: 11.5px; }
    .lb-table th, .lb-table td { padding: 6px 7px; }
    .table-wrap { -webkit-overflow-scrolling: touch; }

    .chart-canvas-wrap { height: 190px; }
    .chart-legend { grid-template-columns: 1fr 1fr; }

    /* iOS 는 16px 미만 입력 필드를 탭하면 확대하고 되돌리지 않는다 */
    .form-input, .login-input, textarea.form-input { font-size: 16px !important; }
    .btn-all { width: 100%; justify-content: center; padding: 12px; }
    .login-card { padding: 32px 24px; border-radius: 16px; }
    .login-title { font-size: 20px; }
}

@media (max-width: 400px) {
    .chart-legend { grid-template-columns: 1fr; }
    .chart-canvas-wrap { height: 170px; }
}

/* ─────────────────────── 계정 (가입 · 승인) ─────────────────────── */

/* 비밀번호 표시 체크박스 — 로그인·회원가입 폼이 함께 쓴다.
   아래쪽 여백은 '로그인'/'가입 요청' 버튼과의 간격이다. 4px 이면 체크박스가
   버튼에 붙어 보인다.
   ※ 이 규칙은 파일 뒤쪽에 한 번 더 정의돼 있었고 그쪽이 이겨서(둘 다 명시도 같음,
      뒤에 온 것이 적용) 앞의 값이 무시됐다. 하나로 합쳤다 — 다시 나누지 말 것. */
.pw-show {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text3);
    margin: 2px 0 18px; cursor: pointer; user-select: none;
}
.pw-show input { width: 14px; height: 14px; cursor: pointer; }

.btn-login-alt {
    width: 100%; padding: 10px; margin-top: 8px; background: transparent;
    color: var(--text2); border: 0.5px solid var(--border2); border-radius: 9px;
    font-family: var(--sans); font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background 0.15s;
}
.btn-login-alt:hover { background: var(--surface2); }

.signup-note {
    font-size: 11px; color: var(--text3); line-height: 1.6;
    background: var(--surface2); border-radius: 8px;
    padding: 8px 11px; margin-bottom: 10px;
}

.nav-badge {
    margin-left: auto;
    background: var(--danger); color: #fff;
    font-family: var(--mono); font-size: 9.5px; font-weight: 800;
    border-radius: 999px; padding: 1px 6px; line-height: 1.5;
}

/* ─────────────────────── 매매 일정 안내 ─────────────────────── */

/* 한 줄에 나란히. 두 시장 일정이 같으면 블록 하나가 전체 폭을 쓰고,
   휴장으로 갈리면 좌우 두 블록이 된다. */
.sched-rows { display: flex; gap: 8px; align-items: stretch; }
.sched-row {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
    padding: 6px 10px; border-radius: 8px;
    background: var(--surface2); border: 0.5px solid var(--border);
    font-size: 11.5px; line-height: 1.4;
}
.sched-row.shifted { border-color: var(--info-bd); background: var(--info-bg); }
.sched-mkt {
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
    color: var(--text3); flex-shrink: 0;
    white-space: nowrap;      /* "국내장 · 미국장" 이 고정폭 안에서 줄바꿈되던 문제 */
}
.sched-row.shifted .sched-mkt { color: var(--danger); }
.sched-leg { color: var(--text2); }
.sched-leg b { font-family: var(--mono); font-weight: 800; color: var(--text); }
.sched-arrow { color: var(--text3); }
.sched-days { font-family: var(--mono); font-size: 11px; color: var(--text3); margin-left: 2px; }
.sched-why {
    margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--danger);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .sched-rows { flex-direction: column; }   /* 좁은 화면에서는 위아래로 */
    .sched-row { font-size: 11.5px; padding: 8px 9px; }
    .sched-why { margin-left: 0; width: 100%; }
}

/* ─────────────────── 순위표 (dtw Tabulator 이식) ─────────────────── */

.lb-scroll { overflow: visible; }
/* 순위표는 세로로 자르지 않는다 — 43명 전부를 페이지 스크롤로 본다 (dtw 와 같다).
   Tabulator 기본값이 overflow-y:auto 라, 스크롤이 필요 없어도 OS 설정에 따라
   회색 트랙이 보이고 휠이 표 안에 갇힌다. 가로 스크롤은 그대로 둔다. */
.lb-tabulator .tabulator-tableholder {
    overflow-y: hidden !important;
    height: auto !important;
    max-height: none !important;
}
.lb-tabulator { max-height: none !important; }
.lb-tabulator { width: 100%; font-size: 12px; background: var(--surface); zoom: 0.9; }

/* 상단 가로 스크롤바. zoom 은 반드시 .lb-tabulator 와 같아야 좌표계가 맞는다. */
.lb-topscroll { overflow-x: auto; overflow-y: hidden; margin-bottom: 3px; zoom: 0.9; }
.lb-topscroll-inner { height: 1px; }

/* Tabulator midnight(다크) 테마를 연두 라이트로 되돌린다 */
.lb-tabulator.tabulator { background: var(--surface); border: none; }
.lb-tabulator .tabulator-header { background: var(--surface2); border-bottom: 1px solid var(--border); }
.lb-tabulator .tabulator-header .tabulator-col {
    background: var(--surface2); color: var(--text3);
    font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
    border-right: 0.5px solid var(--border);
}
.lb-tabulator .tabulator-header .tabulator-col .tabulator-col-title { text-align: center !important; width: 100%; }
.lb-tabulator .tabulator-header .tabulator-col.tabulator-active-round {
    background: rgba(156,90,113,0.16); color: var(--accent);
}
.lb-tabulator .tabulator-header .tabulator-col:hover { background: var(--surface2) !important; cursor: default !important; }
.lb-tabulator .tabulator-header .tabulator-col.tabulator-active-round:hover { background: rgba(156,90,113,0.16) !important; }
.lb-tabulator .tabulator-col-sorter { display: none !important; }
.lb-tabulator .tabulator-row,
.lb-tabulator .tabulator-row.tabulator-row-even {
    background: var(--surface) !important; border-bottom: 0.5px solid var(--border);
}
.lb-tabulator .tabulator-row:hover,
.lb-tabulator .tabulator-row.tabulator-row-even:hover { background: var(--surface) !important; box-shadow: none !important; }
.lb-tabulator .tabulator-cell {
    border-right: 0.5px solid var(--border); padding: 7px 10px;
    color: var(--text2); background-color: var(--surface); cursor: default;
}
.lb-tabulator .tabulator-row:hover .tabulator-cell { background-color: var(--surface) !important; }
.lb-tabulator .tabulator-row, .lb-tabulator .tabulator-cell, .lb-tabulator .tabulator-row * { cursor: default !important; }
.lb-tabulator .tabulator-row .tabulator-frozen { background: var(--surface); }
.lb-tabulator .tabulator-header .tabulator-frozen { background: var(--surface2); }

/* 시장 지수 행 */
.lb-tabulator .tabulator-row.benchmark { background: #eef4fa !important; }
.lb-tabulator .tabulator-row.benchmark .tabulator-cell,
.lb-tabulator .tabulator-row.benchmark .tabulator-frozen {
    background-color: #eef4fa !important; font-style: italic; color: var(--text2);
    /* 이탤릭 오버행 — 마지막 글자가 셀 경계에 잘리지 않게 */
    padding-right: 10px;
}
.lb-tabulator .tabulator-row.benchmark:hover .tabulator-cell { background-color: #eef4fa !important; }

/* 순위 메달 */
.lb-r1 { color: #b8860b; font-weight: 800; font-family: var(--mono); font-size: 13px; }
.lb-r2 { color: #808080; font-weight: 800; font-family: var(--mono); font-size: 13px; }
.lb-r3 { color: #a0522d; font-weight: 800; font-family: var(--mono); font-size: 13px; }
.lb-rn { color: var(--text3); font-weight: 800; font-family: var(--mono); font-size: 12px; }

.lb-cum    { font-family: var(--mono); font-weight: 800; font-size: 12px; }
.lb-cell { line-height: 1.35; }
.lb-cell-sub { font-family: var(--mono); font-size: 9.5px; color: var(--text3); margin-top: 1px; }
.lb-name-pick { font-size: 11px; color: var(--text); font-weight: 600; }
.lb-price { font-family: var(--mono); color: var(--text2); font-size: 11px; }
.lb-missed-tag { font-size: 10.5px; font-weight: 800; color: var(--flag); }
/* 미제출 — 한눈에 들어오도록 붉게. 실제 수익률이 아니라
   페널티 값이므로 점선 밑줄로 한 번 더 구분한다. */
/* 미제출 페널티 값.
   숫자 자체는 '그 주차에 반영되는 수익률' 이므로 다른 마이너스와 같은 파랑을 쓴다
   (한국 관례: 빨강=상승, 파랑=하락). 실제로 낸 수익률이 아니라는 것은
   색이 아니라 점선 밑줄과 옆의 '미제출' 표시로 구분한다. */
.lb-penalty {
    font-family: var(--mono); font-size: 11px; font-weight: 800;
    color: #2980b9; border-bottom: 1px dotted #2980b9;
}
/* 미제출 셀 배경 — 행 hover 규칙(.tabulator-row:hover .tabulator-cell)이 !important 로
   덮어쓰기 때문에, 같은 우선순위로 더 구체적으로 도로 적는다.
   그래야 마우스를 올려도 깜빡이지 않고 계속 붉게 남는다. */
.lb-tabulator .tabulator-cell.lb-missed-cell,
.lb-tabulator .tabulator-row:hover .tabulator-cell.lb-missed-cell,
.lb-tabulator .tabulator-row.tabulator-row-even:hover .tabulator-cell.lb-missed-cell,
.lb-tabulator .tabulator-row.benchmark:hover .tabulator-cell.lb-missed-cell {
    background-color: var(--flag-bg) !important;
}

/* ─────────────────── 플로팅 버튼 · 모달 ─────────────────── */

/* 순위표 아래에 그대로 둔다 — 띄우지 않는다.
   position:fixed 로 오른쪽에 띄우면 뷰포트가 1900px 정도보다 좁을 때 순위표의
   오른쪽 열(가격)을 덮는다. 스크롤 위치에 따라 덮이는 행이 바뀌어서, 특정 행의
   값이 잘린 것처럼 보인다. 폰에서 같은 이유로 이미 static 으로 내렸었는데,
   1280·1440 노트북과 폴더블 펼침(820~930px)에서도 똑같이 겹치는 것을 확인했다. */
.fab-wrap { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.fab {
    position: static;
    padding: 9px 16px; border-radius: 999px;
    background: var(--surface); color: var(--text2);
    border: 0.5px solid var(--border2); box-shadow: 0 3px 12px rgba(60,38,46,0.12);
    font-family: var(--sans); font-size: 12px; font-weight: 800; cursor: pointer;
    transition: background .12s, transform .1s;
}
.fab:hover  { background: var(--surface2); }
.fab:active { transform: scale(0.96); }


.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.38);
    display: flex; align-items: center; justify-content: center; z-index: 9000;
    padding: 20px; overflow-y: auto;
}
.modal-card {
    background: var(--surface); border: 0.5px solid var(--border2);
    border-radius: 16px; padding: 24px 28px; width: 520px; max-width: 94vw;
    box-shadow: 0 8px 32px rgba(60,38,46,0.18); max-height: 86vh; overflow-y: auto;
}
.modal-card.modal-wide { width: 820px; }
.modal-title { font-size: 15px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.01em; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* 되돌릴 수 없는 동작 — 확인 버튼을 붉게 */
.btn-all.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.rule-list { padding-left: 18px; line-height: 1.95; font-size: 12.5px; color: var(--text2); }
.rule-list li + li { margin-top: 3px; }
.rule-list b { color: var(--text); }
.sched-cell-shift { background: var(--info-bg); }
.sched-cell-shift .mono { color: var(--danger); font-weight: 700; }

@media (max-width: 768px) {
    /* 폰에서는 Tabulator 대신 세로 목록(.lbm)을 쓴다. 축소가 필요 없고,
       걸어두면 48px 로 잡은 터치 타깃이 41px 로 줄어든다. */
    .lb-tabulator, .lb-topscroll { zoom: 1; }
    .modal-card { padding: 18px 16px; border-radius: 14px; }
}

/* ─────────────────── 주차 이동 스테퍼 (dtw 방식) ─────────────────── */

.wk-step { display: inline-flex; align-items: center; gap: 8px; }
.wk-step h2 { margin: 0; }
.wk-select {
    appearance: none; -webkit-appearance: none;
    padding: 4px 26px 4px 10px;
    border-radius: 7px; border: 1px solid var(--border2);
    background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235f6154' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 9px center;
    color: var(--accent);
    font-family: var(--sans); font-size: 14px; font-weight: 800; line-height: 1.3;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.wk-select:hover { border-color: var(--accent); }
.wk-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }




/* ───────── 투자 일정표 모달 (dtw 복제) ───────── */

.sched-modal-card {
    width: min(720px, 94vw) !important;
    max-width: 94vw !important;
    max-height: 88vh !important;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex; flex-direction: column;
}
.sched-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 0.5px solid var(--border);
}
.right-sidebar-sub { font-size: 9.5px; color: var(--text3); line-height: 1.5; }
.btn-sched-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--text3); font-size: 14px; line-height: 1;
    padding: 2px 4px; border-radius: 4px; font-family: var(--sans);
}
.btn-sched-close:hover { color: var(--text); background: var(--surface2); }
.sched-modal-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sched-modal-col { display: flex; flex-direction: column; min-height: 0; }
.sched-modal-card .sched-section-title { padding: 7px 4px 5px; font-size: 10px; }
.sched-modal-card .sched-table th { padding: 4px 8px; font-size: 9px; }
.sched-modal-card .sched-table td { padding: 3px 8px; font-size: 11px; }
.sched-modal-card .modal-title { font-size: 13px; }

.sched-section-title {
    font-size: 10px; font-weight: 800; color: var(--text2);
    letter-spacing: 0.05em; text-transform: uppercase;
    padding: 14px 10px 6px;
}
.sched-table { width: 100%; border-collapse: collapse; }
.sched-table th {
    font-size: 9px; font-weight: 800; color: var(--text3);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 5px 10px; text-align: left;
    background: var(--surface2);
    border-bottom: 0.5px solid var(--border2);
}
.sched-table td {
    padding: 5px 10px;
    border-bottom: 0.5px solid var(--border);
    font-family: var(--mono); font-size: 10px; color: var(--text);
    white-space: nowrap;
}
.sched-table tr:last-child td { border-bottom: none; }
.sched-row-done td { color: var(--text3); }
.sched-done    { color: var(--text3); font-size: 9px; }
.sched-pending { color: var(--text3); font-size: 9px; }
.adj-date { color: var(--info); border-bottom: 1px dashed var(--info); cursor: help; }

#sched-tip {
    /* 사유 유무와 관계없이 항상 공간을 예약 → 호버 시 모달 높이가 고정 */
    display: block; min-height: 34px; box-sizing: border-box;
    margin-top: 12px; padding: 8px 10px;
    border-top: 1px solid transparent;
    color: var(--info); font-size: 10px; font-family: var(--sans);
    line-height: 1.4; flex-shrink: 0;
}
#sched-tip:not(:empty) {
    background: var(--info-bg);
    border-top-color: var(--info-bd);
}

/* 좀은 화면 — 5열이 안 들어가므로 주차별 카드로 내린다 */
.schcards { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.schcard {
    background: var(--surface2); border: 0.5px solid var(--border2);
    border-radius: 9px; padding: 8px 10px;
}
.schcard-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.schcard-top .ss { font-family: var(--mono); font-weight: 800; font-size: 12.5px; color: var(--text); }
.schcard-top > span:last-child { margin-left: auto; font-size: 11px; }
/* 매수 → 매도 · 보유일을 한 줄에. '매수/매도/보유' 라벨은 화살표로 대신한다 —
   같은 형식이 13주차 × 2시장 반복되므로 라벨은 두 번째 카드부터 잉여다. */
.schcard-line {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 12px; color: var(--text2);
}
.schcard-line .ar { color: var(--text3); }
.schcard-line .dd {
    margin-left: auto; font-family: var(--sans); font-size: 10.5px;
    font-weight: 700; color: var(--text3);
}

@media (max-width: 640px) {
    .sched-modal-card { padding: 16px 14px; }
    .sched-modal-body { grid-template-columns: 1fr; gap: 14px; }
}

/* ───────── 프롬프트 버전 이력 — 버전마다 펼치고 접기 ───────── */

.pv-student { border-bottom: 0.5px solid var(--border); }
.pv-student:last-child { border-bottom: none; }

/* 43명을 한 화면에 — 한 줄에 여러 명씩 깔고, 누르면 팝업으로 이력을 연다. */
.pv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
}
.pv-cardbtn {
    display: flex; flex-direction: column; gap: 5px;
    padding: 10px 12px; text-align: left;
    border: 0.5px solid var(--border2); border-radius: 10px;
    background: var(--surface); color: var(--text);
    font-family: var(--sans); cursor: pointer;
    transition: background .12s, border-color .12s, transform .1s;
}
button.pv-cardbtn:hover  { background: var(--surface2); border-color: var(--accent); }
button.pv-cardbtn:active { transform: scale(0.985); }
.pv-cardname {
    font-size: 12.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-cardmeta { display: flex; align-items: center; gap: 6px; }

.pv-cardbtn.is-missing {
    background: rgba(185, 64, 64, 0.10);
    border-color: rgba(185, 64, 64, 0.28);
    cursor: default;
}
.pv-cardbtn.is-missing .pv-cardname { color: var(--danger); }
.badge-danger { background: rgba(185, 64, 64, 0.14); color: var(--danger); }

/* 팝업 본문 — 버전마다 펼치고 접기 */
.mp-body { max-height: 66vh; overflow-y: auto; }

.pv-item {
    border: 0.5px solid var(--border2); border-radius: 9px;
    background: var(--surface); margin-bottom: 6px;
}
.pv-item[open] { background: var(--surface2); }
.pv-item > summary {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px; cursor: pointer; list-style: none;
    border-radius: 9px;
}
.pv-item > summary::-webkit-details-marker { display: none; }
.pv-item > summary::before {
    content: '▸'; color: var(--text3); font-size: 10px;
    flex-shrink: 0; transition: transform .12s;
}
.pv-item[open] > summary::before { transform: rotate(90deg); }
.pv-item > summary:hover { background: var(--surface2); }
.pv-ver {
    font-family: var(--mono); font-size: 12px; font-weight: 800;
    color: var(--accent); flex-shrink: 0;
}
/* 접힌 상태에서 첫 줄만 미리 보여준다. 길어도 한 줄을 넘기지 않는다. */
.pv-peek {
    min-width: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--mono); font-size: 11px; color: var(--text3);
}
.pv-item[open] .pv-peek { visibility: hidden; }
.pv-item > pre.prompt-body { margin: 0 11px; }
.pv-item > form { padding: 8px 11px 10px; }

@media (max-width: 768px) {
    .pv-peek { display: none; }
}

/* ───────── 순위표 업데이트 버튼 (dtw 복제) ───────── */

.lb-refresh {
    display: flex; align-items: center; gap: 9px;
    margin-left: auto; flex-shrink: 0;
}
.lb-updated { font-family: var(--mono); font-size: 10px; color: var(--text3); }
.btn-refresh {
    border: none; background: var(--accent); color: #fff;
    font-family: var(--sans); font-size: 11px; font-weight: 800;
    padding: 6px 14px; border-radius: 6px; cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.btn-refresh:hover  { opacity: 0.85; }
.btn-refresh:active { transform: scale(0.97); }
.btn-refresh:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

@media (max-width: 768px) {
    /* 제목·상태·버튼을 한 줄에 욱여넣지 않는다. 버튼은 아래 줄 전체 폭으로. */
    .lb-refresh { flex: 1 1 100%; margin-left: 0; }
    .btn-refresh { flex: 1; padding: 10px 12px; font-size: 12px; }
}

/* 회원 관리 — 상태를 행 색으로 구분 */
.lb-table tr.row-pending > td { background: rgba(200, 150, 20, 0.13); }
.lb-table tr.row-none    > td { background: var(--flag-bg); }
.badge-pending { background: rgba(200, 150, 20, 0.18); color: #8a6000; }

/* 매매 일정 — 지금 주차로 돌아오기 */
.btn-now {
    flex-shrink: 0;
    padding: 4px 10px; border-radius: 7px;
    border: 1px solid var(--border2); background: var(--surface);
    color: var(--text2); font-family: var(--sans);
    font-size: 11px; font-weight: 800; line-height: 1.3;
    cursor: pointer; transition: background .12s, border-color .12s, opacity .12s;
}
.btn-now:hover { background: var(--surface2); border-color: var(--accent); color: var(--accent); }
.btn-now.is-off { opacity: 0.35; cursor: default; }
.btn-now.is-off:hover { background: var(--surface); border-color: var(--border2); color: var(--text2); }

/* 등록 현황 표 — 열 너비를 사람마다 흔들리지 않게 고정.
   colgroup 의 width 는 table-layout:fixed 여야 그대로 적용된다. */
.picks-table { table-layout: fixed; width: 100%; min-width: 520px; }
.picks-table td, .picks-table th { overflow: hidden; }
.picks-table td .lb-name-pick,
.picks-table td .lb-cell-sub {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════ 모바일 최적화 (dtw 방식) ═══════════
   두 가지를 지킨다.
   1) 폼 요소는 예외 없이 16px 이상 — iOS 는 그보다 작은 입력을 탭하면 화면을
      확대하고 스스로 되돌리지 않는다. select 도 마찬가지다.
   2) 손가락으로 누르는 것은 44px 이상 — 마우스 기준 크기로 두면 오탭이 난다. */

@media (max-width: 768px) {
    /* 1) 폼 요소 확대 방지 */
    select.form-input,
    input.form-input,
    .wk-select,
    input[type="date"],
    input[type="file"] { font-size: 16px !important; }
    .wk-select { padding: 8px 30px 8px 12px; }

    /* 2) 터치 타깃 */
    .btn-now { min-height: 44px; padding: 0 14px; font-size: 12.5px; }
    .btn-refresh { min-height: 44px; }
    .btn-all { min-height: 48px; }
    .btn-sm, .btn-ghost { min-height: 40px; padding: 0 14px; font-size: 12px; }
    .btn-login { min-height: 48px; font-size: 15px; }
    /* 로그인/가입 전환 링크도 손가락으로 누른다 */
    .login-switch, .login-foot a, .login-card a { padding: 6px 2px; display: inline-block; }
    /* 표 안의 작은 버튼은 셀이 커지지 않게 조금만 키운다 */
    .lb-table .btn-sm { min-height: 38px; }

    /* 주차 선택 줄 — 선택자는 내용 폭, '이번 주' 는 오른쪽 끝으로 */
    .head-main .wk-step { gap: 8px; width: 100%; }
    .wk-select { flex: 0 1 auto; min-width: 0; max-width: 58%; }
    .head-main .btn-now { margin-left: auto; }

    /* 회원 관리 표 — 폰에서는 학번·가입일 열을 접는다. 가장 중요한 '상태' 가
       가로 스크롤 밖으로 밀려나 안 보이는 것을 막는다.
       학번은 이름 아래에 작게 남긴다. */
    .users-table .col-sid, .users-table .col-join { display: none; }
    .lb-name-cell { white-space: nowrap; }

    /* 폰에서는 고정폭을 풀어 내용에 맞춘다 */
    .picks-table { table-layout: auto; min-width: 0; }

    /* 표 안에서 버튼 여러 개가 줄바꿈될 때 서로 붙지 않게 */
    .lb-table td form { display: inline-block; margin: 2px 0; }

    /* ★ 모달 스크롤 — dtw 방식.
       카드를 시트처럼 아래에 붙이고 max-height 를 주면, 내용이 긴 팝업에서
       '카드 안쪽'만 스크롤된다. 그러면 상단의 ✕ 가 같이 밀려 올라가 손댈 수 없고,
       닫기 버튼이 카드 아래에 있는 규칙 팝업은 아예 화면 밖에 놓인다
       (플립7 커버 373x402 에서 닫기 버튼이 y 506~552 — 뷰포트가 402px 이다).
       iOS 의 vh 가 주소창을 뺀 실제 표시 영역보다 큰 것도 같은 증상을 만든다.
       → 카드 높이 제한을 풀고 오버레이 자체를 위에서부터 스크롤시킨다.
       그러면 닫기 버튼이 문서 흐름 안에 있어 스크롤로 반드시 닿는다. */
    .modal-overlay {
        align-items: flex-start; justify-content: center;
        padding: 12px 0 calc(28px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;   /* 모달 끝에서 배경이 따라 스크롤되지 않게 */
    }
    .modal-card, .sched-modal-card {
        width: 94vw !important; max-width: 94vw !important;
        max-height: none !important; overflow-y: visible !important;
        border-radius: 14px;
        padding: 16px 14px !important;
    }
    /* 94vw 라 좌우에 배경이 남는다 — 그 띠를 눌러도 닫힌다 */
    .modal-footer .btn-all { min-height: 46px; }
    /* ✕ 가 19x18 이라 손가락으로 겨냥이 안 됐다. 배경이 투명한 버튼이라
       탭 영역만 키워도 겉보기는 그대로다. */
    .btn-sched-close {
        font-size: 20px; padding: 4px 10px;
        min-width: 40px; min-height: 40px;
    }

    /* 계정·비밀번호 시트만은 아래에서 올라온다.
       하단 탭의 '계정' 을 눌러 여는 것이라 손가락이 이미 화면 아래에 있다.
       내용도 짧아 스크롤이 필요 없으므로, 위 .modal-overlay 의 '위에서부터
       스크롤' 규칙을 여기서만 되돌린다. */
    #modal-account, #modal-pw {
        align-items: flex-end; justify-content: center; padding: 0;
    }
    #modal-account .modal-card, #modal-pw .modal-card {
        width: 100% !important; max-width: 100% !important;
        border-radius: 16px 16px 0 0;
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 일정표는 카드가 3,300px 을 넘는다. 오버레이를 스크롤하면 상단의 X 가 위로
       사라지고, 남는 배경은 좌우 12px 띠뿐이라 손가락으로는 닫을 수가 없다.
       헤더를 붙여 둬서 어디까지 내려가도 X 가 손에 닿게 한다.
       (스크롤 컨테이너는 카드가 아니라 오버레이라, sticky 기준도 오버레이다.) */
    .sched-modal-card .sched-modal-header {
        position: sticky; top: 0; z-index: 2;
        background: var(--surface);
        margin: -16px -14px 12px; padding: 14px 14px 10px;
        box-shadow: 0 1px 0 var(--border);
    }

    /* 규칙·일정표 — 폰에서는 두 개가 폭을 반씩 나눠 갖는다 (위치는 base 와 동일). */
    .fab-wrap { gap: 7px; }
    .fab {
        flex: 1; min-height: 40px; padding: 9px 12px; font-size: 12px;
        text-align: center; box-shadow: none;
    }

    /* 업데이트 버튼은 폭을 다 쓰고 두께만 줄인다 */
    .lb-refresh { flex: 1 1 100%; margin-left: 0; }
    .btn-refresh { flex: 1; min-height: 36px; padding: 0 12px; font-size: 12px; }

    /* 매매 일정 블록 — 가운데로 모은다 */
    .sched-row { justify-content: center; text-align: center; }
    .sched-row .sched-why { margin-left: 0; width: 100%; text-align: center; }

    /* 프롬프트 카드 그리드 — 폰에서는 두 줄까지만 */
    .pv-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 7px; }
}

@media (max-width: 430px) {
    /* 순위표 업데이트 버튼 문구가 두 줄로 접히지 않게 줄인다 */
    .btn-refresh { font-size: 11.5px; padding: 0 10px; }
    .pv-grid { grid-template-columns: 1fr 1fr; }
}

/* 좁은 화면 주차 카드 — 휴장 사유를 카드 안에 직접 적는다 (폰에는 호버가 없다) */
.schcard-why {
    margin-top: 5px; padding-top: 5px;
    border-top: 0.5px solid var(--info-bd);
    font-size: 10.5px; font-weight: 700; color: var(--info);
}

/* 좁은 화면에서만 보이는 보조 정보 */
.only-narrow { display: none; }
@media (max-width: 768px) { .only-narrow { display: block; } }

/* 아주 좁은 화면 — dtw 처럼 여백을 조여 표에 폭을 내준다 */
@media (max-width: 480px) {
    body { font-size: 11.5px; }
    .content { padding: 12px 8px calc(88px + env(safe-area-inset-bottom, 0px)); }
    .card { padding: 10px 10px; border-radius: 11px; }
    .top-header { padding: 9px 11px; }
    .header-title { font-size: 14px; }
    .card-head h2 { font-size: 13px; }
    .lb-scroll { margin: 0 -4px; }
}

/* ═══ 좁은 화면 순위표 — Tabulator 대신 세로 목록 (dtw .lbm 방식) ═══
   주차마다 4열이라 13주차면 55열. 폰에서는 가로 스크롤로도 읽을 수 없다. */

.lbm { display: flex; flex-direction: column; }
.lbm-cap { font-size: 10.5px; color: var(--text3); padding: 8px 2px 7px; font-weight: 700; }
.lbm-row { border-top: 0.5px solid var(--border); }
.lbm-row.bm { background: #eef4fa; }   /* PC 순위표의 시장 지수 행과 같은 색 */
.lbm-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 48px; padding: 9px 4px;        /* iOS 44pt · Android 48dp 이상 */
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--sans); color: var(--text);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lbm-head:active { background: rgba(128,128,128,0.10); }
.lbm-head .rk {
    width: 24px; flex-shrink: 0; text-align: center;
    font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--text3);
}
.lbm-head .nm {
    font-weight: 800; font-size: 13.5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
    /* 이탤릭(벤치마크)은 마지막 글자가 박스를 넘어가 잘린다. 여유를 둔다. */
    padding-right: 3px;
}
.lbm-row.bm .lbm-head .nm { font-style: italic; color: #2d5c86; }
/* 메달 색은 .rk 의 기본 색보다 뒤에 와야 이긴다 */
.lbm-head .rk.lb-r1 { color: #b8860b; }
.lbm-head .rk.lb-r2 { color: #7d8b99; }
.lbm-head .rk.lb-r3 { color: #a2673f; }
.lbm-head .vl {
    margin-left: auto; font-family: var(--mono); font-weight: 800; font-size: 13.5px;
    white-space: nowrap;
}
.lbm-head .ar { flex-shrink: 0; font-size: 11px; color: var(--text3); transition: transform .15s ease; }
.lbm-row.open .lbm-head .ar { transform: rotate(180deg); }

.lbm-detail { display: none; padding: 0 4px 10px 32px; }
.lbm-row.open .lbm-detail { display: block; }
.lbm-leg {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 6px 0; border-top: 0.5px solid var(--border);
    font-size: 11.5px;
}
.lbm-leg .ss { font-family: var(--mono); font-size: 10.5px; color: var(--text3); flex-shrink: 0; width: 46px; }
.lbm-leg .cd {
    font-weight: 700; color: var(--text); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lbm-leg .rt { margin-left: auto; font-family: var(--mono); font-weight: 700; flex-shrink: 0; }
.lbm-leg .px {
    flex-basis: 100%; margin-left: 54px; margin-top: 1px;
    font-family: var(--mono); font-size: 10px; color: var(--text3);
}
.lbm-leg .px em { font-style: normal; color: var(--text3); }
.lbm-na { color: var(--text3); }
.lb-empty { padding: 16px 4px; color: var(--text3); font-size: 12px; }

/* 종목 등록 표 — 열린 주차 행에 입력칸을 그대로 둔다.
   PC 는 상태줄과 입력줄을 한 줄에 이어 붙여 세로를 아낀다. */
.pick-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pick-line .pick-cancel { margin-left: auto; }
.pick-form { display: flex; gap: 6px; align-items: center; }
.cell-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cell-form .pick-form { flex: 1 1 320px; min-width: 240px; }
.cell-form .pick-line { flex: 0 1 auto; }
.pick-form .form-input { flex: 1; min-width: 0; padding: 6px 9px; font-size: 12px; }
.btn-go {
    flex-shrink: 0; background: var(--accent); color: #fff;
    border-color: var(--accent); font-weight: 800;
}
.btn-go:hover { opacity: 0.88; }
/* 지금 등록할 수 있는 주차는 눈에 띄게 */
/* 열린 주차 — 지금 입력할 수 있는 행.
   강조색(로즈)으로 두면 바로 위의 미등록(빨강) 행과 색이 겹쳐 구분이 안 된다.
   '열림' 은 청록, '빠짐' 은 빨강으로 갈라 놓는다. */
.lb-table tr.row-open > td { background: var(--info-bg); }
.lb-table tr.row-open .lb-name-cell { color: var(--info); }

@media (max-width: 768px) {
    /* 폰에서는 표를 주차 카드로 바꾼다. 4열을 그대로 두면 입력칸이 50px 로
       찌그러지고 등록 창 문구가 잘린다.
         줄1  주차 ......... 수익률 상태
         줄2  종목 / 입력칸 */
    .picks-table, .picks-table tbody, .picks-table tr, .picks-table td { display: block; }
    .picks-table thead, .picks-table colgroup { display: none; }
    .picks-table { border-collapse: separate; border-spacing: 0; }
    .picks-table tr {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
        padding: 10px 11px; margin-bottom: 8px;
        border: 0.5px solid var(--border2); border-radius: 11px;
        background: var(--surface);
    }
    .picks-table td { border: none !important; padding: 0; background: none !important; }
    /* 주차 · 종목·상태 · 수익률을 한 줄에 눌러 담는다. 폭이 모자라면 알아서 접힌다.
       입력칸이 있는 행만 아래 줄을 통째로 쓴다. */
    .picks-table td:nth-child(1) { order: 1; flex: 0 0 auto; }   /* 주차 */
    .picks-table td:nth-child(2) { order: 2; flex: 1 1 auto; min-width: 0; }  /* 종목·상태 */
    .picks-table td:nth-child(3) { order: 3; margin-left: auto; }             /* 수익률 */
    .picks-table td.cell-form { flex: 1 1 100%; order: 4; }
    .picks-table tr { padding: 9px 11px; margin-bottom: 7px; }
    /* 행 색은 카드 배경으로 */
    .picks-table tr.row-open { background: var(--info-bg); border-color: var(--info-bd); }
    .picks-table tr.row-none { background: var(--flag-bg); border-color: var(--flag-bd); }

    /* .lb-table td form { display:inline-block } 이 특이도로 이겨 flex 를 덮는다.
       같은 깊이로 명시해 되돌린다. */
    .cell-form { display: block; }
    .lb-table td form.pick-form { display: flex; flex-wrap: nowrap; margin: 4px 0 0; }
    .pick-form .form-input { flex: 1 1 auto; min-width: 0; }
    .pick-form .btn-go { flex: 0 0 auto; min-height: 44px; padding: 0 16px; }
    /* 등록도 결과도 없는 주차는 빈 줄을 만들지 않는다 */
    .picks-table td.cell-empty { display: none; }
}

/* 등록 표 — 행을 한 줄로 눌러 세로 길이를 줄인다 */
.picks-table td { padding-top: 7px; padding-bottom: 7px; }
.wk-date { font-family: var(--mono); font-size: 10.5px; color: var(--text3); margin-left: 6px; font-weight: 400; }
.picks-table .pick-line { gap: 6px; }
/* 주차명과 매수일이 갈라지지 않게 */
.picks-table .lb-name-cell { white-space: nowrap; }
.wk-date { white-space: nowrap; }

/* ═══════════ 알림 토스트 ═══════════
   본문 위에 쌓아 두면 레이아웃이 밀리고, 스크롤을 내린 뒤에는 보이지도 않는다.
   화면 위에 띄우고 스스로 사라지게 한다. */
.toast-stack {
    position: fixed; z-index: 500;
    top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px;
    display: flex; flex-direction: column; gap: 8px;
    max-width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 13px; border-radius: 11px;
    background: var(--surface); border: 0.5px solid var(--border2);
    box-shadow: 0 6px 22px rgba(60,38,46,0.16);
    font-size: 12.5px; line-height: 1.5; color: var(--text);
    cursor: pointer; pointer-events: auto;
    opacity: 0; transform: translateY(-8px) scale(0.98);
    transition: opacity .22s ease, transform .22s cubic-bezier(0.32,0.72,0,1);
}
.toast.is-in  { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(-6px) scale(0.98); }
.toast-ico {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px;
}
.toast-msg { min-width: 0; word-break: break-word; }
.toast-x {
    flex-shrink: 0; margin-left: auto; padding: 0 2px;
    background: none; border: none; cursor: pointer;
    color: var(--text3); font-size: 11px; font-family: var(--sans);
}
.toast-success { border-color: rgba(46,125,86,0.32); }
.toast-success .toast-ico { background: var(--ok); }
.toast-error   { border-color: rgba(185,64,64,0.34); }
.toast-error   .toast-ico { background: var(--danger); }

@media (max-width: 768px) {
    /* 폰에서는 위쪽 전체 폭으로. 손가락으로 닫기 쉽게 조금 키운다. */
    .toast-stack { left: 10px; right: 10px; max-width: none; }
    .toast { padding: 13px 14px; font-size: 13px; }
}

/* ═══════════ 사이드바 여닫기 (dtw 방식) ═══════════ */

.sidebar-toggle {
    position: fixed; top: 14px; left: 14px; z-index: 101;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 0.5px solid var(--border2);
    border-radius: 7px; cursor: pointer;
    font-size: 14px; color: var(--text2); font-family: var(--sans);
    transition: left .2s ease, background .12s;
}
.sidebar-toggle:hover { background: var(--surface2); color: var(--text); }
.sidebar-toggle.with-sidebar { left: 180px; }

/* 접히면 사이드바는 왼쪽으로 빠지고 본문이 그 폭을 가져간다.
   토글 버튼이 앉을 자리(56px)만 남긴다. */
.sidebar { transition: transform .2s ease; }
.sidebar.collapsed { transform: translateX(-100%); }
.content { transition: margin-left .2s ease; }
.content.sidebar-collapsed { margin-left: 56px; padding-top: 56px; }

@media (max-width: 768px) {
    /* 폰은 하단 탭바를 쓴다 — 사이드바도 토글도 없다 */
    .sidebar, .sidebar-toggle { display: none !important; }
    .content.sidebar-collapsed { margin-left: 0; padding-top: 16px; }
}

/* ═══════════ 내 행 표시 ═══════════
   이름 옆 동그라미 '나' + 행 배경. 43명 중 자기 자리를 스크롤로 찾지 않아도 된다. */
.me-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; margin-left: 5px; flex-shrink: 0;
    border-radius: 50%; background: var(--me); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 1;
    vertical-align: middle;
}
/* 데스크톱 순위표 — 고정열까지 같은 색이어야 줄이 끊겨 보이지 않는다.
   ★ 반투명(rgba)으로 두면 고정열 아래로 지나가는 셀이 비쳐 글자가 겹쳐 보인다.
     surface 위에 accent 14% 를 얹은 것과 같은 값을 불투명으로 박는다. */
.lb-tabulator .tabulator-row.me .tabulator-cell,
.lb-tabulator .tabulator-row.me .tabulator-frozen,
.lb-tabulator .tabulator-row.me:hover .tabulator-cell,
.lb-tabulator .tabulator-row.me:hover .tabulator-frozen {
    background-color: var(--me-solid) !important;
}
.lb-tabulator .tabulator-row.me .lb-name-cell { color: var(--me); font-weight: 800; }
/* 모바일 목록 */
.lbm-row.me { background: var(--me-bg); }
.lbm-row.me .lbm-head .nm { color: var(--me); }

/* 고정열과 스크롤 영역의 경계 — 잘린 숫자가 고정열에 붙어 보이지 않게
   마지막 고정 셀 오른쪽에 옅은 그림자를 둔다. */
.lb-tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left:last-of-type,
.lb-tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left:last-of-type {
    box-shadow: 5px 0 7px -3px rgba(60,38,46,0.26);
    clip-path: inset(0 -8px 0 0);
}

/* ═══════════ 모바일 밀도 조정 ═══════════
   박스·여백은 한 단계 줄이고, 글자 크기는 그대로 둔다.
   다만 9.5~10px 처럼 혼자 튀게 작은 것만 보조 텍스트 크기(10.5px)로 모아
   계단이 지나치게 잘게 나뉘지 않게 한다. 터치 타깃(44px)은 건드리지 않는다. */

@media (max-width: 768px) {
    /* ── 여백·박스: 한 단계 축소 ── */
    .content { padding: 10px 7px calc(84px + env(safe-area-inset-bottom, 0px)); }
    .page { gap: 11px; }
    .card { padding: 9px 10px; border-radius: 10px; }
    .top-header { padding: 8px 10px; border-radius: 10px; gap: 7px; }
    .card-head { margin-bottom: 0; padding-bottom: 0; }
    .modal-card { padding: 15px 14px; }
    .lb-table th, .lb-table td { padding: 5px 6px; }
    .picks-table tr { padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; }
    .picks-table td { padding: 0; }
    .schcard { padding: 7px 9px; border-radius: 8px; }
    .schcards { gap: 5px; }
    .sched-row { padding: 5px 9px; }
    .pv-grid { gap: 6px; }
    .pv-cardbtn { padding: 8px 10px; border-radius: 9px; }
    .toast { padding: 11px 12px; }
    .toast-stack { gap: 7px; }

    /* 하단 탭 — 손가락 크기는 지키되 군더더기만 덜어낸다 */
    .mtabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .mtab { min-height: 50px; padding: 5px 3px; gap: 2px; }
    .mtab .mtab-ico .ic { width: 19px; height: 19px; }

    /* 순위표 세로 목록 */
    .lbm-head { min-height: 46px; padding: 7px 3px; gap: 7px; }
    .lbm-detail { padding: 0 3px 8px 28px; }
    .lbm-leg { padding: 5px 0; }
    .lbm-cap { padding: 6px 2px 6px; }

    /* ── 글자: 혼자 튀게 작은 것만 보조 크기로 모은다 ── */
    .lb-cell-sub { font-size: 10.5px; }     /* 9.5 → 10.5 */
    .type-badge  { font-size: 10.5px; }     /* 10 → 10.5 */
    .lb-updated  { font-size: 10.5px; }     /* 10 → 10.5 */
    .sched-mkt   { font-size: 10.5px; }     /* 10 → 10.5 */
    .lbm-leg .px { font-size: 10.5px; }     /* 10 → 10.5 */
    .lb-table th { font-size: 10.5px; }     /* 10 → 10.5 */
    .schcard-leg .k { font-size: 10.5px; }
    .wk-date { font-size: 11px; }           /* 10.5 → 11, 주차명 옆이라 조금 키운다 */
}

/* 하단 탭·사이드바 SVG 아이콘 (dtw 방식 — 이모지는 기기마다 굵기·크기가 달라 줄이 안 맞는다) */
.nav-icon .ic { width: 16px; height: 16px; display: block; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; }
.mtab-ico .ic { width: 20px; height: 20px; display: block; }
.mtab-ico { display: flex; align-items: center; justify-content: center; }

/* 인라인용 좁은 화면 전용/제외 (블록인 .only-narrow 와 구분) */
.only-narrow-i { display: none; }
@media (max-width: 768px) {
    .only-narrow-i { display: inline; }
    .hide-narrow { display: none !important; }

    /* 등록 표 — 줄1은 주차·날짜·등록상태, 줄2는 종목·티커·보유상태·수익률로 고정 */
    .picks-table td:nth-child(1) { order: 1; flex: 1 1 100%; }
    .picks-table td:nth-child(2) { order: 2; flex: 1 1 auto; min-width: 0; }
    .picks-table td:nth-child(3) { order: 3; margin-left: auto; flex: 0 0 auto; }
}

@media (max-width: 768px) {
    /* 프롬프트 입력칸 — 폰에서는 화면을 다 먹지 않게 2/3 높이로 */
    textarea.form-input { min-height: 0; height: 190px; }
}

/* ─────────────── 폴더블 펼침 · 터치 태블릿 (769px 이상 + 터치) ───────────────
   갤럭시 폴드 펼침(884~930px), 아이폰 듀오 펼침(820px) 은 폭이 769px 을 넘어
   PC 레이아웃으로 그려진다. 순위표가 13주차 × 4열이라 세로 목록으로 바꾸면
   768px 에서 이미 좌우가 텅 비므로, 표를 그대로 두는 편이 낫다.
   다만 입력 수단이 손가락이라 PC 크기(28~35px) 컨트롤은 누르기 어렵다.
   실측: 폴드8 펼침에서 '이번 주' 61x28, 업데이트 153x29, 사이드바 토글 35x35.
   폭은 건드리지 않고 높이만 40px 로 올린다 (안드로이드 권장 48dp 의 손이 닿는 하한). */
@media (pointer: coarse) and (min-width: 769px) {
    .btn-now, .wk-select, .btn-refresh, .fab,
    .btn-sm, .btn-quiet, .sidebar-toggle {
        min-height: 40px;
    }
    .sidebar-toggle { min-width: 40px; }
    /* 사이드바 링크도 손가락 기준으로 넓힌다 */
    .sidebar-nav a, .sidebar-foot button, .sidebar-foot a { min-height: 40px; }
}

/* 시세 출처 경고 (관리자 전용, 문제가 있을 때만 나온다) */
.src-diag { line-height: 1.7; margin-top: 6px; }
.src-warn {
    display: block; color: var(--danger); font-weight: 700;
}

/* 규칙·일정표가 순위표 헤더 줄에 들어갔을 때 (PC).
   auto 마진만으로는 줄 한가운데가 되지 않는다 — 왼쪽 묶음(제목·갱신시각)과
   오른쪽 업데이트 버튼의 폭이 달라서, 남는 공간을 반씩 나누면 그만큼 치우친다
   (실측 좌 440 / 우 501).
   그래서 넉넉한 폭에서는 헤더를 기준으로 절대 중앙에 놓는다. */
.card-head > .fab-wrap { margin: 0 auto; align-self: center; }
.card-head > .fab-wrap .fab { padding: 6px 14px; font-size: 11.5px; }

@media (min-width: 1024px) {
    .card-head { position: relative; }
    .card-head > .fab-wrap {
        position: absolute; left: 50%; transform: translate(-50%, -50%);
        top: 50%; margin: 0;
    }
    /* 절대 배치라 흐름에서 빠진다 — 헤더가 버튼 높이만큼은 확보하게 해 둔다 */
    .card-head:has(> .fab-wrap) { min-height: 32px; align-items: center; }
}

/* 프롬프트 선행 조건 — 종목 등록의 전제다.
   창이 열려 있는데 입력칸만 있고 누르면 거절당하면, 마감 직전에야 알게 된다.
   그래서 입력칸 자리에 바로 안내와 이동 버튼을 놓는다. */
.pick-locked {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px;
    background: var(--surface2); border: 0.5px solid var(--border2);
    font-size: 11.5px; color: var(--text2);
}
.pick-locked b { color: var(--text); }
.pick-need-prompt { color: var(--danger); }

/* 매수 예정일 — 아직 매수 전인 칸 (dtw 방식).
   시가·종가·수익률 세 칸에 한 문장을 나눠 담기 때문에, 세 칸이 같은 색·같은
   크기여야 한 줄로 읽힌다. 값이 아니라 안내이므로 눈에 덜 띄게 둔다. */
.lb-due {
    font-family: var(--sans); font-size: 10.5px; font-weight: 700;
    color: var(--text3); white-space: nowrap;
}
/* 개장 후 30분이 지나도 시가가 안 들어온 상태 — 이건 확인이 필요하다 */
.lb-due.lb-overdue { color: var(--danger); }