/* kioskskin — 공개 뷰어. apple-design 절제 원칙 적용 (2026-08-05 톤다운):
   잉크 그레이 + 뮤트 블루 단일 틴트, 웨이트는 700 상한, 색 블록 대신 소프트 필,
   그림자·글로우 절감, 크기별 트래킹. 레이아웃 치수는 이전과 동일. */
:root{
  --ink:#3a3f47;                        /* 본문 잉크 — 검정 대신 부드러운 차콜 */
  --ink-strong:#2c313a;                 /* 제목 */
  --ink-soft:#767d89;                   /* 보조 텍스트 */
  --ink-faint:#9aa1ac;                  /* 힌트·라벨 */
  --tint:#5b7ca6;                       /* 절제된 블루 (기존 #2a6cf0 대체) */
  --tint-deep:#4b6a92;
  --tint-soft:rgba(91,124,166,.11);     /* 소프트 필 (선택 상태) */
  --line:#e2e5eb;                       /* 헤어라인 */
  --fill:rgba(58,63,71,.055);           /* 중립 소프트 필 (호버) */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink)}
#app{position:fixed;inset:0;display:flex;background:radial-gradient(120% 90% at 50% 6%,#f6f7f9 0%,#eceef2 44%,#dcdfe6 100%)}
canvas{display:block;touch-action:none}

#loading{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#eceef2;color:var(--ink-soft);font-size:13px;font-weight:500}

/* ── 사이드메뉴 ─────────────────────────────────────────── */
#side{position:relative;z-index:20;width:264px;flex:none;display:flex;flex-direction:column;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-right:1px solid rgba(255,255,255,.6);box-shadow:4px 0 20px rgba(30,34,44,.05)}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid var(--line)}
.brand-mark{flex:none;width:34px;height:34px;border-radius:10px;background:#3c424d;position:relative;box-shadow:0 2px 6px rgba(44,49,58,.18)}
.brand-mark::after{content:"";position:absolute;left:8px;top:6px;width:18px;height:16px;border-radius:3px;background:linear-gradient(150deg,#8ba6c6,#5b7ca6)}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt b{font-size:14.5px;font-weight:700;letter-spacing:.01em;color:var(--ink-strong)}
.brand-txt small{font-size:10px;color:var(--ink-faint);font-weight:500}

#custList{flex:1;overflow-y:auto;padding:10px 10px 14px}
.cust-label{font-size:10px;font-weight:600;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase;padding:6px 8px 7px}
.cust{width:100%;display:flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;
  padding:10px 10px;border-radius:10px;font-size:13px;font-weight:500;color:var(--ink);text-align:left;transition:background .14s}
.cust:hover{background:var(--fill)}
.cust.on{background:var(--tint-soft);color:var(--tint-deep);font-weight:600}
.cust .cnt{margin-left:auto;flex:none;font-size:10px;font-weight:600;color:var(--ink-faint);background:rgba(58,63,71,.07);padding:2px 7px;border-radius:20px}
.cust.on .cnt{color:var(--tint-deep);background:rgba(91,124,166,.16)}

.skins{margin:4px 4px 8px;padding:5px;background:rgba(58,63,71,.035);border-radius:12px}
.skin-item{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;cursor:pointer;
  padding:6px;border-radius:9px;text-align:left;transition:background .14s,box-shadow .14s}
.skin-item:hover{background:rgba(255,255,255,.85)}
.skin-item.on{background:#fff;box-shadow:0 2px 8px rgba(30,34,44,.08)}
.skin-item img{flex:none;width:34px;height:52px;object-fit:cover;border-radius:5px;background:#e2e5eb}
.skin-item .st{display:flex;flex-direction:column;gap:1px;min-width:0}
.skin-item .st b{font-size:12px;color:var(--ink);font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-item .st small{font-size:9.5px;color:var(--ink-faint);font-weight:500}
.skin-item.on .st b{color:var(--tint-deep);font-weight:700}
.share-btn{width:calc(100% - 8px);margin:2px 4px 6px;border:1px dashed #ccd2db;background:transparent;color:var(--ink-soft);
  font-size:10.5px;font-weight:600;padding:7px;border-radius:9px;cursor:pointer;transition:border-color .14s,color .14s}
.share-btn:hover{border-color:var(--tint);color:var(--tint-deep)}
.no-skin{font-size:11px;color:var(--ink-faint);font-weight:500;text-align:center;padding:10px 6px}

.side-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--line);
  font-size:10px;color:#adb3bd;font-weight:500}
.side-foot a{color:#adb3bd;text-decoration:none;padding:4px 8px;border-radius:7px;transition:color .14s,background .14s}
.side-foot a:hover{color:var(--tint-deep);background:var(--tint-soft)}

/* 모바일 사이드 토글 */
#sideToggle{display:none;position:absolute;z-index:30;top:12px;left:12px;width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.8);backdrop-filter:blur(12px);cursor:pointer;
  box-shadow:0 4px 14px rgba(30,34,44,.1);flex-direction:column;align-items:center;justify-content:center;gap:4px}
#sideToggle span{width:16px;height:1.5px;border-radius:2px;background:var(--ink-strong)}
#sideOverlay{display:none;position:absolute;inset:0;z-index:15;background:rgba(44,49,58,.28)}

/* ── 3D 스테이지 ────────────────────────────────────────── */
#stage{position:relative;flex:1;min-width:0}

.panel{position:absolute;top:14px;right:14px;z-index:10;background:rgba(255,255,255,.76);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.6);
  border-radius:16px;padding:14px 14px 13px;width:246px;box-shadow:0 8px 24px rgba(30,34,44,.1);color:var(--ink)}
.panel h1{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel .sub{font-size:10.5px;color:var(--ink-soft);font-weight:500;margin:2px 0 12px}
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.minbtn{flex:none;width:24px;height:24px;border-radius:8px;border:1px solid #d8dbe2;background:#fff;color:var(--ink);font-size:15px;font-weight:500;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .14s,background .14s}
.minbtn:hover{border-color:#adb3bd;background:#f4f5f8}
.panel.min{width:auto;padding:9px 11px;max-width:200px}
.panel.min .sub,.panel.min .grp,.panel.min>.row{display:none}
.panel.min h1{font-size:12.5px}
.grp{margin-bottom:11px}
.grp>label{display:block;font-size:10px;font-weight:600;color:var(--ink-faint);margin-bottom:6px;letter-spacing:.05em;text-transform:uppercase}
.grp>label small{text-transform:none;font-weight:500;color:#b3b8c2;letter-spacing:0}
.row{display:flex;gap:6px}
button.seg{flex:1;border:1px solid #d8dbe2;background:#fff;color:var(--ink);font-size:11.5px;font-weight:500;
  padding:8px 4px;border-radius:9px;cursor:pointer;transition:border-color .14s;letter-spacing:-.005em}
button.seg:hover{border-color:#adb3bd}
.foldrow{display:flex;gap:6px;margin-bottom:8px}
button.act{flex:1;border:1px solid var(--tint);background:var(--tint);color:#fff;font-size:11.5px;font-weight:600;
  padding:9px 4px;border-radius:9px;cursor:pointer;transition:filter .14s,transform .1s}
button.act.ghost{background:#fff;color:var(--tint-deep)}
button.act:hover{filter:brightness(1.04)}
button.act:active,button.seg:active,.minbtn:active{transform:scale(.97)}
input[type=range]{width:100%;accent-color:var(--tint);margin-top:2px}
.rl{display:flex;justify-content:space-between;font-size:9.5px;color:var(--ink-faint);font-weight:500;margin-top:1px}
.upgrp{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.dlgrp{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);margin-bottom:0;display:flex;flex-direction:column;gap:7px}
.dlbtn{display:flex;align-items:center;gap:10px;text-decoration:none;padding:9px 12px;border-radius:11px;
  background:var(--tint);color:#fff;box-shadow:0 3px 10px rgba(75,106,146,.22);
  transition:transform .12s,box-shadow .12s,filter .12s}
.dlbtn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 5px 14px rgba(75,106,146,.28)}
.dlbtn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 8px rgba(75,106,146,.22)}
.dlbtn .ico{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:rgba(255,255,255,.18)}
.dlbtn .txt{display:flex;flex-direction:column;font-size:12px;font-weight:600;letter-spacing:-.005em;line-height:1.25;min-width:0}
.dlbtn .txt small{font-size:9px;font-weight:500;opacity:.8;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:500;color:var(--ink)}
.sw{width:40px;height:23px;border-radius:20px;background:#d3d7de;position:relative;cursor:pointer;transition:background .16s;flex:none}
.sw.on{background:var(--tint)}
.sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .16s;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.sw.on::after{left:19.5px}

.badge{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:10;background:rgba(52,58,68,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.92);font-size:11px;font-weight:500;padding:8px 15px;border-radius:30px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.badge span{color:#b9cbe2;font-weight:600}
.ctrlhint{position:absolute;bottom:16px;right:16px;z-index:10;font-size:10.5px;color:var(--ink-faint);text-align:right;line-height:1.6}

.empty{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* hidden 속성이 author display 규칙에 지지 않도록 (UA [hidden]은 특이도에서 밀린다) */
.empty[hidden],.dlgrp[hidden]{display:none}
.empty-box{display:flex;flex-direction:column;gap:6px;text-align:center;background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:16px;padding:26px 34px;
  box-shadow:0 8px 24px rgba(30,34,44,.08)}
.empty-box b{font-size:14px;font-weight:600;color:var(--ink-strong)}
.empty-box span{font-size:11.5px;color:var(--ink-soft);font-weight:500}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,10px);z-index:90;background:rgba(52,58,68,.9);
  color:#fff;font-size:12px;font-weight:500;padding:10px 18px;border-radius:26px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width:900px){
  #side{position:absolute;inset:0 auto 0 0;transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,.8,.24,1)}
  body.side-open #side{transform:none}
  body.side-open #sideOverlay{display:block}
  #sideToggle{display:flex}
}
@media (max-width:540px){
  .panel{width:208px;top:10px;right:10px;padding:12px}
  .ctrlhint{display:none}
  .badge{font-size:10px;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
}

/* ── 접근성 배려 ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #side{transition:none}
  .dlbtn,.dlbtn:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  #side,.panel,.empty-box{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .badge{background:#343a44;backdrop-filter:none;-webkit-backdrop-filter:none}
}