/* ══════════════════════════════════════════════════════════
 * Factory B 리스트 페이지 전용 스타일
 * - 네임스페이스: .fb-list-page / .fb-* (보자기카드 기존 CSS와 격리)
 * ══════════════════════════════════════════════════════════ */

.fb-list-page {
	--catalog-shell-width: 1000px;
	--catalog-shell-max-width: 100%;
	--catalog-shell-margin: 0 auto;
	--catalog-shell-padding: 48px 0 0;
	--catalog-shell-grid-gap: 42px 20px;
	--catalog-shell-focus: #1b2631;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--fb-color_text_primary);
}

/* The footer is a direct body child on this catalog. Using 100vw includes the
   vertical scrollbar and creates an 8px horizontal page drift. */
html body #tail_area {
	width: 100%;
	left: 0;
	right: auto;
	transform: none;
}

/* bojagi 공통 CSS `div { margin: 0 auto }` 전역 규칙 차단.
   auto 마진 때문에 flex 자식이 중앙 정렬되거나 블록 div 가 의도치 않게 가운데로 밀리는 문제를 방지. */
.fb-list-page div { margin: 0; }

.fb-template-choice {
	box-sizing: border-box;
	width: min(480px, calc(100% - 32px));
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 24px;
	border: 1px solid var(--bj-line, #ddd9d3);
	border-radius: var(--bj-radius, 8px);
	background: var(--bj-paper, #fff);
	color: var(--bj-ink, #181817);
	font-family: inherit;
	overflow: auto;
}
.fb-template-choice::backdrop { background: rgb(0 0 0 / 40%); }
.fb-template-choice h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.fb-template-choice p { margin: 12px 0; font-size: 14px; line-height: 1.6; }
.fb-template-choice img { display: block; width: 100%; height: 180px; object-fit: contain; margin: 16px 0; }
.fb-template-choice label { display: block; margin: 16px 0 8px; }
.fb-template-choice select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px; font: inherit; }
.fb-template-choice > div { display: flex; gap: 8px; margin-top: 20px; }
.fb-template-choice button { flex: 1; min-height: 44px; padding: 10px; border: 1px solid var(--bj-line, #ddd9d3); background: var(--bj-paper, #fff); color: var(--bj-ink, #181817); font: inherit; cursor: pointer; }
.fb-template-choice button.fb-template-choice__start { flex: 2; color: #fff; background: var(--bj-ink, #181817); }
.fb-template-choice button:disabled { opacity: .45; cursor: default; }

/* ── 페이지 identity ───────────────────────────── */
.fb-page-header {
	padding: 0;
	background: var(--fb-color_bg_white);
	position: relative;
}
.fb-brand-trail {
	margin: 0 0 6px;
	color: var(--bj-muted, #66635e);
	font-size: var(--bj-type-caption, 14px);
	font-weight: var(--bj-type-caption-weight, 400);
	line-height: 1.5;
}
/* 전역 a·span 글자 크기(12px) 규칙이 경로 줄 안에서 섞이지 않게 문단 크기를 따른다. */
.fb-brand-trail a,
.fb-brand-trail span {
	font-size: inherit;
	line-height: inherit;
}
.fb-brand-trail a {
	color: inherit;
	text-decoration: none;
}
.fb-brand-trail a:hover,
.fb-brand-trail a:focus-visible {
	color: var(--bj-ink, #181817);
	text-decoration: underline;
}
/* 인쇄 제작 목록 제목은 다른 상품 목록과 같은 굵은 제목(페이지 제목 굵기) */
.fb-brand-title {
	font-size: var(--bj-type-page, 28px);
	font-weight: var(--bj-type-page-weight, 700);
	color: var(--bj-ink, #181817);
	line-height: var(--bj-type-page-line, 1.35);
	letter-spacing: -.025em;
	margin: 0;
}
.fb-brand-title-en {
	display: inline-block;
	margin-left: 10px;
	color: var(--bj-ink, #181817);
	font-size: 1em;
	font-weight: 700;
	letter-spacing: -0.025em;
	vertical-align: baseline;
}
.fb-brand-description {
	margin: 8px 0 0;
	color: var(--bj-muted, #66635e);
	font-size: var(--bj-type-body, 14px);
	font-weight: var(--bj-type-body-weight, 400);
	line-height: var(--bj-type-body-line, 1.6);
	letter-spacing: -.01em;
}

/* ── 카테고리 탐색: sticky 위치는 shell 하나만 소유 ─────────── */
.fb-category-primary { display: flex; align-items: center; gap: 16px; }
.fb-category-primary .fb-cat-lv1 { flex: 1; min-width: 0; }
.fb-preview-switch {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
	min-height: 44px; padding: 0 8px; border: 0; background: transparent;
	font: inherit; font-size: var(--bj-type-caption, 14px); color: var(--bj-muted, #66635e); cursor: pointer;
}
.fb-preview-switch__track { width: 32px; height: 20px; border-radius: 10px; background: var(--bj-line, #ddd9d2); padding: 2px; }
.fb-preview-switch__track::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.fb-preview-switch[aria-checked="true"] .fb-preview-switch__track { background: var(--bj-ink, #181817); }
.fb-preview-switch[aria-checked="true"] .fb-preview-switch__track::after { transform: translateX(12px); }
.fb-preview-switch:focus-visible { outline: 2px solid var(--bj-ink, #181817); outline-offset: 2px; }
@media (min-width: 768px) {
	.catalogShell--factory > .fb-category-shell { position: relative; top: auto; z-index: 120; }
	.fb-category-shell.is-stuck { height: var(--catalog-category-natural-height); }
	.fb-category-shell.is-stuck .fb-category-content {
		position: fixed; top: var(--catalog-shell-sticky-offset, 0px); left: 0; right: 0;
		background: #fff; box-shadow: 0 5px 16px rgba(23,35,43,.07);
	}
	.fb-category-shell.is-stuck .fb-category-primary { width: min(1000px, 100%); margin: 0 auto; min-height: 72px; }
	.fb-category-shell.is-stuck .fb-cat-lv1 { padding: 6px 0; }
	.fb-category-shell.is-stuck .cat-lv1-item { height: 60px; gap: 4px; }
	.fb-category-shell.is-stuck .cat-lv1-item.is-active::after { bottom: -6px; }
	.fb-category-shell.is-stuck .fb-cat-lv2 { max-width: 1000px; margin: 0 auto; }
}
@media (max-width: 767px) {
	.fb-category-primary { gap: 0; }
}
.fb-category-shell {
	background: var(--fb-color_bg_white);
	border-bottom: 1px solid var(--bj-line, #ddd9d2);
}
.fb-category-shell.is-stuck {
	box-shadow: 0 5px 12px -10px rgba(18, 15, 13, 0.42);
}
.fb-cat-lv1 {
	display: grid;
	grid-template-columns: repeat(var(--fb-category-count, 8), minmax(82px, 1fr));
	align-items: center;
	gap: 0;
	padding: 28px 0 6px;
	background: var(--fb-color_bg_white);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.fb-cat-lv1::-webkit-scrollbar {
	display: none;
}
.cat-lv1-item {
	position: relative;
	background: none;
	border: 0;
	margin: 0;
	padding: 0 4px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	height: calc(var(--bj-catalog-category-tile, 36px) + 32px);
	min-width: 82px;
	font-family: inherit;
	color: var(--fb-color_text_primary);
	text-decoration: none;
	transition: opacity 0.2s, color 0.2s;
}
.cat-lv1-item .lv1-icon {
	width: var(--bj-catalog-category-tile, 36px);
	height: var(--bj-catalog-category-tile, 36px);
	border: 1px solid transparent;
	border-radius: var(--bj-catalog-category-radius, 8px);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.16s ease;
	overflow: hidden;
}
.cat-lv1-item .lv1-icon-img {
	width: var(--bj-catalog-category-icon, 24px);
	height: var(--bj-catalog-category-icon, 24px);
	object-fit: contain;
	opacity: 1;
}
.cat-lv1-item.is-active {
	color: #132b34;
}
.cat-lv1-item.is-active::after {
	position: absolute;
	bottom: -7px;
	left: 50%;
	width: 32px;
	height: 2px;
	transform: translateX(-50%);
	background: currentColor;
	content: "";
}
@media (hover: hover) {
	.cat-lv1-item:hover:not(.is-disabled) .lv1-icon {
		background: #f5f6f6;
	}
}
.cat-lv1-item .lv1-label {
	font-size: var(--bj-catalog-category-label-pc, 15px);
	font-weight: 500;
	line-height: 22px;
	white-space: nowrap;
}
.cat-lv1-item.is-active .lv1-label {
	font-weight: 600;
}
.cat-lv1-item.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.cat-lv1-item.is-disabled:hover {
	opacity: 0.5;
}

/* ── 2차 카테고리 (pill 탭) ─────────── */
.fb-cat-lv2 {
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	padding: 10px 0 12px;
	border-top: 1px solid #efedeb;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	background: var(--fb-color_bg_white);
}
.fb-cat-lv2::-webkit-scrollbar { display: none; }
.fb-cat-lv2.is-empty {
	padding: 0;
	border: 0;
	min-height: 0;
}
.cat-lv2-item {
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 100px;
	padding: 5px 16px;
	height: 32px;
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s;
	white-space: nowrap;             /* 텍스트 줄바꿈 차단 */
	flex-shrink: 0;                  /* flex 축소 방지 */
	text-decoration: none;
}
.cat-lv2-item:hover {
	border-color: var(--fb-color_text_muted);
}
.cat-lv2-item.is-active {
	border-color: #1b2631;
	font-weight: 700;
	background: #1b2631;
	color: #fff;
}

/* ── 필터 바 (Figma node 1:162 / Frame 481) ─────────── */
.fb-filter-bar {
	display: block;
	padding: 0;
	background: var(--fb-color_bg_white);
}
.fb-filter-bar > .catalogControls { width: 100%; }
.fb-catalog-guide-text {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-left: 6px;
	color: var(--fb-text-secondary, #62696f);
	font-size: 13px;
	line-height: 1.5;
}
.fb-list-page.is-showcase .fb-filter-bar {
	display: none;
}
.fb-list-page.is-showcase .fb-card-zzim {
	display: none;
}
/* Figma: 총/전체 chips are adjacent (gap 0).
   Override bojagi 공통 CSS `div { margin: 0 auto }` that was centering these. */
.fb-filter-left { display: flex; gap: 8px; align-items: center; margin: 0; }
.fb-cat-breadcrumb {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
	white-space: nowrap;
}
.fb-cat-breadcrumb[hidden] { display: none; }
.fb-cat-breadcrumb .sep { color: var(--fb-color_text_disabled); margin: 0 4px; font-weight: 400; }
.fb-filter-right { display: flex; gap: 5px; align-items: center; margin: 0; }
/* 총 N개 — 박스 없이 깔끔한 텍스트만 */
.fb-total-chip, .fb-current-chip {
	background: none;
	padding: 0;
	font-size: 13px;
	font-weight: 400;
	color: #444;
	line-height: 1.4;
	white-space: nowrap;
}
.fb-total-chip b { font-weight: 700; color: #1a1a1a; }

/* view toggle — 박스 제거, 시원한 ghost 아이콘 */
.fb-view-toggle {
	background: none;
	border: 0;
	padding: 2px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fb-color_text_muted);
	font-family: inherit;
	cursor: pointer;
	transition: color 0.15s;
}
.fb-view-toggle:hover { color: #1b2631; }
.fb-view-toggle .view-icon { display: inline-flex; color: inherit; }
.fb-view-toggle .view-icon[hidden] { display: none; }
/* 모바일 사이트 전역 `* { color }` 가 currentColor 를 덮어쓰는 문제 우회 */
.fb-view-toggle svg { stroke: var(--fb-color_text_muted) !important; color: var(--fb-color_text_muted) !important; }
.fb-view-toggle:hover svg { stroke: #1b2631 !important; color: #1b2631 !important; }
.fb-zzim-filter-btn .heart-icon { display: inline-flex; }
.fb-zzim-filter-btn[aria-pressed="true"] {
	border-color: #e74c3c;
	color: #e74c3c;
}
.fb-zzim-filter-btn[aria-pressed="true"] .heart-icon svg { fill: #e74c3c; }
.fb-zzim-count {
	font-weight: 700;
	min-width: 14px;
	text-align: center;
}

/* ── 전체 쇼케이스 / 제품 그리드 ─────────── */
.fb-showcase[hidden],
.fb-product-grid[hidden],
.fb-loading-indicator[hidden],
.fb-infinite-sentinel[hidden],
.fb-end-message[hidden] {
	display: none !important;
}
.fb-showcase {
	padding: 34px 0 20px;
}
.fb-list-page.is-loading-results .fb-brand-intro {
	visibility: hidden;
}
.fb-showcase-skeleton__head {
	width: min(220px, 46%);
	height: 28px;
	margin-bottom: 28px;
	border-radius: 5px;
	background: #f0eeeb;
}
.fb-showcase-skeleton__grid {
	--catalog-shell-grid-gap: 42px 20px;
}
.fb-showcase-skeleton__card {
	display: flex;
	min-width: 0;
	flex-direction: column;
}
.fb-showcase-skeleton__media,
.fb-showcase-skeleton__line {
	display: block;
	background: #f3f1ee;
	animation: fb-skeleton-pulse 1.15s ease-in-out infinite alternate;
}
.fb-showcase-skeleton__media {
	width: 100%;
	aspect-ratio: 247 / 275;
	border-radius: 8px;
}
.fb-showcase-skeleton__line {
	height: 14px;
	margin-top: 12px;
	border-radius: 4px;
}
.fb-showcase-skeleton__line--title { width: 78%; }
.fb-showcase-skeleton__line--meta {
	width: 56%;
	margin-top: 8px;
}
@keyframes fb-skeleton-pulse {
	from { opacity: .56; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.fb-showcase-skeleton__media,
	.fb-showcase-skeleton__line { animation: none; }
}
/* 폰 사이트 스타일(/m/style.css)의 맨 `section { padding: 50px 0 }` 이 이 칸(<section>)에 닿아, 폰에서만
 * 분류 사이가 100px·맨 위가 50px 더 벌어졌다(전체 목록 폰 검수 20260923). 이 칸의 간격은 margin 한 곳이 정한다. */
.fb-showcase-section {
	margin: 0 0 58px;
	padding: 0;
}
.fb-showcase-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e7e3df;
}
.fb-showcase-heading {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #1d1b19;
}
.fb-showcase-count {
	margin-left: 7px;
	color: #968e87;
	font-size: 12px;
	font-weight: 400;
}
.fb-showcase-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4f4944;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.fb-showcase-more::after {
	content: "→";
	font-size: 14px;
}
.fb-showcase-more:hover {
	color: #111;
}
.fb-showcase-error {
	margin: 0;
	padding: 34px 20px;
	border-radius: 8px;
	background: #f8f6f4;
	color: #736c65;
	font-size: 13px;
	text-align: center;
}
.fb-showcase-retry,
.fb-error-retry {
	margin-left: 8px;
	padding: 6px 11px;
	border: 1px solid #c8c1bb;
	border-radius: 999px;
	background: #fff;
	color: #3e3935;
	font: inherit;
	cursor: pointer;
}
.fb-list-page .fb-product-grid {
	--catalog-shell-grid-gap: 44px 20px;
	margin-top: 20px;
	padding-bottom: 54px;
}
.fb-product-grid.view-large { grid-template-columns: repeat(3, 1fr); }
.fb-showcase-grid.fb-product-grid {
	padding-bottom: 0;
}

.fb-product-card {
	display: flex;
	width: 100%;
	height: 100%;
	min-width: 0;
	margin: 0 !important;
	flex-direction: column;
}
.fb-product-card__link,
.fb-product-card__bodyLink {
	width: 100%;
	margin: 0 !important;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}
.fb-product-card__link {
	display: block;
	height: 100%;
}
.fb-product-card__bodyLink {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}
/* Block surface focus: the image link and the text link underline the product name; no box. */
.fb-product-card__link:focus-visible,
.fb-product-card__bodyLink:focus-visible {
	outline: none;
}
.fb-product-card:has(.fb-product-card__link:focus-visible) .fb-card-name,
.fb-product-card__bodyLink:focus-visible .fb-card-name {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.fb-card-img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 247 / 275;
	margin: 0 !important;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f1ee;
	box-shadow: inset 0 0 0 1px rgba(33, 29, 25, 0.025);
}
.fb-product-grid.view-large .fb-card-img-wrap {
	aspect-ratio: 247 / 275;
}
.fb-card-thumb, .fb-card-thumb-hover {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 44px);
	height: calc(100% - 44px);
	object-fit: contain;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 10px 13px rgba(32, 27, 23, 0.18)) drop-shadow(0 1px 1px rgba(32, 27, 23, 0.12));
	transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}
.fb-product-card:is([data-category="card"], [data-category="envelope"]) .fb-card-thumb[data-image-variant="artwork"],
.fb-product-card:is([data-category="card"], [data-category="envelope"]) .fb-card-thumb-hover[data-image-variant="artwork"] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}
.fb-product-card[data-catalog-media-variant="production-photo"] .fb-card-thumb[data-image-variant="production-photo"],
.fb-product-card[data-catalog-media-variant="production-photo"] .fb-card-thumb-hover[data-image-variant="production-photo"] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}
.fb-product-card:is([data-catalog-media-variant="mockup"], [data-catalog-media-variant="mockup-plain"]) .fb-card-thumb,
.fb-product-card:is([data-catalog-media-variant="mockup"], [data-catalog-media-variant="mockup-plain"]) .fb-card-thumb-hover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}
.fb-product-card[data-catalog-media-variant="mockup"] .fb-card-img-wrap::after {
	content: "연출 이미지";
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 6px;
	border-radius: var(--bj-control-radius);
	background: var(--bj-clean);
	color: var(--bj-muted);
	font-size: 11px;
	line-height: 1.2;
	pointer-events: none;
}
.fb-product-card[data-catalog-visual-variant="rounded"] .fb-card-thumb[data-image-variant="artwork"] {
	width: calc(100% - 44px);
	height: auto;
	aspect-ratio: 90 / 50;
	object-fit: cover;
	border-radius: 12px;
}
.fb-card-thumb-hover { opacity: 0; }
/* (2026-09-26 사장님 「명함 리스트도 청첩장처럼 모바일은 스와이프로 해야함. 지금은 2번 클릭해야 상세페이지로 진입」)
   둘째 사진이 떠오르는 올림(:hover)은 «마우스가 있는 기기»에서만 — 아이폰 사파리는 누를 때 내용이 바뀌는 올림이 있으면
   첫 누름을 올림으로만 쓰고 링크로 가지 않는다(둘째 사진 opacity 0→1 전환). 터치 기기는 아래 갤러리로 넘긴다(list.js). */
@media (hover: hover) {
	.fb-product-card:hover .fb-card-thumb-hover[src]:not([src=""]) { opacity: 1; }
	.fb-product-card:hover .fb-card-thumb,
	.fb-product-card:hover .fb-card-thumb-hover[src]:not([src=""]) {
		transform: translate(-50%, -50%) scale(1.012);
		filter: drop-shadow(0 12px 16px rgba(32, 27, 23, 0.2)) drop-shadow(0 1px 1px rgba(32, 27, 23, 0.12));
	}

	/* Studio photos already contain their real shadow. Keep the sampled pixel
	   grid stable when swapping photos; fractional hover scaling blurs fine type. */
	.fb-product-card:is([data-catalog-media-variant="production-photo"], [data-catalog-media-variant="mockup"], [data-catalog-media-variant="mockup-plain"]):hover .fb-card-thumb,
	.fb-product-card:is([data-catalog-media-variant="production-photo"], [data-catalog-media-variant="mockup"], [data-catalog-media-variant="mockup-plain"]):hover .fb-card-thumb-hover[src]:not([src=""]) {
		transform: translate(-50%, -50%);
		filter: none;
	}
}

/* 터치 기기의 사진 넘기기 — 청첩장 폰 목록 갤러리와 같은 부품·같은 치수(m/wedding_catalog_modern.css.php 의
   .weddingCatalogThumbnailGallery 규칙: 한 장 단위 스냅 · 18×1px 진행선). 동작 스크립트도 한 벌이다
   (m/wedding_catalog_thumbnail_swipe.js.php). 사진 크기·자리는 이 목록의 규칙(.fb-card-thumb)을 그대로 쓰고,
   각 장이 그 기준 상자가 된다. */
.fb-product-card .weddingCatalogThumbnailGallery__viewport {
	display: block;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	-webkit-tap-highlight-color: transparent;
}
.fb-product-card .weddingCatalogThumbnailGallery__viewport::-webkit-scrollbar { display: none; }
.fb-product-card .weddingCatalogThumbnailGallery__track {
	display: flex;
	width: 100%;
	height: 100%;
}
.fb-product-card .weddingCatalogThumbnailGallery__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.fb-product-card .weddingCatalogThumbnailGallery__slide .fb-card-thumb,
.fb-product-card .weddingCatalogThumbnailGallery__slide .fb-card-thumb-hover {
	opacity: 1;
	user-select: none;
	-webkit-user-drag: none;
}
.fb-product-card .weddingCatalogThumbnailGallery__progress {
	position: absolute;
	left: 8px;
	bottom: 10px;
	z-index: 3;
	display: block;
	width: 18px;
	height: 1px;
	overflow: hidden;
	background: rgba(31, 43, 48, 0.12);
	pointer-events: none;
}
.fb-product-card .weddingCatalogThumbnailGallery__progressValue {
	display: block;
	width: calc(100% / var(--gallery-progress-count, 2));
	height: 100%;
	background: rgba(31, 43, 48, 0.42);
	transform: translateX(calc(var(--gallery-progress-index, 0) * 100%));
	transition: transform 160ms ease-out;
}
/* 둘째 사진을 못 받았으면 한 장으로 접는다 — 빈 장으로 넘기지 않는다. */
.fb-product-card .weddingCatalogThumbnailGallery.is-gallery-single .weddingCatalogThumbnailGallery__viewport { overflow-x: hidden; }
.fb-product-card .weddingCatalogThumbnailGallery.is-gallery-single .weddingCatalogThumbnailGallery__progress { display: none; }

.fb-card-zzim {
	position: absolute;
	top: auto;
	right: 15px;
	bottom: 10px;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent url('/card/img/product_list_heart_off.png') no-repeat center / cover;
	cursor: pointer;
	z-index: 20;
}
.fb-card-zzim.is-active { background-image: url('/card/img/product_list_heart_on.png'); }

.fb-mobile-mode .fb-card-zzim {
	right: 6px;
	bottom: 6px;
	width: 40px;
	height: 40px;
	background-size: 26px auto;
}

.fb-card-info {
	display: flex;
	width: 100%;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0 !important;
	min-width: 0;
}
/* 고객이 읽는 글자의 하한은 13px 이다(상세 화면과 같은 기준 · 전수 조사 20260921).
 * 목록은 상세보다 늦게 쟀다 — 상세를 0 으로 만든 뒤 목록을 재 보니 설명줄·수량·배지가 아래였다. */
.fb-card-method-row {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
}
.fb-card-method {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 19px;
	margin: 5px 0 0 !important;
	overflow: hidden;
	color: #77716b;
	font-size: 13px;
	font-weight: 400;
	line-height: 19px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-commerce {
	display: flex;
	height: 22px;
	min-height: 22px;
	align-items: baseline;
	margin-top: 5px;
	gap: 5px;
	white-space: nowrap;
}
.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-basis,
.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-price {
	width: auto;
	max-width: none;
	height: 22px;
	min-height: 22px;
	line-height: 22px;
}
/* 「100장」은 금액 옆에 «작게» 둔다(사장님 20260920) — 13px 도 옆의 금액(15px·굵게)보다 충분히 작다. */
.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-basis {
	color: #85807a;
	font-size: 13px;
}
.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-basis:not([hidden])::after {
	content: "·";
	margin-left: 5px;
}
.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-price {
	color: #23211f;
	font-size: 14px;
	font-weight: 600;
}
.fb-card-info > * {
	width: 100%;
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-name {
	display: flex;
	min-width: 0;
	flex: 0 1 auto;
	align-items: center;
}
.fb-card-name__main {
	min-width: 0;
}
.fb-list-page [data-template-entry] .fb-card-name {
	white-space: normal;
	text-overflow: clip;
	word-break: keep-all;
}
.fb-card-name__suffix {
	flex: 0 0 auto;
}
.fb-card-badge[hidden] {
	display: none;
}
.fb-card-badge.is-development {
	color: var(--bj-attention);
}
.fb-card-badges[hidden] {
	display: none;
}
.fb-card-basis[hidden] {
	display: none;
}

/* ── 로딩/무한스크롤 ─────────── */
.fb-loading-indicator {
	gap: 10px;
	padding: 30px 0;
	color: var(--fb-color_text_muted);
	font-size: 13px;
}
.fb-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #eee;
	border-top-color: var(--fb-color_brand_accent);
	border-radius: 50%;
	animation: fb-spin 0.8s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }
.fb-infinite-sentinel { height: 1px; }
.fb-end-message {
	text-align: center;
	color: #aaa;
	font-size: 12px;
	padding: 30px 0 60px;
}

.fb-empty-message {
	--catalog-shell-empty-min-height: 200px;
	--catalog-shell-empty-padding: 80px 0;
	color: var(--fb-color_text_muted);
	font-size: 14px;
}

/* ── 토스트 ─────────── */
.fb-toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	padding: 12px 20px;
	background: rgba(51,51,51,0.92);
	color: var(--fb-color_bg_white);
	border-radius: 6px;
	font-size: 13px;
	z-index: 99999;
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
	white-space: nowrap;
	max-width: 90vw;
}
.fb-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.fb-toast-error {
	background: rgba(211,47,47,0.92);
}

/* 과거 범용 홍보 섹션 스타일. 다른 진입 화면의 호환성을 위해 유지한다. */
.fb-brand-intro {
	border-top: 1px solid var(--fb-color_border);
	padding: 56px 0 96px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.fb-brand-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: flex-start;
}
.fb-brand-head-title {
	font-size: 11px;
	font-weight: 600;
	color: #918981;
	margin: 0 0 9px;
	line-height: 1.4;
	letter-spacing: 0.12em;
}
.fb-brand-head-sub {
	font-size: 20px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin: 0;
	line-height: 1.5;
	letter-spacing: -0.025em;
}
.fb-brand-head-right p {
	font-size: 14px;
	font-weight: 400;
	color: #665f59;
	margin: 0;
	line-height: 1.75;
}
.fb-brand-cards {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.fb-brand-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
	min-height: 132px;
	padding: 20px;
	border: 1px solid #e5e0dc;
	border-radius: 8px;
	background: #faf8f6;
}
.fb-brand-card b {
	color: #9b928a;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.fb-brand-card span {
	color: #312d2a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
}

/* ── 반응형 ─────────── */
@media (max-width: 1023px) {
	#content_wrapper,
	#content_wrapper > tbody,
	#content_wrapper > tbody > tr,
	#content_wrapper > tbody > tr > td {
		display: block;
		width: 100% !important;
		min-width: 0 !important;
	}
	#content_wrapper > tbody > tr > td {
		padding-right: 0;
		padding-left: 0;
	}
	.fb-list-page {
		--catalog-shell-width: calc(100vw - 32px);
		--catalog-shell-max-width: 1000px;
		--catalog-shell-margin: 0;
		--catalog-shell-padding: 40px 16px 0;
	}
	.fb-product-grid.view-large { grid-template-columns: repeat(2, 1fr); }
	.fb-cat-lv1 {
		padding-left: 8px;
		padding-right: 8px;
	}
}
@media (max-width: 640px) {
	.fb-list-page [data-catalog-development="1"] .fb-card-title-row {
		height: auto;
		min-height: var(--bj-catalog-title-line, 20px);
		align-items: flex-start;
	}
	.fb-list-page [data-catalog-development="1"] .fb-card-name {
		height: auto;
		min-height: var(--bj-catalog-title-line, 20px);
		overflow: visible;
		white-space: normal;
	}
	.fb-list-page [data-catalog-development="1"] .fb-card-name__main {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		word-break: keep-all;
	}
	.fb-list-page {
		--catalog-shell-width: 100%;
		--catalog-shell-max-width: 100%;
		--catalog-shell-margin: 0 auto;
		--catalog-shell-padding: 0 14px;
	}
	.fb-list-page > .fb-page-header {
		display: none;
	}
	.fb-brand-title {
		font-size: 23px;
		line-height: 1.35;
	}
	.fb-brand-description {
		margin-top: 6px;
		font-size: 13px;
		line-height: 1.55;
		word-break: keep-all;
	}
	.fb-product-grid.view-large { grid-template-columns: repeat(1, 1fr); }
	.fb-list-page .fb-product-grid {
		--catalog-shell-grid-gap: 30px 12px;
		padding-bottom: 40px;
	}
	.fb-category-shell {
		width: calc(100% + 28px) !important;
		max-width: none !important;
		height: 92px;
		min-height: 92px;
		margin-left: -14px !important;
		margin-right: -14px !important;
		padding-top: 16px;
	}
	.fb-cat-lv1 {
		display: flex;
		height: 75px;
		gap: 0;
		padding: 0 8px;
	}
	.cat-lv1-item {
		width: auto;
		height: 69px;
		min-width: 72px;
		flex: 0 0 auto;
		padding: 2px 8px 0;
	}
	/* 폰에서 이 줄(.fb-cat-lv1)은 overflow-y:hidden 이다 — -6px 밑줄은 줄 밖(160~162px)이라 잘려 현재 분류가
	   글자색 차이로만 남았다(검수 20260923). 줄 바닥의 구분선 위에 얹는다(PC 와 같은 자리). */
	.cat-lv1-item.is-active::after {
		bottom: -3px;
	}
	.cat-lv1-item .lv1-label {
		font-size: var(--bj-catalog-category-label-mobile, 16px);
		line-height: 20px;
	}
	body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .fb-category-shell,
	body[data-wedding-catalog-scroll-state="REVEAL_UP"] .fb-category-shell,
	body[data-wedding-catalog-scroll-state="MODAL"] .fb-category-shell {
		height: 52px;
		min-height: 52px;
		padding-top: 0;
	}
	body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .fb-cat-lv1,
	body[data-wedding-catalog-scroll-state="REVEAL_UP"] .fb-cat-lv1,
	body[data-wedding-catalog-scroll-state="MODAL"] .fb-cat-lv1 {
		height: 52px;
		padding: 0 8px;
	}
	body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .cat-lv1-item,
	body[data-wedding-catalog-scroll-state="REVEAL_UP"] .cat-lv1-item,
	body[data-wedding-catalog-scroll-state="MODAL"] .cat-lv1-item {
		height: 52px;
		min-width: 64px;
		flex-direction: row;
		gap: 0;
		padding: 0 12px;
		line-height: 52px;
	}
	body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .cat-lv1-item .lv1-icon,
	body[data-wedding-catalog-scroll-state="REVEAL_UP"] .cat-lv1-item .lv1-icon,
	body[data-wedding-catalog-scroll-state="MODAL"] .cat-lv1-item .lv1-icon {
		display: none;
	}
	body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .cat-lv1-item.is-active::after,
	body[data-wedding-catalog-scroll-state="REVEAL_UP"] .cat-lv1-item.is-active::after,
	body[data-wedding-catalog-scroll-state="MODAL"] .cat-lv1-item.is-active::after {
		bottom: 0;
	}
	.fb-cat-lv2 {
		padding-left: 14px;
		padding-right: 14px;
	}
	/* 폰 위쪽 간격은 청첩장·감사장 목록(정본)과 같게 — 헤더 밑 16px 에 분류 줄, 도구 줄은 제 높이(56px)만.
	   종전엔 셸 위 10px · 도구 줄 위아래 16/12px 가 더해져 첫 상품이 36px 늦게(256px) 시작했다(검수 20260923). */
	.catalogShell--factory.catalogShell--mobile {
		margin-top: 0;
	}
	.fb-filter-bar {
		padding: 0;
	}
	.fb-showcase {
		padding: 29px 0 8px;
	}
	.fb-showcase-section {
		margin-bottom: 46px;
	}
	.fb-showcase-head {
		margin-bottom: 14px;
		padding-bottom: 10px;
	}
	.fb-showcase-heading {
		font-size: 17px;
	}
	.fb-showcase-more {
		font-size: 12px;
	}
	.fb-card-img-wrap {
		border-radius: 6px;
	}
	.fb-card-thumb,
	.fb-card-thumb-hover {
		width: calc(100% - 32px);
		height: calc(100% - 32px);
		filter: drop-shadow(0 7px 9px rgba(32, 27, 23, 0.17)) drop-shadow(0 1px 1px rgba(32, 27, 23, 0.1));
	}
	.fb-list-page .fb-product-grid {
		margin-top: 14px;
	}
	.fb-card-method {
		min-height: 38px;
		font-size: 13px;
		line-height: 19px;
		white-space: normal;
		word-break: keep-all;
	}
	.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-commerce {
		height: 44px;
		min-height: 44px;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 5px;
		gap: 0;
		white-space: normal;
	}
	.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-basis:not([hidden])::after {
		content: none;
	}
	.fb-list-page [data-catalog-card-layout="invitation"] .fb-card-price {
		font-size: 13px;
	}
	.fb-filter-bar > .catalogControls {
		flex-wrap: wrap;
		height: auto;
		gap: 8px;
	}
	.fb-brand-intro {
		padding: 44px 0 72px;
		gap: 22px;
	}
	.fb-brand-head {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.fb-brand-head-sub {
		font-size: 18px;
	}
	.fb-brand-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.fb-brand-card {
		min-height: 126px;
		padding: 16px;
		gap: 15px;
	}
	.fb-brand-card span {
		font-size: 12px;
	}
}

/* A 657px CSS viewport is still a narrow mobile/webview surface in the
 * catalog. Keep the card track single-column until the layout has enough
 * room for two complete cards and their gutters. */
@media (min-width: 641px) and (max-width: 767px) {
	.fb-product-grid.view-large { grid-template-columns: minmax(0, 1fr); }
}
.lv1-preview-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 5px;
	padding: 1px 5px;
	border-radius: 999px;
	background: var(--fb-color-warning-soft, #fff3e0);
	color: var(--fb-color-warning-strong, #a45100);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.4;
	vertical-align: middle;
}

/* 주문 방법은 상품 형태와 별개로 선택한다. 기존 카탈로그 정렬축 유지. */

/* 명함·카드·리플릿은 수량과 금액을 한 줄에 둔다 — 수량은 조건이 아니라 금액의 단위라서
 * 금액과 떨어지면 「8,400원」이 몇 장 값인지 알 수 없다. 조건을 따로 한 줄 더 쓰면
 * 모든 카드가 같은 글자(단면 컬러)를 반복해 카드가 4줄이 됐고, 그 줄을 없앤 자리다.
 * 금액이 서지 않는 상품(자유형·대량)은 안내 문구가 길어 줄바꿈만 허용한다. */
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"]) .fb-card-commerce {
	/* 모바일 공통 규칙은 이 줄을 세로로 쌓는다. 명함은 수량과 금액이 한 덩어리라
	 * 좁은 화면에서도 가로로 두고, 자리가 모자라면 flex-wrap 으로만 접는다. */
	flex-direction: row;
	height: auto;
	min-height: 22px;
	flex-wrap: wrap;
	gap: 5px;
	white-space: normal;
}
/* 모바일 공통 규칙은 세로로 쌓는 것을 전제로 구분점과 간격을 지운다. 가로로 되돌린
 * 명함에서는 둘 다 되살려야 「100장8,400원부터」로 붙어 읽히지 않는다. */
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"]) .fb-card-basis:not([hidden])::after {
	content: "·";
	margin-left: 5px;
}
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"]) .fb-card-basis,
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"]) .fb-card-price {
	height: auto;
	white-space: normal;
	word-break: keep-all;
}
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"]) .fb-card-basis {
	color: var(--fb-text-secondary, #62696f);
	overflow-wrap: break-word;
}
/* 금액이 서지 않는 상품(자유형·대량·레이저)은 수량 옆에 붙일 금액이 없다. 안내 문구를
 * 먼저 놓고 상품 조건을 그 아래로 내린다 — 한 줄에 이으면 「…얇은 종이 가능 · 크기·종이
 * 선택 후 금액 확인」처럼 성격이 다른 두 말이 한 문장으로 읽힌다. */
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"])[data-price-mode="configure"] .fb-card-commerce {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"])[data-price-mode="configure"] .fb-card-price {
	order: -1;
}
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"])[data-price-mode="configure"] .fb-card-basis {
	line-height: 18px;
}
.fb-list-page [data-catalog-card-layout="invitation"]:is([data-category="namecard"],[data-category="card"],[data-category="leaflet"])[data-price-mode="configure"] .fb-card-basis::after {
	content: none;
}


.fb-list-page [data-catalog-card-layout="invitation"] [data-catalog-card-badges] {
	height: auto;
	margin-top: 5px;
}