:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1d2330;
  --muted: #6b7385;
  --line: #e3e6ec;
  --accent: #2f6fed;
  --accent-text: #ffffff;
  --pay: #d0453b;
  --receive: #1f8a4c;
  --pending: #b7791f;
  --cell: #fdecea;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7385' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --radius: 10px;
  --tap: 48px;        /* 휴대폰 터치 대상 최소 높이 (안드로이드 권장 48dp) */
  --tabbar: 60px;     /* 휴대폰 하단 탭 높이 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171d;
    --card: #1d2129;
    --text: #e6e9ef;
    --muted: #98a0b0;
    --line: #2d333e;
    --accent: #5b8cff;
    --pay: #ff7a70;
    --receive: #4cc883;
    --pending: #e0a94a;
    --cell: #3a2422;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2398a0b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
* { box-sizing: border-box; }
/* 위에 붙은 상단 바 높이만큼 스크롤 위치를 띄워, 펼친 카드(두 사람 관계)·초점 칸이 상단 바 뒤로 들어가지 않게.
   --top-h는 core.js가 실제 높이로 맞춘다(글자 크기에 따라 달라짐) */
html { scroll-padding-top: calc(var(--top-h, 64px) + 8px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  word-break: keep-all; overflow-wrap: break-word;  /* 한국어 낱말 중간에서 줄을 바꾸지 않음 */
}

/* 상단: 그룹 이름(누르면 전환·새 그룹) + 계정 */
.top {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; font-size: 17px; padding: 6px 0; }
.group-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex: 1; min-width: 0; }
.group-btn {
  background: none; color: var(--text); border: 0; padding: 6px 4px; font-weight: 700; font-size: 17px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.account-btn {
  width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; flex: none;
  background: var(--bg); color: var(--text); border-color: var(--line); font-weight: 700;
}

/* 탭 */
.tabs {
  display: flex; gap: 4px; padding: 8px 16px 0; overflow-x: auto;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.tabs button {
  background: none; color: var(--muted); border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 8px 12px; white-space: nowrap;
}
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.main-tabs { justify-content: center; }
.main-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; }
.main-tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.no-group .main-tabs, .no-group .fab, .no-group .tab { display: none !important; }

main { max-width: 980px; margin: 0 auto; padding: 16px; }
.tab { display: none; }
.tab.active { display: block; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
}
.empty { text-align: center; color: var(--muted); }
h2 { font-size: 15px; margin: 0 0 12px; display: flow-root; }  /* 오른쪽에 띄운 링크가 아래 내용 폭을 줄이지 않게 */
h2.gap { margin-top: 20px; }
h3 { font-size: 14px; margin: 16px 0 8px; }
.hint { color: var(--muted); font-size: 12px; font-weight: 400; }
input, select, button {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
button { background: var(--accent); color: var(--accent-text); border-color: var(--accent); cursor: pointer; }
/* 선택 상자 화살표를 직접 그려, 글자가 들어갈 폭(오른쪽 여백)이 글자 크기를 따라가게 한다 */
select {
  appearance: none; padding-right: 1.8em;
  background: var(--bg) var(--chevron) no-repeat right .6em center / .75em auto;
}
button.ghost { background: transparent; color: var(--accent); }
button.small { padding: 3px 8px; font-size: 12px; white-space: nowrap; }
button.danger { background: transparent; color: var(--pay); border-color: var(--pay); }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.grid .wide { grid-column: 1 / -1; }
.inline { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; }
.setting { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.split-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.sharers { display: flex; flex-wrap: wrap; gap: 8px; }
.sharers label {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--text);
  display: inline-flex; flex-direction: row; gap: 6px; align-items: center;
}
.sharers input[type=number] { width: 110px; padding: 4px 6px; }

/* 목록 (멤버·지출·정산·송금): 표 대신 카드 줄 */
.items { list-style: none; margin: 0; padding: 0; }
.items > li { border-bottom: 1px solid var(--line); }
.items > li:last-child { border-bottom: 0; }
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 10px 2px; width: 100%;
}
.item-main { min-width: 0; overflow-wrap: anywhere; }
.item-sub { display: block; color: var(--muted); font-size: 12px; }
.item-amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.item-actions.confirmed { color: var(--receive); } .item-actions.rejected { color: var(--muted); }
.item-btn {
  background: none; border: 0; border-radius: 0; color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.item-btn:hover, .item-link:hover { background: var(--bg); }
.item-btn.current { font-weight: 700; }
.item-link { background: none; border: 0; color: var(--text); text-align: left; padding: 6px 0; font-weight: 600; }
.item-link::after { content: " ›"; color: var(--muted); font-weight: 400; }
.items .item-btn:not(.item) { width: 100%; padding: 12px 4px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.empty-item { padding: 10px 2px; color: var(--muted); }
.badges { white-space: nowrap; }
.badge { font-size: 12px; border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; color: var(--muted); white-space: nowrap; font-weight: 400; }
.member .item-main b { margin-right: 4px; }

table { width: 100%; border-collapse: collapse; }
.list td, .list th { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.list th { color: var(--muted); font-size: 12px; font-weight: 500; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay { color: var(--pay); }
.receive { color: var(--receive); }
.pending { color: var(--pending); }
.muted { color: var(--muted); }
details summary { cursor: pointer; color: var(--accent); margin-top: 12px; padding: 6px 0; }
.scroll { overflow-x: auto; }
.matrix th, .matrix td { padding: 8px 10px; border: 1px solid var(--line); text-align: right; white-space: nowrap; }
.matrix th { font-size: 13px; color: var(--muted); font-weight: 500; }
.matrix td.has { background: var(--cell); color: var(--pay); cursor: pointer; font-weight: 600; }
.matrix td.zero { color: var(--muted); cursor: pointer; }
.matrix td.self { background: var(--bg); }
.big { font-size: 26px; font-weight: 700; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }

/* 어느 탭에서나 지출 추가. 넓은 화면: 오른쪽 아래에 떠 있고 아래로 스크롤하는 동안 숨김.
   휴대폰: 하단 탭 가운데 빈자리에 고정(내용을 가리지 않음). 입력 중에는 숨김 (core.js) */
.fab {
  position: fixed; right: 20px; bottom: 24px; z-index: 6;
  width: 56px; height: 56px; border-radius: 50%; padding: 0; font-size: 28px; line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: transform .2s, opacity .2s;
}
.fab.away, .typing .fab { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; }
.fab:focus-visible { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .fab { transition: none; } }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; max-width: 90vw;
}
.toast.error { background: var(--pay); color: #fff; }
dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); max-width: 560px; width: 92vw; }
dialog::backdrop { background: rgba(0,0,0,.35); }
/* 지출 추가·수정 시트: 금액을 가장 크게 */
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { margin: 0; }
.amount-input { width: 100%; font-size: 28px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
#amountHint { min-height: 18px; text-align: right; }
.sheet form > .row:last-child { position: sticky; bottom: -16px; background: var(--card); padding: 8px 0; margin-bottom: -8px; }
.sheet #sheetSubmit { flex: 1; }
.sharers .chip { cursor: pointer; }
.sharers .chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* 설치 앱: 연결 끊김·새 버전 안내, 홈 화면 설치 카드 */
.banner { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.banner.offline { border-color: var(--pending); color: var(--pending); }
#serverBanner span { flex: 1 1 200px; }
/* 서버에 닿지 않거나(core.js) 인터넷이 끊긴 동안(pwa.js): 빈 카드·오래된 금액 대신 안내만 */
.server-down .tab.active, .server-down #empty, .server-down .fab,
.net-down .tab.active, .net-down #empty, .net-down .fab { display: none !important; }
.install { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.install img { border-radius: 9px; flex: none; }
.install .item-main { flex: 1 1 160px; }
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.cat { border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; background: var(--bg); color: var(--text); font-size: 14px; }
.cat.is-hidden { color: var(--muted); border-style: dashed; }
/* 최대 3칸. 칸 최소 폭을 글자 크기(em)로 잡아 글자를 키우면 2칸 → 1칸으로 줄어 선택한 글자가 잘리지 않는다 */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(6em, (100% - 24px) / 3)), 1fr)); gap: 8px; margin-bottom: 8px; }
.filters input[type=search] { grid-column: 1 / -1; }
.filters #expRange { grid-column: 1 / -1; flex-wrap: nowrap; }
.filters #expRange input { flex: 1; min-width: 0; }
.filters select, .filters input { width: 100%; min-width: 0; }
.filters select { padding: 7px 1.6em 7px .5em; background-position: right .45em center; font-size: 14px; }
fieldset.purpose { border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; }
fieldset.purpose legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
fieldset.purpose label { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 14px; }
fieldset.purpose .hint { flex-basis: 100%; }
.date-head { padding: 14px 2px 4px; color: var(--muted); font-size: 13px; font-weight: 600; border-bottom: 0 !important; }
.auth { max-width: 420px; margin: 24px auto; }
.auth-tabs { padding: 0; margin: -4px 0 12px; background: none; }
.grid.one { grid-template-columns: minmax(0, 1fr); }
.grid input:not([type=checkbox]):not([type=radio]), .grid select { width: 100%; min-width: 0; }
.copy { width: 100%; font-size: 13px; }
button.link { background: none; border: 0; color: var(--accent); padding: 0; font-size: 13px; min-height: 0; font-weight: 400; }
h2 button.link { float: right; }
.danger-zone { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }
.danger-zone h3 { color: var(--pay); }
[hidden] { display: none !important; }
body:not(.is-admin) .admin-only { display: none !important; }

/* 휴대폰 (768px 미만, 또는 터치 화면의 낮은 높이 = 휴대폰 가로): 하단 탭, 큰 터치 대상, 표는 넓은 화면에서만 */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  main { padding: 12px 12px calc(var(--tabbar) + 24px + env(safe-area-inset-bottom)); }
  .main-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 7;
    padding: 0 0 env(safe-area-inset-bottom); gap: 0; overflow: hidden;
    border-top: 1px solid var(--line); border-bottom: 0;
  }
  .main-tabs button {
    flex: 1; flex-direction: column; gap: 2px; height: var(--tabbar); padding: 6px 0 4px; font-size: 12px;
    border-bottom: 0; border-top: 2px solid transparent;
  }
  .main-tabs button.active { border-top-color: var(--accent); color: var(--accent); }
  .main-tabs svg { width: 24px; height: 24px; }
  /* 하단 탭: 홈·지출 | ＋ 자리 | 정산·멤버 */
  .main-tabs::after { content: ""; flex: 0 0 72px; order: 2; }
  .main-tabs button:nth-child(-n+2) { order: 1; }
  .main-tabs button:nth-child(n+3) { order: 3; }
  .fab {
    left: 50%; right: auto; margin-left: -26px; z-index: 8; width: 52px; height: 52px; font-size: 26px;
    bottom: calc((var(--tabbar) - 52px) / 2 + env(safe-area-inset-bottom)); box-shadow: 0 2px 6px rgba(0,0,0,.2);
  }
  /* 하단 탭 안에 있어 내용을 가리지 않으므로 스크롤·입력 중에도 숨기지 않음 */
  .fab.away, .typing .fab { transform: none; opacity: 1; pointer-events: auto; }
  /* 화면 키보드가 떠 있는 동안(core.js): 줄어든 화면에서 하단 탭·＋가 입력 칸을 가리지 않게 숨김 */
  .keyboard .main-tabs, .keyboard .fab { display: none; }
  .keyboard main { padding-bottom: 16px; }
  .toast { bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom)); }
  .wide-only { display: none; }
  fieldset.purpose label { min-height: var(--tap); }
  dialog.sheet {
    margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  input, select, button:not(.link):not(.item-btn):not(.account-btn):not(.group-btn) { min-height: var(--tap); }
  button.small { min-height: var(--tap); padding: 6px 12px; font-size: 13px; }
  .item-btn:not(.item), .item-link { min-height: var(--tap); }
  .item-actions button { flex: 1 1 auto; white-space: nowrap; }  /* 한 줄에 안 들어가면 버튼째 다음 줄로 */
  .split-head label { min-height: var(--tap); }
  .group-btn, .account-btn { min-height: var(--tap); }
  button.link { min-height: var(--tap); padding: 0 4px; }
  details summary { padding: 12px 0; min-height: var(--tap); }
  h2 button.link { margin: -12px 0; }
  .account-btn { width: var(--tap); height: var(--tap); }
}
/* 휴대폰 가로: 높이가 낮으므로 하단 탭을 낮추고 아이콘·글자를 한 줄로 */
@media (pointer: coarse) and (max-height: 500px) {
  :root { --tabbar: 56px; }
  .main-tabs button { flex-direction: row; justify-content: center; gap: 6px; padding: 0; font-size: 13px; }
  .main-tabs svg { width: 20px; height: 20px; }
}