/* ==========================================================================
   일반지 명함(IC00001) 신규 주문 UI 파일럿 전용 스타일 — 축소 스케일 버전
   - Figma "일반지 명함_UI 축소버전 (참고: ohprint.me)" 섹션(node 9508:22) 기준
   - 기존 8301:9048 시안 대비 요소 크기를 ohprint.me 실측값 수준으로 축소
   - #nf-order 안에서만 동작하도록 전부 스코프 처리 (다른 화면에 영향 없음)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

#nf-order .nf-proto-badge {
	display: inline-block;
	margin: 0 0 16px;
	padding: 8px 14px;
	background: #fff3cd;
	color: #7a5b00;
	font-size: 13px;
	border-radius: 6px;
}

#nf-order {
	/* 620(이미지)+24(간격)+340(카드)=984 + 좌우 패딩 40 = 1024. 부모 폼이 1200px 고정폭이라 여유 있음. */
	max-width: 1040px;
	margin: 40px auto;
	padding: 0 20px;
	font-family: 'Noto Sans KR', sans-serif;
	color: #000;
	box-sizing: border-box;
}

#nf-order *,
#nf-order *::before,
#nf-order *::after {
	box-sizing: border-box;
}

#nf-order .nf-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0;
	pointer-events: none;
}

#nf-order .nf-wrap {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

/* ---------- 좌측 : 이미지 영역 (620px — ohprint.me 실측(메인이미지 840x580) 참고해 확대) ---------- */
#nf-order .nf-media {
	flex: 0 0 620px;
	width: 620px;
}

/* 좌측 칼선 미리보기 (정적 목업) */
#nf-order .nf-preview {
	position: relative;
	background: rgb(253, 249, 230);
	height: 394px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#nf-order .nf-preview-frame {
	width: 520px;
	height: 295px;
	border: 1px solid rgb(240, 207, 6);
	background: #fff;
	position: relative;
}

/* 재단선 (실제 사이트 #cscon과 동일한 빨간 점선) — 편집선(바깥 노란 테두리)과 안전선 사이 */
#nf-order .nf-preview-cut {
	position: absolute;
	inset: 8px;
	border: 1px dashed rgb(255, 89, 89);
}

#nf-order .nf-preview-safe {
	position: absolute;
	inset: 18px;
	border: 1px dashed #4a90d9;
}

#nf-order .nf-preview-dl {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	cursor: pointer;
}

/* 썸네일 클릭 시 확대되는 예시 이미지 (실제 사이트 .big-img와 동일) */
#nf-order .nf-preview-bigimg {
	display: none;
	position: absolute;
	inset: 0;
}

#nf-order .nf-preview-bigimg.is-visible {
	display: block;
}

#nf-order .nf-preview-bigimg img {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#nf-order .nf-preview-bigimg img.is-active {
	display: block;
}

/* 실제 사이트 #tpViewBtn과 동일한 좌상단 알약 버튼 */
#nf-order #nf-tpl-view-btn {
	display: none;
	position: absolute;
	top: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.34);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	font-family: inherit;
	cursor: pointer;
	z-index: 5;
}

#nf-order #nf-tpl-view-btn.is-visible {
	display: block;
}

#nf-order .nf-preview-caption {
	margin: 10px 0 0;
	color: #888;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	overflow: hidden;
}

#nf-order .nf-preview-caption p {
	margin: 0;
	font-size: 12px;
	white-space: nowrap;
	/* flex-shrink:0로 고정 : 기본값(flex-shrink:1 + overflow 있는 항목의 자동 min-width:0)
	   이면 브라우저가 글씨를 줄이기도 전에 각 항목을 컨테이너 폭에 맞게 조용히 짓눌러서
	   텍스트를 잘라버린다 — 그러면 scrollWidth가 항상 clientWidth와 같아져서(이미 짓눌린
	   상태를 측정하게 되므로) 아래 JS의 "넘치면 글씨 줄이기" 판정 자체가 절대 발동하지 않는다.
	   자연 폭 그대로 유지해야 진짜 넘치는지 측정할 수 있다. */
	flex-shrink: 0;
}

#nf-order .nf-thumbs {
	display: flex;
	gap: 15px;
	margin-top: 12px;
}

#nf-order .nf-thumbs img {
	width: 112px;
	height: 97px;
	object-fit: cover;
	border: 1px solid #fff;
	outline: 1px solid #eee;
	cursor: pointer;
}

#nf-order .nf-thumbs img.is-active {
	outline: 1px solid #222;
}

/* 후가공 마우스오버 미리보기 자리 : 썸네일 줄의 5번째 칸(빈 슬롯)에 예약된 위치 */
#nf-order .nf-thumb-slot {
	position: relative;
	flex: 0 0 112px;
	width: 112px;
	height: 97px;
}

/* ---------- 배송 출발 확률 위젯 (영업일 기준 실측 데이터 → 실제 날짜로 환산) ---------- */
#nf-order .nf-delivery {
	margin-top: 16px;
	padding: 16px;
	background: #fafafa;
	border-radius: 4px;
}

#nf-order .nf-delivery-headline {
	margin: 0 0 14px;
	font-size: 13px;
	color: #3d3d3d;
	line-height: 1.5;
}

#nf-order .nf-delivery-headline strong {
	color: #0c6dda;
	font-weight: 700;
}

#nf-order .nf-delivery-track {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	padding-top: 2px;
}

#nf-order .nf-delivery-track::before {
	content: '';
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	height: 0;
	border-top: 1px dashed #ccc;
}

#nf-order .nf-delivery-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
}

#nf-order .nf-delivery-dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #3d3d3d;
	color: #fff;
	font-size: 11px;
}

#nf-order .nf-delivery-item.is-highlight .nf-delivery-dot {
	width: 40px;
	height: 40px;
	background: #0c6dda;
	font-size: 13px;
	font-weight: 700;
}

#nf-order .nf-delivery-date {
	font-size: 11px;
	color: #3d3d3d;
}

#nf-order .nf-delivery-pct {
	font-size: 11px;
	color: #3d3d3d;
}

#nf-order .nf-delivery-item.is-highlight .nf-delivery-date,
#nf-order .nf-delivery-item.is-highlight .nf-delivery-pct {
	color: #0c6dda;
	font-weight: 700;
}

/* 후가공 마우스오버 미리보기 (Figma 8301:7086 "후가공미리보기" — 이미지 + 설명). 예약 슬롯의 우상단에 고정하고
   내용에 맞춰 좌/아래로 확장되는 팝업 형태로 띄운다 (슬롯 자체는 썸네일 한 칸 크기라 텍스트를 다 담을 수 없음) */
#nf-order .nf-media-preview {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	width: 220px;
	background: #fff;
	border: 0.5px solid rgba(0, 0, 0, 0.4);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

#nf-order .nf-media-preview.is-visible {
	display: block;
}

#nf-order .nf-media-preview-img {
	height: 150px;
	background-color: #f9f9f9;
	background-size: cover;
	background-position: center;
}

#nf-order .nf-media-preview-text {
	padding: 10px 12px 12px;
}

#nf-order .nf-media-preview-text strong {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #000;
	margin-bottom: 4px;
}

#nf-order .nf-media-preview-text p {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: #666;
}

#nf-order .nf-dl {
	margin-top: 10px;
	text-align: right;
}

#nf-order .nf-dl-btn {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	font-size: 11px;
	color: #333;
	text-decoration: none;
}

#nf-order .nf-dl-btn:hover {
	background: #f5f5f5;
}

/* ---------- 우측 : 옵션 카드 (340px) ---------- */
#nf-order .nf-panel {
	flex: 0 0 340px;
	width: 340px;
}

#nf-order .nf-card {
	background: #fff;
	border-radius: 12px;
	padding: 4px 20px 10px;
	overflow: hidden;
}

#nf-order .nf-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

#nf-order .nf-title {
	font-size: 18px;
	font-weight: 500;
	margin: 0;
	line-height: 1.3;
}

#nf-order .nf-guide {
	flex-shrink: 0;
	font-size: 10px;
	color: #888;
	text-decoration: underline;
}

/* ---------- 그라데이션 안내 배너 ---------- */
#nf-order .nf-banner {
	margin-top: 14px;
	height: 36px;
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(255, 133, 192, 0.3) 0%, rgba(12, 109, 218, 0.3) 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	text-decoration: none;
	cursor: pointer;
}

#nf-order .nf-banner span {
	font-size: 12px;
	font-weight: 500;
	color: #454545;
}

#nf-order .nf-banner-ico {
	width: 20px;
	height: 20px;
}

/* ---------- 필드 공통 ---------- */
#nf-order .nf-field {
	margin-top: 16px;
}

#nf-order .nf-label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: #000;
	margin-bottom: 6px;
}

#nf-order .nf-label-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

#nf-order .nf-label-row .nf-label {
	margin-bottom: 0;
}

/* 옵션 박스 공통 (select / display 모두 이 겉모습을 공유) — 테두리는 ohprint.me 참고하여 연한 회색으로 */
#nf-order .nf-box {
	position: relative;
	height: 34px;
	background: #fff;
	border: 1px solid #eee;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 10px;
}

#nf-order .nf-box select {
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 11px;
	color: #000;
	text-align: left;
	text-align-last: left;
	padding-right: 18px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}

#nf-order .nf-box select::-ms-expand {
	display: none;
}

#nf-order .nf-box select:focus {
	outline: none;
}

#nf-order .nf-chevron {
	position: absolute;
	right: 10px;
	top: 50%;
	width: 8px;
	height: 6px;
	transform: translateY(-50%) rotate(180deg);
	pointer-events: none;
}

#nf-order .nf-box-display input[type="text"] {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 11px;
	color: #000;
	text-align: left;
	width: 34px;
}

#nf-order .nf-box-display span {
	font-size: 11px;
	color: #000;
	margin-left: 3px;
}

#nf-order .nf-size2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

#nf-order .nf-mt8 {
	margin-top: 8px;
}

#nf-order #paper_under_text {
	display: block;
	font-size: 10px;
	color: #999;
	margin-top: 4px;
}

#nf-order .nf-customsize {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 11px;
	color: #666;
}

#nf-order .nf-customsize-hidden {
	display: none;
}

#nf-order .nf-customsize input[type="text"] {
	width: 44px;
	height: 28px;
	border: 1px solid #ccc;
	border-radius: 6px;
	text-align: center;
	font-family: inherit;
	font-size: 11px;
}

#nf-order .nf-btn-ghost {
	margin-top: 8px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	font-size: 11px;
	color: #444;
	cursor: pointer;
}

#nf-order .nf-btn-ghost:hover {
	background: #f5f5f5;
}

/* "용지 안내" 뱃지 (인쇄옵션 라벨 옆) */
#nf-order .nf-badge {
	border: none;
	cursor: pointer;
}

#nf-order .nf-badge-paper {
	background: #f6f6f6;
	color: #5d5d5d;
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 999px;
}

/* ---------- 후가공 (라벨/체크박스 + 체크 시 종류 그리드 노출) ---------- */
#nf-order .nf-field-after {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

#nf-order .nf-label-inline {
	font-size: 12px;
	font-weight: 500;
	color: #000;
	margin-bottom: 0;
}

#nf-order .nf-after-checkbox {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

#nf-order .nf-after-box {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 0.5px solid rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

#nf-order .nf-after-checkbox:checked + .nf-after-box {
	background: #000;
	border-color: #000;
}

#nf-order .nf-after-checkbox:checked + .nf-after-box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

/* 체크박스가 checked 일 때만 그리드/세부옵션/링크/안내문 노출 */
#nf-order .nf-after-grid,
#nf-order .nf-after-details,
#nf-order .nf-after-sample-link,
#nf-order .nf-after-note {
	display: none;
}

#nf-order .nf-after-checkbox:checked ~ .nf-after-grid {
	display: grid;
}

#nf-order .nf-after-checkbox:checked ~ .nf-after-sample-link,
#nf-order .nf-after-checkbox:checked ~ .nf-after-note {
	display: block;
}

/* 클릭해서 선택한 종류의 세부옵션 : 체크됨 + 1개 이상 선택 시 노출 */
#nf-order .nf-after-checkbox:checked ~ .nf-after-details:not(:empty) {
	display: block;
}

#nf-order .nf-after-details {
	flex-basis: 100%;
	min-width: 0;
	margin-top: 8px;
}

#nf-order .nf-after-detail-box + .nf-after-detail-box {
	margin-top: 8px;
}

#nf-order .nf-after-detail-box {
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 10px;
	background: #fff;
}

#nf-order .nf-after-detail-title-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

#nf-order .nf-after-detail-title {
	font-size: 11px;
	font-weight: 500;
}

/* 정보(i) 아이콘 — 호버 시 실제 운영 주문페이지의 주의사항/데이터 작업 방법을 툴팁으로 표시 */
#nf-order .nf-after-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid #999;
	color: #999;
	font-size: 9px;
	font-style: italic;
	font-family: Georgia, 'Times New Roman', serif;
	cursor: help;
}

/*
 * position:fixed + JS로 좌표 계산 — .nf-card가 overflow:hidden이라 absolute로는 카드 경계에서 잘려버림.
 * 좌(주의사항)/우(데이터 작업 방법) 배치와 대략적인 비율(35:65)은 실제 운영 페이지
 * (skin_renewal/after.skin.php .option/.content)를 그대로 참고했다.
 */
#nf-order .nf-after-info-tip {
	display: none;
	position: fixed;
	width: 860px;
	max-width: calc(100vw - 32px);
	max-height: 640px;
	overflow-y: auto;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
	padding: 24px;
	z-index: 2000;
	text-align: left;
	cursor: auto;
	font-style: normal;
	font-family: 'Noto Sans KR', sans-serif;
}

#nf-order .nf-after-info-tip.is-visible {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

#nf-order .nf-after-info-col-caution {
	flex: 0 0 260px;
	max-width: 260px;
}

#nf-order .nf-after-info-col-work {
	flex: 1 1 auto;
	min-width: 0;
}

#nf-order .nf-after-info-tip h5 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: #000;
}

#nf-order .nf-after-info-tip ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nf-order .nf-after-info-tip li {
	font-size: 13px;
	line-height: 1.7;
	color: #444;
	margin-bottom: 8px;
}

/* 실제 운영 사이트 CSS(after.skin.css)의 의도된 강조색. 운영 사이트는 동일 선택자가 두 번
   선언되어 있어(뒤쪽 규칙이 이겨서) 실제로는 회색으로 덮여 보이지만, 의도된 강조색은 이 파란색이다 */
#nf-order .nf-after-info-tip strong {
	color: #366ebb;
	font-weight: 600;
}

#nf-order .nf-after-info-tip strong.nf-strong-plain {
	color: inherit;
	font-weight: 600;
}

#nf-order .nf-after-info-tip img {
	width: 100%;
	display: block;
	border-radius: 4px;
}

#nf-order .nf-after-detail-size-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

#nf-order .nf-after-detail-size-row input {
	flex: 1;
	min-width: 0;
	height: 30px;
	border: 1px solid #eee;
	font-family: inherit;
	font-size: 11px;
	color: #000;
	padding: 0 8px;
	box-sizing: border-box;
	text-align: center;
}

#nf-order .nf-after-detail-size-row input:disabled {
	color: #999;
	background: #fafafa;
	cursor: not-allowed;
}

#nf-order .nf-after-detail-size-row span {
	font-size: 10px;
	color: #999;
	flex: 0 0 auto;
}

#nf-order .nf-after-detail-select,
#nf-order .nf-after-detail-input {
	width: 100%;
	height: 30px;
	border: 1px solid #eee;
	font-family: inherit;
	font-size: 11px;
	color: #000;
	padding: 0 8px;
	background: #fff;
}

#nf-order .nf-after-detail-select:disabled {
	color: #999;
	background: #fafafa;
	cursor: not-allowed;
}

#nf-order .nf-after-detail-note {
	margin: 6px 0 0;
	font-size: 9px;
	line-height: 1.5;
	color: #999;
}

/* 귀도리 : 4귀 코너 선택 그리드 */
#nf-order .nf-corner-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: #eee;
	border: 1px solid #eee;
	margin-bottom: 8px;
}

#nf-order .nf-corner-cell {
	display: block;
	height: 40px;
	background: #f6f6f6;
	position: relative;
	cursor: pointer;
}

#nf-order .nf-corner-checkbox {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

#nf-order .nf-corner-checkbox:disabled {
	cursor: not-allowed;
}

#nf-order .nf-corner-dot {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ccc;
	pointer-events: none;
}

#nf-order .nf-corner-checkbox:checked ~ .nf-corner-dot {
	background: #000;
}

#nf-order .nf-corner-checkbox:disabled ~ .nf-corner-dot {
	background: #e0e0e0;
}

#nf-order .nf-corner-tl { top: 6px; left: 6px; }
#nf-order .nf-corner-tr { top: 6px; right: 6px; }
#nf-order .nf-corner-bl { bottom: 6px; left: 6px; }
#nf-order .nf-corner-br { bottom: 6px; right: 6px; }

#nf-order .nf-corner-all {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #000;
	cursor: pointer;
}

#nf-order .nf-after-grid {
	flex-basis: 100%;
	min-width: 0;
	margin-top: 8px;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #ddd;
	border: 1px solid #ddd;
}

#nf-order .nf-after-type {
	background: #fff;
	border: none;
	height: 26px;
	font-size: 9px;
	color: #000;
	font-family: inherit;
	cursor: pointer;
}

#nf-order .nf-after-type:hover {
	background: #f7f7f7;
}

#nf-order .nf-after-type.is-selected {
	background: #000;
	color: #fff;
}

/* 코팅 용지 선택 시 넘버링/엠보싱/형압처럼 사용할 수 없는 후가공 (실제 사이트 num_act()와 동일) */
#nf-order .nf-after-type:disabled {
	background: #fafafa;
	color: #bbb;
	cursor: not-allowed;
}

#nf-order .nf-after-sample-link {
	flex-basis: 100%;
	min-width: 0;
	margin-top: 9px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	background: #f6f6f6;
	border-radius: 6px;
	font-size: 10px;
	color: #444;
	text-decoration: none;
}

#nf-order .nf-after-note {
	flex-basis: 100%;
	margin: 6px 0 0;
	font-size: 10px;
	color: #999;
}

/* ---------- 안내문구 (조판안내 등) ---------- */
#nf-order .nf-notice {
	margin-top: 16px;
}

#nf-order .nf-notice fieldset {
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 10px;
	line-height: 1.6;
	color: #777;
	background: #fafafa;
}

/* ---------- 결제금액 (카드 밖) ---------- */
/* 카드 안쪽 콘텐츠는 .nf-card의 padding:20px 만큼 안으로 들어가 있으므로,
   카드 밖 요소(결제금액/디자인방법/버튼)도 좌우 20px씩 맞춰서 카드 콘텐츠와 폭을 일치시킨다. */
#nf-order .nf-price {
	margin-top: 8px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 0 20px;
}

#nf-order .nf-price-label {
	font-size: 16px;
	font-weight: 500;
	color: #000;
}

#nf-order .nf-price-amt {
	font-size: 16px;
	font-weight: 500;
	color: #000;
}

#nf-order .nf-price-amt input {
	border: none;
	background: transparent;
	text-align: right;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: #000;
	width: 80px;
}

/* ---------- 디자인 방법 선택 ---------- */
#nf-order .nf-designmethod {
	margin-top: 14px;
	padding: 0 20px;
}

#nf-order .nf-designmethod-label {
	font-size: 11px;
	font-weight: 500;
	color: #364153;
	margin: 0 0 8px;
}

#nf-order .nf-designmethod-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

#nf-order .nf-method-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 8px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

#nf-order .nf-method-btn img {
	width: 15px;
	height: 15px;
}

#nf-order .nf-method-btn strong {
	font-size: 11px;
	font-weight: 500;
	color: #364153;
}

#nf-order .nf-method-btn span {
	font-size: 9px;
	font-weight: 500;
	color: #99a1af;
}

#nf-order .nf-method-btn.is-active {
	border-color: #000;
}

#nf-order .nf-method-btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* 업로드 완료 후 표시되는 파일 행 (nf-designmethod 자리를 대신함) */
#nf-order .nf-uploaded-file {
	margin-top: 14px;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fff;
	margin-left: 20px;
	margin-right: 20px;
}

#nf-order .nf-uploaded-file-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
}

#nf-order .nf-uploaded-file-name {
	flex: 1;
	font-size: 12px;
	color: #000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#nf-order .nf-uploaded-file-remove {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: none;
	background: #f0f0f0;
	color: #666;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#nf-order .nf-uploaded-file-remove:hover {
	background: #e0e0e0;
}

/* ---------- CTA : 주문하기(위, 채움) → 장바구니 담기(아래, 아웃라인) ---------- */
#nf-order .nf-cta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
	padding: 0 20px;
}

#nf-order .nf-btn {
	width: 100%;
	height: 40px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}

#nf-order .nf-btn-solid {
	background: #000;
	color: #fff;
	border: none;
}

#nf-order .nf-btn-solid:hover {
	background: #222;
}

#nf-order .nf-btn-outline {
	background: #fff;
	color: #000;
	border: 1.5px solid #000;
}

#nf-order .nf-btn-outline:hover {
	background: #f5f5f5;
}

#nf-order .nf-cta-note {
	margin-top: 8px;
	font-size: 10px;
	color: #aaa;
	text-align: center;
}

/* ---------- 파일 업로드 모달 (Figma 7543:8084 "파일 업로드하기") ---------- */
body.nf-modal-open {
	overflow: hidden;
}

#nf-order .nf-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}

#nf-order .nf-modal-overlay.is-visible {
	display: flex;
}

#nf-order .nf-modal {
	background: #fff;
	width: 420px;
	max-width: calc(100% - 40px);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	border-radius: 8px;
	overflow-x: hidden;
}

#nf-order .nf-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f6f6f6;
	height: 48px;
	padding: 0 16px;
}

#nf-order .nf-modal-head span {
	font-size: 15px;
	font-weight: 500;
	color: #000;
}

#nf-order .nf-modal-close {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: #666;
	cursor: pointer;
	padding: 4px;
}

#nf-order .nf-modal-banner {
	margin: 0;
	border-radius: 0;
}

#nf-order .nf-modal-body {
	padding: 20px 20px 4px;
}

#nf-order .nf-modal-upload-icon {
	width: 64px;
	height: 64px;
	margin: 8px auto 16px;
}

#nf-order .nf-modal-upload-icon img {
	width: 100%;
	height: 100%;
}

#nf-order .nf-modal-guide-text {
	margin: 0 0 20px;
	font-size: 11px;
	line-height: 1.6;
	color: #666;
	text-align: center;
}

#nf-order .nf-modal-guide-link {
	display: block;
	margin: -12px 0 20px;
	font-size: 11px;
	color: #888;
	text-align: center;
	text-decoration: underline;
}

#nf-order .nf-modal-field {
	margin-top: 16px;
}

#nf-order .nf-modal-input {
	width: 100%;
	height: 34px;
	border: 1px solid #eee;
	font-family: inherit;
	font-size: 12px;
	color: #000;
	padding: 0 10px;
	box-sizing: border-box;
}

#nf-order .nf-modal-textarea {
	display: block;
	width: 100%;
	min-height: 60px;
	border: 1px solid #eee;
	font-family: inherit;
	font-size: 11px;
	line-height: 1.5;
	color: #000;
	padding: 8px 10px;
	box-sizing: border-box;
	resize: vertical;
}

#nf-order .nf-modal-upload-btn {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	background: #f6f6f6;
	font-size: 13px;
	font-weight: 500;
	color: #000;
	cursor: pointer;
}

#nf-order .nf-modal-upload-btn-ico {
	width: 12px;
	height: 12px;
}

#nf-order .nf-kal-list {
	margin-top: 4px;
	padding-bottom: 16px;
}

#nf-order .nf-kal-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 12px 4px;
	border: none;
	border-top: 1px solid #eee;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	color: #000;
	cursor: pointer;
}

#nf-order .nf-kal-item:hover {
	background: #f6f6f6;
}

/* [조판 안내] 모달 (skin_renewal/skin_product/namecard.skin.php의 .Place_OptionComment fieldset과
   같은 내용 — 실제 사이트의 점선 박스 대신 이 프로토타입의 다른 안내 리스트(주의사항 등)와
   같은 톤으로 맞췄다) */
#nf-order .nf-coating-notice-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

#nf-order .nf-coating-notice-list li {
	position: relative;
	padding-left: 12px;
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.6;
	color: #444;
}

#nf-order .nf-coating-notice-list li:first-child {
	margin-top: 0;
}

#nf-order .nf-coating-notice-list li::before {
	content: '-';
	position: absolute;
	left: 0;
	color: #999;
}

#nf-order .nf-modal-body > .nf-btn {
	margin-top: 4px;
}

#nf-order .nf-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* 기존 하단 주문버튼그룹(#cart_btn)은 위 nf-cta 버튼으로 대체 - 중복 노출 방지 */
#cart_btn {
	display: none !important;
}

@media (max-width: 1020px) {
	#nf-order .nf-wrap {
		flex-direction: column;
	}

	#nf-order .nf-media,
	#nf-order .nf-panel {
		flex-basis: auto;
		width: 100%;
	}

	#nf-order .nf-size2col,
	#nf-order .nf-designmethod-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   상품설명 / 출고배송정보 (기존 order.php와 동일한 마크업 재사용 — 스타일 자체는
   전역 css/sub.css의 .od-pro-tab / .odtab이 그대로 적용된다. 여기서는 실제 사이트보다
   좁은 #nf-order(1040px) 폭에 맞추기 위한 최소한의 보정만 추가한다.)
   ========================================================================== */
#nf-order .od-op {
	margin-top: 0;
}

/* 실제 사이트는 부모 폭이 1200px라 아이콘 7개(161px×7)가 한 줄에 들어가지만,
   이 프로토타입은 1040px로 더 좁아서 그대로 두면 옆으로 잘린다 — 줄바꿈만 허용 */
#nf-order .odtab > ul > li.od-ico {
	flex-wrap: wrap;
	row-gap: 10px;
}

#nf-order .odtab img {
	max-width: 100%;
	height: auto;
}