/* 관상소 · the blog. Loaded only on /blog and /blog/{slug}, AFTER gwansang.css (via {% block head %}),
   so ties resolve here. Everything is scoped under .post / .blog-index and reuses the house
   [data-paper] tokens (var(--bg/--fg/--chop/--hanja/--sans)); the hanji ground, 명조 h1/h2 and ink
   colour come from gwansang.css. This file is the ARTICLE layer only: reading measure + components. */

.post{ padding:56px 0 8px; color:var(--fg); }
.post > .page{ max-width:720px; }              /* reading measure, not the 1280 app container */

.post .kicker{ font-family:var(--hanja); font-size:13px; letter-spacing:.14em; color:var(--chop);
  font-weight:700; margin:0 0 20px; }
.post h1{ margin:0 0 24px; line-height:1.28; }  /* 명조 700 + clamp size inherited from gwansang.css */
.post .lead{ font-family:var(--hanja); font-size:20px; line-height:1.9; margin:0 0 24px; }
.post .lead b{ font-weight:700; }
.post .byline{ font-family:var(--sans); font-size:13.5px; color:var(--fg-3);
  padding-bottom:24px; margin:0 0 8px; border-bottom:1px solid var(--line); }
.post .byline .sep{ margin:0 .5em; opacity:.5; }

.post p{ margin:0 0 18px; font-size:18px; line-height:1.95; }
.post h2{ margin:54px 0 16px; line-height:1.4; }   /* 명조 700 inherited */
.post h3{ font-family:var(--hanja); font-weight:700; font-size:19px; margin:32px 0 10px; }
.post b{ font-weight:700; }
.post a{ color:inherit; text-underline-offset:3px; }
.post .hanja{ font-weight:400; color:var(--fg-2); }

/* 원전 인용 — the traceability moat, made visible. 인주 rule on the left. */
.post .cite{ margin:26px 0; padding:18px 22px; background:var(--surface-2); border-left:2.5px solid var(--chop); }
.post .cite p{ margin:0; font-size:16.5px; line-height:1.85; color:var(--fg-2); }
.post .cite .src{ display:block; margin-top:8px; font-family:var(--sans); font-size:12.5px; color:var(--fg-3); }

.post .tbl{ width:100%; border-collapse:collapse; margin:24px 0; font-size:16px; }
.post .tbl th, .post .tbl td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line);
  vertical-align:top; line-height:1.6; }
.post .tbl th{ font-weight:700; color:var(--fg-2); font-size:14px; letter-spacing:.02em; }
.post .tbl td:first-child{ font-weight:700; }
.post .grade{ font-family:var(--sans); font-size:12px; color:var(--fg-3); }

/* the 감정서 CTA — 냥 device in the copy, live price on the tag */
.post .cta{ margin:58px 0 20px; padding:34px 30px; border:1px solid var(--fg-3);
  background:var(--surface-2); position:relative; }
.post .cta .seal{ position:absolute; top:-16px; right:26px; width:52px; height:52px;
  background:var(--chop); color:#EBDFC4; border-radius:3px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; font-family:var(--hanja); font-weight:700;
  font-size:15px; line-height:1; padding:8px; text-align:center; box-shadow:0 2px 0 rgba(0,0,0,.12); }
.post .cta h2{ margin:0 0 12px; font-size:23px; }
.post .cta p{ margin:0 0 20px; color:var(--fg-2); font-size:16.5px; }
.post .cta .btn{ display:inline-block; background:var(--fg); color:var(--bg); text-decoration:none;
  font-family:var(--sans); font-weight:700; font-size:16px; padding:13px 26px; border-radius:3px; }
.post .cta .price{ font-family:var(--sans); font-size:13.5px; color:var(--fg-3); margin-left:14px; }

.post .faq{ margin-top:8px; }
.post .faq h2{ margin:48px 0 4px; }
.post .faq h3{ font-family:var(--hanja); font-weight:700; margin:26px 0 6px; font-size:18px; }
.post .faq p{ color:var(--fg-2); font-size:16.5px; }

/* 이어 읽기 — one paper tile, not a stack of full-width rules. The 인주 arrow carries the list. */
.post .related{ margin:48px 0 0; padding:20px 24px; border:1px solid var(--line); border-radius:3px;
  background:var(--surface-2); }
.post .related h2{ font-family:var(--sans); font-size:12px; letter-spacing:.1em; color:var(--fg-3);
  font-weight:700; margin:0 0 8px; }
.post .related a{ display:block; padding:7px 0; text-decoration:none; font-family:var(--hanja);
  font-size:16px; line-height:1.45; }
.post .related a::before{ content:"→ "; color:var(--chop); }
.post .related a:hover{ color:var(--chop); }

.post .refs{ margin:50px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.post .refs h2{ font-family:var(--sans); font-size:13px; letter-spacing:.08em; color:var(--fg-3);
  font-weight:700; margin:0 0 12px; }
.post .refs ol{ margin:0; padding-left:20px; font-family:var(--sans); font-size:13px;
  line-height:1.9; color:var(--fg-3); }
.post .refs li{ margin-bottom:4px; }

/* the /blog index */
.blog-index{ max-width:940px; padding:48px 0 64px; }
.blog-index h1{ margin:0 0 10px; }
.blog-index .idx-lead{ font-family:var(--hanja); color:var(--fg-2); margin:0 0 30px; }
.blog-index .idx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 24px; }
.blog-index .card{ display:block; text-decoration:none; }
.blog-index .card .thumb{ display:block; border-radius:3px; overflow:hidden; }
.blog-index .card .thumb svg{ width:100%; height:auto; display:block; }
.blog-index .card .t{ display:block; font-family:var(--hanja); font-weight:700; font-size:19px;
  line-height:1.42; margin-top:13px; }
.blog-index .card .d{ display:block; font-family:var(--sans); color:var(--fg-3); font-size:13.5px;
  line-height:1.6; margin-top:5px; }
.blog-index .card:hover .thumb{ box-shadow:0 0 0 1px var(--fg-3); }
.blog-index .card:hover .t{ color:var(--chop); }
@media (max-width:640px){ .blog-index{ max-width:720px; } .blog-index .idx-grid{ grid-template-columns:1fr; gap:26px; } }

@media (max-width:520px){
  .post p{ font-size:17px; } .post .lead{ font-size:18.5px; }
}