/* YN SEO 매거진 — 블로그/글 전용 스타일 (self-contained, 인디고→퍼플→핑크) */
:root{
  --bl-ink:#1e1b2e; --bl-ink-soft:#4b4763; --bl-muted:#6b6786;
  --bl-line:#e9e6f2; --bl-bg:#ffffff; --bl-soft:#f7f5fc;
  --bl-brand:#6d28d9; --bl-brand2:#db2777; --bl-brand3:#4f46e5;
  --bl-grad:linear-gradient(120deg,#4f46e5,#7c3aed 45%,#db2777);
  --bl-radius:16px; --bl-shadow:0 6px 28px rgba(76,29,149,.10);
}
.blog-body{
  margin:0; background:var(--bl-soft); color:var(--bl-ink);
  font-family:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Segoe UI",sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
.blog-container{max-width:820px;margin:0 auto;padding:0 20px}
.blog-body a{color:var(--bl-brand3);text-decoration:none}
.blog-body a:hover{text-decoration:underline}

/* 헤더 */
.blog-header{background:var(--bl-grad);position:sticky;top:0;z-index:20;box-shadow:0 2px 18px rgba(76,29,149,.22)}
.blog-head-inner{max-width:1100px;display:flex;align-items:center;justify-content:space-between;height:60px}
.blog-logo{display:flex;align-items:center;gap:9px;color:#fff!important;font-weight:800}
.blog-logo-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);font-size:.85rem;letter-spacing:.5px}
.blog-logo-word{font-size:1.02rem}
.blog-nav{display:flex;gap:6px}
.blog-navlink{color:rgba(255,255,255,.9)!important;padding:7px 13px;border-radius:9px;font-weight:600;font-size:.92rem}
.blog-navlink:hover,.blog-navlink.active{background:rgba(255,255,255,.18);text-decoration:none!important}

/* 글 본문 */
.post{background:var(--bl-bg);margin:22px auto 40px;padding:34px 44px 46px;border-radius:var(--bl-radius);box-shadow:var(--bl-shadow)}
.post-back{display:inline-block;color:var(--bl-muted)!important;font-size:.9rem;font-weight:600;margin:4px 0 14px}
.post-title{font-size:2rem;line-height:1.28;font-weight:800;letter-spacing:-.01em;margin:.2em 0 .35em}
.post-meta{color:var(--bl-muted);font-size:.86rem;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.post-cover{margin:0 0 22px}
.post-cover img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:var(--bl-shadow)}
.post-lead{font-size:1.12rem;color:var(--bl-ink-soft);font-weight:500}
.post h2{font-size:1.4rem;font-weight:800;margin:1.7em 0 .5em;padding-top:.2em;letter-spacing:-.01em}
.post h3{font-size:1.14rem;font-weight:700;margin:1.3em 0 .4em}
.post p{margin:.7em 0}
.post b,.post strong{color:var(--bl-brand)}
.post-fig{margin:22px 0}
.post-illust,.post-chart{width:100%;height:auto;border-radius:14px;display:block}
.post-chart{background:#fff;border:1px solid var(--bl-line);padding:14px;box-sizing:border-box}

/* 목차 / 박스 */
.toc{background:var(--bl-soft);border:1px solid var(--bl-line);border-radius:13px;padding:16px 20px;margin:20px 0}
.toc b{display:block;margin-bottom:6px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:3px 0}
.box{border-radius:13px;padding:16px 20px;margin:20px 0;border:1px solid var(--bl-line)}
.box b{display:block;margin-bottom:6px}
.box ul{margin:.3em 0;padding-left:20px}
.box.summary{background:linear-gradient(180deg,#f5f2ff,#faf8ff);border-color:#e4dcff}
.box.tip{background:#fff8fb;border-color:#f7d6e6}
.box.check{background:#f3fbf6;border-color:#cfeddc}

/* 표 */
.post-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.94rem;border:1px solid var(--bl-line);border-radius:12px;overflow:hidden}
.post-table caption{caption-side:top;text-align:left;font-weight:800;margin-bottom:8px;color:var(--bl-ink)}
.post-table th,.post-table td{padding:11px 14px;border-bottom:1px solid var(--bl-line);text-align:left;vertical-align:top}
.post-table thead th{background:var(--bl-soft);font-weight:700}
.post-table tbody th{background:#faf8ff;width:34%;font-weight:700;color:var(--bl-ink-soft)}
.post-table tr:last-child td,.post-table tr:last-child th{border-bottom:none}

/* 스텝 / FAQ / 인용 */
.steps-list{counter-reset:st;list-style:none;padding:0;margin:16px 0}
.steps-list li{position:relative;padding:12px 14px 12px 52px;margin:9px 0;background:var(--bl-soft);border:1px solid var(--bl-line);border-radius:12px;counter-increment:st}
.steps-list li::before{content:counter(st);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--bl-grad);color:#fff;font-weight:800;font-size:.9rem}
.post-faq details{border:1px solid var(--bl-line);border-radius:12px;padding:4px 16px;margin:10px 0;background:#fff}
.post-faq summary{cursor:pointer;font-weight:700;padding:10px 0}
.post-faq summary::marker{color:var(--bl-brand2)}
.post-faq p{margin:0 0 12px;color:var(--bl-ink-soft)}
.post-quote{margin:22px 0;padding:14px 22px;border-left:4px solid var(--bl-brand2);background:var(--bl-soft);border-radius:0 12px 12px 0;font-style:italic;color:var(--bl-ink-soft)}

/* 제휴 카드 */
.aff-top,.aff-mid{margin:22px 0}
.aff-head{font-weight:800;margin-bottom:10px}
.aff-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.aff-card{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:76px;padding:13px 15px;border-radius:13px;background:var(--bl-bg);border:1px solid var(--bl-line);box-shadow:0 3px 12px rgba(76,29,149,.06);transition:transform .15s,box-shadow .15s}
.aff-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(76,29,149,.14);text-decoration:none!important}
.aff-lbl{font-weight:800}
.aff-emoji{font-size:1.5rem}
.aff-name{font-weight:700}
.aff-go{font-size:.84rem;font-weight:700;color:var(--bl-brand2)}
.aff-card.mid{background:linear-gradient(180deg,#fff,#faf8ff)}

/* 한국 채널(뉴스픽·텐핑·애드릭스) 블록 — ko 글 전용 */
.ch-block{margin:22px 0;padding:16px 18px;border-radius:14px;background:linear-gradient(180deg,#fff,#f6f3ff);border:1px solid #e4dcff}
.ch-head{font-weight:800;margin-bottom:11px;color:var(--bl-ink)}
.ch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ch-card{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:70px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--bl-line);box-shadow:0 3px 12px rgba(76,29,149,.06);transition:transform .15s,box-shadow .15s}
.ch-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(76,29,149,.14);text-decoration:none!important}
.ch-lbl{font-weight:700;font-size:.95rem}
.ch-go{font-size:.82rem;font-weight:700;color:var(--bl-brand2)}
@media (max-width:640px){.ch-row{grid-template-columns:1fr}}

/* CTA */
.post-cta{display:block;text-align:center;margin:26px 0;padding:16px 22px;border-radius:14px;background:var(--bl-grad);color:#fff!important;font-weight:800;font-size:1.05rem;box-shadow:0 8px 24px rgba(124,58,237,.28)}
.post-cta:hover{filter:brightness(1.05);text-decoration:none!important;transform:translateY(-1px)}

/* 광고 */
.ad-unit{margin:26px 0;text-align:center;min-height:1px}
.ad-tag{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bl-muted);margin-bottom:5px}
.ad-unit:not(:has(.adsbygoogle iframe)){min-height:0}

/* 관련글 */
.post-related{margin:32px 0}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.rel-card{display:block;border:1px solid var(--bl-line);border-radius:12px;overflow:hidden;background:#fff;transition:transform .15s,box-shadow .15s}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--bl-shadow);text-decoration:none!important}
.rel-card img{width:100%;height:auto;display:block}
.rel-card span{display:block;padding:9px 11px;font-size:.85rem;font-weight:600;color:var(--bl-ink)}

.post-tags{margin:26px 0 8px;color:var(--bl-muted);font-size:.9rem;font-weight:600}
.post-disc{color:var(--bl-muted);font-size:.8rem;border-top:1px solid var(--bl-line);padding-top:14px;margin-top:8px}

/* 목록 페이지 */
.bl-main{padding:30px 20px 60px}
.bl-title{font-size:2.1rem;font-weight:800;text-align:center;margin:.2em 0 .1em}
.bl-sub{text-align:center;color:var(--bl-muted);margin:0 auto 26px;max-width:620px}
.bl-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.bl-tab{border:1px solid var(--bl-line);background:#fff;color:var(--bl-ink-soft);padding:8px 15px;border-radius:999px;font-weight:700;cursor:pointer;font-size:.9rem;transition:.15s}
.bl-tab:hover{border-color:var(--bl-brand3)}
.bl-tab.active{background:var(--bl-grad);color:#fff;border-color:transparent}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bl-line);border-radius:15px;overflow:hidden;box-shadow:0 3px 14px rgba(76,29,149,.06);transition:transform .15s,box-shadow .15s}
.bl-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(76,29,149,.14);text-decoration:none!important}
.bl-thumb img{width:100%;height:auto;display:block}
.bl-info{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.bl-lang{font-size:.72rem;font-weight:800;color:var(--bl-brand2);text-transform:uppercase;letter-spacing:.06em}
.bl-info h3{margin:0;font-size:1.05rem;font-weight:800;line-height:1.35;color:var(--bl-ink)}
.bl-info p{margin:0;color:var(--bl-muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-date{color:var(--bl-muted);font-size:.8rem;margin-top:2px}
.bl-empty{text-align:center;padding:60px 0;color:var(--bl-muted)}

/* 푸터 */
.blog-footer{border-top:1px solid var(--bl-line);background:#fff;padding:26px 0;margin-top:40px}
.blog-footer-note{text-align:center;color:var(--bl-muted);font-size:.86rem;margin:0}
.blog-footer-note a{color:var(--bl-muted)!important;font-weight:600}

/* 다크 모드 대응(OS 설정) — 글은 가독성 위해 밝게 유지, 배경만 살짝 톤다운 */
@media (prefers-color-scheme:dark){
  .blog-body{background:#141222}
}

/* 반응형 */
@media (max-width:640px){
  .post{padding:24px 18px 34px;margin:14px auto 30px;border-radius:13px}
  .post-title{font-size:1.55rem}
  .aff-row{grid-template-columns:1fr}
  .post-table{font-size:.88rem}
  .post-table tbody th{width:40%}
  .bl-title{font-size:1.7rem}
}