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

/* 배경 흰색 (가이드 토큰 반영) */
.bg{
  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}

/* ========== 탭/필터 ========== */
.experts-head{background:#fff;margin-top:20px !important;}
.tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--gray-300);
  
}
.tab{
  appearance:none;background:none;border:0;color:var(--gray-300);
  cursor:pointer;position:relative;text-align:center; padding-bottom: 12px;
  font-size:var(--fs-b1);line-height:var(--lh-body);font-weight:400;
}
.tab.is-active{color: var(--primary-500); font-weight: var(--fw-bold);}
.tab.is-active::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--primary-500);border-radius:999px
}

.filters{
  display:flex;gap:8px;padding:12px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none;touch-action:pan-x; 
}
.filters::-webkit-scrollbar{display:none}
.filters.grabbing{cursor:grabbing}

.chip{
  flex:0 0 auto;border:1px solid var(--gray-200);background:#fff;color:var(--gray-500);border-radius:999px;padding:6px 12px;
 display:inline-flex;align-items:center;gap:6px;}
.chip.is-active{border-color:var(--primary-500);
  background:var(--primary-100);  
  color:var(--primary-500);}
.chip .icon{width:18px;height:18px;display:block}

/* ========== EVENT 배너 ========== */
.event-banner{padding:16px 20px;background:#fff}
.event-banner img{display:block;width:100%;height:auto;border-radius:16px}


/* ===== 탭 패널 표시제어 ===== */
.tab-panel{display:none}
.tab-panel.show{display:block}

/* ===== 포인트 정보 ===== */
.mypoint{padding:16px 20px;display: flex;align-items: center;justify-content:space-between;}
.mypoint .title{font-size: 20px;color: #302F3E;font-weight: 600;}
.mypoint .point{font-size: 16px;font-weight: 600;padding: 8px 12px;background: #2299FA;border-radius: 10px;color: #fff;}
.mypoint .point .p{color : #FEE500;margin-left: 4px;}

/* ===== 인포 리스트(포인트 얻기 상단 2개) ===== */
.info-list{padding:20px;display:flex;flex-direction:column;gap:32px;background:#fff;border-top: 8px solid #EAF2FE; border-bottom: 8px solid #EAF2FE;}
.info-item{display:flex;align-items:center;gap:18px}
.info-icon{width:60px;height:60px;background:#E8F0F9;border-radius:12px;flex:0 0 60px}
.info-icon img{width:60px; height: 60px;}
.info-texts{display:flex;flex-direction:column;gap:6px;min-width:0}
.info-title{font-size:18px;font-weight:700;line-height:1.3;color:#302F3E}
.info-link{display:inline-flex;align-items:center;gap:2px;color:#2299FA;text-decoration:none;line-height: 20px;}
.info-link-caret{width:20px;height:20px;}
.divider{width: 100%;
    background: #DDE7F2;
    height: 1px;}    


/* ===== Filter Bottom Sheet ===== */
body.filter-open{overflow:hidden}
.filter-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.filter-open .filter-overlay{opacity:1;pointer-events:auto}

.filter-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.filter-open .filter-sheet{transform:translate(-50%,0)}

.filter-grip{height:28px;display:grid;place-items:center;padding-top:max(8px,env(safe-area-inset-top,0))}
.filter-grip::after{content:"";width:56px;height:6px;border-radius:999px;background:var(--gray-100)}
.filter-head{
  position:sticky;top:0;z-index:1;background:var(--bg-app);
  padding:16px 20px;display:flex;align-items:center;justify-content:center;
}
.filter-title{margin:0;color:var(--gray-900);text-align:center}
.filter-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
}
.filter-body{padding:8px 20px 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pill{
  appearance:none;border:1px solid var(--gray-200); background:#fff;color:var(--gray-500);  border-radius:999px;padding:8px 10px;text-align:center;cursor:pointer;font-size:var(--fs-b4);line-height:var(--lh-body);font-weight:var(--fw-medium)
}
#pill-all{border-radius:6px;padding:8px;border: 0;}
.pill-wide{grid-column:1/3}
.pill.is-selected{border-color:var(--primary-500);
  background:var(--primary-100);  
  color:var(--primary-500);}

.filter-cta{
    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));
}

.btn-primary{
  width:100%;padding:16px 0;border:0;border-radius:12px;
  background:var(--primary-500);color:#fff;cursor:pointer
}
.btn-cta:active{transform:translateY(1px)}


/* ===== 이벤트 카드 ===== */
.event-card{
  background: var(--gray-100);
  border-radius:16px;
  margin:0 20px 24px;
  padding:16px;
  display:flex;flex-direction:column;gap:16px;
}
.event-card-img{width:100%;border-radius:12px}

.event-card-desc{color: var(--gray-500)}
.event-card-cta{
  margin-top:16px; width:100%; appearance:none; border:0;
  background: var(--primary-500);
  color:#fff;
  border-radius:9px; height:50px;
  cursor:pointer;
}

/* ===== 교환 상품 그리드(포인트 사용) ===== */
.gift-grid{
  padding:0px 20px 20px;
  background: var(--bg-app);
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
.gift{display:flex;flex-direction:column;gap:18px}
.gift-thumb{
  height:168px; background: var(--gray-100);
  border-radius:16px; overflow:hidden; border: 1px solid var(--gray-200);
}
.gift-thumb img{width:100%;height:100%;object-fit:cover}

.gift-badge{
  align-self:flex-start;
  background: var(--primary-100);
  color: var(--primary-500);
  padding:6px 10px; border-radius:100px;
}

.gift-name{color: var(--gray-700)}
.gift-point{color: var(--gray-700)}

.gift-info{display:flex;flex-direction:column;}

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

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

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



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