:root{
  --bg:#D5E2D7;
  --brand:#6B6B6B;
  --text-strong:#3F3F3F;
  --text-soft:#8A8A8A;
  --cta-bg:#4A4A4A;
  --cta-hover:#2F2F2F;
  --cta-text:#FFFFFF;

  /* Social recolor */
  --social: var(--brand);
  --social-hover: var(--text-strong);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  background:var(--bg);
}

.wrap{
  width:min(92vw, 760px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:calc(clamp(18px, 6vh, 56px) + env(safe-area-inset-top));
  padding-bottom:calc(clamp(20px, 7vh, 68px) + env(safe-area-inset-bottom));
}

/* Identity */
.logo{
  width:min(62vw, 360px);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.symbol img{
  width:100%;
  height:auto;
  display:block;
}

.brand{
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.26em;
  color:var(--brand);
  font-size:clamp(18px, 5vw, 36px);
  margin-right:-0.26em;
}

/* Hero */
.hero{
  margin-top:clamp(22px, 5vh, 56px);
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px, 2.2vh, 18px);
}

.identity{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  letter-spacing:0.12em;
  margin-right:-0.12em;
  font-size:clamp(18px, 3.6vw, 27px);
  color:var(--text-strong);
}

.hero-main{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:clamp(22px, 5.2vw, 34px);
  line-height:1.22;
  color:var(--text-strong);
  padding:0 2px;
}

.hero-sub{
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:clamp(14px, 3.8vw, 16px);
  line-height:1.75;
  color:var(--text-soft);
  max-width:520px;
  padding:0 12px;
  white-space:normal;
}

/* CTA */
.cta{
  margin-top:clamp(6px, 2vh, 14px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 34px;
  border-radius:999px;
  background:var(--cta-bg);
  color:var(--cta-text);
  text-decoration:none;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-right:-0.12em;
  transition:background .18s ease, transform .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.cta:hover{
  background:var(--cta-hover);
  transform:translateY(-2px);
  opacity:.96;
}

.cta:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(107,107,107,.25);
}

/* Social row */
.social{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.social-btn{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--social);
  opacity:.75;
  border-radius:999px;
  text-decoration:none;
  transition:opacity .18s ease, transform .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.social-btn:hover{
  opacity:1;
  transform:translateY(-1px);
  color:var(--social-hover);
}

.social-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(107,107,107,.22);
}

.social-btn svg{
  width:24px;
  height:24px;
  display:block;
}

/* stroke 스타일(예: Instagram) */
.social-btn svg.stroke{
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* solid 스타일(예: GitHub/LinkedIn/Phone/Mail/Web) */
.social-btn svg.solid{
  fill:currentColor;
  stroke:none;
}

/* LinkedIn optical balance */
.social-btn svg.linkedin{
  transform:scale(0.78);
  transform-origin:center;
}

/* GitHub는 원래 solid */

@media (max-width:480px){
  .logo{ width:min(72vw, 360px); }
  .brand{ letter-spacing:0.22em; margin-right:-0.22em; }
  .identity{ letter-spacing:0.10em; margin-right:-0.10em; }
  .cta{ width:min(86vw, 320px); }
  .social{ gap:20px; }
  .social-btn{ width:42px; height:42px; }
  .social-btn svg{ width:26px; height:26px; }
}

/* fade-in */
.fade-in{
  opacity:0;
  transform:translateY(8px);
  animation:fadeUp .55s ease forwards;
}
.delay-1{ animation-delay:.05s; }
.delay-2{ animation-delay:.12s; }
.delay-3{ animation-delay:.18s; }
.delay-4{ animation-delay:.24s; }

@keyframes fadeUp{
  to{ opacity:1; transform:translateY(0); }
}