/* ==========================================================================
   강남포도여성의원 이벤트 랜딩 — style.css
   디자인 캔버스 640px 기준. 모든 길이는 calc(N * var(--u)) 로 표기 (N = 640px 캔버스 기준 px).
   --u = min(100vw, 640px) / 640  →  이미지처럼 화면 폭에 맞춰 통째로 축소/확대됨.
   ========================================================================== */

:root{
  --u: calc(min(100vw, 640px) / 640);
  --purple:#5f4c91;
  --indigo:#302952;
  --navy:#272c55;
  --lav:#e8e2f3;
  --lav-form:#dcd3ee;
  --card:#fcfbfe;
  --kakao:#FEE500;
  --ink:#1c1a2e;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-width:320px;background:#ffffff;color:#222;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.4;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p,ul,dl,dd,dt{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

.inner{max-width:640px;margin:0 auto;overflow:hidden}

/* ---------- 공통: 하단 네이비 바 ---------- */
.bar{
  height:calc(42 * var(--u));background:var(--navy);color:#fff;
  font-size:calc(15 * var(--u));font-weight:500;letter-spacing:.55em;padding-left:.55em;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
}

/* ---------- 공통: 알약 버튼 ---------- */
.btn-pill{
  display:flex;align-items:center;justify-content:center;
  height:calc(84 * var(--u));border-radius:calc(42 * var(--u));background:var(--purple);color:#fff;
  font-size:calc(30 * var(--u));font-weight:600;letter-spacing:-.03em;white-space:nowrap;
}
.btn-pill .arrow{flex:none;width:calc(40 * var(--u));height:calc(20 * var(--u))}
.kicon{flex:none;width:calc(34 * var(--u));height:calc(34 * var(--u));display:block}
.kicon--s{width:calc(28 * var(--u));height:calc(28 * var(--u))}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero{position:relative;height:calc(1000 * var(--u));background:var(--lav)}
.hero__photo{
  position:absolute;top:0;left:0;width:100%;height:calc(660 * var(--u));max-width:none;
  object-fit:cover;object-position:50% 35%;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
}
.hero__logo{position:absolute;left:calc(36 * var(--u));top:calc(32 * var(--u));display:flex;align-items:center;gap:calc(10 * var(--u))}
.hero__logo img{height:calc(34 * var(--u));width:auto;max-width:none}
.hero__logo span{font-size:calc(28 * var(--u));font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.02em}
.hero__text{position:absolute;left:calc(40 * var(--u));top:calc(600 * var(--u))}
.hero__until{font-size:calc(30 * var(--u));font-weight:600;color:var(--navy);line-height:1.1;letter-spacing:-.02em}
.hero__title{
  font-size:calc(112 * var(--u));font-weight:900;line-height:1.05;letter-spacing:-.04em;color:var(--purple);
  margin-top:0;white-space:nowrap;
}
.hero__sub{font-size:calc(26 * var(--u));font-weight:500;line-height:1.3;color:var(--indigo);margin-top:calc(20 * var(--u));letter-spacing:-.02em}
.hero .bar{position:absolute;left:0;right:0;bottom:0}

/* ==========================================================================
   2. CTA
   ========================================================================== */
.cta{background:var(--lav)}
.cta__area{height:calc(226 * var(--u));display:flex;align-items:center;justify-content:center}
.cta .btn-pill{width:calc(324 * var(--u));gap:calc(12 * var(--u))}

/* ==========================================================================
   3. PRICE CARDS
   ========================================================================== */
.price{background:var(--lav)}
.price__body{padding:calc(70 * var(--u)) calc(26 * var(--u)) 0}
.card{background:var(--card);border-radius:calc(28 * var(--u));padding:calc(54 * var(--u)) calc(32 * var(--u)) calc(56 * var(--u));margin-bottom:calc(26 * var(--u))}
.card__head{text-align:center;margin-bottom:calc(44 * var(--u))}
.card__head h2{font-size:calc(42 * var(--u));font-weight:700;color:#222;line-height:1.2;letter-spacing:-.02em}
.card__until{font-size:calc(30 * var(--u));font-weight:600;color:var(--purple);margin-top:calc(8 * var(--u));line-height:1.25;letter-spacing:-.02em}
.card__limit{font-size:calc(18 * var(--u));color:#444;margin-top:calc(14 * var(--u));line-height:1.3}
.pill{
  display:block;width:fit-content;max-width:100%;margin:0 auto calc(34 * var(--u));
  background:var(--purple);color:#fff;font-size:calc(34 * var(--u));font-weight:700;line-height:1.3;letter-spacing:-.02em;
  padding:calc(16 * var(--u)) calc(44 * var(--u));border-radius:999px;text-align:center;white-space:nowrap;
}
.rows{display:flex;flex-direction:column;gap:calc(30 * var(--u))}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:calc(10 * var(--u));row-gap:calc(6 * var(--u))}
.row__name{display:flex;align-items:center;gap:calc(12 * var(--u));font-size:calc(28 * var(--u));font-weight:400;color:#222;line-height:1.3;letter-spacing:-.03em}
.num{
  flex:none;width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;background:var(--purple);color:#fff;
  font-style:normal;font-size:calc(15 * var(--u));font-weight:700;line-height:1;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
}
.row__price{display:flex;align-items:baseline;color:var(--purple);white-space:nowrap}
.row__price strong{font-size:calc(50 * var(--u));font-weight:800;letter-spacing:-.02em;line-height:1}
.row__price em{font-style:normal;font-size:calc(22 * var(--u));font-weight:600;line-height:1;margin-left:calc(2 * var(--u))}
.row__note{grid-column:1 / -1;font-size:calc(18 * var(--u));color:#555;padding-left:calc(38 * var(--u));line-height:1.35}
.card__rule{height:1px;background:#e3dcf0;margin:calc(36 * var(--u)) 0 calc(28 * var(--u))}
.card__lines p{font-size:calc(20 * var(--u));color:#444;line-height:1.7;text-align:center;letter-spacing:-.02em}
.card__banner{
  margin-top:calc(40 * var(--u));height:calc(64 * var(--u));background:var(--purple);color:#fff;font-size:calc(24 * var(--u));font-weight:700;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;letter-spacing:-.02em;
}
.price__note{font-size:calc(17 * var(--u));color:#555;line-height:1.6;padding:calc(6 * var(--u)) calc(34 * var(--u)) calc(40 * var(--u))}

/* ==========================================================================
   4. KAKAO CTA
   ========================================================================== */
.kakao{height:calc(178 * var(--u));background:var(--lav);display:flex;align-items:center;justify-content:center}
.btn-pill--kakao{width:calc(378 * var(--u));gap:calc(14 * var(--u))}

/* ==========================================================================
   5. APPLY TITLE
   ========================================================================== */
.apply{
  height:calc(208 * var(--u));background:var(--lav-form);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.apply h2{font-size:calc(44 * var(--u));font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.03em;white-space:nowrap}
.apply p{font-size:calc(24 * var(--u));font-weight:600;color:var(--purple);margin-top:calc(10 * var(--u));line-height:1.25;letter-spacing:-.02em}

/* ==========================================================================
   6. FORM
   ========================================================================== */
.form{background:var(--lav-form);padding:0 calc(20 * var(--u)) calc(100 * var(--u))}
.form__title{font-size:calc(26 * var(--u));font-weight:400;color:#000;text-align:center;line-height:1.3}
.form__note{font-size:calc(16 * var(--u));color:#222;text-align:center;margin:calc(6 * var(--u)) 0 calc(22 * var(--u));line-height:1.4}
.form input[type="text"],
.form input[type="tel"]{
  display:block;width:100%;height:max(40px,calc(50 * var(--u)));margin:0 0 calc(10 * var(--u));padding:0 calc(10 * var(--u));
  background:#fff;border:1px solid #4b3c86;border-radius:calc(5 * var(--u));color:#111;
  font-family:inherit;font-size:max(16px,calc(25 * var(--u)));line-height:1.2;
  -webkit-appearance:none;appearance:none;
}
.form input::placeholder{color:#888;opacity:1}
/* 허니팟: 사람 눈에는 안 보이고 봇만 채우는 칸 */
.hp,
.form input.hp{position:absolute;left:-9999px;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.form input:focus{outline:2px solid var(--purple);outline-offset:0}
.form__submit{
  display:block;width:100%;height:max(48px,calc(70 * var(--u)));margin:0;border:0;border-radius:calc(5 * var(--u));
  background:var(--purple);color:#fff;font-size:calc(30 * var(--u));font-weight:700;letter-spacing:-.02em;
}
.form__agree{margin-top:calc(20 * var(--u));text-align:center;font-size:calc(16 * var(--u));color:#222;line-height:1.6}
.form__agree input[type="checkbox"]{
  width:max(14px,calc(18 * var(--u)));height:max(14px,calc(18 * var(--u)));margin:0 calc(6 * var(--u)) 0 0;vertical-align:calc(-3 * var(--u));accent-color:var(--purple);
}
.form__agree label{cursor:pointer}
.form__detail{
  display:block;margin:calc(6 * var(--u)) auto 0;padding:0;border:0;background:none;
  font-size:calc(16 * var(--u));color:#222;line-height:1.6;text-decoration:underline;text-underline-offset:calc(3 * var(--u));
}

/* ==========================================================================
   7. DOCTORS
   ========================================================================== */
.doc{
  position:relative;padding:calc(545 * var(--u)) 0 calc(70 * var(--u));
  background:linear-gradient(180deg,#d3c6ee 0%,#ece6f7 42%,#ffffff 100%);
}
.doc__mark{position:absolute;right:calc(56 * var(--u));top:calc(96 * var(--u));z-index:1;text-align:right}
.doc__podo{display:block;font-size:calc(66 * var(--u));font-weight:200;line-height:1;letter-spacing:.04em;margin-right:-.04em;color:var(--ink)}
.doc__sub{
  display:flex;align-items:center;justify-content:center;width:calc(290 * var(--u));height:calc(36 * var(--u));margin:calc(6 * var(--u)) 0 0 auto;
  background:#fff;color:var(--purple);font-size:calc(22 * var(--u));font-weight:500;letter-spacing:.3em;padding-left:.3em;white-space:nowrap;
}
.doc__img{position:absolute;height:calc(340 * var(--u));width:auto;max-width:none;transform:translateX(-50%);z-index:1}
.doc__img--sim{left:calc(150 * var(--u));top:calc(230 * var(--u))}
.doc__img--lee{left:calc(490 * var(--u));top:calc(230 * var(--u))}
.doc__img--moh{left:calc(320 * var(--u));top:calc(200 * var(--u));height:calc(372 * var(--u));z-index:2}
.doc__card{
  position:relative;z-index:3;margin:0 calc(34 * var(--u));background:#fff;border:calc(3 * var(--u)) solid #d8ccf2;border-radius:calc(30 * var(--u));
  padding:calc(44 * var(--u)) calc(30 * var(--u)) calc(56 * var(--u));
}
.doc__title{font-size:calc(72 * var(--u));font-weight:800;color:#111;text-align:center;letter-spacing:-.03em;line-height:1.2}
.doc__title span{color:var(--purple)}
.doc__lead{font-size:calc(25 * var(--u));color:#222;text-align:center;margin:calc(14 * var(--u)) 0 calc(28 * var(--u));line-height:1.4;letter-spacing:-.03em}
.doc__photos{display:flex;justify-content:center;gap:calc(12 * var(--u))}
.doc__photos img{flex:none;width:calc(244 * var(--u));height:auto;max-width:none;aspect-ratio:732 / 402;object-fit:cover}
.doc__btns{display:flex;justify-content:center;gap:calc(12 * var(--u));margin-top:calc(30 * var(--u))}
.dbtn{
  display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));width:calc(244 * var(--u));height:calc(72 * var(--u));border-radius:calc(36 * var(--u));
  background:var(--ink);font-size:calc(24 * var(--u));font-weight:700;white-space:nowrap;letter-spacing:-.03em;
}
.dbtn--tel{color:#fff}
.dbtn--kakao{color:var(--kakao)}
.dbtn:focus-visible{outline-color:var(--purple)}
.picon{flex:none;width:calc(28 * var(--u));height:calc(28 * var(--u))}
.doc__quote{font-size:calc(30 * var(--u));font-weight:700;color:#111;text-align:center;margin-top:calc(40 * var(--u));line-height:1.35;letter-spacing:-.03em;text-wrap:balance}
.doc__desc{font-size:calc(20 * var(--u));color:#333;text-align:center;margin-top:calc(16 * var(--u));line-height:1.6;letter-spacing:-.02em}
.doc__desc span{display:block;white-space:nowrap}

/* ==========================================================================
   8. HOT PICK  (Swiper)
   ========================================================================== */
.hot{background:#1f1b36;padding:calc(70 * var(--u)) 0 calc(50 * var(--u))}
.hot__title{padding:0 calc(30 * var(--u));margin-bottom:calc(40 * var(--u));color:#fff}
.hot__en{display:block;font-size:calc(52 * var(--u));font-weight:800;letter-spacing:-.01em;line-height:1.15}
.hot__ko{display:block;font-size:calc(40 * var(--u));font-weight:400;line-height:1.25}
.swiper{
  --swiper-navigation-color:#fff;
  --swiper-navigation-size:calc(16 * var(--u));
  --swiper-pagination-color:#fff;
  --swiper-pagination-bullet-inactive-color:#fff;
  --swiper-pagination-bullet-inactive-opacity:.35;
  --swiper-pagination-bullet-size:max(6px,calc(9 * var(--u)));
  --swiper-pagination-bullet-horizontal-gap:max(3px,calc(5 * var(--u)));
}
.swiper-button-prev,.swiper-button-next{
  width:calc(40 * var(--u));height:calc(40 * var(--u));margin-top:calc(-20 * var(--u));border-radius:50%;background:rgba(20,16,40,.5);
}
.swiper-button-prev{left:calc(8 * var(--u))}
.swiper-button-next{right:calc(8 * var(--u))}
.swiper-button-prev::after,.swiper-button-next::after{font-size:calc(16 * var(--u));font-weight:700}
.swiper-button-prev:focus-visible,.swiper-button-next:focus-visible{outline-color:#fff}

.hot-swiper{padding:0 calc(20 * var(--u)) calc(50 * var(--u))}
.hot-swiper .swiper-slide{width:84%}
.hot-swiper .swiper-slide img{width:100%;height:auto}
.hot-swiper .swiper-button-prev,.hot-swiper .swiper-button-next{top:calc(50% - calc(25 * var(--u)))}
.hot-swiper .swiper-pagination{bottom:calc(8 * var(--u))}

/* ==========================================================================
   9. PODO TV  (Swiper)
   ========================================================================== */
.tv{background:#efe6f6;padding:calc(30 * var(--u)) 0 calc(60 * var(--u))}
.tv__head{display:flex;justify-content:space-between;align-items:center;padding:0 calc(30 * var(--u));margin-bottom:calc(20 * var(--u))}
.tv__titles{color:#111}
.tv__en{display:block;font-size:calc(52 * var(--u));font-weight:800;letter-spacing:-.01em;line-height:1.15}
.tv__ko{display:block;font-size:calc(40 * var(--u));font-weight:400;line-height:1.25}
.tv__more{
  flex:none;width:calc(54 * var(--u));height:calc(54 * var(--u));border:2px solid #111;border-radius:50%;background:transparent;color:#111;
  display:flex;align-items:center;justify-content:center;
}
.tv__more svg{width:calc(26 * var(--u));height:calc(26 * var(--u))}
.tv-swiper{padding:0 calc(40 * var(--u))}
.tv-swiper .swiper-slide{width:90%}
.tv-swiper .swiper-button-prev,.tv-swiper .swiper-button-next{top:calc(141.75 * var(--u))}
.vid{display:block;cursor:pointer;background:#fff;border-radius:calc(10 * var(--u))}
.vid__thumb{position:relative;aspect-ratio:16 / 9;border-radius:calc(10 * var(--u)) calc(10 * var(--u)) 0 0;overflow:hidden;background:#222}
.vid__thumb img{width:100%;height:100%;object-fit:cover}
.vid__time{
  position:absolute;right:calc(10 * var(--u));bottom:calc(10 * var(--u));background:rgba(0,0,0,.75);color:#fff;
  font-size:calc(18 * var(--u));line-height:1.3;padding:calc(2 * var(--u)) calc(8 * var(--u));border-radius:calc(4 * var(--u));
}
.vid__body{background:#fff;border-radius:0 0 calc(10 * var(--u)) calc(10 * var(--u));padding:calc(16 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u))}
.vid__ch{font-size:calc(19 * var(--u));font-weight:700;color:var(--purple);line-height:1.4}
.vid__title{
  font-size:calc(22 * var(--u));color:#222;line-height:1.45;margin-top:calc(4 * var(--u));min-height:calc(2 * 1.45 * 22 * var(--u));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.02em;
}

/* ==========================================================================
   10. LOCATION
   ========================================================================== */
.loc{background:#ece6f4;padding:calc(78 * var(--u)) calc(30 * var(--u)) calc(60 * var(--u))}
.loc__title{
  font-family:"Cinzel","Times New Roman",serif;font-weight:700;font-size:calc(40 * var(--u));color:#111;
  text-align:center;margin-bottom:calc(34 * var(--u));line-height:1.2;
}
.loc__map{display:block;width:100%;height:calc(385 * var(--u));border:0;background:#ddd}
.loc__addr{font-size:calc(18 * var(--u));color:#222;margin-top:calc(14 * var(--u));line-height:1.45}
.loc__h{display:flex;align-items:center;gap:calc(10 * var(--u));margin-top:calc(70 * var(--u));font-size:calc(30 * var(--u));font-weight:700;color:#111;line-height:1.2;letter-spacing:-.02em}
.loc__h svg{flex:none;width:calc(28 * var(--u));height:calc(28 * var(--u))}
.hours{display:grid;grid-template-columns:calc(168 * var(--u)) minmax(0,1fr);gap:calc(4 * var(--u));margin-top:calc(22 * var(--u))}
.hours dt,.hours dd{height:calc(66 * var(--u));display:flex;align-items:center;font-size:calc(22 * var(--u));white-space:nowrap}
.hours dt{background:var(--purple);color:#fff;padding-left:calc(20 * var(--u));letter-spacing:-.04em}
.hours dd{background:#f7f4fb;color:#444;padding-left:calc(34 * var(--u));letter-spacing:-.02em}
.loc__tel{display:block;margin-top:calc(10 * var(--u));font-size:calc(86 * var(--u));font-weight:800;color:#000;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.loc__biz{margin-top:calc(50 * var(--u));font-size:calc(15 * var(--u));color:#777;line-height:1.6}

/* ==========================================================================
   Privacy modal (viewport overlay: px 단위)
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal__panel{
  position:relative;background:#fff;width:100%;max-width:560px;max-height:calc(100vh - 40px);overflow:auto;
  padding:30px;border-radius:12px;color:#222;line-height:1.7;font-size:15px;
}
.modal__panel h3{font-size:19px;font-weight:700;color:#1c1a2e;margin:0 36px 14px 0}
.modal__panel p{margin:0 0 4px}
.modal__etc{margin-top:12px !important;color:#555}
.modal__close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;padding:0;border:0;background:none;color:#222;
  display:flex;align-items:center;justify-content:center;
}
.modal__close svg{width:22px;height:22px}

/* ==========================================================================
   Floating KakaoTalk button (고정 위치 요소라 640 캔버스 배율이 아닌 일반 px)
   ========================================================================== */
.kakao-float{
  position:fixed;
  right:max(16px, calc((100vw - 640px) / 2 + 16px));
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:500;
  width:64px;height:64px;border-radius:50%;
  background:#FEE500;border:1px solid rgba(0,0,0,.08);color:#3C1E1E;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity 200ms ease,transform 200ms ease,visibility 0s linear 200ms;
}
.kakao-float.is-visible{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity 200ms ease,transform 200ms ease,visibility 0s;
}
.kakao-float svg{display:block;width:26px;height:26px}
.kakao-float span{font-size:11px;font-weight:700;line-height:1;letter-spacing:-.02em;color:#3C1E1E}
.kakao-float:focus-visible{outline:2px solid #3C1E1E;outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .kakao-float,.kakao-float.is-visible{transition:none}
}