/* ============================================================
   Joy's Diary — 화면 조각 (public/diary/** 전용, main.css 다음에 불러온다)
   · 색은 main.css 의 토큰만 쓴다(--brand-* · --diary-*). 하늘·살구 두 색은 main.css 에 아직 없어
     var(--diary-sky, …) 처럼 기본값을 같이 적었다 → docs/공통파일-요청.md 에 토큰 추가를 요청함.
   · 단순·여백·통일: 둥근 모서리(--radius-*)·한 가지 그림자·한 가지 점선만 쓴다.
   · 속지(.jd-sheet)는 "종이"라서 어두운 화면에서도 밝은 종이색 그대로 둔다(인쇄와 같은 모습).
   ============================================================ */

body[data-site="diary"] {
  --jd-sky: var(--diary-sky, #CFE6F8);
  --jd-apricot: var(--diary-apricot, #F9D3C4);
  --jd-dash: 2px dashed var(--brand-line);
}

/* ── 공통 버튼: main.css 의 .btn-primary:hover 가 먹고또먹고 남색을 박아 두어 다이어리에서 색이 튄다 ── */
body[data-site="diary"] .btn-primary:hover { background: var(--brand-primary-deep); color: var(--on-primary-deep); filter: brightness(.92); box-shadow: 0 4px 12px var(--brand-focus); }
body[data-site="diary"] .btn-secondary:hover { background: var(--brand-bg-soft); color: var(--brand-primary-deep); }

/* ── 머리 메뉴: 다이어리는 메뉴가 10개다. main.js 가 글씨·밝기 단추 넷을 메뉴 줄 안(#viewPrefsHost)에 넣어서
   1280·1440 노트북에서도 줄이 넘쳤다(실측). → 넓은 화면: 메뉴 줄의 글씨 단추 넷 대신 머리의 「가 글씨 크게」 한 단추(폰과 같은 것)
   + 발밑의 글씨·밝기 단추. 중간 폭(768~1180): ☰ ── */
body[data-site="diary"] .font-cycle { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--touch-min); padding: 0 .75rem; border: 2px solid var(--brand-primary-deep); border-radius: 22px; background: var(--brand-bg); color: var(--brand-primary-deep); font-weight: 800; font-size: .95rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
body[data-site="diary"] .font-cycle b { font-size: 1.15rem; }
@media (min-width: 1181px) {
  body[data-site="diary"] .site-nav #viewPrefsHost { display: none; }
  body[data-site="diary"] .site-nav a { padding: var(--sp-2) 9px; }
  body[data-site="diary"] .site-switch .site-switch-long { display: none; }
  body[data-site="diary"] .font-cycle span { display: none; }
  body[data-site="diary"] .font-cycle { order: 9; margin-left: var(--sp-2); padding: 0 .65rem; }
}
@media (min-width: 768px) and (max-width: 1180px) {
  body[data-site="diary"] .site-nav { display: none; }
  body[data-site="diary"] .site-nav.open { display: flex; flex-direction: column; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: var(--brand-bg); padding: var(--sp-6); gap: var(--sp-2); overflow-y: auto; z-index: 99; }
  body[data-site="diary"] .site-nav.open a { font-size: 18px; padding: var(--sp-4); border-radius: var(--radius-md); }
  body[data-site="diary"] .nav-toggle { display: flex; flex-direction: column; gap: 5px; }
}
body[data-site="diary"] .site-logo, body[data-site="diary"] .site-switch { flex-shrink: 0; }
body[data-site="diary"] .site-logo img { height: 40px; }

/* ── 쪽 머리 ── */
.jd-page-header { background: var(--brand-bg-soft); border-bottom: 1px solid var(--brand-line); padding: var(--sp-10) 0 var(--sp-8); position: relative; overflow: hidden; }
.jd-page-header h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-2); }
.jd-page-header p { color: var(--brand-ink-soft); max-width: 36em; margin: 0; }
.jd-page-header .jd-peek { position: absolute; right: max(12px, calc(50% - 540px)); bottom: -18px; width: 108px; opacity: .95; }
@media (max-width: 600px) { .jd-page-header .jd-peek { width: 76px; bottom: -14px; right: 8px; } .jd-page-header p { padding-right: 70px; } }

/* ── 홈 히어로 ── */
.jd-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); background:
  radial-gradient(circle at 12% 20%, var(--brand-tint) 0 14%, transparent 15%),
  radial-gradient(circle at 92% 78%, color-mix(in srgb, var(--diary-mint) 40%, transparent) 0 12%, transparent 13%),
  var(--brand-page); }
.jd-hero .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: center; }
.jd-hero h1 { font-size: var(--fs-display); line-height: 1.2; margin-bottom: var(--sp-4); word-break: keep-all; }
.jd-hero h1 em { font-style: normal; background: linear-gradient(transparent 60%, var(--brand-tint) 60%); }
.jd-hero .jd-lead { font-size: var(--fs-lead, 1.15rem); color: var(--brand-ink-soft); margin-bottom: var(--sp-6); max-width: 30em; word-break: keep-all; }
.jd-hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--brand-bg); border: 2px solid var(--brand-primary); font-weight: 700; font-size: var(--font-size-small); margin-bottom: var(--sp-4); }
.jd-hero-art { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; min-height: 300px; }
.jd-hero-art img { display: block; }
.jd-hero-art .jd-art-joy { width: min(42%, 220px); position: relative; z-index: 2; margin-right: -6%; }
.jd-hero-art .jd-art-dodam { width: min(56%, 300px); position: relative; z-index: 1; }
.jd-hero-art .jd-bubble { position: absolute; top: 2%; left: 4%; z-index: 3; background: var(--brand-bg); border: 2px solid var(--brand-ink); border-radius: 18px; padding: 8px 14px; font-weight: 800; font-size: var(--font-size-small); box-shadow: var(--shadow-sm); }
.jd-hero-art .jd-bubble::after { content: ''; position: absolute; left: 28px; bottom: -10px; width: 14px; height: 14px; background: var(--brand-bg); border-right: 2px solid var(--brand-ink); border-bottom: 2px solid var(--brand-ink); transform: rotate(45deg); }
@media (max-width: 860px) {
  .jd-hero .container { grid-template-columns: 1fr; text-align: center; }
  .jd-hero .jd-lead { margin-left: auto; margin-right: auto; }
  .jd-hero .hero-actions { justify-content: center; }
  .jd-hero-art { min-height: 220px; order: -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .jd-hero-art .jd-art-dodam { animation: jd-bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
  .jd-hero-art .jd-art-joy { animation: jd-bob 3.2s ease-in-out -1.6s infinite; transform-origin: 50% 100%; }
}
@keyframes jd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── 구역 ── */
.jd-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.jd-section--soft { background: var(--brand-bg-soft); }
.jd-section-head { text-align: center; margin: 0 auto var(--sp-8); max-width: 36em; }
.jd-section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); word-break: keep-all; }
.jd-section-head p { color: var(--brand-ink-soft); margin: 0; word-break: keep-all; }
.jd-kicker { display: inline-block; font-size: var(--font-size-small); font-weight: 800; color: var(--brand-primary-deep); letter-spacing: .04em; margin-bottom: var(--sp-2); }

/* ── 카드 ── */
.jd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); }
.jd-card { background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-2); color: inherit; }
a.jd-card { text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
a.jd-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.jd-card h3 { font-size: var(--fs-h3); margin: 0; }
.jd-card p { margin: 0; color: var(--brand-ink-soft); word-break: keep-all; }
.jd-card .jd-card-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; }
.jd-card .jd-more { margin-top: auto; padding-top: var(--sp-2); font-weight: 700; color: var(--brand-primary-deep); }
.jd-step-no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-primary); color: var(--on-primary); font-weight: 800; }

/* 톤 — 감정·카드 바탕 칠(토큰만) */
.jd-tone-butter   { background: var(--diary-butter); }
.jd-tone-pink     { background: var(--diary-pink); }
.jd-tone-mint     { background: var(--diary-mint); }
.jd-tone-lavender { background: var(--diary-lavender); }
.jd-tone-sky      { background: var(--jd-sky); }
.jd-tone-apricot  { background: var(--jd-apricot); }
[class*="jd-tone-"] { color: var(--diary-ink); }

/* ── 띠(한 줄 알림) ── */
.jd-ribbon { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; justify-content: space-between; padding: var(--sp-5) var(--sp-6); border-radius: var(--radius-lg); background: var(--brand-tint); border: 2px solid var(--brand-primary); }
.jd-ribbon p { margin: 0; font-weight: 700; word-break: keep-all; }
.jd-ribbon img { width: 64px; height: 64px; flex: none; }
.jd-ribbon-body { display: flex; align-items: center; gap: var(--sp-4); flex: 1 1 280px; }

/* 「오늘의 마음 문장」 */
.jd-quote { display: flex; align-items: center; gap: var(--sp-4); max-width: 720px; margin: 0 auto; padding: var(--sp-6); background: var(--brand-bg); border-radius: var(--radius-lg); border: var(--jd-dash); }
.jd-quote img { width: 84px; flex: none; }
.jd-quote small { display: block; color: var(--brand-ink-soft); font-weight: 700; margin-bottom: 4px; }
.jd-quote p { margin: 0; font-size: 1.15rem; font-weight: 700; word-break: keep-all; }

/* ── 스티커 ── */
.jd-sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-5); }
.jd-sticker { text-align: center; }
.jd-sticker img { width: 100%; max-width: 160px; margin: 0 auto var(--sp-2); filter: drop-shadow(0 3px 6px rgba(74,63,85,.15)); }
.jd-sticker strong { display: block; }
.jd-sticker span { font-size: var(--font-size-small); color: var(--brand-ink-soft); word-break: keep-all; }
.jd-chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }
.jd-char { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-5); align-items: center; }
.jd-char img { width: 140px; }
.jd-char dl { margin: var(--sp-3) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--font-size-small); }
.jd-char dt { font-weight: 800; color: var(--brand-primary-deep); }
.jd-char dd { margin: 0; color: var(--brand-ink-soft); }
@media (max-width: 420px) { .jd-char { grid-template-columns: 96px 1fr; } .jd-char img { width: 96px; } }
.jd-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-4); }
.jd-faces figure { margin: 0; text-align: center; background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-2) var(--sp-2); }
.jd-faces img { width: 100%; max-width: 120px; margin: 0 auto; }
.jd-faces figcaption { font-weight: 700; font-size: var(--font-size-small); }

/* ── 사양표 ── */
.jd-spec { width: 100%; border-collapse: collapse; background: var(--brand-bg); border-radius: var(--radius-md); overflow: hidden; }
.jd-spec th, .jd-spec td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--brand-line); vertical-align: top; word-break: keep-all; }
.jd-spec th { width: 7.5em; color: var(--brand-primary-deep); background: var(--brand-bg-soft); }
.jd-note { font-size: var(--font-size-small); color: var(--brand-ink-soft); margin-top: var(--sp-3); }

/* ── 속지 견본 (.jd-sheet) — 화면 미리보기와 인쇄가 같은 그림이다 ── */
.jd-sheet-wrap { container-type: inline-size; width: 100%; max-width: 420px; margin: 0 auto; }
.jd-sheet { position: relative; aspect-ratio: 148 / 210; width: 100%; background: var(--diary-paper); color: var(--diary-ink); border-radius: 6px; box-shadow: 0 2px 0 var(--brand-line), var(--shadow-md); padding: 6cqw 6cqw 5cqw; font-size: 3.1cqw; line-height: 1.45; display: flex; flex-direction: column; gap: 2.6cqw; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.jd-sheet h4 { font-size: 4.4cqw; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; color: var(--diary-plum); }
.jd-sheet h4 small { font-size: 2.6cqw; color: var(--diary-ink); font-weight: 600; opacity: .7; }
.jd-sheet .jd-row { display: flex; gap: 3cqw; align-items: center; }
.jd-sheet .jd-label { font-weight: 800; font-size: 2.8cqw; color: var(--diary-plum); white-space: nowrap; }
.jd-sheet .jd-lines { display: grid; gap: 0; flex: 1; }
.jd-sheet .jd-line { border-bottom: .35cqw dashed color-mix(in srgb, var(--diary-plum) 35%, transparent); min-height: 6.4cqw; padding: .6cqw .4cqw 0; font-size: 3cqw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jd-sheet .jd-circle { width: 22cqw; height: 22cqw; border-radius: 50%; border: .5cqw dashed var(--diary-plum); display: grid; place-items: center; flex: none; text-align: center; font-size: 2.5cqw; color: color-mix(in srgb, var(--diary-ink) 55%, transparent); }
.jd-sheet .jd-circle img { width: 92%; }
.jd-sheet .jd-dots { display: flex; gap: 1.6cqw; }
.jd-sheet .jd-dot { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; border: .45cqw solid var(--diary-plum); display: grid; place-items: center; font-size: 2.3cqw; font-weight: 800; }
.jd-sheet .jd-dot.on { background: var(--diary-pink); }
.jd-sheet .jd-cup { width: 3.6cqw; height: 4.6cqw; border: .45cqw solid var(--diary-plum); border-top: 0; border-radius: 0 0 1.2cqw 1.2cqw; }
.jd-sheet .jd-cup.on { background: var(--jd-sky); }
.jd-sheet .jd-box { width: 4.4cqw; height: 4.4cqw; border: .45cqw solid var(--diary-plum); border-radius: 1cqw; display: inline-grid; place-items: center; font-size: 3cqw; font-weight: 900; flex: none; }
.jd-sheet .jd-card-in { border: .4cqw solid var(--brand-line); background: #fff; border-radius: 2.4cqw; padding: 2.4cqw 3cqw; }
.jd-sheet .jd-foot { margin-top: auto; display: flex; align-items: center; gap: 2cqw; font-size: 2.6cqw; color: var(--diary-plum); }
.jd-sheet .jd-foot img { width: 8cqw; }
.jd-sheet .jd-grid7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1cqw; }
.jd-sheet .jd-grid7 > div { border: .35cqw solid var(--brand-line); background: #fff; border-radius: 1.4cqw; min-height: 10cqw; padding: .8cqw; font-size: 2.4cqw; font-weight: 800; color: var(--diary-plum); }
.jd-sheet .jd-mood { display: grid; grid-template-columns: 5.4cqw repeat(31, minmax(0, 1fr)); gap: .5cqw; align-items: center; font-size: 2cqw; }
.jd-sheet .jd-mood span { aspect-ratio: 1; border: .3cqw solid color-mix(in srgb, var(--diary-plum) 45%, transparent); border-radius: .8cqw; display: grid; place-items: center; font-size: 1.6cqw; background: #fff; }
.jd-sheet .jd-mood b { font-size: 2.1cqw; color: var(--diary-plum); white-space: nowrap; }
.jd-sheet .jd-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw 2cqw; font-size: 2.4cqw; }
.jd-sheet .jd-legend div { display: flex; align-items: center; gap: 1cqw; }
.jd-sheet .jd-legend img { width: 6.4cqw; }
.jd-sheet .jd-legend i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; border: .35cqw solid var(--diary-plum); flex: none; }
.jd-sheet .jd-week { display: grid; gap: 1.2cqw; }
.jd-sheet .jd-week > div { display: grid; grid-template-columns: 7cqw 9cqw 1fr; gap: 2cqw; align-items: center; border-bottom: .35cqw dashed color-mix(in srgb, var(--diary-plum) 35%, transparent); padding-bottom: 1cqw; }
.jd-sheet .jd-week b { color: var(--diary-plum); }
.jd-sheet .jd-week i { width: 8cqw; height: 8cqw; border-radius: 50%; border: .4cqw dashed var(--diary-plum); }
.jd-sheet .jd-graph { display: grid; grid-template-columns: 6cqw repeat(7, minmax(0, 1fr)); gap: .6cqw; font-size: 2.1cqw; align-items: center; text-align: center; }
.jd-sheet .jd-graph span { height: 3.4cqw; border-bottom: .3cqw dotted color-mix(in srgb, var(--diary-plum) 40%, transparent); }
.jd-sheet .jd-stickers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.jd-sheet .jd-stickers img { width: 100%; }
.jd-sheet .jd-year { display: grid; grid-template-columns: 4cqw repeat(6, minmax(0, 1fr)); gap: .5cqw; font-size: 1.9cqw; }
.jd-sheet .jd-year span { height: 2.6cqw; border: .25cqw solid color-mix(in srgb, var(--diary-plum) 40%, transparent); border-radius: .5cqw; background: #fff; }
.jd-sheet .jd-year b { color: var(--diary-plum); text-align: center; }
.jd-sheet .jd-tape { height: 6cqw; border-radius: 1cqw; background: repeating-linear-gradient(90deg, var(--diary-pink) 0 6cqw, var(--diary-butter) 6cqw 12cqw, var(--diary-mint) 12cqw 18cqw, var(--diary-lavender) 18cqw 24cqw); opacity: .9; }
.jd-sheet .jd-fill { font-family: inherit; font-weight: 600; color: var(--diary-ink); }

/* 견본 넘겨 보기 */
.jd-sample-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-6); }
.jd-sample-tabs button { min-height: var(--touch-min); padding: 0 16px; border-radius: var(--radius-pill); border: 2px solid var(--brand-line); background: var(--brand-bg); color: var(--brand-ink); font-weight: 700; cursor: pointer; font-size: var(--font-size-small); }
.jd-sample-tabs button[aria-pressed="true"] { border-color: var(--brand-primary-deep); background: var(--brand-tint); color: var(--brand-primary-deep); }
.jd-sample { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.jd-sample-desc h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.jd-sample-desc ul { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); }
.jd-sample-desc li { padding-left: 1.4em; position: relative; word-break: keep-all; }
.jd-sample-desc li::before { content: '♥'; position: absolute; left: 0; color: var(--brand-accent); }
@media (max-width: 760px) { .jd-sample { grid-template-columns: 1fr; } }

/* ── 써보기 ── */
.jd-write > div:last-child { position: sticky; top: calc(var(--header-height) + 16px); }
@media (max-width: 900px) { .jd-write > div:last-child { position: static; } }
.jd-write { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
@media (max-width: 900px) { .jd-write { grid-template-columns: 1fr; } }
.jd-emotion-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); border: 0; padding: 0; margin: 0; }
.jd-emotion-pick legend { font-weight: 800; margin-bottom: var(--sp-3); }
.jd-emotion-pick label { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--radius-md); border: 2px solid var(--brand-line); background: var(--brand-bg); cursor: pointer; font-size: var(--font-size-small); font-weight: 700; min-height: var(--touch-min); }
.jd-emotion-pick label img { width: 60px; height: 60px; }
.jd-emotion-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jd-emotion-pick input:checked + span { color: var(--brand-primary-deep); }
.jd-emotion-pick label:has(input:checked) { border-color: var(--brand-primary-deep); background: var(--brand-tint); }
.jd-emotion-pick label:has(input:focus-visible) { outline: 3px solid var(--brand-primary-deep); outline-offset: 2px; }
.jd-level { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.jd-level label { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-min); min-height: var(--touch-min); border-radius: 50%; border: 2px solid var(--brand-line); background: var(--brand-bg); font-weight: 800; cursor: pointer; }
.jd-level input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jd-level label:has(input:checked) { background: var(--brand-primary); border-color: var(--brand-primary-deep); color: var(--on-primary); }
.jd-level label:has(input:focus-visible) { outline: 3px solid var(--brand-primary-deep); outline-offset: 2px; }
.jd-care { display: grid; gap: var(--sp-3); }
.jd-care .jd-cups { display: flex; gap: 6px; flex-wrap: wrap; }
.jd-care .jd-cups button { width: var(--touch-min); height: var(--touch-min); border-radius: 0 0 14px 14px; border: 2px solid var(--brand-primary-deep); border-top-width: 0; background: var(--brand-bg); cursor: pointer; font-size: 18px; }
.jd-care .jd-cups button[aria-pressed="true"] { background: var(--jd-sky); }
.jd-form-block { background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: var(--sp-6); display: grid; gap: var(--sp-5); }
.jd-privacy { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--radius-md); background: color-mix(in srgb, var(--diary-mint) 35%, var(--brand-bg)); font-size: var(--font-size-small); }
.jd-privacy strong { display: block; }
.jd-entries { display: grid; gap: var(--sp-3); }
.jd-entry { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border: 1px solid var(--brand-line); background: var(--brand-bg); border-radius: var(--radius-md); }
.jd-entry img { width: 56px; height: 56px; }
.jd-entry b { display: block; }
.jd-entry span { color: var(--brand-ink-soft); font-size: var(--font-size-small); word-break: break-all; }
.jd-entry-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.jd-entry-acts .btn { min-height: var(--touch-min); }
@media (max-width: 480px) { .jd-entry { grid-template-columns: 48px 1fr; } .jd-entry img { width: 48px; height: 48px; } .jd-entry-acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* ── 내려받기 ── */
.jd-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); }
.jd-picks label { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); border: 2px solid var(--brand-line); border-radius: var(--radius-md); background: var(--brand-bg); cursor: pointer; font-weight: 700; min-height: var(--touch-min); }
.jd-picks label:has(input:checked) { border-color: var(--brand-primary-deep); background: var(--brand-tint); }
.jd-print-area { display: grid; gap: var(--sp-6); justify-items: center; }

/* ── 상품 ── */
.jd-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-5); }
.jd-product { background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.jd-product-art { aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; }
.jd-product-art img { max-height: 78%; width: auto; }
.jd-product-body { padding: var(--sp-5); display: grid; gap: var(--sp-2); flex: 1; align-content: start; }
.jd-product-body h3 { margin: 0; font-size: var(--fs-h3); }
.jd-product-body p { margin: 0; color: var(--brand-ink-soft); font-size: var(--font-size-small); word-break: keep-all; }
.jd-price { font-weight: 800; font-size: 1.15rem; }
.jd-price small { font-weight: 600; color: var(--brand-ink-soft); font-size: var(--font-size-small); margin-left: 4px; }
.jd-soon { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--brand-bg); border: 2px solid var(--brand-primary-deep); color: var(--brand-primary-deep); font-weight: 800; font-size: var(--font-size-small); }
.jd-anchor { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 700px) { .jd-anchor { grid-template-columns: 1fr; } }
.jd-cover { width: 46%; aspect-ratio: 148 / 210; border-radius: 4px 12px 12px 4px; background: var(--diary-pink); box-shadow: inset 8px 0 0 var(--brand-accent), var(--shadow-md); display: grid; place-items: center; position: relative; }
.jd-cover img { width: 72%; }
.jd-cover b { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; color: var(--diary-ink); font-size: clamp(10px, 2.4vw, 15px); }

/* ── 채널 ── */
.jd-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-4); }
.jd-channel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); border-radius: var(--radius-lg); border: 2px solid var(--brand-line); background: var(--brand-bg); color: var(--brand-ink); text-decoration: none; text-align: center; transition: border-color var(--transition), transform var(--transition); }
.jd-channel:hover, .jd-channel:focus-visible { border-color: var(--brand-primary-deep); transform: translateY(-2px); text-decoration: none; }
.jd-channel .jd-ch-icon { font-size: 40px; line-height: 1; }
.jd-channel strong { font-size: 1.1rem; }
.jd-channel span { color: var(--brand-ink-soft); font-size: var(--font-size-small); }

/* ── 이야기 ── */
.jd-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-5); }
.jd-story { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: var(--radius-lg); overflow: hidden; }
.jd-story:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.jd-story .jd-story-img { background: var(--brand-bg-soft); overflow: hidden; }
.jd-story .jd-story-img img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top; }
.jd-story .jd-story-body { padding: var(--sp-4); display: grid; gap: 6px; }
.jd-story h3 { font-size: 1rem; margin: 0; line-height: 1.5; word-break: keep-all; }
.jd-story small { color: var(--brand-ink-soft); }

/* ── 떠 있는 「써보기」 단추 (먹고또먹고의 전화 단추 자리) ── */
.floating-btn.jd-float-write { background: var(--brand-primary-deep); color: var(--on-primary-deep); font-size: 22px; text-decoration: none; }

/* ── 발밑 ── */
.jd-footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; }
.jd-footer-brand img { width: 44px; height: 44px; background: #fff; border-radius: 50%; padding: 3px; }

.jd-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: var(--font-size-small); }
.jd-footer-links a { color: rgba(255,255,255,.82); display: inline-flex; align-items: center; min-height: var(--touch-min); }
.jd-footer-title { font-weight: 700; color: #fff; margin-bottom: 8px; }
@media (max-width: 640px) { .site-footer .footer-top { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ── 인쇄: .jd-print-area 만 남긴다 ── */
@media print {
  body[data-site="diary"] { background: #fff !important; }
  body[data-site="diary"] > *:not(main), body[data-site="diary"] main > *:not(.jd-print-root) { display: none !important; }
  .jd-print-root .jd-noprint { display: none !important; }
  .jd-print-root, .jd-print-root .container, .jd-print-root .jd-print-area { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .jd-print-area .jd-sheet-wrap { max-width: none; width: var(--jd-print-w, 148mm); margin: 0 auto; break-after: page; page-break-after: always; }
  .jd-print-area .jd-sheet-wrap:last-child { break-after: auto; page-break-after: auto; }
  .jd-print-area .jd-sheet { box-shadow: none; border-radius: 0; height: var(--jd-print-h, 210mm); aspect-ratio: auto; }
}