/*
 * Factory B — 봉투 주문시스템 UI kit (런칭용 디자인 토큰 + 공통 컴포넌트)
 * 관리자 페이지와 주문 페이지가 공유. 기존 레이아웃은 건드리지 않고
 * .env-* 네임스페이스로만 주입된다.
 */

:root {
	--env-brand: #1a73e8;
	--env-brand-dark: #1557b0;
	--env-brand-50: #e8f0fe;
	--env-success: #137333;
	--env-success-50: #e6f4ea;
	--env-warning: #b06000;
	--env-warning-50: #fef7e0;
	--env-danger: #c5221f;
	--env-danger-50: #fce8e6;
	--env-n0: var(--fb-color_bg_white);
	--env-n50: var(--fb-color_bg_subtle);
	--env-n100: #f5f5f5;
	--env-n200: #e5e5e5;
	--env-n300: #d0d0d0;
	--env-n400: #a0a0a0;
	--env-n600: var(--fb-color_text_secondary);
	--env-n800: var(--fb-color_text_primary);
	--env-radius: 6px;
	--env-radius-sm: 4px;
	--env-radius-pill: 999px;
	--env-gap-xs: 4px;
	--env-gap-sm: 8px;
	--env-gap-md: 12px;
	--env-gap-lg: 16px;
	--env-gap-xl: 24px;
	--env-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--env-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
	--env-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10);
	--env-font-xs: 11px;
	--env-font-sm: 12px;
	--env-font-md: 13px;
	--env-font-lg: 15px;
	--env-font-xl: 18px;
}

/* ───────── Badges ───────── */
.env-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--env-radius-pill);
	font-size: var(--env-font-xs);
	line-height: 1.4;
	font-weight: 500;
	white-space: nowrap;
}
.env-badge.is-success { background: var(--env-success-50); color: var(--env-success); }
.env-badge.is-warning { background: var(--env-warning-50); color: var(--env-warning); }
.env-badge.is-danger  { background: var(--env-danger-50);  color: var(--env-danger); }
.env-badge.is-info    { background: var(--env-brand-50);   color: var(--env-brand); }
.env-badge.is-muted   { background: var(--env-n100);       color: var(--env-n600); }

/* ───────── Completeness meter ───────── */
.env-completeness {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
.env-completeness-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--env-n200);
	display: inline-block;
}
.env-completeness-dot.is-done { background: var(--env-success); }
.env-completeness-dot.is-warn { background: var(--env-warning); }
.env-completeness-dot.is-danger { background: var(--env-danger); }
.env-completeness-label {
	margin-left: 6px; font-size: var(--env-font-xs); color: var(--env-n600); font-weight: 500;
}

/* ───────── Empty state ───────── */
.env-empty-state {
	padding: 48px 24px;
	text-align: center;
	background: var(--env-n50);
	border: 1px dashed var(--env-n300);
	border-radius: var(--env-radius);
	margin: 16px 0;
}
.env-empty-state .env-es-icon { font-size: 40px; margin-bottom: 12px; color: var(--env-n400); }
.env-empty-state h4 { margin: 0 0 8px; font-size: 16px; color: var(--env-n800); }
.env-empty-state p { margin: 0 0 16px; font-size: var(--env-font-md); color: var(--env-n600); line-height: 1.6; }
.env-empty-state .env-es-action { display: inline-block; }

/* ───────── Checklist (완성도 세부) ───────── */
.env-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--env-font-md);
}
.env-checklist li {
	padding: 6px 0 6px 22px;
	position: relative;
	color: var(--env-n600);
	line-height: 1.5;
}
.env-checklist li::before {
	content: '○';
	color: var(--env-n400);
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	text-align: center;
}
.env-checklist li.is-done { color: var(--env-n800); }
.env-checklist li.is-done::before { content: '✓'; color: var(--env-success); font-weight: bold; }
.env-checklist li br + span,
.env-checklist li > span { font-size: var(--env-font-xs); color: var(--env-n600); line-height: 1.5; }

/* ───────── Help panel ───────── */
.env-help {
	background: #f8f9fa;
	border-left: 3px solid var(--env-brand);
	padding: 10px 12px;
	font-size: var(--env-font-sm);
	color: var(--env-n600);
	border-radius: 0 var(--env-radius-sm) var(--env-radius-sm) 0;
	margin: 8px 0;
	line-height: 1.6;
}
.env-help strong { color: var(--env-n800); }
.env-help.is-warning { border-left-color: var(--env-warning); background: #fef9ed; }
.env-help.is-danger  { border-left-color: var(--env-danger);  background: #fef1ef; }

/* ───────── Price card ───────── */
.env-price-card {
	background: var(--env-n0);
	border: 1px solid var(--env-n200);
	border-radius: var(--env-radius);
	padding: 16px;
	box-shadow: var(--env-shadow-md);
}
.env-price-card h5 {
	margin: 0 0 8px; font-size: var(--env-font-md); color: var(--env-n600);
	font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
}
.env-price-row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 6px 0; font-size: var(--env-font-md); border-bottom: 1px dashed var(--env-n200);
}
.env-price-row:last-child { border-bottom: none; }
.env-price-row .env-price-label { color: var(--env-n600); }
.env-price-row .env-price-value { font-weight: 500; color: var(--env-n800); }
.env-price-row.is-discount .env-price-value { color: var(--env-success); }
.env-price-row.is-total {
	border-top: 2px solid var(--env-n800); border-bottom: none;
	font-size: var(--env-font-xl); font-weight: 700; margin-top: 8px; padding-top: 12px;
}
.env-price-row .env-price-note { font-size: var(--env-font-xs); color: var(--env-n400); margin-left: 6px; }

/* ───────── Wizard steps ───────── */
.env-wizard {
	display: flex;
	gap: 0;
	margin: 16px 0;
	border-radius: var(--env-radius);
	overflow: hidden;
	box-shadow: var(--env-shadow-sm);
}
.env-wizard-step {
	flex: 1;
	padding: 10px 14px;
	background: var(--env-n50);
	border: 1px solid var(--env-n200);
	border-right: none;
	font-size: var(--env-font-sm);
	color: var(--env-n600);
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}
.env-wizard-step:last-child { border-right: 1px solid var(--env-n200); }
.env-wizard-step .env-ws-num {
	display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
	background: var(--env-n200); color: var(--env-n600);
	font-size: 11px; font-weight: 600;
	align-items: center; justify-content: center;
}
.env-wizard-step.is-active { background: var(--env-brand); color: var(--fb-color_bg_white); border-color: var(--env-brand); }
.env-wizard-step.is-active .env-ws-num { background: var(--fb-color_bg_white); color: var(--env-brand); }
.env-wizard-step.is-done { background: var(--env-success); color: var(--fb-color_bg_white); border-color: var(--env-success); }
.env-wizard-step.is-done .env-ws-num { background: var(--fb-color_bg_white); color: var(--env-success); }

/* ───────── Segmented control (면수·색상 토글 강화) ───────── */
.env-segmented {
	display: inline-flex;
	background: var(--env-n100);
	border-radius: var(--env-radius-sm);
	padding: 3px;
	gap: 2px;
}
.env-segmented label {
	padding: 6px 14px;
	font-size: var(--env-font-md);
	color: var(--env-n600);
	cursor: pointer;
	border-radius: var(--env-radius-sm);
	transition: all 0.15s;
}
.env-segmented label:hover:not(.is-disabled) { background: var(--env-n0); }
.env-segmented label.is-selected {
	background: var(--env-n0);
	color: var(--env-brand);
	font-weight: 600;
	box-shadow: var(--env-shadow-sm);
}
.env-segmented label.is-disabled { opacity: 0.4; cursor: not-allowed; }
.env-segmented input { display: none; }

/* ───────── Swatch grid (컬러) ───────── */
.env-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, 76px); gap: 12px; }
.env-swatch-item {
	cursor: pointer;
	padding: 6px;
	border: 2px solid var(--env-n200);
	border-radius: var(--env-radius);
	text-align: center;
	transition: all 0.15s;
}
.env-swatch-item:hover { border-color: var(--env-n400); }
.env-swatch-item.is-selected { border-color: var(--env-brand); background: var(--env-brand-50); }
.env-swatch-item .env-swatch-chip {
	width: 60px; height: 40px; margin: 0 auto;
	border: 1px solid var(--env-n300);
	border-radius: var(--env-radius-sm);
	background-size: cover; background-position: center;
}
.env-swatch-item .env-swatch-name { font-size: var(--env-font-sm); margin-top: 4px; }
.env-swatch-item .env-swatch-extra { font-size: var(--env-font-xs); color: var(--env-n600); }

/* ───────── Section headers (관리자 섹션/모달 제목) ───────── */
.env-section-title {
	font-size: var(--env-font-lg);
	font-weight: 700;
	margin: 16px 0 8px;
	color: var(--env-n800);
	display: flex;
	align-items: center;
	gap: 8px;
}
.env-section-desc { font-size: var(--env-font-sm); color: var(--env-n600); margin: 0 0 12px; line-height: 1.6; }

/* ───────── Danger zone ───────── */
.env-danger-zone {
	margin-top: 24px; padding: 16px;
	border: 1px solid var(--env-danger); border-radius: var(--env-radius);
	background: var(--env-danger-50);
}
.env-danger-zone h5 { margin: 0 0 8px; color: var(--env-danger); font-size: var(--env-font-md); font-weight: 600; }
.env-danger-zone p { margin: 0 0 8px; font-size: var(--env-font-sm); color: var(--env-n800); }

/* ───────── 봉투 관련 공용 모달 — 긴 콘텐츠 대응 (assets-link-box 포함) ───────── */
#envFlapZoneModal .assets-link-box,
#envPrintOptModal .assets-link-box,
#envZonesModal .assets-link-box,
#envStockDiscModal .assets-link-box,
#envColorModal .assets-link-box {
	max-height: 90vh;
	overflow-y: auto;
}

/* ───────── 날개 영역 편집기 캔버스: 과도한 세로 방지 + 레이어 겹치기 ───────── */
#flapZoneCanvas { max-height: 55vh; margin: 0 auto; }
#flapZoneTemplate {
	position: absolute !important;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;  /* overlay 가 이벤트 선점 */
}
#flapZoneTemplate > svg { width: 100% !important; height: 100% !important; display: block; }
#flapZoneOverlay { z-index: 2; }
.flap-zone-canvas-wrap { min-width: 0; }

/* ───────── 칼형 편집기 보강 ───────── */
.fz-resize-handle {
	cursor: pointer;
	fill: var(--fb-color_bg_white);
	stroke: var(--env-brand);
	stroke-width: 0.3;
}
.fz-resize-handle.nw, .fz-resize-handle.se { cursor: nwse-resize; }
.fz-resize-handle.ne, .fz-resize-handle.sw { cursor: nesw-resize; }
.fz-resize-handle.n,  .fz-resize-handle.s  { cursor: ns-resize; }
.fz-resize-handle.e,  .fz-resize-handle.w  { cursor: ew-resize; }

.fz-zone-oob { stroke-width: 0.6 !important; stroke-dasharray: 2 1; }
.fz-dim-tooltip {
	position: absolute; background: var(--env-n800); color: var(--fb-color_bg_white);
	font-size: var(--env-font-xs); padding: 3px 6px; border-radius: var(--env-radius-sm);
	pointer-events: none; white-space: nowrap; z-index: 10;
}

.fz-toolbar {
	display: flex; gap: 6px; margin-bottom: 8px; align-items: center;
	padding: 8px; background: var(--env-n50); border-radius: var(--env-radius-sm);
	font-size: var(--env-font-sm);
}
.fz-toolbar button {
	padding: 4px 10px; font-size: var(--env-font-sm);
	background: var(--env-n0); border: 1px solid var(--env-n300);
	border-radius: var(--env-radius-sm); cursor: pointer;
}
.fz-toolbar button:hover:not(:disabled) { background: var(--env-n100); }
.fz-toolbar button:disabled { opacity: 0.4; cursor: not-allowed; }
.fz-toolbar .fz-kbd {
	font-size: 10px; color: var(--env-n600);
	background: var(--env-n0); padding: 1px 4px;
	border: 1px solid var(--env-n300); border-radius: 3px;
	margin-left: 3px; font-family: monospace;
}

/* ───────── 주문 페이지 sticky 견적 카드 ───────── */
@media (min-width: 1024px) {
	.env-price-card.is-sticky { position: sticky; top: 20px; }
}
@media (max-width: 1023px) {
	.env-price-card.is-sticky {
		position: sticky; bottom: 0; left: 0; right: 0;
		z-index: 100; box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
		border-radius: var(--env-radius) var(--env-radius) 0 0;
	}
}

/* ───────── Loading / skeleton ───────── */
.env-skeleton {
	background: linear-gradient(90deg, var(--env-n100) 25%, var(--env-n200) 50%, var(--env-n100) 75%);
	background-size: 200% 100%;
	animation: env-skel 1.2s ease-in-out infinite;
	border-radius: var(--env-radius-sm);
}
@keyframes env-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.env-spinner {
	display: inline-block; width: 14px; height: 14px;
	border: 2px solid var(--env-n200); border-top-color: var(--env-brand);
	border-radius: 50%; animation: env-spin 0.8s linear infinite;
	vertical-align: middle;
}
@keyframes env-spin { to { transform: rotate(360deg); } }

/* AI 업로드 후 자동 갱신된 필드를 잠깐 강조 */
.env-auto-highlight {
	background: #fef7e0 !important;
	outline: 2px solid var(--env-warning);
	outline-offset: 2px;
	transition: background 0.3s, outline-color 0.3s;
}

/* ──────── 봉투 접힘 시뮬레이션 ──────── */
.env-fold-sim {
	position: relative;
	margin-top: 12px;
	padding: 16px;
	border: 1px solid var(--env-n200);
	border-radius: var(--env-radius);
	background: linear-gradient(180deg, var(--fb-color_bg_subtle) 0%, #f3f4f6 100%);
	perspective: 1500px;
	perspective-origin: 50% 35%;
}
.env-fold-sim .fold-stage {
	position: relative;
	margin: 0 auto;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}
.env-fold-sim svg.fold-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	transform-style: preserve-3d;
}
.env-fold-sim .fold-flap {
	transform-style: preserve-3d;
	transition: transform 1s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.env-fold-sim .fold-flap.is-left  { transform: rotateY(-180deg); }
.env-fold-sim .fold-flap.is-right { transform: rotateY(180deg); }
.env-fold-sim .fold-flap.is-bottom{ transform: rotateX(180deg); }
.env-fold-sim .fold-flap.is-top   { transform: rotateX(-180deg); }

/* 풀칠 스트립: 바깥 평면에 초록, 접힌 후 겹치는 순간 주황 강조 */
.env-fold-sim .glue-strip {
	fill: rgba(26, 115, 232, 0.15);
	stroke: #1a73e8;
	stroke-width: 0.35;
	stroke-dasharray: 1.2 0.8;
	transition: fill 0.4s;
}
.env-fold-sim .glue-strip.is-hot {
	fill: rgba(255, 140, 0, 0.55);
	stroke: #ff6600;
	stroke-width: 0.5;
	stroke-dasharray: none;
	animation: glue-pulse 0.7s ease-in-out 2;
}
@keyframes glue-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

/* 컨트롤 */
.env-fold-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	flex-wrap: wrap;
}
.env-fold-controls button {
	padding: 6px 14px;
	background: var(--env-n0);
	border: 1px solid var(--env-n300);
	border-radius: var(--env-radius-sm);
	cursor: pointer;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.env-fold-controls button:hover { background: var(--env-n100); }
.env-fold-controls button.is-primary {
	background: var(--env-brand);
	color: var(--fb-color_bg_white);
	border-color: var(--env-brand);
}
.env-fold-controls .fold-stage-label {
	font-weight: 600;
	color: var(--env-brand);
	margin-left: auto;
	font-size: 12px;
}
.env-fold-controls .fold-step-dots {
	display: inline-flex;
	gap: 6px;
	margin-left: 6px;
}
.env-fold-controls .fold-step-dots .dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--env-n200);
	transition: background 0.3s;
}
.env-fold-controls .fold-step-dots .dot.is-active {
	background: var(--env-brand);
	transform: scale(1.3);
}
.env-fold-controls .fold-step-dots .dot.is-done {
	background: var(--env-success);
}

/* 툴팁 — 풀칠 영역 위에 뜨는 설명 */
.env-fold-tooltip {
	position: absolute;
	background: rgba(31, 41, 55, 0.95);
	color: var(--fb-color_bg_white);
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 11px;
	pointer-events: none;
	white-space: nowrap;
	transform: translate(-50%, -100%) translateY(-6px);
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.env-fold-tooltip.is-visible { opacity: 1; }
.env-fold-tooltip::after {
	content: '';
	position: absolute;
	top: 100%; left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: rgba(31, 41, 55, 0.95);
}

/* ──────── 접힘 시뮬 토글 (미리보기 아래) ──────── */
.env-fold-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 16px;
	margin-top: 12px;
	background: var(--env-n0);
	color: var(--env-n800);
	border: 1px solid var(--env-n200);
	border-radius: var(--env-radius);
	cursor: pointer;
	font-size: var(--env-font-md);
	text-align: left;
	transition: all 0.18s;
}
.env-fold-toggle:hover {
	background: var(--env-brand-50);
	border-color: var(--env-brand);
	color: var(--env-brand-dark);
}
.env-fold-toggle .env-fold-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--env-brand-50);
	color: var(--env-brand);
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	transition: transform 0.18s;
}
.env-fold-toggle .env-fold-toggle-label {
	font-weight: 600;
	flex-shrink: 0;
}
.env-fold-toggle .env-fold-toggle-sub {
	color: var(--env-n600);
	font-size: var(--env-font-xs);
	margin-left: auto;
}
.env-fold-toggle.is-active {
	background: var(--env-brand-50);
	border-color: var(--env-brand);
	color: var(--env-brand-dark);
}
.env-fold-toggle.is-active .env-fold-toggle-icon {
	background: var(--env-brand);
	color: var(--fb-color_bg_white);
}

/* ──────── 자유형 에디터 런칭 스타일 ──────── */
.env-custom-editor {
	margin: 16px 0;
	padding: 20px;
	border: 1px solid var(--env-n200);
	background: var(--env-n0);
	border-radius: var(--env-radius);
	box-shadow: var(--env-shadow-sm);
}

.env-step-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
}
.env-step-row + .env-step-row { margin-top: 22px; }
.env-step-num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--env-brand);
	color: var(--fb-color_bg_white);
	font-size: var(--env-font-sm);
	font-weight: 700;
	letter-spacing: -0.3px;
}
.env-step-head { flex: 1; min-width: 0; }
.env-step-title {
	margin: 2px 0 2px;
	font-size: var(--env-font-lg);
	font-weight: 700;
	color: var(--env-n800);
	letter-spacing: -0.2px;
	line-height: 1.3;
}
.env-step-desc {
	margin: 0;
	font-size: var(--env-font-sm);
	color: var(--env-n600);
	line-height: 1.5;
}

/* 프리셋 그리드 — 가로 썸네일 카드 */
.env-preset-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 4px;
}
.env-preset-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	background: var(--env-n0);
	border: 2px solid var(--env-n200);
	border-radius: var(--env-radius);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.18s, background 0.18s, transform 0.12s;
	font: inherit;
}
.env-preset-item:hover {
	border-color: var(--env-n400);
	background: var(--env-n50);
}
.env-preset-item.is-selected {
	border-color: var(--env-brand);
	background: var(--env-brand-50);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}
.env-preset-thumb {
	width: 100%;
	height: 72px;
	object-fit: cover;
	border-radius: var(--env-radius-sm);
	background: var(--env-n100);
	border: 1px solid var(--env-n200);
}
.env-preset-thumb.is-placeholder {
	background: linear-gradient(135deg, var(--env-n100), var(--env-n200));
}
.env-preset-name {
	font-size: var(--env-font-sm);
	font-weight: 600;
	color: var(--env-n800);
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.env-preset-badge {
	display: inline-block;
	padding: 1px 6px;
	border-radius: var(--env-radius-pill);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2px;
}
.env-preset-badge.is-template { background: var(--env-success-50); color: var(--env-success); }
.env-preset-badge.is-preset   { background: var(--env-n100);       color: var(--env-n600); }
.env-preset-dims {
	font-size: var(--env-font-xs);
	color: var(--env-n600);
	font-variant-numeric: tabular-nums;
}

/* 크기 입력 행 */
.env-size-row {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}
.env-size-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.env-size-field > label {
	font-size: var(--env-font-xs);
	font-weight: 600;
	color: var(--env-n600);
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
.env-size-input {
	display: inline-flex;
	align-items: center;
	background: var(--env-n0);
	border: 1px solid var(--env-n300);
	border-radius: var(--env-radius-sm);
	padding: 0 10px;
	transition: border-color 0.15s, box-shadow 0.15s;
	height: 40px;
}
.env-size-input:focus-within {
	border-color: var(--env-brand);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
.env-size-input input {
	border: none;
	background: transparent;
	outline: none;
	width: 70px;
	font-size: var(--env-font-md);
	font-weight: 600;
	color: var(--env-n800);
	font-variant-numeric: tabular-nums;
	padding: 0;
	-moz-appearance: textfield;
}
.env-size-input input::-webkit-outer-spin-button,
.env-size-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.env-size-unit {
	font-size: var(--env-font-sm);
	color: var(--env-n600);
	margin-left: 4px;
	font-weight: 500;
}
.env-size-x {
	font-size: 18px;
	color: var(--env-n400);
	font-weight: 300;
	padding-bottom: 10px;
}
.env-size-actions {
	display: inline-flex;
	gap: 8px;
	margin-left: auto;
	align-self: flex-end;
}

/* 공용 버튼 */
.env-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 18px;
	font: inherit;
	font-size: var(--env-font-md);
	font-weight: 600;
	border-radius: var(--env-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
	white-space: nowrap;
}
.env-btn:active { transform: translateY(1px); }
.env-btn:focus-visible { outline: 2px solid var(--env-brand); outline-offset: 2px; }
.env-btn.is-primary {
	background: var(--env-brand);
	color: var(--fb-color_bg_white);
	border-color: var(--env-brand);
}
.env-btn.is-primary:hover { background: var(--env-brand-dark); border-color: var(--env-brand-dark); }
.env-btn.is-ghost {
	background: var(--env-n0);
	color: var(--env-n800);
	border-color: var(--env-n300);
}
.env-btn.is-ghost:hover { background: var(--env-n100); border-color: var(--env-n400); }

/* 메타 칩 */
.env-cd-meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 10px;
	flex-wrap: wrap;
}
.env-cd-meta {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
}
.env-cd-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--env-radius-pill);
	font-size: var(--env-font-xs);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.env-cd-chip b { font-weight: 700; letter-spacing: -0.2px; }
.env-cd-chip.is-body { background: var(--env-brand-50); color: var(--env-brand-dark); }
.env-cd-chip.is-flat { background: var(--env-n100);     color: var(--env-n800); }
.env-cd-chip.is-via  { background: var(--env-success-50); color: var(--env-success); }
.env-cd-chip.is-muted{ background: var(--env-warning-50); color: var(--env-warning); }
.env-cd-chip.is-warn-compat {
	background: var(--env-danger-50);
	color: var(--env-danger);
	font-weight: 700;
	border: 1px solid #f5b4b0;
}
.env-cd-chip.is-verified {
	background: var(--env-success-50);
	color: var(--env-success);
	font-weight: 700;
	border: 1px solid #b7e3c2;
}
.env-cd-chip.is-verified b { color: var(--env-success); font-weight: 800; }
.env-cd-chip.is-verified-warn {
	background: var(--env-warning-50);
	color: var(--env-warning);
	font-weight: 700;
	border: 1px solid #f3d68a;
}
.env-cd-chip.is-verified-warn b { color: var(--env-warning); font-weight: 800; }

/* 칼형 호환성 경고 박스 */
.env-cd-compat-warn {
	margin: 10px 0 12px;
	padding: 12px 14px;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-left: 4px solid var(--env-danger);
	border-radius: var(--env-radius);
	line-height: 1.5;
}
.env-cd-compat-title {
	font-weight: 700;
	font-size: var(--env-font-md);
	color: var(--env-danger);
	margin-bottom: 4px;
	letter-spacing: -0.2px;
}
.env-cd-compat-detail {
	font-size: var(--env-font-sm);
	color: var(--env-n800);
	margin-bottom: 6px;
}
.env-cd-compat-detail b { color: var(--env-danger); }
.env-cd-compat-recommend {
	font-size: var(--env-font-sm);
	color: var(--env-success);
	padding: 6px 10px;
	background: var(--env-success-50);
	border-radius: var(--env-radius-sm);
	display: inline-block;
}
.env-cd-compat-recommend b { color: var(--env-success); font-weight: 800; }

/* ──────── 종이 재단 수율 추천 ──────── */
.env-cd-paper-recommend {
	margin: 10px 0 12px;
	padding: 12px 14px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-left: 4px solid #0ea5e9;
	border-radius: var(--env-radius);
}
.env-paper-rec-title {
	font-size: var(--env-font-sm);
	font-weight: 700;
	color: #0369a1;
	margin-bottom: 6px;
	letter-spacing: -0.2px;
}
.env-paper-rec-pick {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	font-size: var(--env-font-sm);
	color: var(--env-n800);
}
.env-paper-rec-name { color: var(--env-n800); }
.env-paper-rec-name b { color: #075985; font-size: var(--env-font-md); letter-spacing: -0.3px; }
.env-paper-rec-spec { color: var(--env-n600); font-size: var(--env-font-xs); margin-left: 4px; }
.env-paper-rec-count, .env-paper-rec-util, .env-paper-rec-price {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 10px;
	border-radius: var(--env-radius-pill);
	background: var(--fb-color_bg_white);
	border: 1px solid #bae6fd;
	font-variant-numeric: tabular-nums;
}
.env-paper-rec-count b { color: #0369a1; font-weight: 800; }
.env-paper-rec-util b { color: var(--env-success); font-weight: 800; }
.env-paper-rec-price b { color: var(--env-n800); font-weight: 800; }
.env-paper-rec-rot {
	font-size: 10px;
	padding: 1px 5px;
	background: #fef3c7;
	color: #92400e;
	border-radius: 3px;
	margin-left: 4px;
}

/* 대체안 테이블 (더보기 아코디언) */
.env-paper-alt {
	margin-top: 10px;
	font-size: var(--env-font-xs);
}
.env-paper-alt > summary {
	cursor: pointer;
	color: #0369a1;
	font-weight: 600;
	padding: 4px 0;
	list-style: none;
	user-select: none;
}
.env-paper-alt > summary::-webkit-details-marker { display: none; }
.env-paper-alt > summary::before {
	content: '▸';
	margin-right: 4px;
	display: inline-block;
	transition: transform 0.15s;
}
.env-paper-alt[open] > summary::before { transform: rotate(90deg); }
.env-paper-alt-table {
	width: 100%;
	margin-top: 6px;
	border-collapse: collapse;
	background: var(--fb-color_bg_white);
	border-radius: var(--env-radius-sm);
	overflow: hidden;
}
.env-paper-alt-table th {
	background: #f0f9ff;
	color: #075985;
	font-size: 10px;
	font-weight: 600;
	text-align: left;
	padding: 6px 8px;
	border-bottom: 1px solid #bae6fd;
}
.env-paper-alt-table td {
	padding: 5px 8px;
	border-bottom: 1px solid var(--env-n100);
	font-size: var(--env-font-xs);
	font-variant-numeric: tabular-nums;
}
.env-paper-alt-table td b { color: #075985; font-weight: 700; }

/* 미리보기 프레임 */
.env-cd-preview {
	position: relative;
	min-height: 400px;
	padding: 12px;
	background:
		linear-gradient(var(--env-n0), var(--env-n0)),
		repeating-linear-gradient(45deg, var(--env-n100) 0 8px, var(--env-n50) 8px 16px);
	background-origin: border-box;
	background-clip: padding-box, padding-box;
	border: 1px solid var(--env-n200);
	border-radius: var(--env-radius);
	display: flex;
	align-items: center;
	justify-content: center;
}
.env-cd-preview.is-empty,
.env-cd-preview.is-error,
.env-cd-preview.is-loading {
	color: var(--env-n600);
	font-size: var(--env-font-sm);
}
.env-cd-preview-holder {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.env-cd-svg {
	background: var(--fb-color_bg_white);
	border: 1px solid var(--env-n200);
	border-radius: var(--env-radius-sm);
	box-shadow: var(--env-shadow-md);
}

/* ──────── 미리보기 중앙 라벨 (HTML 오버레이) ──────── */
.env-cd-preview-holder { position: relative; }
.env-cd-center-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	line-height: 1.4;
	pointer-events: none;
	white-space: nowrap;
}
.env-cd-center-body {
	font-size: 14px;
	color: var(--env-n800);
	font-weight: 700;
	letter-spacing: -0.3px;
	text-shadow:
		0 0 3px var(--fb-color_bg_white), 0 0 3px var(--fb-color_bg_white), 0 0 3px var(--fb-color_bg_white),
		0 0 6px rgba(255,255,255,0.9);
}
.env-cd-center-body b { font-weight: 800; }
.env-cd-center-flat {
	font-size: 12px;
	color: var(--env-brand-dark);
	font-weight: 500;
	margin-top: 2px;
	letter-spacing: -0.2px;
	text-shadow:
		0 0 3px var(--fb-color_bg_white), 0 0 3px var(--fb-color_bg_white), 0 0 3px var(--fb-color_bg_white),
		0 0 6px rgba(255,255,255,0.9);
}
.env-cd-center-flat b { font-weight: 700; color: var(--env-brand-dark); }
.env-cd-error { color: var(--env-danger); font-weight: 500; }
.env-cd-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--env-n600);
}
.env-cd-legacy-img { max-height: 200px; }

/* 전역 토스트 */
.env-toast {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--env-n800);
	color: var(--fb-color_bg_white);
	padding: 10px 18px;
	border-radius: var(--env-radius);
	z-index: 99999;
	font-size: var(--env-font-sm);
	box-shadow: var(--env-shadow-lg);
}
.env-toast strong { color: #ffd166; }

/* 접힘 뷰 탭 (가이드 / 3D) */
.env-fold-tab {
	padding: 7px 14px;
	background: var(--env-n0);
	border: 1px solid var(--env-n200);
	border-radius: var(--env-radius-sm);
	cursor: pointer;
	font-size: 12px;
	color: var(--env-n600);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.env-fold-tab:hover { background: var(--env-n100); }
.env-fold-tab.is-active {
	background: var(--env-brand);
	color: var(--fb-color_bg_white);
	border-color: var(--env-brand);
}

/* ──────── 접힘 시뮬 — 요약 · 겹침 카드 ──────── */
.env-fold-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	font-size: var(--env-font-sm);
	color: var(--env-n600);
}
.env-fold-summary .env-fold-title {
	font-weight: 700;
	color: var(--env-n800);
	letter-spacing: -0.2px;
	font-size: var(--env-font-md);
	margin-right: 4px;
}
.env-fold-summary .env-fold-max,
.env-fold-summary .env-fold-min {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--env-radius-pill);
	font-size: var(--env-font-sm);
	font-variant-numeric: tabular-nums;
}
.env-fold-summary .env-fold-max {
	background: #fee2e2;
	border: 1px solid #fecaca;
	color: #991b1b;
}
.env-fold-summary .env-fold-min {
	background: var(--env-brand-50);
	border: 1px solid #bfdbfe;
	color: var(--env-brand-dark);
}
.env-fold-summary .env-fold-max-label { font-weight: 500; opacity: 0.85; }
.env-fold-summary .env-fold-max-value {
	font-weight: 800;
	font-size: var(--env-font-md);
	letter-spacing: -0.3px;
}
.env-fold-summary .env-fold-max-dir { opacity: 0.75; font-size: var(--env-font-xs); }

.env-fold-quality {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--env-radius-pill);
	font-size: var(--env-font-sm);
	font-weight: 700;
	letter-spacing: -0.1px;
	margin-left: auto;
}
.env-fold-quality.is-ok   { background: var(--env-success-50); color: var(--env-success); border: 1px solid #b7e3c2; }
.env-fold-quality.is-warn { background: var(--env-warning-50); color: var(--env-warning); border: 1px solid #f3d68a; }
.env-fold-quality.is-bad  { background: var(--env-danger-50);  color: var(--env-danger);  border: 1px solid #f5b4b0; }

.env-fold-legend {
	margin: 10px 0 0;
	font-size: var(--env-font-xs);
	color: var(--env-n600);
	line-height: 1.6;
}
.env-fold-legend b.ok   { color: var(--env-success); }
.env-fold-legend b.warn { color: var(--env-warning); }
.env-fold-legend b.bad  { color: var(--env-danger); }

.env-fold-empty {
	padding: 20px;
	text-align: center;
	color: var(--env-danger);
	font-size: var(--env-font-sm);
	background: var(--env-danger-50);
	border-radius: var(--env-radius);
}

.env-fold-sim .fold-stage-wrap {
	margin: 0 auto;
}
.env-fold-sim .fold-overlap-stage {
	position: relative;
	background: var(--fb-color_bg_white);
	border: 1px solid var(--env-n300);
	border-radius: var(--env-radius-sm);
	box-shadow: var(--env-shadow-sm);
	overflow: hidden;
}

/* ──────── 풀칠 코너 상세 — details 로 접기 가능 (관리자·QA용) ──────── */
.env-fold-bond-card {
	margin-top: 14px;
	padding: 0;
	background: var(--env-n50);
	border: 1px solid var(--env-n200);
	border-radius: var(--env-radius);
	overflow: hidden;
}
.env-fold-bond-card > summary {
	list-style: none;
	padding: 10px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--env-font-md);
	font-weight: 600;
	color: var(--env-n800);
	letter-spacing: -0.2px;
	user-select: none;
}
.env-fold-bond-card > summary::-webkit-details-marker { display: none; }
.env-fold-bond-card > summary::before {
	content: '▸';
	color: var(--env-n400);
	font-size: 11px;
	transition: transform 0.15s;
	display: inline-block;
	width: 12px;
}
.env-fold-bond-card[open] > summary::before { transform: rotate(90deg); }
.env-fold-bond-card > summary:hover { background: var(--env-n100); }
.env-fold-bond-hint {
	margin-left: auto;
	font-weight: 500;
	color: var(--env-n600);
	font-size: var(--env-font-xs);
}
.env-fold-bond-card > .env-fold-bond-grid,
.env-fold-bond-card > .env-fold-bond-note {
	margin-left: 14px;
	margin-right: 14px;
}
.env-fold-bond-card > .env-fold-bond-grid { margin-top: 4px; margin-bottom: 10px; }
.env-fold-bond-card > .env-fold-bond-note { margin-bottom: 12px; }
.env-fold-bond-title {
	font-size: var(--env-font-md);
	font-weight: 700;
	color: var(--env-n800);
	margin-bottom: 8px;
	letter-spacing: -0.2px;
}
.env-fold-bond-grid {
	display: grid;
	gap: 4px;
}
.env-fold-bond-row {
	display: grid;
	grid-template-columns: 58px 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	font-size: var(--env-font-sm);
	border-bottom: 1px dashed var(--env-n200);
}
.env-fold-bond-row:last-child { border-bottom: none; }
.env-fold-bond-row .bond-label {
	font-weight: 600;
	color: var(--env-n800);
}
.env-fold-bond-row .bond-size {
	color: var(--env-n600);
	font-variant-numeric: tabular-nums;
}
.env-fold-bond-row .bond-thick {
	color: var(--env-n800);
	font-variant-numeric: tabular-nums;
}
.env-fold-bond-row .bond-thick b {
	color: var(--env-danger);
	font-weight: 800;
	font-size: var(--env-font-md);
}
.env-fold-bond-row .bond-area {
	color: var(--env-n800);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.env-fold-bond-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: var(--env-radius-pill);
	font-size: var(--env-font-xs);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.1px;
}
.env-fold-bond-pill.is-ok    { background: var(--env-success-50); color: var(--env-success); }
.env-fold-bond-pill.is-warn  { background: var(--env-warning-50); color: var(--env-warning); }
.env-fold-bond-pill.is-bad   { background: var(--env-danger-50);  color: var(--env-danger); }
.env-fold-bond-pill.is-none  { background: var(--env-n100);       color: var(--env-n600); }

.env-fold-bond-note {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--env-n200);
	font-size: var(--env-font-xs);
	color: var(--env-n600);
	line-height: 1.6;
}
.env-fold-bond-note b.ok   { color: var(--env-success); }
.env-fold-bond-note b.warn { color: var(--env-warning); }
.env-fold-bond-note b.bad  { color: var(--env-danger); }

/* ──────── 접힘 탭 컨테이너 ──────── */
.env-fold-tabs {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 14px;
	padding: 3px;
	background: var(--env-n100);
	border-radius: var(--env-radius);
}
.env-fold-tabs .env-fold-tab {
	background: transparent;
	border: none;
	border-radius: var(--env-radius-sm);
	padding: 6px 14px;
	font-size: var(--env-font-sm);
	color: var(--env-n600);
	font-weight: 500;
}
.env-fold-tabs .env-fold-tab:hover { background: var(--env-n0); color: var(--env-n800); }
.env-fold-tabs .env-fold-tab.is-active {
	background: var(--env-n0);
	color: var(--env-brand);
	font-weight: 700;
	box-shadow: var(--env-shadow-sm);
}