/* ==========================================================================
   /treatments/{slug} — 진료 상세 (P2)
   머리: 왼쪽 경로 · 이름 · 요약 · 시술 정보 표, 오른쪽 4:5 사진.
   본문 블록(site.css .blocks) 뒤에 같은 편집 격자(제목 왼쪽 4열 · 내용 6열부터)로 담당 의료진과 함께 보기를 잇는다.
   ========================================================================== */

/* 화면에는 보이지 않고 스크린리더만 읽는 글자 (같은 이름의 링크를 구분) */
.treatment-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- hero */
.treatment-hero { padding: clamp(40px, 5.5vw, 96px) 0 0; }
.treatment-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--col-gap);
    align-items: start;
}
.treatment-hero__intro { grid-column: 1 / span 6; grid-row: 1; padding-top: clamp(0px, 2.6vw, 48px); }
.treatment-hero__figure { grid-column: 8 / span 5; grid-row: 1 / span 2; transition-delay: .12s; }
.treatment-hero__info { grid-column: 1 / span 6; grid-row: 2; margin-top: clamp(48px, 5vw, 80px); transition-delay: .2s; }
/* 사진이 없는 진료: 이름 · 요약은 넓게, 시술 정보 표는 오른쪽 */
.treatment-hero--text .treatment-hero__intro { grid-column: 1 / span 7; }
.treatment-hero--text .treatment-hero__info { grid-column: 8 / span 5; grid-row: 1; margin-top: 0; padding-top: clamp(0px, 2.6vw, 48px); }

/* 경로 — eyebrow 모양: 영문 · 짧은 선 · 한글 고민 이름 */
.treatment-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.treatment-crumb a { padding: 4px 0; transition: color .3s var(--ease); }
.treatment-crumb a:hover { color: var(--ink); }
.treatment-crumb a + a {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
}
.treatment-crumb a + a::before {
    content: "";
    display: inline-block;
    width: 18px; height: 1px;
    margin-right: 14px;
    vertical-align: middle;
    background: currentColor;
    opacity: .6;
}

.treatment-hero__title {
    margin-top: 28px;
    font-size: clamp(34px, 4.2vw, 68px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.treatment-hero__en {
    margin-top: 18px;
    font-size: 11.5px;
    line-height: 1.4;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.treatment-hero__lead {
    max-width: 30em;
    margin-top: clamp(32px, 3vw, 48px);
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.85;
    letter-spacing: -.01em;
    color: var(--ink-2);
}

.treatment-hero__label {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--ink-3);
}
.treatment-hero__note {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-3);
}
.treatment-hero__actions { margin-top: 40px; }

/* ---------------------------------------------------------------- 본문 흐름 */
.treatment-flow { padding: clamp(104px, 11vw, 192px) 0 var(--section-y); }
.treatment-flow .wrap > * + * { margin-top: clamp(80px, 8.5vw, 152px); }

/* 블록이 아닌 고정 영역도 블록과 같은 편집 격자를 쓴다 (넓은 칸: 제목 1–4열, 내용 6–12열) */
@container blocks (min-width: 900px) {
    .treatment-doctors,
    .treatment-related {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--col-gap);
        align-items: start;
    }
}

/* 담당 의료진 — 4:5 사진과 이름, 아래 정렬 */
.treatment-doctors__list { border-top: 1px solid var(--ink); }
.treatment-doctor {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--col-gap);
    align-items: end;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}
.treatment-doctor--text { grid-template-columns: minmax(0, 1fr); }
.treatment-doctor__photo .media { background: var(--paper-2); }
.treatment-doctor__body { padding-bottom: 4px; }
.treatment-doctor__name {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.01em;
}
.treatment-doctor__title { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.treatment-doctor__specialty {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.6;
}
.treatment-doctor__specialty span { font-size: 12.5px; color: var(--ink-3); }
.treatment-doctor .text-link { margin-top: 32px; }

/* 함께 보기 — 라벨 · 링크 헤어라인 표 */
.treatment-related__list { border-top: 1px solid var(--ink); }
.treatment-related__group {
    display: grid;
    grid-template-columns: minmax(88px, 30%) minmax(0, 1fr);
    column-gap: var(--col-gap);
    align-items: baseline;
    border-bottom: 1px solid var(--line);
}
.treatment-related__group dt {
    padding: 19px 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-3);
}
.treatment-related__group li + li { border-top: 1px solid var(--line); }
.treatment-related__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    padding: 17px 0;
    font-size: 15.5px;
    line-height: 1.7;
}
.treatment-related__en {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.treatment-related__note { font-size: 13px; color: var(--ink-3); }
.treatment-related__link .arrow {
    align-self: center;
    margin-left: auto;
    color: var(--ink-3);
    transition: transform .45s var(--ease), color .3s var(--ease);
}
.treatment-related__link:hover .arrow,
.treatment-related__link:focus-visible .arrow { color: var(--ink); transform: translateX(6px); }
.treatment-related__caption {
    padding: 0 0 18px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-3);
}
@media (max-width: 519px) {
    .treatment-related__group { grid-template-columns: minmax(0, 1fr); }
    .treatment-related__group dt { padding: 18px 0 0; }
    .treatment-related__link { padding: 12px 0 14px; }
}

/* ---------------------------------------------------------------- 같은 고민의 이전 · 다음 진료 */
.treatment-pager {
    padding-top: 22px;
    border-top: 1px solid var(--ink);
}
.treatment-pager__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px 32px;
}
.treatment-pager__label { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.treatment-pager__count {
    margin-left: 14px;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.treatment-pager__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
    margin-top: clamp(36px, 4vw, 64px);
}
.treatment-pager__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
}
.treatment-pager__link--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}
.treatment-pager__direction {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--ink-3);
    transition: gap .45s var(--ease), color .3s var(--ease);
}
.treatment-pager__link--previous .arrow { transform: scaleX(-1); }
.treatment-pager__name {
    font-size: clamp(22px, 2.1vw, 34px);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: -.025em;
}
.treatment-pager__en {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.treatment-pager__link:hover .treatment-pager__direction { gap: 18px; color: var(--ink); }

/* ---------------------------------------------------------------- tablet */
/* 사진 옆에는 이름 · 요약만 두고, 시술 정보 표는 아래에 전체 폭으로 (사진 아래 빈 칸이 생기지 않게) */
@media (max-width: 1099px) {
    .treatment-hero__intro { grid-column: 1 / span 7; padding-top: 0; }
    .treatment-hero__figure { grid-column: 8 / span 5; grid-row: 1; }
    .treatment-hero__info,
    .treatment-hero--text .treatment-hero__info { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(48px, 6vw, 72px); padding-top: 0; }
    .treatment-hero--text .treatment-hero__intro { grid-column: 1 / span 10; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
    .treatment-hero__grid { grid-template-rows: none; }
    .treatment-hero__intro,
    .treatment-hero--text .treatment-hero__intro { grid-column: 1 / -1; grid-row: 1; }
    .treatment-hero__figure { grid-column: 1 / -1; grid-row: 2; width: 76%; justify-self: end; margin-top: 40px; }
    .treatment-hero__info,
    .treatment-hero--text .treatment-hero__info { grid-column: 1 / -1; grid-row: 3; margin-top: 44px; padding-top: 0; }
    .treatment-hero__title { margin-top: 24px; }

    .treatment-doctor { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .treatment-doctor .text-link { margin-top: 24px; }

    .treatment-pager__links { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    .treatment-pager__link { padding: 18px 0; }
    .treatment-pager__link + .treatment-pager__link { border-top: 1px solid var(--line); }
    .treatment-pager__link--next { grid-column: 1; }
}

/* 손가락으로 누르는 화면: 글자 링크의 누르는 영역만 넓힌다 (site.css touch targets 와 같은 방식) */
@media (pointer: coarse) {
    .treatment-crumb a { position: relative; }
    .treatment-crumb a::after { content: ""; position: absolute; inset: -12px -4px; }   /* ::before 는 두 번째 링크의 구분선 */
}