/* ==========================================================================
   FEEDUS — 제품 상세 본문 (전 제품 공용 스타일 · 단일 소스)

   PHP    : feedus-product-detail.php → 숏코드 [feedus_product_detail item="..."]
   스코프 : .feedus-pd — 이 밖으로 스타일을 내보내지 말 것.
            전역 태그 셀렉터(h3 {}, table {} …) 금지. 상단 공통 블록(.feedus-dct)·
            우커머스 기본 표와 충돌한다.

   설계 규칙
   - 제품이 늘어나도 CSS 는 이 파일 하나다. .pd-h3 을 고치면 전 제품에 반영된다.
     콘텐츠 함수에는 인라인 style 을 넣지 않는다.
   - 색은 feedus-global.css 토큰을 먼저 쓰고, 사이트에 대응 토큰이 없는 값만
     리터럴로 둔다(아래 토큰 블록 주석 참고). 새 색 발명 금지.
   - 폭에 max-width 를 주지 않는다. 상세 좌측 컬럼(≈760px)을 그대로 상속해야
     위쪽 공통 블록·크기별 컷과 좌우 끝이 맞는다. 가독성 때문에 폭을 줄여야 하는
     문단만 개별로 제한한다(.pd-desc).
   - 제목 폰트는 feedus-pages.css 「4-2」
     (body.single-product main#brx-content h2, h3 → --font-display, weight 500)
     가 이긴다. id 셀렉터라 .feedus-pd 안에서는 못 이기고, 이기려 들지도 말 것 —
     상세 영역의 다른 제목과 같아 보이는 게 의도다.
     rixseoulstation-pro 는 500 단일 굵기라 여기서 700/800 을 걸면 가짜 볼드가 된다.
     그래서 h2/h3 자체에는 weight 를 지정하지 않고, 그 안의 라벨 span(.pd-num)만
     Pretendard 로 되돌려 굵기를 준다.
   ========================================================================== */

.feedus-pd {
	/* ---- 토큰 ---- */
	--pd-primary: var(--feedus-primary, #4a5c10);
	--pd-primary-hover: var(--feedus-primary-hover, #3e4d0d);
	--pd-tint: var(--feedus-accent-tint, #eaefd8);
	--pd-surface: var(--feedus-white, #ffffff);
	--pd-text: var(--feedus-black, #1a1a1a);
	/* 보조 텍스트: 요청서 원값은 #5a6068 이지만 사이트가 웜톤이라 쿨그레이가 혼자 떠 보인다.
	   웜 그레이 토큰으로 대체 — 베이지 위 6.6:1, 흰 카드 위 7.4:1 로 AA 통과. */
	--pd-sub: var(--feedus-text-soft, #5C553D);
	/* 헤어라인 / 도트라인: 사이트 표 라인(#C9C4BD)은 이 블록엔 너무 진해서 별도 값.
	   도트는 실선보다 흐려 보이므로 헤어라인보다 반 톤 어둡게 잡는다. */
	--pd-line: #e7e2d6;
	--pd-dot: #cfc8b6;
	/* 주의색: --feedus-danger(#d62c2c)는 삭제 버튼용 원색이라 안내문에는 과하다. */
	--pd-warn: #b3402e;
	--pd-radius: var(--feedus-card-radius, 12px);

	/* 위쪽 공통 블록(.feedus-dct)과의 간격 — 블록 사이 여백은 여기 한 줄로만 준다.
	   .feedus-dct 의 아래 padding 은 4px, .pd-intro 의 위 padding 은 32px 이라
	   그대로 두면 36px 밖에 안 떨어져서 공통 블록 마지막 스텝과 한 덩어리로 읽힌다
	   (블록 안 화살표 간격이 이미 56px 이므로 블록 경계는 그보다 넉넉해야 한다).
	   margin 이 아니라 padding 인 이유: 부모 .brxe-shortcode 가 빈 블록이라
	   margin-top 은 바깥으로 collapse 돼 나가서 간격이 안 생긴다. */
	padding-top: clamp(32px, 6vw, 48px);

	color: var(--pd-text);
	font-family: var(--font-primary, 'Pretendard Variable', Pretendard, -apple-system, sans-serif);
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: -0.01em;
	word-break: keep-all;
}

/* 테마/우커머스 기본값 리셋 — 스코프 내부만 */
.feedus-pd h2,
.feedus-pd h3,
.feedus-pd p,
.feedus-pd ul,
.feedus-pd ol,
.feedus-pd table { margin: 0; }
.feedus-pd ul,
.feedus-pd ol { padding: 0; list-style: none; }

/* ---- 인트로 ---- */
.feedus-pd .pd-intro { text-align: center; padding: 32px 0 48px; }
.feedus-pd .pd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--pd-primary); }
.feedus-pd .pd-title { font-size: 26px; line-height: 1.3; margin-top: 8px; }
.feedus-pd .pd-lede { font-size: 17px; font-weight: 700; margin-top: 16px; }
.feedus-pd .pd-desc {
	font-size: 14.5px; color: var(--pd-sub);
	margin: 10px auto 0; max-width: 560px; /* 가독성 — 이 문단만 폭 제한 */
}

/* ---- 섹션 공통 리듬 ---- */
.feedus-pd .pd-section { padding: 6px 0 44px; }
.feedus-pd .pd-section > * + * { margin-top: 14px; }

/* ---- 제목 (전 제품 공통 — 여기만 고치면 전체 반영) ---- */
.feedus-pd .pd-h3 {
	display: flex; align-items: baseline; gap: 10px;
	font-size: 18px; line-height: 1.4;
}
.feedus-pd .pd-num {
	/* 제목은 디스플레이체를 상속하지만 번호 라벨은 Pretendard 로 되돌린다.
	   (디스플레이체는 500 단일 굵기라 여기서 굵기를 주면 가짜 볼드) */
	font-family: var(--font-primary);
	font-size: 13px; font-weight: 800; letter-spacing: .08em;
	color: var(--pd-primary);
	font-variant-numeric: tabular-nums;
}
.feedus-pd .pd-sublede { font-size: 15.5px; font-weight: 700; }
.feedus-pd .pd-caption { font-size: 13px; color: var(--pd-sub); }
.feedus-pd .pd-fine { font-size: 13.5px; color: var(--pd-sub); }

/* ---- 표 (사이즈 / 요약 공용) ---- */
.feedus-pd .pd-table {
	width: 100%;
	border-collapse: separate; border-spacing: 0;
	background: var(--pd-surface);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	overflow: hidden;
	font-size: 14.5px;
}
.feedus-pd .pd-table th,
.feedus-pd .pd-table td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--pd-line); }
.feedus-pd .pd-table tr:last-child th,
.feedus-pd .pd-table tr:last-child td { border-bottom: 0; }
.feedus-pd .pd-table thead th {
	background: var(--pd-tint);
	font-size: 13.5px; font-weight: 700; color: var(--pd-primary);
}
.feedus-pd .pd-table tbody th { font-weight: 700; }

/* 사이즈 표 — 중량 값 강조 */
.feedus-pd .pd-table-size tbody th { width: 40%; }
.feedus-pd .pd-table-size td { font-weight: 600; color: var(--pd-primary); font-variant-numeric: tabular-nums; }

/* 요약 표 — 좌측 라벨 틴트 */
.feedus-pd .pd-table-summary tbody th {
	width: 92px; text-align: center;
	background: var(--pd-tint); color: var(--pd-primary);
}

/* 사이즈 표 상단 이미지 — 사진 배경이 흰/베이지가 아니면 border 만 지우면 된다 */
.feedus-pd .pd-size-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pd-radius);
	border: 1px solid var(--pd-line);
}

/* ---- 참고 박스 (흰 카드) ---- */
.feedus-pd .pd-note {
	padding: 16px 18px;
	background: var(--pd-surface);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	font-size: 14px; color: var(--pd-sub);
}
.feedus-pd .pd-note-title { font-size: 14.5px; font-weight: 700; color: var(--pd-text); margin-bottom: 6px; }

/* ---- 아코디언 (네이티브 details — JS 없음) ----
   행 구분은 도트라인, 우측에 원형 배지 아이콘. 여는 애니메이션은 범위 밖. */
.feedus-pd .pd-acc { margin: 4px 0 44px; }
.feedus-pd .pd-acc-row { border-bottom: 1px dotted var(--pd-dot); }
.feedus-pd .pd-acc-row:first-child { border-top: 1px dotted var(--pd-dot); }

.feedus-pd .pd-acc-summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 24px 2px;
	cursor: pointer;
	list-style: none;
}
.feedus-pd .pd-acc-summary::-webkit-details-marker { display: none; }
.feedus-pd .pd-acc-summary::marker { content: ''; }
.feedus-pd .pd-acc-summary:focus-visible { outline: 2px solid var(--pd-primary); outline-offset: 4px; border-radius: 8px; }

.feedus-pd .pd-acc-icon {
	flex: 0 0 auto; width: 28px; height: 28px;
	border-radius: 50%; background: var(--pd-tint);
	position: relative;
	transition: transform .25s ease;
}
.feedus-pd .pd-acc-icon::before {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 8px; height: 8px;
	border-right: 2px solid var(--pd-primary);
	border-bottom: 2px solid var(--pd-primary);
	transform: translate(-50%, -68%) rotate(45deg);
}
.feedus-pd .pd-acc-row[open] > .pd-acc-summary .pd-acc-icon { transform: rotate(180deg); }

.feedus-pd .pd-acc-body { padding: 0 2px 32px; }
.feedus-pd .pd-acc-body > * + * { margin-top: 12px; }

/* ---- 해동 STEP 카드 ---- */
.feedus-pd .pd-steps { display: grid; gap: 10px; margin-top: 16px; }
.feedus-pd .pd-steps li {
	background: var(--pd-surface);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	padding: 13px 16px;
	font-size: 14.5px;
}
.feedus-pd .pd-step-label {
	display: block;
	font-size: 12px; font-weight: 800; letter-spacing: .08em;
	color: var(--pd-primary);
	margin-bottom: 4px;
}

/* ---- 불릿 리스트 ---- */
.feedus-pd .pd-list { display: grid; gap: 8px; }
.feedus-pd .pd-list li { position: relative; padding-left: 16px; font-size: 14.5px; }
.feedus-pd .pd-list li::before {
	content: ""; position: absolute; left: 2px; top: .62em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--pd-primary);
}

/* 리스트 내 주의 항목 — 경고 박스(.pd-warn) 대신 한 줄만 강조할 때 */
.feedus-pd .pd-list li.is-warn { color: var(--pd-warn); font-weight: 600; }
.feedus-pd .pd-list li.is-warn::before { background: var(--pd-warn); }

/* ---- 주의 박스 ---- */
.feedus-pd .pd-warn {
	background: var(--pd-surface);
	border: 1px solid var(--pd-line);
	border-left: 3px solid var(--pd-warn);
	border-radius: var(--pd-radius);
	padding: 16px 18px;
	margin-top: 18px;
}
.feedus-pd .pd-warn-title { font-size: 14.5px; font-weight: 800; color: var(--pd-warn); margin-bottom: 8px; }
.feedus-pd .pd-warn ul { display: grid; gap: 8px; }
.feedus-pd .pd-warn li { position: relative; padding-left: 16px; font-size: 14px; }
.feedus-pd .pd-warn li::before {
	content: ""; position: absolute; left: 2px; top: .62em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--pd-warn);
}

/* ---- 구매 전 확인 (틴트 카드) ---- */
.feedus-pd .pd-prebuy {
	background: var(--pd-tint);
	border-radius: 14px;
	padding: 22px 20px;
}
.feedus-pd .pd-prebuy-title { font-size: 15.5px; font-weight: 800; color: var(--pd-primary); margin-bottom: 10px; }
.feedus-pd .pd-prebuy ul { display: grid; gap: 8px; }
.feedus-pd .pd-prebuy li { position: relative; padding-left: 16px; font-size: 14.5px; }
.feedus-pd .pd-prebuy li::before {
	content: ""; position: absolute; left: 2px; top: .62em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--pd-primary);
}

/* ---- PC ---- */
@media (min-width: 750px) {
	.feedus-pd { font-size: 15.5px; }
	.feedus-pd .pd-title { font-size: 30px; }
	.feedus-pd .pd-h3 { font-size: 19px; }
	.feedus-pd .pd-acc-summary { padding: 28px 2px; }
	.feedus-pd .pd-table th,
	.feedus-pd .pd-table td { padding: 13px 18px; }
}

/* ---- 모션 최소화 ---- */
@media (prefers-reduced-motion: reduce) {
	.feedus-pd .pd-acc-icon { transition: none; }
}