/* ==========================================================================
   AONEWOOD 공통 UI — 기존 화면 CSS(site.css 등)를 덮어쓰는 에이원우드 전용 스타일
   - 다른 CSS 보다 마지막에 불러옵니다.
   1. 기본 스타일 (구 base.css 에서 이동, 변수는 variables.css)
   2. 로고
   3. 컬러 보정
   4. 토스트 알림
   5. 헤더 (기본 투명 / 스크롤 시 바)
   6. 푸터 (6-1. 공유 버튼)
   7. 빠른 메뉴 (호버 컬러·툴팁)
   7-1. 이미지 문구 (배경 이미지 오른쪽 아래 설명 글자, 공통)
   7-2. 메인 비주얼 동영상 슬라이드
   7-3. 메인 페이지 퀵메뉴 숨김 + 스크롤 안내
   7-4. 커스텀 셀렉트 (게시판 · 견적문의 select 펼침 목록, 공통)
   8. 회전 원형 문구
   --- 메인 영역별 (index.html 위→아래 순서와 같은 이름) ---
   9.  스포츠 마루 시스템 카드     .aw-flooring  > .aw-floor-cards
   10. 탄성원목마루 층 구조        .aw-flooring  > .aw-layers
   11. 탄성원목마루 특장점         .aw-flooring  > .aw-features
   12. 에이원우드 강점             .aw-strengths
   13. 제품소개 슬라이드 링크      .aw-product
   14. 시공 갤러리 제목·설명       .aw-portfolio
   15. 시공 갤러리 슬라이드        .aw-portfolio > .aw-gallery
   ※ 시공 분야 .aw-business / 숫자 .aw-stats / 작업 프로세스 .aw-process 는
     site.css(기본) + stats-process.css, 견적문의 .aw-contact 는 inquiry.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 기본 스타일
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px; /* 고정 헤더 높이만큼 앵커 이동 위치 보정 */
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
summary {
  cursor: pointer;
}

button {
  font: inherit;
  color: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

img,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

h3 {
  font-weight: 500;
  line-height: 1.5;
}

p {
  word-break: keep-all;
}

/* 영문 소제목 */
.eyebrow {
  margin-bottom: 20px;
  font-family: var(--latin);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* 라인형 버튼 */
.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  min-height: 48px;
  margin-top: 32px;
  padding: 14px 26px;
  border: 1px solid;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}

.button:hover {
  background: var(--brown);
  color: var(--color-white);
}

/* 화면에는 숨기고 스크린리더에만 읽힘 */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* 본문 바로가기 (키보드 포커스 시 노출) */
.skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 20px;
  background: var(--color-white);
  color: #222;
}

.skip:focus {
  top: 10px;
}

/* Lenis 스무스 스크롤 기본 스타일 (assets/js/lib/lenis.min.js, 구 face-page.css 에서 이동) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-behavior: allow-discrete;
  transition-property: overflow;
  transition-duration: 1ms;
}

/* 스크롤 등장 효과용 (data-reveal) */
.will-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s, transform 0.8s;
}

.revealed {
  opacity: 1;
  transform: none;
}

/* 표 가로 스크롤 */
.tableScroll {
  max-width: 100%;
  overflow-x: auto;
}

/* 동작 줄이기 설정 사용자 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  :before,
  :after {
    transition: none !important;
    animation: none !important;
  }

  .will-reveal {
    opacity: 1;
    transform: none;
  }

  video {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2. 로고 (assets/images/logo/Horizontal-logo_*.svg, 비율 약 3.9 : 1)
   -------------------------------------------------------------------------- */
/* 헤더 */
.fidelity .public-header.site-header .public-logo__asset {
  width: 150px;
  height: 38px;
}

/* 모바일 메뉴(드로어) 상단 */
.fidelity .public-drawer.site-drawer .public-drawer__head .public-logo__asset {
  width: 126px;
  height: 32px;
}

/* 푸터 */
.fidelity .public-footer.site-footer .public-footer__identity .public-logo__asset {
  width: 196px;
  height: 50px;
}

@media (max-width: 767px) {
  .fidelity .public-drawer.site-drawer .public-drawer__head .public-logo__asset {
    width: 118px;
    height: 30px;
  }

  .fidelity .public-footer.site-footer .public-footer__identity .public-logo__asset {
    width: 165px;
    height: 42px;
  }
}

/* --------------------------------------------------------------------------
   3. 컬러 보정 — 다크·영상 배경 위 강조 문구 가독성
   -------------------------------------------------------------------------- */
.fidelity .aw-contact__title span:last-child {
  color: var(--color-point-on-dark);
}

/* --------------------------------------------------------------------------
   4. 토스트 알림 (main.js initToast — data-toast="메시지")
   -------------------------------------------------------------------------- */
.aw-toast {
  position: fixed;
  left: 50%;
  bottom: max(32px, env(safe-area-inset-bottom));
  z-index: 9000;
  max-width: calc(100vw - 32px);
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--color-accent-dark);
  color: var(--color-white);
  font-family: var(--font-base, Pretendard, sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgb(var(--color-accent-dark-rgb) / 0.3);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.aw-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 767px) {
  .aw-toast {
    bottom: max(24px, env(safe-area-inset-bottom));
    font-size: 14px;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   5. 헤더 — 기본: 메인 비주얼 위 전체폭·투명 / 스크롤 시(.is-scrolled): 떠 있는 바 형태
      (.is-scrolled 는 main.js 가 스크롤 30px 이상에서 붙임)
   -------------------------------------------------------------------------- */
.fidelity .public-header.site-header {
  transition:
    top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease,
    border-color 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    backdrop-filter 0.4s ease;
}

.fidelity .public-header.site-header .public-header__inner {
  transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1199px 이하: 가운데 메뉴를 숨기고 전체 메뉴 버튼만 (구 face-page.css 에서 이동) */
@media (max-width: 1199px) {
  .fidelity .public-header.site-header .public-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .fidelity .public-header__nav {
    display: none;
  }

  .fidelity .public-header.site-header .public-header__menu {
    display: block;
  }
}

/* 기본(맨 위): 전체폭 · 투명 배경 */
.fidelity .public-header.site-header:not(.is-scrolled) {
  top: 0;
  width: 100%;
  height: 100px;
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.fidelity .public-header.site-header:not(.is-scrolled) .public-header__inner {
  padding-inline: clamp(20px, 3.4vw, 64px);
}

/* 밝은 사진 위에서도 메뉴 글자가 보이도록 위쪽에 옅은 그라디언트 */
.fidelity .public-header.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -60px;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(var(--brown-rgb) / 0.5), rgb(var(--brown-rgb) / 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.fidelity .public-header.site-header:not(.is-scrolled)::before {
  opacity: 1;
}

@media (max-width: 767px) {
  .fidelity .public-header.site-header:not(.is-scrolled) {
    height: 72px;
  }
}

/* 5-1. 로고 크기 · 메뉴 간격 — 기본(맨 위)은 크게·넓게, 스크롤 시(.is-scrolled) 기존 크기로 */
.fidelity .public-header.site-header .public-logo__asset {
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fidelity .public-header.site-header .public-header__nav > ul {
  transition: gap 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fidelity .public-header.site-header:not(.is-scrolled) {
  --public-header-menu-gap: clamp(36px, 3.6vw, 64px); /* 스크롤 시: 24px (site.css) */
}

.fidelity .public-header.site-header:not(.is-scrolled) .public-logo__asset {
  width: 240px; /* 스크롤 시: 150 x 38 (2. 로고) */
  height: auto;
}

@media (max-width: 767px) {
  .fidelity .public-header.site-header:not(.is-scrolled) .public-logo__asset {
    width: 200px; /* 스크롤 시: 118 x 30 */
    height: auto;
  }
}

/* 5-2. 전체 메뉴 버튼 (CONTACT 자리) — 모든 화면에서 표시, 두 줄이 어긋난 형태 */
.fidelity .public-header.site-header .public-header__menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  width: 48px;
  height: 48px;
  padding: 0 8px;
  color: var(--color-white);
}

.fidelity .public-header.site-header .public-header__menu span {
  width: 30px;
  height: 2px;
  margin: 0;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fidelity .public-header.site-header .public-header__menu span + span {
  width: 30px;
  margin-top: 0;
  transform: translateX(-6px); /* 아래 줄을 왼쪽으로 어긋나게 */
}

.fidelity .public-header.site-header .public-header__menu:hover span + span,
.fidelity .public-header.site-header .public-header__menu:focus-visible span + span {
  transform: none;
}

/* --------------------------------------------------------------------------
   6. 푸터 — 로고(왼쪽) + 회사 정보 한 영역(오른쪽)
   -------------------------------------------------------------------------- */
.fidelity .aw-footer {
  display: grid;
  position: relative;
  grid-template-columns: clamp(280px, 22vw, 340px) minmax(0, 1fr) auto; /* 로고(최소폭 = 로고 너비) | 정보 | 공유 버튼 */
  align-items: start;
  gap: 32px;
  padding: clamp(48px, 5vw, 72px) 0; /* 폭·좌우 여백은 .public-footer__inner (site.css) */
  border-bottom: 1px solid rgb(var(--color-secondary-light-rgb) / 0.322); /* 하단 영역(정책·카피라이트)과 구분선 */
  font-family: var(--font-base);
  color: rgb(var(--color-bg-02-rgb) / 0.85);
}

.fidelity .aw-footer__logo {
  display: block;
  width: 280px;
}

.fidelity .aw-footer__logo img {
  width: 100%;
  height: auto;
}

.fidelity .aw-footer__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  line-height: 1.6;
}

/* 항목 사이 세로 구분선 */
.fidelity .aw-footer__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-footer__list li {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  word-break: keep-all;
}

/* 구분선: 각 항목 왼쪽에 두고, 줄이 바뀌어 맨 앞에 오는 구분선은 .aw-footer__info 밖으로 밀려 잘림 */
.fidelity .aw-footer__info {
  overflow: hidden;
}

.fidelity .aw-footer__list {
  margin-left: -37px;
}

.fidelity .aw-footer__list li {
  position: relative;
  padding-left: 37px;
}

.fidelity .aw-footer__list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  width: 1px;
  height: 12px;
  background: rgb(var(--color-bg-02-rgb) / 0.35);
  transform: translateY(-50%);
}

.fidelity .aw-footer a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  transition: color 0.25s ease;
}

/* 항목명과 값 사이 간격 (링크 값 · 일반 값 공통) */
.fidelity .aw-footer__list a,
.fidelity .aw-footer__value {
  margin-left: 12px;
}

.fidelity .aw-footer a:hover {
  color: var(--color-secondary-light);
}

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

  /* 한 줄로 쌓일 때 공유 버튼은 오른쪽 위에 고정 */
  .fidelity .aw-footer .aw-share {
    position: absolute;
    top: clamp(48px, 5vw, 72px);
    right: 0;
  }
}

@media (max-width: 767px) {
  .fidelity .aw-footer {
    padding: 48px 0 40px;
  }

  .fidelity .aw-footer .aw-share {
    top: 40px;
    margin: 0;
  }

  .fidelity .aw-footer__logo {
    width: 200px;
  }

  .fidelity .aw-footer__info,
  .fidelity .aw-footer__list li {
    font-size: 14px;
  }

  /* 모바일: 구분선 없이 한 줄씩 */
  .fidelity .aw-footer__list {
    flex-direction: column;
    gap: 4px;
  }

  .fidelity .aw-footer__list {
    margin-left: 0;
  }

  .fidelity .aw-footer__list li {
    padding-left: 0;
  }

  .fidelity .aw-footer__list li::before {
    display: none;
  }
}

/* 6-1. 공유 버튼 (주소 복사) — 회사 정보 오른쪽, 마우스 오버 시 "공유하기" 툴팁 */
.fidelity .aw-share {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  /* border: 1px solid rgb(var(--color-secondary-light-rgb) / 0.5); */
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-bg-03);
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  margin-right: 64px; /* 화면 오른쪽 플로팅 퀵메뉴(.no-floating-cta)와 겹치지 않도록 */
}

.fidelity .aw-share:hover,
.fidelity .aw-share:focus-visible {
  border-color: var(--color-secondary-light);
  background: var(--color-secondary-light);
  color: var(--brown, var(--color-primary));
}

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

/* 툴팁 */
.fidelity .aw-share__tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  padding: 7px 12px;
  border-radius: 4px;
  background: var(--color-bg-02);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.fidelity .aw-share__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: var(--color-bg-02);
  transform: translateX(-50%);
}

.fidelity .aw-share:hover .aw-share__tip,
.fidelity .aw-share:focus-visible .aw-share__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   7. 빠른 메뉴 (.no-floating-cta) — 블로그·인스타그램·유튜브
      마우스 오버: 배경 --color-text, 아이콘 흰색 + 왼쪽에 툴팁
   -------------------------------------------------------------------------- */
.fidelity .no-floating-cta__btn {
  position: relative; /* 툴팁 기준 */
}

/* 문의하기·블로그·인스타그램·유튜브 공통: 마우스 오버 시 배경 --color-text, 아이콘 흰색 */
.fidelity .no-floating-cta__btn--inquiry:hover,
.fidelity .no-floating-cta__btn--inquiry:focus-visible,
.fidelity .no-floating-cta__btn--blog:hover,
.fidelity .no-floating-cta__btn--blog:focus-visible,
.fidelity .no-floating-cta__btn--instagram:hover,
.fidelity .no-floating-cta__btn--instagram:focus-visible,
.fidelity .no-floating-cta__btn--youtube:hover,
.fidelity .no-floating-cta__btn--youtube:focus-visible {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-white);
}

/* 툴팁 — 버튼 왼쪽 */
.fidelity .no-floating-cta__tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 7px 12px;
  border-radius: 4px;
  background: var(--brown, var(--color-primary));
  color: var(--color-bg-02);
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.fidelity .no-floating-cta__tip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  border: 6px solid transparent;
  border-left-color: var(--brown, var(--color-primary));
  transform: translateY(-50%);
}

.fidelity .no-floating-cta__btn:hover .no-floating-cta__tip,
.fidelity .no-floating-cta__btn:focus-visible .no-floating-cta__tip {
  opacity: 1;
  transform: translate(0, -50%);
}

/* 터치 기기에서는 툴팁 숨김 (탭 후 남아 있지 않도록) */
@media (hover: none) {
  .fidelity .no-floating-cta__tip {
    display: none;
  }
}

/* 블로그 아이콘 크기 — 다른 아이콘(24px / 모바일 22px)보다 조금 작게 */
.fidelity .no-floating-cta__btn .no-floating-cta__icon--blog {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .fidelity .no-floating-cta__btn .no-floating-cta__icon--blog {
    width: 18px;
    height: 18px;
  }
}

/* 6-2. 푸터 하단 정책 링크 (개인정보처리방침 · 이용약관 · 이메일무단수집거부) */
.fidelity .public-footer.site-footer .public-footer__legal a {
  font-size: 15px;
}

/* 개인정보처리방침 강조 */
.fidelity .public-footer.site-footer .public-footer__legal li:first-child a {
  font-weight: 700;
}

/* 5-3. 헤더 아이콘 버튼 (로그인 · 로그아웃 · 관리자페이지) + 전체 메뉴 버튼 툴팁
   - 아이콘: Feather (fe fe-log-in / fe-log-out / fe-settings), 전체 메뉴 버튼과 같은 48px 크기
   - 툴팁: 빠른 메뉴(7. .no-floating-cta__tip)와 같은 모양, 헤더가 화면 맨 위라서 버튼 아래에 표시
   - 그누보드 페이지: theme/basic/inc/aw.header.php / 정적 index.html: main.js initLoginState */
.fidelity .public-header.site-header .aw-login-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fidelity .public-header.site-header .aw-login {
  position: relative; /* 툴팁 기준 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--color-white);
  font-size: 24px;
  line-height: 1;
  transition: color 0.25s ease;
}

.fidelity .public-header.site-header .aw-login:hover,
.fidelity .public-header.site-header .aw-login:focus-visible {
  color: var(--color-secondary-light);
}

.fidelity .public-header.site-header .aw-login:focus-visible,
.fidelity .public-header.site-header .public-header__menu:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 0;
}

.fidelity .public-header.site-header .public-header__menu {
  position: relative; /* 툴팁 기준 */
}

/* 툴팁 (<em class="aw-hd-tip">) — 전체 메뉴 버튼의 span(햄버거 선) 스타일과 겹치지 않도록 em 사용 */
.fidelity .public-header.site-header .aw-hd-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 1;
  padding: 7px 12px;
  border-radius: 4px;
  background: var(--brown, var(--color-primary));
  color: var(--color-bg-02);
  font-family: var(--font-base);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.fidelity .public-header.site-header .aw-hd-tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-bottom-color: var(--brown, var(--color-primary));
  transform: translateX(-50%);
}

.fidelity .public-header.site-header .aw-login:hover .aw-hd-tip,
.fidelity .public-header.site-header .aw-login:focus-visible .aw-hd-tip,
.fidelity .public-header.site-header .public-header__menu:hover .aw-hd-tip,
.fidelity .public-header.site-header .public-header__menu:focus-visible .aw-hd-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 맨 오른쪽 전체 메뉴 버튼 툴팁은 화면 밖으로 나가지 않도록 오른쪽 정렬 */
.fidelity .public-header.site-header .public-header__menu .aw-hd-tip {
  left: auto;
  right: 0;
  transform: translateY(-6px);
}

.fidelity .public-header.site-header .public-header__menu .aw-hd-tip::after {
  left: auto;
  right: 18px;
  transform: none;
}

.fidelity .public-header.site-header .public-header__menu:hover .aw-hd-tip,
.fidelity .public-header.site-header .public-header__menu:focus-visible .aw-hd-tip {
  transform: none;
}

/* 터치 기기에서는 툴팁 숨김 (탭 후 남아 있지 않도록) — 빠른 메뉴와 동일 */
@media (hover: none) {
  .fidelity .public-header.site-header .aw-hd-tip {
    display: none;
  }
}

/* 로그인한 회원 이름 */
.fidelity .public-header.site-header .aw-login-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.fidelity .public-header.site-header .aw-login-user__name {
  display: inline-block;
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

/* 모바일(767px 이하): 헤더에는 로그인·회원 아이콘을 두지 않음
   → main.js initFullmenuMobile 이 전체 메뉴 하단으로 옮김 (스크립트 실행 전 깜빡임 방지용으로 먼저 숨김) */
@media (max-width: 767px) {
  .fidelity .public-header.site-header .aw-login-group {
    display: none;
  }
}

@media (max-width: 479px) {
  .fidelity .public-header.site-header .aw-login-group {
    gap: 0;
  }

  .fidelity .public-header.site-header .aw-login {
    width: 40px;
  }

  .fidelity .public-header.site-header .aw-login-user__name {
    max-width: 5em;
  }
}

/* --------------------------------------------------------------------------
   7-1. 이미지 문구 (.aw-img-caption) — 배경 이미지 영역 오른쪽 아래의 작은 설명 글자
      예) 시공 사진의 현장·제품명 "커피숍마루 : 큐링후로링"
      사용법: 배경 이미지가 있는 영역(position 이 지정된 요소) 안에 넣기
        <p class="aw-img-caption">커피숍마루 : 큐링후로링</p>
      적용 중: 개인정보처리방침·이용약관 상단 비주얼 (theme/basic/inc/aw.layout.head.php), 로그인·전체 메뉴 비주얼, about.html 회사 소개 사진
      위치를 바꾸려면 사용하는 곳에서 --aw-img-caption-x / --aw-img-caption-y 지정
   -------------------------------------------------------------------------- */
.aw-img-caption {
  position: absolute;
  right: var(--aw-img-caption-x, 120px); /* 화면 오른쪽 빠른 메뉴와 겹치지 않도록 */
  bottom: var(--aw-img-caption-y, 40px);
  z-index: 2; /* 어두운 덮개(::before/::after) 위 */
  margin: 0;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

/* 본문(.fidelity) 안에 넣었을 때: site.css 기본값 초기화(.fidelity p { margin:0; padding:0; border:0; font:inherit })가
   .aw-img-caption 보다 우선하므로 글자·여백·테두리만 다시 지정 (위치는 위 규칙 · 각 화면 규칙 그대로) */
.fidelity .aw-img-caption {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .aw-img-caption {
    right: auto;
    left: 24px;
    bottom: 24px;
  }
}

/* --------------------------------------------------------------------------
   7-2. 메인 비주얼 동영상 슬라이드 (index.html .public-home-hero, main.js initHero)
      - 이미지와 같은 방식으로 영역을 꽉 채움 (object-fit: cover)
      - 슬라이드 위치: "현재 번호 ── 전체 개수" (예: 01 ── 08)
   -------------------------------------------------------------------------- */
/* 높이: 화면 높이 전체 (site.css 의 620~1000px 대신)
   - 100svh: 휴대폰에서 주소창이 보일 때 기준 높이 → 아래 슬라이드 버튼이 주소창에 가려지지 않음 (지원 안 하는 브라우저는 100vh) */
.fidelity .public-home-hero {
  height: 100vh;
  height: 100svh;
}

.fidelity .public-home-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-primary-dark);
}

/* 오버레이 — 영상 전체에 검정 40% (밝은 영상 위에서도 문구가 읽히도록) */
.fidelity .public-home-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.fidelity .public-home-hero__count {
  min-width: 20px;
  font-family: "Pretendard", var(--font-sans-family, var(--font-base));
  font-size: clamp(13px, 0.194175vw + 12.2718px, 16px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums; /* 번호가 바뀌어도 폭이 흔들리지 않게 */
  opacity: 0.5;
}

.fidelity .public-home-hero__count.is-current {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7-3. 메인 페이지: 메인 비주얼이 보이는 동안 퀵메뉴 숨김 + 그 자리에 스크롤 안내
      - 퀵메뉴(data-hero-aware): 메인 비주얼을 지나가면 오른쪽에서 들어옴 (main.js initHeroQuickMenu)
      - 스크롤 안내(.aw-scroll-hint): 메인 비주얼 안, 퀵메뉴와 같은 자리 (PC 오른쪽 가운데 / 모바일 오른쪽 아래)
   -------------------------------------------------------------------------- */
.fidelity .no-floating-cta[data-hero-aware] {
  animation: none; /* 메인 페이지 등장 애니메이션 대신 아래 전환 효과 사용 */
  transition:
    opacity 0.5s ease,
    translate 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

.fidelity .no-floating-cta[data-hero-aware].is-hero-hidden {
  opacity: 0;
  visibility: hidden; /* 숨김 상태에서는 클릭·키보드 이동에서도 제외 */
  translate: calc(100% + var(--fcta-gap-edge, 24px) + env(safe-area-inset-right)) 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    translate 0.4s ease,
    visibility 0s linear 0.4s;
}

/* 스크롤 안내 — 세로 글자 "SCROLL" + 아래로 흐르는 선 */
.fidelity .aw-scroll-hint {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(24px + 26px - 20px + env(safe-area-inset-right)); /* 퀵메뉴 버튼(52px) 가운데에 맞춤 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 40px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.fidelity .aw-scroll-hint:hover {
  opacity: 1;
}

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

.fidelity .aw-scroll-hint__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.24em;
  writing-mode: vertical-rl;
}

.fidelity .aw-scroll-hint__line {
  position: relative;
  width: 1px;
  height: 72px;
  overflow: hidden;
  background: rgb(var(--color-white-rgb) / 0.3);
}

/* 선 안에서 위→아래로 흐르는 밝은 구간 */
.fidelity .aw-scroll-hint__line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--color-white);
  animation: aw-scroll-hint-flow 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes aw-scroll-hint-flow {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

@media (max-width: 767px) {
  /* 모바일: 퀵메뉴처럼 오른쪽 아래 */
  .fidelity .aw-scroll-hint {
    top: auto;
    right: calc(20px + 24px - 20px + env(safe-area-inset-right));
    bottom: calc(40px + env(safe-area-inset-bottom));
    transform: none;
  }

  .fidelity .aw-scroll-hint__line {
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .aw-scroll-hint__line::after {
    animation: none;
    height: 100%;
    opacity: 0.6;
  }

  .fidelity .no-floating-cta[data-hero-aware],
  .fidelity .no-floating-cta[data-hero-aware].is-hero-hidden {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   8. 회전 원형 문구 (.aw-circle-text) — 이미지 대신 SVG textPath 글자
      크기·위치·회전 애니메이션은 사용하는 영역의 클래스(.aw-flooring__circle-text, site.css)
   -------------------------------------------------------------------------- */
.aw-circle-text {
  overflow: visible;
}

.aw-circle-text__label {
  fill: var(--color-secondary);
  fill-opacity: 0.5; /* 은은하게 (기존 0.8) */
  font-family: var(--font-display, Marcellus, Georgia, serif);
  font-size: 24px; /* viewBox(300) 기준 크기 */
  letter-spacing: 0.08em;
}

/* ==========================================================================
   9. 스포츠 마루 시스템 카드 (.aw-floor-cards) — 메인 SPORTS FLOORING 영역
   - 이미지 박스(.aw-flooring__media--two) 안에 카드 4개 (2 x 2)
   ========================================================================== */
.fidelity .aw-flooring__media--cards {
  aspect-ratio: auto; /* 카드 내용 높이만큼 */
  background: none;
  overflow: visible;
}

.fidelity .aw-flooring__media--cards::after {
  content: none; /* 이미지용 노이즈 효과 제거 */
}

/* 순서: 문구(위) → 카드(아래). 문구의 기존 위쪽 여백은 없애고 카드 위에 간격 */
.fidelity .aw-flooring__primary-column .aw-flooring__copy--primary {
  margin-top: 0;
}

.fidelity .aw-flooring__media--cards {
  margin-top: clamp(40px, 4.2vw, 80px);
}

@media (min-width: 768px) {
  .fidelity .aw-flooring__media--cards {
    padding-right: 0; /* 오른쪽 빠른 메뉴(.no-floating-cta)와 겹치지 않도록 */
  }
}

@media (max-width: 767px) {
  .fidelity .aw-flooring__media--cards {
    width: 100%; /* 기존 이미지(94%, 오른쪽 정렬) 대신 전체 폭 */
  }
}

.fidelity .aw-floor-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-floor-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(10px, 1vw, 16px) clamp(10px, 1vw, 16px) clamp(16px, 1.6vw, 26px);
  border: 1px solid rgb(var(--color-white-rgb) / 0.8);
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(var(--color-white-rgb) / 0.82), rgb(var(--color-white-rgb) / 0.5));
  box-shadow: 0 10px 30px rgb(var(--color-primary-rgb) / 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* 카드 전체를 누르면 해당 제품 페이지로 — 제목 링크(.aw-floor-card__link)의 ::after 가 카드 전체를 덮음 */
.fidelity .aw-floor-card {
  position: relative;
}

.fidelity .aw-floor-card__link {
  color: inherit;
  text-decoration: none;
}

.fidelity .aw-floor-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 16px;
}

.fidelity .aw-floor-card__link:focus-visible {
  outline: none;
}

.fidelity .aw-floor-card:has(.aw-floor-card__link:focus-visible) {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.fidelity .aw-floor-card__image {
  margin: 0 0 clamp(10px, 1vw, 16px);
  border-radius: 10px;
  background: var(--color-bg);
  overflow: hidden;
}

.fidelity .aw-floor-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 263;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.fidelity .aw-floor-card__title {
  margin: 0 0 16px;
  font-family: var(--font-base);
  font-size: clamp(16px, 0.45vw + 13px, 20px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-floor-card__list {
  display: grid;
  gap: 4px;
  margin: 0 4px;
  padding: 0;
  list-style: none;
}

.fidelity .aw-floor-card__list li {
  position: relative;
  padding-left: 12px;
  font-size: clamp(13px, 0.2vw + 12px, 15px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

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

/* 1700px 이상: 카드 4개 가로 한 줄 (그보다 좁으면 2 x 2 — 카드 폭이 너무 좁아지지 않도록) */
@media (min-width: 1700px) {
  .fidelity .aw-floor-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 0.7vw, 14px);
  }

  .fidelity .aw-floor-card {
    padding: 24px;
    border-radius: 12px;
  }

  .fidelity .aw-floor-card__image {
    border-radius: 8px;
  }

  .fidelity .aw-floor-card__title {
    margin-inline: 2px;
    font-size: clamp(14px, 0.42vw + 9px, 18px);
  }

  .fidelity .aw-floor-card__list {
    margin-inline: 2px;
  }

  .fidelity .aw-floor-card__list li {
    padding-left: 16px;
    font-size: 16px;
  }
}

@media (hover: hover) {
  .fidelity .aw-floor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgb(var(--color-primary-rgb) / 0.14);
  }

  .fidelity .aw-floor-card:hover .aw-floor-card__image img {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .aw-floor-card,
  .fidelity .aw-floor-card__image img {
    transition: none;
  }

  .fidelity .aw-floor-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   10. 탄성원목마루 층 구조 (.aw-layers) — 메인 FLOOR TECHNOLOGY 이미지
   - 왼쪽에 층 명칭, 지시선이 이미지 속 해당 층(--x, --y)까지 이어짐
   - 이미지 비율(1000x478)에 박스를 맞춰 위치(%)가 어긋나지 않게 함
   ========================================================================== */
.fidelity .aw-flooring__media--layers {
  aspect-ratio: 1000 / 478;
}

.fidelity .aw-layers {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.fidelity .aw-layers__item {
  position: absolute;
  top: var(--y);
  left: 4%;
  right: calc(100% - var(--x)); /* 지시선 끝 = 해당 층 위치 */
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%);
}

.fidelity .aw-layers__label {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(var(--color-white-rgb) / 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-base);
  font-size: clamp(12px, 0.35vw + 8px, 15px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-text);
  white-space: nowrap;
}

/* 지시선 + 끝점 */
.fidelity .aw-layers__item::before {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(var(--color-text-rgb) / 0.75);
}

.fidelity .aw-layers__item::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: -10px;
  border: 1.5px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-text);
  box-shadow: 0 0 0 3px rgb(var(--color-white-rgb) / 0.35);
}

.fidelity .aw-layers__label {
  order: -1; /* 명칭 → 선 → 점 순서 */
}

/* 모바일: 이미지가 작아 명칭이 겹치므로 이미지 아래 목록으로 표시 */
@media (max-width: 767px) {
  .fidelity .aw-flooring__media--layers {
    aspect-ratio: auto;
    background: none;
    overflow: visible;
  }

  .fidelity .aw-flooring__media--layers img {
    height: auto;
    aspect-ratio: 1000 / 478;
  }

  .fidelity .aw-layers {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
  }

  .fidelity .aw-layers__item {
    position: static;
    transform: none;
  }

  .fidelity .aw-layers__item::before,
  .fidelity .aw-layers__item::after {
    content: none;
  }

  .fidelity .aw-layers__label {
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    font-size: 12px;
  }
}

/* ==========================================================================
   11. 탄성원목마루 특장점 (.aw-features) — FLOOR TECHNOLOGY 문구 아래 아이콘 목록
   - 가로 나열: 1800px 이상 5개 한 줄 / 768~1799px 3개씩 / 모바일 2개씩
   ========================================================================== */
/* 아이콘 목록이 들어가도록 왼쪽 문구 영역을 열 전체 폭으로 (기존 최대 520px) */
.fidelity .aw-flooring__copy--secondary:has(.aw-features) {
  width: auto;
}

.fidelity .aw-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
  margin: clamp(32px, 3vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-features__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fidelity .aw-features__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(52px, 3.6vw, 64px);
  height: clamp(52px, 3.6vw, 64px);
  margin-bottom: 16px;
  border: 1.5px solid var(--color-secondary);
  border-radius: 50%;
  color: var(--color-secondary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.fidelity .aw-features__icon svg {
  width: 46%;
  height: 46%;
  stroke-width: 1.5;
}

.fidelity .aw-features__title {
  margin-bottom: 8px;
  font-family: var(--font-base);
  font-size: clamp(14px, 0.3vw + 12px, 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-features__desc {
  font-size: clamp(12px, 0.15vw + 12px, 16px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

@media (min-width: 1800px) {
  .fidelity .aw-features {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px 16px;
  }
}

@media (hover: hover) {
  .fidelity .aw-features__item:hover .aw-features__icon {
    background: var(--color-secondary);
    color: var(--color-white);
  }
}

@media (max-width: 767px) {
  .fidelity .aw-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

/* 스크롤 등장: 위 문구가 다 나타난 뒤 왼쪽부터 순서대로 (main.js initFeatures — .is-ready / .is-visible, 순번 --i) */
.fidelity .aw-features.is-ready .aw-features__item {
  opacity: 0;
  transform: translateX(-32px);
}

/* 전환 효과는 나타날 때만 (숨길 때는 즉시) */
.fidelity .aw-features.is-visible .aw-features__item {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.28s + 0.15s); /* 01 → 05 순서, 0.28초 간격 */
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .aw-features__icon {
    transition: none;
  }
}

/* ==========================================================================
   12. 에이원우드 강점 (.aw-strengths) — site.css 의 .aw-strengths 기본 규칙을 덮어씀
   - 4개 가로 나열 + 사이 세로 구분선 / 모바일 2 x 2
   ========================================================================== */
.fidelity .aw-strengths {
  min-height: 0; /* site.css 기본 높이(900px) 해제 */
  padding: clamp(48px, 5vw, 96px) clamp(20px, 4.2vw, 80px);
}

/* 상단 제목 (FEATURE / Why AONE WOOD / 설명) — 견적 및 상담문의 제목 스타일 참고 */
.fidelity .aw-strengths__header {
  margin: 0 auto clamp(40px, 4.4vw, 80px);
  text-align: center;
}

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

.fidelity .aw-strengths__heading {
  margin: clamp(12px, 1vw, 20px) 0 0;
  font-family: Marcellus, serif;
  font-size: clamp(32px, 1.6vw + 24px, 56px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.fidelity .aw-strengths__heading .aw-title-point {
  color: var(--color-secondary);
}

.fidelity .aw-strengths__lead {
  margin: clamp(16px, 1.4vw, 28px) 0 0;
  font-size: clamp(15px, 0.3vw + 13px, 18px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.fidelity .aw-strengths__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.fidelity .aw-strengths__item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 1.6vw, 28px);
  position: relative;
  padding: 8px clamp(12px, 2vw, 40px);
}

/* 항목 사이 세로 구분선 */
.fidelity .aw-strengths__item + .aw-strengths__item::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  width: 1px;
  background: var(--color-border-dark);
  opacity: 0.6;
}

.fidelity .aw-strengths__icon {
  flex: none;
  width: clamp(48px, 3.4vw, 80px);
  height: clamp(48px, 3.4vw, 80px);
  margin-top: 4px;
  color: var(--color-secondary);
}

/* 아이콘: 움직이는 GIF (assets/images/main/feature_01~04.gif, 256x256) */
.fidelity .aw-strengths__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

.fidelity .aw-strengths__title {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-base);
  font-size: clamp(16px, 0.4vw + 14px, 24px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--color-text);
  word-break: keep-all;
}

.fidelity .aw-strengths__desc {
  margin: 0;
  font-size: clamp(14px, 0.15vw + 14px, 16px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

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

  .fidelity .aw-strengths__item {
    justify-content: flex-start;
  }

  /* 2열일 때 각 줄 첫 항목은 구분선 없음 */
  .fidelity .aw-strengths__item:nth-child(odd)::before {
    content: none;
  }
}

@media (max-width: 767px) {
  .fidelity .aw-strengths__item {
    flex-direction: column;
    gap: 12px;
    padding-inline: 12px;
  }

  .fidelity .aw-strengths__icon {
    margin-top: 0;
  }

}

@media (max-width: 500px) {
    .fidelity .aw-strengths__item {
      padding: 8px 0;
      text-align: center;
      width: 100%;
      align-items: center;
  }
}

/* ==========================================================================
   13. 제품소개 슬라이드 링크 (.aw-product__link)
   - 슬라이드 전체가 제품 페이지 링크
   - 마우스 오버(키보드 포커스) 시: 이미지 어둡게 + VIEW MORE 버튼이 아래에서 위로
   ========================================================================== */
.fidelity .aw-product__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fidelity .aw-product__media {
  position: relative;
}

/* 어두운 오버레이 */
.fidelity .aw-product__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.fidelity .aw-product__media img {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* VIEW MORE 버튼 */
.fidelity .aw-product__more {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 4px;
  background: rgb(var(--color-border-rgb) / 0.6); /* 반투명 */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-text);
  font-family: Marcellus, var(--font-display, serif);
  font-size: clamp(16px, 0.4vw + 13px, 20px);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 28px));
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

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

@media (hover: hover) {
  .fidelity .aw-product__link:hover .aw-product__media::after {
    opacity: 1;
  }

  .fidelity .aw-product__link:hover .aw-product__media img {
    transform: scale(1.04);
  }

  .fidelity .aw-product__link:hover .aw-product__more {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 키보드 이동 시에도 같은 표시 */
.fidelity .aw-product__link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}

.fidelity .aw-product__link:focus-visible .aw-product__media::after {
  opacity: 1;
}

.fidelity .aw-product__link:focus-visible .aw-product__more {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .aw-product__media::after,
  .fidelity .aw-product__media img,
  .fidelity .aw-product__more {
    transition: none;
  }
}

/* ==========================================================================
   14. 시공 갤러리 제목·설명 (.aw-portfolio) — 강조 단어를 같은 줄에 표시
   - site.css 의 .aw-portfolio__title span { display: block } 덮어쓰기
   ========================================================================== */
/* 영문 제목 — 다른 섹션 영문 제목처럼 나무색 (site.css 는 본문색) */
.fidelity .aw-portfolio__eyebrow {
  color: var(--color-secondary);
}

.fidelity .aw-portfolio__title span.aw-title-point {
  display: inline;
  color: var(--color-secondary);
}

/* 왼쪽: 제목 + VIEW MORE(한 줄) → 설명 문구 / 오른쪽: 좌우 이동 버튼 (15-1) */
.fidelity .aw-portfolio__heading .aw-portfolio__description {
  margin-top: clamp(16px, 1.2vw, 24px);
}

/* --------------------------------------------------------------------------
   15-1. 시공 사례 좌우 이동 버튼 — 오른쪽 VIEW MORE 버튼 옆
      - 모양은 제품소개 화살표(.aw-product__nav, site.css)와 동일, 크기만 작게
      - 흐름(main.js initPortfolio)이 동작할 때만 표시 (.has-portfolio-nav)
   -------------------------------------------------------------------------- */
/* 제목 + VIEW MORE 버튼 한 줄 (좁은 화면에서는 버튼이 아래로 내려감) */
.fidelity .aw-portfolio__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(24px, 2.4vw, 40px);
  margin-top: clamp(20px, 0.517799vw + 18.0583px, 28px); /* 제목의 원래 위 여백 */
}

.fidelity .aw-portfolio__title-row .aw-portfolio__title {
  margin-top: 0;
}

.fidelity .aw-portfolio__title-row .aw-portfolio__button {
  flex: none;
  margin-top: 0;
}

/* 오른쪽: 좌우 이동 버튼만 (오른쪽 끝 정렬) */
.fidelity .aw-portfolio__copy {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.fidelity .aw-portfolio__nav {
  display: none;
  gap: 10px;
}

.fidelity .aw-portfolio.has-portfolio-nav .aw-portfolio__nav {
  display: flex;
}

.fidelity .aw-portfolio__nav-btn {
  display: grid;
  place-items: center;
  width: clamp(40px, 1.2vw + 34px, 52px);
  height: clamp(40px, 1.2vw + 34px, 52px);
  padding: 0;
  border: 1px solid rgb(var(--color-secondary-rgb) / 0.651);
  border-radius: 50%;
  background: rgb(var(--color-bg-02-rgb) / 0.961);
  color: var(--color-primary);
  box-shadow: 0 8px 20px rgb(var(--color-primary-rgb) / 0.078);
  cursor: pointer;
  transition: color 0.35s, background-color 0.35s, border-color 0.35s, transform 0.35s;
}

.fidelity .aw-portfolio__nav-btn svg {
  display: block;
  width: clamp(18px, 0.2vw + 17px, 20px);
  height: clamp(18px, 0.2vw + 17px, 20px);
}

.fidelity .aw-portfolio__nav-btn:hover,
.fidelity .aw-portfolio__nav-btn:focus-visible {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-bg-02);
  transform: scale(1.04);
}

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

@media (prefers-reduced-motion: reduce) {
  .fidelity .aw-portfolio__nav-btn {
    transition: none;
  }
}

/* ==========================================================================
   15. 시공 갤러리 슬라이드 (.aw-portfolio 안의 .aw-gallery__*) — 흐르는 이미지
   - 각 이미지 = 카테고리 링크 / 하단에 번호 + 카테고리명
   - 마우스 오버(키보드 포커스): 어두운 오버레이 + VIEW MORE (제품소개 버튼과 동일)
   - 마우스를 올리면 흐름 일시정지 (main.js initPortfolio)
   ========================================================================== */
.fidelity .aw-gallery__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--color-white);
  text-decoration: none;
}

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

/* 하단 그라데이션 (카테고리명 가독성) + 오버 시 전체 어둡게 */
.fidelity .aw-gallery__link::before,
.fidelity .aw-gallery__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fidelity .aw-gallery__link::before {
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 40%);
}

.fidelity .aw-gallery__link::after {
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fidelity .aw-gallery__caption {
  position: absolute;
  left: clamp(16px, 1.4vw, 28px);
  right: clamp(16px, 1.4vw, 28px);
  bottom: clamp(16px, 1.4vw, 28px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fidelity .aw-gallery__num {
  font-family: Marcellus, serif;
  font-size: clamp(13px, 0.2vw + 12px, 15px);
  letter-spacing: 0.08em;
  color: var(--color-secondary-light);
}

.fidelity .aw-gallery__cate {
  font-family: var(--font-base);
  font-size: clamp(16px, 0.4vw + 13px, 20px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* VIEW MORE — 제품소개(.aw-product__more)와 같은 모양 */
.fidelity .aw-gallery__more {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 4px;
  background: rgb(var(--color-border-rgb) / 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-text);
  font-family: Marcellus, var(--font-display, serif);
  font-size: clamp(15px, 0.3vw + 13px, 18px);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 28px));
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

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

@media (hover: hover) {
  .fidelity .aw-gallery__link:hover::after {
    opacity: 1;
  }

  .fidelity .aw-gallery__link:hover img {
    transform: scale(1.05);
  }

  .fidelity .aw-gallery__link:hover .aw-gallery__more {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

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

.fidelity .aw-gallery__link:focus-visible::after {
  opacity: 1;
}

.fidelity .aw-gallery__link:focus-visible .aw-gallery__more {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .aw-gallery__link img,
  .fidelity .aw-gallery__link::after,
  .fidelity .aw-gallery__more {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   7-4. 커스텀 셀렉트 (select[data-aw-select], main.js initCustomSelect) — 공통
      - 기본 select 펼침 목록(파란 선택 표시)은 스타일을 바꿀 수 없어 버튼 + 목록으로 새로 그림
      - 버튼 모양은 원래 select 의 class(예: .aw-pw__input)를 그대로 받음 — 여기서는 공통 동작 · 펼침 목록만
      - 쓰는 곳: 견적문의 검색 항목 · 문의 유형, 시공실적 시공 연도
   -------------------------------------------------------------------------- */
.aw-select {
  position: relative;
}

/* 원래 select — 보이지 않게 겹쳐 두기만 (폼 전송 · 필수 검사 말풍선 위치용) */
.aw-select .aw-select__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.aw-select__button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.aw-select__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 아직 고르지 않음 (첫 안내 항목) — 흐린 글자 */
.aw-select__button.is-placeholder .aw-select__value {
  color: var(--color-text-muted);
}

/* 펼침 목록 */
.aw-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  max-height: 300px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: 0 14px 32px rgb(var(--color-primary-rgb) / 0.12);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.aw-select.is-open .aw-select__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.aw-select__option {
  position: relative;
  padding: 11px 36px 11px 14px;
  border-radius: 8px;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.aw-select__option.is-placeholder {
  color: var(--color-text-muted);
}

/* 마우스 · 키보드로 가리킨 항목 */
.aw-select__option:hover,
.aw-select__option.is-active {
  background: rgb(var(--color-secondary-rgb) / 0.1);
  color: var(--color-secondary);
}

/* 선택된 항목 — 나무색 굵은 글자 + 오른쪽 체크 */
.aw-select__option[aria-selected="true"] {
  font-weight: 600;
  color: var(--color-secondary);
}

.aw-select__option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateY(-50%);
}

/* 열렸을 때 화살표 뒤집기 (부모의 ::after 화살표 — .aw-qa__select · .aw-pw__select) */
.aw-select.is-open::after {
  transform: translateY(-20%) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .aw-select__list {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   16. 하위 메뉴 탭 (.aw-company-tab) — 비주얼 아래 가운데, 현재 페이지 밑줄
       회사소개(연혁 · 특허 및 인증서) · 제품소개(체육관 마루 · 학교용 마루 · 환기형 걸레받이) 공통
   -------------------------------------------------------------------------- */
.fidelity .aw-company-tab {
  border-bottom: 1px solid var(--color-border);
}

.fidelity .aw-company-tab__list {
  display: flex;
  justify-content: safe center; /* 넘치면 왼쪽부터 (제품소개 7개 — 모바일에서 가로로 밀어서 보기) */
  overflow-x: auto;
  scrollbar-width: none;
  gap: clamp(24px, 4vw, 72px);
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.fidelity .aw-company-tab__list::-webkit-scrollbar {
  display: none;
}

.fidelity .aw-company-tab__list > li {
  flex: none;
}

.fidelity .aw-company-tab__link {
  position: relative;
  display: block;
  padding: clamp(18px, 1.6vw, 26px) 0;
  font-family: var(--font-base);
  font-size: clamp(15px, 0.3vw + 12px, 18px);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.fidelity .aw-company-tab__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-secondary);
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fidelity .aw-company-tab__link:hover,
.fidelity .aw-company-tab__link:focus-visible,
.fidelity .aw-company-tab__link.is-active {
  color: var(--color-text);
}

.fidelity .aw-company-tab__link:hover::after,
.fidelity .aw-company-tab__link:focus-visible::after,
.fidelity .aw-company-tab__link.is-active::after {
  transform: scaleX(1);
}

.fidelity .aw-company-tab__link.is-active {
  font-weight: 600;
}