:root {
  color-scheme: light;
  --ink: #152638;
  --muted: #657487;
  --line: #dce5ee;
  --paper: #ffffff;
  --canvas: #edf3f8;
  --navy: #123b61;
  --navy-2: #1f5b86;
  --sea: #2c86a6;
  --sky: #e8f5fb;
  --blue-team: #dff3ff;
  --blue-team-line: #8bccec;
  --pink-team: #ffebf0;
  --pink-team-line: #efb1c0;
  --warning: #8a4d00;
  --warning-bg: #fff4d9;
  --danger: #bd2e3d;
  --shadow: 0 16px 40px rgba(21, 48, 76, .10);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 13px;
  --size-tap: 44px;
  --size-input: 46px;
  --size-primary: 50px;
  --size-nav: 54px;
  --size-method: 54px;
  --home-card-line: #bdd2df;
  --home-card-shadow: 0 2px 0 rgba(24, 67, 94, .06), 0 10px 24px rgba(25, 56, 82, .10), inset 0 1px 0 rgba(255,255,255,.92);
  --surface-line: #c6d7e2;
  --surface-shadow: 0 2px 0 rgba(40, 76, 99, .08), 0 9px 20px rgba(22, 55, 81, .09), inset 0 1px 0 rgba(255,255,255,.94);
  --surface-shadow-strong: 0 3px 0 rgba(40, 76, 99, .09), 0 13px 28px rgba(20, 52, 79, .12), inset 0 1px 0 rgba(255,255,255,.96);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--canvas); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
body.modal-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid rgba(25, 129, 177, .38); outline-offset: 2px; }

/* 앱 시작 영상 — 9:16 원본은 온전히 보이고 남는 화면은 가장자리 색으로 자연스럽게 잇는다. */
.splash { position: fixed; inset: 0; z-index: 1400; display: flex; overflow: hidden; align-items: center; justify-content: center; background: #071e31; }
.splash[hidden] { display: none !important; }
.splash.out { animation: splash-out .55s ease forwards; }
@keyframes splash-out { to { opacity: 0; visibility: hidden; transform: scale(1.06); } }
.splash::before { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, #042640 0%, #031f35 45%, #001c30 100%); content: ""; }
.sp-poster,
.sp-video { position: absolute; top: 50%; left: 50%; display: block; width: min(100vw, 56.25vh); height: min(100vh, 177.7778vw); object-fit: contain; object-position: 50% 50%; background: transparent; transform: translate(-50%, -50%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%); }
.sp-poster { z-index: 1; }
.sp-video { z-index: 2; }
.sp-video[hidden] { display: none !important; }
.splash::after { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to bottom, rgba(7,30,49,0) 65%, rgba(7,30,49,.38) 100%); content: ""; pointer-events: none; }
.sp-body { position: absolute; right: 0; bottom: calc(7% + env(safe-area-inset-bottom)); left: 0; z-index: 4; text-align: center; }
.sp-dday { display: inline-block; padding: 7px 18px; border: 1px solid rgba(255,255,255,.32); border-radius: 22px; background: rgba(255,255,255,.9); color: #123b61; font-size: 14px; font-weight: 850; opacity: 0; box-shadow: 0 6px 20px rgba(0,0,0,.22); animation: splash-badge .45s cubic-bezier(.34,1.56,.64,1) 1.75s forwards; }
@keyframes splash-badge { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes splash-hint { from { opacity: 0; transform: translateY(6px); } to { opacity: .72; transform: none; } }

.app-frame {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 16px calc(70px + env(safe-area-inset-bottom));
  background: #f7f9fc;
  box-shadow: 0 0 0 1px rgba(20, 49, 76, .04), 0 0 60px rgba(27, 58, 86, .09);
}
.tab-page { min-width: 0; padding-top: 16px; }

.hero {
  --hero-aside-width: 116px;
  --hero-aside-inset: 22px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 230px;
  padding: 24px 22px 20px;
  border: 1px solid rgba(173, 224, 231, .26);
  border-radius: 0 0 30px 30px;
  background:
    radial-gradient(circle at 72% 8%, rgba(255, 205, 120, .18) 0, rgba(255, 205, 120, 0) 24%),
    radial-gradient(circle at 12% 96%, rgba(72, 204, 202, .20) 0, rgba(72, 204, 202, 0) 32%),
    linear-gradient(148deg, #071f3d 0%, #0c4464 55%, #137f8c 118%);
  color: #fff;
  box-shadow: 0 14px 32px rgba(13, 49, 75, .17), inset 0 1px 0 rgba(255,255,255,.09);
}
.hero::before,
.hero::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}
.hero::before {
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 8% 19%, rgba(255,255,255,.58) 0 1px, transparent 1.6px),
    radial-gradient(circle at 57% 13%, rgba(255,225,166,.45) 0 1px, transparent 1.7px),
    radial-gradient(circle at 64% 29%, rgba(255,255,255,.34) 0 1px, transparent 1.6px),
    linear-gradient(102deg, transparent 0 62%, rgba(255,255,255,.055) 62.5% 63%, transparent 63.5%);
  opacity: .9;
}
/* 여수 돌산대교 야경과 밤바다를 자산 추가 없이 가벼운 벡터 배경으로 그린다. */
.hero::after {
  right: 0;
  bottom: -1px;
  left: 0;
  height: 126px;
  border-radius: 0 0 29px 29px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 126'%3E%3Cpath d='M0 96C66 82 116 111 181 97s126-22 239 2v27H0Z' fill='%23084b66' fill-opacity='.58'/%3E%3Cpath d='M0 105c66-14 122 12 190 0s137-13 230 4' fill='none' stroke='%237adce0' stroke-opacity='.28' stroke-width='2'/%3E%3Cpath d='M22 79C123 72 275 72 405 80' fill='none' stroke='%23ffd27a' stroke-opacity='.62' stroke-width='2'/%3E%3Cpath d='M22 79C123 72 275 72 405 80' fill='none' stroke='%23fff1b5' stroke-opacity='.72' stroke-width='4' stroke-linecap='round' stroke-dasharray='.1 13'/%3E%3Cg fill='none' stroke='%23f8d794' stroke-opacity='.43' stroke-width='1.15'%3E%3Cpath d='M113 75V34h5v41M288 76V40h5v36M109 36h13M284 42h13'/%3E%3Cpath d='M115 36L35 78m80-42L65 76m50-40L91 75m26-39l45 37m-45-37l78 37m95-31l-66 32m66-32l-36 33m36-33l41 35m-41-35l82 37'/%3E%3C/g%3E%3Cpath d='M300 100q32-27 61-10 29-19 59-5v41H298Z' fill='%2305213d' fill-opacity='.56'/%3E%3C/svg%3E");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .72;
}
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.hero-top > div:first-child { min-width: 0; }
.hero-copy { position: relative; }
.eyebrow, .section-kicker {
  display: block;
  margin-bottom: 6px;
  color: #9adce8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}
.hero .eyebrow {
  display: inline-flex;
  width: max-content;
  min-height: 25px;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: rgba(4, 30, 52, .27);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: 8px;
}
.hero h1 { margin: 0; font-size: clamp(24px, 6.6vw, 30px); line-height: 1.18; letter-spacing: -.04em; white-space: nowrap; }
.hero h1 span { font-size: .82em; }
.hero p { margin: 8px 0 0; color: rgba(255,255,255,.76); font-size: 13px; font-weight: 600; line-height: 1.45; }
.dday {
  position: absolute;
  top: calc(100% + 14px);
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 3;
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid #d39b2c;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffe083, #f5bc43);
  color: #573700;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 4px 11px rgba(54,38,0,.22);
  animation: dday-glow 3.4s ease-in-out infinite;
}
.dday::before { font-size: 11px; line-height: 1; content: "✦"; }
.dday[data-phase="before"]::before { content: "⏳"; }
.dday[data-phase="during"]::before { content: "🌊"; }
.dday[data-phase="after"]::before { content: "✨"; }
@keyframes dday-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.055); } }
.hero-weather { display: flex; flex: 0 0 var(--hero-aside-width); width: var(--hero-aside-width); min-height: 94px; flex-direction: column; align-items: center; justify-content: center; padding: 9px 10px 8px; border: 1px solid rgba(255,255,255,.38); border-radius: 15px; background: rgba(255,255,255,.16); color: #fff; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 14px rgba(2,24,42,.15); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: opacity .18s ease, background-color .18s ease; }
.hero-weather-icon { display: inline-block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 27px; line-height: 1.05; text-align: center; animation: weather-float 4s ease-in-out infinite; }
.hero-weather-copy { display: flex; min-width: 0; flex-direction: column; align-items: center; line-height: 1.05; }
.hero-weather-copy strong { margin-top: 2px; font-size: 19px; font-weight: 900; letter-spacing: -.04em; }
.hero-weather-copy small { margin-top: 3px; color: rgba(255,255,255,.82); font-size: 10.5px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.hero-weather.is-loading { opacity: .76; }
.hero-weather.is-error { background: rgba(42,57,70,.32); }
.hero-weather.is-error .hero-weather-copy strong { font-size: 17px; }
@keyframes weather-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.hero-top { position: relative; z-index: 2; }
.hero-pets { position: absolute; right: var(--hero-aside-inset); bottom: 4px; z-index: 3; width: var(--hero-aside-width); height: 90px; margin: 0; pointer-events: none; }
.hero-pets img { position: absolute; right: 0; bottom: 5px; display: block; width: var(--hero-aside-width); height: auto; border: 2px solid rgba(255,255,255,.76); border-radius: 14px; background: #f6f9f8; box-shadow: 0 6px 14px rgba(4,30,50,.32); animation: pet-float 5s ease-in-out infinite; }
.hero-pets figcaption { position: absolute; right: 0; bottom: 0; display: flex; width: var(--hero-aside-width); flex-direction: column; align-items: center; gap: 1px; padding: 4px 20px 3px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: rgba(5,39,62,.82); color: #fff; line-height: 1.1; text-align: center; box-shadow: 0 3px 8px rgba(4,28,47,.22); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.hero-pets figcaption b, .hero-pets figcaption span { width: 100%; text-align: center; }
.hero-pets figcaption b { font-size: 10.5px; letter-spacing: -.02em; white-space: nowrap; }
.hero-pets figcaption span { color: rgba(255,255,255,.84); font-size: 9.5px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
.hero-pets figcaption > i { position: absolute; top: 50%; right: 4px; display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.16); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 10px; font-style: normal; line-height: 1; opacity: 1; transform: translateY(-50%); }
@keyframes pet-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.home-section { margin: 26px 2px 0; }
.home-weather-section { margin-top: 24px; }
.weather-section-head { display: flex; align-items: center; gap: 10px; margin: 0 4px 12px; }
.weather-section-head::after { flex: 1; height: 1px; background: #cddce6; content: ""; }
.weather-section-head h2 { flex: 0 0 auto; margin: 0; color: #173b57; font-size: 15.5px; font-weight: 900; letter-spacing: -.02em; }
.weather-section-head h2 small { color: #4d687c; font-size: 12px; font-weight: 750; }
.weather-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.weather-day { position: relative; display: flex; min-width: 0; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; padding: 12px 5px 9px; border: 1px solid #d5e1e9; border-radius: 13px; background: #fff; color: #18384f; text-align: center; box-shadow: 0 3px 10px rgba(32,67,91,.08); }
.weather-day.is-today { border-color: #2274e8; background: linear-gradient(160deg, #eef6ff, #e5f1ff); box-shadow: 0 4px 12px rgba(34,116,232,.14); }
.weather-day.is-trip { border-color: #2e8aa5; background: linear-gradient(160deg, #edf9fb, #f8fdfe); }
.weather-day.is-today.is-trip { border-color: #2274e8; background: linear-gradient(160deg, #eef6ff, #e5f1ff); }
.weather-today { position: absolute; top: -8px; left: 50%; padding: 2px 9px; border-radius: 999px; background: #2274e8; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .04em; transform: translateX(-50%); }
.weather-date { min-height: 27px; color: #365166; font-size: 10.5px; font-weight: 800; line-height: 1.25; }
.weather-day.is-today .weather-date { color: #1461c9; }
.weather-day-icon { margin: 4px 0 2px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 25px; line-height: 1.25; }
.weather-range { color: #102f48; font-size: 13.5px; font-weight: 900; letter-spacing: -.02em; }
.weather-rain { margin-top: 4px; color: #176bd1; font-size: 10.5px; font-weight: 800; }
.weather-loading, .weather-unavailable { grid-column: 1 / -1; margin: 0; padding: 13px 14px; border: 1px solid #d9e4eb; border-radius: 12px; background: #fff; color: #607484; font-size: 12px; line-height: 1.5; box-shadow: 0 3px 10px rgba(32,67,91,.06); }
.weather-brief { display: grid; gap: 6px; margin-top: 9px; padding: 10px 11px; border: 1px solid #d6e2ea; border-radius: 12px; background: #fff; color: #4f6677; box-shadow: 0 3px 10px rgba(32,67,91,.08); }
.weather-brief[hidden] { display: none; }
.weather-brief-kicker { color: #286b9b; font-size: 10.5px; font-weight: 900; }
.weather-brief-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; color: #314a5c; font-size: 12px; line-height: 1.45; }
.weather-brief-main strong { color: #1869cf; font-size: 13px; font-weight: 900; }
.weather-brief-advice { padding: 6px 8px; border-left: 3px solid #a56a00; border-radius: 0 8px 8px 0; background: #fff1cf; color: #7a5200; font-size: 11.5px; font-weight: 800; line-height: 1.45; }
.weather-brief-next { color: #627889; font-size: 11px; line-height: 1.4; }
.weather-source { margin: 6px 3px 0; color: #7a8b98; font-size: 9.5px; line-height: 1.4; text-align: right; }
.weather-source a { color: #526e82; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 4px 11px; }
.section-head > div { min-width: 0; flex: 1; }
.section-head h2 { display: flex; width: 100%; min-width: 0; align-items: center; gap: 7px; margin: 0; font-size: 19px; letter-spacing: -.03em; }
.section-head h2::after { flex: 1; min-width: 18px; height: 1px; margin-left: 2px; background: linear-gradient(90deg, #c5d7e2, rgba(197,215,226,.25)); content: ""; }
.section-kicker { margin-bottom: 3px; color: #2f6785; font-size: 11px; }
.text-button { display: inline-flex; flex: 0 0 auto; min-height: var(--size-tap); align-items: center; gap: 4px; padding: 0 6px 0 12px; border: 1px solid #cbdde8; border-radius: 999px; background: linear-gradient(145deg, #fff, #edf6fa); color: #245a78; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 11px rgba(30,77,105,.09), inset 0 1px 0 rgba(255,255,255,.9); cursor: pointer; }
.text-button > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #dcecf4; color: #176b8a; font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1; transition: background-color .16s ease, transform .16s ease; }

.next-card,
.home-pay-card {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--home-card-line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--home-card-shadow);
  text-align: left;
  cursor: pointer;
}
.next-card { align-items: stretch; gap: 0; overflow: hidden; padding: 0; border-left: 3px solid #2580a4; }
.next-time { display: flex; flex: 0 0 92px; flex-direction: column; justify-content: center; padding: 18px 15px; border-right: 1px solid #d2e1e9; background: linear-gradient(145deg, #e9f5fa, #deedf5); color: var(--navy); }
.next-time span { margin-bottom: 4px; color: #3d6480; font-size: 12.5px; font-weight: 700; }
.next-time b { font-size: 16px; letter-spacing: -.03em; }
.next-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: center; gap: 5px; padding: 17px 16px; }
.next-copy strong { font-size: 15px; line-height: 1.35; }
.next-copy > span:not(.warning-badge) { color: var(--muted); font-size: 12px; line-height: 1.5; }
.next-empty { display: flex; flex-direction: column; gap: 5px; padding: 20px; }
.next-empty span { color: var(--muted); font-size: 12px; }
.warning-badge, .choice-badge {
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
}
.choice-badge { background: #eee9ff; color: #59449a; }

.home-pay-card { flex-direction: column; padding: 19px 20px; border-left: 3px solid #2b8b7d; }
.home-pay-card > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.home-pay-card > strong { margin-top: 3px; color: var(--navy); font-size: 28px; letter-spacing: -.045em; }
.home-pay-card > small { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d6e3eb; color: #405b70; font-size: 12px; font-weight: 750; }

.home-sos-section { padding-bottom: 12px; }
.sos-card { overflow: hidden; border: 1px solid var(--home-card-line); border-radius: 20px; background: #fff; box-shadow: var(--home-card-shadow); transition: border-color .18s ease, box-shadow .18s ease; }
.sos-card[open] { border-color: #bfd2df; box-shadow: 0 13px 30px rgba(25,56,82,.11); }
.sos-card summary { display: flex; min-height: 72px; align-items: center; gap: 12px; padding: 12px 13px 12px 15px; background: linear-gradient(145deg, #fff, #fbfdff); cursor: pointer; list-style: none; touch-action: manipulation; }
.sos-card[open] summary { background: linear-gradient(145deg, #f9fcfe, #edf5f9); }
.sos-card summary:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px #176b8a; }
.sos-card summary::-webkit-details-marker { display: none; }
.sos-card summary > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.sos-card summary b { color: #24394b; font-size: 15px; letter-spacing: -.02em; }
.sos-card summary small { color: #5b6b79; font-size: 12.5px; }
.sos-card summary i { display: grid; flex: 0 0 auto; width: var(--size-tap); height: var(--size-tap); place-items: center; border: 0; border-radius: 50%; background: transparent; color: #5c7181; font-style: normal; box-shadow: none; transition: color .18s ease, transform .18s ease; }
.sos-card summary i::before { display: block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.sos-card[open] summary i { background: transparent; color: #176b8a; box-shadow: none; }
.sos-card[open] summary i::before { transform: translateY(2px) rotate(225deg); }
.sos-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border: 1px solid #f6cfd5; border-radius: 14px; background: linear-gradient(145deg, #fff1f2, #f9dfe3); color: #ad2738; font-size: 10px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 3px 8px rgba(173,39,56,.10); }
.sos-body { padding: 0 14px 15px; border-top: 1px solid #e3edf2; background: linear-gradient(180deg, #fbfdfe, #fff 84px); }
.sos-card[open] .sos-body { animation: sos-body-in .24s cubic-bezier(.22,.9,.3,1) both; }
@keyframes sos-body-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.sos-group-title { display: flex; align-items: center; gap: 7px; margin: 14px 2px 8px; color: #41586a; font-size: 11.5px; font-weight: 850; letter-spacing: .02em; }
.sos-group-title::before { width: 6px; height: 6px; border-radius: 50%; background: #c93a4c; box-shadow: 0 0 0 4px rgba(201,58,76,.10); content: ""; }
.sos-group-title-local { margin-top: 13px; }
.sos-group-title-local::before { background: #287895; box-shadow: 0 0 0 4px rgba(40,120,149,.10); }
.sos-primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sos-primary a { position: relative; display: flex; min-width: 0; min-height: 68px; align-items: center; gap: 9px; overflow: hidden; padding: 12px; border: 1px solid; border-radius: 15px; text-decoration: none; box-shadow: 0 4px 11px rgba(40,64,82,.08), inset 0 1px 0 rgba(255,255,255,.72); }
.sos-primary a:first-child { border-color: #f3cbd1; background: linear-gradient(145deg, #fff7f8, #fbe7ea); }
.sos-primary a:last-child { border-color: #cadcea; background: linear-gradient(145deg, #f8fbfe, #e7f0f7); }
.sos-primary strong { color: #a81f30; font-size: 23px; letter-spacing: -.03em; }
.sos-primary a:last-child strong { color: #245f7d; }
.sos-primary span { color: #43535f; font-size: 12.5px; }
.sos-primary .sos-emoji { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; background: rgba(255,255,255,.72); box-shadow: 0 2px 6px rgba(35,67,88,.08); }
.sos-place { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; padding: 13px; border: 1px solid #e1eaf0; border-radius: 15px; background: #fff; box-shadow: 0 4px 13px rgba(28,58,80,.055); }
.sos-place > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.sos-place b { font-size: 14.5px; }
.sos-place small { color: #5b6b79; font-size: 12px; line-height: 1.45; }
.sos-place > div { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 64px; gap: 7px; }
.sos-place a { display: inline-flex; min-width: var(--size-tap); min-height: var(--size-tap); align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 1px solid; border-radius: 12px; font-size: 13px; font-weight: 800; text-decoration: none; }
.sos-place a::before { flex: 0 0 auto; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 13px; line-height: 1; }
.sos-place a[href^="tel:"] { border-color: #a92b3a; background: linear-gradient(135deg, #a92b3a, #c34352); color: #fff; font-size: 15px; font-weight: 850; letter-spacing: -.01em; box-shadow: 0 4px 10px rgba(169,43,58,.20); }
.sos-place a[href^="tel:"]::before { content: "☎"; }
.sos-place a[data-external] { border-color: #c8dce8; background: #edf5f9; color: #245d79; }
.sos-place a[data-external]::before { content: "📍"; }
.sos-place.is-pending { color: var(--muted); }
.sos-body > p { margin: 11px 0 0; padding: 10px 11px; border: 1px solid #e3ebf0; border-radius: 12px; background: #f5f8fa; color: #5f6c78; font-size: 11.5px; line-height: 1.55; }
.sos-body > p a { color: #315f7d; font-weight: 750; text-underline-offset: 2px; }

.page-header { padding: 20px 5px 15px; }
.page-header .eyebrow { color: #2f6785; }
.page-header h1 { display: flex; align-items: center; margin: 0; color: var(--navy); font-size: 28px; letter-spacing: -.045em; }
.page-header h1::after { flex: 1; min-width: 20px; height: 1px; margin-left: 11px; background: #c9d8e2; content: ""; }
.page-header p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.important-note { display: flex; align-items: center; gap: 11px; margin: 3px 2px 22px; padding: 13px 15px; border: 1px solid #f1d28b; border-radius: 15px; background: var(--warning-bg); color: #68410c; }
.important-note > span { font-size: 20px; }
.important-note b { font-size: 14.5px; }
.important-note p { margin: 3px 0 0; font-size: 12.5px; }

.day-section { margin: 0 1px 28px; }
.day-head { display: flex; align-items: center; gap: 9px; margin: 0 3px 14px; padding: 11px 13px; border: 1px solid rgba(18,59,97,.38); border-radius: 14px; background: linear-gradient(100deg, #123b61, #2c86a6); color: #fff; text-shadow: 0 1px 1px rgba(5,35,55,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(5,35,55,.22), 0 4px 10px rgba(18,59,97,.13); }
.day-section[data-day="2"] .day-head { border-color: rgba(24,101,92,.45); background: linear-gradient(100deg, #176052, #2b8b86); }
.day-head > span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; font-weight: 850; letter-spacing: .08em; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.day-head h2 { margin: 0; color: #fff; font-size: 17px; letter-spacing: -.03em; }
.timeline { position: relative; }
.timeline::before { position: absolute; left: 98px; top: 20px; bottom: 20px; width: 1px; background: #b9cbd8; content: ""; }
.timeline-item { position: relative; display: grid; grid-template-columns: 86px 18px minmax(0, 1fr); gap: 4px; align-items: start; margin-bottom: 10px; }
.timeline-time { padding: 15px 5px 0 0; color: #3d5265; font-size: 12.5px; font-weight: 750; line-height: 1.35; text-align: right; }
.timeline-dot { position: relative; z-index: 1; width: 9px; height: 9px; margin: 18px auto 0; border: 2px solid #fff; border-radius: 50%; background: #7ca5ba; box-shadow: 0 0 0 1px #79a6ba, 0 2px 5px rgba(35,75,99,.16); }
.timeline-item.is-warning .timeline-dot { background: #eaa82b; box-shadow: 0 0 0 1px #d79b24; }
.timeline-item.is-optional .timeline-dot { background: #8874c0; box-shadow: 0 0 0 1px #7662ad; }
.timeline-card { min-width: 0; padding: 14px 14px 13px; border: 1px solid var(--surface-line); border-left: 3px solid #79a5b9; border-radius: 16px; background: linear-gradient(155deg, #fff 0%, #fbfdfe 100%); box-shadow: var(--surface-shadow); }
.day-section[data-day="2"] .timeline-card { border-left-color: #438d83; }
.timeline-item.is-warning .timeline-card { border-color: #e5c675; border-left-color: #d29b29; background: linear-gradient(155deg, #fffefb, #fff9e9); }
.timeline-item.is-optional .timeline-card { border-color: #d4cbea; border-left-color: #806bb8; background: linear-gradient(155deg, #fff, #f8f5ff); }
.timeline-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.timeline-card h3 { min-width: 0; flex: 1 1 140px; margin: 0; font-size: 15px; line-height: 1.45; letter-spacing: -.02em; }
.timeline-duration { margin-top: 5px; color: #5f6f7e; font-size: 12px; font-weight: 700; }
.timeline-card p { margin: 6px 0 0; color: #48596a; font-size: 12.5px; line-height: 1.5; }
.timeline-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #e1e9ef; }
.timeline-actions-multi { gap: 9px; }
.place-actions { display: inline-grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 7px; }
.timeline-actions > .place-actions:only-child { width: 100%; }
.place-actions-name { display: flex; min-width: 0; grid-column: 1 / -1; align-items: center; gap: 6px; padding: 0 2px 1px; color: #3d5265; font-size: 12.5px; font-weight: 850; line-height: 1.35; }
.place-actions-name::before { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: #5b91aa; box-shadow: 0 0 0 3px rgba(91,145,170,.12); content: ""; }
.timeline-actions-multi .place-actions { flex: 1 1 100%; width: 100%; padding: 9px; border: 1px solid #cbdde7; border-radius: 14px; background: linear-gradient(145deg, rgba(248,252,254,.98), rgba(232,242,248,.9)); box-shadow: 0 3px 8px rgba(34,75,101,.08), inset 0 1px 0 rgba(255,255,255,.92); }
.place-actions a { position: relative; isolation: isolate; display: inline-flex; min-width: 0; min-height: var(--size-tap); align-items: center; justify-content: center; gap: 7px; overflow: hidden; padding: 0 10px; border: 1px solid transparent; border-radius: 12px; font-size: 13px; font-weight: 850; line-height: 1; text-decoration: none; touch-action: manipulation; }
.place-actions a::before { display: inline-flex; flex: 0 0 auto; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 14px; line-height: 1; }
.place-actions a[data-place-action="map"] { border-color: #c8e0ec; background: linear-gradient(145deg, #f7fbfd, #dceef7); color: #215c80; box-shadow: 0 3px 8px rgba(40,93,124,.12), inset 0 1px 0 rgba(255,255,255,.9); }
.place-actions a[data-place-action="map"]::before { background: rgba(255,255,255,.78); content: "📍"; box-shadow: 0 1px 4px rgba(38,92,122,.12); }
.place-actions a[data-place-action="nav"] { border-color: #155b79; background: linear-gradient(135deg, #123f68 0%, #1c7289 100%); color: #fff; box-shadow: 0 5px 12px rgba(18,63,104,.24), inset 0 1px 0 rgba(255,255,255,.16); }
.place-actions a[data-place-action="nav"]::before { background: rgba(255,255,255,.15); content: "🧭"; }
.place-actions a[data-place-action="nav"]::after { margin-left: -3px; color: rgba(255,255,255,.78); font-family: Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1; content: "›"; transition: transform .16s ease; }
.place-actions a[data-place-action]:active { transform: translateY(1px) scale(.98); }
.place-actions a[data-place-action="map"]:active { box-shadow: 0 1px 3px rgba(40,93,124,.12); }
.place-actions a[data-place-action="nav"]:active { box-shadow: 0 2px 5px rgba(18,63,104,.22); }
.place-actions a[data-place-action="nav"]:active::after { transform: translateX(3px); }
@keyframes place-action-in { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }
#tab-plan:not([hidden]) .place-actions a { animation: place-action-in .28s cubic-bezier(.22, .9, .3, 1) both; }
#tab-plan:not([hidden]) .place-actions a[data-place-action="nav"] { animation-delay: .04s; }
@media (hover: hover) and (pointer: fine) {
  .place-actions a[data-place-action="map"]:hover { border-color: #9bc5da; background: linear-gradient(145deg, #fff, #d5ebf5); box-shadow: 0 5px 12px rgba(40,93,124,.17); transform: translateY(-1px); }
  .place-actions a[data-place-action="nav"]:hover { background: linear-gradient(135deg, #0f3559 0%, #168097 100%); box-shadow: 0 7px 16px rgba(18,63,104,.3); transform: translateY(-1px); }
  .place-actions a[data-place-action="nav"]:hover::after { transform: translateX(3px); }
}
.place-sep { display: none; }
.source-note { margin: 4px 8px 18px; color: #64707c; font-size: 11.5px; line-height: 1.55; }

.pay-page-header { padding-bottom: 12px; }
.pending-decision { display: flex; flex-direction: column; gap: 3px; margin: 0 2px 9px; padding: 12px 14px; border: 1px solid #e1bd65; border-left: 3px solid #d39b2c; border-radius: 14px; background: linear-gradient(145deg, #fffdf7, #fff4d8); box-shadow: var(--surface-shadow); }
.pending-decision b { color: #6b440d; font-size: 13.5px; }
.pending-decision span { color: #6a5028; font-size: 12.5px; line-height: 1.5; }
.team-name-note { border-color: #d8dce6; background: #f4f5f9; }
.team-name-note b { color: #4e5667; }
.team-name-note span { color: #666f80; }

.pay-summary-card { position: relative; margin: 15px 1px 16px; padding: 21px 17px 16px; border: 1px solid #b9cfdd; border-radius: 23px; background: linear-gradient(160deg, #fff 0%, #f9fcfe 100%); box-shadow: var(--surface-shadow-strong); }
.pay-summary-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; border-radius: 23px 23px 0 0; background: linear-gradient(90deg, #17658a, #39a7a4); content: ""; }
.pay-total-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pay-total-line span { color: var(--muted); font-size: 12px; font-weight: 750; }
.pay-total-line strong { color: var(--navy); font-size: 28px; letter-spacing: -.05em; }
.pay-split-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 13px 0 15px; }
.pay-split-line span { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; border: 1px solid #d4e1e9; border-radius: 12px; background: linear-gradient(145deg, #f8fbfd, #edf4f8); color: #566878; font-size: 12.5px; box-shadow: 0 2px 5px rgba(34,70,94,.06), inset 0 1px 0 #fff; }
.pay-split-line b { color: #27455c; font-size: 16px; }
.pay-verdict { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px 13px; border: 1px solid rgba(7,44,69,.68); border-radius: 17px; background: linear-gradient(140deg, #103b61, #17677b); color: #fff; text-align: center; box-shadow: 0 3px 0 rgba(6,38,61,.18), 0 9px 19px rgba(15,65,88,.18), inset 0 1px 0 rgba(255,255,255,.16); }
.pay-verdict strong { font-size: 24px; letter-spacing: -.045em; }
.pay-verdict > span { color: rgba(255,255,255,.9); font-size: 12.5px; }
.pay-verdict.is-loading, .pay-verdict.is-empty { border-color: #cedde7; background: linear-gradient(145deg, #f5f9fb, #e9f1f6); color: #33506a; box-shadow: 0 2px 5px rgba(34,70,94,.07), inset 0 1px 0 #fff; }
.pay-verdict.is-loading > span, .pay-verdict.is-empty > span { color: #4a6076; }
.pay-verdict.is-zero { border-color: #22634f; background: linear-gradient(140deg, #23664f, #3c8870); }
.verdict-route { display: flex; align-items: center; gap: 8px; color: #fff !important; font-size: 12px !important; }
.verdict-route i { color: #98d9df; font-style: normal; }
.pay-load-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; padding: 8px 10px; border: 1px solid #d7e3eb; border-radius: 11px; background: #f7fafc; color: #5f6c78; font-size: 11.5px; box-shadow: inset 0 1px 0 #fff; }
.pay-load-status small { color: #67737e; font-size: 11.5px; }
.pay-load-status button { min-height: var(--size-tap); margin-left: auto; padding: 8px 13px; border: 1px solid #b8d1df; border-radius: 10px; background: linear-gradient(145deg, #edf6fa, #d9e9f2); color: #235273; font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 5px rgba(34,70,94,.08), inset 0 1px 0 #fff; }
.team-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.team-card { min-width: 0; padding: 12px; border: 1px solid; border-radius: 15px; box-shadow: 0 2px 5px rgba(32,67,91,.07), inset 0 1px 0 rgba(255,255,255,.82); }
.team-card.team-a { border-color: var(--blue-team-line); background: var(--blue-team); }
.team-card.team-b { border-color: var(--pink-team-line); background: var(--pink-team); }
.team-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid rgba(53, 85, 110, .12); }
.team-card header b { min-width: 0; font-size: 14px; }
.team-card header span { flex: 0 0 auto; color: #5b6874; font-size: 11.5px; }
.team-card dl { margin: 8px 0 0; }
.team-card dl > div { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; }
.team-card dt { color: #58656f; font-size: 12px; }
.team-card dd { margin: 0; font-size: 13.5px; font-weight: 800; }
.settle-help { margin: 14px 2px 0; color: #5e6b77; font-size: 12px; line-height: 1.6; }

.pay-sync { margin: 0 1px 12px; padding: 12px 14px; border: 1px solid #dcb457; border-left: 3px solid #c58c18; border-radius: 13px; background: #fff4d8; color: #6b4b17; font-size: 12.5px; line-height: 1.55; box-shadow: var(--surface-shadow); }
.pay-list { margin-top: 18px; }
.expense-group { overflow: hidden; margin-bottom: 15px; border: 1px solid #c7d8e3; border-radius: 18px; background: #fff; box-shadow: var(--surface-shadow); }
.expense-group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 14px; border-bottom: 1px solid #d5e1e9; background: linear-gradient(145deg, #f7fafc, #eaf2f7); box-shadow: inset 0 1px 0 #fff; }
.expense-group > header b { font-size: 12px; }
.expense-group > header span { color: #5b6874; font-size: 12px; }
.pay-empty-row { margin: 11px; padding: 20px 14px; border: 1.5px dashed #b9ccd8; border-radius: 13px; background: linear-gradient(145deg, #fff, #f7fafc); color: #61707c; font-size: 13px; text-align: center; }
.expense-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 13px 14px; border-top: 1px solid #dbe5ec; background: linear-gradient(145deg, #fff, #fbfdfe); box-shadow: inset 3px 0 0 #dceaf2; }
.expense-group > header + .expense-row { border-top: 0; }
.expense-row.is-pending { background: linear-gradient(145deg, #fffdf8, #fff7e8); box-shadow: inset 3px 0 0 #dcaa46; }
.expense-main { min-width: 0; flex: 1; }
.expense-title { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.expense-title strong { min-width: 0; font-size: 12.5px; line-height: 1.4; }
.pending-badge { padding: 3px 5px; border-radius: 6px; background: #f7dfaa; color: #735117; font-size: 8px; font-weight: 850; }
.expense-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 6px; color: #56636f; font-size: 12px; }
.expense-meta span:not(:last-child)::after { margin-left: 7px; color: #c1c8cf; content: "·"; }
.expense-main p { margin: 6px 0 0; color: #536471; font-size: 12px; line-height: 1.45; }
.expense-side { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 7px; }
.expense-side > b { font-size: 13px; white-space: nowrap; }
.expense-actions { display: flex; gap: 4px; }
.expense-actions button { min-width: var(--size-tap); min-height: var(--size-tap); padding: 5px 8px; border: 1px solid #d2dee7; border-radius: 9px; background: #edf2f6; color: #506779; font-size: 12.5px; font-weight: 750; cursor: pointer; box-shadow: 0 2px 4px rgba(32,67,91,.06), inset 0 1px 0 rgba(255,255,255,.9); }
.expense-actions button[data-edit] { border-color: #bdd4e2; background: #e3eef6; color: #1f5673; }
.expense-actions button[data-delete],
.expense-actions button[data-delete-pending] { border-color: #efcbd0; background: #fdeaec; color: #a81f30; }

.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: 0; display: grid; width: min(100%, 480px); grid-template-columns: repeat(3, 1fr); padding: 4px 12px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(20, 51, 78, .1); background: rgba(255,255,255,.95); box-shadow: 0 -10px 30px rgba(27, 58, 86, .08); transform: translateX(-50%); backdrop-filter: blur(16px); }
.bottom-nav button { display: flex; min-width: 0; min-height: var(--size-nav); flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 4px; border: 0; border-radius: 12px; background: transparent; color: #5a6773; cursor: pointer; }
.bottom-nav button > span { font-size: 20px; font-weight: 500; line-height: 1; }
.bottom-nav button b { font-size: 11.5px; }
.bottom-nav button.is-active { background: #e8f2f7; color: var(--navy); }

.sheet-backdrop,
.confirm-backdrop,
.receipt-viewer { position: fixed; z-index: 80; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 16px 12px 0; background: rgba(9, 28, 45, .56); backdrop-filter: blur(4px); }
.expense-sheet { display: flex; width: min(100%, 480px); max-height: calc(94vh - env(safe-area-inset-bottom)); flex-direction: column; overflow: hidden; border-radius: 25px 25px 0 0; background: #fff; box-shadow: 0 -20px 50px rgba(10, 30, 46, .22); }
.expense-sheet > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 9px; border-bottom: 1px solid #edf1f4; }
.expense-sheet > header h2 { margin: 0; font-size: 18px; }
.expense-sheet > header button { width: var(--size-tap); height: var(--size-tap); border: 0; border-radius: 50%; background: #eef2f5; color: #607181; cursor: pointer; }
.sheet-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 15px 17px 22px; overscroll-behavior: contain; }
.expense-sheet > footer { padding: 9px 17px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid #e9eef2; background: #fff; }
.expense-sheet > footer button { width: 100%; min-height: var(--size-primary); padding: 12px 14px; border: 0; border-radius: 14px; background: var(--navy); color: #fff; font-size: 15px; font-weight: 850; cursor: pointer; }
.expense-sheet > footer button:disabled { opacity: .52; cursor: wait; }
.receipt-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 16px; }
.receipt-methods button { display: flex; min-width: 0; min-height: var(--size-method); height: var(--size-method); flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border: 1px solid #dbe5ec; border-radius: 13px; background: #f7fafc; font-size: 18px; cursor: pointer; }
.receipt-methods button span { font-size: 12px; font-weight: 750; }
.receipt-preview { overflow: hidden; max-height: 180px; margin-bottom: 12px; border-radius: 13px; background: #eef2f4; }
.receipt-preview img { display: block; width: 100%; max-height: 180px; object-fit: contain; }
.ocr-progress { margin-bottom: 12px; padding: 11px 12px; border-radius: 12px; background: #eef6fa; }
.ocr-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: #426477; font-size: 10px; }
.ocr-track { overflow: hidden; height: 5px; margin-top: 8px; border-radius: 99px; background: #d4e6ee; }
.ocr-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sea); transition: width .18s linear; }
.form-note { margin-bottom: 12px; padding: 11px 13px; border-radius: 11px; background: #eef6fa; color: #35576d; font-size: 12.5px; line-height: 1.55; }
.form-note.is-warning { background: #fff3d8; color: #77531d; }
.form-note.is-success { background: #e9f7f0; color: #346552; }
.form-field { margin-top: 14px; }
.form-field > label { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 850; }
.form-field > small { display: block; margin-top: 7px; color: #5f6c78; font-size: 11.5px; line-height: 1.5; }
.text-input { display: block; width: 100%; min-width: 0; min-height: var(--size-input); padding: 10px 13px; border: 1px solid #d5e0e8; border-radius: 12px; background: #fff; color: var(--ink); font-size: 16px; }
textarea.text-input { resize: vertical; line-height: 1.45; }
.option-grid { display: grid; gap: 6px; }
.option-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option-grid-payers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.option-grid-scopes { grid-template-columns: 1.35fr 1fr 1fr; }
.option-grid button { min-width: 0; min-height: 46px; padding: 9px 6px; border: 1px solid #d8e2e9; border-radius: 11px; background: #f7f9fb; color: #45596a; font-size: 13px; font-weight: 750; line-height: 1.3; cursor: pointer; }
.option-grid button.is-selected { border-color: var(--navy-2); background: #e3f0f6; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy-2); }
.form-field-note > button { display: inline-flex; min-width: var(--size-tap); min-height: var(--size-tap); align-items: center; justify-content: center; padding: 3px 0; border: 0; background: transparent; color: #33607d; font-size: 12.5px; font-weight: 750; cursor: pointer; }
.form-field-note textarea { margin-top: 7px; }

.confirm-backdrop { z-index: 100; align-items: center; padding: 20px; }
.confirm-card { width: min(100%, 350px); padding: 21px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(7, 25, 40, .28); }
.confirm-card h2 { margin: 0; font-size: 18px; }
.confirm-card p { margin: 10px 0 20px; color: #647381; font-size: 12px; line-height: 1.55; white-space: pre-line; }
.confirm-card > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.confirm-card button { min-height: 48px; padding: 11px; border: 0; border-radius: 11px; background: #edf2f5; font-size: 12px; font-weight: 800; cursor: pointer; }
.confirm-card #confirm-ok { background: var(--navy); color: #fff; }
.confirm-card #confirm-ok.is-danger { background: var(--danger); }
.receipt-viewer { z-index: 90; align-items: center; padding: 52px 18px 28px; }
.receipt-viewer img { display: block; max-width: min(100%, 480px); max-height: 82vh; border-radius: 14px; background: #fff; object-fit: contain; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.receipt-viewer button { position: absolute; top: 17px; right: 17px; width: var(--size-tap); height: var(--size-tap); border: 0; border-radius: 50%; background: #fff; color: #29475d; font-weight: 900; cursor: pointer; }
.toast { position: fixed; z-index: 1250; left: 50%; bottom: calc(126px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 20px; background: rgba(20, 32, 52, .95); color: #fff; font-size: 13px; font-weight: 750; line-height: 1.5; text-align: center; opacity: 0; box-shadow: 0 6px 20px rgba(11,37,69,.25); transform: translate(-50%, 8px); transition: opacity 160ms ease, transform 180ms ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 420px) {
  .hero { --hero-aside-inset: 17px; padding-right: 17px; padding-left: 17px; }
  .hero-top { gap: 10px; }
}

@media (max-width: 374px) {
  .app-frame { padding-right: 11px; padding-left: 11px; }
  .dday { left: 0; }
  .hero { --hero-aside-width: 104px; }
  .hero-weather { min-height: 92px; padding-right: 8px; padding-left: 8px; }
  .hero-weather-icon { font-size: 26px; }
  .hero-weather-copy strong { font-size: 18px; }
  .hero-weather-copy small { font-size: 10px; }
  .weather-days { gap: 6px; }
  .weather-day { min-height: 108px; padding-right: 4px; padding-left: 4px; }
  .weather-date { font-size: 10px; }
  .weather-range { font-size: 12.5px; }
  .weather-source { font-size: 9px; }
  .next-time { flex-basis: 80px; padding-right: 10px; padding-left: 10px; }
  .timeline { margin-left: -6px; }
  .timeline::before { left: 88px; }
  .timeline-item { grid-template-columns: 78px 16px minmax(0, 1fr); }
  .timeline-card { padding-right: 11px; padding-left: 11px; }
  .pay-summary-card { padding-right: 13px; padding-left: 13px; }
  .team-card { padding: 10px 9px; }
  .team-card header b { font-size: 12.5px; }
  .option-grid-payers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .option-grid-scopes { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
  .hero { --hero-aside-width: 96px; }
  .hero h1 { font-size: 22.5px; }
  .hero-pets figcaption { padding-right: 17px; padding-left: 17px; }
  .hero-pets figcaption b { font-size: 10px; }
  .hero-pets figcaption span { font-size: 9px; }
}

@media (min-width: 481px) {
  .app-frame { border-right: 1px solid rgba(30, 61, 88, .08); border-left: 1px solid rgba(30, 61, 88, .08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .toast { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   속초앱 플로팅 레일 이식 (v5.39 RC10~RC11 기준)
   하단 중앙 = 보기 전환 캡슐 / 우측 레일 = 주 행동 필 + TOP
   ───────────────────────────────────────────────────────────── */

/* 일차 전환 캡슐 — 일정표 탭에서만 노출 */
.mode-switcher { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 1100; width: max-content; height: 44px; max-width: calc(100vw - 24px); box-sizing: border-box; transform: translateX(-50%); padding: 0 3px; border: 1px solid #d6e0ee; border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(11,37,69,.20); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mode-switcher[hidden] { display: none !important; }
.mode-switcher-group { --mode-thumb-x: 0px; --mode-thumb-width: 0px; position: relative; display: flex; width: max-content; max-width: 100%; height: 44px; align-items: stretch; isolation: isolate; }
.mode-switcher-group::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; z-index: 0; width: var(--mode-thumb-width); transform: translateX(var(--mode-thumb-x)); border-radius: 19px; background: #1b64da; box-shadow: 0 2px 7px rgba(27,100,218,.25); transition: transform 150ms ease, width 150ms ease; pointer-events: none; }
.mode-segment { position: relative; z-index: 1; display: flex; min-width: var(--size-tap); height: var(--size-tap); box-sizing: border-box; align-items: center; justify-content: center; gap: 4px; padding: 0 16px; border: 0; border-radius: 19px; background: transparent; color: #41556a; font-family: inherit; font-size: 12.5px; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: color 150ms ease; }
.mode-segment.is-selected { color: #fff; }
.mode-icon { flex: 0 0 auto; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size: 14px; line-height: 1; }
.mode-label { display: block; flex: 0 0 auto; line-height: 1; white-space: nowrap; }

/* 지출 추가 — 우측 레일 주 행동. 스크롤 내리면 [＋]로 축소 */
.pay-fab { position: fixed; right: max(14px, calc(50% - 226px)); bottom: calc(134px + env(safe-area-inset-bottom)); z-index: 75; min-width: 46px; min-height: 46px; box-sizing: border-box; background: linear-gradient(135deg, #0b2545, #2b6cb0); color: #fff; border: 0; border-radius: 26px; padding: 13px 20px 13px 16px; font-size: 14.5px; font-weight: 800; font-family: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(11,37,69,.34); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .12s ease, filter .2s, padding .28s ease, border-radius .28s ease, gap .28s ease, opacity 150ms ease; }
.pay-fab[hidden] { display: none !important; }
.pay-fab:active { transform: scale(.96); filter: brightness(1.12); }
.pay-fab-plus { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size: 22px; line-height: 1; font-weight: 800; }
.pay-fab-lbl { overflow: hidden; white-space: nowrap; max-width: 120px; opacity: 1; transition: max-width .28s ease, opacity .18s ease; }
.pay-fab.mini { width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0; border-radius: 50%; gap: 0; }
.pay-fab.mini .pay-fab-lbl { max-width: 0; opacity: 0; }
body.floating-rail-scrolling .pay-fab { opacity: .6; }

/* 맨 위로 — 400px 이상 내려갔을 때만 나타나는 반투명 보조 유틸리티 */
.gotop { position: fixed; right: max(12px, calc(50% - 228px)); bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 70; display: flex; width: var(--size-tap); height: var(--size-tap); align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: #0b2545; font-family: inherit; font-size: 13px; font-weight: 900; line-height: 1; cursor: pointer; touch-action: manipulation; }
.gotop::before { position: absolute; inset: 2px; width: 40px; height: 40px; border: 1px solid #d6e0ee; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(11,37,69,.18); content: ""; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gotop .ar { position: relative; z-index: 1; display: block; font-size: 13px; line-height: 1; }
.gotop[hidden] { display: none !important; }

/* 일정표 탭은 하단 중앙 캡슐이 3칸이라 폭이 넓다.
   TOP을 캡슐 위 단으로 올려 우측에서 겹치지 않게 한다. */
body[data-active-tab="plan"] .gotop { bottom: calc(126px + env(safe-area-inset-bottom)); }

/* 시트·모달이 열리면 플로팅 레일을 숨긴다 (속초 동일 규칙) */
body.modal-open .mode-switcher, body.modal-open .pay-fab, body.modal-open .gotop { visibility: hidden; pointer-events: none; }

/* 플로팅 레일이 마지막 내용을 가리지 않도록 탭별 하단 여백 */
#tab-plan { padding-bottom: 44px; }
#tab-pay { padding-bottom: 105px; }

@media (max-width: 360px) {
  .mode-segment { padding-right: 12px; padding-left: 12px; font-size: 12px; }
  .pay-fab { right: 12px; }
  .gotop { right: 12px; }
}

/* ─────────────────────────────────────────────────────────────
   이모지 렌더링 — OS 기본 컬러 이모지 폰트를 우선 적용한다.
   (속초앱 .bi / .mode-icon과 동일 방침)
   ───────────────────────────────────────────────────────────── */
.nav-icon, .h-emoji, .sos-emoji, .mode-icon, .pay-fab-plus, .warning-badge, .choice-badge {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
}

/* 하단 탭 아이콘 — 속초 .bi(20px) 기준 */
.bottom-nav button > span.nav-icon { display: block; font-size: 20px; line-height: 1; }
.bottom-nav button.is-active .nav-icon { transform: translateY(-1px); }

/* 제목 앞 이모지 — 글자보다 살짝 작게 두어 제목이 주인공이 되게 한다 */
.h-emoji { display: inline-block; margin-right: 6px; font-size: .88em; line-height: 1; vertical-align: baseline; }
.team-card header b .h-emoji { margin-right: 4px; }

/* SOS 큰 버튼 — 이모지 + 번호/설명 2단 */
.sos-emoji { flex: 0 0 auto; font-size: 24px; line-height: 1; }
.sos-copy { display: flex; min-width: 0; flex-direction: column; gap: 1px; }

/* 선결제·현장 소계 라벨 */
.pay-split-line span em { font-style: normal; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────
   모션 레이어 — 누르는 피드백 · 화면 전환 · 시트 등장
   전부 아래 prefers-reduced-motion 전역 차단의 영향을 받는다.
   (속초앱은 :active 18곳·transition 26곳, 여수는 1곳뿐이라 보강)
   ───────────────────────────────────────────────────────────── */

/* 1) 누르는 피드백 — 부모님이 눌렀을 때 "반응했다"가 즉시 보여야 한다 */
.next-card, .home-pay-card, .bottom-nav button, .text-button, .mode-segment,
.gotop, .sos-card summary, .sos-primary a, .sos-place a, .place-actions a,
.option-grid button, .receipt-methods button, .expense-row, .form-field-note > button,
.confirm-card button, .expense-sheet > header button, .pay-load-status button {
  transition: transform .12s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease, color .15s ease;
}
.next-card:active, .home-pay-card:active { transform: scale(.985); box-shadow: 0 4px 14px rgba(27, 58, 86, .10); }
.bottom-nav button:active { transform: scale(.94); }
.text-button:active, .form-field-note > button:active { transform: scale(.96); color: #17435f; }
.text-button:active { border-color: #b7d1df; background: #e2f0f6; }
.text-button:active > span { background: #c9e2ed; transform: translateX(1px); }
.mode-segment:active { transform: scale(.95); }
.gotop:active { transform: scale(.9); }
.sos-card summary:active { background: #f4f8fb; }
.sos-primary a:active, .sos-place a:active, .place-actions a:active { transform: scale(.95); filter: brightness(.96); }
.option-grid button:active, .receipt-methods button:active { transform: scale(.96); }
.expense-row:active { background: #f3f7fa; }
.confirm-card button:active, .expense-sheet > header button:active, .pay-load-status button:active { transform: scale(.96); }

/* 2) 탭 전환 — 즉시 스냅 대신 살짝 떠오르며 나타난다 */
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tab-page:not([hidden]) { animation: tab-in .26s cubic-bezier(.22, .9, .3, 1) both; }

/* 3) 시트·모달 — 배경은 페이드, 카드는 아래에서 올라온다 */
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes card-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.sheet-backdrop:not([hidden]), .confirm-backdrop:not([hidden]), .receipt-viewer:not([hidden]) { animation: backdrop-in .18s ease both; }
.sheet-backdrop:not([hidden]) .expense-sheet { animation: sheet-up .3s cubic-bezier(.22, .9, .3, 1) both; }
.confirm-backdrop:not([hidden]) .confirm-card { animation: card-pop .22s cubic-bezier(.22, .9, .3, 1) both; }

/* 4) 스플래시가 걷힌 뒤 앱이 이어받는 순간 — 이음새를 부드럽게 */
@keyframes app-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.splash-handoff .app-frame { animation: app-in .42s cubic-bezier(.22, .9, .3, 1) both; }

/* 5) 스플래시 안내 — 탭하면 건너뛸 수 있다는 단서 */
.sp-skip {
  position: absolute; right: 0; bottom: calc(2.6% + env(safe-area-inset-bottom)); left: 0; z-index: 5;
  color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; text-align: center;
  opacity: 0; animation: splash-hint .45s ease 1.2s forwards;
}