/* ==========================================================================
   회사소개 > About US (about.html)
   - 레이아웃: site.css 의 .public-director-* (비주얼 / 회사 소개 / WHY / 상담)
   - 이 파일: 스크롤 등장 효과, 흐르는 글자, 하단 상담 영역
   - 동작: assets/js/main.js initStoryReveal · initContactReveal
   1. 스크롤 등장 효과 ([data-story-reveal])
   2. 흐르는 글자 (비주얼 이미지 위 AONE WOOD)
   3. 회사 소개 영역 보정
   4. 하단 상담 영역 (.public-home-contact)
   5. 수치 요약 (.aw-about-stats)
   6. Mission 가치 아이콘 목록 (.aw-about-values)
   7. 약속 띠 · OUR BUSINESS (.aw-about-strengths · .aw-about-spaces)
   8. 마무리 문구 띠 (.aw-about-closing)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 스크롤 등장 효과
      - main.js 가 html 에 .aw-story-ready 를 붙인 경우에만 숨김 상태로 시작
        (스크립트가 없거나 움직임 줄이기 설정이면 처음부터 그대로 보임)
      - 글 영역: 옆(또는 아래)에서 미끄러지며 나타남
      - 이미지 영역(figure): 한쪽에서 반대쪽으로 펼쳐지듯 드러남
      - 지연: data-story-delay="0.15" → --story-delay (main.js 가 지정)
   -------------------------------------------------------------------------- */
.aw-story-ready [data-story-reveal] {
  --story-ease: cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transition:
    opacity 1.4s var(--story-ease) var(--story-delay, 0s),
    transform 1.5s var(--story-ease) var(--story-delay, 0s),
    clip-path 1.6s var(--story-ease) var(--story-delay, 0s);
  will-change: opacity, transform;
}

/* 글 영역 시작 위치 (옆 + 살짝 아래에서 대각선으로) */
.aw-story-ready [data-story-reveal="left"]:not(figure) {
  transform: translate3d(-40px, 14px, 0);
}

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

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

.aw-story-ready [data-story-reveal][data-story-fade]:not(figure) {
  transform: translate3d(0, 16px, 0);
}

/* 이미지 영역 시작 모양 (가려진 쪽에서 펼쳐짐) */
.aw-story-ready figure[data-story-reveal="left"] {
  clip-path: inset(0 100% 0 0);
}

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

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

/* 화면에 들어오면 */
.aw-story-ready [data-story-reveal].is-story-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* 처음 숨김 상태를 줄 때는 전환 없이 바로 (보이던 요소가 사라지는 움직임 방지, main.js) */
.aw-story-init [data-story-reveal],
.aw-story-init .public-home-contact__content {
  transition: none !important;
}

/* 다 나타난 뒤에는 will-change 해제 (main.js) */
.aw-story-ready [data-story-reveal].is-story-done {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   2. 흐르는 글자 — 비주얼 이미지 위를 일정한 속도로 왼쪽으로 (68초에 한 바퀴)
      (@keyframes ui-marquee-whisper 는 site.css)
   -------------------------------------------------------------------------- */
.fidelity .public-director-visual__marquee-track {
  display: flex;
  width: max-content;
  animation: ui-marquee-whisper 68s linear infinite;
}

.fidelity .public-director-visual__marquee-brand {
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .public-director-visual__marquee-track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   3. 회사 소개 영역 보정 (사진 비율 · 목록 간격)
   -------------------------------------------------------------------------- */
.fidelity .public-director-profile__portrait img,
.fidelity .public-director-why__media img,
.fidelity .public-director-visual__image {
  object-fit: cover;
  object-position: center;
}

/* MISSION & VISION 영역 배경 — site.css 값 대신 --color-bg-03 */
.fidelity .public-director-why {
  background: var(--color-bg-03);
}

/* WHY 제목 —site.css 자간 -0.04em · 줄간격 1.31 → -0.06em · 1.4 */
.fidelity .public-director-why__title {
  letter-spacing: -0.06em;
  line-height: 1.4;
}

/* WHY 영역 폭 — site.css 1684px · 좌우 20px → 1800px · 16px */
.fidelity .public-director-why__inner {
  max-width: 1800px;
  padding-inline: 16px;
}

/* WHY 사진 비율 — site.css 64:23(가로로 아주 긴 띠) → 16:8 로 높이 키움 */
.fidelity .public-director-why__media {
  aspect-ratio: 16 / 8;
}

/* 이미지 질감(노이즈) 덮개 — 메인 이미지(main.css .aw-flooring__media:after)와 같은 효과 */
.fidelity .public-director-why__media {
  position: relative;
}

.fidelity .public-director-visual__media::after,
.fidelity .public-director-profile__portrait::after,
.fidelity .public-director-why__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.08;
  background: url("../images/common/aw-noise.svg") 0 0 / 128px 128px;
  pointer-events: none;
}

/* 회사 소개 사진은 질감 대신 하단 어둡게 — 메인 시공 사례(common.css .aw-gallery__link::before)와 같은 그라데이션 */
.fidelity .public-director-profile__portrait::after {
  opacity: 0.7;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 40%);
}

@media print, (forced-colors: active) {
  .fidelity .public-director-visual__media::after,
  .fidelity .public-director-profile__portrait::after,
  .fidelity .public-director-why__media::after {
    content: none;
  }
}

/* 비주얼 제목·설명 영역 — 아래 여백을 늘려 세로선 자리 확보 */
.fidelity .public-director-visual__copy {
  padding-bottom: 200px;
}

/* 비주얼 이미지 아래 세로선 — site.css 값(높이 140 · 아래로 80 삐져나옴)을 이미지 안쪽으로 */
.fidelity .public-director-visual__rule {
  height: 120px;
  bottom: 40px;
  z-index: 100000;
}

/* 회사 소개 사진 높이 800px (모바일은 세로 비율 609:640)
   - site.css 는 2줄 그리드(최소 420+380px)에 사진이 2줄을 차지하고, 사진 원본 비율로도 높이가 늘어남
     → 아래 목록(credentials)을 뺐으므로 1줄 그리드로, 사진은 틀에 맞춰 채우기만 하도록 absolute */
.fidelity .public-director-profile__layout {
  grid-template-rows: auto;
}

.fidelity .public-director-profile__portrait {
  position: relative;
  grid-area: 1 / 2;
  height: 800px;
  min-height: 0;
  /* 사진 설명(.aw-img-caption, common.css 7-1) — 사진 안쪽 하단 우측 */
  --aw-img-caption-x: 20px;
  --aw-img-caption-y: 20px;
}

.fidelity .public-director-profile__portrait img {
  position: absolute;
  inset: 0;
}

@media (max-width: 820px) {
  .fidelity .public-director-profile__portrait {
    height: auto;
    aspect-ratio: 609 / 640;
  }
}

/* 소개 글 — 제목 아래 세로선(.public-director-profile__rule)을 없앤 대신 위 여백 */
.fidelity .public-director-profile__message {
  margin-top: 40px;
}

.fidelity .public-director-profile__message p + p {
  margin-top: 1em;
}

/* 회사 소개 대표 문장 ("에이원우드는 사람과 공간을 생각하는 …")
   — 원래 이름·직함용 제목 자리라 기본 글자가 작으므로 대표 문장 크기로 지정 */
.fidelity .public-director-profile__identity.aw-about-statement {
  font-family: var(--font-base);
  font-size: clamp(22px, 0.9vw + 17px, 30px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--color-text);
  word-break: keep-all;
}

/* 시공 분야 배지 (.aw-about-tags) — 소개 글 아래 둥근 태그 나열 */
.fidelity .aw-about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: clamp(28px, 2.4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-about-tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgb(var(--color-secondary-rgb) / 0.35);
  border-radius: 999px;
  background: rgb(var(--color-secondary-rgb) / 0.08);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-primary);
  white-space: nowrap;
}

/* 태그 앞 # (장식 — 화면 낭독기는 읽지 않음) */
.fidelity .aw-about-tags li::before {
  content: "#";
  content: "#" / "";
  margin-right: 2px;
  color: var(--color-secondary);
}

@media (max-width: 767px) {
  .fidelity .aw-about-tags li {
    padding: 8px 14px;
    font-size: 14px;
  }
}

/* 강조 단어 ("에이원우드") — 나무색 */
.fidelity .aw-about-statement__accent {
  font-style: normal;
  color: var(--color-secondary);
}

@media (max-width: 767px) {
  .fidelity .public-director-profile__identity.aw-about-statement {
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   4. 하단 상담 영역
      - 영상 배경 위 가운데 문구 + 견적문의 버튼
      - 스크롤에 따라 영상이 아래 가운데에서 원형으로 커지며 드러남 (main.js initContactReveal)
   -------------------------------------------------------------------------- */
.fidelity .public-home-contact {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 72vh, 760px);
  padding: clamp(80px, 9vw, 140px) clamp(20px, 4vw, 64px);
  overflow: hidden;
  background: var(--color-primary-dark);
  color: var(--color-white);
  text-align: center;
}

.fidelity .public-home-contact__media {
  position: absolute;
  inset: 0;
  margin: 0;
  clip-path: circle(var(--contact-radius, 150%) at 50% 100%);
}

.fidelity .public-home-contact__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.fidelity .public-home-contact__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fidelity .public-home-contact__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-story-ready .fidelity .public-home-contact__content:not(.is-story-in) {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.fidelity .public-home-contact__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-secondary-light);
}

.fidelity .public-home-contact__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.fidelity .public-home-contact__title span {
  display: block;
}

.fidelity .public-home-contact__description {
  margin: 20px 0 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgb(var(--color-white-rgb) / 0.85);
  word-break: keep-all;
}

.fidelity .public-home-contact__description a {
  color: inherit;
  font-weight: 600;
}

.fidelity .public-home-contact__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 16px 28px;
  border: 1px solid rgb(var(--color-white-rgb) / 0.6);
  border-radius: 999px;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.fidelity .public-home-contact__button i {
  font-size: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fidelity .public-home-contact__button:hover,
.fidelity .public-home-contact__button:focus-visible {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
}

.fidelity .public-home-contact__button:hover i {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .public-home-contact__media {
    clip-path: none;
  }
}

/* --------------------------------------------------------------------------
   5. 수치 요약 (.aw-about-stats) — 상단 비주얼 이미지 바로 아래 띠 (오른쪽으로 갈수록 아이보리 그라디언트)
      - 아이콘 + 숫자(단위) + 설명, 칸 사이 세로 구분선 / 모바일 2×2
      - 숫자: 화면에 들어오면 0(또는 data-countup-from)부터 올라감 (main.js initCountUp)
   -------------------------------------------------------------------------- */
.fidelity .aw-about-stats {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(24px, 2vw, 40px) clamp(16px, 2.4vw, 40px);
  background: linear-gradient(90deg, rgb(var(--color-bg-rgb) / 0) 0%, var(--color-bg-02) 100%), var(--color-bg);
}

.fidelity .aw-about-stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-about-stats__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.2vw, 40px);
  min-width: 0;
  padding: 16px clamp(16px, 1.2vw, 40px);
}

.fidelity .aw-about-stats__item + .aw-about-stats__item {
  border-left: 1px solid var(--color-border);
}

.fidelity .aw-about-stats__icon {
  flex: none;
  font-size: clamp(28px, 1.6vw + 16px, 56px);
  color: var(--color-secondary-light);
}

/* 아이콘 — Feather 원본(선 굵기 2)보다 얇게 1.25 로 다시 그림 (모양은 Feather 그대로)
   체크 표시 방패는 Feather 에 없어 shield + 체크로 직접 구성 */
.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon) {
  -webkit-mask-image: var(--aw-stats-icon);
  mask-image: var(--aw-stats-icon);
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).fe-award {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).fe-layers {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).fe-users {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).aw-icon-shield-check {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).fe-settings {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* Vision 아이콘 — Feather 에 없어 Lucide(Feather 계열, 같은 24px 선 아이콘) 모양으로 구성: 전구 · 건물 · 새싹 */
.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).aw-icon-lightbulb {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).aw-icon-building {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).aw-icon-sprout {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5-2.5.8-6.4 3-10'/%3E%3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z'/%3E%3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z'/%3E%3C/svg%3E");
}

/* 약속 띠 · 마무리 띠 아이콘 — 잎 · 보석 · 악수(Lucide 모양) / 하트(Feather) */
.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).aw-icon-leaf {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).aw-icon-gem {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).aw-icon-handshake {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
}

.fidelity :is(.aw-about-stats__icon, .aw-about-values__icon .fe, .aw-about-icon).aw-icon-heart {
  --aw-stats-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

.fidelity .aw-about-stats__text {
  min-width: 0;
}

.fidelity .aw-about-stats__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  font-family: var(--font-en);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums; /* 숫자가 올라가는 동안 폭 흔들림 방지 */
  white-space: nowrap;
}

.fidelity .aw-about-stats__unit {
  font-family: var(--font-base);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.8;
}

.fidelity .aw-about-stats__label {
  margin: 8px 0 0;
  font-family: var(--font-base);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

/* --------------------------------------------------------------------------
   6. Mission 가치 아이콘 목록 (.aw-about-values) — WHY 영역 Mission 문구 아래
   7. 약속 띠 · OUR BUSINESS (.aw-about-strengths · .aw-about-spaces)
   8. 마무리 문구 띠 (.aw-about-closing)
      - 갈색 원 안 흰 아이콘 + 영문 제목 + 설명 (3칸, 구분선 없음)
      - 아이콘은 위 5번의 얇은 선 아이콘(--aw-stats-icon)을 같이 사용
   -------------------------------------------------------------------------- */
.fidelity .aw-about-values {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-about-values__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.fidelity .aw-about-values__icon {
  display: grid;
  place-items: center;
  width: clamp(68px, 4.4vw + 20px, 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-bg-04);
  color: var(--color-white);
  font-size: clamp(28px, 1.6vw + 14px, 36px);
}

.fidelity .aw-about-values__title {
  display: block;
  margin-top: clamp(8px, 1.2vw, 16px);
  font-family: var(--font-base);
  font-size: clamp(16px, 0.4vw + 10px, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-secondary);
}

.fidelity .aw-about-values__text {
  display: block;
  margin-top: 8px;
  font-family: var(--font-base);
  font-size: clamp(14px, 0.4vw + 10px, 18px);
  line-height: 1.4;
  color: var(--color-text);
  word-break: keep-all;
}

@media (max-width: 767px) {
  .fidelity .aw-about-values__item {
    padding: 0 6px;
  }

  .fidelity .aw-about-values__title {
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .fidelity .aw-about-values__text {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   7. 약속 띠 · OUR BUSINESS (WHY 영역 다음)
      - .aw-about-strengths: 둥근 아이콘 + 제목 + 설명 3칸 (아이보리 박스, 칸 사이 구분선)
      - .aw-about-spaces: 시공 공간 4종 카드 (사진 + 공간명 + 예시) / 태블릿 2칸 · 모바일 1칸
   -------------------------------------------------------------------------- */
.fidelity .aw-about-business {
  padding: clamp(64px, 6vw, 120px) 0 clamp(80px, 7vw, 140px);
}

.fidelity .aw-about-business__inner {
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* 약속 띠 */
.fidelity .aw-about-strengths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: clamp(24px, 2.4vw, 40px) clamp(16px, 2vw, 40px);
  border-radius: 16px;
  background: var(--color-bg-02);
  list-style: none;
}

.fidelity .aw-about-strengths__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.4vw, 24px);
  min-width: 0;
  padding: 4px clamp(12px, 2vw, 40px);
}

.fidelity .aw-about-strengths__item + .aw-about-strengths__item {
  border-left: 1px solid var(--color-border);
}

.fidelity .aw-about-strengths__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(56px, 2vw + 32px, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(var(--color-secondary-rgb) / 0.12);
  color: var(--color-secondary);
  font-size: clamp(26px, 0.8vw + 16px, 32px);
}

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

.fidelity .aw-about-strengths__title {
  display: block;
  font-family: var(--font-base);
  font-size: clamp(17px, 0.3vw + 13px, 20px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.fidelity .aw-about-strengths__desc {
  display: block;
  margin-top: 6px;
  font-family: var(--font-base);
  font-size: clamp(14px, 0.2vw + 12px, 16px);
  line-height: 1.5;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

/* OUR BUSINESS 제목 — 메인 FEATURE 제목 클래스(.aw-strengths__*, common.css 12)를 그대로 사용
   한글 제목이라 Marcellus 대신 Noto Serif KR (fonts.css 6, 자체 호스팅 500) */
.fidelity .aw-about-business__header .aw-strengths__heading {
  font-family: "Noto Serif KR", serif;
  letter-spacing: -0.02em;
}

/* 시공 공간 카드 */
.fidelity .aw-about-spaces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-about-spaces__item {
  min-width: 0;
  text-align: center;
}

.fidelity .aw-about-spaces__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-bg-02);
  /* 사진 설명(.aw-img-caption, common.css 7-1) — 사진 안쪽 하단 우측 */
  --aw-img-caption-x: 16px;
  --aw-img-caption-y: 16px;
}

/* 사진 6장 자동 넘김 (Swiper fade — main.js initBizSwiper) — 사진마다 현장 설명(.aw-img-caption) */
.fidelity .aw-about-spaces__swiper,
.fidelity .aw-about-spaces__swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.fidelity .aw-about-spaces__swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}

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

/* 사진 하단 어둡게 (설명 글자 가독성) — 회사 소개 사진과 같은 그라데이션, 설명(z-index 2)보다 아래
   (Swiper 가 자기 안에서 쌓임 순서를 따로 가지므로 덮개는 사진(슬라이드)마다) */
.fidelity .aw-about-spaces__swiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 40%);
  pointer-events: none;
}

.fidelity .aw-about-spaces__item:hover .aw-about-spaces__media img {
  transform: scale(1.04);
}

/* 넘김 점 — 사진 왼쪽 아래 (설명은 오른쪽 아래) */
.fidelity .aw-about-spaces__swiper .swiper-pagination {
  left: 16px;
  right: auto;
  bottom: 24px;
  z-index: 3;
  width: auto;
  line-height: 0;
  text-align: left;
}

.fidelity .aw-about-spaces__swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 3px;
  background: var(--color-white);
  opacity: 0.5;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.fidelity .aw-about-spaces__swiper .swiper-pagination-bullet-active {
  width: 16px;
  border-radius: 3px;
  background: var(--color-secondary);
  opacity: 1;
}

.fidelity .aw-about-spaces__title {
  display: block;
  margin-top: clamp(14px, 1vw, 20px);
  font-family: var(--font-base);
  font-size: clamp(18px, 0.4vw + 13px, 22px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.fidelity .aw-about-spaces__desc {
  display: block;
  margin-top: 8px;
  font-family: var(--font-base);
  font-size: clamp(14px, 0.2vw + 12px, 16px);
  line-height: 1.5;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

@media (max-width: 1023px) {
  .fidelity .aw-about-strengths {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 8px;
  }

  .fidelity .aw-about-strengths__item {
    justify-content: flex-start;
    padding: 20px 4px;
  }

  .fidelity .aw-about-strengths__item + .aw-about-strengths__item {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .fidelity .aw-about-spaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
}

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

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

/* --------------------------------------------------------------------------
   8. 마무리 문구 띠 (.aw-about-closing) — 어두운 원목 사진 배경
      - 왼쪽 문구 / 오른쪽 테두리 원 아이콘 3개 (칸 사이 구분선)
      - 배경 사진: product_08.jpg (원목 마루 표면) + 진한 갈색 덮개
   -------------------------------------------------------------------------- */
.fidelity .aw-about-closing {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 6vw, 120px) 0;
  background:
    linear-gradient(90deg, rgb(var(--color-primary-rgb) / 0.92) 0%, rgb(var(--color-primary-rgb) / 0.7) 100%),
    url("../images/main/product_08.jpg") center / cover no-repeat,
    var(--color-primary);
  color: var(--color-white);
}

.fidelity .aw-about-closing__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 4vw, 80px);
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 80px);
}

.fidelity .aw-about-closing__copy {
  min-width: 0;
}

.fidelity .aw-about-closing__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-secondary-light);
}

.fidelity .aw-about-closing__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(28px, 1.6vw + 16px, 48px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--color-white);
  word-break: keep-all;
}

.fidelity .aw-about-closing__text {
  margin: 20px 0 0;
  font-family: var(--font-base);
  font-size: clamp(15px, 0.3vw + 12px, 18px);
  line-height: 1.7;
  color: rgb(var(--color-white-rgb) / 0.8);
  word-break: keep-all;
}

.fidelity .aw-about-closing__list {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-about-closing__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 0 clamp(16px, 2vw, 40px);
  text-align: center;
}

.fidelity .aw-about-closing__item + .aw-about-closing__item {
  border-left: 1px solid rgb(var(--color-white-rgb) / 0.25);
}

.fidelity .aw-about-closing__icon {
  display: grid;
  place-items: center;
  width: clamp(64px, 2.4vw + 36px, 88px);
  aspect-ratio: 1;
  border: 1px solid rgb(var(--color-white-rgb) / 0.6);
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(28px, 0.8vw + 18px, 36px);
}

.fidelity .aw-about-closing__item-title {
  display: block;
  margin-top: 16px;
  font-family: var(--font-base);
  font-size: clamp(16px, 0.3vw + 12px, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-white);
}

.fidelity .aw-about-closing__item-text {
  display: block;
  margin-top: 6px;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--color-white-rgb) / 0.7);
  word-break: keep-all;
}

@media (max-width: 1023px) {
  .fidelity .aw-about-closing__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .fidelity .aw-about-closing__list {
    align-self: stretch;
  }

  .fidelity .aw-about-closing__item {
    flex: 1 1 0;
    padding: 0 8px;
  }
}

@media (max-width: 767px) {
  .fidelity .aw-about-closing__icon {
    width: 56px;
    font-size: 24px;
  }

  .fidelity .aw-about-closing__item-title {
    margin-top: 12px;
    font-size: 15px;
  }

  .fidelity .aw-about-closing__item-text {
    font-size: 12px;
  }
}