/* ========================
   공통 컴포넌트
   2개 이상 페이지에서 공유하는 UI 컴포넌트
   프리픽스 없이 기존 BEM 네이밍 사용
======================== */

/* ========================
   버튼 컴포넌트
======================== */
/* 기본 버튼 — .btn + 사이즈(h60/h48) + 너비(hug/fixed) + 타입(primary/secondary/outlined/ghost) 조합 */
.btn-wrap {
  display: flex;
  justify-content: center;
  gap: 12rem; /* 그룹(버튼 2개 이상) 간격 — 단독 버튼엔 영향 없음 */
  width: 100%;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  letter-spacing: var(--letter-spacing-none);
  white-space: nowrap;
  border: 1px solid transparent; /* 채움 버튼도 테두리 기준 높이 일관 유지 */
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.2s ease;
}

.btn:disabled,
.btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* 사이즈 — h60(기본 CTA) / h48(보조) */
.btn--h60 {
  gap: var(--spacing-400); /* 16 */
  height: 60rem;
  min-width: 96rem;
  padding: 0 var(--padding-800); /* 32 */
  font-size: var(--type-b3); /* 18 */
}

.btn--h48 {
  gap: var(--spacing-300); /* 12 */
  height: 48rem;
  min-width: 80rem;
  padding: 0 var(--padding-600); /* 24 */
  font-size: var(--type-b4); /* 16 */
}

/* 너비 — Hug(내용 너비 · 필형) / Fixed(고정 너비 · 라운드 4) */
.btn--hug {
  width: auto;
  border-radius: var(--radius-full); /* 999 */
}

.btn--fixed {
  width: 100%;
  min-width: 120rem;
  padding: 0 var(--padding-600); /* 24 */
  border-radius: var(--radius-100); /* 4 */
}

/* 아이콘 (arrow-tail 등) — 인라인 SVG 대신 CSS 마스크 이미지로 렌더.
   색상은 currentColor 를 따라가 버튼 타입별로 자동 대응. 기본=오른쪽 화살표. */
.btn__icon {
  flex-shrink: 0;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-btn-arrow-r.svg") center / contain no-repeat;
  mask: url("../images/ico-btn-arrow-r.svg") center / contain no-repeat;
}
/* 왼쪽 화살표 (텍스트 앞) */
.btn__icon--left {
  -webkit-mask-image: url("../images/ico-btn-arrow-l.svg");
  mask-image: url("../images/ico-btn-arrow-l.svg");
}
/* 아래 이중 화살표 (더 보기) */
.btn__icon--down {
  -webkit-mask-image: url("../images/ico-chevrons-down.svg");
  mask-image: url("../images/ico-chevrons-down.svg");
}

.btn--h60 .btn__icon {
  width: 20rem;
  height: 20rem;
}

.btn--h48 .btn__icon {
  width: 16rem;
  height: 16rem;
}
/* 우상향 화살표(외부/바로가기 링크용) */
.btn__icon--up-right {
  -webkit-mask-image: url("../images/ico-arrow-up-right.svg");
  mask-image: url("../images/ico-arrow-up-right.svg");
}
/* 다운로드 아이콘 (파일 다운로드 버튼) */
.btn__icon--dl {
  -webkit-mask-image: url("../images/ico-download.svg");
  mask-image: url("../images/ico-download.svg");
}

/* 외부 링크 텍스트 버튼 — 파란 텍스트 + external-link 아이콘 (새 창 이동) */
.btn-external {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100); /* 4 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-point-default); /* #1475e7 */
}
.btn-external i {
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-external-link.svg") center / contain no-repeat;
  mask: url("../images/ico-external-link.svg") center / contain no-repeat;
}
.btn-external:hover,
.btn-external:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3rem;
}

/* ========================
   버튼 타입
======================== */

/* Primary — 솔리티 뉴블루 채움 */
.btn--primary {
  color: var(--color-btn-text-on-btn-white);
  background: var(--color-btn-default-primary); /* #1475e7 */
  border-color: var(--color-btn-default-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary.is-hover,
.btn--primary:active {
  background: var(--color-external-link-hover); /* #0858b6 */
  border-color: var(--color-external-link-hover);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.2s ease;
}
.btn--primary:disabled,
.btn--primary.is-disabled {
  background: var(--color-btn-disabled-primary); /* #f3f3f4 */
  border-color: var(--color-btn-disabled-primary);
  color: var(--color-btn-text-on-btn-disabled); /* #8a8c8e */
}

/* Secondary — 다크블루 채움 */
.btn--secondary {
  color: var(--color-btn-text-on-btn-white);
  background: var(--color-btn-default-secondary); /* #093568 */
  border-color: var(--color-btn-default-secondary);
}
.btn--secondary:hover,
.btn--secondary:focus-visible,
.btn--secondary.is-hover,
.btn--secondary:active {
  background: var(--color-btn-hover-secondary); /* #062141 */
  border-color: var(--color-btn-hover-secondary);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.2s ease;
}
.btn--secondary:disabled,
.btn--secondary.is-disabled {
  background: var(--color-btn-disabled-secondary); /* #f3f3f4 */
  border-color: var(--color-btn-disabled-secondary);
  color: var(--color-btn-text-on-btn-secondary-disabled); /* #a1a3a5 */
}

/* Outlined — 다크네이비 테두리 + 흰 배경 */
.btn--outlined {
  color: var(--color-btn-text-on-btn-black); /* #062141 */
  background: var(--color-btn-default-outline-fill); /* #fff */
  border-color: var(--color-btn-default-outline-stroke); /* #062141 */
}
.btn--outlined:hover,
.btn--outlined:focus-visible,
.btn--outlined.is-hover,
.btn--outlined:active {
  background: var(--color-bg-secondary-light-level-1); /* #e7f2ff */
  border-color: var(--color-line-point); /* #1475e7 */
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.2s ease;
}
.btn--outlined:disabled,
.btn--outlined.is-disabled {
  background: var(--color-btn-disabled-outline-fill); /* #f8f8f8 */
  border-color: var(--color-btn-disabled-outline-stroke); /* #d0d1d2 */
  color: var(--color-btn-text-on-btn-disabled); /* #8a8c8e */
}

/* Ghost — 흰 테두리/텍스트 (어두운 배경 위에서 사용) */
.btn--ghost {
  color: var(--color-btn-text-on-btn-white);
  background: transparent;
  border-color: var(--color-btn-default-ghost-stroke); /* #fff */
}
.btn--ghost:hover,
.btn--ghost:focus-visible,
.btn--ghost.is-hover,
.btn--ghost:active {
  color: var(--color-btn-text-on-btn-black); /* #062141 */
  background: var(--color-btn-hover-ghost-fill); /* #fff */
  border-color: var(--color-btn-hover-ghost-fill);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.2s ease;
}

/* ========================
   Bottom-Sticky — 하단 고정(플로팅) CTA 영역
   풀 너비, 버튼을 감싸는 영역에 그라데이션 배경. 단독 또는 2개 가로 배치.
======================== */
.btn-sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: 12rem;
  width: 100%;
  padding: 20rem 40rem 40rem;
}

/* 스티키 영역 내부 버튼은 영역을 균등 분할(단독 시 풀 너비) */
.btn-sticky .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ========================
   Text Button — 텍스트 + 셰브론 아이콘
   강조(strong)/기본(default)/비활성(disabled) × 사이즈(18/16/14)
======================== */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100); /* 4 */
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-text-default-medium); /* #535455 */
  cursor: pointer;
  text-decoration: none;
}

.btn-text:hover,
.btn-text:focus-visible {
  transition: opacity 0.4s ease, color 0.4s ease;
  opacity: 0.7;
}

.btn-text__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-btn-text-arrow.svg") center / contain no-repeat;
  mask: url("../images/ico-btn-text-arrow.svg") center / contain no-repeat;
}

/* 강조 — 가장 진한 텍스트 */
.btn-text--strong {
  color: var(--color-text-default-highest); /* #111 */
}

/* 기본 — 중간 텍스트 */
.btn-text--default {
  color: var(--color-text-default-medium); /* #535455 */
}

/* 비활성 */
.btn-text--disabled,
.btn-text:disabled {
  color: var(--color-text-default-lowest); /* #a1a3a5 */
  cursor: not-allowed;
  pointer-events: none;
}

/* 사이즈 — 18/16 SemiBold, 14 Regular(라인하이트 1.1) */
.btn-text--18 {
  font-size: var(--type-b3);
}
.btn-text--16 {
  font-size: var(--type-b4);
}
.btn-text--14 {
  font-size: var(--type-cap1);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-display); /* 1.1 */
}
.btn-text--18 .btn-text__icon,
.btn-text--16 .btn-text__icon {
  width: 20rem;
  height: 20rem;
}
.btn-text--14 .btn-text__icon {
  width: 16rem;
  height: 16rem;
}

/* ========================
   External Link — 외부 링크 텍스트 버튼
   타입(point/default/underline) × 사이즈(18/16/14) × 상태(hover/pressed/visited/disabled)
======================== */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100); /* 4 */
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight); /* 1.2 */
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-external-link-point); /* #1475e7 */
  cursor: pointer;
  text-decoration: none;
}

/* 아이콘 — 외부 링크 (마스크 + currentColor) */
.btn-link__icon {
  flex-shrink: 0;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-external-link.svg") center / contain no-repeat;
  mask: url("../images/ico-external-link.svg") center / contain no-repeat;
}

/* 타입 */
.btn-link--default {
  color: var(--color-text-default-highest); /* #111 */
}
.btn-link--underline {
  color: var(--color-text-default-highest);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* 상태 — hover/pressed/visited/disabled 공통 (타입 무관) */
.btn-link:hover,
.btn-link:focus-visible,
.btn-link.is-hover {
  color: var(--color-external-link-hover); /* #0858b6 */
  transition: color 0.4s ease;
}
.btn-link:active,
.btn-link.is-pressed {
  color: var(--color-external-link-pressed); /* #093568 */
}
.btn-link:visited:not(:hover):not(:active),
.btn-link.is-visited {
  color: var(--color-external-link-visited); /* #441c7d */
}
.btn-link--disabled,
.btn-link:disabled {
  color: var(--color-external-link-disabled); /* #a1a3a5 */
  cursor: not-allowed;
  pointer-events: none;
}

/* 사이즈 — 18/16 SemiBold, 14 Medium */
.btn-link--18 {
  font-size: var(--type-b3);
}
.btn-link--16 {
  font-size: var(--type-b4);
}
.btn-link--14 {
  font-size: var(--type-cap1);
  font-weight: var(--font-weight-medium);
}
.btn-link--18 .btn-link__icon {
  width: 20rem;
  height: 20rem;
}
.btn-link--16 .btn-link__icon,
.btn-link--14 .btn-link__icon {
  width: 16rem;
  height: 16rem;
}

/* ========================================================
   인풋 — .input (솔리티 디자인)
   타입: Outlined(기본) / --underline
   사이즈: h60(기본 · 텍스트18) / --h48(텍스트16)
   상태: 포커스(:focus-within) / 오류(.is-error) / 비활성(.is-disabled) / 읽기전용(.is-readonly)
   변형: --textarea(글자수 카운터) / 날짜·비밀번호는 꼬리 아이콘 버튼 조합
======================================================== */
.input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300); /* 12 */
  min-width: 180rem;
}

/* 라벨 (필수 표시 포함) */
.input__title {
  display: flex;
  gap: var(--spacing-100); /* 4 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
.input__required {
  color: var(--color-text-status-danger); /* #c41b24 */
}

/* 필드 박스 */
.input__box {
  display: flex;
  align-items: center;
  gap: var(--spacing-400); /* 16 */
  height: 60rem;
  padding: 0 var(--padding-400); /* 16 */
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-bd-default); /* #8a8c8e */
  width: 100%;
}

/* 네이티브 필드 */
.input__field {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-text-default-highest);
}
.input__field::placeholder {
  color: var(--color-text-default-medium); /* #535455 */
}
.input__field:focus {
  outline: none;
}

/* 꼬리 아이콘 버튼 — 삭제(x) / 비밀번호 보기 / 캘린더 */
.input__btn {
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  background-color: var(--color-ic-gray); /* #8a8c8e */
  -webkit-mask: url("../images/ico-delete-circle.svg") center / contain no-repeat;
  mask: url("../images/ico-delete-circle.svg") center / contain no-repeat;
}
.input__btn--show {
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask-image: url("../images/ico-eye.svg");
  mask-image: url("../images/ico-eye.svg");
}
.input__btn--calendar {
  background-color: var(--color-ic-black);
  -webkit-mask-image: url("../images/ico-calendar.svg");
  mask-image: url("../images/ico-calendar.svg");
}
/* 파일 삭제 — 아웃라인 x-circle (피그마 ic/20/x-circle) */
.input__btn--x-circle {
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask-image: url("../images/ico-x-circle.svg");
  mask-image: url("../images/ico-x-circle.svg");
}

/* 하단 영역 — 도움말 + 글자수 카운터 */
.input__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-400);
  width: 100%;
}
.input__help {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text-default-medium); /* #535455 */
}
.input__count {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4);
  color: var(--color-text-default-low); /* #8a8c8e */
  white-space: nowrap;
}

/* 상태 — 포커스/입력 중 (.is-focused 는 가이드 데모용) */
.input__box:focus-within,
.input.is-focused .input__box {
  border-color: var(--color-bd-focused); /* #111 */
}

/* 상태 — 오류 */
.input.is-error .input__box {
  border-color: var(--color-bd-error); /* #c41b24 */
}
.input.is-error .input__help,
.input.is-error .input__count {
  color: var(--color-text-status-danger);
}
/* 오류 메시지 전용 help — 평소 숨김, 오류 상태에서만 노출 (2026-10-12 · 문의 폼 QA) */
.input__help--error {
  display: none;
}
.input.is-error .input__help--error {
  display: block;
}

/* 상태 — 비활성 */
.input.is-disabled .input__box {
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-color: var(--color-bd-disabled); /* #d0d1d2 */
}
.input.is-disabled .input__field {
  color: var(--color-text-default-lowest);
}
.input.is-disabled .input__field::placeholder {
  color: var(--color-text-default-lowest); /* #a1a3a5 */
}
.input.is-disabled .input__btn {
  background-color: var(--color-ic-disabled); /* #d0d1d2 */
}
.input.is-disabled .input__field {
  pointer-events: none;
}

/* 상태 — 읽기전용 */
.input.is-readonly .input__box {
  background: var(--color-bg-primary-light-level-1);
  border-color: var(--color-bd-disabled);
}
.input.is-readonly .input__field {
  color: var(--color-text-default-high); /* #373839 */
  pointer-events: none;
}
.input.is-readonly .input__btn {
  background-color: var(--color-ic-disabled);
}

/* 타입 — 언더라인 */
.input--underline {
  gap: var(--spacing-200); /* 8 */
}
.input--underline .input__box {
  height: 60rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-bd-default);
}
.input--underline.is-disabled .input__box,
.input--underline.is-readonly .input__box {
  background: transparent;
}

/* 사이즈 — h48 */
.input--h48 .input__box {
  height: 48rem;
}
.input--h48 .input__field {
  font-size: var(--type-b4); /* 16 */
}
.input--h48 .input__btn {
  width: 16rem;
  height: 16rem;
}
.input--h48 .input__help {
  font-size: var(--type-cap1); /* 14 */
  line-height: var(--lh-display); /* 1.1 */
}

/* 변형 — 텍스트에어리어 */
.input--textarea .input__box {
  height: auto;
  padding: var(--padding-400); /* 16 */
  align-items: stretch;
}
.input--textarea .input__field {
  height: 110rem;
  resize: none;
  border: none;
  background: none;
  letter-spacing: var(--letter-spacing-none);
}
.input--textarea.input--h48 .input__field {
  font-size: var(--type-b4);
}

/* ========================================================
   체크박스 — .checkbox (솔리티 디자인)
   사이즈: --lg(박스24·라벨20) / --md(박스24·라벨18) / --sm(박스20·라벨16)
   상태: 선택(:checked) / 미선택 / 비활성(:disabled) / 읽기전용(--readonly)
   박스는 CSS로 그리고 체크 표시는 마스크 아이콘으로 렌더
======================================================== */
.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-300); /* 12 */
  position: relative;
  cursor: pointer;
}

/* 네이티브 input 시각적 숨김 (접근성 유지)
   라벨 좌상단에 고정 — 뷰포트 밖에 놓이면 포커스 시 페이지 스크롤이 튄다 */
.checkbox__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 박스 */
.checkbox__mark {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 24rem;
  height: 24rem;
  background: var(--color-checkbox-unselected-fill);
  border: 1px solid var(--color-checkbox-unselected-border);
}

/* 체크 표시 (마스크 + 상태별 색상) */
.checkbox__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  -webkit-mask: url("../images/ico-check.svg") center / 100% 100% no-repeat;
  mask: url("../images/ico-check.svg") center / 100% 100% no-repeat;
}

/* 선택 */
.checkbox__input:checked + .checkbox__mark {
  background: var(--color-checkbox-selected-fill); /* #1475e7 */
  border-color: var(--color-checkbox-selected-fill);
}
.checkbox__input:checked + .checkbox__mark::after {
  background-color: var(--color-neutral-white);
}

/* 비활성 */
.checkbox__input:disabled + .checkbox__mark {
  background: var(--color-checkbox-disabled-fill); /* #e8e8e8 */
  border-color: var(--color-checkbox-disabled-border); /* #b9babb */
}
.checkbox__input:disabled:checked + .checkbox__mark::after {
  background-color: var(--color-ic-disabled); /* #d0d1d2 */
}
.checkbox:has(.checkbox__input:disabled) {
  cursor: not-allowed;
}

/* 읽기전용 — 체크된 상태 유지 + 회색 표현 (input에 disabled 대신 클래스 사용) */
.checkbox--readonly .checkbox__mark {
  background: var(--color-checkbox-disabled-fill);
  border-color: var(--color-checkbox-disabled-border);
}
.checkbox--readonly .checkbox__mark::after {
  background-color: var(--color-ic-disabled); /* #d0d1d2 */
}
.checkbox--readonly {
  cursor: default;
  pointer-events: none;
}

/* 포커스 (키보드) */
.checkbox__input:focus-visible + .checkbox__mark {
  outline: 2rem solid var(--color-line-point);
  outline-offset: 2rem;
}

/* 라벨 + 부가 설명 */
.checkbox__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100); /* 4 */
}
.checkbox__label {
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-text-default-highest);
}
.checkbox__desc {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
}
.checkbox__input:disabled ~ .checkbox__text .checkbox__label,
.checkbox__input:disabled ~ .checkbox__text .checkbox__desc,
.checkbox--readonly .checkbox__label,
.checkbox--readonly .checkbox__desc {
  color: var(--color-text-default-lowest); /* #a1a3a5 */
}

/* 사이즈 */
.checkbox--md .checkbox__label {
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
}
.checkbox--sm .checkbox__mark {
  width: 20rem;
  height: 20rem;
}
.checkbox--sm .checkbox__label {
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
}
.checkbox--sm .checkbox__desc {
  font-size: var(--type-cap1); /* 14 */
  line-height: var(--lh-display); /* 1.1 */
}

/* 리스트 (그룹) — Horizontal / Vertical */
.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 26rem 48rem;
}
.checkbox-list--vertical {
  flex-direction: column;
  gap: 26rem;
}
.checkbox-list--vertical:has(.checkbox--sm) {
  gap: 24rem;
}

/* ========================================================
   라디오 버튼 — .radio (솔리티 디자인)
   사이즈: --lg(원24·라벨20) / --md(원24·라벨18) / --sm(원20·라벨16)
   상태: 선택(:checked) / 미선택 / 비활성(:disabled) / 읽기전용(--readonly)
   원과 도트 모두 CSS로 렌더 (체크박스와 동일 팔레트 토큰 사용)
======================================================== */
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-300); /* 12 */
  cursor: pointer;
}

/* 네이티브 input 시각적 숨김 (접근성 유지) */
.radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 원 */
.radio__mark {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 24rem;
  height: 24rem;
  margin-top: 3rem; /* 첫 줄 텍스트와 수직 정렬 */
  background: var(--color-checkbox-unselected-fill);
  border: 1px solid var(--color-checkbox-unselected-border);
  border-radius: 50%;
}

/* 내부 도트 — 지름은 원의 41.7% (24→10, 20→8.3) */
.radio__mark::after {
  content: "";
  position: absolute;
  inset: 29.2%;
  border-radius: 50%;
  background-color: transparent;
}

/* 선택 */
.radio__input:checked + .radio__mark {
  background: var(--color-checkbox-selected-fill); /* #1475e7 */
  border-color: var(--color-checkbox-selected-fill);
}
.radio__input:checked + .radio__mark::after {
  background-color: var(--color-neutral-white);
}

/* 비활성 */
.radio__input:disabled + .radio__mark {
  background: var(--color-checkbox-disabled-fill); /* #e8e8e8 */
  border-color: var(--color-checkbox-disabled-border); /* #b9babb */
}
.radio__input:disabled:checked + .radio__mark::after {
  background-color: var(--color-ic-disabled); /* #d0d1d2 */
}
.radio:has(.radio__input:disabled) {
  cursor: not-allowed;
}

/* 읽기전용 — 선택 상태 유지 + 회색 표현 */
.radio--readonly .radio__mark {
  background: var(--color-checkbox-disabled-fill);
  border-color: var(--color-checkbox-disabled-border);
}
.radio--readonly .radio__mark::after {
  background-color: var(--color-ic-disabled); /* #d0d1d2 */
}
.radio--readonly {
  cursor: default;
  pointer-events: none;
}

/* 포커스 (키보드) */
.radio__input:focus-visible + .radio__mark {
  outline: 2rem solid var(--color-line-point);
  outline-offset: 2rem;
}

/* 라벨 + 부가 설명 — 한글 본문형 (Pretendard Regular · 자간 -2% · 행간 1.6) */
.radio__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100); /* 4 */
}
.radio__label {
  font-family: var(--font-family-kor);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--color-text-default-highest);
}
.radio__desc {
  font-family: var(--font-family-kor);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--color-text-default-medium); /* #535455 */
}
.radio__input:disabled ~ .radio__text .radio__label,
.radio__input:disabled ~ .radio__text .radio__desc,
.radio--readonly .radio__label,
.radio--readonly .radio__desc {
  color: var(--color-text-default-lowest); /* #a1a3a5 */
}

/* 사이즈 */
.radio--md .radio__label {
  font-size: var(--type-b3); /* 18 */
}
.radio--sm .radio__mark {
  width: 20rem;
  height: 20rem;
}
.radio--sm .radio__label {
  font-size: var(--type-b4); /* 16 */
}
.radio--sm .radio__desc {
  font-size: var(--type-cap1); /* 14 */
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-none);
}

/* 리스트 (그룹) — Horizontal / Vertical */
.radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24rem 48rem;
}
.radio-list--vertical {
  flex-direction: column;
  gap: 24rem;
}

/* ========================================================
   셀렉트박스 — .selectbox (솔리티 디자인)
   사이즈: h60(기본 · 라벨20 Medium · 아이콘20 · min 160) / --h48(라벨16 Regular · 아이콘16 · min 110)
   상태: default / 포커스(:focus-visible, .is-focused) / 열림(.is-active)
        / 선택완료(테두리 default 유지) / 오류(.is-error) / 비활성(:disabled) / 읽기전용(.is-readonly)
======================================================== */
.selectbox {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-200); /* 8 */
  height: 60rem;
  min-width: 160rem;
  padding: 0 var(--padding-400); /* 16 */
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-bd-default); /* #8a8c8e */
  cursor: pointer;
  text-align: left;
}

/* 선택 값 / 플레이스홀더 */
/* 2026-10-08 수정 (QA 30) — 셀렉트 텍스트를 .input__field 기준(18 Regular 1.4)으로 통일, 미선택(placeholder) 상태는 input placeholder 컬러 #535455 */
.selectbox__value {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-text-default-highest); /* #111 */
}
.select-wrap:not(.is-selected) .selectbox__value {
  color: var(--color-text-default-medium); /* #535455 — 옵션 선택 전 placeholder 상태 */
}

/* 화살표 아이콘 — 마스크 + currentColor, 열림 시 회전 */
.selectbox__icon {
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  display: inline-block;
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask: url("../images/ico-select-arrow.svg") center / contain no-repeat;
  mask: url("../images/ico-select-arrow.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}

/* 포커스 (키보드/클릭) */
.selectbox:focus-visible,
.selectbox.is-focused {
  border-color: var(--color-bd-focused); /* #111 */
  outline: none;
}

/* 열림 (옵션 리스트 노출) */
.selectbox.is-active {
  border-color: var(--color-bd-active); /* #111 */
}
.selectbox.is-active .selectbox__icon {
  transform: rotate(180deg);
}

/* 오류 */
.selectbox.is-error {
  border-color: var(--color-bd-error); /* #c41b24 */
}

/* 비활성 */
.selectbox:disabled,
.selectbox.is-disabled {
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-color: var(--color-bd-disabled); /* #d0d1d2 */
  cursor: not-allowed;
  pointer-events: none;
}
.selectbox:disabled .selectbox__value,
.selectbox.is-disabled .selectbox__value {
  color: var(--color-text-default-lowest); /* #a1a3a5 */
}
.selectbox:disabled .selectbox__icon,
.selectbox.is-disabled .selectbox__icon {
  background-color: var(--color-ic-disabled); /* #d0d1d2 */
}

/* 읽기전용 — 값은 유지하고 조작 불가 */
.selectbox.is-readonly {
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
  border-color: var(--color-bd-disabled); /* #d0d1d2 */
  cursor: default;
  pointer-events: none;
}
.selectbox.is-readonly .selectbox__value {
  color: var(--color-text-default-high); /* #373839 */
}
.selectbox.is-readonly .selectbox__icon {
  background-color: var(--color-ic-disabled); /* #d0d1d2 */
}

/* 옵션 리스트 — .select-wrap 으로 감싸면 셀렉트 아래 드롭다운 노출 (.is-open) */
.select-wrap {
  position: relative;
}
.select-wrap .selectbox {
  width: 100%;
}
.selectbox__options {
  display: none;
  position: absolute;
  top: calc(100% + 4rem);
  left: 0;
  z-index: 10;
  width: 100%;
  max-height: 244rem; /* 4개 노출 + 다음 항목 살짝 */
  overflow-y: auto;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-bd-default); /* #8a8c8e */
}
.select-wrap.is-open .selectbox__options {
  display: block;
}
.select-wrap.is-open .selectbox {
  border-color: var(--color-bd-active); /* #111 */
}
.select-wrap.is-open .selectbox__icon {
  transform: rotate(180deg);
}
.selectbox__options button {
  display: block;
  width: 100%;
  height: 60rem;
  padding: 0 var(--padding-400); /* 16 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
  text-align: left;
}
.selectbox__options button:hover,
.selectbox__options button:focus-visible {
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
}
.selectbox__options .is-selected {
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-new-blue); /* #1475e7 */
}

/* 사이즈 — h48 */
.selectbox--h48 {
  height: 48rem;
  min-width: 110rem;
}
.selectbox--h48 .selectbox__value {
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
}
.selectbox--h48 .selectbox__icon {
  width: 16rem;
  height: 16rem;
}
/* ========================================================
   브레드크럼 — 서브페이지 공통 (홈 아이콘 · 구분점 · 현재 위치)
======================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-600); /* 24 */
  padding: var(--gap-xs) var(--padding-2000) 0; /* 60 80 0 */
}
.breadcrumb__home {
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  display: inline-block;
  background-color: var(--color-ic-gray); /* #8a8c8e */
  -webkit-mask: url("../images/ico-breadcrumb-home.svg") center / contain no-repeat;
  mask: url("../images/ico-breadcrumb-home.svg") center / contain no-repeat;
}
.breadcrumb__dot {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-gray-300); /* #b9babb */
}
.breadcrumb__text {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-high); /* #373839 */
}
/* 모바일 — 시안에 브레드크럼 없음 (390 시안 기준) */
@media (max-width: 1024px) {
  .breadcrumb {
    display: none;
  }
}

/* ========================================================
   페이지 타이틀 — 서브페이지 공통 (중앙 정렬 h2)
======================================================== */
.page-title {
  padding: var(--padding-1500) 0 var(--padding-2000); /* 60 0 80 */
  text-align: center;
}
.page-title__heading {
  font-family: var(--font-family-eng);
  font-size: var(--type-h2); /* 64 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
/* 타이틀 하단 설명 (선택) */
.page-title__desc {
  /* max-width: 1024rem; */
  margin: var(--spacing-500) auto 0; /* 20 */
  padding: 0 var(--padding-500);
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-low); /* #8a8c8e */
}

/* ========================================================
   검색바 — .search-bar (필형 · 아이콘 우측)
======================================================== */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-400); /* 16 */
  width: 720rem;
  max-width: 100%;
  height: 60rem;
  padding: 0 var(--padding-600); /* 24 */
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-bd-default); /* #8a8c8e */
  border-radius: var(--radius-full);
}
.search-bar__input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-text-default-highest);
}
.search-bar__input::placeholder {
  color: var(--color-text-default-low); /* #8a8c8e */
}
.search-bar__input:focus {
  outline: none;
}
.search-bar__btn {
  flex-shrink: 0;
  width: 32rem;
  height: 32rem;
  background-color: var(--color-ic-black);
  -webkit-mask: url("../images/ico-search-32.svg") center / contain no-repeat;
  mask: url("../images/ico-search-32.svg") center / contain no-repeat;
}
/* 입력 초기화 버튼 — 텍스트 1자 이상 입력 시에만 노출 (.has-text)
   2색 아이콘(회색 원 + 흰 X)이라 mask가 아닌 background 이미지로 사용 */
.search-bar__del {
  flex-shrink: 0;
  display: none;
  width: 24rem;
  height: 24rem;
  background: url("../images/ico-delete-circle.svg") center / contain no-repeat;
}
.search-bar.has-text .search-bar__del {
  display: block;
}
.search-bar__del:hover,
.search-bar__del:focus-visible {
  opacity: 0.7;
}

/* ========================================================
   버블 탭 — .tabs-bubble / .tab-bubble (필형 필터 탭)
======================================================== */
.tabs-bubble {
  display: flex;
  gap: var(--spacing-200); /* 8 */
  padding: 0 var(--padding-500); /* 20 */
  max-width: 100%;
  overflow-x: auto;
}
.tab-bubble {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48rem;
  min-width: 60rem;
  padding: 0 var(--padding-600); /* 24 */
  border-radius: var(--radius-full);
  background: var(--color-bg-primary-light-level-2); /* #f3f3f4 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-medium); /* #535455 */
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tab-bubble:hover,
.tab-bubble:focus-visible {
  background: var(--color-bg-primary-light-level-3); /* #e8e8e8 */
}
.tab-bubble.is-active {
  background: var(--color-brand-new-blue); /* #1475e7 */
  color: var(--color-text-default-white);
  font-weight: var(--font-weight-semibold);
}
/* 드롭다운형 변형 — 고정 폭 240 + 아래 화살표, 카테고리·유형 선택 (All Products 등) */
.tab-bubble--select {
  justify-content: space-between;
  width: 240rem;
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  color: var(--color-btn-text-on-btn-secondary-disabled); /* #8a8c8e */
}
.tab-bubble--select i {
  width: 16rem;
  height: 16rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-select-arrow.svg") center / contain no-repeat;
  mask: url("../images/ico-select-arrow.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}

/* 카테고리 드롭다운 래퍼 — 열림 시 버튼 뒤에서 파란 패널이 아래로 확장 (시안 7596-14780) */
.cate-select {
  position: relative;
}
.cate-select .tab-bubble--select {
  position: relative;
  z-index: 11; /* 패널 위에 버튼(텍스트/화살표) 유지 */
  background: transparent; /* 배경은 패널(.cate-select__list)이 담당 — 박스가 그대로 늘어나는 연출 */
  transition: color 0.3s ease;
}
/* 드롭다운 포함 시 — 아래 콘텐츠(스크롤 모션 카드) 위로 레이어링.
   평소엔 가로 스크롤 유지(모바일), 드롭다운이 열린 동안만 클리핑 해제 */
.tabs-bubble:has(.cate-select) {
  position: relative;
  z-index: 20;
}
.tabs-bubble:has(.cate-select.is-open),
.tabs-bubble:has(.cate-select.is-closing) {
  overflow: visible; /* is-closing — 접힘 모션이 잘리지 않게 닫힘 애니메이션 동안 유지 */
}
/* 열린 상태 — 흰 텍스트/화살표 */
.cate-select.is-open .tab-bubble--select {
  color: var(--color-text-default-white);
}
.cate-select.is-open .tab-bubble--select i {
  transform: rotate(180deg);
}
.cate-select__list {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  flex-direction: column;
  gap: var(--spacing-300); /* 12 */
  width: 100%;
  height: 48rem; /* 닫힘 — 셀렉트박스 자체 크기 */
  padding: 0 24rem 24rem; /* 상단 오프셋은 첫 항목 margin으로 — 내용이 제자리에 고정되도록 */
  overflow: hidden;
  background: var(--color-bg-primary-light-level-2); /* #f3f3f4 — 닫힘 = 버블 탭과 동일 */
  border-radius: 24rem; /* 닫힘 = 필형 (높이 48의 절반 — 999 사용 시 라운드 전환 중 원형으로 부풀어 보임) */
  pointer-events: none;
  /* 열림/닫힘 — 내용은 제자리에 두고 박스만 늘어나고 접히며 파란색으로 전환 */
  transition: height 0.4s ease, background-color 0.4s ease, border-radius 0.4s ease;
}
.cate-select__list li:first-child {
  margin-top: 68rem; /* 버튼(48) + 20 — 고정 오프셋 */
}
/* 두 번째 셀렉트(Access Devices) — 피그마 기준 더 연한 회색 (btn/disabled/outline-fill) */
.cate-select + .cate-select .cate-select__list {
  background: var(--color-bg-primary-light-level-1); /* #f8f8f8 */
}
.cate-select.is-open .cate-select__list {
  /* 열림 높이는 항목 수에 맞게 JS(scrollHeight)로 지정 */
  background: var(--color-brand-new-blue); /* #1475e7 */
  border-radius: 21rem;
  pointer-events: auto;
}
/* 닫힘 hover — 버튼 배경이 투명이므로 패널이 hover 색을 대신 표현 */
.cate-select:hover .cate-select__list,
.cate-select:focus-within .cate-select__list {
  background: var(--color-bg-primary-light-level-3); /* #e8e8e8 */
}
.cate-select.is-open:hover .cate-select__list,
.cate-select.is-open:focus-within .cate-select__list {
  background: var(--color-brand-new-blue);
}
/* 옵션 선택됨 — 닫힌 셀렉트박스가 선택 값과 함께 활성(파랑) 표시 */
.cate-select.is-selected .cate-select__list {
  background: var(--color-brand-new-blue); /* #1475e7 */
}
.cate-select.is-selected .tab-bubble--select {
  color: var(--color-text-default-white);
  font-weight: var(--font-weight-semibold);
}
/* 리스트 항목 — 닫힘 동안 포커스 이동 방지 */
.cate-select__list li {
  visibility: hidden;
  transition: visibility 0.4s;
}
.cate-select.is-open .cate-select__list li {
  visibility: visible;
}
.cate-select__list a {
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-white);
  white-space: nowrap;
}
.cate-select__list a:hover,
.cate-select__list a:focus-visible {
  text-decoration: underline;
  text-underline-position: from-font;
}
/* 모바일 — 풀 와이드 + 사이드 패딩 24 (390 시안) */
@media (max-width: 1024px) {
  .tabs-bubble {
    width: 100%;
    padding: 0 var(--padding-600); /* 24 */
  }
}

/* ========================================================
   프라이머리 탭 — .tabs-primary / .tab-primary (밑줄형 + 숫자 뱃지)
======================================================== */
.tabs-primary {
  display: flex;
  width: 100%;
  background: var(--color-bg-default-white);
}
.tab-primary {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rem;
  border-bottom: 2rem solid var(--color-line-low); /* #e8e8e8 */
  background: var(--color-bg-default-white);
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-low); /* #8a8c8e */
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.tab-primary:hover,
.tab-primary:focus-visible {
  color: var(--color-text-default-high);
}
.tab-primary.is-active {
  border-bottom-color: var(--color-line-highest); /* #111 */
  color: var(--color-text-default-highest);
}
/* 모바일 — 콘텐츠 폭 탭 + 가로 스크롤, inner(사이드 24) 밖 풀 블리드 (390 시안)
/* 숫자 뱃지 — 필형 20 높이, 라벨 우상단 수퍼스크립트 배치 (Figma badge/number) */
.tab-primary__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20rem;
  height: 20rem;
  padding: 0 var(--padding-200); /* 8 — 2자리 기준, 1자리는 min-width 20으로 원형 유지 */
  border: 1rem solid var(--color-line-white);
  border-radius: var(--radius-full);
  background: var(--color-ic-point); /* #1475e7 */
  font-family: var(--font-family-kor);
  font-size: 12rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-neutral-white);
  transform: translateY(-10rem); /* 뱃지 하단 = 라벨 세로 중앙 */
}
@media (max-width: 1024px) {
  .tabs-primary {
    width: calc(100% + 48rem);
    margin: 0 -24rem;
    overflow-x: auto;
  }
  .tab-primary {
    flex: 0 0 auto;
    padding: 0 var(--spacing-600); /* 24 */
  }
}

/* ========================================================
   세컨더리 탭 — .tabs-secondary / .tab-secondary (텍스트형 앵커 탭, Figma tabs/secondary)
   페이지 내 섹션 이동용 — 활성 탭 밑줄 2rem, 바 하단 라인 1px
======================================================== */
/* 고정 래퍼 — ScrollTrigger pin 대상. 고정 중 헤더가 보이면 탭을 헤더 높이만큼 내려 헤더 아래에 붙임 (코웨이 방식, pages.js) */
.tabs-secondary-wrap {
  position: relative;
  z-index: 30;
}
/* 헤더 아래 고정 홀더 — 고정 구간에서 탭/바로가기 바를 담음 (pages.js fixUnderHeader) */
.fixed-under-header {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 90; /* 헤더(100) 아래 */
}
.fixed-under-header.is-on {
  display: block;
}
.tabs-secondary {
  display: flex;
  justify-content: center;
  gap: 32rem;
  width: 100%;
  padding: 0 var(--padding-600); /* 24 */
  border-bottom: 1px solid var(--color-line-low); /* #e8e8e8 */
  background: var(--color-bg-default-white);
}
.tab-secondary {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 60rem;
  margin-bottom: -1px; /* 활성 밑줄이 바 하단 라인을 덮도록 */
  border-bottom: 2rem solid transparent;
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--color-text-default-low); /* #8a8c8e */
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.tab-secondary:hover,
.tab-secondary:focus-visible {
  color: var(--color-text-default-high);
}
.tab-secondary.is-active {
  border-bottom-color: var(--color-line-highest); /* #111 */
  color: var(--color-text-default-highest);
}
@media (max-width: 1024px) {
  /* 모바일 — 좌측 정렬 + 가로 스크롤 (390 시안: 탭 폭이 화면보다 넓음) */
  .tabs-secondary {
    justify-content: flex-start;
    overflow-x: auto;
  }
  .tab-secondary {
    font-size: 20rem; /* 모바일도 20 고정 (b2 토큰 18 미적용) */
  }
}

/* ========================================================
   목록 필터 바 — .list-filter (총 개수 + 자료타입 셀렉트/키워드 검색)
   Smart Locks·Access Devices·Software&App·FAQ 등 목록 페이지 공용
======================================================== */
.list-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 44rem; /* 필터 ↔ 목록 간격 (목록 페이지 시안 공통) */
}
.list-filter .result-area__count {
  margin-bottom: 0;
}
.list-filter__controls {
  display: flex;
  gap: var(--spacing-200); /* 8 */
}
.list-filter .selectbox {
  width: 320rem;
}

/* 목록 키워드 검색 인풋 */
.list-search {
  display: flex;
  align-items: center;
  gap: var(--spacing-300); /* 12 */
  width: 460rem;
  height: 48rem;
  padding: 0 var(--padding-400); /* 16 */
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-bd-default); /* #8a8c8e */
}
.list-search__input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
  caret-color: auto;
}
.list-search__input::placeholder {
  color: var(--color-text-default-medium); /* #535455 */
}
/* 입력 초기화 버튼 — 입력 시 노출 (2색 아이콘이라 background 이미지) */
.list-search__del {
  flex-shrink: 0;
  display: none;
  width: 24rem;
  height: 24rem;
  background: url("../images/ico-delete-circle.svg") center / contain no-repeat;
}
.list-search.has-text .list-search__del {
  display: block;
}
.list-search__del:hover,
.list-search__del:focus-visible {
  opacity: 0.7;
}
/* 검색 아이콘 — CSS mask 이미지 */
.list-search__btn {
  flex-shrink: 0;
  width: 24rem;
  height: 24rem;
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask: url("../images/ico-gnb-search.svg") center / contain no-repeat;
  mask: url("../images/ico-gnb-search.svg") center / contain no-repeat;
}
.list-search__btn:hover,
.list-search__btn:focus-visible {
  background-color: var(--color-text-point-default); /* #1475e7 */
}
/* 모바일 — 세로 스택 + 풀 와이드 (390 시안 · 7596-13198) */
@media (max-width: 1024px) {
  .list-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-500); /* 20 */
  }
  .list-filter__controls {
    flex-wrap: wrap;
    width: 100%;
  }
  .list-filter .selectbox,
  .list-search {
    width: 100%;
  }
}

/* ========================================================
   라벨 — .label (게시물 카테고리 등 · 파스텔 타입)
======================================================== */
.label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32rem;
  padding: 0 var(--padding-200); /* 8 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  border-radius: var(--radius-100); /* 4 */
}
.label--pastel-blue {
  background: var(--color-label-pastel-blue); /* #e7f2ff */
  color: var(--color-label-text-blue); /* #0858b6 */
}
.label--pastel-gray {
  background: var(--color-label-pastel-gray); /* #e8e8e8 */
  color: var(--color-label-text-gray); /* #535455 */
}
.label--pastel-green {
  background: var(--color-label-pastel-green); /* #eef9e8 */
  color: var(--color-label-text-green);
}
.label--pastel-orange {
  background: var(--color-label-pastel-orange); /* #fff3e8 */
  color: var(--color-label-text-orange);
}

/* ========================================================
   데이터 없음 — .no-content (목록 No Data 공용)
======================================================== */
.no-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-500); /* 20 */
  padding: 100rem 0 200rem; /* 라인 ↔ 아이콘 100 / 하단 200 */
  border-top: 1px solid var(--color-line-highest); /* #111 */
}
/* 필터 바 뒤에 올 때 — 필터 ↔ 라인 간격 20 (목록의 44와 다름) */
.list-filter + .no-content {
  margin-top: -24rem;
}
/* 알럿 아이콘 — CSS mask 이미지 */
.no-content__icon {
  width: 80rem;
  height: 80rem;
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask: url("../images/ico-alert-circle.svg") center / contain no-repeat;
  mask: url("../images/ico-alert-circle.svg") center / contain no-repeat;
}
.no-content__text {
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-medium); /* #535455 */
}
/* 모바일 (모바일 시안 미확정 — 재량 처리) */
@media (max-width: 1024px) {
  .no-content {
    padding: 60rem 0 120rem;
  }
  .no-content__icon {
    width: 64rem;
    height: 64rem;
  }
}

/* ========================================================
   텍스트 보드 — .board-text (카테고리 + 타이틀 목록)
======================================================== */
.board-text {
  width: 100%;
  margin-bottom: 60rem; /* 목록 ↔ 페이지네이션 간격 */
  border-top: 1px solid var(--color-line-highest); /* #111 */
}
.board-text__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-500); /* 20 */
  padding: 32rem var(--spacing-400); /* 32 16 */
  border-bottom: 1px solid var(--color-line-medium); /* #d0d1d2 */
  color: inherit;
}
.board-text__cate {
  flex-shrink: 0;
  width: 280rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-low); /* #8a8c8e */
}
.board-text__title {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
  transition: color 0.3s ease;
}
.board-text__item:hover .board-text__title,
.board-text__item:focus-visible .board-text__title {
  color: var(--color-text-point-default); /* #1475e7 */
  text-decoration: underline;
  text-underline-position: from-font;
}
/* 모바일 — 세로 스택 (390 시안) */
@media (max-width: 1024px) {
  .board-text__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-500); /* 20 */
    padding: 32rem var(--spacing-400); /* 32 16 */
  }
  .board-text__cate {
    width: auto;
  }
  /* 통합 셀(유형 > 제품명) — 모바일은 줄바꿈 없이 한 줄 */
  .board-text__cate br {
    display: none;
  }
}

/* ========================================================
   파일 보드 — .board-file (제품 + 자료 유형 + 타이틀 + 다운로드)
   검색 결과 Software&App 탭 등 다운로드형 목록
======================================================== */
.board-file {
  width: 100%;
  margin-bottom: 60rem; /* 목록 ↔ 페이지네이션 간격 */
  border-top: 1px solid var(--color-line-highest); /* #111 */
}
.board-file__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-500); /* 20 */
  padding: 32rem var(--spacing-400); /* 32 16 */
  border-bottom: 1px solid var(--color-line-medium); /* #d0d1d2 */
  color: inherit;
}
/* 제품(유형·제품명 통합 셀 — "유형 >" 줄바꿈 제품명, 화면설계서 V0.3) / 자료 유형 */
.board-file__cate,
.board-file__type {
  flex-shrink: 0;
  width: 240rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-low); /* #8a8c8e */
}
/* 2컬럼 변형(자료타입+타이틀 — Software&App 목록 등) — 첫 컬럼 280 */
.board-file--simple .board-file__cate {
  width: 280rem;
}
.board-file__title {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest);
  transition: color 0.3s ease;
}
/* 다운로드 아이콘 — CSS mask 이미지 */
.board-file__download {
  flex-shrink: 0;
  width: 32rem;
  height: 32rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-download.svg") center / contain no-repeat;
  mask: url("../images/ico-download.svg") center / contain no-repeat;
}
/* 타이틀 호버 — 상세 링크(a)인 경우에만. 파일형(span 타이틀)은 호버 효과 없음 */
.board-file__item:hover a.board-file__title,
a.board-file__title:focus-visible {
  color: var(--color-text-point-default); /* #1475e7 */
  text-decoration: underline;
  text-underline-position: from-font;
}
/* 다운로드 아이콘 — 아이콘에 직접 호버/포커스할 때만 색 변경 */
.board-file__download:hover,
.board-file__download:focus-visible {
  color: var(--color-text-point-default);
}
/* 모바일 — 세로 스택 (메타 → 타이틀 → 다운로드, 390 시안) */
@media (max-width: 1024px) {
  .board-file__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-500); /* 20 */
    padding: 32rem var(--spacing-400); /* 32 16 */
  }
  .board-file__cate,
  .board-file__type {
    width: auto;
  }
   .board-file__cate br {
    display: none;
   }
}

/* ========================================================
   페이지네이션 — .pagination
======================================================== */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--spacing-100); /* 4 */
  margin-top: var(--spacing-2000); /* 80 — 목록 하단 공통 여백 */
}
.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 32rem;
  background: var(--color-btn-default-outline-fill); /* #fff */
  font-family: var(--font-family-kor);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-high); /* #373839 */
  cursor: pointer;
}
.pagination__item.is-active {
  color: var(--color-text-point-default); /* #1475e7 */
}
.pagination__item--first,
.pagination__item--prev,
.pagination__item--next,
.pagination__item--last,
.pagination__item--more {
  font-size: 0;
}
.pagination__item--first::before,
.pagination__item--prev::before,
.pagination__item--next::before,
.pagination__item--last::before,
.pagination__item--more::before {
  content: "";
  width: 20rem;
  height: 20rem;
  background-color: var(--color-ic-gray-strong); /* #6e7072 */
  -webkit-mask: url("../images/ico-pager-prev.svg") center / contain no-repeat;
  mask: url("../images/ico-pager-prev.svg") center / contain no-repeat;
}
.pagination__item--first::before {
  -webkit-mask-image: url("../images/ico-pager-first.svg");
  mask-image: url("../images/ico-pager-first.svg");
}
.pagination__item--next::before {
  -webkit-mask-image: url("../images/ico-pager-next.svg");
  mask-image: url("../images/ico-pager-next.svg");
}
.pagination__item--last::before {
  -webkit-mask-image: url("../images/ico-pager-last.svg");
  mask-image: url("../images/ico-pager-last.svg");
}
.pagination__item--more::before {
  -webkit-mask-image: url("../images/ico-more-horizontal.svg");
  mask-image: url("../images/ico-more-horizontal.svg");
}

/* ========================================================
   푸터 — .footer (Newsletter Type · 다크)
   데스크톱 1920 기준 높이 760 · 콘텐츠 영역과 200px 간격 유지
======================================================== */
footer {
  margin-top: 200rem;
}
.footer {
  background: var(--color-bg-primary-dark-level-1); /* #111 */
  color: var(--color-text-default-white);
  overflow: hidden;
}
.footer .inner {
  width: 1760rem; /* 푸터는 공통 .inner(1440)보다 넓은 1760 사용 */
  padding: 80rem 0 33rem;
}

/* 상단 — 뉴스레터 + IA 메뉴 */
.footer__top {
  display: flex;
  gap: 185rem;
  padding-bottom: 48rem;
}

/* 뉴스레터 */
.footer-news {
  flex-shrink: 0;
  width: 416rem;
}
.footer-news__title {
  margin-bottom: 12rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 32 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-white);
}
.footer-news__desc {
  width: 412rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-lowest); /* #a1a3a5 */
}
.footer-news__form {
  position: relative;
  width: 416rem;
  margin-top: 65rem;
}
.footer-news__input {
  width: 100%;
  height: 48rem;
  padding: 0 120rem 0 var(--padding-600); /* 우측 버튼 자리 확보 */
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-primary-light-level-3); /* #e8e8e8 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: var(--lh-body);
  color: var(--color-text-default-highest);
}
.footer-news__input::placeholder {
  color: var(--color-text-default-medium); /* #535455 */
}
/* 2026-10-12 수정 (QA · 푸터 뉴스레터) — 커서 클릭(포커스) 시 placeholder 즉시 숨김. common.css 공통 규칙을 클래스별 placeholder 색상 규칙보다 우선하도록 명시 (검색창·문의 폼 입력란 포함) */
.footer-news__input:focus::placeholder,
.search-bar__input:focus::placeholder,
.list-search__input:focus::placeholder,
.input__field:focus::placeholder {
  color: transparent;
  opacity: 0;
}
.footer-news__form .btn {
  position: absolute;
  top: 0;
  right: 0;
}

/* IA 메뉴 — 4컬럼 + 세로 구분선 */
.footer-ia {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.footer-ia__col {
  flex: 1 1 0;
  min-width: 0;
}
.footer-ia__col + .footer-ia__col {
  border-left: 1px solid var(--alpha-white-100a); /* white 10% */
  padding-left: 33rem;
}
.footer-ia__title {
  margin-bottom: 37rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b1); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-low); /* #8a8c8e */
}
/* All Products 바로가기가 붙는 컬럼은 타이틀 간격 축소 (시안: 타이틀 8 · 바로가기 아래 40) */
.footer-ia__title:has(+ .footer-ia__all) {
  margin-bottom: 8rem;
}
.footer-ia__all {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100); /* 4 */
  margin-bottom: 40rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-cap1); /* 14 */
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-white);
}
.footer-ia__all::after {
  content: "";
  width: 16rem;
  height: 16rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-btn-text-arrow.svg") center / contain no-repeat;
  mask: url("../images/ico-btn-text-arrow.svg") center / contain no-repeat;
}
.footer-ia__group {
  margin-bottom: 20rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-cap1); /* 14 */
  line-height: var(--lh-display);
  color: var(--color-text-default-low); /* #8a8c8e */
}
.footer-ia__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-500); /* 20 */
  margin-bottom: 45rem;
}
.footer-ia__menu a {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-white);
  transition: color 0.3s ease;
}
.footer-ia__menu a:hover,
.footer-ia__menu a:focus-visible {
  color: var(--color-text-point-default); /* #1475e7 */
}
.footer-ia__menu a::after {
  content: "";
  width: 20rem;
  height: 20rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-btn-arrow-r.svg") center / contain no-repeat;
  mask: url("../images/ico-btn-arrow-r.svg") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-6rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.footer-ia__menu a:hover::after,
.footer-ia__menu a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* 하단 — 링크 · SNS · 카피라이트 */
.footer__util {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rem 0;
  border-top: 1px solid var(--alpha-white-100a);
  border-bottom: 1px solid var(--alpha-white-100a);
}
.footer__links {
  display: flex;
  align-items: center;
  gap: 48rem;
}
.footer__links a {
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-text-default-white);
}
/* Cookies Setting — DSG 푸터(126:1976) 기준 다른 링크와 동일하게 노출 (2026-09-29, 이전엔 Cookiebot 연동 전 배경색으로 숨김) */
.footer__links a.cookies {
  color: var(--color-text-default-white);
}
.footer__sns {
  display: flex;
  align-items: center;
  gap: 20rem;
}
.footer__sns a {
  display: inline-flex;
}
.footer__sns .linkedin {
  width: 24rem;
  height: 22rem;
  background: url("../images/ico-sns-linkedin.png") center / contain no-repeat;
}
.footer__sns .youtube {
  width: 26rem;
  height: 19rem;
  background-color: #fff;
  -webkit-mask: url("../images/ico-sns-youtube.svg") center / contain no-repeat;
  mask: url("../images/ico-sns-youtube.svg") center / contain no-repeat;
}
.footer__sns .instagram {
  width: 20rem;
  height: 20rem;
  background-color: #fff;
  -webkit-mask: url("../images/ico-sns-instagram.svg") center / contain no-repeat;
  mask: url("../images/ico-sns-instagram.svg") center / contain no-repeat;
}
.footer__copy {
  padding-top: 32rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-cap1); /* 14 */
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-white);
}

/* ── 모바일 (390 시안) ── */
@media (max-width: 1024px) {
  footer {
    margin-top: 120rem; /* gap/2xl — 모바일 콘텐츠~푸터 간격 (390 시안) */
  }
  .footer .inner {
    width: calc(100% - 48rem);
    padding: 40rem 0;
  }
  .footer__top {
    flex-direction: column;
    gap: 40rem;
    padding-bottom: 40rem;
  }
  .footer-news {
    width: 100%;
  }
  .footer-news__title {
    font-size: 28rem;
  }
  .footer-news__desc,
  .footer-news__form {
    width: 100%;
  }
  .footer-news__form {
    margin-top: 25rem;
  }
  .footer-ia {
    display: none; /* 모바일 시안에는 IA 메뉴 미노출 */
  }
  .footer__util {
    flex-direction: column;
    align-items: flex-start;
    gap: 40rem;
    padding: 0 0 40rem;
    border-top: 0;
  }
  /* 모바일 시안은 SNS 아이콘이 링크 위 */
  .footer__sns {
    order: -1;
  }
  .footer__links {
    flex-wrap: wrap;
    gap: 20rem 40rem;
  }
  .footer__copy {
    padding-top: 40rem;
  }
}

/* ========================================================
   공통 헤더 — GNB (기본 라이트 · 다크 히어로 페이지는 header.is-transparent)
   PC h100 / 모바일 h60 · 드롭다운 메가메뉴 · 모바일 전체메뉴
======================================================== */
.blind {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: transform 0.3s ease;
}

/* 스크롤 다운 시 숨김 · 업 시 노출 (공통 설계서 슬라이드 5) */
header.is-hidden {
  transform: translateY(-100%);
}

/* 드롭다운 뒤 딤 — 바닥 페이지와 분리감 */
header::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(17, 17, 17, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
  pointer-events: none;
}
header.is-open::after {
  opacity: 1;
  visibility: visible;
}

.gnb-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 100rem;
  padding: 0 var(--padding-2000); /* 80 */
  background: var(--color-bg-default-white);
  -webkit-backdrop-filter: blur(20rem);
  backdrop-filter: blur(20rem);
}

/* 로고 — 단색 SVG 마스크 (라이트: 뉴블루 / 투명 스킨: 화이트) */
.gnb-bar .logo,
.all-menu__head .logo {
  flex-shrink: 0;
  display: inline-block;
  width: 168rem;
  height: 40rem;
  background-color: var(--color-brand-new-blue); /* #1475e7 */
  -webkit-mask: url("../images/logo.svg") center / contain no-repeat;
  mask: url("../images/logo.svg") center / contain no-repeat;
}

/* 1Depth — 중앙 배치 (transform 사용 금지 — 드롭다운 fixed 기준이 틀어짐) */
.gnb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none; /* 로고/유틸 클릭 통과 */
}
.gnb .menu-list {
  display: flex;
  gap: var(--spacing-2000, 80rem);
  height: 100%;
  pointer-events: auto;
}
.gnb .menu-list__item {
  display: flex;
  align-items: center;
}
.gnb .menu-list__link {
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight); /* 1.2 */
  color: var(--color-text-default-highest); /* #111 */
  white-space: nowrap;
  transition: color 0.3s ease;
}
.gnb .menu-list__item.is-active > .menu-list__link,
.gnb .menu-list__link:hover,
.gnb .menu-list__link:focus-visible {
  color: var(--color-text-point-default); /* #1475e7 */
  text-decoration: underline;
  text-underline-position: from-font;
}

/* 유틸 — Contact Us 필 + 아이콘 */
.util {
  display: flex;
  align-items: center;
  gap: 20rem;
  margin-left: auto;
}
.util__contact {
  display: inline-flex;
  align-items: center;
  padding: var(--padding-200) var(--padding-400); /* 8 16 */
  border-radius: 40rem;
  background: var(--color-brand-new-blue); /* #1475e7 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-white);
  white-space: nowrap;
  transition: background-color 0.4s ease;
}
.util__contact:hover,
.util__contact:focus-visible,
.util__contact:active {
  background: var(--color-external-link-hover); /* #0858b6 */
}
.util__ico {
  flex-shrink: 0;
  width: 24rem;
  height: 24rem;
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask: url("../images/ico-gnb-search.svg") center / contain no-repeat;
  mask: url("../images/ico-gnb-search.svg") center / contain no-repeat;
}
.util__ico--globe {
  -webkit-mask-image: url("../images/ico-gnb-globe.svg");
  mask-image: url("../images/ico-gnb-globe.svg");
}
/* 언어 선택 레이어 — 지구본 아래 중앙, 86 박스 + 상단 꼬리 (DSG GNB State=language 7800:15772) */
.util__lang {
  position: relative;
  display: flex;
  align-items: center;
}
.lang-layer {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(100% + 12rem);
  z-index: 5;
  width: 86rem;
  padding: 24rem 20rem;
  background: var(--color-bg-default-white);
  border: 1px solid var(--color-line-low); /* #e8e8e8 */
  border-radius: var(--radius-100); /* 4 */
  transform: translateX(-50%);
}
.lang-layer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5rem;
  width: 9rem;
  height: 9rem;
  background: var(--color-bg-default-white);
  border-top: 1px solid var(--color-line-low);
  border-left: 1px solid var(--color-line-low);
  transform: translateX(-50%) rotate(45deg);
}
.lang-layer li + li {
  margin-top: 8rem;
}
.lang-layer a {
  display: block;
  font-family: var(--font-family-kor); /* 시안 Pretendard */
  font-size: var(--type-cap1); /* 14 */
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
  white-space: nowrap;
}
.lang-layer a:hover,
.lang-layer a:focus-visible,
.lang-layer a.is-active {
  color: var(--color-text-point-default); /* #1475e7 */
}
.util__lang.is-open .lang-layer {
  display: block;
}

/* 햄버거 (모바일 전용) */
.btn-gnb-fullmenu {
  display: none;
  width: 40rem;
  height: 40rem;
  background-color: var(--color-ic-black);
  -webkit-mask: url("../images/ico-gnb-menu.svg") right center / 24rem no-repeat;
  mask: url("../images/ico-gnb-menu.svg") right center / 24rem no-repeat;
}

/* ── PC 드롭다운 메가메뉴 ── */
.gnb .menu-panel {
  display: flex;
  position: fixed;
  left: 0;
  top: 100rem;
  width: 100%;
  min-height: 440rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12rem);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  padding: 56rem var(--padding-2000) 80rem; /* 상 56(타이틀 y156) 좌우 80 */
  background: var(--color-bg-default-white);
  border-bottom: 1px solid var(--color-line-low); /* #e8e8e8 */
}
.gnb .menu-list__item.is-active .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* 열린 상태에서 메뉴 간 이동 시 — 닫힘/열림 트랜지션 없이 즉시 전환 */
header.is-switching .gnb .menu-panel {
  transition: none;
}
.gnb .menu-panel__head {
  flex-shrink: 0;
  width: 637rem;
}
.gnb .menu-panel__title {
  font-family: var(--font-family-eng);
  font-size: var(--type-h3); /* 40 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-display); /* 1.1 */
  color: var(--color-text-default-highest);
}
.menu-panel__all {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100); /* 4 */
  margin-top: 32rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-text-default-highest);
}
.menu-panel__all i {
  width: 20rem;
  height: 20rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-btn-text-arrow.svg") center / contain no-repeat;
  mask: url("../images/ico-btn-text-arrow.svg") center / contain no-repeat;
}
.gnb .menu-panel__groups {
  display: flex;
}
.gnb .menu-group {
  width: 366rem;
}
.menu-group__label {
  margin-bottom: 23rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text-default-low); /* #8a8c8e */
}
.menu-group__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-500); /* 20 */
}
.menu-group--lg .menu-group__list {
  gap: 32rem;
}
.menu-group__list a {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
  transition: color 0.3s ease;
}
.menu-group__list a::after {
  content: "";
  width: 20rem;
  height: 20rem;
  background-color: currentColor;
  -webkit-mask: url("../images/ico-btn-arrow-r.svg") center / contain no-repeat;
  mask: url("../images/ico-btn-arrow-r.svg") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-6rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-group__list a:hover,
.menu-group__list a:focus-visible {
  color: var(--color-text-point-default); /* #1475e7 */
}
.menu-group__list a:hover::after,
.menu-group__list a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* ── 투명 스킨 (다크 히어로 위 — header.is-transparent) ──
   역스크롤 노출(.is-scrolled-up) 상태에선 base 헤더(흰 배경)로 복귀 — 전 선택자 :not(.is-scrolled-up) */
header.is-transparent:not(.is-open):not(.is-scrolled-up) .gnb-bar {
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: none; /* 투명 스킨에선 뒤 배경 블러 제거 */
  backdrop-filter: none;
}
header.is-transparent:not(.is-open):not(.is-scrolled-up) .gnb-bar .logo {
  background-color: var(--color-neutral-white);
}
header.is-transparent:not(.is-open):not(.is-scrolled-up) .gnb .menu-list__link {
  color: var(--color-text-default-white);
}
header.is-transparent:not(.is-open):not(.is-scrolled-up) .util__ico {
  background-color: var(--color-neutral-white);
}
header.is-transparent:not(.is-open):not(.is-scrolled-up) .btn-gnb-fullmenu {
  background-color: var(--color-neutral-white);
}

/* ── 모바일 전체 메뉴 ── */
.all-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--color-bg-default-white);
  overflow-y: auto;
}
.all-menu.is-open {
  display: block;
}
.all-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60rem;
  padding: 0 20rem;
}
.all-menu__head .logo {
  width: 116rem;
  height: 28rem;
}
.btn-gnb-close {
  width: 40rem;
  height: 40rem;
  background-color: var(--color-ic-black);
  -webkit-mask: url("../images/ico-gnb-close.svg") right center / 24rem no-repeat;
  mask: url("../images/ico-gnb-close.svg") right center / 24rem no-repeat;
}
.all-menu .inner-small {
  width: calc(100% - 48rem);
  padding-top: 40rem;
}
.all-menu .menu-list {
  display: flex;
  flex-direction: column;
}
.all-menu .menu-list__item {
  border-top: 1px solid var(--color-line-low); /* #e8e8e8 */
  padding: 40rem 0;
}
.all-menu .menu-list__item:last-child {
  border-bottom: 1px solid var(--color-line-low);
}
.all-menu .menu-list__link {
  position: relative;
  display: block;
  font-family: var(--font-family-eng);
  font-size: var(--type-h4); /* 28(모바일 토큰) */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-heading); /* 1.3 */
  color: var(--color-text-default-highest);
}
/* 아코디언 화살표 — 하위 메뉴가 있는 항목만 */
.all-menu .menu-list__item:has(.menu-panel) .menu-list__link::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24rem;
  height: 24rem;
  background-color: var(--color-ic-black);
  -webkit-mask: url("../images/ico-accordion-arrow.svg") center / contain no-repeat;
  mask: url("../images/ico-accordion-arrow.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}
.all-menu .menu-list__item.is-open .menu-list__link::after {
  transform: translateY(-50%) rotate(180deg);
}
.all-menu .menu-panel {
  display: none;
  padding-top: 36rem;
}
.all-menu .menu-panel__title {
  display: none; /* 1Depth가 타이틀 역할 */
}
.all-menu .menu-panel__all {
  margin-top: 0;
  margin-bottom: 42rem;
}
.all-menu .menu-group + .menu-group {
  margin-top: 44rem;
}
.all-menu__util {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 48rem);
  margin: 0 auto;
  padding: 40rem 0 60rem;
}
.all-menu__util-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-500); /* 20 */
}
.all-menu__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-200); /* 8 */
  font-family: var(--font-family-eng);
  font-size: 18rem;
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-body-tight);
  color: var(--color-text-default-highest);
}

/* 고정 헤더 높이만큼 본문 여백 (투명 스킨 페이지는 히어로가 헤더 아래로 겹침)
   서브페이지 본문 래퍼는 <div class="sub"> — main 태그 사용하지 않음 */
/* 헤더는 JS에서 body로 이동(ScrollSmoother 래핑 밖) — 형제 선택자 대신 .sub 직접 지정 */
.sub {
  padding-top: 100rem;
}

/* ── 모바일 (≤1024) ── */
@media (max-width: 1024px) {
  .sub {
    padding-top: 60rem;
  }
  .gnb-bar {
    height: 60rem;
    padding: 0 20rem;
  }
  .gnb-bar .logo {
    width: 116rem;
    height: 28rem;
  }
  .gnb-bar .gnb,
  .gnb-bar .util__contact,
  .gnb-bar .util__ico {
    display: none;
  }
  .btn-gnb-fullmenu {
    display: block;
  }
}

/* ========================================================
   레이어 팝업 — .layer-popup (공통 · common.js openPopup 연동)
   구성: 딤 + 타이틀 바(56) + 스크롤 본문(pd 40) + 하단 고정 버튼
======================================================== */
.layer-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}
.layer-popup .pop-dim {
  position: absolute;
  inset: 0;
  background: var(--alpha-black-400a);
}
.layer-popup .pop-wrap {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800rem;
  max-width: calc(100% - 48rem);
  max-height: calc(100% - 160rem);
  background: var(--color-bg-default-white);
  transform: translate(-50%, -50%);
}
/* 타이틀 바 */
.layer-popup .pop-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-1000); /* 40 */
  flex-shrink: 0;
  height: 56rem;
  padding: 0 var(--padding-600); /* 24 */
}
.layer-popup .pop-head__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-eng);
  font-size: var(--type-b3); /* 18 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-body); /* 1.4 */
  color: var(--color-text-default-highest);
}
/* 타이틀 바 X 닫기 아이콘 — 헤더 한정 (다이얼로그 하단 버튼 등 다른 닫기 버튼에 적용 방지) */
.layer-popup .pop-head .btn-close {
  flex-shrink: 0;
  width: 24rem;
  height: 24rem;
  background-color: var(--color-ic-black); /* #111 */
  -webkit-mask: url("../images/ico-x.svg") center / contain no-repeat;
  mask: url("../images/ico-x.svg") center / contain no-repeat;
}
.layer-popup .pop-head .btn-close:hover,
.layer-popup .pop-head .btn-close:focus-visible {
  background-color: var(--color-ic-gray-strong); /* #6e7072 */
}
/* 본문 — 내부 스크롤 (커스텀 스크롤바 4) */
.layer-popup .pop-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--padding-1000); /* 40 */
}
.layer-popup .pop-body::-webkit-scrollbar {
  width: 4rem;
}
.layer-popup .pop-body::-webkit-scrollbar-thumb {
  background: var(--color-ic-gray-strong); /* #6e7072 */
  border-radius: var(--radius-full);
}
.layer-popup .pop-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 40rem 0;
}
/* 하단 고정 버튼 — 위쪽으로 흐려지는 흰 그라데이션 */
.layer-popup .pop-foot {
  display: flex;
  gap: var(--spacing-300); /* 12 */
  flex-shrink: 0;
  padding: var(--padding-500) var(--padding-1000) var(--padding-1000); /* 20 40 40 */
  background: linear-gradient(to top, #fff 81%, rgba(255, 255, 255, 0));
}

/* ── 모바일 ── */
@media (max-width: 1024px) {
  .layer-popup .pop-wrap {
    max-height: calc(100% - 96rem);
  }
  .layer-popup .pop-body {
    padding: 24rem;
  }
  .layer-popup .pop-foot {
    padding: 16rem 24rem 24rem;
  }
}

/* ========================================================
   다이얼로그 — .dialog (레이어 팝업 내 안내형: 상태 아이콘 + 타이틀/내용 + 버튼)
======================================================== */
.layer-popup .dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 390rem;
  max-width: calc(100% - 48rem);
  padding: 48rem 0 20rem;
  background: var(--color-bg-default-white);
  border-radius: var(--radius-300); /* 12 */
  text-align: center;
  transform: translate(-50%, -50%);
}
.dialog__icon {
  width: 64rem;
  height: 64rem;
  background: url("../images/ico-status-complete.svg") center / contain no-repeat;
}
.dialog__title {
  margin-top: 16rem;
  padding: 0 var(--padding-1000); /* 40 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b2); /* 20 */
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--color-text-default-highest);
}
.dialog__desc {
  margin-top: 16rem;
  padding: 0 var(--padding-1000); /* 40 */
  font-family: var(--font-family-eng);
  font-size: var(--type-b4); /* 16 */
  line-height: 1.6;
  color: var(--color-text-default-high); /* #373839 */
}
.dialog__btn {
  width: 100%;
  padding: 32rem 20rem 0;
}
.dialog__btn .btn {
  width: 100%;
}

/* ========================================================
   로딩 인디케이터 — .loading (공통 · 피그마 8262:23997)
   구성: 딤(50%) + 중앙 심볼 — 심볼 안이 아래에서 위로 파란색으로 채워지며 반복
   사용: .is-active 토글로 표시/숨김 (pages.js에서 body 직속으로 이동)
======================================================== */
.loading {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.loading.is-active {
  display: flex;
  transition: opacity 0.4s ease;
}
.loading.is-hide {
  opacity: 0; /* 로드 완료 후 페이드 아웃 (common.js) */
  pointer-events: none;
}
.loading__logo {
  position: relative;
  overflow: hidden;
  width: 118rem;
  height: 116rem;
  background: var(--color-bg-default-white);
  -webkit-mask: url("../images/ico-loading-logo.svg") center / contain no-repeat;
  mask: url("../images/ico-loading-logo.svg") center / contain no-repeat;
}
.loading__logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--color-brand-solity-blue); /* #0055b8 */
  animation: loadingFill 1.6s ease-in-out infinite;
}
@keyframes loadingFill {
  0% {
    height: 0;
  }
  70% {
    height: 100%;
  }
  100% {
    height: 100%;
  }
}