/* [Claude 2026-10-08] 드롭 테이블 화면(새 테마) */
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:14px 4px 18px}
.page-eyebrow{display:inline-block;padding:5px 11px;border-radius:999px;background:#fff;border:2px solid var(--blue);color:var(--blue);font:700 11px/1 'DM Mono',monospace;letter-spacing:.16em}
.page-title h1{margin:10px 0 6px;font:400 clamp(36px,5vw,54px)/1.05 var(--display);color:#fff;text-shadow:-3px -3px 0 #0f5fae,3px -3px 0 #0f5fae,-3px 3px 0 #0f5fae,3px 3px 0 #0f5fae,0 7px 0 #0f5fae}
.page-title p{margin:0;font-size:14px;font-weight:700;color:#24527a}
.page-mobs{display:flex;align-items:flex-end;gap:6px;flex:none}
.page-mobs img{width:76px;height:76px;object-fit:contain;animation:bob 2.3s ease-in-out infinite}
.page-mobs img:nth-child(2){animation-delay:-.8s}.page-mobs img:nth-child(3){animation-delay:-1.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.drop-card{padding:20px 22px 18px}
.drop-search{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.drop-tabs{display:flex;gap:6px;padding:5px;border-radius:999px;background:#e6f4ff;border:2px solid #b5e0ff}
.drop-tabs button{padding:10px 16px;border-radius:999px;border:0;background:transparent;color:#3f79aa;font:400 17px/1 var(--display)}
.drop-tabs button[aria-pressed=true]{background:linear-gradient(#52c2ff,#1f8fe5);color:#fff;box-shadow:0 3px 0 #0f5fae}
.drop-input{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;border:3px solid var(--blue);background:#fff}
.drop-input span{font-size:22px;color:var(--blue)}
.drop-input input{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;font:700 16px 'Noto Sans KR',sans-serif;color:var(--ink)}
.drop-input:focus-within{box-shadow:0 0 0 4px #b5e0ff}

#drop-view{margin-top:16px}
.drop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px;max-height:640px;overflow:auto;padding:3px 4px 6px 2px}
.drop-entry{display:flex;align-items:center;gap:11px;min-height:64px;padding:8px 12px;border-radius:16px;border:2px solid #dcecf8;background:#f8fcff;color:inherit;text-align:left;transition:transform .12s,border-color .12s}
.drop-entry:hover,.drop-entry:focus-visible{border-color:var(--blue);background:#fff;transform:translateY(-2px);box-shadow:0 4px 0 #b5e0ff}
.drop-icon{width:46px;height:46px;display:grid;place-items:center;flex:none;border-radius:12px;background:#fff;border:2px solid #e3eef7;color:#9db8cf;font:700 10px 'DM Mono',monospace}
.drop-icon img{max-width:40px;max-height:40px;image-rendering:pixelated}
.drop-entry-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.drop-entry-info strong{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop-entry-info span{font-size:12px;color:#6d8aa3;font-weight:500}
.drop-tag{flex:none;padding:4px 7px;border-radius:7px;background:#e6f4ff;color:#3f79aa;font:700 10px/1 'DM Mono',monospace}
.drop-tag.boss{background:var(--red);color:#fff}
.drop-back{padding:9px 16px;border-radius:999px;border:2px solid #b5e0ff;background:#fff;color:#1f6fb0;font:400 16px/1 var(--display)}
.drop-back:hover,.drop-back:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff}
.drop-detail-head{display:flex;align-items:center;gap:14px;margin:14px 0 12px;padding:14px 16px;border-radius:18px;background:linear-gradient(120deg,#e9f6ff,#fff);border:2px solid #b5e0ff}
.drop-detail-head .drop-icon{width:62px;height:62px}
.drop-detail-head .drop-icon img{max-width:54px;max-height:54px}
.drop-detail-head h2{margin:0;font:400 28px/1.1 var(--display);color:#0f5fae}
.drop-detail-head p{margin:5px 0 0;font-size:13px;font-weight:700;color:#4a7fae}
.drop-table-wrap{max-height:600px;overflow:auto;border-radius:16px;border:2px solid #dcecf8}
.drop-table{width:100%;border-collapse:collapse;font-size:15px}
.drop-table th{position:sticky;top:0;padding:11px 14px;background:#e6f4ff;color:#3f79aa;font:700 12px 'Noto Sans KR',sans-serif;text-align:left}
.drop-table td{padding:11px 14px;border-top:1px solid #edf4fa;font-weight:500}
.drop-table tbody tr:nth-child(even){background:#fafdff}
.drop-table td:last-child,.drop-table th:last-child{text-align:right;white-space:nowrap}
.drop-table td:last-child{font:400 18px/1 var(--display);color:var(--red)}
.drop-table button{padding:0;border:0;background:transparent;color:#0f5fae;font:700 15px 'Noto Sans KR',sans-serif;text-align:left;text-decoration:underline;text-decoration-color:#b5e0ff;text-underline-offset:4px}
.drop-table button:hover,.drop-table button:focus-visible{color:var(--orange)}
.drop-quest{margin-left:8px;padding:3px 7px;border-radius:6px;background:#e3f6dd;color:#2f8a1f;font:700 10px/1 'Noto Sans KR',sans-serif;white-space:nowrap}
.drop-empty{padding:60px 12px;text-align:center;color:#6d8aa3;font-size:15px;font-weight:700;line-height:1.7}
.drop-note{margin:14px 2px 0;font-size:12px;line-height:1.8;color:#6d8aa3}

@media(max-width:620px){
 .page-mobs{display:none}
 .drop-card{padding:14px 12px}
 .drop-tabs{width:100%}.drop-tabs button{flex:1;padding:10px 6px;font-size:15px}
 .drop-list{grid-template-columns:1fr;max-height:560px}
 .drop-table{font-size:14px}.drop-table th,.drop-table td{padding:10px 9px}
 .drop-table th:nth-child(2),.drop-table td:nth-child(2){display:none}
 .drop-detail-head h2{font-size:23px}
}
@media(prefers-reduced-motion:reduce){.page-mobs img{animation:none}}