/* 사이트 플래너 실사 표현판에서 새로 생긴 조작부(도형 바닥재 · 색 고르기) — css/planner.css 위에 덧붙입니다 */

/* 바닥재 그리기 방식: 3칸 × 2줄 */
.pl-seg.pl-seg-3 { grid-template-columns: repeat(3, 1fr); }

/* 바닥재 목록의 작은 그림(실제 텍스처) */
.pl-hq .pl-surfs i { background-repeat: no-repeat; }

/* 탄성포장 색 */
.pl-colors { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pl-colors button, .pl-colorpick { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .14); }
.pl-colors button.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.pl-colorpick { position: relative; overflow: hidden; background: conic-gradient(#e2528f, #e2b33c, #4f9a63, #3f7fbf, #8a6fb0, #e2528f); cursor: pointer; }
.pl-colorpick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* 시작 화면 아래 버튼들 */
.pl-start-more { display: flex; flex-wrap: wrap; gap: 8px; }

/* 선택한 도형의 값 */
.pl-sel { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pl-sel h4 { font-weight: 600; font-size: 13px; }
.pl-ctx[data-kind="shape"] .pl-size input, .pl-sel .pl-size input { width: 72px; }