/*
 * page.css — 완성되는 상세페이지 자체의 모양 (가로 780px, 쿠팡 상세 이미지 기준).
 * 편집 화면(app.css)과 분리한 이유: 이 파일의 스타일이 그대로 PNG 로 찍힌다.
 * 이미지 저장 라이브러리(html2canvas)가 filter·object-fit·clip-path 를 제대로 못 그려서
 * 그런 속성은 쓰지 않는다. 사진 자르기·보정은 app.js 에서 픽셀로 미리 굽는다.
 */
.dp-page {
  width: 780px; background: #fff; color: #222;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  letter-spacing: -0.5px; word-break: keep-all; overflow-wrap: break-word;
}
.dp-page * { box-sizing: border-box; }
.dp-block { width: 780px; }
.dp-img { display: block; width: 780px; height: auto; }
.dp-ph {
  width: 780px; background: #eef0f3; border: 3px dashed #c9ced6;
  display: flex; align-items: center; justify-content: center;
  color: #8b95a1; font-size: 30px; font-weight: 600;
}

/* 인트로 */
.dp-intro { padding: 110px 40px 90px; text-align: center; }
.dp-intro-title { font-size: 118px; font-weight: 800; color: var(--acc); line-height: 1.15; letter-spacing: -4px; }
.dp-intro-sub { margin-top: 70px; font-size: 44px; font-weight: 500; color: #333; line-height: 1.45; }
.dp-band { background: var(--acc); color: #fff; text-align: center; font-size: 46px; font-weight: 700; padding: 22px 20px 24px; }

/* 제목 + 사진 */
.dp-headline { padding: 44px 60px 60px; }
.dp-hl-bar { border-left: 6px solid #333; padding-left: 24px; }
.dp-hl-t1 { font-size: 42px; font-weight: 800; color: #333; line-height: 1.35; }
.dp-hl-t2 { font-size: 42px; font-weight: 800; color: var(--acc); line-height: 1.35; }

/* 강조 문구 */
.dp-highlight { padding: 90px 40px 100px; text-align: center; }
.dp-hi-t1 { font-size: 44px; font-weight: 800; color: #333; line-height: 1.4; }
.dp-hi-t2 { font-size: 44px; font-weight: 800; color: var(--acc); line-height: 1.4; }
.dp-hi-t2 span { background: linear-gradient(transparent 58%, var(--acc-soft) 58%); padding: 0 14px; }

/* 문구 + 큰 사진 */
.dp-caption { background: #f1f1f0; padding: 120px 40px 50px; text-align: center; }
.dp-caption-blk { background: #f1f1f0; }
.dp-cap-t1 { font-size: 40px; font-weight: 400; color: #333; line-height: 1.4; }
.dp-cap-t2 { font-size: 40px; font-weight: 700; color: #333; margin-top: 6px; }

/* 특징 3가지 */
.dp-features { padding: 110px 40px 110px; text-align: center; }
.dp-ft-small { font-size: 36px; color: #444; line-height: 1.45; }
.dp-ft-name { font-size: 62px; font-weight: 800; color: #222; margin-top: 36px; }
.dp-ft-cols { display: flex; justify-content: center; margin-top: 70px; }
.dp-ft-col { flex: 1; font-size: 32px; font-weight: 600; color: #333; line-height: 1.35; padding: 18px 8px; border-left: 2px solid #d9d9d9; }
.dp-ft-col:first-child { border-left: 0; }

/* 제목 + 사진 + 글 */
.dp-story-title { padding: 110px 60px 60px; font-size: 54px; font-weight: 800; color: #333; line-height: 1.35; }
.dp-body { padding: 60px 60px 100px; font-size: 32px; color: #555; line-height: 1.7; }
.dp-body-tight { padding: 10px 60px 60px; }

/* 사이즈 안내 */
.dp-size-head { background: #8b8b8b; color: #fff; font-size: 32px; font-weight: 700; padding: 14px 40px; display: flex; align-items: center; gap: 12px; }
.dp-size-ic { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #8b8b8b; font-size: 26px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.dp-size-photo { position: relative; }
.dp-size-band { position: absolute; left: 110px; right: 110px; bottom: 40px; background: #333; color: #fff; text-align: center; font-size: 30px; font-weight: 700; padding: 14px 10px; }
.dp-size-note { padding: 30px 40px 40px; font-size: 20px; color: #666; line-height: 1.6; }

/* 섹션 제목 (먹는 법·포장·보관) */
.dp-sec-title { padding: 110px 60px 40px; font-size: 54px; font-weight: 800; color: #333; display: flex; align-items: center; gap: 16px; }
.dp-sec-ic { width: 52px; height: 52px; border-radius: 50%; border: 5px solid var(--acc); color: var(--acc); font-size: 30px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Q&A */
.dp-qna { background: #f7f5f1; padding: 110px 60px 110px; }
.dp-qna-title { text-align: center; font-size: 76px; font-weight: 800; color: #5b3a1e; padding-bottom: 50px; border-bottom: 2px solid #e2ddd3; margin-bottom: 50px; }
.dp-qna-item + .dp-qna-item { margin-top: 56px; }
.dp-qna-q { font-size: 40px; font-weight: 800; color: #5b3a1e; }
.dp-qna-a { font-size: 30px; color: #555; line-height: 1.6; margin-top: 16px; padding-left: 58px; }

/* 고객 후기 */
.dp-reviews { background: var(--acc-soft); padding: 110px 60px 110px; }
.dp-rv-title { text-align: center; font-size: 54px; font-weight: 800; color: #222; margin-bottom: 60px; }
.dp-rv-card { background: #fff; border-radius: 28px; padding: 36px 40px; text-align: center; }
.dp-rv-card + .dp-rv-card { margin-top: 28px; }
.dp-rv-who { font-size: 24px; color: #888; }
.dp-rv-stars { font-size: 30px; color: #f5a623; margin-top: 8px; letter-spacing: 4px; }
.dp-rv-text { font-size: 32px; font-weight: 700; color: #333; line-height: 1.5; margin-top: 12px; }

/* 배송·교환 안내 */
.dp-notice { padding: 90px 50px 80px; }
.dp-nt-h { font-size: 50px; font-weight: 800; color: #111; margin-bottom: 20px; }
.dp-nt-em { font-size: 28px; font-weight: 600; color: #e60012; margin-bottom: 18px; }
.dp-nt-strong { font-size: 28px; font-weight: 600; color: #222; margin-bottom: 18px; }
.dp-nt-p { font-size: 26px; color: #444; line-height: 1.6; margin-bottom: 14px; }
.dp-nt-small { font-size: 22px; color: #555; line-height: 1.6; }
.dp-nt-line { height: 2px; background: #111; margin: 50px 0; }