/* 블로그(/blog/) 공용 스타일. 목록·글 페이지가 함께 쓴다. 톤은 terms.html 의 legal-prose 를 따른다. */
html { scroll-behavior: smooth; }
body {
  font-family: "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  color: #0A0A0A;
  background: #FFFFFF;
}
.caption { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; }
.body-15 { font-size: 15px; line-height: 1.65; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: background-color .18s ease, border-color .18s ease; white-space: nowrap; }
.btn-primary { background: #0A0A0A; color: #FFFFFF; }
.btn-primary:hover { background: #1f1f1f; }
.nav-line { border-bottom: 1px solid #E5E7EB; }
footer a:hover { color: #0A0A0A; }

/* ── 글 머리 ── */
.post-wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.post-crumb { font-size: 13px; color: #6B7280; }
.post-crumb a:hover { color: #0A0A0A; }
.post-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.22; letter-spacing: -0.022em; font-weight: 700; margin-top: 18px; text-wrap: balance; }
.post-lead { font-size: 17px; line-height: 1.7; color: #374151; margin-top: 20px; }
.post-meta { font-size: 13px; color: #6B7280; margin-top: 20px; padding-bottom: 28px; border-bottom: 1px solid #E5E7EB; }

/* ── 본문 ── */
.post { color: #374151; font-size: 16px; line-height: 1.85; margin-top: 36px; }
.post h2 { font-size: 22px; line-height: 1.35; font-weight: 700; color: #0A0A0A; letter-spacing: -0.015em; margin: 48px 0 16px; scroll-margin-top: 88px; }
.post h3 { font-size: 17px; font-weight: 600; color: #0A0A0A; margin: 28px 0 10px; }
.post p { margin-bottom: 16px; }
.post ul, .post ol { padding-left: 1.4rem; margin-bottom: 18px; }
.post ul { list-style: disc outside; }
.post ol { list-style: decimal outside; }
.post li { margin-bottom: 8px; }
.post li::marker { color: #9CA3AF; }
.post strong { font-weight: 600; color: #111827; }
.post a { color: #0A0A0A; text-decoration: underline; text-underline-offset: 2px; }
.post .note { border: 1px solid #E5E7EB; background: #F9FAFB; border-radius: 12px; padding: 16px 18px; font-size: 14.5px; line-height: 1.75; margin: 24px 0; }
.post .note-warn { background: #FEFCE8; border-color: #FDE68A; color: #713f12; }
.post .tbl-scroll { overflow-x: auto; margin: 20px 0 24px; }
.post table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.65; }
.post th, .post td { border-bottom: 1px solid #E5E7EB; padding: 12px 12px 12px 0; text-align: left; vertical-align: top; }
.post th { font-weight: 600; color: #0A0A0A; font-size: 13px; white-space: nowrap; }
.post td:first-child { white-space: nowrap; font-weight: 600; color: #111827; }
.post .sources { font-size: 13.5px; color: #6B7280; line-height: 1.75; }
.post .sources li { margin-bottom: 4px; }

/* ── 글 끝: 제품 안내(본문과 구분) ── */
.post-about { margin-top: 48px; border: 1px solid #E5E7EB; border-radius: 14px; padding: 22px 24px; }
.post-about p { font-size: 14.5px; line-height: 1.75; color: #374151; }
.post-about a { text-decoration: underline; text-underline-offset: 2px; }

/* ── 목록 ── */
.blog-list { max-width: 820px; margin: 0 auto; padding: 16px 24px 96px; }
.blog-item { display: block; padding: 28px 0; border-bottom: 1px solid #E5E7EB; }
.blog-item h2 { font-size: 21px; line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; color: #0A0A0A; }
.blog-item:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.blog-item p { font-size: 15px; line-height: 1.7; color: #4B5563; margin-top: 8px; }
.blog-item .when { font-size: 13px; color: #9CA3AF; margin-top: 10px; display: block; }
.blog-soon { padding: 22px 0; border-bottom: 1px solid #E5E7EB; color: #9CA3AF; font-size: 15px; }

/* ── 움직임: 스크롤 등장 · 읽기 진행 막대 · 기간 타임라인 ── */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in { opacity: 1; transform: none; }

.read-bar { position: fixed; left: 0; top: 0; width: 100%; height: 2px; z-index: 50; pointer-events: none; }
.read-bar i { display: block; height: 100%; width: 100%; background: #2563EB; transform: scaleX(0); transform-origin: 0 50%; }

.post-hero { margin-top: 32px; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; background: #F9FAFB; }
.post-hero img { display: block; width: 100%; height: auto; }

.tl { margin: 28px 0 8px; border: 1px solid #E5E7EB; border-radius: 14px; padding: 20px 20px 16px; }
.tl-axis { position: relative; height: 18px; font-size: 12px; color: #9CA3AF; margin-bottom: 10px; }
.tl-axis span { position: absolute; top: 0; white-space: nowrap; }
.tl-axis span:nth-child(1) { left: 0; }
.tl-axis span:nth-child(2) { left: 42%; }
.tl-axis span:nth-child(3) { left: 70%; }
.tl-axis span:nth-child(4) { right: 0; }
.tl-axis span:last-child { color: #0A0A0A; font-weight: 600; }
.tl-row { margin-bottom: 14px; }
.tl-bar { display: block; height: 10px; border-radius: 999px; background: #F1F3F5; overflow: hidden; }
.tl-bar i { display: block; height: 100%; margin-left: auto; border-radius: 999px; width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.tl-bar.b5 i { background: #BFDBFE; }
.tl-bar.b1 i { background: #60A5FA; }
.tl-bar.b3 i { background: #2563EB; }
.tl.in .b3 i { width: 30%; transition-delay: .15s; }
.tl.in .b1 i { width: 58%; transition-delay: .55s; }
.tl.in .b5 i { width: 100%; transition-delay: .95s; }
.tl-lab { display: block; font-size: 13.5px; line-height: 1.6; color: #4B5563; margin-top: 7px; opacity: 0; transition: opacity .5s ease; }
.tl-lab b { color: #0A0A0A; font-weight: 600; margin-right: 8px; }
.tl.in .tl-row:nth-of-type(4) .tl-lab { opacity: 1; transition-delay: .35s; }
.tl.in .tl-row:nth-of-type(3) .tl-lab { opacity: 1; transition-delay: .75s; }
.tl.in .tl-row:nth-of-type(2) .tl-lab { opacity: 1; transition-delay: 1.15s; }
.tl figcaption { font-size: 12.5px; color: #9CA3AF; line-height: 1.6; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tl-bar i, .tl-lab { transition: none; }
  .tl-lab { opacity: 1; }
  .tl .b3 i { width: 30%; } .tl .b1 i { width: 58%; } .tl .b5 i { width: 100%; }
  .read-bar { display: none; }
}

/* 한글은 어절 단위로 줄바꿈 */
.post-title, .post-lead, .post, .post-about, .blog-item { word-break: keep-all; overflow-wrap: break-word; }

/* ── 글 안 그림 공용: 차례로 나타나기(.seq) · 채워지는 막대(.fbar) · 이어 붙는 조각(.stack) ── */
.fig { margin: 28px 0 24px; border: 1px solid #E5E7EB; border-radius: 14px; padding: 20px; word-break: keep-all; }
.fig figcaption { font-size: 12.5px; color: #9CA3AF; line-height: 1.6; margin-top: 12px; }
.fig-h { font-size: 13px; font-weight: 600; color: #0A0A0A; margin-bottom: 12px; }
.seq > * { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i, 0) * .22s + .15s); }
.reveal.in .seq > *, .seq.in > * { opacity: 1; transform: none; }

.steps { counter-reset: st; display: grid; gap: 10px; }
.steps > div { counter-increment: st; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: #374151; }
.steps > div::before { content: counter(st); flex: none; width: 24px; height: 24px; border-radius: 999px; background: #EFF6FF; color: #2563EB; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.steps b { color: #0A0A0A; font-weight: 600; }

.frow { margin-bottom: 14px; }
.frow:last-of-type { margin-bottom: 0; }
.fbar { display: block; height: 10px; border-radius: 999px; background: #F1F3F5; overflow: hidden; }
.fbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: #2563EB; transition: width .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, .2s); }
.fbar i.c2 { background: #60A5FA; }
.fbar i.c3 { background: #BFDBFE; }
.reveal.in .fbar i { width: var(--w, 50%); }
.flab { display: block; font-size: 13.5px; line-height: 1.6; color: #4B5563; margin-top: 7px; }
.flab b { color: #0A0A0A; font-weight: 600; margin-right: 8px; }

.dots { display: flex; flex-wrap: wrap; gap: 8px; }
.dots span { width: 34px; height: 34px; border-radius: 9px; background: #F1F3F5; color: #9CA3AF; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.dots span.on { background: #2563EB; color: #FFFFFF; }
.dots span.on2 { background: #BFDBFE; color: #1e3a8a; }

.stack { display: flex; height: 34px; border-radius: 9px; overflow: hidden; background: #F1F3F5; }
.stack span { flex: 0 0 var(--w); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #FFFFFF; background: #2563EB; border-right: 2px solid #FFFFFF; white-space: nowrap; }
.stack span:nth-child(2) { background: #3B82F6; }
.stack span:nth-child(3) { background: #60A5FA; }
.total { font-size: 14px; color: #374151; margin-top: 10px; }
.total b { color: #2563EB; font-weight: 700; }

.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp > div { border: 1px solid #E5E7EB; border-radius: 12px; padding: 14px; }
.cmp .q { display: block; font-size: 13px; line-height: 1.5; color: #374151; background: #F9FAFB; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.cmp .q.blue { background: #EFF6FF; color: #1e3a8a; }
@media (max-width: 520px) { .cmp { grid-template-columns: 1fr; } }

/* ── 함께 읽기 ── */
.post-more { margin-top: 40px; }
.post-more a { display: block; padding: 14px 0; border-bottom: 1px solid #E5E7EB; font-size: 15px; color: #0A0A0A; word-break: keep-all; }
.post-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-more a:first-of-type { border-top: 1px solid #E5E7EB; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .seq > * { opacity: 1; transform: none; transition: none; }
  .fbar i { width: var(--w, 50%); transition: none; }
}

/* ── 판정 목록(.judge) · 해당 여부 표(.mx) · 3단 비교(.cmp3) ── */
.judge { display: grid; gap: 10px; }
.judge > div { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: #374151; }
.judge b { color: #0A0A0A; font-weight: 600; }
.tag { flex: none; min-width: 74px; text-align: center; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; margin-top: 1px; }
.tag.yes { background: #2563EB; color: #FFFFFF; }
.tag.no { background: #F1F3F5; color: #6B7280; }

.mx { display: grid; gap: 6px; font-size: 13.5px; }
.mx > div { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
.mx > div > span:first-child { color: #374151; line-height: 1.45; }
.mx > div > span:not(:first-child) { text-align: center; border-radius: 8px; padding: 7px 4px; font-size: 12.5px; font-weight: 600; }
.mx-h > span:not(:first-child) { color: #0A0A0A; padding: 0 4px 2px; }
.mx .on { background: #2563EB; color: #FFFFFF; }
.mx .off { background: #F1F3F5; color: #9CA3AF; }

.cmp.cmp3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .cmp.cmp3 { grid-template-columns: 1fr; } }