/* ==========================================================================
   GYEOL Dermatology — site styles
   정보는 줄이지 않고, 위계와 등장 순서를 통제한다.
   관리자가 바꾸지 않는 디자인 시스템 (폰트 · 색 · 간격 · 폭)
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
    --paper: #F6F5F2;
    --paper-2: #EDEBE7;
    --ink: #1A1A18;
    --ink-2: #57554F;
    --ink-3: #73706A;                 /* 보조 글자 — 종이색 위 4.5:1 (어두운 바탕 --paper-2 위는 .doctor · .site-footer 에서 한 단계 진하게) */
    --line: #D8D5CF;

    --dark: #1C1C1A;
    --dark-ink: #ECEAE6;
    --dark-ink-2: #A3A09A;
    --dark-line: #3B3A37;

    --error: #9E3B2C;                 /* 폼 검증 오류 (문구와 함께만 쓴다) */

    --gutter: clamp(20px, 4vw, 64px);
    --col-gap: clamp(16px, 2vw, 32px);
    --maxw: 1680px;
    --header-h: 76px;
    --section-y: clamp(104px, 12vw, 208px);

    --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1099px) {
    :root { --header-h: 64px; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 24px);   /* 키보드 포커스 · 앵커가 고정 헤더에 가리지 않게 */
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.005em;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body:not(.has-hero) main { padding-top: var(--header-h); }
body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: inherit; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }   /* 앵커 이동 · 오류 안내로 옮긴 포커스는 넓은 테두리를 그리지 않는다 */

/* 화면에는 보이지 않고 스크린리더 · 검색엔진만 읽는 글자 (Home 의 h1 등) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 12px; z-index: 100;
    background: var(--ink); color: var(--paper); padding: 10px 14px; font-size: 14px;
}
.skip-link:focus { left: 12px; }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
}

/* ---------------------------------------------------------------- type */
.eyebrow {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.eyebrow .ko {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
}
.eyebrow .ko::before {
    content: "";
    display: inline-block;
    width: 18px; height: 1px;
    margin-right: 14px;
    vertical-align: middle;
    background: currentColor;
    opacity: .6;
}

.statement {
    margin-top: 32px;
    font-size: clamp(25px, 2.55vw, 42px);
    font-weight: 300;
    line-height: 1.48;
    letter-spacing: -.028em;
}

.lead {
    font-size: clamp(15.5px, 1.08vw, 17.5px);
    line-height: 1.95;
    color: var(--ink-2);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 7px;
    font-size: 14.5px;
    letter-spacing: .01em;
    line-height: 1.2;
    border-bottom: 1px solid currentColor;
    transition: gap .45s var(--ease), opacity .3s;
}
.text-link:hover { gap: 18px; }
.text-link--small { font-size: 13.5px; }

/* 얇은 선 화살표 — 아이콘 폰트 없이 CSS로 */
.arrow {
    position: relative;
    display: inline-block;
    width: 16px; height: 1px;
    background: currentColor;
    flex: none;
}
.arrow::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 6px; height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
}

/* ---------------------------------------------------------------- media */
.media {
    position: relative;
    overflow: hidden;
    background: var(--paper-2);
}
.media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-21x9 { aspect-ratio: 21 / 9; }

figcaption {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-3);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 58px;
    padding: 0 34px;
    background: var(--ink);
    color: var(--paper);
    font-size: 15px;
    letter-spacing: .02em;
    transition: background-color .3s, gap .45s var(--ease);
}
.button:hover { background: #000; gap: 22px; }

/* ---------------------------------------------------------------- header */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--header-h);
    color: var(--ink);
    border-bottom: 1px solid transparent;
    transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.site-header.is-solid {
    background: rgba(246, 245, 242, .94);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header[data-tone="light"]:not(.is-solid) { color: #fff; }
/* 메뉴를 열면 히어로 위(흰 글자)에서도 종이색 바탕의 먹색 글자로 */
.menu-open .site-header,
.menu-open .site-header[data-tone="light"]:not(.is-solid) { color: var(--ink); background: var(--paper); border-bottom-color: transparent; transform: none; }

.site-header__inner {
    height: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.site-nav ul { display: flex; gap: clamp(20px, 2.2vw, 38px); }
.site-nav a {
    position: relative;
    display: block;
    padding: 6px 0;
    font-size: 14px;
    letter-spacing: .03em;
}
.site-nav a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}
.site-nav a:hover::after,
.site-nav a.is-current::after { transform: scaleX(1); }

.site-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.site-logo__mark {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .5em;
    margin-right: -.5em;
}
.site-logo__sub {
    font-size: 10.5px;
    letter-spacing: .3em;
    margin-right: -.3em;
    opacity: .62;
}

.site-header__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    font-size: 14px;
    letter-spacing: .03em;
}
.site-header__tel { opacity: .7; font-variant-numeric: tabular-nums; }
.site-header__cta { padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.site-header__menu { display: none; padding: 8px 0; letter-spacing: .03em; }
.site-header__menu-close { display: none; }
.menu-open .site-header__menu-open { display: none; }
.menu-open .site-header__menu-close { display: inline; }

.site-menu {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--header-h) + 40px) var(--gutter) 40px;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility .45s;
}
.menu-open .site-menu { opacity: 1; visibility: visible; }
.site-menu__links a {
    display: block;
    padding: 6px 0;
    font-size: clamp(28px, 7.4vw, 44px);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: -.02em;
}
.site-menu__info {
    display: grid;
    gap: 4px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
}

/* 떠 있는 상담 예약 — 모바일 · 태블릿에서 헤더의 '상담 예약' 대신. 작게, 상담 버튼 · 푸터가 보이면 숨는다(site.js) */
.fab { display: none; }

@media (max-width: 1099px) {
    .site-nav, .site-header__tel, .site-header__cta { display: none; }
    .fab {
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 55;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 16px;
        background: var(--ink);
        color: var(--paper);
        font-size: 13.5px;
        letter-spacing: .02em;
        box-shadow: 0 8px 24px rgba(20, 20, 18, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
    }
    .fab .arrow { width: 14px; }
    .fab.is-shown { opacity: 1; visibility: visible; transform: none; }
    .menu-open .fab { opacity: 0; visibility: hidden; }
    .site-header__inner { grid-template-columns: 1fr auto; }
    .site-logo { align-items: flex-start; }
    .site-logo__mark, .site-logo__sub { margin-right: 0; }
    .site-header__actions { gap: 24px; }
    .site-header__menu { display: block; }
}

/* ---------------------------------------------------------------- hero */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    background: var(--paper-2);
    color: var(--ink);
}
.hero[data-tone="light"] { color: #fff; }

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.6s var(--ease), visibility 1.6s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero__slide > img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero__slide[data-focal="left"] > img { object-position: 22% 50%; }
.hero__slide[data-focal="right"] > img { object-position: 78% 50%; }
.hero__slide[data-tone="light"] { color: #fff; }
/* 어두운 문구 슬라이드: 문구가 놓이는 좌하단만 은은하게 밝혀 배경의 디테일을 정리한다 */
.hero__slide[data-tone="dark"]::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 62% 70% at 0% 100%, rgba(246, 245, 242, .62) 0%, rgba(246, 245, 242, .28) 45%, rgba(246, 245, 242, 0) 100%);
    pointer-events: none;
}
/* 밝은 문구 슬라이드: 사진 위에 옅은 먹색 층을 깔아 글자를 읽히게 한다.
   전체는 살짝만 어둡게 하고, 문구가 놓이는 좌하단과 헤더가 놓이는 상단을 조금 더 눌러 사진이 탁해지지 않게 한다. */
.hero__slide[data-tone="light"]::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(20, 19, 17, .34) 0%, rgba(20, 19, 17, 0) 24%),
        linear-gradient(to top, rgba(20, 19, 17, .62) 0%, rgba(20, 19, 17, .3) 34%, rgba(20, 19, 17, 0) 66%),
        linear-gradient(to right, rgba(20, 19, 17, .24) 0%, rgba(20, 19, 17, 0) 58%),
        rgba(20, 19, 17, .14);
    pointer-events: none;
}
.hero__slide[data-tone="light"] .hero__text { text-shadow: 0 1px 24px rgba(20, 19, 17, .24); }

.hero__content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding-bottom: clamp(56px, 9vh, 104px);
}
.hero__text { max-width: 760px; }
.hero__headline {
    font-size: clamp(30px, 3.5vw, 56px);
    font-weight: 380;
    line-height: 1.32;
    letter-spacing: -.03em;
}
.hero__caption {
    max-width: 460px;
    margin-top: 24px;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.8;
    opacity: .9;
}
.hero__link { margin-top: 40px; }

.hero__text > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hero__slide.is-active .hero__text > * { opacity: 1; transform: none; }
.hero__slide.is-active .hero__text > :nth-child(1) { transition-delay: .35s; }
.hero__slide.is-active .hero__text > :nth-child(2) { transition-delay: .5s; }
.hero__slide.is-active .hero__text > :nth-child(3) { transition-delay: .65s; }

.hero__controls {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(56px, 9vh, 104px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 12px;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}
.hero__bars { display: flex; gap: 8px; }
.hero__bar {
    position: relative;
    width: 40px;
    height: 17px;
}
.hero__bar::before,
.hero__bar span {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    height: 1px;
    background: currentColor;
}
.hero__bar::before { right: 0; opacity: .28; }
.hero__bar span { width: 0; }
.hero__bar.is-active span { width: 100%; }
.hero.is-playing .hero__bar.is-active span {
    width: 0;
    animation: hero-progress var(--hero-interval, 7000ms) linear forwards;
}
@keyframes hero-progress { to { width: 100%; } }

/* 세로 비율 화면에서는 이미지가 크게 잘려 문구 아래가 복잡해지기 쉬워, 하단을 종이색으로 녹인다 */
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
    .hero__slide[data-tone="dark"]::after {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(246, 245, 242, .92) 0%, rgba(246, 245, 242, .55) 30%, rgba(246, 245, 242, 0) 55%);
        pointer-events: none;
    }
    .hero__slide[data-tone="light"]::after {
        background:
            linear-gradient(to bottom, rgba(20, 19, 17, .3) 0%, rgba(20, 19, 17, 0) 20%),
            linear-gradient(to top, rgba(20, 19, 17, .7) 0%, rgba(20, 19, 17, .38) 38%, rgba(20, 19, 17, 0) 70%),
            rgba(20, 19, 17, .12);
    }
}

/* 태블릿: 오른쪽 아래의 떠 있는 '상담 예약'(.fab, 위 16px + 높이 44px) 위로 캐러셀 컨트롤을 올린다 */
@media (min-width: 768px) and (max-width: 1099px) {
    .hero__content { padding-bottom: clamp(84px, 9vh, 104px); }
    .hero__controls { bottom: clamp(84px, 9vh, 104px); }
}

/* 모바일: 캐러셀 컨트롤은 떠 있는 '상담 예약'과 같은 줄 왼쪽에 둔다. 슬라이드가 많거나 화면이 좁으면 막대가 줄어든다 */
@media (max-width: 767px) {
    .hero { min-height: 560px; }
    .hero__content { padding-bottom: 88px; }
    .hero__controls {
        left: var(--gutter);
        right: 140px;                                   /* .fab 폭(약 108px) + 오른쪽 16px + 간격 */
        bottom: calc(27px + env(safe-area-inset-bottom, 0px));   /* .fab(16px · 44px)의 세로 가운데에 맞춘다 */
    }
    .hero__count { flex: none; }
    .hero__bars { min-width: 0; }
    .hero__bar { flex: 0 1 40px; min-width: 14px; }
    .hero__caption { max-width: 320px; }
}

/* ---------------------------------------------------------------- sections */
.section { padding: var(--section-y) 0; }
.section--tight-top { padding-top: 0; }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: clamp(48px, 5.5vw, 88px);
}

/* reveal — 스크롤 시 한 번만, 조용하게 */
.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- philosophy */
.philosophy .grid { align-items: start; }
.philosophy__figure { grid-column: 1 / span 5; grid-row: 1; }
.philosophy__body {
    grid-column: 7 / span 6;
    grid-row: 1;
    padding-top: clamp(0px, 7vw, 132px);
}
.philosophy__body .lead { max-width: 560px; margin-top: 44px; }
.philosophy__body .lead + .lead { margin-top: 18px; }
.philosophy__body .text-link { margin-top: 52px; }

/* ---------------------------------------------------------------- concerns */
.concerns__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
}
.concerns__list {
    grid-column: 1 / span 7;
    border-top: 1px solid var(--line);
}
.concern {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
        "index title arrow"
        ". keywords arrow";
    align-items: center;
    padding: clamp(24px, 2.3vw, 34px) 0;
    border-bottom: 1px solid var(--line);
    transition: color .4s var(--ease);
}
.concern__index {
    grid-area: index;
    align-self: start;
    padding-top: .75em;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.concern__title { grid-area: title; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.concern__name {
    font-size: clamp(21px, 1.95vw, 31px);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: -.025em;
}
.concern__en {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.concern__keywords {
    grid-area: keywords;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
    transition: color .4s var(--ease);
}
.concern__arrow {
    grid-area: arrow;
    width: 22px;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.concern__thumb { display: none; }

@media (hover: hover) {
    .concerns__list:hover .concern { color: var(--ink-3); }
    .concerns__list:hover .concern__keywords { color: var(--ink-3); }
    .concerns__list .concern:hover,
    .concerns__list .concern:focus-visible { color: var(--ink); }
    .concerns__list .concern:hover .concern__keywords { color: var(--ink-2); }
    .concern:hover .concern__arrow,
    .concern:focus-visible .concern__arrow { opacity: 1; transform: none; }
}

.concerns__visual {
    grid-column: 9 / span 4;
    position: sticky;
    top: calc(var(--header-h) + 40px);
}
.concerns__visual img {
    opacity: 0;
    transition: opacity .7s var(--ease);
}
.concerns__visual img.is-active { opacity: 1; }

/* ---------------------------------------------------------------- doctor */
.doctor { --ink-3: #6C6963; background: var(--paper-2); }   /* 어두운 바탕 위 보조 글자도 4.5:1 */
.doctor .grid { align-items: center; }
.doctor__figure { grid-column: 1 / span 6; }
.doctor__figure .media { background: var(--paper); }
.doctor__body { grid-column: 8 / span 5; }
.doctor__quote p {
    margin-top: 32px;
    font-size: clamp(23px, 2.2vw, 36px);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -.028em;
}
.doctor__text {
    margin-top: 32px;
    max-width: 480px;
    font-size: 15.5px;
    line-height: 1.95;
    color: var(--ink-2);
}
.doctor__name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 52px;
}
.doctor__name strong { font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.doctor__name span { font-size: 14px; color: var(--ink-2); }
.doctor__career {
    margin-top: 22px;
    border-top: 1px solid var(--line);
}
.doctor__career li {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}
.doctor__body .text-link { margin-top: 44px; }

/* ---------------------------------------------------------------- approach */
.approach__head { max-width: 900px; }
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3.2vw, 56px);
    margin-top: clamp(56px, 6vw, 104px);
}
.step { border-top: 1px solid var(--ink); padding-top: 22px; }
.step__index {
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.step__title {
    margin-top: 44px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -.01em;
}
.step p {
    margin-top: 14px;
    max-width: 400px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-2);
}
.steps .step:nth-child(2) { transition-delay: .12s; }
.steps .step:nth-child(3) { transition-delay: .24s; }

/* 보유 장비 — 3단계와 같은 3열 축에서, 사진 없이 한 줄로 (장비는 진단 다음의 도구) */
.tech-note {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px clamp(28px, 3.2vw, 56px);
    margin-top: clamp(80px, 8vw, 136px);
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.tech-note__body { grid-column: 2 / span 2; }
.tech-note__lead {
    max-width: 560px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-2);
}
.tech-note__devices {
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px;
    margin-top: 14px;
}
.tech-note__devices a {
    display: inline-block;
    padding: 10px 0;
    font-size: 14.5px;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: text-decoration-color .3s var(--ease);
}
.tech-note__devices a:hover,
.tech-note__devices a:focus-visible { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- space (dark) */
.space {
    background: var(--dark);
    color: var(--dark-ink);
}
.space .eyebrow,
.space figcaption { color: var(--dark-ink-2); }
.space .lead { color: var(--dark-ink-2); }
.space .media { background: #2A2A27; }
.space__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
}
.space__head > div { grid-column: 1 / span 6; }
.space__head .lead { grid-column: 8 / span 4; }
.space__wide { margin-top: clamp(56px, 6vw, 104px); }
.space__pair {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    margin-top: clamp(24px, 3vw, 48px);
}
.space__pair > figure:nth-child(1) { grid-column: 1 / span 5; }
.space__pair > figure:nth-child(2) {
    grid-column: 8 / span 4;
    margin-top: clamp(96px, 14vw, 260px);
    transition-delay: .12s;
}
.space__more {
    grid-column: 8 / span 5;
    margin-top: 56px;
}

/* ---------------------------------------------------------------- consultation */
.consult .grid { align-items: end; }
.consult__body { grid-column: 1 / span 7; }
.consult__title {
    margin-top: 32px;
    font-size: clamp(36px, 4.6vw, 76px);
    font-weight: 300;
    line-height: 1.22;
    letter-spacing: -.04em;
}
.consult__body .lead { max-width: 500px; margin-top: 36px; }
.consult__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 36px;
    margin-top: 52px;
}
.consult__info { grid-column: 9 / span 4; }

.info-list > div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.75;
}
.info-list > div:last-child { border-bottom: 1px solid var(--line); }
.info-list > div > dt { color: var(--ink-3); }
.info-list__note { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.hours > div { display: flex; justify-content: space-between; gap: 16px; }
.hours dt { color: var(--ink-2); }
.hours dd { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer */
.site-footer {
    --ink-3: #6C6963;
    padding: clamp(72px, 7vw, 112px) 0 40px;
    background: var(--paper-2);
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-2);
}
.site-footer__top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 48px;
}
.site-footer__brand { grid-column: 1 / span 4; }
.site-logo--footer { align-items: flex-start; color: var(--ink); }
.site-logo--footer .site-logo__mark { margin-right: 0; }
.site-footer__brand p { margin-top: 24px; }
.site-footer__nav {
    grid-column: 5 / span 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--col-gap);
}
.site-footer__nav h2,
.site-footer__hours h2 {
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--ink-3);
}
.site-footer__nav li + li { margin-top: 6px; }
.site-footer__nav a:hover { color: var(--ink); }
.site-footer__hours { grid-column: 10 / span 3; }
.site-footer__hours span { display: block; font-variant-numeric: tabular-nums; }

.site-footer__bottom {
    margin-top: clamp(64px, 6vw, 96px);
    padding-top: 28px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.8;
    color: var(--ink-3);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-footer__notice { margin-top: 10px; max-width: 760px; }
.site-footer__meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.site-footer__meta span:last-child { display: flex; gap: 20px; }
.site-footer__meta a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- popup */
/* 히어로 문구(좌하단)와 겹치지 않도록 우하단, 캐러셀 컨트롤 위에 띄운다 */
.popup-layer {
    position: fixed;
    right: var(--gutter);
    bottom: calc(clamp(56px, 9vh, 104px) + 48px);
    z-index: 60;
    max-width: calc(100vw - 2 * var(--gutter));
    background: var(--paper);
    box-shadow: 0 24px 64px rgba(20, 20, 18, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.popup-layer.is-open { opacity: 1; visibility: visible; transform: none; }
.menu-open .popup-layer { opacity: 0; visibility: hidden; }
.popup-layer__items {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.popup {
    flex: 0 0 300px;
    scroll-snap-align: start;
}
.popup + .popup { border-left: 1px solid var(--line); }
.popup__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.popup__media img { width: 100%; height: 100%; object-fit: cover; }
.popup__body { padding: 22px 24px 24px; }
.popup__title { font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.5; }
.popup__text { margin-top: 8px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.popup__body .text-link { margin-top: 18px; }
.popup-layer__bar {
    display: flex;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-2);
}
.popup-layer__bar button:hover { color: var(--ink); }
@media (min-width: 768px) and (max-width: 1099px) {
    .popup-layer { bottom: calc(clamp(84px, 9vh, 104px) + 48px); }   /* 캐러셀 컨트롤을 올린 만큼 */
}

/* ==========================================================================
   공용 컴포넌트 — 내부 페이지 (마크업과 사용법: docs/front-components.md)
   페이지 전용 스타일은 public/css/pages/<page>.css 에 둔다.
   ========================================================================== */

/* ---------------------------------------------------------------- page head */
/* 내부 페이지 머리: eyebrow · 제목 · 리드, 아래에 선택 이미지(21:9). 히어로가 아니므로 헤더는 불투명 */
.page-head { padding: clamp(56px, 7.5vw, 136px) 0 clamp(56px, 6vw, 104px); }
.page-head__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
}
.page-head__text { grid-column: 1 / span 7; }
.page-head__title {
    margin-top: 32px;
    font-size: clamp(31px, 3.9vw, 62px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.page-head__lead {
    grid-column: 9 / span 4;
    font-size: clamp(15.5px, 1.08vw, 17.5px);
    line-height: 1.95;
    color: var(--ink-2);
}
.page-head__media { margin-top: clamp(56px, 6vw, 104px); }
.page-head__media--bleed { width: 100%; }
.page-head__lead.reveal { transition-delay: .12s; }

@media (max-width: 1099px) {
    .page-head__text { grid-column: 1 / span 10; }
    .page-head__lead { grid-column: 1 / span 8; margin-top: 32px; }
}
@media (max-width: 767px) {
    .page-head__text, .page-head__lead { grid-column: 1 / -1; }
    .page-head__title { margin-top: 24px; }
    .page-head__lead { margin-top: 24px; }
}

/* ---------------------------------------------------------------- section head (Home .section-head 확장) */
/* .section-head 왼쪽: eyebrow + .statement / 오른쪽: .text-link 또는 짧은 .lead */
.section-head > .lead { max-width: 460px; }

/* ---------------------------------------------------------------- facts (헤어라인 정보 표) */
.facts { border-top: 1px solid var(--line); }
.facts > div {
    display: grid;
    grid-template-columns: minmax(88px, 30%) minmax(0, 1fr);
    column-gap: var(--col-gap);
    align-items: baseline;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    line-height: 1.75;
}
.facts dt { font-size: 13.5px; color: var(--ink-3); }
.facts dd { color: var(--ink); }
.facts a,
.prose a { border-bottom: 1px solid var(--ink-3); transition: border-color .3s var(--ease); }
.facts a:hover,
.prose a:hover { border-bottom-color: currentColor; }
.facts--strong { border-top-color: var(--ink); }
@media (max-width: 519px) {
    .facts > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* ---------------------------------------------------------------- faq (<details> · JS 없음) */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 21px 0;
    font-size: 16px;
    line-height: 1.65;
    cursor: pointer;
    list-style: none;
    transition: color .3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__icon {
    position: relative;
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: calc((1.65em - 13px) / 2);
}
.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 6px;
    height: 1px;
    background: currentColor;
    transition: transform .4s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] > .faq__q .faq__icon::after { transform: rotate(0deg); }
.faq__a {
    max-width: 40em;
    padding: 0 37px 26px 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-2);
}
.faq__a p + p { margin-top: .9em; }
@media (hover: hover) {
    .faq__q:hover { color: var(--ink-2); }
}

/* ---------------------------------------------------------------- subnav (앵커 서브내비) */
/* 페이지 루트 <div> 바로 안에 둔다(섹션 안에 넣으면 그 섹션까지만 붙어 있다). 헤더가 숨으면 맨 위로 올라간다. */
.subnav {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    background: rgba(246, 245, 242, .94);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
    transition: top .5s var(--ease);
}
body:has(.site-header.is-hidden) .subnav { top: 0; }
.subnav__list {
    display: flex;
    gap: clamp(22px, 2.6vw, 44px);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list::after { content: ""; flex: 0 0 1px; }  /* 가로 스크롤 끝 여백 */
.subnav__list a {
    position: relative;
    display: block;
    padding: 16px 0 15px;
    font-size: 14px;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--ink-2);
    transition: color .3s var(--ease);
}
.subnav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}
.subnav__list a:hover,
.subnav__list a.is-current,
.subnav__list a[aria-current="true"] { color: var(--ink); }
.subnav__list a:hover::after,
.subnav__list a.is-current::after,
.subnav__list a[aria-current="true"]::after { transform: scaleX(1); }
.subnav__list a:focus-visible { outline-offset: -3px; }
/* 앵커로 이동할 때 고정 헤더 · 서브내비에 제목이 가리지 않게 */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 72px); }

/* ---------------------------------------------------------------- forms (상담 신청) */
/* 헤어라인 밑줄 입력, 둥근 상자 없음. 밑줄은 대비 3:1 이상(--ink-3), 포커스는 진한 2px 밑줄 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px var(--col-gap);
}
.form-grid > .field--full { grid-column: 1 / -1; }
.field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.field__label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    padding: 0;
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--ink-2);
}
.field__req { font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.field__input {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 0 11px;
    border: 0;
    border-bottom: 1px solid var(--ink-3);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 16px;                  /* 16px 미만이면 iOS가 확대한다 */
    line-height: 1.6;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field__input::placeholder { color: var(--ink-3); opacity: 1; }
.field__input:hover { border-bottom-color: var(--ink-2); }
.field__input:focus,
.field__input:focus-visible {
    outline: none;
    border-bottom-color: var(--ink);
    box-shadow: 0 1px 0 0 var(--ink);
}
.field__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--paper) inset; -webkit-text-fill-color: var(--ink); }
.field__input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--paper) inset, 0 1px 0 0 var(--ink); }
textarea.field__input { min-height: 148px; resize: vertical; }
select.field__input { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer; }
.field__select { position: relative; }
.field__select::after {
    content: "";
    position: absolute;
    right: 6px; top: 50%;
    width: 7px; height: 7px;
    border-right: 1px solid var(--ink-2);
    border-bottom: 1px solid var(--ink-2);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}
.field__input[aria-invalid="true"],
.field.is-invalid .field__input { border-bottom-color: var(--error); }
.field__hint,
.field__error { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.field__hint { color: var(--ink-3); }
.field__error { color: var(--error); }

/* 체크박스 — 네모 1px 선, 체크 표시는 CSS 선 */
.check {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.7;
    cursor: pointer;
}
.check input {
    position: absolute;
    left: 0; top: 3px;
    width: 18px; height: 18px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.check__box {
    position: relative;
    flex: none;
    width: 18px; height: 18px;
    margin-top: 3px;
    border: 1px solid var(--ink-2);
    transition: background-color .2s, border-color .2s;
}
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .check__box::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border-right: 1.5px solid var(--paper);
    border-bottom: 1.5px solid var(--paper);
    transform: rotate(45deg);
}
.check input:focus-visible + .check__box { outline: 1px solid var(--ink); outline-offset: 3px; }
.check input[aria-invalid="true"] + .check__box { border-color: var(--error); }
.check a { border-bottom: 1px solid currentColor; }

/* 선택지(라디오) — 글자와 밑줄로만 표시 */
.choices { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 6px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
    display: inline-block;
    padding: 9px 0 8px;
    font-size: 15px;
    color: var(--ink-2);
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.choice:hover span { color: var(--ink); }
.choice input:checked + span { color: var(--ink); border-bottom-color: var(--ink); }
.choice input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 4px; }

/* 스팸 방지 honeypot — 사람에게는 보이지 않고 화면 밖에 둔다 */
.hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 48px; }
.button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.button[disabled],
.button[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

@media (max-width: 767px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------------------------------------------------------------- blocks (콘텐츠 블록 — docs/blocks.md) */
/* 블록은 자기 컨테이너 폭에 반응한다(컨테이너 쿼리). 넓으면 제목 왼쪽 · 내용 오른쪽 읽기 축(6열부터),
   좁으면 위아래로 쌓인다. .blocks 는 .wrap 이나 폭이 정해진 칸 안에 둔다. */
.blocks { container: blocks / inline-size; width: 100%; }
.blocks > * + * { margin-top: clamp(80px, 8.5vw, 152px); }

.block__heading {
    margin-bottom: 26px;
    font-size: clamp(20px, 1.5vw, 24px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.02em;
}
.prose {
    max-width: 40em;
    font-size: clamp(15.5px, 1.08vw, 17px);
    line-height: 1.95;
    color: var(--ink-2);
}
.prose p + p { margin-top: 1.1em; }

/* 넓은 컨테이너: 12열 편집 레이아웃 */
@container blocks (min-width: 900px) {
    .block--text,
    .block--list,
    .block--steps,
    .block--facts,
    .block--faq,
    .block--notice,
    .block--quote,
    .block--image-medium,
    .block--cta {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--col-gap);
        align-items: start;
    }
    .block > .block__heading { grid-column: 1 / span 4; margin-bottom: 0; }
    .block > .block__content { grid-column: 6 / span 7; }
}

/* image */
.block__media-link { display: block; }
.block__media-link .media img { transition: opacity .5s var(--ease); }
.block__media-link:hover .media img { opacity: .92; }
.block--image figcaption { display: flex; align-items: center; gap: 12px; }
@container blocks (min-width: 900px) {
    .block--image-medium > * { grid-column: 6 / span 5; }
}

/* image_text — align = 이미지 위치 */
.block-image-text__media + .block-image-text__body { margin-top: 36px; }
/* 좁은 칸(모바일): 4:5 사진이 한 화면을 다 덮지 않도록 76% 폭으로, 이미지 위치(align) 쪽에 붙인다 */
@container blocks (max-width: 699px) {
    .block-image-text__media { width: 76%; }
    .block--image-right .block-image-text__media { margin-left: auto; }
}
@container blocks (max-width: 899px) {
    .block--image-medium { width: 76%; margin-left: auto; }
}
.block-image-text__body .text-link { margin-top: 36px; }
@container blocks (min-width: 700px) {
    .block--image-text {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--col-gap);
        align-items: center;
    }
    .block-image-text__media + .block-image-text__body { margin-top: 0; }
    .block--image-left .block-image-text__media { grid-column: 1 / span 5; }
    .block--image-left .block-image-text__body { grid-column: 7 / span 5; }
    .block--image-right .block-image-text__media { grid-column: 8 / span 5; grid-row: 1; }
    .block--image-right .block-image-text__body { grid-column: 1 / span 5; grid-row: 1; }
}

/* quote */
.block-quote__text p {
    font-size: clamp(22px, 2.1vw, 34px);
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: -.028em;
}
.block-quote__cite {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    font-size: 13.5px;
    color: var(--ink-2);
}
.block-quote__cite::before {
    content: "";
    flex: none;
    width: 18px; height: 1px;
    background: currentColor;
    opacity: .6;
}
@container blocks (min-width: 900px) {
    .block--quote > * { grid-column: 6 / span 7; }
}

/* list */
.block-list { border-top: 1px solid var(--line); }
.block-list li {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15.5px;
    line-height: 1.75;
}

/* steps */
.block-steps { border-top: 1px solid var(--ink); }
.block-steps__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    padding: 22px 0 24px;
    border-bottom: 1px solid var(--line);
}
.block-steps__index {
    padding-top: .45em;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.block-steps__title { font-size: 17px; font-weight: 400; line-height: 1.6; letter-spacing: -.01em; }
.block-steps__body {
    grid-column: 2;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink-2);
}
.block-steps__body p + p { margin-top: .8em; }
@container blocks (min-width: 700px) {
    .block-steps__item { grid-template-columns: 56px minmax(0, 30%) minmax(0, 1fr); column-gap: var(--col-gap); }
    .block-steps__body { grid-column: 3; margin-top: 0; }
}

/* notice — 주의사항 · 부작용 */
.block-notice { border-top: 1px solid var(--ink); }
.block-notice li {
    position: relative;
    padding: 14px 0 14px 26px;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ink-2);
}
.block-notice li::before {
    content: "";
    position: absolute;
    left: 0; top: calc(14px + .9em);
    width: 10px; height: 1px;
    background: var(--ink-3);
}

/* gallery — 1장: 읽기 축 / 2장: 엇갈린 한 쌍 / 3장 이상: 3열.
   좁은 칸(모바일)도 두 장씩 나란히 놓아 사진 한 장이 화면을 다 덮지 않게 한다. 1장은 76% 폭으로 오른쪽에. */
.block--gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }
.block-gallery--single > * { grid-column: 1 / -1; width: 76%; justify-self: end; }
.block-gallery--pair > :nth-child(2) { margin-top: 48px; }
@container blocks (min-width: 560px) {
    .block--gallery { row-gap: 56px; }
}
@container blocks (min-width: 900px) {
    .block--gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(56px, 5vw, 88px); }
    .block--gallery > * { grid-column: span 4; }
    .block-gallery--single > * { grid-column: 6 / span 5; width: auto; justify-self: stretch; }
    .block-gallery--pair > :nth-child(1) { grid-column: 1 / span 5; }
    .block-gallery--pair > :nth-child(2) { grid-column: 8 / span 4; margin-top: clamp(96px, 12vw, 220px); }
}
.block--gallery > :nth-child(3n + 2) { transition-delay: .12s; }
.block--gallery > :nth-child(3n) { transition-delay: .24s; }

/* cta */
.block--cta { border-top: 1px solid var(--ink); padding-top: clamp(32px, 3.5vw, 56px); }
.block-cta__heading {
    font-size: clamp(24px, 2.4vw, 40px);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -.028em;
    text-wrap: balance;
}
.block-cta__aside { margin-top: 28px; }
.block-cta__aside .button { margin-top: 32px; }
@container blocks (min-width: 900px) {
    .block--cta { align-items: end; }
    .block-cta__heading { grid-column: 1 / span 6; }
    .block-cta__aside { grid-column: 8 / span 5; margin-top: 0; }
    .block-cta__aside .button:first-child { margin-top: 0; }
}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1099px) {
    .philosophy__figure { grid-column: 1 / span 5; }
    .philosophy__body { grid-column: 7 / span 6; padding-top: 0; }

    .concerns__list { grid-column: 1 / span 12; }
    .concerns__visual { display: none; }
    .concern {
        grid-template-columns: 44px minmax(0, 1fr) 72px;
        grid-template-areas:
            "index title thumb"
            ". keywords thumb";
        column-gap: 0;
    }
    .concern__thumb {
        grid-area: thumb;
        display: block;
        width: 72px;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--paper-2);
        justify-self: end;
    }
    .concern__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .concern__arrow { display: none; }

    .doctor__figure { grid-column: 1 / span 6; }
    .doctor__body { grid-column: 7 / span 6; }

    .space__head > div { grid-column: 1 / span 12; }
    .space__head .lead { grid-column: 1 / span 9; margin-top: 32px; }

    .consult__body { grid-column: 1 / span 12; }
    .consult__info { grid-column: 1 / span 12; margin-top: 72px; }

    .site-footer__brand { grid-column: 1 / span 12; }
    .site-footer__nav { grid-column: 1 / span 7; }
    .site-footer__hours { grid-column: 8 / span 5; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
    .section-head { flex-direction: column; align-items: flex-start; gap: 36px; }

    .philosophy__body, .philosophy__figure,
    .doctor__figure, .doctor__body { grid-column: 1 / -1; grid-row: auto; }
    .philosophy__figure { margin-top: 64px; }
    .doctor__body { margin-top: 48px; }

    /* 세로(4:5) 사진은 76% 폭 — 한 장이 화면을 다 덮지 않고, 글의 흐름에 따라 좌우로 엇갈린다 */
    .philosophy__figure { width: 76%; justify-self: end; }
    .doctor__figure { width: 76%; }

    .steps { grid-template-columns: 1fr; gap: 40px; }
    .step__title { margin-top: 20px; }
    .tech-note { grid-template-columns: 1fr; margin-top: 72px; }
    .tech-note__body { grid-column: 1; }
    .tech-note__devices { gap: 0 22px; margin-top: 10px; }

    .ratio-21x9 { aspect-ratio: 4 / 3; }
    .space__head .lead { grid-column: 1 / -1; }
    /* 공간 두 장은 나란히, 두 번째를 조금 내려 엇갈리게 */
    .space__pair > figure:nth-child(1) { grid-column: 1 / span 6; }
    .space__pair > figure:nth-child(2) { grid-column: 7 / span 6; margin-top: 56px; }
    .space__more { grid-column: 1 / -1; }

    .info-list > div { grid-template-columns: 1fr; gap: 10px; }

    .site-footer__nav { grid-column: 1 / -1; }
    .site-footer__hours { grid-column: 1 / -1; }
    .site-footer__meta { flex-direction: column; }

    /* 팝업: 히어로 문구(아래쪽)를 가리지 않게 헤더 아래에, 사진 없이 글만 작게 */
    .popup-layer {
        top: calc(var(--header-h) + 8px); bottom: auto;
        left: 12px; right: 12px;
        max-width: none;
        transform: translateY(-12px);
    }
    .popup { flex-basis: 100%; }
    .popup + .popup { border-left: 0; }
    .popup__media { display: none; }
    .popup__body { padding: 18px 20px 16px; }
    .popup__title { font-size: 15px; }
    .popup__text { margin-top: 6px; font-size: 13.5px; line-height: 1.7; }
    .popup__body .text-link { margin-top: 12px; }
    .popup-layer__bar { padding: 10px 20px; }
}

/* ---------------------------------------------------------------- touch targets */
/* 손가락으로 누르는 화면: 글자 크기와 밑줄 위치는 그대로 두고, 누르는 영역만 높이 44px 안팎으로 넓힌다 */
@media (pointer: coarse) {
    .text-link,
    .site-logo,
    .site-header__cta,
    .site-header__menu { position: relative; }
    .text-link::before,
    .site-logo::before,
    .site-header__cta::before,
    .site-header__menu::before {
        content: "";
        position: absolute;
        inset: -10px -6px;
    }
    .site-header__menu::before { inset: -6px -12px; }
    /* 표 · 본문 안의 글자 링크 */
    .facts a,
    .prose a { position: relative; }
    .facts a::before,
    .prose a::before { content: ""; position: absolute; inset: -12px -4px; }

    .hero__bars { margin: -13px 0; }
    .hero__bar { height: 44px; }
    .hero__bar::before,
    .hero__bar span { top: 21px; }

    .site-footer__nav li + li { margin-top: 0; }
    .site-footer__nav h2 { margin-bottom: 4px; }
    .site-footer__nav a { display: block; padding: 10px 0; }
    .site-footer__meta a,
    .site-menu__info a,
    .popup-layer__bar button { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}