:root{

  /* Olive Young Brand */

  --oy-green:#82DC28;
  --oy-green-dark:#5FAF16;
  --oy-green-light:#F7FCEB;

  --oy-coral:#FF7878;
  --oy-coral-light:#FFF5F5;

  /* Neutral */

  --black:#1A1A1A;
  --gray:#777777;
  --light:#F7F8F7;
  --line:#ECECEC;
  --white:#FFFFFF;

  /* compatibility */

  --green:var(--oy-green);

}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  margin:0;

  background:#F5F6F4;

  color:var(--black);

  font-family:
    "Pretendard",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

}

button,
input,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

/* ===========================
   Layout
=========================== */

.app-shell{

  width:min(100%,760px);

  min-height:100vh;

  margin:0 auto;

  background:#fff;

  box-shadow:
    0 0 40px rgba(0,0,0,.03);

}

/* ===========================
   Header
=========================== */

.app-header{

  position:sticky;

  top:0;

  z-index:20;

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  padding:20px 24px;

  border-bottom:1px solid var(--line);

  background:rgba(255,255,255,.95);

  backdrop-filter:blur(12px);

}

.brand-wrap{

  display:flex;

  flex-direction:column;

}

.brand{

  font-size:22px;

  font-weight:900;

  font-style:italic;

  letter-spacing:-0.05em;

  color:#111;

  line-height:1;

}

.service-badge{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:fit-content;

  margin-top:10px;

  padding:6px 12px;

  border-radius:999px;

  background:var(--oy-green-light);

  color:var(--oy-green-dark);

  font-size:11px;

  font-weight:700;

  letter-spacing:.02em;

}

.subbrand{

  margin-top:14px;

  font-size:18px;

  font-weight:700;

  color:#222;

  letter-spacing:-0.03em;

}

.small{

  margin-top:6px;

  font-size:13px;

  line-height:1.5;

  color:#888;

}

.step-text{

  font-size:13px;

  font-weight:600;

  color:#999;

}

/* ===========================
   Main
=========================== */

main{

  padding:34px 24px 80px;

}

/* ===========================
   Hero
=========================== */

.hero{

  padding:32px 0 18px;

}

.eyebrow{

  display:inline-flex;

  align-items:center;

  gap:6px;

  font-size:11px;

  font-weight:700;

  letter-spacing:.18em;

  text-transform:uppercase;

  color:var(--oy-green-dark);

}

/* ===========================
   Typography
=========================== */

h1{

  margin:12px 0 18px;

  font-size:42px;

  font-weight:800;

  line-height:1.12;

  letter-spacing:-0.06em;

  color:#111;

}

h2{

  margin:12px 0 14px;

  font-size:30px;

  font-weight:700;

  line-height:1.22;

  letter-spacing:-0.05em;

  color:#111;

}

h3{

  margin:0;

  font-size:20px;

  font-weight:700;

  color:#111;

}

p{

  margin:0;

  font-size:15px;

  line-height:1.75;

}

/* ===========================
   Utility
=========================== */

.muted{

  color:#777;

}

.center{

  text-align:center;

}

.hidden{

  display:none!important;

}

/* ===========================
   Links
=========================== */

a{

  color:inherit;

  text-decoration:none;

}

/* ===========================
   Selection
=========================== */

::selection{

  background:var(--oy-green);

  color:#111;

}

/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

  width:8px;

}

::-webkit-scrollbar-track{

  background:#F4F4F4;

}

::-webkit-scrollbar-thumb{

  background:#D8D8D8;

  border-radius:99px;

}

::-webkit-scrollbar-thumb:hover{

  background:#C8C8C8;

}
.logo-click{cursor:pointer;transition:opacity .2s}.logo-click:hover{opacity:.7}
.text-button{display:block;width:100%;background:none;border:none;color:#777;padding:12px;cursor:pointer}.text-button:hover{text-decoration:underline}