/* =========================================================================
   화사한 봄날 — common.css
   공통 디자인 토큰 + 상단 내비 + 푸터 + 공통 버튼/뱃지/움직임/접근성
   (페이지 고유 레이아웃은 각 페이지의 인라인 <style>에 둔다)
   ========================================================================= */

/* ---------- 1. 디자인 토큰 + base ---------- */
:root{
  --cream:#F9F5EF;     /* 배경 */
  --rose:#C97B6E;      /* 강조·CTA */
  --rose-dark:#B5685C; /* CTA hover */
  --gold:#C4A07A;      /* 라벨·보조강조 */
  --earth:#6B5040;     /* 본문 텍스트 */
  --charcoal:#27201C;  /* 제목 텍스트·푸터 배경 */
  --blush:#F0D5C0;     /* 그라디언트 보조 */
  --sage:#8AAF85;      /* LIVE 포인트 */
  --mist:#EAF0E8;      /* 히어로/인용 배경 */
  --white:#FFFFFF;

  --radius-card:14px;
  --radius-pill:28px;
  --maxw:1100px;       /* 콘텐츠 최대 너비 */

  --font-serif:'Cormorant Garamond','Noto Serif KR',serif;               /* 제목 */
  --font-body:'Pretendard','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* 본문 */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--earth);
  font-family:var(--font-body);
  word-break:keep-all;          /* 한글 어절 단위 줄바꿈 */
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-serif); color:var(--charcoal); font-weight:400;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding-left:24px; padding-right:24px;}

/* ---------- 2. 상단 내비 (nav) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(249,245,239,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(196,160,122,0.18);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:62px;
}
.nav-logo{
  font-family:var(--font-serif); font-size:21px; letter-spacing:.02em;
  color:var(--earth); line-height:1;
}
.nav-logo small{
  display:block; font-family:var(--font-body); font-size:9px;
  letter-spacing:.18em; color:var(--gold); margin-top:3px;
}
.nav-links{display:flex; align-items:center; gap:26px;}
.nav-links a{
  font-size:14px; color:var(--earth); opacity:.7; transition:opacity .2s;
}
.nav-links a:hover{opacity:1;}
.lang-toggle{
  font-family:var(--font-body); font-size:12px; letter-spacing:.04em;
  color:var(--earth); background:none;
  border:1px solid var(--gold); border-radius:var(--radius-pill);
  padding:5px 12px; cursor:pointer; transition:background .2s,color .2s;
}
.lang-toggle:hover{background:var(--gold); color:#fff;}
.nav-toggle{
  display:none; background:none; border:1px solid var(--gold);
  border-radius:10px; padding:6px 12px; font-size:18px; line-height:1;
  color:var(--earth); cursor:pointer;
}

/* 모바일 내비 (≤768px): 링크를 오버레이 메뉴로 */
@media (max-width:768px){
  .nav-toggle{display:inline-block;}
  .nav-links{
    position:absolute; top:62px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid rgba(196,160,122,0.2);
    box-shadow:0 8px 20px rgba(107,80,64,.08);
    padding:8px 0;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{
    padding:13px 24px; opacity:.85;
    border-bottom:1px solid rgba(196,160,122,0.1);
  }
  .nav-links .lang-toggle{margin:10px 24px; align-self:flex-start;}
}

/* ---------- 3. 푸터 (footer) ---------- */
.site-footer{background:var(--charcoal); color:rgba(255,255,255,.55);}
.site-footer .footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  padding:52px 0 32px; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-logo{font-family:var(--font-serif); font-size:22px; color:rgba(255,255,255,.9);}
.footer-logo small{display:block; font-family:var(--font-body); font-size:9px; letter-spacing:.18em; color:var(--gold); margin-top:4px;}
.footer-desc{font-size:13px; line-height:1.75; color:rgba(255,255,255,.4); margin-top:14px; max-width:260px;}
.footer-col h4{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 14px;}
.footer-col a{display:block; font-size:13px; color:rgba(255,255,255,.5); margin-bottom:9px; transition:color .2s;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{padding:22px 0 34px;}
.footer-copy{font-size:12px; color:rgba(255,255,255,.4); margin:0 0 8px;}
.footer-biz{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:11px; color:rgba(255,255,255,.32);}
.footer-bottom .lang-toggle{margin-top:16px; border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.6);}
.footer-bottom .lang-toggle:hover{background:rgba(255,255,255,.12); color:#fff;}

@media (max-width:768px){
  .site-footer .footer-top{grid-template-columns:1fr; gap:28px;}
}

/* ---------- 4. 공통 버튼 / 뱃지 ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--rose); color:#fff; padding:12px 24px;
  border-radius:var(--radius-pill); font-size:15px; font-weight:500;
  border:none; cursor:pointer; transition:background .25s ease;
}
.btn-primary:hover{background:var(--rose-dark);}
.btn-primary i, .btn-primary svg{transition:transform .22s ease;}
.btn-primary:hover i, .btn-primary:hover svg{transform:translateX(4px);}

.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  background:none; color:var(--earth); padding:11px 22px;
  border:1px solid var(--gold); border-radius:var(--radius-pill);
  font-size:15px; font-weight:500; cursor:pointer;
  transition:background .25s,color .25s;
}
.btn-ghost:hover{background:var(--gold); color:#fff;}

.badge{font-size:11px; padding:3px 10px; border-radius:20px; font-weight:500; display:inline-block; letter-spacing:.04em;}
.badge-live{background:#E4EFE2; color:#3F6B3A;}
.badge-web {background:#F3E6D6; color:#8A6636;}
.badge-soon{background:#EEE9E3; color:#8A7563;}

/* ---------- 5. 움직임(공통) + 접근성 ---------- */
/* 등장 애니메이션은 JS가 살아있을 때(.js)만 요소를 숨긴다.
   JS가 실패해도 본문·폼·광고는 항상 보이도록 한다. (안전장치) */
.js .reveal{opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;}
.js .reveal.in-view{opacity:1; transform:none;}

@media (hover:hover){                          /* 마우스 있는 기기에서만 호버 리프트 */
  .app-card{transition:transform .25s ease, box-shadow .25s ease;}
  .app-card:hover{transform:translateY(-5px); box-shadow:0 10px 24px rgba(107,80,64,.16);}
}

@media (prefers-reduced-motion: reduce){       /* '동작 줄이기' 켜면 모두 정지 */
  html{scroll-behavior:auto;}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .app-card{transition:none !important;}
  .badge-live-dot{animation:none !important;}
}