/* v21 관찰 화면 UX/UI 개선 — 상단바·좌측 캐릭터 레일·우측 아이콘 레일+서랍·하단 알림만 다룸.
   도면(단면도)·하늘·지면·가구·캐릭터 그림은 건드리지 않고, 색은 선택한 색감(--vp-bg/--vp-line)에서 가져와 탁하게 눌러 씀. */
#viv{--vx-bg:color-mix(in srgb,var(--vp-bg,#efeeea) 58%,#fbfaf7);--vx-card:color-mix(in srgb,var(--vp-bg,#f4f3ee) 22%,#fff);--vx-ink:color-mix(in srgb,var(--vp-line,#3a3a38) 55%,#2b2b2a);--vx-mut:color-mix(in srgb,var(--vx-ink) 55%,#fff);--vx-ln:color-mix(in srgb,var(--vp-line,#9a9a94) 28%,#fff);--vx-acc:color-mix(in srgb,var(--vp-line,#6d6d68) 72%,#fff)}
/* ── 상단 전체 바 ── */
body.mode-viv #top{box-shadow:none;border-bottom:1px solid var(--vx-ln,#d9d8d2);background:#fbfaf7;padding:7px 14px;gap:8px}
body.mode-viv #top .logo{font-style:normal;letter-spacing:.06em;font-size:14px;font-weight:700}
body.mode-viv .vnav{display:flex;gap:2px;margin-right:auto;background:#eeede8;border-radius:999px;padding:3px}
body.mode-viv .vnav button{white-space:nowrap;border:0;border-radius:999px;background:transparent;padding:5px 14px;font-weight:600;font-size:13px;color:#55554f}
body.mode-viv .vnav button.on{background:#fff;color:#222;box-shadow:0 1px 3px rgba(0,0,0,.12)}
body.mode-viv .vnav .vjoin{margin-left:6px;border:1px solid #cfcec7;background:#fff}
body.mode-viv #msg{display:none}
/* ── 레이아웃 ── */
#viv .vv-wrap{position:relative;grid-template-columns:78px 1fr 54px;background:var(--vx-bg)}
#viv .vv-side,#viv .vv-detail{background:transparent;border:0}
#viv .vv-main{background:transparent;padding:4px 6px}
/* ── 장면 위쪽 막대 ── */
#viv .vv-bar{gap:6px;padding:2px 2px 8px;flex-wrap:wrap}
#viv #vvHouse{font-size:15px;font-weight:700;color:var(--vx-ink);letter-spacing:.01em}
#viv .vv-bar button{border:1px solid var(--vx-ln);background:var(--vx-card);border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--vx-ink)}
#viv .vv-bar button:hover{background:#fff}
#viv #vvRefresh{font-size:0;width:30px;height:30px;padding:0}#viv #vvRefresh::before{content:'⟳';font-size:16px;line-height:28px}
#viv #vvClock{font-size:12px;color:var(--vx-mut);background:var(--vx-card);border:1px solid var(--vx-ln);border-radius:999px;padding:3px 10px}
#viv .vv-pal{position:relative;margin-right:2px}#viv .vv-pal small{cursor:pointer;color:var(--vx-mut);font-size:12px}
#viv .vv-pal button{display:none;width:20px;height:20px}#viv .vv-pal button.on{display:inline-block}
#viv .vv-pal.vx-open{background:var(--vx-card);border:1px solid var(--vx-ln);border-radius:999px;padding:3px 8px}#viv .vv-pal.vx-open button{display:inline-block}
/* ── 좌측: 캐릭터 레일(아이콘+이름만) ── */
#viv .vv-side{padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;overflow:auto}
#viv .vv-side h3{border:0;margin:0;font-size:10.5px;font-style:normal;color:var(--vx-mut);text-transform:none;letter-spacing:0;padding:0;text-align:center}
#viv .vv-side h3 small{display:block;font-size:10.5px}
#viv #vvChars{flex-direction:column;gap:4px;margin:0;align-items:center;width:100%}
#viv .vv-chip{flex-direction:column;gap:2px;width:68px;padding:5px 2px;border:1px solid transparent;border-radius:14px;background:transparent;text-align:center;position:relative}
#viv .vv-chip:hover{background:var(--vx-card)}
#viv .vv-chip.on{background:#fff;border-color:var(--vx-acc);box-shadow:0 1px 6px rgba(0,0,0,.08)}
#viv .vv-chip img,#viv .vv-chip .vv-ini{width:46px;height:46px;border-radius:50%;background:var(--vx-card);border:1px solid var(--vx-ln);object-fit:contain;padding:2px}
#viv .vv-chip b{font-size:11.5px;font-weight:600;max-width:64px;color:var(--vx-ink)}
#viv .vv-chip small{display:none}
#viv #vvAdd{width:42px;height:42px;padding:0;border-radius:50%;font-size:0;background:var(--vx-card);color:var(--vx-ink);border:1px dashed var(--vx-acc)}
#viv #vvAdd::before{content:'＋';font-size:20px;line-height:40px}#viv #vvAdd:disabled{opacity:.4}
#viv .vv-side>.vv-note{display:none}
#viv .vv-side .hint{font-size:11px;text-align:center}
/* ── 우측: 아이콘 레일 + 서랍 ── */
.vx-rail{grid-column:3;display:flex;flex-direction:column;gap:4px;padding:8px 5px;align-items:center}
.vx-rail button{width:44px;height:50px;padding:3px 0 0;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--vx-ink);font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:1px}
.vx-rail button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vx-rail button:hover{background:var(--vx-card)}.vx-rail button.on{background:#fff;border-color:var(--vx-acc);box-shadow:0 1px 6px rgba(0,0,0,.08)}
#viv .vv-detail{display:none;position:absolute;right:58px;top:46px;bottom:8px;width:318px;z-index:6;padding:0;overflow:hidden;background:var(--vx-card);border:1px solid var(--vx-ln);border-radius:16px;box-shadow:0 10px 30px rgba(40,40,35,.16);flex-direction:column}
#viv .vv-wrap.vx-open .vv-detail{display:flex}
.vx-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--vx-ln)}
.vx-head h3{margin:0;border:0;padding:0;font-size:15px;font-style:normal;text-transform:none;letter-spacing:0;flex:1;min-width:0;color:var(--vx-ink)}
.vx-head .vv-pic{width:46px;height:46px;margin:0;border-radius:50%;border:1px solid var(--vx-ln);flex:none;background:#fff;overflow:hidden}
.vx-head .vv-pic span{font-size:0}.vx-head .vv-pic span::before{content:'?';font-size:16px;color:var(--vx-mut)}
.vx-x{width:28px;height:28px;padding:0;border:0;background:transparent;font-size:18px;color:var(--vx-mut)}
.vx-body{flex:1;overflow:auto;padding:10px 12px 14px}
.vx-pane{display:none}#viv .vv-wrap[data-tab=act] .vx-pane[data-t=act],#viv .vv-wrap[data-tab=rel] .vx-pane[data-t=rel],#viv .vv-wrap[data-tab=mov] .vx-pane[data-t=mov],#viv .vv-wrap[data-tab=log] .vx-pane[data-t=log],#viv .vv-wrap[data-tab=more] .vx-pane[data-t=more]{display:block}
.vx-pane h4{font-style:normal;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--vx-ink);border:0;margin:14px 0 6px}
.vx-pane .hint,.vx-pane dt{color:var(--vx-mut)}
.vx-pane .vv-wishes{display:flex;flex-direction:column;gap:6px}
.vx-pane .vv-wishes button{width:100%;text-align:left;border:1px solid var(--vx-ln);background:#fff;border-radius:10px;padding:8px 12px;font-size:13px}
.vx-pane .vv-wishes button:hover:not(:disabled){border-color:var(--vx-acc)}.vx-pane .vv-wishes button:disabled{opacity:.45}
.vx-pane .vv-phrase{font-size:13px;background:#fff;border:1px solid var(--vx-ln);border-radius:12px;padding:8px 10px}
.vx-pane .vv-why{display:none}
.vx-empty{color:var(--vx-mut);font-size:12.5px;padding:8px 2px}
#viv .vv-detail button,#viv .vv-detail select{border-color:var(--vx-ln);border-radius:10px}
#viv .vv-btns button{background:#fff}
#viv .vv-btns button.vv-primary{background:var(--ink);color:#fff}#viv .vv-btns button.vv-primary:hover{background:#333}
/* ── 하단 알림 ── */
#viv #vvNote{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;max-width:min(560px,calc(100vw - 28px));margin:0;padding:10px 40px 10px 16px;border-radius:14px;background:var(--vx-card);color:var(--vx-ink);border:1px solid var(--vx-ln);box-shadow:0 8px 26px rgba(40,40,35,.2);font-size:13px;line-height:1.45;animation:vxUp .25s ease-out}
#viv #vvNote.warn{background:#f7ecd9;color:#6b4a14}#viv #vvNote.ok{background:#e3eee3;color:#24502e}
@keyframes vxUp{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){#viv #vvNote{animation:none}}
/* ── 모바일: 위 가로 캐릭터 띠 + 아래 탭 바 + 바텀 시트 ── */
@media (max-width:900px){
 body.mode-viv #top{padding:6px 10px}body.mode-viv .vnav button{padding:5px 10px;font-size:12.5px}body.mode-viv .vnav{margin-right:0;order:5;width:100%;justify-content:center}
 #viv .vv-wrap{display:flex;flex-direction:column;height:auto;padding-bottom:64px}
 #viv .vv-side{flex-direction:row;overflow-x:auto;padding:6px 8px;gap:4px;order:1;border-bottom:1px solid var(--vx-ln)}
 #viv .vv-side h3{display:none}#viv #vvChars{flex-direction:row;width:auto}
 #viv .vv-chip{flex:none;width:62px}
 #viv .vv-main{order:2;padding:4px 2px}
 .vx-rail{position:fixed;left:0;right:0;bottom:0;z-index:20;flex-direction:row;justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:var(--vx-card);border-top:1px solid var(--vx-ln)}
 .vx-rail button{width:auto;flex:1;max-width:84px;height:48px}
 #viv .vv-detail{position:fixed;left:0;right:0;top:auto;bottom:62px;width:auto;max-height:46vh;border-radius:18px 18px 0 0;z-index:19}
 #viv #vvNote{bottom:76px}
}


/* v23.12 머리말 연필(이름·이미지 바로 수정) */
.vv-pen{border:0;background:transparent;color:var(--vx-mut,#777);cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;margin-left:4px;vertical-align:middle}
.vv-pen:hover{color:var(--vx-ink,#111)}
.vx-picw{position:relative;flex:none}
.vx-picw .vv-pen-img{position:absolute;right:-6px;bottom:-4px;margin:0;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--vx-ln,#ccc);color:#333;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0}
.vv-nmin{font:inherit;width:calc(100% - 28px);min-width:80px;padding:2px 6px;border:1px solid var(--vx-ln,#ccc);background:#fff;color:#111}

#viv .vv-bar .vv-roomsel{border:1px solid var(--vx-ln);background:var(--vx-card);border-radius:999px;padding:4px 10px;font-size:12.5px;color:var(--vx-ink);margin-left:2px}

.vv-wishes.vv-flash{outline:2px solid #1c1c1c;outline-offset:4px;border-radius:12px;transition:outline .3s}
.vv-chkrow{display:flex;gap:8px;align-items:center;font-size:.9em}
.vv-codeshow{font:700 1.15em/1 ui-monospace,monospace;letter-spacing:.12em;padding:8px 12px;border:1px solid #1c1c1c;border-radius:999px}
.vv-mycode{margin:6px 0 10px}

/* 관찰일지 버튼: 입장하기·이웃하기와 다른 모양(정사각 아이콘 버튼, 포인트 색) */
.vnav .vjoin.vjico,body.mode-viv .vnav .vjoin.vjico,body:not(.mode-viv) .vnav .vjoin.vjico{width:34px;height:34px;padding:0;justify-content:center;border-radius:10px;border:1.5px solid #8a6d3b;background:#fbf3e2;color:#6b4f1d;box-shadow:0 1px 0 #d9c7a0}
.vnav .vjoin.vjico:hover{background:#f3e5c4}