/* ============================================================
   Smartix Site Chrome — 통합 헤더·푸터 CSS (단일 소스)
   사용: <link rel="stylesheet" href="/assets/site-chrome.css">
   ============================================================ */

/* === Standard Header (topbar) === */
.topbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(12,13,24,.08);box-shadow:0 1px 0 rgba(28,18,80,.04)}
.topbar-inner{height:78px;max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:950;font-size:22px;letter-spacing:-.04em;color:#11182f;text-decoration:none}
.topbar .brand-icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#6c3bff,#8257ff);color:#fff;font-weight:950;font-size:18px;box-shadow:0 12px 26px rgba(108,59,255,.28)}
.topbar .nav{display:flex;align-items:center;gap:28px;font-weight:800;font-size:15px;letter-spacing:-.02em}
.topbar .nav-item{display:flex;align-items:center}
.topbar .nav .nav-top{color:#31364e;text-decoration:none;white-space:nowrap}
.topbar .nav .nav-top:hover{color:#6c3bff !important;transition:color .15s ease}
.topbar .nav-sub-btn{display:inline-flex;align-items:center;background:transparent;border:0;color:#646b80;cursor:pointer;padding:0 0 0 4px;line-height:1;font-size:13px;pointer-events:none}
.topbar .nav-item.has-sub{position:relative}
.topbar .nav-sub{display:none;list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:-12px;min-width:200px;background:#fff;border:1px solid #e7e0ff;border-radius:14px;box-shadow:0 18px 40px rgba(28,18,80,.12);z-index:60}
@media(min-width:1101px){
.topbar .nav-item.has-sub:hover .nav-sub-btn .nav-caret,
.topbar .nav-item.has-sub:focus-within .nav-sub-btn .nav-caret{color:#6c3bff;transform:rotate(-180deg);transition:transform .22s ease}
.topbar .nav-item.has-sub:hover .nav-sub,
.topbar .nav-item.has-sub:focus-within .nav-sub{display:block}
.topbar .nav-item.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
}
.topbar .nav-sub li{margin:0}
.topbar .nav-sub a{display:block;padding:10px 22px;font-size:14px;font-weight:700;color:#4d5368;white-space:nowrap;text-decoration:none;letter-spacing:-.02em;transition:background .15s ease,color .15s ease}
.topbar .nav-sub a:hover{background:#f4eeff;color:#6c3bff}
.topbar .consult{display:inline-flex !important;align-items:center !important;justify-content:center !important;height:44px !important;min-height:44px !important;padding:0 20px !important;border-radius:14px !important;background:#fff !important;color:#6c3bff !important;font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;font-weight:900 !important;font-size:14px !important;letter-spacing:normal !important;line-height:1 !important;text-decoration:none !important;white-space:nowrap !important;box-shadow:0 4px 14px rgba(108,59,255,.30) !important;box-sizing:border-box !important;border:1.5px solid #b9a3ff !important;min-width:0 !important;width:auto !important}
.topbar .consult:hover{transform:translateY(-1px)}
.topbar .menu-toggle{display:none;background:transparent;border:0;padding:8px;cursor:pointer;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.topbar .menu-toggle span{display:block;width:22px;height:2px;background:#11182f;border-radius:2px;transition:.2s}
.topbar .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topbar .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.topbar .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1100px){
  .topbar-inner{height:68px}
  .topbar .menu-toggle{display:flex;order:1}
  .topbar .brand{order:2}
  .topbar .consult{order:3}
  .topbar .nav{position:fixed !important;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid #e7e0ff;box-shadow:0 18px 40px rgba(28,18,80,.1);flex-direction:column !important;align-items:stretch !important;gap:0 !important;padding:14px 0 !important;display:none !important;z-index:999;height:auto !important;max-height:calc(100vh - 68px) !important;overflow-y:auto !important}
  .topbar .nav.open{display:flex !important}
  .topbar .nav-item{flex-direction:column;align-items:stretch;border-bottom:1px solid #e7e0ff}
  .topbar .nav-item:last-child{border-bottom:0}
  .topbar .nav-item.has-sub{position:relative}
  .topbar .nav .nav-top{padding:14px 56px 14px 28px;font-size:16px;display:block;width:100%}
  .topbar .nav-sub-btn{display:block !important;position:absolute;right:14px;top:8px;width:40px;height:40px;font-size:18px;color:#646b80;border-radius:8px;transition:transform .2s ease;pointer-events:auto !important;cursor:pointer;background:transparent;border:0;z-index:2}
  .topbar .nav-sub-btn .nav-caret{display:inline-block;transition:transform .2s ease}
  .topbar .nav-item.expanded .nav-sub-btn .nav-caret{transform:rotate(-180deg)}
  .topbar .nav-sub{display:none;position:static !important;top:auto !important;left:auto !important;right:auto !important;list-style:none;margin:0;padding:0;min-width:0 !important;width:100% !important;background:#faf8ff !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;z-index:auto}
  .topbar .nav-item.expanded .nav-sub{display:block}
  .topbar .nav-sub li{margin:0}
  .topbar .nav-sub a{display:block;padding:12px 28px 12px 44px;font-size:14.5px;color:#4d5368;font-weight:600;letter-spacing:-.02em;text-decoration:none;border-top:1px solid #ece6ff}
  .topbar .nav-sub a:hover{color:#6c3bff;background:#fff}
  .topbar .consult{display:none}
}
@media(max-width:640px){
  /* 모바일: 햄버거 좌측 · 로고 중앙 · 상담 우측 */
  .topbar-inner{position:relative;justify-content:space-between;gap:8px;padding:0 14px}
  .topbar .brand{position:absolute;left:50%;transform:translateX(-50%);font-size:18px;gap:8px;pointer-events:auto}
  .topbar .brand-icon{width:32px;height:32px;font-size:16px;border-radius:9px}
  .topbar .menu-toggle{width:40px;height:40px;position:relative;z-index:2}
  .topbar .consult{height:38px !important;padding:0 14px !important;font-size:13px !important;position:relative;z-index:2}
}

/* === Standard Footer (site-footer) === */
.site-footer{background:#0c0d18;color:#dcdfe8;padding:72px 0 32px}
.site-footer .inner{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.site-footer .footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr 1fr 1fr;gap:32px}
.site-footer .footer-brand h2{margin:0 0 14px;font-size:32px;font-weight:950;letter-spacing:-.06em;color:#fff;background:linear-gradient(135deg,#a065ff,#fff 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.site-footer .footer-brand p{margin:0 0 18px;color:rgba(220,223,232,.72);font-size:14px;line-height:1.75;word-break:keep-all}
.site-footer .footer-contact{display:grid;gap:6px;color:rgba(220,223,232,.62);font-size:12.5px;line-height:1.7;margin-bottom:16px}
.site-footer .footer-cta-mini{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:10px;background:linear-gradient(135deg,#6c3bff,#5525e7);color:#fff;font-weight:900;font-size:13px;text-decoration:none}
.site-footer .footer-col h3{margin:0 0 14px;font-size:14px;font-weight:950;color:#fff;letter-spacing:-.02em}
.site-footer .footer-col h3 a{color:#fff;text-decoration:none;transition:color .15s ease}
.site-footer .footer-col h3 a:hover{color:#c8b3ff}
.site-footer .footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer .footer-col li{margin:0}
.site-footer .footer-col a{color:rgba(220,223,232,.72);font-size:13.5px;text-decoration:none;line-height:1.5}
.site-footer .footer-col a:hover{color:#fff}
.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);color:rgba(220,223,232,.5);font-size:12.5px;flex-wrap:wrap}
/* 푸터에 추가 가로 구분선이 생기지 않도록 명시적으로 차단 (footer-bottom border-top 1개만 유지) */
.site-footer > hr,.site-footer .footer-top{border-top:0 !important;border-bottom:0 !important}
.site-footer .footer-bottom + *,.site-footer hr{display:none !important}
.site-footer .footer-policy{display:flex;gap:18px}
.site-footer .footer-policy a{color:rgba(220,223,232,.62);text-decoration:none}
.site-footer .footer-policy a:hover{color:#fff}
@media(max-width:1100px){.site-footer .footer-top{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:640px){.site-footer{padding:48px 0 24px}.site-footer .footer-top{grid-template-columns:1fr;gap:32px}.site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}}

/* === Reset (헤더·푸터 한정) === */
.topbar *,.site-footer *{box-sizing:border-box}

/* === Logo (PNG) === */
.topbar .brand{display:flex;align-items:center;text-decoration:none}
.topbar .brand-icon{display:none}
.topbar .brand-logo{display:block;height:44px;width:auto;max-width:220px}
.site-footer .footer-logo{display:block;height:54px;width:auto;max-width:230px;margin-bottom:16px}
@media(max-width:1100px){
  .topbar .brand-logo{height:36px;max-width:180px}
}
@media(max-width:640px){
  .topbar .brand-logo{height:30px;max-width:150px}
  .site-footer .footer-logo{height:44px;max-width:190px}
}