/* tweakcn "Tangerine" 프리셋 토큰 (https://tweakcn.com/r/themes/tangerine.json) */
:root {
  color-scheme: light dark;

  --background: oklch(0.9383 0.0042 236.4993);
  --foreground: oklch(0.3211 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.3211 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.3211 0 0);
  --primary: oklch(0.6397 0.1720 36.4421);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9670 0.0029 264.5419);
  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
  /* 카드(#fff) 대비 1.05:1이라 헤더 밴드·막대 트랙이 배경에 묻혔다.
     한 단계 내린다 — card 대비 1.19:1, 그 위 foreground는 10.60:1. */
  --muted: oklch(0.94 0.0060 247.8000);
  /* 글자색 3단계(IBM Carbon text-primary/secondary/helper 구조).
     muted-foreground가 4.83:1(helper 수준) 하나뿐이라 날짜·계좌·컬럼헤더·KPI 라벨이
     전부 같은 무게로 깔렸다 — secondary 자리로 올리고, 진짜 물러나야 하는 것만 subtle로. */
  --muted-foreground: oklch(0.44 0.0200 264.0000);        /* 7.77:1 on --card */
  --muted-foreground-subtle: oklch(0.5510 0.0234 264.3637); /* 4.83:1 — 힌트 문구 전용 */
  --accent: oklch(0.9119 0.0222 243.8174);
  --accent-foreground: oklch(0.3791 0.1378 265.5222);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.9022 0.0052 247.8822);
  --input: oklch(0.9700 0.0029 264.5420);
  --ring: oklch(0.6397 0.1720 36.4421);
  /* 배분 차트 계열색. tweakcn 원본은 5색이 전부 저채도 파랑이라 chart-3↔chart-4가
     정상 시력으로도 구분되지 않았다(ΔE 7.7, 기준 15). 색각이상·대비까지 통과하는
     값으로 교체했다 — 이 5줄만 되돌리면 원래 색으로 돌아간다. */
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --radius: 1rem;
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* 국내 증시 관례: 상승 빨강, 하락 파랑 (tweakcn 토큰에는 없어 별도 지정) */
  --gain: #dc2626;
  --loss: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.2598 0.0306 262.6666);
    --foreground: oklch(0.9219 0 0);
    --card: oklch(0.3106 0.0301 268.6365);
    --card-foreground: oklch(0.9219 0 0);
    --popover: oklch(0.2900 0.0249 268.3986);
    --popover-foreground: oklch(0.9219 0 0);
    --primary: oklch(0.6397 0.1720 36.4421);
    --primary-foreground: oklch(1.0000 0 0);
    --secondary: oklch(0.3095 0.0266 266.7132);
    --secondary-foreground: oklch(0.9219 0 0);
    /* 카드(0.3106)와 명도가 사실상 같아 막대 트랙·읽기전용 칸이 배경에 묻혀 있었다.
       한 단계 띄운다 — card 대비 1.31:1, 그 위 foreground는 7.97:1. */
    --muted: oklch(0.38 0.0280 268.6000);
    --muted-foreground: oklch(0.82 0 0);                  /* 7.54:1 on --card */
    --muted-foreground-subtle: oklch(0.7155 0 0);         /* 5.22:1 */
    --accent: oklch(0.3380 0.0589 267.5867);
    --accent-foreground: oklch(0.8823 0.0571 254.1284);
    --destructive: oklch(0.6368 0.2078 25.3313);
    --destructive-foreground: oklch(1.0000 0 0);
    --border: oklch(0.3843 0.0301 269.7337);
    --input: oklch(0.3843 0.0301 269.7337);
    --ring: oklch(0.6397 0.1720 36.4421);
    /* 같은 8색을 다크 배경(--card)에 맞춰 다시 단계를 잡은 값 — 라이트를 뒤집은 게 아니다. */
    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-3: #199e70;
    --chart-4: #c98500;
    --chart-5: #d55181;
    --gain: #f87171;
    --loss: #60a5fa;
  }
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

.font-mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* shadcn/ui Card 컴포넌트 이식 */
.card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--card-foreground);
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.card-title {
  font-weight: 600;
  line-height: 1;
}

.card-description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.card-content {
  padding-left: 1rem;
  padding-right: 1rem;
}

.card-footer {
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.card-footer.bordered {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

/* 통화 탭 */
.currency-tab {
  border-radius: calc(var(--radius) - 4px);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.currency-tab[aria-selected="true"] {
  background-color: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

.progress-track {
  height: 0.625rem;
  border-radius: 999px;
  background-color: var(--muted);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.holding-row + .holding-row {
  border-top: 1px solid var(--border);
}

.chart-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background-color: var(--muted);
  padding: 1rem 0.75rem 0.375rem;
}

.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%) translateY(-10px);
  padding: 0.3125rem 0.5rem;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--border);
  background-color: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: 0.6875rem;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

.chart-tooltip[hidden] {
  display: none;
}

.tax-progress-block {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background-color: var(--muted);
  padding: 0.875rem 1rem;
}

.tax-progress-row + .tax-progress-row {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.progress-fill-pension {
  background-color: var(--chart-1);
}

.progress-fill-irp {
  background-color: var(--primary);
}

/* 자산 구성: 가로 막대 랭킹 */
.alloc-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alloc-bar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.alloc-bar-label {
  font-size: 0.8125rem;
  font-weight: 500;
}

.alloc-bar-pct {
  font-size: 0.8125rem;
  font-weight: 600;
}

.alloc-bar-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.75rem;
}

.alloc-bar-deviation {
  color: var(--muted-foreground);
  text-align: right;
}

.alloc-target-nudge {
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: calc(var(--radius) - 4px);
  background-color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* 포트폴리오 설정 페이지 */
.target-sum-badge {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.target-input-list {
  display: flex;
  flex-direction: column;
}

.target-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0;
}

.target-input-row + .target-input-row {
  border-top: 1px solid var(--border);
}

.target-input-label {
  font-size: 0.875rem;
}

.target-input-field {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
}

.target-input-field .form-input {
  width: 4.5rem;
  text-align: right;
  padding: 0.375rem 0.5rem;
}

.target-input-suffix {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* 포트폴리오 개선안 표시 바(드롭다운) */
.improve-toggle-bar {
  margin-bottom: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card);
  box-shadow: var(--shadow-sm);
}

.improve-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.improve-dropdown-caret {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  transition: transform 0.15s ease;
}

.improve-dropdown-header[aria-expanded="true"] .improve-dropdown-caret {
  transform: rotate(180deg);
}

.suggestion-banner {
  padding: 0 1.25rem 0.875rem;
}

.suggestion-banner:not([hidden]) {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.suggestion-banner[hidden] {
  display: none;
}

.suggestion-list {
  margin: 0;
  padding-left: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  list-style: disc;
}

/* 평가손익 · 수익률 카드 */
.valuation-summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.valuation-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.valuation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 5rem 6.5rem 4.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
}

.valuation-row + .valuation-row {
  border-top: 1px solid var(--border);
}

.valuation-col-account {
  font-size: 0.75rem;
}

.valuation-col-price,
.valuation-col-profit,
.valuation-col-rate {
  text-align: right;
}

.valuation-col-rate {
  font-weight: 600;
}

.valuation-unresolved {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.txn-type-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  border-radius: calc(var(--radius) - 6px);
  padding: 0.1875rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.txn-type-badge.buy {
  background-color: color-mix(in oklch, var(--gain) 15%, transparent);
  color: var(--gain);
}

.txn-type-badge.sell {
  background-color: color-mix(in oklch, var(--loss) 15%, transparent);
  color: var(--loss);
}

/* 대시보드 2단 레이아웃: lg 이상에서는 좌측 사이드바를 제외한 영역을
   뷰포트 크기에 고정하고, 좌/우 컬럼이 각자 카드들을 빈틈없이 세로로
   채우도록 배치한다. lg 미만에서는 1열로 자연스럽게 쌓이고 페이지
   스크롤을 사용한다. */
.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dashboard-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    align-items: start;
  }

  .area-summary .card-content {
    display: flex;
    flex-direction: column;
  }

  .area-summary .chart-panel {
    display: flex;
    height: 280px;
  }

  .area-summary #trend-chart {
    width: 100%;
    height: 100%;
  }

  .area-summary #trend-chart svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .area-txn .card-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .area-alloc .card-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* 사이드바 GNB */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 4px);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-item:hover:not([aria-selected="true"]) {
  background-color: var(--muted);
  color: var(--foreground);
}

.nav-item[aria-selected="true"] {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* 사이드바 하위 메뉴(매매전략). <details>로 여닫는다 — JS가 없다.
   summary는 .nav-item이 아니다(index.html 주석): 같은 박스를 여기서 따로 그린다. */
.nav-parent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 4px);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.nav-parent::-webkit-details-marker {
  display: none;   /* Safari는 list-style만으로는 삼각형이 안 사라진다 */
}

.nav-parent::before {
  content: '▸';
  font-size: 0.625rem;
}

.nav-tree[open] > .nav-parent {
  color: var(--foreground);
  font-weight: 600;
}

.nav-tree[open] > .nav-parent::before {
  content: '▾';
}

.nav-parent:hover {
  background-color: var(--muted);
  color: var(--foreground);
}

.nav-children {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0.125rem 0 0.25rem 0.875rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--border);
}

.nav-children .nav-item {
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
}

/* 버튼 */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-ghost {
  background-color: transparent;
  color: var(--muted-foreground);
  padding: 0.375rem 0.625rem;
}

.btn-ghost:hover {
  color: var(--destructive);
}

.btn-destructive {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-destructive:hover {
  opacity: 0.9;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-destructive:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 폼 요소 */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--background);
  color: var(--foreground);
}

.form-select-sm {
  padding: 0.25rem 1.75rem 0.25rem 0.625rem;
  font-size: 0.75rem;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.form-textarea {
  resize: vertical;
  min-height: 4.5rem;
}

/* 인플루언서 뱃지 */
.badge-influencer {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* 전략 리스트 행 */
.strategy-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--card);
  padding: 1rem 1.25rem;
}

/* 조건 그룹(빌더) */
.condition-group {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
}

/* 매칭 종목 칩 */
.stock-chip {
  display: inline-flex;
  align-items: center;
  border-radius: calc(var(--radius) - 4px);
  padding: 0.1875rem 0.5rem;
  font-size: 0.75rem;
  background-color: var(--muted);
  color: var(--foreground);
}

/* 빈 상태 */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted-foreground);
}

/* 다이얼로그 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgb(0 0 0 / 0.45);
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 26rem;
}

/* ══ 매매일지(V07) ═══════════════════════════════════════════════════
   입력 줄과 거래 이력 표가 같은 컬럼을 공유한다 — 표에 새 줄을 쓰는 느낌을 만들고,
   컬럼 폭을 한 곳에서만 관리하려는 것. */
.journal-cols {
  display: grid;
  grid-template-columns: 5.5rem 6.5rem minmax(8rem, 1.5fr) 7rem 6rem 4.5rem 7rem minmax(7rem, 1fr) 2rem;
  align-items: center;
  gap: 0.375rem;
}

/* Carbon 데이터 표 규칙 중 "헤더는 본문보다 진하다"만 가져온다 — 배경 밴드는 쓰지 않는다.
   구분선만 카드 패딩 바깥까지 넓히되, 같은 값만큼 안쪽 패딩을 줘서 컬럼 좌표는 행과 맞춘다. */
.journal-head {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
  margin: 0 -1rem;
  padding: 0.5rem 1rem;
}

.journal-head-bordered {
  margin-top: 0;
}

.journal-cols .r {
  text-align: right;
}

/* 입력 컨트롤: 브라우저 기본 appearance를 끄고 높이를 하나로 맞춘다 —
   안 끄면 date/select/number 칸의 높이와 모서리가 제각각이 된다. */
.cell {
  height: 2.25rem;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--background);
  color: var(--foreground);
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 8px);
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

select.cell {
  padding-right: 1.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.cell:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 30%, transparent);
}

.cell::placeholder {
  color: var(--muted-foreground);
  opacity: 0.7;
}

.cell.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cell[readonly] {
  background-color: var(--muted);
  border-color: transparent;
  font-weight: 600;
}

.cell-status {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

.cell-add {
  height: 2.25rem;
  width: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: calc(var(--radius) - 8px);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: 1rem;
  cursor: pointer;
}

.cell-add:hover {
  opacity: 0.9;
}

/* 매수/매도 세그먼트 토글 — 주문 티켓 관행. 드롭다운보다 오조작이 적다. */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 2.25rem;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 8px);
  overflow: hidden;
}

.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
}

.seg label[for$="-buy"] {
  border-right: 1px solid var(--input);
}

.seg input:checked + label {
  color: #fff;
}

.seg input.seg-buy:checked + label {
  background-color: var(--gain);
}

.seg input.seg-sell:checked + label {
  background-color: var(--loss);
}

.journal-catline {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.3125rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.chip[data-state="ok"] {
  border-color: var(--chart-3);
  color: var(--chart-3);
}

.chip[data-state="fail"] {
  border-color: var(--destructive);
  color: var(--destructive);
}

.chip-select {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  background-color: transparent;
  cursor: pointer;
}

/* 기간 필터: Safari는 <input type="month">를 지원하지 않아 직접 만든다 */
.monthpick {
  position: relative;
}

.monthpick-trigger {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 6px);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: var(--foreground);
  white-space: nowrap;
}

.monthpick-trigger::-webkit-details-marker {
  display: none;
}

.monthpick-trigger::after {
  content: ' ▾';
  color: var(--muted-foreground);
}

.monthpick-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 20;
  width: 15rem;
  background-color: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  box-shadow: var(--shadow-sm);
  padding: 0.625rem;
}

.monthpick-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.monthpick-arrow {
  border: 0;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.5rem;
}

.monthpick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
}

.monthpick-cell {
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 8px);
  background: none;
  color: var(--foreground);
  padding: 0.375rem 0;
  font-size: 0.75rem;
  cursor: pointer;
}

.monthpick-cell:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.monthpick-cell.is-selected {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.monthpick-cell.is-anchor {
  border-color: var(--ring);
}

.monthpick-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.monthpick-actions .btn-ghost {
  flex: 1;
  font-size: 0.75rem;
  padding: 0.375rem 0;
}

.monthpick-hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground-subtle);
  text-align: center;
}

/* 자산 요약 | 보유 현황 좌우 배치 */
.journal-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 좌우 카드 높이를 맞추고(그리드 기본 stretch), 남는 높이는 보유 현황 행들이 나눠 갖는다.
   .card는 이미 flex column이라 자식에 flex만 걸면 된다. 행이 적어 한 행이 너무
   길어질 때는 max-height에서 멈추고 아래를 그냥 비워둔다. */
.journal-split > .card > .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#journal-alloc {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1100px) {
  .journal-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.journal-kpis {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}

.kpi {
  padding: 1rem 1.125rem;
}

.kpi:nth-child(-n + 2) {
  border-bottom: 1px solid var(--border);
}

.kpi:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.kpi-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.kpi-value {
  margin-top: 0.3125rem;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.kpi-sub {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.kpi-pending .kpi-value {
  color: var(--muted-foreground);
  font-weight: 500;
}

.pnl-gain { color: var(--gain); }
.pnl-loss { color: var(--loss); }

/* 보유 현황: 이름·금액·비율은 왼쪽에 붙이고 남는 폭을 전부 막대에 준다 */
.jalloc-row {
  flex: 1 1 auto;
  max-height: 4.5rem;
  display: grid;
  grid-template-columns: 0.625rem auto auto 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0;
  font-size: 0.8125rem;
}

.jalloc-row + .jalloc-row {
  border-top: 1px solid var(--border);
}

.jalloc-swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
}

.jalloc-name {
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jalloc-amount {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  white-space: nowrap;
}

.jalloc-pct {
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* 막대 트랙은 항상 왼쪽에서 시작하고, 카드 폭의 절반 이상을 차지한다 */
.jalloc-track {
  min-width: 55%;
  height: 0.75rem;
  margin-left: 0.375rem;
  border-radius: 999px;
  background-color: var(--muted);
  overflow: hidden;
}

.jalloc-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
}

/* 거래 이력 */
.journal-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 헤더 밴드와 같은 음수 마진 + 안쪽 패딩 — 컬럼 좌표가 헤더와 어긋나지 않으면서
   hover 배경만 카드 가장자리까지 닿는다. */
.journal-row {
  min-height: 2.5rem;
  margin: 0 -1rem;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
}

.journal-row + .journal-row {
  border-top: 1px solid var(--border);
}

/* 구분선이 1.33:1이라 눈으로 한 줄을 따라가기 어렵다. 선을 진하게 하는 대신
   Carbon처럼 hover에서 배경과 글자색을 같이 올린다. */
.journal-row:hover {
  background-color: var(--muted);
}

.journal-row:hover .journal-date,
.journal-row:hover .journal-account,
.journal-row:hover .journal-dim,
.journal-row:hover .journal-memo {
  color: var(--foreground);
}

.journal-date,
.journal-account {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.journal-dim {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* 토스식 — 한 줄에서 돈이 주인공이다. 단가·수량은 한 단계 뒤로(.journal-dim). */
.journal-amount {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.journal-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-memo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.journal-memo.is-empty::before {
  content: '—';
  color: var(--muted-foreground-subtle);
}

.journal-del {
  opacity: 0;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
}

.journal-row:hover .journal-del {
  opacity: 1;
}

@media (max-width: 1080px) {
  .journal-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.375rem;
  }

  .journal-head {
    display: none;
  }

  .journal-catline {
    grid-column: 1 / -1;
  }

  .journal-kpis {
    grid-template-columns: 1fr;
  }

  .kpi:nth-child(odd) {
    border-right: 0;
  }

  .kpi:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }

  .jalloc-row {
    grid-template-columns: 0.625rem auto auto 2.75rem;
    row-gap: 0.3125rem;
  }

  #budget-alloc-rows .jalloc-row {
    grid-template-columns: 0.625rem auto auto 2.75rem auto;
  }

  .jalloc-track {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}

/* ── 수입·지출 배분 (js/budget.js) ─────────────────────────────────────── */

/* 배분 막대 줄은 대시보드(보유 현황)와 같은 .jalloc-*를 쓰고, 여기서만 "남음" 칸을 하나 더 붙인다.
   막대가 소진율이라 폭을 조금 양보한다 — 남은 금액 쪽이 이 화면에서 더 자주 읽힌다. */
#budget-alloc-rows .jalloc-row {
  grid-template-columns: 0.625rem auto auto 2.75rem minmax(0, 1fr) auto;
}

#budget-alloc-rows .jalloc-track {
  min-width: 35%;
}

.jalloc-left {
  text-align: right;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--muted-foreground);
}

/* KPI 한 줄 4칸. 배분 카드 안 막대 위에 띠로 들어간다 — 카드 폭이 좁아서 대시보드 KPI보다
   값 글자를 줄이고, 대시보드의 2×2 테두리 규칙(.kpi:nth-child)을 덮어쓴다. */
.budget-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.875rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
}

.budget-kpis .kpi {
  padding: 0.625rem 0.75rem;
  border: 0;
}

.budget-kpis .kpi + .kpi {
  border-left: 1px solid var(--border);
}

.budget-kpis .kpi-value {
  margin-top: 0.125rem;
  font-size: 1.25rem;
}

.budget-kpis .kpi-sub {
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 지출 내역 카드 맨 위의 띠. 배분 카드의 .budget-kpis를 그대로 쓰고 열 수만 5로 바꾼다.
   강조 칸(합계)은 색이 아니라 면으로 띄운다 — 11px 부라벨을 주색으로 칠하면 4.5:1을 못 넘는다.
   면이 둥근 모서리 밖으로 새지 않게 띠에서 잘라 준다. */
#budget-exp-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.budget-kpis .kpi-hl {
  background-color: var(--muted);
}

.budget-kpis .kpi-hl .kpi-value {
  font-size: 1.375rem;
}

/* 실지출 내역 한 행. 입력 줄과 기록 줄이 같은 격자를 써서 열이 맞는다.
   입력 칸은 .cell/.cell-add(높이 2.25rem)를 그대로 쓰므로 여기서 높이를 다시 정하지 않는다. */
.exp-row {
  display: grid;
  grid-template-columns: 7rem 7.5rem minmax(8rem, 1fr) 7.5rem minmax(8rem, 1.5fr) 4.75rem;
  align-items: center;
  gap: 0.375rem;
}

.exp-head {
  padding: 0.625rem 0.125rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.exp-head span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.exp-list .exp-row {
  padding: 0.5625rem 0.125rem;
}

.exp-list .exp-row + .exp-row {
  border-top: 1px solid var(--border);
}

.exp-date {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* 결제수단은 날짜처럼 보조 정보라 같은 무게로 둔다 */
.exp-method {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exp-cat {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  font-size: 0.8125rem;
}

.exp-cat span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exp-amount {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 600;
}

.exp-memo {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 줄 끝 버튼 칸: 기록 줄은 수정·삭제, 수정 줄은 저장·취소. 두 개가 들어가도록 열을 4.75rem으로 둔다. */
.exp-del {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.exp-del .journal-del {
  width: 2.25rem;
  height: 2.25rem;
}

/* 수정·삭제는 매매일지의 .journal-del을 그대로 쓴다 — 행에 올렸을 때만 보인다.
   다만 마우스가 없는 곳에서는 "올린다"가 없다: 키보드 포커스와 터치 화면(아이폰 Safari)에선 늘 보이게 한다. */
.exp-list .exp-row:hover .journal-del,
.exp-list .journal-del:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .exp-list .journal-del {
    opacity: 1;
  }
}

/* 제자리 수정 중인 줄. 입력 칸 모양은 .cell 그대로이고, 어느 줄을 고치는지만 면으로 알린다. */
.exp-list .exp-editing {
  margin: 0 -0.375rem;
  padding: 0.375rem;
  border-radius: calc(var(--radius) - 6px);
  background-color: var(--muted);
}

/* .cell의 바탕(--background)은 라이트 모드에서 --muted와 거의 같은 명도라 칸이 면에 묻힌다 —
   수정 줄 안에서만 카드 바탕으로 띄운다. */
.exp-editing .cell {
  background-color: var(--card);
}

/* 취소 버튼은 .cell의 높이·테두리·모서리를 그대로 빌린다 — 옆의 저장(.cell-add)과 같은 크기가 된다. */
.exp-cancel {
  width: 2.25rem;
  padding: 0;
  color: var(--muted-foreground);
  cursor: pointer;
}

/* 카테고리 편집 한 행. 행마다 같은 격자를 써서 다섯 칸이 전 행에서 정확히 맞는다 —
   이름/목적을 세로로 쌓으면 옆 칸들이 2줄 높이의 중앙에 떠서 열이 어긋난다. */
.cat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 76px 100px 32px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0;
}

.cat-row + .cat-row {
  border-top: 1px solid var(--border);
}

.cat-head {
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--border);
}

.cat-head span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.cat-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.cat-pct {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cat-pct .form-input {
  text-align: right;
  padding: 0.5rem;
}

.cat-suffix {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.cat-del {
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .budget-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2×2가 되면 왼쪽 칸에만 세로선, 위 두 칸에만 아래선이 필요하다 */
  .budget-kpis .kpi + .kpi {
    border-left: 0;
  }

  .budget-kpis .kpi:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  .budget-kpis .kpi:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  /* 지출 띠 5칸 → 2열: 합계·대비 / 현금·체크 / 신용(한 줄 전체).
     위 2×2 규칙(홀수 칸 오른선, 위 두 칸 아랫선)에 넷째 칸까지 아랫선과 마지막 칸 펼치기만 더한다. */
  #budget-exp-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #budget-exp-kpis .kpi:nth-child(-n + 4) {
    border-bottom: 1px solid var(--border);
  }

  #budget-exp-kpis .kpi:last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }

  /* 좁은 화면: 메모를 아래 줄로 내린다(나머지 다섯 칸은 한 줄에 남긴다).
     몇 번째 칸인지가 아니라 클래스로 고른다 — 위치로 고르면 열이 늘 때 조용히 엉뚱한 칸이 내려간다. */
  .exp-row {
    grid-template-columns: 6.5rem 5.5rem minmax(0, 1fr) 6rem;
    row-gap: 0.375rem;
  }

  /* 둘째 줄: 메모가 앞 세 칸, 버튼이 금액 칸 아래(4.75rem이 금액 칸 6rem에 들어간다) */
  .exp-row > .exp-col-memo {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .exp-row > .exp-col-act {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
  }

  .exp-head > .exp-col-memo,
  .exp-head > .exp-col-act {
    display: none;
  }

  /* 좁은 화면에서는 목적을 아래 줄로 내린다 — 다섯 칸을 억지로 유지하면 전부 찌그러진다. */
  .cat-row {
    grid-template-columns: minmax(0, 1fr) 76px 100px 32px;
    row-gap: 0.5rem;
  }

  .cat-row > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .cat-head > :nth-child(2) {
    display: none;
  }
}

/* 매매전략 만들기 — 종목 배분 표. 머리글·행·합계가 같은 격자를 써서 열이 전 행에서 맞는다. */
.ts-w-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 7rem 6.5rem 2rem;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
}

.ts-w-row + .ts-w-row {
  border-top: 1px solid var(--border);
}

.ts-w-row .r {
  text-align: right;
}

.ts-w-head {
  min-height: 0;
  padding: 0 0 0.5rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.ts-w-sum {
  border-top: 2px solid var(--border);
  font-weight: 700;
}

.ts-w-pct {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.ts-w-pct .cell {
  width: 4.5rem;
}

/* 계좌별 전략 구성 — 계좌 탭(알약)과 전략 표 */
.acct-tab {
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--muted-foreground);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  min-height: 44px;
  white-space: nowrap;
  cursor: pointer;
}

.acct-tab[aria-selected="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
  font-weight: 600;
}

/* 거래에는 없고 배정에만 남은 계좌명(계좌 이름을 바꾼 경우) */
.acct-tab.is-orphan {
  border-style: dashed;
  opacity: 0.6;
}

.ts-s-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 10rem 5.5rem minmax(12rem, 1.2fr) 2rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  font-size: 0.875rem;
}

#ts-s-rows > .ts-s-row + .ts-s-row {
  border-top: 1px solid var(--border);
}

.ts-s-row .r {
  text-align: right;
}

.ts-s-head {
  padding: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.ts-s-sum {
  border-top: 2px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 700;
}

.ts-s-muted {
  color: var(--muted-foreground);
}

.ts-principal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.ts-principal .cell {
  width: 8.5rem;
}

.ts-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}

/* 같은 계좌의 전략 두 개 이상에 담긴 종목 */
.stock-chip.shared {
  background-color: color-mix(in oklch, var(--chart-4) 22%, transparent);
  font-weight: 600;
}

.pill-pct {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: var(--muted);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .ts-s-row {
    grid-template-columns: minmax(0, 1fr) 8.5rem 2rem;
  }
  .ts-s-row .ts-col-pct,
  .ts-s-row .ts-col-chips {
    display: none;   /* 좁은 화면에서는 전략·원금만. 칸은 클래스로 고른다(:nth-child는 열이 바뀌면 조용히 엉뚱한 칸을 숨긴다) */
  }
}

/* ── 배분 트리거 (4-2-1) ─────────────────────────────────────────── */
/* 전략별 제안 표. 7칸이라 좁은 화면에서는 줄이지 않고 가로로 스크롤한다(.ts-scroll). */
.ts-scroll {
  overflow-x: auto;
}
.ts-scroll > div {
  min-width: 46rem;
}

.t-cols {
  display: grid;
  grid-template-columns: minmax(9rem, 1.25fr) 4.25rem 4.25rem 4.75rem 4rem 7.25rem 8.5rem;
  align-items: center;
  gap: 0.4375rem;
}
.t-cols .r,
.order-cols .r {
  text-align: right;
}
.t-head {
  font-size: 0.8125rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0;
}
.t-row {
  min-height: 2.75rem;
  padding: 0.4375rem 0;
  font-size: 0.8125rem;
  border-top: 1px solid var(--border);
}
.t-row.is-quiet {
  color: var(--muted-foreground);
}
.t-group {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 6px);
  background-color: var(--muted);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.t-group .cell {
  width: 7rem;
  height: 1.75rem;
}
.t-sub {
  padding: 0.4375rem 0;
  border-top: 1px dashed var(--border);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.order-cols {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 5rem 8rem minmax(8rem, 1fr) 5.5rem;
  align-items: center;
  gap: 0.5rem;
}
.order-row {
  min-height: 2.5rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  border-top: 1px solid var(--border);
}
.order-row.is-head {
  border-top: 0;
  font-weight: 600;
}
.order-row.is-total {
  border-top: 2px solid var(--border);
  font-weight: 700;
}

.tag-shared {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: color-mix(in oklch, var(--chart-4) 22%, transparent);
}

.ts-hint {
  margin-top: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: calc(var(--radius) - 4px);
  background-color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.ts-hint strong {
  color: var(--foreground);
}

/* ⓘ 5/25 설명. <details>라 여닫는 JS가 없다. */
.tip-wrap {
  position: relative;
  flex-shrink: 0;
  height: 44px;
  display: flex;
  align-items: center;
}
.tip-wrap > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
}
.tip-wrap > summary::-webkit-details-marker {
  display: none;
}
.tip-wrap[open] > summary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
}
.tip-pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  width: min(27rem, 80vw);
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--card);
  box-shadow: 0 8px 24px -6px hsl(0 0% 0% / 0.28), 0 2px 6px -2px hsl(0 0% 0% / 0.18);
  font-size: 0.8125rem;
  line-height: 1.7;
}
.tip-pop h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.tip-pop ul {
  margin: 0.5rem 0;
  padding-left: 1.125rem;
  list-style: disc;
}
.tip-pop p + p {
  margin-top: 0.5rem;
}
.tip-src {
  padding-top: 0.625rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ── 보유 자산 한 번에 넣기 (매매일지) ─────────────────────────────── */
.imp-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.imp-step-no {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background-color: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imp-paste {
  width: 100%;
  box-sizing: border-box;
  min-height: 8rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 6px);
  padding: 0.625rem 0.75rem;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  resize: vertical;
}
.imp-details > summary {
  margin-top: 0.375rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.imp-prompt {
  margin-top: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-radius: calc(var(--radius) - 6px);
  background-color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.65;
  white-space: pre-wrap;
  user-select: all;   /* 복사가 막힌 브라우저에서 한 번에 선택되게 */
}

/* 미리보기 격자. 칸은 클래스로 고른다(:nth-child 금지). 좁은 화면에서는 가로로 스크롤(.ts-scroll). */
.imp-cols {
  display: grid;
  grid-template-columns: minmax(9rem, 1.3fr) 6.5rem 5.5rem 6.5rem 7.5rem minmax(13rem, 1.5fr) 4.5rem;
  align-items: center;
  gap: 0.5rem;
}
.imp-cols .r {
  text-align: right;
}
.imp-head {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--border);
}
.imp-row {
  padding: 0.375rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
}
.imp-row .cell {
  width: 100%;
}
.imp-row.is-excluded {
  opacity: 0.45;
}
.imp-row .cell.is-bad {
  border-color: var(--destructive);
}
.imp-total {
  padding-top: 0.625rem;
  border-top: 2px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 700;
}
.imp-st {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.35;
}
.imp-st.ok {
  color: var(--chart-3);
  font-weight: 600;
}
.imp-st.err {
  color: var(--destructive);
  font-weight: 600;
}
.imp-st.warn::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background-color: var(--chart-4);
}