/* ===== Reset & Base ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: 'Pretendard', -apple-system, sans-serif; font-size: 14px; color: var(--fb-color_text_primary); background: var(--fb-color_bg_white); line-height: 1.4; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }
img { max-width: 100%; vertical-align: middle; }
button, input, select { font-family: inherit; font-size: inherit; border: none; outline: none; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* ===== GNB ===== */
.gnb {
	width: 100%;
	background: #1b2631;
}
.gnb-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1000px;
	height: 80px;
	margin: 0 auto;
}
.gnb-left {
	display: flex;
	align-items: center;
	gap: 0;
}
.gnb-logo {
	display: flex;
	align-items: center;
}
.gnb-logo img {
	width: 170px;
	height: 34px;
}
.gnb-divider {
	display: inline-block;
	width: 1px;
	height: 20px;
	background: rgba(255,255,255,0.2);
	margin: 0 20px;
}
.gnb-menu {
	display: flex;
	align-items: center;
	gap: 0;
}
.gnb-menu .gnb-link {
	position: relative;
	padding: 0 14px;
}
.gnb-menu .gnb-link:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background: rgba(255,255,255,0.2);
}
.gnb-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.gnb-icon-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 0;
	color: #c8cdd4;
	transition: color 0.2s;
	position: relative;
}
.gnb-icon-link svg {
	width: 24px;
	height: 24px;
	stroke-width: 1.8;
}
.gnb-icon-link:hover {
	color: var(--fb-color_bg_white);
}
.gnb-icon-link[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: -32px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 13px;
	color: #e85a3a;
	border: 1px solid #e85a3a;
	border-radius: 20px;
	padding: 4px 14px;
	background: var(--fb-color_bg_white);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 100;
}
.gnb-icon-link:hover[data-tooltip]::after {
	opacity: 1;
}
.gnb-cart-link {
	position: relative;
}
.gnb-cart-count {
	position: absolute;
	top: 2px;
	right: 1px;
	min-width: 16px;
	height: 16px;
	background: #e85a3a;
	color: var(--fb-color_bg_white);
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	border-radius: 8px;
	padding: 0 4px;
}
.gnb-link {
	color: #c8cdd4;
	font-size: 12px;
	font-weight: 400;
	line-height: 120%;
	text-decoration: none;
	white-space: nowrap;
}
.gnb-link:hover {
	color: var(--fb-color_bg_white);
}

/* ===== Sub Navigation ===== */
.sub-nav {
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
	background: var(--fb-color_bg_white);
}
.sub-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1000px;
	height: 50px;
	margin: 0 auto;
}
.sub-nav-menu {
	display: flex;
	align-items: center;
	gap: 30px;
}
.sub-nav-menu li a {
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 120%;
	white-space: nowrap;
}
.sub-nav-menu li.active a {
	color: var(--fb-color_text_primary);
	position: relative;
}
.sub-nav-menu li.active a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -14px;
	height: 2px;
	background: var(--fb-color_text_primary);
}
.sub-nav-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}
.icon-btn img {
	width: 22px;
	height: 22px;
}
.btn-sample {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border: 1px solid var(--fb-color_text_primary);
	border-radius: 15px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}
.btn-sample span {
	margin-left: 2px;
}

/* ===== 외부 레거시 wrapper 가운데 정렬 보장 =====
   /card/head.html 의 <table id="content_wrapper" align="center"> 가 일부 환경에서
   align="center" 무시되며 좌측 정렬되는 문제 해소. 너비는 1000px 표준 유지. */
table#content_wrapper {
	margin: 0 auto !important;
}

/* ===== Page Wrap =====
   펙토리B 표준 콘텐츠 너비 1000px + 가운데 정렬. (list.php / preview.php / design-request.php 동일) */
.page-wrap {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 80px;
}

/* ===== Page Title ===== */
.page-title {
	font-size: 24px;
	font-weight: 300;
	color: var(--fb-color_text_primary);
	padding: 30px 0 10px;
	line-height: 120%;
}
.title-line {
	width: 100%;
	height: 1px;
	background: var(--fb-color_border);
	margin-bottom: 0;
}

/* ===== Category Tab ===== */
.category-tab-wrap {
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
}
.category-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 0;
	gap: 1px;
	width: 1000px;
	margin: 0 auto;
}
.cate-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100px;
	gap: 8px;
	cursor: pointer;
}
.cate-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 50%;
	background: var(--fb-color_bg_subtle);
	color: var(--fb-color_text_muted);
}
.cate-item.active .cate-icon {
	border-color: var(--fb-color_text_primary);
	border-width: 2px;
	background: var(--fb-color_bg_white);
	color: var(--fb-color_text_primary);
}
.cate-item:hover .cate-icon {
	border-color: var(--fb-color_text_muted);
	color: var(--fb-color_text_secondary);
}
.cate-icon img {
	width: 24px;
	height: 24px;
}
.cate-icon svg {
	width: 24px;
	height: 24px;
}
.cate-name {
	font-family: 'Pretendard', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #444444;
	line-height: 120%;
}
.cate-item.active .cate-name {
	font-weight: 600;
	color: var(--fb-color_text_primary);
}

/* ===== Banner Area ===== */
.banner-area {
	padding: 20px 0;
}
.banner-placeholder {
	width: 100%;
	height: 110px;
	background: var(--fb-color_border);
	border-radius: 4px;
}

/* ===== Content Area (2 Column) ===== */
.content-area {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}
.content-left {
	flex: 1;
	min-width: 0;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	overflow: hidden;       /* 자식 배경/패딩이 둥근 모서리에 맞춰 클리핑되도록 */
}
.content-right {
	width: 320px;
	flex-shrink: 0;
	position: sticky;
	top: 20px;
}
/* 모바일에서는 breadcrumb sticky(50px) 아래로 이동 */
@media (max-width: 768px) {
	.content-right { top: 70px; }
}

/* ===== Order Tab ===== */
.order-tab {
	display: flex;
	border-bottom: 1px solid #e5e5e5;
}
.order-tab-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	height: 56px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_muted);
	border-bottom: 2px solid transparent;
	transition: all 0.2s;
}
.order-tab-item.active {
	color: var(--fb-color_text_primary);
	border-bottom-color: var(--fb-color_text_primary);
}
.order-tab-icon {
	display: flex;
	align-items: center;
}

/* ===== Upload Content ===== */
.upload-guide {
	padding: 20px 16px 16px;
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
	line-height: 1.6;
}
.upload-shape-grid-wrap {
	position: relative;
}
.upload-shape-grid-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0));
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
}
.upload-shape-grid-wrap.is-scrolled::before {
	opacity: 1;
}
.upload-shape-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 16px;
	padding: 10px 16px 30px;
	max-height: 600px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.upload-shape-grid::-webkit-scrollbar {
	display: none;
}
.upload-shape-card {
	text-align: left;
	cursor: pointer;
}
.upload-shape-card:hover .upload-shape-thumb {
	border-color: var(--fb-color_text_primary);
}
.upload-shape-thumb {
	width: 100%;
	aspect-ratio: 148 / 190;
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	margin-bottom: 8px;
	transition: all 0.2s;
	overflow: hidden;
}
.upload-shape-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 120%;
	margin-bottom: 2px;
}
.upload-shape-size {
	font-size: 12px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
	line-height: 120%;
}

/* Upload Detail (선택 후 상세) */
/* .upload-guide-download 의 padding/display 는 post.css 에서 관리 (uv-file-section 내 위치 기준). */
.upload-detail {
	display: flex;
	align-items: stretch;
	gap: 14px;
	padding: 16px;        /* 상하 동일 — 이미지 상하 여백 통일 */
}
.upload-detail-info {
	flex: 1;
	min-width: 0;
	/* 썸네일 높이(180px)에 맞춰 우측 콘텐츠를 세로로 분산.
	   첫번째 form-group 은 이미지 상단에, 마지막 form-group(수량) 은 이미지 하단에 정렬됨.
	   (flex: 1 + margin-top: auto 패턴으로 반응형 자동 분배) */
	display: flex;
	flex-direction: column;
}
.upload-detail-info > .upload-form-grid {
	flex: 1;
	justify-content: flex-end;        /* 폼 그룹을 이미지 하단에 정렬 */
}
/* 좌측 상품 이미지 썸네일 */
.upload-detail-thumb-left {
	position: relative;
	flex: 0 0 auto;
	width: 284px;
	height: 304px;
	aspect-ratio: 284 / 304;
	align-self: flex-start;
	background: #f1f1f1;
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 상품명 — .upload-detail-info 의 최상단 (상품크기 라벨 위). 이전 .upload-detail-title 수준의 타이포. */
.upload-product-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--fb-color_text_primary);
	line-height: 1.35;
	text-align: left;
	word-break: keep-all;
	margin-bottom: 14px;
}
.upload-product-name:empty { display: none; }
.upload-product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-sizing: border-box;
	display: block;
}
.upload-product-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.upload-product-img-placeholder svg { opacity: 0.6; }
/* 썸네일이 주입되면 placeholder 는 숨김 (JS 에서 class 토글) */
.upload-detail-thumb-left.has-img .upload-product-img-placeholder { display: none; }
/* 3단(세로 3줄) 배치: 상품크기 / 인쇄방법 / 부수 가 각각 한 줄씩 쌓임.
   썸네일은 이 스택 왼쪽에 위치하고, 오른쪽이 세로로 내려감. */
.upload-form-grid {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.upload-form-grid .upload-form-row.spec-size-text { margin-top: 0; }
.upload-form-grid .upload-form-group { margin-bottom: 0; }
.upload-form-grid .upload-form-select { max-width: none; width: 100%; }
.upload-form-grid .upload-size-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
}
/* 라벨 컬러 변경 효과 제거 — 라벨은 항상 var(--fb-color_text_primary) 유지 */
.upload-size-label { transition: color 0.15s ease; }

/* 템플릿 상품의 크기 텍스트 표기 — "접었을때 113×170mm  펼쳤을때 225×170mm"
   엽서형처럼 단일 표기( "113×170mm" )든, 접지류의 "접었을때 …"든 동일한 굵기(500)로 통일.
   "펼쳤을때 …" 만 보조 정보로 조금 얇게(400 + var(--fb-color_text_secondary)). */
.upload-form-row.spec-size-text {
	font-size: 14px;
	color: var(--fb-color_text_primary);
	font-weight: 500;
	flex-direction: column;
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
/* 라벨 부제 (예: 봉투 크기 *크기 조절 불가 — Figma 231:899) */
.upload-size-label-sub {
	font-size: 12px;
	color: #777;
	font-weight: 400;
	margin-left: 4px;
}
/* 봉투 크기 박스 스타일 (Figma 231:898) — W/H 두 박스 + 펼침크기 박스 */
.spec-size-text:has(.env-size-box-row) {
	display: flex !important;
	flex-direction: column !important;
	gap: 15px !important;
	align-items: stretch !important;
	width: 100%;
}
.env-size-box-row {
	display: flex;
	gap: 15px;
	width: 100%;
}
.env-size-box {
	flex: 1 0 0;
	min-width: 0;
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	height: 45px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 300;
	color: #777;
}
.env-size-box-label {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
}
.env-size-box-val {
	flex: 1 0 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--fb-color_text_primary);
	font-weight: 500;
	text-align: right;
}
.env-size-box-suffix {
	flex-shrink: 0;
	text-align: right;
}
.env-size-expanded-box {
	background: var(--fb-color_bg_info);
	border: 1px solid var(--fb-color_border_brand);
	border-radius: 3px;
	height: 45px;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 300;
	width: 100%;
}
.env-size-expanded-label {
	color: var(--fb-color_brand_primary);
}
.env-size-expanded-val {
	color: var(--fb-color_text_primary);
}
.spec-size-expanded { font-weight: 500; color: var(--fb-color_text_primary); display: block; }
.spec-size-folded { font-weight: 400; color: var(--fb-color_text_secondary); display: block; margin-top: 2px; }
.spec-size-gap { display: none; }
/* 가로/세로 input 을 감싸는 wrap — input 안쪽 오른편에 "mm" 접미사를 오버레이. */
.size-input-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
}
.size-input-wrap .opt-size-input {
	width: 100%;
	min-width: 0;
	padding-right: 32px; /* "mm" 라벨 자리 확보 */
	box-sizing: border-box;
}
.size-input-suffix {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	/* 공통 muted 는 2.85:1 이라 「mm」가 입력칸 옆에서 거의 안 보였다(전수 조사 20260921). */
	color: var(--bj-muted, #66635e);
	pointer-events: none;
	user-select: none;
}
.upload-form-grid .order-qty-wrap { width: 100%; }
.upload-form-grid .order-qty-box { width: 100%; }
.size-input-hint-row {
	margin-top: 4px;
	font-size: 11px;
	color: var(--fb-color_text_muted);
}
/* 모바일/좁은 화면: 썸네일 상단, 입력은 그 아래 — 정사각형 영역으로 확대 */
@media (max-width: 720px) {
	.upload-detail { flex-direction: column; }
	.upload-detail-thumb-left {
		width: 100%;
		height: auto;
		flex: 0 0 auto;
		aspect-ratio: 1 / 1;
	}
}
.upload-detail-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.2s;
	overflow: hidden;
	position: relative;
}
.upload-detail-thumb:hover {
	border-color: var(--fb-color_text_primary);
	background: var(--fb-color_bg_section);
}
.upload-file-input {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
}
.upload-thumb-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.upload-thumb-text {
	font-size: 12px;
	font-weight: 400;
	color: #bbb;
}
.upload-file-name {
	display: none;
	font-size: 11px;
	color: var(--fb-color_text_primary);
	text-align: center;
	padding: 4px 8px;
	word-break: break-all;
}
.upload-detail-thumb.has-file {
	border-color: #4caf50;
	background: #f1f8e9;
}
.upload-detail-thumb.has-file .upload-thumb-placeholder {
	display: none;
}
.upload-detail-thumb.has-file .upload-file-name {
	display: block;
}
.upload-detail-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--fb-color_text_primary);
	margin-bottom: 14px;
}
.upload-detail-steps {
	list-style: none;
}
.upload-detail-steps li {
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_secondary);
	line-height: 1.8;
	padding-left: 10px;
	position: relative;
}
.upload-detail-steps li::before {
	content: '·';
	position: absolute;
	left: 0;
	color: var(--fb-color_text_secondary);
}
.upload-download-row {
	display: flex;
	align-items: center;
	padding: 16px;
	gap: 12px;
}
.upload-download-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	flex-shrink: 0;
}
.btn-download {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}
.btn-download-ai {
	color: var(--fb-color_brand_accent);
	border: 1px solid var(--fb-color_brand_accent);
	background: var(--fb-color_bg_white);
}
.btn-download-ai:hover {
	background: #fff8f0;
}
.btn-download-psd {
	color: #2d8ceb;
	border: 1px solid #2d8ceb;
	background: var(--fb-color_bg_white);
}
.btn-download-psd:hover {
	background: #f0f7ff;
}
.download-icon-ai {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--fb-color_brand_accent);
	color: var(--fb-color_bg_white);
	font-size: 10px;
	font-weight: 700;
	border-radius: 3px;
}
.download-icon-psd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: #2d8ceb;
	color: var(--fb-color_bg_white);
	font-size: 10px;
	font-weight: 700;
	border-radius: 3px;
}

/* ===== Design Category Filter ===== */
.design-cate-row {
	display: flex;
	gap: 8px;
	padding: 16px 16px 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.design-cate-row::-webkit-scrollbar {
	display: none;
}
.design-cate {
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border-radius: 20px;
	border: 1px solid var(--fb-color_border_default);
	background: var(--fb-color_bg_white);
	font-size: 13px;
	font-weight: 300;
	white-space: nowrap;
	cursor: pointer;
	flex-shrink: 0;
}
.design-cate:hover { border-color: var(--fb-color_text_muted); }
.design-cate.is-active {
	border-color: #1b2631;
	font-weight: 600;
}

/* ===== Design Grid ===== */
.design-grid-wrap {
	position: relative;
}
.design-grid-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0));
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
}
.design-grid-wrap.is-scrolled::before {
	opacity: 1;
}
.design-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 16px;
	padding: 10px 16px 30px;
	max-height: 600px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.design-grid::-webkit-scrollbar {
	display: none;
}
.design-card {
	cursor: pointer;
}
.design-card:hover .design-thumb {
	border-color: var(--fb-color_text_primary);
}
.design-thumb {
	width: 100%;
	aspect-ratio: 148 / 190;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	overflow: hidden;
	background: var(--fb-color_bg_subtle);
	margin-bottom: 8px;
}
.design-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.design-code {
	font-size: 13px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 120%;
	margin-bottom: 2px;
}
.design-price {
	font-size: 12px;
	font-weight: 400;
	color: #888;
	line-height: 120%;
	margin: 0;
}
.design-style-btn {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	font-size: 11px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
	line-height: 120%;
	margin-top: 4px;
}

/* ===== Selected Design (After) ===== */
.selected-design {
	display: flex;
	gap: 20px;
	padding: 20px 16px;
	border-bottom: 1px solid var(--fb-color_border);
}
.design-thumb-lg {
	width: 140px;
	height: 180px;
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	flex-shrink: 0;
}
.selected-design-code {
	font-size: 18px;
	font-weight: 700;
	color: var(--fb-color_text_primary);
	margin-bottom: 12px;
}
.selected-design-desc {
	padding-left: 16px;
	margin: 0;
}
.selected-design-desc li {
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_secondary);
	line-height: 1.8;
	list-style: disc;
}
.selected-option-row {
	display: flex;
	align-items: center;
	padding: 16px 16px;
	gap: 16px;
}
.selected-option-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin-right: 8px;
}
.radio-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 400;
	color: #444;
	cursor: pointer;
}
.radio-label input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--fb-color_text_primary);
}
.reselect-link {
	padding: 0;
	text-align: center;
	background: var(--fb-color_bg_subtle);
	border-top: 1px solid var(--fb-color_border);
}
.reselect-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 40px;
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
}
.reselect-link a:hover {
	color: var(--fb-color_text_primary);
	background: var(--fb-color_bg_section);
}
.reselect-link a span {
	font-size: 10px;
	transform: rotate(90deg);
	display: inline-block;
}

/* ===== Option Area ===== */
.option-area {
	background: var(--fb-color_bg_white);
	/* 상단 여백 — 다른 섹션 간격과 동일하게 gap_md 통일 (envelope card ↔ 첫 옵션 섹션 간 동일 리듬) */
	padding: var(--fb-gap_md, 12px) 0 0;
	width: 100%;
	max-width: 660px;
}

/* Option Select (Dropdown) */
.option-select {
	position: relative;
	margin-bottom: 8px;
}
.option-select select {
	width: 100%;
	height: 46px;
	padding: 0 40px 0 16px;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	background: var(--fb-color_bg_white);
	font-size: 14px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	cursor: pointer;
}
.option-select select:focus {
	background: var(--fb-color_bg_subtle);
}
.select-arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	display: flex;
}

/* Option Toggle */
.option-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 46px;
	padding: 0 16px;
	border: 1px solid #e5e5e5;
	margin-bottom: 8px;
}
.option-toggle:last-child {
	margin-bottom: 0;
}
.option-toggle-label {
	font-size: 14px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
}

/* Option Bot (spacer) */
.option-bot {
	height: 16px;
	background: var(--fb-color_bg_white);
}

/* Toggle Switch */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	cursor: pointer;
}
.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.toggle-slider {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: var(--fb-color_border_default);
	border-radius: 10px;
	transition: all 0.2s;
}
.toggle-slider::before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	left: 2px;
	bottom: 2px;
	background: var(--fb-color_bg_white);
	border-radius: 50%;
	transition: all 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
	background: var(--fb-color_text_primary);
}
.toggle-switch input:checked + .toggle-slider::before {
	transform: translateX(16px);
}

/* ===== Option Expandable Sections ===== */
.opt-section {
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	margin-bottom: 20px;
	overflow: hidden;
}
.opt-section:last-child {
	margin-bottom: 0;
}
.opt-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 54px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	cursor: pointer;
}
.opt-section-header:hover {
	background: var(--fb-color_bg_subtle);
}
.opt-section-header.selected,
.opt-section-header.selected:hover {
	background: var(--fb-color_bg_subtle);
	color: var(--fb-color_text_primary);
}
.opt-arrow {
	margin-left: auto;
	flex-shrink: 0;
	margin-right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: background 0.15s ease, transform 0.2s ease;
}
.opt-arrow svg {
	transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.opt-arrow svg path {
	transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.opt-section-header.open .opt-arrow svg {
	transform: rotate(180deg);
}
/* 마우스 오버 시 셀렉트 화살표 강조 — 토글 가능한 헤더에서만 (차분한 회색 톤) */
.opt-section-header[data-toggle]:hover {
	cursor: pointer;
}
.opt-section-header[data-toggle]:hover .opt-arrow {
	background: rgba(0, 0, 0, 0.05);
	transform: translateY(2px);
}
.opt-section-header[data-toggle]:hover .opt-arrow svg path {
	stroke: #111;
	stroke-width: 2.5;
}
.opt-section-header[data-toggle].open:hover .opt-arrow {
	transform: translateY(-2px) rotate(0deg);
}

/* ── 펼침 상태 강조 (인쇄·종이 섹션) — C안: 부드러운 프리미엄 톤 ──
   - 섹션 컨테이너에 무채색 soft drop shadow (블루 ring 제거 — 과한 느낌 방지)
   - 살짝 떠오르는 느낌 (translateY)
   - cubic-bezier 자연스러운 transition */
.opt-section {
	transition: box-shadow 0.25s cubic-bezier(.4,0,.2,1), transform 0.25s cubic-bezier(.4,0,.2,1);
}
.opt-section:has(.opt-print-header.open),
.opt-section:has(.opt-paper-header.open) {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
	transform: translateY(-1px);
	border-radius: 4px;
	position: relative;
	z-index: 1;
}

/* 본문 카드 (선택 + 접힘) 등장 애니메이션 — scale 0.96 → 1.0 + fade */
@keyframes fbCardReveal {
	from { transform: scale(0.96); opacity: 0; }
	to   { transform: scale(1.0);  opacity: 1; }
}
.opt-print-header.selected:not(.open) .opt-print-body-card,
.opt-paper-header.selected:not(.open) .opt-paper-body-card {
	animation: fbCardReveal 0.32s cubic-bezier(.4,0,.2,1) both;
	transform-origin: top center;
}
/* 카드 등장 직후 썸네일에 짧은 그림자 효과 — 무채색 drop shadow 가 isolated 후 사라짐 */
@keyframes fbThumbSheen {
	0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.0); }
	30%  { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.0); }
}
.opt-print-header.selected:not(.open) .opt-print-body-info .opt-header-thumb,
.opt-paper-header.selected:not(.open) .opt-paper-body-info .opt-header-thumb {
	animation: fbThumbSheen 0.7s cubic-bezier(.4,0,.2,1) both;
}
.opt-print-header,
.opt-paper-header {
	flex-direction: column;
	height: auto;
	padding: 0;
}
/* 미선택 상태 */
.opt-section:has(.opt-print-header:not(.selected)),
.opt-section:has(.opt-paper-header:not(.selected)) {
	border-color: #d5d5d5;
	background: var(--fb-color_bg_white);
}
.opt-section:has(.opt-print-header:not(.selected)):hover,
.opt-section:has(.opt-paper-header:not(.selected)):hover {
	border-color: var(--fb-color_text_disabled);
	background: var(--fb-color_bg_white);
}
/* 선택 완료: 배경 복원 */
.opt-section:has(.opt-print-header.selected),
.opt-section:has(.opt-paper-header.selected) {
	border-color: #e5e5e5;
	background: transparent;
}
.opt-print-header .opt-header-row,
.opt-print-header .opt-header-row,
.opt-paper-header .opt-header-row {
	display: flex;
	align-items: center;
	width: 100%;
	height: 55px;
	min-height: 55px;
	padding: 0 16px;
	gap: 12px;
	box-sizing: border-box;
}
.opt-header-default {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--fb-color_text_primary);
	font-weight: 500;
}
.opt-header-warn-icon {
	flex-shrink: 0;
	color: var(--fb-color_text_primary);
}
.opt-header-warn-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fb-color_text_primary);
	flex-shrink: 0;
}
/* 선택 완료: 헤더 썸네일 */
.opt-header-thumb {
	flex-shrink: 0;
	width: 62px;
	height: 62px;
	border-radius: 6px;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	overflow: hidden;
}
.opt-header-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* SVG 썸네일 (icon_url 없는 카드 — 예: 인쇄 안함) 중앙 정렬 + 적절한 사이즈 */
/* jQuery .show() 가 inline display:block 을 주입하므로 SVG 내부만 flex 처리 */
.opt-header-thumb svg {
	width: 60%;
	height: 60%;
	display: block;
	margin: 20% auto;   /* 수직·수평 중앙 */
}
/* 접었을때/펼쳤을때 토글 */
.upload-fold-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.upload-fold-toggle {
	display: inline-flex;
	padding: 2px;
	background: #f1f1f1;
	border-radius: 6px;
	gap: 2px;
}
.upload-fold-btn {
	padding: 6px 14px;
	border: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	color: var(--fb-color_text_secondary);
	border-radius: 5px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.upload-fold-btn:hover { color: #1a73e8; }
.upload-fold-btn.is-active {
	background: var(--fb-color_bg_white);
	color: #1a73e8;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.upload-fold-btn:disabled,
.upload-fold-btn.is-disabled {
	color: #bbb;
	cursor: not-allowed;
}
.upload-fold-hint {
	font-size: 12px;
	color: #888;
}
/* 펼침 방향 드롭다운 (좌우/상하) — 탈지 드롭다운과 동일 시각 언어 */
.upload-fold-dd-row { position: relative; }
.upload-fold-dd-box {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	background: var(--fb-color_bg_white);
	cursor: pointer;
	min-height: 48px;
}
.upload-fold-dd-box:hover { border-color: var(--fb-color_text_muted); }
.upload-fold-dd-thumb {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	background: #f5f5f5;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.upload-fold-dd-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.upload-fold-dd-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}
.upload-fold-dd-desc {
	font-size: 11px;
	color: #888;
}
.upload-fold-dd-arrow { flex-shrink: 0; }
.upload-fold-dropdown {
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 12px 36px rgba(0,0,0,0.22);
	z-index: 10000;
}
.upload-fold-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--fb-color_bg_section);
	position: relative;
}
.upload-fold-option:last-child { border-bottom: none; }
.upload-fold-option:hover { background: #f8f8f8; }
.upload-fold-option.is-selected { background: #f7f7f7; }
.upload-fold-opt-thumb {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	background: #f5f5f5;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.upload-fold-opt-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.upload-fold-opt-info strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}
.upload-fold-opt-info span {
	font-size: 11px;
	color: #888;
}
.upload-fold-opt-check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #222;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 4px;
}

/* 봉투 형태 선택 안내 모달 */
.env-shape-first-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: envShapeFadeIn .15s ease-out;
}
@keyframes envShapeFadeIn { from { opacity: 0; } to { opacity: 1; } }
.env-shape-first-modal {
	background: var(--fb-color_bg_white);
	border-radius: 10px;
	padding: 28px 24px 20px;
	width: min(360px, calc(100vw - 40px));
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	text-align: center;
}
.env-shape-first-icon {
	margin-bottom: 14px;
}
.env-shape-first-icon svg {
	display: inline-block;
}
.env-shape-first-title {
	font-size: 17px;
	font-weight: 700;
	color: #222;
	margin-bottom: 10px;
}
.env-shape-first-desc {
	font-size: 13px;
	color: var(--fb-color_text_secondary);
	line-height: 1.55;
	margin-bottom: 20px;
}
.env-shape-first-desc strong { color: #1a73e8; font-weight: 600; }
.env-shape-first-btns {
	display: flex;
	gap: 8px;
}
.env-shape-first-cancel,
.env-shape-first-ok {
	flex: 1;
	padding: 11px 16px;
	border: 0;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}
.env-shape-first-cancel {
	background: #f1f1f1;
	color: #555;
}
.env-shape-first-cancel:hover { background: #e5e5e5; }
.env-shape-first-ok {
	background: #1a73e8;
	color: var(--fb-color_bg_white);
	flex: 1.4;
}
.env-shape-first-ok:hover { background: #1766d0; }
/* 선택 완료: 이름 + 설명 */
.opt-header-print-name,
.opt-header-paper-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	min-width: 0;
}
.opt-header-selected-desc {
	width: 100%;
	padding: 0 16px 10px 80px;
	font-size: 12px;
	line-height: 1.5;
	color: #888;
	display: none;
	white-space: pre-line;     /* "\n" 을 줄바꿈으로 표시 — print_none_desc_guide 등 멀티라인 설명 지원 */
}
/* 펼침 상태: 변경 모드 — 선택 정보는 유지하고 기본 안내도 표시 (썸네일 유지) */
.opt-print-header.open.selected .opt-header-default,
.opt-paper-header.open.selected .opt-header-default {
	display: flex !important;
}
.opt-print-header.open.selected .opt-header-print-name,
.opt-paper-header.open.selected .opt-header-paper-name {
	display: none !important;
}
.opt-print-header.open .opt-header-digital-row,
.opt-print-header.open .opt-header-uv-row,
.opt-print-header.open .opt-header-master-row,
.opt-print-header.open .opt-header-print-upload {
	display: none !important;
}
.opt-paper-header.open .opt-header-paper-cut-row {
	display: none !important;
}
.opt-header-digital-row,
.opt-header-uv-row,
.opt-header-master-row {
	width: 100%;
	padding: 0 16px 12px;
}
.opt-header-uv-row {
	position: relative;
}
.opt-header-uv-row::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 13px;
	height: 145px;
	border-left: 1px dashed #d0d0d0;
	pointer-events: none;
}
.opt-sub-divider {
	height: 1px;
	background: var(--fb-color_bg_section);
	margin: 0 0 12px;
}
.opt-sub-selects {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}
/* 인쇄방법 앞면/뒷면 2분할 셀렉트: 간격 + 점 구분 */
.opt-header-digital-row .opt-sub-selects,
.opt-header-uv-row .opt-sub-selects,
.opt-header-master-row .opt-sub-selects {
	gap: 24px;
	position: relative;
}
.opt-header-digital-row .opt-sub-selects::after,
.opt-header-master-row .opt-sub-selects::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--fb-color_text_disabled);
	pointer-events: none;
}
.opt-sub-select {
	flex: 1;
	box-sizing: border-box;
	padding: 0 32px 0 14px;
	font-size: 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	background: var(--fb-color_bg_white) url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: var(--fb-color_text_primary);
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 50px;
	min-height: 50px;
}
.opt-sub-select:hover {
	border-color: var(--fb-color_text_muted);
}
.opt-sub-select:focus {
	border-color: var(--fb-color_text_secondary);
}
.opt-sub-select.is-none {
	color: var(--fb-color_text_muted);
}
.opt-sub-select.is-none:hover {
	color: var(--fb-color_text_secondary);
}
.opt-sub-select.is-auto {
	background-image: none;
	padding-right: 14px;
}
.opt-sub-select:disabled {
	opacity: 0.7;
	cursor: default;
	color: #555;
}
.opt-toggle-header {
	cursor: default;
}
.opt-toggle-header:hover {
	background: transparent;
}
.opt-toggle-header.selected:hover {
	background: var(--fb-color_bg_subtle);
}
.opt-section-body {
	border-top: 1px solid #e5e5e5;
	padding: 0 16px;
}
/* 옵션 선택 리스트 (펼침 상태) */
.opt-select-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* 종이 선택 그리드 — 피그마 11:681 정확 사양 (2-column, 가로 레이아웃) */
#paper-card-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;                          /* 피그마 11:688/689 */
	padding: 24px 0 24px 20px;          /* 우측 padding 0 → 스크롤바 우측 끝 밀착 */
	max-height: 440px;
	overflow-y: auto;
	background: var(--fb-color_bg_white);
}
/* 우측 컬럼 카드 — 스크롤바 공간 확보 (16px 만큼 right margin) */
#paper-card-list .opt-select-card {
	margin-right: 0;
}
/* 스크롤바 자체를 우측 끝으로 밀착하기 위해 트랙 영역도 우측까지 확장
   webkit 브라우저용 슬림 스크롤바 */
#paper-card-list::-webkit-scrollbar {
	width: 8px;
}
#paper-card-list::-webkit-scrollbar-track {
	background: transparent;
}
#paper-card-list::-webkit-scrollbar-thumb {
	background: var(--fb-color_border_default);
	border-radius: 4px;
}
#paper-card-list::-webkit-scrollbar-thumb:hover {
	background: var(--fb-color_text_muted);
}
#paper-card-list .opt-select-card {
	flex-direction: row !important;     /* 가로 레이아웃 (썸 left + info right) */
	gap: 20px !important;               /* 피그마 11:691 */
	padding: 20px !important;           /* 피그마 11:690 */
	margin: 0;
	border: 1px solid var(--fb-color_border) !important;
	border-radius: 5px !important;
	background: var(--fb-color_bg_subtle) !important;     /* 카드 배경 회색 (피그마 매치) — !important 로 다른 룰 무력화 */
	overflow: visible !important;
	align-items: flex-start;
}
#paper-card-list .opt-select-card:hover {
	border-color: var(--fb-color_text_disabled) !important;
	background: var(--fb-color_bg_subtle) !important;
}
#paper-card-list .opt-select-card.selected {
	border-color: #1b2631 !important;   /* 다크 네이비 (피그마 11:690 선택) */
	background: var(--fb-color_bg_subtle) !important;
}
/* 썸네일 100×100 + 1px var(--fb-color_border_default) 보더 + radius 3px (피그마 11:692) — 흰 배경 */
#paper-card-list .opt-select-img {
	width: 100px !important;
	height: 100px !important;
	flex-shrink: 0;
	border-radius: 3px !important;
	border: 1px solid var(--fb-color_border_default) !important;
	background: var(--fb-color_bg_white) !important;          /* 썸네일은 흰 배경 (실제 종이 이미지 표시) */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
#paper-card-list .opt-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#paper-card-list .opt-thumb-img:not([src]),
#paper-card-list .opt-thumb-img[src=""] {
	display: none;
}
/* 영상(▶) 아이콘 제거 — 사용자 요청 */
#paper-card-list .opt-play-icon {
	display: none !important;
}
#paper-card-list .opt-select-card .opt-select-img::after,
#paper-card-list .opt-select-card .opt-select-img::before {
	display: none !important;
	content: none !important;
}
/* 텍스트 영역 — 가로 레이아웃 */
#paper-card-list .opt-select-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;                            /* 피그마 11:696 gap-[8px] */
	padding: 0;
	align-self: stretch;
}
/* 제목 14/SB (피그마 11:698) */
#paper-card-list .opt-select-title {
	font-size: 14px !important;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin: 0 !important;
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 4px;
}
/* 설명 14/Light — 인쇄 방식 카드 description 과 동일 스타일 */
#paper-card-list .opt-select-desc {
	display: block !important;
	font-size: 14px !important;
	font-weight: 300;
	color: var(--fb-color_text_primary);
	line-height: 1.5;
	margin: 0;
}
/* 인쇄 방식 카드 description 과 통일 (line-height/색상) */
#opt-print .opt-select-card .opt-select-desc,
#paper-card-list .opt-select-desc {
	font-size: 14px !important;
	font-weight: 300 !important;
	color: var(--fb-color_text_primary) !important;
	line-height: 1.5 !important;
}
/* 라디오 점 — 피그마에 없음, 숨김 */
#paper-card-list .opt-radio-dot {
	display: none !important;
}
/* 모바일: 1열 */
@media (max-width: 640px) {
	#paper-card-list { grid-template-columns: 1fr; padding: 16px; }
}
.opt-select-card {
	display: flex;
	gap: 14px;
	padding: 16px;
	margin: 0 -16px;
	border-bottom: 1px solid #e5e5e5;
	cursor: pointer;
	transition: background 0.15s;
}
.opt-select-card:last-child {
	border-bottom: none;
}
.opt-select-card:hover {
	background: var(--fb-color_bg_subtle);
}
.opt-select-card.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	position: relative;
}
.opt-select-reason-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
.opt-select-reason-overlay.show {
	opacity: 1;
}
.opt-select-reason-overlay span {
	font-size: 12px;
	color: #c62828;
	background: var(--fb-color_bg_white);
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	font-weight: 500;
	white-space: nowrap;
}
/* 후가공 사유 오버레이 */
.opt-post-reason-overlay {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 80px;
	z-index: 1000;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
.opt-post-reason-overlay.show {
	opacity: 1;
}
.opt-post-reason-overlay span {
	display: block;
	font-size: 12px;
	color: #c62828;
	background: rgba(255,255,255,0.97);
	padding: 10px 20px;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	font-weight: 500;
	text-align: center;
	line-height: 1.6;
	max-width: 360px;
	white-space: normal;
}
.opt-select-card.selected {
	background: var(--fb-color_bg_subtle);
}
.opt-select-card.selected .opt-radio-dot {
	border-color: var(--fb-color_text_primary);
}
.opt-select-card:not(.selected) .opt-radio-dot::after {
	display: none;
}
.opt-select-img {
	width: 80px;
	height: 80px;
	background: var(--fb-color_bg_section);
	border: 1px solid var(--fb-color_border);
	border-radius: 3px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 카드 안 SVG 아이콘 (icon_url 없는 인쇄 안 함 등) — 헤더 썸네일과 동일한 스케일 */
.opt-select-img > svg {
	width: 60%;
	height: 60%;
	stroke: var(--fb-color_text_muted);
}
.opt-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
}
/* 후가공 썸네일: 기본 숨김 */
.opt-post-icon .opt-post-thumb-img {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	position: absolute;
	top: 0;
	left: 0;
}
.opt-post-icon {
	position: relative;
	overflow: hidden;
}
/* 빈 src 썸네일은 항상 숨김 (금박/3D박 초기 상태 보호) — 비운 썸네일은 src 속성이 없다(2026-09-26, 빈 src 는 이미지 오류). */
.opt-post-icon .opt-post-thumb-img:not([src]),
.opt-post-icon .opt-post-thumb-img[src=""] {
	display: none !important;
}
/* 비활성(접힌) 상태: src 가 채워져 있어도 썸네일 숨김 — 라인 SVG(.opt-post-fig-icon) 만 표시
   (예전 디자인의 잔여 코드로 박/3D박 인라인 썸네일이 노출되던 버그 수정) */
.opt-post-section:not(.is-active) .opt-post-icon .opt-post-thumb-img {
	display: none !important;
}
/* 펼친 상태: 피그마 11:866 — 작은 SVG 아이콘 유지, 사진 썸네일 숨김 (body의 .opt-post-top에서만 표시) */
.opt-post-section.is-active .opt-post-icon .opt-post-thumb-img {
	display: none !important;
}
.opt-post-section.is-active .opt-post-icon svg {
	display: block;
}
.opt-post-section.is-active .opt-post-icon .opt-post-fig-icon {
	display: block;
}

.opt-play-icon {
	opacity: 0.6;
	transition: opacity 0.2s;
	cursor: pointer;
}
.opt-play-icon:hover {
	opacity: 1;
}
.opt-select-info {
	flex: 1;
	min-width: 0;
}
.opt-select-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin-bottom: 6px;
}
.opt-select-desc {
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_secondary);
	line-height: 1.6;
	margin-bottom: 8px;
}
/* 인쇄/종이 카드: PC 는 2줄(description), 모바일은 1줄(description_mobile) — 후가공 stamp-row 와 동일 패턴.
   #paper-card-list 의 `.opt-select-desc { display: block !important; }` 를 이기도록 specificity + !important 사용.
   디자인 토큰: 폰트는 .opt-select-desc 의 기본 정의 (14px Light) 가 적용됨. */
#opt-print .opt-select-card .opt-select-desc-pc,
#paper-card-list .opt-select-desc-pc { display: block !important; }
#opt-print .opt-select-card .opt-select-desc-mobile,
#paper-card-list .opt-select-desc-mobile { display: none !important; }
@media (max-width: 640px) {
	#opt-print .opt-select-card .opt-select-desc-pc,
	#paper-card-list .opt-select-desc-pc { display: none !important; }
	#opt-print .opt-select-card .opt-select-desc-mobile,
	#paper-card-list .opt-select-desc-mobile { display: block !important; }
}
/* 종이 헤더 이름 */
.opt-header-paper-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}
.opt-header-paper-cut-row {
	width: 100%;
	padding: 0 16px 14px;
}
/* 절수 셀렉트바 */
.paper-cut-select-bar {
	position: relative;
	display: flex;
	flex: 1 1 0;                  /* basis 0 — 콘텐츠 길이로 부모 폭 초과 안하도록 */
	min-width: 0;                  /* 자식 ellipsis 가 작동하도록 */
	width: 100%;
	max-width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px 0 14px;
	font-size: 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	background: var(--fb-color_bg_white);
	cursor: pointer;
	height: 50px;                  /* 다른 셀렉트와 통일 */
	min-height: 50px;
	box-sizing: border-box;
}
.paper-cut-select-bar:hover { border-color: var(--fb-color_text_muted); }
/* 기성봉투 등 잠긴 상태 — 종이 설명(.opt-header-selected-desc) 과 동일한 톤으로 통일.
   디자인 토큰 사용: font_size_md / font_weight_light / color_text_primary / icon_size_sm / gap_sm */
.paper-cut-select-bar.is-locked {
	height: auto !important;
	min-height: 0 !important;
	font-size: var(--fb-font_size_md, 14px) !important;
	color: var(--fb-color_text_primary) !important;
	font-weight: var(--fb-font_weight_light, 300) !important;
	line-height: 1.4 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--fb-gap_sm, 8px) !important;
}
/* 확성기(megaphone) 아이콘 — "보유중인 ..." 인포 라벨과 동일 스타일 */
.paper-cut-select-bar.is-locked::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: var(--fb-icon_size_sm, 16px);
	height: var(--fb-icon_size_sm, 16px);
	background: no-repeat center/contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 8.5a4 4 0 0 1 0 7'/%3E%3Cpath d='M19 6a7 7 0 0 1 0 12'/%3E%3C/svg%3E");
}
.paper-cut-select-bar.is-locked .paper-cut-select-text {
	font-size: var(--fb-font_size_md, 14px);
	color: var(--fb-color_text_primary);
	font-weight: var(--fb-font_weight_light, 300);
	line-height: 1.4;
}
.paper-cut-select-text {
	flex: 1;
	color: var(--fb-color_text_primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.paper-cut-select-arrow {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}
/* 절수 팝업 딤 배경 */
.paper-cut-dim {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35);
	z-index: 8999;
}
/* 절수 팝업 래퍼 (중앙 배치 + X 버튼) */
.paper-cut-popup-wrap {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9000;
	width: min(520px, calc(100vw - 32px));
}
/* 닫기 = 머리 줄(.paper-cut-popup-head) 안의 단추. 모양은 모달 시스템(.fb-modal-system-close)이 맡는다.
 * 종전엔 창 위(top:-52px)에 떠 있는 흰 X 였는데, 모달 시스템이 창을 overflow:hidden 으로 감싼 뒤로 잘려서
 * 보이지도 눌리지도 않았다(20260928 실측). */
.paper-cut-popup-close {
	cursor: pointer;
}
/* 초점 테두리는 키보드로 움직일 때만(.is-keyboard-nav — factory.js 가 Tab·화살표에 붙이고 누름에 뗀다).
 * 창을 열면 모달 시스템이 닫기에 초점을 주는데, 폰 사파리는 스크립트 초점·누른 단추도 :focus-visible 로 보고 네모를 그린다.
 * 링은 둘이다 — 모달 시스템 윤곽선(outline)과 상세 리뉴얼의 버튼 그림자(detail-renewal.css button:focus-visible box-shadow). */
.paper-cut-popup-wrap:not(.is-keyboard-nav) :focus-visible {
	outline: none;
	box-shadow: none;
}
/* 인쇄 방법 추천 팝업 */
.print-suggest-dim {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35);
	z-index: 8999;
}
.print-suggest-popup {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9000;
	width: min(380px, calc(100vw - 32px));
	background: var(--fb-color_bg_white);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
	overflow: hidden;
}
.print-suggest-title {
	padding: 28px 28px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--fb-color_text_primary);
}
.print-suggest-body {
	padding: 16px 28px 24px;
	font-size: 14px;
	color: #555;
	line-height: 1.7;
}
.print-suggest-saving {
	font-size: 24px;
	font-weight: 700;
	color: #d32f2f;
	margin: 8px 0 16px;
}
.print-suggest-compare {
	font-size: 13px;
	color: #888;
	line-height: 2;
}
.print-suggest-actions {
	display: flex;
	border-top: 1px solid #eee;
}
.print-suggest-btn {
	flex: 1;
	padding: 14px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	text-align: center;
}
.print-suggest-btn.confirm {
	background: var(--fb-color_text_primary);
	color: var(--fb-color_bg_white);
}
.print-suggest-btn.confirm:hover { background: #111; }
.print-suggest-btn.cancel {
	background: var(--fb-color_bg_white);
	color: var(--fb-color_text_secondary);
}
.print-suggest-btn.cancel:hover { background: #f5f5f5; }
/* 상품크기 입력 안내 팝업 */
.size-alert-dim {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35);
	z-index: 8999;
}
.size-alert-popup {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9000;
	width: min(320px, calc(100vw - 32px));
	background: var(--fb-color_bg_white);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
	overflow: hidden;
}
.size-alert-body {
	padding: 28px 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	text-align: center;
}
.size-alert-actions {
	border-top: 1px solid #eee;
}
.size-alert-btn {
	width: 100%;
	padding: 14px;
	font-size: 14px;
	font-weight: 600;
	background: var(--fb-color_text_primary);
	color: var(--fb-color_bg_white);
	border: none;
	cursor: pointer;
}
.size-alert-btn:hover { background: #111; }

/* 해제 불가 후가공 안내 모달 — size-alert 와 동일 스타일 */
.locked-postproc-dim {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35);
	z-index: 8999;
}
.locked-postproc-popup {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9000;
	width: min(320px, calc(100vw - 32px));
	background: var(--fb-color_bg_white);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
	overflow: hidden;
}
.locked-postproc-body {
	padding: 28px 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	text-align: center;
}
.locked-postproc-actions { border-top: 1px solid #eee; }
.locked-postproc-btn {
	width: 100%;
	padding: 14px;
	font-size: 14px;
	font-weight: 600;
	background: var(--fb-color_text_primary);
	color: var(--fb-color_bg_white);
	border: none;
	cursor: pointer;
}
.locked-postproc-btn:hover { background: #111; }

/* fb-alert — 시스템 공통 안내 모달 (window.alert 대체)
   디자인: locked-postproc-popup 과 동일 — 통일된 룩앤필 */
.fb-alert-dim {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35);
	z-index: 99998;
}
.fb-alert-popup {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
	width: min(320px, calc(100vw - 32px));
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
	overflow: hidden;
}
.fb-alert-body {
	padding: 28px 24px;
	font-size: 15px;
	font-weight: 600;
	color: #222;
	text-align: center;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: keep-all;
}
.fb-alert-actions {
	border-top: 1px solid #eee;
	display: flex;
}
.fb-alert-btn {
	flex: 1;
	padding: 14px;
	font-size: 14px;
	font-weight: 600;
	background: #222;
	color: #fff;
	border: none;
	cursor: pointer;
}
.fb-alert-btn:hover { background: #111; }
.fb-alert-btn.is-cancel {
	background: #fff;
	color: #222;
	border-right: 1px solid #eee;
}
.fb-alert-btn.is-cancel:hover { background: #f5f5f5; }

/* fb-choice — 두 액션 버튼 세로 스택 (윈도우 fbChoice 용) */
.fb-alert-popup.is-choice {
	width: min(360px, calc(100vw - 32px));
}
.fb-alert-actions.is-stacked {
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid #eee;
	padding: 14px;
}
.fb-alert-actions.is-stacked .fb-alert-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
}
.fb-alert-actions.is-stacked .fb-alert-btn.is-primary {
	background: #222;
	color: #fff;
}
.fb-alert-actions.is-stacked .fb-alert-btn.is-primary:hover { background: #111; }
.fb-alert-actions.is-stacked .fb-alert-btn.is-secondary {
	background: #fff;
	color: #333;
	border-color: #ddd;
}
.fb-alert-actions.is-stacked .fb-alert-btn.is-secondary:hover {
	background: #f5f5f5;
	border-color: #ccc;
}
.fb-alert-btn-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}
.fb-alert-btn-icon svg { width: 16px; height: 16px; }
.fb-alert-btn-label { display: inline-block; }

/* fb-confirm — 제목 + 본문 + 우측 두 버튼 모달 (window.fbConfirm 용) */
.fb-confirm-popup {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
	background: #fff;
	border-radius: 8px;
	width: 440px;
	max-width: calc(100vw - 32px);
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
	overflow: hidden;
}
.fb-confirm-head {
	padding: 14px 18px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fb-confirm-title {
	font-weight: 700;
	font-size: 14px;
	color: #222;
}
.fb-confirm-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: #666;
	padding: 0 4px;
}
.fb-confirm-body {
	padding: 20px;
	font-size: 13px;
	color: #333;
	line-height: 1.7;
	white-space: normal;
}
.fb-confirm-foot {
	padding: 12px 16px;
	border-top: 1px solid #eee;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	background: #fafafa;
}
.fb-confirm-btn {
	padding: 8px 18px;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
}
.fb-confirm-btn.is-cancel {
	background: #fff;
	color: #222;
	border: 1px solid #ccc;
	font-weight: 500;
}
.fb-confirm-btn.is-cancel:hover { background: #f5f5f5; }
.fb-confirm-btn.is-ok {
	background: #222;
	color: #fff;
	border: none;
	font-weight: 600;
}
.fb-confirm-btn.is-ok:hover { background: #111; }

/* 봉투 접착가공 해제 확인 모달 — 예/아니요 두 버튼 */
.env-gluing-confirm-dim {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35); z-index: 8999;
}
.env-gluing-confirm-popup {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 9000; width: min(360px, calc(100vw - 32px));
	background: var(--fb-color_bg_white);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
	overflow: hidden;
}
.env-gluing-confirm-body {
	padding: 28px 24px;
	font-size: 15px;
	font-weight: 500;
	color: var(--fb-color_text_primary);
	text-align: center;
	line-height: 1.6;
}
.env-gluing-confirm-actions {
	display: flex;
	border-top: 1px solid #eee;
}
.env-gluing-confirm-btn {
	flex: 1;
	padding: 14px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	background: var(--fb-color_bg_white);
}
.env-gluing-confirm-no {
	color: var(--fb-color_text_secondary);
	border-right: 1px solid #eee;
}
.env-gluing-confirm-no:hover { background: #f5f5f5; }
.env-gluing-confirm-yes {
	background: var(--fb-color_text_primary);
	color: var(--fb-color_bg_white);
}
.env-gluing-confirm-yes:hover { background: #111; }

/* 해제불가(.is-locked-on) 토글 — 흰 배경 + #ededed 라인/점. */
.opt-post-section.is-locked-on.is-active .opt-post-toggle,
.opt-post-section.is-locked-on .opt-post-toggle {
	background: #fff !important;
	border: 1px solid #ededed !important;
	box-sizing: border-box;
	cursor: not-allowed;
}
.opt-post-section.is-locked-on.is-active .opt-post-toggle::after,
.opt-post-section.is-locked-on .opt-post-toggle::after {
	background: #ededed !important;
	box-shadow: none;
	width: 15px !important;
	height: 15px !important;
	top: 50% !important;
	left: auto !important;
	right: 2px !important;
	transform: translateY(-50%) !important;
}

/* 자동 잠금 (.is-design-locked) — 디자인 파일의 레이어로 자동 활성된 후가공.
   흰 바탕 + #ededed 라인/점, cursor pointer (모달 통한 해제 가능). */
.opt-post-section.is-design-locked.is-active .opt-post-toggle,
.opt-post-section.is-design-locked .opt-post-toggle {
	background: #fff !important;
	border: 1px solid #ededed !important;
	box-sizing: border-box;
	cursor: pointer;
}
.opt-post-section.is-design-locked.is-active .opt-post-toggle::after,
.opt-post-section.is-design-locked .opt-post-toggle::after {
	background: #ededed !important;
	box-shadow: none;
	width: 15px !important;
	height: 15px !important;
	top: 50% !important;
	left: auto !important;
	right: 2px !important;
	transform: translateY(-50%) !important;
}

/* 상품크기 입력폼 강조 */
.size-highlight {
	border-color: var(--fb-color_text_primary) !important;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.15) !important;
}
/* 절수 레이어 팝업 — 몸통. 창의 모서리·그림자·머리 줄은 모달 시스템(.paper-cut-popup-wrap = 대화상자,
 * .paper-cut-popup-head = 머리)이 맡는다. 몸통에 그림자를 두면 머리 줄 밑으로 번진다. */
.paper-cut-popup {
	max-height: 80vh;
	background: var(--fb-color_bg_white);
	display: flex;
	flex-direction: column;
}
.paper-cut-popup-title {
	flex: 1 1 auto;
	min-width: 0;
}
.paper-cut-popup-svg {
	flex-shrink: 0;
	height: 440px;
	padding: 12px;
	border-bottom: none;
	background: var(--fb-color_bg_subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.paper-cut-popup-svg svg {
	width: 100%;
	height: 100%;
}
.paper-cut-popup-list {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
/* 절수 항목 (팝업/공통) */
.paper-spec-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 13px;
	color: #555;
	transition: background 0.12s;
}
.paper-spec-item:hover { background: #f5f5f5; }
.paper-spec-item.is-selected { background: var(--fb-color_bg_section); }
/* 다건 모드: 면수 < 건수 인 옵션 — 분할작업 필요 (흐림 처리, 클릭은 가능하지만 비추천) */
.paper-spec-item.is-insufficient { opacity: 0.55; }
.paper-spec-item.is-insufficient:hover { opacity: 0.75; background: #fafafa; }
.paper-spec-radio {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 2px solid var(--fb-color_border_default);
	flex-shrink: 0;
	position: relative;
	transition: all 0.15s;
}
.paper-spec-item.is-selected .paper-spec-radio {
	border-color: var(--fb-color_text_primary);
	background: var(--fb-color_text_primary);
}
.paper-spec-item.is-selected .paper-spec-radio::after {
	content: '';
	position: absolute;
	width: 6px; height: 10px;
	border-right: 2px solid var(--fb-color_bg_white);
	border-bottom: 2px solid var(--fb-color_bg_white);
	top: 2px; left: 5px;
	transform: rotate(45deg);
}
.paper-spec-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.paper-spec-price {
	font-weight: 600;
	color: var(--fb-color_text_primary);
	white-space: nowrap;
}
.paper-spec-badge {
	font-size: 11px;
	font-weight: 700;
	color: var(--fb-color_bg_white);
	background: #e65100;
	padding: 2px 6px;
	border-radius: 3px;
	white-space: nowrap;
	flex-shrink: 0;
}
/* 인쇄 방법 추천 배지 */
.print-recommend-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: var(--fb-color_bg_white);
	background: #e65100;
	padding: 1px 6px;
	border-radius: 3px;
	margin-right: 4px;
	vertical-align: middle;
}
/* 본문 박스 description — "\n" 줄바꿈 표시 + 자연 줄바꿈 모두 허용 (인쇄/종이 공용)
   pre-line: \n 을 줄바꿈으로 처리 + 단어 단위 자연 줄바꿈 허용. (이전 normal 은 \n 무시)
   print_none_desc_guide 등 멀티라인 설명 노출에 필수. */
.opt-print-body-card .opt-header-selected-desc,
.opt-paper-body-card .opt-header-selected-desc {
	white-space: pre-line;
}
/* 배지가 인쇄 이름(.opt-header-print-name) 앞으로 prepend — 인라인 정렬 */
.opt-header-print-name > .print-recommend-badge {
	margin-right: 6px;
	vertical-align: middle;
}
.print-rec-reason {
	font-size: 12px;
	color: #e65100;
	margin-top: 4px;
	line-height: 1.5;
}
.print-est-cost {
	font-size: 13px;
	font-weight: 400;            /* 600 → 400 (얇게) */
	color: var(--fb-color_text_secondary);
	margin-top: 8px;             /* 위 메시지와 간격 띄우기 */
	line-height: 1.4;
}
.print-est-cost.is-estimate {
	color: var(--fb-color_text_muted);
	font-weight: 400;
}
.opt-select-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--fb-color_text_muted);
	border: 1px solid var(--fb-color_border_default);
	padding: 4px 10px;
	border-radius: 3px;
}
.opt-select-link:hover {
	color: var(--fb-color_text_primary);
	border-color: var(--fb-color_text_muted);
}

/* 옵션 선택 완료 상태 */
.opt-detail-card {
	display: flex;
	gap: 14px;
	padding-bottom: 14px;
	margin-bottom: 0;
	border-bottom: 1px solid var(--fb-color_border);
}
.opt-detail-img {
	width: 80px;
	height: 80px;
	background: var(--fb-color_bg_section);
	border: 1px solid var(--fb-color_border);
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.opt-detail-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin-bottom: 6px;
}
.opt-radio-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--fb-color_text_primary);
	position: relative;
}
.opt-radio-dot::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fb-color_text_primary);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.opt-detail-desc {
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_secondary);
	line-height: 1.6;
	margin-bottom: 8px;
}
.opt-detail-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--fb-color_text_muted);
	border: 1px solid var(--fb-color_border_default);
	padding: 4px 10px;
	border-radius: 3px;
}
.opt-detail-link:hover {
	color: var(--fb-color_text_primary);
	border-color: var(--fb-color_text_muted);
}
.opt-reselect {
	padding: 0;
	text-align: center;
	background: var(--fb-color_bg_subtle);
	border-top: 1px solid var(--fb-color_border);
	margin: 16px -16px -16px;
}
.opt-reselect a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 40px;
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
}
.opt-reselect a:hover {
	color: var(--fb-color_text_primary);
	background: var(--fb-color_bg_section);
}
.opt-detail-row {
	display: flex;
	align-items: center;
	padding: 10px 0;
	gap: 14px;
	border-bottom: 1px solid var(--fb-color_bg_section);
}
.opt-detail-row:last-child {
	border-bottom: none;
}
.opt-row-label {
	font-size: 12px;
	font-weight: 600;
	color: #888;
	width: 65px;
	flex-shrink: 0;
	text-align: right;
	letter-spacing: -0.02em;
}
.opt-row-value {
	font-size: 13px;
	font-weight: 400;
	color: #555;
	line-height: 1.5;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.color-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;                       /* 32 → 40 (피그마 11:901 등) */
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--fb-color_border_default);
	cursor: pointer;
	transition: all 0.15s;
	position: relative;
	overflow: hidden;
}
.color-chip:hover {
	transform: scale(1.08);
	box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.color-chip.is-selected {
	border-color: transparent;
	box-shadow: 0 0 0 2.5px var(--fb-color_bg_white), 0 0 0 4.5px #1b2631;   /* 다크 네이비 */
	transform: scale(1.05);
}
.color-chip.is-selected::after {
	content: '✓';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--fb-color_bg_white);
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.15);
	border-radius: 50%;
}
.color-chip-label {
	display: none;
}
/* 무색(무박) 옵션 - 알약형 — 피그마 11:908 (h 40, white bg, ddd border, rounded full) */
.color-chip.color-chip-nofoil {
	width: auto;
	min-width: 40px;
	height: 40px;
	border-radius: 100px;
	padding: 0 15px;
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_border_default);
}
.color-chip.color-chip-nofoil .color-chip-label {
	display: inline;
	font-size: 13px;
	font-weight: 300;
	color: var(--fb-color_text_primary);
	white-space: nowrap;
	letter-spacing: -0.2px;
}
.color-chip.color-chip-nofoil:hover {
	background: var(--fb-color_bg_subtle);
	border-color: var(--fb-color_text_muted);
}
.color-chip.color-chip-nofoil.is-selected {
	background: var(--fb-color_bg_white);
	border: 1.5px solid #1b2631;
	box-shadow: 0 0 0 2px var(--fb-color_bg_white), 0 0 0 3.5px #1b2631;
}
.color-chip.color-chip-nofoil.is-selected::after {
	content: none;
}
.gold-color-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
/* 무색 옵션 구분점 */
.color-chip-divider {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--fb-color_text_disabled);
	flex-shrink: 0;
	margin: 0 2px;
}
/* 상품정보 입력 폼 */
.upload-form-group {
	margin-bottom: 14px;
}
.upload-form-group:last-child {
	margin-bottom: 0;
}
.upload-form-label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin-bottom: 15px;
	line-height: 1.2;
}
.upload-form-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.upload-form-x {
	font-size: 13px;
	color: var(--bj-muted, #66635e);
}
.upload-form-unit {
	font-size: 13px;
	color: var(--fb-color_text_secondary);
}
.upload-form-select {
	flex: 1;
	max-width: 200px;
	padding: 10px 32px 10px 14px;
	font-size: 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	min-height: 40px;
	background: var(--fb-color_bg_white) url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
	color: var(--fb-color_text_primary);
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.upload-form-select:hover { border-color: var(--fb-color_text_muted); }
.upload-form-select:focus { border-color: var(--fb-color_text_secondary); outline: none; }
/* .btn-download-unified 와 .btn-editor-launch 모두 .btn-fb-design 으로 일원화 (피그마 통일).
   별도 컬러/사이즈 정의 제거 — .btn-fb-design 이 단일 소스. */
.btn-download-unified svg path { stroke: currentColor; }

/* 제작 가이드 파일 다운로드 (상품 정보 카드 안) */
.upload-guide-section {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--fb-color_bg_section);
}
.btn-guide-download {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 14px;
	border: 1px dashed #d0d0d0;
	border-radius: 6px;
	background: var(--fb-color_bg_subtle);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s;
}
.btn-guide-download:hover {
	border-color: var(--fb-color_brand_accent);
	background: #fff8f0;
}
.btn-guide-download:hover svg path { stroke: var(--fb-color_brand_accent); }
.btn-guide-download svg { flex-shrink: 0; opacity: 0.5; }
.btn-guide-download:hover svg { opacity: 1; }
.guide-download-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--fb-color_text_secondary);
}
.btn-guide-download:hover .guide-download-text { color: var(--fb-color_brand_accent); }
.guide-download-desc {
	font-size: 11px;
	color: #aaa;
}
.guide-download-desc:empty {
	display: none;
}

/* 인쇄 파일 업로드 (인쇄 섹션 내부) */
.opt-header-print-upload {
	width: 100%;
	padding: 4px 16px 14px;
}
.opt-header-print-upload .opt-sub-divider {
	margin: 0 0 12px;
}
.print-file-upload-area {
	position: relative;
}
.print-file-dropzone {
	border: 1px dashed #d0d0d0;
	border-radius: 6px;
	padding: 16px 12px;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.2s;
	width: 100%;
}
.print-file-dropzone:hover,
.print-file-upload-area.drag-over .print-file-dropzone {
	border-color: var(--fb-color_brand_accent);
	background: #fff8f0;
}
.print-file-dropzone svg { opacity: 0.4; }
.print-file-dropzone:hover svg { opacity: 0.7; }
.print-file-dropzone-text {
	font-size: 12px;
	color: var(--fb-color_text_muted);
}
.print-file-result {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 10px 12px;
	background: var(--fb-color_bg_subtle);
}
.print-file-info {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--fb-color_text_primary);
	flex-wrap: wrap;
}
.layer-status {
	flex-basis: 100%;
	margin-left: 0 !important;
	margin-top: 4px;
}

/* 인쇄 파일 분석 결과 */
.print-analysis-info {
	flex-basis: 100%;
	margin-top: 6px;
	padding: 6px 8px;
	background: #f8f9fa;
	border-radius: 4px;
	font-size: 11px;
	color: #555;
}
.print-analysis-side {
	line-height: 1.6;
}
.print-analysis-label {
	font-weight: 600;
	color: var(--fb-color_text_primary);
}
.print-analysis-beda {
	display: inline-block;
	background: #fff3e0;
	color: #e65100;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 5px;
	border-radius: 3px;
	border: 1px solid #ffcc80;
}

/* UV 앞면/뒷면 파일 업로드 — 위쪽 .divider-or 가 구분선 역할을 하므로 자체 border 없음.
   내부 상단에 '템플릿 가이드 다운로드' 버튼, 그 아래 앞면/뒷면 dropzone 이 배치. */
.uv-file-section {
	margin: 0 16px;
	padding: 6px 0 20px;
}

/* "or" 중앙 텍스트를 가진 수평 구분선 — .editor-launch 아래, .uv-file-section 위에 위치. */
.divider-or {
	display: flex;
	align-items: center;
	margin: 0 16px;
	font-size: 12px;
	color: var(--fb-color_text_muted);
	user-select: none;
}
.divider-or::before,
.divider-or::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #eee;
}
.divider-or > span {
	padding: 0 12px;
	white-space: nowrap;
	letter-spacing: 0.5px;
	text-transform: lowercase;
}
.uv-side-uploads {
	display: flex;
	gap: 44px;
	position: relative;
}
.opt-header-uv-row {
	position: relative;
}
/* 두 dropzone 사이 dashed 세로선 — 피그마 적용 후 불필요 (각 카드 자체 보더로 분리됨) */
.uv-file-section.has-both-sides .uv-side-uploads::after {
	display: none;
}
.uv-side-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.uv-side-col .opt-sub-select {
	margin-top: 6px;
	width: 100%;
	box-sizing: border-box;
}
.uv-side-upload {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.uv-side-uploads {
	align-items: stretch;
}
/* 앞면/뒷면 드롭존 — 앞면 BLUE 기본(우선순위), 뒷면 GRAY 기본(피그마)
   호버/업로드 시: 둘 다 BLUE 활성 표시 */
.uv-side-dropzone {
	background: var(--fb-color_bg_subtle);
	border: 2px dashed #e5e5e5;          /* 기본: 회색 점선 */
	border-radius: 3px;
	height: 150px;
	padding: 12px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.2s;
	box-sizing: border-box;
}
/* 앞면(primary) — 기본 블루 점선 (먼저 해야 한다는 시각 신호), 배경은 회색 */
.uv-side-col:not(.uv-side-col-back) .uv-side-dropzone {
	border-color: var(--fb-color_brand_primary);
	background: var(--fb-color_bg_subtle);
	flex-wrap: wrap;
	row-gap: 6px;
	align-content: center;
}
.uv-side-col:not(.uv-side-col-back) .uv-side-dropzone .uv-side-label,
.uv-side-col:not(.uv-side-col-back) .uv-side-dropzone .uv-side-dropzone-icon {
	color: var(--fb-color_brand_primary);
}
/* 뒷면(secondary) — 기본 회색 라벨/아이콘 */
.uv-side-col-back .uv-side-dropzone .uv-side-label,
.uv-side-col-back .uv-side-dropzone .uv-side-dropzone-icon {
	color: var(--fb-color_text_muted);
	transition: color 0.2s;
}
/* 호버 / drag-over / 업로드 완료 시: 블루 활성 (양쪽 모두) — 앞면 셀렉터보다 specificity 높게 */
.uv-side-col .uv-side-dropzone:hover,
.uv-side-col .uv-side-dropzone.drag-over,
.uv-side-col .uv-side-upload.has-file .uv-side-dropzone,
.uv-file-section.front-uploaded .uv-side-col-back .uv-side-dropzone {
	border-color: var(--fb-color_brand_primary);
	background: #f5f8ff;
}
.uv-side-col-back .uv-side-dropzone:hover .uv-side-label,
.uv-side-col-back .uv-side-dropzone:hover .uv-side-dropzone-icon,
.uv-side-col-back .uv-side-dropzone.drag-over .uv-side-label,
.uv-side-col-back .uv-side-dropzone.drag-over .uv-side-dropzone-icon,
.uv-side-col-back.has-file .uv-side-dropzone .uv-side-label,
.uv-side-col-back.has-file .uv-side-dropzone .uv-side-dropzone-icon,
.uv-file-section.front-uploaded .uv-side-col-back .uv-side-dropzone .uv-side-label,
.uv-file-section.front-uploaded .uv-side-col-back .uv-side-dropzone .uv-side-dropzone-icon {
	color: var(--fb-color_brand_primary);
}
.uv-side-label {
	font-size: 14px;
	font-weight: 300;
	color: var(--fb-color_text_muted);                  /* 기본: 회색 (호버/업로드 시 블루로 변경) */
	letter-spacing: 0;
	line-height: 1.2;
	transition: color 0.2s;
}
.uv-side-result .uv-side-label {
	display: block;
	margin-bottom: 6px;
}
.uv-side-dropzone:hover,
.uv-side-dropzone.drag-over {
	border-color: var(--fb-color_brand_primary);
	background: #f5f8ff;
}
.uv-side-dropzone svg { opacity: 1; }
.uv-side-dropzone-text {
	font-size: 14px;
	color: var(--fb-color_brand_primary);
	font-weight: 300;
}
/* "업로드" 화살표 아이콘 — 피그마 dropzone: 위로 향하는 화살표 + "앞면 업로드" 텍스트 가로 배치 */
.uv-side-dropzone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fb-color_brand_primary);
	transition: color 0.15s ease, transform 0.15s ease;
}
.uv-side-dropzone-icon svg { width: 20px; height: 20px; }
.uv-side-dropzone-icon svg path,
.uv-side-dropzone-icon svg polyline,
.uv-side-dropzone-icon svg line { stroke: currentColor; }
.uv-side-dropzone:hover .uv-side-dropzone-icon {
	color: #2a55cc;
	transform: translateY(-2px);
}

/* PDF · AI 포맷 힌트 — 기본 숨김 (뒷면 등) / 앞면 dropzone 에서만 라벨 아래로 노출 */
.uv-side-format-hint {
	display: none;
	font-size: 11px;
	font-weight: 600;
	color: #aaa;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	transition: color 0.15s ease;
}
.uv-side-col:not(.uv-side-col-back) .uv-side-dropzone .uv-side-format-hint {
	display: block;
	flex-basis: 100%;
	width: 100%;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0.2px;
	text-transform: none;
}
.uv-side-dropzone:hover .uv-side-format-hint { color: var(--fb-color_brand_accent); }

/* 디자인 세트 카드 리스트 — 4장 이상이면 스크롤. 헤더(.fb-design-sets-header) 의
   border-bottom 구분선은 항상 보이도록 헤더 자체는 스크롤 컨테이너 밖에 둠. */
.fb-design-sets-list {
	max-height: 640px;
	overflow-y: auto;
	padding-right: 6px;
}

.uv-side-dropzone.is-analyzing {
	border-style: solid;
	border-color: #2563eb;
	background: #f5f8ff;
	cursor: default;
	gap: 0;
	padding: 16px 10px;
	pointer-events: none;   /* 진행 중에는 클릭으로 file picker 재오픈 방지 */
}
.uv-side-dropzone.is-analyzing .uv-side-label,
.uv-side-dropzone.is-analyzing .uv-side-dropzone-icon,
.uv-side-dropzone.is-analyzing .uv-side-format-hint,
.uv-side-dropzone.is-analyzing .uv-side-dropzone-text,
.uv-side-dropzone.is-analyzing > svg {
	display: none !important;
}
/* ── spinner ── */
@keyframes uv-spin { to { transform: rotate(360deg); } }
@keyframes uv-pulse { 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
.uv-side-progress {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.uv-side-progress-spinner {
	width: 28px;
	height: 28px;
	border: 2.5px solid #d6e4ff;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: uv-spin 0.8s linear infinite;
}
.uv-side-progress-step {
	font-size: 12px;
	font-weight: 600;
	color: #2563eb;
	animation: uv-pulse 1.8s ease-in-out infinite;
}
.uv-side-progress-bar-track {
	width: 100%;
	height: 3px;
	background: #d6e4ff;
	border-radius: 2px;
	overflow: hidden;
}
.uv-side-progress-bar-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #2563eb, #60a5fa);
	border-radius: 2px;
	transition: width 0.3s ease;
}
.uv-side-progress-meta {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 10px;
	color: #99aacc;
}
.uv-side-progress-filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 70%;
}
.uv-side-dropzone.has-error {
	border-color: #e57373;
	background: #fff5f5;
}
.uv-side-page-error {
	font-size: 11px;
	color: #d32f2f;
	text-align: center;
	line-height: 1.5;
}
/* 업로드 완료 — 가로 스크롤 썸네일 카드 컨테이너 */
.uv-side-result {
	border: 1px solid #d0d7e6;
	border-radius: 4px;
	padding: 10px 10px 10px;
	background: var(--fb-color_bg_white);
	flex: 1;
	box-sizing: border-box;
	position: relative;
}
.uv-side-result-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding-right: 24px;
	font-size: 12px;
	color: #555;
	min-height: 18px;
}
.uv-side-result-head .uv-side-label {
	font-weight: 600;
	color: #2563eb;
	font-size: 12px;
	margin: 0;
}
.uv-side-result-summary {
	color: var(--fb-color_text_muted);
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}
.uv-side-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	background: rgba(255,255,255,0.9);
	border: 1px solid #e3e3e3;
	border-radius: 50%;
	color: #777;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}
.uv-side-remove:hover { color: #d32f2f; border-color: #d32f2f; }

/* 가로 스크롤 썸네일 트랙 */
.uv-side-thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--fb-color_text_disabled) transparent;
	scroll-snap-type: x proximity;
}
.uv-side-thumbs::-webkit-scrollbar { height: 6px; }
.uv-side-thumbs::-webkit-scrollbar-thumb { background: var(--fb-color_text_disabled); border-radius: 3px; }
.uv-side-thumbs::-webkit-scrollbar-track { background: transparent; }

.uv-thumb-card {
	flex: 0 0 88px;
	width: 88px;
	min-width: 88px;
	max-width: 88px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	scroll-snap-align: start;
	overflow: hidden;
}
.uv-thumb-img-wrap {
	display: block;
	width: 88px;
	height: 88px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: var(--fb-color_bg_subtle);
	overflow: hidden;
	cursor: zoom-in;
	position: relative;
}
.uv-thumb-img-wrap:hover { border-color: #2563eb; }
.uv-thumb-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.uv-thumb-img-wrap.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bbb;
	font-size: 11px;
	cursor: default;
}
.uv-thumb-img-wrap.is-empty:hover { border-color: #e5e5e5; }
.uv-thumb-tag {
	position: absolute;
	top: 4px;
	left: 4px;
	background: rgba(37,99,235,0.9);
	color: var(--fb-color_bg_white);
	font-size: 9px;
	font-weight: 600;
	padding: 2px 5px;
	border-radius: 2px;
	line-height: 1.2;
	letter-spacing: 0;
}
.uv-thumb-tag.unmatched { background: rgba(150,150,150,0.85); }
.uv-thumb-tag.empty { background: rgba(220,220,220,0.95); color: #888; }
.uv-thumb-info {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: #555;
	line-height: 1.3;
	width: 100%;
	min-width: 0;
}
.uv-thumb-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.uv-thumb-dl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: #888;
	flex-shrink: 0;
}
.uv-thumb-dl:hover { color: #2563eb; }
.uv-thumb-dl svg { width: 12px; height: 12px; }
.uv-thumb-measure {
	display: block;
	font-size: 9px;
	color: #aaa;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 12px;     /* 측정값 없을 때도 카드 높이 동일하게 */
}

/* 스탬프 크기 불일치 경고 레이어 팝업 */
#stampSizeWarnLayer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: none;
}
#stampSizeWarnLayer .ssw-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
}
#stampSizeWarnLayer .ssw-box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--fb-color_bg_white);
	border-radius: 10px;
	padding: 28px 28px 18px;
	box-shadow: 0 12px 48px rgba(0,0,0,0.25);
	min-width: 320px;
	max-width: 90vw;
	text-align: center;
}
#stampSizeWarnLayer .ssw-msg {
	font-size: 15px;
	color: var(--fb-color_text_primary);
	line-height: 1.6;
	margin: 0 0 20px;
}
#stampSizeWarnLayer .ssw-msg strong { color: var(--fb-color_brand_accent); font-weight: 700; }
#stampSizeWarnLayer .ssw-btn {
	display: block;
	width: 100%;
	height: 44px;
	background: #1b2631;
	color: var(--fb-color_bg_white);
	border: 0;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
#stampSizeWarnLayer .ssw-btn:hover { background: #243240; }

/* 라이트박스 모달 */
.uv-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.85);
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	cursor: zoom-out;
}
.uv-lightbox.is-open { display: flex; }
.uv-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
	background: var(--fb-color_bg_white);
	cursor: default;
}
.uv-lightbox-caption {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--fb-color_bg_white);
	font-size: 13px;
	background: rgba(0,0,0,0.6);
	padding: 6px 14px;
	border-radius: 20px;
	max-width: 80%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.uv-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.15);
	border: 0;
	border-radius: 50%;
	color: var(--fb-color_bg_white);
	font-size: 22px;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.uv-lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* 기존 분석 텍스트 — 호환용 (사용 안 함) */
.uv-side-file-info,
.uv-side-filename,
.uv-side-analysis { display: none; }
.beda-reason {
	font-size: 11px;
	color: #e65100;
}
/* 별색 경고 */
.spot-color-warning {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	background: #fff3e0;
	border: 1px solid #ffb74d;
	border-radius: 4px;
	padding: 8px 12px;
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: #bf360c;
}
.spot-color-warning strong {
	color: #e65100;
	font-weight: 700;
}

.uv-layer-download-area {
	margin-top: 14px;
	padding-top: 0;
}
.uv-layer-columns {
	display: flex;
	gap: 16px;
}
.uv-layer-col {
	flex: 1;
	min-width: 0;
}
.uv-layer-side-label {
	font-size: 12px;
	font-weight: 600;
	color: #555;
	margin: 0 0 3px;
}
.uv-layer-analysis-detail {
	font-size: 11px;
	color: #888;
	margin: 0 0 8px;
	line-height: 1.5;
}

/* 베다인쇄 체크박스 */
.opt-sub-beda-row {
	padding: 0 2px;
}
.opt-beda-label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 12px;
	color: #555;
}
.opt-beda-check {
	margin: 0;
	accent-color: var(--fb-color_brand_accent);
}
.opt-beda-text {
	user-select: none;
}
.opt-beda-notice {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	font-size: 11px;
	color: #e65100;
}

/* 레이어 분석 진행 - 드롭존 내부 */
.print-file-dropzone.is-analyzing {
	cursor: default;
	border-color: var(--fb-color_brand_accent);
	background: #fffaf5;
	flex-direction: column;
	padding: 14px 16px;
}
.print-file-dropzone.is-analyzing:hover {
	border-color: var(--fb-color_brand_accent);
	background: #fffaf5;
}
.layer-progress {
	width: 100%;
	font-size: 11px;
	color: #888;
}
.layer-progress-bar-wrap {
	width: 100%;
	height: 4px;
	background: #eee;
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 6px;
}
.layer-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--fb-color_brand_accent), #f5a623);
	border-radius: 2px;
	transition: width 0.3s ease-out;
}
.layer-progress-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.layer-progress-text {
	color: var(--fb-color_text_muted);
	font-size: 11px;
}
.layer-progress-time {
	color: #bbb;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* 레이어 다운로드 목록 */
.layer-download-list {
	margin-top: 10px;
	border-top: 1px solid #eee;
	padding-top: 6px;
}
.layer-dl-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	border-radius: 4px;
	font-size: 12px;
	color: var(--fb-color_text_primary);
	text-decoration: none;
	transition: background 0.15s;
	cursor: pointer;
}
.layer-dl-item:hover {
	background: #f5f5f5;
}
.layer-dl-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	color: var(--fb-color_text_secondary);
	background: var(--fb-color_bg_section);
	padding: 1px 6px;
	border-radius: 3px;
	white-space: nowrap;
	flex-shrink: 0;
	min-width: 56px;
	text-align: center;
}
.layer-dl-tag.unmatched {
	color: #888;
	background: var(--fb-color_bg_section);
}
.layer-dl-tag.empty {
	color: var(--fb-color_text_muted);
	background: #f5f5f5;
	border: 1px dashed var(--fb-color_text_disabled);
}
.layer-dl-empty {
	cursor: default;
	opacity: 0.65;
}
.layer-dl-empty:hover {
	background: transparent;
}
.layer-dl-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.layer-dl-measure {
	flex-shrink: 0;
	font-size: 10px;
	color: #888;
	white-space: nowrap;
	margin-left: auto;
	padding: 0 4px;
}
.layer-dl-icon {
	flex-shrink: 0;
	color: #bbb;
	transition: color 0.15s;
}
.layer-dl-item:hover .layer-dl-icon {
	color: #888;
}
/* 후가공 내 레이어 다운로드 링크 */
.layer-dl-link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 14px;
	color: var(--fb-color_text_secondary);
	text-decoration: none;
	transition: color 0.15s;
}
.layer-dl-link:hover {
	color: var(--fb-color_text_primary);
	text-decoration: underline;
}
.layer-dl-link svg {
	flex-shrink: 0;
	opacity: 0.7;
}
.layer-dl-link:hover svg {
	opacity: 1;
}
.print-file-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}
.btn-print-file-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: none;
	background: none;
	color: #bbb;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	transition: all 0.15s;
	flex-shrink: 0;
}
.btn-print-file-remove:hover {
	color: var(--fb-color_brand_accent);
	background: #fff3e8;
}

/* 필수 선택 경고 상태 — 이제 :not(.selected) 스타일로 대체 */
}

@media (max-width: 640px) {
	.upload-form-select { max-width: 100%; }
	.upload-form-row { flex-wrap: wrap; }
}
.opt-size-input {
	width: 80px;
	padding: 0 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	font-size: 14px;
	color: var(--fb-color_text_primary);
	text-align: center;
	height: 50px;
	min-height: 50px;
	background: var(--fb-color_bg_white);
	transition: border-color 0.15s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.opt-size-input:hover {
	border-color: var(--fb-color_text_muted);
}
.opt-size-input:focus {
	border-color: var(--fb-color_text_secondary);
	outline: none;
}
/* 자유형 페이지 진입 시 크기 미입력 — 비포커스: 기본(흰 배경) / 포커스: 단일 파란 테두리 (글로우 없음) */
.opt-size-input.is-size-required:focus {
	border-color: var(--fb-color_brand_primary, #1565c0);
	box-shadow: none;
	outline: none;
}
.size-input-hint {
	display: none;
	position: absolute;
	left: 0;
	bottom: calc(100% + 6px);
	font-size: 11px;
	color: var(--fb-color_brand_accent);
	background: var(--fb-color_bg_white);
	padding: 5px 12px;
	border-radius: 4px;
	border: 1px solid #f0d9b5;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	white-space: nowrap;
	z-index: 10;
}
.size-input-hint.show {
	display: block;
}

/* ===== Order Summary (Sidebar) ===== */
.order-summary {
	border: 1px solid var(--fb-color_border);
	border-radius: 5px;
	padding: 20px;
	background: var(--fb-color_bg_white);
}
/* 주문 내용 헤더 (제목 + 초기화 버튼) — 피그마 11:633 */
.order-summary-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--fb-color_bg_section);
}
.order-summary-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 1.2;
	margin: 0;
}
.order-qty-wrap {
	position: relative;
	margin-bottom: 16px;
}
.order-qty-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	height: 50px;
	min-height: 50px;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	cursor: pointer;
	box-sizing: border-box;
}
.order-qty-box:hover {
	border-color: var(--fb-color_text_muted);
}
.order-qty-box.is-open {
	border-color: var(--fb-color_text_primary);
}
.order-qty-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}
.order-qty-value.placeholder {
	font-weight: 400;
	color: var(--fb-color_text_muted);
}
.order-qty-arrow {
	display: flex;
	align-items: center;
	transition: transform 0.2s;
}
.order-qty-box.is-open .order-qty-arrow {
	transform: rotate(180deg);
}
.order-qty-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	z-index: 1000;
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain;   /* 내부 스크롤 끝에서 외부로 스크롤 전파 방지 */
}
/* 펼친 dropdown 이 다음 섹션 (종이 선택 등) 카드에 가려지는 현상 방지.
   원인: content-main 의 자식 content-left(부수영역) 가 z:auto 라 DOM 후순위 option-area 가 위에 그려짐.
   해결: content-left 에 stacking 우위 부여 + 그 안의 wrap z:1000 효과 살림. */
.content-left {
	position: relative;
	z-index: 1;
}
.order-qty-wrap {
	position: relative;
}
.order-qty-wrap.has-open {
	z-index: 1001;
}
.order-qty-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
}
.order-qty-list li {
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	cursor: pointer;
	white-space: nowrap;
}
.order-qty-list li:hover {
	background: #f5f5f5;
}
.order-qty-list li.is-selected {
	background: #2979ff;
	color: var(--fb-color_bg_white);
	font-weight: 600;
}
.order-qty-list li.is-custom {
	color: var(--fb-color_text_secondary);
	border-bottom: 1px solid var(--fb-color_border);
}

/* 최소 수량 안내 레이어 */
#qtyAlertLayer {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.qty-alert-box {
	background: var(--fb-color_bg_white);
	border-radius: 8px;
	padding: 32px 28px 24px;
	text-align: center;
	min-width: 280px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.qty-alert-msg {
	font-size: 15px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	line-height: 1.5;
	margin-bottom: 24px;
}
.qty-alert-btn {
	width: 100%;
	height: 42px;
	background: #444;
	color: var(--fb-color_bg_white);
	border: none;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.qty-alert-btn:hover {
	background: var(--fb-color_text_primary);
}
.btn-reset-wrap {
	text-align: right;
	margin-bottom: 12px;
}
.btn-reset-order {
	display: none;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.btn-reset-order.is-visible {
	display: inline-flex;
}
.btn-reset-order span {
	font-size: 12px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
	line-height: 1;
}
.btn-reset-order:hover span {
	color: var(--fb-color_text_secondary);
}
.btn-reset-order:hover svg path {
	stroke: var(--fb-color_text_secondary);
}
.order-detail-list {
	display: flex;
	flex-direction: column;
}

.order-qty-input {
	width: 100%;
	border: none;
	background: transparent;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	outline: none;
	-moz-appearance: textfield;
}
.order-qty-input::-webkit-outer-spin-button,
.order-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.order-empty {
	padding: 30px 0;
	text-align: center;
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
}
.order-detail-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--fb-color_border);
}
.order-detail-row:first-child {
	border-top: 1px solid var(--fb-color_border);
}
.order-detail-label {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	line-height: 1.4;
}

.order-detail-area {
	display: block;
	margin-top: 3px;
	color: #757575;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}
.order-detail-price {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 1.4;
	text-align: right;
	white-space: nowrap;
}
/* ── 우측 패널 주문수량 — 좌측 부수 영역 가시 시 텍스트(라벨+값 분할), 스크롤 후 단일 셀렉트 박스로 통합 ── */
.order-detail-qty-text-label,
.order-detail-qty-text { display: inline; }
.order-detail-qty-dd   { display: none; }
body.fb-qty-detached .order-detail-row[data-key="design"] {
	padding: 12px 0 0 0;
	border-top: none;
	border-bottom: none;
}
/* 셀렉트박스 모드일 때 다음 row 의 border-top 도 중복되므로 첫 일반 row 가 자체 라인 그릴 수 있도록 둠 */
body.fb-qty-detached .order-detail-qty-text-label,
body.fb-qty-detached .order-detail-qty-text { display: none; }
body.fb-qty-detached .order-detail-qty-dd {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;   /* .order-qty-wrap 의 기본 margin-bottom:16px 무효화 */
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-box {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	background: var(--fb-color_bg_white);
	cursor: pointer;
	transition: border-color 0.15s;
	width: 100%;
	box-sizing: border-box;
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-box:hover,
body.fb-qty-detached .order-detail-qty-dd .order-qty-box.is-open {
	border-color: var(--fb-color_text_muted);
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-label {
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	flex: 1;
	text-align: left;
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-arrow {
	display: inline-flex;
	flex-shrink: 0;
	transition: transform 0.2s;
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-box.is-open .order-qty-arrow {
	transform: rotate(180deg);
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 280px;
	overflow-y: auto;
	background: var(--fb-color_bg_white);
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	z-index: 100;
	padding: 4px 0;
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-dropdown li {
	padding: 8px 14px;
	font-size: 13px;
	color: var(--fb-color_text_primary);
	cursor: pointer;
	white-space: nowrap;
	text-align: left;
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-dropdown li:hover {
	background: #f5f5f5;
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-dropdown li.is-selected {
	background: var(--fb-color_bg_section);
	font-weight: 600;
}
body.fb-qty-detached .order-detail-qty-dd .order-qty-dropdown li.is-custom {
	border-bottom: 1px solid var(--fb-color_border);
	color: var(--fb-color_text_secondary);
	font-size: 12px;
}
.order-detail-sub {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
	margin-top: 2px;
}
.order-detail-price.quote {
	font-size: 12px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
}
/* 가격 계산 진행 중 인디케이터 — worker 응답 대기 동안 가격 자리에 점멸 dot + "계산 중" 표시.
   renderOrderList 가 window._fbCalcPending=true 면 fb-price-loading span 을 가격 텍스트 대신 출력. */
.order-detail-price.calc-loading,
.order-total-price.calc-loading {
	color: var(--fb-color_text_muted, #888);
	font-weight: 500;
}
.fb-price-loading {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #888;
	font-size: 12px;
	font-weight: 500;
	font-style: italic;
}
.fb-price-loading-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid #ddd;
	border-top-color: #888;
	border-radius: 50%;
	animation: fb-price-loading-spin 0.7s linear infinite;
}
@keyframes fb-price-loading-spin { to { transform: rotate(360deg); } }
/* 총 결제 금액 자리에서 spinner 가 너무 작아 보이지 않게 약간 키움 */
.order-total-price.calc-loading .fb-price-loading {
	font-size: 14px;
	font-weight: 600;
}
.order-total-price.calc-loading .fb-price-loading-dot {
	width: 12px;
	height: 12px;
}
.order-detail-effect {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 500;
	color: #555;
	background: #f3f3f3;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	vertical-align: middle;
	white-space: nowrap;
}
.order-summary-line {
	display: none;
	height: 1px;
	background: var(--fb-color_border);
	margin: 10px 0;
}
.order-summary-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0 16px;
}
.order-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 120%;
}
.order-total-price {
	font-size: 16px;
	font-weight: 700;
	color: #e85a2c;
	line-height: 120%;
}
.order-label-wrap {
	display: inline;
}
.order-per-unit {
	display: inline;
	font-size: 11px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
	margin-left: 6px;
}
.order-per-unit:empty { display: none; }
.qty-per-unit {
	float: right;
	font-size: 12px;
	color: var(--fb-color_text_muted);
	font-weight: 400;
}
.btn-order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	background: #1b2631;
	border: none;
	border-radius: 3px;
	color: var(--fb-color_bg_white);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
	letter-spacing: -0.2px;
}
.btn-order:hover {
	background: #0f1820;
}
/* 주문 버튼은 항상 클릭 가능하다. 미완료 조건은 클릭 후 레이어에서 안내한다. */
.btn-order.is-disabled,
.mobile-btn-order.is-disabled {
	background: #1b2631;
	color: var(--fb-color_bg_white);
	cursor: pointer;
	pointer-events: auto;
	opacity: 1;
}
.btn-order.is-disabled:hover,
.mobile-btn-order.is-disabled:hover {
	background: #0f1820;
}

/* ===== Bottom Tab ===== */
.bottom-tab-wrap {
	margin-top: 50px;
}
.bottom-tab-bar {
	display: flex;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--fb-color_bg_white);
	margin-bottom: 20px;
}
.bottom-tab-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 50px;
	font-size: 14px;
	font-weight: 500;
	color: var(--fb-color_text_muted);
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border);
	margin-left: -1px;
	cursor: pointer;
	transition: all 0.2s;
}
.bottom-tab-item:first-child {
	margin-left: 0;
}
.bottom-tab-item:hover {
	color: var(--fb-color_text_primary);
	background: var(--fb-color_bg_section);
}
.bottom-tab-item.active {
	background: var(--fb-color_text_primary);
	border-color: var(--fb-color_text_primary);
	color: var(--fb-color_bg_white);
	font-weight: 600;
}
.bottom-tab-section {
	padding: 30px 0 50px;
	/* (2026-09-26 명함 상세 폰 로딩 4~5초 실측) 상세 아래쪽 긴 구역(실물 품질 사진·제작 안내)은 화면 가까이 오기 전에는 그리지 않는다.
	   그림은 모두 loading="lazy" 인데도, 첫 배치 때 페이지가 아직 짧아(템플릿 격자·옵션이 붙기 전) 크롬의 «곧 보일 그림» 범위에 들어
	   사진 8장(약 1.4MB)이 첫 화면의 템플릿 썸네일과 대역을 다퉜다(폰 4G 흉내: 막으면 격자 −1.1초 · LCP −0.7초).
	   auto 크기는 한 번 그린 뒤의 실제 높이를 기억한다 — 스크롤이 튀지 않게 첫 추정만 준다. */
	content-visibility: auto;
	contain-intrinsic-size: auto 1200px;
}
.section-head {
	text-align: center;
	color: var(--fb-color_text_primary);
	margin-bottom: 30px;
}
.section-head h2 {
	font-size: 30px;
	font-weight: 300;
	line-height: 1.2;
	margin-bottom: 16px;
}
.section-head p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}
.section-head-left {
	text-align: left;
}
.tab-inner {
	padding: 0 20px;
}

/* ===== 제작 설명 (Production Detail) ===== */
/* Hero */
.prod-hero {
	width: 100%;
	position: relative;
	height: 400px;
	overflow: hidden;
	border-radius: 3px;
}
.prod-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.prod-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.2);
}
.prod-hero-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	color: rgba(255,255,255,0.85);
	font-family: 'Georgia', serif;
	font-size: 42px;
	font-style: italic;
	letter-spacing: 2px;
}

/* WHY Factory B */
.prod-why {
	margin: 50px 0 0;
	display: flex;
	flex-direction: column;
	gap: 50px;
	align-items: center;
}
.prod-why-copy {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.prod-why-title {
	font-size: 36px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--fb-color_text_primary);
	letter-spacing: 1px;
}
.prod-why-subtitle {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fb-color_text_primary);
}
.prod-why-text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--fb-color_text_primary);
}

/* Feature Grid */
.prod-feature-box {
	width: 100%;
	padding: 0 40px;
}
.prod-feature-top {
	border-top: 1px solid var(--fb-color_border_default);
}
.prod-feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.prod-feature-item {
	height: 60px;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--fb-color_border_default);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.2;
}
.prod-feature-item:nth-child(odd) {
	border-right: 1px solid var(--fb-color_border_default);
}
.prod-feature-item svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Work Grid */
.prod-work-grid {
	margin: 50px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.prod-work-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}
.prod-work-visual {
	height: 300px;
	overflow: hidden;
	position: relative;
	border-radius: 3px;
	background: #f5f5f5;
}
.prod-work-visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.prod-work-label {
	position: absolute;
	left: 24px;
	top: 38px;
	transform: translateY(-50%);
	font-size: 13px;
	font-weight: 900;
	z-index: 2;
}
.prod-work-label.white { color: var(--fb-color_bg_white); }
.prod-work-label.dark { color: var(--fb-color_text_primary); }
.prod-work-text h3 {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 12px;
}
.prod-work-text p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}

/* Divider */
.prod-divider {
	width: 100%;
	margin: 50px 0 30px;
	border-top: 1px solid var(--fb-color_border);
}
#tab-review,
#tab-cs,
#tab-support:not(:first-child),
#tab-schedule {
	padding-top: 0;
}

/* Process Section */
.prod-process {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}
.prod-process .section-head,
.prod-paper .section-head {
	text-align: left;
}

/* Process Card Row */
.prod-process-row {
	display: flex;
	gap: 16px;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.prod-process-row::-webkit-scrollbar {
	display: none;
}
.prod-process-card {
	flex: 0 0 calc((100% - 64px) / 4.3);
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	cursor: grab;
	border: 1px solid transparent;
	transition: border-color 0.2s;
}
.prod-process-card:hover {
	border-color: var(--fb-color_text_primary);
}
.prod-process-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.prod-process-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
}
.prod-process-card-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	opacity: 0.85;
	transition: opacity 0.2s;
}
.prod-process-card:hover .prod-process-card-play {
	opacity: 1;
}
.prod-process-card-label {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: var(--fb-color_bg_white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	white-space: nowrap;
}

/* Paper Section */
.prod-paper {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.prod-paper-row {
	display: flex;
	align-items: center;
	gap: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.prod-paper-row::-webkit-scrollbar {
	display: none;
}
.prod-paper-arrow {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 50%;
	cursor: pointer;
}
.prod-paper-arrow:hover { border-color: var(--fb-color_text_primary); }
.prod-paper-cards {
	display: flex;
	gap: 16px;
	flex: 1;
	min-width: 0;
}
.prod-paper-card {
	flex: 0 0 calc((100% - 64px) / 4.3);
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	cursor: grab;
}
.prod-paper-card img {
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 3px;
	object-fit: cover;
	border: 1px solid transparent;
	transition: border-color 0.2s;
}
.prod-paper-card:hover img {
	border-color: var(--fb-color_text_primary);
}
.prod-paper-card h3 {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 4px;
}
.prod-paper-card p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.2;
}

/* ===== 이용후기 Review ===== */
.review-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}
.rating-box {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rating-score strong {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
}
.rating-score span {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}
.rating-stars {
	display: flex;
	gap: 4px;
	align-items: center;
}
.review-btn {
	height: 40px;
	border: 1px solid #1b2631;
	border-radius: 3px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	background: var(--fb-color_bg_white);
	cursor: pointer;
	white-space: nowrap;
}
.review-btn:hover { background: var(--fb-color_bg_subtle); }

/* Review Table */
.rv-table {
	border-top: 1px solid #1b2631;
}
.rv-row {
	border-bottom: 1px solid var(--fb-color_border);
}
.rv-trigger {
	width: 100%;
	min-height: 49px;
	padding: 16px 20px;
	display: grid;
	grid-template-columns: 45px 65px 1fr 65px 90px 20px;
	gap: 20px;
	align-items: center;
	text-align: left;
	background: transparent;
	cursor: pointer;
}
.rv-trigger:hover { background: var(--fb-color_bg_subtle); }
.rv-cell {
	font-size: 14px;
	font-weight: 300;
	color: var(--fb-color_text_primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rv-badge {
	height: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 600;
	background: var(--fb-color_bg_white);
	white-space: nowrap;
}
.rv-badge.template {
	color: #87c39f;
	border: 1px solid #87c39f;
}
.rv-badge.upload {
	color: #6bb2d0;
	border: 1px solid #6bb2d0;
}
.rv-arrow {
	transition: transform 0.2s;
}
.rv-row.is-open .rv-arrow {
	transform: rotate(180deg);
}
.rv-content {
	display: none;
	background: var(--fb-color_bg_subtle);
	padding: 16px 20px 20px 150px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
	border-bottom: 1px solid var(--fb-color_border);
}
.rv-row.is-open .rv-content {
	display: block;
}

/* Paging */
.rv-paging {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 30px;
}
.paging-arrow {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 50%;
	background: var(--fb-color_bg_white);
	cursor: pointer;
}
.paging-arrow:hover { border-color: var(--fb-color_text_primary); }
.paging-num {
	font-size: 14px;
	font-weight: 300;
	color: var(--fb-color_text_primary);
}
.paging-num strong { font-weight: 600; }

/* ===== FAQ / 고객지원 ===== */
.faq-pill-row {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	overflow: hidden;
}
.faq-pill {
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	border-radius: 30px;
	border: 1px solid var(--fb-color_border_default);
	background: var(--fb-color_bg_white);
	font-size: 14px;
	font-weight: 300;
	white-space: nowrap;
	cursor: pointer;
}
.faq-pill:hover { border-color: var(--fb-color_text_muted); }
.faq-pill.is-active {
	border-color: #1b2631;
	font-weight: 600;
}

/* FAQ Accordion */
.faq-accordion {
	border-top: 1px solid #1b2631;
}
.faq-acc-item {
	border-bottom: 1px solid var(--fb-color_border);
}
.faq-acc-q {
	width: 100%;
	min-height: 49px;
	padding: 16px 20px;
	display: grid;
	grid-template-columns: 45px 1fr 20px;
	gap: 20px;
	align-items: center;
	text-align: left;
	background: var(--fb-color_bg_white);
	cursor: pointer;
}
.faq-acc-q:hover { background: var(--fb-color_bg_subtle); }
.faq-q-mark {
	font-size: 16px;
	font-weight: 600;
	color: #ff9392;
}
.faq-q-text {
	font-size: 14px;
	font-weight: 300;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.faq-q-text.is-strong { font-weight: 600; }
.faq-acc-arrow {
	transition: transform 0.2s;
}
.faq-acc-item.is-open .faq-acc-arrow {
	transform: rotate(180deg);
}
.faq-acc-a {
	display: none;
	background: var(--fb-color_bg_subtle);
	padding: 14px 20px;
	grid-template-columns: 45px 1fr;
	gap: 20px;
	align-items: start;
}
.faq-acc-item.is-open .faq-acc-a {
	display: grid;
}
.faq-a-mark {
	font-size: 16px;
	font-weight: 600;
	color: #82c5b0;
}
.faq-a-text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--fb-color_text_primary);
}

/* Support Band */
.support-band {
	margin-top: 50px;
	background: rgba(242, 234, 230, 0.5);
	padding: 20px;
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
}
.support-copy {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.support-copy h3 {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}
.support-copy p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}
.support-btn {
	height: 34px;
	border: 1px solid #f9dad5;
	border-radius: 3px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.support-btn:hover { background: rgba(255,255,255,0.5); }

/* ===== 제작 일정 / Schedule ===== */
.schedule-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin-bottom: 50px;
}
.schedule-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.schedule-icon {
	width: 120px;
	height: 120px;
	border: 1px solid var(--fb-color_border_default);
	background: var(--fb-color_bg_subtle);
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.schedule-step h3 {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 8px;
	white-space: nowrap;
}
.schedule-step p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
}

/* Notice Table */
.notice-table {
	border-top: 1px solid #1b2631;
}
.notice-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 20px;
	padding: 20px;
	border-bottom: 1px solid #e5e5e5;
	align-items: start;
}
.notice-row h3 {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}
.notice-content {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}
.notice-content ul {
	margin: 0 0 16px;
	padding-left: 21px;
}
.notice-content ul:last-child {
	margin-bottom: 0;
}
.notice-content li {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	list-style: disc;
}

/* ===== Mobile Fixed Bottom Bar ===== */
.mobile-bottom-bar {
	display: none;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
	.gnb-inner,
	.sub-nav-inner,
	.page-wrap {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
	.category-tab {
		overflow-x: auto;
		justify-content: flex-start;
		padding: 20px;
		gap: 8px;
		-webkit-overflow-scrolling: touch;
	}
	.cate-item {
		flex-shrink: 0;
		width: 80px;
	}
	.content-area {
		flex-direction: column;
	}
	.content-right {
		width: 100%;
		position: static;
	}
	.design-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.sub-nav-inner {
		height: auto;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px 16px;
		gap: 10px;
	}
	.sub-nav-menu {
		width: 100%;
		overflow-x: auto;
		gap: 20px;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
	}
	.sub-nav-menu li a {
		font-size: 14px;
		white-space: nowrap;
	}
	.sub-nav-right {
		display: none;
	}
	.page-wrap {
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 120px;
	}
	.page-title {
		font-size: 20px;
		padding: 20px 0 8px;
	}
	.category-tab {
		padding: 16px 0;
	}
	.cate-item {
		width: 80px;
	}
	.cate-icon {
		width: 50px;
		height: 50px;
	}
	.cate-name {
		font-size: 13px;
	}
	.banner-placeholder {
		height: 80px;
	}
	.design-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 12px;
		padding: 10px 12px 20px;
	}
	.order-tab-item {
		font-size: 13px;
		height: 48px;
	}

	/* 데스크탑 사이드바 숨김 */
	.content-right {
		display: none;
	}

	/* 모바일 하단 고정 바 — 장바구니 제외 모든 영역 클릭 시 주문 내용 패널 오픈 */
	.mobile-bottom-bar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: var(--fb-color_bg_white);
		box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
		cursor: pointer;             /* 전체 클릭 가능 표시 */
		/* 아이폰 홈바(safe area) 대응 */
		padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: constant(safe-area-inset-bottom);
	}
	.mobile-bottom-inner {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 16px;
		width: 100%;
		box-sizing: border-box;
	}
	.mobile-total {
		flex-shrink: 0;
		padding-right: 8px;             /* 가격 우측 여백 확보 — 액션 그룹과 시각적 분리 */
	}
	.mobile-product-name {
		display: block;
		max-width: min(48vw, 210px);
		overflow: hidden;
		margin-bottom: 2px;
		color: var(--fb-color_text_primary);
		font-size: 12px;
		font-weight: 650;
		line-height: 1.2;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* 액션 그룹(장바구니 + 주문하기) — 우측 정렬, 콘텐츠 크기 */
	.mobile-action-group {
		margin-left: auto;              /* 우측으로 밀어 좌측 가격과 사이 여백 자동 */
		display: flex;
		gap: 8px;
		align-items: center;
		flex-shrink: 0;
	}
	.mobile-btn-order {
		min-width: 112px;
	}
	.mobile-panel-product-name {
		display: block;
		max-width: calc(100vw - 88px);
		overflow: hidden;
		margin-bottom: 3px;
		color: var(--fb-color_text_primary);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.25;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#mobileOrderPanel .mobile-order-panel-header h3 {
		margin: 0;
		color: var(--fb-color_text_secondary, #777);
		font-size: 12px;
		font-weight: 500;
	}
	#ch-plugin-entry,
	[id^="ch-plugin-launcher"],
	.ch-plugin-launcher,
	[data-ch-testid="launcher"] {
		bottom: calc(88px + env(safe-area-inset-bottom)) !important;
	}
	.mobile-total {
		display: flex;
		flex-direction: column;
		gap: 2px;
		cursor: pointer;
		position: relative;
	}
	.mobile-total-label {
		font-size: 12px;
		font-weight: 400;
		color: var(--fb-color_text_muted);
	}
	.mobile-total-price {
		font-size: 18px;
		font-weight: 700;
		color: #e85a2c;
	}
	/* 장바구니 + 주문하기 묶음 */
	.mobile-action-group {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	/* 장바구니 — 라운드 사각 아이콘 버튼 */
	.mobile-btn-cart {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 135px;
		height: 44px;
		background: var(--fb-color_bg_white);
		color: #444;
		border: 1px solid var(--fb-color_border_default);
		border-radius: 4px;
		cursor: pointer;
		flex-shrink: 0;
		font-size: 14px;
		font-weight: 500;
		transition: border-color 0.15s, color 0.15s;
	}
	.mobile-btn-cart-label {
		color: inherit;
		line-height: 1;
	}
	.mobile-btn-cart:hover { border-color: #1b2631; color: #1b2631; }
	.mobile-btn-order {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 135px;
		height: 44px;
		background: #444444;
		color: var(--fb-color_bg_white);
		font-size: 15px;
		font-weight: 600;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	/* 모바일 주문 내용 패널 (아래에서 위로 확장) */
	.mobile-order-panel {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 200;
		background: var(--fb-color_bg_white);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
		max-height: 70vh;
		overflow-y: auto;
		bottom: 0;
		visibility: hidden;
		opacity: 0;
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
		-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
	}
	/* 패널 상단 드래그 핸들 — 스크롤해도 항상 노출되도록 sticky */
	.mobile-panel-grip {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 24px;
		padding-top: 8px;
		background: var(--fb-color_bg_white);
		z-index: 5;
		cursor: pointer;
	}
	.mobile-panel-grip::before {
		content: "";
		display: block;
		width: 44px;
		height: 5px;
		background: var(--fb-color_border_default);
		border-radius: 3px;
		transition: background 0.15s;
	}
	.mobile-panel-grip:hover::before,
	.mobile-panel-grip:active::before { background: #aaa; }
	/* 헤더도 sticky 하단으로 — 패널 닫기 영역 항상 노출 */
	.mobile-order-panel-header {
		position: sticky;
		top: 24px;
		background: var(--fb-color_bg_white);
		z-index: 4;
	}
	.mobile-order-panel.open {
		visibility: visible;
		opacity: 1;
		transform: translateY(0) !important;
		-webkit-transform: translateY(0) !important;
	}
	.mobile-order-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px;
		border-bottom: 1px solid var(--fb-color_border);
	}
	.mobile-order-panel-header h3 {
		font-size: 16px;
		font-weight: 700;
		color: var(--fb-color_text_primary);
	}
	.mobile-panel-close {
		width: 28px;
		height: 28px;
		background: none;
		border: none;
		cursor: pointer;
		font-size: 20px;
		color: var(--fb-color_text_muted);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mobile-order-panel-body {
		padding: 20px;
	}
	.mobile-order-panel-body .order-summary-row {
		padding: 8px 0;
	}
	.mobile-order-panel-body .order-summary-line {
		margin: 12px 0;
	}
	.mobile-order-panel-body .order-summary-total {
		padding: 12px 0 20px;
	}
	.mobile-order-panel-body .btn-order {
		height: 48px;
		font-size: 16px;
		border-radius: 4px;
		flex: 1;
	}
	/* 모바일 패널 안 주문내역 행 글씨 — 1px 키움 (가독성) */
	#mobileOrderPanel .order-detail-label {
		font-size: 14px;
	}
	#mobileOrderPanel .order-detail-price {
		font-size: 15px;
	}
	/* 패널 내부 액션 그룹 — 장바구니 + 주문하기 */
	.mobile-panel-action-group {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 16px;
	}
	.mobile-panel-btn-cart {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 135px;                  /* 메인 바와 동일 */
		height: 48px;
		flex-shrink: 0;
		background: var(--fb-color_bg_white);
		color: #444;
		border: 1px solid var(--fb-color_border_default);
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		font-weight: 500;
		transition: border-color 0.15s, color 0.15s;
	}
	.mobile-panel-btn-cart-label {
		color: inherit;
		line-height: 1;
	}
	.mobile-panel-btn-cart:hover { border-color: #1b2631; color: #1b2631; }
	.mobile-panel-btn-cart svg path,
	.mobile-panel-btn-cart svg circle { stroke: currentColor !important; fill: none !important; }
	.mobile-btn-cart svg path,
	.mobile-btn-cart svg circle { stroke: currentColor !important; fill: none !important; }

	/* 오버레이 */
	.mobile-overlay {
		display: none;
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(0,0,0,0.4);
		z-index: 150;
	}
	.mobile-overlay.open {
		display: block;
	}

	/* 하단 탭 모바일 */
	.bottom-tab-wrap {
		margin-top: 30px;
	}
	.bottom-tab-item {
		font-size: 12px;
		height: 42px;
		padding: 0 4px;
	}

	/* 제작 설명 */
	.prod-hero {
		height: 200px;
	}
	.prod-hero-logo {
		font-size: 28px;
	}
	.prod-why-title {
		font-size: 24px;
	}
	.prod-why {
		margin-top: 30px;
		gap: 30px;
	}
	.prod-feature-box {
		padding: 0;
	}
	.prod-feature-grid {
		grid-template-columns: 1fr;
	}
	.prod-feature-item:nth-child(odd) {
		border-right: none;
	}
	.prod-work-grid {
		grid-template-columns: 1fr;
		margin-top: 30px;
	}
	.prod-work-visual {
		height: 200px;
	}
	.prod-process-card {
		flex: 0 0 calc((100% - 32px) / 2.3);
	}
	.prod-paper-arrow {
		display: none;
	}
	.prod-paper-card {
		flex: 0 0 calc((100% - 32px) / 2.3);
	}
	.prod-divider {
		margin: 30px 0 30px;
	}

	/* 리뷰 */
	.review-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 20px;
	}
	.rv-trigger {
		grid-template-columns: 35px 55px 1fr 20px;
		gap: 10px;
		padding: 12px 12px;
	}
	.rv-cell.rv-writer,
	.rv-cell.rv-date {
		display: none;
	}
	.rv-content {
		padding: 14px 12px 14px 100px;
	}

	/* FAQ */
	.faq-pill-row {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		gap: 8px;
		margin-bottom: 16px;
	}
	.faq-pill {
		flex-shrink: 0;
		padding: 0 16px;
		height: 36px;
		font-size: 13px;
	}
	.faq-acc-q {
		grid-template-columns: 30px 1fr 20px;
		gap: 10px;
		padding: 12px;
	}
	.faq-acc-a {
		grid-template-columns: 30px 1fr;
		gap: 10px;
		padding: 12px;
	}
	.faq-q-text {
		white-space: normal;
	}

	/* 안심 지원 */
	.support-band {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
		margin-top: 30px;
	}
	.support-copy {
		width: 100%;
	}
	.support-copy p {
		font-size: 13px;
	}
	.support-band .support-btn {
		width: 100%;
		justify-content: center;
	}

	/* 제작 일정 */
	.schedule-row {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin-bottom: 30px;
	}
	.schedule-icon {
		width: 90px;
		height: 90px;
	}
	.schedule-step h3 {
		font-size: 13px;
	}
	.schedule-step p {
		font-size: 12px;
	}

	/* 유의사항 */
	.notice-row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 16px 12px;
	}
	.notice-row h3 {
		font-size: 15px;
	}
	.notice-content {
		font-size: 13px;
	}
	.notice-content li {
		font-size: 13px;
	}

	/* 페이지네이션 */
	.rv-paging {
		gap: 16px;
		margin-top: 20px;
	}
	.paging-arrow {
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 480px) {
	/* 리뷰 더 작은 화면 */
	.rv-trigger {
		grid-template-columns: 1fr 20px;
		gap: 8px;
		padding: 12px 10px;
	}
	.rv-cell.rv-no,
	.rv-badge {
		display: none;
	}
	.rv-content {
		padding: 12px;
	}

	/* 제작 일정 2열 */
	.schedule-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.schedule-icon {
		width: 80px;
		height: 80px;
	}
}

/* ===== 후가공 개별 아코디언 ===== */
.opt-post-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 0;
	margin-bottom: 0;
}
.opt-post-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 400;
	color: var(--fb-color_text_muted);
	margin-bottom: 10px;
}
.opt-post-label-icon {
	width: 15px;
	height: 15px;
	border: 2.5px solid var(--fb-color_text_muted);
	border-radius: 50%;
	flex-shrink: 0;
}
.opt-post-section {
	margin-bottom: 20px;
	overflow: hidden;            /* 호버 시 자식 배경이 라운드 코너 안으로 클리핑되도록 */
	border: 1px solid #ebebeb;
	border-radius: 6px;
	background: var(--fb-color_bg_white);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.opt-post-section:hover {
	border-color: #d5d5d5;
}
.opt-post-section.is-active {
	border-color: #e0e0e0;
	background: var(--fb-color_bg_white);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* 강제 활성(해제 불가) + 기성봉투 전용 — 종이 선택과 동일하게 흰색 배경 */
.opt-post-section.is-stock-locked,
.opt-post-section.is-active.is-stock-locked {
	background: var(--fb-color_bg_white);
}
.opt-post-section.is-stock-locked .opt-post-header,
.opt-post-section.is-active.is-stock-locked .opt-post-header,
.opt-post-section.is-stock-locked .opt-post-sub,
.opt-post-section.is-active.is-stock-locked .opt-post-sub {
	background: var(--fb-color_bg_white);
}
.opt-post-section.is-active.has-dropdown-open {
	overflow: visible;
}
.opt-post-section:last-child {
	margin-bottom: 0;
}
.opt-post-header {
	flex-direction: column;
	height: auto;
	padding: 0;
	cursor: pointer;
}
/* 비활성: 라인 아이콘 + 텍스트 한줄 */
.opt-post-header .opt-header-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 55px;
	padding: 0 16px;
	transition: background 0.15s, padding 0.2s, gap 0.2s;
}
.opt-post-header .opt-header-row:hover {
	background: var(--fb-color_bg_subtle);
}
.opt-post-input {
	display: none;
}
/* 비활성 아이콘: 라인 아이콘 20px */
.opt-post-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fb-color_text_muted);
	transition: all 0.25s;
}
.opt-post-icon svg {
	width: 22px;
	height: 22px;
	transition: all 0.25s;
}
.opt-post-info {
	flex: 1;
	min-width: 0;
}
/* 비활성 이름: 일반 굵기, 한줄 */
.opt-post-name {
	font-size: 14px;
	font-weight: 500;
	color: #222;
	margin: 0;
	transition: all 0.2s;
	white-space: nowrap;
}
.opt-post-info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
/* 비활성 설명: 인라인으로 이름 옆에 */
.opt-post-desc {
	font-size: 12px;
	font-weight: 400;
	color: #aaa;
	line-height: 1.5;
	margin: 0;
	display: none;
	transition: all 0.2s;
}
.opt-post-toggle {
	width: 40px;          /* 38 → 40 (5%) */
	height: 21px;         /* 20 → 21 */
	flex-shrink: 0;
	border: none;
	border-radius: 11px;
	background: #d5d5d5;
	position: relative;
	transition: background 0.25s;
	cursor: pointer;
}
.opt-post-toggle::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 17px;          /* 16 → 17 */
	height: 17px;
	border-radius: 50%;
	background: var(--fb-color_bg_white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);
	transition: transform 0.25s;
}
/* ===== 활성 상태: 피그마 11:866 헤더 (작은 아이콘 + 이름 + 토글) ===== */
.opt-post-section.is-active .opt-post-header {
	background: var(--fb-color_bg_white);
}
.opt-post-section.is-active .opt-post-header .opt-header-row {
	padding: 16px 20px;
	gap: 10px;
	align-items: center;
	background: var(--fb-color_bg_white);
}
/* 활성 아이콘: 작은 인라인 SVG (피그마 11:866 — 24×24 컨테이너) */
.opt-post-section.is-active .opt-post-icon {
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	border-radius: 0;
	color: #444;
}
.opt-post-section.is-active .opt-post-icon svg {
	width: 20px;
	height: 20px;
	opacity: 1;
}
/* 활성 헤더의 이미지 썸네일(.opt-post-thumb-img) 숨김 — body의 .opt-post-top에서만 표시 */
.opt-post-section.is-active .opt-post-icon .opt-post-thumb-img {
	display: none !important;
}
/* 활성 헤더의 fig 아이콘은 그대로 노출 */
.opt-post-section.is-active .opt-post-fig-icon {
	display: block;
	width: 20px;
	height: 20px;
	opacity: 1;
}
/* 활성 이름: 16px Semibold (피그마 매치) */
.opt-post-section.is-active .opt-post-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin: 0;
}
/* 활성 설명: 헤더에서 숨김 — body의 불릿 리스트에서 표시 */
.opt-post-section.is-active .opt-post-desc {
	display: none !important;
}
/* ===== 자세히 인라인 링크 + 통합 가이드 모달 ===== */
.fb-guide-link {
	color: #3e6fef;
	cursor: pointer;
	text-decoration: none;
	margin-left: 4px;
	font-size: 12px;
	white-space: nowrap;
}
.fb-guide-link:hover { text-decoration: underline; }

.fb-guide-modal {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
}
.fb-guide-modal.is-open { display: flex !important; }
body.fb-guide-modal-open { overflow: hidden; }
.fb-guide-modal-overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.5);
}
.fb-guide-modal-body {
	position: relative; z-index: 1;
	background: #fff; border-radius: 10px;
	width: 1040px; max-width: 96vw;
	height: min(1040px, calc(100vh - 8px)); max-height: calc(100vh - 8px);
	display: flex; flex-direction: column;
	box-shadow: 0 12px 48px rgba(0,0,0,0.25);
}
/* 편집 모드 — 보기 모드와 동일 사이즈 (스케일 일치) */
.fb-guide-modal.is-editing .fb-guide-modal-body {
	width: 1040px; max-width: 96vw;
	height: min(1040px, calc(100vh - 8px)); max-height: calc(100vh - 8px);
}
.fb-guide-modal-header {
	padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.fb-guide-modal-title { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.fb-guide-actions { display: flex; gap: 6px; }
.fb-guide-actions button {
	background: #fff; border: 1px solid #ddd; padding: 6px 14px;
	border-radius: 4px; cursor: pointer; font-size: 12px; color: #333;
}
.fb-guide-actions .fb-guide-edit-btn:hover { background: #f3f4f6; }
.fb-guide-actions .fb-guide-save-btn { background: #3e6fef; color: #fff; border-color: #3e6fef; }
.fb-guide-actions .fb-guide-save-btn:hover { background: #2c5cd6; }
.fb-guide-modal-close {
	background: none; border: none; font-size: 26px; cursor: pointer;
	color: #666; line-height: 1; padding: 0 4px;
}

/* ===== 편집 모드 — Canva 스타일 리치 에디터 ===== */
.fb-guide-edit input.fb-guide-edit-title {
	width: 100%; font-size: 22px; font-weight: 700;
	border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 14px;
	margin-bottom: 8px; box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.fb-guide-edit input.fb-guide-edit-title:focus {
	border-color: #3e6fef; box-shadow: 0 0 0 3px rgba(62,111,239,0.15); outline: none;
}
.fb-guide-edit textarea.fb-guide-edit-desc {
	width: 100%; font-size: 13px; line-height: 1.7;
	border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 14px;
	margin-bottom: 16px; min-height: 50px; box-sizing: border-box; resize: vertical;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.fb-guide-edit textarea.fb-guide-edit-desc:focus {
	border-color: #3e6fef; box-shadow: 0 0 0 3px rgba(62,111,239,0.15); outline: none;
}

/* 풍부한 툴바 */
.fb-rt-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	padding: 8px 10px;
	background: #fafbfc; border: 1px solid #e5e7eb;
	border-radius: 8px 8px 0 0;
	border-bottom: none;
	position: sticky; top: 0; z-index: 2;
}
.fb-rt-sep {
	width: 1px; height: 20px; background: #e5e7eb; margin: 0 4px;
}
.fb-rt-block-select {
	height: 30px; padding: 0 8px; border: 1px solid #e5e7eb;
	border-radius: 5px; background: #fff; font-size: 12px;
	cursor: pointer; min-width: 100px;
}
.fb-rt-block-select:hover { background: #f9fafb; }
.fb-rt-btn {
	height: 30px; min-width: 30px; padding: 0 8px;
	background: #fff; border: 1px solid transparent;
	border-radius: 5px; cursor: pointer; font-size: 13px;
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	color: #333;
	transition: background 0.12s, border-color 0.12s;
}
.fb-rt-btn:hover { background: #f0f2f5; }
.fb-rt-btn.is-active { background: #e0e7ff; color: #3e6fef; }
.fb-rt-btn svg { display: block; }

.fb-rt-insert-btn {
	background: #3e6fef !important; color: #fff !important;
	padding: 0 10px !important;
}
.fb-rt-insert-btn:hover { background: #2c5cd6 !important; }
.fb-rt-insert-btn svg { stroke: #fff; }

.fb-rt-clear-btn,
.fb-rt-html-btn {
	margin-left: auto;
	color: #888;
}

/* 색상 팝오버 */
.fb-rt-color-pop {
	position: absolute; z-index: 100;
	background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
	padding: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.fb-rt-color-row {
	display: grid; grid-template-columns: repeat(8, 22px); gap: 4px;
}
.fb-rt-color-swatch {
	width: 22px; height: 22px; border-radius: 4px;
	cursor: pointer; border: 1px solid rgba(0,0,0,0.1);
	transition: transform 0.1s;
}
.fb-rt-color-swatch:hover { transform: scale(1.15); }
.fb-rt-color-swatch.is-clear {
	background: #fff; position: relative;
}
.fb-rt-color-swatch.is-clear::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(45deg, transparent 45%, #ef4444 45%, #ef4444 55%, transparent 55%);
	border-radius: 4px;
}

/* 리치 에디터 본체 — 보기 모드와 완전 동일한 폰트/패딩 */
.fb-rt-editor {
	min-height: 480px;
	border: 1px solid #e5e7eb; border-top: none;
	border-radius: 0 0 8px 8px;
	padding: 28px 32px;
	font-size: 15px; line-height: 1.65; color: #333;
	background: #fff;
	outline: none;
	overflow-y: auto;
	flex: 1;
	max-height: none;
}
.fb-rt-editor:focus { border-color: #3e6fef; }
.fb-rt-editor h1 {
	margin: 0 0 10px; font-size: 26px; font-weight: 700; color: #111; line-height: 1.3;
}
.fb-rt-editor h2 {
	margin: 36px 0 16px; font-size: 20px; font-weight: 700; color: #111;
	padding-top: 28px; border-top: 1px solid #f0f0f0;
}
.fb-rt-editor h3 {
	margin: 22px 0 8px; font-size: 17px; font-weight: 700; color: #111;
}
.fb-rt-editor p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: #333; }
.fb-rt-editor p.lead { font-size: 15px; line-height: 1.65; color: #666; margin: 0 0 18px; }
.fb-rt-editor hr { border: none; border-top: 1px solid #f0f0f0; margin: 18px 0 24px; }
.fb-rt-editor .fb-rt-col p { font-size: 15px; line-height: 1.6; }
.fb-rt-editor .fb-rt-col p strong { font-size: 16px; color: #111; }
/* 편집기 안 히어로 이미지도 동일 비율 */
.fb-rt-editor img[data-hero="1"] { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; max-width: 100%; }
.fb-rt-editor .fb-rt-col img[data-cell="1"] { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
/* 편집 모드: 툴바도 콘텐츠 영역과 동일한 좌우 정렬 */
.fb-guide-modal.is-editing .fb-rt-toolbar { padding-left: 32px; padding-right: 32px; border-radius: 0; }
.fb-rt-editor ul, .fb-rt-editor ol { margin: 0 0 12px 24px; }
.fb-rt-editor li { margin-bottom: 4px; }
.fb-rt-editor blockquote {
	margin: 12px 0; padding: 12px 16px;
	border-left: 3px solid #3e6fef; background: #f8fafd;
	color: #555; font-style: italic;
}
.fb-rt-editor pre {
	background: #1f2937; color: #f9fafb;
	padding: 12px 16px; border-radius: 6px;
	font-family: monospace; font-size: 13px;
	overflow-x: auto;
}
.fb-rt-editor hr {
	border: none; border-top: 1px solid #e5e7eb; margin: 24px 0;
}
.fb-rt-editor img {
	max-width: 100%; border-radius: 6px; margin: 12px 0;
	cursor: pointer;
	transition: outline 0.1s;
}
.fb-rt-editor img:hover { outline: 2px solid #3e6fef; }
.fb-rt-editor img.is-selected { outline: 3px solid #3e6fef; }
.fb-rt-editor img[data-align="left"] { margin-right: auto; }
.fb-rt-editor img[data-align="center"] { margin-left: auto; margin-right: auto; display: block; }
.fb-rt-editor img[data-align="right"] { margin-left: auto; display: block; }
.fb-rt-editor img[data-size="small"] { max-width: 240px; }
.fb-rt-editor img[data-size="medium"] { max-width: 480px; }
.fb-rt-editor img[data-size="large"] { max-width: 100%; }
.fb-rt-editor a { color: #3e6fef; text-decoration: underline; }
.fb-rt-editor[data-empty]:empty::before {
	content: '여기에 자세한 가이드를 작성하세요. 이미지를 드래그&드롭 하거나 위 툴바를 사용하세요.';
	color: #9ca3af;
	pointer-events: none;
}

/* 이미지 클릭 시 floating 컨트롤 */
.fb-rt-img-controls {
	position: absolute; z-index: 50;
	background: #1f2937; color: #fff;
	border-radius: 6px;
	padding: 4px;
	display: flex; gap: 2px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.fb-rt-img-controls button {
	background: transparent; color: #fff; border: none;
	padding: 6px 8px; cursor: pointer; font-size: 11px;
	border-radius: 4px;
}
.fb-rt-img-controls button:hover { background: rgba(255,255,255,0.15); }
.fb-rt-img-controls button.is-active { background: #3e6fef; }

/* 이미지 리사이즈 핸들 (모서리 4 개) */
.fb-rt-img-handle {
	position: absolute; z-index: 51;
	width: 12px; height: 12px;
	background: #fff; border: 2px solid #3e6fef;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.fb-rt-img-handle-nw { cursor: nwse-resize; }
.fb-rt-img-handle-ne { cursor: nesw-resize; }
.fb-rt-img-handle-sw { cursor: nesw-resize; }
.fb-rt-img-handle-se { cursor: nwse-resize; }
body.fb-rt-img-resizing { cursor: nwse-resize !important; user-select: none; }
body.fb-rt-img-resizing * { user-select: none !important; }
.fb-rt-editor img[data-size="custom"] { max-width: none; }
.fb-rt-editor img[data-size="full"] { max-width: none; width: auto; }

/* 박스(컬럼) — 편집기 안 (기본 사방여백 0 / 투명 배경) */
.fb-rt-editor .fb-rt-cols {
	display: flex; gap: 16px;
	margin: 16px 0;
	padding: 0;
	border-radius: 6px;
	transition: outline 0.1s;
}
.fb-rt-editor .fb-rt-cols:hover { outline: 2px dashed #cbd5e1; outline-offset: 4px; }
.fb-rt-editor .fb-rt-cols.is-selected { outline: 2px solid #3e6fef; outline-offset: 4px; }
.fb-rt-editor .fb-rt-col {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 1px dashed transparent;
	border-radius: 6px;
	min-height: 40px;
}
.fb-rt-editor .fb-rt-cols:hover > .fb-rt-col { border-color: #e5e7eb; }
.fb-rt-editor .fb-rt-col:focus,
.fb-rt-editor .fb-rt-col:focus-within { border-color: #3e6fef; border-style: solid; }
.fb-rt-editor .fb-rt-col > p:first-child { margin-top: 0; }
.fb-rt-editor .fb-rt-col > p:last-child { margin-bottom: 0; }
.fb-rt-editor .fb-rt-col img { margin: 0 0 8px; }

/* padding variants (data-padding) */
.fb-rt-cols[data-padding="sm"] > .fb-rt-col { padding: 8px; }
.fb-rt-cols[data-padding="md"] > .fb-rt-col { padding: 14px; }
.fb-rt-cols[data-padding="lg"] > .fb-rt-col { padding: 22px; }
.fb-rt-cols[data-padding="xl"] > .fb-rt-col { padding: 30px; }

/* gap variants (data-gap) */
.fb-rt-cols[data-gap="none"] { gap: 0; }
.fb-rt-cols[data-gap="sm"] { gap: 8px; }
.fb-rt-cols[data-gap="md"] { gap: 16px; }
.fb-rt-cols[data-gap="lg"] { gap: 24px; }
.fb-rt-cols[data-gap="xl"] { gap: 36px; }

/* 배경 있는 박스는 자동으로 padding 보장 */
.fb-rt-cols[data-bg]:not([data-bg=""]):not([data-padding]) > .fb-rt-col,
.fb-rt-cols[data-bg]:not([data-bg=""])[data-padding=""] > .fb-rt-col { padding: 14px; }

/* 박스 배경 variants (data-bg 속성으로 적용) */
.fb-rt-cols[data-bg="white"] > .fb-rt-col { background: #ffffff; border: 1px solid #e5e7eb; }
.fb-rt-cols[data-bg="gray"] > .fb-rt-col { background: #f9fafb; border: 1px solid #e5e7eb; }
.fb-rt-cols[data-bg="cream"] > .fb-rt-col { background: #fffbeb; border: 1px solid #fde68a; }
.fb-rt-cols[data-bg="blue"] > .fb-rt-col { background: #eff6ff; border: 1px solid #bfdbfe; }
.fb-rt-cols[data-bg="green"] > .fb-rt-col { background: #f0fdf4; border: 1px solid #bbf7d0; }
.fb-rt-cols[data-bg="rose"] > .fb-rt-col { background: #fff1f2; border: 1px solid #fecdd3; }
.fb-rt-cols[data-bg="purple"] > .fb-rt-col { background: #faf5ff; border: 1px solid #e9d5ff; }
.fb-rt-cols[data-bg="dark"] > .fb-rt-col { background: #1f2937; border: 1px solid #374151; color: #f3f4f6; }
.fb-rt-cols[data-bg="dark"] > .fb-rt-col strong { color: #fbbf24; }

/* 박스 비율 — 2단 */
.fb-rt-cols[data-ratio="50-50"] > .fb-rt-col { flex: 1 1 0; }
.fb-rt-cols[data-ratio="60-40"] > .fb-rt-col:nth-child(1) { flex: 6 1 0; }
.fb-rt-cols[data-ratio="60-40"] > .fb-rt-col:nth-child(2) { flex: 4 1 0; }
.fb-rt-cols[data-ratio="40-60"] > .fb-rt-col:nth-child(1) { flex: 4 1 0; }
.fb-rt-cols[data-ratio="40-60"] > .fb-rt-col:nth-child(2) { flex: 6 1 0; }
.fb-rt-cols[data-ratio="70-30"] > .fb-rt-col:nth-child(1) { flex: 7 1 0; }
.fb-rt-cols[data-ratio="70-30"] > .fb-rt-col:nth-child(2) { flex: 3 1 0; }
.fb-rt-cols[data-ratio="30-70"] > .fb-rt-col:nth-child(1) { flex: 3 1 0; }
.fb-rt-cols[data-ratio="30-70"] > .fb-rt-col:nth-child(2) { flex: 7 1 0; }
/* 3단 */
.fb-rt-cols[data-ratio="33-33-33"] > .fb-rt-col { flex: 1 1 0; }
.fb-rt-cols[data-ratio="25-50-25"] > .fb-rt-col:nth-child(1) { flex: 1 1 0; }
.fb-rt-cols[data-ratio="25-50-25"] > .fb-rt-col:nth-child(2) { flex: 2 1 0; }
.fb-rt-cols[data-ratio="25-50-25"] > .fb-rt-col:nth-child(3) { flex: 1 1 0; }
.fb-rt-cols[data-ratio="50-25-25"] > .fb-rt-col:nth-child(1) { flex: 2 1 0; }
.fb-rt-cols[data-ratio="50-25-25"] > .fb-rt-col:nth-child(2) { flex: 1 1 0; }
.fb-rt-cols[data-ratio="50-25-25"] > .fb-rt-col:nth-child(3) { flex: 1 1 0; }
.fb-rt-cols[data-ratio="25-25-50"] > .fb-rt-col:nth-child(1) { flex: 1 1 0; }
.fb-rt-cols[data-ratio="25-25-50"] > .fb-rt-col:nth-child(2) { flex: 1 1 0; }
.fb-rt-cols[data-ratio="25-25-50"] > .fb-rt-col:nth-child(3) { flex: 2 1 0; }

/* 박스 floating 컨트롤 — 2 행 그리드 */
.fb-rt-box-controls {
	position: absolute; z-index: 50;
	background: #1f2937; color: #fff;
	border-radius: 6px;
	padding: 4px 6px;
	display: flex; flex-direction: column; gap: 2px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	font-size: 11px;
	max-width: 720px;
}
.fb-rt-box-controls .fb-rt-box-row {
	display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
}
.fb-rt-box-controls .fb-rt-box-label {
	color: #9ca3af; padding: 0 6px 0 4px; font-size: 10px; font-weight: 700;
	letter-spacing: 0.05em; text-transform: uppercase;
	min-width: 30px;
}
.fb-rt-box-controls .fb-rt-box-sep {
	width: 1px; height: 18px; background: rgba(255,255,255,0.18); margin: 0 4px;
}
.fb-rt-box-controls button {
	background: transparent; color: #fff; border: none;
	padding: 5px 9px; cursor: pointer; font-size: 11px;
	border-radius: 4px;
}
.fb-rt-box-controls button:hover { background: rgba(255,255,255,0.15); }
.fb-rt-box-controls button.is-active { background: #3e6fef; }
.fb-rt-box-controls .fb-rt-bg-swatch {
	width: 22px; height: 22px; padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.35);
	margin: 0 1px;
}
.fb-rt-box-controls .fb-rt-bg-swatch:hover { border-color: #fff; }
.fb-rt-box-controls .fb-rt-bg-swatch.is-active { border-color: #3e6fef; box-shadow: 0 0 0 2px #3e6fef; background-color: inherit; }

/* 이미지 트림 팝오버 */
.fb-rt-trim-pop {
	position: absolute; z-index: 60;
	background: #fff; color: #333;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	min-width: 280px;
}
.fb-rt-trim-pop .fb-rt-trim-row {
	display: flex; align-items: center; gap: 4px;
	margin-bottom: 6px;
}
.fb-rt-trim-pop .fb-rt-trim-row:last-child { margin-bottom: 0; }
.fb-rt-trim-pop .fb-rt-trim-row > span {
	font-size: 11px; font-weight: 700; color: #6b7280;
	letter-spacing: 0.05em; min-width: 30px;
	margin-right: 4px;
}
.fb-rt-trim-pop button {
	background: #fff; border: 1px solid #e5e7eb;
	border-radius: 5px; padding: 5px 8px;
	font-size: 11px; cursor: pointer;
	display: inline-flex; align-items: center; gap: 4px;
	color: #333;
}
.fb-rt-trim-pop button:hover { background: #f3f4f6; border-color: #cbd5e1; }
.fb-rt-trim-pop button.is-active { background: #3e6fef; color: #fff; border-color: #3e6fef; }
.fb-rt-trim-pop button.is-active .fb-rt-trim-shape { background: rgba(255,255,255,0.4); }
.fb-rt-trim-pop .fb-rt-trim-shape {
	display: inline-block; width: 14px; height: 14px;
	background: #cbd5e1; border-radius: 2px;
}

/* 뷰 모드 (저장 후 보기) — 동일한 박스 레이아웃 (기본 사방여백 0 / 투명) */
.fb-guide-detail-content .fb-rt-cols {
	display: flex; gap: 16px;
	margin: 16px 0;
}
.fb-guide-detail-content .fb-rt-col {
	flex: 1 1 0; min-width: 0;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
}
.fb-guide-detail-content .fb-rt-col > :first-child { margin-top: 0; }
.fb-guide-detail-content .fb-rt-col > :last-child { margin-bottom: 0; }
.fb-guide-detail-content .fb-rt-cols[data-ratio="60-40"] > .fb-rt-col:nth-child(1),
.fb-guide-detail-content .fb-rt-cols[data-ratio="40-60"] > .fb-rt-col:nth-child(2),
.fb-guide-detail-content .fb-rt-cols[data-ratio="70-30"] > .fb-rt-col:nth-child(1),
.fb-guide-detail-content .fb-rt-cols[data-ratio="30-70"] > .fb-rt-col:nth-child(2) { flex: 6 1 0; }
.fb-guide-detail-content .fb-rt-cols[data-ratio="60-40"] > .fb-rt-col:nth-child(2),
.fb-guide-detail-content .fb-rt-cols[data-ratio="40-60"] > .fb-rt-col:nth-child(1) { flex: 4 1 0; }
.fb-guide-detail-content .fb-rt-cols[data-ratio="70-30"] > .fb-rt-col:nth-child(2),
.fb-guide-detail-content .fb-rt-cols[data-ratio="30-70"] > .fb-rt-col:nth-child(1) { flex: 3 1 0; }
.fb-guide-detail-content .fb-rt-cols[data-ratio="25-50-25"] > .fb-rt-col:nth-child(2),
.fb-guide-detail-content .fb-rt-cols[data-ratio="50-25-25"] > .fb-rt-col:nth-child(1),
.fb-guide-detail-content .fb-rt-cols[data-ratio="25-25-50"] > .fb-rt-col:nth-child(3) { flex: 2 1 0; }
.fb-guide-detail-content .fb-rt-cols img { max-width: 100%; height: auto; margin: 0 0 8px; }

/* 뷰 모드 — custom width 이미지 */
.fb-guide-detail-content img[data-size="custom"] { max-width: none; }
.fb-guide-detail-content img[data-size="full"] { max-width: none; width: auto; }

/* 모바일 — 박스 단일 컬럼으로 fallback */
@media (max-width: 768px) {
	.fb-rt-editor .fb-rt-cols,
	.fb-guide-detail-content .fb-rt-cols { flex-direction: column; }
}

/* HTML 직접 편집 모드 */
.fb-rt-html-source {
	width: 100%; font-family: 'Consolas', 'Monaco', monospace;
	font-size: 12px; line-height: 1.6;
	border: 1px solid #e5e7eb; border-top: none;
	border-radius: 0 0 8px 8px; padding: 16px;
	min-height: 320px; box-sizing: border-box; resize: vertical;
	background: #f9fafb;
}
.fb-rt-html-source:focus { border-color: #3e6fef; outline: none; }

/* 드래그앤드롭 시각 효과 */
.fb-rt-editor.is-drag-over {
	background: #e0e7ff; border-color: #3e6fef !important;
	border-style: dashed !important;
}
.fb-guide-modal-inner {
	display: flex; flex: 1; overflow: hidden; min-height: 480px;
	min-height: 0;
}
.fb-guide-modal.is-editing .fb-guide-list { width: 200px; }
.fb-guide-edit { display: flex; flex-direction: column; height: 100%; }
.fb-guide-list {
	width: 220px; border-right: 1px solid #e5e7eb;
	overflow-y: auto; background: #fafafa;
	padding: 0;
}
.fb-guide-nav-section + .fb-guide-nav-section {
	border-top: 1px solid #e5e7eb;
}
.fb-guide-section-switch {
	width: 100%; min-height: 46px; padding: 12px 16px;
	border: 0; background: transparent; color: #20262c;
	font: inherit; font-size: 14px; line-height: 20px; font-weight: 700;
	text-align: left; cursor: pointer;
}
.fb-guide-section-switch::after {
	content: '→'; float: right; color: #8a9198; font-weight: 400;
}
.fb-guide-nav-section.is-current .fb-guide-section-switch {
	background: #fff;
}
.fb-guide-nav-section.is-current .fb-guide-section-switch::after {
	content: '↓'; color: #20262c;
}
.fb-guide-section-switch:focus-visible {
	outline: 2px solid #5579a3; outline-offset: -2px;
}
.fb-guide-section-items {
	padding: 0 0 8px;
}
.fb-guide-list-item {
	display: block; width: 100%; border-top: 0; border-right: 0; border-bottom: 0;
	background: transparent; text-align: left; font: inherit;
	min-height: 44px; padding: 11px 16px; cursor: pointer;
	font-size: 14px; line-height: 20px; color: #333;
	position: relative;
	padding-right: 38px;
}
.fb-guide-list-item:hover { background: #f0f0f0; }
.fb-guide-list-item.is-active {
	background: transparent; font-weight: 700; color: #111;
}
.fb-guide-list-item.is-active::after {
	content: '\2713';
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; border-radius: 50%;
	display: grid; place-items: center;
	background: #20262c; color: #fff;
	font-size: 11px; line-height: 1; font-weight: 700;
}
/* "종이 종류" 항목 — 좌측 사이드바 최상단 */
.fb-guide-list-papers {
	font-weight: 600;
	color: #111;
}
/* 외부 컨테이너 — padding 0 (편집/보기 자식이 직접 padding 가짐) */
.fb-guide-detail {
	flex: 1; padding: 0; overflow-y: auto; min-width: 0;
}
/* 종이 가로 탭바 — 종이 카테고리 진입 시에만 노출 (JS 가 toggle) */
.fb-guide-paper-tabs {
	position: sticky;
	top: 0;
	z-index: 5;
	display: none;
	gap: 8px;
	padding: 12px 32px;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	white-space: nowrap;
}
.fb-guide-paper-tabs::-webkit-scrollbar { height: 4px; }
.fb-guide-paper-tabs::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }
.fb-guide-paper-tabs::-webkit-scrollbar-track { background: transparent; }
/* 종이 데이터가 없으면 탭바 숨김 — :empty 가 trim 필요 */
.fb-guide-paper-tabs:empty { display: none; }
.fb-guide-paper-tab {
	flex-shrink: 0;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid #e5e7eb;
	background: #fff;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: #555;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fb-guide-paper-tab:hover {
	background: #f9fafb;
	border-color: #cbd5e1;
	color: #111;
}
.fb-guide-modal .fb-guide-paper-tab[role="tab"].is-active,
.fb-guide-modal .fb-guide-paper-tab[role="tab"][aria-selected="true"] {
	background: #111;
	border-color: #111;
	color: #fff;
}
/* 보기 모드 콘텐츠 — 편집기와 동일한 padding */
.fb-guide-detail-content {
	padding: 28px 32px;
}
@media (min-width: 769px) {
	.fb-guide-detail-content .fb-guide-article > img,
	.fb-rt-editor .fb-guide-article > img,
	.fb-guide-detail-content .fb-guide-media,
	.fb-rt-editor .fb-guide-media {
		display: block;
		width: min(760px, 100%);
		max-width: none;
		margin: 20px auto 28px;
	}
	.fb-guide-detail-content .fb-guide-article > img,
	.fb-rt-editor .fb-guide-article > img,
	.fb-guide-detail-content .fb-guide-media img,
	.fb-rt-editor .fb-guide-media img {
		display: block;
		width: 100%;
		height: 320px;
		object-fit: cover;
		object-position: center;
		margin: 0;
		border-radius: 8px;
	}
	.fb-guide-detail-content .fb-guide-article > img,
	.fb-rt-editor .fb-guide-article > img { margin: 20px auto 28px; }
}
@media (max-width: 768px) {
	.fb-guide-detail-content .fb-guide-article > img,
	.fb-rt-editor .fb-guide-article > img,
	.fb-guide-detail-content .fb-guide-media img,
	.fb-rt-editor .fb-guide-media img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: center;
		margin: 0;
		border-radius: 8px;
	}
	.fb-guide-detail-content .fb-guide-article > img,
	.fb-rt-editor .fb-guide-article > img,
	.fb-guide-detail-content .fb-guide-media,
	.fb-rt-editor .fb-guide-media { margin: 18px 0 24px; }
}
/* 편집 모드 — 보기와 동일한 padding (좌우 32, 상하 28) */
.fb-rt-editor { padding: 28px 32px; }
.fb-guide-detail-content {
	font-size: 14px; line-height: 1.8; color: #333;
}
/* 통합 콘텐츠: h1=제목, p.lead=짧은 설명, hr=구분선 모두 본문 안에 */
.fb-guide-detail-content h1 { margin: 0 0 10px; font-size: 26px; font-weight: 700; color: #111; line-height: 1.3; }
.fb-guide-detail-content h2 {
	margin: 36px 0 16px; font-size: 20px; font-weight: 700; color: #111;
	padding-top: 28px; border-top: 1px solid #f0f0f0;
}
.fb-guide-detail-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 32px; }
.fb-guide-detail-content h3 { margin: 22px 0 8px; font-size: 17px; font-weight: 700; color: #111; }
.fb-guide-detail-content p.lead {
	font-size: 15px; line-height: 1.65; color: #666;
	margin: 0 0 18px;
}
.fb-guide-detail-content hr {
	border: none; border-top: 1px solid #f0f0f0; margin: 18px 0 24px;
}
.fb-guide-detail-content p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: #333; }
.fb-guide-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 24px 0 0 !important;
	padding: 0;
	border-top: 1px solid #dedad4;
	border-bottom: 1px solid #dedad4;
	list-style: none;
}
.fb-guide-facts li {
	display: grid;
	align-content: start;
	gap: 5px;
	min-width: 0;
	margin: 0;
	padding: 16px;
	border-right: 1px solid #ece9e4;
}
.fb-guide-facts li:last-child { border-right: 0; }
.fb-guide-facts strong { color: #20262c; font-size: 13px; line-height: 19px; }
.fb-guide-facts span { color: #4f5963; font-size: 14px; line-height: 21px; }
.fb-guide-media { padding: 0; }
.fb-guide-detail-content .fb-guide-image-unavailable {
	display: block;
	margin: 8px 0;
	padding: 10px 12px;
	border: 1px solid #dedad4;
	border-radius: 6px;
	background: #f7f5f1;
	color: #4f5963;
	font-size: 13px;
	line-height: 20px;
}
.fb-guide-media figcaption {
	margin-top: 9px;
	color: #6d747b;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
}
.fb-guide-order-note {
	margin-top: 32px;
	padding: 16px 0 0;
	border-top: 1px solid #dedad4;
}
.fb-guide-order-note strong { display: block; margin-bottom: 6px; color: #20262c; font-size: 15px; line-height: 22px; }
.fb-guide-order-note p { margin: 0; color: #5f6871; font-size: 14px; line-height: 22px; }
.fb-guide-detail-content .fb-rt-col p { font-size: 15px; line-height: 1.6; }
.fb-guide-detail-content .fb-rt-col p strong { color: #111; font-weight: 700; font-size: 16px; }
/* 히어로(첫번째 이미지) — 가로 직사각 강제 */
.fb-guide-detail-content img[data-hero="1"] { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; max-width: 100%; }
/* 추천 박스 안 작은 이미지 (object-fit cover) */
.fb-guide-detail-content .fb-rt-col img[data-cell="1"] { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.fb-guide-detail-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; display: block; }
.fb-guide-detail-content img[data-align="left"] { margin-right: auto; }
.fb-guide-detail-content img[data-align="center"] { margin-left: auto; margin-right: auto; }
.fb-guide-detail-content img[data-align="right"] { margin-left: auto; }
.fb-guide-detail-content img[data-size="small"] { max-width: 240px; }
.fb-guide-detail-content img[data-size="medium"] { max-width: 480px; }
.fb-guide-detail-content img[data-size="large"] { max-width: 100%; }
.fb-guide-detail-content .fb-guide-namecard-example {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid #e6e6e6;
}
.fb-guide-detail-content .fb-guide-namecard-example h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.fb-guide-detail-content .fb-guide-namecard-example figure { margin: 16px 0 0; }
.fb-guide-detail-content .fb-guide-namecard-example img {
	width: 100%;
	max-height: 560px;
	margin: 0;
	object-fit: contain;
	background: #e4e4e4;
}
.fb-guide-detail-content .fb-guide-namecard-example figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
}
.fb-guide-detail-content ul,
.fb-guide-detail-content ol { margin: 0 0 12px 20px; }
.fb-guide-detail-content li { margin-bottom: 4px; }
.fb-guide-detail-content blockquote {
	margin: 12px 0; padding: 12px 16px; border-left: 3px solid #3e6fef;
	background: #f8fafd; color: #555; font-style: italic;
}
.fb-guide-detail-content a { color: #3e6fef; text-decoration: underline; }
.fb-guide-overview h2 {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #ece9e4;
}
.fb-guide-overview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.fb-guide-overview-card,
.fb-guide-overview-paper {
	display: grid;
	width: 100%;
	min-width: 0;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid #dedad4;
	border-radius: 10px;
	background: #fff;
	color: #20262c;
	text-align: left;
	cursor: pointer;
}
.fb-guide-overview-card { grid-template-columns: 88px minmax(0, 1fr) 20px; align-items: start; }
.fb-guide-overview-card:not(:has(img)) { grid-template-columns: minmax(0, 1fr) 20px; }
.fb-guide-overview-card:hover,
.fb-guide-overview-paper:hover { border-color: #8f8a83; }
.fb-guide-overview-card:focus-visible,
.fb-guide-overview-paper:focus-visible { outline: 2px solid #5579a3; outline-offset: 2px; }
.fb-guide-overview-card img {
	width: 88px;
	height: 88px;
	margin: 0;
	border-radius: 8px;
	object-fit: cover;
}
.fb-guide-overview-copy { display: grid; min-width: 0; gap: 5px; }
.fb-guide-overview-copy strong,
.fb-guide-overview-paper strong { font-size: 15px; line-height: 22px; }
.fb-guide-overview-description { color: #6d747b; font-size: 14px; line-height: 20px; }
.fb-guide-overview-facts {
	display: grid;
	gap: 3px;
	margin-top: 3px;
}
.fb-guide-overview-fact {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 6px;
	color: #4f5963;
	font-size: 13px;
	line-height: 19px;
}
.fb-guide-overview-fact b { color: #20262c; font-size: 13px; font-weight: 700; }
.fb-guide-overview-fact span { min-width: 0; }
.fb-guide-overview-arrow { justify-self: end; color: #6d747b; }
.fb-guide-overview-paper {
	grid-template-columns: minmax(0, 1fr) 20px;
	min-height: 72px;
}
.fb-guide-overview-paper > span:first-child { display: grid; gap: 4px; }
.fb-guide-overview-paper small { color: #6d747b; font-size: 14px; line-height: 20px; }
@media (max-width: 768px) {
	.fb-guide-modal-inner { flex-direction: column; }
	.fb-guide-list {
		width: 100%; max-height: none; border-right: none; border-bottom: 1px solid #e5e7eb;
		display: grid; grid-template-columns: 1fr 1fr; overflow: visible; padding: 0;
	}
	.fb-guide-list { scrollbar-width: none; -ms-overflow-style: none; }
	.fb-guide-list::-webkit-scrollbar { display: none; }
	.fb-guide-nav-section { display: contents; }
	.fb-guide-section-switch { grid-row: 1; text-align: center; border-bottom: 1px solid #e5e7eb; }
	.fb-guide-nav-section[data-guide-section="production"] .fb-guide-section-switch { grid-column: 1; }
	.fb-guide-nav-section[data-guide-section="finishing"] .fb-guide-section-switch { grid-column: 2; }
	.fb-guide-section-switch::after { display: none; }
	.fb-guide-nav-section.is-current .fb-guide-section-switch { border-bottom: 2px solid #20262c; }
	.fb-guide-section-items { display: none; grid-row: 2; grid-column: 1 / -1; overflow-x: auto; padding: 0; scrollbar-width: none; }
	.fb-guide-section-items::-webkit-scrollbar { display: none; }
	.fb-guide-nav-section.is-current .fb-guide-section-items { display: flex; }
	.fb-guide-list-item { flex: 0 0 auto; width: auto; white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
	.fb-guide-list-item.is-active { border-left: none; border-bottom-color: #20262c; }
	.fb-guide-detail { padding: 0; }
	.fb-guide-detail-content { padding: 22px 18px 32px; }
	.fb-guide-overview-grid { grid-template-columns: minmax(0, 1fr); }
	.fb-guide-overview-card { grid-template-columns: 76px minmax(0, 1fr) 20px; padding: 14px 12px; }
	.fb-guide-overview-card img { width: 76px; height: 76px; }
	.fb-guide-facts { grid-template-columns: minmax(0, 1fr); }
	.fb-guide-facts li { padding: 13px 0; border-right: 0; border-bottom: 1px solid #ece9e4; }
	.fb-guide-facts li:last-child { border-bottom: 0; }
}
@media (max-width: 360px) {
	.fb-guide-overview-card { grid-template-columns: minmax(0, 1fr) 20px; }
	.fb-guide-overview-card img {
		grid-column: 1 / -1;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.fb-guide-overview-copy { grid-column: 1; }
	.fb-guide-overview-arrow { grid-column: 2; grid-row: 2; }
}

/* 활성 시 헤더와 body 사이 sub-divider 표시 (피그마 11:866 — 좌우 끝까지 풀-폭 라인) */
.opt-post-section.is-active .opt-sub-divider {
	display: block;
	height: 1px;
	background: var(--fb-color_border);
	/* .opt-post-sub padding(2px 16px 14px) 상쇄해서 카드 좌우 끝까지 */
	margin: 0 -16px 24px;
	border: none;
}
@media (max-width: 640px) {
	.opt-post-section.is-active .opt-sub-divider {
		margin: 0 -14px 24px;
	}
}
@media (max-width: 480px) {
	.opt-post-section.is-active .opt-sub-divider {
		margin: 0 -12px 24px;
	}
}
/* 활성 토글: 부드러운 컬러 */
.opt-post-section.is-active .opt-post-toggle {
	background: #444;
}
.opt-post-section.is-active .opt-post-toggle::after {
	transform: translateX(19px);
}
.opt-post-section.is-product-disabled {
	display: none;
}
.opt-post-section.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}
/* ===== 모바일 대응 ===== */
@media (max-width: 640px) {
	.opt-post-section.is-active .opt-post-icon { width: 44px; height: 44px; }
	.opt-post-section.is-active .opt-post-icon svg { width: 20px; height: 20px; }
	.opt-post-section.is-active .opt-post-header .opt-header-row { padding: 12px 14px; gap: 10px; }
	.opt-post-section.is-active .opt-post-desc { font-size: 11px; }
	.opt-post-sub { padding: 0 14px 24px; }
}
@media (max-width: 480px) {
	.opt-post-section.is-active .opt-post-icon { width: 40px; height: 40px; }
	.opt-post-section.is-active .opt-post-icon svg { width: 18px; height: 18px; }
	.opt-post-section.is-active .opt-post-header .opt-header-row { padding: 10px 12px; gap: 8px; }
	.opt-post-name { font-size: 13px; }
	.opt-post-section.is-active .opt-post-desc { font-size: 11px; }
	.opt-post-sub { padding: 0 12px 24px; }
	.opt-post-section { margin-bottom: var(--fb-gap_sm, 8px); }
}
.opt-post-sub {
	width: 100%;
	padding: 2px 16px 24px;        /* 하단 여백 — 추가하기 버튼 아래 24px 간격 (피그마 매치) */
	background: var(--fb-color_bg_white);
}
.opt-post-detail {
	padding: 16px;
}
/* ===== 금박 행 추가 방식 ===== */
.gold-stamp-list,
.laser-cut-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.gold-stamp-row,
.laser-cut-row {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.gold-stamp-row + .gold-stamp-row,
.laser-cut-row + .laser-cut-row {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}
/* 삭제 버튼: 행 우상단 절대 위치 */
.gold-stamp-row,
.gold3d-stamp-row,
.emboss-stamp-row,
.lp-stamp-row,
.laser-cut-row { position: relative; }
.gold-stamp-row > .btn-gold-remove,
.gold3d-stamp-row > .btn-gold-remove,
.emboss-stamp-row > .btn-gold-remove,
.lp-stamp-row > .btn-gold-remove,
.laser-cut-row > .btn-gold-remove {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fb-color_bg_section);        /* 회색 배경 — 항상 노출 */
	border: none;
	border-radius: 50%;          /* 원형 */
	color: #222;                 /* 검은색 X */
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.gold-stamp-row > .btn-gold-remove:hover,
.gold3d-stamp-row > .btn-gold-remove:hover,
.emboss-stamp-row > .btn-gold-remove:hover,
.lp-stamp-row > .btn-gold-remove:hover,
.laser-cut-row > .btn-gold-remove:hover {
	background: #e0e0e0;
	color: #000;
}
/* X 아이콘 사이즈 — 원형 안에 깔끔하게 */
.gold-stamp-row > .btn-gold-remove svg,
.gold3d-stamp-row > .btn-gold-remove svg,
.emboss-stamp-row > .btn-gold-remove svg,
.lp-stamp-row > .btn-gold-remove svg,
.laser-cut-row > .btn-gold-remove svg {
	width: 10px;
	height: 10px;
	stroke: currentColor;
}
.gold-stamp-row:only-child > .btn-gold-remove,
.gold3d-stamp-row:only-child > .btn-gold-remove,
.emboss-stamp-row:only-child > .btn-gold-remove,
.lp-stamp-row:only-child > .btn-gold-remove,
.laser-cut-row:only-child > .btn-gold-remove {
	display: none;
}

/* 영역 선택 모달로 자동 채워진 행 — 가로/세로/길이 셀렉트 잠금 (사용자가 변경 불가).
   해제하려면 [×]로 행 삭제 후 재추가. 화살표 SVG/native arrow 모두 제거 + 배경 #fafafa. */
.gold-stamp-row.is-region-locked select,
.gold3d-stamp-row.is-region-locked select,
.emboss-stamp-row.is-region-locked select,
.lp-stamp-row.is-region-locked select,
.laser-cut-row.is-region-locked select,
.gold-stamp-row.is-region-locked input[type="number"],
.gold3d-stamp-row.is-region-locked input[type="number"],
.emboss-stamp-row.is-region-locked input[type="number"],
.lp-stamp-row.is-region-locked input[type="number"],
.laser-cut-row.is-region-locked input[type="number"] {
	background-color: #fafafa !important;
	background-image: none !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	pointer-events: none;
	cursor: default;
	color: #555;
	padding-right: 12px;   /* 화살표 자리 보정 (없어진 만큼 오른쪽 여백 균형) */
}
/* 1도 + 파일 업로드 시 X 표시 (파일 삭제용) */
.gold-stamp-row:only-child.has-file > .btn-gold-remove,
.gold3d-stamp-row:only-child.has-file > .btn-gold-remove,
.emboss-stamp-row:only-child.has-file > .btn-gold-remove,
.lp-stamp-row:only-child.has-file > .btn-gold-remove,
.laser-cut-row:only-child.has-file > .btn-gold-remove {
	display: flex;
}
/* 행 내 업로드 영역 */
.gold-stamp-row .stamp-pdf-upload-area,
.gold3d-stamp-row .stamp-pdf-upload-area,
.emboss-stamp-row .stamp-pdf-upload-area,
.lp-stamp-row .stamp-pdf-upload-area,
.laser-cut-row .stamp-pdf-upload-area {
	margin-bottom: 4px;
}
/* 색상칩 행 — 행 자체 flex gap (12px) 으로 상하 간격 처리 */
.gold-stamp-color-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* stamp-row-info 의 padding-bottom — 인쇄 방식 카드(.opt-print-body-info)와 동일하게 20px */
.gold-stamp-row > .stamp-row-info,
.gold3d-stamp-row > .stamp-row-info,
.emboss-stamp-row > .stamp-row-info,
.lp-stamp-row > .stamp-row-info {
	padding-bottom: 20px;
}
/* 빈 stamp-pdf-upload-area — flex gap 영향 제거를 위해 완전히 collapse */
/* (2026-09-26 명함 상세 속도) «결과가 보이나»를 인라인 style 값([style*="display:none"])으로 가리던 :has() 는 쓰지 않는다 —
 *   :has() 안의 [style…] 은 페이지 어디서든 인라인 스타일을 한 번 쓸 때마다(jQuery show/hide·css 전부) 문서 전체 스타일을
 *   다시 계산하게 만들었다(폰 CPU 4배 실측 한 번에 ≈17ms, 이 규칙 셋을 걷으면 0ms — 부팅 한 번에 수십~백 번). 보이기 상태는
 *   factory.js factoryBSetStampPdfResultShown 이 결과 요소에 다는 클래스(.is-stamp-pdf-result-shown)가 말한다. */
.gold-stamp-row .stamp-pdf-upload-area:not(:has(.stamp-pdf-result.is-stamp-pdf-result-shown)),
.gold3d-stamp-row .stamp-pdf-upload-area:not(:has(.stamp-pdf-result.is-stamp-pdf-result-shown)),
.emboss-stamp-row .stamp-pdf-upload-area:not(:has(.stamp-pdf-result.is-stamp-pdf-result-shown)),
.lp-stamp-row .stamp-pdf-upload-area:not(:has(.stamp-pdf-result.is-stamp-pdf-result-shown)),
.laser-cut-row .stamp-pdf-upload-area:not(:has(.stamp-pdf-result.is-stamp-pdf-result-shown)),
.opt-post-card .stamp-pdf-upload-area:not(:has(.stamp-pdf-result.is-stamp-pdf-result-shown)) {
	display: none;
}
.gold-stamp-color-row .gold-color-chips {
	display: flex;
	gap: 10px;
	flex: 1;
}
/* 2행: 가로×세로 셀렉트 — 좌우 여백 채움 */
.gold-stamp-size-row,
.emboss-stamp-row .emboss-size-row,
.lp-stamp-row .lp-size-row,
.gold3d-stamp-row .gold-stamp-size-row,
.laser-cut-row .laser-cut-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
}
.gold-stamp-size-row .opt-sub-select,
.emboss-stamp-row .emboss-size-row .opt-sub-select,
.lp-stamp-row .lp-size-row .opt-sub-select,
.gold3d-stamp-row .gold-stamp-size-row .opt-sub-select {
	flex: 1 1 0;                   /* basis 0 — 콘텐츠 길이 무시하고 동등 분배 */
	min-width: 0;                  /* 길이 텍스트 잘리도록 */
	max-width: 100%;
}
.gold-stamp-size-row .opt-size-x {
	font-size: 14px;
	color: var(--fb-color_text_muted);
	flex-shrink: 0;
}
/* 행 삭제 버튼 (✕) */
.btn-gold-remove {
	width: 26px;
	height: 26px;
	border: none;
	background: none;
	color: var(--fb-color_text_disabled);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	transition: all 0.15s;
	flex-shrink: 0;
}
.btn-gold-remove:hover {
	color: #c62828;
	background: #fef2f2;
}
.btn-gold-add, .btn-gold3d-add, .btn-emboss-add, .btn-lp-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: none;
	background: none;
	color: #aaa;
	font-size: 13px;
	cursor: pointer;
	padding: 6px 0;
	transition: color 0.15s;
}
.btn-gold-add:hover, .btn-gold3d-add:hover, .btn-emboss-add:hover, .btn-lp-add:hover {
	color: var(--fb-color_brand_accent);
}
.gold-stamp-add, .gold3d-stamp-add, .emboss-stamp-add, .lp-stamp-add {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--fb-color_bg_section);
	text-align: center;
}

/* 엠보싱: 금박과 동일 추가 구조 */
.emboss-stamp-list { display: flex; flex-direction: column; gap: 8px; }
.emboss-stamp-row { display: flex; flex-direction: column; gap: 0; position: relative; }
.emboss-stamp-row + .emboss-stamp-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; }
.emboss-stamp-row.is-dropdown-open { z-index: 101; }
.emboss-stamp-row .emboss-type-row { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.emboss-type-select-wrap { flex: 1; position: relative; }
.emboss-type-box {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 14px; border: 1px solid var(--fb-color_text_disabled); border-radius: 3px;
	background: var(--fb-color_bg_white); cursor: pointer; min-height: 40px; font-size: 14px; color: var(--fb-color_text_primary);
}
.emboss-type-box:hover { border-color: var(--fb-color_text_muted); }
.emboss-type-dropdown {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
	background: var(--fb-color_bg_white); border: 1px solid var(--fb-color_border_default); border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1); margin-top: 4px;
	max-height: 320px; overflow-y: auto;
}
.emboss-type-option {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 12px 14px; cursor: pointer; transition: background 0.1s;
	border-bottom: 1px solid var(--fb-color_bg_section);
}
.emboss-type-option:last-child { border-bottom: none; }
.emboss-type-option:hover { background: #f8f8f8; }
.emboss-type-option.is-selected { background: #f7f7f7; }
.emboss-type-option.is-selected::after {
	content: '';
	width: 18px; height: 18px; flex-shrink: 0; align-self: center;
	background: var(--fb-color_text_primary) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
	border-radius: 50%;
}
.emboss-type-thumb {
	width: 44px; height: 44px; flex-shrink: 0;
	background: var(--fb-color_bg_section); border: 1px solid #e5e5e5; border-radius: 3px;
	display: flex; align-items: center; justify-content: center; color: var(--fb-color_text_muted);
}
.emboss-type-option.is-selected .emboss-type-thumb { color: #555; background: #eee; }
.emboss-type-info { flex: 1; min-width: 0; }
.emboss-type-info strong { display: block; font-size: 13px; font-weight: 600; color: var(--fb-color_text_primary); margin-bottom: 3px; }
.emboss-type-info span { display: block; font-size: 12px; color: var(--fb-color_text_muted); line-height: 1.5; }
.emboss-stamp-row .emboss-size-row { display: flex; align-items: center; gap: 8px; }
.emboss-stamp-row .emboss-size-row .opt-sub-select { flex: 1; }

/* 3D박엠보싱: 금박과 동일 구조 */
.gold3d-stamp-list { display: flex; flex-direction: column; gap: 8px; }
.gold3d-stamp-row { display: flex; flex-direction: column; gap: 0; }
.gold3d-stamp-row + .gold3d-stamp-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; }
.gold3d-stamp-row .gold-stamp-color-row { display: flex; align-items: center; gap: 8px; }
.gold3d-stamp-row .gold-stamp-color-row .gold-color-chips { display: flex; gap: 10px; flex: 1; }
.gold3d-stamp-row .gold-stamp-size-row { display: flex; align-items: center; gap: 8px; }
.gold3d-stamp-row .gold-stamp-size-row .opt-sub-select { flex: 1; }

/* 레터프레스 */
.lp-stamp-list { display: flex; flex-direction: column; gap: 8px; }
.lp-stamp-row { display: flex; flex-direction: column; gap: 0; }
.lp-stamp-row + .lp-stamp-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; }
.lp-stamp-row .lp-ink-row { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.lp-ink-select-wrap {
	flex: 1;
	position: relative;
}
.lp-ink-select-wrap .lp-ink-select { width: 100%; }
/* 잉크 선택 박스 — 톰슨 탈지 박스(.thomson-talji-box)와 동일 디자인 */
.lp-ink-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	background: var(--fb-color_bg_white);
	cursor: pointer;
	height: 50px;
	min-height: 50px;
	font-size: 14px;
	color: var(--fb-color_text_primary);
	transition: border-color 0.15s;
}
.lp-ink-box:hover {
	border-color: var(--fb-color_text_muted);
}
.lp-ink-box.is-open {
	border-color: #1b2631;
}
.lp-ink-box-text {
	flex: 1;
	font-size: 14px;
	color: var(--fb-color_text_primary);
	font-weight: 400;
}
.lp-ink-chevron {
	flex-shrink: 0;
	transition: transform 0.2s;
}
.lp-ink-box.is-open .lp-ink-chevron {
	transform: rotate(180deg);
}
/* 드롭다운 메뉴 — 피그마 11:1212 */
.lp-ink-dropdown {
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	overflow: hidden;
}
.lp-ink-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	transition: background 0.15s;
}
.lp-ink-option:hover {
	background: #f5f8ff;
}
.lp-ink-option.is-selected {
	background: var(--fb-color_bg_subtle);
}
.lp-ink-option + .lp-ink-option {
	border-top: 1px solid var(--fb-color_border);
}
.lp-ink-option-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lp-ink-option-text {
	flex: 1;
	min-width: 0;
}
.lp-ink-option-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin: 0 0 2px;
	line-height: 1.2;
}
.lp-ink-option-desc {
	font-size: 13px;
	font-weight: 300;
	color: #888;
	margin: 0;
	line-height: 1.4;
}
.lp-stamp-row .lp-size-row { display: flex; align-items: center; gap: 8px; }
.lp-stamp-row .lp-size-row .opt-sub-select { flex: 1; }
.lp-stamp-row:only-child .stamp-row-header .btn-gold-remove { display: none; }

/* 톰슨 */
.laser-limit-notice {
	font-size: 11px;
	color: #aaa;
	margin-top: 8px;
}
.laser-input-label {
	font-size: 13px;
	color: var(--fb-color_text_secondary);
	white-space: nowrap;
}
.laser-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.laser-line-length {
	width: 100%;
	height: 50px;                 /* 다른 셀렉트와 동일한 높이 */
	min-height: 50px;
	padding: 0 14px;              /* 좌우 동일 여백 — CM suffix 는 input 옆 별도 위치 */
	font-size: 14px;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	background: var(--fb-color_bg_white);
	color: var(--fb-color_text_primary);
	outline: none;
	box-sizing: border-box;
	-moz-appearance: textfield;
}
/* CM suffix — 숫자 입력 시 "12 CM" 처럼 CM 단위 표기 (피그마 매치) */
.laser-input-wrap {
	position: relative;
	width: 100%;
}
.laser-input-cm-suffix {
	position: absolute;
	top: 0;
	height: 50px;
	display: none;                 /* 기본 숨김 — JS 가 값 있을 때만 표시 */
	align-items: center;
	font-size: 14px;
	color: var(--fb-color_text_primary);
	font-weight: 400;
	pointer-events: none;
	white-space: nowrap;
	padding-left: 4px;
}
.laser-input-wrap.has-value .laser-input-cm-suffix {
	display: flex;
}
.laser-line-length::placeholder {
	color: var(--fb-color_text_primary);
	font-size: 14px;
}
.laser-line-length::-webkit-outer-spin-button,
.laser-line-length::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.laser-line-length:hover {
	border-color: var(--fb-color_text_muted);
}
.laser-line-length:focus {
	border-color: var(--fb-color_text_secondary);
}
.laser-input-unit {
	position: absolute;
	right: 12px;
	font-size: 13px;
	/* 공통 muted 는 2.85:1 이라 「mm」가 입력칸 옆에서 거의 안 보였다(전수 조사 20260921). */
	color: var(--bj-muted, #66635e);
	pointer-events: none;
	font-weight: 500;
}
/* 레이저 PDF 업로드 — stamp 업로드와 통일 */
.laser-pdf-upload-area {
	margin-bottom: 10px;
}
.laser-pdf-dropzone {
	border: 1px dashed #d0d0d0;
	border-radius: 6px;
	padding: 16px 12px;
	min-height: 52px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.laser-pdf-dropzone:hover, .laser-pdf-dropzone.drag-over {
	border-color: var(--fb-color_brand_accent);
	background: #fff8f0;
}
.laser-pdf-dropzone svg { opacity: 0.4; }
.laser-pdf-dropzone:hover svg { opacity: 0.7; }
.laser-pdf-dropzone-text {
	font-size: 12px;
	color: var(--fb-color_text_muted);
}
.laser-pdf-result {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 10px 12px;
	background: var(--fb-color_bg_subtle);
}
.laser-pdf-file-info {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--fb-color_text_primary);
}
.laser-pdf-filename {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}
.laser-pdf-analysis {
	margin-top: 6px;
	font-size: 12px;
	color: var(--fb-color_text_secondary);
}
.laser-pdf-analysis .pdf-length-result {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #2e7d32;
	font-weight: 600;
}
.laser-pdf-analysis .pdf-length-result svg {
	flex-shrink: 0;
}
.laser-pdf-analysis .pdf-length-detail {
	font-size: 11px;
	color: var(--fb-color_text_muted);
	margin-top: 4px;
}
.laser-pdf-analysis .pdf-analyzing {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--fb-color_brand_accent);
}
.laser-pdf-analysis .pdf-analyzing::before {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid var(--fb-color_brand_accent);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
.laser-pdf-analysis .pdf-error {
	color: #c62828;
}
/* 금박/엠보싱 등 공통 PDF 업로드 */
.stamp-pdf-upload-area {
	margin-bottom: 0;       /* 결과 표시 시에만 아래 margin 부여 */
}
/* 결과 표시 상태는 클래스로 — 위 «빈 영역 접기»와 같은 이유(:has 안의 [style…] 금지). */
.stamp-pdf-upload-area:has(.stamp-pdf-result.is-stamp-pdf-result-shown) {
	margin-bottom: 4px;
}
/* 1도 행: 에디터/템플릿 인라인 아이콘 버튼 (제작 파일 업로드 위에 한 줄)
   - 기본은 숨김 (display:none). 인쇄 방법이 '인쇄 안함' 일 때만 노출 (body.fb-print-none).
   - 셀렉트 바와 동일한 40px 높이로 통일. */
.stamp-pdf-actions {
	display: none;
	gap: 8px;
	margin-bottom: 8px;
}
body.fb-print-none .stamp-pdf-actions {
	display: flex;
}
.stamp-pdf-action-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	background: var(--fb-color_bg_white);
	font-size: 13px;
	font-weight: 500;
	color: #555;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s;
	line-height: 1;
	box-sizing: border-box;
}
.stamp-pdf-action-btn:hover {
	border-color: var(--fb-color_text_muted);
	background: var(--fb-color_bg_subtle);
	color: var(--fb-color_text_primary);
}
.stamp-pdf-action-btn svg {
	flex-shrink: 0;
	color: #888;
	width: 16px;
	height: 16px;
}
.stamp-pdf-action-btn:hover svg {
	color: #555;
}
/* 후가공 dropzone — 피그마 11:882 (bg var(--fb-color_bg_subtle), 2px dashed e5e5e5, 블루 텍스트) */
.stamp-pdf-dropzone {
	background: var(--fb-color_bg_subtle);
	border: 2px dashed #e5e5e5;
	border-radius: 3px;
	padding: 20px;
	min-height: 60px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--fb-color_brand_primary);
}
.stamp-pdf-dropzone .stamp-pdf-dropzone-text {
	color: var(--fb-color_brand_primary);
	font-size: 14px;
	font-weight: 300;
}
.stamp-pdf-dropzone:hover, .stamp-pdf-dropzone.drag-over,
.stamp-pdf-upload-area.drag-over .stamp-pdf-dropzone {
	border-color: var(--fb-color_brand_primary);
	background: #f5f8ff;
}
/* 파일 업로드 완료 상태에서 드래그 시 교체 피드백 */
.stamp-pdf-upload-area.drag-over .stamp-pdf-result {
	border-color: var(--fb-color_brand_accent);
	background: #fff8f0;
}
.stamp-pdf-dropzone svg { opacity: 0.4; width: 19px; height: 19px; }
.stamp-pdf-dropzone:hover svg { opacity: 0.7; }
/* 드롭존 내부 에러 표시 */
.stamp-pdf-dropzone.has-error {
	flex-direction: column;
	border-color: #f5c6c6;
	background: #fff8f8;
	gap: 4px;
	cursor: pointer;
}
.stamp-pdf-dropzone.has-error:hover {
	border-color: var(--fb-color_brand_accent);
	background: #fff8f0;
}
.stamp-dropzone-error {
	text-align: center;
}
.stamp-dropzone-error-sub {
	font-size: 12px;
	color: #555;
}
.stamp-dropzone-error-msg {
	font-size: 11px;
	color: #d32f2f;
	margin-top: 2px;
}
.stamp-pdf-dropzone-text {
	font-size: 12px;
	color: var(--fb-color_text_muted);
}
.stamp-pdf-result {
	border: 0;
	background: none;
	border-radius: 0;
	padding: 0 0 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--fb-color_border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-right: 32px;   /* 우측 상단 X 버튼 자리 */
	position: relative;
}
/* X 버튼 — 행 우상단 (gold/emboss/letterpress 의 .btn-gold-remove 와 동일 위치 패턴) */
.stamp-pdf-upload-area { position: relative; }
.stamp-pdf-clear {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fb-color_bg_section);
	border: 0;
	border-radius: 50%;
	color: #222;
	cursor: pointer;
	padding: 0;
	z-index: 2;
	transition: background 0.15s, color 0.15s;
}
.stamp-pdf-clear:hover { background: #e0e0e0; color: #000; }
.stamp-pdf-clear svg { width: 10px; height: 10px; stroke: currentColor; }
@media (max-width: 640px) {
	.stamp-pdf-result {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}
	.stamp-pdf-analysis {
		text-align: left !important;
	}
}
.stamp-pdf-file-info {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	color: var(--fb-color_text_primary);
	flex: 1;
	min-width: 0;
}
.stamp-pdf-filename {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	font-size: 14px;
}
.stamp-pdf-analysis {
	margin-top: 0;
	font-size: 14px;
	color: #777;
	flex-shrink: 0;
	text-align: right;
}
.stamp-pdf-analysis .pdf-bbox-result {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #555;
	font-weight: 500;
	font-size: 14px;
}
.stamp-pdf-analysis .pdf-bbox-result svg { flex-shrink: 0; }
.stamp-pdf-analysis .pdf-analyzing {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--fb-color_brand_accent);
}
.stamp-pdf-analysis .pdf-analyzing::before {
	content: '';
	width: 12px; height: 12px;
	border: 2px solid var(--fb-color_brand_accent);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
.stamp-pdf-analysis .pdf-error { color: #c62828; }
.thomson-pdf-upload-area {
	margin-bottom: 8px;
}
.thomson-pdf-dropzone {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	border: 1px dashed var(--fb-color_text_disabled);
	border-radius: 6px;
	background: var(--fb-color_bg_subtle);
	cursor: pointer;
	font-size: 12px;
	color: #888;
	transition: border-color 0.15s, background 0.15s;
}
.thomson-pdf-dropzone:hover {
	border-color: var(--fb-color_text_muted);
	background: #f5f5f5;
}
.thomson-pdf-result {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 10px 12px;
	background: var(--fb-color_bg_subtle);
}
.thomson-pdf-file-info {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--fb-color_text_primary);
}
.thomson-pdf-filename {
	flex: 1;
}
.thomson-pdf-clear {
	background: none;
	border: none;
	font-size: 16px;
	color: var(--fb-color_text_muted);
	cursor: pointer;
	padding: 0 2px;
	line-height: 1;
}
.thomson-pdf-clear:hover {
	color: #c62828;
}
.thomson-pdf-analysis {
	margin-top: 4px;
	font-size: 11px;
}
.thomson-info-row {
	font-size: 13px;
	color: var(--fb-color_text_secondary);
	padding: 2px 0 4px;
}
.thomson-cut-info {
	font-weight: 500;
}
.thomson-talji-wrap,
.folding-type-wrap {
	position: relative;
}
.thomson-talji-box,
.folding-type-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	background: var(--fb-color_bg_white);
	cursor: pointer;
	height: 50px;
	min-height: 50px;
	font-size: 14px;
	color: var(--fb-color_text_primary);
}
.thomson-talji-box:hover,
.folding-type-box:hover { border-color: var(--fb-color_text_muted); }
/* 접지 방식 드롭다운 — 톰슨 탈지와 동일 패턴 */
.folding-type-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 4px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	margin-top: 4px;
	max-height: 360px;
	overflow-y: auto;
}
.folding-type-dropdown.is-floating {
	position: fixed;
	top: auto;
	left: auto;
	right: auto;
	z-index: 10000;
	margin-top: 0;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}
.folding-type-option {
	padding: 12px 14px;
	cursor: pointer;
	transition: background 0.15s;
	border-bottom: 1px solid var(--fb-color_bg_section);
}
.folding-type-option:last-child {
	border-bottom: none;
}
.folding-type-option:hover {
	background: #f5f8ff;
}
.folding-type-option.is-selected {
	background: var(--fb-color_bg_subtle);
}
.folding-type-option-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin-bottom: 2px;
}
.folding-type-option-price {
	font-size: 13px;
	font-weight: 300;
	color: #888;
}
.thomson-talji-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 4px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	margin-top: 4px;
	max-height: 360px;
	overflow-y: auto;
}
/* JS 에서 body 에 append 하는 portal 모드 — stacking context 완전 탈출 */
.thomson-talji-dropdown.is-floating {
	position: fixed;
	top: auto;
	left: auto;
	right: auto;
	z-index: 10000;
	margin-top: 0;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

/* 상단 썸네일 자리에 주입되는 파란 접힘 시뮬 미니 뷰 */
.upload-detail-thumb-left { position: relative; overflow: hidden; }
/* 자유형 봉투: "완성 크기 입력" 카드(env-custom-editor)는 완전히 대체됨 —
   크기 입력은 upload-after 의 봉투 크기, PDF 는 썸네일 하단 버튼, 프리뷰/접힘은 돋보기 모달 로 이전.
   DOM 자체는 제거하지 않고 숨겨 sync/scale 로직(.env-cd-w/h)이 계속 동작하도록 함. */
.env-custom-editor { display: none !important; }

.env-thumb-svg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f1f1;
	padding: 10%;                  /* 컨테이너 비율 기준 봉투 주변 여유 공간 */
	box-sizing: border-box;
	min-height: 180px;
	transition: opacity .18s ease, box-shadow .18s ease;
	cursor: pointer;               /* 클릭 = 확대 모달 오픈 */
}
.env-thumb-dieline-overlay { cursor: pointer; }
/* 썸네일 hover 시 강조 효과 없음 (호버 시 테두리·그림자 변경 X) */
.env-thumb-svg svg {
	max-width: 100%;
	max-height: 100%;
}
/* 칼선 호버 오버레이 — 다운로드 버튼 hover 시 슬라이드 인 */
.env-thumb-dieline-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fb-color_bg_white);
	padding: 6px;
	box-sizing: border-box;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
	z-index: 3;
}
.env-thumb-dieline-overlay svg { max-width: 100%; max-height: 100%; }
.upload-detail-thumb-left.is-dieline-hover .env-thumb-dieline-overlay { opacity: 1; }
.upload-detail-thumb-left.is-dieline-hover .env-thumb-svg { opacity: 0; }

/* 돋보기 버튼 — 이미지 영역 우측 하단 오버레이 (원위치) */
.env-thumb-tools {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 5;
}
.env-thumb-zoom-btn {
	height: 28px;
	min-width: 28px;
	padding: 0 6px;
	border-radius: 14px;
	background: transparent;
	border: none;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease, padding .15s ease;
	font-size: 12px;
	font-weight: 600;
}
.env-thumb-zoom-btn svg {
	width: 20px; height: 20px;
	stroke-width: 1.6;
	flex: 0 0 auto;
}
.env-thumb-zoom-label {
	display: none;                 /* 기본 hidden */
	color: inherit;
	white-space: nowrap;
	padding-right: 2px;
}
/* 썸네일 hover 시 돋보기 버튼을 "🔍 자세히" pill 로 확장 */
.upload-detail-thumb-left:hover .env-thumb-zoom-btn {
	background: rgba(26, 115, 232, 0.95);
	color: var(--fb-color_bg_white);
	padding: 0 10px;
}
.upload-detail-thumb-left:hover .env-thumb-zoom-label { display: inline; }

/* 썸네일 세로 컬럼 — 이미지(180px) + 하단 별도 액션 영역 */
.upload-detail-thumb-col {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	align-self: flex-start;
	gap: 6px;
}
.upload-detail-thumb-col .upload-detail-thumb-left { align-self: stretch; }
.env-thumb-actions {
	display: flex;
	justify-content: center;
}
.env-thumb-download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 7px 10px;
	border: 1px solid #1a73e8;
	background: var(--fb-color_bg_white);
	color: #1a73e8;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.env-thumb-download-btn:hover {
	background: #1a73e8;
	color: var(--fb-color_bg_white);
	box-shadow: 0 4px 10px rgba(26,115,232,0.25);
}
.env-thumb-download-btn svg { flex: 0 0 auto; }
@media (max-width: 760px) {
	.upload-detail-thumb-col { width: 100%; }
}

/* ────── 확대 모달 ────── */
body.env-zoom-open { overflow: hidden; }
.env-zoom-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.env-zoom-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
}
.env-zoom-dialog {
	position: relative;
	background: var(--fb-color_bg_white);
	border-radius: 12px;
	width: min(920px, 92vw);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 60px rgba(0,0,0,0.3);
	overflow: hidden;
}
.env-zoom-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #eef2f7;
}
.env-zoom-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.env-zoom-close {
	width: 32px; height: 32px;
	border: none;
	background: transparent;
	color: #64748b;
	font-size: 18px;
	cursor: pointer;
	border-radius: 6px;
}
.env-zoom-close:hover { background: #f1f5f9; color: #0f172a; }

.env-zoom-tabs {
	display: flex;
	gap: 2px;
	padding: 0 18px;
	border-bottom: 1px solid #eef2f7;
	background: var(--fb-color_bg_subtle);
}
.env-zoom-tab {
	background: transparent;
	border: none;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.env-zoom-tab:hover { color: #0f172a; }
.env-zoom-tab.is-active {
	color: #1a73e8;
	border-bottom-color: #1a73e8;
	background: var(--fb-color_bg_white);
}

.env-zoom-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 520px;             /* summary 50 + gap 14 + stage 381 + padding 32 + 여유 = 안정 */
	background: #f1f1f1;
	overflow: hidden;              /* 스테이지가 자체 스크롤 처리 */
}
.env-zoom-stage {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 14px;
	box-sizing: border-box;
	overflow: auto;                /* 내용이 넘치면 스테이지 자체가 스크롤 */
}
.env-zoom-stage.is-active { display: flex; }
.env-zoom-stage-dieline { background: var(--fb-color_bg_white); }
.env-zoom-stage-dieline > svg { width: 100%; height: 100%; max-height: calc(90vh - 240px); }

/* 접힘 탭 — 내용이 세로로 흐르고 상단부터 시작, 짧으면 중앙 정렬되도록 auto 마진 */
.env-zoom-stage-fold.is-active {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 16px;
}

/* buildFoldOverlapView 의 자연 크기(예: 520×380) 유지 — 라벨은 HTML 절대위치라 확대하면 어긋남 */
.env-zoom-stage-fold .env-fold-sim {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: auto;                  /* 짧으면 수직 중앙, 길면 상단 시작 */
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	width: auto;                   /* 자연 크기 사용 */
	max-width: 100%;
}
.env-zoom-stage-fold .env-fold-summary {
	background: var(--fb-color_bg_white);
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 10px 16px;
	box-sizing: border-box;
	flex: 0 0 auto;                /* 요약 바는 절대 눌리지 않게 */
	box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.env-zoom-stage-fold .fold-stage-wrap {
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
}
/* envelope-ui.css 의 .env-fold-sim .fold-overlap-stage 배경/보더 규칙보다 뒤에 선언되도록 specificity 3 로 override */
.env-zoom-modal .env-zoom-stage-fold .fold-overlap-stage {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0;
	box-sizing: content-box;
}
/* 본체 사각 (white fill + gray stroke) 은 파란 flap 시인성 위해 투명 처리 + stroke 제거 */
.env-zoom-modal .env-zoom-stage-fold .fold-overlap-stage svg > g > rect {
	stroke: none !important;   /* 회색 테두리만 제거, 연한 파랑 body fill 은 유지 */
}
.env-zoom-modal .env-zoom-stage-fold .env-fold-legend { display: none; }

/* 3D 탭 — 배경/테두리/그림자 제거해 봉투만 시원하게 보이도록 */
.env-zoom-modal .env-zoom-stage-threed .env-fold-sim {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.env-zoom-modal .env-zoom-stage-threed .fold-stage-wrap {
	background: transparent !important;
}
.env-zoom-modal .env-zoom-stage-threed .env-fold-controls {
	background: transparent !important;
	border: none !important;
}
.env-zoom-modal .env-zoom-stage-threed.is-active {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 8px;
}

/* YouTube 스타일 중앙 플레이 버튼 — 스테이지 위에 오버레이 */
.fold-play-overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border-radius: 50%;
	border: none;
	background: rgba(15, 23, 42, 0.75);
	color: var(--fb-color_bg_white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	padding: 0;
	transition: background .15s ease, transform .15s ease, opacity .25s ease;
	backdrop-filter: blur(2px);
}
.fold-play-overlay:hover {
	background: rgba(26, 115, 232, 0.92);
	transform: translate(-50%, -50%) scale(1.05);
}
.fold-play-overlay svg {
	margin-left: 3px;   /* optical centering for triangle */
	pointer-events: none;
}
.fold-play-overlay.is-hidden {
	opacity: 0;
	pointer-events: none;
}
.fold-play-overlay.is-replay svg {
	display: none;
}
.fold-play-overlay.is-replay::before {
	content: '↻';
	font-size: 36px;
	line-height: 1;
	margin-left: 0;
	font-weight: 400;
}

/* 모달 여백 조정 — 풀칠 스테이지(520×380) + 요약이 뷰포트 대비 안전히 들어가도록 */
.env-zoom-dialog { width: min(960px, 94vw); }
.env-zoom-body { flex: 1 1 auto; }

/* 메타 + 푸터를 한 행으로 통합해 푸터 여백 어색함 해소 */
.env-zoom-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 20px;
	border-top: 1px solid #eef2f7;
	background: var(--fb-color_bg_subtle);
	flex-wrap: wrap;
}
.env-zoom-meta-row { display: flex; flex-wrap: wrap; gap: 18px; }
.env-zoom-meta-cell {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 13px;
	color: #475569;
}
.env-zoom-meta-cell em { font-style: normal; color: #94a3b8; }
.env-zoom-meta-cell b { color: #0f172a; font-weight: 700; }

.env-zoom-footer { display: none; }          /* 푸터는 메타 영역 우측으로 이동 */
.env-zoom-download {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid #1a73e8;
	background: #1a73e8;
	color: var(--fb-color_bg_white);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	flex: 0 0 auto;
	white-space: nowrap;
}
.env-zoom-download:hover { background: #1566cc; border-color: #1566cc; }
.env-zoom-download svg { flex: 0 0 auto; }

/* ────── 봉투 종류 선택 드롭다운 (탈지 드롭다운과 동일 패턴) ────── */
.env-preset-picker { position: relative; }
.env-preset-box {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 14px;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	background: var(--fb-color_bg_white);
	cursor: pointer;
	height: 50px;
	min-height: 50px;
	font-size: 14px;
	color: var(--fb-color_text_primary);
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	text-align: left;
}
.env-preset-box:hover { border-color: var(--fb-color_text_muted); }
/* 트리거(선택된 상태)에서는 아이콘 숨김 — 드롭다운 옵션에서만 노출 */
.env-preset-box-thumb { display: none; }
.env-preset-box-thumb img {
	width: 100%; height: 100%; object-fit: cover;
}
/* 라인 아이콘 / 관리자 등록 이미지 공용 컨테이너 — 배경·보더 제거, 아이콘만 부각 */
.env-preset-box-thumb-icon,
.env-preset-opt-thumb-icon {
	padding: 4px;
	box-sizing: border-box;
	background: transparent;
	border: none;
	color: #64748b;
}
.env-preset-box-thumb-icon img,
.env-preset-opt-thumb-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.env-preset-box-thumb-icon svg,
.env-preset-opt-thumb-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* 봉투 크기 입력 아래 — "펼침 크기" 카드 (재단할 종이 크기 안내) */
/* 펼침 크기 — 이미지 영역 안쪽 좌측 하단, 박스/테두리 없이 검정 텍스트만 깔끔하게 노출 */
.env-size-unfolded-wrap {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #1b2631;
	font-weight: 400;
	z-index: 4;
	pointer-events: none;
}
.env-size-unfolded-label {
	color: #1b2631;
	font-weight: 400;
}
.env-size-unfolded-value {
	color: #1b2631;
	font-weight: 400;
	font-size: 12px;
}
.env-preset-box-info {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 2px;
}
.env-preset-box-name {
	font-size: 14px; font-weight: 400; color: var(--fb-color_text_primary);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.env-preset-box-sub {
	font-size: 12px; color: #888;
}
.env-preset-box-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	color: #656565;
	margin-left: 4px;
	flex-shrink: 0;
}
.env-preset-box-arrow svg {
	width: 15px;
	height: 9px;
	display: block;
}

.env-preset-dropdown {
	background: var(--fb-color_bg_white);
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 4px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
	max-height: 360px;
	overflow-y: auto;
}
.env-preset-dropdown.is-floating {
	position: fixed;
	z-index: 10000;
}
.env-preset-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--fb-color_bg_section);
	transition: background 0.1s;
	width: 100%;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	background: var(--fb-color_bg_white);
	font: inherit;
	text-align: left;
}
.env-preset-option:last-child { border-bottom: none; }
.env-preset-option:hover { background: #f8f8f8; }
.env-preset-option.is-selected { background: #f7f7f7; }
.env-preset-option.is-selected::after {
	content: '';
	width: 18px; height: 18px; flex-shrink: 0; margin-left: auto;
	background: var(--fb-color_text_primary) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
	border-radius: 50%;
}
.env-preset-opt-thumb {
	width: 44px; height: 44px; flex-shrink: 0;
	background: var(--fb-color_bg_section); border: 1px solid #e5e5e5; border-radius: 3px;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.env-preset-opt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.env-preset-opt-placeholder {
	width: 44px; height: 44px;
	background: linear-gradient(135deg, #e5e5e5, var(--fb-color_bg_section));
	border-radius: 3px;
}
.env-preset-option .env-preset-opt-placeholder { width: 100%; height: 100%; }
.env-preset-opt-info {
	display: flex; flex-direction: column; gap: 2px;
	min-width: 0; flex: 1;
}
.env-preset-opt-info strong { font-weight: 600; color: var(--fb-color_text_primary); font-size: 14px; }
.env-preset-opt-info span { font-size: 12px; color: #888; }
.thomson-talji-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
	transition: background 0.1s;
	border-bottom: 1px solid var(--fb-color_bg_section);
}
.thomson-talji-option:last-child { border-bottom: none; }
.thomson-talji-option:hover { background: #f8f8f8; }
.thomson-talji-option.is-selected { background: #f7f7f7; }
.thomson-talji-option.is-selected::after {
	content: '';
	width: 18px; height: 18px; flex-shrink: 0; margin-left: auto;
	background: var(--fb-color_text_primary) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
	border-radius: 50%;
}
.thomson-talji-thumb {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: var(--fb-color_bg_section);
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex-wrap: wrap;
	padding: 6px;
}
.thomson-talji-thumb .talji-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fb-color_text_muted);
}
.thomson-talji-thumb .talji-num {
	font-size: 16px;
	font-weight: 700;
	color: var(--fb-color_text_secondary);
}
.thomson-talji-info {
	flex: 1;
	min-width: 0;
}
.thomson-talji-info strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin-bottom: 2px;
}
.thomson-talji-info span {
	display: block;
	font-size: 12px;
	color: var(--fb-color_text_muted);
}

/* 확인 팝업 */
.confirm-popup-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.confirm-popup {
	background: var(--fb-color_bg_white);
	border-radius: 8px;
	padding: 28px 24px 20px;
	max-width: 340px;
	width: 90%;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.confirm-popup-msg {
	font-size: 14px;
	color: var(--fb-color_text_primary);
	line-height: 1.6;
	margin-bottom: 20px;
}
.confirm-popup-btns {
	display: flex;
	gap: 8px;
}
.confirm-popup-no {
	flex: 1;
	padding: 10px;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 4px;
	background: var(--fb-color_bg_white);
	font-size: 14px;
	color: var(--fb-color_text_secondary);
	cursor: pointer;
}
.confirm-popup-no:hover { background: #f5f5f5; }
.confirm-popup-yes {
	flex: 1;
	padding: 10px;
	border: none;
	border-radius: 4px;
	background: var(--fb-color_text_primary);
	font-size: 14px;
	color: var(--fb-color_bg_white);
	cursor: pointer;
}
.confirm-popup-yes:hover { background: #555; }

/* 주문 버튼 비활성 */
.btn-order-main.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* 사이드바 부수 — 항상 표시 (인라인 부수는 파일업로드에서만 보임) */

/* 상품크기+인쇄유형 인라인 — 인쇄방법 2분할 그리드와 정렬 */
.upload-size-row {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
}
.upload-size-inputs {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
}
.upload-size-inputs .opt-size-input {
	flex: 1;
	width: auto;
	min-width: 40px;
}
.print-type-inline-wrap {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.print-type-inline-label {
	font-size: 12px;
	color: var(--fb-color_text_muted);
}
.print-type-inline {
	width: calc(50% - 12px);
	flex: 0 0 auto;
	min-width: 0;
	max-width: none;
}
/* 부수 인라인 (상품 상세 내) */
.order-qty-inline {
	width: 100%;
	margin-bottom: 0;
}
.order-qty-inline .order-qty-box {
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	height: 40px;
	min-height: 40px;
	font-size: 14px;
	background: var(--fb-color_bg_white);
}
@media (max-width: 640px) {
	.upload-size-row { flex-wrap: wrap; gap: 8px; }
	.upload-size-inputs { width: 100%; flex: none; }
	.print-type-inline-wrap { margin-left: 0; width: 100%; margin-top: 8px; }
	.print-type-inline { width: 100%; flex: none; }
}
@media (max-width: 480px) {
	.opt-post-header .opt-header-row { padding: 12px; gap: 10px; }
	.opt-post-name { font-size: 13px; }
	.opt-post-desc { font-size: 11px; }
}

.opt-post-notice {
	margin-top: 10px;
	padding: 0;
	background: none;
	font-size: 12px;
	color: var(--fb-color_text_muted);
	line-height: 1.5;
}
.opt-size-x {
	font-size: 14px;
	color: var(--fb-color_text_muted);
	margin: 0 2px;
}

/* ===== 절수 배치 미리보기 오버레이 ===== */
.layout-preview-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: var(--fb-color_bg_white);
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px;
}
.layout-preview-overlay svg {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100% - 20px);
	max-height: 100%;
}
.layout-preview-overlay .lp-title {
	font-size: 11px;
	color: var(--fb-color_text_secondary);
	margin-bottom: 4px;
	font-weight: 500;
}
.spec-cutting-row[data-sheet-w],
.spec-uv-line[data-sheet-w] {
	cursor: pointer;
}
.spec-cutting-row[data-sheet-w]:hover .spec-value,
.spec-uv-line[data-sheet-w]:hover .spec-value,
.spec-dig-line[data-sheet-w]:hover .spec-value {
	color: #1565c0;
	text-decoration: underline;
}

/* ── 후가공 아이콘 (피그마 PNG 적용) ── */
.opt-post-fig-icon {
	width: 22px;
	height: 22px;
	display: inline-block;
	flex-shrink: 0;
	object-fit: contain;
	transition: filter 0.2s;
}
/* 활성 상태에서는 아이콘 살짝 진하게 */
.opt-post-section.is-active .opt-post-fig-icon {
	filter: brightness(0.6);
}

/* ──────────────────────────────────────────────────────────
 * 디자인 섹션 (피그마 11:1146 기반)
 * - 에디터/템플릿 옵션을 카드 그룹화 + 다크 네이비 버튼 보더
 * - 템플릿 카드 안에 앞/뒷면 업로드까지 통합 (다운→작업→업로드 흐름)
 * ────────────────────────────────────────────────────────── */
.fb-design-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0 0;
}
/* ── 디자인 탭 UI — [에디터로 셀프디자인] [디자인 파일업로드] ── */
.fb-design-tab-headers {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--fb-color_border, #ededed);
}
.fb-design-tab {
	flex: 1;
	padding: 12px 16px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--fb-color_text_muted, #999);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	margin-bottom: -1px;             /* 활성 탭 underline 이 헤더 border 와 정확히 겹치도록 */
}
.fb-design-tab:hover {
	color: var(--fb-color_text_primary, #1b2631);
}
.fb-design-tab.is-active {
	color: var(--fb-color_text_primary, #1b2631);
	font-weight: 600;
	border-bottom-color: #1b2631;
}
.fb-design-tab-panel { display: none; }
.fb-design-tab-panel.is-active { display: block; }
/* 인쇄 안함 상태 — 디자인 카드 자체가 숨겨지므로 섹션 컨테이너도 숨겨 중복 여백 방지 */
body.fb-print-none .fb-design-section { display: none; }
/* (2026-08-20 사장님) 봉투는 예외 — 인쇄 안 함이어도 에디터 진입을 막지 않는다.
   봉투는 에디터에서 내용을 만든 뒤 인쇄가 정해지는 흐름이라 순서가 반대다.
   금액은 '인쇄 위치'(실제 인쇄면)로 갈리므로 섹션을 열어둬도 인쇄비는 붙지 않는다. */
body.fb-print-none.fb-envelope-category .fb-design-section { display: flex; }
/* (2026-09-18 사장님 「색박이 들어가면 인쇄가 아예 없어지는 거야」) 판이 디자인인 후가공(금박·형압·레터프레스·레이저)이 켜져 있으면
   인쇄 안 함이어도 디자인 영역은 산다 — 디자인이 곧 판이다(factory.js refreshDesignUploadVisibility 가 body.fb-design-plate-on 을 켠다). */
body.fb-print-none.fb-design-plate-on .fb-design-section { display: flex; }
.fb-design-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin: 0 0 4px;
	line-height: 1.2;
}
.fb-design-card {
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border);
	border-radius: 5px;
	padding: 16px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* 기존 .uv-file-section / .editor-launch 의 margin/padding 오버라이드 (카드화) */
.fb-design-card.uv-file-section,
.fb-design-card.editor-launch {
	margin: 0;
	padding: 20px 16px;
}
/* 펼친 상태에서는 본문 시작 여백 살짝 더 (head 와 가이드 다운로드 사이) */
body.fb-design-upload-open .fb-design-card.uv-file-section { padding: 16px 16px 20px; }
.fb-design-card-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fb-design-card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 1.3;
}
.fb-design-card-desc {
	font-size: 14px;
	font-weight: 300;        /* Light - 피그마 매치 */
	color: var(--fb-color_text_primary);
	line-height: 1.4;
	margin: 0;
}
/* 디자인 액션 버튼 — 다크 네이비 보더 (#1b2631) — 에디터/템플릿 동일 스타일 */
.btn-fb-design {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;             /* 카드 가로 채움 — 두 버튼 동일 폭 보장 */
	height: 50px;
	padding: 0 16px;
	background: var(--fb-color_bg_white);
	border: 1px solid #1b2631;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	box-sizing: border-box;
}
.btn-fb-design:hover {
	background: #1b2631;
	color: var(--fb-color_bg_white);
}
.btn-fb-design svg,
.btn-fb-design-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: inherit;
	display: inline-block;
	opacity: 0.65;            /* 아이콘은 텍스트보다 살짝 흐리게 */
}
/* 호버 시 흰색 배경에서 아이콘이 묻히지 않도록 invert */
.btn-fb-design:hover .btn-fb-design-icon {
	filter: invert(1) brightness(2);
	opacity: 1;
}
/* 기존 .btn-download-unified svg path { stroke:var(--fb-color_text_secondary) } 오버라이드 */
.btn-fb-design svg path,
.btn-fb-design svg polyline,
.btn-fb-design svg line,
.btn-fb-design svg circle,
.btn-fb-design svg rect {
	stroke: currentColor;
}
.btn-fb-design:hover svg { color: var(--fb-color_bg_white); }
/* "또는" 디바이더 */
.fb-design-or {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--fb-color_text_muted);
	font-size: 13px;
	line-height: 1;
	margin: 2px 0;
}
.fb-design-or::before,
.fb-design-or::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e5e5e5;
}
.fb-design-or span { flex-shrink: 0; }

/* (제거) 단면 인쇄 시 뒷면 업로드 숨김 — 사용자 요청에 따라 항상 앞면/뒷면 두 영역 모두 노출.
   업로드 안 한 면은 빈 상태로 두면 됨. */
/* 인쇄 안함: 디자인 섹션 자체 숨김은 JS 에서 처리 */

/* ───── 카드 방향 / 펼침 방향 토글 (명함 가로/세로 + 2단/3단 좌우/상하 공유) ───── */
.fb-orient-group { width: 100%; }
.fb-orient-group .upload-form-row { width: 100%; }
.fb-orient-toggle,
.fb-fold-toggle {
	display: flex;
	width: 100%;
	border: 1px solid var(--fb-color_text_disabled);
	border-radius: 3px;
	overflow: hidden;
	background: var(--fb-color_bg_white);
	height: 50px;          /* 부수 셀렉트와 동일 */
}
.fb-orient-btn,
.fb-fold-btn {
	flex: 1 1 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 14px;
	background: var(--fb-color_bg_white);
	border: none;
	border-right: 1px solid var(--fb-color_border_default);
	font-size: 13px;
	font-weight: 500;
	color: var(--fb-color_text_secondary);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	line-height: 1;
	font-family: inherit;
}
.fb-orient-btn:last-child,
.fb-fold-btn:last-child { border-right: none; }
.fb-orient-btn:hover:not(.is-active),
.fb-fold-btn:hover:not(.is-active) {
	color: var(--fb-color_text_primary);
	background: #f8f8f8;
}
.fb-orient-btn.is-active,
.fb-fold-btn.is-active {
	background: var(--fb-color_text_primary);
	color: var(--fb-color_bg_white);
}
.fb-orient-btn .fb-orient-icon,
.fb-fold-btn .fb-fold-icon {
	color: var(--fb-color_text_muted);
	flex-shrink: 0;
	transition: color 0.15s;
}
/* /m/ 사이트의 전역 * { color } 가 rect 까지 영향 → currentColor 가 잘못 잡힘. 명시적 stroke 색 지정 */
.fb-orient-btn .fb-orient-icon rect,
.fb-orient-btn .fb-orient-icon path,
.fb-fold-btn .fb-fold-icon rect,
.fb-fold-btn .fb-fold-icon path { fill: none !important; stroke: var(--fb-color_text_muted) !important; }
.fb-orient-btn.is-active .fb-orient-icon rect,
.fb-orient-btn.is-active .fb-orient-icon path,
.fb-fold-btn.is-active .fb-fold-icon rect,
.fb-fold-btn.is-active .fb-fold-icon path { stroke: var(--fb-color_bg_white) !important; }
.fb-orient-btn.is-active .fb-orient-icon,
.fb-fold-btn.is-active .fb-fold-icon { color: var(--fb-color_bg_white); }
/* /m/ 모바일 사이트의 전역 `* { color: var(--basicFontColor) }` 가 라벨 색을 강제로 덮으므로 명시 */
.fb-orient-label,
.fb-fold-label {
	letter-spacing: -0.2px;
	color: inherit;                /* 버튼의 색을 따라가도록 */
}
.fb-orient-btn .fb-orient-label,
.fb-fold-btn .fb-fold-label { color: var(--fb-color_text_secondary); }
.fb-orient-btn.is-active .fb-orient-label,
.fb-fold-btn.is-active .fb-fold-label { color: var(--fb-color_bg_white); }
@media (max-width: 480px) {
	.fb-orient-btn,
	.fb-fold-btn { padding: 0 10px; font-size: 12px; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════
 * FIGMA POLISH LAYER (피그마 11:198 - 자유형 상세)
 * - 기존 레이아웃/기능을 보존하면서 Figma 디자인 토큰만 일관 적용
 * - Border 5px·var(--fb-color_border) / Title 16/SB / 카드 var(--fb-color_bg_subtle) 패널 / 다크 네이비 액션
 * ══════════════════════════════════════════════════════════ */

/* ── 옵션 섹션 (인쇄 방법 / 종이 / 후가공 컨테이너) ── */
.opt-section {
	border-color: var(--fb-color_border);
	border-radius: 5px;
	margin-bottom: 8px;       /* 16 → 8 (피그마 매치, 타이트하게) */
}
.opt-post-section {
	border-color: var(--fb-color_border);
	border-radius: 5px;
	margin-bottom: 8px;
}
/* 인쇄 방식 / 종이 헤더 — 피그마 11:831 (padding 20px all sides, gap 8px) */
.opt-print-header:not(.selected) .opt-header-row,
.opt-paper-header:not(.selected) .opt-header-row {
	padding: 20px;
	min-height: auto;
	gap: 8px;
}
.opt-post-section.is-active {
	border-color: var(--fb-color_border_default);
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── 섹션 타이틀 (인쇄 방법 / 종이 선택) — 16/SB ── */
.opt-print-header:not(.selected) .opt-header-default,
.opt-paper-header:not(.selected) .opt-header-default {
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}

/* ── 후가공 카드 헤더 (톰슨/금박/엠보싱 등) — 16/SB (인쇄/종이 헤더와 통일) ── */
.opt-post-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}
.opt-post-section.is-active .opt-post-name {
	font-size: 16px;
	font-weight: 600;
}
.opt-post-desc {
	font-size: 13px;
	font-weight: 400;
	color: #888;
	line-height: 1.5;
}

/* ── 선택 카드 (digital/uv/master, 종이 카드) — 일관된 보더 ── */
.opt-select-card {
	border-bottom-color: var(--fb-color_border);
	transition: background 0.15s, border-color 0.15s;
}
.opt-select-card:hover { background: var(--fb-color_bg_subtle); }
.opt-select-card.selected {
	background: var(--fb-color_bg_subtle);
}

/* ── 서브 셀렉트 (옵션 안에 있는 select들) — 50px 통일 ── */
.opt-sub-select {
	min-height: 50px;
	font-size: 14px;
	border-color: var(--fb-color_border_default);
	border-radius: 3px;
}
.opt-sub-select:hover { border-color: var(--fb-color_text_muted); }
.opt-sub-select:focus { border-color: #1b2631; }

/* ── 옵션 헤더 hover 부드럽게 ── */
.opt-section-header:hover {
	background: var(--fb-color_bg_subtle);
}

/* ── opt-sub-divider (서브 옵션 진입 라인) — 톤 다운 ── */
.opt-sub-divider {
	background: var(--fb-color_bg_section);
}

/* ── 무상자산 카드 (fb-free-asset-card) — 카드 스타일 통일 ── */
.fb-free-asset-card {
	border-color: var(--fb-color_border);
	border-radius: 4px;
	transition: border-color 0.15s, background 0.15s;
}
.fb-free-asset-card:hover {
	border-color: var(--fb-color_text_disabled);
	background: var(--fb-color_bg_subtle);
}
.fb-free-asset-card.is-selected {
	border-color: #1b2631;
	background: var(--fb-color_bg_subtle);
}
/* 단일 mold_fee_waive 자산 — "보유중인 [자산명]으로 제작합니다." 한 줄 인포 라벨.
   상하 여백 매우 타이트하게 (이전 28+32=60px → 12+12=24px) */
/* 부모 .fb-free-asset-section 의 풀폭 효과(margin:0 -16px / padding:12px 16px / border-top) 무력화 */
.fb-free-asset-section:has(.fb-free-asset-card.is-single-line) {
	margin: 0 !important;
	padding: 0 !important;
	border-top: none !important;
	background: transparent !important;
}
/* .opt-post-card 의 flex gap (기본 16px) 제거 — 이게 디스크립션과 구분선 사이에 추가 공백을 만들었음 */
.opt-post-card:has(.fb-free-asset-card.is-single-line) {
	gap: 0 !important;
}
/* .stamp-row-info 의 padding-bottom 축소 (기본 20px → gap_md=12px) — 디스크립션 텍스트↔구분선 간격 */
.stamp-row-info:has(+ .fb-free-asset-section .fb-free-asset-card.is-single-line) {
	padding-bottom: var(--fb-gap_md, 12px) !important;
}
.fb-free-asset-card.is-single-line {
	display: flex !important;
	align-items: center !important;
	gap: var(--fb-gap_sm, 8px) !important;
	width: auto !important;
	flex: 0 0 auto !important;
	/* margin: 상단 0, 좌우 0 (post-card padding 만으로 인셋 충분), 하단 0 (post-card padding-bottom 가 종료 마진 제공)
	   padding-top: 12px — 구분선과 텍스트 사이 */
	margin: 0 !important;
	padding: var(--fb-gap_md, 12px) 0 0 !important;
	border: none !important;
	border-top: 1px solid var(--fb-color_border) !important;
	background: transparent !important;
	border-radius: 0 !important;
	text-align: left !important;
	cursor: default !important;
	box-shadow: none !important;
}
/* 선택 상태(is-selected) / hover 의 파란 테두리/박스 효과 제거 — 인포 라벨이라 선택 개념 없음 */
.fb-free-asset-card.is-single-line.is-selected,
.fb-free-asset-card.is-single-line:hover {
	border: none !important;
	border-top: 1px solid var(--fb-color_border) !important;       /* 구분선만 유지 */
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}
/* 확성기(megaphone) 아이콘 — 라벨 텍스트 앞에 표시 */
.fb-free-asset-card.is-single-line::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: no-repeat center/contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 8.5a4 4 0 0 1 0 7'/%3E%3Cpath d='M19 6a7 7 0 0 1 0 12'/%3E%3C/svg%3E");
}
.fb-free-asset-card.is-single-line .fb-free-asset-line {
	flex: 1 1 auto;
	font-size: var(--fb-font_size_md, 14px);          /* "필요한 종이 면적" 라벨과 동일 */
	font-weight: var(--fb-font_weight_light, 300);    /* Light */
	color: var(--fb-color_text_primary);
	line-height: 1.4;
	white-space: normal;
	word-break: keep-all;
}
.fb-free-asset-card.is-single-line .fb-free-asset-change-link {
	margin-left: auto;
	flex-shrink: 0;
}

/* ── 후가공 사이즈 셀렉트 (gold-stamp-size-row 등) — 모든 select 50px 통일 ── */
.gold-stamp-size-row .opt-sub-select,
.gold3d-stamp-row .gold-stamp-size-row .opt-sub-select,
.emboss-stamp-row .gold-stamp-size-row .opt-sub-select,
.emboss-stamp-row .emboss-size-row .opt-sub-select,
.lp-stamp-row .gold-stamp-size-row .opt-sub-select,
.lp-stamp-row .lp-size-row .opt-sub-select {
	height: 50px;
	min-height: 50px;
}
/* 모든 select / 인풋 / qty-box 일괄 통일 */
select.opt-sub-select,
.opt-sub-select,
.opt-size-input,
.order-qty-box,
.env-preset-box {
	height: 50px;
	min-height: 50px;
}

/* ── 옵션 그룹 사이 간격 — figma rhythm. 디자인 토큰 사용 (gap_lg=16, gap_md=12) ── */
.opt-section { margin-bottom: var(--fb-gap_lg, 16px); }
.opt-post-section { margin-bottom: var(--fb-gap_md, 12px); }

/* ── 종이 선택 그리드 카드 — 호버 시 살짝 부드럽게 ── */
.opt-select-card:hover {
	background: var(--fb-color_bg_subtle);
}

/* ── 토글 (opt-post-toggle) — 약간 더 모던하게 ── */
.opt-post-toggle {
	transition: background 0.2s;
}

/* ── 인쇄 방법 셀렉트 행 (opt-header-uv-row 등) — 패딩 정리 ── */
.opt-header-uv-row,
.opt-header-digital-row,
.opt-header-master-row {
	padding: 0 16px 16px;
}

/* ── 안내문 / 알림 텍스트 — 본문과 비슷한 가독성 (작지 않게) ── */
.binding-limit-notice,
.folding-weight-notice {
	font-size: 14px;
	color: #222;
	line-height: 1.5;
}
/* 계산 내역 (셋업비 + 단가 ×수량 = 합계) 노출 안 함 */
.binding-cost-detail,
.folding-cost-detail {
	display: none !important;
}

/* ── 상단 상세 영역 (피그마 11:1122) ──
   .content-left 가 이미 외곽 보더를 갖고 있으므로 .upload-after 에는 보더 X.
   대신 패딩 + .upload-detail 하단 분리선으로 디자인 섹션과 시각적 분리. */
.upload-after {
	padding: 16px;             /* 상하좌우 균일 */
	background: var(--fb-color_bg_white);
}
.upload-detail {
	padding: 0;
	margin-bottom: 0;
}

/* ── 우측 사이드바 reset 버튼 (헤더로 이동된 후 정리) ── */
.order-summary-head .btn-reset-order {
	display: none;
}
.order-summary-head .btn-reset-order.is-visible {
	display: inline-flex;
}
/* 기존 .btn-reset-wrap 사용 위치 호환 (없을 수도 있음) */
.btn-reset-wrap { display: none; }

/* ── 우측 패널 상품 타이틀 (주문수량 위에, order-detail-row 와 동일 스타일) ── */
.fb-order-product-row {
	display: flex;
	align-items: center;
	padding: 12px 4px;
	border-bottom: 1px solid var(--fb-color_border);
	/* border-top 제거 — order-summary-head 의 border-bottom 이 이미 구분선 역할 */
}
.fb-order-product-row:has(.fb-order-product-name:empty) { display: none; }
.fb-order-product-name {
	flex: 1;
	font-size: 13px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	line-height: 1.4;
	margin: 0;
}
/* order-detail-list 첫 행 보더 중복 방지 — fb-order-product-row 의 border-bottom 이 이미 구분선 */
.fb-order-product-row + .order-detail-list .order-detail-row:first-child {
	border-top: none;
}

/* ══════════════════════════════════════════════════════════
 * 인쇄 방식 / 종이 선택 폴리시 (피그마 11:799 / 11:681)
 * ══════════════════════════════════════════════════════════ */

/* ── 비용 추천 배지 — 피그마 11:812 (블루 pill) ── */
/* 종이 추천(.paper-spec-badge) 도 동일 스타일 적용 — 빨간색 → 블루 pill */
.print-recommend-badge,
.paper-spec-badge {
	font-size: 12px;              /* 11 → 12 (피그마) */
	font-weight: 600;
	color: var(--fb-color_bg_white);
	background: var(--fb-color_brand_primary);          /* 빨강/오렌지 → 피그마 블루(m_set/primary) */
	padding: 2px 8px;
	border-radius: 10px;
	margin-right: 6px;
	letter-spacing: -0.2px;
	line-height: 1.2;
}
/* 추천 사유 — 피그마 11:818 (블루 톤) */
.print-rec-reason {
	font-size: 14px;              /* 피그마 매치 */
	color: var(--fb-color_brand_primary);               /* 보라 → 블루 */
	font-weight: 300;             /* Light */
	margin-top: 6px;
	line-height: 1.4;
}

/* ── 종이 선택 카드 그리드 — 피그마 11:681 ── */
/* 기존 #paper-card-list 컨테이너에 그리드 적용 */
#paper-card-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding: 16px;
}
#paper-card-list .opt-select-card {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--fb-color_border);
	border-radius: 5px;
	background: var(--fb-color_bg_white);
	border-bottom: 1px solid var(--fb-color_border);
	transition: border-color 0.15s, background 0.15s;
}
#paper-card-list .opt-select-card:hover {
	border-color: var(--fb-color_text_disabled);
	background: var(--fb-color_bg_white);
}
#paper-card-list .opt-select-card.selected {
	border-color: #1b2631;        /* 다크 네이비 선택 (figma) */
	background: var(--fb-color_bg_white);
}
/* 종이 카드 내부 텍스트 — 14/SB title + 12/Light desc */
#paper-card-list .opt-select-card .opt-select-title,
#paper-card-list .opt-select-card .opt-card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin: 0 0 4px;
	line-height: 1.3;
}
#paper-card-list .opt-select-card .opt-select-desc,
#paper-card-list .opt-select-card .opt-card-desc {
	font-size: 12px;
	color: #888;
	line-height: 1.5;
	font-weight: 400;
}

/* 모바일: 종이 그리드 1열 */
@media (max-width: 640px) {
	#paper-card-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
 * 인쇄 방식 선택 카드 (피그마 11:830 정확 사양)
 * 섹션 본문: padding 24px 20px, 카드 사이 gap 16px
 * 카드: padding 20px, gap 20px, border 1px var(--fb-color_border), radius 5px
 * 썸네일: 100×100, 1px var(--fb-color_border_default), radius 3px
 * 선택 카드: border 1px #1b2631, height 140px
 * ══════════════════════════════════════════════════════════ */
/* 본문 영역 패딩 초기화 — list 가 figma 사양으로 직접 padding */
#opt-print.opt-section-body,
#opt-paper.opt-section-body {
	padding: 0;
}

/* ════════════════════════════════════════════════════════════════
 *  봉투 인쇄 면 선택 (앞면/펼친앞면, 뒷면/펼친뒷면)
 *  카드봉투/돈봉투 등 sub_category.allow_flat_print=1 + UV/마스타/디지털 카드 활성 시 노출
 *  디지털: 펼침 버튼 숨김 (.is-info-only 클래스로 토글)
 * ════════════════════════════════════════════════════════════════ */
.opt-envelope-face-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 14px 20px 0;
}
/* 타이틀 — 토글 버튼 위 한 줄 */
.opt-face-title {
	flex-basis: 100%;
	font-size: 14px;
	font-weight: 500;
	color: var(--fb-color_text_secondary, #666);
	margin-bottom: 2px;
}
/* group 자체는 무력화하고 자식 button 들이 부모(row)의 직접 자식처럼 배치되도록 */
.opt-face-group {
	display: contents;
}
.opt-face-btn {
	flex: 1;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 8px;
	height: 50px;
	min-height: 50px;
	background: #fafafa;                          /* 미선택: 라이트 그레이 */
	border: 1px solid var(--fb-color_border, #ededed);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	color: #999999;                                /* 미선택 글씨: 라이트 그레이 */
	cursor: pointer;
	transition: all 0.15s;
	box-sizing: border-box;
}
/* 앞면 그룹 ↔ 뒷면 그룹 사이 간격 — 아래 셀렉트바 간격(12px)과 동일하게 */
.opt-face-btn[data-side="back"][data-face="normal"] {
	margin-left: 6px;
}
.opt-face-btn:hover { border-color: #b0b0b0; }
.opt-face-btn.is-selected {
	background: #fff;                             /* 선택: 흰 배경 */
	border-color: #1b2631;
	color: #1b2631;
}
.opt-face-btn.is-selected .opt-face-icon { color: #1b2631; }
.opt-face-icon {
	width: 28px;
	height: 24px;
	color: #999999;
	flex-shrink: 0;
}
/* 디지털 모드: 펼침 버튼 숨김, 일반 면 버튼만 노출 (인포 표시) */
.opt-envelope-face-row.is-info-only .opt-face-btn-flat { display: none; }
.opt-envelope-face-row.is-info-only .opt-face-btn { cursor: default; }
/* 인포 모드: 호버 액션 무효화 + 선택 상태 테두리/글씨를 회색으로 (강조 X) */
.opt-envelope-face-row.is-info-only .opt-face-btn:hover {
	background: #fafafa;
	border-color: var(--fb-color_border, #ededed);
}
.opt-envelope-face-row.is-info-only .opt-face-btn.is-selected {
	background: #fff;
	border-color: #d5d5d5;
	color: #888;
}
.opt-envelope-face-row.is-info-only .opt-face-btn.is-selected .opt-face-icon {
	color: #888;
}
/* 봉투 종류별 아이콘 토글 — 카드/돈봉투(card) 가 기본, 일반봉투(regular) 는 .is-regular-envelope 클래스로 swap */
.opt-face-icon[data-icon-type="regular"] { display: none; }
.opt-envelope-face-row.is-regular-envelope .opt-face-icon[data-icon-type="card"] { display: none; }
.opt-envelope-face-row.is-regular-envelope .opt-face-icon[data-icon-type="regular"] { display: inline-block; }
.opt-face-hint {
	flex-basis: 100%;          /* 1줄 row 안에서 다음 줄로 강제 줄바꿈 */
	font-size: 11px;
	color: var(--fb-color_text_muted, #888);
	margin-top: 2px;
	padding-left: 4px;
}
.opt-face-hint .opt-face-extra-price {
	color: #1b2631;
	font-weight: 600;
}
/* 모바일: 2×2 그리드 — 앞면 페어 위 / 뒷면 페어 아래 */
@media (max-width: 640px) {
	.opt-face-btn {
		flex: 0 0 calc(50% - 3px);
	}
	.opt-face-btn .opt-face-label {
		white-space: nowrap;
		word-break: keep-all;
	}
	/* 데스크톱에서 적용된 그룹간 좌측 마진 → 모바일에서는 제거 (2x2 정렬 위해) */
	.opt-face-btn[data-side="back"][data-face="normal"] {
		margin-left: 0;
	}
}
#opt-print .opt-select-list {
	padding: 24px 20px;                   /* 피그마 11:835: 24px vertical, 20px horizontal */
	display: flex;
	flex-direction: column;
	gap: 16px;                            /* 피그마 11:836 */
	background: var(--fb-color_bg_white);
}
#opt-print .opt-select-card {
	display: flex;
	gap: 20px;                            /* 피그마 11:838 */
	padding: 20px;                        /* 피그마 카드 padding */
	margin: 0;
	border: 1px solid var(--fb-color_border);
	border-radius: 5px;
	background: var(--fb-color_bg_subtle);
	border-bottom: 1px solid var(--fb-color_border);
	transition: border-color 0.15s, background 0.15s;
	align-items: flex-start;
}
#opt-print .opt-select-card:hover {
	border-color: var(--fb-color_text_disabled);
}
#opt-print .opt-select-card.selected {
	border: 1px solid #1b2631;            /* 다크 네이비 (피그마 11:837) */
	background: var(--fb-color_bg_subtle);
	box-shadow: none;
	min-height: 140px;                    /* 선택 카드 높이 (피그마) */
}

/* ── 인쇄 방식 섹션 헤더 — "인쇄 방법을 선택하세요" 흰 배경 ── */
.opt-section-header.opt-print-header,
.opt-section-header.opt-paper-header {
	background: var(--fb-color_bg_white);
}
.opt-section-header.opt-print-header.selected,
.opt-section-header.opt-paper-header.selected {
	background: var(--fb-color_bg_white);                     /* 선택 후에도 헤더 흰 배경 유지 */
}

/* ── 접힌 상태(선택 후) 인쇄 방식 — 피그마 11:799/11:762 정확 매치
   - 헤더: "인쇄 방식 선택" 만 (항상 노출, JS hide 무시)
   - 본문 카드 (.opt-print-body-card): 회색 var(--fb-color_bg_subtle), thumb + name + desc + divider + selects
*/
/* 헤더 default 텍스트 — JS hide 무시하고 항상 노출 (inline-flex 로 아이콘 + 텍스트 가로 정렬 유지) */
.opt-print-header .opt-header-default,
.opt-paper-header .opt-header-default {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 1.2;
}
/* 헤더에서 thumb/print-name/paper-name 은 숨김 (본문 카드 안에서만 표시) */
.opt-print-header > .opt-header-row > .opt-header-print-name,
.opt-print-header > .opt-header-row > .opt-header-thumb,
.opt-paper-header > .opt-header-row > .opt-header-paper-name,
.opt-paper-header > .opt-header-row > .opt-header-thumb {
	display: none !important;
}
/* 선택 상태에서도 헤더 row 높이 55px 유지 — 미선택과 동일 사이즈 */
.opt-print-header.selected .opt-header-row,
.opt-paper-header.selected .opt-header-row {
	padding: 0 20px;
	height: 55px !important;
	min-height: 55px !important;
}
/* 본문 카드 — 기본 숨김, 선택 + 접힘 상태에서만 노출 (펼침 상태는 카드 리스트로 대체) */
.opt-print-body-card,
.opt-paper-body-card {
	display: none;
	width: 626px;
	max-width: 100%;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;            /* 부모 보다 좁아도 좌우 여백 동일하게 가운데 정렬 */
}
/* 선택 상태 헤더: align-items 를 stretch 로 → 본문 카드가 풀-와이드 차지 */
.opt-print-header.selected,
.opt-paper-header.selected {
	align-items: stretch !important;
}
/* 헤더 row 가 본문 카드와 구분선으로 분리 (피그마 매치)
   접힘+선택일 때만 표시 — 펼침 상태에서는 .opt-section-body 의 border-top 사용 (이중 라인 방지) */
.opt-print-header.selected:not(.open) .opt-header-row,
.opt-paper-header.selected:not(.open) .opt-header-row {
	border-bottom: 1px solid var(--fb-color_border);
}
/* 종이/인쇄 헤더 row 의 [아이콘 + 이름] — 선택+접힘 상태에서만 표시 */
.opt-header-paper-row-info,
.opt-header-print-row-info { display: none; }
.opt-paper-header.selected:not(.open) .opt-header-paper-row-info,
.opt-print-header.selected:not(.open) .opt-header-print-row-info {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
/* 선택+접힘 상태: default 텍스트 자리 사라짐 → row-info 가 좌측 정렬, arrow 가 우측 끝 */
.opt-paper-header.selected:not(.open) .opt-header-default,
.opt-print-header.selected:not(.open) .opt-header-default {
	display: none !important;
}
.opt-paper-header.selected:not(.open) .opt-header-row .opt-arrow,
.opt-print-header.selected:not(.open) .opt-header-row .opt-arrow {
	margin-left: auto;
}
/* 인쇄/종이 SVG 아이콘 — 후가공(.opt-post-fig-icon 22×22) 과 동일 박스로 통일 */
.opt-header-paper-icon svg,
.opt-header-print-icon svg,
.opt-header-default-icon {
	width: 22px !important;
	height: 22px !important;
	display: block;
	flex-shrink: 0;
}
.opt-header-paper-icon,
.opt-header-print-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
/* default 텍스트(아이콘 + 글) — 후가공 헤더와 동일 gap (10px) + baseline 정렬 */
.opt-header-default {
	gap: 10px;
	align-items: center;
	line-height: 1;
}
.opt-header-default > span {
	display: inline-block;
	line-height: 1.4;
}
/* 인쇄/종이 헤더 row 의 gap 도 후가공(.opt-post-header)과 동일하게 10px */
.opt-print-header .opt-header-row,
.opt-paper-header .opt-header-row {
	gap: 10px;
}
.opt-header-paper-name-row,
.opt-header-print-name-row {
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 1.2;
}

/* ── 미선택 상태 인쇄/종이 헤더 — 후가공(.opt-post-section)과 시각적 통일 ──
   1) hover 배경 변화: 흰 배경 규칙이 :hover 를 덮어쓰던 문제를 해결
   2) 섹션 간격 12px (후가공과 동일) — 20px 였던 차이 해소
   3) 아이콘 stroke #444 (후가공 fig-icon 과 동일 톤) — 기존 #666 보다 진하게
*/
.opt-section-header.opt-print-header:not(.selected):hover,
.opt-section-header.opt-paper-header:not(.selected):hover {
	background: var(--fb-color_bg_subtle);
}
/* 선택+접힘 상태: 타이틀(아이콘+이름) 영역만 호버 배경 변경 (전체 row X) */
.opt-section-header.opt-print-header.selected:not(.open) .opt-header-print-row-info,
.opt-section-header.opt-paper-header.selected:not(.open) .opt-header-paper-row-info {
	padding: 4px 8px;
	margin-left: -8px;
	border-radius: 4px;
	transition: background 0.15s ease;
	cursor: pointer;
}
.opt-section-header.opt-print-header.selected:not(.open) .opt-header-print-row-info:hover,
.opt-section-header.opt-paper-header.selected:not(.open) .opt-header-paper-row-info:hover {
	background: var(--fb-color_bg_subtle);
}
.opt-section:has(.opt-print-header:not(.selected)),
.opt-section:has(.opt-paper-header:not(.selected)) {
	margin-bottom: var(--fb-gap_md, 12px);
}
.opt-print-header:not(.selected) .opt-header-default-icon path,
.opt-print-header:not(.selected) .opt-header-default-icon rect,
.opt-print-header:not(.selected) .opt-header-default-icon line,
.opt-paper-header:not(.selected) .opt-header-default-icon path,
.opt-paper-header:not(.selected) .opt-header-default-icon rect,
.opt-paper-header:not(.selected) .opt-header-default-icon line {
	stroke: #444;
}
.opt-print-header:not(.selected) .opt-header-default-icon circle {
	fill: #444;
}

/* 추천 메시지 — 피그마 11:818 (블루 텍스트) */
.fb-print-rec-message {
	display: block;
	font-size: 14px;
	font-weight: 300;
	color: var(--fb-color_brand_primary);
	line-height: 1.4;
	margin-top: 4px;
}
.opt-print-header.selected:not(.open) .opt-print-body-card,
.opt-paper-header.selected:not(.open) .opt-paper-body-card {
	display: block;
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border);
	border-radius: 5px;
	/* 위·아래 24px / 좌우 auto (가운데 정렬) — 626px 고정폭과 함께 좌우 여백 동일 */
	margin: 24px auto;
	align-self: stretch;
	overflow: hidden;
}
/* 종이 body-card 내부 구조 (인쇄 방식 패턴 동일) */
.opt-paper-body-info {
	display: flex;
	gap: 20px;
	padding: 20px;
	align-items: flex-start;
}
.opt-paper-header.selected .opt-paper-body-info .opt-header-thumb {
	display: block !important;
	width: 110px;
	height: 110px;
	flex-shrink: 0;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	background: var(--fb-color_bg_section);
	overflow: hidden;
}
.opt-paper-header.selected .opt-paper-body-info .opt-header-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.opt-paper-body-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
	padding-top: 4px;
}
/* 종이/인쇄 본문 박스 안의 이름 — 후가공(.opt-post-name) 과 동일 위계 (16/600) */
.opt-paper-body-card .opt-header-paper-name,
.opt-print-body-card .opt-header-print-name {
	display: block !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--fb-color_text_primary) !important;
	line-height: 1.3 !important;
	margin-bottom: 4px !important;
}
.opt-paper-header.selected .opt-paper-body-text .opt-header-selected-desc,
.opt-paper-body-card .opt-header-selected-desc {
	display: block !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	color: var(--fb-color_text_primary) !important;
	line-height: 1.4 !important;
	padding: 0 !important;
	width: auto !important;
	margin: 0 !important;
	text-align: left !important;
}
/* 종이 헤더의 자세히 알아보기 링크 — 본문 다음 줄, 본문 톤 + 흐린 밑줄 */
.opt-header-guide-link {
	font-size: 14px;
	line-height: 1.35;
	color: var(--fb-color_text_primary) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: baseline;
	gap: 4px;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	width: auto !important;
	cursor: pointer;
}
.opt-header-guide-link .fb-guide-text {
	border-bottom: 1px solid rgba(17, 17, 17, 0.18);
	padding-bottom: 1px;
}
.opt-header-guide-link .fb-guide-arrow {
	font-size: 20px;
	line-height: 1;
	font-weight: 300;
	color: var(--fb-color_text_primary);
	position: relative;
	top: 2px;
}
.opt-header-guide-link:hover .fb-guide-text {
	border-bottom-color: rgba(17, 17, 17, 0.4);
}
.opt-header-guide-link:hover {
	color: var(--fb-color_text_primary) !important;
}
/* 종이 body-card 디바이더 — 좌우 20px 인셋(인쇄 카드와 동일, 절수 행/info 폭에 맞춤) */
.opt-paper-body-divider {
	height: 1px;
	background: var(--fb-color_border);
	margin: 0 20px;
	display: none;
}
.opt-paper-header.selected .opt-paper-body-divider {
	display: block;
}
/* 종이 절수 행 (paper-cut-row) — body-card 안 padding */
.opt-paper-header.selected .opt-header-paper-cut-row {
	padding: 16px 20px;
	background: transparent;
	border: none;
}
/* 본문 카드 상단: 썸네일 + 텍스트 영역 */
.opt-print-body-info {
	display: flex;
	gap: 20px;
	padding: 20px;
	align-items: flex-start;
}
.opt-print-header.selected .opt-print-body-info .opt-header-thumb {
	display: block !important;
	width: 110px;
	height: 110px;
	flex-shrink: 0;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	background: var(--fb-color_bg_section);
	overflow: hidden;
}
.opt-print-header.selected .opt-print-body-info .opt-header-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.opt-print-header.selected .opt-print-body-info .opt-header-thumb svg {
	width: 50%;
	height: 50%;
	margin: 25% auto;
	display: block;
}
.opt-print-body-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
	padding-top: 4px;
}
/* 본문 박스 안 인쇄 이름 — 후가공과 동일 위계 (16/600) */
.opt-print-header.selected .opt-print-body-text .opt-header-print-name {
	display: block !important;
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 1.3;
	margin-bottom: 4px;
}
.opt-print-header.selected .opt-print-body-text .opt-header-selected-desc,
.opt-print-body-card .opt-header-selected-desc,
.opt-print-body-text > .opt-header-selected-desc {
	display: block !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	color: var(--fb-color_text_primary) !important;
	line-height: 1.4 !important;
	padding: 0 !important;
	width: auto !important;
	margin: 0 !important;
	text-align: left !important;
}
/* (intentionally empty — 인쇄 이름은 본문 박스 안에서 제목 크기로 표시함, 위 8226 라인 참고) */

/* 디바이더 — info 영역과 셀렉트 영역 사이 */
.opt-print-body-divider {
	height: 1px;
	background: var(--fb-color_border);
	margin: 0 20px;
	display: none;
}
.opt-print-header.selected .opt-print-body-divider {
	display: block;
}

/* 셀렉트 행 (digital/uv/master) — body-card 안에서 padding 처리 */
.opt-print-header.selected .opt-header-digital-row,
.opt-print-header.selected .opt-header-uv-row,
.opt-print-header.selected .opt-header-master-row {
	background: transparent;
	border: none;
	margin: 0;
	padding: 16px 20px 20px;
}
/* 셀렉트 디바이더(원래 .opt-sub-divider) 숨김 — body-card divider 가 대신 함 */
.opt-print-header.selected .opt-header-digital-row > .opt-sub-divider,
.opt-print-header.selected .opt-header-uv-row > .opt-sub-divider,
.opt-print-header.selected .opt-header-master-row > .opt-sub-divider {
	display: none;
}
/* 셀렉트 좌우 배치, 점(•) 제거 */
.opt-print-header.selected .opt-header-digital-row .opt-sub-selects,
.opt-print-header.selected .opt-header-uv-row .opt-sub-selects,
.opt-print-header.selected .opt-header-master-row .opt-sub-selects {
	gap: 12px;
}
.opt-print-header.selected .opt-header-digital-row .opt-sub-selects::after,
.opt-print-header.selected .opt-header-uv-row .opt-sub-selects::after,
.opt-print-header.selected .opt-header-master-row .opt-sub-selects::after,
.opt-print-body-card .opt-sub-selects::after,
.opt-print-body-card .opt-sub-selects::before,
.opt-print-body-card .opt-header-uv-row::before,
.opt-print-body-card .opt-header-uv-row::after,
.opt-print-body-card .opt-header-digital-row::before,
.opt-print-body-card .opt-header-master-row::before,
.opt-print-header.selected .opt-header-uv-row::before,
.opt-print-header.selected .opt-header-digital-row::before,
.opt-print-header.selected .opt-header-master-row::before {
	display: none !important;
	content: none !important;
	border: none !important;
}
/* 셀렉트 흰 배경 (회색 카드 위에 도드라지게) */
.opt-print-header.selected .opt-sub-select {
	background-color: var(--fb-color_bg_white);
}

/* 썸네일 영역 — 100×100 + 1px var(--fb-color_border_default) 보더 + radius 3px (피그마 11:839) */
#opt-print .opt-select-card .opt-select-img {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	border-radius: 3px;
	border: 1px solid var(--fb-color_border_default);
	background: var(--fb-color_bg_section);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#opt-print .opt-select-card[data-value="none"] .opt-select-img {
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}
#opt-print .opt-select-card .opt-play-icon {
	opacity: 0.5;
}

/* 텍스트 영역 — gap 8px 피그마 매치 */
#opt-print .opt-select-card .opt-select-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;                             /* 피그마 11:840 */
	align-self: stretch;
}
#opt-print .opt-select-card .opt-select-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;                      /* 피그마 11:844 (15→14) */
	font-weight: 600;
	color: var(--fb-color_text_primary);
	margin: 0;
	line-height: 1.2;
}
#opt-print .opt-select-card .opt-select-desc {
	font-size: 14px;                      /* 피그마 11:846 (13→14) */
	font-weight: 300;
	color: var(--fb-color_text_primary);                          /* 666 → 333 (피그마) */
	line-height: 1.2;
	margin: 0;
}
/* 라디오 점 — 피그마는 라디오 점 없음, 숨김 */
#opt-print .opt-select-card .opt-radio-dot {
	display: none;
}

/* 모바일 — 썸네일 작게 */
@media (max-width: 640px) {
	#opt-print .opt-select-card .opt-select-img {
		width: 72px;
		height: 72px;
	}
}

/* ── 종이 카드 썸네일 — 영상/줌 아이콘 모두 제거 (사용자 요청) ── */
#paper-card-list .opt-select-card .opt-select-img {
	position: relative;
}
/* :has 셀렉터 ::after 도 강제 비활성화 */
#paper-card-list .opt-select-card .opt-select-img:has(.opt-thumb-img)::after,
#paper-card-list .opt-select-card:hover .opt-select-img:has(.opt-thumb-img)::after,
#paper-card-list .opt-select-card.selected .opt-select-img:has(.opt-thumb-img)::after {
	display: none !important;
	content: none !important;
}

/* ══════════════════════════════════════════════════════════
 * 인쇄 정보 그룹 (피그마 11:1135) — 양면 select + 부수 select 세로 스택
 * ══════════════════════════════════════════════════════════ */
.fb-print-info-row {
	flex-direction: column !important;
	gap: 12px !important;
	align-items: stretch !important;
}
.fb-print-type-select {
	width: 100% !important;
	max-width: none !important;
	height: 50px;
	min-height: 50px;
	padding: 0 36px 0 14px;
	font-size: 14px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	background: var(--fb-color_bg_white) url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
}
.fb-print-type-select:hover {
	border-color: var(--fb-color_text_muted);
}
.fb-print-type-select:focus {
	border-color: #1b2631;
	outline: none;
}
/* 부수 박스도 인쇄 정보 그룹 안에서 50px 통일 */
.fb-print-info-row .order-qty-wrap.order-qty-inline {
	width: 100%;
	margin: 0;
}
.fb-print-info-row .order-qty-box {
	height: 50px;
	min-height: 50px;
	padding: 0 14px;
	border-radius: 3px;
}
.fb-print-info-row .order-qty-value {
	font-size: 14px;
	font-weight: 400;
}

/* ══════════════════════════════════════════════════════════
 * 후가공 도(layer) 카드 — 피그마 11:866 정확 사양
 * 각 "도" 카드: bg var(--fb-color_bg_subtle), 보더 var(--fb-color_border), radius 5px, padding 20px, gap 20px column
 * ══════════════════════════════════════════════════════════ */
.gold-stamp-row,
.gold3d-stamp-row,
.emboss-stamp-row,
.lp-stamp-row,
.laser-cut-row {
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border);
	border-radius: 5px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* 행 사이 간격 — 피그마 24px gap */
.gold-stamp-list,
.gold3d-stamp-list,
.emboss-stamp-list,
.lp-stamp-list,
.laser-cut-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* 도(layer)가 추가될 때도 각 카드가 자체 풀 보더 유지 — 2도+ 의 상단 라인 보존 */
.gold-stamp-row + .gold-stamp-row,
.gold3d-stamp-row + .gold3d-stamp-row,
.emboss-stamp-row + .emboss-stamp-row,
.lp-stamp-row + .lp-stamp-row,
.laser-cut-row + .laser-cut-row {
	margin-top: 0;            /* gap 으로 처리 */
	padding-top: 20px;        /* 카드 자체 padding 그대로 */
	border-top: 1px solid var(--fb-color_border);   /* 명시적으로 상단 보더 강제 */
}

/* ── 추가하기 버튼 — 피그마 11:950 (bg var(--fb-color_bg_subtle), 보더 var(--fb-color_border)) ── */
.gold-stamp-add,
.gold3d-stamp-add,
.emboss-stamp-add,
.lp-stamp-add,
.laser-cut-add {
	margin-top: 24px;        /* 도(layer) 카드와 추가하기 버튼 사이 간격 — 피그마 24px */
	padding: 0;
	border-top: none;
	text-align: center;
}
.btn-gold-add,
.btn-gold3d-add,
.btn-emboss-add,
.btn-lp-add,
.btn-fb-postproc-region {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 22px 20px;
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border);
	border-radius: 5px;
	color: #444;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-gold-add:hover,
.btn-gold3d-add:hover,
.btn-emboss-add:hover,
.btn-lp-add:hover,
.btn-fb-postproc-region:hover {
	border-color: #1b2631;
	color: #1b2631;
}
.btn-gold-add svg,
.btn-gold3d-add svg,
.btn-emboss-add svg,
.btn-lp-add svg,
.btn-fb-postproc-region svg {
	flex-shrink: 0;
	color: #444;
}

/* ── 색상칩 (color chip) 둥글게 + 선택 상태 다크 네이비 보더 ── */
.gold-color-chips .gold-color-chip,
.gold-color-chips .gold3d-color-chip,
.gold-color-chips .emboss-color-chip,
.gold-color-chips .lp-color-chip {
	border: 1px solid transparent;
	transition: border-color 0.15s, transform 0.1s;
}
.gold-color-chips .gold-color-chip:hover,
.gold-color-chips .gold3d-color-chip:hover,
.gold-color-chips .emboss-color-chip:hover,
.gold-color-chips .lp-color-chip:hover {
	transform: scale(1.05);
}
.gold-color-chips .gold-color-chip.selected,
.gold-color-chips .gold3d-color-chip.selected,
.gold-color-chips .emboss-color-chip.selected,
.gold-color-chips .lp-color-chip.selected {
	border-color: #1b2631;
	box-shadow: 0 0 0 2px var(--fb-color_bg_white) inset;
}

/* ── PDF 업로드 dropzone — 피그마의 dashed 블루 dropzone ── */
/* 기본 상태: 연한 회색 dashed 보더 */
.stamp-pdf-dropzone {
	background: var(--fb-color_bg_subtle);
	border: 2px dashed #e5e5e5;
	color: var(--fb-color_brand_primary);
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
/* 마우스 오버: 파란 dashed 보더 + 파란 텍스트/아이콘 (첨부 이미지 매치) */
.stamp-pdf-dropzone:hover,
.stamp-pdf-dropzone.drag-over,
.stamp-pdf-upload-area.drag-over .stamp-pdf-dropzone {
	border-color: var(--fb-color_brand_primary);
	background: #f5f8ff;
	color: var(--fb-color_brand_primary);
}
.stamp-pdf-dropzone:hover svg,
.stamp-pdf-dropzone.drag-over svg,
.stamp-pdf-upload-area.drag-over .stamp-pdf-dropzone svg {
	stroke: var(--fb-color_brand_primary);
	opacity: 1;
}
.stamp-pdf-dropzone:hover .stamp-pdf-dropzone-text,
.stamp-pdf-dropzone.drag-over .stamp-pdf-dropzone-text {
	color: var(--fb-color_brand_primary);
	font-weight: 400;
}

/* ── 업로드 결과 행 (파일명 + 면적 정보) ── */
.stamp-pdf-result {
	background: transparent;
	padding: 0 36px 14px 0;   /* 우측: X 버튼 영역, 하단: 라인과 간격 */
	line-height: 1.2;          /* 글씨를 살짝 위로 — 줄간격 축소 */
	margin-top: -2px;
}
.stamp-pdf-filename {
	font-size: 14px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
}

/* ══════════════════════════════════════════════════════════
 * 단일 인스턴스 후가공 카드 (.opt-post-card)
 * - 레이저 / 톰슨 / 봉투 접착 / 접지 / 제본 — 단일 도(layer) 만 있는 후가공
 * - gold-stamp-row 와 동일 스타일 (회색 배경 + 보더 + radius)
 * ══════════════════════════════════════════════════════════ */
.opt-post-card {
	background: var(--fb-color_bg_subtle);
	border: 1px solid var(--fb-color_border);
	border-radius: 5px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 626px;
	max-width: 100%;
	box-sizing: border-box;
}
/* 인쇄 방식 카드 standard: sri padding-bottom 20px → 1px line → 16px gap → next content
   .opt-post-card 의 gap 16px 와 sri pb 20px 조합으로 재현 */
/* 추가 콘텐츠가 없는 카드(예: env_gluing) — 1도 영역 하단 구분선 제거 */
.opt-post-card.is-info-only .stamp-row-info {
	border-bottom: none;
	padding-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
 * 1도(첫 행) 카드 안 상단 영역 (.stamp-row-info)
 * - 인쇄 방식 카드(.opt-print-body-info)와 동일한 배치
 * - 좌측 100×100 썸네일 (1px var(--fb-color_border_default), radius 3px)
 * - 우측 텍스트 스택: 이름(SB 14px) + 설명(Regular 14px) + 추가라인(Light 14px)
 * - 1도 카드 외 (2도, 3도)에는 표시되지 않음 (JS에서 idx===1에서만 삽입)
 * ══════════════════════════════════════════════════════════ */
.stamp-row-info {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	/* 구분선: 드롭존(.stamp-pdf-dropzone) 좌우 폭에 맞춤 — 카드 padding(20px) 안쪽까지만 */
	padding-bottom: 20px;
	border-bottom: 1px solid var(--fb-color_border);
}
/* 무상 자산 섹션이 바로 아래에 있을 때는 구분선 제거 (이중 라인 방지) */
/* 톰슨 가공봉투 — 인트로 블록이 자산 라벨을 대체할 때 자산 리스트 숨김 */
.fb-free-asset-list.is-hidden { display: none !important; }

/* 봉투 접착가공 카드 — 자동 재생 봉투 접힘 애니메이션 (썸네일 자리) */
.stamp-row-info-thumb.env-fold-thumb-host {
	background: var(--fb-color_bg_subtle);
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 0;
	overflow: hidden;
	position: relative;
}
.env-fold-anim {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box;
}
.env-fold-svg {
	width: 100%;
	height: auto;
	max-width: 80px;
	overflow: visible;
}
.env-fold-svg .env-flap {
	transform-origin: 40px 14px;
	animation: env-fold-flap 3.6s ease-in-out infinite;
}
@keyframes env-fold-flap {
	0%, 12%   { transform: scaleY(1); }      /* 펼침 (위로 열린 상태) */
	44%, 56%  { transform: scaleY(-1); }     /* 접힘 (V 모양 안으로) */
	88%, 100% { transform: scaleY(1); }      /* 다시 펼침 */
}

/* ════════════════════════════════════════════════════════════════
 *  fb-quality-intro — 톰슨 가공 봉투 인라인 품질 안내 (박스 없음)
 * ════════════════════════════════════════════════════════════════ */
.fb-quality-intro {
	margin: 0 0 14px;
}
.fb-quality-intro .fb-quality-headline {
	font-size: 14px;
	font-weight: 600;
	color: #1b2631;
	margin: 0 0 6px;
	line-height: 1.4;
}
.fb-quality-intro .fb-quality-sub {
	font-size: 13px;
	font-weight: 300;
	color: #555;
	line-height: 1.55;
	margin: 0 0 12px;
}
.fb-quality-intro .fb-quality-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fb-quality-intro .fb-quality-points li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--fb-color_text_primary);
	line-height: 1.4;
}
.fb-quality-intro .fb-quality-points svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: #2563eb;
}
@media (max-width: 480px) {
	.fb-quality-intro .fb-quality-points {
		grid-template-columns: 1fr;
	}
}

/* ════════════════════════════════════════════════════════════════
 *  fb-quality-block — (legacy) 박스형 안내 — 현재 사용 안 함
 * ════════════════════════════════════════════════════════════════ */
.fb-quality-block {
	background: var(--fb-color_bg_white);
	border: 1px solid #e8e8e8;
	border-radius: 5px;
	padding: 18px 20px;
	margin-bottom: 12px;
}
.fb-quality-block .fb-quality-title {
	font-size: 14px;
	font-weight: 600;
	color: #1b2631;
	margin: 0 0 8px;
	line-height: 1.4;
}
.fb-quality-block .fb-quality-desc {
	font-size: 13px;
	font-weight: 300;
	color: #555;
	line-height: 1.55;
	margin: 0 0 14px;
}
.fb-quality-block .fb-quality-benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.fb-quality-block .fb-quality-benefits li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fb-color_text_primary);
	line-height: 1.4;
}
.fb-quality-block .fb-quality-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: #888;
}
.fb-quality-block .fb-quality-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}
.fb-quality-block .fb-quality-note {
	font-size: 11.5px;
	color: var(--fb-color_text_muted);
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--fb-color_bg_section);
	line-height: 1.5;
}
@media (max-width: 480px) {
	.fb-quality-block .fb-quality-benefits {
		grid-template-columns: 1fr;
	}
}

.stamp-row-info:has(+ .fb-free-asset-section.is-active) {
	border-bottom: 0;
}
.stamp-row-info-thumb {
	flex-shrink: 0;
	width: 110px;
	height: 110px;
	border: 1px solid var(--fb-color_border_default);
	border-radius: 3px;
	background: var(--fb-color_bg_section);
	overflow: hidden;
}
.stamp-row-info-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.stamp-row-info-thumb.is-empty {
	background: var(--fb-color_bg_section);
}
.stamp-row-info-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;                  /* 행간 살짝 타이트하게 */
	align-self: stretch;
	padding-top: 4px;
}
.stamp-row-info-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--fb-color_text_primary);
	line-height: 1.2;
	margin: 0 0 4px;           /* 제목 아래 살짝 여백 */
}
.stamp-row-info-desc {
	font-size: 14px;
	font-weight: 400;
	color: var(--fb-color_text_primary);
	line-height: 1.35;         /* 1.5 → 1.35 (살짝 타이트) */
	margin: 0;
}
.stamp-row-info-line {
	font-size: 14px;
	font-weight: 300;          /* Pretendard Light */
	color: var(--fb-color_text_primary);
	line-height: 1.35;         /* 1.5 → 1.35 (살짝 타이트) */
	margin: 0;
}
/* PC: description 2줄 표시, 모바일 1줄 숨김 */
.stamp-row-pc { display: block !important; }
.stamp-row-mobile { display: none !important; }
/* 자세히 알아보기 — 본문 아래 별도 줄, 본문과 같은 색·크기 + 밑줄 */
.stamp-row-info-detail {
	font-size: 14px;
	line-height: 1.35;
	margin: 6px 0 0;
}
.stamp-row-info-detail a.fb-guide-link {
	color: var(--fb-color_text_primary) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	margin-left: 0 !important;
	cursor: pointer;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.stamp-row-info-detail .fb-guide-text {
	border-bottom: 1px solid rgba(17, 17, 17, 0.18);
	padding-bottom: 1px;
}
.stamp-row-info-detail .fb-guide-arrow {
	font-size: 20px;
	line-height: 1;
	font-weight: 300;
	color: var(--fb-color_text_primary);
	position: relative;
	top: 2px;
}
.stamp-row-info-detail a.fb-guide-link:hover .fb-guide-text {
	border-bottom-color: rgba(17, 17, 17, 0.4);
}
.stamp-row-info-detail a.fb-guide-link:hover {
	color: var(--fb-color_text_primary) !important;
	text-decoration: none !important;
}
/* 모바일 — 썸네일 살짝 작게 (텍스트 크기는 14px 유지 — 인쇄/종이 카드와 통일) */
@media (max-width: 640px) {
	.stamp-row-info { gap: 14px; padding-bottom: 14px; }
	.stamp-row-info-thumb { width: 80px; height: 80px; }
	.stamp-row-pc { display: none !important; }
	.stamp-row-mobile { display: block !important; }
}

/* ════════════════════════════════════════════════════════════════
 *  디자인 인스펙터 (관리자 전용) — 주문하기 버튼 아래 토글 버튼.
 *  활성화 시 페이지 요소 호버하면 spacing/font 정보 오버레이.
 *  요소 클릭 시 admin 디자인 센터 팝업 오픈.
 * ════════════════════════════════════════════════════════════════ */
.btn-design-inspect {
	width: 100%;
	height: 36px;
	margin-top: 8px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--fb-color_bg_white);
	border: 1px dashed #aaa;
	border-radius: 6px;
	color: #666;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
}
.btn-design-inspect:hover {
	border-color: #1565c0;
	color: #1565c0;
}
.btn-design-inspect.is-active {
	background: #1565c0;
	border-color: #1565c0;
	border-style: solid;
	color: #fff;
}
.btn-design-inspect.is-active svg { stroke: #fff; }

/* 인스펙터 활성화 시 — 호버 가능한 요소 강조 (background-color 는 사용 X — 실제 bg 값 가려서 컴퓨티드 스타일 읽기를 방해함) */
body.fb-design-inspect * { cursor: crosshair !important; }
body.fb-design-inspect .fb-design-inspect-target {
	outline: 2px solid #1565c0 !important;
	outline-offset: -2px;
	box-shadow: inset 0 0 0 9999px rgba(21, 101, 192, 0.06) !important;
}

/* 디자인 센터 "사용처 보기" 진입 시 — 매칭 요소 펄스 강조 (인스펙터와 별도) */
@keyframes fbTokenMatchPulse {
	0%, 100% { outline-color: rgba(245, 158, 11, 0.9); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
	50%      { outline-color: rgba(245, 158, 11, 1.0); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.fb-design-token-match {
	outline: 3px solid rgba(245, 158, 11, 0.9) !important;
	outline-offset: 0 !important;
	animation: fbTokenMatchPulse 1.6s ease-in-out infinite;
}
/* 상단 안내 배너 */
.fb-design-token-banner {
	position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
	z-index: 100000;
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 16px;
	background: #1f2937; color: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
	font-size: 13px;
	max-width: 90vw;
}
.fb-design-token-banner .fbtb-icon { font-size: 18px; line-height: 1.3; }
.fb-design-token-banner .fbtb-info { display: flex; flex-direction: column; gap: 4px; }
.fb-design-token-banner strong { color: #fbbf24; }
.fb-design-token-banner code {
	background: rgba(255,255,255,0.12); padding: 1px 6px; border-radius: 3px;
	font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 12px;
	color: #fde68a;
}
.fb-design-token-banner .fbtb-shared {
	color: #fda4af; font-size: 12px;
}
.fb-design-token-banner .fbtb-shared code { color: #fecaca; background: rgba(255,255,255,0.08); }
.fb-design-token-banner .fbtb-close {
	margin-left: 4px;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	border: none; color: #fff;
	font-size: 16px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.fb-design-token-banner .fbtb-close:hover { background: rgba(255,255,255,0.3); }
/* 인스펙터 정보 패널 (마우스 따라다님) */
.fb-design-inspect-info {
	position: fixed;
	z-index: 100000;
	background: rgba(33, 33, 33, 0.95);
	color: #fff;
	font-family: 'SF Mono', Monaco, Consolas, monospace;
	font-size: 11px;
	line-height: 1.5;
	padding: 8px 10px;
	border-radius: 6px;
	pointer-events: none;
	max-width: 320px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	white-space: nowrap;
}
.fb-design-inspect-info .di-title {
	color: #5dade2;
	font-weight: 700;
	margin-bottom: 4px;
}
.fb-design-inspect-info .di-row {
	display: flex;
	gap: 6px;
}
.fb-design-inspect-info .di-key { color: #aaa; min-width: 80px; }
.fb-design-inspect-info .di-val { color: #f0d979; }
.fb-design-inspect-info .di-token {
	margin-left: 4px;
	padding: 1px 5px;
	background: rgba(93, 173, 226, 0.18);
	color: #5dade2;
	border-radius: 3px;
	font-size: 10px;
}
.fb-design-inspect-info .di-edit-hint {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid rgba(255,255,255,0.15);
	color: #5dade2;
	font-size: 10px;
}

/* 디자인 센터 토큰 검사 모달 */
.fb-design-not-registered-dim {
	position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100001;
}
.fb-design-not-registered {
	position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
	z-index: 100002; width: min(640px, 92vw); max-height: 86vh;
	background: #fff; border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.25);
	display: flex; flex-direction: column; overflow: hidden;
}
.fb-design-not-registered .dnr-title {
	padding: 16px 20px; font-size: 16px; font-weight: 700; color: #1b2631;
	background: #f8f8f8; border-bottom: 1px solid #e5e5e5;
}
.fb-design-not-registered .dnr-body {
	padding: 16px 20px; font-size: 13px; color: #333; line-height: 1.6;
	overflow-y: auto; flex: 1;
}
.fb-design-not-registered .dnr-selector {
	background: #f0f0f0; padding: 6px 10px; border-radius: 4px; margin-bottom: 10px;
	font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 12px; color: #1565c0; word-break: break-all;
}
.fb-design-not-registered .dnr-explain {
	color: #666; font-size: 12px; margin: 0 0 14px;
}
.fb-design-not-registered .dnr-prop-list {
	display: flex; flex-direction: column; gap: 6px;
}
.fb-design-not-registered .dnr-prop-row {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px; background: #fafafa; border: 1px solid #ededed; border-radius: 6px;
}
.fb-design-not-registered .dnr-prop-name {
	min-width: 90px; font-weight: 600; color: #555; font-size: 12px;
}
.fb-design-not-registered .dnr-prop-val {
	flex: 1; font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 12px;
	color: #333; background: transparent; word-break: break-all;
}
.fb-design-not-registered .dnr-badge {
	padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 600;
	white-space: nowrap;
}
.fb-design-not-registered .dnr-badge.dnr-ok { background: #e3f2fd; color: #1565c0; font-family: 'SF Mono', Monaco, Consolas, monospace; }
.fb-design-not-registered .dnr-badge.dnr-noreg { background: #fee2e2; color: #b91c1c; }
.fb-design-not-registered .dnr-badge.dnr-skip { background: #f0f0f0; color: #888; }
.fb-design-not-registered .dnr-row-btn {
	padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 500;
	cursor: pointer; border: 1px solid #ddd; background: #fff; color: #555;
}
.fb-design-not-registered .dnr-row-btn:hover { background: #f0f0f0; }
.fb-design-not-registered .dnr-row-btn-primary { background: #1565c0; color: #fff; border-color: #1565c0; }
.fb-design-not-registered .dnr-row-btn-primary:hover { background: #0d47a1; }
.fb-design-not-registered .dnr-actions {
	display: flex; justify-content: flex-end; gap: 8px;
	padding: 12px 20px; border-top: 1px solid #ededed; background: #fafafa;
}
.fb-design-not-registered .dnr-btn {
	padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 500;
	cursor: pointer; border: 1px solid transparent; background: #fff;
}
.fb-design-not-registered .dnr-btn-primary { background: #1565c0; color: #fff; border-color: #1565c0; }
.fb-design-not-registered .dnr-btn-cancel { color: #666; border-color: #ddd; }
.fb-design-not-registered .dnr-btn-primary:hover { background: #0d47a1; }
.fb-design-not-registered .dnr-btn-cancel:hover { background: #f0f0f0; }

/* 인스펙터 툴팁의 미등록 표시 */
.fb-design-inspect-info .di-noreg {
	margin-left: 4px; padding: 1px 5px;
	background: rgba(220, 38, 38, 0.18); color: #ef4444;
	border-radius: 3px; font-size: 10px;
}

/* ════════════════════════════════════════════════════════════════
 *  Design 섹션 — 두 카드 (에디터 / 작업파일 업로드)
 *  카드 2 head 클릭 시 본문 펼침 (.fb-design-upload-open)
 * ════════════════════════════════════════════════════════════════ */
/* 카드 1: 타이틀 padding 압축 + 버튼 라벨 14px */
.fb-design-card.editor-launch .fb-design-card-head { padding-bottom: 8px; }
.btn-editor-launch span { font-size: 14px; font-weight: 600; }

/* 카드 2: head 만 보이고 본문은 collapsed — head 자체가 토글, 중앙 정렬 */
.fb-design-card.uv-file-section .fb-design-card-head {
	cursor: pointer;
	user-select: none;
	align-items: center;
	text-align: center;
	gap: 12px;            /* 타이틀과 화살표 간 간격 충분히 */
	padding: 4px 0;       /* 클릭 영역 보장 */
}
.fb-design-card.uv-file-section .fb-design-card-toggle-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	color: var(--fb-color_text_secondary);
	padding: 4px;
	box-sizing: border-box;
	transition: transform 0.2s ease, background 0.15s, border-color 0.15s;
	flex-shrink: 0;
}
.fb-design-card.uv-file-section .fb-design-card-head:hover .fb-design-card-toggle-arrow {
	background: var(--fb-color_border);
	border-color: var(--fb-color_text_disabled);
}
.fb-design-card.uv-file-section .fb-design-card-title { font-size: 15px; font-weight: 600; }
/* 본문(가이드 다운로드 + 업로드 + placeholder) 기본 collapsed */
.fb-design-card.uv-file-section .upload-guide-download,
.fb-design-card.uv-file-section .uv-side-uploads,
.fb-design-card.uv-file-section .uv-layer-placeholder { display: none; }
/* expand 시 본문 노출 + 화살표 회전 */
body.fb-design-upload-open .fb-design-card.uv-file-section .upload-guide-download { display: block; }
body.fb-design-upload-open .fb-design-card.uv-file-section .uv-side-uploads { display: block; }
/* 뒷면 col 숨김 — 단일 통합 드롭존으로 변경 (자동 판정으로 앞/뒤 분리) */
body.fb-design-upload-open .fb-design-card.uv-file-section .uv-side-col-back { display: none !important; }
body.fb-design-upload-open .fb-design-card.uv-file-section .uv-side-col:not(.uv-side-col-back) { width: 100%; }
/* 기존 single-file 결과 UI 영구 숨김 — 새 designSets 카드 리스트가 결과 표시 담당 */
body.fb-design-upload-open .fb-design-card.uv-file-section .uv-side-result { display: none !important; }
/* 드롭존은 항상 노출 + 라벨 변경 */
body.fb-design-upload-open .fb-design-card.uv-file-section .uv-side-dropzone { display: flex !important; min-height: 120px; }
body.fb-design-upload-open .fb-design-card.uv-file-section .uv-side-col:not(.uv-side-col-back) .uv-side-label { color: #1a73e8; }
body.fb-design-upload-open .fb-design-card.uv-file-section .uv-layer-placeholder { display: block; }
body.fb-design-upload-open .fb-design-card.uv-file-section .fb-design-card-toggle-arrow { transform: rotate(180deg); }
body.fb-design-upload-open .fb-design-card.uv-file-section .fb-design-card-head { padding-bottom: 16px; }

/* ════════════════════════════════════════════════════════════════
 *  fb-breadcrumb — 모든 factoryb 페이지 공유 (preview / cart)
 * ════════════════════════════════════════════════════════════════ */
.fb-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0;
	height: 50px;
	font-size: 15px;
	color: var(--fb-color_text_secondary);
	line-height: 1.2;
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--fb-color_bg_white);
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s, box-shadow 0.15s;
}
/* PC 에서도 브레드크럼 노출 — 단, 검색/장바구니 아이콘 숨김 + sticky 비활성 (정적 표기) */
@media (min-width: 769px) {
	.fb-breadcrumb-actions { display: none !important; }
	.fb-breadcrumb {
		position: static !important;
		box-shadow: none !important;
		border-bottom: none !important;
	}
	.fb-breadcrumb.is-stuck {
		box-shadow: none !important;
		border-bottom: none !important;
	}
}
.fb-breadcrumb.is-stuck {
	border-bottom-color: var(--fb-color_border);
	box-shadow: 0 4px 4px -4px rgba(0,0,0,0.06);
}
@media (max-width: 768px) {
	.fb-breadcrumb {
		padding: 12px 16px;
		margin: 0 -16px 0;
	}
}
.fb-breadcrumb-item {
	color: var(--fb-color_text_secondary);
	text-decoration: none;
	font-weight: 500;
	font-size: inherit;
}
.fb-breadcrumb-item:hover { color: var(--fb-color_text_primary); }
.fb-breadcrumb-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px 0 12px;
	height: 30px;
	background: #f5f5f5;
	border-radius: 100px;
	font-size: 14px;
	transition: background 0.15s, color 0.15s;
}
.fb-breadcrumb-cat:hover { background: var(--fb-color_border); color: var(--fb-color_text_primary); }
.fb-breadcrumb-back { color: inherit; flex-shrink: 0; }
.fb-breadcrumb-back path { stroke: currentColor !important; fill: none !important; }
.fb-breadcrumb-cat + .fb-breadcrumb-current { margin-left: 7px; }
.fb-breadcrumb-sep { color: #bbb; font-size: 13px; font-weight: 300; }
.fb-breadcrumb-current {
	color: #222;
	font-weight: 600;
	font-size: 14px;
}

/* .opt-post-top 은 1도 카드 내 .stamp-row-info 로 마이그레이션됨 — HTML/CSS 모두 제거 */

/* ─────────────────────────────────────────────────────────────────────
   디자인 의뢰 유도 배너 (Phase 1 — 2026-05-07)
   preview.php 디자인 탭 패널 하단(PC) + 하단 sticky 패널(모바일) 에서 사용.
   클릭 시 /factoryb/design-request.php 진입 (카테고리 선택 화면).
   모든 카테고리 공통 노출.
   ───────────────────────────────────────────────────────────────────── */
.fb-design-request-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 14px 16px;
	background: linear-gradient(135deg, #f6f9ff 0%, #eef4ff 100%);
	border: 1px solid #d6e4ff;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.fb-design-request-cta:hover {
	border-color: #1a73e8;
	box-shadow: 0 4px 12px rgba(26, 115, 232, 0.10);
	transform: translateY(-1px);
	text-decoration: none;
}
.fb-design-request-cta:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(26, 115, 232, 0.08);
}
.fb-drc-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #d6e4ff;
	border-radius: 50%;
}
.fb-drc-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.fb-drc-title {
	font-size: 14px;
	font-weight: 700;
	color: #1b2631;
	line-height: 1.3;
}
.fb-drc-desc {
	font-size: 12px;
	color: #666;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fb-drc-arrow {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 18px;
	font-weight: 600;
	color: #1a73e8;
	line-height: 1;
}

/* 모바일 — padding/text-size 다운 */
@media (max-width: 768px) {
	.fb-design-request-cta {
		padding: 12px 14px;
		gap: 10px;
		margin-top: 12px;
	}
	.fb-drc-icon { width: 32px; height: 32px; }
	.fb-drc-icon svg { width: 20px; height: 20px; }
	.fb-drc-title { font-size: 13px; }
	.fb-drc-desc  { font-size: 11px; }
	.fb-drc-arrow { font-size: 16px; }
}