@charset "UTF-8";
/* ==================================================================
   제품 상세 설명 탭  ?  /css/product-detail.css
   ------------------------------------------------------------------
   대상 : /mall/items/item-info/my-lite.php (item.php 에 include)
   범위 : 모든 규칙이 .pd-section 안에서만 적용됩니다.
          (예외 한 곳 ? 바로 아래 "감싸는 구역" 항목)

   디자인 기준 : item.php 의 .it- 규격에 맞췄습니다.
     · 바탕      #f5f7fb
     · 카드      흰색 / 라운드 16px / 얇은 테두리 + 옅은 그림자
     · 강조색    #0066ff
     · 글자      제목 #1a1d24 · 본문 #3f4654 · 보조 #8b93a1
     · 글자크기  em 만 사용 (테마 기본 크기를 물려받습니다)

   ※ 색상값은 qna-ui.css 의 :root 토큰을 먼저 쓰고, 없으면 같은
     값을 직접 씁니다. 그래서 이 파일만 있어도 동작합니다.

   [목차]
   1. 감싸는 구역 보정   [찾기] === WRAPPER
   2. 기본 틀            [찾기] === LAYOUT
   3. 왼쪽 사이드        [찾기] === SIDE
   4. 탭                 [찾기] === TABS
   5. 자료 내려받기      [찾기] === DOWNLOAD
   6. 오른쪽 본문 카드   [찾기] === PANEL
   7. 머리말 / 목록      [찾기] === LIST
   8. 사양 표            [찾기] === SPEC
   9. 주의 상자          [찾기] === WARN
  10. 반응형             [찾기] === RESPONSIVE
================================================================== */


/* ==================================================================
   === WRAPPER  1. 감싸는 구역 보정
   item.php 의 <section class="services-five item-info"> 는 흰 배경과
   여백을 가지고 있어, 위쪽 상품 영역과 이 영역 사이에 흰 띠가
   생깁니다. 그 구역에만 좁혀서 없앱니다.
================================================================== */
/* ★ 위 상품 영역과 이 영역 사이에 흰 띠가 보이던 문제

   my-lite 를 감싸는 바깥 구역이 흰 배경입니다.
   그 흰 배경을 없애려고 애쓰는 대신, 이 영역 자체를 흰색으로
   맞췄습니다(아래 .pd-section). 그러면 흰 띠가 그냥 이 영역의
   윗여백이 되어 경계가 사라집니다.

   남은 것은 여백뿐입니다. 바깥 구역이 위아래로 크게 벌려 놓은
   여백만 없애고, 간격은 .pd-section 한 곳에서 정합니다.
   ※ 이 파일은 my-lite.php 에서만 불러오므로 다른 화면에는
     영향이 없습니다. */
section:has(.pd-section),
section:has(.pd-section) > div,
section:has(.pd-section) > div > div {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-top: 0 !important;
}

/* 바로 위 구역(상품 구매 영역)의 아래 여백도 없앱니다.
   "pd-section 을 품은 구역의 바로 앞 구역" 이라는 뜻입니다. */
section:has(+ section .pd-section) {
	padding-bottom: 30px !important;   /* ← 구매 카드 아래 여백 */
	margin-bottom: 0 !important;
}

/* 클래스 이름으로도 한 번 더 (구형 브라우저가 :has() 를 모를 때) */
.services-five.item-info,
.services-five.item-info > .col-md-12,
.services-five.item-info > .col-md-12 > .row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.services-three.buy.it-page {
	padding-bottom: 30px !important;   /* ← 구매 카드 아래 여백 */
	margin-bottom: 0 !important;
}


/* ==================================================================
   === LAYOUT  2. 기본 틀
================================================================== */
.pd-section {
	--pd-primary: var(--st-primary, #0066ff);
	--pd-primary-dark: var(--st-primary-dark, #0047b3);
	--pd-ink: var(--st-ink, #1a1d24);
	--pd-body: var(--st-body, #3f4654);
	--pd-muted: var(--st-muted, #8b93a1);
	--pd-line: var(--st-line, #e4e8ef);
	--pd-bg: #fff;          /* ★ 감싸는 구역과 같은 흰색 */
	--pd-soft: #f7f9fd;
	--pd-radius: var(--st-radius-card, 16px);
	--pd-radius-s: var(--st-radius-ctl, 12px);
	--pd-shadow: var(--st-shadow, 0 10px 30px rgba(16, 24, 40, 0.06));

	width: 100%;
	background: var(--pd-bg);
	/* ★ 위 구매 영역과의 간격은 여기 한 곳에서만 정합니다.
	   바깥 구역들의 여백은 위에서 전부 0 으로 만들었으므로,
	   이 숫자 하나가 곧 화면에 보이는 간격입니다.
	   넓으면 줄이고 좁으면 늘리시면 됩니다. */
	margin-top: 0;
	padding: 22px 0 78px;
	color: var(--pd-body);
}

.pd-section * {
	box-sizing: border-box;
}

.pd-wrap {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
}

.pd-layout {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* ★ 왼쪽 카드가 오른쪽 카드와 겹치던 문제
   격자(grid)의 자식은 min-width 기본값이 auto 입니다. 안쪽 내용이
   칸(268px)보다 넓으면 칸을 무시하고 옆으로 넘쳐 오른쪽 카드 위로
   올라탑니다. 두 칸 모두 자기 칸을 넘지 못하게 못 박습니다. */
.pd-layout > * {
	min-width: 0 !important;
	max-width: 100% !important;
	width: auto !important;
}


/* ==================================================================
   === SIDE  3. 왼쪽 사이드
================================================================== */
.pd-side {
	position: sticky;
	top: 24px;
	/* 바탕이 흰색이 되었으므로 카드는 아주 옅은 회색으로 구분합니다 */
	background: var(--pd-soft);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	box-shadow: none;
	padding: 20px 16px;
	/* 자기 칸을 넘지 않도록 (위 .pd-layout > * 와 한 쌍) */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.pd-side-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0 4px 13px;
	border-bottom: 1px solid var(--pd-line);
	color: var(--pd-ink);
	font-size: 0.95em;
	font-weight: 800;
	line-height: 1.4;
}

.pd-side-title i {
	color: var(--pd-primary);
	font-size: 0.88em;
}


/* ==================================================================
   === TABS  4. 탭
   ※ 부트스트랩이 li 에 .active 를 붙였다 뗍니다.
     display 나 id 는 건드리지 않습니다.
================================================================== */
.pd-tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 5px;
}

.pd-tabs .pd-tab {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 12px 15px;
	border: 0;
	border-radius: var(--pd-radius-s);
	background: transparent;
	color: var(--pd-body);
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

/* 앞쪽 점 */
.pd-tabs .pd-tab::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c3ccdb;
	transition: background .18s ease, box-shadow .18s ease;
}

.pd-tabs .pd-tab:hover {
	background: #eef4ff;
	color: var(--pd-primary);
}

.pd-tabs .pd-tab:hover::before {
	background: var(--pd-primary);
}

.pd-tabs .pd-tab.active {
	background: var(--pd-primary);
	color: #fff;
}

.pd-tabs .pd-tab.active::before {
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* 테마 CSS 가 .nav-link 에 흰 박스와 테두리를 넣어 두었습니다 */
.pd-tabs .pd-tab.nav-link,
.pd-tabs .pd-tab.nav-link:hover,
.pd-tabs .pd-tab.nav-link.active {
	border: 0 !important;
	box-shadow: none !important;
}

.pd-tabs .pd-tab.nav-link:not(.active) {
	background: transparent !important;
}

.pd-tabs .pd-tab.nav-link:not(.active):hover {
	background: #eef4ff !important;
}

.pd-tabs .pd-tab.nav-link.active {
	background: var(--pd-primary) !important;
	color: #fff !important;
}

/* li 안의 <p> ? 테마가 여백·배경·색을 지정해 두었습니다 */
.pd-tabs .pd-tab p {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: 1.45 !important;
	text-align: left !important;
	width: auto !important;
	min-width: 0 !important;
}


/* ==================================================================
   === DOWNLOAD  5. 자료 내려받기
   ※ 기본은 숨김입니다(my-lite.php 의 pd-hide 클래스).
     보이게 하려면 그 클래스만 지우면 됩니다.
================================================================== */
.pd-hide {
	display: none !important;
}

/* ※ 제목("자료 내려받기")은 뺐습니다. PDF 배지와 파일 이름만으로
     충분히 알아볼 수 있어서입니다. 위 구분선만 남깁니다. */
.pd-down {
	margin-top: 16px;
	padding: 15px 4px 0;
	border-top: 1px solid var(--pd-line);
}

.pd-down ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.pd-down li {
	margin: 0;
	padding: 0;
	background: none;
}

.pd-down a,
.pd-down a:link,
.pd-down a:visited {
	background: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-s);
	background: #fff;
	color: var(--pd-ink);
	font-size: 0.88em;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.pd-down a:hover {
	border-color: var(--pd-primary);
	background: #f5f9ff;
	color: var(--pd-primary);
	text-decoration: none;
}

/* PDF 배지 ? 테마의 .icon 은 오른쪽으로 흐르므로 쓰지 않습니다 */
.pd-down-ico {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: #fdecec;
	color: #d9433f;
	font-size: 0.92em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .18s ease, color .18s ease;
}

.pd-down a:hover .pd-down-ico {
	background: #d9433f;
	color: #fff;
}

.pd-down-text {
	flex: 1 1 auto;
	min-width: 0;
	/* 긴 파일 이름이 카드를 밀어 넓히지 못하게 */
	overflow-wrap: anywhere;
}


/* ==================================================================
   === PANEL  6. 오른쪽 본문 카드
   ※ 보이기/숨기기는 부트스트랩(tab-pane)이 처리합니다.
     여기서 display 를 건드리면 탭이 깨집니다.
================================================================== */
.pd-panel {
	background: #fff;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	box-shadow: none;
	padding: 32px 34px 34px;
}

.pd-panel-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 20px;
	padding-bottom: 17px;
	border-bottom: 1px solid var(--pd-line);
	color: var(--pd-ink);
	font-size: 1.3em;
	font-weight: 800;
	line-height: 1.4;
	word-break: keep-all;
}

.pd-panel-title span {
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(0, 102, 255, 0.09);
	color: var(--pd-primary);
	font-size: 0.62em;
	font-weight: 700;
	white-space: nowrap;
}


/* ==================================================================
   === LIST  7. 머리말 / 목록
================================================================== */
.pd-lead {
	position: relative;
	margin: 0 0 20px;
	padding: 17px 20px 17px 22px;
	border: 1px solid rgba(0, 102, 255, 0.16);
	border-radius: var(--pd-radius-s);
	background: linear-gradient(135deg, #f2f7ff 0%, #f8fbff 100%);
	color: var(--pd-body);
	font-size: 0.95em;
	line-height: 1.85;
	word-break: keep-all;
	overflow: hidden;
}

.pd-lead::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--pd-primary);
}

.pd-note {
	margin: 18px 0 0;
	color: var(--pd-body);
	font-size: 0.93em;
	line-height: 1.85;
	word-break: keep-all;
}

.pd-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pd-list li {
	position: relative;
	margin: 0;
	padding: 9px 8px 9px 29px;
	border-radius: 9px;
	background: none;
	color: var(--pd-body);
	font-size: 0.93em;
	line-height: 1.8;
	word-break: keep-all;
	transition: background .16s ease;
}

.pd-list li::before {
	content: '\f00c';
	font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: 7px;
	top: 11px;
	color: var(--pd-primary);
	font-size: 0.7em;
	opacity: 0.6;
}

.pd-list li:hover {
	background: var(--pd-soft);
}


/* 순서가 있는 절차 목록 (.pd-steps) ? 번호 원 + 세로 연결선 */
.pd-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pd-step;
}

.pd-steps li {
	position: relative;
	margin: 0;
	padding: 4px 8px 22px 44px;
	background: none;
	color: var(--pd-body);
	font-size: 0.93em;
	line-height: 1.8;
	word-break: keep-all;
}

/* 마지막 항목 ? 아래 안내 상자와 너무 붙지 않도록 여백을 둡니다 */
.pd-steps li:last-child {
	padding-bottom: 14px;
}

.pd-steps li::before {
	counter-increment: pd-step;
	content: counter(pd-step);
	position: absolute;
	left: 0;
	top: 2px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pd-primary);
	color: #fff;
	font-size: 0.82em;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 번호끼리 잇는 세로선 */
.pd-steps li::after {
	content: '';
	position: absolute;
	left: 13px;
	top: 34px;
	bottom: 6px;
	width: 2px;
	background: var(--pd-line);
}

.pd-steps li:last-child::after {
	display: none;
}

/* 절차·목록·본문 안의 링크 (메일 주소 등) */
.pd-steps a,
.pd-steps a:link,
.pd-steps a:visited,
.pd-list a,
.pd-list a:link,
.pd-list a:visited,
.pd-note a,
.pd-note a:link,
.pd-note a:visited,
.pd-warn-text a,
.pd-warn-text a:link,
.pd-warn-text a:visited {
	color: var(--pd-primary);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 102, 255, 0.35);
	word-break: break-all;
}

.pd-steps a:hover,
.pd-list a:hover,
.pd-note a:hover,
.pd-warn-text a:hover {
	color: var(--pd-primary-dark);
	border-bottom-color: var(--pd-primary-dark);
	text-decoration: none;
}

/* 절차 목록 바로 뒤에 오는 상자는 넉넉히 띄웁니다 */
.pd-steps + .pd-warn,
.pd-steps + .pd-note {
	margin-top: 46px;
}


/* ==================================================================
   === SPEC  8. 사양 표
   item.php 의 .it-specs 와 같은 형태입니다.
================================================================== */
.pd-spec {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.pd-spec li {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 13px 16px;
	border: 1px solid #eef1f7;
	border-radius: var(--pd-radius-s);
	background: var(--pd-soft);
	font-size: 0.9em;
	line-height: 1.6;
	word-break: keep-all;
}

.pd-spec li b {
	flex: 0 0 88px;
	color: var(--pd-muted);
	font-weight: 700;
}

.pd-spec li span {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--pd-ink);
	font-weight: 700;
}


/* 패널 안 작은 소제목 (.pd-subtitle) */
.pd-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 30px 0 12px;
	color: var(--pd-ink);
	font-size: 0.98em;
	font-weight: 800;
	line-height: 1.4;
}

.pd-subtitle i {
	color: var(--pd-primary);
	font-size: 0.88em;
}

.pd-panel-title + .pd-subtitle,
.pd-lead + .pd-subtitle {
	margin-top: 22px;
}


/* 한 줄짜리 표 (계좌·연락처 등) ? .pd-spec 에 is-one 을 함께 붙입니다 */
.pd-spec.is-one {
	grid-template-columns: 1fr;
	gap: 8px;
}

.pd-spec.is-one li b {
	flex: 0 0 96px;
}


/* 문답 목록 (.pd-qa) ? 질문과 답을 눈으로 구분합니다 */
.pd-qa {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.pd-qa li {
	margin: 0;
	padding: 15px 18px;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-s);
	background: var(--pd-soft);
	word-break: keep-all;
}

.pd-qa .pd-q {
	display: block;
	margin-bottom: 8px;
	color: var(--pd-ink);
	font-size: 0.93em;
	font-weight: 700;
	line-height: 1.7;
}

.pd-qa .pd-q::before {
	content: 'Q';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 6px;
	background: #e6e9f0;
	color: var(--pd-muted);
	font-size: 0.78em;
	font-weight: 800;
	vertical-align: 1px;
}

.pd-qa .pd-a {
	display: block;
	padding-left: 28px;
	color: var(--pd-body);
	font-size: 0.9em;
	line-height: 1.75;
	position: relative;
}

/* 질문이 아니라 '안내 + 이유' 일 때 ? is-tip 을 같이 붙입니다
   Q/A 대신 느낌표와 화살표로 표시합니다. */
.pd-qa.is-tip .pd-q::before {
	content: '\f06a';
	font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
	font-weight: 900;
	background: rgba(183, 121, 31, 0.12);
	color: #b7791f;
}

.pd-qa.is-tip .pd-a::before {
	content: '\f061';
	font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 0.7em;
}

.pd-qa .pd-a::before {
	content: 'A';
	position: absolute;
	left: 0;
	top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: rgba(0, 102, 255, 0.10);
	color: var(--pd-primary);
	font-size: 0.82em;
	font-weight: 800;
}


/* 그림 (.pd-figure) ? 폭을 넘지 않게, 테두리와 함께 */
.pd-figure {
	margin: 0 0 4px;
}

.pd-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-s);
	background: #fff;
}

.pd-figure figcaption {
	margin-top: 10px;
	color: var(--pd-muted);
	font-size: 0.86em;
	line-height: 1.6;
	text-align: center;
}


/* 동영상 (.pd-video) ? 화면 폭에 맞춰 16:9 로 늘어납니다.
   iframe 에 width/height 가 없으면 300×150 으로 아주 작게 나옵니다. */
.pd-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 4px;
	border-radius: var(--pd-radius-s);
	overflow: hidden;
	background: #0f1420;
}

.pd-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* aspect-ratio 를 모르는 구형 브라우저용 */
@supports not (aspect-ratio: 16 / 9) {
	.pd-video {
		height: 0;
		padding-bottom: 56.25%;
	}
}


/* 예시 표기 (.pd-eg) ? 예) 10.223.kr 같은 값 */
.pd-eg {
	display: inline-block;
	margin: 4px 4px 0 0;
	padding: 2px 9px;
	border-radius: 6px;
	background: rgba(0, 102, 255, 0.08);
	color: var(--pd-primary);
	font-weight: 700;
	white-space: nowrap;
}


/* ==================================================================
   === WARN  9. 주의 상자
================================================================== */
.pd-warn {
	position: relative;
	margin-top: 24px;
	padding: 19px 22px 19px 24px;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-s);
	background: var(--pd-soft);
	overflow: hidden;
}

.pd-warn::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #d9433f;
}

/* 상자가 연달아 올 때 사이 간격 */
.pd-warn + .pd-warn {
	margin-top: 14px;
}

/* 상자가 제목 바로 밑에 올 때는 위 여백을 없앱니다 */
.pd-panel-title + .pd-warn {
	margin-top: 0;
}

/* 경고가 아니라 안내일 때 (파란 계열) ? is-info 를 같이 붙입니다 */
.pd-warn.is-info {
	margin-top: 0;
	margin-bottom: 20px;
	border-color: rgba(0, 102, 255, 0.16);
	background: #f4f8ff;
}

.pd-warn.is-info::before {
	background: var(--pd-primary);
}

.pd-warn.is-info .pd-warn-title i {
	color: var(--pd-primary);
}

/* 좋은 소식일 때 (초록 계열) ? is-ok 를 같이 붙입니다 */
.pd-warn.is-ok {
	border-color: rgba(15, 157, 110, 0.20);
	background: #f1faf6;
}

.pd-warn.is-ok::before {
	background: #0f9d6e;
}

.pd-warn.is-ok .pd-warn-title {
	margin-bottom: 0;
	align-items: flex-start;
	word-break: keep-all;
	line-height: 1.6;
}

.pd-warn.is-ok .pd-warn-title i {
	color: #0f9d6e;
	margin-top: 3px;
}

.pd-warn-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 9px;
	padding: 0;
	background: none;
	color: var(--pd-ink);
	font-size: 0.98em;
	font-weight: 800;
	line-height: 1.4;
}

.pd-warn-title i {
	color: #d9433f;
	font-size: 0.9em;
}

.pd-warn-text {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--pd-body);
	font-size: 0.91em;
	line-height: 1.85;
	word-break: keep-all;
}


/* ==================================================================
   === RESPONSIVE  10. 반응형
================================================================== */
@media (max-width: 991px) {
	.pd-layout {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.pd-side {
		position: static;
	}

	.pd-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
	}

	.pd-tabs .pd-tab {
		justify-content: center;
		padding: 12px 10px;
		font-size: 0.9em;
	}
}

@media (max-width: 575px) {
	.pd-section {
		padding: 16px 0 54px;
	}

	.pd-panel {
		padding: 22px 18px 24px;
	}

	.pd-panel-title {
		font-size: 1.12em;
	}

	.pd-spec {
		grid-template-columns: 1fr;
	}

	.pd-spec li {
		flex-direction: column;
		gap: 2px;
	}

	.pd-spec li b {
		flex: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-section * {
		transition: none !important;
	}
}