/* ══════════════════════════════════════════════════════════
 * 인쇄 제작 첫 화면(분류 없는 /factoryb/list.php) — factoryb/print-main.php · list.js renderShowcase
 *
 * 정본 정렬(2026-09-24, 사장님 «pc·모바일 모두 개선해»). 값은 정본 토큰(common/bojagi-design-system.css)만 쓴다:
 *   글자 --bj-type-* 9단계 · 색 --bj-ink/-muted/-line/-line-strong · 면 --bj-stone(에디토리얼 띠)/-product-stage(사진 무대)/
 *   -information-surface(안내)/-clean/-charcoal · 간격 --bj-space-1~4(8·16·32·64, 폰 24·48) · 모서리 0(구역)/8(조작·사진) ·
 *   PC 12열 격자(1000px, 틈 20px) · 문장은 본문 16px(14px 는 짧은 정보만) · 누르는 곳 44px 이상.
 * 목록 CSS 의 `.fb-list-page div { margin: 0 }` 가 div 여백을 지우므로 칸 사이는 gap·padding 으로만 띄운다.
 * 폰 사이트 공통 `* { color: var(--basicFontColor) }` 가 자식 글자색을 덮으므로 칸 안은 부모 색을 물려받게 한다.
 * ══════════════════════════════════════════════════════════ */

.fb-print-main-hero,
.fb-print-main-section,
.fb-print-main-heading {
	box-sizing: border-box;
	color: var(--bj-ink);
	font-family: var(--bj-font-family);
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.fb-print-main-hero *,
.fb-print-main-section *,
.fb-print-main-heading * {
	box-sizing: border-box;
	color: inherit;
}
.fb-print-main-hero[hidden],
.fb-print-main-section[hidden],
.fb-print-main-heading[hidden] { display: none !important; }
.fb-print-main-hero figure,
.fb-print-main-section figure { margin: 0; }
.fb-print-main-hero img,
.fb-print-main-section img { display: block; max-width: 100%; }

/* ── 공통 머리: 머리말 · 구역 제목 · 안내 한 줄 ── */
.fb-print-main-heading {
	display: grid;
	row-gap: var(--bj-space-2);
	align-content: start;
}
.fb-print-main-heading > * { margin: 0; }
/* 정본 머리말(.bj-page-kicker)은 3차 색이지만, 정본 첫 화면처럼 글자에는 muted 로 둔다(3차 색은 비텍스트 전용). */
.fb-print-main-kicker.bj-page-kicker { color: var(--bj-muted); }
.fb-print-main-title {
	margin: 0;
	color: var(--bj-ink);
	font-size: var(--bj-type-section);
	font-weight: var(--bj-type-section-weight);
	line-height: var(--bj-type-section-line);
	letter-spacing: var(--bj-type-page-tracking);
}
.fb-print-main-lead {
	max-width: 38em;
	margin: 0;
	color: var(--bj-muted);
	font-size: var(--bj-type-body);
	font-weight: var(--bj-type-body-weight);
	line-height: var(--bj-type-body-line);
	letter-spacing: var(--bj-type-body-tracking);
}

/* ── 띠: 1000px 틀 안에서 화면 폭까지 색을 칠한다(가로 스크롤 없음). 에디토리얼 구간 = --bj-stone ── */
.fb-print-main-band {
	background: var(--bj-stone);
	box-shadow: 0 0 0 100vmax var(--bj-stone);
	clip-path: inset(0 -100vmax);
}

/* ── 구역: 위아래 64(폰 48), 머리와 내용 사이 32(폰 24) ── */
.fb-print-main-section {
	display: grid;
	row-gap: var(--bj-space-3);
	margin: 0;
	padding: var(--bj-space-4) 0;
}

/* 사진 무대: 모서리 8 · 상품 무대 면 */
.fb-print-main-media {
	display: block;
	overflow: hidden;
	border-radius: var(--bj-catalog-media-radius);
	background: var(--bj-product-stage);
}
.fb-print-main-media img { width: 100%; height: 100%; object-fit: cover; }
/* 검수한 잘라 보기 창(실물·후가공) — 상세(namecard-story.css)와 같은 변수 · 같은 창(bojagi_factoryb_namecard_story_frame_style).
   창 값이 원본에 대한 비율(%)이라 줄인 판(-960)에도 그대로 맞다. 창이 없는 그림은 4:3 가운데 */
.fb-print-main-frame { position: relative; aspect-ratio: var(--photo-ratio, 4 / 3); }
.fb-print-main-frame img {
	position: absolute;
	left: var(--photo-left, 0%);
	top: var(--photo-top, 0%);
	width: var(--photo-width, 100%);
	max-width: none;
	height: var(--photo-height, 100%);
	object-position: var(--photo-position, 50% 50%);
}

/* ── 1. 소개(정본 COMP.HERO: 머리말 · 제목 · 안내 · 사진 · 주 행동 하나 · 폰은 글 다음 사진) ── */
.fb-print-main-hero {
	display: grid;
	row-gap: var(--bj-space-3);
	margin: 0;
	padding: var(--bj-space-4) 0;
}
.fb-print-main-hero__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: var(--bj-space-3);
	align-items: center;
}
.fb-print-main-hero__copy {
	display: grid;
	grid-column: 1 / 6;
	row-gap: var(--bj-space-2);
}
.fb-print-main-hero__copy > * { margin: 0; }
.fb-print-main-hero__title.bj-page-title { color: var(--bj-ink); }
.fb-print-main-hero__media {
	grid-column: 7 / 13;
	overflow: hidden;
	border-radius: var(--bj-catalog-media-radius);
	aspect-ratio: 4 / 3;
	background: var(--bj-product-stage);
}
.fb-print-main-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.fb-print-main-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--bj-space-3);
	row-gap: var(--bj-space-2);
	padding-top: var(--bj-space-2);
}
.fb-print-main-primary.bj-primary-action { gap: var(--bj-space-1); color: var(--bj-paper) !important; }
.fb-print-main-primary.bj-primary-action * { color: inherit; }
/* 사이트 공통 `span { font-size: 12px }` 가 단추·링크 속 화살표를 줄이지 않게 */
.fb-print-main-primary span,
.fb-print-main-textlink span { font-size: inherit; font-weight: inherit; line-height: inherit; }
.fb-print-main-textlink,
.fb-print-main-textlink:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--bj-space-1);
	min-height: 48px;
	color: var(--bj-ink);
	font-size: var(--bj-type-body);
	font-weight: var(--bj-type-subsection-weight);
	line-height: var(--bj-type-body-line);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.fb-print-main-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fb-print-main-facts li {
	display: grid;
	row-gap: var(--bj-space-1);
	margin: 0;
	padding-top: var(--bj-space-2);
	border-top: 1px solid var(--bj-line);
}
.fb-print-main-facts strong,
.fb-print-main-facts span {
	font-size: var(--bj-type-body);
	line-height: var(--bj-type-body-line);
}
.fb-print-main-facts strong { color: var(--bj-ink); font-weight: var(--bj-type-subsection-weight); }
.fb-print-main-facts span { color: var(--bj-muted); font-weight: var(--bj-type-body-weight); }

/* ── 2. 무엇을 만들까요 — 머리 + 상품군(list.js renderShowcase). 카드는 목록과 같은 격자·같은 크기 ── */
.fb-print-main-make-heading { padding: var(--bj-space-4) 0 var(--bj-space-3); }
.fb-list-page.is-showcase .fb-showcase { padding: 0 0 var(--bj-space-4); }
.fb-print-family.fb-showcase-section {
	margin: 0;
	padding: var(--bj-space-3) 0;
	border-top: 1px solid var(--bj-line);
}
.fb-print-family__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bj-space-3);
}
.fb-print-family__intro {
	display: grid;
	row-gap: var(--bj-space-1);
	min-width: 0;
}
.fb-print-family__intro > * { margin: 0; }
.fb-print-family .fb-showcase-heading {
	color: var(--bj-ink);
	font-size: var(--bj-type-subsection);
	font-weight: var(--bj-type-subsection-weight);
	line-height: var(--bj-type-subsection-line);
	letter-spacing: -0.02em;
}
.fb-print-family .fb-showcase-count {
	color: var(--bj-muted);
	font-size: var(--bj-type-caption);
	font-weight: var(--bj-type-caption-weight);
	letter-spacing: 0;
}
.fb-print-family__lead {
	max-width: 38em;
	color: var(--bj-muted);
	font-size: var(--bj-type-body);
	line-height: var(--bj-type-body-line);
}
.fb-print-family__same {
	color: var(--bj-muted);
	font-size: var(--bj-type-caption);
	line-height: var(--bj-type-caption-line);
}
.fb-print-family .fb-showcase-more {
	flex: 0 0 auto;
	min-height: 44px;
	color: var(--bj-ink);
	font-size: var(--bj-type-body);
	font-weight: var(--bj-type-subsection-weight);
}
.fb-print-family .fb-showcase-error { margin-top: var(--bj-space-2); }

/* The overall page is a product discovery surface. Keep the media and the
   product's three reading steps together without the mobile card's empty
   two-line method slot. Category result pages retain their own layout. */
.fb-list-page.is-showcase .fb-print-family .fb-card-info {
	padding-top: var(--bj-space-2);
}
.fb-list-page.is-showcase .fb-print-family .fb-card-name,
.fb-list-page.is-showcase .fb-print-family .fb-card-name__main {
	font-size: var(--bj-type-body);
	font-weight: var(--bj-type-subsection-weight);
	line-height: var(--bj-type-body-line);
}
.fb-list-page.is-showcase .fb-print-family .fb-card-method {
	min-height: 0;
	margin-top: var(--bj-space-1) !important;
	color: var(--bj-muted);
	font-size: var(--bj-type-caption);
	line-height: var(--bj-type-caption-line);
}
.fb-list-page.is-showcase .fb-print-family .fb-card-commerce {
	margin-top: var(--bj-space-1);
}
.fb-list-page.is-showcase .fb-print-family .fb-card-basis {
	font-size: var(--bj-type-caption);
}
.fb-list-page.is-showcase .fb-print-family .fb-card-price {
	font-size: var(--bj-type-control);
	font-weight: var(--bj-type-subsection-weight);
}

/* ── 3. 실물 품질: 머리(4열) | 사진 둘(8열, 같은 크기) ── */
.fb-print-main-proof {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 20px;
	align-items: start;
}
.fb-print-main-proof > .fb-print-main-heading { grid-column: 1 / 5; }
/* 두 사진의 검수 창 비율이 다르다(전체 3:2 · 작은 글씨 5:4) — 칸 너비를 창 비율만큼 나눠 높이·설명 줄을 맞춘다 */
.fb-print-main-proof__grid {
	display: flex;
	grid-column: 5 / 13;
	gap: 20px;
	align-items: flex-start;
}
.fb-print-main-proof__item { display: grid; flex: calc(var(--photo-ratio, 4 / 3)) 1 0%; min-width: 0; row-gap: var(--bj-space-2); }
.fb-print-main-proof__item figcaption {
	display: grid;
	row-gap: var(--bj-space-1);
	padding-top: var(--bj-space-2);
	border-top: 1px solid var(--bj-line);
}
.fb-print-main-proof__item strong { color: var(--bj-ink); font-size: var(--bj-type-body); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-body-line); }
.fb-print-main-proof__item span { color: var(--bj-muted); font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); }

/* ── 4. 후가공: 탭(조작, 44 이상) · 사진 7열 | 설명 5열(사진 높이로 늘이지 않음) ── */
.fb-print-main-finish__body { display: grid; row-gap: var(--bj-space-2); }
.fb-print-main-finish__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--bj-space-1);
}
.fb-print-main-finish__tabs [role="tab"] {
	display: grid;
	row-gap: 2px;
	align-content: center;
	min-height: 64px;
	margin: 0;
	padding: var(--bj-space-1) var(--bj-space-2);
	border: 1px solid var(--bj-line-strong);
	border-radius: var(--bj-control-radius);
	background: var(--bj-clean);
	color: var(--bj-ink);
	font-family: var(--bj-font-family);
	text-align: center;
	cursor: pointer;
}
.fb-print-main-finish__tabs [role="tab"] strong { font-size: var(--bj-type-control); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-control-line); white-space: nowrap; }
.fb-print-main-finish__tabs [role="tab"] small { color: var(--bj-muted); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); white-space: nowrap; }
.fb-print-main-finish__tabs [role="tab"][aria-selected="true"] { border-color: var(--bj-charcoal); background: var(--bj-charcoal); color: var(--bj-paper); }
.fb-print-main-finish__tabs [role="tab"][aria-selected="true"] small { color: var(--bj-paper); }
.fb-print-main-finish__panel {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: var(--bj-space-2);
	align-items: start;
}
.fb-print-main-finish__panel[hidden] { display: none; }
.fb-print-main-finish__photo { grid-column: 1 / 8; }
.fb-print-main-finish__copy {
	display: grid;
	grid-column: 8 / 13;
	row-gap: var(--bj-space-2);
	padding: var(--bj-space-3);
	border-radius: var(--bj-control-radius);
}
.fb-print-main-finish__copy > * { margin: 0; }
.fb-print-main-finish__label { color: var(--bj-muted); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); }
.fb-print-main-finish__copy h3 { color: var(--bj-ink); font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); }
.fb-print-main-finish__copy p { color: var(--bj-muted); font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); }
.fb-print-main-finish__copy .fb-print-main-finish__use {
	display: grid;
	row-gap: 2px;
	padding-top: var(--bj-space-2);
	border-top: 1px solid var(--bj-line);
}
.fb-print-main-finish__use span { color: var(--bj-muted); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); }
.fb-print-main-finish__use strong { color: var(--bj-ink); font-size: var(--bj-type-body); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-body-line); }

/* ── 2-1. 상품군 제목 줄: 제목(이름만) · 가짓수 ── */
.fb-print-family__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--bj-space-1);
}
.fb-print-family__title > * { margin: 0; }

/* ── 5. 제작 흐름: 번호 · 글자 없는 사진 · 제목 · 설명(본문 16). PC 두 줄 세 칸, 폰 한 줄씩 ── */
.fb-print-main-flow__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bj-space-2) 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fb-print-main-flow__steps li {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	column-gap: var(--bj-space-2);
	align-items: start;
	margin: 0;
	padding: var(--bj-space-2);
	border-radius: var(--bj-control-radius);
	background: var(--bj-clean);
}
.fb-print-main-flow__photo { aspect-ratio: 4 / 3; }
.fb-print-main-flow__copy { display: grid; row-gap: var(--bj-space-1); align-content: start; }
.fb-print-main-flow__no { color: var(--bj-muted); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); font-variant-numeric: tabular-nums; }
.fb-print-main-flow__copy strong { color: var(--bj-ink); font-size: var(--bj-type-body); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-body-line); }
.fb-print-main-flow__copy span:last-child { color: var(--bj-muted); font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); }

/* ── 6. 도움말: 머리(4열) | 질문(8열, 정본 disclosure 높이 68) · 상담(안내 면) ── */
.fb-print-main-help__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: var(--bj-space-3);
	align-items: start;
}
.fb-print-main-help__grid > .fb-print-main-heading { grid-column: 1 / 5; }
.fb-print-main-faq { grid-column: 5 / 13; border-top: 1px solid var(--bj-ink); }
.fb-print-main-faq details { border-bottom: 1px solid var(--bj-line); }
.fb-print-main-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bj-space-2);
	min-height: 68px;
	padding: var(--bj-space-2) 0;
	color: var(--bj-ink);
	font-size: var(--bj-type-body);
	font-weight: var(--bj-type-subsection-weight);
	line-height: var(--bj-type-body-line);
	cursor: pointer;
	list-style: none;
}
.fb-print-main-faq summary span { font-size: inherit; font-weight: inherit; line-height: inherit; }
.fb-print-main-faq summary::-webkit-details-marker { display: none; }
.fb-print-main-faq summary i {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.fb-print-main-faq details[open] summary i { transform: rotate(225deg); }
.fb-print-main-faq details p { margin: 0; padding: 0 0 var(--bj-space-2); color: var(--bj-muted); font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); }
.fb-print-main-support {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bj-space-3);
	padding: var(--bj-space-3);
	border-radius: var(--bj-control-radius);
}
.fb-print-main-support__copy { display: grid; row-gap: var(--bj-space-1); }
.fb-print-main-support__copy > * { margin: 0; }
.fb-print-main-support__copy > span { color: var(--bj-muted); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); }
.fb-print-main-support__copy h3 { color: var(--bj-ink); font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); }
.fb-print-main-support__copy p { color: var(--bj-muted); font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); }
.fb-print-main-support__actions { display: flex; flex: 0 0 auto; gap: var(--bj-space-1); }
.fb-print-main-support__actions a,
.fb-print-main-support__actions a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	min-height: 48px;
	padding: 0 var(--bj-space-2);
	border: 1px solid var(--bj-line-strong);
	border-radius: var(--bj-control-radius);
	background: var(--bj-clean);
	color: var(--bj-ink);
	font-size: var(--bj-type-action);
	font-weight: var(--bj-type-subsection-weight);
	line-height: var(--bj-type-action-line);
	text-decoration: none;
}

/* 초점 */
.fb-print-main-textlink:focus-visible,
.fb-print-main-support__actions a:focus-visible,
.fb-print-main-finish__tabs [role="tab"]:focus-visible,
.fb-print-main-faq summary:focus-visible,
.fb-print-family .fb-showcase-more:focus-visible {
	outline: 2px solid var(--bj-charcoal);
	outline-offset: 2px;
}

/* ── 태블릿(768~1023): 12열을 지키되 글 칸을 넓힌다 ── */
@media (max-width: 1023px) {
	.fb-print-main-hero__copy { grid-column: 1 / 7; }
	.fb-print-main-hero__media { grid-column: 7 / 13; }
	.fb-print-main-flow__steps { grid-template-columns: 1fr; }
}
/* 태블릿은 목록 격자가 세 칸이라 상품군의 카드 넷이 3+1 로 하나만 남았다 — 첫 화면 상품군 칸만 네 칸(카드 폭 170~235px, 폰 두 칸과 같은 선) */
@media (min-width: 768px) and (max-width: 1023px) {
	.fb-print-family .fb-showcase-grid.fb-product-grid { --catalog-shell-grid-columns: 4; }
}

/* ── 폰(767 이하 — 정본 재배치 시작점): 한 줄로 쌓고 글 다음 사진, 간격 토큰이 스스로 24·48 로 준다 ── */
@media (max-width: 767px) {
	.fb-print-main-hero { margin-top: 0; }
	.fb-print-main-hero__grid,
	.fb-print-main-proof,
	.fb-print-main-finish__panel,
	.fb-print-main-help__grid { grid-template-columns: minmax(0, 1fr); }
	.fb-print-main-hero__copy,
	.fb-print-main-hero__media,
	.fb-print-main-proof > .fb-print-main-heading,
	.fb-print-main-proof__grid,
	.fb-print-main-finish__photo,
	.fb-print-main-finish__copy,
	.fb-print-main-help__grid > .fb-print-main-heading,
	.fb-print-main-faq { grid-column: 1 / -1; }
	.fb-print-main-facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--bj-space-2); }
	.fb-print-main-proof__grid { flex-direction: column; align-items: stretch; }
	.fb-print-main-proof__item { flex: 0 0 auto; }
	.fb-print-main-frame { aspect-ratio: var(--photo-mobile-ratio, var(--photo-ratio, 4 / 3)); }
	.fb-print-main-frame img {
		left: var(--photo-mobile-left, var(--photo-left, 0%));
		top: var(--photo-mobile-top, var(--photo-top, 0%));
		width: var(--photo-mobile-width, var(--photo-width, 100%));
		height: var(--photo-mobile-height, var(--photo-height, 100%));
		object-position: var(--photo-mobile-position, var(--photo-position, 50% 50%));
	}
	.fb-print-family__head { flex-direction: column; align-items: flex-start; gap: var(--bj-space-1); }
	.fb-print-main-finish__tabs {
		grid-auto-columns: max-content;
		overflow-x: auto;
		margin: 0 -14px;
		padding: 0 14px;
		scrollbar-width: none;
	}
	.fb-print-main-finish__tabs::-webkit-scrollbar { display: none; }
	.fb-print-main-finish__copy { padding: var(--bj-space-3) var(--bj-space-2); }
	.fb-print-main-flow__steps li { grid-template-columns: 112px minmax(0, 1fr); padding: var(--bj-space-2); }
	.fb-print-main-flow__photo { aspect-ratio: 1 / 1; }
	.fb-print-main-support { flex-direction: column; align-items: stretch; padding: var(--bj-space-3) var(--bj-space-2); }
	.fb-print-main-support__actions { flex-direction: column; }
	.fb-print-main-support__actions a { min-width: 0; }
}
@media (max-width: 359px) {
	.fb-print-main-flow__steps li { grid-template-columns: 96px minmax(0, 1fr); }
}