/* reset */
* { box-sizing:border-box; margin:0; padding:0; }

body { font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Noto Sans KR",system-ui,sans-serif; background:#f3f4f8; color:#181818; line-height:1.6; }

/* 레이아웃 */
main { max-width:920px; margin:0 auto; padding:20px 10px 40px; letter-spacing:-0.03em; }


/* 메인 이미지 아래: 스탠다드/프리미엄 스위치 */
.plan-font{ font-family: "the-seasons", sans-serif; font-weight: 700; font-style: normal; }
.plan-switch{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom:0;}
.plan-switch-btn[data-plan="standard"]{ --btn-bg: url("../images/common/btn-standard_01.jpg"); }
.plan-switch-btn[data-plan="premium"] { --btn-bg: url("../images/common/btn-premium_01.jpg"); }
.plan-switch-btn[data-plan="mf"] { --btn-bg: url("../images/common/btn-mf.jpg"); }
.plan-switch-btn[data-plan="sciq"] { --btn-bg: url("../images/common/btn-sciq.jpg"); }

.plan-switch-btn{ flex:0 0 calc(50% - 5px); height:100px; border-radius:14px; background-image: linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)), var(--btn-bg); color:#a28d79; background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; color:#a28d79; font-weight:800; font-size:25px; text-decoration:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .18s ease, color .18s ease; }
.plan-switch-btn--doctor { flex-direction:column; gap:2px; padding:12px 54px; font-size:20px; line-height:1.25; text-align:center; font-weight: 500; color:#181818; }
.plan-switch-logo { display: block; width: auto; max-width: 120px; height: 40px; object-fit: contain;}


/* 호버하면 버튼 검정색 오버레이*/
.plan-switch-btn:hover,
.plan-switch-btn:focus-visible,
.plan-switch-btn.is-active{ background-image: linear-gradient(rgba(24,24,24,0.78), rgba(24,24,24,0.78)), var(--btn-bg); color:#fff; }


/* 호버했을 때 버튼 검정색 오버레이+로고 흰색 반전 */
.plan-switch-logo { transition: filter 0.18s ease; }

.plan-switch-btn:hover .plan-switch-logo,
.plan-switch-btn:focus-visible .plan-switch-logo,
.plan-switch-btn.is-active .plan-switch-logo { filter: brightness(0) invert(1); }


/* 스탠다드/프리미엄 콘텐츠 토글 */
.plan-content{ display:none; }
.plan-content.is-active{ display:block; }
.premium-empty{ margin-top:16px; padding:16px; border-radius:14px; background:#fff; border:1px solid #e2e8f0; text-align:center; font-weight:700; color:#555; }
.plan-switch-btn--badge{ position:relative; }
.plan-switch-btn--badge::before{ content:"Click"; position:absolute; top:10px; left:12px; padding:4px 10px; border-radius:8px; background:#a28d79; color:#fff; font-size:20px; font-weight:700; line-height:1; }

/* 호버/포커스/활성(눌림) : 흰 배경 + 검정 글씨 */
.plan-switch-btn--badge:hover::before,
.plan-switch-btn--badge:focus-visible::before,
.plan-switch-btn--badge.is-active::before{ background:#fff; color:#181818; }


/* 메인 비주얼 */
.main { margin-bottom:16px; border-radius:18px; overflow:hidden; }
.main img { display:block; width:100%; height:100%; object-fit:cover; transition: opacity .15s ease; }


/*섹션 이미지*/
.sectionImg { border-radius:18px; overflow:hidden;}
.sectionImg img { display:block; width:100%; height:100%; object-fit:cover; }


/* 유튜브 영상 */
.sectionVideo { position: relative; grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
.sectionVideo iframe { display: block; width: 100%; height: 100%; border: 0;}


/*전후사진*/
.sectionSwiper {  position: relative; width: 100%; max-width: 600px; margin: 0 auto; min-width: 0;}
.bnaSwiper { margin-top: 10px; width: 100%; overflow: hidden; border-radius: 18px; }
.bnaSwiper .swiper-slide img { width: 100%; height: auto; display: block; object-fit: cover;}
.swiper-button-next, .swiper-button-prev { color: #888 !important; z-index: 10;}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 24px !important; font-weight: bold; }
.bna-txt { margin-bottom: 10px; font-size:13px; color:#888; text-align:center;}


/*PC > 모바일 줄바꿈*/
.pc-hide { display: none; }


/* 탭 */
.tabs { display:flex; flex-wrap:wrap; gap:4px; margin-top: 16px;}
.tabs.vip-tabs { display:none; margin-bottom:16px; }
.tabs.vip-tabs.is-visible { display:flex; }
.tab { flex:1 0 calc(100% / 3 - 4px); border:none; padding:8px 6px; font-size:18px; border-radius:14px; cursor:pointer; background:#e5e7eb; color:#666666; transition:background .18s ease,color .18s ease; }
.tab.is-active { background:#181818; color:#f9fafb; }
.tab-new { display: flex; align-items: center; justify-content: center; gap: 4px; }
.new { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background-color: #e44242; border-radius: 50%; color: #fff; font-size: 13px; line-height: 1; letter-spacing: 0; transform: translateY(1px);}
.new.hot { width: auto; min-width: 32px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 700; }


/* 패널 */
.panel { display:none; }
.panel.is-active { display:block; }


/* 카드 그리드 */
.grid { display:grid; grid-template-columns:1fr; gap:10px; }


/* 카드 */
.card { position: relative; background:#fff; border-radius:14px; padding:20px; border:1px solid #e2e8f0; display:flex; flex-direction:column; line-height:1.3;  }


/* 카드 사이 설명 박스 */
.highlight-box { position: relative; z-index: 1; grid-column:1 / -1; background:#a28d79; border:1px solid #e2e8f0; border-radius:12px; padding:10px 20px; font-size:18px; margin-top: 16px; overflow: hidden;}
.highlight-text { font-size:23px; line-height:1.5; font-weight: 600; color: #fff;}
.highlight-subtext { font-size:18px; line-height:1.5; font-weight: 300;  display: flex; justify-content: flex-start; color: #fff; align-items: center; gap: 5px;}
.highlight-subtext .point-txt { font-weight: 600; font-size: 1.1em;}
.highlight-subtext .right { text-align: right; color: rgba(255, 255, 255, 0.7); margin-left: auto;}
.highlight-box::before { content: ""; position: absolute; bottom: -10px; right: -10px; width: 80px;  height: 80px; background-image: url('../images/common/classone_symbol_logo_white.png'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.2; z-index: 0;}

.highlight-box_2 { position: relative; z-index: 1; grid-column:1 / -1; background:#181818; border:1px solid #e2e8f0; border-radius:12px; padding:10px 20px; font-size:18px; overflow: hidden;}
.highlight-subtext_2 { font-size:18px; line-height:1.5; font-weight: 600;  display: flex; justify-content: flex-start; color: #fff; align-items: center; gap: 5px;}


/* 텍스트 */
.note { font-size:16px; color:#a28d79; }
.product-label { display: inline-flex; align-items: center; justify-content: center; margin-left: 7px; padding: 2px 9px; border: 1px solid #a28d79; color: #8c755f; background: #fff; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; vertical-align: 2px; white-space: nowrap; }
.name { font-size:20px; font-weight:700; margin:5px 0 5px; }
.sub { font-size:13px; color:#8d8d8d; }


/*용량, 횟수*/
.price_box { background: #a28d79; color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 13px; margin-right: 5px; vertical-align: text-top;}


/*엘러간 로고*/
.inline-logo { width: 100px; height: auto; vertical-align: middle;}


/*MF로고 - 김재우 원장 페이지 갈색 박스 제목 */
.plan-content[data-plan="mf"] .highlight-text, .plan-content[data-plan="sciq"] .highlight-text { display: flex; align-items: center; }
.mf-inline-logo { display: block; flex: 0 0 auto; width: 50px; height: auto; object-fit: contain; margin: 10px; }
.sciq-inline-logo { display: block; flex: 0 0 auto; width: 100px; height: auto; object-fit: contain; margin: 10px; }


/* 가격 */
.price { margin-top:6px; text-align:right; }
.price-original { display:block; font-size:15px; color:#8d8d8d; text-decoration:line-through; }
.price-sale { font-size:23px; font-weight:700; color:#a28d79; }
.price-unit { font-size:16px; margin-left:2px; color:#181818; }


/* 상품 횟수 구분선*/
.line { border-top: 1px dotted #c4c4c4; margin: 30px 0; }


/* 상세 설명 구분선 */
.subtext { font-size: 20px; line-height: 1.5; font-weight: 500; display: flex; align-items: center; gap: 8px; color: #a28d79; margin: 10px 0 5px 0;}
.subtext::before { content: ""; display: inline-block; width: 3px;  height: 20px; background-color: #a28d79; }


/*오른쪽에 해달라고 하심*/
.sub-right { font-size:13px; color:#8d8d8d; }


/* 퀵메뉴 */
.floating-box { position:fixed; right:16px; bottom:20px; display:flex; flex-direction:column; gap:6px; z-index:100; }
.floating-btn { border:none; display:inline-flex; align-items:center; justify-content:center; min-width:33.33px; padding:8px 20px; font-size:20px; border-radius:999px; cursor:pointer; box-shadow:0 10px 20px -16px rgba(15,23,42,.8); text-decoration:none; font-weight:500; gap:8px; }


/* 아이콘 */
.btn-icon { width:20px; height:20px; object-fit:contain; flex-shrink:0; display:block; }


/* 개별 색상 */
.logo { background:#a28d79; color:#fff; }
.kakao { background:#fee500; color:#181818; }
.call { background:#181818; color:#fff; }
.naver { background:#38c65d; color:#f9fafb; }


/* 안내 문구 */
.notice-box { margin:20px 0; font-size:13px; color:#888; background:#fff; border-radius:12px; padding:12px 16px; text-align:center; }


/* 모바일 */
@media (max-width:640px) {

  main { padding:16px 12px 80px; }

  .plan-switch-btn--badge::before{ top:8px; left:10px; padding:3px 8px; font-size:11px; border-radius:7px; }
  .plan-switch-btn{ height:60px; font-size:15px; border-radius:12px; }
  .plan-switch-btn--doctor { gap:4px; padding:8px 38px; font-size:12px; line-height:1.15;  }
  .plan-switch-logo { max-width: 80px; height: 22px; }

  .main { border-radius:10px;}


  /* 상품 */
  .note { font-size:13px; }
  .name { font-size:17px; }
  .sub { font-size:11px; }
  .card { border-radius:10px;}


  /* 가격 */
  .price { margin-top:3px; }
  .price-original { font-size:13px; }
  .price-sale { font-size:23px; }

  .floating-box { position:fixed; left:0; right:0; bottom:0; transform:none; flex-direction:row; justify-content:space-between; gap:4px; padding:8px 10px; background:#f9fafb; border-top:1px solid #e5e7eb; display: flex;}
  .floating-btn { flex:1; min-width:0; font-size:16px; border-radius:10px; padding:15px 4px; text-align:center; box-shadow:none; }
  .logo, .kakao, .call { flex:1; }
  .top { flex:1; }
  .tabs { flex-wrap:wrap; gap:4px; padding:2px 0; }
  .tab { border-radius:10px; padding:8px 4px; font-size:13px;}
  .new { width: 15px; height: 15px; font-size: 10px;}
  .new.hot { min-width: 25px; padding: 0 3px; font-size: 8px;}

  .sectionImg { border-radius:10px;}
  .sectionVideo { border-radius: 10px; }

  /* 전후사진 */
  .sectionSwiper { max-width: 100% !important;}
  .bnaSwiper { border-radius: 10px; }
  .bnaSwiper .swiper-slide img { max-width: 100% !important; width: 100% !important; height: auto !important; }
  .swiper-button-next, .swiper-button-prev {
    background: rgba(255, 255, 255, 0.3) !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center;}
  .swiper-button-next::after, .swiper-button-prev::after { font-size: 16px !important; }
  .swiper-button-prev { left: 15px !important; }
  .swiper-button-next { right: 15px !important; }


  .pc-hide { display: block; content: "";}
  .notice-box { font-size:11px;}
  .highlight-text { font-size:16px;}
  .highlight-subtext { font-size:10px; gap: 2px;}
  .bna-txt {font-size:10px;}
}