/* ============================================================
   CarePass 디자인 시스템 (§8) — design/archive 화면 테스트의 토큰을 이식.
   자체 호스팅 CSS(§9 A03). Tailwind 마이그레이션 대상은 tailwind.config.js 참고.
   ============================================================ */
:root {
  --brand:#0E8F7E; --brand-dark:#0B7A6B; --brand-deep:#0A6E62;
  --pageback:#EEF4F3; --bg:#F4F8F7; --surface:#fff; --section:#F5FAF9;
  --text:#0E1A24; --muted:#7A8B96; --muted2:#546775; --faint:#A9B6BE;
  --border:#EAF0F2; --hairline:#E6EEEC; --field:#E2ECEA; --tile:#F1F6F5;
  --headerbg:rgba(244,248,247,0.9); --navbg:rgba(255,255,255,0.94);
  --danger:#E5484D; --warn-fg:#B26A00; --warn-bg:#FFF0DB;
  /* 브랜드 틴트 — 밝은 민트 배경류(배지/아이콘 타일/히어로). 다크모드에서 함께 반전 */
  --hero-top:#F3FAF8; --brand-tint:#E1F3EF; --brand-tint2:#EAF6F3; --brand-tint-fg:#0B7A6B;
}
.theme-dark {
  --pageback:#0B1113; --bg:#0F1719; --surface:#182226; --section:#10181A;
  --text:#E7EDEB; --muted:#93A2AA; --muted2:#A7B4B9; --faint:#7E8B92;
  --border:#232D2F; --hairline:#25302E; --field:#2A3634; --tile:#212B2F;
  --headerbg:rgba(15,23,25,0.82); --navbg:rgba(18,26,30,0.94);
  --hero-top:#111C1F; --brand-tint:rgba(20,160,140,0.18); --brand-tint2:rgba(20,160,140,0.14); --brand-tint-fg:#5FD3C0;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  -webkit-font-smoothing:antialiased; color:var(--text); background:var(--pageback);
  line-height:1.5; min-height:100vh;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); }
img { max-width:100%; }

/* ---- layout helpers ---- */
.container { max-width:1040px; margin:0 auto; padding:0 24px; }
.stack > * + * { margin-top:14px; }
.muted { color:var(--muted); }
.center { text-align:center; }
.row { display:flex; align-items:center; }
.between { display:flex; align-items:center; justify-content:space-between; }
.grow { flex:1; min-width:0; }
.hide { display:none !important; }

/* ---- brand mark ---- */
.logo { display:inline-flex; align-items:center; gap:9px; }
.logo .mark { width:30px; height:30px; border-radius:9px; background:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; }
.logo .mark::before { content:""; width:13px; height:13px; border:2.5px solid #fff;
  border-radius:50%; border-right-color:transparent; transform:rotate(-45deg); }
.logo .name { font-size:21px; font-weight:800; letter-spacing:-0.02em; }
.logo.sm .mark { width:26px; height:26px; } .logo.sm .name { font-size:18px; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:16px; font-weight:700; padding:14px 22px; border-radius:12px; border:none;
  white-space:nowrap; transition:background .18s,border-color .18s,opacity .18s; }
/* 요금제 선택 버튼(MY) — 좁은 화면 2열에서 줄바꿈 없이 들어가도록 좌우 패딩 축소 */
.plan-btn { padding-left:10px; padding-right:10px; }
/* 좁은 화면(갤럭시 등 ~412px)에선 2열로는 '프리미엄 (100만) · 이용중' 텍스트가 버튼을 넘침 → 세로 1열 배치 */
@media (max-width:420px) {
  .plan-row { flex-direction:column; align-items:stretch; }
  .plan-row .plan-btn { width:100%; }
}
/* 현재 이용중 요금제 — 선택 불가 표시(브랜드 테두리 + 기본 커서) */
.plan-btn.current { border-color:var(--brand); color:var(--brand); cursor:default; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-primary:disabled { background:#8B948F; cursor:not-allowed; }
.btn-ghost { background:var(--surface); color:var(--text); border:1.5px solid var(--field); }
.btn-ghost:hover { border-color:var(--brand); color:var(--brand); }
.btn-soft { background:#EAF6F3; color:var(--brand); }
.btn-soft:hover { background:#DEF0EC; }
.btn-block { width:100%; }
.btn-lg { padding:16px 28px; font-size:16.5px; }

/* ---- cards ---- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px;
  box-shadow:0 6px 16px -12px rgba(14,26,36,0.16); }
.card-flat { background:var(--surface); border-radius:18px; }
.section-title { font-size:15px; font-weight:800; margin-bottom:12px; }

/* ---- form fields ---- */
.label { display:block; font-size:13.5px; font-weight:700; color:var(--muted2); margin-bottom:10px; }
.field { width:100%; font-size:16px; font-weight:600; padding:15px 16px;
  border:1.5px solid var(--field); border-radius:13px; background:var(--surface); color:var(--text); }
select.field { appearance:none; }
.help { font-size:12.5px; color:var(--faint); margin-top:6px; }
.error-text { color:var(--danger); font-size:13px; font-weight:600; min-height:18px; }

/* ---- status badge ---- */
.badge { display:inline-block; font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:6px; white-space:nowrap; }

/* ---- app shell (mobile-first, §8) ---- */
.app-wrap { min-height:100vh; min-height:100dvh; display:flex; justify-content:center; }
.app { width:100%; max-width:480px; background:var(--bg); min-height:100vh; min-height:100dvh;
  position:relative; display:flex; flex-direction:column; }
.app-header { position:sticky; top:0; z-index:20; background:var(--headerbg);
  backdrop-filter:blur(12px); padding:18px 22px 14px; display:flex; align-items:center; justify-content:space-between; }
.app-main { padding:6px 18px 24px; flex:1; }
.app-title { font-size:20px; font-weight:800; letter-spacing:-0.02em; }
.bell { position:relative; width:44px; height:44px; border-radius:13px; background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  box-shadow:0 4px 12px -6px rgba(14,26,36,0.2); }
.bell .dot { position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%;
  background:var(--danger); border:2px solid var(--surface); }

/* bottom tab bar — position:fixed 대신 sticky(인플로우) 사용:
   iOS Safari 는 툴바 접힘/펼침·페이지 진입 시 fixed 요소 재배치가 누락되어
   탭바가 화면 중간에 떠 보이는 버그가 있다(.app flex column 의 마지막 요소로 하단 고정). */
.tabbar { position:sticky; bottom:0; margin-top:auto; width:100%;
  background:var(--navbg); backdrop-filter:blur(14px); border-top:1px solid var(--hairline);
  display:flex; padding:10px 8px 16px; z-index:30;
  padding-bottom:max(16px, calc(10px + env(safe-area-inset-bottom))); }
.tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--faint); }
.tabbar a.active { color:var(--brand); }
.tabbar .ico { font-size:22px; } .tabbar .lb { font-size:11px; font-weight:700; }

/* public(마케팅) GNB — 링크 글자단위 줄바꿈 방지, 좁은 화면은 보조 메뉴 숨김(로그인/가입만 유지) */
.public-gnb a { white-space:nowrap; }
@media (max-width:719px) { .public-gnb .gnb-menu { display:none; } }

/* 랜딩(home) 히어로 — 데스크톱 2열 그리드, 모바일은 상단 여백 축소 */
.landing-hero { padding:80px 24px 60px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:48px; align-items:center; }
/* 랜딩 납부 항목 그리드 — 모바일은 2열 압축(1열 풀폭 나열 방지) */
.pay-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.pay-grid .card { padding:24px 20px; }
@media (max-width:719px) {
  .landing-hero { padding:28px 20px 44px; gap:32px; }
  .pay-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .pay-grid .card { padding:18px 14px; }
}

/* desktop GNB for app (≥820px) */
.app-gnb { display:none; align-items:center; justify-content:space-between;
  padding:16px 28px; border-bottom:1px solid var(--hairline); }
@media (min-width:820px) {
  .app { max-width:1040px; }
  .app-gnb { display:flex; } .tabbar { display:none; }
  .app-gnb .menu { display:flex; gap:28px; font-size:15px; font-weight:700; }
  .app-gnb .menu a { color:var(--muted); } .app-gnb .menu a.active { color:var(--brand); }
}

/* ---- limit hero ---- */
.hero-limit { position:relative; background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  border-radius:22px; padding:24px; color:#fff; overflow:hidden;
  box-shadow:0 16px 34px -18px rgba(14,110,98,0.7); }
.hero-limit .bar { height:8px; border-radius:100px; background:rgba(255,255,255,0.22); overflow:hidden; margin:12px 0 10px; }
.hero-limit .bar > i { display:block; height:100%; background:#EDF7F4; border-radius:100px; }
/* 한도 초과 상태 — 붉은 그라디언트 + 진행바 경고색으로 초과를 명확히 표시 */
.hero-limit-over { background:linear-gradient(135deg,#C0392B,#8E2A1F);
  box-shadow:0 16px 34px -18px rgba(192,57,43,0.7); }
.hero-limit-over .bar > i { background:#FFE1DB; }
.amount { font-size:36px; font-weight:800; letter-spacing:-0.03em; }

/* ---- list rows ---- */
.list { background:var(--surface); border-radius:18px; padding:4px; box-shadow:0 6px 16px -12px rgba(14,26,36,0.16); }
.list-row { display:flex; align-items:center; gap:13px; padding:15px 14px; border-bottom:1px solid var(--border); }
.list-row:last-child { border-bottom:none; }
/* ---- 모바일 친화 토글 스위치 (마케팅 수신·다크 모드) ----
   브라우저 기본 checkbox 는 터치 타겟이 작고 갤럭시 크롬 기본 스타일이 조악 → iOS/안드로이드형 스위치로 대체.
   input 자체를 스위치로 렌더(appearance 제거) — 라벨/JS(id) 변경 없이 그대로 동작. 터치 타겟 51×31px. */
.switch { -webkit-appearance:none; appearance:none; position:relative; flex-shrink:0; cursor:pointer;
  width:51px; height:31px; border-radius:31px; background:var(--field); border:none; margin:0;
  transition:background .22s ease; outline:none; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform .22s ease; }
.switch:checked { background:var(--brand); }
.switch:checked::after { transform:translateX(20px); }
.switch:focus-visible { box-shadow:0 0 0 3px var(--brand-tint); }
.switch:disabled { opacity:.5; cursor:default; }
.avatar { width:42px; height:42px; border-radius:12px; background:var(--tile);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }

/* ---- PIN keypad ---- */
.pin-dots { display:flex; justify-content:center; gap:16px; margin-bottom:8px; }
.pin-dots span { width:15px; height:15px; border-radius:50%; background:var(--field); transition:background .15s; }
.pin-dots span.on { background:var(--brand); }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.keypad button { height:56px; font-size:22px; font-weight:700; color:var(--text);
  background:var(--tile); border:none; border-radius:13px; }
.keypad button.empty { background:transparent; cursor:default; }
.keypad button:active:not(.empty) { background:#DCEEEA; }
.shake { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-7px);} 40%,80%{transform:translateX(7px);} }

/* ---- modal / toast ---- */
.overlay { position:fixed; inset:0; background:rgba(6,14,16,0.5); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { width:100%; max-width:420px; background:var(--surface); border-radius:22px; padding:28px; }
.modal-title { font-size:18px; font-weight:800; margin-bottom:10px; }
.modal-msg { font-size:15px; color:var(--muted2); line-height:1.6; white-space:pre-line; }
.toast { position:fixed; left:50%; bottom:110px; transform:translateX(-50%); z-index:200;
  background:#0E1A24; color:#fff; font-size:14px; font-weight:600; padding:13px 20px; border-radius:12px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.5); opacity:0; transition:opacity .2s; }
.toast.show { opacity:1; }

/* ---- theme toggle ---- */
.theme-toggle { position:fixed; bottom:22px; right:16px; z-index:9999; width:48px; height:48px;
  border-radius:50%; border:1px solid var(--hairline); background:var(--surface); color:var(--text);
  font-size:19px; box-shadow:0 8px 22px -8px rgba(0,0,0,0.45); }
@media (min-width:600px){ .theme-toggle { right:max(16px, calc(50% - 224px)); } }
@media (min-width:820px){ .theme-toggle { right:max(16px, calc(50% - 504px)); } }