/* ───────────────────────────────────────────────────────
 * leaflet-order.js UI v3 — 기존 .opt-section 컨벤션
 * ─────────────────────────────────────────────────────── */

.leaflet-order-area {
	margin: 0 0 25px;
	padding: 0;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	overflow: hidden;
}
.leaflet-order-head {
	padding: 16px 16px 14px;
	border-bottom: 1px solid #f0f0f0;
}
.leaflet-order-title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 4px;
}
/* 고객이 읽는 글자의 하한은 13px 이고 대비는 4.5:1 이다(전수 조사 20260921). */
.leaflet-order-hint {
	display: block;
	font-size: 13px;
	color: #5c636e;
	line-height: 1.55;
}

.leaflet-order-cards { padding: 16px 16px 0; }
.leaflet-die-shape-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
}
.leaflet-die-shape-list .leaflet-die-shape-card { margin: 0 !important; }
.leaflet-die-shape-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	padding: 16px 12px 12px;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 124px;
	position: relative;
}
.leaflet-die-shape-card:hover {
	border-color: #c0c4ca;
	background: #fafbfc;
}
.leaflet-die-shape-card.is-selected {
	border-color: #1a73e8;
	background: #f0f6ff;
}
.leaflet-die-shape-card.is-selected::after {
	content: '✓';
	position: absolute;
	top: 6px; right: 6px;
	width: 16px; height: 16px;
	background: #1a73e8;
	color: #fff;
	border-radius: 50%;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.leaflet-card-icon { width: 60px; height: 40px; margin-bottom: 8px; }
.leaflet-card-meta { text-align: center; }
.leaflet-card-name {
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 3px;
	line-height: 1.35;
}
.leaflet-card-size {
	font-size: 13px;
	color: #5c636e;
	font-variant-numeric: tabular-nums;
}
.leaflet-die-shape-card.is-selected .leaflet-card-name { color: #1a73e8; }

.leaflet-order-form { padding: 14px 16px 0; }
.leaflet-dim-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	padding: 12px 14px;
	background: #fafbfc;
	border: 1px solid #f0f0f0;
	border-radius: 5px;
}
.leaflet-dim-row label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #4b5563;
	font-weight: 500;
}
.leaflet-dim-row input[type="number"] {
	width: 96px;
	padding: 6px 8px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	background: #fff;
}
.leaflet-dim-row input[type="number"]:focus {
	outline: none;
	border-color: #1a73e8;
}
.leaflet-stock-size {
	font-size: 13px;
	color: #4b5563;
	padding: 8px 14px;
	background: #fafbfc;
	border: 1px solid #f0f0f0;
	border-radius: 5px;
}
.leaflet-stock-size b { color: #1f2937; font-weight: 700; font-variant-numeric: tabular-nums; }

.leaflet-fixed-contract {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 16px;
	padding: 14px 16px;
	border: 1px solid var(--fb-color_border, #dfe6ee);
	border-radius: 8px;
	background: var(--fb-color_bg_soft, #f7f9fb);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fb-color_text_secondary, #4b5563);
}
.leaflet-fixed-contract strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--fb-color_text_primary, #1f2937);
}

.leaflet-order-preview { padding: 14px 16px 16px; }
.leaflet-fold-info {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 13px;
	color: #4b5563;
	margin-bottom: 8px;
}
.leaflet-fold-info b { color: #1f2937; font-weight: 700; font-variant-numeric: tabular-nums; }
.leaflet-fold-svg {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	display: block;
	max-width: 100%;
}
.leaflet-empty {
	padding: 24px;
	color: #9ca3af;
	text-align: center;
	font-size: 13px;
	background: #fafbfc;
	border: 1px dashed #d1d5db;
	border-radius: 5px;
}


/* ══ 오른쪽 결정 패널 안의 「접지 형태」 (사장님 2026-09-21 「접지형태는 오른쪽 패널에서 설정해야지」) ══
 * 패널은 384px 다 — 왼쪽 열(520)에 맞춰 둔 상자·여백을 그대로 들고 가면 한 줄이 360px 을 먹어
 * 총액과 시작 단추가 화면 밖으로 밀린다(실측). 여기서는 상자를 걷고 패널의 줄 규칙을 따른다. */
.leaflet-order-area.is-panel-row {
	margin: 0 0 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}
.leaflet-order-area.is-panel-row .leaflet-order-cards { padding: 8px 0 0; }
.leaflet-order-area.is-panel-row .leaflet-die-shape-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding: 0;
}
.leaflet-order-area.is-panel-row .leaflet-die-shape-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 8px;
}
.leaflet-order-area.is-panel-row .leaflet-card-icon svg { width: 48px; height: 32px; }
.leaflet-order-area.is-panel-row .leaflet-card-meta { text-align: center; }
.leaflet-order-area.is-panel-row .leaflet-card-name { font-size: 13px; line-height: 18px; word-break: keep-all; }
.leaflet-order-area.is-panel-row .leaflet-card-size { font-size: 13px; line-height: 18px; }
.leaflet-order-area.is-panel-row .leaflet-order-form { padding: 8px 0 0; }
.leaflet-order-area.is-panel-row .leaflet-order-preview { padding: 8px 0 0; }

/* 왼쪽 열로 보낸 접지 그림 — 디자인 칸 밑에 한 덩어리로 선다. */
.leaflet-preview-stage { margin-top: 20px; }
.leaflet-preview-title {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 19px;
	color: var(--bj-muted, #66635e);
}
.leaflet-preview-stage .leaflet-order-preview { padding: 0; }

/* 패널 안에서는 이 줄도 «패널의 줄»처럼 생겨야 한다 — 회색 상자 하나만 다른 모양이면
 * 그 줄만 딴 화면에서 온 것처럼 보인다(전수 조사 20260921). 상자를 걷고 칸 높이를 맞춘다. */
.leaflet-order-area.is-panel-row .leaflet-dim-row {
	gap: 8px 10px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.leaflet-order-area.is-panel-row .leaflet-dim-row label {
	flex: 1 1 100%;
	gap: 8px;
	color: var(--bj-muted, #66635e);
	font-size: 13px;
	line-height: 19px;
}
.leaflet-order-area.is-panel-row .leaflet-dim-row input[type="number"] {
	flex: 1 1 auto;
	width: auto;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--bj-line, #ddd9d2);
	border-radius: 8px;
	font-size: 15px;
	line-height: 22px;
}
.leaflet-order-area.is-panel-row .leaflet-dim-row input[type="number"]:focus {
	border-color: var(--bj-ink, #20201e);
}
.leaflet-order-area.is-panel-row .leaflet-stock-size {
	margin-top: 8px;
	padding: 0;
	background: transparent;
	border: 0;
}