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

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

  /* ② 바탕·글자 */
  --bg: #f7f7f5;             /* 화면 바탕 */
  --surface: #ffffff;        /* 카드·창 바탕 */
  --text: #1d1d1b;           /* 본문 글자 */
  --text-sub: #8a8a84;       /* 보조 글자 */
  --line: #d9d9d4;           /* 테두리·구분선·빈 막대 */
  --sea: #dbe7ef;            /* 섬 지도 바다·지도 화면 바탕(연구소) */
  /* 레벨마다 바다색(10/7 — 레벨 업하면 배경이 바뀐다). 5 레벨마다 처음으로 돈다 */
  --sea-lv2: #f3e6cc;        /* 모래빛 바다 */
  --sea-lv3: #d6ead8;        /* 초록 바다 */
  --sea-lv4: #e3dcf2;        /* 보랏빛 바다 */
  --sea-lv5: #f2dcdc;        /* 노을 바다 */

  /* ③ 버튼 — 긍정(저장·추가·확인)·부정(취소·닫기·아니오)·위험(되돌릴 수 없는 지우기)·보통(그 밖) */
  --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: var(--surface); --btn-sub-text: var(--brand); --btn-sub-border: var(--brand);   /* 보조 버튼(링크·펼치기·용어·▾ — 누를 수 있음을 보이게, 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: #b5560b;           /* 주의·확인 필요(연구소) */

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

  /* ⑦ 데이터 그래프 */
  --cash: #c7cbd1;           /* 현금 조각 */
  --flag-pole: #c7cbd1;      /* 섬 3D 수도 깃대(옅은 회색 — 회색 묶음, 10/7) */
  --shark-fin: #4a5560;      /* 섬 3D 바다 상어 지느러미(짙은 청회색, 10/7) */
  --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: #7aa7e6; --brand-ink: #0f1a2a;
    --bg: #161615; --surface: #22221f; --text: #ecebe6; --text-sub: #8f8f88; --line: #3a3a36; --sea: #1d2a36;
    --btn-danger-bg: #e57373; --btn-danger-text: #1b0b0b; --btn-danger-border: #e57373;
    --ok: #81c784; --warn: #e0a060;
    --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: system-ui, -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(--brand); color: var(--brand-ink); border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 20px var(--shadow); font-size: calc(14px * var(--fs)); font-weight: 600; }   /* 검정 → 대표 파랑(10/9 사용자 「눈에 잘 안 띄어」) */
.toast span { flex: 1; min-width: 0; }
.toast button { flex: none; background: var(--brand-ink); border: none; border-radius: 999px; color: var(--brand); font-weight: 700; min-height: 36px; padding: 0 12px; }
#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/7 wb_기술연구소 「리벨런섬」 디자인)
   계좌 안: 머리줄(--top-h)과 아래 메뉴(--tabs-h) 사이를 섬 지도가 채우고, 다른 화면은 그 위로 올라오는 창이 된다. */
.tabs.nav4 { grid-template-columns: repeat(4, 1fr); }
body.acct { background: var(--sea); overflow: hidden; }
body.acct .top { z-index: 6; background: var(--sea); border-bottom: 0; }
body.acct .tabs { z-index: 6; }
.island-view.view { position: fixed; left: 0; right: 0; top: var(--top-h, 96px); bottom: var(--tabs-h, 56px); z-index: 0; margin: 0; padding: 0; max-width: none; }
.isl-area { position: absolute; inset: 0; overflow: hidden; }
.isl-map, .isl-3d { position: absolute; inset: 0; -webkit-tap-highlight-color: transparent; outline: none; }
.isl-map.isl-mini { background: var(--sea); }   /* 지도 그림이 정사각이 아니면 위아래 빈 곳으로 3D 바다가 비쳐 구멍처럼 보였다(10/8) */   /* 누를 때 파란 네모(휴대폰 기본 눌림 표시) 없음(10/8) */
.isl-map.isl-mini { inset: auto; top: 10px; right: 10px; width: min(34vw, 180px); height: min(34vw, 180px); z-index: 2; cursor: pointer;
  border-radius: 12px; overflow: hidden; border: 2px solid var(--surface); box-shadow: 0 2px 10px var(--shadow);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.isl-map.isl-mini.isl-custom { left: var(--mini-l); top: var(--mini-t); right: auto; width: var(--mini-s); height: var(--mini-s); }
.isl-map.isl-mini.isl-editing { border: 2px dashed var(--brand); touch-action: none; cursor: move; }
.isl-handle { position: absolute; width: 28px; height: 28px; background: var(--brand); touch-action: none; }
/* 손잡이 모서리(10/7): 미니맵이 있는 자리에 따라 지도 가운데 쪽 */
.isl-handle.isl-h-bl { left: 0; bottom: 0; border-radius: 0 10px 0 10px; cursor: nesw-resize; }
.isl-handle.isl-h-br { right: 0; bottom: 0; border-radius: 10px 0 10px 0; cursor: nwse-resize; }
.isl-handle.isl-h-tl { left: 0; top: 0; border-radius: 0 0 10px 0; cursor: nwse-resize; }
.isl-handle.isl-h-tr { right: 0; top: 0; border-radius: 0 0 0 10px; cursor: nesw-resize; }
.isl-map:not(.isl-mini) .isl-handle { display: none; }
.isl-tools { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.isl-tools[hidden] { display: none; }
.isl-tools .sub-btn { min-height: 36px; padding: 4px 12px; }
.isl-tools .sub-btn.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.isl-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 4; margin: 0; padding: 8px 12px; text-align: center; line-height: 1.6;
  width: max-content; max-width: calc(100% - 24px); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text);
  border-radius: 10px; box-shadow: 0 2px 8px var(--shadow); cursor: pointer; font-size: calc(14px * var(--fs)); }
.isl-hint[hidden] { display: none; }
.isl-hint .close-tip { display: block; margin-top: 4px; font-size: calc(11px * var(--fs)); color: var(--text-sub); }
.isl-hint.isl-hint-low { top: auto; bottom: 12px; }
.isl-msg { position: absolute; left: 10px; right: 10px; bottom: 8px; margin: 0; text-align: center; color: var(--warn); font-size: calc(13px * var(--fs)); pointer-events: none; }
/* 창: 아래 메뉴 바로 위에서 올라온다. 위쪽 회색 막대를 끌어 내리거나 바깥(섬)을 누르면 닫힌다 */
body.acct main > section.view:not(.island-view) { position: fixed; left: 0; right: 0; bottom: var(--tabs-h, 56px); z-index: 5; margin: 0 auto; max-width: 640px;
  top: var(--top-h, 96px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface);   /* 10/7 사용자: 지도 화면을 100% 덮게 — 머리줄 아래부터 아래 메뉴 위까지 */
  border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px var(--shadow); padding: 0 16px 16px; transform: translateY(var(--drag-y, 0)); transition: transform .2s ease; }
body.acct main > section.view.dragging { transition: none; }
.sheet-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: center; align-items: center; height: 36px; margin: 0 -16px 4px;
  background: var(--surface); cursor: pointer; touch-action: none; }
.sheet-bar::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--line); }
body:not(.acct) .sheet-bar { display: none; }
.sheet-shade { position: fixed; left: 0; right: 0; top: var(--top-h, 96px); bottom: var(--tabs-h, 56px); z-index: 4; background: var(--scrim); }
#hold-list .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
/* 홈 화면(계좌 단추가 없을 때)에도 원·달러 단추는 오른쪽(10/7) */
.top .acct-btn[hidden] ~ .cur-btn { margin-left: auto; }
/* 계좌 목록 맨 위 계좌 합산 섬 카드(10/7) */
.all-island { display: flex; align-items: center; gap: 4px; width: 100%; margin: 0 0 10px; padding: 12px 14px; text-align: left;
  background: var(--sea); border: 1.5px solid var(--brand); border-radius: 12px; color: var(--text); }
.all-island-name { font-weight: 700; }
.all-island .acct-go { margin-left: auto; }
/* 레벨(10/7): 레벨마다 바다색 — 계좌·계좌 합산 섬의 레벨을 따른다 */
body.lv-2 { --sea: var(--sea-lv2); }
body.lv-3 { --sea: var(--sea-lv3); }
body.lv-4 { --sea: var(--sea-lv4); }
body.lv-5 { --sea: var(--sea-lv5); }
/* 경험치 막대: 섬 화면 맨 위. 지도 단추·안내·미니맵은 그 아래로 */
.isl-level { position: absolute; top: 6px; left: 10px; right: 10px; z-index: 4; padding: 6px 10px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 1px 6px var(--shadow); }
.isl-lv-top { display: flex; align-items: baseline; gap: 8px; font-size: calc(13px * var(--fs)); }
.isl-lv-top b { color: var(--brand); font-size: calc(15px * var(--fs)); }
.isl-lv-text { color: var(--text-sub); }
.isl-lv-bar { height: 8px; margin-top: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.isl-lv-fill { height: 100%; width: calc(var(--p, 0) * 100%); background: var(--brand); border-radius: 4px; transition: width .6s ease; }
.isl-tools { top: 62px; }
.isl-hint { top: 62px; }
.isl-map.isl-mini { top: 62px; }
/* 레벨 업 축하 */
.isl-levelup { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: var(--scrim); }
.isl-levelup[hidden] { display: none; }
.isl-levelup-card { width: min(86%, 320px); padding: 20px 18px 16px; text-align: center; background: var(--surface); border-radius: 16px; box-shadow: 0 8px 24px var(--shadow); }
.isl-levelup-big { margin: 0 0 6px; font-size: calc(24px * var(--fs)); font-weight: 800; color: var(--brand); }
.isl-levelup-text { margin: 0 0 14px; color: var(--text); line-height: 1.6; white-space: pre-line; }
/* 고르기 창(10/7): 계좌·기록 목록 */
.pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; margin: 8px 0 12px; overscroll-behavior: contain; }
.pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; text-align: left;
  border-left: 5px solid var(--acct-c, var(--brand)); }
.pick-item .sub { font-size: calc(13px * var(--fs)); }
.tabs.nav2 { grid-template-columns: repeat(2, 1fr); }
/* 섬 좌우 넘기기(10/7): 화면 가장자리 삼각형 + 섬이 밀려 나가고 다음 섬이 들어온다 */
.isl-nav { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 40px; min-height: 64px; padding: 0;
  border: 0; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--brand);
  font-size: calc(18px * var(--fs)); box-shadow: 0 1px 6px var(--shadow); }
.isl-nav-l { left: 6px; }
.isl-nav-r { right: 6px; }
.isl-where { position: absolute; left: 50%; bottom: 10px; z-index: 4; transform: translateX(-50%); margin: 0; padding: 4px 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-sub); font-size: calc(13px * var(--fs)); white-space: nowrap; }
/* 떠나는 섬(10/7): 다음 섬 아래에 깔려 함께 밀려 나간다 */
.isl-ghost { pointer-events: none; }
/* 섬 화면 위쪽 정리(10/7 사용자: "중요도와 계층 구조에 맞게") — ① 이동(계좌 목록·계좌) ② 화면 이름 ③ 섬 상태(레벨) ④ 지도 보기 조절 */
body.acct .top .who { display: none; }          /* 앱 공통 안내는 홈·설정에서만 */
.isl-tools { justify-content: space-between; align-items: center; flex-wrap: nowrap; }
.isl-seg { display: flex; border: 1.5px solid var(--brand); border-radius: 999px; overflow: hidden; background: var(--surface); }
.isl-seg button { min-height: 36px; padding: 4px 14px; border: 0; border-radius: 0; background: transparent; color: var(--brand); font-weight: 600; }
.isl-seg button.on { background: var(--brand); color: var(--brand-ink); }
.isl-shape { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--text-sub); font-size: calc(13px * var(--fs)); }
.isl-tools { left: 10px; right: 10px; }
/* 안내소 아이콘(10/7): 섬 화면 왼쪽 위 구석(레벨 창 아래). 2D 에서는 비중 토글 줄 아래 */
.isl-help { position: absolute; top: 62px; left: 10px; z-index: 4; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 1px 6px var(--shadow);
  font-size: calc(18px * var(--fs)); line-height: 1; }
.isl-help[hidden] { display: none; }
/* (10/7) 안내 아이콘은 2D·3D 모두 같은 자리 — 2D 비중 토글은 가운데로 */
.isl-help.isl-wait { visibility: hidden; }
/* 안내 팝업 자리 통일(10/7 사용자: "2D·3D 모두 위쪽으로") — 레벨 창·비중 토글 줄 아래 같은 높이 */
.isl-hint, .isl-hint.isl-hint-low { top: 106px; bottom: auto; }
/* 안내소 아이콘 = 원형 테두리 안 i(10/7 사용자 지정) */
.isl-help { border: 2px solid var(--brand); color: var(--brand); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: calc(19px * var(--fs)); }
/* 비중 토글은 가운데, 섬 모양은 오른쪽 끝, 왼쪽 끝은 안내 아이콘 자리(10/7 사용자: "현재·목표를 가운데로 — 안내 아이콘이 늘 같은 자리에") */
.isl-tools { justify-content: center; }
.isl-tools .isl-shape { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.isl-tools .isl-shape { width: 36px; padding: 0; border-radius: 50%; font-size: calc(17px * var(--fs)); }   /* 좁은 화면에서도 가운데 토글과 안 겹치게 아이콘만 */
.isl-lv-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* 레벨 창은 늘 한 줄 — 아래 줄(안내·토글) 자리 고정 */
/* 섬 화면 머리줄(10/7): 왼쪽 위 제목 · 오른쪽 위 계좌 단추 한 줄 */
body.acct .top h1 { order: 0; flex: 1 1 auto; margin: 0; min-width: 0; }
/* 고르기 창 가독성(10/7): 칸이 줄어 글이 잘리던 것 — 줄지 않게, 윗줄 날짜·금액 / 아랫줄 설명 */
.pick-list { gap: 10px; }
.pick-item { flex: none; height: auto; min-height: 60px; padding: 12px 14px; gap: 4px; white-space: normal; line-height: 1.4; border-radius: 12px; }
.pick-top { display: flex; align-items: center; gap: 8px; width: 100%; }
.pick-label { font-size: calc(16px * var(--fs)); }
.pick-amt { margin-left: auto; font-weight: 700; font-size: calc(16px * var(--fs)); font-variant-numeric: tabular-nums; }
.pick-badge { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: calc(12px * var(--fs)); font-weight: 700; }
.pick-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-sub); }
body.acct main > section.view.closing { pointer-events: none; transition: none; }   /* 내려가며 닫히는 창(10/7) */
/* 섬 화면 원·달러 단추(10/7): 안내 아이콘 바로 아래, 같은 크기. 안내 팝업은 그 아래 줄로 */
.isl-help.isl-cur { top: 106px; font-family: inherit; font-style: normal; font-size: calc(17px * var(--fs)); }
.isl-help.isl-cur.on { background: var(--brand); color: var(--brand-ink); }
.isl-help.isl-cur:disabled { opacity: .4; }
.isl-hint, .isl-hint.isl-hint-low { top: 150px; }
/* 안내 팝업(10/7 사용자: "정 중앙으로 — 닫도록 유도, 글씨 12pt") — 섬 화면 한가운데, 본문 16px(=12pt) */
.isl-hint, .isl-hint.isl-hint-low { top: 50%; bottom: auto; transform: translate(-50%, -50%); font-size: calc(16px * var(--fs)); padding: 12px 16px; }
.isl-hint .close-tip { font-size: calc(13px * var(--fs)); margin-top: 6px; }
/* 보관한 계좌 카드(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; }
/* 처음 켤 때 로딩 화면(10/8) */
.splash { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: var(--sea); }
.splash[hidden] { display: none; }
.splash-in { width: min(86%, 360px); text-align: center; }
.splash-isle { position: relative; height: 150px; margin-bottom: 8px; }
.splash-island { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 88px; animation: splash-bob 2.4s ease-in-out infinite; }
.splash-sun { position: absolute; right: 18%; top: 0; font-size: 36px; animation: splash-spin 12s linear infinite; }
.splash-wave { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 40px; letter-spacing: -6px; animation: splash-wave 1.8s ease-in-out infinite; }
@keyframes splash-bob { 0%, 100% { transform: translate(-50%, 0) rotate(-2deg); } 50% { transform: translate(-50%, -8px) rotate(2deg); } }
@keyframes splash-wave { 0%, 100% { transform: translate(-56%, 0); } 50% { transform: translate(-44%, 0); } }
@keyframes splash-spin { to { transform: rotate(360deg); } }
.splash-title { margin: 0; font-size: calc(30px * var(--fs)); font-weight: 800; color: var(--brand); }
.splash-sub { margin: 4px 0 22px; color: var(--text-sub); }
.splash-bar { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--surface) 70%, transparent); overflow: hidden; }
.splash-fill { height: 100%; width: calc(var(--p, 0) * 100%); background: var(--brand); border-radius: 5px; transition: width .3s ease; }
.splash-msg { min-height: 2.8em; margin: 10px 0 14px; color: var(--text-sub); font-size: calc(14px * var(--fs)); }
.splash .linklike { margin-top: 8px; }
/* 소개 3장(10/8): 옆으로 넘김 */
.intro { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; background: var(--bg); padding: 24px 16px 20px; }
.intro[hidden] { display: none; }
.intro-pages { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.intro-pages::-webkit-scrollbar { display: none; }
.intro-page { flex: 0 0 100%; min-width: 0; box-sizing: border-box; word-break: keep-all; overflow-wrap: break-word; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 0 8px; }
.intro-art { font-size: 96px; margin-bottom: 18px; }
.intro-page h2 { margin: 0 0 10px; font-size: calc(22px * var(--fs)); color: var(--text); }
.intro-page p { margin: 0; color: var(--text-sub); line-height: 1.7; font-size: calc(16px * var(--fs)); }
.intro-dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0; }
.intro-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.intro-dots span.on { background: var(--brand); width: 22px; border-radius: 4px; }
/* 따라 하기 안내 카드(10/8): 아래 메뉴 바로 위 */
.coach { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabs-h, 56px) + 10px); z-index: 8; max-width: 620px; margin: 0 auto;
  padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--brand); box-shadow: 0 6px 20px var(--shadow); }
.coach[hidden] { display: none; }
.coach-step { margin: 0 0 4px; color: var(--brand); font-weight: 700; font-size: calc(13px * var(--fs)); }
.coach-text { margin: 0 0 10px; line-height: 1.6; }
.intro-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; }
.intro-btns button { width: 100%; margin: 0; }
.intro-btns .intro-off { visibility: hidden; }
.intro-btns .intro-skip { border-color: transparent; background: transparent; color: var(--text-sub); }
/* 쉬운 모드(10/8 사용자 승인): 어려운 기능은 숨긴다(지우지 않음 — 설정 「고급 모드」에서 다시 보임). 숨긴 칸의 값은 기본값 그대로 쓰인다 */
body.easy #px-box, body.easy #cash-usd, body.easy #caps-box, body.easy #min-cash-form, body.easy #band-form, body.easy #drafts-box, body.easy #div-box, body.easy #div-tax-label,
body.easy #tax-card, body.easy #mail-open, body.easy #copy-box, body.easy #hist-copy, body.easy #cur-btn, body.easy #isl-cur-btn,
body.easy #all-island, body.easy #acct-add-row, body.easy #mn-fx-label, body.easy #mn-cost-row { display: none; }
.mode-seg { display: flex; border: 1.5px solid var(--brand); border-radius: 999px; overflow: hidden; width: fit-content; }
.mode-seg button { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 0; background: transparent; color: var(--brand); font-weight: 600; }
.mode-seg button.on { background: var(--brand); color: var(--brand-ink); }
/* 오늘 성장 확인(10/8): 레벨 카드 둘째 줄 — 카드가 한 줄 높아진 만큼 아래 단추·미니맵·안내 자리를 내림 */
.isl-grow-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.isl-grow-text { flex: 1; min-width: 0; color: var(--text); font-size: calc(13px * var(--fs)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow-btn { flex: none; min-height: 32px; padding: 2px 12px; border-radius: 999px; font-size: calc(13px * var(--fs)); font-weight: 700; }
.grow-btn:disabled { opacity: 1; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.isl-tools { top: 100px; }
.isl-map.isl-mini { top: 100px; }
.isl-help { top: 100px; }
.isl-help.isl-cur { top: 144px; }
/* 아래 메뉴 5칸(10/8): 그림 + 글자 두 줄 */
.tabs.nav5 { grid-template-columns: repeat(5, 1fr); }
.tabs.nav5 button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 8px; font-size: calc(12px * var(--fs)); }
.tabs.nav5 .tab-ic { font-size: calc(20px * var(--fs)); line-height: 1.1; }
.hold-history { margin: 4px 0 10px; }
/* 도감·용어 카드·배지·연습 섬(10/8 3단계) */
.isl-help.isl-dex { top: 188px; font-family: inherit; font-style: normal; font-size: calc(17px * var(--fs)); }
body.easy .isl-help.isl-dex { top: 144px; }
.dex-line { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.dex-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dex-grid li { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px 4px; text-align: center; font-size: calc(12px * var(--fs)); }
.dex-grid li button { all: unset; display: block; width: 100%; cursor: pointer; }
.dex-ic { display: block; font-size: calc(28px * var(--fs)); line-height: 1.2; }
.dex-grid li.locked { opacity: .45; }
.dex-grid.badges li { padding: 8px 4px; }
.dex-grid li.mastered { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.dex-grid .dex-star { display: block; color: var(--brand); font-weight: 700; }
.cd-icon { font-size: calc(44px * var(--fs)); text-align: center; }
.cd-ex { background: var(--bg); border-radius: 10px; padding: 8px 10px; }
.cd-quiz { margin: 10px 0; }
.cd-opts { display: grid; gap: 6px; margin: 8px 0; }
.cd-opts button.right { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.cd-opts button.wrong { opacity: .5; }
.guardian p { margin: 0 0 8px; }
.pr-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabs-h, 56px) + 44px); z-index: 4; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: 0 4px 16px var(--shadow); }
.pr-news { margin: 0 0 8px; font-size: calc(14px * var(--fs)); }
.pr-row { display: flex; align-items: center; gap: 8px; }
.pr-row .sub { flex: 1; }
/* 쉽게 정하기(10/8) */
.tmpl-list { display: grid; gap: 8px; margin-top: 8px; }
.tmpl-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; }
.tmpl-box .barhead { margin-bottom: 0; }
.err-log { white-space: pre-wrap; word-break: break-all; font-size: calc(11px * var(--fs)); color: var(--text-sub); }
/* 처음 화면 바닥판·화면 바뀜(10/8): 로딩 → 고지 → 소개 내내 앱이 보이지 않게, 서서히 넘어가게 */
.onb-stage { position: fixed; inset: 0; z-index: 24; background: var(--sea); }
.onb-stage[hidden] { display: none; }
.splash.fading { animation: onb-out .25s ease forwards; }
.intro:not([hidden]) { animation: onb-in .25s ease; }
@keyframes onb-out { to { opacity: 0; } }
@keyframes onb-in { from { opacity: 0; } to { opacity: 1; } }
/* 따라 하기: 대상만 밝게(둘레를 어둡게), 번호 동그라미, 말풍선은 대상 위 또는 아래 */
.tour { position: fixed; inset: 0; z-index: 22; pointer-events: none; }
.tour[hidden] { display: none; }
/* 밝은 창(둘레를 어둡게 하는 그림자)과 파란 테두리(::after)는 한 상자 — 다음 단계로 갈 때 둘이 함께 모양·크기를 바꾸며 옮겨 간다(10/8 사용자) */
.tour-ring { position: fixed; left: var(--tx, 0); top: var(--ty, 0); width: var(--tw, 0); height: var(--th, 0); border-radius: 12px;
  box-shadow: 0 0 0 9999px var(--scrim); transition: left .5s cubic-bezier(.4, 0, .2, 1), top .5s cubic-bezier(.4, 0, .2, 1), width .5s cubic-bezier(.4, 0, .2, 1), height .5s cubic-bezier(.4, 0, .2, 1); }
.tour-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--brand); transition: opacity .3s;
  animation: tour-pulse 1.4s ease-in-out infinite; }
.tour-ring.snap { transition: none; }
.tour-ring .tour-num { z-index: 1; transition: opacity .3s; }   /* 테두리(::after)보다 위에 — 번호가 반쯤 가려졌음(10/8 휴대폰) */
.tour-ring.pop .tour-num { animation: tour-in .4s ease-out; }
.tour-ring.num-x .tour-num { left: 4px; }
.tour-ring.num-y .tour-num { top: 4px; }
body.tour-instant .tour-wait, body.tour-instant #isl-area > *, body.tour-instant #nav-main button { transition: none !important; }   /* 따라 하기 시작: 숨길 단추는 바로 숨김 */
.tour-ring.none::after, .tour-ring.none .tour-num { opacity: 0; }
@keyframes tour-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.tour-num { position: absolute; left: -12px; top: -12px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--brand); color: var(--brand-ink);
  font-weight: 800; font-size: calc(14px * var(--fs)); line-height: 26px; text-align: center; }
@keyframes tour-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--brand); } 50% { box-shadow: 0 0 0 7px var(--brand); } }
.tour-tip { position: fixed; left: 12px; right: 12px; top: var(--tipy, 30%); max-width: 520px; margin: 0 auto; pointer-events: auto;
  background: var(--surface); color: var(--text); border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 24px var(--shadow);
  transition: opacity .3s ease, transform .3s ease; }
.tour-tip.tour-out { opacity: 0; transform: translateY(10px); pointer-events: none; }
.tour-step { margin: 0 0 4px; color: var(--brand); font-weight: 700; font-size: calc(13px * var(--fs)); }
.tour-text { margin: 0 0 10px; line-height: 1.6; font-size: calc(15px * var(--fs)); }
.tour-btns { display: flex; gap: 6px; justify-content: flex-end; }
.tour-btns .primary { margin-left: auto; }
.tour-btns #tour-prev { margin-left: auto; }   /* 이전·다음은 오른쪽에 나란히(10/8) */
.tour-btns #tour-prev:not([hidden]) + .primary { margin-left: 0; }
body.touring .isl-hint { display: none; }
/* 오늘의 퀴즈(10/8) */
.quiz-q { margin: 6px 0 4px; font-weight: 700; line-height: 1.5; }
.quiz-pts { font-weight: 800; color: var(--brand); }
.pt-log li { display: flex; justify-content: space-between; gap: 8px; }
.isl-help.isl-dex.has-dot::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--btn-danger-bg); box-shadow: 0 0 0 2px var(--surface); }
.quiz-card { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.shop-list li { display: flex; align-items: center; gap: 8px; }
.shop-list .shop-ic { width: 40px; height: 40px; flex: none; }
.shop-list .shop-name { flex: 1; min-width: 0; }
.shop-h { margin: 12px 0 4px; font-size: calc(15px * var(--fs)); }
.shop-card { border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }
/* 연습 섬 따라 하기: 아직 설명 전인 단추는 숨김, 그 단계에서 나타남(10/8) */
body.touring .tour-wait { opacity: 0 !important; pointer-events: none !important; }
body.touring #isl-area > *, body.touring #nav-main button { transition: opacity .35s; }
/* 작은 지도 누름(10/8 사용자 「파란 네모 대신 눌린 걸 알게 애니메이션, 오래 누르면 떨리고 크기 변형 상태가 되면 멈춤」) */
.isl-map.isl-mini { transition: transform .12s ease-out; }
.isl-map.isl-mini.isl-press { transform: scale(.93); }
@media (prefers-reduced-motion: no-preference) {
  .isl-map.isl-mini.isl-shake { animation: isl-shake .14s linear infinite; }
}
@keyframes isl-shake { 0%, 100% { transform: scale(.93) rotate(-2deg); } 50% { transform: scale(.93) rotate(2deg); } }
.isl-map.isl-mini.isl-editing { transform: none; animation: none; }
.isl-empty { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 3; max-width: 420px; margin: 0 auto; text-align: center; }
.isl-empty-h { margin: 0 0 6px; font-weight: 800; font-size: calc(18px * var(--fs)); }
.isl-empty .wide { margin-top: 8px; }
body.no-island .isl-hint { display: none; }   /* 섬이 없을 땐 땅·막대 사용 안내 대신 위 안내만 */
/* 따라 하기 중 밝은 창 밖은 누를 수 없게(10/9 사용자) — 투명한 네 조각이 창 둘레를 덮는다. 말풍선 단추는 그 위라 눌린다 */
.tour-block { position: fixed; pointer-events: auto; background: transparent; touch-action: none; }
.tb-top { left: 0; right: 0; top: 0; height: var(--ty, 0); }
.tb-bot { left: 0; right: 0; top: calc(var(--ty, 0px) + var(--th, 0px)); bottom: 0; }
.tb-left { left: 0; width: var(--tx, 0); top: var(--ty, 0); height: var(--th, 0); }
.tb-right { left: calc(var(--tx, 0px) + var(--tw, 0px)); right: 0; top: var(--ty, 0); height: var(--th, 0); }
/* 따라 하기 「다른 계좌 카드를 눌러 봐요」: 카드 고르기(동그라미·빈 곳)만 — 기록 수정·보관·이름·명의 칸은 막음(10/9 사용자) */
body.tour-acct-pick #acct-list .act, body.tour-acct-pick #acct-list .edit-field, body.tour-acct-pick #acct-list .edit-wrap { opacity: .45; }   /* 누름은 app.js 에서 삼킴(카드 고르기로 새지 않게) */
/* 알림 남은 시간 막대: 파란 바탕 위라 흰색 */
.toast::after { background: var(--brand-ink); opacity: .55; }
/* 편지함(10/9 사용자) — 도감 아래 동그란 단추, 안 읽은 수 */
.isl-help.isl-mail { top: 232px; font-family: inherit; font-style: normal; font-size: calc(17px * var(--fs)); }
body.easy .isl-help.isl-mail { top: 188px; }
.mail-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--btn-danger-bg); color: var(--btn-danger-text);
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.mail-n[hidden] { display: none; }
.inbox-list li { display: block; }
.inbox-list .mail-at { display: block; color: var(--text-sub); font-size: calc(12px * var(--fs)); }
.toast-fly { position: fixed; z-index: 21; pointer-events: none; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .isl-help.isl-mail.bump { animation: mail-bump .45s ease-out; }
}
@keyframes mail-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* 알림 닫기(10/9 사용자): 누르면 편지함으로 날아감 */
.toast .toast-x { background: transparent; color: var(--brand-ink); border: 1.5px solid var(--brand-ink); border-radius: 50%; width: 32px; min-width: 32px; min-height: 32px; height: 32px; padding: 0; font-size: 15px; line-height: 1; }
.inbox-list li { display: flex; align-items: center; gap: 8px; }
.inbox-list .inbox-txt { flex: 1; min-width: 0; }
/* 섬 왼쪽 단추 줄(10/9 「i」 없앰·📅 퀴즈 따로): ₩(고급 모드만) → 📅 → 🏅 → 📬 */
.isl-help.isl-cur { top: 100px; }
.isl-help.isl-quiz { top: 144px; font-family: inherit; font-style: normal; font-size: calc(17px * var(--fs)); }
.isl-help.isl-dex { top: 188px; }
.isl-help.isl-mail { top: 232px; }
body.easy .isl-help.isl-quiz { top: 100px; }
body.easy .isl-help.isl-dex { top: 144px; }
body.easy .isl-help.isl-mail { top: 188px; }
.isl-help.isl-quiz.has-dot::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--btn-danger-bg); box-shadow: 0 0 0 2px var(--surface); }
/* 상점 단추·지금 포인트(10/9 사용자 「상점 아이콘·현재 포인트 칸, 위치는 네가」): 왼쪽 줄 📅 아래 🛍️, 포인트는 레벨 카드 윗줄 오른쪽 */
.isl-help.isl-shop { top: 188px; font-family: inherit; font-style: normal; font-size: calc(17px * var(--fs)); }
.isl-help.isl-dex { top: 232px; }
.isl-help.isl-mail { top: 276px; }
body.easy .isl-help.isl-shop { top: 144px; }
body.easy .isl-help.isl-dex { top: 188px; }
body.easy .isl-help.isl-mail { top: 232px; }
.isl-pts { margin-left: auto; flex: none; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--brand); background: var(--surface); color: var(--brand);
  font-weight: 800; font-size: calc(13px * var(--fs)); font-variant-numeric: tabular-nums; align-self: center; }
.isl-pts.bump { animation: mail-bump .45s ease-out; }