@charset "utf-8";
/* ==========================================================================
   고객지원 (/support/index.php) — .aw-support
   - 구성 · 움직임은 liet.co.kr/treatments/face-all-in-one 의 01 PROGRAM · 02 BASIC · 05 FAQ 를 에이원우드 색 · 글꼴로
   1. 공통 (섹션 폭 · 번호 · 제목 · 버튼 · 등장 효과)
   2. 01 / SUPPORT 안내 문구
   3. 02 / PROCESS 시공 프로세스 — 메인과 같은 단계 UI(stats-process.css) + 문구가 위 · 단계가 아래 + 등장 효과
   4. 03 / FAQ 자주 묻는 질문 (＋ / − 펼침)
   5. 04 / BLOG 최신 블로그
   6. 태블릿 · 모바일
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 공통
   -------------------------------------------------------------------------- */
/* 화면 폭 100% — 그누보드 본문 영역(#container_wr 최대 1600px · 좌우 여백)을 이 페이지에서만 풂
   (sub-layout.css 에도 같은 규칙 — 브라우저에 예전 sub-layout.css 가 남아 있어도 적용되도록 여기에도) */
.aw-gnu #container_wr:has(.aw-support) {
  width: 100%;
  max-width: none;
  padding: 0;
}

.fidelity.aw-support {
  overflow-x: clip; /* 섹션 배경(::before)을 화면 끝까지 늘려도 가로 스크롤이 생기지 않게 */
  background: var(--color-bg);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text);
}

.fidelity .aw-support__section {
  position: relative;
  isolation: isolate;
  width: min(1600px, 100% - 80px);
  margin: 0 auto;
  padding: clamp(80px, 7vw, 200px) 0;
}

/* 섹션 배경 — 본문 폭과 상관없이 화면 끝까지 */
.fidelity .aw-support__section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 섹션 영문 이름 — about.html OUR BUSINESS 의 .aw-strengths__eyebrow 와 같은 모양 */
.fidelity .aw-support__index {
  display: block;
  margin: 0;
  font-family: Marcellus, serif;
  font-size: clamp(16px, 0.2589vw + 15.0291px, 20px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

.fidelity .aw-support__heading {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(27px, 2.7vw, 40px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.035em;
  color: var(--color-text);
  word-break: keep-all;
}

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

.fidelity .aw-support__lead {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.8;
  color: var(--color-text-secondary);
  white-space: pre-line;
  word-break: keep-all;
}

/* 제목 줄 — 왼쪽 번호 · 제목, 오른쪽 버튼 */
.aw-support__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.fidelity .aw-support__button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

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

.fidelity .aw-support__button.is-light {
  border-color: var(--color-border-dark);
  background: transparent;
  color: var(--color-text);
}

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

.fidelity .aw-support__empty {
  margin: 40px 0 0;
  padding: 48px 0;
  border-top: 1px solid var(--color-border-dark);
  text-align: center;
  color: var(--color-text-secondary);
}

.fidelity .aw-support__more {
  margin: 32px 0 0;
  text-align: center;
}

.aw-support a:focus-visible,
.aw-support summary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 5px;
}

/* 등장 효과 — liet 와 같이 아래 32px 에서 1.2초 (main.js initStoryReveal 이 html 에 .aw-story-ready · 화면에 들면 .is-story-in) */
.aw-story-ready .aw-support [data-story-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--story-delay, 0s),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--story-delay, 0s);
}

.aw-story-ready .aw-support [data-story-reveal].is-story-in {
  opacity: 1;
  transform: none;
}

/* 최신 블로그 카드 — 왼쪽에서 오른쪽으로 차례로 미끄러지며 (support/index.php 가 카드마다 0.15초씩 늦춤) */
.aw-story-ready .aw-support [data-story-reveal="left"] {
  transform: translate3d(-48px, 0, 0);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--story-delay, 0s),
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--story-delay, 0s);
}

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

/* --------------------------------------------------------------------------
   2. 01 / SUPPORT 안내 문구 — 가운데 정렬, 위가 밝은 둥근 그라데이션 배경
   -------------------------------------------------------------------------- */
.fidelity .aw-support-intro {
  text-align: center;
}

.fidelity .aw-support-intro::before {
  background: radial-gradient(ellipse at 50% 0, var(--color-white) 0%, var(--color-bg) 45%, var(--color-bg-02) 100%);
}

.fidelity .aw-support-intro__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 36px 0 0;
}

.fidelity .aw-support-intro__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--color-border-dark);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

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

.fidelity .aw-support-intro__contact a.is-primary {
  border-color: var(--color-accent-dark);
  background: var(--color-accent-dark);
  font-family: var(--font-base);
  color: var(--color-white);
}

.fidelity .aw-support-intro__contact a.is-primary:hover,
.fidelity .aw-support-intro__contact a.is-primary:focus-visible {
  border-color: var(--color-secondary-light);
  background: var(--color-secondary-light);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   3. 02 / PROCESS 시공 프로세스
      - 단계 UI · 순환은 메인과 같음: stats-process.css(.aw-process__*) · main.js initProcessSteps
      - 메인은 스크롤 고정(100svh) 화면이지만 여기서는 일반 섹션 — 높이는 내용만큼, 순서는 번호 → 큰 영문 → 문구 → 단계
      - 배경은 liet '02 / BASIC' 과 같은 어두운 갈색(--color-bg-06)
      - 등장: main.js initProcessReveal → .is-reveal-ready(숨김) → 화면에 들면 .is-revealed
        큰 영문 글자가 아래에서 차례로 → 문구가 올라옴 → 단계 줄이 가운데에서 양옆으로 열림
   -------------------------------------------------------------------------- */
.fidelity .aw-support-process,
.fidelity .aw-support-process .aw-process__stage {
  min-height: 0;
  height: auto;
  background: var(--color-bg-06);
}

.fidelity .aw-support-process .aw-process__stage {
  position: relative;
  overflow: hidden;
}

.fidelity .aw-support-process .aw-process__container {
  justify-content: flex-start;
  min-height: 0;
  height: auto;
  padding-block: clamp(80px, 8vw, 140px);
}

.fidelity .aw-support-process .aw-process__brand {
  margin-top: 0; /* 위에 다른 요소가 없으므로 */
}

.fidelity .aw-support-process .aw-process__copy {
  margin-top: clamp(20px, 1.6vw, 32px);
}

.fidelity .aw-support-process .aw-process__list {
  margin-top: clamp(56px, 5vw, 88px);
}

/* 등장 전 */
.aw-support-process.is-reveal-ready .aw-process__label .char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 115%, 0);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--char-i, 0) * 0.035s),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--char-i, 0) * 0.035s);
}

.aw-support-process.is-reveal-ready .aw-process__copy {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.aw-support-process.is-reveal-ready .aw-process__list {
  clip-path: polygon(50% -12%, 50% -12%, 50% 112%, 50% 112%);
  transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}

/* 화면에 들면 */
.aw-support-process.is-revealed .aw-process__label .char,
.aw-support-process.is-revealed .aw-process__copy {
  opacity: 1;
  transform: none;
}

.aw-support-process.is-revealed .aw-process__list {
  clip-path: polygon(-3% -12%, 103% -12%, 103% 112%, -3% 112%);
}

/* --------------------------------------------------------------------------
   4. 03 / FAQ 자주 묻는 질문 — 줄 구분 목록, 질문을 누르면 답이 펼쳐짐 (오른쪽 ＋ / −)
   -------------------------------------------------------------------------- */
.fidelity .aw-support-faq::before {
  background: var(--color-bg-03);
}

.fidelity .aw-support-faq__list {
  margin-top: 40px !important;
}

.fidelity .aw-support-faq__item:first-child {
  border-top: 1px solid var(--color-border-dark);
}

.fidelity .aw-support-faq__item {
  border-bottom: 1px solid var(--color-border-dark);
}

.fidelity .aw-support-faq__item summary {
  position: relative;
  padding: 24px 48px 24px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
  list-style: none;
  cursor: pointer;
  word-break: keep-all;
  transition: color 0.2s ease;
}

.fidelity .aw-support-faq__item summary::-webkit-details-marker {
  display: none;
}

.fidelity .aw-support-faq__item summary::after {
  content: "+";
  position: absolute;
  top: 22px;
  right: 8px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-text);
}

.fidelity .aw-support-faq__item[open] summary::after {
  content: "\2212"; /* − */
}

.fidelity .aw-support-faq__item summary:hover {
  color: var(--color-secondary);
}

.fidelity .aw-support-faq__answer {
  max-width: 100%;
  padding: 0 48px 26px 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.fidelity .aw-support-faq__answer p {
  margin: 0;
}

.fidelity .aw-support-faq__answer p + p {
  margin-top: 12px;
}

.fidelity .aw-support-faq__answer a {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* 부드럽게 펼침 · 접힘 — main.js initAccordion 이 항목 높이를 애니메이션 ([data-aw-accordion])
   - 움직이는 동안 높이 밖의 답은 가림 / 접히기 시작하면(.is-closing) 아이콘을 바로 ＋ 로 */
.fidelity .aw-support-faq__item[data-aw-accordion] {
  overflow: hidden;
}

.fidelity .aw-support-faq__item.is-closing summary::after {
  content: "+";
}

/* --------------------------------------------------------------------------
   5. 04 / BLOG 최신 블로그 — 사진 카드 5개 (누르면 블로그 글이 새 창으로)
   -------------------------------------------------------------------------- */
.fidelity .aw-support-blog::before {
  background: var(--color-bg-02);
}

.fidelity .aw-support-blog__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.fidelity .aw-support-blog__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
  .fidelity .aw-support-blog__card:hover {
    border-color: var(--color-secondary-light);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgb(var(--color-text-rgb) / 0.08);
  }

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

  .fidelity .aw-support-blog__card:hover .aw-support-blog__title {
    color: var(--color-secondary);
  }
}

.fidelity .aw-support-blog__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-03);
}

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

.fidelity .aw-support-blog__noimg {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--latin);
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
}

/* 날짜 · 제목 + 오른쪽 위 ↗ */
.fidelity .aw-support-blog__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.fidelity .aw-support-blog__body::after {
  content: "\2197"; /* ↗ */
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--color-secondary);
  transition: color 0.25s ease, background-color 0.25s ease;
}

/* 마우스를 올리면 ↗ 원이 나무색으로 채워짐 */
.fidelity .aw-support-blog__card:hover .aw-support-blog__body::after {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

.fidelity .aw-support-blog__date {
  padding-right: 52px;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.fidelity .aw-support-blog__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text);
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color 0.25s ease;
}

/* --------------------------------------------------------------------------
   6. 태블릿 · 모바일
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* 블로그 카드: 가로로 밀어서 보기 */
  .fidelity .aw-support-blog__list {
    grid-template-columns: none;
    grid-auto-columns: minmax(240px, 32%);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .fidelity .aw-support-blog__list > li {
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .fidelity .aw-support__section {
    width: calc(100% - 32px);
    padding: 56px 0;
  }

  .aw-support__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .fidelity .aw-support__lead br {
    display: none;
  }

  .fidelity .aw-support-faq__item summary {
    padding-right: 40px;
    font-size: 17px;
  }

  .fidelity .aw-support-faq__answer {
    padding-right: 0;
    font-size: 15px;
  }

  .fidelity .aw-support-blog__list {
    grid-auto-columns: 78%;
  }

  .fidelity .aw-support-process .aw-process__container {
    padding-block: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fidelity .aw-support-blog__card,
  .fidelity .aw-support-blog__media img {
    transition: none;
  }
}