/* 관리자 「디자인 규격」. 관리자 틀은 표준 부품(admin-ui.css)이 그리고, 여기는 이 화면 고유 배치만 둔다.
   견본·미리보기(.dz-live)는 편집 중인 값이 --mg-*로 덮어써지므로 고객 사이트 모양 그대로 그린다.
   .dz-live 안에서 :root가 계산하던 값(진한 붉은색 등)도 여기서 다시 계산한다. */
.dz{--dz-sw-bg:var(--mg-paper-2);--dz-sw-ink:var(--mg-black);--dz-sw-line:var(--mg-paper-3);--dz-sw-card:var(--mg-white);word-break:keep-all}
.dz-live{--mg-red-strong:color-mix(in srgb,var(--mg-red) 85%,var(--mg-black));--mg-red-line:color-mix(in srgb,var(--mg-red) 30%,transparent);--mg-red-soft:color-mix(in srgb,var(--mg-red) 10%,transparent);--mg-radius-pill:999px}
.dz svg,.dz-live svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* 위 도구 줄 · 묶음 고르기 · 목록 + 옆 미리보기 */
.dz-top .ui-kicker{flex-basis:100%}
/* style.css의 전역 details 바깥 여백(20px)을 없앤다 — admin-ui .ui-fold에 margin:0이 들어가면 지울 것 */

.dz [data-act="preview"]{display:none}
.dz-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:var(--mg-space-16);align-items:start}
.dz-side{position:sticky;top:var(--mg-space-16)}
.dz-side .ui-panel-aside{flex-wrap:wrap;justify-content:flex-end}
.dz-group[hidden],.dz-fig[hidden]{display:none}
.dz .ui-fold .ui-mini-scroll,.dz-confirm .ui-mini-scroll{margin-top:var(--mg-space-4)}
.dz-confirm{display:grid;gap:var(--mg-space-12);word-break:keep-all}
.dz-confirm .ui-kicker{margin:0}
.dz .ui-fold .ui-mini th:first-child{width:88px}
.dz .ui-fold .ui-mini th:last-child{width:112px}
.dz-confirm .ui-mini th:not(:first-child){width:96px}
.dz-sub{display:block;font-size:var(--mg-fs-2xs);color:var(--mg-gray);white-space:normal}

/* 값 한 줄: 견본 | 입력칸(표준 field) | 공개 값으로 */
.dz-rows{display:grid;margin-top:var(--mg-space-8)}
.dz-row{display:grid;grid-template-columns:72px minmax(0,1fr) 32px;align-items:center;gap:var(--mg-space-12);padding:var(--mg-space-12) 0;border-top:1px solid var(--mg-paper-2)}
.dz-row.changed{box-shadow:inset 3px 0 0 var(--mg-red);padding-left:var(--mg-space-8)}
.dz-row .ui-btn.icon{visibility:hidden}
.dz-row.changed .ui-btn.icon{visibility:visible}
.dz-ed{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mg-space-6);min-width:0}
.dz-was:empty{display:none}
.db-layout .dz .ui-field .dz-ed :is(input,select){width:auto;min-height:36px}
.db-layout .dz .ui-field .dz-ed input[type=text]{width:96px;font-variant-numeric:tabular-nums;text-transform:lowercase}
.db-layout .dz .ui-field .dz-ed input[type=number]{width:72px;text-align:right;font-variant-numeric:tabular-nums}
.db-layout .dz .ui-field .dz-ed input[type=color]{width:40px;height:36px;padding:var(--mg-space-2)}
.db-layout .dz .ui-field .dz-ed input[type=range]{width:140px;min-height:24px;padding:0;border:0;background:transparent;accent-color:var(--mg-black)}
.db-layout .dz .ui-field .dz-ed .ui-btn.sm{min-width:32px}
.dz-u{min-width:24px;font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.dz-u.dz-wide{min-width:44px;text-align:right}
.dz-lock{display:inline-flex;align-items:center;gap:var(--mg-space-4);font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.dz-lock svg{width:14px;height:14px;stroke-width:1.7}
.dz-trio{display:grid;grid-template-columns:auto 96px 44px;align-items:center;gap:var(--mg-space-2) var(--mg-space-6);font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.db-layout .dz .ui-field .dz-trio input[type=range]{width:96px}
.dz-trio output{text-align:right;color:var(--mg-black);font-variant-numeric:tabular-nums}

/* 견본 칸(고객 값으로 그림) */
.dz-sw{position:relative;height:44px;display:grid;place-items:center;border-radius:var(--mg-radius-md);background:var(--dz-sw-bg);overflow:hidden}
.dz-sw.dz-color{border:1px solid var(--dz-sw-line)}
.dz-sw.dz-left{justify-items:start;padding-left:var(--mg-space-8)}
.dz-sw.dz-shadowbg{background:var(--dz-sw-line)}
.dz-txt{font-family:var(--mg-font);color:var(--dz-sw-ink);line-height:1;white-space:nowrap}
.dz-face{font-family:var(--mg-font);font-size:16px;font-weight:700;color:var(--dz-sw-ink)}
.dz-spacebar{display:block;height:10px;background:var(--mg-red);border-radius:2px}
.dz-box{display:block;width:34px;height:34px;background:var(--dz-sw-card);border:1.5px solid var(--dz-sw-ink)}
.dz-card{display:block;width:44px;height:28px;background:var(--dz-sw-card);border-radius:6px}
.dz-lines{font-family:var(--mg-font);font-size:12px;color:var(--dz-sw-ink);width:60px;text-align:left}
.dz-ball{position:absolute;left:8px;top:15px;width:14px;height:14px;border-radius:50%;background:var(--mg-red)}
.dz-ball.go{left:calc(100% - 22px)}
.dz .dz-play{position:absolute;inset:0;border:0;background:transparent;cursor:pointer}
.dz .dz-pbtn{font-family:var(--mg-font);font-size:12px;padding:6px 10px;border:0;border-radius:6px;background:var(--mg-red);color:var(--mg-white);transition:transform var(--mg-dur-fast) var(--mg-ease);cursor:pointer}
.dz .dz-pbtn:active{transform:var(--mg-press)}
.dz-ring{font-family:var(--mg-font);font-size:12px;padding:5px 9px;border-radius:6px;background:var(--mg-black-4);color:var(--mg-white);outline:2px solid var(--mg-focus-ring);outline-offset:2px}

/* 부품 견본 */
.dz-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--mg-space-12);margin-top:var(--mg-space-12)}
.dz-part{display:flex;flex-direction:column;border:1px solid var(--mg-paper-2);border-radius:var(--mg-radius-lg);overflow:hidden}
.dz-stage{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-height:132px;padding:18px;overflow:hidden;background:var(--mg-black);color:var(--mg-ink);font-family:var(--mg-font)}
.dz-stage.dz-col{flex-direction:column;align-items:stretch}
.dz-stage.dz-tall{min-height:210px;align-items:flex-start}
.dz-cap{padding:var(--mg-space-10) var(--mg-space-12);border-top:1px solid var(--mg-paper-2);font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.dz-cap b{display:block;font-size:var(--mg-fs-sm);color:var(--mg-black)}

/* 문장군 고객 부품: 규격 이름만 쓴다(.dz-live 안에서만) */
.dz-live .mg-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mg-font);font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-semibold);min-height:44px;padding:0 var(--mg-space-20);border-radius:var(--mg-radius-md);border:1px solid transparent;cursor:pointer;transition:transform var(--mg-dur-fast) var(--mg-ease),background-color var(--mg-dur-fast) var(--mg-ease),border-color var(--mg-dur-fast) var(--mg-ease);white-space:nowrap}
.dz-live .mg-btn:active{transform:var(--mg-press)}
.dz-live .mg-btn:focus-visible,.dz-live .mg-icon:focus-visible,.dz-live .mg-tabs button:focus-visible,.dz-live .mg-card:focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:2px}
.dz-live .mg-btn.solid{background:var(--mg-red);color:var(--mg-white)}
.dz-live .mg-btn.solid:hover{background:var(--mg-red-strong)}
.dz-live .mg-btn.line{background:transparent;color:var(--mg-ink);border-color:color-mix(in srgb,var(--mg-white) 30%,transparent)}
.dz-live .mg-btn.line:hover{border-color:var(--mg-ink)}
.dz-live .mg-btn.text{background:transparent;color:var(--mg-muted);padding:0 var(--mg-space-8)}
.dz-live .mg-btn.text:hover{color:var(--mg-ink)}
.dz-live .mg-icon{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--mg-ink);transition:background-color var(--mg-dur-fast) var(--mg-ease),transform var(--mg-dur-fast) var(--mg-ease);cursor:pointer}
.dz-live .mg-icon:hover{background:color-mix(in srgb,var(--mg-muted) 12%,transparent)}
.dz-live .mg-icon:active{transform:var(--mg-press)}
.dz-live .mg-icon svg{width:21px;height:21px;stroke-width:1.5}
.dz-live .mg-card{width:100%;max-width:220px;overflow:hidden;background:var(--mg-black-4);border-radius:var(--mg-radius-lg);box-shadow:var(--mg-shadow-1);transition:transform var(--mg-dur-base) var(--mg-ease),box-shadow var(--mg-dur-base) var(--mg-ease);cursor:pointer}
.dz-live .mg-card:hover{transform:translateY(-2px);box-shadow:var(--mg-shadow-2)}
.dz-live .mg-card .ph{aspect-ratio:4/3;background:linear-gradient(135deg,color-mix(in srgb,var(--mg-black-4) 80%,var(--mg-white)),var(--mg-black-4))}
.dz-live .mg-card .in{padding:var(--mg-space-12) var(--mg-space-16) var(--mg-space-16)}
.dz-live .mg-card h4{margin:0 0 var(--mg-space-4);font-size:var(--mg-fs-md);font-weight:var(--mg-weight-semibold);line-height:var(--mg-leading-tight)}
.dz-live .mg-card p{margin:0;font-size:var(--mg-fs-xs);line-height:var(--mg-leading-snug);color:var(--mg-muted)}
.dz-live .mg-field{display:flex;flex-direction:column;gap:var(--mg-space-6);width:100%}
.dz-live .mg-field .lab{font-size:var(--mg-fs-xs);color:var(--mg-muted)}
.dz-live .mg-field input,.dz-live .mg-field .inp{display:flex;align-items:center;width:100%;height:48px;padding:0 var(--mg-space-16);font-family:var(--mg-font);font-size:var(--mg-fs-md);border:1px solid color-mix(in srgb,var(--mg-white) 18%,transparent);border-radius:var(--mg-radius-md);background:var(--mg-black-3);color:var(--mg-ink);outline:none;transition:border-color var(--mg-dur-fast) var(--mg-ease)}
.dz-live .mg-field input:focus{border-color:var(--mg-ink)}
.dz-live .mg-field input:focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:2px}
.dz-live .mg-field.err input{border-color:var(--mg-red)}
.dz-live .mg-field .msg{font-size:var(--mg-fs-2xs);color:var(--mg-red)}
.dz-live .mg-tabs{display:flex;gap:var(--mg-space-4);padding:var(--mg-space-4);border-radius:var(--mg-radius-pill);background:var(--mg-black-3)}
.dz-live .mg-tabs button,.dz-live .mg-tabs span{min-height:36px;padding:var(--mg-space-8) var(--mg-space-16);display:inline-flex;align-items:center;font-family:var(--mg-font);font-size:var(--mg-fs-sm);border:0;border-radius:var(--mg-radius-pill);background:transparent;color:var(--mg-muted);transition:background-color var(--mg-dur-base) var(--mg-ease),color var(--mg-dur-base) var(--mg-ease);cursor:pointer}
.dz-live .mg-tabs [aria-selected=true],.dz-live .mg-tabs .on{background:var(--mg-ink);color:var(--mg-black);font-weight:var(--mg-weight-semibold)}
.dz-live .mg-toast{position:absolute;left:50%;bottom:var(--mg-space-16);padding:var(--mg-space-12) var(--mg-space-16);font-size:var(--mg-fs-sm);white-space:nowrap;background:var(--mg-ink);color:var(--mg-black);border-radius:var(--mg-radius-md);box-shadow:var(--mg-shadow-2);transform:translate(-50%,calc(100% + 24px));transition:transform var(--mg-dur-base) var(--mg-ease-big)}
.dz-live .mg-toast.on{transform:translate(-50%,0)}
.dz-live .mg-sheet{position:absolute;inset:auto 0 0;padding:var(--mg-space-12) var(--mg-space-16) var(--mg-space-16);text-align:left;background:var(--mg-black-3);border-radius:var(--mg-radius-xl) var(--mg-radius-xl) 0 0;box-shadow:var(--mg-shadow-3-up);transform:translateY(105%);transition:transform var(--mg-dur-slow) var(--mg-ease-big);z-index:2}
.dz-live .mg-sheet.on{transform:none}
.dz-live .mg-sheet .grab{width:36px;height:4px;margin:0 auto var(--mg-space-12);border-radius:2px;background:color-mix(in srgb,var(--mg-white) 25%,transparent)}
.dz-live .mg-sheet h4{margin:0 0 var(--mg-space-4);font-size:var(--mg-fs-lg);font-weight:var(--mg-weight-bold)}
.dz-live .mg-sheet p{margin:0 0 var(--mg-space-12);font-size:var(--mg-fs-xs);color:var(--mg-muted)}
.dz-live .mg-sheet .mg-btn{width:100%}
.dz-live .mg-chip{display:inline-flex;align-items:center;padding:var(--mg-space-2) var(--mg-space-8);font-size:var(--mg-fs-2xs);font-weight:var(--mg-weight-semibold);border-radius:var(--mg-radius-pill);background:var(--mg-red-soft);color:var(--mg-red);border:1px solid var(--mg-red-line)}

/* 비율·아이콘 규칙 */
.dz-ratios{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--mg-space-16);margin:var(--mg-space-12) 0}
.dz-ratio{display:flex;flex-direction:column;gap:var(--mg-space-6);font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.dz-ratio .r{display:grid;place-items:center;font-size:var(--mg-fs-xs);font-weight:var(--mg-weight-bold);color:var(--mg-black);border:1px solid var(--mg-paper-3);border-radius:var(--mg-radius-sm);background:repeating-linear-gradient(45deg,var(--mg-paper-2) 0 8px,var(--mg-ink) 8px 16px)}
.dz-ratio b{font-size:var(--mg-fs-xs);color:var(--mg-black)}
.dz-ratio.dz-note{max-width:220px}
.dz-icons{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mg-space-20);margin:var(--mg-space-16) 0}
.dz-icons figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--mg-space-6);font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.dz-icons svg{stroke:var(--mg-black);stroke-width:1.5}

/* 미리보기 휴대폰(고객 값으로 그림). 옆 칸과 휴대폰용 옆 창이 함께 쓴다. */
.dz-fig{display:flex;flex-direction:column;gap:var(--mg-space-6);margin:var(--mg-space-8) 0 0}
.dz-fig figcaption{font-size:var(--mg-fs-xs);color:var(--mg-gray)}
.dz-phone{position:relative;width:360px;max-width:100%;height:480px;overflow:hidden;border:6px solid var(--mg-black-4);border-radius:24px;background:var(--mg-black);color:var(--mg-ink);font-family:var(--mg-font);box-shadow:var(--mg-shadow-2)}
.dz-pscroll{position:absolute;inset:0;overflow:auto;scrollbar-width:none}
.dz-phone .h-bar,.dz-phone .m-bar{display:flex;align-items:center;gap:2px;height:56px;padding:0 6px 0 var(--mg-space-16)}
.dz-phone .h-bar{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--mg-black) 92%,transparent)}
.dz-phone .m-bar{border-bottom:1px solid color-mix(in srgb,var(--mg-white) 10%,transparent)}
.dz-phone .h-logo{flex:1;font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-heavy);letter-spacing:.14em}
.dz-phone .h-hero{padding:var(--mg-space-40) var(--mg-space-20) var(--mg-space-32);background:radial-gradient(120% 90% at 80% 0%,color-mix(in srgb,var(--mg-black-4) 90%,var(--mg-white)) 0,var(--mg-black) 70%)}
.dz-phone .h-hero .eb{margin-bottom:var(--mg-space-8);font-size:var(--mg-fs-xs);font-weight:var(--mg-weight-semibold);color:var(--mg-red)}
.dz-phone .h-hero h3{margin:0 0 var(--mg-space-12);font-size:var(--mg-fs-4xl);font-weight:var(--mg-weight-bold);line-height:var(--mg-leading-tight);letter-spacing:-.02em}
.dz-phone .h-hero p{margin:0 0 var(--mg-space-24);font-size:var(--mg-fs-md);line-height:var(--mg-leading-body);color:var(--mg-muted)}
.dz-phone .h-hero .acts{display:flex;flex-wrap:wrap;gap:var(--mg-space-8)}
.dz-phone .h-sec{padding:var(--mg-space-32) var(--mg-space-20)}
.dz-phone .h-sec>h4{margin:0 0 var(--mg-space-16);font-size:var(--mg-fs-xl);font-weight:var(--mg-weight-bold)}
.dz-phone .h-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--mg-space-12)}
.dz-phone .h-grid .mg-card .ph{aspect-ratio:1}
.dz-phone .h-fab{position:absolute;right:var(--mg-space-16);bottom:var(--mg-space-24);z-index:3;border-radius:var(--mg-radius-pill);box-shadow:var(--mg-shadow-2)}
.dz-phone .m-wrap{display:flex;flex-direction:column;gap:var(--mg-space-16);padding:var(--mg-space-24) var(--mg-space-16)}
.dz-phone .m-wrap h3{margin:0;font-size:var(--mg-fs-2xl);font-weight:var(--mg-weight-bold)}
.dz-phone .m-card{display:flex;flex-direction:column;gap:var(--mg-space-8);padding:var(--mg-space-16);background:var(--mg-black-3);border-radius:var(--mg-radius-lg);box-shadow:var(--mg-shadow-1)}
.dz-phone .m-card .t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dz-phone .m-card b{font-size:var(--mg-fs-md)}
.dz-phone .m-card .d{font-size:var(--mg-fs-sm);color:var(--mg-muted)}
.dz-phone .m-alert{display:flex;align-items:flex-start;gap:var(--mg-space-8);padding:var(--mg-space-12);font-size:var(--mg-fs-xs);line-height:var(--mg-leading-snug);background:var(--mg-red-soft);border:1px solid var(--mg-red-line);border-radius:var(--mg-radius-md)}
.dz-phone .m-alert svg{width:18px;height:18px;flex:none;stroke:var(--mg-red)}
.dz-phone .q-top{display:flex;align-items:center;justify-content:space-between;padding:var(--mg-space-12) var(--mg-space-16);font-size:var(--mg-fs-xs);color:var(--mg-muted)}
.dz-phone .q-top svg{width:20px;height:20px}
.dz-phone .q-steps{display:flex;gap:var(--mg-space-6);padding:0 var(--mg-space-16)}
.dz-phone .q-steps span{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,var(--mg-white) 15%,transparent)}
.dz-phone .q-steps span.on{background:var(--mg-red)}
.dz-phone .q-door{width:140px;height:210px;margin:var(--mg-space-20) auto var(--mg-space-16);border:3px solid color-mix(in srgb,var(--mg-gray) 55%,var(--mg-black));border-radius:var(--mg-radius-sm);--dz-door:color-mix(in srgb,var(--mg-black-4) 90%,var(--mg-white));--dz-seam:color-mix(in srgb,var(--mg-black-4) 80%,var(--mg-white));background:linear-gradient(90deg,var(--dz-door) 0 32%,var(--dz-seam) 32% 34%,var(--dz-door) 34% 66%,var(--dz-seam) 66% 68%,var(--dz-door) 68%);box-shadow:var(--mg-shadow-3)}
.dz-phone .q-name{margin:0;text-align:center;font-size:var(--mg-fs-2xl);font-weight:var(--mg-weight-bold)}
.dz-phone .q-desc{margin:var(--mg-space-4) 0 var(--mg-space-16);text-align:center;font-size:var(--mg-fs-sm);color:var(--mg-muted)}
.dz-phone .q-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--mg-space-8);padding:0 var(--mg-space-16) 180px}
.dz-phone .q-opt{padding:var(--mg-space-8) var(--mg-space-16);font-size:var(--mg-fs-sm);border:1px solid color-mix(in srgb,var(--mg-white) 22%,transparent);border-radius:var(--mg-radius-pill)}
.dz-phone .q-opt.on{border-color:var(--mg-red);background:var(--mg-red-soft);font-weight:var(--mg-weight-semibold)}
.dz-phone .mg-sheet{z-index:4}
/* 휴대폰용 미리보기 옆 창 */
.dz-pv{display:grid;justify-items:center;padding-top:var(--mg-space-12)}
.dz-pv .dz-fig{width:min(360px,100%)}
.dz-pv .dz-phone{width:100%;height:min(560px,calc(100dvh - 210px))}

@media(max-width:800px){
 .dz{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 .dz-body{grid-template-columns:minmax(0,1fr)}
 .dz-side{display:none}
 .dz [data-act="preview"]{display:inline-flex}
 /* 공개·미리보기 버튼은 엄지가 닿는 아래에 붙인다 */
 .dz-top .ui-toolbar-right{position:fixed;inset:auto 0 0;z-index:30;margin:0;flex-wrap:nowrap;padding:var(--mg-space-10) var(--mg-space-16) calc(var(--mg-space-10) + env(safe-area-inset-bottom,0px));background:var(--mg-white);border-top:1px solid var(--mg-paper-2)}
 .dz-top .ui-toolbar-right .ui-btn{--h:44px;flex:1 1 auto;padding:0 var(--mg-space-8)}
 .dz-row{grid-template-columns:56px minmax(0,1fr) 32px;gap:var(--mg-space-10)}
 .db-layout .dz .ui-field .dz-ed input[type=range]{flex:1;min-width:120px}
 .dz-parts{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.dz-live *,.dz-live *::before,.dz-live *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}