@charset "UTF-8";
/* ============================================================
   landing.css — /landing 리뉴얼 랜딩페이지 (TypeD-1)
   단독 레이아웃(views/layouts/landing.php) 전용.
   사이트 공통 style.css 와 섞이지 않는다.
   ============================================================ */

/* ── 토큰 ───────────────────────────────────────────── */
:root {
    --lp-ink:        #F0ECE5;   /* 기본 본문색 */
    --lp-ink-soft:   #DCD7CE;   /* 보조 본문색 */
    --lp-label:      #C0BBB1;   /* 모노 라벨 */
    --lp-label-dim:  #8C857A;
    --lp-rule:       rgba(255, 255, 255, 0.18);
    --lp-panel:      rgba(255, 255, 255, 0.05);
    --lp-card-dark:  #262B3E;   /* 시그니처 카드 바탕 */
    --lp-card-dark-h:#2F3650;   /* 위 색의 hover 상태 */
    --lp-light-bg:   rgba(240, 236, 229, 0.94);
    --lp-light-ink:  #25293A;
    --lp-light-sub:  #55514A;
    --lp-light-lbl:  #7A7469;

    /* LNB(좌측 레일)·모바일 드로어 전용 팔레트 */
    --lp-gold:      #C8A97E;
    --lp-gold-lite: #E3CBA4;
    --lp-nav-bg:    #1F2439;   /* 드로어 패널 */
    --lp-nav-foot:  #1A1F32;   /* 드로어 하단 예약 블록 */
    --lp-nav-dim:   #8A90AD;   /* 그룹 라벨 */
    --lp-nav-num:   #5C6491;   /* 넘버링 */
    --lp-nav-hair:  rgba(255, 255, 255, 0.09);

    --lp-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
    --lp-sans:  'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    /* JetBrains Mono 에는 한글 글리프가 없다. 한글이 시스템 굴림으로
       떨어지지 않도록 Noto Sans KR 을 폴백에 끼워 둔다(글리프 단위 폴백). */
    --lp-mono:  'JetBrains Mono', 'Consolas', 'Noto Sans KR', 'Apple SD Gothic Neo', monospace;

    --lp-rail: 300px;   /* 좌측 레일(LNB) 너비 */
    --lp-pad:  60px;    /* 섹션 좌우 여백 */
}

/* ── 리셋 ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #252B3A;
}

body {
    font-family: var(--lp-sans);
    color: var(--lp-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

a { color: var(--lp-ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: #A9A196; }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* ── 전체 셸 ────────────────────────────────────────── */
.lp {
    /* 한글은 기본이 글자 단위 줄바꿈이라 '조/화로운'처럼 어절이 쪼개진다.
       어절 단위로 묶고, 끊을 곳이 없는 긴 문자열만 예외로 자른다 */
    word-break: keep-all;
    overflow-wrap: break-word;
    display: grid;
    grid-template-columns: var(--lp-rail) minmax(0, 1fr);
    min-height: 100vh;
    overflow-x: clip;
    background: linear-gradient(180deg,
        #1E2331 0%, #2C3347 16%, #4A5470 38%,
        #6E7899 58%, #525C7A 80%, #252B3A 100%);
}

/* ── 좌측 레일 (데스크톱) ───────────────────────────── */
.lp-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--lp-nav-bg);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

/* 메뉴가 길어지면 레일 안쪽만 스크롤한다 */
.lp-rail__top {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 24px 24px 20px;
}
.lp-rail__top::-webkit-scrollbar { display: none; }

.lp-rail__brand { display: inline-block; }
.lp-rail__logo { height: 22px; width: auto; filter: brightness(0) invert(1); }

.lp-rail .lp-nav { margin-top: 24px; }

.lp-rail__foot {
    flex-shrink: 0;
    padding: 18px 24px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--lp-nav-foot);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lp-rail__hours {
    margin-bottom: 12px;
    font-family: var(--lp-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #6E76A0;
}
.lp-rail__tel {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-family: var(--lp-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--lp-nav-dim);
}
.lp-rail__tel:hover { color: var(--lp-gold); }

/* ── 내비게이션 (좌측 레일 · 모바일 드로어 공용) ────── */
.lp-nav {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lp-nav__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px;
    font-size: 11px;
    font-weight: 500;
    /* 시안은 0.34em 이지만 한글에서는 글자가 흩어져 보여 조금 좁혔다 */
    letter-spacing: 0.2em;
    color: var(--lp-nav-dim);
}
.lp-nav__title i { flex: 1; height: 1px; background: var(--lp-nav-hair); }

/* 넘버링 리스트 — 대표 시술 */
.lp-nav__list { display: flex; flex-direction: column; }
.lp-nav__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.05); }
/* 좌우로 살짝 물려 두고 왼쪽 2px 을 투명 보더로 비워 둔다.
   호버할 때 골드 바가 들어와도 글자가 밀리지 않는다 */
.lp-nav__list a {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 -10px 0 -14px;
    padding: 8px 10px 8px 12px;
    border-left: 2px solid transparent;
    color: #E7E6E2;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.lp-nav__no {
    font-family: var(--lp-mono);
    font-size: 10px;
    color: var(--lp-nav-num);
    transition: color .2s ease;
}
.lp-nav__list .lp-nav__label {
    flex: 1;
    font-family: var(--lp-serif);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* 호버한 한 줄만 골드 바로 끌어올린다 */
.lp-nav__list a:hover,
.lp-nav__list a:active,
.lp-nav__list a:focus-visible {
    border-left-color: var(--lp-gold);
    background: rgba(200, 169, 126, 0.1);
    color: #F4F3F0;
}
.lp-nav__list a:hover .lp-nav__no,
.lp-nav__list a:active .lp-nav__no,
.lp-nav__list a:focus-visible .lp-nav__no { color: var(--lp-gold); }
.lp-nav__list a:hover .lp-nav__arrow,
.lp-nav__list a:active .lp-nav__arrow,
.lp-nav__list a:focus-visible .lp-nav__arrow { opacity: 1; transform: none; }

/* 화살표는 자리만 잡아 두고 호버할 때 밀려 들어온다 */
.lp-nav__arrow {
    font-size: 12px;
    color: var(--lp-gold);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

/* 1열 박스 — 이레라움 */
.lp-nav__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.lp-nav__grid a {
    display: block;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--lp-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: #E7E6E2;
    transition: color .2s ease, border-color .2s ease;
}
.lp-nav__grid a:hover { border-color: rgba(200, 169, 126, 0.55); color: #F4F3F0; }

/* 점선 리더 + 영문 라벨 — 선 · 결 · 톤 */
.lp-nav__leaders { display: flex; flex-direction: column; }
.lp-nav__leaders a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    color: #D9D8D4;
}
.lp-nav__leaders a:hover { color: #fff; opacity: 0.75; }
.lp-nav__leaders .lp-nav__label {
    font-family: var(--lp-serif);
    font-size: 14.5px;
    font-weight: 500;
}
.lp-nav__dash { flex: 1; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); }
.lp-nav__en {
    font-family: var(--lp-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #6E76A0;
}

/* ── 예약 CTA (좌측 레일 · 모바일 드로어 공용) ──────── */
.lp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #D9D8D4;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.lp-cta:hover { border-color: var(--lp-gold); color: #F4F3F0; }

/*
 * 채널 로고. 원본 SVG(Simple Icons, CC0)를 마스크로 깔고 색은
 * currentColor 로 받는다 — 브랜드 색이 레일 톤을 깨지 않게.
 */
.lp-cta__ico {
    flex: none;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    /* 카카오·라인 마크는 면이 꽉 찬 도형이라 라벨보다 튄다. 살짝 눌러 둔다. */
    opacity: .72;
    transition: opacity .2s ease;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.lp-cta:hover .lp-cta__ico { opacity: 1; }

/* 네이버 N 은 면이 아닌 글리프라 같은 15px 이면 되레 커 보인다. */
.lp-cta__ico--naver {
    width: 13px;
    height: 13px;
    -webkit-mask-image: url('/assets/img/landing/ch-naver.svg');
            mask-image: url('/assets/img/landing/ch-naver.svg');
}
.lp-cta__ico--kakao {
    -webkit-mask-image: url('/assets/img/landing/ch-kakao.svg');
            mask-image: url('/assets/img/landing/ch-kakao.svg');
}
.lp-cta__ico--line {
    -webkit-mask-image: url('/assets/img/landing/ch-line.svg');
            mask-image: url('/assets/img/landing/ch-line.svg');
}
.lp-cta__ico--wechat {
    -webkit-mask-image: url('/assets/img/landing/ch-wechat.svg');
            mask-image: url('/assets/img/landing/ch-wechat.svg');
}

/* 네 채널 모두 같은 크기로 쌓는다. */
.lp-booking { display: grid; gap: 8px; }
.lp-booking button.lp-cta {
    width: 100%;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

/* ── 상단바·모바일 메뉴 (태블릿 이하에서만 노출) ────── */
.lp-topbar { display: none; }
.lp-burger { display: none; }
.lp-menu { display: none; }
html.lp-menu-open, html.lp-menu-open body { overflow: hidden; }

/* ── 히어로 ─────────────────────────────────────────── */
.lp-hero { position: relative; width: 100%; overflow: hidden; }
.lp-hero__img { width: 100%; height: auto; }

.lp-hero__grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* 셀 전체가 선/결/톤 안내 페이지로 가는 링크다(LNB 와 같은 주소). */
.lp-hero__cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 2vw 2vw;
    color: inherit;
    text-decoration: none;
    background: linear-gradient(0deg,
        rgba(15, 16, 20, 0.86) 0%,
        rgba(15, 16, 20, 0.60) 34%,
        rgba(15, 16, 20, 0) 66%);
}
.lp-hero__cell .lp-hero__word { transform-origin: left bottom; transition: color .25s ease, transform .25s ease; }
.lp-hero__cell:hover .lp-hero__word,
.lp-hero__cell:focus-visible .lp-hero__word { color: var(--lp-gold-lite); transform: scale(1.08); }
.lp-hero__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 18px;
    margin-top: 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(227, 203, 164, .65);
    color: #E3CBA4;
    font: 500 clamp(11px, .9vw, 15px)/1.5 var(--lp-sans);
}
.lp-hero__cta > span:last-child { font-size: 20px; line-height: 1; transition: transform .25s ease; }
.lp-hero__cell:hover .lp-hero__cta > span:last-child,
.lp-hero__cell:focus-visible .lp-hero__cta > span:last-child { transform: translateX(6px); }
.lp-hero__cell:focus-visible, .lp-hero-stack__item:focus-visible { outline: 2px solid var(--lp-gold-lite); outline-offset: -5px; }
@media (prefers-reduced-motion: reduce) {
    .lp-hero__cell .lp-hero__word, .lp-hero__cta > span:last-child { transition: none; transform: none !important; }
}
.lp-hero__no {
    font-family: var(--lp-mono);
    font-size: clamp(9px, 0.72vw, 13px);
    letter-spacing: 0.28em;
    color: #B9B1A5;
}
.lp-hero__word {
    margin-top: 0.5vw;
    font-family: var(--lp-serif);
    font-size: clamp(26px, 3.2vw, 62px);
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
}
.lp-hero__lead {
    margin-top: 0.7vw;
    font-size: clamp(11px, 1vw, 19px);
    line-height: 1.6;
    color: #fff;
}
.lp-hero__tags {
    margin-top: 0.7vw;
    font-family: var(--lp-mono);
    font-size: clamp(9px, 0.78vw, 14px);
    line-height: 1.9;
    color: #C8C1B5;
}

/* 모바일 전용 히어로(3분할 스택) — 데스크톱에서는 감춘다 */
.lp-hero-stack { display: none; }

/* ── 공통 섹션 ──────────────────────────────────────── */
.lp-section { padding: 110px var(--lp-pad) 100px; }

.lp-head {
    display: flex;
    align-items: baseline;
    gap: 24px;
}
.lp-head--ruled { padding-bottom: 40px; border-bottom: 1px solid var(--lp-rule); }
.lp-head--tight { padding-bottom: 18px; }

.lp-eyebrow {
    flex: none;
    font-family: var(--lp-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--lp-label);
}

.lp-title {
    font-family: var(--lp-serif);
    font-size: 34px;
    font-weight: 300;
    line-height: 1.6;
    text-wrap: pretty;
}

/* 두 문장짜리 문단을 문장 경계에서 끊기게 한다. 한 문장이 통째로 들어가면
   문장 단위로 줄이 나뉘고, 안 들어가면 그 문장 안에서 평소대로 줄바꿈된다 */
.lp-s { display: inline-block; }

.lp-lede {
    max-width: 1180px;
    font-size: 15.5px;
    line-height: 2.05;
    color: var(--lp-ink-soft);
    font-weight: 300;
    /* 두 줄이 될 때는 위아래 길이를 고르게 나눈다 */
    text-wrap: balance;
}

/* ── 01 PHILOSOPHY ──────────────────────────────────── */
.lp-care { display: flex; flex-direction: column; }

.lp-care__item {
    display: grid;
    /* 번호 칸은 '01' 폭이면 충분하다. 넓으면 본문이 오른쪽으로 밀려 균형이 깨진다 */
    grid-template-columns: 40px 1fr 1fr;
    gap: 44px;
    align-items: center;
    padding: 44px 0;
    border-bottom: 1px solid var(--lp-rule);
}
.lp-care__item:last-child { border-bottom: 0; }

.lp-care__no {
    font-family: var(--lp-mono);
    font-size: 13px;
    color: #B8B3A9;
}
.lp-care__name {
    margin-bottom: 14px;
    font-family: var(--lp-serif);
    font-size: 24px;
    font-weight: 400;
}
.lp-care__desc {
    font-size: 15.5px;
    line-height: 2;
    color: var(--lp-ink-soft);
    font-weight: 300;
    text-wrap: pretty;
}
.lp-care__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

/* ── 02 RESULT ──────────────────────────────────────── */
.lp-result {
    background: var(--lp-light-bg);
    color: var(--lp-light-ink);
    padding: 100px var(--lp-pad);
}
.lp-result__inner { display: flex; flex-direction: column; gap: 52px; }

.lp-result__top {
    display: grid;
    /* 왼쪽은 87% 숫자와 두 줄 제목이라 짧다. 오른쪽 설명에 폭을 더 준다 */
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 64px;
    align-items: end;
}
.lp-result__eyebrow { color: var(--lp-light-lbl); }

.lp-result__figure {
    margin-top: 26px;
    font-family: var(--lp-serif);
    font-size: 96px;
    line-height: 0.9;
    font-weight: 300;
}
.lp-result__figure span { font-size: 34px; }

.lp-result__title {
    margin-top: 24px;
    font-family: var(--lp-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.6;
}
.lp-result__desc {
    font-size: 15.5px;
    line-height: 2.05;
    color: var(--lp-light-sub);
    font-weight: 300;
    text-wrap: pretty;
}
.lp-result__ba { width: 100%; height: auto; background: #fff; }
.lp-result__ba-split { display: none; }

.lp-result__note {
    font-family: var(--lp-mono);
    font-size: 11.5px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: #8B857A;
    text-wrap: balance;
}

/* ── 03 SIGNATURE ───────────────────────────────────── */
.lp-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2px;
    background: var(--lp-rule);
}

.lp-card { background: var(--lp-panel); padding-bottom: 34px; }
/* 이 구간은 배경 그라디언트가 밝아져 반투명 패널로는 본문이 묻힌다.
   시그니처 카드만 불투명 다크로 깔아 글자 대비를 확보한다 */
#signature .lp-card { background: var(--lp-card-dark); }
.lp-card__media {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    background: #fff;
}
.lp-card__media--cover { object-fit: cover; background: rgba(255, 255, 255, 0.06); }
.lp-card__media--blue { background: #EAF2F6; }
.lp-card__pad {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #F4EFE8;
}
.lp-card__pad img { width: 100%; height: 100%; object-fit: contain; }

.lp-card__body { padding: 26px 26px 0; }
.lp-card__tag {
    font-family: var(--lp-mono);
    font-size: 11.5px;
    letter-spacing: 0.18em;
    color: var(--lp-label);
}
.lp-card__name {
    margin: 12px 0;
    font-family: var(--lp-serif);
    font-size: 22px;
    font-weight: 400;
}
.lp-card__desc {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--lp-ink-soft);
    font-weight: 300;
    text-wrap: pretty;
}

/* ── 04 DOCTOR ──────────────────────────────────────── */
.lp-doctor { padding: 0 var(--lp-pad) 110px; }
.lp-doctor__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.lp-doctor__img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}
.lp-doctor__title {
    margin-top: 22px;
    font-family: var(--lp-serif);
    font-size: 32px;
    font-weight: 300;
    line-height: 1.6;
}
.lp-doctor__quote {
    margin-top: 30px;
    font-family: var(--lp-serif);
    font-size: 23px;
    line-height: 1.7;
    color: #EFE9DE;
}
.lp-doctor__desc {
    margin-top: 16px;
    font-size: 15.5px;
    line-height: 2.05;
    color: var(--lp-ink-soft);
    font-weight: 300;
    text-wrap: pretty;
}
.lp-doctor__sign {
    margin: 30px 0 22px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.lp-doctor__sign strong { font-family: var(--lp-serif); font-size: 25px; font-weight: 400; }
.lp-doctor__sign span {
    /* 밝은 남보라 배경 위에서 흐린 회갈색은 거의 읽히지 않아 밝은 톤으로 올린다 */
    font-family: var(--lp-mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    color: #F7F3EC;
}
.lp-doctor__career {
    padding-top: 22px;
    border-top: 1px solid var(--lp-rule);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 30px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--lp-ink-soft);
    font-weight: 300;
}

/* ── 05 SPACE ───────────────────────────────────────── */
.lp-space { padding: 0 0 110px; }
.lp-space__head { padding: 0 var(--lp-pad); }
.lp-space__head .lp-lede { margin-bottom: 44px; }
.lp-space__main {
    width: 100%;
    aspect-ratio: 21 / 8;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}
.lp-space__pair {
    margin-top: 2px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.lp-space__pair img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

/* ── 06 MORE ────────────────────────────────────────── */
.lp-more { padding: 0 var(--lp-pad) 110px; }
.lp-more__head {
    margin-top: 20px;
    padding-top: 56px;
    padding-bottom: 18px;
    border-top: 1px solid var(--lp-rule);
}
.lp-more .lp-grid-cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.lp-more__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}
.lp-more__thumb--yt { background: #CED8E4; }
.lp-more__thumb--ac { background: #22242A; }
/* 배너를 2:1 박스 아래쪽에 붙인다. 배너 위쪽 여백은 배너 자체의 윗변 색과
   같은 #CED8E4 라 이어져 보이고, 아래쪽은 잘리는 곳 없이 딱 맞게 끝난다. */
.lp-more__thumb--yt img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}
/* 배너가 박스의 아래 83.5%(2 / 2.395)만 차지하므로 재생 배지도 그만큼 내려
   배너 한가운데에 오게 한다. */
.lp-more__thumb--yt .lp-play { top: 58.3%; }
.lp-more__thumb--ac img { width: 100%; height: 100%; object-fit: cover; }

.lp-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(23, 24, 28, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.lp-play::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 17px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    margin-left: 5px;
    transition: border-left-color .22s ease;
}
.lp-more__card { display: block; color: inherit; }
.lp-more__card:hover { color: inherit; }

/* 호버 시 배지를 어둡게만 하면 어두운 썸네일(학술활동) 위에서는 변화가 보이지
   않는다. 밝기를 뒤집어 배경 명암과 무관하게 반응이 읽히게 한다. */
.lp-more__card:hover .lp-play,
.lp-more__card:focus-visible .lp-play {
    background: rgba(232, 228, 220, 0.94);
    border-color: #E8E4DC;
    transform: translate(-50%, -50%) scale(1.07);
}
.lp-more__card:hover .lp-play::before,
.lp-more__card:focus-visible .lp-play::before { border-left-color: #232838; }
.lp-more__card .lp-card__body { padding: 26px 30px 0; }
.lp-more__card .lp-card__name { margin: 10px 0 8px; }

/* ── 푸터 ───────────────────────────────────────────── */
.lp-footer {
    padding: 44px var(--lp-pad) 60px;
    border-top: 1px solid var(--lp-rule);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 36px;
    flex-wrap: wrap;
}
.lp-footer__lead {
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--lp-ink-soft);
    font-weight: 300;
}
.lp-footer__biz {
    margin-top: 18px;
    font-size: 12.5px;
    line-height: 1.95;
    color: #ADA79D;
    font-weight: 300;
}
.lp-footer__biz a { color: #ADA79D; text-decoration: underline; text-underline-offset: 3px; }
.lp-footer__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.lp-footer__link {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #C0BBB1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    padding-bottom: 3px;
}
.lp-footer__copy {
    font-family: var(--lp-mono);
    font-size: 11.5px;
    letter-spacing: 0.2em;
    color: #6F6A62;
}

/* ── 영상 모달 ──────────────────────────────────────── */
.lp-modal {
    width: min(1120px, 92vw, calc(84vh * 16 / 9));
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lp-ink);
    overflow: visible;
}
.lp-modal::backdrop,
.lp-qr-modal::backdrop {
    background: rgba(10, 11, 15, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.lp-modal__inner { position: relative; }

.lp-modal__frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0B0C0F;
    border: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
.lp-modal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/*
 * 채널 QR 모달(라인·위챗 공용). 채널마다 이미지 비율이 달라(라인 1:1,
 * 위챗 세로 QR) 폭을 고정하지 않는다. 이미지의 max-height 가 높이를 잡고
 * <dialog> 는 그 폭에 맞춰 줄어든다.
 */
.lp-qr-modal {
    width: auto;
    max-width: min(540px, 88vw);
    max-height: none;
    padding: 0;
    border: 0;
    background: #fff;
    overflow: visible;
}
.lp-qr-modal__inner { position: relative; }
.lp-qr-modal img { display: block; width: auto; height: auto; max-width: 100%; max-height: 82vh; }
.lp-qr-modal img[hidden] { display: none; }

.lp-modal__close {
    position: absolute;
    top: -54px;
    right: -2px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 300 30px/1 var(--lp-sans);
    color: #E8E4DC;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lp-modal__close:hover,
.lp-modal__close:focus-visible {
    background: #E8E4DC;
    border-color: #E8E4DC;
    color: #232838;
}

/* 모달이 열린 동안 뒤 페이지는 스크롤하지 않는다.
   <dialog> 는 바깥 클릭만 막고 휠 스크롤은 막지 않는다. */
html.lp-modal-open,
html.lp-modal-open body { overflow: hidden; }

/* 닫기 버튼을 위에 둘 여백이 없는 화면에서는 프레임 안쪽 모서리로 옮긴다 */
@media (max-width: 640px), (max-height: 560px) {
    .lp-modal { width: min(96vw, calc(78vh * 16 / 9)); }
    .lp-modal__close {
        top: -50px;
        right: 0;
        width: 38px;
        height: 38px;
        font-size: 26px;
    }
}

/* ── 하단 고정 CTA (모바일) ─────────────────────────── */
.lp-dock { display: none; }

/* ============================================================
   반응형
   ============================================================ */

/* 넓은 노트북 — 여백만 축소 */
@media (max-width: 1400px) {
    :root { --lp-pad: 44px; }
    .lp-title { font-size: 30px; }
    .lp-result__figure { font-size: 82px; }
}

@media (max-width: 1180px) {
    :root { --lp-rail: 262px; }
    .lp-care__item { grid-template-columns: 34px 1fr 1fr; gap: 28px; }
    .lp-doctor__inner, .lp-result__top { gap: 40px; }
}

/* ── 태블릿·모바일: 레일 → 상단바 ───────────────────── */
@media (max-width: 1000px) {
    :root { --lp-pad: 20px; }

    .lp { display: block; }
    .lp-rail { display: none; }

    .lp-topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: block;
        background: rgba(26, 30, 43, 0.94);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--lp-rule);
    }
    .lp-topbar__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px var(--lp-pad);
    }
    .lp-topbar__logo { height: 20px; width: auto; filter: brightness(0) invert(1); }
    .lp-topbar .lp-cta { padding: 9px 16px; font-size: 12.5px; }

    /* 햄버거 */
    .lp-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 9px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .lp-burger span {
        display: block;
        height: 1.5px;
        border-radius: 1px;
        background: #E8E4DC;
    }

    /* 전체 메뉴 */
    .lp-menu {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: flex;
        flex-direction: column;
        background: var(--lp-nav-bg);
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .22s ease, transform .22s ease;
    }
    .lp-menu.is-open { opacity: 1; transform: none; }
    .lp-menu[hidden] { display: none; }

    .lp-menu__bar {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px var(--lp-pad);
        border-bottom: 1px solid var(--lp-rule);
    }
    .lp-menu__close {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: #E8E4DC;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
    }

    .lp-menu__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 30px var(--lp-pad) 26px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    /* 좁은 화면에서는 같은 문법을 유지한 채 타이포만 키운다 */
    .lp-menu .lp-nav__title { margin-bottom: 15px; }
    .lp-menu .lp-nav__list a { margin: 0 -12px 0 -14px; padding: 12px; }
    .lp-menu .lp-nav__list .lp-nav__label { font-size: 18px; }
    .lp-menu .lp-nav__grid a { padding: 14px; font-size: 15px; }
    .lp-menu .lp-nav__leaders a { padding: 12px 0; }
    .lp-menu .lp-nav__leaders .lp-nav__label { font-size: 16px; }

    .lp-menu__hours {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--lp-ink-soft);
        font-weight: 300;
    }
    .lp-menu__hours > div { display: flex; gap: 14px; }
    .lp-menu__hours dt { min-width: 104px; color: #B5AFA5; }
    .lp-menu__hours dd { margin: 0; }

    .lp-menu__foot {
        flex-shrink: 0;
        padding: 16px var(--lp-pad) calc(16px + env(safe-area-inset-bottom, 0px));
        background: var(--lp-nav-foot);
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    /* 히어로: 합성 이미지 대신 3분할 스택 */
    .lp-hero { display: none; }
    .lp-hero-stack { display: block; }
    .lp-hero-stack__item {
        position: relative;
        display: block;
        color: inherit;
        text-decoration: none;
    }
    .lp-hero-stack__item img {
        width: 100%;
        height: auto;
        /* 태블릿 폭에서 패널 한 장이 화면을 다 먹지 않도록 높이를 제한한다 */
        max-height: min(72vh, 620px);
        object-fit: cover;
        object-position: center 34%;
    }
    .lp-hero-stack__cap {
        position: absolute;
        inset: auto 0 0 0;
        padding: 78px var(--lp-pad) 22px;
        background: linear-gradient(0deg,
            rgba(15, 16, 20, 0.94) 0%,
            rgba(15, 16, 20, 0.82) 46%,
            rgba(15, 16, 20, 0.46) 74%,
            rgba(15, 16, 20, 0) 100%);
    }
    .lp-hero-stack__cap .lp-hero__no { font-size: 10px; color: #D6CFC4; }
    .lp-hero-stack__cap .lp-hero__word { margin-top: 4px; font-size: 34px; }
    .lp-hero-stack__cap .lp-hero__lead { margin-top: 6px; font-size: 14px; }
    .lp-hero-stack__cap .lp-hero__tags { margin-top: 5px; font-size: 11px; }

    /* 상단바에 앵커가 가리지 않도록 */
    section[id] { scroll-margin-top: 92px; }

    /* 섹션 리듬 축소 */
    .lp-section { padding: 64px var(--lp-pad) 56px; }
    .lp-result   { padding: 64px var(--lp-pad); }
    .lp-doctor   { padding: 0 var(--lp-pad) 64px; }
    .lp-space    { padding: 0 0 64px; }
    .lp-more     { padding: 0 var(--lp-pad) 90px; }
    .lp-more__head { padding-top: 40px; }

    /* 머리글 세로 배치 */
    .lp-head { display: block; }
    .lp-head--ruled { padding-bottom: 24px; }
    .lp-eyebrow { display: block; margin-bottom: 12px; }
    .lp-title { font-size: 23px; line-height: 1.62; }
    .lp-lede { font-size: 14.5px; line-height: 1.95; }

    /* 01 */
    .lp-care__item {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 30px 0;
    }
    .lp-care__no { font-size: 12px; letter-spacing: 0.14em; }
    .lp-care__name { margin-bottom: 10px; font-size: 19px; }
    .lp-care__desc { font-size: 14.5px; line-height: 1.9; }

    /* 02 */
    .lp-result__inner { gap: 32px; }
    .lp-result__top { grid-template-columns: 1fr; gap: 22px; align-items: start; }
    .lp-result__figure { margin-top: 16px; font-size: 66px; }
    .lp-result__figure span { font-size: 26px; }
    .lp-result__title { margin-top: 16px; font-size: 21px; }
    .lp-result__desc { font-size: 14.5px; line-height: 1.95; }
    .lp-result__ba { display: none; }
    .lp-result__ba-split { display: grid; gap: 10px; }
    .lp-result__ba-split img { width: 100%; height: auto; background: #fff; }

    /* 03 */
    .lp-grid-cards { grid-template-columns: 1fr; }
    .lp-more .lp-grid-cards { grid-template-columns: 1fr; }
    .lp-card { padding-bottom: 28px; }
    .lp-card__body, .lp-more__card .lp-card__body { padding: 22px var(--lp-pad) 0; }
    .lp-card__name { font-size: 19px; }

    /* 04 */
    .lp-doctor__inner { grid-template-columns: 1fr; gap: 28px; }
    .lp-doctor__img { aspect-ratio: 4 / 4.4; }
    .lp-doctor__title { margin-top: 14px; font-size: 22px; }
    .lp-doctor__quote { margin-top: 22px; font-size: 19px; }
    .lp-doctor__desc { font-size: 14.5px; line-height: 1.95; }
    .lp-doctor__career { grid-template-columns: 1fr; gap: 8px; font-size: 13.5px; }

    /* 05 */
    .lp-space__main { aspect-ratio: 16 / 10; }
    .lp-space__pair { grid-template-columns: 1fr; }

    /* 푸터 + 도크 */
    .lp-footer {
        padding: 34px var(--lp-pad) 40px;
        display: block;
    }
    .lp-footer__side {
        margin-top: 24px;
        align-items: flex-start;
    }

    .lp-dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1px;
        background: rgba(255, 255, 255, 0.22);
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }
    .lp-dock a,
    .lp-dock button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 10px 4px;
        text-align: center;
        font: inherit;
        font-size: 11px;
        letter-spacing: 0.01em;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        background: #232838;
        color: #EDE8E0;
        border: 0;
        cursor: pointer;
    }
    .lp-dock a.is-primary { background: #E8E4DC; color: #232838; font-weight: 500; }

    body { padding-bottom: 0; }
    .lp { padding-bottom: 54px; }
}

@media (max-width: 420px) {
    .lp-title { font-size: 21px; }
    .lp-hero-stack__cap .lp-hero__word { font-size: 30px; }
    .lp-result__figure { font-size: 56px; }
}

/* 모션 최소화 선호 */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }