:root{
  --k-blue:#0047A0;
  --k-blue-deep:#003478;
  --k-navy:#071F46;
  --k-navy-2:#0B2C61;
  --k-red:#CD2E3A;
  --k-ink:#101828;
  --k-muted:#667085;
  --k-line:#D7E0EC;
  --k-soft:#F3F6FA;
  --k-blue-soft:#EAF2FF;
  --k-red-soft:#FCEDEF;
  --k-shadow:0 22px 55px rgba(0,52,120,.13);
  --k-node:conic-gradient(var(--k-red) 0 50%,var(--k-blue) 50% 100%);
}

/* =========================================================
   KoriNavi identity: Korean city wayfinding + travel editorial
   ========================================================= */
body{background:#fff;color:var(--k-ink)}

/* ---------- Brand masthead ---------- */
.site-header{
  background:rgba(7,31,70,.97);
  border:0;
  box-shadow:0 8px 28px rgba(0,20,52,.16);
  backdrop-filter:blur(14px);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:4px;
  background:linear-gradient(90deg,var(--k-blue) 0 68%,var(--k-red) 68% 78%,rgba(255,255,255,.18) 78% 100%);
}
.nav{min-height:78px}
.site-header .brand{color:#fff;gap:12px;font-weight:950;letter-spacing:-.045em}
.brand-mark{
  position:relative;
  width:44px;height:44px;
  display:grid;place-items:center;
  flex:0 0 44px;
}
.brand-mark::after{content:none}
.brand-mark img{display:block;width:44px;height:44px}
.brand-word{display:inline-block;line-height:1}
.site-header .brand-word::after{
  content:"KOREA DECISION GUIDE";
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.58);
  font-size:7px;
  font-weight:850;
  letter-spacing:.18em;
}
.site-header .nav-links{color:rgba(255,255,255,.78)}
.site-header .nav-links a{position:relative;border:0}
.site-header .nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:18px;
  height:3px;
  background:var(--k-red);
  transition:right .18s ease;
}
.site-header .nav-links a:hover,
.site-header .nav-links a[aria-current="page"]{color:#fff;border:0}
.site-header .nav-links a:hover::after,
.site-header .nav-links a[aria-current="page"]::after{right:0}
.nav-utility{
  border:1px solid rgba(255,255,255,.35);
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  background:#fff;
  color:var(--k-navy);
  box-shadow:none;
}
.nav-utility:hover{background:var(--k-red);border-color:var(--k-red);color:#fff}

/* ---------- Homepage hero ---------- */
.hero{padding-top:30px}
.hero-frame{
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 48px) 0,100% 48px,100% 100%,48px 100%,0 calc(100% - 48px));
  box-shadow:0 28px 80px rgba(0,35,84,.20);
}
.hero-frame::before{
  content:"";
  position:absolute;
  z-index:2;
  left:28px;top:28px;
  width:7px;height:126px;
  background:linear-gradient(var(--k-red) 0 34%,rgba(255,255,255,.88) 34% 67%,#7fb2ff 67% 100%);
}
.hero-frame::after{
  content:"";
  position:absolute;
  z-index:3;
  left:22px;top:76px;
  width:19px;height:19px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--k-node);
  box-shadow:0 46px 0 -5px #fff;
}
.hero-content{padding-left:84px}
.hero h1{font-weight:930;letter-spacing:-.06em}

/* ---------- Interior masthead ---------- */
.page-hero{
  position:relative;
  overflow:hidden;
  border-bottom:0;
  background:
    linear-gradient(90deg,rgba(0,71,160,.15) 1px,transparent 1px) 0 0/68px 100%,
    linear-gradient(var(--k-navy),var(--k-navy));
}
.page-hero::before{
  content:"";
  position:absolute;
  left:max(24px,calc((100vw - var(--max))/2));
  top:0;
  width:92px;height:8px;
  background:linear-gradient(90deg,var(--k-blue) 0 62%,var(--k-red) 62% 100%);
}
.page-hero::after{
  content:"K";
  position:absolute;
  right:max(4vw,32px);
  bottom:-92px;
  color:rgba(255,255,255,.045);
  font-size:280px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.08em;
  pointer-events:none;
}
.page-hero h1{position:relative;z-index:1;color:#fff;font-weight:930}
.page-hero .container>p:not(.breadcrumbs),
.page-hero>div>p:not(.breadcrumbs){color:rgba(255,255,255,.70)}
.breadcrumbs{color:rgba(255,255,255,.52)}
.breadcrumbs a{color:#fff}
.city-nav a{
  border:1px solid rgba(255,255,255,.24);
  border-radius:0;
  background:rgba(255,255,255,.06);
  color:#fff;
}
.city-nav a:hover{border-color:var(--k-red);background:var(--k-red);color:#fff}

/* ---------- Editorial section language ---------- */
.section-title{
  position:relative;
  padding:0 0 16px 28px;
  color:var(--k-ink);
  font-weight:930;
}
.section-title::before{
  content:"";
  position:absolute;
  left:0;top:.16em;
  width:13px;height:13px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--k-node);
  box-shadow:0 0 0 2px var(--k-blue-deep);
}
.section-title::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:116px;height:5px;
  background:linear-gradient(90deg,var(--k-blue) 0 72%,var(--k-red) 72% 100%);
}

/* Article H2 is a route, not a generic heading */
.prose{counter-reset:kori-h2;color:#263143}
.prose h2{
  counter-increment:kori-h2;
  position:relative;
  margin:66px 0 22px;
  padding:22px 0 20px 78px;
  border:0;
  border-top:1px solid var(--k-line);
  background:linear-gradient(var(--k-line),var(--k-line)) 48px 0/2px 100% no-repeat;
  color:var(--k-ink);
  font-weight:930;
}
.prose h2::before{
  content:counter(kori-h2,decimal-leading-zero);
  position:absolute;
  left:0;top:25px;
  width:34px;
  color:var(--k-red);
  font-size:12px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
}
.prose h2::after{
  content:"";
  position:absolute;
  left:39px;top:24px;
  width:18px;height:18px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--k-node);
  box-shadow:0 0 0 2px var(--k-blue-deep);
}
.prose h3{font-weight:880;color:var(--k-navy)}
.prose strong{color:#0A244C}

/* Hub H2 uses the same route grammar */
.hub-main{counter-reset:kori-hub}
.hub-section{counter-increment:kori-hub}
.hub-section h2{
  position:relative;
  padding:0 0 12px 62px;
  color:var(--k-ink);
  font-weight:930;
}
.hub-section h2::before{
  content:counter(kori-hub,decimal-leading-zero);
  position:absolute;
  left:0;top:5px;
  color:var(--k-red);
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
}
.hub-section h2::after{
  content:"";
  position:absolute;
  left:32px;top:3px;
  width:16px;height:16px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--k-node);
  box-shadow:0 0 0 2px var(--k-blue-deep);
}
.hub-section-kicker,.article-type,.content-type,.article-meta{color:var(--k-blue-deep)}
.hub-section-kicker::before,.article-type::before,.content-type::before,.article-meta::before{
  content:"";
  width:8px;height:8px;
  margin-right:8px;
  border-radius:50%;
  background:var(--k-node);
  flex:0 0 auto;
}

/* ---------- Decision blocks ---------- */
.quick-answer{
  position:relative;
  overflow:hidden;
  margin:0 0 38px;
  padding:30px 32px 28px 34px;
  border:0;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
  background:var(--k-navy);
  color:#fff;
  box-shadow:var(--k-shadow);
}
.quick-answer::before{
  content:"DECISION / 先看結論";
  display:block;
  margin-bottom:13px;
  color:#ff7b83;
  font-size:10px;
  font-weight:950;
  letter-spacing:.14em;
}
.quick-answer::after{
  content:"";
  position:absolute;
  right:28px;bottom:24px;
  width:22px;height:22px;
  border:5px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:var(--k-node);
}
.quick-answer strong,.quick-answer a{color:#fff}

.prose blockquote{
  position:relative;
  margin:32px 0;
  padding:24px 26px 24px 34px;
  border:0;
  border-left:7px solid var(--k-blue);
  border-radius:0;
  background:#F2F6FB;
  color:#24324A;
  box-shadow:none;
}
.prose blockquote::before{
  content:"KoriNavi NOTE";
  display:block;
  margin-bottom:10px;
  color:var(--k-red);
  font-size:9px;
  font-weight:950;
  letter-spacing:.15em;
}
.prose blockquote::after{
  content:"";
  position:absolute;
  left:-12px;top:26px;
  width:16px;height:16px;
  border:4px solid #F2F6FB;
  border-radius:50%;
  background:var(--k-node);
}

/* ---------- More / related reading = continuation of route ---------- */
.kori-related-heading{
  position:relative;
  margin-top:62px!important;
  padding:20px 0 14px 88px!important;
  border-top:4px solid var(--k-navy)!important;
  color:var(--k-navy)!important;
}
.kori-related-heading::before{
  content:"NEXT /"!important;
  position:absolute!important;
  left:0!important;top:24px!important;
  width:auto!important;height:auto!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  color:var(--k-red)!important;
  font-size:9px!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
}
.kori-related-heading::after{
  content:"";
  position:absolute;
  left:48px;top:22px;
  width:16px;height:16px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--k-node);
  box-shadow:0 0 0 2px var(--k-blue-deep);
}
.kori-reading-block{
  position:relative;
  margin-top:0;
  padding:18px 22px 18px 42px;
  border:0;
  border-left:3px solid #B8C9DF;
  background:#F7F9FC;
}
.kori-reading-block::before{
  content:"";
  position:absolute;
  left:-8px;top:24px;
  width:13px;height:13px;
  border:3px solid #F7F9FC;
  border-radius:50%;
  background:var(--k-node);
  box-shadow:0 0 0 1px var(--k-blue-deep);
}
:where(ul,ol,div).kori-reading-block a{
  position:relative;
  display:block;
  padding:10px 38px 10px 0;
  border-bottom:1px solid #DCE4EF;
  color:var(--k-navy);
  font-weight:800;
  text-decoration:none;
}
:where(ul,ol,div).kori-reading-block a:last-child{border-bottom:0}
:where(ul,ol,div).kori-reading-block a::after{
  content:"↗";
  position:absolute;
  right:0;top:9px;
  color:var(--k-red);
  font-weight:950;
}

/* Existing guide grids become branded route boards */
.guide-grid{
  position:relative;
  gap:0;
  margin-top:28px;
  padding:18px 0 0;
  border-top:4px solid var(--k-navy);
}
.guide-grid::before{
  content:"KoriNavi / NEXT ROUTE";
  position:absolute;
  left:0;top:-24px;
  color:var(--k-red);
  font-size:9px;
  font-weight:950;
  letter-spacing:.13em;
}
.guide-link{
  position:relative;
  min-height:164px;
  padding:24px 54px 24px 24px;
  border:0;
  border-right:1px solid var(--k-line);
  border-bottom:1px solid var(--k-line);
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.guide-link:nth-child(3n){border-right:0}
.guide-link::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:6px;height:42px;
  background:var(--k-blue);
}
.guide-link:hover{transform:none;background:var(--k-blue-soft);box-shadow:none}
.guide-link:after{
  content:"→";
  position:absolute;
  right:20px;bottom:20px;
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--k-node);
  color:#fff;
  font-weight:950;
}
.guide-icon{
  border-radius:0;
  background:transparent;
  color:var(--k-blue-deep);
}

/* ---------- Article index rows ---------- */
.article-list{counter-reset:kori-row;border-top:4px solid var(--k-navy)}
.article-row{
  counter-increment:kori-row;
  position:relative;
  grid-template-columns:48px minmax(0,1fr) 38px;
  gap:20px;
  padding:25px 6px;
  border-bottom:1px solid var(--k-line);
  background:#fff;
}
.article-row::before{
  content:counter(kori-row,decimal-leading-zero);
  position:static;
  width:auto;height:auto;
  align-self:start;
  margin-top:8px;
  color:var(--k-red);
  background:none;
  opacity:1;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
}
.article-row:hover{
  padding-left:6px;padding-right:6px;
  background:linear-gradient(90deg,var(--k-blue-soft),#fff 72%);
}
.row-arrow{
  border:0;
  border-radius:50%;
  background:var(--k-node);
  color:#fff;
}
.article-row:hover .row-arrow{background:var(--k-node);border:0;color:#fff}
.tag{border-radius:0;border-color:#D4DEEB;background:#F7F9FC;color:#5B687B}

/* ---------- City / topic navigation ---------- */
.topic-rail{
  position:relative;
  grid-template-columns:repeat(4,1fr);
  border:0;
  background:transparent;
}
.topic-rail::before{
  content:"";
  position:absolute;
  left:6%;right:6%;top:27px;
  height:4px;
  background:#D9E4F1;
}
.topic-link{
  position:relative;
  padding:54px 24px 26px;
  border:0!important;
  background:transparent;
}
.topic-link::before{
  content:"";
  position:absolute;
  left:24px;top:18px;
  width:18px;height:18px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--k-node);
  box-shadow:0 0 0 2px var(--k-blue-deep);
}
.topic-link:hover{background:var(--k-blue-soft)}
.topic-number{color:var(--k-red)!important;font-weight:950}
.topic-link strong{color:var(--k-navy);font-size:22px}

/* ---------- Destination tiles ---------- */
.destination-card{
  border:0;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
  box-shadow:0 18px 44px rgba(0,35,84,.14);
}
.destination-card .label{left:0;right:0;bottom:0;padding:52px 66px 22px 24px;background:linear-gradient(180deg,transparent,rgba(3,24,55,.88))}
.destination-card .label::before{
  content:"";
  display:block;
  width:72px;height:5px;
  margin-bottom:12px;
  background:linear-gradient(90deg,#fff 0 70%,var(--k-red) 70% 100%);
}
.destination-card .label::after{
  content:"→";
  right:20px;bottom:21px;
  width:34px;height:34px;
  border:0;
  border-radius:50%;
  background:var(--k-node);
}

/* ---------- CTA family: directional sign, not SaaS pill ---------- */
.btn,.ota-btn,.text-link{transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}
.btn{border-radius:0}
.btn-primary{
  position:relative;
  min-height:52px;
  padding:0 58px 0 22px;
  border:0;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  background:var(--k-red);
  color:#fff;
  box-shadow:0 12px 28px rgba(205,46,58,.24);
}
.btn-primary::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:7px;
  background:var(--k-blue-deep);
}
.btn-primary::after{
  content:"↗";
  position:absolute;
  right:18px;top:50%;
  transform:translateY(-50%);
  width:26px;height:26px;
  display:grid;place-items:center;
  border-left:1px solid rgba(255,255,255,.45);
  color:#fff;
  font-size:15px;
  font-weight:950;
}
.btn-primary:hover{transform:translateY(-2px);background:#B92531;box-shadow:0 16px 32px rgba(205,46,58,.28)}
.btn-ghost{border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.ota-btn{
  position:relative;
  min-height:50px;
  padding:12px 50px 12px 16px;
  border:0;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  background:var(--k-blue-deep);
  color:#fff;
  box-shadow:none;
}
.ota-btn::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  background:var(--k-red);
}
.ota-btn::after{
  content:"→";
  position:absolute;
  right:16px;top:50%;
  transform:translateY(-50%);
  color:#fff;
  font-weight:950;
}
.ota-btn span{background:transparent;width:auto;height:auto}
.ota-btn:hover{transform:translateY(-1px);background:var(--k-blue);color:#fff;box-shadow:none}
.text-link{text-decoration-color:var(--k-red)!important;text-decoration-thickness:2px!important;text-underline-offset:4px!important}

/* ---------- Conversion / next step panels ---------- */
.decision-band{
  position:relative;
  overflow:hidden;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,36px 100%,0 calc(100% - 36px));
  background:var(--k-navy);
  box-shadow:0 26px 64px rgba(0,35,84,.18);
}
.decision-band::before{
  content:"";
  position:absolute;
  right:-35px;top:-55px;
  width:170px;height:170px;
  border:30px solid rgba(255,255,255,.06);
  border-radius:50%;
}
.decision-band::after{
  content:"";
  position:absolute;
  left:48px;bottom:0;
  width:120px;height:9px;
  background:linear-gradient(90deg,var(--k-blue) 0 68%,var(--k-red) 68%);
}
.finder{
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  box-shadow:0 14px 30px rgba(0,13,34,.18);
}
.sticky-card{
  position:sticky;
  overflow:hidden;
  border:0;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
  background:var(--k-navy);
  color:#fff;
  box-shadow:0 18px 38px rgba(0,35,84,.16);
}
.sticky-card::before{
  content:"KoriNavi / 下一步";
  color:#ff8790;
  letter-spacing:.13em;
}
html[lang="en"] .sticky-card::before{content:"KoriNavi / NEXT STEP"}
html[lang="ja"] .sticky-card::before{content:"KoriNavi / 次の一手"}
.sticky-card::after{
  content:"";
  position:absolute;
  right:18px;top:18px;
  width:18px;height:18px;
  border:4px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:var(--k-node);
}
.sticky-card h3{color:#fff}
.sticky-card p{color:rgba(255,255,255,.67)}
.sticky-card .ota-btn{background:#fff;color:var(--k-navy)}
.sticky-card .ota-btn::after{color:var(--k-red)}
.sticky-card .ota-btn:hover{background:var(--k-blue-soft);color:var(--k-navy)}

/* ---------- Comparison ---------- */
.compare-table{
  border:0;
  border-radius:0;
  box-shadow:0 0 0 1px var(--k-line);
}
.compare-table th{
  background:var(--k-navy);
  color:#fff;
  border-bottom-color:rgba(255,255,255,.12);
}
.compare-table tbody tr:nth-child(even){background:#F7F9FC}
.compare-table td:first-child{font-weight:800;color:var(--k-navy)}

/* ---------- Sidebar ---------- */
.hub-sidebar{
  padding:22px 20px 24px;
  background:var(--k-navy);
  color:#fff;
}
.hub-sidebar-title{color:rgba(255,255,255,.52)}
.hub-nav{border-top-color:rgba(255,255,255,.15)}
.hub-nav a{border-bottom-color:rgba(255,255,255,.15);color:#fff}
.hub-nav a:hover{color:#9ec6ff}
.hub-count{color:#ff7b83}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  border:0;
  background:var(--k-navy);
  color:#fff;
}
.site-footer::before{
  content:"";
  display:block;
  height:7px;
  background:linear-gradient(90deg,var(--k-blue) 0 68%,var(--k-red) 68% 78%,#fff 78% 81%,transparent 81%);
}
.kori-footer-brand{margin-bottom:28px}
.site-footer .brand{color:#fff}
.site-footer .brand-word::after{
  content:"KOREA DECISION GUIDE";
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.45);
  font-size:7px;
  font-weight:850;
  letter-spacing:.18em;
}
.site-footer .section-copy{color:rgba(255,255,255,.62)}
.footer-col h4{color:#8EBBFF}
.footer-col a{color:rgba(255,255,255,.70)}
.footer-col a:hover{color:#fff}
.footer-note{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.50)}

/* ---------- Focus / motion ---------- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:3px solid rgba(74,145,255,.42);
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

@media(max-width:980px){
  .hub-sidebar{padding:16px;background:#F3F6FA;color:var(--k-navy)}
  .hub-sidebar-title{color:#7C8899}
  .hub-nav a{color:var(--k-navy);border-color:var(--k-line)}
  .topic-rail::before{display:none}
  .topic-link{padding-top:48px}
  .guide-link:nth-child(3n){border-right:1px solid var(--k-line)}
  .guide-link:nth-child(2n){border-right:0}
}

@media(max-width:640px){
  .nav{min-height:68px}
  .brand-mark,.brand-mark img{width:40px;height:40px}
  .site-header .brand-word::after{display:none}
  .nav-utility{font-size:11px}
  .hero-frame{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
  .hero-frame::before{left:18px;top:20px;height:78px}
  .hero-frame::after{left:12px;top:47px}
  .hero-content{padding-left:34px}
  .page-hero::before{left:12px;width:70px}
  .page-hero::after{font-size:170px;right:-24px;bottom:-50px}
  .page-hero h1{font-size:38px}
  .prose h2{
    margin-top:54px;
    padding:18px 0 16px 58px;
    background:linear-gradient(var(--k-line),var(--k-line)) 36px 0/2px 100% no-repeat;
  }
  .prose h2::before{top:21px;font-size:10px}
  .prose h2::after{left:28px;top:20px;width:16px;height:16px;border-width:3px}
  .hub-section h2{padding-left:52px}
  .hub-section h2::after{left:25px}
  .article-row{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .article-row::before{margin-top:6px}
  .row-arrow{display:none}
  .guide-grid{grid-template-columns:1fr}
  .guide-link,.guide-link:nth-child(2n),.guide-link:nth-child(3n){border-right:0}
  .topic-rail{grid-template-columns:1fr}
  .topic-link{padding:44px 18px 22px 54px;border-bottom:1px solid var(--k-line)!important}
  .topic-link::before{left:18px;top:18px}
  .decision-band{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
  .decision-band::after{left:20px;width:78px}
  .quick-answer{padding:26px 24px 24px}
}