:root{--bg:#0d1117;--surface:#161b22;--surface2:#21262d;--border:#30363d;
  --text:#e6edf3;--muted:#8b949e;--green:#3fb950;--red:#f85149;
  --blue:#58a6ff;--purple:#bc8cff;--gold:#e3b341;--accent:#1f6feb}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--text);font-family:-apple-system,'Segoe UI',sans-serif;
  font-size:14px;max-width:430px;margin:0 auto;min-height:100vh;padding-bottom:130px}

/* sub-nav은 bottom-nav 내부 flex 자식 — fixed 포지셔닝 없음 */
.sub-nav-float{width:100%;display:flex;overflow:hidden;scrollbar-width:none;
  background:var(--surface2);height:0;opacity:0;pointer-events:none;
  transition:height .18s ease,opacity .18s ease}
.sub-nav-float::-webkit-scrollbar{display:none}
.sub-nav-float.visible{height:42px;overflow-x:auto;overflow-y:hidden;opacity:1;pointer-events:auto}
@keyframes _pgFade{from{opacity:0}to{opacity:1}}
.page.active{animation:_pgFade .12s ease}
.stab{padding:10px 16px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;
  font-size:13px;white-space:nowrap;user-select:none}
.stab.active{color:var(--blue);border-bottom-color:var(--blue)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:100;background:var(--surface);
  border-top:1px solid var(--border);display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.bn-title{text-align:center;padding:5px 0 0;font-size:8px;font-weight:700;
  color:var(--muted);letter-spacing:2.5px;opacity:.45;pointer-events:none}
.bn-tabs{display:flex;width:100%}
.btab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 0 10px;cursor:pointer;color:var(--muted);font-size:10px;font-weight:600;
  letter-spacing:.4px;user-select:none;transition:color .15s}
.btab.active{color:var(--blue)}
.btab svg{width:22px;height:22px}

.page{display:none;padding:16px;position:relative}
.page.active{display:block}
.auth-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;
  justify-content:flex-start;flex-direction:column;gap:10px;padding-top:28px;
  background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(4px)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px}
.card-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}

/* TOTAL */
.total-card{background:linear-gradient(135deg,var(--surface2),var(--surface));
  border:1px solid color-mix(in srgb,var(--border) 60%,var(--text) 12%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 2px 8px rgba(0,0,0,0.18);
  border-radius:12px;padding:16px 20px;margin-bottom:12px}
.total-label{font-size:11px;color:var(--muted);margin-bottom:6px;letter-spacing:.4px}
.total-body{display:flex;align-items:center;gap:12px}
.total-data{flex:1;min-width:0}
.total-amount{font-size:26px;font-weight:700;letter-spacing:-1px;line-height:1.1}
.total-usd{font-size:12px;color:var(--muted);margin-top:4px}
.total-pnl{font-size:12px;font-weight:600;margin-top:5px}
.total-pnl.up{color:var(--green)}.total-pnl.dn{color:var(--red)}.total-pnl.flat{color:var(--muted)}
.total-spark{flex:0 0 120px;height:55px;display:flex;align-items:center}
.mi-strip{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mi-chip{display:flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:12px}
.mi-chip-label{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;margin-right:2px}
.mi-chip-val{font-weight:700;color:var(--text)}
.mi-chip-chg{font-size:10px;font-weight:600}
.mi-chip-chg.up{color:var(--green)}.mi-chip-chg.dn{color:var(--red)}.mi-chip-chg.flat{color:var(--muted)}

/* CAT */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px}
.cat-card.pos-glow{border-color:var(--green)}
.cat-card.neg-glow{border-color:var(--red)}
.cat-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.cat-amount{font-size:15px;font-weight:600}
.cat-row{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.cat-pct{font-size:11px;color:var(--muted)}
.up{color:var(--green)}.dn{color:var(--red)}

/* ALLOC */
.alloc-wrap{display:flex;gap:14px;align-items:center}
.donut-wrap{flex-shrink:0;width:120px;height:120px}
.alloc-legend{flex:1;display:flex;flex-direction:column;gap:9px}
.legend-row{display:flex;align-items:center;gap:8px}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend-name{flex:1;font-size:13px}
.legend-pct{font-size:12px;color:var(--muted);min-width:36px;text-align:right}

/* TICKER ROWS */
.ticker-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.ticker-row:last-child{border-bottom:none}
.ticker-badge{width:38px;height:38px;border-radius:10px;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.ticker-info{flex:0 0 160px;min-width:0}
.ticker-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker-sub{font-size:11px;color:var(--muted);margin-top:1px}
.ticker-val{font-size:13px;font-weight:500;margin-top:2px}
.ticker-chg{font-size:11px;font-weight:600;margin-top:1px}
.ticker-spark{flex:1;height:45px;display:flex;align-items:center;justify-content:flex-start}

/* EDIT CARDS */
.ticker-edit-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
.ticker-edit-hdr{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface2)}
.edit-hdr-badge{width:32px;height:32px;border-radius:8px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;font-weight:700}
.edit-hdr-name{font-weight:700;font-size:14px;flex:1}
.edit-hdr-qty{font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.edit-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border)}
.edit-row-name{font-size:13px;font-weight:500;flex:1}
.exch-tag{font-size:10px;padding:3px 7px;border-radius:5px;background:var(--surface2);color:var(--muted)}
input[type=number]{background:var(--surface2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);font-size:15px;padding:8px 10px;width:100px;text-align:right;outline:none}
input[type=number]:focus{border-color:var(--blue)}
.section-hdr{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;padding:14px 0 8px}

/* PLAN */
.budget-box{background:var(--surface2);border-radius:10px;padding:14px;margin-bottom:12px}
.budget-top-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.budget-label{font-size:12px;color:var(--muted)}
.budget-val-row{display:flex;align-items:baseline;gap:4px}
.budget-unit{font-size:13px;color:var(--muted)}
.bar-track{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:6px}
.bar-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .3s}
.budget-stat{display:flex;justify-content:space-between}
.budget-stat span{font-size:11px;color:var(--muted)}
.ok{color:var(--green)!important}.over{color:var(--red)!important}
.months-row{display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:12px}
.months-label{flex:1;font-size:13px;font-weight:500}
.months-sub{font-size:11px;color:var(--muted)}
.plan-cat-hdr{font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.6px;padding:6px 2px 4px;margin-top:4px}
.plan-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:12px}
.plan-row{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border)}
.plan-row:last-child{border-bottom:none}
.plan-info{flex:1;min-width:0}
.plan-ticker-line{display:flex;align-items:center;gap:6px}
.plan-ticker{font-size:14px;font-weight:600}
.plan-cur{font-size:11px;color:var(--muted)}
.plan-proj{font-size:12px;margin-top:6px;line-height:1.5}
.plan-proj .pv{color:var(--blue);font-weight:600}
.plan-proj .pq{color:var(--text)}
.plan-proj .pw{color:var(--purple);font-weight:600}
.weight-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:6px}
.weight-fill{height:100%;background:var(--purple);border-radius:2px;transition:width .3s}
.plan-input-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0}
.plan-input{width:64px;font-size:15px}
/* 누적 합계 카드 */
.proj-total{background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--border);
  border-radius:12px;padding:16px;margin-bottom:12px}
.proj-total-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.proj-total-amount{font-size:24px;font-weight:700;letter-spacing:-.5px}
.proj-total-sub{font-size:12px;color:var(--muted);margin-top:4px}
.proj-total-sub .add{color:var(--gold)}

/* SIMULATOR */
.sim-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
.sim-card-hdr{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface2)}
.sim-ticker-name{font-weight:700;font-size:14px;flex:1}
.sim-pct-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--surface2);color:var(--muted);transition:background .2s,color .2s}
.sim-body{padding:12px 14px}
.sim-price-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sim-price-label{font-size:12px;color:var(--muted);flex:1}
.sim-price-input{width:120px;font-size:16px;font-weight:600;text-align:right;
  background:var(--surface2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);padding:8px 10px;outline:none}
.sim-price-input:focus{border-color:var(--blue)}
.sim-price-unit{font-size:12px;color:var(--muted)}
.sim-months-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sim-months-label{font-size:12px;color:var(--muted);flex-shrink:0}
.sim-months-chips{display:flex;gap:6px;flex-wrap:wrap}
.sim-mo-chip{padding:6px 12px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;user-select:none}
.sim-mo-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
input[type=range].sim-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;
  background:var(--border);outline:none;margin-bottom:12px;cursor:pointer;display:block}
input[type=range].sim-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.4)}
input[type=range].sim-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--blue);cursor:pointer;border:2px solid var(--bg)}
.sim-value-row{display:flex;align-items:flex-start;justify-content:space-between}
.sim-value-label{font-size:12px;color:var(--muted)}
.sim-delta{font-size:11px;margin-top:3px;color:var(--muted);transition:color .2s}
.sim-value-amt{font-size:15px;font-weight:600;transition:color .2s}
.sim-total-card{background:linear-gradient(135deg,var(--surface2),var(--surface));
  border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
.sim-total-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sim-total-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.sim-reset-btn{font-size:11px;padding:4px 12px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);cursor:pointer}
.sim-total-amount{font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:4px;transition:color .2s}
.sim-total-delta{font-size:13px;transition:color .2s}
.sim-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.sim-chip{padding:6px 14px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;user-select:none}
.sim-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.sim-card-area{min-height:148px;margin-bottom:10px}

/* HISTORY */
.period-wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
/* 기간 프리셋이 늘어나면 줄바꿈으로 흘린다 — 버튼 글자가 세로로 쪼개지지 않게 */
.period-tabs{display:flex;gap:6px;flex-wrap:wrap}
.period-tab{background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  border-radius:7px;padding:8px 12px;font-size:12px;cursor:pointer;font-weight:500;white-space:nowrap}
.period-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* 기간 컨트롤 — 숫자 입력 줄 위/슬라이더 아래로 쌓기 위해 column */
.series-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.series-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.series-btn{background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  border-radius:7px;padding:6px 12px;font-size:12px;cursor:pointer}
.series-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* 카드 좌우 패딩(14px)을 차트에 돌려줘 그래프 폭을 넓게 쓴다.
   왼쪽은 6px만 돌려준다 — 축 눈금이 두 자리까지 늘어나면('3.69천만' 39.5px) 폭 48px 중
   여백을 빼고 5.5px밖에 안 남아 글자가 카드 테두리에 닿는다. 오른쪽은 끝점 이름표 자리다 */
.chart-container{position:relative;height:240px;margin-left:-6px;margin-right:-14px}
/* 가로 드래그는 차트가(기간 이동), 세로 드래그는 화면이 가져간다.
   auto 로 두면 브라우저가 첫 움직임에 이미 스크롤을 시작해 가로 팬이 끊긴다 */
.chart-container canvas{touch-action:pan-y}

/* 자산군 버튼 + 펼침 패널 */
.cat-btns{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 8px}
.cat-btn{display:inline-flex;align-items:center;gap:4px;background:var(--surface2);
  border:1px solid var(--border);color:var(--muted);border-radius:7px;
  padding:7px 13px;font-size:12px;font-weight:500;cursor:pointer}
.cat-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* 열림 링은 버튼이 칠해진 색을 따라간다 — accent 로 고정하면 음영은 노란데
   테두리만 청록으로 남아 따로 논다 */
.cat-btn.open{box-shadow:0 0 0 2px color-mix(in srgb,var(--btn-ring,var(--accent)) 45%,transparent)}
.cat-caret{font-size:9px;opacity:.75;transition:transform .15s}
.cat-btn.open .cat-caret{transform:rotate(180deg)}
.cat-panel{background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;margin-bottom:12px}
.cat-panel-title{font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.cat-panel-btns{display:flex;gap:6px;flex-wrap:wrap}
/* y축 선형/로그 — 좌우로 미끄러지는 2단 토글 */
.scale-toggle{position:relative;display:inline-flex;margin-left:auto;padding:2px;
  background:var(--surface2);border:1px solid var(--border);border-radius:7px;
  cursor:pointer;user-select:none;-webkit-user-select:none}
.scale-opt{position:relative;z-index:1;min-width:46px;text-align:center;
  padding:5px 10px;font-size:12px;font-weight:500;color:var(--muted);transition:color .18s}
/* 선택된 쪽만 흰 글자. nth-of-type 은 .scale-thumb 도 span 이라 같이 세므로 쓰지 않는다 */
.scale-toggle [data-scale="lin"]{color:#fff}
.scale-toggle.log [data-scale="lin"]{color:var(--muted)}
.scale-toggle.log [data-scale="log"]{color:#fff}
.scale-thumb{position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);
  background:var(--accent);border-radius:5px;transition:transform .18s ease}
.scale-toggle.log .scale-thumb{transform:translateX(100%)}


/* PERIOD RETURN */
.hr-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.hr-table th{color:var(--muted);font-weight:500;text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);font-size:11px}
.hr-table td{padding:7px 8px;border-bottom:1px solid var(--surface2);white-space:nowrap}
.hr-table tr:last-child td{border-bottom:none}
.hr-name{font-weight:600}
.hr-sub{font-size:10px;color:var(--muted)}
.hr-note{color:var(--muted);font-size:10px;margin-top:8px;line-height:1.6}
/* 차트 범례만 한 줄 고정 — 내용이 없을 때도 자리를 유지해야 아래 자산군 버튼이
   종목을 켜고 끌 때마다 위아래로 튀지 않는다. (.hr-note는 공용이라 여기만 적용) */
#histUnitNote{min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 차트 읽는 법 — 접이식 가이드 */
.chart-guide{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.chart-guide>summary{list-style:none;cursor:pointer;color:var(--muted);font-size:11px;
  font-weight:600;letter-spacing:.3px;padding:2px 0;user-select:none}
.chart-guide>summary::-webkit-details-marker{display:none}
.chart-guide>summary::before{content:'▸';display:inline-block;margin-right:6px;transition:transform .15s}
.chart-guide[open]>summary::before{transform:rotate(90deg)}
.cg-body{font-size:11px;line-height:1.75;color:var(--muted);padding:6px 2px 2px}
.cg-body b{color:var(--text);font-weight:600}
.cg-body i{font-style:normal;color:var(--text);opacity:.75}
.cg-body p{margin:4px 0}
.cg-body ul{margin:4px 0 8px;padding-left:16px}
.cg-body li{margin:3px 0}
.cg-h{color:var(--text);font-size:11px;font-weight:700;margin:12px 0 4px;
  padding-bottom:3px;border-bottom:1px solid var(--surface2)}
.cg-h:first-child{margin-top:2px}
.cg-warn{color:var(--red);opacity:.85}
.cg-table{width:100%;border-collapse:collapse;margin:4px 0 8px}
.cg-table th{width:52px;text-align:left;vertical-align:top;color:var(--text);
  font-weight:600;padding:4px 8px 4px 0;white-space:nowrap}
.cg-table td{padding:4px 0;vertical-align:top}
.cg-table tr+tr th,.cg-table tr+tr td{border-top:1px solid var(--surface2)}

/* CATEGORY DRILLDOWN */
.cat-card{cursor:pointer;transition:border-color .15s}
.cat-card:active{opacity:.8}
.cat-card.active-filter{border-color:var(--blue)}
.total-card{cursor:pointer}



/* SAVE */
.save-btn{background:var(--accent);color:#fff;border:none;border-radius:10px;
  padding:14px;font-size:15px;font-weight:600;cursor:pointer;width:100%;margin-top:4px;min-height:50px}
.save-btn:active{opacity:.8}
.save-btn:disabled{opacity:.5;cursor:not-allowed}

/* LOADING */
.skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 50%,var(--surface2) 75%);
  background-size:200%;animation:sk 1.2s infinite;border-radius:6px}
@keyframes sk{0%{background-position:200%}100%{background-position:-200%}}
.sk-line{height:16px;margin-bottom:8px}
.sk-big{height:32px;width:60%;margin-bottom:8px}

.toast{position:fixed;bottom:82px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#000;padding:10px 20px;border-radius:8px;
  font-weight:600;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:999;white-space:nowrap}
.toast.show{opacity:1}
.err-toast{background:var(--red);color:#fff}

/* INFO POPUP */
.info-popup-overlay{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .15s}
.info-popup-overlay.show{opacity:1;pointer-events:auto}
.info-popup{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px;max-width:300px;width:85%;font-size:13px;line-height:1.7;color:var(--text);
  white-space:pre-line;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* 긴 가이드용 팝업 변형 */
.info-popup.rich{white-space:normal;max-width:340px;max-height:78vh;overflow-y:auto;
  overscroll-behavior:contain;font-size:12px;line-height:1.7;padding:18px}
/* 환율 차트 팝업 — VIX 가이드와 같은 .info-popup.rich 안에 들어간다 */
.fx-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:6px 0 10px}
.fx-cur{font-size:19px;font-weight:700;color:var(--text)}
.fx-chg{font-size:12px;font-weight:600}
.fx-chg.up{color:#f85149}.fx-chg.dn{color:#3788d8}.fx-chg.flat{color:var(--muted)}
.fx-hl{font-size:10.5px;color:var(--muted);margin-left:auto}
.fx-chart-wrap{position:relative;width:100%}
/* pan-y: 가로 문지르기는 차트(값 조회)가, 세로는 브라우저(팝업 스크롤)가 가져간다 */
.fx-chart{width:100%;height:180px;overflow:hidden;touch-action:pan-y}
.fx-tip{display:none;position:absolute;top:6px;left:8px;pointer-events:none;z-index:10;
  background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:5px 8px;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.fx-tip-t{font-size:10px;color:var(--muted);margin-bottom:1px;white-space:nowrap}
.fx-tip-v{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap}
.fx-load{display:flex;align-items:center;justify-content:center;height:100%;
  font-size:11.5px;color:var(--muted)}
.fx-range{display:flex;gap:5px;margin-top:9px}
.fx-rbtn{flex:1;padding:6px 0;border-radius:7px;font-size:11px;cursor:pointer;
  background:var(--surface2);color:var(--muted);border:1px solid transparent;transition:.15s}
.fx-rbtn.on{background:var(--surface);color:var(--text);border-color:var(--border);font-weight:600}
.ip-title{font-size:15px;font-weight:700;color:var(--text)}
.ip-sub{color:var(--muted);font-size:11px;margin:2px 0 4px;line-height:1.6}
.ip-h{font-size:11px;font-weight:700;color:var(--text);margin:14px 0 6px;
  padding-bottom:3px;border-bottom:1px solid var(--surface2)}
.ip-band{display:flex;gap:8px;align-items:baseline;padding:5px 7px;border-radius:6px;margin:1px 0}
.ip-band.on{background:var(--surface2);box-shadow:inset 0 0 0 1px var(--border)}
.ip-band-k{min-width:58px;font-size:11px;font-weight:700;white-space:nowrap}
.ip-band-v{font-size:11px;color:var(--muted);line-height:1.55}
.ip-band.on .ip-band-v{color:var(--text)}
.ip-body{font-size:11.5px;color:var(--muted);line-height:1.7}
.ip-body b{color:var(--text);font-weight:600}
.ip-body ul{margin:4px 0 0;padding-left:15px}
.ip-body li{margin:4px 0}
.ip-warn{margin-top:12px;padding:8px 10px;border-radius:7px;background:var(--surface2);
  color:var(--muted);font-size:11px;line-height:1.65}
.ip-warn b{color:var(--red)}
.ip-close{width:100%;margin-top:14px;padding:9px;border-radius:8px;background:var(--surface2);
  border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:600;cursor:pointer}
.mi-chip.tappable{cursor:pointer}
.mi-chip-info{color:var(--muted);font-size:10px;opacity:.7;margin-left:1px}

/* TICKER MODAL */
.ticker-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;
  background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s}
.ticker-modal.open{opacity:1;pointer-events:auto}
.ticker-modal-inner{width:100%;max-height:82vh;background:var(--surface);
  border-radius:18px 18px 0 0;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.ticker-modal.open .ticker-modal-inner{transform:translateY(0)}
.tm-handle{width:100%;padding:14px 0 10px;cursor:grab;touch-action:none;background:transparent}
.tm-handle::after{content:'';display:block;width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto}
.tm-header{display:flex;align-items:center;gap:12px;padding:4px 16px 10px;touch-action:none;cursor:grab}
.tm-title{flex:1;min-width:0}
.tm-name{font-size:16px;font-weight:700}
.tm-price{font-size:12px;color:var(--muted);margin-top:2px}
.tm-close{display:none}
.tm-stats{display:flex;gap:8px;padding:0 16px 12px;flex-wrap:wrap}
.tm-stat{background:var(--surface2);border-radius:8px;padding:8px 12px;flex:1;min-width:90px}
.tm-stat-label{font-size:10px;color:var(--muted)}
.tm-stat-val{font-size:12px;font-weight:600;margin-top:2px}
.tm-periods{display:flex;align-items:center;gap:8px;padding:0 16px 12px}
.tm-n-input{width:48px;font-size:15px;font-weight:600;text-align:center;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  color:var(--fg);padding:5px 4px}
.tm-units{display:flex;gap:4px}
.tm-unit{background:var(--surface2);border:none;color:var(--muted);border-radius:8px;
  padding:6px 12px;font-size:12px;cursor:pointer;white-space:nowrap}
.tm-unit.active{background:var(--blue);color:#fff}
.tm-unit.disabled{opacity:.3;cursor:not-allowed}
.tm-ma-legend{display:flex;gap:10px;padding:0 16px 8px;flex-wrap:wrap}
.tm-ma-dot{display:inline-block;width:18px;height:2px;border-radius:1px;vertical-align:middle;margin-right:3px}
.tm-ma-label{font-size:10px;color:var(--muted)}
.tm-chart-wrap{padding:0 0 8px}
.tm-loading{font-size:13px;color:var(--muted);text-align:center;padding:40px 0}
#tmCandleChart{height:220px;touch-action:none}
#tmRsiChart{height:80px;touch-action:none}
/* 전체화면 버튼 — 차트 안이 아니라 MA 범례 줄 오른쪽 빈자리에 얹는다 */
#pfFsBtn{position:absolute;top:-26px;right:2px;z-index:10;background:rgba(22,27,34,.7);
  border:1px solid var(--border);border-radius:4px;color:var(--muted);font-size:13px;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#pfChartFsWrap:fullscreen #pfFsBtn,#pfChartFsWrap:-webkit-full-screen #pfFsBtn{top:6px;right:6px}
#pfChartFsWrap:-webkit-full-screen{background:var(--bg);padding:12px;gap:6px;height:100vh;box-sizing:border-box}
#pfChartFsWrap:-webkit-full-screen .tm-chart-wrap{flex:1;min-height:0;padding:0}
#pfChartFsWrap:-webkit-full-screen #tmCandleChart{height:100%!important}
#pfChartFsWrap:-webkit-full-screen #tmRsiChart{height:80px!important;flex-shrink:0;margin-left:0;width:100%}
#pfChartFsWrap:fullscreen{background:var(--bg);padding:12px;gap:6px;height:100vh;box-sizing:border-box}
#pfChartFsWrap:fullscreen .tm-chart-wrap{flex:1;min-height:0;padding:0}
#pfChartFsWrap:fullscreen #tmCandleChart{height:100%!important}
#pfChartFsWrap:fullscreen #tmRsiChart{height:80px!important;flex-shrink:0;margin-left:0;width:100%}
/* 하루 10% 이상 움직인 종목 (app-dashboard.js BIG_MOVE) — 행만 카드처럼 떠오르게 */
.ticker-row.big-move{padding-left:10px;padding-right:10px;border-radius:10px;
  border-bottom-color:transparent;margin:3px 0}
.ticker-row.big-up{box-shadow:0 0 0 1px var(--green),
  0 0 14px -3px color-mix(in srgb,var(--green) 70%,transparent)}
.ticker-row.big-dn{box-shadow:0 0 0 1px var(--red),
  0 0 14px -3px color-mix(in srgb,var(--red) 70%,transparent)}
.ticker-row.clickable{cursor:pointer}
.ticker-row.clickable:active{background:var(--surface2);border-radius:8px}
.alloc-toggle-btn{background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;font-weight:500}
.alloc-toggle-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.at-acc{border-bottom:1px solid var(--border)}
.at-acc:last-child{border-bottom:none}
.at-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 0}
.at-acc summary::-webkit-details-marker{display:none}
.at-acc-ticker{font-weight:800;font-size:14px;min-width:52px}
.at-acc-tag{font-size:9px;padding:2px 6px;border-radius:7px;background:var(--surface2);color:var(--muted)}
.at-acc-tag.trail{color:var(--gold)}
.at-acc-eval{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
.at-acc-pnl{margin-left:10px;font-weight:700;font-size:13px}
.at-acc-chev{color:var(--muted);font-size:11px;transition:transform .15s}
.at-acc[open] .at-acc-chev{transform:rotate(90deg)}
.at-acc-body{padding:0 0 18px 62px;cursor:pointer}
.at-acc-body .at-meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.at-gauge-wrap{position:relative;margin-top:30px}
.at-cur-label{position:absolute;top:-26px;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;background:var(--surface2);border:1px solid var(--border);padding:2px 8px;border-radius:6px}
.at-progress-track{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(248,81,73,.55),var(--surface2) 50%,rgba(63,185,80,.55))}
.at-progress-dot{position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--bg);box-shadow:0 0 0 1px #fff;z-index:2}
.at-progress-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:9px}
.at-progress-labels span b{color:var(--text)}
.at-overshoot-flag{display:inline-block;font-size:9px;color:var(--gold);background:rgba(227,179,65,.15);border-radius:6px;padding:2px 6px;margin-left:6px}
.at-stat-block{background:var(--surface2);border-radius:10px;padding:10px 12px}
.at-stat-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.at-stat-value{font-size:16px;font-weight:700}
.at-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rl-card{padding:0}
.rl-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px}
.rl-card summary::-webkit-details-marker{display:none}
.rl-card .rl-chev{color:var(--muted);font-size:11px;transition:transform .15s}
.rl-card[open] .rl-chev{transform:rotate(90deg)}
.rl-body{padding:0 16px 16px}
.rl-row{padding:8px 0;border-bottom:1px solid var(--border)}
.rl-row:last-child{border-bottom:none}
.rl-row-top{display:flex;align-items:center;gap:8px;font-size:12px}
.rl-time{margin-left:auto;color:var(--muted);font-size:10px}
.rl-badge{font-size:9px;padding:2px 6px;border-radius:7px;font-weight:700}
.rl-badge-ok{background:rgba(63,185,80,.15);color:var(--green)}
.rl-badge-skip{background:var(--surface2);color:var(--muted)}
.rl-badge-error{background:rgba(248,81,73,.15);color:var(--red)}
.rl-headline{font-weight:600}
.rl-detail{margin-top:2px;font-size:11px;color:var(--muted)}
.uss-sel{background:var(--surface2);border:1px solid var(--border);color:var(--text);
  padding:6px 8px;border-radius:4px;font-size:12px;min-width:130px}
.uss-pd{background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px}
.uss-pd.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── THEME SETTINGS ── */
.ts-section{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.6px;padding:18px 0 8px}
.ts-section:first-child{padding-top:4px}
.preset-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:2px}
.preset-pill{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
  padding:8px 9px;cursor:pointer;transition:border-color .15s,background .15s}
.preset-pill:active{opacity:.8}
.preset-pill.selected{border-color:var(--blue);background:var(--surface)}
.preset-pill-name{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-bottom:5px;letter-spacing:.2px}
.preset-swatches{display:flex;gap:3px}
.preset-swatch{width:13px;height:13px;border-radius:3px;flex-shrink:0}
.ts-user-row{display:flex;gap:7px;margin-bottom:2px}
.ts-user-pill{flex:1;background:var(--surface2);border:1.5px solid var(--border);
  border-radius:10px;padding:8px 9px;cursor:pointer;transition:border-color .15s}
.ts-user-pill.selected{border-color:var(--blue);background:var(--surface)}
.ts-user-pill-name{font-size:10px;font-weight:700;margin-bottom:5px;display:flex;
  align-items:center;gap:4px}
.ts-user-edit-btn{font-size:9px;color:var(--muted);padding:1px 5px;border-radius:4px;
  border:1px solid var(--border);background:transparent;cursor:pointer;margin-left:auto}
.ts-user-empty{font-size:10px;color:var(--muted);margin-top:3px}
.color-group-label{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:6px;margin-top:14px}
.color-row{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--border)}
.color-row:last-child{border-bottom:none}
.color-swatch-btn{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--border);
  cursor:pointer;padding:0;flex-shrink:0;position:relative;overflow:hidden}
.color-swatch-btn input[type=color]{position:absolute;inset:-4px;width:calc(100%+8px);
  height:calc(100%+8px);opacity:0;cursor:pointer;border:none;padding:0}
.color-label{flex:1;font-size:13px}
.color-hex{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:58px;
  text-align:right;letter-spacing:.3px}
.ts-action-row{display:flex;gap:8px;margin-top:18px;margin-bottom:8px}
.ts-apply-btn{flex:1;padding:13px;border:none;border-radius:10px;font-size:14px;
  font-weight:700;cursor:pointer;background:var(--blue);color:#fff;transition:opacity .15s}
.ts-apply-btn:active{opacity:.8}
.ts-save-wrap{flex:1;position:relative}
.ts-save-btn{width:100%;padding:13px;border:1.5px solid var(--border);border-radius:10px;
  font-size:14px;font-weight:700;cursor:pointer;background:var(--surface2);
  color:var(--text);display:flex;align-items:center;justify-content:center;gap:6px}
.ts-save-btn:active{opacity:.8}
.ts-dropdown{position:absolute;bottom:calc(100% + 6px);left:0;right:0;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;display:none;z-index:200;
  box-shadow:0 -4px 16px rgba(0,0,0,.4)}
.ts-dropdown.open{display:block}
.ts-drop-item{padding:13px 14px;font-size:13px;cursor:pointer;
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.ts-drop-item:last-child{border-bottom:none}
.ts-drop-item:active{background:var(--surface2)}
.ts-drop-swatches{display:flex;gap:3px;margin-left:auto}

/* 대시보드 맨 아래 '수익률 기준' 한 줄 — 어느 시점 대비인지 매번 찾지 않도록 */
.basis-note{margin:10px 2px 0;font-size:11px;line-height:1.5;color:var(--muted);text-align:center}