/* Apple reference: a quiet product gallery, using KokoRoom's own palette. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 480px);
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 6vw, 96px);
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 64px clamp(24px, 5vw, 80px) 80px;
}
.brand { animation: rise 0.6s ease both; }
.app-icon { display: block; width: 96px; height: 96px; margin-bottom: 32px; border-radius: 28%; }
.brand-title { margin: 0 0 20px; }
.logo { display: block; width: min(100%, 340px); height: auto; }
.tagline { margin: 0 0 40px; font-size: clamp(24px, 2.3vw, 28px); font-weight: 400; line-height: 1.4; letter-spacing: -0.025em; color: var(--muted); text-wrap: balance; }
:lang(ko) .tagline { word-break: keep-all; }
.store-buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-button { display: inline-flex; transition: transform 0.2s ease; border-radius: 8px; }
.store-button:active { transform: scale(0.95); }
.store-button img { display: block; height: 52px; width: auto; }
.phones { position: relative; width: 100%; aspect-ratio: 2 / 3; animation: rise 0.7s ease 0.08s both; }
.phone { position: absolute; display: block; height: auto; border-radius: 32px; user-select: none; pointer-events: none; }
.phone.back { width: 62%; right: 0; top: 0; opacity: 0.45; filter: blur(1.6px); }
.phone.front { width: 63%; left: 3%; top: 8%; filter: drop-shadow(3px 5px 30px rgb(0 0 0 / 0.12)); }
.home-page .footer { margin-top: auto; padding: 48px 24px 32px; }
.home-page .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; width: min(100%, 1120px); margin: 0 auto; font-size: 14px; line-height: 1.5; }
.footer strong { grid-column: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.footer p { margin: 0; }
.home-page .footer-links { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.footer-links span { color: var(--border); }
.footer-links a { padding: 8px 0; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-page .copyright { grid-column: 1 / -1; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 833px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; text-align: center; padding: 48px 24px 64px; }
  .app-icon { width: 80px; height: 80px; }
  .app-icon, .logo { margin-left: auto; margin-right: auto; }
  .logo { width: min(100%, 300px); }
  .brand-title { margin-bottom: 16px; }
  .tagline { margin-bottom: 32px; }
  .store-buttons { justify-content: center; }
  .phones { width: min(100%, 440px); margin: 0 auto; }
}
@media (max-width: 480px) {
  .hero { padding: 32px 20px 48px; }
  .logo { width: min(100%, 280px); }
  .tagline { font-size: 24px; }
  .store-buttons { gap: 12px; }
  .store-button img { height: 44px; }
  .phones { width: 100%; aspect-ratio: 335 / 545; }
  .phone { border-radius: 24px; }
  .phone.front { width: 68%; left: 0; }
  .phone.back { width: 66%; }
  .home-page .footer { padding: 32px 20px 24px; }
  .home-page .footer-inner { display: block; }
  .footer strong { display: block; margin-bottom: 8px; }
  .home-page .footer-links { margin-top: 16px; }
  .home-page .copyright { margin-top: 20px; padding-top: 20px; }
}