/* ==========================================================================
   product 페이지 스타일 — 섹션별 통합 (원본: product/section*.html)
   ========================================================================== */

/* --- section01-header --- */
.han-a01 {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(80px, 12vw, 200px) clamp(20px, 8vw, 150px) 0;
}
.han-a01__title {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: -50px;
  padding-bottom: 50px;
}
.han-a01__crumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 15px;
  overflow-x: auto;
  scrollbar-width: none;
}
.han-a01__crumb::-webkit-scrollbar { display: none; }
.han-a01__home { width: 24px; height: 24px; flex-shrink: 0; }
.han-a01__dot { width: 4px; height: 4px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.han-a01__crumb-text {
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.025em;
  color: #222;
  white-space: nowrap;
}
.han-a01__heading {
  margin: 0;
  font-family: 'SUIT', 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--main, #0a58a5);
}
.han-a01__wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
.han-a01__tabs {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 50px;
  flex-wrap: wrap;
}
.han-a01__tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 20px 0;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #999;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease-out;
}
.han-a01__tab:hover { color: var(--main, #0a58a5); font-weight: 700; }
.han-a01__tab:focus-visible { outline: 2px solid var(--main, #0a58a5); outline-offset: 4px; border-radius: 2px; }
.han-a01__tab.is-active { font-weight: 700; color: var(--main, #0a58a5); }
/* 카테고리 탭이 버튼(button)이라 테마(GeneratePress) 버튼 배경/포커스 스타일과 충돌해
   검정 배경이 생기는 문제 방지 — 모든 상태에서 배경 강제 투명 */
.han-a01__tab,
.han-a01__tab:hover,
.han-a01__tab:focus,
.han-a01__tab:active { background: transparent !important; box-shadow: none !important; }
.han-a01__hero { width: calc(100% + 2 * clamp(20px, 8vw, 150px)); height: 433px; overflow: hidden; }
.han-a01__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 브레드크럼 링크 */
.han-a01__home-link { display: inline-flex; align-items: center; }
.han-a01__crumb-text { text-decoration: none; }
a.han-a01__crumb-text { transition: color 0.16s ease-out; }
a.han-a01__crumb-text:hover { color: var(--main, #0a58a5); }


/* ── Laptop: ~1439px ─────────────────────── */
@media (max-width: 1439px) {
  .han-a01__hero { height: 340px; }
}

/* ── Tablet 가로: ~1024px ────────────────── */
@media (max-width: 1024px) {
  .han-a01__hero { height: 280px; }
  .han-a01__tabs { gap: 24px; }
  .han-a01__tab { font-size: 16px; }
}

/* ── Tablet 세로: ~768px ─────────────────── */
@media (max-width: 768px) {
  .han-a01 { padding: 60px 24px 0; }
  .han-a01__tabs { justify-content: flex-start; gap: 16px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .han-a01__tab { flex-shrink: 0; font-size: 15px; }
  .han-a01__hero { width: calc(100% + 48px); height: 220px; }
}

/* ── Mobile 가로: ~480px ─────────────────── */
@media (max-width: 480px) {
  .han-a01__tab { font-size: 14px; }
  .han-a01__hero { height: 180px; }
}

/* ── Mobile 세로: ~375px ─────────────────── */
@media (max-width: 375px) {
  .han-a01__crumb-text, .han-a01__tab { font-size: 13px; }
  .han-a01__hero { height: 150px; }
}

/* --- section02-detail --- */
.han-p02 {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: clamp(50px, 6vw, 100px) clamp(20px, 8vw, 150px);
}
.han-p02__pills {
  display: flex;
  gap: 10px;
  padding: 5px;
  border: 1px solid #cdcdcd;
  border-radius: 50px;
  flex-wrap: wrap;
  justify-content: center;
}
.han-p02__pill {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #222;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.han-p02__pill:hover:not(.is-active) { background: rgba(10,88,165,0.08); color: var(--main, #0a58a5); }
.han-p02__pill:focus-visible { outline: 2px solid var(--main, #0a58a5); outline-offset: 2px; }
.han-p02__pill.is-active { background: var(--main, #0a58a5); color: #fff; }
/* 활성 카테고리(분말/유지)의 제품 pill만 표시 — 나머지 카테고리 pill 숨김 */
.han-p02[data-active-cat="meal"] .han-p02__pill[data-category="oil"],
.han-p02[data-active-cat="oil"]  .han-p02__pill[data-category="meal"] { display: none; }

.han-p02__panel {
  display: none;
  width: 100%;
  align-items: stretch; /* 이미지 높이 = 오른쪽 정보 영역 높이 */
  justify-content: center;
  gap: 80px;
}
.han-p02__panel.is-active { display: flex; }

.han-p02__media {
  flex-shrink: 0;
  width: 594px;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.han-p02__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.han-p02__media:hover img { transform: scale(1.04); }

.han-p02__info { flex: 1 1 0; min-width: 0; max-width: 737px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; height: 100%; }
.han-p02__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.han-p02__badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--main, #0a58a5);
  border-radius: 50px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--main, #0a58a5);
}
.han-p02__name {
  margin: 0;
  font-family: 'SUIT', 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 2.9vw, 55px);
  color: #222;
}
.han-p02__pkg {
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #222;
}

.han-p02__table { width: 100%; display: flex; flex-direction: column; }
.han-p02__row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #cdcdcd; }
.han-p02__row--head { background: var(--main, #0a58a5); border-bottom: none; }
.han-p02__row > div { padding: 15px 12px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Pretendard', sans-serif; font-size: 16px; }
.han-p02__row--head > div { font-weight: 700; color: #fff; }
.han-p02__row:not(.han-p02__row--head) > div { font-weight: 500; color: #222; }

/* Squid liver powder — 4등급 비교표. 다른 제품과 같은 [이미지 좌 + info 우] 틀,
   표만 info 안에서 가로 스크롤. 표가 길어도 이미지는 다른 제품과 같은 정사각 크기로 고정하고
   뱃지와 상단 정렬(늘어나지 않게). */
.han-p02__panel[data-panel="squid-liver-powder"] { align-items: flex-start; }
.han-p02__panel[data-panel="squid-liver-powder"] .han-p02__media { aspect-ratio: 1 / 1; }
.han-p02__spectable-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.han-p02__spectable {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-family: 'Pretendard', sans-serif;
}
.han-p02__spectable th,
.han-p02__spectable td {
  border: 1px solid #e5e5e5;
  padding: 12px 10px;
  text-align: center;
  font-size: 14px;
  color: #222;
  white-space: nowrap;
}
.han-p02__spectable thead th { background: var(--main, #0a58a5); color: #fff; font-weight: 700; }
.han-p02__spectable tbody td:first-child { font-weight: 600; background: #f9f9f9; text-align: left; }
.han-p02__spectable tbody td { font-weight: 500; }
.han-p02__group { background: #eef4fb !important; font-weight: 700 !important; color: var(--main, #0a58a5); }

/* ── Laptop: ~1439px ─────────────────────── */
@media (max-width: 1439px) {
  .han-p02__media { width: 420px; }
}

/* ── Tablet 가로: ~1024px ────────────────── */
@media (max-width: 1024px) {
  .han-p02__panel { flex-direction: column; gap: 40px; }
  .han-p02__media { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; } /* 세로 배치에선 정사각 복원 */
  .han-p02__info { max-width: 100%; width: 100%; }
}

/* ── Tablet 세로: ~768px ─────────────────── */
@media (max-width: 768px) {
  .han-p02 { padding: 50px 24px; gap: 40px; }
  .han-p02__pill { font-size: 15px; padding: 8px 14px; }
  .han-p02__row > div { font-size: 14px; padding: 10px 8px; }
}

/* ── Mobile: ~480px ──────────────────────── */
@media (max-width: 480px) {
  .han-p02__pills { width: 100%; }
  .han-p02__name { font-size: clamp(24px, 7vw, 32px); }
}

/* 관리자 WYSIWYG 규격표(제품 CPT의 pr_spec) */
.han-p02__spec-rich { overflow-x: auto; }
.han-p02__spec-rich table { width: 100%; border-collapse: collapse; font-family: 'Pretendard', sans-serif; font-size: clamp(13px, 1vw, 16px); }
.han-p02__spec-rich th, .han-p02__spec-rich td { border: 1px solid #e5e5e5; padding: 10px 12px; text-align: left; vertical-align: middle; }
.han-p02__spec-rich thead th { background: var(--main, #0a58a5); color: #fff; font-weight: 600; }
.han-p02__spec-rich p { margin: 0 0 10px; }