@charset "utf-8";
/* ==========================================================================
   제품소개 (/product/*.php — company/about.php 와 같은 구성, 헤더 · 푸터는 PHP include) — .aw-product-page
   - 상단 사진 비주얼은 sub-layout.css 의 .aw-subvisual (고객지원 · 개인정보처리방침과 같은 모양 · 처음 확대 효과)
   1. 공통 — 바탕
   2. 원목마루 슬라이더 (.aw-floor-slider) — liet.co.kr/treatments/onda-30 'THREE BENEFITS' 구성 · 크기 · 움직임
      - 가운데 카드(왼쪽 글 · 오른쪽 사진) + 양옆 카드가 살짝 보임, 아래 이전 · 점 · 다음
      - 위치 · 자동 넘김 · 끌기는 main.js initFloorCarousel, 제목 등장은 [data-aw-floor-header]
   3. 수종별 원목 후로링 (.aw-lineup) — liet onda-30 'EXPECTED RESULTS' + 'FOR WHOM' 구성 · 움직임, 한 줄에 4개
   3-1. 학교 시공 사례 (.aw-cases, school-floor.html) — liet onda-30 'EXPECTED RESULTS' 그대로 (2칸 사진 카드)
   4. 스크롤 등장 효과 ([data-story-reveal] — main.js initStoryReveal)
   5. 태블릿 · 모바일
   6. 시스템 도면 (.aw-drawings, subframe-system.php)
   7. 장점 카드 (.aw-benefits, baseboard.php) — liet onda-30 'LI:ET ONDA 30 PROTOCOL' 구성 · 스타일
   8. 문의 띠 (.aw-contact, maintenance.php) — 메인 ONLINE INQUIRY 와 같은 고정(fixed) 배경 · 원형 등장 · 버튼
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 공통
   -------------------------------------------------------------------------- */
/* 상단 사진 비주얼 — 페이지별 사진 (모양 · 확대 효과는 sub-layout.css .aw-subvisual--photo, 기본 사진은 .aw-subvisual--product)
   체육관 마루: bg_gymFloor.jpg 2752×1536 → 0.5581 */
.aw-subvisual--gym-floor {
  --aw-sv-ratio: 0.5581;
  background-image: url("../images/product/bg_gymFloor.jpg");
}

.aw-subvisual--school-floor {
  --aw-sv-ratio: 0.5581; /* 2752×1536 */
  background-image: url("../images/product/bg_schoolFloor.jpg");
}

.aw-subvisual--baseboard {
  --aw-sv-ratio: 0.5581; /* 2752×1536 */
  background-image: url("../images/product/bg_baseboard.jpg");
}

.aw-subvisual--plywood-lumber {
  --aw-sv-ratio: 0.5581; /* 2752×1536 */
  background-image: url("../images/product/bg_plywoodLumber.jpg");
}

.aw-subvisual--subframe-system {
  --aw-sv-ratio: 0.5581; /* 2752×1536 */
  background-image: url("../images/product/bg_subframeSystem.jpg");
}

.aw-subvisual--rubber-wedge {
  --aw-sv-ratio: 0.5581; /* 2752×1536 */
  background-image: url("../images/product/bg_rubberWedge.jpg");
}

.aw-subvisual--maintenance {
  --aw-sv-ratio: 0.5581; /* 2752×1536 */
  background-image: url("../images/product/bg_maintenance.jpg");
}

.fidelity.aw-product-page {
  overflow-x: clip;
  background: var(--color-bg-02);
  font-family: var(--font-base);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   2. 원목마루 슬라이더
   -------------------------------------------------------------------------- */
.fidelity .aw-floor-slider {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 7vw, 200px);
  background: var(--color-bg-02);
}

.fidelity .aw-floor-slider__container {
  width: 100%;
  max-width: 1684px;
  margin-inline: auto;
  padding-inline: 20px;
}

.fidelity .aw-floor-slider__header {
  text-align: center;
}

.fidelity .aw-floor-slider__eyebrow {
  margin: 0 0 clamp(14px, 0.38835vw + 12.5437px, 20px);
  font-family: Marcellus, serif;
  font-size: clamp(16px, 0.2589vw + 15.0291px, 20px);
  font-weight: 400;
  line-height: 1.31;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

.fidelity .aw-floor-slider__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(30px, 1.16505vw + 25.6311px, 48px);
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: -0.04em;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-floor-slider__title span:last-child {
  color: var(--color-secondary);
}

.fidelity .aw-floor-slider__lead {
  margin: clamp(16px, 1.2vw, 24px) 0 0;
  font-size: clamp(15px, 0.2589vw + 14.0291px, 18px);
  line-height: 1.7;
  color: var(--color-text-secondary);
  white-space: pre-line;
  word-break: keep-all;
}

.fidelity .aw-floor-slider__stage {
  margin-top: clamp(48px, 2.0712vw + 40.233px, 80px);
}

/* 카드 줄 — 가운데 카드 기준으로 track 을 옮김 (main.js) */
.fidelity .aw-floor-slider__viewport {
  overflow: visible;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}

.fidelity .aw-floor-slider__viewport:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 6px;
}

.fidelity .aw-floor-slider__track {
  display: flex;
  gap: 84px;
  will-change: transform;
}

.fidelity .aw-floor-slider__slide {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: clamp(335px, 63.4304vw + 97.1359px, 1315px);
  min-height: 480px; /* 글이 많으면 늘어남 — 한 슬라이더 안의 카드는 가장 긴 카드 높이로 맞춰짐 */
  overflow: hidden;
  border: 1px solid rgb(var(--color-secondary-rgb) / 0.55);
  background: var(--color-bg-02);
  user-select: none;
}

.fidelity .aw-floor-slider__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(28px, 1.2945vw + 23.1456px, 48px) clamp(24px, 1.5534vw + 18.1748px, 48px);
}

.fidelity .aw-floor-slider__number {
  margin: 0;
  font-family: Marcellus, serif;
  font-size: clamp(16px, 0.2589vw + 15.0291px, 20px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--color-secondary);
}

.fidelity .aw-floor-slider__name {
  margin: clamp(16px, 0.517799vw + 14.0583px, 24px) 0 0;
  font-family: var(--font-base);
  font-size: clamp(22px, 0.38835vw + 20.5437px, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-floor-slider__name span {
  display: block;
  margin-top: 8px;
  font-family: Marcellus, serif;
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-secondary);
}

.fidelity .aw-floor-slider__desc {
  margin: clamp(16px, 0.38835vw + 12.5437px, 20px) 0 0;
  font-size: clamp(14px, 0.2589vw + 13.0291px, 18px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

/* 규격 · 용도 */
.fidelity .aw-floor-slider__spec {
  margin: clamp(20px, 1.4vw, 28px) 0 0;
  padding: clamp(16px, 1vw, 20px) 0 0;
  border-top: 1px solid var(--color-border);
}

.fidelity .aw-floor-slider__spec div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  font-size: clamp(14px, 0.15vw + 12.4px, 16px);
  line-height: 1.6;
}

.fidelity .aw-floor-slider__spec div + div {
  margin-top: 8px;
}

.fidelity .aw-floor-slider__spec dt {
  font-weight: 600;
  color: var(--color-secondary);
}

.fidelity .aw-floor-slider__spec dd {
  margin: 0;
  color: var(--color-text);
  word-break: keep-all;
}

/* 규격이 여러 줄일 때 모바일에서도 줄바꿈 유지 (site.css 가 768px 이하에서 .fidelity br 을 모두 숨김) */
.fidelity .aw-floor-slider__spec dd br {
  display: inline;
}

/* 규격 안 작은 제목 (예: 환기형 걸레받이 '재고 운용' · '주문 제작') — 주문 제작은 나무색 */
.fidelity .aw-floor-slider__sub {
  display: block;
  margin-top: 6px;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.fidelity .aw-floor-slider__sub:first-child {
  margin-top: 0;
}

.fidelity .aw-floor-slider__sub.is-order {
  color: var(--color-secondary);
}

/* 규격 표 안의 점 목록 (예: 학교용 마루 '장점') */
.fidelity .aw-floor-slider__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-floor-slider__points li {
  position: relative;
  padding-left: 12px;
}

.fidelity .aw-floor-slider__points li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-secondary);
}

/* 제품 사진 — 흰 바탕의 마루 샘플이므로 잘리지 않게(contain) 흰 바탕 위에 */
.fidelity .aw-floor-slider__media {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  /* background: var(--color-white); */
  background: linear-gradient(-135deg, rgb(var(--color-secondary-rgb) / 0.28), rgb(var(--color-secondary-rgb) / 0.08)), var(--color-bg-02);
}

.fidelity .aw-floor-slider__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* 현장 · 원목 사진(흰 바탕 샘플이 아닌 사진)은 칸을 꽉 채움 — figure 에 .is-photo */
.fidelity .aw-floor-slider__media.is-photo img {
  object-fit: cover;
}

/* 작업 전 · 후 사진 2장 (마루 유지 · 보수) — 위아래로 나누고 왼쪽 위에 '작업 전 · 후' 표시 */
.fidelity .aw-floor-slider__media.is-pair {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}

.fidelity .aw-floor-slider__media.is-pair figure {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.fidelity .aw-floor-slider__media.is-pair img {
  object-fit: cover;
}

.fidelity .aw-floor-slider__media.is-pair figcaption {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / 0.75);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-white);
}

.fidelity .aw-floor-slider__media.is-pair figure + figure figcaption {
  background: rgb(var(--color-secondary-rgb) / 0.9);
}

/* 이전 · 점 · 다음 */
.fidelity .aw-floor-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: clamp(36px, 1.0356vw + 32.1165px, 52px);
}

.fidelity .aw-floor-slider__nav {
  display: grid;
  place-items: center;
  width: clamp(52px, 1.8123vw + 45.2039px, 80px);
  height: clamp(52px, 1.8123vw + 45.2039px, 80px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-bg-02);
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.fidelity .aw-floor-slider__nav:hover,
.fidelity .aw-floor-slider__nav:focus-visible {
  background: var(--color-primary);
}

.fidelity .aw-floor-slider__nav:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

.fidelity .aw-floor-slider__nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

.fidelity .aw-floor-slider__nav[disabled]:hover {
  background: var(--color-secondary);
}

.fidelity .aw-floor-slider__nav svg {
  display: block;
  width: clamp(20px, 0.2589vw + 19.0291px, 24px);
  height: clamp(20px, 0.2589vw + 19.0291px, 24px);
}

/* 점 — 지금 카드는 길쭉하게 */
.fidelity .aw-floor-slider__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.fidelity .aw-floor-slider__bullet {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.45s ease;
}

.fidelity .aw-floor-slider__bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transform: translate(-50%, -50%);
  transition: width 0.45s ease, background-color 0.45s ease, border-radius 0.45s ease;
}

.fidelity .aw-floor-slider__bullet.is-active {
  width: 48px;
}

.fidelity .aw-floor-slider__bullet.is-active::after {
  width: 36px;
  border-radius: 500px;
  background: var(--color-secondary);
}

/* 제목 등장 — 아래 32px 에서 위로 서서히 / main.js 가 .is-reveal-ready → .is-revealed */
.aw-floor-slider.is-reveal-ready .aw-floor-slider__header {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-floor-slider.is-revealed .aw-floor-slider__header {
  opacity: 1;
  transform: none;
}

/* 카드 줄 등장 — 오른쪽 160px 에서 왼쪽으로 서서히 (제목보다 0.15초 늦게) / main.js 가 .is-stage-ready → .is-stage-in
   (카드 위치는 track 의 transform 이므로 그 바깥 viewport 를 움직임) */
.aw-floor-slider.is-stage-ready .aw-floor-slider__viewport {
  opacity: 0;
  transform: translate3d(160px, 0, 0);
}

/* 숨길 때는 바로, 나타날 때만 움직임 (transition 은 .is-stage-in 에만) */
.aw-floor-slider.is-stage-in .aw-floor-slider__viewport {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

/* --------------------------------------------------------------------------
   3. 수종별 원목 후로링 (.aw-lineup)
      - 위: 제목(왼쪽) · 소개(오른쪽) — EXPECTED RESULTS 의 10칸 배치
      - 종류 버튼 → 카드 4칸: 테두리 상자(FOR WHOM) 안에 흰 바탕 제품 사진 + 가운데 글(EXPECTED RESULTS)
   -------------------------------------------------------------------------- */
.fidelity .aw-lineup {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 7vw, 200px);
  background: var(--color-bg-03);
  color: var(--color-text);
}

.fidelity .aw-lineup__inner {
  width: 100%;
  max-width: 1684px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* 제목 · 소개 가운데 정렬 */
.fidelity .aw-lineup__overview {
  text-align: center;
}

.fidelity .aw-lineup__heading {
  min-width: 0;
}

.fidelity .aw-lineup__eyebrow {
  margin: 0 0 clamp(14px, 0.38835vw + 12.5437px, 20px);
  font-family: Marcellus, serif;
  font-size: clamp(16px, 0.2589vw + 15.0291px, 20px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

.fidelity .aw-lineup__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(30px, 1.16505vw + 25.6311px, 48px);
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: -0.04em;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-lineup__title-accent {
  color: var(--color-secondary);
}

.fidelity .aw-lineup__intro {
  max-width: 760px;
  min-width: 0;
  margin: clamp(16px, 1.2vw, 24px) auto 0;
  font-size: clamp(15px, 0.194175vw + 14.2718px, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
  white-space: normal; /* 줄바꿈은 HTML 의 <br> 로 (소스 줄바꿈까지 살리면 <br> 과 겹쳐 줄 간격이 두 배가 됨) */
  word-break: keep-all;
}

/* 소개 아래 안내 한 줄 — 앞에 (i) 아이콘 (Feather fe-info) */
.fidelity .aw-lineup__info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fidelity .aw-lineup__info .fe {
  font-size: 1.05em;
  color: var(--color-secondary);
}

/* 종류 버튼 — 1199px 이하는 감싼 상자(.aw-lineup__tabs-wrap)가 Swiper 가 됨 (responsive.css 4, main.js initLineupFilter) */
.fidelity .aw-lineup__tabs-wrap {
  margin: clamp(40px, 3vw, 64px) 0 0;
}

.fidelity .aw-lineup__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-lineup__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid rgb(var(--color-secondary-rgb) / 0.55);
  border-radius: 999px;
  background: rgb(var(--color-white-rgb) / 0.35);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.fidelity .aw-lineup__tab span {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--color-secondary);
  transition: color 0.25s ease;
}

.fidelity .aw-lineup__tab:hover,
.fidelity .aw-lineup__tab:focus-visible {
  border-color: var(--color-secondary);
}

.fidelity .aw-lineup__tab.is-active {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-white);
}

.fidelity .aw-lineup__tab.is-active span {
  color: rgb(var(--color-white-rgb) / 0.8);
}

/* 카드 4칸 */
.fidelity .aw-lineup__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 0.517799vw + 14.0583px, 24px);
  margin-top: clamp(24px, 1.6vw, 32px);
}

/* 제품이 적을 때(예: 학교용 마루): 4칸 크기 그대로 가운데 정렬 */
.fidelity .aw-lineup__grid.is-few {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.fidelity .aw-lineup__grid.is-few > .aw-lineup__card {
  width: calc((100% - 3 * clamp(16px, 0.517799vw + 14.0583px, 24px)) / 4);
}

@media (max-width: 1199px) {
  .fidelity .aw-lineup__grid.is-few > .aw-lineup__card {
    width: calc((100% - 2 * clamp(16px, 0.517799vw + 14.0583px, 24px)) / 3);
  }
}

@media (max-width: 767px) {
  .fidelity .aw-lineup__grid.is-few > .aw-lineup__card {
    width: calc((100% - clamp(16px, 0.517799vw + 14.0583px, 24px)) / 2);
  }
}

@media (max-width: 479px) {
  .fidelity .aw-lineup__grid.is-few > .aw-lineup__card {
    width: 100%;
  }
}

.fidelity .aw-lineup__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgb(var(--color-secondary-rgb) / 0.55);
  background: rgb(var(--color-white-rgb) / 0.22);
}

.fidelity .aw-lineup__card[hidden] {
  display: none;
}

/* 걸러 볼 때 새로 보이는 카드는 살짝 올라오며 */
.fidelity .aw-lineup__card.is-filter-in {
  animation: aw-lineup-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes aw-lineup-in {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fidelity .aw-lineup__media {
  /* aspect-ratio: 4 / 3; */
  width: 100%;
  margin: 0;
  overflow: hidden;
  /* background: var(--color-white); */
  background: linear-gradient(145deg, #fffcf7 0%, #f3eadf 100%);
}

.fidelity .aw-lineup__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .fidelity .aw-lineup__card:hover .aw-lineup__media img {
    transform: scale(1.05);
  }
}

.fidelity .aw-lineup__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(24px, 0.2589vw + 23.0291px, 28px) clamp(16px, 1vw, 24px) clamp(28px, 1.4vw, 36px);
  text-align: center;
}

.fidelity .aw-lineup__number {
  font-family: Marcellus, serif;
  font-size: clamp(16px, 0.194175vw + 15.2718px, 19px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--color-secondary);
}

.fidelity .aw-lineup__name {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(19px, 0.453074vw + 17.301px, 24px);
  font-weight: 600;
  line-height: 1.31;
  color: var(--color-text);
  word-break: keep-all;
}

/* 제품명 뒤 우리말 이름 — 예: Maple (단풍나무) */
.fidelity .aw-lineup__name-ko {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.fidelity .aw-lineup__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--color-accent);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-white);
}

.fidelity .aw-lineup__spec {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-lineup__spec li {
  font-family: var(--font-en);
  font-size: clamp(16px, 0.15vw + 13.4px, 18px);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.fidelity .aw-lineup__note {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

/* --------------------------------------------------------------------------
   3-1. 학교 시공 사례 (.aw-cases) — liet onda-30 'EXPECTED RESULTS'
      - 위: 제목(왼쪽) · 시공갤러리 바로가기 버튼(오른쪽 아래 맞춤)
      - 아래: 2칸 카드 — 820:420 사진 + 가운데 글
      - 움직임(4. 스크롤 등장 효과): 제목은 왼쪽 · 소개는 오른쪽에서 흐림이 걷히며, 사진은 왼쪽 · 오른쪽에서 번갈아 펼쳐지고 글은 아래에서
   -------------------------------------------------------------------------- */
.fidelity .aw-cases {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 3.1068vw + 60.3495px, 120px);
  background: var(--color-bg-03);
  color: var(--color-text);
}

.fidelity .aw-cases__inner {
  width: 100%;
  max-width: 1684px;
  margin-inline: auto;
  padding-inline: 20px;
}

.fidelity .aw-cases__overview {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.fidelity .aw-cases__heading {
  min-width: 0;
  margin: 0;
}

.fidelity .aw-cases__eyebrow {
  margin: 0 0 clamp(14px, 0.38835vw + 12.5437px, 20px);
  font-family: Marcellus, serif;
  font-size: clamp(16px, 0.2589vw + 15.0291px, 20px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

.fidelity .aw-cases__heading-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(30px, 1.16505vw + 25.6311px, 48px);
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: -0.04em;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-cases__heading-accent {
  display: block;
  color: var(--color-text);
}

/* 시공갤러리 바로가기 — 고객지원 '블로그 바로가기'(support.css .aw-support__button.is-light)와 같은 모양 */
.fidelity .aw-cases__button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--color-border-dark);
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.fidelity .aw-cases__button:hover,
.fidelity .aw-cases__button:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

.fidelity .aw-cases__button:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 5px;
}

.fidelity .aw-cases__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 1.0356vw + 28.1165px, 40px);
  margin-top: clamp(48px, 2.0712vw + 40.233px, 80px);
}

.fidelity .aw-cases__card {
  min-width: 0;
}

.fidelity .aw-cases__media {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 820 / 460;
  background: var(--color-bg-02);
}
.fidelity .aw-cases__media:after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  opacity: 0.7;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 40%);
  z-index: 1;
}

.fidelity .aw-cases__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fidelity .aw-cases__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.2589vw + 7.02913px, 16px);
  min-height: clamp(112px, 1.2945vw + 107.146px, 132px);
  padding: clamp(24px, 0.2589vw + 23.0291px, 28px);
  text-align: center;
}

.fidelity .aw-cases__title {
  margin: 0;
  font-size: clamp(20px, 0.647249vw + 19.5728px, 28px);
  font-weight: 600;
  line-height: 1.31;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-cases__desc {
  margin: 0;
  font-size: clamp(14px, 0.2589vw + 13.0291px, 18px);
  font-weight: 500;
  line-height: 1.6;
  color: rgb(var(--color-text-secondary-rgb) / 0.8);
  word-break: keep-all;
}

/* 유지 · 보수 (maintenance.php) — 작업별 묶음: 제목(번호 · 이름 · 영문) + 작업 전 · 후 2칸 */
.fidelity .aw-cases__lead {
  max-width: 760px;
  margin: clamp(20px, 1.4vw, 28px) 0 0;
  font-size: clamp(15px, 0.194175vw + 14.2718px, 18px);
  line-height: 1.6;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.fidelity .aw-cases__group {
  margin-top: clamp(56px, 4vw, 100px);
}

.fidelity .aw-cases__group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-dark);
  font-size: clamp(22px, 0.647249vw + 19.5728px, 30px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-cases__group-num {
  font-family: Marcellus, serif;
  font-weight: 400;
  color: var(--color-secondary);
}

.fidelity .aw-cases__group-en {
  font-family: Marcellus, serif;
  font-size: 0.7em;
  font-weight: 400;
  color: var(--color-secondary);
}

.fidelity .aw-cases--maintenance .aw-cases__grid {
  margin-top: clamp(24px, 1.6vw, 32px);
}

/* 사진 왼쪽 아래 BEFORE · AFTER (사진 아래쪽 그라디언트 위) */
.fidelity .aw-cases__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / 0.8);
  font-family: Marcellus, serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-white);
}

.fidelity .aw-cases__badge.is-after {
  background: rgb(var(--color-secondary-rgb) / 0.9);
}

.fidelity .aw-cases--maintenance .aw-cases__desc {
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   4. 스크롤 등장 효과 — main.js initStoryReveal (html.aw-story-ready · 화면에 들면 .is-story-in)
      - 글: 옆(왼쪽 · 오른쪽) 또는 아래에서 미끄러지며, 사진(figure): 한쪽에서 반대쪽으로 펼쳐짐
      - 지연: data-story-delay="0.1" → --story-delay
   -------------------------------------------------------------------------- */
.aw-story-ready .aw-product-page [data-story-reveal] {
  --story-ease: cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transition:
    opacity 1.2s var(--story-ease) var(--story-delay, 0s),
    transform 1.2s var(--story-ease) var(--story-delay, 0s),
    clip-path 1.4s var(--story-ease) var(--story-delay, 0s);
}

.aw-story-ready .aw-product-page [data-story-reveal="left"]:not(figure) {
  transform: translate3d(-36px, 12px, 0);
}

.aw-story-ready .aw-product-page [data-story-reveal="right"]:not(figure) {
  transform: translate3d(36px, 12px, 0);
}

.aw-story-ready .aw-product-page [data-story-reveal="bottom"]:not(figure) {
  transform: translate3d(0, 32px, 0);
}

/* 수종별 카드: 왼쪽에서 오른쪽으로 하나씩 (지연은 HTML data-story-delay) */
.aw-story-ready .aw-product-page .aw-lineup__card[data-story-reveal="left"] {
  transform: translate3d(-40px, 0, 0);
  transition:
    opacity 1s var(--story-ease) var(--story-delay, 0s),
    transform 1.2s var(--story-ease) var(--story-delay, 0s);
}

/* 학교 시공 사례: 글은 흐림이 걷히며 (liet EXPECTED RESULTS) */
.aw-story-ready .aw-product-page .aw-cases [data-story-reveal]:not(figure) {
  filter: blur(6px);
  transition:
    opacity 1.2s var(--story-ease) var(--story-delay, 0s),
    transform 1.2s var(--story-ease) var(--story-delay, 0s),
    filter 1.2s var(--story-ease) var(--story-delay, 0s),
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.aw-story-ready .aw-product-page .aw-cases [data-story-reveal].is-story-in {
  filter: none;
}

.aw-story-ready .aw-product-page figure[data-story-reveal] {
  opacity: 1;
}

.aw-story-ready .aw-product-page figure[data-story-reveal="left"] {
  clip-path: inset(0 100% 0 0);
}

.aw-story-ready .aw-product-page figure[data-story-reveal="right"] {
  clip-path: inset(0 0 0 100%);
}

.aw-story-ready .aw-product-page [data-story-reveal].is-story-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

.aw-story-init .aw-product-page [data-story-reveal] {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   5. 태블릿 · 모바일
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .fidelity .aw-lineup__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .fidelity .aw-lineup__overview {
    display: block;
  }

  .fidelity .aw-lineup__intro {
    margin-top: clamp(24px, 3vw, 32px);
  }

  .fidelity .aw-lineup__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fidelity .aw-lineup__tab {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 14px;
  }
}

@media (max-width: 479px) {
  .fidelity .aw-lineup__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .fidelity .aw-cases__overview {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .fidelity .aw-cases__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
}
@media (max-width: 1199px) {
  .fidelity .aw-floor-slider__track {
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .fidelity .aw-floor-slider__track {
    gap: 20px;
  }

  .fidelity .aw-floor-slider__slide {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100vw - 40px);
    height: auto;
  }

  .fidelity .aw-floor-slider__copy {
    order: 2;
    padding-block: 24px;
  }

  .fidelity .aw-floor-slider__media {
    order: 1;
    aspect-ratio: 17 / 12;
    height: auto;
  }

  /* 작업 전 · 후 2장은 더 높게 */
  .fidelity .aw-floor-slider__media.is-pair {
    aspect-ratio: 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .aw-lineup__card.is-filter-in {
    animation: none;
  }

  .fidelity .aw-floor-slider__nav,
  .fidelity .aw-floor-slider__bullet,
  .fidelity .aw-floor-slider__bullet::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   6. 시스템 도면 (.aw-drawings, subframe-system.php)
      - 위: 큰 도면 2장(2칸) / 아래: 부품 · 시공도 (PC 4칸 · 태블릿 3칸 · 모바일 2칸)
      - 흰 바탕 카드 안에 도면 전체가 보이게(contain), 누르면 원본을 새 창으로
   -------------------------------------------------------------------------- */
.fidelity .aw-drawings {
  padding-block: clamp(80px, 7vw, 160px);
  background: var(--color-bg-03);
  color: var(--color-text);
}

.fidelity .aw-drawings__inner {
  width: 100%;
  max-width: 1684px;
  margin-inline: auto;
  padding-inline: 20px;
}

.fidelity .aw-drawings__heading {
  margin: 0 0 clamp(32px, 3vw, 56px);
  text-align: center;
}

.fidelity .aw-drawings__eyebrow {
  margin: 0 0 clamp(14px, 0.38835vw + 12.5437px, 20px);
  font-family: Marcellus, serif;
  font-size: clamp(16px, 0.2589vw + 15.0291px, 20px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

.fidelity .aw-drawings__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(30px, 1.16505vw + 25.6311px, 48px);
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.fidelity .aw-drawings__subtitle {
  margin: clamp(48px, 4vw, 80px) 0 20px;
  font-size: clamp(18px, 0.4vw + 16px, 22px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

.fidelity .aw-drawings__subtitle span {
  margin-left: 6px;
  font-size: 0.75em;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.fidelity .aw-drawings__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 0.517799vw + 14.0583px, 24px);
}

.fidelity .aw-drawings__grid.is-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fidelity .aw-drawings__item {
  min-width: 0;
  margin: 0;
}

.fidelity .aw-drawings__item a {
  display: block;
  padding: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.fidelity .aw-drawings__item a:hover,
.fidelity .aw-drawings__item a:focus-visible {
  border-color: var(--color-secondary);
  box-shadow: 0 12px 32px rgb(var(--color-primary-rgb) / 0.08);
}

.fidelity .aw-drawings__item img {
  display: block;
  width: 100%;
  height: auto;
}

.fidelity .aw-drawings__item figcaption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

@media (max-width: 1199px) {
  .fidelity .aw-drawings__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .fidelity .aw-drawings__grid,
  .fidelity .aw-drawings__grid.is-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fidelity .aw-drawings__grid.is-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .fidelity .aw-drawings__item a {
    padding: 8px;
  }

  .fidelity .aw-drawings__item figcaption {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   7. 장점 카드 (.aw-benefits, baseboard.php) — liet onda-30 'LI:ET ONDA 30 PROTOCOL'
      - 어두운 바탕(--color-bg-06) · 가운데 제목(두 번째 줄은 밝은 나무색)
      - 카드 4칸: 나무색 테두리 · 번호 알약 · 선 아이콘 · 제목 / 1023px 이하 2칸 · 543px 이하 1칸
      - 등장은 main.js initSeqReveal ([data-seq-head] · [data-seq-item])
   -------------------------------------------------------------------------- */
.fidelity .aw-benefits {
  overflow: hidden;
  padding-block: clamp(64px, 3.6246vw + 50.4078px, 120px);
  background: var(--color-bg-06);
  color: var(--color-bg-02);
}
.fidelity .aw-benefits.bg-dark {
  background: var(--color-primary-dark);
}
.fidelity .aw-benefits.bg-dark .aw-benefits__item {
  background: rgb(var(--color-white-rgb) / 0.03);
}

.fidelity .aw-benefits__inner {
  width: 100%;
  max-width: 1684px;
  margin-inline: auto;
  padding-inline: 20px;
}

.fidelity .aw-benefits__header {
  max-width: 880px; /* 설명 두 줄이 한 줄씩 들어가게 */
  margin: 0 auto;
  text-align: center;
}

.fidelity .aw-benefits__eyebrow {
  margin: 0;
  font-family: Marcellus, serif;
  font-size: clamp(14px, 0.12945vw + 13.5146px, 16px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--color-point-on-dark);
}

.fidelity .aw-benefits__title {
  display: grid;
  margin: clamp(20px, 0.2589vw + 19.0291px, 24px) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(30px, 1.16505vw + 25.6311px, 48px);
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: -0.04em;
  color: var(--color-bg-02);
  word-break: keep-all;
}

.fidelity .aw-benefits__title span:last-child {
  color: var(--color-point-on-dark);
}

/* 한 줄 제목 (예: 방진고무 · 수평쐐기) — 앞뒤 span 을 이어 쓰고 뒷부분만 밝은 나무색, 좁으면 자연스럽게 줄바꿈 */
.fidelity .aw-benefits__title.is-inline {
  display: block;
}

/* 제목 아래 설명 (줄바꿈 <br> 은 768px 이하에서 site.css 가 숨김 — 자연스럽게 줄바꿈) */
.fidelity .aw-benefits__desc {
  margin: clamp(24px, 0.517799vw + 22.0583px, 32px) 0 0;
  font-size: clamp(15px, 0.194175vw + 14.2718px, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: rgb(var(--color-bg-02-rgb) / 0.72);
  word-break: keep-all;
}

.fidelity .aw-benefits__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 32px);
  margin: clamp(56px, 1.5534vw + 50.1748px, 80px) 0 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-benefits__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 0.38835vw + 16.5437px, 24px);
  min-width: 0;
  min-height: clamp(232px, 2.589vw + 222.291px, 272px);
  padding: clamp(28px, 0.2589vw + 27.0291px, 32px) clamp(20px, 0.776699vw + 17.0874px, 32px);
  border: 1px solid rgb(var(--color-secondary-rgb) / 0.72);
  background: rgb(var(--color-white-rgb) / 0.06);
  text-align: center;
}

/* 카드 위 알약 — 장점의 영문 이름 (예: Air Circulation) */
.fidelity .aw-benefits__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 16px;
  border-radius: 24px;
  background: rgb(0 0 0 / 0.28);
  font-family: Marcellus, serif;
  font-size: clamp(14px, 0.12945vw + 13.5146px, 14px);
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-secondary-light);
}

.fidelity .aw-benefits__icon {
  display: block;
  flex: none;
  width: clamp(48px, 0.517799vw + 46.0583px, 56px);
  height: clamp(48px, 0.517799vw + 46.0583px, 56px);
  color: var(--color-point-on-dark);
}

.fidelity .aw-benefits__name {
  margin: auto 0;
  font-size: clamp(20px, 0.38835vw + 18.5437px, 24px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--color-bg-02);
  word-break: keep-all;
}

/* 제목 아래 짧은 설명이 있는 카드 (예: 합판 · 각재) — 제목 · 설명을 아이콘 아래에 붙여서 */
.fidelity .aw-benefits__item:has(.aw-benefits__text) .aw-benefits__name {
  margin: 4px 0 0;
}

.fidelity .aw-benefits__text {
  max-width: 280px;
  margin: -8px 0 0;
  font-size: clamp(14px, 0.12945vw + 13.5146px, 16px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.3px;
  color: rgb(var(--color-bg-02-rgb) / 0.72);
  word-break: keep-all;
}

/* 제목 안 줄바꿈은 모바일에서도 유지 (site.css 가 768px 이하에서 .fidelity br 을 숨김) */
.fidelity .aw-benefits__name br {
  display: inline;
}

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

  .fidelity .aw-benefits__item {
    min-height: clamp(220px, 4.32099vw + 203.796px, 248px);
  }
}

@media (max-width: 543px) {
  .fidelity .aw-benefits__title span {
    display: block;
  }

  .fidelity .aw-benefits__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .fidelity .aw-benefits__item {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   8. 문의 띠 (.aw-contact, maintenance.php) — 메인(index.html) ONLINE INQUIRY 와 같은 배경 · 움직임 · 버튼
      - 기본 모양(.aw-contact · __media · __content · __eyebrow · __title · __description)은 site.css · common.css 의 메인 규칙을 그대로 사용
      - 배경 사진: 마우스 환경에서 화면에 고정(fixed) — site.css 의 transform · contain 을 풀어야 fixed 가 동작 (inquiry.css 와 같은 처리)
      - 움직임: main.js initContactCircle (사진이 원형으로 펼쳐진 뒤 문구가 올라옴)
   -------------------------------------------------------------------------- */
/* 높이 — 메인보다 조금 낮게 */
.fidelity.aw-product-page .aw-contact {
  min-height: clamp(420px, 56vh, 560px);
  padding-block: clamp(72px, 6vw, 110px);
}

.fidelity .aw-contact .aw-contact__media {
  margin: 0;
  background-image: url("../images/product/bg_maintenance_02.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: none; /* transform 이 있으면 background-attachment: fixed 가 동작하지 않음 */
  contain: none;
}

/* 글씨가 잘 보이도록 사진 위 어두운 막 */
.fidelity .aw-contact .aw-contact__media::after {
  background: rgb(0 0 0 / 0.45);
}

@media (hover: hover) and (pointer: fine) {
  .fidelity .aw-contact .aw-contact__media {
    background-attachment: fixed;
  }
}

.fidelity .aw-contact__description a {
  display: inline; /* site.css 의 블록 링크 규칙을 되돌림 — 전화번호를 문장 안에 */
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.fidelity .aw-contact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 2.4vw, 40px);
}

/* 문의 버튼 — 메인 '문의 접수하기'(inquiry.css .aw-inquiry__submit)와 같은 모양 */
.fidelity .aw-contact__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  min-height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 4px;
  background: var(--color-accent-dark);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.fidelity .aw-contact__button svg {
  flex: none;
}

.fidelity .aw-contact__button:hover,
.fidelity .aw-contact__button:focus-visible {
  background: var(--color-secondary-light);
  color: var(--color-text);
}

.fidelity .aw-contact__button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* 화살표 — 마우스 오버 시 오른쪽으로 빠졌다가 왼쪽에서 다시 들어옴 (inquiry.css aw-arrow-pass 와 같음) */
.fidelity .aw-contact__button:hover svg,
.fidelity .aw-contact__button:focus-visible svg {
  animation: aw-contact-arrow-pass 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes aw-contact-arrow-pass {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(12px); opacity: 0; }
  41% { transform: translateX(-12px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@media (max-width: 767px) {
  .fidelity .aw-contact__button {
    width: 100%;
  }
}