/* Main Web (Web-001) - extracted from public/main.html */
:root {
      --bg: #0b2b3b;
      --text: #ffffff;
      --muted: #5e5e5e;
      --primary: #008cff;
      --primary-deep: #0f5694;
      --search-border: #008cff;
      /* Figma 캔버스 1440 - 좌우 여백 60*2 = 컨텐츠 컨테이너 1320 */
      --container-max: 100%;
      --container-gutter-x: 16px;
    }

    * { box-sizing: border-box; }
    /*
      overflow-x: hidden 은 Safari/macOS 에서 ScrollTrigger pin 을 깨뜨림.
      clip 은 가로 스크롤만 막고 pin/스크럽은 유지 (GSAP 권장).
      common.css 의 html{height:100%} 은 맥에서 스크롤 컨테이너를 꼬이게 하므로 auto 로 덮음.
    */
    html {
      overflow-x: clip;
      height: auto;
      min-height: 100%;
    }
    body {
      margin: 0;
      overflow-x: clip;
    }
    body.page-main {
      background: #fff;
    }
    /* #wrapper: header + main + footer 셸. fixed GNB/메가가 잘리지 않도록 overflow visible */
    #wrapper {
      width: 100%;
      min-height: 100vh;
      position: relative;
      overflow: visible;
      display: flex;
      flex-direction: column;
    }
    body.page-main #wrapper {
      background: #fff;
    }
    body.subpage #wrapper {
      background: #fff;
    }
    #content {position: relative; flex: 1 0 auto; width: 100%; }
    /* 메인: 투명 헤더가 히어로 위에 오버레이 */
    body.page-main #content {padding-top: 0;}
    /* 셸은 흰색 — 어두운 톤은 .hero 등 섹션에만 (새로고침 FOUC 방지) */
    #main.page-main-web { color: #131313; background: #fff; }

    /* Bootstrap-like container: 폭으로 제어, 큰 화면에서 좌우 여백 60*2 = 컨텐츠 컨테이너 1320 */
    .gnb-wrap .container,
    .site-footer .container,
    #main .container,
    .mega .container {
      width: 100%;
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--container-gutter-x);
      padding-right: var(--container-gutter-x);
    }

    /* 풀블리드 요소(브랜드 스와이프 등)를 container 시작선에 맞춤 */
    .container-bleed-x {
      padding-left: max(var(--container-gutter-x), calc((100% - min(100%, var(--container-max))) / 2));
      padding-right: max(var(--container-gutter-x), calc((100% - min(100%, var(--container-max))) / 2));
    }

    @media (min-width: 576px) {
      :root { --container-max: 540px; }
    }
    @media (min-width: 768px) {
      :root {
        --container-max: 720px;
        --container-gutter-x: 24px;
      }
    }
    @media (min-width: 992px) {
      :root { --container-max: 960px; }
    }
    @media (min-width: 1200px) {
      :root { --container-max: 1140px; }
    }
    @media (min-width: 1400px) {
      :root {
        --container-max: 1320px;
        --container-gutter-x: 0px;
      }
    }

    @media (max-width: 1100px) {
      .mega--products .mega__inner,
      .mega--about .mega__inner {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr 1fr;
      }
      .mega__col--product,
      .mega__col--sub,
      .mega__feature,
      .mega__feature-stack {
        width: auto;
        height: auto;
      }
      .mega__feature,
      .mega__feature-stack {
        grid-column: 1 / -1;
        min-height: 360px;
      }
      .mega__item {
        width: 100%;
        max-width: 300px;
      }
      .mega--brands .mega__inner {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
      }
      .mega-brands__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
      }
      .mega-brand {
        width: 100%;
        height: 52px;
        min-height: 52px;
      }
      .mega--insight .mega__inner {
        width: 100%;
        max-width: 100%;
        height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
      }
      .mega-insight {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
      }
      .mega--support .mega__inner {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr 1fr;
      }
      .mega--support .mega__col--support-nav,
      .mega--support .mega__col--support-mid,
      .mega--support .mega__feature,
      .mega--support .mega__feature--support {
        width: auto;
        height: auto;
      }
      .mega--support .mega__feature,
      .mega--support .mega__feature--support {
        grid-column: 1 / -1;
        min-height: 360px;
      }
      .mega--support .mega__item,
      .mega--support .mega__list {
        width: 100%;
        max-width: 300px;
      }
    }
    @media (max-width: 720px) {
      .mega--products .mega__inner,
      .mega--about .mega__inner {
        grid-template-columns: 1fr;
      }
      .mega__col--product {
        border-right: 0;
        border-bottom: 1px solid #c8ced3;
      }
      .mega--brands .mega__inner {
        grid-template-columns: none;
      }
      .mega-brands__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mega-brand__logo-wrap {
        --mega-brand-logo-max-w: 84px;
        --mega-brand-logo-max-h: 24px;
        height: 32px;
      }
      .mega--insight .mega__inner {
        grid-template-columns: 1fr;
      }
      .mega--support .mega__inner {
        grid-template-columns: 1fr;
      }
      .mega--support .mega__col--support-nav {
        border-right: 0;
        border-bottom: 1px solid #c8ced3;
      }
    }

    .gnb-wrap {
      --gnb-ease: ease;
      /* 배경보다 텍스트를 약간 빠르게 → 배경 끝난 뒤 글자가 따라오는 느낌 방지 */
      --gnb-bg-duration: 0.28s;
      --gnb-fg-duration: 0.2s;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      width: 100%;
      background-color: transparent;
      color: #fff;
      overflow: visible;
      transition:
        background-color var(--gnb-bg-duration) var(--gnb-ease),
        box-shadow var(--gnb-bg-duration) var(--gnb-ease);
    }
    .gnb-wrap.is-solid {
      background-color: #fff;
      box-shadow: 0 8px 24px rgba(16, 24, 31, 0.08);
      color: #131313;
    }

    .gnb {
      position: relative;
      min-height: 70px;
      padding-top: 20px;
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 60px;
      overflow: visible;
    }

    /*
      로고: 흰(투명 GNB) / 파란(solid GNB) 이중 이미지
      filter 보간 없이 opacity 크로스페이드 → #154670 중간색 없이 전환
    */
    .logo {
      position: relative;
      display: block;
      width: 152px;
      height: 30px;
      flex-shrink: 0;
    }
    .logo__img {
      display: block;
      width: 152px;
      height: 30px;
      object-fit: contain;
      transition: opacity var(--gnb-fg-duration) var(--gnb-ease);
    }
    .logo__img--solid {
      position: absolute;
      inset: 0;
      opacity: 0;
    }
    .gnb-wrap.is-solid .logo__img--light {
      opacity: 0;
    }
    .gnb-wrap.is-solid .logo__img--solid {
      opacity: 1;
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 40px;
      white-space: nowrap;
      font-size: 16px;
      margin-right: auto;
    }
    .menu__item {
      position: static;
    }
    .menu__link,
    .menu a {
      color: #fff;
      text-decoration: none;
      opacity: 0.95;
      transition: color var(--gnb-fg-duration) var(--gnb-ease);
    }
    button.menu__link {
      appearance: none;
      background: none;
      border: 0;
      padding: 0;
      margin: 0;
      font: inherit;
      line-height: inherit;
      cursor: pointer;
    }
    .gnb-wrap.is-solid .menu__link,
    .gnb-wrap.is-solid .menu a {
      color: #131313;
    }
    .menu__link:hover {
      color: #008cff;
    }
    .gnb-wrap.is-solid .menu__link:hover {
      color: #154670;
    }
    /* 메가메뉴 열린 1차 메뉴 · 현재 섹션 액티브 (hover와 동일) */
    .menu__item.is-open > .menu__link,
    .menu__item.is-active > .menu__link {
      color: #008cff;
    }
    .gnb-wrap.is-solid .menu__item.is-open > .menu__link,
    .gnb-wrap.is-solid .menu__item.is-active > .menu__link {
      color: #154670;
      font-weight: 600;
    }

    /* Products mega menu: Figma 제품정보 1040×560 (357 + 348 + 335) */
    .mega {
      --mega-ease: cubic-bezier(0.22, 1, 0.36, 1);
      --mega-duration: 0.34s;
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 16px);
      z-index: 1001;
      display: flex;
      justify-content: center;
      padding: 0 var(--container-gutter-x);
      background: transparent;
      border: 0;
      box-shadow: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(0, -10px, 0);
      transition:
        opacity var(--mega-duration) var(--mega-ease),
        transform var(--mega-duration) var(--mega-ease),
        visibility var(--mega-duration) var(--mega-ease);
    }
    /* .mega { display:flex } 가 UA [hidden]을 덮어쓰므로 명시 필요 — soft-nav 유령 히트 차단 */
    .mega[hidden] {
      display: none !important;
      pointer-events: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
    /* soft-nav 직후 헤더 잠금: 메가 전부 비가시·비히트 */
    .gnb-wrap.is-mega-disarmed .mega {
      display: none !important;
      pointer-events: none !important;
    }
    /* 닫힌 상태: 자식·브릿지까지 포인터 차단 */
    .mega[aria-hidden="true"],
    .mega[aria-hidden="true"]::before,
    .mega[aria-hidden="true"] * {
      pointer-events: none !important;
    }
    /* 헤더-메가메뉴 사이 16px 간격을 마우스가 지나도 닫히지 않도록 브릿지 */
    .mega::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -16px;
      height: 16px;
    }
    .menu__item.is-open > .mega {
      opacity: 1;
      visibility: visible;
      /* 메가 래퍼(풀폭 투명 영역)는 통과시키고, 실제 패널·브릿지만 히트 */
      pointer-events: none;
      transform: translate3d(0, 0, 0);
      z-index: 1002;
    }
    .mega .mega__inner {
      pointer-events: none;
    }
    .menu__item.is-open > .mega::before,
    .menu__item.is-open > .mega .mega__inner {
      pointer-events: auto;
    }
    .mega .mega__inner.container,
    .mega__inner {
      margin-left: auto;
      margin-right: auto;
      background: #f2f4f5;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
      /* scale은 서브픽셀로 이미지가 좌우로 흔들려 보임 → Y만 미세 이동 */
      transform: translate3d(0, -6px, 0);
      transform-origin: top center;
      transition:
        transform 0.4s var(--mega-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow 0.4s var(--mega-ease, cubic-bezier(0.22, 1, 0.36, 1));
    }
    .menu__item.is-open > .mega .mega__inner {
      transform: translate3d(0, 0, 0);
      box-shadow: 0 18px 40px rgba(16, 24, 31, 0.14);
    }
    /* 고객지원: 카탈로그/배너 이미지가 흔들리지 않도록 transform 없이 opacity만 */
    .mega.mega--support {
      transform: none;
    }
    .menu__item.is-open > .mega.mega--support {
      transform: none;
    }
    .mega--support .mega__inner.container,
    .mega--support .mega__inner,
    .menu__item.is-open > .mega.mega--support .mega__inner {
      transform: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .mega,
      .mega .mega__inner {
        transition: none;
      }
    }
    /* Products mega: Figma 1040×560 (357 + 348 + 335) */
    .mega--products .mega__inner.container,
    .mega--products .mega__inner {
      width: 1040px;
      max-width: 1040px;
      height: 560px;
      padding-left: 0;
      padding-right: 0;
      display: grid;
      grid-template-columns: 357px 348px 335px;
      align-items: stretch;
      box-shadow: 0 18px 40px rgba(16, 24, 31, 0.12);
    }
    /* About mega: Figma 1040×560 (357 + 348 + 335) — 외곽 너비 고정 */
    .mega--about .mega__inner.container,
    .mega--about .mega__inner {
      width: 1040px;
      max-width: 1040px;
      height: 560px;
      padding-left: 0;
      padding-right: 0;
      display: grid;
      grid-template-columns: 357px 348px 335px;
      align-items: stretch;
      box-shadow: 0 18px 40px rgba(16, 24, 31, 0.12);
      clip-path: inset(0 0 0 0 round 8px);
      transition:
        clip-path 0.32s var(--mega-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow 0.32s var(--mega-ease, cubic-bezier(0.22, 1, 0.36, 1));
    }
    /* 서브 없는 메뉴: 1열 고정, 3열 배너만 2열 자리로 슬라이드 (우측 348 클리핑) */
    .mega--about .mega__inner.is-compact {
      clip-path: inset(0 348px 0 0 round 8px);
    }
    .mega--about .mega__inner.is-compact .mega__col--about-mid {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .mega--about .mega__feature--about {
      width: 335px;
      transition: transform 0.32s var(--mega-ease, cubic-bezier(0.22, 1, 0.36, 1));
    }
    .mega--about .mega__inner.is-compact .mega__feature--about {
      transform: translateX(-348px);
    }
    /* Brands mega: 5열 콤팩트 그리드 + 전체보기 (스크롤 없음) */
    .mega--brands .mega__inner.container,
    .mega--brands .mega__inner {
      box-sizing: border-box;
      width: 1040px;
      max-width: 1040px;
      height: auto;
      max-height: none;
      padding: 24px 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow: hidden;
    }
    .mega-brands__grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      align-content: start;
      overflow: visible;
      max-height: none;
      padding-right: 0;
    }
    .mega-brand {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 100%;
      height: 52px;
      min-height: 52px;
      padding: max(0.5rem, var(--vw-8)) max(0.75rem, var(--vw-14));
      border-radius: 6px;
      overflow: hidden;
      text-decoration: none;
      background: #fff;
      box-shadow: 0 0 0 0 rgba(16, 24, 31, 0);
      transition:
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease;
    }
    .mega-brand:hover {
      background-color: #f7fbff;
      box-shadow: 0 4px 14px rgba(16, 24, 31, 0.08);
    }
    .mega-brand.is-current {
      background-color: #f7fbff;
      box-shadow: 0 0 0 1.5px #2070b6;
    }
    .mega-brand__logo-wrap {
      --mega-brand-logo-max-w: 100px;
      --mega-brand-logo-max-h: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 36px;
      min-width: 0;
      overflow: hidden;
    }
    .mega-brand__logo {
      display: block;
      flex: 0 1 auto;
      width: auto;
      height: auto;
      max-width: min(var(--mega-brand-logo-max-w), 100%);
      max-height: var(--mega-brand-logo-max-h);
      object-fit: contain;
      object-position: center;
      transition: opacity 0.35s ease;
    }
    .mega-brand__logo--text {
      font-family: var(--font-en);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      max-width: 100%;
      font-size: clamp(0.6875rem, var(--font-14), 0.8125rem);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: #154670;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mega-brand:hover .mega-brand__logo {
      opacity: 0.92;
    }
    .mega-brands__all {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      min-width: 120px;
      height: 40px;
      padding: 0 20px;
      border-radius: 4px;
      background: #154670;
      color: #fff !important;
      opacity: 1;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      text-decoration: none;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .mega-brands__all:hover {
      background: #0f5694;
      color: #fff !important;
    }
    .mega-brands__all.is-current {
      background: #0f5694;
      box-shadow: 0 0 0 2px rgba(32, 112, 182, 0.35);
    }
    /* Insight mega: Figma 인사이트 1040×294 — 4×230 / gap 19 / pad 32 */
    .mega--insight .mega__inner.container,
    .mega--insight .mega__inner {
      box-sizing: border-box;
      width: 1040px;
      max-width: 1040px;
      height: auto;
      min-height: 310px;
      padding: 40px 32px 32px;
      display: grid;
      grid-template-columns: repeat(4, 230px);
      gap: 19px;
      align-content: start;
      justify-content: start;
      overflow: visible !important;
    }
    .menu__item.is-open > .mega.mega--insight .mega__inner {
      overflow: visible !important;
    }
    /*
      호버 hit 영역은 a에 고정하고, 시각 레이어(.mega-insight__lift)만 이동.
      a 자체를 translate하면 마우스가 카드 밖으로 나가 hover가 끊겨
      transition이 취소되며 뚝뚝 끊겨 보인다.
    */
    .mega-insight {
      position: relative;
      display: block;
      box-sizing: border-box;
      width: 230px;
      height: 230px;
      text-decoration: none;
      background: transparent;
      /* a는 절대 움직이지 않음 → hover 유지 */
      transform: none;
    }
    .mega-insight__lift {
      position: absolute;
      inset: 0;
      display: block;
      border-radius: 8px;
      overflow: hidden;
      background: #154670;
      box-shadow: 0 4px 14px rgba(16, 24, 31, 0.08);
      transform: translate3d(0, 0, 0);
      -webkit-transition:
        -webkit-transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition:
        transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .mega-insight__lift::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 8px;
      border: 2px solid transparent;
      background: transparent;
      pointer-events: none;
      z-index: 2;
      -webkit-transition:
        border-color 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
        background-color 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition:
        border-color 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
        background-color 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .mega-insight:hover .mega-insight__lift,
    .mega-insight:focus-visible .mega-insight__lift,
    .mega-insight.is-current .mega-insight__lift {
      transform: translate3d(0, -6px, 0);
      box-shadow: 0 16px 32px rgba(21, 70, 112, 0.22);
    }
    .mega-insight:hover .mega-insight__lift::after,
    .mega-insight:focus-visible .mega-insight__lift::after,
    .mega-insight.is-current .mega-insight__lift::after {
      border-color: #2070b6;
      background-color: rgba(32, 112, 182, 0.06);
    }
    .mega-insight__img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 8px;
      -webkit-transition: filter 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: filter 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .mega-insight:hover .mega-insight__img,
    .mega-insight:focus-visible .mega-insight__img,
    .mega-insight.is-current .mega-insight__img {
      filter: brightness(1.05);
    }
    /*
      이미지 하단에 타이틀 오버레이 (구 이미지에 있던 텍스트를 텍스트로 살림)
      - 230×230 카드 크기는 유지
      - 어두운 그라디언트 스크림으로 어떤 이미지 위에서도 가독성 확보
    */
    .mega-insight__title {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      display: block;
      box-sizing: border-box;
      padding: 36px 16px 16px;
      color: #fff;
      /* 데스크톱 기준 20px, 좁아지면 최소 16px 까지 축소 */
      font-weight: 400;
      line-height: 1.35;
      letter-spacing: -0.01em;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 55%,
        rgba(0, 0, 0, 0) 100%
      );
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      pointer-events: none;
    }
    /* 좁은 뷰포트에서 카드가 넓어질 때 (2열/1열) 최대 20px 유지 */
    @media (max-width: 1100px) {
      .mega-insight__title {
        font-size: 20px;
        padding: 40px 18px 18px;
      }
    }
    @media (max-width: 720px) {
      .mega-insight__title {
        font-size: 18px;
        padding: 32px 16px 14px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .mega-insight__lift,
      .mega-insight__lift::after,
      .mega-insight__img {
        transition: none;
        -webkit-transition: none;
      }
      .mega-insight:hover .mega-insight__lift,
      .mega-insight:focus-visible .mega-insight__lift {
        transform: none;
      }
    }
    /* Support mega: 제품정보/회사소개와 동일 가로 1040 (357 + 348 + 335), 3열 형태는 Figma 유지 */
    .mega--support .mega__inner.container,
    .mega--support .mega__inner {
      width: 1040px;
      max-width: 1040px;
      height: 560px;
      padding-left: 0;
      padding-right: 0;
      display: grid;
      grid-template-columns: 357px 348px 335px;
      align-items: stretch;
      box-shadow: 0 18px 40px rgba(16, 24, 31, 0.12);
    }
    .mega--support .mega__col--support-nav {
      width: 357px;
      height: 560px;
      padding: 32px 25px 16px 32px;
      border-right: 1px solid #c8ced3;
      background: #f2f4f5;
    }
    .mega--support .mega__list {
      width: 300px;
    }
    .mega--support .mega__item {
      width: 300px;
    }
    .mega--support .mega__col--support-mid {
      display: flex;
      flex-direction: column;
      align-items: stretch; /* .mega__col 의 flex-start 덮어씀 → 고객센터 풀폭 */
      box-sizing: border-box;
      width: 348px;
      height: 560px;
      padding: 32px 24px;
      background: #f2f4f5;
    }
    .mega-support__intro {
      margin: 0 0 16px;
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
      color: #131313;
    }
    .mega-support__catalogs {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }
    .mega-support__catalog {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 124px;
      text-decoration: none;
      color: inherit;
    }
    .mega-support__catalog-thumb {
      display: block;
      box-sizing: border-box;
      width: 124px;
      height: 176px;
      border: 1px solid #e1e7eb;
      background: #fff;
      overflow: hidden;
      transition:
        border-color 0.35s ease,
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .mega-support__catalog:hover .mega-support__catalog-thumb {
      border-color: #c8ced3;
      box-shadow: 0 6px 16px rgba(16, 24, 31, 0.08);
    }
    .mega-support__catalog-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* transform/scale 애니메이션과 겹치면 떨림 — filter만 사용 */
      backface-visibility: hidden;
      transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .mega-support__catalog:hover .mega-support__catalog-thumb img {
      filter: brightness(1.03);
    }
    .mega-support__catalog-label {
      font-size: 14px;
      font-weight: 500;
      line-height: normal;
      color: #5e5e5e;
      transition: color 0.3s ease;
    }
    .mega-support__catalog:hover .mega-support__catalog-label {
      color: #154670;
    }
    .mega-support__contact-wrap {
      width: 100%;
      margin-top: auto;
      padding-top: 32px;
      border-top: 1px solid #c8ced3;
    }
    .mega-support__contact {
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      padding: 32px 16px;
      border: 1px solid #e1e7eb;
      border-radius: 8px;
      background: #fff;
    }
    .mega-support__contact-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
      color: #131313;
    }
    .mega-support__contact-icon {
      display: block;
      width: 19px;
      height: 19px;
      flex-shrink: 0;
    }
    .mega-support__contact-body {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #5e5e5e;
    }
    .mega-support__contact-body p {
      margin: 0;
    }
    .mega--support .mega__feature--support {
      width: 100%;
      justify-content: space-between;
    }
    .mega--support .mega__feature-bg {
      backface-visibility: hidden;
      transform: translateZ(0);
    }
    /* Figma 2066:1012 — Space Grotesk / 28·20 / gap 40 / letter-spacing -1 */
    .mega--support .mega__feature-title {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: -1px;
      color: #e1e7eb;
    }
    .mega--support .mega__feature-sub {
      font-family: var(--font-display);
      margin-top: 40px;
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: -1px;
      color: #e1e7eb;
    }
    /* Figma 2066:1096 — 회사소개 고정 배너 (DICKSON) */
    .mega--about .mega__feature--about {
      justify-content: space-between;
    }
    .mega--about .mega__feature-title {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: -1px;
      color: #e1e7eb;
    }
    .mega--about .mega__feature-sub {
      font-family: var(--font-display);
      margin-top: 40px;
      font-size: 20px;
      font-weight: 500;
      line-height: 33px;
      letter-spacing: -1px;
      color: #e1e7eb;
    }
    .mega__col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      box-sizing: border-box;
      min-width: 0;
      height: 560px;
      background: #f2f4f5;
    }
    .mega__col--product {
      width: 357px;
      padding: 32px 25px 16px 32px;
      border-right: 1px solid #c8ced3;
      background: #f2f4f5;
    }
    .mega--products .mega__col--product {
      width: 357px;
      padding: 32px 25px 16px 32px;
    }
    .mega__col--sub {
      width: 348px;
      padding: 32px 24px 16px;
      background: #fff;
    }
    .mega--products .mega__col--product-mid {
      display: flex;
      flex-direction: column;
      width: 348px;
      padding: 32px 24px 16px;
      /* Figma 2066:882 — 하위 카테고리 2열도 회색 바탕 + 흰 리스트 카드 */
      background: #f2f4f5;
    }
    .mega--products .mega__col--product-mid .mega__heading {
      font-family: var(--font-en);
      color: #154670;
      font-size: 18px;
      font-weight: 500;
      line-height: 28px;
    }
    .mega--products .mega__col--product-mid .mega__list {
      padding-top: 16px;
      gap: 10px;
    }
    .mega-product__highlights {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mega-product__highlights a {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 43px;
      padding: 0 17px;
      border: 1px solid #e1e7eb;
      border-radius: 4px;
      background: #fff;
      color: #5e5e5e;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
      text-decoration: none;
      transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
    }
    .mega-product__highlights a:hover {
      background: #f7fbff;
      border-color: #2070b6;
      color: #154670;
    }
    .mega--about .mega__col--about-mid {
      display: flex;
      flex-direction: column;
      /* Figma 2066:1056 — 2열은 회색 바탕 + 흰 리스트 카드 */
      background: #f2f4f5;
    }
    .mega--about .mega__col--about-mid .mega__panel[data-panel="overview"] {
      width: 100%;
    }
    .mega--about .mega__col--about-mid .mega__panel[data-panel="overview"] .mega__heading {
      color: #154670;
      font-size: 18px;
      font-weight: 500;
      line-height: 28px;
    }
    .mega--about .mega__col--about-mid .mega__panel[data-panel="overview"] .mega__list {
      padding-top: 16px;
      gap: 10px;
    }
    .mega-about__office {
      margin-top: auto;
      padding-top: 24px;
      border-top: 1px solid #c8ced3;
    }
    .mega-about__office-title {
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #131313;
    }
    .mega-about__office-addr,
    .mega-about__office-tel {
      margin: 0;
      font-size: 13px;
      font-weight: 400;
      line-height: 20px;
      color: #5e5e5e;
    }
    .mega-about__office-tel {
      margin-top: 8px;
    }
    .mega__heading {
      margin: 0;
      font-family: var(--font-en);
      font-size: 18px;
      font-weight: 500;
      line-height: 28px;
      color: #154670;
      white-space: nowrap;
    }
    .mega__list {
      list-style: none;
      margin: 0;
      padding: 16px 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 300px;
    }
    .mega__item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-sizing: border-box;
      width: 300px;
      height: 43px;
      padding: 0 17px;
      border: 1px solid #e1e7eb;
      border-radius: 4px;
      background: #fff;
      color: #5e5e5e;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
      text-align: left;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
    }
    .mega__item span:not(.mega__icon) {
      min-width: 0;
    }
    .mega__chevron {
      width: 12px;
      height: 12px;
      display: block;
      flex-shrink: 0;
    }
    .mega__chevron--on { display: none; }
    .mega__icon {
      position: relative;
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      color: #959da4;
      transition: color 0.18s ease, transform 0.22s ease;
    }
    .mega__item.is-active,
    .mega__item.is-current,
    .mega__item:hover {
      background: #f7fbff;
      border-color: #2070b6;
      color: #154670;
    }
    .mega__item.is-active .mega__chevron--on,
    .mega__item.is-current .mega__chevron--on,
    .mega__item:hover .mega__chevron--on {
      display: block;
    }
    .mega__item.is-active .mega__chevron--off,
    .mega__item.is-current .mega__chevron--off,
    .mega__item:hover .mega__chevron--off {
      display: none;
    }
    .mega__item.is-active .mega__icon,
    .mega__item.is-current .mega__icon,
    .mega__item:hover .mega__icon {
      color: #2070b6;
    }
    /* 하위 패널 펼침: + 아이콘 */
    .mega__icon--expand::before,
    .mega__icon--expand::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: currentColor;
      border-radius: 1px;
      transform: translate(-50%, -50%);
    }
    .mega__icon--expand::before {
      width: 10px;
      height: 1.5px;
    }
    .mega__icon--expand::after {
      width: 1.5px;
      height: 10px;
    }
    .mega__item.is-active .mega__icon--expand,
    .mega__item.is-current .mega__icon--expand {
      transform: rotate(90deg);
    }
    .mega__panel {
      width: 100%;
    }
    .mega__panel[hidden] {
      display: none !important;
    }
    .mega__feature-stack {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 560px;
      overflow: hidden;
      border-radius: 0 8px 8px 0;
    }
    .mega__feature-stack .mega__feature {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      /* visibility는 부모 .mega에만 맡김 — 자식 visible이 닫힌 메가 히트를 뚫지 않도록 */
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 0;
    }
    .mega__feature-stack .mega__feature.is-active {
      opacity: 1;
      z-index: 1;
    }
    .menu__item.is-open .mega__feature-stack .mega__feature.is-active {
      pointer-events: auto;
    }
    .menu__item.is-open .mega__feature-stack .mega__feature--video.is-active,
    .mega__feature-stack .mega__feature--video,
    .mega__feature-stack .mega__feature--video.is-active {
      padding: 0;
      background: #0b1c2a;
      pointer-events: none;
    }
    .mega__feature-video {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 0 8px 8px 0;
      container-type: size;
      isolation: isolate;
      contain: paint;
      pointer-events: none;
      background: #0b1c2a;
    }
    .mega__feature-video-poster {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: opacity 0.35s ease;
    }
    .mega__feature-video.is-playing .mega__feature-video-poster {
      opacity: 0;
    }
    .mega__feature-video iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      border: 0;
      transform: translate(-50%, -50%);
      /* 가로(16:9) 영상을 세로 패널에 cover처럼 꽉 채움 */
      width: max(100cqw, calc(100cqh * 16 / 9));
      height: max(100cqh, calc(100cqw * 9 / 16));
      pointer-events: none;
    }
    .mega__feature-video-file,
    video.mega__feature-video-file {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
    }
    .mega__feature {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      height: 560px;
      margin: 0;
      padding: 40px;
      overflow: hidden;
      border-radius: 0 8px 8px 0;
      background: #154670;
      text-decoration: none;
      color: #e1e7eb;
    }
    .mega__feature[data-tone="navy"] { background: #154670; }
    .mega__feature[data-tone="sky"] { background: #1a6fa8; }
    .mega__feature[data-tone="teal"] { background: #0f6e6a; }
    .mega__feature[data-tone="slate"] { background: #2f4558; }
    .mega__feature[data-tone="indigo"] { background: #2a4a7a; }
    .mega__feature[data-tone="ocean"] { background: #0d4f6b; }
    .mega__feature-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      border-radius: 0 8px 8px 0;
      transition:
        filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
    }
    .mega__feature[data-tone="sky"] .mega__feature-bg {
      filter: hue-rotate(-12deg) saturate(1.15) brightness(1.05);
    }
    .mega__feature[data-tone="teal"] .mega__feature-bg {
      filter: hue-rotate(95deg) saturate(1.05) brightness(0.95);
    }
    .mega__feature[data-tone="slate"] .mega__feature-bg {
      filter: grayscale(0.25) brightness(0.9) contrast(1.05);
    }
    .mega__feature[data-tone="indigo"] .mega__feature-bg {
      filter: hue-rotate(210deg) saturate(1.2) brightness(0.92);
    }
    .mega__feature[data-tone="ocean"] .mega__feature-bg {
      filter: hue-rotate(160deg) saturate(1.1) brightness(0.9);
    }
    .mega__feature:hover .mega__feature-bg {
      filter: brightness(1.08);
    }
    .mega__feature[data-tone="sky"]:hover .mega__feature-bg {
      filter: hue-rotate(-12deg) saturate(1.15) brightness(1.12);
    }
    .mega__feature[data-tone="teal"]:hover .mega__feature-bg {
      filter: hue-rotate(95deg) saturate(1.05) brightness(1.05);
    }
    .mega__feature[data-tone="slate"]:hover .mega__feature-bg {
      filter: grayscale(0.15) brightness(1) contrast(1.05);
    }
    .mega__feature[data-tone="indigo"]:hover .mega__feature-bg {
      filter: hue-rotate(210deg) saturate(1.2) brightness(1.02);
    }
    .mega__feature[data-tone="ocean"]:hover .mega__feature-bg {
      filter: hue-rotate(160deg) saturate(1.1) brightness(1);
    }
    .mega__feature-copy,
    .mega__feature-btn {
      font-family: var(--font-en);
      position: relative;
      z-index: 1;
    }
    .mega__feature-copy {
      width: 253px;
      text-align: center;
    }
    .mega__feature-title {
      margin: 0;
      font-family: var(--font-en);
      font-size: 28px;
      line-height: 32px;
      font-weight: 600;
      letter-spacing: -1px;
      text-align: center;
      color: #e1e7eb;
    }
    .mega__feature-sub {
      margin: 24px 0 0;
      font-size: 20px;
      line-height: 33px;
      text-align: center;
      color: #e1e7eb;
    }
    .mega__feature-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 109px;
      height: 39px;
      padding: 8px 16px;
      border-radius: 4px;
      background: #f7fbff;
      color: #131313;
      font-size: 14px;
      font-weight: 700;
      line-height: 21px;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .mega__feature:hover .mega__feature-btn {
      background: #fff;
      color: #154670;
    }

    .tools {
      display: flex;
      align-items: center;
      gap: 18px;
      white-space: nowrap;
    }
    .gnb-wrap.is-solid .service-links a {
      color: #394147;
    }
    .gnb-wrap.is-solid .service-links .divider {
      color: #c8ced3;
    }

    /*
      Figma 2035:907 (default, GNB 투명 헤더) / 2035:976 (solid, 흰 배경 헤더)
      스펙:
        - 아우터 pill: max-w-186 / pl-17 pr-3 py-3 / gap-10 / rounded-full
        - 내부 정렬은 flex-start(gap 로 간격 확보). 폭은 콘텐츠 기반, 최대 186px.
        - 기본: 투명 배경 + 흰 보더 + 흰 텍스트 + 흰 아이콘
        - is-solid: 흰 배경 + #008cff 보더 + #5e5e5e 텍스트 + #008cff 아이콘
      아이콘은 원본 SVG(<img>)를 그대로 사용하고, 색 전환은 CSS filter 로 처리.
    */
    .search {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      max-width: 186px;
      border: 1px solid #fff;
      background: transparent;
      color: #fff;
      border-radius: 9999px;
      box-shadow: 0 2px 10px rgba(0, 38, 62, 0.08);
      padding: 3px 3px 3px 17px;
      font: inherit;
      text-align: left;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      transition:
        background-color var(--gnb-bg-duration, 0.28s) var(--gnb-ease, ease),
        border-color var(--gnb-bg-duration, 0.28s) var(--gnb-ease, ease),
        color var(--gnb-fg-duration, 0.2s) var(--gnb-ease, ease),
        box-shadow 0.3s ease;
    }
    .search--trigger:hover,
    .search--trigger:focus-visible {
      box-shadow: 0 4px 14px rgba(0, 38, 62, 0.14);
      outline: none;
    }
    .gnb-wrap.is-solid .search {
      background: #fff;
      border-color: var(--search-border, #008cff);
      color: var(--search-border, #008cff);
      box-shadow: 0 2px 5px rgba(0, 38, 62, 0.08);
    }
    .search__placeholder {
      flex: 0 0 auto;
      min-width: 0;
      font-size: 13px;
      line-height: 13px;
      color: inherit;
      white-space: nowrap;
      font-family: var(--font-en);
    }
    .gnb-wrap.is-solid .search__placeholder {
      color: var(--muted);
    }
    .search__submit,
    .search button {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      cursor: pointer;
      padding: 8px 20px;
      border-radius: 9999px;
      background: transparent;
      color: inherit;
    }
    /* 전체 검색 오버레이 안 제출 버튼은 종전 그대로 그라디언트 */
    .search-overlay__submit {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      cursor: pointer;
      padding: 8px 20px;
      border-radius: 9999px;
      background: linear-gradient(150.25deg, var(--primary) 0%, var(--primary-deep) 100%);
    }
    .search__icon {
      position: relative;
      width: 16px;
      height: 16px;
      display: block;
    }
    .search__icon-lens {
      position: absolute;
      inset: 0 21.05% 21.05% 0;
      width: auto;
      height: auto;
      max-width: none;
      display: block;
    }
    .search__icon-handle {
      position: absolute;
      inset: 68.42% -10.53% 0 78.95%;
      width: auto;
      height: auto;
      max-width: none;
      display: block;
    }
    /* is-solid: SVG stroke="white" → #008cff (색상 계산: color-matrix 근사) */
    .gnb-wrap.is-solid .search__icon-lens,
    .gnb-wrap.is-solid .search__icon-handle {
      filter: brightness(0) saturate(100%) invert(41%) sepia(85%) saturate(3400%) hue-rotate(199deg) brightness(101%) contrast(101%);
    }

    /* 전체 검색 오버레이 */
    .search-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 12vh 24px 40px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .search-overlay.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .search-overlay__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(9, 31, 44, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .search-overlay__panel {
      position: relative;
      z-index: 1;
      width: min(760px, 100%);
      transform: translate3d(0, -18px, 0) scale(0.92);
      opacity: 0;
      transform-origin: top center;
      transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .search-overlay.is-open .search-overlay__panel {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 1;
    }
    .search-overlay__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }
    .search-overlay__title {
      margin: 0;
      font-size: clamp(22px, 2.4vw, 28px);
      font-weight: 600;
      line-height: 1.3;
      color: #fff;
      letter-spacing: -0.02em;
    }
    .search-overlay__close {
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
      transition: background-color 0.2s ease;
    }
    .search-overlay__close:hover {
      background: rgba(255, 255, 255, 0.22);
    }
    .search-overlay__close span {
      position: absolute;
      inset: 0;
    }
    .search-overlay__close span::before,
    .search-overlay__close span::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 1.5px;
      background: #fff;
      border-radius: 1px;
    }
    .search-overlay__close span::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .search-overlay__close span::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    .search-overlay__field {
      position: relative;
      width: 100%;
    }
    .search-overlay__form {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 72px;
      padding: 8px 8px 8px 28px;
      border-radius: 9999px;
      background: #fff;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
      transform: scaleX(0.42);
      transform-origin: center center;
      transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .search-overlay.is-open .search-overlay__form {
      transform: scaleX(1);
    }
    .search-overlay__ac {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + max(0.5rem, var(--vw-10, 0.52vw)));
      z-index: 2;
      max-height: min(360px, 42vh);
      overflow-y: auto;
      margin: 0;
      padding: max(0.5rem, var(--vw-8, 0.42vw)) 0;
      border-radius: max(1rem, var(--vw-16, 0.83vw));
      background: #fff;
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
    }
    .search-overlay__ac[hidden] {
      display: none;
    }
    .search-overlay__ac-item {
      display: flex;
      align-items: center;
      gap: max(0.75rem, var(--vw-14, 0.73vw));
      width: 100%;
      padding: max(0.625rem, var(--vw-10, 0.52vw)) max(1.25rem, var(--vw-24, 1.25vw));
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
      color: #131313;
      text-decoration: none;
      transition: background-color 0.15s ease;
    }
    .search-overlay__ac-item:hover,
    .search-overlay__ac-item.is-active {
      background: rgba(0, 112, 243, 0.08);
    }
    .search-overlay__ac-thumb {
      flex-shrink: 0;
      width: max(2.75rem, var(--vw-48, 2.5vw));
      height: max(2.75rem, var(--vw-48, 2.5vw));
      border-radius: 8px;
      overflow: hidden;
      background: #f2f4f6;
    }
    .search-overlay__ac-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .search-overlay__ac-meta {
      min-width: 0;
      flex: 1;
    }
    .search-overlay__ac-name {
      display: block;
      font-size: clamp(0.9375rem, var(--font-16, 1rem), 1.0625rem);
      font-weight: 500;
      line-height: 1.35;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .search-overlay__ac-type {
      display: block;
      margin-top: 2px;
      font-size: 12px;
      font-weight: 400;
      color: #7a848d;
    }
    .search-overlay__field.is-ac-open .search-overlay__form {
      border-radius: 28px;
    }
    .search-overlay__input {
      font-family: var(--font-en);
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: clamp(18px, 2vw, 22px);
      font-weight: 500;
      line-height: 1.3;
      color: #131313;
      padding: 0;
    }
    .search-overlay__input::placeholder {
      color: #959da4;
      font-weight: 400;
    }
    .search-overlay__submit {
      width: 56px;
      height: 56px;
      padding: 0;
    }
    .search-overlay__suggest {
      margin-top: 28px;
      opacity: 0;
      transform: translate3d(0, 12px, 0);
      transition:
        opacity 0.35s ease 0.12s,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
    }
    .search-overlay.is-open .search-overlay__suggest {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    .search-overlay__suggest-label {
      margin: 0 0 14px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.72);
    }
    .search-overlay__chips {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .search-overlay__chip {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: 0 16px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
    }
    .search-overlay__chip:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-1px);
    }
    body.is-search-open {
      overflow: hidden;
    }
    @media (prefers-reduced-motion: reduce) {
      .search-overlay,
      .search-overlay__panel,
      .search-overlay__form,
      .search-overlay__suggest {
        transition: none;
      }
    }
    @media (max-width: 720px) {
      .search-overlay {
        padding: 80px 16px 32px;
      }
      .search-overlay__form {
        min-height: 60px;
        padding: 6px 6px 6px 18px;
        transform: scaleX(0.55);
      }
      .search-overlay__submit {
        width: 48px;
        height: 48px;
      }
      .search-overlay__input {
        font-size: 16px;
      }
    }

    .service-links {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }
    .service-links a {
      color: #fff;
      text-decoration: none;
      opacity: 0.95;
      transition: color var(--gnb-fg-duration) var(--gnb-ease);
    }
    .divider {
      font-size: 13px;
      opacity: 0.8;
      color: rgba(255, 255, 255, 0.8);
      transition: color var(--gnb-fg-duration) var(--gnb-ease);
    }

    .mall-btn {
      border: 0;
      border-radius: 100px;
      color: #fff;
      background: var(--primary);
      padding: 10px 30px 12px;
      font-size: 14px;
      line-height: 1;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition:
        background-color var(--gnb-fg-duration) var(--gnb-ease),
        color var(--gnb-fg-duration) var(--gnb-ease);
    }

    .hero {
      position: relative;
      min-height: 650px;
      height: 650px;
      color: #fff;
      background: #091f2c;
      overflow: hidden;
      isolation: isolate;
    }
    .hero-swiper {
      width: 100%;
      height: 100%;
      min-height: 650px;
    }
    .hero-swiper .swiper-slide {
      position: relative;
      min-height: 650px;
      height: 650px;
      overflow: hidden;
    }
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero__bg picture,
    .hero__bg picture img {
      width: 100%;
      height: 100%;
      display: block;
    }
    .hero__bg-media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0;
      pointer-events: none;
    }
    .hero__bg-media--youtube {
      overflow: hidden;
    }
    .hero__bg-media--youtube iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 177.77777778vh;
      min-width: 100%;
      min-height: 56.25vw;
      height: 100%;
      transform: translate(-50%, -50%);
      border: 0;
      pointer-events: none;
    }
    .hero__bg-media--video {
      background: #091f2c;
    }
    .hero__content--align-left {
      text-align: left;
    }
    .hero__content--align-center {
      text-align: center;
    }
    .hero__content--align-center .hero__actions {
      justify-content: center;
    }
    .hero__content--align-right {
      text-align: right;
    }
    .hero__content--align-right .hero__actions {
      justify-content: flex-end;
    }
    .hero__content--text-dark {
      color: #154670;
    }
    .hero__content--text-dark .hero__subtitle,
    .hero__content--text-dark .hero__body {
      color: #2a4a66;
    }
    .hero__content--text-custom .hero__subtitle,
    .hero__content--text-custom .hero__body {
      color: inherit;
      opacity: 0.88;
    }
    .hero__body {
      margin: 0 0 max(1.875rem, var(--vw-30));
      font-size: max(1rem, var(--font-16));
      line-height: 1.65;
      font-weight: 300;
    }
    .hero__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, rgba(10, 32, 47, 0.38) 0%, rgba(10, 32, 47, 0.12) 42%, rgba(10, 32, 47, 0) 72%);
      pointer-events: none;
    }
    .hero__overlay--deep {
      background: linear-gradient(90deg, rgba(8, 24, 40, 0.55) 0%, rgba(11, 43, 70, 0.28) 48%, rgba(0, 80, 140, 0.08) 100%);
    }
    .hero__content {
      position: relative;
      z-index: 2;
      /* Figma 11825:734 @1440 — GNB 80 + gap 120 = 200 top / bottom ~120 (높이 650 고정) */
      padding: 12.5rem 0 7.5rem; /* 200 / 120 */
    }
    .hero__title {
      margin: 0 0 max(0.625rem, var(--vw-10)); /* title ↔ subtitle 10 */
      font-size: clamp(1.875rem, 2.5vw, var(--font-36)); /* 36 @1440 */
      line-height: 1.3889; /* 50 / 36 */
      letter-spacing: -0.09375rem; /* -1.5px */
      font-weight: 400;
    }
    .hero__subtitle {
      margin: 0 0 max(2.5rem, var(--vw-40)); /* text group ↔ buttons 40 */
      font-family: var(--font-en);
      font-size: max(1.25rem, var(--font-20)); /* 20 */
      line-height: 1.6; /* 32 / 20 */
      color: #fafaf7;
      font-weight: 300;
    }
    .hero__actions {
      display: flex;
      gap: max(1.25rem, var(--vw-20)); /* 20 */
      flex-wrap: wrap;
    }
    .hero__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: max(0.625rem, var(--vw-10)); /* 10 — Figma Button/Round gap */
      height: max(3rem, var(--vw-48)); /* 48 @1920 */
      padding: 0 max(1.75rem, var(--vw-28)); /* 28 horizontal */
      border-radius: max(0.5rem, var(--vw-8)); /* 8 */
      text-decoration: none;
      font-size: max(1rem, var(--font-16));
      line-height: 1;
      font-weight: 500;
      white-space: nowrap;
    }
    .hero__btn--light {
      background: #fff;
      color: #154670;
    }
    .hero__btn--dark {
      background: #154670;
      color: #fff;
    }
    .hero__btn-icon {
      flex-shrink: 0;
      width: max(0.5rem, var(--vw-8)); /* 8 */
      height: max(0.8125rem, var(--vw-13)); /* 13.333 @1920 */
      display: block;
    }
    .hero__nav {
      position: absolute;
      top: 50%;
      z-index: 6;
      transform: translateY(-50%);
      width: 56px;
      height: 56px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .hero__nav img {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.28));
    }
    .hero__nav:hover {
      opacity: 0.85;
      transform: translateY(-50%) scale(1.04);
    }
    .hero__nav:focus-visible {
      outline: 2px solid #008cff;
      outline-offset: 3px;
      border-radius: 50%;
    }
    .hero__nav--prev {
      left: 24px;
    }
    .hero__nav--next {
      right: 24px;
    }
    .hero-swiper .hero__pagination.swiper-pagination {
      position: absolute;
      left: 50% !important;
      right: auto;
      bottom: 52px !important;
      z-index: 6;
      width: auto !important;
      transform: translateX(-50%) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .hero-swiper .hero__pagination .swiper-pagination-bullet {
      width: 9px;
      height: 9px;
      margin: 0 !important;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.45);
      opacity: 1;
      transition: width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
    }
    .hero-swiper .hero__pagination .swiper-pagination-bullet-active {
      width: 28px;
      height: 8px;
      border-radius: 4px;
      background: #fff;
    }

    .island {
      background: #f2f4f5;
      padding: 16px 0;
    }
    .island__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .island__left {
      display: flex;
      align-items: center;
      gap: 30px;
      min-width: 0;
    }
    .island__icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }
    .island__title {
      margin: 0;
      color: #154670;
      font-size: 16px;
      line-height: 26px;
      font-weight: 700;
    }
    .island__desc {
      margin: 0;
      color: #5e5e5e;
      font-size: 14px;
      line-height: 22px;
      font-weight: 400;
    }
    .island__more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #154670;
      font-size: 14px;
      line-height: 26px;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .island__more-icon,
    .news-card__more-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 6px;
      height: 10px;
      flex-shrink: 0;
    }
    .island__more-icon img,
    .news-card__more-icon img {
      width: 10px;
      height: 6px;
      display: block;
      transform: rotate(-90deg);
    }

    .insight {
      background: #fff;
      padding: 100px 0;
    }
    .insight__inner {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }
    .insight__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      border: 1px solid #e1e7eb;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #252a2e;
      width: fit-content;
    }
    .insight__eyebrow-icon {
      width: 12px;
      height: 12px;
      display: block;
    }
    .insight__head {
      display: flex;
      flex-direction: column;
      gap: 60px;
    }
    .insight__intro {
      position: relative;
    }
    .insight__title {
      margin: 0 0 10px;
      font-size: clamp(28px, 2.8vw, 39px);
      line-height: 1.2;
      font-weight: 700;
      color: #131313;
    }
    .insight__desc {
      margin: 0;
      font-size: 16px;
      line-height: 1.4;
      color: #394147;
    }
    .insight__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 40px;
    }
    .insight-card {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      min-width: 0;
    }
    .insight-card__thumb {
      width: 100%;
      height: 250px;
      object-fit: cover;
      border-radius: 8px 8px 0 0;
      display: block;
    }
    .insight-card__body {
      background: #f2f4f5;
      border-radius: 0 0 8px 8px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 32px 16px;
      min-height: 234px;
    }
    .insight-card__head {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .insight-card__icon {
      width: 20px;
      height: 18px;
      display: block;
      flex-shrink: 0;
    }
    .insight-card__name {
      margin: 0;
      font-size: 18px;
      line-height: 1.2;
      font-weight: 700;
      color: #154670;
    }
    .insight-card__text {
      margin: 0;
      font-size: 16px;
      line-height: 26px;
      color: #131313;
    }
    .insight-card__more {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #394147;
      font-size: 14px;
      line-height: 26px;
      transition: color 0.2s ease;
    }
    .insight-card:hover .insight-card__more {
      color: #154670;
    }

    .products {
      background: #f2f4f5;
      padding: 100px 0;
    }
    .products__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }
    .products__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      border: 1px solid #e1e7eb;
      border-radius: 8px;
      background: #fff;
      font-size: 14px;
      font-weight: 500;
      color: #252a2e;
    }
    .products__eyebrow-icon {
      width: 12px;
      height: 12px;
      display: block;
    }
    .products__head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 60px;
      width: 100%;
    }
    .products__intro {
      text-align: center;
    }
    .products__title {
      margin: 0 0 10px;
      font-size: clamp(28px, 2.8vw, 39px);
      line-height: 1.2;
      font-weight: 700;
      color: #131313;
    }
    .products__desc {
      margin: 0;
      font-size: 16px;
      line-height: 1.4;
      color: #394147;
    }
    
    .products__tabs {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0;
      padding: 4px;
      border-radius: 9999px;
      background: linear-gradient(180deg, #056bbe 0%, #0F5694 100%);
    }
    .products__tab {
      font-family: var(--font-en);
      border: 0;
      background: transparent;
      color: #e1e7eb;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      padding: 12px 20px;
      border-radius: 500px;
      cursor: pointer;
      white-space: nowrap;
      transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    }
    .products__tab:hover,
    .products__tab:focus-visible {
      color: #fff;
      outline: none;
    }
    .products__tab.is-active,
    .products__tab.is-active:hover,
    .products__tab.is-active:focus-visible {
      background: #fff;
      color: #154670;
      box-shadow: 0 4px 3px rgba(0, 0, 0, 0.1);
    }
    .products-swiper {
      width: 100%;
      overflow: hidden;
    }
    .products-swiper .swiper-slide {
      height: auto;
    }
    .products__stage {
      position: relative;
      width: 100%;
      min-height: 420px;
    }
    .products__stage-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 60px;
      width: 100%;
      transition: opacity 0.22s ease, transform 0.22s ease;
      opacity: 1;
      transform: translateY(0);
    }
    .products__stage-body.is-fading-out {
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
    }
    .products__stage-body.is-fading-in {
      opacity: 0;
      transform: translateY(8px);
    }
    .products__stage-body.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .products__loading {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: rgba(242, 244, 245, 0.72);
      backdrop-filter: blur(1px);
      color: #154670;
      font-size: 14px;
      line-height: 1.4;
    }
    .products__stage.is-loading .products__loading {
      display: flex;
    }
    .products__spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(21, 70, 112, 0.18);
      border-top-color: #008cff;
      border-radius: 50%;
      animation: products-spin 0.75s linear infinite;
    }
    @keyframes products-spin {
      to { transform: rotate(360deg); }
    }
    .products__tabs.is-busy .products__tab {
      pointer-events: none;
    }
    .product-card {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      height: 100%;
      min-width: 0;
    }
    .product-card__thumb-wrap {
      background: #fff;
      border: 1px solid #e1e7eb;
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      overflow: hidden;
      aspect-ratio: 1 / 1;
    }
    .product-card__thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .product-card__body {
      background: #e1e7eb;
      border-radius: 0 0 8px 8px;
      padding: 32px 16px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .product-card__brand {
      height: 20px;
      width: 83px;
      object-fit: contain;
      display: block;
    }
    .product-card__brand--text {
      width: auto;
      max-width: 100%;
      font-size: 14px;
      font-weight: 700;
      line-height: 20px;
      color: #154670;
      letter-spacing: 0.02em;
    }
    .product-card__name {
      margin: 0;
      font-size: 18px;
      line-height: 26px;
      font-weight: 400;
      color: #131313;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-card__model {
      margin: 0;
      font-size: 14px;
      line-height: 26px;
      color: #131313;
    }
    .products__dots {
      position: static;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: auto;
      height: 9px;
    }
    .products__dots .swiper-pagination-bullet {
      width: 9px;
      height: 9px;
      margin: 0 !important;
      border-radius: 50%;
      background: #e1e7eb;
      opacity: 1;
      transition: width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
    }
    .products__dots .swiper-pagination-bullet-active {
      width: 28px;
      height: 8px;
      border-radius: 4px;
      background: #154670;
    }

    .service {
      background: #020f1a;
      padding: 100px 0;
    }
    .service__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 60px;
    }
    .service__header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      text-align: center;
    }
    .service__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      border: 1px solid #008cff;
      border-radius: 8px;
      background: #fff;
      font-size: 14px;
      font-weight: 500;
      color: #252a2e;
    }
    .service__eyebrow-icon {
      width: 12px;
      height: 12px;
      display: block;
    }
    .service__title {
      margin: 0 0 10px;
      font-size: clamp(28px, 2.8vw, 39px);
      line-height: 1.2;
      font-weight: 700;
      color: #e1e7eb;
    }
    .service__desc {
      margin: 0;
      font-size: 16px;
      line-height: 1.4;
      color: #e1e7eb;
    }
    .service__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px;
      width: 100%;
    }
    .service-card {
      position: relative;
      min-height: 600px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 24px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      isolation: isolate;
    }
    .service-card__bg {
      position: absolute;
      inset: 0;
      z-index: -2;
    }
    .service-card__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1);
      transition: transform 0.7s ease;
      transform-origin: center;
      will-change: transform;
    }
    .service-card:hover .service-card__bg img,
    .service-card:focus-visible .service-card__bg img {
      transform: scale(1.06);
    }
    .service-card__overlay {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, rgba(2, 15, 26, 0.15) 0%, rgba(2, 15, 26, 0.75) 100%);
    }
    .service-card__label {
      position: absolute;
      top: 32px;
      left: 32px;
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #ffb020;
      letter-spacing: 0.02em;
    }
    .service-card__name {
      margin: 0;
      font-size: clamp(24px, 2.2vw, 31px);
      line-height: 1.2;
      font-weight: 700;
      color: #fff;
    }
    .service-card__text {
      margin: 0;
      font-size: 18px;
      line-height: 30px;
      color: #e1e7eb;
    }
    .service-card__more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      line-height: 26px;
      color: #e1e7eb;
    }
    .service-card__more-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 11.6px;
      flex-shrink: 0;
    }
    .service-card__more-icon img {
      width: 11.6px;
      height: 20px;
      display: block;
      transform: rotate(90deg);
    }

    /*
      Figma 11825:896 (글로벌 공식 파트너)
      - 배경: TESSOL BLUE(#154670) 위에 웨이브 + 코너 도트 데코 이미지 오버레이
        이미지 원본 1600×250 (짙은 네이비 톤 포함) → 섹션 전체에 stretch 로 채워
        디자인 의도대로 좌우 코너 데코가 잘리지 않게 함
    */
    .brand {
      position: relative;
      background-color: #154670;
      background-image: url("/assets/images/main/brand-bg.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 100px 0;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }
    .brand__header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      text-align: center;
      margin-bottom: 60px;
    }
    .brand__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      border: 1px solid #008cff;
      border-radius: 8px;
      background: #fff;
      font-size: 14px;
      font-weight: 500;
      color: #252a2e;
    }
    .brand__eyebrow-icon {
      width: 12px;
      height: 12px;
      display: block;
    }
    .brand__title {
      margin: 0 0 10px;
      font-size: clamp(28px, 2.8vw, 39px);
      line-height: 1.2;
      font-weight: 700;
      color: #fff;
    }
    .brand__desc {
      margin: 0;
      font-size: 16px;
      line-height: 1.4;
      color: #e1e7eb;
    }
    .brand-swiper {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    .brand-swiper .swiper-wrapper {
      box-sizing: content-box;
    }
    .brand-swiper .swiper-slide {
      width: 180px;
      height: auto;
      flex-shrink: 0;
    }
    .brand-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: inherit;
    }
    .brand-item__logo {
      width: 180px;
      height: 180px;
      border-radius: 8px;
      background: #fff;
      object-fit: contain;
      display: block;
    }
    .brand-item__logo--text {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px;
      box-sizing: border-box;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
      color: #154670;
      word-break: keep-all;
    }
    .brand-item__name {
      margin: 0;
      font-size: 14px;
      line-height: 26px;
      color: #fff;
      white-space: nowrap;
    }

    .news {
      background: #fff;
      padding: 100px 0;
    }
    .news__inner {
      display: flex;
      flex-direction: column;
      gap: 60px;
    }
    .news__header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 30px;
      max-width: 720px;
    }
    .news__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      border: 1px solid #e1e7eb;
      border-radius: 8px;
      background: #fff;
      font-size: 14px;
      font-weight: 500;
      color: #252a2e;
    }
    .news__eyebrow-icon {
      width: 12px;
      height: 12px;
      display: block;
    }
    .news__title {
      margin: 0 0 10px;
      font-size: clamp(28px, 2.8vw, 39px);
      line-height: 1.2;
      font-weight: 700;
      color: #131313;
    }
    .news__desc {
      margin: 0;
      font-size: 16px;
      line-height: 1.4;
      color: #394147;
    }
    .news__body {
      display: grid;
      grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
      gap: 30px;
      align-items: start;
    }
    .news__cats {
      display: flex;
      flex-direction: column;
    }
    .news__cat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 13px;
      width: 100%;
      padding: 16px 16px 16px 24px;
      border: 0;
      border-left: 2px solid #e1e7eb;
      border-radius: 0;
      background: #fff;
      color: #131313;
      font-family: inherit;
      font-size: 18px;
      line-height: 1.2;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
    }
    .news__cat.is-active {
      background: #eaf1f8;
      border-left-color: #154670;
    }
    .news__cat-icon {
      width: 7px;
      height: 13px;
      display: block;
      flex-shrink: 0;
      object-fit: contain;
    }
    .news__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 30px;
      align-items: stretch;
    }
    .news__stage {
      position: relative;
      width: 100%;
      min-height: 0;
    }
    .news__stage-body {
      width: 100%;
      transition: opacity 0.22s ease, transform 0.22s ease;
      opacity: 1;
      transform: translateY(0);
    }
    .news__stage-body.is-fading-out {
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
    }
    .news__stage-body.is-fading-in {
      opacity: 0;
      transform: translateY(6px);
    }
    .news__stage-body.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .news__loading {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(1px);
      color: #154670;
      font-size: 14px;
      line-height: 1.4;
    }
    .news__stage.is-loading .news__loading {
      display: flex;
    }
    .news__spinner {
      width: 32px;
      height: 32px;
      border: 3px solid rgba(21, 70, 112, 0.18);
      border-top-color: #008cff;
      border-radius: 50%;
      animation: products-spin 0.7s linear infinite;
    }
    .news__cats.is-busy .news__cat {
      pointer-events: none;
    }
    .news-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      text-decoration: none;
      color: inherit;
      min-width: 0;
    }
    .news-card__thumb {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
    }
    .news-card__thumb-empty {
      width: 100%;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e8ecf0;
    }
    .news-card__thumb-empty img {
      width: 148px;
      height: auto;
      display: block;
      object-fit: contain;
      filter: brightness(0) saturate(100%) opacity(0.28);
    }
    /*
      Figma 11825:948 (뉴스/공지사항 카드)
      - 카드 바디 배경: #f2f4f5 (Fog Gray) → 흰 섹션 위에서 카드가 뚜렷하게 구분
      - 카테고리: 배지형에서 "인라인 컬러 볼드 텍스트" 로 변경
        · Noto Sans KR Black 14px, 배경/보더/패딩 없음
        · 뉴스(PRESS)  → #2070B6 (TESSOL BLUE -1/500)
        · 공지(NOTICE) → #27CDAB (TESSOL COOL GREEN -1/600)
        · 이벤트(EVENT) → #008cff (Figma 미제공, 기존 브라이트 블루 유지)
    */
    .news-card__body {
      background: #f2f4f5;
      padding: 32px 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
    }
    .news-card__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .news-card__tag {
      display: inline-flex;
      align-items: center;
      padding: 0;
      border-radius: 0;
      background: transparent;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .news-card__tag--press {
      color: #2070b6;
    }
    .news-card__tag--notice {
      color: #27cdab;
    }
    .news-card__tag--event {
      color: #008cff;
    }
    .news-card__date {
      margin: 0;
      font-size: 14px;
      line-height: 30px;
      color: #394147;
      white-space: nowrap;
    }
    .news-card__title {
      margin: 0;
      font-size: 18px;
      line-height: 30px;
      font-weight: 400;
      color: #131313;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      min-height: calc(2 * 30px);
    }
    .news-card__more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: auto;
      font-size: 14px;
      line-height: 26px;
      color: #394147;
    }

    .site-footer {
      background: #10181f;
      color: #959da4;
    }
    .site-footer a {
      color: inherit;
      text-decoration: none;
    }
    .site-footer__main {
      padding: 100px 0 40px;
    }
    .site-footer__grid {
      display: grid;
      /* 우측 인증 2열(180+30+180)에 맞춤 — 좁히면 인증이 세로로 깨짐 */
      grid-template-columns: minmax(0, 1fr) 390px;
      gap: 40px;
      align-items: start;
    }
    .site-footer__nav-wrap {
      display: flex;
      flex-direction: column;
      gap: 40px;
      min-width: 0;
    }
    /* Figma: gap 40px, 고정 폭 컬럼 + 브랜드(헤더 맞춤) */
    .site-footer__nav {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      gap: 40px;
    }
    .site-footer__nav > div {
      flex: 0 0 auto;
      min-width: 0;
    }
    .site-footer__nav > div:nth-child(1) { width: 230px; } /* 제품정보 */
    .site-footer__nav > div:nth-child(2) { width: 80px; }  /* 브랜드 */
    .site-footer__nav > div:nth-child(3) { width: 162px; } /* 인사이트 */
    .site-footer__nav > div:nth-child(4) { width: 125px; } /* 고객지원 */
    .site-footer__nav > div:nth-child(5) { width: 125px; } /* 회사소개 */
    .site-footer__col-title {
      margin: 0 0 30px;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.2;
      color: #959da4;
      white-space: nowrap;
    }
    .site-footer__links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .site-footer__links a {
      display: block;
      font-size: 14px;
      line-height: 1.2;
      color: #959da4;
      white-space: nowrap;
      transition: color 0.2s ease;
    }
    .site-footer__links a:hover,
    .site-footer__links a:focus-visible {
      color: #e1e7eb;
    }
    .site-footer__cta {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .site-footer__cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px 16px;
      border-radius: 8px;
      background: #394147;
      color: #959da4;
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .site-footer__cta-btn:hover,
    .site-footer__cta-btn:focus-visible {
      background: #4b545b;
      color: #f2f4f5;
      transform: translateY(-1px);
    }
    .site-footer__cta-icon {
      width: 8px;
      height: 13px;
      display: block;
    }
    .site-footer__aside {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: flex-start;
    }
    .site-footer__logo {
      display: block;
      width: 152px;
      height: 30px;
      object-fit: contain;
    }
    .site-footer__social {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      max-width: 248px;
    }
    .site-footer__social-link {
      box-sizing: border-box;
      width: 40px;
      height: 40px;
      border: 1px solid #3f4851;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 8px;
      background: transparent;
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    .site-footer__social-link:hover,
    .site-footer__social-link:focus-visible {
      border-color: #959da4;
      background: #202a33;
    }
    .site-footer__social-link img {display: block; width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
    .site-footer__social-link.instagram img {width: 18px; height: 18px; }
    .site-footer__social-link.blog img {width: 20px; height: 18px; }
    .site-footer__social-link.youtube img {width: 24px; height: 18px; max-height: 24px; }
    .site-footer__contact {
      margin: 0;
      font-size: 16px;
      line-height: 30px;
      color: #959da4;
    }
    .site-footer__certs {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
    }
    .site-footer__cert-label {
      margin: 0 0 10px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #959da4;
    }
    .site-footer__cert-box {
      width: 180px;
      height: 120px;
      border-radius: 8px;
      overflow: hidden;
      background: #232b33;
    }
    .site-footer__cert-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: transparent;
      border: 0;
    }
    .site-footer__legal {
      padding: 30px 0;
    }
    .site-footer__legal-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .site-footer__legal-links {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      align-items: center;
    }
    .site-footer__legal-links a {
      font-size: 14px;
      line-height: 1.2;
      color: #e1e7eb;
      transition: color 0.2s ease;
    }
    .site-footer__legal-links a:hover,
    .site-footer__legal-links a:focus-visible {
      color: #ffffff;
    }
    .site-footer__legal-links a.is-strong {
      color: #fff;
      font-weight: 700;
    }
    .site-footer__family-wrap {
      position: relative;
      flex-shrink: 0;
      margin-left: auto;
    }
    .site-footer__family {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 118px;
      width: 292px;
      max-width: 100%;
      min-height: 42px;
      padding: 8px 10px 8px 20px;
      border: 1px solid #959da4;
      border-radius: 20px;
      background: #10181f;
      color: #c8ced3;
      font-family: inherit;
      font-size: 13px;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
      cursor: pointer;
      box-sizing: border-box;
      transition: border-color 0.2s ease, color 0.2s ease;
    }
    .site-footer__family-label {
      flex: 1 1 auto;
      min-width: 0;
      text-align: left;
    }
    .site-footer__family-icon-wrap {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 26px;
      transition: transform 0.25s ease;
    }
    .site-footer__family:hover,
    .site-footer__family-wrap.is-open .site-footer__family {
      border-color: #c8ced3;
      color: #e1e7eb;
    }
    .site-footer__family-icon {
      display: block;
      width: 32px;
      height: 26px;
      object-fit: contain;
    }
    .site-footer__family-wrap.is-open .site-footer__family-icon-wrap {
      transform: rotate(180deg);
    }
    .site-footer__family-menu {
      position: absolute;
      right: 0;
      bottom: calc(100% + 8px);
      z-index: 30;
      width: 100%;
      min-width: 100%;
      margin: 0;
      padding: 8px 0;
      list-style: none;
      background: #10181f;
      border: 1px solid #959da4;
      border-radius: 16px;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
      overflow: hidden;
    }
    .site-footer__family-wrap.is-open .site-footer__family-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .site-footer__family-menu a {
      display: block;
      padding: 11px 20px;
      color: #c8ced3;
      font-size: 13px;
      line-height: 20px;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color 0.18s ease, color 0.18s ease;
    }
    .site-footer__family-menu a:hover,
    .site-footer__family-menu a:focus-visible {
      background: #232b33;
      color: #fff;
      outline: none;
    }
    .site-footer__copy {
      background: #394147;
      padding: 14.5px 0;
      text-align: center;
    }
    .site-footer__copy-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      line-height: 20px;
      color: #959da4;
    }
    .site-footer__copy p {
      margin: 0;
    }

    @media (max-width: 1200px) {
      .menu { gap: 20px; font-size: 15px; }
      .service-links { display: none; }
      .insight__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .service__grid {
        gap: 24px;
      }
      .service-card {
        min-height: 480px;
      }
      .news__body {
        grid-template-columns: 1fr;
      }
      .news__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      .site-footer__nav {
        flex-wrap: wrap;
        gap: 40px 48px;
      }
      .site-footer__nav > div,
      .site-footer__nav > div:nth-child(n) {
        width: auto;
        min-width: 140px;
      }
    }

    @media (max-width: 960px) {
      .gnb { flex-wrap: wrap; gap: 14px; }
      .menu {
        order: 3;
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .tools { margin-left: auto; }
      .hero {
        min-height: 520px;
        height: auto;
      }
      .hero-swiper,
      .hero-swiper .swiper-slide {
        min-height: 520px;
        height: auto;
      }
      .hero__content {
        padding: 140px 0 80px;
      }
      .hero__nav {
        width: 44px;
        height: 44px;
      }
      .hero__nav--prev {
        left: 12px;
      }
      .hero__nav--next {
        right: 12px;
      }
      .hero-swiper .hero__pagination.swiper-pagination {
        bottom: 36px !important;
      }
      .island__left {
        gap: 16px;
      }
      .island__inner {
        flex-wrap: wrap;
      }
      .insight {
        padding: 60px 0;
      }
      .insight__head {
        gap: 40px;
      }
      .insight__grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .products {
        padding: 60px 0;
      }
      .products__head {
        gap: 40px;
      }
      .products__stage-body {
        gap: 40px;
      }
      .products__tabs {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }
      .service {
        padding: 60px 0;
      }
      .service__inner {
        gap: 40px;
      }
      .service__grid {
        grid-template-columns: 1fr;
      }
      .service-card {
        min-height: 420px;
      }
      .brand {
        padding: 60px 0;
      }
      .brand__header {
        margin-bottom: 40px;
      }
      .brand-swiper .swiper-slide {
        width: 140px;
      }
      .brand-item__logo {
        width: 140px;
        height: 140px;
      }
      .news {
        padding: 60px 0;
      }
      .news__inner {
        gap: 40px;
      }
      .news__grid {
        grid-template-columns: 1fr;
      }
      .news-card__thumb {
        height: 220px;
      }
      .site-footer__main {
        padding: 60px 0 32px;
      }
      .site-footer__nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 28px;
      }
      .site-footer__nav > div,
      .site-footer__nav > div:nth-child(n) {
        width: auto;
        min-width: 0;
      }
      .site-footer__col-title {
        margin-bottom: 16px;
      }
      .site-footer__legal {
        padding: 24px 0;
      }
      .site-footer__legal-links {
        gap: 16px 24px;
      }
      .site-footer__family {
        width: 100%;
        min-width: 0;
        gap: 24px;
      }
      .site-footer__family-wrap {
        width: 100%;
      }
      .site-footer__copy-inner {
        text-align: center;
        word-break: keep-all;
      }
    }

/*
  Insight / Gallery board Hero — Figma 11825:1958
  1440×250 / 배경 1600×250
*/
.page-insight-cases .insight-hero,
.page-gallery .insight-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: #001a3a;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.page-insight-cases .insight-hero__bg,
.page-gallery .insight-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page-insight-cases .insight-hero__bg img,
.page-gallery .insight-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.page-insight-cases .insight-hero__content,
.page-gallery .insight-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(0.5rem, var(--vw-30));
  padding: 0 max(1.25rem, var(--vw-60));
}
.page-insight-cases .insight-hero__title,
.page-gallery .insight-hero__title {
  margin: 0;
  font-size: clamp(1.5rem, var(--font-36), 2.25rem);
  line-height: 1.28;
  font-weight: 700;
  color: #fff;
}
.page-insight-cases .insight-hero__subtitle,
.page-gallery .insight-hero__subtitle {
  margin: 0;
  font-size: max(0.875rem, var(--font-16));
  line-height: 2;
  font-weight: 400;
  color: #fafaf7;
}

@media (max-width: 767px) {
  .page-insight-cases .insight-hero,
  .page-gallery .insight-hero {
    height: 180px;
  }
  .page-insight-cases .insight-hero__content,
  .page-gallery .insight-hero__content {
    gap: 6px;
    padding: 0 20px;
  }
  .page-insight-cases .insight-hero__subtitle,
  .page-gallery .insight-hero__subtitle {
    line-height: 1.5;
  }
  .page-insight-cases .insight-breadcrumb,
  .page-gallery .insight-breadcrumb {
    padding: 12px 0;
  }
  .page-insight-cases .insight-breadcrumb__home-text,
  .page-insight-cases .insight-breadcrumb__text,
  .page-insight-cases .insight-breadcrumb__current,
  .page-gallery .insight-breadcrumb__home-text,
  .page-gallery .insight-breadcrumb__text,
  .page-gallery .insight-breadcrumb__current {
    font-size: 14px;
  }
}

/*
  Insight / Gallery board Breadcrumb — Figma 11825:1973
  풀블리드 Fog Gray + .container 콘텐츠 / 공통 icons
*/
.page-insight-cases .insight-breadcrumb,
.page-gallery .insight-breadcrumb {
  background-color: #f2f4f5;
  padding: 14px 0;
  width: 100%;
}
.page-insight-cases .insight-breadcrumb__list,
.page-gallery .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-insight-cases .insight-breadcrumb__item,
.page-gallery .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-insight-cases .insight-breadcrumb__home,
.page-gallery .insight-breadcrumb__home {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: #154670;
  border-radius: 6px;
}
.page-insight-cases .insight-breadcrumb__home:hover,
.page-gallery .insight-breadcrumb__home:hover {
  text-decoration: underline;
}
.page-insight-cases .insight-breadcrumb__home:focus-visible,
.page-gallery .insight-breadcrumb__home:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.page-insight-cases .insight-breadcrumb__home-icon,
.page-gallery .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
}
.page-insight-cases .insight-breadcrumb__home-text,
.page-gallery .insight-breadcrumb__home-text {
  display: block;
  padding: 6px 2px;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  font-weight: 400;
  color: #154670;
  white-space: nowrap;
}
.page-insight-cases .insight-breadcrumb__sep,
.page-gallery .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 0;
}
.page-insight-cases .insight-breadcrumb__sep img,
.page-gallery .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-insight-cases .insight-breadcrumb__text,
.page-insight-cases .insight-breadcrumb__current,
.page-gallery .insight-breadcrumb__text,
.page-gallery .insight-breadcrumb__current {
  display: block;
  padding: 6px;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  font-weight: 400;
  color: #394147;
  white-space: nowrap;
}
.page-insight-cases .insight-breadcrumb__link,
.page-gallery .insight-breadcrumb__link {
  display: block;
  padding: 6px;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  font-weight: 400;
  color: #154670;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
}
.page-insight-cases .insight-breadcrumb__link:hover,
.page-gallery .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-insight-cases .insight-breadcrumb__link:focus-visible,
.page-gallery .insight-breadcrumb__link:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}

/*
  Gallery board list — Figma WEB-029 (11825:1956)
  툴바 · 카테고리 · 3열 카드 · 페이지네이션
*/
.page-gallery .gallery-board {
  padding-top: max(2.5rem, var(--vw-80));
  padding-bottom: max(7.5rem, var(--vw-200));
  background: #fff;
}
.page-gallery .gallery-board__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: max(0.75rem, var(--vw-16));
  margin-bottom: max(1.25rem, var(--vw-30));
}
.page-gallery .gallery-board__total {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: max(1rem, var(--font-20));
  line-height: 1.5;
  font-weight: 700;
  color: #131313;
}
.page-gallery .gallery-board__total-num {
  color: #3a8ad1;
}
.page-gallery .gallery-board__sort {
  display: flex;
  align-items: center;
  gap: max(1rem, var(--vw-16));
  flex-shrink: 0;
}
.page-gallery .gallery-board__sort-label {
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  font-weight: 700;
  color: #131313;
}
.page-gallery .gallery-board__sort-links {
  display: flex;
  align-items: center;
  gap: max(1rem, var(--vw-16));
}
.page-gallery .gallery-board__sort-link {
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  font-weight: 400;
  color: #5e5e5e;
  text-decoration: none;
}
.page-gallery .gallery-board__sort-link.is-active {
  color: #131313;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-gallery .gallery-board__sort-link:hover {
  color: #131313;
}
.page-gallery .gallery-board__sort-link:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}

.page-gallery .gallery-board__cats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: max(1rem, var(--vw-16));
  margin-bottom: max(2.5rem, var(--vw-50));
}
.page-gallery .gallery-board__cat {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: #5e5e5e;
}
.page-gallery .gallery-board__cat-label {
  font-size: max(1rem, var(--font-20));
  line-height: 1.3;
  font-weight: 400;
  padding-right: 4px;
}
.page-gallery .gallery-board__cat.is-active .gallery-board__cat-label {
  font-weight: 700;
  color: #154670;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.page-gallery .gallery-board__cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  margin-top: -10px;
  border-radius: 100px;
  background: #e1e7eb;
  color: #fff;
  font-family: var(--font-en);
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1;
  font-weight: 400;
}
.page-gallery .gallery-board__cat-badge.is-active {
  background: #ff5a4f;
}
.page-gallery .gallery-board__cat:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}

.page-gallery .gallery-board__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: max(2.5rem, var(--vw-60)) max(1.25rem, var(--vw-30));
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-gallery .gallery-card {
  min-width: 0;
}
.page-gallery .gallery-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #c7c7cc;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-gallery .gallery-card__link:hover {
  border-color: #154670;
  box-shadow: 0 4px 16px rgba(0, 38, 62, 0.08);
}
.page-gallery .gallery-card__link:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.page-gallery .gallery-card__media {
  position: relative;
  aspect-ratio: 420 / 315;
  overflow: hidden;
  background: #e1e7eb;
}
.page-gallery .gallery-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-gallery .gallery-card__body {
  display: flex;
  flex-direction: column;
  gap: max(0.75rem, var(--vw-20));
  flex: 1 1 auto;
  padding: max(1rem, var(--vw-20)) max(0.75rem, var(--vw-16));
  background: #f2f4f5;
}
.page-gallery .gallery-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-gallery .gallery-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.2;
  font-weight: 400;
  color: #394147;
}
.page-gallery .gallery-card__title {
  display: block;
  margin: 0;
  font-size: max(1rem, var(--font-20));
  line-height: 1.35;
  font-weight: 700;
  color: #131313;
  word-break: keep-all;
}
.page-gallery .gallery-card__desc {
  margin: 0;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 26px;
  font-weight: 400;
  color: #131313;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-gallery .gallery-card__date {
  margin-top: auto;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 26px;
  font-weight: 400;
  color: #394147;
}

.page-gallery .gallery-board__empty {
  padding: max(3.125rem, var(--vw-100)) 0;
  text-align: center;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
}

.page-gallery .gallery-board__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: max(3.125rem, var(--vw-100));
}
.page-gallery .gallery-board__page {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  text-decoration: none;
}
.page-gallery .gallery-board__page--nav {
  gap: 0;
  padding-left: 4px;
  padding-right: 8px;
}
.page-gallery .gallery-board__page--nav:last-child,
.page-gallery .gallery-board__page--nav.is-disabled:last-of-type {
  padding-left: 8px;
  padding-right: 4px;
}
.page-gallery .gallery-board__page img {
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  flex-shrink: 0;
}
.page-gallery .gallery-board__page.is-active {
  background: #252a2e;
  color: #fff;
}
.page-gallery .gallery-board__page.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.page-gallery .gallery-board__page:not(.is-disabled):hover {
  color: #131313;
}
.page-gallery .gallery-board__page.is-active:hover {
  color: #fff;
}
.page-gallery .gallery-board__page:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .page-gallery .gallery-board__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .page-gallery .gallery-board {
    padding-top: 40px;
    padding-bottom: 80px;
  }
  .page-gallery .gallery-board__toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-gallery .gallery-board__cats {
    gap: 12px 16px;
    margin-bottom: 32px;
  }
  .page-gallery .gallery-board__cat-label {
    font-size: 16px;
  }
  .page-gallery .gallery-board__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .page-gallery .gallery-card__desc {
    line-height: 1.6;
  }
  .page-gallery .gallery-board__pager {
    margin-top: 48px;
  }
}

/*
  Brands Overview Hero — Figma 11825:1242
  1440×250 / 배경 이미지 1600×250
*/
.page-brands .brands-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: #001a3a;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.page-brands .brands-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page-brands .brands-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.page-brands .brands-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 60px;
}
.page-brands .brands-hero__title {
  margin: 0;
  font-size: 36px;
  line-height: 46px;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: #fff;
  white-space: nowrap;
}
.page-brands .brands-hero__subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
  color: #fafaf7;
  letter-spacing: 0;
  white-space: nowrap;
}

/*
  Brands Overview Breadcrumb — Figma 11825:1257
  풀블리드 배경 + .container(1320@1440) 안 콘텐츠
*/
.page-brands .brands-breadcrumb {
  background-color: #f2f4f5;
  padding: 14px 0;
  width: 100%;
}
.page-brands .brands-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-brands .brands-breadcrumb__item {
  display: flex;
  align-items: center;
}
.page-brands .brands-breadcrumb__home {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: #154670;
  border-radius: 6px;
}
.page-brands .brands-breadcrumb__home:hover {
  text-decoration: underline;
}
.page-brands .brands-breadcrumb__home:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.page-brands .brands-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
  margin: 6px 4px;
  flex-shrink: 0;
}
.page-brands .brands-breadcrumb__home-text {
  display: block;
  padding: 6px 2px 7px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #154670;
  white-space: nowrap;
}
.page-brands .brands-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-brands .brands-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-brands .brands-breadcrumb__current {
  display: block;
  padding: 6px 6px 7px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #394147;
  white-space: nowrap;
}
.page-brands .brands-breadcrumb__link {
  display: block;
  padding: 6px 6px 7px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #154670;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
}
.page-brands .brands-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-brands .brands-breadcrumb__link:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}

/*
  Brands Overview body — Figma 11825:1240
  캔버스 1440 / 콘텐츠 컨테이너 1320 (좌우 60)
*/
.page-brands .brands-overview {
  padding: 0;
  /* Figma: 마지막 섹션 ↔ footer 200 (공통 --vw-200 = 10.41667vw @1920) */
  padding-bottom: max(7.5rem, var(--vw-200));
  background: #fff;
}
.page-brands .brands-overview__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-top: 100px;
  margin-bottom: 100px;
  text-align: center;
}
.page-brands .brands-overview__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #008cff;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #252a2e;
}
.page-brands .brands-overview__eyebrow-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.page-brands .brands-overview__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.page-brands .brands-overview__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.17;
  font-weight: 700;
  color: #131313;
  text-align: center;
}
.page-brands .brands-overview__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: #394147;
}
.page-brands .brands-overview__empty {
  margin: 40px 0 0;
  font-size: 16px;
  color: #5e5e5e;
  text-align: center;
}

.page-brands .brands-filters {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 100px;
}
.page-brands .brands-filters__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-brands .brands-filters__cat {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border: 1px solid #959da4;
  border-radius: 100px;
  background: #fff;
  color: #959da4;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.page-brands .brands-filters__cat:hover {
  border-color: #394147;
  color: #394147;
}
.page-brands .brands-filters__cat.is-active {
  background: #131313;
  border-color: #131313;
  color: #fff;
  font-weight: 700;
}
.page-brands .brands-filters__cat:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.page-brands .brands-filters__index {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 16px 20px;
  background: #f4f4f4;
}
.page-brands .brands-filters__all {
  flex-shrink: 0;
  padding-right: 16px;
  border-right: 1px solid #131313;
  color: #131313;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.page-brands .brands-filters__all:hover,
.page-brands .brands-filters__all.is-active {
  color: #008cff;
}
.page-brands .brands-filters__letters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.page-brands .brands-filters__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.6em;
  color: #c8ced3;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
}
.page-brands .brands-filters__letter:hover,
.page-brands .brands-filters__letter.is-active {
  color: #131313;
}
.page-brands .brands-filters__letter:focus-visible,
.page-brands .brands-filters__all:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}

.page-brands .brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-brands .brands-card {
  min-width: 0;
}
.page-brands .brands-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
}
.page-brands .brands-card__link:hover .brands-card__desc {
  color: #154670;
}
.page-brands .brands-card__link:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 4px;
}
.page-brands .brands-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  overflow: hidden;
}
.page-brands .brands-card__product {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.page-brands .brands-card__product--placeholder {
  object-fit: cover;
}
.page-brands .brands-card__logo-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-brands .brands-card__logo {
  display: block;
  width: 120px;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
  object-position: center;
}
.page-brands .brands-card__logo-text {
  display: block;
  max-width: 100%;
  font-size: max(0.875rem, var(--font-14));
  line-height: 1.25;
  font-weight: 600;
  color: #154670;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-brands .brands-card__desc {
  margin: 0;
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: #131313;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 1199px) {
  .page-brands .brands-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 24px;
  }
  .page-brands .brands-filters__letter {
    font-size: 22px;
    line-height: 32px;
  }
}

@media (max-width: 991px) {
  .page-brands .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-brands .brands-overview__header {
    padding-top: 60px;
    margin-bottom: 60px;
    gap: 20px;
  }
  .page-brands .brands-filters {
    margin-bottom: 60px;
  }
  .page-brands .brands-overview__title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .page-brands .brands-hero {
    height: 180px;
  }
  .page-brands .brands-hero__content {
    padding: 0 20px;
    gap: 6px;
  }
  .page-brands .brands-hero__title {
    font-size: 24px;
    line-height: 1.35;
    letter-spacing: -1px;
    white-space: normal;
  }
  .page-brands .brands-hero__subtitle {
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
  }
  .page-brands .brands-breadcrumb {
    padding: 12px 0;
  }
  .page-brands .brands-breadcrumb__home-text,
  .page-brands .brands-breadcrumb__current {
    font-size: 14px;
  }
  .page-brands .brands-overview__header {
    padding-top: 48px;
    margin-bottom: 40px;
  }
  .page-brands .brands-overview__title {
    font-size: 24px;
  }
  .page-brands .brands-overview__desc {
    font-size: 14px;
    line-height: 1.5;
  }
  .page-brands .brands-filters {
    gap: 20px;
    margin-bottom: 40px;
  }
  .page-brands .brands-filters__cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .page-brands .brands-filters__index {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  .page-brands .brands-filters__all {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid #131313;
    padding-bottom: 8px;
    font-size: 16px;
  }
  .page-brands .brands-filters__letter {
    font-size: 18px;
    line-height: 28px;
  }
  .page-brands .brands-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============================================================
   통합 자료실 — Figma WEB-033 (11825:3637)
   ============================================================ */
.page-resources .resources-breadcrumb {
  /* #contents margin-top(header) 이후, 헤더 하단 ↔ 브레드크럼 140 */
  padding-top: 140px;
  padding-bottom: 0;
}
.page-resources .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-resources .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-resources .insight-breadcrumb__home,
.page-resources .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-resources .insight-breadcrumb__link {
  color: #394147;
  padding: 6px;
}
.page-resources .insight-breadcrumb__home:hover,
.page-resources .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-resources .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
}
.page-resources .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 0;
}
.page-resources .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-resources .insight-breadcrumb__home-text,
.page-resources .insight-breadcrumb__text,
.page-resources .insight-breadcrumb__current {
  display: block;
  padding: 6px 2px;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  color: #154670;
  font-weight: 400;
}
.page-resources .insight-breadcrumb__current,
.page-resources .insight-breadcrumb__text {
  color: #394147;
  padding: 6px;
}

.page-resources .resources-board {
  /* PC: 마지막 섹션 ↔ footer 200 */
  padding-bottom: max(7.5rem, var(--vw-200));
}
.page-resources .resources-board__title {
  margin: 0 0 100px; /* Figma: 타이틀 ↔ 검색/탭 100 */
  color: #131313;
  font-size: max(2rem, 3rem); /* Figma 48px */
  font-weight: 700;
  line-height: 1.2;
}

.page-resources .resources-board__layout {
  display: grid;
  /* Figma: 300 + 60 + 960 = 1320 */
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 60px;
  align-items: start;
}

.page-resources .resources-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.page-resources .resources-sidebar__search {
  padding-bottom: 31px;
  border-bottom: 1px solid #959da4;
}
.page-resources .resources-sidebar__label {
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 30px;
}
.page-resources .resources-sidebar__input {
  display: block;
  width: 100%;
  max-width: 272px;
  margin-top: 20px;
  padding: 17px 21px;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.2;
  outline: none;
}
.page-resources .resources-sidebar__input::placeholder {
  color: #959da4;
  font-weight: 700;
}
.page-resources .resources-sidebar__input:focus {
  border-color: #3a8ad1;
}
.page-resources .resources-sidebar__filters {
  padding-top: 30px;
}
.page-resources .resources-sidebar__chips {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  max-width: 272px;
}
.page-resources .resources-chip {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 17px 21px;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  color: #959da4;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, color 0.2s ease, border-width 0.2s ease;
}
.page-resources .resources-chip:hover {
  color: #3a8ad1;
  border-color: #3a8ad1;
}
.page-resources .resources-chip.is-active {
  border-width: 2px;
  border-color: #3a8ad1;
  padding: 16px 20px; /* 2px border 보정 */
  background: #fff;
  color: #3a8ad1;
  font-weight: 700;
}

.page-resources .resources-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: max(1.875rem, var(--vw-30));
}
.page-resources .resources-tabs__item {
  font-family: var(--font-en);
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 300px;
  padding: 12px 8px;
  border-bottom: 3px solid #959da4;
  color: #959da4;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.page-resources .resources-tabs__item.is-active {
  border-bottom-color: #154670;
  color: #154670;
  font-weight: 700;
}
.page-resources .resources-tabs__count {
  display: inline-flex;
  align-items: baseline;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 32px;
}
.page-resources .resources-tabs__count-num {
  color: #008cff;
  font-weight: 400;
}
.page-resources .resources-tabs__item:not(.is-active) .resources-tabs__count {
  color: inherit;
}
.page-resources .resources-tabs__item:not(.is-active) .resources-tabs__count-num {
  color: inherit;
}

.page-resources .resources-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: max(1.875rem, var(--vw-30));
}
.page-resources .resources-toolbar__clear {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border: 0;
  border-radius: 100px;
  background: #252a2e;
  color: #fff;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 700;
  cursor: pointer;
}
.page-resources .resources-toolbar__clear img {
  display: block;
  width: 20px;
  height: 20px;
}
.page-resources .resources-toolbar__download {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 44px;
  padding: 11px 21px;
  border: 1px solid #3a8ad1;
  border-radius: 50px;
  background: #fff;
  color: #3a8ad1;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.2;
  cursor: pointer;
}
.page-resources .resources-toolbar__download-num {
  font-weight: 700;
  font-style: normal;
}
.page-resources .resources-toolbar__download-text {
  font-weight: 400;
}
.page-resources .resources-toolbar__download:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-resources .resources-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-resources .resources-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 30px;
  border-radius: 8px;
  background: #f4f4f4;
}
.page-resources .resources-item__label {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  max-width: 650px;
  margin: 0;
  cursor: pointer;
}
.page-resources .resources-item__check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 2px;
  border: 1px solid #717171;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.page-resources .resources-item__check:checked {
  border-color: #3a8ad1;
  background-color: #3a8ad1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2L4.2 8.5L11 1.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}
.page-resources .resources-item__check:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-resources .resources-item__title {
  font-family: var(--font-en);
  min-width: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-resources .resources-item__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 20px;
}
.page-resources .resources-item__download {
  color: #3a8ad1;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}
.page-resources .resources-item__download:hover {
  text-decoration: underline;
}
.page-resources .resources-item__download.is-disabled {
  color: #959da4;
  pointer-events: none;
}
.page-resources .resources-item__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
}
.page-resources .resources-item__link img {
  display: block;
  width: 18px;
  height: 18px;
}

.page-resources .resources-list__empty {
  padding: max(3.125rem, var(--vw-100)) 0;
  text-align: center;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
}

.page-resources .resources-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: max(3.125rem, var(--vw-100));
}
.page-resources .gallery-board__page {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  text-decoration: none;
}
.page-resources .gallery-board__page--nav {
  padding-left: 4px;
  padding-right: 8px;
}
.page-resources .gallery-board__page--nav:last-child,
.page-resources .gallery-board__page--nav.is-disabled:last-of-type {
  padding-left: 8px;
  padding-right: 4px;
}
.page-resources .gallery-board__page img {
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  flex-shrink: 0;
}
.page-resources .gallery-board__page.is-active {
  background: #154670;
  color: #fff;
}
.page-resources .gallery-board__page.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.page-resources .gallery-board__page:not(.is-disabled):hover {
  color: #131313;
}
.page-resources .gallery-board__page.is-active:hover {
  color: #fff;
}

.page-resources .resources-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px; /* Figma 11825:3919 */
  width: 100%;
  margin-top: 60px;
  box-sizing: border-box;
}
.page-resources .resources-cta__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  /* Figma Frame 134: 460×118 = pad 30×20 + title 24 + gap 10 + desc 24 */
  min-height: 118px;
  padding: 30px 20px;
  border-radius: 12px;
  background: #f2f4f5;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}
.page-resources .resources-cta__card:hover {
  background: #e8ecef;
}
.page-resources .resources-cta__title {
  margin: 0;
  color: #154670;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px; /* Figma leading normal ≈ 1 → 24px tall */
}
.page-resources .resources-cta__desc {
  margin: 0;
  color: #5e5e5e;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 16×1.5 → 24px, 24+10+24+60=118 */
}

@media (max-width: 1023px) {
  .page-resources .resources-breadcrumb {
    padding-top: max(2.5rem, var(--vw-80));
  }
  .page-resources .resources-board__layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }
  .page-resources .resources-board__title {
    margin-bottom: max(2.5rem, var(--vw-60));
    font-size: max(1.75rem, var(--font-36));
  }
  .page-resources .resources-sidebar__input,
  .page-resources .resources-sidebar__chips {
    max-width: none;
  }
  .page-resources .resources-tabs {
    gap: 0;
  }
  .page-resources .resources-tabs__item {
    flex: 1 1 100%;
    max-width: none;
    justify-content: flex-start;
    font-size: max(0.9375rem, var(--font-18));
  }
  .page-resources .resources-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .page-resources .resources-item__label {
    max-width: none;
    width: 100%;
  }
  .page-resources .resources-item__title {
    white-space: normal;
  }
  .page-resources .resources-item__actions {
    width: 100%;
    justify-content: flex-end;
  }
  .page-resources .resources-cta {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
  }
}

/* ============================================================
   견적 문의 — Figma WEB-034 (11825:4172)
   ============================================================ */
.page-quote .quote-breadcrumb {
  padding-top: 140px; /* header 하단 ↔ 브레드크럼 */
  padding-bottom: 0;
}
.page-quote .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-quote .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-quote .insight-breadcrumb__home,
.page-quote .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-quote .insight-breadcrumb__link {
  color: #394147;
  padding: 6px;
}
.page-quote .insight-breadcrumb__home:hover,
.page-quote .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-quote .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
}
.page-quote .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 0;
}
.page-quote .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-quote .insight-breadcrumb__home-text,
.page-quote .insight-breadcrumb__text,
.page-quote .insight-breadcrumb__current {
  display: block;
  padding: 6px 2px;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  color: #154670;
  font-weight: 400;
}
.page-quote .insight-breadcrumb__current,
.page-quote .insight-breadcrumb__text {
  color: #394147;
  padding: 6px;
}

.page-quote .quote-board {
  /* PC: 마지막 섹션 ↔ footer 200 */
  padding-bottom: max(7.5rem, var(--vw-200));
}
.page-quote .quote-board__title {
  margin: 0 0 100px;
  color: #131313;
  font-size: max(2rem, 3rem); /* Figma 48px */
  font-weight: 700;
  line-height: 1.2;
}

.page-quote .quote-alert {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid #ff5a4f;
  border-radius: 8px;
  color: #ff5a4f;
  font-size: max(0.875rem, var(--font-16));
}
.page-quote .quote-alert--info {
  border-color: #154670;
  color: #154670;
}

.page-quote .quote-product {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0 0 40px;
  padding: 16px 20px;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
}
.page-quote .quote-product__media img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.page-quote .quote-product__cat {
  margin: 0 0 6px;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
}
.page-quote .quote-product__name {
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
}

.page-quote .quote-section {
  display: grid;
  /* 우측 660 고정, gap을 줄여 좌측 카피 폭 확보(설명 2줄) */
  grid-template-columns: minmax(0, 1fr) 660px;
  column-gap: max(2.5rem, var(--vw-60)); /* Figma 153 → 축소해 좌측 공간 확보 */
  align-items: start;
  width: 100%;
  margin-bottom: max(3.125rem, var(--vw-100));
}
.page-quote .quote-consent-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 60px;
}
.page-quote .quote-section--consent {
  width: 100%;
  margin-bottom: 0;
}

.page-quote .quote-section__intro {
  display: flex;
  flex-direction: column;
  gap: max(1.5rem, var(--vw-40)); /* Figma: 제목 ↔ 설명 40 */
  min-width: 0;
  max-width: none; /* 507 고정 해제 — gap 축소분으로 2줄 확보 */
}
.page-quote .quote-section__title {
  margin: 0;
  color: #131313;
  font-size: max(1.5rem, var(--font-36)); /* Figma 36 */
  font-weight: 700;
  line-height: 1.2;
}
.page-quote .quote-section__desc {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 32px; /* Figma leading 32 */
}
.page-quote .quote-section__desc-line {
  display: block;
  white-space: nowrap; /* 문장당 1줄 = 총 2줄 */
}

.page-quote .quote-section__fields,
.page-quote .quote-consent {
  width: 660px;
  max-width: 660px;
  box-sizing: border-box;
  justify-self: end;
}
.page-quote .quote-section__fields {
  display: flex;
  flex-direction: column;
  gap: max(1.5rem, var(--vw-40)); /* Figma 필드 간격 40 */
}

.page-quote .quote-field__label {
  display: block;
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.2;
}
.page-quote .quote-field__req {
  color: #ff5a4f;
}
.page-quote .quote-field__control {
  position: relative;
  margin-top: 10px;
}
.page-quote .quote-field__control--select .quote-input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.page-quote .quote-field__chevron {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  pointer-events: none;
}

.page-quote .quote-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  color: #131313;
  font-family: var(--font-body);
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  outline: none;
}
.page-quote .quote-input::placeholder {
  color: #5e5e5e;
}
.page-quote .quote-input:focus {
  border-color: #154670;
}
.page-quote .quote-input--textarea {
  min-height: 200px;
  height: 200px;
  resize: vertical;
  line-height: 1.5;
}

.page-quote .quote-consent__heading {
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.2;
}
.page-quote .quote-consent__box {
  box-sizing: border-box;
  margin-top: 10px;
  padding: 16px 20px;
  width: 100%;
  height: 200px;
  overflow: auto;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
}
.page-quote .quote-consent__box p {
  margin: 0;
}
.page-quote .quote-consent__box a {
  color: #154670;
  text-decoration: underline;
}
.page-quote .quote-consent__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-sizing: border-box;
  width: 660px;
  max-width: 660px;
  margin-left: auto; /* 우측 660 컬럼과 정렬 */
}
.page-quote .quote-consent__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  cursor: pointer;
}
.page-quote .quote-consent__check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #154670;
}

.page-quote .quote-form .error,
.page-quote .quote-form label.error {
  display: block;
  margin-top: 8px;
  color: #ff5a4f;
  font-size: 13px;
  font-weight: 400;
}
.page-quote .error-place:empty {
  display: none;
}

.page-quote .quote-submit {
  display: flex;
  justify-content: center;
}
.page-quote .quote-submit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 54px;
  padding: 18px 30px;
  border: 0;
  border-radius: 8px;
  background: #154670;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.page-quote .quote-submit__btn:hover {
  background: #0f5694;
}
.page-quote .quote-submit__btn.is-disabled,
.page-quote .quote-submit__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .page-quote .quote-section {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }
  .page-quote .quote-section__intro {
    max-width: none;
  }
  .page-quote .quote-section__desc-line {
    white-space: normal;
  }
  .page-quote .quote-section__fields,
  .page-quote .quote-consent,
  .page-quote .quote-consent__footer {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    margin-left: 0;
  }
  .page-quote .quote-consent-block,
  .page-quote .quote-consent__footer {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .page-quote .quote-breadcrumb {
    padding-top: 80px;
  }
  .page-quote .quote-board {
    padding-bottom: 80px; /* 모바일: footer 간격 축소 */
  }
  .page-quote .quote-board__title {
    margin-bottom: 48px;
    font-size: max(1.75rem, var(--font-36));
  }
  .page-quote .quote-section {
    margin-bottom: 60px;
    row-gap: 28px;
  }
  .page-quote .quote-section__title {
    margin-bottom: 0;
  }
  .page-quote .quote-section__desc {
    line-height: 1.5;
  }
  .page-quote .quote-section__fields {
    gap: 28px;
  }
  .page-quote .quote-consent-block {
    margin-bottom: 40px;
  }
}

/* ============================================================
   A/S 및 기술 지원 — Figma WEB-035-3 (9829:3021)
   ============================================================ */
.page-as .as-breadcrumb,
.page-search .search-breadcrumb {
  padding-top: 140px;
  padding-bottom: 0;
}
.page-as .insight-breadcrumb__list,
.page-search .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-as .insight-breadcrumb__item,
.page-search .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-as .insight-breadcrumb__home,
.page-as .insight-breadcrumb__link,
.page-search .insight-breadcrumb__home,
.page-search .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-as .insight-breadcrumb__link,
.page-search .insight-breadcrumb__link {
  color: #394147;
  padding: 6px;
}
.page-as .insight-breadcrumb__home:hover,
.page-as .insight-breadcrumb__link:hover,
.page-search .insight-breadcrumb__home:hover,
.page-search .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-as .insight-breadcrumb__home-icon,
.page-search .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
}
.page-as .insight-breadcrumb__sep,
.page-search .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 0;
}
.page-as .insight-breadcrumb__sep img,
.page-search .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-as .insight-breadcrumb__home-text,
.page-as .insight-breadcrumb__text,
.page-as .insight-breadcrumb__current,
.page-search .insight-breadcrumb__home-text,
.page-search .insight-breadcrumb__text,
.page-search .insight-breadcrumb__current {
  display: block;
  padding: 6px 2px;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  color: #154670;
  font-weight: 400;
}
.page-as .insight-breadcrumb__current,
.page-as .insight-breadcrumb__text,
.page-search .insight-breadcrumb__current,
.page-search .insight-breadcrumb__text {
  color: #394147;
  padding: 6px;
}

.page-as .as-board {
  padding-bottom: max(7.5rem, var(--vw-200)); /* 마지막 섹션 ↔ footer 200 */
}
.page-as .as-board__title {
  margin: 0 0 max(2.5rem, var(--vw-60));
  color: #131313;
  font-size: max(2rem, 3rem);
  font-weight: 700;
  line-height: 1.2;
}

.page-as .as-tabs {
  display: flex;
  gap: max(1.25rem, var(--vw-20));
  max-width: 980px;
  margin: 0 auto max(2.5rem, var(--vw-60));
}
.page-as .as-tabs__item {
  box-sizing: border-box;
  flex: 1 1 0;
  max-width: 470px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 3px solid #959da4;
  background: transparent;
  color: #959da4;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}
.page-as .as-tabs__item.is-active {
  border-bottom-color: #154670;
  color: #154670;
  font-weight: 700;
}

.page-as .as-verify {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 980px;
  margin: 0 auto max(3.125rem, var(--vw-100));
  padding: max(2.5rem, var(--vw-60)) 0;
  border-radius: 8px;
  background: #f2f4f5;
}
.page-as .as-verify__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 30px;
}
.page-as .as-verify__title {
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 1.3;
}
.page-as .as-verify__desc {
  margin: 0;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-as .as-verify__desc[hidden],
.page-as .as-verify__block[hidden],
.page-as .as-verify__hint[hidden],
.page-as .as-verify__timer[hidden],
.page-as .as-verify__btn[hidden],
.page-as .as-form-gate[hidden] {
  display: none !important;
}
.page-as .as-verify__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 30px;
}
.page-as .as-verify__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.page-as .as-verify__input {
  box-sizing: border-box;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.2;
  outline: none;
}
.page-as .as-verify__input--email {
  flex: 1 1 280px;
  width: 100%;
  max-width: 660px;
}
.page-as .as-verify__input--code {
  width: 100%;
  padding-right: 7.5rem;
  border: 0;
  background: transparent;
}
.page-as .as-verify__input::placeholder {
  color: #5e5e5e;
}
.page-as .as-verify__input:focus {
  border-color: #154670;
}
.page-as .as-verify__input.is-error,
.page-as .as-verify__code-wrap.is-error {
  border-color: #ff5a4f;
  border-width: 2px;
}
.page-as .as-verify__input:disabled,
.page-as .as-verify.is-sent .as-verify__input--email,
.page-as .as-verify.is-done .as-verify__input--email,
.page-as .as-verify.is-done .as-verify__input--code {
  background: #f2f4f5;
  color: #5e5e5e;
  cursor: not-allowed;
}
.page-as .as-verify__code-wrap {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 0 1 360px;
  width: 100%;
  max-width: 360px;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.page-as .as-verify__code-wrap.is-disabled {
  background: #f2f4f5;
}
.page-as .as-verify__timer {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #ff5a4f;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.page-as .as-verify__btn {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 8px;
  background: #394147;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.2;
  cursor: pointer;
}
.page-as .as-verify__btn:hover:not(:disabled) {
  background: #252a2e;
}
.page-as .as-verify__btn:disabled {
  background: #959da4;
  cursor: not-allowed;
}
.page-as .as-verify__btn--confirm {
  background: #154670;
}
.page-as .as-verify__btn--confirm:hover:not(:disabled) {
  background: #0f5694;
}
.page-as .as-verify__btn--confirm:disabled {
  background: #959da4;
}
.page-as .as-verify__hint {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: #ff5a4f;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.5;
}
.page-as .as-verify__hint-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eb003b;
  position: relative;
}
.page-as .as-verify__hint-icon::before,
.page-as .as-verify__hint-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  width: 2px;
}
.page-as .as-verify__hint-icon::before {
  top: 5px;
  height: 6px;
}
.page-as .as-verify__hint-icon::after {
  bottom: 4px;
  height: 2px;
}
.page-as .as-form-gate {
  max-width: 960px;
  margin: 0 auto;
}
.page-as .as-input[readonly] {
  background: #f2f4f5;
  color: #394147;
}

.page-as .as-alert {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid #ff5a4f;
  border-radius: 8px;
  color: #ff5a4f;
  font-size: max(0.875rem, var(--font-16));
}
.page-as .as-alert--info {
  border-color: #154670;
  color: #154670;
}

.page-as .as-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 660px;
  column-gap: max(2.5rem, var(--vw-60));
  align-items: start;
  width: 100%;
  margin-bottom: max(3.125rem, var(--vw-100));
}
.page-as .as-consent-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 60px;
}
.page-as .as-section--consent {
  width: 100%;
  margin-bottom: 0;
}
.page-as .as-section__intro {
  display: flex;
  flex-direction: column;
  gap: max(1.5rem, var(--vw-40));
  min-width: 0;
}
.page-as .as-section__title {
  margin: 0;
  color: #131313;
  font-size: max(1.5rem, var(--font-36));
  font-weight: 700;
  line-height: 1.2;
}
.page-as .as-section__desc {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 32px;
}
.page-as .as-section__desc-line {
  display: block;
}
.page-as .as-section__fields,
.page-as .as-consent {
  width: 660px;
  max-width: 660px;
  box-sizing: border-box;
  justify-self: end;
}
.page-as .as-section__fields {
  display: flex;
  flex-direction: column;
  gap: max(1.5rem, var(--vw-40));
}

.page-as .as-field__label {
  display: block;
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.2;
}
.page-as .as-field__req {
  color: #ff5a4f;
}
.page-as .as-field__control {
  position: relative;
  margin-top: 10px;
}
.page-as .as-field__control--select .as-input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.page-as .as-field__chevron {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  pointer-events: none;
}
.page-as .as-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  color: #131313;
  font-family: var(--font-body);
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  outline: none;
}
.page-as .as-input::placeholder {
  color: #5e5e5e;
}
.page-as .as-input:focus {
  border-color: #154670;
}
.page-as .as-input--textarea {
  min-height: 200px;
  height: 200px;
  resize: vertical;
  line-height: 1.5;
}

.page-as .as-consent__heading {
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.2;
}
.page-as .as-consent__box {
  box-sizing: border-box;
  margin-top: 10px;
  padding: 16px 20px;
  width: 100%;
  height: 200px;
  overflow: auto;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
}
.page-as .as-consent__box p {
  margin: 0;
}
.page-as .as-consent__box a {
  color: #154670;
  text-decoration: underline;
}
.page-as .as-consent__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-sizing: border-box;
  width: 660px;
  max-width: 660px;
  margin-left: auto;
}
.page-as .as-consent__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  cursor: pointer;
}
.page-as .as-consent__check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #154670;
}

.page-as .as-form .error,
.page-as .as-form label.error {
  display: block;
  margin-top: 8px;
  color: #ff5a4f;
  font-size: 13px;
  font-weight: 400;
}
.page-as .error-place:empty {
  display: none;
}

.page-as .as-submit {
  display: flex;
  justify-content: center;
}
.page-as .as-submit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 54px;
  padding: 18px 30px;
  border: 0;
  border-radius: 8px;
  background: #154670;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.page-as .as-submit__btn:hover {
  background: #0f5694;
}
.page-as .as-submit__btn.is-disabled,
.page-as .as-submit__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .page-as .as-section {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }
  .page-as .as-section__fields,
  .page-as .as-consent,
  .page-as .as-consent__footer {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    margin-left: 0;
  }
  .page-as .as-consent-block,
  .page-as .as-consent__footer {
    align-items: flex-start;
  }
  .page-as .as-tabs {
    max-width: none;
  }
  .page-as .as-tabs__item {
    max-width: none;
  }
  .page-as .as-verify {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .page-as .as-breadcrumb,
  .page-search .search-breadcrumb {
    padding-top: 80px;
  }
  .page-as .as-board {
    padding-bottom: 80px;
  }
  .page-as .as-board__title,
  .page-search .page-search__title {
    margin-bottom: 40px;
    font-size: max(1.75rem, var(--font-36));
  }
  .page-as .as-tabs {
    gap: 12px;
    margin-bottom: 32px;
  }
  .page-as .as-tabs__item {
    font-size: max(0.875rem, var(--font-16));
    line-height: 1.4;
    padding: 10px 0;
  }
  .page-as .as-verify {
    gap: 20px;
    margin-bottom: 40px;
    padding: 32px 0;
  }
  .page-as .as-verify__copy,
  .page-as .as-verify__block {
    padding-left: 20px;
    padding-right: 20px;
  }
  .page-as .as-verify__row {
    flex-direction: column;
    align-items: stretch;
  }
  .page-as .as-verify__input,
  .page-as .as-verify__input--email,
  .page-as .as-verify__code-wrap {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
  }
  .page-as .as-verify__btn {
    width: 100%;
  }
  .page-as .as-section {
    margin-bottom: 60px;
    row-gap: 28px;
  }
  .page-as .as-section__desc {
    line-height: 1.5;
  }
  .page-as .as-section__fields {
    gap: 28px;
  }
  .page-as .as-consent-block {
    margin-bottom: 40px;
  }
}

/* ============================================================
   뉴스레터 목록 — Figma WEB-036 (11825:5743)
   ============================================================ */
.page-newsletter .newsletter-breadcrumb {
  padding-top: 140px;
  padding-bottom: 0;
}
.page-newsletter .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-newsletter .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-newsletter .insight-breadcrumb__home,
.page-newsletter .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-newsletter .insight-breadcrumb__link {
  color: #394147;
  padding: 6px;
}
.page-newsletter .insight-breadcrumb__home:hover,
.page-newsletter .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-newsletter .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
}
.page-newsletter .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 0;
}
.page-newsletter .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-newsletter .insight-breadcrumb__home-text,
.page-newsletter .insight-breadcrumb__text,
.page-newsletter .insight-breadcrumb__current {
  display: block;
  padding: 6px 2px;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  color: #154670;
  font-weight: 400;
}
.page-newsletter .insight-breadcrumb__current,
.page-newsletter .insight-breadcrumb__text {
  color: #394147;
  padding: 6px;
}

.page-newsletter .newsletter-board {
  padding-bottom: max(7.5rem, var(--vw-200)); /* 마지막 섹션 ↔ footer 200 */
}
.page-newsletter .newsletter-board__head {
  margin-bottom: max(3.125rem, var(--vw-100));
}
.page-newsletter .newsletter-board__title {
  margin: 0 0 max(2.5rem, var(--vw-60));
  color: #131313;
  font-size: max(2rem, 3rem); /* 48 */
  font-weight: 700;
  line-height: 1.2;
}
.page-newsletter .newsletter-board__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: max(1.5rem, var(--vw-40));
}
.page-newsletter .newsletter-board__desc {
  flex: 1 1 auto;
  margin: 0;
  max-width: 900px;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 32px;
}
.page-newsletter .newsletter-board__subscribe {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 54px;
  margin: 0;
  padding: 16px 30px;
  border: 2px solid #394147;
  border-radius: 8px;
  background: #fff;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.page-newsletter .newsletter-board__subscribe:hover {
  background: #394147;
  color: #fff;
}

.page-newsletter .newsletter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: max(1.25rem, var(--vw-30)); /* Figma 30 */
  row-gap: max(2.5rem, var(--vw-60)); /* Figma 60 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-newsletter .newsletter-card {
  min-width: 0;
}
.page-newsletter .newsletter-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.page-newsletter .newsletter-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 420 / 315;
  background: #e1e7eb;
}
.page-newsletter .newsletter-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-newsletter .newsletter-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(160deg, #154670 0%, #0f5694 100%);
  color: #fff;
}
.page-newsletter .newsletter-card__badge {
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
}
.page-newsletter .newsletter-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;
  padding: 20px 16px;
  background: #f2f4f5;
  color: #131313;
}
.page-newsletter .newsletter-card.is-featured .newsletter-card__body {
  background: #154670;
  color: #fff;
}
.page-newsletter .newsletter-card__title {
  display: block;
  margin: 0;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}
.page-newsletter .newsletter-card__date {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  opacity: 0.95;
}
.page-newsletter .newsletter-card__link:hover .newsletter-card__title {
  text-decoration: underline;
}

.page-newsletter .newsletter-board__empty {
  margin: max(3.125rem, var(--vw-100)) 0;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  text-align: center;
}

.page-newsletter .newsletter-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: max(3.125rem, var(--vw-100));
}
.page-newsletter .gallery-board__page {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  text-decoration: none;
}
.page-newsletter .gallery-board__page--nav {
  padding-left: 4px;
  padding-right: 8px;
}
.page-newsletter .gallery-board__page--nav:last-child,
.page-newsletter .gallery-board__page--nav.is-disabled:last-of-type {
  padding-left: 8px;
  padding-right: 4px;
}
.page-newsletter .gallery-board__page img {
  display: block;
  width: 16px;
  height: 16px;
}
.page-newsletter .gallery-board__page.is-active {
  background: #154670;
  color: #fff;
}
.page-newsletter .gallery-board__page.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.page-newsletter .gallery-board__page:not(.is-disabled):hover {
  color: #154670;
}
.page-newsletter .gallery-board__page.is-active:hover {
  color: #fff;
}

@media (max-width: 1100px) {
  .page-newsletter .newsletter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-newsletter .newsletter-card.is-featured .newsletter-card__body {
    background: #f2f4f5;
    color: #131313;
  }
  .page-newsletter .newsletter-card:nth-child(2n + 1) .newsletter-card__body {
    background: #154670;
    color: #fff;
  }
}

@media (max-width: 768px) {
  .page-newsletter .newsletter-breadcrumb {
    padding-top: 80px;
  }
  .page-newsletter .newsletter-board {
    padding-bottom: 80px;
  }
  .page-newsletter .newsletter-board__title {
    margin-bottom: 32px;
    font-size: max(1.75rem, var(--font-36));
  }
  .page-newsletter .newsletter-board__intro {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .page-newsletter .newsletter-board__desc {
    line-height: 1.5;
  }
  .page-newsletter .newsletter-board__subscribe {
    width: 100%;
  }
  .page-newsletter .newsletter-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .page-newsletter .newsletter-card:nth-child(2n + 1) .newsletter-card__body,
  .page-newsletter .newsletter-card.is-featured .newsletter-card__body {
    background: #f2f4f5;
    color: #131313;
  }
  .page-newsletter .newsletter-card:first-child .newsletter-card__body {
    background: #154670;
    color: #fff;
  }
}

/* 뉴스레터 구독 모달 — Figma Frame 153 (11825:6052)
   app.css 구형 하단시트(.pop-subscribe) 스타일을 완전 덮어씀 */
.layer-popup.pop-subscribe {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  z-index: 10001;
  overflow: hidden;
}
.layer-popup.pop-subscribe.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.layer-popup.pop-subscribe .layer-dim {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(19, 19, 19, 0.45);
  opacity: 1;
  z-index: 1;
}
.layer-popup.pop-subscribe .pop-wrap.nl-modal {
  box-sizing: border-box;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  margin: 0;
  width: 660px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 30px 30px 60px;
  border-radius: 0;
  background: #fff;
  color: #131313;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
  z-index: 20;
}
.layer-popup.pop-subscribe .nl-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 0 auto;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.layer-popup.pop-subscribe .nl-modal__close img {
  display: block;
  width: 24px;
  height: 24px;
}
.layer-popup.pop-subscribe .nl-modal__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 60px;
}
.layer-popup.pop-subscribe .nl-modal__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.layer-popup.pop-subscribe .nl-modal__logo {
  display: block;
  width: 120px;
  height: 24px;
  object-fit: contain;
}
.layer-popup.pop-subscribe .nl-modal__brand-sep {
  display: block;
  width: 1px;
  height: 28px;
  background: #154670;
  flex-shrink: 0;
}
.layer-popup.pop-subscribe .nl-modal__brand-label {
  font-family: var(--font-en);
  color: #154670;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.layer-popup.pop-subscribe .nl-modal__lead {
  margin: 0;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.4;
}
.layer-popup.pop-subscribe .nl-modal__alert {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid #ff5a4f;
  border-radius: 8px;
  color: #ff5a4f;
  font-size: 14px;
}
.layer-popup.pop-subscribe .nl-modal__alert--info {
  border-color: #154670;
  color: #154670;
}
.layer-popup.pop-subscribe .nl-modal__form {
  display: flex;
  flex-direction: column;
}
.layer-popup.pop-subscribe .nl-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 30px;
}
.layer-popup.pop-subscribe .nl-modal__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.layer-popup.pop-subscribe .nl-modal__label {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
}
.layer-popup.pop-subscribe .nl-modal__req {
  color: #ff5a4f;
}
.layer-popup.pop-subscribe .nl-modal__input {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
  color: #131313;
  font-family: var(--font-body);
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.2;
  outline: none;
}
.layer-popup.pop-subscribe .nl-modal__input::placeholder {
  color: #5e5e5e;
}
.layer-popup.pop-subscribe .nl-modal__input:focus {
  border-color: #154670;
}
.layer-popup.pop-subscribe .nl-modal__agrees {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}
.layer-popup.pop-subscribe .nl-modal__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  cursor: pointer;
}
.layer-popup.pop-subscribe .nl-modal__check input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #154670;
}
.layer-popup.pop-subscribe .nl-modal__agree-link {
  color: #131313;
  text-decoration: underline;
}
.layer-popup.pop-subscribe .nl-modal__actions {
  display: flex;
  justify-content: flex-end;
}
.layer-popup.pop-subscribe .nl-modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 182px;
  height: 54px;
  margin: 0;
  padding: 16px 30px;
  border: 0;
  border-radius: 8px;
  background: #252a2e;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.layer-popup.pop-subscribe .nl-modal__submit:hover {
  background: #131313;
}
.layer-popup.pop-subscribe .nl-modal__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .layer-popup.pop-subscribe .pop-wrap.nl-modal {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    padding: 20px 20px 40px;
  }
  .layer-popup.pop-subscribe .nl-modal__brand-label {
    font-size: 22px;
  }
  .layer-popup.pop-subscribe .nl-modal__logo {
    width: 96px;
  }
  .layer-popup.pop-subscribe .nl-modal__brand {
    margin-bottom: 36px;
  }
  .layer-popup.pop-subscribe .nl-modal__submit {
    width: 100%;
  }
}

/* 개인정보 동의 — 구독 모달(z-index:10001) 위에 표시 */
.layer-popup.agree1 {
  z-index: 10002;
}

.layer-popup.pop-subscribe .nl-modal__form .error,
.layer-popup.pop-subscribe .nl-modal__form label.error {
  display: block;
  margin-top: 8px;
  color: #ff5a4f;
  font-size: 13px;
  font-weight: 400;
}
.layer-popup.pop-subscribe .error-place:empty {
  display: none;
}
.layer-popup.pop-subscribe .nl-modal__agrees .error-place {
  margin-top: 8px;
}

/* soft-nav: 느릴 때만 보이는 상단 progress (200ms delay) */
.hah-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hah-nav-progress.is-active {
  opacity: 1;
}
.hah-nav-progress__bar {
  height: 100%;
  width: 0;
  background: #008cff;
  box-shadow: 0 0 8px rgba(0, 140, 255, 0.45);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   자주 묻는 질문(FAQ) — Figma WEB-037 (11825:6433)
   ============================================================ */
.page-faq .faq-breadcrumb {
  padding-top: 140px;
  padding-bottom: 0;
}
.page-faq .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-faq .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-faq .insight-breadcrumb__home,
.page-faq .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-faq .insight-breadcrumb__link {
  color: #394147;
  padding: 6px;
}
.page-faq .insight-breadcrumb__home:hover,
.page-faq .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-faq .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
}
.page-faq .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-faq .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-faq .insight-breadcrumb__home-text,
.page-faq .insight-breadcrumb__text,
.page-faq .insight-breadcrumb__current {
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
  color: #394147;
}
.page-faq .insight-breadcrumb__current,
.page-faq .insight-breadcrumb__text {
  padding: 6px;
}

.page-faq .faq-board {
  padding-bottom: max(7.5rem, var(--vw-200));
}
.page-faq .faq-board__title {
  margin: 0 0 max(3.125rem, var(--vw-100));
  color: #131313;
  font-size: clamp(1.75rem, 3vw, 3rem); /* 48 @1920 */
  font-weight: 700;
  line-height: normal;
}
.page-faq .faq-board__body {
  max-width: 960px;
  margin: 0 auto;
}
.page-faq .faq-tabs {
  display: flex;
  align-items: stretch;
  gap: max(1.25rem, var(--vw-30));
  margin: 0 0 max(3.125rem, var(--vw-100));
}
.page-faq .faq-tabs__item {
  font-family: var(--font-en);
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px 8px;
  border-bottom: 3px solid #959da4;
  color: #959da4;
  font-size: clamp(1rem, var(--font-20), 1.25rem);
  font-weight: 400;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  background: #fff;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.page-faq .faq-tabs__item:hover {
  color: #154670;
}
.page-faq .faq-tabs__item.is-active {
  border-bottom-color: #154670;
  color: #154670;
  font-weight: 700;
}
.page-faq .faq-board__section-title {
  margin: 0 0 max(1.25rem, var(--vw-30));
  color: #131313;
  font-size: clamp(1.5rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: normal;
}

/* Accordion — support/faq + Editor.js seojiFaq SSR */
:is(.page-faq, .editorjs-content) .faq-wrap {
  margin: 0;
  border-top: 0;
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq {
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item {
  border-bottom: 1px solid #5e5e5e;
  padding: max(1.875rem, var(--vw-30)) max(1.25rem, var(--vw-20));
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .faq-item__inner {
  display: flex;
  flex-direction: column;
  gap: max(1.875rem, var(--vw-30));
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item a.faq-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(1.25rem, var(--vw-20));
  width: 100%;
  padding: 0;
  color: #131313;
  text-decoration: none;
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item a.faq-title:hover,
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item a.faq-title.active:hover {
  background-color: transparent;
}
:is(.page-faq, .editorjs-content) .faq-item__question,
:is(.page-faq, .editorjs-content) .faq-item__answer {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: max(1rem, var(--font-16));
  line-height: 2;
  color: #131313;
  word-break: keep-all;
}
:is(.page-faq, .editorjs-content) .faq-item__question {
  font-weight: 700;
}
:is(.page-faq, .editorjs-content) .faq-item__answer {
  font-weight: 400;
}
:is(.page-faq, .editorjs-content) .faq-item__mark {
  font-family: var(--font-en);
  font-weight: 700;
}
:is(.page-faq, .editorjs-content) .faq-item__mark--a {
  font-weight: 400;
}
:is(.page-faq, .editorjs-content) .faq-item__subject {
  font-weight: 700;
}
:is(.page-faq, .editorjs-content) .faq-item__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 8px;
  transition: transform 0.2s ease;
}
:is(.page-faq, .editorjs-content) .faq-item__chevron img {
  display: block;
  width: 15px;
  height: 8px;
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item a.faq-title.active .faq-item__chevron {
  transform: rotate(180deg);
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item a.faq-title span.arrow {
  display: none;
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .answer {
  display: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .faq-item__answer-body,
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .answer-content {
  font-weight: 400;
  width: auto;
  padding: 0;
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .faq-item__answer-body p,
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .answer-content p {
  margin: 0;
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}
:is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .faq-label {
  display: none;
}
.page-faq .faq-board__empty {
  margin: max(2.5rem, var(--vw-60)) 0 0;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  text-align: center;
}
.page-faq .faq-board__pager {
  margin-top: max(2.5rem, var(--vw-60));
  text-align: center;
}

@media (max-width: 768px) {
  .page-faq .faq-breadcrumb {
    padding-top: 100px;
  }
  .page-faq .faq-board__title {
    margin-bottom: 2.5rem;
    font-size: 1.75rem;
  }
  .page-faq .faq-tabs {
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-faq .faq-tabs__item {
    flex: 0 0 auto;
    min-width: 7.5rem;
    max-width: none;
    padding: 10px 12px;
    font-size: 1rem;
  }
  .page-faq .faq-board__section-title {
    font-size: 1.5rem;
  }
  :is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item {
    padding: 1.875rem 1.25rem;
  }
  :is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .faq-item__inner {
    gap: 1.875rem;
  }
  :is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item a.faq-title {
    padding: 0;
  }
  :is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .answer {
    padding: 0;
  }
  :is(.page-faq, .editorjs-content) .faq-wrap ul.faq li.faq-item .answer-content {
    width: auto;
    padding-left: 0;
  }
}

/* ============================================================
   뉴스 및 공지사항 — Figma WEB-043 (9842:6158)
   ============================================================ */
.page-news .news-breadcrumb {
  padding-top: 140px;
  padding-bottom: 0;
}
.page-news .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-news .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-news .insight-breadcrumb__home,
.page-news .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-news .insight-breadcrumb__link {
  color: #394147;
  padding: 6px;
}
.page-news .insight-breadcrumb__home:hover,
.page-news .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-news .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
}
.page-news .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-news .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-news .insight-breadcrumb__home-text,
.page-news .insight-breadcrumb__text,
.page-news .insight-breadcrumb__current {
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
  color: #394147;
}
.page-news .insight-breadcrumb__current,
.page-news .insight-breadcrumb__text {
  padding: 6px;
}

.page-news .news-board {
  padding-bottom: max(7.5rem, var(--vw-200));
}
.page-news .news-board__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(1rem, var(--vw-16));
  margin: 0 0 max(3.125rem, var(--vw-100));
}
.page-news .news-board__title {
  margin: 0;
  color: #131313;
  font-size: clamp(1.75rem, var(--font-48), 3rem);
  font-weight: 700;
  line-height: normal;
}
.page-news .news-board__intro {
  margin: 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}

.page-news .news-board__cats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: max(1rem, var(--vw-16));
  margin: 0 0 max(2.5rem, var(--vw-60));
}
.page-news .news-board__cat {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: #5e5e5e;
}
.page-news .news-board__cat-label {
  font-size: max(1rem, var(--font-20));
  line-height: 1.2;
  font-weight: 400;
  padding-right: 4px;
}
.page-news .news-board__cat.is-active .news-board__cat-label {
  font-weight: 700;
  color: #154670;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.page-news .news-board__cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  margin-top: -10px;
  border-radius: 100px;
  background: #e1e7eb;
  color: #fff;
  font-family: var(--font-en);
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1;
  font-weight: 400;
}
.page-news .news-board__cat-badge.is-active {
  background: #ff5a4f;
}
.page-news .news-board__cat:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}

.page-news .news-board__featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(1.25rem, var(--vw-40));
  margin: 0 0 max(3.125rem, var(--vw-100));
  padding: 0;
  list-style: none;
}
.page-news .news-board__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: max(2.5rem, var(--vw-60)) max(1.25rem, var(--vw-30));
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .news-card {
  min-width: 0;
}
.page-news .news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.page-news .news-card__link:hover .news-card__title {
  color: #154670;
}
.page-news .news-card__link:hover .news-card__more {
  color: #154670;
}
.page-news .news-card__link:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.page-news .news-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e1e7eb;
  aspect-ratio: 420 / 250;
}
.page-news .news-card--featured .news-card__media {
  aspect-ratio: 60 / 40;
}
.page-news .news-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-news .news-card__placeholder-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #d8d8d8;
}
.page-news .news-card__body {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  flex: 1 1 auto;
  padding: max(2rem, var(--vw-32)) max(1rem, var(--vw-16));
  background: #f2f4f5;
}
.page-news .news-card--featured .news-card__body {
  gap: max(1.875rem, var(--vw-30));
  padding: max(1.875rem, var(--vw-30)) max(1.25rem, var(--vw-20));
}
.page-news .news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.2;
}
.page-news .news-card__cat {
  font-weight: 900;
  color: #2070b6;
}
.page-news .news-card__cat--notice {
  color: #27cdab;
}
.page-news .news-card__cat--event {
  color: #6155f5;
}
.page-news .news-card__date {
  flex-shrink: 0;
  font-weight: 400;
  color: #394147;
}
.page-news .news-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-18));
  font-weight: 400;
  line-height: 1.6667; /* 18/30 */
  word-break: keep-all;
  transition: color 0.2s ease;
}
.page-news .news-card--featured .news-card__title {
  font-size: clamp(1.125rem, var(--font-24), 1.5rem);
  font-weight: 700;
  line-height: 1.5; /* 24/36 */
}
.page-news .news-card__more {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: #394147;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 400;
  line-height: 1.85;
  transition: color 0.2s ease;
}
.page-news .news-card__more img {
  display: block;
  width: 10px;
  height: 6px;
  transform: rotate(-90deg);
}

.page-news .news-board__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: max(3.125rem, var(--vw-100));
}
.page-news .gallery-board__page {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  text-decoration: none;
  line-height: 1.5;
}
.page-news .gallery-board__page--nav {
  gap: 4px;
  min-width: 62px;
  padding-left: 4px;
  padding-right: 8px;
}
.page-news .gallery-board__page--nav:last-child,
.page-news .gallery-board__page--nav.is-disabled:last-of-type {
  flex-direction: row;
  padding-left: 8px;
  padding-right: 4px;
}
.page-news .gallery-board__page img {
  display: block;
  width: 16px;
  height: 16px;
}
.page-news .gallery-board__page.is-active {
  background: #154670;
  color: #fff;
}
.page-news .gallery-board__page.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.page-news .gallery-board__page:not(.is-disabled):hover {
  color: #154670;
}
.page-news .gallery-board__page.is-active:hover {
  color: #fff;
}
.page-news .news-board__empty {
  margin: max(3.125rem, var(--vw-100)) 0 0;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  text-align: center;
}

@media (max-width: 1024px) {
  .page-news .news-board__featured {
    grid-template-columns: 1fr;
  }
  .page-news .news-board__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .page-news .news-breadcrumb {
    padding-top: 100px;
  }
  .page-news .news-board__head {
    margin-bottom: 2.5rem;
    gap: 12px;
  }
  .page-news .news-board__title {
    font-size: 1.75rem;
  }
  .page-news .news-board__cats {
    margin-bottom: 2rem;
    gap: 0.75rem;
  }
  .page-news .news-board__cat-label {
    font-size: 1rem;
  }
  .page-news .news-board__featured {
    margin-bottom: 2.5rem;
  }
  .page-news .news-board__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .page-news .news-card--featured .news-card__title {
    font-size: 1.125rem;
  }
}

/* ============================================================
   뉴스·공지 상세 (page-news-post)
   ============================================================ */
.page-news-post .news-post {
  padding-bottom: max(7.5rem, var(--vw-200));
}
.page-news-post .news-post__head {
  display: flex;
  flex-direction: column;
  gap: max(0.625rem, var(--vw-10));
  margin-bottom: max(1.875rem, var(--vw-30));
  padding-bottom: max(1.875rem, var(--vw-30));
  border-bottom: 1px solid #e1e7eb;
}
.page-news-post .news-post__cat {
  margin: 0;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 900;
  line-height: 1.2;
  color: #2070b6;
}
.page-news-post .news-post__cat--notice {
  color: #27cdab;
}
.page-news-post .news-post__cat--event {
  color: #6155f5;
}
.page-news-post .news-post__title {
  margin: 0;
  color: #131313;
  font-size: clamp(1.5rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
}
.page-news-post .news-post__meta {
  margin: 0;
}
.page-news-post .news-post__date {
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
}
.page-news-post .news-post__hero {
  margin: 0 0 max(2.5rem, var(--vw-40));
}
.page-news-post .news-post__hero-img {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: cover;
}
.page-news-post .news-post__body {
  /* max-width: 1200px; */
  margin: 0 auto;
  color: #131313;
  font-size: max(1rem, var(--font-18));
  line-height: 1.75;
}
.page-news-post .news-post__body img {
  max-width: 100%;
  height: auto;
}
.page-news-post .news-post__attachments {
  /* max-width: 1200px; */
  margin: max(2.5rem, var(--vw-40)) auto 0;
  padding-top: max(1.875rem, var(--vw-30));
  border-top: 1px solid #e1e7eb;
}
.page-news-post .news-post__attachments-title {
  margin: 0 0 max(1rem, var(--vw-16));
  color: #131313;
  font-size: max(1rem, var(--font-18));
  font-weight: 700;
  line-height: 1.4;
}
.page-news-post .news-post__file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: max(0.625rem, var(--vw-10));
}
.page-news-post .news-post__file-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #154670;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-news-post .news-post__file-link:hover {
  color: #008cff;
}
.page-news-post .news-post__actions {
  display: flex;
  justify-content: center;
  margin-top: max(3.125rem, var(--vw-100));
}
.page-news-post .news-post__list-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 48px;
  padding: 12px 32px;
  border: 1px solid #154670;
  border-radius: 4px;
  background: #fff;
  color: #154670;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.page-news-post .news-post__list-btn:hover {
  background: #154670;
  color: #fff;
}
.page-news-post .news-post__nav {
  margin-top: max(2.5rem, var(--vw-40));
  border-top: 1px solid #131313;
  border-bottom: 1px solid #e1e7eb;
}
.page-news-post .news-post__nav-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: max(1rem, var(--vw-16));
  align-items: start;
  padding: max(1.25rem, var(--vw-20)) 0;
}
.page-news-post .news-post__nav-row + .news-post__nav-row {
  border-top: 1px solid #e1e7eb;
}
.page-news-post .news-post__nav-label {
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.5;
}
.page-news-post .news-post__nav-title {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  word-break: keep-all;
}
.page-news-post .news-post__nav-title a {
  color: inherit;
  text-decoration: none;
}
.page-news-post .news-post__nav-title a:hover {
  color: #154670;
  text-decoration: underline;
}
.page-news-post .news-post__nav-date {
  margin: 4px 0 0;
  color: #959da4;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.4;
}
.page-news-post .news-post__nav-empty {
  margin: 0;
  color: #959da4;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
}
.page-news-post .insight-breadcrumb__current {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

@media (max-width: 768px) {
  .page-news-post .news-post__head {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }
  .page-news-post .news-post__title {
    font-size: 1.375rem;
  }
  .page-news-post .news-post__nav-row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }
}

/* ============================================================
   기업개요 히어로 — Figma WEB-038 (11825:6693 / 6694)
   ============================================================ */
/* 회사목표 앵커 — 슬로건(히어로)부터 시작 */
#contents.page-about-overview {
  margin-top: 0;
}

.page-about-overview .about-overview-goal {
  scroll-margin-top: 0;
}

.page-about-overview .about-hero {
  position: relative;
  isolation: isolate;
  /* Figma 11825:6694 — fixed 헤더 밴드 + 이미지 860px @1920 */
  --about-hero-header: max(3.75rem, var(--header-height));
  --about-hero-image-h: max(32rem, 44.79167vw);
  min-height: calc(var(--about-hero-header) + var(--about-hero-image-h));
  height: calc(var(--about-hero-header) + var(--about-hero-image-h));
  overflow: visible;
  color: #fff;
  background: #10181f;
}
.page-about-overview .about-hero__media {
  position: absolute;
  top: var(--about-hero-header);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
}
.page-about-overview .about-hero__bg-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-about-overview .about-hero__solid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: #10181f;
  pointer-events: none;
  will-change: opacity;
}
.page-about-overview .about-hero__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: none;
  will-change: opacity, transform;
  transform: scale(1.12);
}
.page-about-overview .about-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.page-about-overview .about-hero__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  will-change: opacity;
  background:
    linear-gradient(90deg, rgba(16, 24, 31, 0.62) 0%, rgba(16, 24, 31, 0.34) 48%, rgba(16, 24, 31, 0.22) 100%),
    linear-gradient(180deg, rgba(16, 24, 31, 0.42) 0%, rgba(16, 24, 31, 0.18) 42%, rgba(16, 24, 31, 0.52) 100%);
  pointer-events: none;
}
.page-about-overview .about-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  min-height: inherit;
  /* Figma 9843:6930 — 헤더 80 + 카피 y=180 → 이미지 상단에서 100 */
  padding-top: calc(var(--about-hero-header) + max(6.25rem, var(--vw-100)));
  padding-bottom: max(2.5rem, var(--vw-40));
}
.page-about-overview .about-hero__breadcrumb {
  position: absolute;
  top: calc(var(--about-hero-header) + 14px);
  right: 0;
  left: auto;
  display: flex;
  justify-content: flex-end;
  width: auto;
  align-self: start;
}
.page-about-overview .about-hero__crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about-overview .about-hero__crumb-item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-about-overview .about-hero__crumb-home,
.page-about-overview .about-hero__crumb-link,
.page-about-overview .about-hero__crumb-text,
.page-about-overview .about-hero__crumb-current {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #fff;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
  border-radius: 4px;
}
.page-about-overview .about-hero__crumb-home {
  border-radius: 4px;
}
.page-about-overview .about-hero__crumb-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  line-height: 0;
}
.page-about-overview .about-hero__crumb-home-label {
  padding: 6px 2px 7px;
  line-height: 1.5;
  white-space: nowrap;
}
.page-about-overview .about-hero__crumb-link,
.page-about-overview .about-hero__crumb-text,
.page-about-overview .about-hero__crumb-current {
  padding: 6px 6px 7px;
  white-space: nowrap;
}
.page-about-overview .about-hero__crumb-home:hover,
.page-about-overview .about-hero__crumb-link:hover {
  text-decoration: underline;
}
.page-about-overview .about-hero__crumb-home-icon,
.page-about-overview .about-hero__crumb-sep img {
  display: block;
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(1);
  opacity: 1;
}
.page-about-overview .about-hero__crumb-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 0;
}
.page-about-overview .about-hero__crumb-sep img {
  flex-shrink: 0;
}

.page-about-overview .about-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 30rem; /* 480 @ Figma 1440 */
  margin: 0 auto;
}
.page-about-overview .about-hero__line,
.page-about-overview .about-hero__desc {
  margin: 0;
  color: #fff;
  opacity: 0;
  transform: translateY(72px);
  filter: none;
  will-change: transform, opacity;
}
.page-about-overview .about-hero__line {
  font-family: var(--font-en);
  font-size: clamp(2rem, 4.167vw, var(--font-60));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
}
.page-about-overview .about-hero__line + .about-hero__line {
  margin-top: max(1rem, var(--vw-16));
}
.page-about-overview .about-hero__we {
  font-weight: 300;
}
.page-about-overview .about-hero__desc {
  margin-top: max(2.5rem, var(--vw-40));
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  color: #fff;
}

/* Vision & Mission — Figma 9853:1697 */
.page-about-overview .about-mission {
  padding: max(5rem, var(--vw-140)) 0;
  background: #fff;
  scroll-margin-top: var(--header-height);
}
.page-about-overview .about-mission__eyebrow {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 0 max(2.5rem, var(--vw-40));
  padding: 8px 10px;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  color: #252a2e;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 500;
  line-height: normal;
}
.page-about-overview .about-mission__eyebrow-icon {
  display: block;
  width: 12px;
  height: 12px;
}
.page-about-overview .about-mission__stack {
  display: flex;
  flex-direction: column;
  gap: max(5rem, var(--vw-140));
}
.page-about-overview .about-mission__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: max(2.5rem, var(--vw-60));
}
.page-about-overview .about-mission__side {
  flex: 0 0 auto;
  max-width: 28rem;
}
.page-about-overview .about-mission__title {
  font-family: var(--font-en);
  margin: 0;
  color: #131313;
  font-size: clamp(1.5rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.333; /* 36/48 */
}
.page-about-overview .about-mission__title--center {
  text-align: center;
}
.page-about-overview .about-mission__subtitle {
  margin: 0;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.75; /* 16/28 */
}
.page-about-overview .about-mission__subtitle--center {
  text-align: center;
}
.page-about-overview .about-mission__content {
  flex: 1 1 auto;
  max-width: 792px;
  display: flex;
  flex-direction: column;
  gap: max(1.875rem, var(--vw-30));
}
.page-about-overview .about-mission__headline {
  margin: 0;
  color: #131313;
  font-size: clamp(1.5rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.333;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
  word-break: keep-all;
}
.page-about-overview .about-mission__body {
  margin: 0;
  color: #5e5e5e;
  font-size: clamp(1rem, var(--font-20), 1.25rem);
  font-weight: 400;
  line-height: 1.8; /* 20/36 */
  word-break: keep-all;
}
.page-about-overview .about-mission__values {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(2.5rem, var(--vw-60));
  width: 100%;
}
.page-about-overview .about-mission__values-head {
  margin: 0;
  text-align: center;
}
.page-about-overview .about-mission__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: max(2.5rem, var(--vw-60));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-about-overview .about-mission__card {
  display: flex;
  flex-direction: column;
  gap: max(1.875rem, var(--vw-30));
  min-width: 0;
  padding: max(3.75rem, var(--vw-60)) max(1.875rem, var(--vw-30)) max(1.875rem, var(--vw-30));
  border-radius: 8px;
  background: #f2f4f5;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
}
.page-about-overview .about-mission__card-icon {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;
}
.page-about-overview .about-mission__card-icon-img {
  display: block;
  width: auto;
  height: 60px;
  object-fit: contain;
}
.page-about-overview .about-mission__card-icon-img--calibrate {
  width: 60px;
  opacity: 0.8;
}
.page-about-overview .about-mission__card-icon-img--spin {
  transform-origin: center center;
  animation: about-mission-icon-spin 2s linear infinite;
}
@keyframes about-mission-icon-spin {
  0% {
    transform: rotate(-360deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  42.208% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-about-overview .about-mission__card-icon-img--spin {
    animation: none;
  }
}
.page-about-overview .about-mission__card-body {
  display: flex;
  flex-direction: column;
  gap: max(1.875rem, var(--vw-30));
  padding: 0;
}
.page-about-overview .about-mission__card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.page-about-overview .about-mission__card-title {
  font-family: var(--font-en);
  margin: 0;
  color: #154670;
  font-size: clamp(1.25rem, var(--font-28), 1.75rem);
  font-weight: 700;
  line-height: 1.429; /* 28/40 */
}
.page-about-overview .about-mission__card-lead {
  margin: 0;
  color: #154670;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-overview .about-mission__card-text {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}

/* CEO Greetings — Figma 9853:1694 / 서명 9853:1342 */
.page-about-overview .about-ceo {
  scroll-margin-top: var(--header-height);
  background: linear-gradient(180deg, #252a2e 50%, #131313 100%);
  padding: max(5rem, var(--vw-140)) 0;
}
/* Figma EyebrowSmallP — 좌측 정렬 · width fit-content (센터 정렬 금지) */
.page-about-overview .about-ceo__eyebrow {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 max(2rem, var(--vw-40));
  padding: 8px 10px;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  color: #252a2e;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 500;
  line-height: 1;
  box-sizing: border-box;
}
.page-about-overview .about-ceo__eyebrow-icon {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}
.page-about-overview .about-ceo__stack {
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-60));
  width: 100%;
}
.page-about-overview .about-ceo__intro {
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-60));
  width: 100%;
}
.page-about-overview .about-ceo__lead {
  margin: 0;
  color: #f2f4f5;
  font-size: clamp(1.5rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.444; /* 52 / 36 */
  word-break: keep-all;
}
.page-about-overview .about-ceo__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 1320 / 740;
  overflow: hidden;
  background: #131313;
}
.page-about-overview .about-ceo__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about-overview .about-ceo__columns {
  display: flex;
  align-items: flex-start;
  gap: max(3.5rem, var(--vw-140, 7.2917vw));
  width: 100%;
}
.page-about-overview .about-ceo__welcome {
  flex: 0 0 24.3125rem; /* 389 */
  width: 24.3125rem;
  max-width: 24.3125rem;
  margin: 0;
  color: #f2f4f5;
  font-size: clamp(1.25rem, var(--font-28), 1.75rem);
  font-weight: 700;
  line-height: 1.571; /* 44 / 28 */
  word-break: keep-all;
}
.page-about-overview .about-ceo__copy {
  flex: 1 1 44.625rem; /* 714 */
  max-width: 44.625rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
}
.page-about-overview .about-ceo__body {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  width: 100%;
}
.page-about-overview .about-ceo__prose p {
  margin: 0;
  color: #e1e7eb;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75; /* 28 / 16 */
  word-break: keep-all;
}
.page-about-overview .about-ceo__quote {
  font-family: var(--font-en);
  margin: 0;
  color: #00b894;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 1.6; /* 32 / 20 */
}
.page-about-overview .about-ceo__mark {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}
.page-about-overview .about-ceo__thanks {
  margin: 0;
  color: #e1e7eb;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.75;
}
/* Figma: AGChoiJeongHo Screen Regular 20 / 32 — 웹은 Nanum Myeongjo 폴백 */
.page-about-overview .about-ceo__sign {
  margin: 0;
  width: 100%;
  color: #e1e7eb;
  font-family: 'AGChoiJeongHo Screen', 'AG ChoiJeongHo Screen', 'Nanum Myeongjo', 'Batang', 'Apple Myungjo', serif;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  font-style: normal;
  line-height: 1.6; /* 32 / 20 */
  text-align: right;
  word-break: keep-all;
}

/* History — Figma 9853:1700 · 4개 성장 테마 타임라인 */
.page-about-overview .about-history {
  position: relative;
  overflow: visible; /* sticky 연대 제목 유지 — overflow:hidden 금지 */
  scroll-margin-top: var(--header-height);
  background: linear-gradient(180deg, #f2f4f5 0%, #e1e7eb 100%);
  padding: max(5rem, var(--vw-140)) 0;
}
.page-about-overview .about-history__eyebrow {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 max(2rem, var(--vw-40));
  padding: 8px 10px;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  color: #252a2e;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 500;
  line-height: 1;
  box-sizing: border-box;
}
.page-about-overview .about-history__eyebrow-icon {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}
.page-about-overview .about-history__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-60));
  width: 100%;
}
.page-about-overview .about-history__rail {
  position: absolute;
  z-index: 0;
  width: 1px;
  pointer-events: none;
  visibility: hidden;
}
.page-about-overview .about-history__rail.is-ready {
  visibility: visible;
}
.page-about-overview .about-history__rail-bg,
.page-about-overview .about-history__rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-radius: 1px;
}
.page-about-overview .about-history__rail-bg {
  height: 100%;
  background: #e1e7eb;
}
.page-about-overview .about-history__rail-fill {
  height: 0;
  background: #154670;
  transition: height 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .page-about-overview .about-history__rail-fill {
    transition: none;
  }
}
.page-about-overview .about-history__divider {
  margin: 0;
  border: 0;
  height: 1px;
  background: #e1e7eb;
}
.page-about-overview .about-history__era {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
.page-about-overview .about-history__era-head {
  flex: 0 0 max(15.125rem, var(--vw-530));
  width: max(15.125rem, var(--vw-530));
  max-width: 33.125rem; /* 530 @1440 본문 열 */
}
.page-about-overview .about-history__era-period {
  margin: 0;
  color: #131313;
  font-size: clamp(2rem, var(--font-48), 3rem);
  font-weight: 700;
  line-height: 1.25;
  word-break: keep-all;
}
.page-about-overview .about-history__era-theme {
  margin: max(0.5rem, var(--vw-10)) 0 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.6;
  word-break: keep-all;
}
.page-about-overview .about-history__era-body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 49.375rem;
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-30));
}
.page-about-overview .about-history__era-intro {
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 1.6;
  word-break: keep-all;
}
.page-about-overview .about-history__figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 790 / 315;
  overflow: hidden;
  background: #e1e7eb;
}
.page-about-overview .about-history__figure-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about-overview .about-history__years {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-30));
}
.page-about-overview .about-history__year {
  display: flex;
  align-items: flex-start;
  gap: max(1.25rem, var(--vw-30));
}
.page-about-overview .about-history__year-label {
  flex: 0 0 auto;
  min-width: 5.5rem;
  margin: 0;
  color: #131313;
  font-size: max(1.125rem, var(--font-24));
  font-weight: 700;
  line-height: 1.583;
  word-break: keep-all;
}
.page-about-overview .about-history__items {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: max(0.5rem, var(--vw-10));
}
.page-about-overview .about-history__item {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.page-about-overview .about-history__dot-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: content-box;
}
.page-about-overview .about-history__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #154670;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.page-about-overview .about-history__year.is-reached .about-history__dot {
  opacity: 1;
}
.page-about-overview .about-history__year.is-current .about-history__dot {
  opacity: 1;
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(21, 70, 112, 0.18);
}
.page-about-overview .about-history__item-text {
  margin: 0;
  padding: 10px 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}
@media (min-width: 1025px) {
  .page-about-overview .about-history__era-head {
    position: sticky;
    top: calc(var(--header-height) + max(1.5rem, var(--vw-30)));
    align-self: flex-start;
  }
}

@media (max-width: 1024px) {
  .page-about-overview .about-mission__row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .page-about-overview .about-mission__content {
    max-width: none;
  }
  .page-about-overview .about-mission__cards {
    grid-template-columns: 1fr;
  }
  .page-about-overview .about-ceo__columns {
    flex-direction: column;
    gap: 2rem;
  }
  .page-about-overview .about-ceo__welcome {
    flex-basis: auto;
    width: auto;
    max-width: none;
  }
  .page-about-overview .about-ceo__copy {
    max-width: none;
  }
  .page-about-overview .about-history__era {
    flex-direction: column;
    gap: 1.5rem;
  }
  .page-about-overview .about-history__era-head {
    position: static;
    flex-basis: auto;
    width: auto;
    max-width: none;
  }
  .page-about-overview .about-history__era-body {
    max-width: none;
  }
}

/* CI / BI — Figma 9890:2917 */
.page-about-overview .about-ci {
  background: #fff;
  scroll-margin-top: var(--header-height);
  padding: max(5rem, var(--vw-140)) 0;
}
.page-about-overview .about-ci > .container {
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-60));
}
.page-about-overview .about-ci__intro {
  display: flex;
  flex-direction: column;
  gap: max(2rem, var(--vw-40));
  max-width: 44.125rem; /* 706 */
}
.page-about-overview .about-ci__eyebrow {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  color: #252a2e;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 500;
  line-height: 1;
  box-sizing: border-box;
}
.page-about-overview .about-ci__eyebrow-icon {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}
.page-about-overview .about-ci__header {
  display: flex;
  flex-direction: column;
  gap: max(0.625rem, var(--vw-10));
  margin: 0;
}
.page-about-overview .about-ci__title {
  margin: 0;
  color: #131313;
  font-size: clamp(1.75rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.333; /* 48 / 36 */
  word-break: keep-all;
}
.page-about-overview .about-ci__subtitle {
  margin: 0;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-overview .about-ci__cards {
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-60));
}
.page-about-overview .about-ci-card {
  background: #fff;
  border: 1px solid #959da4;
  border-radius: 8px;
  padding: max(3.75rem, var(--vw-60)) max(2.5rem, var(--vw-40));
  box-sizing: border-box;
}
.page-about-overview .about-ci-card__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(2.5rem, var(--vw-60));
}
.page-about-overview .about-ci-card__left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-60));
}
.page-about-overview .about-ci-card__block {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-30));
}
.page-about-overview .about-ci-card__step {
  display: flex;
  align-items: center;
  gap: max(0.625rem, var(--vw-10));
  margin: 0;
}
.page-about-overview .about-ci-card__step-num,
.page-about-overview .about-ci-card__step-title {
  font-family: var(--font-en);
  margin: 0;
  color: #154670;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 1.8; /* 36 / 20 */
  word-break: keep-all;
}
.page-about-overview .about-ci-card__lead {
  margin: 0;
  color: #131313;
  font-size: max(1.25rem, var(--font-24));
  font-weight: 700;
  line-height: 1.583; /* 38 / 24 */
  word-break: keep-all;
}
.page-about-overview .about-ci-card__section {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: max(0.625rem, var(--vw-10));
}
.page-about-overview .about-ci-card__section-title {
  margin: 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-overview .about-ci-card__section-text {
  margin: 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-overview .about-ci-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(0.625rem, var(--vw-10));
  width: fit-content;
  background: #154670;
  padding: 13px max(1.25rem, var(--vw-20));
  border-radius: 8px;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-sizing: border-box;
}
.page-about-overview .about-ci-download:hover,
.page-about-overview .about-ci-download:focus-visible {
  color: #fff;
  background: #123d5c;
}
.page-about-overview .about-ci-card__right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: max(0.625rem, var(--vw-10));
}
.page-about-overview .about-ci-symbol {
  background: #fff;
  border: 1px solid #e1e7eb;
  padding: max(2.5rem, var(--vw-40));
}
.page-about-overview .about-ci-symbol__img {
  display: block;
  width: min(301px, 100%);
  height: 60px;
  object-fit: contain;
}
.page-about-overview .about-ci-symbol__label {
  font-family: var(--font-en);
  margin: 0;
  color: #000;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 700;
  line-height: 2; /* 28 / 14 */
  word-break: keep-all;
}

/* Core Value — Figma 9853:1952 */
.page-about-overview .about-ci-card__inner--core {
  flex-direction: column;
  align-items: stretch;
  gap: max(2.5rem, var(--vw-60));
}
.page-about-overview .about-ci-core-items {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  min-width: 0;
}
.page-about-overview .about-ci-core-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(1.25rem, var(--vw-30));
  padding: 0 max(0.75rem, var(--vw-16));
  min-width: 0;
  box-sizing: border-box;
}
.page-about-overview .about-ci-core-item__icon {
  background: #f2f4f5;
  border-radius: 500px;
  padding: max(2.5rem, var(--vw-40));
  width: max(8.75rem, var(--vw-140));
  height: max(8.75rem, var(--vw-140));
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.page-about-overview .about-ci-core-item__icon img {
  display: block;
  width: 48px;
  height: 48px;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.8;
}
.page-about-overview .about-ci-core-item__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(0.625rem, var(--vw-10));
  text-align: center;
}
.page-about-overview .about-ci-core-item__title {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.75;
  word-break: keep-all;
  text-align: center;
}
.page-about-overview .about-ci-core-item__text {
  margin: 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
  text-align: center;
}

/* Brand Color — Figma 9853:2038 */
.page-about-overview .about-ci-card__inner--color {
  align-items: center;
  justify-content: space-between;
  gap: max(2.5rem, var(--vw-60));
}
.page-about-overview .about-ci-color-desc {
  display: flex;
  flex-direction: column;
  gap: max(0.625rem, var(--vw-10));
  color: #394147;
}
.page-about-overview .about-ci-color-desc__title {
  margin: 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-overview .about-ci-color-desc__text {
  margin: 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-overview .about-ci-colors {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: max(1.875rem, var(--vw-30));
}
.page-about-overview .about-ci-color-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(0.625rem, var(--vw-10));
}
.page-about-overview .about-ci-color {
  width: max(18.75rem, var(--vw-400));
  max-width: 100%;
  height: max(7.5rem, var(--vw-140));
  border-radius: 8px;
  padding: max(1.25rem, var(--vw-30));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}
.page-about-overview .about-ci-color--main {
  background: #154670;
}
.page-about-overview .about-ci-color--sub {
  background: #00b894;
}
.page-about-overview .about-ci-color__name {
  font-family: var(--font-en);
  margin: 0;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-overview .about-ci-color__label {
  font-family: var(--font-en);
  margin: 0;
  color: #5e5e5e;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 700;
  line-height: 2; /* 28 / 14 */
  text-transform: uppercase;
  word-break: keep-all;
}

/* Careers — Figma 9867:2226 */
.page-about-overview .about-careers {
  background: #fff;
  scroll-margin-top: var(--header-height);
  display: flex;
  flex-direction: column;
  gap: max(5rem, var(--vw-140));
  padding-top: max(5rem, var(--vw-140));
  padding-bottom: 0;
  margin-bottom: 0;
}

.page-about-overview .about-careers__info {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

.page-about-overview .about-careers__head {
  flex: 0 0 max(15.125rem, var(--vw-530));
  width: max(15.125rem, var(--vw-530));
  max-width: 33.125rem; /* 530 @1440 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(1.75rem, var(--vw-40));
}

.page-about-overview .about-careers__eyebrow {
  margin-bottom: 0;
  width: fit-content;
}

.page-about-overview .about-careers__head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(1.875rem, var(--vw-30));
}

.page-about-overview .about-careers__title {
  margin: 0;
  color: #131313;
  font-size: clamp(1.75rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.33; /* 48px @ 36px — Figma 9853:2112 */
  word-break: keep-all;
}

.page-about-overview .about-careers__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(0.625rem, var(--vw-10));
  padding: 13px max(1.25rem, var(--vw-20));
  border-radius: 8px;
  background: #154670;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  transform: translateY(0);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease;
}

.page-about-overview .about-careers__cta:hover,
.page-about-overview .about-careers__cta:focus-visible {
  color: #fff;
  background: #123d5c;
  transform: translateY(2px);
}

.page-about-overview .about-careers__cta img {
  display: block;
  width: 15px;
  height: 10px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-about-overview .about-careers__cta:hover img,
.page-about-overview .about-careers__cta:focus-visible img {
  transform: translateX(3px);
}

.page-about-overview .about-careers__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-60));
  max-width: 49.375rem; /* 790 */
  padding-top: max(4.5rem, var(--vw-70)); /* 아이브로우 32 + gap 40 */
  min-width: 0;
}

.page-about-overview .about-careers__lead {
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.6; /* 32px @ 20px — Figma 9853:2113 */
  word-break: keep-all;
}

.page-about-overview .about-careers__details {
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-60));
}

.page-about-overview .about-careers__detail {
  display: flex;
  flex-direction: column;
  gap: max(0.625rem, var(--vw-10));
}

.page-about-overview .about-careers__detail-title {
  display: flex;
  align-items: center;
  gap: max(0.625rem, var(--vw-10));
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 1.6; /* 32px @ 20px — Figma 9867:2121 */
  word-break: keep-all;
}

.page-about-overview .about-careers__detail-icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 20px;
}

.page-about-overview .about-careers__detail-icon--process {
  width: 18px;
  height: 18px;
}

.page-about-overview .about-careers__detail-text {
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.6; /* 32px @ 20px — Figma 9867:2122 */
  word-break: keep-all;
}

.page-about-overview .about-careers__rule {
  display: block;
  margin: 0;
  width: 100%;
  height: 1px;
  border: 0;
  background: #e1e7eb;
}

.page-about-overview .about-careers__banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: max(12.5rem, var(--vw-340)); /* 340 — Figma 9867:2162 */
  height: max(12.5rem, var(--vw-340));
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.page-about-overview .about-careers__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.page-about-overview .about-careers__banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  height: 100%;
}

.page-about-overview .about-careers__banner-copy {
  display: flex;
  flex-direction: column;
  gap: max(1.875rem, var(--vw-30));
  max-width: 24.75rem; /* 396 — Figma 9867:2161 */
  color: #fff;
}

.page-about-overview .about-careers__banner-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  margin: 0;
  color: #e1e7eb;
  font-size: clamp(1.75rem, var(--font-36), 2.25rem);
  font-weight: 400;
  line-height: 1.33; /* 48px @ 36px — Figma 9867:2159 */
  text-transform: uppercase;
  word-break: keep-all;
}

.page-about-overview .about-careers__banner-text {
  margin: 0;
  color: #fff;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.6; /* 32px @ 20px — Figma 9867:2160 */
  word-break: keep-all;
}

@media (max-width: 768px) {
  .page-about-overview .about-hero {
    --about-hero-image-h: max(28rem, 70svh);
    min-height: calc(var(--about-hero-header) + var(--about-hero-image-h));
    height: calc(var(--about-hero-header) + var(--about-hero-image-h));
  }
  .page-about-overview .about-hero__inner {
    align-items: flex-start;
    padding-top: calc(var(--about-hero-header) + 3rem);
    padding-bottom: 2.5rem;
  }
  .page-about-overview .about-hero__breadcrumb {
    position: relative;
    top: auto;
    right: auto;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .page-about-overview .about-hero__copy {
    max-width: none;
    margin: 0;
  }
  .page-about-overview .about-hero__line {
    font-size: 1.75rem;
  }
  .page-about-overview .about-hero__line + .about-hero__line {
    margin-top: 0.5rem;
  }
  .page-about-overview .about-hero__desc {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
  }
  .page-about-overview .about-mission {
    padding: 4rem 0 5rem;
  }
  .page-about-overview .about-mission__stack {
    gap: 4rem;
  }
  .page-about-overview .about-mission__headline {
    font-size: 1.5rem;
  }
  .page-about-overview .about-mission__body {
    font-size: 1rem;
  }
  .page-about-overview .about-ceo {
    padding: 4rem 0;
  }
  .page-about-overview .about-ceo__stack {
    gap: 2.5rem;
  }
  .page-about-overview .about-ceo__intro {
    gap: 2rem;
  }
  .page-about-overview .about-ceo__lead {
    font-size: 1.375rem;
  }
  .page-about-overview .about-ceo__welcome {
    font-size: 1.25rem;
  }
  .page-about-overview .about-history {
    padding: 4rem 0;
  }
  .page-about-overview .about-history__track {
    gap: 2.5rem;
  }
  .page-about-overview .about-history__era-period {
    font-size: 1.75rem;
  }
  .page-about-overview .about-history__year {
    flex-direction: column;
    gap: 0.5rem;
  }
  .page-about-overview .about-history__dot-wrap {
    padding: 8px 12px 8px 0;
  }
  .page-about-overview .about-ci {
    padding: 4rem 0;
  }
  .page-about-overview .about-ci-card {
    padding: 2.5rem 1.25rem;
  }
  .page-about-overview .about-ci-card__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .page-about-overview .about-ci-core-items {
    flex-wrap: wrap;
    gap: 2rem 1rem;
  }
  .page-about-overview .about-ci-core-item {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
  .page-about-overview .about-ci-colors {
    width: 100%;
  }
  .page-about-overview .about-ci-color {
    width: 100%;
    height: auto;
    min-height: 7.5rem;
  }
  .page-about-overview .about-careers {
    gap: 3rem;
    padding-top: 4rem;
    padding-bottom: 0;
  }
  .page-about-overview .about-careers__info {
    flex-direction: column;
    gap: 2.5rem;
  }
  .page-about-overview .about-careers__head {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
  .page-about-overview .about-careers__body {
    max-width: none;
    padding-top: 0;
  }
  .page-about-overview .about-careers__banner {
    min-height: 240px;
    height: auto;
    padding: 2.5rem 0;
  }
  .page-about-overview .about-careers__banner-copy {
    max-width: none;
  }
  .page-about-overview .about-careers__banner-title {
    font-size: 1.75rem;
  }
  .page-about-overview .about-careers__banner-text {
    font-size: 1rem;
  }
}



/* /etc/* 법적 안내 (이용약관·개인정보·이메일 무단수집거부) */
.page-etc .section-page.basic-section {
  padding-bottom: max(7.5rem, var(--vw-200)); /* 마지막 섹션 ↔ footer */
}
.page-etc .privacy-wrap .privacy-box[id] {
  scroll-margin-top: max(5rem, calc(var(--header-height, 80px) + 1.5rem));
}
.page-etc .privacy-wrap .privacy-box.summary a[href^="#"] {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-etc .privacy-wrap .privacy-box h2.privacy-title {
  margin: 0 0 max(1.25rem, var(--vw-30));
}

/* /etc/email — 안내 박스·법령 인용·조항 간격 */
.page-etc-email .privacy-box.is-flush-top {
  padding-bottom: max(1.25rem, var(--vw-30));
}
.page-etc-email .privacy-box .info-box.is-spaced {
  margin: 0 0 max(1.875rem, var(--vw-40));
}
.page-etc-email .privacy-box.is-flush-top > p:not(.info-box) {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.6;
}
.page-etc-email .privacy-box#email-law {
  padding-top: max(2.5rem, var(--vw-60));
}
.page-etc-email .privacy-box#email-law .privacy-listbox {
  margin-top: 0;
}

@media (max-width: 767px) {
  .page-etc .section-page.basic-section {
    padding-bottom: 80px;
  }
  .page-etc-email .privacy-box .info-box.is-spaced {
    margin-bottom: 24px;
  }
  .page-etc-email .privacy-box#email-law {
    padding-top: 40px;
  }
  .page-etc .privacy-wrap .privacy-box h2.privacy-title {
    margin-bottom: 16px;
  }
}

/* ============================================================
   제품 카테고리 목록 — Figma WEB-028 (9803:489)
   ============================================================ */
#contents.page-products-category--has-intro {
  /* margin-top: 0; */
}
#contents.page-products-category--has-intro .prd-list-start {
  scroll-margin-top: max(3.75rem, var(--header-height));
}
.page-products-category .prd-intro {
  margin-bottom: max(7.5rem, var(--vw-200)); /* intro ↔ breadcrumb 200 */
}
.page-products-category--has-intro .prd-intro {
  padding-top: 0;
}
.page-products-category .prd-intro__label {
  margin: 0;
  color: #131313;
  font-size: max(1.25rem, var(--font-24));
  font-weight: 400;
  line-height: 1.2;
}
.page-products-category .prd-intro__builder {
  width: 100%;
}
.page-products-category .prd-intro__builder .editorjs-content--sections {
  width: 100%;
}
.page-products-category .prd-intro__builder .editorjs-content--sections > .seoji-section:first-child {
  margin-top: 0;
}
/* 컨텐츠 폭 첫 섹션 — 고정 헤더 아래 여백 */
.page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .seoji-section--content:first-child {
  padding-top: max(3.75rem, var(--header-height));
}
/* 풀와이드 히어로 — 메인 .hero 와 동일(카피 padding으로 GNB 여백 확보) */
.page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .seoji-section--wide:first-child .seoji-hero--wide,
.page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .seoji-section--wide:first-child .seoji-hero {
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
}
/* 카테고리 히어로 카피 — 메인 .hero__content 좌측 정렬 */
.page-products-category--has-intro .prd-intro__builder .seoji-hero--wide .seoji-hero__copy-inner {
  text-align: left;
}
.page-products-category--builder-preview.page-products-category--has-intro .prd-intro {
  margin-bottom: max(7.5rem, var(--vw-200));
}
.page-products-category--builder-preview .page-builder-preview-bar {
  position: fixed;
  top: max(3.75rem, var(--header-height));
  left: 0;
  right: 0;
  z-index: 90;
  margin: 0;
}
.page-products-category .prd-intro__wide,
.page-products-category .prd-intro__block {
  background: #d9d9d9;
}
.page-products-category .prd-intro__wide {
  width: 100%;
  height: 320px;
  margin-top: max(2.5rem, var(--vw-60));
}
.page-products-category .prd-intro__pair,
.page-products-category .prd-intro__quad {
  display: flex;
  margin-top: max(2.5rem, var(--vw-60));
}
.page-products-category .prd-intro__pair {
  gap: max(1.875rem, var(--vw-40));
}
.page-products-category .prd-intro__quad {
  gap: max(2.5rem, var(--vw-60));
}
.page-products-category .prd-intro__pair .prd-intro__block {
  flex: 1 1 0;
  min-width: 0;
  height: 320px;
}
.page-products-category .prd-intro__quad .prd-intro__block {
  flex: 1 1 0;
  min-width: 0;
  height: 320px;
}

.page-products-category .prd-breadcrumb .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-products-category .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-products-category .insight-breadcrumb__home,
.page-products-category .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
}
.page-products-category .insight-breadcrumb__link {
  padding: 6px;
}
.page-products-category .insight-breadcrumb__home:hover,
.page-products-category .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-products-category .insight-breadcrumb__home:focus-visible,
.page-products-category .insight-breadcrumb__link:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.page-products-category .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
}
.page-products-category .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.page-products-category .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-products-category .insight-breadcrumb__home-text,
.page-products-category .insight-breadcrumb__text,
.page-products-category .insight-breadcrumb__current,
.page-products-category .insight-breadcrumb__link {
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  font-weight: 400;
}
.page-products-category .insight-breadcrumb__home-text {
  color: #154670;
}
.page-products-category .insight-breadcrumb__current,
.page-products-category .insight-breadcrumb__text {
  color: #394147;
  padding: 6px;
}
.page-products-category .prd-board {
  padding-bottom: max(7.5rem, var(--vw-200)); /* 마지막 섹션 ↔ footer 200 */
}
.page-products-category .prd-board__title {
  margin: 0 0 max(3.125rem, var(--vw-100)); /* title ↔ listing 100 */
  color: #131313;
  font-size: clamp(1.75rem, var(--font-48), 3rem);
  font-weight: 700;
  line-height: 1.2;
}
.page-products-category .prd-board__layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  column-gap: 88px; /* Figma 272 + 88 + 960 = 1320 */
  align-items: start;
  margin-top: max(3.125rem, var(--vw-100));
}

.page-products-category .prd-sidebar__group {
  margin: 0;
}
.page-products-category .prd-sidebar__group--extra {
  margin-top: 0;
  padding-top: 31px;
  border-top: 1px solid #959da4;
}
.page-products-category .prd-sidebar__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 272px;
  cursor: pointer;
  list-style: none;
}
.page-products-category .prd-sidebar__summary::-webkit-details-marker {
  display: none;
}
.page-products-category .prd-sidebar__heading {
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 30px;
}
.page-products-category .prd-sidebar__chevron {
  display: block;
  width: 8px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}
.page-products-category .prd-sidebar__group[open] > .prd-sidebar__summary .prd-sidebar__chevron {
  transform: rotate(90deg);
}
.page-products-category .prd-sidebar__chips {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0 30px;
  padding: 0;
  list-style: none;
  max-width: 272px;
}
.page-products-category .prd-chip {
  display: flex;
  align-items: center;
  min-height: 53px;
  padding: 17px;
  border: 1px solid #c8ced3;
  border-radius: 8px;
  background: #fff;
  color: #959da4;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.page-products-category .prd-chip--icon {
  gap: 5px;
}
.page-products-category .prd-chip__icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: cover;
  flex-shrink: 0;
  overflow: clip;
}
.page-products-category .prd-chip:hover {
  color: #131313;
  border-color: #131313;
}
.page-products-category .prd-chip.is-active {
  border-color: #131313;
  color: #131313;
  font-weight: 700;
}
.page-products-category .prd-sidebar__group--extra .prd-chip:not(.is-active) {
  color: #c8ced3;
}

.page-products-category .prd-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.page-products-category .prd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: max(1.875rem, var(--vw-30));
}
.page-products-category .prd-toolbar__count {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.page-products-category .prd-toolbar__num {
  color: #3a8ad1;
}
.page-products-category .prd-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-products-category .prd-toolbar__sort-label {
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.page-products-category .prd-toolbar__sort-list {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products-category .prd-toolbar__sort-link {
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.page-products-category .prd-toolbar__sort-link.is-active {
  color: #131313;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-products-category .prd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* 행 높이를 가장 큰 카드에 맞춤 (고정 px 없음) */
  align-items: stretch;
  gap: max(1.875rem, var(--vw-30));
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products-category .prd-grid__item {
  display: flex;
  min-width: 0;
}
.page-products-category .prd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;
  width: 100%;
  padding: 20px 24px;
  border: 1px solid #c8ced3;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.page-products-category .prd-card.is-featured,
.page-products-category .prd-card:hover {
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.08);
}
.page-products-category .prd-card__link {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.page-products-category .prd-card__thumb-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 250px;
  height: 250px;
  max-width: 100%;
  overflow: clip;
}
.page-products-category .prd-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-products-category .prd-card__event {
  position: absolute;
  top: 72px;
  right: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: #ffb020;
  color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.page-products-category .prd-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex-shrink: 0;
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 2px;
  background: #fff;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
.page-products-category .prd-card__tag--best {
  border: 1px solid #00b894;
  color: #00b894;
}
.page-products-category .prd-card__tag--new {
  border: 1px solid #ff5a4f;
  color: #ff5a4f;
}
.page-products-category .prd-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;
}
.page-products-category .prd-card__name {
  margin: 0;
  color: #131313;
  font-family: var(--font-en);
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.2;
  min-height: calc(1.2em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-products-category .prd-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-products-category .prd-card__model,
.page-products-category .prd-card__brand {
  margin: 0;
  color: #394147;
  font-family: var(--font-en);
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 400;
  line-height: 1.2;
}
.page-products-category .prd-list__empty {
  padding: max(3.125rem, var(--vw-100)) 0;
  text-align: center;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
}

.page-products-category .prd-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: max(1.875rem, var(--vw-30));
}
.page-products-category .prd-pager__page {
  font-family: var(--font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  text-decoration: none;
}
.page-products-category .prd-pager__page--nav {
  padding-left: 4px;
  padding-right: 8px;
}
.page-products-category .prd-pager__page--nav:last-child,
.page-products-category .prd-pager__page--nav.is-disabled:last-of-type {
  padding-left: 8px;
  padding-right: 4px;
}
.page-products-category .prd-pager__page img {
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  flex-shrink: 0;
}
.page-products-category .prd-pager__page.is-active {
  background: #154670;
  color: #fff;
}
.page-products-category .prd-pager__page.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.page-products-category .prd-pager__page:not(.is-disabled):hover {
  color: #131313;
}
.page-products-category .prd-pager__page.is-active:hover {
  color: #fff;
}

@media (max-width: 1199px) {
  .page-products-category .prd-board__layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
    margin-top: 32px;
  }
  .page-products-category .prd-sidebar__summary,
  .page-products-category .prd-sidebar__chips {
    max-width: none;
  }
  .page-products-category .prd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .page-products-category .prd-intro {
    margin-bottom: 48px;
  }
  .page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .seoji-section--content:first-child {
    padding-top: max(3.75rem, var(--header-height));
  }
  .page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .seoji-section--wide:first-child .seoji-hero {
    margin-top: 0;
    padding-top: 0;
  }
  .page-products-category .prd-intro__wide,
  .page-products-category .prd-intro__pair .prd-intro__block,
  .page-products-category .prd-intro__quad .prd-intro__block {
    height: 160px;
  }
  .page-products-category .prd-intro__pair,
  .page-products-category .prd-intro__quad {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
  }
  .page-products-category .prd-intro__pair .prd-intro__block {
    flex: 1 1 calc(50% - 6px);
  }
  .page-products-category .prd-intro__quad .prd-intro__block {
    flex: 1 1 calc(50% - 6px);
  }
  .page-products-category .prd-board__title {
    margin-bottom: 32px;
    font-size: max(1.5rem, var(--font-28));
  }
  .page-products-category .prd-board {
    padding-bottom: 80px;
  }
  .page-products-category .prd-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .page-products-category .prd-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .page-products-category .prd-card__thumb-wrap {
    flex-basis: auto;
    width: 100%;
    max-width: 250px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ========== 브랜드 상세 (products category 동일 레이아웃) ========== */
.page-brands-detail .brands-hero__title {
  white-space: normal;
  max-width: min(100%, 960px);
}
.page-brands-detail .brands-hero__subtitle--desc {
  white-space: normal;
  max-width: min(100%, 720px);
  line-height: 1.6;
}
.page-brands-detail .brands-hero--custom .brands-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 26, 58, 0.35) 0%, rgba(0, 26, 58, 0.55) 100%);
}
.page-brands-detail .brands-hero--custom .brands-hero__bg {
  position: absolute;
}
.page-brands-detail .brands-hero--custom .brands-hero__bg img {
  position: relative;
  z-index: 0;
}
.page-brands-detail .prd-sidebar__tree-item + .prd-sidebar__tree-item {
  margin-top: max(0.5rem, var(--vw-10));
}
.page-brands-detail .prd-sidebar__chips--nested {
  margin-top: max(0.5rem, var(--vw-10));
  padding-left: max(0.75rem, var(--vw-16));
  border-left: 1px solid rgba(21, 70, 112, 0.12);
}
.page-brands-detail .prd-chip--child {
  min-height: 40px;
  font-size: max(0.8125rem, var(--font-14));
}
@media (max-width: 767px) {
  .page-brands-detail .brands-hero__title {
    font-size: 28px;
    line-height: 36px;
  }
  .page-brands-detail .brands-hero__subtitle--desc {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ========== 제품 상세 WEB-028-detail (9952:962) ========== */
.page-product-view .pview-breadcrumb {
  margin: 0;
  padding-top: max(3.125rem, var(--vw-50)); /* 헤더 하단 ↔ 브레드크럼 50 — 상세만 (다른 서브는 140) */
  padding-bottom: 0;
}
.page-product-view .pview-breadcrumb .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-product-view .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-product-view .insight-breadcrumb__home,
.page-product-view .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
}
.page-product-view .insight-breadcrumb__link {
  padding: 6px;
}
.page-product-view .insight-breadcrumb__home:hover,
.page-product-view .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-product-view .insight-breadcrumb__home:focus-visible,
.page-product-view .insight-breadcrumb__link:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.page-product-view .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.page-product-view .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-product-view .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-product-view .insight-breadcrumb__home-text,
.page-product-view .insight-breadcrumb__text,
.page-product-view .insight-breadcrumb__current,
.page-product-view .insight-breadcrumb__link {
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
  font-weight: 400;
}
.page-product-view .insight-breadcrumb__home-text {
  color: #154670;
}
.page-product-view .insight-breadcrumb__current,
.page-product-view .insight-breadcrumb__text {
  color: #394147;
  padding: 6px;
}

.page-product-view .pview-hero {
  margin-bottom: max(4.375rem, var(--vw-120));
}
.page-product-view .pview-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 630px) minmax(0, 1fr);
  gap: max(1.875rem, var(--vw-60));
  align-items: start;
  justify-content: space-between;
}

.page-product-view .pview-gallery {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  min-width: 0;
}
.page-product-view .pview-gallery__stage {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #c8ced3;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.page-product-view .pview-gallery__main {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-product-view .pview-gallery__nav {
  display: flex;
  align-items: center;
  gap: max(1.25rem, var(--vw-20));
  width: 100%;
}
.page-product-view .pview-gallery__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.page-product-view .pview-gallery__arrow img {
  display: block;
  width: 30px;
  height: 30px;
}
.page-product-view .pview-gallery__arrow--next img {
  transform: rotate(180deg);
}
.page-product-view .pview-gallery__thumbs {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-product-view .pview-gallery__thumbs::-webkit-scrollbar {
  display: none;
}
.page-product-view .pview-gallery__thumb {
  display: block;
  flex: 0 0 auto;
  width: max(4.5rem, var(--vw-94));
  height: max(4.5rem, var(--vw-94));
  padding: 0;
  border: 1px solid #c8ced3;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.page-product-view .pview-gallery__thumb.is-active {
  border-color: #154670;
}
.page-product-view .pview-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-product-view .pview-summary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 100%;
  gap: max(1.875rem, var(--vw-40));
}
.page-product-view .pview-summary__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(1.25rem, var(--vw-20));
}
.page-product-view .pview-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 2px;
  background: #fff;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}
.page-product-view .pview-tag--best {
  border: 1px solid #00b894;
  color: #00b894;
}
.page-product-view .pview-tag--new {
  border: 1px solid #ff5a4f;
  color: #ff5a4f;
}
.page-product-view .pview-summary__title {
  margin: 0;
  color: #131313;
  font-family: var(--font-en);
  font-size: clamp(1.5rem, var(--font-28), 1.75rem);
  font-weight: 700;
  line-height: 1.57;
}
.page-product-view .pview-summary__title-line {
  display: block;
}
.page-product-view .pview-meta {
  margin: 0;
  width: 100%;
}
.page-product-view .pview-meta__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: max(1.25rem, var(--vw-20));
  align-items: start;
  margin: 0;
  padding: max(1.25rem, var(--vw-20)) 0;
  border-top: 1px solid #c8ced3;
}
.page-product-view .pview-meta__row dt {
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
}
.page-product-view .pview-meta__row dd {
  margin: 0;
  color: #394147;
  font-family: var(--font-en);
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
}
.page-product-view .pview-meta__row dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-product-view .pview-meta__row--docs {
  align-items: flex-start;
}

.page-product-view .pview-docs {
  display: flex;
  flex-wrap: wrap;
  gap: max(1.25rem, var(--vw-20));
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-product-view .pview-docs__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.page-product-view .pview-docs--hero .pview-docs__cover {
  width: 112px;
  height: 157px;
}
.page-product-view .pview-docs--section .pview-docs__cover {
  width: 160px;
  height: 224px;
}
.page-product-view .pview-docs__cover {
  display: block;
  border: 1px solid #c8ced3;
  overflow: hidden;
  background: #fff;
}
.page-product-view .pview-docs__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-product-view .pview-docs--hero .pview-docs__name {
  width: 112px;
  color: #394147;
  font-size: max(0.8125rem, var(--font-14));
  text-align: center;
  line-height: 1.3;
}
.page-product-view .pview-docs--section .pview-docs__name {
  width: 160px;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  text-align: center;
  line-height: 1.3;
}

.page-product-view .pview-cta {
  display: flex;
  gap: max(1.25rem, var(--vw-20));
  width: 100%;
}
.page-product-view .pview-cta--stack {
  flex-direction: column;
  gap: 10px;
}
.page-product-view .pview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: max(3.4375rem, var(--vw-55));
  padding: 16px;
  border-radius: 4px;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.125;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.page-product-view .pview-btn--ghost {
  border: 1px solid #154670;
  background: #fff;
  color: #154670;
}
.page-product-view .pview-btn--solid {
  border: 1px solid #154670;
  background: #154670;
  color: #fff;
}
.page-product-view .pview-cta--stack .pview-btn {
  width: 100%;
  flex: 0 0 auto;
}

.page-product-view .pview-body {
  margin-bottom: 0;
}
.page-product-view .pview-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: max(1.875rem, var(--vw-60));
  align-items: start;
}
.page-product-view {
  --pview-sticky-gap: max(1.25rem, var(--vw-20)); /* 스티키 시 헤더 ↔ 탭 20 */
  --pview-anchor-gap: max(2.5rem, var(--vw-40)); /* 탭 ↔ 섹션 제목 */
  --pview-tab-bar: 3rem;
}
.page-product-view .pview-split__main {
  min-width: 0;
}
.page-product-view .pview-tabs-sticky {
  position: sticky;
  top: var(--header-height);
  z-index: 2;
  padding-top: var(--pview-sticky-gap);
  margin-top: calc(-1 * var(--pview-sticky-gap));
  margin-bottom: max(2.5rem, var(--vw-40));
  background: #fff;
}
.page-product-view .pview-tabs {
  display: flex;
  align-items: stretch;
  margin: 0;
  background: #fff;
}
.page-product-view .pview-tabs__link {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-bottom: 3px solid #959da4;
  color: #959da4;
  font-family: var(--font-en);
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}
.page-product-view .pview-tabs__link.is-active {
  border-bottom-color: #154670;
  color: #154670;
  font-weight: 700;
}
.page-product-view .pview-info,
.page-product-view .pview-docs-block,
.page-product-view .pview-faq {
  /* 헤더 + 스티키 갭 + 탭 높이 + 제목 여백 — JS 스파이 기준과 동일 */
  scroll-margin-top: calc(var(--header-height) + var(--pview-sticky-gap) + var(--pview-tab-bar) + var(--pview-anchor-gap));
}
.page-product-view .pview-info {
  margin-bottom: max(5.5rem, var(--vw-140));
}
.page-product-view .pview-info__title {
  margin: 0 0 12px;
  color: #131313;
  font-size: max(1.125rem, var(--font-20));
  font-weight: 700;
  line-height: 1.3;
}
.page-product-view .pview-info__lead {
  margin: 0 0 max(1.25rem, var(--vw-20));
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.6;
}
.page-product-view .pview-info__figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 900 / 1611;
  overflow: hidden;
  background: #f2f4f5;
}
.page-product-view .pview-info__img {
  display: block;
  width: 100%;
  height: auto;
}

.page-product-view .pview-block-title {
  margin: 0 0 max(1.875rem, var(--vw-30));
  color: #131313;
  font-size: clamp(1.5rem, var(--font-28), 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}
.page-product-view .pview-docs-block {
  margin-bottom: max(5.5rem, var(--vw-140));
}

.page-product-view .pview-faq {
  margin-bottom: 0;
}
.page-product-view .pview-faq__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.page-product-view .pview-faq__item {
  margin: 0;
  border-bottom: 1px solid #5e5e5e;
}
.page-product-view .pview-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(1.875rem, var(--vw-30)) max(1.25rem, var(--vw-20));
  cursor: pointer;
  list-style: none;
}
.page-product-view .pview-faq__q::-webkit-details-marker {
  display: none;
}
.page-product-view .pview-faq__q-text {
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 2;
}
.page-product-view .pview-faq__mark {
  font-family: var(--font-en);
  font-weight: 700;
}
.page-product-view .pview-faq__chevron {
  display: block;
  width: 15px;
  height: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.page-product-view .pview-faq__item[open] > .pview-faq__q .pview-faq__chevron {
  transform: rotate(180deg);
}
.page-product-view .pview-faq__a {
  margin: 0;
  padding: 0 max(1.25rem, var(--vw-20)) max(1.875rem, var(--vw-30));
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 2;
}

.page-product-view .pview-aside {
  position: sticky;
  top: calc(var(--header-height) + 16px);
  align-self: start;
}
.page-product-view .pview-aside__card {
  display: flex;
  flex-direction: column;
  gap: max(1.875rem, var(--vw-30));
  padding: max(1.25rem, var(--vw-20)) max(1rem, var(--vw-16));
  border: 1px solid #c8ced3;
  border-radius: 8px;
  background: #fff;
}
.page-product-view .pview-aside__name {
  margin: 0;
  color: #131313;
  font-family: var(--font-en);
  font-size: max(1.125rem, var(--font-20));
  font-weight: 700;
  line-height: 1.6;
}
.page-product-view .pview-aside__model,
.page-product-view .pview-aside__brand {
  margin: 0;
  color: #394147;
  font-family: var(--font-en);
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.2;
}
.page-product-view .pview-aside__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-product-view .pview-reco {
  margin-top: max(5.5rem, var(--vw-140));
  padding: max(5.5rem, var(--vw-140)) 0;
  background: #f2f4f5;
}
.page-product-view .pview-reco__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: max(1.875rem, var(--vw-30));
}
.page-product-view .pview-reco__title {
  margin: 0;
  color: #131313;
  font-family: var(--font-en);
  font-size: clamp(1.5rem, var(--font-28), 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}
.page-product-view .pview-reco__lead {
  margin: 8px 0 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.5;
}
.page-product-view .pview-slider-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.page-product-view .pview-slider__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.page-product-view .pview-slider__ring {
  display: block;
  width: 40px;
  height: 40px;
}
.page-product-view .pview-slider__chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(90deg);
}
.page-product-view .pview-slider__btn--next .pview-slider__chevron {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.page-product-view .pview-reco__track,
.page-product-view .pview-insights__track {
  display: flex;
  gap: max(1.875rem, var(--vw-40));
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.page-product-view .pview-insights__track {
  gap: max(1.875rem, var(--vw-30));
}
.page-product-view .pview-reco__track::-webkit-scrollbar,
.page-product-view .pview-insights__track::-webkit-scrollbar {
  display: none;
}
.page-product-view .pview-reco__item {
  flex: 0 0 calc((100% - 3 * max(1.875rem, var(--vw-40))) / 4);
  min-width: 240px;
  max-width: 300px;
  scroll-snap-align: start;
  display: flex;
}
.page-product-view .prd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;
  width: 100%;
  padding: 20px 24px;
  border: 1px solid #c8ced3;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.page-product-view .prd-card.is-featured,
.page-product-view .prd-card:hover {
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.08);
}
.page-product-view .prd-card__link {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.page-product-view .prd-card__thumb-wrap {
  width: 250px;
  height: 250px;
  max-width: 100%;
  overflow: clip;
}
.page-product-view .prd-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-product-view .prd-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 2px;
  background: #fff;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}
.page-product-view .prd-card__tag--best {
  border: 1px solid #00b894;
  color: #00b894;
}
.page-product-view .prd-card__tag--new {
  border: 1px solid #ff5a4f;
  color: #ff5a4f;
}
.page-product-view .prd-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.page-product-view .prd-card__name {
  margin: 0;
  color: #131313;
  font-family: var(--font-en);
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.2;
  min-height: calc(1.2em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-product-view .prd-card__model,
.page-product-view .prd-card__brand {
  margin: 0;
  color: #394147;
  font-family: var(--font-en);
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.2;
}
.page-product-view .prd-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-product-view .pview-insights {
  padding-top: max(5.5rem, var(--vw-140));
  padding-bottom: max(7.5rem, var(--vw-200)); /* 마지막 섹션 ↔ footer 200 */
}
.page-product-view .pview-insights__item {
  flex: 0 0 calc((100% - 2 * max(1.875rem, var(--vw-30))) / 3);
  min-width: 260px;
  max-width: 420px;
  scroll-snap-align: start;
}
.page-product-view .pview-icard {
  height: 100%;
  border: 1px solid #e1e7eb;
  background: #fff;
}
.page-product-view .pview-icard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.page-product-view .pview-icard__link:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.page-product-view .pview-icard__media {
  aspect-ratio: 420 / 315;
  overflow: hidden;
  background: #e1e7eb;
}
.page-product-view .pview-icard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-product-view .pview-icard__body {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  flex: 1 1 auto;
  padding: max(1.25rem, var(--vw-20)) max(1rem, var(--vw-16));
  background: #f2f4f5;
}
.page-product-view .pview-icard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-product-view .pview-icard__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  font-size: max(0.8125rem, var(--font-14));
  color: #394147;
  background: #eaf1f8;
}
.page-product-view .pview-icard__tag:nth-child(2) {
  background: #dceae7;
}
.page-product-view .pview-icard__title {
  margin: 0;
  color: #131313;
  font-size: max(1.125rem, var(--font-20));
  font-weight: 700;
  line-height: 1.35;
}
.page-product-view .pview-icard__desc {
  margin: 0;
  color: #131313;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 26px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-product-view .pview-icard__date {
  margin-top: auto;
  color: #394147;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 26px;
}

@media (max-width: 1199px) {
  .page-product-view .pview-hero__grid,
  .page-product-view .pview-split {
    grid-template-columns: 1fr;
  }
  .page-product-view .pview-aside {
    position: static;
    order: -1;
  }
  .page-product-view .pview-reco__item {
    flex-basis: calc((100% - max(1.875rem, var(--vw-40))) / 2);
    max-width: none;
  }
  .page-product-view .pview-insights__item {
    flex-basis: calc((100% - max(1.875rem, var(--vw-30))) / 2);
    max-width: none;
  }
}

@media (max-width: 767px) {
  .page-product-view .pview-breadcrumb {
    padding-top: 32px;
  }
  .page-product-view .pview-hero {
    margin-bottom: 48px;
  }
  .page-product-view .pview-summary__title {
    font-size: max(1.25rem, var(--font-20));
    line-height: 1.4;
  }
  .page-product-view .pview-cta {
    flex-direction: column;
  }
  .page-product-view .pview-meta__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .page-product-view .pview-docs--hero .pview-docs__cover {
    width: 80px;
    height: 112px;
  }
  .page-product-view .pview-tabs-sticky {
    position: static;
    padding-top: 0;
    margin-top: 0;
  }
  .page-product-view .pview-info,
  .page-product-view .pview-docs-block,
  .page-product-view .pview-faq {
    scroll-margin-top: calc(var(--header-height) + var(--pview-anchor-gap));
  }
  .page-product-view .pview-tabs__link {
    font-size: 14px;
    padding: 10px 4px;
  }
  .page-product-view .pview-info__figure {
    aspect-ratio: 900 / 1200;
  }
  .page-product-view .pview-block-title,
  .page-product-view .pview-reco__title {
    font-size: max(1.25rem, var(--font-20));
  }
  .page-product-view .pview-reco {
    margin-top: 64px;
    padding: 64px 0;
  }
  .page-product-view .pview-insights {
    padding-top: 64px;
    padding-bottom: 80px;
  }
  .page-product-view .pview-reco__item,
  .page-product-view .pview-insights__item {
    flex-basis: 85%;
    max-width: none;
  }
  .page-product-view .prd-card__thumb-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ============================================================
   인증 및 역량 — Figma WEB-044 (9884:406)
   ============================================================ */
.page-about-cert .about-cert-breadcrumb {
  /* #contents margin-top(header) 이후, 헤더 하단 ↔ 브레드크럼 140 */
  padding-top: max(5rem, var(--vw-140));
  padding-bottom: 0;
}
.page-about-cert .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-about-cert .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-about-cert .insight-breadcrumb__home,
.page-about-cert .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-about-cert .insight-breadcrumb__link {
  color: #131313;
  padding: 6px;
}
.page-about-cert .insight-breadcrumb__home:hover,
.page-about-cert .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-about-cert .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
}
.page-about-cert .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-about-cert .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-about-cert .insight-breadcrumb__home-text,
.page-about-cert .insight-breadcrumb__text,
.page-about-cert .insight-breadcrumb__current {
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
  color: #131313;
}
.page-about-cert .insight-breadcrumb__current,
.page-about-cert .insight-breadcrumb__text {
  padding: 6px;
}

.page-about-cert .about-cert-head__title {
  margin: 0;
  color: #131313;
  font-size: clamp(1.75rem, var(--font-48), 3rem);
  font-weight: 700;
  line-height: normal;
  word-break: keep-all;
}
.page-about-cert .about-cert-head__lead {
  margin: max(1rem, var(--vw-16)) 0 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  word-break: keep-all;
}

.page-about-cert .about-cert-hero {
  display: flex;
  justify-content: center;
  margin: max(2.5rem, var(--vw-60)) 0 0;
}
.page-about-cert .about-cert-hero__frame {
  width: min(60rem, 100%); /* 960 */
  aspect-ratio: 960 / 573;
  overflow: hidden;
}
.page-about-cert .about-cert-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-about-cert .about-cert-intro {
  padding-top: max(5rem, var(--vw-140));
}
.page-about-cert .about-cert-intro__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: max(2.5rem, var(--vw-60));
}
.page-about-cert .about-cert-intro__en {
  flex: 0 0 auto;
  margin: 0;
  color: #131313;
  font-family: var(--font-en);
  font-size: clamp(1.75rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.33; /* 48 / 36 */
  word-break: keep-all;
}
.page-about-cert .about-cert-intro__copy {
  flex: 1 1 auto;
  max-width: 49.5rem; /* 792 */
  display: flex;
  flex-direction: column;
  gap: max(1.875rem, var(--vw-30));
  min-width: 0;
}
.page-about-cert .about-cert-intro__title {
  margin: 0;
  color: #131313;
  font-size: clamp(1.75rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.44; /* 52 / 36 */
  word-break: keep-all;
}
.page-about-cert .about-cert-intro__body {
  margin: 0;
  color: #5e5e5e;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.8; /* 36 / 20 */
  word-break: keep-all;
}

.page-about-cert .about-cert-list {
  padding-top: max(7.5rem, var(--vw-200));
}
.page-about-cert .about-cert-section__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 max(2.5rem, var(--vw-60));
  text-align: center;
}
.page-about-cert .about-cert-section__en {
  color: #131313;
  font-family: var(--font-en);
  font-size: clamp(1.75rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.33;
}
.page-about-cert .about-cert-section__ko {
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.75;
  word-break: keep-all;
}

.page-about-cert .about-cert-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(2.5rem, var(--vw-60));
}
.page-about-cert .about-cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(2.5rem, var(--vw-60));
  background: #f2f4f5;
  border-radius: 12px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.page-about-cert .about-cert-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(1.875rem, var(--vw-30));
  width: 100%;
  padding: max(2.5rem, var(--vw-60)) max(1.875rem, var(--vw-30)) 0;
  box-sizing: border-box;
}
.page-about-cert .about-cert-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.page-about-cert .about-cert-card__std {
  margin: 0;
  color: #154670;
  font-family: var(--font-en);
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 2; /* 40 / 20 */
}
.page-about-cert .about-cert-card__name {
  margin: 0;
  color: #154670;
  font-size: clamp(1.25rem, var(--font-28), 1.75rem);
  font-weight: 700;
  line-height: 1.43; /* 40 / 28 */
  word-break: keep-all;
}
.page-about-cert .about-cert-card__name span[lang="en"] {
  font-family: var(--font-en);
}
.page-about-cert .about-cert-card__text {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-cert .about-cert-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(0.625rem, var(--vw-10));
  padding: 13px max(1.25rem, var(--vw-20));
  border-radius: 8px;
  background: #154670;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
}
.page-about-cert .about-cert-download:hover,
.page-about-cert .about-cert-download:focus-visible {
  color: #fff;
  background: #123d5c;
}
.page-about-cert .about-cert-download img {
  display: block;
  width: 16px;
  height: 14px;
}
.page-about-cert .about-cert-card__photo {
  width: calc(100% - max(3.75rem, var(--vw-60)));
  max-width: 35.625rem; /* 570 */
  height: max(12.5rem, 18.229vw); /* 350 @1920 */
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.page-about-cert .about-cert-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.page-about-cert .about-cert-caps {
  padding-top: max(7.5rem, var(--vw-200));
  padding-bottom: max(7.5rem, var(--vw-200)); /* 마지막 섹션 ↔ footer 200 */
}
.page-about-cert .about-cert-caps__panel {
  background: #f2f4f5;
  padding: max(2.5rem, var(--vw-60)) 0;
}
.page-about-cert .about-cert-caps__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: max(1.875rem, var(--vw-30));
  padding: max(1.875rem, var(--vw-30));
  box-sizing: border-box;
}
.page-about-cert .about-cert-caps__photo {
  flex: 0 1 35.45%; /* 468 / 1320 */
  margin: 0;
  max-width: 29.25rem;
  min-width: 0;
}
.page-about-cert .about-cert-caps__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 468 / 624;
  object-fit: cover;
  object-position: center;
}
.page-about-cert .about-cert-caps__items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  max-width: 47.625rem; /* 762 */
  min-width: 0;
}
.page-about-cert .about-cert-cap {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  padding: max(1.875rem, var(--vw-30));
  background: #fff;
  box-sizing: border-box;
}
.page-about-cert .about-cert-cap__title {
  margin: 0;
  color: #154670;
  font-size: clamp(1.25rem, var(--font-24), 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  word-break: keep-all;
}
.page-about-cert .about-cert-cap__text {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .page-about-cert .about-cert-breadcrumb {
    padding-top: 4rem;
  }
  .page-about-cert .about-cert-head__title {
    font-size: 1.75rem;
  }
  .page-about-cert .about-cert-hero {
    margin-top: 2rem;
    padding: 0 1.25rem;
  }
  .page-about-cert .about-cert-intro {
    padding-top: 3rem;
  }
  .page-about-cert .about-cert-intro__inner {
    flex-direction: column;
    gap: 1.5rem;
  }
  .page-about-cert .about-cert-intro__copy {
    max-width: none;
  }
  .page-about-cert .about-cert-intro__title {
    font-size: 1.5rem;
  }
  .page-about-cert .about-cert-list,
  .page-about-cert .about-cert-caps {
    padding-top: 4rem;
  }
  .page-about-cert .about-cert-caps {
    padding-bottom: 4rem;
  }
  .page-about-cert .about-cert-cards {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .page-about-cert .about-cert-card__photo {
    width: calc(100% - 2.5rem);
    height: 14rem;
  }
  .page-about-cert .about-cert-caps__inner {
    flex-direction: column;
    padding: 1.25rem;
  }
  .page-about-cert .about-cert-caps__photo {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
  .page-about-cert .about-cert-caps__items {
    max-width: none;
  }
}

/* ============================================================
   윤리강령 — Figma WEB-045 (9918:944)
   ============================================================ */
.page-about-ethics .about-ethics-breadcrumb {
  /* #contents margin-top(header) 이후, 헤더 하단 ↔ 브레드크럼 140 */
  padding-top: max(5rem, var(--vw-140));
  padding-bottom: 0;
}
.page-about-ethics .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-about-ethics .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-about-ethics .insight-breadcrumb__home,
.page-about-ethics .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-about-ethics .insight-breadcrumb__link {
  color: #131313;
  padding: 6px;
}
.page-about-ethics .insight-breadcrumb__home:hover,
.page-about-ethics .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-about-ethics .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
}
.page-about-ethics .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-about-ethics .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-about-ethics .insight-breadcrumb__home-text,
.page-about-ethics .insight-breadcrumb__text,
.page-about-ethics .insight-breadcrumb__current {
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
  color: #131313;
}
.page-about-ethics .insight-breadcrumb__current,
.page-about-ethics .insight-breadcrumb__text {
  padding: 6px;
}

.page-about-ethics .about-ethics-head__title {
  margin: 0;
  color: #131313;
  font-size: clamp(1.75rem, var(--font-48), 3rem);
  font-weight: 700;
  line-height: normal;
  word-break: keep-all;
}
.page-about-ethics .about-ethics-head__lead {
  margin: max(1rem, var(--vw-16)) 0 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  word-break: keep-all;
}

.page-about-ethics .about-ethics-hero {
  display: flex;
  justify-content: center;
  margin: max(2.5rem, var(--vw-60)) 0 0;
}
.page-about-ethics .about-ethics-hero__frame {
  width: min(60rem, 100%); /* 960 */
  aspect-ratio: 960 / 573;
  overflow: hidden;
}
.page-about-ethics .about-ethics-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-about-ethics .about-ethics-code {
  padding-top: max(5rem, var(--vw-140));
  padding-bottom: max(7.5rem, var(--vw-200)); /* 마지막 섹션 ↔ footer 200 */
}
.page-about-ethics .about-ethics-code__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 max(2.5rem, var(--vw-60));
  text-align: center;
}
.page-about-ethics .about-ethics-code__en {
  color: #131313;
  font-family: var(--font-en);
  font-size: clamp(1.75rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.33;
}
.page-about-ethics .about-ethics-code__ko {
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.75;
  word-break: keep-all;
}

.page-about-ethics .about-ethics-panel {
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-40));
  padding: max(2.5rem, var(--vw-60)) 0;
  background: #fff;
  border: 1px solid #959da4;
  box-sizing: border-box;
}
.page-about-ethics .about-ethics-block {
  display: flex;
  flex-direction: column;
  gap: max(0.625rem, var(--vw-10));
  padding: 0 max(1.875rem, var(--vw-30));
}
.page-about-ethics .about-ethics-block__title {
  margin: 0;
  color: #154670;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 2; /* 40 / 20 */
  word-break: keep-all;
}
.page-about-ethics .about-ethics-block__text {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}

.page-about-ethics .about-ethics-items {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
}
.page-about-ethics .about-ethics-item__title {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-ethics .about-ethics-item__text {
  margin: 0;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .page-about-ethics .about-ethics-breadcrumb {
    padding-top: 4rem;
  }
  .page-about-ethics .about-ethics-head__title {
    font-size: 1.75rem;
  }
  .page-about-ethics .about-ethics-hero {
    margin-top: 2rem;
    padding: 0 1.25rem;
  }
  .page-about-ethics .about-ethics-code {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
  .page-about-ethics .about-ethics-panel {
    padding: 2.5rem 0;
    gap: 2rem;
  }
  .page-about-ethics .about-ethics-block {
    padding: 0 1.25rem;
  }
}

/* ============================================================
   찾아오시는 길 — Figma WEB-045 (9921:1278)
   ============================================================ */
.page-about-location .about-location-breadcrumb {
  padding-top: max(5rem, var(--vw-140));
  padding-bottom: 0;
}
.page-about-location .insight-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
.page-about-location .insight-breadcrumb__item {
  display: flex;
  align-items: center;
  line-height: 0;
}
.page-about-location .insight-breadcrumb__home,
.page-about-location .insight-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #154670;
  text-decoration: none;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
}
.page-about-location .insight-breadcrumb__link {
  color: #131313;
  padding: 6px;
}
.page-about-location .insight-breadcrumb__home:hover,
.page-about-location .insight-breadcrumb__link:hover {
  text-decoration: underline;
}
.page-about-location .insight-breadcrumb__home-icon {
  display: block;
  width: 12px;
  height: 12px;
}
.page-about-location .insight-breadcrumb__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-about-location .insight-breadcrumb__sep img {
  display: block;
  width: 12px;
  height: 12px;
}
.page-about-location .insight-breadcrumb__home-text,
.page-about-location .insight-breadcrumb__text,
.page-about-location .insight-breadcrumb__current {
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.5;
  color: #131313;
}
.page-about-location .insight-breadcrumb__current,
.page-about-location .insight-breadcrumb__text {
  padding: 6px;
}

.page-about-location .about-location-head__title {
  margin: 0;
  color: #131313;
  font-size: clamp(1.75rem, var(--font-48), 3rem);
  font-weight: 700;
  line-height: normal;
  word-break: keep-all;
}
.page-about-location .about-location-head__lead {
  margin: max(1rem, var(--vw-16)) 0 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.2;
  word-break: keep-all;
}

.page-about-location .about-location-list {
  display: flex;
  flex-direction: column;
  gap: max(6.25rem, var(--vw-140));
  padding-top: max(3.75rem, var(--vw-100));
  padding-bottom: max(7.5rem, var(--vw-200));
}

.page-about-location .about-location-block__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: max(1.875rem, var(--vw-40));
}
.page-about-location .about-location-block__title {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.page-about-location .about-location-block__ko {
  display: block;
  color: #131313;
  font-size: clamp(1.5rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: 1.33;
  word-break: keep-all;
}
.page-about-location .about-location-block__en {
  display: block;
  color: #5e5e5e;
  font-family: var(--font-en);
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.75;
}

.page-about-location .about-location-block__body {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-30));
  width: min(100%, var(--vw-792));
  flex: 0 1 var(--vw-792);
}

.page-about-location .about-location-map {
  position: relative;
  width: 100%;
  aspect-ratio: 792 / 594;
  overflow: hidden;
}
.page-about-location .about-location-map__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-about-location .about-location-map__pills {
  position: absolute;
  top: max(1rem, var(--vw-20));
  left: max(1rem, var(--vw-20));
  display: flex;
  gap: 5px;
  z-index: 1;
}
.page-about-location .about-location-pill {
  margin: 0;
  padding: 12px 20px;
  border: 1px solid #959da4;
  border-radius: 100px;
  background: #fff;
  color: #959da4;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.page-about-location .about-location-pill.is-active {
  border-color: #131313;
  background: #131313;
  color: #fff;
}
.page-about-location .about-location-map__apps {
  position: absolute;
  top: max(1rem, var(--vw-20));
  right: max(1rem, var(--vw-20));
  display: flex;
  align-items: center;
  gap: max(0.625rem, var(--vw-10));
  z-index: 1;
}
.page-about-location .about-location-app {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
}
.page-about-location .about-location-app img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about-location .about-location-app--google {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.page-about-location .about-location-meta {
  display: flex;
  flex-direction: column;
  gap: max(0.625rem, var(--vw-10));
  width: 100%;
}
.page-about-location .about-location-addr {
  margin: 0;
}
.page-about-location .about-location-addr__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: max(0.75rem, var(--vw-20));
}
.page-about-location .about-location-addr dt {
  margin: 0;
  color: #154670;
  font-size: max(1rem, var(--font-20));
  font-weight: 700;
  line-height: 1.8;
  word-break: keep-all;
  flex: 0 0 auto;
}
.page-about-location .about-location-addr dd {
  margin: 0;
  color: #394147;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.8;
  word-break: keep-all;
  flex: 1 1 12rem;
}
.page-about-location .about-location-note {
  display: flex;
  align-items: center;
  gap: max(0.75rem, var(--vw-20));
  padding: 10px max(1.25rem, var(--vw-20));
  background: #f2f4f5;
  border: 1px solid #e1e7eb;
  border-radius: 4px;
  box-sizing: border-box;
}
.page-about-location .about-location-note__icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.page-about-location .about-location-note__text {
  margin: 0;
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
}
.page-about-location .about-location-guide {
  margin: 0;
  padding: max(0.75rem, var(--vw-20)) 0;
}
.page-about-location .about-location-guide__link {
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-about-location .about-location-guide__link:hover,
.page-about-location .about-location-guide__link:focus-visible {
  color: #154670;
}

@media (max-width: 991px) {
  .page-about-location .about-location-block__inner {
    flex-direction: column;
    gap: 1.5rem;
  }
  .page-about-location .about-location-block__body {
    width: 100%;
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  .page-about-location .about-location-breadcrumb {
    padding-top: 4rem;
  }
  .page-about-location .about-location-head__title {
    font-size: 1.75rem;
  }
  .page-about-location .about-location-list {
    gap: 4rem;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }
  .page-about-location .about-location-block__ko {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  .page-about-location .about-location-addr dt,
  .page-about-location .about-location-addr dd {
    font-size: 1rem;
    line-height: 1.6;
  }
  .page-about-location .about-location-map__pills {
    top: 12px;
    left: 12px;
  }
  .page-about-location .about-location-map__apps {
    top: 12px;
    right: 12px;
  }
  .page-about-location .about-location-pill {
    padding: 10px 14px;
  }
}