/* === _shared/common (eyebrow · icon-badge · card 보정) === */
/* library/sections/_shared/common.css
   섹션 전역 공통 패턴 — 아이브로우 라벨 · 아이콘 유틸 · 카드 그림자/라운드 보정.
   builder.js 가 카탈로그 선택과 무관하게 항상 sections.css 맨 앞에 병합한다(각 섹션 CSS에서 재정의 금지).
   토큰(var(--mood-*))만 참조 — 새 색상 상수를 만들지 않는다. */

/* === 아이브로우 라벨 — 섹션 제목 위 작은 구분 라벨. 스캔성 향상(CLAUDE.md UX 개선 D) === */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--mood-body-ff);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mood-primary);
}

.eyebrow::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--mood-accent);
    flex-shrink: 0;
}

/* 헤딩 중앙정렬 섹션에서 아이브로우도 가운데로 */
.eyebrow--center {
    justify-content: center;
    width: 100%;
}

/* primary 배경 위에 얹는 아이브로우 — 기본색이 --mood-primary 라 같은 색끼리 겹쳐 글자가 사라진다
   (2026-09-10 S03 story-intro 에서 선만 보이고 라벨이 안 보이던 건). */
.eyebrow--on-primary {
    color: var(--mood-on-primary, #fff);
    opacity: 0.75;
}

.eyebrow--on-primary::before {
    background-color: var(--mood-on-primary, #fff);
    opacity: 0.6;
}

/* === 아이콘 유틸 — sprite.svg <symbol> 참조용 <use> 래퍼. 색은 부모 color 상속(currentColor) === */
.icon {
    display: inline-block;
    flex-shrink: 0;
    color: inherit;
}

/* 원형 배지 — 카드 상단 아이콘의 공통 컨테이너. 여러 섹션(S05·S06·S07·S13·S19)이 공유해 중복 정의를 막는다 */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--mood-primary);
    background-color: color-mix(in srgb, var(--mood-primary) 10%, transparent);
    flex-shrink: 0;
}

.icon-badge .icon {
    width: 24px;
    height: 24px;
}

.icon-badge--accent {
    color: var(--mood-accent);
    background-color: color-mix(in srgb, var(--mood-accent) 12%, transparent);
}

/* === 섹션 경계 보정 — bg/bg-alt 두 톤만으로 구획이 흐릿할 때 얇은 헤어라인 추가(opt-in) ===
   새 색 없이 기존 --mood-text 를 투명도만 낮춰 사용(5무드 전부 성립) */
.section-edge {
    border-top: 1px solid color-mix(in srgb, var(--mood-text) 8%, transparent);
}

/* === 카드 공통 — base.css `.card`(그림자+hover) 위에 섹션이 패딩만 얹도록 유도.
   개별 섹션 CSS에서 border/box-shadow/hover transform 을 반복 선언하지 않는다 === */
.gd-card-pad {
    padding: clamp(24px, 3.5vw, 36px);
}

/* === 줄바꿈 품질 (2026-09-10) =========================================
   섹션 제목·부제에 좁은 max-width 가 걸려 있어 "…원장이 진료합니다." 처럼
   마지막 줄에 한두 단어만 떨어지는 어색한 줄바꿈이 잦았다.
   text-wrap 으로 줄 길이를 고르게 분배한다 — 미지원 브라우저는 무시하므로 안전하다. */
h1, h2, h3, h4,
.eyebrow {
    text-wrap: balance;
}

p,
li,
dd,
figcaption {
    text-wrap: pretty;
}

/* === snap-slider — 스냅 슬라이더 공용 (motion/slider.js). 사용처: S06-b · S07-c ===
   마크업: .snap-slider[data-slider] > button.snap-slider__nav--prev · ul.snap-slider__track > li.snap-slider__slide · button.snap-slider__nav--next
   조절 변수: --slider-gap(간격) · --slider-per(화면당 장수 — 기본 <640 1.25 · ≥640 2 · ≥1024 3 · ≥1280 4) · --slider-media-ratio(카드 상단 이미지 세로/가로 — 버튼 세로 중앙 계산용) */
.snap-slider {
    position: relative;
    --slider-gap: 20px;
    --slider-per: 1.25;
    --slider-media-ratio: calc(195 / 345);
}

.snap-slider__track {
    display: flex;
    gap: var(--slider-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px;
}

.snap-slider__track::-webkit-scrollbar {
    display: none;
}

.snap-slider__track:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
    .snap-slider__track {
        cursor: grab;
    }
}

/* 마우스로 끄는 동안에는 스냅을 풀어야 손을 따라온다 (slider.js) */
.snap-slider__track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

.snap-slider__slide {
    flex: 0 0 calc((100% - var(--slider-gap) * (var(--slider-per) - 1)) / var(--slider-per));
    min-width: 0;
    scroll-snap-align: start;
}

.snap-slider__track img,
.snap-slider__track a {
    -webkit-user-drag: none;
}

.snap-slider__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    color: var(--mood-primary);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.snap-slider__nav img,
.snap-slider__nav .icon {
    width: 16px;
    height: 16px;
}

.snap-slider__nav-flip {
    transform: scaleX(-1);
}

.snap-slider__nav:hover {
    transform: scale(1.05);
}

.snap-slider__nav:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.snap-slider__nav[disabled] {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

@media (max-width: 1023px) {
    /* 좁은 화면 — 버튼을 슬라이더 아래 가운데로. DOM 순서(이전 → 목록 → 다음)는 유지하고 grid 로만 재배치 */
    .snap-slider {
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        column-gap: 12px;
        row-gap: 24px;
    }

    .snap-slider__track {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .snap-slider__nav--prev {
        grid-column: 2;
        grid-row: 2;
    }

    .snap-slider__nav--next {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (min-width: 640px) {
    .snap-slider {
        --slider-per: 2;
    }
}

@media (min-width: 1024px) {
    .snap-slider {
        --slider-per: 3;
        container-type: inline-size;
    }

    .snap-slider__nav {
        position: absolute;
        z-index: 2;
        /* 카드 상단 이미지의 세로 중앙 — 카드 너비에서 역산. top 의 % 는 높이 기준이라 슬라이더 너비(cqw)로 계산한다 */
        top: 97px;
        top: calc(((100cqw - var(--slider-gap) * (var(--slider-per) - 1)) / var(--slider-per)) * var(--slider-media-ratio) / 2);
        width: clamp(56px, 3.75vw, 72px);
        height: clamp(56px, 3.75vw, 72px);
        margin-top: calc(clamp(56px, 3.75vw, 72px) / -2);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .snap-slider__nav img,
    .snap-slider__nav .icon {
        /* 시안 72 원 안 24 화살표 — 원이 줄면 같은 비율로 */
        width: clamp(18px, 1.25vw, 24px);
        height: clamp(18px, 1.25vw, 24px);
    }

    .snap-slider__nav--prev {
        left: calc(clamp(56px, 3.75vw, 72px) / -2);
    }

    .snap-slider__nav--next {
        right: calc(clamp(56px, 3.75vw, 72px) / -2);
    }
}

@media (min-width: 1280px) {
    .snap-slider {
        --slider-per: 4;
    }
}

/* === loop-slider — 무한 순환 슬라이더 공용 (motion/loop-slider.js). 사용처: S13-b ===
   화면 폭 전체를 쓰고(컨테이너 밖), 가운데 '창'에 --ls-per 장이 활성. 창 밖 이웃은 흐림: 이미지 #000 40% · 글자 30%.
   조절 변수: --ls-w(카드 너비) · --ls-gap(간격) · --ls-per(활성 장수 — 기본 <768 1 · ≥768 2 · ≥1280 3)
   네비 버튼 모양은 .snap-slider__nav 를 같이 붙여 재사용하고, 위치만 여기서(창의 바깥 가장자리에 중심) 잡는다. */
.loop-slider {
    position: relative;
    --ls-w: min(345px, 78vw);
    --ls-gap: 20px;
    --ls-per: 1;
    --ls-media-ratio: calc(195 / 345);
    --ls-window: calc(var(--ls-w) * var(--ls-per) + var(--ls-gap) * (var(--ls-per) - 1));
}

.loop-slider__track {
    display: flex;
    gap: var(--ls-gap);
    margin: 0;
    padding: 0 16px;
    list-style: none;
    /* JS 전/없음: 가로 스크롤로 전부 읽힌다 */
    overflow-x: auto;
    scrollbar-width: none;
}

.loop-slider__track::-webkit-scrollbar {
    display: none;
}

.loop-slider.is-ready {
    overflow: hidden;
}

.loop-slider.is-ready .loop-slider__track {
    /* 너비는 부모 그대로 — 카드는 줄지 않고(flex 0 0) 밖으로 넘쳐 보인다. max-content 로 두면 <1024 의 grid 가 트랙 너비만큼 부풀어 중앙 계산이 깨진다 */
    min-width: 0;
    padding: 0;
    overflow: visible;
    touch-action: pan-y;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .loop-slider.is-ready .loop-slider__track {
        cursor: grab;
    }
}

.loop-slider.is-dragging .loop-slider__track {
    transition: none;
    cursor: grabbing;
    user-select: none;
}

.loop-slider__slide {
    flex: 0 0 var(--ls-w);
    width: var(--ls-w);
    min-width: 0;
    align-self: flex-start;                  /* 카드 길이가 달라도 위를 맞추고 아래는 비워 둔다(늘리지 않음) */
}

.loop-slider__track img,
.loop-slider__track a {
    -webkit-user-drag: none;
}

/* 흐림 — 창 밖 이웃 */
.loop-slider__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.loop-slider__text {
    transition: opacity 0.4s;
}

.loop-slider.is-ready .loop-slider__slide:not(.is-active) {
    pointer-events: none;
}

.loop-slider.is-ready .loop-slider__slide:not(.is-active) .loop-slider__media::after {
    opacity: 0.4;
}

.loop-slider.is-ready .loop-slider__slide:not(.is-active) .loop-slider__text {
    opacity: 0.3;
}

/* 끝에서 원본 구간으로 되돌릴 때는 모든 전환을 끈다(번쩍임 방지) */
.loop-slider.is-jumping .loop-slider__track,
.loop-slider.is-jumping .loop-slider__media::after,
.loop-slider.is-jumping .loop-slider__text {
    transition: none !important;
}

.loop-slider:not(.is-ready) .loop-slider__nav {
    display: none;
}

@media (max-width: 1023px) {
    /* 좁은 화면 — 버튼은 슬라이더 아래 가운데 */
    .loop-slider.is-ready {
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        column-gap: 12px;
        row-gap: 24px;
    }

    .loop-slider.is-ready .loop-slider__track {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .loop-slider__nav--prev {
        grid-column: 2;
        grid-row: 2;
    }

    .loop-slider__nav--next {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (min-width: 768px) {
    .loop-slider {
        --ls-w: 345px;
        --ls-gap: 40px;
        --ls-per: 2;
    }
}

@media (min-width: 1024px) {
    .loop-slider__nav {
        position: absolute;
        z-index: 2;
        top: calc(var(--ls-w) * var(--ls-media-ratio) / 2);
        margin-top: calc(clamp(56px, 3.75vw, 72px) / -2);
    }

    .loop-slider__nav--prev {
        left: calc(50% - var(--ls-window) / 2 - clamp(56px, 3.75vw, 72px) / 2);
        right: auto;
    }

    .loop-slider__nav--next {
        left: auto;
        right: calc(50% - var(--ls-window) / 2 - clamp(56px, 3.75vw, 72px) / 2);
    }
}

@media (min-width: 1280px) {
    .loop-slider {
        --ls-gap: clamp(40px, 4.17vw, 80px);
        --ls-per: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loop-slider.is-ready .loop-slider__track {
        transition: none;
    }
}


/* === S02 hero-d === */
/* hero-d — 아치 히어로 (돌다리 피그마 132:222 역수확).
   기준 프레임 1920×900: 카피 블록은 세로 중앙에서 150px 위, 아치(900×400, 상단 반경 500)는 바닥 중앙, 워드마크는 바닥 20% 불투명.
   색은 토큰만(§15). 크림 강조색은 --mood-accent-soft(거래처 token_overrides) → 없으면 accent 를 흰색과 섞어 만든다. */
.section-hero--arch {
    --hero-soft: var(--mood-accent-soft, color-mix(in srgb, var(--mood-accent) 40%, #fff));
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: clamp(620px, 46.875vw, 900px);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background-color: color-mix(in srgb, var(--mood-primary) 55%, #000);
    color: var(--mood-on-overlay, #fff);
}

.section-hero--arch .section-hero__bg,
.section-hero--arch .section-hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.section-hero--arch .section-hero__bg-img {
    object-fit: cover;
    object-position: center bottom;
}

.section-hero--arch .section-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 0.52vw, 10px);              /* 피그마: 배지→제목 10 · 제목→부제 10 (부제→버튼 40 은 cta margin-top) */
    /* 오버레이 헤더(92px) 아래에서 시작 — 1920 기준 카피 블록 상단 175px */
    padding-top: clamp(112px, 9.11vw, 175px);
    text-align: center;
}

.section-hero--arch .section-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-hero--arch .section-hero__badge-mark {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.section-hero--arch .section-hero__title {
    margin: 0;
    font-family: var(--mood-heading-ff);
    font-weight: 600;
    font-size: clamp(2rem, 2.92vw, 3.5rem);      /* 32 → 56px */
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-hero--arch .section-hero__em {
    font-style: normal;
    letter-spacing: -0.054em;
    background: linear-gradient(180deg, var(--hero-soft) 12.66%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--hero-soft);                       /* background-clip 미지원 폴백 */
}

.section-hero--arch .section-hero__subtitle {
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-hero--arch .section-hero__subtitle strong {
    font-weight: 600;
    color: var(--hero-soft);
}

.section-hero--arch .section-hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1.05vw, 20px);
    margin-top: clamp(14px, 1.56vw, 30px);
}

.section-hero--arch .section-hero__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 40px;
    background-color: color-mix(in srgb, var(--mood-text) 94%, #000);
    color: #fff;
    font-size: clamp(1rem, 1.05vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.036em;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
}

.section-hero--arch .section-hero__pill:hover,
.section-hero--arch .section-hero__pill:focus-visible {
    background-color: var(--mood-primary);
}

.section-hero--arch .section-hero__pill:active {
    transform: scale(0.97);
}

.section-hero--arch .section-hero__pill-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.section-hero--arch .section-hero__pill:hover .section-hero__pill-arrow {
    transform: translateX(3px);
}

/* 아치 — 바닥 중앙. 1920 에서 900×400, 상단 반경이 폭의 절반 이상이라 완전한 반원 아치가 된다 */
.section-hero--arch .section-hero__arch {
    width: min(900px, 46.875vw);
    height: min(400px, 20.83vw);
    margin-top: auto;
    border-radius: 500px 500px 0 0;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 0;
}

.section-hero--arch .section-hero__arch picture,
.section-hero--arch .section-hero__arch-img {
    display: block;
    width: 100%;
    height: 100%;
}

.section-hero--arch .section-hero__arch-img {
    object-fit: cover;
    object-position: center bottom;
}

.section-hero--arch .section-hero__wordmark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 0;
    overflow: hidden;                        /* marquee.js 가 flex·nowrap 을 얹는다 */
    white-space: nowrap;
    font-size: clamp(1.5rem, 3.125vw, 3.75rem);   /* 1920 → 60px (시안) */
    letter-spacing: 0.2em;                   /* 시안 12px/60px */
    line-height: 1;
    color: #fff;
    opacity: 0.2;
    pointer-events: none;
    user-select: none;
}

.section-hero--arch .section-hero__wordmark-track {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    font: inherit;                           /* 기본 p 규칙(17px)이 상속을 끊는다 — 부모(60px·자간)를 그대로 */
    letter-spacing: inherit;
    line-height: 1;
}

.section-hero--arch .section-hero__wordmark-dot {
    margin: 0 0.6em;
}

@media (max-width: 767px) {
    .section-hero--arch {
        min-height: 0;
    }

    .section-hero--arch .section-hero__inner {
        padding-top: 104px;
        gap: 8px;
    }

    .section-hero--arch .section-hero__arch {
        width: min(86vw, 420px);
        height: min(44vw, 215px);
        margin-top: 36px;
    }

    .section-hero--arch .section-hero__pill{
        font-size: clamp(0.8rem, 1.05vw, 1.25rem);
        padding: 10px 12px; gap: 5px;  
    }
    .section-hero--arch .section-hero__pill-arrow{
        width: 13px; height: 13px;
    }
}

/* ── split 변형 (sections.S02.layout: split — 하늘수 피그마 1:179): 1920 기준 카피 블록 x=200 w=738 세로 중앙, 사진 카드 x=1213 y=194 466×610 r30, 워드마크 바닥 ── */
.section-hero--split {
    background-color: color-mix(in srgb, var(--mood-text) 70%, #000);
}
.section-hero--split::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.45);   /* 사진 위 검정 덮개 — 흰 글자 대비 */
    pointer-events: none;
}
.section-hero--split .section-hero__bg-img { object-position: center; }
.section-hero--split .section-hero__inner {
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 1520px;
    padding-top: clamp(112px, 11vw, 200px);
    padding-bottom: clamp(24px, 3vw, 56px);
}
.section-hero--split .section-hero__title { text-align: left; }
.section-hero--split .section-hero__subtitle { text-align: left; max-width: 46em; }
.section-hero--split .section-hero__cta { justify-content: flex-start; }
/* 두 버튼 모두 primary 채움(시안) */
.section-hero--split .section-hero__pill,
.section-hero--split .section-hero__pill + .section-hero__pill {
    background-color: var(--mood-accent, var(--mood-primary));
    color: #fff;
    border-color: transparent;
}
.section-hero--split .section-hero__arch {
    width: min(92vw, 466px);
    aspect-ratio: 466 / 610;
    height: auto;
    margin: clamp(24px, 3vw, 40px) auto 0;
    border-radius: 30px;
}
.section-hero--split .section-hero__arch-img { object-position: center; }
@media (min-width: 1024px) {
    .section-hero--split .section-hero__inner {
        padding-right: min(34vw, 560px);      /* 오른쪽 카드 자리(466 + 간격) */
        min-height: clamp(620px, 46.875vw, 900px);
        justify-content: center;
        padding-top: clamp(112px, 9.11vw, 175px);
    }
    .section-hero--split .section-hero__arch {
        position: absolute;
        top: 21.5%;                          /* 194 / 900 */
        right: max(24px, calc((100% - 1520px) / 2 + 40px));
        width: min(24.27vw, 466px);          /* 466 / 1920 */
        margin: 0;
        z-index: 1;
    }
}
@media (max-width: 1023px) {
    .section-hero--split .section-hero__arch { position: relative; }
}


/* === S03 S03-b === */
/* S03-b — 숫자 칩 밴드 (돌다리 피그마 133:407 역수확).
   기준 1920: 프레임 높이 ≈637, 아이브로우 16 · 제목 56 · 리드 18(수치 구간 크림 굵게) · 칩(흰 바탕, 반경 10, 값 60 primary) · 칩 간격 40 · 라벨 18 + 아이콘 24.
   색은 토큰만(§15): 크림 = --mood-accent-soft(거래처 token_overrides) → 없으면 on-primary. */
.section-numbers--chips {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(72px, 7.6vw, 146px) 0;
    background-color: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
    text-align: center;
}

/* 질감 — 피그마의 mix-blend-overlay 레이어. primary 위에 빛줄기·종이결만 얹는다 */
.section-numbers--chips .section-numbers__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.section-numbers--chips .section-numbers__inner {
    /* 칩 4개(1920 에서 합계 ≈1200px)가 한 줄에 들어가도록 본문 컨테이너(1200)보다 넓게 쓴다 */
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 0.52vw, 10px);
}

.section-numbers--chips .section-numbers__eyebrow {
    margin: 0;
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-numbers--chips .section-numbers__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);     /* 28 → 56px */
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-numbers--chips .section-numbers__subtitle {
    max-width: none;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-numbers--chips .section-numbers__subtitle strong {
    font-weight: 700;
    color: var(--mood-accent-soft, var(--mood-on-primary, #fff));
}

.section-numbers--chips .section-numbers__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(16px, 2.08vw, 40px);
    margin: clamp(24px, 2.24vw, 43px) 0 0;
}

.section-numbers--chips .section-numbers__chip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.section-numbers--chips .section-numbers__chip {
    margin: 0;
    padding: 8px 20px;
    border-radius: 10px;
    background-color: var(--mood-bg, #fff);
    background-color: #fff;
    color: var(--mood-primary);
    font-family: var(--mood-heading-ff);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.125vw, 3.75rem);   /* 28 → 60px */
    line-height: 1.4;
    letter-spacing: -0.03em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;      /* 숫자 글리프 등폭 — 카운트 중 자릿수 바뀌어도 폭 유지 */
    position: relative;
    display: inline-grid;                    /* ghost 와 value 를 같은 칸에 겹친다 → 박스 폭 = 최종값 폭 */
}

.section-numbers--chips .section-numbers__chip-ghost,
.section-numbers--chips .section-numbers__chip-value {
    grid-area: 1 / 1;
    text-align: center;
}

.section-numbers--chips .section-numbers__chip-ghost {
    visibility: hidden;
}

.section-numbers--chips .section-numbers__chip-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-numbers--chips .section-numbers__chip-label img,
.section-numbers--chips .section-numbers__chip-label .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .section-numbers--chips .section-numbers__chips {
        gap: 20px 12px;
    }

    .section-numbers--chips .section-numbers__chip {
        padding: 6px 14px;
        font-size: clamp(1.5rem, 7vw, 1.875rem);
    }
}

/* 배경 사진(brand.backgrounds.numbers) + 워터마크 — 하늘수 피그마 1:1661 */
.section-numbers--chips.section-numbers--photo { position: relative; isolation: isolate; overflow: hidden; }
.section-numbers--chips .section-numbers__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.section-numbers--chips .section-numbers__watermark {
    position: absolute;
    right: clamp(-40px, -2vw, 0px);
    bottom: -18%;
    z-index: -1;
    width: clamp(220px, 29.8vw, 573px);
    height: auto;
    opacity: 0.35;
    pointer-events: none;
}


/* === S05 philosophy-c === */
/* philosophy-c — 페이저 핀 (돌다리 피그마 135:529 역수확).
   기준 1920×900: 좌측 열 x=247 w=460(제목 56·리드 18·페이저 버튼 h60 r20 간격 20·CTA 흰 버튼), 우측 열 w=710(이미지 710×195 r20 · 제목 24 · 본문 16 · 패널 간격 60), 상단 172.
   배경: 거의 검정에 가까운 질감(합성 이미지) 위로 아래쪽이 primary 로 물드는 그라데이션(29%→113%).
   색은 토큰만(§15). 번호(01…)는 CSS counter. */
.section-philosophy--paged {
    position: relative;
    isolation: isolate;
    padding: clamp(88px, 8.96vw, 172px) 0 clamp(80px, 6.25vw, 120px);
    background-color: color-mix(in srgb, var(--mood-primary) 12%, #000);
    color: var(--mood-on-overlay, #fff);
    counter-reset: phil-pager phil-panel;
}

.section-philosophy--paged .section-philosophy__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
}

/* 아래로 갈수록 primary — 피그마: transparent 29.1% → primary 113.6% */
.section-philosophy--paged::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 29.1%, var(--mood-primary) 113.6%);
    pointer-events: none;
}

.section-philosophy--paged .section-philosophy__grid {
    max-width: 1513px;                       /* 1920 기준 좌 247 · 우 240 여백 (+컨테이너 패딩) */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
}

.section-philosophy--paged .section-philosophy__fixed {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.08vw, 40px);
}

.section-philosophy--paged .section-philosophy__eyebrow {
    margin: 0 0 calc(-1 * clamp(14px, 1.56vw, 30px));
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-philosophy--paged .section-philosophy__heading {
    margin: 0 0 calc(-1 * clamp(14px, 1.56vw, 30px));
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-philosophy--paged .section-philosophy__intro {
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

/* 페이저 — 번호 + 제목, 활성 = primary 단색 / 비활성 = primary 50% */
.section-philosophy--paged .section-philosophy__pager {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.04vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-philosophy--paged .section-philosophy__pager li {
    counter-increment: phil-pager;
}

.section-philosophy--paged .section-philosophy__pager-btn {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 10px 10px 10px 20px;
    border-radius: 20px;
    background-color: color-mix(in srgb, var(--mood-primary) 50%, transparent);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.045em;
    text-decoration: none;
    transition: background-color 0.3s var(--motion-ease, ease);
}

.section-philosophy--paged .section-philosophy__pager-btn::before {
    content: counter(phil-pager, decimal-leading-zero);
    margin-right: 0.35em;
    font-weight: 700;
}

.section-philosophy--paged .section-philosophy__pager-btn:hover,
.section-philosophy--paged .section-philosophy__pager-btn:focus-visible {
    background-color: color-mix(in srgb, var(--mood-primary) 75%, transparent);
}

.section-philosophy--paged .section-philosophy__pager-btn.is-active {
    background-color: var(--mood-primary);
}

.section-philosophy--paged .section-philosophy__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 10px 17px 10px 20px;
    border-radius: 20px;
    background-color: #fff;
    color: var(--mood-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.045em;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.2s;
}

.section-philosophy--paged .section-philosophy__cta img,
.section-philosophy--paged .section-philosophy__cta .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.section-philosophy--paged .section-philosophy__cta:hover img,
.section-philosophy--paged .section-philosophy__cta:hover .icon {
    transform: translateX(3px);
}

/* 패널 */
.section-philosophy--paged .section-philosophy__panels {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 3.125vw, 60px);
}

.section-philosophy--paged .section-philosophy__panel {
    display: flex;
    flex-direction: column;
    counter-increment: phil-panel;
    scroll-margin-top: calc(var(--header-h, 64px) + 40px);
}

.section-philosophy--paged .section-philosophy__panel-media {
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 710 / 195;
    background-color: color-mix(in srgb, var(--mood-primary) 35%, #000);
}

.section-philosophy--paged .section-philosophy__panel-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-philosophy--paged .section-philosophy__panel-title {
    margin: 0;
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-philosophy--paged .section-philosophy__panel-title::before {
    content: counter(phil-panel, decimal-leading-zero) ' ';
}

.section-philosophy--paged .section-philosophy__panel-body {
    margin: 0;
    font-size: clamp(0.9375rem, 0.83vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

@media (max-width: 1023px) {
    /* 좁은 화면 — 한 열로 쌓이면 페이저는 패널 번호와 중복이고 스크롤 연동 의미도 없어 숨긴다. 순서: 제목·리드 → CTA → 패널 */
    .section-philosophy--paged .section-philosophy__pager {
        display: none;
    }
}

@media (min-width: 1024px) {
    .section-philosophy--paged .section-philosophy__grid {
        grid-template-columns: minmax(0, 460px) minmax(0, 710px);
        justify-content: space-between;
        align-items: start;
        gap: clamp(40px, 6vw, 120px);
    }

    .section-philosophy--paged .section-philosophy__fixed {
        position: sticky;
        top: calc(var(--header-h, 64px) + 40px);
    }
}

/* ── light 톤 (sections.S05.tone: light — 하늘수 피그마 88:345): 따뜻한 회색 사진 배경 + 어두운 글자, 비활성 페이저 크림(accent-soft), 활성 primary ── */
.section-philosophy--paged.section-philosophy--light {
    background-color: var(--mood-bg-alt);
    color: var(--mood-text);
}
.section-philosophy--paged.section-philosophy--light::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
}
.section-philosophy--paged.section-philosophy--light .section-philosophy__bg { object-position: center; }
.section-philosophy--paged.section-philosophy--light .section-philosophy__pager-btn {
    background-color: var(--mood-accent-soft, color-mix(in srgb, var(--mood-accent) 18%, #fff));
    color: var(--mood-text-muted);
}
.section-philosophy--paged.section-philosophy--light .section-philosophy__pager-btn:hover,
.section-philosophy--paged.section-philosophy--light .section-philosophy__pager-btn:focus-visible {
    background-color: color-mix(in srgb, var(--mood-accent, var(--mood-primary)) 55%, #fff);
    color: #fff;
}
.section-philosophy--paged.section-philosophy--light .section-philosophy__pager-btn.is-active {
    background-color: var(--mood-accent, var(--mood-primary));
    color: #fff;
}
.section-philosophy--paged.section-philosophy--light .section-philosophy__cta {
    color: var(--mood-accent, var(--mood-primary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.section-philosophy--paged.section-philosophy--light .section-philosophy__panel-media {
    background-color: color-mix(in srgb, var(--mood-text) 12%, #fff);
}


/* === S06 S06-b === */
/* S06-b — 장비 슬라이더 (돌다리 피그마 137:654 역수확).
   기준 1920×900: 제목 블록 가운데(아이브로 16 · 제목 56 · 리드 18, 간격 10) 상단 175, 슬라이더 w=1440(카드 345 × 4 + 간격 20) top=377,
   카드 = 이미지 345×195 r20 → 32 → 제목 24 bold → 본문 16 medium (lh 1.8), 네비 버튼 72 흰 원 — 슬라이더 좌우 가장자리에 중심, 이미지 세로 중앙.
   배경: primary 위 질감(overlay)+공간 사진 20% 합성 이미지. 색은 토큰만(§15). */
.section-equipment--slider {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 9.11vw, 175px) 0 clamp(80px, 10.16vw, 195px);   /* 1920 에서 섹션 높이 900 */
    background-color: var(--mood-primary);
    color: var(--mood-on-overlay, #fff);
    overflow: hidden;
}

.section-equipment--slider .section-equipment__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.section-equipment--slider .section-equipment__inner {
    /* 슬라이더 1440 + 컨테이너 좌우 패딩(최대 40×2) — 본문 컨테이너(1200)보다 넓게 */
    max-width: 1520px;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 2.24vw, 43px);
}

.section-equipment--slider .section-equipment__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    text-align: center;
}

.section-equipment--slider .section-equipment__eyebrow {
    margin: 0;
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-equipment--slider .section-equipment__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
}

.section-equipment--slider .section-equipment__subtitle {
    max-width: none;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
    word-break: keep-all;
}

/* 슬라이더 골격·네비 버튼은 _shared/common.css 의 .snap-slider */
.section-equipment--slider .section-equipment__media {
    margin-bottom: clamp(20px, 1.67vw, 32px);
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 345 / 195;
}

.section-equipment--slider .section-equipment__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 사진 준비 전 — 시안의 회색 상자(#D9D9D9 상당). 실사처럼 보이는 대체 이미지는 쓰지 않는다(§1-6) */
.section-equipment--slider .section-equipment__media--empty {
    background-color: color-mix(in srgb, var(--mood-on-overlay, #fff) 85%, #000);
}

.section-equipment--slider .section-equipment__name {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

/* 긴 괄호 부연은 한 단계 작게 — 시안: 24 → 18 */
.section-equipment--slider .section-equipment__name small {
    font-size: 0.75em;
    font-weight: inherit;
}

.section-equipment--slider .section-equipment__desc {
    margin: 0;
    padding: 0;
    font-size: clamp(0.9375rem, 0.83vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

/* ── product 변형 (sections.S06.style: product — 하늘수 피그마 1:2228): 카드 2장(490×195 흰 캔버스, 제품 컷 contain) 가운데, 제목 가운데 ── */
.section-equipment--slider .section-equipment__slider--product .section-equipment__media {
    aspect-ratio: 490 / 195;
    background-color: #fff;
}
.section-equipment--slider .section-equipment__slider--product .section-equipment__media img { object-fit: contain; padding: 6px; }
.section-equipment--slider .section-equipment__slider--product .section-equipment__name,
.section-equipment--slider .section-equipment__slider--product .section-equipment__desc { text-align: center; }
.section-equipment--slider .section-equipment__slider--product .section-equipment__slide { padding: 0 clamp(0px, 1vw, 18px); }
@media (min-width: 1024px) {
    .snap-slider--two { --slider-per: 2; }
    .section-equipment--slider .section-equipment__slider--product { width: 100%; max-width: 1040px; margin: 0 auto; }   /* width 100% 없이는 flex 열에서 폭 0 */
}

/* product 변형에서 슬라이드가 2장 이하면 네비 불필요 */
.snap-slider--two:has(.snap-slider__slide:nth-child(2):last-child) .snap-slider__nav,
.snap-slider--two:has(.snap-slider__slide:only-child) .snap-slider__nav { display: none; }


/* === S07 S07-c === */
/* S07-c — 고민 매칭 슬라이더 (돌다리 피그마 140:789 상단 · 60:3921 역수확).
   기준 1920: 상단 172, 제목 블록 가운데(아이브로 16 · 제목 56 · 리드 18, 간격 10) → 40 → 슬라이더 w=1440(카드 345 × 4 + 간격 20).
   카드 = 이미지 345×195 r20(검정 40% 덮개 + 고민 문장 24 bold 가운데) → 20 → 알약 링크 h48 r40 primary → 20 → 설명 16 medium lh1.8.
   배경: 어두운 단색(#313131 상당) + 천 질감 40% 합성 이미지 — S08-b 와 이어진다(이 섹션은 위쪽 절반, 아래 맞춤).
   슬라이더 골격·네비 버튼은 _shared/common.css 의 .snap-slider. 색은 토큰만(§15). */
.section-concern--slider {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8.96vw, 172px) 0 clamp(40px, 3.125vw, 60px);
    background-color: var(--mood-surface-dark, #262422);   /* 시안 #313131 + 천 질감 40% 의 평균 톤 */
    color: var(--mood-on-overlay, #fff);
    overflow: hidden;
}

/* 배경은 cover 가 아니라 '너비 기준 크기 + 아랫변 고정' — S08-b 의 배경(윗변 고정)과 같은 배율이라 경계가 어느 화면에서도 이어진다.
   섹션이 이미지보다 길면 위쪽은 단색으로 남으므로, 이미지 위 가장자리를 마스크로 풀어 단색에 녹인다. */
.section-concern--slider .section-concern__bg {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: -1;
    width: max(100%, 1200px);
    max-width: none;
    height: auto;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
    pointer-events: none;
}

.section-concern--slider .section-concern__inner {
    /* 슬라이더 1440 + 컨테이너 좌우 패딩(최대 40×2) */
    max-width: 1520px;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 2.08vw, 40px);
}

.section-concern--slider .section-concern__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    text-align: center;
}

.section-concern--slider .section-concern__eyebrow {
    margin: 0;
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-concern--slider .section-concern__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
}

.section-concern--slider .section-concern__subtitle {
    max-width: none;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
    word-break: keep-all;
}

.section-concern--slider .section-concern__slide {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 이미지 + 덮개 + 고민 문장 */
.section-concern--slider .section-concern__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 345 / 195;
    padding: 16px 25px;
    border-radius: 20px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--mood-primary) 45%, #000);
}

.section-concern--slider .section-concern__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-concern--slider .section-concern__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.section-concern--slider .section-concern__q {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--mood-on-overlay, #fff);
    text-align: center;
    word-break: keep-all;
    text-wrap: balance;
}

/* 진료명 알약 링크 */
.section-concern--slider .section-concern__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 8px 27px 8px 20px;              /* 시안: 우 20 + 아이콘 상자(32) 안 여백 7 */
    border-radius: 40px;
    background-color: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.045em;
    text-decoration: none;
    transition: background-color 0.2s;
}

.section-concern--slider .section-concern__link img,
.section-concern--slider .section-concern__link .icon {
    /* 시안의 화살표 실제 크기 = 18 (32 상자 > 24 프레임 > inset 12.5%). 내보낸 SVG 는 여백 없이 꽉 차 있으므로 18 로 그린다 */
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.section-concern--slider .section-concern__link:hover,
.section-concern--slider .section-concern__link:focus-visible {
    background-color: color-mix(in srgb, var(--mood-primary) 85%, #000);
}

.section-concern--slider .section-concern__link:hover img,
.section-concern--slider .section-concern__link:hover .icon {
    transform: translateX(3px);
}

.section-concern--slider .section-concern__link:focus-visible {
    outline: 2px solid var(--mood-on-overlay, #fff);
    outline-offset: 3px;
}

.section-concern--slider .section-concern__a {
    margin: 0;
    font-size: clamp(0.9375rem, 0.83vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

/* 배경 밝기(기본 1). 밝은 사진을 쓰는 거래처는 brand.token_overrides "--concern-bg-brightness": ".55" 로 흰 글자 대비 확보 (2026-09-30 하늘수) */
.section-concern--slider .section-concern__bg { filter: brightness(var(--concern-bg-brightness, 1)); }


/* === S08 S08-b === */
/* S08-b — 증상 파인더 목록 (돌다리 피그마 140:789 하단 · 60:3812 역수확).
   기준 1920: 제목 블록 w=760 가운데(제목 56 · 리드 18, 간격 10) → 40 → 목록 w=700(행 h60 r20 흰 면, 좌 20·우 10·상하 10, 행 간격 10, 5행 노출=340)
   → 40 → "증상 더보기" 알약(primary, h48 r40, 글자 16 semibold + 아래 화살표) → 하단 132.
   행 = 번호(01… bold, CSS counter) + 증상 문장 16 medium + 오른쪽 "증상 치료 바로가기"(bg-alt 면, primary 글자 semibold, h40 r20).
   배경: S07-c 와 이어지는 어두운 천 질감(이 섹션은 아래쪽 절반, 위 맞춤). 색은 토큰만(§15). */
.section-finder--list {
    position: relative;
    isolation: isolate;
    padding: clamp(40px, 3.125vw, 60px) 0 clamp(80px, 6.875vw, 132px);
    background-color: var(--mood-surface-dark, #262422);   /* S07-c 와 같은 톤 */
    color: var(--mood-on-overlay, #fff);
    overflow: hidden;
    counter-reset: finder-row;
}

/* S07-c 와 같은 배율(너비 기준) + 윗변 고정 → 경계가 이어진다. 아래 가장자리는 마스크로 단색에 녹인다. */
.section-finder--list .section-finder__bg {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    width: max(100%, 1200px);
    max-width: none;
    height: auto;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%);
    mask-image: linear-gradient(to top, transparent 0, #000 30%);
    pointer-events: none;
}

.section-finder--list .section-finder__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 2.08vw, 40px);
}

.section-finder--list .section-finder__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    text-align: center;
}

.section-finder--list .section-finder__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
}

.section-finder--list .section-finder__subtitle {
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
    word-break: keep-all;
}

.section-finder--list .section-finder__body {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 2.08vw, 40px);
}

.section-finder--list .section-finder__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-finder--list .section-finder__item {
    counter-increment: finder-row;
}

/* 펼칠 때 새 항목이 차례로 떠오른다 (section.js 가 --finder-i 부여) */
.section-finder--list .is-expanded .section-finder__item:nth-child(n + 6) {
    animation: finder-row-in 0.35s var(--motion-ease, ease) both;
    animation-delay: calc(var(--finder-i, 0) * 40ms);
}

@keyframes finder-row-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.section-finder--list .section-finder__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 10px 10px 10px 20px;
    border-radius: 20px;
    background-color: #fff;
    color: var(--mood-text);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.045em;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
}

.section-finder--list .section-finder__label {
    min-width: 0;
    word-break: keep-all;
}

.section-finder--list .section-finder__label::before {
    content: counter(finder-row, decimal-leading-zero);
    margin-right: 0.35em;
    font-weight: 700;
}

.section-finder--list .section-finder__go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 17px 4px 20px;              /* 시안: 우 10 + 아이콘 상자(32) 안 여백 7 */
    border-radius: 20px;
    background-color: var(--mood-bg-alt);
    color: var(--mood-primary);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

.section-finder--list .section-finder__go img,
.section-finder--list .section-finder__go .icon {
    width: 18px;                             /* 시안의 화살표 실제 크기(32 상자 안 18) */
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.section-finder--list .section-finder__row:hover,
.section-finder--list .section-finder__row:focus-visible {
    background-color: var(--mood-bg);
}

.section-finder--list .section-finder__row:hover .section-finder__go img,
.section-finder--list .section-finder__row:hover .section-finder__go .icon {
    transform: translateX(3px);
}

.section-finder--list .section-finder__row:focus-visible {
    outline: 2px solid var(--mood-on-overlay, #fff);
    outline-offset: 3px;
}

/* 증상 더보기 */
.section-finder--list .section-finder__more {
    display: inline-flex;
    align-items: center;
    gap: 27px;                               /* 시안: 간격 20 + 아이콘 상자(32) 안 여백 7 */
    min-height: 48px;
    padding: 8px 27px 8px 20px;
    border: 0;
    border-radius: 40px;
    background-color: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.045em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.section-finder--list .section-finder__more[hidden] {
    display: none;
}

.section-finder--list .section-finder__more img,
.section-finder--list .section-finder__more .icon {
    width: 18px;
    height: 18px;
    transition: transform 0.25s;
}

.section-finder--list .section-finder__more-fallback {
    transform: rotate(90deg);
}

.section-finder--list .section-finder__more[aria-expanded="true"] img {
    transform: rotate(180deg);
}

.section-finder--list .section-finder__more[aria-expanded="true"] .section-finder__more-fallback {
    transform: rotate(-90deg);
}

.section-finder--list .section-finder__more:hover {
    background-color: color-mix(in srgb, var(--mood-primary) 85%, #000);
}

.section-finder--list .section-finder__more:focus-visible {
    outline: 2px solid var(--mood-on-overlay, #fff);
    outline-offset: 3px;
}

.section-finder--list .section-finder__note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--mood-on-overlay, #fff) 72%, transparent);
    text-align: center;
}

@media (max-width: 639px) {
    /* 좁은 화면 — 알약의 글자는 숨기고 화살표 원만 남긴다(행 전체가 링크라 의미는 유지) */
    .section-finder--list .section-finder__row {
        padding-left: 16px;
        font-size: 0.9375rem;
    }

    .section-finder--list .section-finder__go {
        width: 40px;
        padding: 0;
    }

    .section-finder--list .section-finder__go-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-finder--list .is-expanded .section-finder__item:nth-child(n + 6) {
        animation: none;
    }
}

/* 배경 밝기(기본 1) — S07-c 와 같은 규칙("--finder-bg-brightness") */
.section-finder--list .section-finder__bg { filter: brightness(var(--finder-bg-brightness, 1)); }


/* === self-check self-check (SSR module) === */
/* self-check.css — 자가진단 체크리스트 스타일 */

.self-check__inner {
    max-width: 560px;
    margin: 0 auto;
}

.self-check__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-text);
    margin-bottom: 8px;
    text-align: center;
}

.self-check__desc {
    color: var(--mood-text-muted);
    font-size: 0.9375rem;
    margin-bottom: 8px;
    text-align: center;
}

.self-check__notice {
    color: var(--mood-text-muted);
    font-size: 0.8125rem;
    margin-bottom: 24px;
    text-align: center;
}

.self-check__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.self-check__item {
    list-style: none;
}

.self-check__label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--mood-radius);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    font-size: 0.9375rem;
    color: var(--mood-text);
    min-height: 44px;
}

.self-check__label:hover {
    border-color: var(--mood-primary);
    background-color: color-mix(in srgb, var(--mood-primary) 4%, transparent);
}

.self-check__checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--mood-primary);
}

.self-check__checkbox:checked + span {
    color: var(--mood-primary);
    font-weight: 600;
}

.self-check__submit {
    width: 100%;
}

/* 결과 */

.self-check__result {
    text-align: center;
    padding: 32px 24px;
    border-radius: var(--mood-radius);
    background-color: var(--mood-bg-alt);
    margin-top: 20px;
}

.self-check__result-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.self-check__result-text {
    font-size: 1.0625rem;
    color: var(--mood-text);
    line-height: 1.6;
    margin-bottom: 20px;
}

.self-check__cta {
    display: inline-flex;
}

/* === 배경 이미지판 (.self-check--on-image) — 돌다리 피그마 141:1066 ===
   배경: 회색 빛결 이미지 + 아래로 갈수록 primary (transparent 29.1% → primary 113.6%, philosophy-c 와 같은 그라데이션).
   시안은 배경만 있어 콘텐츠는 앞 섹션들(S07-c·S08-b)의 문법을 따른다: 흰 제목 56·리드 18, 흰 행 카드 r20 h60, 흰 버튼.
   ≥1024 에서는 목록 2열(8항목 → 4행) — 시안 높이 900 안에 들어온다. 색은 토큰만(§15). */
.self-check--on-image {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8.96vw, 172px) 0 clamp(80px, 6.25vw, 120px);
    background-color: color-mix(in srgb, var(--mood-text) 70%, var(--mood-primary));
    color: var(--mood-on-overlay, #fff);
    overflow: hidden;
}

.self-check--on-image .self-check__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
}

.self-check--on-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 29.1%, var(--mood-primary) 113.6%);
    pointer-events: none;
}

.self-check--on-image .self-check__inner {
    max-width: 1200px;
}

.self-check--on-image .self-check__title {
    margin: 0 0 clamp(6px, 0.52vw, 10px);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
}

.self-check--on-image .self-check__desc {
    margin: 0 0 4px;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

.self-check--on-image .self-check__notice {
    margin: 0 0 clamp(28px, 2.08vw, 40px);
    font-size: 0.875rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--mood-on-overlay, #fff) 80%, transparent);
    word-break: keep-all;
}

.self-check--on-image .self-check__list {
    gap: 10px;
    margin: 0 0 clamp(28px, 2.08vw, 40px);
    padding: 0;
}

.self-check--on-image .self-check__label {
    min-height: 60px;
    padding: 10px 20px;
    border: 0;
    border-radius: 20px;
    background-color: #fff;
    color: var(--mood-text);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.045em;
}

.self-check--on-image .self-check__label:hover {
    background-color: var(--mood-bg);
}

.self-check--on-image .self-check__label:has(.self-check__checkbox:checked) {
    background-color: var(--mood-bg-alt);
}

/* 체크된 행은 bg-alt 면 — 그 위 primary 글자는 대비 4.0:1 로 부족해 본문색 굵게로 표시한다 */
.self-check--on-image .self-check__checkbox:checked + span {
    color: var(--mood-text);
    font-weight: 700;
}

.self-check--on-image .self-check__label:has(.self-check__checkbox:focus-visible) {
    outline: 2px solid var(--mood-on-overlay, #fff);
    outline-offset: 3px;
}

.self-check--on-image .self-check__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 345px;
    min-height: 60px;
    margin: 0 auto;
    border: 0;
    border-radius: 20px;
    background-color: #fff;
    color: var(--mood-primary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.self-check--on-image .self-check__submit:hover {
    background-color: var(--mood-bg-alt);
}

.self-check--on-image .self-check__submit:focus-visible {
    outline: 2px solid var(--mood-on-overlay, #fff);
    outline-offset: 3px;
}

.self-check--on-image .self-check__result {
    max-width: 700px;
    margin: clamp(28px, 2.08vw, 40px) auto 0;
    border-radius: 20px;
    background-color: #fff;
}

@media (min-width: 1024px) {
    .self-check--on-image .self-check__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }
}


/* === S09 treatments-c === */
/* treatments-c — 진료과목 한눈에 보기 (돌다리 피그마 142:1067 역수확). S09 + S10 통합판.
   기준 1920×1141: 상단 172, 제목 56 semibold → 20 → 리드 18 lh1.6 → 40 → 카드 그리드(400 × 3 + 간격 20).
   카드 = 흰 면 · primary 1px 테두리 · r10 · p30 · 그림자 0 4 10 / 10%. 머리: 마크 39×18 + 진료명 28 bold primary → 10 → 설명 14 medium primary lh1.8.
   세부 목록이 있는 카드는 머리 아래 primary 구분선(pb20) → 10 → 세부 링크 16 medium lh2.4 가운데. 같은 줄 카드는 높이를 맞춘다.
   배경: --mood-bg + 질감(overlay). 색은 토큰만(§15). */
.section-treatments--overview {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8.96vw, 172px) 0 clamp(80px, 6.56vw, 126px);
    background-color: var(--mood-bg);
    color: var(--mood-text);
    overflow: hidden;
}

.section-treatments--overview .section-treatments__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.section-treatments--overview .section-treatments__inner {
    /* 카드 400×3 + 간격 20×2 = 1240 + 컨테이너 좌우 패딩(최대 40×2) */
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 2.08vw, 40px);
}

.section-treatments--overview .section-treatments__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.04vw, 20px);
    text-align: center;
}

.section-treatments--overview .section-treatments__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
}

.section-treatments--overview .section-treatments__subtitle {
    max-width: none;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.6;
    letter-spacing: -0.04em;
    color: inherit;
    text-align: center;
    word-break: keep-all;
}

.section-treatments--overview .section-treatments__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 1.04vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-treatments--overview .section-treatments__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: clamp(22px, 1.5625vw, 30px);
    border: 1px solid var(--mood-primary);
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.section-treatments--overview .section-treatments__card-head {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.section-treatments--overview .section-treatments__card--list .section-treatments__card-head {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mood-primary);
}

.section-treatments--overview .section-treatments__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.375rem, 1.46vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
    color: var(--mood-primary);
}

.section-treatments--overview .section-treatments__name img {
    flex-shrink: 0;
    width: 39px;
    height: 18px;
}

.section-treatments--overview .section-treatments__name-link {
    color: inherit;
    text-decoration: none;
}

/* 세부 목록이 없는 카드는 카드 전체가 진료명 링크의 누름 영역 */
.section-treatments--overview .section-treatments__card:not(.section-treatments__card--list) .section-treatments__name-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.section-treatments--overview .section-treatments__card:not(.section-treatments__card--list):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.section-treatments--overview .section-treatments__name-link:hover,
.section-treatments--overview .section-treatments__name-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.section-treatments--overview .section-treatments__hook {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: var(--mood-primary);
    word-break: keep-all;
    text-wrap: balance;
}

.section-treatments--overview .section-treatments__subs {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.section-treatments--overview .section-treatments__subs a {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2.4;
    letter-spacing: -0.03em;
    color: var(--mood-text);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}

.section-treatments--overview .section-treatments__subs a:hover,
.section-treatments--overview .section-treatments__subs a:focus-visible {
    color: var(--mood-primary);
    background-color: var(--mood-bg-alt);
}

@media (max-width: 639px) {
    /* 터치 44px — lh2.4(38px)로는 모자라 모바일에서만 행 높이를 키운다 */
    .section-treatments--overview .section-treatments__subs a {
        line-height: 2.75;
    }
}

@media (min-width: 640px) {
    .section-treatments--overview .section-treatments__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .section-treatments--overview .section-treatments__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── 배경 사진 옵션 (brand.backgrounds.treatments — 하늘수 피그마 1:3337) + 카드 4장이면 ≥1280 에서 4열 ── */
.section-treatments--overview.section-treatments--on-image {
    position: relative;
    isolation: isolate;
    background-color: color-mix(in srgb, var(--mood-text) 60%, #000);
    color: #fff;
}
.section-treatments--overview .section-treatments__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.section-treatments--overview.section-treatments--on-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.section-treatments--overview.section-treatments--on-image .section-treatments__title,
.section-treatments--overview.section-treatments--on-image .section-treatments__subtitle { color: #fff; }
.section-treatments--overview.section-treatments--on-image .section-treatments__card { border-color: transparent; border-radius: 20px; }
.section-treatments--overview.section-treatments--on-image .section-treatments__name { color: var(--mood-heading-accent, var(--mood-primary)); }
.section-treatments--overview.section-treatments--on-image .section-treatments__hook { color: var(--mood-heading-accent, var(--mood-text-muted)); font-size: 0.875rem; }
.section-treatments--overview.section-treatments--on-image .section-treatments__card--list .section-treatments__card-head { border-bottom-color: color-mix(in srgb, var(--mood-heading-accent, var(--mood-primary)) 40%, #fff); }
@media (min-width: 1280px) {
    .section-treatments--overview .section-treatments__grid:has(> li:nth-child(4):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* === S13 S13-b === */
/* S13-b — 가이드 순환 슬라이더 (돌다리 피그마 143:1167 · 70:143 역수확).
   기준 1920×900: 제목 블록 가운데(아이브로 16 · 제목 56 · 리드 18, 간격 10) 상단 175, 슬라이더 top=377 · 화면 폭 전체.
   카드 345(간격 80): 이미지 345×195 r20 → 20 → 제목 24 bold → 설명 16 medium (lh 1.8). 가운데 3장 활성, 좌우 이웃은 흐림.
   네비 72 흰 원 — 활성 3장의 바깥 가장자리에 중심(시안 x=326 · 1522), 이미지 세로 중앙.
   슬라이더 골격·흐림·네비 위치는 _shared/common.css 의 .loop-slider. 색은 토큰만(§15). */
.section-guide-teaser--loop {
    padding: clamp(64px, 9.11vw, 175px) 0 clamp(56px, 7.8vw, 150px);
    background-color: var(--mood-bg-alt);
    color: var(--mood-text);
    overflow: hidden;
}

.section-guide-teaser--loop .section-guide-teaser__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    margin-bottom: clamp(32px, 2.24vw, 43px);
    text-align: center;
}

.section-guide-teaser--loop .section-guide-teaser__eyebrow {
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-guide-teaser--loop .section-guide-teaser__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
    word-break: keep-all;
}

.section-guide-teaser--loop .section-guide-teaser__subtitle {
    max-width: none;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
    word-break: keep-all;
}

.section-guide-teaser--loop .section-guide-teaser__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: inherit;
    text-decoration: none;
}

.section-guide-teaser--loop .section-guide-teaser__media {
    position: relative;
    display: block;
    aspect-ratio: 345 / 195;
    border-radius: 20px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--mood-text) 35%, #fff);
}

.section-guide-teaser--loop .section-guide-teaser__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--motion-ease, ease);
}

.section-guide-teaser--loop .section-guide-teaser__card:hover .section-guide-teaser__media img,
.section-guide-teaser--loop .section-guide-teaser__card:focus-visible .section-guide-teaser__media img {
    transform: scale(1.04);
}

/* 사진 준비 전 — 회색 상자. 실사처럼 보이는 대체 이미지는 쓰지 않는다(§1-6) */
.section-guide-teaser--loop .section-guide-teaser__media--empty {
    background-color: color-mix(in srgb, var(--mood-text) 18%, #fff);
}

.section-guide-teaser--loop .section-guide-teaser__text {
    display: flex;
    flex-direction: column;
}

.section-guide-teaser--loop .section-guide-teaser__card-title {
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

.section-guide-teaser--loop .section-guide-teaser__card-desc {
    font-size: clamp(0.9375rem, 0.83vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

.section-guide-teaser--loop .section-guide-teaser__card:focus-visible {
    outline: 2px solid var(--mood-primary);
    outline-offset: 6px;
    border-radius: 20px;
}

.section-guide-teaser--loop .section-guide-teaser__notice {
    margin: clamp(24px, 2.08vw, 40px) 0 0;
    padding: 0 16px;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--mood-text-muted);
    text-align: center;
    word-break: keep-all;
}


/* === S14 doctors-c === */
/* doctors-c — 의료진 카드 (돌다리 피그마 145:457 역수확).
   기준 1920×900: 제목 블록 가운데(아이브로 16 · 제목 56, 간격 10) 상단 152 → 카드 top 309.
   카드 w≈857 · p40 · r20 · primary 1px 테두리 · 흰 면 · 그림자 0 4 10 / 10%. 왼쪽: 이름 줄 24(직함 regular + 이름 bold, 자간 넓게) → 20 →
   뱃지(테두리 알약 px16 py4, 마크 20 + 글자 18 semibold primary, 간격 10) → 20 → 이력 16 lh1.8 점 목록 → 20 → 버튼 w345 h52 r40 primary(글자 18 bold + 화살표 18).
   오른쪽: 인물 359×443 — 카드 바닥에 붙는다. 배경: --mood-bg + 질감(overlay). 색은 토큰만(§15). */
.section-doctors--card {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 7.92vw, 152px) 0 clamp(72px, 4.4vw, 85px);
    background-color: var(--mood-bg);
    color: var(--mood-text);
    overflow: hidden;
}

.section-doctors--card .section-doctors__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.section-doctors--card .section-doctors__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 2.08vw, 40px);
}

.section-doctors--card .section-doctors__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    text-align: center;
}

.section-doctors--card .section-doctors__eyebrow {
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-doctors--card .section-doctors__heading {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
}

.section-doctors--card .section-doctors__list {
    width: 100%;
    max-width: 858px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.08vw, 40px);
}

.section-doctors--card .section-doctors__card {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 2.08vw, 40px);
    border: 1px solid var(--mood-primary);
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.section-doctors--card .section-doctors__info {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.section-doctors--card .section-doctors__name {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-doctors--card .section-doctors__name strong {
    margin-left: 0.15em;
    font-weight: 700;
    letter-spacing: 0.3em;                   /* 시안: "이 홍 석" — 글자 사이를 띄운 표기를 자간으로 */
}

.section-doctors--card .section-doctors__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-doctors--card .section-doctors__badges:empty {
    display: none;
}

.section-doctors--card .section-doctors__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px;
    border: 1px solid var(--mood-primary);
    border-radius: 40px;
    font-size: clamp(1rem, 0.94vw, 1.125rem);
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: var(--mood-primary);
    word-break: keep-all;
}

.section-doctors--card .section-doctors__badge-mark {
    display: none;
}

.section-doctors--has-mark .section-doctors__badge-mark {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--doctors-mark) center / contain no-repeat;
}

.section-doctors--card .section-doctors__credentials {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

.section-doctors--card .section-doctors__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 345px;
    max-width: 100%;
    min-height: 52px;
    padding: 10px 27px 10px 20px;
    border-radius: 40px;
    background-color: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
    font-size: clamp(1rem, 0.94vw, 1.125rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.04em;
    text-decoration: none;
    transition: background-color 0.2s;
}

.section-doctors--card .section-doctors__more img,
.section-doctors--card .section-doctors__more .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.section-doctors--card .section-doctors__more:hover,
.section-doctors--card .section-doctors__more:focus-visible {
    background-color: color-mix(in srgb, var(--mood-primary) 85%, #000);
}

.section-doctors--card .section-doctors__more:hover img,
.section-doctors--card .section-doctors__more:hover .icon {
    transform: translateX(3px);
}

.section-doctors--card .section-doctors__more:focus-visible {
    outline: 2px solid var(--mood-primary);
    outline-offset: 3px;
}

/* 인물 — 카드 바닥에 붙인다(카드 아래 패딩을 상쇄) */
.section-doctors--card .section-doctors__figure {
    flex: 0 0 auto;
    align-self: flex-end;
    width: clamp(200px, 18.7vw, 359px);
    margin: 0 clamp(0px, 0.8vw, 16px) calc(-1 * clamp(24px, 2.08vw, 40px)) 0;
    line-height: 0;
}

.section-doctors--card .section-doctors__figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 443px;
    object-fit: cover;
    object-position: center top;
}

@media (max-width: 767px) {
    .section-doctors--card .section-doctors__card {
        flex-direction: column;
    }

    /* 좁은 화면 — 실루엣(자리 표시)은 정보가 없으므로 숨기고, 실제 사진만 위에 둔다 */
    .section-doctors--card .section-doctors__figure--empty {
        display: none;
    }

    .section-doctors--card .section-doctors__figure {
        order: -1;
        align-self: center;
        width: min(240px, 70%);
        margin: 0;
    }

    .section-doctors--card .section-doctors__figure img {
        border-radius: 16px;
    }

    .section-doctors--card .section-doctors__more {
        width: 100%;
    }
}

/* ── 배경 사진 + 워드마크 옵션 (하늘수 피그마 1:3544): 하늘 그라데이션 위 흰 제목, 바닥에 흰 영문 워드마크 마퀴(hero-d 와 같은 규격) ── */
.section-doctors--card .section-doctors__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.section-doctors--card.section-doctors--on-image .section-doctors__head { color: #fff; }
.section-doctors--card.section-doctors--wordmark { padding-bottom: clamp(120px, 9vw, 176px); }
.section-doctors--card .section-doctors__wordmark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: clamp(1.25rem, 3.125vw, 3.75rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #fff;
    opacity: 0.25;
    pointer-events: none;
}
.section-doctors--card .section-doctors__wordmark-track { margin: 0; font: inherit; letter-spacing: inherit; line-height: 1; }
.section-doctors--card .section-doctors__wordmark-dot { margin: 0 0.4em; }


/* === S18 S18 === */
.section-reviews-out__title {
    text-align: center;
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-text);
    margin-bottom: 8px;
}

.section-reviews-out__subtitle {
    text-align: center;
    color: var(--mood-text-muted);
    margin-bottom: var(--mood-inner-gap);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.section-reviews-out__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .section-reviews-out__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.section-reviews-out__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 24px);
    background-color: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    border: 1px solid var(--mood-border, transparent);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.section-reviews-out__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 플랫폼 브랜드 아이콘 — 원형 컨테이너 배경은 각 플랫폼 공식 색(아이콘 고유색, 토큰 대상 아님) */
.section-reviews-out__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    color: #fff;
}

.section-reviews-out__icon--naver { background-color: #03C75A; }
.section-reviews-out__icon--google { background-color: #4285F4; }
.section-reviews-out__icon--kakao { background-color: #FEE500; color: #381E1F; }

.section-reviews-out__name {
    font-family: var(--mood-heading-ff);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--mood-text);
}

.section-reviews-out__desc {
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    line-height: 1.5;
}

.section-reviews-out__link-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mood-primary);
    margin-top: auto;
}


/* === S19 S19-b === */
/* S19-b — 추천 대상 롤링 띠 (돌다리 피그마 145:567 · 60:4537 역수확).
   기준 1920×560: 제목 블록 가운데(아이브로 16 · 제목 56, 간격 10) 상단 167 → 카드 띠 top 329 · 화면 폭 전체 → 하단 111.
   카드 345×120 r20: 이미지 + #000 60% 덮개 + 흰 글자 18 semibold lh1.8 가운데(2줄). 간격 20. 좌우 10% 는 배경으로 페이드(mask).
   배경: --mood-bg + 질감(overlay). 색은 토큰만(§15). */
.section-recommend--strip {
    position: relative;
    isolation: isolate;
    padding: clamp(72px, 8.7vw, 167px) 0 clamp(64px, 5.78vw, 111px);
    background-color: var(--mood-bg);
    color: var(--mood-text);
    overflow: hidden;
}

.section-recommend--strip .section-recommend__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.section-recommend--strip .section-recommend__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    margin-bottom: clamp(28px, 2.34vw, 45px);
    text-align: center;
}

.section-recommend--strip .section-recommend__eyebrow {
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-recommend--strip .section-recommend__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
}

/* 띠 — marquee.js 가 돌기 전/reduced-motion: 가로 스크롤 목록 */
.section-recommend--strip .section-recommend__strip {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.section-recommend--strip .section-recommend__strip::-webkit-scrollbar {
    display: none;
}

.section-recommend--strip .section-recommend__track {
    flex: 0 0 auto;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0 20px 0 0;                     /* 마지막 카드 뒤 간격 = gap — 복제본과 이음매가 같은 간격이 된다 */
    list-style: none;
}

.section-recommend--strip .section-recommend__item {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(260px, 17.97vw, 345px);
    height: 120px;
    padding: 12px 24px;
    border-radius: 20px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--mood-primary) 45%, #000);
    white-space: normal;                     /* marquee.js 가 컨테이너에 nowrap 을 건다 */
}

.section-recommend--strip .section-recommend__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-recommend--strip .section-recommend__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.section-recommend--strip .section-recommend__text {
    position: relative;
    z-index: 1;
    font-size: clamp(1rem, 0.94vw, 1.125rem);
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: var(--mood-on-overlay, #fff);
    text-align: center;
    word-break: keep-all;
    text-wrap: balance;
}


/* === S20 faq-a === */
.section-faq__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-text);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.section-faq__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-faq__item {
    border-bottom: 1px solid color-mix(in srgb, var(--mood-text) 10%, transparent);
}

.section-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
}

.section-faq__question::-webkit-details-marker {
    display: none;
}

.section-faq__q-text {
    font-family: var(--mood-heading-ff);
    font-weight: 600;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    color: var(--mood-text);
}

.section-faq__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
}

.section-faq__icon::before,
.section-faq__icon::after {
    content: '';
    position: absolute;
    background-color: var(--mood-text-muted);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section-faq__icon::before {
    width: 12px;
    height: 2px;
}

.section-faq__icon::after {
    width: 2px;
    height: 12px;
    transition: transform 0.3s;
}

.section-faq__item[open] .section-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.section-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.section-faq__item[open] .section-faq__answer {
    grid-template-rows: 1fr;
}

.section-faq__answer > * {
    overflow: hidden;
}

.section-faq__answer p {
    padding-bottom: 20px;
    color: var(--mood-text);
    line-height: 1.8;
    font-size: 0.9375rem;
}


/* === S21 access-b === */
/* access-b — 오시는 길 3칸 (돌다리 피그마 145:654 역수확).
   기준 1920×775: 제목 블록 가운데(아이브로 16 · 제목 56 · 리드 18 — 지역 구간은 accent-soft bold, 간격 10) 상단 172 → 40 → 3칸(간격 28) → 하단 122.
   칸 = accent-soft 1px 테두리 · r20 · px40 py20. 안내 칸: 아이콘 24 + 라벨(accent-soft 18 bold) → 21 → 값(흰 18 bold), 행 간격 20, 주차 부연 14 regular.
   가운데: 약도/지도 r20 436×282(시안 156:305 실측 — 내보낸 코드의 359:232 는 오기). 진료시간 칸: 제목(아이콘+accent-soft) → 20 → 행(라벨 w150 + 값, 18 bold, 행 간격 4).
   배경: primary + 질감(overlay). 색은 토큰만(§15) — accent-soft 가 없으면 on-overlay. */
.section-access--panels {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8.96vw, 172px) 0 clamp(72px, 6.35vw, 122px);
    background-color: var(--mood-primary);
    color: var(--mood-on-overlay, #fff);
    overflow: hidden;
    --access-accent: var(--mood-accent-soft, var(--mood-on-overlay, #fff));
    /* 글자용 강조색 — accent-soft 는 primary 위 대비 3.7:1 이라 "큰 글자"(굵게 ≥18.67px)일 때만 쓴다. 그보다 작아지는 화면(<1280)에서는 흰색 */
    --access-accent-text: var(--mood-on-overlay, #fff);
}

.section-access--panels .section-access__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.section-access--panels .section-access__inner {
    max-width: 1700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 2.08vw, 40px);
}

.section-access--panels .section-access__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    text-align: center;
}

.section-access--panels .section-access__eyebrow {
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-access--panels .section-access__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
    word-break: keep-all;
}

.section-access--panels .section-access__geo-sentence {
    max-width: none;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    text-align: center;
    word-break: keep-all;
}

.section-access--panels .section-access__geo-sentence strong {
    font-weight: 700;
    color: var(--access-accent-text);
}

/* 3칸 */
.section-access--panels .section-access__panels {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 1.46vw, 28px);
    align-items: stretch;
    justify-content: center;
}

.section-access--panels .section-access__panel {
    min-width: 0;
    padding: 20px clamp(20px, 2.08vw, 40px);
    border: 1px solid var(--access-accent);
    border-radius: 20px;
}

.section-access--panels .section-access__dl,
.section-access--panels .section-access__hours {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.section-access--panels .section-access__dl {
    gap: 20px;
}

.section-access--panels .section-access__row {
    display: flex;
    align-items: center;
    gap: 21px;
    margin: 0;
    padding: 0;
    border: 0;
}

.section-access--panels .section-access__row--top {
    align-items: flex-start;
}

.section-access--panels .section-access__row dt,
.section-access--panels .section-access__hours-title {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: inherit;
    font-size: clamp(1rem, 0.94vw, 1.125rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: var(--access-accent-text);
    white-space: nowrap;
}

.section-access--panels .section-access__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--access-accent-text);
}

.section-access--panels .section-access__row dd {
    min-width: 0;
    margin: 0;
    font-size: clamp(1rem, 0.94vw, 1.125rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: inherit;
    word-break: keep-all;
}

.section-access--panels .section-access__row a {
    color: inherit;
    text-decoration: none;
}

.section-access--panels .section-access__row a:hover,
.section-access--panels .section-access__row a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.section-access--panels .section-access__sub {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
}

/* 가운데 — 약도/지도 */
.section-access--panels .section-access__panel--map {
    position: relative;
    padding: 0;
    border: 0;
    overflow: hidden;
    min-height: 232px;
    aspect-ratio: 436 / 282;
    background-color: color-mix(in srgb, var(--mood-primary) 70%, #000);
}

.section-access--panels .section-access__panel--map > img,
.section-access--panels .section-access__map-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-access--panels .section-access__map-link {
    position: relative;
    display: block;
    height: 100%;
    color: inherit;
}

.section-access--panels .section-access__map-cta {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 6px 14px;
    border-radius: 40px;
    background-color: var(--mood-text);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
}

.section-access--panels .section-access__map-link:hover .section-access__map-cta,
.section-access--panels .section-access__map-link:focus-visible .section-access__map-cta {
    opacity: 1;
    transform: none;
}

.section-access--panels .section-access__map-link:focus-visible {
    outline: 2px solid var(--access-accent);
    outline-offset: 3px;
}

@media (hover: none) {
    .section-access--panels .section-access__map-cta {
        opacity: 1;
        transform: none;
    }
}

/* 지도 API/iframe 폴백(access-a 와 같은 마크업)을 이 칸에 맞춘다 */
.section-access--panels .section-access__map {
    height: 100%;
    margin: 0;
}

.section-access--panels .section-access__map-canvas,
.section-access--panels .section-access__map-frame {
    width: 100%;
    height: 100%;
    min-height: 232px;
    border: 0;
    border-radius: 0;
}

.section-access--panels .section-access__map--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 진료시간 */
.section-access--panels .section-access__panel--hours {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-access--panels .section-access__hours {
    gap: 4px;
}

.section-access--panels .section-access__hours-row {
    display: flex;
    align-items: baseline;
    gap: 21px;
}

.section-access--panels .section-access__hours-row dt {
    flex: 0 0 clamp(120px, 7.8vw, 150px);
    margin: 0;
    font-size: clamp(1rem, 0.94vw, 1.125rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.05em;
}

.section-access--panels .section-access__hours-row dd {
    margin: 0;
    font-size: clamp(1rem, 0.94vw, 1.125rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.05em;
}

.section-access--panels .section-access__hours-sub {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
}

.section-access--panels .section-access__hours-note {
    margin: -12px 0 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-access--panels .section-access__hours-note::before {
    content: none;
}

@media (min-width: 768px) {
    .section-access--panels .section-access__panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-access--panels .section-access__panel--map {
        grid-column: 1 / -1;
        grid-row: 1;
        aspect-ratio: auto;
        max-height: 282px;                   /* 768~1279: 위 한 줄 전체 폭 — 시안 높이(282)까지만 */
    }
}

@media (min-width: 1280px) {
    .section-access--panels {
        --access-accent-text: var(--access-accent);
    }

    /* 강조색 글자는 굵게 19px 이상으로(대비 기준의 큰 글자) */
    .section-access--panels .section-access__geo-sentence,
    .section-access--panels .section-access__row dt,
    .section-access--panels .section-access__hours-title {
        font-size: 1.1875rem;
    }

    .section-access--panels .section-access__panels {
        /* 시안 1550: 안내 522 · 약도 436 · 진료시간 ≈ 536 — 좌우 칸은 내용 폭, 남는 폭은 그리드 바깥 여백 */
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);   /* <1600 은 세 칸이 비례로 나눈다(약도 436:282 비율 유지), ≥1600 은 아래에서 시안 폭 고정 */
    }



    .section-access--panels .section-access__panel--map {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: auto;
    }
}

@media (min-width: 1600px) {
    /* 시안 폭(1920 기준): 안내 522 · 진료시간 641 (px40 포함). 그보다 좁으면 내용 폭대로 */
    .section-access--panels .section-access__panel--info { min-width: 522px; }
    .section-access--panels .section-access__panel--hours { min-width: 536px; }
    .section-access--panels .section-access__panels { grid-template-columns: auto 436px auto; }
}

/* ── 배경 사진 옵션 (brand.backgrounds.access — 하늘수 피그마 1:3931): 사진 + 검정 덮개, 칸은 primary 면(테두리 없음) ── */
.section-access--panels .section-access__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.section-access--panels:has(> .section-access__bg) { background-color: color-mix(in srgb, var(--mood-text) 60%, #000); }
.section-access--panels:has(> .section-access__bg)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.section-access--panels:has(> .section-access__bg) .section-access__panel {
    background-color: var(--mood-accent, var(--mood-primary));
    border-color: transparent;
}
.section-access--panels:has(> .section-access__bg) .section-access__panel--map { background-color: #fff; }


/* === S24 consult-form (SSR module) === */
/* consult-form.css — 인라인 상담 폼 스타일 */

.consult-form {
    max-width: 600px;
    margin: 0 auto;
}

.consult-form__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-text);
    margin-bottom: 8px;
}

.consult-form__desc {
    color: var(--mood-text-muted);
    font-size: 0.9375rem;
    margin-bottom: 24px;
}

.consult-form__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.consult-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 480px) {
    .consult-form__row {
        grid-template-columns: 1fr;
    }
}

.consult-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.consult-form__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mood-text);
}

.consult-form__input,
.consult-form__select,
.consult-form__textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--mood-radius);
    font-family: var(--mood-body-ff);
    font-size: 1rem;
    color: var(--mood-text);
    background-color: var(--mood-bg);
    transition: border-color 0.2s;
    min-height: 44px;
}

.consult-form__input:focus,
.consult-form__select:focus,
.consult-form__textarea:focus {
    outline: none;
    border-color: var(--mood-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mood-primary) 15%, transparent);
}

.consult-form__textarea {
    resize: vertical;
    min-height: 100px;
}

.consult-form__agree {
    padding: 4px 0;
}

.consult-form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    cursor: pointer;
    line-height: 1.4;
}

.consult-form__checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--mood-primary);
}

.consult-form__privacy-link {
    color: var(--mood-primary);
    text-decoration: underline;
}

.consult-form__submit {
    width: 100%;
    margin-top: 8px;
}

.consult-form__note {
    margin-top: 12px;
    font-size: 0.8125rem;
    color: var(--mood-text-muted);
    text-align: center;
}

.consult-form__note a {
    color: var(--mood-primary);
    text-decoration: underline;
}

/* hidden 속성 복구 — .consult-form__form 등에 display:flex/grid 가 걸려 있으면
   UA 스타일시트의 [hidden]{display:none} 을 이겨서 숨김이 먹지 않는다.
   접수 성공 후에도 폼이 그대로 남아 있던 원인이다(2026-09-11 실측). */
.consult-form [hidden],
.consult-form__form[hidden],
.consult-modal[hidden] {
    display: none !important;
}

/* 제출 중 버튼 — 텍스트만 바뀌면 눈에 띄지 않아 점 3개를 애니메이션으로 붙인다 */
.consult-form__submit.is-loading::after {
    content: "";
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: consult-dots 1.2s steps(4, end) infinite;
}

@keyframes consult-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
    .consult-form__submit.is-loading::after { animation: none; content: "..."; }
}

/* 제출 결과 — 페이지 이동 없이 폼 아래에 표시 */
.consult-form__result {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: center;
    background-color: color-mix(in srgb, var(--mood-primary) 8%, transparent);
    color: var(--mood-text);
}

.consult-form__result.is-error {
    background-color: color-mix(in srgb, #d64545 10%, transparent);
    color: #a33;
}

/* 접수 완료 패널 — 폼을 대체한다 */
.consult-form__done {
    padding: 32px 20px;
    text-align: center;
}

.consult-form__done-icon {
    color: var(--mood-primary);
    margin-bottom: 12px;
}

.consult-form__done-title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    color: var(--mood-text);
    margin-bottom: 10px;
}

.consult-form__done-desc {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--mood-text-muted);
}

.consult-form__done-desc a {
    color: var(--mood-primary);
    text-decoration: underline;
}

/* 캡차 위젯 — plugin/kcaptcha captcha_html() 이 그리는 fieldset#captcha 마크업을 tokens.css 톤에 맞춘다 */

.consult-form__captcha fieldset {
    border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--mood-radius);
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.consult-form__captcha legend {
    padding: 0 4px;
    font-size: 0.8125rem;
    color: var(--mood-text-muted);
}

.consult-form__captcha img {
    height: 44px;
    border-radius: calc(var(--mood-radius) / 2);
}

.consult-form__captcha input[type="text"] {
    width: 96px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--mood-radius);
    font-size: 1rem;
    color: var(--mood-text);
    background-color: var(--mood-bg);
}

.consult-form__captcha button {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--mood-radius);
    background-color: transparent;
    color: var(--mood-text);
    cursor: pointer;
}

.consult-form__captcha span#captcha_info {
    flex-basis: 100%;
    font-size: 0.8125rem;
    color: var(--mood-text-muted);
}

/* 프리뷰 폴백(전화 안내) */

.consult-form--fallback {
    padding: 20px;
    border: 1px dashed var(--mood-border, rgba(0, 0, 0, 0.2));
    border-radius: var(--mood-radius);
}

.consult-form--fallback a {
    color: var(--mood-primary);
    text-decoration: underline;
}

/* ── 접수 완료 모달 ────────────────────────────────────────────────────────
   폼 안 인라인 메시지는 접수 여부를 확신시키지 못한다는 지적(2026-09-11)에 따라
   화면 중앙 모달로 확실히 알린다. 배경 클릭·Esc·확인 버튼으로 닫힌다. */
.consult-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.consult-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    animation: consult-modal-fade 0.2s ease-out;
}

.consult-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 36px 28px 28px;
    border-radius: 16px;
    background-color: var(--mood-bg, #fff);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: consult-modal-pop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.consult-modal__icon {
    color: var(--mood-primary);
    margin-bottom: 14px;
}

.consult-modal__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--mood-text);
    margin-bottom: 12px;
}

.consult-modal__desc {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--mood-text-muted);
    margin-bottom: 24px;
}

.consult-modal__desc a {
    color: var(--mood-primary);
    text-decoration: underline;
    white-space: nowrap;
}

.consult-modal__close {
    width: 100%;
    min-height: 48px;
}

@keyframes consult-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes consult-modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .consult-modal__backdrop,
    .consult-modal__dialog { animation: none; }
}

/* === 배경 이미지판 (.section-consult-form--on-image) — 돌다리 피그마 145:800 ===
   배경: 회색 빛결 이미지 + 위로 갈수록 primary (아래에서 29.6% 까지 투명 → 위쪽 120.6% 에서 primary). 앞 섹션(primary 면)에서 자연스럽게 이어진다.
   "화이트 버전": 제목·안내는 흰 글자, 폼은 흰 카드(r20) 안 — 입력칸·캡차·동의 문구의 대비를 그대로 지킨다. 키: client.yaml brand.backgrounds.consult */
.section-consult-form--on-image {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8.96vw, 172px) 0 clamp(80px, 6.25vw, 120px);
    background-color: color-mix(in srgb, var(--mood-text) 70%, var(--mood-primary));
    overflow: hidden;
}

.section-consult-form--on-image .section-consult-form__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
}

.section-consult-form--on-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, transparent 29.6%, var(--mood-primary) 120.56%);
    pointer-events: none;
}

.section-consult-form--on-image .consult-form {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-consult-form--on-image .consult-form__title {
    margin: 0 0 clamp(6px, 0.52vw, 10px);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--mood-on-overlay, #fff);
    text-align: center;
}

.section-consult-form--on-image .consult-form__desc {
    margin: 0 0 clamp(28px, 2.08vw, 40px);
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: var(--mood-on-overlay, #fff);
    text-align: center;
    word-break: keep-all;
}

.section-consult-form--on-image .consult-form__desc a {
    color: inherit;
}

.section-consult-form--on-image .consult-form__form,
.section-consult-form--on-image .consult-form__done {
    padding: clamp(24px, 2.08vw, 40px);
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.section-consult-form--on-image .consult-form__input,
.section-consult-form--on-image .consult-form__select,
.section-consult-form--on-image .consult-form__textarea {
    border-radius: 12px;
}

.section-consult-form--on-image .consult-form__submit {
    min-height: 60px;
    border-radius: 20px;
}


/* === S22 cta-c === */
/* cta-c — 예약 CTA (돌다리 피그마 145:801 상단 역수확).
   기준 1920×758: 가운데 세로 스택 — 아이브로 16 · 제목 56 · 안내 18(2줄, 간격 10) → 40 → 알약 버튼 2개(간격 20): 어두운 면 · px20 py10 · r40 · 글자 20 medium + 화살표 18.
   배경: 어두운 사진 합성 이미지. 색은 토큰만(§15). */
.section-cta--photo {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 39.5vw, 758px);
    padding: clamp(72px, 6.25vw, 120px) 0;
    background-color: color-mix(in srgb, var(--mood-text) 82%, var(--mood-primary));
    color: var(--mood-on-overlay, #fff);
    overflow: hidden;
}

.section-cta--photo .section-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
}

.section-cta--photo .section-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    text-align: center;
}

.section-cta--photo .section-cta__eyebrow {
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.section-cta--photo .section-cta__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-cta--photo .section-cta__subtitle {
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

.section-cta--photo .section-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 1.04vw, 20px);
    margin-top: clamp(22px, 1.56vw, 30px);
}

.section-cta--photo .section-cta__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 50px;
    padding: 10px 23px 10px 20px;
    border-radius: 40px;
    background-color: var(--mood-text);
    color: #fff;
    font-size: clamp(1.0625rem, 1.04vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.035em;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
}

.section-cta--photo .section-cta__pill img,
.section-cta--photo .section-cta__pill .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.section-cta--photo .section-cta__pill:hover,
.section-cta--photo .section-cta__pill:focus-visible {
    background-color: var(--mood-primary);
}

.section-cta--photo .section-cta__pill:hover img,
.section-cta--photo .section-cta__pill:hover .icon {
    transform: translateX(3px);
}

.section-cta--photo .section-cta__pill:focus-visible {
    outline: 2px solid var(--mood-on-overlay, #fff);
    outline-offset: 3px;
}

/* ── primary 틴트 변형 (sections.S22.tone: primary — 하늘수 피그마 1:4070): 사진 위 primary 80% 덮개, 흰 알약 버튼(primary 글자) ── */
.section-cta--photo.section-cta--tint-primary { background-color: var(--mood-primary); }
.section-cta--photo.section-cta--tint-primary .section-cta__bg { opacity: 0.3; mix-blend-mode: luminosity; }   /* 사진은 밝기만 남기고 primary 로 물들인다(시안의 청록 톤) */
.section-cta--photo.section-cta--tint-primary .section-cta__pill {
    background-color: #fff;
    color: var(--mood-primary);
}
.section-cta--photo.section-cta--tint-primary .section-cta__pill:hover,
.section-cta--photo.section-cta--tint-primary .section-cta__pill:focus-visible {
    background-color: var(--mood-bg-alt);
    color: var(--mood-primary);
}


/* === module popup (index.php 상시 include) === */
/* popup 모듈 — 데스크톱 센터 모달 + 모바일 바텀시트 */

.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.popup-container {
    position: relative;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    background-color: var(--mood-bg);
    border-radius: var(--mood-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    transform: translateY(20px);
    transition: transform 0.3s;
}

.popup-overlay.is-active .popup-container {
    transform: translateY(0);
}

.popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.popup-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mood-radius);
}

.popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid var(--mood-bg-alt);
    background-color: var(--mood-bg);
}

.popup-footer__today {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--mood-text-muted);
    cursor: pointer;
}

.popup-footer__today input[type="checkbox"] {
    min-width: 16px;
    min-height: 16px;
}

.popup-footer__close {
    min-height: 36px;
    padding: 8px 20px;
    background-color: var(--mood-primary);
    color: #fff;
    border: none;
    border-radius: var(--mood-radius);
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.popup-footer__close:hover {
    background-color: var(--mood-primary-light);
}

/* 모바일: 바텀시트 */
@media (max-width: 768px) {
    .popup-overlay {
        align-items: flex-end;
    }

    .popup-container {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(100%);
    }

    .popup-overlay.is-active .popup-container {
        transform: translateY(0);
    }
}

/* 관리자 팝업레이어의 너비(nw_width) — popup.php 가 --popup-max-w 로 넘긴다(데스크톱만) */
@media (min-width: 769px) {
    .popup-container { max-width: var(--popup-max-w, 480px); }
}


/* === module quickmenu (index.php 상시 include) === */
/* quickmenu — 우측 사이드 고정, 브랜드 원형 아이콘 + 좌측 툴팁 (데스크톱 전용)
   M6 역수확 (dolari preview). 브랜드 아이콘 고유색(네이버·카카오·인스타)만 하드코딩 허용 — 그 외는 토큰 */

.quickmenu {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.quickmenu.is-visible {
    opacity: 1;
    visibility: visible;
}

.quickmenu__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quickmenu__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--mood-bg);
    color: var(--mood-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--mood-body-ff);
    transition: transform 0.2s var(--motion-ease, ease), box-shadow 0.2s var(--motion-ease, ease);
}

.quickmenu__item:hover,
.quickmenu__item:focus-visible {
    transform: scale(1.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.quickmenu__item:focus-visible {
    outline: 2px solid var(--mood-accent);
    outline-offset: 2px;
}

.quickmenu__icon {
    flex-shrink: 0;
}

/* 좌측 툴팁 — hover/focus 시 슬라이드 인 */
.quickmenu__tooltip {
    position: absolute;
    right: 100%;
    margin-right: 8px;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: var(--mood-text);
    color: var(--mood-bg);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.quickmenu__item:hover .quickmenu__tooltip,
.quickmenu__item:focus-visible .quickmenu__tooltip {
    opacity: 1;
    transform: translateX(-8px);
}

/* 브랜드 색 (플랫폼 공식 색 — 토큰 대상 아님) */
.quickmenu__item--blog { background-color: #03C75A; color: #fff; }
.quickmenu__item--reserve { background-color: #1EC800; color: #fff; }
.quickmenu__item--kakao { background-color: #FEE500; color: #381E1F; }
.quickmenu__item--insta {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}
.quickmenu__item--youtube { background-color: #FF0000; color: #fff; }

/* 토큰 기반 */
.quickmenu__item--map {
    background-color: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
}

.quickmenu__item--top {
    background-color: var(--mood-bg);
    color: var(--mood-primary);
    border: 1px solid var(--mood-border, var(--mood-bg-alt));
}

/* 모바일: 숨김 (floating-cta 바텀바와 역할 분담) */
@media (max-width: 768px) {
    .quickmenu {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quickmenu__item,
    .quickmenu__tooltip {
        transition: none;
    }

    .quickmenu__item:hover {
        transform: none;
    }
}

/* === labeled 스타일 (client.yaml quickmenu.style: labeled) — 2026-09-21 돌다리 피그마(132:384) 역수확 ===
   72px 흰 원 + 32px 아이콘 + 12px 라벨, TOP 은 primary 채움. 브랜드 색 배경은 쓰지 않는다(아이콘이 primary 단색). */
.quickmenu--labeled .quickmenu__list {
    gap: 10px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
}

.quickmenu--labeled .quickmenu__item {
    flex-direction: column;
    gap: 0;
    width: 72px;
    height: 72px;
    padding: 4px 5px;
    border-radius: 72px;
    background: var(--mood-bg, #fff);
    background-color: #fff;
    color: var(--mood-primary);
    box-shadow: none;
    border: 0;
}

.quickmenu--labeled .quickmenu__item:hover,
.quickmenu--labeled .quickmenu__item:focus-visible {
    transform: translateY(-2px);
    box-shadow: none;
}

.quickmenu--labeled .quickmenu__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.quickmenu--labeled .quickmenu__label {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.06em;
    white-space: nowrap;
    color: var(--mood-primary);
}

.quickmenu--labeled .quickmenu__item--top {
    background-color: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
}

.quickmenu--labeled .quickmenu__item--top .quickmenu__tooltip {
    display: none;
}


/* === module floating-cta (index.php 상시 include) === */
/* floating-cta — 모바일 플로팅 바텀 바 */

.floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    background-color: var(--mood-bg);
    border-top: 1px solid var(--mood-bg-alt);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.floating-cta.is-visible {
    transform: translateY(0);
}

.floating-cta__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 4px;
    color: var(--mood-text);
    font-family: var(--mood-body-ff);
    font-size: 0.75rem;                    /* 2026-09-22 점검: 11px → 12px */
    font-weight: 600;
    text-align: center;
    transition: background-color 0.2s;
}

.floating-cta__btn:hover,
.floating-cta__btn:active {
    background-color: var(--mood-bg-alt);
}

.floating-cta__btn--phone {
    color: var(--mood-primary);
}

.floating-cta__btn--booking {
    background-color: var(--mood-primary);
    color: #fff;
}

.floating-cta__btn--booking:hover,
.floating-cta__btn--booking:active {
    background-color: var(--mood-primary-light);
}

.floating-cta__btn--consult {
    color: var(--mood-text-muted);
}

/* 데스크톱: 숨김 (quickmenu와 역할 분담) */
@media (min-width: 769px) {
    .floating-cta {
        display: none !important;
    }
}



/* === template:treatment-detail === */


/* Block 2: 증상·고민 */
.td-symptoms__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: 8px;
}

.td-symptoms__intro {
    text-align: center;
    color: var(--mood-text-muted);
    margin-bottom: var(--mood-inner-gap);
}

/* 적응증 — 그리드 대신 1열 세로 나열(2026-09-10 사용자 지정).
   2열이면 문장 길이가 제각각이라 줄 끝이 들쭉날쭉하고 읽는 순서도 헷갈렸다. */
.td-symptoms__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}

.td-symptoms__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    color: var(--mood-text);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.td-symptoms__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mood-primary);
    border-radius: 50%;
    margin-top: 2px;
    color: var(--mood-primary);
}

/* Block 3: 프로세스 */
.td-process__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

/* 치료 과정 — PC 에서 한 줄 5열 고정(2026-09-10 사용자 지정).
   auto-fit + minmax(200px) 는 스텝이 5개일 때 4+1 로 접혀 마지막 단계가 혼자 다음 줄로 내려갔다.
   스텝 수는 3~6 이므로 5열을 상한으로 두고, 그보다 적으면 있는 만큼만 채운다. */
.td-process__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    /* 기본 5열 — 스텝이 5개인 진료가 가장 많다 */
    .td-process__steps {
        grid-template-columns: repeat(5, 1fr);
        max-width: 1140px;
        gap: 16px;
    }

    /* 6개면 3×2 로 나눈다 — 6열은 칸이 좁고, 5+1 은 마지막이 혼자 남는다 (2026-09-10 사용자 지정) */
    .td-process__steps:has(> :last-child:nth-child(6)) {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
    }

    /* 4개 이하면 5열을 강제하지 않고 개수만큼 중앙에 둔다 */
    .td-process__steps:has(> :last-child:nth-child(-n + 4)) {
        grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
        justify-content: center;
    }
}

.td-process__step {
    text-align: center;
    padding: 24px 16px;
}

.td-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 16px;
}

/* 스텝 내용을 요약하는 보조 아이콘 — 순번 배지(위)는 순서를, 아이콘(아래)은 스텝 성격을 전달한다 */
.td-process__icon {
    display: block;
    margin: 0 auto 8px;
    color: var(--mood-primary);
}

.td-process__step-title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    font-size: 1.125rem;
    margin-bottom: 8px;
    color: var(--mood-text);
}

.td-process__step-body {
    font-size: 0.9375rem;
    color: var(--mood-text-muted);
    line-height: 1.7;
}

/* Block 4: 장비·기술 */
.td-equipment__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.td-equipment__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.td-equipment__card {
    padding: 28px 24px;
    background: var(--mood-bg);
    border: 1px solid var(--mood-border, rgba(0,0,0,0.06));
    border-radius: var(--mood-radius);
    text-align: center;
}

/* icon-badge(48px 원 + 토큰 배경·색)가 기본을 맡고, 여기서는 56px 로 키우고 내부 아이콘만 키운다 */
.td-equipment__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
}

.td-equipment__icon .icon {
    width: 28px;
    height: 28px;
}

.td-equipment__name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--mood-text);
}

.td-equipment__desc {
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    line-height: 1.6;
}

/* Block 5: 전후 사례 */
.td-cases__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.td-cases__gated,
.td-cases__notice {
    text-align: center;
    padding: 40px 20px;
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
}

.td-cases__gated p,
.td-cases__notice p {
    color: var(--mood-text-muted);
    margin-bottom: 16px;
}

/* Block 6: FAQ */
.td-faq__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.td-faq__list {
    max-width: 800px;
    margin: 0 auto;
}

.td-faq__item {
    border-bottom: 1px solid var(--mood-border, rgba(0,0,0,0.08));
}

.td-faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--mood-text);
}

.td-faq__icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

.td-faq__icon::before,
.td-faq__icon::after {
    content: '';
    position: absolute;
    background: var(--mood-text-muted);
    transition: transform 0.3s;
}

.td-faq__icon::before {
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

.td-faq__icon::after {
    width: 2px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.td-faq__item[open] .td-faq__icon::after {
    transform: translateX(-50%) rotate(90deg);
}

.td-faq__answer {
    padding: 0 0 20px;
    color: var(--mood-text-muted);
    line-height: 1.8;
}

/* Block 7: 관련 진료 */
.td-related__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.td-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.td-related__card {
    display: block;
    padding: 24px;
    background: var(--mood-bg);
    border: 1px solid var(--mood-border, rgba(0,0,0,0.08));
    border-radius: var(--mood-radius);
    transition: border-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
}

.td-related__card:hover {
    border-color: var(--mood-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* icon-badge 기본(48px)보다 작게 — 카드 패딩(24px) 안에서 이름·훅과 비례를 맞춘다 */
.td-related__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
}

.td-related__icon .icon {
    width: 20px;
    height: 20px;
}

.td-related__name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mood-text);
    margin-bottom: 6px;
}

.td-related__hook {
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    margin-bottom: 8px;
}

.td-related__arrow {
    color: var(--mood-primary);
    font-size: 1.25rem;
}

@media (max-width: 480px) {
.td-process__steps {
        grid-template-columns: 1fr;
    }
}

/* ===== v1.1 (M3) 추가 블록: 정의·비용·주의사항·과정 단서 ===== */
.td-definition {
    padding-top: clamp(32px, 5vw, 56px);
}

.td-definition__lead {
    /* max-width 해제 — 좁은 폭이 문장을 어정쩡하게 끊었다(2026-09-10 사용자 지정). 줄 길이는 컨테이너 폭과 text-wrap 이 맡는다 */
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: var(--mood-text);
    margin: 0 auto 12px;
}

.td-definition__citation,
.ch-subs__citation {
    max-width: 760px;
    /* 아래 여백이 0 이라 바로 뒤 요소(허브의 세부 카드 그리드)가 인용 박스에 붙어 있었다 (2026-09-10 사용자 지적) */
    margin: 16px auto clamp(24px, 4vw, 40px);
    padding: 12px 16px;
    border-left: 3px solid var(--mood-primary);
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    color: var(--mood-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.td-process__visits {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--mood-primary);
    font-weight: 600;
}

.td-process__note,
.td-related__hub {
    text-align: center;
    margin-top: 24px;
    font-size: 0.9375rem;
    color: var(--mood-text-muted);
}

.td-related__hub a {
    color: var(--mood-primary);
    font-weight: 600;
    text-decoration: none;
}

.td-cost__title,
.td-cautions__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.td-cost__dl {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.td-cost__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 20px;
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
}

.td-cost__row dt {
    font-weight: 700;
    color: var(--mood-primary);
}

.td-cost__row dd {
    margin: 0;
    line-height: 1.7;
    color: var(--mood-text);
}

.td-cost__row dd a {
    color: var(--mood-primary);
}

.td-cost__table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 12px;
    font-size: 0.9375rem;
}

.td-cost__table th,
.td-cost__table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--mood-border, rgba(0, 0, 0, 0.1));
}

.td-cautions__list {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 24px 20px 40px;
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    color: var(--mood-text-muted);
    line-height: 1.7;
}

.td-cautions__list li + li {
    margin-top: 8px;
}

@media (min-width: 768px) {
    .td-cost__row {
        grid-template-columns: 96px 1fr;
        gap: 16px;
    }
}


/* === template:category-hub === */


/* 세부 진료 카드 */
.ch-subs__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

/* 세부 진료 카드 — PC 4열(4×2). 항목 수가 4의 배수가 아니면 마지막 줄을 가운데로 모아 좌우 대칭을 맞춘다.
   (2026-09-10 사용자 지정. auto-fit 은 화면 폭에 따라 3열·5열로 흔들려 줄 끝이 들쭉날쭉했다) */
.ch-subs__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.ch-subs__grid > * {
    flex: 0 1 100%;
    min-width: 0;
}

@media (min-width: 640px) {
    .ch-subs__grid > * { flex-basis: calc((100% - 20px) / 2); }
}

@media (min-width: 1024px) {
    .ch-subs__grid > * { flex-basis: calc((100% - 60px) / 4); }

    /* 5개면 4+1 로 갈라지므로 한 줄에 5개를 넣는다 (2026-09-10 사용자 지정).
       :has 로 자식 수를 세어 분기 — 카테고리마다 세부 수가 달라 고정값을 쓸 수 없다. */
    .ch-subs__grid:has(> :last-child:nth-child(5)) > * {
        flex-basis: calc((100% - 80px) / 5);
    }

    /* 3개도 한 줄이 자연스럽다 */
    .ch-subs__grid:has(> :last-child:nth-child(3)) > * {
        flex-basis: calc((100% - 40px) / 3);
    }
}

.ch-subs__card {
    display: block;
    padding: 32px 24px;
    background: var(--mood-bg);
    border: 1px solid var(--mood-border, rgba(0,0,0,0.06));
    border-radius: var(--mood-radius);
    text-decoration: none;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.ch-subs__card:hover {
    border-color: var(--mood-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* icon-badge(48px 원 + 토큰 배경)가 크기·색을 맡는다 — 여기서는 카드 내 여백만 */
.ch-subs__icon {
    margin-bottom: 16px;
}

.ch-subs__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mood-text);
    margin-bottom: 8px;
}

.ch-subs__hook {
    font-size: 0.9375rem;
    color: var(--mood-text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}

.ch-subs__more {
    font-size: 0.875rem;
    color: var(--mood-primary);
    font-weight: 600;
}

/* FAQ */
.ch-faq__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.ch-faq__list { max-width: 800px; margin: 0 auto; }

.ch-faq__item { border-bottom: 1px solid var(--mood-border, rgba(0,0,0,0.08)); }

.ch-faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--mood-text);
}

.ch-faq__answer {
    padding: 0 0 20px;
    color: var(--mood-text-muted);
    line-height: 1.8;
}


/* === template:group-hub === */
/* group-hub — 진료 묶음(그룹) 허브 (하늘수 피그마 2:5602 계열 역수확, 2026-09-30).
   1920 기준: 소섹션 = 좌 텍스트 열(아이브로 16 → 제목 56 bold → 설명 16, 열 아래 정렬) | 우 카드 슬라이더(카드 2장 노출, 이미지 r20 · 제목 20 bold · 설명 16),
   소섹션 사이 1px 구분선 · 위아래 여백 100. 홀수 번째는 좌우 교차. grid = 가운데 제목 + 카드 3열, list = 크림 목록.
   슬라이더 골격·네비는 _shared/common.css 의 .snap-slider. 색은 토큰만(§15). ch-faq 는 category-hub 템플릿 CSS 를 그대로 쓴다. */
.gh-sections {
    padding: clamp(40px, 4vw, 72px) 0 clamp(24px, 2.5vw, 40px);
    background-color: var(--mood-bg);
    color: var(--mood-text);
}

.gh-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2.5vw, 40px);
    padding: clamp(48px, 5.2vw, 100px) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mood-text) 12%, transparent);
    scroll-margin-top: calc(var(--header-h, 64px) + 24px);
}

.gh-group:first-child { padding-top: clamp(16px, 2vw, 32px); }

.gh-group__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.gh-group__eyebrow {
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: var(--mood-text-muted);
}

.gh-group__title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--mood-text);
    word-break: keep-all;
}

.gh-group__desc {
    margin: clamp(12px, 2vw, 40px) 0 0;
    font-size: clamp(0.9375rem, 0.83vw, 1rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: var(--mood-text);
    word-break: keep-all;
    max-width: 36em;
}

/* 카드 */
.gh-cards { min-width: 0; }
.gh-cards__track {
    margin: 0;
    padding: 0;
    list-style: none;
}
.gh-cards--grid .gh-cards__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2.08vw, 40px);
}

.gh-card { min-width: 0; }
.gh-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.gh-card__media {
    aspect-ratio: 345 / 195;
    border-radius: 20px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--mood-text) 8%, #fff);
    margin-bottom: 20px;
}
.gh-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--motion-ease, ease);
}
.gh-card__link:hover .gh-card__media img,
.gh-card__link:focus-visible .gh-card__media img { transform: scale(1.04); }
.gh-card__media--empty { background-color: color-mix(in srgb, var(--mood-text) 14%, #fff); }   /* 사진 준비 전 회색 상자(§1-6) */
.gh-card__name {
    margin: 0 0 8px;
    font-size: clamp(1.125rem, 1.04vw, 1.25rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--mood-text);
    word-break: keep-all;
}
.gh-card__num { margin-right: 0.35em; }
.gh-card__desc {
    margin: 0;
    font-size: clamp(0.875rem, 0.83vw, 1rem);
    line-height: 1.7;
    letter-spacing: -0.03em;
    color: var(--mood-text-muted);
    word-break: keep-all;
}
.gh-card__more {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mood-primary);
}
.gh-card__link:focus-visible { outline: 2px solid var(--mood-primary); outline-offset: 6px; border-radius: 20px; }

/* grid 레이아웃(통증완화시스템): 텍스트 가운데 + 카드 3열 */
.gh-group--grid .gh-group__text { align-items: center; text-align: center; }
.gh-group--grid .gh-group__desc { max-width: 52em; }
.gh-group--grid .gh-card__media {
    aspect-ratio: 460 / 240;
    background-color: color-mix(in srgb, var(--mood-text) 5%, #fff);
}
.gh-group--grid .gh-card__media img { object-fit: contain; padding: 12px; }

/* list 레이아웃(구강검진): 크림 알약 목록 */
.gh-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gh-list__item {
    padding: clamp(16px, 1.25vw, 24px) clamp(20px, 1.56vw, 30px);
    border-radius: 20px;
    background-color: var(--mood-accent-soft, color-mix(in srgb, var(--mood-accent) 14%, #fff));
    font-size: clamp(0.9375rem, 0.83vw, 1rem);
    line-height: 1.7;
    letter-spacing: -0.03em;
    color: var(--mood-text);
    word-break: keep-all;
}
.gh-list__link { color: inherit; text-decoration: none; }
.gh-list__link:hover .gh-list__name { text-decoration: underline; text-underline-offset: 3px; }
.gh-list__name { font-weight: 700; }

@media (min-width: 640px) {
    .gh-cards--grid .gh-cards__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .gh-group--slider,
    .gh-group--list {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: stretch;
        gap: clamp(40px, 5vw, 120px);
    }
    .gh-group--flip .gh-group__text { order: 2; }
    .gh-group--flip .gh-cards,
    .gh-group--flip .gh-list { order: 1; }
    .gh-group--slider .gh-group__text,
    .gh-group--list .gh-group__text { justify-content: space-between; }
    .gh-group--slider .gh-group__desc { margin-top: auto; padding-top: 24px; }
    .gh-cards.snap-slider { --slider-per: 2; }
    .gh-cards.snap-slider .snap-slider__nav { top: 22%; }   /* 이미지 세로 중앙 부근 */
}


/* === template:pricing === */


.pr-content__notice {
    text-align: center;
    padding: 20px;
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    margin-bottom: 32px;
    color: var(--mood-text-muted);
    font-size: 0.9375rem;
}

.pr-content__table-wrap {
    overflow-x: auto;
    margin-bottom: 32px;
}

.pr-content__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.pr-content__table thead {
    background: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
}

.pr-content__table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
}

.pr-content__table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mood-border, rgba(0,0,0,0.08));
    color: var(--mood-text);
}

.pr-content__table tbody tr:nth-child(even) {
    background: var(--mood-bg-alt);
}

.pr-content__price {
    font-weight: 600;
    color: var(--mood-primary);
    white-space: nowrap;
}

.pr-content__disclaimer {
    text-align: center;
    padding: 24px;
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    line-height: 1.8;
}

.pr-content__consult {
    text-align: center;
    padding: 60px 20px;
    font-size: 1.0625rem;
    color: var(--mood-text);
    line-height: 1.8;
}

/* ===== v1.1 (M3) 추가: 리드 문장·앵커·카테고리 그룹 ===== */
.pr-content__anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: var(--mood-inner-gap);
}

.pr-content__anchors a {
    padding: 8px 16px;
    border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.1));
    border-radius: 100px;
    font-size: 0.875rem;
    color: var(--mood-text);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.pr-content__group {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    margin: 32px 0 12px;
    font-size: 1.25rem;
}

/* ===== 비공개(pricing.public=false) 분기 보강 — 비용 결정 요인·안내 절차 ===== */
.pr-guide {
    max-width: 880px;
    margin: 0 auto;
}

.pr-guide__heading {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--mood-text);
    text-align: center;
    margin: clamp(40px, 6vw, 72px) 0 16px;
}

.pr-guide__lead {
    text-align: center;
    color: var(--mood-text-muted);
    line-height: 1.8;
    margin-bottom: clamp(24px, 4vw, 40px);
}

.pr-guide__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    list-style: none;
}

.pr-guide__item {
    padding: clamp(20px, 3vw, 28px);
    background: var(--mood-bg);
    border-radius: var(--mood-radius);
    border-left: 3px solid var(--mood-primary);
}

.pr-guide__item h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    font-size: 1.0625rem;
    color: var(--mood-primary);
    margin-bottom: 8px;
}

.pr-guide__icon {
    flex-shrink: 0;
}

.pr-guide__item p {
    font-size: 0.9375rem;
    color: var(--mood-text);
    line-height: 1.8;
}

.pr-guide__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    counter-reset: pr-step;
    list-style: none;
}

.pr-guide__step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(18px, 3vw, 24px);
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
}

.pr-guide__step strong {
    counter-increment: pr-step;
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-text);
}

.pr-guide__step strong::before {
    content: counter(pr-step) '. ';
    color: var(--mood-primary);
}

.pr-guide__step span {
    font-size: 0.9375rem;
    color: var(--mood-text-muted);
    line-height: 1.7;
}

.pr-guide__note {
    margin-top: clamp(24px, 4vw, 40px);
    text-align: center;
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    line-height: 1.8;
}

@media (min-width: 768px) {
    .pr-guide__list { grid-template-columns: 1fr 1fr; }
    .pr-guide__steps { grid-template-columns: repeat(3, 1fr); }
}


/* === template:area-landing === */


/* 오시는 길 */
.al-route__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.al-route__info {
    max-width: 700px;
    margin: 0 auto 24px;
}

.al-route__dl { display: grid; gap: 0; }

.al-route__row {
    display: grid;
    /* dt 아이콘(16px)+간격(6px)만큼 여유를 둔다 — access-a(S21) 요약 블록과 같은 라벨+아이콘 패턴 */
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mood-border, rgba(0,0,0,0.08));
}

.al-route__row dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--mood-primary);
    font-size: 0.9375rem;
}

.al-route__icon {
    flex-shrink: 0;
}

.al-route__row dd {
    color: var(--mood-text);
    font-size: 0.9375rem;
}

.al-route__citation {
    text-align: center;
    padding: 20px;
    background: color-mix(in srgb, var(--mood-primary) 6%, transparent);
    border-left: 3px solid var(--mood-primary);
    border-radius: 0 var(--mood-radius) var(--mood-radius) 0;
    font-size: 0.9375rem;
    color: var(--mood-text);
    max-width: 700px;
    margin: 0 auto;
}

/* 주요 진료 */
.al-treatments__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.al-treatments__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.al-treatments__card {
    display: block;
    padding: 28px 24px;
    background: var(--mood-bg);
    border: 1px solid var(--mood-border, rgba(0,0,0,0.06));
    border-radius: var(--mood-radius);
    text-decoration: none;
    transition: border-color 0.2s, transform 0.15s;
}

.al-treatments__card:hover {
    border-color: var(--mood-primary);
    transform: translateY(-2px);
}

.al-treatments__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
}

.al-treatments__icon .icon {
    width: 20px;
    height: 20px;
}

.al-treatments__name { font-size: 1.0625rem; font-weight: 600; color: var(--mood-text); margin-bottom: 6px; }
.al-treatments__hook { font-size: 0.875rem; color: var(--mood-text-muted); margin-bottom: 10px; }
.al-treatments__more { font-size: 0.875rem; color: var(--mood-primary); font-weight: 600; }

/* FAQ */
.al-faq__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.al-faq__list { max-width: 800px; margin: 0 auto; }
.al-faq__item { border-bottom: 1px solid var(--mood-border, rgba(0,0,0,0.08)); }
.al-faq__question { display: flex; justify-content: space-between; padding: 20px 0; cursor: pointer; font-weight: 600; color: var(--mood-text); }
.al-faq__answer { padding: 0 0 20px; color: var(--mood-text-muted); line-height: 1.8; }

/* ===== v1.1 (M3) 추가: 진료시간 목록·travel 없는 경우 안내 ===== */
.al-route__hours {
    list-style: none;
    padding: 0;
    margin: 0;
}

.al-route__hours li + li {
    margin-top: 4px;
}

.al-route__note {
    text-align: center;
    margin-top: 16px;
    color: var(--mood-text-muted);
    font-size: 0.9375rem;
}

.al-route__note a {
    color: var(--mood-primary);
    font-weight: 600;
}


/* === template:faq === */


.fq-list__items {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.fq-list__item {
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    padding: 4px 20px;
}

.fq-list__question {
    cursor: pointer;
    padding: 16px 0;
    font-weight: 600;
    color: var(--mood-text);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.fq-list__question::-webkit-details-marker {
    display: none;
}

.fq-list__question::after {
    content: '+';
    color: var(--mood-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.fq-list__item[open] .fq-list__question::after {
    content: '−';
}

.fq-list__answer {
    padding: 0 0 20px;
    color: var(--mood-text-muted);
    line-height: 1.7;
}


/* === template:signature === */


.sg-body__para {
    max-width: 760px;
    margin: 0 auto 16px;
    line-height: 1.8;
    color: var(--mood-text);
}

.sg-evidence__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.sg-evidence__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sg-evidence__card {
    padding: 24px;
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    border-top: 3px solid var(--mood-primary);
}

.sg-evidence__icon {
    margin-bottom: 10px;
}

.sg-evidence__name {
    font-weight: 700;
    color: var(--mood-text);
    margin-bottom: 8px;
}

.sg-evidence__desc {
    color: var(--mood-text-muted);
    line-height: 1.6;
    font-size: 0.9375rem;
}

.sg-items__list {
    max-width: 800px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 12px;
}

.sg-items__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-left: 3px solid var(--mood-primary);
    background: var(--mood-bg-alt);
    border-radius: var(--mood-radius);
    line-height: 1.7;
}

.sg-items__icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--mood-primary);
}

.sg-items__body p,
.sg-items__body strong {
    display: block;
}

@media (min-width: 768px) {
    .sg-evidence__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* === template:doctors === */


/* 허브 — 의료진 카드 목록 */
.dr-list__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.dr-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.dr-list__card {
    display: block;
    padding: 32px 24px;
    background: var(--mood-bg);
    border: 1px solid var(--mood-border, rgba(0,0,0,0.06));
    border-radius: var(--mood-radius);
    text-decoration: none;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.dr-list__card:hover {
    border-color: var(--mood-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.dr-list__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mood-text);
    margin-bottom: 4px;
}

.dr-list__job-title {
    font-size: 0.9375rem;
    color: var(--mood-primary);
    font-weight: 600;
    margin-bottom: 4px;
}

.dr-list__license {
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mood-bg-alt);
    margin-bottom: 8px;
}

.dr-list__credentials {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding-left: 16px;
    list-style: disc;
}

.dr-list__credentials li {
    font-size: 0.8125rem;
    color: var(--mood-text-muted);
    line-height: 1.6;
}

.dr-list__more {
    font-size: 0.875rem;
    color: var(--mood-primary);
    font-weight: 600;
}

/* 허브 — 진료 체계 안내 (positioning.philosophy) */
.dr-philosophy__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.dr-philosophy__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.dr-philosophy__item-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mood-text);
    margin-bottom: 8px;
}

.dr-philosophy__item-body {
    font-size: 0.9375rem;
    color: var(--mood-text-muted);
    line-height: 1.7;
}

/* 상세 — 프로필(사진 + 직함·자격 전체) */
.dr-profile__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
}

.dr-profile__photo-wrap {
    overflow: hidden;
    border-radius: var(--mood-radius);
}

.dr-profile__photo {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.dr-profile__title {
    font-size: 1.125rem;
    color: var(--mood-primary);
    font-weight: 700;
}

.dr-profile__license {
    font-size: 0.9375rem;
    color: var(--mood-text-muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mood-bg-alt);
}

.dr-profile__sub-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mood-text);
    margin-top: 16px;
    margin-bottom: 8px;
}

.dr-profile__credentials,
.dr-profile__career,
.dr-profile__memberships {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 18px;
    list-style: disc;
}

.dr-profile__credentials li,
.dr-profile__career li,
.dr-profile__memberships li {
    font-size: 0.9375rem;
    color: var(--mood-text-muted);
    line-height: 1.7;
}

@media (min-width: 768px) {
    .dr-profile__grid {
        grid-template-columns: 2fr 3fr;
        align-items: start;
    }
}

/* 상세 — 중점 진료 링크 */
.dr-focus__title {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    color: var(--mood-primary);
    text-align: center;
    margin-bottom: var(--mood-inner-gap);
}

.dr-focus__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.dr-focus__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--mood-bg);
    border: 1px solid var(--mood-border, rgba(0,0,0,0.06));
    border-radius: var(--mood-radius);
    text-decoration: none;
    color: var(--mood-text);
    transition: border-color 0.2s, transform 0.15s;
}

.dr-focus__card:hover {
    border-color: var(--mood-primary);
    transform: translateY(-2px);
}

.dr-focus__label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dr-focus__icon {
    color: var(--mood-primary);
    flex-shrink: 0;
}

.dr-focus__name { font-weight: 600; }

.dr-focus__arrow { color: var(--mood-primary); }


/* === template:_shared/sub-cta.css === */
/* sub-cta — 서브페이지 공용 하단 상담 안내 (돌다리 피그마 81:814 계열). 배경·제목·안내·알약 버튼은 홈 cta-c(.section-cta--photo) 규칙을 그대로 쓰고,
   여기서는 서브 전용 요소(전화 큰 글자 32 bold 크림 + 전화 아이콘 24)와 간격만 더한다. cta-c 가 홈에 없는 거래처를 위해 골격도 한 벌 둔다. */
.sub-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 39.5vw, 758px);
    padding: clamp(72px, 6.25vw, 120px) 0;
    background-color: color-mix(in srgb, var(--mood-text) 82%, var(--mood-primary));
    color: var(--mood-on-overlay, #fff);
    overflow: hidden;
}

.sub-cta .section-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
}

.sub-cta .section-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
    text-align: center;
}

.sub-cta .section-cta__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
}

.sub-cta .section-cta__subtitle {
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

.sub-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(4px, 0.52vw, 10px);
    font-size: clamp(1.375rem, 1.67vw, 2rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: var(--mood-accent-soft, var(--mood-on-overlay, #fff));
    text-decoration: none;
}

.sub-cta__phone img,
.sub-cta__phone .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.sub-cta__phone:hover,
.sub-cta__phone:focus-visible {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.sub-cta .section-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 1.04vw, 20px);
    margin-top: clamp(22px, 1.56vw, 30px);
}

.sub-cta .section-cta__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 50px;
    padding: 10px 23px 10px 20px;
    border-radius: 40px;
    background-color: var(--mood-text);
    color: #fff;
    font-size: clamp(1.0625rem, 1.04vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.035em;
    text-decoration: none;
    transition: background-color 0.2s;
}

.sub-cta .section-cta__pill img,
.sub-cta .section-cta__pill .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sub-cta .section-cta__pill:hover,
.sub-cta .section-cta__pill:focus-visible {
    background-color: var(--mood-primary);
}

/* 틴트(primary) 변형 — cta-c 규칙을 따른다. 전화 큰 글자는 흰색 */
.sub-cta.sub-cta--tint-primary { background-color: var(--mood-primary); }
.sub-cta.sub-cta--tint-primary .section-cta__bg { opacity: 0.3; mix-blend-mode: luminosity; }
.sub-cta.sub-cta--tint-primary .sub-cta__phone { color: #fff; }
.sub-cta.sub-cta--tint-primary .section-cta__pill { background-color: #fff; color: var(--mood-primary); }
.sub-cta.sub-cta--tint-primary .section-cta__pill:hover,
.sub-cta.sub-cta--tint-primary .section-cta__pill:focus-visible { background-color: var(--mood-bg-alt); color: var(--mood-primary); }


/* === template:_shared/sub-hero.css === */
/* sub-hero — 서브페이지 공용 상단 (돌다리 피그마 79:174 계열). 1920 기준 h500 · 아래 모서리 r80 · 사진 + 검정 덮개(0.4~0.6) ·
   가운데 정렬 스택(브레드크럼 16 → H1 56 → 리드 18, 간격 10), 헤더(92) 아래 세로 중앙. 사진이 없으면 primary 단색. 색은 토큰만(§15). */
/* 아래 모서리 r80 바깥은 body 배경(--mood-bg)이 비쳤다 — 다음 섹션(bg-alt)과 같은 색으로 채워 이음새를 없앤다(2026-09-22 사용자 요청) */
.sub-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--mood-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(320px, 26vw, 500px);
    padding: calc(var(--header-h, 64px) + 24px) 0 clamp(40px, 3.5vw, 64px);
    border-radius: 0;
    color: var(--mood-on-overlay, #fff);
    overflow: hidden;
    text-align: center;
}

.sub-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

/* 사진·덮개·단색 면을 모두 둥근 안쪽 레이어에 넣는다 */
.sub-hero__bg,
.sub-hero::before,
.sub-hero::after {
    border-radius: 0 0 clamp(32px, 4.17vw, 80px) clamp(32px, 4.17vw, 80px);
    overflow: hidden;
}

.sub-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    background-color: var(--mood-primary);   /* 사진이 없을 때의 면 */
}

.sub-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.sub-hero--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.5);   /* 시안 0.4~0.6 — 흰 글자 대비 확보 */
}

.sub-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px);
}

.sub-hero__breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
}

.sub-hero__breadcrumb li + li::before {
    content: '>';
    margin-right: 0.35em;
    opacity: 0.8;
}

.sub-hero__breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                        /* 터치 44px(§9.2) — 글자 크기는 그대로 */
    padding: 0 6px;
    margin: -12px -6px;
    color: inherit;
    text-decoration: none;
}

.sub-hero__breadcrumb a:hover,
.sub-hero__breadcrumb a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sub-hero__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.875rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

.sub-hero__intro {
    max-width: 62em;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
    text-wrap: balance;
}

/* 상단이 헤더 아래로 밀리지 않게 — overlay 헤더 거래처는 히어로 위에 겹친다. 단색 헤더 거래처는 sub-hero 가 헤더 바로 아래 */
.site-header--overlay ~ main .sub-hero,
body:has(.site-header--overlay) .sub-hero {
    margin-top: calc(-1 * var(--header-h, 64px));
}

/* light 톤 (builder _layout.sub_hero: light — 하늘수 피그마 2:5602): 밝은 하늘 사진 위 어두운 글자, 검정 덮개·둥근 모서리 없음, 높이 330(헤더 포함) */
.sub-hero--light {
    background-color: var(--mood-bg);
    color: var(--mood-text);
    min-height: clamp(260px, 17.2vw, 330px);
    padding-bottom: clamp(32px, 2.5vw, 48px);
}
.sub-hero--light .sub-hero__bg,
.sub-hero--light::before,
.sub-hero--light::after { border-radius: 0; }
.sub-hero--light::after { background-color: var(--mood-bg-alt); }
.sub-hero--light.sub-hero--photo::before { background-color: rgba(255, 255, 255, 0.08); }
.sub-hero--light .sub-hero__bg img { object-position: center; }
.sub-hero--light .sub-hero__breadcrumb { color: var(--mood-text-muted); }
.sub-hero--light .sub-hero__title { font-weight: 700; }
.sub-hero--light .sub-hero__intro { color: var(--mood-text); }
/* 칩: primary 알약(h48 · px40 · r24 · 흰 글자 18 bold), 간격 20 — 소섹션 앵커 */
.sub-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1.04vw, 20px);
    margin: clamp(12px, 1.25vw, 24px) 0 0;
    padding: 0;
    list-style: none;
}
.sub-hero__chip {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 clamp(24px, 2.08vw, 40px);
    border-radius: 24px;
    background-color: var(--mood-accent, var(--mood-primary));
    color: #fff;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
}
.sub-hero__chip:hover,
.sub-hero__chip:focus-visible { background-color: var(--mood-primary); transform: translateY(-1px); }