/* ========================================================================== */
/* 0) DESIGN TOKENS — colors & type (border/radius는 숫자값 사용)               */
/* ========================================================================== */
:root{
  /* Page width */
  --page-min: 300px;
  --page-max: 500px;
  --gnb-min-height: 140px;

  /* Brand */
  --primary-500: #2299FA;
  --primary-400: #7cc2ff;
  --primary-300: #a8d7ff;
  --primary-200: #cde8ff;
  --primary-100: #e6f4ff;

  --secondary-700: #6b3fa7;
  --secondary-500: #8b5cf6;
  --secondary-300: #c4a8ff;
  --secondary-100: #efe7ff;

  /* Grays (guide) */
  --gray-900:#0b0f14;
  --gray-800:#1a242f;
  --gray-700:#2b3947;
  --gray-600:#3c4d5f;
  --gray-500:#536579;
  --gray-400:#7d8fa3;
  --gray-300:#a7b4c1;
  --gray-200:#e8edf2;
  --gray-100:#f6f8fa;
  --gray-50:#AEB3BE;

  /* Surface */
  --bg-app:#FFFFFF;
  --bg-muted:#F7F9FB;

  /* Typography scale (guide pt 그대로) */
  --fs-h1: 1.5rem;    /* 24px */
  --fs-h2: 1.25rem;   /* 20px */
  --fs-h3: 1.125rem;  /* 18px */
  --fs-b1: 1rem;      /* 16px */
  --fs-b2: 0.875rem;  /* 14px */
  --fs-b3: 0.8125rem;  /* 13px */
  --fs-b4: 0.9375rem;  /* 15px */
 
  --fs-cap1: 0.75rem; /* 12px */

  --lh-tight: 1.15;
  --lh-head:  1.25;
  --lh-body:  1.45; 

  --fw-bold:   700;
  --fw-medium: 500;
  --fw-light:  300; 
}

/* ========================================================================== */
/* 1) RESET / BASE                                                             */
/* ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Pretendard","Pretendard Variable",system-ui,-apple-system,sans-serif;
  background:var(--bg-app);
  max-width:var(--page-max);
  min-width:var(--page-min);
  margin:0 auto;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

/* 배경 컬러*/
.color-bg{
  background:#EAF2FE;
  padding-bottom:120px;
  max-width:var(--page-max);
  min-width:var(--page-min);
}

/* ========================================================================== */
/* 2) UTILITIES — type                                              */
/* ========================================================================== */
.h1{font-size:var(--fs-h1);line-height:var(--lh-head);font-weight:var(--fw-bold)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-head);font-weight:var(--fw-bold)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-head);font-weight:var(--fw-bold)}

.body1-b{font-size:var(--fs-b1);line-height:var(--lh-body);font-weight:var(--fw-bold)}
.body1-m{font-size:var(--fs-b1);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.body1-l{font-size:var(--fs-b1);line-height:var(--lh-body);font-weight:var(--fw-light)}

.body2-b{font-size:var(--fs-b2);line-height:var(--lh-body);font-weight:var(--fw-bold)}
.body2-m{font-size:var(--fs-b2);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.body2-l{font-size:var(--fs-b2);line-height:var(--lh-body);font-weight:var(--fw-light)}

.cap1-b{font-size:var(--fs-cap1);line-height:var(--lh-tight);font-weight:var(--fw-bold)}
.cap1-m{font-size:var(--fs-cap1);line-height:var(--lh-tight);font-weight:var(--fw-medium)}
.cap1-l{font-size:var(--fs-cap1);line-height:var(--lh-tight);font-weight:var(--fw-light)}
/* ========================================================================== */
/* 3) COMPONENTS                                                               */
/* ========================================================================== */


/* Header */
.header{
  padding:10px 20px;background:#fff;
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:10;
}
.logo{width:118px;height:32px}
.logo img{width:118px;height:32px;object-fit:contain}


/* CTA */
.inquiry-btn{
  background:var(--primary-200);color:var(--primary-500);
  padding:6px 8px;border-radius:999px;display:flex;align-items:center;gap:4px
}
.inquiry-btn .icon{width:18px;height:18px;display:block}

/* Header */
.sub-header{
  position:sticky; top:0; z-index:10; height:52px;
  padding:10px 20px; background:#fff;
  display:flex; align-items:center;
}
.hdr-back{
  padding:0;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center
}
.hdr-back img{width:24px;height:24px;display:block}
.hdr-title{
  flex:1;text-align:center;
  color:var(--gray-900);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}
.hdr-spacer{width:24px}

/* ========== situ-list ========== */
.article-section{width:100%;display:flex;flex-direction:column}
.article-head{padding:24px 20px 36px;display:flex;flex-direction:column;gap:10px;background:#fff}
.article-title{margin:0;color:var(--gray-900);}
.article-title .accent{color:var(--primary-500)}
.note-badge{
  display:inline-flex;align-self:flex-start;max-width:100%;
  padding:4px 6px 2px; border-radius:4px;
  color:var(--primary-500);background:var(--primary-100)
}
.article-lead{margin:0;color:var(--gray-700)}

.situ-section{padding:36px 20px;display:flex;flex-direction:column;gap:32px}
.situ-head{display:inline-flex;align-items:center;gap:12px}
.situ-head img{width:44px;height:44px;display:block}
.situ-title{margin:0;color:var(--gray-900)}

.situ-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}

.situ-item{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px;min-height:60px;background:var(--bg-app);
  border-radius:16px;border:1px solid var(--primary-100);
  cursor:pointer;
  box-shadow:0 4px 40px color-mix(in srgb, var(--primary-500) 10%, transparent);
}

.situ-item .txt{color:var(--gray-600)}
.situ-item .chev{width:24px;height:24px}

/* Bottom sheet */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:2000
}
.bottom-sheet{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);
  width:100%;max-width:var(--page-max);background:var(--bg-app);
  border-top-left-radius:12px;border-top-right-radius:12px;
  padding:12px 20px 24px;z-index:2001;transition:transform .28s ease
}
.sheet-open .sheet-overlay{opacity:1;pointer-events:auto}
.sheet-open .bottom-sheet{transform:translate(-50%,0)}
body.sheet-open{overflow:hidden}

.sheet-grip{width:40px;height:5px;margin:0 auto;border-radius:1000px;background:color-mix(in srgb, var(--gray-900) 16%, transparent)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.sheet-title{margin:0;color:var(--gray-900)}
.sheet-close{
  width:32px;height:32px;padding:0;border:0;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer
}
.sheet-close img{width:24px;height:24px;display:block}

.sheet-feature{display:flex;align-items:center;gap:8px;padding:16px;border-radius:16px;background:var(--primary-200)}
.sheet-ico{width:34px;height:34px;position:relative}
.sheet-ico img{width:34px;height:34px;display:block}
.sheet-sub{color:var(--gray-900)}
.sheet-desc{margin:20px 0;color:var(--gray-700);white-space:pre-line}
.sheet-cta{display:block;width:100%;text-align:center;text-decoration:none}
.btn.primary{background:var(--primary-500);color:#fff;padding:16px 24px;border-radius:8px;border:0}


/* ========== compare / slider ========== */
.compare-section{
  padding:32px 20px 36px;background:var(--bg-app);
  display:flex;flex-direction:column;gap: 10px;}
.photo-swiper{overflow:hidden;padding-top: 20px;}
.img-swiper{--img-slide-w:160px;overflow:visible}
.img-swiper .swiper-wrapper{align-items:stretch}
.img-swiper .swiper-slide{width:var(--img-slide-w)}
.img-swiper .swiper-slide img{display:block;width:100%;object-fit:cover;border-radius:12px}
@media (min-width:480px){.img-swiper{--img-slide-w:200px}}

/* ========== banner ========== */
.final-banner{
  padding:0 20px 16px;
  background:var(--bg-app);
  cursor:pointer;
}
.final-banner-link{
  display:block;
  border-radius:16px; overflow:hidden;
}
.final-banner img{
  display:block; width:100%; height:auto;
}

/* Fixed CTA */
.page-cta{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:var(--page-max);
  background:var(--bg-app);border:0;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:12px;
  z-index:1200
}
.cta-tip{
  margin:0;padding:10px 16px;background:var(--gray-900);color:#fff;
  border-radius:12px;position:relative;
  text-align:center;max-width:100%
}
.cta-tip::after{
  content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid var(--gray-900)
}
.btn-cta{
  width:100%;padding:16px 0;border:0;border-radius:12px;
  background:var(--primary-500);color:#fff;cursor:pointer
}
.btn-cta:active{transform:translateY(1px)}


/* Reserve sheet (over CTA) */
body.reserve-open{overflow:hidden}
.reserve-overlay{
  position:fixed;left:0;right:0;top:0;bottom:0;
  background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1201
}
body.reserve-open .reserve-overlay{opacity:1;pointer-events:auto}

.reserve-sheet{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);
  width:100%;max-width:var(--page-max);background:var(--bg-app);
  border-top-left-radius:16px;border-top-right-radius:16px;
  z-index:1300;transition:transform .28s ease;
  max-height:calc(100dvh - 54px);display:flex;flex-direction:column;overflow:hidden;
  padding-bottom:max(12px,env(safe-area-inset-bottom))
}
body.reserve-open .reserve-sheet{transform:translate(-50%,0)}

.reserve-grip{height:28px;display:grid;place-items:center;padding-top:max(8px,env(safe-area-inset-top,0))}
.reserve-grip::after{content:"";width:56px;height:6px;border-radius:999px;background:var(--gray-100)}
.reserve-head{
  position:sticky;top:0;z-index:1;background:var(--bg-app);
  padding:16px 20px;display:flex;align-items:center;justify-content:center;
}
.reserve-title{margin:0;color:var(--gray-900);text-align:center}
.reserve-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer
}

.reserve-form{
  padding:8px 20px 0px;display:flex;flex-direction:column;gap:18px;
  overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;padding-bottom:74px;
}
.rf-field{display:flex;flex-direction:column;gap:10px}
.rf-field label{color:var(--gray-900)}
.req{color:#ff4d4f;margin-left:4px}
.rf-field input,
.rf-field textarea,
.rf-select select{
  border:0;background:var(--gray-100);border-radius:10px;font-size: var(--fs-b2);font-weight: var(--fw-medium);
  padding:16px 12px;color:var(--gray-900);outline:none;font-family:inherit;}

.rf-field textarea{min-height:120px;resize:vertical;height:auto;}
.rf-field input::placeholder,.rf-field textarea::placeholder{color:var(--gray-300)}
.rf-help{color:var(--secondary-500)}


/* Custom select */
.ui-select{position:relative;width:100%}
.ui-select-native{position:absolute;inset:0;opacity:0;pointer-events:none}
.ui-select-toggle{
  width:100%;
  border:0;border-radius:10px;
  padding:16px 12px;
  background:var(--gray-100);
  color:var(--gray-900);
  font-family:inherit;
  font-size:var(--fs-b2);
  font-weight:var(--fw-medium);
  outline:none;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  appearance:none;-webkit-appearance:none;
}
.ui-select-caret{width:24px;height:24px;flex:0 0 24px;transition:transform .2s ease}
.ui-select.open .ui-select-caret{transform:rotate(-180deg)}
.ui-select-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg-app);
  border:1px solid var(--gray-100);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);
  overflow:hidden;display:none;z-index:40
}

.ui-select.is-empty .ui-select-label{
  color: var(--gray-300);
}

.ui-select .ui-select-label{
  color: var(--gray-900);
}

.ui-select.open .ui-select-menu{display:block}
.ui-option{padding:12px 16px;color:var(--gray-900);background:var(--bg-app);cursor:pointer}
.ui-option + .ui-option{border-top:1px solid var(--gray-100)}

/* 동의 */
.rf-consent{display:flex;align-items:center;gap:8px;color:var(--gray-900)}
.rf-consent input{position:absolute;opacity:0;width:0;height:0}
.rf-consent .fakebox{
  width:20px;height:20px;border-radius:4px;outline:1px var(--gray-600) solid;outline-offset:-1px;background:#fff;position:relative;transition:all .15s ease
}
.rf-consent input:checked + .fakebox{outline-color:var(--primary-500);background:var(--primary-500)}
.rf-consent input:checked + .fakebox::after{
  content:"";position:absolute;left:7px;top:2px;width:4px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)
}
.rf-more{color:var(--gray-400);text-decoration:underline}

.rf-checklist{display: flex; flex-direction: column; gap: 12px; padding: 24px 0;}
.rf-checklist ul{padding-left:18px;color:var(--gray-600);}
.rf-checklist ul li{margin-bottom:4px}
.rf-need{text-align: center; color: var(--primary-500);}
.rf-tip{display:inline-block;margin-top:12px;background:var(--primary-100);color:var(--primary-500);padding:4px 8px;border-radius:6px;}
.rf-note{margin: 0 auto;}

.reserve-submit{
  width:100%;padding:16px 0;border:0;border-radius:12px;
  background:var(--primary-500);color:#fff;cursor:pointer
}

/* 예약 버튼 바(고정) */
.reserve-btn{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:var(--page-max);
  background:var(--bg-app);border:0;
  padding:16px 20px calc(10px + env(safe-area-inset-bottom));
}

/* 스크롤 미세 보정 */
.reserve-form{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}