/* 오일노트(OilNote) — 네이비 테마
   (변수명은 호환을 위해 --green* 유지하되 값은 네이비 계열) */
:root {
  --green: #2b4c7e;       /* primary navy */
  --green-dark: #1d3557;  /* deep navy */
  --green-soft: #eaf0f8;  /* light navy tint (hover/active) */
  --mint-bg: #e8edf4;     /* page background (navy-grey) */
  --line: #dbe2ec;
  --text: #1f2d3d;
  --muted: #8a97a8;
  --red: #ef5350;
  --red-soft: #f7a3a0;
  --fs: 18px;            /* 모바일 기본 글자 크기(보통) — 설정에서 변경 */
}
/* 글자 크기 (모바일) — 메뉴 > 글자 크기 에서 선택, localStorage 저장 */
/* html[data-font="m"] { --fs: 16px; }  (작게 — 현재 미사용, 주석 처리) */
html[data-font="l"]  { --fs: 18px; }   /* 보통 */
html[data-font="xl"] { --fs: 20.5px; } /* 크게 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  background: var(--mint-bg);
  color: var(--text);
  font-size: 14px;
}

a { color: inherit; text-decoration: none; }

/* ---------------- App shell ---------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  padding: 14px;
  gap: 14px;
}

.sidebar {
  width: 210px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 18px;
  padding: 22px 14px;
  box-shadow: 0 6px 20px rgba(43, 76, 126, 0.12);
}

.sidebar .logo {
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  color: var(--green);
  margin-bottom: 28px;
  letter-spacing: -0.5px;
}
.sidebar .logo small {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted);
  font-weight: 600;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 4px;
  color: #5a6678;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.nav a .ico { width: 18px; text-align: center; }
.nav a:hover { background: var(--green-soft); color: var(--green-dark); }
.nav a.active {
  background: #fff;
  color: var(--green-dark);
  box-shadow: 0 3px 12px rgba(43, 76, 126, 0.22);
}
.nav a.active .ico { color: var(--green); }
/* 세차권 하위 메뉴(등록/사용) — 들여쓰기·작게 */
.nav a.nav-sub { padding: 8px 16px 8px 30px; font-size: 13px; font-weight: 500; color: #7a8494; margin-bottom: 2px; }
.nav a.nav-sub.active { background: var(--green-soft); color: var(--green-dark); box-shadow: none; }

/* ---------------- Main ---------------- */
.main {
  flex: 1;
  background: #fff;
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow: 0 6px 20px rgba(43, 76, 126, 0.12);
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.topbar .page-title { font-size: 20px; font-weight: 800; }
.topbar .right { display: flex; align-items: center; gap: 14px; }
.topbar .company { font-weight: 700; color: var(--text); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 22px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-outline { background: #fff; color: var(--green-dark); border-color: var(--green); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #d84743; }
.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 16px; }

/* ---------------- Tables ---------------- */
.table-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
table.grid { width: 100%; border-collapse: collapse; }
table.grid thead th {
  background: var(--green);
  color: #fff;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
table.grid tbody td {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
table.grid tbody tr:last-child td { border-bottom: none; }
.empty-row td { color: var(--muted); padding: 28px; }

/* ---------------- Search / toolbar ---------------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.search-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--green);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}
.search-pill select, .search-pill input { border: none; outline: none; padding: 9px 12px; font-size: 13px; background: transparent; }
.search-pill .sep { width: 1px; height: 18px; background: var(--line); }
.search-pill button { border: none; background: transparent; padding: 0 14px; color: var(--green); cursor: pointer; }

/* ---------------- Cards / dashboard ---------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: #fff;
}
.card h4 { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.card .big { font-size: 24px; font-weight: 800; color: var(--green-dark); }

/* ---------------- Forms ---------------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--green-dark); font-weight: 700; margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
.field input:focus, .field select:focus { border-color: var(--green); }
.field input[readonly] { background: var(--green-soft); }

.placeholder-note {
  margin-top: 16px;
  padding: 40px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 14px;
}

/* ---------------- Login ---------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  width: 380px;
  background: #fff;
  border: 6px solid var(--green);
  border-radius: 24px;
  padding: 34px 30px;
  box-shadow: 0 10px 30px rgba(43, 76, 126, 0.2);
}
.login-card .logo { text-align: center; font-size: 26px; font-weight: 800; color: var(--green); margin-bottom: 24px; }
.login-card .logo small { display: block; font-size: 10px; letter-spacing: 4px; color: var(--muted); }
.login-card .options { display: flex; gap: 18px; justify-content: center; margin: 14px 0; font-size: 13px; color: #5a6678; }
.login-card .btn { width: 100%; margin-top: 8px; padding: 13px; font-size: 15px; }
.login-card .msg { color: var(--red); font-size: 13px; text-align: center; margin-bottom: 10px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.col-title { font-size: 18px; font-weight: 800; margin-bottom: 18px; }

/* 데스크톱에서만 넓은 비율(내 차량 등) — 모바일은 아래 @media 에서 1열 */
@media (min-width: 769px) { .two-col-wide { grid-template-columns: 1fr 1.4fr; } }

/* ---------------- 모달(팝업) ---------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .45);
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-card {
  background: #fff; border-radius: 18px;
  padding: 26px; width: 100%; max-width: 420px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
}

/* ---------------- 글자 크기 설정 (메뉴/드로어, 모바일 전용) ---------------- */
.nav-fontsize { display: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.nav-fontsize .nfs-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 9px; }
.fs-seg { display: flex; gap: 6px; }
.fs-seg button {
  flex: 1; padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: #5a6678; font-weight: 700; font-family: inherit; cursor: pointer;
  font-size: 13px;
}
.fs-seg button.active { background: var(--green); color: #fff; border-color: var(--green); }
@media (max-width: 768px) { .nav-fontsize { display: block; } }

/* ---------------- 마이 허브 (회원정보/카드/차량 진입) ---------------- */
.hub-user { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.hub-user-ico { font-size: 26px; width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--green-soft); border-radius: 50%; }
.hub-user b { display: block; font-size: 17px; color: var(--green-dark); }
.hub-user small { color: var(--muted); font-size: 13px; }
.hub-list { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.hub-item {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 10px rgba(43, 76, 126, .06);
  transition: background .12s, box-shadow .12s;
}
.hub-item:hover { background: var(--green-soft); box-shadow: 0 4px 14px rgba(43, 76, 126, .14); }
.hub-ico { font-size: 24px; width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--green-soft); border-radius: 12px; }
.hub-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hub-body b { font-size: 16px; color: var(--green-dark); }
.hub-body small { color: var(--muted); font-size: 12.5px; }
.hub-arrow { color: var(--muted); font-size: 26px; font-weight: 700; line-height: 1; }
.form-narrow { max-width: 480px; }
@media (max-width: 768px) {
  .hub-item { padding: 20px 18px; }
  .hub-body b { font-size: var(--fs); }
  .hub-body small { font-size: calc(var(--fs) * .78); }
}

/* ---------------- 홈 요약 섹션 (주유이력/세차이력) ---------------- */
.home-sec { margin-bottom: 26px; }
.home-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.home-sec-head h3 { margin: 0; font-size: 18px; }
.home-sec-head .more { color: var(--green-dark); font-weight: 700; font-size: 13px; white-space: nowrap; }
@media (max-width: 768px) {
  .home-sec-head h3 { font-size: calc(var(--fs) * 1.15); }
  .home-sec-head .more { font-size: calc(var(--fs) * .8); }
}

/* 홈 화면 선택 (사이드바 — 데스크톱/모바일 공통) */
.nav-home { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.nfs-hint { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* 홈1 — 추천 배지 */
.reco { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--green-soft); color: var(--green-dark); border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 14px; margin-bottom: 16px; }
.reco a { color: var(--green); font-weight: 700; white-space: nowrap; }

/* 홈1 — KPI 카드 */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 2px 10px rgba(43, 76, 126, .06); }
.kpi-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.kpi-value { color: var(--green-dark); font-weight: 800; font-size: 30px; margin-top: 6px; line-height: 1.1; }
.kpi-unit { font-size: 15px; font-weight: 700; margin-left: 2px; color: var(--muted); }
.kpi-sub { color: var(--muted); font-size: 12px; margin-top: 6px; }
.kpi-muted .kpi-value { color: var(--muted); }
@media (min-width: 769px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) {
  .kpi-label { font-size: calc(var(--fs) * .82); }
  .kpi-value { font-size: calc(var(--fs) * 1.9); }
  .kpi-sub { font-size: calc(var(--fs) * .72); }
}

/* 홈1·홈4 — 활동 피드 */
.feed { display: flex; flex-direction: column; gap: 8px; }
.feed-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.feed-ico { font-size: 20px; width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--green-soft); border-radius: 10px; }
.feed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-body b { font-size: 14px; color: var(--text); }
.feed-body small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-amt { font-weight: 800; color: var(--green-dark); white-space: nowrap; flex-shrink: 0; }
.feed-amt.canceled { color: var(--muted); text-decoration: line-through; }
@media (max-width: 768px) {
  .feed-body b { font-size: calc(var(--fs) * .9); }
  .feed-body small { font-size: calc(var(--fs) * .78); }
  .feed-amt { font-size: var(--fs); }
}

/* 홈1 — 도메인 카드(세차/주유 분리) */
.dash-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; box-shadow: 0 2px 12px rgba(43, 76, 126, .06); margin-bottom: 16px; }
.dash-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.dash-head h3 { margin: 0; font-size: 17px; }
.dash-head .more { color: var(--green-dark); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* 영업상태 배지 */
.status-badge { font-weight: 800; white-space: nowrap; flex-shrink: 0; font-size: 14px; }
.status-badge.on { color: #1e8449; }
.status-badge.off { color: #c0392b; }

/* 미니 KPI (카드 내부 3분할) */
.mini-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk { background: var(--green-soft, #f2f7f2); border-radius: 12px; padding: 12px 8px; text-align: center; }
.mk-v { color: var(--green-dark); font-weight: 800; font-size: 20px; line-height: 1.1; }
.mk-v span { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 1px; }
.mk-l { color: var(--muted); font-size: 11.5px; margin-top: 5px; font-weight: 600; }
.mk-s { color: var(--muted); font-size: 11px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 미니 막대 차트(6개월) */
.mini-chart { display: flex; align-items: flex-end; gap: 6px; margin-top: 14px; padding: 6px 2px 0; }
.mc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mc-bar-wrap { width: 100%; height: 72px; display: flex; align-items: flex-end; justify-content: center; }
.mc-bar { width: 58%; max-width: 24px; min-height: 3px; background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%); border-radius: 5px 5px 2px 2px; transition: height .3s; }
.mc-cnt { font-size: 11px; font-weight: 700; color: var(--green-dark); }
.mc-lbl { font-size: 11px; color: var(--muted); }

/* 최근 내역 접기 토글 */
.recent-toggle { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 11px 12px; background: #f7f8fa; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--text); }
.recent-toggle .chev { color: var(--muted); font-size: 12px; }
.recent-feed { margin-top: 8px; }

@media (max-width: 768px) {
  .dash-head h3 { font-size: calc(var(--fs) * 1.05); }
  .dash-head .more { font-size: calc(var(--fs) * .8); }
  .mk-v { font-size: calc(var(--fs) * 1.2); }
  .mk-l { font-size: calc(var(--fs) * .72); }
  .mk-s { font-size: calc(var(--fs) * .68); }
  .mc-cnt, .mc-lbl { font-size: calc(var(--fs) * .72); }
  .recent-toggle { font-size: var(--fs); }
  .status-badge { font-size: var(--fs); }
}

/* 홈2 — 차량별 카드 */
.vcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(43, 76, 126, .06); }
.vcard-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.vcard-head b { font-size: 17px; color: var(--green-dark); }
.vcard-head small { color: var(--muted); font-size: 13px; }
.vcard-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.vcard-stats > div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--green-soft); padding-bottom: 6px; }
.vcard-stats span { color: var(--muted); font-size: 13px; }
.vcard-stats b { color: var(--green-dark); font-weight: 800; }
.vcard-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { background: var(--green-soft); color: var(--green-dark); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; }

/* 홈3 — 막대 차트 */
.barchart { display: flex; align-items: flex-end; gap: 8px; padding: 10px 4px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bar-val { font-size: 11px; color: var(--muted); font-weight: 700; height: 14px; }
.bar-track { width: 100%; height: 130px; display: flex; align-items: flex-end; background: linear-gradient(var(--mint-bg), #fff); border-radius: 8px; overflow: hidden; }
.bar-fill { width: 100%; background: linear-gradient(var(--green), var(--green-dark)); border-radius: 8px 8px 0 0; min-height: 2px; }
.bar-label { font-size: 12px; font-weight: 700; color: var(--text); }
.bar-cnt { font-size: 11px; color: var(--muted); }
.chart-sum { margin-top: 14px; text-align: center; color: var(--muted); font-size: 13px; }
.chart-sum b { color: var(--green-dark); }

/* ---------------- 모바일 내비 컴포넌트 (데스크톱 기본 숨김) ---------------- */
.hamburger { display: none; }
.tabbar { display: none; }
.drawer-backdrop { display: none; }
.topbar .left { display: flex; align-items: center; min-width: 0; gap: 0; }

/* ---------------- 반응형 (모바일 ≤768px) ---------------- */
@media (max-width: 768px) {
  /* 앱 셸: 동적 뷰포트(100dvh)를 채우고 본문만 내부 스크롤 →
     하단 탭바가 브라우저 주소창 표시/숨김과 무관하게 항상 같은 위치에 보임 */
  html { height: 100%; }
  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); overflow: hidden; }
  .app-shell { flex: 1 1 auto; min-height: 0; flex-direction: column; padding: 0; gap: 0; }

  /* 사이드바 → 오프캔버스 드로어 */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 78%; max-width: 300px;
    border-radius: 0 18px 18px 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .drawer-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.4); }
  .drawer-backdrop.open { display: block; }

  /* 본문 */
  .main {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    border-radius: 0;
    padding: 16px 16px 22px;
    box-shadow: none;
  }
  /* 모바일 가시성 — 글자 크기 설정(--fs) 기준으로 비례 확대 */
  body { font-size: var(--fs); }
  .topbar { margin-bottom: 18px; }
  .topbar .left { flex: 1; min-width: 0; }
  .topbar .right { flex-shrink: 0; }
  .topbar .company { display: none; }  /* 사용자명은 '마이'에 있으므로 상단바에서 숨김 */
  .topbar .page-title { font-size: calc(var(--fs) * 1.31); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .field label { font-size: calc(var(--fs) * .875); }
  .field input, .field select { font-size: var(--fs); padding: 13px 14px; }  /* var=iOS 확대 방지 위해 ≥16px 권장 */
  .btn { font-size: calc(var(--fs) * .9); padding: 12px 20px; }
  .btn-sm { font-size: calc(var(--fs) * .81); padding: 8px 15px; }
  .modal-card { padding: 24px 20px; }
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff; font-size: 18px; cursor: pointer; margin-right: 10px;
  }

  /* 그리드 1열화 + 대시보드 카드 크게 (--fs 비례) */
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 24px 22px; }
  .card h4 { font-size: calc(var(--fs) * .94); margin-bottom: 10px; }
  .card .big { font-size: calc(var(--fs) * 2.25); }
  .two-col { grid-template-columns: 1fr; gap: 24px; }
  .main > h3 { font-size: calc(var(--fs) * 1.25); margin: 28px 0 14px; }
  .col-title { font-size: calc(var(--fs) * 1.25); }

  /* 데이터 테이블 → 카드 스택 (라벨:값) */
  .table-wrap { border: none; overflow: visible; }
  table.grid { width: 100%; }
  table.grid thead { display: none; }
  table.grid, table.grid tbody { display: block; width: 100%; }
  table.grid tbody tr {
    display: block;
    border: 1px solid var(--line); border-radius: 12px;
    margin-bottom: 10px; padding: 4px 2px; background: #fff;
    box-shadow: 0 2px 8px rgba(43, 76, 126, .06);
  }
  table.grid tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    text-align: right; border: none; padding: 9px 13px;
    border-bottom: 1px solid var(--green-soft);
    white-space: normal; word-break: break-all;
  }
  table.grid tbody tr td:last-child { border-bottom: none; }
  table.grid tbody td { font-size: var(--fs); padding: 11px 14px; }
  table.grid tbody td::before {
    content: attr(data-label);
    flex-shrink: 0; min-width: 68px;
    font-size: calc(var(--fs) * .875); font-weight: 700; color: var(--green-dark); text-align: left;
    word-break: keep-all;
  }
  /* 빈 행(데이터 없음)은 단순 중앙 메시지 */
  table.grid tbody tr.empty-row { box-shadow: none; }
  .empty-row td { display: block; text-align: center; color: var(--muted); padding: 24px; }
  .empty-row td::before { content: none; }

  /* 로그인/회원가입 카드 풀폭 */
  /* 로그인/회원가입 화면은 앱 셸(.app-shell)이 없다. body 가 100dvh + overflow:hidden 이라
     내용이 화면보다 길면(회원가입 폼) 아래가 잘린 채 스크롤도 되지 않는다.
     → 이 래퍼가 body 의 flex 자식으로서 스크롤을 담당하게 한다(min-height:100vh 해제 필수). */
  .login-wrap {
    padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px));
    padding-top: 40px;
    align-items: flex-start;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .login-card { width: 100%; max-width: 420px; }

  /* 하단 탭바 — 흐름상 맨 아래(고정 아님). 앱 셸이 100dvh라 항상 화면 하단에 위치 */
  .tabbar {
    display: flex; flex-shrink: 0;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(43, 76, 126, .10);
    padding: 7px 4px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; cursor: pointer; font-family: inherit;
    color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 4px 2px;
    line-height: 1.15;
  }
  .tabbar .tico { font-size: 21px; line-height: 1; }
  .tabbar a.active { color: var(--green); }
}