/* Shared visual language for the proposal deck — used by the front-end
   web/print view AND (in miniature) the admin live-preview panel.
   Must stay visually in sync with assets/pptx/template.pptx. */

:root {
	--pdg-navy: #1B2A41;
	--pdg-navy-dark: #111B2B;
	--pdg-terracotta: #D96B3A;
	--pdg-cream: #FAF7F2;
	--pdg-gray: #5A5F66;
	--pdg-text: #333333;
}

.pdg-deck {
	max-width: 1100px;
	margin: 0 auto;
}

.pdg-slide {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pdg-cream);
	margin-bottom: 28px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
	font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
	color: var(--pdg-text);
}

.pdg-slide__label {
	position: absolute;
	top: -22px;
	left: 4px;
	font-size: 11px;
	color: var(--pdg-gray);
	letter-spacing: 0.05em;
}

/* ---------- Slide 1: cover ---------- */
.pdg-slide--cover {
	background: var(--pdg-cream);
}

.pdg-slide--cover .pdg-band {
	position: absolute;
	top: 0;
	left: 0;
	width: 52%;
	height: 36%;
	background: var(--pdg-navy);
	clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

.pdg-slide--cover .pdg-band-thin {
	position: absolute;
	top: 34.5%;
	left: 0;
	width: 65%;
	height: 3.8%;
	background: var(--pdg-terracotta);
	clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}

.pdg-slide--cover .pdg-company {
	position: absolute;
	top: 6%;
	left: 5%;
	color: #fff;
	font-weight: 700;
	font-size: clamp(11px, 1.5vw, 16px);
}

.pdg-slide--cover .pdg-title {
	position: absolute;
	top: 42%;
	left: 6.5%;
	font-size: clamp(24px, 5.2vw, 52px);
	font-weight: 700;
	color: var(--pdg-navy);
}

.pdg-slide--cover .pdg-project {
	position: absolute;
	top: 55%;
	left: 7%;
	font-size: clamp(12px, 1.8vw, 22px);
	color: var(--pdg-gray);
}

.pdg-slide--cover .pdg-client-box {
	position: absolute;
	right: 5%;
	bottom: 9%;
	width: 34%;
	min-height: 18%;
	background: var(--pdg-navy);
	color: #fff;
	padding: clamp(8px, 1.6vw, 20px);
	box-sizing: border-box;
}

.pdg-slide--cover .pdg-client-name {
	font-size: clamp(14px, 2.2vw, 24px);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pdg-slide--cover .pdg-issue-date {
	margin-top: 10px;
	font-size: clamp(9px, 1.1vw, 12px);
	color: #C9D2DC;
}

.pdg-slide--cover .pdg-footer-note {
	position: absolute;
	left: 5%;
	bottom: 5%;
	font-size: clamp(9px, 1.1vw, 12px);
	color: var(--pdg-gray);
}

/* ---------- Slide 2: greeting ---------- */
.pdg-slide--greeting {
	background: #fff;
	padding-left: 3%;
}

.pdg-slide--greeting::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2.6%;
	background: var(--pdg-navy);
}

.pdg-slide--greeting .pdg-heading {
	position: absolute;
	top: 8%;
	left: 7%;
	font-size: clamp(18px, 3.6vw, 30px);
	font-weight: 700;
	color: var(--pdg-navy);
}

.pdg-slide--greeting .pdg-heading::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: var(--pdg-terracotta);
	margin-top: 10px;
}

.pdg-slide--greeting .pdg-body {
	position: absolute;
	top: 26%;
	left: 7%;
	right: 6%;
	font-size: clamp(11px, 1.6vw, 16px);
	line-height: 1.85;
	white-space: pre-line;
}

.pdg-slide--greeting .pdg-signoff {
	position: absolute;
	bottom: 8%;
	left: 7%;
	font-size: clamp(10px, 1.3vw, 13px);
	font-weight: 700;
	color: var(--pdg-gray);
}

/* ---------- Slide 3: staff introduction ---------- */
.pdg-slide--intro {
	background: var(--pdg-cream);
}

.pdg-slide--intro .pdg-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14%;
	background: var(--pdg-navy);
	display: flex;
	align-items: center;
	padding-left: 5%;
	box-sizing: border-box;
}

.pdg-slide--intro .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

.pdg-slide--intro .pdg-intro-photo-frame {
	position: absolute;
	top: 24%;
	left: 6%;
	width: 26%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 4px solid var(--pdg-navy);
	background: #E7E1D6 center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #8b8478;
	font-size: clamp(9px, 1.2vw, 12px);
	box-sizing: border-box;
	overflow: hidden;
}

.pdg-slide--intro .pdg-intro-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pdg-slide--intro .pdg-intro-col {
	position: absolute;
	top: 22%;
	left: 37%;
	right: 6%;
	bottom: 8%;
}

.pdg-slide--intro .pdg-intro-title {
	font-size: clamp(13px, 2.1vw, 19px);
	font-weight: 700;
	color: var(--pdg-terracotta);
}

.pdg-slide--intro .pdg-intro-title::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	background: var(--pdg-terracotta);
	margin: 8px 0 14px;
}

.pdg-slide--intro .pdg-intro-text {
	font-size: clamp(10px, 1.4vw, 14.5px);
	line-height: 1.75;
	white-space: pre-line;
	color: var(--pdg-text);
}

.pdg-slide--intro .pdg-badges {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(6px, 1vw, 10px);
	margin-top: clamp(10px, 2.4vw, 20px);
}

.pdg-slide--intro .pdg-badge {
	display: inline-block;
	padding: clamp(4px, 0.8vw, 8px) clamp(10px, 1.6vw, 16px);
	border: 1.5px solid var(--pdg-navy);
	border-radius: 999px;
	font-size: clamp(9px, 1.15vw, 12px);
	font-weight: 700;
	color: var(--pdg-navy);
	background: #fff;
	white-space: nowrap;
}

/* ---------- Slide 4: site survey ---------- */
.pdg-slide--survey .pdg-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14%;
	background: var(--pdg-navy);
	display: flex;
	align-items: center;
	padding-left: 5%;
	box-sizing: border-box;
}

.pdg-slide--survey .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

/* 外観写真の複数枚対応 (kato様 request, 2026-09-27): up to
   PDG_PPTX_Merger::SURVEY_PHOTO_MAX (6) photos arranged 3 cols x 2 rows,
   in the SAME 5%/19%/44%/73% footprint the single old .pdg-photo-frame
   used to occupy on its own. .pdg-photo-gallery is the positioned
   container (was .pdg-photo-frame's own position:absolute); each photo's
   own .pdg-photo-frame is now a plain CSS Grid cell, sized by
   aspect-ratio (the SAME cell ratio as
   PDG_PPTX_Merger::frame_aspect_for('survey') so pdg_photo_img_attrs()'s
   crop percentages land identically here and in the .pptx) rather than
   absolute top/left/width/height. Unlike the .pptx (a fixed 6-cell grid),
   this has no cap of its own — grid-auto-rows lets a 7th+ photo simply
   wrap onto a new row, since the web page has no fixed "slide" bounds the
   way a PowerPoint canvas does; deck-slides.php still only ever asks the
   .pptx download for the first SURVEY_PHOTO_MAX. */
.pdg-slide--survey .pdg-photo-gallery {
	position: absolute;
	top: 19%;
	left: 5%;
	width: 44%;
	height: 73%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: min-content;
	gap: 2.4%;
	overflow-y: auto;
}

.pdg-slide--survey .pdg-photo-gallery .pdg-photo-frame {
	position: relative;
	border: 2px solid var(--pdg-navy);
	background: #E7E1D6 center/cover no-repeat;
	box-sizing: border-box;
	overflow: hidden;
	aspect-ratio: 1.86667 / 2.625;
}

.pdg-slide--survey .pdg-photo-gallery .pdg-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "写真がまだ設定されていません" empty state — spans the full gallery
   width instead of sitting in one grid cell, same idea as
   .pdg-cert-photo-frame's empty state elsewhere in this file. */
.pdg-slide--survey .pdg-photo-gallery .pdg-photo-empty {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 25%;
	border: 2px dashed var(--pdg-navy);
	color: #8b8478;
	font-size: clamp(10px, 1.3vw, 13px);
	box-sizing: border-box;
	text-align: center;
	padding: 8px;
}

.pdg-slide--survey .pdg-summary-col {
	position: absolute;
	top: 21%;
	left: 53%;
	right: 5%;
}

.pdg-slide--survey .pdg-summary-title {
	font-size: clamp(13px, 2vw, 18px);
	font-weight: 700;
	color: var(--pdg-navy);
}

.pdg-slide--survey .pdg-summary-title::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	background: var(--pdg-terracotta);
	margin: 8px 0 14px;
}

.pdg-slide--survey .pdg-summary-text {
	font-size: clamp(10px, 1.35vw, 14.5px);
	line-height: 1.7;
	white-space: pre-line;
	min-height: 3em;
}

.pdg-slide--survey .pdg-facts {
	margin-top: clamp(10px, 3vw, 28px);
}

.pdg-slide--survey .pdg-fact-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: clamp(6px, 1.4vw, 14px);
	font-size: clamp(10px, 1.3vw, 13px);
}

.pdg-slide--survey .pdg-fact-row .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pdg-terracotta);
	flex: none;
}

.pdg-slide--survey .pdg-fact-row .label {
	font-weight: 700;
	color: var(--pdg-gray);
	width: 6.5em;
	flex: none;
}

/* ---------- Slide 5: why repainting matters (fixed content — no per-item
   data, so unlike the repeater sections above/below this is always exactly
   one slide). Original two-panel "早めに対応 vs 放置" comparison + reused
   badge-chip vocabulary; deliberately NOT a chart, so it can't read as a
   copy of tosou.club's donut-chart style. Mirrors assets/pptx/template.pptx
   slide 5 (see pptx_proto/build.py). ---------- */
.pdg-slide--necessity .pdg-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14%;
	background: var(--pdg-navy);
	display: flex;
	align-items: center;
	padding-left: 5%;
	box-sizing: border-box;
}

.pdg-slide--necessity .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

.pdg-necessity-intro {
	position: absolute;
	top: 18%;
	left: 5.25%;
	right: 5.25%;
	font-size: clamp(10px, 1.4vw, 14px);
	line-height: 1.6;
	color: var(--pdg-text);
}

.pdg-necessity-panels {
	position: absolute;
	top: 34%;
	left: 5.25%;
	right: 5.25%;
	height: 38.7%;
	display: flex;
	gap: 2.3%;
}

.pdg-necessity-panel {
	flex: 1;
	background: #fff;
	border: 1px solid #D8D2C5;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.pdg-necessity-panel-head {
	padding: clamp(8px, 1.6vw, 14px) clamp(12px, 2vw, 20px);
	color: #fff;
	font-weight: 700;
	font-size: clamp(12px, 1.8vw, 16px);
}

.pdg-necessity-panel--early .pdg-necessity-panel-head {
	background: var(--pdg-terracotta);
}

.pdg-necessity-panel--late .pdg-necessity-panel-head {
	background: var(--pdg-navy-dark);
}

.pdg-necessity-panel-body {
	padding: clamp(10px, 2vw, 20px) clamp(12px, 2vw, 20px);
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.6vw, 14px);
}

.pdg-necessity-panel .pdg-fact-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: clamp(10px, 1.3vw, 13px);
	line-height: 1.5;
}

.pdg-necessity-panel .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
	margin-top: 0.4em;
}

.pdg-necessity-panel--early .dot {
	background: var(--pdg-terracotta);
}

.pdg-necessity-panel--late .dot {
	background: var(--pdg-navy-dark);
}

.pdg-necessity-signs-label {
	position: absolute;
	top: 77.5%;
	left: 5.25%;
	font-size: clamp(12px, 1.6vw, 14px);
	font-weight: 700;
	color: var(--pdg-navy);
}

.pdg-necessity-signs {
	position: absolute;
	top: 84%;
	left: 5.25%;
	right: 5.25%;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(6px, 1.2vw, 10px);
}

.pdg-necessity-chip {
	display: inline-block;
	padding: clamp(4px, 0.9vw, 8px) clamp(10px, 1.8vw, 16px);
	border: 1.5px solid var(--pdg-terracotta);
	border-radius: 999px;
	background: #EFE3D6;
	color: var(--pdg-navy);
	font-weight: 700;
	font-size: clamp(9px, 1.15vw, 12.5px);
	white-space: nowrap;
}

.pdg-necessity-footnote {
	position: absolute;
	top: 94%;
	left: 5.25%;
	right: 5.25%;
	font-size: clamp(9px, 1.1vw, 11px);
	color: var(--pdg-gray);
}

/* ---------- Slide 6+: diagnosis chart (one card per part, repeatable) ---------- */
.pdg-slide--diagnosis .pdg-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14%;
	background: var(--pdg-navy);
	display: flex;
	align-items: center;
	padding-left: 5%;
	box-sizing: border-box;
}

.pdg-slide--diagnosis .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

.pdg-slide--diagnosis .pdg-diag-photo-frame {
	position: absolute;
	top: 19%;
	left: 5%;
	width: 41%;
	height: 73%;
	border: 2px solid var(--pdg-navy);
	background: #E7E1D6 center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #8b8478;
	font-size: clamp(10px, 1.3vw, 13px);
	box-sizing: border-box;
	overflow: hidden;
}

.pdg-slide--diagnosis .pdg-diag-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pdg-slide--diagnosis .pdg-diag-col {
	position: absolute;
	top: 22%;
	left: 50%;
	right: 5%;
}

.pdg-slide--diagnosis .pdg-diag-part {
	font-size: clamp(15px, 2.4vw, 22px);
	font-weight: 700;
	color: var(--pdg-terracotta);
}

.pdg-slide--diagnosis .pdg-diag-part::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: var(--pdg-terracotta);
	margin: 10px 0 16px;
}

.pdg-slide--diagnosis .pdg-diag-comment {
	font-size: clamp(11px, 1.5vw, 15px);
	line-height: 1.8;
	white-space: pre-line;
	color: var(--pdg-text);
}

/* ---------- Slide 6+: plan / warranty (one card per plan, repeatable) ---------- */
.pdg-slide--plan .pdg-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14%;
	background: var(--pdg-navy);
	display: flex;
	align-items: center;
	padding-left: 5%;
	box-sizing: border-box;
}

.pdg-slide--plan .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

.pdg-slide--plan .pdg-plan-name {
	position: absolute;
	top: 20%;
	left: 7%;
	right: 44%;
	font-size: clamp(18px, 3vw, 30px);
	font-weight: 700;
	color: var(--pdg-navy);
}

.pdg-slide--plan .pdg-plan-name::after {
	content: "";
	display: block;
	width: 70px;
	height: 3px;
	background: var(--pdg-terracotta);
	margin-top: 12px;
}

.pdg-slide--plan .pdg-plan-price-box {
	position: absolute;
	top: 39%;
	left: 7%;
	width: 44%;
	background: var(--pdg-navy);
	color: #fff;
	padding: clamp(10px, 2vw, 22px);
	box-sizing: border-box;
}

.pdg-slide--plan .pdg-plan-price-label {
	font-size: clamp(9px, 1.2vw, 13px);
	color: #C9D2DC;
}

.pdg-slide--plan .pdg-plan-price-value {
	margin-top: 6px;
	font-size: clamp(18px, 3.4vw, 34px);
	font-weight: 700;
}

.pdg-slide--plan .pdg-plan-warranty-col {
	position: absolute;
	top: 20%;
	left: 55%;
	right: 6%;
}

.pdg-slide--plan .pdg-plan-warranty-title {
	font-size: clamp(13px, 2vw, 18px);
	font-weight: 700;
	color: var(--pdg-navy);
}

.pdg-slide--plan .pdg-plan-warranty-title::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	background: var(--pdg-terracotta);
	margin: 8px 0 16px;
}

.pdg-slide--plan .pdg-plan-warranty-col .pdg-fact-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: clamp(8px, 1.6vw, 16px);
	font-size: clamp(10px, 1.3vw, 13px);
}

.pdg-slide--plan .pdg-plan-warranty-col .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pdg-terracotta);
	flex: none;
}

.pdg-slide--plan .pdg-plan-warranty-col .label {
	font-weight: 700;
	color: var(--pdg-gray);
	width: 6em;
	flex: none;
}

.pdg-slide--plan .pdg-plan-note {
	position: absolute;
	top: 68%;
	left: 7%;
	right: 6%;
	font-size: clamp(10px, 1.3vw, 13px);
	line-height: 1.7;
	white-space: pre-line;
	color: var(--pdg-gray);
}

/* ---------- Slide 見積もり: estimate table (one PAGE per ≤PDG_ESTIMATE_MAX_ROWS_PER_PAGE items) ----------
   Item rows are paginated in PHP (pdg_paginate_estimate_items() in
   class-pdg-render.php, mirrored for the .pptx by
   PDG_PPTX_Merger::paginate_table_repeater_slides()) before this
   template ever sees them, specifically so each page's content stays
   bounded — but a page's exact rendered height still isn't a fixed
   number of pixels the way the other slides' absolutely-positioned
   layouts are, so this slide keeps aspect-ratio:auto (grow to fit
   its content rather than risk clipping a row) while intentionally
   NOT overriding the generic .pdg-slide's overflow:hidden — that
   default is also what keeps .pdg-slide__label (deliberately
   invisible everywhere: it renders above the box, at top:-22px, and
   overflow:hidden crops it) invisible here too. Giving this slide
   overflow:visible previously made that label pop out as stray text
   above the section — don't reintroduce that. */
.pdg-slide--estimate {
	aspect-ratio: auto;
	padding-bottom: 4%;
}

.pdg-slide--estimate .pdg-header {
	position: relative;
	height: auto;
	padding: clamp(14px, 2.4vw, 26px) 5%;
	background: var(--pdg-navy);
	box-sizing: border-box;
}

.pdg-slide--estimate .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

.pdg-estimate-table {
	width: 90%;
	margin: clamp(14px, 2.4vw, 26px) 5% 0;
	border-collapse: collapse;
	font-size: clamp(10px, 1.4vw, 14px);
}

.pdg-estimate-table th,
.pdg-estimate-table td {
	padding: clamp(6px, 1.1vw, 12px) clamp(6px, 1vw, 10px);
	text-align: left;
	border-bottom: 1px solid #E3DCD1;
}

.pdg-estimate-table th {
	color: var(--pdg-navy);
	font-weight: 700;
	border-bottom: 2px solid var(--pdg-terracotta);
	white-space: nowrap;
}

.pdg-estimate-table td:nth-child(3),
.pdg-estimate-table td:nth-child(5),
.pdg-estimate-table td:nth-child(6),
.pdg-estimate-table th:nth-child(3),
.pdg-estimate-table th:nth-child(5),
.pdg-estimate-table th:nth-child(6) {
	text-align: right;
	white-space: nowrap;
}

.pdg-estimate-totals {
	width: 90%;
	margin: clamp(10px, 2vw, 18px) 5% 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.pdg-estimate-totals-row {
	display: flex;
	gap: 18px;
	font-size: clamp(10px, 1.4vw, 14px);
	color: var(--pdg-text);
	min-width: 220px;
	justify-content: space-between;
}

.pdg-estimate-totals-row span:first-child {
	color: var(--pdg-gray);
}

.pdg-estimate-totals-row--total {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 2px solid var(--pdg-navy);
	font-size: clamp(14px, 2.2vw, 22px);
	font-weight: 700;
	color: var(--pdg-navy);
}

.pdg-estimate-totals-row--total span:first-child {
	color: var(--pdg-navy);
}

/* ---------- Slide 9: why choose us (fixed 2x2 card grid, 4 admin-editable
   title/desc pairs — mirrors assets/pptx/template.pptx's slide 9, see
   pptx_proto/build.py). ---------- */
.pdg-slide--features .pdg-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14%;
	background: var(--pdg-navy);
	display: flex;
	align-items: center;
	padding-left: 5%;
	box-sizing: border-box;
}

.pdg-slide--features .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

.pdg-features-grid {
	position: absolute;
	top: 18%;
	left: 5.25%;
	right: 5.25%;
	bottom: 4.7%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 6% 3.4%;
}

.pdg-feature-card {
	background: #fff;
	border: 1px solid #D8D2C5;
	box-sizing: border-box;
	padding: clamp(14px, 2.2vw, 22px);
	display: flex;
	flex-direction: row;
	gap: clamp(10px, 1.6vw, 16px);
}

.pdg-feature-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Always-reserved optional photo strip on the card's right edge — same
   "reserve the space either way" precedent as 資格・認定's photo frame
   (deck.css has no clean way to reflow a flex sibling's width based on
   whether a photo was set, and PowerPoint has none either). */
.pdg-feature-photo-frame {
	flex: none;
	width: clamp(50px, 9vw, 92px);
	align-self: stretch;
	border: 1.5px solid var(--pdg-navy);
	background: #E7E1D6;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.pdg-feature-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pdg-feature-head {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.6vw, 14px);
	margin-bottom: clamp(10px, 1.6vw, 16px);
}

.pdg-feature-badge {
	flex: none;
	width: clamp(28px, 3.8vw, 38px);
	height: clamp(28px, 3.8vw, 38px);
	border-radius: 50%;
	background: var(--pdg-terracotta);
	color: #fff;
	font-weight: 700;
	font-size: clamp(13px, 1.9vw, 17px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pdg-feature-title {
	font-weight: 700;
	color: var(--pdg-navy);
	font-size: clamp(13px, 1.8vw, 16px);
}

.pdg-feature-desc {
	font-size: clamp(10px, 1.3vw, 13px);
	line-height: 1.6;
	white-space: pre-line;
	color: var(--pdg-text);
}

/* ---------- Slide 10: community involvement (fixed header/intro/footnote +
   3 admin-editable title/desc cards in a single row — mirrors
   assets/pptx/template.pptx's slide 10, see pptx_proto/build.py).
   Deliberately a row of 3, not the 2x2 grid slide 9 uses, so the two
   "highlight card" sections read as visually distinct. ---------- */
.pdg-slide--social .pdg-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14%;
	background: var(--pdg-navy);
	display: flex;
	align-items: center;
	padding-left: 5%;
	box-sizing: border-box;
}

.pdg-slide--social .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

.pdg-social-intro {
	position: absolute;
	top: 18%;
	left: 5.25%;
	right: 5.25%;
	font-size: clamp(10px, 1.4vw, 14px);
	line-height: 1.6;
	color: var(--pdg-text);
}

.pdg-social-row {
	position: absolute;
	top: 30.7%;
	left: 5.25%;
	right: 5.25%;
	/* Grown from 44% (kato様 follow-up: the photo strip below each card's
	   description read as too wide/short at the original card height) —
	   see pptx_proto/build.py's soc_card_h comment for the matching pptx
	   change; .pdg-social-footnote below moves down to match. */
	height: 57.3%;
	display: flex;
	gap: 3%;
}

.pdg-social-card {
	flex: 1;
	background: #fff;
	border: 1px solid #D8D2C5;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.pdg-social-card-head {
	background: var(--pdg-terracotta);
	color: #fff;
	font-weight: 700;
	font-size: clamp(11px, 1.5vw, 14.5px);
	padding: clamp(8px, 1.4vw, 14px) clamp(10px, 1.6vw, 16px);
}

.pdg-social-card-desc {
	padding: clamp(10px, 1.8vw, 18px) clamp(10px, 1.6vw, 16px);
	font-size: clamp(10px, 1.3vw, 12.5px);
	line-height: 1.6;
	white-space: pre-line;
	color: var(--pdg-text);
}

/* Optional photo BELOW the description (kato様 follow-up — unlike
   当社が選ばれる理由's cards, which put the photo beside the text, this
   one goes underneath). .pdg-social-card is already a column flex, so this
   simply stacks as the next child; flex:1 lets it fill whatever height
   remains after the head bar + description in this card's fixed row
   height, and hiding it (deck-slides.php sets display:none when no photo
   is set) reclaims that space with no separate reflow logic needed —
   compare PDG_PPTX_Merger::strip_empty_social_photos(), which needs a
   manual XML rewrite for the same effect since .pptx has no such reflow. */
.pdg-social-photo-frame {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0 clamp(10px, 1.6vw, 16px) clamp(10px, 1.6vw, 16px);
	border: 1.5px solid var(--pdg-navy);
	background: #E7E1D6;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

.pdg-social-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pdg-social-footnote {
	position: absolute;
	top: 90%; /* was 80% — moved down to clear the taller .pdg-social-row */
	left: 5.25%;
	right: 5.25%;
	font-size: clamp(9px, 1.1vw, 11px);
	color: var(--pdg-gray);
}

/* ---------- Slide 11: certifications & licenses (fixed header/intro +
   ONE open-ended {{CERTIFICATIONS}} list — mirrors
   assets/pptx/template.pptx's slide 11, see pptx_proto/build.py). Reuses
   the exact same "one line per badge" component slide 3's 資格・実績
   already uses (.pdg-badges/.pdg-badge, admin-preview.js's LIST_FIELDS),
   just rescoped and enlarged for a full dedicated slide instead of a
   small photo-adjacent strip. ---------- */
.pdg-slide--certifications .pdg-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14%;
	background: var(--pdg-navy);
	display: flex;
	align-items: center;
	padding-left: 5%;
	box-sizing: border-box;
}

.pdg-slide--certifications .pdg-header span {
	color: #fff;
	font-size: clamp(14px, 2.6vw, 24px);
	font-weight: 700;
}

/* Left column only (5.25%–54.75%) — the right side (57%–94.75%) is the
   optional photo frame below, so text/badges must not run under it. */
.pdg-cert-intro {
	position: absolute;
	top: 18%;
	left: 5.25%;
	right: 45.25%;
	font-size: clamp(10px, 1.4vw, 14px);
	line-height: 1.6;
	color: var(--pdg-text);
}

.pdg-cert-subheading {
	position: absolute;
	top: 32%;
	left: 5.25%;
	font-size: clamp(13px, 1.8vw, 16px);
	font-weight: 700;
	color: var(--pdg-navy);
}

.pdg-cert-subheading::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	background: var(--pdg-terracotta);
	margin-top: 8px;
}

.pdg-slide--certifications .pdg-badges {
	position: absolute;
	top: 44%;
	left: 5.25%;
	right: 45.25%;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(8px, 1.4vw, 14px);
}

.pdg-slide--certifications .pdg-badge {
	display: inline-block;
	padding: clamp(6px, 1.1vw, 11px) clamp(12px, 2vw, 20px);
	border: 1.5px solid var(--pdg-navy);
	border-radius: 999px;
	font-size: clamp(11px, 1.5vw, 15px);
	font-weight: 700;
	color: var(--pdg-navy);
	background: #fff;
	white-space: nowrap;
}

/* Optional photo (kato様 feedback: this slide had unused space on the
   right). Same visual treatment as the other photo frames
   (.pdg-slide--survey .pdg-photo-frame etc.) but with NO "photo not set"
   placeholder text when empty — see deck-slides.php's comment — so an
   untouched proposal just shows a plain neutral box, not a prompt. */
.pdg-cert-photo-frame {
	position: absolute;
	top: 18.7%;
	left: 57%;
	right: 5.25%;
	height: 72%;
	border: 2px solid var(--pdg-navy);
	background: #E7E1D6;
	box-sizing: border-box;
	overflow: hidden;
}

.pdg-cert-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Toolbar (front-end only) ---------- */
.pdg-toolbar {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	max-width: 1100px;
	margin: 0 auto 16px;
}

.pdg-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 24px;
	font-weight: 700;
	text-decoration: none;
	font-size: 0.95em;
	border: none;
	cursor: pointer;
}

.pdg-btn-primary {
	background: var(--pdg-navy);
	color: #fff;
}

.pdg-btn-secondary {
	background: #eef2f7;
	color: #222;
	border: 1px solid #ccd1d9;
}

@media print {
	.no-print { display: none !important; }
	.pdg-slide { box-shadow: none; margin: 0; page-break-after: always; aspect-ratio: auto; height: 100vh; }
	body { background: #fff; }
}

/* Every photo <img> whose field has a custom crop rect applied (see
   class-pdg-render.php's pdg_photo_img_attrs()) gets this class instead
   of the plain width:100%/height:100%/object-fit:cover each frame's own
   "<frame> img" rule above sets — the frame's own inline style (computed
   per-photo, since it depends on that photo's own crop rect) overrides
   the size/position instead. The frame itself must already be
   position:relative/absolute + overflow:hidden (true of every frame in
   this file) so the oversized/offset image is clipped to the frame's
   visible box, same idea as the drag-to-pan editor's own live preview
   (assets/js/admin-crop-editor.js) but expressed as percentages instead
   of a CSS transform. */
img.pdg-img-crop {
	position: absolute;
	max-width: none;
	max-height: none;
	object-fit: fill;
}

/* ---------- Compact variant for the admin metabox live preview ---------- */
.pdg-admin-preview .pdg-deck {
	max-width: 100%;
}

.pdg-admin-preview .pdg-slide {
	margin-bottom: 14px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}