/* ========================================================================== */
/* 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}

/* 배경 그라데이션 (가이드 토큰 반영) */
.gradient-bg{
  background: linear-gradient(180deg, #fff 12%, var(--primary-200) 45%, #fff 100%);
  padding-bottom: calc(var(--gnb-min-height) + env(safe-area-inset-bottom, 0));
  max-width:var(--page-max);
  min-width:var(--page-min);
  margin:0 auto;
}

/* ========================================================================== */
/* 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-b1);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)}
.body2-2{font-size:var(--fs-b3);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.body2-3{font-size:var(--fs-b4);line-height:var(--lh-body);font-weight:var(--fw-bold)}

.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}

/* ===== Banner ===== */
.banner-section{
  padding:20px;
  max-width:var(--page-max);min-width:var(--page-min);margin:0 auto;
}
.banner-card{position:relative}
.banner-img{display:block;width:100%;height:auto;border-radius:12px}
.banner-indicator{
  position:absolute;right:20px;bottom:20px;z-index:50;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(0,0,0,.6);color:#fff;
  padding:4px 10px 2px; border-radius:50px;
  pointer-events:none
}
.banner-indicator .slash,.banner-indicator .total{color:var(--gray-400)}

/* ===== Consult (서비스) ===== */
.consult-section{
  padding:32px 40px;
  max-width:var(--page-max);min-width:var(--page-min);margin:0 auto;

}
.consult-title{
  color:var(--gray-900);margin-bottom:16px;}
.consult-title .accent{color:var(--primary-500)}
.consult-list{display:flex;justify-content:space-between;flex-wrap:wrap}
.consult-item{display:flex;flex-direction:column;align-items:center}
.icon-wrap{
  width:80px;height:80px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:8px
}
.icon-wrap img{width:54px;height:54px;object-fit:contain;display:block}
.bg-blue{background:var(--primary-200)}
.bg-amber{background:#F5E8D3}
.bg-purple{background:#E7E2FB}
.label{color:var(--gray-700);text-align:center;}




/* ===== Form ===== */
.form-section{
  padding:32px 20px;
  max-width:var(--page-max);min-width:var(--page-min);margin:0 auto;
}
.form-head{
  padding:16px;background:rgba(255,255,255,.4);
  border-top-left-radius:16px;border-top-right-radius:16px;
  display:flex;align-items:center;justify-content:space-between
}
.head-left{display:flex;align-items:center;gap:4px}
.logo-ico{width:48px;height:48px;display:grid;place-items:center;overflow:hidden}
.logo-ico img{width:37px;height:43px;object-fit:contain}
.brand{
  margin:0;color:var(--gray-900);}
.brand .accent{color:var(--primary-500)}
.head-link{
  color:var(--primary-500);
  text-decoration:none
}

.form-body{
  background:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:16px;
  padding:24px 20px 32px;display:flex;flex-direction:column;gap:28px
}

.notice{
  background:var(--gray-100);
  border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px
}
.notice-row{
  display:flex;align-items:flex-start;gap:8px;
  color:var(--gray-500);
}
.notice-row .chk img{width:18px;height:18px;display:block;margin-top:2px}
.kakao-ico{width:24px;height:24px;display:block}

.reserve-form{display:flex;flex-direction:column;gap:18px;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}
.rf-field{display:flex;flex-direction:column;gap:6px}
.rf-field label{color:var(--gray-900)}
.req{color:#ff4d4f;margin-left:4px}
.rf-field input,
.rf-field textarea,
.rf-select select,
.file-trigger{
  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)}

/* 파일 입력 */
.file-input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);overflow:hidden
}
.file-trigger{display:flex;height: 49px;align-items:center;justify-content:center;gap:8px;width:100%}
.file-ico{width:20px;height:20px;color:var(--gray-400)}
.file-trigger.has-file{color:var(--gray-900)}
.file-trigger .file-text{max-width:80%; color: var(--gray-400); font-size: var(--fs-b2);font-weight: var(--fw-medium);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.file-field.is-invalid .file-trigger{border-color:var(--secondary-500);color:var(--secondary-500)}

/* 날짜 입력 */
.date-input-wrap{position:relative}
.date-input-wrap input[type="date"]{
  width:100%;height:49px;border:0;border-radius:10px;font-size: var(--fs-b2);font-weight: var(--fw-medium);
  background: var(--gray-100);color:var(--gray-300);padding:16px 12px;
  outline:none
}
.date-ph{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  pointer-events:none;opacity:.6;color:var(--gray-400);font-size: var(--fs-b2);font-weight: var(--fw-medium);
}
.date-ph.hidden{display:none}
.calendar-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer
}
.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;pointer-events:none}
.date-input-wrap.is-empty input[type="date"]::-webkit-datetime-edit,
.date-input-wrap.is-empty input[type="date"]::-webkit-datetime-edit-year-field,
.date-input-wrap.is-empty input[type="date"]::-webkit-datetime-edit-month-field,
.date-input-wrap.is-empty input[type="date"]::-webkit-datetime-edit-day-field,
.date-input-wrap.is-empty input[type="date"]::-webkit-datetime-edit-text{color:transparent}
.date-input-wrap:not(.is-empty) input[type="date"]::-webkit-datetime-edit{color:var(--gray-900)}

/* 동의 */
.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{margin-top:-4px}
.rf-checklist ul{padding-left:18px;color:var(--gray-600);}
.rf-checklist ul li{margin-bottom:10px}
.rf-tip{display:inline-block;margin-top:12px;background:var(--primary-100);color:var(--primary-500);padding:4px 8px;border-radius:6px;}

/* 액션 버튼 */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;overflow:hidden;margin-top:16px}
.btn{
  padding:16px 0;border:0;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:100%
}
.btn.primary{background:var(--primary-500);color:#fff}
.btn.kakao{background:#FFE812;color:#000}

/* ===== Hospital ===== */
.hospital-section{
  padding:32px 20px;
  max-width:var(--page-max);min-width:var(--page-min);margin:0 auto;
}
.hospital-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.hospital-title{margin:0;}
.hospital-arrow{width:32px;height:32px;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.hospital-arrow img{width:24px;height:24px;display:block}
.hospital-swiper{overflow:hidden}
.hospital-swiper .swiper-wrapper{align-items:stretch}
.hospital-swiper .swiper-slide{width:160px}
.hospital-card{display:flex;flex-direction:column;gap:16px;color: inherit;text-decoration: none;}
.hospital-img{
  height:197px;background-size:cover;background-position:center;border-radius:12px;position:relative
}
.location-tag{
  position:absolute;bottom:10px;right:10px;
  background:rgba(0,0,0,.5);color:#fff;padding:6px 8px;border-radius:999px;

}
.hospital-info{display:flex;flex-direction:column;gap:6px}
.hospital-info .name{color:var(--gray-900)}
.hospital-info .desc{color:var(--gray-600);line-height:1.4}

/* ===== Bottom Banner ===== */
.bottom-banner{
  padding:10px 20px;
  max-width:var(--page-max);min-width:var(--page-min);margin:0 auto;
}
.bottom-banner-content{
  display:flex;align-items:center;gap:10px;color:#fff;
  border-radius:16px;background:var(--primary-500);padding:16px
}
.bottom-banner-icon{width:34px;height:34px}
.bottom-banner-icon img{width:34px;height:34px;display:block}
.bottom-banner-text{flex:1;}
.bottom-banner-chevron{width:20px;height:20px;position:relative}
.bottom-banner-chevron img{width:20px;height:20px;display:block}

/* ===== GNB ===== */
.gnb{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-max);
  min-width: var(--page-min);
  background:#fff;
  box-sizing: border-box;

  /* 2행 레이아웃 */
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;

  /* 안전영역 반영 */
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--gray-100);
  z-index: 100;
}

/* 1행: GNB 메뉴 */
.gnb-menu{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 8px;
}
.gnb-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 4px;min-width:64px;color:var(--gray-500);
}
.gnb-item img{width:24px;height:24px;display:block}
.gnb-item span{font-size:13px;line-height:1;}
.gnb-item.is-active{color:var(--primary-500);font-weight:var(--fw-bold)}
.gnb-item:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;border-radius:8px}

/* 2행: 푸터 */
.site-footer{
   line-height:20px; color:var(--gray-400);
  font-size: 12px; font-weight: 400;
  text-align:left;
  border-top: 1px solid var(--gray-100);
  padding-top: 8px;
  /* 한 줄 요약이 필요하면 다음 두 줄로 2줄 말줄임도 가능
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  */
}
.site-footer a{ color:inherit; text-decoration: underline; }

/* ===== Swiper/section 안전막 ===== */
.banner-section .swiper,.hospital-swiper{overflow:hidden}

/* 좁은 단말 패딩 보정 (선택) */
@media (max-width: 340px){
  .header, .banner-section, .consult-section, .form-section,
  .hospital-section, .bottom-banner { padding-left:16px; padding-right:16px; }
}

.footer{
  padding:16px 20px;color:var(--gray-300); text-align:left; background:var( --bg-muted); line-height: var(--lh-body);
}


.gray50{color:var(--gray-50)}

/* 모바일 화면용 (예: 가로폭 768px 이하일 때) */
@media screen and (max-width: 768px) {
  .consult-section {
    padding: 32px 20px;
  }
}