/* 헐티재꿀 상품 상세페이지 공통 CSS
   PC 기준 최대 1200px / 모바일 퍼스트
   2026-08-17 정리: breakpoint를 프로젝트 표준 4단계(768/992/1200/1440)에 맞춰
   1024px -> 992px로 수정. 원본은 ChatGPT 1차 제작본, Claude가 표준 적용.
*/
.htj-detail, .htj-detail * { box-sizing:border-box; }
.htj-detail {
  --ink:#173a26;
  --accent:#f4b400;
  --soft:#fff9e8;
  --line:#e7dfca;
  --muted:#68746d;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  color:#18221c;
  font-family:"Pretendard","Noto Sans KR",Arial,sans-serif;
  line-height:1.65;
  word-break:keep-all;
}
.htj-detail img { display:block; max-width:100%; height:auto; }
.htj-detail a { color:inherit; }
.htj-section { padding:56px 20px; border-bottom:1px solid var(--line); }
.htj-kicker {
  display:inline-flex; align-items:center; min-height:32px; padding:6px 12px;
  border-radius:999px; background:var(--soft); color:var(--ink);
  font-size:13px; font-weight:800; letter-spacing:.02em;
}
.htj-title { margin:14px 0 12px; color:var(--ink); font-size:clamp(28px,5vw,52px); line-height:1.15; }
.htj-lead { margin:0; max-width:760px; color:#425047; font-size:clamp(16px,2.2vw,20px); }
.htj-hero {
  position:relative; overflow:hidden; padding:72px 20px;
  background:linear-gradient(140deg,#fff6ca 0%,#ffd330 100%);
}
.htj-hero:after {
  content:""; position:absolute; width:260px; height:260px; right:-70px; top:-70px;
  border-radius:50%; background:rgba(255,255,255,.32);
}
.htj-hero-inner { position:relative; z-index:1; max-width:1000px; margin:0 auto; }
.htj-hero strong { display:block; margin-top:10px; color:#0d5a36; font-size:clamp(20px,3vw,34px); }
.htj-grid { display:grid; grid-template-columns:1fr; gap:22px; margin-top:28px; }
.htj-card {
  padding:22px; background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 8px 28px rgba(42,58,47,.06);
}
.htj-card h3 { margin:0 0 8px; color:var(--ink); font-size:19px; }
.htj-card p { margin:0; color:#536158; }
.htj-story-image { overflow:hidden; border-radius:22px; background:#eee; }
.htj-story-image img { width:100%; object-fit:cover; }
.htj-info {
  display:grid; grid-template-columns:1fr; gap:12px; margin-top:24px;
}
.htj-info-row {
  display:grid; grid-template-columns:110px 1fr; gap:16px; padding:15px 0;
  border-bottom:1px solid var(--line);
}
.htj-info-row b { color:var(--ink); }
.htj-report {
  display:grid; grid-template-columns:1fr; gap:24px; align-items:center; margin-top:26px;
}
.htj-report-image {
  max-width:680px; margin:0 auto; padding:10px; background:#fff;
  border:1px solid var(--line); border-radius:18px;
}
.htj-zoom-link { display:block; text-decoration:none; cursor:zoom-in; }
.htj-zoom-badge {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:10px; padding:10px 14px; border-radius:12px;
  background:var(--soft); color:var(--ink); font-size:14px; font-weight:800;
}
.htj-zoom-link:hover .htj-zoom-badge { background:var(--accent); color:#3a2c00; }
.htj-notice {
  margin-top:20px; padding:16px 18px; border-radius:14px;
  background:#f7f8f5; color:#526058; font-size:14px;
}
.htj-shipping {
  display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px;
}
.htj-shipping .htj-card { border-top:4px solid var(--accent); }
.htj-lotte {
  display:inline-flex; align-items:center; gap:8px; font-size:20px; font-weight:900; color:#e60012;
}
.htj-steps { counter-reset:step; display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px; }
.htj-step {
  position:relative; padding:20px 20px 20px 64px; border:1px solid var(--line);
  border-radius:16px; background:#fff;
}
.htj-step:before {
  counter-increment:step; content:counter(step);
  position:absolute; left:18px; top:18px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-weight:800;
}
.htj-step b { color:var(--ink); }
.htj-footer-note {
  padding:26px 20px 40px; text-align:center; color:var(--muted); font-size:13px;
}

@media (min-width:768px) {
  .htj-section { padding:76px 36px; }
  .htj-hero { padding:92px 36px; }
  .htj-grid { grid-template-columns:repeat(3,1fr); }
  .htj-report { grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); }
  .htj-shipping { grid-template-columns:repeat(3,1fr); }
  .htj-steps { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:992px) {
  .htj-section { padding-left:56px; padding-right:56px; }
  .htj-hero { padding-left:56px; padding-right:56px; }
  .htj-story { display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; }
}

/* 공통 하단 정보 프리미엄 개선 */
.htj-common-info {
    width: 100%;
    max-width: 1200px;
    margin: 72px auto 40px;
    padding: 56px 40px;
    background: linear-gradient(145deg, #fbfcf8 0%, #f2f6ef 100%);
    border: 1px solid #e1e8df;
    border-radius: 28px;
    box-shadow: 0 18px 50px rgba(25, 55, 38, .08);
}
.htj-common-info__eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #8a6a20;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
}
.htj-common-info__title {
    margin: 0;
    color: #163c29;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    font-weight: 800;
}
.htj-common-info__desc {
    max-width: 720px;
    margin: 14px 0 0;
    color: #627068;
    font-size: 16px;
    line-height: 1.75;
}
.htj-common-info__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 36px;
}
.htj-common-card {
    position: relative;
    min-height: 170px;
    padding: 26px;
    background: rgba(255,255,255,.92);
    border: 1px solid #e3e9e3;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(23, 55, 38, .055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.htj-common-card:hover {
    transform: translateY(-3px);
    border-color: #cad9cd;
    box-shadow: 0 14px 34px rgba(23, 55, 38, .10);
}
.htj-common-card h3 {
    margin: 0 0 12px;
    color: #173d29;
    font-size: 18px;
    font-weight: 800;
}
.htj-common-card p {
    margin: 0;
    color: #5e6b63;
    font-size: 15px;
    line-height: 1.75;
}
.htj-common-card--primary {
    background: linear-gradient(145deg, #173d29 0%, #245a3d 100%);
    border-color: transparent;
}
.htj-common-card--primary h3,
.htj-common-card--primary p,
.htj-common-card--primary a {
    color: #fff;
}
.htj-common-phone {
    display: block;
    margin-top: 8px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    letter-spacing: -.02em;
}
.htj-common-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 18px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}
.htj-common-btn--light {
    background: #fff;
    color: #173d29 !important;
}
.htj-common-btn--outline {
    border: 1px solid #d4ddd6;
    background: #fff;
    color: #173d29;
}
.htj-business-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #edf0ed;
}
.htj-business-row:last-child {
    border-bottom: 0;
}
.htj-business-row b {
    color: #273b2e;
}
.htj-business-row span {
    color: #68736c;
}
@media (max-width: 768px) {
    .htj-common-info {
        margin-top: 48px;
        padding: 34px 18px;
        border-radius: 20px;
    }
    .htj-common-info__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 26px;
    }
    .htj-common-card {
        min-height: auto;
        padding: 22px 20px;
        border-radius: 16px;
    }
    .htj-business-row {
        grid-template-columns: 90px 1fr;
        gap: 10px;
    }
    .htj-common-btn {
        width: 100%;
    }
}
@media (max-width: 390px) {
    .htj-common-info {
        padding-left: 14px;
        padding-right: 14px;
    }
    .htj-common-card {
        padding: 20px 16px;
    }
    .htj-business-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}