@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

/* 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:800px; 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% / 6 - 4px); border:none; padding:8px 6px; font-size:18px; font-weight: 400; border-radius:14px; cursor:pointer; background:#0074ff; color:#ffff; transition:background .18s ease,color .18s ease; }
.tab.is-active { background:#003370; color:#ffff; }


/* 패널 */
.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:#0074ff; border:1px solid #eaeded; border-radius:12px; padding:20px; margin-top:10px; font-size:25px; color:#ffff; font-weight:bold; line-height:1.3em; }
.highlight-box2 { grid-column:1 / -1; background:#003370; border:1px solid #eaeded; border-radius:12px; padding:10px 20px; font-size:18px; color:#ffff; }
.highlight-text { font-size:18px; line-height:1.5; font-weight: 600;}


/* 배너 이미지 적용 시 */
.highlight-box3 { grid-column:1 / -1; background:#ff7366; border:1px solid #eaeded; border-radius:12px; padding:0 20px; margin-top:10px; font-size:25px; color:#ffff; font-weight:bold; line-height:1.3em; display:flex; align-items:center; justify-content:space-between; gap:20px; overflow:hidden; }
.highlight-box4 { grid-column:1 / -1; background:#0074ff; border:1px solid #eaeded; border-radius:12px; padding:0 20px; margin-top:10px; font-size:25px; color:#ffff; font-weight:bold; line-height:1.3em; display:flex; align-items:center; justify-content:space-between; gap:20px; overflow:hidden; }
.banner-img { width:auto; height:100px; flex-shrink:0; }


/* 텍스트 */
.note { font-size:16px; color:#7a7a7a; }
.name { font-size:20px; font-weight:700; margin:5px 0 5px; }
.sub { font-size:13px; color:#8d8d8d; }
.thin-text { font-weight: 400; /* 얇게 */ }
.color1 { color:#ff7366; }
.color2 { color:#dcfffb; }
.color3 { color:#00248c; }
.color4 { color:#c10448; }
.color5 { color:#0d40b9; }
.color6 { color:#3cc7c7; }


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


/* 퀵메뉴 */
.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 10px 0; font-size:11px; font-weight: 600; color:#888; background:#fff; border-radius:12px; padding:12px 16px; text-align:center; }


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

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

  .highlight-box { font-size:22px; }
  .highlight-box3 { font-size:22px; }
  .name { font-size:18px; }

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

  .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) / 10); padding:8px 4px; font-size:13px;}

.highlight-box1 {
        padding: 20px;
        border-radius: 16px;
        font-size: 18px; /* 글자 크기 축소 */
    } 
}

@media (max-width: 480px) {
    .highlight-box1 {
        padding: 15px;
        border-radius: 12px;
        font-size: 15px; /* 모바일용 글자 크기 조정 */
        background-size: cover; /* 모바일 화면 비율에 맞춰 배경 채움 */
    }
}