/* 예일안과 메인 리뉴얼 (index_renewal.php 전용, 2026-10-13)
   기존 전역 CSS 를 싣지 않는 페이지라 여기서 기본값(reset)을 잡는다. */

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--rn-white);
    color: var(--rn-black);
    font-family: var(--rn-font-base);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.02em;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.title-hide {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.rn-main { position: relative; padding-top: var(--rn-header-h); overflow-x: clip; }

/* 영문 대제목 (Cormorant Infant Medium 130 / 1 / -2%) */
.rn-display {
    font-family: var(--rn-font-serif);
    font-weight: 500;
    font-size: var(--rn-display);
    line-height: 1;
    letter-spacing: -0.02em;
}
/* 섹션 공통 카피: 한글 소제목 + 설명 */
.rn-copy__sub { font-size: var(--rn-h3); font-weight: 600; line-height: 1.4; }
.rn-copy__desc { margin-top: 8px; font-size: var(--rn-body-l); line-height: 1.6; }

/* 스크롤 등장 (main.js 가 .is-in 부여) */
.rn-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--rn-ease), transform 1s var(--rn-ease); }
.rn-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rn-reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   1. Hero
   - 전체 높이 = 화면 + 728px(시안 188:751 스크롤 구간), 안쪽 sticky 가 화면에 고정
   =================================================================== */
.rn-hero {
    position: relative;
    height: calc(max(var(--rn-vh) * 100, 640px) + 728px);
    margin-top: calc(var(--rn-header-h) * -1); /* 헤더 아래까지 배경이 깔리도록 */
    background: #0f1128;
}
.rn-hero__sticky {
    position: sticky;
    top: 0;
    height: calc(var(--rn-pin-vh) * 100);
    min-height: 640px;
    overflow: hidden;
}
.rn-hero__bg, .rn-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rn-hero__bg { z-index: 0; } /* 낮 사진(z-index 1)이 엠블럼 위로 올라오지 않게 배경 안에 가둔다 */
.rn-hero__bg img { object-fit: cover; object-position: 60% 50%; }
.rn-hero__bg::after { /* 좌측 남색 라디얼 (multiply 70%) */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 34% 83% at 0% 50%, rgba(27, 32, 70, .7), rgba(27, 32, 70, 0));
    mix-blend-mode: multiply;
}
/* 스크롤 구간의 낮 사진 (시안 188:751 — 남색 라디얼 없음 → 라디얼 위에 깐다).
   아래에서 위로 덮어 올라온다 — 덮인 정도는 main 동작(hero)이 정한다 */
.rn-hero__bg .rn-hero__bg-day { z-index: 1; clip-path: inset(100% 0 0 0); }
.rn-hero__emblem {
    position: absolute;
    z-index: 1; /* 가로·세로 선(.rn-hero__lines)·블러 칸보다 위 — 선이 로고 뒤로 지나간다 */
    left: 11.4%;
    top: 41.3%;
    width: 25.8vw;
    max-width: 496px;
    aspect-ratio: 1;
}
.rn-hero__emblem img { width: 100%; height: 100%; object-fit: contain; }

/* 3D 엠블럼 (히어로·환자 이야기 공용): 캔버스가 첫 장면을 그리면(.is-3d) 나타난다.
   포스터 이미지는 평소 숨어 있고, 3D 를 못 그릴 때만(.is-fallback — emblem3d · RenewalMotion) 보인다.
   늦게라도 3D 가 그려지면 이미지와 교차 (.is-3d 규칙이 뒤에 있어 이긴다) */
.rn-emblem3d { pointer-events: none; }
.rn-emblem3d > img, .rn-emblem3d > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; transition: opacity 1s var(--rn-ease); }
.rn-emblem3d > img { opacity: 0; }
.rn-emblem3d.is-fallback > img { opacity: 1; }
.rn-emblem3d > canvas { opacity: 0; }
.rn-emblem3d.is-3d > canvas { opacity: 1; }
.rn-emblem3d.is-3d > img { opacity: 0; }

/* 첫 화면 등장 순서: 글자 → 야경 사진 → 3D 엠블럼 → 팝업(가장 나중).
   모두 CSS 로 움직인다 (opacity·transform 만 — 브라우저가 바쁜 중에도 끊기지 않는다). JS 번들 도착을 기다리지 않는다.
   - 타이틀·문구·Scroll Down: 페이지가 열리자마자 (예전 GSAP 첫 진입과 같은 시간·순서)
   - 사진: Hero 의 짧은 스크립트가 사진을 다 받으면 붙이는 .is-ready 부터 — 받는 중에 한 줄씩 그려지는 모습을 감춘다
   - 엠블럼: 3D 가 첫 장면을 그릴 때 (.is-3d) */
@keyframes rnHeroUp { from { opacity: 0; transform: translateY(60%); } }
@keyframes rnHeroSlide { from { transform: translateY(100%); } }
@keyframes rnHeroFade { from { opacity: 0; } }
.rn-hero__title { animation: rnHeroUp 1.4s cubic-bezier(.215, .61, .355, 1) .2s both; }
.rn-hero__copy { animation: rnHeroSlide 1.2s cubic-bezier(.215, .61, .355, 1) .5s both; }
.rn-hero__scroll { animation: rnHeroFade 1s ease-out .9s both; }
.rn-hero__bg { transform: scale(1.1); transition: transform 2.4s cubic-bezier(.215, .61, .355, 1); }
.rn-hero.is-ready .rn-hero__bg { transform: none; }
.rn-hero__bg > img:first-child { opacity: 0; transition: opacity .9s var(--rn-ease); }
.rn-hero.is-ready .rn-hero__bg > img:first-child { opacity: 1; }
/* 엠블럼: 3D 가 첫 장면을 그리면 아래에서 살짝 올라오며 나타난다 (모델도 옆으로 돌아 있다가 정면으로 — emblem3d 첫 등장).
   3D 를 못 그리면 포스터 이미지가 같은 모양으로 */
.rn-hero__emblem > canvas { transform: translateY(32px) scale(.96); transition: opacity 1.2s var(--rn-ease), transform 1.4s var(--rn-ease); }
.rn-hero__emblem.is-3d > canvas { transform: none; }
.rn-hero__emblem > img { opacity: 0; transform: translateY(32px) scale(.96); transition: opacity 1.2s var(--rn-ease), transform 1.4s var(--rn-ease); }
.rn-hero.is-ready .rn-hero__emblem.is-fallback:not(.is-3d) > img { opacity: 1; transform: none; }

/* 메인 팝업 (MainPopup): 페이지를 다 받고 3D 엠블럼까지 자리 잡은 뒤 가장 나중에 — AOS fade-up 과 같은 모양(아래 100px 에서 올라옴).
   모바일 팝업은 transform 으로 가운데 정렬이라 움직임은 translate 로 따로 준다 */
.popup_group_1 { opacity: 0; translate: 0 100px; transition: opacity .8s ease, translate .8s cubic-bezier(.215, .61, .355, 1); will-change: opacity, translate; }
.popup_group_1.is-in { opacity: 1; translate: none; }

.rn-hero__lines span { position: absolute; background: rgba(255, 255, 255, .6); }
.rn-hero__vline { top: 0; bottom: 0; left: 50%; width: 1px; }
/* 아래 띠(문구 박스 · 왼쪽 블러) 높이 — 시안 249 (화면이 낮으면 24vh 까지) */
.rn-hero { --rn-hero-foot: min(249px, var(--rn-vh) * 24); }
.rn-hero__hline { left: 0; right: 0; bottom: var(--rn-hero-foot); height: 1px; }
.rn-hero__cross { position: absolute; left: calc(50% - 16px); bottom: calc(var(--rn-hero-foot) - 16px); }
/* 왼쪽 아래 칸 블러 (피그마 코멘트 #29) — 엠블럼보다 아래에 깔린다 */
.rn-hero__veil {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: var(--rn-hero-foot);
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* 상단 흰 띠: sticky 밖이라 스크롤하면 위로 사라짐 */
.rn-hero__band {
    position: absolute;
    top: 0;
    left: 50%; /* 왼쪽은 타이틀 박스가 흰 배경을 가짐 → 겹쳐서 타이틀을 가리지 않게 오른쪽만 */
    right: 0;
    z-index: 2;
    height: 242px;
    background: var(--rn-white);
}
/* 좌상단 타이틀 박스: sticky 안이라 상단에 붙어 따라옴 */
.rn-hero__title-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 50%;
    height: 384px;
    padding: 217px 0 0 var(--rn-margin);
    background: var(--rn-white);
}
.rn-hero__title { font-weight: 700; color: var(--rn-blue-600); white-space: nowrap; } /* 피그마 코멘트 #24: Bold */

.rn-hero__scroll {
    position: absolute;
    top: 424px;
    left: var(--rn-margin);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--rn-gray-200);
}
.rn-hero__scroll-bar {
    position: relative;
    width: 2px;
    height: 60px;
    overflow: hidden;
    background: rgba(255, 255, 255, .15);
}
.rn-hero__scroll-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
    animation: rnScrollBar 2.2s var(--rn-ease) infinite;
}
@keyframes rnScrollBar {
    0% { transform: translateY(-100%); }
    60%, 100% { transform: translateY(100%); }
}

.rn-hero__copy {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 50%;
    height: var(--rn-hero-foot);
    padding: 28px 36px;
    background: var(--rn-white); /* 피그마 코멘트 #25: 흰 박스 · 42px (시안 181:699) */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: clamp(26px, 2.19vw, 42px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--rn-gray-700);
}

@media (max-width: 1360px) {
    .rn-hero__title-box { height: 320px; padding-top: 180px; }
    .rn-hero__scroll { top: 360px; }
}
@media (max-width: 1024px) {
    .rn-hero { height: calc(max(var(--rn-vh) * 100, 640px) + 400px); }
    .rn-hero__band { left: 70%; height: 180px; }
    .rn-hero__title-box { width: 70%; height: 260px; padding-top: 150px; }
    .rn-hero__scroll { top: 300px; }
    .rn-hero__emblem { left: 8%; top: 44%; width: 36vw; }
    .rn-hero__copy { width: 70%; height: auto; padding: 24px 28px; }
    .rn-hero__hline, .rn-hero__cross, .rn-hero__veil { display: none; }
}
@media (max-width: 768px) {
    /* 배경 흰색: 고정 화면은 툴바가 보일 때 높이(svh)라, 툴바가 접히면 아래에 틈이 남는다 → 바로 위 문구 상자(흰 박스)와
       같은 색으로 이어 보이게 (예전 남색은 띠로 보였다) */
    .rn-hero { height: calc(max(var(--rn-svh) * 100, 560px) + 240px); background: var(--rn-white); }
    .rn-hero__sticky { height: calc(var(--rn-pin-svh) * 100); min-height: 560px; background: #0f1128; } /* 사진이 서서히 나타나는 바탕은 그대로 남색 */
    .rn-hero__band { display: none; }
    .rn-hero__title-box { width: 100%; height: 200px; padding: 120px 20px 0; }
    .rn-hero__title { font-size: clamp(44px, 12.5vw, 64px); }
    .rn-hero__scroll { display: none; }
    .rn-hero__bg img { object-position: 72% 50%; }
    /* 엠블럼: 아래 문구 상자(위 여백 20 + 두 줄 약 68 + 아래 여백)에 붙지 않게 8px 띄운다 — 인앱은 아래 여백이 커서 같이 올라간다 */
    .rn-hero__emblem { left: 6%; top: auto; bottom: calc(var(--rn-hero-copy-pb) + 96px); width: 46vw; }
    .rn-hero__vline { display: none; }
    .rn-hero { --rn-hero-copy-pb: 84px; } /* 하단 퀵바 높이만큼 */
    .kakao-inapp .rn-hero { --rn-hero-copy-pb: 104px; } /* 인앱 하단 툴바가 퀵바를 가리는 만큼 더 (common.css 퀵바와 같은 값) */
    .naver-inapp .rn-hero { --rn-hero-copy-pb: 108px; }
    .rn-hero__copy { width: 100%; padding: 20px 20px var(--rn-hero-copy-pb); }
}

/* ===================================================================
   2. Gate — 노안·백내장 / 실크라식 (화면 고정 + 스크롤로 전환)
   =================================================================== */
.rn-gate { position: relative; height: calc(var(--rn-vh) * 200 - var(--rn-header-h)); background: #111; }
.rn-gate__sticky { position: sticky; top: var(--rn-header-offset); height: calc(var(--rn-pin-vh) * 100 - var(--rn-header-offset)); min-height: 560px; overflow: hidden; transition: top .5s var(--rn-ease), height .5s var(--rn-ease); } /* 헤더 바로 아래에 고정 (헤더가 숨으면 위로) */
.rn-gate__bg, .rn-gate__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rn-gate__bg img { object-fit: cover; }
.rn-gate__bg--silk img { object-position: 50% 20%; }
.rn-gate__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 36%),
        rgba(0, 0, 0, .2);
}
.rn-gate__bg--silk { opacity: 0; } /* main.js 가 스크롤에 맞춰 0 → 1 */

.rn-gate__head {
    position: absolute;
    left: var(--rn-margin);
    bottom: 13.5%;
    z-index: 2;
    color: var(--rn-white);
}
.rn-gate__title { white-space: nowrap; }
.rn-gate__sub { margin-top: 24px; font-size: var(--rn-h2); font-weight: 600; line-height: 1.35; }
.rn-gate__desc { margin-top: 8px; font-size: var(--rn-body-l); line-height: 1.6; }

/* 우측 세로 유리 패널 (626 / 1920, 중심 50%+527) */
.rn-gate__glass {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 61.15%;
    z-index: 2;
    width: 32.6%;
    border-left: 1.5px solid var(--rn-white);
    border-right: 1.5px solid var(--rn-white);
    background: rgba(255, 255, 255, .01);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.rn-gate__card {
    --c: var(--rn-blue-600);
    --c-bg: var(--rn-blue-50);
    position: absolute;
    top: 0; /* 시작 위치: 고정 영역(헤더 바로 아래) 상단에 붙음 */
    left: -1.5px;
    right: -1.5px;
    min-height: min(378px, var(--rn-vh) * 40);
    padding: 30px 40px 88px;
    background: linear-gradient(to bottom, #fff, var(--c-bg));
}
.rn-gate__card--silk { --c: var(--rn-red-600); --c-bg: var(--rn-red-50); top: auto; bottom: 0; } /* 끝 위치: 섹션 하단에 붙음 */
.rn-gate__card-eng {
    font-family: var(--rn-font-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c);
}
.rn-gate__card-title { margin-top: 12px; font-size: var(--rn-h2); font-weight: 600; line-height: 1.35; letter-spacing: -0.025em; color: var(--c); }
.rn-gate__card-desc { margin-top: 24px; font-size: var(--rn-body-l); line-height: 1.6; color: var(--rn-gray-600); }
.rn-gate__card-btn {
    --rn-fill-bg: var(--c);
    position: absolute;
    right: 40px;
    bottom: 32px;
    padding: 5px 12px;
    border: 1px solid var(--c);
    font-size: 16px;
    line-height: 1.7;
    color: var(--c);
}

@media (max-width: 1360px) {
    .rn-gate__glass { left: 56%; width: 40%; }
    .rn-gate__card-desc br { display: none; }
}
@media (max-width: 1024px) {
    .rn-gate__head { top: calc(var(--rn-header-offset) + 40px); bottom: auto; }
    .rn-gate__glass { left: auto; right: var(--rn-margin); width: 56%; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .rn-gate__card, .rn-gate__card--silk { top: auto; bottom: 8%; min-height: 0; }
}
@media (max-width: 768px) {
    .rn-gate__sticky { height: calc(var(--rn-pin-svh) * 100 - var(--rn-header-offset)); min-height: 500px; }
    .rn-gate__head { left: 20px; right: 20px; }
    .rn-gate__title { white-space: normal; font-size: clamp(44px, 12.5vw, 64px); }
    .rn-gate__sub { margin-top: 14px; }
    .rn-gate__glass { left: 20px; right: 20px; width: auto; }
    .rn-gate__card, .rn-gate__card--silk { bottom: 90px; padding: 24px 20px 72px; }
    .rn-gate__card-desc { margin-top: 14px; font-size: 14px; }
    .rn-gate__card-btn { right: 20px; bottom: 20px; font-size: 14px; }
}

/* ===================================================================
   3. Patient Stories — 영상후기 4건, 엇갈린 배치 (a-lign 참고)
   카드 위치: 1640 x 1461 캔버스 기준 % (x, y, w)
   =================================================================== */
.rn-stories {
    position: relative;
    overflow: hidden;
    padding: 180px var(--rn-margin);
    background: linear-gradient(to bottom, var(--rn-blue-600), var(--rn-blue-900));
    color: var(--rn-white);
}
.rn-stories__emblem {
    position: absolute;
    top: 10.61%;   /* 시안 310:1530: 시작 (919, 229) · 471 — 섹션(1920 × 2158) 기준 */
    left: 47.86%;
    width: 24.53vw;
    max-width: 471px;
    aspect-ratio: 1;
    pointer-events: none;
    will-change: transform; /* PC: 스크롤 따라 경로 이동 (main.js stories) */
}
.rn-stories__head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 20px;
}
.rn-stories__copy h2 { white-space: nowrap; }
.rn-stories__sub { margin-top: 24px; font-size: var(--rn-h2); font-weight: 600; line-height: 1.35; }
.rn-stories__desc { margin-top: 8px; font-size: var(--rn-body-l); line-height: 1.6; }
.rn-stories__more {
    --rn-fill-bg: var(--rn-white);
    --rn-fill-fg: var(--rn-blue-600);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 28px;
    padding: 12px 12px 12px 32px;
    border: 1px solid var(--rn-white);
    border-radius: 12px; /* 피그마 코멘트 #35: 흰 반투명 + 살짝 라운드 (시안 131:1983) */
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: var(--rn-h3);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.rn-stories__more i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: var(--rn-white);
    transition: background-color .5s;
}
.rn-stories__more:hover i { background: var(--rn-blue-50); }

.rn-stories__list {
    position: relative;
    z-index: 2;
    max-width: 1640px;
    aspect-ratio: 1640 / 1461;
    margin: 100px auto 0;
}
.rn-story { position: absolute; }
.rn-story--1 { left: 0;       top: 0;      width: 41.46%; }
.rn-story--2 { left: 73.78%;  top: 0;      width: 26.22%; }
.rn-story--3 { left: 51.22%;  top: 37.51%; width: 36.59%; }
.rn-story--4 { left: 9.88%;   top: 73.31%; width: 28.66%; }
.rn-story__link { display: block; }
.rn-story__thumb {
    position: relative;
    aspect-ratio: 344 / 193;
    overflow: hidden;
    background: var(--rn-blue-700);
}
.rn-story__thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--rn-ease);
}
.rn-story__link:hover .rn-story__thumb > img { transform: scale(1.05); }
.rn-story__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid var(--rn-white-30);
    border-radius: 999px;
    background: var(--rn-white-70);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translate(-50%, -50%);
    transition: transform .5s var(--rn-ease), background-color .5s;
}
.rn-story__link:hover .rn-story__play { transform: translate(-50%, -50%) scale(1.12); background: var(--rn-white); }
.rn-story__info { margin-top: 24px; }
.rn-story__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rn-story__cate {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rn-h4);
    font-weight: 600;
    line-height: 1.45;
}
.rn-story__lens { padding: 0 20px; background: var(--rn-white); color: var(--rn-blue-600); }
.rn-story__name { flex-shrink: 0; font-size: 16px; font-weight: 500; line-height: 1; color: var(--rn-gray-400); }
.rn-story__eyes { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; font-size: var(--rn-body-l); line-height: 1.6; }
.rn-story__eyes div { display: flex; flex-wrap: wrap; gap: 0 12px; }
.rn-story__eyes dt { width: 20px; margin-right: 8px; font-weight: 700; }
.rn-story__eyes dd { margin: 0; white-space: nowrap; }

@media (max-width: 1360px) {
    .rn-stories { padding-top: 140px; padding-bottom: 140px; }
    .rn-stories__more { font-size: 18px; gap: 18px; padding-left: 22px; }
    .rn-stories__more i { width: 48px; height: 48px; }
    .rn-story__name { font-size: 14px; }
}
@media (max-width: 1024px) {
    .rn-stories__head { flex-direction: column; align-items: flex-start; padding: 0; }
    .rn-stories__copy h2 { white-space: normal; }
    .rn-stories__emblem { top: 120px; left: auto; right: -4%; width: 34vw; opacity: .7; }
    .rn-stories__list {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px 32px;
        margin-top: 64px;
    }
    .rn-story { position: static; width: auto !important; }
    .rn-story:nth-child(even) { margin-top: 80px; }
    .rn-stories__list.is-dev-empty { min-height: 1400px; } /* 개발 모드 · 후기 0건 (Stories.tsx) */
}
@media (max-width: 768px) {
    .rn-stories { padding: 90px 20px; }
    .rn-stories__sub { margin-top: 14px; }
    .rn-stories__more { width: 100%; justify-content: space-between; font-size: 16px; padding: 8px 8px 8px 18px; }
    .rn-stories__more i { width: 40px; height: 40px; }
    .rn-stories__list { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
    .rn-story:nth-child(even) { margin-top: 0; }
    .rn-story:nth-child(even) .rn-story__link { margin-left: 12%; }
    .rn-story:nth-child(odd) .rn-story__link { margin-right: 12%; }
    .rn-story__play { width: 52px; height: 52px; }
    .rn-story__info { margin-top: 16px; }
    .rn-story__top { flex-wrap: wrap; }
    .rn-story__lens { padding: 0 12px; }
    .rn-story__eyes { font-size: 15px; }
}

/* ===================================================================
   4. Why Yeil — 인트로 + 01~04 (진입 시 한 번 화면 고정, 클릭으로 단계 전환)
   =================================================================== */
.rn-why { background: var(--rn-white); }
.rn-why__intro { display: grid; grid-template-columns: 1fr 1fr; min-height: 729px; }
.rn-why__intro-left {
    position: relative;
    overflow: clip; /* hidden 은 스크롤 컨테이너가 되어 안쪽 sticky 가 동작하지 않음 */
    padding: 40px;
    border: 1px solid var(--rn-black);
}
/* "스크롤 시 프레임 내 텍스트 팔로잉" */
.rn-why__intro-text { position: sticky; top: calc(var(--rn-header-offset) + 40px); z-index: 1; transition: top .5s var(--rn-ease); }
.rn-why__intro-text h2 { color: var(--rn-black); }
.rn-why__intro-sub { margin-top: 40px; font-size: var(--rn-h3); font-weight: 600; line-height: 1.4; color: var(--rn-blue-700); }
.rn-why__intro-desc { margin-top: 8px; font-size: var(--rn-body-l); line-height: 1.6; color: var(--rn-blue-700); }
.rn-why__deco {
    position: absolute;
    right: 5%;
    bottom: 6.3%;
    width: 25.7%;
    max-width: 247px;
    pointer-events: none;
}
/* 엠블럼이 내려와 멈추는 자리 — 시안 310:1530 (인트로 왼쪽 960 × 729 안 left 585 · top 382 · 286) */
.rn-why__emblem-spot {
    position: absolute;
    left: 60.94%;  /* 시안 310:1530: 도착 (585, 2540 → 인트로 안 382) · 286 */
    top: 52.4%;
    width: 14.9vw;
    max-width: 286px;
    aspect-ratio: 1;
    pointer-events: none;
}
/* 엠블럼이 Why Yeil 까지 내려온다 — PC·모바일 같은 동작 (가로는 .rn-main 의 overflow-x: clip 이 자른다) */
.rn-stories { overflow: visible; }
.rn-stories__emblem { z-index: 3; }
.rn-why__deco { display: none; } /* 시안: 이 자리에 엠블럼이 놓인다 */
@media (max-width: 1024px) {
    /* 태블릿·모바일: 엠블럼이 앉는 자리 = 시안의 eye 장식 자리 (인트로 왼쪽 칸 오른쪽 아래) */
    .rn-why__emblem-spot { left: auto; top: auto; right: 5%; bottom: 6.3%; width: 25.7%; max-width: 247px; }
}
.rn-why__intro-right { position: relative; overflow: hidden; }
/* 시안 129:1787: 히어로 배경 원본(1619 × 972)의 가로 40.8~99.1% · 세로 13.3~86.8% 를 칸(963 × 729)에 채운다.
   칸 비율이 바뀌어도 사진이 찌그러지지 않게 칸 높이 기준(cqh)으로 키우고, 잘라낸 부분의 가로 중심(70%)을 칸 가운데에 둔다 */
.rn-why__intro-right { container-type: size; }
.rn-why__photo {
    position: absolute;
    top: -18.03cqh;
    left: calc(50cqw - 158.6cqh); /* 사진 폭 226.6cqh × 0.70 */
    width: auto;
    height: 136.07cqh;
    max-width: none;
}

/* 섹션에 들어설 때 한 번 짧게(40vh 스크롤 동안) 화면에 고정된 뒤 그대로 지나간다 — 단계는 클릭으로 바꾼다 (피그마 코멘트 #20) */
.rn-why__steps { position: relative; height: calc(var(--rn-vh) * 140 - var(--rn-header-h)); }
.rn-why__sticky {
    position: sticky;
    top: var(--rn-header-offset);
    display: grid;
    grid-template-columns: 28.125% 21.875% 50%;
    height: calc(var(--rn-pin-vh) * 100 - var(--rn-header-offset));
    min-height: 640px;
    max-height: 1000px;
    overflow: hidden;
    border-bottom: 1px solid var(--rn-black); /* 시안 115:855: 아래 1px 선 (위는 의료진 카드 아래선이 맡는다 — 겹치면 2px) */
    transition: top .5s var(--rn-ease), height .5s var(--rn-ease);
}
.rn-why__visual { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--rn-black); }
.rn-why__visual-top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 35%;
    padding: 30px;
    border-bottom: 1px solid var(--rn-black);
}
.rn-why__is {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--rn-font-serif);
    font-size: var(--rn-numeral);
    line-height: 1;
    color: var(--rn-blue-700);
}
.rn-why__is i { width: 4px; height: 4px; background: var(--rn-blue-600); }
.rn-why__state { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rn-why__state-key { font-size: var(--rn-body-l); line-height: 1.6; color: var(--rn-blue-600); }
.rn-why__state-num { font-family: var(--rn-font-serif); font-size: 24px; line-height: 1.4; color: var(--rn-gray-400); }
.rn-why__state-num span { color: var(--rn-blue-600); }
.rn-why__imgs { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #e3e3e3; }
.rn-why__imgs img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity .8s var(--rn-ease), transform 1.4s var(--rn-ease);
}
.rn-why__imgs img.is-active { opacity: 1; transform: none; }

/* "스크롤 시 상단에 붙어서 그대로 팔로잉" — sticky 화면 안에 고정 */
.rn-why__descs { position: relative; padding: 40px 35px; border-left: 1px solid var(--rn-black); border-right: 1px solid var(--rn-black); }
.rn-why__desc {
    position: absolute;
    top: 40px;
    left: 35px;
    right: 35px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--rn-ease), transform .8s var(--rn-ease);
    pointer-events: none;
}
.rn-why__desc.is-active { opacity: 1; transform: none; pointer-events: auto; }
.rn-why__desc h3 { font-size: var(--rn-h2); font-weight: 600; line-height: 1.35; color: var(--rn-blue-700); }
.rn-why__desc p { margin-top: 12px; font-size: var(--rn-body-l); line-height: 1.6; color: var(--rn-gray-600); }

.rn-why__list { display: grid; grid-template-rows: repeat(4, 1fr); }
.rn-why__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 40px;
    border-bottom: 1px solid var(--rn-black);
    color: var(--rn-blue-700);
    transition: background-color .6s var(--rn-ease), color .6s var(--rn-ease);
}
.rn-why__item:last-child { border-bottom: 0; }
.rn-why__item::before { /* 활성 배경: 위에서 아래로 채워짐 */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--rn-blue-700);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .7s var(--rn-ease);
}
.rn-why__item > * { position: relative; z-index: 1; }
.rn-why__item.is-active { color: var(--rn-white); }
.rn-why__item.is-active::before { transform: scaleY(1); }
.rn-why__item:focus-visible { outline: 2px solid var(--rn-blue-400); outline-offset: -4px; }
@media (hover: hover) and (min-width: 1025px) {
    .rn-why__item:not(.is-active):hover .rn-why__num,
    .rn-why__item:not(.is-active):hover .rn-why__key { opacity: .7; } /* 누를 수 있다는 표시 */
}
.rn-why__label { position: absolute; top: 30px; right: var(--rn-margin); /* 우측 퀵메뉴에 가리지 않게 */ font-size: var(--rn-body-l); line-height: 1.6; text-align: right; }
.rn-why__num, .rn-why__key { transition: opacity .6s; }
.rn-why__item:not(.is-active) .rn-why__num,
.rn-why__item:not(.is-active) .rn-why__key { opacity: .35; } /* 기획안: 이전·이후 항목은 낮은 대비 */
.rn-why__num { font-family: var(--rn-font-serif); font-size: var(--rn-numeral); line-height: 1; }
.rn-why__key { margin-top: 8px; font-family: var(--rn-font-serif); font-weight: 500; font-size: var(--rn-keyword); line-height: 1; letter-spacing: -0.02em; }
.rn-why__mobile { display: none; }

@media (max-height: 820px) and (min-width: 1025px) {
    .rn-why__visual-top { flex-basis: 30%; padding: 22px 30px; }
    .rn-why__item { padding: 20px 40px; }
    .rn-why__label { top: 20px; }
}
@media (max-width: 1360px) {
    .rn-why__sticky { grid-template-columns: 30% 25% 45%; }
    .rn-why__desc br { display: none; }
}
@media (max-width: 1024px) {
    .rn-why__intro { grid-template-columns: 1fr; min-height: 0; }
    .rn-why__intro-left { min-height: 360px; }
    /* 모바일: 아이폰 사파리에서 size 컨테이너 + aspect-ratio 칸이 사진 없이 빈칸으로 보이는 문제 (고객 피드백 4) —
       컨테이너 쿼리를 끄고 object-fit 으로 같은 부분(건물 중심, 가로 70%)을 채운다 */
    .rn-why__intro-right { aspect-ratio: 4 / 3; container-type: normal; }
    .rn-why__photo { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
    .rn-why__steps { height: auto; }
    .rn-why__sticky { position: static; display: block; height: auto; max-height: none; min-height: 0; overflow: visible; border-bottom: 0; }
    .rn-why__visual, .rn-why__descs { display: none; }
    .rn-why__list { display: block; }
    .rn-why__item { padding: 28px var(--rn-margin) 36px; border-top: 1px solid var(--rn-black); border-bottom: 0; }
    .rn-why__item:not(.is-active) .rn-why__num,
    .rn-why__item:not(.is-active) .rn-why__key { opacity: 1; }
    .rn-why__item::before { display: none; }
    .rn-why__item.is-active { color: var(--rn-blue-700); }
    .rn-why__label { position: static; order: 3; margin-top: 18px; text-align: left; font-weight: 600; font-size: var(--rn-h4); }
    .rn-why__mobile { display: grid; grid-template-columns: 40% 1fr; gap: 20px; align-items: end; order: 4; margin-top: 14px; }
    .rn-why__mobile img { width: 100%; aspect-ratio: 540 / 650; object-fit: cover; }
    .rn-why__mobile p { font-size: 15px; line-height: 1.6; color: var(--rn-gray-600); }
}
@media (max-width: 768px) {
    .rn-why__intro-left { padding: 28px 20px; min-height: 300px; }
    .rn-why__intro-sub { margin-top: 20px; }
    .rn-why__mobile { grid-template-columns: 1fr; }
    .rn-why__mobile img { aspect-ratio: 4 / 3; }
    .rn-why__item:nth-child(2) .rn-why__mobile img { object-position: top; } /* 02 PRECISION: 장비 모니터가 잘리지 않게 위 기준 */
}

/* ===================================================================
   5. Yeil Doctors — 카드 4장(엇갈린 높이) + 상세 팝업
   =================================================================== */
.rn-doctors { background: var(--rn-white); }
.rn-doctors__head { display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; }
/* 시안 139:1274: 왼쪽 남색 칸(문구·장식) | 오른쪽 흰 칸(제목) — 마크업은 제목이 먼저, PC 에서만 순서를 바꾼다 */
.rn-doctors__head-left { order: 2; padding: 40px; border: 1px solid var(--rn-black); border-left: 0; /* 왼쪽 남색 칸 테두리와 겹치지 않게 */ }
.rn-doctors__title { position: sticky; top: calc(var(--rn-header-offset) + 40px); color: var(--rn-black); transition: top .5s var(--rn-ease); } /* 프레임 내 텍스트 팔로잉 */
.rn-doctors__head-right {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 40px 30px;
    order: 1;
    border: 1px solid var(--rn-black);
    background: var(--rn-blue-700);
    color: var(--rn-white);
}
/* 로고 장식 — 시안 207:811: 칸(960 × 440) 안 top 5.79% · right 4.17%, 247 × 259.5 (비율 고정) */
.rn-doctors__deco { position: absolute; top: 5.79%; right: 4.17%; width: 25.73%; max-width: 247px; height: auto; aspect-ratio: 246.98 / 259.526; pointer-events: none; }
.rn-doctors__copy { position: relative; }

.rn-doctors__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch; /* 카드 높이를 맞춘다 — 1번 카드만 1px 좁아(이웃 카드는 테두리 겹침용 +1px) 사진 비율 때문에 1.3px 짧았다 */
    padding-bottom: 0;
}
.rn-dr {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: -1px;
    border: 1px solid var(--rn-black);
    background: var(--rn-white);
    text-align: left;
}
.rn-dr + .rn-dr { width: calc(100% + 1px); margin-left: -1px; } /* 이웃 카드 테두리 1px 겹침 → 이중선 방지 */
/* 시안 143:1599: 카드 4장이 한 줄로 나란히 (스크롤 중 엇갈림은 main 동작 doctors 의 패럴랙스) */
.rn-dr__photo {
    position: relative;
    display: block;
    aspect-ratio: 480 / 600;
    overflow: hidden;
    background: var(--rn-gray-50);
}
/* 사진 자리·크기는 원장마다 다르다 (Doctors.tsx photo — 시안 143:1599). 사진 + 명찰을 함께 확대 */
.rn-dr__pic {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    transition: transform 1s var(--rn-ease);
}
.rn-dr__pic img { position: absolute; max-width: none; object-position: 50% 50%; }
.rn-dr__pic .rn-dr__tag { object-fit: fill; box-shadow: 1.5px 1.5px 4px rgba(0, 0, 0, .2); }
.rn-dr__badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 20px;
    border: 1px solid var(--rn-black);
    border-width: 0 0 1px 1px;
    background: var(--rn-white);
    font-size: var(--rn-body-l);
    line-height: 1.6;
}
.rn-dr__bar {
    flex: 1; /* 남는 높이는 바가 채운다 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(96px, 7.3vw, 141px);
    padding: 0 40px;
    background: #354183; /* 피그마 코멘트 #33 — 시안 331:241 */
    color: var(--rn-white);
    transition: background-color .5s var(--rn-ease), color .5s var(--rn-ease);
}
.rn-dr__name { display: flex; align-items: flex-end; gap: 8px; font-size: var(--rn-body-l); line-height: 1.6; }
.rn-dr__name strong { font-size: var(--rn-h2); font-weight: 600; line-height: 1.35; color: var(--rn-white); transition: color .5s; }
.rn-dr__arrow {
    width: 24px;
    height: 24px;
    background: url(/asset/img/renewal/doctors/ico_arrow_w.svg) center / contain no-repeat;
    transition: transform .5s var(--rn-ease);
}
@media (hover: hover) {
    .rn-dr:hover .rn-dr__pic { transform: scale(1.08); } /* 기획안: 호버 시 프로필 확대 */
    .rn-dr:hover .rn-dr__bar { background: var(--rn-black); color: var(--rn-blue-50); }
    .rn-dr:hover .rn-dr__name strong { color: var(--rn-blue-50); }
    .rn-dr:hover .rn-dr__arrow { transform: translateX(6px); }
}
.rn-dr:focus-visible { outline: 3px solid var(--rn-blue-400); outline-offset: -3px; }

/* ----- 상세 팝업: 우측 패널 (피그마 143:1718) ----- */
.rn-drmodal { position: fixed; inset: 0; z-index: 1000; visibility: hidden; transition: visibility 0s .8s; }
.rn-drmodal.is-open { visibility: visible; transition: none; }
.rn-drmodal__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .5s var(--rn-ease); }
.rn-drmodal.is-open .rn-drmodal__dim { opacity: 1; }
/* 패널 + 닫기 버튼이 함께 밀려 들어온다 */
.rn-drmodal__wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(960px, 100%);
    transform: translateX(calc(100% + 60px));
    transition: transform .8s var(--rn-ease);
}
.rn-drmodal.is-open .rn-drmodal__wrap { transform: none; }
.rn-drmodal__panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--rn-white);
}
/* 닫기: 패널 왼쪽 바깥 위 60 × 60 */
.rn-drmodal__close {
    position: absolute;
    top: 0;
    left: -60px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--rn-blue-600);
    transition: background-color .3s;
}
.rn-drmodal__close:hover { background: var(--rn-blue-500); }
.rn-drmodal__close img { width: 24px; height: 24px; }
.rn-drmodal__item { display: flex; min-height: 100%; }
.rn-drmodal__item[hidden] { display: none; }

/* 왼쪽: 약력 · 학회활동 · 외부활동 */
.rn-drmodal__bio {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 0 0 420px;
    padding: 40px 35px;
    border: 1px solid var(--rn-black);
}
.rn-drmodal__group h4 { margin-bottom: 12px; font-size: var(--rn-h3); font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; color: var(--rn-blue-700); }
.rn-drmodal__group li {
    position: relative;
    padding-left: 20px;
    font-size: var(--rn-body-l);
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: var(--rn-gray-600);
}
.rn-drmodal__group li::before { /* 16px 칸 가운데 4px 사각 */
    content: '';
    position: absolute;
    left: 6px;
    top: calc(.8em - 1.5px);
    width: 4px;
    height: 4px;
    background: var(--rn-blue-600);
}

/* 오른쪽: 이름 + 사진 */
.rn-drmodal__profile { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rn-drmodal__head {
    flex: 1;
    min-height: 120px;
    padding: 30px;
    border-top: 1px solid var(--rn-black);
    border-bottom: 1px solid var(--rn-black);
}
.rn-drmodal__name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--rn-h2);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--rn-black);
}
.rn-drmodal__name::before { content: ''; flex-shrink: 0; width: 4px; height: 4px; background: var(--rn-blue-600); }
.rn-drmodal__name span { font-size: var(--rn-body-l); font-weight: 400; line-height: 1.6; color: var(--rn-gray-800); }
.rn-drmodal__photo-box {
    position: relative;
    flex-shrink: 0;
    aspect-ratio: 480 / 600;
    overflow: hidden;
    background: var(--rn-gray-50);
}
/* 사진 480 × 633 을 칸(540 × 675) 가운데에서 21px 아래로 */
.rn-drmodal__photo {
    position: absolute;
    left: 50%;
    top: calc(50% + 3.1%);
    width: 88.9%;
    transform: translate(-50%, -50%);
}
.rn-drmodal__photo img { display: block; width: 100%; height: auto; max-width: none; }
.rn-drmodal__photo .rn-dr__tag { position: absolute; object-fit: fill; box-shadow: 1.5px 1.5px 4px rgba(0, 0, 0, .2); }
.rn-drmodal__badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 8px 20px;
    border-left: 1px solid var(--rn-black);
    border-bottom: 1px solid var(--rn-black);
    background: var(--rn-white);
    font-size: var(--rn-body-l);
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: var(--rn-black);
}
@media (max-width: 1024px) {
    /* 패널이 화면 전체 폭: 닫기는 패널 안 오른쪽 위로 */
    .rn-drmodal__wrap { transform: translateX(100%); }
    .rn-drmodal__close { left: auto; right: 0; }
    .rn-drmodal__bio { flex-basis: 380px; }
}
@media (max-width: 768px) {
    /* 위: 이름·사진, 아래: 약력 */
    .rn-drmodal__item { flex-direction: column; }
    .rn-drmodal__profile { order: -1; flex: none; }
    .rn-drmodal__head { flex: none; min-height: 0; padding: 20px 76px 20px 20px; }
    .rn-drmodal__bio { flex: none; gap: 24px; padding: 28px 20px 40px; border-width: 0; }
}
body.rn-modal-open { overflow: hidden; }

@media (max-width: 1024px) {
    .rn-doctors__head { grid-template-columns: 1fr; min-height: 0; }
    .rn-doctors__head-left { order: 0; padding: 40px var(--rn-margin) 32px; border-left: 1px solid var(--rn-black); }
    .rn-doctors__head-right { order: 0; min-height: 220px; padding: 32px var(--rn-margin); border-top: 0; } /* 세로로 쌓임: 위 박스 하단선과 겹치지 않게 */
    .rn-doctors__list { grid-template-columns: repeat(2, 1fr); }
    .rn-dr--3 { width: 100%; margin-left: 0; }
    .rn-dr__bar { padding: 0 24px; }
}
@media (max-width: 768px) {
    .rn-doctors__head-left { padding: 32px 20px 24px; }
    .rn-doctors__head-right { min-height: 180px; padding: 24px 20px; }
    .rn-dr__badge { padding: 4px 10px; font-size: 13px; }
    .rn-dr__bar { min-height: 64px; padding: 0 14px; }
    .rn-dr__name { flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px; }
    .rn-dr__name strong { font-size: 20px; }
    .rn-dr__arrow { width: 18px; height: 18px; }
}

/* ===================================================================
   6·7. Event / NEWS — 보더 그리드 + 가로 슬라이드(Swiper)
   =================================================================== */
/* 공용 화살표 버튼: 호버 시 검정으로 채워짐 (시안 메모) */
.rn-arrows { display: flex; }
.rn-arrow {
    display: flex;
    flex: 0 0 50%; /* 테두리 두께가 달라도 정확히 반씩 → 가운데 선이 슬라이드 선과 맞음 */
    align-items: center;
    justify-content: center;
    height: 62px;
    border: 1px solid var(--rn-black);
    background: var(--rn-white);
    color: var(--rn-black);
}
.rn-arrow--prev { border-right: 0; } /* 두 버튼 사이 선 = 오른쪽 버튼의 왼쪽 선 (슬라이드도 왼쪽 선 기준이라 같은 위치) */
.rn-arrow span {
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url(/asset/img/renewal/common/ico_arrow_right22.svg) center / contain no-repeat;
    mask: url(/asset/img/renewal/common/ico_arrow_right22.svg) center / contain no-repeat;
}
.rn-arrow--prev span { transform: scaleX(-1); }
/* 더 넘길 슬라이드가 없을 때: 호버 반응 없이 흐린 화살표 유지 + 금지 커서 */
.rn-arrow.swiper-button-disabled,
.rn-arrow.swiper-button-disabled:hover { cursor: not-allowed; color: var(--rn-black); }
.rn-arrow.swiper-button-disabled span { opacity: .25; }
.rn-arrow.swiper-button-disabled::before { display: none; }

.rn-board-body { padding: 0 var(--rn-margin); border: 1px solid var(--rn-black); border-top: 0; }
/* 오른쪽 끝선은 폭을 차지하지 않게 가상요소로 → 슬라이드 폭이 정확히 나눠져 화살표 칸과 선이 맞음 */
.rn-board-body .swiper::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: 1px; background: var(--rn-black); pointer-events: none; }

/* ----- Event ----- */
.rn-event { padding: 80px 0; background: var(--rn-white); }
.rn-event__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 60px var(--rn-margin);
    border: 1px solid var(--rn-black);
}
.rn-event__head h2, .rn-news__head h2 { color: var(--rn-black); white-space: nowrap; }
.rn-event__copy { color: var(--rn-blue-700); }
/* 화살표 묶음 폭 = 슬라이드 1칸 → 아래 슬라이드 세로선과 정확히 맞물림
   (헤드 안쪽 폭 100% = 화면 - 테두리 2px, 슬라이드 영역 = 화면 - 테두리 2px - 좌우 여백) */
.rn-event__arrows { position: absolute; right: var(--rn-margin); bottom: -1px; width: calc((100% - 2 * var(--rn-margin)) / 3); }
.rn-event__item { height: auto; border-left: 1px solid var(--rn-black); }
.rn-event__item a { display: flex; flex-direction: column; gap: 20px; height: 100%; padding: 20px 20px 40px; }
.rn-event__img { aspect-ratio: 520 / 348; overflow: hidden; background: var(--rn-gray-50); }
/* 실제 썸네일은 가로형(3:2)뿐 아니라 세로형·정사각형 포스터도 있어 cover 면 글씨가 잘림 → 전체가 보이게 */
.rn-event__img img { width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--rn-ease); }
.rn-event__info h3 { font-size: var(--rn-h4); font-weight: 600; line-height: 1.45; color: var(--rn-black); }
.rn-event__info p { display: flex; gap: 32px; margin-top: 8px; font-size: var(--rn-caption); line-height: 1.5; color: var(--rn-gray-500); }
.rn-event__end { margin-left: -20px; padding: 0 8px; border: 1px solid var(--rn-gray-300); font-style: normal; color: var(--rn-gray-500); } /* 기간이 지난 이벤트 */
.rn-event__info .rn-event__sub { display: block; margin-top: 4px; font-size: var(--rn-body-s); line-height: 1.6; color: var(--rn-gray-600); } /* 부제 (기존 메인 sub_title) */
/* 호버 (기획안 요청, 이벤트·소식 공통): 호버한 카드는 선명 + 이미지 살짝 확대, 나머지 카드는 블러·낮은 대비 */
.rn-event__img, .rn-news__img { position: relative; }
.rn-event__img::after, .rn-event__item > a, .rn-news__item > a { transition: filter .6s var(--rn-ease), opacity .6s var(--rn-ease); } /* 블러는 안쪽 내용만 → 카드 테두리선은 선명하게 유지 */
@media (hover: hover) {
    .rn-event__swiper:hover .rn-event__item:not(:hover) > a,
    .rn-news__swiper:hover .rn-news__item:not(:hover) > a { filter: blur(4px); opacity: .45; }
    .rn-event__item:hover .rn-event__img img,
    .rn-news__item:hover .rn-news__img img { transform: scale(1.04); }
    .rn-event__item:hover .rn-event__img::after,
    .rn-news__item:hover .rn-news__img::after { opacity: 0; }
}

/* ----- NEWS ----- */
.rn-news { padding: 120px 0; background: var(--rn-white); }
.rn-news__head { display: grid; grid-template-columns: 1fr 1fr; min-height: 260px; }
.rn-news__head-left { position: relative; padding: 20px 0 82px var(--rn-margin); border: 1px solid var(--rn-black); border-right: 0; } /* 가운데 선은 오른쪽 박스의 왼쪽 선이 담당 → 아래 슬라이드 선과 같은 위치 */
.rn-news__arrows { position: absolute; right: -1px; bottom: -1px; width: calc((200% - 2 * var(--rn-margin)) / 4 + 1px); } /* 소식 4칸 중 1칸 (양쪽 선 포함) */
.rn-news__head-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    border: 1px solid var(--rn-black);
    color: var(--rn-blue-700);
}
.rn-news__item { height: auto; border-left: 1px solid var(--rn-black); }
.rn-news__item a { display: flex; flex-direction: column; gap: 20px; height: 100%; padding: 20px 20px 40px; }
.rn-news__img { position: relative; aspect-ratio: 500 / 704; overflow: hidden; background: var(--rn-gray-50); }
.rn-news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--rn-ease); }
.rn-news__item h3 { font-size: var(--rn-h4); font-weight: 600; line-height: 1.45; color: var(--rn-black); }

@media (max-width: 1360px) {
    .rn-event__head { flex-wrap: wrap; gap: 24px 48px; padding-bottom: 100px; }
}
@media (max-width: 1024px) {
    .rn-event { padding: 60px 0; }
    .rn-event__arrows { width: calc((100% - 2 * var(--rn-margin)) / 2); } /* 태블릿: 2칸 */
    .rn-news { padding: 80px 0; }
    .rn-news__head { grid-template-columns: 1fr; min-height: 0; }
    .rn-news__head-left { padding-bottom: 92px; }
    /* 태블릿·모바일: 헤드가 세로로 쌓이므로 화살표를 헤드 맨 아래(슬라이드 바로 위)로 이동 */
    .rn-news__head { position: relative; }
    .rn-news__head-left { position: static; padding-bottom: 24px; border-right: 1px solid var(--rn-black); }
    .rn-news__head-right { padding-bottom: 92px; }
    .rn-news__arrows { right: calc(var(--rn-margin) + 1px); bottom: 0; width: calc((100% - 2px - 2 * var(--rn-margin)) / 3); } /* 3칸 중 1칸, 기준 박스에 테두리가 없어 bottom 0 */
    .rn-news__head-right { padding: 28px var(--rn-margin); border-left: 1px solid var(--rn-black); border-top: 0; }
}
@media (max-width: 768px) {
    .rn-event__head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px 20px 90px; }
    /* 모바일: 화살표를 슬라이드 영역 전체 폭으로 → 아래 테두리선과 정렬 */
    .rn-event__arrows { left: 20px; right: 20px; width: auto; }
    .rn-news__arrows { left: 21px; right: 21px; width: auto; } /* 헤드에 테두리가 없어 1px 보정 */
    .rn-arrow { height: 50px; }
    .rn-board-body { padding: 0 20px; }
    .rn-event__item a, .rn-news__item a { padding: 14px 14px 28px; gap: 14px; }
    .rn-news__head-left { padding: 20px 20px 16px; }
    .rn-news__head-right { padding: 16px 20px 80px; }
}

/* ===================================================================
   8. Contact Us
   =================================================================== */
.rn-contact {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 685px;
    background: var(--rn-blue-700);
    color: var(--rn-white);
    border-top: 1px solid var(--rn-black);
}
.rn-contact__head { position: relative; z-index: 1; padding: 40px; }
/* 왼쪽 아래 큰 로고 (피그마 코멘트 #34, 시안 328:3660 — 1920 × 685 섹션 안 78, 262 · 432 × 454, 흰색 5%) */
.rn-contact__logo {
    position: absolute;
    left: 4.05%;
    top: 262px;
    width: 22.5%;
    max-width: 432px;
    height: auto;
    pointer-events: none;
}
.rn-contact__sub { margin-top: 4px; font-size: var(--rn-h3); font-weight: 600; line-height: 1.4; }
.rn-contact__desc { margin-top: 8px; font-size: var(--rn-body-l); line-height: 1.6; }
/* 피그마 코멘트 #27: 입력칸 4줄 + 동의·버튼 줄을 가운데에 (시안 310:3658) */
.rn-contact__form { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 40px; }
.rn-contact__fields { display: flex; flex-direction: column; }
.rn-field {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rn-white);
    transition: border-color .3s;
}
.rn-field:focus-within { border-bottom-color: var(--rn-blue-100); }
.rn-field label { flex: 0 0 90px; font-size: var(--rn-h4); font-weight: 600; line-height: 1.45; }
.rn-field input, .rn-field select, .rn-field textarea {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--rn-white);
    font-size: var(--rn-body-l);
    line-height: 1.6;
    -webkit-appearance: none;
    appearance: none;
}
.rn-field textarea { resize: none; overflow: hidden; }
.rn-field ::placeholder { color: var(--rn-gray-300); opacity: 1; }
.rn-field__select { position: relative; flex: 1; display: flex; }
.rn-field__select::after { /* 드롭다운 화살표 */
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.rn-field select { padding-right: 60px; cursor: pointer; }
.rn-field select:invalid { color: var(--rn-gray-300); }
.rn-field select option { color: var(--rn-black); }

.rn-contact__bottom { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; }
.rn-contact__agrees { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rn-contact__agrees .rn-contact__agree { justify-content: flex-start; }
.rn-contact__agree input { flex-shrink: 0; }
.rn-contact__agree label { word-break: keep-all; }
/* 확정 안내는 길어서 휴대폰에서 꺾인다 — 동그라미는 첫 줄 옆에 두고 문구만 꺾는다 */
.rn-contact__agrees .rn-contact__agree--confirm { flex-wrap: nowrap; align-items: flex-start; }
.rn-contact__agrees .rn-contact__agree--confirm label { min-width: 0; }
.rn-contact__agree { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: var(--rn-body-s); line-height: 1.65; }
.rn-contact__agree input {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 1px solid var(--rn-white);
    border-radius: 50%;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.rn-contact__agree input:checked { background: var(--rn-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%231b2046' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat; }
.rn-contact__agree input:focus-visible { outline: 2px solid var(--rn-blue-200); outline-offset: 2px; }
.rn-contact__agree label { cursor: pointer; }
.rn-contact__agree a { font-size: var(--rn-caption); text-decoration: underline; text-underline-offset: 3px; color: var(--rn-gray-200); }
.rn-contact__submit {
    --rn-fill-bg: var(--rn-black);
    --rn-fill-fg: var(--rn-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 48px;
    border: 1px solid var(--rn-white);
    background: var(--rn-white);
    color: var(--rn-blue-700);
    font-size: var(--rn-h4);
    font-weight: 600;
    line-height: 1.45;
}
/* 필수값·동의가 다 채워지기 전에는 꺼 둔다 (useFormReady) — 흐리게, 호버 채움 없음 */
.rn-contact__submit:disabled {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .35);
    color: rgba(27, 32, 70, .55);
    cursor: default;
}
.rn-contact__submit:disabled::before { transform: scaleX(0); }
.rn-contact__submit i {
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url(/asset/img/renewal/common/ico_arrow_right22.svg) center / contain no-repeat;
    mask: url(/asset/img/renewal/common/ico_arrow_right22.svg) center / contain no-repeat;
}

/* ===================================================================
   9. 오시는 길 — 일러스트 지도(1440) + 안내(480)
   =================================================================== */
.rn-end { position: relative; }
/* 지도 섹션이 화면 하단에 맞춰 머물고, 푸터가 그 위로 올라온다 (높이 = 지도 42.8125vw + 하단 여백 200) */
.rn-location {
    position: sticky;
    top: min(var(--rn-header-offset), calc(var(--rn-vh) * 100 - 42.8125vw - 200px));
    z-index: 0;
    display: grid;
    grid-template-columns: 75% 25%;
    padding-bottom: 200px;
    background: var(--rn-white);
}
.rn-location__map { position: relative; aspect-ratio: 1440 / 822; overflow: hidden; border-radius: 0 16px 16px 0; }
.rn-location__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 지도 영상 (라벨·화살표 포함) */
.rn-location__info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 80px;
    padding: 80px 40px;
}
@media (min-width: 769px) and (max-width: 1800px) {
    .rn-location__info { padding-right: 140px; } /* 우측 고정 퀵메뉴(right 40 + 80)에 가리지 않게 */
}
.rn-location__eng {
    font-family: var(--rn-font-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rn-blue-600);
}
.rn-location__title { margin-top: 12px; font-size: var(--rn-h2); font-weight: 600; line-height: 1.35; letter-spacing: -0.025em; color: var(--rn-blue-600); }
.rn-location__text { margin-top: 24px; font-size: var(--rn-body-l); line-height: 1.6; color: var(--rn-gray-600); }
.rn-location__hours { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; font-size: var(--rn-body-l); line-height: 1.6; color: var(--rn-gray-600); }
.rn-location__hours div { display: flex; gap: 24px; }
.rn-location__hours dt { flex: 0 0 4.2em; font-weight: 700; }
.rn-location__hours dd { margin: 0; }

@media (max-width: 1600px) {
    .rn-location { grid-template-columns: 68% 32%; top: min(var(--rn-header-offset), calc(var(--rn-vh) * 100 - 38.82vw - 200px)); }
    .rn-location__info { gap: 48px; padding: 48px 32px; }
    .rn-location__text br { display: none; }
}
@media (max-width: 1024px) {
    .rn-contact { grid-template-columns: 1fr; min-height: 0; }
    .rn-contact__head { padding: 48px var(--rn-margin) 8px; }
    .rn-contact__form { padding: 24px var(--rn-margin) 48px; }
    .rn-contact__logo { display: none; }
    /* PC처럼 화면 하단에 머물고 푸터가 밀고 올라온다 — 높이가 내용 따라 달라 RenewalMotion 이 --rn-loc-h 로 재 준다 */
    .rn-location { top: min(var(--rn-header-offset), calc(var(--rn-vh) * 100 - var(--rn-loc-h, 200vh))); grid-template-columns: 1fr; padding-bottom: 160px; }
    .rn-location__map { border-radius: 0; }
    .rn-location__info { flex-direction: row; flex-wrap: wrap; gap: 32px 48px; padding: 40px var(--rn-margin); }
    .rn-location__block { flex: 1 1 260px; }
}
@media (max-width: 768px) {
    .rn-contact__head { padding: 40px 20px 0; }
    .rn-contact__form { gap: 28px; padding: 16px 20px 40px; }
    .rn-field { padding: 10px 0; }
    .rn-field { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding-top: 12px; }
    .rn-field label { flex-basis: auto; font-size: 15px; }
    .rn-field input, .rn-field select, .rn-field textarea { padding: 8px 0 12px; font-size: 16px; }
    .rn-contact__bottom { flex-direction: column; align-items: stretch; }
    .rn-contact__agree { flex-wrap: wrap; justify-content: flex-start; }
    .rn-contact__submit { min-height: 60px; }
    .rn-location { padding-bottom: 120px; }
    .rn-location__map { aspect-ratio: 4 / 3; }
    .rn-location__img { object-position: 38% 50%; }
    .rn-location__info { padding: 32px 20px; }
}

/* ===================================================================
   빠른 상담하기 바 — 시안 434:559 (1129 × 79, 첫 화면 아래 44px 가운데)
   오른쪽 원형 퀵메뉴(263 + 28)와 겹치지 않게 오른쪽은 최소 330px 비운다.
   좁은 화면(1279 이하)에선 하단 퀵바·Contact Us 로 대신한다.
   =================================================================== */
.rn-qc { display: none; }
@media (min-width: 1280px) {
    .rn-qc {
        position: fixed;
        left: max(var(--rn-margin), calc(50% - 615px));
        right: max(330px, calc(50% - 615px));
        bottom: 44px;
        z-index: 790;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px 40px;
        border: 1px solid var(--rn-white-30);
        border-radius: 1000px;
        background: var(--rn-white);
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));
        backdrop-filter: blur(2px);
        font-family: var(--rn-font-base);
        line-height: 1.2;
        transition: opacity .4s var(--rn-ease), transform .5s var(--rn-ease), visibility .5s;
    }
    .rn-qc.is-hidden { opacity: 0; visibility: hidden; transform: translateY(24px); }
    /* 스크롤 내리면 화면 아래로 내려가고, 올리면 다시 올라온다 — 헤더 숨김(RenewalHeader 의 body.rn-header-hidden)과 같은 때.
       입력 중에는 내려가지 않는다 */
    body.rn-header-hidden .rn-qc:not(:focus-within) { transform: translateY(calc(100% + 44px)); }
    .rn-qc__title { flex-shrink: 0; margin: 0; font-size: 24px; font-weight: 600; color: #222; white-space: nowrap; }
    .rn-qc__title strong { margin-right: 4px; font-weight: 600; color: var(--rn-blue-700); }
    .rn-qc__fields { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; }
    .rn-qc__fields input {
        min-width: 0;
        height: 39px;
        margin: 0;
        padding: 10px 16px;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        background: var(--rn-white);
        font: 400 16px/1.2 var(--rn-font-base);
        color: var(--rn-blue-700);
        text-align: center;
        outline: none;
        transition: border-color .3s, box-shadow .3s;
    }
    .rn-qc__fields input::placeholder { color: #9c9c9c; }
    .rn-qc__fields input:focus {
        border-color: var(--rn-blue-700);
        box-shadow: 0 0 2px rgba(27, 32, 70, .6);
        font-weight: 500;
    }
    .rn-qc__fields input:focus::placeholder { color: var(--rn-blue-700); }
    .rn-qc__name { flex: 0 0 100px; }
    .rn-qc__hp { flex: 0 0 132px; }
    .rn-qc__content { flex: 1 1 256px; }
    .rn-qc__bottom { display: flex; flex-shrink: 0; align-items: center; gap: 20px; }
    .rn-qc__agrees { display: flex; flex-direction: column; gap: 4px; }
    .rn-qc__agree { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #404040; white-space: nowrap; }
    .rn-qc__agree a { margin-left: -4px; }
    .rn-qc__agree input {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin: 0;
        border: 1px solid var(--rn-blue-700);
        border-radius: 4px;
        background: var(--rn-white);
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
    }
    .rn-qc__agree input:checked { background: var(--rn-blue-700) url(/asset/img/renewal/common/ico_check_quick.svg) center / 9px 7px no-repeat; }
    .rn-qc__agree input:focus-visible { outline: 2px solid var(--rn-blue-200); outline-offset: 2px; }
    .rn-qc__agree label { cursor: pointer; }
    .rn-qc__agree a { color: inherit; text-decoration: none; }
    .rn-qc__agree a:hover { text-decoration: underline; text-underline-offset: 3px; }
    .rn-qc__submit {
        width: 97px;
        height: 34px;
        padding: 8px 16px;
        border: 0;
        border-radius: 8px;
        background: var(--rn-blue-700);
        font: 600 15px/1.2 var(--rn-font-base);
        color: var(--rn-white);
        cursor: pointer;
        transition: background-color .3s;
    }
    .rn-qc__submit:hover { background: var(--rn-blue-500); }
    /* 필수값·체크 두 개가 다 채워지기 전, 보내는 중 — 회색 (useFormReady) */
    .rn-qc__submit:disabled { background: #a9adbd; cursor: default; }
}
/* 1280~1599: 바가 좁아지면 제목은 「빠른 상담하기」만 */
@media (min-width: 1280px) and (max-width: 1599px) {
    .rn-qc { gap: 12px; padding: 20px 28px; }
    .rn-qc__title { font-size: 20px; }
    .rn-qc__title strong { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rn-qc { transition: none; }
    .rn-hero__emblem > img, .rn-hero__emblem > canvas, .rn-hero__bg { transform: none; }
    .rn-hero__title, .rn-hero__copy { animation-name: rnHeroFade; }
    .popup_group_1 { translate: none; }
}