/* ── pages / blog/<slug> — 블로그 글 상세 ───────────────────────────
   원본 kowonps.com/en/blog/<slug> 와 같은 구성:
   태그·제목·날짜 머리 → 리드 → 표지 → Key points → 도입 →
   번호 붙은 본문 섹션 → 본문 이미지 → FAQ → 고지 → 목록으로.
   .container--narrow / .tag / .disclaimer / .btn 프리미티브를 쓰고,
   이 파일은 그 프리미티브에 없는 것만 만든다.
   이미지는 CDN 에 따로 올리지 않고 원본이 쓰는 주소를 그대로 건다. */

.blogart{padding-block:var(--sp-section)}

/* ── 머리 ─────────────────────────────────────────────────── */
.blogart__head{padding-bottom:var(--sp-block);border-bottom:1px solid var(--line-soft)}
.blogart__tags{display:flex;flex-wrap:wrap;gap:6px}
.blogart__title{
  margin-top:16px;
  font-weight:700;font-size:var(--fs-32);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.blogart__date{margin-top:12px;font-size:var(--fs-14);line-height:1.4;color:var(--text-tertiary)}
.blogart__lead{
  margin-top:var(--sp-stack);
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}

/* ── Key points ──────────────────────────────────────────── */
/* 원본은 본문 앞에 요약을 상자로 둔다. .card 는 그림자가 있어 본문 흐름에
   끼면 무거워서, 면색 + 왼쪽 브랜드 선으로만 구분한다. */
.blogart__kp{
  margin-top:var(--sp-stack);padding:28px 32px;
  background:var(--surface-muted);border-left:3px solid var(--brand);
  border-radius:var(--radius-sm);
}
.blogart__kp-title{
  font-weight:700;font-size:var(--fs-14);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--brand);
}
.blogart__kp-list{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.blogart__kp-list li{
  position:relative;padding-left:18px;
  font-size:var(--fs-16);line-height:1.7;color:var(--text-secondary);word-break:keep-all;
}
.blogart__kp-list li::before{
  content:'';position:absolute;left:0;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--brand);
}

/* ── 본문 ─────────────────────────────────────────────────── */
.blogart__body{margin-top:var(--sp-block)}
.blogart__intro p{
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}
.blogart__intro p+p{margin-top:16px}

.blogart__sec{margin-top:var(--sp-block)}
/* 원본은 섹션마다 01·02… 번호를 붙인다. */
.blogart__num{font-weight:700;font-size:var(--fs-14);letter-spacing:var(--ls-wide);color:var(--brand)}
.blogart__h2{
  margin-top:10px;
  font-weight:700;font-size:var(--fs-24);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.blogart__sec p{
  margin-top:16px;
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}
.blogart__ol{margin-top:20px;display:flex;flex-direction:column;gap:14px;counter-reset:bl}
.blogart__ol li{
  counter-increment:bl;position:relative;padding-left:44px;
  font-size:var(--fs-18);line-height:1.7;color:var(--text-secondary);word-break:keep-all;
}
.blogart__ol li::before{
  content:counter(bl,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  font-weight:700;font-size:var(--fs-14);color:var(--brand);
}

/* ── 이미지 ───────────────────────────────────────────────── */
/* 표지와 본문 이미지는 정사각·가로형이 섞여 있다. 비율을 고정하지 않고
   원본 비율 그대로 흘린다 — 자르면 이미지에 박힌 글씨가 잘린다. */
.blogart__fig{margin-top:var(--sp-stack)}
.blogart__fig img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius-card);background:var(--surface-muted);
}
.blogart__figs{margin-top:var(--sp-block);display:flex;flex-direction:column;gap:var(--sp-stack)}

/* ── FAQ ──────────────────────────────────────────────────── */
/* 원본은 접히는 목록이다. <details>/<summary> 로 스크립트 없이 같게 만든다. */
.blogart__faq{margin-top:var(--sp-section);padding-top:var(--sp-block);border-top:1px solid var(--line-soft)}
.blogart__faq-lead{margin-top:10px;font-size:var(--fs-16);line-height:1.7;color:var(--text-tertiary)}
.blogart__qa{margin-top:var(--sp-stack);border-top:1px solid var(--line-soft)}
.blogart__qa details{border-bottom:1px solid var(--line-soft)}
.blogart__qa summary{
  display:flex;align-items:flex-start;gap:12px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-weight:700;font-size:var(--fs-18);line-height:1.5;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
  transition:color .18s ease;
}
.blogart__qa summary::-webkit-details-marker{display:none}
.blogart__qa summary:hover{color:var(--brand)}
.blogart__qa summary::after{
  content:'+';margin-left:auto;flex:none;
  font-weight:400;font-size:var(--fs-24);line-height:1;color:var(--brand);
  transition:transform .18s ease;
}
.blogart__qa details[open] summary::after{transform:rotate(45deg)}
.blogart__qa-a{padding:0 0 24px;font-size:var(--fs-16);line-height:1.8;color:var(--text-secondary);word-break:keep-all}

/* ── 본문 준비 중 ─────────────────────────────────────────── */
/* 주제당 10편까지만 본문을 옮겼다. 나머지 글도 주소는 열려 있어야 해서
   (없는 경로는 홈으로 튕긴다) 제목·날짜·표지까지만 두고 본문 자리에
   안내 한 줄을 둔다. 없는 내용을 지어내지 않는다. */
.blogart__pending{
  margin-top:var(--sp-block);padding:var(--sp-block) var(--sp-stack);
  background:var(--surface-muted);border-radius:var(--radius-card);text-align:center;
}
.blogart__pending p{
  font-size:var(--fs-16);line-height:1.8;color:var(--text-tertiary);word-break:keep-all;
}
.blogart__pending .btn{margin-top:var(--sp-tight)}

/* ── 비교표 ───────────────────────────────────────────────── */
/* 원본 글은 유형·재료·방법을 나란히 두는 비교표를 쓴다. 좁은 화면에서는
   표만 가로로 흐르게 두고 페이지 자체는 가로 스크롤이 생기지 않게 한다. */
.blogart__tablewrap{margin-top:var(--sp-stack);overflow-x:auto}
.blogart__table{
  width:100%;border-collapse:collapse;
  font-size:var(--fs-16);line-height:1.6;color:var(--text-secondary);
}
.blogart__table th,
.blogart__table td{
  padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft);word-break:keep-all;
}
.blogart__table th{
  font-weight:700;color:var(--text-primary);
  background:var(--surface-muted);white-space:nowrap;
}
.blogart__table tbody tr:last-child td{border-bottom:0}

/* ── 본문 소제목 · 글머리 목록 ────────────────────────────── */
.blogart__h3{
  margin-top:var(--sp-stack);
  font-weight:700;font-size:var(--fs-20);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
/* 번호가 뜻을 갖지 않는 목록. 번호 목록(.blogart__ol)과 달리 점으로 받는다. */
.blogart__ul{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.blogart__ul li{
  position:relative;padding-left:18px;
  font-size:var(--fs-18);line-height:1.7;color:var(--text-secondary);word-break:keep-all;
}
.blogart__ul li::before{
  content:'';position:absolute;left:0;top:13px;
  width:6px;height:6px;border-radius:50%;background:var(--brand);
}

/* 본문 안의 강조와 링크 — 원본은 용어를 굵게, 근거를 링크로 단다. */
.blogart__sec strong,.blogart__kp-list strong,.blogart__intro strong{
  font-weight:700;color:var(--text-primary);
}
.blogart__sec a,.blogart__qa-a a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.blogart__sec a:hover,.blogart__qa-a a:hover{color:var(--text-primary)}

/* ── 고지 · 목록으로 ─────────────────────────────────────── */
.blogart__disc{margin-top:var(--sp-block)}
.blogart__back{
  margin-top:var(--sp-block);padding-top:var(--sp-block);
  border-top:1px solid var(--line-soft);text-align:center;
}

@media (max-width:767px){
  .blogart__title{font-size:var(--fs-24)}
  .blogart__kp{padding:24px 20px}
  .blogart__ol li{padding-left:36px}
}