/* RION de MIKA 구성기 — 공용 패널 스타일 (2D·3D 1벌, core.js mountPanel 과 짝) */
:root,body{
  --ink:#1c1c1a; --ink-2:#6b665a; --ink-3:#8f8a80;
  --line:#e4e1db; --line-2:#d6d2c9; --raised:#faf9f6; --canvas:#f4f2ee; --panel:#fff;
  --pop:#b8471a; --ok:#2f6b3e;
  --tap:36px; --chip:28px; --gap:6px;
  --fs:13px; --fs-h:13px; --fs-hint:12px; --fs-cta:15px;
  --panel-w:420px; --dock-h:72px; --hdr:55px;
  --peek:120px; --sheet-full:80dvh; --sheet-half:50dvh;
  --ease:cubic-bezier(.32,.72,0,1); --t:160ms;
}
body[data-coarse="1"]{--tap:44px;--chip:40px;--gap:8px;--fs:15px;--fs-h:15px;--fs-hint:13px;--fs-cta:16px}
@media (max-width:767px){
  body{--tap:48px;--chip:44px;--gap:8px;--peek:104px;--sheet-full:70dvh;--sheet-half:48dvh;--dock-h:64px}
  header .sub{display:none}
  .chips{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
  .chip{width:100%;height:auto;aspect-ratio:1}
  .chips .chip:nth-child(3){margin-right:0}
  .chips .chip:nth-child(3)::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  :root{--t:0ms}
  .panel,.stage,#stage canvas,.prodwrap{transition:none!important}
}
body[data-layout=rail]{--panel-w:384px}

/* ---------- 패널 골격 ---------- */
.panel{
  width:var(--panel-w);flex:none;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;font-size:var(--fs);
  max-height:calc(100vh - var(--hdr));
}
.sheethead{flex:none;background:var(--panel);border-bottom:1px solid var(--line)}
.handle{display:none;width:44px;height:5px;border-radius:3px;background:var(--line-2);margin:9px auto 3px}
.stepnav{display:grid;grid-template-columns:repeat(4,1fr);height:48px}
.stepnav button{
  border:0;border-radius:0;background:none;min-height:0;font-weight:600;color:var(--ink-2);
  position:relative;font-size:var(--fs-hint);padding:0 4px;cursor:pointer;font-family:inherit;
}
.stepnav button .no{font-weight:800;margin-right:3px}
.stepnav button.cur{color:var(--ink)}
.stepnav button.cur::after{content:'';position:absolute;left:14%;right:14%;bottom:0;height:2px;background:var(--ink)}
.stepnav button.done .no::after{content:'✓';color:var(--ok);margin-left:3px;font-size:.85em}
.steps{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:16px 18px calc(var(--dock-h) + 18px);display:flex;flex-direction:column;gap:24px;
}
.step{display:flex;flex-direction:column;gap:10px}
.panel h2{font-size:var(--fs-h);font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:8px;letter-spacing:-.01em}
.panel h2 .no{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:11px;font-weight:800;flex:none;align-self:center;
}
.panel h2 .live{font-weight:500;color:var(--ink-2);margin-left:auto;text-align:right;font-size:var(--fs-hint)}
.row{display:flex;flex-wrap:wrap;gap:var(--gap)}
.panel button{
  font:inherit;font-size:var(--fs);min-height:var(--tap);border:1px solid var(--line);background:var(--raised);
  border-radius:10px;padding:0 14px;color:var(--ink);cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t),opacity var(--t);
}
.panel button:active:not(:disabled){transform:scale(.97)}
@media (hover:hover){.panel button:hover:not(:disabled):not(.on){border-color:var(--line-2);background:#fff}}
.panel button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.panel button:disabled{opacity:.4;cursor:not-allowed}
.panel button:focus-visible,#dockBar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.seg{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.seg button{padding:0;border-radius:8px;font-weight:600}
.chips{gap:calc(var(--gap) + 2px);align-items:center}
.chip{
  width:var(--chip);height:var(--chip);min-height:0;border-radius:50%;padding:0;position:relative;
  border:1px solid rgba(0,0,0,.14);
}
.chip[data-l=lt]{border-color:rgba(0,0,0,.3)}
.chip.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink);border-color:transparent}
.chips .chip:nth-child(3){margin-right:10px}
.chips .chip:nth-child(3)::after{content:'';position:absolute;right:calc(-8px - var(--gap)/2);top:12%;height:76%;width:1px;background:var(--line-2)}
.chip:disabled::before{
  content:'';position:absolute;inset:46%;background:rgba(0,0,0,.4);border-radius:1px;
  transform:rotate(45deg) scaleX(7);
}
.strip{display:flex;gap:var(--gap)}
.strip button{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:6px 4px;min-height:calc(var(--tap) + 10px);line-height:1;
}
.strip button b{font-size:12px;font-weight:800;color:var(--ink-2)}
.strip button.cur{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#fff}
.strip button.cur b{color:var(--pop)}
.mini{display:flex;width:36px;height:12px;border:1px solid rgba(0,0,0,.2);border-radius:2px;overflow:hidden;gap:1px;background:#fff;flex:none}
.mini i{display:block;height:100%;flex:none}
.mini i.rem{background:repeating-linear-gradient(45deg,#d9d5cc 0 2px,#fff 2px 4px)}
.mini i.fn{background:#e9e6df;position:relative}
.mini i.fn::after{content:'';position:absolute;inset:30%;border-radius:50%;border:1.5px solid #9a968c}
.presets button{display:flex;align-items:center;gap:8px;padding:0 12px}
.presets .mini{width:30px;height:11px}
.presets .mini i{background:#b8b4aa}
.presets button.on .mini{border-color:rgba(255,255,255,.5);background:transparent}
.presets button.on .mini i{background:#fff}
.hint{font-size:var(--fs-hint);color:var(--ink-2);line-height:1.55}
.sub{font-size:var(--fs-hint);font-weight:700;color:var(--ink-2);letter-spacing:.02em;margin-top:2px}
details.adv{border:1px dashed var(--line-2);border-radius:10px;padding:0 12px}
details.adv summary{
  cursor:pointer;font-size:var(--fs-hint);font-weight:700;color:var(--ink-2);min-height:var(--tap);
  display:flex;align-items:center;gap:6px;list-style:none;user-select:none;
}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:'▸';font-size:12px;transition:transform var(--t)}
details.adv[open] summary::before{transform:rotate(90deg)}
details.adv .row{margin-bottom:10px}
.tools{display:grid;grid-template-columns:1fr 1fr}
.tools button{font-size:calc(var(--fs) - 1px);padding:0 8px}
.tools button[role=switch][aria-checked=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.next button{width:100%;background:#fff;border-color:var(--ink);font-weight:700;color:var(--ink)}
body[data-layout=all] .next,body[data-layout=all] .stepnav,body[data-layout=all] .handle{display:none}
body[data-layout=all] .tools{grid-template-columns:repeat(4,1fr)}
body[data-layout=all] .steps{gap:18px}
body:not([data-layout=all]) .step:not(.cur){display:none}
.devonly{display:none}
body[data-mode=dev] .devonly{display:block}
.count{
  background:var(--raised);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:var(--fs-hint);line-height:1.7;color:var(--ink-2);
}
.count b{color:var(--ink)}
#studioBox{display:flex;flex-direction:column;gap:10px}
#studioBox.hidden{display:none}

/* ---------- 결과 독 (항상 고정) ---------- */
#dockBar{
  position:fixed;right:0;bottom:0;width:var(--panel-w);height:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));
  background:var(--panel);border-top:1px solid var(--line);border-left:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 16px env(safe-area-inset-bottom,0px);z-index:30;
  font-family:inherit;
}
#dockBar .prog{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.segs{display:flex;gap:3px;height:6px}
.segs button{flex:1;min-height:0;height:6px;padding:0;border:0;border-radius:2px;background:var(--line-2);transition:background var(--t);cursor:pointer}
.segs button.ok{background:var(--ink)}
.segs button.cur{outline:1.5px solid var(--pop);outline-offset:1.5px}
.ptext{font-size:var(--fs-hint);font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptext.ok{color:var(--ok)}
.psum{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#quoteBtn{
  font:inherit;font-size:var(--fs-cta);font-weight:700;padding:0 22px;min-height:48px;border-radius:12px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);cursor:pointer;white-space:nowrap;flex:none;
  transition:opacity var(--t),transform var(--t);
}
#quoteBtn:active:not(:disabled){transform:scale(.97)}
#quoteBtn:disabled{opacity:.3;cursor:not-allowed}

/* ---------- 시트 레이아웃 (세로 태블릿·모바일) ---------- */
body[data-layout=sheet] .wrap{display:block;height:auto;min-height:0}
body[data-layout=sheet] .stage,body[data-layout=sheet] #stage{
  height:calc(100dvh - var(--hdr) - var(--dock-h) - var(--peek));min-height:0;
  padding-bottom:var(--cover,0px);transition:padding-bottom 320ms var(--ease);
}
body[data-layout=sheet] .panel{
  position:fixed;left:0;right:0;bottom:var(--dock-h);height:var(--sheet-full);max-height:none;width:auto;
  border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;
  box-shadow:0 -10px 34px rgba(20,15,10,.12);transform:translateY(var(--sheet-y,0px));
  transition:transform 320ms var(--ease);z-index:25;
}
body[data-layout=sheet] .panel.dragging{transition:none}
body[data-layout=sheet] .sheethead{touch-action:none;cursor:grab;border-radius:18px 18px 0 0}
body[data-layout=sheet] .handle{display:block}
body[data-layout=sheet] #dockBar{left:0;width:auto;border-left:0}
body[data-layout=sheet] #stage canvas{transition:transform 320ms var(--ease)}

/* ---------- 공유 시트 ---------- */
#shareDlg{
  margin:auto;border:0;border-radius:16px;padding:0;width:min(92vw,420px);background:#fff;color:var(--ink);
  box-shadow:0 30px 60px rgba(20,15,10,.25);font-family:inherit;
}
#shareDlg::backdrop{background:rgba(20,18,14,.45)}
#shareDlg .in{padding:24px 24px 20px;display:flex;flex-direction:column;gap:14px}
#shareDlg h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
#shareDlg .sum{font-size:13px;color:var(--ink-2);line-height:1.6}
#shareDlg .code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.06em;
  background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:12px 14px;word-break:break-all;
}
#shareDlg .url{font-size:11.5px;color:var(--ink-3);word-break:break-all}
#shareDlg .acts{display:flex;gap:8px;flex-wrap:wrap}
#shareDlg .acts button{
  font:inherit;font-size:14px;font-weight:700;min-height:44px;padding:0 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--raised);color:var(--ink);flex:1 1 auto;
}
#shareDlg .acts button.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
#shareDlg .note{font-size:11.5px;color:var(--ink-2)}

/* ---------- 스테이지 캡션·선택 표시 (공용 토큰) ---------- */
.caption{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;color:var(--ink-2);
  background:rgba(255,255,255,.78);padding:5px 12px;border-radius:99px;white-space:nowrap;pointer-events:none;z-index:5;
}
body[data-layout=sheet] .caption{bottom:calc(var(--cover,0px) + 10px)}