/* 부고장 디자인 미리보기 페이지(design.html) 전용 레이아웃.
   .skin-layer/.deco-ribbon/.has-deco/.skin-choice 는 실사용 스타일이라 style.css 에 있다. */

.dp-shell { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; overflow-x: auto; }
.dp-title { font-family: var(--serif); font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.dp-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }
.dp-cols { display: grid; grid-template-columns: 520px 300px; min-width: 848px; gap: 28px; align-items: start; }
.dp-stage { display: flex; justify-content: center; }
.dp-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.dp-panel + .dp-panel { margin-top: 14px; }
.dp-panel h2 { font-size: 13px; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 12px; font-weight: 600; }
.dp-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--ink-soft); }
.dp-row label { flex: 0 0 70px; }
.dp-row output { font-family: var(--mono); font-size: 12px; min-width: 3em; text-align: right; }
.dp-row input[type=range] { accent-color: var(--ink-blue); flex: 1; min-width: 0; }
.dp-go { display: block; width: 100%; margin-top: 4px; text-align: center; text-decoration: none; }

/* design.html — 선택 패널은 2열 그리드. 버튼 자체 스타일은 style.css .skin-choice */
.dp-sym, #back-row { grid-template-columns: 1fr 1fr; }
.dp-choices .skin-choice { width: auto; }
.dp-note { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }