:root{--bg:#F6F7F8;--surface:#FFFFFF;--card:#FFFFFF;--card-border:#E6EAF0;--navy:#0F2747;--accent:#2E90FA;--accent-text:#1B6FCE;--kakao:#FEE500;--kakao-text:#191600;--text:#111827;--muted:#5A6B82;--ok:#1E8E5A;--err:#D64545;--radius:22px;--max:720px;--tint-blue:#E7F4FD;--tint-yellow:#FFF2C6} *{box-sizing:border-box}html{scroll-behavior:smooth} [hidden]{display:none!important} body{margin:0;font-family:"Pretendard Variable",Pretendard,-apple-system,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;background:var(--bg);color:var(--text);line-height:1.55} a{color:var(--accent);text-decoration:none} .wrap{width:min(100% - 32px,var(--max));margin-inline:auto} .sticky{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(255,255,255,.92);border-bottom:1px solid var(--card-border)} .sticky-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;position:relative} .brand{font-weight:800;letter-spacing:-.02em;color:var(--navy);display:flex;align-items:center;gap:8px}.brand img{display:block;flex-shrink:0;border-radius:6px}.brand small{display:block;color:var(--muted);font-weight:600;font-size:.68rem} .nav-toggle{display:none;flex-shrink:0;width:44px;height:44px;padding:0;background:#fff;border:1px solid var(--card-border);border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;order:2} .nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} #site-menu{display:flex;gap:18px;font-size:.85rem;font-weight:650;order:1} #site-menu a{color:var(--text)} .sticky-inner .btn-primary{order:3} @media(max-width:700px){ .nav-toggle{display:flex} #site-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--card-border);box-shadow:0 12px 20px rgba(15,39,71,.08);padding:6px 16px;z-index:25} #site-menu.is-open{display:flex} #site-menu a{padding:14px 0;border-bottom:1px solid var(--card-border);font-size:.95rem} #site-menu a:last-child{border-bottom:0} } .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:12px 18px;font-weight:700;cursor:pointer;min-height:48px} .btn-primary{background:var(--navy);color:#fff} .btn-primary:hover{background:#173a63} .btn-hero{width:100%;background:linear-gradient(135deg,var(--accent),var(--navy));box-shadow:0 8px 24px rgba(46,144,250,.35);font-size:1.02rem} .btn-kakao{background:var(--kakao);color:var(--kakao-text)} .btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--card-border)} .hero{padding:20px 0 24px} .hero-band{background:linear-gradient(160deg,var(--navy) 0%,#0A1B33 100%);padding:26px 0 34px;color:#fff} .hero-band-inner{color:#fff} .hero-tagline{color:#9FC3F2;font-size:.78rem;font-weight:700;letter-spacing:.04em;margin:0 0 10px} .hero-band .hero-badges .hero-badge{background:rgba(255,255,255,.12);color:#fff} .hero-band .eyebrow{color:#7CB4F5} .hero-band h1{font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.28;margin:.4rem 0 12px;letter-spacing:-.02em;color:#fff} .hero-lede{color:#C7D4E6;margin:0 0 4px;font-size:.95rem} .hero-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .hero-badge{background:var(--tint-blue,#E7F4FD);color:var(--navy);font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap} .eyebrow{color:var(--accent-text);font-size:.78rem;font-weight:700;letter-spacing:.08em} .hero h1{font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.28;margin:.4rem 0 12px;letter-spacing:-.02em;color:var(--navy)} .hero p{color:var(--muted);margin:0 0 16px} .stat-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--navy);margin:0 0 16px} .stat-strip-stars{color:#B45309} .stat-strip-sep{color:var(--card-border)} .section{padding:32px 0} .section-tight{padding:24px 0} .section-loose{padding:56px 0} .section h2{font-size:1.3rem;margin:0 0 14px;letter-spacing:-.01em;color:var(--navy);font-weight:800} [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)} [data-reveal].is-visible{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){[data-reveal]{transition:none;opacity:1;transform:none}} .kicker{color:var(--accent-text);font-size:.75rem;font-weight:700;letter-spacing:.08em} .steps{display:grid;gap:10px;padding:0;margin:0;list-style:none;counter-reset:s} .steps li{background:var(--card);border:1px solid var(--card-border);box-shadow:0 4px 16px rgba(15,39,71,.05);border-radius:var(--radius);padding:14px 16px;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start} .steps li::before{counter-increment:s;content:counter(s, decimal-leading-zero);color:var(--accent);font-weight:800} .prices{display:grid;gap:12px} .price-card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid var(--card-border);box-shadow:0 4px 18px rgba(15,39,71,.05);position:relative;transition:transform .18s ease,box-shadow .18s ease} .price-card-popular{border:2px solid var(--accent);box-shadow:0 10px 32px rgba(46,144,250,.18);transform:translateY(-4px)} .badge-popular{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:4px 14px;border-radius:999px;box-shadow:0 4px 10px rgba(46,144,250,.35);white-space:nowrap} @media(min-width:640px){.price-card-popular{transform:scale(1.04)}} .price-card .tag{font-size:.72rem;color:var(--accent-text);font-weight:700} .price-card h3{margin:6px 0;font-size:1.1rem;color:var(--navy)} .price-card .amt{font-size:1.35rem;font-weight:800;color:var(--navy)} .price-card .amt small{font-size:.85rem;color:var(--muted);font-weight:600} .price-card p{color:var(--muted);margin:8px 0 12px;font-size:.92rem} .faq details{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:12px 14px;margin:0 0 8px} .faq summary{cursor:pointer;font-weight:650;color:var(--navy)} .faq p{color:var(--muted);margin:8px 0 0} .booking{background:linear-gradient(180deg,rgba(46,144,250,.06),transparent 40%);padding:36px 0 64px} .card{background:var(--surface);border:1px solid var(--card-border);border-radius:22px;padding:20px;box-shadow:0 4px 18px rgba(15,39,71,.05)} .service-options{display:grid;gap:8px;margin:10px 0 14px} .service-options label{display:block;background:#fff;border-radius:16px;padding:12px;border:1px solid var(--card-border);cursor:pointer} .service-options input{margin-right:8px} .service-options label:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .service-options small{display:block;color:var(--muted);margin-top:4px} .grid{display:grid;gap:10px} @media(min-width:640px){.grid.two{grid-template-columns:1fr 1fr}.prices{grid-template-columns:1fr 1fr 1fr}.service-options{grid-template-columns:1fr 1fr 1fr}} label.field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:650;color:var(--text)} .req{color:var(--accent);margin-left:2px} input,select,textarea{width:100%;border-radius:16px;border:1px solid var(--card-border);background:#fff;color:var(--text);padding:11px 12px;font:inherit} .form-step{margin-bottom:20px} .step-legend{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);margin-bottom:10px;font-size:.95rem} .step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--accent);color:#fff;font-size:.78rem;font-weight:800;flex:none} .price-preview-panel{background:linear-gradient(180deg,rgba(46,144,250,.06),transparent);border:1px solid var(--card-border);border-radius:16px;padding:12px 16px;margin:0 0 20px} .btn-block{width:100%} .total{font-size:1.5rem;font-weight:800;margin:0;color:var(--navy)}.total span{font-size:.9rem;color:var(--muted);margin-left:4px} .note{color:var(--muted);font-size:.85rem;margin-top:10px} .status{margin-top:12px;padding:10px 12px;border-radius:12px;background:#FDEBEA;color:var(--err)} .success{margin-top:14px;padding:18px;border-radius:16px;background:#EAF7EF;border:1px solid var(--ok)} .check{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem;margin:10px 0} .addon-check{padding:12px 14px;border:1px solid var(--border,#e5e7eb);border-radius:10px;background:#fff} .addon-check b{margin-left:auto;color:var(--text);font-weight:700} .addons-list{display:flex;flex-direction:column;gap:8px} .mobile-cta{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--card-border);display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--navy)} body{padding-bottom:76px} footer{padding:28px 0 96px;color:var(--muted);font-size:.88rem} .ft-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .ft-footer .brand{font-size:.95rem} .ft-footer p{margin:0;color:var(--muted)} .media-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:14px;background:var(--card);border:1px solid var(--card-border)} .media-hero video,.media-hero img{display:block;width:100%;height:auto} @media(max-width:520px){.media-hero{max-height:45vh}.media-hero img,.media-hero video{max-height:45vh;object-fit:cover;width:100%}} .timeline{display:grid;gap:10px;padding:0;margin:0;list-style:none;counter-reset:tl} .timeline li{background:var(--card);border:1px solid var(--card-border);box-shadow:0 4px 16px rgba(15,39,71,.05);border-radius:var(--radius);padding:14px 16px;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start} .timeline li::before{counter-increment:tl;content:counter(tl);color:var(--accent);font-weight:800;font-size:.95rem} .timeline strong{display:block;margin-bottom:2px;color:var(--navy)} .timeline span{color:var(--muted);font-size:.88rem} .includes{display:grid;gap:8px;margin:0;padding:0;list-style:none} .includes li{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;font-size:.92rem} .includes li .icon{color:var(--ok)} .excludes{color:var(--muted);font-size:.88rem;margin-top:10px;line-height:1.7} .review-card{background:var(--card);border:1px solid var(--card-border);box-shadow:0 4px 18px rgba(15,39,71,.05);border-radius:var(--radius);padding:14px;display:grid;gap:10px} .review-card-featured{border:1px solid var(--tintBlue,#E7F4FD);background:linear-gradient(180deg,rgba(46,144,250,.05),var(--card) 60%)} .review-card img{border-radius:12px;width:100%;height:auto;display:block} .review-card .note{margin:0} .review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px} .review-grid .review-card{padding:16px;font-size:14px;line-height:1.55} .review-stars{margin:0;color:#F5A623;letter-spacing:1px;font-size:14px} .proof-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:14px} .proof-card{margin:0;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 18px rgba(15,39,71,.05)} .proof-card img{width:100%;height:200px;object-fit:cover;display:block} .proof-card figcaption{padding:10px 12px 14px} .proof-card figcaption p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)} .cancel-box{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:16px;font-size:.9rem;color:var(--muted);line-height:1.7} .cancel-box strong{color:var(--navy)} .kakao-float{position:fixed;right:16px;bottom:88px;z-index:30;background:#fff;color:var(--muted);border:1px solid var(--card-border);border-radius:999px;padding:9px 14px;font-weight:600;font-size:.8rem;box-shadow:0 4px 12px rgba(0,0,0,.08)} .icon{width:1em;height:1em;flex:none} .trust-chip{display:inline-flex;align-items:center;gap:6px;background:#EAF2FF;color:var(--navy);border:1px solid #D4E4FB;border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:700;margin-bottom:14px} .trust-chip .icon{font-size:1.1em;color:var(--accent)} .trust-strip{padding-top:0;padding-bottom:12px} .trust-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px} .trust-cards-hero{grid-template-columns:repeat(3,1fr);margin-bottom:16px} @media(max-width:520px){.trust-cards-hero{grid-template-columns:1fr 1fr}.trust-cards-hero .trust-card:nth-child(1){grid-column:1/-1}} .trust-card{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 16px rgba(15,39,71,.05)} .trust-card .icon{font-size:1.4rem;color:var(--accent)} .trust-card strong{color:var(--navy);font-size:.92rem} .trust-card span{color:var(--muted);font-size:.8rem} .includes li .icon{color:var(--ok);font-size:1.1rem} .price-card .icon{font-size:1.3rem;color:var(--accent);margin-bottom:4px} .booking-reminder{display:flex;align-items:flex-start;gap:8px;background:#F3F7FC;border:1px solid var(--card-border);border-radius:14px;padding:10px 12px;color:var(--muted);font-size:.82rem;line-height:1.5;margin:0 0 14px} .booking-reminder .icon{color:var(--accent);flex:none;margin-top:1px} /* 스팸 봇 확인용 허니팟: 사람 눈에는 완전히 안 보이지만 스크린리더/봇 파서에는 존재해서 자동입력 스크립트가 채우고 지나간다. display:none은 일부 봇이 걸러내므로 화면 밖으로 밀어내는 방식을 쓴다. */ .hp-trap{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden} .wizard-nav{display:flex;gap:10px;margin-top:6px} .wizard-nav .btn{flex:1;min-height:48px} #prevBtn{flex:0 0 auto;min-width:96px} .field-error{display:block;color:var(--err);font-size:.8rem;margin-top:6px} .is-invalid{border-color:var(--err)!important;box-shadow:0 0 0 1px var(--err)} .step-hint{color:var(--muted);font-size:.85rem;margin:0 0 12px} /* 커스텀 캘린더: 네이티브 date input을 감추고 이걸 대신 쓴다 (참고 사이트와 동일 UX) */ .calendar-widget{border-radius:16px;padding:10px;background:#F2F7FC;border:1px solid rgba(46,144,250,.12)} .calendar-header{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px} .calendar-title{margin:0;font-weight:800;font-size:1rem;color:var(--navy)} .calendar-nav{width:36px;height:36px;border-radius:999px;border:1px solid var(--card-border);background:#fff;color:var(--navy);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center} .calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.72rem;font-weight:800;color:var(--muted);padding:4px 0} .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .calendar-day{aspect-ratio:1;border:0;background:transparent;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center} .calendar-day:hover:not(:disabled){background:#EAF3FF} .calendar-day:disabled{color:#C4CCD7;cursor:not-allowed;opacity:.6} .calendar-day.is-selected{background:var(--navy);color:#fff} .calendar-day.is-empty{visibility:hidden} .calendar-selected{margin:10px 2px 0;font-size:.85rem;font-weight:700;color:var(--navy)} .step-sublegend{font-weight:700;color:var(--navy);font-size:.88rem;margin:14px 0 8px} .text-muted{color:var(--muted)} .text-strong{color:var(--text)} .form-step-reset{border:0;padding:0;margin:0} .mt-10{margin-top:10px} .m-tight{margin:0 0 4px} .m-tight-lg{margin:.3rem 0} .m-total{margin:8px 0} .addon-hidden{display:none} /* 셀링포인트: 비교표 (모바일 375px 기준 stacked-row, 데스크톱 3열 grid) */ .differentiator{padding:24px 0} .compare-table{display:flex;flex-direction:column;gap:8px;margin-top:14px} .compare-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:12px 14px} .compare-row-head{background:transparent;border:0;padding:0 14px;font-size:.72rem;font-weight:800;color:var(--muted);letter-spacing:.03em} .compare-row-head [role="columnheader"]:first-child{display:none} .compare-row [role="rowheader"]{grid-column:1/-1;font-size:.78rem;font-weight:800;color:var(--navy);margin-bottom:2px} .compare-yes,.compare-no{font-size:.85rem;line-height:1.4;padding:8px 10px;border-radius:10px} .compare-yes{background:#E9F7EF;color:#1E8E5A;font-weight:700} .compare-no{background:#F5F6F7;color:var(--muted)} .compare-col-us{color:var(--accent-text);font-weight:800} .compare-col-them{color:var(--muted);font-weight:800} @media(min-width:640px){ .compare-row{grid-template-columns:140px 1fr 1fr} .compare-row [role="rowheader"]{grid-column:auto;margin-bottom:0;align-self:center} .compare-row-head [role="columnheader"]:first-child{display:block} } /* ===== 2026-10-01 브랜드·UX 정리 — 색은 다낭특파원 로고 기준(잉크 #131b2a · 하늘 #66bfe8 · 안개 #e5f0ff) ===== --accent 는 글자·테두리에도 쓰이므로 흰 바탕 대비가 나오는 짙은 하늘색으로 둔다. 면(面)에만 쓰는 밝은 하늘색은 --sky. */ :root{--bg:#f5f8fd;--navy:#131b2a;--accent:#1b6f9c;--accent-text:#1b6f9c;--sky:#66bfe8;--tint-blue:#e5f0ff;--card-border:#e1e8f2;--text:#131b2a;--muted:#4b5a70} .sprite{position:absolute;width:0;height:0;overflow:hidden} .ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;fill:currentColor} .brand{display:flex;align-items:center;gap:10px;line-height:1.15} .brand span{display:block} .brand-mark{width:40px;height:40px;border-radius:0;display:block;object-fit:contain} @media(min-width:1024px){.brand-mark{width:54px;height:54px}} .btn-primary:hover{background:#2a3850} .btn-hero{background:var(--navy);box-shadow:0 10px 28px #66bfe84d;font-size:1.02rem} .btn-ghost{border-color:#c3cfe0} .hero{padding:18px 0 28px} .hero-badges{list-style:none;margin:0 0 12px;padding:0} .hero-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--card-border);color:var(--navy)} .hero-badge .ic{color:var(--accent)} .hero-lead{margin:0 0 14px} .hero-cta{display:grid;gap:10px;margin-bottom:18px} .hero-cta .btn-hero{width:100%} .media-hero img{display:block;width:100%;max-height:45vh;object-fit:cover;object-position:center 20%;border-radius:var(--radius)} .price-card-popular{border-color:var(--sky);box-shadow:0 10px 32px #66bfe83d} .badge-popular{background:var(--navy);box-shadow:none} .booking{background:linear-gradient(180deg,#e5f0ff,transparent 45%)} .more-flow{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:4px 16px} .more-flow summary{min-height:48px;display:flex;align-items:center;font-weight:700;color:var(--navy);cursor:pointer} .more-flow .timeline{margin:4px 0 14px} .mobile-cta{border-top:1px solid var(--card-border)} .mobile-cta-price{display:grid;line-height:1.25;color:var(--muted)} .mobile-cta-price small{font-size:.72rem} .mobile-cta-price b{font-size:1rem;color:var(--navy)} .kakao-float{bottom:calc(84px + env(safe-area-inset-bottom))} .in-booking .mobile-cta{display:none} .in-booking .kakao-float{bottom:16px} .site-footer{display:grid;gap:10px;padding:28px 0 120px;color:var(--muted);font-size:.85rem} .site-footer p{margin:0} .site-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px} .site-footer a{color:var(--accent);font-weight:600} @media(min-width:700px){ .prices{grid-template-columns:repeat(3,1fr);gap:16px} .price-card-popular{transform:translateY(-6px)} .hero-cta{grid-template-columns:auto auto;justify-content:start} .hero-cta .btn-hero{width:auto} } @media(min-width:960px){ :root{--max:960px} .hero{display:grid;grid-template-columns:1.05fr .95fr;column-gap:48px;align-items:center;padding:36px 0 44px} .hero>*{grid-column:1} .hero>.media-hero{grid-column:2;grid-row:1/span 9;align-self:center} .media-hero img{max-height:none;aspect-ratio:3/4;object-position:center 15%} .mobile-cta{display:none} .kakao-float{bottom:24px} .site-footer{padding-bottom:48px} } body{word-break:keep-all;overflow-wrap:break-word} .price-card .btn{width:100%} .in-booking .kakao-float{display:none} .booking-help{margin:10px 0 0;font-size:.9rem} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} html{scroll-padding-top:76px;scroll-padding-bottom:88px} /* 터치 영역 — 모바일 최소 44px(우리 규칙 48px 목표) */ .calendar-grid{gap:4px} .calendar-day{aspect-ratio:auto;min-height:44px;width:100%} .calendar-nav{width:44px;height:44px} .faq summary{min-height:48px;display:flex;align-items:center;padding-block:8px} .site-footer a,.booking-help .text-link{display:inline-flex;align-items:center;min-height:44px} /* ===== 2026-10-02 UI/UX 최적화 (danang-ui-system v2) ===== */ /* 단계 fieldset: 바깥 .card 가 이미 틀이라 안쪽 테두리·여백을 없앤다(브라우저 기본 테두리 노출 수정) */ .form-step{border:0;padding:0;margin:0 0 18px;min-width:0;background:none} .step-legend{padding:0;margin-bottom:6px;font-size:1.05rem} .step-num{width:26px;height:26px;background:var(--navy)} /* 필수 표시(*)는 라벨 글자 바로 옆에 붙인다 */ .field-label{display:block} .req{color:var(--err);margin-left:2px} input,select,textarea{min-height:48px;font-size:16px} input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,.calendar-day:focus-visible,.calendar-nav:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--sky);outline-offset:2px} .field-error{font-weight:600} .is-invalid{border-color:var(--err)!important;box-shadow:0 0 0 2px #d6454526} .calendar-selected{min-height:1.5em} /* 단계 전환 시 스크롤 위치: 고정 헤더에 가리지 않게 */ #booking .card{scroll-margin-top:84px} /* 하단 고정 바: 첫 화면(큰 예약 버튼이 보일 때)엔 숨김, 카카오 문의는 그 자리로 내림 */ .hero-in-view .mobile-cta{display:none} .hero-in-view .kakao-float{bottom:16px} .compare-yes{color:#115c37} .includes li .icon{color:#157347} /* #booking 앵커 이동: 고정 헤더(약 65px)가 BOOKING 라벨을 가리지 않게 */ #booking{scroll-margin-top:8px} .consent-note{margin:0 0 10px;font-size:.82rem;line-height:1.5} .field-check{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer} .field-check input{width:18px;height:18px;flex:none} .field-label small{font-weight:400;opacity:.7} .grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .more-fields{margin-top:12px;border:1px solid var(--line,#dbe3e7);border-radius:12px;padding:0 14px} .more-fields>summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none} .more-fields>summary::-webkit-details-marker{display:none} .more-fields>summary::after{content:"+";float:right;font-weight:400} .more-fields[open]>summary::after{content:"–"} .more-fields[open]{padding-bottom:14px} /* 탭만으로 예약: 한 화면에 한 단계, 스크롤 없이 */ .time-readout{font-size:2rem;font-weight:800;text-align:center;margin:4px 0 8px} .chip-label{font-size:.85rem;font-weight:700;color:var(--muted,#5a6c75);margin:10px 0 6px} .chip-grid{display:grid;gap:6px} .chip-hours{grid-template-columns:repeat(6,1fr)} .chip-mins{grid-template-columns:repeat(6,1fr)} .chip-airlines{grid-template-columns:repeat(3,1fr);margin-bottom:10px} .chip{border:1px solid var(--line,#dbe3e7);background:#fff;border-radius:12px;min-height:44px;font-size:.95rem;font-weight:700;color:var(--text,#102a37);cursor:pointer} .chip-a{font-size:.8rem;min-height:40px;line-height:1.15;padding:4px} .chip:hover{background:#EAF3FF} .chip.is-selected{background:var(--navy,#0f2747);border-color:var(--navy,#0f2747);color:#fff} .steppers{display:grid;gap:8px;margin-top:12px} .stepper{display:grid;grid-template-columns:1fr 48px 40px 48px;align-items:center;gap:8px} .stepper-label{font-weight:700} .stepper-label small{font-weight:400;opacity:.7} .stepper-btn{width:48px;height:44px;border-radius:12px;border:1px solid var(--line,#dbe3e7);background:#fff;font-size:1.4rem;font-weight:700;cursor:pointer} .stepper-btn:active{background:#EAF3FF} .stepper-out{text-align:center;font-size:1.25rem;font-weight:800} .wizard-nav{position:sticky;bottom:0;background:#fff;padding-top:10px;z-index:2} @media (max-width:700px){ .booking{padding-top:12px;padding-bottom:12px} .booking .kicker,.booking h2{display:none} .booking .card{padding:14px} .step-legend{margin-bottom:6px} .calendar-day{min-height:40px} .calendar-widget{padding:8px} .calendar-selected{margin:6px 0 0} .price-preview-panel{margin-top:10px} } .media-hero{position:relative} .biz-info{margin-top:8px;font-size:13px;color:#5b6472} .footer-services{margin-top:12px} /* 2026-10-09 공항 VIP 히어로 배경: 공항 도착장 사진을 화면 가로 전체 배경으로 깔고, 흰 막(86~92%)을 덮어 남색 글자 대비를 유지한다. 외부 URL 없음 */ main{overflow-x:clip} .hero{position:relative;isolation:isolate} .hero::before{content:"";position:absolute;z-index:-1;inset:0 -100vmax;background:linear-gradient(180deg,rgba(245,248,253,.9) 0%,rgba(245,248,253,.86) 60%,rgba(245,248,253,.97) 100%),url(/ft-assets/vip-bg-2a3eaf13.webp) center 60%/cover no-repeat;background-color:#e5f0ff;pointer-events:none} @media(min-width:960px){.hero::before{background:linear-gradient(90deg,rgba(245,248,253,.95) 0%,rgba(245,248,253,.86) 50%,rgba(245,248,253,.7) 100%),url(/ft-assets/vip-bg-2a3eaf13.webp) center 2%/cover no-repeat;background-color:#e5f0ff}} /* 2026-10-10 공항 VIP 히어로 재디자인(Su 첨부 시안): 파란 강조 제목 · 4칸 특징 카드 · 3칸 요금 카드 · 파란 예약 버튼 · 흰 요금표 버튼. 문구·가격·링크는 그대로, 배치와 색만 바꿈 */ .hero{--vip-blue:#1858c8;--vip-blue-dark:#0f3f9a;--vip-tint:#e6efff} .hero .eyebrow{color:var(--vip-blue);letter-spacing:.22em;font-size:.78rem;font-weight:700;margin:6px 0 10px} .hero h1{font-size:clamp(1.75rem,7.2vw,2.3rem);font-weight:800;line-height:1.3;margin:0 0 14px} .hero-h1-accent{color:var(--vip-blue)} .hero .hero-lead{font-size:.95rem;line-height:1.65;max-width:34em;margin:0 0 18px} .hero .hero-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 12px;padding:14px 4px;background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:20px;box-shadow:0 8px 24px rgba(24,88,200,.10)} .hero .hero-badge{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;background:none;border:0;border-radius:0;padding:2px 4px;text-align:center;white-space:normal;font-size:.75rem;line-height:1.3;font-weight:800;color:var(--navy)} .hero .hero-badge+.hero-badge{border-left:1px solid #dbe4f3} .hero-badge-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:var(--vip-tint);color:var(--vip-blue)} .hero-badge-ic{width:44px;height:44px} .hero-badge-ic .ic{width:24px;height:24px} .hero .hero-badge .ic{color:var(--vip-blue)} .hero .hero-cta{gap:10px;margin-bottom:18px} .hero .btn-hero{background:linear-gradient(180deg,#2a6df0 0%,var(--vip-blue-dark) 100%);color:#fff;box-shadow:0 10px 26px rgba(24,88,200,.35);min-height:56px;font-size:1rem;border-radius:999px} .hero .btn-hero:hover{background:linear-gradient(180deg,#2a6df0 0%,#0b3487 100%)} .hero .btn-prices{justify-content:space-between;min-height:54px;padding:12px 22px;border:1px solid #cdd9ee;box-shadow:0 4px 14px rgba(24,88,200,.06);font-weight:700} .hero .btn-prices span{flex:1;text-align:center} .hero .btn-prices .ic{color:var(--muted)} .hero .media-hero{border-radius:24px;box-shadow:0 14px 34px rgba(15,39,71,.14)} @media(max-width:380px){ .hero .hero-badge{font-size:.7rem} } @media(min-width:700px){ .hero .hero-cta{grid-template-columns:1fr 1fr;max-width:34em} .hero .btn-hero{width:100%} } @media(min-width:960px){ .hero .hero-badges,.hero .hero-promise{max-width:32em} } @media(max-width:430px){ } @media(min-width:700px){.hero .hero-cta{max-width:40em}} @media(min-width:960px){.hero .hero-cta{max-width:none}.hero .btn-hero{font-size:.95rem;padding-inline:14px}} /* 2026-10-10 공항 VIP 3구역(입국·출국·라운지) 배경: Su 첨부 3컷 시안. 흰 막을 얹어 글자 대비(AA)를 지킨다. 문구·가격·버튼은 그대로 */ /* 2026-10-10 공항 VIP 요금 3카드를 Su 첨부 시안에 맞춤: 글자는 왼쪽, 공항 사진은 오른쪽에 또렷하게 두고 왼쪽 흰색으로 부드럽게 사라지게. 시안 3컷(Arrivals/Departures/Lounge)을 카드 비율로 다시 잘라 사용. 문구·가격·버튼 동작은 그대로 */ .price-card-bg{--bg-img:none;--bg-x:100%;background-color:#fff;border-radius:26px;padding:20px 20px 18px;box-shadow:0 6px 22px rgba(15,39,71,.07);overflow:hidden;isolation:isolate} .price-card-bg::before{content:"";position:absolute;z-index:-1;top:0;right:0;left:auto;bottom:auto;margin:0;width:var(--aw,62%);height:auto;aspect-ratio:var(--ar);background:var(--art) center/100% 100% no-repeat;border-radius:0 24px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 80%,transparent 100%);mask-composite:intersect} .price-card-bg>*:not(.badge-popular){position:relative} .price-card-arrival{--bg-img:url(/ft-assets/airport-arrivals-m820c1b95.webp)} .price-card-departure{--bg-img:url(/ft-assets/airport-departures-m8651c82e.webp)} .price-card-lounge{--bg-img:url(/ft-assets/airport-lounge-m5772d3fa.webp)} .price-card-bg .tag{color:#1B6FCE;letter-spacing:.02em} .price-card-bg h3{font-size:1.4rem;margin:4px 0 6px;letter-spacing:-.02em} .price-card-bg .amt{font-size:1.9rem;line-height:1.2} .price-card-bg p{color:#475467;font-size:1rem;margin:6px 0 14px} .price-card-bg .btn{width:100%;border-radius:999px;min-height:52px;font-size:.98rem;box-shadow:0 4px 14px rgba(15,39,71,.08)} .price-card-bg .btn-ghost{background:linear-gradient(180deg,#fff,#f3f7fc);border:1px solid #cfdcee} .price-card-bg .btn-primary{box-shadow:0 8px 20px rgba(15,39,71,.28)} /* fasttrack_pill_bubble (2026-10-10, Su): 요금표의 흰 알약 두 개(「이 요금으로 예약」·「라운지 예약」)를 물방울(글로시 글라스)로. review_bubble_style 과 같은 결: 투명한 하늘색 그라디언트 + 위쪽 하이라이트(::before) + 바닥 반사점(::after) + 안/바깥 부드러운 그림자 + 얇은 파랑 링. 링 #2f6db8 는 흰 배경 대비 5.25:1(≥3:1), 글자 #0b3d91 는 버튼 배경 대비 AA 이상. 크기·위치·테두리 두께(1px) 그대로. 짙은 남색 「출국 요금 선택」은 건드리지 않음. 롤백: 이 블록 삭제 또는 PR revert. */ .price-card-bg .btn-ghost{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,rgba(236,247,255,.96) 0%,rgba(207,230,252,.92) 55%,rgba(226,241,255,.96) 100%);color:#0b3d91;border-color:#2f6db8;box-shadow:inset 0 0 0 1px #2f6db8,inset 0 -7px 12px rgba(70,140,220,.28),inset 0 3px 6px rgba(255,255,255,.9),0 6px 14px rgba(47,109,184,.28),0 1px 2px rgba(11,61,145,.18);text-shadow:0 1px 0 rgba(255,255,255,.7)} .price-card-bg .btn-ghost::before{content:"";position:absolute;z-index:-1;left:9%;right:9%;top:3px;height:42%;border-radius:999px 999px 60% 60%/999px 999px 100% 100%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.18));pointer-events:none} .price-card-bg .btn-ghost::after{content:"";position:absolute;z-index:-1;left:16%;bottom:3px;width:26%;height:14%;border-radius:999px;background:radial-gradient(closest-side,rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none} .price-card-bg .btn-ghost:hover{background:linear-gradient(180deg,rgba(244,251,255,.98) 0%,rgba(190,220,250,.94) 55%,rgba(214,234,254,.98) 100%)} .price-card-bg .btn-ghost:active{box-shadow:inset 0 0 0 1px #2f6db8,inset 0 4px 10px rgba(47,109,184,.3),0 2px 5px rgba(47,109,184,.25)} .price-card-bg .btn-ghost:focus-visible{outline:3px solid #14829c;outline-offset:3px} @media(forced-colors:active){.price-card-bg .btn-ghost{border:2px solid ButtonText;forced-color-adjust:auto}} .price-card-bg .btn .ic{width:18px;height:18px} .price-card-bg.price-card-popular{border:2px solid #4DA8F5;box-shadow:0 0 0 4px rgba(77,168,245,.14),0 12px 32px rgba(46,144,250,.2);overflow:visible} .price-card-bg.price-card-popular::before{border-radius:24px} .price-card-bg .badge-popular{background:#1B6FCE;color:#fff;font-size:.86rem;padding:5px 20px;top:-15px;box-shadow:0 4px 12px rgba(46,144,250,.35);z-index:2} .prices:has(.price-card-bg){gap:16px} @media(max-width:639px){.price-card-bg.price-card-popular{transform:none}.prices:has(.price-card-bg){margin-top:12px}} /* 2026-10-10 히어로 배경 교체(2차, Su 재첨부 공항 입국장 사진 720x900 WebP). 기존 흰 막(기존 vip-bg 와 같은 농도, 모바일 86~97% / 데스크톱 좌→우 95→70%)을 유지해 글자 대비(AA)를 지킨다. 문구·가격·링크·버튼은 그대로 */ .hero::before{background:linear-gradient(180deg,rgba(245,248,253,.9) 0%,rgba(245,248,253,.86) 60%,rgba(245,248,253,.97) 100%),url(/ft-assets/airport-hall-577c3286.webp) center 40%/cover no-repeat;background-color:#e5f0ff} @media(min-width:960px){.hero::before{background:linear-gradient(90deg,rgba(245,248,253,.95) 0%,rgba(245,248,253,.86) 50%,rgba(245,248,253,.7) 100%),url(/ft-assets/airport-hall-577c3286.webp) center 45%/cover no-repeat;background-color:#e5f0ff}} /* 2026-10-10 price_table (Su: "Phần 공개 요금표 — thiết kế theo ảnh đã đưa, dùng ảnh 2 làm nền"): #384 가 시안 배치(글자 왼쪽·사진 오른쪽 페이드)를 이미 반영했다. 남은 문제만 손본다 — 출국 카드 설명 줄(소아 15,900 · 유아 무료)이 사진의 어두운 파란 표지판 위에 놓여 대비가 낮다(실측 1.43:1). 사진 아래쪽을 더 빨리 흰색으로 넘기고 설명 줄에 흰 후광을 줘 AA(4.5:1) 이상으로. 사진·문구·값·버튼·마크업은 그대로. */ .price-card-bg::before{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.95) 38%,rgba(255,255,255,.6) 58%,rgba(255,255,255,0) 88%),linear-gradient(180deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.88) 52%,#fff 66%),var(--bg-img) var(--bg-x) 50%/cover no-repeat} .price-card-bg p{text-shadow:0 0 6px #fff,0 0 3px #fff} /* 2026-10-10 airport_vip_popup (Su: "Các nút khách bấm vào để đặt sẽ đến popup gồm: lịch, thời gian bay, thời gian đến, mã số chuyến bay / Nút to là nút thanh toán"): 요금 카드 3개 버튼이 여는 팝업. 달력은 기존 .calendar-* 스타일을 그대로 쓴다. */ html.vp-open{overflow:hidden} .vip-popup{border:0;padding:0;width:min(100% - 24px,560px);max-height:calc(100dvh - 24px);overflow:auto;border-radius:22px;background:#fff;color:var(--text);box-shadow:0 24px 60px rgba(15,39,71,.35);overscroll-behavior:contain} .vip-popup::backdrop{background:rgba(15,39,71,.55)} .vip-popup form,.vip-popup .vp-success{padding:18px 18px 0} .vip-popup .vp-success{padding-bottom:20px;display:grid;gap:12px;outline:0} .vp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px} .vp-head h2,.vip-popup .vp-success h2{margin:0;font-size:1.25rem;color:var(--navy)} .vp-service{margin:4px 0 0;font-size:.85rem;color:var(--muted)} .vp-close{flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--card-border);background:#fff;color:var(--navy);font-size:1.6rem;line-height:1;cursor:pointer} .vp-close:focus-visible{outline:3px solid var(--sky);outline-offset:2px} .vp-set{border:0;margin:0 0 14px;padding:0;min-width:0} .vp-set legend{padding:0;margin-bottom:8px;font-weight:800;color:var(--navy)} .vp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .vp-grid-3{grid-template-columns:repeat(3,1fr)} .vp-grid .field{min-width:0} /* 성인·소아·유아 3칸: 라벨이 2줄로 접혀도 선택 상자(알약)는 같은 높이·같은 줄에 맞춘다 */ .vp-grid-3 .field{justify-content:space-between;align-items:stretch} .vp-grid-3 .field-label{line-height:1.3} .vp-grid-3 .field select{width:100%;min-height:48px;margin-top:auto} .vp-hint{font-size:.8rem;font-weight:500;color:var(--muted)} .vip-popup input,.vip-popup select{width:100%;min-width:0;border:1px solid #c3cfe0;border-radius:12px;padding:10px 12px;background:#fff;color:var(--text);font-family:inherit} .vip-popup .calendar-selected{min-height:1.5em} .vp-pay{position:sticky;bottom:0;background:#fff;padding:12px 0 16px;border-top:1px solid var(--card-border);margin-top:4px} .vp-total{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;color:var(--navy);font-weight:700} .vp-total b{font-size:1.5rem} .vp-pay-btn{width:100%;min-height:58px;font-size:1.1rem;background:var(--navy);color:#fff;box-shadow:0 10px 24px #66bfe84d} .vp-pay-btn:disabled{opacity:.7;cursor:wait} .vp-status{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#fdecec;color:#9b1c1c;font-weight:600;font-size:.9rem} .vp-note{margin:10px 0 0;font-size:.78rem;color:var(--muted)} .vip-popup .vp-success .btn{width:100%} @media(max-width:420px){.vip-popup{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}.vip-popup form,.vip-popup .vp-success{padding:14px 12px 0}.vp-grid{grid-template-columns:1fr}.vp-grid-3{grid-template-columns:repeat(3,1fr)}.vip-popup .calendar-day{min-height:40px}} .vp-note a{text-decoration:underline;color:var(--accent-text)} .vip-popup .field-error{color:#b42323} .vip-popup .calendar-day.is-selected,.vip-popup .calendar-day.is-selected:hover{background:var(--navy);color:#fff} .vp-note-end{margin:0;padding:0 0 16px} .vp-pay{padding-bottom:12px} /* 2026-10-10 비행기 시간 (Su 시안): 큰 HH:MM + 시 00~23 버튼 + 분 5분 단위 버튼, 선택은 남색 */ .vp-time-box{margin:0 0 12px} .vp-time-title{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-weight:800;font-size:1.05rem;color:var(--navy)} .vp-time-title .step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--navy);color:#fff;font-size:.85rem;font-weight:800} .vp-time-box .vp-hint{display:block;margin:0 0 10px;font-weight:600;color:var(--muted)} .time-card{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:76px;padding:8px 6px;border:2px solid var(--card-border);border-radius:16px;background:#fff;color:var(--navy);font:inherit;cursor:pointer} .time-card.is-active{border-color:var(--navy);box-shadow:0 0 0 2px #131b2a1f} .time-card.is-invalid{border-color:var(--err);box-shadow:0 0 0 2px #d6454526} .time-card-label{font-size:.8rem;font-weight:700;color:var(--muted)} .time-card-val{font-size:2rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--navy)} .time-card-val[data-empty="true"]{color:#5A6B82} .time-card:focus-visible,.chip:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .chip-label{margin:12px 0 6px;font-size:.85rem;font-weight:700;color:var(--muted)} .chip-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px} .chip{min-height:46px;padding:0;border:1px solid var(--card-border);border-radius:12px;background:#fff;color:var(--navy);font:inherit;font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;cursor:pointer} .chip.is-selected{background:var(--navy);border-color:var(--navy);color:#fff} @media(max-width:360px){.chip-grid{gap:4px}.chip{font-size:.95rem}} .consent-note .text-link{text-decoration:underline} /* 2026-10-10 time_frame (Su): 예약 폼 2단계 '비행기 시간' 틀 — 큰 시각 표시 카드 + 1·2 번호 붙은 시/분 구역. 레이아웃·글자·대비만 바꿈 */ .form-step[data-step="2"] .time-readout{margin:6px 0 14px;padding:14px 10px;border:2px dashed #8aa0b8;border-radius:16px;background:#f3f7fb;color:#4a5b72;font-size:1.15rem;font-weight:700;line-height:1.2} .form-step[data-step="2"] .time-readout.is-set{border:2px solid var(--navy);background:#fff;color:var(--navy);font-size:2.6rem;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px #131b2a14} .time-pick{margin:0 0 14px;padding:12px;border:1px solid var(--card-border);border-radius:16px;background:#fff} .time-pick-label{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:1rem;font-weight:800;color:var(--navy)} .time-pick-label small{font-size:.8rem;font-weight:600;color:#4a5b72} .time-pick-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--navy);color:#fff;font-size:.8rem;font-weight:800} .time-pick .chip-grid{gap:8px} .time-pick .chip{min-height:48px;font-size:1.1rem;font-weight:800;border-width:2px;border-color:#c5d2df} .time-pick .chip:hover{background:#eaf3ff;border-color:var(--navy)} .time-pick .chip.is-selected{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 0 0 3px #131b2a26} .time-pick .chip:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} @media(max-width:360px){.time-pick{padding:10px 8px}.time-pick .chip-grid{gap:5px}.time-pick .chip{font-size:1rem}} /* 2026-10-10 항공편 정보 입력 (Su 시안): 비행기 아이콘 머리글 + 출발/도착 시간 선택 상자(아이콘 왼쪽, 오른쪽 ⌄) + 항공편 번호 칸(티켓 아이콘) */ .vp-flight{border:1px solid #d9e6f5;border-radius:18px;padding:14px 12px 4px;background:linear-gradient(180deg,#f4f9ff,#fff)} .vp-flight legend.vp-flight-head{display:flex;align-items:center;gap:10px;float:left;width:100%;padding:0;margin:0 0 12px;font-weight:400} .vp-flight legend.vp-flight-head+*{clear:both} .vp-flight-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:#e3f0fd;color:var(--accent-text);font-size:1.3rem} .vp-flight-text{display:flex;flex-direction:column;gap:2px;min-width:0} .vp-flight-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;color:var(--navy)} .vp-flight-title .step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--navy);color:#fff;font-size:.85rem;font-weight:800} .vp-flight-sub{display:block;line-height:1.4} .vp-sel{display:block;margin:0 0 12px;min-width:0} .vp-sel .field-label{margin-bottom:6px;font-weight:700;color:var(--navy);font-size:.92rem} .vp-sel .field-label .req{color:#b42323} .vp-ctl{position:relative;display:block} .vp-ctl>.ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--accent-text);pointer-events:none} .vip-popup .vp-ctl select,.vip-popup .vp-ctl input{min-height:52px;padding:10px 14px 10px 46px;border:1px solid #cddbed;border-radius:14px;background-color:#fff;font-size:1.05rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums} .vip-popup .vp-ctl input::placeholder{color:#5A6B82;font-weight:600;opacity:1} .vip-popup .vp-ctl select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%230F2747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center} .vip-popup .vp-ctl select:has(option[value=""]:checked){color:#5A6B82;font-weight:600} .vip-popup .vp-ctl select:focus-visible,.vip-popup .vp-ctl input:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .vip-popup .vp-ctl select.is-invalid,.vip-popup .vp-ctl input.is-invalid{border-color:var(--err)} .vp-flight-times{margin-bottom:0} .vp-flight-times.vp-times-one{grid-template-columns:1fr} #vpArrField{order:-1} .vp-flight-times [hidden]{display:none} .vp-flight-times .vp-sel{margin-bottom:12px} @media(max-width:420px){.vp-flight{padding:12px 10px 2px}.vp-flight-times{grid-template-columns:1fr 1fr;gap:8px}.vip-popup .vp-flight-times .vp-ctl select{padding-left:38px;padding-right:30px;font-size:1rem;background-position:right 10px center}.vp-flight-times .vp-ctl>.ic{left:10px;width:20px;height:20px}} /* 2026-10-10 booking_form_design (Su 시안): 2단계 '비행기 시간' — 질문 제목 + 방향 알약 + 시 : 분 두 칸 목록(선택=파란 채움) + 선택 시간 카드. 값·검증·흐름 불변, 레이아웃·글자·색만 */ .time-ask{margin:2px 0 8px;font-size:1.75rem;font-weight:800;line-height:1.25;color:var(--navy);letter-spacing:-.02em} .time-dir{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 16px;border:1.5px solid var(--accent-text);border-radius:999px;background:#fff;color:var(--accent-text);font-weight:800;font-size:1rem} .time-dir .ic{width:22px;height:22px} .time-wheel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;margin:0 0 14px} .time-wheel .time-pick{margin:0;padding:10px 8px;border:1px solid var(--card-border);border-radius:18px;background:#fbfdff;box-shadow:0 2px 10px #0f274712} .time-wheel .time-pick-label{justify-content:flex-start;margin:0 0 8px 4px} .time-wheel .chip-grid{display:flex;flex-direction:column;gap:6px;max-height:288px;overflow-y:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin} .time-wheel .chip{flex:none;min-height:48px;width:100%;border:2px solid transparent;border-radius:12px;background:transparent;color:var(--navy);font-size:1.25rem;font-weight:800} .time-wheel .chip:hover{background:#eaf3ff;border-color:#c5d9f2} .time-wheel .chip.is-selected{background:var(--accent-text);border-color:var(--accent-text);color:#fff;box-shadow:0 4px 12px #1b6fce44} .time-wheel .chip:focus-visible{outline:3px solid var(--navy);outline-offset:2px} .time-colon{font-size:2rem;font-weight:800;color:var(--navy);line-height:1;padding-top:26px} .time-out{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:14px 16px;border:1px solid #cfe1f7;border-radius:18px;background:#e9f3ff} .time-out-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;background:#cfe3fb;color:var(--accent-text)} .time-out-ic .ic{width:28px;height:28px} .time-out-text{min-width:0} .time-out-label{margin:0;font-size:.9rem;font-weight:700;color:#3b4a5f} .form-step[data-step="2"] .time-out .time-readout{margin:2px 0 0;padding:0;border:0;background:transparent;box-shadow:none;text-align:left;font-size:1.15rem;font-weight:800;color:#3b4a5f} .form-step[data-step="2"] .time-out .time-readout.is-set{margin:2px 0 0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--accent-text);font-size:2.4rem;line-height:1.1} @media(max-width:360px){.time-ask{font-size:1.5rem}.time-wheel .chip{font-size:1.1rem}} @media(min-width:900px){.time-wheel{max-width:560px;margin-left:auto;margin-right:auto}.time-out{max-width:560px;margin-left:auto;margin-right:auto}.time-ask,.time-dir{text-align:left}} /* 2026-10-10 swipe_close (Su): 팝업 밀어서 닫기. 머리글·손잡이 줄은 끌기 전용(touch-action:none), 본문은 기본 스크롤 유지. 손잡이는 장식(aria-hidden)이고 기존 패딩 안에 들어가 배치를 바꾸지 않는다. */ .vip-popup .vp-grab{position:absolute;top:0;left:0;right:0;height:14px;display:flex;justify-content:center;align-items:flex-start;touch-action:none;pointer-events:auto} .vip-popup .vp-grab span{display:block;width:40px;height:4px;margin-top:6px;border-radius:999px;background:#b8c6d8} .vip-popup .vp-head{touch-action:none} /* 2026-10-10 결제 단계 (Su payment_flow): 결제 방법 3종 라디오 + 안내 */ .vp-paymethods{display:grid;gap:8px} .vp-paymethods legend{margin-bottom:4px} .vp-method{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid #c3cfe0;border-radius:12px;background:#fff;color:var(--text);font-weight:600;cursor:pointer} .vp-method input{width:20px;height:20px;flex:none;accent-color:var(--navy)} .vp-method:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)} .vp-method:has(input:focus-visible){outline:3px solid var(--sky);outline-offset:2px} .vp-status.is-info{background:#e8f1fb;color:#0f2747} .vip-popup .vp-success .vp-pay-btn{margin-top:0} /* 2026-10-10 departure_popup (Su: "Mục 출국 khi khách click sẽ có popup chỉ fast track / fasttrack + kiểm tra an ninh, phòng chờ để nguyên"): 요금표는 입국·출국 2장, 출국 카드는 선택 팝업을 연다. */ .prices.prices-2{grid-template-columns:1fr} @media(min-width:640px){.prices.prices-2{grid-template-columns:1fr 1fr;max-width:820px;margin-left:auto;margin-right:auto}} .dep-choice{width:min(100% - 24px,480px);padding:18px 18px 4px} .dep-choice-head{margin-bottom:12px} .dep-opts{display:grid;gap:12px} .dep-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;min-height:76px;padding:14px;text-align:left;font:inherit;color:var(--navy);background:linear-gradient(180deg,#fff,#f3f7fc);border:2px solid #cfdcee;border-radius:18px;cursor:pointer} .dep-opt:hover{border-color:#4DA8F5} .dep-opt:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .dep-opt-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:#e3f0fd;color:var(--accent-text);font-size:1.3rem} .dep-opt-text{display:flex;flex-direction:column;gap:2px;min-width:0} .dep-opt-text b{font-size:1.02rem;line-height:1.35;overflow-wrap:anywhere} .dep-opt-text small{font-size:.85rem;color:#475467;line-height:1.35} .dep-opt-price{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap} .dep-opt-price b{font-size:1.35rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums} .dep-opt-price small{font-size:.78rem;color:#475467} .dep-choice-note{margin:12px 0 14px} @media(max-width:420px){.dep-choice{padding:14px 12px 2px}.dep-opt{grid-template-columns:auto 1fr;grid-template-areas:"ic text" "price price"}.dep-opt-ic{grid-area:ic}.dep-opt-text{grid-area:text}.dep-opt-price{grid-area:price;flex-direction:row;align-items:baseline;gap:4px;justify-content:flex-end}} /* 2026-10-10 lounge_tab (Su: "Mở thêm phần phòng chờ ở tab 3"): 요금표 3번째 카드 = 라운지(옛 55,100원). 입국·출국·라운지 3열, 휴대폰은 1열. */ .prices.prices-3{grid-template-columns:1fr} @media(min-width:640px){.prices.prices-3{grid-template-columns:repeat(3,1fr);max-width:1040px;margin-left:auto;margin-right:auto}} .prices.prices-3 .price-card-bg .amt small{color:#344054} /* 2026-10-10 fasttrack_review_row (Su: 후기 = 가로 한 줄로 밀어서 보기, 세로 공간 절약 / 네이버 블로그 후기 링크 연결). 네이버 후기 카드 + 인증사진 카드를 한 줄 가로 레일(scroll-snap)로 둔다. 터치 스와이프·트랙패드·키보드(←→, 레일에 포커스)·이전/다음 버튼. 롤백: 이 블록 + src/index.html 후기 구역 + scripts/build.mjs 의 review-rail.mjs·rv-item + src/review-rail.mjs 를 이 PR revert 로 되돌린다. */ .rv-lead{margin:0 0 10px} .rv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px} .rv-hint{font-size:.85rem;font-weight:700;color:#3f5563} .rv-arrows{display:flex;gap:8px;margin-left:auto} .rv-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;box-shadow:inset 0 0 0 1.5px #6f8cab} .rv-arrow:disabled{cursor:default;background:#e4edf6;color:#4c6277;box-shadow:inset 0 0 0 1.5px #b7c8da} .rv-arrow:not(:disabled):hover{background:#eaf2fc} .rv-arrow:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .proof-gallery.rv-rail{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;margin:6px 0 0;padding:6px 2px 14px;scroll-snap-type:x proximity;scroll-padding-inline:2px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:thin;max-width:100%} .proof-gallery.rv-rail:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px;border-radius:12px} .rv-rail .rv-item{flex:0 0 min(260px,74%);scroll-snap-align:start;min-width:0;margin:0;display:flex;flex-direction:column} .rv-rail .rv-featured{padding:10px;gap:8px;align-content:start} .rv-rail .rv-link{display:block;color:inherit;text-decoration:none;border-radius:12px} .rv-rail .rv-link:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .rv-rail .rv-featured img{height:200px;object-fit:cover;object-position:top center} .rv-cta{display:block;margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--navy);color:#fff;font-size:.9rem;font-weight:800;text-align:center;line-height:1.35} .rv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .rv-rail .rv-featured .note{font-size:13px;line-height:1.5;margin:0} .rv-rail .proof-card img{height:200px} .rv-rail .proof-card figcaption{flex:1} .review-stars{color:#b45309} @media(min-width:960px){.rv-rail .rv-item{flex-basis:280px}.proof-gallery.rv-rail{scroll-snap-type:none}} @media(prefers-reduced-motion:reduce){.proof-gallery.rv-rail{scroll-behavior:auto}} /* 2026-10-10 fasttrack_review_hero (Su: 후기 = 큰 이미지 1장(네이버 블로그 후기) + 그 아래 다른 후기 가로 막대). 네이버 후기 카드를 레일 밖 상단 큰 이미지로 빼고, 레일에는 인증사진 후기 17장만 둔다. 롤백: 이 PR revert (fasttrack_review_row 상태로 복귀). */ .rv-hero{max-width:720px;margin:6px auto 18px;padding:12px;gap:10px} .rv-hero .rv-link{display:block;color:inherit;text-decoration:none;border-radius:12px} .rv-hero .rv-link:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .rv-hero img{width:100%;height:auto;aspect-ratio:1448/1390;object-fit:contain;border-radius:12px;display:block} .rv-hero .note{font-size:14px;line-height:1.5;margin:0} .rv-head{max-width:100%} /* 선택 이메일 칸 (접수 확인 메일) — 안내문은 입력칸 아래, 좁은 화면에서도 줄바꿈 */ .vp-email{display:block;margin-bottom:10px} .vp-email .field-label{margin-bottom:6px;font-weight:700;color:var(--navy);font-size:.92rem} .field .vp-hint{display:block;margin-top:6px;overflow-wrap:anywhere} /* 오류 문구 글자색: 흰 바탕 대비 AA(4.5:1) 이상 (#D64545 는 4.3 이었음) */ .field-error{color:#b42323} /* 2026-10-10 flight_time_bubble (Su: 비행기 시간 '시 (시간)'·'분 (5분 단위)' 가운데 정렬 + 물방울 버튼). 글자·값·id/aria·선택 로직 불변, 모양만. 롤백: 이 블록 삭제(또는 PR revert). 선택=진한 파랑 물방울+굵은 링(색에만 의존하지 않음), 흰 글자 대비 ≥4.9:1 */ .time-wheel .time-pick{text-align:center} .time-wheel .time-pick-label{justify-content:center;margin:0 0 10px;text-align:center;flex-wrap:wrap;row-gap:0} .time-wheel .time-colon{align-self:center;padding-top:0} .time-wheel .chip-grid{align-items:center;gap:10px;padding:8px 6px 10px} .time-wheel .chip{position:relative;flex:none;width:60px;min-width:60px;height:60px;min-height:60px;margin-inline:auto;padding:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;border-radius:50%;border:1.5px solid #9cc6f2;color:var(--navy);font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;isolation:isolate;overflow:hidden; background:radial-gradient(circle at 50% 118%,#a9d6ff 0,rgba(169,214,255,0) 62%),linear-gradient(160deg,#f6fbff 0,#d6ebff 100%); box-shadow:inset 0 -6px 10px rgba(79,150,230,.30),inset 0 3px 5px rgba(255,255,255,.95),0 6px 12px rgba(27,111,206,.20),0 1px 2px rgba(15,39,71,.14); transition:transform .15s ease,box-shadow .15s ease} .time-wheel .chip::before{content:"";position:absolute;top:7%;left:15%;width:44%;height:28%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.15));transform:rotate(-24deg);pointer-events:none;z-index:-1} .time-wheel .chip:hover{background:radial-gradient(circle at 50% 118%,#8fc7fb 0,rgba(143,199,251,0) 62%),linear-gradient(160deg,#fff 0,#c8e3fc 100%);border-color:#6fa8e6;transform:translateY(-1px) scale(1.04)} .time-wheel .chip:active{transform:scale(.96)} .time-wheel .chip.is-selected{border-color:#0f4c9a;color:#fff; background:radial-gradient(circle at 50% 120%,#4d9bf0 0,rgba(77,155,240,0) 60%),linear-gradient(160deg,#1f6fcf 0,#0f4c9a 100%); box-shadow:inset 0 -7px 12px rgba(5,40,100,.40),inset 0 3px 5px rgba(255,255,255,.35),0 0 0 3px rgba(27,111,206,.28),0 8px 16px rgba(27,111,206,.40)} .time-wheel .chip.is-selected::before{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.05))} .time-wheel .chip:focus-visible{outline:3px solid var(--navy);outline-offset:3px} @media(max-width:360px){.time-wheel .chip{width:54px;min-width:54px;height:54px;min-height:54px;font-size:1.1rem}} @media(prefers-reduced-motion:reduce){.time-wheel .chip{transition:none}.time-wheel .chip:hover,.time-wheel .chip:active{transform:none}} /* 2026-10-10 항공편: 항공사 칩 9개 → 선택 막대 1개 + 세로 목록 (flight_dropdown) */ .airline-select{position:relative;margin-bottom:10px} .airline-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:54px;padding:8px 16px;border:1.5px solid #9cb3c9;border-radius:14px;background:#fff;color:#4b5b6b;font:inherit;font-size:1.05rem;font-weight:700;text-align:left;cursor:pointer;box-shadow:0 1px 2px #0f274714;transition:border-color .15s,box-shadow .15s} .airline-trigger.has-value{color:var(--navy);font-weight:800} .airline-trigger:hover{border-color:var(--navy)} .airline-trigger[aria-expanded="true"]{border-color:var(--navy);box-shadow:0 0 0 3px #0f274720} .airline-trigger:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .airline-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .airline-caret{flex:none;color:var(--navy);transition:transform .18s} .airline-trigger[aria-expanded="true"] .airline-caret{transform:rotate(180deg)} .airline-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;display:flex;flex-direction:column;gap:2px;max-height:min(340px,56vh);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1.5px solid #9cb3c9;border-radius:14px;box-shadow:0 14px 32px #0f274733;scrollbar-width:thin} .airline-list[hidden]{display:none} .airline-list:focus{outline:none} .airline-list:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .airline-opt{display:flex;align-items:center;gap:14px;min-height:48px;padding:6px 14px;border-radius:10px;color:var(--navy);font-size:1rem;cursor:pointer} .airline-opt-code{flex:none;min-width:2.4em;font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:.02em} .airline-opt-name{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .airline-opt.is-active{background:#eaf3ff;box-shadow:inset 0 0 0 2px #9cc6f2} .airline-opt.is-selected{background:var(--navy);color:#fff} .airline-opt.is-selected .airline-opt-name{font-weight:700} .airline-opt.is-selected::after{content:"✓";margin-left:auto;font-weight:800} .airline-opt.is-selected.is-active{box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--accent-text)} @media(prefers-reduced-motion:reduce){.airline-trigger,.airline-caret{transition:none}} /* 2026-10-10 fasttrack_payment_ref (Su 시안): 결제 단계 = 위쪽 하늘색 면(왼쪽 제목·요약·금액, 오른쪽 마스코트 배경) + 아래쪽 흰 판(결제 방법 3종·버튼·이메일 안내·카카오/닫기). 글자는 모두 실제 HTML 텍스트이고 마스코트와 겹치지 않는다(제목 칸 오른쪽을 마스코트 폭만큼 비움, 요약·금액은 마스코트 아래 줄). 문구·금액·결제 동작은 그대로. fasttrack_payment_bg(#457)의 마스코트 이미지를 이어 쓰며 그 배치 규칙을 대체한다. */ .vip-popup .vp-success{padding:0;gap:0;background:#fff;overflow:hidden} .vip-popup .vp-hero{position:relative;padding:26px 20px 30px;background:url(/ft-assets/pay-mascot-46892586.webp) no-repeat right 14px bottom 26px/auto 250px,linear-gradient(90deg,rgba(255,255,255,.92) 0,rgba(255,255,255,.6) 48%,rgba(255,255,255,0) 72%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 420%22 preserveAspectRatio=%22xMaxYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23a9d6f7%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23dff0fc%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f3f9fe%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%22600%22 height=%22420%22 fill=%22url%28%23s%29%22/%3E%3Cg fill=%22%23fff%22 opacity=%22.9%22%3E%3Cellipse cx=%22330%22 cy=%2270%22 rx=%2270%22 ry=%2220%22/%3E%3Cellipse cx=%22380%22 cy=%2258%22 rx=%2246%22 ry=%2220%22/%3E%3Cellipse cx=%22500%22 cy=%22150%22 rx=%2260%22 ry=%2216%22/%3E%3Cellipse cx=%22170%22 cy=%22130%22 rx=%2260%22 ry=%2214%22/%3E%3C/g%3E%3Cpath d=%22M0 400C140 380 330 392 600 372V420H0z%22 fill=%22%23f6ecd2%22/%3E%3Cpath d=%22M0 410C200 396 380 404 600 392V420H0z%22 fill=%22%23fbf4e2%22/%3E%3Cg fill=%22none%22 stroke=%22%237a5a35%22 stroke-width=%227%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M548 380C546 320 552 260 560 200%22/%3E%3Cpath d=%22M450 380C456 330 448 300 440 270%22/%3E%3C/g%3E%3Cg fill=%22%232f9a62%22%3E%3Cpath d=%22M560 200C530 170 495 178 478 196 505 188 538 190 560 200z%22/%3E%3Cpath d=%22M560 200C590 168 620 172 640 192 610 186 584 190 560 200z%22/%3E%3Cpath d=%22M560 200C545 165 560 138 580 124 576 150 570 176 560 200z%22/%3E%3Cpath d=%22M560 200C528 212 508 236 508 258 530 236 546 220 560 200z%22/%3E%3Cpath d=%22M560 200C592 214 612 238 610 262 590 236 574 220 560 200z%22/%3E%3Cpath d=%22M440 270C418 252 392 256 380 270 402 266 424 266 440 270z%22/%3E%3Cpath d=%22M440 270C462 250 486 252 500 266 478 262 456 264 440 270z%22/%3E%3Cpath d=%22M440 270C430 246 440 228 456 218 452 238 446 254 440 270z%22/%3E%3C/g%3E%3Cg transform=%22translate%2860 120%29 rotate%28-14%29%22 fill=%22%23fff%22 stroke=%22%239fb7d6%22 stroke-width=%221.5%22%3E%3Cpath d=%22M0 8 70 2 92 -4 70 10 14 16z%22/%3E%3Cpath d=%22M30 6 52 -14 60 -12 48 8z%22 fill=%22%232f7be8%22 stroke=%22none%22/%3E%3C/g%3E%3C/svg%3E") right bottom/cover no-repeat,#e6f2fc;color:var(--navy)} .vip-popup .vp-success h2{margin:0 0 16px;padding-right:48%;font-size:1.9rem;line-height:1.25;font-weight:800;color:var(--navy);text-align:left;letter-spacing:-.02em} .vip-popup .vp-h-main,.vip-popup .vp-h-sub{display:block} .vip-popup .vp-h-sub{margin-top:4px;font-size:1.15rem;font-weight:700;color:#24344d} .vip-popup .vp-success .vp-summary{margin:0;max-width:44%;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.78);border:1px solid #d3e3f6;text-align:left;color:var(--navy);font-size:.88rem;line-height:1.55} .vip-popup .vp-ico-plane{width:30px;height:30px;flex:none;color:#1a6fe0;margin-top:2px} .vip-popup .vp-summary-text{display:grid;min-width:0;overflow-wrap:anywhere} .vip-popup .vp-summary-main{font-weight:800} .vip-popup .vp-amount-label{margin:18px 0 0;font-size:.95rem;font-weight:600;color:#3a4a62} .vip-popup .vp-success .total span:first-child{font-size:inherit;margin:0;color:inherit} .vip-popup .vp-success .total{margin:2px 0 0;text-align:left;font-size:2.2rem;line-height:1.2;font-weight:800;color:#0b57b8} .vip-popup .vp-success .total span:last-child{margin-left:6px;font-size:1.15rem;font-weight:700;color:var(--navy)} .vip-popup .vp-pane{position:relative;margin-top:-16px;padding:22px 18px 22px;border-radius:24px 24px 0 0;background:#fff;display:grid;gap:14px} .vip-popup .vp-pane .vp-set{margin:0} .vip-popup .vp-pane .vp-paymethods{gap:10px} .vip-popup .vp-pane .vp-paymethods legend{margin-bottom:8px;font-size:1.15rem;font-weight:800;color:var(--navy)} .vip-popup .vp-method{gap:14px;min-height:64px;padding:0 18px;border:1px solid #cfdcee;border-radius:16px;font-size:1.05rem;font-weight:700;color:var(--navy)} .vip-popup .vp-method input{width:26px;height:26px;accent-color:#1a6fe0} .vip-popup .vp-method:has(input:checked){border-color:#2f7be8;box-shadow:inset 0 0 0 1px #2f7be8;background:#eef5ff} .vip-popup .vp-ico-method{width:38px;height:38px;flex:none} .vip-popup .vp-success .vp-pay-btn{min-height:64px;border-radius:999px;font-size:1.15rem;font-weight:800;box-shadow:0 12px 26px rgba(19,27,42,.22)} .vip-popup .vp-success .vp-mail-note{margin:0;display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:#eef4fc;text-align:left;font-size:.9rem;line-height:1.6;color:#24344d} .vip-popup .vp-mail-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#dcebfb} .vip-popup .vp-mail-ico .vp-ico{width:28px;height:28px} .vip-popup .vp-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:12px} .vip-popup .vp-success .vp-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;border-radius:999px;font-weight:700;color:var(--navy);background:#fff} .vip-popup .vp-success .vp-close-btn{color:#3a4a62} .vip-popup .vp-ico-kakao{width:34px;height:34px} @media(max-width:480px){ .vip-popup .vp-hero{padding:20px 16px 30px;background-position:right 4px top 10px,0 0,right bottom,0 0;background-size:auto 152px,100% 100%,cover,auto} .vip-popup .vp-success .vp-summary{max-width:none;padding:12px 14px;gap:10px;font-size:.84rem} .vip-popup .vp-ico-plane{width:24px;height:24px} .vip-popup .vp-success h2{padding-right:42%;min-height:132px;margin-bottom:6px;font-size:1.5rem} .vip-popup .vp-h-sub{font-size:1rem} .vip-popup .vp-success .total{font-size:2rem} .vip-popup .vp-pane{padding:20px 14px 20px} .vip-popup .vp-method{min-height:60px;padding:0 14px;gap:12px} .vip-popup .vp-success .vp-mail-note{padding:14px;gap:12px;font-size:.85rem} .vip-popup .vp-mail-ico{width:44px;height:44px} .vip-popup .vp-actions{grid-template-columns:1.25fr 1fr;gap:10px} .vip-popup .vp-success .vp-actions .btn{min-height:56px;font-size:.95rem;padding-inline:10px} .vip-popup .vp-ico-kakao{width:30px;height:30px} } @media(max-width:340px){.vip-popup .vp-success .vp-summary{max-width:none}.vip-popup .vp-success h2{padding-right:0}.vip-popup .vp-actions{grid-template-columns:1fr}} /* 2026-10-21 fasttrack_cards_match_image (Su "Làm y như hình"): 시안대로 — 글자는 왼쪽, 마스코트 일러스트는 카드 오른쪽 위에 두고 왼쪽(글자 쪽)으로 부드럽게 사라지게. 이전의 '카드 상단 통이미지' 방식(#585) 대체 */ .price-card-bg{display:flex;flex-direction:column;padding:20px 18px 18px;overflow:hidden;isolation:isolate} .price-card-bg.price-card-popular{overflow:visible} .price-card-bg::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;left:auto;height:auto;margin:0;width:44%;background:var(--art) right top/auto 70% no-repeat;border-radius:0 24px 24px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)} .price-card-bg.price-card-popular::before{border-radius:0 22px 22px 0} .price-card-bg>*:not(.badge-popular){margin-left:0;margin-right:0} .price-card-bg>.btn{width:100%;margin-top:auto} .price-card-bg h3{font-size:2rem} .price-card-bg .amt{font-size:2.6rem;white-space:nowrap} .price-card-bg>p{max-width:56%;margin:10px 0 14px;text-shadow:none} .price-card-arrival{--ar:720/692;--aw:60%;--art:url(/ft-assets/ft-card-arrival-3d83bc4f.jpg)} .price-card-departure{--ar:720/633;--aw:58%;--art:url(/ft-assets/ft-card-departure-833d1a89.jpg)} .price-card-lounge{--ar:720/691;--aw:68%;--art:url(/ft-assets/ft-card-lounge-f3fe1d43.jpg)} @media(max-width:380px){.price-card-bg .amt{font-size:2.3rem}.price-card-bg h3{font-size:1.8rem}} @media(min-width:640px){.price-card-bg>p{max-width:none}.price-card-bg .amt{font-size:2.2rem}} .price-card-departure>p{max-width:54%} /* 2026-10-21 fasttrack_image_size_smaller (Su "Cho ảnh nhỏ lại"): 일러스트 폭 62%→44%, 높이 100%→70%로 축소 — 위치(오른쪽 위)·페이드는 유지 */ /* 2026-10-21 시안(img_82bb90bf4765) — 마지막 페이지(푸터) 회사 정보 카드 */ .site-footer{padding-top:8px} /* 2026-10-21 fasttrack_lounge_art (Su 'phòng chờ.svg'): 라운지 카드 = 새 정사각 마스코트(여행가방·라운지 간판·라떼). 잘리지 않게 contain, 왼쪽 페이드는 약하게 */ .price-card-lounge::before{width:46%;background-size:contain;background-position:right top;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%);mask-image:linear-gradient(90deg,transparent 0,#000 10%)} .price-card-lounge>p{max-width:54%} @media(min-width:640px){.price-card-lounge::before{width:40%}.price-card-lounge>p{max-width:58%}} /* 2026-10-21 fasttrack_arrival_departure_art (Su 'nhập cảnh.svg'/'xuất cảnh.svg'): 입국·출국 카드도 라운지처럼 새 마스코트를 잘리지 않게 contain으로 표시 */ .price-card-arrival::before,.price-card-departure::before{width:46%;background-size:contain;background-position:right top;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%);mask-image:linear-gradient(90deg,transparent 0,#000 10%)} .price-card-arrival>p,.price-card-departure>p{max-width:54%} @media(min-width:640px){.price-card-arrival::before,.price-card-departure::before{width:40%}.price-card-arrival>p,.price-card-departure>p{max-width:58%}} /* 2026-10-21 fasttrack_mascot_alignment (Su "ở điện thoại khách xem cũng bị lệch"): 3 마스코트를 같은 규칙으로 고정 — 카드 오른쪽 위 모서리(right top), 그림 비율(--ar) 그대로 잘림 없이(100% 100%), 폭은 모든 카드 같은 값(--mw). 모바일에서는 '원 · 성인'을 금액 아래 줄로 내려 그림과 글자가 겹치지 않게 한다. */ .price-card-arrival::before,.price-card-departure::before,.price-card-lounge::before{top:0;right:0;bottom:auto;left:auto;height:auto;width:var(--mw,40%);aspect-ratio:var(--ar);background-size:100% 100%;background-position:right top;background-repeat:no-repeat} @media(max-width:639px){ .price-card-arrival::before,.price-card-departure::before,.price-card-lounge::before{--mw:38%} .price-card-bg .amt small{display:block;margin-top:2px;font-size:.82rem;line-height:1.3} .price-card-arrival>p,.price-card-departure>p,.price-card-lounge>p{max-width:60%} } /* 2026-10-21 fasttrack_sprite_bigger (Su "Cho to ra xíu hơi nhỏ nạ"): 3 마스코트를 조금 더 크게 — 모바일 38%→46%, 데스크톱 40%→48%. 위치(right top)·비율(--ar)·잘림 없음은 그대로. '원 · 성인'은 모든 폭에서 금액 아래 줄로 내려 그림과 겹치지 않게 한다. */ .price-card-arrival::before,.price-card-departure::before,.price-card-lounge::before{--mw:48%} .price-card-bg .amt small{display:block;margin-top:2px;font-size:.88rem;line-height:1.3} @media(max-width:639px){ .price-card-arrival::before,.price-card-departure::before,.price-card-lounge::before{--mw:46%} .price-card-bg .amt small{font-size:.82rem} } /* 회사 정보: 다른 섹션(.section h2 / .faq details)과 같은 카드·제목 규칙, 겹침 없는 단순 레이아웃 */ .company-info{padding:8px 0 12px} .company-info .ci-head{display:flex;align-items:center;gap:8px} .ci-icon{width:22px;height:22px;flex:none;color:var(--navy)} .ci-body{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:12px 14px} .ci-notice{margin:0 0 10px;padding:9px 12px;border-radius:12px;background:#E8F1FD;color:var(--navy);font-weight:600;font-size:.8rem;line-height:1.45;word-break:keep-all} .ci-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0} .ci-cell{min-width:0;padding:0} .ci-wide{grid-column:1/-1} .ci-cell dt{margin:0 0 2px;color:var(--muted);font-size:.72rem;font-weight:500} .ci-cell dd{margin:0;color:var(--text);font-size:.82rem;font-weight:600;line-height:1.45;overflow-wrap:anywhere;word-break:keep-all} .ci-cell dd a{color:inherit;text-decoration:none;display:inline} .ft-copy{margin:0;text-align:center} @media(max-width:420px){.ci-body{padding:10px 12px}.ci-grid{gap:8px 10px}.ci-cell dd{font-size:.78rem;letter-spacing:-.02em}} /* 2026-10-21 fasttrack_company_contrast (Su "làm nền hoặc màu cho nổi bật, chữ dễ đọc"): 회사 정보 블록을 어두운 네이비 배경 + 흰 글자로 주변 흰 카드와 구분. 본문 ≥.9375rem(15px)·라벨 ≥.875rem(14px), 대비 WCAG AA 이상. */ .company-info .ci-body{background:#0F2747;border-color:#0F2747;color:#FFFFFF;padding:16px 16px;box-shadow:0 10px 28px rgba(15,39,71,.22)} .company-info .ci-notice{background:#FFF2C6;color:#0F2747;font-size:.9375rem;font-weight:700;line-height:1.5;padding:10px 12px} .company-info .ci-grid{gap:14px 16px} .company-info .ci-cell dt{color:#BFD3EE;font-size:.875rem;font-weight:600;line-height:1.4;margin-bottom:3px} .company-info .ci-cell dd{color:#FFFFFF;font-size:1rem;font-weight:700;line-height:1.5;letter-spacing:0} .company-info .ci-cell dd a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px} @media(max-width:420px){.company-info .ci-body{padding:14px 14px}.company-info .ci-grid{gap:12px 12px}.company-info .ci-cell dd{font-size:.9375rem;letter-spacing:0}.company-info .ci-cell dt{font-size:.875rem}} /* 2026-10-21 fasttrack_yellow_banner_fix (Su "Khung nền to ra, vì khung vàng che mất chữ"): `.ft-footer p{margin:0}`(특이도 0,1,1)가 `.ci-notice` 의 아래 여백을 지워 노란 안내 박스가 아래 라벨(상호·대표)에 딱 붙어 글자를 가리는 것처럼 보였다. 노란 박스를 더 크게(안쪽 여백↑·글자 16px) 하고 아래 여백을 특이도 높게 되살린다. 네이비 배경·대비(AA)·무겹침·무가로스크롤은 그대로. */ .company-info .ci-body .ci-notice{display:block;box-sizing:border-box;width:100%;margin:0 0 22px;padding:18px 20px;border-radius:14px;font-size:1rem;line-height:1.6;text-align:center;overflow:visible;position:static} .company-info .ci-body{padding:20px 18px} @media(max-width:420px){.company-info .ci-body{padding:16px 12px}.company-info .ci-body .ci-notice{padding:16px 14px;margin-bottom:20px;font-size:.9375rem;line-height:1.6}} /* 가격이 높아도 고르는 이유 (why-us) — 24시간 상주·공항 대응·간편 예약 */ .why-lead{margin:6px 0 14px} .why-reasons{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px} .why-reason{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:14px;box-shadow:0 4px 16px rgba(15,39,71,.05)} .why-reason-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--tint-blue);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:1.4rem} .why-reason strong{display:block;color:var(--navy);font-size:1rem;line-height:1.35;margin-bottom:2px} .why-reason span:not(.why-reason-ic){display:block;color:var(--muted);font-size:.9rem;line-height:1.5} .why-compare-title{margin:6px 0 0;font-size:1rem;color:var(--navy)} .why-cta{margin:16px 0 0} .why-cta .btn{width:100%;justify-content:center} @media(min-width:760px){.why-reasons{grid-template-columns:repeat(3,1fr)}.why-reason{flex-direction:column}.why-cta .btn{width:auto}} /* 2026-10-21 패스트트랙 랜딩: 가격 대신 '24시간 상주 · 다이렉트'를 전면에. 모션은 transform/opacity 만 쓰고 prefers-reduced-motion 에서는 멈춘다 */ .hero .hero-promise{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 16px;padding:14px 6px;background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:20px;box-shadow:0 8px 24px rgba(24,88,200,.10);animation:promise-in .7s cubic-bezier(.16,1,.3,1) both .15s} .promise-item{display:flex;align-items:center;gap:10px;padding:0 10px;min-width:0} .promise-item+.promise-item{border-left:1px solid #dbe4f3} .promise-ic{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--vip-tint);color:var(--vip-blue);display:inline-flex;align-items:center;justify-content:center} .promise-ic .ic{width:24px;height:24px} .promise-clock::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,var(--vip-blue) 0 25%,transparent 25% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:promise-spin 6s linear infinite} .promise-live{position:absolute;right:-1px;top:-1px;width:10px;height:10px;border-radius:50%;background:#1E8E5A;box-shadow:0 0 0 0 rgba(30,142,90,.5);animation:promise-pulse 1.8s ease-out infinite} .promise-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25} .promise-txt b{font-size:1.02rem;font-weight:800;color:var(--vip-blue)} .promise-txt i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--muted);margin-top:2px} .promise-direct .promise-ic{animation:promise-nudge 2.6s ease-in-out infinite} @keyframes promise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes promise-spin{to{transform:rotate(360deg)}} @keyframes promise-pulse{0%{box-shadow:0 0 0 0 rgba(30,142,90,.5)}70%,100%{box-shadow:0 0 0 9px rgba(30,142,90,0)}} @keyframes promise-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}} @media(max-width:380px){.promise-ic{width:38px;height:38px}.promise-ic .ic{width:20px;height:20px}.promise-item{gap:7px;padding:0 6px}.promise-txt b{font-size:.95rem}.promise-txt i{font-size:.68rem}} .motion-stage{display:grid;gap:10px;margin:4px 0 16px} .motion-card{background:linear-gradient(180deg,#f3f8ff,#fff);border:1px solid #dbe4f3;border-radius:18px;padding:16px;display:flex;align-items:center;gap:14px;box-shadow:0 6px 18px rgba(24,88,200,.07)} .motion-card p{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted)} .motion-card p b{display:block;color:var(--navy);font-size:1.05rem;margin-bottom:2px} .dial{position:relative;flex:none;width:84px;height:84px;border-radius:50%;border:3px solid var(--vip-blue);background:#fff;box-shadow:inset 0 0 0 5px #eaf1fd;display:flex;align-items:center;justify-content:center} .dial-core{position:relative;z-index:1;background:#fff;border-radius:50%;padding:4px;font-weight:800;color:var(--vip-blue);font-size:1.05rem} .dial-hand{position:absolute;left:50%;top:50%;width:3px;height:34px;margin-left:-1.5px;margin-top:-34px;background:linear-gradient(180deg,var(--vip-blue),rgba(24,88,200,.15));border-radius:3px;transform-origin:50% 100%;animation:promise-spin 8s linear infinite;animation-play-state:paused} .is-visible .dial-hand,.is-visible .flow-dot{animation-play-state:running} .flow{flex:none;width:150px;display:flex;align-items:center;gap:0} .flow-node{flex:none;font-size:.72rem;font-weight:800;padding:7px 9px;border-radius:999px;background:#fff;border:1px solid #cdd9ee;color:var(--navy)} .flow-node-us{background:var(--vip-blue);border-color:var(--vip-blue);color:#fff} .flow-line{position:relative;flex:1;height:2px;background:repeating-linear-gradient(90deg,#9db8e6 0 5px,transparent 5px 9px)} .flow-dot{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--vip-blue);animation:flow-move 2.2s ease-in-out infinite;animation-play-state:paused} @keyframes flow-move{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}} @media(min-width:700px){.motion-stage{grid-template-columns:1fr 1fr}} @media(prefers-reduced-motion:reduce){.hero .hero-promise,.promise-clock::before,.promise-live,.promise-direct .promise-ic,.dial-hand,.flow-dot{animation:none}.flow-dot{left:calc(50% - 5px);opacity:1}} /* 2026-10-22 fasttrack_redesign (대표 시안 img_aa9f39948390.jpg): 히어로를 시안 배치로 — 제목+마스코트 / 2칸 카드(24시간 상주·직접 운영) / 남색 지연 배너 / 3줄 안내 / 3단계 진행. 문구·링크·연락처·사업자 정보는 그대로 */ .ftr-hero{--ftr-navy:#0b2a5b;--ftr-blue:#1858c8;--ftr-sky:#dff0ff} .ftr-hero .ftr-top{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:0;margin:0 0 14px} .ftr-hero .ftr-eyebrow{display:flex;align-items:center;gap:8px;color:var(--ftr-blue);letter-spacing:.3em;font-size:.72rem;font-weight:800;margin:4px 0 10px} .ftr-hero .ftr-eyebrow-line{flex:0 1 38px;height:2px;background:linear-gradient(90deg,var(--ftr-blue),transparent)} .ftr-hero .ftr-eyebrow-plane{width:18px;height:18px;color:var(--ftr-blue)} .ftr-hero h1,.ftr-hero h2.ftr-title{font-size:clamp(1.7rem,8vw,2.6rem);font-weight:900;line-height:1.28;margin:0 0 12px;color:var(--ftr-navy);letter-spacing:-.03em} .ftr-hero .ftr-pill{display:inline-block;background:rgba(190,224,255,.85);color:var(--ftr-navy);border-radius:999px;padding:0 .35em;margin-left:-.1em} .ftr-hero .ftr-sub{font-size:clamp(.8rem,3.4vw,1.05rem);font-weight:700;color:#3f4f6a;margin:0} .ftr-hero .ftr-mascot{display:block;width:100%;height:auto;margin:0;-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 52%,#000 62%,transparent 100%)} .ftr-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px} .ftr-card{border-radius:22px;overflow:hidden;border:1px solid #d6e6fa;box-shadow:0 10px 26px rgba(24,88,200,.12);display:flex;flex-direction:column} .ftr-card-blue{background:linear-gradient(180deg,#d7eafd,#eaf4ff)} .ftr-card-yellow{background:linear-gradient(180deg,#fff1c6,#fff8e2);border-color:#f3e2a6} .ftr-card img{display:block;width:100%;height:auto;aspect-ratio:378/204;object-fit:cover} .ftr-card-body{background:#fff;border-radius:18px 18px 0 0;margin-top:-6px;position:relative;padding:12px 8px 14px;text-align:center;display:flex;flex-direction:column;gap:3px;flex:1} .ftr-card-body b{font-size:clamp(1.05rem,4.6vw,1.5rem);font-weight:900;color:var(--ftr-navy);line-height:1.2} .ftr-card-body span{font-size:clamp(.74rem,3vw,.95rem);color:#5a6b82;font-weight:600} .ftr-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:14px 16px;border-radius:20px;background:linear-gradient(180deg,#123a7a,#0b2a5b);color:#fff;box-shadow:0 8px 22px rgba(11,42,91,.3)} .ftr-banner-ic{flex:none;width:40px;height:40px;border-radius:50%;background:#58c1f2;color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(255,255,255,.22)} .ftr-banner-ic .ic{width:24px;height:24px} .ftr-banner-text{flex:1;text-align:center;font-size:clamp(1rem,4.6vw,1.45rem);font-weight:900;letter-spacing:-.02em} .ftr-banner-plane{flex:none;color:#cfe6ff} .ftr-banner-plane .ic{width:34px;height:34px} .ftr-rows{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px} .ftr-row{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.96);border:1px solid #e1e8f2;border-radius:18px;padding:10px 14px;color:var(--ftr-navy);box-shadow:0 4px 14px rgba(24,88,200,.07)} .ftr-row img{flex:none;width:clamp(64px,18vw,92px);height:auto;border-radius:12px} .ftr-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ftr-row-text b{font-size:clamp(.98rem,4.1vw,1.25rem);font-weight:900;color:var(--ftr-navy)} .ftr-row-text span{font-size:clamp(.8rem,3.2vw,1rem);color:#5a6b82} .ftr-chev{flex:none;width:22px;height:22px;color:#8fa3c4} .ftr-hero .ftr-steps-title{font-size:clamp(1.05rem,4.4vw,1.3rem);font-weight:900;color:var(--ftr-navy);margin:0 0 10px} .ftr-steps{list-style:none;margin:0 0 18px;padding:0;display:flex;align-items:center;gap:6px} .ftr-steps li:not(.ftr-step-arrow){flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #e1e8f2;border-radius:16px;padding:10px 8px;font-size:clamp(.74rem,3vw,.98rem);font-weight:800;color:var(--ftr-navy);white-space:nowrap;box-shadow:0 4px 12px rgba(24,88,200,.06)} .ftr-steps .ic{width:20px;height:20px;flex:none} .ftr-step-n{flex:none;width:30px;height:30px;border-radius:50%;background:#d7eafd;color:var(--ftr-blue);font-size:.78rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center} .ftr-step-arrow{flex:none;font-size:1.3rem;font-weight:900;color:var(--ftr-navy)} @media(max-width:560px){.ftr-steps{gap:4px}.ftr-steps li:not(.ftr-step-arrow){flex-direction:column;justify-content:center;text-align:center;gap:5px;padding:10px 4px;font-size:clamp(.74rem,3.3vw,.9rem)}.ftr-step-n{width:26px;height:26px;font-size:.7rem}.ftr-step-arrow{font-size:1.1rem}} @media(max-width:380px){.ftr-steps li:not(.ftr-step-arrow){padding:8px 3px;gap:4px}.ftr-step-n{width:24px;height:24px;font-size:.68rem}.ftr-steps .ic{display:none}} @media(min-width:960px){ .ftr-hero.hero{display:block} .ftr-hero.hero>*{grid-column:auto} .ftr-hero .ftr-top{grid-template-columns:1.2fr .8fr} .ftr-hero .ftr-cards,.ftr-hero .ftr-banner,.ftr-hero .ftr-rows,.ftr-hero .ftr-steps,.ftr-hero .ftr-steps-title{max-width:760px;margin-inline:auto} .ftr-hero .ftr-rows,.ftr-hero .ftr-banner,.ftr-hero .ftr-cards{margin-bottom:16px} .ftr-hero .hero-cta{max-width:760px;margin-inline:auto} .ftr-hero .stat-strip{max-width:760px;margin-inline:auto} } /* WHY DANANG REPORTER: 시안의 흰 둥근 카드 줄 + 파란 원형 아이콘 */ .why-reason{border-radius:20px;border-color:#e1e8f2;box-shadow:0 4px 14px rgba(24,88,200,.07)} .why-reason-ic{border-radius:50%;background:#d7eafd;color:#1858c8} .hero .ftr-banner,.ftr-hero .ftr-banner{color:#fff} .hero .ftr-banner .ftr-banner-text,.ftr-hero .ftr-banner .ftr-banner-text{color:#fff} .hero .ftr-banner .ftr-banner-ic,.ftr-hero .ftr-banner .ftr-banner-ic{color:#fff} .ftr-hero .ftr-mascot{-webkit-mask-image:none;mask-image:none;border-radius:28px;box-shadow:0 10px 28px rgba(24,88,200,.14)} @media(min-width:960px){.ftr-hero .ftr-mascot{max-width:380px;justify-self:end}.ftr-hero .ftr-card img{aspect-ratio:378/190}} /* 2026-10-22 fasttrack_lower_section: 시안 디자인은 맨 위 히어로가 아니라 아래쪽(#ftr-lower, 예약폼 뒤·WHY 앞)에 둔다. 히어로는 기존 디자인 */ .ftr-lower{margin-top:8px} .ftr-lower.section{padding-top:28px} .ftr-lower .ftr-top{margin-top:0} /* 2026-10-22 fasttrack_3svg_consult2h: 마스코트·2칸 카드 이미지를 투명 배경 SVG(정사각)로 교체 — 자르지 않고 contain */ .ftr-hero .ftr-mascot{aspect-ratio:1/1;object-fit:contain;box-shadow:none;border-radius:0;max-width:300px;justify-self:end} .ftr-hero .ftr-card img{aspect-ratio:1/1;max-height:210px;object-fit:contain;padding:6px 0 0} @media(min-width:960px){.ftr-hero .ftr-mascot{max-width:340px}.ftr-hero .ftr-card img{aspect-ratio:1/1;max-height:230px}} /* 2026-10-22 fasttrack_consult2h_desktop_spacing: 데스크톱에서 제목 글과 마스코트 스티커가 양끝으로 벌어지던 것을 하단 카드·배너와 같은 760px 칼럼 안에 모아 가깝게 붙인다. 모바일(<960px)은 그대로 */ @media(min-width:960px){ .ftr-hero.ftr-lower .ftr-top{max-width:760px;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(220px,300px);column-gap:20px;align-items:center} .ftr-hero.ftr-lower .ftr-top-text{justify-self:end;text-align:left} .ftr-hero.ftr-lower .ftr-mascot{max-width:300px;width:100%;justify-self:start} .ftr-hero.ftr-lower .ftr-card img{max-height:190px} .ftr-hero.ftr-lower .ftr-card-body{padding-top:10px} } .ft-extras{margin-top:18px;padding:16px 18px;border:1px solid var(--card-border);border-radius:var(--radius);background:var(--card)} .ft-extras h3{margin:0 0 8px;font-size:1.05rem;color:var(--navy)} .ft-extras ul{margin:0;padding-left:18px} .ft-extras li{margin:4px 0} .price-card[hidden],.dep-opt[hidden]{display:none} /* 2026-10-22 fasttrack_rates_design (Su: 시안 img_6ba84d379ea6 "dựa vào ảnh thiết kế dễ xem") — 요금표 카드를 시안처럼: 제목+마스코트(오른쪽 위), 성인/소아/유아 3줄(아이콘·라벨·오른쪽 정렬 금액, 무료는 초록 알약), 안내 한 줄, 버튼. 금액 숫자는 data-rate 로 /api/prices 값이 들어간다. */ .prices.prices-3 .price-card-bg{container-type:inline-size;padding:20px 18px 18px} .price-card-bg .pc-head{min-height:44cqw} .price-card-bg .pc-head .tag{margin:0} .price-card-bg .pc-head h3{margin:6px 0 0;font-size:2.4rem;line-height:1.1;color:var(--navy)} .rate-list{margin:8px 0 0;padding:0;display:block} .rate-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:6px 0;border-bottom:1px solid #E6EBF3} .rate-row:last-child{border-bottom:0} .rate-row dt{display:flex;align-items:center;gap:12px;margin:0;font-size:1rem;font-weight:600;color:#344054} .rate-row dd{margin:0} .rate-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#E8F0FF;color:#1B5FD0;flex:none} .rate-ic .ic{width:22px;height:22px;vertical-align:0} .rate-val{font-size:1.4rem;font-weight:800;color:#0B1B33;font-variant-numeric:tabular-nums;white-space:nowrap} .rate-val b{font-weight:800} .rate-free{display:inline-block;min-width:76px;padding:6px 18px;border-radius:999px;background:#2E9E55;color:#fff;font-size:1rem;font-weight:700;text-align:center} .price-card-bg>p.rate-note{max-width:none;margin:8px 0 12px;text-align:center;color:#475467;font-size:.9rem;line-height:1.4;text-shadow:none;word-break:keep-all} .price-card-bg>.btn{margin-top:auto} .price-card-bg>.rate-list+.btn{margin-top:20px} .price-card-departure .rate-list+.rate-note+.btn,.price-card-lounge .rate-list+.rate-note+.btn{margin-top:auto} @media(max-width:380px){.rate-val{font-size:1.25rem}.rate-free{min-width:68px;padding:5px 14px}.price-card-bg .pc-head h3{font-size:2.1rem}} /* ---- 요금표 4칸: 입국 · 출국 · 라운지 · Combo(왕복) (2026-10-23 Su: "combo 도 한 칸으로 4개") ---- */ .prices.prices-4{grid-template-columns:1fr} @media(min-width:640px){.prices.prices-4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}.prices.prices-4 .price-card-popular{transform:none}} .price-card-combo{border:2px solid #F5B942;display:flex;flex-direction:column;padding:20px 18px 18px} /* 2026-10-23 combo_mascot_svg (Su 첨부 다낭특파원.svg): Combo 왕복 카드 오른쪽 위에 공항 마스코트(1:1, 투명 배경)를 다른 3칸과 같은 규칙(right top, 비율 유지)으로 넣는다. */ .price-card-combo{container-type:inline-size;overflow:hidden;isolation:isolate} .price-card-combo::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:60%;aspect-ratio:508/524;background:url(/ft-assets/ftr-combo-mascot-t.webp) right top/100% 100% no-repeat;pointer-events:none} @container (min-width:340px){.price-card-combo::before{width:56%}.price-card-combo .pc-head{min-height:58cqw}} .price-card-combo .pc-head{min-height:62cqw;margin-bottom:4px} .price-card-combo .pc-head h3 small{display:block;margin:4px 0 0} .price-card-combo .pc-head h3{margin:6px 0 0;font-size:1.65rem;line-height:1.15;color:var(--navy)} .price-card-combo h3 small{font-size:.8rem;font-weight:700;color:var(--muted);margin-left:6px;letter-spacing:0} .price-card-combo .rate-old{color:#98A2B3;font-size:.85rem;font-weight:600;margin-right:4px} .price-card-combo>p.rate-note{max-width:none;margin:8px 0 12px;text-align:left;color:#475467;font-size:.9rem;line-height:1.4;word-break:keep-all} .price-card-combo .btn{margin-top:auto} /* 2026-10-24 Su: Combo 버튼 글자가 다른 칸 버튼보다 작았다 — 다른 3칸(.price-card-bg .btn)과 같은 크기·높이로 맞춘다 */ .price-card-combo .btn{width:100%;border-radius:999px;min-height:52px;font-size:.98rem;box-shadow:0 8px 20px rgba(15,39,71,.28)} .price-card-combo .btn .ic{width:18px;height:18px} /* 2026-10-22 fasttrack_sprite_fill (Su "kéo ảnh to ra xíu cho cân đối vì khoảng trắng khá nhiều"): 요금표 카드 3 마스코트를 더 키운다 — 모바일 46%→60%, 데스크톱 48%→56%. 제목 영역(.pc-head) 최소 높이를 그림 높이(폭×비율)에 맞춰 위쪽 흰 여백이 남지 않게 한다. 위치(right top)·비율·잘림 없음은 그대로. */ .price-card-arrival{--mwn:56;--arn:.961} .price-card-departure{--mwn:56;--arn:.879} .price-card-lounge{--mwn:56;--arn:.960} .price-card-arrival::before,.price-card-departure::before,.price-card-lounge::before{--mw:calc(var(--mwn)*1%)} .prices.prices-3 .price-card-arrival .pc-head,.prices.prices-3 .price-card-departure .pc-head,.prices.prices-3 .price-card-lounge .pc-head{min-height:calc(var(--mwn)*var(--arn)*1cqw)} @media(max-width:639px){ .price-card-arrival,.price-card-departure,.price-card-lounge{--mwn:60} } /* 2026-10-23 계좌이체 안내 박스 */ .vp-bank-box{display:grid;gap:4px;margin:0 0 10px;padding:12px;border-radius:12px;background:#fff;border:1px solid #cfe0f5;font-weight:600;line-height:1.5} .vp-bank-box strong{font-size:1.1rem;letter-spacing:.02em;word-break:break-all} .vp-status .vp-copy-account{margin:0 0 8px;min-height:44px} .vp-status .vp-pay-open{display:flex;width:100%;margin:2px 0 4px;text-align:center;justify-content:center} .vp-status p{margin:6px 0 0;font-weight:500;font-size:.88rem} /* 2026-10-26 QR 결제 안내 (chị Su: "Làm bản QR toss thật theo đơn"). 서버(/api/payment/qr)가 그린 QR + 금액 + 토스 결제창 열기 + 계좌이체 한 줄. */ .vp-pay-qr{display:grid;gap:8px;justify-items:center;margin:12px 0 4px;padding:14px 12px;border-radius:14px;background:#fff;border:1px solid #cfe0f5} .vp-pay-qr[hidden]{display:none} .vp-qr-title{margin:0;font-weight:800;font-size:1rem;text-align:center} .vp-qr-img{display:block;width:208px;height:208px;border-radius:10px;border:1px solid #e3e6eb;background:#fff} .vp-qr-amount{margin:0;font-weight:800;font-size:1.15rem} .vp-pay-qr .vp-pay-open{display:flex;width:100%;justify-content:center;text-align:center;margin:0;min-height:44px;align-items:center} .vp-qr-note{margin:0;font-size:.82rem;line-height:1.5;color:#4a5b72;text-align:center} /* 2026-10-24 팝업 재디자인 (Su 시안 img_add651fc20cd): 로고 머리글 + 1·2·3 단계 표시 + "언제 도착하시나요?" + 시·분 물방울 선택 + 선택한 시간 카드. 항공편·인원·예약자는 같은 팝업 아래 구역으로 이어진다. 값·id·검증·접수 흐름은 불변, 모양과 글자 배치만 바꿈. 롤백: 이 블록 삭제 + src/index.html #vipPopupForm 되돌리기(백업: ~/.hermes/reports/intake/backup-popup-redesign-fasttrack/) 또는 PR revert */ .vp-brandhead{align-items:center;margin-bottom:6px} .vp-logo{flex:none;width:44px;height:44px;border-radius:12px;object-fit:contain} .vp-brandtext{flex:1;min-width:0} .vp-brandhead .vp-brandtext h2{font-size:1.2rem;line-height:1.2} .vp-brandsub{margin:2px 0 0;font-size:.9rem;font-weight:600;color:#4a5b72} .vp-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:6px 0 10px;padding:0;position:relative} .vp-stepper{position:relative;text-align:center} .vp-stepper::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:2px;background:#d3deec;z-index:0} .vp-stepper:first-child::before{display:none} .vp-stepper.is-done::before,.vp-stepper.is-current::before{background:var(--accent-text)} .vp-stepper-btn{position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:transparent;font:inherit;cursor:pointer;color:#4a5b72} .vp-stepper-dot{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#e4eaf3;color:#4a5b72;font-weight:800;font-size:1rem;border:2px solid #fff;box-shadow:0 0 0 1px #d3deec} .vp-stepper-name{font-size:.82rem;font-weight:700;line-height:1.2} .vp-stepper.is-current .vp-stepper-dot{background:var(--accent-text);color:#fff;box-shadow:0 0 0 1px var(--accent-text),0 4px 10px #1b6fce44} .vp-stepper.is-current .vp-stepper-name{color:var(--accent-text)} .vp-stepper.is-done .vp-stepper-dot{background:#0f4c9a;color:#fff;box-shadow:0 0 0 1px #0f4c9a} .vp-stepper-btn:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px;border-radius:12px} .vip-popup>form>.vp-service{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:#f3f7fb;font-size:.82rem;line-height:1.45;color:#3b4a5f} .vp-sec{margin:0 0 6px;scroll-margin-top:8px} .vp-sec+.vp-sec{padding-top:14px;border-top:1px solid var(--card-border);margin-top:10px} .vp-sec-title{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:1.15rem;font-weight:800;color:var(--navy)} .vp-sec-title .step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--navy);color:#fff;font-size:.85rem;font-weight:800} .vp-ask-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px} .vp-ask-text{min-width:0;flex:1} .vp-ask{margin:0 0 6px;font-size:1.6rem;font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--navy)} .vp-ask-text .vp-flight-sub{display:block;margin:0;font-size:.85rem;font-weight:500;line-height:1.45;color:#4a5b72} .vp-ask-mascot{flex:none;width:96px;height:96px;object-fit:contain} .vp-datebox{margin:0 0 12px} .vp-datebox legend{font-size:1rem} .vp-times{display:grid;gap:14px} .vp-timebox[hidden]{display:none} .vp-timebox .time-dir{margin:0 0 10px} .vp-timebox .time-dir .req{color:#b42323} .vp-wheelbox.is-invalid .time-wheel .time-pick{border-color:var(--err);box-shadow:0 0 0 2px #d6454526} .vp-wheelbox .time-wheel{max-width:none;margin:0 0 12px} .vp-wheelbox .time-wheel .chip-grid{max-height:280px} .vp-arrow{display:block;width:100%;min-height:28px;padding:0;border:0;background:transparent;color:#4a5b72;font:inherit;font-size:1rem;line-height:1;cursor:pointer} .vp-datebtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:54px;padding:10px 16px;margin:0 0 10px;border:1px solid #cddbed;border-radius:14px;background:#fff;color:var(--navy);font:inherit;cursor:pointer} .vp-datebtn-val{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums} .vp-datebtn-val[data-empty="true"]{color:#5A6B82;font-weight:600;font-size:1rem} .vp-datebtn .ic{flex:none;width:26px;height:26px;color:var(--navy)} .vp-datebtn:focus-visible,.vp-arrow:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .vip-popup .calendar-widget[hidden],.vip-popup .calendar-selected[hidden]{display:none} .vp-wheelbox .time-out{max-width:none;margin:0} .vp-wheelbox .time-out .time-readout{margin:2px 0 0;font-size:1.1rem;font-weight:800;color:#3b4a5f;line-height:1.2} .vp-wheelbox .time-out .time-readout.is-set{color:var(--navy);font-size:2.2rem;line-height:1.1;font-variant-numeric:tabular-nums} @media(max-width:420px){.vp-ask{font-size:1.4rem}.vp-ask-mascot{width:76px;height:76px}.vp-stepper-name{font-size:.76rem}.vp-wheelbox .time-wheel .chip{width:56px;min-width:56px;height:56px;min-height:56px;font-size:1.15rem}} @media(max-width:360px){.vp-ask{font-size:1.25rem}.vp-ask-mascot{display:none}} /* 3단계 팝업 (Su 2026-10-24 시안): 한 번에 한 단계 · 이전/다음 · 2단계 마스코트 · 3단계 요약줄·선택 입력·예상 금액 */ .vp-sec[hidden]{display:none} .vp-sumline{margin:0 0 6px;font-size:.92rem;font-weight:700;color:var(--accent-text);line-height:1.4} .vp-sumline:empty{display:none} .vp-ask-3{margin:0 0 6px} .vp-sumline-3{margin:0 0 12px;padding:8px 12px;border-radius:12px;background:#eaf3ff} .vp-headcount{margin:10px 0 0;text-align:right;font-weight:700;color:var(--navy)} .vp-reqnote{margin-top:12px} .vp-reqnote textarea{width:100%;min-height:76px;padding:12px;border:1px solid var(--card-border);border-radius:12px;font:inherit;resize:vertical} .vp-estnote{margin:0 0 10px;font-size:.85rem;color:#4a5b72;line-height:1.45} #vipPopupForm .vp-total{margin-top:14px} .vp-nav{position:sticky;bottom:0;display:flex;gap:10px;background:#fff;padding:12px 0 14px;border-top:1px solid var(--card-border);margin-top:8px} .vp-nav .btn{min-height:58px;border-radius:999px;font-size:1.05rem;font-weight:800} .vp-nav .vp-prev{flex:0 0 32%} .vp-nav .vp-next,.vp-nav .vp-pay-btn{flex:1;background:var(--navy);color:#fff;border-color:var(--navy)} .vp-nav [hidden]{display:none} /* 2026-10-24 팝업 공간 절약 (Su 시안 img_c657c20865a2): 시·분 물방울 두 줄·마스코트 2개를 없애고 한 화면에 들어오게 압축. 1 일정(날짜 + 시간 + 항공편) → 2 인원(− / +) → 3 예약자. 입국=도착 시간만, 출국·라운지=출발 시간만, Combo=둘 다. 값·id·검증·접수 흐름은 불변. 롤백: 이 블록 삭제 + src/index.html·app.mjs 되돌리기(백업: reports/_backup/fasttrack-popup-compact-20261024/) 또는 PR revert */ .vip-popup form{padding:12px 16px 0} .vp-brandhead{margin-bottom:2px;gap:8px} .vp-logo{width:36px;height:36px;border-radius:10px} .vp-brandname{margin:0;font-size:1rem;font-weight:800;line-height:1.1;color:var(--navy)} .vp-brandhead .vp-brandsub{margin:1px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#4a5b72} .vp-brandhead .vp-close{width:40px;height:40px} .vp-titlerow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0} .vp-titlerow h2{margin:0;font-size:1.3rem;line-height:1.2;color:var(--navy)} .vp-titlerow .vp-ask-mascot{width:52px;height:52px} .vp-steps{margin:2px 0 6px} .vp-stepper::before{top:15px} .vp-stepper-btn{min-height:44px;gap:2px} .vp-stepper-dot{width:28px;height:28px;font-size:.9rem} .vp-stepper-name{font-size:.78rem} .vip-popup>form>.vp-service{margin:0 0 8px;padding:6px 10px;font-size:.78rem;line-height:1.35} .vp-sec{margin:0 0 4px} .vp-ask{margin:0 0 2px;font-size:1.3rem;line-height:1.25} .vp-ask-text .vp-flight-sub,.vp-sec>.vp-flight-sub{display:block;margin:0 0 10px;font-size:.8rem;line-height:1.35} .vp-times{grid-template-columns:1fr 1fr;gap:8px 10px} .vp-times>*{min-width:0} .vp-date{order:1} .vp-timebox{order:2} .vp-timebox+.vp-timebox{order:3} .vp-calbox{order:4;grid-column:1/-1} .vp-flightbox{order:5;grid-column:1/-1;display:block} .vp-times[data-n="2"] .vp-date{grid-column:1/-1} .vp-lbl{display:block;margin:0 0 4px;font-size:.88rem;font-weight:800;color:var(--navy)} .vp-lbl .req{color:#b42323} .vp-times .vp-datebtn{min-height:52px;margin:0;padding:8px 12px} .vp-times .vp-datebtn-val{font-size:1rem} .vp-times .vp-datebtn .ic{width:22px;height:22px} .vip-popup .vp-times .vp-ctl select,.vip-popup .vp-times .vp-ctl input{min-height:52px} .vp-times .vp-sel,.vp-timebox .vp-ctl{margin:0} .vp-calbox{margin:0} .vip-popup .calendar-day{min-height:40px} .vp-sumbox{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:#eaf3ff;display:grid;gap:2px} .vp-sumbox:empty{display:none} .vp-sumrow{margin:0;display:flex;gap:10px;font-size:.88rem;line-height:1.4;color:var(--navy)} .vp-sumrow b{flex:none;min-width:2.6em;color:var(--accent-text)} .vp-sumrow span{min-width:0;overflow-wrap:anywhere} .vp-people{display:grid;gap:8px} .vp-person{display:grid;grid-template-columns:1fr auto 2.2em auto;align-items:center;gap:8px;padding:6px 10px 6px 14px;border:1px solid #cddbed;border-radius:14px;background:#fff} .vp-person-label{font-weight:800;color:var(--navy);font-size:1rem} .vp-person-label small{font-weight:500;font-size:.74rem;color:#4a5b72;margin-left:4px} .vp-person-label em{font-style:normal;font-size:.74rem;font-weight:800;color:var(--accent-text);margin-left:4px} .vp-pm{width:44px;height:44px;border-radius:999px;border:1px solid #cddbed;background:#fff;color:var(--navy);font:inherit;font-size:1.4rem;font-weight:700;line-height:1;cursor:pointer} .vp-pm-plus{background:var(--navy);border-color:var(--navy);color:#fff} .vp-pm:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px} .vp-pn{text-align:center;font-size:1.2rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums} .vp-headcount{margin:8px 0 0} .vp-ask-3{margin:0 0 8px} .vp-sec[id="vpSec3"] .vp-grid{margin-bottom:8px} .vp-more{margin:2px 0 8px} .vp-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--accent-text)} .vp-more summary small{margin-left:4px;font-weight:500;color:#4a5b72} .vp-more .vp-reqnote{margin-top:4px} .vp-sumbox-3{margin:4px 0 8px} #vipPopupForm .vp-total{margin-top:8px} .vp-nav{padding:8px 0 10px;margin-top:4px} .vp-nav .btn{min-height:52px} .vp-note-end{margin:0 0 12px} @media(max-width:420px){.vip-popup form{padding:10px 12px 0}.vp-ask{font-size:1.2rem}.vp-titlerow h2{font-size:1.2rem}.vp-titlerow .vp-ask-mascot{width:44px;height:44px}.vp-person{grid-template-columns:1fr auto 1.8em auto}} @media(max-width:360px){.vp-times{grid-template-columns:1fr}.vp-titlerow .vp-ask-mascot{display:none}} /* 2026-10-24 (Su: 「시간 물방울 버튼 어디 있어?」): 2·3단계 요약줄의 시간을 물방울 버튼으로. 누르면 1단계(시간)로. 글자·값 불변. 롤백: 이 블록 삭제 */ .vp-sumrow .vp-timebubble{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:2px 14px;margin:2px 0;border-radius:999px;border:1.5px solid #0f4c9a;color:#fff;font:inherit;font-weight:800;letter-spacing:.02em;cursor:pointer; background:radial-gradient(circle at 50% 120%,#4d9bf0 0,rgba(77,155,240,0) 60%),linear-gradient(160deg,#1f6fcf 0,#0f4c9a 100%); box-shadow:inset 0 -5px 9px rgba(5,40,100,.40),inset 0 2px 4px rgba(255,255,255,.35),0 4px 10px rgba(27,111,206,.35)} .vp-sumrow .vp-timebubble:active{transform:scale(.96)} .vp-sumrow .vp-timebubble:focus-visible{outline:3px solid var(--navy);outline-offset:2px} .vip-popup .vp-calbox .calendar-day{min-height:36px} .vp-calbox .calendar-header{margin-bottom:4px} /* 2026-10-24 팝업 1단계 카드(시안): 입국·도착 / 출국·출발 카드. 날짜+시간은 한 줄, 항공편은 그 아래 한 줄. 롤백: 이 블록 삭제 */ .vp-times{grid-template-columns:1fr;gap:8px} .vp-card{padding:8px 10px 10px;border:1px solid #d6e4f7;border-radius:14px;background:linear-gradient(180deg,#eef5ff 0,#f7faff 100%)} .vp-card[hidden]{display:none} .vp-card-title{margin:0 0 6px;display:flex;align-items:center;gap:6px;font-size:.92rem;font-weight:800;color:var(--accent-text)} .vp-card-title .ic{width:20px;height:20px;flex:none} .vp-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end} .vp-row>*{min-width:0;order:0} .vp-row .vp-date{order:0;grid-column:auto} .vp-row .vp-timebox{order:0} .vp-card .vp-flightbox{margin-top:8px} .vp-card .vp-calbox{margin-top:8px} .vp-times .vp-datebtn{min-height:46px} .vip-popup .vp-times .vp-ctl select,.vip-popup .vp-times .vp-ctl input{min-height:46px} @media(max-width:360px){.vp-row{grid-template-columns:1fr}} .vp-sumrow{align-items:center;flex-wrap:wrap} .vp-sumrow .vp-timebubble{min-height:30px;padding:0 12px;margin:0;font-size:.85rem} /* 2026-10-24 Combo 왕복 팝업 (chị Su 시안): 출국 날짜·출국 항공편 칸, 일정 요약 띠, 인원 안내. 입국·출국·라운지는 .is-combo 가 없어 영향 없음. 롤백: 이 블록 삭제 */ .vp-datebtn-native{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:8px 12px;border:1px solid #cddbed;border-radius:14px;background:#fff;color:var(--navy)} .vp-datebtn-native .vp-native-date{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;min-height:0} .vp-datebtn-native:focus-within{outline:3px solid var(--accent-text);outline-offset:2px} .vp-datebtn-native .ic{flex:none;width:22px;height:22px;color:var(--navy)} .vp-datebtn-native .vp-datebtn-val{font-size:1rem} .vp-depdate[hidden],.vp-depflight[hidden],.vp-diffpax[hidden],.vp-planbar[hidden]{display:none} .vp-planbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;padding:8px 12px;border-radius:12px;background:#eaf3ff;color:var(--navy);font-size:.85rem} .vp-plan-lead{flex:1 1 100%;font-weight:800;color:var(--accent-text);font-size:.78rem} .vp-plan-item b{color:var(--accent-text);margin-right:2px} .vp-plan-item{font-weight:700;font-variant-numeric:tabular-nums} .vp-plan-arrow{color:var(--accent-text);font-weight:800} .vp-diffpax{margin:8px 0 0;border:1px solid #cddbed;border-radius:14px;background:#fff;padding:0 14px} .vp-diffpax summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--navy)} .vp-diffpax p{margin:0 0 10px;font-size:.85rem;color:#4a5b72;line-height:1.45} .vip-popup.is-combo .vp-titlerow .vp-ask-mascot{width:76px;height:76px} @media(max-width:420px){.vip-popup.is-combo .vp-titlerow .vp-ask-mascot{width:64px;height:64px}} @media(max-width:360px){.vip-popup.is-combo .vp-titlerow .vp-ask-mascot{display:none}} .vip-popup.is-combo .vp-card .vp-row>.vp-date{order:-2} /* 2026-10-24 시간 물방울 선택창 (Su: 시간 고르면 날짜·시간 물방울 팝업). 기본