:root{
  --bg:#07161b;
  --card:#0b1d24cc;
  --line:#13313a;
  --txt:#e9f3f6;
  --muted:#a7c1c9;
  --btn:#0f2f39;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  background: radial-gradient(1200px 800px at 30% 0%, #0f3442 0%, var(--bg) 60%);
  color:var(--txt);
}
.wrap{max-width:1120px;margin:28px auto;padding:0 18px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter: blur(10px);
}
.head{padding:18px 18px 14px}
.titleRow{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.logo{width:38px;height:38px;border-radius:12px;background:#0d2f3a;display:grid;place-items:center}
.title{font-size:20px;font-weight:800}
.sub{color:var(--muted);font-size:13px;margin-top:2px}

/* top form */
.grid{display:grid;grid-template-columns: 1.4fr .7fr .7fr .7fr .5fr;gap:10px;align-items:end}
.field.wide{grid-column: span 1;}
.label{font-size:12px;color:var(--muted);margin:0 0 6px 2px}
input,select{
  width:100%;
  background:#071a20;
  border:1px solid var(--line);
  color:var(--txt);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.btnRow{display:flex;gap:8px;justify-content:flex-end}
.btn{
  border:1px solid var(--line);
  background:var(--btn);
  color:var(--txt);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.btn.primary{background:linear-gradient(90deg,#1f5cff,#14b8a6);border-color:transparent}
.btn.danger{background:linear-gradient(90deg,#ff3b5c,#b91c1c);border-color:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}

.advanced{margin-top:10px}
.advanced summary{cursor:pointer;color:var(--txt);padding:10px 6px}
.advGrid{display:grid;grid-template-columns: repeat(4, 1fr);gap:10px;padding:8px 4px 4px}
.smallNote{color:var(--muted);font-size:12px;padding:8px 6px 2px}

.actionRow{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.status{margin-top:10px;color:var(--muted);font-size:13px;padding:8px 6px}

.sectionTitle{font-weight:800;margin-bottom:10px}
.list{display:flex;flex-direction:column;gap:12px}

.item{display:flex;gap:14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#071a20aa}
.thumb{width:160px;height:90px;border-radius:12px;object-fit:cover;border:1px solid #0f2f39}
.meta{flex:1}
.badges{display:flex;gap:8px;margin-bottom:6px}
.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  background:#0a222a;
}
.pill.HOT{border-color:#ff3b5c}
.pill.FAST{border-color:#ffb454}
.pill.GOOD{border-color:#2bd4ff}

.itTitle{font-size:16px;font-weight:800;margin:2px 0 6px}
.itSub{color:var(--muted);font-size:12px;margin-bottom:10px}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chip{font-size:12px;color:var(--txt);border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:#081e26}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* Viral highlight (카드 자체가 눈에 띄게) */
.item.hot  { box-shadow: 0 0 0 1px rgba(255,80,80,.35), 0 0 34px rgba(255,80,80,.18); }
.item.fast { box-shadow: 0 0 0 1px rgba(255,180,80,.28), 0 0 28px rgba(255,180,80,.14); }
.item.good { box-shadow: 0 0 0 1px rgba(80,200,255,.24), 0 0 24px rgba(80,200,255,.12); }

/* Modal */
.backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:grid;place-items:center;padding:18px;
}
.hidden{display:none}
.modal{
  width:min(900px, 96vw);
  background:#071a20;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modalHead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.modalTitle{font-weight:800}
.modalBody{padding:14px;max-height:72vh;overflow:auto}

/* Analysis blocks */
.anaBlock { margin: 14px 0; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(0,0,0,.14); }
.anaH { font-weight: 800; margin-bottom: 8px; }
.anaP { opacity: .92; line-height: 1.5; }
.anaUl { margin: 0; padding-left: 18px; opacity: .92; line-height: 1.55; }
.anaPre { white-space: pre-wrap; background: rgba(0,0,0,.22); padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.chipWrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display:inline-block; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); }

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr; }
  .advGrid{grid-template-columns: 1fr; }
  .btnRow{justify-content:flex-start}
  .thumb{width:140px}
}