@charset "utf-8";
/* ===== 디자인형 상품 상세설명 (.pd-detail) =====
 * 관리자 상품등록(admims/item_form.php) 상품설명 에디터에 넣는 본문을 꾸민다. 출력 위치: 상품상세 #sit_inf_explan
 * AI 자동생성의 마케팅형 상세설명(lib/ai.item.lib.php)도 이 class 구조로 만든다.
 * 불러오는 곳: 쇼핑몰 head.sub.php (style_default.css 다음), 상품등록 AI 패널 미리보기
 *              (admims/item_form.php, admsys/shop_admin/itemform.php 에서 css/ai.item.panel.css 다음에 불러온다)
 * 상품설명은 html_purifier 를 거치며 <style>, style 속성, id, data-* 가 지워지므로 디자인은 모두 이 파일의 class 로만 준다.
 * 사용 태그: div, span, p, h2, h3, strong, small, br, img, table (섹션 구분은 div.pd-detail__sec)
 * 글꼴: 본문 Pretendard, 큰 숫자/가격은 Roboto(없으면 Pretendard). 폭 860px 기준, 600px 이하에서 글자/여백을 줄인다.
 * 쇼핑몰 스킨의 #sit_inf h2, #sit_inf h3 {position:absolute;font-size:0} 규칙을 되돌리기 위해 제목은 #sit_inf 선택자를 함께 쓴다.
 */
.pd-detail{--pd-ink:#222820;--pd-forest:#26342b;--pd-olive:#667350;--pd-sand:#ebe8df;--pd-paper:#f8f7f2;--pd-muted:#5e655c;--pd-line:#c9cfc3;--pd-num:'Roboto','Pretendard','Apple SD Gothic Neo',sans-serif;max-width:860px;margin:0 auto;background:var(--pd-paper);color:var(--pd-ink);font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:16px;line-height:1.75;letter-spacing:-0.01em;word-break:keep-all;overflow-wrap:break-word;text-align:left}
.pd-detail *{box-sizing:border-box}
.pd-detail p{margin:0;font-size:16px;line-height:1.75}
.pd-detail img{display:block;width:100%;max-width:100%;height:auto;margin:0}
.pd-detail h2,#sit_inf .pd-detail h2{position:static;margin:0;padding:0;border:0;font-size:30px;font-weight:800;line-height:1.4;letter-spacing:-0.03em;color:inherit}
.pd-detail h3,#sit_inf .pd-detail h3{position:static;margin:0;padding:0;border:0;font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-0.02em;color:inherit}
.pd-detail strong{font-weight:700}
/* 섹션 */
.pd-detail__sec{position:relative;overflow:hidden}
.pd-detail__sec--dark{background:var(--pd-forest);color:#f5f4ec}
.pd-detail__sec--scene{background:#3b4837;color:#f5f4ec}
.pd-detail__sec--sand,.pd-detail__pad--sand{background:var(--pd-sand)}
.pd-detail__pad{padding:64px 56px}
.pd-detail__pad-s{padding:32px 56px}
/* 공통 글 */
.pd-detail__eyebrow{display:block;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:0.14em;text-transform:uppercase}
.pd-detail__secno{display:flex;justify-content:space-between;gap:16px;margin:0 0 20px;color:var(--pd-olive)}
.pd-detail__secno span+span{color:#7b8274;text-align:right}
.pd-detail__sec--scene .pd-detail__eyebrow{color:#d3ddb8;margin:0 0 16px}
.pd-detail p.pd-detail__intro{margin:22px 0 0;color:var(--pd-muted)}
.pd-detail__sec--dark p.pd-detail__intro,.pd-detail__sec--scene p{color:#d6ddd0}
.pd-detail__sec--scene p{margin:20px 0 0}
.pd-detail p.pd-detail__fine,.pd-detail span.pd-detail__fine{font-size:14px;line-height:1.7;color:var(--pd-muted)}
.pd-detail__sec--dark p.pd-detail__fine,.pd-detail__sec--scene p.pd-detail__fine{color:#d2d9cd}
.pd-detail p.pd-detail__caption{padding:14px 56px;background:var(--pd-paper);font-size:13px;line-height:1.6;color:#687064}
.pd-detail__label{display:block;font-size:14px;line-height:1.6}
.pd-detail__rule{height:1px;margin:28px 0;background:currentColor;opacity:0.23}
/* 1. 첫 화면 */
.pd-detail__mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 56px;border-bottom:1px solid #657261}
.pd-detail__brand{font-family:var(--pd-num);font-size:24px;font-weight:900;line-height:1;letter-spacing:-0.02em}
.pd-detail__edition{font-size:11px;font-weight:600;line-height:1.5;letter-spacing:0.14em;text-align:right}
.pd-detail__hero{padding:44px 56px 48px}
.pd-detail p.pd-detail__big{margin:14px 0 20px;font-family:var(--pd-num);font-size:120px;font-weight:900;line-height:0.95;letter-spacing:-0.05em}
.pd-detail p.pd-detail__hero-name{margin:18px 0 0;font-size:15px;color:#d5decf}
.pd-detail__photo{position:relative}
.pd-detail__photo-label{position:absolute;left:24px;bottom:20px;padding:6px 12px;background:rgba(25,33,23,0.8);color:#fff;font-size:12px;line-height:1.4}
.pd-detail__tags{display:flex;justify-content:space-between;gap:12px;padding:24px 56px;background:#1e2921;color:#d4dccf;font-size:13px;line-height:1.5}
.pd-detail__tags strong{display:block;margin:0 0 6px;font-family:var(--pd-num);font-size:22px;line-height:1.2;color:#fff}
/* 2. 제품 */
.pd-detail__band{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0 0;border-top:1px solid var(--pd-line)}
.pd-detail__band .pd-detail__eyebrow{color:var(--pd-olive)}
.pd-detail__code{font-family:var(--pd-num);font-size:48px;font-weight:800;line-height:1;color:var(--pd-olive)}
/* 3. 디테일 번호 목록 / 단계 목록 */
.pd-detail__feature,.pd-detail__step{display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--pd-line)}
.pd-detail__feature:last-child{padding-bottom:0}
.pd-detail__num{flex:0 0 44px;font-family:var(--pd-num);font-size:22px;font-weight:700;line-height:1.4;color:var(--pd-olive)}
.pd-detail__body{flex:1;min-width:0}
.pd-detail__body p{margin:6px 0 0;color:var(--pd-muted)}
.pd-detail__steps{margin:24px 0 0}
/* 4. 소재 */
.pd-detail__ratio{display:flex;gap:0;padding:32px 0 26px}
.pd-detail__ratio>div{flex:1}
.pd-detail__ratio>div+div{padding-left:40px;border-left:1px solid #aeb7a4}
.pd-detail__ratio strong{display:block;font-family:var(--pd-num);font-size:76px;font-weight:800;line-height:1;letter-spacing:-0.04em}
.pd-detail__ratio strong small{margin-left:4px;font-size:0.4em;font-weight:700}
.pd-detail__ratio .pd-detail__label{margin:10px 0 0}
.pd-detail__split{display:flex;gap:40px}
.pd-detail__split>div{flex:1}
.pd-detail__split p{margin:8px 0 0;font-size:15px}
/* 6. 사이즈 */
.pd-detail__sizes{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.pd-detail__sizes span{padding:10px 16px;border:1px solid #c5cdbd;background:#fff;font-family:var(--pd-num);font-size:16px;font-weight:700;line-height:1}
.pd-detail__lengths{display:flex;gap:12px;margin:24px 0}
.pd-detail__lengths div{flex:1;padding:20px 8px;background:#e9ece4;text-align:center}
.pd-detail__lengths strong{display:block;font-family:var(--pd-num);font-size:16px;line-height:1.4}
.pd-detail__lengths small{display:block;margin:6px 0 0;font-size:13px}
.pd-detail__notice{margin:24px 0 0;padding:20px 24px;background:#e9ece4}
/* 7. 상품 정보 표 */
.pd-detail table.pd-detail__info{width:100%;margin:28px 0 0;border-collapse:collapse;table-layout:fixed}
.pd-detail__info th,.pd-detail__info td{padding:16px 0;border:0;border-top:1px solid var(--pd-line);background:none;text-align:left;vertical-align:top;font-size:15px;line-height:1.6}
.pd-detail__info th{width:28%;padding-right:20px;font-weight:500;color:var(--pd-muted)}
.pd-detail__info td{font-weight:500;color:var(--pd-ink)}
.pd-detail p.pd-detail__note{margin:24px 0 0}
/* 8. 마무리 */
.pd-detail__end{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:44px 56px;background:#202c23;color:#e9ede4}
.pd-detail__end .pd-detail__brand{font-size:32px}
@media (max-width:600px){
	.pd-detail,.pd-detail p{font-size:15px}
	.pd-detail h2,#sit_inf .pd-detail h2{font-size:23px}
	.pd-detail h3,#sit_inf .pd-detail h3{font-size:17px}
	.pd-detail__pad{padding:40px 22px}
	.pd-detail__pad-s{padding:24px 22px}
	.pd-detail p.pd-detail__caption{padding:12px 22px;font-size:12px}
	.pd-detail p.pd-detail__fine,.pd-detail span.pd-detail__fine{font-size:13px}
	.pd-detail__eyebrow{font-size:11px}
	.pd-detail__mast{padding:18px 22px}
	.pd-detail__brand{font-size:19px}
	.pd-detail__edition{font-size:10px}
	.pd-detail__hero{padding:30px 22px 34px}
	.pd-detail p.pd-detail__big{margin:10px 0 14px;font-size:76px}
	.pd-detail__photo-label{left:14px;bottom:12px;font-size:11px}
	.pd-detail__tags{padding:18px 22px;font-size:12px}
	.pd-detail__tags strong{font-size:17px}
	.pd-detail__code{font-size:36px}
	.pd-detail__feature,.pd-detail__step{gap:12px;padding:18px 0}
	.pd-detail__num{flex-basis:30px;font-size:18px}
	.pd-detail__ratio{padding:22px 0 20px}
	.pd-detail__ratio>div+div{padding-left:22px}
	.pd-detail__ratio strong{font-size:54px}
	.pd-detail__split{gap:20px}
	.pd-detail__split p{font-size:14px}
	.pd-detail__sizes{gap:8px}
	.pd-detail__sizes span{padding:9px 13px;font-size:15px}
	.pd-detail__lengths{gap:8px}
	.pd-detail__lengths div{padding:16px 4px}
	.pd-detail__lengths strong{font-size:14px}
	.pd-detail__notice{padding:16px 18px}
	.pd-detail__info th,.pd-detail__info td{padding:13px 0;font-size:14px}
	.pd-detail__info th{padding-right:12px}
	.pd-detail__end{padding:32px 22px}
	.pd-detail__end .pd-detail__brand{font-size:24px}
}

/* ----- 좁은 상자 안 미리보기 (.pd-detail--narrow) -----
 * 상품등록 화면의 AI 패널(js/ai.item.panel.js)처럼 화면은 넓지만 상자 폭이 좁은 곳에서 쓴다.
 * 미리보기를 감싼 요소에 .pd-detail--narrow 를 주면 위 600px 이하 규칙과 같은 글자/여백을 쓴다.
 * (화면 폭 기준 @media 는 상자 폭을 알지 못하므로 같은 값을 자손 선택자로 한 벌 더 둔다. 위 규칙을 바꾸면 여기도 함께 바꾼다)
 */
.pd-detail--narrow .pd-detail,.pd-detail--narrow .pd-detail p{font-size:15px}
.pd-detail--narrow .pd-detail h2{font-size:23px}
.pd-detail--narrow .pd-detail h3{font-size:17px}
.pd-detail--narrow .pd-detail__pad{padding:40px 22px}
.pd-detail--narrow .pd-detail__pad-s{padding:24px 22px}
.pd-detail--narrow .pd-detail p.pd-detail__caption{padding:12px 22px;font-size:12px}
.pd-detail--narrow .pd-detail p.pd-detail__fine,.pd-detail--narrow .pd-detail span.pd-detail__fine{font-size:13px}
.pd-detail--narrow .pd-detail__eyebrow{font-size:11px}
.pd-detail--narrow .pd-detail__mast{padding:18px 22px}
.pd-detail--narrow .pd-detail__brand{font-size:19px}
.pd-detail--narrow .pd-detail__edition{font-size:10px}
.pd-detail--narrow .pd-detail__hero{padding:30px 22px 34px}
.pd-detail--narrow .pd-detail p.pd-detail__big{margin:10px 0 14px;font-size:76px}
.pd-detail--narrow .pd-detail__photo-label{left:14px;bottom:12px;font-size:11px}
.pd-detail--narrow .pd-detail__tags{padding:18px 22px;font-size:12px}
.pd-detail--narrow .pd-detail__tags strong{font-size:17px}
.pd-detail--narrow .pd-detail__code{font-size:36px}
.pd-detail--narrow .pd-detail__feature,.pd-detail--narrow .pd-detail__step{gap:12px;padding:18px 0}
.pd-detail--narrow .pd-detail__feature:last-child{padding-bottom:0}
.pd-detail--narrow .pd-detail__num{flex-basis:30px;font-size:18px}
.pd-detail--narrow .pd-detail__ratio{padding:22px 0 20px}
.pd-detail--narrow .pd-detail__ratio>div+div{padding-left:22px}
.pd-detail--narrow .pd-detail__ratio strong{font-size:54px}
.pd-detail--narrow .pd-detail__split{gap:20px}
.pd-detail--narrow .pd-detail__split p{font-size:14px}
.pd-detail--narrow .pd-detail__sizes{gap:8px}
.pd-detail--narrow .pd-detail__sizes span{padding:9px 13px;font-size:15px}
.pd-detail--narrow .pd-detail__lengths{gap:8px}
.pd-detail--narrow .pd-detail__lengths div{padding:16px 4px}
.pd-detail--narrow .pd-detail__lengths strong{font-size:14px}
.pd-detail--narrow .pd-detail__notice{padding:16px 18px}
.pd-detail--narrow .pd-detail__info th,.pd-detail--narrow .pd-detail__info td{padding:13px 0;font-size:14px}
.pd-detail--narrow .pd-detail__info th{padding-right:12px}
.pd-detail--narrow .pd-detail__end{padding:32px 22px}
.pd-detail--narrow .pd-detail__end .pd-detail__brand{font-size:24px}

/* ----- 이미지 자리 (.pd-detail__photo--pending) -----
 * AI 가 만든 마케팅형 상세설명에서 아직 이미지를 넣지 않은 사진 자리. 상품등록 화면의 AI 패널 미리보기에서만 보인다.
 * [선택 항목 폼에 적용] 때 생성된 이미지로 바뀌거나 지워지므로 저장되는 상세설명에는 남지 않는다.
 * 혹시 남은 채 저장되어도 쇼핑몰 상품상세(#sit_inf)에서는 보이지 않게 숨긴다.
 */
.pd-detail__photo--pending{display:flex;align-items:center;justify-content:center;min-height:180px;border:2px dashed #8b7355;background:#f5f3f0}
.pd-detail p.pd-detail__photo-pending{margin:0;padding:16px;color:#5e655c;font-size:13px;line-height:1.5;text-align:center}
#sit_inf .pd-detail__photo--pending{display:none}