:root{
  --bg: #0b0b0c;
  --card: #111214;
  --muted: #8b8f98;
  --border: #26282c;
  --primary: #5b7cff;
  --secondary: #6ce0c6;
  --accent: #ffd36e;
  --text: #e8e9ec;
  --white: #fff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  background:#0f1115;
  color:var(--text);
  line-height:1.6;
}

.page{min-height:100dvh;background:linear-gradient(135deg, #13151b 0%, #0f1115 60%, #12141a 100%);}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}
.center{text-align:center}
.maxw-4{max-width:52rem;margin-inline:auto}
.maxw-3{max-width:44rem;margin-inline:auto}
.maxw-6{max-width:72rem}
.mx-auto{margin-inline:auto}
.mb-1{margin-bottom:.25rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.25rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.mt-3{margin-top:1rem}
.p-8{padding:2rem}

.grid{display:grid}
.grid-3{grid-template-columns:repeat(1,1fr)}
.grid-2{grid-template-columns:1fr}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.row{display:flex}
.align-center{align-items:center}
.grow{flex:1}
.w-full{width:100%}
.vstack{display:flex;flex-direction:column}
.small{font-size:.92rem}
.xsmall{font-size:.8rem}

@media(min-width:768px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
}

/* Hero */
.hero{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(91,124,255,.20), transparent 60%),
              radial-gradient(800px 500px at 90% 20%, rgba(108,224,198,.15), transparent 60%);
  padding:72px 0 56px;
}
.badge{
  display:inline-block;
  padding:.4rem .75rem;
  border:1px solid rgba(91,124,255,.35);
  color:var(--primary);
  background:rgba(91,124,255,.10);
  border-radius:999px;
  font-weight:600;
  margin-bottom:1rem;
}
.headline{
  font-size:clamp(2rem, 3.5vw, 3.25rem);
  font-weight:800;
  margin:.25rem 0 1rem;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{font-size:1.125rem;color:var(--muted)}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
}
.card:hover{border-color:#343842}
.card-header{padding: .25rem .25rem .5rem .25rem}
.card-title{margin:.25rem 0 .25rem;font-weight:700;font-size:1.05rem}
.card-plain{padding:1.25rem}
.meta{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.92rem}
.icon{width:18px;height:18px}
.icon-lg{width:24px;height:24px}
.icon-xl{width:32px;height:32px}
.icon.star, .icon.star-secondary{fill:var(--primary); color:var(--primary)}
.icon.star-secondary{fill:var(--secondary); color:var(--secondary)}
.icon-wrap,.avatar{width:48px;height:48px;border-radius:999px;background:rgba(91,124,255,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.avatar.alt{background:rgba(108,224,198,.12)}
.muted{color:var(--muted)}
.quote{color:var(--muted);line-height:1.8}

/* Buttons */
.btn{
  --btn-bg:#2a2e36; --btn-color:#e9ecf2; --btn-bd:#3a3f48;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:10px; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-color); font-weight:600; cursor:pointer; text-decoration:none;
}
.btn:hover{filter:brightness(1.05)}
.btn-primary{--btn-bg:linear-gradient(180deg,#5b7cff,#4968e8); --btn-bd:#5b7cff}
.btn-secondary{--btn-bg:#fff; --btn-color:#0f1115; --btn-bd:#fff}
.btn-outline-light{
  --btn-bg:transparent; --btn-color:#fff; --btn-bd:rgba(255,255,255,.35);
  background:transparent;
}
.btn-lg{padding:.9rem 1.25rem; font-size:1.05rem}

/* Sections */
.section{padding:72px 0}
.section-muted{background:rgba(255,255,255,.03)}
.cta{background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#fff}
.text-invert{color:#fff}
.lead-invert{color:rgba(255,255,255,.9)}

/* Circles */
.circle{width:64px;height:64px;border-radius:999px;background:rgba(91,124,255,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.circle.alt{background:rgba(108,224,198,.12)}
.circle.accent{background:rgba(255,211,110,.15)}

/* Footer */
.footer{background:#0f1115; border-top:1px solid var(--border); padding:48px 0}
.brand{font-size:1.5rem; font-weight:800; color:var(--primary)}
.link{background:none;border:none;color:var(--muted);cursor:pointer}
.link:hover{color:var(--primary)}

/* Modal */
.modal{position:fixed;inset:0;display:none}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-box{
  position:relative; z-index:1; width:min(640px, 92vw);
  margin:10vh auto; background:#12141a; border:1px solid var(--border); border-radius:16px;
  padding:20px; max-height:80vh; overflow:auto;
}
.modal-box.scroll{overflow:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.icon-btn{background:#1a1d23;border:1px solid #2a2f38;color:#cfd3da;width:32px;height:32px;border-radius:8px;cursor:pointer}
.field{display:flex;flex-direction:column;gap:.4rem}
.field > span{font-size:.92rem}
.field input,.field textarea{
  width:100%; background:#0f1115; color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:.65rem .75rem; outline:none
}
.field input:focus,.field textarea:focus{border-color:#3b82f6}
.info{padding:1rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px}

/* Utilities */
.text-primary{color:var(--primary)}
.text-foreground{color:var(--text)}