@charset "utf-8";
/* =========================================================
   SEREA CLINIC — 메인 랜딩 공통 스타일
   - 전역 오염 방지: 규칙은 .serea-main / .serea-* 스코프
   ========================================================= */

:root{
  --serea-max: 1600px;
  --serea-pad: 40px;
  --serea-navy: #151921;
  --serea-blue: #4482c9;
  --serea-ink: #111111;
  --serea-gray: #858585;
  --serea-line: #e9e9e9;
  --serea-header-h: 70px;
  --serea-ease: cubic-bezier(.22,.61,.36,1);
  --serea-font: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

/* ---------- 베이스 ---------- */
.serea-main,
.serea-header,
.serea-footer,
.serea-quick{
  font-family: var(--serea-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}
.serea-main *,
.serea-header *,
.serea-footer *,
.serea-quick *{ box-sizing: border-box; }

.serea-main{
  position: relative;
  color: var(--serea-ink);
  overflow-x: hidden;
  background:#fff;
}
.serea-main img{ max-width:100%; }

.serea-container{
  width: 100%;
  max-width: calc(var(--serea-max) + var(--serea-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--serea-pad);
}

/* 섹션 공통 타이포 */
.serea-eyebrow{
  font-size: 15px; font-weight: 600; letter-spacing:.14em;
  color: var(--serea-blue); text-transform: uppercase; margin:0 0 14px;
}
.serea-h2{
  font-size: 44px; font-weight: 700; line-height:1.18; letter-spacing:-.01em;
  margin:0 0 18px; color: var(--serea-ink);
}
.serea-lead{ font-size:18px; line-height:1.6; color:#555; margin:0; font-weight:400; }
.serea-section{ position:relative; padding: 180px 0; }

/* 메뉴(앵커) 클릭 시 부드럽게 이동 + 고정 헤더 높이만큼 오프셋 */
html{ scroll-behavior:smooth; }
.serea-main section[id]{ scroll-margin-top: var(--serea-header-h); }

/* ---------- 헤더 / 글래스 바 ---------- */
.serea-header{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  height: var(--serea-header-h);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 30px rgba(0,0,0,.04);
  transition: background .3s var(--serea-ease), box-shadow .3s var(--serea-ease);
}
.serea-header__inner{
  height:100%;
  max-width: calc(var(--serea-max) + var(--serea-pad) * 2);
  margin:0 auto; padding: 0 var(--serea-pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.serea-logo{ display:inline-flex; align-items:center; line-height:0; flex-shrink:0; }
.serea-logo img{ height: 40px; width:auto; display:block; }

.serea-nav{ display:flex; align-items:center; gap:40px; }
.serea-nav a{
  font-size:17px; font-weight:400; letter-spacing:.17px; color:var(--serea-ink);
  text-decoration:none; white-space:nowrap; position:relative; padding:4px 0;
  transition: color .2s var(--serea-ease);
}
.serea-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--serea-ink); transition: width .25s var(--serea-ease);
}
.serea-nav a:hover{ color:#000; }
.serea-nav a:hover::after{ width:100%; }

.serea-lang{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; flex-shrink:0;
}
.serea-lang a{
  display:block; width:35px; height:26px; border-radius:2px; overflow:hidden;
  border:1px solid var(--serea-line); line-height:0;
  transition: transform .2s var(--serea-ease), box-shadow .2s var(--serea-ease);
}
.serea-lang a:hover{ transform: translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.12); }
.serea-lang img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 모바일 메뉴 토글 (기본 숨김) */
.serea-nav-toggle{ display:none; }

/* 본문이 고정 헤더에 가리지 않도록 */
.serea-main{ padding-top: 0; }

/* ---------- 푸터 ---------- */
.serea-footer{ background: var(--serea-navy); color:#fff; padding: 60px 0 56px; }
.serea-footer__inner{
  max-width: calc(var(--serea-max) + var(--serea-pad) * 2);
  margin:0 auto; padding:0 var(--serea-pad);
  position:relative;
}
.serea-footer__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.serea-footer__logo img{ height:44px; width:auto; display:block; }
.serea-footer__qr{
  width:80px; height:80px; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.serea-footer__qr img{ width:64px; height:64px; display:block; }

.serea-footer__tel{ font-size:26px; font-weight:600; line-height:1.4; margin:0px 0 12px; }
.serea-footer__tel a{ color:#fff; text-decoration:none; }

.serea-hours{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:14px; line-height:21px; }
.serea-hours .lbl{ font-weight:400; }
.serea-hours .lbl.sat{ color:#4482c9; }
.serea-hours .lbl.sun{ color:#de3023; }
.serea-hours .sep{ width:1px; height:12px; background:#616161; display:inline-block; }

.serea-footer__note{ margin:12px 0 0; font-size:14px; line-height:21px; color:#bebebe; }
.serea-footer__note p{ margin:0; }

.serea-footer__mid{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-top:26px;
}
.serea-sns{ display:flex; align-items:center; gap:12px; }
.serea-sns a{
  width:36px; height:36px; border-radius:100px; background:var(--serea-blue);
  display:flex; align-items:center; justify-content:center; line-height:0;
  transition: transform .2s var(--serea-ease), opacity .2s var(--serea-ease);
}
.serea-sns a:hover{ transform: translateY(-2px); }
.serea-sns img{ object-fit:contain; display:block; }
.serea-sns .ic--wa img{ width:20px; height:20px; }
.serea-sns .ic--we img{ width:21px; height:17px; }
.serea-sns .ic--ig img{ width:17px; height:18px; }
.serea-sns .ic--yt img{ width:18px; height:13px; }
.serea-sns .ic--map img{ width:14px; height:18px; }

.serea-policy{ display:flex; align-items:center; gap:24px; font-size:14px; }
.serea-policy a, .serea-policy button{ color:#fff; text-decoration:none; opacity:.9; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.serea-policy a:hover, .serea-policy button:hover{ opacity:1; text-decoration:underline; }

/* 약관 · 개인정보 팝업 (트리트먼트 팝업과 동일한 닫기·스크롤바 구조) */
.serea-policy-popup .serea-treat-popup__wrap{ max-width:760px; }
.serea-policy-doc.serea-treat-popup__scroll{ padding:52px 56px 44px; }
.serea-policy-doc__title{
  text-align:center; font-size:26px; font-weight:700; color:#111;
  letter-spacing:-.02em; margin:0 0 30px; line-height:1.3;
}
.serea-policy-doc__text{
  white-space:pre-line; font-size:15px; line-height:1.8; color:#333; letter-spacing:-.01em;
}
@media (max-width:768px){
  .serea-policy-doc.serea-treat-popup__scroll{ padding:44px 22px 32px; }
  .serea-policy-doc__title{ font-size:21px; margin:0 0 22px; }
  .serea-policy-doc__text{ font-size:14px; line-height:1.75; }
  .serea-policy{ gap:18px; }
}

.serea-footer__line{ height:1px; background:rgba(255,255,255,.3); margin:22px 0; }

.serea-bizinfo{ display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:21px; color:var(--serea-gray); }
.serea-bizinfo__row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.serea-bizinfo .sep{ width:1px; height:12px; background:#616161; display:inline-block; }

/* ---------- 모바일 드로어 ---------- */
.serea-noscroll{ overflow:hidden !important; }
.serea-drawer{
  position:fixed; inset:0; z-index:300; visibility:hidden; pointer-events:none;
}
.serea-drawer::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .3s var(--serea-ease);
}
.serea-drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(82vw,340px);
  background:#fff; box-shadow:-10px 0 40px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform .35s var(--serea-ease);
  padding:76px 28px 32px; display:flex; flex-direction:column; gap:24px; overflow-y:auto;
}
.serea-drawer.is-open{ visibility:visible; pointer-events:auto; }
.serea-drawer.is-open::before{ opacity:1; }
.serea-drawer.is-open .serea-drawer__panel{ transform:translateX(0); }
.serea-drawer__close{
  position:absolute; top:18px; right:20px; width:40px; height:40px;
  border:0; background:transparent; font-size:30px; line-height:1; color:#111; cursor:pointer;
}
.serea-drawer__nav{ display:flex; flex-direction:column; gap:4px; }
.serea-drawer__nav a{
  font-size:18px; font-weight:500; color:#111; text-decoration:none; padding:12px 0;
  border-bottom:1px solid #f0f0f0;
}
.serea-drawer__lang{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.serea-drawer__lang a{ width:38px; height:28px; border:1px solid var(--serea-line); border-radius:2px; overflow:hidden; line-height:0; }
.serea-drawer__lang img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 레이어 팝업 프레임워크 ---------- */
.serea-popup{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:40px 20px; background:rgba(10,12,16,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--serea-ease), visibility .35s var(--serea-ease);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.serea-popup.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.serea-popup__dialog{
  position:relative; width:100%; max-width:1200px; max-height:90vh; overflow:auto;
  background:#fff; border-radius:8px; transform:translateY(20px) scale(.98);
  transition:transform .4s var(--serea-ease);
}
.serea-popup.is-open .serea-popup__dialog{ transform:none; }
.serea-popup__close{
  position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border-radius:100px;
  border:0; background:rgba(0,0,0,.06); font-size:22px; line-height:1; color:#111; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s var(--serea-ease);
}
.serea-popup__close:hover{ background:rgba(0,0,0,.12); }

/* =========================================================
   HERO
   ========================================================= */
.serea-hero{
  position:relative; width:100%;
  height:100vh; height:100dvh;   /* 헤더 포함 전체 화면 높이 */
  overflow:hidden; background:#eef1f4;
}
.serea-hero__bg{ position:absolute; inset:0; z-index:1; }
.serea-hero__swiper{ width:100%; height:100%; }
.serea-hero__slide{ position:relative; overflow:hidden; }
.serea-hero__media{ position:absolute; inset:0; }
.serea-hero__img,
.serea-hero__video{ width:100%; height:100%; object-fit:cover; display:block; }
.serea-hero__yt{ position:absolute; inset:0; overflow:hidden; }
.serea-hero__yt iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-width:177.78vh; min-height:100%; border:0; pointer-events:none;
}
/* 텍스트 가독성 보조 스크림(좌측 밝게) */
.serea-hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.35) 32%, rgba(255,255,255,0) 60%);
}
.serea-hero__inner{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; }
.serea-hero__text{ max-width:920px; }

.serea-hero__badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:#17314d; color:#fff; border-radius:50px; padding:10px 20px;
  font-size:17px; font-weight:500; letter-spacing:2.72px; margin:0 0 20px;
}
.serea-hero__title{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:70px; line-height:1.1; letter-spacing:-1.4px; text-transform:uppercase;
  color:#111; margin:0 0 20px;
}
.serea-hero__sub{ font-size:20px; line-height:1.5; color:#111; margin:0; font-weight:400; }
.serea-hero__progress{
  position:relative; width:300px; height:3px; margin-top:100px;
  background:#ccc; overflow:hidden; border-radius:50px;
}
.serea-hero__progressbar{
  position:absolute; left:0; top:0; height:100%; width:33.33%;
  background:var(--serea-blue); transition:width .6s var(--serea-ease), transform .6s var(--serea-ease);
}
/* 히어로 화살표 (다중 슬라이드 · 시안: 40 원형 글래스 · 모바일 표시) */
.serea-hero__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4; display:none;
  width:40px; height:40px; border:0; border-radius:999px; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px);
  box-shadow:0 4px 30px rgba(13,41,107,.08);
}
.serea-hero__nav::before{ content:""; width:11px; height:11px; border-right:2.5px solid #17314d; border-bottom:2.5px solid #17314d; }
.serea-hero__nav--prev{ left:20px; }
.serea-hero__nav--prev::before{ transform:rotate(135deg); margin-left:4px; }
.serea-hero__nav--next{ right:20px; }
.serea-hero__nav--next::before{ transform:rotate(-45deg); margin-right:4px; }
.serea-hero__nav.swiper-button-disabled{ opacity:.35; }

/* =========================================================
   퀵메뉴(플로팅) + 한국사이트 박스
   ========================================================= */
.serea-quick{
  position:fixed; right:clamp(16px,2.6vw,40px); bottom:40px; z-index:250;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.serea-quick__stack{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.serea-quick__pill{
  display:flex; flex-direction:column; gap:8px; padding:12px 6px; border-radius:100px;
  background:rgba(217,217,217,.30); border:1px solid #fff;
  -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px);
  max-height:500px; opacity:1; overflow:hidden;
  transition:max-height .45s var(--serea-ease), opacity .3s var(--serea-ease), padding .45s var(--serea-ease);
}
.serea-quick__pill.is-collapsed{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; border-width:0; pointer-events:none; }
.serea-quick__ic{
  width:50px; height:50px; border-radius:50%; overflow:hidden; line-height:0;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .2s var(--serea-ease);
}
.serea-quick__ic:hover{ transform:scale(1.06); }
.serea-quick__ic img{ display:block; }
.serea-quick__ic > img{ width:100%; height:100%; object-fit:contain; }
.serea-quick__ic--wa{ background:linear-gradient(212deg, #51c85c 6%, #23ac3a 92%); }
.serea-quick__ic--wa img{ width:22px; height:22px; }
.serea-quick__ic--kakao{ background:#04dc6d; }
.serea-quick__ic--kakao img{ width:22px; height:18px; }
.serea-quick__ic--map{ background:#fff; }
.serea-quick__ic--map img{ width:17px; height:22px; }

.serea-quick__toggle{
  width:50px; height:50px; border-radius:50%; border:0; cursor:pointer; padding:0; overflow:hidden;
  background:transparent; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(68,130,201,.35); transition:transform .3s var(--serea-ease);
}
.serea-quick__toggle img{ width:100%; height:100%; object-fit:contain; display:block; }
.serea-quick__toggle:hover{ transform:translateY(-2px); }

.serea-quick__visit{
  position:relative; align-self:flex-end; max-width:460px;
  background:rgba(242,242,242,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid #fff; border-radius:12px; padding:14px 50px 14px 20px;
  max-height:120px; opacity:1; overflow:hidden;
  transition:max-height .45s var(--serea-ease), opacity .35s var(--serea-ease), padding .45s var(--serea-ease), margin .45s var(--serea-ease);
}
.serea-quick__visit.is-closed{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; margin:0; border-width:0; pointer-events:none; }
.serea-quick__visit-close{
  position:absolute; top:18px; right:16px; width:15px; height:15px; border:0; background:transparent; cursor:pointer; padding:0; line-height:0; color:#17314d;
}
.serea-quick__visit-close svg{ width:100%; height:100%; display:block; }
.serea-quick__visit-link{ display:block; text-decoration:none; }
.serea-quick__visit-text{ display:inline; font-size:16px; line-height:1.4; color:#17314d; }
.serea-quick__visit-text p{ display:inline; margin:0; }
.serea-quick__visit-text strong,.serea-quick__visit-text b{ font-weight:600; font-size:17px; }
.serea-quick__visit-arrow{ display:inline-block; vertical-align:middle; width:20px; height:20px; margin-left:8px; line-height:0; }
.serea-quick__visit-arrow img{ width:100%; height:100%; display:block; }
.serea-quick__visit-text a {display:inline}



/* HERO 반응형 */
@media (max-width: 1280px){
  .serea-hero__title{ font-size:56px; }
}
@media (max-width: 1024px){
  .serea-hero__title{ font-size:46px; }
  .serea-hero__sub{ font-size:18px; }
  .serea-hero__progress{ margin-top:64px; }
}
@media (max-width: 768px){
  .serea-hero{ height:100vh; height:100dvh; }
  .serea-hero__scrim{ background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.15) 40%, rgba(255,255,255,.55) 100%); }
  /* 시안(모바일) 정확값: 콘텐츠 폭 301, 좌20, 요소 간격 8px, 진행바 앞 20px */
  /* 텍스트는 하단 1/3(시안: 이미지 하단 근처)에 배치 */
  .serea-hero__inner{ align-items:flex-end; padding-bottom:120px; }
  .serea-hero__text{ max-width:301px; }
  .serea-hero__title br[data-hbr]{ display:none; }
  .serea-hero__badge{ font-size:13px; font-weight:500; padding:8px 16px; letter-spacing:2.08px; margin-bottom:8px; border-radius:50px; }
  .serea-hero__title{ font-size:30px; line-height:1.05; letter-spacing:-.9px; margin-bottom:8px; }
  .serea-hero__sub{ font-size:15px; line-height:1.4; max-width:256px; }
  .serea-hero__progress{ width:141px; height:3px; margin-top:20px; background:#fff; }
  .serea-hero__nav{ display:flex; }

  .serea-quick{ right:20px; bottom:20px; gap:8px; }
  .serea-quick__ic{ width:44px; height:44px; }
/*  .serea-quick__toggle{ width:46px; height:46px; }
  .serea-quick__toggle img{ height:28px; } */
  .serea-quick__visit{ max-width:min(calc(100vw - 40px), 410px); padding:12px 42px 12px 16px; }
  .serea-quick__visit-text{ font-size:13px; }
  .serea-quick__visit-text strong,.serea-quick__visit-text b{ font-size:14px; }
  .serea-quick__visit-close{ width:13px; height:13px; top:12px; right:13px; }
  .serea-quick__visit-arrow{ width:17px; height:17px; margin-left:6px; }
  .serea-tcard__body {height:auto}
}

/* =========================================================
   SIGNATURE TREATMENTS
   ========================================================= */
.serea-treat{ background:#fff; }
.serea-treat__head{ margin-bottom:40px; }
.serea-treat__title{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:52px;
  line-height:1.1; letter-spacing:-1.04px; text-transform:uppercase; color:#111; margin:0 0 8px;
}
.serea-treat__sub{ font-size:17px; line-height:1.5; letter-spacing:.34px; color:#333; margin:0;  }

.serea-treat__slider{ width:100%; overflow:hidden; }
.serea-tcard{
  display:flex; flex-direction:column; width:100%; text-align:left;
  border:0; background:transparent; padding:0; cursor:pointer; font-family:inherit; color:inherit;
}
.serea-tcard__imgwrap{
  position:relative; display:block; width:100%; aspect-ratio:384/500;
  border-radius:15px 15px 0 0; overflow:hidden; background:#eef1f4;
}
.serea-tcard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; transition:transform .6s var(--serea-ease); }
.serea-tcard:hover .serea-tcard__img{ transform:scale(1.045); }
.serea-tcard__name{
  position:absolute; left:0; right:0; bottom:0; background:#17314d; color:#fff;
  text-align:center; padding:10px; font-size:22px; font-weight:600; line-height:1.5;
}
.serea-tcard__body{
  display:flex; flex-direction:column; flex:1 1 auto;
  border:1px solid #ccc; border-top:0; border-radius:0 0 15px 15px; padding:30px 24px; min-height:176px;
}
.serea-tcard__desc{ font-size:17px; line-height:1.5; color:#222; }
.serea-tcard__cta{ margin-top:14px; font-size:16px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--serea-blue); transition:letter-spacing .2s var(--serea-ease); }
.serea-tcard:hover .serea-tcard__cta{ letter-spacing:1.4px; }

/* Swiper 진행바(공통) */
.serea-swiper-progress{
  position:relative; width:min(750px,72%); height:3px; margin:40px auto 0;
  background:#ccc; overflow:hidden; border-radius:50px;
}
.serea-swiper-progress__bar{
  position:absolute; left:0; top:0; height:100%; width:0; background:#4482c9; border-radius:50px;
  transition:width .25s var(--serea-ease);
}

.serea-admin-empty{
  margin:24px 0; padding:24px; text-align:center; color:#999; font-size:15px;
  border:1px dashed #ddd; border-radius:12px; background:#fafafa;
}

/* 트리트먼트 팝업 (가격 메뉴) */
.serea-treat-popup__wrap{ display:flex; flex-direction:column; align-items:center; gap:24px; width:100%; max-width:1200px; }
.serea-treat-popup__dialog{
  position:relative; width:100%; max-height:min(600px, calc(100vh - 120px));
  background:#fff; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.3); overflow:hidden;
}
.serea-treat-popup__scroll{
  max-height:min(600px, calc(100vh - 120px)); overflow-y:auto;
  padding:50px 60px 40px 50px; display:flex; flex-direction:column; gap:30px;
  scrollbar-width:none;
}
.serea-treat-popup__scroll::-webkit-scrollbar{ display:none; }
/* 커스텀 스크롤바 (시안: 콘텐츠 안쪽 인셋 · 라운드 · 화살표 없음 · 위아래 간격) */
.serea-treat-popup__sb{
  position:absolute; top:24px; bottom:24px; right:20px; width:4px;
  background:#ccc; border-radius:50px; opacity:0; transition:opacity .3s var(--serea-ease); pointer-events:none;
}
.serea-treat-popup__dialog.has-scroll .serea-treat-popup__sb{ opacity:1; pointer-events:auto; }
.serea-treat-popup__sb-thumb{
  position:absolute; left:0; top:0; width:4px; min-height:24px; background:#447dc9; border-radius:50px;
  will-change:transform,height; cursor:pointer;
}
.serea-tgroup{ display:flex; flex-direction:column; gap:16px; }
.serea-tgroup__head{ display:flex; align-items:center; gap:10px; }
.serea-tgroup__mark{ width:22px; height:36px; flex-shrink:0; line-height:0; }
.serea-tgroup__mark img{ width:100%; height:100%; object-fit:contain; }
.serea-tgroup__title{ flex:1; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:42px; line-height:1.1; letter-spacing:-.84px; color:#111; margin:0; }
.serea-tgroup__note{ font-size:16px; color:#555; white-space:nowrap; }
.serea-tgroup__box{ border:1px solid #ccc; border-radius:15px; padding:8px 0; }
.serea-trow{ display:flex; align-items:center; gap:10px; padding:12px 30px; }
.serea-trow__name{ flex:1; font-size:20px; line-height:1.5; color:#111; }
.serea-trow__price{ font-weight:600; font-size:18px; color:#447dc9; white-space:nowrap; }
/* 공용 모달 닫기 버튼 (모든 팝업 동일 디자인) */
.serea-modal-close{
  width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0;
  transition:background .2s var(--serea-ease);
}
.serea-modal-close:hover{ background:rgba(255,255,255,.25); }
.serea-modal-close img{ width:22px; height:22px; filter:brightness(0) invert(1); }

/* TREATMENTS 반응형 */
@media (max-width: 1024px){
  .serea-treat__title{ font-size:40px; }
  .serea-tgroup__title{ font-size:34px; }
}
@media (max-width: 768px){
  /* 시안(모바일): 헤더 가운데정렬 */
  .serea-treat__head{ text-align:center; margin-bottom:28px; }
  .serea-treat__title{ font-size:30px; line-height:1.1; letter-spacing:-.6px; }
  .serea-treat__sub{ font-size:15px; line-height:1.4; letter-spacing:.3px; max-width:354px; margin-left:auto; margin-right:auto; }
  .serea-tcard__name{ font-size:20px; }
  .serea-tcard__body{ padding:16px 24px; min-height:0; }
  .serea-tcard__desc{ font-size:15px; }
  .serea-tcard__cta{ margin-top:4px; font-size:13px; letter-spacing:.65px; }
  .serea-swiper-progress{ width:80%; margin-top:28px; }
  .serea-treat-popup__dialog{ padding:32px 20px 24px; gap:24px; }
  .serea-tgroup{ gap:12px; }
  .serea-tgroup__title{ font-size:28px; }
  .serea-tgroup__note{ font-size:13px; }
  .serea-tgroup__mark{ width:18px; height:30px; }
  .serea-trow{ padding:12px 16px; }
  .serea-trow__name{ font-size:16px; }
  .serea-trow__price{ font-size:15px; }
}

/* =========================================================
   EQUIPMENTS
   ========================================================= */
.serea-equip{ position:relative; background:#eef2f7 url('../img/equip_bg.png') center bottom / cover no-repeat; padding:176px 0 255px; }
.serea-equip__inner{ width:100%; max-width:calc(1904px + var(--serea-pad) * 2); margin:0 auto; padding:0 var(--serea-pad); }
.serea-equip__head{ text-align:center; margin-bottom:40px; }
.serea-equip__title{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:52px;
  line-height:1.1; letter-spacing:-1.04px; text-transform:uppercase; color:#111; margin:0 0 8px;
}
.serea-equip__sub{ font-size:17px; line-height:1.5; color:#333; margin:0; }
.serea-equip__slider{ overflow:hidden; }

.serea-ecard{
  position:relative; width:100%; aspect-ratio:364/475; background:#fff;
  border-radius:15px; box-shadow:0 4px 30px rgba(13,41,107,.08); overflow:hidden;
}
.serea-ecard__img{ position:absolute; inset:0; padding:0; }
.serea-ecard__img img{ width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block; }
.serea-ecard__name{
  position:absolute; left:0; right:0; bottom:0; padding:16px 30px; text-align:center;
  background:rgba(241,241,241,.2); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:0 0 15px 15px;
}
.serea-ecard__name span{ font-size:20px; font-weight:600; color:#111; }
.serea-ecard__glass{
  position:absolute; inset:0; border-radius:15px;
  background:rgba(241,241,241,.2); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px);
  display:flex; flex-direction:column; justify-content:flex-end; gap:16px; padding:20px 30px 16px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--serea-ease), visibility .4s var(--serea-ease);
}
.serea-ecard.has-glass:hover .serea-ecard__glass{ opacity:1; visibility:visible; }
.serea-ecard__desc{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:17px; line-height:1.5; color:#222; margin:0;
  word-break: break-word;
}
.serea-ecard__gname{ text-align:center; font-size:20px; font-weight:600; color:#111; }

@media (max-width: 1400px){ .serea-equip{ padding:130px 0 180px; } }
@media (max-width: 1024px){ .serea-equip{ padding:100px 0 130px; } .serea-equip__title{ font-size:40px; } }
@media (max-width: 768px){
  .serea-equip{ padding:70px 0 90px; }
  .serea-equip__title{ font-size:30px; line-height:1.1; letter-spacing:-.6px; }
  .serea-equip__sub{ font-size:15px; line-height:1.4; letter-spacing:.3px; max-width:354px; margin-left:auto; margin-right:auto; }
  .serea-ecard__name span, .serea-ecard__gname{ font-size:20px; }
  .serea-ecard__desc{ font-size:15px; }
  /* 터치: 글래스를 탭으로 토글 */
  .serea-ecard.has-glass.is-active .serea-ecard__glass{ opacity:1; visibility:visible; }
  /* 글래스 텍스트가 좌우 화살표(40px)와 겹치지 않도록 여백 확보 */
  .serea-ecard__glass{ padding-left:56px; padding-right:56px; }

  /* 양옆으로 보이는(peek) 슬라이드는 흐리게(opacity .2) — 가운데만 선명 */
  .serea-treat__slider .swiper-slide,
  .serea-gallery__slider .swiper-slide,
  .serea-space__slider .swiper-slide{ opacity:.2; transition:opacity .35s var(--serea-ease); }
  .serea-treat__slider .swiper-slide-active,
  .serea-gallery__slider .swiper-slide-active,
  .serea-space__slider .swiper-slide-active{ opacity:1; }
}

/* =========================================================
   원장 소개 (Medical Team)
   ========================================================= */
.serea-doctors{
  position:relative; overflow:hidden; color:#fff;
  background:#151921; padding:170px 0 150px;
}
.serea-doctors__watermark{
  position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:520px; max-width:46%; opacity:.05; pointer-events:none; line-height:0;
}
.serea-doctors__watermark img{ width:100%; height:auto; /*filter:brightness(0) invert(1);*/ }
.serea-doctors__inner{ position:relative; z-index:2; display:grid; grid-template-columns:480px 1fr; grid-template-areas:"portrait tabs" "portrait panels"; column-gap:120px; row-gap:0; align-items:start; }
.serea-doctors__left{ grid-area:portrait; }
.serea-doctors__tabs{ grid-area:tabs; }
.serea-doctors__right{ grid-area:panels; }

/* 좌: 포트레이트 */
.serea-doctors__left{ position:relative; }
.serea-doctors__portraits{ position:relative; width:100%; aspect-ratio:500/655; }
.serea-docportrait{ position:absolute; inset:0; border-radius:15px; overflow:hidden; background:#16273b; opacity:0; visibility:hidden; transition:opacity .5s var(--serea-ease); }
.serea-docportrait.is-active{ opacity:1; visibility:visible; }
.serea-docportrait img{ width:100%; height:100%; object-fit:cover; }

/* 회전 배지 — 시안: 배지 251 · 링반지름 100 · 코어 108 · 로고 32×53 · 코어 중심이 초상 우하단 모서리 */
.serea-doc-badge{
  position:absolute; right:-125px; bottom:-125px; width:250px; height:250px;
  border:0; background:transparent; cursor:pointer; padding:0; z-index:3;
}
.serea-doc-badge__ring{ position:absolute; inset:0; width:100%; height:100%; animation:serea-spin 20s linear infinite; }
.serea-doc-badge__ring text{ fill:#4482C9; font-family:'Cormorant Garamond',serif; font-size:21px; letter-spacing:2px; }
.serea-doc-badge__core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:108px; height:108px; border-radius:50%; background:#4482c9;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .3s var(--serea-ease);
}
.serea-doc-badge__core img{ width:32px; height:53px; object-fit:contain; }
@keyframes serea-spin{ to{ transform:rotate(360deg); } }

/* 우: 탭 + 프로필 */
.serea-doctors__tabs{ display:flex; align-items:center; gap:12px; margin-bottom:60px; }
.serea-doctors__tablist{ display:flex; flex-wrap:wrap; gap:12px; }
/* 원장 이전/다음 화살표 (모바일 캐러셀 전용, 데스크톱 숨김) */
.serea-doctab-nav{ display:none; align-items:center; justify-content:center; width:16px; height:32px; background:transparent; border:0; padding:0; cursor:pointer; flex-shrink:0; }
.serea-doctab-nav::before{ content:""; width:13px; height:13px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; }
.serea-doctab-nav--prev::before{ transform:rotate(135deg); margin-left:4px; }
.serea-doctab-nav--next::before{ transform:rotate(-45deg); margin-right:4px; }
.serea-doctab{
  display:flex; align-items:center; gap:12px; padding:8px 20px 8px 8px; border-radius:999px;
  background:rgba(174,174,174,.2); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid transparent; cursor:pointer; transition:border-color .25s var(--serea-ease), background .25s var(--serea-ease);
}
.serea-doctab__ava{ width:36px; height:36px; border-radius:50%; overflow:hidden; background:#2a3a52; flex-shrink:0; }
.serea-doctab__ava img{ width:100%; height:100%; object-fit:cover; }
.serea-doctab__name{ font-size:15px; font-weight:500; color:rgba(255,255,255,.7); white-space:nowrap; }
.serea-doctab.is-active{ border-color:#fff; }
.serea-doctab.is-active .serea-doctab__name{ color:#fff; }

.serea-docpanel{ display:none; }
.serea-docpanel.is-active{ display:block; }
.serea-docpanel__copy{ border-bottom:1px solid rgba(255,255,255,.85); padding-bottom:30px; margin-bottom:30px; }
.serea-docpanel__namerow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.serea-docpanel__name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:50px; line-height:1.1; letter-spacing:-1px; text-transform:uppercase; color:#fff; margin:0; }
.serea-docpanel__badge{
  display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:999px;
  background:#4482c9; border:1px solid rgba(10,32,56,.15); color:#fff; font-size:18px; font-weight:500; letter-spacing:-.36px;
}
.serea-docpanel__sub{ margin:16px 0 0; font-size:17px; line-height:1.5; letter-spacing:.34px; color:#fff; }

.serea-cred{ margin-bottom:30px; }
.serea-cred__title{ font-size:17px; font-weight:500; letter-spacing:2.72px; text-transform:uppercase; color:#4482c9; margin:0 0 12px; }
.serea-cred__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.serea-cred__list li{ position:relative; padding-left:18px; font-size:16px; line-height:22px; color:#fff; }
.serea-cred__list li::before{ content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:#4482C9; }

.serea-doctors__tagline{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:45px; line-height:1.1; color:#fff; margin:44px 0 0; }

/* 원장 철학 팝업 (풀스크린 글래스) */
.serea-philo-popup{ background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(17.5px); backdrop-filter:blur(17.5px); padding:0; }
.serea-philo{ position:relative; width:100%; max-width:1960px; padding:70px 40px 90px; display:flex; flex-direction:column; align-items:center; gap:56px; max-height:100vh; overflow:auto; }
.serea-philo__row{ display:flex; gap:100px; align-items:flex-start; width:100%; justify-content:center; }
.serea-philo__media{ flex:0 1 892px; max-width:892px; }
.serea-philo__slider{ overflow:hidden; touch-action:pan-y; }
.serea-philo__slide{ width:436px; max-width:70vw; }
.serea-philo__slide img{ width:100%; height:auto; aspect-ratio:436/484; object-fit:cover; border-radius:15px; display:block; }
.serea-philo__dots{ display:flex; gap:10px; justify-content:center; margin:40px auto 0; }
.serea-philo__dots .swiper-pagination-bullet{ width:30px; height:3px; border-radius:50px; background:#ccc; opacity:1; margin:0; }
.serea-philo__dots .swiper-pagination-bullet-active{ background:#4482c9; }
.serea-philo__text{ flex:0 1 675px; color:#fff; }
.serea-philo__logo{ display:block; line-height:0; margin-bottom:20px; }
.serea-philo__logo img{ width:32px; height:53px; object-fit:contain; }
.serea-philo__title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:40px; line-height:1.1; letter-spacing:-.8px; text-transform:uppercase; color:#fff; margin:0 0 20px; }
.serea-philo__body{ font-size:17px; line-height:1.5; color:#fff; }

/* 원장/철학 반응형 */
@media (max-width: 1200px){
  .serea-doctors__inner{ grid-template-columns:400px 1fr; column-gap:70px; }
  .serea-doc-badge{ width:200px; height:200px; right:-40px; bottom:-70px; }
  .serea-doc-badge__ring text{ font-size:17px; letter-spacing:1.5px; }
  .serea-doc-badge__core{ width:88px; height:88px; }
  .serea-doc-badge__core img{ width:26px; height:43px; }
  .serea-docpanel__name{ font-size:40px; }
  .serea-doctors__tagline{ font-size:36px; }
}
@media (max-width: 900px){
  /* 단일 컬럼: 탭(선택) → 포트레이트 → 프로필 순으로 쌓기 */
  .serea-doctors__inner{ grid-template-columns:1fr; grid-template-areas:"tabs" "portrait" "panels"; row-gap:32px; column-gap:0; }
  .serea-doctors__left{ max-width:440px; margin:0 auto; width:100%; }
  .serea-doctors__tabs{ margin-bottom:0; }
  .serea-philo__row{ flex-direction:column; gap:32px; }
  .serea-philo__media{ max-width:100%; }
  .serea-philo__text{ flex:1 1 auto; }
}
@media (max-width: 768px){
  .serea-doctors{ padding:70px 0; }
  /* 원장 선택: [‹][활성 원장 pill][›] 캐러셀 (시안) */
  .serea-doctors__tabs{ justify-content:center; gap:14px; margin-bottom:0; }
  .serea-doctab-nav{ display:flex; }
  .serea-doctors__tablist{ flex:0 1 auto; }
  .serea-doctab{ display:none; }
  .serea-doctab.is-active{ display:flex; }
  .serea-doctab__name{ text-transform:uppercase; font-size:15px; }
  /* 시안(모바일): 배지 150 · 코어 65 · 로고 19×32 */
  .serea-doc-badge{ width:150px; height:150px; right:-30px; bottom:-45px; }
  .serea-doc-badge__core{ width:65px; height:65px; }
  .serea-doc-badge__core img{ width:19px; height:32px; }
  .serea-doc-badge__ring text{ font-size:13px; letter-spacing:1px; }
  .serea-docpanel__name{ font-size:28px; letter-spacing:-.56px; }
  .serea-docpanel__badge{ height:auto; font-size:13px; font-weight:500; letter-spacing:-.26px; padding:8px 15px; }
  .serea-docpanel__sub{ font-size:15px; line-height:1.4; letter-spacing:.3px; }
  .serea-doctors__tagline{ font-size:26px; }
  /* 원장 철학 팝업 (시안: 세로 스택 — 로고→타이틀→본문→이미지→도트→닫기) */
  .serea-philo{ padding:80px 20px; gap:40px; justify-content:flex-start; }
  .serea-philo__row{ flex-direction:column; gap:30px; align-items:flex-start; }
  .serea-philo__text{ order:1; flex:none; display:flex; flex-direction:column; gap:16px; }
  .serea-philo__media{ order:2; flex:none; width:100%; max-width:100%; }
  .serea-philo__logo{ margin:0; }
  .serea-philo__logo img{ width:25px; height:41px; }
  .serea-philo__title{ font-size:30px; line-height:1.1; letter-spacing:-.6px; margin:0; }
  .serea-philo__body{ font-size:14px; line-height:1.5; }
  .serea-philo__slide{ width:186px; max-width:none; }
  .serea-philo__slide img{ aspect-ratio:186/207; border-radius:6px; }
  .serea-philo__dots{ margin:17px 0 0; }
  .serea-philo__dots .swiper-pagination-bullet{ width:30px; }
  .serea-modal-close{ width:40px; height:40px; }
  .serea-modal-close img{ width:18px; height:18px; }
  .serea-philo__body br.none {display:none}
}

/* =========================================================
   GALLERY (다크 · 가장자리 페이드 · 레이어 팝업)
   ========================================================= */
.serea-gallery{ background:#151921; padding:20px 0 110px; }
.serea-gallery__title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:44px; color:#fff; text-align:center; margin:0 0 40px; text-transform:uppercase; }
.serea-gallery__stage{ position:relative; }
.serea-gallery__slider{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.serea-gslide{ width:300px; }
.serea-gcard{ display:block; width:300px; height:200px; border:0; padding:0; border-radius:10px; overflow:hidden; cursor:pointer; background:#16273b; }
.serea-gcard img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--serea-ease); }
.serea-gcard:hover img{ transform:scale(1.05); }
/* 공용 스와이프 화살표 (갤러리 · 갤러리팝업 · 영상 동일 디자인) */
.serea-gallery__nav, .serea-gpop-nav, .serea-video__nav{
  position:absolute; top:50%; z-index:6; width:50px; height:50px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(174,174,174,.2); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px);
  box-shadow:0 4px 20px rgba(13,41,107,.12); display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--serea-ease);
}
.serea-gallery__nav:hover, .serea-gpop-nav:hover, .serea-video__nav:hover{ background:rgba(174,174,174,.4); }
.serea-gallery__nav img, .serea-gpop-nav img, .serea-video__nav img{ width:11px; height:18px; display:block; filter:brightness(0) invert(1); }
.serea-gallery__nav.swiper-button-disabled, .serea-gpop-nav.swiper-button-disabled, .serea-video__nav.swiper-button-disabled,
.serea-gallery__nav.swiper-button-lock, .serea-gpop-nav.swiper-button-lock, .serea-video__nav.swiper-button-lock{ opacity:0; pointer-events:none; }
.serea-gallery__nav--prev{ left:clamp(12px,3vw,60px); transform:translateY(-50%) rotate(180deg); }
.serea-gallery__nav--next{ right:clamp(12px,3vw,60px); transform:translateY(-50%); }

/* 밝은 섹션용 캐러셀 화살표 (Treatments · Equipments · Space) — 시안: 연회색 원 + 파란 셰브론 */
.serea-treat__stage, .serea-equip__stage{ position:relative; }
.serea-cnav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:#ededed; display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--serea-ease), opacity .2s var(--serea-ease);
}
.serea-cnav:hover{ background:#e2e2e2; }
.serea-cnav::before{ content:""; width:9px; height:9px; border-right:2px solid var(--serea-blue); border-bottom:2px solid var(--serea-blue); }
.serea-cnav--prev{ left:clamp(4px,2vw,20px); }
.serea-cnav--prev::before{ transform:rotate(135deg); margin-left:4px; }
.serea-cnav--next{ right:clamp(4px,2vw,20px); }
.serea-cnav--next::before{ transform:rotate(-45deg); margin-right:4px; }
.serea-cnav.swiper-button-disabled{ opacity:.3; cursor:default; }
.serea-cnav.swiper-button-lock{ display:none; }

/* 갤러리 레이어 팝업 */
.serea-gallery-popup__inner{ position:relative; width:100%; max-width:1040px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.serea-gallery-popup__slider{ position:relative; width:100%; border-radius:10px; overflow:hidden; touch-action:pan-y; }
.serea-gpop-slide{ display:flex; align-items:center; justify-content:center; }
.serea-gpop-slide img{ width:auto; max-width:100%; height:auto; max-height:85vh; margin:0 auto; display:block; border-radius:10px; }
.serea-gpop-nav--prev{ left:14px; transform:translateY(-50%) rotate(180deg); }
.serea-gpop-nav--next{ right:14px; transform:translateY(-50%); }

/* =========================================================
   VIDEO
   ========================================================= */
.serea-video{ background:#fff; }
.serea-video__title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:52px; color:#111; text-align:center; margin:0 0 40px; text-transform:uppercase; }
.serea-video__stage{ position:relative; }
.serea-video__wrap{ position:relative; width:100%; max-width:1200px; margin:0 auto; }
.serea-video__slider{ overflow:hidden; border-radius:15px; }
.serea-video__nav--prev{ left:16px; transform:translateY(-50%) rotate(180deg); }
.serea-video__nav--next{ right:16px; transform:translateY(-50%); }
.serea-vframe{ position:relative; width:100%; aspect-ratio:16/9; border-radius:15px; overflow:hidden; background:#000; }
.serea-vfacade{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.serea-vfacade::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); transition:background .3s var(--serea-ease); }
.serea-vfacade:hover::after{ background:rgba(0,0,0,.28); }
.serea-vplay{ position:relative; z-index:2; width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 8px 30px rgba(0,0,0,.25); transition:transform .3s var(--serea-ease); }
.serea-vfacade:hover .serea-vplay{ transform:scale(1.08); }
.serea-vplay::before{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:13px 0 13px 21px; border-color:transparent transparent transparent #17314d; }
.serea-vvideo, .serea-vframe iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.serea-vslide__title{ text-align:center; margin:16px 0 0; font-size:17px; color:#333; }

/* =========================================================
   SEREA CLINIC SPACE
   ========================================================= */
.serea-space{ background:#fff; background-image:linear-gradient(180deg, rgba(240,239,239,.6) 0%, rgba(137,164,199,.6) 50%, rgba(240,239,239,.6) 100%); }
.serea-space__head{ text-align:center; margin-bottom:50px; }
.serea-space__title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:65px; line-height:1.1; letter-spacing:-1.3px; text-transform:uppercase; color:#111; margin:0 0 8px; }
.serea-space__sub{ font-size:17px; line-height:1.5; letter-spacing:.34px; color:#111; margin:0; }
.serea-space__stage{ position:relative; }
.serea-space__slider{ overflow:hidden; }
.serea-spacecard{ width:930px; max-width:74vw; }
.serea-spacecard img{ width:100%; aspect-ratio:930/608; object-fit:cover; border-radius:15px; display:block; }

@media (max-width: 1024px){
  .serea-video__title{ font-size:40px; }
  .serea-space__title{ font-size:44px; }
}
@media (max-width: 768px){
  .serea-gallery{ padding:10px 0 64px; }
  .serea-gslide{ width:300px; }
  .serea-gcard{ width:300px; height:200px; }
  .serea-gallery__nav{ width:42px; height:42px; }
  .serea-section.serea-video{ padding-left:20px; padding-right:20px; }
  .serea-video__title{ font-size:28px; }
  .serea-space__title{ font-size:30px; line-height:1.1; letter-spacing:-.6px; }
  .serea-space__sub{ font-size:15px; line-height:1.4; letter-spacing:.3px; }
  /* 시안: 1개씩(양옆 20px 여백) */
  .serea-spacecard{ width:calc(100vw - 40px); max-width:none; }
}

/* =========================================================
   LOCATION & VISIT
   ========================================================= */
.serea-location{ background:#fff; }
.serea-location__grid{ display:grid; grid-template-columns:minmax(0,792px) 1fr; gap:40px; align-items:stretch; }

.serea-location__map{ position:relative; }
.serea-location__mapframe{ position:relative; width:100%; aspect-ratio:792/636; border-radius:15px; overflow:hidden; background:#dfe6ee; }
.serea-location__mapframe img, .serea-location__mapframe iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.serea-location__addr{
  position:absolute; left:18px; right:18px; bottom:53px;
  background:rgba(210,210,210,.2); -webkit-backdrop-filter:blur(17.5px); backdrop-filter:blur(17.5px);
  border:1px solid rgba(255,255,255,.4); border-radius:18px; padding:22px 20px;
  display:flex; flex-direction:column; gap:16px; box-shadow:0 10px 30px rgba(13,41,107,.1);
}
.serea-location__addrrow{ display:flex; align-items:flex-end; gap:12px; }
.serea-location__addrtext{ flex:1; margin:0; font-size:15px; line-height:1.4; color:#111; }
.serea-location__copy{
  flex-shrink:0; display:inline-flex; align-items:center; gap:3px; height:28px; padding:0 16px;
  background:#4482c9; color:#fff; border:0; border-radius:999px; font-size:13px; line-height:1; cursor:pointer; transition:background .2s var(--serea-ease);
}
.serea-location__copy svg{ width:15px; height:15px; display:block; }
.serea-location__copy:hover{ background:#3670b4; }
.serea-location__copy.is-copied{ background:#2e9e5b; }
.serea-location__mapbtns{ display:flex; flex-wrap:wrap; gap:12px; }
.serea-locbtn{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 20px; border-radius:999px; border:1px solid; font-size:15px; font-weight:600; text-decoration:none; background:transparent; transition:transform .2s var(--serea-ease); }
.serea-locbtn:hover{ transform:translateY(-2px); }
.serea-locbtn__ic{ width:24px; height:24px; object-fit:contain; display:block; flex-shrink:0; }
.serea-locbtn--naver{ border-color:#00c300; color:#00c300; }
.serea-locbtn--kakao{ border-color:#381e1e; color:#381e1e; }
.serea-locbtn--google{ border-color:#1976d2; color:#1976d2; }

.serea-location__info{
  border:1px solid rgba(255,255,255,.9); border-radius:15px; padding:44px 60px;
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; justify-content:center;
}
.serea-location__title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:45px; line-height:1.1; letter-spacing:-.9px; text-transform:uppercase; color:#111; margin:0 0 30px; }
.serea-locblock{ padding:26px 0; border-top:1px solid #ccc; }
/*.serea-locblock:first-of-type{ border-top:0;  }*/
.serea-locblock__head{ font-size:17px; font-weight:500; letter-spacing:2.72px; text-transform:uppercase; color:#4482c9; margin:0 0 12px; }
.serea-locblock__text{ margin:0; font-size:17px; line-height:1.5; color:#111; letter-spacing:-.17px; }
.serea-locblock__note{ margin:8px 0 0; font-size:15px; font-weight:300; line-height:1.5; color:#111; }
.serea-lochours{ display:flex; flex-direction:column; gap:4px; }
.serea-lochours__row{ display:flex; gap:4px; font-size:17px; letter-spacing:-.17px; color:#111; }
.serea-lochours__row .lbl{ width:120px; flex-shrink:0; }
.serea-lochours__row .val{ font-weight:500; }
.serea-lochours__row .val--em{ font-weight:600; }
.serea-locsubway{ display:flex; align-items:center; gap:8px; }
.serea-locsubway__line{ background:#ff8d30; color:#fff; font-weight:700; font-size:16px; padding:1px 6px; border-radius:5px; }
.serea-locsubway__station{ font-size:17px; color:#111; }

@media (max-width: 1024px){
  .serea-location__grid{ grid-template-columns:1fr; gap:28px; }
  .serea-location__title{ font-size:36px; }
  .serea-location__info{ padding:36px 32px; }
}
@media (max-width: 768px){
  .serea-location__addr{ position:static; left:auto; right:auto; bottom:auto; margin-top:14px; }
  .serea-location__addrrow{ flex-direction:column; align-items:flex-start; gap:12px; }
  .serea-location__title{ font-size:30px; }
  /* 시안: 지도버튼 42px/15px 유지, naver+kakao 한 줄 · google 다음 줄 */
  .serea-locbtn{ height:42px; font-size:15px; padding:0 20px; }
  .serea-location__info{ padding:30px 0px; }
}

/* =========================================================
   스크롤 등장 애니메이션
   ========================================================= */
[data-reveal]{
  opacity:0; will-change: transform, opacity;
  transition: opacity 1.5s var(--serea-ease), transform 1.7s var(--serea-ease);
}
[data-reveal="up"]{    transform: translateY(48px); }
[data-reveal="down"]{  transform: translateY(-48px); }
[data-reveal="left"]{  transform: translateX(48px); }
[data-reveal="right"]{ transform: translateX(-48px); }
[data-reveal="fade"]{  transform: none; }
[data-reveal="zoom"]{  transform: scale(.94); }
[data-reveal].is-in{ opacity:1; transform: none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 1280px){
  .serea-h2{ font-size:38px; }
  .serea-nav{ gap:28px; }
  .serea-nav a{ font-size:16px; }
}
@media (max-width: 1024px){
  :root{ --serea-pad: 28px; --serea-header-h: 62px; }
  .serea-section{ padding: 90px 0; }
  .serea-h2{ font-size:32px; }
  .serea-nav{ gap:20px; }
}
@media (max-width: 768px){
  :root{ --serea-pad: 20px; --serea-header-h: 56px; }
  .serea-logo img{ height:30px; }
  .serea-section{ padding: 64px 0; }
  .serea-h2{ font-size:26px; }
  .serea-lead{ font-size:15px; }
  .serea-eyebrow{ font-size:13px; }

  /* 데스크톱 nav / lang 숨기고 토글 노출 */
  .serea-nav, .serea-lang{ display:none; }
  .serea-nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; border:0; background:transparent; cursor:pointer; padding:8px;
  }
  .serea-nav-toggle span{ display:block; height:2px; width:100%; background:var(--serea-ink); border-radius:2px; transition:.3s var(--serea-ease); }

  .serea-footer{ padding:44px 0 40px; }
  .serea-footer__tel{ font-size:22px; }
  .serea-footer__qr{ width:64px; height:64px; }
  .serea-footer__qr img{ width:52px; height:52px; }
  .serea-footer__mid{ flex-direction:column; align-items:flex-start; gap:18px; }
  .serea-bizinfo{ gap:8px; }
  .serea-bizinfo .sep{ display:none; }
}