/* ==========================================================================
   /treatments — 피부 고민별 진료 안내 (P2)
   고민마다 진한 윗선으로 한 장을 연다: 왼쪽 고민(번호 · 이름 · 키워드 · 요약 · 사진), 오른쪽 진료 헤어라인 목록.
   공용 컴포넌트(page-head · subnav · blocks)는 site.css 를 그대로 쓴다.
   ========================================================================== */

/* 서브내비로 이동한 고민 섹션은 포커스를 받지만(키보드 · 스크린리더 위치) 넓은 테두리는 그리지 않는다 */
.treatments-concern:focus { outline: none; }

.treatments-index { padding: clamp(64px, 7vw, 120px) 0 clamp(120px, 12vw, 208px); }
.treatments-concern + .treatments-concern { margin-top: clamp(104px, 11vw, 184px); }

.treatments-concern__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: var(--col-gap);
    align-items: start;
    padding-top: clamp(22px, 2.2vw, 32px);
    border-top: 1px solid var(--ink);
}

/* ---------------------------------------------------------------- 고민 (왼쪽) */
.treatments-concern__head { grid-column: 1 / span 5; grid-row: 1; }
.treatments-concern__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.treatments-concern__eyebrow span + span::before {
    content: "";
    display: inline-block;
    width: 18px; height: 1px;
    margin-right: 14px;
    vertical-align: middle;
    background: currentColor;
    opacity: .6;
}
.treatments-concern__name {
    margin-top: clamp(28px, 3vw, 44px);
    font-size: clamp(28px, 2.7vw, 44px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.03em;
}
.treatments-concern__keywords {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
}
.treatments-concern__summary {
    grid-column: 1 / span 5;
    grid-row: 2;
    max-width: 30em;
    margin-top: 28px;
    font-size: clamp(15px, 1.02vw, 16.5px);
    line-height: 1.95;
    color: var(--ink-2);
}
.treatments-concern__summary p + p { margin-top: .9em; }

.treatments-concern__figure {
    grid-column: 1 / span 3;
    grid-row: 3;
    margin-top: clamp(44px, 4.4vw, 72px);
    transition-delay: .12s;
}

/* ---------------------------------------------------------------- 진료 목록 (오른쪽) */
.treatments-concern__body { grid-column: 7 / span 6; grid-row: 1 / span 3; }
.treatments-concern__body.reveal { transition-delay: .08s; }
.treatments-concern__count {
    font-size: 12px;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--ink-3);
}
.treatments-concern__count span { margin-left: 4px; font-variant-numeric: tabular-nums; }

.treatments-list {
    margin-top: clamp(28px, 3vw, 44px);
    border-top: 1px solid var(--line);
}
.treatments-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title arrow"
        "summary arrow";
    column-gap: 32px;
    align-items: center;
    padding: clamp(22px, 2vw, 30px) 0;
    border-bottom: 1px solid var(--line);
    transition: color .4s var(--ease);
}
.treatments-item__title {
    grid-area: title;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.02em;
}
/* 제목 링크가 행 전체를 덮는다 — 링크 이름은 진료명 하나로 짧게 유지 */
.treatments-item__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.treatments-item__link:focus-visible { outline: none; }
.treatments-item__link:focus-visible::after { outline: 1px solid var(--ink); outline-offset: 2px; }
.treatments-item__en {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.treatments-item__summary {
    grid-area: summary;
    max-width: 36em;
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ink-2);
    transition: color .4s var(--ease);
}
.treatments-item__arrow {
    grid-area: arrow;
    width: 22px;
    color: var(--ink-3);
    transition: opacity .45s var(--ease), transform .45s var(--ease), color .45s var(--ease);
}

/* Home 피부 고민 목록과 같은 반응: 가리킨 행만 진하게, 화살표가 들어온다 */
@media (hover: hover) {
    .treatments-list:hover .treatments-item { color: var(--ink-3); }
    .treatments-list:hover .treatments-item__summary { color: var(--ink-3); }
    .treatments-list .treatments-item:hover { color: var(--ink); }
    .treatments-list .treatments-item:hover .treatments-item__summary { color: var(--ink-2); }
    .treatments-item__arrow { opacity: 0; transform: translateX(-10px); color: var(--ink); }
    .treatments-item:hover .treatments-item__arrow,
    .treatments-item:focus-within .treatments-item__arrow { opacity: 1; transform: none; }
}

.treatments-concern__empty {
    margin-top: clamp(28px, 3vw, 44px);
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ink-2);
}

/* 담당 의료진 · 상담 신청 */
.treatments-concern__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px 32px;
    margin-top: 32px;
}
.treatments-concern__doctors {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    font-size: 14px;
    line-height: 1.6;
}
.treatments-concern__meta-label { font-size: 12.5px; color: var(--ink-3); }
.treatments-concern__doctors a {
    border-bottom: 1px solid var(--ink-3);
    transition: border-color .3s var(--ease);
}
.treatments-concern__doctors a:hover { border-bottom-color: currentColor; }

/* ---------------------------------------------------------------- 페이지 블록 (처음 오시는 분께 · 상담 안내) */
.treatments-blocks { padding-bottom: var(--section-y); }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1099px) {
    .treatments-concern__grid { grid-template-rows: auto auto auto; }
    .treatments-concern__head { grid-column: 1 / span 8; grid-row: 1; }
    .treatments-concern__summary { grid-column: 1 / span 8; grid-row: 2; }
    .treatments-concern__figure { grid-column: 10 / span 3; grid-row: 1 / span 2; margin-top: 0; }
    .treatments-concern__body { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(56px, 7vw, 80px); }
}

/* ---------------------------------------------------------------- mobile */
/* 목록이 첫 화면에 가깝도록 사진은 이름 옆 작은 사진으로 줄인다 (Home 모바일 피부 고민 목록과 같은 방식) */
@media (max-width: 767px) {
    .treatments-concern__head { grid-column: 1 / span 8; grid-row: 1; }
    .treatments-concern__figure { grid-column: 9 / span 4; grid-row: 1; margin-top: 0; }
    .treatments-concern__summary { grid-column: 1 / -1; grid-row: 2; }
    .treatments-concern__body { grid-column: 1 / -1; grid-row: 3; margin-top: 48px; }
    .treatments-concern__name { margin-top: 22px; }
    .treatments-item { column-gap: 20px; }
    .treatments-item__arrow { width: 16px; }
    .treatments-concern__meta { flex-direction: column; align-items: flex-start; }
}

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