/* 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;
      --chrome-dur: 0.55s;
      --chrome-ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    * { 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: 768px) and (max-width: 991px) {
      :root {
        --container-gutter-x: 24px;
      }
    }
    @media (min-width: 992px) and (max-width: 1400px) {
      :root {
        --container-max: 100%;
        --container-gutter-x: 4.166667%;
      }
    }
    @media (min-width: 1401px) {
      :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: 56px;
        min-height: 56px;
      }
      .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 {
        padding: 10px 14px;
      }
      .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),
        transform var(--chrome-dur, 0.52s) var(--chrome-ease, cubic-bezier(0.22, 1, 0.36, 1));
    }
    .gnb-wrap.is-solid {
      background-color: #fff;
      box-shadow: none;
      border-bottom: 1px solid #c8ced3;
      color: #131313;
    }

    /*
      메인 투명 GNB + 밝은 히어로(배너 텍스트 dark/어두운 custom):
      로고·메뉴·검색을 solid와 동일한 어두운 톤으로 (스크롤/호버 is-solid 시에는 기존 규칙 우선)
    */
    .gnb-wrap.is-hero-dark:not(.is-solid) {
      color: #131313;
    }
    .gnb-wrap.is-hero-dark:not(.is-solid) .logo__img--light {
      opacity: 0;
    }
    .gnb-wrap.is-hero-dark:not(.is-solid) .logo__img--solid {
      opacity: 1;
    }
    .gnb-wrap.is-hero-dark:not(.is-solid) .menu__link,
    .gnb-wrap.is-hero-dark:not(.is-solid) .menu a {
      color: #131313;
    }
    .gnb-wrap.is-hero-dark:not(.is-solid) .menu__link:hover,
    .gnb-wrap.is-hero-dark:not(.is-solid) .menu__item.is-open > .menu__link,
    .gnb-wrap.is-hero-dark:not(.is-solid) .menu__item.is-active > .menu__link {
      color: #154670;
    }
    .gnb-wrap.is-hero-dark:not(.is-solid) .service-links a {
      color: #394147;
    }
    .gnb-wrap.is-hero-dark:not(.is-solid) .service-links .divider,
    .gnb-wrap.is-hero-dark:not(.is-solid) .divider {
      color: #c8ced3;
      opacity: 1;
    }
    .gnb-wrap.is-hero-dark:not(.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);
    }
    .gnb-wrap.is-hero-dark:not(.is-solid) .search__placeholder {
      color: var(--muted, #5e5e5e);
    }
    .gnb-wrap.is-hero-dark:not(.is-solid) .search__icon-glyph,
    .gnb-wrap.is-hero-dark:not(.is-solid) .search__icon-lens,
    .gnb-wrap.is-hero-dark:not(.is-solid) .search__icon-handle {
      filter: brightness(0) saturate(100%) invert(41%) sepia(85%) saturate(3400%) hue-rotate(199deg) brightness(101%) contrast(101%);
    }

    /* 헤더 박스와 #contents margin-top(--header-height)을 같은 값으로 둔다.
       vw-80만 쓰면 본문 여백만 줄고, GNB는 패딩 때문에 80px 안팎에 남는다. */
    body.page-main,
    body.subpage:not(.site-store) {
      --header-height: max(5rem, var(--vw-80));
    }
    body.page-main .gnb-wrap,
    body.subpage:not(.site-store) .gnb-wrap {
      box-sizing: border-box;
      height: var(--header-height);
    }
    .gnb {
      position: relative;
      height: 100%;
      min-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      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 10187:3281 / 10187:3315 — 360 + 360 + 335 */
    .mega--products .mega__inner.container,
    .mega--products .mega__inner {
      width: 1055px;
      max-width: 1055px;
      height: 560px;
      padding-left: 0;
      padding-right: 0;
      display: grid;
      grid-template-columns: 360px 360px 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: 56px;
      min-height: 56px;
      padding: 0;
      border: 1px solid #e8edf1;
      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,
        border-color 0.35s ease;
    }
    .mega-brand:hover {
      background-color: #f7fbff;
      border-color: #d5e3f0;
      box-shadow: 0 4px 14px rgba(16, 24, 31, 0.08);
    }
    .mega-brand.is-current {
      background-color: #f7fbff;
      border-color: #2070b6;
      box-shadow: 0 0 0 1px #2070b6;
    }
    .mega-brand__logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      /* 셀 안쪽 여백 — 로고가 테두리에 붙지 않도록 */
      padding: 12px 18px;
      overflow: hidden;
    }
    .mega-brand__logo {
      display: block;
      flex: 0 1 auto;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
      opacity: 0.92;
      transition: opacity 0.3s ease;
    }
    .mega-brand__logo--text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-family: var(--font-en);
      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: 1;
    }
    .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: 0;
      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: 360px;
      padding: 0;
      border-right: 1px solid #c8ced3;
      background: #f2f4f5;
    }
    .mega__col--sub {
      width: 348px;
      padding: 32px 24px 16px;
      background: #fff;
    }
    .mega--products .mega__col--product-mid {
      display: flex;
      flex-direction: column;
      width: 360px;
      padding: 0;
      background: #f2f4f5;
    }
    .mega--products .mega__heading {
      padding: 24px 24px 12px;
      color: #131313;
      font-weight: 700;
    }
    .mega--products .mega__col--product .mega__list,
    .mega--products .mega__col--product-mid .mega__list {
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      margin: 0;
      padding: 0;
      gap: 0;
      overflow: auto;
    }
    .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--product {
      padding: 0;
    }
    .mega--about .mega__col--about-mid {
      display: flex;
      flex-direction: column;
      padding: 0;
      background: #f2f4f5;
    }
    .mega--about .mega__col--about-mid .mega__panel[data-panel="overview"] {
      width: 100%;
    }
    .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);
    }
    /* 제품 메가 — Figma 10187:3281 대분류 / 10187:3315 하위 */
    .gnb-wrap .mega--products .mega__col--product a.mega__item,
    .gnb-wrap .mega--products .mega__col--product-mid a.mega__item {
      width: 100%;
      max-width: none;
      height: auto;
      padding: 16px 24px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #5e5e5e;
      opacity: 1;
      font-size: 14px;
      font-weight: 500;
      line-height: normal;
    }
    .mega--products .mega__col--product-mid .mega__item {
      padding: 16px 20px;
    }
    .gnb-wrap .mega--products .mega__col--product a.mega__item.is-active,
    .gnb-wrap .mega--products .mega__col--product a.mega__item.is-current,
    .gnb-wrap .mega--products .mega__col--product a.mega__item.is-current.is-active,
    .gnb-wrap .mega--products .mega__col--product a.mega__item:hover,
    .gnb-wrap .mega--products .mega__col--product a.mega__item:focus-visible {
      background: #154670;
      border-color: transparent;
      color: #fff;
    }
    .gnb-wrap .mega--products .mega__col--product-mid a.mega__item.is-active,
    .gnb-wrap .mega--products .mega__col--product-mid a.mega__item.is-current,
    .gnb-wrap .mega--products .mega__col--product-mid a.mega__item.is-current.is-active,
    .gnb-wrap .mega--products .mega__col--product-mid a.mega__item:hover,
    .gnb-wrap .mega--products .mega__col--product-mid a.mega__item:focus-visible {
      background: #fff;
      border-color: transparent;
      color: #00b894;
    }
    .mega__plus {
      display: block;
      flex-shrink: 0;
    }
    .mega__plus--on {
      display: none;
    }
    .mega--products .mega__item.is-active .mega__plus--on,
    .mega--products .mega__item.is-current .mega__plus--on,
    .mega--products .mega__item:hover .mega__plus--on,
    .mega--products .mega__item:focus-visible .mega__plus--on {
      display: block;
    }
    .mega--products .mega__item.is-active .mega__plus--off,
    .mega--products .mega__item.is-current .mega__plus--off,
    .mega--products .mega__item:hover .mega__plus--off,
    .mega--products .mega__item:focus-visible .mega__plus--off {
      display: none;
    }
    /* 고객지원·회사소개·일반 메가 — 제품정보와 같은 풀폭 행 */
    .mega--about .mega__heading,
    .mega--support .mega__col--support-nav .mega__heading,
    .mega--generic .mega__heading {
      padding: 24px 24px 12px;
      color: #131313;
      font-weight: 700;
    }
    .mega--about .mega__list,
    .mega--support .mega__col--support-nav .mega__list,
    .mega--generic .mega__list {
      width: 100%;
      max-width: none;
      flex: 1 1 auto;
      min-height: 0;
      margin: 0;
      padding: 0;
      gap: 0;
      overflow: auto;
    }
    .gnb-wrap .mega--about .mega__col--product a.mega__item,
    .gnb-wrap .mega--about .mega__col--product button.mega__item,
    .gnb-wrap .mega--about .mega__col--about-mid a.mega__item,
    .gnb-wrap .mega--support .mega__col--support-nav a.mega__item,
    .gnb-wrap .mega--generic .mega__col a.mega__item {
      width: 100%;
      max-width: none;
      height: auto;
      padding: 16px 24px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #5e5e5e;
      opacity: 1;
      font-size: 14px;
      font-weight: 500;
      line-height: normal;
    }
    .gnb-wrap .mega--about .mega__col--about-mid a.mega__item {
      padding: 16px 20px;
    }
    .gnb-wrap .mega--about .mega__col--product button.mega__item.is-active,
    .gnb-wrap .mega--about .mega__col--product button.mega__item.is-current,
    .gnb-wrap .mega--about .mega__col--product button.mega__item.is-current.is-active,
    .gnb-wrap .mega--about .mega__col--product button.mega__item:hover,
    .gnb-wrap .mega--about .mega__col--product button.mega__item:focus-visible,
    .gnb-wrap .mega--about .mega__col--product a.mega__item.is-active,
    .gnb-wrap .mega--about .mega__col--product a.mega__item.is-current,
    .gnb-wrap .mega--about .mega__col--product a.mega__item.is-current.is-active,
    .gnb-wrap .mega--about .mega__col--product a.mega__item:hover,
    .gnb-wrap .mega--about .mega__col--product a.mega__item:focus-visible,
    .gnb-wrap .mega--support .mega__col--support-nav a.mega__item.is-active,
    .gnb-wrap .mega--support .mega__col--support-nav a.mega__item.is-current,
    .gnb-wrap .mega--support .mega__col--support-nav a.mega__item.is-current:hover,
    .gnb-wrap .mega--support .mega__col--support-nav a.mega__item:hover,
    .gnb-wrap .mega--support .mega__col--support-nav a.mega__item:focus-visible,
    .gnb-wrap .mega--generic .mega__col a.mega__item.is-active,
    .gnb-wrap .mega--generic .mega__col a.mega__item.is-current,
    .gnb-wrap .mega--generic .mega__col a.mega__item:hover,
    .gnb-wrap .mega--generic .mega__col a.mega__item:focus-visible {
      background: #154670;
      border-color: transparent;
      color: #fff;
    }
    .gnb-wrap .mega--about .mega__col--about-mid a.mega__item.is-active,
    .gnb-wrap .mega--about .mega__col--about-mid a.mega__item.is-current,
    .gnb-wrap .mega--about .mega__col--about-mid a.mega__item.is-current.is-active,
    .gnb-wrap .mega--about .mega__col--about-mid a.mega__item:hover,
    .gnb-wrap .mega--about .mega__col--about-mid a.mega__item:focus-visible {
      background: #fff;
      border-color: transparent;
      color: #00b894;
    }
    .mega--support .mega__col--support-nav .mega__item:hover .mega__chevron--on,
    .mega--support .mega__col--support-nav .mega__item:focus-visible .mega__chevron--on,
    .mega--support .mega__col--support-nav .mega__item.is-active .mega__chevron--on,
    .mega--support .mega__col--support-nav .mega__item.is-current .mega__chevron--on,
    .mega--about .mega__col--product .mega__item:hover .mega__chevron--on,
    .mega--about .mega__col--product .mega__item:focus-visible .mega__chevron--on,
    .mega--about .mega__col--product .mega__item.is-active .mega__chevron--on,
    .mega--about .mega__col--product .mega__item.is-current .mega__chevron--on,
    .mega--generic .mega__col .mega__item:hover .mega__chevron--on,
    .mega--generic .mega__col .mega__item:focus-visible .mega__chevron--on,
    .mega--generic .mega__col .mega__item.is-active .mega__chevron--on,
    .mega--generic .mega__col .mega__item.is-current .mega__chevron--on {
      display: none;
    }
    .mega--support .mega__col--support-nav .mega__item:hover .mega__chevron--off,
    .mega--support .mega__col--support-nav .mega__item:focus-visible .mega__chevron--off,
    .mega--support .mega__col--support-nav .mega__item.is-active .mega__chevron--off,
    .mega--support .mega__col--support-nav .mega__item.is-current .mega__chevron--off,
    .mega--about .mega__col--product .mega__item:hover .mega__chevron--off,
    .mega--about .mega__col--product .mega__item:focus-visible .mega__chevron--off,
    .mega--about .mega__col--product .mega__item.is-active .mega__chevron--off,
    .mega--about .mega__col--product .mega__item.is-current .mega__chevron--off,
    .mega--generic .mega__col .mega__item:hover .mega__chevron--off,
    .mega--generic .mega__col .mega__item:focus-visible .mega__chevron--off,
    .mega--generic .mega__col .mega__item.is-active .mega__chevron--off,
    .mega--generic .mega__col .mega__item.is-current .mega__chevron--off {
      display: block;
      filter: brightness(0) invert(1);
    }
    .mega--about button.mega__item.is-active .mega__icon--expand,
    .mega--about button.mega__item.is-current .mega__icon--expand,
    .mega--about button.mega__item:hover .mega__icon--expand,
    .mega--about button.mega__item:focus-visible .mega__icon--expand {
      color: #fff;
      transform: none;
    }
    .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;
      overflow: visible;
    }
    .search__icon-glyph {
      display: block;
      width: 100%;
      height: 100%;
    }
    /* 스토어 헤더는 렌즈·손잡이 SVG를 나눠 쓴다 */
    .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-glyph,
    .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;
      opacity: 1;
      filter: none;
    }
    .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: #00b894; /* Figma 9771:878 쇼핑몰 — TESSOL COOL GREEN */
      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__yt-poster {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      animation: hero-yt-poster-hide 0.45s ease 2.6s forwards;
    }
    @keyframes hero-yt-poster-hide {
      to {
        opacity: 0;
        visibility: 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(8, 24, 40, var(--hero-overlay, 0.55)) 0%,
        rgba(11, 43, 70, calc(var(--hero-overlay, 0.55) * 0.51)) 48%,
        rgba(0, 80, 140, calc(var(--hero-overlay, 0.55) * 0.15)) 100%
      );
      pointer-events: none;
    }
    .hero__content {
      position: relative;
      z-index: 2;
      /* Figma 9771:877 @1440 — GNB 80 + gap 120 = 200 top / bottom 120 (높이 650) */
      padding-top: max(12.5rem, calc(var(--header-height, 80px) + max(5rem, var(--vw-120))));
      padding-bottom: max(5rem, var(--vw-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);
    }

    .page-main-web__title {
      margin: 0;
      font-size: clamp(1.5rem, var(--font-36), 2.25rem);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.02em;
      color: #131313;
    }
    .insight {
      background: #fff;
      padding: 100px 0;
    }
    .insight__inner {
      display: flex;
      flex-direction: column;
      gap: max(2.5rem, var(--vw-60));
    }
    .insight__lead {
      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__intro {
      display: flex;
      flex-direction: column;
      gap: max(0.5rem, var(--vw-10));
    }
    .insight__title {
      margin: 0;
      font-size: clamp(1.75rem, 2.708vw, 2.4375rem);
      line-height: 1.2;
      font-weight: 700;
      color: #131313;
      white-space: nowrap;
    }
    .insight__desc {
      margin: 0;
      font-size: max(1rem, var(--font-16));
      line-height: 1.2;
      color: #394147;
    }
    .insight__stage {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: max(1.5rem, var(--vw-40));
    }
    .insight-feature {
      position: relative;
      display: flex;
      flex: 0 0 28.75rem; /* 460 @16 */
      width: 28.75rem;
      height: 35rem; /* 560 */
      padding: max(1.5rem, var(--vw-40));
      align-items: flex-end;
      color: #fff;
      text-decoration: none;
      overflow: hidden;
    }
    .insight-feature[hidden] {
      display: none;
    }
    .insight-feature__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .insight-feature::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(18, 21, 23, 0) 38%, rgba(18, 21, 23, 0.78) 100%);
    }
    .insight-feature__copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: max(1.25rem, var(--vw-20));
    }
    .insight-feature__name {
      margin: 0;
      font-size: clamp(1.25rem, var(--font-28), 1.75rem);
      font-weight: 700;
      line-height: 1.3;
      color: #fff;
    }
    .insight-feature__text {
      font-size: max(0.9375rem, var(--font-18));
      font-weight: 500;
      line-height: 26px;
      color: #fff;
    }
    .insight-feature__more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-en);
      font-size: max(0.75rem, var(--font-14));
      font-weight: 400;
      line-height: 26px;
      color: #fff;
    }
    .insight-feature__more-icon {
      display: flex;
      width: 6px;
      height: 10px;
      align-items: center;
      justify-content: center;
    }
    .insight-feature__more-icon img {
      width: 10px;
      height: 6px;
      transform: rotate(-90deg);
    }
    .insight__board {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      justify-content: space-between;
      height: 35rem;
      min-width: 0;
      gap: 0;
    }
    .insight__posts {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      flex: 0 0 auto;
      gap: 0;
      width: 100%;
      min-width: 0;
    }
    .insight__pills {
      display: flex;
      flex-wrap: nowrap;
      gap: max(0.5rem, var(--vw-10));
      max-width: 100%;
      overflow-x: auto;
    }
    .insight-pill {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      gap: max(0.5rem, var(--vw-10));
      padding: 12px max(1rem, var(--vw-20));
      border: 0;
      border-radius: 100px;
      background: #f5f5f5;
      color: #5e5e5e;
      font-family: inherit;
      font-size: max(0.875rem, var(--font-16));
      font-weight: 500;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
    }
    .insight-pill.is-active {
      background: #154670;
      color: #fff;
    }
    .insight-pill__icon {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }
    .insight-pill__icon img {
      display: block;
      max-width: none;
      flex: 0 0 auto;
    }
    .insight-pill.is-active .insight-pill__icon {
      filter: brightness(0) invert(1);
    }
    .insight-panel[hidden],
    .insight-page[hidden] {
      display: none;
    }
    .insight-panel {
      width: 100%;
      min-width: 0;
    }
    .insight-page {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 1fr;
      align-items: stretch;
      gap: max(0.75rem, var(--vw-20));
      width: 100%;
    }
    .insight-post {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-width: 0;
      color: inherit;
      text-decoration: none;
      border: 1px solid transparent;
    }
    .insight-post:hover,
    .insight-post:focus-visible {
      border-color: #e1e7eb;
    }
    .insight-post__thumb {
      display: block;
      aspect-ratio: 260 / 195;
      overflow: hidden;
      background: #e1e7eb;
    }
    .insight-post__thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .insight-post__body {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: max(1.25rem, var(--vw-20));
      padding: max(1rem, var(--vw-16)) max(1.25rem, var(--vw-20));
      background: #f2f4f5;
    }
    .insight-post__title {
      margin: 0;
      color: #131313;
      font-size: max(1rem, var(--font-20));
      font-weight: 700;
      line-height: 1.4;
      min-height: 2.8em; /* 2줄 고정 — 짧은 제목도 같은 높이 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .insight-post__excerpt {
      flex: 1 1 auto;
      color: #131313;
      font-size: max(0.75rem, var(--font-14));
      font-weight: 400;
      line-height: 26px;
      min-height: calc(26px * 3); /* 3줄 고정 — 짧은 요약도 같은 높이 */
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .insight-panel__empty {
      margin: 0;
      color: #5e5e5e;
      font-size: max(0.875rem, var(--font-16));
    }
    .insight__pager {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: max(1.25rem, var(--vw-30));
    }
    .insight-pager__btn {
      display: flex;
      width: 10px;
      height: 16px;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    .insight-pager__btn img {
      width: 16px;
      height: 10px;
      max-width: none;
    }
    .insight-pager__btn--prev img {
      transform: rotate(90deg);
    }
    .insight-pager__btn--next img {
      transform: rotate(-90deg);
    }
    .insight-pager__btn:disabled {
      opacity: 0.35;
      cursor: default;
    }
    .insight-pager__label {
      margin: 0;
      min-width: 3.5rem;
      color: #131313;
      font-size: max(1rem, var(--font-18));
      font-weight: 400;
      line-height: 1.2;
      text-align: center;
    }

    .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: 20px;
      max-width: 100%;
      padding: 0;
      border-radius: 0;
      background: transparent;
    }
    .products__tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      background: #fff;
      color: #131313;
      font-family: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: normal;
      padding: 10px 18px;
      border-radius: 100px;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: none;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .products__tab-icon {
      display: block;
      width: 40px;
      height: 34px;
      object-fit: contain;
      flex: 0 0 auto;
    }
    .products__tab:hover,
    .products__tab:focus-visible {
      color: #131313;
      outline: none;
    }
    .products__tab.is-active,
    .products__tab.is-active:hover,
    .products__tab.is-active:focus-visible {
      background: #154670;
      color: #fff;
      box-shadow: none;
    }
    .products-swiper {
      width: 100%;
      overflow: hidden;
    }
    .products-swiper .swiper-slide {
      height: auto;
      max-width: 100%;
    }
    .products-swiper:not(.swiper-initialized) .swiper-wrapper {
      display: flex;
    }
    .products-swiper:not(.swiper-initialized) .swiper-slide {
      width: min(18.75rem, 100%);
      flex-shrink: 0;
    }
    .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__empty {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 240px;
      margin: 0;
      color: #154670;
      font-size: max(0.875rem, var(--font-16));
      line-height: 1.5;
    }
    .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 {
      width: 100%;
      background: #f2f4f5;
      border-radius: 8px 8px 0 0;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      isolation: isolate;
    }
    .product-card:hover .product-card__thumb-wrap,
    .product-card:focus-visible .product-card__thumb-wrap {
      box-shadow: inset 0 0 0 1px #e1e7eb;
    }
    .product-card__thumb {
      width: 100%;
      height: 100%;
      object-fit: contain;
      mix-blend-mode: multiply;
      display: block;
    }
    .product-card__body {
      background: #e1e7eb;
      border-radius: 0 0 8px 8px;
      padding: 32px 16px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      text-align: left;
    }
    .product-card__brand {
      display: block;
      height: 20px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: left center;
      align-self: flex-start;
    }
    .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 {
      align-self: stretch;
      width: 100%;
      margin: 0;
      font-size: 18px;
      line-height: 26px;
      font-weight: 400;
      color: #131313;
      text-align: left;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-card__model {
      align-self: stretch;
      width: 100%;
      margin: 0;
      font-family: var(--font-en);
      font-size: 14px;
      line-height: 26px;
      color: #131313;
      text-align: left;
    }
    .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: 10px;
      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;
      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-family: var(--font-en);
      font-size: 16px;
      font-weight: 700;
      color: #00b894;
      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;
      align-self: flex-start;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid #e1e7eb;
      border-radius: 6px;
      font-size: 16px;
      line-height: 26px;
      color: #e1e7eb;
      transition: border-radius 0.35s ease;
    }
    .service-card:hover .service-card__more,
    .service-card:focus-visible .service-card__more {
      border-radius: 0;
    }
    .service-card__more-icon {
      position: relative;
      display: block;
      width: 6px;
      height: 10px;
      flex-shrink: 0;
    }
    .service-card__more-icon img {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10px;
      height: 6px;
      display: block;
      transform: translate(-50%, -50%) rotate(-90deg);
    }

    /*
      Figma 11825:896 (글로벌 공식 파트너)
      - 배경: TESSOL BLUE(#154670) 위에 웨이브 + 코너 도트 데코 이미지 오버레이
        원본 2560×615 (figma/WEB-001 bg-brand) → cover 로 섹션 채움
    */
    .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: 156px;
      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: 156px;
      height: 156px;
      padding: 16px;
      box-sizing: border-box;
      border-radius: 8px;
      background: transparent;
      object-fit: contain;
      display: block;
    }
    /* img[loading=lazy] 전환이 배경 전환을 덮지 않도록 요소+클래스로 지정 */
    img.brand-item__logo,
    img.brand-item__logo[loading="lazy"] {
      transition: background-color 0.35s ease, opacity 0.35s ease;
    }
    .brand-item:hover .brand-item__logo,
    .brand-item:focus-visible .brand-item__logo {
      background: #fff;
    }
    .brand-item__mark {
      position: relative;
      width: 156px;
      height: 156px;
      flex: 0 0 auto;
    }
    .brand-item__mark .brand-item__logo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .brand-item__logo--on-light {
      opacity: 0;
    }
    .brand-item:hover .brand-item__logo--on-dark,
    .brand-item:focus-visible .brand-item__logo--on-dark {
      opacity: 0;
      background: transparent;
    }
    .brand-item:hover .brand-item__logo--on-light,
    .brand-item:focus-visible .brand-item__logo--on-light {
      opacity: 1;
    }
    .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: #fff;
      word-break: keep-all;
      transition: background-color 0.35s ease, color 0.35s ease;
    }
    .brand-item:hover .brand-item__logo--text,
    .brand-item:focus-visible .brand-item__logo--text {
      color: #154670;
    }
    .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: 420px 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: 390px;
      max-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__empty {
      grid-column: 1 / -1;
      margin: 0;
      padding: max(2rem, var(--vw-40)) 0;
      color: #394147;
      font-size: max(0.875rem, var(--font-16));
      line-height: 1.5;
    }
    .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);
    }

    .partners {
      background: #222c34;
      padding-top: max(3.75rem, var(--vw-100));
      padding-bottom: max(3.75rem, var(--vw-100));
      overflow: hidden;
    }
    .partners__head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: max(0.5rem, var(--vw-10));
      width: min(100% - 2.5rem, 1320px);
      margin: 0 auto max(2.5rem, var(--vw-60));
      text-align: center;
    }
    .partners__title {
      margin: 0;
      color: #e6e2da;
      font-size: clamp(1.75rem, 2.03125vw, 2.4375rem);
      font-weight: 700;
      line-height: 1.3;
    }
    .partners__desc {
      margin: 0;
      color: #e6e2da;
      font-size: max(0.875rem, var(--font-16));
      font-weight: 400;
      line-height: 1.5;
    }
    .partners__marquee {
      overflow: hidden;
      width: 100%;
    }
    .partners__track {
      display: flex;
      width: max-content;
      animation: partners-marquee 120s linear infinite;
    }
    .partners__row {
      display: flex;
      gap: max(1.25rem, var(--vw-45));
      margin: 0;
      padding: 0 max(0.625rem, calc(var(--vw-45) / 2));
      list-style: none;
    }
    .partners__logo {
      position: relative;
      display: flex;
      flex: 0 0 clamp(7.5rem, 10.4167vw, 9.375rem);
      align-items: center;
      justify-content: center;
      width: clamp(7.5rem, 10.4167vw, 9.375rem);
      height: clamp(3.75rem, 5.2083vw, 4.6875rem);
      border-radius: 8px;
      background: transparent;
      overflow: hidden;
    }
    .partners__logo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: grayscale(1) sepia(0.28) contrast(1.08);
      mix-blend-mode: screen;
      opacity: 0.86;
      transition: filter 0.2s ease, opacity 0.2s ease;
    }
    #main.page-main-web .partners__logo img.partners__logo-img--white {
      position: absolute;
      inset: 0;
      opacity: 0;
      filter: none;
      mix-blend-mode: normal;
    }
    #main.page-main-web .partners__logo:hover img.partners__logo-img--white,
    #main.page-main-web .partners__logo:focus-visible img.partners__logo-img--white {
      opacity: 1;
    }
    #main.page-main-web .partners__logo:hover img.partners__logo-img--color,
    #main.page-main-web .partners__logo:focus-visible img.partners__logo-img--color {
      opacity: 0;
    }
    .partners__marquee:hover .partners__track {
      animation-play-state: paused;
    }
    @keyframes partners-marquee {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(-50%, 0, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .partners__track {
        animation: none;
        width: 100%;
        overflow-x: auto;
      }
      .partners__row + .partners__row {
        display: none;
      }
    }
    /*
      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: 20px;
      min-height: 0;
    }
    .news-card__meta,
    .news-card__foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
    }
    .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 0 0 auto;
      font-size: 14px;
      line-height: normal;
      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: 10px;
      margin-top: 0;
      font-family: var(--font-en);
      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: max(3.75rem, var(--vw-100)) 0 max(2.5rem, var(--vw-60));
    }
    .site-footer__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: max(1.5rem, var(--vw-60));
      row-gap: max(2.5rem, var(--vw-60));
      align-items: start;
    }
    .site-footer__nav-wrap {
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
    }
    .site-footer__nav {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: max(1rem, var(--vw-30));
    }
    .site-footer__nav > div {
      flex: 0 0 auto;
      min-width: 0;
    }
    .site-footer__col-title {
      margin: 0 0 max(1.25rem, var(--vw-30));
      font-size: max(0.875rem, var(--font-16));
      font-weight: 700;
      line-height: 1.2;
      color: #959da4;
    }
    .site-footer__links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: max(0.625rem, var(--vw-15));
    }
    .site-footer__links a {
      display: block;
      font-size: max(0.75rem, var(--font-14));
      line-height: 1.4;
      color: #959da4;
      transition: color 0.2s ease;
    }
    .site-footer__links a:hover,
    .site-footer__links a:focus-visible {
      color: #e1e7eb;
    }
    .site-footer__cta {
      grid-column: 1;
      grid-row: 2;
      display: flex;
      flex-wrap: wrap;
      align-self: end;
      gap: max(0.75rem, var(--vw-20));
    }
    .site-footer__cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      border-radius: 8px;
      background: #394147;
      color: #959da4;
      font-size: max(0.875rem, var(--font-16));
      font-weight: 500;
      line-height: 1.2;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .site-footer__cta-btn:hover,
    .site-footer__cta-btn:focus-visible {
      background: #4b545b;
      color: #f2f4f5;
    }
    .site-footer__cta-icon {
      display: flex;
      width: 8px;
      height: 13px;
      align-items: center;
      justify-content: center;
    }
    .site-footer__cta-icon img {
      display: block;
      width: 8px;
      height: 13px;
      max-width: none;
    }
    .site-footer__aside {
      grid-column: 2;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      gap: max(1.25rem, var(--vw-30));
      align-items: flex-end;
    }
    .site-footer__logo {
      display: block;
      width: 152px;
      height: 30px;
      object-fit: contain;
    }
    .site-footer__social {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }
    .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: 24px;
      height: 24px;
      max-width: none;
      object-fit: contain;
      flex-shrink: 0;
    }
    .site-footer__contact {
      margin: 0;
      font-size: max(0.875rem, var(--font-16));
      line-height: 30px;
      color: #959da4;
      text-align: right;
    }
    .site-footer__certs {
      grid-column: 2;
      grid-row: 2;
      display: flex;
      justify-self: end;
      gap: max(1.25rem, var(--vw-30));
    }
    .site-footer__cert-label {
      margin: 0 0 16px;
      font-size: 12px;
      font-weight: 700;
      line-height: 20px;
      color: #959da4;
    }
    .site-footer__cert-marks {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .site-footer__cert-img {
      display: block;
      object-fit: contain;
      flex: 0 0 auto;
      max-width: none;
    }
    .site-footer__cert-img--gic {
      width: 60px;
      height: 84px;
      opacity: 0.3;
    }
    .site-footer__cert-img--ias {
      width: 54px;
      height: 84px;
      opacity: 0.3;
    }
    .site-footer__cert-img--ilac {
      width: 60px;
      height: 60px;
      opacity: 0.5;
    }
    .site-footer__cert-img--kolas {
      width: 80px;
      height: 46px;
      opacity: 0.3;
    }
    .site-footer__legal {
      padding: 20px 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: 305px;
      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: 20px 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; }
      .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-wrap,
      .site-footer__aside,
      .site-footer__cta,
      .site-footer__certs {
        grid-column: 1;
        grid-row: auto;
        justify-self: stretch;
      }
      .site-footer__aside {
        align-items: flex-start;
      }
      .site-footer__contact,
      .site-footer__social {
        text-align: left;
        justify-content: flex-start;
      }
      .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-top: max(8.75rem, calc(var(--header-height, 80px) + max(3.75rem, var(--vw-60))));
        padding-bottom: max(3.75rem, var(--vw-72));
      }
      .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__title {
        white-space: normal;
      }
      .insight__stage,
      .insight__board {
        display: flex;
        flex-direction: column;
        gap: max(1.25rem, var(--vw-30));
      }
      .insight-feature {
        flex-basis: auto;
        width: 100%;
        aspect-ratio: auto;
        min-height: 22rem;
      }
      .insight__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
      }
      .insight__posts {
        width: 100%;
        align-items: stretch;
      }
      .insight-page {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        width: 100%;
      }
      .insight-post {
        flex-basis: auto;
        width: 100%;
      }
      .insight__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
      }
      .insight-pill {
        flex: 0 0 auto;
      }
      .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: 124px;
      }
      .brand-item__logo,
      .brand-item__mark {
        width: 124px;
        height: 124px;
      }
      .brand-item__logo {
        padding: 12px;
      }
      .insight-panel {
        width: 100%;
      }
      .news {
        padding: 60px 0;
      }
      .partners {
        padding-top: 60px;
        padding-bottom: 80px;
      }
      .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 {
  margin-top: max(3.125rem, var(--vw-100));
}
.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-keyword {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 max(1rem, var(--vw-20));
  min-height: 36px;
}
.page-resources .resources-keyword__label {
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 700;
  color: #252a2e;
}
.page-resources .resources-keyword__value {
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 500;
  color: #3a8ad1;
  line-height: 1.4;
}
.page-resources .resources-keyword__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border-radius: 50%;
  border: 1px solid #cfd4d8;
  background: #fff;
  color: #6b737a;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}
.page-resources .resources-keyword__clear:hover {
  border-color: #3a8ad1;
  color: #3a8ad1;
}
.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: 39px;
  padding: 11px 21px;
  border: 1px solid #cfd4d8;
  border-radius: 50px;
  background: #fff;
  color: #9aa1a7;
  font-size: max(0.8125rem, var(--font-14));
  line-height: 1.2;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.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: 1;
  cursor: not-allowed;
}
/* Figma 9823:2629 — 선택 시 활성 색상 */
.page-resources .resources-toolbar__download.is-active {
  border-color: #3a8ad1;
  color: #3a8ad1;
  background: #fff;
  cursor: pointer;
}

.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 {
  margin-top: 1px;
}
.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 {
  margin-top: max(3.75rem, var(--vw-60)); /* Figma 9823:3119 gap 60 */
}

/* CTA — Figma 9823:3962 / 9823:3963 */
.page-resources .resources-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(1.25rem, var(--vw-40));
  width: 100%;
  margin-top: max(3.75rem, var(--vw-60));
  box-sizing: border-box;
}
.page-resources .resources-cta__card {
  display: flex;
  align-items: center;
  gap: max(1.25rem, var(--vw-20));
  min-width: 0;
  padding: max(1.25rem, var(--vw-20));
  border-radius: 4px;
  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__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  min-width: 0;
}
.page-resources .resources-cta__title {
  margin: 0;
  color: #131313;
  font-size: max(1.125rem, var(--font-20));
  font-weight: 700;
  line-height: normal;
}
.page-resources .resources-cta__desc {
  margin: 0;
  color: #252a2e;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 28px;
  word-break: keep-all;
}
.page-resources .resources-cta__thumb {
  display: block;
  flex-shrink: 0;
  width: max(5rem, var(--vw-120)); /* 120 @1920 */
  height: max(5rem, var(--vw-120));
  border-radius: 100px;
  overflow: hidden;
}
.page-resources .resources-cta__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@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;
  }
  .page-resources .resources-cta__card {
    gap: 16px;
    padding: 16px;
  }
  .page-resources .resources-cta__body {
    gap: 12px;
  }
  .page-resources .resources-cta__thumb {
    width: 80px;
    height: 80px;
  }
}

/* ============================================================
   견적 문의 — 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: max(0.75rem, var(--vw-16));
  align-items: center;
  min-height: 54px;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid #959da4;
  border-radius: 8px;
  background: #fff;
}
.page-quote .quote-product__media {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
}
.page-quote .quote-product__media img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.page-quote .quote-product__body {
  min-width: 0;
}
.page-quote .quote-product__cat {
  margin: 0 0 4px;
  color: #5e5e5e;
  font-size: max(0.75rem, var(--font-14));
  line-height: 1.4;
}
.page-quote .quote-product__name {
  display: block;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.4;
}

.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 {
  align-self: flex-end;
}

.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-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 {
  align-self: flex-end;
}

.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-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-32));
  }
  .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 {
  margin-top: max(3.125rem, var(--vw-100));
}

@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 {
  align-items: flex-start;
}
.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;
  color: #131313;
  font-size: clamp(1.5rem, var(--font-36), 2.25rem);
  font-weight: 700;
  line-height: normal;
}
.page-faq .faq-board__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: max(1.25rem, var(--vw-30));
  flex-wrap: wrap;
  margin: 0 0 max(1.25rem, var(--vw-30));
}
.page-faq .faq-brand-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-left: auto;
  min-width: min(100%, 280px);
}
.page-faq .faq-brand-filter__label {
  display: block;
  margin: 0;
  color: #131313;
  font-size: max(1rem, var(--font-20));
  font-weight: 400;
  line-height: 1.2;
}
.page-faq .faq-brand-filter__control {
  position: relative;
  width: 100%;
  min-width: 220px;
}
.page-faq .faq-brand-filter__select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 44px 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;
  cursor: pointer;
}
.page-faq .faq-brand-filter__select:focus {
  border-color: #154670;
}
.page-faq .faq-brand-filter__chevron {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  pointer-events: none;
}

/* Accordion — support/faq + Editor.js tessolFaq SSR */
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap {
  margin: 0;
  border-top: 0;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq {
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .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, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .faq-item__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .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, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item a.faq-title:hover,
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item a.faq-title.active:hover {
  background-color: transparent;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-item__question,
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .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, .page-product-view .pview-faq) .faq-item__question {
  font-weight: 700;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-item__answer {
  font-weight: 400;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-item__mark {
  font-family: var(--font-en);
  font-weight: 700;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-item__mark--a {
  font-weight: 400;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-item__subject {
  font-weight: 700;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-item__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 8px;
  transition: transform 0.32s ease;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-item__chevron img {
  display: block;
  width: 15px;
  height: 8px;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item a.faq-title.active .faq-item__chevron {
  transform: rotate(180deg);
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item a.faq-title span.arrow {
  display: none;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .answer {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  padding: 0;
  min-height: 0;
  transition: grid-template-rows 0.32s ease;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item a.faq-title.active + .answer {
  grid-template-rows: 1fr;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .answer > .faq-item__answer {
  overflow: hidden;
  min-height: 0;
  padding-top: 0;
  transition: padding-top 0.32s ease;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item a.faq-title.active + .answer > .faq-item__answer {
  padding-top: max(1.875rem, var(--vw-30));
}
@media (prefers-reduced-motion: reduce) {
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .answer,
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .answer > .faq-item__answer,
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-item__chevron {
    transition: none;
  }
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .faq-item__answer-body,
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .answer-content {
  font-weight: 400;
  width: auto;
  padding: 0;
}
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .faq-item__answer-body p,
:is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .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, .page-product-view .pview-faq) .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;
  }
  .page-faq .faq-board__toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }
  .page-faq .faq-brand-filter {
    width: 100%;
    margin-left: 0;
    min-width: 0;
  }
  .page-faq .faq-brand-filter__control {
    min-width: 0;
  }
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item {
    padding: 1.875rem 1.25rem;
  }
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .faq-item__inner {
    gap: 0;
  }
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item a.faq-title.active + .answer > .faq-item__answer {
    padding-top: 1.875rem;
  }
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item a.faq-title {
    padding: 0;
  }
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .faq-wrap ul.faq li.faq-item .answer {
    padding: 0;
  }
  :is(.page-faq, .editorjs-content, .page-product-view .pview-faq) .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));
}
/* 페이지 전환 시 목록 앵커 (#news-list) — 고정 헤더에 가리지 않도록 오프셋 */
.page-news .news-board__list-start {
  --news-list-clearance: max(5rem, calc(var(--header-height, 80px) + max(1.5rem, var(--vw-24))));
  margin-top: calc(var(--news-list-clearance) * -1);
  padding-top: var(--news-list-clearance);
  scroll-margin-top: 0;
}
.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;
}

/* 상단 2열 featured + 이후 3열 그리드 (페이지당 20 = 2 + 3×6) */
.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 {
  margin-top: max(3.125rem, var(--vw-100));
}
.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: 767px) {
  .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: 0 0 max(1.875rem, var(--vw-30));
  padding-bottom: max(1.875rem, var(--vw-30));
  border-bottom: 1px solid #e1e7eb;
}
.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__cat {
  margin: 0;
  font-size: max(0.8125rem, var(--font-14));
  font-weight: 900;
  line-height: 1.2;
  color: #2070b6;
  border: 1px solid #2070b6;
  padding: 4px 10px;
  border-radius: 12px;
}
.page-news-post .news-post__cat--notice {
  color: #27cdab;
}
.page-news-post .news-post__cat--event {
  color: #6155f5;
}
.page-news-post .news-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: max(0.75rem, var(--vw-12));
  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 {
  display: block;
  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__related {
  margin-top: max(3.125rem, var(--vw-100));
  padding-top: max(2.5rem, var(--vw-40));
  border-top: 1px solid #e1e7eb;
}
.page-news-post .news-post__related-title {
  margin: 0 0 max(1.875rem, var(--vw-30));
  color: #131313;
  font-size: clamp(1.25rem, var(--font-24), 1.75rem);
  font-weight: 700;
  line-height: 1.3;
}
.page-news-post .news-post__related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(1.25rem, var(--vw-20));
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news-post .news-post__related-grid > li {
  display: flex;
  min-width: 0;
}
@media (min-width: 768px) {
  .page-news-post .news-post__related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.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)); */
  margin-top: max(3.125rem, var(--vw-100));
  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;
}

.page-news-post .newsletter-issue {
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, var(--vw-40));
}
.page-news-post .newsletter-issue__figure {
  margin: 0;
}
.page-news-post .newsletter-issue__figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.page-newsletter-post .news-post__hero,
.page-newsletter-post #post-content.news-post__body {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.page-newsletter-post .news-post__hero-img,
.page-newsletter-post .newsletter-issue__figure img {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}
.page-news-post .newsletter-issue__title,
.page-news-post .newsletter-issue__study-title {
  margin: max(1.25rem, var(--vw-20)) 0 0;
  color: #131313;
  font-size: clamp(1.25rem, var(--font-24), 1.5rem);
  font-weight: 700;
  line-height: 1.4;
}
.page-news-post .newsletter-issue__text {
  margin-top: max(0.75rem, var(--vw-12));
}
.page-news-post .newsletter-issue__actions {
  margin: max(1.25rem, var(--vw-20)) 0 0;
}
.page-news-post .newsletter-issue__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 44px;
  padding: 10px 20px;
  background: #154670;
  color: #fff;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.page-news-post .newsletter-issue__more:hover {
  background: #0d3354;
  color: #fff;
}
.page-news-post .newsletter-issue__studies {
  display: flex;
  flex-direction: column;
  gap: max(1.5rem, var(--vw-24));
  padding-top: max(1.5rem, var(--vw-24));
  border-top: 1px solid #e1e7eb;
}

@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;
  justify-content: center; /* 카피 블록을 이미지 영역 세로 중앙에 — 라인 등장 전부터 자리 고정 */
  box-sizing: border-box;
  height: 100%;
  min-height: inherit;
  /* 헤더 밴드만큼만 확보 → 남은 이미지 영역에서 중앙 정렬 */
  padding-top: var(--about-hero-header);
  padding-bottom: 0;
}
.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;
  z-index: 2;
}
.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;
  /* 모든 라인이 처음부터 레이아웃 높이를 차지 → 등장 중에도 세로 중앙 유지 */
  flex-shrink: 0;
}
.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;
  /* opacity:0 이어도 자리 유지 (중앙 정렬 기준 높이 고정) */
  visibility: visible;
}
.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;
  transform-origin: center center;
  will-change: transform;
}
.page-about-overview .about-mission__card-icon-img--calibrate {
  width: 60px;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .page-about-overview .about-mission__card-icon-img {
    will-change: auto;
  }
}
.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;
  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;
  border: 0;
  cursor: pointer;
  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-ci-download:hover,
.page-about-overview .about-ci-download:focus-visible {
  color: #fff;
  background: #123d5c;
  transform: translateY(2px);
}
.page-about-overview .about-ci-download img {
  display: block;
  width: 16px;
  height: 14px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-about-overview .about-ci-download:hover img,
.page-about-overview .about-ci-download:focus-visible img {
  animation: about-ci-download-arrow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes about-ci-download-arrow {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-about-overview .about-ci-download:hover img,
  .page-about-overview .about-ci-download:focus-visible img {
    animation: none;
  }
}
.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;
    justify-content: center;
    padding-top: var(--about-hero-header);
    padding-bottom: 0;
  }
  .page-about-overview .about-hero__breadcrumb {
    position: absolute;
    top: calc(var(--about-hero-header) + 10px);
    right: max(1.25rem, var(--vw-20, 1.25rem));
    left: auto;
    justify-content: flex-end;
    width: auto;
    margin-bottom: 0;
  }
  .page-about-overview .about-hero__copy {
    max-width: none;
    margin: 0;
    padding-inline: 1.25rem;
  }
  .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;
  }
}

/* ============================================================
   제품 카테고리 목록 — (9803:489)
   ============================================================ */
#contents.page-products-category--has-intro {
  /* margin-top: 0; */
}
#contents.page-products-category--has-intro .prd-list-start,
.page-products-category .prd-board {
  scroll-margin-top: max(3.75rem, var(--header-height));
}
.page-products-category .prd-intro {
  margin-bottom: max(6.25rem, var(--vw-100)); /* intro ↔ 하위 카테고리 100 */
}
.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 > .tessol-section:first-child {
  margin-top: 0;
}
/* 컨텐츠 폭 첫 섹션 — 헤더 아래 여백 60, 좁은 화면 하한 30 */
.page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .tessol-section--content:first-child {
  padding-top: max(1.875rem, var(--vw-60));
}
/* 풀와이드 히어로 — 메인 .hero 와 동일(카피 padding으로 GNB 여백 확보) */
.page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .tessol-section--wide:first-child .tessol-hero--wide,
.page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .tessol-section--wide:first-child .tessol-hero {
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
}
/* 카테고리 히어로 카피 — 메인 .hero__content 좌측 정렬 */
.page-products-category--has-intro .prd-intro__builder .tessol-hero--wide .tessol-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 {
  margin: 0;
  padding-top: max(3.125rem, var(--vw-50)); /* 헤더 하단 ↔ 브레드크럼 50 — 제품 상세와 동일 */
  padding-bottom: 0;
}
.page-products-category--has-intro .prd-breadcrumb {
  padding-top: 0;
}
.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;
}
.insight-breadcrumb__more {
  display: none;
  position: relative;
  align-items: center;
  margin-left: 2px;
}
.insight-breadcrumb__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #131313;
  border-radius: 4px;
  background: #fff;
  color: #131313;
  cursor: pointer;
}
.insight-breadcrumb__more-btn:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.insight-breadcrumb__more-icon {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}
.insight-breadcrumb__more.is-open {
  z-index: 30;
}
.prd-breadcrumb:has(.insight-breadcrumb__more.is-open),
.pview-breadcrumb:has(.insight-breadcrumb__more.is-open) {
  position: relative;
  z-index: 30;
}
.insight-breadcrumb__drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 31;
  min-width: 12.5rem;
  max-width: min(18rem, calc(100vw - 32px));
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #c8ced3;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(19, 19, 19, 0.12);
}
.insight-breadcrumb__drop[hidden] {
  display: none;
}
.page-products-category .insight-breadcrumb__drop .insight-breadcrumb__link,
.page-products-category .insight-breadcrumb__drop .insight-breadcrumb__text,
.page-products-category .insight-breadcrumb__drop .insight-breadcrumb__current,
.page-product-view .insight-breadcrumb__drop .insight-breadcrumb__link,
.page-product-view .insight-breadcrumb__drop .insight-breadcrumb__text,
.page-product-view .insight-breadcrumb__drop .insight-breadcrumb__current {
  display: block;
  padding: 10px 14px 10px calc(14px + var(--crumb-depth, 0) * 8px);
  color: #154670;
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: normal;
  text-decoration: none;
}
.page-products-category .insight-breadcrumb__drop .insight-breadcrumb__text,
.page-product-view .insight-breadcrumb__drop .insight-breadcrumb__text {
  color: #394147;
}
.page-products-category .insight-breadcrumb__drop .insight-breadcrumb__current,
.page-product-view .insight-breadcrumb__drop .insight-breadcrumb__current {
  color: #131313;
  font-weight: 600;
}
.insight-breadcrumb__drop .insight-breadcrumb__link:hover {
  background: #f2f4f5;
  text-decoration: 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: 0;
  color: #154670;
  text-decoration: none;
}
.page-products-category .insight-breadcrumb__home-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 4px;
}
.page-products-category .insight-breadcrumb__link {
  padding: 6px 6px 7px;
}
.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;
  margin: 2px;
  flex-shrink: 0;
}
.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;
  padding: 6px 2px 7px;
}
.page-products-category .insight-breadcrumb__current,
.page-products-category .insight-breadcrumb__text {
  color: #394147;
  padding: 6px 6px 7px;
}
.page-products-category .prd-board,
.page-products-category .prd-branch {
  padding-bottom: max(7.5rem, var(--vw-200)); /* 마지막 섹션 ↔ footer 200 */
}
.page-products-category .prd-child-catalog {
  padding-top: max(3.125rem, var(--vw-100)); /* 100 @1920 */
  padding-bottom: max(7.5rem, var(--vw-200)); /* 200 ↔ footer */
  background: #f2f4f5; /* TESSOL Fog Gray */
}
.page-products-category .prd-child-catalog .prd-board__title {
  margin: 0 0 max(2.5rem, var(--vw-60)); /* title ↔ grid 60 */
  color: #131313;
  font-size: clamp(1.5rem, var(--font-32), 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.page-products-category .prd-child-catalog__heading {
  margin: 0 0 max(1.5rem, var(--vw-24));
  color: #131313;
  font-size: clamp(1.125rem, var(--font-24), 1.5rem);
  font-weight: 700;
  line-height: 1.3;
}
.page-products-category .prd-child-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: max(1.25rem, var(--vw-36)); /* 36 @1920 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products-category .prd-child-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(0.75rem, var(--vw-16)); /* 16 @1920 */
  height: 100%;
  color: #131313;
  text-decoration: none;
}
.page-products-category .prd-child-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 190px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none; /* 디폴트 — 그림자 없음 */
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.page-products-category .prd-child-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.page-products-category .prd-child-card__name {
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
}
.page-products-category .prd-child-card:hover .prd-child-card__media {
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.08); /* Figma hover — TESSOL-바깥쪽그림자 */
}
.page-products-category .prd-child-card:focus-visible .prd-child-card__media {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}
.page-products-category .prd-branch__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: max(0.75rem, var(--vw-12));
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-products-category .prd-branch__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: max(0.75rem, var(--vw-12));
  border: 1px solid #c8ced3;
  border-radius: 8px;
  background: #fff;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.page-products-category .prd-branch__link:hover {
  border-color: #131313;
}
.page-products-category .prd-board__title {
  margin: 0 0 max(2.5rem, var(--vw-40)); /* 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 + .prd-sidebar__group:not([hidden]):not(.is-hidden) {
  margin-top: max(1.875rem, var(--vw-30));
  padding-top: max(1.875rem, var(--vw-30));
  border-top: 1px solid #959da4;
}
.page-products-category #prd-brand-sidebar[hidden],
.page-products-category #prd-brand-sidebar.is-hidden {
  display: none !important;
}
.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: max(1.25rem, var(--vw-20));
  margin: max(1.25rem, var(--vw-20)) 0 0;
  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 a.prd-chip:visited {
  color: #959da4;
}
.page-products-category .prd-chip.is-active,
.page-products-category a.prd-chip.is-active:visited {
  border-color: #131313;
  color: #131313;
  font-weight: 700;
}
.page-products-category button.prd-chip,
.page-products-category a.prd-chip {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.page-products-category .prd-sidebar__group--extra .prd-chip:not(.is-active) {
  color: #c8ced3;
}

.page-products-category .prd-brand-filter {
  margin-top: 20px;
  max-width: 272px;
}

.page-products-category .prd-brand-filter__scroll {
  box-sizing: border-box;
  max-height: clamp(16rem, var(--vw-240), 22rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #c8ced3;
  border-radius: 8px;
  padding: max(0.75rem, var(--vw-12)) max(1rem, var(--vw-16));
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #c8ced3 transparent;
  padding: 5px 15px;
}

.page-products-category .prd-brand-filter__scroll::-webkit-scrollbar {
  width: 6px;
}

.page-products-category .prd-brand-filter__scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c8ced3;
}

.page-products-category .prd-brand-filter__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.page-products-category .prd-brand-filter__item {
  display: flex;
  align-items: center;
  gap: max(0.625rem, var(--vw-10));
  min-height: 2.25rem;
  padding: max(0.5rem, var(--vw-8)) max(0.25rem, var(--vw-4));
  cursor: pointer;
  color: #131313;
  font-size: max(0.875rem, var(--font-14));
  line-height: 1.4;
}

.page-products-category .prd-brand-filter__item + .prd-brand-filter__item {
  margin-top: max(0.125rem, var(--vw-4));
}

.page-products-category .prd-brand-filter__input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #131313;
  cursor: pointer;
}

.page-products-category .prd-brand-filter__label {
  flex: 1;
  min-width: 0;
  padding: 0.125rem 0;
  word-break: keep-all;
}

.page-products-category .prd-brand-filter__empty {
  margin: max(0.75rem, var(--vw-12)) 0 0;
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-14));
}

.page-products-category .prd-list-panel[aria-busy="true"] {
  pointer-events: none;
}

.page-products-category .prd-toolbar__count-loading {
  display: none;
  color: #5e5e5e;
  font-weight: 500;
}

.page-products-category .prd-main.is-loading .prd-toolbar__count-ready {
  display: none;
}

.page-products-category .prd-main.is-loading .prd-toolbar__count-loading {
  display: inline;
}

.page-products-category .prd-list__loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(0.75rem, var(--vw-12));
  min-height: max(12.5rem, var(--vw-240));
  color: #154670;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 500;
  line-height: 1.4;
}

.page-products-category .prd-main.is-loading .prd-list__loading {
  display: flex;
}

.page-products-category .prd-main.is-loading .prd-grid,
.page-products-category .prd-main.is-loading .prd-pager,
.page-products-category .prd-main.is-loading .prd-list__empty {
  display: none;
}

.page-products-category .prd-list__spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid rgba(21, 70, 112, 0.18);
  border-top-color: #008cff;
  border-radius: 50%;
  animation: prd-list-spin 0.75s linear infinite;
}

@keyframes prd-list-spin {
  to { transform: rotate(360deg); }
}

.page-products-category .prd-list__empty.hide {
  display: none;
}

.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; /* Figma 10108:26529 */
  flex: 1 1 auto;
  width: 100%;
  /* Figma List Item 300: pad 25+250+25 — border는 inset로 콘텐츠 폭 유지 */
  padding: 21px 25px;
  border: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #c8ced3;
  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:
    inset 0 0 0 1px #c8ced3,
    0 4px 20px 4px rgba(0, 0, 0, 0.08);
}
.page-products-category .prd-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px; /* image → body (tag는 absolute) */
  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: visible;
}
.page-products-category .prd-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-products-category .prd-card__event {
  position: absolute;
  /* 300px 카드 · 이미지 x25/y21/250 기준, 뱃지 right 20·top 72 */
  top: 0;
  right: -5px;
  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 {
  position: absolute;
  top: max(0.75rem, var(--vw-16));
  left: max(0.75rem, var(--vw-16));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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; /* title → meta (Figma Frame 153) */
  flex: 1 1 auto;
  width: 100%;
  max-width: 250px;
}
.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.4;
  min-height: calc(1.4em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}
.page-products-category .prd-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px; /* MODEL ↔ 브랜드 (Figma Frame 154) */
  width: 100%;
}
.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.4;
}
.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 {
  margin-top: max(1.875rem, var(--vw-30));
}

@media (max-width: 1199px) {
  .page-products-category .prd-child-grid,
  .page-products-category .prd-branch__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .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,
  .page-products-category .prd-brand-filter {
    max-width: none;
  }
  .page-products-category .prd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .page-products-category .prd-child-grid,
  .page-products-category .prd-branch__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products-category .prd-breadcrumb {
    padding-top: 32px;
  }
  .page-products-category--has-intro .prd-breadcrumb {
    padding-top: 0;
  }
  .page-products-category .prd-intro {
    margin-bottom: 0;
  }

  .sub .prd-intro .tessol-section{padding-bottom: 0;}

  .page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .tessol-section--content:first-child {
    padding-top: 30px;
  }
  .page-products-category--has-intro .prd-intro__builder .editorjs-content--sections > .tessol-section--wide:first-child .tessol-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-brand-filter__scroll {
    max-height: 240px;
    padding: 12px 16px;
  }
  .page-products-category .prd-brand-filter__item {
    min-height: 40px;
    padding: 8px 4px;
  }
  .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 {
  gap: max(0.5rem, var(--vw-10));
  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));
}
.page-brands-detail #prd-list-panel {
  scroll-margin-top: var(--header-height, 80px);
  outline: none;
}
@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: 0;
  color: #154670;
  text-decoration: none;
}
.page-product-view .insight-breadcrumb__home-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 4px;
}
.page-product-view .insight-breadcrumb__link {
  padding: 6px 6px 7px;
}
.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;
  margin: 2px;
  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;
  padding: 6px 2px 7px;
}
.page-product-view .insight-breadcrumb__current,
.page-product-view .insight-breadcrumb__text {
  color: #394147;
  padding: 6px 6px 7px;
}

.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;
}
/* Figma 11804:9717 — 이미지 ↔ 타이틀 gap 20 */
.page-product-view .pview-docs--section .pview-docs__item {
  gap: max(1.25rem, var(--vw-20));
}
.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;
}
body.is-scroll-down .gnb-wrap {
  transform: translate3d(0, calc(-100% - var(--promo-bar-height, 0px)), 0);
  pointer-events: none;
}
body.is-scroll-down .promotion-bar {
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}
body.is-scroll-down .page-product-view .pview-tabs-sticky,
body.is-scroll-up .page-product-view .pview-tabs-sticky {
  top: 0;
  padding-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .gnb-wrap,
  .promotion-bar {
    transition: none;
  }
}
body.is-scroll-down .page-product-view .pview-aside {
  top: calc(var(--pview-tab-bar) + 16px);
}
body.is-scroll-up .page-product-view .pview-aside {
  top: calc(var(--header-height) + 16px);
}
.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-tab-panels {
  min-width: 0;
}
.page-product-view .pview-tab-loading {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: max(10rem, var(--vw-160));
  padding: max(2.5rem, var(--vw-40)) 0;
}
.page-product-view .pview-tab-panels.is-loading .pview-tab-loading {
  display: flex;
}
.page-product-view .pview-tab-panel {
  display: none;
}
.page-product-view .pview-tab-panel.is-active {
  display: block;
}
.page-product-view .pview-tab-panel[hidden] {
  display: none !important;
}
.tab-skel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 28rem);
}
.tab-skel__bar {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(100deg, #e7ecef 20%, #f7f9fa 40%, #e7ecef 60%);
  background-size: 200% 100%;
  animation: tab-skel-sweep 1.1s ease-in-out infinite;
}
.tab-skel__bar:nth-child(2) {
  width: 86%;
  animation-delay: 0.12s;
}
.tab-skel__bar--short {
  width: 58%;
  animation-delay: 0.24s;
}
@keyframes tab-skel-sweep {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-skel__bar {
    animation: none;
    background: #e7ecef;
  }
}
.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__lead {
  margin: 0 0 max(1.25rem, var(--vw-20));
  color: #394147;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.6;
}

/* 제품정보 더보기 — 높이 초과 시에만 JS가 is-collapsed 유지 */
.page-product-view .pview-info-clamp {
  position: relative;
}
.page-product-view .pview-info-clamp.is-collapsed .pview-info-clamp__body {
  max-height: var(--pview-clamp-max, 1000px);
  overflow: hidden;
}
.page-product-view .pview-info-clamp__fade {
  display: none;
  pointer-events: none;
}
.page-product-view .pview-info-clamp.is-collapsed .pview-info-clamp__fade {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(5rem, var(--vw-120));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 72%);
  z-index: 1;
}
.page-product-view .pview-info-clamp__more {
  display: none;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  margin: max(1.25rem, var(--vw-20)) auto 0;
  padding: max(0.875rem, var(--vw-14)) max(1.25rem, var(--vw-20));
  border: 1px solid #131313;
  border-radius: 4px;
  background: #fff;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.page-product-view .pview-info-clamp.is-collapsed .pview-info-clamp__more:not([hidden]) {
  display: block;
}
.page-product-view .pview-info-clamp__more:hover {
  background: #f7f8f9;
}
.page-product-view .pview-info-clamp__more:focus-visible {
  outline: 2px solid #008cff;
  outline-offset: 2px;
}

.page-product-view .pview-info__body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  color: #131313;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.6;
  word-break: keep-all;
}
/* CMS 본문(유튜브 iframe·영상·이미지)이 제품정보 열을 넘지 않게 */
.page-product-view .pview-info__body :where(img, video, iframe, embed, object, svg, table) {
  max-width: 100% !important;
  height: auto;
}
.page-product-view .pview-info__body :where(img, video, svg) {
  height: auto !important;
}
.page-product-view .pview-info__body img,
.page-product-view .pview-info__body video {
  display: block;
}
.page-product-view .pview-info__body :where(iframe, embed, object, video) {
  display: block;
  width: 100%;
  border: 0;
}
.page-product-view .pview-info__body video,
.page-product-view .pview-info__body iframe[src*="youtube"],
.page-product-view .pview-info__body iframe[src*="youtu.be"],
.page-product-view .pview-info__body iframe[src*="youtube-nocookie"],
.page-product-view .pview-info__body iframe[src*="vimeo"],
.page-product-view .pview-info__body iframe[data-src*="youtube"],
.page-product-view .pview-info__body iframe[data-src*="vimeo"] {
  aspect-ratio: 16 / 9;
  height: auto !important;
}
.page-product-view .pview-info__body :where(div, p, figure, span) {
  max-width: 100%;
}
.page-product-view .pview-info__body table {
  width: 100%;
  overflow-x: auto;
}
.page-product-view .pview-info__body p:last-child {
  margin-bottom: 0;
}
.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-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: max(2.5rem, var(--vw-60)) max(1.25rem, var(--vw-20));
  color: #5e5e5e;
  font-size: max(0.875rem, var(--font-16));
  line-height: 1.6;
  text-align: center;
}
.page-product-view .pview-empty--docs {
  min-height: max(12rem, var(--vw-224));
}
.page-product-view .pview-empty--faq {
  min-height: max(8rem, var(--vw-120));
}

.page-product-view .pview-faq {
  margin-bottom: 0;
}

.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 > .container > .pview-reco__head {
  align-items: center;
}
.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-slider__btn:disabled {
  cursor: default;
}
.page-product-view .pview-slider__btn.is-active .pview-slider__ring {
  filter: brightness(0.38);
}
.page-product-view .pview-slider__btn.is-active .pview-slider__chevron {
  filter: brightness(0);
}

.page-product-view .pview-reco .container,
.page-product-view .pview-insights .container {
  min-width: 0;
}
.page-product-view .pview-reco__track,
.page-product-view .pview-insights__track {
  display: flex;
  gap: max(1.875rem, var(--vw-40));
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.page-product-view .pview-reco__track.is-dragging,
.page-product-view .pview-insights__track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}
.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,
.page-news-post .prd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  flex: 1 1 auto;
  width: 100%;
  padding: max(1.3125rem, var(--vw-20)) max(1.5625rem, var(--vw-24));
  border: 1px solid #c8ced3;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.page-product-view .pview-reco .prd-card,
.page-product-view .pview-reco .prd-card.is-featured,
.page-product-view .pview-reco .prd-card:hover {
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.08);
}
.page-news-post .prd-card.is-featured,
.page-news-post .prd-card:hover {
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.08);
}
.page-product-view .prd-card__link,
.page-news-post .prd-card__link {
  display: flex;
  flex-direction: column;
  gap: max(1.25rem, var(--vw-20));
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.page-product-view .prd-card__thumb-wrap,
.page-news-post .prd-card__thumb-wrap {
  width: 250px;
  height: 250px;
  max-width: 100%;
  overflow: clip;
}
.page-product-view .prd-card__thumb,
.page-news-post .prd-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-product-view .prd-card__tag,
.page-news-post .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,
.page-news-post .prd-card__tag--best {
  border: 1px solid #00b894;
  color: #00b894;
}
.page-product-view .prd-card__tag--new,
.page-news-post .prd-card__tag--new {
  border: 1px solid #ff5a4f;
  color: #ff5a4f;
}
.page-product-view .prd-card__body,
.page-news-post .prd-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.page-product-view .prd-card__name,
.page-news-post .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,
.page-news-post .prd-card__model,
.page-news-post .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,
.page-news-post .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:not(.page-shop-item) .pview-aside {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 100%;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e1e7eb;
    box-shadow: 0 -4px 16px rgba(19, 19, 19, 0.06);
  }
  body.is-scroll-down .page-product-view:not(.page-shop-item) .pview-aside,
  body.is-scroll-up .page-product-view:not(.page-shop-item) .pview-aside {
    top: auto;
    bottom: 0;
  }
  .page-product-view:not(.page-shop-item) .pview-aside__name,
  .page-product-view:not(.page-shop-item) .pview-aside__meta {
    display: none;
  }
  .page-product-view:not(.page-shop-item) .pview-aside__card {
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .page-product-view:not(.page-shop-item) .pview-aside .pview-cta,
  .page-product-view:not(.page-shop-item) .pview-aside .pview-cta--stack {
    flex-direction: row;
    gap: 8px;
  }
  .page-product-view:not(.page-shop-item) .pview-aside .pview-btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
  }
  .page-product-view:not(.page-shop-item) {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.page-product-view:not(.page-shop-item)) .page-totop {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .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: 0;
    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,
  .page-news-post .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;
}

/* cert visual: CFC pin — fixed focus + --crop 화이트 전환 + 폭만 확대(높이 고정) */
.page-about-cert .about-cert-visual {
  position: relative;
  --crop: 0%;
}
.page-about-cert .about-cert-visual__head.is-slot {
  visibility: hidden;
}
.page-about-cert .about-cert-visual__head.is-focus {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate3d(0, var(--pin, 0px), 0);
  will-change: transform;
  z-index: 20; /* 이미지 위에 타이틀 고정 (CFC focus) */
  pointer-events: none;
  --crop: 0%;
}
.page-about-cert .about-cert-visual__head.is-focus a {
  pointer-events: auto;
}
.page-about-cert .about-cert-visual__focus-inner {
  position: relative;
  z-index: 1;
  clip-path: polygon(
    0 calc(100% - var(--crop, 0%)),
    100% calc(100% - var(--crop, 0%)),
    100% 0,
    0 0
  );
}
.page-about-cert .about-cert-visual__focus-inner.is-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  clip-path: polygon(
    0 100%,
    100% 100%,
    100% calc(100% - var(--crop, 0%)),
    0 calc(100% - var(--crop, 0%))
  );
}
.page-about-cert .about-cert-visual__focus-inner.is-light,
.page-about-cert .about-cert-visual__focus-inner.is-light a,
.page-about-cert .about-cert-visual__focus-inner.is-light .insight-breadcrumb__home-text,
.page-about-cert .about-cert-visual__focus-inner.is-light .insight-breadcrumb__link,
.page-about-cert .about-cert-visual__focus-inner.is-light .insight-breadcrumb__text,
.page-about-cert .about-cert-visual__focus-inner.is-light .insight-breadcrumb__current,
.page-about-cert .about-cert-visual__focus-inner.is-light .about-cert-head__title,
.page-about-cert .about-cert-visual__focus-inner.is-light .about-cert-head__lead {
  color: #fff;
}
.page-about-cert .about-cert-visual__focus-inner.is-light .insight-breadcrumb__home-icon,
.page-about-cert .about-cert-visual__focus-inner.is-light .insight-breadcrumb__sep img {
  filter: brightness(0) invert(1);
}
.page-about-cert .about-cert-visual__media {
  position: relative;
  display: block;
  z-index: 1;
  overflow: visible;
}
.page-about-cert .about-cert-visual__head {
  padding-bottom: 0;
}
.page-about-cert .about-cert-visual__space {
  /* CFC .desc-wrap .space — 타이틀↔이미지 접점 + pin 시 이미지 밑단 여백 */
  display: block;
  width: 100%;
  height: max(5rem, var(--vw-140));
  pointer-events: none;
}
.page-about-cert .about-cert-hero {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.page-about-cert .about-cert-hero__frame {
  position: relative;
  width: min(60rem, 100%); /* 시작: 960 원본 → 스크롤 시 풀와이드 */
  max-width: 100%;
  margin-inline: auto;
  /* 높이는 시작 비율로 고정 — width scrub 시 aspect-ratio 높이 점프 방지 (CFC height: 45vw) */
  height: calc(min(60rem, 100vw) * 573 / 960);
  overflow: hidden;
}
.page-about-cert .about-cert-hero__img {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translateX(-50%);
}

.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: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  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;
  position: relative;
  z-index: 2;
  background: #f2f4f5;
}
.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));
  margin-top: auto;
  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 */
  margin-top: auto;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  position: relative;
  z-index: 1;
}
.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-visual__head {
    padding-bottom: 0;
  }
  .page-about-cert .about-cert-visual__space {
    height: 2.5rem;
  }
  .page-about-cert .about-cert-hero {
    margin-top: 0;
  }
  .page-about-cert .about-cert-hero__frame {
    width: calc(100% - 2.5rem);
  }
  .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;
}

/* ethics visual: CFC pin — fixed focus + --crop 화이트 전환 + 폭만 확대(높이 고정) */
.page-about-ethics .about-ethics-visual {
  position: relative;
  --crop: 0%;
}
.page-about-ethics .about-ethics-visual__head.is-slot {
  visibility: hidden;
}
.page-about-ethics .about-ethics-visual__head.is-focus {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate3d(0, var(--pin, 0px), 0);
  will-change: transform;
  z-index: 20; /* 이미지 위에 타이틀 고정 (CFC focus) */
  pointer-events: none;
  --crop: 0%;
}
.page-about-ethics .about-ethics-visual__head.is-focus a {
  pointer-events: auto;
}
.page-about-ethics .about-ethics-visual__focus-inner {
  position: relative;
  z-index: 1;
  clip-path: polygon(
    0 calc(100% - var(--crop, 0%)),
    100% calc(100% - var(--crop, 0%)),
    100% 0,
    0 0
  );
}
.page-about-ethics .about-ethics-visual__focus-inner.is-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  clip-path: polygon(
    0 100%,
    100% 100%,
    100% calc(100% - var(--crop, 0%)),
    0 calc(100% - var(--crop, 0%))
  );
}
.page-about-ethics .about-ethics-visual__focus-inner.is-light,
.page-about-ethics .about-ethics-visual__focus-inner.is-light a,
.page-about-ethics .about-ethics-visual__focus-inner.is-light .insight-breadcrumb__home-text,
.page-about-ethics .about-ethics-visual__focus-inner.is-light .insight-breadcrumb__link,
.page-about-ethics .about-ethics-visual__focus-inner.is-light .insight-breadcrumb__text,
.page-about-ethics .about-ethics-visual__focus-inner.is-light .insight-breadcrumb__current,
.page-about-ethics .about-ethics-visual__focus-inner.is-light .about-ethics-head__title,
.page-about-ethics .about-ethics-visual__focus-inner.is-light .about-ethics-head__lead {
  color: #fff;
}
.page-about-ethics .about-ethics-visual__focus-inner.is-light .insight-breadcrumb__home-icon,
.page-about-ethics .about-ethics-visual__focus-inner.is-light .insight-breadcrumb__sep img {
  filter: brightness(0) invert(1);
}
.page-about-ethics .about-ethics-visual__media {
  position: relative;
  display: block;
  z-index: 1;
  overflow: visible;
}
.page-about-ethics .about-ethics-visual__head {
  padding-bottom: 0;
}
.page-about-ethics .about-ethics-visual__space {
  /* CFC .desc-wrap .space — 타이틀↔이미지 접점 + pin 시 이미지 밑단 여백 */
  display: block;
  width: 100%;
  height: max(5rem, var(--vw-140));
  pointer-events: none;
}
.page-about-ethics .about-ethics-hero {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.page-about-ethics .about-ethics-hero__frame {
  position: relative;
  width: min(60rem, 100%); /* 시작: 960 원본 → 스크롤 시 풀와이드 */
  max-width: 100%;
  margin-inline: auto;
  /* 높이는 시작 비율로 고정 — width scrub 시 aspect-ratio 높이 점프 방지 (CFC height: 45vw) */
  height: calc(min(60rem, 100vw) * 573 / 960);
  overflow: hidden;
}
.page-about-ethics .about-ethics-hero__img {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translateX(-50%);
}

.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-visual__head {
    padding-bottom: 0;
  }
  .page-about-ethics .about-ethics-visual__space {
    height: 2.5rem;
  }
  .page-about-ethics .about-ethics-hero {
    margin-top: 0;
  }
  .page-about-ethics .about-ethics-hero__frame {
    width: calc(100% - 2.5rem);
  }
  .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: 1 / 1;
  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;
  }
}

/* 우측 상단 이동 — 교정 .cal-top / 밸리데이션 .val-totop 과 동일 */
.page-totop {
  position: fixed;
  right: max(0.75rem, var(--vw-20));
  bottom: max(1.25rem, var(--vw-40));
  z-index: 280;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
.page-totop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.page-totop img {
  display: block;
  width: max(2.75rem, var(--vw-60));
  height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .page-totop {
    transition: none;
  }
}