/* =============================================
   전기삼촌 공통 디자인 시스템 (common.css)
   — 모든 리뉴얼 페이지에서 공유
   ============================================= */

/* ========== CSS 변수 ========== */
:root {
  --primary: #0f172a;
  --primary-light: #1e293b;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --blue: #3b82f6;
  --blue-light: #dbeafe;
  --green: #10b981;
  --green-light: #d1fae5;
  --red: #ef4444;
  --red-light: #fee2e2;
  --text: #1e293b;
  --text-sec: #64748b;
  --text-light: #94a3b8;
  --border: #e2e8f0;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --bg-dark: #0f172a;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ========== 리셋 ========== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }

/* ========== 헤더 ========== */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(15,23,42,0.95);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .2s;
}
.site-header.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.3); }
.nav-container {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.nav-logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.25rem; color:#f1f5f9; }
.nav-logo img { height:28px; width:auto; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link {
  padding:8px 14px; font-size:.9rem; font-weight:500; color:rgba(255,255,255,.85);
  border-radius:var(--radius-sm); transition:all .2s; position:relative;
}
.nav-link:hover { color:#f59e0b; background:rgba(255,255,255,.06); }
.nav-link.active {
  color:#f59e0b; font-weight:700;
}
.nav-link.active::after {
  content:''; position:absolute; bottom:2px; left:14px; right:14px; height:2px;
  background:#f59e0b; border-radius:1px;
}
.nav-cta-btn {
  margin-left:12px; padding:10px 20px;
  background:linear-gradient(135deg, #f59e0b 0%, #f97316 100%); color:#0f172a;
  font-size:.875rem; font-weight:700; border-radius:100px; transition:all .25s var(--ease);
  box-shadow:0 2px 12px rgba(245,158,11,.25);
}
.nav-cta-btn:hover { background:linear-gradient(135deg, #d97706 0%, #ea580c 100%); transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,158,11,.4); }
.hamburger {
  display:none; flex-direction:column; background:none; border:none;
  cursor:pointer; padding:8px; gap:5px;
}
.hamburger span { display:block; width:22px; height:2px; background:#f1f5f9; border-radius:2px; transition:all .3s; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ========== 드로어 ========== */
.drawer-backdrop {
  position:fixed; inset:0; background:rgba(15,23,42,.5);
  z-index:999; opacity:0; visibility:hidden; transition:all .3s;
}
.drawer-backdrop.active { opacity:1; visibility:visible; }
.mobile-drawer {
  position:fixed; top:0; right:-320px; width:300px; height:100%;
  background:var(--bg); z-index:1000; transition:right .3s;
  box-shadow:-4px 0 24px rgba(0,0,0,.1); overflow-y:auto;
}
.mobile-drawer.active { right:0; }
.drawer-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.drawer-logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.1rem; color:var(--primary); }
.drawer-logo img { height:22px; width:auto; }
.drawer-close {
  background:none; border:none; font-size:1.5rem; color:var(--text-sec);
  cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm);
}
.drawer-menu { padding:12px 0; }
.drawer-link {
  display:flex; align-items:center; gap:12px; padding:14px 24px;
  font-size:.95rem; font-weight:500; color:var(--text); transition:all .2s;
}
.drawer-link:hover { background:var(--bg-alt); color:var(--accent); }
.drawer-link.active { color:#f59e0b; font-weight:700; background:rgba(245,158,11,.06); border-left:3px solid #f59e0b; }
.drawer-link.active .di { background:rgba(245,158,11,.12); }
.drawer-link .di {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-sm); background:var(--bg-alt); font-size:1.1rem;
}
.drawer-cta {
  display:block; margin:12px 20px; padding:14px;
  background:linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  color:#fff; border-radius:var(--radius-md); text-align:center; font-weight:700; font-size:.95rem;
  box-shadow:0 2px 12px rgba(245,158,11,.25); transition:all .2s var(--ease);
}
.drawer-cta:hover { background:linear-gradient(135deg, #d97706 0%, #ea580c 100%); }
.drawer-share { padding:20px 24px; border-top:1px solid var(--border); margin-top:8px; }
.drawer-share-title { font-size:.8rem; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.share-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.share-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:10px 4px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg); font-size:.7rem; font-weight:500; color:var(--text-sec);
  cursor:pointer; transition:all .2s;
}
.share-btn:hover { border-color:var(--text-light); background:var(--bg-alt); }
.share-btn .si { font-size:1.1rem; }

/* ========== 공통 레이아웃 ========== */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:80px 0; }
.section-label {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; background:var(--accent); color:var(--primary);
  font-size:.8rem; font-weight:700; border-radius:100px; margin-bottom:16px; letter-spacing:.02em;
}
.section-title { font-size:2.25rem; font-weight:800; line-height:1.3; color:var(--primary); margin-bottom:16px; }
.section-desc { font-size:1.1rem; color:var(--text-sec); line-height:1.7; max-width:560px; }
.section-header { text-align:center; margin-bottom:48px; }
.section-header .section-desc { margin:0 auto; }

/* ========== 버튼 ========== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; font-size:1rem; font-weight:600; border-radius:100px;
  border:none; cursor:pointer; transition:all .25s var(--ease);
}
.btn-accent { background:var(--accent); color:var(--primary); }
.btn-accent:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,158,11,.3); }
.btn-ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.2); }
.btn-ghost:hover { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.05); }

/* ========== CTA 박스 ========== */
.cta-section { background:var(--bg); padding:80px 0; }
.cta-box {
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
  border-radius:var(--radius-xl); padding:64px 48px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-box::before {
  content:''; position:absolute; top:-50%; right:-20%;
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(245,158,11,.1) 0%,transparent 70%);
  border-radius:50%;
}
.cta-box h2 { font-size:2rem; font-weight:800; color:#fff; margin-bottom:12px; position:relative; }
.cta-box p { font-size:1.05rem; color:#94a3b8; margin-bottom:32px; position:relative; }
.cta-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ========== 하단 고정 CTA (모바일) ========== */
.sticky-cta {
  display:none; position:fixed; bottom:0; left:0; right:0;
  z-index:90; padding:12px 16px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-top:1px solid var(--border); box-shadow:0 -4px 16px rgba(0,0,0,.08);
}
.sticky-cta a {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; background:var(--accent); color:var(--primary);
  font-size:1rem; font-weight:700; border-radius:var(--radius-md);
  transition:background .2s;
}
.sticky-cta a:hover { background:var(--accent-hover); }

/* ========== 푸터 (footer.js 동적 렌더링) ========== */
.main-footer { background:var(--bg-dark); color:#cbd5e1; margin-top:0; }
.main-footer a { color:#cbd5e1; text-decoration:none; transition:color .2s; }
.main-footer a:hover { color:var(--accent); }
.main-footer .footer-container { max-width:1200px; margin:0 auto; padding:40px 24px 24px; }
.main-footer .footer-content { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:32px; }
.main-footer .footer-main h4 { color:#f1f5f9; margin:0 0 8px; font-size:1.15rem; font-weight:800; }
.main-footer .footer-main p { margin:0 0 20px; font-size:.875rem; line-height:1.5; color:#94a3b8; }
.main-footer .footer-cta .footer-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:var(--primary); padding:10px 20px;
  border-radius:100px; font-size:.875rem; font-weight:700; transition:all .2s;
}
.main-footer .footer-cta .footer-btn:hover { background:var(--accent-hover); color:var(--primary); transform:translateY(-1px); }
.main-footer .footer-services h4 { color:#f1f5f9; margin:0 0 16px; font-size:.95rem; font-weight:700; }
.main-footer .service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.main-footer .service-grid a { font-size:.85rem; padding:6px 0; color:#94a3b8; transition:all .2s; }
.main-footer .service-grid a:hover { color:var(--accent); padding-left:4px; }
.main-footer .footer-bottom { border-top:1px solid rgba(148,163,184,.15); padding-top:20px; text-align:center; }
.main-footer .footer-info { display:flex; justify-content:center; gap:8px; margin-bottom:8px; font-size:.8rem; color:#64748b; }
.main-footer .footer-bottom p { margin:0; font-size:.75rem; color:#475569; }

/* ========== 히어로 모션 ========== */
@keyframes heroCardIn {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes heroFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
/* 히어로 텍스트 등장 애니메이션 */
.hero-badge-label { opacity:0; animation:heroCardIn .5s var(--ease) .05s forwards; }
.hero-desc { opacity:0; animation:heroCardIn .5s var(--ease) .15s forwards; }
.hero-buttons { opacity:0; animation:heroCardIn .5s var(--ease) .25s forwards; }

/* ========== 스크롤 애니메이션 ========== */
.reveal {
  opacity:0; transform:translateY(32px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-32px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(32px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* ========== 반응형 — 공통 ========== */
@media (max-width:768px) {
  .nav-links, .nav-cta-btn { display:none; }
  .hamburger { display:flex; }
  .nav-container { height:56px; padding:0 16px; }
  .container { padding:0 16px; }
  .section { padding:56px 0; }
  .section-title { font-size:1.75rem; }
  .section-desc { font-size:1rem; }
  .cta-box { padding:40px 24px; }
  .cta-box h2 { font-size:1.5rem; }
  .cta-buttons { flex-direction:column; align-items:center; }
  .btn { width:100%; max-width:300px; }
  .sticky-cta { display:block; }
  body { padding-bottom:72px; }
  .main-footer .footer-content { grid-template-columns:1fr; gap:24px; }
  .main-footer .service-grid { grid-template-columns:repeat(3,1fr); }
  .main-footer .footer-info { flex-direction:column; gap:2px; }
  .main-footer .footer-info span:nth-child(2) { display:none; }
}
@media (max-width:480px) {
  .section-title { font-size:1.5rem; }
}