/* BASIC css start */
.detail-product .pd-wrap *, .detail-product .pd-wrap *::before, .detail-product .pd-wrap *::after { box-sizing: border-box; }

.detail-product .pd-wrap {
  --blue:#0051E8;   --blue-b:#E7EEFF;
  --purple:#7C3AED; --purple-b:#F1E9FE;
  --pink:#EC4899;   --pink-b:#FCE7F2;
  margin: 0 auto;
  color: #1f2430;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow: hidden;

  container-type: inline-size;
  container-name: pd;
}
.detail-product .pd-wrap img { max-width: 100%; height: auto; display: block; border: 0; }

.detail-product{background: linear-gradient(180deg,#ffffff 0%, #F2F6FF 100%);padding-top:clamp(60px, 10vw, 100px);}
/* ---- 공통 섹션 ---- */
.detail-product .pd-section {
  position: relative;
  padding: clamp(30px, 4vw, 40px) 0 clamp(48px, 7cqi, 96px);
}

/* ---- 헤더 ---- */
.detail-product .pd-head { text-align: center; margin-bottom: clamp(28px, 5cqi, 52px); position: relative; z-index: 2; }
.detail-product .pd-label {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 16px; padding: 7px 16px;
  font-size: clamp(15px, 2.4cqi, 17px); font-weight: 700; letter-spacing: 0.01em;
  color: var(--blue); background: var(--blue-b); border-radius: 999px;
}
.detail-product .pd-title {
  margin: 0 0 16px; font-weight: 800; line-height: 1.28; color: #14161c;
  letter-spacing: -0.03em; font-size: clamp(26px, 5cqi, 46px);
}
.detail-product .pd-em { font-weight: 800; background: linear-gradient(120deg, var(--blue), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* =========================================================================
   1) HERO — 화려한 그라데이션 + 장식 SVG + 물결 디바이더
   ========================================================================= */
.detail-product .pd-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10cqi, 120px) clamp(18px, 4cqi, 44px) clamp(96px, 13cqi, 150px);
  background: linear-gradient(135deg, #0051E8 0%, #6D28D9 52%, #DB2777 100%);
  color: #fff;
  text-align: center;
  border-radius:var(--radius-30);
}
.detail-product .pd-hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.detail-product .pd-hero-deco svg { position: absolute; }
.detail-product .pd-hero-deco .d1 { top: 8%;  left: -4%;  width: 170px; opacity: .22; }
.detail-product .pd-hero-deco .d2 { top: 14%; right: -3%; width: 120px; opacity: .30; }
.detail-product .pd-hero-deco .d3 { bottom: 22%; left: 7%; width: 70px; opacity: .28; }
.detail-product .pd-hero-inner { position: relative; z-index: 2; }
.detail-product .pd-hero .pd-label { color: #fff; background: rgba(255,255,255,.18); backdrop-filter: blur(2px); }
.detail-product .pd-hero .pd-title { color: #fff; font-size: clamp(30px, 6.4cqi, 56px); text-shadow: 0 2px 18px rgba(0,0,0,.15); }
.detail-product .pd-hero-mark { font-weight: 800; color: #FFE45E; }
.detail-product .pd-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; z-index: 1; display: block; }

/* =========================================================================
   2) 본문 — 보내준 문구를 한 영역에 전부 노출
   ========================================================================= */
.detail-product .pd-article {
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 26px;
  box-shadow: 0 14px 40px rgba(20,22,28,.06);
  padding: clamp(32px, 5cqi, 64px) clamp(24px, 5cqi, 72px);
}
.detail-product .pd-article .lead {
  font-size: clamp(20px, 3.2cqi, 26px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.5;
  color: #14161c;
  margin: 0 0 clamp(24px, 3.5cqi, 36px);
  padding-bottom: clamp(20px, 3cqi, 30px);
  border-bottom: 2px solid #eef0f4;
}
.detail-product .pd-article .lead b {
  background: linear-gradient(120deg, var(--blue), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.detail-product .pd-article p {
  margin: 0 0 clamp(20px, 3cqi, 28px);
  font-size: clamp(16px, 2.1cqi, 18px);
  line-height: 1.9;
  color: #3a414e;
}
.detail-product .pd-article p:last-of-type { margin-bottom: 0; }
.detail-product .pd-article p strong { color: #14161c; font-weight: 800; }
.detail-product .pd-article .quote { color: var(--blue); font-weight: 800; }

/* 마무리 슬로건 */
.detail-product .pd-article .sign {
  margin-top: clamp(28px, 4cqi, 40px);
  padding-top: clamp(24px, 3.5cqi, 34px);
  border-top: 2px solid #eef0f4;
  text-align: center;
}
.detail-product .pd-article .sign .slogan {
  display: block;
  font-size: clamp(22px, 4cqi, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.35;
  color: #14161c;
  margin: 0;
}
.detail-product .pd-article .sign .slogan b {
  background: linear-gradient(180deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.detail-product .pd-article .sign .by {
  display: block;
  margin-top: 10px;
  font-size: clamp(15px, 2.2cqi, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5b6473;
}

/* body baseline */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  background: #fff; color: #14161c; -webkit-font-smoothing: antialiased; line-height: 1.55;
}

/* === 풀-블리드 레이아웃 (섹션 bg는 100%, 컨텐츠는 1380px) === */
.detail-product .pd-hero > .pd-hero-inner,
.detail-product .pd-section > * {
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
}
/* BASIC css end */