.elementor-8490 .elementor-element.elementor-element-d6c9f85{--display:flex;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8490 .elementor-element.elementor-element-a5b53da.elementor-element{--align-self:flex-start;}.elementor-8490 .elementor-element.elementor-element-a5b53da{text-align:left;}.elementor-8490 .elementor-element.elementor-element-a5b53da ul.hfe-breadcrumbs li{margin-right:10px;}.elementor-8490 .elementor-element.elementor-element-a5b53da .hfe-breadcrumbs-item{font-size:16px;}.elementor-8490 .elementor-element.elementor-element-9241446{--display:flex;--min-height:400px;}.elementor-8490 .elementor-element.elementor-element-9241446:not(.elementor-motion-effects-element-type-background), .elementor-8490 .elementor-element.elementor-element-9241446 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/greatwideopen.blog/wp-content/uploads/2026/07/gwo-south-korea-bike.jpg?fit=1920%2C600&ssl=1");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8490 .elementor-element.elementor-element-bb4a9b3{--display:flex;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-8490 .elementor-element.elementor-element-d6c9f85{--content-width:760px;}}/* Start custom CSS for container, class: .elementor-element-d6c9f85 *//* ==========================================================================
   KR-31 KR-05 · Busan (city / destination hub) KR-36 · Cycling pages (Brief 8) — PAGE-LEVEL styles

   WHERE THIS GOES
   Elementor > edit the KR-31 (routes) OR KR-36 (overview) page > Page Settings (gear icon) > Advanced >
   Custom CSS.  Placing it there loads these rules on THIS page only, not on
   every page of the site.

   REQUIRES the canonical tokens from gwo-tokens.css to be present in
   Appearance > Customize > Additional CSS (same set the KR-03 / KR-09 pages use:
   --gwo-cream, --gwo-ink, --gwo-heading, --gwo-link, --gwo-accent, --gwo-gold,
   --gwo-muted, --gwo-faint, --gwo-card, --gwo-rule, --gwo-ok, --gwo-maxw-read,
   --gwo-radius).  Nothing is redefined here, so no legacy component is shadowed.

   SCOPING
   Every rule is scoped under .gwo-hub. Nothing here can affect any other page.
   The HTML must therefore stay wrapped in <div class="gwo-hub"> — remove that
   wrapper and the page loses all styling.

   NO H1 is styled or emitted here — the WordPress/Elementor template supplies
   the page H1 ("Busan"). This sheet starts at H2.
   ========================================================================== */

.gwo-hub{
  /* Constrain the whole page to the site reading width and centre it.
     Fallback 880px means the page can never render full-bleed even if the
     --gwo-maxw-read token is absent. Raise the fallback if you want the
     card grids wider. */
  max-width:var(--gwo-maxw-read, 880px);
  margin:0 auto;
  padding:0 22px;
  color:var(--gwo-ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.gwo-hub *{box-sizing:border-box}

@media (prefers-reduced-motion:reduce){
  .gwo-hub *{transition:none!important; animation:none!important}
}

.gwo-hub .wrap{max-width:var(--gwo-maxw-read); margin:0 auto; padding:0 22px}

.gwo-hub h2,
.gwo-hub h3,
.gwo-hub h4{color:var(--gwo-heading); font-weight:500; line-height:1.22; margin:0}
.gwo-hub h2{font-size:clamp(23px,3.4vw,28px); margin:38px 0 14px}
.gwo-hub h3{font-size:20px; margin:26px 0 8px}
.gwo-hub h4{font-size:17px; margin:0 0 4px}
.gwo-hub p{margin:0 0 16px}
.gwo-hub a{color:var(--gwo-link); text-underline-offset:2px}
.gwo-hub a:hover{color:var(--gwo-accent)}
.gwo-hub :focus-visible{outline:2px solid var(--gwo-accent); outline-offset:3px; border-radius:2px}
.gwo-hub .lead{font-size:19px; color:var(--gwo-muted); max-width:62ch}
.gwo-hub .kicker{font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gwo-faint); margin:0 0 10px}
.gwo-hub .skip{position:absolute; left:-9999px}
.gwo-hub .skip:focus{position:static; display:inline-block; margin:8px; padding:8px 14px;
  background:var(--gwo-accent); color:#fff}

/* ------------------------------------------------------ suitability strip */
.gwo-hub .suit{list-style:none; margin:22px 0 8px; padding:16px 18px;
  background:var(--gwo-card); border:1px solid var(--gwo-rule);
  border-top:4px solid var(--gwo-gold); border-radius:0 0 10px 10px;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px 18px}
.gwo-hub .suit li{min-width:0}
.gwo-hub .suit .k{display:block; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gwo-faint); margin:0 0 3px}
.gwo-hub .suit .v{display:block; font-size:15px; color:var(--gwo-heading); font-weight:500;
  line-height:1.35}

/* ------------------------------------------------------------- callout */
.gwo-hub .callout{background:#F0E2C8; border:1px solid #E4Cf9f; border-radius:var(--gwo-radius);
  padding:16px 20px; margin:24px 0}
.gwo-hub .callout p{margin:0 0 8px; font-size:15.5px; color:#4A3A18}
.gwo-hub .callout p:last-child{margin:0}
.gwo-hub .callout strong{color:#5F4410}

/* --------------------------------------------------------- figure / map */
.gwo-hub figure{margin:24px 0}
.gwo-hub figure img{width:100%; height:auto; border-radius:var(--gwo-radius); display:block}
.gwo-hub figcaption{font-size:13px; color:var(--gwo-faint); margin-top:8px}

/* ----------------------------------------------------- area / region cards */
.gwo-hub .areas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px; margin:18px 0 8px; padding:0; list-style:none}
.gwo-hub .area{background:var(--gwo-card); border:1px solid var(--gwo-rule);
  border-radius:10px; padding:18px 20px}
.gwo-hub .area h3{margin:0 0 6px; font-size:18px}
.gwo-hub .area p{font-size:15px; color:var(--gwo-muted); line-height:1.55; margin:0 0 12px}
.gwo-hub .area dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 10px;
  font-size:13.5px}
.gwo-hub .area dt{color:var(--gwo-faint); font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; font-size:11.5px; padding-top:2px}
.gwo-hub .area dd{margin:0; color:var(--gwo-ink)}

/* --------------------------------------------------------- place cards */
.gwo-hub .places{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px; margin:18px 0 8px; padding:0; list-style:none}
.gwo-hub .place{background:var(--gwo-card); border:1px solid var(--gwo-rule);
  border-radius:10px; overflow:hidden; display:flex; flex-direction:column}
.gwo-hub .place img{width:100%; height:170px; object-fit:cover; display:block; background:#e9e2d2}
.gwo-hub .place .body{padding:14px 16px 16px}
.gwo-hub .place h3{margin:0 0 5px; font-size:17px}
.gwo-hub .place p{margin:0; font-size:14.5px; color:var(--gwo-muted); line-height:1.5}
.gwo-hub .place .best{display:inline-block; margin:0 0 8px; font-size:11.5px; font-weight:500;
  letter-spacing:.03em; padding:3px 9px; border-radius:12px; background:#E6F1FB; color:#0C447C}

/* ------------------------------------------------------- start-here list */
.gwo-hub .startlist{list-style:none; padding:0; margin:16px 0 8px; counter-reset:s;
  border:1px solid var(--gwo-rule); border-radius:10px; background:var(--gwo-card); overflow:hidden}
.gwo-hub .startlist li{counter-increment:s; display:flex; gap:14px; align-items:flex-start;
  padding:14px 18px; border-top:1px solid #EDE6D6}
.gwo-hub .startlist li:first-child{border-top:0}
.gwo-hub .startlist li::before{content:counter(s); flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--gwo-accent); color:#fff; font-size:14px; font-weight:500;
  display:flex; align-items:center; justify-content:center; margin-top:1px}
.gwo-hub .startlist b{color:var(--gwo-heading); font-weight:500}
.gwo-hub .startlist span{display:block; font-size:15px; color:var(--gwo-muted); line-height:1.5}

/* ----------------------------------------------------------- data table */
.gwo-hub .tablewrap{overflow-x:auto; margin:14px 0 8px}
.gwo-hub table{width:100%; border-collapse:collapse; font-size:15px; min-width:420px}
.gwo-hub caption{caption-side:bottom; text-align:left; font-size:12.5px;
  color:var(--gwo-faint); padding-top:8px}
.gwo-hub th,.gwo-hub td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--gwo-rule)}
.gwo-hub thead th{background:var(--gwo-heading); color:#F3ECDC; font-weight:500;
  border-bottom:0; font-size:13.5px; letter-spacing:.02em}
.gwo-hub tbody tr:nth-child(even){background:var(--gwo-card)}

/* --------------------------------------------------------------- myths */
.gwo-hub .myths{list-style:none; padding:0; margin:16px 0 8px; display:grid; gap:12px}
.gwo-hub .myth{background:var(--gwo-card); border:1px solid var(--gwo-rule);
  border-left:4px solid var(--gwo-gold); border-radius:0 8px 8px 0; padding:14px 18px}
.gwo-hub .myth .m{display:block; font-weight:500; color:var(--gwo-heading); margin:0 0 4px}
.gwo-hub .myth .r{display:block; font-size:15px; color:var(--gwo-muted); line-height:1.55}
.gwo-hub .myth .r b{color:var(--gwo-ok); font-weight:500}

/* --------------------------------------------------------- onward nav */
.gwo-hub .onward{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  margin:18px 0 8px}
.gwo-hub .onward .col{background:var(--gwo-card); border:1px solid var(--gwo-rule);
  border-radius:10px; padding:16px 18px}
.gwo-hub .onward h4{font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gwo-faint); margin:0 0 10px}
.gwo-hub .onward ul{list-style:none; margin:0; padding:0}
.gwo-hub .onward li{margin:0 0 8px; font-size:15px; line-height:1.4}
.gwo-hub .onward li:last-child{margin:0}

/* ------------------------------------------------------------- FAQ */
.gwo-hub .faq{margin:16px 0 8px}
.gwo-hub .faq details{background:var(--gwo-card); border:1px solid var(--gwo-rule);
  border-radius:var(--gwo-radius); margin:0 0 10px}
.gwo-hub .faq details[open]{border-color:var(--gwo-gold)}
.gwo-hub .faq summary{cursor:pointer; padding:14px 16px; font-size:16px; font-weight:500;
  color:var(--gwo-heading); list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:12px}
.gwo-hub .faq summary::-webkit-details-marker{display:none}
.gwo-hub .faq summary::after{content:"+"; color:var(--gwo-accent); font-size:20px; line-height:1}
.gwo-hub .faq details[open] summary::after{content:"\2013"}
.gwo-hub .faq .a{padding:0 16px 16px; font-size:15px; color:var(--gwo-muted); line-height:1.6}
.gwo-hub .faq .a p{margin:0}

/* --------------------------------------------------------- external links */
.gwo-hub .ext{font-size:15px; color:var(--gwo-muted); line-height:1.7}
.gwo-hub .seealso{margin-top:28px; padding:16px 20px; background:var(--gwo-card);
  border:1px solid var(--gwo-rule); border-radius:10px; font-size:16px}

/* ============================================================ responsive */
@media (max-width:720px){
  .gwo-hub .suit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gwo-hub .areas,
  .gwo-hub .places,
  .gwo-hub .onward{grid-template-columns:1fr}
}

/* ============================================================ CYCLING-PAGE COMPONENTS
   Added for KR-31 (route comparison) and KR-36 (overview). Scoped under .gwo-hub,
   so the base styles, tokens and the max-width fix above all apply. Paste this whole
   file into BOTH pages' Custom CSS (they are siblings and share styling). */

.gwo-hub .planning{background:#F0E2C8; border:1px solid #E4CF9F; border-radius:var(--gwo-radius);
  padding:14px 18px; margin:20px 0; font-size:15px; color:#4A3A18}
.gwo-hub .planning b{color:#5F4410}

/* "Is this for you?" verdict panel */
.gwo-hub .verdict{list-style:none; padding:18px 20px; margin:16px 0; background:var(--gwo-card);
  border:1px solid var(--gwo-rule); border-left:4px solid var(--gwo-gold);
  border-radius:0 8px 8px 0; display:grid; gap:11px}
.gwo-hub .verdict li{font-size:15px; line-height:1.5; color:var(--gwo-muted)}
.gwo-hub .verdict b{color:var(--gwo-heading); font-weight:500}

/* route entry */
.gwo-hub .route{background:var(--gwo-card); border:1px solid var(--gwo-rule); border-radius:10px;
  padding:18px 20px; margin:0 0 16px}
.gwo-hub .route h3{margin:0 0 4px; font-size:19px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.gwo-hub .route .n{flex:0 0 auto; font-size:13px; font-weight:500; color:#fff; background:var(--gwo-accent);
  border-radius:50%; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center}
.gwo-hub .route .spec{font-size:13.5px; color:var(--gwo-faint); font-weight:500; margin:0 0 10px;
  padding-bottom:10px; border-bottom:1px solid #EDE6D6}
.gwo-hub .route p{font-size:15px; color:var(--gwo-muted); line-height:1.6; margin:0 0 10px}
.gwo-hub .route p:last-child{margin:0}
.gwo-hub .route .say b{color:var(--gwo-heading); font-weight:500}
.gwo-hub .route .flag{margin-top:10px; font-size:13.5px; color:#6B4A1C; background:#F0E2C8;
  border-radius:8px; padding:8px 12px}

/* choose list & practical advice */
.gwo-hub .choose{list-style:none; padding:0; margin:16px 0; display:grid; gap:8px}
.gwo-hub .choose li{background:var(--gwo-card); border:1px solid var(--gwo-rule); border-radius:8px;
  padding:10px 14px; font-size:15px; color:var(--gwo-muted)}
.gwo-hub .choose b{color:var(--gwo-heading); font-weight:500}
.gwo-hub .advice h3{font-size:18px; margin:22px 0 6px}/* End custom CSS */