:root{
        --ink:#221e1b; --ink2:#6d635a; --line-c:#e9e0d5;
        --orange:#ed683b; --gold:#ed683b; --gold-d:#cf5228;
        --cream:#faf5ef; --cream2:#f4ebdf; --linegreen:#06c755;
        --sans:'Pretendard','Noto Sans JP',sans-serif; --serif:'Noto Serif JP',serif; --deco:'Playfair Display',serif;
    }
    .hl *{ box-sizing:border-box; }
    /* 모바일 가로 스크롤 완전 차단: html 레벨(fixed 요소까지) + body */
    html:has(.hl){ overflow-x:hidden; }
    .hl{ font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.8; overflow-x:hidden; max-width:100vw; }
    .hl img{ max-width:100%; }
    .hl-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
    .hl a{ color:inherit; }

    /* Header */
    .hl-header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-c); transition:box-shadow .3s; }
    .hl-header.scrolled{ box-shadow:0 4px 24px rgba(0,0,0,0.06); }
    .hl-hd{ display:flex; align-items:center; justify-content:space-between; height:72px; }
    .hl-logo{ display:flex; align-items:center; gap:8px; font-size:1.2rem; font-weight:800; letter-spacing:-.5px; text-decoration:none; color:var(--ink); flex-shrink:0; margin-right:28px; }
    .hl-logo svg{ width:28px; height:28px; flex-shrink:0; }
    .hl-nav{ display:flex; gap:16px; margin-left:auto; }
    .hl-nav a{ text-decoration:none; font-size:.85rem; font-weight:600; color:#3f3a34; transition:color .2s; white-space:nowrap; }
    .hl-nav a:hover{ color:var(--orange); }
    .hl-hd-cta{ display:inline-flex; align-items:center; gap:7px; background:var(--linegreen); color:#fff; padding:11px 20px; border-radius:40px; font-weight:700; font-size:.9rem; text-decoration:none; box-shadow:0 4px 14px rgba(6,199,85,.28); white-space:nowrap; }
    .hl-hd-cta:hover{ background:#05b34c; }
    .hl-burger{ display:none; font-size:26px; background:none; border:none; cursor:pointer; color:var(--ink); }
    .hl-mnav{ display:none; }

    /* Hero */
    .hl-hero{ padding-top:64px; background:linear-gradient(180deg,var(--cream) 0%,#fff 100%); position:relative; z-index:5; }
    .hl-hero-kv{ display:block; width:100%; }
    .hl-hero-kv img{ width:100%; height:auto; display:block; }
    .hl-hero-intro{ text-align:center; padding:44px 40px 34px; max-width:880px; margin:0 auto; position:relative; background:#fff; border-radius:30px; box-shadow:0 14px 44px rgba(20,14,8,.06); }
    .hl-hero-intro p{ font-size:clamp(1rem,2.4vw,1.2rem); color:var(--ink2); }
    .hl-hero-intro .cta-line{ margin-top:22px; }

    /* Buttons */
    .cta-line{ display:inline-flex; align-items:center; gap:9px; background:var(--linegreen); color:#fff; font-weight:700; font-size:1.02rem; padding:15px 32px; border-radius:44px; text-decoration:none; box-shadow:0 8px 26px rgba(6,199,85,.3); transition:transform .25s,box-shadow .25s; }
    .cta-line:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(6,199,85,.4); }
    .cta-ghost{ display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--gold); color:var(--gold-d); font-weight:700; padding:13px 28px; border-radius:44px; text-decoration:none; transition:.25s; }
    .cta-ghost:hover{ background:var(--gold); color:#fff; }

    /* Section base */
    .hl-sec{ padding:88px 0; }
    .hl-sec.cream{ background:var(--cream); }
    .hl-eyebrow{ font-family:var(--deco); letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-size:.9rem; font-weight:600; }
    .hl-h2{ font-family:var(--serif); font-size:clamp(1.55rem,3.8vw,2.35rem); font-weight:700; line-height:1.5; letter-spacing:-.5px; margin:12px 0 0; }
    /* 일본어 문절 단위 개행 (단어 중간 끊김 방지, 미지원 브라우저는 자동 무시) */
    .hl-h2, .hl-lead, .hl-tinfo h3, .hl-tinfo p, .hl-subhero h1, .hl-subhero .lead, .hl-story p{ word-break:auto-phrase; }
    .hl-lead{ color:var(--ink2); font-size:1.03rem; margin-top:18px; }
    .hl-center{ text-align:center; max-width:760px; margin:0 auto; }

    /* Story blocks (blog tone) */
    .hl-story p{ font-size:clamp(1rem,2.3vw,1.12rem); color:#3f3a34; margin:0 0 22px; }
    .hl-story .pull{ font-family:var(--serif); font-size:clamp(1.2rem,3vw,1.5rem); font-weight:700; color:var(--ink); line-height:1.7; border-left:4px solid var(--orange); padding-left:20px; margin:30px 0; }
    .hl-story strong{ color:var(--gold-d); font-weight:700; }

    /* Reason cards */
    .hl-grid{ display:grid; gap:20px; margin-top:44px; }
    .g4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
    .g3{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
    .hl-card{ background:#fff; border:1px solid var(--line-c); border-radius:18px; padding:30px 26px; transition:transform .3s,box-shadow .3s; }
    .hl-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(177,130,74,.14); }
    .hl-card .ic{ width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#fef0e4,#fce6cf); display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:var(--orange); }
    .hl-card h3{ font-size:1.16rem; font-weight:700; margin:16px 0 9px; }
    .hl-card p{ color:var(--ink2); font-size:.95rem; }

    /* Treatment menu */
    .hl-treat{ display:grid; gap:18px; grid-template-columns:repeat(4,1fr); margin-top:44px; }
    .hl-tcard{ position:relative; border-radius:18px; overflow:hidden; text-decoration:none; color:#fff; display:block; aspect-ratio:4/5; box-shadow:0 8px 26px rgba(0,0,0,.1); }
    .hl-tcard img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
    .hl-tcard:hover img{ transform:scale(1.06); }
    .hl-tcard::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(20,14,8,.82) 100%); }
    .hl-tcard.signature{ outline:3px solid var(--orange); outline-offset:-3px; }
    .hl-tinfo{ position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2; color:#fff; }
    .hl-tinfo h3, .hl-tinfo p, .hl-tinfo .en{ color:#fff; }
    .hl-tinfo .badge{ display:inline-block; background:var(--orange); color:#fff; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:20px; margin-bottom:9px; letter-spacing:1px; }
    .hl-tinfo .en{ font-family:var(--deco); font-size:.8rem; letter-spacing:2px; opacity:.85; }
    .hl-tinfo h3{ font-size:1.25rem; font-weight:800; margin:2px 0 4px; }
    .hl-tinfo p{ font-size:.85rem; opacity:.9; margin:0; }

    /* Responsive brand banner */
    .hl-banner{ display:block; line-height:0; }
    .hl-banner img{ width:100%; height:auto; display:block; }

    /* B&A */
    .hl-bna{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:40px; }
    .hl-bna .item{ border:1px solid var(--line-c); border-radius:16px; overflow:hidden; background:#fff; }
    .hl-bna .item img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
    .hl-bna .cap{ padding:14px 16px; }
    .hl-bna .cap b{ color:var(--gold-d); font-size:.8rem; letter-spacing:1px; }
    .hl-bna .cap p{ color:var(--ink2); font-size:.8rem; margin:7px 0 0; line-height:1.7; }
    .hl-note{ color:#9a9086; font-size:.8rem; line-height:1.8; margin-top:20px; }

    /* YouTube section */
    .hl-yt{ background:#fff; }
    .hl-yt .row{ margin-top:40px; }
    .hl-yt .rowhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
    .hl-yt .rowhead h3{ font-size:1.12rem; font-weight:800; margin:0; display:flex; align-items:baseline; gap:10px; }
    .hl-yt .rowhead h3 span{ font-family:var(--deco); color:var(--gold); font-size:.85rem; font-weight:600; letter-spacing:1px; }
    .hl-yt .arrows{ display:flex; gap:8px; }
    .hl-yt .arrows button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-c); background:#fff; color:var(--ink); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
    .hl-yt .arrows button:hover{ background:var(--orange); color:#fff; border-color:var(--orange); }
    .hl-track{ display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding:6px 2px 14px; -ms-overflow-style:none; scrollbar-width:none; min-width:0; max-width:100%; }
    .hl-track::-webkit-scrollbar{ display:none; }
    .hl-vcard{ flex:0 0 auto; scroll-snap-align:start; text-decoration:none; color:var(--ink); }
    .hl-vcard .thumb{ position:relative; border-radius:14px; overflow:hidden; background:#eee; box-shadow:0 6px 20px rgba(0,0,0,.08); }
    .hl-vcard .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
    .hl-vcard:hover .thumb img{ transform:scale(1.05); }
    .hl-vcard .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
    .hl-vcard .play span{ width:54px; height:54px; border-radius:50%; background:rgba(20,14,8,.62); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; transition:.25s; }
    .hl-vcard:hover .play span{ background:var(--orange); transform:scale(1.08); }
    .hl-track.long .hl-vcard{ width:300px; }
    .hl-track.long .thumb{ aspect-ratio:16/9; }
    .hl-track.short .hl-vcard{ width:186px; }
    .hl-track.short .thumb{ aspect-ratio:9/16; }
    .hl-vcard .vt{ font-size:.86rem; font-weight:600; margin-top:10px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

    /* Flow */
    .hl-flow{ display:flex; flex-direction:column; gap:14px; margin-top:40px; }
    .hl-flow .r{ display:flex; gap:20px; align-items:flex-start; background:#fff; border:1px solid var(--line-c); border-radius:16px; padding:24px 26px; }
    .hl-flow .n{ font-family:var(--deco); font-size:1.5rem; color:var(--orange); min-width:46px; }
    .hl-flow h3{ font-size:1.08rem; font-weight:700; margin:0 0 6px; }
    .hl-flow p{ color:var(--ink2); font-size:.94rem; margin:0; }

    /* FAQ */
    .hl-faq{ max-width:820px; margin:36px auto 0; }
    .hl-faq details{ background:#fff; border:1px solid var(--line-c); border-radius:14px; padding:20px 24px; margin-bottom:12px; }
    .hl-faq summary{ font-weight:700; font-size:1.02rem; cursor:pointer; list-style:none; position:relative; padding-right:28px; }
    .hl-faq summary::-webkit-details-marker{ display:none; }
    .hl-faq summary::after{ content:'+'; position:absolute; right:0; top:-2px; color:var(--orange); font-size:1.4rem; transition:.2s; }
    .hl-faq details[open] summary::after{ transform:rotate(45deg); }
    .hl-faq p{ color:var(--ink2); font-size:.96rem; margin:14px 0 0; }

    /* Access */
    .hl-access{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; }
    .hl-access .box{ background:#fff; border:1px solid var(--line-c); border-radius:16px; padding:30px; }
    .hl-access h3{ font-size:1.1rem; font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:8px; color:var(--ink); }
    .hl-access h3 i{ color:var(--orange); }
    .hl-access p{ color:var(--ink2); font-size:.96rem; line-height:1.9; margin:0; }
    .hl-map{ grid-column:1/-1; height:340px; border-radius:16px; overflow:hidden; border:1px solid var(--line-c); }

    /* CTA band */
    .hl-ctaband{ background:linear-gradient(135deg,#fff6ec,#faede0); text-align:center; padding:80px 24px; }
    .hl-ctaband h2{ font-family:var(--serif); font-size:clamp(1.5rem,3.6vw,2.2rem); font-weight:700; margin:0 0 14px; }
    .hl-ctaband p{ color:var(--ink2); margin:0 0 28px; }

    /* Footer */
    .hl-footer{ background:#221e1b; color:rgba(255,255,255,.7); padding:64px 0 30px; }
    .hl-footer .grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
    .hl-footer h4{ color:#fff; font-size:1.3rem; font-weight:800; margin:0 0 12px; }
    .hl-footer .brand p{ font-size:.9rem; line-height:1.9; }
    .hl-footer h5{ color:var(--gold); font-size:.78rem; letter-spacing:2px; text-transform:uppercase; margin:0 0 14px; }
    .hl-footer ul{ list-style:none; padding:0; margin:0; font-size:.9rem; line-height:2; }
    .hl-footer a{ text-decoration:none; color:rgba(255,255,255,.7); }
    .hl-footer a:hover{ color:#fff; }
    .hl-footer .bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:22px; font-size:.8rem; color:rgba(255,255,255,.4); text-align:center; }

    /* Reveal animation (light, GPU-friendly) */
    .reveal{ opacity:0; transform:translateY(28px) scale(.985); filter:blur(3px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1), filter .8s ease; will-change:opacity,transform,filter; }
    .reveal.in{ opacity:1; transform:none; filter:blur(0); }
    /* 그리드 카드 순차 등장 (stagger) */
    .hl-treat .hl-tcard:nth-child(2){ transition-delay:.08s; }
    .hl-treat .hl-tcard:nth-child(3){ transition-delay:.16s; }
    .hl-treat .hl-tcard:nth-child(4){ transition-delay:.24s; }

    /* Responsive */
    @media (max-width:960px){
        .hl-treat{ grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:900px){
        .hl-footer .grid{ grid-template-columns:1fr 1fr; }
    }
    /* nav가 겹칠 수 있는 폭부터 햄버거로 전환 (겹침 방지) */
    @media (max-width:1200px){
        .hl-nav{ display:none; }
        .hl-header .hl-hd-cta{ display:none; }
        .hl-burger{ display:block; }
        /* ===== 모바일 메뉴 리뉴얼 ===== */
        /* ===== 모바일 메뉴: 미니멀·텍스트 전용 ===== */
        .hl-mnav{ display:flex; flex-direction:column; position:fixed; inset:0; top:0; background:#fff; z-index:999; padding:96px 32px 40px; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
        .hl-mnav.open{ transform:translateX(0); }
        .hl-mnav-links{ display:flex; flex-direction:column; }
        .hl-mnav-links a{ padding:22px 2px; font-size:1.18rem; font-weight:600; letter-spacing:-.2px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-c); transition:color .2s; }
        .hl-mnav-links a:active{ color:var(--orange); }
        .hl-mnav-links .cta-line{ margin-top:36px; border-bottom:none; padding:16px; justify-content:center; font-size:1rem; }
        /* 메뉴 열릴 때 헤더 불투명 (히어로 비침 방지) */
        body:has(.hl-mnav.open) .hl-header--hero{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 1px 0 var(--line-c); }
        body:has(.hl-mnav.open) .hl-header--hero .hl-logo, body:has(.hl-mnav.open) .hl-header--hero .hl-burger{ text-shadow:none; color:var(--ink); }
    }
    @media (max-width:768px){
        .hl-sec{ padding:60px 0; }
        .hl-access{ grid-template-columns:1fr; }
        /* 도입부: 둥근 모달(カード) 소거 → テキストのみシンプルに */
        .hl-hero-intro{ margin:0; padding:30px 22px 4px; border-radius:0; background:none; box-shadow:none; }
        .hl-hero-intro .cta-line{ margin-top:20px; }
        /* 글 중간 가로배너(トリネート섹션) 모바일 소거 */
        .hl-tri-banner{ display:none !important; }
        /* 모바일 타이포: 좁은 카드폭에서 제목이 어색하게 쪼개지지 않도록 축소 */
        .hl-treat{ gap:12px; }
        .hl-tinfo{ padding:14px 15px; }
        .hl-tinfo h3{ font-size:1.02rem; line-height:1.35; }
        .hl-tinfo .en{ font-size:.66rem; letter-spacing:1px; }
        .hl-tinfo p{ font-size:.76rem; line-height:1.55; }
        .hl-h2{ font-size:1.5rem; line-height:1.45; }
        .hl-lead{ font-size:.95rem; }
        /* 중간 배너: 모바일에서 화면 가로 꽉 채우기(풀블리드) — transform 미사용(reveal과 충돌 방지) */
        .hl-banner{ width:100vw; margin-left:calc(50% - 50vw); border-radius:0; margin-top:26px; margin-bottom:26px; }
        /* B&A: BEFORE/AFTER ラベルが歯を隠さないよう下端にコンパクト配置 */
        .hl-bapair figure figcaption{ top:auto; bottom:8px; left:8px; font-size:.62rem; padding:3px 10px; letter-spacing:.5px; }
        .hl-bapair .pair{ gap:2px; }
    }

/* ===== Sub-page hero & story (Yonsei Heal white) ===== */
.hl-subhero{ padding:104px 0 56px; background:linear-gradient(180deg,var(--cream) 0%,#fff 100%); }
.hl-subhero .in2{ display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; }
.hl-subhero .en{ font-family:var(--deco); letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-size:.9rem; font-weight:600; }
.hl-subhero h1{ font-family:var(--serif); font-size:clamp(1.7rem,4.2vw,2.6rem); font-weight:700; line-height:1.5; letter-spacing:-.5px; margin:14px 0 18px; }
.hl-subhero .lead{ color:var(--ink2); font-size:clamp(1rem,2.3vw,1.14rem); line-height:1.9; }
.hl-subhero .cta-line{ margin-top:26px; }
.hl-subhero .img img{ width:100%; border-radius:22px; aspect-ratio:4/3; object-fit:cover; box-shadow:0 24px 60px rgba(120,80,30,.18); }
.hl-worry{ list-style:none; padding:0; margin:36px 0 0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.hl-worry li{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line-c); border-radius:14px; padding:20px 22px; font-size:1rem; color:#3f3a34; line-height:1.7; }
.hl-worry li i{ color:var(--orange); font-size:1.35rem; flex-shrink:0; margin-top:2px; }
.hl-cost{ background:linear-gradient(135deg,#fff6ec,#fae9d7); border:1px solid #f0d9bf; border-radius:22px; padding:44px 34px; text-align:center; margin-top:44px; }
.hl-cost h3{ font-family:var(--serif); font-size:1.35rem; font-weight:700; margin:0 0 14px; }
.hl-cost p{ color:var(--ink2); max-width:640px; margin:0 auto; }
@media (max-width:768px){
    /* トリネート施術ページ: ヒーローバナーを画面幅いっぱいに(フルブリード・正方形) */
    .hl-subhero{ padding:72px 0 40px; }
    .hl-subhero .in2{ grid-template-columns:1fr; gap:24px; }
    .hl-subhero .img{ order:-1; width:100vw; margin-left:calc(50% - 50vw); }
    .hl-subhero .img img{ border-radius:0; box-shadow:none; aspect-ratio:1/1; }
    .hl-subhero .text{ padding:0 4px; }
}

/* ===== Trinate signature section (Yonsei Heal) ===== */
.hl-trinate{ background:linear-gradient(180deg,#ffffff 0%,var(--cream) 100%); }
.hl-tri-banner{ display:block; line-height:0; border-radius:24px; overflow:hidden; margin:34px 0; box-shadow:0 24px 60px rgba(120,80,30,.16); }
.hl-tri-banner img{ width:100%; display:block; }
.hl-tri-feats{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:8px; }
.hl-tri-feat{ background:#fff; border:1px solid var(--line-c); border-radius:18px; padding:30px 26px; text-align:center; transition:transform .3s,box-shadow .3s; }
.hl-tri-feat:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(177,130,74,.14); }
.hl-tri-feat .k{ font-family:var(--deco); color:var(--orange); font-size:1.25rem; font-weight:700; letter-spacing:3px; }
.hl-tri-feat h3{ font-size:1.12rem; font-weight:700; margin:10px 0 9px; }
.hl-tri-feat p{ color:var(--ink2); font-size:.93rem; line-height:1.8; }
/* 트리네이트 설득 블록: fact / compare / slogan */
.hl-tri-fact{ background:#fff; border:1px solid var(--line-c); border-left:4px solid var(--orange); border-radius:18px; padding:30px 32px; margin:26px auto 0; max-width:820px; box-shadow:0 12px 34px rgba(120,80,30,.08); }
.hl-tri-fact .k{ font-family:var(--deco); letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-size:.78rem; font-weight:600; }
.hl-tri-fact h3{ font-family:var(--serif); font-size:1.4rem; font-weight:700; margin:6px 0 12px; }
.hl-tri-fact p{ color:var(--ink2); font-size:1rem; line-height:1.9; margin:0; }
.hl-tri-fact strong{ color:var(--gold-d); }
.hl-tri-compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px auto 0; max-width:880px; }
.hl-tri-compare .col{ border-radius:18px; padding:26px 24px; }
.hl-tri-compare .col.a{ background:#f6f2ec; border:1px solid var(--line-c); }
.hl-tri-compare .col.b{ background:linear-gradient(160deg,#fff6ec,#fce7d3); border:1.5px solid var(--orange); box-shadow:0 14px 38px rgba(242,113,28,.14); }
.hl-tri-compare .lbl{ display:inline-block; font-weight:800; font-size:.92rem; margin-bottom:14px; padding:5px 14px; border-radius:20px; }
.hl-tri-compare .col.a .lbl{ background:#e7ded2; color:#7a6a55; }
.hl-tri-compare .col.b .lbl{ background:var(--orange); color:#fff; }
.hl-tri-compare ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.hl-tri-compare li{ position:relative; padding-left:24px; font-size:.92rem; line-height:1.65; color:var(--ink2); }
.hl-tri-compare .col.a li::before{ content:'—'; position:absolute; left:0; color:#b3a58d; }
.hl-tri-compare .col.b li{ color:#5a4326; font-weight:600; }
.hl-tri-compare .col.b li::before{ content:'✓'; position:absolute; left:0; color:var(--orange); font-weight:800; }
.hl-tri-slogan{ text-align:center; margin:40px 0 6px; }
.hl-tri-slogan .en{ font-family:var(--deco); font-size:clamp(1.6rem,4.5vw,2.6rem); font-weight:700; letter-spacing:1px; color:var(--orange); margin:0; }
.hl-tri-slogan .jp{ font-family:var(--serif); font-size:clamp(1rem,2.6vw,1.3rem); color:var(--ink); margin:8px 0 0; letter-spacing:1px; }
@media (max-width:640px){ .hl-tri-compare{ grid-template-columns:1fr; } .hl-tri-fact{ padding:24px 22px; } }

/* ===== Hero slideshow (Ken Burns + crossfade) — Yonsei Heal ===== */
.hl-heroS{ position:relative; margin-top:0; height:100vh; min-height:560px; overflow:hidden; background:radial-gradient(ellipse at 65% 40%,#fff 0%,var(--cream) 70%,var(--cream2) 100%); }
.hl-heroS .sl{ position:absolute; inset:0; background-image:var(--pc); background-size:cover; background-repeat:no-repeat; background-position:center; opacity:0; transform:scale(1.0); transition:opacity 1.4s ease; will-change:opacity,transform; }
.hl-heroS .sl.hero-banner1{ background-position:center 32%; }
.hl-heroS .sl.on{ opacity:1; animation:heroKen 10s ease-out both; }
@keyframes heroKen{ from{ transform:scale(1.0); } to{ transform:scale(1.05); } }
.hl-heroS .dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:6; }
.hl-heroS .dots button{ width:9px; height:9px; padding:0; border:none; border-radius:50%; background:rgba(40,30,20,.28); cursor:pointer; transition:all .35s; }
.hl-heroS .dots button.on{ background:var(--orange); width:28px; border-radius:6px; }
.hl-heroS .arw{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.72); backdrop-filter:blur(6px); border:none; cursor:pointer; font-size:20px; color:var(--ink); display:flex; align-items:center; justify-content:center; transition:.25s; }
.hl-heroS .arw:hover{ background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.14); }
.hl-heroS .arw.prev{ left:20px; }
.hl-heroS .arw.next{ right:20px; }
.hl-heroS .scrolldown{ position:absolute; bottom:22px; right:26px; z-index:6; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink2); font-size:.65rem; letter-spacing:2px; }
.hl-heroS .scrolldown .bar{ width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:heroScroll 1.8s ease-in-out infinite; }
@keyframes heroScroll{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (max-width:768px){
    /* 모바일 히어로: 모바일배너1(2048×2048=1:1)에 맞춰 정확히 正方形. min-height 해제로 화면 폭 기준 */
    .hl-heroS{ height:auto; aspect-ratio:1/1; min-height:0; margin-top:72px; background:#fff; }
    .hl-heroS .sl{ background-size:contain; background-position:center; }
    .hl-heroS .sl.hero-mo{ background-image:var(--mo); }
    .hl-heroS .arw{ display:none; }
    .hl-heroS .scrolldown{ display:none; }
}
@media (prefers-reduced-motion: reduce){
    .hl-heroS .sl.on{ animation:none; }
    .hl-heroS .scrolldown .bar{ animation:none; }
    .reveal{ transition:opacity .3s ease; transform:none; filter:none; }
    .reveal.in{ transform:none; filter:none; }
}

/* ===== B&A gallery — 원본 비율 유지(잘림 없음), 크기 다른 이미지 정렬 통일 ===== */
.hl-ba{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:40px; align-items:start; }
.hl-ba .c{ background:#fff; border:1px solid var(--line-c); border-radius:18px; overflow:hidden; box-shadow:0 8px 26px rgba(120,80,30,.08); display:flex; flex-direction:column; }
.hl-ba .c .imgwrap{ background:#f4efe8; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1.15; overflow:hidden; }
.hl-ba .c .imgwrap img{ width:100%; height:100%; object-fit:contain; display:block; }
.hl-ba .c .cap{ padding:16px 18px 18px; }
.hl-ba .c .cap .tag{ display:inline-block; background:#fdeede; color:var(--gold-d); font-size:.72rem; font-weight:700; letter-spacing:.5px; padding:4px 11px; border-radius:20px; margin-bottom:10px; }
.hl-ba .c .cap h4{ font-size:.98rem; font-weight:700; margin:0 0 8px; }
.hl-ba .c .cap p{ color:var(--ink2); font-size:.82rem; line-height:1.75; margin:0; }

/* ===== B&A pair (Before|After 나란히, 라벨 명확, 탭 전환) ===== */
.hl-batabs{ display:flex; gap:10px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.hl-batabs button{ padding:11px 26px; border-radius:40px; border:1.5px solid var(--line-c); background:#fff; color:var(--ink2); font-weight:700; font-size:.92rem; cursor:pointer; transition:.25s; }
.hl-batabs button.on{ background:var(--orange); color:#fff; border-color:var(--orange); box-shadow:0 6px 18px rgba(242,113,28,.28); }
.hl-bagroup{ display:none; }
.hl-bagroup.on{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); margin-top:32px; }
.hl-bapair .case{ background:#fff; border:1px solid var(--line-c); border-radius:18px; overflow:hidden; box-shadow:0 8px 26px rgba(120,80,30,.08); }
.hl-bapair .pair{ display:grid; grid-template-columns:1fr 1fr; gap:3px; background:var(--line-c); }
.hl-bapair figure{ position:relative; margin:0; }
.hl-bapair figure img{ width:100%; height:auto; display:block; }
.hl-bapair figure figcaption{ position:absolute; left:9px; top:9px; font-size:.7rem; font-weight:800; letter-spacing:1px; padding:4px 12px; border-radius:20px; color:#fff; }
.hl-bapair figure.b figcaption{ background:rgba(45,40,36,.86); }
.hl-bapair figure.a figcaption{ background:var(--orange); }
.hl-bapair .cap{ padding:14px 18px 16px; }
.hl-bapair .cap .tag{ display:inline-block; background:#fdeede; color:var(--gold-d); font-size:.72rem; font-weight:700; padding:3px 11px; border-radius:20px; margin-bottom:8px; }
.hl-bapair .cap p{ color:var(--ink2); font-size:.8rem; line-height:1.7; margin:0; }
/* 트리네이트 B&A는 더 크게 (가로 전후사진이라 넓게) */
#bag-lam.hl-bagroup.on{ grid-template-columns:repeat(auto-fit,minmax(480px,1fr)); gap:26px; }
#bag-lam .cap .tag{ font-size:.78rem; }
#bag-lam .cap p{ font-size:.86rem; }
@media (max-width:560px){ #bag-lam.hl-bagroup.on{ grid-template-columns:1fr; } }

/* ===== 플로팅 아이콘 흰색 강제 (currentColor 상속 오류 수정) ===== */
.sv-float-btn svg{ fill:#fff !important; }

/* ===== 히어로 헤더 겹침 (투명 헤더 → 스크롤 시 흰 배경) ===== */
/* 히어로 상단: 블러·그라데이션 얼룩 없이 이미지가 메뉴까지 깔끔하게 중첩 */
.hl-header--hero{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.hl-header--hero::after{ content:none; }
/* 배너 위 어디서든 메뉴가 읽히도록 은은한 흰 후광 (스크롤 시 제거) */
.hl-header--hero .hl-logo, .hl-header--hero .hl-nav a{ text-shadow:0 1px 2px rgba(255,255,255,.95),0 0 14px rgba(255,255,255,.7); }
.hl-header--hero.scrolled{ background:rgba(255,255,255,0.92); border-bottom-color:var(--line-c); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.hl-header--hero.scrolled .hl-logo, .hl-header--hero.scrolled .hl-nav a{ text-shadow:none; }
body:has(.hl-header--hero) .hl-heroS{ margin-top:0; }

/* ===== B&A 모바일 전용: 가로 슬라이드(스와이프) 간소화 / PC는 그대로 ===== */
@media (max-width:768px){
    .hl-bagroup.on{ display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%; }
    .hl-bagroup.on::-webkit-scrollbar{ display:none; }
    .hl-bapair .case{ flex:0 0 86%; scroll-snap-align:center; }
    .hl-batabs button{ padding:9px 18px; font-size:.85rem; }
    /* laminate 症例(.hl-ba)도 모바일에선 가로 스와이프 슬라이드로 통일 */
    .hl-ba{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; min-width:0; max-width:100%; padding-bottom:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .hl-ba::-webkit-scrollbar{ display:none; }
    .hl-ba .c{ flex:0 0 86%; scroll-snap-align:center; }
}

/* ===== 医療陣スライド (Doctors slider) ===== */
.hl-docs{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:6px 2px 16px; scrollbar-width:none; margin-top:36px; min-width:0; max-width:100%; }
/* 施設ギャラリー: 大きめ画像を横スライド */
.hl-facslide{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; margin-top:44px; padding-bottom:12px; scrollbar-width:none; min-width:0; max-width:100%; -webkit-overflow-scrolling:touch; }
.hl-facslide::-webkit-scrollbar{ display:none; }
.hl-facslide .fac{ flex:0 0 auto; width:min(600px,80%); scroll-snap-align:center; background:#fff; border:1px solid var(--line-c); border-radius:22px; overflow:hidden; box-shadow:0 14px 38px rgba(120,80,30,.10); }
.hl-facslide .fac img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.hl-facslide .fac .cap{ padding:20px 24px 22px; }
.hl-facslide .fac .cap b{ font-family:var(--deco); letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); font-size:.82rem; font-weight:600; }
.hl-facslide .fac .cap p{ margin:7px 0 0; color:var(--ink2); font-size:.92rem; line-height:1.7; }
@media (max-width:768px){ .hl-facslide{ gap:14px; } .hl-facslide .fac{ width:86%; border-radius:18px; } .hl-facslide .fac .cap{ padding:16px 18px 18px; } }
.hl-docs::-webkit-scrollbar{ display:none; }
.hl-docs .doc{ flex:0 0 234px; scroll-snap-align:start; background:#fff; border:1px solid var(--line-c); border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(120,80,30,.06); transition:transform .3s,box-shadow .3s; }
.hl-docs .doc:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(120,80,30,.14); }
.hl-docs .doc .ph{ aspect-ratio:3/4; background:#f1ebe2; }
.hl-docs .doc .ph img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.hl-docs .doc .info{ padding:16px 18px; }
.hl-docs .doc .info .role{ display:inline-block; font-size:.68rem; font-weight:800; color:var(--orange); letter-spacing:.5px; margin-bottom:7px; }
.hl-docs .doc .info h4{ font-size:1.02rem; font-weight:700; margin:0 0 4px; }
.hl-docs .doc .info p{ color:var(--ink2); font-size:.8rem; margin:0; }
.hl-docs .doc.chief{ outline:2px solid var(--orange); outline-offset:-2px; }
/* 범용 화살표 버튼 (의료진/기타 슬라이더 공용) */
.arrows{ display:flex; gap:8px; }
.arrows button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-c); background:#fff; color:var(--ink); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.arrows button:hover{ background:var(--orange); color:#fff; border-color:var(--orange); }