/* 디자인 고르는 화면(갤러리) — 사이트 상단 메뉴 아래 썸네일을 화면 폭 가득 (2026-11-08 대표님 카드 2982 답 · 설명 card/includes/design_gallery.php)
   글씨 · 색 · 간격 · 둥근 정도는 사이트 토큰(--bj-*, common/bojagi-design-system.css). 토큰이 없는 자리값은 줄마다 까닭을 적었다. */
.dgal {
	--dgal-min: 180px;   /* 썸네일 최소 폭 — PC 1280(스크롤 막대 포함) 한 줄 6칸이 되는 값(실제 화면 실측 · 이 화면만의 자리값) */
	box-sizing: border-box;
	width: 100%;
	align-self: stretch;
	padding: var(--bj-space-2) var(--bj-space-3) var(--bj-space-4);
	color: var(--bj-ink);
	text-align: left;
	font-family: var(--bj-font-family);
	font-size: var(--bj-type-body);
}
/* 사이트 머리말의 옛 공용 글씨(span·a 12px)를 이 화면 안에서 걷는다 — 점수 0 인 :where 라 아래 칸마다의 규칙이 그대로 이긴다 */
:where(.dgal) span, :where(.dgal) a, :where(.dgal) label, :where(.dgal) small, :where(.dgal) b, :where(.dgal) strong, :where(.dgal) p, :where(.dgal) td, :where(.dgal) button, :where(.dgal) select { font-size: inherit; }
/* 사이트 머리말이 싣는 공용 규칙을 이 화면 안에서 걷는다 — 표 폭 1000(썸네일을 화면 폭 가득) · section 위아래 여백 */
#content_wrapper { width: 100%; min-width: 0; }
.dgal section { padding: 0; }
.dgal *, .dgal *::before, .dgal *::after { box-sizing: border-box; font-family: inherit; }   /* 글꼴 = 사이트 머리말의 * 규칙 대신 위 --bj-font-family */
.dgal [hidden] { display: none !important; }

/* 제목 줄 */
.dgal-head, :is(.dgal--nc, .dgal--nys) .ncs-grid-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-2); margin: 0 0 var(--bj-space-2); }
.dgal-head__text { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-2); min-width: 0; margin: 0; }
.dgal-title, :is(.dgal--nc, .dgal--nys) .nys-grid-title { margin: 0; font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); color: var(--bj-ink); }
.dgal-count, :is(.dgal--nc, .dgal--nys) .ncs-count { font-size: var(--bj-type-caption); font-weight: 400; color: var(--bj-muted); }
.dgal-lead { margin: 0; font-size: var(--bj-type-control); color: var(--bj-muted); }
.dgal-lead b { font-weight: 700; color: var(--bj-ink); }
.dgal-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-2); margin: 0 0 0 auto; }
.dgal-entry { display: flex; align-items: center; }
:is(.dgal--nc, .dgal--nys) .ncs-grid-head__title, :is(.dgal--nc, .dgal--nys) .ncs-ind { margin: 0; }
.dgal-select { display: inline-flex; align-items: center; gap: var(--bj-space-1); font-size: var(--bj-type-control); color: var(--bj-muted); }
.dgal-select select { min-height: 44px; /* 터치 최소 크기 — .bj-text-link 와 같음 */ padding: 0 var(--bj-space-2) 0 var(--bj-space-1); border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); background: transparent; color: var(--bj-ink); font: inherit; font-weight: 600; }
.dgal-select--wide { width: 100%; }
.dgal-select--wide span { display: none; }   /* 칸이 좁아 글자가 두 줄이 된다 — 고른 형태 이름이 곧 설명 */
.dgal-select--wide select { flex: 1 1 auto; min-width: 0; }

/* 가로형 · 세로형 / 명함 종류 */
.dgal-switch { display: inline-flex; gap: var(--bj-space-1); }
.dgal-switch button, .dgal-chip, :is(.dgal--nc, .dgal--nys) .dgal-orient .ed-factoryb-corner-switch-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--bj-space-2); border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); background: transparent; color: var(--bj-ink); font: inherit; font-size: var(--bj-type-control); font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; }
.dgal-switch button[aria-pressed="true"], .dgal-chip.is-on, :is(.dgal--nc, .dgal--nys) .dgal-orient .ed-factoryb-corner-switch-btn.is-active { border-color: var(--bj-ink); box-shadow: inset 0 0 0 1px var(--bj-ink); font-weight: 700; }
:is(.dgal--nc, .dgal--nys) .dgal-orient { display: inline-flex; gap: var(--bj-space-1); margin: 0 0 0 auto; }
:is(.dgal--nc, .dgal--nys) .ncs-grid-head.is-sticky-head { top: var(--dgal-stick-top, 0px); }   /* 내리면 사이트 머리말 아래에 붙는다 · 높이는 namecard-start.js 가 잰다 */
:is(.dgal--nc, .dgal--nys) .pst-industry.has-head { top: calc(var(--dgal-stick-top, 0px) + var(--pst-head-h, 0px)); }
:is(.dgal--nc, .dgal--nys) .dgal-orient .ed-factoryb-corner-switch-title { display: none; }
.dgal-kinds { display: flex; gap: var(--bj-space-1); margin: 0 0 var(--bj-space-2); overflow-x: auto; scrollbar-width: none; }
.dgal-kinds::-webkit-scrollbar { display: none; }
.dgal-chip { flex: none; }

/* 썸네일 칸 */
.dgal-grid, :is(.dgal--nc, .dgal--nys) .nys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--dgal-min), 1fr)); gap: var(--bj-space-2); margin: 0; padding: 0; list-style: none; }
.dgal-item, :is(.dgal--nc, .dgal--nys) .nys-grid > li { position: relative; margin: 0; padding: 0; list-style: none; min-width: 0; }
.dgal .nys-card { display: block; position: relative; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.dgal .nys-card__media { display: block; position: relative; width: 100%; height: auto; aspect-ratio: auto; padding: 0; overflow: hidden; border-radius: var(--bj-catalog-media-radius); background: none; box-shadow: 0 0 0 1px var(--bj-line); }
.dgal .nys-card__media > img { display: block; position: static; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; object-fit: contain; }
.dgal-item[data-dgal-orient-item="portrait"] .nys-card__media > img { aspect-ratio: auto 2 / 3; }   /* 불러오기 전 자리 — 높이가 0 이면 배너가 줄을 잘못 세고 화면이 출렁인다 · 불러온 뒤엔 그림 비율 */
.dgal-item[data-dgal-orient-item="landscape"] .nys-card__media > img { aspect-ratio: auto 3 / 2; }
.dgal--nc .nys-grid > li[data-ncs-orient-item="landscape"] .nys-card__media { aspect-ratio: 9 / 5; }   /* 명함 그림은 가까워져야 주소가 붙는다(data-src) — 90×50 자리 */
.dgal--nc .nys-grid > li[data-ncs-orient-item="portrait"] .nys-card__media { aspect-ratio: 5 / 9; }
.dgal--nc .nys-grid > li .nys-card__media:has(> img[src]) { aspect-ratio: auto; }
.dgal .ncs-back, .dgal .nys-card__cta, .dgal .ncs-both { display: none; }
.dgal .nys-card.is-opening .nys-card__media { box-shadow: 0 0 0 2px var(--bj-ink); }

/* 이름 · 값 · 형태 단추 — PC 는 마우스를 올리면 그림 위에, 폰은 그림 아래에 */
.dgal-shapes { display: flex; gap: var(--bj-space-1); margin-top: var(--bj-space-1); }
.dgal-shapes button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0; border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); background: #fff; color: var(--bj-ink); font: inherit; font-size: var(--bj-type-caption); font-weight: 600; white-space: nowrap; cursor: pointer; }
.dgal-name, .dgal-price { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgal .nys-card__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.dgal .nys-card__price { display: block; margin: 0; }
@media (hover: hover) and (pointer: fine) {
	.dgal-info, .dgal .nys-grid .nys-card__name, .dgal .nys-grid .nys-card__price { opacity: 0; pointer-events: none; transition: opacity .12s; }
	.dgal-info { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--bj-space-3) var(--bj-space-1) var(--bj-space-1); border-radius: 0 0 var(--bj-catalog-media-radius) var(--bj-catalog-media-radius); background: linear-gradient(to top, rgba(0, 0, 0, .78) 60%, rgba(0, 0, 0, 0)); color: #fff; }
	.dgal-item:hover .dgal-info, .dgal-item:focus-within .dgal-info { opacity: 1; pointer-events: auto; }
	.dgal-name, :is(.dgal--nc, .dgal--nys) .nys-grid .nys-card__name { font-size: var(--bj-catalog-title-size); font-weight: var(--bj-catalog-title-weight); line-height: var(--bj-catalog-title-line); }   /* 이름·값 = 목록 카드 토큰 그대로 */
	.dgal-price, :is(.dgal--nc, .dgal--nys) .nys-grid .nys-card__price { font-size: var(--bj-catalog-price-size); font-weight: var(--bj-catalog-price-weight); line-height: var(--bj-catalog-price-line); }
	/* 명함 — 칸이 낮아 글만 그림 위에 */
	:is(.dgal--nc, .dgal--nys) .nys-card::after { content: ''; position: absolute; inset: 0; border-radius: var(--bj-catalog-media-radius); background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, 0) 70%); opacity: 0; pointer-events: none; transition: opacity .12s; }
	:is(.dgal--nc, .dgal--nys) .nys-card:hover::after, :is(.dgal--nc, .dgal--nys) .nys-card:focus-visible::after { opacity: 1; }
	:is(.dgal--nc, .dgal--nys) .nys-grid .nys-card__name { position: absolute; z-index: 1; left: var(--bj-space-1); right: var(--bj-space-1); bottom: calc(var(--bj-space-1) + var(--bj-catalog-price-line)); color: #fff; }
	:is(.dgal--nc, .dgal--nys) .nys-grid .nys-card__price { position: absolute; z-index: 1; left: var(--bj-space-1); right: var(--bj-space-1); bottom: var(--bj-space-1); color: #fff; }
	:is(.dgal--nc, .dgal--nys) .nys-grid .nys-card:hover .nys-card__name, :is(.dgal--nc, .dgal--nys) .nys-grid .nys-card:hover .nys-card__price, :is(.dgal--nc, .dgal--nys) .nys-grid .nys-card:focus-visible .nys-card__name, :is(.dgal--nc, .dgal--nys) .nys-grid .nys-card:focus-visible .nys-card__price { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
	.dgal-name, .dgal-price, :is(.dgal--nc, .dgal--nys) .nys-grid .nys-card__name { display: none; }
	:is(.dgal--nc, .dgal--nys) .nys-grid .nys-card__price { padding-top: var(--bj-space-1); color: var(--bj-muted); font-size: var(--bj-catalog-price-size); font-weight: var(--bj-catalog-price-weight); line-height: var(--bj-catalog-price-line); }
}

/* 첫 두 칸 — 내 파일·빈 판 / 디자인 의뢰 */
.dgal-way-item { min-width: 0; margin: 0; padding: 0; list-style: none; }
.dgal-way { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--bj-space-1); height: 100%; min-height: 100%; padding: var(--bj-space-2); border-radius: var(--bj-catalog-media-radius); background: var(--bj-line); color: var(--bj-ink); text-align: center; text-decoration: none; }
.dgal-way__ico { display: flex; justify-content: center; color: var(--bj-muted); }
.dgal-way__ico svg { width: var(--bj-space-4); height: var(--bj-space-4); }
.dgal-way__title { font-size: var(--bj-type-control); font-weight: 700; }
.dgal-way__hint { font-size: var(--bj-type-caption); color: var(--bj-muted); }
.dgal-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--bj-space-1); border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); background: #fff; color: var(--bj-ink); font: inherit; font-size: var(--bj-type-control); font-weight: 600; text-decoration: none; cursor: pointer; }
.dgal-btn--main { border-color: var(--bj-ink); background: var(--bj-ink); color: #fff; }
@media (min-width: 768px) {
	.dgal--self:has([data-dgal-orient="landscape"][aria-pressed="true"]) .dgal-way-item, .dgal--nc:not(.dgal--nd-list):has(.dgal-orient [data-ncs-choice="landscape"].is-active) .dgal-way-item { grid-row: span 2; }   /* 가로 그림은 낮아 첫 두 칸을 두 줄로 — 한 줄이면 옆 그림 아래가 빈다(폰은 두 칸이 한 줄을 다 채운다) */
}
.dgal-empty { margin: var(--bj-space-3) 0; color: var(--bj-muted); }
/* 풀케어 배너 — 종전 화면(.wst)과 같은 글씨 */
.dgal .bj-list-banner { margin: 0; list-style: none; }
.dgal .bj-list-banner .bj-list-banner__title { font-size: var(--bj-type-subsection); line-height: var(--bj-type-subsection-line); }

/* 명함 — 종전 화면의 틀을 걷는다(오른쪽 패널 · 위 큰 칸 · 편집기 머리) */
:is(.dgal--nc, .dgal--nys) .nys-panel__grab, :is(.dgal--nc, .dgal--nys) .nys-panel__head, :is(.dgal--nc, .dgal--nys) .nys-panel__sub, :is(.dgal--nc, .dgal--nys) #orderAside, :is(.dgal--nc, .dgal--nys) .ncs-qbar, :is(.dgal--nc, .dgal--nys) .ncs-qsheet-backdrop, :is(.dgal--nc, .dgal--nys) .nys-ways, :is(.dgal--nc, .dgal--nys) .ncs-gap { display: none; }
:is(.dgal--nc, .dgal--nys) .ncs-offset { display: block; }
:is(.dgal--nc, .dgal--nys) .ncs-offset__main { width: 100%; }

@media (max-width: 767px) {
	.dgal .bj-list-banner .bj-list-banner__title { font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); }
	:is(.dgal--nc, .dgal--nys) .ncs-grid-head.is-sticky-head { position: static; }   /* 폰 제목 줄은 두 줄이라 붙이면 화면을 많이 가린다 — 업종 줄만 붙인다 */
	:is(.dgal--nc, .dgal--nys) .pst-industry.has-head { top: 0; }
	:is(.dgal--nc, .dgal--nys) .pst-industry { margin-inline: calc(var(--bj-space-1) * -1); }   /* 이 화면의 폰 가장자리 여백만큼만 — 종전 값이면 화면 밖으로 8 넘친다 */
	.dgal { padding: var(--bj-space-1) var(--bj-space-1) var(--bj-space-4); }
	.dgal-grid, :is(.dgal--nc, .dgal--nys) .nys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bj-space-1); }
	.dgal-tools { margin-left: 0; width: 100%; }
}

/* 셀프 연하장 — 제목 줄 → 종이 → 이어서 편집 → 그림 */
.dgal--nys .nys-panel { display: flex; flex-direction: column; }
.dgal--nys .dgal-head { order: 1; }
.dgal--nys .nys-paper { order: 2; margin: 0 0 var(--bj-space-2); }
.dgal--nys .nys-resume { order: 3; }
.dgal--nys .nys-grid { order: 4; }
.dgal--nys .nys-empty { order: 5; }
.dgal--nys .nys-paper__label { display: none; }
.dgal--nys .nys-card__media > img { aspect-ratio: auto 3 / 2; }   /* 불러오기 전 자리 */
.dgal--nys .nys-paper__opt b, .dgal--nys .nys-paper__opt small { font-size: var(--bj-type-caption); }   /* 손님 글씨 최소 14 */

/* 메시지 카드 — 90×159 세로 한 가지 */
.dgal--mcs .nys-card__media > img { aspect-ratio: auto 90 / 159; }
.dgal--mcs .nys-card__shape { display: none; }
.dgal--mcs .ncs-offset, .dgal--mcs .ncs-offset__main { width: 100%; margin: 0; }   /* 사이트 공용 div 가운데 맞춤을 걷는다 — 안 걷으면 칸이 내용만큼 좁아진다 */

/* ── 명함 상세 모드(2026-11-09 대표님 40042 · 추천안 · card/includes/namecard_nd_top.php) ──
   청첩장 목록·상세 틀을 따른다 — 가운데 폭 1000 · 디자인 4열(폰 2열) · 상세 왼쪽 사진 520 / 오른쪽 옵션(운영 청첩장 상세 실측 520·432 · 사이 48) */
.dgal--nd { max-width: calc(1000px + var(--bj-space-3) * 2); margin: 0 auto; }
:is(.dgal--nd) .nys-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bj-space-4) var(--bj-space-2); }
.dgal--nd-detail .dgal-way-item, .dgal--nd-detail .ncs-ind, .dgal--nd-detail .ncs-ind-backdrop, .dgal--nd-detail .pst-industry, .dgal--nd-detail .dgal-orient { display: none !important; }
.dgal--nd-detail .ncs-grid-head { margin-top: var(--bj-space-5, 56px); padding-top: var(--bj-space-4); border-top: 1px solid var(--bj-line); align-items: baseline; }
.nd-all { margin-left: auto; font-size: var(--bj-type-control); font-weight: 700; color: var(--bj-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.nd-list-title { font-size: var(--bj-type-page) !important; font-weight: var(--bj-type-page-weight) !important; line-height: var(--bj-type-page-line) !important; }
.nd-optline { flex-basis: 100%; margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-control); color: var(--bj-muted); }
.nd-optline a, .nd-pv-spec a { margin-left: var(--bj-space-1); font-weight: 700; color: var(--bj-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dgal--nd-list .ncs-grid-head__title { flex-wrap: wrap; }

.nd-top { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 48px; /* 운영 청첩장 상세 사진·옵션 사이 실측 */ align-items: start; margin: var(--bj-space-3) 0 0; }
.nd-photo__big { aspect-ratio: 520 / 624; border-radius: 4px; overflow: hidden; background: var(--bj-line); }
.nd-photo__big img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nd-photo__thumbs { display: flex; gap: var(--bj-space-1); margin-top: var(--bj-space-2); }
.nd-thumb { flex: none; width: 88px; height: 88px; padding: 0; border: 1px solid var(--bj-line); border-radius: 4px; overflow: hidden; background: var(--bj-line); cursor: pointer; }
.nd-thumb.is-on { border-color: var(--bj-ink); box-shadow: inset 0 0 0 1px var(--bj-ink); }
.nd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nd-photo__cap { margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-caption); color: var(--bj-muted); }
.nd-title { margin: 0; font-size: var(--bj-type-page); font-weight: var(--bj-type-page-weight); line-height: var(--bj-type-page-line); letter-spacing: var(--bj-type-page-tracking); color: var(--bj-ink); }
.nd-sub { margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-body); color: var(--bj-muted); }
.nd-rows { margin-top: var(--bj-space-3); border-top: 1px solid var(--bj-line); }
.nd-row { display: flex; align-items: center; gap: var(--bj-space-2); padding: var(--bj-space-1) 0; border-bottom: 1px solid var(--bj-line); }
.nd-row__label { flex: 0 0 112px; font-size: var(--bj-type-control); color: var(--bj-muted); }
.nd-row__box { flex: 1 1 auto; min-width: 0; }
.nd-row__box select { width: 100%; min-height: 44px; /* 터치 최소 크기 */ padding: 0 var(--bj-space-2); border: 1px solid var(--bj-ink); border-radius: 4px; background: #fff; font-size: var(--bj-type-control); color: var(--bj-ink); }
.nd-row--text { min-height: 60px; }
.nd-row__text { font-size: var(--bj-type-control); color: var(--bj-ink); }
.nd-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bj-space-2); margin-top: var(--bj-space-3); padding-top: var(--bj-space-2); border-top: 1px solid var(--bj-ink); font-size: var(--bj-type-control); }
.nd-total b { font-size: var(--bj-type-page); font-weight: 700; color: var(--bj-ink); }
.nd-basis { margin: var(--bj-space-1) 0 0; text-align: right; font-size: var(--bj-type-caption); color: var(--bj-muted); }
.nd-btns { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--bj-space-1); margin-top: var(--bj-space-2); }
.nd-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--bj-space-2); border: 1px solid var(--bj-ink); border-radius: 4px; background: #fff; font-size: var(--bj-type-action); font-weight: var(--bj-type-action-weight); color: var(--bj-ink); text-decoration: none; cursor: pointer; }
.nd-btn--main { background: var(--bj-ink); color: #fff; }
.nd-btn--wide { grid-column: 1 / -1; }   /* 디자인 상세 [이 디자인으로 편집하기] 한 줄 */
/* (11-10 김 부장 «내 파일·빈 판으로 시작이 두 줄로 꺾임») 단추 글은 한 줄 — 두 칸 같은 폭 · 글이 길면 칸 안 여백을 줄인다 */
.nd-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nd-btn { white-space: nowrap; padding: 0 var(--bj-space-1); }
/* (11-10 대표님 41488) 종이 줄 한 줄 + 창(PC 가운데 · 폰 아래 시트) */
.nd-paperpick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 6px; border: 1px solid #d6d2cc; border-radius: 4px; background: #fff; font: inherit; color: var(--bj-ink); cursor: pointer; text-align: left; }
.nd-paperpick:hover, .nd-paperpick:focus-visible { border-color: var(--bj-ink); outline: none; }
.nd-paperpick__img { flex: none; width: 36px; height: 36px; border-radius: 3px; overflow: hidden; }
.nd-paperpick__name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-paperpick__go { flex: none; font-size: var(--bj-type-caption); color: var(--bj-muted); }
.nd-papermodal[hidden] { display: none; }
.nd-papermodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.nd-papermodal__back { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.nd-papermodal .nd-papermodal__card { position: relative; box-sizing: border-box; width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; padding: 20px 24px 24px; border-radius: 8px; background: #fff; }   /* 여백은 숫자로 — 이 화면에서 --bj-space-3 가 0 으로 읽혔다(11-10 PC·390 실측) */
.nd-papermodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.nd-papermodal__head h2 { margin: 0; font-size: var(--bj-type-page); }
.nd-papermodal__x { width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--bj-ink); }
.nd-papermodal .nd-papers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; }
.nd-papermodal .nd-paper { width: auto; }
.nd-papermodal .nd-paper__img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.nd-paper__line { display: block; margin-top: 2px; font-size: var(--bj-type-caption); color: var(--bj-muted); line-height: 1.4; }
.nd-papermodal__note { margin: 16px 0 0; font-size: var(--bj-type-caption); color: var(--bj-muted); }
body.nd-modal-open { overflow: hidden; }
@media (max-width: 767px) {
	.nd-papermodal { align-items: flex-end; }
	.nd-papermodal .nd-papermodal__card { width: 100%; max-height: 82vh; border-radius: 14px 14px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
	.nd-papermodal .nd-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
}
.nd-request { display: block; margin-top: var(--bj-space-2); text-align: right; font-size: var(--bj-type-control);   /* (11-11 명함 검수) 14 → 15(손님 글자 PC 15 이상 · 대표님 42954) */ color: var(--bj-muted); text-decoration: underline; text-underline-offset: 3px; }

/* 디자인 상세(미리보기 창) — 같은 상세 틀: 왼쪽 그림 · 오른쪽 옵션 한 줄 · 값 · [이 디자인으로 만들기] */
.dgal--nd .ncs-preview .ed-modal-card { width: min(920px, calc(100% - 32px)); max-width: none; }
.nd-pv-spec { margin: var(--bj-space-2) 0 0; font-size: var(--bj-type-control); color: var(--bj-muted); }

@media (max-width: 767px) {
	.dgal--nd { padding-inline: var(--bj-space-2); }
	:is(.dgal--nd) .nys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bj-space-3) var(--bj-space-1); }
	.nd-top { grid-template-columns: minmax(0, 1fr); gap: var(--bj-space-3); margin-top: 0; }
	.nd-photo { margin-inline: calc(var(--bj-space-2) * -1); }
	.nd-photo__big { aspect-ratio: 1 / 1; border-radius: 0; }
	.nd-photo__thumbs, .nd-photo__cap { padding-inline: var(--bj-space-2); }
	.nd-thumb { width: 64px; height: 64px; }
	.nd-btns { grid-template-columns: minmax(0, 1fr); }   /* (11-10) 폰 390 은 단추 한 줄에 하나 — 두 칸이면 «템플릿 디자인 보 / 기»로 끊겼다 */
	.nd-row__label { flex-basis: 88px; }

	.nd-total b { font-size: var(--bj-type-subsection); }
	.nd-all { font-size: var(--bj-type-caption); }
}
/* 상세 모드 고침(11-09 폰 실측): 목록 제목 줄의 «100장 N원부터»는 위 칸 값과 겹쳐 뺀다(폰 가로 25 넘침) · 디자인 상세 창은 사이트 아래 메뉴 위로, 창 안만 내린다 */
.dgal--nd-detail .dgal-lead { display: none; }
.dgal--nd-detail .ncs-grid-head__title { flex-wrap: wrap; min-width: 0; }
.dgal--nd .ncs-preview { z-index: 100000; }
.dgal--nd .ncs-preview .ed-modal-card { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dgal--nd .ncs-preview .ed-factoryb-production-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.dgal--nd .ncs-preview .ed-modal-actions { flex: none; }
/* 갤러리에는 편집기 창 CSS(.ed-modal)가 없다 — 디자인 상세 창을 화면 위에 띄운다(가운데 · 뒤 어둡게 · 폰은 아래에서) */
.dgal--nd .ncs-preview:not([hidden]) { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 18, 16, .48); }
.dgal--nd .ncs-preview .ed-modal-card { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 18px 48px rgba(0, 0, 0, .24); overflow: hidden; }
.dgal--nd .ncs-preview .ed-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--bj-space-2); padding: var(--bj-space-2) var(--bj-space-3); border-bottom: 1px solid var(--bj-line); }
.dgal--nd .ncs-preview .ed-modal-header h3 { margin: 0; font-size: var(--bj-type-subsection); font-weight: 700; color: var(--bj-ink); }
.dgal--nd .ncs-preview .ed-factoryb-production-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--bj-ink); }
.dgal--nd .ncs-preview .ed-factoryb-production-modal-body { padding: var(--bj-space-3); }
.dgal--nd .ncs-preview .ncs-preview__faces { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--bj-space-2); }
.dgal--nd .ncs-preview .ncs-preview__faces img { display: block; width: 100%; height: auto; border: 1px solid var(--bj-line); }
.dgal--nd .ncs-preview figure { margin: 0; }
.dgal--nd .ncs-preview figcaption { margin-top: var(--bj-space-1); text-align: center; font-size: var(--bj-type-caption); color: var(--bj-muted); }
.dgal--nd .ncs-preview .ncs-preview__price { margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-subsection); font-weight: 700; color: var(--bj-ink); }
.dgal--nd .ncs-preview .ed-modal-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--bj-space-1); padding: var(--bj-space-2) var(--bj-space-3); border-top: 1px solid var(--bj-line); }
.dgal--nd .ncs-preview .ed-modal-actions button { min-height: 52px; border: 1px solid var(--bj-ink); border-radius: 4px; background: #fff; font-size: var(--bj-type-action); font-weight: 700; color: var(--bj-ink); cursor: pointer; }
.dgal--nd .ncs-preview .ed-modal-actions .ed-btn-primary { background: var(--bj-ink); color: #fff; }
/* PC — 같은 상세 틀: 왼쪽 디자인 그림 · 오른쪽 고른 옵션·값 */
@media (min-width: 768px) {
	.dgal--nd .ncs-preview .ed-factoryb-production-modal-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--bj-space-4); align-items: start; }
	.dgal--nd .ncs-preview .ncs-preview__faces { grid-row: 1 / 3; }
	.dgal--nd .ncs-preview .nd-pv-spec { margin-top: 0; font-size: var(--bj-type-body); }
	.dgal--nd .ncs-preview .ncs-preview__price { font-size: var(--bj-type-page); }
}
@media (max-width: 767px) {
	.dgal--nd .ncs-preview:not([hidden]) { align-items: flex-end; padding: 0; }
	.dgal--nd .ncs-preview .ed-modal-card { width: 100%; border-radius: 16px 16px 0 0; }
	.dgal--nd .ncs-preview .ncs-preview__faces { grid-auto-flow: row; }
	.dgal--nd .ncs-preview .ed-modal-actions { padding-bottom: calc(var(--bj-space-2) + env(safe-area-inset-bottom, 0px)); }
}
/* 목록 모드(11-09 PC 실측): 제목 줄 «100장 N원부터»는 옵션 한 줄과 겹쳐 뺀다 · 첫 칸(내 파일)은 디자인 칸 높이로 낮추고, 디자인 의뢰 칸은 첫 화면·상세에 있어 뺀다 · 칸이 줄 높이로 늘지 않게 */
.dgal--nd-list .dgal-lead { display: none; }
.dgal--nd .nys-grid { align-items: start; }
.dgal--nd-list .dgal-way-item:has(.dgal-way--link) { display: none; }
/* (11-11 대표님 43066 #4) 목록 모드는 의뢰 칸을 빼 첫 칸(내 파일·빈 판)이 한 칸 — 두 줄 차지(span 2)하면 둘째 줄 첫 칸이 비었다 · 칸 아래 글이 없어 줄 사이도 디자인 상세와 같은 간격 */
@media (min-width: 768px) { .dgal--nd-list .nys-grid { row-gap: var(--bj-space-2); } }
.dgal--nd .dgal-way { min-height: 0; height: auto; gap: var(--bj-space-1); padding: var(--bj-space-2); }
.dgal--nd .dgal-way__ico { display: none; }

/* ── (11-09 대표님 «상세에 아무 내용도 없고») 상세 위 칸 다시 — 명함 사진 판 · 사실 줄 · 누르는 칸 · 종이 사진 칸 · 한 장 값 */
.nd-photo__big { aspect-ratio: 520 / 624; /* (11-10 대표님 42696 «세로로 조금 더 길게 · 청첩장 상세 비율») 셀프·청첩장 상세 큰 사진(.slf-stage)과 같은 비율 · 폰은 아래 4:3 그대로 */ margin: 0; display: flex; align-items: center; justify-content: center; background: #efece7; }
.nd-photo__big.is-cut { background: radial-gradient(ellipse at 50% 40%, #f6f4f0 0%, #e4e0d9 100%); }
.nd-photo__big.is-cut img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .18)); }
.nd-thumb.is-cut { background: #ece8e2; }
.nd-thumb.is-cut img { object-fit: contain; padding: 6px; }
/* (11-10 대표님 41480·41542) 연출컷 — 사진 위 카드 자리에 디자인을 원근 그대로(card/includes/namecard_nd_top.php sceneRender · 크기·위치는 스크립트가 사진 픽셀로 잰다)
   작은 사진 줄은 칸이 많아지면 옆으로 넘겨 본다(화면 전체가 옆으로 밀리지 않게 줄 안에서만) */
.nd-photo { width: 100%; min-width: 0; max-width: 100%; }   /* (11-11) 사진 칸은 그리드 칸 폭 그대로 — 작은 사진이 셋으로 줄어도 큰 사진이 줄 길이(280)로 줄지 않게 */   /* 줄이 길어져도 사진 칸이 그 길이로 늘지 않게(그리드 칸이 늘이지 않아 칸 폭으로 묶는다) */
@media (max-width: 767px) { .nd-photo { width: calc(100% + var(--bj-space-2) * 2); max-width: calc(100% + var(--bj-space-2) * 2); } }   /* 폰은 화면 끝까지(위 margin-inline 만큼) */
.nd-photo__thumbs { overflow-x: auto; scrollbar-width: none; }   /* (11-11 대표님 42938 «가로 스크롤 바는 없어야») 넘겨 보기는 그대로 · 막대만 숨김 */
.nd-photo__thumbs::-webkit-scrollbar { display: none; }
.nd-photo__big { position: relative; }
.nd-photo__big.is-scene { background: var(--bj-line); }
.nd-thumb .nd-scene { position: relative; width: 100%; height: 100%; }   /* 연출 칸 모양은 card/css/namecard-scene.css */
.nd-thumb .nd-scene img.nd-scene__photo { padding: 0; }
.nd-photo__cap { margin-top: var(--bj-space-2); font-size: var(--bj-type-control); line-height: 1.5; color: var(--bj-muted); }
.nd-photo__cap b { color: var(--bj-ink); font-weight: 700; }
.nd-crumb { margin: 0 0 var(--bj-space-1); font-size: var(--bj-type-caption); color: var(--bj-muted); }
.nd-crumb a { color: inherit; text-decoration: none; }
.nd-crumb a:hover { text-decoration: underline; }
.nd-sub { font-size: var(--bj-type-control); color: var(--bj-ink); }
.nd-facts { display: flex; flex-wrap: wrap; gap: var(--bj-space-1); margin: var(--bj-space-2) 0 0; padding: 0; list-style: none; }
.nd-facts li { padding: 4px 10px; border-radius: 999px; background: #f2efea; font-size: var(--bj-type-caption); color: var(--bj-ink); }
.nd-row { align-items: flex-start; padding: var(--bj-space-2) 0; }
.nd-row__label { padding-top: 10px; font-weight: 600; color: var(--bj-ink); }
.nd-row--paper { flex-wrap: wrap; }
.nd-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.nd-chip { position: relative; }
.nd-chip input, .nd-paper input { position: absolute; opacity: 0; pointer-events: none; }
.nd-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #d6d2cc; border-radius: 4px; background: #fff; font-size: var(--bj-type-control); color: var(--bj-ink); cursor: pointer; }
.nd-chip input:checked + span { border-color: var(--bj-ink); box-shadow: inset 0 0 0 1px var(--bj-ink); font-weight: 700; }
/* (11-10 «디자인 먼저») 종류 줄은 링크 칸 — 고른 칸 모양은 위 라디오와 같게 */
.nd-chip--link { text-decoration: none; }
.nd-chip--link.is-on span { border-color: var(--bj-ink); box-shadow: inset 0 0 0 1px var(--bj-ink); font-weight: 700; }
.nd-chip--link:focus-visible span { outline: 2px solid var(--bj-ink); outline-offset: 2px; }
.nd-chip input:focus-visible + span, .nd-paper input:focus-visible ~ .nd-paper__img { outline: 2px solid var(--bj-ink); outline-offset: 2px; }
.nd-papers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1 1 0; min-width: 0; }
.nd-paper { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.nd-paper__img { display: block; aspect-ratio: 1 / 1; border: 1px solid #d6d2cc; border-radius: 4px; overflow: hidden; background: #f2efea; }
.nd-paper__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* (11-10 김 부장 ②) 종이 사진은 흰 종이 귀퉁이라 줄이면 6종이 똑같다 — 가운데(종이 면)를 확대하고 대비를 올려 결·색 차이가 보이게 */
/*   사진 2000px 가운데를 칸에 약 2배 축소로(scale 14) · 흰 종이(밝기 238~252 · 상세에 쓰는 8종 실측) 기준 밝기·대비 — 색지가 들어오면 다시 맞출 것 */
.nd-paper__img img, .nd-paperlist__img img { transform: scale(14); transform-origin: 50% 62%; filter: brightness(.55) contrast(12); }
.nd-paper__desc em { display: block; font-style: normal; color: var(--bj-muted); opacity: .8; }
.nd-price-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: var(--bj-space-2) 0 0; }
.nd-price-top b { font-size: var(--bj-type-page); font-weight: 700; color: var(--bj-ink); }
.nd-price-top span { font-size: var(--bj-type-caption); color: var(--bj-muted); }
.nd-paper input:checked ~ .nd-paper__img { border-color: var(--bj-ink); box-shadow: inset 0 0 0 2px var(--bj-ink); }
.nd-paper__name { font-size: var(--bj-type-caption); line-height: 1.35; color: var(--bj-ink); word-break: keep-all; }
.nd-paper input:checked ~ .nd-paper__name { font-weight: 700; }
.nd-paper__desc { flex-basis: 100%; margin: var(--bj-space-1) 0 0 calc(112px + var(--bj-space-2)); font-size: var(--bj-type-caption); line-height: 1.5; color: var(--bj-muted); }
.nd-paper__desc b { color: var(--bj-ink); }
.nd-each { margin: 4px 0 0; text-align: right; font-size: var(--bj-type-caption); color: var(--bj-muted); }
/* 디자인 칸 줄 사이 */
.dgal--nd-detail .nys-grid { gap: var(--bj-space-2); }
/* ── 아래 상품 설명 */
.nd-more { margin-top: var(--bj-space-5, 56px); }
.nd-tabs { display: flex; gap: var(--bj-space-3); margin-bottom: var(--bj-space-4); border-bottom: 1px solid var(--bj-line); overflow-x: auto; }
.nd-tabs a { flex: none; padding: var(--bj-space-2) 0; font-size: var(--bj-type-control); font-weight: 700; color: var(--bj-ink); text-decoration: none; border-bottom: 2px solid transparent; }
.nd-tabs a:hover { border-bottom-color: var(--bj-ink); }
.nd-sec { margin-bottom: var(--bj-space-5, 56px); scroll-margin-top: 64px; }
.nd-h { margin: 0 0 var(--bj-space-2); font-size: var(--bj-type-section, 22px); font-weight: 700; color: var(--bj-ink); }
.nd-note { margin: -8px 0 var(--bj-space-2); font-size: var(--bj-type-caption); color: var(--bj-muted); }
.nd-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bj-space-3); margin: 0; padding: 0; list-style: none; }
.nd-cases li:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--bj-space-4); align-items: center; }
.nd-cases img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: #efece7; }
.nd-cases div { margin-top: var(--bj-space-1); }
.nd-cases b { display: block; font-size: var(--bj-type-control); color: var(--bj-ink); }
.nd-cases li:first-child b { font-size: var(--bj-type-section, 22px); }
.nd-cases span { display: block; margin-top: 4px; font-size: var(--bj-type-caption); line-height: 1.55; color: var(--bj-muted); }
.nd-cases li:first-child span { font-size: var(--bj-type-control); }
.nd-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bj-space-5, 56px); scroll-margin-top: 64px; }
.nd-table { width: 100%; border-collapse: collapse; font-size: var(--bj-type-control); }
.nd-table th, .nd-table td { padding: 12px 8px; border-bottom: 1px solid var(--bj-line); text-align: left; }
.nd-table thead th { font-size: var(--bj-type-caption); font-weight: 400; color: var(--bj-muted); border-bottom-color: var(--bj-ink); }
.nd-table td:last-child { color: var(--bj-muted); text-align: right; }
.nd-table tr.is-on th, .nd-table tr.is-on td { background: #f6f3ee; }
.nd-paperlist { margin: 0; padding: 0; list-style: none; }
.nd-paperlist li { display: flex; gap: var(--bj-space-2); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bj-line); }
.nd-paperlist__img { flex: none; width: 56px; height: 56px; border-radius: 4px; overflow: hidden; background: #f2efea; }
.nd-paperlist__img img { width: 100%; height: 100%; object-fit: cover; }
.nd-paperlist b { display: block; font-size: var(--bj-type-control); color: var(--bj-ink); }
.nd-paperlist li span span { display: block; font-size: var(--bj-type-caption); line-height: 1.5; color: var(--bj-muted); }
.nd-make { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bj-space-2); margin: 0; padding: 0; list-style: none; }
.nd-make img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.nd-make b { display: block; margin-top: var(--bj-space-1); font-size: var(--bj-type-control); color: var(--bj-ink); }
.nd-make span { font-size: var(--bj-type-caption); color: var(--bj-muted); }
.nd-lines { margin: 0; padding: 0 0 0 1.1em; }
.nd-lines li { margin-bottom: var(--bj-space-1); font-size: var(--bj-type-control); line-height: 1.6; color: var(--bj-ink); }
.nd-faq details { border-bottom: 1px solid var(--bj-line); }
.nd-faq summary { padding: 14px 0; font-size: var(--bj-type-control); font-weight: 600; color: var(--bj-ink); cursor: pointer; }
.nd-faq p { margin: 0 0 14px; font-size: var(--bj-type-caption); line-height: 1.6; color: var(--bj-muted); }
@media (max-width: 767px) {
	.nd-photo__big { aspect-ratio: 4 / 3; }
	.nd-row { flex-wrap: wrap; gap: 8px; }
	.nd-row__label { flex-basis: 100%; padding-top: 0; }
	.nd-papers { flex-basis: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.nd-paper__desc { margin-left: 0; }
	.nd-cases { grid-template-columns: 1fr; }
	.nd-cases li:first-child { grid-template-columns: 1fr; gap: 0; }
	.nd-cases li:first-child b { font-size: var(--bj-type-control); }
	.nd-two { grid-template-columns: 1fr; gap: 0; }
	.nd-make { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nd-more { margin-bottom: 96px; /* 폰 아래 메뉴 막대에 가리지 않게 */ }
	.nd-tabs { gap: var(--bj-space-2); }
}

/* (11-11 명함 검수) 명함 상세 «기본 사양» 작은 글(«6종 중 선택» 등) 14 → 15 — 청첩장 셀프 상세 공용 규칙(.slf-specs small · caption)은 그대로 두고 명함 상세에서만 */
.dgal--nd .slf-specs small { font-size: var(--bj-type-control); }
/* (11-11 명함 팀장 웹디자인 4차 ②) 폰 390 «기본 사양» 값이 «양 / 면»·«11월 17일 / (화)» 처럼 낱글자에서 끊겼다 — 낱말 단위로 줄바꿈 */
.dgal--nd .slf-specs dd, .dgal--nd .slf-specs small { word-break: keep-all; overflow-wrap: anywhere; }