/*
   HEXASTONE Dynamic Energy System
   Shared layout and component language
*/

:root {
  --main-color: #ff7a18;
  --main-color-2: #ffb347;
  --point-gradient: linear-gradient(135deg, #ff7a18, #ffb347, #ffe36e);
  --sub-color: #49b57c;
  --site-bg: #ffffff;
  --site-bg-soft: #f5f5f7;
  --surface-1: #ffffff;
  --surface-2: #f7f7f9;
  --surface-3: #eef0f3;
  --panel-light: #ffffff;
  --panel-mid: rgba(255, 255, 255, 0.72);
  --type-strong: var(--text-black-strong, #1d1d1f);
  --type-body: var(--text-black-strong, #1d1d1f);
  --type-muted: var(--text-black-muted, #6e6e73);
  --type-soft: var(--text-black-soft, #86868b);
  --weight-display: 600;
  --weight-title: 600;
  --weight-body: 400;
  --weight-link: 600;
  --text-dark: var(--type-body);
  --text-gray: var(--type-muted);
  --text-light: var(--type-soft);
  --text-black: var(--type-strong);
  --border-color: rgba(17, 22, 28, 0.08);
  --border-light: rgba(15, 30, 44, 0.08);
  --white: #ffffff;

  --max-width: 1504px;
  --container-max: 1440px;
  --side-padding: 32px;
  --header-height: 88px;
  --header-scrolled-height: 88px;
  --sub-hero-height: 80vh;
  --sub-surface: rgba(255, 255, 255, 0.985);
  --nav-glass-bg: rgba(255, 255, 255, 0.82);
  --nav-glass-filter: blur(24px) saturate(160%);
  --nav-glass-border: rgba(0, 0, 0, 0.08);
  --section-padding: 140px;
  /* Spacing scale */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 10px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 16px;
  --sp-7: 18px;
  --sp-8: 20px;
  --sp-9: 22px;
  --sp-10: 24px;
  --sp-11: 28px;
  --sp-12: 30px;
  --sp-13: 32px;
  --sp-14: 34px;
  --sp-15: 36px;
  --sp-16: 40px;
  --sp-19: 56px;
  --sp-21: 64px;
  --sp-22: 72px;
  --sp-23: 80px;
  --sp-24: 84px;
  --sp-25: 88px;
  --sp-26: 92px;
  --sp-28: 104px;
  --sp-29: 110px;
  --sp-30: 112px;
  --sp-32: 130px;
  --sp-33: 136px;
  --sp-34: 140px;
  --sp-35: 180px;
  /* Semantic spacing */
  --sp-section-y: var(--sp-34);
  --sp-section-y-tight: var(--sp-29);
  --sp-section-y-loose: var(--sp-35);
  --sp-container-x: var(--side-padding);
  --sp-card-pad-sm: var(--sp-8);
  --sp-card-pad-md: var(--sp-10);
  --sp-card-pad-lg: var(--sp-13);
  --sp-grid-gap-sm: var(--sp-6);
  --sp-grid-gap-md: var(--sp-10);
  --sp-grid-gap-lg: var(--sp-11);
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow-soft: 0 18px 42px rgba(18, 24, 32, 0.08);
  --shadow-panel: 0 24px 60px rgba(18, 24, 32, 0.12);
  --transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --font-hero: var(--fs-hero, clamp(56px, 6vw, 96px));
  --font-section: clamp(48px, 5vw, var(--fs-section, 56px));
  --font-feature: clamp(34px, 3.4vw, 48px);
  --font-subsection: var(--fs-sub-title, 32px);
  --font-body-lg: var(--fs-body-lg, 18px);
  --font-body: var(--fs-body, 16px);
  --font-caption: var(--fs-sm, 14px);
  --font-overline: var(--fs-body-lg, 18px);
  --type-display-emphasis-size: var(--fs-hero, clamp(56px, 6vw, 96px));
  --type-display-emphasis-line: 1.0416666667;
  --type-display-emphasis-weight: 600;
  --type-display-emphasis-tracking: -0.015em;
  --type-section-title-size: var(--fs-section, 56px);
  --type-section-title-line: 1.08;
  --type-section-title-weight: 600;
  --type-section-title-tracking: -0.06em;
  --type-section-desc-size: var(--fs-body-lg, 18px);
  --type-section-desc-line: 1.65;
  --type-section-desc-weight: 600;
  --type-section-desc-tracking: 0.011em;
  --type-section-link-size: var(--fs-body, 16px);
  --type-section-link-weight: 400;
  --type-section-link-tracking: -0.01em;
  --tracking-hero: -0.03em;
  --tracking-section: -0.03em;
  --tracking-feature: -0.02em;
  --tracking-body: -0.01em;
  --tracking-overline: 0.12em;
  --leading-hero: 1.02;
  --leading-section: 1.06;
  --leading-feature: 1.18;
  --leading-body: 1.68;
  --leading-body-loose: 1.76;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--site-bg); }

body {
  font-family: 'Pretendard', sans-serif;
  color: var(--type-body);
  background:
    linear-gradient(180deg, #f5f5f7 0%, #ffffff 260px, #ffffff 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.68;
}

body.sub-page {
  background:
    linear-gradient(180deg, #f5f5f7 0%, #ffffff 420px, #ffffff 100%);
}

body.company-sub-page {
  background: #ffffff;
}

body.history-page,
body.organization-page,
body.greeting-page,
body.product-page {
  background: #ffffff;
}

body.menu-open { overflow: hidden; }
a { text-decoration: none; color: inherit; }
a:visited { color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-radius: 18px;
}

.type-display-emphasis {
  font-size: var(--type-display-emphasis-size);
  line-height: var(--type-display-emphasis-line);
  font-weight: var(--type-display-emphasis-weight);
  letter-spacing: var(--type-display-emphasis-tracking);
  color: var(--type-strong);
}

.type-section-title {
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line);
  font-weight: var(--type-section-title-weight);
  letter-spacing: var(--type-section-title-tracking);
  color: var(--type-strong);
}

.type-section-desc {
  font-size: var(--type-section-desc-size);
  line-height: var(--type-section-desc-line);
  font-weight: var(--type-section-desc-weight);
  letter-spacing: var(--type-section-desc-tracking);
  color: var(--type-strong);
}

.type-section-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-section-link-size);
  line-height: 1.4;
  font-weight: var(--type-section-link-weight);
  letter-spacing: var(--type-section-link-tracking);
  color: var(--main-color);
  transition: color 0.2s ease;
}

.type-section-link::after {
  content: "›";
  font-size: 1.15em;
  line-height: 1;
  color: currentColor;
}

.type-section-link:hover {
  color: var(--main-color-2);
}

.type-iphone-card-label {
  font-size: var(--fs-body, 16px);
  line-height: 1.2353641176;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.type-iphone-card-headline {
  font-size: clamp(26px, 2.6vw, var(--fs-sub-title, 32px));
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.007em;
}

.type-iphone-card-copy {
  font-size: var(--fs-body, 16px);
  line-height: 1.5882352941;
  font-weight: 400;
  letter-spacing: 0;
}

.ui-iphone-card-action {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ui-iphone-card-plus {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.ui-spark-icon-button {
  position: relative;
  display: block;
  border-radius: 50%;
}

.ui-spark-icon-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3.5v17'/%3E%3Cpath d='M6.37 6.75l11.26 10.5'/%3E%3Cpath d='M17.63 6.75 6.37 17.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ui-spark-icon-button-dark {
  background: var(--text-black-strong, #1d1d1f);
}

.ui-spark-icon-button-dark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3.5v17'/%3E%3Cpath d='M6.37 6.75l11.26 10.5'/%3E%3Cpath d='M17.63 6.75 6.37 17.25'/%3E%3C/svg%3E");
}

.ui-spark-icon-button-light {
  background: var(--text-white-strong, #ffffff);
}

.ui-spark-icon-button-light::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3.5v17'/%3E%3Cpath d='M6.37 6.75l11.26 10.5'/%3E%3Cpath d='M17.63 6.75 6.37 17.25'/%3E%3C/svg%3E");
}

.container,
.header-inner,
.lnb-inner,
.mega-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
  width: 100%;
}

header {
  /* Canonical styles are defined at the bottom of this file */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 1;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-card-title, 24px);
  font-weight: var(--weight-display);
  color: var(--text-black);
  cursor: pointer;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  text-transform: none;
}

.logo-mark {
  display: block;
  width: 27px;
  height: 25px;
  flex: 0 0 27px;
  border-radius: 6px;
  object-fit: contain;
}

.logo-text {
  display: block;
  line-height: 1;
}

#gnb { height: 100%; }
#gnb ul { display: flex; height: 100%; gap: 34px; }
#gnb ul li {
  display: flex;
  align-items: center;
  height: 100%;
}
#gnb ul li a {
  display: flex;
  align-items: center;
  height: auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: rgba(29, 29, 31, 0.82);
  text-transform: none;
  letter-spacing: -0.01em;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}

#gnb ul li:hover a,
#gnb ul li a:hover,
#gnb ul li.mega-current a {
  background: rgba(29, 29, 31, 0.10);
  color: var(--text-black);
  transform: none;
}

#gnb ul li a::after {
  content: "";
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--text-black);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

#gnb ul li:hover a::after,
#gnb ul li.mega-current a::after {
  transform: scaleX(1);
}

.header-util {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  line-height: 0;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 72px;
  padding: 6px 10px 6px 10px;
  border-radius: 999px;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--text-black);
  font-size: var(--fs-xs, 12px);
  font-weight: 800;
  letter-spacing: 0.12em;
  transition: color 0.2s ease;
}

.lang-current:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-black-strong, #1d1d1f);
}

.lang-dropdown { position: relative; }
.lang-current-icon { font-size: var(--fs-xs, 12px); color: rgba(17, 22, 28, 0.72); }

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 138px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(15, 30, 44, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 20;
}

.lang-dropdown.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: var(--fs-xs, 12px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(17, 22, 28, 0.72);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.lang-menu button:hover {
  color: var(--text-black);
  background: rgba(15, 30, 44, 0.06);
}

.lang-menu button.active {
  background: linear-gradient(135deg, var(--main-color), #ff9436);
  color: #fff;
}

.icon-btn {
  color: var(--text-black);
  display: flex;
  align-items: center;
  width: 46px;
  height: 46px;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: var(--transition);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.icon-btn:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
}/* Neutralized home page header overrides */

.mega-menu {
  /* Canonical styles are defined at the bottom of this file */
}

.mega-inner {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 240px;
  padding: 28px var(--side-padding);
  box-sizing: border-box;
}

.mega-spacer {
  flex-shrink: 0;
  width: 0;
  transition: width 0.2s ease;
}

.mega-content-area {
  display: none;
  flex-shrink: 0;
  min-width: 170px;
}

.mega-content-area.active { display: block; }

.mega-col ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
}

.mega-col ul li {
  position: relative;
}

.mega-col ul li a {
  display: block;
  padding: 9px 0;
  font-size: var(--fs-body, 16px);
  font-weight: 700;
  color: #0a1317;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transform: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.mega-col ul li a:hover {
  color: var(--text-black-strong, #1d1d1f);
  text-decoration: underline;
  transform: none;
}





.mega-link-pending {
  position: relative;
  cursor: default;
}

.mega-link-pending::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 10;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--text-black-strong, #1d1d1f);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 30, 44, 0.16);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mega-link-pending:hover::after,
.mega-link-pending:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mega-resource {
  margin-left: auto;
  width: 156px;
  border-left: 1px solid rgba(15, 30, 44, 0.08);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}

.res-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(17, 22, 28, 0.72);
  font-size: 9px;
  font-weight: 800;
  padding: 7px 7px 7px 9px;
  border-radius: 10px;
  background: #f7f9fb;
  border: 1px solid rgba(15, 30, 44, 0.08);
  min-height: 30px;
  gap: 6px;
}

.res-link:hover { border-color: rgba(255, 179, 71, 0.35); }







@media (min-width: 1281px) {
  }

.res-link span {
  font-size: 0;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: #fff;
  background: transparent;
  flex: 0 0 12px;
}

.res-link span::before {
  content: "";
  width: 12px;
  height: 12px;
  display: block;
  background: var(--main-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.2 3h3.6v9.2l3.15-3.15 2.55 2.55L12 19.1 4.5 11.6l2.55-2.55 3.15 3.15V3zM4 20.5h16V24H4v-3.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.2 3h3.6v9.2l3.15-3.15 2.55 2.55L12 19.1 4.5 11.6l2.55-2.55 3.15 3.15V3zM4 20.5h16V24H4v-3.5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.full-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.98);
  z-index: 20000;
  display: none;
  flex-direction: row;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.full-menu-overlay.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .mega-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.menu-open #header {
  pointer-events: none;
}

.full-menu-sidebar {
  width: 300px;
  background:
    linear-gradient(180deg, #f5f7fa 0%, #eef2f6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 30px;
  border-right: 1px solid rgba(15, 30, 44, 0.08);
  flex-shrink: 0;
}

.full-menu-sidebar .sidebar-logo {
  font-size: var(--fs-sub-title, 32px);
  font-weight: 900;
  color: var(--text-black);
  letter-spacing: -1px;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.full-menu-sidebar .sidebar-label {
  font-size: var(--fs-xs, 12px);
  font-weight: 700;
  color: rgba(17, 22, 28, 0.48);
  text-transform: uppercase;
  letter-spacing: 4px;
}

.full-menu-content {
  flex: 1;
  overflow-y: auto;
  padding: 80px 80px 60px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: var(--fs-sub-title, 32px);
  cursor: pointer;
  color: rgba(17, 22, 28, 0.88);
  z-index: 10;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.close-btn:hover { color: var(--text-black); transform: rotate(90deg); }

.full-menu-row {
  display: block;
  padding: 35px 0;
  border-bottom: 1px solid rgba(15, 30, 44, 0.08);
}

.full-menu-row:first-child { padding-top: 0; }
.full-menu-row:last-child { border-bottom: none; }

.full-menu-category {
  font-size: var(--fs-body, 16px);
  font-weight: 900;
  color: rgba(17, 22, 28, 0.9);
  margin-bottom: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.full-menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.full-menu-col {
  width: 100%;
  margin: 0;
}

.full-menu-col h4 {
  font-size: var(--fs-sm, 14px);
  font-weight: 800;
  color: rgba(17, 22, 28, 0.96);
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--main-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.full-menu-col ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}

.full-menu-col ul li { margin-bottom: 0; }

.full-menu-col ul li a {
  font-size: var(--fs-sm, 14px);
  font-weight: 700;
  color: var(--text-black, #11161c);
  text-underline-offset: 4px;
}

.full-menu-col ul li a:hover {
  color: var(--text-black);
  text-decoration: underline;
}

.sub-hero {
  --hero-title-color: var(--text-white-strong, #ffffff);
  --hero-kicker-color: var(--text-white-body, rgba(255, 255, 255, 0.84));
  position: relative;
  width: 100%;
  height: var(--sub-hero-height);
  margin-top: 0;
  padding-top: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white-strong, #ffffff);
  background-color: #111;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 14, 20, 0.28), rgba(9, 14, 20, 0.2)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-size: auto;
  pointer-events: none;
}

.sub-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 20px;
}

.sub-hero-inner p {
  font-size: var(--font-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  margin-bottom: 24px;
  color: color-mix(in srgb, var(--hero-kicker-color) 70%, var(--text-white-strong, #ffffff) 30%);
}

.sub-hero-inner h2 {
  margin: 0;
  font-size: var(--font-hero);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-hero);
  color: var(--hero-title-color);
  text-shadow: none;
  text-wrap: balance;
  word-break: keep-all;
}

body.company-sub-page .sub-hero {
  height: var(--sub-hero-height);
  align-items: flex-end;
}

body.company-sub-page .sub-hero::before {
  background:
    linear-gradient(90deg, rgba(5, 10, 16, 0.78) 0%, rgba(5, 10, 16, 0.52) 42%, rgba(5, 10, 16, 0.18) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

body.company-sub-page .sub-hero-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding) 140px;
  text-align: center;
}

body.company-sub-page .sub-hero-inner p {
  max-width: none;
  margin: 0 auto 24px;
  color: var(--hero-kicker-color);
}

body.company-sub-page .sub-hero-inner h2 {
  max-width: 1180px;
  margin: 0 auto;
  font-size: var(--font-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--hero-title-color);
  font-weight: var(--weight-display);
}

.liquid-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 58%, rgba(255, 255, 255, 0.04));
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.liquid-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.05), transparent 28%);
  pointer-events: none;
}

.liquid-panel::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03));
  pointer-events: none;
}

.liquid-panel-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.liquid-panel-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.liquid-panel-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.liquid-panel-item {
  position: relative;
  min-width: 0;
  padding: 26px 28px 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
}

.liquid-panel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 50%, rgba(255, 255, 255, 0.025));
  pointer-events: none;
}

.liquid-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: var(--fs-xs, 12px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-white-muted, rgba(255, 255, 255, 0.68));
}

.liquid-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: var(--main-color);
}

.liquid-title {
  position: relative;
  z-index: 1;
  display: block;
  font-size: var(--fs-body-lg, 18px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-white-strong, #ffffff);
  word-break: keep-all;
}

.liquid-copy {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  font-size: var(--fs-body, 16px);
  line-height: 1.72;
  color: var(--text-white-muted, rgba(255, 255, 255, 0.68));
  word-break: keep-all;
}

.liquid-panel-light {
  border-color: rgba(15, 30, 44, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.78)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(244, 247, 250, 0.72));
  box-shadow:
    0 18px 42px rgba(12, 18, 26, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.liquid-panel-light .liquid-panel-grid {
  background: rgba(15, 30, 44, 0.05);
}

.liquid-panel-light .liquid-panel-item {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.82));
}

.liquid-panel-light .liquid-panel-item::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 55%, rgba(244, 247, 250, 0.56));
}

.liquid-panel-light .liquid-kicker {
  color: rgba(17, 22, 28, 0.66);
}

.liquid-panel-light .liquid-title {
  color: var(--text-black);
}

.liquid-panel-light .liquid-copy {
  color: var(--text-gray);
  font-weight: var(--weight-body);
}

.liquid-point-panel {
  padding: 30px 32px 32px;
}

.liquid-point-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}

.liquid-point-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.liquid-point-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.liquid-point-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs, 12px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-white-muted, rgba(255, 255, 255, 0.68));
}

.liquid-point-name::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--main-color);
}

.liquid-point-body strong {
  display: block;
  font-size: var(--fs-body-lg, 18px);
  line-height: 1.36;
  font-weight: 800;
  color: var(--text-white-strong, #ffffff);
  word-break: keep-all;
}

.liquid-point-body span {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-sm, 14px);
  line-height: 1.65;
  color: var(--text-white-body, rgba(255, 255, 255, 0.84));
  word-break: keep-all;
}

.liquid-panel-light .liquid-point-row {
  border-top-color: rgba(15, 30, 44, 0.08);
}

.liquid-panel-light .liquid-point-name {
  color: rgba(17, 22, 28, 0.56);
}

.liquid-panel-light .liquid-point-body strong {
  color: var(--text-black);
}

.liquid-panel-light .liquid-point-body span {
  color: var(--text-gray);
  font-weight: var(--weight-body);
}

@media (max-width: 1024px) {
  .liquid-panel-grid.cols-2,
  .liquid-panel-grid.cols-3 {
    grid-template-columns: 1fr;
  }

  .liquid-panel {
    border-radius: 24px;
  }
}

@media (max-width: 640px) {
  .liquid-panel {
    border-radius: 22px;
  }

  .liquid-panel-item {
    padding: 22px 20px 24px;
  }

  .liquid-point-panel {
    padding: 22px 20px 24px;
  }

  .liquid-point-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-top: 12px;
  }

  .liquid-title {
    font-size: 20px;
  }

  .liquid-copy {
    font-size: 14px;
  }
}

.lnb-wrap {
  width: 100%;
  border-bottom: none !important;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  padding: 18px 0 14px;
}

header.scrolled ~ main .lnb-wrap { 
  top: calc(var(--header-scrolled-height) - 1px); 
  padding-top: 18px !important;
  padding-bottom: 14px !important;
}

.lnb-tabs, 
.prod-tabs, 
.faq-anchor-nav, 
.product-anchor-nav,
.org-anchor-nav {
  display: inline-flex !important;
  align-items: center !important;
  background: #e8e8ed !important;
  border-radius: 999px !important;
  padding: 5px !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lnb-tabs li a,
.prod-tabs li button,
.prod-tab-btn,
.faq-anchor-nav a,
.product-anchor-nav a,
.org-anchor-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 500;
  color: #424245;
  transition: all 0.25s ease;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  min-height: auto;
}

.lnb-tabs li a:hover,
.prod-tabs li button:hover,
.prod-tab-btn:hover,
.faq-anchor-nav a:hover,
.product-anchor-nav a:hover,
.org-anchor-nav a:hover {
  color: #000000;
}

.lnb-tabs li a.active,
.prod-tabs li button.active,
.prod-tab-btn.active,
.faq-anchor-nav a.active,
.product-anchor-nav a.active,
.org-anchor-nav a.active {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.company-sub-page .lnb-wrap {
  background: var(--sub-surface);
  top: calc(var(--header-height) - 1px);
  margin-top: -1px;
  padding-top: 120px !important;
  padding-bottom: 30px !important;
}

body.company-sub-page .lnb-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Left-aligned navigation */
  padding-left: var(--side-padding) !important;
  padding-right: var(--side-padding) !important;
}

body.company-sub-page .lnb-tabs {
  background: #e8e8ed !important;
}

body.company-sub-page .lnb-tabs li a {
  padding: 10px 28px;
  font-size: 17px;
  font-weight: 500;
  border-bottom: none;
}

.breadcrumb-container {
  position: sticky;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 9500;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--nav-glass-bg);
  backdrop-filter: var(--nav-glass-filter);
  -webkit-backdrop-filter: var(--nav-glass-filter);
  box-shadow: none;
  min-height: 64px;
}

.breadcrumb-placeholder,
.breadcrumb-sentinel {
  display: block;
  width: 100%;
}

.breadcrumb-sentinel {
  height: 0;
}

body.company-sub-page .breadcrumb-container {
  display: block;
}

.company-section {
  padding: 120px 0 0;
}

body.company-sub-page main > .container > .company-section:first-child {
  padding-top: 96px !important;
}

.company-section + .company-section {
  margin-top: var(--sp-section-y, 140px);
}

.company-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-13, 32px);
  align-items: end;
  margin-bottom: var(--sp-13, 32px);
}

.company-section-head.c-section-head {
  max-width: none;
}

.company-section-head h3 {
  font-size: var(--font-section);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
  color: var(--text-black);
  font-weight: var(--weight-display);
}

.company-section-head p {
  max-width: 720px;
  margin-top: var(--sp-8, 20px);
  font-size: var(--font-body-lg);
  line-height: var(--leading-body-loose);
  letter-spacing: var(--tracking-body);
  color: var(--text-gray);
  font-weight: var(--weight-body);
}

.company-section-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 28px;
  border: 1px solid rgba(15, 30, 44, 0.66);
  color: var(--text-black);
  font-size: 15px;
  font-weight: var(--weight-link);
  letter-spacing: -0.01em;
  transition: var(--transition);
}

.company-section-link::after {
  content: "›";
  font-size: 24px;
  line-height: 1;
}

.company-section-link:hover {
  color: var(--main-color);
  border-color: var(--main-color);
}

.company-intro-block {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 48px;
  align-items: start;
}

.company-intro-copy h4,
.company-info-card h4,
.company-band-copy h4 {
  font-size: var(--font-feature);
  line-height: var(--leading-feature);
  letter-spacing: var(--tracking-feature);
  color: var(--text-black);
  margin-bottom: 22px;
  font-weight: var(--weight-display);
}

.company-intro-copy p,
.company-info-card p,
.company-band-copy p,
.company-card p {
  font-size: var(--font-body);
  line-height: var(--leading-body-loose);
  letter-spacing: var(--tracking-body);
  color: var(--text-gray);
  font-weight: var(--weight-body);
}

.company-intro-copy p + p,
.company-info-card p + p,
.company-band-copy p + p {
  margin-top: 18px;
}

.company-info-card {
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.company-metric-grid,
.company-business-grid,
.company-card-grid {
  display: grid;
  gap: 24px;
}

.company-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.company-card,
.company-business-card {
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.company-card {
  padding: 30px 28px;
}

.company-card .eyebrow,
.company-business-card .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}

.company-card h4,
.company-business-card h4 {
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: var(--leading-feature);
  letter-spacing: var(--tracking-feature);
  color: var(--text-black);
  margin-bottom: 16px;
  font-weight: var(--weight-title);
}

.company-business-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 128px;
}

.company-business-card {
  display: grid;
  grid-template-rows: 240px 1fr;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.company-business-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 122, 24, 0.3);
}

.company-business-media {
  position: relative;
  overflow: hidden;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  background: #dfe5ea;
}

.company-business-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-business-content {
  padding: 28px 26px 30px;
}

.company-business-content .index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border: 1px solid rgba(15, 30, 44, 0.16);
  font-size: 12px;
  font-weight: 900;
  color: var(--text-black);
}

.company-band {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.company-business-grid + .company-band {
  margin-top: 0;
}

.company-band-media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.company-band-copy {
  padding: 48px;
}

.possibility-section {
  position: relative;
  padding: 72px 40px 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255, 158, 76, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(109, 160, 255, 0.12), transparent 26%),
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 24px 54px rgba(15, 30, 44, 0.05);
}

.possibility-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 42%),
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.55), transparent 14%);
  pointer-events: none;
}

.possibility-section > * {
  position: relative;
  z-index: 1;
}

.possibility-band {
  border: 1px solid rgba(255, 255, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0.14));
  box-shadow:
    0 22px 44px rgba(15, 30, 44, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.possibility-band .company-band-media,
.possibility-band .company-band-copy {
  position: relative;
  z-index: 1;
}

.possibility-band-media {
  padding: 18px;
}

.possibility-band-media img {
  min-height: 100%;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow:
    0 16px 34px rgba(15, 30, 44, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.possibility-band-copy {
  margin: 18px;
  padding: 34px 36px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(248, 250, 252, 0.42)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.44), rgba(244, 247, 250, 0.2));
  box-shadow:
    0 18px 38px rgba(15, 30, 44, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px) saturate(122%);
  -webkit-backdrop-filter: blur(14px) saturate(122%);
}

.possibility-band-copy h4 {
  margin-bottom: 18px;
}

.possibility-band-copy p {
  color: var(--text-gray);
  font-weight: var(--weight-body);
  line-height: 1.72;
}

.company-list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(15, 30, 44, 0.1);
}

.company-list-item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(15, 30, 44, 0.1);
}

.company-list-item .label {
  font-size: 13px;
  font-weight: var(--weight-link);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}

.company-list-item strong {
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--text-black);
  font-weight: var(--weight-title);
}

.breadcrumb {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 64px;
  padding: 0 var(--side-padding);
  color: var(--text-black);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}

.breadcrumb-container.is-stuck {
  margin-top: -1px;
  background: var(--nav-glass-bg);
  backdrop-filter: var(--nav-glass-filter);
  -webkit-backdrop-filter: var(--nav-glass-filter);
  border-bottom: 1px solid var(--nav-glass-border);
}

.breadcrumb-container.is-stuck .breadcrumb,
.breadcrumb-container.is-stuck .breadcrumb li.current {
  color: var(--text-black-strong, #1d1d1f) !important;
}

#header.has-inline-breadcrumb {
  height: 64px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#header.has-inline-breadcrumb.is-scrolled:not(.is-header-hover):not(.mega-active):not(.is-menu-open) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

#header.has-inline-breadcrumb:not(.is-header-hover):not(.mega-active):not(.is-menu-open)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 128px;
  background: var(--nav-glass-bg);
  backdrop-filter: var(--nav-glass-filter);
  -webkit-backdrop-filter: var(--nav-glass-filter);
  box-shadow: inset 0 -1px 0 var(--nav-glass-border);
  pointer-events: none;
  z-index: 0;
}

.header-breadcrumb-slot {
  display: none;
  pointer-events: none;
  position: absolute;
  top: 64px;
  left: var(--breadcrumb-slot-left, 20px);
  transform: none;
  z-index: 1;
  width: var(--breadcrumb-slot-width, calc(100% - 40px));
  box-sizing: border-box;
}

#header.has-inline-breadcrumb .header-breadcrumb-slot {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-left: var(--breadcrumb-slot-pad-left, 22px);
  padding-right: var(--breadcrumb-slot-pad-right, 22px);
}

#header.has-inline-breadcrumb .header-inner {
  position: relative;
  z-index: 1;
}

#header.has-inline-breadcrumb.is-header-hover .header-breadcrumb-slot,
#header.has-inline-breadcrumb.mega-active .header-breadcrumb-slot,
#header.has-inline-breadcrumb.is-menu-open .header-breadcrumb-slot {
  display: none;
}

#header.has-inline-breadcrumb .breadcrumb-container {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  margin-top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  min-height: 0;
  width: 100%;
}

#header.has-inline-breadcrumb .breadcrumb {
  width: 100%;
  max-width: none;
  min-height: 64px;
  margin: 0;
  padding: 0;
  color: var(--text-black-strong, #1d1d1f);
}

#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) + .breadcrumb-container {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) + .breadcrumb-container .breadcrumb,
#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) + .breadcrumb-container .breadcrumb li.current {
  color: #ffffff;
}

#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) + .breadcrumb-container.is-stuck {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.breadcrumb li:not(.current) {
  display: none !important;
}

.breadcrumb li.current {
  color: var(--text-black);
}

section.container {
  padding-top: 20px;
  padding-bottom: var(--section-padding);
}

.hex-btn-shared {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--point-gradient);
  color: #fff;
  font-weight: var(--weight-display);
  border: none;
  cursor: pointer;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47'%3E%3Cpath d='M42.32 2.5a15 15 0 0 1 15.36 0l34.2 19.74a15 15 0 0 1 7.5 13v39.49a15 15 0 0 1-7.5 13l-34.2 19.74a15 15 0 0 1-15.36 0l-34.2-19.74a15 15 0 0 1-7.5-13V35.24a15 15 0 0 1 7.5-13z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47'%3E%3Cpath d='M42.32 2.5a15 15 0 0 1 15.36 0l34.2 19.74a15 15 0 0 1 7.5 13v39.49a15 15 0 0 1-7.5 13l-34.2 19.74a15 15 0 0 1-15.36 0l-34.2-19.74a15 15 0 0 1-7.5-13V35.24a15 15 0 0 1 7.5-13z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: transform 0.3s ease, filter 0.3s ease;
  border-radius: 22px;
}

.hex-btn-shared:hover {
  transform: translateY(-2px) scale(1.03);
}

.top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 64px;
  font-size: 11px;
  letter-spacing: 0.12em;
  z-index: 900;
  box-shadow: none;
}

.btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 16px;
  border: 1px solid rgba(29, 29, 31, 0.12);
  color: var(--text-black);
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  transition: 0.3s;
}

.btn-load-more:hover {
  border-color: var(--main-color);
  color: var(--main-color);
}

.btn-load-more::before,
.company-section-link::before,
.detail-link::before,
.btn-back::before,
.btn-submit::before {
  content: "";
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 24%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 6%, transparent 7%),
    var(--point-gradient);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 10px 18px rgba(255, 122, 24, 0.22);
}

.company-section-link,
.detail-link,
.btn-back,
.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
}

.sitemap-footer {
  position: relative;
  margin-top: 0;
  padding: 120px 0 128px;
  background: #ffffff;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}

main + .sitemap-footer,
.sitemap-footer .footer-sitemap-inner {
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}

.sitemap-footer::before,
.sitemap-footer::after,
footer::before,
footer::after {
  display: none;
  content: none;
  border: 0;
  box-shadow: none;
}

.footer-sitemap-inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.85fr);
  gap: clamp(64px, 9vw, 160px);
  align-items: start;
}

.footer-brand-panel {
  display: grid;
  gap: 26px;
  align-content: start;
}

.footer-logo {
  display: inline-flex;
  width: fit-content;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 650;
  color: var(--text-black);
  letter-spacing: 0;
}

.footer-tagline {
  margin-top: -14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-gray);
}

.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
}

.footer-social-links a {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #52616d;
}

.footer-social-links svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-link-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 42px 58px;
}

.sitemap-footer > .container:not(.footer-sitemap-inner) {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(42px, 5vw, 92px);
  align-items: start;
}

.sitemap-footer > .container:not(.footer-sitemap-inner)::before {
  content: "HEXASTONE\A Hybrid Energy System";
  white-space: pre;
  display: block;
  font-size: 28px;
  line-height: 1.45;
  font-weight: 650;
  color: var(--text-black);
}

.sitemap-col h4,
.sitemap-footer h4 {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 650;
  color: var(--text-black);
}

.sitemap-col h4:not(:first-child),
.sitemap-footer h4:not(:first-child) {
  margin-top: 36px;
}

.sitemap-col ul,
.sitemap-footer ul {
  display: grid;
  gap: 9px;
}

.sitemap-col a,
.sitemap-footer a {
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-gray);
}

.sitemap-col a:hover,
.sitemap-footer a:hover {
  color: var(--main-color);
}

footer {
  background: #ffffff;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}

.foot-bottom {
  display: block;
  padding: 0 0 76px;
}

.foot-info {
  display: grid;
  gap: 8px;
  max-width: 760px;
  margin-left: calc((100% - min(100%, 760px)) * 0);
}

.foot-logo-text {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-black);
}

.footer-locale {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-info p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-gray);
}

@media (max-width: 1280px) {
  :root { --side-padding: 32px; }
  #gnb { display: none; }
  .mega-menu { display: none; }
  .full-menu-content { padding: 60px 50px; }
  .full-menu-category { width: 160px; font-size: 15px; }
  .full-menu-col { min-width: 140px; margin-right: 24px; }
  body.company-sub-page .sub-hero {
    height: var(--sub-hero-height);
  }
  body.company-sub-page .sub-hero-inner h2 {
    font-size: clamp(42px, 7vw, 72px);
  }
  .company-section-head,
  .company-intro-block,
  .company-band {
    grid-template-columns: 1fr;
  }
  .company-business-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --side-padding: 20px;
    --header-height: 72px;
    --header-scrolled-height: 70px;
    --sub-hero-height: 80svh;
    --font-hero: clamp(40px, 10vw, 48px);
    --font-section: clamp(36px, 9vw, 40px);
    --font-feature: clamp(30px, 7vw, 34px);
    --font-subsection: 24px;
    --font-body-lg: 17px;
    --font-body: 16px;
    --font-caption: 13px;
    --font-overline: 16px;
    --type-display-emphasis-size: 56px;
    --type-section-title-size: 36px;
    --type-section-desc-size: 15px;
    --type-section-link-size: 16px;
  }

  body,
  body.sub-page {
    background:
      linear-gradient(180deg, #081018 0%, #0a121b 320px, #eef3f5 320px, #eef3f5 100%);
  }

  body.company-sub-page {
    background:
      linear-gradient(180deg, #eff3f6 0%, #ffffff 180px, #ffffff 100%);
  }

  .lang-btn { display: flex; align-items: center; justify-content: center; margin-right: 15px; }

  .logo { font-size: 22px; gap: 3px; }
  .logo-mark {
    width: 24px;
    height: 22px;
    flex-basis: 24px;
    border-radius: 5px;
  }
  .logo::after { width: 54px; }

  .sub-hero-inner h2 {
    font-size: var(--font-hero);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-hero);
  }
  .sub-hero-inner p {
    font-size: var(--font-overline);
    letter-spacing: var(--tracking-overline);
    margin-bottom: 18px;
  }

  .lnb-tabs {
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 4px 8px;
    border-radius: 20px;
  }

  .lnb-tabs li a {
    padding: 8px 16px;
    font-size: 13px;
    min-height: auto;
  }

  body.company-sub-page .lnb-tabs li a {
    padding: 8px 16px;
  }

  .company-section {
    padding-top: 72px;
  }

  .company-section + .company-section {
    margin-top: 86px;
  }

  .company-section-head {
    grid-template-columns: 1fr;
    gap: var(--sp-8, 20px);
    margin-bottom: var(--sp-10, 24px);
  }

  .company-section-head h3 {
    font-size: var(--font-section);
  }

  .company-section-head p,
  .company-intro-copy p,
  .company-info-card p,
  .company-band-copy p,
  .company-card p {
    font-size: var(--font-body);
  }

  .company-intro-copy h4,
  .company-info-card h4,
  .company-band-copy h4,
  .company-card h4,
  .company-business-card h4 {
    font-size: var(--font-feature);
  }

  .company-metric-grid,
  .company-business-grid,
  .company-card-grid {
    grid-template-columns: 1fr;
  }

  .company-band-copy,
  .company-info-card,
  .company-card {
    padding: 28px 22px;
  }

  .footer-sitemap-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .footer-link-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }

  .sitemap-footer {
    margin-top: 0;
    padding: 120px 0 84px;
  }

  .footer-social-links {
    gap: 22px;
  }

  .company-business-card {
    grid-template-rows: 220px 1fr;
  }

  .company-list-item {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .full-menu-overlay.open { flex-direction: column; }

  .full-menu-sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 20px 25px;
    justify-content: flex-start;
    gap: 15px;
  }

  .sidebar-logo { font-size: 22px; margin-bottom: 0; }
  .sidebar-label { font-size: 12px; }
  .full-menu-content { padding: 30px 25px; }
  .close-btn { top: 15px; right: 20px; font-size: 28px; }
  .full-menu-row { flex-direction: column; gap: 15px; padding: 25px 0; }
  .full-menu-category { width: auto; font-size: 14px; }
  .full-menu-links { flex-direction: column; }
  .full-menu-col { min-width: auto; margin-right: 0; margin-bottom: 18px; }

  .foot-bottom {
    padding-bottom: 42px;
  }

  .btn-load-more,
  .company-section-link,
  .detail-link,
  .btn-back,
  .btn-submit {
    width: 100%;
    justify-content: center;
  }
}

.history-card-body.c-card-body {
  display: block;
  gap: 0;
}

.greeting-ui-head .c-title,
.section-header-group .c-title {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.greeting-ui-head .c-desc,
.section-header-group .c-desc {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin-top: inherit;
}

.org-section .section-head .c-title,
.org-section .section-head .c-desc {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin-top: inherit;
}

.btn-submit.c-btn,
.btn-load-more.c-btn,
.btn-back.c-btn,
.btn-origin.c-btn {
  min-height: unset;
}

@media (max-width: 640px) {
  .btn-back.c-btn,
  .btn-origin.c-btn,
  .btn-load-more.c-btn,
  .btn-submit.c-btn {
    white-space: nowrap;
  }
}

.btn-origin.c-btn {
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-radius: 0;
  min-height: unset;
}

/* Shared Samsung-style detail layouts */
.detail-shell {
  padding: 54px 0 140px;
}

.detail-hero {
  max-width: 1180px;
  margin: 0 auto 42px;
  padding: 8px 0 0;
}

.detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--main-color);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.detail-kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--main-color);
}

.detail-hero h1 {
  max-width: 860px;
  font-size: var(--font-section);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  font-weight: var(--weight-display);
  color: var(--text-black);
}

.detail-hero p {
  max-width: 860px;
  margin-top: 18px;
  font-size: var(--font-body-lg);
  line-height: var(--leading-body-loose);
  letter-spacing: var(--tracking-body);
  color: var(--text-gray);
  font-weight: var(--weight-body);
}

.detail-section {
  max-width: 1180px;
  margin: 0 auto 74px;
}

.detail-section-head {
  margin-bottom: 28px;
}

.detail-section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--main-color);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.detail-section-head .eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--main-color);
}

.detail-section-head h2 {
  font-size: var(--font-feature);
  line-height: var(--leading-feature);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-feature);
  color: var(--text-black);
}

.detail-section-head p {
  margin-top: 12px;
  font-size: var(--font-body);
  line-height: var(--leading-body-loose);
  letter-spacing: var(--tracking-body);
  color: var(--text-gray);
  font-weight: var(--weight-body);
  max-width: 920px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.detail-card {
  background: #fff;
  border: 1px solid #e9edf1;
  padding: 28px 26px;
  min-height: 220px;
}

.detail-card .index,
.detail-card .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--main-color);
  text-transform: uppercase;
}

.detail-card h3 {
  margin-top: 14px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: var(--weight-title);
  letter-spacing: -0.8px;
  color: var(--text-black);
}

.detail-card p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-gray);
  font-weight: var(--weight-body);
}

.detail-banner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 24px;
}

.detail-panel {
  background: #fff;
  border: 1px solid #e9edf1;
  padding: 28px;
}

.detail-panel h3 {
  font-size: 28px;
  line-height: 1.28;
  font-weight: var(--weight-display);
  letter-spacing: -1px;
  color: var(--text-black);
}

.detail-panel p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-gray);
  font-weight: var(--weight-body);
}

.detail-list {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.detail-list-item {
  padding: 18px 0;
  border-top: 1px solid rgba(15, 30, 44, 0.08);
}

.detail-list-item .label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--main-color);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.detail-list-item strong {
  display: block;
  font-size: 18px;
  font-weight: var(--weight-title);
  letter-spacing: -0.5px;
  color: var(--text-black);
}

.detail-list-item p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-gray);
  font-weight: var(--weight-body);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.detail-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid #23262c;
  background: #fff;
  color: var(--type-strong);
  font-size: 15px;
  font-weight: var(--weight-link);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.detail-link:hover {
  border-color: var(--main-color);
  color: var(--main-color);
  transform: translateY(-1px);
}

.detail-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 30, 44, 0.08);
  font-size: 13px;
  line-height: 1.72;
  color: var(--type-soft);
  font-weight: var(--weight-body);
}

@media (max-width: 1080px) {
  .detail-grid,
  .detail-banner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-hero h1 {
    font-size: 54px;
  }
}

@media (max-width: 640px) {
  .detail-shell {
    padding: 42px 0 100px;
  }

  .detail-hero h1 {
    font-size: 34px;
    letter-spacing: -1.8px;
  }

  .detail-hero p {
    font-size: 15px;
    line-height: 1.78;
  }

  .detail-grid,
  .detail-banner {
    grid-template-columns: 1fr;
  }

  .detail-card,
  .detail-panel {
    padding: 22px 20px;
  }

  .detail-card h3 {
    font-size: 22px;
  }

  .detail-section-head h2 {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .sub-hero-inner h2 { font-size: 27px; }
  .top-btn { right: 18px; bottom: 18px; }
}

/* ==========================================================================
   Premium Hero Component (Standardized)
   ========================================================================== */

.sub-hero-template {
  position: relative !important;
  width: 100% !important;
  height: var(--sub-hero-height, 80vh) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-bottom: 160px !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}

.hero-content-minimal {
  position: relative !important;
  width: 100% !important;
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--side-padding) !important;
  text-align: center !important;
  z-index: 5 !important;
  display: block !important;
}

.hero-kicker {
  display: block !important;
  font-size: 28px !important;
  line-height: 1.1428571429 !important;
  font-weight: 600 !important;
  letter-spacing: .007em !important;
  margin-bottom: 18px !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.hero-title {
  display: block !important;
  font-size: clamp(48px, 5.2vw, 88px) !important;
  line-height: 1.04 !important;
  margin: 0 auto !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  width: 100% !important;
  text-wrap: balance !important;
  word-break: keep-all !important;
}

/* Theme Modifiers */
.hero-theme-light .hero-kicker,
.hero-theme-light .hero-title { color: #1d1d1f !important; }

.hero-theme-dark .hero-kicker,
.hero-theme-dark .hero-title { color: #ffffff !important; }

/* Overlay for dark backgrounds */
.hero-overlay::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.25) !important;
  z-index: 1 !important;
}

@media (max-width: 1080px) {
  .sub-hero-template {
    padding-bottom: 120px !important;
  }
}

@media (max-width: 640px) {
  .sub-hero-template {
    height: auto !important;
    min-height: 480px !important;
    padding-top: 140px !important;
    padding-bottom: 80px !important;
  }
  .hero-kicker {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  .hero-title {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }
}

.secondary-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 64px);
  min-height: 640px;
  margin-bottom: 0;
  color: #ffffff;
  background: #050505 center center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}

.secondary-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.62)),
    radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.58) 72%);
  z-index: -1;
  pointer-events: none;
}

.secondary-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 48px));
  height: 100%;
  margin: 0 auto;
  padding: 64px 0 var(--sp-19, 56px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
}

.secondary-hero-title {
  display: block;
  max-width: 1180px;
  margin: 0;
  font-size: 64px;
  line-height: 1.12;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: #ffffff;
  text-wrap: balance;
  word-break: keep-all;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 110px rgba(0, 0, 0, 0.6));
}

.secondary-hero-subtitle {
  max-width: 980px;
  margin: var(--sp-5, 14px) auto 0;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
  word-break: keep-all;
  filter: drop-shadow(0 0 70px #000);
}

@media (max-width: 1024px) {
  .secondary-hero {
    min-height: 560px;
  }

  .secondary-hero-title {
    font-size: clamp(48px, 6.4vw, 64px);
  }
}

@media (max-width: 768px) {
  .secondary-hero {
    height: 86vh;
    min-height: 620px;
  }

  .secondary-hero-inner {
    width: min(100% - 36px, 720px);
    padding-bottom: 48px;
  }

  .secondary-hero-title {
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.055em;
  }

  .secondary-hero-subtitle {
    max-width: 92%;
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.01em;
  }
}

/* Consolidated Global Utilities */
.u-mb-24 { margin-bottom: 24px !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-reset-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* Consolidated Business Components */
.biz-table-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  border-right: 1px solid rgba(15, 30, 44, 0.1);
  padding-right: 20px;
  font-size: 16px;
  min-width: 150px;
}

.biz-card-icon {
  width: 32px;
  color: var(--main-color);
  margin-bottom: 16px;
}

.biz-card-title {
  font-size: 24px;
  margin-bottom: 12px;
}

.biz-card-desc {
  font-size: 16px;
  margin-top: 0;
}

/* === Component System Base (v1) === */
.c-section {
  position: relative;
  padding: var(--sp-section-y, 140px) 0;
  color: var(--text-black-strong, #1d1d1f);
  background: transparent;
}

.c-section-inner {
  width: min(100% - calc(var(--side-padding, 32px) * 2), var(--container-max, 1440px));
  margin-inline: auto;
}

.c-section-body {
  margin-top: var(--sp-13, 32px);
}

.c-section--tight {
  padding-block: var(--sp-section-y-tight, 110px);
}

.c-section--loose {
  padding-block: var(--sp-section-y-loose, 180px);
}

.c-section-head--center {
  text-align: center;
  margin-inline: auto;
}

.c-section-head--split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-grid-gap-md, 24px);
}

.c-section-body--grid {
  display: grid;
  gap: var(--sp-grid-gap-md, 24px);
}

.c-section-body--stack {
  display: grid;
  gap: var(--sp-10, 24px);
}

.c-section--dark {
  color: var(--text-white-strong, #ffffff);
}

.c-section-head {
  max-width: 980px;
  margin-bottom: var(--sp-13, 32px);
}

.c-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  margin-bottom: var(--sp-4, 12px);
  font-size: var(--fs-xs, 12px);
  font-weight: var(--weight-link, 600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--main-color);
}

.c-title {
  margin: 0;
  font-size: clamp(40px, 4.2vw, var(--fs-section, 56px));
  line-height: 1.1;
  letter-spacing: -0.045em;
  font-weight: var(--weight-display, 600);
  color: inherit;
  word-break: keep-all;
}

.c-desc {
  margin: var(--sp-8, 20px) 0 0;
  font-size: var(--fs-body-lg, 18px);
  line-height: 1.7;
  letter-spacing: -0.01em;
  font-weight: var(--weight-body, 400);
  color: inherit;
  word-break: keep-all;
}

.c-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  margin-top: var(--sp-10, 24px);
  font-size: var(--fs-body, 16px);
  line-height: 1.3;
  font-weight: var(--weight-link, 600);
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
}

.c-link:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.c-card {
  position: relative;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(29, 29, 31, 0.08);
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

.c-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
  border-color: rgba(29, 29, 31, 0.14);
}

.c-card--dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-white-strong, #ffffff);
  border-color: rgba(255, 255, 255, 0.14);
}

.c-card--dark:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
  border-color: rgba(255, 255, 255, 0.22);
}

.c-card-media {
  width: 100%;
  display: block;
}

.c-card-body {
  padding: var(--sp-card-pad-lg, 32px);
}

.c-card-title {
  margin: 0;
  font-size: var(--fs-card-title, 24px);
  line-height: 1.32;
  font-weight: var(--weight-title, 600);
  letter-spacing: -0.025em;
  color: var(--text-black-strong, #1d1d1f);
  word-break: keep-all;
}

.c-card-desc {
  margin: 0;
  font-size: var(--fs-body, 16px);
  line-height: 1.72;
  font-weight: var(--weight-body, 400);
  color: var(--text-black-muted, #6e6e73);
  word-break: keep-all;
}

.c-card--dark .c-card-title {
  color: var(--text-white-strong, #ffffff);
}

.c-card--dark .c-card-desc {
  color: var(--text-white-body, rgba(255, 255, 255, 0.84));
}

.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-2, 8px) var(--sp-6, 16px);
  border-radius: 999px;
  font-size: var(--fs-sm, 14px);
  line-height: 1.2;
  font-weight: var(--weight-link, 600);
  letter-spacing: -0.01em;
  color: inherit;
  border: 1px solid rgba(15, 30, 44, 0.12);
  background: rgba(245, 245, 247, 0.9);
}

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-4, 12px) var(--sp-10, 24px);
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--fs-body, 16px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.c-btn--primary {
  background: var(--main-color);
  color: #fff;
  border: 0;
}

.c-btn--secondary {
  background: transparent;
  color: var(--main-color);
  border: 1px solid var(--main-color);
}

.c-btn--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(255,255,255,0.2);
}

.c-btn:focus-visible,
.c-btn--primary:focus-visible,
.c-btn--secondary:focus-visible,
.c-btn--ghost:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(15, 30, 44, 0.12);
  background: rgba(245, 245, 247, 0.9);
  color: inherit;
}

.c-icon-btn:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

/* === Component Unification Layer (v2) === */
.company-section-head.c-section-head,
.section-head.c-section-head,
.ui-head.c-section-head,
.v2-section-head.c-section-head {
  margin-bottom: var(--sp-13, 32px);
}

.company-section-head.c-section-head h3,
.section-head.c-section-head > h3,
.ui-head.c-section-head .c-title,
.v2-section-head.c-section-head .c-title {
  font-size: clamp(40px, 4.2vw, var(--fs-section, 56px));
  line-height: 1.1;
  letter-spacing: -0.045em;
  font-weight: var(--weight-display, 600);
}

.company-section-head.c-section-head p,
.section-head.c-section-head > p,
.ui-head.c-section-head .c-desc,
.v2-section-head.c-section-head .c-desc {
  margin-top: var(--sp-8, 20px);
  font-size: var(--fs-body-lg, 18px);
  line-height: 1.7;
  letter-spacing: -0.01em;
  font-weight: var(--weight-body, 400);
  color: var(--text-gray);
}

.company-card.c-card,
.company-business-card.c-card,
.greeting-direction-card.c-card,
.map-guide-card.c-card,
.trust-item.c-card,
.metric-card.c-card {
  border-radius: var(--radius-lg);
}

.history-card.c-card:hover,
.greeting-direction-card.c-card:hover,
.company-card.c-card:hover,
.tech-pillar-slide.c-card:hover,
.map-guide-card.c-card:hover,
.trust-item.c-card:hover {
  transform: none;
  box-shadow: none;
}

.company-business-card.c-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 122, 24, 0.3);
}

.company-section .company-section-head + .c-section-body {
  margin-top: 0;
}

.company-list.c-section-body--stack {
  display: flex;
}

.container.c-section-inner {
  width: 100%;
}

.main-showcase .business-ui-card.c-card:hover {
  transform: none;
  box-shadow: none;
}

.metric-card.c-card:hover {
  transform: scale(1.02);
}

.trust-item.c-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.company-card.c-card,
.company-business-card.c-card {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(255, 255, 255, 0.74);
}

.tech-pillar-slide.c-card {
  border: none;
}

.company-card .c-card-title,
.company-business-card .c-card-title,
.greeting-direction-card .c-card-title,
.map-guide-card .c-card-title,
.history-card .c-card-title,
.trust-item .c-card-title,
.metric-card .c-card-title {
  font-size: clamp(22px, 2.1vw, var(--fs-card-title, 24px));
  line-height: 1.32;
  letter-spacing: -0.025em;
}

.company-card .c-card-desc,
.company-business-card .c-card-desc,
.greeting-direction-card .c-card-desc,
.map-guide-card .c-card-desc,
.history-card .c-card-desc,
.trust-item .c-card-desc,
.metric-card .c-card-desc {
  font-size: var(--fs-body, 16px);
  line-height: 1.72;
  letter-spacing: -0.01em;
}

.company-section-link.c-link,
.type-section-link.c-link,
.btn-back.c-btn,
.btn-origin.c-btn,
.btn-load-more.c-btn,
.v2-btn-p.c-btn,
.v2-btn-s.c-btn,
.btn-submit.c-btn {
  min-height: 46px;
}

@media (max-width: 768px) {
  .c-section-inner {
    width: min(100% - 40px, var(--container-max, 1440px));
  }

  .c-section-body {
    margin-top: var(--sp-10, 24px);
  }

  .c-section--tight,
  .c-section--loose {
    padding-block: var(--sp-22, 72px);
  }

  .c-section-head--split {
    display: block;
  }

  .c-section-head {
    margin-bottom: var(--sp-10, 24px);
  }

  .c-title {
    font-size: clamp(32px, 8.2vw, 44px);
    line-height: 1.14;
  }

  .c-desc {
    margin-top: var(--sp-6, 16px);
    font-size: var(--fs-body, 16px);
    line-height: 1.72;
  }

  .c-card-body {
    padding: var(--sp-10, 24px);
  }

  .c-card:hover {
    transform: none;
  }
}

/* === Header Variant System (v2) === */
#header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 10000 !important;
}

#header .header-inner {
  pointer-events: auto;
  width: min(100% - 40px, var(--max-width, 1504px));
  margin-inline: auto;
  height: 64px;
  padding: 0 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.28s ease, color 0.28s ease, backdrop-filter 0.28s ease, -webkit-backdrop-filter 0.28s ease;
}

#header #gnb ul {
  gap: 38px;
}

#header.header--transparent {
  color: var(--text-white-strong, #ffffff) !important;
}

#header.header--transparent .header-inner {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) .logo,
#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) #gnb ul li a,
#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) .lang-current,
#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) .lang-current-icon,
#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) .icon-btn {
  color: var(--text-white-strong, #ffffff) !important;
}

#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.mega-active):not(.is-menu-open) #gnb ul li a::after {
  background: var(--text-white-strong, #ffffff) !important;
}

#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.is-menu-open) #gnb ul li:hover a,
#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.is-menu-open) #gnb ul li.mega-current a {
  background: rgba(255, 255, 255, 0.18);
}

#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.is-menu-open) .lang-current:hover {
  color: #ffffff;
}

#header.header--white {
  color: var(--text-black-strong, #1d1d1f) !important;
  background: var(--nav-glass-bg) !important;
  backdrop-filter: var(--nav-glass-filter) !important;
  -webkit-backdrop-filter: var(--nav-glass-filter) !important;
}

#header.header--white .header-inner {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

#header.header--white .logo,
#header.header--white #gnb ul li a,
#header.header--white .lang-current,
#header.header--white .lang-current-icon,
#header.header--white .icon-btn {
  color: var(--text-black-strong, #1d1d1f) !important;
}

#header.header--white #gnb ul li a::after {
  background: var(--text-black-strong, #1d1d1f) !important;
}

#header.is-scrolled,
#header.is-header-hover,
#header.mega-active,
#header.is-menu-open {
  background: var(--nav-glass-bg) !important;
  backdrop-filter: var(--nav-glass-filter) !important;
  -webkit-backdrop-filter: var(--nav-glass-filter) !important;
  border: none !important;
  box-shadow: inset 0 -1px 0 var(--nav-glass-border) !important;
}

#header.mega-active {
  height: auto !important;
}

#header.is-scrolled .header-inner,
#header.is-header-hover .header-inner,
#header.is-menu-open .header-inner,
#header.header--white .header-inner {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

#header.is-scrolled,
#header.is-header-hover,
#header.mega-active,
#header.is-menu-open {
  color: var(--text-black-strong, #1d1d1f) !important;
}

#header.is-scrolled .logo,
#header.is-header-hover .logo,
#header.mega-active .logo,
#header.is-menu-open .logo,
#header.is-scrolled #gnb ul li a,
#header.is-header-hover #gnb ul li a,
#header.mega-active #gnb ul li a,
#header.is-menu-open #gnb ul li a,
#header.is-scrolled .lang-current,
#header.is-header-hover .lang-current,
#header.mega-active .lang-current,
#header.is-menu-open .lang-current,
#header.is-scrolled .lang-current-icon,
#header.is-header-hover .lang-current-icon,
#header.mega-active .lang-current-icon,
#header.is-menu-open .lang-current-icon,
#header.is-scrolled .icon-btn,
#header.is-header-hover .icon-btn,
#header.mega-active .icon-btn,
#header.is-menu-open .icon-btn {
  color: var(--text-black-strong, #1d1d1f) !important;
}

#header.is-scrolled #gnb ul li a::after,
#header.is-header-hover #gnb ul li a::after,
#header.is-menu-open #gnb ul li a::after {
  background: var(--text-black-strong, #1d1d1f) !important;
}

#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.is-menu-open) .lang-current,
#header.header--transparent:not(.is-scrolled):not(.is-header-hover):not(.is-menu-open) .icon-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mega-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: translateY(0) !important;
  width: 100% !important;
  z-index: 9999;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}

#header.mega-active .mega-menu,
#header .mega-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) !important;
}

.mega-menu .mega-inner {
  width: 100%;
  max-width: var(--max-width, 1504px);
  margin: 0 auto;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 768px) {
  #header {
    top: 0 !important;
    width: 100% !important;
    height: 60px !important;
  }

  #header .header-inner {
    width: 100%;
    height: 60px;
    padding: 0 16px !important;
    border-radius: 0 !important;
  }

  #header #gnb ul {
    gap: 24px;
  }

  .mega-menu {
    top: auto !important;
    width: 100% !important;
  }

  .mega-menu .mega-inner {
    border-radius: 0 !important;
  }

  .mega-content-area--company.active {
    grid-template-columns: 1fr;
  }

  .mega-company-resources {
    grid-template-columns: 1fr;
  }
}

body.header-transparent-page .sub-hero {
  padding-top: 0;
}

@media (max-width: 640px) {
  body.header-transparent-page .sub-hero-template {
    padding-top: 96px !important;
  }
}

/* ==========================================================================
   META-STYLE SPLIT HEADER LAYOUT
   ========================================================================== */

/* 1. Header Inner Structure */
#header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 64px !important; /* Force constant height to prevent hover vertical jumps */
  max-height: 64px !important;
  padding: 0 var(--side-padding) !important;
}

/* Left Section: Logo */
.header-left {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Middle Section: GNB next to logo */
.header-middle {
  flex-grow: 1 !important;
  margin-left: 32px !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.header-middle #gnb {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.header-middle #gnb ul {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important; /* Meta capsule GNB layout gap */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

.header-middle #gnb ul li {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Right Section: Support + Utility */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
}

.header-right-gnb {
  display: flex !important;
  align-items: center !important;
}

.header-right-gnb ul {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. GNB Links Capsule Hover Style (Simple, elegant gray pill, no double borders) */
#header #gnb ul li a,
.header-right-gnb ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  box-sizing: border-box !important;
}

#header #gnb ul li a:hover,
.header-right-gnb ul li a:hover,
#header #gnb ul li.mega-current a,
.header-right-gnb ul li.mega-current a {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #1d1d1f !important;
}

/* Under transparent header, GNB links and 고객지원 must be white! */
#header.header--transparent:not(.is-scrolled):not(.mega-active):not(.is-menu-open):not(.is-header-hover) #gnb ul li a,
#header.header--transparent:not(.is-scrolled):not(.mega-active):not(.is-menu-open):not(.is-header-hover) .header-right-gnb ul li a {
  color: #ffffff !important;
}

#header.header--transparent:not(.is-scrolled):not(.mega-active):not(.is-menu-open):not(.is-header-hover) #gnb ul li a:hover,
#header.header--transparent:not(.is-scrolled):not(.mega-active):not(.is-menu-open):not(.is-header-hover) .header-right-gnb ul li a:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Hide original GNB underlines */
#header #gnb ul li a::after,
.header-right-gnb ul li a::after {
  display: none !important;
}

/* 3. Utility Actions & Hamburger Hide on Desktop */
.header-util {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.lang-btn-wrapper,
.burger-btn-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 38px !important; /* Match GNB link height */
  border-radius: 999px !important;
  position: relative !important;
  transition: background-color 0.2s ease !important;
}

.burger-btn-wrapper {
  display: none !important; /* Hide Hamburger on Desktop */
}

/* Hamburger inside burger-btn-wrapper */
.burger-btn-wrapper #burger-btn {
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  background: transparent !important;
  color: #1d1d1f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* 4. Language Selector Capsule (Opaque / Transparent Pill Style) */
.lang-btn-wrapper .lang-btn {
  width: auto !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.lang-btn-wrapper .lang-dropdown {
  width: auto !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.lang-btn-wrapper .lang-current {
  width: auto !important;
  height: 38px !important;
  min-width: 88px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #1d1d1f !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s, color 0.2s !important;
}

/* Under transparent header initially, the language switcher button is white text */
#header.header--transparent:not(.is-scrolled):not(.mega-active):not(.is-menu-open):not(.is-header-hover) .lang-btn-wrapper .lang-current {
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hover style of lang-current button */
.lang-btn-wrapper .lang-current:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

#header.header--transparent:not(.is-scrolled):not(.mega-active):not(.is-menu-open) .lang-btn-wrapper .lang-current:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Custom globe icon style */
.lang-btn-wrapper .globe-icon {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  stroke-width: 1.8px !important;
}

.lang-btn-wrapper .lang-current-label {
  margin-left: 5px !important;
  margin-right: 3px !important;
}

.lang-btn-wrapper .lang-current-icon {
  font-size: 9px !important;
  opacity: 0.7 !important;
}

/* Dropdown Popup Panel matching width of lang-current perfectly */
.lang-btn-wrapper .lang-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(245, 245, 247, 0.82) !important; /* Blurry gray backdrop */
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
  z-index: 10002 !important;
  box-sizing: border-box !important;
}

.lang-btn-wrapper .lang-dropdown.open .lang-menu,
.lang-btn-wrapper:hover .lang-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Dropdown list items inside styled as elegant gray capsule pills */
.lang-btn-wrapper .lang-menu button {
  width: 100% !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important; /* Bold black text */
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.lang-btn-wrapper .lang-menu button:hover {
  background-color: rgba(0, 0, 0, 0.05) !important; /* Gray capsule hover */
  color: #ff7a18 !important; /* Subtle active highlight hover */
}

.lang-btn-wrapper .lang-menu button.active {
  background-color: rgba(0, 0, 0, 0.08) !important; /* Solid gray capsule for active state */
  color: #ff7a18 !important;
  font-weight: 800 !important;
}

/* 5. Mobile Responsiveness */
@media (max-width: 768px) {
  #header .header-inner {
    height: 60px !important;
    max-height: 60px !important;
  }

  /* Hide GNB on Mobile */
  .header-middle,
  .header-right-gnb {
    display: none !important;
  }

  .burger-btn-wrapper {
    display: flex !important; /* Show Hamburger on Mobile */
  }
}