/* Hello Gangnam pocket guide: live vector art, kinetic type and useful motion. */
.pocket{--ink:#202344;--cream:#F6F4E3;--pink:#F59AC3;--orange:#F7A653;--green:#78AD83;overflow:hidden;color:var(--ink)}
.pocket *{box-sizing:border-box}.pocket [hidden]{display:none!important}
.pocket h1,.pocket h2,.pocket h3{margin:0;text-wrap:balance}
.pocket a:focus-visible,.pocket button:focus-visible,.pocket summary:focus-visible{outline:3px solid #D2F46F;outline-offset:4px}
.pocket button,.pocket a{-webkit-tap-highlight-color:transparent}
.pocket-hero{background:var(--blue);color:var(--cream);padding:28px 20px 18px;text-align:center;position:relative}
.pocket h1{font-family:"Bagel Fat One","Bricolage Grotesque",sans-serif;font-size:clamp(42px,13vw,65px);line-height:1.04;letter-spacing:-.025em;position:relative;z-index:1}
.pocket .type-word{display:block;transform-origin:50% 90%;animation:pocket-type .9s cubic-bezier(.22,1,.36,1) both}
.pocket .word-1{color:var(--pink);animation-delay:.12s}
html[lang="ja"] .pocket h1{font-family:"Mochiy Pop One","Noto Sans JP",sans-serif;font-size:clamp(35px,10.3vw,47px);line-height:1.25}
html[lang^="zh"] .pocket h1{font-size:clamp(37px,11vw,51px);line-height:1.16}
html[lang="zh-Hans"] .pocket h1{font-family:"ZCOOL KuaiLe","Noto Sans SC",sans-serif}
html[lang="zh-Hant"] .pocket h1{font-family:"Huninn","Noto Sans TC",sans-serif}
.pocket-intro{margin:14px auto 0;max-width:30ch;font-size:15px;line-height:1.65}
.pocket-art{max-width:350px;margin:0 auto -4px}.pocket-art svg{display:block;width:100%;height:auto;overflow:visible}
.pocket .cloud-drift{animation:pocket-cloud 5s ease-in-out infinite;transform-origin:70px 30px}
.pocket .rain{animation:pocket-rain 1.8s linear infinite;transform-box:fill-box;transform-origin:center}.pocket .r2{animation-delay:-.6s}.pocket .r3{animation-delay:-1.2s}
.pocket .umbrella-sway{animation:pocket-umbrella 3.5s ease-in-out infinite;transform-origin:185px 150px}
.pocket .book-bounce{animation:pocket-buddy 3.5s ease-in-out infinite;transform-origin:190px 202px}
.pocket .buddy-shadow{animation:pocket-shadow 3.5s ease-in-out infinite;transform-origin:194px 214px}
.pocket .sparkle{animation:pocket-spark 3.5s ease-in-out infinite;transform-origin:308px 42px}
.pocket-fact-strip{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;position:relative;z-index:1}
.pocket-fact-strip span{padding:8px 10px;border:1px solid #FFFFFF66;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.pocket-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:19px;font-size:10.5px;line-height:1.5;text-align:left}
.motion-toggle{display:inline-flex;align-items:center;gap:5px;min-height:44px;flex-shrink:0;padding:6px 10px;border:1px solid #FFFFFF88;border-radius:99px;color:var(--cream);background:transparent;font:inherit;cursor:pointer}
.pocket-section{padding:32px 20px}.pocket h2{font-size:31px;line-height:1.17;color:var(--blue)}
html[lang="ja"] .pocket h2,html[lang^="zh"] .pocket h2{font-size:27px;line-height:1.4}
.pocket-route{background:var(--cream)}.tap-hint{margin-top:8px;font-size:13px;line-height:1.5;color:#494B70}.pocket:not(.js-ready) .tap-hint{display:none}
.route-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.route-choice{display:grid;grid-template-columns:28px 1fr;gap:6px 8px;padding:12px 10px;border:2px solid var(--ink);border-radius:18px;color:var(--ink);background:#fff;text-align:left;text-decoration:none;min-height:106px;transition:transform .2s,background .2s}
.route-choice:hover{transform:translateY(-3px)}.route-choice:active{transform:scale(.98)}
.route-choice .line-number{grid-row:1/3;align-self:start;display:grid;place-items:center;width:28px;height:28px;font:800 16px/1 system-ui,sans-serif;border:1.5px solid var(--ink);border-radius:50%}
.route-choice-2 .line-number{background:var(--green)}.route-choice-9 .line-number{background:var(--orange)}
.route-choice .station b{display:block;font-size:15px;line-height:1.4;word-break:keep-all}.route-choice small{display:block;font-size:11px;line-height:1.6}.route-choice strong{grid-column:2;font-size:13px;line-height:1.4}
.pocket[data-route="2"] .route-choice-2{background:#DCEBD8}.pocket[data-route="9"] .route-choice-9{background:#FFE5C4}
.route-graphic{display:block;width:100%;height:auto;margin-top:2px}
.pocket .train-2{animation:pocket-train-2 4.2s ease-in-out infinite}.pocket .train-9{animation:pocket-train-9 4.2s ease-in-out -.7s infinite}
.pocket[data-route="2"] .track-9,.pocket[data-route="2"] .train-9,.pocket[data-route="9"] .track-2,.pocket[data-route="9"] .train-2{opacity:.18}
.pocket[data-route="2"] .train-9,.pocket[data-route="9"] .train-2{animation-play-state:paused}
.route-graphic.is-replaying .track{animation:pocket-draw 1s ease-out both;stroke-dasharray:1}
.route-readout{margin:0;padding:12px 14px;border:2px dashed var(--blue);border-radius:15px;color:var(--blue);font-size:14px;font-weight:700;line-height:1.6;min-height:48px}
.route-via{display:flex;gap:12px;justify-content:space-between;margin-top:10px}.route-via p{font-size:11px;line-height:1.5;flex:1}.route-via b{display:inline-block;min-width:17px;margin-right:3px;text-align:center;border-radius:50%;color:var(--ink)}
.route-via p:first-child b{background:var(--green)}.route-via p:last-child b{background:var(--orange)}
.pocket-caption{font-size:10.5px;line-height:1.55;color:#494B70;margin-top:12px}
.pocket-stops{background:#E5E1C9;border-top:2px dashed #CBC8AC}.pocket-journey{padding:0;margin:24px 0 0;list-style:none;position:relative}
.pocket-journey:before{content:"";position:absolute;left:48px;top:35px;bottom:40px;border-left:2px dashed var(--blue)}
.journey-stop{display:grid;grid-template-columns:106px 1fr;align-items:center;gap:13px;position:relative;min-height:120px;padding:10px 0}
.stop-art{position:relative;min-width:0}.stop-art svg{display:block;width:100%;height:auto;position:relative}.stop-number{position:absolute;left:-2px;top:-2px;background:var(--blue);color:var(--cream);border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font:bold 13px/1 system-ui,sans-serif;z-index:1}
.stop-copy h3{font-size:20px;line-height:1.25;color:var(--blue)}.stop-copy p{font-size:13.5px;line-height:1.7;margin-top:7px}
html[lang="ja"] .stop-copy h3,html[lang^="zh"] .stop-copy h3{font-size:18px;line-height:1.45}
.mini-book{transform-origin:60px 55px;animation:pocket-book 4s ease-in-out infinite}.cup-steam{animation:pocket-steam 3s ease-in-out infinite}.mini-train{animation:pocket-mini-train 4s ease-in-out infinite;transform-origin:60px 90px}
.pocket-know{background:var(--pink)}.pocket-ticket{margin-top:22px;border:2px solid var(--ink);border-radius:21px;background:var(--cream);position:relative;overflow:hidden}
.pocket-ticket>div{display:grid;grid-template-columns:1fr;gap:6px;padding:20px 18px}.pocket-ticket>div+div{border-top:2px dashed #B5B39E}.pocket-ticket dt{font-size:32px;line-height:1.2;font-weight:800;color:var(--blue);letter-spacing:-.025em}.pocket-ticket dd{font-size:13px;line-height:1.75;max-width:33ch}
.pocket-last{background:var(--cream)}.pocket-faq{margin-top:16px}.pocket-faq details{border-bottom:1px solid #B5B39E;padding:6px 0}.pocket-faq summary{font-size:14px;font-weight:700;line-height:1.6;min-height:48px;padding:12px 0;cursor:pointer}.pocket-faq p{font-size:13.5px;line-height:1.75;margin:4px 0 14px}
.pocket-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.pocket-links a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;border:2px solid var(--blue);border-radius:99px;text-decoration:none;font-size:13px;line-height:1.5;font-weight:700;color:var(--blue)}.pocket-links .pocket-map{background:var(--blue);color:var(--cream)}
.pocket-sources{padding:0 20px 26px;background:var(--cream);font-size:11px;line-height:1.6;color:#494B70}.pocket-sources p{font-weight:700;margin-bottom:5px}.pocket-sources a{display:inline-block;color:var(--blue);text-underline-offset:3px;margin:0 12px 6px 0;min-height:26px}.pocket-sources small{display:block;font-size:10.5px}
.pocket[data-motion="paused"] *{animation-play-state:paused!important;transition:none!important}
@keyframes pocket-type{0%{transform:translateY(-18px) scale(.94,1.08)}60%{transform:translateY(2px) scale(1.03,.97)}100%{transform:translateY(0) scale(1)}}
@keyframes pocket-cloud{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
@keyframes pocket-rain{0%{transform:translateY(-8px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(24px);opacity:0}}
@keyframes pocket-umbrella{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes pocket-buddy{0%,15%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-11px) scale(.97,1.03)}50%{transform:translateY(0) scale(1.06,.94)}65%{transform:translateY(-3px) scale(.99,1.01)}80%{transform:translateY(0) scale(1)}}
@keyframes pocket-shadow{0%,100%{transform:scaleX(1);opacity:.35}35%{transform:scaleX(.83);opacity:.22}50%{transform:scaleX(1.06);opacity:.35}}
@keyframes pocket-spark{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes pocket-train-2{0%,10%{transform:translate(0,0)}35%{transform:translate(111px,0)}50%{transform:translate(135px,23px)}65%{transform:translate(135px,65px)}90%,100%{transform:translate(206px,65px)}}
@keyframes pocket-train-9{0%,10%{transform:translate(0,0)}35%{transform:translate(106px,0)}50%{transform:translate(135px,-30px)}65%{transform:translate(155px,-58px)}90%,100%{transform:translate(206px,-58px)}}
@keyframes pocket-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pocket-book{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes pocket-steam{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-5px);opacity:1}}
@keyframes pocket-mini-train{0%,100%{transform:rotate(0)}50%{transform:rotate(2deg)}}
@media(max-width:359px){.pocket-hero{padding-left:16px;padding-right:16px}.pocket-section{padding-left:16px;padding-right:16px}.pocket h1{font-size:48px}html[lang="ja"] .pocket h1{font-size:35px}html[lang^="zh"] .pocket h1{font-size:37px}.pocket h2{font-size:27px}.pocket-fact-strip span{font-size:10.5px;padding:7px 8px}.route-choice{padding:10px 8px;grid-template-columns:24px 1fr;gap:5px}.route-choice .line-number{width:24px;height:24px}.route-choice .station b{font-size:13px}.route-choice strong{font-size:11px}.journey-stop{grid-template-columns:88px 1fr;gap:10px}.pocket-journey:before{left:42px}.pocket-meta{font-size:9px;gap:5px}.motion-toggle{padding:5px 7px}}
@media(prefers-reduced-motion:reduce){.pocket *, .pocket *::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}