/* ssem 디자인 시스템 — Soft Modern (warm, trustworthy, intimate) */
/* 전 페이지 공통 토큰 + 컴포넌트 베이스. 페이지 고유 스타일은 inline. */

:root {
  /* ── Color (라이트 — 따뜻한 off-white + deep teal accent) ── */
  --bg:           #FAFAF7;   /* warm off-white, 순백 X (눈부심 방지) */
  --surface:      #FFFFFF;   /* 카드·패널 표면 */
  --surface-2:    #F4F2EC;   /* sub-block, 강조 영역 */
  --surface-3:    #ECEAE2;   /* hover, pressed */
  --line:         #E5E2D8;   /* 1px divider (warm gray) */
  --line-strong:  #CFCBBD;   /* 입력 필드 border */
  --text:         #1A1A17;   /* 본문 (순검정 X) */
  --text-2:       #5C5A52;   /* secondary */
  --text-3:       #6E6C63;   /* caption, 라벨 (WCAG AA ≥ 4.5:1 on surface-2) */
  --brand:        #0F6E5C;   /* deep teal — 단일 강조 */
  --brand-soft:   #E0F0EC;   /* brand 표면 */
  --brand-strong: #0A5447;   /* brand pressed */
  --success:      #1F7A3D;   /* "입금 받음" */
  --warn:         #B45309;   /* "미수금 / 안 보냄" — 따뜻한 amber-700 */
  --danger:       #9B2C2C;   /* destructive */

  /* ── Elevation (그림자 절제) ── */
  --shadow-sm:    0 1px 2px rgba(20, 20, 17, 0.04);
  --shadow-md:    0 6px 16px -4px rgba(20, 20, 17, 0.08);
  --shadow-lg:    0 24px 48px -12px rgba(20, 20, 17, 0.18);

  /* ── Motion ── */
  --ease-out:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:     160ms;
  --dur-base:     220ms;
  --dur-slow:     320ms;

  /* ── Radius ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  color-scheme: light;

  /* ── Backward-compat aliases (옛 inline style 잔재 호환 — 점진적 정리) ── */
  --card:    var(--surface);
  --card2:   var(--surface-2);
  --muted:   var(--text-3);
  --accent:  var(--brand);
  --good:    var(--success);
  --primary: var(--brand);
}

/* (선택적) 다크 — prefers-color-scheme 자동 전환, head 의 allow-auto-dark 활성화 */
@media (prefers-color-scheme: dark) {
  :root.allow-auto-dark {
    --bg:           #14140F;
    --surface:      #1D1D17;
    --surface-2:    #232319;
    --surface-3:    #2C2C20;
    --line:         #33332A;
    --line-strong:  #4A4A3F;
    --text:         #F0EEE6;
    --text-2:       #B5B3A6;
    --text-3:       #9C9A8E;   /* 다크에서 라벨 가독성 위해 한 톤 밝게 */
    --brand:        #54B89F;
    --brand-soft:   #1F3A33;
    --brand-strong: #7BD0B7;
    --success:      #4ADE80;
    --warn:         #FBBF24;
    --danger:       #F87171;

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:    0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 24px 48px -12px rgba(0, 0, 0, 0.7);

    color-scheme: dark;
  }
}

/* ── Reset + base ── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typography 스케일 (모바일 우선) ── */
.t-display  { font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.t-h1       { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.t-h2       { font-size: 20px; font-weight: 700; line-height: 1.3;  letter-spacing: -0.005em; }
.t-h3       { font-size: 17px; font-weight: 600; line-height: 1.35; }
.t-body-lg  { font-size: 17px; font-weight: 400; line-height: 1.6; }
.t-body     { font-size: 15px; font-weight: 400; line-height: 1.55; }
.t-caption  { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text-3); }
.t-mono     { font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace; font-size: 14px; }
.t-num-display { font-size: 36px; font-weight: 700; line-height: 1.1;  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.t-num-card    { font-size: 18px; font-weight: 600; line-height: 1.2;  font-variant-numeric: tabular-nums; }

@media (min-width: 720px) {
  .t-display { font-size: 40px; }
  .t-h1      { font-size: 28px; }
  .t-h2      { font-size: 22px; }
  .t-h3      { font-size: 18px; }
  .t-num-display { font-size: 44px; }
}

/* ── Links ── */
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast); }
a:hover { color: var(--brand); text-decoration-color: var(--brand); }
a.no-line { text-decoration: none; }
a.brand { color: var(--brand); text-decoration: none; }
a.brand:hover { text-decoration: underline; text-decoration-color: var(--brand); }

/* ── Form elements ── */
button, input, textarea, select {
  font: inherit;
  color: var(--text);
}
button { cursor: pointer; }
input, textarea, select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 16px; /* 16+ — iOS Safari 자동 zoom 방지 */
  min-height: 48px;
  width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea { line-height: 1.55; min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(15, 110, 92, 0.18);
}
input::placeholder, textarea::placeholder {
  color: var(--text-3);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 16px; font-weight: 600;
  min-height: 48px;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform 80ms;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(15, 110, 92, 0.18); }
.btn-primary    { background: var(--brand); color: #FFF; }
.btn-primary:hover    { background: var(--brand-strong); }
.btn-primary:disabled { background: var(--text-3); color: #FFF; cursor: not-allowed; opacity: 0.7; }
.btn-secondary  { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover  { background: var(--surface-3); border-color: var(--text-3); }
.btn-ghost      { background: transparent; color: var(--text-2); }
.btn-ghost:hover      { background: var(--surface-3); color: var(--text); }
.btn-danger     { background: transparent; color: var(--danger); }
.btn-danger:hover     { background: rgba(155, 44, 44, 0.08); }
.btn-icon       { padding: 0; min-width: 44px; min-height: 44px; border-radius: var(--r-md); }
.btn-block      { width: 100%; }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.card-tap { cursor: pointer; }
.card-tap:hover { border-color: var(--line-strong); background: var(--surface); }
.card-tap:active { background: var(--surface-3); }

/* ── Tag / chip ── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
}

/* ── Footer (전 페이지 공통) ── */
.site-footer {
  margin-top: 48px;
  padding: 24px 0 12px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.9;
}
.site-footer a {
  color: var(--text-2);
  text-decoration: none;
  margin: 0 8px;
}
.site-footer a:hover { color: var(--brand); }
.site-footer .meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3);
}

/* ── 일반 컨테이너 ── */
.container { max-width: 720px; margin: 0 auto; padding: 24px 20px 80px; }
.container-narrow { max-width: 480px; margin: 0 auto; padding: 16px 20px 100px; }

/* ── 보조 ── */
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.divider { height: 1px; background: var(--line); border: 0; margin: 16px 0; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* ── 접근성: motion 줄이기 선호 시 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}