/* =========================================================
   온담한의원 (ONDAM KMC) — Landing Page
   Palette extracted from reference: brown #3E2723 / gold #E1C8A3
   ========================================================= */

:root {
    --brown: #3E2723;
    --brown-2: #4c352a;
    --brown-3: #5b4636;
    --gold: #E1C8A3;
    --gold-2: #E6C593;
    --gold-deep: #A69479;
    --cream: #F1EADF;
    --cream-2: #FCEBCF;
    --ink: #2C2C2C;
    --muted: #8D897D;
    --line: #e6e2dc;
    --white: #ffffff;

    --serif: 'Noto Serif KR', serif;
    --sans: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
    --cormo: 'Cormorant', 'Playfair Display', serif;

    --container: 1500px;
    --header-h: 92px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--sans);
    font-size: 1.6rem;
    color: var(--ink);
    line-height: 1.6;
    background: #fff;
    letter-spacing: -0.02em;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.serif { font-family: var(--serif); }
.cormo { font-family: var(--cormo); letter-spacing: .04em; }
.txt_center { text-align: center; }
.white { color: #fff; }
.flex { display: flex; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
}

/* ---------- Placeholder blocks (실제 사진 대체) ---------- */
.ph {
    position: relative;
    background: linear-gradient(135deg, #e9e2d6 0%, #d9cdb9 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ph::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.5), transparent 40%),
                      repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 12px, transparent 12px 24px);
    pointer-events: none;
}
.ph > span {
    position: relative; z-index: 2;
    font-family: var(--serif);
    font-size: 1.5rem; color: rgba(62,39,35,.55);
    letter-spacing: .02em;
}

/* =========================================================
   HEADER
   ========================================================= */
.header-wrap {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 900;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: background .3s;
}
.header {
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    position: relative;
}
.hd_logo { display: flex; align-items: center; gap: 10px; }
.hd_logo .logo_mark {
    font-family: var(--serif); font-weight: 700; font-size: 2.6rem;
    color: var(--brown);
    border: 1.5px solid var(--brown); border-radius: 50%;
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    letter-spacing: -2px;
}
.hd_logo .logo_txt { font-family: var(--serif); font-weight: 600; font-size: 2.2rem; color: var(--brown); }

#gnb { display: flex; gap: 46px; }
#gnb .main_menu > a {
    font-size: 1.8rem; font-weight: 500; color: var(--ink);
    position: relative; padding: 8px 0;
    transition: color .2s;
}
#gnb .main_menu > a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
    background: var(--brown); transition: width .3s;
}
#gnb .main_menu:hover > a { color: var(--brown); }
#gnb .main_menu:hover > a::after { width: 100%; }
#gnb .main_menu.on > a { color: var(--brown); font-weight: 600; }
#gnb .main_menu.on > a::after { width: 100%; }

.hd_rt { display: flex; align-items: center; gap: 22px; }
.link_btn { display: flex; align-items: center; gap: 14px; font-size: 1.4rem; color: var(--muted); }
.link_btn .login { cursor: pointer; }
.link_btn .join {
    border: 1px solid var(--gold-deep); color: var(--brown);
    padding: 7px 16px; border-radius: 40px; font-weight: 500;
    transition: all .2s;
}
.link_btn .join:hover { background: var(--brown); color: #fff; border-color: var(--brown); }
.hd_menu { display: flex; flex-direction: column; gap: 5px; width: 28px; }
.hd_menu span { height: 2px; background: var(--brown); border-radius: 2px; transition: .3s; }

/* Mega menu */
.sub_wrap_menu {
    position: absolute; top: var(--header-h); left: 0; width: 100%;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(0,0,0,.06);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .4s ease, opacity .3s;
}
.header-wrap:hover .sub_wrap_menu { max-height: 460px; opacity: 1; }
.sub_menu_inner {
    max-width: var(--container); margin: 0 auto; padding: 34px 40px 44px;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;
}
.sub_menu_inner .sub_menu .bg { margin-bottom: 16px; }
.sub_menu_inner .font36 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--brown); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sub_menu_inner ul li a { display: block; font-size: 1.45rem; color: #555; padding: 7px 0; transition: color .2s; }
.sub_menu_inner ul li a:hover { color: var(--brown); padding-left: 4px; }

/* =========================================================
   SITEMAP (전체메뉴)
   ========================================================= */
.sitemap_wrap { position: fixed; inset: 0; z-index: 1200; visibility: hidden; }
.sitemap_wrap.on { visibility: visible; }
.sitemap_bg { position: absolute; inset: 0; background: rgba(30,20,16,.6); opacity: 0; transition: opacity .4s; }
.sitemap_wrap.on .sitemap_bg { opacity: 1; }
.sitemap_list {
    position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 90vw);
    background: #fff; padding: 100px 44px 40px; overflow-y: auto;
    transform: translateX(100%); transition: transform .45s cubic-bezier(.5,0,.2,1);
}
.sitemap_wrap.on .sitemap_list { transform: translateX(0); }
.sitemap_list .flex { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.sitemap_list .sub_menu p { font-size: 1.9rem; color: var(--brown); margin-bottom: 14px; }
.sitemap_list .sub_menu ul li a { font-size: 1.5rem; color: #666; padding: 5px 0; display: block; transition: color .2s; }
.sitemap_list .sub_menu ul li a:hover { color: var(--brown); }
.sitemap_close { position: absolute; top: 34px; right: 40px; font-size: 3.4rem; color: var(--brown); line-height: 1; }

/* =========================================================
   QUICK MENU
   ========================================================= */
.quick_menu { position: fixed; right: 20px; bottom: 40px; z-index: 800; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.quick_list { background: #fff; border-radius: 40px; box-shadow: 0 10px 30px rgba(62,39,35,.18); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.quick_list li a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 66px; padding: 12px 4px; border-radius: 30px; font-size: 1.15rem; color: #6b6157; text-align: center; line-height: 1.3;
    transition: background .2s, color .2s;
}
.quick_list li a:hover { background: var(--cream); color: var(--brown); }
.quick_list li.tel a { background: var(--brown); color: #fff; font-weight: 700; font-size: 1.25rem; }
.quick_list li.tel a:hover { background: var(--brown-2); }
.quick_list .icon { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); position: relative; }
.quick_list .icon_kakao { background: #FEE500; }
.quick_list .icon_naver { background: #03C75A; }
.quick_list .icon_blog { background: #03C75A; }
.quick_list li.tel .icon { background: rgba(255,255,255,.25); }
.top_btn { width: 46px; height: 46px; border-radius: 50%; background: var(--brown); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(62,39,35,.25); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .3s; }
.top_btn.on { opacity: 1; visibility: visible; transform: translateY(0); }

/* =========================================================
   VISUAL
   ========================================================= */
.visual_section { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: center; }
.visual_section .bg { position: absolute; inset: 0; }
.visual_section .video_wrap, .visual_section .bg02 { position: absolute; inset: 0; }
.visual_section .ambient {
    position: absolute; inset: -10%;
    background:
        radial-gradient(60% 60% at 30% 30%, #6a4a38 0%, transparent 60%),
        radial-gradient(70% 70% at 75% 70%, #2c1c15 0%, transparent 60%),
        linear-gradient(135deg, #3a271e 0%, #21140f 100%);
    animation: kenburns 18s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1) translate(0,0);} to { transform: scale(1.12) translate(-2%, -2%);} }
.visual_section .bg02 { background: radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 55%); }
.visual_txt { position: relative; z-index: 3; width: 100%; color: #fff; }
.visual_txt .en { font-size: 1.8rem; letter-spacing: .3em; color: var(--gold); opacity: .9; text-align: center; }
.visual_txt .txt_wrap { margin: 34px 0; }
.visual_txt .font24 { font-size: 2.2rem; color: var(--gold-2); margin-bottom: 22px; font-weight: 300; }
.visual_txt .txt_wrap .serif { font-size: 4.4rem; font-weight: 500; line-height: 1.35; }
.visual_txt .change { position: relative; height: 6.2rem; margin-top: 6px; }
.visual_txt .change span { position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s; }
.visual_txt .change span.show { opacity: 1; transform: translateY(0); }
.visual_txt .txt01 { color: #fff; }
.visual_txt .txt02 { color: var(--gold); }
.scroll_hint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 4; text-align: center; color: rgba(255,255,255,.8); }
.scroll_hint .mouse { width: 24px; height: 40px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; display: inline-flex; justify-content: center; padding-top: 7px; }
.scroll_hint .mouse span { width: 4px; height: 8px; background: var(--gold); border-radius: 2px; animation: scrolldot 1.6s infinite; }
@keyframes scrolldot { 0%{opacity:0;transform:translateY(-4px);} 40%{opacity:1;} 80%{opacity:0;transform:translateY(8px);} }
.scroll_hint p { font-size: 1.1rem; letter-spacing: .25em; margin-top: 8px; }

/* =========================================================
   CIRCLE TRANSITION — 원이 커지며 화면 전환 (GSAP)
   기본은 display:none → anim.js(+GSAP)가 있을 때만 노출(fail-safe)
   ========================================================= */
.circle-trans { display: none; position: relative; height: 200vh; background: #16100c; }
.circle-trans .ct-stage {
    position: relative; height: 100vh; overflow: hidden;
    background: radial-gradient(circle at 50% 42%, #3a271e 0%, #16100c 70%);
}
.circle-trans .ct-fill {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #4c352a 0%, #2c1c15 100%);
    clip-path: circle(0% at 50% 50%);
    will-change: clip-path;
}
.circle-trans .ct-txt {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    padding: 0 24px;
}
.circle-trans .ct-txt .cormo { font-size: 2.2rem; letter-spacing: .22em; color: var(--gold); }
.circle-trans .ct-txt .serif { font-size: 4.2rem; font-weight: 500; color: #fff; line-height: 1.35; }
.circle-trans.is-mobile { height: auto; }
.circle-trans.is-mobile .ct-stage { height: 62vh; }
.circle-trans.is-mobile .ct-txt .serif { font-size: 2.6rem; }

/* =========================================================
   SECTION TITLE (공통)
   ========================================================= */
.sec_title .en_tit { font-size: 2rem; color: var(--gold-deep); letter-spacing: .05em; margin-bottom: 14px; }
.sec_title .title { font-size: 4.2rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.sec_title.white .title, .sec01 .sec_title .title { color: #fff; }
.more_btn {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid var(--gold-deep); color: var(--brown);
    padding: 13px 30px; border-radius: 40px; font-size: 1.6rem; font-weight: 500;
    transition: all .25s;
}
.more_btn::after { content: "→"; transition: transform .25s; }
.more_btn:hover { background: var(--brown); color: #fff; border-color: var(--brown); }
.more_btn:hover::after { transform: translateX(4px); }

/* =========================================================
   SEC 01 — 차별점
   ========================================================= */
.sec01 { background: var(--brown); padding: 130px 0 140px; position: relative; }
.sec01 .sec_title { margin-bottom: 70px; }
.sec01 .cont_wrap { gap: 80px; align-items: flex-start; }
.sec01 .left_cont { width: 42%; flex-shrink: 0; }
.sec01 .img_box { width: 100%; aspect-ratio: 4/4.6; border-radius: 6px; }
.ph-hanbang { background: linear-gradient(160deg, #6a4a38, #3a271e); }
.ph-hanbang::after { background-image: radial-gradient(circle at 70% 30%, rgba(225,200,163,.28), transparent 45%), repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 14px, transparent 14px 28px); }
.sec01 .subject_cont { margin-top: 34px; }
.sec01 .subject_cont p { font-size: 2.4rem; color: rgba(255,255,255,.45); font-family: var(--serif); line-height: 1.9; transition: color .3s; }
.sec01 .subject_cont p.on { color: #fff; }
.sec01 .right_cont { flex: 1; }
.sec01 .text_cont { display: flex; flex-direction: column; }
.sec01 .item { display: grid; grid-template-columns: 60px 1fr; gap: 0 26px; padding-bottom: 34px; opacity: .5; transition: opacity .4s; }
.sec01 .item.active { opacity: 1; }
.sec01 .progress { grid-row: span 5; display: flex; flex-direction: column; align-items: center; }
.sec01 .icon { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gold-2); display: flex; align-items: center; justify-content: center; color: var(--gold-2); font-family: var(--cormo); font-size: 2.2rem; flex-shrink: 0; transition: .3s; }
.sec01 .item.active .icon { background: var(--gold-2); color: var(--brown); }
.sec01 .line { width: 2px; background: rgba(230,197,147,.25); flex: 1; margin-top: 10px; position: relative; }
.sec01 .line span { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--gold-2); transition: height .5s; }
.sec01 .item.active .line span { height: 100%; }
.sec01 .item:last-child .line { display: none; }
.sec01 .play { font-family: var(--cormo); font-size: 1.6rem; color: var(--gold-deep); letter-spacing: .05em; }
.sec01 .tit { font-size: 3.4rem; color: #fff; font-weight: 700; margin: 6px 0 12px; }
.sec01 .keyword { font-size: 1.7rem; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.sec01 .item a { display: inline-flex; align-items: center; gap: 8px; font-size: 1.6rem; color: var(--gold-2); border-bottom: 1px solid transparent; }
.sec01 .item a em { font-style: normal; transition: transform .2s; }
.sec01 .item a:hover em { transform: translateX(4px); }

/* =========================================================
   SEC 02 — 치료 결과
   ========================================================= */
.sec02 .box01 { padding: 130px 0 120px; background: #fff; }
.sec02 .box01 .sec_title { margin-bottom: 50px; }
.sec02 .desc { font-size: 1.9rem; color: #555; margin-top: 22px; line-height: 1.75; }
.sec02 .desc b { color: var(--brown); font-weight: 600; }
.hover_btn { margin-top: 26px; font-size: 1.5rem; color: var(--muted); }
.hover_btn b { color: var(--brown); }
.sec02 .box01 .cont_wrap { gap: 30px; }
.case_item {
    flex: 1; position: relative; height: 460px; border-radius: 8px; overflow: hidden;
    background: linear-gradient(160deg, #4c352a, #2c1c15); color: #fff; cursor: pointer;
    box-shadow: 0 20px 40px rgba(62,39,35,.15);
}
.case_item.white { background: linear-gradient(160deg, var(--cream), #e4d9c6); color: var(--brown); }
.case_item .default { position: absolute; inset: 0; padding: 40px 34px; display: flex; flex-direction: column; justify-content: space-between; transition: opacity .4s; }
.case_item .top { font-size: 1.6rem; opacity: .8; }
.case_item .font34 { font-size: 3.2rem; font-weight: 700; line-height: 1.3; margin-bottom: 20px; font-family: var(--serif); }
.case_item .font20 { font-size: 1.6rem; display: flex; align-items: center; gap: 10px; opacity: .85; }
.case_item .font20 b { border: 1px solid currentColor; border-radius: 20px; padding: 2px 12px; font-size: 1.3rem; font-weight: 500; }
.case_item .font20 span { opacity: .4; }
.case_item .bottom { font-family: var(--cormo); font-size: 1.8rem; letter-spacing: .05em; opacity: .7; }
.case_item .hover { position: absolute; inset: 0; background: rgba(30,20,16,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; opacity: 0; transition: opacity .4s; }
.case_item:hover .hover { opacity: 1; }
.case_item:hover .default { opacity: 0; }
.case_item .mri { width: 100%; height: 130px; border-radius: 6px; }
.case_item .mri.before { background: linear-gradient(135deg,#3a3a44,#14141c); }
.case_item .mri.after { background: linear-gradient(135deg,#2f4a44,#14201c); }
.case_item .mri span { color: rgba(255,255,255,.85); font-size: 1.4rem; }
.case_item .hover p { color: var(--gold-2); font-size: 1.8rem; font-weight: 600; }

.sec02 .box02 { padding: 110px 0 130px; background: var(--cream); }
.sec02 .box02 .top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; }
.sec02 .box02 .top .flex { align-items: center; gap: 14px; }
.swiper-navi { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold-deep); position: relative; transition: all .2s; }
.swiper-navi::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-top: 2px solid var(--brown); border-right: 2px solid var(--brown); }
.swiper-navi.ba-prev::after, .swiper-navi.tour-prev::after { transform: translate(-30%,-50%) rotate(-135deg); }
.swiper-navi.ba-next::after, .swiper-navi.tour-next::after { transform: translate(-70%,-50%) rotate(45deg); }
.swiper-navi:hover { background: var(--brown); border-color: var(--brown); }
.swiper-navi:hover::after { border-color: #fff; }
.ba_slide .tit { display: flex; gap: 8px; margin-bottom: 16px; }
.ba_slide .tit span { font-size: 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 4px 14px; color: var(--brown); }
.ba_slide .img { position: relative; border-radius: 8px; overflow: hidden; height: 300px; }
.ba_slide .default { position: absolute; inset: 0; }
.ph.person { background: linear-gradient(160deg,#d9cdb9,#c3b299); }
.ba_slide .hover { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 0; opacity: 0; transition: opacity .35s; }
.ba_slide:hover .hover { opacity: 1; }
.ba_slide .hover .ph { flex: 1; height: 100%; }
.ba_slide .hover .before { background: linear-gradient(160deg,#cfc4b1,#b6a68e); }
.ba_slide .hover .after { background: linear-gradient(160deg,#c9d8c4,#a9c0a0); }
.ba_slide .hover .arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 44px; height: 44px; background: var(--brown); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.ba_slide .info { margin-top: 18px; }
.ba_slide .brown_point { color: var(--brown); font-weight: 700; font-size: 1.9rem; margin-bottom: 10px; }
.ba_slide .info .flex { justify-content: space-between; color: #6b6157; font-size: 1.5rem; border-top: 1px dashed var(--gold-deep); padding-top: 10px; }
.sec02 .remark { margin-top: 40px; font-size: 1.3rem; color: var(--muted); line-height: 1.7; }

/* =========================================================
   SEC 03 — 통계 스크롤 시퀀스 (핀 고정 + 배경 슬라이드 + 원형 리빌)
   ========================================================= */
.sec03 { position: relative; min-height: 100vh; background: #1a110c; }
.s3-stage { position: relative; height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }

/* 배경 패널 3장 — 스탯마다 위로 슬라이드 */
.s3-bgs { position: absolute; inset: 0; }
.s3-bg { position: absolute; inset: 0; background-size: cover; background-position: center;
    transform: translateY(100%); transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.s3-bg.on { transform: translateY(0); }
.s3-bg.past { transform: translateY(-100%); }
.s3-scrim { position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(22,14,10,.62) 0%, rgba(22,14,10,.16) 20%, rgba(22,14,10,.12) 72%, rgba(22,14,10,.55) 100%),
        radial-gradient(72% 62% at 50% 50%, rgba(22,14,10,.34) 0%, rgba(22,14,10,.66) 100%); }

.s3-title { position: absolute; top: clamp(60px, 12vh, 130px); left: 0; right: 0; z-index: 3;
    text-align: center; font-size: clamp(2.4rem, 1.6rem + 2vw, 4rem); font-weight: 600;
    text-shadow: 0 2px 20px rgba(0,0,0,.5); }

.s3-core { position: relative; z-index: 3; width: 100%; max-width: 1120px; padding: 0 40px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 4vw, 70px); }

/* 좌측 라벨 / 우측 숫자 — 크로스페이드 */
.s3-labels { position: relative; height: 180px; justify-self: end; width: 100%; }
.s3-lab { position: absolute; inset: 0; right: 0; display: flex; flex-direction: column; justify-content: center;
    text-align: right; font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 1.2vw, 2.8rem); font-weight: 600;
    line-height: 1.35; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.s3-lab.on { opacity: 1; transform: translateY(0); }

.s3-nums { position: relative; height: 200px; justify-self: start; width: 100%; }
.s3-num { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.s3-num.on { opacity: 1; transform: translateY(0); }
.s3-num .big { font-family: var(--cormo); font-weight: 600; color: var(--gold-2); line-height: 1;
    font-size: clamp(4.6rem, 3rem + 5vw, 7.2rem); display: flex; align-items: flex-end; }
.s3-num .big i { font-style: normal; font-size: .4em; margin-bottom: .35em; margin-left: .1em; }
.s3-num .sub { margin-top: 14px; font-size: 1.35rem; color: rgba(255,255,255,.62); line-height: 1.55; }

/* 중앙 링 + 인물 사진 */
.s3-ring { position: relative; width: clamp(300px, 34vw, 460px); aspect-ratio: 1; justify-self: center; }
.s3-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; stroke-linecap: round; }
.s3-photos { position: absolute; inset: 15%; border-radius: 50%; }
.s3-photo { position: absolute; inset: 0; border-radius: 50%; background-size: cover; background-position: center 25%;
    clip-path: circle(0% at 50% 88%); opacity: 0;
    transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1), opacity .5s ease; will-change: clip-path; }
.s3-photo.on { clip-path: circle(56% at 50% 50%); opacity: 1; }
.s3-dot { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: rgba(230,197,147,.4);
    transform: translate(-50%, -50%) scale(.7); transition: transform .35s, background .35s, box-shadow .35s; }
.s3-dot.on { background: var(--gold-2); transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 7px rgba(230,197,147,.18); }
.s3-dot.dd0 { top: 2%; left: 50%; }
.s3-dot.dd1 { top: 87%; left: 90%; }
.s3-dot.dd2 { top: 87%; left: 10%; }

/* =========================================================
   SEC 04 — 소통 + 투어
   ========================================================= */
.sec04 { background: #fff; }
.sec04 > .container { padding-top: 130px; padding-bottom: 100px; }
.sec04 .sec_title { margin-bottom: 60px; }
.sec04 .sec_title .title { color: var(--ink); }
.sec04 .sec_title .play { font-family: var(--cormo); font-size: 2.2rem; color: var(--gold-deep); margin-top: 16px; letter-spacing: .1em; }
.sec04 .cont_wrap { gap: 70px; align-items: center; }
.sec04 .txt_col { width: 42%; flex-shrink: 0; }
.sec04 .txt_col .font34 { font-size: 3rem; color: var(--ink); font-weight: 500; line-height: 1.55; margin-bottom: 34px; }
.sec04 .video_wrap { flex: 1; }
.sec04 .video_wrap .ph.profile { width: 100%; aspect-ratio: 16/10; border-radius: 10px; background: linear-gradient(160deg,#e4d9c6,#c9b59a); }
.tour_video { position: relative; }
.tour_video .tv_media { position: relative; width: 100%; height: 480px; background-size: cover; background-position: center; overflow: hidden; }
.tour_video .tv_media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,9,.32) 0%, rgba(20,13,9,.64) 100%); }
.tour_video .tv_inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.tv_play { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(0.16,1,0.3,1), background .25s; }
.tv_play span { width: 0; height: 0; margin-left: 5px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 19px solid #fff; }
.tv_play:hover { transform: scale(1.08); background: rgba(255,255,255,.26); }
.tv_label { color: rgba(255,255,255,.92); font-family: var(--serif); font-size: 1.9rem; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.tv_label em { font-style: normal; font-size: 1.4rem; color: var(--gold-2); margin-left: 4px; }

.tour_wrap { background: var(--brown); padding: 110px 0 120px; margin-top: -1px; }
.tour_wrap .top { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-bottom: 54px; }
.tour_wrap .play { font-family: var(--cormo); font-size: 2rem; color: var(--gold); letter-spacing: .12em; }
.tour_wrap .play.kmc { font-size: 5.6rem; font-weight: 600; color: #fff; line-height: 1.05; margin: 4px 0 14px; }
.tour_wrap .font24 { font-size: 2rem; color: rgba(255,255,255,.75); }
.tour_wrap .top .flex { align-items: center; gap: 14px; }
.tour_wrap .swiper-navi { border-color: var(--gold-deep); }
.tour_wrap .swiper-navi::after { border-color: var(--gold-2); }
.tour_wrap .swiper-navi:hover { background: var(--gold-2); border-color: var(--gold-2); }
.tour_wrap .swiper-navi:hover::after { border-color: var(--brown); }
.tour_wrap .more_btn { border-color: var(--gold-deep); color: var(--gold-2); }
.tour_wrap .more_btn:hover { background: var(--gold-2); color: var(--brown); border-color: var(--gold-2); }
.tour_slide .ph.tour { height: 340px; border-radius: 8px; }
.tour_slide .ph.tour > span { color: rgba(62,39,35,.6); font-size: 1.6rem; }
.ph.tour.t1 { background: linear-gradient(160deg,#e7dcc9,#cdbda2); }
.ph.tour.t2 { background: linear-gradient(160deg,#dcd0bd,#c0ae91); }
.ph.tour.t3 { background: linear-gradient(160deg,#e9dfcd,#d2c3a8); }
.ph.tour.t4 { background: linear-gradient(160deg,#d7cbb6,#bba88b); }
.ph.tour.t5 { background: linear-gradient(160deg,#e4d9c4,#c8b797); }
.ph.tour.t6 { background: linear-gradient(160deg,#ddd1bd,#c3b193); }

/* =========================================================
   SEC 05 — 건강 이야기
   ========================================================= */
.sec05 { background: #fff; padding: 130px 0 140px; }
.sec05 .top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
.sec05 .sec_title .title { font-size: 3.8rem; }
.story_swiper { position: relative; padding-bottom: 50px; }
.story_swiper .progress_bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.story_swiper .progress_bar span { display: block; height: 100%; width: 0; background: var(--brown); transition: width .3s; }
.story_card a { display: block; }
.story_card .img { height: 240px; border-radius: 8px; margin-bottom: 20px; }
.ph.story { background: linear-gradient(160deg,#e6dccb,#cdbda2); }
.ph.story.s1 { background: linear-gradient(160deg,#e8dfce,#d3c4a9); }
.ph.story.s2 { background: linear-gradient(160deg,#dfd4c0,#c2b094); }
.ph.story.s3 { background: linear-gradient(160deg,#e4dccb,#cabb9f); }
.ph.story.s4 { background: linear-gradient(160deg,#ddd2be,#bfae90); }
.ph.story.s5 { background: linear-gradient(160deg,#e9e0cf,#d0c1a6); }
.ph.story.s6 { background: linear-gradient(160deg,#dbd0bc,#bead8f); }
.story_card .date { font-size: 1.5rem; color: var(--gold-deep); margin-bottom: 14px; }
.story_card .tit { font-size: 2.1rem; font-weight: 600; color: var(--ink); line-height: 1.45; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.story_card a:hover .tit { color: var(--brown); }
.story_card .text { font-size: 1.5rem; color: #7a7168; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--cream); color: var(--ink); padding-top: 70px; }
.footer .container { display: flex; flex-wrap: wrap; gap: 50px 60px; padding-bottom: 60px; }
.ft_head { display: flex; align-items: center; gap: 8px; font-size: 1.6rem; font-weight: 600; color: var(--brown); margin-bottom: 16px; }
.ft_ico { font-size: 1.8rem; }
.footer .tel { font-size: 3.2rem; font-family: var(--cormo); font-weight: 600; color: var(--brown); margin-bottom: 18px; }
.summary_wrap { display: flex; flex-wrap: wrap; gap: 40px 70px; flex: 1; }
.summary_wrap .ft_col ul li { display: flex; gap: 10px; font-size: 1.45rem; color: #6b6157; padding: 3px 0; }
.summary_wrap .ft_col ul li b { color: var(--brown); font-weight: 600; min-width: 90px; }
.summary_wrap .time li b { min-width: 100px; }
.footer .note { font-size: 1.3rem; color: var(--muted); margin-top: 12px; display: inline-block; }
.footer .copy { font-size: 1.35rem; color: var(--muted); line-height: 2; align-self: flex-end; }
.footer .copy span { color: var(--brown); font-weight: 600; }
.map_wrap { min-width: 340px; }
.map_wrap .addr { font-size: 1.5rem; color: #6b6157; display: block; margin-bottom: 16px; }
.map_ph { position: relative; height: 280px; border-radius: 8px; overflow: hidden; background: #e6ddcf; }
.map_ph iframe { position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border: 0; display: block; }
.ft_bottom { background: var(--brown); padding: 22px 0; }
.ft_bottom .container { display: flex; align-items: center; justify-content: space-between; padding-top: 0; padding-bottom: 0; gap: 20px; }
.ft_logo { font-family: var(--serif); color: #fff; font-size: 1.8rem; font-weight: 600; }
.ft_btn { display: flex; gap: 24px; }
.ft_btn a { font-size: 1.4rem; color: rgba(255,255,255,.7); transition: color .2s; }
.ft_btn a:hover { color: #fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1280px) {
    #gnb { gap: 30px; }
    #gnb .main_menu > a { font-size: 1.6rem; }
    .sec_title .title { font-size: 3.6rem; }
}
@media (max-width: 1000px) {
    :root { --header-h: 68px; }
    .container { padding: 0 24px; }
    .gnb_w, .link_btn { display: none; }
    .sub_wrap_menu { display: none; }
    .hd_logo .logo_mark { width: 40px; height: 40px; font-size: 2.2rem; }
    .hd_logo .logo_txt { font-size: 1.9rem; }

    .visual_txt .txt_wrap .serif { font-size: 3rem; }
    .visual_txt .change { height: 4.4rem; }
    .visual_txt .font24 { font-size: 1.8rem; }
    .visual_txt .en { font-size: 1.4rem; }

    .sec_title .title { font-size: 2.8rem; }
    .sec01 { padding: 80px 0; }
    .sec01 .cont_wrap { flex-direction: column; gap: 44px; }
    .sec01 .left_cont { width: 100%; }
    .sec01 .item { grid-template-columns: 48px 1fr; gap: 0 18px; }
    .sec01 .icon { width: 46px; height: 46px; font-size: 1.8rem; }
    .sec01 .tit { font-size: 2.6rem; }

    .sec02 .box01, .sec02 .box02 { padding: 80px 0; }
    .sec02 .box01 .cont_wrap { flex-direction: column; }
    .case_item { width: 100%; height: 380px; }
    .sec02 .desc { font-size: 1.6rem; }
    .sec02 .box02 .top { flex-direction: column; align-items: flex-start; gap: 20px; }

    .sec03 { padding: 90px 0; }
    .sec03 .cont_wrap { flex-direction: column; gap: 50px; }
    .sec03 .ring { width: 300px; height: 306px; }
    .sec03 .item_list { width: 100%; }
    .sec03 .item .font40 { font-size: 2.2rem; }
    .sec03 .item .right p:first-child, .sec03 .item .right p:first-child span { font-size: 4rem; }

    .sec04 > .container { padding-top: 80px; padding-bottom: 60px; }
    .sec04 .cont_wrap { flex-direction: column; gap: 40px; }
    .sec04 .txt_col { width: 100%; }
    .sec04 .txt_col .font34 { font-size: 2.4rem; }
    .tour_video .tv_media { height: 300px; }
    .tv_play { width: 64px; height: 64px; }
    .tv_label { font-size: 1.6rem; }
    .tour_wrap { padding: 80px 0; }
    .tour_wrap .play.kmc { font-size: 4rem; }

    .sec05 { padding: 80px 0; }
    .sec05 .top { flex-direction: column; align-items: flex-start; gap: 20px; }

    .footer .container { flex-direction: column; }
    .map_wrap { min-width: 0; width: 100%; }
    .ft_bottom .container { flex-direction: column; align-items: flex-start; }

    /* 퀵메뉴: 모바일에서도 우측 세로 고정 (중앙 콘텐츠 가리지 않도록) */
    .quick_menu { right: 8px; bottom: 16px; gap: 8px; }
    .quick_list { flex-direction: column; padding: 5px; gap: 2px; }
    .quick_list li a { width: 50px; padding: 7px 2px; font-size: .95rem; gap: 3px; line-height: 1.25; }
    .quick_list .icon { width: 20px; height: 20px; }
    .quick_list li.tel a { font-size: 1.05rem; }
    .top_btn { width: 42px; height: 42px; }
}
@media (max-width: 560px) {
    .sec_title .title { font-size: 2.3rem; }
    .visual_txt .txt_wrap .serif { font-size: 2.4rem; }
    .sitemap_list .flex { grid-template-columns: 1fr; }
}

/* =========================================================
   IMPECCABLE POLISH — 실제 이미지 · 디슬롭 · 대비 · 리듀스드모션
   ========================================================= */

/* ---- 1. 실제 사진 처리 (플레이스홀더 → 이미지) ---- */
.ph.photo { background-size: cover; background-position: center; }
.ph.photo::after {
    background-image: linear-gradient(to top, rgba(30,20,15,.62) 0%, rgba(30,20,15,.12) 45%, rgba(30,20,15,0) 70%);
}
.ph.photo > span,
.tour_slide .ph.tour.photo > span {
    position: absolute !important; left: 22px; bottom: 18px; top: auto; z-index: 3;
    color: #fff !important; font-family: var(--serif); font-size: 1.7rem; font-weight: 500;
    text-shadow: 0 2px 12px rgba(0,0,0,.55); letter-spacing: 0;
    align-self: auto;
}
img { max-width: 100%; }
.fit-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 히어로 실제 이미지 */
.visual_section .video_wrap { overflow: hidden; }
.visual_section .hero_img {
    position: absolute; inset: -6% 0 0 0; width: 100%; height: 112%;
    object-fit: cover; will-change: transform;
    animation: heroKen 20s ease-in-out infinite alternate;
}
@keyframes heroKen { from { transform: scale(1);} to { transform: scale(1.08);} }
.visual_section .ambient {
    animation: none;
    background:
        radial-gradient(85% 65% at 50% 52%, rgba(24,16,11,.52) 0%, transparent 72%),
        linear-gradient(180deg, rgba(24,16,11,.5) 0%, rgba(24,16,11,.4) 42%, rgba(24,16,11,.74) 100%);
}
.visual_txt .txt_wrap .serif, .visual_txt .font24 { text-shadow: 0 2px 22px rgba(0,0,0,.45); }

/* sec01 좌측 이미지 */
.sec01 .img_box.photo { background-size: cover; background-position: center; }
.sec01 .img_box.photo::after { background: linear-gradient(160deg, rgba(60,40,30,.05), rgba(28,19,14,.35)); }

/* sec04 진료 공간 이미지 */
.sec04 .video_wrap .fit-img { border-radius: 10px; aspect-ratio: 16/10; }

/* ---- 2. 디슬롭 : 반복 영문 eyebrow 정리 (impeccable 금지) ---- */
.sec01 .sec_title .en_tit,
.sec05 .sec_title .en_tit,
.sec04 .sec_title .play.en { display: none; }
.sec01 .item .play { display: none; }           /* "Differentiation 0X" 반복 라벨 제거 */
.sec01 .sec_title, .sec05 .sec_title { margin-bottom: 60px; }

/* sec01 아이콘 넘버는 진행-라인 시퀀스의 일부라 유지하되 톤 다운 */
.sec01 .item .tit { margin-top: 0; }

/* ---- 3. 타이포 리듬 : fluid clamp + 균형 줄바꿈 ---- */
.sec_title .title { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4.4rem); text-wrap: balance; letter-spacing: -0.02em; }
.visual_txt .txt_wrap .serif { text-wrap: balance; }
.sec01 .tit, .case_item .font34, .sec04 .txt_col .font34 { text-wrap: balance; }
.story_card .text, .sec02 .desc { text-wrap: pretty; }

/* ---- 4. 대비 보정 (본문 muted 톤 살짝 진하게) ---- */
.story_card .text { color: #6b6157; }
.sec02 .box02 .ba_slide .info .flex { color: #5f574e; }

/* ---- 5. prefers-reduced-motion : 필수 대체 ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .visual_section .hero_img { animation: none; transform: none; }
    .visual_txt .change span { position: static; opacity: 1; transform: none; }
    .visual_txt .change { height: auto; }
    .scroll_hint .mouse span { animation: none; }
    /* 원형 전환 패널은 리듀스드모션에서 감춤 (핀 스크럽 대신 바로 다음 섹션) */
    .circle-trans { display: none !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
    /* sec03: 정적 표시 (첫 스탯) */
    .sec03 { min-height: auto; }
    .s3-stage { height: auto; min-height: 0; padding: 90px 0; }
    .s3-bg, .s3-photo, .s3-lab, .s3-num { transition: none !important; }
    .s3-photo.on { clip-path: circle(56% at 50% 50%) !important; }
}

/* ---- 7. 데모/예시 사이트 명시 (상단 바 + 푸터 고지) ---- */
:root { --demo-h: 0px; }
html.demo-on { --demo-h: 42px; }
.header-wrap { top: var(--demo-h); }
.sub_main { padding-top: calc(var(--header-h) + var(--demo-h)); }
.sub_tab { top: calc(var(--header-h) + var(--demo-h)); }

.demo-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--demo-h); z-index: 950;
    display: none; align-items: center; justify-content: center; gap: 12px;
    background: linear-gradient(90deg, #2c1c15 0%, #4c352a 100%);
    color: var(--gold-2); font-size: 1.3rem; padding: 0 44px; letter-spacing: -0.01em;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
html.demo-on .demo-bar { display: flex; }
.demo-bar span { text-align: center; line-height: 1.35; }
.demo-bar b { color: #fff; font-weight: 600; }
.demo-bar .demo-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.72); font-size: 2rem; line-height: 1; border-radius: 50%;
}
.demo-bar .demo-close:hover { color: #fff; background: rgba(255,255,255,.12); }

.demo-note {
    background: var(--brown-2); color: rgba(255,255,255,.62); font-size: 1.3rem;
    line-height: 1.6; text-align: center; padding: 18px 40px; border-top: 1px solid rgba(255,255,255,.08);
}
.demo-note b { color: var(--gold-2); font-weight: 600; }

/* 푸터 하단 바 : 로고 + 저작권/Designed by 를 한 줄에 정리 */
.ft_bottom .ft_bl { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.ft_copy { font-size: 1.3rem; color: rgba(255,255,255,.5); letter-spacing: -0.01em; }
.ft_copy b { color: var(--gold-2); font-weight: 600; }

@media (max-width: 1000px) {
    html.demo-on { --demo-h: 58px; }
    .demo-bar { font-size: 1.1rem; padding: 0 40px 0 14px; }
    .demo-note { font-size: 1.2rem; padding: 16px 24px; }
}

/* ---- 6. sec03 모바일 : 핀 없이 세로 스택 + 자동 순환 ---- */
@media (max-width: 1000px) {
    .sec03 { min-height: 100vh; }
    .s3-stage { height: auto; min-height: 100vh; padding: 88px 0 44px; justify-content: center; }
    .s3-core { grid-template-columns: 1fr; gap: 20px; justify-items: stretch; max-width: 100%; }
    .s3-title { position: static; margin: 0 auto 24px; padding: 0 24px; }
    .s3-labels { height: 78px; width: 100%; order: 1; }
    .s3-lab { text-align: center; right: auto; align-items: center; padding: 0 24px; }
    .s3-ring { width: min(60vw, 280px); order: 2; justify-self: center; }
    .s3-nums { height: 120px; width: 100%; order: 3; }
    .s3-num { align-items: center; text-align: center; padding: 0 24px; }
    .s3-num .sub { text-align: center; }
}