/* =========================================================
   다온비뇨의학과의원 — medigeo 제작 샘플 (the1eye 문법)
   ========================================================= */
:root{
  --c-ink:#000000;
  --c-white:#FFFFFF;
  --c-brand:#1E39B4;
  --c-gold:#FAAA10;
  --c-gray-600:#666666;
  --c-gray-500:#888888;
  --c-dark:#222222;
  --c-line:#CCCCCC;
  --c-line-2:#DDDDDD;
  --c-line-3:#707070;
  --c-on-dark-60:rgba(255,255,255,.6);
  --c-on-dark-40:rgba(255,255,255,.4);
  --c-on-dark-20:rgba(255,255,255,.2);
  --c-dim:rgba(0,0,0,.3);
  --c-overlay-half:rgba(0,0,0,.59);
  --q-sister:#FFFFFF; --q-sister-ink:#1B2A6B; --q-sister-m:#2B47C6;
  --q-phone:#33BDFF; --q-reserve:#1976D2; --q-kakao:#FFDB11; --q-kakao-ink:#3C1E1E;
  --swiper-theme-color:#1E39B4;

  --ff-sans:"Noto Sans KR",sans-serif;
  --ff-en:"Playfair Display",serif;
  --ff-ko-display:"Song Myung",serif;
  --fs-hero:60px;
  --fs-mega:min(15.625vw,300px);
  --fs-the-one:min(5.2083vw,100px);
  --fs-s01:100px;
  --fs-h2:52px;
  --fs-h2-b:42px;
  --fs-eyebrow:20px;
  --fs-lead:18px; --fs-body:16px; --lh-body:28px;
  --ls-ko:-0.025em; --ls-nav:-0.05em; --ls-display:0.1em;

  --header-h:100px;
  --wrap-w:95%;
  --sec-vh:970px;

  --r-pill:25px; --r-circle:1000px; --r-quick:5px 0 0 5px;
  --t-fast:.3s; --t-base:.4s; --t-btn:.5s; --t-slow:.6s;
}
@media (max-width:1550px){:root{--fs-hero:3.2258vw;--fs-s01:6.4516vw;--fs-h2:48px}}
@media (max-width:1280px){:root{--fs-hero:3.7258vw;--fs-s01:7.8125vw}}
@media (max-width:1020px){:root{--fs-mega:19.625vw}}
@media (max-width:768px){:root{--fs-hero:5.0258vw;--fs-mega:22.625vw;--fs-s01:7.5208vw;--fs-h2:6.25vw;--header-h:50px;--wrap-w:90%;--fs-the-one:10.2083vw}}
@media (max-width:480px){:root{--fs-s01:8.5208vw;--fs-h2:8.25vw}}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:var(--ff-sans);-webkit-text-size-adjust:100%;color:var(--c-ink)}
body{background:#fff;line-height:1;overflow-x:hidden;word-break:keep-all}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,dl,dt,dd{font-weight:inherit;font-size:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:8px;top:-60px;z-index:200;background:var(--c-brand);color:#fff;padding:10px 14px;border-radius:4px;font-size:14px}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

.wrap1800{width:var(--wrap-w);max-width:1800px;margin:0 auto}
.wrap1600{width:var(--wrap-w);max-width:1600px;margin:0 auto}
.wrap1280{width:var(--wrap-w);max-width:1280px;margin:0 auto}

/* ---------- 로고 (svg symbol) ---------- */
/* <use> 복제본은 바깥 선택자로 못 잡으므로 CSS 변수로 색을 넘긴다 */
.lg-arc{stroke:var(--lg-arc,#fff)}
.lg-dot{fill:var(--lg-dot,#FAAA10)}
.lg-en{font:600 21px/1 var(--ff-en);letter-spacing:.06em;fill:var(--lg-en,#fff)}
.lg-sm{font:500 6.2px/1 var(--ff-sans);letter-spacing:.06em;fill:var(--lg-sm,#fff)}
.lg-ko{font:700 17px/1 var(--ff-sans);letter-spacing:-.04em;fill:var(--lg-ko,#fff)}
.hd.on .logo-svg,.hd.onOver .logo-svg,.hd.menu-open .logo-svg,.q-blog .q-logo,.yt-av{--lg-arc:url(#lgArc);--lg-en:#1E39B4;--lg-sm:#1E39B4;--lg-ko:#111}

/* =========================================================
   헤더
   ========================================================= */
.hd{position:fixed;top:0;left:0;width:100%;z-index:88;transition:background var(--t-fast)}
.hd-in{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}
.logo{display:block;width:194px;flex:0 0 auto}
.logo-svg{width:100%;height:auto;overflow:visible}
.hd.on,.hd.onOver{background:#fff}
.gnb{margin-left:auto}
.gnb ul{display:flex;gap:60px}
.gnb a{display:block;font-size:18px;line-height:2.22;letter-spacing:var(--ls-nav);color:#fff;transition:color var(--t-fast)}
.hd.on .gnb a,.hd.onOver .gnb a{color:#000}
.gnb a:hover{color:var(--c-brand)!important}
.hd-util{display:flex;align-items:center;margin-left:57px}
.lang{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;transition:color var(--t-fast)}
.lang svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.1}
.lang span{font:500 12px/1 var(--ff-en)}
.lang i{font-style:normal;font-size:9px}
.hd.on .lang,.hd.onOver .lang,.hd.menu-open .lang{color:#000}
.hd.on .lang span,.hd.onOver .lang span{color:var(--c-brand)}
.ham{position:relative;width:30px;height:30px;margin-left:50px;transition:transform var(--t-fast)}
.ham span{position:absolute;width:10px;height:10px;border-radius:10px;background:#fff;transition:background var(--t-fast)}
.ham span:nth-child(1){top:0;left:0}
.ham span:nth-child(2){top:0;right:0}
.ham span:nth-child(3){bottom:0;right:0}
.ham span:nth-child(4){bottom:0;left:0}
.hd.on .ham span,.hd.onOver .ham span,.hd.menu-open .ham span{background:#000}
@media (hover:hover) and (min-width:769px){.ham:hover{transform:rotate(45deg)}.hd.menu-open .ham:hover{transform:none}}

/* 메가메뉴 */
.fullMenu{position:relative;z-index:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-fast) ease;background:#fff}
.hd.onOver .fullMenu{grid-template-rows:1fr;border-top:1px solid #eee}
.fm-in{overflow:hidden;min-height:0}
.fm-cols{display:flex;padding:50px 0}
.fm-col{flex:1;text-align:center;border-left:1px solid var(--c-line-2)}
.fm-col:first-child{border-left:0}
.fm-col>p{font-size:18px;font-weight:700;letter-spacing:var(--ls-nav);margin-bottom:30px}
.fm-col li+li{margin-top:25px}
.fm-col a{font-size:16px;color:var(--c-gray-600);letter-spacing:var(--ls-nav);transition:color var(--t-base)}
.fm-col a:hover{color:var(--c-brand);font-weight:700}

/* 햄버거 패널 */
.mpanel{position:fixed;top:0;right:0;width:720px;height:100%;background:#fff;z-index:1;padding-top:var(--header-h);transform:translateX(100%);transition:transform var(--t-base);overflow-y:auto;visibility:hidden}
.mpanel::after{content:"";position:absolute;right:-25%;bottom:-18%;width:70%;aspect-ratio:1;border-radius:50%;border:clamp(40px,7vw,100px) solid transparent;background:linear-gradient(135deg,#e6e6e6,#fff 70%) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1}
.hd.menu-open .mpanel{transform:none;visibility:visible}
.hd.menu-open{background:#fff}
.hd.menu-open .gnb a{color:#000}
.mp-list{padding:45px 65px;position:relative;z-index:1}
.mp-list>li+li{margin-top:50px}
.mp-1{display:flex;align-items:center;font-size:32px;letter-spacing:var(--ls-nav);text-align:left;transition:color var(--t-fast)}
.mp-1 b{font:800 32px/1 var(--ff-en);color:#fff;-webkit-text-stroke:1px #000;margin-right:30px;min-width:42px;letter-spacing:0}
.mp-list>li.open>.mp-1,.mp-1:hover{color:var(--c-brand);font-weight:700}
.mp-list>li.open>.mp-1 b,.mp-1:hover b{color:var(--c-brand);-webkit-text-stroke:1px var(--c-brand)}
.mp-list>li>ul{max-height:0;overflow:hidden;padding-left:65px;transition:max-height var(--t-fast) ease,margin var(--t-fast)}
.mp-list>li.open>ul{max-height:320px;margin-top:30px}
.mp-list>li>ul li+li{margin-top:15px}
.mp-list>li>ul a{position:relative;display:inline-block;font-size:16px;color:var(--c-gray-600);padding-bottom:3px}
.mp-list>li>ul a::before{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#000;transition:width var(--t-base)}
.mp-list>li>ul a:hover{color:#000;font-weight:700}
.mp-list>li>ul a:hover::before{width:100%}

/* 퀵메뉴 */
.quick{position:fixed;right:0;top:50vh;transform:translateY(-50%);z-index:89;display:flex;flex-direction:column;gap:5px}
.q{width:85px;height:80px;border-radius:var(--r-quick);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:13px;letter-spacing:-.03em;transition:filter var(--t-fast)}
.q:hover{filter:brightness(1.06)}
.q svg{width:23px;height:23px;fill:currentColor}
.q p{margin-top:5px}
.q-blog{background:var(--q-sister);color:var(--q-sister-ink);font-weight:700;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.q-blog .q-logo{width:62px;height:auto;margin-bottom:2px}
.q-tel{background:var(--q-phone)}
.q-rsv{background:var(--q-reserve)}
.q-talk{background:var(--q-kakao);color:var(--q-kakao-ink)}
.q-talk svg{width:31px;height:27px}

/* 샘플 배지 */
.sample-badge{position:fixed;left:14px;bottom:14px;z-index:90;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:14px;background:rgba(17,24,48,.55);color:rgba(255,255,255,.92);font:500 11.5px/1 var(--ff-sans);letter-spacing:.02em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);transition:background var(--t-fast)}
.sample-badge:hover{background:rgba(30,57,180,.85)}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:48px;z-index:300;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:rgba(17,17,17,.88);color:#fff;font-size:14px;padding:13px 22px;border-radius:24px;transition:opacity .3s,transform .3s;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   1+2 히어로 + S01 (배경 공유 — sticky 고정 배경)
   ========================================================= */
.vise{position:relative;isolation:isolate}
.fixBack{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:-1;overflow:hidden;background:#0b2a44}
.fixBack-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fixBack::after{content:"";position:absolute;left:0;right:0;top:0;height:200px;background:linear-gradient(180deg,rgba(0,22,48,.38),rgba(0,22,48,0));pointer-events:none}
.hero{position:relative;height:var(--sec-vh);color:#fff;overflow:hidden}
.hero-wrap{position:relative;height:100%;display:flex;align-items:center}
.ring{position:absolute;left:0;top:50%;width:550px;transform:translateY(-50%);z-index:0}
.ring svg{width:100%;height:auto}
.ring path{stroke-dasharray:0 999999}
.hero-titbox{position:relative;z-index:1;width:80%;margin:0 auto}
.hero-tit{font:700 var(--fs-hero)/1.3667 var(--ff-sans);letter-spacing:var(--ls-ko);text-shadow:0 2px 24px rgba(0,30,60,.18)}
.hero-tit .ln{display:block;overflow:hidden}
.hero-tit .ln i{display:block;font-style:normal}
.hero-tit .en{font-family:var(--ff-en),var(--ff-sans);font-weight:700;letter-spacing:-.01em}
.hero-rb{position:absolute;right:0;bottom:5.4688vw;z-index:2;width:max(472px,33vw)}
.mega-wrap{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.mega{position:relative;font:400 var(--fs-mega)/1 var(--ff-ko-display);letter-spacing:var(--ls-display);color:transparent;-webkit-text-stroke:1px #fff;overflow:hidden;transform-origin:top}
.mega.m1{margin-right:7.29vw}
.mega.m2{margin-top:-.25em}
.mega>span{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;color:#fff;white-space:nowrap}
.the-one{position:absolute;right:7.55vw;bottom:-.06em;font:400 var(--fs-the-one)/.82 var(--ff-en);letter-spacing:var(--ls-display);color:#fff;pointer-events:none}
.the-one p:nth-child(1){margin-right:5.21vw}
.the-one p:nth-child(2){text-align:right;transform:translateY(17px)}
.hero-intro{position:relative;margin-right:11.98vw;margin-top:-6%;padding-left:20px;max-width:440px;margin-left:auto}
.hero-intro dt{font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-.04em}
.hero-intro dd{font-size:14px;line-height:1.625;letter-spacing:-.04em;margin-top:15px;color:rgba(255,255,255,.92)}
html.js .hero-tit .ln i{transform:translateY(100%)}
html.js .mega{transform:scale(0)}
html.js .the-one p{opacity:0}
html.js .the-one p:nth-child(1){transform:translateX(100%)}
html.js .the-one p:nth-child(2){transform:translateX(100%)}
html.js .hero-intro dt,html.js .hero-intro dd{opacity:0;transform:translateY(100%)}

.s01{position:relative;height:var(--sec-vh);color:#fff}
.s01-in{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.s01-tit{font:400 var(--fs-s01)/1 var(--ff-ko-display);text-shadow:0 2px 30px rgba(0,25,50,.2)}
.s01-tit .hj{font-family:var(--ff-sans);font-weight:500}
.s01 .lead{margin-top:35px;font-size:18px;line-height:28px;letter-spacing:-.04em}
.s01-list{margin-top:35px}
.s01-list li{position:relative;padding-left:15px;font-size:16px;font-weight:500;letter-spacing:-.02em}
.s01-list li+li{margin-top:15px}
.s01-list li::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;transform:translateY(-50%)}
.btn-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;width:10em;height:3.125em;margin-top:55px;border:1px solid #fff;border-radius:var(--r-pill);font-size:16px;font-weight:500;color:#fff;overflow:hidden;transition:color var(--t-btn)}
.btn-pill::before{content:"";position:absolute;top:0;left:-105%;width:100%;height:100%;border-radius:var(--r-pill);background:#fff;transition:left var(--t-btn)}
.btn-pill span{position:relative}
@media (hover:hover) and (min-width:769px){.btn-pill:hover{color:#000}.btn-pill:hover::before{left:0}}

/* =========================================================
   3. S02 장비 슬라이더
   ========================================================= */
.s02{position:relative;padding:205px 0 220px;background:#fff;overflow:hidden}
.s02 .poa{position:absolute;left:50%;top:calc(50% - 43px);transform:translate(-50%,-50%);width:95%;max-width:1600px;pointer-events:none;z-index:2}
.s02-txt{max-width:24.375%}
.eyebrow{font:600 var(--fs-eyebrow)/1 var(--ff-en);color:var(--c-brand);text-transform:uppercase}
.s02 h2{margin-top:15px;font-size:var(--fs-h2);font-weight:700;line-height:1.0833;letter-spacing:var(--ls-ko)}
.s02 .desc{margin-top:30px;font-size:16px;line-height:28px;color:var(--c-gray-600);letter-spacing:var(--ls-ko)}
.swbx{padding-left:28.65%}
.eq{position:relative;display:block;padding-bottom:120%;overflow:hidden;background:#eef0f8}
.eq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eq::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:50%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity var(--t-slow);z-index:1}
.eq::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:42%;background:linear-gradient(180deg,rgba(155,164,214,0),rgba(140,150,210,.78));z-index:0}
.eq-txt{position:absolute;left:0;bottom:0;width:100%;padding:0 35px 30px;z-index:2}
.eq .model{font:500 18px/1 var(--ff-en);color:var(--c-brand)}
.eq h3{margin-top:15px;font-size:32px;font-weight:700;line-height:1.1;letter-spacing:var(--ls-ko);color:#fff}
.eq-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.eq-d p{overflow:hidden;min-height:0;font-size:18px;line-height:28px;letter-spacing:-.04em;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.eq-d p{margin-top:0;transition:margin .2s}
@media (hover:hover) and (min-width:769px){
  .eq:hover::before{opacity:.5}
  .eq:hover .eq-d{grid-template-rows:1fr}
  .eq:hover .eq-d p{margin-top:25px}
  .eq:hover .model{color:#c9d2ff}
}
.s02 .swiper-pagination.swiper-pagination-progressbar{position:relative;top:auto;left:auto;width:86%;height:4px;margin-top:65px;background:rgba(0,0,0,.25)}
.s02 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--c-brand)}

/* =========================================================
   4. S03 가로 스크롤
   ========================================================= */
.hz{position:relative;height:100vh;overflow:hidden;color:#fff;background:#1d1812}
.hz .fixBg{position:absolute;inset:0;z-index:0}
.hz .bg{position:absolute;inset:0;background-position:center;background-size:cover}
.hz .bg1{background-image:url(img/hz-bg-01.webp)}
.hz .bg2{background-image:url(img/hz-bg-02.webp)}
.hz .track{position:relative;z-index:1;display:flex;width:100vw;height:100vh}
.hz .panel{position:relative;flex:0 0 100vw;width:100vw;height:100vh}
.pot{position:absolute;top:13.9%;right:100px;font:400 var(--fs-mega)/1 var(--ff-ko-display);letter-spacing:var(--ls-display)}
.pot .ch{position:relative;color:transparent;-webkit-text-stroke:1px #fff;white-space:nowrap}
.pot .ch>span{position:absolute;left:0;top:0;width:0;height:100%;overflow:hidden;color:#fff;-webkit-text-stroke:1px #fff}
/* 3음절 계단 (원본 수치) */
.pot3 .ch:nth-child(2){position:absolute;right:0;top:0;transform:translate(.8em,.43em)}
.pot3 .ch:nth-child(3){position:absolute;left:0;top:0;transform:translate(.1em,1.2em)}
/* 4음절 계단 — 2열 지그재그로 다시 짬 (높이 2.38em 안에 수납) */
.pot4{top:11.5%;right:calc(100px + .4em)}
.pot4 .ch:nth-child(2){position:absolute;right:0;top:0;transform:translate(.78em,.36em)}
.pot4 .ch:nth-child(3){position:absolute;left:0;top:0;transform:translate(.06em,1.02em)}
.pot4 .ch:nth-child(4){position:absolute;left:0;top:0;transform:translate(.84em,1.38em)}
.bbx{position:absolute;left:calc(50% - 7.08vw);top:50%;transform:translate(-50%,-50%);display:flex;align-items:flex-end;z-index:2}
.cap{flex:0 0 auto;padding-bottom:6px}
.cap-t{font-size:max(15px,1.0417vw);font-weight:700;line-height:1.5;letter-spacing:-.04em}
.cap-d{margin-top:20px;font-size:max(12px,.8333vw);line-height:1.625;letter-spacing:-.04em;color:rgba(255,255,255,.92)}
.hz .card{display:block;width:30.2083vw;max-width:580px;aspect-ratio:4/5;margin-left:3.9vw;overflow:hidden;background:#3a3128}
.hz .card img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
@media (hover:hover){.hz .card:hover img{transform:scale(1.04)}}
.badge{position:absolute;right:5.2%;bottom:5.6%;width:min(15.625vw,300px);height:auto;z-index:3;overflow:visible}
@media (prefers-reduced-motion:reduce) and (min-width:769px){
  .hz{height:auto}
  .hz .fixBg{display:none}
  .hz .track{flex-direction:column;height:auto;width:100%}
  .hz .panel{flex:none;width:100%}
  .hz .p1{background:url(img/hz-bg-01.webp) center/cover}
  .hz .p2{background:url(img/hz-bg-02.webp) center/cover}
  .pot .ch>span{width:100%}
}

/* =========================================================
   5. S04 영상 아이리스
   ========================================================= */
.iris-sec{padding:120px 0 200px;background:#fff}
.iris{position:relative;height:100vh;display:flex;align-items:center;justify-content:center}
.iris .video{position:relative;width:100%;aspect-ratio:1600/808;overflow:hidden;background:#efe9e2}
.iris video{width:100%;height:100%;object-fit:cover}
.iris .m{position:absolute;background:#fff;z-index:2}
.iris .m-top,.iris .m-bottom{left:0;right:0;height:50%}
.iris .m-top{top:0}
.iris .m-bottom{bottom:0}
.iris .m-left,.iris .m-right{top:50%;transform:translateY(-50%);width:50%;height:100%}
.iris .m-left{left:0}
.iris .m-right{right:0}
@media (prefers-reduced-motion:reduce){.iris .m{display:none}.iris{height:auto}}

/* =========================================================
   6. 유튜브
   ========================================================= */
.yt{background:#fff;height:600px}
.yt-in{display:flex;gap:0;align-items:flex-start}
.yt-l{flex:0 0 40.55%;min-width:0;padding-right:30px}
.yt-label{display:flex;align-items:center;font:500 17px/1.4 var(--ff-en);text-transform:uppercase}
.yt-label svg{width:30px;height:21px}
.yt-label span{margin-left:10px}
.yt h2{margin:20px 0;font-size:38px;line-height:1.2308;letter-spacing:var(--ls-ko);font-weight:400}
.yt h2 strong{font-weight:700}
.yt .desc{font-size:23px;line-height:1.23;letter-spacing:var(--ls-ko);margin-bottom:29px}
.btn-line{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;width:17.5em;height:3.125em;border:1px solid #000;border-radius:var(--r-pill);font-size:16px;overflow:hidden;transition:color var(--t-slow)}
.btn-line svg{position:relative;width:30px;height:21px;z-index:1}
.btn-line span{position:relative;z-index:1}
.btn-line::before{content:"";position:absolute;top:0;bottom:0;left:-105%;width:100%;border-radius:var(--r-pill);background:#000;transition:left var(--t-slow)}
@media (hover:hover) and (min-width:769px){.btn-line:hover{color:#fff}.btn-line:hover::before{left:0}}
.yt-frame{position:relative;flex:1 1 0;min-width:0;height:450px;display:block;overflow:hidden;background:#e9eef9;color:#fff}
.yt-frame img{width:100%;height:100%;object-fit:cover;object-position:right center}
.yt-bar{position:absolute;left:0;top:0;right:0;display:flex;align-items:center;gap:12px;padding:14px 18px 34px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));font-size:17px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#fff;padding:6px 3px;overflow:hidden}
.yt-bar>span{overflow:hidden;text-overflow:ellipsis}
.yt-chip{position:absolute;left:22px;bottom:150px;padding:9px 16px;border-radius:8px 8px 8px 0;background:var(--c-brand);font-size:22px;font-weight:700;letter-spacing:-.03em}
.yt-head{position:absolute;left:22px;bottom:30px;display:flex;flex-direction:column;gap:6px}
.yt-head em{font-style:normal;font-size:46px;font-weight:700;letter-spacing:-.05em;color:#FFD84A;-webkit-text-stroke:1.2px #1a1a1a;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.yt-head b{font-size:46px;font-weight:700;letter-spacing:-.05em;color:#fff;-webkit-text-stroke:1.2px #1a1a1a;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.yt-play{position:absolute;left:50%;top:50%;width:68px;transform:translate(-50%,-50%);transition:transform var(--t-fast)}
.yt-frame:hover .yt-play{transform:translate(-50%,-50%) scale(1.08)}

/* =========================================================
   7. 연구 블록
   ========================================================= */
.rs{padding:44px 0;background:#fff}
.rs-band{background:var(--c-dark);color:#fff}
.rs-grid{display:grid;grid-template-columns:min(780px,49vw) 1fr;align-items:center}
.half-wrap{position:relative;margin:-44px 0}
.half{position:relative;aspect-ratio:780/656;border-radius:0 80% 80% 0/0 50% 50% 0;overflow:hidden;background:#555}
.half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.half::after{content:"";position:absolute;inset:0;background:var(--c-overlay-half)}
.values{position:absolute;right:80px;top:50%;transform:translateY(-50%);z-index:1}
.values li{display:flex;align-items:flex-start;gap:22px;margin:30px 0;position:relative}
.values li+li::before{content:"";position:absolute;left:30px;top:-30px;width:100px;height:1px;background:var(--c-line-3)}
.v-h{display:flex;flex-direction:column;align-items:center;width:84px}
.v-h svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v-h b{margin-top:15px;font-size:20px;font-weight:700;white-space:nowrap}
.values p{width:200px;font-size:16px;line-height:23px;padding-top:4px}
.ring-deco{position:absolute;top:50%;left:calc(100% + 85px - 229.5px);width:459px;height:459px;border-radius:50%;border:1px solid rgba(255,255,255,.25);transform:translateY(-50%);pointer-events:none;z-index:2}
.rs-txt{position:relative;z-index:3;padding:60px 40px 60px 65px;min-width:0}
.rs-txt .eyebrow{font-weight:500;letter-spacing:var(--ls-ko);line-height:34px}
.rs-txt h2{margin-top:10px;font-size:var(--fs-h2-b);font-weight:700;line-height:56px;letter-spacing:-.5px}
.rs-txt h3{margin-top:20px;font-size:28px;font-weight:700;line-height:42px;letter-spacing:var(--ls-ko)}
.rs-txt .rule{display:block;height:1px;background:var(--c-on-dark-20);margin:25px -100vw 25px 0}
.rs-txt .sub h4{font-size:20px;font-weight:700;line-height:34px;letter-spacing:var(--ls-ko)}
.rs-txt .sub p{font-size:16px;line-height:27.2px;opacity:.6;letter-spacing:var(--ls-ko)}
.rs{overflow:hidden}

/* =========================================================
   8. 학술 활동
   ========================================================= */
.ac{position:relative;height:1021px;background:#050608 url(img/academic-bg.webp) center/cover no-repeat;color:#fff;overflow:hidden}
.ac-in{width:1280px;max-width:95%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:space-evenly}
.ac h2{font-size:var(--fs-h2-b);font-weight:700}
.ac .t p{margin-top:25px;font-size:28px;line-height:42px}
.ac .grid{display:flex;flex-wrap:wrap;margin:-5px}
.ac .grid img{width:calc(33.333% - 10px);aspect-ratio:3/2;height:auto;margin:5px;object-fit:cover;background:#1a1a1a}

/* =========================================================
   9. 6대 원칙
   ========================================================= */
.st{background:#fff;padding-bottom:70px;overflow:hidden}
.st-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:130px}
.st-eyebrow p{font:600 var(--fs-eyebrow)/1 var(--ff-en);color:var(--c-brand);text-transform:uppercase;white-space:nowrap}
.st-eyebrow .line{flex:1;max-width:972px;height:1px;background:var(--c-brand)}
.st h2{margin:47px 0 76px;font-size:var(--fs-h2-b);font-weight:700;letter-spacing:var(--ls-ko)}
.st-grid{display:flex;flex-wrap:wrap;min-height:550px;align-content:flex-start}
.st .card{position:relative;width:calc(33.33% - 82px);padding-left:80px;box-sizing:content-box;margin-bottom:47px}
.st .card:nth-child(2),.st .card:nth-child(5){border-left:1px solid var(--c-line-3);border-right:1px solid var(--c-line-3)}
.st .card svg{position:absolute;left:80px;top:12px;width:48px;height:50px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.st .card h3{margin:75px 0 28px;font-size:24px;font-weight:700;letter-spacing:var(--ls-ko)}
.st .card p{font-size:18px;line-height:28px;color:var(--c-gray-600);letter-spacing:var(--ls-ko);padding-right:30px}

/* =========================================================
   10. 오시는 길
   ========================================================= */
.loc{position:relative;isolation:isolate;padding:100px 0 130px;background:#2a2b2e url(img/location-bg.webp) center/cover no-repeat;color:#fff;overflow:hidden}
.loc::before{content:"";position:absolute;inset:0;background:rgba(20,20,22,.45);z-index:-2}
.btx{position:absolute;top:30px;right:.4em;z-index:-1;font:600 min(6.55vw,120px)/1.1423 var(--ff-en);text-align:right}
.btx p{position:relative;display:block;width:max-content;margin-left:auto;color:transparent;-webkit-text-stroke:1px #fefefe;white-space:nowrap}
.btx p:nth-child(1){margin-right:.733em}
.btx p>span{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;color:#fff}
.loc h2{font:400 74px/1.28 var(--ff-en)}
.addr{display:flex;align-items:baseline;margin-top:30px;font-size:16px}
.addr b{font-weight:700}
.addr span{margin-left:20px;color:var(--c-on-dark-60)}
.routes{display:flex;gap:40px;margin-top:70px}
.routes li{flex:1;min-width:0}
.routes h3{font-size:24px;letter-spacing:var(--ls-ko)}
.rt{display:flex;align-items:center;margin-top:20px;font-size:16px;color:var(--c-on-dark-60);letter-spacing:var(--ls-ko)}
.rb{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;margin-right:10px;border-radius:50%;border:2px solid #fff;background:#33A23D;color:#fff;font:700 11px/1 var(--ff-sans);font-style:normal}
.rb.rp{background:var(--c-brand)}
.routes .media{margin-top:20px;aspect-ratio:16/9;overflow:hidden;background:#444}
.routes .media img{width:100%;height:100%;object-fit:cover;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
@media (prefers-reduced-motion:reduce){.routes .media img{animation:none}.btx p>span{height:100%}}

/* =========================================================
   11. 연락처
   ========================================================= */
.ct{padding:105px 0;background:#fff;overflow:hidden}
.ct-in{display:flex;gap:40px;align-items:center}
.ct .card{position:relative;flex:1 1 50%;min-width:0;height:467px;padding:91px 40px 45px;background:linear-gradient(120deg,#1E39B4 0%,#2140C4 60%,#2A48CB 100%);color:#fff;overflow:hidden}
.card-txt{position:relative;z-index:1}
.lb{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:500;color:var(--c-gold);letter-spacing:var(--ls-ko)}
.lb svg{width:24px;height:24px;fill:var(--c-gold)}
.lb svg.ln-ic{fill:none;stroke:var(--c-gold);stroke-width:2;stroke-linecap:round}
.lb2{margin-top:40px}
.tel{margin-top:20px;font:600 38px/1 var(--ff-en);letter-spacing:var(--ls-ko);font-variant-numeric:lining-nums}
.hours{margin-top:4px}
.hours div{display:flex;margin-top:20px;font-size:16px}
.hours dt{width:75px;font-weight:700}
.hours dd{color:var(--c-on-dark-40)}
.notes{margin-top:30px;display:flex;flex-direction:column;gap:.6em;font-size:14.4px;font-weight:700;color:rgba(255,255,255,.8)}
.phone{position:absolute;right:-6px;top:52px;width:272px;height:520px;border-radius:46px;background:#3557E0;border:9px solid #2B4BD6;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),-14px 10px 40px rgba(0,0,40,.25)}
.phone .notch{position:absolute;left:50%;top:14px;width:62px;height:6px;border-radius:6px;background:#1a2d8f;transform:translateX(-50%)}
.phone .notch::before{content:"";position:absolute;left:-18px;top:-1px;width:8px;height:8px;border-radius:50%;background:#1a2d8f}
.phone .screen{position:absolute;inset:34px 10px 10px;border-radius:30px;background:linear-gradient(180deg,#86A3EC,#7d9be8);display:flex;align-items:flex-start;justify-content:center;padding-top:96px}
.phone .screen svg{width:170px;height:auto}
.phone .screen svg{--lg-arc:url(#lgArc);--lg-en:#1E39B4;--lg-sm:#1E39B4;--lg-ko:#162a85}
.ct .links{flex:1 1 50%;min-width:0}
.ct .links li+li{margin-top:60px}
.ct .links a{position:relative;display:flex;align-items:center;padding-bottom:30px;border-bottom:2px solid var(--c-line);font-size:24px;font-weight:700;letter-spacing:var(--ls-ko);transition:color var(--t-fast)}
.ct .links .ic{width:28px;height:28px;margin-right:17px;fill:var(--c-brand);flex:0 0 auto}
.ct .arr{position:absolute;right:0;top:calc(50% - 15px);width:50px;height:50px;border-radius:var(--r-circle);border:1px solid var(--c-gray-500);transform:translateY(-50%);transition:border-color var(--t-fast)}
.ct .arr::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1.5px solid #555;border-right:1.5px solid #555;transform:translate(-70%,-50%) rotate(45deg);transition:border-color var(--t-fast)}
@media (hover:hover) and (min-width:769px){
  .ct .links a:hover{color:var(--c-brand)}
  .ct .links a:hover .arr{border-color:var(--c-brand)}
  .ct .links a:hover .arr::before{border-color:var(--c-brand)}
}

/* 12. 블루 띠 */
.band{background:var(--c-brand);color:#fff;height:150px;display:flex;align-items:center}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:30px}
.band p{font-size:16px;color:rgba(255,255,255,.8);letter-spacing:var(--ls-ko)}
.band p b{font-size:18px;color:#fff;margin-right:18px}
.btn-w{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:10em;height:3.125em;border-radius:var(--r-pill);background:#fff;color:var(--c-brand);font-size:16px;font-weight:700;transition:background var(--t-fast),color var(--t-fast)}
.btn-w:hover{background:var(--c-gold);color:#111}

/* 푸터 */
.ft{background:var(--c-dark);padding:50px 0 60px;color:var(--c-gray-500);font-size:14px}
.ft-logo svg{width:208px;height:auto}
.ft-logo svg{--lg-arc:#9a9a9a;--lg-en:#9a9a9a;--lg-sm:#9a9a9a;--lg-ko:#9a9a9a;--lg-dot:#9a9a9a}
.ft-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ft-btns button{padding:9px 14px;border:1px solid #F6F6F6;color:var(--c-gray-500);font-size:14px;transition:all var(--t-slow)}
.ft-btns button:hover{background:#fff;color:#000;border-color:#000}
.ft-info{display:flex;flex-wrap:wrap;max-width:620px;margin-top:30px;margin-left:-15px}
.ft-info div{display:inline-flex;margin:15px 15px 0}
.ft-info dt{color:#fff;margin-right:10px;font-weight:700}
.ft-info dd{color:var(--c-gray-500)}
.copy{margin-top:30px;font:400 14px/1.5 var(--ff-en);font-variant-numeric:lining-nums;text-transform:uppercase;letter-spacing:.04em}
.copy span{text-transform:none;font-family:var(--ff-sans);letter-spacing:0;font-size:12px;color:#777}

/* 약관 레이어 */
.layer{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center}
.layer[hidden]{display:none}
.layer-dim{position:absolute;inset:0;background:var(--c-dim)}
.layer-box{position:relative;width:900px;max-width:calc(100% - 60px);height:50vh;background:#fff;padding:50px 45px}
.layer-box h2{font-size:24px;font-weight:700;letter-spacing:var(--ls-ko)}
.layer-body{margin-top:24px;height:calc(100% - 50px);overflow:auto;font-size:15px;line-height:1.8;color:#444}
.layer-body p+p{margin-top:10px}
.layer-x{position:absolute;right:-40px;top:0;width:40px;height:40px;background:var(--c-brand)}
.layer-x span{position:absolute;left:50%;top:50%;width:20px;height:2px;background:#fff}
.layer-x span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.layer-x span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

/* =========================================================
   반응형
   ========================================================= */
@media (min-width:1920px){
  .hero-rb{bottom:105px}
  .hz .card{width:580px}
}
@media (max-width:1550px){
  .gnb ul{gap:30px}
  .gnb a{font-size:16px}
  .ring{width:35.48vw}
}
@media (max-width:1280px){
  .gnb,.fullMenu{display:none}
  .mpanel{width:60%}
  .mp-1,.mp-1 b{font-size:28px}
  .s02{padding-top:150px;padding-bottom:150px}
  .s02 .poa{position:static;transform:none;width:var(--wrap-w);margin:0 auto 50px;pointer-events:auto}
  .s02-txt{max-width:none}
  .swbx{padding-left:2.5vw}
  .yt h2{font-size:30px}
  .yt h2{font-size:20px;line-height:1.5}
  .yt h2 strong{font-size:30px}
  .yt .desc{font-size:16px;line-height:1.5}
  .rs-txt h3{font-size:22px;line-height:34px}
}
@media (max-width:1100px){
  .rs-grid{grid-template-columns:1fr}
  .half-wrap{margin:-44px 0 0;width:min(780px,92%)}
  .ring-deco{display:none}
  .rs-txt{padding:50px 5% 60px}
}
@media (max-width:1025px){
  .ac{height:auto;padding:90px 0}
  .ac-in{width:90%;max-width:none;justify-content:flex-start;gap:40px}
  .ac h2{font-size:24px}
  .ac .t p{font-size:16px;line-height:1.6;margin-top:14px}
  .ac .grid img{width:calc(50% - 10px);height:30vw;aspect-ratio:auto}
  .st h2{font-size:24px;margin:30px 0 40px}
  .st-grid{min-height:0}
  .st .card{width:calc(50% - 40px);padding-left:20px;padding-right:20px}
  .st .card:nth-child(2),.st .card:nth-child(5){border:0}
  .st .card svg{left:20px}
  .st .card p{font-size:12px;line-height:1.7;padding-right:0}
  .st .card h3{font-size:18px;margin:70px 0 14px}
}
@media (max-width:768px){
  .logo{width:150px}
  .hd-util{margin-left:auto}
  .lang svg{width:22px;height:22px}
  .ham{margin-left:24px;width:26px;height:26px}
  .ham span{width:9px;height:9px}
  .mp-list{padding:30px 8%}
  .mp-1,.mp-1 b{font-size:3.5vw}
  .mp-list>li+li{margin-top:34px}
  .mp-list>li>ul{padding-left:12vw}

  .quick{top:auto;bottom:5px;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;gap:17px;transition:bottom var(--t-base)}
  .quick.hide,.hd.menu-open ~ .quick{bottom:-90px}
  .q{width:70px;height:70px;border-radius:50%;font-size:12.5px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .q p{margin-top:3px;white-space:nowrap}
  .q svg{width:24px;height:24px}
  .q-blog{background:var(--q-sister-m);color:#fff}
  .q-blog .q-logo{width:46px}
  .q-blog .q-logo{--lg-arc:#fff;--lg-en:#fff;--lg-sm:#fff;--lg-ko:#fff}
  .q-talk svg{width:30px;height:26px}
  .sample-badge{left:8px;bottom:84px;height:24px;font-size:10.5px;padding:0 10px}

  .fixBack{height:100svh;margin-bottom:-100svh}
  .hero,.s01{height:100svh}
  .ring{width:62vw;left:-4vw}
  .hero-titbox{width:100%;padding-left:6vw}
  .hero-rb{bottom:128px;width:100%}
  .mega.m1{margin-right:12vw}
  .the-one{right:13vw}
  .the-one p:nth-child(1){margin-right:8vw}
  .hero-intro{margin-right:auto;margin-left:5%;margin-top:-2%;padding-left:0;max-width:82%}
  .hero-intro dt{font-size:14px}
  .hero-intro dd{font-size:12px;margin-top:8px}
  .s01 .lead{font-size:16px;line-height:1.6}
  .s01 .lead br{display:none}
  .s01-list li{font-size:14px}
  .btn-pill{margin-top:40px}

  .s02{padding:24.69vw 0}
  .s02 .poa{margin-bottom:34px}
  .s02 h2{margin-top:12px}
  .s02 .desc{margin-top:18px;font-size:14px;line-height:1.7}
  .eq::before{opacity:.5}
  .eq-d{display:none}
  .eq-txt{padding:0 20px 20px}
  .eq .model{font-size:13px}
  .eq h3{font-size:20px;margin-top:8px}
  .s02 .swiper-pagination.swiper-pagination-progressbar{margin-top:34px;width:92%}

  /* S03 → 세로 2블록 */
  .hz{height:auto}
  .hz .fixBg{display:none}
  .hz .track{flex-direction:column;width:100%;height:auto}
  .hz .panel{flex:none;width:100%;height:auto;padding:24vw 5% 9.8vw;display:flex;flex-direction:column}
  .hz .p1{background:url(img/hz-bg-01.webp) center/cover}
  .hz .p2{background:url(img/hz-bg-02.webp) center/cover}
  .pot{position:relative;top:auto;right:auto;align-self:flex-end;margin-right:24vw;font-size:25.651vw;height:2.25em}
  .pot4{height:2.45em;margin-right:22vw}
  .pot .ch>span{width:100%;height:0}
  .bbx{position:relative;left:auto;top:auto;transform:none;flex-direction:column;align-items:stretch;margin-top:6vw}
  .cap-t{font-size:16px}
  .cap-d{font-size:14px;margin-top:12px}
  .hz .card{width:80%;max-width:none;margin:24px 0 0 auto}
  .badge{right:4%;top:calc(50% - 12vw);bottom:auto;width:24vw}

  .iris-sec{padding:80px 0 50px}
  .iris{height:auto;overflow:hidden}
  .iris .m{display:none}
  .iris .video{width:110%;margin-left:-5%}

  .yt{height:auto;padding:30px 0 80px}
  .yt-in{flex-direction:column;gap:30px}
  .yt-l{flex:none;width:100%;padding-right:0}
  .yt h2{font-size:18px}
  .yt h2 strong{font-size:24px}
  .yt .desc{font-size:15px}
  .btn-line{width:16em;font-size:15px}
  .yt-frame{flex:none;width:100%;height:28vh;min-height:200px}
  .yt-bar{font-size:12px;padding:10px 12px 22px}
  .yt-av{width:28px;height:28px}
  .yt-chip{font-size:13px;bottom:84px;left:12px;padding:6px 10px}
  .yt-head{left:12px;bottom:14px;gap:2px}
  .yt-head em,.yt-head b{font-size:24px;-webkit-text-stroke:.8px #1a1a1a}
  .yt-play{width:48px}

  .rs{padding:0}
  .half-wrap{margin:0;width:100%}
  .half{aspect-ratio:auto;height:400px;border-radius:0 70% 70% 0/0 50% 50% 0}
  .values{right:auto;left:5%}
  .values li{gap:12px;margin:20px 0}
  .values li+li::before{top:-20px;left:12px;width:70px}
  .v-h{width:60px}
  .v-h svg{width:30px;height:30px}
  .v-h b{font-size:14px;margin-top:8px}
  .values p{width:170px;font-size:13px;line-height:19px}
  .rs-txt{padding:40px 5% 50px;text-align:right}
  .rs-txt .eyebrow{font-size:15px}
  .rs-txt h2{font-size:24px;line-height:34px}
  .rs-txt h3{font-size:16px;line-height:26px}
  .rs-txt .rule{margin:20px 0}
  .rs-txt .sub h4{font-size:15px;line-height:26px}
  .rs-txt .sub p{font-size:13px;line-height:1.6}

  .st-eyebrow{padding-top:80px}
  .st-eyebrow p{font-size:15px}
  .st .card{width:calc(50% - 20px);padding-left:10px;padding-right:10px}
  .st .card svg{left:10px;width:40px;height:42px}
  .st .card h3{font-size:16px;margin-top:60px}

  .loc{padding:80px 0 90px}
  .btx{font-size:6.05vw;top:24px}
  .loc h2{font-size:9.1146vw}
  .addr{flex-direction:column;gap:8px;font-size:14px}
  .addr span{margin-left:0}
  .routes{margin-top:44px}
  .routes h3{font-size:20px}
  .rt{font-size:14px}

  .ct{padding:70px 0 90px}
  .ct-in{flex-direction:column;align-items:stretch}
  .ct .card{flex:none;height:auto;padding:50px 28px 40px}
  .lb{font-size:18px}
  .tel{font-size:30px}
  .phone{right:-150px;top:40px;opacity:.9}
  .ct .links a{font-size:18px;padding-bottom:20px}
  .ct .links li+li{margin-top:30px}
  .ct .arr{width:35px;height:35px;top:calc(50% - 10px)}

  .band{height:auto;padding:40px 0 50px}
  .band-in{flex-direction:column;align-items:flex-start;gap:18px}
  .band p b{display:block;margin:0 0 8px}

  .ft{padding-bottom:110px;font-size:12px}
  .ft-logo svg{width:170px}
  .ft-btns button{font-size:12px;padding:8px 10px}
  .ft-info div{font-size:12px}
  .copy{font-size:12px}
  .layer-x{right:0;top:-40px}
}
@media (max-width:480px){
  .mpanel{width:75%}
  .mp-1,.mp-1 b{font-size:5vw}
  .mp-1 b{margin-right:18px;min-width:28px}
  .routes{flex-direction:column;gap:40px}
  .loc h2{font-size:14.5833vw}
  .btx{font-size:7.9vw}
  .st .card{width:calc(50% - 20px)}
}

/* reduced motion: 최종 상태 고정 */
@media (prefers-reduced-motion:reduce){
  html.js .hero-tit .ln i,html.js .mega,html.js .the-one p,html.js .hero-intro dt,html.js .hero-intro dd{transform:none!important;opacity:1!important}
  html.js .the-one p:nth-child(2){transform:translateY(17px)!important}
  .ring path{stroke-dasharray:none!important}
  .mega>span{height:100%}
  .pot .ch>span{width:100%!important;height:100%!important}
  .btx p>span{height:100%}
  .ham:hover{transform:none}
  .toast,.mpanel,.fullMenu{transition:none}
}