/* ===== 양송이 장부 · style.css ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html, body {
  background: #FAF9F6;
  overscroll-behavior-y: none;  /* 당겨서 새로고침/바운스만 막고, 스크롤 자체는 브라우저 기본 동작에 맡김 */
  -webkit-text-size-adjust: 100%;
}
body {
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Pretendard", sans-serif;
  color:#26261f;
}
button, input, textarea, select { font-family:inherit; }
.num { font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }
a { color:inherit; text-decoration:none; }

/* ---------- App shell ----------
   예전엔 html/body/#app-shell을 전부 position:fixed + inset:0으로 뷰포트에
   억지로 맞췄는데, 이게 iOS에서 높이 계산이 어긋나 하단 여백이 남는
   원인이었어요. 대신 페이지를 그냥 자연스럽게 스크롤되게 두고(문서 흐름),
   하단 탭바만 실제 화면 기준으로 고정하는 방식(JOYLIST 앱과 동일한 방식)으로
   바꿔서 이 문제를 구조적으로 없앴어요. */
#app-shell {
  max-width:480px;
  margin:0 auto;
  background:#FAF9F6;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,0.12);
}
#view {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Top bar ---------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top, 0px)) 18px 10px;
  background:#FAF9F6;
  position:sticky; top:0; z-index:20;
}
.topbar .brand { font-size:22px; font-weight:800; letter-spacing:-0.3px; display:flex; align-items:center; gap:6px; }
.topbar .brand small { font-size:11px; color:#9a9793; font-weight:600; display:block; margin-top:1px; }
.icon-btn {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:#fff; border:1px solid #ece9e1;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer;
}
.topbar-actions { display:flex; gap:8px; }
.back-btn { font-size:14px; font-weight:700; color:#3E5C4E; padding:6px 10px; cursor:pointer; }

.year-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:20px;
  background:#fff; border:1px solid #ece9e1;
  font-size:13.5px; font-weight:700; color:#3E5C4E;
  cursor:pointer;
}

/* ---------- Cards ---------- */
.px { padding-left:18px; padding-right:18px; }

.hero-card {
  margin:6px 18px 14px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  height:150px;
  background:linear-gradient(135deg,#7a8c6f,#4a5f42);
  display:flex; align-items:flex-end;
  color:#fff;
}
.hero-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
.hero-emoji { position:absolute; top:12px; right:16px; font-size:34px; z-index:2; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.hero-text { position:relative; z-index:2; padding:14px 16px; font-size:13px; font-weight:600; line-height:1.5; }

.cover-banner {
  margin:0 18px 14px;
  height:130px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  box-shadow:0 8px 20px rgba(38,53,42,0.18);
}
.balance-card {
  margin:0 18px 16px;
  background:linear-gradient(135deg, #4f7360, #22352a);
  border:none;
  border-radius:20px;
  padding:22px 20px;
  box-shadow:0 12px 28px rgba(38,53,42,0.28);
}
.balance-card .label { font-size:12.5px; color:rgba(255,255,255,0.72); font-weight:600; }
.balance-card .amount { font-size:34px; font-weight:800; color:#fff; margin-top:6px; }
.balance-card .amount span { font-size:17px; font-weight:700; color:rgba(255,255,255,0.65); margin-left:2px;}
.balance-card .sub-row { display:flex; gap:16px; margin-top:12px; font-size:12px; color:rgba(255,255,255,0.85); font-weight:600; }
.balance-card .sub-row b { color:#fff; font-weight:800; }

.quick-actions {
  display:flex; gap:8px;
  margin:0 18px 16px;
}
.qa-btn {
  flex:1;
  min-width:0;
  position:relative;
  background:#fff;
  border:1px solid #ece9e1;
  border-radius:14px;
  padding:9px 3px 10px;
  text-align:center;
  cursor:pointer;
}
.qa-btn .qa-icon {
  width:28px; height:28px; border-radius:50%;
  background:#EEF3EF; color:#3E5C4E;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 5px; font-size:13px;
}
.qa-btn .qa-label { font-size:9.5px; font-weight:700; color:#4a4842; line-height:1.2; word-break:keep-all; }
.qa-btn .qa-badge {
  position:absolute; top:6px; right:7px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px;
  background:#B4483C; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800;
  box-shadow:0 2px 6px rgba(180,72,60,0.22);
}

.section-row {
  display:flex; align-items:center; justify-content:space-between;
  margin:4px 18px 8px;
}
.section-title { font-size:13.5px; font-weight:800; color:#26261f; }
.section-link { font-size:12px; font-weight:600; color:#9a9793; }

/* ---------- Ledger table ---------- */
.ledger-summary {
  margin:0 18px 4px;
  background:#3E5C4E;
  border-radius:16px 16px 0 0;
  padding:16px 18px;
  color:#fff;
}
.ledger-summary-cols { display:flex; justify-content:space-between; }
.ls-col .ls-label { font-size:11px; opacity:0.75; font-weight:600; }
.ls-col .ls-value { font-size:15px; font-weight:800; margin-top:3px; }
.ls-col.in .ls-value { color:#BFE0CC; }
.ls-col.out .ls-value { color:#F4C7C0; }

.ledger-table {
  margin:0 18px 20px;
  background:#fff;
  border-radius:0 0 16px 16px;
  border:1px solid #ece9e1; border-top:none;
  overflow:hidden;
}
.month-label {
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 16px;
  font-size:13px; font-weight:800; color:#3E5C4E;
  background:#EEF3EF;
  border-top:1px solid #dfe9e3; border-bottom:1px solid #dfe9e3;
}
.month-label:first-child { border-top:none; }
.month-label .m-net { font-size:12px; font-weight:800; }
.day-label { padding:8px 16px 2px; font-size:10.5px; font-weight:700; color:#b3b0aa; background:#fff; }
.row {
  display:grid;
  grid-template-columns: 1fr auto;
  gap:2px 10px;
  padding:9px 16px;
  border-top:1px solid #f0eee8;
  cursor:pointer;
}
.day-label + .row { border-top:none; }
.row .rdesc { font-size:13.5px; font-weight:600; color:#26261f; }
.row .rmeta { font-size:10.5px; color:#c2beb6; font-weight:500; margin-top:1px; }
.row .ramt { font-size:13.5px; font-weight:800; text-align:right; align-self:center; }
.ramt.in { color:#3E7A5C; } .ramt.out { color:#B4483C; }
.tag {
  display:inline-block; font-size:9.5px; font-weight:700;
  padding:1.5px 6px; border-radius:6px; margin-left:6px;
  background:#EEF3EF; color:#3E5C4E; vertical-align:middle;
}
.tag.out-tag { background:#FBEDEB; color:#B4483C; }

.empty-state {
  text-align:center; padding:40px 20px; color:#a8a6a0; font-size:13px;
}

/* ---------- Members strip ---------- */
.members-row { display:flex; gap:8px; margin:0 18px 18px; }
.member-chip {
  flex:1; background:#fff; border:1px solid #ece9e1; border-radius:14px;
  padding:12px 6px; text-align:center;
}
.member-chip .avatar {
  width:32px; height:32px; border-radius:50%; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; color:#fff;
}
.member-chip .m-name { font-size:11.5px; font-weight:700; }
.member-chip .m-status { font-size:9.5px; font-weight:700; margin-top:2px; }
.m-status.paid { color:#3E7A5C; } .m-status.unpaid { color:#c2beb6; }
.unpaid-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid #ece9e1;
}
.unpaid-row:last-child { border-bottom:none; }
.unpaid-name { font-size:14px; font-weight:800; color:#26261f; }
.unpaid-sub { font-size:11.5px; color:#9a9793; margin-top:2px; }
.unpaid-amt { font-size:14px; font-weight:800; color:#B4483C; }

/* ---------- Modal / Add form ---------- */
.modal-overlay {
  position:fixed; inset:0; background:rgba(20,20,18,0.4);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:100;
}
.modal-overlay.center { align-items:center; }
.sheet {
  width:100%; max-width:480px;
  background:#FAF9F6;
  border-radius:22px 22px 0 0;
  max-height:88vh; overflow-y:auto;
  padding-bottom:24px;
}
.modal-overlay.center .sheet { border-radius:20px; max-height:80vh; }

.sheet-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; position:sticky; top:0; background:#FAF9F6; z-index:2;
  border-bottom:1px solid #ece9e1;
}
.sheet-title { font-size:16px; font-weight:800; }
.sheet-btn { font-size:14.5px; font-weight:700; cursor:pointer; padding:4px 6px; }
.sheet-btn.cancel { color:#9a9793; }
.sheet-btn.save { color:#3E5C4E; }

.type-toggle { display:flex; margin:16px 18px; background:#EFEDE5; border-radius:12px; padding:4px; }
.type-toggle .t-opt {
  flex:1; text-align:center; padding:9px 0; border-radius:9px;
  font-size:13.5px; font-weight:800; color:#9a9793; cursor:pointer;
}
.type-toggle .t-opt.active.income { background:#3E5C4E; color:#fff; }
.type-toggle .t-opt.active.expense { background:#B4483C; color:#fff; }

.field { padding:14px 18px; border-bottom:1px solid #ece9e1; }
.field label { font-size:12px; color:#9a9793; font-weight:700; display:block; margin-bottom:6px; }
.field input[type=text], .field input[type=date], .field input[type=number], .field textarea, .field select {
  width:100%; border:none; background:transparent; font-size:15px; font-weight:600; color:#26261f;
  outline:none;
}
/* iOS 사파리는 date input의 값을 기본적으로 가운데 정렬해서 보여주는데,
   이 접근자로 왼쪽 정렬로 바꿀 수 있어요 */
.field input[type=date]::-webkit-date-and-time-value { text-align:left; }
.field textarea { resize:none; height:50px; font-weight:500; }
.field .amt-input { font-size:20px; font-weight:800; }
.chip-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.mchip {
  padding:8px 12px; border-radius:20px; border:1.5px solid #ece9e1;
  font-size:12.5px; font-weight:700; color:#5c5a52; cursor:pointer; display:flex; align-items:center; gap:5px;
}
.mchip .dot { width:8px; height:8px; border-radius:50%; }
.mchip.selected { border-color:#3E5C4E; background:#EEF3EF; color:#3E5C4E; }

.cat-select-row { display:flex; gap:8px; flex-wrap:wrap; }
.cat-chip { padding:7px 12px; border-radius:20px; background:#EFEDE5; font-size:12.5px; font-weight:700; color:#5c5a52; cursor:pointer; }
.cat-chip.selected { background:#3E5C4E; color:#fff; }

.fab-save-wrap { padding:18px; }
.btn-primary {
  width:100%; padding:15px; border:none; border-radius:14px;
  background:#3E5C4E; color:#fff; font-size:15px; font-weight:800; cursor:pointer;
}
.btn-primary:disabled { opacity:0.4; }
.btn-secondary {
  width:100%; padding:13px; border:1.5px solid #ece9e1; border-radius:14px;
  background:#fff; color:#5c5a52; font-size:14px; font-weight:700; cursor:pointer; margin-top:8px;
}

/* Year picker */
.year-list-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 20px; font-size:15.5px; font-weight:700; border-bottom:1px solid #f0eee8; cursor:pointer;
}
.year-list-item.active { color:#3E5C4E; }
.year-list-item .check { color:#3E5C4E; font-weight:800; }

/* ---------- Stats ---------- */
.stat-nav {
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin:6px 18px 16px;
}
.stat-nav .arrow { font-size:18px; padding:6px 10px; cursor:pointer; color:#9a9793; }
.stat-nav .m-title { font-size:16px; font-weight:800; }

.stat-summary { display:flex; margin:0 18px 18px; background:#fff; border:1px solid #ece9e1; border-radius:16px; overflow:hidden; }
.stat-summary .s-item { flex:1; text-align:center; padding:14px 4px; }
.stat-summary .s-item:not(:last-child){ border-right:1px solid #ece9e1; }
.stat-summary .s-label { font-size:11px; color:#9a9793; font-weight:600; }
.stat-summary .s-value { font-size:14.5px; font-weight:800; margin-top:4px; }

.chart-card { margin:0 18px 18px; background:#fff; border:1px solid #ece9e1; border-radius:16px; padding:16px; }
.chart-card .cc-title { font-size:12.5px; font-weight:800; color:#5c5a52; margin-bottom:12px; }
.bar-chart { display:flex; align-items:flex-end; gap:6px; height:130px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:2px;}
.bar-col .bars { display:flex; align-items:flex-end; gap:2px; height:100px; }
.bar { width:6px; border-radius:3px 3px 0 0; }
.bar.in { background:#7AA88E; }
.bar.out { background:#E29289; }
.bar-col .b-label { font-size:9px; color:#b3b0aa; font-weight:600; margin-top:4px; }

.donut-wrap { display:flex; align-items:center; gap:18px; }
.donut { width:120px; height:120px; border-radius:50%; flex-shrink:0; position:relative; }
.donut .donut-hole {
  position:absolute; inset:18px; background:#fff; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.donut-hole .dh-label { font-size:9.5px; color:#9a9793; font-weight:700; }
.donut-hole .dh-value { font-size:12.5px; font-weight:800; margin-top:2px; }
.legend { flex:1; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; margin-bottom:8px; }
.legend-item .dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.legend-item .l-name { flex:1; color:#5c5a52; }
.legend-item .l-pct { color:#9a9793; font-weight:700; }

/* ---------- Members view ---------- */
.member-card {
  display:flex; align-items:center; gap:12px;
  margin:0 18px 10px; padding:14px; background:#fff; border:1px solid #ece9e1; border-radius:16px;
}
.member-card .avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; flex-shrink:0; }
.member-card .m-info { flex:1; }
.member-card .m-name-row { display:flex; align-items:center; gap:6px; }
.member-card .m-name { font-size:14.5px; font-weight:800; }
.member-card .m-role { font-size:10.5px; font-weight:700; color:#3E5C4E; background:#EEF3EF; padding:2px 7px; border-radius:6px; }
.member-card .m-paid { font-size:12px; color:#9a9793; margin-top:3px; }
.member-card .m-amount { font-size:14px; font-weight:800; color:#26261f; }
.add-member-btn { margin:0 18px 20px; }

.settings-card { margin:0 18px 14px; background:#fff; border:1px solid #ece9e1; border-radius:16px; padding:16px; }
.sc-label { font-size:12px; color:#9a9793; font-weight:700; }
.sc-value { font-size:15px; font-weight:700; margin-top:4px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid #f0eee8; }
.settings-row:last-child { border-bottom:none; }
.settings-row .sr-label { font-size:14px; font-weight:600; }
.settings-row .sr-value { font-size:13px; color:#9a9793; font-weight:600; }

.conn-badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:20px; }
.conn-badge.on { background:#EEF3EF; color:#3E7A5C; }
.conn-badge.off { background:#FBEDEB; color:#B4483C; }
.conn-badge .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

.toast {
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%);
  background:#26261f; color:#fff; padding:11px 18px; border-radius:12px;
  font-size:13px; font-weight:600; z-index:200; opacity:0; transition:opacity .25s;
  max-width:80%; text-align:center;
}
.toast.show { opacity:1; }

/* ---------- App picker (home list of ledgers) ---------- */
.app-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top, 0px)) 18px 6px;
}
.app-brand { flex:1; min-width:0; font-size:17px; font-weight:800; line-height:1.3; }
.app-brand .logo-dot { width:26px; height:26px; border-radius:8px; background:#3E5C4E; display:flex; align-items:center; justify-content:center; font-size:14px; }

.ledger-card {
  margin:0 18px 12px;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
/* 사진이 있는 카드: 사진이 카드 전체를 채우고 텍스트는 그 위에 오버레이 */
.ledger-card.photo-card {
  height:104px;
  background-size:cover; background-position:center;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:10px 14px;
  color:#fff;
}
.ledger-card.photo-card::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.6) 100%);
}
.ledger-card.photo-card > * { position:relative; z-index:1; }
.ledger-card.photo-card .lc-role-row { display:flex; justify-content:flex-end; }
.ledger-card.photo-card .lc-name { font-size:15px; font-weight:800; color:#fff; }
.ledger-card.photo-card .lc-desc { font-size:11px; color:rgba(255,255,255,0.8); margin-top:1px; }
.ledger-card.photo-card .lc-bal { font-size:16px; font-weight:800; color:#fff; }

/* 사진이 없는 카드: 색상/그라데이션 없이 깔끔한 흰 카드 */
.ledger-card.plain-card {
  background:#fff;
  border:1px solid #ece9e1;
  padding:14px 16px;
}
.ledger-card.plain-card .lc-role-row { display:flex; justify-content:flex-end; margin-bottom:8px; }
.ledger-card.plain-card .lc-bal-label { font-size:10.5px; color:#9a9793; font-weight:600; margin-top:10px; }
.ledger-card.plain-card .lc-bal { font-size:16px; font-weight:800; color:#26261f; margin-top:2px; }

.ledger-card .lc-name { font-size:15px; font-weight:800; }
.ledger-card .lc-desc { font-size:11.5px; color:#9a9793; margin-top:2px; }
.ledger-card .lc-bal.neg { color:#B4483C; }
.ledger-card .lc-role {
  font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px;
  background:rgba(255,255,255,0.28); color:#fff; backdrop-filter:blur(4px);
}
.ledger-card.plain-card .lc-role { background:#EEF3EF; color:#3E5C4E; }


.cover-upload {
  height:90px; border-radius:14px; background:#F4F2EC;
  border:1.5px dashed #d9d5c8; display:flex; align-items:center; justify-content:center;
  color:#9a9793; font-size:12.5px; font-weight:700; cursor:pointer; overflow:hidden;
  background-size:cover; background-position:center; position:relative;
}
.cover-upload input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.cover-upload .cu-label { pointer-events:none; position:relative; z-index:1; background:rgba(255,255,255,0.85); padding:4px 10px; border-radius:8px; }
.cover-upload.has-img .cu-label { display:none; }

.create-ledger-btn {
  margin:6px 18px 20px;
  border:1.5px dashed #d9d5c8;
  border-radius:18px;
  padding:16px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:#7a786f; font-weight:700; font-size:13.5px;
  cursor:pointer;
}
.create-ledger-btn:active { background:#f2f0e9; }

.join-row { display:flex; gap:10px; margin:0 18px 6px; }
.join-btn {
  flex:1; text-align:center; padding:11px 6px; border-radius:14px;
  background:#fff; border:1px solid #ece9e1; font-size:12px; font-weight:700; color:#5c5a52; cursor:pointer;
}

/* ---------- View-only banner ---------- */
.viewonly-banner {
  margin:0 18px 10px; padding:10px 14px; border-radius:12px;
  background:#F4F1E7; color:#8a7a4a; font-size:12px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}

/* ---------- Share sheet ---------- */
.share-link-box {
  background:#F4F2EC; border-radius:12px; padding:12px 14px; margin-top:8px;
  font-size:12px; word-break:break-all; color:#5c5a52; font-weight:600;
}
.copy-btn {
  margin-top:8px; width:100%; padding:11px; border:none; border-radius:12px;
  background:#3E5C4E; color:#fff; font-weight:700; font-size:13px; cursor:pointer;
}
.copy-btn.secondary { background:#EFEDE5; color:#3E5C4E; }
.share-note { font-size:11.5px; color:#9a9793; margin-top:8px; line-height:1.5; }

.emoji-picker { display:flex; gap:8px; flex-wrap:wrap; }
.emoji-opt {
  width:42px; height:42px; border-radius:12px; background:#F4F2EC;
  display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer;
  border:2px solid transparent;
}
.emoji-opt.selected { border-color:#3E5C4E; background:#EEF3EF; }

.danger-btn {
  width:100%; padding:12px; border-radius:12px; border:1px solid #F0C9C4;
  background:#FBEDEB; color:#B4483C; font-size:13px; font-weight:700; cursor:pointer; margin-top:10px;
}

.spinner-wrap { display:flex; align-items:center; justify-content:center; height:60vh; color:#9a9793; font-size:13px; font-weight:600; }

@media (min-width:481px){
  body { display:flex; justify-content:center; padding:24px 0; }
}

/* JoyMoney v24 card refresh */
.card,.ledger-card,.group-card{
border-radius:22px !important;
border:1px solid #eef2f7 !important;
box-shadow:0 10px 28px rgba(15,23,42,.08)!important;
transition:transform .12s ease, box-shadow .2s ease;
}
.card:active,.ledger-card:active,.group-card:active{
transform:scale(.985);
}
.badge,.manager-badge{
border-radius:999px!important;
padding:4px 10px!important;
font-weight:600!important;
}