/* layout: 흰 상단 내비 + 가운데 정렬 히어로(검색·칩) + 고정 합계 카드 + 서비스 카드 그리드 */
:root {
  /* 의도적으로 라이트 테마 하나만 사용(사용자 요청: 전체 흰색 + 검은 버튼) */
  --bg: #ffffff; --surface: #ffffff; --fg: #111111; --muted: #6b6b6b; --line: #dcdcdc; --line-soft: #ececec;
  --accent: #111111; --accent-soft: #f4f4f4; --cloud: #eeeeee; --on-accent: #ffffff;
  --sans: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: light;
}
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.5 }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface) }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.num { font-variant-numeric: tabular-nums }
[hidden] { display: none !important }

nav.top { background: var(--surface); border-bottom: 1px solid var(--line-soft) }
nav.top .wrap { display: flex; align-items: center; gap: 24px; height: 56px }
.logo { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px }
.logo i { width: 22px; height: 22px; border-radius: 6px; background: var(--fg); display: inline-block }
.tabs { display: flex; gap: 20px; font-size: 14px; color: var(--muted) }
.tabs b { color: var(--fg); font-weight: 700 }

.hero { text-align: center; padding-block: 24px 20px }
.hero h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 800; line-height: 1.35; margin: 0 0 12px; text-wrap: balance; letter-spacing: -0.02em }
.hero h1 em { font-style: normal; color: var(--accent) }
.hero p { color: var(--muted); margin: 0 0 28px }
.search { display: flex; gap: 8px; max-width: 640px; margin: 0 auto }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13px }
.chips span { color: var(--muted); align-self: center; margin-right: 4px }
.chip { font: inherit; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 9999px; padding: 6px 14px; cursor: pointer }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500 }
.btn { font: inherit; font-weight: 700; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; padding: 0 20px; cursor: pointer }
.btn.ghost { background: var(--surface); color: var(--muted); border: 1px solid var(--line); font-weight: 500; font-size: 13px; padding: 6px 12px; border-radius: 9999px }
:is(input, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.summary { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; padding-block: 8px }
.summary .box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; box-shadow: 0 4px 16px rgb(17 24 39 / .06) }
.stat { display: flex; flex-direction: column }
.stat span { font-size: 12px; color: var(--muted) }
.stat b { font-size: 20px; font-weight: 700 }
.stat.main b { font-size: 28px; color: var(--accent); font-weight: 800 }
.opts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--muted) }
.opts input[type=number] { width: 84px }
.opts select { font: inherit; font-size: 13px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; max-width: 100% }
input[type=number] { font: inherit; font-size: 14px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; text-align: right; font-variant-numeric: tabular-nums }

/* 카드 폭이 화면 폭에 비례: 좁으면 1~2열, 넓으면 3~4열 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(220px, 26vw, 320px)), 1fr)); gap: clamp(10px, 1.5vw, 16px); padding-block: 16px 24px }
#mine { grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(200px, 22vw, 260px)), 1fr)) }
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; padding: clamp(12px, 1.6vw, 18px); min-width: 0 }
.card h2 { font-size: 16px; font-weight: 700; margin: 0 0 4px; display: flex; justify-content: space-between; gap: 8px }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0 }
.logo-i { width: 18px; height: 18px; flex: none; fill: var(--fg) }
.logo-i.letter { display: grid; place-items: center; border-radius: 5px; background: var(--fg); color: var(--surface); font-size: 11px; font-weight: 800 }
.card h2 small { font-size: 13px; color: var(--accent); font-weight: 700 }
.card .cat { font-size: 12px; color: var(--muted); margin-bottom: 10px }
.pick { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px }
.pick.on { border-color: var(--accent); background: var(--accent-soft) }
.pick select { width: 100%; font: inherit; font-size: 15px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; cursor: pointer }
.amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px }
.amount b { font-size: 22px; font-weight: 800 }
.amount > span { color: var(--muted); font-size: 13px }
.amount .usd { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted) }
.amount .usd input { width: 76px }
/* 흰 체크박스 + 검은 체크 표시 */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; vertical-align: -3px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 4px; cursor: pointer; display: inline-grid; place-content: center }
input[type=checkbox]:checked { border-color: var(--fg) }
input[type=checkbox]:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--fg); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) }
.add-tile { display: grid; place-items: center; align-content: center; gap: 8px; min-height: clamp(110px, 14vw, 170px); background: var(--surface); border: 1.5px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; text-decoration: none }
.add-tile:hover { border-color: var(--fg); color: var(--fg) }
.add-tile b { width: 44px; height: 44px; border-radius: 50%; background: var(--fg); color: var(--surface); display: grid; place-items: center; font-size: 26px; font-weight: 400; line-height: 1 }
.card h2 a { font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none }
.card h2 a:hover { color: var(--fg) }
.card h2 .acts { display: flex; align-items: center; gap: 12px; margin-left: auto }
#mine .card h2 { flex-wrap: wrap; align-items: center; row-gap: 4px; column-gap: 12px }
.card h2 .del { font: inherit; font-size: 12px; font-weight: 500; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer }
.card h2 .del:hover { color: #b42318 }
.payday { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted) }
.payday select { font: inherit; font-size: 13px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; cursor: pointer }
.payday input { width: 64px }
.mine-plan s { font-size: 12px; margin-left: 4px }
.payday .next { color: var(--fg); font-weight: 700 }
.mine-plan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 14px; padding-top: 6px; border-top: 1px solid var(--line-soft); margin-top: 6px }
.mine-plan span:last-child { color: var(--muted) }
/* 곰은 왼쪽 아래, 생각풍선(로고)은 오른쪽 위, 작은 원 두 개가 곰 머리에서 풍선으로 이어짐. 모든 크기는 --s 하나에서 계산 */
.brandmark { --s: clamp(36px, 8vw, 64px); display: grid; grid-template-columns: auto auto; grid-template-areas: ". bubble" "bear trail"; justify-content: center; padding-top: 32px }
a.brandmark { color: inherit; text-decoration: none; width: fit-content; margin-inline: auto }
.brandmark .bear { grid-area: bear; margin-top: calc(var(--s) * -0.3) }
.trail { grid-area: trail; justify-self: start; align-self: start }
/* 구름: 상자 크기에 맞춰 늘어나는 SVG 윤곽선(선 굵기는 고정). isolation으로 글자 뒤에 깔림 */
.bubble { grid-area: bubble; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: calc(var(--s) * 0.14); padding: calc(var(--s) * 0.4) calc(var(--s) * 0.8) calc(var(--s) * 0.72); align-items: center; text-align: center }
.bubble .cloud { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible }
.bubble .cloud path { fill: var(--surface); stroke: var(--fg); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.trail { display: flex; flex-direction: column; align-items: center; gap: calc(var(--s) * 0.06); padding-block: calc(var(--s) * 0.08); padding-left: calc(var(--s) * 0.15) }
.trail i { display: block; border: 3px solid var(--fg); border-radius: 50%; width: calc(var(--s) * 0.3); height: calc(var(--s) * 0.3) }
.trail i + i { width: calc(var(--s) * 0.18); height: calc(var(--s) * 0.18); margin-right: calc(var(--s) * 0.25) }
.brandmark .bear { height: calc(var(--s) * 2); width: auto; aspect-ratio: 300 / 350; flex: none }
.wordmark { font-size: var(--s); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9 }
.wordmark small { font-size: 0.4em; font-weight: 700; margin-left: 0.04em }
.tagline { margin: 0; font-size: calc(var(--s) * 0.26); line-height: 1.2; font-weight: 500; color: var(--muted); padding-left: 0.12em }
.home-h { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.02em }
.home-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 32px }
/* Remind: Reset 옆 버튼, 누르면 아래로 떠 있는 패널 */
/* 패널은 합계 상자 오른쪽 아래에 붙여서 화면 밖으로 안 나가게 */
.summary .box { position: relative }
.remind summary { list-style: none; cursor: pointer }
.remind summary::-webkit-details-marker { display: none }
.remind[open] summary { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg) }
.remind-box { position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; width: min(460px, 100%); box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; color: var(--fg); box-shadow: 0 8px 24px rgb(17 17 17 / .08) }
.remind-box p { margin: 0 0 10px; color: var(--muted) }
.remind-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.remind-box li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--line-soft) }
.remind-box a.btn { text-decoration: none; display: inline-flex; align-items: center }
.muted { color: var(--muted); font-size: 13px }
.btn.done { font-size: 13px; padding: 6px 18px; border-radius: 9999px; text-decoration: none }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0 }
.note { font-size: 12px; color: var(--muted); text-align: center; padding-block: 0 40px }
/* 휴대폰: 손가락 크기 버튼(44px), 입력칸 16px(iOS 확대 방지), 합계 창은 스크롤 따라오지 않게, 분류 칩은 한 줄 가로 스크롤 */
@media (max-width: 600px) {
  .search .btn { display: none }
  .summary { position: static }
  .summary .box { padding: 16px; gap: 12px 24px }
  .stat b { font-size: 18px }
  .stat.main b { font-size: 28px }
  .stat.main { flex-basis: 100% }
  .opts { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 14px }
  .opts > label[for="fx"], .opts > label[for="vat"] { grid-column: 1 / -1 }
  .opts > label[for="fx"] { display: flex; align-items: center; gap: 8px }
  .opts input[type=number] { flex: 1; width: auto; min-width: 0 }
  .opts > label[for="vat"] { display: flex; align-items: center; gap: 8px; min-height: 44px }
  .opts select { grid-column: 1 / -1 }
  .opts .btn, .remind summary { width: 100%; justify-content: center }
  .opts .remind, .opts .btn { min-width: 0 }
  .opts .btn.ghost, .opts .btn.done, .remind summary { display: flex; align-items: center; min-height: 44px; font-size: 15px; box-sizing: border-box }
  input[type=number], select, .search input { font-size: 16px; min-height: 44px; box-sizing: border-box }
  .pick select { min-height: 48px }
  .payday { font-size: 14px }
  .payday select { min-height: 40px; font-size: 16px }
  .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 2px max(16px, env(safe-area-inset-left, 0px)) 6px; scrollbar-width: none }
  .chips::-webkit-scrollbar { display: none }
  .chips span { display: none }
  .chip { flex: none; min-height: 40px; font-size: 14px }
  .card h2 a, .card h2 .del { padding: 10px 0 10px 12px; margin: -10px 0 }
  .tagline { font-size: 12px }
  .remind-box { position: static; width: 100%; margin-top: 8px; box-shadow: none }
  .opts .remind[open] { grid-column: 1 / -1 }
}