/* 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:900px; margin:0 auto; padding:20px 16px 40px; letter-spacing:-0.03em; }


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


/* 탭 */
.tabs { display:flex;  flex-wrap:wrap; gap:4px; margin-bottom:14px; }
.tab { flex:1 0 calc(100% / 7 - 4px); border:none; padding:8px 6px; font-size:14px; border-radius:14px; cursor:pointer; background:#e5e7eb; color:#666666; transition:background .18s ease,color .18s ease; }
.tab.is-active { background:#ee89d9; color:#f9fafb; font-weight: 500; }


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


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


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


/* 카드 사이 설명 박스 */
.highlight-box { grid-column:1 / -1; background:#b79adf; border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; font-size:18px; color:#fff; }
.highlight-text { font-size:20px; line-height:1.5; font-weight: 600;}

.highlight-box2 { grid-column:1 / -1; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; font-size:18px; color:#9065cb; }
.highlight-text2 { font-size:20px; line-height:1.5; font-weight: 600;}


/* 텍스트 */
.note { font-size:16px; color:#7a7a7a; }
.name { font-size:20px; font-weight:700; margin:5px 0 5px; }
.sub { font-size:13px; color:#8d8d8d; }


/* 가격 */
.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:#9065cb; }
.price-unit { font-size:16px; margin-left:2px; color:#181818; }
.price-number { font-size:15px; margin-left:20px; color:#9065cb; }


/* 퀵메뉴 */
.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; }


/* 개별 색상 */
.naver { background:#00da0f; color:#fff; }
.kakao { background:#fee500; color:#181818; }
.call { background:#181818; color:#fff; }
.top { background:#000; color:#f9fafb; }


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


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

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

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

  .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:14px; padding:15px 4px; text-align:center; box-shadow:none; }
  .naver, .kakao, .call { flex:2; }
  .top { flex:1; }
  .tabs { flex-wrap:wrap; gap:4px; padding:2px 0; }
  .tab { flex:1 0 calc((100% - 8px) / 4); padding:8px 4px; font-size:13px;}
}