:root{--bg:#F6F3EC;--paper:#FFFFFF;--ink:#16182B;--ink2:#2B2E45;--blue:#345B8A;--blue-d:#24466F;--red:#BE3A3A;--yellow:#C69232;--yellow-l:#E9C46A;--muted:#5A5C70;--line:#DCD6CA;--on-blue:#DCE5F1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--blue)}a:hover{color:var(--blue-d)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:90}
.page{max-width:560px;margin:0 auto;background:var(--bg)}
.pad{padding:0 20px}
.sample{position:sticky;top:0;z-index:80;background:var(--red);color:#fff;font:700 11.5px/1.35 var(--font);padding:7px 12px;text-align:center}

/* header */
.top{position:relative;z-index:20;height:58px;padding:0 16px 0 20px;display:flex;align-items:center;justify-content:space-between;background:var(--bg)}
.logo{font-family:'Barlow',sans-serif;font-weight:900;font-size:24px;letter-spacing:.04em;color:var(--blue);text-decoration:none}
.lang{position:relative}
.lang summary{list-style:none;height:44px;padding:0 14px;display:flex;align-items:center;gap:6px;border:1.5px solid var(--ink);border-radius:22px;font-size:14px;font-weight:700;cursor:pointer;user-select:none;color:var(--ink)}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:12px;height:12px}
.lang ul{position:absolute;right:0;top:52px;z-index:40;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(22,24,43,.16);min-width:170px}
.lang li a{display:block;padding:11px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.lang li a[aria-current]{color:var(--blue);font-weight:800}
.lang li a:hover{background:#EEF2F8}

/* type */
.eyebrow{margin:0;font-size:12.5px;line-height:16px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
h1{margin:10px 0 0;font-size:36px;line-height:1.04;font-weight:800;letter-spacing:-.015em}
:lang(zh-Hant) h1,:lang(ja) h1,:lang(ko) h1{font-size:31px;line-height:1.28;font-weight:900;letter-spacing:-.01em}
h2{margin:8px 0 0;font-size:32px;line-height:1.06;font-weight:800;letter-spacing:-.01em}
:lang(zh-Hant) h2,:lang(ja) h2,:lang(ko) h2{font-size:25px;line-height:1.34;font-weight:900}
.sub{margin:12px 0 0;font-size:16.5px;line-height:1.5;color:var(--ink2)}
.small{font-size:13px;line-height:1.45;color:var(--muted)}

/* road-sign plate: blue, white inset border, arrow (Korean direction sign) */
.plate{position:relative;color:#fff;border:1px solid transparent;border-image:url(/assets/landing/img/plate.webp) 52 fill / var(--pw,24px) stretch}
a.plate{display:block;text-decoration:none}
.plate .two{display:flex;flex-direction:column}
.plate .a{font-weight:800;line-height:1.02;letter-spacing:-.01em;white-space:nowrap}
.plate .b{font-weight:800;line-height:1.15;opacity:.96;white-space:nowrap}
.plate .arrow{position:absolute;right:20px;top:50%;width:34px;height:34px;transform:translateY(-50%)}

/* hero */
.hero{position:relative}
.hero-photo{width:100%;height:min(46svh,400px);min-height:280px;object-fit:cover}
.hero-sign{--pw:30px;margin:-74px 16px 0;padding:22px 64px 20px 82px;filter:drop-shadow(0 14px 18px rgba(22,24,43,.28))}
.hero-sign .a{font-size:var(--n1,48px)}
.hero-sign .b{margin-top:4px;font-size:26px}
.hero-sign .pin{position:absolute;left:22px;top:50%;width:44px;height:62px;transform:translateY(-54%)}
.hero-sign .stops{margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--on-blue)}
.hero-copy{padding:26px 20px 0}
.trip-meta{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.support{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;font-weight:700;color:var(--blue)}
.support::before{content:"";flex:0 0 8px;height:8px;margin-top:5px;background:var(--blue)}
.support.plain{color:var(--muted)}.support.plain::before{background:var(--muted)}
.badges{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.badges a{display:block;line-height:0}
.badges .apple{height:50px;width:auto}
.badges .google{height:73px;width:auto;margin:-12px -10px}
.guest{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.jump{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-size:15px;font-weight:800;text-decoration:none}

/* the trip: one continuous route line */
.trip{margin-top:72px}
.trip-head{padding:0 20px}
.pull{margin:26px 20px 0;padding:22px 0 0;border-top:3px solid var(--ink)}
.pull blockquote{margin:0;font-size:27px;line-height:1.28;font-weight:800;letter-spacing:-.01em}
:lang(zh-Hant) .pull blockquote,:lang(ja) .pull blockquote,:lang(ko) .pull blockquote{font-size:22px;line-height:1.5}
.pull figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.qa{margin:22px 20px 0}
.qa h3{margin:0;font-size:13px;line-height:18px;font-weight:800;letter-spacing:.06em;color:var(--blue)}
.qa p{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--ink2)}
.road{position:relative;margin-top:30px}
.road-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.road-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.r-shadow{stroke:#16182B;stroke-opacity:.07;stroke-width:46}
.r-case{stroke:#fff;stroke-width:40}
.r-base{stroke:var(--blue);stroke-opacity:.42;stroke-width:32}
.r-hollow{stroke:var(--bg);stroke-width:22}
.r-done{stroke:var(--blue);stroke-width:32}
.r-dash{stroke:#fff;stroke-width:3;stroke-dasharray:12 14;stroke-opacity:.9}
.bus{position:absolute;left:0;top:0;width:82px;height:auto;max-width:none;z-index:3;pointer-events:none;filter:drop-shadow(0 6px 7px rgba(22,24,43,.38));visibility:hidden;will-change:transform}
.road.ready .bus{visibility:visible}
.route{position:relative;z-index:1;margin:0;padding:76px 16px 56px;list-style:none}
.road:not(.ready) .route::before{content:"";position:absolute;left:30px;top:20px;bottom:20px;width:6px;border-radius:3px;background:var(--blue);z-index:-1}
.stop{position:relative}
.stop .card{width:calc(100% - 82px)}
.stop.l .card{margin-left:82px}
.stop.r .card{margin-right:82px}
.stop .mark{position:absolute;top:-6px;width:40px;height:95px;z-index:2;filter:grayscale(.7) opacity(.7) drop-shadow(0 4px 4px rgba(22,24,43,.25));transition:filter .25s}
.stop .plate.has-n{display:flex;align-items:center;gap:12px}.stop .plate .n{flex:0 0 36px;height:36px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font:900 20px/1 'Barlow',sans-serif}.stop.on .plate .n{background:var(--yellow-l);color:var(--ink)}
.stop.l .mark{left:36px}.stop.r .mark{right:36px}
.stop.on .mark{filter:drop-shadow(0 4px 4px rgba(22,24,43,.3))}
.stop .pinmark{position:absolute;top:-8px;width:44px;height:62px;z-index:2}
.stop.l .pinmark{left:11px}.stop.r .pinmark{right:11px}
.stop .plate{padding:16px 26px 15px 26px;filter:drop-shadow(0 6px 8px rgba(22,24,43,.22))}
.stop .plate .a{font-size:21px;white-space:normal}
.stop .plate .b{margin-top:3px;font-size:16px;white-space:normal}
.stop .phw{position:relative;margin-top:10px}
.stop img.ph{display:block;width:100%;height:220px;object-fit:cover;border-radius:8px;box-shadow:0 12px 26px rgba(22,24,43,.2)}
.stop .what{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.hop{height:128px;display:flex;align-items:center;justify-content:center}
.hop-label{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:#fff;border:2px solid var(--blue);font-size:13px;font-weight:800;color:var(--blue);box-shadow:0 4px 12px rgba(22,24,43,.12)}
.hop-label svg{width:16px;height:16px;flex:0 0 16px}
.after{margin:26px 20px 0}
.disclose{margin:22px 20px 0;border:2px solid var(--blue);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.55;color:var(--ink2);background:#fff}
.disclose strong{display:block;color:var(--blue);margin-bottom:4px}
.credit{margin:10px 20px 0}

/* make it yours (dark) */
.dark{margin-top:80px;background:var(--ink);color:#fff;padding:56px 20px 52px}
.dark .eyebrow{color:var(--yellow-l)}
.dark h2{color:#fff}
.dark .sub{color:#C9CCDA}
.tabs{margin-top:22px}
.tabs input{position:absolute;opacity:0;pointer-events:none}
.tabs .bar{display:flex;gap:6px;padding:5px;border-radius:14px;background:rgba(255,255,255,.08)}
.tabs label{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:14.5px;font-weight:800;cursor:pointer;text-align:center;padding:0 8px;color:#C9CCDA}
.tabs input:nth-of-type(1):checked~.bar label:nth-child(1),.tabs input:nth-of-type(2):checked~.bar label:nth-child(2){background:#fff;color:var(--ink)}
.tabs input:focus-visible~.bar{outline:3px solid var(--yellow);outline-offset:2px}
.tabs .panel{display:none;margin-top:16px}
.tabs input:nth-of-type(1):checked~.p1,.tabs input:nth-of-type(2):checked~.p2{display:block}
.signs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.signs li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--blue);outline:2px solid rgba(255,255,255,.9);outline-offset:-6px}
.signs .n{flex:0 0 28px;height:28px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font:800 12px/1 'Barlow',sans-serif}
.signs .a{font-size:17px;font-weight:800;line-height:1.2}
.signs .b{font-size:13.5px;font-weight:700;opacity:.88}
.signs li.changed{background:var(--yellow);color:var(--ink);outline-color:rgba(22,24,43,.85)}
.signs li.changed .n{background:var(--ink);color:#fff}
.legend{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--yellow-l)}
.legend i{width:14px;height:14px;border-radius:3px;background:var(--yellow)}
.dark .note{margin-top:8px;font-size:13px;color:#A9ACBD}
.dark .gokori-line{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:15.5px;line-height:1.55;color:#E3E5EE}

/* GOKO card (blue) */
.bluebg{background:var(--blue);color:#fff;padding:56px 20px 52px}
.bluebg .eyebrow{color:var(--yellow-l)}
.bluebg h2{color:#fff}
.bluebg .sub{color:var(--on-blue)}
.bluebg .tabs .bar{background:rgba(255,255,255,.12)}
.bluebg .tabs label{color:var(--on-blue)}
.photo-only{margin:0 auto;width:300px;max-width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:0 20px 44px rgba(10,20,40,.35)}
.bluebg .save-note{margin-top:22px;font-size:15px;line-height:1.55;color:#fff;font-weight:600}

/* more trips */
.more{padding:64px 20px 0}
.trips{margin-top:18px;display:flex;flex-direction:column;gap:26px}
.trip-card .plate{padding:15px 56px 14px 26px}
.trip-card .plate .a{font-size:22px}.trip-card .plate .b{font-size:15px;margin-top:2px}
.trip-card .plate .arrow{width:26px;height:26px;right:18px}
.trip-card img{margin-top:10px;width:100%;height:200px;object-fit:cover;border-radius:8px}
.trip-card .q{margin:10px 0 0;font-size:17px;line-height:1.45;font-weight:700}

/* tools / faq / about (document style) */
.doc{padding:72px 20px 0}
.doc h2{margin:0}
.tools{margin-top:18px;border-top:3px solid var(--ink)}
.tools div{display:grid;grid-template-columns:40px 1fr;gap:4px 12px;padding:18px 0;border-bottom:1px solid var(--line)}
.tools .k{grid-row:1/3;font:900 22px/1 'Barlow',sans-serif;color:var(--blue)}
.tools h3{margin:0;font-size:18px;line-height:1.3;font-weight:800}
.tools p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.faq{margin-top:18px;border-top:3px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{min-height:58px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:16.5px;font-weight:800;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 12px;height:12px;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(45deg) translate(-3px,-3px);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink2)}
.about{padding:64px 20px 0}
.about p.t{margin:10px 0 0;font-size:16px;line-height:1.6}
.about .links{margin-top:12px;display:flex;gap:4px 18px;flex-wrap:wrap;font-size:14.5px;font-weight:800}
.about .links a{display:inline-flex;align-items:center;min-height:36px}

/* final: big road sign */
.final{--pw:30px;margin:72px 16px 0;padding:30px 30px 28px;filter:drop-shadow(0 14px 18px rgba(22,24,43,.22))}
.final h2{margin:0;color:#fff;padding-right:40px}
.final .arrow{top:44px;transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border-radius:12px;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;font-size:16.5px}
.btn:hover{color:#fff;opacity:.92}
.final .btn{margin-top:20px;width:100%;background:#fff;color:var(--ink)}
.final .btn:hover{color:var(--ink)}
.final .fn{margin-top:12px;font-size:13.5px;color:var(--on-blue)}

/* footer */
footer{margin-top:72px;background:var(--ink);color:#B9BCCB;padding:26px 20px 104px;font-size:13.5px;line-height:1.5}
footer a{color:#fff;text-decoration:none}
footer nav{display:flex;gap:2px 16px;flex-wrap:wrap}
footer nav a{display:inline-flex;align-items:center;min-height:36px}
footer .langs{padding-bottom:12px;border-bottom:1px solid #33364D;font-weight:700}
footer .legal{margin-top:10px}
footer .meta2{margin-top:12px;display:flex;flex-direction:column;gap:6px}
footer .meta2 a{color:#B9BCCB}

/* sticky install bar */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--blue);color:#fff;transform:translateY(110%);transition:transform .22s}
.sticky.on{transform:none}
.sticky span{font-size:14px;font-weight:800}
.sticky .btn{min-height:44px;padding:0 18px;font-size:14.5px;background:#fff;color:var(--ink)}
@media (min-width:561px){.sticky{left:50%;right:auto;width:560px;transform:translate(-50%,110%)}.sticky.on{transform:translate(-50%,0)}}

/* chooser & 404 */
.chooser{padding:40px 20px 80px}
.chooser ul{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.chooser li a{display:flex;align-items:center;min-height:58px;padding:0 20px;border-radius:12px;background:var(--blue);color:#fff;outline:2px solid #fff;outline-offset:-6px;font-size:19px;font-weight:800;text-decoration:none}

/* motion: draw the route as you scroll (CSS only) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .stop .card{animation:goko-rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@keyframes goko-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media (min-width:561px){.page{box-shadow:0 0 0 1px var(--line);min-height:100vh}}
.card-link{display:block;color:inherit;text-decoration:none}
.see-all{margin:22px 0 0;font-weight:800;font-size:15px}.see-all a{color:var(--blue)}.see-all.pad{padding:0 20px;margin-bottom:8px}
.more.list h1{margin-top:10px}
.pop{position:absolute;bottom:10px;width:34%;margin:0;padding:5px 5px 18px;background:#fff;border-radius:4px;box-shadow:0 10px 22px rgba(22,24,43,.32);z-index:3;opacity:0;transform:translateY(18px) scale(.2) rotate(-16deg);transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .18s}
.stop.l .pop{right:10px;transform-origin:80% 90%}.stop.r .pop{left:10px;transform-origin:20% 90%}
.pop img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:2px}
.pop::before{content:"";position:absolute;inset:-26%;border-radius:50%;border:3px dotted var(--yellow-l);opacity:0;pointer-events:none}
.stop.on .pop{opacity:1}.stop.l.on .pop{transform:rotate(5deg)}.stop.r.on .pop{transform:rotate(-5deg)}
.stop.on .pop::before{animation:burst .7s ease-out .12s both}
@keyframes burst{0%{opacity:1;transform:scale(.45)}100%{opacity:0;transform:scale(1.25)}}
.road:not(.ready) .pop{opacity:1;transform:rotate(4deg)}
@media (prefers-reduced-motion:reduce){.pop{transition:none}.pop::before{display:none}}
.gcard{position:relative;margin:0 auto;width:300px;max-width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 20px 44px rgba(10,20,40,.35);color:#fff;isolation:isolate}
.gcard .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,transparent 33.3%,rgba(0,0,0,.416) 55%,rgba(0,0,0,.878) 100%);pointer-events:none}
.gcard .st{position:absolute;z-index:1;pointer-events:none}
.gcard .w1{left:6%;top:6%;width:30%;transform:rotate(-5deg)}
.gcard .w2{right:6%;top:5%;width:19%}
.gcard .w3{left:56%;top:38%;width:11%;transform:rotate(10deg)}
.gcard .m1{right:7%;bottom:15%;width:20%;transform:rotate(7deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.gcard .txt{position:absolute;z-index:2;left:6.7%;right:6.7%;bottom:6.2%;display:flex;flex-direction:column;align-items:flex-start}
.gcard .ttl{position:relative;font-size:32px;line-height:.96;font-weight:800;letter-spacing:-1.25px}
.gcard .ttl::after{content:"";position:absolute;z-index:-1;left:.08em;width:88%;bottom:-.04em;height:.16em;border-radius:.1em;background:#D2AA5F;opacity:.9}
.gcard .sum{margin-top:15px;font-size:10px;line-height:1.2;font-weight:700;letter-spacing:1.17px}
.gcard .stat{margin-top:11px;display:flex;flex-direction:column}
.gcard .stat b{font-size:18px;line-height:1;font-weight:800}
.gcard .stat i{margin-top:3px;font-style:normal;font-size:7px;line-height:1.1;font-weight:700;letter-spacing:1px}
.gcard .dom{position:absolute;z-index:2;right:5.6%;bottom:4.4%;font-size:9px;line-height:1;font-weight:800;letter-spacing:.25px}