/* === _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 — 정교한치과 전용(2026-10-06 피그마 59:1903 재작성).
   기준 1920×900: 전면 사진 + 덮개(--hero-overlay) · 카피 블록 가운데(세로 중앙 +16px) · 수식 32 medium · H1 56 bold(그림자 0 0 24 / 45%) · 사실 문장 18 · 간격 10 · 버튼 40 아래.
   알약: --hero-pill-bg(#313131) · r40 · px20 py10 · 글자 20 medium 흰색 + 화살표 18(24 상자). 색은 토큰만(§15). */
.section-hero--plain {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(560px, 46.875vw, 900px);
    padding: clamp(72px, 6vw, 120px) 0;
    overflow: hidden;
    isolation: isolate;
    background-color: color-mix(in srgb, var(--mood-text) 60%, #000);
    color: var(--mood-on-overlay, #fff);
    text-align: center;
}

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

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

/* 사진 위 덮개 — 피그마의 두 번째 레이어(회색 60%)를 단색으로 */
.section-hero--plain::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--hero-overlay, rgba(0, 0, 0, 0.38));
    pointer-events: none;
}

.section-hero--plain .section-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 0.52vw, 10px);
    transform: translateY(clamp(0px, 0.83vw, 16px));
}

.section-hero--plain .section-hero__eyebrow {
    margin: 0;
    font-size: clamp(1.125rem, 1.67vw, 2rem);      /* 32px(1920) */
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
}

.section-hero--plain .section-hero__title {
    margin: 0;
    font-family: var(--mood-body-ff);
    font-size: clamp(2rem, 2.92vw, 3.5rem);        /* 32 → 56px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: inherit;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
    word-break: keep-all;
    text-wrap: balance;
}

.section-hero--plain .section-hero__subtitle {
    margin: 0;
    max-width: 40em;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

.section-hero--plain .section-hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: clamp(24px, 2.08vw, 40px);
}

.section-hero--plain .section-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 20px;
    border-radius: 40px;
    background-color: var(--hero-pill-bg, #313131);
    color: #fff;
    font-size: clamp(1rem, 1.05vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.025em;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
}

.section-hero--plain .section-hero__pill:hover,
.section-hero--plain .section-hero__pill:focus-visible {
    background-color: color-mix(in srgb, var(--hero-pill-bg, #313131) 80%, #fff);
}

.section-hero--plain .section-hero__pill:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

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

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

@media (max-width: 767px) {
    .section-hero--plain {
        min-height: 0;
        padding: 104px 0 72px;
    }
    .section-hero--plain .section-hero__inner { transform: none; }
    .section-hero--plain .section-hero__pill { min-height: 48px; }
}


/* === S15 S15 === */
/* S15 facility-gallery — 정교한치과 전용 슬라이더(2026-10-06 피그마 60:2008).
   기준 1920×900: 상단 171, 제목 56 bold #222 · 리드 18(간격 10) → 40 → 카드 1200×510 r20 그림자(0 4 20 / 10%) 가운데, 좌우 72px 네비(간격 48).
   캡션 배지: 좌하단, w120 p10, #222 면, 흰 18, 모서리 좌하·우상 20. 바탕 #faf8f5 + 질감 overlay. */
.section-facility--slider {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8.9vw, 171px) 0 clamp(48px, 3.1vw, 60px);   /* 피그마 900 = 171 + 카피 120 + 40 + 카드 510 + 59 */
    background-color: var(--facility-bg, #faf8f5);
    color: var(--mood-text);
    overflow: hidden;
}

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

.section-facility--slider .section-facility__inner {
    max-width: 1520px;                        /* 네비(72) + 간격(48) + 카드 1200 + 간격 + 네비 = 1440 + 패딩 */
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 2.08vw, 40px);
}

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

.section-facility--slider .section-facility__title {
    margin: 0;
    font-family: var(--mood-body-ff);
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #222;
}

.section-facility--slider .section-facility__head .section-facility__subtitle {
    margin: 0;
    max-width: 64em;                         /* 공용 p 최대폭(36em) 해제 — 시안은 한 줄 */
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #222;
    word-break: keep-all;
}

/* 슬라이더 — 1장 보기, 카드 폭 1200 가운데 */
.section-facility--slider .section-facility__slider {
    --slider-per: 1;
    --slider-gap: 24px;
    /* 2026-10-08 버튼 세로 중앙 — 공용 .snap-slider 의 기본값(195/345, 카드형)이 그대로라 버튼이 이미지 중앙에서 어긋났다. 이 슬라이더의 이미지 비율로 맞춘다 */
    --slider-media-ratio: calc(510 / 1200);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-facility--slider .section-facility__item {
    position: relative;
    margin: 0;
}

.section-facility--slider .section-facility__img-wrap {
    aspect-ratio: 1200 / 510;
    border-radius: 20px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--mood-text) 8%, #fff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.section-facility--slider .section-facility__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 캡션 배지 — img-wrap 안(카드 r20 에 좌하단이 깎임) · 우상단만 20 (2026-10-06 사용자 지정 0 20px 0 0) · p10 + 18/1.8 = 52px. monotone grammar 의 figcaption 규칙(p0 12px)보다 우선하도록 [data-mood] 를 붙인다 */
[data-mood] .section-facility--slider .section-facility__caption,
.section-facility--slider .section-facility__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 120px;
    margin: 0;
    padding: 10px;
    border-radius: 0 20px 0 0;
    background-color: #222;
    color: #fff;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.03em;
    text-align: center;
    z-index: 1;
}

/* 네비 — 72px 흰 원 + #726558 테두리, 카드 밖 48px */
.section-facility--slider .snap-slider__nav {
    width: 72px;
    height: 72px;
    border: 1px solid var(--qm-color, #726558);
    background-color: #fff;
    color: var(--qm-color, #726558);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
    box-shadow: none;
}
.section-facility--slider .snap-slider__nav img { width: 24px; height: 24px; }

/* 2026-10-08 사용자: 버튼을 이미지 높이의 세로 중앙으로.
   공용 규칙이 top = 이미지 높이/2(cqw 계산) + margin-top = -버튼 반지름 으로 중앙을 잡는다. 여기서는 버튼을 72 로 고정하므로 margin-top 도 -36 으로 고정한다
   (공용 margin 은 clamp(56,3.75vw,72)/2 라 1920 미만에서 72 버튼과 어긋났다). 이전의 top:50% + translateY(-50%) 는 공용 margin-top 과 겹쳐 36px 위로 떴다 → 제거 */
@media (min-width: 1024px) {
    .section-facility--slider .snap-slider__nav { margin-top: -36px; }
}

@media (min-width: 1440px) {
    .section-facility--slider .snap-slider__nav--prev { left: -120px; }    /* 72 + 48 */
    .section-facility--slider .snap-slider__nav--next { right: -120px; }
}

@media (max-width: 767px) {
    .section-facility--slider .section-facility__img-wrap { aspect-ratio: 4 / 3; border-radius: 16px; }
    [data-mood] .section-facility--slider .section-facility__caption { min-width: 96px; padding: 6px 10px; border-radius: 0 16px 0 0; }
    .section-facility--slider .snap-slider__nav { width: 48px; height: 48px; }
    .section-facility--slider .snap-slider__nav img { width: 18px; height: 18px; }
}


/* === S13 S13 === */
/* S13 guide-teaser — 정교한치과 전용 페이저 핀(2026-10-06 피그마 62:2116).
   기준 1920×950: 좌측 열 x=247 w=500 top 172(아이브로 16 · 제목 56 2줄 · 리드 18, 간격 10 → 40 → 페이저 h60 r20 간격 20),
   우측 열 w=710 right 240(이미지 710×195 r20 → 20 → 제목 24 bold → 본문 16 medium → 20 → 흰 버튼 r12, 패널 간격 60).
   배경: #726558 + 질감(overlay, 아랫변) + 밝은 사진 20% + 위쪽 #333 hard-light 그라데이션. 색은 시안 고정값(거래처 전용). */
.section-guide--paged {
    position: relative;
    isolation: isolate;
    padding: clamp(88px, 8.96vw, 172px) 0 clamp(80px, 6.25vw, 120px);
    background-color: #726558;
    color: #fff;
    overflow: clip;                          /* hidden 은 스크롤 박스가 되어 sticky 가 섹션 안에 갇힌다(좌측 열이 132px 밀리고 고정 안 됨) — clip 은 배경만 자른다 */
    counter-reset: guide-pager guide-panel;
}

.section-guide--paged .section-guide__bg-photo,
.section-guide--paged .section-guide__bg-texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.section-guide--paged .section-guide__bg-photo { z-index: -3; opacity: 0.2; object-position: center 40%; }
.section-guide--paged .section-guide__bg-texture { z-index: -2; mix-blend-mode: overlay; object-position: center bottom; }
/* 위쪽 어둡게(#333 hard-light 29%→113%) + 아래로 갈수록 바탕색 */
.section-guide--paged::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0.55) 0%, rgba(51, 51, 51, 0) 70%);
    pointer-events: none;
}

.section-guide--paged .section-guide__grid {
    max-width: 1513px;                       /* 좌 247 · 우 240 */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
}

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

.section-guide--paged .section-guide__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-guide--paged .section-guide__heading {
    margin: 0 0 calc(-1 * clamp(14px, 1.56vw, 30px));
    max-width: 500px;
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: inherit;
    word-break: keep-all;
}

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

.section-guide--paged .section-guide__pager {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.04vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-guide--paged .section-guide__pager li { counter-increment: guide-pager; }

.section-guide--paged .section-guide__pager-btn {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 10px 10px 10px 20px;
    border-radius: 20px;
    background-color: rgba(79, 69, 59, 0.5);
    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-guide--paged .section-guide__pager-btn::before {
    content: counter(guide-pager, decimal-leading-zero) ' ';
    margin-right: 0.35em;
    font-weight: 700;
}
.section-guide--paged .section-guide__pager-btn:hover,
.section-guide--paged .section-guide__pager-btn:focus-visible { background-color: rgba(79, 69, 59, 0.75); }
.section-guide--paged .section-guide__pager-btn.is-active { background-color: #4f453b; }
.section-guide--paged .section-guide__pager-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

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

.section-guide--paged .section-guide__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    counter-increment: guide-panel;
    scroll-margin-top: calc(var(--header-h, 64px) + 40px);
}

.section-guide--paged .section-guide__panel-media {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 710 / 195;
    background-color: rgba(255, 255, 255, 0.1);
}
.section-guide--paged .section-guide__panel-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.section-guide--paged .section-guide__panel-title {
    margin: 0;
    font-family: var(--mood-body-ff);
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: -0.02em;
    color: inherit;
}
.section-guide--paged .section-guide__panel-title::before { content: counter(guide-panel, decimal-leading-zero) ' '; }

.section-guide--paged .section-guide__panel-body {
    margin: 0 0 20px;
    max-width: none;
    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;
}

.section-guide--paged .section-guide__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 17px 8px 10px;              /* 우 10 + 아이콘 상자(32) 안 여백 7 */
    border-radius: 12px;
    background-color: #fff;
    color: #726558;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.045em;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.section-guide--paged .section-guide__more img,
.section-guide--paged .section-guide__more .icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s; }
.section-guide--paged .section-guide__more:hover img { transform: translateX(3px); }
.section-guide--paged .section-guide__more:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1023px) {
    /* 한 열 — 페이저는 패널 번호와 중복이라 숨김 */
    .section-guide--paged .section-guide__pager { display: none; }
}

@media (min-width: 1024px) {
    .section-guide--paged .section-guide__grid {
        grid-template-columns: minmax(0, 500px) minmax(0, 710px);
        justify-content: space-between;
        align-items: start;
        gap: clamp(40px, 6vw, 120px);
    }
    .section-guide--paged .section-guide__fixed {
        position: sticky;
        top: calc(var(--header-h, 64px) + 40px);
    }
}


/* === 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: var(--doctors-card-w, 858px);   /* 하늘수 155:552 = 1000 */
    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: var(--doctors-name-tracking, 0.3em);   /* 돌다리 시안 "이 홍 석" — 글자 사이를 띄운 표기를 자간으로. 하늘수 = 0 */
}

.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: var(--doctors-wordmark-pad, clamp(120px, 9vw, 176px)); }
.section-doctors--card .section-doctors__wordmark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--doctors-wordmark-bottom, 0);
    z-index: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--doctors-wordmark-size, clamp(1.25rem, 3.125vw, 3.75rem));   /* 하늘수 155:552 = 180px(히어로와 같은 규격) */
    font-weight: var(--doctors-wordmark-weight, 700);
    letter-spacing: var(--doctors-wordmark-tracking, 0.12em);
    line-height: 1;
    color: var(--doctors-wordmark-color, #fff);
    opacity: var(--doctors-wordmark-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; }

/* ── 하늘수 피그마 155:552 옵션 ──
   sections.S14.badge_style: soft — 뱃지를 테두리 알약 대신 크림(accent-soft) 면 + 본문색 글자, 가로 나열. 항목은 doctors[].badges (builder)
   sections.S14.photo_style: framed — 인물을 340×364 r20 액자(연회색 그라데이션) 안에 상단 정렬(카드 바닥 밀착 대신)
   sections.S14.show_more: false — "상세 약력 더보기" 버튼 숨김(이름이 상세 링크가 된다) */
.section-doctors--badge-soft .section-doctors__badges { flex-direction: row; flex-wrap: wrap; }
.section-doctors--badge-soft .section-doctors__badge {
    border-color: transparent;
    background-color: var(--mood-accent-soft, color-mix(in srgb, var(--mood-accent) 18%, #fff));
    color: var(--mood-text);
}
.section-doctors--has-mark.section-doctors--badge-soft .section-doctors__badge-mark { width: 24px; height: 24px; }
.section-doctors--badge-soft .section-doctors__badge--plain .section-doctors__badge-mark { display: none; }

.section-doctors--card .section-doctors__figure--framed {
    align-self: flex-start;
    width: clamp(200px, 17.7vw, 340px);
    aspect-ratio: 340 / 364;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(128deg, rgba(217, 217, 217, 0) 23%, #d9d9d9 166%);
}
.section-doctors--card .section-doctors__figure--framed img {
    width: 91.5%;
    height: 100%;
    max-height: none;
    margin: 0 auto;
    object-fit: cover;
    object-position: center top;
}
.section-doctors--card .section-doctors__name a { color: inherit; text-decoration: none; }
.section-doctors--card .section-doctors__name a:hover,
.section-doctors--card .section-doctors__name a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
    .section-doctors--card .section-doctors__figure--framed { align-self: center; width: min(240px, 70%); }
}

/* ── 정교한치과 전용 슬라이더판 (2026-10-06 피그마 62:2286) ──
   바탕 #faf8f5 · 제목 56 semibold #313131 (171) → 52 → 카드 1000×510(301) 가운데 · 좌우 72px 네비(#726558 테두리, 1440 폭 양끝).
   카드: 흰 면 · #726558 1px · r20 · 그림자 0 4 10 / 10% · px60 py40. 이름 24(직함 regular + 이름 bold 자간 0.3em) · 뱃지 테두리 알약(18 semibold #726558) · 이력 16 · 버튼 345 #726558. 인물 378×466 카드 바닥. */
.section-doctors--card.section-doctors--slider {
    padding: clamp(80px, 8.9vw, 171px) 0 clamp(48px, 4.6vw, 89px);
    background-color: #faf8f5;
    color: #313131;
}
.section-doctors--slider .section-doctors__inner { max-width: 1520px; gap: clamp(32px, 2.7vw, 52px); }
.section-doctors--slider .section-doctors__heading { font-family: var(--mood-body-ff); font-weight: 600; color: #313131; }
.section-doctors--slider .section-doctors__slider { --slider-per: 1; --slider-gap: 40px; width: 100%; max-width: 1000px; margin: 0 auto; }
.section-doctors--slider .section-doctors__list { max-width: none; flex-direction: row; gap: var(--slider-gap); margin: 0; padding: 0; }   /* 공용 doctors-c 의 column 을 되돌린다 */
.section-doctors--slider .section-doctors__head { max-width: none; }
.section-doctors--slider .section-doctors__heading { white-space: nowrap; }
.section-doctors--slider .snap-slider__slide { list-style: none; }

.section-doctors--slider .section-doctors__card {
    width: 100%;
    min-height: 510px;
    padding: 40px 60px;
    border: 1px solid #726558;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #313131;
}
.section-doctors--slider .section-doctors__name { color: #313131; }
.section-doctors--slider .section-doctors__badge { border-color: #726558; color: #726558; }
.section-doctors--slider .section-doctors__credentials { color: #313131; }
.section-doctors--slider .section-doctors__more {
    width: 345px;
    padding: 10px 17px 10px 20px;
    background-color: #726558;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}
.section-doctors--slider .section-doctors__more:hover { background-color: color-mix(in srgb, #726558 85%, #000); }
.section-doctors--slider .section-doctors__figure {
    width: clamp(220px, 19.7vw, 378px);
    margin: 0 0 -40px 0;                   /* 카드 바닥(py40) 상쇄 — 시안: top 42 · 466 높이 = 카드 바닥 밀착 */
}
/* 시안 3:1344 크롭: 상자 378×466 안에 사진을 높이 136%(632px)로 키워 상단 정렬 — 머리~허리만 보이고 아래는 카드 바닥에서 잘린다(교정원장은 112%) */
.section-doctors--slider .section-doctors__figure { overflow: hidden; display: flex; justify-content: center; align-items: flex-start; height: clamp(300px, 24.3vw, 466px); }
.section-doctors--slider .section-doctors__figure img { width: auto; height: 136%; max-height: none; object-fit: contain; object-position: center top; }
.section-doctors--slider .snap-slider__slide:nth-child(2) .section-doctors__figure img { height: 112%; margin-top: 2.7%; }

/* 네비 — 72px 흰 원 + #726558 테두리, 카드 밖 148px(1440 폭 양끝) */
.section-doctors--slider .snap-slider__nav {
    width: 72px;
    height: 72px;
    border: 1px solid #726558;
    background-color: #fff;
    color: #726558;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
    box-shadow: none;
}
.section-doctors--slider .snap-slider__nav img { width: 24px; height: 24px; }
@media (min-width: 1440px) {
    .section-doctors--slider .snap-slider__nav { top: 50%; transform: translateY(-50%); }
    .section-doctors--slider .snap-slider__nav--prev { left: -220px; }    /* (1440 − 1000)/2 = 220 */
    .section-doctors--slider .snap-slider__nav--next { right: -220px; }
}
@media (max-width: 767px) {
    .section-doctors--slider .section-doctors__card { min-height: 0; padding: 24px 20px; }
    .section-doctors--slider .section-doctors__figure { margin: 0; width: min(240px, 70%); }
    .section-doctors--slider .section-doctors__more { width: 100%; }
    .section-doctors--slider .snap-slider__nav { width: 48px; height: 48px; }
}

/* monotone grammar 가 제목 헤어라인·이력 대시를 얹는다 — 시안(62:2286)은 헤어라인 없음 · 점 목록 */
[data-mood] .section-doctors--slider .section-doctors__heading { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; text-align: center; }
[data-mood] .section-doctors--slider .section-doctors__credentials { list-style: disc; padding-left: 24px; }
[data-mood] .section-doctors--slider .section-doctors__credentials li::before { content: none; }


/* === S05 philosophy-b === */
/* philosophy-b — 정교한치과 전용 4열 사진 카드(2026-10-06 피그마 62:2404).
   기준 1920×900: 제목 블록 가운데 175(아이브로 16 · 제목 56 semibold · 리드 18, 간격 10) → 카드 행 377(폭 1440, 345×4 + 간격 20).
   카드: 사진 345×195 r20 → 32 → 제목 24 bold → 본문 16 medium lh1.8. 배경 #726558 + 사진 50%. 흰 글자. */
.section-philosophy--photo {
    position: relative;
    isolation: isolate;
    padding: clamp(88px, 9.1vw, 175px) 0 clamp(80px, 6.3vw, 120px);
    background-color: #726558;
    color: #fff;
    overflow: clip;
}

.section-philosophy--photo .section-philosophy__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;                              /* 사용자 제공 완성판(갈색+빛결 합성 완료) — 덮개 없이 그대로 */
    pointer-events: none;
}

.section-philosophy--photo .section-philosophy__inner {
    max-width: 1520px;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 2.6vw, 50px);
}

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

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

[data-mood] .section-philosophy--photo .section-philosophy__heading,
.section-philosophy--photo .section-philosophy__heading {
    margin: 0;
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
    padding: 0;
    border: 0;
}

[data-mood] .section-philosophy--photo .section-philosophy__intro,
.section-philosophy--photo .section-philosophy__intro {
    margin: 0;
    max-width: none;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
}

.section-philosophy--photo .section-philosophy__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 1.04vw, 20px) 20px;
}

.section-philosophy--photo .section-philosophy__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.section-philosophy--photo .section-philosophy__card:hover { box-shadow: none; }

.section-philosophy--photo .section-philosophy__card-media {
    aspect-ratio: 345 / 195;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: clamp(20px, 1.67vw, 32px);
    background-color: rgba(255, 255, 255, 0.1);
}
.section-philosophy--photo .section-philosophy__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

[data-mood] .section-philosophy--photo .section-philosophy__card-title,
.section-philosophy--photo .section-philosophy__card-title {
    margin: 0;
    font-family: var(--mood-body-ff);
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #fff;
}

[data-mood] .section-philosophy--photo .section-philosophy__card-body,
.section-philosophy--photo .section-philosophy__card-body {
    margin: 0;
    font-size: clamp(0.9375rem, 0.83vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #fff;
    word-break: keep-all;
}

@media (min-width: 640px) {
    .section-philosophy--photo .section-philosophy__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .section-philosophy--photo .section-philosophy__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* monotone grammar 가 .section-philosophy__card 에 번호(::before)·상단 패딩 36·간격 56·테두리를 얹는다 — 시안(62:2404)은 사진 카드라 전부 되돌린다 */
[data-mood] .section-philosophy--photo .section-philosophy__cards { gap: 20px; padding: 0; border: 0; }
[data-mood] .section-philosophy--photo .section-philosophy__card { display: flex; flex-direction: column; padding: 0; border: 0; background: none; counter-increment: none; }   /* grammar 의 2열 grid(번호 열 56px) 도 되돌린다 — 390 에서 카드가 들여쓰기됐다 */
[data-mood] .section-philosophy--photo .section-philosophy__card::before { content: none; }
[data-mood] .section-philosophy--photo .section-philosophy__card > * { margin: 0; grid-column: auto; }
[data-mood] .section-philosophy--photo .section-philosophy__card-media { margin-bottom: clamp(20px, 1.67vw, 32px); }


/* === S06 S06-b === */
/* S06-b — 정교한치과 전용 장비 섹션(2026-10-06 피그마 62:2519).
   기준 1920×900: 좌 열 x240 w487 top222(아이브로 16 · 제목 56 · 리드 18, 간격 10 → 43 → 네비 72×2 간격 16), 우 열 x836 w1084 top222(카드 350² r20 그림자 → 20 → 이름 24 bold → 설명 16, 카드 간격 80).
   바탕 #f3ede5 + 질감 20% multiply. 글자 #313131. */
.section-equipment--split {
    position: relative;
    isolation: isolate;
    padding: clamp(88px, 11.6vw, 222px) 0 clamp(80px, 8.3vw, 160px);
    background-color: #f3ede5;
    color: #313131;
    overflow: clip;
}

.section-equipment--split .section-equipment__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.section-equipment--split .section-equipment__inner {
    max-width: 1760px;                        /* 좌 240 ~ 우 끝(넘침 잘림) */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    position: static;                         /* .snap-slider 의 relative 는 네비 absolute 용 — 여기선 네비가 흐름 안에 있다 */
}

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

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

[data-mood] .section-equipment--split .section-equipment__title,
.section-equipment--split .section-equipment__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #313131;
    text-align: left;
    white-space: nowrap;
}

[data-mood] .section-equipment--split .section-equipment__subtitle,
.section-equipment--split .section-equipment__subtitle {
    margin: 0;
    max-width: none;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #313131;
    text-align: left;
    word-break: keep-all;
}

/* 네비 — 흐름 안 72px 흰 원 2개(테두리 없음), 리드 아래 43 */
.section-equipment--split .section-equipment__nav {
    display: flex;
    gap: 16px;
    margin-top: clamp(20px, 2.24vw, 33px);
}
.section-equipment--split .snap-slider__nav {
    position: static;
    transform: none;
    width: 72px;
    height: 72px;
    margin: 0;
    border: 0;
    background-color: #fff;
    color: #726558;
    box-shadow: none;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.06));
}
.section-equipment--split .snap-slider__nav img { width: 24px; height: 24px; }

/* 우 열 — 정사각 카드 슬라이더(넘침 잘림) */
.section-equipment--split .section-equipment__slider {
    --slider-gap: clamp(24px, 4.17vw, 80px);
    --slider-per: 1.25;
    min-width: 0;
}
.section-equipment--split .section-equipment__track { gap: var(--slider-gap); margin: 0; padding: 0 0 12px; }
.section-equipment--split .section-equipment__slide { flex: 0 0 min(350px, 80vw); display: flex; flex-direction: column; }

.section-equipment--split .section-equipment__media {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #e9e9e9;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.section-equipment--split .section-equipment__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-equipment--split .section-equipment__media--empty { background-color: #e9e9e9; }

.section-equipment--split .section-equipment__name {
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--mood-body-ff);
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #313131;
    word-break: keep-all;
}
.section-equipment--split .section-equipment__name small { font-size: 0.75em; font-weight: inherit; }

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

@media (min-width: 1024px) {
    .section-equipment--split .section-equipment__inner {
        grid-template-columns: minmax(0, 487px) minmax(0, 1fr);
        column-gap: clamp(40px, 5.7vw, 109px);   /* 727 → 836 */
        align-items: start;
    }
    .section-equipment--split .section-equipment__head { position: sticky; top: calc(var(--header-h, 64px) + 40px); }
}

/* monotone grammar 가 .section-equipment > .container 를 자체 2열 grid(5fr/7fr, align-items end)로 바꾸고 자식 배치를 강제한다 — 같은 특이성이라 grammar(뒤에 로드)가 이겼다 → 클래스를 하나 더 붙여 되돌린다 */
@media (min-width: 1024px) {
    [data-mood] .section-equipment.section-equipment--split > .container {
        display: grid;
        grid-template-columns: minmax(0, 487px) minmax(0, 1fr);
        grid-template-rows: auto;
        column-gap: clamp(40px, 5.7vw, 109px);
        row-gap: 0;
        align-items: start;
        padding-left: clamp(40px, 8.33vw, 160px);   /* 좌 열 시작 240(1920) */
    }
    [data-mood] .section-equipment.section-equipment--split > .container > .section-equipment__head { grid-column: 1; grid-row: 1; margin: 0; }
    [data-mood] .section-equipment.section-equipment--split > .container > .section-equipment__slider { grid-column: 2; grid-row: 1; margin: 0; }
}
[data-mood] .section-equipment.section-equipment--split > .container > * { margin-top: 0; }
/* grammar 가 장비명에 헤어라인(border-top + 패딩 16 + 마진 12)을 얹는다 — 시안(62:2519)은 사진 아래 20 에 바로 이름 */
[data-mood] .section-equipment.section-equipment--split .section-equipment__name { border: 0; padding: 0; margin: 0 0 10px; }
[data-mood] .section-equipment.section-equipment--split .section-equipment__desc { border: 0; padding: 0; margin: 0; }
/* 2026-10-06 사용자 지시: 슬라이드가 우측 컨테이너(1760 끝 = 1800)를 넘어 화면 끝까지 보이게 — 트랙을 뷰포트 오른쪽 끝까지 늘린다 */
@media (min-width: 1024px) {
    [data-mood] .section-equipment.section-equipment--split > .container > .section-equipment__slider {
        /* 그리드 2열 폭 + 컨테이너 오른쪽 바깥(여백 40 + 1760 밖 남는 폭의 절반) = 화면 오른쪽 끝. 1440 처럼 컨테이너가 꽉 찬 폭에서는 패딩 40 만큼만 */
        width: calc(100% + max(40px, (100vw - 1760px) / 2 + 40px));
        max-width: none;
    }
    .section-equipment--split .section-equipment__track { padding-right: 40px; }
}


/* === S09 treatments-b === */
/* treatments-b — 정교한치과 전용 진료 안내 탭(2026-10-06 피그마 63:2656).
   기준 1920×900: 제목 56 semibold #313131 (172) → 43 → 탭 행 h50(폭 1440 균등 5칸, 밑줄 1px: 활성 #726558 / 비활성 #aaa, 글자 18 semibold) → 43 →
   패널(폭 1440, 양끝 정렬): 좌 제목 24 bold 1.5 · 세부 나열 16 medium 1.8 (간격 10) → 40 → 흰 알약 r12 "자세히 보기" (16 #726558 + 화살표) / 우 사진 800×400 r20 그림자. 바탕 #faf8f5. */
.section-treatments-tab--split {
    padding: clamp(80px, 8.96vw, 172px) 0 clamp(80px, 7.3vw, 140px);
    background-color: #faf8f5;
    color: #313131;
}

.section-treatments-tab--split .section-treatments-tab__inner {
    max-width: 1520px;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 2.24vw, 43px);
}

[data-mood] .section-treatments-tab--split .section-treatments-tab__title,
.section-treatments-tab--split .section-treatments-tab__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #313131;
    text-align: center;
}

/* 탭 — 균등 5칸, 밑줄만 */
[data-mood] .section-treatments-tab--split .section-treatments-tab__tabs,
.section-treatments-tab--split .section-treatments-tab__tabs {
    display: flex;
    justify-content: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow-x: auto;
}
[data-mood] .section-treatments-tab--split .section-treatments-tab__tab,
.section-treatments-tab--split .section-treatments-tab__tab {
    flex: 1 0 auto;
    min-height: 50px;
    margin: 0;
    padding: 10px 20px;
    border: 0;
    border-bottom: 1px solid #aaa;
    border-radius: 0;
    background: none;
    color: #aaa;
    font-family: var(--mood-body-ff);
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.04em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
[data-mood] .section-treatments-tab--split .section-treatments-tab__tab[aria-selected="true"],
.section-treatments-tab--split .section-treatments-tab__tab[aria-selected="true"] {
    color: #726558;
    border-bottom-color: #726558;
}
.section-treatments-tab--split .section-treatments-tab__tab:hover { color: #726558; }
.section-treatments-tab--split .section-treatments-tab__tab:focus-visible { outline: 2px solid #726558; outline-offset: -2px; }

/* 패널 — 좌 글 / 우 사진 */
.section-treatments-tab--split .section-treatments-tab__panels { margin: 0; padding: 0; }
[data-mood] .section-treatments-tab--split .section-treatments-tab__panel,
.section-treatments-tab--split .section-treatments-tab__panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0;
    padding: 0;
    border: 0;
}
.section-treatments-tab--split .section-treatments-tab__panel[hidden] { display: none; }

.section-treatments-tab--split .section-treatments-tab__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
[data-mood] .section-treatments-tab--split .section-treatments-tab__hook,
.section-treatments-tab--split .section-treatments-tab__hook {
    margin: 0;
    max-width: 24em;
    font-family: var(--mood-body-ff);
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #313131;
    word-break: keep-all;
}
[data-mood] .section-treatments-tab--split .section-treatments-tab__desc,
.section-treatments-tab--split .section-treatments-tab__desc {
    margin: 0;
    max-width: 36em;
    font-size: clamp(0.9375rem, 0.83vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #313131;
    word-break: keep-all;
}
[data-mood] .section-treatments-tab--split .section-treatments-tab__link,
.section-treatments-tab--split .section-treatments-tab__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(20px, 1.56vw, 30px);
    padding: 8px 17px 8px 10px;
    border-radius: 12px;
    background-color: #fff;
    color: #726558;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.045em;
    text-decoration: none;
    transition: box-shadow 0.2s;
}
.section-treatments-tab--split .section-treatments-tab__link img,
.section-treatments-tab--split .section-treatments-tab__link .icon { width: 18px; height: 18px; transition: transform 0.2s; }
.section-treatments-tab--split .section-treatments-tab__link:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.section-treatments-tab--split .section-treatments-tab__link:hover img { transform: translateX(3px); }

.section-treatments-tab--split .section-treatments-tab__media {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
.section-treatments-tab--split .section-treatments-tab__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
    /* 위 [data-mood] 패널 규칙(column)·grammar 의 max-width 64ch 보다 특이성이 높아야 가로 배치가 적용된다 */
    [data-mood] .section-treatments-tab--split .section-treatments-tab__panel,
    .section-treatments-tab--split .section-treatments-tab__panel {
        max-width: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
    }
    .section-treatments-tab--split .section-treatments-tab__text { flex: 1 1 auto; }
    .section-treatments-tab--split .section-treatments-tab__media { flex: 0 0 min(800px, 55%); }
}


/* === S10 S10-a === */
/* S10-a — 정교한치과 전용 세부 진료 카드(2026-10-06 피그마 63:2772).
   기준 1920×900: 제목 56 semibold 흰색 (172) · 리드 18 lh1.6 (간격 20) → 40 → 카드 행(폭 1440 가운데, 340×400 ×4, 간격 20).
   카드: 흰 면 · #726558 1px · r10 · p30 · 그림자 0 4 10 / 10%. 제목 28 bold #726558 가운데 + 밑줄(pb20) → 10 → 링크 16 medium lh2.4 #313131 가운데.
   배경: 사진 + 위 #333 hard-light → 아래 #726558 그라데이션. */
.section-chips--cards {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8.96vw, 172px) 0 clamp(80px, 7.3vw, 140px);
    background-color: #726558;
    color: #fff;
    overflow: clip;
}

.section-chips--cards .section-chips__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
/* 위쪽 어둡게(#333) → 아래 바탕색(#726558) — 피그마 29%→113% 두 겹 그라데이션의 근사 */
.section-chips--cards::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 2026-10-06 시안 픽셀 실측(상단 94,94,94 · 중단 109,107,105 · 하단 123,113,104)에 맞춰 농도 조정 */
    background: linear-gradient(180deg, rgba(51, 51, 51, 0.9) 0%, rgba(51, 51, 51, 0.78) 29%, rgba(114, 101, 88, 0.93) 100%);
    pointer-events: none;
}

[data-mood] .section-chips.section-chips--cards > .container,
.section-chips--cards .section-chips__inner {
    max-width: 1520px;
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* grammar 의 `align-items: end`(5fr/7fr 그리드용)가 flex column 에서 자식을 오른쪽으로 모아 폭을 줄인다 */
    gap: clamp(28px, 2.08vw, 40px);
    padding-left: 40px;
    padding-right: 40px;
}

.section-chips--cards .section-chips__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.04vw, 20px);
    text-align: center;
    margin: 0;
}

[data-mood] .section-chips--cards .section-chips__title,
.section-chips--cards .section-chips__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
}

[data-mood] .section-chips--cards .section-chips__subtitle,
.section-chips--cards .section-chips__subtitle {
    margin: 0;
    max-width: none;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.6;
    letter-spacing: -0.04em;
    color: #fff;
    text-align: center;
    word-break: keep-all;
}

[data-mood] .section-chips--cards .section-chips__grid,
.section-chips--cards .section-chips__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
}

.section-chips--cards .section-chips__card {
    flex: 0 1 340px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px;
    border: 1px solid #726558;
    border-radius: 10px;
    background-color: #fff;
    color: #313131;
}

.section-chips--cards .section-chips__card-title {
    width: 100%;
    margin: 0;
    padding: 0 0 20px;
    border-bottom: 1px solid #726558;
    font-family: var(--mood-body-ff);
    font-size: clamp(1.375rem, 1.46vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
    color: #726558;
    text-align: center;
}

.section-chips--cards .section-chips__list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

[data-mood] .section-chips--cards .section-chips__item,
.section-chips--cards .section-chips__item {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2.4;
    letter-spacing: -0.03em;
    color: #313131;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}
.section-chips--cards .section-chips__item:hover,
.section-chips--cards .section-chips__item:focus-visible { color: #726558; background-color: #faf8f5; transform: none; }

@media (max-width: 639px) {
    .section-chips--cards .section-chips__card { flex-basis: 100%; min-height: 0; }
    .section-chips--cards .section-chips__item { line-height: 2.75; }   /* 터치 44px */
}


/* === S07 S07-c === */
/* S07-c — 정교한치과 전용 고민 매칭 슬라이더(2026-10-06 피그마 65:2882 · 에셋 1:1001).
   기준 1920×900: 밝은 바탕(#efeae8 실측) + 천 질감 사진 overlay 합성. 상단 172 · 제목 블록 가운데(아이브로 18 · 제목 56 bold · 리드 18, 간격 10) → 40 →
   슬라이더 w=1440(카드 345 × 4 노출 + 간격 20, 5장). 카드 = 사진 345×195 r20(검정 40% 덮개 + 고민 문장 24 bold 흰색 가운데) → 20 → 알약 h48 r40 #908373 흰 글자 + 흰 화살표 → 20 → 설명 16 medium lh1.8 #5c5c5c.
   네비 = 흰 원 72, 카드 양 끝에 반쯤 걸침(좌 205 / 우 1647), 사진 세로 중앙. 글자색 #222. 슬라이더 골격은 _shared/common.css .snap-slider. */
.section-concern--slider {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 8.96vw, 172px) 0 clamp(80px, 7.3vw, 140px);
    background-color: #efeae8;
    color: #222;
    overflow: clip;
}

.section-concern--slider .section-concern__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    mix-blend-mode: overlay;
    opacity: 0.9;
    pointer-events: none;
}

/* grammar 의 `> .container` 5fr/7fr 그리드 + align-items:end 보다 특이성을 높여 세로 flex 로 되돌린다 */
[data-mood] .section-concern.section-concern--slider > .container,
.section-concern--slider .section-concern__inner {
    max-width: 1520px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(28px, 2.08vw, 40px);
    padding-left: 40px;
    padding-right: 40px;
}

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

.section-concern--slider .section-concern__eyebrow {
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #222;
}

[data-mood] .section-concern--slider .section-concern__title,
.section-concern--slider .section-concern__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--mood-body-ff);
    font-weight: 700;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #222;
    text-align: center;
}

[data-mood] .section-concern--slider .section-concern__subtitle,
.section-concern--slider .section-concern__subtitle {
    max-width: none;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #222;
    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: #908373;
}

.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.02em;
    color: #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;
    border-radius: 40px;
    background-color: #908373;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.03em;
    text-decoration: none;
    transition: background-color 0.2s;
}

.section-concern--slider .section-concern__link img,
.section-concern--slider .section-concern__link .icon {
    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: #726558; }
.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 #726558; 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: #5c5c5c;
    word-break: keep-all;
}

/* 네비 — 흰 원 72, 사진 세로 중앙, 카드 끝에 반쯤 걸침 */
.section-concern--slider .snap-slider__nav {
    width: 56px;
    height: 56px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.section-concern--slider .snap-slider__nav img { width: 24px; height: 24px; }
@media (min-width: 1280px) {
    .section-concern--slider .snap-slider__nav { width: 72px; height: 72px; }
    .section-concern--slider .snap-slider__nav--prev { left: -50px; }
    .section-concern--slider .snap-slider__nav--next { right: -48px; }
}


/* === S18 S18 === */
.section-reviews-out__title {
    text-align: center;
    font-family: var(--mood-body-ff);   /* 2026-10-06 정교한 — 노토세리프 대신 프리텐다드 */
    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-body-ff);   /* 2026-10-06 정교한 — 노토세리프 대신 프리텐다드 */
    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;
}


/* === S23 column-feed (SSR module) === */
/* column-feed.css — 칼럼 피드 섹션 스타일 (cards + list 2변형) */

.section-column-feed {
    background-color: var(--mood-bg);
}

.section-column-feed__title {
    font-family: var(--mood-body-ff);   /* 2026-10-06 정교한 — 노토세리프 대신 프리텐다드 */
    font-weight: var(--mood-heading-fw);
    text-align: center;
    color: var(--mood-text);
    margin-bottom: 8px;
}

.section-column-feed__subtitle {
    text-align: center;
    color: var(--mood-text-muted);
    margin-bottom: var(--mood-inner-gap);
}

/* === Cards 변형 (기본) === */

.section-column-feed__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 600px) {
    .section-column-feed__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .section-column-feed__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.section-column-feed__card {
    border-radius: var(--mood-radius);
    overflow: hidden;
    border: 1px solid var(--mood-border, rgba(0, 0, 0, 0.06));
    transition: box-shadow 0.2s, transform 0.2s;
}

.section-column-feed__card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.section-column-feed__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.section-column-feed__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--mood-bg-alt);
}

.section-column-feed__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.section-column-feed__card:hover .section-column-feed__thumb img {
    transform: scale(1.04);
}

.section-column-feed__body {
    padding: 20px;
}

.section-column-feed__cat {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mood-primary);
    background-color: color-mix(in srgb, var(--mood-primary) 8%, transparent);
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 10px;
}

.section-column-feed__card-title {
    font-family: var(--mood-body-ff);   /* 2026-10-06 정교한 — 노토세리프 대신 프리텐다드 */
    font-weight: var(--mood-heading-fw);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: var(--mood-text);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-column-feed__excerpt {
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-column-feed__date {
    font-size: 0.75rem;
    color: var(--mood-text-muted);
}

/* === List 변형 === */

.section-column-feed--list .section-column-feed__grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.section-column-feed--list .section-column-feed__link {
    display: flex;
    gap: 20px;
    align-items: center;
}

.section-column-feed--list .section-column-feed__thumb {
    flex-shrink: 0;
    width: 120px;
    aspect-ratio: 4 / 3;
    border-radius: var(--mood-radius);
}

@media (min-width: 600px) {
    .section-column-feed--list .section-column-feed__thumb {
        width: 160px;
    }
}

.section-column-feed--list .section-column-feed__body {
    padding: 8px 0;
}

/* === 더보기 === */

.section-column-feed__more-wrap {
    text-align: center;
    margin-top: 40px;
}

.section-column-feed__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mood-primary);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 12px 24px;
    border: 1.5px solid var(--mood-primary);
    border-radius: var(--mood-radius);
    transition: background-color 0.2s, color 0.2s;
    min-height: 44px;
}

.section-column-feed__more:hover {
    background-color: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
}

/* === 어두운 배경 변형(.section-column-feed--bg) — 2026-10-06 정교한: 사용자 배경(Downloads/따오기/hero_bnr.jpg 1920×1080, 타우프 웨이브, 평균 144,135,128)
   brand.backgrounds.column → img/bg-column-1600w.webp 가 있을 때 PHP 가 붙인다. 제목·리드 흰색, 카드는 흰 면으로 띄워 대비 확보 */
.section-column-feed--bg {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background-color: #8f8680;
    color: #fff;
}
.section-column-feed--bg .section-column-feed__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
[data-mood] .section-column-feed--bg .section-column-feed__title,
.section-column-feed--bg .section-column-feed__title { color: #fff; }
[data-mood] .section-column-feed--bg .section-column-feed__subtitle,
.section-column-feed--bg .section-column-feed__subtitle { color: rgba(255, 255, 255, 0.85); }
[data-mood] .section-column-feed--bg .section-column-feed__card,
.section-column-feed--bg .section-column-feed__card {
    background-color: #fff;
    border-color: transparent;
    color: var(--mood-text);
}
.section-column-feed--bg .section-column-feed__card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
[data-mood] .section-column-feed--bg .section-column-feed__more,
.section-column-feed--bg .section-column-feed__more {
    color: #fff;
    border-color: #fff;
}
.section-column-feed--bg .section-column-feed__more:hover { background-color: #fff; color: #726558; }


/* === S20 faq-a === */
/* 2026-10-06 정교한 — FAQ 는 세리프(--mood-heading-ff) 대신 프리텐다드(본문 글꼴) 사용 */
.section-faq__title {
    font-family: var(--mood-body-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-body-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 — 정교한치과 전용 오시는 길(2026-10-06 피그마 66:3208 · 마커 7:1499).
   기준 1920×1280: 바탕 #8b6f4e + 사진(cover) + rgba(69,52,36,.4) 덮개. 상단 191: 제목 56 semibold 흰색 가운데 · 리드 18 lh1.8 (간격 10) → 지도 1440×492 r20 (371)
   → 28 → 카드 2장 700×300 r20 #e4ddd5 1px(가로 간격 40): 안내(주소·문의·교통 — 아이콘 24 + 라벨 18 #e4ddd5, 값 18 semibold 흰색, 행 간격 20, 라벨-값 21)
   | 진료시간(아이콘+라벨 → 행 4px 간격: 요일 w150 semibold + 시간 medium + 부연). 글자 전부 흰색 계열.
   네이버 지도 마커: .gd-map-marker — #4f453b 상자 189×59 r10 + 로고 141×39 + 꼬리 22(아래 가운데). */
.section-access--figma {
    position: relative;
    isolation: isolate;
    padding: clamp(80px, 9.95vw, 191px) 0 clamp(80px, 9.1vw, 175px);
    background-color: #8b6f4e;
    color: #fff;
    overflow: clip;
}

.section-access--figma .section-access__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.section-access--figma::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(69, 52, 36, 0.46);   /* 시안 0.4 — 시안 픽셀(좌상 158,148,136)에 맞춰 소폭 상향 */
    pointer-events: none;
}

/* grammar 의 `> .container` 5fr/7fr 그리드·align-items:end 를 세로 flex 로 되돌린다 */
[data-mood] .section-access.section-access--figma > .container,
.section-access--figma .section-access__inner {
    max-width: 1520px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(28px, 1.46vw, 28px);
    padding-left: 40px;
    padding-right: 40px;
}

.section-access--figma .section-access__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 0 clamp(20px, 2.4vw, 46px);
    text-align: center;
}

[data-mood] .section-access--figma .section-access__title,
.section-access--figma .section-access__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: clamp(1.625rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
    word-break: keep-all;
}

[data-mood] .section-access--figma .section-access__geo-sentence,
.section-access--figma .section-access__geo-sentence {
    max-width: none;
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
    word-break: keep-all;
}

/* 지도 — 전폭 1440×492 r20 */
.section-access--figma .section-access__map-wrap { width: 100%; }
[data-mood] .section-access--figma .section-access__map,
.section-access--figma .section-access__map {
    margin: 0;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background-color: #e9e4de;
}
.section-access--figma .section-access__map-canvas {
    width: 100%;
    aspect-ratio: 1440 / 492;
    min-height: 260px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #e9e4de;
}
.section-access--figma .section-access__map-canvas.is-failed {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    min-height: 160px;
    padding: 24px;
    font-size: 0.9375rem;
    color: #5c5c5c;
    text-align: center;
}
.section-access--figma .section-access__map-frame { display: block; width: 100%; height: 492px; border: 0; }
.section-access--figma .section-access__map--fallback { display: flex; justify-content: center; padding: 48px 16px; }
.section-access--figma .section-access__map-noscript { padding: 24px; text-align: center; }
.section-access--figma .section-access__map-noscript a { color: #726558; font-weight: 600; }

/* 네이버 지도 커스텀 마커(피그마 7:1499) — 지도 DOM 안에 꽂히므로 섹션 접두사 없이 */
.gd-map-marker {
    position: relative;
    width: 189px;
    height: 75px;
    cursor: pointer;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
.gd-map-marker__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 189px;
    height: 59px;
    border-radius: 10px;
    background-color: #4f453b;
}
.gd-map-marker__box img { display: block; width: 141px; height: 39px; }
.gd-map-marker__name { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.gd-map-marker__tip {
    position: absolute;
    left: 50%;
    top: 59px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 16px solid #4f453b;
}

/* 카드 2장 */
.section-access--figma .section-access__panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
.section-access--figma .section-access__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    padding: 20px clamp(20px, 2.08vw, 40px);
    border: 1px solid #e4ddd5;
    border-radius: 20px;
    background: none;
    color: #fff;
}
.section-access--figma .section-access__panel--info { align-items: center; }

[data-mood] .section-access--figma .section-access__dl,
.section-access--figma .section-access__dl {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
}
[data-mood] .section-access--figma .section-access__row,
.section-access--figma .section-access__row {
    display: flex;
    align-items: center;
    gap: 21px;
    margin: 0;
    padding: 0;
    border: 0;
}
.section-access--figma .section-access__row--top { align-items: flex-start; }
.section-access--figma .section-access__row dt {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: #e4ddd5;
}
[data-mood] .section-access--figma .section-access__icon,
.section-access--figma .section-access__icon { width: 24px; height: 24px; flex-shrink: 0; color: #e4ddd5; }
.section-access--figma .section-access__row dd {
    margin: 0;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: #fff;
    word-break: keep-all;
}
.section-access--figma .section-access__row a { color: #fff; font-weight: 600; text-decoration: none; }
.section-access--figma .section-access__row a:hover { text-decoration: underline; }
.section-access--figma .section-access__sub { display: block; margin-top: 4px; font-size: 0.9375rem; font-weight: 400; color: #e4ddd5; }

/* 진료시간 카드 */
.section-access--figma .section-access__panel--hours { align-items: flex-start; }
.section-access--figma .section-access__hours-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-family: var(--mood-body-ff);
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: #e4ddd5;
}
.section-access--figma .section-access__hours {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.section-access--figma .section-access__hours-row {
    display: flex;
    align-items: flex-start;
    gap: 21px;
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: #fff;
}
.section-access--figma .section-access__hours-row dt { flex: 0 0 150px; margin: 0; font-weight: 600; }
.section-access--figma .section-access__hours-row dd { margin: 0; font-weight: 500; }
.section-access--figma .section-access__hours-sub { display: block; font-size: inherit; font-weight: 500; color: #fff; }
.section-access--figma .section-access__hours-note { margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.6; color: #e4ddd5; }

@media (min-width: 1024px) {
    .section-access--figma .section-access__panels { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 767px) {
    .section-access--figma .section-access__map-canvas { aspect-ratio: 4 / 3; }
    .section-access--figma .section-access__panel { min-height: 0; padding: 28px 20px; }
    .section-access--figma .section-access__panel--info { align-items: stretch; }
    /* 위 [data-mood] 행 규칙(align-items:center)보다 특이성이 높아야 왼쪽 정렬이 먹는다 */
    [data-mood] .section-access--figma .section-access__row,
    .section-access--figma .section-access__row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .section-access--figma .section-access__hours-row dt { flex-basis: 128px; }
}


/* === S22 cta-a === */
/* cta-a — 정교한치과 전용 예약 CTA 밴드(2026-10-06 피그마 66:3387 상단, 1920×780).
   배경: 사진 20% + rgba(79,69,59,.8) 덮개(= 짙은 갈색). 가운데: 제목 56 semibold 흰색 → 10 → 리드 18 lh1.8 두 줄 → 40 → 알약 버튼(패딩 10/20, r40, #313131 면, #e4ddd5 1px, 글자 20 medium 흰색 + 화살표 18, 간격 20). */
.section-cta--photo {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(480px, 40.6vw, 780px);
    padding: clamp(80px, 6.25vw, 120px) 0;
    background-color: #4f453b;   /* 2026-10-07 사용자 배경(따오기/hero_bnr.jpg)은 이미 어둡게 합성된 파일 — 덮개 없이 원본 그대로 */
    color: #fff;
    text-align: center;
    overflow: clip;
}

.section-cta--photo .section-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    pointer-events: none;
}
.section-cta--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: transparent;   /* 2026-10-07: 사용자 합성본 사용 → 덮개 제거 */
    pointer-events: none;
}

[data-mood] .section-cta.section-cta--photo,
.section-cta--photo { text-align: center; }

.section-cta--photo .section-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

[data-mood] .section-cta--photo .section-cta__title,
.section-cta--photo .section-cta__title {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.92vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
    word-break: keep-all;
}

[data-mood] .section-cta--photo .section-cta__subtitle,
.section-cta--photo .section-cta__subtitle {
    max-width: none;
    margin: 0 0 clamp(28px, 2.08vw, 40px);
    font-size: clamp(0.9375rem, 0.94vw, 1.125rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
    word-break: keep-all;
}

[data-mood] .section-cta--photo .section-cta__buttons,
.section-cta--photo .section-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

[data-mood] .section-cta--photo .section-cta__btn,
.section-cta--photo .section-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 52px;
    padding: 10px 20px;
    border: 1px solid #e4ddd5;
    border-radius: 40px;
    background-color: #313131;
    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, border-color 0.2s;
}
.section-cta--photo .section-cta__btn img,
.section-cta--photo .section-cta__btn .icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s; }
.section-cta--photo .section-cta__btn:hover,
.section-cta--photo .section-cta__btn:focus-visible { background-color: #4f453b; border-color: #fff; }
.section-cta--photo .section-cta__btn:hover img { transform: translateX(3px); }
.section-cta--photo .section-cta__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* === 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(--qm-color, var(--mood-primary));   /* 정교한 피그마 59:1903: #726558 */
    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(--qm-color, var(--mood-primary));
}

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

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

/* === 위치 변형 (client.yaml quickmenu.position: bottom) — 화면 우하단 고정(하늘수 피그마 1:2708: right 40 · bottom 40). 기본은 우측 세로 중앙 === */
.quickmenu--bottom {
    opacity: 1;                              /* 시안은 첫 화면부터 보인다(스크롤 임계 없음) */
    visibility: visible;
    top: auto;
    bottom: var(--qm-bottom, 40px);
    right: var(--qm-right, 40px);
    transform: 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;
}

/* 2026-10-13 사용자: 의료진 소개에서 대표원장(첫 번째)을 가운데로. 3인이 한 줄(3열)로 설 때만 순서를 바꾼다 — 2번째 · 대표원장 · 3번째.
   좁은 화면(한 열)에서는 원래 순서라 대표원장이 맨 위. DOM·읽기 순서는 그대로다(시각 순서만 order 로 조정) */
@media (min-width: 1024px) {
    .dr-list__grid:has(> :nth-child(3):last-child) > :nth-child(1) { order: 2; }
    .dr-list__grid:has(> :nth-child(3):last-child) > :nth-child(2) { order: 1; }
    .dr-list__grid:has(> :nth-child(3):last-child) > :nth-child(3) { order: 3; }
}

.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);
    /* 2026-10-06 사용자: 하단 약간 크롭 — 상자는 4/5 로 고정하고 사진을 115% 높이로 위 정렬(아래 15% 가 잘린다). 액자 배경은 상자에 */
    aspect-ratio: 4 / 5;
    background: linear-gradient(128deg, rgba(217, 217, 217, 0) 23%, #d9d9d9 166%);
}

.dr-profile__photo {
    width: 100%;
    height: 115%;
    display: block;
    /* 2026-10-06 "원장 이미지 잘림" → contain 으로 전신 표시 후, 사용자 요청으로 하단만 약간 크롭(위 정렬) */
    object-fit: contain;
    object-position: center top;
}

.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); }


/* === 2026-10-07 정교한 피그마 69:3530~3698 — 서브 상단 1920×900 전폭, 모서리 각짐, 사진 + rgba(51,51,51,.7) multiply 덮개,
   가운데 스택(브레드크럼 16 medium → H1 56 semibold 프리텐다드 → 리드 18 lh1.8, 간격 10). 헤더(overlay)가 위에 겹친다 === */
.sub-hero {
    min-height: clamp(420px, 46.875vw, 900px);
    padding: calc(var(--header-h, 64px) + 24px) 0 clamp(40px, 3.5vw, 64px);
    background-color: #333;
}
.sub-hero__bg,
.sub-hero::before,
.sub-hero::after { border-radius: 0; }
.sub-hero::after { background-color: #333; }
.sub-hero__bg img { object-position: center; }
.sub-hero--photo::before {
    background-color: rgba(51, 51, 51, 0.7);
    mix-blend-mode: multiply;
}
.sub-hero__breadcrumb ol { font-weight: 500; }
.sub-hero__title {
    font-family: var(--mood-body-ff);   /* 사용자: 노토세리프 → 프리텐다드 */
    font-weight: 600;
    font-size: clamp(1.875rem, 2.92vw, 3.5rem);
    letter-spacing: -0.03em;
}
.sub-hero__intro { max-width: 80em; font-weight: 400; }

/* 오버레이 헤더가 fixed(흐름 밖)라 위 -header-h 마진이 이중 오프셋이 된다(상단 92px 가 화면 밖으로) → 0 */
.site-header--overlay ~ main .sub-hero,
body:has(.site-header--overlay) .sub-hero { margin-top: 0; }