:root {
  --coral: #FF7A6B;
  --coral-deep: #B4433F;
  --coral-soft: #FFE3DA;
  --yellow: #FFC93C;
  --yellow-deep: #D99A00;
  --mint: #0FB49C;
  --mint-text: #0B8B78;
  --ink: #15171C;
  --gray: #5E626B;
  --cream: #FFF7F2;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
h1, h2, h3, p { margin: 0; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 8px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.skip { position: fixed; top: -80px; left: 16px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--white); border-radius: 8px; }
.skip:focus { top: 12px; }

/* 버튼: 게임 UI 처럼 아래 테두리로 눌림 느낌 */
.btn {
  display: inline-block;
  padding: 18px 34px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 18px;
  transition: transform .12s ease, border-bottom-width .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn-yellow { background: var(--yellow); border-bottom: 6px solid var(--yellow-deep); }
.btn-white { background: var(--white); border-bottom: 5px solid var(--yellow-deep); font-weight: 800; font-size: clamp(17px, 2vw, 22px); padding: 16px 28px; }

/* 상단 */
.hero { position: relative; overflow: hidden; background: var(--coral); }
.header { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; }
.logo { padding: 14px 20px; border-radius: 999px; background: var(--white); }
.logo img { width: 140px; height: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 400; }
.nav a { padding: 12px 16px; }
.nav a:hover { opacity: .8; }
.nav .nav-cta { padding: 12px 20px; border-radius: 14px; background: var(--white); border-bottom: 4px solid var(--coral-deep); }

.cloud { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .28); }
.cloud-1 { left: 6%; top: 170px; width: 160px; height: 56px; }
.cloud-2 { right: 8%; top: 250px; width: 220px; height: 70px; }
.cloud-3 { left: 14%; bottom: 72px; width: 110px; height: 40px; }

.hero-body { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 136px; text-align: center; }
.sticker { display: inline-block; margin-bottom: 28px; padding: 8px 16px; border-radius: 999px; background: var(--yellow); font-size: 14px; font-weight: 800; transform: rotate(-3deg); }
.hero h1 { max-width: 900px; margin: 0 auto 24px; font-size: clamp(48px, 7.4vw, 104px); line-height: 1.05; letter-spacing: -0.045em; font-weight: 900; }
.white { color: var(--white); }
.hero-lead { max-width: 520px; margin: 0 auto 40px; font-size: 19px; line-height: 1.7; color: #3D1612; }

/* 게임 */
.games { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 104px; padding-bottom: 104px; }
.games-copy { flex: 1 1 360px; min-width: 0; }
.badge { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #FFF1C7; font-size: 14px; font-weight: 800; }
.games h2 { margin-top: 20px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.15; letter-spacing: -0.04em; font-weight: 900; }
.games-art { flex: 1 1 480px; min-width: 0; aspect-ratio: 16 / 10; border-radius: 32px; background: var(--coral-soft); display: flex; align-items: center; justify-content: center; }
.games-art span { font-size: clamp(28px, 4vw, 48px); font-weight: 900; letter-spacing: -0.03em; color: #8A3A33; transform: rotate(-4deg); }

/* 소개 카드 */
.about { background: var(--cream); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding-top: 96px; padding-bottom: 96px; }
.card { padding: 32px; border-radius: 28px; background: var(--white); text-align: center; }
.card-big { margin-bottom: 8px; font-size: 48px; font-weight: 900; letter-spacing: -0.05em; }
.card-big.coral { color: #D2483C; }
.card-big.amber { color: #B07800; }
.card-big.mint { color: var(--mint-text); }
.card h3 { margin-bottom: 8px; font-size: 20px; font-weight: 800; }
.card p:last-child { font-size: 16px; line-height: 1.7; color: var(--gray); }

/* hello */
.hello { overflow: hidden; background: var(--yellow); text-align: center; }
.hello .wrap { padding-top: 96px; padding-bottom: 96px; }
.hello-word { margin-bottom: 28px; font-size: clamp(96px, 14vw, 200px); font-weight: 900; letter-spacing: -0.07em; line-height: 1; transform: rotate(-8deg); }
.hello-word span { font-size: .4em; vertical-align: top; }
.hello h2 { margin-bottom: 12px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; font-weight: 900; }
.hello-sub { margin-bottom: 24px; font-size: 16px; color: #4D3D00; }

/* 하단 */
.footer { background: var(--cream); }
.footer-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 32px; padding-bottom: 32px; font-size: 14px; color: var(--gray); }
.footer-row img { width: 110px; height: auto; }

@media (max-width: 640px) {
  .header { justify-content: center; }
  .hero-body { padding-top: 48px; padding-bottom: 96px; }
  .hero-lead { font-size: 17px; }
  .cloud-1 { top: 210px; width: 100px; height: 36px; }
  .cloud-2 { top: 300px; width: 130px; height: 44px; }
  .games, .about-grid, .hello .wrap { padding-top: 72px; padding-bottom: 72px; }
  .footer-row { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}