/* tppoint.kr 블로그 공용 스타일 — 홈페이지 디자인 토큰과 동일 */
:root{
  --paper:#FAFAF8;
  --ink:#16171B;
  --muted:#585C64;
  --faint:#989CA6;
  --accent:#D6342A;
  --accent-deep:#B0281F;
  --accent-soft:rgba(214,52,42,.07);
  --line:rgba(22,23,27,.14);
  --hair:rgba(22,23,27,.08);
  --card:#FFFFFF;
  --dark-band:#16171B;
  --dark-band-ink:#F2F2EF;
  --font:'Pretendard Variable','Pretendard',-apple-system,'Apple SD Gothic Neo',system-ui,'Segoe UI',sans-serif;
  --wrap:760px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E0F13;--ink:#EDEEF1;--muted:#A0A4AE;--faint:#666B78;
    --accent:#F0584D;--accent-deep:#FF7A6E;--accent-soft:rgba(240,88,77,.1);
    --line:rgba(237,238,241,.16);--hair:rgba(237,238,241,.09);
    --card:#16171D;--dark-band:#16171D;--dark-band-ink:#F2F2EF;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--paper);color:var(--ink);
  line-height:1.75;word-break:keep-all;overflow-wrap:break-word;
  font-size:17px;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:inherit}

nav{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1080px;margin:0 auto;padding:0 24px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:.02em;text-decoration:none}
.logo em{font-style:normal;color:var(--accent)}
.logo-mark{
  flex:none;width:24px;height:24px;border-radius:4px;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;letter-spacing:-.02em;
}
.logo-mark i{font-style:normal;color:var(--accent)}
.nav-links{display:flex;gap:22px;align-items:center;list-style:none}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  background:var(--accent);color:#fff !important;padding:9px 18px;border-radius:8px;
  font-weight:700;font-size:14px !important;
}
.nav-cta:hover{background:var(--accent-deep)}
@media (max-width:820px){.nav-links li:not(.keep){display:none}}

/* ---- 목록 ---- */
.blog-head{padding:72px 0 34px}
.blog-head .eyebrow{font-size:13px;font-weight:700;letter-spacing:.13em;color:var(--accent);text-transform:uppercase}
.blog-head h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;margin-top:12px;line-height:1.3}
.blog-head p{margin-top:14px;color:var(--muted)}
.post-list{list-style:none;padding-bottom:80px}
.post-list li{border-bottom:1px solid var(--hair)}
.post-list a{display:block;text-decoration:none;padding:26px 0}
.post-list time{font-size:13px;color:var(--faint)}
.post-list h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-top:6px;line-height:1.4}
.post-list a:hover h2{color:var(--accent)}
.post-list p{margin-top:8px;font-size:15px;color:var(--muted)}

/* ---- 본문 ---- */
article.post{padding:72px 0 40px}
.post .eyebrow{font-size:13px;font-weight:700;letter-spacing:.13em;color:var(--accent);text-transform:uppercase}
.post h1{font-size:clamp(26px,3.8vw,38px);font-weight:800;letter-spacing:-.02em;margin-top:12px;line-height:1.35}
.post .meta{margin-top:14px;font-size:14px;color:var(--faint)}
.post .body{margin-top:40px}
.post .body h2{font-size:23px;font-weight:800;letter-spacing:-.01em;margin:48px 0 14px;line-height:1.4}
.post .body h3{font-size:19px;font-weight:800;margin:36px 0 10px}
.post .body p{margin:16px 0;color:var(--ink)}
.post .body strong{font-weight:700}
.post .body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.post .body ul,.post .body ol{margin:16px 0;padding-left:24px}
.post .body li{margin:8px 0}
.post .body blockquote{
  margin:24px 0;padding:14px 20px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 10px 10px 0;color:var(--muted);
}
.post .body blockquote p{margin:4px 0;color:inherit}
.post .body code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.88em;
  background:color-mix(in srgb,var(--ink) 6%,var(--paper));padding:2px 6px;border-radius:6px;
}
.post .body pre{
  margin:20px 0;padding:18px 20px;border-radius:12px;overflow-x:auto;
  background:var(--dark-band);color:var(--dark-band-ink);
}
.post .body pre code{background:none;padding:0;color:inherit}
.post .body img{max-width:100%;border-radius:12px;margin:20px 0}
.post .body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px;display:block;overflow-x:auto}
.post .body th,.post .body td{padding:10px 14px;border:1px solid var(--hair);text-align:left}
.post .body th{background:color-mix(in srgb,var(--ink) 4%,var(--paper));font-weight:700}
.post .body hr{border:none;border-top:1px solid var(--hair);margin:36px 0}

/* ---- 글 하단 CTA ---- */
.post-cta{
  margin:56px 0 80px;background:var(--dark-band);color:var(--dark-band-ink);
  border-radius:16px;padding:34px 32px;
}
.post-cta h2{font-size:21px;font-weight:800;line-height:1.45}
.post-cta p{margin-top:10px;font-size:15px;color:color-mix(in srgb,var(--dark-band-ink) 72%,transparent)}
.post-cta a.btn{
  display:inline-block;margin-top:20px;background:var(--accent);color:#fff;
  text-decoration:none;font-weight:700;border-radius:10px;padding:13px 24px;font-size:15px;
}
.post-cta a.btn:hover{background:var(--accent-deep)}

footer{border-top:1px solid var(--hair);padding:34px 0;font-size:13px;color:var(--faint)}
footer .wrap{max-width:1080px}