/* ============================================================
   마미챗 — 본문(article) 전용 스타일
   토큰·공용 컴포넌트는 app.css(DESIGN-CONTRACT §2/§3)를 소비한다.
   여기에는 본문 페이지에만 쓰는 클래스만 둔다.
   ============================================================ */

/* ── 1. hero ───────────────────────────────────────────────── */
.article-hero{ padding-block: clamp(28px, 4.5vw, 56px); }

.article-hero__grid{
  display: grid;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px){
  .article-hero__grid{ grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}

.article-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
}
.article-meta__topic{
  font-size: 12.5px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.article-meta__topic:hover{
  background: color-mix(in srgb, var(--butter) 34%, var(--butter-soft));
  color: var(--ink);
}
.article-meta__item + .article-meta__item::before{
  content: "·";
  margin-right: 10px;
  color: var(--line);
}

.article-title{
  margin: 14px 0 0;
  color: var(--ink);
  font-size: clamp(1.62rem, 1.15rem + 2.4vw, 2.3rem);
  font-weight: 850;
  line-height: 1.28;
  letter-spacing: -.025em;
  word-break: keep-all;
  text-wrap: balance;
}

.article-excerpt{
  max-width: 58ch;
  margin-top: 14px;
  word-break: keep-all;
  text-wrap: pretty;
}

/* 종이 프레임에 얹은 사진 — 카드지에 여백을 두고 캡션까지 담는다 */
.article-visual{
  padding: 10px 10px 6px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-2);
}
.article-visual img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
}
.article-visual figcaption{
  padding: 10px 8px 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  word-break: keep-all;
}
.article-visual figcaption a{
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-visual figcaption a:hover{ color: var(--sage-deep); }

/* ── 2. shell: 읽기 컬럼 + 사이드바 ─────────────────────────── */
.article-shell{
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  align-items: start;
  padding-top: clamp(30px, 4.5vw, 52px);
}
@media (min-width: 1120px){
  .article-shell{ grid-template-columns: minmax(0, 1fr) 300px; }
}
.article-col{ min-width: 0; }

/* ── 3. 읽기 본문 타이포 ───────────────────────────────────── */
.article-body{
  max-width: var(--reading);
  font-size: 1.1rem;       /* ≈17.6px */
  line-height: 1.8;
  word-break: keep-all;
}
.article-body > * + *{ margin-top: clamp(30px, 4.2vw, 44px); }
.article-body p{ text-wrap: pretty; }

.article-opening{
  color: var(--body);
  font-size: 1.16rem;
  line-height: 1.85;
}

/* ── 4. 핵심(thesis) — 가장 눈에 띄는 카드 ─────────────────── */
.article-thesis{
  padding: 22px 26px;
  border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-xs);
}
.article-thesis__label{
  margin: 0 0 8px;
  color: var(--sage-deep);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .01em;
}
.article-thesis__text{
  margin: 0;
  color: var(--ink);
  font-size: 1.13rem;
  font-weight: 720;
  line-height: 1.72;
}

/* ── 5. 먼저 보면 좋은 점 — 손그림 체크리스트 ──────────────── */
.article-summary{
  padding: 22px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--card-warm);
}
.article-summary__title{
  margin: 0 0 14px;
  color: var(--terracotta-deep);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .01em;
}
.article-summary__list{
  display: grid;
  gap: 11px;
  list-style: none;
}
.article-summary__list li{
  position: relative;
  padding-left: 34px;
  font-size: 1.02rem;
  line-height: 1.68;
}
.article-summary__list li::before{
  content: "";
  position: absolute;
  top: .22em;
  left: 0;
  width: 21px;
  height: 21px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 13.1c2.4 1.6 4 3.4 5.1 5.3 2.3-5.4 5.8-9.9 10.2-13.5' fill='none' stroke='%236E8F6B' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 6. 목차 — 앵커만으로 동작 (JS 없음) ───────────────────── */
.article-toc{
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: var(--paper-edge);
}
.article-toc__title{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 850;
}
.article-toc__list{
  display: grid;
  gap: 2px;
  list-style: none;
  counter-reset: toc;
}
.article-toc__list li{
  counter-increment: toc;
  font-size: 15px;
  line-height: 1.55;
}
.article-toc__list a{
  display: flex;
  gap: 10px;
  padding: 5px 6px;
  border-radius: var(--r-xs);
  color: var(--body);
  font-weight: 700;
  word-break: keep-all;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.article-toc__list a::before{
  content: counter(toc);
  flex: 0 0 auto;
  color: var(--terracotta-deep);
  font-size: 13px;
  font-weight: 850;
  line-height: inherit;
}
.article-toc__list a:hover{ background: var(--card-warm); color: var(--sage-deep); }
/* 인라인 목차는 사이드바가 생기는 폭부터 숨긴다 */
@media (min-width: 1120px){
  .article-toc--inline{ display: none; }
}

/* ── 7. 본문 섹션 ──────────────────────────────────────────── */
.article-prose-block{ scroll-margin-top: 92px; }
.article-block-head{
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(1.28rem, 1.05rem + 1vw, 1.44rem);
  font-weight: 850;
  line-height: 1.4;
  letter-spacing: -.02em;
  word-break: keep-all;
  text-wrap: balance;
}
.article-prose-block > p{ color: var(--body); }

/* ── 8. 이 글과 이어지는 글 (internal_links, 본문 흐름 안) ── */
.article-linked{
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
.article-linked__label{
  margin: 0 0 10px;
  color: var(--terracotta-deep);
  font-size: 13px;
  font-weight: 850;
}
.article-linked__list{
  display: grid;
  gap: 8px;
  list-style: none;
}
.article-linked__list li{
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.6;
  word-break: keep-all;
}
.article-linked__list li::before{
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.2c3.6-.5 7-.3 10.4.1M9.6 4.8c1.6 1.1 2.8 2.2 3.6 3.4-1.3 1-2.5 2.2-3.5 3.5' fill='none' stroke='%236E8F6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 9. 워크시트 — 인쇄해 쓰고 싶은 종이 한 장 ─────────────── */
.article-worksheet{
  position: relative;
  padding: clamp(24px, 4vw, 34px);
  border: 2px dashed color-mix(in srgb, var(--butter) 58%, var(--terracotta) 42%);
  border-radius: var(--r-lg);
  background-color: var(--butter-soft);
  background-image: var(--grain);
}
.article-worksheet__tag{
  display: inline-block;
  margin: 0;
  padding: 4px 13px;
  border: 1px dashed color-mix(in srgb, var(--terracotta) 55%, transparent);
  border-radius: var(--r-pill);
  background: var(--card-warm);
  color: var(--terracotta-deep);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
  transform: rotate(-1.6deg);
}
.article-worksheet__title{
  margin: 14px 0 0;
  color: var(--ink);
  font-size: clamp(1.24rem, 2vw, 1.4rem);
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.4;
  word-break: keep-all;
}
.article-worksheet__intro{
  margin: 10px 0 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
}
.article-worksheet__grid{
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
@media (min-width: 680px){
  .article-worksheet__grid{ grid-template-columns: 1fr 1fr; }
}
.article-worksheet__item{
  padding: 16px 18px 14px;
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.article-worksheet__item dt{
  color: var(--terracotta-deep);
  font-size: 13px;
  font-weight: 850;
}
.article-worksheet__item dd{
  margin-top: 6px;
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.65;
  word-break: keep-all;
}
/* 손으로 적어 넣을 자리 — 점선 밑줄 한 칸 */
.article-worksheet__line{
  display: block;
  height: 1.9em;
  border-bottom: 2px dotted color-mix(in srgb, var(--ink) 32%, transparent);
}

/* ── 10. 메모 · 도구 · 참고자료 — 조용한 마무리 ────────────── */
.article-notes{ border-radius: var(--r-xs) var(--r-md) var(--r-md) var(--r-xs); }
.article-notes__label{
  margin: 0 0 8px;
  color: var(--terracotta-deep);
  font-size: 13px;
  font-weight: 850;
}
.article-notes__list{
  display: grid;
  gap: 8px;
  list-style: none;
}
.article-notes__list li{
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.7;
  word-break: keep-all;
}
.article-notes__list li::before{
  content: "";
  position: absolute;
  top: .68em;
  left: 0;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--butter);
}

.article-tools__label{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.article-tools__list{
  display: grid;
  gap: 8px;
  list-style: none;
}
.article-tools__list li{ font-size: 15px; line-height: 1.6; }

.article-references__trust{
  max-width: 68ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
  word-break: keep-all;
}

/* ── 11. 회수 동선: 이어서 읽기 · 관련 글 · 허브 ───────────── */
.article-next{ margin-top: clamp(44px, 6vw, 64px); }
.article-next .eyebrow{ margin-bottom: 14px; }

/* 관련 글 밴드는 광고와 헷갈리지 않게 warm 면 + 제목으로 구분한다 */
.article-related{ margin-top: clamp(40px, 6vw, 64px); }
.article-hub{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 4vw, 40px);
}

/* ── 12. 사이드바 (데스크톱 전용) ──────────────────────────── */
.article-side{ display: none; }
@media (min-width: 1120px){
  .article-side{
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
  }
}
.article-side__label{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.article-side__topic .card--compact + .card--compact{ margin-top: 2px; }
.article-side__more{
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  color: var(--sage-deep);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sage) 55%, transparent);
  text-underline-offset: 3px;
}
.article-side__more:hover{ color: var(--ink); text-decoration-color: var(--terracotta); }
/* 남는 오른쪽 여백은 광고가 스크롤 끝까지 따라오며 채운다 */
.article-side__ad{
  position: sticky;
  top: 84px;
}

/* ── 13. 좁은 화면 보정 ────────────────────────────────────── */
@media (max-width: 479px){
  .article-body{ font-size: 1.07rem; }
  .article-thesis,
  .article-summary,
  .article-toc,
  .article-linked{ padding: 18px 20px; }
  .article-visual{ padding: 8px 8px 4px; }
}