/* ── 리셋 ── */
*{box-sizing:border-box;margin:0;padding:0}

/* ── D-DIN 폰트 (SpaceX 서체 대안: Inter) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* ── 디자인 토큰 (SpaceX 팔레트) ── */
:root{
  /* Surface — 순수 블랙 대신 층이 보이는 다크 그레이 */
  --canvas-night:#0c0f14;
  --canvas-night-soft:#171c24;
  --canvas-light:#ffffff;
  --canvas-cool:#f4f5f7;

  /* Hairline */
  --hairline-dark:#2c333e;
  --hairline-light:#e3e6ea;

  /* Text */
  --on-primary:#f2f5f8;
  --on-primary-mute:#c3cad4;
  --ink:#000000;
  --ink-mute:#5a5a5f;

  /* Spacing */
  --sp-xxs:4px;
  --sp-xs:8px;
  --sp-sm:12px;
  --sp-md:16px;
  --sp-lg:18px;
  --sp-xl:24px;
  --sp-xxl:32px;
  --sp-huge:48px;

  /* Radius */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:16px;
  --r-pill:32px;

  /* Theme alias — 기존 --th-* 참조 코드와 호환 */
  --th-primary:#0c0f14;
  --th-primary-dark:#171c24;
  --th-accent:#ffffff;
  --th-bg:#0c0f14;
  --th-bg2:#171c24;
  --th-border:#2c333e;
  --th-text:#f2f5f8;
  --th-muted:#9aa3b0;
  --th-nav-active:#ffffff;
  --th-btn-save:#ffffff;

  /* 달력 날짜 색 — 일요일·공휴일 / 토요일 / 음력·절기 / 등록 기념일 */
  --th-holiday:#e05555;
  --th-sat:#5588dd;
  --th-lunar:#7d8794;
  --th-event:#e8a33d;

  /* Badges - Dark Mode (Default) — 대비 강화 */
  --badge-fuel-bg: rgba(52, 211, 153, 0.22);
  --badge-fuel-text: #52e5ae;
  --badge-ot-bg: rgba(167, 139, 250, 0.24);
  --badge-ot-text: #c4b0fc;
  --badge-toll-bg: rgba(96, 165, 250, 0.24);
  --badge-toll-text: #8fc0ff;
  --badge-ww-bg: rgba(16, 185, 129, 0.24);
  --badge-ww-text: #4be3b0;
  --badge-ot2-bg: rgba(251, 146, 60, 0.24);
  --badge-ot2-text: #ffab5e;
  --badge-photo-bg: rgba(248, 113, 113, 0.24);
  --badge-photo-text: #ff9b9b;
}

/* ── 화이트 테마 (전체 팔레트 반전) ── */
html.theme-white{
  --th-primary:#ffffff;
  --th-primary-dark:#f4f5f7;
  --th-accent:#111418;
  --th-bg:#ffffff;
  --th-bg2:#f4f5f7;
  --th-border:#e0e3e8;
  --th-text:#111418;
  --th-muted:#667080;
  --th-nav-active:#111418;
  --th-btn-save:#111418;
  --on-primary:#111418;
  --on-primary-mute:#495261;
  --canvas-night:#ffffff;
  --canvas-night-soft:#f4f5f7;
  --hairline-dark:#e0e3e8;

  /* 달력 날짜 색 — 흰 배경에서 대비가 나오도록 어둡게 */
  --th-holiday:#d32f2f;
  --th-sat:#1a5fb4;
  --th-lunar:#8a94a3;
  --th-event:#b06000;

  /* Badges - Light Mode */
  --badge-fuel-bg: #e6f4ea;
  --badge-fuel-text: #137333;
  --badge-ot-bg: #f3e8fd;
  --badge-ot-text: #681da8;
  --badge-toll-bg: #e8f0fe;
  --badge-toll-text: #1a73e8;
  --badge-ww-bg: #e6f4ea;
  --badge-ww-text: #137333;
  --badge-ot2-bg: #fef7e0;
  --badge-ot2-text: #b06000;
  --badge-photo-bg: #fce8e6;
  --badge-photo-text: #c5221f;
}

/* ── 폰트 기본 ── */
body{
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
  overscroll-behavior:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  background:var(--canvas-night);
  color:var(--on-primary);
}

/* ── 앱 레이아웃 ── */
.app{
  max-width:430px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  background:var(--canvas-night);
  color:var(--on-primary);
  min-height:100vh;
  min-height:100dvh;
  height:100vh;
  height:100dvh;
  position: relative;
  overflow: hidden;
}

/* ── 헤더 ── */
.hdr{
  background:transparent;
  color:var(--on-primary);
  padding:var(--sp-md) var(--sp-xl);
  padding-top:max(var(--sp-md),env(safe-area-inset-top));
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid var(--hairline-dark);
  background:var(--canvas-night);
}
.hdr-t{
  font-size:25px;
  font-weight:700;
  letter-spacing:0.5px;
  color:var(--on-primary);
}
.hdr-s{
  font-size:15px;
  color:var(--on-primary-mute);
  margin-top:4px;
  letter-spacing:0.5px;
}

/* ── 컨텐츠 영역 ── */
.content{
  flex:1;
  overflow-y:auto;
  padding-bottom:calc(88px + env(safe-area-inset-bottom));
  touch-action:pan-y;
}

/* ── 하단 네비게이션 ── */
.nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  background:var(--canvas-night);
  border-top:1px solid var(--hairline-dark);
  display:flex;
  z-index:10;
  padding-bottom:calc(env(safe-area-inset-bottom) + 6px);
  padding-top:4px;
}
.nb{
  flex:1;
  padding:8px 0 6px;
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--th-muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.2px;
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
  opacity:.75;
}
.nb.on{color:var(--th-nav-active);opacity:1}
.ni{display:flex;align-items:center;justify-content:center}
.ni svg{width:25px;height:25px;display:block}
.hdr-t{display:flex;align-items:center;gap:8px}
.hdr-ic{width:29px;height:29px;flex-shrink:0}

/* ── 달력 ── */
.mnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-sm) var(--sp-xl) var(--sp-xs);
}
.ml{
  font-size:18px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--on-primary);
}
.ma{
  background:transparent;
  border:1px solid var(--hairline-dark);
  border-radius:var(--r-pill);
  width:32px;
  height:32px;
  cursor:pointer;
  color:var(--on-primary);
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ma:active{background:rgba(255,255,255,.08)}

/* 캘린더 꽉차게 */
.content.cal-mode{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.cal-page{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cgrid{min-height:0}
.cc{min-height:0}
.cweek{display:grid;grid-template-columns:repeat(7,1fr);background:var(--hairline-dark);gap:1px;border-top:1px solid var(--hairline-dark)}
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--hairline-dark);flex:1;grid-auto-rows:1fr;overflow:hidden}
.ch{
  background:var(--canvas-night-soft);
  text-align:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  padding:7px 0;
  color:var(--th-muted);
}
.ch:first-child{color:var(--th-holiday)}.ch:last-child{color:var(--th-sat)}
.cc{
  background:var(--canvas-night);
  padding:4px 2px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  overflow:hidden;
}
.cc:active{opacity:.6}.cc.empty{background:var(--canvas-night-soft);cursor:default}
.cc.today{background:var(--canvas-night-soft)}
.cc.today .dn{
  background:var(--th-accent);
  color:var(--canvas-night)!important;
  border-radius:50%;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}
.cc:nth-child(7n+1) .dn{color:var(--th-holiday)}.cc:nth-child(7n) .dn{color:var(--th-sat)}
.dn{font-size:15px;font-weight:700;line-height:22px;min-width:22px;text-align:center;letter-spacing:0}

/* ── 음력 · 공휴일 (반드시 위 nth-child 규칙 뒤에 둘 것 — 특정도가 같아 순서로 이긴다) ── */
.dtop{display:flex;align-items:baseline;justify-content:center;gap:2px;max-width:100%;flex-shrink:0}
/* 초하루·보름에만 나오므로 매일 찍을 때보다 조금 키웠다 */
.lun{font-size:10px;font-weight:700;line-height:1;color:var(--th-lunar);letter-spacing:-0.3px;flex-shrink:0}
.dsub{
  font-size:9px;font-weight:600;line-height:1.1;letter-spacing:-0.5px;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;
  color:var(--th-lunar);
}
.dsub.holi{color:var(--th-holiday)}
.dsub.event{color:var(--th-event)}
.dsub.memo{color:var(--th-text)}
.cgrid .cc .dn.holi{color:var(--th-holiday)}
/* 오늘이 공휴일이면 흰 알약 대신 빨간 알약 */
.cc.today .dn.holi{background:var(--th-holiday);color:#fff!important}

/* 스와이프 애니메이션 */
@keyframes slideFromRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideFromLeft{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:translateX(0)}}
.cal-page.anim-left{animation:slideFromRight .26s cubic-bezier(.22,.61,.36,1)}
.cal-page.anim-right{animation:slideFromLeft .26s cubic-bezier(.22,.61,.36,1)}

.cbadge{border-radius:var(--r-xs);font-size:11px;font-weight:700;min-width:24px;height:19px;padding:0 4px;display:flex;align-items:center;justify-content:center;letter-spacing:0.3px}
.cbadge-off{font-size:10px;border-radius:var(--r-xs);padding:2px 4px;height:17px;display:flex;align-items:center;font-weight:700}
.off-v{background:rgba(255,200,0,.15);color:#d4a800}.off-r{background:rgba(220,50,50,.15);color:#e05555}
.mini-row{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;max-width:100%}
.mbadge{font-size:9px;font-weight:700;border-radius:4px;padding:2px 4px;line-height:1.4;display:inline-block}
.mbadge.fuel{background:var(--badge-fuel-bg);color:var(--badge-fuel-text)}
.mbadge.ot{background:var(--badge-ot-bg);color:var(--badge-ot-text)}
.mbadge.toll{background:var(--badge-toll-bg);color:var(--badge-toll-text)}
.mbadge.ww{background:var(--badge-ww-bg);color:var(--badge-ww-text)}
.mbadge.ot2{background:var(--badge-ot2-bg);color:var(--badge-ot2-text)}
.mbadge.photo{background:var(--badge-photo-bg);color:var(--badge-photo-text)}
.wbadge{background:rgba(5,150,105,.2);color:#34d399}.ot2badge{background:rgba(124,58,237,.2);color:#a78bfa}
.dots{display:flex;gap:2px;margin-top:1px}.dot{width:4px;height:4px;border-radius:50%}
.df{background:#34d399}.dp{background:#fbbf24}.dph{background:#f87171}.dt{background:#60a5fa}

/* 하단 요약 바 */
.sbar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline-dark);flex-shrink:0}
.si{padding:8px 4px;text-align:center;border-right:1px solid var(--hairline-dark)}.si:last-child{border-right:none}
.sl{font-size:13px;color:var(--th-muted);margin-bottom:2px;letter-spacing:0.6px;text-transform:uppercase;font-weight:700}
.sv{font-size:20px;font-weight:700;color:var(--on-primary);white-space:nowrap}.su{font-size:14px;color:var(--th-muted);margin-left:1px}
.legend{padding:6px 12px;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--hairline-dark)}
.li{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--th-muted);letter-spacing:0.3px}.lsw{width:12px;height:10px;border-radius:2px}

/* ── 섹션 헤더 ── */
.shdr,.sec{
  font-size:18px;
  font-weight:700;
  color:var(--th-accent);
  margin:20px 0 10px;
  padding:6px 0 6px var(--sp-xl);
  letter-spacing:0.5px;
  border-bottom:1px solid var(--hairline-dark);
}
.shdr:first-child,.sec:first-child{margin-top:0}

/* ── 기록 폼 ── */
.ef{padding:var(--sp-md) var(--sp-xl) var(--sp-xxl)}
.field{margin-bottom:12px}
.fl{
  font-size:13px;
  color:var(--th-muted);
  margin-bottom:6px;
  display:block;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
}
.field input,.field textarea,.field select{
  width:100%;
  padding:11px var(--sp-md);
  border:1px solid var(--hairline-dark);
  border-radius:var(--r-xs);
  font-size:17px;
  background:var(--canvas-night-soft);
  color:var(--on-primary);
  outline:none;
  -webkit-appearance:none;
  user-select:text;
  -webkit-user-select:text;
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(255,255,255,.5)}
.field textarea{resize:none;min-height:60px;font-size:16px}
/* 드롭다운도 입력칸과 같은 모양으로 (기본 브라우저 스타일이 테마와 어긋난다) */
.field select{
  font-size:16px;padding-right:26px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa3b0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:11px;
}
.field select:disabled{opacity:.45;cursor:default}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kmh{font-size:14px;color:var(--th-muted);margin-top:3px}

/* ── 토글 버튼 그룹 ── */
.btns{display:flex;gap:5px}
/* 설정 행(.srow) 안의 켜기/끄기 — 폭을 주지 않으면 동그랗게 찌그러진다 */
.btns.tgl{width:120px;flex-shrink:0}
.btns.tgl .btn{padding:8px 0;font-size:14px}
.btn{
  flex:1;
  padding:9px 4px;
  border:1px solid var(--hairline-dark);
  border-radius:var(--r-pill);
  background:transparent;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  cursor:pointer;
  color:var(--th-muted);
  text-align:center;
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
}
.btn.on{background:transparent!important;color:var(--on-primary)!important;border-color:var(--on-primary)!important}
.btn.off-btn.on{color:#fbbf24!important;border-color:#fbbf24!important}
.btn.rep-btn.on{color:#f87171!important;border-color:#f87171!important}
.tbts{display:flex;gap:6px}
.tbt{
  flex:1;
  padding:9px 4px;
  border:1px solid var(--hairline-dark);
  border-radius:var(--r-pill);
  background:transparent;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  cursor:pointer;
  color:var(--th-muted);
  text-align:center;
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
}
.tbt.on{background:transparent!important;color:#a78bfa!important;border-color:#a78bfa!important;font-weight:700}
.chint{font-size:15px;font-weight:700;margin-top:4px;letter-spacing:0.3px}

/* ── 카드 공통 ── */
.fuel-card,.km-card,.toll-card{
  background:var(--canvas-night-soft);
  border-radius:var(--r-sm);
  overflow:hidden;
  margin-top:8px;
  border:1px solid var(--hairline-dark);
}
.fuel-card-title,.km-card-title,.toll-card-title{
  background:transparent;
  color:var(--th-muted);
  font-size:12px;
  font-weight:700;
  padding:7px var(--sp-md);
  letter-spacing:1.17px;
  text-transform:uppercase;
  border-bottom:1px solid var(--hairline-dark);
}
.fcrow{display:flex;justify-content:space-between;align-items:center;padding:8px var(--sp-md);border-bottom:1px solid var(--hairline-dark)}
.fcrow:last-child{border-bottom:none}
.fck{font-size:14px;color:var(--th-muted);letter-spacing:0.3px}.fcv{font-size:16px;font-weight:700;color:var(--on-primary)}
.fcv.plus{color:#34d399}.fcv.minus{color:#f87171}.fcv.neutral{color:var(--on-primary)}.fcv.blue{color:#60a5fa}
.fuel-balance-big,.km-total-bar,.toll-total-bar{
  background:var(--canvas-night-soft);
  border-top:1px solid var(--hairline-dark);
  padding:10px var(--sp-md);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.fbb-label,.km-total-label,.toll-total-label{font-size:12px;color:var(--th-muted);font-weight:700;letter-spacing:0.8px;text-transform:uppercase}
.fbb-val,.km-total-val,.toll-total-val{font-size:22px;font-weight:700;color:var(--on-primary)}
.toll-row{display:flex;justify-content:space-between;align-items:center;padding:7px var(--sp-md);border-bottom:1px solid var(--hairline-dark)}
.toll-row:last-child{border-bottom:none}
.toll-key{font-size:14px;color:var(--th-muted)}.toll-val{font-size:16px;font-weight:700;color:var(--on-primary)}

/* ── 업데이트 알림 팝업 · 내역 ──
   showToast 가 z-index:9999 라 그 아래인 9998 을 쓴다 */
.wn-bg{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.6);
  z-index:9998;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:wnIn .18s ease;
}
@keyframes wnIn{from{opacity:0}to{opacity:1}}
.wn{
  background:var(--th-bg2);
  border:1px solid var(--th-border);
  border-radius:14px;
  padding:20px;
  width:100%;max-width:340px;max-height:70vh;
  overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.wn-ver{font-size:13px;font-weight:700;color:var(--th-muted);letter-spacing:0.4px}
.wn-t{font-size:19px;font-weight:700;color:var(--on-primary);margin:4px 0 12px;line-height:1.4}
.wn-list{list-style:none;padding:0;margin:0}
.wn-list li{
  font-size:15px;line-height:1.6;color:var(--on-primary-mute);
  padding-left:14px;position:relative;margin-bottom:7px;
}
.wn-list li:before{content:'·';position:absolute;left:3px;color:var(--th-muted);font-weight:700}
.wn-btn{margin-top:16px;margin-bottom:0}
/* 설정탭 내역 목록 */
.cl-item{padding:12px 0;border-bottom:1px solid var(--hairline-dark)}
.cl-item:last-child{border-bottom:none;padding-bottom:2px}
.cl-t{font-size:16px;font-weight:700;color:var(--on-primary);margin:3px 0 8px;line-height:1.4}

/* ── 쓰다 만 기록 (저장 전 임시 보관) ──
   달력: 헤더 아래 줄의 이어쓰기 링크 + 해당 날짜 칸 테두리.
   기록 화면: 맨 위 안내 띠 + 버리기 버튼. 색은 기념일과 같은 --th-event(주황) */
.draft-link{cursor:pointer;color:var(--th-event);font-weight:700}
.cc.draft{box-shadow:inset 0 0 0 2px var(--th-event)}
.draft-note{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 6px;padding:10px 12px;
  background:var(--canvas-night-soft);
  border:1px solid var(--th-event);border-radius:var(--r-sm);
}
.draft-note span{font-size:14px;font-weight:600;color:var(--on-primary);line-height:1.4}
.draft-note button{
  flex-shrink:0;
  background:transparent;color:var(--th-event);
  border:1px solid var(--th-event);border-radius:var(--r-pill);
  padding:7px 12px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;
}

/* ── 새 버전 알림 띠 ── 하단 탭바 위에 둔다 (상단은 헤더·당겨서새로고침이 쓴다) */
.upbar{
  position:fixed;left:0;right:0;
  bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:9998;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 12px;padding:11px 14px;
  background:var(--th-bg2);
  border:1px solid var(--th-border);
  border-radius:var(--r-sm);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  animation:upIn .22s ease;
}
@keyframes upIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.upbar span{font-size:15px;font-weight:600;color:var(--on-primary)}
.upbar button{
  flex-shrink:0;
  background:var(--th-btn-save);color:var(--th-bg);
  border:none;border-radius:var(--r-pill);
  padding:8px 15px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;
}

/* ── 항목 카드 ── */
.item-card{
  background:var(--canvas-night-soft);
  border-radius:var(--r-sm);
  padding:11px var(--sp-md);
  margin-bottom:8px;
  border:1px solid var(--hairline-dark);
}
.item-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.item-title{font-size:12px;font-weight:700;color:var(--th-muted);letter-spacing:0.8px;text-transform:uppercase}
.item-rm{
  background:transparent;
  border:1px solid var(--hairline-dark);
  border-radius:var(--r-pill);
  color:var(--th-muted);
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:3px 10px;
}
.item-fields{display:flex;flex-direction:column;gap:9px}.item-fields .field{margin:0}
.add-btn{
  width:100%;
  padding:10px;
  border:1px dashed var(--hairline-dark);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--th-muted);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:4px;
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
}

/* ── 사진 ── */
.photo-btns{display:flex;gap:8px;width:100%}
.photo-btn{
  flex:1;
  padding:10px 6px;
  border:1px solid var(--hairline-dark);
  border-radius:var(--r-sm);
  background:var(--canvas-night-soft);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  color:var(--th-muted);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.photo-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.pdel{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);color:#fff;border:1px solid var(--hairline-dark);border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;z-index:2}
/* 사진 확대 오버레이 — .wn-bg 위에 얹는다. 원본 크기로 두고 쓸어서 본다
   (blob URL 로 화면을 이동시키면 iOS 에서 죽은 히스토리가 남는다 — app.js phZoom 주석) */
.ph-bg{padding:0;overflow:auto;-webkit-overflow-scrolling:touch;display:block}
.ph-bg img{max-width:none;display:block}

/* ── 저장/삭제 버튼 ── */
.bsave{
  width:100%;
  padding:14px;
  background:transparent;
  color:var(--th-btn-save);
  border:1px solid var(--th-btn-save);
  border-radius:var(--r-pill);
  font-size:15px;
  font-weight:700;
  letter-spacing:1.17px;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:8px;
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
}
.bsave:active{background:rgba(255,255,255,.08)}
.bdel{
  width:100%;
  padding:11px;
  background:transparent;
  color:#f87171;
  border:1px solid #f87171;
  border-radius:var(--r-pill);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:7px;
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
}

/* ── 통계/결산 ── */
.sp{padding:var(--sp-md) var(--sp-xl) var(--sp-xxl)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mc{
  background:var(--canvas-night-soft);
  border-radius:var(--r-sm);
  padding:12px var(--sp-md);
  border:1px solid var(--hairline-dark);
}
.mc.full{grid-column:1/-1}.mc.dk{background:var(--canvas-night-soft);border-color:rgba(255,255,255,.15)}
.mk{
  font-size:12px;
  color:var(--th-muted);
  margin-bottom:4px;
  letter-spacing:0.8px;
  text-transform:uppercase;
  font-weight:700;
}
.mc.dk .mk{color:var(--th-muted)}
.mv{font-size:25px;font-weight:700;color:var(--on-primary)}.mu{font-size:14px;font-weight:400;margin-left:2px;opacity:0.6}
.mc.dk .mv{color:var(--on-primary)}
.fb{
  background:var(--canvas-night-soft);
  border-radius:var(--r-sm);
  padding:3px var(--sp-md);
  margin-bottom:10px;
  border:1px solid var(--hairline-dark);
}
.fr{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--hairline-dark)}.fr:last-child{border-bottom:none}
.fk{font-size:14px;color:var(--th-muted)}.fv{font-size:16px;font-weight:700;color:var(--on-primary)}
.ot2i{
  background:var(--canvas-night-soft);
  border-radius:var(--r-sm);
  padding:9px var(--sp-md);
  margin-bottom:6px;
  border:1px solid var(--hairline-dark);
  border-left:2px solid #a78bfa;
}
.ot2i.mo{border-left-color:#f87171}
.ot2d{font-size:13px;color:var(--th-muted);margin-bottom:3px;letter-spacing:0.3px;text-transform:uppercase;font-weight:700}
.ot2n{font-size:16px;font-weight:700;display:flex;align-items:center;flex-wrap:wrap;gap:5px;color:var(--on-primary)}
.ot2tp{font-size:12px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);letter-spacing:0.5px;text-transform:uppercase}
.tc{background:rgba(167,139,250,.15);color:#a78bfa;border:1px solid rgba(167,139,250,.3)}.tm{background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.3)}
.wwi{
  background:var(--canvas-night-soft);
  border-radius:var(--r-sm);
  padding:9px var(--sp-md);
  margin-bottom:6px;
  border:1px solid var(--hairline-dark);
  border-left:2px solid #34d399;
}
.emsg{
  text-align:center;
  color:var(--th-muted);
  font-size:15px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  padding:18px;
  background:var(--canvas-night-soft);
  border-radius:var(--r-sm);
  border:1px solid var(--hairline-dark);
}

/* ── 설정 ── */
.cfg-page{padding:var(--sp-md) var(--sp-xl) var(--sp-xxl)}
.cfg-sec{
  font-size:18px;
  font-weight:700;
  color:var(--th-accent);
  letter-spacing:0.5px;
  margin:20px 0 8px;
  border-bottom:1px solid var(--hairline-dark);
  padding-bottom:5px;
}
.cfg-sec:first-child{margin-top:0}
.sblk{background:var(--canvas-night-soft);border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px;border:1px solid var(--hairline-dark)}
.srow{display:flex;align-items:center;justify-content:space-between;padding:12px var(--sp-md);border-bottom:1px solid var(--hairline-dark)}.srow:last-child{border-bottom:none}
.slbl{font-size:16px;color:var(--on-primary);font-weight:500}
.slbl-sub{font-size:13px;color:var(--th-muted);display:block;margin-top:1px;letter-spacing:0.3px}
.sinp{
  width:110px;
  padding:7px 10px;
  border:1px solid var(--hairline-dark);
  border-radius:var(--r-xs);
  font-size:17px;
  text-align:right;
  background:var(--canvas-night);
  color:var(--on-primary);
  user-select:text;
  -webkit-user-select:text;
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
}
.backup-btn{
  width:100%;
  padding:13px;
  border:1px solid var(--hairline-dark);
  border-radius:var(--r-pill);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  cursor:pointer;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  color:var(--on-primary);
  font-family:'Inter','Arial Narrow',Arial,sans-serif;
}
.backup-btn.dl{background:transparent;color:var(--on-primary);border-color:var(--on-primary)}
.backup-btn.ul{background:transparent;color:var(--on-primary-mute);border-color:var(--hairline-dark)}
.backup-btn.danger{background:transparent;color:#f87171;border-color:#f87171}

/* ── 테마 선택 (단일 팔레트로 단순화) ── */
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:4px 0 8px}
.theme-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.theme-circle{
  width:52px;
  height:52px;
  border-radius:50%;
  border:2px solid var(--hairline-dark);
  transition:transform .15s;
}
.theme-item.selected .theme-circle{border-color:var(--on-primary);transform:scale(1.1)}
.theme-name{font-size:11px;color:var(--th-muted);text-align:center;font-weight:700;letter-spacing:0.5px;text-transform:uppercase}

/* ── 당겨서 새로고침 (Pull to Refresh) ── */
.ptr-indicator {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
  color: var(--th-muted);
  background: var(--canvas-night-soft);
  transition: transform 0.15s ease, opacity 0.15s ease;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  border-bottom: 1px solid var(--hairline-dark);
}
.ptr-indicator.active {
  color: var(--th-accent);
}
.ptr-indicator.loading .ptr-icon {
  animation: ptr-spin 1s linear infinite;
}
@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── 한 줄 맞춤 ──
   값이 길어도 줄바꿈 대신 한 줄을 유지한다.
   폭이 모자라면 app.js의 fit1()이 그 값만 폰트를 줄인다. */
.hdr .hdr-t{white-space:nowrap}
.hdr > div{min-width:0;flex:1}

.fr,.fcrow,.toll-row{gap:10px}
.fk,.fck,.toll-key{flex:0 0 auto;white-space:nowrap}
.fv,.fcv,.toll-val{flex:1 1 auto;min-width:0;white-space:nowrap;text-align:right}

.mv{white-space:nowrap}
.fbb-val,.km-total-val,.toll-total-val{white-space:nowrap}
.fbb-label,.km-total-label,.toll-total-label{flex:0 0 auto;white-space:nowrap}

.srow{gap:10px}
.srow > div:first-child{min-width:0}