@font-face{font-family:Aeonik;src:url('/fonts/aeonik.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}html{background:#f3f1ea;color:#101010;scroll-behavior:smooth}body{margin:0;font-family:Aeonik,"Pretendard","Noto Sans KR",system-ui,sans-serif;line-height:1.55}@layer base{a{color:inherit}}.panasia-ko-skip{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;padding:.75rem 1rem}.panasia-ko-skip:focus{top:1rem}.panasia-ko-header{min-height:76px;display:flex;align-items:center;gap:2rem;padding:0 3.5vw;border-bottom:1px solid #c8c4bb;background:rgba(243,241,234,.94);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.panasia-ko-brand{font-weight:700;letter-spacing:.12em;text-decoration:none;white-space:nowrap}.panasia-ko-nav{display:flex;align-items:center;gap:1.5rem;margin-left:auto}.panasia-ko-nav a{text-decoration:none;font-size:.9rem}.panasia-ko-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:.4rem}.panasia-language-switcher{display:inline-flex;align-items:center;gap:0;padding:0;border:0;border-radius:0;white-space:nowrap;color:#777}.panasia-language-switcher a{position:relative;display:inline-flex;min-width:32px;height:40px;align-items:center;justify-content:center;padding:0 .45rem;border-radius:0;color:inherit;text-decoration:none;font:500 .72rem/1 Aeonik,system-ui;transition:color .2s ease}.panasia-language-switcher a+a::before{position:absolute;left:0;width:1px;height:12px;background:#d5d5d5;content:""}.panasia-language-switcher a:hover,.panasia-language-switcher a:focus-visible,.panasia-language-switcher a[aria-current=page]{background:transparent;color:#111}.panasia-language-switcher a[aria-current=page]{text-decoration:none}.panasia-ko-hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:76vh;border-bottom:1px solid #c8c4bb}.panasia-ko-hero__copy{padding:clamp(4rem,8vw,9rem) 5vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.panasia-ko-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 2rem}.panasia-ko-hero h1{font-size:clamp(2.7rem,5.8vw,6.5rem);font-weight:500;letter-spacing:-.055em;line-height:.98;margin:0;word-break:keep-all}.panasia-ko-lead{font-size:clamp(1.05rem,1.45vw,1.4rem);max-width:42rem;margin:2rem 0;word-break:keep-all}.panasia-ko-hero figure{margin:0;min-height:36rem;overflow:hidden}.panasia-ko-hero img{width:100%;height:100%;object-fit:cover}.panasia-ko-cta{display:inline-flex;align-items:center;gap:2rem;background:#111;color:#fff;padding:.9rem 1.1rem;text-decoration:none}.panasia-ko-cards{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #c8c4bb}.panasia-ko-cards article{min-height:25rem;padding:3.5vw;border-right:1px solid #c8c4bb}.panasia-ko-cards article:last-child{border:0}.panasia-ko-cards span{font-size:.72rem}.panasia-ko-cards h2{font-size:clamp(1.6rem,2.5vw,2.6rem);font-weight:500;letter-spacing:-.035em;margin:5rem 0 1rem;word-break:keep-all}.panasia-ko-cards p,.panasia-ko-process>p:last-child{max-width:34rem;color:#4b4a47;word-break:keep-all}.panasia-ko-process{padding:clamp(5rem,10vw,11rem) max(5vw,calc((100vw - 1400px)/2));background:#dbe6e0}.panasia-ko-process h2{font-size:clamp(2.5rem,5.8vw,6rem);font-weight:500;letter-spacing:-.05em;line-height:1.02;max-width:68rem;margin:0 0 2rem;word-break:keep-all}.panasia-ko-process>p:last-child{font-size:1.15rem}.panasia-ko-final{padding:6vw 5vw;background:#101010;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:3rem}.panasia-ko-final h2{font-size:clamp(2rem,4vw,4.5rem);font-weight:500;max-width:55rem;margin:0;word-break:keep-all}.panasia-ko-cta--light{background:#fff;color:#111}.panasia-ko-footer{padding:3.5rem 5vw;display:grid;grid-template-columns:1fr auto;gap:1rem;border-top:1px solid #c8c4bb}.panasia-ko-footer p{margin:0}.panasia-ko-footer>p:last-child{grid-column:2}.panasia-navigation__actions>.panasia-language-switcher{margin-right:.6rem}@media(max-width:1050px){.panasia-ko-header{padding:1rem 4vw;flex-wrap:wrap;gap:1rem}.panasia-ko-nav{order:3;width:100%;overflow-x:auto;padding-bottom:.25rem}.panasia-ko-header>.panasia-language-switcher{margin-left:auto}.panasia-ko-hero{grid-template-columns:1fr}.panasia-ko-hero figure{min-height:50vw;order:-1}.panasia-ko-cards{grid-template-columns:1fr}.panasia-ko-cards article{min-height:auto;border-right:0;border-bottom:1px solid #c8c4bb;padding:3rem 5vw}.panasia-ko-cards h2{margin:3rem 0 1rem}.panasia-ko-final{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.panasia-ko-header{position:relative}.panasia-ko-nav{gap:1rem}.panasia-ko-hero__copy{padding:4rem 5vw}.panasia-ko-hero figure{min-height:70vw}.panasia-ko-footer{grid-template-columns:1fr}.panasia-ko-footer>p:last-child{grid-column:1}.panasia-ko-process{padding:5rem 5vw}}
header[data-panasia-navigation-root]>.panasia-language-switcher{position:absolute;right:1rem;top:calc(100% + .5rem);z-index:120;background:#f3f1ea;color:#111}@media(max-width:1050px){header[data-panasia-navigation-root]>.panasia-language-switcher{position:fixed;right:1rem;top:auto;bottom:1rem;z-index:50}}
.panasia-language-switcher--floating{position:absolute;left:calc(100vw - 420px);right:auto;top:68px;bottom:auto;z-index:19;background:#fff;color:#111}@media(max-width:1050px){.panasia-language-switcher--floating{left:auto;right:116px;top:68px}}

/* The language control belongs to the navigation action row at every width. */
.panasia-language-switcher--header {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  flex: 0 0 auto;
  align-self: center;
  margin: 0 !important;
  background: #fff;
  color: #111;
}
[data-panasia-language-actions] {
  display: flex;
  align-items: center;
}
header[data-mode="captured"] [data-panasia-language-actions] {
  position: absolute !important;
  top: 50%;
  right: 24px;
  grid-column: auto !important;
  transform: translateY(-50%);
}
header[data-panasia-navigation-root] .panasia-navigation__action--primary,
header[data-panasia-navigation-root] .panasia-navigation__action--primary:visited,
header[data-mode="captured"] a[href="/contact"],
header[data-mode="captured"] a[href="/contact"]:visited,
header[data-mode="captured"] a[href="/ko/contact"],
header[data-mode="captured"] a[href="/ko/contact"]:visited {
  border-color: #111;
  background: #111;
  color: #fff;
}
@media(max-width:640px) {
  .panasia-language-switcher--header {
    padding: .15rem;
  }
  .panasia-language-switcher--header a {
    padding: .3rem .42rem;
    font-size: .68rem;
  }
  [data-panasia-language-actions] {
    gap: .4rem !important;
  }
  header[data-mode="captured"] a[href="/contact"],
  header[data-mode="captured"] a[href="/ko/contact"] {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    height: 44px !important;
    padding-inline: 0 !important;
    font-size: .75rem;
  }
  header[data-mode="captured"] a[href="/contact"] > div:last-child,
  header[data-mode="captured"] a[href="/ko/contact"] > div:last-child {
    flex-wrap: nowrap;
    padding: .5rem .75rem;
  }
}
@media(max-width:359px) {
  header[data-mode="standard"] .panasia-navigation__actions > .panasia-navigation__action--primary,
  header[data-mode="standard"] [data-panasia-language-actions] a[href="/contact"] {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 0 !important;
    overflow: hidden;
    font-size: 0;
  }
  header[data-mode="standard"] .panasia-navigation__actions > .panasia-navigation__action--primary::after,
  header[data-mode="standard"] [data-panasia-language-actions] a[href="/contact"]::after {
    color: #fff;
    content: "↗";
    font-size: .85rem;
  }
}
@media(min-width:768px) and (max-width:1023px) {
  header[data-mode="captured"] > div:first-of-type nav[aria-label="Main"] {
    display: none !important;
  }
}
@media(max-width:1023px) {
  header[data-mode="captured"] [data-panasia-language-actions] {
    right: 12px;
  }
}

/* Keep locale selection quiet inside the editorial header. */
nav.panasia-language-switcher {
  gap: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
}
/* The locale links were 29x40 hit areas. 44px of height is free — the header
   actions row is 45px inside a 70px mobile bar and 40px inside an 88px desktop
   bar — and invisible, because the links carry no fill or border and the label
   stays centred. Width is not free: the captured header's actions row is
   right-aligned and only clears the PANASIA wordmark by ~10px at 360, so widening
   each link to 44px would push the row 30px left and collide with the brand. The
   remaining 29px width is reported for a header-layout owner rather than forced
   here; it still clears WCAG 2.5.8's 24px floor. */
nav.panasia-language-switcher a {
  position: relative;
  min-width: 29px;
  min-height: 44px;
  /* The 4px of new height is handed straight back as negative block margin, so
     the links' margin boxes still measure 40px, the header action row and the
     header keep their height, and the target simply overhangs by 2px. It sits on
     the links rather than on the `nav` because `.panasia-language-switcher--header`
     pins that element with `margin: 0 !important`. */
  margin-block: -2px;
  justify-content: center;
  padding: 0 .25rem;
  border-radius: 0;
  background: transparent;
  color: #737373;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .015em;
}
nav.panasia-language-switcher a + a {
  padding-left: .55rem;
}
nav.panasia-language-switcher a + a::before {
  position: absolute;
  left: -.08rem;
  color: #aaa;
  content: "/";
  font-weight: 400;
}
nav.panasia-language-switcher.panasia-language-switcher a[aria-current="page"] {
  background: transparent;
  color: #111;
  font-weight: 600;
}
/* Pinned to the label, not to the box: the box grew 4px taller for the pointer
   target above, so the rule that used to sit 1px off a 40px box now sits 3px off
   a 44px one and the underline stays exactly where it was under the label. */
nav.panasia-language-switcher a[aria-current="page"]::after {
  position: absolute;
  right: .35rem;
  bottom: 3px;
  left: .35rem;
  height: 1px;
  background: currentColor;
  content: "";
}
nav.panasia-language-switcher a:hover {
  color: #111;
}
nav.panasia-language-switcher a:focus-visible {
  outline: 1px solid #111;
  outline-offset: 1px;
}
html[data-theme="dark"] header[data-mode="captured"] nav.panasia-language-switcher a {
  color: #a3a3a3;
}
html[data-theme="dark"] header[data-mode="captured"] nav.panasia-language-switcher a + a::before {
  color: #666;
}
html[data-theme="dark"] header[data-mode="captured"] nav.panasia-language-switcher a[aria-current="page"],
html[data-theme="dark"] header[data-mode="captured"] nav.panasia-language-switcher a:hover {
  color: #fff;
}
html[data-theme="dark"] header[data-mode="captured"] nav.panasia-language-switcher a:focus-visible {
  outline-color: #fff;
}

html[lang^="ko"] .HomeHero h1[data-panasia-primary-heading],
html[lang^="ko"] [data-panasia-mobile-hero-copy] > p {
  white-space: pre-line;
}

@media(max-width:767px) {
  html[lang^="ko"] [data-panasia-mobile-hero-copy] > p {
    overflow-wrap: normal;
    word-break: keep-all;
    font-size: clamp(26px, 7.2vw, 29px);
    line-height: 1.08;
  }
}

/* Scope note: these Korean rules key off `lang`, not
   `data-panasia-localized-page`. localization.mjs:439 writes both onto <html>,
   but React drops the data attribute when it reconciles <html> at hydration
   (verified live 2026-08-18: the served page has it, the hydrated DOM does
   not — `data-dpl-id` disappears the same way). Every rule scoped to that
   attribute therefore stopped applying the moment the Korean home hydrated,
   which is why the headings below kept breaking mid-word in production even
   though the rule shipped. `lang="ko-KR"` survives hydration, is present in
   the served HTML too, and so covers no-JS, pre-hydration, and hydrated alike.

   Korean wraps on 어절 (word) boundaries, not mid-syllable-block. Without
   keep-all the browser treats every Hangul syllable as a break opportunity, so
   the market-desk headings split words in half — "거래소" rendered as
   "거래 / 소", "법인" as "법 / 인". The rule existed only for the mobile hero
   paragraph; every other heading and prose block on a Korean page needs it too. */
html[lang^="ko"] :is(h1, h2, h3, h4, p, li, figcaption, blockquote) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* The captured type scale is measured for Latin. Its negative tracking
   (-0.01em) is drawn against Latin sidebearings; applied to Hangul it closes
   the counters inside each syllable block, which is worst at display sizes
   (64px desktop / 32px mobile). Hangul has no sidebearing slack to give back,
   so the Korean routes reset to normal at every size. */
html[lang^="ko"] :is(h1, h2, h3, h4, p, li, figcaption, blockquote) {
  letter-spacing: normal;
}

/* Display leading. The captured H1 runs 1.05, which is already tight for Latin
   and collides for Hangul: no descender relief, full-height syllable blocks,
   three stacked lines at 390px. 1.25 clears it at both 64px and 32px.
   Scoped to the Panasia-authored `data-panasia-primary-heading` rather than a
   captured class name so a re-capture cannot silently detach it.

   Deliberately NOT applied to h2/h3: the captured DOM overloads H2 for both
   64px display headings (ratio 1.05, wants this fix) and 11px eyebrow labels
   (ratio 1.55, would be tightened by it). Splitting those needs per-component
   work — tracked, not smuggled in here. */
html[lang^="ko"] h1[data-panasia-primary-heading] {
  line-height: 1.25;
}