/* =====================================================
   눈덩이티큐 대시보드 — 스타일시트
   모바일 퍼스트, 다크/라이트 테마 지원
   ===================================================== */

/* ── 색상 변수 ────────────────────────────────────── */
:root {
  /* 전략 색상 */
  --c-green:  #0F6E56;
  --c-red:    #A32D2D;
  --c-amber:  #854F0B;
  --c-teal:   #0D7377;
  --c-purple: #534AB7;
  --c-gray:   #888780;

  /* 라이트 테마 */
  --c-text:   #1A1A19;
  --c-text2:  #6B6B67;
  --c-text3:  #9B9B97;
  --c-bg:     #F4F4F2;
  --c-card:   #FFFFFF;
  --c-border: #E5E5E3;

  /* 하위 호환 alias */
  --bg:           var(--c-bg);
  --surface:      var(--c-card);
  --border:       var(--c-border);
  --primary:      var(--c-teal);
  --primary-dark: #0A5C60;
  --text:         var(--c-text);
  --text-muted:   var(--c-text2);
  --success:      var(--c-green);
  --danger:       var(--c-red);
  --warning:      var(--c-amber);
  --badge-bg:     #E6F3F4;
  --badge-text:   var(--c-teal);
  --radius:       12px;
  --shadow:       0 1px 4px rgba(0,0,0,0.06);
}

/* 시스템 다크 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --c-text:   #E5E5E3;
    --c-text2:  #9B9B97;
    --c-text3:  #6B6B67;
    --c-bg:     #111111;
    --c-card:   #1A1A19;
    --c-border: #333331;
    --badge-bg:  #0D3032;
    --shadow:    0 1px 4px rgba(0,0,0,0.4);
  }
}

/* 수동 다크 */
[data-theme="dark"] {
  --c-text:   #E5E5E3;
  --c-text2:  #9B9B97;
  --c-text3:  #6B6B67;
  --c-bg:     #111111;
  --c-card:   #1A1A19;
  --c-border: #333331;
  --badge-bg:  #0D3032;
  --shadow:    0 1px 4px rgba(0,0,0,0.4);
}

/* 수동 라이트 */
[data-theme="light"] {
  --c-text:   #1A1A19;
  --c-text2:  #6B6B67;
  --c-text3:  #9B9B97;
  --c-bg:     #F4F4F2;
  --c-card:   #FFFFFF;
  --c-border: #E5E5E3;
  --badge-bg:  #E6F3F4;
  --shadow:    0 1px 4px rgba(0,0,0,0.06);
}

/* ── 리셋 & 베이스 ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  padding-top: env(safe-area-inset-top);
}

/* 전체 레이아웃 컨테이너 */
.screen {
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
}

.hidden { display: none !important; }

/* ── 로그인 ─────────────────────────────────────── */
.login-card {
  padding: 52px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--c-card);
  border-radius: 20px;
  margin: 24px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.04) inset;
  border: 1px solid var(--c-border);
}

.app-title {
  font-size: 30px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--c-teal) 0%, #00e676 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}
.app-subtitle { color: var(--c-text2); font-size: 13px; margin-top: -6px; letter-spacing: 0.3px; }

input#login-chatid:focus,
input#login-password:focus {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(0,188,212,0.15);
}

.btn-primary {
  box-shadow: 0 4px 14px rgba(0,188,212,0.35);
}
.btn-primary:active { transform: scale(0.98); box-shadow: none; }

.login-hint {
  font-size: 13px;
  color: var(--c-text2);
  text-align: center;
  padding: 0 4px;
}

/* ── 폼 ─────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

input, select, textarea {
  padding: 11px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-card);
  color: var(--c-text);
  font-size: 14px;
  outline: none;
  width: 100%;
  min-height: 44px;
  transition: border-color 0.2s;
}
input:focus, select:focus { border-color: var(--c-teal); }
input::placeholder { color: var(--c-text3); }

/* ── 버튼 ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}
.btn:active  { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--c-teal); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-outline { background: transparent; border: 1px solid var(--c-border); color: var(--c-text); }
.btn-danger  { background: var(--c-red); color: white; }
.btn-danger:hover:not(:disabled) { opacity: 0.85; }
.btn-full    { width: 100%; }

.btn-sm  { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn-xs  { min-height: 28px; padding: 0 8px;  font-size: 12px; border-radius: 6px; }

/* ── 헤더 ─────────────────────────────────────── */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--c-card);
  border-bottom: 0.5px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 100;
  font-weight: 700;
  font-size: 15px;
}
.header-right { display: flex; align-items: center; gap: 6px; }
.date-badge   { font-size: 12px; color: var(--c-text2); }

/* ── 새로고침 인디케이터 ─────────────────────── */
#refresh-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--c-teal);
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease, background 0.2s ease;
  cursor: default;
}
#refresh-indicator.show  { max-height: 40px; }
#refresh-indicator.error { background: var(--c-red); cursor: pointer; }
#refresh-indicator.done  { background: transparent; color: var(--c-text2); font-weight: 400; }
#refresh-indicator .mini-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
#refresh-indicator.done  .mini-spinner,
#refresh-indicator.error .mini-spinner { display: none; }

/* ── 카드 ─────────────────────────────────────── */
.card {
  background: var(--c-card);
  border: 0.5px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 12px 12px;
  box-shadow: var(--shadow);
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 포트폴리오 요약 ─────────────────────────── */
.portfolio-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.portfolio-total .label { color: var(--c-text2); font-size: 13px; padding-top: 4px; }

.total-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.big-num     { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.krw-sub     { font-size: 14px; color: var(--c-text2); font-weight: 500; }
.exchange-rate { font-size: 0.75em; color: var(--c-text2); margin-left: 8px; font-weight: normal; }

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.port-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--c-bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.port-item .label { font-size: 12px; color: var(--c-text2); }
.port-item span:last-child { font-weight: 700; font-size: 15px; }

/* 목표 게이지 */
.goal-section  { margin-bottom: 12px; }
.goal-header   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.goal-label    { font-size: 12px; color: var(--c-text2); }

/* 배지 */
.state-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* 수익률 pill */
.profit { font-weight: 700; font-size: 14px; }
.profit.positive { color: var(--c-green); }
.profit.negative { color: var(--c-red); }

/* 수익률 3분할 그리드 */
.return-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.return-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88em;
  font-weight: normal;
}
.return-row.total {
  border-top: 1px solid var(--c-border);
  padding-top: 4px;
  margin-top: 2px;
  font-weight: bold;
  font-size: 0.95em;
}
.return-label {
  color: var(--c-text2);
  font-size: 0.9em;
  margin-right: 8px;
}
.return-val.pos { color: var(--c-green); }
.return-val.neg { color: var(--c-red); }

.change.positive { color: var(--c-green); font-weight: 600; }
.change.negative { color: var(--c-red);   font-weight: 600; }

/* 종목별 holdings 카드 */
.holdings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 4px;
}
.holding-card {
  background: var(--bg2, rgba(0,0,0,0.04));
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
}
.holding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.holding-header .ticker {
  font-weight: 700;
  font-size: 0.88em;
  color: var(--c-text2);
}
.holding-return { font-size: 0.9em; font-weight: 600; }
.holding-value { font-size: 1.05em; font-weight: 700; margin-bottom: 2px; }
.holding-detail { font-size: 0.78em; color: var(--c-text2); }
.holding-profit { font-size: 0.8em; margin-top: 2px; }
.cash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--c-border);
  font-size: 0.88em;
}
.cash-editable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.cash-editable:hover { opacity: 0.75; }
.cash-edit-icon { font-size: 0.85em; }
.total-return-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--c-border);
  font-size: 0.92em;
}
.pos { color: var(--c-green); }
.neg { color: var(--c-red); }

/* 시세 라인 */
.market-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--c-text2);
  padding-top: 8px;
  border-top: 0.5px solid var(--c-border);
}
.market-row strong { color: var(--c-text); font-weight: 600; }

/* 실시간 배지 */
.rt-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}
.rt-live  { background: #D6F0E8; color: #0A5C3C; }
.rt-close { background: var(--c-bg); color: var(--c-text2); border: 0.5px solid var(--c-border); }

[data-theme="dark"] .rt-live  { background: #0A3028; color: #5DBFA0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .rt-live  { background: #0A3028; color: #5DBFA0; }
}

/* ── 다음 액션 ────────────────────────────────── */
.progress-bar  { height: 4px; border-radius: 2px; background: var(--c-border); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 2px; background: var(--c-teal); transition: width 0.5s; }

.scenario-item {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--c-bg);
  border-left: 3px solid var(--c-gray);
}
.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.scenario-label  { font-weight: 700; font-size: 13px; }
.scenario-detail { font-size: 12px; color: var(--c-text2); margin-top: 2px; }
.scenario-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.scenario-status.done    { background: #D6F0E8; color: #0A5C3C; }
.scenario-status.active  { background: #FFF3E0; color: var(--c-amber); }
.scenario-status.pending { background: var(--c-bg); color: var(--c-text2); border: 0.5px solid var(--c-border); }
.scenario-subdetail { font-size: 12px; color: var(--c-text2); margin-top: 2px; }

/* ── 하락 시나리오 ─────────────────────────────────────────────── */
.scenario-downside { margin-top: 14px; border-top: 1px solid rgba(255,82,82,0.25); padding-top: 10px; }
.ds-header { font-size: 12px; font-weight: 700; color: #FF5252; margin-bottom: 8px; }
.ds-card {
  padding: 7px 0 7px 10px;
  border-left: 3px solid #888;
  margin-bottom: 8px;
  border-radius: 0 6px 6px 0;
  background: var(--c-card);
}
.ds-card.ds-reached { background: rgba(255,23,68,0.06); }
.ds-top { display: flex; justify-content: space-between; align-items: center; }
.ds-label  { font-weight: 700; font-size: 12px; }
.ds-status { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--c-bg); color: var(--c-text2); border: 0.5px solid var(--c-border); }
.ds-status.ds-active { background: #FFE5E5; color: #D50000; border-color: #FF1744; }
.ds-detail { font-size: 11px; color: var(--c-text2); margin-top: 3px; }
.ds-action { font-size: 11px; color: var(--c-text2); margin-top: 1px; }
[data-theme="dark"] .ds-status.ds-active { background: #3D0010; color: #FF5252; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ds-status.ds-active { background: #3D0010; color: #FF5252; }
}

/* ── 현재 사이클 경로 ────────────────────────────────────────────── */
.cycle-path {
  background: var(--c-bg2, rgba(0,0,0,0.04));
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--c-border);
}
.cycle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.cycle-label {
  font-size: 0.75em;
  color: var(--c-text2);
}
.cycle-ref {
  font-size: 0.78em;
  font-weight: bold;
  color: var(--c-text2);
  background: var(--c-bg3, rgba(0,0,0,0.06));
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
}
.cycle-events {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.cycle-event {
  font-size: 0.78em;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 12px;
}
.cycle-event.pending {
  background: transparent !important;
  color: #888888 !important;
  border: 1px dashed #888888;
  font-style: normal;
  animation: monitoring-pulse 2s ease-in-out infinite;
}
@keyframes monitoring-pulse {
  0%, 100% { opacity: 1; border-color: #888888; color: #888888; }
  50%       { opacity: 0.4; border-color: #bbbbbb; color: #bbbbbb; }
}
.cycle-arrow { color: var(--c-text2); font-size: 0.85em; }

/* ── 시나리오 섹션 ────────────────────────── */
.sc-section-hdr {
  font-size: 0.82em; font-weight: 700;
  padding: 4px 0; margin: 10px 0 4px;
  border-bottom: 1px solid var(--c-border);
}
.sc-section-hdr.sc-up      { color: #00C853; }
.sc-section-hdr.sc-down    { color: #FF5252; }
.sc-section-hdr.sc-reentry { color: #2196F3; }

.sc-card {
  padding: 6px 0 6px 10px;
  border-left: 3px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  font-size: 0.86em;
  margin-bottom: 0;
}
.sc-card.sc-active {
  background: rgba(0,200,83,0.05);
  border-radius: 0 6px 6px 0;
  padding-right: 8px;
}
.sc-card.sc-down.sc-active { background: rgba(255,23,68,0.05); }

.sc-top {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
  margin-bottom: 1px;
}
.sc-label { font-weight: 700; font-size: 0.92em; }
.sc-label-sub { font-weight: 400; color: var(--c-text2); font-size: 0.86em; }
.sc-badge-active { color: #00C853; font-size: 0.82em; }
.sc-card.sc-down .sc-badge-active { color: #FF5252; }
.sc-trigger { color: var(--c-text2); font-size: 0.84em; margin-left: auto; }
.sc-gap { font-size: 0.80em; }
.sc-gap-pos { color: var(--c-text2); }
.sc-gap-neg { color: #00C853; }
.sc-card.sc-down .sc-gap-neg { color: #FF5252; }

.sc-tag {
  display: inline-block; font-size: 0.70em;
  padding: 1px 5px; border-radius: 3px;
  font-weight: 600; vertical-align: middle;
}
.sc-tag-track { background: rgba(0,200,83,0.12); color: #00C853; }
.sc-tag-wait  { background: rgba(255,145,0,0.12); color: #FF9100; }
.sc-tag-near  { background: rgba(255,82,82,0.12); color: #FF5252; }
.sc-tag-done  { background: rgba(0,200,83,0.12); color: #00C853; }

/* 설명/액션 텍스트 - 기존 클래스명 호환 + 새 클래스명 */
.sc-action, .sc-desc-line {
  margin-top: 2px; color: var(--c-text2);
  font-size: 0.80em; line-height: 1.3;
  white-space: pre-line;
}
.sc-desc, .sc-action-line {
  margin-top: 2px; color: var(--c-text2);
  font-size: 0.78em; line-height: 1.3;
}

/* 프로그레스바 - 기존 클래스명 호환 + 새 클래스명 */
.sc-progress, .sc-pbar { margin: 3px 0 2px; }

.sc-pbar-row, .sc-pbar-labels {
  display: flex; justify-content: space-between;
  font-size: 0.76em; color: var(--c-text2);
  margin-bottom: 1px;
}
.sc-pbar-row .val, .sc-pbar-labels .right,
.sc-pbar-remain {
  font-weight: 600; color: var(--c-text1);
  font-size: 0.76em;
}
.sc-pbar-remain { text-align: right; margin-top: 1px; }
.sc-pbar-remain.amber { color: #FF9100; }
.sc-pbar-remain.red   { color: #FF5252; }

.sc-pbar-track {
  height: 4px; background: var(--c-border);
  border-radius: 2px; overflow: hidden;
}
.sc-pbar-fill {
  height: 100%; border-radius: 2px;
  transition: width 0.3s ease;
}
.sc-pbar-fill.green  { background: #00C853; }
.sc-pbar-fill.amber  { background: #FF9100; }
.sc-pbar-fill.red    { background: #FF5252; }

.sc-pbar-detail, .sc-detail {
  font-size: 0.76em; color: var(--c-text2);
  margin-top: 2px; line-height: 1.3;
}
.sc-pbar-detail b, .sc-detail b {
  font-weight: 600; color: var(--c-text1);
}

.sc-record-btn {
  margin-top: 8px;
  width: 100%;
  padding: 6px 0;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text2);
  font-size: 12px;
  cursor: pointer;
}
.sc-record-btn:active { background: var(--c-bg2); }

/* ── 모달 ─────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--c-card);
  border-radius: 14px;
  padding: 24px 20px;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--c-text);
}
.modal-body {
  font-size: 14px;
  color: var(--c-text2);
  line-height: 1.7;
  margin-bottom: 20px;
  white-space: pre-line;
}
.modal-actions { display: flex; flex-direction: column; gap: 8px; }

[data-theme="dark"] .scenario-status.done   { background: #0A3028; color: #5DBFA0; }
[data-theme="dark"] .scenario-status.active { background: #3D2700; color: #FFB74D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .scenario-status.done   { background: #0A3028; color: #5DBFA0; }
  :root:not([data-theme]) .scenario-status.active { background: #3D2700; color: #FFB74D; }
}

/* ── 차트 ─────────────────────────────────────── */
.chart-toolbar  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chart-tabs     { display: flex; gap: 3px; }
.chart-controls { display: flex; gap: 3px; }
.chart-wrapper  { position: relative; height: 310px; }

/* 커스텀 범례 */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.tab-btn    { background: var(--c-bg); color: var(--c-text2); border: 0.5px solid var(--c-border); }
.tab-active { background: var(--c-teal) !important; color: white !important; border-color: var(--c-teal) !important; }

.period-btn    { background: var(--c-bg); color: var(--c-text2); border: 0.5px solid var(--c-border); }
.period-active { background: var(--c-card) !important; color: var(--c-text) !important; border-color: var(--c-teal) !important; font-weight: 700; }

/* ── 매매 폼 ─────────────────────────────────── */
.trade-form { margin-bottom: 16px; }
.form-row   { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.form-row input,
.form-row select    { flex: 1; min-width: 0; }
.form-row .btn      { flex-shrink: 0; }

.edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFF8E1;
  border: 1px solid #FFD54F;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #5D4037;
  margin-bottom: 8px;
}
[data-theme="dark"] .edit-banner { background: #3E2723; border-color: #6D4C41; color: #FFCC80; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .edit-banner { background: #3E2723; border-color: #6D4C41; color: #FFCC80; }
}

/* ── 거래 이력 ──────────────────────────────── */
.trade-history { max-height: 320px; overflow-y: auto; }

.trade-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--c-border);
  font-size: 13px;
}
.trade-item:last-child { border-bottom: none; }

.trade-type {
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  flex-shrink: 0;
}
.trade-type.buy  { background: #D6F0E8; color: #0A5C3C; }
.trade-type.sell { background: #FCEDED; color: #7A1B1B; }

[data-theme="dark"] .trade-type.buy  { background: #0A3028; color: #5DBFA0; }
[data-theme="dark"] .trade-type.sell { background: #3B0D0D; color: #EF9A9A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .trade-type.buy  { background: #0A3028; color: #5DBFA0; }
  :root:not([data-theme]) .trade-type.sell { background: #3B0D0D; color: #EF9A9A; }
}

.trade-info  { flex: 1; min-width: 0; }
.trade-price { font-weight: 600; color: var(--c-text); }
.trade-date  { font-size: 12px; color: var(--c-text2); }

/* ── 신호타입 배지 ──────────────────────────────────────────────── */
.signal-badge {
  font-size: 0.72em;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: middle;
}
.signal-gc, .signal-gcfill   { background: #00E676; color: #003300; }
.signal-dip1, .signal-dip2   { background: #2196F3; color: #fff; }
.signal-tp1, .signal-tp15, .signal-tp2, .signal-tp3 { background: #00C853; color: #fff; }
.signal-dc   { background: #FF1744; color: #fff; }
.signal-기타 { background: #888; color: #fff; }

/* ── 드롭박스 ───────────────────────────────────────────────────── */
.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-card);
  color: var(--c-text);
  font-size: 14px;
  appearance: none;
  cursor: pointer;
}
.form-select:focus {
  outline: none;
  border-color: var(--primary);
}

.trade-actions     { display: flex; gap: 2px; flex-shrink: 0; }
.trade-action-btn  {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--c-text2);
  min-height: 32px;
  transition: background 0.1s;
}
.trade-action-btn:hover          { background: var(--c-bg); }
.trade-action-btn.delete:hover   { color: var(--c-red); }
.trade-action-btn.edit:hover     { color: var(--c-teal); }

.error-msg { color: var(--c-red); font-size: 13px; margin-top: 4px; }

/* ── 시뮬레이터 / 세금계산기 ─────────────────── */
.sim-form { margin-bottom: 10px; }

.sim-result {
  background: var(--c-bg);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  border: 0.5px solid var(--c-border);
}
.sim-header    { font-weight: 700; margin-bottom: 8px; color: var(--c-teal); font-size: 14px; }
.sim-signal    { padding: 4px 0; color: var(--c-text); border-bottom: 0.5px solid var(--c-border); }
.sim-signal:last-of-type { border-bottom: none; }
.sim-portfolio { margin-top: 8px; font-weight: 600; color: var(--c-green); font-size: 13px; }
.sim-msg       { color: var(--c-text2); }

/* 세금 결과 강조 */
.tax-krw-em { font-size: 16px; font-weight: 700; color: var(--c-red); }

/* ── 자산 히스토리 차트 ────────────────────── */
/* (chart-wrapper 공유) */

/* ── 알림 히스토리 ─────────────────────────── */
.alerts-list { max-height: 300px; overflow-y: auto; }

.alert-item {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--c-border);
  font-size: 13px;
  align-items: baseline;
  flex-wrap: wrap;
}
.alert-item:last-child { border-bottom: none; }
.alert-date   { color: var(--c-text2); font-size: 12px; min-width: 82px; flex-shrink: 0; }
.alert-signal {
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  flex-shrink: 0;
}
.alert-detail { flex: 1; color: var(--c-text); min-width: 0; }
.alert-price  { color: var(--c-text2); font-size: 12px; flex-shrink: 0; }

/* 신호 pill 색상 */
.sig-tp1    { background: #FFF3E0; color: var(--c-amber); }
.sig-tp15   { background: #E0F5F5; color: var(--c-teal); }
.sig-tp2    { background: #EDE7F6; color: var(--c-purple); }
.sig-tp3    { background: #FCEDED; color: var(--c-red); }
.sig-dc     { background: #FCEDED; color: var(--c-red); }
.sig-gc     { background: #D6F0E8; color: var(--c-green); }
.sig-dip    { background: #D6F0E8; color: var(--c-green); }
.sig-other  { background: var(--c-bg); color: var(--c-text2); }

[data-theme="dark"] .sig-tp1  { background: #3D2700; color: #FFB74D; }
[data-theme="dark"] .sig-tp15 { background: #003333; color: #4DD0D0; }
[data-theme="dark"] .sig-tp2  { background: #1A1240; color: #9E96E0; }
[data-theme="dark"] .sig-tp3,
[data-theme="dark"] .sig-dc   { background: #3B0D0D; color: #EF9A9A; }
[data-theme="dark"] .sig-gc,
[data-theme="dark"] .sig-dip  { background: #0A3028; color: #5DBFA0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sig-tp1  { background: #3D2700; color: #FFB74D; }
  :root:not([data-theme]) .sig-tp15 { background: #003333; color: #4DD0D0; }
  :root:not([data-theme]) .sig-tp2  { background: #1A1240; color: #9E96E0; }
  :root:not([data-theme]) .sig-tp3,
  :root:not([data-theme]) .sig-dc   { background: #3B0D0D; color: #EF9A9A; }
  :root:not([data-theme]) .sig-gc,
  :root:not([data-theme]) .sig-dip  { background: #0A3028; color: #5DBFA0; }
}

/* ── 설정 ─────────────────────────────────── */
.settings-group { display: flex; flex-direction: column; gap: 0; }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--c-border);
  flex-wrap: wrap;
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: 14px; font-weight: 600; color: var(--c-text); }

.settings-row .form-row { margin: 0; flex: 1; max-width: 240px; }

/* 테마 토글 */
.theme-toggle { display: flex; gap: 4px; }
.theme-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 0.5px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-bg);
  color: var(--c-text2);
  cursor: pointer;
  min-height: 36px;
  transition: all 0.15s;
}
.theme-btn:hover    { border-color: var(--c-teal); color: var(--c-text); }
.theme-btn.theme-active { background: var(--c-teal); color: white; border-color: var(--c-teal); }

/* ── 로딩 오버레이 ─────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 인쇄 (PDF) ──────────────────────────── */
@media print {
  button, input, select, textarea,
  .trade-form, #simulator-card, #tax-card,
  #settings-card, #refresh-indicator,
  .trade-actions, .loading-overlay { display: none !important; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .card {
    box-shadow: none;
    border: 0.5px solid #ccc;
    break-inside: avoid;
    margin: 6px 0;
  }
  body { background: white; color: black; }
  .screen { max-width: 100%; }
}

/* ── 아코디언 ────────────────────────────── */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.accordion-arrow {
  font-size: 12px;
  color: var(--c-text3);
}

/* ── 하단 탭 바 ──────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-card);
  border-top: 0.5px solid var(--c-border);
  display: flex;
  z-index: 200;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
  user-select: none;
}

.tab-item.active {
  color: #0D7377;
}

.tab-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 탭 콘텐츠 */
.tab-content {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* ── 반응형 ─────────────────────────────── */
@media (min-width: 480px) {
  .screen { padding: 0 8px; }
  .login-card { padding-top: 80px; }
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
  .chart-wrapper { height: 360px; }
}

/* ── 가로 모드 (landscape) ──────────────────────────────────── */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .tab-bar { display: none !important; }
  .dash-header { padding: 4px 12px !important; min-height: 36px; }
  #portfolio-card,
  #next-action-card { display: none !important; }
  .chart-wrapper {
    height: calc(100vh - 80px) !important;
    max-height: none !important;
  }
  .chart-controls {
    position: fixed !important;
    top: 40px;
    right: 8px;
    z-index: 200;
    background: var(--c-card);
    border-radius: 6px;
    padding: 2px;
  }
}

/* ── 가로보기 오버레이 ────────────────────────────────────────── */
#landscape-overlay {
  display: none;
  position: fixed;
  z-index: 2000;
  background: var(--c-bg);
  /* 세로 화면을 90도 회전하여 가로처럼 보이게 */
  transform: rotate(90deg);
  transform-origin: center center;
  width: 100vh;
  height: 100vw;
  top: 50%;
  left: 50%;
  margin-top: -50vw;
  margin-left: -50vh;
  /* rotate(90deg) 상태에서 시스템바 겹침 방지 */
  padding-left: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-bottom);
}

#landscape-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#landscape-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border);
  height: 48px;
  flex-shrink: 0;
  overflow-x: auto;
  width: 100%;
}

.lc-group {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-shrink: 0;
}

.lc-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  font-size: 13px;
  cursor: pointer;
}

.lc-btn.active {
  background: #2962ff;
  border-color: #2962ff;
  color: #fff;
  font-weight: bold;
}

#landscape-close {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  font-size: 16px;
  cursor: pointer;
}

#landscape-chart-wrap {
  flex: 1;
  position: relative;
  padding: 8px;
  min-height: 0;
}

#landscape-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── 토스 포트폴리오 UI ─────────────────────────────── */
.portfolio-wrap {
  padding: 4px 0;
}
.total-asset-section {
  margin-bottom: 14px;
}
.total-label {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--c-text2);
  font-family: inherit;
  margin-bottom: 4px;
}
.total-value {
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: -0.5px;
}
#total-return {
  font-size: 0.88em;
  margin-top: 2px;
}

.toggle-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-group {
  display: flex;
  background: var(--c-border);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.btn-group button {
  padding: 5px 14px;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--c-text2);
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-group button.active {
  background: var(--c-card);
  color: var(--c-text);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
[data-theme="dark"] .btn-group {
  background: #2a2a2a;
}
[data-theme="dark"] .btn-group button.active {
  background: #3a3a3a;
}

.holdings-list {
  display: flex;
  flex-direction: column;
}
.holding-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
}
.holding-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-chart-wrap {
  width: 60px;
  height: 36px;
  flex-shrink: 0;
}
.mini-chart-canvas {
  display: block;
}
.ticker-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  font-size: 0.72em;
  flex-shrink: 0;
}
.holding-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.holding-ticker {
  font-weight: 700;
  font-size: 0.93em;
}
.holding-avg,
.holding-shares {
  font-size: 0.76em;
  color: var(--c-text2);
}
.holding-right {
  text-align: right;
}
.holding-price,
.holding-eval {
  font-weight: 600;
  font-size: 0.93em;
}
.holding-ret {
  font-size: 0.78em;
  margin-top: 2px;
}

.cash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
}
.cash-left { display: flex; align-items: center; }
.cash-right { display: flex; align-items: center; gap: 4px; }
.cash-label {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--c-text);
}
.cash-amount { font-weight: 600; font-size: 0.95em; }
.cash-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82em;
  color: var(--c-text2);
  padding: 2px 4px;
}
.cash-edit-form {
  display: flex;
  gap: 6px;
  padding: 8px 0;
  align-items: center;
}
.cash-edit-form input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  font-size: 0.88em;
  background: var(--c-card);
  color: var(--c-text);
}
.cash-edit-form button {
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.82em;
}
.cash-edit-form button:first-of-type {
  background: #00C853;
  color: #fff;
}
.cash-edit-form button:last-of-type {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}

/* --c-bg2: 시나리오 카드 + 현재 사이클 배경 (라이트/다크 통일) */
[data-theme="light"] { --c-bg2: rgba(0,0,0,0.04); }
[data-theme="dark"]  { --c-bg2: rgba(255,255,255,0.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --c-bg2: rgba(255,255,255,0.04); }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --c-bg2: rgba(0,0,0,0.04); }
}