/* ================================================================ 색 묶음(10/5 사용자 요청)
   앱 컬러차트를 정하면 이 블록만 고친다. 중요도 순 — 위쪽 묶음일수록 화면 전체에 넓게 쓰인다.
   ① 브랜드 ② 바탕·글자 ③ 버튼(긍정·부정·위험·보통) ④ 선택 표시 ⑤ 상태 알림 ⑥ 매매 의미 ⑦ 데이터 그래프 ⑧ 그림자·가림막
   종목별 색(분야 색 계열)은 catalog.js 의 SECTORS hue, 휴대폰 상단 막대 색은 index.html 의 theme-color(= ① 브랜드)에 있다. */
:root {
  --fs: 1;   /* 글자 크기 배율(보통 1 · 크게 1.15 · 아주 크게 1.3) — 10/3 큰 글씨 */

  /* ① 브랜드 — 앱의 대표 색. 긍정 버튼·선택 표시·링크·진행 막대가 모두 이 색을 따른다 */
  --brand: #155e75;          /* 대표 색 */
  --brand-ink: #ffffff;      /* 대표 색 위 글자 */

  /* ② 바탕·글자 */
  --bg: #f6f7f9;             /* 화면 바탕 */
  --surface: #ffffff;        /* 카드·창 바탕 */
  --text: #1f2933;           /* 본문 글자 */
  --text-sub: #616e7c;       /* 보조 글자 */
  --line: #e4e7eb;           /* 테두리·구분선·빈 막대 */

  /* ③ 버튼 — 긍정(저장·추가·확인)·부정(취소·닫기·아니오)·위험(되돌릴 수 없는 지우기)·보통(그 밖) */
  --btn-pos-bg: var(--brand);   --btn-pos-text: var(--brand-ink); --btn-pos-border: var(--brand);
  --btn-neg-bg: transparent;    --btn-neg-text: var(--text-sub);  --btn-neg-border: var(--line);
  --btn-danger-bg: #c62828;     --btn-danger-text: #ffffff;       --btn-danger-border: #c62828;
  --btn-bg: var(--surface);     --btn-text: var(--text);          --btn-border: var(--line);
  --btn-close-bg: color-mix(in srgb, var(--text) 9%, var(--surface)); --btn-close-text: var(--text); --btn-close-border: transparent;   /* 창 닫기(부정 중 가장 자주 누름) */
  --btn-sub-bg: color-mix(in srgb, var(--brand) 7%, var(--surface)); --btn-sub-text: var(--brand); --btn-sub-border: color-mix(in srgb, var(--brand) 40%, var(--line));   /* 보조 버튼(링크·펼치기·용어·▾ — 누를 수 있음을 보이게, 10/6) */

  /* ④ 선택 표시 — 고른 탭·칩·사진·현금 창 모드 */
  --sel: var(--brand);
  --sel-ink: var(--brand-ink);
  --sel-soft: color-mix(in srgb, var(--brand) 12%, var(--surface));   /* 고른 줄 바탕 */
  --edit-bg: var(--bg); --edit-border: var(--line); --edit-pen: var(--brand); --edit-focus: var(--brand);   /* 누르면 고쳐지는 칸(이름·명의 상자) */
  --tab-cur-bg: var(--sel);   --tab-cur-text: var(--sel-ink);           /* 계좌 탭: 확인 중 */
  --tab-done-bg: color-mix(in srgb, var(--ok) 14%, var(--surface)); --tab-done-text: var(--ok); --tab-done-border: var(--ok);   /* 저장함 */
  --tab-todo-bg: var(--surface); --tab-todo-text: var(--text-sub); --tab-todo-border: var(--line);                       /* 아직 */

  /* ⑤ 상태 알림 */
  --ok: #2e7d32;             /* 완료·연결됨 */
  --warn: #9a6700;           /* 주의·확인 필요 */

  /* ⑥ 매매 의미 */
  --sell: #c62828;           /* 팔 것 */
  --buy: #1565c0;            /* 살 것 */

  /* ⑦ 데이터 그래프 */
  --cash: #c7cbd1;           /* 현금 조각 */
  --other: #9aa3ad;          /* 기타 조각 */
  --on-data: #ffffff;        /* 색 조각 위 글자 */
  --on-cash: #1f2933;        /* 현금 조각 위 글자 */
  --lev2: #f57c00;           /* 2배 레버리지 테두리 */
  --lev3: #d32f2f;           /* 3배 레버리지 테두리 */
  --muted-fill: #64748b;     /* 이미 쓴 몫(세금 막대)·빠진 사진 번호 */

  /* ⑧ 그림자·가림막 */
  --scrim: rgba(0, 0, 0, .4);         /* 창 뒤 가림막 */
  --scrim-strong: rgba(0, 0, 0, .7);  /* 전체 화면 확인 뒤 */
  --shadow: rgba(0, 0, 0, .2);
  --veil: color-mix(in srgb, var(--surface) 72%, transparent);          /* 완료한 탭을 덮는 반투명 막 */

  /* ⑨ 계좌 구분 색 — 계좌마다 하나(위쪽 계좌 단추·계좌 카드·가져오기 탭·계좌 확인 창). 브랜드·매매 색과 겹치지 않게 */
  --acct-1: #2563eb; --acct-2: #d97706; --acct-3: #7c3aed; --acct-4: #0d9488;
  --acct-5: #db2777; --acct-6: #65a30d; --acct-7: #0891b2; --acct-8: #9333ea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #67c3dc; --brand-ink: #0b1a20;
    --bg: #111418; --surface: #1b2026; --text: #e6e9ec; --text-sub: #9aa5b1; --line: #2c333b;
    --btn-danger-bg: #e57373; --btn-danger-text: #1b0b0b; --btn-danger-border: #e57373;
    --ok: #81c784; --warn: #e3b341;
    --sell: #ef9a9a; --buy: #90caf9;
    --cash: #4b5563; --other: #6b7280; --on-cash: #e6e9ec; --lev2: #ffa726; --lev3: #ef5350; --muted-fill: #64748b;
    --scrim: rgba(0, 0, 0, .55); --scrim-strong: rgba(0, 0, 0, .8); --shadow: rgba(0, 0, 0, .5);
    --acct-1: #60a5fa; --acct-2: #fbbf24; --acct-3: #a78bfa; --acct-4: #2dd4bf; --acct-5: #f472b6; --acct-6: #a3e635; --acct-7: #22d3ee; --acct-8: #c084fc;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text);
       font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
       padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.top { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
       padding: 14px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
h1 { font-size: calc(22px * var(--fs)); margin: 0; }
h2 { font-size: calc(17px * var(--fs)); margin: 22px 0 8px; }
.who { font-size: calc(13px * var(--fs)); color: var(--text-sub); text-align: right; }
main { padding: 12px 16px; max-width: 640px; margin: 0 auto; }
.sub { color: var(--text-sub); font-size: calc(14px * var(--fs)); margin: 6px 0; font-weight: 400; }
.note { font-size: calc(14px * var(--fs)); background: var(--surface); border-left: 3px solid var(--warn); padding: 8px 10px; border-radius: 6px; }
.msg { color: var(--warn); font-size: calc(16px * var(--fs)); min-height: 1em; white-space: pre-line; margin: 6px 16px; }
main .msg { margin: 6px 0; }
.msg.ok { color: var(--brand); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.label { font-size: calc(13px * var(--fs)); color: var(--text-sub); }
.big { font-size: calc(22px * var(--fs)); font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.barbox { margin: 10px 0; }
.barhead { font-size: calc(14px * var(--fs)); font-weight: 600; margin-bottom: 4px; }
.bar { display: flex; width: 100%; height: 34px; border-radius: 8px; overflow: hidden; background: var(--line); }
.bar > div { display: flex; align-items: center; justify-content: center; color: var(--on-data); font-size: calc(13px * var(--fs)); font-weight: 600;
             white-space: nowrap; overflow: hidden; }
.bar .empty { flex: 1; color: var(--text-sub); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line);
        background: var(--surface); color: var(--text); font: inherit; font-size: calc(14px * var(--fs)); max-width: 100%; }
.chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row2 { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.row2 > input { flex: 1 1 160px; min-width: 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: calc(16px * var(--fs)); }
.rows .head { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.rows .head span:last-child { white-space: nowrap; flex: none; }
.rows .why { color: var(--text-sub); font-size: calc(13px * var(--fs)); margin-top: 4px; }
.rows .act { display: flex; gap: 6px; margin-top: 8px; }
.sell .head span:last-child { color: var(--sell); }
.buy .head span:last-child { color: var(--buy); }
table.grid { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(14px * var(--fs)); table-layout: fixed; }
.grid th, .grid td { border-bottom: 1px solid var(--line); padding: 5px 3px; text-align: left; }
.grid th:nth-child(1) { width: 40%; }
.grid th:last-child { width: 36px; }
.grid td input { width: 100%; font: inherit; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.grid td.num, .grid td.num input { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr.bad td input { border-color: var(--warn); }
label { display: grid; gap: 6px; font-size: calc(16px * var(--fs)); margin: 10px 0; }
input, select { font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
button { font: inherit; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-text); }
button.primary { background: var(--btn-pos-bg); color: var(--btn-pos-text); border-color: var(--btn-pos-border); }
button.neg { background: var(--btn-neg-bg); color: var(--btn-neg-text); border-color: var(--btn-neg-border); }
button.small { padding: 6px 10px; font-size: calc(14px * var(--fs)); }
button:disabled { opacity: .5; }
.upload { display: block; text-align: center; padding: 18px; border: 2px dashed var(--line); border-radius: 12px; background: var(--surface); margin: 10px 0; }
.upload.small { padding: 10px; margin: 0; flex: 1 1 160px; font-size: calc(16px * var(--fs)); }
.upload input { display: block; margin: 10px auto 0; max-width: 100%; }
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); width: min(92vw, 420px); }
dialog::backdrop { background: var(--scrim); }
.card.section { margin: 10px 0 14px; }
.legend { list-style: none; margin: 8px 0 0; padding: 0; font-size: calc(14px * var(--fs)); }
.legend li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.legend li span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend li span:last-child { font-variant-numeric: tabular-nums; color: var(--text-sub); }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
button.wide { width: 100%; margin-top: 12px; }
#editor-back { margin-bottom: 4px; }
.next { font-size: calc(16px * var(--fs)); font-weight: 600; margin-top: 6px; line-height: 1.5; }
.next.done { color: var(--brand); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.actions #complete { grid-column: 1 / -1; }
.rows li label.did { display: inline-flex; align-items: center; gap: 6px; font-size: calc(14px * var(--fs)); color: var(--text-sub); margin: 8px 0 0; }
.rows li label.did input { width: 18px; height: 18px; margin: 0; }
.rows li.off { opacity: .55; }
.rows li.warn { border-color: var(--warn); }
#px-box .rows { margin-top: 8px; }
#px-box .row2 > button { flex: 1 1 140px; }
#bulk-list { max-height: 55vh; overflow-y: auto; margin: 8px 0; }
#bulk-list label.check { margin: 0; font-size: calc(16px * var(--fs)); align-items: flex-start; }
#bulk-list .why { margin-left: 28px; }
.capbox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.capbox summary { font-weight: 600; font-size: calc(16px * var(--fs)); cursor: pointer; }
.capbox h3 { font-size: calc(16px * var(--fs)); margin: 14px 0 4px; }
label.check { display: flex; align-items: center; gap: 8px; }
label.check input { width: 20px; height: 20px; margin: 0; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
        background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { border: 0; border-radius: 0; padding: 14px 0; background: transparent; color: var(--text-sub); }
.tabs button.active { color: var(--sel); font-weight: 700; }
details.fold { margin: 10px 0 0; }
details.fold > summary { font-weight: 600; font-size: calc(16px * var(--fs)); cursor: pointer; padding: 6px 0; }
main > section > details.fold { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 10px 0; }
.legend li .amt { color: var(--text-sub); font-variant-numeric: tabular-nums; font-size: calc(13px * var(--fs)); }
.legend li { align-items: flex-start; }
.legend li span:nth-child(2) { white-space: normal; overflow: visible; word-break: keep-all; overflow-wrap: anywhere; }
.legend li i { margin-top: 4px; }
.legend li .amt, .legend li span:last-child { white-space: nowrap; }
/* 그래프 모양 전환(10/2): 막대 · 원형 · 종목별 */
/* 떠 있는(float) 버튼 옆에서 그래프가 좁아지던 문제(10/2 화면 시험) → 자기 줄에 오른쪽 정렬 */
.chart-switch { display: flex; width: fit-content; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 4px 0 6px auto; }
.chart-switch button { border: 0; border-radius: 0; padding: 6px 12px; font-size: calc(14px * var(--fs)); background: var(--surface); color: var(--text-sub); }
.chart-switch button.on { background: var(--sel); color: var(--sel-ink); font-weight: 600; }
.chart-pie .pie-wrap { display: flex; justify-content: center; margin: 6px 0; }
.chart-pie .pie-svg { width: 220px; height: 220px; flex: none; }
.chart-pie .empty, .chart-cols .empty { color: var(--text-sub); font-size: calc(14px * var(--fs)); padding: 10px 0; }
.pie-keys { list-style: none; margin: 0; padding: 0; font-size: calc(14px * var(--fs)); flex: 1; min-width: 0; }
.pie-keys li { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; }
.pie-keys li i { width: 10px; height: 10px; border-radius: 3px; flex: none; margin-top: 4px; }
.pie-keys li span:nth-child(2) { flex: 1; word-break: keep-all; overflow-wrap: anywhere; }
.pie-keys li span:last-child { color: var(--text-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-cols { display: flex; gap: 4px; overflow-x: auto; margin: 6px 0; padding-bottom: 4px; }
.chart-cols .col { flex: 1 0 38px; min-width: 38px; display: flex; flex-direction: column; align-items: center; }
.chart-cols .plot { height: 150px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--text-sub); }
.chart-cols .pc { font-size: calc(13px * var(--fs)); color: var(--text-sub); font-variant-numeric: tabular-nums; margin-bottom: 2px; white-space: nowrap; }
.chart-cols .colbar { width: 68%; border-radius: 4px 4px 0 0; }
.chart-cols .nm { font-size: calc(13px * var(--fs)); line-height: 1.25; text-align: center; margin-top: 4px; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pie-svg .pie-label { font-size: 2.1px; font-weight: 600; pointer-events: none; }
.draft-actions > button { flex: 1 1 0; }
.market-tabs { margin: 10px 0 8px; }
.market-tabs button span { font-size: calc(13px * var(--fs)); opacity: .8; }
#pick-box .chips { margin-top: 4px; }
/* 여러 개 고르기(10/3) */
.multi-bar { margin: 0 0 6px; }
.chip.sel { border-color: var(--sel); background: var(--sel-soft); font-weight: 600; }
.multi-actions { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 8px; background: var(--surface); border: 1px solid var(--brand); border-radius: 12px; }
.multi-actions #multi-count { flex: 1; margin: 0; white-space: nowrap; }
#md-names { max-height: 30vh; overflow-y: auto; margin: 6px 0; }
#md-names .chip { pointer-events: none; }
/* 비율 한꺼번에 고치기(10/3) */
#bar-draft { cursor: pointer; }
.be-rows { display: grid; gap: 6px; max-height: 45vh; overflow-y: auto; margin: 8px 0; }
.be-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) 96px; align-items: center; gap: 8px; font-size: calc(16px * var(--fs)); }
.be-row i { width: 10px; height: 10px; border-radius: 3px; }
.be-row span { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.3; }
.be-row input { padding: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.be-row.over input { border-color: var(--warn); }
.be-unit { align-items: flex-end; }
.be-unit label { margin: 0; flex: 0 0 110px; }
.be-unit button { flex: 1; }
/* 키보드가 올라와도 창 아래 버튼이 안 잘리게(10/3 휴대폰 확인) — 보이는 높이(visualViewport)에 맞추고, 목록만 안에서 스크롤 */
:root { --vvh: 100dvh; --vvtop: 0px; }
dialog { max-height: calc(var(--vvh) - 16px); }
dialog[open] { display: flex; flex-direction: column; }
dialog > form { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
dialog > form > * { flex: none; }
html.kb dialog:modal { margin: calc(var(--vvtop) + 8px) auto auto; }
#be-form { overflow: hidden; }
#be-form > #be-rows { flex: 1 1 auto; min-height: 56px; max-height: none; overflow-y: auto; }
#be-form > p.sub { margin-top: 0; }
/* 키보드가 떠 있거나 화면이 낮으면 창을 촘촘하게 — 설명 줄·'단위' 글자를 숨기고 목록에 자리를 준다 */
html.kb #be-form > p.sub, html.kb .be-unit-label { display: none; }
html.kb dialog h2 { margin: 4px 0 6px; font-size: calc(16px * var(--fs)); }
html.kb #be-sum { margin: 4px 0; }
html.kb dialog .row2 { margin: 4px 0; }
@media (max-height: 520px) {
  #be-form > p.sub, .be-unit-label { display: none; }
  dialog h2 { margin: 4px 0 6px; font-size: calc(16px * var(--fs)); }
  #be-sum { margin: 4px 0; }
  dialog .row2 { margin: 4px 0; }
}
form.solo { margin: 0; }
/* 프리셋 카드 설명·수익률(10/3) */
#preset-list .desc { font-size: calc(14px * var(--fs)); margin-top: 4px; line-height: 1.45; }
#preset-list .ret { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: calc(14px * var(--fs)); color: var(--text-sub); }
#preset-list .ret b { color: var(--brand); font-variant-numeric: tabular-nums; }
#preset-list .ret .risk { margin-left: auto; }

/* ---- 2026 모바일 기준 반영(10/3 조사: 본문 16px 이상 · 누르는 곳 44px 이상 · 아래에서 올라오는 시트 · 동작 줄이기 존중) ---- */
body { font-size: calc(16px * var(--fs)); line-height: 1.5; }
button, .chip, .tabs button, input, select, summary { min-height: 44px; }
button.small { min-height: 44px; padding: 8px 12px; }
.chip { padding: 9px 12px; }
.rows li label.did { min-height: 44px; }
label.check { min-height: 44px; }
summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style-position: inside; }
/* 입력 창 = 아래에서 올라오는 시트(Material: 위 모서리 28, 손잡이, 최대 폭 640). 키보드가 뜨면 위쪽에 붙이는 규칙(html.kb)이 이긴다. */
dialog:modal { margin: auto auto 0; width: 100%; max-width: 640px; border: 0; border-radius: 28px 28px 0 0;
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
dialog:modal::before { content: none; }
html.kb dialog:modal { border-radius: 20px; width: min(96vw, 640px); }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: sheet-up .22s ease-out; }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}
.top .fs-btn { min-height: 36px; padding: 4px 10px; font-size: calc(14px * var(--fs)); border-radius: 999px; }
.top { flex-wrap: wrap; align-items: center; }
.top h1 { margin-right: auto; }
.top .who { order: 3; flex-basis: 100%; text-align: left; margin-top: 2px; }
/* 용어: 링크처럼 색 + 점선 밑줄, 누르면 설명(10/3) */
.term { color: var(--brand); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; border-radius: 4px; }
.term:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#term-pop { position: fixed; inset: auto; margin: 0; max-width: min(320px, calc(100vw - 24px)); padding: 12px 14px; border: 1px solid var(--brand);
  border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 8px 24px var(--shadow); font-size: calc(15px * var(--fs)); line-height: 1.5; cursor: pointer; }
#term-pop:not(:popover-open):not(.open) { display: none; }
#term-pop b { display: block; color: var(--brand); margin-bottom: 4px; }
/* 프리셋 뒤 다시 조정 안내(10/3) */
.hint { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border-left: 3px solid var(--brand); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0;
  font-size: calc(14px * var(--fs)); line-height: 1.5; }
/* 가족 계좌(10/3) */
.top .acct-btn { min-height: 36px; padding: 4px 12px; font-size: calc(14px * var(--fs)); border-radius: 999px; border-color: var(--brand); color: var(--brand); font-weight: 600; }
#acct-list li { display: flex; align-items: center; gap: 8px; }
#acct-list li .nm { flex: 1; font-weight: 600; }
#acct-list li.on { border-color: var(--sel); }
#acct-list li .act { margin: 0; }
/* 접는 제목 표시(▸ 닫힘 / ▾ 열림) — 높이 44px 로 바꾸며 기본 삼각형이 사라진 것 되살림(10/3) */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; color: var(--brand); font-size: 1.1em; width: 1em; flex: none; }
details[open] > summary::before { content: "▾"; }
#acct-list li.renaming { flex-wrap: wrap; }
#acct-list li .rename { flex: 1 1 140px; min-width: 0; font-weight: 600; }
/* 지우기 확인·되돌리기(10/3) */
button.danger { background: var(--btn-danger-bg); color: var(--btn-danger-text); border-color: var(--btn-danger-border); }
#confirm-dialog .row2 > button { flex: 1; }
.msg-row { display: flex; align-items: center; gap: 8px; }
.msg-row .msg { flex: 1; margin: 6px 0; }
#trash-list li { display: flex; align-items: center; gap: 8px; }
#trash-list li .nm { flex: 1; }
/* 계좌 카드: 이름(누르면 고름)은 한 줄 가득, 단추는 아랫줄 오른쪽(10/3) */
#acct-list li:not(.renaming) { flex-wrap: wrap; }
#acct-list li button.nm { flex: 1 1 100%; text-align: left; border: 0; background: transparent; padding: 6px 2px; font-size: calc(16px * var(--fs)); }
#acct-list li:not(.renaming) .act { margin-left: auto; }
/* 예수금 여러 줄(10/3) */
.cash-entries { margin: 14px 0 6px; }
.ce-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.1fr) 44px; gap: 6px; margin: 6px 0; align-items: center; }
.ce-row input, .ce-row select { min-width: 0; padding: 8px; }
.ce-row input.amt { text-align: right; font-variant-numeric: tabular-nums; }
.ce-row button { padding: 0; }
/* 가져오기 취소(10/3) */
.import-actions > button { flex: 1 1 0; }

/* 인식 진행률(10/3) */
.progress { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; margin: 10px 0 4px; }
.progress-fill { height: 100%; width: 0; background: var(--brand); border-radius: 5px; }
@media (prefers-reduced-motion: no-preference) { .progress-fill { transition: width .25s linear; } }
.progress-text { margin: 0 0 6px; font-variant-numeric: tabular-nums; }
/* 캡처 계좌별 나누기(10/3) */
#gd-list li { display: grid; gap: 6px; }
#gd-list li .gd-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
#gd-list li .gd-head input { width: 20px; height: 20px; margin: 0; }
#gd-list li select { width: 100%; }
#cash-auto .sub { flex: 1; margin: 4px 0; }
/* 아래 탭 줄이 내용 위에 오게(10/3 화면 시험: 목록 글자가 탭을 가려 눌리지 않던 것) */
.tabs { z-index: 5; }
/* 긴 안내 글은 줄바꿈 — 화면보다 넓어져 페이지가 축소되던 것(10/3 화면 시험: 521px) */
.legend li span.nd { white-space: normal; flex: 1 1 60%; color: var(--text-sub); font-size: calc(13px * var(--fs)); }
html, body { overflow-x: clip; }   /* 그래도 넘치면 페이지 전체가 축소되지 않게 */
#cf-alt { margin: 4px 0 0; }
/* 해외주식 양도세(10/3) */
#tax-lines { line-height: 1.6; }
.rows li .why.gain { color: var(--text); }
#acct-list li .rename-owner { flex: 1 1 140px; min-width: 0; }

/* 종목 연결(10/3): 연결됨 = 녹색 */
.match { margin-top: 3px; }
.match button { min-height: 0; padding: 3px 8px; font-size: .82em; }
.match .linked { border: 1px solid var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border-radius: 999px; font-weight: 600; }
.match .linked.off { border-color: var(--line); color: var(--text-sub); background: transparent; font-weight: 400; }
.match .unlinked { border-color: var(--warn); color: var(--warn); }
.match-sum.ok { color: var(--ok); }
.cands { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; max-height: 45vh; overflow-y: auto; }
.cands .cand { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 9px 10px; }
.cands .cand b { grid-row: span 2; align-self: center; min-width: 5.5em; }
.cands .cand span { overflow-wrap: anywhere; }
.cands .cand.sel { border-color: var(--ok); }
#match-q { width: 100%; box-sizing: border-box; }

/* 종목 고르기 카탈로그(10/3) */
.sub-tabs { margin-top: 6px; }
.sub-tabs button { font-size: .9em; }
.sector-chips { margin: 6px 0; }
#pick-q { width: 100%; box-sizing: border-box; margin: 6px 0; }
.cat-list { display: grid; gap: 6px; }
.cat-head { font-size: .85em; font-weight: 700; color: var(--text-sub); margin-top: 6px; }
.cat-row { display: grid; grid-template-columns: 12px 1fr; gap: 2px 10px; align-items: start; text-align: left; width: 100%; padding: 9px 10px; min-width: 0; }
.cat-row > i { width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; }
.cat-row .cat-main { display: grid; gap: 2px; min-width: 0; }
.cat-row .cat-main b, .cat-row .cat-main span { overflow-wrap: anywhere; }
.cat-row .tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.cat-row.sel { border-color: var(--sel); background: var(--sel-soft); }
.tag { font-size: .75em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-sub); }
.tag.held { border-color: var(--ok); color: var(--ok); }
.tag.small-unit { border-color: var(--brand); color: var(--brand); }
.tag.warn { border-color: var(--warn); color: var(--warn); }
#overlap-note { white-space: pre-line; }
.cat-sub { font-size: .78em; color: var(--text-sub); margin: 4px 0 0 4px; }
/* 종목 고르기 목록은 자기 안에서 스크롤(10/3 사용자 요청) — 화면 높이의 절반 정도, 끝에 닿아도 바깥 페이지가 같이 밀리지 않게 */
#palette.pal-scroll { max-height: min(calc(var(--vvh, 100dvh) * 0.5), 520px); overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 2px 4px 6px 2px; border: 1px solid var(--line); border-radius: 10px; }
#palette.pal-scroll.chips { align-content: flex-start; }
/* 가격 모르는 매수 · 남겨 두기(10/3) */
.rows li.pending { border-style: dashed; }
.px-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.px-row .px-in { flex: 1 1 auto; min-width: 0; }
.keep-btn { margin-top: 6px; }
#rb-unmanaged li button.small { margin-left: auto; padding: 3px 8px; font-size: .8em; }
/* 매매 카드 한 줄 + 진행 카드(10/4 사용자 요청) */
.rows.trades li.trade { padding: 6px 8px 6px 10px; margin-bottom: 6px; }
.trow { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.trow .tl { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; margin: 0; }
.tchk { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tbox { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; box-sizing: border-box; background: var(--surface); }
.tbox.wait { border-style: dashed; }
.tchk:checked + .tbox { background: var(--ok); border-color: var(--ok); }
.tchk:checked + .tbox::after { content: "✓"; color: var(--sel-ink); font-weight: 700; font-size: 15px; line-height: 1; }
.tchk:focus-visible + .tbox { outline: 2px solid var(--brand); outline-offset: 2px; }
.trow .tname { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 600; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }   /* 긴 이름은 두 줄까지 */
.trow .tqty { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.rows li.sell .tqty { color: var(--sell); }
.rows li.buy .tqty { color: var(--buy); }
.trow .tamt { flex: none; color: var(--text-sub); font-size: .82em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tmore { flex: none; min-height: 32px; min-width: 32px; padding: 0; border: none; background: transparent; color: var(--text-sub); }
.ttag { margin-left: 6px; font-size: .7em; font-weight: 400; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-sub); vertical-align: middle; }
.tprice { flex: none; }
.tdetail { margin: 4px 0 4px 36px; }
.rows li.trade.done { opacity: .5; }
.rows li.trade.done .tname { text-decoration: line-through; }
.progress-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.progress-card .pg-head { margin-bottom: 6px; }
.pg-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pg-fill { height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.progress-card.all .pg-fill { background: var(--ok); }
.progress-card.all #pg-title { color: var(--ok); }
#pg-lines { white-space: pre-line; margin-top: 6px; }
/* 원·달러 보기(10/4) */
/* 양도세 공제 막대(10/4) */
.tax-bar { position: relative; display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin: 8px 0 6px; background: var(--line); }
.tax-bar > div { display: flex; align-items: center; justify-content: center; font-size: calc(12px * var(--fs)); font-weight: 600; white-space: nowrap; overflow: hidden; color: var(--on-data); min-width: 0; }
.t-done { background: var(--muted-fill); }
.t-plan { background: var(--brand); }
.t-unsure { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); }
.t-left { background: color-mix(in srgb, var(--ok) 28%, var(--surface)); color: var(--text) !important; }
.t-over { background: var(--btn-danger-bg); }
.tax-bar .t-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--text); }
.tax-legend { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 2px; font-size: calc(13px * var(--fs)); }
.tax-legend li { display: flex; align-items: center; gap: 6px; }
.tax-legend li span:nth-child(2) { flex: 1; }
.tax-legend li span:last-child { color: var(--text-sub); font-variant-numeric: tabular-nums; }
.tax-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tax-legend i.t-left { border: 1px solid var(--line); }
/* 일괄 체크·해제(10/4) */
.trade-head { display: flex; align-items: center; gap: 8px; }
.trade-head .bulk-btn { margin-left: auto; font-size: calc(13px * var(--fs)); font-weight: 600; padding: 6px 12px; min-height: 36px; }
/* 원·달러 단추(10/4): 고정 바 둘째 줄 오른쪽 */
.top .top-brk { order: 2; flex-basis: 100%; height: 0; }
.top .who { order: 3; flex: 1 1 auto; flex-basis: auto; min-width: 0; }
.top .cur-btn { order: 4; flex: none; min-height: 32px; padding: 2px 12px; font-size: calc(14px * var(--fs)); font-weight: 700; border-radius: 999px; white-space: nowrap; }
.top .cur-btn.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.top .cur-btn:disabled { opacity: .4; }
.top .cur-btn { min-width: 40px; padding: 2px 10px; font-size: calc(17px * var(--fs)); }
/* 팔 것·살 것 6칸 + 목록 안 스크롤(10/4) */
.rows.trades.scroll { overflow-y: auto; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; margin-bottom: 0; }
.rows.trades.scroll.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.more-hint { text-align: center; font-size: calc(13px * var(--fs)); color: var(--text-sub); padding: 2px 0 8px; }
/* 처음 쓰는 사람 안내(10/4) */
.guide { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: 12px; padding: 12px; margin: 8px 0 12px; }
.guide p { margin: 6px 0; }
.g-steps { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.g-step { font-size: calc(13px * var(--fs)); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-sub); background: var(--surface); }
.g-step.cur { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.g-step.done { border-color: var(--ok); color: var(--ok); }
.g-btns { display: grid; gap: 8px; margin-top: 8px; }
/* 목표 밖 정리 묻기 · 기록 알림 · 되돌리기 알림(10/4) */
.ask { border-color: var(--warn); }
.ask-btns { display: grid; gap: 8px; margin-top: 8px; }
.pg-cta { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-weight: 600; }
.pg-cta span { flex: 1; }
.linklike { border: none; background: none; padding: 0; min-height: 0; color: var(--brand); text-decoration: underline; font-size: inherit; }
.toast { position: fixed; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 10px;
  background: var(--text); color: var(--bg); border-radius: 12px; padding: 10px 12px; box-shadow: 0 4px 16px var(--shadow); font-size: calc(14px * var(--fs)); }
.toast span { flex: 1; min-width: 0; }
.toast button { flex: none; background: transparent; border: none; color: var(--brand); font-weight: 700; min-height: 36px; padding: 0 6px; filter: brightness(1.6); }
#rb-summary > summary .sub { font-weight: 400; }
/* 분야 색 범례(10/4) */
.sec-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 2px; font-size: calc(12px * var(--fs)); color: var(--text-sub); }
.sl-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sl-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* 직접 입력 · 동의 · 백업 상태(10/4) */
#manual-open { margin-top: 8px; }
#mn-q { width: 100%; box-sizing: border-box; }
#mn-step2 label { display: block; margin: 6px 0; }
.disc-agree { margin: 12px 0 8px; font-weight: 600; }
#disc-dialog h3 { margin: 12px 0 4px; font-size: calc(15px * var(--fs)); }
.backup-state { font-weight: 600; }
.backup-state.stale { color: var(--warn); }
#mn-step2 label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 8px 0; }
#mn-step2 label input { width: 100%; box-sizing: border-box; }
#mn-step2 .row2 { gap: 8px; }
/* 실제 체결 입력(10/5) */
.fill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.fill-row .fill-in { width: 6.5em; min-height: 32px; padding: 2px 6px; }
/* 고른 사진 확인 트레이(10/5) */
.tray { margin: 10px 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 8px 0; }
.tray-item { position: relative; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: var(--line); aspect-ratio: 9 / 16; min-height: 0; }
.tray-item img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tray-item.on { border-color: var(--sel); }
.tray-item:not(.on) img { opacity: .35; filter: grayscale(1); }
.tray-badge { position: absolute; top: 4px; left: 4px; min-width: 24px; padding: 1px 6px; border-radius: 12px; background: var(--sel); color: var(--sel-ink); font-size: 13px; font-weight: 700; text-align: center; }
.tray-item:not(.on) .tray-badge { background: var(--muted-fill); color: var(--on-data); }
.tray-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tray-btns button { flex: 1; min-width: 0; }
/* 현금 창 모드(10/5) */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0; }
.seg button { min-height: 44px; padding: 4px 2px; font-size: 14px; border-radius: 10px; }
.seg button[aria-checked="true"] { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); font-weight: 700; }
.cash-quick { display: block; margin-top: 6px; font-weight: 600; }
#cash-card #cash-edit { margin-top: 8px; }
#cash-chips { margin-top: 6px; }
.tray-sel { display: flex; justify-content: flex-end; gap: 6px; }
/* 되돌릴 수 없는 확인(10/5): 전체 화면, 단추를 눌러야 넘어간다 */
dialog.critical:modal { margin: 0; width: 100vw; max-width: none; height: var(--vvh, 100dvh); max-height: none; border-radius: 0; justify-content: center; padding: 24px 20px; }
dialog.critical:modal::before { display: none; }
dialog.critical::backdrop { background: var(--scrim-strong); }
dialog.critical > form { gap: 12px; }
dialog.critical h2 { font-size: 1.4em; }
dialog.critical #cf-text { white-space: pre-line; font-size: 1.05em; color: var(--text); }
dialog.critical .row2 button { min-height: 52px; font-size: 1.05em; }
/* 계좌 나누기 창: 종목 보기·사진 옮기기(10/5) */
.gd-more { margin-top: 8px; }
.gd-more > summary { font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--brand); cursor: pointer; padding: 6px 0; }
.gd-stocks { list-style: none; margin: 4px 0 8px; padding: 0; max-height: 40vh; overflow-y: auto; font-size: calc(14px * var(--fs)); }
.gd-stocks li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.gd-stocks li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.gd-stocks li .sub { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gd-photos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.gd-photo { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; align-items: start; font-size: calc(14px * var(--fs)); }
.gd-photo img { width: 48px; height: 86px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); }
.gd-photo select { width: 100%; margin-top: 4px; padding: 6px; }
.gd-merge { color: var(--brand); font-weight: 600; }
#gd-list li.off { opacity: .55; }
#gd-list .gd-stocks li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 5px 0; margin: 0; font-size: calc(14px * var(--fs)); }
#gd-list .gd-photo { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
/* 하단 탭 읽기 진행률(10/5) */
.tabs button { position: relative; }
.tab-badge { position: absolute; top: 4px; right: 10%; min-width: 30px; padding: 0 5px; border-radius: 999px; background: var(--sel); color: var(--sel-ink); font-size: calc(11px * var(--fs)); font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums; }
/* 계좌 나누기 창: 사진별 카드(10/5) */
#gd-list .gd-pcards { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
#gd-list .gd-pcard { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin: 0; }
.gd-ptop { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; }
.gd-thumb { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: 76px; height: 136px; background: var(--surface); }
.gd-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gd-thumb span { position: absolute; left: 0; right: 0; bottom: 0; background: var(--scrim); color: var(--on-data); font-size: calc(12px * var(--fs)); text-align: center; padding: 2px 0; }
.gd-pinfo { display: grid; gap: 4px; }
.gd-pinfo .sub { margin: 0; }
.gd-pinfo select { width: 100%; padding: 6px; }
#gd-list .gd-prows { list-style: none; margin: 8px 0 0; padding: 0; font-size: calc(14px * var(--fs)); }
#gd-list .gd-prows li { display: flex; justify-content: space-between; gap: 8px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 5px 0; margin: 0; font-size: calc(14px * var(--fs)); }
#gd-list .gd-prows li span:first-child { min-width: 0; overflow-wrap: anywhere; }
#gd-list .gd-prows .num { color: var(--text-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 사진 원본 보기 */
dialog.viewer:modal { margin: 0; width: 100vw; max-width: none; height: var(--vvh, 100dvh); max-height: none; border-radius: 0; padding: 8px; }
dialog.viewer:modal::before { display: none; }
.pv-head { display: flex; align-items: center; gap: 8px; }
.pv-head b { flex: 1; min-width: 0; }
#pv-note { margin: 4px 0 6px; }
#pv-stage { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
#pv-stage > img { max-width: 100%; }
.pv-wrap { position: relative; width: 100%; }
.pv-wrap > img { display: block; width: 100%; height: auto; }
.pv-layer { position: absolute; inset: 0; pointer-events: none; }
.pv-mark { position: absolute; border: 2px solid var(--ok); border-radius: 4px; background: color-mix(in srgb, var(--ok) 10%, transparent); }
.pv-mark.warn { border-color: var(--warn); }
.pv-label { position: absolute; left: -2px; bottom: 100%; max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--ok); color: var(--on-data);
  font-size: calc(11px * var(--fs)); font-weight: 700; line-height: 1.3; padding: 1px 5px; border-radius: 4px 4px 4px 0; }
.pv-mark.warn .pv-label { background: var(--warn); }
#pv-stage.hide-marks .pv-layer { display: none; }
/* 계좌 탭·완료 막(10/5) */
.acct-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.acct-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; min-height: 40px;
  background: var(--tab-todo-bg); color: var(--tab-todo-text); border: 1.5px solid var(--tab-todo-border); font-weight: 600; white-space: nowrap; }
.acct-tab.saved { background: var(--tab-done-bg); color: var(--tab-done-text); border-color: var(--tab-done-border); }
.acct-tab.cur { background: var(--tab-cur-bg); color: var(--tab-cur-text); border-color: var(--tab-cur-bg); }
.acct-tab.cur.saved { box-shadow: inset 0 0 0 2px var(--tab-done-border); }
.import-finish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.import-finish span { flex: 1 1 180px; }
.import-body { position: relative; }
.import-body.locked { min-height: 220px; }
.import-lock { position: absolute; inset: -4px; z-index: 5; background: var(--veil); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
  border-radius: 12px; display: flex; align-items: flex-start; justify-content: center; }
.lock-box { position: sticky; top: 40vh; margin-top: 40px; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 16px 18px;
  background: var(--surface); border: 1.5px solid var(--tab-done-border); border-radius: 14px; box-shadow: 0 6px 20px var(--shadow); max-width: 86%; }
.lock-box p { margin: 0; white-space: pre-line; font-weight: 600; }
.lock-box button { min-width: 140px; min-height: 48px; font-size: 1.05em; }
.tag.fx-tag { display: inline-block; margin-top: 4px; border-color: var(--brand); color: var(--brand); white-space: normal; }
/* 계좌 카드: 선택 동그라미 + 누르면 고쳐지는 이름·명의 상자(10/5) */
#acct-list li { flex-direction: column; align-items: stretch; }
.acct-main { display: flex; align-items: flex-start; gap: 10px; }
.acct-radio { flex: none; width: 26px; height: 26px; min-height: 0; padding: 0; margin-top: 8px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); }
.acct-radio.on { border-color: var(--sel); background: radial-gradient(circle, var(--sel) 0 45%, var(--surface) 50%); }
.acct-fields { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.edit-field { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; border-radius: 8px;
  border: 1.5px solid var(--edit-border); background: var(--edit-bg); color: var(--text); text-align: left; max-width: 100%; }
.edit-field:active, .edit-field:focus-visible { border-color: var(--edit-focus); }
.edit-field.name { font-weight: 700; flex: 1 1 100%; }
.edit-field .edit-cap, .edit-wrap .edit-cap { font-size: calc(11px * var(--fs)); color: var(--text-sub); font-weight: 400; }
.edit-field .edit-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-field .edit-pen { margin-left: auto; color: var(--edit-pen); font-size: .95em; }
.edit-wrap { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 100%; }
input.edit-field.editing { flex: 1; border-color: var(--edit-focus); background: var(--surface); font-weight: 600; }
.acct-when { margin: 0 0 0 2px; }
#acct-list li .act { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
/* 계좌 색 적용(10/5 ④) */
.top .acct-btn { border-color: var(--acct-c, var(--brand)); color: var(--acct-c, var(--brand)); border-width: 2px; }
.top .acct-btn::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--acct-c, var(--brand)); margin-right: 6px; vertical-align: middle; }
#acct-list li { border-left: 6px solid var(--acct-c, var(--line)); }
#import-acct { border-left-color: var(--acct-c, var(--brand)); }
.acct-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--acct-c, var(--line)); flex: none; }
.acct-tab.cur .acct-dot { box-shadow: 0 0 0 2px var(--tab-cur-text); }
#gd-list > li { border-left: 6px solid var(--acct-c, var(--line)); }
.gd-why { color: var(--ok); }
.gd-warn { color: var(--warn); font-weight: 600; }
/* 잡는 막대·닫기 단추(10/5) */
.sheet-grab { flex: none; height: 36px; margin: -22px -18px 2px; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.sheet-grab::after { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--text-sub); opacity: .45; }
dialog.critical .sheet-grab { display: none; }
html:has(dialog[open]), html:has(dialog[open]) body { overscroll-behavior-y: none; }
dialog:modal { overscroll-behavior: contain; }
button.close-btn { background: var(--btn-close-bg); color: var(--btn-close-text); border-color: var(--btn-close-border); font-weight: 600; min-height: 48px; }
.row2 > button.close-btn:only-child { flex: 1 1 100%; }
.row2 > button.close-btn { flex: 1 1 30%; }
#acct-list li.on { border-left-color: var(--acct-c, var(--sel)); }   /* 선택 테두리가 계좌 색 띠를 덮지 않게 */
.legend li.cash-sub { padding: 2px 0 2px 22px; font-size: calc(13px * var(--fs)); color: var(--text-sub); border-bottom: 1px dashed var(--line); }
.legend li.cash-sub .cs-name { flex: 1; min-width: 0; }
.legend li.cash-sub .amt { white-space: nowrap; }
/* 메뉴 구조(10/5): 홈 탭 3칸, 계좌 안 머리줄 「← · 계좌 이름」 */
.tabs.nav3 { grid-template-columns: repeat(3, 1fr); }
.top .back-btn { order: -1; min-height: 40px; min-width: 40px; padding: 0 6px; border: 0; background: transparent; font-size: 1.4em; line-height: 1; color: var(--text); }
.top .back-btn[hidden] + h1 { margin-left: 0; }
.acct-sum { flex: 1 1 100%; margin: 2px 0 0 2px; font-size: calc(15px * var(--fs)); }
.acct-sum .sub.off { color: var(--warn); font-weight: 600; }
#home-capture { margin-top: 12px; }
#home-capture .sub { display: block; margin: 2px 0 0; font-size: calc(12px * var(--fs)); }
#settings .fs-btn { min-height: 44px; padding: 6px 14px; border-radius: 999px; }
.acct-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; cursor: pointer; }
.acct-sum .acct-go { margin-left: auto; font-size: 1.6em; line-height: 1; color: var(--acct-c, var(--brand)); font-weight: 700; }
#acct-list li { cursor: pointer; }
.import-card { margin-bottom: 12px; }
.import-card .row2 button { flex: 1; min-height: 48px; }
/* UI 검사기(10/6) — 데이터 값은 CSS 변수로 받고 모양은 여기서 */
.view { display: block; }
.tab-mark { font-weight: 700; }
.tappable { cursor: pointer; }
.dc { --c: hsl(var(--h) var(--s) var(--l)); }
.dc.c-cash { --c: var(--cash); }
.dc.c-other { --c: var(--other); }
.sw { background: var(--c, var(--line)); }
.sw.lev2, .sw.lev3 { outline: 2px dashed var(--lev2); outline-offset: 1px; }
.sw.lev3 { outline-color: var(--lev3); }
.sw.lev-sample { background: var(--surface); }
.bar > div.dc { width: var(--w); background: var(--c); }
.bar > div.c-cash { color: var(--on-cash); }
.bar > div.lev2, .bar > div.lev3, .colbar.lev2, .colbar.lev3 { outline: 2px dashed var(--lev2); outline-offset: -2px; }
.bar > div.lev3, .colbar.lev3 { outline-color: var(--lev3); }
.colbar { height: var(--hgt); background: var(--c); }
.pie-seg { stroke: var(--c); }
.pie-lev.lev2 { stroke: var(--lev2); }
.pie-lev.lev3 { stroke: var(--lev3); }
.progress-fill, .pg-fill { width: var(--w, 0); }
.pv-mark { left: var(--x); top: var(--y); width: var(--w); height: var(--hgt); }
.rows.trades.scroll { max-height: var(--max-h, none); }
.tax-bar > div { width: var(--w); }
.tax-bar .t-line { left: var(--x); }
#tax-lines { white-space: pre-line; }
#term-pop { left: var(--x, 12px); top: var(--y, 12px); }
dialog:modal { transform: translateY(var(--drag-y, 0)); }
dialog.dragging { transition: none; }
dialog.snapback { transition: transform .18s ease-out; }
/* 머리줄 두 줄(10/6 사용자 요청): 첫 줄 「← 뒤로 … ● 계좌 · ₩/$」, 둘째 줄 화면 제목 — 뒤로와 제목이 한 묶음으로 읽히지 않게 */
.top { row-gap: 2px; }
.top .back-btn { order: 0; }
.top .acct-btn { order: 1; margin-left: auto; }
.top .cur-btn { order: 2; }
.top .top-brk { order: 3; flex-basis: 100%; height: 0; }
.top h1 { order: 4; flex: 1 1 100%; margin: 2px 0 0; }
.top .who { order: 5; flex: 1 1 100%; }
/* 기록: 지금 쓰는 기록 표시(10/6) */
#snapshots li.now { border-color: var(--sel); border-width: 2px; }
.now-tag { font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--sel); margin-bottom: 4px; }
/* 뒤로 단추를 글자로(10/6 사용자 요청: 기호만으로는 어디로 가는지 모름) */
.top .back-btn { font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--brand); padding: 4px 10px 4px 0; min-height: 40px; }
/* 누를 수 있는 것은 모두 버튼 모양(10/6 사용자 요청) — 보조 버튼 색은 색 묶음 ③ --btn-sub-* */
button.sub-btn {
  background: var(--btn-sub-bg); color: var(--btn-sub-text); border: 1.5px solid var(--btn-sub-border); border-radius: 999px;
  text-decoration: none; font-weight: 600; filter: none; }
.linklike { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; min-height: 36px; font-size: calc(14px * var(--fs)); }
.top .back-btn { padding: 4px 12px; min-height: 36px; }
.tmore { min-width: 36px; min-height: 32px; padding: 0 8px; }
.toast button { padding: 4px 12px; }
.cash-quick { margin-top: 8px; }
/* 펼치기 줄(▸)은 버튼 모양으로 하지 않음 — 10/6 사용자: "아래로 펼치는 건 버튼 취소" */
/* 용어 설명 낱말 */
.term { background: var(--btn-sub-bg); border: 1px solid var(--btn-sub-border); border-radius: 6px; padding: 0 4px; text-decoration: none; }
/* 누르면 들어가는 카드 */
.rows li.tappable { position: relative; padding-right: 32px; }
.rows li.tappable::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 1.6em; font-weight: 700; color: var(--btn-sub-text); }
.top .back-btn.sub-btn { border: 1.5px solid var(--btn-sub-border); background: var(--btn-sub-bg); color: var(--btn-sub-text); padding: 4px 12px; border-radius: 999px; }
/* 알림 남은 시간 막대(10/6) */
.toast { overflow: hidden; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--btn-sub-text); transform-origin: left; transform: scaleX(var(--left, 1)); filter: brightness(1.6); }
.toast.timing::after { animation: toast-left var(--ms, 4000ms) linear forwards; }
@keyframes toast-left { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* 안쪽 스크롤 목록(10/6 사용자: "종목 고르는 부분을 잡고 스크롤할 수 없다") — 바깥이 같이 밀리지 않게 막는 건
   내용이 실제로 넘칠 때만. 넘치지 않는 목록에 막기를 걸면 그 위를 잡고 화면 전체가 안 움직인다(Chrome). */
#palette.pal-scroll.ov, #be-form > #be-rows.ov, #pv-stage.ov { overscroll-behavior: contain; }
/* 기록·다른 계좌에서 가져오기: 계좌별 묶음(10/6) — 왼쪽 계좌 색 띠 */
#copy-list li.copy-acct { border-left: 5px solid var(--acct-c); display: grid; gap: 8px; }
.copy-acct-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.copy-acct-head .sub { margin-left: auto; }
.now-chip { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--sel); border: 1.5px solid var(--sel); border-radius: 999px; padding: 0 8px; }
.copy-rec { border-top: 1px solid var(--line); padding-top: 8px; }
.copy-more { justify-self: center; }
/* 가져오기 표 위 사진 줄(10/6) */
.import-photos { display: grid; gap: 6px; margin: 8px 0; }
.gd-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
/* 설정 맨 아래 앱 버전(10/6) */
.app-ver { margin-top: 24px; text-align: center; }
/* 가격 불러오기(먼저) · 직접 넣기(대안) (10/6) */
.trow .tprice-alt { flex: none; padding: 4px 10px; }
/* 좁은 화면: 종목 이름을 먼저 지키고 단추는 다음 줄로(10/6) */
.trade.pending .trow { flex-wrap: wrap; row-gap: 6px; }
.trade.pending .tname { flex: 1 1 0; min-width: 0; }
.tbtns { display: flex; gap: 6px; flex-basis: 100%; justify-content: flex-end; }
/* 보관한 계좌 카드(10/8): 눌러서 고른다 — 고른 카드는 테두리·바탕 강조 */
.arch-list li { cursor: pointer; border: 1.5px solid var(--line); }
.arch-list li.on { border-color: var(--sel); background: var(--sel-soft); }
.arch-list li .arch-check { flex: none; font-weight: 700; color: var(--sel); margin-right: 6px; }