﻿/* ===== 붕어빵봇 — 미니멀 & 웜톤 (STATIC + PITCH) ===== */
:root{
  --bg: #fdf8f0;          /* Warm cream */
  --text: #795548;        /* Soft brown */
  --muted: #a1887f;
  --accent: #ff8a65;      /* Warm coral */
  --accent-2: #ffb74d;    /* Warm amber */
  --ring: 0 0 0 3px rgba(255,138,101,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR",
               Apple SD Gothic Neo, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ===== Hero (가운데 정렬, 정적) ===== */
.hero{
  max-width:1100px; margin:0 auto; padding:24px;
  display:grid; place-items:center;
  min-height:60vh;      /* 상단 히어로 높이 */
}
.hero--center{ grid-template-columns:1fr }
.hero-content{ text-align:center; }
.hero-content--plain{ background:none; border:none; box-shadow:none; padding:0; }

/* 로고 (정적) */
.logo-wrap{ display:inline-block; margin:0 auto 8px; }
.hero-logo{
  display:block;
  width:220px;               /* 필요시 160~220px 사이 조절 */
  max-width:60vw;
  height:auto;
  filter:none;
  cursor:pointer;
  transition: transform 0.3s ease-in-out;
}

.hero-logo:hover {
    transform: rotate(-5deg) scale(1.05);
}

/* 제목 */
.brand-title{
  margin:8px 0 18px;
  font-size:56px; line-height:1.05; font-weight:800; letter-spacing:.2px;
  color:var(--text);
}

/* 버튼 */
#go-to-login{
  display: inline-block;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}


/* 링크 유틸 */
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

/* ===== 큰 설명 섹션 (빵떡/나디아 스타일 참고) ===== */
.pitch{
  padding: 48px 24px 64px;
}
.pitch-inner{
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.lead{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}
.lead strong{ font-weight: 900; }
.sublead{
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
  max-width: 760px;
}

/* 반응형 */
@media (max-width: 720px){
  .brand-title{ font-size:42px }
  #go-to-login{ width:100%; max-width:360px }
  .lead{ font-size:26px }
  .sublead{ font-size:14px }
}
/* === Scroll Reveal for .pitch === */
.pitch.reveal {         /* 초기 상태: 살짝 내려가 있고 투명 */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.pitch.reveal.reveal--in {   /* 보이기 시작하면 자연스럽게 등장 */
  opacity: 1;
  transform: none;
}

/* 텍스트를 살짝 계단식으로 */
.pitch.reveal .lead,
.pitch.reveal .sublead {
  transition: opacity .6s ease, transform .6s ease;
  transform: translateY(8px);
  opacity: 0;
}
.pitch.reveal.reveal--in .lead {
  transform: none;
  opacity: 1;
  transition-delay: .05s;
}
.pitch.reveal.reveal--in .sublead {
  transform: none;
  opacity: 1;
  transition-delay: .15s;
}

/* 접근성: 모션 최소화 사용 시 바로 표시 */
@media (prefers-reduced-motion: reduce){
  .pitch.reveal,
  .pitch.reveal .lead,
  .pitch.reveal .sublead {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.click-prompt {
  font-size: 14px;
  color: var(--muted);
  margin-top: 12px;
}