:root{--bg:#f7f8fa;--card:#fff;--line:#e6e8eb;--accent:#f5b50a;--accent2:#fff3d1;--text:#222;--sub:#888}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--bg);color:var(--text);padding:24px;line-height:1.5}
.top{display:flex;justify-content:space-between;align-items:flex-start;max-width:1200px;margin:0 auto 16px}
h1{font-size:24px;margin-bottom:4px}
.desc{color:var(--sub);font-size:14px}
.auth{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.userbox{display:none;align-items:center;gap:10px;font-size:14px}
.userbox img{width:32px;height:32px;border-radius:50%}
.linkbtn{background:none;border:none;color:var(--sub);font-size:13px;cursor:pointer;text-decoration:underline}
.tabs{display:flex;gap:8px;max-width:1200px;margin:0 auto 14px}
.tab{padding:8px 16px;border:1px solid var(--line);background:var(--card);border-radius:999px;cursor:pointer;font-size:14px}
.tab.on{background:var(--accent);border-color:var(--accent);color:#3a2c00;font-weight:700}
.wrap{display:grid;grid-template-columns:380px 1fr;gap:20px;max-width:1200px;margin:0 auto}
@media(max-width:820px){.wrap{grid-template-columns:1fr}.top{flex-direction:column;gap:12px}.auth{align-items:flex-start}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.panel h2{font-size:15px;margin-bottom:12px}
.drop{border:2px dashed #cfd3d8;border-radius:12px;padding:32px 16px;text-align:center;color:var(--sub);cursor:pointer;transition:.15s;background:#fafbfc}
.drop.drag{border-color:var(--accent);background:var(--accent2)}
.drop strong{display:block;color:var(--text);font-size:15px;margin:8px 0 4px}
.count{font-size:13px;color:var(--sub);text-align:right;margin-top:8px}
.plat{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.12s}
.plat:hover{border-color:#cfd3d8}
.plat.on{border-color:var(--accent);background:var(--accent2)}
.plat .nm{font-weight:600;font-size:14px}
.plat .sz{font-size:12px;color:var(--sub);margin-top:2px}
.plat .ck{color:var(--accent);font-weight:700;opacity:0;font-size:16px}
.plat.on .ck{opacity:1}
.btn{width:100%;border:none;border-radius:10px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px}
.btn.primary{background:var(--accent);color:#3a2c00}
.btn.primary:disabled{background:#dfe2e6;color:#aab;cursor:not-allowed}
.btn.ghost{background:#f0f2f4;color:#555}
.preview{background:#fafbfc;border:1px solid var(--line);border-radius:12px;min-height:240px;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:14px;padding:16px;text-align:center}
.preview img{max-width:100%;max-height:360px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:16px}
.cell{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;transition:.12s}
.cell:hover{border-color:#cfd3d8}
.cell.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent2)}
.cell .thumb{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.cell .thumb img{max-width:100%;max-height:100%}
.cell .cap{font-size:11px;color:var(--sub);padding:6px;text-align:center;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint{font-size:12px;color:var(--sub);margin-top:6px;text-align:center}
.tag{display:inline-block;background:#eee;border-radius:6px;font-size:11px;padding:2px 6px;color:#666;margin-left:6px}
.rec{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.rec .info{font-size:14px}
.rec .meta{font-size:12px;color:var(--sub);margin-top:2px}
.rec .acts{display:flex;gap:8px}
.rec button{border:none;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}
.rec .dl{background:var(--accent);color:#3a2c00;font-weight:700}
.rec .del{background:#f0f2f4;color:#888}
.empty{color:var(--sub);font-size:14px;text-align:center;padding:40px 0}
#recPanel{display:none;max-width:1200px;margin:0 auto}
.uplist{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.upitem{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer}
.upitem:hover{border-color:#cfd3d8}
.upitem.on{border-color:var(--accent);background:var(--accent2)}
.upitem img{width:34px;height:34px;object-fit:contain;border-radius:4px;background:#fafbfc;flex-shrink:0}
.upitem .fn{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upitem .rm{border:none;background:#f0f2f4;color:#888;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:14px;flex-shrink:0}
.upitem .rm:hover{background:#ffe0e0;color:#d33}