/* ============================================================================
   MERIDIAN UI System — 「UI/UX Design Specification」 적용 레이어
   ----------------------------------------------------------------------------
   명세서는 모바일 중심 금융 인터페이스의 '구조'를 정한다:
     색의 위계 · 타이포 5단 · 8pt 여백 · 버튼/입력/리스트/바텀시트/토글/빈 화면/아이콘.
   여기서는 그 구조만 가져오고, **색은 MERIDIAN 고유 팔레트(옥스블러드·웜 아이보리)를
   그대로 쓴다.** 명세의 회색 단계는 우리 웜 그레이에 역할로 1:1 대응시킨다.

     명세                      MERIDIAN (기존 값 유지)
     Gray 900 제목       →     --text        #1C1B19
     Gray 800 본문       →     --text-sub    #4A463F
     Gray 500 캡션       →     --text-mute   #8A8478
     Gray 200 경계선     →     --border      #ECE5D8
     Gray 100 배경       →     --bg          #FAF7F0
     White 카드          →     --bg-card     #FFFFFF
     Blue  Primary       →     --primary     #6E1E2B (옥스블러드)
     Red   Error         →     --red         #B23A2E
     Green Success       →     --green       #2F7D63

   style.css 다음에 읽혀 그 위를 덮는다. 기능·마크업은 건드리지 않는다.
   ============================================================================ */

:root {
  /* ── 1. 역할색 (값은 기존 브랜드 변수를 가리킨다) ── */
  --c-title: var(--text);
  --c-body: var(--text-sub);
  --c-caption: var(--text-mute);
  --c-line: var(--border);
  --c-line-strong: var(--border-strong);
  --c-surface: var(--bg-card);
  --c-accent: var(--primary);
  --c-accent-soft: var(--primary-soft);
  --c-error: var(--red);
  --c-success: var(--green);
  --fill-weak: #F4F0E6;        /* 아이콘 원·비활성 면 — 카드(흰색)보다 한 톤 깊은 웜 뉴트럴 */
  --fill-disabled-fg: #B6AFA2;

  /* ── 2. 타이포 5단 (명세 §2) ── */
  --t1-size: 24px; --t1-weight: 700; --t1-lh: 1.4;    /* 페이지 타이틀 · 금액 */
  --t2-size: 18px; --t2-weight: 600; --t2-lh: 1.45;   /* 섹션 헤딩 · 모달 제목 */
  --b1-size: 15px; --b1-weight: 500; --b1-lh: 1.5;    /* 본문 · 리스트 아이템 이름 */
  --b2-size: 13px; --b2-weight: 400; --b2-lh: 1.5;    /* 서브 텍스트 · 설명글 */
  --cap-size: 11px; --cap-weight: 400; --cap-lh: 1.4; /* 부가 정보 · 날짜 · 에러 */

  /* ── 3. 8pt 기준 여백 (명세 §3) ── */
  --s-xs: 4px;    /* 반 칸 — 라벨과 값처럼 붙어 있는 것 */
  --s-sm: 8px;    /* 아이콘 ↔ 텍스트 */
  --s-md: 16px;   /* 기본 패딩 — 리스트 상하, 컴포넌트 안쪽 */
  --s-lg: 24px;   /* 섹션 사이 · 화면 좌우 */
  --s-xl: 32px;
  --s-2xl: 40px;

  /* ── 4. 컨트롤 (명세 §4·§8: 터치 영역 최소 48px) ── */
  --h-control: 48px;
  --h-control-sm: 40px;
  --r-control: 12px;
  --r-sheet: 20px;
  --tap-min: 44px;
}

/* ============================================================================
   2. 타이포그래피 — 크기·굵기 대비로 위계를 만든다
   ============================================================================ */
.t1, .hero-title {
  font-size: var(--t1-size);
  font-weight: var(--t1-weight);
  line-height: var(--t1-lh);
  color: var(--c-title);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.t2, .card h2, .card-header h2 {
  font-size: var(--t2-size);
  font-weight: var(--t2-weight);
  line-height: var(--t2-lh);
  color: var(--c-title);
  letter-spacing: -.01em;
}
.b1 { font-size: var(--b1-size); font-weight: var(--b1-weight); line-height: var(--b1-lh); color: var(--c-body); }
.b2, .hero-sub { font-size: var(--b2-size); font-weight: var(--b2-weight); line-height: var(--b2-lh); color: var(--c-body); }
/* .muted 는 '설명글' 이므로 Body 2(13px), .caption 은 '부가 정보·날짜·에러'라 11px */
.muted { font-size: var(--b2-size); font-weight: var(--b2-weight); line-height: var(--b2-lh); color: var(--c-caption); }
.caption { font-size: var(--cap-size); font-weight: var(--cap-weight); line-height: var(--cap-lh); color: var(--c-caption); }

/* 넓은 화면에서는 페이지 타이틀에 에디토리얼 여유를 조금 더 준다 (모바일은 명세 그대로 24px) */
@media (min-width: 721px) {
  .hero-title { font-size: 28px; }
}
.hero-sub { font-size: var(--b1-size); line-height: var(--b1-lh); }

/* ============================================================================
   3. 버튼 (명세 §4) — 높이 48px · radius 12px · padding 16/24
      Primary 는 화면당 하나. 보조 액션은 Light, 그다음이 Ghost.
   ============================================================================ */
/* display 만 따로, 명시도 0 으로 둔다 — 화면별로 숨겨 둔 버튼(.save-inline 등)을
   이 레이어가 다시 보이게 만들면 안 된다 */
:where(.btn-primary, .btn-light, .btn-ghost, .btn-excel) { display: inline-flex; }

.btn-primary,
.btn-light,
.btn-ghost,
.btn-excel {
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  border-radius: var(--r-control);
  font-size: var(--b1-size);
  line-height: 1.2;
  letter-spacing: -.01em;
  transition: background .15s, color .15s, border-color .15s;
  box-shadow: none;                       /* Flat & Clean — 그림자 없음 */
}

.btn-primary {
  min-height: var(--h-control);
  padding: var(--s-md) var(--s-lg);
  background: var(--c-accent);
  color: #FFFFFF;
  font-weight: 700;
}
.btn-primary:hover { background: var(--primary-strong); transform: none; }
.btn-primary:active { background: var(--primary-strong); }
.btn-primary:disabled,
.btn-primary[disabled] {
  background: var(--fill-weak);
  color: var(--fill-disabled-fg);
  cursor: not-allowed;
}

/* 보조 액션 — 연한 브랜드 면 + 브랜드 글자 (명세의 Light Button) */
.btn-light {
  min-height: var(--h-control);
  padding: var(--s-md) var(--s-lg);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 600;
  border: none;
}
.btn-light:hover { background: #ECDCDC; }
.btn-light:disabled { background: var(--fill-weak); color: var(--fill-disabled-fg); cursor: not-allowed; }

/* 되돌릴 수 없는 동작 — 같은 형태에 색만 경고색으로 */
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm);
  min-height: var(--h-control);
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-control);
  background: var(--c-error);
  color: #FFFFFF;
  font-size: var(--b1-size); font-weight: 700; line-height: 1.2;
  border: none;
  transition: background .15s;
}
.btn-danger:hover { background: #8E2C22; }

/* 셋째 단계 — 면 없이 괘선만. 밀집한 툴바에서 쓰므로 높이를 한 단 낮춘다 */
.btn-ghost {
  min-height: var(--h-control-sm);
  padding: 10px var(--s-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-body);
  font-size: var(--b2-size);
  font-weight: 600;
}
.btn-ghost:hover { background: var(--fill-weak); color: var(--c-title); border-color: var(--c-line-strong); }
.btn-ghost:disabled { background: var(--fill-weak); color: var(--fill-disabled-fg); border-color: var(--c-line); cursor: not-allowed; }

.btn-excel { min-height: var(--h-control-sm); padding: 10px var(--s-md); font-size: var(--b2-size); font-weight: 600; }

/* 모바일에서는 모든 액션이 손가락 크기를 지킨다 */
@media (max-width: 720px) {
  .btn-ghost, .btn-excel { min-height: var(--tap-min); }
  .footer-cta .btn-primary { width: 100%; }
}

/* 버튼·탭 안의 아이콘 (명세 §10: 20px / 1.5px 획) */
.btn-primary svg, .btn-light svg, .btn-ghost svg, .btn-excel svg, .subtab svg {
  width: 20px; height: 20px; flex-shrink: 0;
}
.btn-primary svg *, .btn-light svg *, .btn-ghost svg *, .btn-excel svg *, .subtab svg * { stroke-width: 1.5; }

/* ============================================================================
   4. 입력 필드 (명세 §5) — 기본 / 활성(브랜드 테두리) / 에러(붉은 테두리 + 하단 메시지)
   ============================================================================ */
.field { padding: var(--s-sm) 0; }
.field label {
  font-size: var(--b2-size);
  font-weight: 600;
  color: var(--c-body);
  margin-bottom: var(--s-sm);
}

.input-row,
.field input[type=text],
.field input[type=number],
.field input[type=date],
.field input[type=password],
.field input[type=email],
.field select {
  min-height: var(--h-control);
  border-radius: var(--r-control);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.input-row:focus-within {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.input-row input { font-size: var(--b1-size); }

/* 에러 — 테두리 + 그 아래 캡션 한 줄 */
.field.is-error .input-row,
.field.is-error input,
.field.is-error select,
.input-row.is-error { border-color: var(--c-error); }
.field.is-error .input-row:focus-within,
.field.is-error input:focus { box-shadow: 0 0 0 3px var(--red-soft); }
.field-msg {
  display: block;
  margin-top: var(--s-sm);
  font-size: var(--cap-size);
  line-height: var(--cap-lh);
  color: var(--c-caption);
}
.field.is-error .field-msg { color: var(--c-error); }

/* ============================================================================
   5. 리스트 아이템 (명세 §6)
      좌측 40px 원형 아이콘 · 가운데 메인/서브 텍스트 · 우측 핵심 수치
   ============================================================================ */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-md);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  width: 100%;
}
.list-item:last-child { border-bottom: none; }
.list-item__icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--fill-weak);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--c-body);
  font-size: var(--b2-size); font-weight: 700;
}
.list-item__icon svg { width: 20px; height: 20px; }
.list-item__icon svg * { stroke-width: 1.5; }
.list-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.list-item__title {
  font-size: var(--b1-size); font-weight: 600; line-height: var(--b1-lh);
  color: var(--c-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-item__sub { font-size: var(--b2-size); font-weight: 400; line-height: var(--b2-lh); color: var(--c-caption); }
.list-item__value {
  margin-left: auto; text-align: right; flex-shrink: 0;
  font-size: var(--b1-size); font-weight: 600; color: var(--c-title);
  font-variant-numeric: tabular-nums;
}
.list-item__value .sub { display: block; font-size: var(--b2-size); font-weight: 400; color: var(--c-caption); }
.list-item__value.is-up { color: var(--red); }
.list-item__value.is-down { color: var(--green); }

/* 기존 보유 종목 줄도 같은 규칙으로 — 상하 16px, 이름 15/600, 부가 13/캡션색 */
.holding-row { padding-top: var(--s-md); padding-bottom: var(--s-md); }
.holding-row .name-inline-input { font-size: var(--b1-size); font-weight: 600; color: var(--c-body); }

/* ============================================================================
   6. 바텀 시트 (명세 §7) — 모바일에서는 새 창 대신 아래에서 올라오는 시트
   ============================================================================ */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(28, 27, 25, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: 100%; max-width: 560px;
  background: var(--c-surface);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: var(--s-sm) var(--s-lg) calc(var(--s-lg) + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto;
  animation: sheet-up .22s cubic-bezier(.22, .61, .36, 1);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet::before {                      /* 손잡이 — 겹쳐져 있음을 알린다 */
  content: ''; display: block;
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--c-line-strong);
  margin: var(--s-sm) auto var(--s-md);
}
.sheet h3 {
  margin: 0 0 var(--s-sm);
  font-size: var(--t2-size); font-weight: var(--t2-weight); line-height: var(--t2-lh);
  color: var(--c-title);
}
.sheet p { margin: 0 0 var(--s-lg); font-size: var(--b2-size); line-height: var(--b2-lh); color: var(--c-caption); }
.sheet-actions { display: flex; flex-direction: column; gap: var(--s-sm); }
.sheet-actions .btn-primary, .sheet-actions .btn-light, .sheet-actions .btn-ghost { width: 100%; }
@media (min-width: 721px) {           /* 넓은 화면에서는 가운데 카드로 */
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: var(--r-sheet); max-width: 440px; animation: none; padding-bottom: var(--s-lg); }
  .sheet::before { display: none; }
  .sheet-actions { flex-direction: row; justify-content: flex-end; }
  .sheet-actions .btn-primary, .sheet-actions .btn-light, .sheet-actions .btn-ghost { width: auto; }
}

/* 기존 오버레이(히트맵 크게 보기 · 투자 원칙)도 모바일에서는 시트처럼 */
@media (max-width: 720px) {
  .kh-modal-inner, .journal-panel {
    border-radius: var(--r-sheet) var(--r-sheet) 0 0 !important;
    margin-top: auto !important;
    max-height: 90vh;
  }
}

/* ============================================================================
   7. 토글 (명세 §8) — 손가락이 닿는 넓이를 먼저 확보한다
   ============================================================================ */
.toggle { gap: var(--s-md); min-height: var(--tap-min); }
.toggle label {
  width: 52px; height: 32px;
  background: var(--c-line-strong);
}
.toggle label::after { width: 26px; height: 26px; top: 3px; left: 3px; box-shadow: none; }
.toggle input:checked + label { background: var(--c-accent); }
.toggle input:checked + label::after { left: 23px; }
.toggle-text { display: flex; flex-direction: column; gap: 2px; }
.toggle-text b { font-size: var(--b1-size); font-weight: 600; color: var(--c-body); }
.toggle-hint { font-size: var(--b2-size); color: var(--c-caption); }

/* 세그먼트·탭도 탭하기 쉬운 높이로 */
.seg button { min-height: var(--h-control-sm); padding: 10px var(--s-md); font-size: var(--b2-size); }
.seg button.on { box-shadow: none; border: 1px solid var(--c-line); }
@media (max-width: 720px) { .seg button { min-height: var(--tap-min); } }

/* ============================================================================
   8. 빈 화면 (명세 §9) — 설명 + 다음 행동. 그림 이모지는 쓰지 않고 스케치 SVG로.
   ============================================================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-sm);
  padding: var(--s-2xl) var(--s-lg);
  text-align: center;
}
.empty-state__art { color: var(--c-line-strong); margin-bottom: var(--s-sm); }
.empty-state__art svg { width: 56px; height: 56px; display: block; }
.empty-state__art svg * { stroke-width: 1.5; }
.empty-state__title { font-size: var(--b1-size); font-weight: 600; color: var(--c-body); margin: 0; }
.empty-state__desc { font-size: var(--b2-size); line-height: var(--b2-lh); color: var(--c-caption); margin: 0; }
.empty-state .btn-primary, .empty-state .btn-light { margin-top: var(--s-md); }

/* ============================================================================
   9. 여백 리듬 (명세 §3) — 섹션 24px · 컴포넌트 안쪽 16px
   ============================================================================ */
/* 화면 좌우 여백은 style.css 의 반응형 규칙(과 좌측 레일이 비워 둔 자리)을 그대로 둔다 —
   여기서는 카드와 섹션의 안쪽 리듬만 8pt 로 맞춘다 */
.card { padding: var(--s-lg); margin-bottom: var(--s-md); box-shadow: none; }
.card-header { margin-bottom: var(--s-md); gap: var(--s-md); }
.hero { padding: var(--s-lg) 0; }
.hero-title { margin-bottom: var(--s-sm); }
@media (max-width: 720px) {
  .card { padding: var(--s-md); }
}

/* ============================================================================
   10. 아이콘 체계 (명세 §10)
       24px/2px = 하단 네비·헤더 주요 액션 · 20px/1.5px = 리스트·보조 버튼 · 16px/1.5px = 캡션 옆
       평소에는 획(stroke), 선택되었을 때만 면(fill).
   ============================================================================ */
.mob-tab svg { width: 24px; height: 24px; stroke-width: 2; }
.mob-tab.active svg { stroke-width: 2; fill: var(--c-accent-soft); }
.mob-tab { font-size: var(--cap-size); gap: var(--s-xs); min-height: var(--tap-min); }

.caption svg, .muted svg, .field-msg svg { width: 16px; height: 16px; }
.caption svg *, .muted svg *, .field-msg svg * { stroke-width: 1.5; }

/* ============================================================================
   11. 상단 바 · 서브탭 — 스크롤과 무관하게 제자리에 고정
       서브탭 바는 헤더 **바로 아래**에 붙는다. 높이를 숫자로 박아 두면
       (예전 top:55px) 헤더가 한 줄 늘어나는 순간 칩이 헤더에 가려 잘린다 —
       실제 높이를 app.js 가 --topbar-h 로 넣어 준다.
   ============================================================================ */
.subtab-bar { top: var(--topbar-h, 56px); }
@media (min-width: 861px) {
  /* 좌측 레일: 화면 가운데에 고정. 스크롤을 따라 흔들리던 움직임은 없앴다 */
  .subtab-bar { top: 50%; transform: translateY(-50%) !important; transition: none; }
}

.topbar-meta .btn-ghost, .brand-name, .brand-sub { white-space: nowrap; }
/* 게임 버튼 이름 — 넓은 화면은 긴 이름(.bl), 휴대폰은 짧은 이름(.bs). 로그인하면 이름 · 로그아웃까지 붙어 막대가 화면보다 넓어지고
   페이지 전체가 옆으로 밀렸다(412px 폰에서 461px) — 2026-09-28 사용자 캡처 */
.btn-game .bs { display: none; }
.topbar-inner { min-width: 0; }
.brand, .topbar-meta { flex-shrink: 0; }                      /* 모자라면 가운데 단계 메뉴가 줄고(가로로 밀림) 양끝은 그대로 */
/* 단계 메뉴가 보이는 769~1100px 에서도 로그인하면 막대가 1,060px 이 필요해 넘쳤다 → 1100px 아래는 짧은 이름 · 이름 감춤 */
@media (max-width: 1100px) {
  .btn-game .bl { display: none; }
  .btn-game .bs { display: inline; }
  #userLabel.user-label { display: none !important; }        /* 로그인 이름은 로그아웃 단추의 title 에 남는다 */
}
@media (max-width: 480px) {
  .brand-sub { display: none; }
  .topbar-meta .btn-ghost { padding: 10px 12px; }
  .topbar-inner { gap: var(--s-sm); padding-left: 12px; padding-right: 12px; }
  /* 게임 버튼이 둘(Merdian World · Dream House)이라 좁은 폰에서는 한 단 작게 — 로그인까지 한 줄에 */
  .topbar-meta .btn-game { font-size: 12px; padding: 8px 9px; }
  #authArea { gap: 6px !important; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 14px; }
  .topbar-meta .btn-game { font-size: 11.5px; padding: 8px 7px; }
  .topbar-meta .btn-ghost { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 345px) {
  .topbar-inner { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .brand-name { font-size: 12.5px; }
  .topbar-meta .btn-game { font-size: 10.5px; padding: 8px 5px; }
  .topbar-meta .btn-ghost { padding-left: 6px; padding-right: 6px; font-size: 11px !important; }
  #authArea { gap: 4px !important; }
}

/* ============================================================================
   12. 필터 칩 = Light Button (명세 §4) — 시각적 부담을 줄인 보조 액션
   ============================================================================ */
.preset-chip {
  min-height: var(--h-control-sm);
  padding: 10px var(--s-md);
  font-size: var(--b2-size);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border: none;
  white-space: nowrap;          /* 칩 안에서 글자가 세 줄로 쪼개지지 않게 — 줄바꿈은 칩 단위로 */
}
.preset-chip:hover { background: #ECDCDC; color: var(--primary-strong); transform: none; }
@media (max-width: 720px) { .preset-chip { min-height: var(--tap-min); } }

/* 카드 머리의 도구(기간 선택 등)도 손가락이 닿는 크기로 — 표 안의 촘촘한 입력칸은 그대로 둔다 */
.card-header select, .card-header input,
.position-actions select, .position-actions input[type=date] {
  min-height: var(--h-control-sm);
  border-radius: 10px;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-body);
  font-size: var(--b2-size);
  padding: 0 10px;
}
@media (max-width: 720px) {
  .card-header select, .card-header input,
  .position-actions select, .position-actions input[type=date] { min-height: var(--tap-min); }
}

/* 표 안에서 직접 고치는 입력칸도 같은 상태 규칙을 따른다 */
.holding-row input:focus,
.name-inline-input:focus,
.shares-input:focus,
.notional-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
  border-radius: 8px;
}

/* ============================================================================
   13. 정렬되는 표 머리 — 머리칸 전체가 버튼. 정렬된 열만 브랜드색 + ▲/▼
   ============================================================================ */
.th-sort {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  width: 100%;
  padding: 0; margin: 0;
  background: none; border: none;
  font: inherit; color: inherit; font-weight: inherit;
  text-align: inherit; cursor: pointer;
  min-height: 32px;
}
th[style*="right"] .th-sort { justify-content: flex-end; }
.th-sort:hover { color: var(--c-accent); }
.th-sort.sorted { color: var(--c-accent); font-weight: 700; }
.th-arrow { display: inline-block; min-width: 10px; font-size: 10px; line-height: 1; }

/* ============================================================================
   14. 초점 표시 — 상태는 언제나 눈에 보이게
   ============================================================================ */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 남아 있던 파란 그림자 잔재 제거 — 브랜드 색이 아니고, Flat & Clean 에도 어긋난다 */
.brand-logo { filter: none; }