/**
 * 휴대폰 화면 다듬기 (2026-10-02 모바일 검토)
 *
 * 방문자 대부분이 휴대폰이라, 다른 스타일 뒤에 붙여 좁은 화면만 덮어씁니다.
 * 기준: 기본 글자 18px · 누르는 곳 44px 이상 · 한 화면에 몰지 않기.
 *
 * @package WatchCert
 */

/* --------------------------------------------------------------------------
   첫 화면 — 센터 전화 목록 접기 (hero.php 의 details)
   -------------------------------------------------------------------------- */

.wc-hero__tel > summary {
  list-style: none;
  cursor: pointer;
}

.wc-hero__tel > summary::-webkit-details-marker { display: none; }

.wc-hero__tel-more { display: none; }

@media (max-width: 1023px) {
  .wc-hero__centers { padding: 0; border: 0; background: none; backdrop-filter: none; }

  /* 접힌 상태: 금색 테두리 버튼 하나 */
  .wc-hero__tel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 52px;
    margin: 0;
    padding: 0.7rem 1.1rem;
    border: 2px solid var(--wc-gold-600);
    border-radius: 14px;
    background: rgba(201, 162, 39, 0.1);
    color: var(--wc-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  .wc-hero__tel > summary::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background: var(--wc-gold-300);
    -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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h3l1.5 3.7-2 1.3a12 12 0 0 0 5.4 5.4l1.3-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.5 15.5 0 0 1 4.8 5.5a1.8 1.8 0 0 1 1.8-2Z'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h3l1.5 3.7-2 1.3a12 12 0 0 0 5.4 5.4l1.3-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.5 15.5 0 0 1 4.8 5.5a1.8 1.8 0 0 1 1.8-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .wc-hero__tel > summary > span:first-child { flex: 1; }

  .wc-hero__tel-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--wc-gold-300);
    font-size: 0.9375rem;
  }

  .wc-hero__tel-more::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s var(--wc-ease);
  }

  .wc-hero__tel[open] .wc-hero__tel-more::after { transform: rotate(-135deg); margin-top: 4px; }

  .wc-hero__tel[open] > summary { margin-bottom: 0.75rem; }

  /* 펼친 목록은 두 칸 */
  .wc-hero__tel .wc-telgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-telgrid__item { min-height: 56px; padding: 0.5rem 0.6rem; }
  .wc-telgrid__icon { display: none; }
}

/* --------------------------------------------------------------------------
   첫 화면 — 감정 사례는 옆으로 넘기기 (한 줄에 한 장씩 쌓지 않음)
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .wc-gallery--front {
    display: flex;
    gap: 0.85rem;
    margin-inline: calc(var(--wc-gutter) * -1);
    padding: 0 var(--wc-gutter) 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--wc-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .wc-gallery--front::-webkit-scrollbar { display: none; }

  .wc-gallery--front .wc-gallery__item {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  /* 넘길 수 있다는 안내 */
  #cases .wc-section__head::after {
    content: "← 옆으로 넘겨 보세요 →";
    display: block;
    margin-top: 0.75rem;
    color: var(--wc-gold-300);
    font-size: 0.9375rem;
    font-weight: 600;
  }
}

/* --------------------------------------------------------------------------
   첫 화면 — 센터 안내 겹침 정리
   지도(#map)와 센터 고르기(#centers)가 같은 내용이라, 휴대폰에서는 지도만 둡니다.
   센터 상세는 지도 아래 「전국 감정 센터 보기」 버튼으로 갑니다.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .home #centers { display: none; }
}

/* --------------------------------------------------------------------------
   비교표 — 휴대폰에서는 항목별 카드 (옆으로 밀지 않음)
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .wc-compare {
    overflow: visible;
    border: 0;
    background: none;
  }

  .wc-compare table,
  .wc-compare tbody,
  .wc-compare tr,
  .wc-compare th,
  .wc-compare td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .wc-compare thead { display: none; }

  .wc-compare caption {
    display: block;
    padding: 0 0 1rem;
    border: 0;
  }

  /* 항목 카드 7장을 쌓으면 너무 길어 옆으로 넘깁니다. */
  .wc-compare tbody {
    display: flex;
    gap: 0.85rem;
    margin-inline: calc(var(--wc-gutter) * -1);
    width: auto;
    padding: 0 var(--wc-gutter) 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--wc-gutter);
    scrollbar-width: none;
  }

  .wc-compare tbody::-webkit-scrollbar { display: none; }

  .wc-compare caption::after {
    content: "← 옆으로 넘겨 보세요 →";
    display: block;
    margin-top: 0.5rem;
    color: var(--wc-gold-300);
    font-weight: 600;
  }

  .wc-compare tbody tr {
    flex: 0 0 84%;
    scroll-snap-align: start;
    border: 1px solid var(--wc-line-soft);
    border-radius: var(--wc-radius-lg);
    background: var(--wc-glass);
    overflow: hidden;
  }

  .wc-compare tbody th {
    padding: 0.85rem 1.1rem;
    font-size: 1.06rem;
    color: var(--wc-gold-300);
    border-bottom: 1px solid var(--wc-line-soft);
    white-space: normal;
  }

  .wc-compare td {
    padding: 0.7rem 1.1rem;
    font-size: 1rem;
  }

  .wc-compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    color: var(--wc-text-mute);
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .wc-compare td.is-ours::before { color: var(--wc-gold-300); }

  .wc-compare tbody tr:last-child th { border-bottom: 1px solid var(--wc-line-soft); }
}

/* --------------------------------------------------------------------------
   누르는 곳 44px 이상
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* 아래쪽 메뉴: 글자 링크 → 테두리 버튼 */
  .wc-footer__links { gap: 0.6rem; }

  .wc-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 1rem;
    border: 1px solid var(--wc-line);
    border-radius: 12px;
    background: var(--wc-glass);
    color: var(--wc-text);
    font-size: 0.9375rem;
  }

  /* 경로 표시 */
  .wc-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 센터 고르기 칩 */
  .wc-dir__tab { min-height: 44px; }

  .wc-dir__select select { min-height: 52px; }

  /* 센터 정보의 전화·지도 */
  .wc-nap__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .wc-nap__map {
    padding: 0.4rem 1rem;
    border: 1px solid var(--wc-gold-600);
    border-radius: 12px;
    color: var(--wc-gold-300);
    font-weight: 600;
  }

  /* 단계 점: 보이는 점은 그대로, 누르는 자리만 넓게 */
  .wc-steps__dots { gap: 0; }

  .wc-steps__dot {
    position: relative;
    margin: 0 8px;
  }

  .wc-steps__dot::after {
    content: "";
    position: absolute;
    inset: -18px -8px;
  }
}

/* --------------------------------------------------------------------------
   위 고정 띠 — 내리면 얇게 (본문을 더 넓게)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .wc-header__inner { transition: height 0.25s var(--wc-ease); }

  /* 머리말 안의 메뉴 판도 같은 변수를 쓰므로 함께 맞춰집니다. */
  .wc-header.is-stuck { --wc-header-h: 60px; }

  .wc-header.is-stuck .wc-brand__mark { width: 28px; height: 28px; }

  .wc-header.is-stuck .wc-brand__sub { display: none; }
}

/* --------------------------------------------------------------------------
   센터 상세 — 긴 본문은 접고 「자세히 보기」 (main.js 가 버튼을 붙입니다)
   -------------------------------------------------------------------------- */

.wc-fold.is-folded {
  position: relative;
  max-height: 34rem;
  overflow: hidden;
}

.wc-fold.is-folded::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 7rem;
  background: linear-gradient(180deg, transparent, var(--wc-ink-900));
  pointer-events: none;
}

.wc-fold__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 52px;
  margin-top: 1rem;
  border: 2px solid var(--wc-gold-600);
  border-radius: 14px;
  background: rgba(201, 162, 39, 0.1);
  color: var(--wc-gold-300);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.wc-fold__btn::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.wc-fold__btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }

/* --------------------------------------------------------------------------
   첫 화면 버튼 — 큰 버튼 하나 + 아래 두 칸
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .wc-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .wc-hero__actions .wc-btn {
    justify-content: center;
    min-height: 52px;
    padding-inline: 0.75rem;
  }

  .wc-hero__actions .wc-btn--gold { grid-column: 1 / -1; }
}

/* 첫 화면 아래 빈자리 줄이기 */
@media (max-width: 760px) {
  .wc-hero { min-height: 0; padding-bottom: 2.5rem; }
  .wc-hero__scroll { display: none; }
}

@media (max-width: 900px) {
  /* 아래쪽 법적 고지의 메일·전화 링크 */
  .wc-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* 메뉴 열기 버튼 */
.wc-navtoggle { min-width: 44px; min-height: 44px; }

/* 전화 예약(/phone/) — 번호와 길찾기·센터 소개를 버튼 크기로 */
.wc-tel__card .wc-tel__num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 2px solid var(--wc-gold-600);
  border-radius: 14px;
  background: rgba(201, 162, 39, 0.1);
}

.wc-tel__card .wc-tel__links { gap: 0.5rem; }

.wc-tel__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--wc-line);
  border-radius: 12px;
  background: var(--wc-glass);
}

/* --------------------------------------------------------------------------
   센터 지도 — 휴대폰에서는 지도 아래 센터 버튼 목록 (inc/pages.php)
   -------------------------------------------------------------------------- */

.wc-maps__list { display: none; }

@media (max-width: 760px) {
  .wc-maps__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
  }

  .wc-maps__list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--wc-line);
    border-radius: 12px;
    background: var(--wc-glass);
    color: var(--wc-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
  }

  .wc-maps__list a::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wc-gold-400);
  }
}

/* --------------------------------------------------------------------------
   전국 센터(/centers/) — 카드 사진을 낮게, 같은 내용의 「센터별로 자세히 보기」는 휴대폰에서 생략
   (센터 카드를 누르면 그 센터 화면에 같은 내용이 다 있습니다)
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .wc-ctr__media { aspect-ratio: 16 / 7; }

  .post-type-archive-wc_center .wc-section--alt:has(.wc-dir) { display: none; }
}

/* 문의(/contact/) 전화·메일 링크 */
.wc-contact__value a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 넓은 화면에서는 전화 목록 제목을 눌러도 접히지 않게 */
@media (min-width: 1024px) {
  .wc-hero__tel > summary { pointer-events: none; }
}