/*
Theme Name: 좋나맛 워크북
Theme URI: https://jonamat.com
Author: 좋나맛
Description: 출력해서 냉장고에 붙이는 워크북 컨셉의 한국어 건강 정보 블록 테마. 승인된 AI 편집 일러스트와 면 색 블록·괘선·글자 배지·여백 대비로 리듬을 만듭니다.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.7
License: GNU General Public License v2 or later
Text Domain: jonamat-workbook
Tags: blog, block-patterns, full-site-editing, accessibility-ready
*/

/* 토큰은 theme.json이 소유합니다. 이 파일에는 theme.json으로 표현할 수 없는 것만 둡니다. */

:root {
  --jn-hairline: 1px solid var(--wp--preset--color--rule);
  --jn-dashed: 1px dashed var(--wp--preset--color--rule);
  --jn-section: 2px solid var(--wp--preset--color--ink);
}

/* 한국어는 어절 단위로 끊어야 읽힙니다. 긴 URL·성분명은 예외로 강제 줄바꿈합니다. */
body { text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }

/* ── 기존 글(클래식 HTML 259편) 안전망 ──────────────────────── */
/* 블록 구분자가 없는 클래식 본문은 워드프레스가 이미지 블록 CSS를 싣지 않아 figure 안의
   이미지가 원본 폭(860px)으로 나옵니다. 스테이징 표본 7편 중 3편이 390px에서 486~1082px
   넘쳤습니다. 이미지·표·긴 문자열이 본문 폭을 넘지 않게 합니다. */
.entry-content img { max-width: 100%; height: auto; }
.entry-content table { max-width: 100%; }
.entry-content iframe, .entry-content video, .entry-content embed { max-width: 100%; }

/* ── 한 칸만 vs 세 자리 비교 ────────────────────────────────── */
/* 비교는 정보라 이미지로 만들지 않습니다(image-guidelines §2). 비어 있는 자리를 점선으로
   보여 주는 것이 이 블록의 전부입니다. 모바일에서는 두 칸을 세로로 쌓습니다. */
.jn-compare {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: 1fr;
  padding: var(--wp--preset--spacing--30);
}
.jn-compare__title {
  font-size: var(--wp--preset--font-size--note);
  font-weight: 700;
  margin: 0 0 var(--wp--preset--spacing--20);
}

.jn-compare__slots { list-style: none; margin: 0; padding: 0; }

.jn-compare__slots li {
  border: var(--jn-hairline);
  font-size: var(--wp--preset--font-size--table);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.jn-compare__slots li + li { margin-block-start: var(--wp--preset--spacing--10); }

.jn-compare__slots b {
  display: block;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.jn-compare__slots .is-filled { background: var(--wp--preset--color--surface); }

/* 빈 자리는 점선과 낮은 대비로 "아직 없음"을 보입니다. 색만으로 구분하지 않도록
   문구('비어 있어요')를 함께 둡니다. */
.jn-compare__slots .is-empty {
  background: transparent;
  border-style: dashed;
  color: var(--wp--preset--color--muted);
}

/* 테마의 중단점은 782px 하나뿐입니다. 비교 블록만 다른 값을 쓰면 다른 도구와 접히는
   폭이 어긋납니다. */
@media (min-width: 782px) {
  .jn-compare { grid-template-columns: 1fr 1fr; }
}
@media print {
  .jn-compare__slots .is-empty { color: #000; }
}

/* ── 이미지 (히어로·본문 삽화) ──────────────────────────────── */
/* 삽화는 보조 역할입니다. 괘선 하나만 두르고 본문 리듬을 끊지 않게 여백을 맞춥니다. */
.wp-block-post-featured-image { margin-block-end: var(--wp--preset--spacing--50); }
.wp-block-post-featured-image img {
  border: var(--jn-hairline);
  border-radius: 6px;
  display: block;
  width: 100%;
}

.entry-content .wp-block-image { margin-block: var(--wp--preset--spacing--50); }
.entry-content .wp-block-image img {
  border: var(--jn-hairline);
  border-radius: 6px;
}

/* 본문 삽화는 1:1 클로즈업이라 폭을 그대로 두면 세로로 화면을 다 먹습니다.
   본문 흐름을 끊지 않을 만큼만 보이게 폭을 제한합니다. */
.entry-content .wp-block-image.is-style-jn-close,
.entry-content figure.jn-close {
  margin-inline: auto;
  max-width: 340px;
}

/* 캡션은 출처·AI 고지가 들어가는 자리라 본문보다 낮춰도 읽혀야 합니다. */
.entry-content figcaption,
.wp-block-image figcaption {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.6;
  margin-block-start: var(--wp--preset--spacing--10);
  text-align: start;
}

/* ── 대표 이미지·목록 썸네일 ───────────────────────────────── */
.jn-featured {
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  border: var(--jn-hairline);
  border-radius: 6px;
}
.jn-featured img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}
.jn-featured--hero { margin-top: 0; margin-bottom: var(--wp--preset--spacing--20); }
.jn-featured-caption {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.6;
}
.jn-featured--card { margin-block: 0; }
.jn-featured--fallback > a {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--10);
  padding: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.jn-featured--fallback span {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.jn-featured--fallback strong { font-size: var(--wp--preset--font-size--body); line-height: 1.5; }
.jn-card__body, .jn-related__body { min-width: 0; }
.jn-body-image {
  margin: var(--wp--preset--spacing--50) 0;
  overflow: hidden;
  border: var(--jn-hairline);
  border-radius: 6px;
  background: var(--wp--preset--color--surface);
}

/* WP QUADS는 본문에 직접 삽입한 광고 슬롯에 `max-width: 100%`를 붙입니다. post-content가
   alignfull일 때 이 값은 읽기 폭이 아니라 화면 전체 폭을 뜻해 데스크톱 광고만 길게
   늘어납니다. 광고 슬롯은 일반 단락과 같은 본문 폭을 따르고, 작은 화면에서는 100%로
   자연스럽게 줄어들게 합니다. */
.entry-content > :is(.quads-location, .quads-ads-space) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}
.jn-body-image__img { display: block; width: 100%; height: auto; }
.jn-body-image__caption {
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-top: var(--jn-hairline);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.6;
}
@media (min-width: 782px) {
  .jn-card, .jn-related__item {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--wp--preset--spacing--40);
    align-items: start;
  }
}

/* ── 넓은 폭 도구 (식단표·장보기) ───────────────────────────── */
.jn-tool { border: var(--jn-hairline); background: var(--wp--preset--color--paper); }
.jn-tool__head {
  background: var(--wp--preset--color--surface);
  border-bottom: var(--jn-hairline);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.jn-tool__eyebrow {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--wp--preset--color--muted);
  margin: 0;
}
.jn-tool__title { margin: var(--wp--preset--spacing--20) 0 0; border: 0; }
.jn-tool__foot {
  margin: 0;
  padding: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.6;
  color: var(--wp--preset--color--muted);
}

/* ── 식단표: 요일을 행으로 (모바일 가로 스크롤 없음) ─────────── */
.jn-meal__day {
  display: grid;
  grid-template-columns: 56px 1fr;
  border-bottom: var(--jn-hairline);
}
.jn-meal__badge {
  background: var(--wp--preset--color--surface);
  border-right: var(--jn-hairline);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--wp--preset--spacing--30) 0;
}
.jn-meal__badge > span {
  width: 36px; height: 36px; border-radius: 18px;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.jn-meal__slots { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); }
.jn-slot {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--wp--preset--spacing--20);
  align-items: center;
  padding: var(--wp--preset--spacing--20) 0;
}
.jn-slot + .jn-slot { border-top: var(--jn-dashed); }
.jn-slot__key {
  width: 32px; height: 32px; border-radius: 16px;
  border: var(--jn-hairline);
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--table); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.jn-slot p, .jn-slot__val {
  margin: 0;
  font-size: var(--wp--preset--font-size--table);
  line-height: 1.5;
  font-weight: 500;
}
.jn-slot--note {
  grid-template-columns: 16px 1fr;
  gap: var(--wp--preset--spacing--10);
  /* 여러 줄로 접히는 주석이라 `!`는 가운데가 아니라 첫 줄에 붙어야 읽힙니다. */
  align-items: baseline;
  border-top: var(--jn-dashed);
  padding-bottom: 0;
}
.jn-slot--note, .jn-slot--note p { color: var(--wp--preset--color--caution); font-size: var(--wp--preset--font-size--caption); line-height: 1.6; }
.jn-slot--note .jn-slot__key { border: 0; background: none; width: auto; height: auto; font-weight: 800; color: inherit; }

/* 데스크톱: 4열 표로 전환 */
@media (min-width: 782px) {
  .jn-meal__cols {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr;
    background: var(--wp--preset--color--surface);
    border-bottom: var(--jn-hairline);
  }
  .jn-meal__cols > * {
    margin: 0;
    padding: var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--table);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--muted);
  }
  .jn-meal__cols > * + * { border-left: var(--jn-hairline); }
  .jn-meal__day { grid-template-columns: 80px 1fr 1fr 1fr; align-items: stretch; }
  /* 주석이 붙은 날은 2행이 됩니다. 배지가 두 행을 덮어야 요일 칸의 면 색이 중간에 끊기지
     않습니다. 주석이 없는 날은 2행이 비어 높이 0이므로 빈 줄이 생기지 않습니다. */
  .jn-meal__badge { align-items: center; grid-row: 1 / span 2; }
  .jn-meal__slots { display: contents; }
  .jn-slot {
    display: block;
    grid-template-columns: none;
    padding: var(--wp--preset--spacing--30);
    border-left: var(--jn-hairline);
  }
  .jn-slot + .jn-slot { border-top: 0; }
  .jn-slot__key { display: none; }
  /* 주석은 곡·단·채 아래 한 줄을 통째로 씁니다. 3열을 명시적으로 차지하면 자동 배치가
     밀려 채소 칸이 다음 줄로 떨어집니다. */
  .jn-slot--note {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--10);
    grid-column: 2 / -1;
    grid-row: 2;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
  }
  .jn-slot + .jn-slot--note { border-top: var(--jn-dashed); }
  .jn-slot--note .jn-slot__key { display: block; }
  .jn-slot--note p { margin: 0; }
}
.jn-meal__cols { display: none; }
@media (min-width: 782px) { .jn-meal__cols { display: grid; } }

/* ── 장보기 체크리스트 ─────────────────────────────────────── */
.jn-check__bar { height: 8px; background: var(--wp--preset--color--rule); }
.jn-check__bar > i { display: block; height: 100%; background: var(--wp--preset--color--accent); transition: width 0.2s ease; }
.jn-check__actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  /* 좌우 여백은 `.jn-tool__head`·`.jn-check__list`·`.jn-check__groups`와 같은 값이어야
     합니다. 이 줄만 여백이 없어서 `0 / 12`가 섹션 왼쪽 끝에 붙고 위의 제목과 세로
     기준선이 어긋나 있었습니다. 진행바(`.jn-check__bar`)는 폭 전체를 채우는 것이
     맞으므로 여백을 주지 않습니다. */
  padding: var(--wp--preset--spacing--30);
}
.jn-check__count { font-size: var(--wp--preset--font-size--table); font-weight: 700; color: var(--wp--preset--color--accent); white-space: nowrap; }
.jn-check__btn {
  border: 1px solid var(--wp--preset--color--muted);
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  /* `font: 700 16px/1 inherit`는 단축 속성에 inherit를 섞어 선언 전체가 버려졌고,
     버튼이 브라우저 기본값 13px로 떨어져 안내 문구 하한 16px을 어겼습니다. */
  font-family: inherit;
  font-size: var(--wp--preset--font-size--note);
  font-weight: 700;
  line-height: 1;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-radius: 4px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.jn-check__btn:hover, .jn-check__btn:focus-visible {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}
.jn-check__group { border-bottom: var(--jn-hairline); }
/* 묶음 상자는 flow 레이아웃이라 워드프레스가 둘째 카드부터 blockGap 24px를 위 여백으로
   붙입니다. 데스크톱 그리드 안에서는 그 여백이 카드를 셀 안에서 아래로 밀어 첫 카드만
   위로 튀어나옵니다. 세로 간격은 카드 자신의 괘선과 안쪽 여백이 이미 맡고 있습니다. */
.jn-check__groups > .jn-check__group { margin-block-start: 0; }
.jn-check__group > h3, .jn-check__group > h4 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--table);
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 0;
}
.jn-check__list { list-style: none; margin: 0; padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); }
.jn-check__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--wp--preset--spacing--20);
  align-items: center;
  min-height: 44px;
  padding: var(--wp--preset--spacing--20) 0;
  border-top: var(--jn-dashed);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.6;
  cursor: pointer;
  outline: none;
}
.jn-check__list li::before {
  content: "";
  width: 28px; height: 28px;
  border: 2px solid var(--wp--preset--color--ink);
  background: var(--wp--preset--color--paper);
}
.jn-check__list li[aria-checked="true"] {
  color: var(--wp--preset--color--muted);
  text-decoration: line-through;
}
.jn-check__list li[aria-checked="true"]::before {
  content: "✓";
  border-color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
  font-size: var(--wp--preset--font-size--table);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.jn-check__list li:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
@media (min-width: 782px) {
  /* 열 수를 고정하지 않습니다. 태블릿 폭에서 4열을 밀어붙이면 한 칸이 170px까지 줄어
     `저염 간장 · 1병` 같은 항목이 매번 두 줄로 접힙니다. 240px를 하한으로 두면 폭에 따라
     2~4열이 저절로 정해집니다. */
  .jn-check__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
  .jn-check__group { border: var(--jn-hairline); }
  .jn-check__group > h3, .jn-check__group > h4 { background: var(--wp--preset--color--surface); border-bottom: var(--jn-hairline); padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }
}

/* ── 의료 면책 ─────────────────────────────────────────────── */
.jn-callout {
  background: var(--wp--preset--color--surface);
  border-left: 4px solid var(--wp--preset--color--caution);
  padding: var(--wp--preset--spacing--30);
}
.jn-callout__label {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--caution);
}
.jn-callout p { font-size: var(--wp--preset--font-size--table); line-height: 1.75; }

/* ── 대체 식재료 표 ────────────────────────────────────────── */
/* 표가 좁은 화면에서 넘치더라도 페이지 전체가 가로로 밀리면 안 됩니다. 스크롤은 표 안에서만. */
.jn-subs { overflow-x: auto; }
.jn-subs table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--table); line-height: 1.55; }
.jn-subs th, .jn-subs td { border: var(--jn-hairline); padding: var(--wp--preset--spacing--30); text-align: left; vertical-align: top; }
.jn-subs thead th { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--muted); font-weight: 700; letter-spacing: 0.06em; }
.jn-subs tbody th { background: var(--wp--preset--color--surface); font-size: var(--wp--preset--font-size--body); font-weight: 800; }
.jn-subs td em { font-style: normal; color: var(--wp--preset--color--caution); }
@media (max-width: 781px) {
  .jn-subs table, .jn-subs tbody, .jn-subs tr, .jn-subs td, .jn-subs th { display: block; width: auto; }
  .jn-subs thead { display: none; }
  .jn-subs tr { border: var(--jn-hairline); margin-bottom: var(--wp--preset--spacing--30); }
  .jn-subs tr th, .jn-subs tr td { border: 0; }
  .jn-subs tr td + td { border-top: var(--jn-dashed); }
}

/* ── 제작 및 검수 안내 ─────────────────────────────────────── */
.jn-note { border-top: var(--jn-section); padding-top: var(--wp--preset--spacing--30); }
.jn-note h2, .jn-note h3 { border: 0; margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--lead); }
.jn-note dl { margin: 0; }
.jn-note div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--wp--preset--spacing--20);
  padding-bottom: var(--wp--preset--spacing--20);
  border-bottom: var(--jn-hairline);
  margin-bottom: var(--wp--preset--spacing--20);
}
.jn-note div:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.jn-note dt { font-size: var(--wp--preset--font-size--caption); font-weight: 700; color: var(--wp--preset--color--muted); }
.jn-note dd { margin: 0; font-size: var(--wp--preset--font-size--note); line-height: 1.7; }
.jn-note dd.is-caution { color: var(--wp--preset--color--caution); }

/* ── 출처 목록 ─────────────────────────────────────────────── */
.jn-sources { list-style: none; margin: 0; padding: 0; counter-reset: src; }
.jn-sources li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--30) 0;
  border-bottom: var(--jn-hairline);
}
.jn-sources li::before {
  content: counter(src, decimal-leading-zero);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--wp--preset--color--rule);
}
.jn-sources strong { display: inline-block; font-size: var(--wp--preset--font-size--table); font-weight: 800; margin-right: var(--wp--preset--spacing--10); }
.jn-sources .jn-badge {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  color: var(--wp--preset--color--accent);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 4px;
  padding: 0 var(--wp--preset--spacing--10);
  white-space: nowrap;
}
.jn-sources .jn-badge--society { color: var(--wp--preset--color--muted); border-color: var(--wp--preset--color--rule); }
.jn-sources a { display: block; margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--note); line-height: 1.7; }
.jn-sources small { display: block; margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--muted); }

/* ── 제휴 고지 ─────────────────────────────────────────────── */
.jn-affiliate {
  border: var(--jn-hairline);
  background: var(--wp--preset--color--surface);
  padding: var(--wp--preset--spacing--30);
}
.jn-affiliate p { margin: 0; font-size: var(--wp--preset--font-size--note); line-height: 1.7; color: var(--wp--preset--color--muted); }

/* ── 광고 자리: 단락이 끝난 곳에만 ─────────────────────────── */
.jn-ad {
  margin: var(--wp--preset--spacing--60) 0;
  padding: var(--wp--preset--spacing--20) 0;
  border-top: var(--jn-hairline);
  border-bottom: var(--jn-hairline);
}
.jn-ad__label {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--muted);
}
.jn-ad__slot { min-height: 200px; display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--surface); }
.jn-ad--rail { margin: 0; border-top: var(--jn-hairline); border-bottom: 0; }
.jn-ad--rail .jn-ad__slot { min-height: 600px; }

/* ── 관련 글·영상 ──────────────────────────────────────────── */
.jn-related a { text-decoration: none; color: var(--wp--preset--color--ink); }
.jn-related a:hover { background: var(--wp--preset--color--surface); }
.jn-related__kind { font-size: var(--wp--preset--font-size--caption); font-weight: 700; color: var(--wp--preset--color--accent); letter-spacing: 0.06em; }
.jn-related__kind--video { color: var(--wp--preset--color--ink); }
.jn-related__kind--video span { border: 1px solid var(--wp--preset--color--ink); border-radius: 4px; padding: 0 var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--10); }

/* ── 목차 (데스크톱 사이드 레일) ───────────────────────────── */
.jn-rail { position: sticky; top: var(--wp--preset--spacing--40); }
.jn-toc { border: var(--jn-hairline); }
.jn-toc__label { margin: 0; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); background: var(--wp--preset--color--surface); border-bottom: var(--jn-hairline); font-size: var(--wp--preset--font-size--caption); font-weight: 700; letter-spacing: 0.08em; color: var(--wp--preset--color--muted); }
.jn-toc ul { list-style: none; margin: 0; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); }
.jn-toc li + li { border-top: var(--jn-dashed); }
.jn-toc a { display: block; padding: var(--wp--preset--spacing--20) 0; font-size: var(--wp--preset--font-size--note); line-height: 1.6; text-decoration: none; color: var(--wp--preset--color--muted); }
.jn-toc a:hover, .jn-toc [aria-current="true"] { color: var(--wp--preset--color--ink); font-weight: 700; }

/* ── 인쇄: 식단표와 장보기 목록이 살아남아야 합니다 ─────────── */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff; }
  body { font-size: 12pt; }
  .wp-site-blocks > header,
  .wp-site-blocks > footer,
  .jn-ad, .jn-rail, .jn-related, .jn-check__actions, .jn-affiliate,
  .jn-featured, .jn-featured-caption, .jn-body-image,
  .wp-block-post-navigation-link, .wp-block-comments { display: none !important; }
  .jn-tool, .jn-meal__day, .jn-check__group, .jn-sources li, .jn-callout, .jn-note { break-inside: avoid; }
  .jn-tool { border-color: #000; }
  .jn-meal__badge > span {
    background: #fff !important;
    color: #000 !important;
    border: 1.5pt solid #000;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  /* 체크칸은 인쇄에서 항상 빈 사각형으로 */
  .jn-check__list li::before,
  .jn-check__list li[aria-checked="true"]::before {
    content: "" !important;
    border: 1.5pt solid #000 !important;
    background: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .jn-check__list li[aria-checked="true"] { color: #000; text-decoration: none; }
  .jn-check__bar { display: none; }
  .jn-slot--note, .jn-note dd.is-caution { color: #000; font-weight: 700; }
  a[href]::after { content: ""; }
  .jn-sources a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}