/* 공용 부품 (접두어 ui-) — 기준: docs/design-system.md §4
 * 화면 CSS(app.css·login.css)는 이 부품을 쓰고, 자기 접두어 클래스로 배치만 정한다. */

/* ── 버튼 ─────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 4.4rem;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.ui-btn:hover { background: var(--c-raised); }
.ui-btn svg { flex: none; }

.ui-btn--primary {
  border-color: transparent;
  background: var(--c-brand-strong);
  color: var(--c-on-brand);
  font-weight: 700;
}

.ui-btn--primary:hover { background: var(--c-brand-hover); }

.ui-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--c-text-2);
  font-weight: 500;
}

.ui-btn--quiet:hover { background: var(--c-raised); color: var(--c-text); }

.ui-btn--block { width: 100%; }
.ui-btn--sm { min-height: 3.6rem; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.ui-btn:disabled { opacity: 0.55; }

.ui-icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text-3);
  transition: background var(--t-fast), color var(--t-fast);
}

.ui-icon-btn:hover { background: var(--c-raised); color: var(--c-text); }
.ui-icon-btn--sm { width: 3.6rem; height: 3.6rem; border-radius: var(--r-sm); }
.ui-icon-btn--danger:hover { background: var(--c-danger-soft); color: var(--c-danger); }

@media (max-width: 760px) {
  .ui-icon-btn--sm { width: 4.4rem; height: 4.4rem; }
}

/* ── 카드 ─────────────────────────────────────────────── */
.ui-card {
  min-width: 0;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.ui-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}

.ui-card__title {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ui-card__sub {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.ui-card__link { font-size: var(--fs-sm); font-weight: 600; }

/* ── 입력 ─────────────────────────────────────────────── */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.ui-field__label {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ui-field__hint {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.ui-input {
  width: 100%;
  min-width: 0;
  height: 4.6rem;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-input);
  color: var(--c-text);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.ui-input::placeholder { color: var(--c-faint); }

.ui-input:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-ring);
}

.ui-input[readonly] {
  background: var(--c-raised);
  color: var(--c-text-2);
}

.ui-input--amount {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── 세그먼트 탭 ──────────────────────────────────────── */
.ui-seg {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-input);
}

.ui-seg__btn {
  flex: 1 1 0;
  min-height: 4rem;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.ui-seg__btn[aria-selected="true"] {
  background: var(--c-raised);
  color: var(--c-text);
  font-weight: 800;
  box-shadow: var(--shadow-card);
}

:root[data-theme="light"] .ui-seg__btn[aria-selected="true"] { background: var(--c-surface); }

.ui-seg__count {
  margin-left: var(--sp-1);
  color: var(--c-text-3);
  font-weight: 500;
}

/* ── 칩 · 금액 글자 ───────────────────────────────────── */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.5rem 1rem;
  border-radius: var(--r-sm);
  background: var(--c-raised);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.ui-chip--in { background: var(--c-in-soft); color: var(--c-in); }
.ui-chip--pending { background: var(--c-pending-soft); color: var(--c-pending); }

.ui-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-amt--in { color: var(--c-in); }
.ui-amt--out { color: var(--c-out); }
.ui-amt--left { color: var(--c-left); }
.ui-amt--pending { color: var(--c-pending); }
.ui-amt--neg { color: var(--c-danger); }
.ui-amt--muted { color: var(--c-text-2); font-weight: 500; }

/* ── 줄 목록 (라벨 · 금액) ────────────────────────────── */
.ui-lines { display: flex; flex-direction: column; }

.ui-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 4.2rem;
  border-bottom: 1px solid var(--c-line);
}

.ui-line:last-child { border-bottom: 0; }
.ui-line__label { min-width: 0; color: var(--c-text-2); }
.ui-line__sub { margin-left: var(--sp-1); color: var(--c-text-3); font-size: var(--fs-sm); }

.ui-line--total {
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 2px solid var(--c-border);
  border-bottom: 0;
  font-weight: 800;
}

.ui-line--total .ui-line__label { color: var(--c-text); }
.ui-line--total .ui-amt { font-size: var(--fs-md); }

/* ── 구성 막대 (A안) ──────────────────────────────────── */
.ui-split {
  display: flex;
  gap: 2px;
  height: 1.4rem;
  border-radius: 0.7rem;
  background: var(--split-track);
  overflow: hidden;
}

.ui-split--thin { height: 1rem; border-radius: 0.5rem; }
.ui-split__seg { min-width: 2px; transition: width var(--t-fast); }
.ui-split__seg--fixed { background: var(--split-fixed); }
.ui-split__seg--card { background: var(--split-card); }
.ui-split__seg--saving { background: var(--split-saving); }
.ui-split__seg--temp { background: var(--split-temp); }
.ui-split__seg--left { background: var(--split-left); }

.ui-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.ui-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); }

.ui-legend__dot {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.3rem;
}

.ui-legend__dot--fixed { background: var(--split-fixed); }
.ui-legend__dot--card { background: var(--split-card); }
.ui-legend__dot--saving { background: var(--split-saving); }
.ui-legend__dot--temp { background: var(--split-temp); }
.ui-legend__dot--left { background: var(--split-left); }

/* ── 팝업(시트) ───────────────────────────────────────── */
.ui-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--c-overlay);
  backdrop-filter: blur(6px);
}

.ui-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 48rem;
  max-height: min(84vh, 72rem);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.ui-sheet__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-2) var(--sp-6);
}

.ui-sheet__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 800;
}

.ui-sheet__body {
  padding: var(--sp-2) var(--sp-6) var(--sp-6);
  overflow-y: auto;
}

@media (max-width: 760px) {
  /* 모바일은 아래에서 올라오는 시트 */
  .ui-sheet { align-items: flex-end; padding: 0; }
  .ui-sheet__panel {
    max-width: none;
    max-height: 88vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── 토스트 ───────────────────────────────────────────── */
.ui-toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 3.2rem);
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .ui-toast-host { bottom: calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
}

.ui-toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 4.8rem;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-raised);
  color: var(--c-text);
  font-size: var(--fs-base);
  box-shadow: var(--shadow-pop);
  animation: ui-toast-in var(--t-fast);
}

.ui-toast__text { padding: var(--sp-2) 0; }
.ui-toast:not(:has(.ui-toast__action)) { padding-right: var(--sp-5); }

.ui-toast__action {
  min-height: 3.6rem;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  font-weight: 700;
  white-space: nowrap;
}

.ui-toast--leaving { opacity: 0; transition: opacity 0.18s; }

@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(0.8rem); }
  to { opacity: 1; transform: none; }
}

/* ── 넘기기 묶음 (모바일 전용) ────────────────────────── */
/* 데스크톱에서는 아무 모양도 주지 않는다 — 배치는 화면 CSS 가 min-width 미디어에서 정한다.
 * 모바일은 자식 카드 하나가 한 장: 옆으로 넘기고, 높이는 지금 장에 맞춘다(app.js setupDecks). */
.ui-pager { display: none; }

@media (max-width: 760px) {
  .ui-deck {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-inline: calc(-1 * var(--sp-4));
    padding-inline: var(--sp-4);
    scroll-padding-inline: var(--sp-4);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transition: height var(--t-fast);
  }

  .ui-deck::-webkit-scrollbar { display: none; }

  .ui-deck > * {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* 지금 몇 번째 장인지 — 눌러서 그 장으로 */
  .ui-pager {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    gap: var(--sp-1);
    margin: 0 calc(-1 * var(--sp-4)) var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-bg);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ui-pager::-webkit-scrollbar { display: none; }

  .ui-pager__btn {
    flex: none;
    min-height: 3.6rem;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
  }

  .ui-pager__btn[aria-selected="true"] {
    border-color: var(--c-brand-strong);
    background: var(--c-brand-soft);
    color: var(--c-brand-text);
    font-weight: 800;
  }
}

/* ── 빈 목록 ──────────────────────────────────────────── */
.ui-empty {
  padding: var(--sp-6) var(--sp-2);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  text-align: center;
}