:root{
  --bg:#0b0b0f;
  --card:#141420;
  --text:#f5f5f7;
  --muted:#b8b8c7;
  --line:rgba(255,255,255,.12);
  --accent:#7c5cff;

  --radius:16px;
  --pad:18px;
  --gap:12px;

  --max:980px;
  --topbar-h:56px;
}

/* 모바일 기본 */
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:calc(var(--pad) + var(--topbar-h)) var(--pad) var(--pad);
}

/* 상단바(선택) */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--topbar-h);
  backdrop-filter: blur(10px);
  background:rgba(11,11,15,.70);
  border-bottom:1px solid var(--line);
  z-index:10;
}
.topbar__inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad);
  max-width:var(--max);
  margin:0 auto;
}
.brand{font-weight:800; letter-spacing:.3px; font-size:14px;}
.nav{display:flex; gap:8px;}
.nav__btn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:999px;
  padding:7px 10px;
  min-height:36px;
}

/* 블록 */
.block{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius:var(--radius);
  padding:var(--pad);
  margin-bottom:var(--gap);
}
.block__head{margin-bottom:12px;}
.eyebrow{margin:0 0 10px; color:var(--muted); font-size:12px; letter-spacing:.2px;}
.title{margin:0 0 8px; font-size:28px; letter-spacing:-.2px; line-height:1.15;}
.lead{margin:0; color:var(--muted); font-size:14px; line-height:1.7;}

.h2{margin:0 0 8px; font-size:18px;}
.h3{margin:0 0 6px; font-size:16px;}
.muted{margin:0; color:var(--muted); font-size:14px; line-height:1.7;}

/* 버튼 */
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;           /* 모바일 터치 기준 */
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  font-weight:700;
}
.btn.primary{background:var(--accent); border-color:transparent;}

/* 미디어 */
.media{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  background:#000;
}

/* 카드 그리드 */
.grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr; /* 모바일 1열 */
}
.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}

/* 넓은 화면에서 자동으로 2~3열 */
@media (min-width: 720px){
  .wrap{padding-top:calc(var(--pad) + var(--topbar-h) + 8px);}
  .title{font-size:38px;}
  .grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width: 1024px){
  .grid{grid-template-columns:repeat(3,1fr);}
}

.footer{
  padding:10px 2px 2px;
  text-align:center;
}