/* apps/split/style.css — 더치페이 계산기: 영수증 종이색 바탕 + 진갈색 잉크 + 산호색 포인트(+ 맞으면 초록).
 * 입력 카드(방법·통화 → 똑같이: 총액·인원·팁 / 항목별: 사람·메뉴·칩·세금·팁 → 정리 단위·끝돈) → 결과 카드 → 먼저 낸 사람 정산
 * → 결과 복사·링크 → 정산 완료 → 요약 카드 + 공통 끝 화면. 모바일 한 줄(--app-width 480px).
 * 제목·버튼은 언어 파일 fonts → :root 변수(--font-display 등, 생성기가 이 파일 뒤에 둔다). 숫자는 Space Grotesk.
 * 공통 타이틀 바(G.topBar)·끝 화면(data-mg-end)은 --mg-* 변수로만 색을 맞춘다.
 */
:root {
  --paper: #fbf6ec;
  --ink: #2b2118;
  --ink-dim: #5a4a3c;
  --ink-faint: #8a7766;
  --accent: #e8553d;
  --accent-2: #b93a25;
  --good: #1f8a5b;
  --line: rgba(43, 33, 24, 0.16);
  --card: #ffffff;
  --soft: #f4ecdd;
  --focus: #2f6bff;
  --sym-pad: 34px;
  --font-num: 'Space Grotesk', var(--font-display);

  --font-display: 'Outfit', var(--font-sans);
  --display-weight: 700;
  --wb: normal;
  --hyphens: manual;

  --mg-top-fg: var(--ink);
  --mg-top-badge-bg: var(--accent);
  --mg-top-badge-fg: #fff;
  --lang-bg: var(--card);
  --lang-fg: var(--ink);
  --lang-border: var(--line);
  --mg-star-on: #ffb020;
  --mg-star-off: rgba(43, 33, 24, 0.18);
  --mg-heart-bg: var(--card);
  --mg-heart-border: var(--accent);
  --mg-heart-fg: var(--accent);
  --mg-heart-on: var(--accent);
  --mg-share-bg: var(--card);
  --mg-share-border: var(--line);
  --mg-faq-bg: var(--card);
  --mg-faq-border: var(--line);
  --mg-end-retry-bg: var(--ink);
  --mg-end-retry-fg: #fff;
  --toast-bg: var(--ink);
  --toast-fg: #fff;
}

html { background: var(--paper); }
body.sp-body {
  min-height: 100vh;
  color: var(--ink);
  line-height: 1.6;
  word-break: var(--wb);
  hyphens: var(--hyphens);
  -webkit-hyphens: var(--hyphens);
  background: radial-gradient(circle at 0% 0%, #fde3d3 0, transparent 320px), radial-gradient(circle at 100% 35%, #e2f1e6 0, transparent 300px), var(--paper);
}
[hidden] { display: none !important; }

.sp-h1, .sp-kicker, .sp-h1-main, .sp-h1-main em, .sp-btn, .sp-h2, .sp-doc h1, .sp-seg-btn, .sp-label, .sp-lead, .sp-more, .sp-add, .sp-switch-t, .sp-grand-t, .sp-chip {
  font-family: var(--font-display);
}
.sp-input, .sp-suffix, .sp-grand, .sp-amt, .sp-shares, .sp-transfers li {
  font-family: var(--font-num);
}

.sp-shell { max-width: var(--app-width); margin: 0 auto; padding: 8px 16px 0; }
.sp-screen { padding-top: 12px; }

/* ---------------- 제목 ---------------- */
.sp-logo {
  width: 58px; height: 58px; margin: 6px auto 10px; display: grid; place-items: center; border-radius: 16px;
  background: #fff; border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transform: rotate(-4deg);
}
.sp-logo span { font-size: 30px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.sp-h1 { margin: 6px 0 8px; text-align: center; line-height: 1.18; font-weight: var(--display-weight); }
.sp-kicker {
  display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; border: 2px solid var(--ink);
  background: #fff; color: var(--ink); font-size: 13px; letter-spacing: 0.02em; line-height: 1.4;
}
.sp-h1-main { display: block; font-size: 29px; color: var(--ink); overflow-wrap: break-word; }
.sp-h1-main em { font-style: normal; color: var(--accent-2); background: linear-gradient(transparent 62%, #fdd5c7 62%); padding: 0 2px; }
.sp-hook { margin: 0 auto 16px; max-width: 410px; text-align: center; font-size: 15px; color: var(--ink-dim); }
.sp-shared { margin: -4px 0 12px; padding: 8px 12px; border-radius: 12px; background: #e2f1e6; color: #155c3e; font-size: 13.5px; font-weight: 700; text-align: center; }

/* ---------------- 카드·입력 ---------------- */
.sp-card { padding: 16px; background: var(--card); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink); }
.sp-card + .sp-card { margin-top: 14px; }
.sp-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin: 0 0 14px; }
.sp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 14px; background: var(--soft); border: 1.5px solid var(--line); }
.sp-seg-btn {
  min-width: 0; min-height: 40px; padding: 6px 6px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-dim);
  font-size: 14px; font-weight: var(--display-weight); line-height: 1.2; cursor: pointer;
}
.sp-seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.sp-cur select {
  height: 48px; padding: 0 26px 0 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232b2118' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 9px center;
  color: var(--ink); font: 700 14px/1 var(--font-num); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.sp-box { display: grid; gap: 12px; }
.sp-field { min-width: 0; display: flex; flex-direction: column; }
.sp-label { display: block; margin: 0 0 5px; font-size: 13.5px; font-weight: var(--display-weight); line-height: 1.3; color: var(--ink-dim); }
.sp-sub { margin: 4px 0 -4px; color: var(--ink); font-size: 14.5px; }
.sp-inwrap { position: relative; min-width: 0; }
.sp-input {
  display: block; width: 100%; min-width: 0; min-height: 46px; padding: 8px var(--sym-pad) 8px 12px;
  border: 2px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink);
  font-size: 18px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none;
}
.sp-input-big { min-height: 56px; font-size: 24px; }
.sp-suffix { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 700; color: var(--ink-faint); pointer-events: none; white-space: nowrap; }
.sp-input::placeholder { color: #c9b9a6; font-weight: 600; }
.sp-input:focus, .sp-cur select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(232, 85, 61, 0.18); }
.sp-input[aria-invalid="true"] { border-color: var(--accent); }
.sp-name, .sp-iname { padding-right: 12px; font-family: var(--font-sans); font-size: 16px; }

.sp-stepper { display: grid; grid-template-columns: 48px minmax(0, 120px) 48px; gap: 8px; align-items: center; }
.sp-input-n { text-align: center; padding: 8px; font-size: 22px; }
.sp-step {
  height: 46px; border: 2px solid var(--ink); border-radius: 13px; background: var(--soft); color: var(--ink);
  font: 700 24px/1 var(--font-num); cursor: pointer;
}
.sp-step:active { transform: translateY(2px); }

.sp-more, .sp-add {
  justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 4px 2px; border: 0; background: none;
  color: var(--accent-2); font-size: 14px; font-weight: var(--display-weight); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.sp-add:disabled { color: var(--ink-faint); cursor: default; text-decoration: none; }
.sp-extra { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--soft); }
.sp-extra .sp-label { margin: 0; }
.sp-field-pct { max-width: 160px; }

.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip {
  min-height: 36px; max-width: 100%; padding: 4px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-dim);
  font-size: 14px; font-weight: var(--display-weight); line-height: 1.2; cursor: pointer; overflow-wrap: anywhere;
}
.sp-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sp-tip-in { width: 104px; }
.sp-tip-in .sp-input { min-height: 36px; padding: 4px 26px 4px 10px; font-size: 15px; border-radius: 999px; }

.sp-people { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-person, .sp-payer { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 4px; align-items: center; }
.sp-payer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 36px; gap: 6px; }
.sp-x {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.sp-x:disabled { opacity: 0.25; cursor: default; }
.sp-items { display: grid; gap: 10px; }
.sp-item { padding: 10px; border: 1.5px dashed var(--line); border-radius: 16px; }
.sp-item-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
.sp-who { margin-top: 8px; }
.sp-who .sp-chip { min-height: 32px; padding: 3px 10px; font-size: 13px; }
.sp-select {
  min-width: 0; height: 46px; padding: 0 8px; border: 2px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 700;
}

.sp-round { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--line); }
.sp-round .sp-label { margin: 4px 0 0; }
.sp-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }

/* ---------------- 결과 ---------------- */
.sp-out { text-align: center; background: #fffdf8; background-image: repeating-linear-gradient(transparent 0 27px, rgba(43, 33, 24, 0.05) 27px 28px); }
.sp-lead { margin: 6px 0; font-size: 14.5px; font-weight: var(--display-weight); line-height: 1.4; color: var(--ink-dim); }
.sp-grand-t { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-faint); }
.sp-grand { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.sp-break { margin: 2px 0 0; font-size: 13px; color: var(--ink-dim); }
.sp-shares, .sp-transfers { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.sp-shares li {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 10px; padding: 8px 12px; border-radius: 12px;
  background: var(--soft); font-size: 19px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere;
}
.sp-shares li.is-host { background: #fde3d3; }
.sp-who-n { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--ink-dim); }
.sp-why { flex-basis: 100%; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.sp-ok { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--good); }
.sp-ok.is-bad { color: var(--accent-2); }
.sp-err { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: #a3262b; }
.sp-out.is-err { border-color: var(--accent); }

.sp-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-switch-ui { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: #d8cbb8; transition: background 0.15s ease; }
.sp-switch-ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; }
.sp-switch input:checked + .sp-switch-ui { background: var(--accent); }
.sp-switch input:checked + .sp-switch-ui::after { transform: translateX(18px); }
.sp-switch input:focus-visible + .sp-switch-ui { outline: 3px solid var(--focus); outline-offset: 2px; }
.sp-switch-t { font-size: 16px; font-weight: var(--display-weight); line-height: 1.3; color: var(--ink); }
#pay-box { display: grid; gap: 8px; margin-top: 12px; }
.sp-payers { display: grid; gap: 8px; }
.sp-transfers li {
  padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; font-weight: 700; line-height: 1.35;
  text-align: center; overflow-wrap: anywhere;
}
.sp-transfers li.is-none { font-family: var(--font-display); color: var(--good); }

/* ---------------- 버튼 ---------------- */
.sp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.sp-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 52px; margin: 0; padding: 10px 14px;
  border: 2px solid var(--ink); border-radius: 16px; font-size: 16px; font-weight: var(--display-weight); line-height: 1.25; cursor: pointer; text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sp-btn-ghost { background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.sp-btn-primary { margin-top: 16px; min-height: 56px; font-size: 18px; background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--ink); }
.sp-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.sp-seg-btn:focus-visible, .sp-btn:focus-visible, .sp-more:focus-visible, .sp-add:focus-visible, .sp-chip:focus-visible, .sp-step:focus-visible, .sp-x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sp-hint { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
.sp-local { margin: 10px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }
.sp-error {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(232, 85, 61, 0.1); border: 2px solid var(--accent);
  color: #8f2e14; font-size: 14px; font-weight: 700; line-height: 1.45;
}

/* ---------------- 요약 ---------------- */
.sp-result { margin-top: 26px; }
.sp-summary { padding: 18px 16px 14px; background: var(--card); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 0 5px 0 var(--ink); text-align: center; }
.sp-summary .sp-btn { margin-top: 12px; }
.sp-h2 { margin: 0 0 6px; font-size: 19px; font-weight: var(--display-weight); line-height: 1.3; color: var(--ink); }
.sp-brand { margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--ink-faint); }

/* ---------------- 개인정보처리방침 ---------------- */
.sp-doc { padding: 28px 0 36px; line-height: 1.8; font-size: 14.5px; color: var(--ink-dim); }
.sp-doc h1 { font-size: 24px; font-weight: var(--display-weight); color: var(--ink); margin-bottom: 20px; }
.sp-doc h2 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 26px 0 8px; }
.sp-doc a { color: var(--accent-2); text-decoration: underline; }

.site-footer { margin-top: 28px; color: var(--ink-faint); }
.site-footer a { color: var(--ink-dim); }

/* 언어별 — base.css 의 :lang(zh|th|vi) 글꼴 규칙이 상속을 끊으므로 제목·숫자 요소에 다시 지정 */
html:lang(zh) :is(.sp-h1, .sp-kicker, .sp-h1-main, .sp-btn, .sp-h2, .sp-seg-btn, .sp-label, .sp-lead, .sp-more, .sp-add, .sp-switch-t, .sp-grand-t, .sp-chip),
html:lang(th) :is(.sp-h1, .sp-kicker, .sp-h1-main, .sp-btn, .sp-h2, .sp-seg-btn, .sp-label, .sp-lead, .sp-more, .sp-add, .sp-switch-t, .sp-grand-t, .sp-chip),
html:lang(vi) :is(.sp-h1, .sp-kicker, .sp-h1-main, .sp-btn, .sp-h2, .sp-seg-btn, .sp-label, .sp-lead, .sp-more, .sp-add, .sp-switch-t, .sp-grand-t, .sp-chip) { font-family: var(--font-display); }
html:lang(zh) :is(.sp-input, .sp-suffix, .sp-grand, .sp-amt, .sp-shares, .sp-transfers li),
html:lang(th) :is(.sp-input, .sp-suffix, .sp-grand, .sp-amt, .sp-shares, .sp-transfers li),
html:lang(vi) :is(.sp-input, .sp-suffix, .sp-grand, .sp-amt, .sp-shares, .sp-transfers li) { font-family: var(--font-num); }
html:lang(th) :is(.sp-h1-main, .sp-h2, .sp-label, .sp-btn, .sp-lead, .sp-hook, .sp-seg-btn, .sp-switch-t, .sp-note, .sp-chip, .sp-more, .sp-add, .sp-ok, .sp-err) { line-height: 1.6; letter-spacing: 0; }
html:lang(vi) .sp-h1-main { line-height: 1.32; }
html:lang(ja) :is(.sp-h1-main, .sp-hook, .sp-note, .sp-lead, .sp-err, .sp-error, .sp-local, .sp-ok) { word-break: auto-phrase; }
html:lang(ko) :is(.sp-h1-main, .sp-hook, .sp-hint, .sp-note, .sp-error, .sp-err, .sp-lead, .sp-local, .sp-label, .sp-ok, .sp-switch-t) { word-break: keep-all; }
html:lang(de) :is(.sp-label, .sp-seg-btn, .sp-note, .sp-btn, .sp-switch-t) { hyphens: auto; -webkit-hyphens: auto; }

@media (max-width: 374px) {
  .sp-h1-main { font-size: 25px; }
  .sp-card { padding: 14px 12px; }
  .sp-seg-btn { font-size: 13px; padding: 6px 4px; }
  .sp-input-big { font-size: 21px; }
  .sp-grand { font-size: 30px; }
  .sp-item-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 4px; }
  .sp-payer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 4px; }
  .sp-x { width: 32px; }
  .sp-btn { font-size: 15px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-btn, .sp-switch-ui, .sp-switch-ui::after { transition: none; }
}