/* «청첩장» 첫 화면(card/wedding_start.php · 2026-10-28 대표님 «청첩장도 연하장처럼»)
 * 셀프 연하장 CSS(newyear-self-start.css)·명함 CSS(namecard-start.css — 칸 나눔 .ncs-offset · 견적 패널 .ncs-quote · 폰 한 줄 .ncs-qbar)를 그대로 쓰고,
 * 여기는 청첩장에만 있는 것(고른 디자인 «지금 여기» · 덮어 연 화면 · 셀프 부수 칸 · 버튼 카드)만 더한다. 글씨·색·간격 숫자는 적지 않는다 — 토큰만
 * (docs/DESIGN_GRAIN_GUIDE.md · 결 시험 card/tools/design_grain/wedding_start.json · wedding_start_self.json). */

/* 셀프 판 카드는 <button>(고르기 창이 여는 길) — 단추 겉모양을 걷고 링크 카드와 같게 */
.wst button.nys-card { appearance: none; border: 0; padding: 0; margin: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.wst .nys-ways .nys-way { width: 100%; }

/* 고른 디자인(세트 판 맨 앞) = «지금 여기» — 갈래 단추와 같은 진한 테두리 하나(체크·배지·옅은 바탕 없음 · 대표님 10-27 16901) */
.wst .nys-card.is-now .nys-card__media { box-shadow: 0 0 0 2px var(--nys-ink); }

/* 청첩장 그림 — 세트 상세 사진(사진 칸 가득) · 셀프 템플릿(카드 전체가 보이게 여백) */
.wst.wst--set .nys-card__media { padding: 0; }
.wst.wst--set .nys-card__media img { object-fit: cover; }

/* 셀프 판 부수 칸 — 사양 모달 select 와 같은 칸(.nys-slot__page select 의 값) */
.wst .wst-qty { display: grid; gap: var(--ed-panel-space-2); margin-top: var(--fb-gap_sm); }
.wst .wst-qty select { width: 100%; padding: var(--ed-panel-space-2) var(--ed-panel-space-3); border: 1px solid var(--ed-inspector-line-soft); border-radius: var(--ed-inspector-control-radius); background: var(--nys-surface); color: var(--nys-ink); font: inherit; font-size: var(--fb-font_size_md); }
.wst .wst-sub-link { white-space: nowrap; color: var(--nys-ink); font-weight: var(--ed-type-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* 세트 판 사양 줄 — 상세에서 고른 값(이름 · 값) */
.wst .wst-spec { margin-top: var(--ed-panel-space-2); }
.wst .wst-spec li span:last-child { color: var(--ed-inspector-muted); text-align: right; }

/* 상세 위에 덮어 연 화면(세트 판) — 윗줄 «돌아가기»·폰 «뒤로»는 덮개를 닫는다(링크는 그대로 · JS 가 닫기로 바꾼다) */
.wst.is-opening .nys-card, .wst.is-opening .nys-way { pointer-events: none; }
.wst.is-opening .nys-way[aria-busy="true"] { border-color: var(--nys-ink); }

@media (max-width: 767px) {
	/* 견적 한 줄이 목록 끝을 가리지 않게(명함 B·자유형과 같은 값) */
	.wst .nys-panel { padding-bottom: calc(var(--fb-gap_xl) * 4); }
	.wst .ncs-grid-head { flex-wrap: wrap; }
	/* 형태 칩이 폭을 넘으면 칩 줄 안에서만 옆으로 민다(화면 전체가 옆으로 밀리지 않게 · 10-28 390 사진 검수) */
	.wst .ncs-grid-head .ncs-filter { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
	.wst .ncs-grid-head .ncs-filter::-webkit-scrollbar { display: none; }
	.wst .ncs-grid-head .ncs-filter button { white-space: nowrap; }
}

/* (2026-11-01 카드 1580) 형태 칩은 글 폭대로 — 같은 폭 칸에 «직각 3단형»이 넘쳐 옆 칩과 붙었다 · 안 들어가면 다음 줄로 */
.wst .ncs-filter { display: flex; flex-wrap: wrap; gap: var(--ed-panel-space-2); }
.wst .ncs-filter button { flex: none; width: auto; white-space: nowrap; padding-left: var(--ed-panel-space-3); padding-right: var(--ed-panel-space-3); }