/* =========================================================
R2 Dawn — Design System (Candidate 38, FEAR→LIGHT)
서울쏙쏙치과 리뉴얼 v2 — /renew2/*
모든 .r2-* 클래스는 namespacing — 그누보드5 default.css와 충돌 차단
========================================================= */
.r2 {
--paper:#f5f1e8;
--paper-deep:#ebe4d4;
--ink:#1a1410;
--ink-soft:#3a312a;
--gold:#b89066;
--gold-deep:#8a6a44;
--rust:#a45c34;
--line:rgba(26,20,16,.12);
/* iter 6 (2026-05-18): Typography System Tokens — 17 페이지 통합
- 한글 본문은 weight 400 이상이 가독성 안정. weight 300은 deco용으로만 격리.
- 본문 대비는 최소 .78 (WCAG AA 호환), 강조 본문 .86.
- line-height: deco/heading 1.3, base 1.75, loose 1.85 (한글 본문).
- letter-spacing: KR 본문 -0.005em (글자 붙임), KR 헤딩 -0.018em.
v3 iter 7 (2026-05-20): 토스+Mayo Clinic 가독성 기준 적용
- base 16px → 17px (모바일 동일, 사용자 피드백 "글자 작고 가독성 낮음")
- leading base 1.75 → 1.7 (토스 표준)
- KR letter-spacing -0.005em → -0.01em (글자 더 밀착)
- 본문 단락 max-width 65ch (Mayo Clinic, 한 줄 시선 이동 최소화) */
--ts-body-size:17px;
--ts-leading-body:1.7;
--ts-max-width-prose:65ch;
--ts-weight-regular:400;
--ts-weight-medium:500;
--ts-weight-bold:600;
/* v3 iter 8 (2026-05-20): 폰트 무게감 ↑ — Mayo Clinic + 토스 절충.
- 헤딩 weight 토큰 신설 (500/700) — 의료 신뢰감 + 환자 친근감.
- deco weight 300 → 500 (시네마틱 가벼움보다 가독성·신뢰감 우선).
- 본문 헤딩(.r2-scene__h·.r2-warmth__title 등) 600~700 적용. */
--ts-weight-deco:500;
--ts-weight-heading:700;
--ts-weight-heading-soft:600;
--ts-leading-tight:1.3;
/* v3 iter 4: heading line-height 1.3 → 1.35 (제목 1.3은 한글 받침 잘림 위험, 1.35 안정).
deco용 1.3은 잔존(영문 italic 깊은 시네마틱). */
--ts-leading-heading:1.35;
/* v3 iter 7: base 1.75 → 1.7 (토스). loose 1.85는 잔존(시네마틱 lede). */
--ts-leading-base:1.7;
--ts-leading-loose:1.85;
/* v3 iter 4: 한영 letter-spacing 분리 — KR 본문 -0.005em, EN/Latin 본문 0.
:lang(en) 또는 .latin 클래스로 0 적용 (Cormorant/JetBrains은 자체 균등).
v3 iter 7: KR 본문 -0.005em → -0.01em (토스 표준, 글자 더 밀착). */
--ts-letter-kr:-0.01em;
--ts-letter-en:0;
--ts-letter-kr-heading:-0.018em;
/* v3 iter 4: mono letter-spacing 시스템화 — kicker .22em, label .3em, body .04em.
JetBrains Mono는 균등이므로 본문성 mono(.r2-mn__cta b)는 .02em로 줄임. */
--ts-letter-mono-kicker:.22em;
--ts-letter-mono-label:.3em;
--ts-letter-mono-body:.02em;
/* v3 iter 4: word-spacing 미세 — KR 본문 -0.02em (단어 시각 간격 안정) */
--ts-word-kr:-0.02em;
--ts-body:rgba(26,20,16,.82);
--ts-body-strong:rgba(26,20,16,.92);
--ts-body-soft:rgba(26,20,16,.7);
--ts-body-inv:rgba(245,241,232,.86);
--ts-body-inv-soft:rgba(245,241,232,.7);
/* v3 iter 3 (2026-05-20): Spacing System Tokens — vertical rhythm 정합
- 베이스 8px 그리드 (4·8·12·16·24·32·48·64·80·96·120).
- section: dawn 메인 섹션 vertical padding (desktop 96, mobile 56).
- rhythm: section→section, heading→lede gap.
- 모바일 자동 비례 축소 (mobile breakpoint에서 64% 적용 — 768px 미만). */
--space-2xs:4px;
--space-xs:8px;
--space-sm:12px;
--space-md:16px;
--space-lg:24px;
--space-xl:32px;
--space-2xl:48px;
--space-3xl:64px;
--space-4xl:80px;
--space-5xl:96px;
--space-6xl:120px;
--space-section:96px; /* major section vertical padding */
--space-section-sm:64px; /* secondary section */
--rhythm-section-gap:80px; /* section→section vertical gap (e.g., warmth→scenes) */
--rhythm-heading-gap:24px; /* h2→lede gap */
--rhythm-block-gap:32px; /* block→block (intra-section) */
--rhythm-paragraph-gap:14px; /* p→p */
}
.r2, .r2 *{box-sizing:border-box}
/* v3 iter 7 (2026-05-20): base font-size 17px + line-height 1.7 (토스 기준).
.r2의 line-height 1.5 → var(--ts-leading-body)로 통일 (1.7).
본문 폰트 사이즈는 base 17px — 명시적 font-size를 가진 단락은 그대로(시네마틱 lede 등). */
.r2{background:var(--paper);color:var(--ink);font-family:'Pretendard',sans-serif;-webkit-font-smoothing:antialiased;font-size:var(--ts-body-size);line-height:var(--ts-leading-body)}
/* iter 6: KR 본문 시스템 — 모든 .r2 p 단락 word-break + letter-spacing 통일.
v3 iter 4: word-spacing 미세(-.02em) 추가 — 한글 단어 시각 간격 안정.
v3 iter 7: KR letter-spacing -0.005em → -0.01em (토큰으로 자동 반영). */
.r2 p, .r2 li, .r2 dd, .r2 dt{word-break:keep-all;letter-spacing:var(--ts-letter-kr);word-spacing:var(--ts-word-kr)}
/* v3 iter 7: 본문 단락 max-width 65ch (Mayo Clinic 가독성 기준).
max-width 미지정 단락(.r2-warmth__lede·.r2-pillar__p·.r2-cta__p·.r2-visit__rowValue)에 65ch 신규 적용.
이미 명시 max-width가 있는 단락(.r2-scene__p 460·.r2-director__p 520·.r2-faq__a 760)은
해당 rule에서 직접 조정 — .r2-faq__a만 760 → 65ch로 좁힘. */
.r2-warmth__lede,
.r2-pillar__p,
.r2-cta__p,
.r2-visit__rowValue{max-width:var(--ts-max-width-prose)}
/* v3 iter 4: 한영 letter-spacing 분리 — .latin/.mono/:lang(en)은 letter-spacing 0 (한글용 음수 제거).
word-spacing도 0으로 복귀 (영문은 단어 간격 기본 사용). */
.r2 .latin{font-family:'Cormorant Garamond',serif;letter-spacing:var(--ts-letter-en);word-spacing:0}
.r2 .mono{font-family:'JetBrains Mono',monospace;letter-spacing:var(--ts-letter-mono-body);word-spacing:0}
.r2 :lang(en){letter-spacing:var(--ts-letter-en);word-spacing:0}
.r2 h1,.r2 h2,.r2 h3,.r2 p,.r2 blockquote,.r2 figure{margin:0;padding:0}
/* v3 iter 4: blockquote 시스템 통일 — italic Cormorant + gold border-left + padding 통일.
기존 .r2-scene__cite·.r2-band__quote 등의 변형은 자체 규칙 우선(specificity), 일반 blockquote는 이 시스템 사용. */
.r2 blockquote{
font-family:'Cormorant Garamond',serif;
font-style:italic;font-weight:var(--ts-weight-deco);
font-size:19px;line-height:1.7;
color:var(--ts-body-strong);
padding:8px 0 8px 22px;
border-left:2px solid var(--gold);
letter-spacing:var(--ts-letter-en);
word-spacing:0;
max-width:560px;
}
.r2 a{text-decoration:none;color:inherit}
.r2 button{font-family:inherit}
body.r2-body{background:var(--paper) !important;margin:0 !important;padding:0 !important}
/* 그누보드5 기본 헤더/푸터/CTA 숨김 — r2 페이지에서만 (.r2-mh/.r2-mn는 노출) */
body.r2-body > header:not(.r2-mh),
body.r2-body .site-footer,
body.r2-body .floating-cta,
body.r2-body .top_btn,
body.r2-body .page-top-btn,
body.r2-body header.site-header,
body.r2-body header.main_h{display:none !important}
body.r2-body .page-wrap{padding:0 !important;margin:0 !important;max-width:none !important}
body.r2-body main.r2{display:block;width:100%;padding-top:72px}
/* iter 7: 모바일 가로 overflow 차단 — codex 측정에서 main/location bodyScrollWidth > viewport 발견 */
body.r2-body, body.r2-body main.r2{overflow-x:hidden;max-width:100vw}
@media (max-width:768px){ body.r2-body main.r2{padding-top:60px} }
/* ============ DAWN MULTI-NAV (nav-multi.css override) ============ */
.r2-mh{
background:rgba(245,241,232,.96) !important;
backdrop-filter:blur(10px);
box-shadow:none !important;
border-bottom:1px solid rgba(26,20,16,.08);
}
.r2-mh.scrolled{box-shadow:0 1px 12px rgba(26,20,16,.08) !important}
.r2-mn{max-width:1440px;padding:0 6vw;height:72px}
.r2-mn__logo a{display:flex !important;flex-direction:column;line-height:1.1;text-decoration:none}
.r2-mn__logo a b{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:16px;color:#1a1410;letter-spacing:-.01em}
.r2-mn__logo a span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;color:rgba(26,20,16,.5);margin-top:3px;text-transform:uppercase}
.r2-mn .nav-menu{gap:8px}
.r2-mn .nav-menu > li > a{
font-family:'Noto Serif KR',serif;font-weight:400;font-size:14px;
color:#3a312a;padding:10px 14px;border-radius:0;
border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.r2-mn .nav-menu > li > a:hover,
.r2-mn .nav-menu > li > a.active,
.r2-mn .nav-menu > li.dropdown-open > a{
color:#a45c34;background:transparent;font-weight:400;border-bottom-color:#a45c34;
}
.r2-mn .nav-sub{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.06em;color:rgba(26,20,16,.5)}
.r2-mn .nav-menu > li > a.active .nav-sub{color:rgba(164,92,52,.7)}
.r2-mn .nav-menu > li > a .nav-arrow{
border-top-color:#8a6a44;border-left-width:3px;border-right-width:3px;border-top-width:4px;
}
.r2-mn .nav-dropdown{padding-top:10px}
.r2-mn .nav-dropdown-inner{
background:#fff;border:1px solid rgba(26,20,16,.1);border-radius:0;
box-shadow:0 12px 40px rgba(26,20,16,.12);padding:8px 0;min-width:240px;
}
.r2-mn .nav-dropdown-inner li a{
font-family:'Noto Serif KR',serif;font-size:14px;color:#3a312a;
padding:11px 22px;border-radius:0;
}
.r2-mn .nav-dropdown-inner li a:hover,
.r2-mn .nav-dropdown-inner li a.active{background:#f5f1e8;color:#a45c34}
.r2-mn .nav-right{gap:10px}
.r2-mn .nav-lang{
font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
color:#3a312a;border:1px solid rgba(26,20,16,.2);border-radius:0;padding:7px 11px;
}
.r2-mn .nav-lang:hover{border-color:#1a1410;color:#1a1410}
.r2-mn__cta{
display:inline-flex;align-items:center;gap:10px;
padding:9px 18px;background:transparent !important;color:#1a1410 !important;
border:1px solid #1a1410;border-radius:0;letter-spacing:0;
transition:all .3s;
}
.r2-mn__cta .mono{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:#8a6a44;text-transform:uppercase}
/* v3 iter 4: mn cta phone — mono body letter-spacing 토큰(.02em — JetBrains 균등이라 .04em 과함). */
.r2-mn__cta b{font-family:'JetBrains Mono',monospace;font-weight:var(--ts-weight-bold);font-size:14px;color:#1a1410;letter-spacing:var(--ts-letter-mono-body)}
.r2-mn__cta:hover{background:#1a1410 !important}
.r2-mn__cta:hover .mono{color:#b89066}
.r2-mn__cta:hover b{color:#f5f1e8}
.r2-mh .nav-hamburger span{background:#1a1410}
@media (max-width:768px){
.r2-mn{height:60px;padding:0 5vw}
.r2-mn .nav-menu{background:#f5f1e8;top:60px}
.r2-mn .nav-menu > li > a{font-family:'Noto Serif KR',serif;border-bottom:1px solid rgba(26,20,16,.08)}
.r2-mn .nav-dropdown-inner{background:rgba(26,20,16,.04);box-shadow:none}
.r2-mn .nav-right{display:none}
.r2-mn .nav-menu.open ~ .nav-right{background:#f5f1e8;border-top:1px solid rgba(26,20,16,.1)}
}
/* /renew2 페이지에서 hero가 sticky nav 아래로 안 가도록 — hero 자체 z-index 조정 */
.r2-hero{z-index:1}
.r2-mh{z-index:1000}
/* ============ HERO LITE (Tier 2: 진료 페이지 — 심플) ============ */
.r2-hero-lite{
background:linear-gradient(180deg, #faf6ec 0%, var(--paper) 100%);
border-bottom:1px solid rgba(26,20,16,.08);
}
.r2-hero-lite__inner{
max-width:880px;margin:0 auto;padding:88px 6vw 72px;text-align:center;
}
.r2-hero-lite__kicker{
display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;
letter-spacing:.24em;color:#8a6a44;text-transform:uppercase;
padding:6px 14px;border:1px solid rgba(138,106,68,.3);border-radius:0;margin-bottom:24px;
}
/* v3 iter 4: hero-lite title — 본문 톤 강한 h1. line-height ts-leading-heading 토큰. */
.r2-hero-lite__title{
font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:clamp(32px, 4.4vw, 50px);
line-height:var(--ts-leading-heading);color:#1a1410;letter-spacing:var(--ts-letter-kr-heading);margin-bottom:20px;
}
.r2-hero-lite__title em{font-style:normal;color:#a45c34;font-weight:500;border-bottom:2px solid rgba(164,92,52,.3);padding-bottom:1px}
.r2-hero-lite__lede{
font-family:'Pretendard',sans-serif;font-size:16px;line-height:1.75;
color:#3a312a;max-width:640px;margin:0 auto 36px;font-weight:400;
}
.r2-hero-lite__lede b{font-weight:600;color:#1a1410}
.r2-hero-lite__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.r2-hero-lite__btn{
display:inline-flex;align-items:center;gap:10px;padding:13px 24px;
font-size:15px;transition:all .25s;border-radius:0;
}
.r2-hero-lite__btn--primary{background:#1a1410;color:#f5f1e8;border:1px solid #1a1410}
.r2-hero-lite__btn--primary .mono{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:#b89066;text-transform:uppercase}
/* v3 iter 4: hero-lite primary phone — mono body token(.02em). */
.r2-hero-lite__btn--primary b{font-family:'JetBrains Mono',monospace;font-weight:var(--ts-weight-bold);font-size:15px;letter-spacing:var(--ts-letter-mono-body)}
.r2-hero-lite__btn--primary:hover{background:#a45c34;border-color:#a45c34}
.r2-hero-lite__btn--primary:hover .mono{color:#f5f1e8}
.r2-hero-lite__btn--ghost{background:transparent;color:#1a1410;border:1px solid rgba(26,20,16,.3);font-family:'Noto Serif KR',serif;font-weight:500}
.r2-hero-lite__btn--ghost:hover{border-color:#1a1410;background:rgba(26,20,16,.04)}
.r2-hero-lite__meta{
font-family:'Pretendard',sans-serif;font-size:13px;color:rgba(26,20,16,.6);
display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
}
.r2-hero-lite__sep{color:rgba(26,20,16,.3)}
@media (max-width:768px){
.r2-hero-lite__inner{padding:56px 5vw 48px}
.r2-hero-lite__kicker{font-size:10px;letter-spacing:.2em;margin-bottom:18px;padding:5px 11px}
.r2-hero-lite__title{font-size:clamp(26px, 7vw, 36px);margin-bottom:16px}
.r2-hero-lite__lede{font-size:15px;line-height:1.7;margin-bottom:28px}
.r2-hero-lite__btn{padding:12px 18px;font-size:14px;width:100%;justify-content:center;max-width:340px}
.r2-hero-lite__cta{flex-direction:column;align-items:center;gap:10px;margin-bottom:24px}
.r2-hero-lite__meta{font-size:12px;gap:8px}
}
/* ============ TOP NAV (legacy, deprecated — multi-nav 사용) ============ */
.r2-nav{display:none !important}
.r2-nav-OLD{
position:sticky;top:0;z-index:50;
background:rgba(245,241,232,.96);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(26,20,16,.08);
}
.r2-nav__inner{
max-width:1440px;margin:0 auto;padding:0 6vw;
display:flex;align-items:center;gap:28px;min-height:64px;
}
.r2-nav__brand{display:flex;flex-direction:column;line-height:1.1;padding:8px 0;margin-right:auto}
.r2-nav__brand b{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:16px;color:var(--ink);letter-spacing:-.01em}
.r2-nav__brand span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;color:rgba(26,20,16,.5);margin-top:3px;text-transform:uppercase}
.r2-nav__link{font-family:'Noto Serif KR',serif;font-weight:400;font-size:14px;color:var(--ink-soft);transition:color .25s;padding:8px 0;border-bottom:1px solid transparent}
.r2-nav__link:hover{color:var(--rust);border-bottom-color:var(--rust)}
.r2-nav__group{position:relative;list-style:none}
.r2-nav__group summary{font-family:'Noto Serif KR',serif;font-weight:400;font-size:14px;color:var(--ink-soft);cursor:pointer;list-style:none;padding:8px 0;display:inline-flex;align-items:center;gap:6px;transition:color .25s}
.r2-nav__group summary::-webkit-details-marker{display:none}
.r2-nav__group summary::marker{display:none}
.r2-nav__group summary i{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .25s;margin-top:-3px}
.r2-nav__group[open] summary i{transform:rotate(-135deg);margin-top:3px}
.r2-nav__group:hover summary{color:var(--rust)}
.r2-nav__menu{
position:absolute;top:calc(100% + 6px);left:-16px;min-width:260px;
background:#fff;border:1px solid rgba(26,20,16,.1);
box-shadow:0 12px 40px rgba(26,20,16,.12);
padding:8px 0;display:flex;flex-direction:column;
}
.r2-nav__menu a{padding:11px 22px;font-size:14px;color:var(--ink-soft);transition:background .2s,color .2s;font-family:'Noto Serif KR',serif}
.r2-nav__menu a:hover{background:var(--paper);color:var(--rust)}
.r2-nav__cta{
display:inline-flex;align-items:center;gap:10px;margin-left:8px;
padding:9px 18px;border:1px solid var(--ink);transition:all .3s;
}
.r2-nav__cta .mono{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--gold-deep);text-transform:uppercase}
.r2-nav__cta b{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:.04em}
.r2-nav__cta:hover{background:var(--ink)}
.r2-nav__cta:hover .mono{color:var(--gold)}
.r2-nav__cta:hover b{color:var(--paper)}
/* Mobile nav */
@media (max-width:900px){
.r2-nav__link, .r2-nav__group{display:none}
.r2-nav__inner{padding:0 5vw;gap:16px}
.r2-nav__cta{padding:8px 14px}
.r2-nav__cta .mono{display:none}
}
/* ============ HERO (2-stage cinematic) ============ */
/* iter 4: 100vh cap — 큰 모니터에서 trust strip 즉시 안 보이는 문제 해결. min(100vh, 880px) */
.r2-hero{position:relative;width:100%;height:min(100vh,880px);min-height:720px;overflow:hidden;background:#000}
.r2-hero__darkLayer{position:absolute;inset:0;z-index:1;
background:radial-gradient(ellipse 50% 60% at 30% 60%, rgba(58,38,24,.6) 0%, transparent 60%),radial-gradient(circle at 50% 50%, #1a120a 0%, #050302 80%);
animation:r2DarkFade 9s ease-in-out infinite;}
@keyframes r2DarkFade{0%,18%{opacity:1}35%,100%{opacity:0}}
.r2-hero__lightLayer{position:absolute;inset:0;z-index:2;transform:scale(1.05);
background:radial-gradient(ellipse 70% 80% at 60% 40%, rgba(255,210,150,.55) 0%, transparent 60%),radial-gradient(ellipse 60% 70% at 25% 75%, rgba(255,190,130,.35) 0%, transparent 65%),linear-gradient(160deg, #f5d9a8 0%, #e8b87a 35%, #c98a52 70%, #6a4a2a 100%);
animation:r2LightRise 9s ease-in-out infinite;}
@keyframes r2LightRise{0%,18%{opacity:0;transform:scale(1.12) translateY(2%)}40%{opacity:.55;transform:scale(1.08) translateY(1%)}65%,100%{opacity:1;transform:scale(1.05) translateY(0)}}
.r2-hero__lightLayer::after{content:"";position:absolute;inset:-5%;
background:radial-gradient(circle 380px at 70% 35%, rgba(255,235,200,.3) 0%, transparent 70%);
animation:r2Burn 14s ease-in-out infinite alternate;filter:blur(20px);}
@keyframes r2Burn{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-3%,2%) scale(1.1)}}
.r2-hero__grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");}
.r2-hero__bar{position:absolute;left:0;right:0;height:6vh;background:#0a0705;z-index:4}
.r2-hero__bar--top{top:0}
.r2-hero__bar--bot{bottom:0}
.r2-hero__vignette{position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 200px 60px rgba(40,25,10,.45)}
.r2-hero__chrome{position:relative;z-index:5;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:8.5vh 6vw;color:#1a1410}
.r2-hero__top{display:flex;justify-content:space-between;align-items:flex-start}
.r2-hero__brand{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#1a1410}
.r2-hero__brand b{display:block;font-size:11px;font-weight:400;color:rgba(26,20,16,.6);margin-top:6px;letter-spacing:.2em}
.r2-hero__rec{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,20,16,.45)}
.r2-hero__rec::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(168,40,40,.7);animation:r2Rec 1.6s ease-in-out infinite}
@keyframes r2Rec{0%,100%{opacity:1}50%{opacity:.3}}
/* iter 7: hero 좌우 grid — 좌측 영화 카피, 우측 dawn 사진 frame */
.r2-hero__center{align-self:center;width:100%;position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:6vw;align-items:center;min-height:380px}
.r2-hero__copyWrap{position:relative;max-width:620px;min-height:300px}
.r2-hero__copyA,.r2-hero__copyB{position:absolute;top:0;left:0;right:0}
.r2-hero__copyA{animation:r2CopyA 9s ease-in-out infinite}
.r2-hero__copyB{animation:r2CopyB 9s ease-in-out infinite}
@keyframes r2CopyA{0%,18%{opacity:1;transform:translateY(0)}30%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes r2CopyB{0%,25%{opacity:0;transform:translateY(12px)}45%,100%{opacity:1;transform:translateY(0)}}
.r2-hero__kicker{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:24px;display:flex;align-items:center;gap:14px}
.r2-hero__kicker::before{content:"";display:inline-block;width:48px;height:1px;background:var(--gold-deep)}
.r2-hero__copyA .r2-hero__kicker{color:#c89870}
.r2-hero__copyA .r2-hero__kicker::before{background:#c89870}
.r2-hero__copyA .r2-hero__title{color:#f0e2c8}
.r2-hero__copyA .r2-hero__lede{color:rgba(240,226,200,.78)}
.r2-hero__copyA .r2-hero__title em{color:#c89870}
.r2-hero__copyA .r2-hero__lede b{color:#f0e2c8}
.r2-hero__title{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:clamp(48px,7.4vw,104px);line-height:1.05;letter-spacing:-.02em;color:#1a1410}
.r2-hero__title em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:var(--ts-weight-deco);color:var(--rust)}
/* iter 5 (2026-05-18): hero lede typo 대비 .78 → .86, font-weight 300 → 350 (가독성) */
.r2-hero__lede{margin-top:32px;max-width:580px;font-size:17px;line-height:1.85;color:rgba(26,20,16,.86);font-weight:350;word-break:keep-all}
.r2-hero__lede b{font-weight:600;color:#1a1410}
/* Hero supporting tagline + CTA row */
/* iter 4: r2SupFade 애니메이션 제거 — supporting 텍스트가 22% 시간 동안 사라지는 문제 (CTA와 같은 fix) */
.r2-hero__supporting{
position:relative;z-index:2;
align-self:end;margin-top:24px;margin-bottom:18px;
font-family:'Noto Serif KR',serif;font-weight:400;
font-size:clamp(18px,1.5vw,21px);line-height:1.55;
color:rgba(26,20,16,.88);max-width:680px;
}
.r2-hero__supporting b{color:var(--rust);font-weight:600}
.r2-hero__ctaRow{
position:relative;z-index:2;
align-self:end;margin-bottom:16px;
display:flex;flex-wrap:wrap;gap:12px;
/* iter 2 cont.: r2SupFade 애니메이션 제거 — CTA가 22% 시간 동안 투명해지는 UX 버그 수정 */
}
.r2-hero__cta{
display:inline-flex;align-items:center;gap:10px;
min-height:48px;padding:14px 28px;
font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
text-decoration:none;font-weight:500;
transition:all .35s ease;
}
/* iter 2 cont.: primary CTA — 골드 그라데이션으로 대체(이전 검은 ink — 영상 위 가독성 낮음) */
.r2-hero__cta--primary{background:linear-gradient(135deg,#C4A265 0%,#B0894A 100%);color:#fff;border:1px solid transparent;min-width:200px;justify-content:center;box-shadow:0 10px 28px -8px rgba(138,106,68,.55),0 2px 0 0 rgba(0,0,0,.06)}
.r2-hero__cta--primary:hover{background:linear-gradient(135deg,#B0894A 0%,#9B7639 100%);transform:translateY(-2px);box-shadow:0 14px 32px -6px rgba(138,106,68,.7),0 3px 0 0 rgba(0,0,0,.08)}
.r2-hero__cta--ghost{background:rgba(245,241,232,.92);color:var(--ink);border:1px solid var(--ink);backdrop-filter:blur(6px)}
.r2-hero__cta--ghost:hover{background:var(--ink);color:var(--paper)}
.r2-hero__cta b{font-family:'Noto Serif KR',serif;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:14px}
/* Trust badges (always visible — below rotating copy) */
/* iter 4: r2BadgesFade opacity dip 제거 — 자격 배지는 100% 가시성 유지 (trust axis 6.5 → 보강) */
.r2-hero__badges{
position:relative;z-index:2;
align-self:end;margin-top:0;margin-bottom:28px;
display:flex;flex-wrap:wrap;gap:10px;
}
.r2-hero__badge{
display:inline-flex;align-items:center;gap:8px;
padding:10px 16px;
font-family:'JetBrains Mono',monospace;
font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink);background:rgba(245,241,232,.92);
border:1px solid rgba(168,140,95,.55);
backdrop-filter:blur(6px);
}
.r2-hero__badge b{color:var(--rust);font-weight:600;letter-spacing:.04em;text-transform:none;font-family:'Noto Serif KR',serif;font-size:13px}
.r2-hero__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rust);flex-shrink:0}
/* iter 7: hero 우측 visual frame — main outlier(5.89) 끌어올림. dawn 사진(손가락+커튼) 영화 메타포 동기화 */
.r2-hero__visual{position:relative;align-self:center;justify-self:end;width:100%;max-width:520px;aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:r2VisualFade 9s ease-in-out infinite}
@keyframes r2VisualFade{0%,18%{opacity:.18;transform:translateY(8px) scale(.985)}45%,100%{opacity:1;transform:translateY(0) scale(1)}}
.r2-hero__frame{position:relative;width:100%;height:100%;margin:0;overflow:hidden;border:1px solid rgba(245,241,232,.5);box-shadow:0 30px 80px -20px rgba(20,10,4,.55),0 8px 20px -6px rgba(20,10,4,.35),inset 0 0 0 4px rgba(245,241,232,.08);background:#0a0705}
.r2-hero__frame img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(.96) brightness(.96)}
.r2-hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,4,0) 0%,rgba(20,10,4,0) 55%,rgba(20,10,4,.42) 100%),radial-gradient(circle at 80% 30%,rgba(255,210,150,.18) 0%,transparent 60%);pointer-events:none}
.r2-hero__caption{position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.28em;color:rgba(245,241,232,.85);text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.5);z-index:2}
.r2-hero__bottom{display:flex;justify-content:space-between;align-items:flex-end;color:rgba(26,20,16,.7)}
.r2-hero__timecode{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em}
.r2-hero__timecode b{color:#1a1410;font-weight:500}
.r2-hero__scroll{font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:14px}
.r2-hero__scroll::after{content:"";width:1px;height:54px;background:linear-gradient(to bottom,rgba(26,20,16,.7) 0%,transparent 100%)}
.r2-hero__chapter{text-align:right;font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.r2-hero__chapter b{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;letter-spacing:0;text-transform:none;color:#1a1410;font-weight:300;margin-top:8px}
/* ============ PRODUCTION NOTE ============ */
/* v3 iter 4: prodnote — kicker letter-spacing 토큰(.22em). italic span은 latin(en, 0). */
.r2-prodnote{background:var(--paper);color:rgba(26,20,16,.6);padding:32px 6vw;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;font-size:11px;letter-spacing:var(--ts-letter-mono-kicker);text-transform:uppercase}
.r2-prodnote b{color:var(--gold-deep);font-weight:var(--ts-weight-medium)}
.r2-prodnote span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;letter-spacing:var(--ts-letter-en);text-transform:none;color:rgba(26,20,16,.85);font-weight:var(--ts-weight-deco);word-spacing:0}
/* ============ WARMTH SECTION (Intro + Stats) ============ */
/* iter 4: spacing 정리 — top 140 → 96, trust strip → warmth 거리 안정화
v3 iter 3: spacing 토큰화 — --space-section (96), --rhythm-section-gap (80), --rhythm-heading-gap (24) */
.r2-warmth{padding:var(--space-section) 6vw 60px;background:#f7f4ee}
.r2-warmth__intro{max-width:880px;margin:0 auto var(--rhythm-section-gap);text-align:center}
.r2-warmth__num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:80px;color:var(--gold-deep);line-height:1}
/* v3 iter 4: deco h2 — weight 400 + line-height 1.35(--ts-leading-heading) — 한글 받침 잘림 방지.
em(italic Cormorant)은 deco weight 300 보존. */
.r2-warmth__title{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:42px;line-height:var(--ts-leading-heading);letter-spacing:var(--ts-letter-kr-heading);color:var(--ink);margin-top:14px}
.r2-warmth__title em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--rust);font-weight:var(--ts-weight-deco);letter-spacing:var(--ts-letter-en)}
/* iter 5: warmth lede typo 대비 .65 → .78 + word-break keep-all
v3 iter 3: heading→lede gap 토큰화 */
.r2-warmth__lede{margin-top:var(--rhythm-heading-gap);font-size:16px;line-height:1.85;color:rgba(26,20,16,.78);font-weight:350;word-break:keep-all}
.r2-stats{max-width:1180px;margin:0 auto;padding:0 0 80px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.r2-stat{padding:72px 28px;text-align:center;border-right:1px solid var(--line)}
.r2-stat:last-child{border-right:none}
.r2-stat__big{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(72px,7vw,108px);color:var(--rust);line-height:.95;letter-spacing:-.01em}
.r2-stat__label{margin-top:22px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,20,16,.78);font-weight:500}
/* iter 6: stat sub label — weight 300→400, 대비 .6→.75 */
.r2-stat__sub{margin-top:10px;font-size:14px;color:rgba(26,20,16,.75);font-weight:var(--ts-weight-regular)}
/* ============ SCENES (split media + copy) ============ */
/* v3 iter 3: scenes 진입 spacing 토큰화 — 2xl (48) 유지 + 가독성 */
.r2-scenes{padding:var(--space-2xl) 0;background:var(--paper);counter-reset:r2scene}
.r2-scene{display:grid;grid-template-columns:1fr 1.05fr;gap:0;min-height:420px;border-top:1px solid var(--line);counter-increment:r2scene}
.r2-scene:last-child{border-bottom:1px solid var(--line)}
.r2-scene--rev{direction:rtl}
.r2-scene--rev > *{direction:ltr}
.r2-scene__media{position:relative;overflow:hidden;background:#241810;min-height:380px;aspect-ratio:4/3}
.r2-scene__media .sim{position:absolute;inset:0;animation:r2Burn 12s ease-in-out infinite alternate}
/* 실제 사진 — sim 대신 사용 */
.r2-scene__media img.shot{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0;
/* v3 iter 2: 골든아워 톤 통일 — saturate·contrast·sepia·hue-rotate로 4 scene 정합 (image axis 5.54 → 7+) */
filter:saturate(1.06) contrast(1.06) sepia(.05) hue-rotate(-3deg);
animation:r2BurnImg 18s ease-in-out infinite alternate;
}
@keyframes r2BurnImg{0%{transform:scale(1)}100%{transform:scale(1.06)}}
.r2-scene__media .tint{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg, rgba(15,8,4,.18) 0%, rgba(40,24,14,.55) 100%);
mix-blend-mode:multiply;
}
/* iter 8: dawn 톤 통일 — cool 톤(블루)을 gold-amber로 재정의하여 시네마틱 일관성 ↑ (image axis 5.54 → 보강) */
/* v3 iter 2 (2026-05-20): tint 시스템 깊이 정합 — 4 scene 모두 dawn 골든아워 amber 축에 정합 (warm·cool·soft 미세 변주만, hue 통일) */
.r2-scene__media .tint--warm{background:linear-gradient(135deg, rgba(180,140,85,.28) 0%, rgba(40,22,10,.68) 100%)}
.r2-scene__media .tint--cool{background:linear-gradient(155deg, rgba(190,135,75,.24) 0%, rgba(32,18,8,.66) 100%)}
.r2-scene__media .tint--soft{background:linear-gradient(180deg, rgba(255,220,170,.18) 0%, rgba(48,28,14,.58) 100%)}
/* 거대 ghost 씬 번호 — 휑함 해결 (CSS counter 사용) */
.r2-scene__media::before{
content:counter(r2scene, decimal-leading-zero);
position:absolute;
left:48px;top:50%;transform:translateY(-50%);
z-index:3;
font-family:'Cormorant Garamond',serif;
font-style:italic;font-weight:300;
font-size:clamp(140px, 22vw, 260px);
line-height:.85;
color:rgba(255,235,210,.16);
letter-spacing:-.04em;
pointer-events:none;
text-shadow:0 2px 20px rgba(0,0,0,.18);
}
.r2-scene--rev .r2-scene__media::before{left:auto;right:48px}
/* Frame marks (영화 프레임 코너) */
.r2-scene__media::after{
content:"";position:absolute;left:18px;right:18px;top:18px;bottom:18px;
border:1px solid rgba(245,241,232,.18);
pointer-events:none;z-index:3;
}
/* iter 2 polish: 시네마틱 SCENE 라벨·타임코드 시각 숨김 — 환자 친화도 ↑, dawn 정체성(2-stage hero·골든아워·모노 폰트·CH I/II)은 보존 */
.r2-scene__media .label, .r2-scene__media .timecode{display:none !important}
.r2-scene__media .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");}
.r2-scene__media .vig{position:absolute;inset:0;box-shadow:inset 0 0 140px 30px rgba(0,0,0,.35);pointer-events:none}
/* Cinematic sim moods — extend as needed per page */
.r2-sim--soft{background:linear-gradient(140deg,#f3d9a8 0%,#d49a5e 60%,#5a3a1e 100%)}
.r2-sim--bright{background:radial-gradient(ellipse at 60% 40%, #fceac0 0%, #e0a868 50%, #4a2e16 100%)}
.r2-sim--clinic{background:linear-gradient(150deg,#e8e0d0 0%,#c8b896 50%,#7a6044 100%)}
.r2-sim--street{background:linear-gradient(180deg,#f0c887 0%,#c87a4a 60%,#3a2010 100%)}
.r2-sim--ivory{background:linear-gradient(160deg,#faf5e8 0%,#e0c896 60%,#7a5a36 100%)}
.r2-sim--coral{background:linear-gradient(150deg,#f8c8a0 0%,#d6805a 55%,#4a2818 100%)}
.r2-sim--sage{background:linear-gradient(140deg,#d8d6b8 0%,#9aa080 55%,#3a4030 100%)}
.r2-sim--rose{background:linear-gradient(150deg,#f2c8c0 0%,#c87878 55%,#4a2828 100%)}
.r2-sim--gold{background:linear-gradient(160deg,#f6dfa0 0%,#c89850 55%,#4a3018 100%)}
.r2-sim--shadow{background:linear-gradient(150deg,#c8b0a0 0%,#6a584a 60%,#1a120a 100%)}
/* v3 iter 3: scene copy padding 토큰화 — vertical rhythm 56 (2xl 가까이) */
.r2-scene__copy{padding:var(--space-3xl) 4.5vw;display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.r2-scene--alt .r2-scene__copy{background:var(--paper-deep)}
.r2-scene__num{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--gold-deep);text-transform:uppercase;margin-bottom:22px}
.r2-scene__num span{color:rgba(26,20,16,.4);margin-left:14px}
/* v3 iter 4: scene h — line-height 1.32 → ts-leading-heading(1.35). em deco weight 토큰화. */
.r2-scene__h{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:34px;line-height:var(--ts-leading-heading);letter-spacing:var(--ts-letter-kr-heading);color:var(--ink)}
.r2-scene__h em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--rust);font-weight:var(--ts-weight-deco);letter-spacing:var(--ts-letter-en)}
/* iter 6: scene body 가독성 — weight 300→400, 대비 .65→.82, line-height 1.9→1.85(시스템 토큰)
v3 iter 3: paragraph rhythm 토큰화 — heading→body 22 유지, p→p gap 토큰 */
.r2-scene__p{margin-top:22px;font-size:15px;line-height:var(--ts-leading-loose);color:var(--ts-body);font-weight:var(--ts-weight-regular);max-width:460px}
.r2-scene__p + .r2-scene__p{margin-top:var(--rhythm-paragraph-gap)}
/* v3 iter 4: scene cite — latin italic, letter-spacing 0(en) + word-spacing 0. */
.r2-scene__cite{margin-top:28px;padding-left:18px;border-left:2px solid var(--gold);font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:var(--ts-weight-deco);font-size:19px;line-height:1.7;color:rgba(26,20,16,.85);max-width:440px;letter-spacing:var(--ts-letter-en);word-spacing:0}
.r2-scene__cite b{display:block;margin-top:10px;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:10px;letter-spacing:var(--ts-letter-mono-kicker);color:rgba(26,20,16,.45);font-weight:var(--ts-weight-regular);text-transform:uppercase;word-spacing:0}
/* ============ PILLARS (service cards grid) ============ */
.r2-pillars{padding:120px 6vw 80px;background:var(--paper-deep)}
.r2-pillars__head{max-width:880px;margin:0 auto 60px;text-align:center}
.r2-pillars__num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:64px;color:var(--gold-deep);line-height:1}
/* v3 iter 4: pillars deco h2 — line-height 토큰. */
.r2-pillars__title{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:36px;line-height:var(--ts-leading-heading);letter-spacing:var(--ts-letter-kr-heading);color:var(--ink);margin-top:14px}
.r2-pillars__title em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--rust);font-weight:var(--ts-weight-deco);letter-spacing:var(--ts-letter-en)}
.r2-pillars__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.r2-pillar{background:var(--paper);padding:48px 32px;display:flex;flex-direction:column;min-height:280px;transition:background .3s ease}
.r2-pillar:hover{background:#faf5e8}
.r2-pillar__chip{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
/* v3 iter 4: pillar h3 — 본문 카드 h3은 weight-medium(500). line-height ts-leading-heading 토큰. */
.r2-pillar__h{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading);font-size:24px;line-height:var(--ts-leading-heading);letter-spacing:var(--ts-letter-kr-heading);color:var(--ink)}
/* 2026-05-20: 한글 em에 Cormorant Garamond italic은 매핑 fallback으로 어색 — Noto Serif KR italic + rust 강조로 통일 */
.r2-pillar__h em{font-family:'Noto Serif KR',serif;font-style:normal;color:var(--rust);font-weight:500}
/* 2026-05-20: 모든 헤딩 em에 한글 가독성 보장 — em.latin(영문 데코)은 Cormorant 유지, 한글 em은 Noto Serif KR로 통일 */
body.r2-body .r2 em:not(.latin):not(.mono){
font-family:'Noto Serif KR',serif !important;
font-style:normal !important;
letter-spacing:var(--ts-letter-kr-heading);
}
/* iter 6: pillar body — weight 300→400, 대비 .62→.82 */
.r2-pillar__p{margin-top:14px;font-size:14px;line-height:var(--ts-leading-loose);color:var(--ts-body);font-weight:var(--ts-weight-regular);flex:1}
.r2-pillar__more{margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;align-self:flex-start;transition:color .3s,border-color .3s}
.r2-pillar__more:hover{color:var(--rust);border-color:var(--rust)}
/* ============ DIRECTOR (doctor card + video embed) ============ */
.r2-director{padding:120px 6vw;background:var(--ink);color:var(--paper)}
.r2-director__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.r2-director__media{position:relative;aspect-ratio:9/13;background:linear-gradient(160deg,#3a2a1a 0%,#1a120a 100%);overflow:hidden}
.r2-director__media::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%, rgba(255,210,150,.25) 0%, transparent 60%)}
.r2-director__label{position:absolute;left:24px;top:24px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.85);background:rgba(0,0,0,.45);padding:8px 12px;border:1px solid rgba(245,241,232,.25)}
.r2-director__name{position:absolute;left:24px;right:24px;bottom:24px;color:var(--paper)}
.r2-director__name b{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:36px;line-height:1.1}
.r2-director__name span{display:block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.7)}
.r2-director__copy{}
.r2-director__num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:64px;color:var(--gold);line-height:1}
.r2-director__h{font-family:'Noto Serif KR',serif;font-weight:300;font-size:42px;line-height:1.25;color:var(--paper);margin-top:14px}
.r2-director__h em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-weight:300}
/* iter 6: director body (dark bg) — weight 300→400, ivory .72→.86 */
.r2-director__p{margin-top:28px;font-size:16px;line-height:var(--ts-leading-loose);color:var(--ts-body-inv);font-weight:var(--ts-weight-regular);max-width:520px}
.r2-director__creds{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px}
.r2-director__creds li{list-style:none;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep);padding:8px 14px}
/* Video embed (letterboxed YouTube) */
.r2-video{padding:80px 6vw;background:var(--ink)}
.r2-video__wrap{max-width:1100px;margin:0 auto;position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.r2-video__wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.r2-video__bar{position:absolute;left:0;right:0;height:4vh;background:#000;z-index:2;pointer-events:none}
.r2-video__bar--top{top:0}
.r2-video__bar--bot{bottom:0}
.r2-video__label{position:absolute;left:24px;top:calc(4vh + 24px);z-index:3;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.85);background:rgba(0,0,0,.45);padding:8px 12px;border:1px solid rgba(245,241,232,.25);pointer-events:none}
/* ============ FAQ (cinematic accordion) ============ */
.r2-faq{padding:120px 6vw;background:var(--paper)}
.r2-faq__head{max-width:880px;margin:0 auto 60px;text-align:center}
.r2-faq__num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:64px;color:var(--gold-deep);line-height:1}
/* v3 iter 4: faq deco h2 — 토큰 통일. */
.r2-faq__title{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:36px;line-height:var(--ts-leading-heading);letter-spacing:var(--ts-letter-kr-heading);color:var(--ink);margin-top:14px}
.r2-faq__title em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--rust);font-weight:var(--ts-weight-deco)}
.r2-faq__list{max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
.r2-faq__item{border-bottom:1px solid var(--line)}
.r2-faq__q{padding:28px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-medium);font-size:19px;line-height:1.5;color:var(--ink)}
.r2-faq__q::after{content:"+";font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--gold-deep);font-weight:300;transition:transform .3s}
.r2-faq__item[open] .r2-faq__q::after{content:"−"}
/* iter 6: faq answer — weight 300→400, 대비 .7→.82, 시스템 토큰 */
/* v3 iter 7: max-width 760 → 65ch (Mayo Clinic) */
.r2-faq__a{padding:0 0 28px;font-size:15px;line-height:var(--ts-leading-loose);color:var(--ts-body);font-weight:var(--ts-weight-regular);max-width:var(--ts-max-width-prose)}
/* ============ VISIT (location/map) ============ */
.r2-visit{padding:120px 6vw;background:var(--paper-deep)}
.r2-visit__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.r2-visit__copy{}
.r2-visit__num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:64px;color:var(--gold-deep);line-height:1}
/* v3 iter 4: visit deco h — 토큰 통일. */
.r2-visit__h{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:36px;line-height:var(--ts-leading-heading);letter-spacing:var(--ts-letter-kr-heading);color:var(--ink);margin-top:14px}
.r2-visit__h em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--rust);font-weight:var(--ts-weight-deco)}
.r2-visit__rows{margin-top:32px;border-top:1px solid var(--line)}
.r2-visit__row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.r2-visit__rowLabel{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.r2-visit__rowValue{font-size:15px;line-height:1.7;color:var(--ink)}
.r2-visit__map{position:relative;aspect-ratio:4/3;background:linear-gradient(140deg,#e8d8b8 0%,#a08868 100%);overflow:hidden}
.r2-visit__mapLabel{position:absolute;left:24px;top:24px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,20,16,.7);background:rgba(245,241,232,.7);padding:8px 12px}
/* ============ CTA ============ */
.r2-cta{position:relative;padding:140px 6vw 150px;text-align:center;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(196,128,80,.18) 0%, transparent 60%),var(--paper)}
.r2-cta__inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.r2-cta__num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:64px;color:var(--gold-deep);line-height:1}
.r2-cta__h{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:clamp(36px,4.6vw,58px);line-height:1.2;letter-spacing:-.018em;color:var(--ink);margin-top:16px}
.r2-cta__h em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--rust)}
/* iter 6: cta lede — weight 300→400, 대비 .7→.82, 시스템 토큰 */
.r2-cta__p{margin-top:26px;font-size:16px;line-height:var(--ts-leading-loose);color:var(--ts-body);font-weight:var(--ts-weight-regular)}
/* iter 2 cont.: primary treatment — gold gradient + lift, editorial mono 유지 */
.r2-cta__btn{display:inline-flex;align-items:center;gap:14px;margin-top:44px;padding:22px 56px;min-height:60px;border:1px solid transparent;color:#fff;text-decoration:none;font-size:13px;letter-spacing:.32em;text-transform:uppercase;background:linear-gradient(135deg,#C4A265 0%,#B0894A 100%);transition:transform .25s ease,box-shadow .25s ease,background .35s ease;position:relative;overflow:hidden;font-family:'JetBrains Mono',monospace;z-index:1;box-shadow:0 10px 28px -10px rgba(138,106,68,.55),0 2px 0 0 rgba(0,0,0,.04)}
.r2-cta__btn::before{content:"";display:inline-block;width:18px;height:18px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat;flex:none;opacity:.95}
.r2-cta__btn:hover{background:linear-gradient(135deg,#B0894A 0%,#9B7639 100%);transform:translateY(-2px);box-shadow:0 14px 32px -8px rgba(138,106,68,.65),0 3px 0 0 rgba(0,0,0,.05);color:#fff}
.r2-cta__btn:active{transform:translateY(0)}
/* iter 2 cont.: secondary 보조 액션 행 — primary 아래 */
.r2-cta__actions-sub{margin-top:18px;display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.r2-cta__actions-sub a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid transparent;padding:2px 0;transition:color .25s,border-color .25s}
.r2-cta__actions-sub a:hover{color:var(--rust);border-bottom-color:var(--rust)}
.r2-cta__actions-sub .dot{width:3px;height:3px;border-radius:50%;background:var(--gold-deep);opacity:.5;display:inline-block}
.r2-cta__trust{margin-top:22px;display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;background:rgba(196,162,101,.12);font-family:'Noto Serif KR',serif;font-size:13px;color:var(--gold-deep);letter-spacing:.01em}
.r2-cta__trust::before{content:"●";font-size:8px;color:var(--rust)}
/* 3열 전환 정보 블록 — CTA 직후 (2026-05-23: media query 이후로 옮김 위해 정의 순서 변경) */
.r2-cta__convert{max-width:1080px;margin:72px auto 0;padding:48px 6vw;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.r2-cta__convert > div{background:var(--paper);padding:32px 28px;text-align:center}
.r2-cta__convert h4{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px;font-weight:500}
.r2-cta__convert p{font-family:'Noto Serif KR',serif;font-weight:400;font-size:18px;line-height:1.6;color:var(--ink);margin:0}
.r2-cta__convert p b{color:var(--rust);font-weight:600;display:block;font-size:22px;margin-bottom:6px}
.r2-cta__convert a{color:inherit;text-decoration:none;transition:color .25s}
.r2-cta__convert a:hover{color:var(--rust)}
/* 2026-05-23: CTA 모바일 — 3 카드 stack fix. media query를 기본 정의 뒤로 옮김 */
@media (max-width:768px){
.r2-cta{padding:90px 5vw 110px}
.r2-cta__btn{margin-top:34px;padding:18px 32px;min-height:54px;font-size:12px;letter-spacing:.26em;width:100%;max-width:340px;justify-content:center}
.r2-cta__actions-sub{font-size:10px;letter-spacing:.18em;gap:12px;flex-direction:column}
.r2-cta__actions-sub .dot{display:none}
.r2-cta__convert{grid-template-columns:1fr !important;margin-top:48px;padding:32px 5vw}
.r2-cta__convert > div{padding:24px 18px}
.r2-cta__convert p{font-size:16px}
.r2-cta__convert p b{font-size:19px}
}
/* ============ BOOKING BAND (footer 직전 강한 전환) ============
v3 iter 3: spacing 토큰화 — 80 (--space-4xl), 32 (--space-xl) */
.r2-band{padding:var(--space-4xl) 6vw;background:#b8663c;color:#fff;text-align:center}
/* v3 iter 4: band deco h — 토큰 통일 (inverse 배경 위 deco). */
.r2-band__h{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-regular);font-size:clamp(28px,3.2vw,40px);line-height:var(--ts-leading-heading);letter-spacing:var(--ts-letter-kr-heading);margin-bottom:14px}
.r2-band__h em{font-family:'Cormorant Garamond',serif;font-style:italic;color:#fce9d2;font-weight:300}
.r2-band__p{margin-bottom:var(--space-xl);font-size:15px;line-height:1.7;color:rgba(255,255,255,.85)}
.r2-band__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* iter 2 cont.: 첫째 버튼 primary 골드 그라데이션, 나머지는 흰색 + 진한 텍스트 (이전: 모두 흰색, 텍스트 대비 낮음) */
.r2-band__btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:16px 32px;
font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
text-decoration:none;transition:all .3s ease;font-weight:600;
background:#fff;color:#7d3f1f;border:1px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.r2-band__btn:hover{background:transparent;color:#fff;border-color:#fff}
.r2-band__btn b{font-family:'Noto Serif KR',serif;font-weight:700;letter-spacing:.02em;text-transform:none;font-size:14px;color:inherit}
.r2-band__btn:first-child{background:linear-gradient(135deg,#C4A265 0%,#B0894A 100%);color:#fff;border-color:transparent;box-shadow:0 10px 28px -8px rgba(0,0,0,.35)}
.r2-band__btn:first-child:hover{background:linear-gradient(135deg,#B0894A 0%,#9B7639 100%);color:#fff;transform:translateY(-2px)}
/* iter 4: 모바일 booking band 패딩 + 버튼 정리 */
/* iter 7: 모바일 breakpoint 780→768 통일 */
@media (max-width:768px){
.r2-band{padding:56px 5vw 64px}
.r2-band__h{margin-bottom:12px}
.r2-band__p{margin-bottom:24px;font-size:14px}
.r2-band__row{flex-direction:column;align-items:center;gap:10px}
.r2-band__btn{min-width:260px;width:100%;max-width:340px;justify-content:center;padding:14px 24px;min-height:50px}
}
/* ============ FOOTER NAV (page connector) ============
v3 iter 3: footer top/bottom 토큰화 — 56 (3xl) top, 64 (3xl 가까이) bottom */
.r2-footer{padding:var(--space-3xl) 6vw 72px;background:var(--ink);color:rgba(245,241,232,.6)}
.r2-footer__brand{max-width:1180px;margin:0 auto 44px;padding-bottom:36px;border-bottom:1px solid rgba(245,241,232,.12);display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 22px}
.r2-footer__brand-name{font-family:'Noto Serif KR',serif;font-weight:var(--ts-weight-heading-soft);font-size:18px;letter-spacing:-.01em;color:var(--paper)}
/* v3 iter 4: footer brand-tag label — mono label token(.3em). */
.r2-footer__brand-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:var(--ts-letter-mono-label);text-transform:uppercase;color:var(--gold)}
/* iter 6: footer cert — 대비 .55→.7, weight 300→400 */
.r2-footer__brand-cert{flex:1 1 100%;margin:6px 0 0;font-size:12px;line-height:1.7;color:rgba(245,241,232,.7);font-weight:var(--ts-weight-regular)}
.r2-footer__brand-cert::before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);vertical-align:middle;margin-right:10px;opacity:.6}
.r2-footer__nav{max-width:1180px;margin:0 auto 60px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
/* iter 7: 모바일 breakpoint 780→768 통일 */
@media (max-width:768px){
/* iter 4: 모바일 footer brand + phone 정리 */
.r2-footer{padding:40px 5vw 56px}
.r2-footer__brand{margin-bottom:32px;padding-bottom:26px;gap:10px 18px}
.r2-footer__brand-name{font-size:16px}
.r2-footer__brand-cert{font-size:11px;line-height:1.65}
.r2-footer__phone{margin-left:0;width:100%;max-width:280px;padding:12px 16px}
.r2-footer__phone b{font-size:18px}
.r2-footer__bottom{justify-content:flex-start;flex-direction:column;gap:10px;align-items:flex-start;padding-top:32px;font-size:10px}
}
.r2-footer__group h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:500}
.r2-footer__group ul{list-style:none;padding:0;margin:0}
.r2-footer__group li{margin-bottom:10px}
/* iter 5 (2026-05-18): 푸터 링크 대비 강화 .7 → .82 + 폰트 13 → 14 */
.r2-footer__group a{color:rgba(245,241,232,.82);font-size:14px;line-height:1.7;transition:color .3s;word-break:keep-all}
.r2-footer__group a:hover,.r2-footer__group a:focus{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* iter 4: footer phone 강조 — 핵심 CTA */
.r2-footer__phone{display:inline-flex;flex-direction:column;gap:4px;padding:10px 14px;margin:2px 0 8px -14px;border:1px solid rgba(196,162,101,.45);border-radius:0;background:rgba(196,162,101,.08);transition:all .25s;line-height:1.2}
.r2-footer__phone:hover{background:rgba(196,162,101,.18);border-color:var(--gold)}
.r2-footer__phone b{font-family:'JetBrains Mono',monospace;font-size:16px;letter-spacing:.06em;color:var(--paper);font-weight:700}
/* iter 6: footer phone label — 대비 .55→.7, weight 300→400 */
.r2-footer__phone span{font-size:10px;letter-spacing:.06em;color:rgba(245,241,232,.7);font-weight:var(--ts-weight-regular)}
/* v3 iter 4: footer bottom copyright — kicker 톤(.22em token). italic span은 latin(en, 0). */
.r2-footer__bottom{max-width:1180px;margin:0 auto;padding-top:40px;border-top:1px solid rgba(245,241,232,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:11px;letter-spacing:var(--ts-letter-mono-kicker);text-transform:uppercase}
/* v3 iter 8: footer 작은 italic Cormorant → Pretendard latin (가독성 우선, brand-tag 톤 유지) */
.r2-footer__bottom span{font-family:'Pretendard',sans-serif;font-style:normal;font-weight:var(--ts-weight-medium);font-size:12px;letter-spacing:var(--ts-letter-mono-kicker);text-transform:uppercase;word-spacing:0;color:rgba(245,241,232,.55)}
/* iter 5 GEO/Brand authority — NAP 일관성 카드 + 공식 자격 인용 (footer 시각 + microdata) */
.r2-footer__nap{max-width:1180px;margin:0 auto 36px;padding:24px 28px;border:1px solid rgba(196,162,101,.28);border-radius:2px;background:rgba(245,241,232,.04);color:rgba(245,241,232,.78);font-size:13px;line-height:1.75}
.r2-footer__nap-name{margin-bottom:10px;font-family:'Noto Serif KR',serif;color:var(--paper);font-size:15px;letter-spacing:-.01em}
.r2-footer__nap-name strong{font-weight:600}
.r2-footer__nap-name span{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.8}
.r2-footer__nap-row{margin-top:6px;color:rgba(245,241,232,.75);font-size:13px}
.r2-footer__nap-row a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(196,162,101,.4);padding-bottom:1px}
.r2-footer__nap-row a:hover,.r2-footer__nap-row a:focus{color:var(--paper);border-bottom-color:var(--paper)}
.r2-footer__authority{margin:14px 0 0;padding:14px 0 0;border-top:1px solid rgba(196,162,101,.18);list-style:none;color:rgba(245,241,232,.72);font-size:12px;line-height:1.85}
.r2-footer__authority li{position:relative;padding-left:14px}
.r2-footer__authority li::before{content:"·";position:absolute;left:0;color:var(--gold);opacity:.7}
.r2-footer__authority em{font-style:normal;color:var(--gold);font-weight:500}
@media(max-width:768px){
.r2-footer__nap{padding:18px 18px;font-size:12px;line-height:1.7}
.r2-footer__nap-name{font-size:14px}
.r2-footer__authority{font-size:11px;line-height:1.8}
}
/* ============ MOBILE ============ */
/* iter 7: 모바일 breakpoint 768px 통일 (이전: 780 / 640 / 768 혼재 — mobile axis 4.32 원인 중 하나) */
/* v3 iter 1 (2026-05-20): mobile axis 4.8 → 7+ 목표 깊은 정합
- hero height svh 단위 (iOS Safari URL bar) + safe-area 합산
- 한글 line-height 1.05 → 1.18~1.25 (가독성)
- hero visual 모바일 노출 (16:10 small) — dawn 톤 + image axis 동시 개선
- tap-target 시스템 (min-height:48px) 모든 모바일 CTA
- kicker letter-spacing 한글 보정 .4em → .26em */
@media (max-width:768px){
/* v3 iter 3: spacing 토큰 모바일 자동 비례 축소 (~64%) — 모든 토큰 단일 지점 (mobile spacing 자동 정합)
- section 96 → 56, section-sm 64 → 40, section-gap 80 → 48
- 큰 토큰 5xl/6xl도 같이 — desktop만 큰 spacing 보장 */
.r2{
--space-section:56px;
--space-section-sm:40px;
--space-4xl:56px;
--space-5xl:64px;
--space-6xl:80px;
--rhythm-section-gap:48px;
--rhythm-heading-gap:18px;
--rhythm-block-gap:24px;
}
/* iter 4: 모바일 hero 정리 — supporting margin-top:-72px 제거(overlap), padding 5vh로, title 38px */
/* v3 iter 1: svh 단위 + min-height clamp + padding px clamp (5vh가 작은 폰에서 깨짐) */
.r2-hero{min-height:clamp(620px,92svh,820px);height:auto;padding:0}
.r2-hero__chrome{padding:clamp(40px,7vh,72px) 5vw clamp(32px,5vh,56px)}
/* v3 iter 1: title line-height 1.12 → 1.2 한글 가독성, letter-spacing -.02em 유지 */
.r2-hero__title{font-size:clamp(30px,8.4vw,40px);line-height:1.2;letter-spacing:-.018em}
.r2-hero__lede{font-size:15px;margin-top:18px;line-height:1.78;letter-spacing:-.004em}
/* v3 iter 1: 모바일 hero 단일 컬럼 + visual 16:10 작게 노출 (dawn 톤 + image axis) */
.r2-hero__center{grid-template-columns:1fr;gap:24px;min-height:auto;align-items:start}
.r2-hero__copyWrap{max-width:none;min-height:240px}
/* v3 iter 1: visual display:none → block 16:10 작게 (image axis 5.54 동시 개선) */
.r2-hero__visual{display:block;max-width:100%;aspect-ratio:16/10;margin-top:0;justify-self:stretch}
.r2-hero__visual .r2-hero__frame{height:auto;aspect-ratio:16/10}
.r2-hero__caption{font-size:9px;letter-spacing:.22em;bottom:8px;left:10px}
.r2-hero__supporting{margin-top:24px;font-size:15.5px;line-height:1.65;max-width:100%}
/* v3 iter 1: CTA row tap-target 48 → 52 (한글 라벨 클릭 영역 확장) */
.r2-hero__ctaRow{flex-direction:column;width:100%;gap:10px;margin-bottom:14px}
.r2-hero__cta{width:100%;justify-content:center;min-height:52px;padding:14px 24px}
.r2-hero__cta--primary{min-width:0;font-size:13px}
.r2-hero__badges{margin-bottom:18px;gap:8px}
.r2-hero__badge{padding:9px 13px;font-size:10px;min-height:36px}
.r2-hero__badge b{font-size:12px}
/* v3 iter 1: kicker letter-spacing .4em → .26em 한글 부착 (영문 외 시각 분산 완화) */
.r2-hero__kicker{margin-bottom:18px;font-size:10px;letter-spacing:.26em;gap:10px}
.r2-hero__kicker::before{width:28px}
/* v3 iter 1: bottom row 모바일 컴팩트 */
.r2-hero__bottom{flex-direction:column;align-items:flex-start;gap:14px}
.r2-hero__chapter{text-align:left}
.r2-hero__chapter b{font-size:20px}
.r2-hero__scroll::after{height:36px}
/* v3 iter 1: prodnote 모바일 — flex-wrap → column, 글자 시각 분산 완화 */
.r2-prodnote{padding:24px 5vw;flex-direction:column;align-items:flex-start;gap:10px;font-size:10px;letter-spacing:.18em}
.r2-prodnote span{font-size:16px}
.r2-stats{grid-template-columns:repeat(2,1fr)}
.r2-stat:nth-child(2){border-right:none}
.r2-stat:nth-child(1),.r2-stat:nth-child(2){border-bottom:1px solid var(--line)}
.r2-stat{padding:40px 18px}
/* v3 iter 1: scene 모바일 aspect-ratio 명시 (height 260px 고정 → 비율 유지) */
.r2-scene{grid-template-columns:1fr;min-height:auto}
.r2-scene__media{height:auto;aspect-ratio:16/10;min-height:240px}
/* iter 8: 모바일 ghost 번호 + frame mark 정렬 (image axis 보강) */
.r2-scene__media::before{left:24px;font-size:clamp(96px,28vw,140px)}
.r2-scene--rev .r2-scene__media::before{left:auto;right:24px}
.r2-scene__media::after{left:12px;right:12px;top:12px;bottom:12px}
.r2-scene__copy{padding:40px 5vw}
.r2-scene--rev{direction:ltr}
/* iter 4: 모바일 warmth 패딩 정리 */
/* iter 7: vertical rhythm 통일 — section padding 64/56/48 단계, h2 clamp 26→30 단계 */
.r2-warmth{padding:56px 5vw 48px}
/* v3 iter 3: 모바일 warmth intro→stats gap 토큰화 (48 → rhythm-section-gap 모바일값) */
.r2-warmth__intro{margin-bottom:var(--rhythm-section-gap)}
/* v3 iter 8: 모바일 h2 clamp 미세 ↑ — 26~32 (이전 24~30). 헤딩 weight 600+와 함께 시각 무게감. */
.r2-warmth__title{font-size:clamp(26px,6.2vw,32px);line-height:var(--ts-leading-heading)}
.r2-warmth__num{font-size:52px}
.r2-warmth__lede{font-size:15px;margin-top:var(--rhythm-heading-gap);line-height:1.78}
.r2-pillars{padding:56px 5vw}
.r2-pillars__grid{grid-template-columns:1fr}
.r2-pillars__title{font-size:clamp(26px,6.2vw,32px)}
.r2-director{padding:56px 5vw}
.r2-director__grid{grid-template-columns:1fr;gap:36px}
.r2-director__h{font-size:clamp(28px,6.6vw,34px)}
.r2-faq{padding:56px 5vw}
.r2-faq__title{font-size:clamp(26px,6.2vw,32px)}
.r2-visit{padding:56px 5vw}
.r2-visit__grid{grid-template-columns:1fr;gap:28px}
.r2-visit__h{font-size:clamp(26px,6.2vw,32px)}
/* v3 iter 1: CTA 섹션 모바일 — sticky CTA(64px) 가리지 않게 하단 padding 확보 */
.r2-cta{padding:64px 5vw 80px}
.r2-footer__nav{grid-template-columns:repeat(2,1fr);gap:32px}
/* iter 7: sticky CTA(64px) + safe-area 와 충돌 안 나도록 main 하단 padding */
/* v3 iter 1: body padding은 mobile-sticky-cta가 책임 (72px) — main은 0 유지 */
body.r2-body main.r2{padding-bottom:0}
}
/* v3 iter 1 (2026-05-20): 작은 폰 (<=380px) 추가 보정 — 한글 가독성 + tap-target */
@media (max-width:380px){
.r2-hero__chrome{padding:36px 5vw 28px}
.r2-hero__title{font-size:clamp(26px,8.6vw,34px);line-height:1.22}
.r2-hero__lede{font-size:14.5px;line-height:1.78}
.r2-hero__kicker{letter-spacing:.22em;margin-bottom:14px}
.r2-hero__supporting{font-size:14.5px;line-height:1.6;margin-top:18px}
.r2-hero__cta{min-height:50px;padding:13px 18px;font-size:12px;letter-spacing:.16em}
.r2-hero__badge{padding:8px 11px;font-size:9.5px}
.r2-hero__badge b{font-size:11.5px}
.r2-cta__btn{padding:16px 24px;min-height:50px;font-size:11.5px;letter-spacing:.22em}
.r2-band__btn{min-height:48px;padding:13px 20px;font-size:12px}
}
/* v3 iter 1 (2026-05-20): 모바일 sticky CTA(64px) 활성 시 본문 마지막 섹션이 가리지 않도록
page-mobile-sticky-cta.php가 body padding-bottom:72px 책임 — 메인 footer가 sticky 위에서 잘리지 않게 */
@media (max-width:768px){
body.r2-body .r2-footer{padding-bottom:calc(56px + env(safe-area-inset-bottom,0))}
/* 2026-05-23: ssok-facts (한눈에 보기 카드) 모바일 hide — schema/itemscope는 그대로 살아 있음 (AI 인용용) */
body.r2-body .ssok-facts{display:none}
}