/* =========================================================
  0) TOKENS / RESET
========================================================= */
:root{
  --c-green:#22492E;
  --c-ivory:#F4F0E2;
  --c-brown:#A98E6C;

  --text:#1b1b1b;
  --muted:#5a5a5a;

  --container:1200px;
  --container-hero:1920px;
  --radius:18px;
  --shadow:0 12px 28px rgba(0,0,0,.08);

  --header-h:85px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0; width: 100%;
  }

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body{
  font-family: "Pretendard", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
  word-break:keep-all; overflow-wrap:break-word;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* =========================================================
  1) LAYOUT HELPERS
========================================================= */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section{padding:96px 0}
.section__head{margin-bottom:28px}
.section__head--center{text-align:center}
.section__eyebrow{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--c-brown);
  text-transform:uppercase;
  font-weight: 500;

}

.section__title{
  margin:0;
  font-size:64px;
  font-weight:800;
  color:var(--c-green);
}
.section__sub{
  margin:10px 0 0;
  color:var(--muted);
}

.card{
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}


/* =========================
Scrollbar Custom
   ========================= */
/* Firefox */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--c-brown) rgba(244,240,226,0.9);
}

::-webkit-scrollbar{ width: 12px; height: 12px; }

::-webkit-scrollbar-track{
  background: linear-gradient(180deg, rgba(244,240,226,1), rgba(255,255,255,1));
  border-left: 1px solid rgba(34,73,46,0.14);
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(169,142,108,0.95), rgba(34,73,46,0.75));
  border-radius: 999px;
  border: 3px solid rgba(244,240,226,0.95);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(169,142,108,1), rgba(34,73,46,0.95));
}

::-webkit-scrollbar-thumb:active{
  background: rgba(34,73,46,1);
}

/* =========================================================
  2) HEADER (Desktop)
========================================================= *//* =========================================================
  HEADER (no design change)
========================================================= */
.header{
  position: sticky;
  top: 0;
  z-index: 5000;
  height: var(--header-h);

  background: rgba(244,240,226,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(34,73,46,.12);
}

.header__inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo{
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo__img{
  height: 48px;
  width: auto;
  display: block;
}

.gnb{
  display: flex;
  gap: 40px;
  align-items: center;
  margin-left: 50px;
}
.gnb a{
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 12px 10px;
  color: rgba(34,73,46,.9);
}
.gnb a:hover{ color: var(--c-brown); }


/* =========================================================
  HERO (base)
========================================================= */
.hero--swiper{
  position: relative;
  padding: 0;
}

/* ✅ 풀스크린: 헤더 제외 */
.heroSwiper,
.heroSlide{
  height: calc(100vh - var(--header-h));
  min-height: 560px;
  max-height: 820px;
}

.heroSlide{
  position: relative;
  overflow: hidden;
}

.heroSlide__bg{
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  transform: scale(1.02);
}

.heroFrame{
  width: min(var(--container-hero), 100%);
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.heroSlide__copy{
  position: absolute;
  top: 34vh;
  right: 120px;
  width: 680px;

  color: #fff;
  text-align: right;
  word-break: keep-all;
}

.hero__title{
  margin: 0 0 14px;
  font-weight: 700;
  line-height: 1.15;
  font-size: 64px;
  letter-spacing: -0.02em;
}

.hero__line{
  display: block;
  white-space: nowrap;
}

.hero__desc{
  margin: 0;
  font-size: 22px;
  line-height: 1.55;
  opacity: .92;
  font-weight: 500;
}

.hero__desc--gap{ margin-top: 14px; }
.pc-br{ display: inline; }

/* ✅ 커스텀 화살표 (img 버전) */
.heroSlide__arrow{
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);

  width: 52px;
  height: 52px;
  border-radius: 999px;

  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);

  cursor: pointer;
  display: grid;
  place-items: center;

  opacity: .95;
  z-index: 5;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease,
    box-shadow .18s ease;
}

.heroSlide__arrow span{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.heroSlide__arrow img{
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;

  transform: translateX(1px);
  opacity: .95;

  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
  filter: brightness(0) invert(1);
}

.heroSlide__arrow:hover{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  opacity: 1;
  transform: translateY(-50%) scale(1.03);
}
.heroSlide__arrow:hover img{
  opacity: 1;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.28));
  filter: brightness(0) invert(1);
}

.heroSlide__arrow:active{
  transform: translateY(-50%) scale(.98);
}

.heroSlide__arrow:focus-visible{
  outline: 2px solid rgba(244,240,226,.85);
  outline-offset: 3px;
}

/* pagination */
.heroSwiper .swiper-pagination{ bottom: 18px; }
.heroSwiper .swiper-pagination-bullet{
  background: #fff;
  opacity: .35;
}
.heroSwiper .swiper-pagination-bullet-active{ opacity: 1; }


/* =========================================================
  BUTTON (as-is)
========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
}
.btn--primary{ background: var(--c-brown); color:#fff; }
.btn--ghost{ background: transparent; border-color: rgba(255,255,255,.55); color:#fff; }

.hero__meta{ margin-top: 18px; display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 13px;
}


/* =========================================================
  MOBILE NAV (Drawer) - no design change
========================================================= */
.mNavBtn{
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 7001;
}

.mNavBtn__line{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-green);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}

.mNav{
  position: fixed;
  inset: 0;
  z-index: 7000;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  overflow: hidden;
}
.mNav.is-open{
  opacity: 1;
  pointer-events: auto;
}

.mNav__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .18s ease;
}
.mNav.is-open .mNav__backdrop{ opacity: 1; }

.mNav__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 88vw);

  background: var(--c-ivory);
  padding: 18px;

  transform: translateX(110%);
  transition: transform .22s ease;
  will-change: transform;

  display: flex;
  flex-direction: column;
  gap: 14px;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mNav.is-open .mNav__panel{ transform: translateX(0); }

.mNav__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mNav__title{
  font-weight: 900;
  color: var(--c-green);
  letter-spacing: .06em;
}

.mNav__close{
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.mNav__links{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mNav__link{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(34,73,46,.06);
  color: rgba(34,73,46,.92);
  font-weight: 800;
}
.mNav__link:active{ transform: scale(.99); }

.mNav__cta{
  margin-top: auto;
  height: 48px;
  border-radius: 14px;
  background: var(--c-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

html.is-mnav-open,
body.is-mnav-open{ overflow: hidden; }


/* =========================================================
  RESPONSIVE
========================================================= */

/* TABLET & BELOW */
@media (max-width: 1024px){
  :root{
    --container: 920px;
    --header-h: 72px;
  }

  .gnb{ display: none; }
  .mNavBtn{ display: block; }

  /* HERO */
  .heroSwiper,
  .heroSlide{
    height: calc(clamp(600px, 90vh, 800px) - var(--header-h));
  }

  .heroSlide__copy{
    top: 0;
    left: auto;
    right: 28px;

    width: min(560px, 56%);
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: right;
  }

  .hero__title{
    font-size: 46px;
    line-height: 1.12;
    margin-bottom: 16px;
  }

  .hero__line{ white-space: normal; }

  .hero__desc{
    font-size: 20px;
    line-height: 1.35;
  }

   .heroSlide__arrow{
    display: none;
  }

  .heroSwiper .swiper-pagination{ bottom: 14px; }
}

/* MOBILE (<=480) */
@media (max-width: 480px){
  /* HERO: 모바일 공통 */
  .heroSwiper,
  .heroSlide{
        height: calc(clamp(480px, 84vh, 680px) - var(--header-h));
  }

  .heroSlide__copy{
    right: 16px;
    width: calc(100% - 32px);

    text-align: center;
    justify-content: flex-end;
    padding-bottom: 84px;
  }

  .hero__title{
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 14px;
  }

  .hero__desc{
    font-size: 16px;
    line-height: 1.45;
  }

 .heroSlide__arrow{
    display: none;
  }

  .heroSwiper .swiper-pagination{ bottom: 10px; }

  .btn{ height: 44px; padding: 0 16px; }
}

/* ✅ iPhone 12 Pro(390px) 세로 길이 줄이기: 다른 기기에서 줄인 정도로 맞춤 */
@media (max-width: 390px){
 

  .heroSlide__copy{
    padding-bottom: 72px; /* 페이지네이션 공간 약간 줄임 */
  }

  .hero__title{
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .hero__desc{
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
  }

  .heroSwiper .swiper-pagination{ bottom: 8px; }
}


/* =========================================================
  4) ABOUT (병원 소개) 
========================================================= */


/* 중앙 헤드 정렬 */
.aboutHead{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 90px;
}


/* 타이틀 */
.aboutHead__title{

  letter-spacing: -0.03em;
  color: var(--c-green);
  margin: 0 0 28px;
    font-size: 64px;
    font-weight: 800;
}

/* 슬로건 */
.aboutHead__lead{
  font-size: 20px;
  font-weight: 700;
  color: rgba(34,73,46,.9);
}

.aboutHead__sub{
  font-size: 18px;
  font-weight: 800;
  color: var(--c-green);
}

/* 설명 */
.aboutHead__desc{
  font-size: 15px;
  line-height: 1.8;
  color: rgba(27,27,27,.75);
}


.about .container{
  position: relative;
  z-index: 1;
}

.aboutTimeline{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 0 10px;
}

/* 중앙 라인 */
.aboutTimeline__line{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 2px; /* ✅ 최종값(중복 제거) */
  background: rgba(56, 86, 73, 0.55); /* ✅ 최종값(중복 제거) */
}

/* =========================================================
  ITEM
========================================================= */

.about{
  position: relative;
  overflow: hidden;
  background: url("../img/about-bg.png") center/cover no-repeat;
}
.about::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.about .container{
  position: relative;
  z-index: 1;
}

/* timeline wrapper */
.aboutTimeline{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 0 10px;
}

/* 중앙 세로 라인 */
.aboutTimeline__line{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(56, 86, 73, 0.55);
}

/* =========================================================
  ITEM (Desktop)
========================================================= */
.aboutItem{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  margin: 80px 0;
}

/* 중앙 라인에서 좌/우로 뻗는 가로선 (Desktop용) */
.aboutItem::before{
  content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  height: 2px;
  width: 70px;
  background: rgba(56, 86, 73, 0.55);
  transform: translateY(-50%);
}
.aboutItem--left::before{ transform: translate(-100%, -50%); }
.aboutItem--right::before{ transform: translate(0, -50%); }

/* dot (Desktop: 텍스트 상단 중앙) */
.aboutItem__dot{
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  background: #2f5f4f;
  margin: 0 auto 14px;
  box-shadow: 0 0 0 3px rgba(47,95,79,.12);
  animation: dotPulse 1.6s ease-in-out infinite;
}

/* text col */
.aboutItem__col--text{ text-align: center; }


.aboutItem__title{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: #1e2b25;
}

.aboutItem__desc{
  font-size: 17px;
  line-height: 1.75;
  color: #45524b;
}
.aboutItem__desc--stack{
  display: flex;
  flex-direction: column;
}
.aboutItem__desc--stack .m-line{ display:block; }
.aboutItem__desc--stack .m-line--end{ margin-top: 2px; }

/* media card */
.aboutItem__media{
  width: 100%;
  max-width: 520px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.274);
}
.aboutItem--left .aboutItem__media{ justify-self: end; }
.aboutItem--right .aboutItem__media{ justify-self: start; }

.aboutItem__media img{
  display:block;
  width:100%;
  height:210px;
  object-fit: cover;
}

/* =========================================================
  REVEAL
========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms ease, transform 800ms ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.aboutItem--left.reveal{ transform: translate(-10px, 18px); }
.aboutItem--right.reveal{ transform: translate(10px, 18px); }
.aboutItem--left.reveal.is-visible,
.aboutItem--right.reveal.is-visible{
  transform: translate(0, 0);
}

/* =========================================================
  RESPONSIVE (<=1024px)
========================================================= */

@keyframes dotPulse{
  0%{
    box-shadow: 0 0 0 2px rgba(47,95,79,.10);
  }
  55%{
    box-shadow: 0 0 0 9px rgba(47,95,79,.18);
  }
  100%{
    box-shadow: 0 0 0 2px rgba(47,95,79,.10);
  }
}


@media (max-width: 1024px){

  .aboutTimeline{
    padding: 40px 0 0;
  }

  .aboutTimeline__line{
    left: 18px;
    transform: none;
  }

  .aboutItem{
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 44px 0;
    padding-left: 44px;
  }

  .aboutItem__col--text{
    max-width: 100%;
    justify-self: start;
    text-align: left;
    padding-left: 28px;   /* 텍스트 시작선 */
    min-height: auto;
    position: relative;
  }

  .aboutItem__media{
    max-width: 100%;
    justify-self: start;
  }

  .aboutItem__media img{
    height: 200px;
  }

  /* ✅ Desktop 가로선 제거 */
  .aboutItem::before{ display:none; }

  .aboutItem__dot{
    position: absolute;
    top: 0;
    left: 0; /* aboutItem__col--text 기준 */
    transform: translate(-50%, -120%);
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #2f5f4f;
    box-shadow: 0 0 0 3px rgba(47,95,79,.12);
    margin: 0;
    z-index: 2;
     animation: dotPulse 1.6s ease-in-out infinite;
  }



  /* =====================================================
    IMAGE 중앙 가로선 (세로라인까지)
  ====================================================== */
  .aboutItem__col--media{
    position: relative;
  }

  .aboutItem__col--media::before{
    content:"";
    position:absolute;
    left: -65px;               /* (44px padding-left - 18px line) = 26px */
    top: 50%;
    width: 32px;
    height: 2px;
    background: rgba(56, 86, 73, 0.55);
    transform: translateY(-50%);
  }
}

/* =========================================================
  MOBILE (<=480px)
========================================================= */
@media (max-width: 480px){

  .aboutItem__title{
    font-size: 19px;
    text-align: left;
  }

  .aboutItem__desc{
    font-size: 14px;
  }

  .aboutItem__desc--stack{
    align-items: flex-start;
    text-align: left;
  }

  .aboutItem__media img{
    height: 180px;
  }
}

/* =========================================================
  5) DOCTORS 
========================================================= */

/* ---------- Base ---------- */
.doctors{
  position: relative;
  padding: 96px 0 0;
  overflow: hidden;
  background: url("../img/se2_bg.png") no-repeat center/contain;
}

.doctors::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top: 320px;
  bottom: 0;
  z-index: 0;
}

.doctorsFrame{
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 0 96px;
  z-index: 1;
}

.doctorsSwiper{
  position: relative;
  width: 100%;
  padding-top: 10px;
}

.doctorsSwiper .swiper-wrapper,
.doctorsSwiper .swiper-slide{
  background: transparent;
}
.doctorsSwiper .swiper-slide{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ---------- Card ---------- */
.dcard{
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: hsla(0,0%,100%,0.911);
}

.dcard__top{
  padding: 46px 56px 28px;
  text-align: center;
}

.dcard__dept{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: rgba(34,73,46,.9);
  letter-spacing: -0.02em;
}

.dcard__name{
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  color: var(--c-green);
  letter-spacing: -0.03em;
}
.dcard__name strong{ font-weight: 900; }

/* Grid */
.dcard__grid{
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 44px;
  align-items: start;
  padding: 38px 56px 60px;
}

/* Photo (기본 모양 유지) */
.dcard__photo{
  width: 360px;
  max-width: 100%;
  height: 400px;
  overflow: hidden;
  background:#fff;
  border-radius: 0 180px 0 0;
  box-shadow: 0 14px 26px rgba(0,0,0,.12);
}

.dcard__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.dcard__photo img{
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Reverse */
.dcard--reverse .dcard__grid{
  grid-template-columns: 1fr 440px;
}
.dcard--reverse .dcard__photo{
  order: 2;
  border-radius: 180px 0 0 0;
}
.dcard--reverse .dcard__spec{
  order: 1;
  justify-self: end;
  text-align: right;
}

/* Spec */
.dcard__spec{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.dcard__labelMark{
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(34,73,46,.92);
  background: rgba(34,73,46,.08);
  border: 1px solid rgba(34,73,46,.12);
}
@media (max-width:600px){
  .dcard__labelMark{ display:none; }
}
.dcard__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.dcard__list li{
  font-size: 13px;
  line-height: 1.75;
  color: rgba(27,27,27,.85);
  padding-left: 12px;
  border-left: 2px solid rgba(34,73,46,.18);
}

.dcard--reverse .dcard__list li{
  border-left: 0;
  padding-left: 0;
  padding-right: 12px;
  border-right: 2px solid rgba(34,73,46,.18);
}

/* Pagination */
.doctorsSwiper .swiper-pagination{
  position: static;
  margin-top: 18px;
  text-align:center;
}
.doctorsSwiper .swiper-pagination-bullet{
  background: rgba(34,73,46,.55);
  opacity: .25;
}
.doctorsSwiper .swiper-pagination-bullet-active{
  opacity: 1;
}

/* Arrows */
.doctorsNext,
.doctorsPrev{
  position: absolute;
  top: 56%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  z-index: 5;
  background: rgba(255, 255, 255, 0);
}
.doctorsNext{ right: 140px; }
.doctorsPrev{ left: 140px; }
.doctorsNext:hover,
.doctorsPrev:hover{ background: rgb(255, 255, 255); }

/* Tabs: 기본은 숨김(=데스크탑 그대로) */
.dcard__tabs{ display: none; }
@media (min-width: 601px){
  .doctorsPrev.is-hidden,
  .doctorsNext.is-hidden{
    opacity: 0;
    pointer-events: none;
  }
}
/* =========================================================
   TABLET (<=1024px)
========================================================= */
@media (max-width:1024px){
  .doctors::after{ top:280px; }

  .dcard__top{ padding:34px 28px 18px; }
  .dcard__dept{ font-size:16px; }
  .dcard__name{ font-size:26px; }

  .dcard__grid{
    grid-template-columns:360px 1fr;
    gap:28px;
    padding:28px 28px 40px;
  }

  /* ✅ 태블릿은 “데스크탑처럼” 유지 */
  .doctorsNext{ right:24px; }
  .doctorsPrev{ left:24px; }
}

/* =========================================================
   MOBILE (<=600px)
========================================================= */
@media (max-width:600px){

  /* 섹션 배경이 전체를 감싸도록 */
  .doctors{
    background: url("../img/se2_bg.png") no-repeat center / cover;
  }

  /* swiper: 카드 느낌(양옆 peek + 활성 강조) */
  .doctorsSwiper{ padding: 8px 0 0; }
  .doctorsSwiper .swiper-wrapper{ align-items: stretch; }
  .doctorsSwiper .swiper-slide{
    height: auto;
    display: flex;
    justify-content: center;
    transition: transform .22s ease, opacity .22s ease;
    opacity: .88;
    transform: scale(.985);
  }
  .doctorsSwiper .swiper-slide-active{
    opacity: 1;
    transform: scale(1);
  }

  /* 카드 폭을 더 넓게(=텍스트 가로 더 길게) */
  .dcard{
    width: calc(100% - 24px);    /* 기존 44px → 24px */
    background: rgba(255,255,255,.92);
    box-shadow:
      0 12px 28px rgba(0,0,0,.10),
      0 2px 8px rgba(0,0,0,.04);
    border: 1px solid rgba(34,73,46,.10);
    --photo-w: min(280px, 80vw);

  }

    .dcard::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:36px;
    pointer-events:none;
  }


  .doctorsPrev,
  .doctorsNext{ display:none  }


  .dcard__grid,
  .dcard--reverse .dcard__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }


  .dcard__photo{ order: 1; margin: 0 auto;  width: var(--photo-w); }
  .dcard__spec{ order: 2; }


  .dcard--reverse .dcard__photo{ order: 1; }
  .dcard--reverse .dcard__spec{
    order: 2;
    justify-self: stretch;
    text-align: left;

  }


  .dcard--reverse .dcard__list li{
    border-right: 0;
    padding-right: 0;
    padding-left: 12px;
    border-left: 2px solid rgba(34,73,46,.18);
  }


  .dcard__top{ padding: 26px 16px 12px; }
  .dcard__grid{ padding: 16px 16px 22px; }


  .dcard__photo{
    width: min(250px, 72vw);
    height: clamp(230px, 40vh, 290px);
    border-radius: 0 180px 0 0; 
    box-shadow: 0 14px 26px rgba(0,0,0,.12);
  }
  .dcard--reverse .dcard__photo{
    border-radius: 180px 0 0 0;  
  }
  .dcard__photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }


  .dcard__spec{
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
    width: var(--photo-w);
    margin: 0 auto;
  }

  .dcard__tabs{
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 12px;
  }

  .dcard__tab{
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(34,73,46,.18);
    background: rgba(255,255,255,.7);
    color: rgba(34,73,46,.92);
    font-weight: 900;
    cursor: pointer;
  }
  .dcard__tab.is-active{
    background: rgba(34,73,46,.92);
    border-color: rgba(34,73,46,.92);
    color: #fff;
  }


  .dcard__spec [data-panel]{
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  .dcard__list li{
    padding-left: 10px;  
  }

  .dcard__spec [data-panel]{
    max-height: 260px;  
    overflow: auto;
  }

  .dcard__spec [data-panel]::after{
    content:"";
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92));
    display: block;
    pointer-events: none;
  }


  .doctorsSwiper .swiper-pagination{ margin-top: 18px; }
  .doctorsSwiper .swiper-pagination-bullet{
    width: 7px; height: 7px; opacity: .22;
  }
  .doctorsSwiper .swiper-pagination-bullet-active{
    opacity: 1;
    transform: scale(1.18);
  }

  .doctorsFrame{ padding-bottom: 84px; }
}

/* =========================================================
   Mobile tab toggle
========================================================= */
@media (max-width:600px){
  /* 기본: cur만 보이게 */
  .dcard__spec [data-panel="prev"]{ display:none; }

  /* prev 탭 선택 시 */
  .dcard__spec.is-prev [data-panel="cur"]{ display:none; }
  .dcard__spec.is-prev [data-panel="prev"]{ display:block; }
}

/* =========================================================
6)  GREETING (인사말)
========================================================= */

.greeting{
  background:#fff;
  padding:110px 0;
}

.greeting__grid{
  display:grid;
  grid-template-columns:1fr 520px;
  gap:72px;
  align-items:center;
}

/* LEFT */
.greeting__text{
  position:relative;
  padding-left:28px;
  min-width:0;
}
.greeting__text::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:2px;
  height:72%;
  background:linear-gradient(to bottom, rgba(34,73,46,.35), rgba(34,73,46,0));
}

.greeting__eyebrow{
  margin:0 0 16px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--c-brown);
}
.greeting__title{
  margin:0;
  font-size:30px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--text);
}
.greeting__lead{
  margin:0 0 46px;
  font-size:28px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.03em;
  color:rgba(34,73,46,.92);
}

/* BODY */
.greeting__body{
  display:grid;
  gap:22px;
}
.greeting__body p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  letter-spacing:-.02em;
  color:rgba(27,27,27,.78);
  word-break:keep-all;
}

/* RIGHT IMAGE */
.greeting__media{
  position:relative;
  margin:0;
  width:100%;
  height:420px;
  border-radius:26px;
  overflow:hidden;
  transform:translateZ(0);
  box-shadow:0 22px 48px rgba(0,0,0,.12);
}
.greeting__media::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 30px 60px rgba(0,0,0,.12);
}
.greeting__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* =========================
   UNDERLINE ANIMATION ONLY
   (delay + slow)
========================= */
.greeting__body .u,
.greeting__body .uu{
  position: relative;
  display: inline-block;
  z-index: 0;
  isolation: isolate;
  padding: 0 .08em;
  font-weight: 800;
  color: rgba(34,73,46,.95);
}

.greeting__body .uu{
  font-weight: 900;
  font-size: 18px;
  color: rgba(34,73,46,.98);
}

/* underline layer */
.greeting__body .u::after,
.greeting__body .uu::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:.1em;
  height:.55em;
  border-radius:.35em;
  pointer-events:none;
  z-index:-1;

  /* 초기 상태 */
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;

  /* ✅ 핵심: 느리고 고급스러운 타이밍 */
  transition:
    transform 1.6s cubic-bezier(.22,.61,.36,1),
    opacity  .9s cubic-bezier(.22,.61,.36,1);

  /* ✅ 문장 뒤에 살짝 늦게 */
  transition-delay: .28s;
}

/* 컬러 */
.greeting__body .u::after{
  background: rgba(169,142,108,.26);
}
.greeting__body .uu::after{
  background: linear-gradient(
    90deg,
    rgba(34,73,46,.18),
    rgba(169,142,108,.22)
  );
}

/* in-view */
.greeting__text.is-inview .greeting__body .u::after,
.greeting__text.is-inview .greeting__body .uu::after{
  opacity: 1;
  transform: scaleX(1);
}

.greeting__text.is-inview .greeting__body .uu::after{
  transition-delay: .92s; /* 좀 더 늦게 */
}

/* =========================================================
  RESPONSIVE
========================================================= */
@media (max-width:1024px){
  .greeting{ padding:90px 0; }
  .greeting__grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .greeting__media{ height:360px; }
  .greeting__text::before{ display:none; }
}

@media (max-width:600px){
  .greeting{ padding:70px 0; }
  .greeting__title{ font-size:24px; }
  .greeting__lead{
    font-size:22px;
    margin-bottom:28px;
  }
  .greeting__body p{ font-size:13.5px; }
  .greeting__media{
    height:280px;
    border-radius:22px;
  }
  .greeting__text{ padding-left:8px; }
}

/* =========================================================
  IMPLANT
======================================================== */

:root{
  --icard-h: 360px;       
  --icard-media-h: 100%; 
}

.implant{
  position: relative;
  padding: 84px 0 72px;
  background: url("../img/se4_bg.png") no-repeat center/cover;
  color: #fff;
  overflow: hidden; /* 가로 튐 방지 */
}

.implant__head{
  position: relative;
  text-align: center;
  z-index: 1;
}

.implant__eyebrow{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .95;
  color: var(--c-brown);
  text-transform: uppercase;
}

.implant__title{
  margin: 0 0 12px;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.implant__sub{
  margin: 0 auto;
  max-width: 720px;
  font-size: 20px;
  line-height: 1.7;
  opacity: .92;
  word-break: keep-all;
}


.implantFrame{
  position: relative;
  max-width: 1200px;
  margin: 34px auto 0;
  padding: 0 24px;
  z-index: 1;
}


.implantSwiper{
  position: relative;
  padding: 0 64px;
}

.icard{
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;

  height: var(--icard-h);
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;

  padding: 28px;
  overflow: hidden;
}


.icard__media{
  height: var(--icard-media-h);
  background: #fff;
  border-radius: 20px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.icard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}


.icard__body{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin: 0;
}


.icard__no{
  font-size: 52px;
  font-weight: 800;
  color: var(--c-brown);
  letter-spacing: .04em;
  line-height: 1;
  flex: 0 0 auto;
}


.icard__pill{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: 999px;
  background: var(--c-green);
  color: #fff;

  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}


.icard__desc{
  margin: 0;
  color: rgba(27,27,27,.72);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.02em;
  flex: 0 0 auto;        
  max-height: 140px; 
  overflow-y: auto;
  padding-right: 6px;
}

/* desc scrollbar */
.icard__desc::-webkit-scrollbar{ width: 6px; }
.icard__desc::-webkit-scrollbar-thumb{
  background: rgba(34,73,46,.22);
  border-radius: 999px;
}
.icard__desc::-webkit-scrollbar-track{ background: transparent; }

/* =========================================================
  NAV BUTTONS (Desktop base)
========================================================= */
.implantPrev,
.implantNext{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.157);
  cursor: pointer;
  line-height: 1;
  z-index: 5;
}

.implantPrev{ left: 6px; }
.implantNext{ right: 6px; }


.implantPrev:hover,
.implantNext:hover{
  background: rgb(255, 255, 255);
}

/* =========================================================
  PROGRESS
========================================================= */
.implantProgress{
  margin: 22px auto 0;
  width: min(720px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.implantProgress__bar{
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.28);
  border-radius: 999px;
  overflow: hidden;
}

.implantProgress__fill{
  display: block;
  height: 100%;
  width: 12.5%;
  background: rgba(255,255,255,.92);
}

.implantProgress__count{
  min-width: 44px;
  text-align: right;
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .92;
}


@media (max-width: 1024px){
  :root{
    --icard-h: 340px;
    --icard-media-h: 100%;
  }

  .implant{ padding: 70px 0 62px; }

  .implantFrame{ padding: 0 18px; }
  .implantSwiper{ padding: 0 52px; }

  .icard{
    grid-template-columns: 260px 1fr;
    gap: 22px;
    padding: 22px;
  }

  .icard__no{ font-size: 46px; }
  .icard__pill{ font-size: 20px; }
}


@media (min-width: 601px){
  .implantPrev,
  .implantNext{
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .implantSwiper:hover .implantPrev,
  .implantSwiper:hover .implantNext{
    opacity: 1;
    pointer-events: auto;
  }
}


@media (max-width: 600px){
  .implantPrev,
  .implantNext{
    display: none !important;
  }


  .implantFrame{
    padding: 0 0; 
  }
.implant__title{
    font-size: 40px;
  }

 

  .implantSwiper{
    padding: 0 18px;
  }

  .implantSwiper .swiper-slide{
    display: flex;
    justify-content: center;
    opacity: .86;
    transform: scale(.985);
    transition: transform .2s ease, opacity .2s ease;
  }
  .implantSwiper .swiper-slide-active{
    opacity: 1;
    transform: scale(1);
  }

  .icard{
    width: 100%;
    margin: 0;
  }


  .implantProgress{
    margin: 12px auto 0;   
    gap: 8px;
    width: min(520px, 100%) ;
    padding: 0 12px ;
  }


  .implantProgress__bar{
    height: 2px;           
  }


  .implantProgress__fill{
    height: 100%;
  }

  .implantProgress__count{
    font-size: 11px;      
    min-width: 34px;
    opacity: .85;
  }
}


@media (max-width: 480px){
  :root{
    --icard-h: 430px;
    --icard-media-h: 170px;
  }

  .implant{ padding: 58px 0 52px; }
  .implant__sub{ font-size: 15px; }

  .implantProgress{
    margin-top: 10px ;
    gap: 7px ;
    padding: 0 10px ;
  }
  .implantProgress__bar{
    height: 2px ;
  }
  .implantProgress__count{
    font-size: 10.5px ;
    min-width: 32px ;
  }

  .icard{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .icard__media{
    padding: 10px;
    border-radius: 18px;
  }
  .icard__media img{
    border-radius: 14px;
  }

  .icard__no{ font-size: 40px; }
  .icard__pill{
    font-size: 18px;
    padding: 9px 14px;
  }
  .icard__desc{ font-size: 14px;  max-height: 96px; }
}


@media (max-width: 375px){
  :root{
    --icard-h: 410px;
    --icard-media-h: 160px;
  }
}

/* =========================================================
  USP2 : ONE-STOP 협진 진료 (orbit)
  - 중앙 이미지 + 4포인트 둘러싸기
========================================================= */

.usp2{
  padding: 92px 0 86px;
  background: #fff;
}

.usp2__head{ margin-bottom: 34px; }
.usp2__sub{
  margin: 14px auto 0;
  max-width: 780px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(27,27,27,.64);
  word-break: keep-all;
}
.usp2__title { margin:0;
  font-size:64px;
  font-weight:800;
  color:var(--c-green);}

/* orbit stage */
.usp2Orbit{
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 40px 0 26px;
  min-height: 560px;

  /* 고급스러운 깊이감 */
  background:
    radial-gradient(closest-side, rgba(169,142,108,.10), transparent 62%),
    radial-gradient(closest-side, rgba(34,73,46,.08), transparent 70%);
  border-radius: 28px;
}

/* center image */
.usp2Orbit__center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  margin: 0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.12);
  background: #f4f4f4;
  isolation: isolate;
}

.usp2Orbit__center img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
}

/* premium rings */
.usp2Orbit__ring{
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  pointer-events: none;
  border: 1px solid rgba(34,73,46,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 0 10px rgba(169,142,108,.06);
  opacity: .9;
}
.usp2Orbit__ring--2{
  inset: -44px;
  border: 1px dashed rgba(169,142,108,.28);
  opacity: .65;
  filter: blur(.2px);
}

/* points (프리미엄 패널 느낌: 카드처럼 두껍지 않게) */
.usp2Point{
  position: absolute;
  width: min(420px, 46%);   /* ✔ 가로폭 여유 */
  padding: 22px 22px 20px;  /* ✔ 내부 여백도 약간 확대 */
  border-radius: 20px;

  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(34,73,46,.10);
  box-shadow: 0 18px 42px rgba(0,0,0,.07);

  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s cubic-bezier(.22,.61,.36,1),
    background .55s ease;
}


.usp2Point__kicker{
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(169,142,108,.95);
  font-weight: 700;
}

.usp2Point__title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: rgba(34,73,46,.96);
  font-weight: 900;
}

.usp2Point__desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(27,27,27,.72);
  word-break: keep-all;
}

/* underline highlight (서울시온 톤) */
.usp2Point__u{
  font-weight: 900;
  color: rgba(34,73,46,.96);
  padding: 0 .08em;
  background-image: linear-gradient(
    to top,
    rgba(169,142,108,.22) 52%,
    transparent 52%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* positioning */
.usp2Point--tl{ left: 4px; top: 66px; }
.usp2Point--tr{ right: 4px; top: 66px; }
.usp2Point--bl{ left: 4px; bottom: 64px; }
.usp2Point--br{ right: 4px; bottom: 64px; }

/* subtle connector (optional luxury line) */
.usp2Point::after{
  content:"";
  position: absolute;
  width: 74px;
  height: 1px;
  background: linear-gradient(90deg, rgba(34,73,46,.26), rgba(34,73,46,0));
  opacity: .75;
}
.usp2Point--tl::after{ right: -74px; top: 34px; }
.usp2Point--tr::after{
  left: -74px; top: 34px;
  background: linear-gradient(90deg, rgba(34,73,46,0), rgba(34,73,46,.26));
}
.usp2Point--bl::after{ right: -74px; top: 34px; }
.usp2Point--br::after{
  left: -74px; top: 34px;
  background: linear-gradient(90deg, rgba(34,73,46,0), rgba(34,73,46,.26));
}
/* ==============================
   PREMIUM HOVER (micro orbit)
================================ */

/* 공통 hover 효과 */
.usp2Point:hover{
  background: rgba(255,255,255,.92);
  box-shadow:
    0 26px 70px rgba(0,0,0,.12),
    0 0 0 1px rgba(34,73,46,.06);

  transform: translateY(-6px); /* 기본 부유감 */
}

/* 중앙을 향해 미세 이동 */
.usp2Point--tl:hover{
  transform: translate(6px, 6px);
}

.usp2Point--tr:hover{
  transform: translate(-6px, 6px);
}

.usp2Point--bl:hover{
  transform: translate(6px, -6px);
}

.usp2Point--br:hover{
  transform: translate(-6px, -6px);
}
.usp2Point::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events:none;

  background:
    radial-gradient(120% 100% at 20% 20%, rgba(255,255,255,.65), transparent 55%);

  opacity: .35;
  transition: opacity .6s ease, transform 1.2s ease;
}

.usp2Point:hover::before{
  opacity: .65;
  transform: translateX(6px);
}
/* =========================================================
  TABLET (<=1024px) : 2x2 grid 느낌으로 정리
========================================================= */
@media (max-width:1024px){
  .usp2Orbit{
    min-height: 760px;
    padding: 30px 18px 22px;
  }

  .usp2Orbit__center{
    width: 300px;
    height: 300px;
    top: 46%;
  }

  .usp2Point{
    width: calc(50% - 18px);
    padding: 16px 16px 14px;
  }

  .usp2Point--tl{ left: 18px; top: 26px; }
  .usp2Point--tr{ right: 18px; top: 26px; }
  .usp2Point--bl{ left: 18px; bottom: 22px; }
  .usp2Point--br{ right: 18px; bottom: 22px; }

  .usp2Point::after{ display:none; } /* 태블릿에서는 선 정리 */
}

/* =========================================================
  MOBILE (<=600px) : 세로 스택
========================================================= */
@media (max-width:600px){
  .usp2{ padding: 74px 0 66px; }
 .usp2__title {

  }
  .usp2Orbit{
    min-height: auto;
    padding: 18px 14px 18px;
    border-radius: 22px;
  }

  .usp2Orbit__center{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 240px;
    height: 240px;
    margin: 10px auto 18px;
  }

  .usp2Point{
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
    margin: 10px 0;
    border-radius: 16px;
  }

  .usp2Point__title{ font-size: 17px; }
  .usp2Point__desc{ font-size: 13.5px; }

}

/* =========================================================
  USP2 - Premium Air Orbit (subtle)
  - no spinning, no dizzy motion
  - tiny orbital drift + slow float
========================================================= */



/* =========================================================
  TREATMENT 
========================================================= */


.treat__wrap{ position: relative; }

.treatLayout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: start;
  margin-top: 32px;
}

/* LEFT */
.treatMain{ min-width: 0; }
.treatMainSwiper{ width: 100%; }

.treatCard{
  display: grid;
   grid-template-columns: 380px minmax(0, 1fr); 
  gap: 44px;
  align-items: center;
  padding: 14px 0 10px;
}

.treatCard__media{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
}

.treatCard__media img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.treatCard__body{ max-width: 520px; }

.treatCard__title{
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
}

.treatCard__desc{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
}

.treatTags{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(169,142,108,.22);
  color: #5b4a36;
}

.tag--primary{
  background: rgba(34,73,46,.90);
  color: #fff;
}

/* Bottom bar */
.treatBar{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
}

.treatProgress{
  height: 4px;
  border-radius: 999px;
  background: rgba(34,73,46,.12);
  position: relative;
  overflow: hidden;
}

.treatProgress__fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 12%;
  background: var(--c-green);
  border-radius: 999px;
  transition: width .35s ease;
}

.treatCount{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: rgba(0,0,0,.50);
  font-size: 13px;
}
.treatCount__current{ color: var(--c-green); }
.treatCount__slash{ opacity: .6; }
.treatCount__total{ opacity: .8; }

.treatNav{ display: inline-flex; gap: 10px; }

.treatBtn{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(34,73,46,.25);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.treatBtn:hover{
  border-color: rgba(34,73,46,.45);
  transform: translateY(-1px);
}
.treatBtn:active{ transform: translateY(0); }

.treatBtn span{
  width: 8px;
  height: 8px;
  display: inline-block;
  border-right: 2px solid rgba(34,73,46,.75);
  border-bottom: 2px solid rgba(34,73,46,.75);
}
.treatBtn--prev span{ transform: rotate(135deg); margin-left: 2px; }
.treatBtn--next span{ transform: rotate(-45deg); margin-right: 2px; }

/* RIGHT : thumbs */
.treatThumbs{ 
position: relative;
padding-top: 12px;
border-left: 1px solid rgba(34,73,46,.08); }

.treatThumbSwiper{
  width: 100%;
  overflow: hidden; /* ✅ 가로 삐져나옴 방지 (기본부터) */
}


.treatThumbSwiper .swiper-slide{
  width: calc((100% - 12px) / 2); 
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}

.treatThumbSwiper .swiper-slide::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color .25s ease;
}

.treatThumbSwiper .swiper-slide-thumb-active::after{
  border-color: rgba(34, 73, 46, 0.9);
}

.treatThumbSwiper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.55) saturate(.9);
  transition: filter .25s ease, transform .25s ease;
}

.treatThumbSwiper .swiper-slide:hover img{
  filter: brightness(.9) saturate(1);
}

.treatThumbSwiper .swiper-slide-thumb-active img{
  filter: brightness(.85) saturate(1);
  transform: scale(1.02);
}
@media (max-width: 1024px){

  .treatLayout{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 22px;
  }

  /* 카드 1단 */
  .treatCard{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .treatCard__media img{ height: 220px; }

  .treatCard__title{ font-size: 20px; }

  .treatCard__desc{
    font-size: 13px;
    line-height: 1.65;
  }

  .treatTags{ gap: 8px; }
  .tag{
    font-size: 11px;
    padding: 6px 10px;
  }

  /* 하단바 = 모바일 */
  .treatBar{
    margin-top: 16px;
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .treatNav{ display: none; }

  .treatProgress{ height: 2px; }
  .treatProgress__fill{ transition: width .25s ease; }

  .treatCount{
    font-size: 11px;
    gap: 4px;
  }

  /* ✅ 썸네일 = 모바일처럼 숨김 */
  .treatThumbs{ display: none; }
}

/* =========================================================
  TABLET ONLY (601px ~ 1024px)
  모바일 레이아웃 유지 + 이미지 살짝 큼직
========================================================= */
@media (min-width: 601px) and (max-width: 1024px){

  /* 메인 카드 이미지 */
  .treatCard__media img{
    height: 280px;          /* ✔ 240~260 중 안정적인 값 */
  }

  /* 카드 전체 밀도 살짝 여유 */
  .treatCard{
    gap: 20px;
  }

  /* 텍스트 가독성 미세 상승 */
  .treatCard__title{
    font-size: 21px;
  }

  .treatCard__desc{
    font-size: 13.5px;
    line-height: 1.7;
  }
}
@media (max-width: 600px){
   .section__head {
    text-align: center;
  }
}
/* =========================================================
  7) EQUIPMENT (Desktop)
========================================================= */


.equip{
  position: relative;
  padding: 110px 0;
  background: url("../img/equipment_bg.png") center/cover no-repeat;
  overflow: hidden;
}

.equip::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.equip .container{
  position: relative;
  z-index: 1;
}

.equip__head{
  text-align: center;
  margin-bottom: 18px;
}

/* =========================================================
  PILLS (Tabs)
========================================================= */
.equipTabs{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 36px;
}

.equipTab{
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(34,73,46,.35);
  background: rgba(255,255,255,.55);
  color: var(--c-green);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.equipTab:hover{
  transform: translateY(-1px);
  border-color: rgba(34,73,46,.55);
}

.equipTab.is-active{
  background: var(--c-green);
  color: #fff;
  border-color: var(--c-green);
}

/* =========================================================
  STAGE 
========================================================= */
.equipStage{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;

  padding: 28px 26px;
  border-radius: 18px;

  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(34,73,46,.14);
  box-shadow:
    0 18px 40px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.65);

  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.equipStage::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.75),
    rgba(255,255,255,0)
  );
  pointer-events:none;
}


.equipCard{
  width: min(520px, 100%);
  margin: 0 auto 18px;
  overflow: hidden; }

.equipCard img{
  width: 100%;
  height: 260px;
  object-fit: contain;
  display: block;
  border: 0;
  outline: none;
}


.equipText{
  padding-top: 2px;
  transition: opacity .25s ease, transform .25s ease;
}

.equipName{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color: var(--c-green);
  letter-spacing: -0.02em;
}

.equipName span{
  font-size: 14px;
  font-weight: 800;
  color: rgba(27,27,27,.65);
}

.equipDesc{
  margin: 0 auto;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}


.equipCard,
.equipText{
  transition: opacity .25s ease, transform .25s ease;
}

.equipStage.is-switching .equipCard,
.equipStage.is-switching .equipText{
  opacity: 0;
  transform: translateY(8px);
}


.equipImg{
  transform: scale(1);
  transition: transform .38s ease, filter .38s ease;
  will-change: transform, filter;
  filter: contrast(1.02);

}


.equipStage.is-switching .equipImg{
  transform: scale(.985);
  filter: brightness(.98) saturate(.98);
}


.equipStage.is-entering .equipImg{
  transform: scale(1.02);
  filter: brightness(1) saturate(1);
}


.equipStage.is-switching{
  transform: translateY(1px);
  box-shadow:
    0 14px 34px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,.6);
}


.equipStage.reveal{
  opacity: 0;
  transform: translateY(10px) scale(.99);
    filter: blur(4px);
  transition:
    transform .7s cubic-bezier(.2,.8,.2,1),
    opacity .7s ease,
    filter .7s ease,
    box-shadow .7s ease;
  will-change: transform, opacity, filter;
}


.equipStage.reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}

.equipDesc .m-break{ display: inline; }

@media (max-width: 768px){
  .equipDesc .m-break{
    display: block;
    margin-top: 4px;
  }
  .equipCard{
    margin-bottom: 12px;
  }
}

/* =========================================================
  RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .equip{ padding: 92px 0; }
  .equipTabs{ margin: 18px 0 32px; }
  .equipStage{ padding: 26px 18px; }
}

@media (max-width: 768px){
  .equip{ padding: 80px 0; }

  .equipTabs{ gap: 10px; margin: 16px 0 26px; }

  .equipTab{
    height: 32px;
    font-size: 13px;
    padding: 0 14px;
  }

  .equipStage{
    padding: 22px 16px;
    border-radius: 16px;
  }
  .equipStage::before{
    left: 10px;
    right: 10px;
    top: 10px;
  }

  .equipCard{
    padding: 24px 18px;
    margin-bottom: 14px;
  }
  .equipCard img{ height: 220px; }

  .equipName{ font-size: 20px; }
  .equipName span{ font-size: 13px; }

  .equipDesc{
    font-size: 13px;
    line-height: 1.7;

    max-width: 320px;   
    margin: 0 auto;
    text-align: center;
    word-break: keep-all; 
  }
}

@media (max-width: 480px){
  .equipStage{ padding: 20px 14px; }
  .equipCard img{ height: 200px; }
  .equipDesc{
    max-width: 300px;
    line-height: 1.65;
  }
}


/* =========================================================
  TOUR
========================================================= */

.tour__head{
  text-align: center;
  margin-bottom: 26px;
}


.tourWrap{
  position: relative;
  width: 100%;
  padding: 0 40px;    
  max-width: 1600px;  
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  
}


.tourSwiper{
  width: 100%;
  padding: 24px 0 16px;
  box-sizing: border-box;
}


.tourSwiper .swiper-slide{
  border-radius: 22px;
  overflow: hidden;
  transform: scale(0.92);
  opacity: 0.5;
  transition: transform .45s ease, opacity .45s ease;
  will-change: transform, opacity;
  height: 480px;
  display: flex;
  align-items: center;
}


.tourSwiper .swiper-slide img{
  width: 100%;
  height: 420px;      
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 20px;}


.tourSwiper .swiper-slide-active{
  transform: scale(1.12);
  opacity: 1;
  z-index: 2;
}

/* =========================================================
  BOTTOM BAR
========================================================= */
.tourBar{
  width: min(520px, 100%);
  margin: 18px auto 0;

  display: flex;
  align-items: center;
  gap: 14px;
}

.tourProgress{
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(34,73,46,.12);
  position: relative;
  overflow: hidden;
}

.tourProgress__fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 12%;
  background: var(--c-green);
  border-radius: 999px;
  transition: width .35s ease;
}

.tourCount{
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}
.tourCount__current{ color: var(--c-green); }


.tourThumbs{ display: none; }



/* =========================================================
  RESPONSIVE
========================================================= */

/* ✅ Tablet */
/* ✅ Tablet */
@media (max-width: 1024px){
  .tourWrap{
    padding: 0 24px;
    max-width: 100%;
  }

  .tourSwiper{
    padding: 18px 0 12px;
  }

  .tourSwiper .swiper-slide{
    height: 360px;
    transform: scale(0.94);
    opacity: 0.55;
    border-radius: 20px;
  }

  .tourSwiper .swiper-slide img{
    height: 100%;
    border-radius: 18px;
  }

  .tourSwiper .swiper-slide-active{
    transform: scale(1.04);
  }

  /* ===== ✅ bar를 “태블릿 프리미엄” 톤으로 ===== */
  .tourBar{
    width: min(720px, 100%);
    margin: 14px auto 0;
    gap: 12px;
  }

  .tourProgress{
    height: 6px;
    background: rgba(34,73,46,.10);
    border-radius: 999px;
  }

  .tourProgress__fill{
    background: linear-gradient(90deg, rgba(34,73,46,.95), rgba(34,73,46,.65));
    box-shadow: 0 6px 16px rgba(34,73,46,.18);
    transition: width .22s ease;
  }

  .tourCount{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .02em;
    color: rgba(0,0,0,.55);
    white-space: nowrap;
  }

  .tourCount::before{
    content:"•";
    opacity: .35;
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
  }

  .tourCount__current{
    color: var(--c-green);
  }

  /* ===== ✅ Tablet thumbs 노출 ===== */
  .tourThumbs{
    display: block;
    width: min(720px, 100%);
    margin: 12px auto 0;
  }

  .tourThumbSwiper{
    padding: 6px 2px 2px;
  }

  .tourThumbSwiper .swiper-slide{
    width: 112px;                /* 태블릿에서 보기 좋은 고정 폭 */
    height: 74px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    opacity: .55;
    transform: scale(.98);
    transition: opacity .22s ease, transform .22s ease;
  }

  .tourThumbSwiper .swiper-slide::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 14px;
    border: 2px solid transparent;
    pointer-events:none;
    transition: border-color .22s ease;
  }

  .tourThumbSwiper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.95) contrast(1.02);
    transform: scale(1.02);
    transition: transform .22s ease, filter .22s ease;
  }

  .tourThumbSwiper .swiper-slide-thumb-active{
    opacity: 1;
    transform: scale(1);
  }

  .tourThumbSwiper .swiper-slide-thumb-active::after{
    border-color: rgba(34,73,46,.85);
  }

  .tourThumbSwiper .swiper-slide-thumb-active img{
    filter: saturate(1) contrast(1.06);
    transform: scale(1.06);
  }
}

/* ✅ Mobile에서는 thumbs 숨김 유지 (원하면 유지) */
@media (max-width: 600px){
  .tourThumbs{ display:none; }
}
/* ✅ Mobile */
@media (max-width: 768px){
  .tour__head{
    margin-bottom: 18px;
  }
  .tourWrap{ padding: 0 14px; }

  .tourSwiper{
    padding: 8px 0 6px;
  }

  .tourSwiper .swiper-slide{
    height: 240px;
    transform: scale(0.97);
    opacity: 0.75;
    border-radius: 18px;
  }

  .tourSwiper .swiper-slide-active{
    transform: scale(1.02);
    opacity: 1;
  }

  .tourSwiper .swiper-slide img{
    border-radius: 16px;
  }

  .tourBar{
    width: min(320px, 100%);
    margin-top: 14px;
    gap: 10px;
  }

  .tourProgress{ height: 3px; }
  .tourCount{ font-size: 12px; }
}

/* ✅ Small Mobile */
@media (max-width: 480px){
  .tourWrap{ padding: 0 12px; }
  .tourSwiper .swiper-slide img{ height: 220px; }
}



/* =========================================================
  9) LOCATION
========================================================= */
.location{
  position: relative;
  background: linear-gradient(180deg, rgba(244,240,226,.55), rgba(244,240,226,0));
}

.location__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* left info card */
.location__info{
  padding: 34px 34px 26px;
}

.location__name{
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--c-green);
}

.location__dl{ margin: 0; }

.location__row{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(34,73,46,.10);
}
.location__row:first-child{
  border-top: 0;
  padding-top: 0;
}

.location__row dt{
  font-weight: 800;
  color: rgba(27,27,27,.75);
}
.location__row dd{
  margin: 0;
  color: rgba(27,27,27,.92);
  
}

.location__hint{
  display: block;
  margin-top: 6px;
  font-size: 16px;
  color: rgba(27,27,27,.92);
}

.location__tel{
  font-size: 22px;
  font-weight: 900;
  color: var(--c-green);
  letter-spacing: -0.02em;
}
.location__tel:hover{ color: var(--c-brown); }


.hours{
  display: grid;
  gap: 8px;
}
.hours__line{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
}
.hours__line span{ color: rgba(27,27,27,.70); }
.hours__line strong{ color: rgba(27,27,27,.92); }
.hours__line--muted span,
.hours__line--muted strong{ color: rgba(27,27,27,.55); }

.hours__note{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(27,27,27,.55);
}

.location__cta{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.btn--wide{ width: 100%; }

.location__quick{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.quick__item{
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(34,73,46,.18);
  background: rgba(244,240,226,.75);
  cursor: pointer;
}
.quick__icon{
  font-weight: 900;
  color: var(--c-green);
}
.quick__label{
  font-size: 14px;
  font-weight: 800;
  color: rgba(27,27,27,.85);
}
.quick__item:hover{
  border-color: rgba(169,142,108,.55);
  background: rgba(244,240,226,1);
}

/* right map card */
.location__mapWrap{
  max-width: 960px;
  margin: 0 auto;
}

/* Kakao static embed */
.kakaoEmbed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;  /* 👈 반응형 비율 */
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
}

.kakaoEmbed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.kakaoEmbed__link{
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

.kakaoEmbed__link img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .45s ease, box-shadow .45s ease;
}

/* 
.kakaoEmbed__link:hover img{
  transform: scale(1.03);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.kakaoEmbed__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(250,250,250,.95);
  border-top: 1px solid rgba(0,0,0,.06);
}

.kakaoEmbed__logo img{
  height: 18px;
  display: block;
}

.kakaoEmbed__actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}
.kakaoEmbed__actions a{
 color: #333;
  text-decoration: none;
  transition: color .2s ease;
}
.kakaoEmbed__actions a:hover{
  color: var(--c-green);
}
.kakaoEmbed__actions span{
  width: 1px;
  height: 12px;
  background: rgba(0,0,0,.15);
}

.location__mapNote{
  padding: 16px 20px;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(248,248,248,1)
  );
  border-top: 1px solid rgba(0,0,0,.05); }

.location__mapNote p{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0,0,0,.65);

}

.location__mapNote strong{
  color: var(--c-green);
  font-weight: 800;
} */

@media (max-width: 768px){
  .kakaoEmbed__bar{
    padding: 12px 14px;
    gap: 10px;
  }

  .kakaoEmbed__actions{
    font-size: 12px;
    gap: 8px;
  }

  .location__mapNote{
    padding: 14px 16px;
    
  }

  .location__mapNote p{
    font-size: 12px;
  }
}

/* =========================================================
  LOCATION QUICK
========================================================= */
.locationQuick{
  position: absolute;
  right: 34px;
  top: 140px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.locationQuick__pill{
  width: 82px;
  padding: 10px 10px;
  border-radius: 999px;
  background: rgba(244,240,226,.85);
  border: 2px solid rgba(34,73,46,.95);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  display: grid;
  gap: 10px;
}

.locationQuick__item{
  height: 74px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
  color: rgba(34,73,46,.95);
  font-weight: 900;
  transition: transform .15s ease, background .15s ease;
}
.locationQuick__item:hover{
  transform: translateY(-2px);
}

.locationQuick__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.locationQuick__text{
  font-size: 12px;
  letter-spacing: -0.02em;
}

.locationQuick__top{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(34,73,46,.95);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
}
.locationQuick__top:hover{
  background: rgba(34,73,46,1);
  transform: translateY(-2px);
}

/* tablet & below */
@media (max-width: 1024px){
  .locationQuick{ display: none; }
}


/* =========================================================
  NAVER RESERVATION BAR
========================================================= */
.naverReserve{
  position: sticky;
  bottom: 0;
  background: url(../img/reserv.png);
  z-index: 20;
}

.naverReserve__link{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.naverReserve__icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.naverReserve__arrow{
  font-size: 22px;
  opacity: .85;
}

@media (max-width: 768px){
  .naverReserve__link{
    height: 64px;
    font-size: 16px;
  }
}


/* =========================================================
  FOOTER
========================================================= */
.footer{
  background: #21452c;
  color: rgba(255,255,255,.88);
}
.footer .container{
  width: min(var(--container, 1200px), calc(100% - 48px));
  margin: 0 auto;
}
.footer__meta{
  padding: 48px 0 36px;
}

.footer__cols{
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.footer__brand{
  flex-shrink: 0;
}
.footer__logo{
  width: 140px;
  height: auto;
  display: block;
}

.footer__info{
  font-size: 14px;
  line-height: 1.7;
}
.footer__info p{
  margin: 0 0 6px;
}

.footer__links{
  margin-top: 14px;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__links a{
  font-size: 13px;
  color: rgba(255,255,255,.75);
}
.footer__links a:hover{
  text-decoration: underline;
  color: #fff;
}

.footer__copy{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: 12px;
  color: rgba(255,255,255,.6);
}


/* =========================================================
  RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .location__grid{ grid-template-columns: 1fr; }
  .location__cta{ grid-template-columns: 1fr; }

  .kakaoEmbed__actions{
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 6px;
  }

}

@media (max-width: 768px){
  .footer__cols{
    flex-direction: column;
    gap: 24px;
  }
  .footer__logo{ width: 120px; }
  .footer__links{ gap: 10px; }
}

@media (max-width: 480px){
  .location__info{ padding: 26px 18px 18px; }
  .location__row{ grid-template-columns: 78px 1fr; }
  .location__name{ font-size: 22px; }
  .location__tel{ font-size: 20px; }

  .kakaoEmbed__bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .location__grid{
    gap: 16px; 
  }


  .location__name{
    margin-bottom: 14px;
  }
  .location__row{
    padding: 12px 0; 
  }
  .location__cta{
    margin-top: 14px;
    gap: 10px;
  }
  .location__quick{
    margin-top: 12px;
    gap: 10px;
  }


  .location__mapWrap{
    padding: 10px;
  }
  .kakaoEmbed__bar{
    padding: 10px 12px;
  }

   .footer .container{
    width: calc(100% - 32px);
  }
}