/* 위티프렌즈 사무실 — 푸딩 HTML 시안 보기 (viewer.js · 접두사 vw-)
   화면 전체를 덮는 dialog. 색은 styles.css 토큰을 그대로 써서 라이트/다크가 같이 바뀌어요. */
.vw-dialog{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--bg);color:var(--ink);overflow:hidden}
.vw-dialog::backdrop{background:rgba(10,8,7,.82)}
.vw-dialog[open]{display:flex;flex-direction:column}
.vw-bar{flex:none;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  background:var(--surface);border-bottom:1px solid var(--line)}
.vw-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vw-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-sub{font-size:12px;color:var(--ink-3)}
.vw-close{flex:none}
.vw-tools{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left));background:var(--surface)}
.vw-seg{flex:none;width:min(420px,100%);grid-template-columns:repeat(4,minmax(0,1fr))}
.vw-hint{margin:0;font-size:12px;color:var(--ink-3)}
.vw-hint[hidden]{display:none}
.vw-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:var(--surface-2)}
.vw-fit{position:relative;flex:none;overflow:hidden;background:#fff;border-radius:6px;box-shadow:0 0 0 1px var(--line),0 14px 34px -14px var(--shadow-strong)}
.vw-frame{position:absolute;top:0;left:0;transform-origin:0 0}
.vw-iframe{display:block;width:100%;height:100%;border:0;background:#fff}
/* 폰: 기기 테두리 느낌 (그림자로 그려서 크기 계산에 안 끼어요) */
.vw-dialog[data-frame="phone"] .vw-fit{border-radius:calc(46px * var(--vw-scale,1));box-shadow:0 0 0 6px var(--charcoal),0 0 0 7px var(--line),0 18px 40px -12px var(--shadow-strong)}
/* 원본: 무대를 가득 */
.vw-dialog[data-frame="none"] .vw-fit{width:100%;height:100%;border-radius:0;box-shadow:none}
.vw-dialog[data-frame="none"] .vw-frame{position:static;width:100%;height:100%;transform:none}
.vw-notice{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:var(--surface);color:var(--ink)}
.vw-dialog:not([data-frame="none"]) .vw-notice{transform:scale(calc(1 / var(--vw-scale,1)));transform-origin:0 0;width:calc(100% * var(--vw-scale,1));height:calc(100% * var(--vw-scale,1))}
.vw-notice-title{margin:0;font-weight:700;font-size:15px;word-break:keep-all}
.vw-notice-text{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3);word-break:keep-all;max-width:320px}
@media (prefers-reduced-motion: no-preference){.vw-dialog[open]{animation:vwIn .2s ease-out}}
@keyframes vwIn{from{opacity:0}to{opacity:1}}