:root{
  --bg:#000;
  --panel:#0b0c10;
  --text:#e8e8e8;
  --muted:#a0a3ac;
  --primary:#3a7cff;
  --accent1:#2bf3ff;
  --accent2:#b47cff;
  --highlight:#ffd580;
  --line:#1e1e1e;
  --radius:16px;
  --pad:22px;
  --max:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Inter','Pretendard',system-ui,sans-serif;
  color:var(--text);
  background:#000 linear-gradient(to bottom, #000 0%, rgba(58,124,255,.12) 80%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:var(--pad);}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.brand{font-weight:800;font-size:1.5rem;color:var(--primary);text-shadow:0 0 25px rgba(58,124,255,.6)}
.back{border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--muted);
  background:linear-gradient(90deg,#0f0f14,#111);transition:.3s;}
.back:hover{color:var(--highlight);border-color:var(--highlight);}
.features-wrap{display:grid;grid-template-columns:420px 1fr;gap:32px}
@media(max-width:960px){.features-wrap{grid-template-columns:1fr}}
.left{border-right:1px solid var(--line);}
@media(max-width:960px){.left{border-right:none}}
.search{padding:10px 0;position:sticky;top:0;background:#000;z-index:5;}
.search input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:#0f1116;color:var(--text);font-size:.95rem;transition:.3s;}
.search input:focus{border-color:var(--primary);box-shadow:0 0 12px rgba(58,124,255,.4);}
.item{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 8px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(58,124,255,0),rgba(180,124,255,.05) 100%);
  cursor:pointer;transition:.25s;
}
.item:hover{background:linear-gradient(90deg,rgba(58,124,255,.1),rgba(180,124,255,.08) 60%);}
.item h3{margin:0;font-size:1.25rem;font-weight:700;}
.plus{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);transition:.3s;}
.plus::before{content:"+"}
.item.active{background:linear-gradient(90deg,rgba(43,243,255,.25),rgba(180,124,255,.15) 60%);}
.item.active .plus{background:var(--accent1);color:#000;border-color:var(--accent1);box-shadow:0 0 18px rgba(43,243,255,.6)}
.detail{position:relative}
.panel{
  display:none;background:rgba(20,20,25,.95);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:inset 0 0 20px rgba(58,124,255,.08),0 0 35px rgba(180,124,255,.12);
}
.panel.active{display:block}
.panel h2 {
  margin: 0 0 12px;
  font-size: 1.8rem;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.panel p{line-height:1.7;color:#d0d3da;margin:0 0 16px}
.media{
  width:100%;border-radius:var(--radius);overflow:hidden;margin:14px 0 18px;max-height:420px;
  background:#0b0c10;
}
.media img{
  display:block;width:100%;height:auto;object-fit:cover;transition:transform .6s ease;filter:contrast(1.05) saturate(1.05);
}
.media img:hover{transform:scale(1.05)}
@media(max-width:960px){.media{max-height:calc(60vw);} .media img{object-fit:cover;}}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;}
.badge{
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(90deg,rgba(58,124,255,.08),rgba(180,124,255,.08));
  border:1px solid rgba(180,124,255,.3);
  color:#b0aaff;font-size:.8rem;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.cta{padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;transition:.25s;border:1px solid var(--line);}
.cta.primary{background:linear-gradient(90deg,var(--primary),var(--accent2));color:#fff;box-shadow:0 0 25px rgba(58,124,255,.4);}
.cta.primary:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(180,124,255,.5);}
.cta.ghost:hover{border-color:var(--highlight);color:var(--highlight);}
.note{color:var(--muted);font-size:.8rem;margin-top:14px;}
@media(max-width:960px){
  .detail{display:block}
  .panel{margin:0 0 20px;}
}
.reveal{
  opacity:0;transform:translateY(18px) scale(0.99);
  filter:blur(3px);
  transition:opacity .6s ease, transform .6s ease, filter .6s ease;
}
.reveal.visible{
  opacity:1;transform:none;filter:blur(0);
}
.media.reveal{transform:translateY(14px) scale(1.01)}
.media.reveal.visible{transform:none}