:root { --forest:#073d38; --forest-2:#0b5d50; --navy:#102d59; --lime:#ddfb62; --ink:#122d35; --muted:#60706d; --canvas:#f5f8f5; --line:#dce8e1; --mint:#ecf8f1; --amber:#ef8b2d; --amber-soft:#fff1de; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; color:var(--ink); background:var(--canvas); font-synthesis:none; }
* { box-sizing:border-box; } html,body { min-width:320px; min-height:100vh; margin:0; background:var(--canvas); } button,input { font:inherit; } button { cursor:pointer; border:0; } button,a { -webkit-tap-highlight-color:transparent; } a { color:inherit; text-decoration:none; } svg { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mobile-shell { width:min(100%,760px); min-height:100vh; margin:auto; background:#fff; box-shadow:0 0 52px #0b33210d; } .mobile-header { position:sticky; z-index:10; top:0; display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:max(8px,env(safe-area-inset-top)) 18px 8px; border-bottom:1px solid #edf1ee; background:#fffc; backdrop-filter:blur(18px); }
.brand { display:flex; gap:9px; align-items:center; color:var(--navy); } .brand-mark { display:grid; width:30px; height:30px; place-items:center; border-radius:11px; color:var(--forest); background:var(--lime); font-size:17px; font-weight:950; } .brand span:last-child { display:grid; } .brand b { font-size:14px; letter-spacing:-.06em; } .brand small { display:none; } .easy-header { display:flex; gap:2px; align-items:center; justify-content:center; width:44px; min-height:44px; border-radius:13px; color:var(--forest); background:var(--mint); font-weight:900; } .easy-header svg { width:17px; height:17px; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.search-page { min-height:calc(100vh - 58px); display:flex; flex-direction:column; } .search-hero { position:relative; overflow:hidden; padding:18px 18px 24px; color:#fff; background:linear-gradient(135deg,var(--forest) 0%,#075246 68%,#0f6956 100%); } .search-hero:before { position:absolute; width:220px; height:220px; right:-104px; top:-120px; border:44px solid #ffffff0f; border-radius:50%; content:""; } .search-hero:after { position:absolute; width:180px; height:180px; right:-104px; bottom:-113px; border:1px solid #ddfb6240; border-radius:50%; content:""; }
.hero-meta { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px; color:#d9eee6; font-size:10px; font-weight:800; letter-spacing:-.02em; } .pilot-badge { display:inline-flex; align-items:center; gap:5px; min-height:29px; padding:5px 10px; border:1px solid #ffffff35; border-radius:999px; color:#f4fff4; background:#ffffff14; font-size:10px; font-weight:850; white-space:nowrap; } .pilot-badge span { color:var(--lime); }
.hero-copy { position:relative; z-index:2; margin-top:25px; } .hero-copy h1 { max-width:330px; margin:0; color:#fff; font-size:clamp(34px,10vw,46px); font-weight:950; line-height:1.08; letter-spacing:-.085em; } .hero-copy h1:before { color:var(--lime); content:"✦"; font-size:.38em; vertical-align:top; margin-right:5px; } .hero-copy p { margin:13px 0 0; color:#d8ede5; font-size:14px; font-weight:650; line-height:1.55; letter-spacing:-.035em; }
.hero-graphic { position:absolute; z-index:1; right:-4px; top:59px; width:165px; color:var(--lime); opacity:.95; transform:rotate(-7deg); } .route-motif { width:100%; height:auto; } .route-motif>path:first-child { stroke:#fff8; stroke-width:9; } .route-motif .route-dashes { stroke:var(--lime); stroke-width:3; stroke-dasharray:2 10; } .route-motif .route-pin { fill:var(--lime); stroke:var(--lime); }
.search-field { position:relative; z-index:3; display:flex; gap:12px; align-items:center; min-height:62px; margin-top:25px; padding:0 18px; border:2px solid #fff; border-radius:18px; color:var(--forest); background:#fff; box-shadow:0 15px 26px #001d1729; } .search-icon { display:grid; } .search-icon svg { width:22px; height:22px; stroke-width:2.1; } .search-field input { width:100%; height:58px; border:0; outline:0; color:var(--ink); background:transparent; font-size:16px; font-weight:700; letter-spacing:-.04em; } .search-field input::placeholder { color:#85918e; font-weight:600; }
.search-content { flex:1; padding:27px 18px 22px; background:linear-gradient(180deg,#fff 0%,var(--canvas) 100%); } .section-label { display:flex; align-items:center; gap:6px; color:var(--forest-2); font-size:12px; font-weight:900; letter-spacing:-.02em; } .section-label:before { color:#92bd17; content:"✦"; } .section-label svg { width:16px; height:16px; } .section-heading h2 { margin:5px 0 17px; color:var(--ink); font-size:23px; font-weight:900; letter-spacing:-.07em; }
.quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .quick-card { display:grid; min-height:132px; place-items:center; align-content:center; gap:11px; padding:14px 8px; border:1px solid var(--line); border-radius:20px; color:var(--ink); background:#fff; box-shadow:0 7px 18px #193b2a0b; } .quick-card:hover { border-color:#b5df2a; background:#fcfff3; transform:translateY(-1px); } .quick-card:active { transform:scale(.985); } .quick-card:focus-visible,.result-list button:focus-visible,.tool-button:focus-visible,.back-button:focus-visible { outline:3px solid var(--lime); outline-offset:2px; } .quick-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:16px; color:var(--forest); background:var(--mint); } .quick-icon svg { width:30px; height:30px; stroke-width:1.8; } .quick-card b { max-width:100%; overflow:hidden; color:var(--ink); font-size:17px; font-weight:900; line-height:1.2; letter-spacing:-.065em; text-overflow:ellipsis; white-space:nowrap; }
.result-list { display:grid; gap:10px; } .result-list button { display:flex; gap:12px; align-items:center; width:100%; min-height:78px; padding:13px 15px; text-align:left; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 6px 15px #193b2a08; } .result-list button:hover { border-color:#add733; background:#fcfff5; } .result-icon { display:grid; flex:0 0 auto; width:44px; height:44px; place-items:center; border-radius:14px; color:var(--forest); background:var(--mint); } .result-icon svg { width:28px; height:28px; stroke-width:1.8; } .result-copy { display:grid; flex:1; gap:4px; min-width:0; } .result-list b { overflow:hidden; font-size:16px; font-weight:900; letter-spacing:-.045em; text-overflow:ellipsis; white-space:nowrap; } .result-list small { overflow:hidden; color:var(--muted); font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; } .result-copy i { color:#245d8f; font-size:10px; font-style:normal; font-weight:750; } .result-list em { display:grid; flex:0 0 auto; color:var(--forest); font-style:normal; } .result-list em svg { width:18px; height:18px; }
.no-result { padding:23px 20px; border:1px dashed #9eb9a8; border-radius:20px; background:var(--mint); color:#425757; } .no-result strong { color:var(--forest); font-size:18px; } .no-result p { margin:8px 0 0; font-size:14px; line-height:1.55; } .secondary-button { width:100%; min-height:52px; margin-top:14px; border:1px solid #b9cbc1; border-radius:15px; color:var(--forest); background:#fff; font-weight:850; } .search-page footer { display:flex; align-items:center; min-height:55px; padding:14px 19px calc(14px + env(safe-area-inset-bottom)); color:var(--forest); background:var(--canvas); font-size:12px; font-weight:850; } .search-page footer b:before { color:#8ec419; content:"✦ "; }
.destination-page { min-height:calc(100vh - 58px); padding:16px 18px calc(25px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 112% 95%,#0c625512 0 154px,transparent 155px),radial-gradient(circle at 100% 92%,#ddfb6235 0 22px,transparent 23px),linear-gradient(160deg,#f7faf7 0%,#f5f8f5 70%,#edf5ef 100%); } .page-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; } .page-top .pilot-badge { color:#245d8f; border-color:#c6d9ee; background:#edf5ff; } .back-button { min-height:44px; padding:0; color:var(--forest); background:transparent; font-size:13px; font-weight:900; }
.destination-hero { position:relative; overflow:hidden; min-height:337px; padding:22px; border-radius:26px; color:#fff; background:linear-gradient(145deg,var(--forest) 0%,#075b4e 100%); box-shadow:0 14px 28px #073d3826; } .destination-hero.external,.destination-hero.local { color:#59320e; background:linear-gradient(145deg,#fff6e6,#ffecd3); } .destination-hero.verify { color:var(--navy); background:linear-gradient(145deg,#eff9e8,#e5f6ff); } .state-label { position:relative; z-index:2; display:flex; align-items:center; gap:6px; width:max-content; max-width:100%; padding:7px 10px; border-radius:999px; color:#f3ffe1; background:#ddfb6221; font-size:12px; font-weight:850; } .state-label svg { width:15px; height:15px; } .external .state-label,.local .state-label { color:#98510b; background:#ffd9a5; } .verify .state-label { color:var(--navy); background:var(--lime); }
.service-name { position:relative; z-index:2; margin:18px 0 0; color:#d8eee5; font-size:14px; font-weight:750; letter-spacing:-.04em; } .external .service-name,.local .service-name,.verify .service-name { color:#6f624d; } .floor { position:relative; z-index:2; margin:10px 0 0; color:var(--lime); font-size:clamp(76px,22vw,106px); font-weight:950; line-height:.82; letter-spacing:-.11em; text-shadow:0 3px 0 #001c1633; } .external .floor,.local .floor { color:#b25a0b; font-size:clamp(57px,17vw,78px); text-shadow:none; } .verify .floor { color:var(--navy); font-size:clamp(56px,17vw,78px); text-shadow:none; } .destination-hero h1 { position:relative; z-index:2; max-width:82%; margin:17px 0 7px; font-size:29px; font-weight:950; letter-spacing:-.07em; line-height:1.15; } .window { position:relative; z-index:2; display:inline-flex; margin:0; padding:8px 12px; border-radius:13px; color:#fff; background:#ffffff20; font-size:16px; font-weight:900; } .external .window,.local .window,.verify .window { color:var(--ink); background:#fff; } .destination-hero .route-motif { position:absolute; z-index:1; right:-7px; bottom:-7px; width:200px; color:var(--lime); opacity:.9; transform:rotate(8deg); }
.destination-card { margin-top:13px; padding:21px 18px; border:1px solid var(--line); border-radius:21px; background:#fff; box-shadow:0 7px 18px #193b2a0b; } .destination-card h2 { margin:9px 0 18px; color:var(--ink); font-size:19px; font-weight:900; line-height:1.45; letter-spacing:-.055em; } .address { display:flex; gap:10px; padding:13px; border-radius:16px; color:#954b08; background:var(--amber-soft); } .address svg { flex:0 0 auto; width:19px; height:19px; margin-top:3px; } .address span { display:grid; gap:3px; } .address small { font-size:11px; font-weight:850; } .address b { font-size:15px; line-height:1.4; } .summary { margin-top:18px; padding-top:18px; border-top:1px solid #e5ece9; } .summary p { margin:8px 0 0; color:#526261; font-size:15px; line-height:1.6; } .source-note { margin:14px 0 0; color:#245d8f; font-size:12px; font-weight:750; }
.destination-tools { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:13px; } .tool-button { display:flex; gap:7px; align-items:center; justify-content:center; min-height:56px; border:1px solid #cadbd2; border-radius:15px; color:var(--forest); background:#fff; font-size:13px; font-weight:900; } .tool-button svg { width:18px; height:18px; } .tool-button:first-child { color:#fff; border-color:var(--forest); background:var(--forest); } .destination-assurance { display:flex; align-items:center; gap:6px; margin:14px 3px 0; color:#42615a; font-size:12px; font-weight:750; letter-spacing:-.03em; } .destination-assurance span { color:#8ebf16; } .privacy-note { margin:11px 4px 0; color:#718085; font-size:11px; text-align:center; }
.easy .hero-copy h1 { font-size:48px; } .easy .hero-copy p,.easy .search-field input { font-size:18px; } .easy .quick-card { min-height:155px; } .easy .quick-card b { font-size:21px; } .easy .destination-card h2 { font-size:24px; } .easy .summary p,.easy .destination-card .address b { font-size:18px; }
.not-found,.error-state { display:grid; min-height:80vh; padding:40px; place-content:center; text-align:center; }.mark { display:grid; width:60px; height:60px; margin:auto; place-items:center; border-radius:20px; color:var(--forest); background:var(--lime); font-size:31px; font-weight:900; }.not-found a,.error-state button { margin-top:15px; padding:12px; border-radius:14px; color:#fff; background:var(--forest); font-weight:800; }
@media (min-width:700px) { .mobile-shell { width:min(100%,1024px); } .mobile-header { padding-right:46px; padding-left:46px; } .search-hero { padding:25px 48px 31px; } .hero-copy { margin-top:31px; } .hero-copy h1 { font-size:56px; } .hero-copy p { font-size:17px; } .hero-graphic { right:67px; top:54px; width:230px; } .search-field { max-width:690px; min-height:68px; margin-top:28px; } .search-field input { height:64px; font-size:18px; } .search-content { padding:32px 48px; } .quick-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; } .quick-card { min-height:160px; border-radius:23px; } .quick-icon { width:55px; height:55px; border-radius:18px; } .quick-icon svg { width:33px; height:33px; } .quick-card b { font-size:19px; } .search-page footer { padding-right:48px; padding-left:48px; } .destination-page { display:grid; grid-template-columns:1.08fr .92fr; column-gap:16px; align-content:start; padding:24px 48px 38px; } .page-top { grid-column:1 / -1; } .destination-hero { grid-row:2 / span 3; min-height:548px; padding:30px; } .destination-hero h1 { font-size:35px; } .destination-card { display:flex; flex-direction:column; margin-top:0; } .destination-card .summary { margin-top:18px; } .destination-tools { margin-top:16px; } .destination-assurance { margin-top:17px; } .privacy-note { grid-column:1 / -1; } }
@media (prefers-contrast:more) { .quick-card,.result-list button,.destination-card,.search-field { border:2px solid var(--forest); } .mobile-header { border-bottom:2px solid var(--forest); } } @media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }