.avatar-host{--bg:#e8ebf0;--panel:#f6f7f9;--line:#cfd5de;--ink:#2b3342;--mute:#7a8497;--acc:#3a7bd5;--acc2:#e8f0fc;grid-template-columns:148px 340px 1fr;height:100vh;display:grid}.avatar-host #tabs{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;gap:2px;padding:8px;display:flex;overflow-y:auto}.avatar-host #tabs button{color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;display:flex}.avatar-host #tabs button:hover{background:#e9edf3}.avatar-host #tabs button.on{background:var(--acc);color:#fff}.avatar-host #tabs svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}.avatar-host{transition:grid-template-columns .18s}.avatar-host.min{grid-template-columns:56px 340px 1fr}.avatar-host.min #tabs{padding:8px 6px}.avatar-host.min #tabs button{justify-content:center;padding:9px 0}.avatar-host.min #tabs .lb{display:none}.avatar-host #tabs button.tabtoggle{color:var(--mute);border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px}.avatar-host #tabs button.tabtoggle:hover{color:var(--acc)}.avatar-host #tabs button.back{color:var(--mute);margin-top:auto}.avatar-host #tabs button.back:hover{color:var(--acc)}.avatar-host #panel{background:var(--panel);border-right:1px solid var(--line);padding:12px 14px 24px;overflow-y:auto}.avatar-host #panel h3{justify-content:space-between;align-items:center;margin:0 0 10px;font-size:16px;display:flex}.avatar-host #panel h3 .pclose{width:28px;height:28px;color:var(--mute);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;padding:0;display:grid}.avatar-host #panel h3 .pclose:hover{color:var(--acc);background:#e9edf3}.avatar-host #panel h3 .pclose svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.avatar-host.pclosed{grid-template-columns:148px 0 1fr}.avatar-host.min.pclosed{grid-template-columns:56px 0 1fr}.avatar-host.pclosed #panel{visibility:hidden;border:0;width:0;padding:0;overflow:hidden}.avatar-host .sub{color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 6px;font-size:12px;font-weight:600}.avatar-host .note{color:var(--mute);margin-top:10px;font-size:12px}.avatar-host .row{flex-wrap:wrap;gap:6px;margin:6px 0;display:flex}.avatar-host .row button{border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer;background:#fff;border-radius:8px;padding:7px 14px}.avatar-host .row button.on{background:var(--acc);border-color:var(--acc);color:#fff}.avatar-host .srch{border:1px solid var(--line);width:100%;font:inherit;background:#fff;border-radius:8px;margin-bottom:8px;padding:8px 10px}.avatar-host .grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.avatar-host .grid.col5{grid-template-columns:repeat(6,1fr)}.avatar-host .grid.list{grid-template-columns:repeat(2,1fr)}.avatar-host .cell{cursor:pointer;background:#fff;border:2px solid #0000;border-radius:8px;position:relative;overflow:hidden}.avatar-host .cell:hover{border-color:#b9c9e4}.avatar-host .cell.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc2)}.avatar-host .cell.sw{aspect-ratio:1;box-shadow:0 0 0 1px var(--line);border:2px solid #fff;border-radius:50%}.avatar-host .cell.sw.on{box-shadow:0 0 0 2px var(--acc)}.avatar-host .cell.thumb{aspect-ratio:1;background-color:#dfe5ee;flex-direction:column;justify-content:flex-end;align-items:center;display:flex}.avatar-host .cell.thumb img,.avatar-host .cell.thumb .ph{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.avatar-host .cell.thumb .ph{background:linear-gradient(110deg,#dfe5ee 30%,#eef1f6 50%,#dfe5ee 70%) 0 0/200% 100%;animation:1.2s linear infinite avatar-sh}@keyframes avatar-sh{to{background-position:-200% 0}}.avatar-host .cell.thumb span{z-index:1;text-align:center;background:#fffc;width:100%;padding:1px 0;font-size:10px;position:relative}.avatar-host .cell.none{min-height:40px;color:var(--mute);text-align:center;justify-content:center;align-items:center;padding:4px;font-size:12px;display:flex}.avatar-host .cell.item{align-items:center;gap:6px;min-height:52px;padding:5px;display:flex}.avatar-host .cell.item img{object-fit:contain;flex:none;width:40px;height:40px}.avatar-host .cell.item .nm{font-size:12px;line-height:1.25;overflow:hidden}.avatar-host .cell.item small{color:var(--mute)}.avatar-host .slots{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px;display:grid}.avatar-host .slot{border:2px solid var(--line);text-align:center;cursor:pointer;background:#fff;border-radius:8px;flex-direction:column;align-items:center;gap:2px;min-height:76px;padding:6px;font-size:11px;display:flex;position:relative}.avatar-host .slot.on{border-color:var(--acc);background:var(--acc2)}.avatar-host .slot b{color:var(--mute);font-weight:600}.avatar-host .slot img{object-fit:contain;width:32px;height:32px}.avatar-host .slot .e{color:var(--mute);margin:auto}.avatar-host .slot i{color:var(--mute);font-size:16px;font-style:normal;position:absolute;top:2px;right:6px}.avatar-host .slot i:hover{color:#c0392b}.avatar-host #view{background:radial-gradient(at 50% 35%,#fbfcfd 0%,#e3e8ef 70%,#d5dce6 100%);position:relative;overflow:hidden}.avatar-host #view canvas{width:100%;height:100%;display:block}.avatar-host #msg{color:var(--mute);pointer-events:none;font-size:13px;position:absolute;top:12px;left:14px}@media (max-width:900px){.avatar-host{grid-template-rows:46vh auto 1fr;grid-template-columns:1fr;height:auto;min-height:100vh}.avatar-host #view{order:-1;height:46vh}.avatar-host #tabs{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}.avatar-host #tabs button{white-space:nowrap;flex:none}.avatar-host #tabs button.back{margin-top:0;margin-left:auto}.avatar-host #tabs button.tabtoggle{display:none}.avatar-host.min,.avatar-host.pclosed,.avatar-host.min.pclosed{grid-template-columns:1fr}.avatar-host.pclosed #panel,.avatar-host #panel h3 .pclose{display:none}.avatar-host.min #tabs .lb{display:inline}.avatar-host.min #tabs{padding:8px}.avatar-host.min #tabs button{justify-content:flex-start;padding:8px 10px}.avatar-host #panel{border-right:0;max-height:54vh}}.avatar-host .cc{flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 14px;display:flex}.avatar-host .cc input[type=color]{cursor:pointer;background:#fff;border:1px solid #c7d0de;border-radius:6px;width:40px;height:32px;padding:0}.avatar-host .cc input.hx{border:1px solid #c7d0de;border-radius:6px;width:86px;padding:6px 8px;font:13px/1.2 ui-monospace,Consolas,monospace}.avatar-host .cc input[type=number]{text-align:center;border:1px solid #c7d0de;border-radius:6px;width:52px;padding:6px 4px;font-size:13px}.avatar-host .cc .rs{cursor:pointer;background:#fff;border:1px solid #c7d0de;border-radius:6px;margin-left:auto;padding:6px 10px;font-size:12px}.avatar-host .cc .rs:hover{background:#eef2f8}.avatar-host .col1{flex-direction:column;gap:8px;margin-bottom:12px;display:flex}.avatar-host .col1 .act{text-align:left;cursor:pointer;background:#fff;border:1px solid #c7d0de;border-radius:8px;padding:10px 14px;font-size:14px}.avatar-host .col1 .act:hover{background:#eef2f8;border-color:#3b82d6}.avatar-host #view .photo,.avatar-host .view .photo{z-index:5;cursor:pointer;background:#ffffffeb;border:1px solid #c7d0de;border-radius:50%;place-items:center;width:46px;height:46px;display:grid;position:absolute;bottom:14px;right:14px;box-shadow:0 2px 8px #1e2d462e}.avatar-host #view .photo:hover,.avatar-host .view .photo:hover{background:#fff;border-color:#3b82d6}.avatar-host .photo svg{fill:none;stroke:#2b3a55;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.avatar-host .photo.vbtn{right:14px}.avatar-host .photo.vbtn .sl{stroke:#c0392b;display:none}.avatar-host .photo.vbtn.off .sl{display:block}.avatar-host .photo.vbtn.off{background:#f0f2f6eb}.avatar-host .photo.vbtn:active,.avatar-host .photo:active{transform:scale(.94)}
.avatar-host{--acc:#ff9d2e;--acc2:#fff1dc;--panel:#f4f6f9;--line:#cbd2db;--ink:#2a313a;--mute:#6f7b8a;background:var(--panel);height:calc(100dvh - 150px);min-height:520px;color:var(--ink);font:14px/1.4 var(--f-body), "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", system-ui, sans-serif;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));position:relative;box-shadow:0 0 0 1px #ffffff40}.avatar-host .nm{min-height:0;padding:0;transition:none}.avatar-host .ph{letter-spacing:0;color:inherit;font:inherit;text-transform:none;gap:0;padding:0;display:block}.avatar-host .ph:before{content:none}.avatar-host button{font:inherit}.avatar-host #tabs{background:linear-gradient(#2a3441,#1a222d);border-right:0;padding:10px 8px}.avatar-host #tabs button{color:#cdd6e2;font:600 13px/1.2 var(--f-head), sans-serif;letter-spacing:.06em;text-transform:uppercase;border-radius:0;transition:background .15s,color .15s}.avatar-host #tabs button:hover{color:#fff;background:#ffffff17}.avatar-host #tabs button.on{background:var(--acc);color:#111;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}.avatar-host #tabs button.tabtoggle,.avatar-host #tabs button.back{color:#8fa0b5;border-color:#ffffff1f}.avatar-host #tabs button.tabtoggle:hover,.avatar-host #tabs button.back:hover{color:var(--acc)}.avatar-host #panel{background:var(--panel);border-right:1px solid var(--line);scrollbar-width:thin}.avatar-host #panel h3{color:#fff;font:700 15px/1 var(--f-head), sans-serif;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,#444b55,#5d6570);margin:-12px -14px 12px;padding:10px 14px}.avatar-host #panel h3 .pclose{color:#dfe5ec}.avatar-host #panel h3 .pclose:hover{color:var(--acc);background:#ffffff26}.avatar-host .sub{color:var(--mute);border-left:3px solid var(--acc);padding-left:8px}.avatar-host .row button.on,.avatar-host .cell.on{border-color:var(--acc)}.avatar-host .row button.on{background:var(--acc);color:#111}.avatar-host .cell.on{box-shadow:0 0 0 2px var(--acc2)}.avatar-host .cell:hover{border-color:#ffd9a8}.avatar-host .slot.on,.avatar-host .col1 .act:hover{border-color:var(--acc);background:var(--acc2)}.avatar-host .photo:hover{border-color:var(--acc)}.avatar-host #view{background:radial-gradient(at 50% 35%,#fbfcfd 0%,#e3e8ef 70%,#c9d2de 100%)}@media (max-width:900px){.avatar-host{height:auto;min-height:calc(100dvh - 120px)}.avatar-host #tabs button.on{clip-path:none}}@media (prefers-reduced-motion:reduce){.avatar-host #app,.avatar-host{transition:none}}