/* ==========================================================================
   /technology — 보유 장비 (P2)
   분류마다 진한 윗선(번호 · 분류 이름 · 영문)으로 열고, 장비는 4:5 사진과 글이 좌우로 번갈아 놓인다.
   공용 컴포넌트(page-head · subnav · blocks)는 site.css 를 그대로 쓴다.
   ========================================================================== */

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

.technology-index { padding: clamp(64px, 7vw, 120px) 0 clamp(120px, 12vw, 208px); }
.technology-group + .technology-group { margin-top: clamp(120px, 13vw, 224px); }

/* ---------------------------------------------------------------- 분류 머리 */
.technology-group__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
    padding-top: clamp(20px, 2vw, 28px);
    border-top: 1px solid var(--ink);
}
.technology-group__index {
    grid-column: 1 / span 1;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.technology-group__title {
    grid-column: 2 / span 6;
    font-size: clamp(22px, 1.9vw, 30px);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -.025em;
}
.technology-group__en {
    grid-column: 9 / span 4;
    justify-self: end;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------- 장비 행 */
.technology-device {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
    margin-top: clamp(56px, 6vw, 104px);
}
.technology-device + .technology-device { margin-top: clamp(104px, 11vw, 184px); }
.technology-device__figure { grid-column: 1 / span 5; grid-row: 1; }
.technology-device__body { grid-column: 7 / span 5; grid-row: 1; transition-delay: .12s; }
.technology-device--reverse .technology-device__figure { grid-column: 8 / span 5; }
.technology-device--reverse .technology-device__body { grid-column: 2 / span 5; }
/* 사진이 없는 장비: 분류 제목과 같은 축에서 글만 */
.technology-device--text .technology-device__body,
.technology-device--text.technology-device--reverse .technology-device__body { grid-column: 2 / span 7; }

.technology-device__name {
    font-size: clamp(28px, 2.7vw, 44px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.03em;
}
.technology-device__en {
    margin-top: 14px;
    font-size: 11.5px;
    line-height: 1.4;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.technology-device__summary {
    max-width: 28em;
    margin-top: clamp(28px, 2.6vw, 40px);
    font-size: clamp(16px, 1.15vw, 18.5px);
    line-height: 1.8;
    letter-spacing: -.01em;
    color: var(--ink);
}
.technology-device__description {
    max-width: 32em;
    margin-top: 20px;
    font-size: clamp(14.5px, 1vw, 15.5px);
    line-height: 1.95;
    color: var(--ink-2);
}
.technology-device__description p + p { margin-top: .9em; }

/* 이 장비를 쓰는 진료 — 헤어라인 링크 목록 */
.technology-device__uses { margin-top: clamp(36px, 3.4vw, 52px); max-width: 32em; }
.technology-device__label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--ink-3);
}
.technology-device__treatments { margin-top: 14px; border-top: 1px solid var(--line); }
.technology-device__treatments a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    line-height: 1.6;
}
.technology-device__treatments .arrow {
    color: var(--ink-3);
    transition: transform .45s var(--ease), color .3s var(--ease);
}
.technology-device__treatments a:hover .arrow,
.technology-device__treatments a:focus-visible .arrow { color: var(--ink); transform: translateX(6px); }

/* ---------------------------------------------------------------- 페이지 블록 (장비 관리 원칙 · 상담 안내) */
.technology-blocks { padding-bottom: var(--section-y); }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1099px) {
    .technology-device__body { grid-column: 7 / span 6; }
    .technology-device--reverse .technology-device__body { grid-column: 1 / span 6; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
    .technology-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
    .technology-group__en { flex-basis: 100%; margin-top: 4px; }

    .technology-device__figure,
    .technology-device--reverse .technology-device__figure { grid-column: 1 / -1; grid-row: 1; }
    /* 사진은 76% 폭으로 줄여 한 화면을 다 덮지 않게 하고, 넓은 화면처럼 좌우로 번갈아 놓는다 */
    .technology-device__figure { width: 76%; }
    .technology-device--reverse .technology-device__figure { justify-self: end; }
    .technology-device__body,
    .technology-device--reverse .technology-device__body { grid-column: 1 / -1; grid-row: 2; margin-top: 36px; }
    .technology-device--text .technology-device__body,
    .technology-device--text.technology-device--reverse .technology-device__body { grid-column: 1 / -1; grid-row: 1; margin-top: 0; }
    .technology-device + .technology-device { margin-top: 88px; }
}