/* Japan-guide의 사진·목록 중심 구성을 참고한 서울 에디션.
   색상은 site.css의 기존 서울 테마를 그대로 사용한다. */
.hub-icon{display:inline-block;vertical-align:middle;flex-shrink:0}
.hub-home{padding:0}
.hub-hero{position:relative;isolation:isolate;min-height:480px;display:flex;align-items:center;background:var(--ez-dark);color:var(--ez-on-primary);overflow:hidden}
.hub-hero-image{position:absolute;inset:0;z-index:-2}
.hub-hero-image>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 53%}
.hub-hero::before{content:"";position:absolute;inset:0;background:rgba(15,35,28,.36);z-index:-1}
.hub-hero-inner{padding-top:52px;padding-bottom:56px}
.hub-hero-copy{max-width:580px}
.hub-hero-copy .hub-eyebrow,.hub-hero-copy h1,.hub-hero-copy .hub-hero-sub{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.hub-eyebrow{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;margin:0 0 18px;color:var(--ez-on-primary)}
.hub-eyebrow>span{display:block;width:5px;height:18px;background:var(--ez-clay)}
.hub-hero h1{color:var(--ez-on-primary);font-size:48px;line-height:1.25;letter-spacing:-1.6px;font-weight:700;margin:0 0 18px;word-break:keep-all}
.hub-hero-sub{font-size:15px;line-height:1.8;color:var(--ez-on-primary);margin:0 0 26px}
.hub-hero-link{display:inline-flex;align-items:center;gap:24px;padding:12px 20px;border-radius:4px;background:var(--ez-card);color:var(--ez-dark);text-decoration:none;font-size:13px;font-weight:600;border:1px solid var(--ez-line)}
.hub-hero-link:hover{background:var(--ez-soft-brand)}
.hub-hero-link svg{width:18px;height:18px}
.hub-hero-image figcaption{position:absolute;right:32px;bottom:17px;padding:4px 9px;font-size:11px;color:var(--ez-on-primary);background:var(--ez-dark)}
.hub-quickbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--ez-line);padding:0;margin:0 0 42px;background:var(--ez-card)}
.hub-quickbar>a{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px 8px;font-size:13px;font-weight:600;text-decoration:none;color:var(--ez-ink);border-bottom:3px solid transparent}
.hub-quickbar>a:hover{color:var(--ez-primary);border-bottom-color:var(--ez-primary);background:var(--ez-soft-brand)}
.hub-quickbar svg{width:20px;height:20px;color:var(--ez-primary)}
.hub-section{margin:0 0 58px}
.hub-section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;padding-top:18px;border-top:3px solid var(--ez-primary)}
.hub-section-heading h2{font-size:26px;font-weight:700;line-height:1.4;letter-spacing:-.8px;margin:0;color:var(--ez-heading);scroll-margin-top:100px}
.hub-section-heading p{font-size:14px;line-height:1.7;color:var(--ez-muted);margin:6px 0 0}
.hub-all-link{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;font-size:12px;white-space:nowrap;font-weight:600;color:var(--ez-primary);text-decoration:none;padding:5px 0}
.hub-all-link svg{width:16px;height:16px}
.hub-all-link:hover{text-decoration:underline;text-underline-offset:4px}
.hub-secondary-links{display:flex;gap:32px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--ez-line)}
.hub-secondary-links>a{display:inline-flex;align-items:center;gap:16px;font-size:13px;color:var(--ez-primary);text-decoration:none}
.hub-secondary-links>a:hover{text-decoration:underline}
.hub-secondary-links svg{width:16px;height:16px}
.hub-region-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hub-destination{display:block;min-width:0;text-decoration:none;scroll-margin-top:100px}
.hub-destination>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:5px}
.hub-destination>div{padding:14px 0 0}
.hub-destination h3{display:flex;align-items:center;justify-content:space-between;font-size:21px;font-weight:700;line-height:1.4;color:var(--ez-heading);margin:0 0 6px}
.hub-destination h3 svg{width:18px;height:18px;color:var(--ez-primary)}
.hub-destination p{font-size:14px;line-height:1.6;color:var(--ez-muted);margin:0}
.hub-destination:hover h3,.hub-neighborhood:hover h4,.hub-essential:hover h3{color:var(--ez-primary);text-decoration:underline;text-underline-offset:4px}
.hub-neighborhood-heading{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--ez-line);padding-top:24px;margin:30px 0 18px}
.hub-neighborhood-heading h3{font-size:18px;font-weight:600;line-height:1.5;margin:0}
.hub-neighborhood-heading p{font-size:13px;color:var(--ez-muted);margin:0}
.hub-neighborhood-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hub-neighborhood{min-width:0}
.hub-neighborhood>a{display:grid;grid-template-columns:100px 1fr;gap:15px;min-height:100px;text-decoration:none}
.hub-neighborhood-image{overflow:hidden;border-radius:4px;height:100px;background:var(--ez-soft-brand)}
.hub-neighborhood-image img{display:block;width:100%;height:100%;object-fit:cover}
.hub-neighborhood-body{display:flex;align-items:center;min-width:0}
.hub-neighborhood h4{font-size:16px;font-weight:600;line-height:1.5;margin:0 0 6px;color:var(--ez-heading)}
.hub-neighborhood p{font-size:12px;line-height:1.7;color:var(--ez-muted);margin:0}
.hub-neighborhood-body .hub-arrow{display:none}
.hub-essential-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.hub-essential{display:flex;flex-direction:column;min-width:0;border-bottom:1px solid var(--ez-line)}
.hub-essential-link{display:flex;flex-direction:column;flex:1;text-decoration:none;min-width:0}
.hub-thumbnail{position:relative;aspect-ratio:16/10;border-radius:5px;overflow:hidden;background:var(--ez-soft-brand)}
.hub-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.hub-badge{position:absolute;left:10px;top:10px;font-size:11px;font-weight:600;line-height:1.4;padding:5px 8px;background:var(--ez-card);color:var(--ez-dark);border-radius:3px}
.hub-essential-body{display:flex;flex-direction:column;flex:1;padding:15px 0 9px;min-width:0}
.hub-essential h3{font-size:17px;font-weight:600;line-height:1.5;margin:0 0 7px;color:var(--ez-heading)}
.hub-essential-body>p{font-size:13px;line-height:1.7;margin:0 0 12px;color:var(--ez-muted)}
.hub-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;font-size:12px;font-weight:500;color:var(--ez-primary)}
.hub-arrow{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;color:var(--ez-primary)}
.hub-arrow svg{width:18px;height:18px}
.hub-photo-caption{font-size:10px;line-height:1.5;color:var(--ez-muted);padding:0 0 14px;margin:0}
.hub-utility-banner{display:flex;align-items:center;gap:20px;padding:24px;border:1px solid var(--ez-line);background:var(--ez-soft-brand);border-radius:5px;margin:28px 0 0}
.hub-banner-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;color:var(--ez-primary)}
.hub-banner-icon svg{width:32px;height:32px}
.hub-utility-banner h3{font-size:19px;font-weight:600;line-height:1.5;margin:0 0 4px}
.hub-utility-banner p{font-size:13px;line-height:1.7;margin:0;color:var(--ez-muted)}
.hub-utility-banner>a{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;color:var(--ez-primary);white-space:nowrap;margin-left:auto;text-decoration:none}
.hub-utility-banner>a:hover{text-decoration:underline}
.hub-utility-banner>a svg{width:18px;height:18px}
.hub-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.hub-help-grid>a{display:flex;align-items:center;gap:18px;padding:22px 2px;border-bottom:1px solid var(--ez-line);text-decoration:none;min-width:0}
.hub-help-icon{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;color:var(--ez-primary);background:var(--ez-soft-brand);border-radius:4px}
.hub-help-grid>a:nth-child(2n) .hub-help-icon{color:var(--ez-clay)}
.hub-help-grid h3{font-size:16px;font-weight:600;line-height:1.5;margin:0 0 3px}
.hub-help-grid p{font-size:13px;color:var(--ez-muted);margin:0}
.hub-help-grid>a>.hub-icon{width:18px;height:18px;color:var(--ez-primary);margin-left:auto}
.hub-help-grid>a:hover h3{text-decoration:underline;text-underline-offset:4px}
.hub-practical-section{margin-bottom:0}
/* The map keeps its existing camera animation, real boundaries and all links. */
.hub-attractions-section .ez-metro-choices{gap:0;border-bottom:1px solid var(--ez-line);margin-bottom:20px}
.hub-attractions-section .ez-metro-choice,.hub-attractions-section .ez-metro-overview{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent}
.hub-attractions-section .ez-metro-choice:hover,.hub-attractions-section .ez-metro-choice[aria-pressed=true],.hub-attractions-section .ez-metro-overview:hover,.hub-attractions-section .ez-metro-overview[aria-pressed=true]{border-bottom-color:var(--ez-primary);background:var(--ez-soft-brand)}
.hub-attractions-section .ez-metro-layout{border-radius:5px}
@media(min-width:761px){.hub-hero-copy{padding:24px 28px;background:rgba(25,61,50,.36);border-left:3px solid var(--ez-clay)}}
@media(max-width:1000px){.hub-hero{min-height:430px}.hub-hero h1{font-size:42px}.hub-essential-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.hub-neighborhood-grid{grid-template-columns:1fr}.hub-neighborhood>a{grid-template-columns:110px 1fr;gap:12px}.hub-neighborhood-image{height:95px}}
@media(max-width:760px){
 .hub-hero{min-height:420px;align-items:flex-end}.hub-hero-inner{padding-top:42px;padding-bottom:44px}.hub-hero-copy{max-width:400px;padding:18px;background:rgba(25,61,50,.42);border-left:3px solid var(--ez-clay)}.hub-hero h1{font-size:36px;letter-spacing:-1px}.hub-hero-sub{font-size:14px}.hub-hero-image figcaption{right:16px;bottom:9px;font-size:10px}
 .hub-quickbar{margin-bottom:30px}.hub-quickbar>a{font-size:12px;gap:7px;flex-direction:column;padding:18px 4px}.hub-quickbar svg{width:19px;height:19px}.hub-section{margin-bottom:42px}.hub-section-heading h2{font-size:23px}.hub-essential-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.hub-region-grid{gap:18px}.hub-destination h3{font-size:19px}.hub-destination p{font-size:12px}.hub-neighborhood-grid{grid-template-columns:1fr;gap:14px}.hub-neighborhood>a{grid-template-columns:110px 1fr;min-height:90px}.hub-neighborhood-image{height:90px}.hub-neighborhood p{font-size:13px}.hub-neighborhood-body{justify-content:space-between}.hub-neighborhood-body .hub-arrow{display:grid}.hub-utility-banner{flex-wrap:wrap;gap:14px}.hub-utility-banner>a{margin-left:58px}.hub-help-grid{gap:0 24px}
}
@media(max-width:540px){
 .hub-hero{min-height:400px}.hub-hero-image>img{object-position:59% 50%}.hub-hero-copy{padding:18px 16px;max-width:330px}.hub-hero h1{font-size:30px;letter-spacing:-.7px;margin-bottom:12px}.hub-hero-inner{padding-top:34px;padding-bottom:34px}.hub-eyebrow{font-size:11px;margin-bottom:12px}.hub-hero-sub{font-size:13px;margin-bottom:18px}.hub-hero-link{font-size:12px;padding:10px 14px;gap:20px}
 .hub-quickbar{overflow:auto;grid-template-columns:repeat(6,minmax(72px,1fr));scrollbar-width:none;margin-bottom:30px}.hub-quickbar::-webkit-scrollbar{display:none}.hub-quickbar>a{white-space:nowrap;padding:16px 4px;font-size:11px}
 .hub-section-heading{gap:10px;padding-top:14px;margin-bottom:18px;align-items:flex-start}.hub-section-heading h2{font-size:21px;letter-spacing:-.6px}.hub-section-heading p{font-size:12px}.hub-all-link{font-size:11px;gap:4px;margin-top:2px}.hub-all-link svg{width:14px;height:14px}.hub-section{margin-bottom:36px}.hub-secondary-links{gap:16px 24px;padding:18px 0}.hub-secondary-links>a{font-size:12px;gap:9px}
 .hub-region-grid{grid-template-columns:1fr;gap:22px}.hub-destination>img{aspect-ratio:16/9}.hub-destination>div{padding:12px 0 0}.hub-destination h3{font-size:20px;margin-bottom:4px}.hub-destination p{font-size:13px}.hub-neighborhood-heading{display:block;padding-top:20px;margin:24px 0 18px}.hub-neighborhood-heading h3{font-size:17px}.hub-neighborhood-heading p{font-size:12px;margin-top:4px}
 .hub-essential-grid{gap:22px 14px}.hub-thumbnail{aspect-ratio:4/3}.hub-essential h3{font-size:15px}.hub-essential-body>p{font-size:12px}.hub-card-bottom{font-size:11px;line-height:1.5}.hub-photo-caption{font-size:10px}.hub-badge{font-size:10px;padding:4px 6px;left:7px;top:7px}.hub-essential-body{padding-top:12px}
 .hub-utility-banner{padding:18px 16px;display:grid;grid-template-columns:32px 1fr;gap:12px}.hub-banner-icon{width:32px;height:36px}.hub-banner-icon svg{width:26px;height:26px}.hub-utility-banner h3{font-size:17px}.hub-utility-banner p{font-size:12px}.hub-utility-banner>a{grid-column:2;margin:0;font-size:12px;white-space:normal}.hub-help-grid{grid-template-columns:1fr}.hub-help-grid>a{padding:18px 0;gap:15px}.hub-help-grid h3{font-size:15px}.hub-help-grid p{font-size:12px}.hub-practical-section{margin-bottom:0}
}
.hub-attractions-section .ez-metro-overview[aria-pressed=true]{color:var(--ez-dark)}
.hub-attractions-section .ez-metro-overview[aria-pressed=true] small{color:var(--ez-muted)}

/* Seoul-only day/night gallery; the established Seoul palette is retained. */
.hub-hero[data-hub-gallery]{min-height:510px}
.hub-hero[data-hub-gallery] .hub-hero-inner{padding-top:40px;padding-bottom:100px}
.hub-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.hub-hero-slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
.hub-hero[data-failed=true] .hub-hero-slide{opacity:0;visibility:hidden}
.hub-hero-toolbar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:18px}
.hub-hero-location{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:13px;line-height:1.5;padding:9px 13px;background:var(--ez-dark);color:var(--ez-on-primary);border-radius:4px}
.hub-hero-period{font-size:11px;font-weight:700;padding-right:10px;border-right:1px solid currentColor}
.hub-hero-controls,.hub-hero-playback,.hub-hero-modes{display:flex;align-items:center;gap:4px}
.hub-hero-controls{padding:4px;border:1px solid transparent;background:transparent;color:var(--ez-on-primary);text-shadow:0 1px 3px rgba(0,0,0,.65);border-radius:5px;flex-shrink:0;gap:10px}
.hub-hero-controls button{display:grid;place-items:center;min-width:38px;min-height:38px;border:0;border-radius:3px;padding:0 9px;background:transparent;color:inherit;text-shadow:inherit;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.hub-hero-controls button:hover{background:rgba(255,255,255,.1)}
.hub-hero-modes button[aria-pressed=true]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.hub-hero-controls button:focus-visible{outline:2px solid var(--ez-on-primary);outline-offset:2px}
.hub-hero-controls button:disabled{opacity:.45;cursor:default}
.hub-hero-modes{border-right:1px solid rgba(255,255,255,.35);padding-right:10px}
.hub-hero-playback [data-hub-prev],.hub-hero-playback [data-hub-next]{font-size:23px;font-weight:400;min-width:30px;padding:0 5px}
.hub-hero-playback [data-hub-count]{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:42px;text-align:center}
.hub-hero-playback [data-hub-toggle]{min-width:66px}
@media(max-width:760px){
 .hub-hero[data-hub-gallery]{min-height:500px;align-items:center}
 .hub-hero[data-hub-gallery] .hub-hero-inner{padding-top:28px;padding-bottom:140px}
 .hub-hero-toolbar{bottom:14px;align-items:flex-start;flex-direction:column;gap:10px}
 .hub-hero-location{font-size:12px;padding:6px 10px}
 .hub-hero-controls{justify-content:space-between;gap:6px;max-width:100%}
 .hub-hero-controls button{min-height:40px;min-width:36px;padding:0 8px}
 .hub-hero-modes{padding-right:6px}
}
@media(max-width:380px){
 .hub-hero-controls{gap:4px;padding:3px}
 .hub-hero-controls button{min-width:32px;padding:0 6px;font-size:11px}
 .hub-hero-playback [data-hub-toggle]{min-width:54px}
 .hub-hero-playback [data-hub-prev],.hub-hero-playback [data-hub-next]{min-width:24px}
}
@media(prefers-reduced-motion:reduce){.hub-hero-slide{transition:none}}

/* Finger-sized gallery controls; narrow cover screens use two control rows. */
@media(max-width:1024px),(pointer:coarse){
 .hub-hero-controls button,.hub-hero-playback [data-hub-prev],.hub-hero-playback [data-hub-next]{min-width:44px;min-height:44px}
}
@media(min-width:761px) and (max-width:1000px){
 .hub-hero-toolbar{flex-wrap:wrap;gap:8px}
 .hub-hero[data-hub-gallery] .hub-hero-inner{padding-bottom:130px}
}
@media(max-width:400px){
 .hub-hero-controls{flex-direction:column;align-items:flex-start;gap:4px;padding:0}
 .hub-hero-modes{border-right:0;padding-right:0}
 .hub-hero[data-hub-gallery]{min-height:550px}
 .hub-hero[data-hub-gallery] .hub-hero-inner{padding-bottom:185px}
}