/* 잘가 앱. 디자인 시안 기준 (크림 배경 · 살몬 포인트 · 카테고리별 파스텔 타일) */
:root {
  --bg: #FBF6F1;
  --card: #FFFFFF;
  --ink: #1E2A3A;
  --sub: #5B6472;
  --line: #F0E6DE;
  --salmon: #F47560;      /* 로고·그래픽 */
  --btn: #E35D48;         /* 버튼 (19px 굵은 흰 글자, 대비 3.5:1 = 큰 글자 기준 통과) */
  --btn-dark: #CF4A36;
  --price: #CF4A36;       /* 가격·강조 텍스트 */
  --salmon-50: #FDECE7;
  --esim: #E9573F;   --esim-bg: #FDE7E1;
  --fly: #3B82C4;    --fly-bg: #E3F0FB;
  --stay: #2E9E6A;   --stay-bg: #E1F4EA;
  --tix: #EE8A24;    --tix-bg: #FEF0DC;
  --mint: #12B886;
  --radius: 20px;
  --shadow: 0 6px 20px -12px rgba(30, 42, 58, .25);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.55 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }
.screen { padding: 0 20px calc(120px + var(--safe-b)); animation: in .18s ease-out; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .screen, .sheet, .scrim { animation: none !important; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 상단 바 */
.topbar { display: flex; align-items: center; gap: 8px; height: 60px; position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0 -20px; padding: 0 12px; }
.topbar h1 { flex: 1; text-align: center; font-size: 18px; font-weight: 700; margin: 0; }
.topbar .logo { height: 34px; margin-left: 8px; }
.topbar .spacer { flex: 1; }
.icon-btn { width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.icon-btn:active { background: rgba(0,0,0,.05); }
.icon-btn svg { width: 26px; height: 26px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 공통 */
.h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; margin: 18px 0 6px; }
.lead { color: var(--sub); margin: 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 12px; }
.section-title h2 { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.section-title a, .section-title span { color: var(--sub); font-size: 14px; text-decoration: none; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 58px; border: 0; border-radius: 18px; background: var(--btn); color: #fff; font-size: 19px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:active { background: var(--btn-dark); }
.btn[disabled], .btn[aria-disabled="true"] { background: #E6E1DC; color: #5B6472; cursor: default; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); font-size: 17px; min-height: 52px; }
.cta-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; padding: 12px 20px calc(14px + var(--safe-b)); background: linear-gradient(180deg, rgba(251,246,241,0), var(--bg) 30%); z-index: 6; }
.cta-bar .note { text-align: center; color: var(--sub); font-size: 13px; margin-top: 8px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.fine { font-size: 13px; color: var(--sub); }

/* 웰컴 */
.welcome { min-height: 100dvh; display: flex; flex-direction: column; padding: 0 24px calc(28px + var(--safe-b)); text-align: center; }
.welcome .wordmark { width: 190px; margin: 14vh auto 18px; }
.welcome p { color: var(--sub); font-size: 18px; margin: 0; }
.welcome .scene { flex: 1; min-height: 260px; margin: 12px -24px 20px; }
.welcome .scene svg { width: 100%; height: 100%; }

/* 홈 */
.search { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; margin-top: 20px; }
.search svg { width: 22px; height: 22px; stroke: var(--salmon); fill: none; stroke-width: 2.2; flex: none; }
.search input { flex: 1; border: 0; outline: 0; background: none; font-size: 16px; min-width: 0; }
.search input::placeholder { color: #9AA1AB; }
.results { margin-top: 8px; padding: 6px; }
.results a { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; text-decoration: none; }
.results a:active { background: var(--bg); }
.results .flag { font-size: 26px; }
.results small { display: block; color: var(--sub); }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.cat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 6px 14px; text-decoration: none; }
.cat .tile { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 10px; }
.cat .tile svg { width: 32px; height: 32px; }
.cat b { font-size: 16px; }
.cat small { color: var(--sub); font-size: 12px; line-height: 1.4; margin-top: 4px; }
.trip { display: flex; align-items: center; gap: 14px; padding: 18px; min-height: 108px; text-decoration: none; position: relative; overflow: hidden; background: linear-gradient(120deg, #FFE9E4 0%, #E7F1FB 60%, #EAF6EC 100%); }
.trip .art { font-size: 48px; flex: none; width: 72px; text-align: center; }
.trip b { display: block; font-size: 19px; }
.trip span { color: var(--sub); font-size: 14px; }
.trip .dday { display: inline-block; margin-top: 8px; background: var(--btn); color: #fff; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 3px 12px; }
.trip .go { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.trip .go svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2.2; }
.trip.empty { background: var(--card); border: 2px dashed var(--line); box-shadow: none; }
.checklist { display: flex; flex-direction: column; gap: 8px; }
.check { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; width: 100%; text-align: left; cursor: pointer; }
.check .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.check .ic svg { width: 22px; height: 22px; }
.check span { flex: 1; font-size: 16px; }
.check .box { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #C9CDD3; display: grid; place-items: center; flex: none; }
.check[aria-pressed="true"] .box { background: var(--btn); border-color: var(--btn); }
.check[aria-pressed="true"] .box svg { display: block; }
.check .box svg { display: none; width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 3; }

/* 목적지 허브 */
.hub-hero { margin: 0 -20px; padding: 24px 20px; background: linear-gradient(160deg, #FFE9E4, #E7F1FB); }
.hub-hero .flag { font-size: 44px; }
.hub-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.hub-item { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; }
.hub-item .tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.hub-item .tile svg { width: 26px; height: 26px; }
.hub-item .tile.flag { background: var(--salmon-50); font-size: 28px; }
.hub-item b { display: block; }
.hub-item small { color: var(--sub); }
.hub-item .chev { flex: none; margin-left: auto; stroke: #9AA1AB; fill: none; stroke-width: 2; width: 20px; height: 20px; }

/* eSIM */
.hero { margin: 0 -20px; height: 230px; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.hero .scene { position: absolute; inset: 0; }
.hero .scene svg { width: 100%; height: 100%; }
.hero .chip { position: absolute; right: 20px; top: 16px; width: 64px; height: 70px; background: #fff; border-radius: 16px; box-shadow: var(--shadow); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--esim); padding-top: 6px; }
.hero .chip svg { width: 30px; height: 30px; }
.product-title { font-size: 28px; font-weight: 800; margin: 18px 0 4px; letter-spacing: -.03em; }
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 22px 0 4px; text-align: center; }
.features div { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); line-height: 1.35; }
.features svg { width: 28px; height: 28px; stroke: var(--ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plans { display: flex; flex-direction: column; gap: 10px; }
.plan { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid transparent; cursor: pointer; }
.plan input { position: absolute; opacity: 0; }
.plan .radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #C9CDD3; flex: none; display: grid; place-items: center; }
.plan b { display: block; font-size: 18px; }
.plan small { color: var(--sub); }
.plan .price { margin-left: auto; font-weight: 800; font-size: 18px; white-space: nowrap; }
.plan:has(input:checked) { border-color: var(--salmon); background: #FFF7F4; }
.plan:has(input:checked) .radio { border-color: var(--btn); }
.plan:has(input:checked) .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--btn); }
.plan:has(input:checked) .price { color: var(--price); }
.plan:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.empty-state { padding: 24px; text-align: center; color: var(--sub); }

/* 시트 (결제 정보 입력) */
.scrim { position: fixed; inset: 0; background: rgba(20, 28, 38, .45); z-index: 20; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; background: var(--bg); border-radius: 26px 26px 0 0; z-index: 21; padding: 10px 20px calc(20px + var(--safe-b)); animation: up .22s ease-out; }
@keyframes up { from { transform: translate(-50%, 30%); opacity: .5; } }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #D9D2CB; margin: 0 auto 14px; }
.sheet h2 { font-size: 21px; margin: 0 0 4px; }
.field { margin-top: 14px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--sub); margin-bottom: 6px; }
.field input, .field select { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; font-size: 16px; background: #fff; min-width: 0; }
.field input:focus, .field select:focus { outline: 2px solid var(--salmon); outline-offset: 1px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stepper { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px; }
.stepper button { width: 42px; height: 40px; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; font-size: 20px; cursor: pointer; }
.stepper output { font-weight: 800; font-size: 18px; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 14px; font-weight: 700; }
.total b { color: var(--price); font-size: 26px; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--sub); margin-top: 16px; cursor: pointer; }
.agree input { width: 22px; height: 22px; margin: 0; accent-color: var(--btn); flex: none; }
.error { color: #B42318; font-size: 14px; margin-top: 10px; min-height: 1em; }

/* 주문 상태 */
.status { text-align: center; padding: 48px 8px 0; }
.status .big { font-size: 64px; }
.status h2 { font-size: 24px; margin: 12px 0 6px; }
.spinner { width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--salmon-50); border-top-color: var(--salmon); margin: 0 auto; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orders { display: flex; flex-direction: column; gap: 10px; }
.order { display: flex; align-items: center; gap: 12px; padding: 16px; text-decoration: none; }
.order small { display: block; color: var(--sub); }

/* 항공·숙소 */
.form-card { padding: 18px; margin-top: 20px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quick button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.areas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.areas div { background: var(--bg); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.areas b { display: block; font-size: 15px; }
.disclose { font-size: 12px; color: var(--sub); margin-top: 18px; line-height: 1.5; }

/* 투어·티켓 */
.tickets { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ticket-row { display: flex; gap: 14px; padding: 14px; text-decoration: none; align-items: center; }
.ticket-row .thumb { width: 72px; height: 72px; border-radius: 16px; background: linear-gradient(140deg, var(--tix-bg), var(--salmon-50)); display: grid; place-items: center; font-size: 34px; flex: none; }
.ticket-row small { color: #B63F2C; font-weight: 700; font-size: 12px; }
.ticket-row b { display: block; font-size: 16px; line-height: 1.35; }
.ticket-row .txt { flex: 1; min-width: 0; }
.ticket-row .desc { color: var(--sub); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ticket-hero { margin: 0 -20px; height: 220px; display: grid; place-items: center; font-size: 96px; background: linear-gradient(160deg, #FFE3D6, #E7F1FB 70%); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.badges .pill { background: #EAF6EF; color: #1E7A4F; }
.info-list { margin: 18px 0 0; padding: 0; list-style: none; }
.info-list li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.info-list li b { width: 78px; flex: none; font-size: 14px; color: var(--sub); }