:root{
  --bg:#1474c9;
  --bg2:#1d84dd;
  --text:#ffffff;
  --accent:#89c8ff;
  --accent-strong:#38b6ff;
  --shadow: 0 0 12px rgba(80,180,255,.8), 0 0 28px rgba(80,180,255,.55);
  --shadow-strong: 0 0 18px rgba(80,180,255,1), 0 0 44px rgba(80,180,255,.8), 0 0 70px rgba(80,180,255,.6);
  --card-bg: rgba(255,255,255,.14);
  --card-border: rgba(255,255,255,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Pretendard", system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, "Noto Sans KR", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, var(--bg2), var(--bg));
}
.wrap{
  width:min(1200px, 92vw);
  padding:40px 20px 96px; /* extra bottom space for bottom badge */
  text-align:center;
  margin:0 auto;
}
/* top-right image badge */
.corner-badge{
  position:fixed;
  bottom:16px;
  right:16px;
  width:192px;
  height:auto;
  z-index:1000;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
  user-select:none;
}
h1{
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:.02em;
  font-size: clamp(24px, 3.6vw, 44px);
  display:inline-block;
  padding:12px 64px; /* pill layer restored */
  border-radius:999px;
  background:#ffffff;
  color:var(--bg);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.sub{
  opacity:.95;
  margin:2rem 0 16px; /* moved up by ~2 lines */
  font-size: clamp(31px, 3.8vw, 65px); /* +3px increase */
  font-weight:600;
}
.proj{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  display:inline-block;
  padding:0; /* remove pill layer */
  border-radius:0;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  font-size: clamp(14px, 1.9vw, 18px);
  font-weight:800;
  letter-spacing:.02em;
  background: linear-gradient(90deg, #ffffff, #a8d9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 12px rgba(56,182,255,.25);
}
.menu-buttons{
  margin:144px auto 22px; /* raised up by ~2 lines */
  display:grid; gap:24px;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.menu-btn{
  --w: 432px;
  width: var(--w);
  max-width: 92vw;
  aspect-ratio: 5 / 3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:18px;
  color:var(--text);
  text-decoration:none;
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.35);
  box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, filter .28s;
  backdrop-filter: blur(6px);
  text-align:center;
}
.menu-btn:hover, .menu-btn:focus-visible{
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-strong);
  outline: none;
  filter: saturate(1.2);
}
.menu-btn:active{ transform: translateY(-1px) scale(1.01); }
.menu-btn .icon{
  width:152px; height:152px; margin-bottom:10px; opacity:.96; /* doubled */
  filter: drop-shadow(0 0 10px rgba(56,182,255,.65));
}
.menu-btn span{
  font-weight:800; letter-spacing:.03em;
  font-size: clamp(18px, 2.6vw, 26px);
  background: linear-gradient(90deg, #ffffff, #d9f2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(56,182,255,.35);
}

.menu-btn:hover span, .menu-btn:focus-visible span{
  background: linear-gradient(90deg, #ffffff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
}

/* examples grid (kept, if used later) */
.examples{
  margin:30px auto 0;
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.thumb{
  width:100%; aspect-ratio: 16/9; border-radius:12px; overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
  border:1px dashed rgba(255,255,255,.45);
  display:grid; place-items:center;
}
.thumb svg{ width:85%; height:auto; opacity:.95; }
.label{
  margin-top:10px; font-weight:700; letter-spacing:.01em;
  text-shadow: 0 1px 10px rgba(56,182,255,.35);
}

/* responsive */
@media (max-width: 800px){
  .proj{ display: none; }
  .menu-buttons{ grid-template-columns: 1fr; }
  .menu-btn{ width: 100%; }
  .menu-btn .icon{ width:65px; height:65px; }
  .examples{ grid-template-columns: 1fr; }
}