/* ==========================================================================
   그루밍노트 공통 헤더·푸터 (홈 + 내부 페이지 공용)
   ========================================================================== */
:root{--ink:#203638;--muted:#617173;--teal:#176968;--teal-dark:#173a3e;--line:#e0e8e7;--wash:#f3f7f7;--coral:#ae583e}

.skip{position:fixed;left:20px;top:-100px;background:var(--teal-dark);color:#fff;padding:10px 20px;z-index:100}
.skip:focus{top:10px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);height:auto}
.header-inner{min-height:84px;display:flex;align-items:center;gap:24px}
.header .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;font-size:23px;font-weight:750;letter-spacing:-1px;line-height:1.2;color:var(--ink);white-space:nowrap}
.header .brand img{width:40px;height:40px;border-radius:10px}
.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:6px;font-weight:550;color:var(--muted)}
.brand-accent{color:var(--coral)}
.desktop-nav{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:15px;font-weight:600;white-space:nowrap;color:var(--ink)}
.desktop-nav a{position:relative;padding:6px 0}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--teal)}
.desktop-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal)}
.header-cta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 13px;border-radius:7px;font-size:13px;font-weight:650;line-height:1;white-space:nowrap;border:1px solid transparent;transition:opacity .15s}
.cta-btn:hover{opacity:.85}
.cta-naver{background:#03c75a;color:#fff}
.cta-kakao{background:#fee500;color:#191600}
.cta-consult{background:var(--teal-dark);color:#fff}
.menu-toggle{display:none;background:none;border:none;width:44px;height:44px;padding:10px;cursor:pointer;flex-shrink:0}
.menu-toggle span{display:block;height:2px;background:var(--ink);margin:6px 0}
#mobile-nav{background:#fff;border-top:1px solid var(--line);padding:10px 0 16px;box-shadow:0 8px 18px #2036380d}
#mobile-nav a{display:block;padding:10px 0;font-weight:600;color:var(--ink)}
#mobile-nav a.active{color:var(--teal)}
#mobile-nav[hidden]{display:none!important}

@media (max-width:1100px){
  .desktop-nav{display:none}
  .header-cta{margin-left:auto}
  .menu-toggle{display:block}
}
@media (max-width:560px){
  .header{position:static}
  .header-inner{min-height:0;flex-wrap:wrap;gap:8px 10px;padding:12px 0}
  .header .brand{font-size:20px;gap:8px}
  .header .brand img{width:32px;height:32px}
  .brand small{font-size:9px}
  .menu-toggle{order:2;margin-left:auto;width:38px;padding:8px}
  .header-cta{order:3;width:100%;margin-left:0}
  .cta-btn{height:30px;padding:0 12px;font-size:12px}
}

/* ---------- Footer ---------- */
.footer{background:var(--teal-dark);color:#e6efeb;padding:44px 0 20px;margin-top:0;font-size:13px;line-height:1.7}
.footer a{color:inherit}
.footer-top{display:grid;grid-template-columns:1.25fr 1fr .8fr;gap:60px}
.footer .footer-brand{display:block;font-size:22px;font-weight:750;letter-spacing:-1px;line-height:1.2;color:#fff}
.footer-brand .brand-accent{color:#e1a58d}
.footer-brand small{font-size:10px;color:#a6beba;margin-top:8px}
.footer p{font-size:13px;color:#a6beba;line-height:1.8;margin:18px 0 0}
.footer nav{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;align-content:start;font-size:13px}
.footer a:hover{color:#c9ece3}
.footer-contact{display:flex;align-content:flex-start;gap:10px;flex-wrap:wrap;font-size:13px}
.footer-contact>span{width:100%;color:#a6beba}
.footer-contact a{border:1px solid #527371;border-radius:5px;padding:7px 11px;white-space:nowrap}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;border-top:1px solid #456664;margin-top:34px;padding-top:14px}
.footer-bottom p{font-size:10px;margin:0}
.footer-bottom .footer-disclosure{flex-basis:100%;display:block!important}
.footer-disclosure a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:800px){
  .footer-top{grid-template-columns:1.1fr 1fr;gap:30px}
  .footer-contact{grid-column:1/-1}
  .footer-bottom p:nth-child(2){display:none}
}
@media (max-width:480px){
  .footer{padding-top:34px}
  .footer-top{grid-template-columns:1fr;gap:28px}
}