/* DESIGN.md: shared compact editorial roles for guides and linked Busan tools.
   Loaded after legacy route CSS; the cartographic canvas is the only wide-shell exception. */
:root {
  --paper:#faf8f2; --pine:#356259; --clay:#a34b32; --ink:#283b35;
  --muted:#56614f; --text-secondary:#60675d; --text-summary:#697063;
  --line:#d6d5c9; --line-control:#bbb9ae; --line-shell:#cdcbbf;
  --line-filter:#d9d9cd; --surface-active:#e8ede5; --surface-nav:#faf8f2f5;
  --focus:#ab7b45;
  --font-ui:system-ui,-apple-system,sans-serif;
  --font-editorial:Georgia,'AppleMyungjo','YuMincho','Songti SC',serif;
  --font-meta:ui-monospace,monospace;
  --space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px;
  --space-10:10px; --space-12:12px; --space-14:14px; --space-16:16px;
  --space-18:18px; --space-20:20px; --space-22:22px; --space-24:24px;
  --space-26:26px; --space-30:30px;
  --type-meta:10px; --type-crumb:11px; --type-summary:12px;
  --type-control:13px; --type-dek:14px; --type-body:16px;
  --type-section:17px; --type-brand:23px; --type-nav-icon:21px;
  --type-title:clamp(27px,6.5vw,39px);
  --leading-title:1.32; --leading-summary:1.55; --leading-dek:1.65;
  --radius-control:4px; --control-min:44px; --control-input:48px;
  --control-padding:12px; --locale-width:110px;
  --header-height:66px; --shell-width:920px; --content-width:760px;
  --intro-width:570px;
  --nav-height:48px; --nav-width:76px; --bottom-clearance:76px;
  --thumb-width:64px; --thumb-height:60px; --row-gap:var(--space-12);
  --gutter:var(--space-18);
  /* Cartographic canvas needs a wider reading surface and a finite viewport. */
  --map-canvas-width:1180px; --map-height:540px; --map-min-height:350px;
  --map-mobile-min-height:270px; --map-panel-offset:92px;
}
body:has(.guide-shell), body[data-hub="busan"], .busan-tool {
  background:var(--paper); color:var(--ink); font-family:var(--font-ui);
  padding-bottom:calc(var(--bottom-clearance) + env(safe-area-inset-bottom));
}
.shared-site-header .shared-header-inner {
  max-width:var(--shell-width); min-height:var(--header-height); height:var(--header-height);
}
.shared-site-header .lang { border-radius:var(--radius-control); border-color:var(--line-control); }
.shared-site-header .lang select {
  width:var(--locale-width); max-width:var(--locale-width); min-height:var(--control-min);
  font:var(--type-summary)/1.4 var(--font-ui); color:var(--ink);
}
.editorial-wordmark { font-size:var(--type-brand); }
.editorial-article-nav {
  min-height:0; padding:var(--space-2) var(--space-8) env(safe-area-inset-bottom);
  border-color:var(--line-shell); background:var(--surface-nav);
}
.editorial-article-nav a {
  min-width:var(--control-min); width:var(--nav-width); min-height:var(--nav-height);
  height:var(--nav-height); flex:0 1 var(--nav-width); gap:0;
  padding:3px var(--space-2); font:var(--type-meta)/13px var(--font-ui);
  white-space:nowrap; text-align:center;
}
.editorial-article-nav a span:first-child { font-size:var(--type-nav-icon); line-height:var(--space-24); }
.editorial-article-nav a[aria-current] { background:var(--surface-active); color:var(--pine); }
.guide-shell, body[data-hub="busan"] main, .busan-tool--selector main {
  width:min(var(--content-width),calc(100% - 2 * var(--gutter)));
  margin:0 auto; padding:var(--space-16) 0 var(--space-30);
}
/* Maps require a wider canvas than reading pages; labels and controls still reuse the same roles. */
.busan-tool--map main { width:min(var(--map-canvas-width),calc(100% - 2 * var(--gutter))); margin:0 auto; padding:var(--space-16) 0 var(--space-30); }
.guide-shell .crumb, body[data-hub="busan"] .breadcrumbs, .busan-tool .breadcrumbs {
  margin:0 0 var(--space-12); color:var(--muted);
  font:var(--type-crumb)/1.9 var(--font-ui);
}
.guide-shell .crumb a, body[data-hub="busan"] .breadcrumbs a, .busan-tool .breadcrumbs a {
  display:inline-flex; align-items:center; min-height:var(--control-min);
  text-decoration:underline; text-underline-offset:3px;
}
/* Typography leads: no feature-size card around an introduction. */
.guide-shell .guide-intro, body[data-hub="busan"] .hub-hero, .busan-tool .hero {
  display:block; min-height:0; max-width:none;
  margin:0; padding:var(--space-4) 0 var(--space-16);
  border:0; border-radius:0; background:none; box-shadow:none;
}
.guide-shell .guide-intro h1, body[data-hub="busan"] .hub-hero h1, .busan-tool .hero h1 {
  max-width:var(--content-width); margin:var(--space-10) 0 var(--space-12);
  font:600 var(--type-title)/var(--leading-title) var(--font-editorial);
  letter-spacing:-.02em; color:var(--ink); word-break:keep-all; overflow-wrap:break-word;
}
.guide-shell .eyebrow, body[data-hub="busan"] .eyebrow, .busan-tool .eyebrow {
  color:var(--clay); font:var(--type-meta)/1.5 var(--font-meta);
  letter-spacing:.08em; margin:0;
}
.guide-shell .guide-intro > p:not(.eyebrow), body[data-hub="busan"] .lead,
.busan-tool .hero > p:not(.eyebrow) {
  max-width:var(--intro-width); margin:0; color:var(--text-secondary);
  font:var(--type-dek)/var(--leading-dek) var(--font-ui);
}
body[data-hub="busan"] .route-art { display:none; }
.guide-shell .start-link, body[data-hub="busan"] .busan-selector-cta,
.busan-tool .map-companion-cta {
  display:inline-flex; align-items:center; justify-content:flex-start;
  min-height:var(--control-min); padding:var(--space-8) var(--control-padding);
  margin:var(--space-16) 0 0; border:1px solid var(--pine);
  border-radius:var(--radius-control); background:transparent; color:var(--pine);
  font:600 var(--type-control)/1.4 var(--font-ui); text-decoration:none;
}
.guide-shell .start-link:hover, body[data-hub="busan"] .busan-selector-cta:hover,
.busan-tool .map-companion-cta:hover { background:var(--surface-active); color:var(--pine); }
.guide-shell .guide-groups { margin-top:var(--space-22); gap:var(--space-24); }
.guide-shell .guide-group header { margin:0 0 var(--space-10); }
.guide-shell .guide-group h2, body[data-hub="busan"] .section-heading h2,
body[data-hub="busan"] .busan-panel > h2, .busan-tool .list-panel h2 {
  font:650 var(--type-section)/1.45 var(--font-ui); letter-spacing:0; color:var(--ink);
}
.guide-shell .guide-group header p { font:var(--type-summary)/var(--leading-summary) var(--font-ui); color:var(--text-summary); }
.guide-shell .guide-cards, body[data-hub="busan"] .busan-grid { display:grid; grid-template-columns:1fr; gap:0; }
.guide-shell .guide-card, body[data-hub="busan"] .busan-card {
  display:flex; flex-direction:row; align-items:flex-start; gap:var(--row-gap);
  min-width:0; border:0; border-top:1px solid var(--line); border-radius:0;
  padding:var(--space-16) 0; background:transparent; box-shadow:none; transform:none;
}
.guide-shell .guide-card:hover, body[data-hub="busan"] .busan-card:hover {
  border-color:var(--line); background:transparent; transform:none; box-shadow:none;
}
.guide-shell .guide-card:hover h3, body[data-hub="busan"] .busan-card:hover h3 { text-decoration:underline; text-underline-offset:var(--space-4); }
.guide-shell .guide-card img, body[data-hub="busan"] .busan-card img {
  flex:none; width:var(--thumb-width); height:var(--thumb-height);
  aspect-ratio:auto; border-radius:0; object-fit:cover;
}
.guide-shell .guide-card-copy, body[data-hub="busan"] .busan-card-body {
  flex:1; min-width:0; padding:0; background:none;
}
.guide-shell .guide-card h3, body[data-hub="busan"] .busan-card h3,
.busan-tool--map .place-card h3 { margin:0 0 var(--space-4); color:var(--ink);
  font:650 var(--type-section)/1.4 var(--font-ui); letter-spacing:0; }
.guide-shell .guide-card p, body[data-hub="busan"] .busan-card p,
.busan-tool--map .place-card p { margin:var(--space-4) 0; color:var(--text-summary);
  font:var(--type-summary)/var(--leading-summary) var(--font-ui); }
.guide-shell .guide-card span, body[data-hub="busan"] .card-link {
  color:var(--pine); font:600 var(--type-control)/1.5 var(--font-ui);
}
.guide-shell .guide-outro { margin-top:var(--space-22); font:var(--type-summary)/var(--leading-summary) var(--font-ui); }
body[data-hub="busan"] .intro { display:block; margin:var(--space-12) 0 var(--space-16); border-left:2px solid var(--clay); padding-left:var(--space-14); }
body[data-hub="busan"] .intro > p, body[data-hub="busan"] .intro aside {
  display:block; margin:0; padding:0; border:0; border-radius:0; background:none;
  color:var(--text-secondary); font:var(--type-dek)/var(--leading-dek) var(--font-ui);
}
body[data-hub="busan"] .intro aside { display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-8); }
body[data-hub="busan"] .intro aside strong { color:var(--pine); font-size:var(--type-summary); }
body[data-hub="busan"] .busan-cta-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-14); }
body[data-hub="busan"] .busan-selector-cta { width:100%; margin:0; border:0; border-top:2px solid var(--pine); border-radius:0; padding:var(--space-10) 0 var(--space-4); }
body[data-hub="busan"] .busan-selector-cta:last-child { border-color:var(--clay); }
body[data-hub="busan"] .busan-catalog { margin-top:var(--space-22); }
body[data-hub="busan"] .section-heading { display:block; margin-bottom:var(--space-10); }
body[data-hub="busan"] .section-heading p { margin:0 0 var(--space-4); color:var(--clay); font:var(--type-meta)/1.5 var(--font-meta); }
body[data-hub="busan"] .busan-tabs { display:flex; flex-wrap:wrap; gap:var(--space-6); padding:0 0 var(--space-10); }
body[data-hub="busan"] .busan-tabs button, .busan-tool--map .filter {
  min-height:var(--control-min); border:0; border-bottom:1px solid var(--line-filter);
  border-radius:0; padding:0 var(--control-padding); background:none;
  color:var(--ink); font:var(--type-control)/1.4 var(--font-ui);
}
body[data-hub="busan"] .busan-tabs button[aria-selected="true"], .busan-tool--map .filter[aria-pressed="true"] {
  background:var(--surface-active); color:var(--pine);
  border:0; border-bottom:2px solid var(--pine);
}
body[data-hub="busan"] .busan-panel > h2 { margin:var(--space-16) 0 var(--space-8); }
body[data-hub="busan"] .busan-card dl { margin:var(--space-6) 0; gap:var(--space-4); }
body[data-hub="busan"] .busan-card dt, body[data-hub="busan"] .busan-card dd { font:var(--type-summary)/var(--leading-summary) var(--font-ui); }
.busan-tool--map .hero { padding-bottom:var(--space-8); }
.busan-tool--map .filters { margin:var(--space-12) 0 var(--space-8); gap:var(--space-6); padding:0; }
.busan-tool--map .status { margin:0 0 var(--space-8); color:var(--muted); font:var(--type-summary)/1.5 var(--font-ui); }
.busan-tool--map .map-layout { gap:var(--space-14); }
.busan-tool--map .map-panel, .busan-tool--map .list-panel { border:1px solid var(--line); border-radius:var(--radius-control); background:var(--paper); }
.busan-tool--map .map-panel { top:calc(var(--header-height) + var(--space-10)); }
.busan-tool--map .map { height:min(60vh,var(--map-height)); min-height:var(--map-min-height); }
.busan-tool--map .list-panel { padding:var(--space-16); max-height:calc(100vh - var(--map-panel-offset)); }
.busan-tool--map .place-card { padding:var(--space-16) 0; border-color:var(--line); }
.busan-tool--map .place-details dl { gap:var(--space-4) var(--space-8); margin:var(--space-8) 0; }
.busan-tool--selector .selector-layout { gap:var(--space-14); }
.busan-tool--selector main { display:flex; flex-direction:column; }
.busan-tool--selector .breadcrumbs { order:0; }
.busan-tool--selector .hero { order:1; }
.busan-tool--selector .map-companion-cta { order:2; align-self:flex-start; margin:0 0 var(--space-16); }
.busan-tool--selector .selector-layout { order:3; }
.busan-tool--selector form, .busan-tool--selector #results {
  padding:var(--space-16) 0; border:0; border-top:1px solid var(--line);
  border-radius:0; background:transparent; box-shadow:none;
}
.busan-tool--selector form h2, .busan-tool--selector #results h2 {
  color:var(--ink); font:650 var(--type-section)/1.45 var(--font-ui);
}
.busan-tool--selector fieldset { margin:var(--space-20) 0; }
.busan-tool--selector fieldset label {
  min-height:var(--control-min); padding:var(--space-8) var(--control-padding);
  border-radius:var(--radius-control); font:var(--type-control)/1.4 var(--font-ui);
}
.busan-tool--selector fieldset label:has(input:checked) { background:var(--surface-active); }
.busan-tool--selector select { min-height:var(--control-input); font:var(--type-control)/1.4 var(--font-ui); }
.busan-tool--selector .hero .privacy { background:var(--surface-active); }
.busan-tool--selector .submit, .busan-tool--selector .reset { min-height:var(--control-min); padding:0 var(--control-padding); font:var(--type-control)/1.4 var(--font-ui); border-radius:var(--radius-control); }
.guide-shell a:focus-visible, body[data-hub="busan"] a:focus-visible, body[data-hub="busan"] button:focus-visible,
.busan-tool a:focus-visible, .busan-tool button:focus-visible, .busan-tool select:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
@media(min-width:800px) { :root { --thumb-width:88px; --thumb-height:72px; } }
@media(max-width:800px) { .busan-tool--map .map-panel { position:static; } .busan-tool--map .map { height:42vh; min-height:var(--map-mobile-min-height); } .busan-tool--map .list-panel { max-height:none; } }
@media(max-width:350px) { :root { --gutter:var(--space-14); --thumb-width:48px; --thumb-height:52px; --row-gap:var(--space-8); --type-section:16px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }