/* Shared light shell. The interactive home styles are loaded only on home routes. */
:root {
  color-scheme: light;
  --accent: #5d4bea;
  --scene: #6554e8;
  --scene-rgb: 101,84,232;
  --paper: #f8f9fc;
  --bg: #f8f9fc;
  --bg-soft: #f1f3f9;
  --bg-sunken: #eef0f7;
  --panel: #fff;
  --ink: #16192d;
  --ink-2: #555d73;
  --muted: #626a80;
  --muted-2: #71798d;
  --line: #e1e4ee;
  --line-2: #d6dbea;
  --brand: #5d4bea;
  --brand-2: #5d4bea;
  --brand-ink: #5846c8;
  --brand-soft: #efedff;
  --brand-line: #d7d0f5;
  --green: #267754;
  --red: #ba3c3c;
  --shadow-xs: 0 1px 3px #24204008;
  --shadow-sm: 0 3px 10px #24204009;
  --shadow-md: 0 10px 28px #2420400c;
  --shadow-lg: 0 20px 50px #24204012;
  --glow-brand: 0 0 0 1px #5d4bea08;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --site-scroll-offset: 112px;
}
[hidden] { display: none !important; }
html { scroll-padding-top: var(--site-scroll-offset); }
body { margin: 0; background: var(--paper); color: var(--ink); text-rendering: optimizeLegibility; }
::selection { background: #e3ddff; color: #302461; }
html:lang(ko) :is(h1,h2,h3,p) { word-break: keep-all; overflow-wrap: anywhere; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:where(a,button,summary,input):focus-visible { outline: 2px solid #7464ee; outline-offset: 5px; }
.container { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 14px 20px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid #e1e3efb3; background: #f8f9fcec; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header .nav-wrap { display: flex; height: 86px; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 9px; font-size: 32px; font-weight: 730; letter-spacing: -1.4px; line-height: 1; color: var(--ink); white-space: nowrap; text-decoration: none; }
.brand .brand-mark { display: block; width: 36px; height: 36px; padding: 0; margin: 0; background: none; border-radius: 0; box-shadow: none; object-fit: contain; }
.brand-period { color: var(--accent); margin-left: -7px; }
.desktop-nav { display: flex; align-items: center; gap: 24px; margin: 0; }
.desktop-nav > a, .platform-trigger { font: inherit; font-size: 14px; font-weight: 550; color: #4c5064; padding: 12px 0; background: none; white-space: nowrap; border: 0; cursor: pointer; }
.desktop-nav > a:hover, .desktop-nav a[aria-current], .platform-trigger[aria-expanded="true"] { color: var(--accent); }
.desktop-nav > a { position: relative; text-decoration: none; }
.desktop-nav > a::after { content: ""; position: absolute; inset: auto 100% 3px 0; height: 2px; border-radius: 2px; background: var(--accent); transition: right .2s; }
.desktop-nav > a:is(:hover,[aria-current])::after { right: 0; }
.platform-trigger { display: flex; align-items: center; gap: 6px; }
.platform-nav { position: relative; }
.platform-dropdown { position: absolute; top: calc(100% + 12px); left: -24px; z-index: 45; width: 360px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 16px 40px #24204014; }
.platform-dropdown .journey-nav-inner { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; width: 100%; height: auto; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.platform-dropdown a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px; border-radius: 8px; font-size: 14px; color: var(--ink-2); white-space: normal; }
.platform-dropdown a:hover, .platform-dropdown a.is-current { background: var(--brand-soft); color: var(--brand-ink); }
.platform-dropdown a.is-current .step-dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions .nav-login { font-size: 13px; color: #767b8e; background: none; border: none; padding: 8px 0; cursor: not-allowed; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 18px 25px; border-radius: 10px; font-size: 15px; font-weight: 650; line-height: 1.3; text-align: center; text-decoration: none; transition: background .2s, transform .2s; }
.button-primary { color: #fff; background: #5d4bea; box-shadow: 0 6px 18px #5d4bea22; }
.button-primary:hover { background: #4938cf; transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 12px 17px; font-size: 14px; border-radius: 9px; white-space: nowrap; }
.lang-toggle { display: flex; gap: 2px; padding: 3px; border: 1px solid #e0e2ed; border-radius: 7px; background: #f0f1f7; }
.lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 6px 7px; font-size: 11px; font-weight: 600; color: #5c637a; border-radius: 4px; line-height: 1.4; }
.lang-opt.on { color: #5846c8; background: #fff; box-shadow: 0 1px 4px #2420400b; }
.header .menu-toggle { display: none; width: 44px; height: 44px; flex-shrink: 0; padding: 10px 12px; background: none; border: 1px solid transparent; border-radius: 9px; }
.menu-toggle[aria-expanded="true"] { background: #eeebfa; border-color: #e2dcf3; }
.menu-toggle span { display: block; width: 20px; height: 1.5px; margin: 6px 0; background: var(--ink); transition: transform .2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 4px; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px 24px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 18px 30px #20234c08; }
.mobile-nav > a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 14px 8px; font-size: 16px; border-bottom: 1px solid var(--line); }
.mobile-nav > a::after { content: "↗"; color: #8e87a3; font-size: 17px; }
.mobile-nav > a[aria-current] { color: var(--accent); font-weight: 600; }
.mobile-nav .lang-toggle { justify-self: start; margin-top: 12px; }
.mobile-nav .lang-opt { min-height: 44px; min-width: 64px; padding: 10px 16px; font-size: 13px; }
.mobile-platform-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 14px 8px; background: none; border: 0; font-size: 16px; text-align: left; }
.mobile-platform-trigger span { transition: transform .2s; }
.mobile-platform-trigger[aria-expanded="true"] span { transform: rotate(180deg); }
.mobile-platform-menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #f0f1f7; }
.mobile-platform-menu a { border-radius: 8px; background: #fff; font-size: 14px; }
.mobile-platform-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px; }
.menu-step, .step-dot { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d9dce9; border-radius: 7px; font: 12px ui-monospace, monospace; flex-shrink: 0; }
.platform-subheader { position: absolute; top: 100%; left: 0; width: 100%; height: 80px; padding: 8px 24px; z-index: 42; background: linear-gradient(#f8f9fc7a,#f8f9fc20); }
.journey-nav-inner { display: flex; align-items: center; height: 64px; width: min(1010px,100%); margin: auto; padding: 10px 18px; gap: 8px; border: 1px solid #e0e2ee; border-radius: 12px; background: #fffffff5; box-shadow: 0 12px 32px #20234c08; }
.journey-nav-title, .journey-count { font: 12px ui-monospace, monospace; color: #77778f; white-space: nowrap; }
.journey-nav-title { padding-right: 14px; }
.journey-count { padding-left: 14px; }
.platform-subheader a { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-width: 0; min-height: 44px; padding: 5px 7px; color: #707389; border-radius: 6px; font-size: 13px; font-weight: 500; }
.platform-subheader a:hover { background: #f4f1fa; color: var(--accent); }
.platform-subheader a.is-current { background: rgba(var(--scene-rgb),.07); color: var(--scene); }
.platform-subheader a.is-current .step-dot { background: var(--scene); color: #fff; border-color: var(--scene); }
.platform-subheader a.is-visited:not(.is-current) .step-dot { background: #f1edf9; border-color: #bfb4da; color: #8e7bac; }
.page-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; overflow: hidden; pointer-events: none; }
.page-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.site-footer { position: relative; z-index: 3; background: #fff; padding: 58px 0 20px; border-top: 1px solid var(--line); }
.site-footer .footer-top { display: flex; justify-content: space-between; gap: 40px; padding: 0 0 42px; }
.site-footer .footer-top > div > p { color: #656d82; font-size: 14px; line-height: 1.8; margin: 20px 0 8px; }
.site-footer .footer-email { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #5846c8; padding: 5px 0; }
.site-footer .footer-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(28px,5vw,76px); }
.site-footer .footer-nav > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.site-footer .footer-nav strong { font-size: 14px; font-weight: 600; color: #454d66; margin-bottom: 5px; }
.site-footer .footer-nav a { display: inline-flex; align-items: center; font-size: 14px; color: #626c82; line-height: 1.65; min-height: 44px; }
.site-footer a:hover { color: var(--accent); }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); margin: 0; padding: 24px 0 0; color: #737b90; font-size: 12px; }
.landing-content { display: contents; }
.landing-page .hero h1 { white-space: normal; }
.landing-page .insight-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.landing-page .insight-card h3 { font-size: 20px; }
.landing-page .insight-card > :not(.article-visual) { margin-inline: 8px; }
.landing-page .insight-card .article-visual { height: 180px; }
.editorial-visual { position: relative; display: grid; place-items: center; background: #eee9fa; overflow: hidden; }
.editorial-visual.visual-1 { background: #e6edf7; }
.editorial-visual.visual-2 { background: #e7f0e9; }
.editorial-diagram { display: flex; align-items: flex-end; gap: 12px; height: 76px; transform: skewY(-8deg); }
.editorial-diagram i { display: block; width: 22px; height: calc(15px * var(--bar)); background: #8b7bd2; opacity: calc(.3 + var(--bar) * .12); border-radius: 4px 4px 0 0; }
.visual-1 .editorial-diagram i { background: #628abb; }
.visual-2 .editorial-diagram i { background: #629d7e; }
.anchor-alias { display: block; position: relative; scroll-margin-top: 112px; }
/* Progressive enhancement: no script or an initialization error leaves every chapter readable. */
body:not(.journey-ready) .feature-chapter :is(.story-copy,.chapter-space) { filter: none; opacity: 1; }
body:not(.journey-ready) .network-world { display: none; }
body:not(.journey-ready) .feature-chapter { min-height: 0; padding-block: 48px; }
/* Existing Markdown pages adopt the same light palette without changing content. */
.content-page .btn-primary, .content-page .btn-brand { color: #fff; background: var(--brand); border-color: var(--brand); }
.content-page .blog-hero, .content-page .article-head { background: none; }
.content-page .blog-title { -webkit-text-fill-color: var(--ink); background: none; }
.content-page .post { background: #fff; box-shadow: var(--shadow-xs); }
.content-page .company-draft > p:first-child strong { color: #9b522d; }
.content-page .article-cta { background: #eeebfc; }
.content-page .article-cta .cta-bg { opacity: .18; }
.content-page .prose { overflow-wrap: anywhere; }
.content-page .prose table { display: block; max-width: 100%; overflow-x: auto; }
.content-page .prose .callout, .content-page .prose blockquote { background: #efedff; }
.content-page .prose h2, .content-page .prose h3 { scroll-margin-top: 110px; }
.content-page .post-cover, .content-page .article-cover, .content-page .blog-feature .cover { color: #fff; }
.contact-interest { margin: 18px 0 0; color: #5846c8; font-size: 14px; }
@media (max-width:1180px) {
  .desktop-nav { gap: 18px; }
  .header-actions { gap: 10px; }
  .header-actions .nav-login { display: none; }
  .landing-page .insight-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:1050px) {
  .desktop-language { display: none; }
  .header .desktop-nav { display: none; }
}
@media (min-width:701px) and (max-width:1050px) {
  .header .menu-toggle { display: block; }
}
@media (max-width:920px) {
  .container { width: calc(100% - 48px); }
  .desktop-nav > a, .platform-trigger { font-size: 13px; }
  .journey-nav-title, .journey-count { display: none; }
  .platform-subheader a { padding-inline: 3px; font-size: 12px; gap: 5px; }
  .site-footer .footer-nav { gap: 28px; }
}
@media (max-width:800px) { .desktop-nav { gap: 12px; } .desktop-nav > a:nth-last-child(2) { display: none; } }
@media (max-width:700px) {
  :root { --site-scroll-offset: 96px; }
  .container { width: calc(100% - 40px); }
  .header .nav-wrap { height: 72px; gap: 10px; }
  .brand { font-size: 27px; gap: 7px; }
  .brand .brand-mark { width: 31px; height: 31px; }
  .brand-period { margin-left: -5px; }
  .desktop-nav { display: none; }
  .header-actions { gap: 6px; }
  .header-actions .button-small { padding: 12px 14px; font-size: 13px; min-height: 44px; }
  .header .menu-toggle { display: block; }
  .platform-subheader { padding: 8px 10px; }
  .platform-subheader .journey-nav-inner { height: 64px; padding: 6px; gap: 0; }
  .platform-subheader .journey-nav-title, .platform-subheader .journey-count { display: none; }
  .platform-subheader a { flex-direction: column; gap: 5px; padding: 3px 1px; min-height: 48px; font-size: 11px; white-space: normal; text-align: center; line-height: 1.2; }
  .platform-subheader .step-dot { width: 22px; height: 22px; }
  .header.menu-expanded .platform-subheader { display: none; }
  .site-footer { padding-top: 42px; }
  .site-footer .footer-top { flex-direction: column; gap: 32px; padding-bottom: 32px; }
  .site-footer .footer-nav { gap: 14px; }
  .site-footer .footer-nav strong, .site-footer .footer-nav a { font-size: 13px; overflow-wrap: anywhere; }
  .site-footer .footer-nav strong { margin-bottom: 10px; }
  .site-footer .footer-bottom { flex-wrap: wrap; font-size: 12px; }
  .landing-page .insight-grid { grid-template-columns: 1fr; }
  .landing-page .insight-card h3 { font-size: 23px; }
  .landing-page .hero h1 { overflow-wrap: anywhere; }
  .landing-page .hero .eyebrow { flex-wrap: wrap; line-height: 1.7; }
  .landing-page .hero-description br { display: none; }
  .landing-page .hero-copy { padding-bottom: 24px; }
  .landing-page .hero { min-height: 850px; }
  .content-page .wrap { padding-inline: 20px; }
  .content-page .company-mail .btn { white-space: normal; text-align: left; }
}
@media (max-width:380px) {
  .landing-page .container { width: calc(100% - 32px); }
  .header .nav-wrap { gap: 6px; }
  .header-actions { gap: 2px; }
  .header-actions .button-small { padding-inline: 9px; }
  .site-footer .footer-nav { gap: 9px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.content-page .article-cta { color: var(--ink); }
.content-page .article-cta p { color: var(--ink-2); }
.content-page .blog-chip.on, .content-page .pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }
.content-page .blog-chip.on .n { color: #ece8ff; }

/* A fixed graphic is clipped to the viewport, including its painted node shadows. */
.landing-page { overflow-x: clip; }
.network-world { contain: strict; }
@media(max-width:700px) {
  body[data-view="hero"] .network-world { clip-path: inset(var(--mobile-graph-top,0px) 0 0); }
}
@media(min-width:701px) {
  .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -30px -12px; background: radial-gradient(ellipse, #f8f9fc 35%, #f8f9fcbb 60%, transparent 76%); pointer-events: none; }
}
/* Adjacent chapter blur can paint beyond the viewport; contain it at the main boundary. */
.landing-page main { overflow-x: clip; }

.landing-page .hero-scroll > span, .landing-page .explore-orbit { display: none; }
.landing-page .hero-actions .text-link, .landing-page .insights-all-desktop, .landing-page .faq-heading .text-link { gap: 10px; min-height: 44px; }
:is(.hero-actions .text-link,.insights-all-desktop,.faq-heading .text-link)::after { content: "→"; font-size: 18px; font-weight: 400; }
.landing-page .hero-actions { flex-flow: row wrap; align-items: center; gap: 16px 24px; }
.landing-page .hero .mini-mark { border: 0; border-radius: 0; transform: none; width: 16px; height: 16px; }
.landing-page .section-top .eyebrow > span:first-child { color: var(--accent); }
.landing-page .article-read { color: #5e4cab; }
.landing-page .insight-card .article-meta { flex-wrap: wrap; }
.landing-page .insight-card .article-meta > span:last-child { white-space: nowrap; }
.landing-page .insight-card h3 { text-wrap: pretty; }
.landing-page .editorial-diagram { position: relative; }
.landing-page .visual-1 .editorial-diagram { align-items: center; transform: none; gap: 9px; }
.landing-page .visual-1 .editorial-diagram::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #7e9ac0; }
.landing-page .visual-1 .editorial-diagram i { width: 25px; height: 25px; border: 1px solid #7e9ac0; border-radius: 7px; background: #d2def0; opacity: 1; z-index: 1; }
.landing-page .visual-1 .editorial-diagram i:nth-child(3) { width: 36px; height: 36px; background: #7493bd; box-shadow: 0 0 0 5px #c9d7eb; }
.landing-page .visual-2 .editorial-diagram { flex-direction: column; align-items: flex-start; justify-content: center; transform: none; gap: 7px; width: 150px; height: 88px; }
.landing-page .visual-2 .editorial-diagram i { width: calc(44px + 18px * var(--bar)); height: 10px; flex-shrink: 0; border-radius: 3px; }
@media (hover:hover) {
  .menu-toggle:hover { background: #eeebfa; }
  .mobile-nav a:hover { color: var(--accent); }
}
@media (min-width:701px) {
  .landing-page .insight-card .article-read { display: flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 12px; border: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .landing-page .insight-card .article-read::after { content: "↗"; font-size: 17px; }
  .landing-page .solution-top { padding-bottom: 22px; border-bottom: 1px solid #ececf3; }
  .landing-page .solution-card h3 { margin-top: 26px; }
  .landing-page .solution-model { margin-block: auto 8px; }
}
@media (max-width:700px) {
  .landing-page .hero-scroll { bottom: 80px; }
  .landing-page .hero-scroll > a { max-width: calc(100% - 126px); color: #70748a; }
  .landing-page .scroll-pill { flex-shrink: 0; }
  .landing-page .hero-actions { gap: 12px 18px; }
  .landing-page .hero-actions .button { min-height: 52px; }
  .landing-page .hero-description { font-size: 16px; }
  .landing-page .journey-intro > p, .landing-page .journey-complete p { font-size: 16px; line-height: 1.75; }
  .landing-page .faq-heading h2, .landing-page .contact-copy h2 { font-size: clamp(28px,7.5vw,34px); line-height: 1.35; letter-spacing: -.045em; }
  .landing-page .faq.section-pad { padding-block: 60px 64px; }
  .landing-page .faq-list { margin-top: 24px; }
  .landing-page .faq summary { gap: 16px; font-size: 16px; line-height: 1.65; }
  .landing-page .contact-copy > p br { display: none; }
  .landing-page .contact-action { padding: 22px 18px; }
  .landing-page .interest-options label > span { font-size: 13px; }
  .landing-page .insights .visual-1 .editorial-diagram { gap: 3px; height: 36px; }
  .landing-page .insights .visual-1 .editorial-diagram i { width: 7px; height: 12px; border-radius: 3px; }
  .landing-page .insights .visual-1 .editorial-diagram i:nth-child(3) { width: 12px; height: 20px; box-shadow: 0 0 0 2px #c9d7eb; }
  .landing-page .insights .visual-2 .editorial-diagram { width: 42px; height: 40px; gap: 4px; }
  .landing-page .insights .visual-2 .editorial-diagram i { width: calc(13px + 5px * var(--bar)); height: 4px; }
}
@media (min-width:701px) and (max-width:1050px) and (orientation:portrait) {
  .landing-page .hero { display: block; padding-top: 0; }
  .landing-page .hero-copy { padding: 52px 0 28px; max-width: 640px; }
  .landing-page .hero h1 { font-size: clamp(44px,5.8vw,58px); }
  .landing-page .hero-description { font-size: 18px; }
  .landing-page .hero-explore { min-height: 340px; height: 36svh; }
  .landing-page .map-coordinate { display: none; }
  body[data-view="hero"] .network-world { clip-path: inset(var(--mobile-graph-top,0px) 0 0); }
}

/* Reserve identical action columns across locales; translated navigation cannot move them. */
@media (min-width:1051px) {
 .header .header-actions { display: grid; grid-template-columns: 108px 96px 108px; column-gap: 12px; flex: 0 0 auto; margin-left: auto; }
 .header .desktop-language { width: 108px; }
 .header .desktop-language .lang-toggle { display: grid; grid-template-columns: repeat(3,1fr); width: 108px; }
 .header .desktop-language .lang-opt { min-width: 0; padding-inline: 0; }
 .header .header-actions .nav-login { display: block; width: 96px; padding-left: 20px; padding-right: 0; text-align: center; white-space: nowrap; }
 .header .header-actions > .button-small { width: 108px; padding-inline: 10px; }
 .header .desktop-nav { margin-left: auto; }
}
@media (min-width:1051px) and (max-width:1180px) {
 .header .header-actions { grid-template-columns: 108px 108px; }
 .header .header-actions .nav-login { display: none; }
 .header .desktop-nav { gap: 16px; }
}
@media (max-width:1050px) { .platform-dropdown { display: none !important; } }