/* grammar-monotone.css — 모노톤 무드 "시각 문법" 층
   ------------------------------------------------------------------
   무드 토큰(mood-monotone.css)은 색·모서리·서체 굵기만 바꾼다. 그래서 같은 카탈로그를 쓰는 거래처끼리
   "색만 다른 같은 사이트"로 보였다(2026-09-14 정교한치과 vs 돌다리치과 지적).
   이 파일은 형태 문법을 바꾼다 — 세리프 제목 · 좌측 정렬 · 비대칭 2열 헤더 · 헤어라인 면 분할 ·
   카드 그림자/라운드 제거 · 원형 배지 제거 · 갤러리 풀블리드 · 목록형 칩 · 직각 아웃라인 버튼.

   적용 경로: builder.js 가 tokens.css 의 무드 id 를 읽어 grammar-{mood}.css 를 theme/css/grammar.css 로 복사,
   head.sub.php 가 sections.css 뒤에 <link> 하고 <body data-mood="monotone"> 을 찍는다.
   규칙은 전부 [data-mood="monotone"] 아래에 둔다(특이도 +1 로 섹션 CSS 를 안전하게 덮는다).
   색은 토큰만 참조(§15) — 새 색상 상수 없음. 헤어라인 = --mood-text 12%.
   ------------------------------------------------------------------ */

[data-mood="monotone"] {
    /* 2026-10-07 사용자: 노토세리프 전부 프리텐다드로(홈·서브). 세리프 정체성(시드 B)은 폐기 — 제목도 본문 글꼴 */
    --mood-heading-ff: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --mood-heading-fw: 500;
    --mood-radius: 0px;
    --mood-section-gap: clamp(96px, 12vw, 160px);
    --mood-inner-gap: clamp(48px, 6vw, 80px);
    --mood-duration-scale: 1.2;
    --mood-distance-scale: 0.7;
    --gm-hair: 1px solid color-mix(in srgb, var(--mood-text) 12%, transparent);
    --gm-hair-strong: 1px solid color-mix(in srgb, var(--mood-text) 40%, transparent);
}

/* === 1. 타이포 — 세리프 제목, 느슨한 자간, 본문은 산세리프 유지 === */
[data-mood="monotone"] h1,
[data-mood="monotone"] h2,
[data-mood="monotone"] h3,
[data-mood="monotone"] h4 {
    letter-spacing: 0;
    line-height: 1.35;
}

[data-mood="monotone"] h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
}

[data-mood="monotone"] .eyebrow {
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--mood-text-muted);
}

[data-mood="monotone"] .eyebrow::before {
    width: 32px;
    height: 1px;
    border-radius: 0;
    background-color: currentColor;
}

[data-mood="monotone"] .eyebrow--center {
    justify-content: flex-start;
}

/* 섹션 제목 밑 강조 밑줄(accent bar) — 모노톤은 선 대신 여백으로 구분 */
[data-mood="monotone"] .section__header {
    text-align: left;
}

[data-mood="monotone"] .section__header h2::after {
    content: none;
}

[data-mood="monotone"] .section__header p {
    margin-left: 0;
}

/* === 2. 면·카드 — 그림자 0 · 라운드 0 · hover 상승 없음 · 헤어라인만 === */
[data-mood="monotone"] .card,
[data-mood="monotone"] .card:hover {
    box-shadow: none;
    transform: none;
    border-radius: 0;
}

[data-mood="monotone"] .icon-badge {
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    color: var(--mood-text);
}

[data-mood="monotone"] .icon-badge .icon {
    width: 28px;
    height: 28px;
}

[data-mood="monotone"] .section-edge {
    border-top: var(--gm-hair);
}

/* === 3. 버튼 — 직각, 가는 테두리, 중간 굵기 === */
[data-mood="monotone"] .btn {
    border-radius: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 14px 28px;
}

[data-mood="monotone"] .btn--secondary {
    border-width: 1px;
}

/* === 4. 섹션 헤더 — 좌측 정렬, ≥1024px 에서 제목(5) | 리드(7) 비대칭 2열 + 헤어라인 === */
[data-mood="monotone"] .section-facility__title,
[data-mood="monotone"] .section-guide-teaser__title,
[data-mood="monotone"] .section-philosophy--grid .section-philosophy__heading,
[data-mood="monotone"] .section-equipment__title,
[data-mood="monotone"] .section-concern__title,
[data-mood="monotone"] .section-reviews-out__title,
[data-mood="monotone"] .section-chips__title,
[data-mood="monotone"] .section-faq__title,
[data-mood="monotone"] .section-doctors__heading,
[data-mood="monotone"] .section-treatments-tab__title,
[data-mood="monotone"] .consult-form__title {
    text-align: left;
    color: var(--mood-text);
}

[data-mood="monotone"] .section-facility__subtitle,
[data-mood="monotone"] .section-guide-teaser__subtitle,
[data-mood="monotone"] .section-philosophy--grid .section-philosophy__intro,
[data-mood="monotone"] .section-equipment__subtitle,
[data-mood="monotone"] .section-concern__subtitle,
[data-mood="monotone"] .section-reviews-out__subtitle,
[data-mood="monotone"] .section-chips__subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 60ch;
}

/* 제목만 있는 섹션(의료진·FAQ·주력 진료·상담) — 제목 아래 헤어라인으로 구획 */
[data-mood="monotone"] .section-doctors__heading,
[data-mood="monotone"] .section-faq__title,
[data-mood="monotone"] .section-treatments-tab__title {
    padding-bottom: 24px;
    border-bottom: var(--gm-hair-strong);
    margin-bottom: var(--mood-inner-gap);
}

@media (min-width: 1024px) {
    [data-mood="monotone"] :is(.section-facility, .section-guide-teaser, .section-philosophy--grid, .section-equipment, .section-concern, .section-reviews-out, .section-chips) > .container {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(40px, 6vw, 96px);
        align-items: end;
    }

    [data-mood="monotone"] :is(.section-facility, .section-guide-teaser, .section-philosophy--grid, .section-equipment, .section-concern, .section-reviews-out, .section-chips) > .container > h2 {
        grid-column: 1;
        margin: 0;
    }

    [data-mood="monotone"] :is(.section-facility, .section-guide-teaser, .section-philosophy--grid, .section-equipment, .section-concern, .section-reviews-out, .section-chips) > .container > h2 + p {
        grid-column: 2;
        margin: 0 0 6px;
        max-width: none;
    }

    /* 헤더 행 다음의 모든 블록(그리드·목록·라이트박스 등)은 두 열을 가로지르고, 위에 헤어라인 */
    [data-mood="monotone"] :is(.section-facility, .section-guide-teaser, .section-philosophy--grid, .section-equipment, .section-concern, .section-reviews-out, .section-chips) > .container > :not(h2, h2 + p) {
        grid-column: 1 / -1;
    }

    [data-mood="monotone"] :is(.section-facility, .section-guide-teaser, .section-philosophy--grid, .section-equipment, .section-concern, .section-reviews-out, .section-chips) > .container > h2 + p + * {
        margin-top: 32px;
        padding-top: var(--mood-inner-gap);
        border-top: var(--gm-hair-strong);
        /* 섹션 CSS 의 `margin: 0 auto`(후기·칩 그리드)는 그리드 아이템에서 auto 마진이 남는 공간을 먹어 콘텐츠 폭으로 쪼그라든다 → 전폭 고정 */
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: none;
    }
}

/* === 5. 히어로(hero-c) — 사진 직각·그라데이션 제거, 5:7 비대칭, 세리프 대제목 === */
[data-mood="monotone"] .section-hero--split .section-hero__title {
    font-size: clamp(2rem, 3.4vw, 3rem);   /* 5fr 열에서 60px 은 7줄로 늘어졌다(1440 실측) → 48px */
    line-height: 1.25;
    letter-spacing: 0;
}

[data-mood="monotone"] .section-hero__visual {
    border-radius: 0;
    background: var(--mood-bg-alt);
}

[data-mood="monotone"] .section-hero__visual::before,
[data-mood="monotone"] .section-hero__visual::after {
    content: none;
}

@media (min-width: 1024px) {
    [data-mood="monotone"] .section-hero__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

/* === 6. 공간 갤러리(S15) — 풀블리드 사진 밴드, 4px 간격, 캡션 좌측 === */
[data-mood="monotone"] .section-facility {
    overflow-x: clip;             /* 100vw 그리드가 세로 스크롤바 폭만큼 넘치는 것을 섹션에서 자른다(390px 가로 스크롤 0 유지) */
}

[data-mood="monotone"] .section-facility__grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    gap: 4px;
    grid-template-columns: repeat(3, 1fr);
}

[data-mood="monotone"] .section-facility__img-wrap {
    border-radius: 0;
}

[data-mood="monotone"] .section-facility__img-wrap:hover .section-facility__img {
    transform: none;
    filter: brightness(0.94);
}

[data-mood="monotone"] .section-facility__caption {
    text-align: left;
    padding: 0 12px;
    margin-top: 10px;
    letter-spacing: 0.04em;
}

[data-mood="monotone"] .section-facility__lightbox-img {
    border-radius: 0;
}

@media (max-width: 768px) {
    [data-mood="monotone"] .section-facility__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    [data-mood="monotone"] .section-facility__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    [data-mood="monotone"] .section-facility__caption {
        font-size: 0.75rem;
        padding: 0 8px;
    }
}

/* === 7. 시그니처 티저(S13) — 카드 대신 번호 매긴 편집 목록(01 · 제목 · 설명) === */
[data-mood="monotone"] .section-guide-teaser__grid {
    counter-reset: gm-sig;
    display: flex;
    flex-direction: column;
    gap: 0;
}

[data-mood="monotone"] .section-guide-teaser__grid > * {
    flex: 1 1 100%;
}

[data-mood="monotone"] .section-guide-teaser__card {
    counter-increment: gm-sig;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    padding: clamp(24px, 3vw, 36px) 0;
    background-color: transparent;
    border: 0;
    border-bottom: var(--gm-hair);
    border-radius: 0;
    box-shadow: none;
}

[data-mood="monotone"] .section-guide-teaser__card:hover {
    box-shadow: none;
    transform: none;
    background-color: color-mix(in srgb, var(--mood-text) 3%, transparent);
}

[data-mood="monotone"] .section-guide-teaser__card::before {
    content: counter(gm-sig, decimal-leading-zero);
    grid-column: 1;
    grid-row: 1 / span 6;
    font-family: var(--mood-heading-ff);
    font-size: 1.375rem;
    line-height: 1.1;
    color: var(--mood-text-muted);
    padding-top: 0.1em;
}

[data-mood="monotone"] .section-guide-teaser__card > * {
    grid-column: 2;
}

/* 번호가 아이콘 자리를 대신한다 */
[data-mood="monotone"] .section-guide-teaser__icon {
    display: none;
}

[data-mood="monotone"] .section-guide-teaser__card-title {
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
}

[data-mood="monotone"] .section-guide-teaser__card-desc {
    font-size: 0.9375rem;
    max-width: 64ch;
}

@media (min-width: 1024px) {
    [data-mood="monotone"] .section-guide-teaser__card {
        grid-template-columns: 3.5rem minmax(0, 18rem) minmax(0, 1fr);
        column-gap: 32px;
        align-items: start;
    }

    [data-mood="monotone"] .section-guide-teaser__card::before {
        grid-row: 1 / span 3;
    }

    [data-mood="monotone"] .section-guide-teaser__card-title {
        grid-column: 2;
        grid-row: 1;
    }

    [data-mood="monotone"] .section-guide-teaser__card-desc,
    [data-mood="monotone"] .section-guide-teaser__card-link {
        grid-column: 3;
    }
}

/* === 8. 의료진(S14) — 원형 마스크 리빌 → 직각 와이프, 약력은 대시 목록 === */
[data-mood="monotone"] .section-doctors__photo-wrap {
    border-radius: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-mood="monotone"] .section-doctors__card[data-revealed] .section-doctors__photo-wrap,
[data-mood="monotone"] .section-doctors__photo-wrap.is-revealed {
    clip-path: inset(0 0 0 0);
}

[data-mood="monotone"] .section-doctors__title {
    font-weight: 500;
    letter-spacing: 0.04em;
}

[data-mood="monotone"] .section-doctors__license {
    border-bottom: var(--gm-hair);
}

[data-mood="monotone"] .section-doctors__credentials {
    list-style: none;
    padding-left: 0;
}

[data-mood="monotone"] .section-doctors__credentials li::before {
    content: '— ';
    color: var(--mood-text-muted);
}

@media (min-width: 768px) {
    [data-mood="monotone"] .section-doctors__card {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(32px, 5vw, 72px);
    }
}

/* === 9. 철학(S05 grid) — 2×2 격자 + 작은 아이콘이 밋밋했다(2026-09-15 사용자 "uxui 및 디자인 개선").
   원칙 목록답게: 큰 세리프 번호(01~04)가 아이콘을 대신하고, 모바일은 번호|본문 2열 목록, ≥1024px 는 상단 굵은 헤어라인 아래 4열 병렬.
   제목은 세리프 대형, 본문은 60ch 로 줄 길이 제한. === */
[data-mood="monotone"] .section-philosophy__cards {
    counter-reset: gm-phil;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    border-top: var(--gm-hair-strong);
}

[data-mood="monotone"] .section-philosophy__card {
    counter-increment: gm-phil;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    padding: clamp(24px, 3vw, 36px) 0;
    background-color: transparent;
    border: 0;
    border-bottom: var(--gm-hair);
    border-radius: 0;
    box-shadow: none;
}

[data-mood="monotone"] .section-philosophy__card:hover {
    box-shadow: none;
}

[data-mood="monotone"] .section-philosophy__card::before {
    content: counter(gm-phil, decimal-leading-zero);
    grid-column: 1;
    grid-row: 1 / span 3;
    font-family: var(--mood-heading-ff);
    font-size: 1.375rem;
    line-height: 1.1;
    color: var(--mood-text-muted);
    padding-top: 0.15em;
}

[data-mood="monotone"] .section-philosophy__card > * {
    grid-column: 2;
}

[data-mood="monotone"] .section-philosophy__card-icon {
    display: none;
}

[data-mood="monotone"] .section-philosophy__card-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.3;
}

[data-mood="monotone"] .section-philosophy__card-body {
    max-width: 60ch;
    font-size: clamp(0.9375rem, 1.4vw, 1rem);
}

@media (min-width: 1024px) {
    [data-mood="monotone"] .section-philosophy__cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(28px, 3vw, 56px);
    }

    [data-mood="monotone"] .section-philosophy__card {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
        padding: 36px 0 0;
        border-bottom: 0;
        align-content: start;
    }

    [data-mood="monotone"] .section-philosophy__card::before {
        grid-column: 1;
        grid-row: auto;
        font-size: 2.75rem;
        line-height: 1;
        margin-bottom: 12px;
    }

    [data-mood="monotone"] .section-philosophy__card > * {
        grid-column: 1;
    }
}

/* === 10. 장비·차별점(S06) — 사진 위주, 테두리·그림자 없음, 이름은 헤어라인 아래 === */
[data-mood="monotone"] .section-equipment__grid {
    justify-content: flex-start;
    gap: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 24px);
}

[data-mood="monotone"] .section-equipment__card {
    border: 0;
    border-radius: 0;
    background: transparent;
}

[data-mood="monotone"] .section-equipment__card:hover {
    box-shadow: none;
}

[data-mood="monotone"] .section-equipment__card:hover .section-equipment__img-wrap img {
    transform: none;
    filter: brightness(0.94);
}

[data-mood="monotone"] .section-equipment__icon {
    border-radius: 0;
    box-shadow: none;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 44px;
}

[data-mood="monotone"] .section-equipment__name {
    padding: 16px 0 4px;
    border-top: var(--gm-hair);
    margin-top: 12px;
    font-size: 1.125rem;
}

[data-mood="monotone"] .section-equipment__desc {
    padding: 0 0 8px;
}

@media (min-width: 1024px) {
    [data-mood="monotone"] .section-equipment__grid > * {
        flex-basis: calc((100% - 2 * clamp(16px, 2vw, 24px)) / 3);
    }
}

/* === 11. 주력 진료 탭(S09) — 좌측 정렬, 가는 밑줄 탭 === */
[data-mood="monotone"] .section-treatments-tab__tabs {
    border-bottom: var(--gm-hair);
}

[data-mood="monotone"] .section-treatments-tab__tab {
    font-weight: 500;
    padding: 12px 20px 12px 0;
    border-bottom-width: 1px;
    margin-bottom: -1px;
}

[data-mood="monotone"] .section-treatments-tab__tab[aria-selected="true"] {
    color: var(--mood-text);
    border-bottom-color: var(--mood-text);
}

[data-mood="monotone"] .section-treatments-tab__hook {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

@media (min-width: 769px) {
    [data-mood="monotone"] .section-treatments-tab__tabs {
        justify-content: flex-start;
    }

    [data-mood="monotone"] .section-treatments-tab__panel {
        margin: 0;
        text-align: left;
        max-width: 64ch;
    }
}

/* === 12. 세부 진료 칩(S10) — 칩 → 헤어라인 목록 === */
[data-mood="monotone"] .section-chips__grid {
    gap: 0 clamp(24px, 3vw, 48px);
    max-width: none;
    border-top: var(--gm-hair);
}

[data-mood="monotone"] .section-chips__item {
    background: transparent;
    border-left: 0;
    border-bottom: var(--gm-hair);
    border-radius: 0;
    padding: 14px 0;
    gap: 10px;
}

[data-mood="monotone"] .section-chips__item:hover {
    transform: none;
    background: color-mix(in srgb, var(--mood-text) 3%, transparent);
}

[data-mood="monotone"] .section-chips__icon {
    color: var(--mood-text-muted);
}

@media (min-width: 1024px) {
    [data-mood="monotone"] .section-chips__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
    }
}

/* === 13. 고민→해결(S07-b) — 카드 → 좌측 정렬 헤어라인 셀, 알약 라벨 → 사각 아웃라인 === */
[data-mood="monotone"] .section-concern__grid {
    gap: 0 clamp(24px, 3vw, 48px);
}

[data-mood="monotone"] .section-concern__card {
    align-items: flex-start;
    padding: clamp(24px, 3vw, 36px) 0;
    background-color: transparent;
    border: 0;
    border-bottom: var(--gm-hair);
    border-radius: 0;
}

[data-mood="monotone"] .section-concern__card:hover {
    transform: none;
    box-shadow: none;
}

[data-mood="monotone"] .section-concern__label {
    border-radius: 0;
    background-color: transparent;
    color: var(--mood-text-muted);
    border: var(--gm-hair-strong);
    padding: 2px 8px;
}

[data-mood="monotone"] .section-concern__label--sol {
    background-color: transparent;
    color: var(--mood-text);
    border-color: var(--mood-text);
}

[data-mood="monotone"] .section-concern__q,
[data-mood="monotone"] .section-concern__a {
    text-align: left;
}

[data-mood="monotone"] .section-concern__problem,
[data-mood="monotone"] .section-concern__solution {
    align-items: flex-start;
}

[data-mood="monotone"] .section-concern__arrow {
    color: var(--mood-text-muted);
}

/* === 14. 후기 아웃링크(S18) — 좌측 정렬, 사각 브랜드 아이콘, 헤어라인 셀 === */
[data-mood="monotone"] .section-reviews-out__grid {
    max-width: none;
    gap: 0 clamp(24px, 3vw, 48px);
}

[data-mood="monotone"] .section-reviews-out__card {
    align-items: flex-start;
    text-align: left;
    padding: clamp(24px, 3vw, 36px) 0;
    background-color: transparent;
    border: 0;
    border-bottom: var(--gm-hair);
    border-radius: 0;
}

[data-mood="monotone"] .section-reviews-out__card:hover {
    transform: none;
    box-shadow: none;
}

[data-mood="monotone"] .section-reviews-out__icon {
    width: 40px;
    height: 40px;
    border-radius: 0;
}

/* === 15. FAQ(S20) — 전폭, 세리프 질문 === */
[data-mood="monotone"] .section-faq__list {
    max-width: none;
    gap: 0;
}

[data-mood="monotone"] .section-faq__item {
    border-bottom: var(--gm-hair);
}

[data-mood="monotone"] .section-faq__q-text {
    font-weight: 500;
    font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
}

[data-mood="monotone"] .section-faq__answer p {
    max-width: 72ch;
}

/* === 16. 오시는 길(S21) · 상담 폼(S24) — 직각 지도, 밑줄형 입력 === */
[data-mood="monotone"] .section-access__map {
    border-radius: 0;
    border: var(--gm-hair);
}

[data-mood="monotone"] .section-access__row {
    border-bottom: var(--gm-hair);
}

[data-mood="monotone"] .section-access__icon {
    color: var(--mood-text-muted);
}

/* 상담 폼(S24) — 2026-09-15 "uxui 및 디자인 개선": 좁은 단일 컬럼 폼 → ≥1024px 제목·안내(5) | 폼(7) 편집형 2열,
   밑줄형 입력에 넉넉한 행간, 캡차 위젯을 폼 언어에 맞춤, 전폭 직각 버튼 */
[data-mood="monotone"] .section-consult-form {
    background-color: var(--mood-bg);
    border-top: var(--gm-hair);
}

[data-mood="monotone"] .consult-form {
    max-width: none;
    margin: 0;
}

[data-mood="monotone"] .consult-form__title {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    margin-bottom: 12px;
}

[data-mood="monotone"] .consult-form__desc {
    font-size: 1rem;
    max-width: 36ch;
    margin-bottom: 32px;
}

[data-mood="monotone"] .consult-form__form {
    gap: 28px;
}

[data-mood="monotone"] .consult-form__row {
    gap: 28px;
}

[data-mood="monotone"] .consult-form__field {
    gap: 4px;
}

[data-mood="monotone"] .consult-form__label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--mood-text-muted);
}

[data-mood="monotone"] .consult-form__input,
[data-mood="monotone"] .consult-form__select,
[data-mood="monotone"] .consult-form__textarea {
    border: 0;
    border-bottom: var(--gm-hair-strong);
    border-radius: 0;
    padding: 12px 0;
    font-size: 1.0625rem;
    background-color: transparent;
}

[data-mood="monotone"] .consult-form__input::placeholder,
[data-mood="monotone"] .consult-form__textarea::placeholder {
    color: color-mix(in srgb, var(--mood-text) 35%, transparent);
}

[data-mood="monotone"] .consult-form__input:focus,
[data-mood="monotone"] .consult-form__select:focus,
[data-mood="monotone"] .consult-form__textarea:focus {
    box-shadow: none;
    border-bottom-color: var(--mood-text);
}

[data-mood="monotone"] .consult-form__textarea {
    min-height: 120px;
}

/* 캡차 — 기본 fieldset 박스 대신 다른 필드와 같은 언어(라벨 + 밑줄 입력 + 텍스트 버튼) */
[data-mood="monotone"] .consult-form__captcha fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 12px;
}

[data-mood="monotone"] .consult-form__captcha legend {
    padding: 0;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--mood-text-muted);
}

[data-mood="monotone"] .consult-form__captcha img {
    height: 44px;
    border: var(--gm-hair);
    border-radius: 0;
}

[data-mood="monotone"] .consult-form__captcha input[type="text"] {
    width: 120px;
    border: 0;
    border-bottom: var(--gm-hair-strong);
    border-radius: 0;
    padding: 8px 0;
    background-color: transparent;
    letter-spacing: 0.1em;
}

[data-mood="monotone"] .consult-form__captcha button {
    border: 0;
    border-radius: 0;
    padding: 8px 4px;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--mood-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

[data-mood="monotone"] .consult-form__captcha button:hover {
    color: var(--mood-text);
}

[data-mood="monotone"] .consult-form__captcha span#captcha_info {
    font-size: 0.75rem;
}

[data-mood="monotone"] .consult-form__checkbox-label {
    font-size: 0.9375rem;
    color: var(--mood-text);
}

[data-mood="monotone"] .consult-form__checkbox {
    accent-color: var(--mood-text);
}

[data-mood="monotone"] .consult-form__submit {
    min-height: 56px;
    font-size: 1rem;
    letter-spacing: 0.04em;
    margin-top: 0;
}

[data-mood="monotone"] .consult-form__note {
    text-align: left;
    font-size: 0.8125rem;
    line-height: 1.7;
}

[data-mood="monotone"] .consult-form__result {
    border-radius: 0;
    text-align: left;
}

[data-mood="monotone"] .consult-form__done {
    text-align: left;
    padding: 32px 0;
    border-top: var(--gm-hair-strong);
    border-bottom: var(--gm-hair);
}

@media (min-width: 1024px) {
    [data-mood="monotone"] .consult-form {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(40px, 6vw, 96px);
        align-items: start;
    }

    [data-mood="monotone"] .consult-form__title {
        grid-column: 1;
        grid-row: 1;
    }

    [data-mood="monotone"] .consult-form__desc {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 0;
    }

    [data-mood="monotone"] .consult-form__form,
    [data-mood="monotone"] .consult-form__done {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    [data-mood="monotone"] .consult-form--fallback {
        display: block;
        max-width: 720px;
    }
}

[data-mood="monotone"] .consult-modal__dialog {
    border-radius: 0;
}

/* === 17. CTA 밴드(S22) — 좌측 정렬 세리프, 흰 아웃라인 버튼 === */
[data-mood="monotone"] .section-cta {
    text-align: left;
}

[data-mood="monotone"] .section-cta__subtitle {
    max-width: 60ch;
}

[data-mood="monotone"] .section-cta__buttons {
    justify-content: flex-start;
}

[data-mood="monotone"] .section-cta__btn--phone {
    border-width: 1px;
}

/* === 18. 헤더·푸터 — 헤어라인, 가는 메뉴 === */
[data-mood="monotone"] .site-header {
    backdrop-filter: none;
    background-color: var(--mood-bg);
    border-bottom: var(--gm-hair);
}

/* 다크 헤더(brand.header_theme: dark) — 위 .site-header 규칙보다 뒤에 두어 이긴다 */
[data-mood="monotone"] .site-header--dark {
    /* 2026-10-06 정교한 피그마 3:1843 — 헤더 토큰(--header-bg/--header-border)이 있으면 우선 */
    background-color: var(--header-bg, var(--mood-primary));
    background-image: var(--header-bg-image, none);   /* 피그마 3:1843 — 위가 밝은 회색 그라데이션 질감(img/header-bg.png) */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--header-border, color-mix(in srgb, var(--mood-on-primary) 15%, transparent));
}

[data-mood="monotone"] .site-header--dark .site-header__phone {
    color: var(--header-phone-color, var(--mood-on-primary));
    font-weight: 700;
}

[data-mood="monotone"] .site-nav__list a {
    font-weight: var(--header-nav-fw, 400);
}
[data-mood="monotone"] .site-nav__list > li > .site-nav__row > .site-nav__link[aria-current="page"],
[data-mood="monotone"] .site-nav__list > li > a[aria-current="page"] { font-weight: var(--header-nav-active-fw, 400); }   /* 피그마: 활성 메뉴 bold */

[data-mood="monotone"] .site-header__phone {
    font-weight: 500;
    color: var(--mood-text);
}

@media (min-width: 1024px) {
    [data-mood="monotone"] .site-nav__submenu {
        border-radius: 0;
        box-shadow: none;
        border: var(--gm-hair-strong);
        margin-top: 0;
    }

    [data-mood="monotone"] .site-nav__submenu a {
        border-radius: 0;
    }

    [data-mood="monotone"] .site-header--dark .site-nav__submenu {
        background-color: var(--mood-primary);
        border-color: color-mix(in srgb, var(--mood-on-primary) 25%, transparent);
    }
}

/* === 19. 서브페이지 템플릿(진료 상세·허브·의료진·시그니처·지역) 카드 공통 평탄화 === */
[data-mood="monotone"] :is(.td-related__card, .td-equipment__card, .ch-subs__card, .dr-list__card, .dr-focus__card, .sg-evidence__card, .al-treatments__card, .td-symptoms__item, .pr-guide__item) {
    border-radius: 0;
    box-shadow: none;
}

[data-mood="monotone"] :is(.td-related__card, .ch-subs__card, .dr-list__card, .dr-focus__card, .al-treatments__card):hover {
    transform: none;
    box-shadow: none;
}

[data-mood="monotone"] :is(.td-hero, .ch-hero, .dr-hero, .sg-hero, .al-hero, .fq-hero, .pr-hero) h1 {
    letter-spacing: 0;
}

/* 모션 축소 환경은 base.css 가 처리 — 이 층은 형태만 다룬다 */