/* 인사이트 블로그 공통 — 디자인 토큰·리셋·버튼·헤더·뱃지·푸터.
   blog.html / blog-detail.html 두 시안에서 **완전히 동일했던** 구획만 모았다.
   페이지 고유 스타일은 list.css / detail.css 에 있다. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --mint:#1ed760;
  --green:#00974b;
  --ink:#333333;
  --muted:#767676;
  --muted-2:#999999;
  --bg-mint:#f7fcfa;
  --dark:#3d3f3e;
  --line:#d9dedc;
  --line-soft:#eeeeee;
  --on-dark:#d9dedc;
  --ease:cubic-bezier(.22,.61,.36,1);
  --grad-btn:linear-gradient(90deg,#00974b 0%,#1ed760 100%);
  --grad-text:linear-gradient(90deg,#1ed760 0%,#00974b 100%);
}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ink);background:#fff;line-height:1.5;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- 버튼 (landing 동일) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:100px;padding:8px 18px;font-size:16px;font-weight:500;letter-spacing:-.025em;line-height:1.5;transition:transform .25s var(--ease),box-shadow .25s var(--ease);cursor:pointer;border:none}
.btn:hover{transform:translateY(-2px)}
.btn-grad{background:var(--grad-btn);color:#fff}
.btn-grad:hover{box-shadow:0 14px 32px rgba(0,151,75,.28)}
.btn-white{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-white:hover{box-shadow:0 10px 24px rgba(51,51,51,.10)}

/* ---------- 헤더 (landing 동일) ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:rgba(247,252,250,.55);transition:background .3s,box-shadow .3s}
.hd.scrolled{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.hd-in{height:100%;padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hd-left{display:flex;align-items:center;gap:24px;min-width:0}
.hd-logo img{height:23px;width:auto}
.hd-nav{display:flex;align-items:center;gap:32px}
.hd-nav a{font-size:16px;letter-spacing:-.025em;color:var(--ink);font-weight:400;transition:color .2s}
.hd-nav a:hover{color:var(--green)}
.hd-right{display:flex;align-items:center;gap:8px;flex:none}
@media(max-width:1024px){.hd-in{padding:0 24px}}
@media(max-width:767px){
  .hd{height:64px}
  /* 데스크톱 메뉴와 우측 버튼은 햄버거 패널로 옮겨간다(static/site-nav.js 가
     이 링크들을 그대로 읽어 패널을 만든다). 여기서 감추기만 한다. */
  .hd-nav{display:none}
  .hd-right{display:none}
  .hd-right .btn{font-size:14px;padding:8px 14px}
  .hd-logo img{height:19px}
}

/* ---------- 뱃지 ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:4px 8px;font-size:14px;line-height:1.5;letter-spacing:-.025em}
.chip.sm{font-size:12px}
.chip-new{background:var(--green);border:1px solid var(--green);color:#fff}
.chip-new::before{content:"";width:4px;height:4px;border-radius:50%;background:#fff}
.chip-cat{background:var(--bg-mint);border:1px solid rgba(0,151,75,.35);color:var(--green)}

/* ---------- 푸터 (landing 동일) ---------- */
.ftr{background:var(--dark);padding:48px;color:var(--on-dark);font-size:16px}
.ftr-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ftr-logo img{height:23px;width:auto}
.ftr-links{display:flex;align-items:center;gap:14px;letter-spacing:-.03em;flex-wrap:wrap}
.ftr-links a{transition:color .2s}
.ftr-links a:hover{color:var(--mint)}
.ftr-links .sep{opacity:.4}
.ftr-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:32px;letter-spacing:-.025em;line-height:1.7;flex-wrap:wrap}
.ftr-info a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:767px){.ftr{padding:36px 24px}.ftr-bottom{flex-direction:column}}