/* 모바일 스크리너 — 모바일 우선, 다크모드 대응 */
:root {
  --bg: #f4f6f9; --card: #ffffff; --ink: #1a2233; --sub: #6b7686;
  --line: #e6e9ef; --brand: #2f6df6; --brand-ink: #fff;
  --up: #e0392b; --down: #1565c0; --chip: #eef1f6; --chip-ink: #3a4457;
  --good: #15803d; --warn: #b45309;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --card: #151d2c; --ink: #e8ecf3; --sub: #93a0b4;
    --line: #232d3f; --brand: #4b83ff; --chip: #1e2838; --chip-ink: #b9c4d6;
    --up: #ff5b4d; --down: #5b9bff; --good: #4ade80; --warn: #fbbf24;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }  /* display 지정 요소에도 hidden 우선 적용 */
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 15px; line-height: 1.4;
  padding-bottom: calc(58px + var(--safe-bot)); /* 탭바 */
  overscroll-behavior-y: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ── 상단 바 ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.tb-title { font-size: 18px; font-weight: 700; }
.tb-btn { font-size: 14px; font-weight: 600; color: var(--brand); padding: 6px 8px; }

/* ── 검색 ── */
.search-row {
  position: relative; display: flex; align-items: center; padding: 8px 16px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.search-ic { position: absolute; left: 28px; font-size: 14px; opacity: .6; pointer-events: none; }
.search-input {
  flex: 1; padding: 10px 36px 10px 38px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-size: 15px; -webkit-appearance: none;
}
.search-clear { position: absolute; right: 26px; font-size: 15px; color: var(--sub); padding: 4px 6px; }

/* ── 관심 별표 ── */
.card-star { font-size: 17px; color: var(--sub); padding: 0 4px; line-height: 1; vertical-align: middle; }
.card-star.on { color: #f5a623; }
.card-nameblock { min-width: 0; }
.detail-star { font-size: 24px; color: var(--sub); padding: 0 10px; line-height: 1; }
.detail-star.on { color: #f5a623; }
.watch-head { padding: 14px 16px 4px; font-size: 15px; font-weight: 700; }
.watch-head span { color: var(--brand); }

/* ── 포트폴리오 ── */
#pf-list { padding: 4px 12px 8px; }
.pf-total { margin: 6px 16px 2px; font-size: 13px; color: var(--sub); }
.pf-total b { color: var(--ink); }
.pf-del { font-size: 12px; color: var(--down); font-weight: 600; padding: 2px 4px; }
.pf-add-row { display: flex; gap: 8px; }
.pf-add-row input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 15px; }
.pf-add-btn { padding: 0 18px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 14px; white-space: nowrap; }
.pf-held { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--sub); }
.pf-remove { font-size: 13px; color: var(--down); font-weight: 600; padding: 4px 6px; }

/* ── 프리셋 칩 줄 ── */
.preset-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
  background: var(--card); border-bottom: 1px solid var(--line);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.preset-row::-webkit-scrollbar { display: none; }
.preset-chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
  background: var(--chip); color: var(--chip-ink); font-size: 13px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent;
}
.preset-chip.active { background: var(--brand); color: var(--brand-ink); }

/* ── 적용 필터 바 ── */
.applied-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  min-height: 40px;
}
.applied-chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.applied-chips::-webkit-scrollbar { display: none; }
.f-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--chip-ink);
  font-size: 12px; white-space: nowrap;
}
.f-chip b { color: var(--brand); }
.f-chip .x { font-size: 13px; opacity: .6; }
.result-count { font-size: 13px; color: var(--sub); font-weight: 600; white-space: nowrap; }

/* ── 카드 리스트 ── */
.list { padding: 4px 12px 8px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; margin-bottom: 10px;
}
.card:active { transform: scale(0.994); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-name { font-size: 16px; font-weight: 700; }
.card-sub { font-size: 12px; color: var(--sub); margin-top: 2px; }
.card-price { text-align: right; }
.card-cur { font-size: 16px; font-weight: 700; }
.card-chg { font-size: 13px; font-weight: 600; margin-top: 2px; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--sub); }
.card-metrics {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px;
  font-size: 13px; color: var(--sub);
}
.card-metrics b { color: var(--ink); font-weight: 600; }
.card-metrics .m-good b { color: var(--good); }
.card-levels {
  display: flex; justify-content: space-between; gap: 6px; margin-top: 11px;
  padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12.5px;
}
.lvl { text-align: center; flex: 1; }
.lvl .k { color: var(--sub); font-size: 11px; display: block; margin-bottom: 1px; }
.lvl .v { font-weight: 700; }
.lvl.entry .v { color: var(--ink); }
.lvl.target .v { color: var(--up); }
.lvl.stop .v { color: var(--down); }
.lvl.rr .v { color: var(--brand); }

.list-status { text-align: center; color: var(--sub); font-size: 13px; padding: 16px; }
.sentinel { height: 1px; }

/* ── 하단 탭바 ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bot);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 6px; font-size: 11px; color: var(--sub);
}
.tab span { font-size: 19px; }
.tab.active { color: var(--brand); font-weight: 700; }

/* ── 필터 FAB ── */
.fab {
  position: fixed; right: 16px; bottom: calc(70px + var(--safe-bot)); z-index: 25;
  background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 6px 18px rgba(47,109,246,.4);
}

/* ── 바텀시트 ── */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--card); border-radius: 18px 18px 0 0;
  max-height: 85vh; display: flex; flex-direction: column;
  padding-bottom: var(--safe-bot);
  animation: slideup .22s ease;
}
.sheet-sm { max-height: 60vh; }
@keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 8px auto 4px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 10px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 17px; }
.sheet-x { font-size: 18px; color: var(--sub); padding: 4px 8px; }
.sheet-body { overflow-y: auto; padding: 14px 18px; flex: 1; -webkit-overflow-scrolling: touch; }
.sheet-foot { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.btn-primary { flex: 2; background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 15px; padding: 13px; border-radius: 12px; }
.btn-ghost { flex: 1; background: var(--chip); color: var(--chip-ink); font-weight: 600; font-size: 15px; padding: 13px; border-radius: 12px; }

/* 필터 폼 요소 */
.fgroup { margin-bottom: 18px; }
.fgroup > label { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 8px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  padding: 9px 14px; border-radius: 10px; background: var(--chip); color: var(--chip-ink);
  font-size: 14px; font-weight: 600; border: 1px solid transparent;
}
.seg button.on { background: var(--brand); color: var(--brand-ink); }
.frow { display: flex; gap: 8px; align-items: center; }
.frow input {
  flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-size: 15px;
}
.frow .sep { color: var(--sub); }
.fhint { font-size: 12px; color: var(--sub); margin-top: 6px; }
.sortopt { display: block; width: 100%; text-align: left; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.sortopt.on { color: var(--brand); font-weight: 700; }
.sortopt .dir { float: right; color: var(--sub); font-size: 13px; }

/* ── 상세 ── */
.detail { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.detail-top { display: flex; align-items: center; gap: 6px; padding: calc(8px + var(--safe-top)) 12px 10px; background: var(--card); border-bottom: 1px solid var(--line); }
.detail-back { font-size: 26px; color: var(--brand); padding: 0 8px; line-height: 1; }
.detail-name { font-size: 17px; font-weight: 700; }
.detail-sub { font-size: 12px; color: var(--sub); }
.detail-tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--line); }
.dtab { flex: 1; padding: 12px 0; font-size: 14px; color: var(--sub); border-bottom: 2px solid transparent; }
.dtab.active { color: var(--brand); font-weight: 700; border-bottom-color: var(--brand); }
.detail-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.dsec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.dsec h3 { margin: 0 0 10px; font-size: 14px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 14px; }
.kv dt { color: var(--sub); }
.kv dd { margin: 0; text-align: right; font-weight: 600; }
.lw-chart-m { width: 100%; height: 300px; }
.disclaimer { font-size: 11px; color: var(--sub); text-align: center; padding: 10px 20px 4px; }
/* ── 탭 패널(설정/관심/포트폴리오) ── */
.tab-panel { padding: 20px 16px; }
.panel-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 14px; }
.panel-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.panel-desc { font-size: 14px; color: var(--sub); line-height: 1.5; margin: 0 0 16px; }
.panel-user { font-size: 15px; margin: 0 0 16px; }
.btn-kakao {
  width: 100%; padding: 14px; border-radius: 12px; background: #FEE500; color: #191600;
  font-size: 15px; font-weight: 700;
}
.btn-kakao:active { filter: brightness(.95); }
#btn-logout { width: 100%; }

/* ── 토스트 ── */
.toast {
  position: fixed; left: 50%; bottom: calc(80px + var(--safe-bot)); transform: translate(-50%, 12px);
  background: rgba(20,26,38,.95); color: #fff; font-size: 14px; padding: 11px 18px; border-radius: 999px;
  z-index: 80; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 88%;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini th, .mini td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.mini th:first-child, .mini td:first-child { text-align: left; color: var(--sub); }