/* Trupass 디자인 토큰 (3차: 하늘 · 흰색 · 인디고)
   - 색: 흰 바탕에 깊은 인디고 글자, 강조는 하늘색 한 가지. 사진과 하늘이 색을 맡는다. 옅은 면과 선은 누런 기 없이 인디고 쪽 중립 톤.
   - 글꼴: 라틴 · 숫자는 Outfit, 한글은 Gothic A1. 큰 글자는 가늘게(300), 작은 글자는 보통 굵기.
   - 모서리: 넉넉하게. 버튼과 표식은 알약형, 입력 14, 카드 24, 창(사진을 담는 틀) 28.
   - 레이아웃: 화면의 뼈대는 flex(row/column) + gap + padding. 스크롤 연출을 위한 겹침(하늘 · 구름 · 지구본)만 절대 위치를 쓴다.
   - 색 값은 전부 이 블록에 둔다. 다른 파일에서는 토큰만 쓴다. */
:root {
  /* neutral: 흰색에서 인디고로 */
  --n-0: #ffffff;  --n-25: #fbfcfe; --n-50: #f5f6fb; --n-100: #eef0f7; --n-200: #e2e5ef; --n-300: #cfd3e1;
  --n-400: #a7aabf; --n-450: #8a8eaa; --n-500: #63688d; --n-600: #555a82; --n-700: #373b6c; --n-800: #272b60; --n-900: #1c1f5a;
  /* sky blue */
  --b-50: #eef6fd; --b-100: #dcedfa; --b-200: #b8dbf5; --b-300: #86c2ee; --b-400: #4fa6e4;
  --b-500: #2b8fd9; --b-600: #1971b6; --b-700: #175f99; --b-800: #154c7a; --b-900: #12385a;
  /* status */
  --g-50: #ebf8f0; --g-100: #d2efdd; --g-600: #107a4f; --g-700: #0a6240;
  --y-50: #fff5e3; --y-100: #fde6bd; --y-600: #a06604; --y-700: #824c01;
  --r-50: #fff1ef; --r-100: #ffdfdc; --r-600: #c02c29; --r-700: #9e1d1c;

  /* 투명도가 있는 색. 끝의 숫자는 불투명도(%). k 는 인디고, d 는 더 짙은 남색(그림자 · 사진 덧씌움), w 는 흰색 */
  --k-08: rgba(28, 31, 90, .08); --k-10: rgba(28, 31, 90, .10); --k-12: rgba(28, 31, 90, .12); --k-16: rgba(28, 31, 90, .16);
  --k-18: rgba(28, 31, 90, .18); --k-22: rgba(28, 31, 90, .22);
  --d-16: rgba(18, 22, 70, .16); --d-28: rgba(18, 22, 70, .28); --d-35: rgba(18, 22, 70, .35); --d-50: rgba(18, 22, 70, .5);
  --w-18: rgba(255, 255, 255, .18); --w-22: rgba(255, 255, 255, .22);
  --w-34: rgba(255, 255, 255, .34); --w-40: rgba(255, 255, 255, .4);
  --w-50: rgba(255, 255, 255, .5); --w-70: rgba(255, 255, 255, .7); --w-78: rgba(255, 255, 255, .78); --w-86: rgba(255, 255, 255, .86);
  --w-90: rgba(255, 255, 255, .9); --w-92: rgba(255, 255, 255, .92);
  /* 사진 위에 흰 글자를 얹기 위한 덧씌움 (위 → 아래) */
  --scrim-stage: linear-gradient(180deg, rgba(18, 22, 70, .52), rgba(18, 22, 70, .52) 42%, rgba(18, 22, 70, .66));
  --scrim-auth: linear-gradient(180deg, rgba(18, 22, 70, .34), rgba(18, 22, 70, .14) 32%, rgba(18, 22, 70, .70));
  --scrim-auth-s: linear-gradient(180deg, rgba(18, 22, 70, .48), rgba(18, 22, 70, .60) 40%, rgba(18, 22, 70, .76));   /* 창이 낮아지는 태블릿 · 모바일: 글이 창 위쪽까지 올라온다 */
  --scrim-stats: linear-gradient(180deg, rgba(18, 60, 104, .70), rgba(21, 76, 122, .68) 55%, rgba(21, 76, 122, .78));
  --mask-fade: linear-gradient(to bottom, transparent 41%, #000 58%);

  /* 화면에 이름을 적는 회사의 마크 색 (Simple Icons 가 싣는 각 회사의 색) */
  --bx-tripdotcom: #287dfa; --bx-expedia: #191e3b; --bx-bookingdotcom: #003a9a; --bx-hotelsdotcom: #ef3346;
  --bx-googlemaps: #4285f4; --bx-tripadvisor: #34e0a1; --bx-tabelog: #f2cc38; --bx-naver: #03c75a;
  --bx-ink: #000000;              /* 옅은 회사 색 바탕 위에 올리는 마크의 색 */

  /* semantic */
  --canvas: var(--n-0);
  --surface: var(--n-0);
  --surface-sub: var(--n-50);
  --line: var(--k-12);
  --line-strong: var(--k-22);
  --edge: var(--n-450);           /* 입력 칸 · 체크박스 테두리 (흰 바탕과 3 : 1 이상) */
  --tx: var(--n-900);
  --tx-2: var(--n-600);
  --tx-3: var(--n-500);           /* 설명 · 캡션 (흰 바탕 5.4 : 1, 옅은 면 5.0 : 1, 선택된 줄 4.9 : 1) */
  --tx-ph: var(--n-500);          /* 빈 입력 칸의 예시 글 */
  --on-photo: var(--n-0);         /* 사진 · 남색 면 위의 글자 */
  --brand: var(--n-900);          /* 주 버튼 · 선택 표시 */
  --brand-hover: var(--n-800);
  --brand-tint: var(--b-50);      /* 선택된 줄 */
  --sky: var(--b-500);            /* 강조 */
  --sky-ink: var(--b-600);        /* 하늘색 글자 · 링크 */
  --ok: var(--g-700);
  --warn: var(--y-700);
  --bad: var(--r-700);
  --focus: var(--n-900);          /* 키보드 초점 테두리. 안팎에 띠(--focus-gap)를 둘러 어떤 배경에서도 보인다. 어두운 면에서는 둘을 뒤집는다 */
  --focus-gap: var(--n-0);

  --font: "Outfit", "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --r-xs: 6px; --r-sm: 14px; --r-md: 24px; --r-lg: 28px; --r-pill: 999px;
  --e1: 0 6px 24px var(--k-08);
  --e2: 0 24px 64px var(--k-18);
  --gut: 32px;                    /* 페이지 좌우 여백 */
  --frame: 16px;                  /* 창(사진 틀)과 화면 가장자리 사이 */
  --pad: 24px;                    /* 카드 안쪽 여백 */
  --page: 1240px;                 /* 앱 화면의 본문 폭. 상단 바와 푸터도 이 폭에 맞춘다 */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  font: 400 15px/24px var(--font);
  color: var(--tx);
  background: var(--canvas);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100svh;
  caret-color: var(--sky-ink); accent-color: var(--brand);
}
::selection { background: var(--b-200); color: var(--n-900); }
/* 컨테이너는 전부 세로 flex. 가로 배치는 .row */
div, section, header, footer, main, nav, aside, form, ul, ol, li, label, fieldset, article {
  display: flex; flex-direction: column; min-width: 0;
}
ul, ol { list-style: none; }
fieldset { border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; text-align: inherit; }
form { margin: 0; }
[hidden] { display: none !important; }
input, textarea, select { font: inherit; color: inherit; border: 0; background: none; outline: 0; min-width: 0; border-radius: 0; }
select { -webkit-appearance: none; appearance: none; cursor: pointer; }
textarea { resize: none; }
img { display: block; flex: none; object-fit: cover; }
svg { display: block; flex: none; }
canvas { display: block; }
h1, h2, h3, p { font-weight: 400; font-size: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
b, strong { font-weight: 600; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th { font-weight: 400; text-align: left; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* 화면에는 보이지 않지만 키보드와 스크린리더에는 있는 것 (실제 체크박스 · 라디오) */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 키보드로 옮겨 다닐 때의 표시: 테두리 안팎에 띠를 둘러 흰 바탕 · 사진 · 남색 면 어디에서나 보인다. 바로 나타난다(전환 없음).
   - 숨겨 둔 실제 체크박스 · 라디오에 초점이 가면 그 이름표(label) 전체에 표시한다. 고른 표시(사진 테두리 · 채운 상자)와 겹치지 않는다.
   - 입력 칸은 테두리 상자에 표시한다. 문장 칸과 수정 요청 상자는 글을 적는 칸에 초점이 있을 때만 상자에 표시한다(안의 버튼은 버튼에 따로 표시).
   - :root 를 앞에 붙여, 그림자를 따로 가진 버튼에서도 띠가 빠지지 않게 한다. 어두운 사진 · 남색 면에서는 --focus 를 흰색으로 뒤집는다. */
:root :is(a, button, summary, [tabindex]):focus-visible,
:root .inp:focus-within, :root .ask:has(input:focus), :root .pbox:has(textarea:focus),
:root :is(.chk, .opt, .fo-k, .sc):has(input:focus-visible) {
  --ring-off: 2px;
  outline: 2px solid var(--focus); outline-offset: var(--ring-off); box-shadow: 0 0 0 calc(var(--ring-off) + 4px) var(--focus-gap);
}
:root :is(.chk, .sc):has(input:focus-visible) { --ring-off: 4px; }
/* :has() 를 모르는 브라우저: 상자 · 동그라미에 직접 표시한다 */
@supports not selector(:has(a)) {
  input:focus-visible + .box, input:focus-visible + .rad { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-gap); }
  .ask:focus-within, .pbox:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
}

/* layout */
.row { flex-direction: row; align-items: center; }
.top { align-items: flex-start; }
.bot { align-items: flex-end; }
.str { align-items: stretch; }
.mid { align-items: center; }
.jb { justify-content: space-between; }
.jc { justify-content: center; }
.je { justify-content: flex-end; }
.grow { flex: 1 1 0; min-width: 0; }
.fn { flex: none; }
.wrap { flex-wrap: wrap; }
.g0 { gap: 0; } .g2 { gap: 2px; } .g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g16 { gap: 16px; }
.g20 { gap: 20px; } .g24 { gap: 24px; } .g32 { gap: 32px; } .g40 { gap: 40px; } .g48 { gap: 48px; }

/* type scale: 큰 글자는 가늘게 */
.t-display { font-size: 56px; line-height: 66px; font-weight: 300; letter-spacing: -.02em; }
.t-h1 { font-size: 34px; line-height: 44px; font-weight: 300; letter-spacing: -.015em; }
.t-h2 { font-size: 22px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; }
.t-h3 { font-size: 17px; line-height: 26px; font-weight: 600; }
.t-lg { font-size: 17px; line-height: 28px; }
.t-md { font-size: 15px; line-height: 24px; }
.t-sm { font-size: 13px; line-height: 20px; }
.t-xs { font-size: 12px; line-height: 18px; }
.w3 { font-weight: 300; } .w4 { font-weight: 400; } .w5 { font-weight: 500; } .w6 { font-weight: 600; }
.c1 { color: var(--tx); } .c2 { color: var(--tx-2); } .c3 { color: var(--tx-3); } .cb { color: var(--sky-ink); }
.cok { color: var(--ok); } .cwarn { color: var(--warn); } .cbad { color: var(--bad); } .cw { color: var(--on-photo); }
.num { font-variant-numeric: tabular-nums; }
.tr { text-align: right; } .tc { text-align: center; }
.nw { white-space: nowrap; }
.del { text-decoration: line-through; }
.lnk { color: var(--sky-ink); }
.ul { text-decoration: underline; text-underline-offset: 3px; }

/* breakpoints: desktop ≥1200 · tablet 768–1199 · mobile ≤767
   표시 전환 클래스: d-only / t-only / m-only / dt-only(모바일에서 숨김) / tm-only(데스크톱에서 숨김) */
@media (min-width: 1200px) { .t-only, .m-only, .tm-only { display: none !important; } }
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --gut: 24px; --frame: 12px; }
  .d-only, .m-only { display: none !important; }
  .t-display { font-size: 46px; line-height: 56px; }
}
@media (max-width: 767px) {
  :root { --gut: 16px; --frame: 8px; --pad: 16px; --r-md: 20px; --r-lg: 22px; }
  .d-only, .t-only, .dt-only { display: none !important; }
  .t-display { font-size: 34px; line-height: 44px; letter-spacing: -.015em; }
  .t-h1 { font-size: 27px; line-height: 36px; }
  .t-h2 { font-size: 19px; line-height: 28px; }
}
/* 움직임을 줄이도록 설정한 사용자 · 정지 화면 캡처: 전환과 반복 움직임을 끈다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Trupass 컴포넌트 (3차). 알약형 버튼과 표식, 둥근 카드, 얇은 선.
   누를 수 있는 것은 전부 실제 a · button · input 이다. 색은 tokens.css 의 토큰만 쓴다. */

.ic { fill: currentColor; }
/* span·a 로 쓰는 컴포넌트도 flex 컨테이너로 맞춘다 */
.logo, .box, .rad, .st, .st .d, .tag, .step .no, .steps .bar, .av, .src, .pin { display: flex; }
.is-empty { opacity: .78; }

/* 로고: 승인 체크 마크. 바탕과 획의 색은 --mk-t · --mk-f 로 정한다 */
.logo { flex-direction: row; align-items: center; gap: 10px; flex: none; }
.logo .wm { font-size: 21px; line-height: 26px; font-weight: 500; letter-spacing: .01em; color: var(--tx); }
.logo.inv .wm { color: var(--on-photo); }
.mark { --mk-t: var(--brand); --mk-f: var(--n-0); }
.mark.inv, .logo.inv .mark { --mk-t: var(--n-0); --mk-f: var(--brand); }
.mark rect { fill: var(--mk-t); }
.mark .s { fill: none; stroke: var(--mk-f); }
.mark .f { fill: var(--mk-f); }
/* 회사 마크 (Simple Icons). 색은 각 회사의 색. 옅은 색의 마크는 회사 색 바탕(.t) 위에 검정(.g-d)이나 흰색(.g-l)으로 올린다 */
.bm { fill: currentColor; }
.bm .g-l { fill: var(--n-0); }
.bm .g-d { fill: var(--bx-ink); }
.bm-tripdotcom { color: var(--bx-tripdotcom); } .bm-expedia { color: var(--bx-expedia); } .bm-bookingdotcom { color: var(--bx-bookingdotcom); }
.bm-hotelsdotcom { color: var(--bx-hotelsdotcom); } .bm-googlemaps { color: var(--bx-googlemaps); } .bm-tripadvisor { color: var(--bx-tripadvisor); }
.bm-tabelog { color: var(--bx-tabelog); } .bm-naver { color: var(--bx-naver); }

/* 버튼: 알약 */
.btn {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; flex: none;
  height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--n-0); color: var(--tx);
  font-size: 15px; line-height: 22px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn.pri { background: var(--brand); border-color: var(--brand); color: var(--on-photo); }
.btn.txt { border-color: transparent; background: none; color: var(--sky-ink); padding: 0 10px; }
.btn.txt.n { color: var(--tx-2); }
.btn.sm { height: 38px; padding: 0 16px; font-size: 13px; line-height: 20px; }
.btn.lg { height: 56px; padding: 0 28px; font-size: 16px; line-height: 24px; }
.btn.ico { width: 48px; padding: 0; }
.btn.ico.sm { width: 38px; }
.btn.fill { align-self: stretch; }
/* 끝에 동그란 화살표가 붙는 버튼 (랜딩 오른쪽 위의 검색 시작). 올리면 화살표가 오른쪽으로 돈다 */
.btn.cta { padding-right: 8px; gap: 12px; }
.btn.sm.cta { padding-right: 4px; gap: 8px; }
.btn .arr { display: flex; flex: none; width: 32px; height: 32px; border-radius: 16px; align-items: center; justify-content: center; background: var(--brand); color: var(--on-photo); transition: transform .25s var(--ease); }
.btn.sm .arr { width: 30px; height: 30px; border-radius: 15px; }
.btn.pri .arr { background: var(--n-0); color: var(--brand); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--n-100); border-color: var(--n-200); color: var(--tx-3); cursor: not-allowed; }
.btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) {
  .btn:hover { border-color: var(--n-700); }
  .btn.pri:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
  .btn.txt:hover { border-color: transparent; }
  .btn.cta:hover .arr { transform: rotate(45deg); }
  .btn:disabled:hover, .btn[aria-disabled="true"]:hover { border-color: var(--n-200); }
}
/* 글자로만 된 작은 버튼 (약관 보기 · 예시 문장) */
.tbtn { color: var(--sky-ink); cursor: pointer; }
.tbtn.n { color: var(--tx-3); text-decoration: underline; text-underline-offset: 3px; }
/* Google 계정 버튼: 표준 G 마크를 흰 원 위에 */
.gbtn { gap: 12px; }
.g-tile { display: flex; width: 28px; height: 28px; border-radius: 14px; align-items: center; justify-content: center; background: var(--n-0); flex: none; }

/* 입력: 이름표(label) + 실제 입력 칸 + 도움말 */
.fld { gap: 8px; }
.fld-l { flex-direction: row; align-items: center; gap: 8px; }
.fld-l .l { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--tx); }
.fld-l .o { font-size: 12px; line-height: 18px; color: var(--tx-3); }
.inp {
  flex-direction: row; align-items: center; gap: 10px; height: 48px; padding: 0 16px;
  border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--n-0);
  font-size: 15px; line-height: 22px; color: var(--tx);
}
.inp input, .inp select { flex: 1 1 0; align-self: stretch; }
.inp input::placeholder { color: var(--tx-ph); opacity: 1; }
.inp.ro { background: var(--surface-sub); }
.inp.ro input { color: var(--tx-2); }
.inp .ic { color: var(--tx-3); pointer-events: none; }
.hint { font-size: 12px; line-height: 18px; color: var(--tx-3); }

/* 체크박스 · 라디오: 실제 input 은 .vh 로 숨기고 바로 뒤의 상자가 상태를 보여 준다. 테두리 굵기는 상태가 바뀌어도 같다.
   쓸 수 없는 상태는 투명도가 아니라 회색 면과 옅은 테두리로 보여 준다(이름은 계속 읽힌다) */
.chk { position: relative; flex-direction: row; align-items: center; gap: 10px; border-radius: var(--r-xs); font-size: 15px; line-height: 24px; color: var(--tx); cursor: pointer; }
.chk.top { align-items: flex-start; }
.box {
  width: 20px; height: 20px; flex: none; align-items: center; justify-content: center;
  border: 1px solid var(--edge); border-radius: var(--r-xs); background: var(--n-0);
}
.box .ic { visibility: hidden; }
input:checked + .box { background: var(--brand); border-color: var(--brand); color: var(--n-0); }
input:checked + .box .ic { visibility: visible; }
.rad {
  width: 20px; height: 20px; flex: none; align-items: center; justify-content: center;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--n-0);
}
.rad::after { content: ''; width: 10px; height: 10px; border-radius: 5px; background: var(--brand); visibility: hidden; }
input:checked + .rad { border-color: var(--brand); }
input:checked + .rad::after { visibility: visible; }
input:disabled + .box, input:disabled + .rad { background: var(--n-100); border-color: var(--n-300); }
input:disabled:checked + .box { background: var(--n-400); border-color: var(--n-400); }
.chk:has(input:disabled), .opt:has(input:disabled) { color: var(--tx-3); cursor: not-allowed; }
.opt:has(input:disabled) { border-color: var(--line-strong); background: var(--surface-sub); }

/* 선택 타일 (관심사 등 복수 선택). 이름이 길면 두 줄까지 늘어난다 */
.opt {
  position: relative; flex-direction: row; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--n-0);
  font-size: 15px; line-height: 20px; color: var(--tx); cursor: pointer;
}
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); font-weight: 500; }

/* 문장 검색 상자: 사진 위에 얹는 유리 알약 (랜딩 · 새 검색) */
.ask {
  flex-direction: row; align-items: center; gap: 14px; height: 72px; padding: 0 10px 0 26px; border-radius: var(--r-pill);
  background: var(--w-92); box-shadow: 0 18px 60px var(--d-28), inset 0 0 0 1px var(--w-70);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .25s var(--ease);
}
.ask:focus-within { background: var(--n-0); }
.ask > .ic { color: var(--tx-2); }
.ask input { flex: 1 1 0; height: 100%; font-size: 18px; line-height: 28px; color: var(--tx); }
.ask input::placeholder { color: var(--tx-2); opacity: 1; }
.ask .go { display: flex; flex: none; width: 52px; height: 52px; border-radius: 26px; align-items: center; justify-content: center; background: var(--brand); color: var(--on-photo); transition: background .2s var(--ease); }
.ask .go:active { transform: translateY(1px); }
/* 흰 알약 안의 버튼은 사진 위에 놓인 문장 칸에서도 남색 초점 테두리를 쓴다 */
.ask .go { --focus: var(--n-900); --focus-gap: var(--n-0); }
@media (hover: hover) { .ask .go:hover { background: var(--brand-hover); } }
.ask.plain { background: var(--n-0); box-shadow: inset 0 0 0 1px var(--edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 예시 문장: 누르면 입력 칸에 채워진다 */
.chips { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.chip { display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13px; line-height: 20px; white-space: nowrap; cursor: pointer; color: var(--on-photo); background: var(--d-28); box-shadow: inset 0 0 0 1px var(--w-50); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s var(--ease), color .2s var(--ease); }
.chip:active { transform: translateY(1px); }
@media (hover: hover) { .chip:hover { background: var(--n-0); color: var(--tx); } }

/* 처음 나타날 때 아래에서 떠오른다. --i 가 순서(하나씩 차례로). 움직임을 끈 환경에서는 그대로 보인다. */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.rise { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * .32s + var(--d0, 0s)); }

/* 화면을 넘길 때의 구름 장막. 모든 화면에 깔려 있고 평소에는 보이지 않는다(움직임을 끈 환경에서도 보이지 않는다).
   - 들어올 때(body.veil-in): 흰 구름에 덮인 채 시작해 구름이 위아래로 갈라지며 걷힌다.
   - 나갈 때(html.leaving): 구름이 위아래에서 모여들어 화면을 덮고, 그 뒤 다음 화면으로 넘어간다 (src/js/site.js). */
.veil { position: fixed; z-index: 90; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.veil i { display: flex; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--canvas); opacity: 0; }
.veil::before, .veil::after { content: ''; position: absolute; left: -12%; right: -12%; height: 78%; background: url(assets/bg/deck.webp) 50% 0 / cover no-repeat; opacity: 0; will-change: transform, opacity; }
.veil::before { top: -6%; transform: scaleY(-1); }
.veil::after { bottom: -6%; }
@keyframes veil-fog-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes veil-top-out { from { opacity: 1; transform: scaleY(-1); } to { opacity: 0; transform: scaleY(-1) translateY(46%) scale(1.3); } }
@keyframes veil-btm-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(46%) scale(1.3); } }
body.veil-in .veil i { animation: veil-fog-out .9s .18s ease-out both; }
body.veil-in .veil::before { animation: veil-top-out 1.3s .12s var(--ease) both; }
body.veil-in .veil::after { animation: veil-btm-out 1.3s .12s var(--ease) both; }
@keyframes veil-fog-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-top-in { from { opacity: 0; transform: scaleY(-1) translateY(46%) scale(1.3); } to { opacity: 1; transform: scaleY(-1); } }
@keyframes veil-btm-in { from { opacity: 0; transform: translateY(46%) scale(1.3); } to { opacity: 1; transform: none; } }
html.leaving .veil i { animation: veil-fog-in .5s .14s ease-in both; }
html.leaving .veil::before { animation: veil-top-in .62s var(--ease) both; }
html.leaving .veil::after { animation: veil-btm-in .62s var(--ease) both; }

/* 카드 */
.pnl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.pnl.clip { overflow: hidden; }
.pnl-h {
  flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
}
.pnl-b { padding: var(--pad); gap: 16px; }
.hr { height: 1px; background: var(--line); flex: none; align-self: stretch; }
.vr { width: 1px; background: var(--line); flex: none; align-self: stretch; }

/* 상태: 글자 색으로 구분한다. 점은 지금 진행 중인 것(run)에만 붙는다 */
.st { flex-direction: row; align-items: center; gap: 7px; font-size: 13px; line-height: 20px; color: var(--tx-2); white-space: nowrap; flex: none; }
.st .d { width: 7px; height: 7px; border-radius: 4px; background: var(--b-500); flex: none; }
.st.ok { color: var(--ok); }
.st.run { color: var(--sky-ink); }
.st.warn { color: var(--warn); }
.st.bad { color: var(--bad); }

/* 표식: 작은 알약 */
.tag {
  flex-direction: row; align-items: center; flex: none; height: 22px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--n-0);
  font-size: 11px; line-height: 16px; font-weight: 500; color: var(--tx-2); white-space: nowrap;
}
.tag.b { border-color: var(--b-200); background: var(--b-50); color: var(--b-700); }
.tag.y { border-color: var(--y-100); background: var(--y-50); color: var(--y-700); }
.tag.g { border-color: var(--g-100); background: var(--g-50); color: var(--g-700); }

/* 키–값 */
.kv { flex-direction: row; align-items: flex-start; gap: 16px; padding: 12px 0; font-size: 15px; line-height: 24px; }
.kv .k { width: 112px; flex: none; color: var(--tx-3); }
.kv.line { border-top: 1px solid var(--line); }

/* 안내 문구 상자 */
.note {
  flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface-sub);
  font-size: 13px; line-height: 20px; color: var(--tx-2);
}
.note .ic { color: var(--tx-3); }
.note.b { border-color: var(--b-200); background: var(--b-50); } .note.b .ic { color: var(--sky-ink); }
.note.g { border-color: var(--g-100); background: var(--g-50); } .note.g .ic { color: var(--g-600); }
.note.y { border-color: var(--y-100); background: var(--y-50); } .note.y .ic { color: var(--y-600); }

/* 단계 표시 */
.steps { flex-direction: row; align-items: center; gap: 10px; flex: none; }
.step { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--tx-3); white-space: nowrap; }
.step .no {
  width: 22px; height: 22px; flex: none; align-items: center; justify-content: center;
  border: 1px solid var(--edge); border-radius: 11px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--tx-3);
}
.step.done { color: var(--tx-2); }
.step.done .no { background: var(--brand); border-color: var(--brand); color: var(--on-photo); }
.step.on { color: var(--tx); font-weight: 600; }
.step.on .no { border-color: var(--sky-ink); background: var(--b-50); color: var(--b-700); }
.steps .bar { width: 28px; height: 1px; background: var(--line-strong); flex: none; }
.steps .bar.done { background: var(--brand); }

/* 상단 바 (앱 화면): 바탕 위에 그대로 얹는다. 안쪽 내용은 본문 폭(--page)에 맞춘다. .wide 는 화면 폭을 다 쓰는 화면(새 검색)용 */
.hdr { flex-direction: row; align-items: center; gap: 32px; flex: none; height: 76px; padding: 0 max(var(--gut), calc((100% - var(--page)) / 2)); }
.hdr.wide { padding: 0 var(--gut); }
.hdr > :last-child > .btn.txt:last-child { margin-right: -10px; }
.hdr .nav { flex-direction: row; align-items: center; gap: 4px; }
.hdr .nav a { display: flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-pill); font-size: 15px; line-height: 22px; color: var(--tx-2); white-space: nowrap; }
.hdr .nav a.on { color: var(--tx); font-weight: 500; background: var(--n-0); box-shadow: inset 0 0 0 1px var(--line); }
.hdr .me { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 6px; border-radius: var(--r-pill); background: var(--n-0); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.av { width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; border-radius: 16px; background: var(--b-100); color: var(--b-800); font-size: 13px; line-height: 16px; font-weight: 600; }
.ftr {
  flex-direction: row; align-items: center; gap: 20px; flex: none; min-height: 64px; padding: 16px max(var(--gut), calc((100% - var(--page)) / 2));
  border-top: 1px solid var(--line); font-size: 12px; line-height: 18px; color: var(--tx-3);
}
.ftr.wide { padding: 16px var(--gut); }

/* 바깥 사이트로 이어지는 자리 (글자 + 아이콘). 시안에서는 눌러도 나가지 않는다 */
.lk { display: flex; flex-direction: row; align-items: center; gap: 4px; flex: none; color: var(--sky-ink); font-weight: 500; white-space: nowrap; }
.lk.n { color: var(--tx-3); font-weight: 400; }

/* 출처 표기: 회사 마크 + 이름 */
.src { flex-direction: row; align-items: center; gap: 6px; flex: none; font-size: 12px; line-height: 18px; color: var(--tx-2); white-space: nowrap; }
.src .nm { font-weight: 500; }

/* 수정 요청 독: 결과 화면 아래에 늘 붙어 있다. 기본은 머리줄만 보이는 내림 상태, .up 이 올림 상태 */
.dock {
  border: 1px solid var(--line-strong); border-bottom-width: 0; border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--n-0); box-shadow: 0 -4px 20px var(--k-10); pointer-events: auto;
}
.dock-h { display: flex; flex-direction: row; align-items: center; gap: 10px; height: 51px; padding: 0 20px 0 24px; flex: none; cursor: pointer; border-radius: var(--r-md) var(--r-md) 0 0; }
.dock-h { white-space: nowrap; }
.dock-ph, .dock-de { overflow: hidden; text-overflow: ellipsis; }
.dock-ph { display: none; color: var(--tx-ph); }
.dock .i-up { display: none; }
.dock-b { gap: 12px; padding: 2px 24px 20px; }
.dock.up { box-shadow: 0 -12px 44px var(--k-18); }
/* 내림 상태는 스크립트가 켜져 있을 때만 있다. 스크립트가 없으면 펼친 채로 페이지 끝에 놓여 그대로 쓸 수 있다 */
.js .dock:not(.up) .dock-ph, .js .dock:not(.up) .i-up { display: block; }
.js .dock:not(.up) .dock-de, .js .dock:not(.up) .dock-b, .js .dock:not(.up) .i-dn { display: none; }
.dock-eg { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
/* 움직임: 스크립트가 상태를 바꿀 때만 붙는다 (처음 그릴 때는 움직이지 않는다) */
@keyframes dock-rise { from { transform: translateY(28px); opacity: .5; } }
@keyframes dock-drop { from { transform: translateY(-20px); } }
.dock.lift { animation: dock-rise .22s var(--ease); }
.dock.drop { animation: dock-drop .2s cubic-bezier(.4, 0, .6, 1); }

/* 문장 입력 상자 (독 안): 실제 textarea */
.pbox { border: 1px solid var(--edge); border-radius: 18px; background: var(--n-0); }
.pbox-x { display: block; width: 100%; min-height: 74px; padding: 14px 18px; font-size: 15px; line-height: 24px; color: var(--tx); border-radius: 18px 18px 0 0; }
.pbox-x::placeholder { color: var(--tx-ph); opacity: 1; }
.pbox-f { flex-direction: row; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-top: 1px solid var(--line); background: var(--surface-sub); border-radius: 0 0 17px 17px; }

/* 화면 아래 고정 영역: 독은 본문 칸(오른쪽 요약 칸 제외)에 맞춘다 */
.bottom { align-items: center; }
.js .bottom { position: fixed; left: 0; right: 0; bottom: 0; pointer-events: none; }
.bottom-in { width: calc(100% - var(--gut) * 2); max-width: var(--page); padding-right: 392px; }
.cta-bar {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; height: 80px; padding: 0 24px;
  background: var(--n-0); border-top: 1px solid var(--line); pointer-events: auto;
}
.js body.has-dock { padding-bottom: 52px; }
body.vp { height: 100svh; overflow: hidden; }

@media (max-width: 1199px) {
  .hdr { gap: 20px; }
  .bottom { align-items: stretch; }
  .bottom-in { width: 100%; max-width: none; padding: 0; }
  .dock { border-left-width: 0; border-right-width: 0; border-radius: 0; box-shadow: 0 -2px 12px var(--k-08); }
  .dock-h { border-radius: 0; }
  .js body.has-dock { padding-bottom: 132px; }
}
@media (max-width: 767px) {
  .ask { height: 60px; gap: 10px; padding: 0 8px 0 18px; }
  .ask input { font-size: 16px; line-height: 24px; }
  .ask .go { width: 44px; height: 44px; border-radius: 22px; }
  .steps { gap: 8px; }
  .steps .bar { width: 14px; }
  .dock-h { padding: 0 12px 0 16px; }
  .dock-b { padding: 2px 16px 16px; }
  .cta-bar { height: 72px; padding: 0 16px; }
  .js body.has-dock { padding-bottom: 124px; }
  .hdr { height: 64px; gap: 12px; }
  .ftr { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pbox-f { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .pbox-f .hint { flex: none; }
  .pbox-a { justify-content: space-between; }
  .inp input, .inp select, .pbox-x { font-size: 16px; }
}

/* Trupass 화면별 스타일 (3차) */

/* ───────── 01 랜딩: 스크롤 구간 ─────────
   기본(스크립트가 꺼진 상태): 구간이 한 화면 높이로 차례로 놓이고 내용이 모두 보인다.
   .js(스크립트가 켜진 상태): 구간(section)이 화면보다 길어지고, 그 안의 .hold 가 화면에 붙어 있는 동안 스크롤 위치가 --p(0→1) 로 들어온다.
   스크립트가 있어야 풀리는 숨김(opacity · visibility)은 전부 .js 아래에 둔다. 겹쳐 움직이는 층(.lyr · .stg)만 절대 위치를 쓴다. */
.hold { position: sticky; top: 0; height: 100svh; padding: var(--frame); overflow: hidden; }
.win { position: relative; flex: 1 1 0; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; background: var(--b-100); }
.lyr { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; background-position: center; will-change: transform; }

/* 오른쪽 위 알약 */
.lp-top { position: fixed; z-index: 40; right: 0; top: 0; flex-direction: row; align-items: center; gap: 8px; padding: calc(var(--frame) + 16px) calc(var(--frame) + 18px) 0 0; }
.lp-top .btn { border-color: transparent; box-shadow: 0 6px 24px var(--d-16); }

/* 하늘: 구름이 가까워진다 */
.lp-hero { height: 100svh; --p: .62; --pd: clamp(0, var(--p) / .46, 1); --pt: clamp(0, (var(--p) - .3) / .14, 1); }
.js .lp-hero { height: 340svh; --p: 0; }
.lp-hero .sky { background-image: url(assets/bg/hero.jpg); background-position: 50% 40%; transform-origin: 50% 44%; transform: scale(calc(1 + var(--p) * .26)); }
.lp-hero .mid {
  background-image: url(assets/bg/hero.jpg); background-position: 50% 40%; transform-origin: 50% 44%;
  -webkit-mask-image: var(--mask-fade); mask-image: var(--mask-fade);
  transform: translateY(calc(var(--p) * 2%)) scale(calc(1 + var(--p) * .72));
}
.lp-hero .deck {
  top: 30%; bottom: -14%; background-image: url(assets/bg/deck.webp), linear-gradient(to bottom, transparent 52%, var(--canvas) 86%); background-position: 50% 0, 0 0; background-size: cover, 100% 100%;
  transform-origin: 50% 0; transform: translateY(calc((1 - var(--pd) * var(--pd) * (3 - 2 * var(--pd))) * 100%)) scale(calc(1.04 + var(--p) * .42));
}
.lp-hero .haze { background: linear-gradient(to bottom, transparent 62%, var(--canvas) 100%); opacity: calc(var(--p) * var(--p)); }
.hero-logo { position: absolute; left: 30px; top: 26px; }
.hero-hint { display: none; }
.js .hero-hint { display: flex; position: absolute; left: 0; right: 0; bottom: 34px; align-items: center; gap: 12px; color: var(--on-photo); font-size: 14px; line-height: 20px; text-shadow: 0 1px 12px var(--d-50); opacity: calc(1 - var(--p) * 9); }
.hero-hint i { display: flex; width: 1px; height: 44px; background: linear-gradient(to bottom, var(--on-photo), transparent); animation: hint 1.8s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes hint { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* 소개: 큰 워드마크(왼쪽 가운데) + 하늘색 문장(오른쪽 아래) */
.hero-t { position: absolute; left: 0; top: 0; right: 0; bottom: 0; justify-content: center; gap: 4svh; padding: 12svh 4.2vw 6svh; opacity: var(--pt); transform: translateY(calc((1 - var(--pt)) * 36px)); pointer-events: none; }
.hero-wm { align-self: flex-start; color: var(--n-900); }
.wm-b { font-size: clamp(64px, 14.2vw, 232px); line-height: 1; font-weight: 200; letter-spacing: .012em; margin-left: -.05em; white-space: nowrap; }
.wm-s { font-size: clamp(15px, 1.7vw, 26px); line-height: 1.5; font-weight: 300; letter-spacing: .02em; padding-left: .1em; }
.hero-cp { align-self: flex-end; width: min(44vw, 560px); gap: 12px; margin-right: 6vw; }
.hero-h { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.28; font-weight: 400; letter-spacing: -.01em; color: var(--b-700); }
.hero-d { font-size: 15px; line-height: 24px; color: var(--b-800); }

/* 숫자: 파란 하늘 위 계단식 줄 */
.lp-stats { height: 100svh; --p: 1; --pb: clamp(0, var(--p) / .42, 1); }
.js .lp-stats { height: 250svh; --p: 0; }
.lp-stats .win { color: var(--on-photo); }
.lp-stats .bg { background-image: var(--scrim-stats), url(assets/bg/stats.jpg); filter: blur(calc((1 - var(--pb)) * 14px)); transform: scale(calc(1.12 - var(--pb) * .06)); }
.st-cap { position: absolute; left: 30px; top: 30px; font-size: 15px; line-height: 22px; font-weight: 500; }
.st-rows { position: absolute; left: 0; right: 0; top: 96px; bottom: 56px; }
.st-row { flex: 1 1 0; flex-direction: row; align-items: stretch; padding-left: calc(var(--i) * 15.5%); border-top: 1px solid var(--w-50); }
.st-cell { flex-direction: row; align-items: center; gap: 22px; min-width: 34%; padding: 0 34px 0 30px; border-right: 1px solid var(--w-50); }
.st-row:not(:first-child) .st-cell { border-left: 1px solid var(--w-50); }
.st-num { display: flex; flex-direction: row; align-items: baseline; flex: none; font-size: clamp(48px, 7.6vw, 112px); line-height: 1; font-weight: 300; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-num .u { font-size: .42em; font-weight: 400; margin-left: .12em; letter-spacing: 0; }
.st-num .u.pre { margin: 0 .2em 0 0; }
.st-lb { gap: 2px; }
.st-lb .l { font-size: 15px; line-height: 22px; font-weight: 500; }
.st-lb .s { font-size: 13px; line-height: 20px; }
.st-note { position: absolute; left: 30px; right: 30px; bottom: 16px; font-size: 13px; line-height: 20px; }

/* 이용 방법: 순서 목록. 기본은 다섯 걸음이 차례로 놓이고, .js 에서는 가운데 상자를 좌우 버튼으로 한 장씩 넘긴다. 번호는 카운터가 그린다 */
.lp-how { position: relative; min-height: 100svh; align-items: center; justify-content: center; gap: 30px; padding: 104px var(--gut) 64px; }
.how-hd { align-items: center; gap: 10px; text-align: center; }
.how-car { flex-direction: row; align-items: center; gap: 20px; width: 100%; max-width: var(--page); }
.btn.rb { width: 56px; height: 56px; }
.how-car .btn.rb, .how-ft, .how-go { display: none; }
.how-box { flex: 1 1 0; gap: 16px; counter-reset: step; }
.how-sl { flex-direction: row; align-items: stretch; border: 1px solid var(--line); border-radius: 36px; background: var(--surface); overflow: hidden; counter-increment: step; }
.how-img { flex: 1.5 1 0; padding: 16px; justify-content: center; }
.how-img img { width: 100%; height: auto; aspect-ratio: 1280 / 760; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); background: var(--n-100); }
.how-tx { flex: 1 1 0; justify-content: center; gap: 14px; padding: 40px 48px 40px 24px; }
.how-tx::before { content: counter(step, decimal-leading-zero); font-size: 76px; line-height: 1; font-weight: 200; color: var(--sky); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.js .how-car .btn.rb { display: flex; }
.js .how-box { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 36px; background: var(--surface); overflow: hidden; }
.js .how-sl { grid-area: 1 / 1; border: 0; border-radius: 0; opacity: 0; visibility: hidden; transform: translateX(56px); pointer-events: none; transition: opacity .45s var(--ease), transform .65s var(--ease), visibility 0s .65s; }
.js .how-sl.was { transform: translateX(-56px); }
.js .how-sl.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.js .how-ft { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.how-dots { flex-direction: row; align-items: center; gap: 8px; }
.how-dots button { position: relative; display: flex; width: 8px; height: 8px; border-radius: 4px; background: var(--edge); transition: background .3s var(--ease); }
.how-dots button::after { content: ''; position: absolute; left: -4px; right: -4px; top: -14px; bottom: -14px; }
.how-dots button.on { width: 28px; background: var(--brand); }
/* 끝까지 읽으면 나타나는 스크롤 권유 */
.js .how-go { display: flex; flex-direction: row; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 22px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-photo); font-size: 15px; line-height: 22px; font-weight: 500; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
.how-go .ic { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.js .lp-how.done .how-go { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* 항공 · 숙소 · 체험.
   기본: 사진 한 장 위에 세 질문이 차례로 놓인다(각 질문 아래에 그 설명).
   .js: 작은 창이 화면 가득 커진 뒤, 사진이 아래에서 올라오며 질문이 바뀐다 */
.lp-svc { --g: 1; --s1: 0; --s2: 0; --bar: 0; --ui: 1; }
.lp-svc .hold { position: static; height: auto; overflow: visible; }
.mq, .mq-x, .svc-pg { display: none; }
/* 창의 높이는 안의 내용이 정한다(넘치는 것을 자르는 flex 항목은 flex-basis 0 이면 높이가 0 이 되므로 flex 를 끈다) */
.lp-svc .win { flex: none; background: var(--n-800); }
.stg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: cover; background-position: center; }
.stg::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--scrim-stage); opacity: var(--ui); }
.stg-1, .stg-2 { display: none; }
.svc-ui { position: relative; align-items: center; gap: 20px; padding: 96px 40px 72px; color: var(--on-photo); --focus: var(--n-0); --focus-gap: var(--n-900); }
.svc-c, .svc-b, .svc-ds { display: contents; }
.svc-pane { width: 100%; max-width: 820px; align-items: stretch; gap: 18px; }
.svc-pane[data-i="0"] { order: 1; } .svc-d[data-i="0"] { order: 2; }
.svc-pane[data-i="1"] { order: 3; } .svc-d[data-i="1"] { order: 4; }
.svc-pane[data-i="2"] { order: 5; } .svc-d[data-i="2"] { order: 6; }
.svc-pane + .svc-pane { margin-top: 56px; }
.svc-q { font-size: clamp(30px, 4.6vw, 64px); line-height: 1.16; font-weight: 300; letter-spacing: -.02em; text-align: center; text-shadow: 0 2px 30px var(--d-35); padding-bottom: 10px; }
.svc-k { display: none; align-self: center; font-size: 13px; line-height: 20px; }
.js .svc-k { display: block; }
.svc-d { width: 100%; max-width: 620px; font-size: 14px; line-height: 22px; text-align: center; }

.js .lp-svc { height: 640svh; --g: 0; --ui: clamp(0, (var(--g) - .72) / .28, 1); }
.js .lp-svc .hold { position: sticky; height: 100svh; padding: 0; overflow: hidden; }
.js .mq { display: flex; position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); overflow: hidden; opacity: calc(1 - var(--g) * 1.7); }
.mq-t { flex-direction: row; flex: none; width: max-content; animation: mq 36s linear infinite; }
.mq-t span { flex: none; padding-right: .6em; font-size: clamp(44px, 8.4vw, 132px); line-height: 1.1; font-weight: 300; letter-spacing: -.01em; color: var(--n-900); white-space: nowrap; }
@keyframes mq { to { transform: translateX(-33.333%); } }
/* 흐르는 글자는 마우스를 올리면 멈추고, 오른쪽 아래 단추로도 멈출 수 있다 */
.js .mq:hover .mq-t, .js .lp-svc.mq-paused .mq-t { animation-play-state: paused; }
.js .mq-x { display: flex; position: absolute; z-index: 3; right: calc(var(--frame) + 18px); bottom: calc(var(--frame) + 18px); width: 44px; height: 44px; border-radius: 22px; align-items: center; justify-content: center; background: var(--n-0); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line-strong); opacity: calc(1 - var(--g) * 1.7); }
.mq-x .i-play, .lp-svc.mq-paused .mq-x .i-pause { display: none; }
.lp-svc.mq-paused .mq-x .i-play { display: block; }
.js .lp-svc.mq-gone .mq, .js .lp-svc.mq-gone .mq-x { visibility: hidden; }
.js .lp-svc .win {
  position: absolute; left: 50%; top: 50%; flex: none; transform: translate(-50%, -50%);
  width: calc(min(30vw, 300px) + (100% - var(--frame) * 2 - min(30vw, 300px)) * var(--g));
  height: calc(min(42svh, 360px) + (100% - var(--frame) * 2 - min(42svh, 360px)) * var(--g));
  border-radius: calc(84px - (84px - var(--r-lg)) * var(--g));
}
.js .stg { will-change: transform; }
.js .stg-1, .js .stg-2 { display: flex; }
.js .stg-0 { transform: translateY(calc(var(--s1) * -16%)); }
.js .stg-1 { transform: translateY(calc((1 - var(--s1)) * 101% - var(--s2) * 16%)); }
.js .stg-2 { transform: translateY(calc((1 - var(--s2)) * 101%)); }
.js .svc-ui { position: absolute; left: 0; top: 0; right: 0; bottom: 0; justify-content: center; gap: 0; padding: 96px 40px 30px; opacity: var(--ui); }
/* 창이 다 커지기 전에는 마우스로 누를 수 없다. 키보드로 들어오면 스크립트가 그 질문 자리로 스크롤해 보여 준다 */
.js .lp-svc:not(.live) .svc-ui { pointer-events: none; }
.js .svc-c { display: grid; flex: 1 1 0; width: 100%; max-width: 820px; align-items: center; }
.js .svc-pane { grid-area: 1 / 1; order: 0; margin: 0; max-width: none; opacity: 0; visibility: hidden; transform: translateY(28px); pointer-events: none; transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.js .svc-b { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; width: 100%; flex: none; }
.js .svc-ds { display: grid; width: min(46%, 430px); }
.js .svc-d { grid-area: 1 / 1; order: 0; align-self: end; max-width: none; text-align: left; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.js .svc-pg { display: flex; flex-direction: row; align-items: center; gap: 16px; flex: none; }
.svc-n { display: grid; grid-auto-flow: column; align-items: baseline; gap: 6px; font-size: 14px; line-height: 22px; }
.svc-n b { grid-area: 1 / 1; font-weight: 500; opacity: 0; transition: opacity .3s var(--ease); }
.svc-n em { grid-area: 1 / 2; font-style: normal; }
.svc-bar { display: flex; width: min(22vw, 260px); height: 1px; background: var(--w-40); }
.svc-bar i { display: flex; flex: 1 1 0; height: 1px; background: var(--on-photo); transform-origin: 0 50%; transform: scaleX(var(--bar)); }
.js .lp-svc[data-on="0"] .svc-pane[data-i="0"], .js .lp-svc[data-on="1"] .svc-pane[data-i="1"], .js .lp-svc[data-on="2"] .svc-pane[data-i="2"] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.js .lp-svc[data-on="0"] .svc-d[data-i="0"], .js .lp-svc[data-on="1"] .svc-d[data-i="1"], .js .lp-svc[data-on="2"] .svc-d[data-i="2"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.lp-svc[data-on="0"] .svc-n b[data-i="0"], .lp-svc[data-on="1"] .svc-n b[data-i="1"], .lp-svc[data-on="2"] .svc-n b[data-i="2"] { opacity: 1; }

/* 푸터: 남색 창. 여기서 스크롤이 끝난다 */
.lp-ftr { padding: 0 var(--frame) var(--frame); }
.ftr-win { border-radius: var(--r-lg); background: var(--n-900); color: var(--n-50); padding: 72px 4.2vw 26px; gap: 56px; --focus: var(--n-0); --focus-gap: var(--n-900); }
.ftr-t { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
.ftr-h { max-width: 880px; font-size: clamp(26px, 3.5vw, 50px); line-height: 1.3; font-weight: 300; letter-spacing: -.015em; text-wrap: balance; }
.ftr-t .btn { border-color: transparent; }
.ftr-g { flex-direction: row; align-items: flex-start; gap: 48px; padding-top: 32px; border-top: 1px solid var(--w-18); }
.ftr-c { flex: 1 1 0; gap: 8px; font-size: 15px; line-height: 24px; }
.ftr-c:first-child { flex: 1.6 1 0; }
.ftr-c .k { font-size: 13px; line-height: 20px; color: var(--b-300); padding-bottom: 4px; }
.ftr-c .v { font-size: 22px; line-height: 30px; font-weight: 300; }
.ftr-c .d { font-size: 13px; line-height: 20px; color: var(--w-78); max-width: 420px; }
.ftr-c a { align-self: flex-start; text-decoration: underline; text-underline-offset: 3px; }
.ftr-src { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.ftr-src .s { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--n-50); color: var(--n-900); font-size: 13px; line-height: 20px; font-weight: 500; }
.ftr-e { flex-direction: row; align-items: center; gap: 20px; font-size: 12px; line-height: 18px; color: var(--w-78); }
.ftr-e .logo .wm { font-size: 18px; }

@media (max-width: 1199px) {
  .hero-cp { width: min(60vw, 520px); margin-right: 2vw; }
  .st-row { padding-left: calc(var(--i) * 9%); }
  .st-cell { min-width: 48%; }
  .how-tx { padding: 28px 32px 28px 12px; }
  .how-tx::before { font-size: 56px; }
  .ftr-g { gap: 32px; }
}
@media (max-width: 767px) {
  .lp-top { padding: calc(var(--frame) + 10px) calc(var(--frame) + 10px) 0 0; gap: 6px; }
  .hero-logo { left: 16px; top: 16px; }
  .hero-logo .wm { display: none; }
  .hero-t { justify-content: flex-end; gap: 28px; padding: 96px 20px 44px; }
  .hero-cp { align-self: stretch; width: auto; margin-right: 0; }
  .st-cap { left: 18px; top: 72px; }
  .st-rows { top: 112px; bottom: 60px; }
  .st-row { padding-left: calc(var(--i) * 5%); }
  .st-cell { flex: 1 1 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 0 16px; border-right: 0; }
  .st-note { left: 18px; right: 18px; bottom: 14px; }
  .lp-how { gap: 22px; padding: 88px var(--gut) 48px; }
  .how-car { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .how-box { order: -1; flex: none; width: 100%; }
  .how-sl, .js .how-box { border-radius: 28px; }
  .how-sl { flex-direction: column; }
  .how-img { flex: none; padding: 10px 10px 0; }
  .how-img img { border-radius: 18px; }
  .how-tx { flex: none; gap: 8px; padding: 18px 20px 24px; }
  .how-tx::before { font-size: 40px; }
  .btn.rb { width: 48px; height: 48px; }
  .svc-ui { padding: 84px 14px 48px; }
  .js .svc-ui { padding: 84px 14px 18px; }
  .svc-pane { gap: 14px; }
  .js .svc-b { flex-direction: column; align-items: stretch; gap: 14px; }
  .js .svc-ds { width: auto; }
  .svc-d { font-size: 13px; line-height: 20px; }
  .js .svc-pg { justify-content: space-between; }
  .svc-bar { flex: 1 1 0; width: auto; }
  .chips { gap: 6px; }
  .chip { height: 30px; padding: 0 11px; font-size: 12px; }
  .ftr-win { padding: 48px 22px 22px; gap: 36px; }
  .ftr-t { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ftr-g { flex-direction: column; gap: 28px; padding-top: 28px; }
  .ftr-c, .ftr-c:first-child { flex: none; align-self: stretch; }
  .ftr-e { flex-wrap: wrap; gap: 8px 16px; }
  .ftr-e .grow { display: none; }
}
/* 아주 좁은 화면: 워드마크가 한 줄에 들어가도록 줄인다 */
@media (max-width: 360px) { .wm-b { font-size: 54px; } }

/* ───────── 앱 화면 공통 틀 ───────── */
.main { flex: 1 0 auto; align-items: center; padding: 12px var(--gut) 72px; }
.cx { width: 100%; max-width: var(--page); }
.cx.w680 { max-width: 680px; }
.mw720 { max-width: 720px; }
.pt { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.two { flex-direction: row; align-items: flex-start; gap: 24px; }
.two-m { flex: 1 1 0; gap: 16px; }
.two-r { width: 368px; flex: none; gap: 16px; }
.two-r.stick { position: sticky; top: 20px; }
.pnl-f { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 18px var(--pad); border-top: 1px solid var(--line); }
.pnl-kv { gap: 0; padding-top: 8px; padding-bottom: 8px; }
.pnl-bar { padding-top: 16px; padding-bottom: 16px; }
.f2 { flex-direction: row; align-items: flex-start; gap: 16px; }
.f2 > * { flex: 1 1 0; }
.radios { flex-direction: row; align-items: center; gap: 24px; min-height: 40px; }
.rlist { gap: 12px; }
.tiles { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.tiles .opt { width: calc((100% - 24px) / 4); }
.tiles.t3 .opt { width: calc((100% - 16px) / 3); }
.term { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.srcs { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.prog { flex-direction: row; height: 4px; border-radius: 2px; background: var(--n-100); overflow: hidden; }
.prog i { display: flex; background: var(--brand); border-radius: 2px; }
.prog-58 { width: 58%; }
/* 표 (결제 권한 검증 · 판매자별 진행): 가는 선으로만 나눈다 */
.vt th, .vt td { padding: 12px 16px; font-size: 14px; line-height: 22px; vertical-align: middle; }
.vt thead th { padding-top: 10px; padding-bottom: 10px; font-size: 12px; line-height: 18px; color: var(--tx-3); background: var(--surface-sub); border-bottom: 1px solid var(--line); white-space: nowrap; }
.vt th:first-child, .vt td:first-child { padding-left: var(--pad); }
.vt th:last-child, .vt td:last-child { padding-right: var(--pad); }
.vt tbody tr + tr > * { border-top: 1px solid var(--line); }
.vt tbody th { color: var(--tx-2); }
.vt .tr .st { justify-content: flex-end; }
.pt-t tbody th { color: var(--tx); }

/* ───────── 02 로그인 ───────── */
.auth { flex: 1 0 auto; flex-direction: row; align-items: stretch; min-height: 100svh; padding: var(--frame); gap: var(--frame); }
.auth-win { position: relative; flex: 1.12 1 0; justify-content: space-between; gap: 40px; padding: 26px 30px 30px; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; color: var(--on-photo); background: var(--b-800); --focus: var(--n-0); --focus-gap: var(--n-900); }
.auth-win .lyr { z-index: -1; background-image: var(--scrim-auth), url(assets/bg/hero.jpg); background-position: 50% 40%; }
.auth-top { flex-direction: row; }
.auth-btm { gap: 22px; }
.auth-h { font-size: clamp(26px, 2.7vw, 40px); line-height: 1.28; font-weight: 300; letter-spacing: -.015em; }
/* 적어 둔 문장 세 개: 사진 위 유리 판. 흰 글자가 읽히도록 남색 막을 깐다 */
.rc { max-width: 580px; padding: 4px 20px 14px; border-radius: 24px; background: var(--d-28); box-shadow: inset 0 0 0 1px var(--w-34); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.rc-k { padding: 12px 0 8px; font-size: 12px; line-height: 18px; }
.rc-r { flex-direction: row; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--w-22); }
.rc-r .ic { margin-top: 2px; }
.rc-r .l { font-size: 12px; line-height: 18px; }
.rc-r .v { font-size: 15px; line-height: 22px; }
.rc-e { align-self: flex-start; margin-top: 8px; font-size: 13px; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; }
.auth-side { flex: 1 1 0; align-items: center; justify-content: center; padding: 56px var(--gut); }
.auth-card { width: 100%; max-width: 420px; gap: 28px; }
/* 들어올 때: 구름이 걷히는 동안 하늘 창이 살짝 당겨지고, 내용이 아래에서 차례로 떠오른다 */
@keyframes settle { from { transform: scale(1.1); } }
.veil-in .auth-win .lyr { animation: settle 2.2s var(--ease) both; }
.veil-in .auth-top, .veil-in .auth-h, .veil-in .rc, .veil-in .auth-card > *,
.veil-in .hdr, .veil-in .su-hd > *, .veil-in .su-form { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * .09s + var(--d0, .42s)); }
.auth-h { --i: 1; } .rc { --i: 2; }
.auth-card > :nth-child(1) { --i: 1; } .auth-card > :nth-child(2) { --i: 2; } .auth-card > :nth-child(3) { --i: 3; }
.su-hd > :nth-child(2) { --i: 1; } .su-form { --i: 2; }

/* ───────── 03 회원 정보 입력 ───────── */
.su-form { gap: 0; }
.su-hd { align-items: center; text-align: center; padding: 8px 0 4px; }

/* ───────── 05 새 검색 ───────── */
.home { flex: 1 0 auto; padding: 0 var(--frame) 40px; gap: 16px; }
.home-win { position: relative; align-items: center; justify-content: center; min-height: 640px; padding: 64px var(--gut); border-radius: var(--r-lg); overflow: hidden; isolation: isolate; color: var(--on-photo); background: var(--b-700); --focus: var(--n-0); --focus-gap: var(--n-900); }
.home-win .lyr { z-index: -1; background-image: var(--scrim-stage), url(assets/bg/flight.jpg); }
.home-in { width: 100%; max-width: 820px; gap: 30px; }
.home-hd { align-items: center; gap: 10px; text-align: center; }
.home-h { font-size: clamp(30px, 4vw, 56px); line-height: 1.18; font-weight: 300; letter-spacing: -.02em; text-shadow: 0 2px 30px var(--d-35); }
.home-p { font-size: 15px; line-height: 24px; }
.home-f { gap: 14px; }
.home-r { gap: 8px; }
.home-l { display: flex; flex-direction: row; align-items: center; gap: 10px; padding-left: 26px; font-size: 13px; line-height: 20px; font-weight: 500; }
.home-l b { font-weight: 400; }
.home-e { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.home-b { flex-direction: row; align-items: stretch; gap: 16px; }
.hb { flex: 1 1 0; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }

/* ───────── 06 검색 중: 지구본 ───────── */
body.pg-srch { min-height: 100svh; }
.srch-top { flex-direction: row; align-items: center; justify-content: space-between; flex: none; height: 76px; padding: 0 var(--gut); }
.srch { flex: 1 1 0; align-items: center; justify-content: center; gap: 18px; padding: 0 var(--gut) 40px; }
.globe { flex: none; width: min(46svh, 76vw, 440px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 40px 90px var(--k-16), 0 0 0 10px var(--w-90), 0 0 0 11px var(--line); }
.globe canvas { width: 100%; height: 100%; border-radius: 50%; }
.srch-lg { flex-direction: row; align-items: center; gap: 18px; padding-top: 14px; }
.lg-c { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 13px; line-height: 20px; color: var(--tx-2); }
.lg-c i { display: flex; width: 10px; height: 10px; border-radius: 5px; }
.lg-c i.from { background: var(--n-900); }
.lg-c i.to { background: var(--b-400); }
/* 지금 단계의 문구만 보인다. 기본은 해당 문구 하나만 놓고, .js 에서는 같은 자리에 겹쳐 두고 부드럽게 바꾼다 */
.srch-tx { display: grid; width: 100%; max-width: 640px; }
.srch-t { display: none; grid-area: 1 / 1; align-items: center; gap: 8px; text-align: center; }
body[data-stage="flight"] .srch-t[data-st="flight"], body[data-stage="stay"] .srch-t[data-st="stay"], body[data-stage="done"] .srch-t[data-st="done"] { display: flex; }
.js .srch-t { display: flex; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.js body[data-stage="flight"] .srch-t[data-st="flight"], .js body[data-stage="stay"] .srch-t[data-st="stay"], .js body[data-stage="done"] .srch-t[data-st="done"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.srch-h { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.25; font-weight: 300; letter-spacing: -.015em; }
.dots { display: inline-flex; flex-direction: row; gap: 5px; padding-left: 8px; }
.dots span { display: flex; width: 5px; height: 5px; border-radius: 3px; background: var(--sky); animation: blink 1.2s ease-in-out infinite; }
.dots span:nth-child(2) { animation-delay: .18s; } .dots span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
body[data-stage="done"] .dots { display: none; }
.srch-sp { flex-direction: row; align-items: center; gap: 10px; padding: 6px 0 2px; }
.sp { display: flex; flex-direction: row; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13px; line-height: 20px; color: var(--tx-3); white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease); }
.sp b { font-weight: 400; }
.sp .ic { display: none; }
.srch-sp .ln { display: flex; width: 18px; height: 1px; background: var(--line-strong); }
/* 끝난 단계는 체크, 지금 단계는 남색 */
.sp[data-sp="parse"], body[data-stage="stay"] .sp[data-sp="flight"], body[data-stage="done"] .sp[data-sp="flight"], body[data-stage="done"] .sp[data-sp="stay"] { color: var(--tx-2); box-shadow: inset 0 0 0 1px var(--line); background: var(--n-0); }
.sp[data-sp="parse"] .ic, body[data-stage="stay"] .sp[data-sp="flight"] .ic, body[data-stage="done"] .sp[data-sp="flight"] .ic, body[data-stage="done"] .sp[data-sp="stay"] .ic { display: block; color: var(--g-600); }
body[data-stage="flight"] .sp[data-sp="flight"], body[data-stage="stay"] .sp[data-sp="stay"], body[data-stage="done"] .sp[data-sp="done"] { background: var(--brand); color: var(--on-photo); box-shadow: none; }
body[data-stage="flight"] .sp[data-sp="flight"] b, body[data-stage="stay"] .sp[data-sp="stay"] b, body[data-stage="done"] .sp[data-sp="done"] b { font-weight: 500; }
.srch-rc { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 22px; max-width: 880px; padding-top: 4px; }
.srch-rc .q { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 13px; line-height: 20px; color: var(--tx-3); }

/* ───────── 07 · 08 검색 결과 ───────── */
/* 요청 표: 적은 문장과 그 문장에서 뽑아 적용한 조건을 한 줄씩 짝짓는다 */
.rq { overflow: hidden; }
.rq-t th, .rq-t td { padding: 10px 16px; font-size: 14px; line-height: 20px; vertical-align: top; }
.rq-t thead th { padding-top: 9px; padding-bottom: 9px; font-size: 12px; line-height: 18px; color: var(--tx-3); background: var(--surface-sub); border-bottom: 1px solid var(--line); white-space: nowrap; }
.rq-t thead th:first-child, .rq-t tbody th { width: 88px; padding-left: var(--pad); padding-right: 0; }
.rq-t thead th:last-child, .rq-t td:last-child { width: 54%; padding-right: var(--pad); }
.rq-t tbody tr + tr > * { border-top: 1px solid var(--line); }
.rq-l { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.rq-l .ic { color: var(--tx-3); margin-top: 1px; }
.rq-d { display: flex; flex-direction: column; gap: 2px; }
.rq-p { flex-direction: row; align-items: flex-start; gap: 12px; }
.rq-p dt { width: 36px; flex: none; color: var(--tx-3); white-space: nowrap; }
.rq-p dd { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 500; }
.rq-e { align-self: flex-start; padding: 0 var(--pad) 14px; }
/* 항공권 표: 한 건이 한 줄. 상자 없이 가는 선으로 나누고, 고른 줄은 옅은 하늘색 면으로 표시한다 */
.ocs { gap: 0; }
.ocs-h { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 10px; }
.fo-hd, .fo-r { display: flex; flex-direction: row; align-items: center; gap: 20px; padding-left: 16px; padding-right: var(--pad); }
.fo-hd { min-height: 36px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 18px; color: var(--tx-3); }
.fo { border-bottom: 1px solid var(--line); }
.fo.on { background: var(--brand-tint); }
.fo-r { padding-top: 18px; padding-bottom: 8px; cursor: pointer; }
.fo-k { position: relative; display: flex; width: 20px; flex: none; border-radius: 10px; cursor: pointer; }
.fo-a { width: 150px; flex: none; gap: 3px; }
.al { object-fit: contain; align-self: flex-start; margin-bottom: 4px; }
.fo-a > .row { flex-wrap: wrap; row-gap: 4px; }
.fo-a .t-h3 { white-space: nowrap; }
.fo-l { display: flex; flex: 1 1 0; flex-direction: row; align-items: flex-start; gap: 28px; }
.fo-p { display: flex; flex-direction: column; width: 132px; flex: none; align-items: flex-end; gap: 4px; text-align: right; }
.lg2 { display: flex; flex-direction: column; flex: 1 1 0; gap: 6px; }
.lg2-k { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--tx-2); }
.lg2-t { flex-direction: row; align-items: center; gap: 10px; }
.lg2-t .e { flex: none; gap: 0; }
.lg2-t .e b { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: -.01em; }
.lg2-t .e span { font-size: 12px; line-height: 16px; color: var(--tx-3); }
.lg2-t .m { flex: 1 1 0; flex-direction: row; align-items: center; gap: 8px; }
.lg2-t .m i { display: flex; flex: 1 1 0; height: 1px; background: var(--line-strong); }
/* 줄 아래: 요청과 맞는 점(왼쪽)과 숙소 펼치기(오른쪽). details/summary 라서 스크립트 없이도 열린다 */
.fo-tg { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 46px; padding: 2px var(--pad) 10px 56px; }
.fo-fit { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.fo-st { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; }
.fo-tb { display: flex; flex-direction: row; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 10px 0 14px; border-radius: var(--r-pill); background: var(--n-0); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13px; line-height: 20px; font-weight: 500; }
.fo-tb .ic { transition: transform .3s var(--ease); }
.fo-s .tg-o, .fo-s[open] .tg-c { display: none; }
.fo-s[open] .tg-o { display: inline; }
.fo-s[open] .fo-tb .ic { transform: rotate(180deg); }
.fo.on .fo-ch { display: none; }
.fo-w { gap: 12px; padding: 6px var(--pad) 22px 56px; }
.stays { flex-direction: row; align-items: stretch; gap: 16px; }
/* 숙소 한 곳: 상자 없이 사진과 글. 고른 곳은 사진에 남색 테두리 */
.sc { position: relative; flex: 1 1 0; gap: 10px; border-radius: 16px; cursor: pointer; --d0: .05s; }
.sc-ph { position: relative; display: flex; flex: none; border-radius: 16px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; }
.sc-tg { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: row; gap: 6px; }
.sc-ph img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.sc:has(input:checked) .sc-ph { outline-color: var(--brand); }
.sc:has(input:checked) .rad { border-color: var(--brand); }
.sc:has(input:checked) .rad::after { visibility: visible; }
.sc-b { display: flex; flex-direction: column; flex: 1 1 0; gap: 3px; }
.sc-n { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-bottom: 2px; }
.sc-f { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
/* 추가 선택 */
.ax { flex-direction: row; align-items: flex-start; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ax-l { width: 60px; flex: none; padding-top: 3px; }
.ax-r { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
/* 오른쪽: 선택한 조합 */
.sl { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.sl.first { border-top: 0; padding-top: 0; }
.sl .k { width: 46px; flex: none; font-size: 13px; line-height: 20px; color: var(--tx-3); }
.ver { flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; }
.ver.first { border-top: 0; padding-top: 0; }
.ver .v { width: 22px; flex: none; font-weight: 600; }

/* ───────── 09 숙소 위치와 추천 장소 ───────── */
.map { position: relative; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.map img { width: 100%; height: auto; }
.map img.dk { aspect-ratio: 880 / 480; }
.map img.mb { aspect-ratio: 560 / 480; }
.pin {
  position: absolute; width: 26px; height: 26px; align-items: center; justify-content: center; transform: translate(-50%, -50%);
  border: 2px solid var(--n-900); border-radius: 13px; background: var(--n-0);
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--n-900);
}
.pin.h { width: 38px; height: 38px; border: 2px solid var(--n-0); border-radius: 19px; background: var(--brand); color: var(--on-photo); }
.pin-l {
  position: absolute; display: flex; transform: translate(calc(-100% - 26px), -50%); padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--n-900); color: var(--on-photo); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; box-shadow: var(--e1);
}
.map-ctl { position: absolute; right: 14px; top: 14px; border-radius: 16px; background: var(--n-0); box-shadow: var(--e1); overflow: hidden; }
.map-ctl .b { width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--tx-2); }
.map-ctl .b.ln { border-top: 1px solid var(--line); }
.map-attr { position: absolute; display: flex; right: 0; bottom: 0; padding: 2px 10px 2px 8px; border-radius: 8px 0 0 0; background: var(--w-86); font-size: 11px; line-height: 16px; color: var(--tx-2); }
.lgd { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.lg { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; color: var(--tx-2); }
.lg-n { display: flex; align-items: center; justify-content: center; flex: none; height: 20px; padding: 0 7px; border: 1px solid var(--n-700); border-radius: 10px; background: var(--n-0); font-size: 11px; line-height: 16px; font-weight: 600; color: var(--n-900); }
.lg-h { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 10px; background: var(--brand); color: var(--on-photo); }
.pno { display: flex; width: 20px; height: 20px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--n-700); border-radius: 10px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--n-900); }
/* 장소 · 활동 줄: 사진 | 설명 | 웹 검색으로 찾은 후기(썸네일 + 사이트) */
.grp-h { flex-direction: row; align-items: center; gap: 10px; min-height: 40px; padding: 0 var(--pad); border-top: 1px solid var(--line); background: var(--surface-sub); }
.grp-h.first { border-top: 0; }
.pc { flex-direction: row; align-items: flex-start; gap: 18px; padding: 18px var(--pad); border-top: 1px solid var(--line); }
.pc.first { border-top: 0; }
.pc-ph { width: 124px; height: 93px; border-radius: 16px; }
.pc-i { flex: 1 1 0; gap: 5px; }
.pc-m { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; line-height: 20px; }
.pc-m .i { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.pc-rv { width: 296px; flex: none; gap: 8px; }
.rv { flex-direction: row; align-items: center; gap: 10px; }
.rv-ph { width: 52px; height: 39px; border-radius: 10px; }
.star { color: var(--y-600); }
.pn-n { padding: 14px var(--pad); border-top: 1px solid var(--line); background: var(--surface-sub); }

/* ───────── 10–13 결제 ───────── */
.cardrow { flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.addon { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--pad); border-top: 1px solid var(--line); background: var(--surface-sub); border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px); }
.li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px var(--pad); border-top: 1px solid var(--line); }
.li.first { border-top: 0; }
.li .pr { width: 124px; flex: none; align-items: flex-end; gap: 4px; }
.pax { flex-direction: row; align-items: center; gap: 16px; padding: 14px var(--pad); border-top: 1px solid var(--line); }
.pax.first { border-top: 0; }
.pax .nm { width: 160px; flex: none; }
.done-h { flex-direction: row; align-items: flex-start; gap: 16px; padding: 28px var(--pad); }
.doc { flex-direction: row; align-items: center; gap: 12px; padding: 14px var(--pad); border-top: 1px solid var(--line); }
.acts { flex-direction: row; align-items: center; gap: 8px; }

/* ───────── 14 내 여행 ───────── */
/* 여행 한 건: 요약(기간 · 인원 · 주문번호) 아래에 날짜별 일정. 날짜는 왼쪽 칸에, 그날의 일은 시각 순서로 오른쪽에 놓는다 */
.trip-m { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 48px; padding: 16px var(--pad); border-bottom: 1px solid var(--line); background: var(--surface-sub); }
.tl-d { flex-direction: row; align-items: flex-start; gap: 20px; padding: 20px var(--pad); border-top: 1px solid var(--line); }
.tl-d.first { border-top: 0; }
.tl-k { width: 104px; flex: none; font-weight: 600; }
.tl-l { flex: 1 1 0; gap: 16px; }
.tl-i { flex-direction: row; align-items: flex-start; gap: 16px; }
.tl-t { width: 112px; flex: none; line-height: 24px; color: var(--tx-2); }
.tl-x { flex: 1 1 0; gap: 2px; }
.tl-c { flex: none; line-height: 24px; }
.doc.first { border-top: 0; }

@media (max-width: 1199px) {
  .two { flex-direction: column; align-items: stretch; }
  .two-m { flex: none; }
  .two-r { width: auto; }
  .two-r.stick { position: static; }
  .auth { flex-direction: column; }
  .auth-win { flex: none; min-height: 440px; }
  .auth-win .lyr { background-image: var(--scrim-auth-s), url(assets/bg/hero.jpg); }
  .auth-side { flex: 1 0 auto; padding: 40px var(--gut) 56px; }
  .home-b { flex-wrap: wrap; }
  .hb { flex: 1 1 280px; }
  .fo-r { flex-wrap: wrap; gap: 14px 20px; }
  .fo-a { width: auto; flex: 1 1 0; }
  .fo-l { order: 3; flex: none; width: 100%; padding-left: 40px; }
  .pc-rv { width: 240px; }
}
@media (max-width: 767px) {
  .main { padding: 8px var(--gut) 48px; }
  .pt { flex-direction: column; align-items: flex-start; gap: 14px; }
  .f2 { flex-direction: column; align-items: stretch; }
  .f2 > * { flex: none; }
  .radios { gap: 20px; flex-wrap: wrap; }
  .tiles .opt, .tiles.t3 .opt { width: calc((100% - 8px) / 2); }
  .pnl-h { padding: 12px var(--pad); min-height: 56px; }
  .pnl-f > .btn, .pnl-f > .acts { flex: 1 1 0; }
  .auth-win { min-height: 0; padding: 18px 18px 20px; gap: 28px; }
  .rc { padding: 2px 16px 12px; border-radius: 20px; }
  .auth-side { padding: 32px var(--gut) 44px; }
  .home { padding-bottom: 24px; }
  .home-win { min-height: 0; padding: 40px 12px 28px; }
  .home-in { gap: 22px; }
  .home-l { padding-left: 18px; }
  .hb { flex: 1 1 100%; padding: 18px 16px; }
  .srch-top { height: 64px; }
  .srch { gap: 14px; padding-bottom: 28px; }
  .srch-sp { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .srch-sp .ln { display: none; }
  .sp { height: 30px; padding: 0 11px 0 9px; font-size: 12px; }
  .srch-rc { flex-direction: column; align-items: stretch; gap: 6px; max-width: 330px; }
  .srch-rc .q { align-items: flex-start; }
  .srch-rc .q .ic { margin-top: 2px; }
  /* 표는 줄마다 묶음으로 바꿔 쌓는다 */
  .rq-t thead { display: none; }
  .rq-t, .rq-t tbody, .rq-t tr, .rq-t th, .rq-t td { display: block; width: auto !important; }
  .rq-t tbody tr { padding: 12px var(--pad); }
  .rq-t tbody tr + tr { border-top: 1px solid var(--line); }
  .rq-t tbody tr > * { padding: 0 !important; border: 0 !important; }
  .rq-t tbody td { padding-top: 6px !important; }
  .fo-r { padding-top: 16px; gap: 12px; }
  .fo-l { flex-direction: column; gap: 14px; padding-left: 0; }
  .fo-p { width: auto; }
  .fo-tg { flex-direction: column; align-items: flex-start; padding-left: var(--pad); }
  .fo-st { align-self: stretch; justify-content: space-between; flex-wrap: wrap; }
  .fo-w { padding-left: var(--pad); }
  .stays { flex-direction: column; gap: 14px; }
  .sc { flex-direction: row; gap: 12px; }
  .sc-ph { width: 108px; align-self: flex-start; }
  .sc-tg { left: 6px; top: 6px; }
  .sc-ph img { aspect-ratio: 1 / 1; }
  .ax { flex-direction: column; align-items: stretch; gap: 8px; }
  .ax-l { width: auto; padding-top: 0; }
  .ax-r { align-items: flex-start; }
  .pc { flex-wrap: wrap; gap: 12px; }
  .pc-ph { width: 84px; height: 63px; border-radius: 12px; }
  .pc-rv { width: 100%; }
  .map-attr { right: auto; left: 0; border-radius: 0 8px 0 0; }
  .addon { align-items: flex-start; }
  .li { flex-wrap: wrap; gap: 8px 12px; }
  .li .pr { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding-left: 34px; }
  .vt thead { display: none; }
  .vt, .vt tbody { display: block; }
  .vt tbody tr { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding: 12px var(--pad); }
  .vt tbody tr + tr { border-top: 1px solid var(--line); }
  .vt tbody tr > * { display: block; padding: 0 !important; border: 0 !important; }
  .vt tbody th { flex: 1 1 60%; font-weight: 500; color: var(--tx); }
  .vt td.tr { order: 1; flex: none; }
  .vt td[data-l] { order: 2; flex: none; width: calc(50% - 6px); }
  .vt td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--tx-3); }
  .pt-t td[data-l] { width: calc((100% - 24px) / 3); }
  .pax { flex-wrap: wrap; gap: 2px 12px; }
  .pax .nm { width: 100%; }
  .doc { flex-wrap: wrap; }
  .trip-m { gap: 8px 28px; }
  .tl-d { flex-direction: column; gap: 8px; }
  .tl-k { width: auto; }
  .tl-i { flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
  .tl-t { width: auto; }
  .tl-x { order: 2; flex: 1 1 100%; }
  .acts { flex-direction: column; align-items: stretch; }
}
/* 아주 좁은 화면: 선택 타일은 이름이 꺾이지 않게 한 줄에 하나씩 놓는다 */
@media (max-width: 360px) { .tiles .opt, .tiles.t3 .opt { width: 100%; } }

/* ───────── 00 디자인 기준 ───────── */
.fd { gap: 48px; padding: 64px 64px 80px; }
.fd-sec { gap: 18px; }
.fd-h { flex-direction: row; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--n-900); }
.fd-row { flex-direction: row; align-items: flex-start; gap: 48px; }
.fd-col { flex: 1 1 0; gap: 16px; }
.sw-row { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.sw { width: 96px; gap: 6px; }
.sw .c { height: 52px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--k-10); }
.ty { flex-direction: row; align-items: center; gap: 24px; padding: 12px 0; border-top: 1px solid var(--line); }
.ty .m { width: 200px; flex: none; }
.ics { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.ici { width: 92px; height: 68px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.spec { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.rd { width: 76px; height: 52px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; color: var(--tx-2); }
.rd.sh-1 { width: 130px; border-radius: 24px; border-color: transparent; box-shadow: var(--e1); }
.rd.sh-2 { width: 130px; border-radius: 28px; border-color: transparent; box-shadow: var(--e2); }
.spc { flex-direction: row; align-items: center; gap: 10px; }
.spc span { width: 20px; }
.spc i { display: flex; height: 12px; background: var(--b-200); border-radius: 6px; }
.fl { flex-direction: row; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.fl .n { width: 28px; flex: none; font-weight: 500; color: var(--sky-ink); }
.fl .t { width: 248px; flex: none; font-weight: 500; }
.fd .fd-col .fl .t { width: 132px; }
.rule { flex-direction: row; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.rule .a { flex: 1 1 0; color: var(--tx-3); }
.rule .b { flex: 1 1 0; }
.dock-demo { padding: 20px 20px 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--n-100); overflow: hidden; }
.ask-demo { gap: 14px; padding: 28px 24px; border-radius: var(--r-md); background: var(--scrim-stage), url(assets/bg/flight.jpg) center / cover; }
.logo-t { align-items: center; justify-content: center; min-height: 112px; padding: 24px 32px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); gap: 12px; }
.logo-t.on-ink { background: var(--n-900); border-color: var(--n-900); }
.logo-t.on-sky { background: var(--b-500); border-color: var(--b-500); }
.logo-t.wmk { align-items: flex-start; color: var(--n-900); }
.logo-t.wmk .wm-b { font-size: 56px; }
.logo-t.wmk .wm-s { font-size: 13px; }
@media (max-width: 767px) {
  .fd { gap: 36px; padding: 32px var(--gut) 48px; }
  .fd-row { flex-direction: column; gap: 24px; }
  .fd-col { flex: none; align-self: stretch; }
  .ty, .fl, .rule { flex-wrap: wrap; gap: 4px 16px; }
  .ty .m, .fl .t, .fd .fd-col .fl .t { width: auto; }
  .fl .t { flex: 1 1 60%; }
  .rule .a, .rule .b { flex: 1 1 100%; }
  .fd .steps { flex-wrap: wrap; }
  .rd.sh-1, .rd.sh-2 { width: 108px; }
  .logo-t.wmk .wm-b { font-size: 40px; }
}