/* «패키지 박스» 디자인 첫 화면(card/package_start.php · 2026-10-28 대표님 17625·17643) — 겉·글씨·칸은 명함 첫 화면과 같은 CSS(newyear-self-start.css · namecard-start.css).
 *   여기에는 두 가지만 더한다.
 *   ① 업종 칩 줄 — 명함 상세 업종 칩(factoryb/css/namecard-entry.css .fb-namecard-work-groups)과 같은 조용한 글자 줄:
 *      테두리·바탕 없음 · 흐린 글자 · 고른 칩만 먹색 굵게 · 굵어져도 옆 칩이 밀리지 않게 굵은 글자 폭(::after)을 미리 잡는다 · 폰은 제 줄 안에서 옆으로 굴린다.
 *      위계: 형태 고르기(2단계 결정 · 테두리 칸) > 업종 칩(걸러 보기 · 테두리 없음) — 이웃 단계가 테두리·색으로 갈린다.
 *   ② 폰에서 형태 셋은 제목 아래 제 줄(같은 폭 셋) — 명함 [가로|세로] 둘 자리에 셋이 들어가 제목이 세로로 꺾였다(10-28 시안 실측). */
/* ③ 형태 고르기(일자형·상하잠금·이중잠금) 단추 — 명함 첫 화면 공용 CSS 의 .ncs-filter 규칙을 빌려 썼는데, 명함 첫 화면이 형태 고르기를 오른쪽 패널로 옮기며(10-29 95179cd681)
 *   그 규칙을 지워 박스 단추가 좁은 세로 칸으로 무너졌다(11-02 테스트 실측 · «상하잠금» 글자가 칸에 꽉 참). 같은 토큰 값 그대로 박스 화면이 가진다. */
.pks .ncs-filter { grid-auto-columns: auto; gap: var(--ed-panel-space-2); flex: 0 0 auto; }
.pks .ncs-filter button { display: inline-flex; align-items: center; gap: var(--ed-panel-space-2); padding: 0 var(--ed-panel-space-4); font-weight: var(--ed-type-weight-medium); }
.pks .ncs-filter button[aria-checked="true"] { font-weight: var(--ed-type-weight-semibold); }
.pks .ncs-filter button:disabled { opacity: .45; cursor: default; }
.pks .ncs-filter svg { width: var(--ed-panel-space-5); height: var(--ed-panel-space-5); }
.pks .pks-groups { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 8px; padding: 0; }
.pks .pks-groups > button {
	display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; justify-content: center;
	min-height: 36px; margin: 0; padding: 0; border: 0; background: transparent;
	color: var(--bj-muted, #66635e); font: inherit; font-size: 14px; font-weight: 500; line-height: 20px;   /* 명함 상세 업종 칩과 같은 값 */
	white-space: nowrap; cursor: pointer; transition: color 120ms ease;
}
.pks .pks-groups > button::after { content: attr(data-chip-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; }
.pks .pks-groups > button > span > b { color: var(--bj-tertiary, #918e87); font-weight: 400; }
.pks .pks-groups > button:hover { color: var(--bj-ink, #181817); }
.pks .pks-groups > button.is-active { color: var(--bj-ink, #181817); font-weight: 700; }
.pks .pks-groups > button.is-active > span > b { color: var(--bj-muted, #66635e); font-weight: 700; }
.pks .pks-groups > button:focus-visible { outline: 2px solid var(--bj-ink, #181817); outline-offset: 2px; border-radius: 4px; }
.pks .pks-groups > button[hidden] { display: none; }
@media (max-width: 767px) {
	.pks .pks-groups { flex-wrap: nowrap; gap: 0 18px; margin: 0 -16px 4px; padding: 0 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.pks .pks-groups::-webkit-scrollbar { display: none; }
	.pks .pks-groups > button { min-height: 40px; }
	.pks .ncs-grid-head { flex-wrap: wrap; }
	.pks .ncs-grid-head .ncs-filter { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pks .ncs-grid-head .ncs-filter button { justify-content: center; }
}