/* iOS 스타일 컴포넌트 (iOS Human Interface Guidelines의 시스템 색상/치수 기준) */

:root {
  --bg: #f2f2f7;            /* systemGroupedBackground */
  --cell: #ffffff;          /* secondarySystemGroupedBackground */
  --label: #000000;
  --label2: rgba(60, 60, 67, 0.6);
  --label3: rgba(60, 60, 67, 0.3);
  --sep: rgba(60, 60, 67, 0.29);
  --fill: rgba(118, 118, 128, 0.12);
  --seg-thumb: #ffffff;
  --bar: rgba(249, 249, 249, 0.92);
  --sheet-bg: #f2f2f7;
  --blue: #007aff;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --cell: #1c1c1e;
    --label: #ffffff;
    --label2: rgba(235, 235, 245, 0.6);
    --label3: rgba(235, 235, 245, 0.3);
    --sep: rgba(84, 84, 88, 0.65);
    --fill: rgba(118, 118, 128, 0.24);
    --seg-thumb: #636366;
    --bar: rgba(22, 22, 23, 0.92);
    --sheet-bg: #1c1c1e;
    --blue: #0a84ff;
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;
    color-scheme: dark;
  }
  .sheet-panel .group { background: #2c2c2e; }
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  padding-top: env(safe-area-inset-top);
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

/* ----- 텍스트 ----- */
.large-title { font-size: 34px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.2; }
.caption { font-size: 13px; color: var(--label2); }
.text-secondary { color: var(--label2); }
.text-blue { color: var(--blue); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-orange { color: var(--orange); }
.amount-lg { font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.border-l-hair { border-left: 0.5px solid var(--sep); }

/* ----- 그룹 목록 (Inset Grouped List) ----- */
.section-header { font-size: 13px; color: var(--label2); padding: 0 16px 7px; font-weight: 400; }
.section-footer { font-size: 13px; color: var(--label2); padding: 7px 16px 0; line-height: 1.4; }
.group { background: var(--cell); border-radius: 10px; overflow: hidden; list-style: none; margin: 0; padding: 0; }
.row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 16px; --inset: 16px;
}
.group > .row:not(:first-child)::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--inset);
  border-top: 0.5px solid var(--sep);
}
.row.with-icon { --inset: 58px; padding-top: 8px; padding-bottom: 8px; }
.tap { cursor: pointer; transition: background-color 0.15s; }
.tap:active { background: var(--fill); }
.row-label { flex-shrink: 0; min-width: 4.5em; }
.row input {
  flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent;
  text-align: right; color: var(--label);
}
.row input::placeholder { color: var(--label3); }
.row input[type="datetime-local"] { color: var(--blue); }
.row input[list]::-webkit-calendar-picker-indicator { display: none !important; } /* 자동완성 화살표 숨김 (정렬 유지) */
.chevron { width: 8px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--label3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.icon-square {
  position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 600;
}
.pending-dot {
  position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange); border: 2px solid var(--cell);
}

/* ----- 세그먼트 컨트롤 ----- */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--fill); border-radius: 9px; padding: 2px;
}
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; border-radius: 7px; font-size: 13px; font-weight: 500;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.seg input:checked + span {
  background: var(--seg-thumb); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}
.seg-sm span { height: 26px; }
.badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ----- 버튼 ----- */
.btn-filled {
  width: 100%; height: 50px; border-radius: 12px; background: var(--blue);
  color: #fff; font-weight: 600; transition: opacity 0.15s;
}
.btn-filled:active { opacity: 0.7; }
.nav-btn-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.nav-btn-icon:active { background: var(--fill); }
.nav-btn-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ----- 칩 (카테고리 선택) ----- */
.chip {
  height: 32px; padding: 0 14px; border-radius: 16px; font-size: 15px;
  background: var(--cell); color: var(--label); transition: background-color 0.15s;
}
.chip[aria-pressed="true"] { background: var(--blue); color: #fff; font-weight: 600; }

/* ----- 빈 상태 ----- */
.empty { text-align: center; padding: 64px 0; color: var(--label3); }
.empty svg { width: 44px; height: 44px; margin: 0 auto 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.empty p { color: var(--label2); font-size: 15px; }

/* ----- 탭바 ----- */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--sep);
  padding-bottom: max(env(safe-area-inset-bottom), 6px);
}
.tab-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-top: 7px; font-size: 10px; font-weight: 500; color: #999;
}
.tab-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-btn svg .dot { fill: currentColor; stroke: none; }
.tab-btn.active { color: var(--blue); }

/* ----- 시트 ----- */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s; }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 32rem;
  max-height: calc(100% - 44px); display: flex; flex-direction: column;
  background: var(--sheet-bg); border-radius: 12px 12px 0 0;
  transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--label3); margin: 6px auto 0; }
.sheet-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 0 16px; }
.sheet-body { overflow-y: auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }

/* ----- 토스트 (HUD) ----- */
.toast {
  position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%); z-index: 30;
  padding: 10px 18px; border-radius: 22px; font-size: 15px; font-weight: 500;
  background: rgba(30, 30, 30, 0.85); color: #fff;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}