/* ============================================================
   theme-editorial.css — 긍정의 왕관유자 에디토리얼 테마 (v3)
   2026-09-29

   방향: 부모·교사가 휴대폰으로 긴 글을 읽는 연재 소설 사이트.
         흰 바탕 · 검정/회색 단색 · 1px 선 · 외곽선 알약 버튼 ·
         세리프 제목 · 넉넉한 본문 줄 간격. 브랜드 색(유자)은
         채도를 낮춘 황토 한 가지만, 작은 표식에만 쓴다.

   원칙: 가산 전용. 기존 class·id·스크립트는 건드리지 않고
         이 파일을 각 페이지 <head> 맨 끝에 덧붙여 덮어쓴다.
         인라인 style로 박힌 색은 !important로만 덮는다.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600;700&display=swap');

:root {
  /* ── 에디토리얼 토큰 ── */
  --ed-bg: #FFFFFF;
  --ed-bg-sub: #F7F7F7;
  --ed-line: #EBEBEB;
  --ed-line-strong: #D9D9D9;
  --ed-ink: #111111;
  --ed-ink-hover: #333333;
  --ed-text: #333333;
  --ed-sub: #666666;
  --ed-muted: #999999;
  --ed-on-ink: #FFFFFF;
  --ed-accent: #8F6B12;          /* 채도 낮춘 유자 황토 — 흰 바탕 대비 4.5:1 이상 */
  --ed-accent-soft: #F7F2E4;
  --ed-overlay: rgba(17, 17, 17, 0.4);
  --ed-shadow: 0 2px 10px rgba(17, 17, 17, 0.06);
  --ed-shadow-modal: 0 20px 48px -12px rgba(17, 17, 17, 0.25);

  --ed-serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --ed-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* radius 4종 · motion 3종 · 헤더 56px */
  --ed-r-sm: 4px;
  --ed-r-md: 8px;
  --ed-r-lg: 12px;
  --ed-r-full: 9999px;
  --ed-t-fast: 150ms;
  --ed-t: 200ms;
  --ed-t-slow: 300ms;
  --ed-header: 56px;

  /* ── 기존 토큰을 에디토리얼 값으로 다시 연결 ── */
  --canvas: var(--ed-bg);
  --canvas-cream: var(--ed-bg);
  --surface: var(--ed-bg-sub);
  --surface-soft: var(--ed-bg-sub);
  --hairline: var(--ed-line);
  --hairline-strong: var(--ed-line-strong);
  --ink-deep: var(--ed-ink);
  --ink: var(--ed-text);
  --charcoal: var(--ed-text);
  --slate: var(--ed-sub);
  --steel: var(--ed-muted);
  --stone: var(--ed-muted);
  --on-dark: var(--ed-on-ink);
  --yuja-forest: var(--ed-ink);
  --yuja-forest-mid: var(--ed-ink-hover);
  --yuja-lemon: var(--ed-ink-hover);
  --yuja-lemon-amber: var(--ed-ink);
  --yuja-lemon-tint: var(--ed-accent-soft);
  --leaf-green: var(--ed-accent);
  --leaf-green-mid: var(--ed-accent);
  --leaf-green-deep: var(--ed-accent);
  --leaf-green-light: var(--ed-bg-sub);
  --leaf-green-tint: var(--ed-bg-sub);
  --radius-sm: var(--ed-r-sm);
  --radius-md: var(--ed-r-md);
  --radius-lg: var(--ed-r-lg);
  --radius-xl: var(--ed-r-lg);
  --shadow-subtle: none;
  --shadow-card: none;
  --shadow-modal: var(--ed-shadow-modal);
  --shadow-frap: var(--ed-shadow);
}

/* ================= 공통 ================= */
html body {
  background: var(--ed-bg);
  color: var(--ed-text);
  font-family: var(--ed-sans);
  letter-spacing: -0.01em;
  word-break: keep-all;
}

html body .top-nav {
  height: var(--ed-header);
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ed-line);
}
html body .nav-logo { gap: 10px; }
html body .nav-logo img { height: 24px; }
html body .nav-logo::after {
  content: "긍정의 왕관유자";
  font-family: var(--ed-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ed-ink);
  letter-spacing: -0.02em;
}
html body .nav-logo .logo-dot { display: none; }

/* 떠 있는 버튼 (목차·시점·맨 위) */
html body .floating-actions { gap: 8px; }
html body .frap-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ed-line-strong);
  box-shadow: var(--ed-shadow);
  color: var(--ed-sub);
  transition: color var(--ed-t-fast) ease, border-color var(--ed-t-fast) ease;
}
html body .frap-btn:hover { color: var(--ed-ink); border-color: var(--ed-ink); }
html body .frap-btn:active { transform: none; }
html body .persona-pill {
  padding: 4px;
  border: 1px solid var(--ed-line-strong);
  box-shadow: var(--ed-shadow);
}
html body .persona-tab {
  width: 36px;
  height: 36px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ed-muted);
}
html body .persona-tab:hover { color: var(--ed-ink); }
html body .persona-tab.active { background: var(--ed-ink); color: var(--ed-on-ink); }
html body .persona-tab .icon { display: none; }
/* 아이콘: 모두 선 1.6px (Lucide 계열) — 인라인 stroke-width 속성보다 CSS가 우선한다 */
html body .frap-btn svg,
html body .side-nav-btn svg,
html body .page-nav-text svg,
html body .btn-primary-full svg,
html body .modal-close svg,
html body .arrow-col svg,
html body .empty-icon svg {
  stroke-width: 1.6;
}
html body .frap-btn svg { width: 20px; height: 20px; }
html body .empty-icon { color: var(--ed-muted); font-size: 0; margin-bottom: 12px; }
html body .modal-close { color: var(--ed-sub); }
html body .modal-close:hover { color: var(--ed-ink); }
html body .side-nav-btn { color: var(--ed-muted); }
html body .side-nav-btn:hover { background: transparent; }

html body footer {
  background: var(--ed-bg) !important;
  color: var(--ed-muted);
  border-top: 1px solid var(--ed-line);
  padding: 40px 24px 56px;
  font-size: 12px;
}
html body footer .footer-logo {
  color: var(--ed-ink);
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}

/* 모달 */
html body .modal-overlay { background: var(--ed-overlay); }
html body .modal { border-radius: var(--ed-r-lg); box-shadow: var(--ed-shadow-modal); }
html body .modal-close { border-radius: var(--ed-r-full); }

/* ================= 목록 (index.html) ================= */
html body .promo-banner {
  background: var(--ed-bg);
  color: var(--ed-muted);
  font-size: 12px;
  font-weight: 400;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ed-line);
}
html body .hero,
html body .hero:hover {
  background: var(--ed-bg);
  padding: 64px 24px 24px;
}
html body .hero-pre {
  font-size: 13px;
  color: var(--ed-muted);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
html body .hero-main-title {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 52px);
  letter-spacing: -0.04em;
  color: var(--ed-ink);
}
html body .title-char { color: var(--ed-ink); transition: color var(--ed-t) ease; }
html body .title-char:hover { color: var(--ed-accent); transform: none; }
html body .title-particle { color: var(--ed-muted); font-weight: 500; }
html body .hover-message { color: var(--ed-sub); font-size: 14px; }
html body .message-tag {
  background: var(--ed-accent-soft);
  color: var(--ed-accent);
  border-radius: var(--ed-r-full);
}

html body .main-container { max-width: 760px; }

html body .feature-band {
  background: var(--ed-bg) !important;
  color: var(--ed-ink) !important;
  margin: 0;
  padding: 24px 0 8px;
}
html body .feature-band .hero-badge { display: none; }
html body .feature-band h2 {
  font-family: var(--ed-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ed-ink);
  letter-spacing: -0.02em;
}
html body .feature-band h2 span {
  color: var(--ed-accent) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}
html body .feature-band p { color: var(--ed-muted); font-size: 13px; margin-top: 6px; }

html body .track-switcher-wrap {
  border-bottom: 1px solid var(--ed-line);
  margin: 20px 0 20px;
}
html body .track-switcher {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 28px;
  border-radius: 0;
}
html body .track-btn,
html body .track-btn.track-saga.active,
html body .track-btn.track-essay.active {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 12px 0;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ed-muted);
  border-bottom: 2px solid transparent;
}
html body .track-btn:hover { color: var(--ed-ink); }
html body .track-btn.active,
html body .track-btn.track-saga.active,
html body .track-btn.track-essay.active {
  color: var(--ed-ink);
  font-weight: 700;
  border-bottom-color: var(--ed-ink);
}

html body .tab-chip,
html body .filter-chip {
  background: var(--ed-bg);
  border: 1px solid var(--ed-line-strong);
  color: var(--ed-sub);
  box-shadow: none;
  border-radius: var(--ed-r-full);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  transition: border-color var(--ed-t-fast) ease, color var(--ed-t-fast) ease;
}
html body .tab-chip:hover,
html body .filter-chip:hover { border-color: var(--ed-ink); color: var(--ed-ink); background: var(--ed-bg); }
html body .tab-chip.active,
html body .filter-chip.active {
  background: var(--ed-ink);
  border-color: var(--ed-ink);
  color: var(--ed-on-ink);
}

html body .post-count-label { color: var(--ed-muted); font-size: 13px; font-weight: 500; }
html body .rows-select {
  border: 1px solid var(--ed-line-strong);
  border-radius: var(--ed-r-md);
  color: var(--ed-sub);
  background: var(--ed-bg);
  font-size: 13px;
}

html body .board-container {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
html body .list-subtitle-box {
  background: none !important;
  color: var(--ed-muted) !important;
  font-family: var(--ed-serif);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0 20px;
  border-bottom: 1px solid var(--ed-ink);
}
html body .post-item {
  background: none !important;
  padding: 28px 2px;
  gap: 12px;
  border-bottom: 1px solid var(--ed-line);
}
html body .post-item:hover { background: none !important; }
html body .post-item:hover .post-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
html body .post-avatar { display: none; }
html body .post-title-row { gap: 8px; flex-wrap: wrap; align-items: baseline; }
html body .track-badge,
html body .track-badge.saga-badge,
html body .track-badge.essay-badge {
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ed-accent);
}
html body .cat-badge {
  background: none !important;
  border: 1px solid var(--ed-line-strong) !important;
  color: var(--ed-sub) !important;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: var(--ed-r-full);
}
html body .post-title {
  font-family: var(--ed-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ed-ink);
  letter-spacing: -0.03em;
  line-height: 1.45;
  flex-basis: 100%;
}
html body .post-date-visible { font-size: 12px; color: var(--ed-muted); margin: 6px 0 10px; }
html body .post-intro {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ed-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html body .post-meta { margin-top: 12px; gap: 6px; }
html body .post-tag {
  background: none;
  border: 1px solid var(--ed-line-strong);
  color: var(--ed-muted);
  border-radius: var(--ed-r-full);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
}
html body .arrow-col { color: var(--ed-line-strong); }
html body .post-item:hover .arrow-col { color: var(--ed-ink); }

html body .pagination-row { gap: 4px; }
html body .page-btn {
  border: none;
  background: none;
  color: var(--ed-muted);
  border-radius: var(--ed-r-full);
  font-weight: 500;
}
html body .page-btn.active { background: var(--ed-ink); color: var(--ed-on-ink); }
html body .page-nav-text { color: var(--ed-sub); }
html body .empty-state { color: var(--ed-muted); }

/* ================= 글 (page.html) ================= */
html body[data-persona] .hero-band,
html body .hero-band {
  background: var(--ed-bg);
  color: var(--ed-ink);
  padding: 64px 24px 0;
}
html body .hero-band::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ed-ink);
  margin: 32px auto 0;
}
html body .hero-badge {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ed-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}
html body .hero-badge::before { content: none !important; }
html body .hero-title {
  font-family: var(--ed-serif);
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--ed-ink);
  max-width: 680px;
  margin: 0 auto;
}

html body .grid-layout { display: block; margin-top: 48px; }
html body .sidebar-section { margin-top: 64px; gap: 20px; }
html body .card-base,
html body[data-persona] .card-base {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
html body .blog-header { display: none; }
html body .blog-intro {
  font-family: var(--ed-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ed-ink);
  margin-bottom: 40px;
}
html body .blog-image-wrap { border-radius: var(--ed-r-sm); border: none; margin-bottom: 40px; }
html body .blog-content {
  font-size: 17px;
  line-height: 2;
  color: var(--ed-text);
}
html body .blog-content p { margin-bottom: 1.7em; }
html body .highlight-inline,
html body .dialogue-text {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
}
html body .dialogue-line {
  display: block;
  margin: 0.6em 0;
  padding-left: 2px;
  color: var(--ed-ink);
  font-weight: 500;
  line-height: 1.85;
}
html body .quote-block {
  background: none;
  border-left: 2px solid var(--ed-ink);
  border-radius: 0;
  padding: 4px 0 4px 20px;
  font-size: 18px;
}
html body .bullet-dot { background: var(--ed-muted); }
html body .step-marker { color: var(--ed-ink); }

html body .blog-quote-box {
  background: none;
  border-radius: 0;
  border-left: 2px solid var(--ed-ink);
  padding: 2px 0 2px 22px;
  margin: 56px 0;
  font-family: var(--ed-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.85;
  color: var(--ed-ink);
}
html body .blog-conclusion-box {
  background: none;
  color: var(--ed-sub);
  border-radius: 0;
  border-top: 1px solid var(--ed-line);
  padding: 28px 0 0;
  margin: 48px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}
html body .conclusion-icon { display: none; }
html body .naver-quote-wrap { margin: 56px 0 8px; }
html body .naver-quote { padding: 0 32px; max-width: 100%; }
html body .naver-quote::before,
html body .naver-quote::after { color: var(--ed-line-strong); font-size: 40px; }
html body .naver-quote::before { top: -12px; left: 0; }
html body .naver-quote::after { bottom: -28px; right: 0; }
html body .naver-quote-text {
  font-family: var(--ed-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ed-ink);
  white-space: pre-line;
}

html body .insta-card { border-color: var(--ed-line); box-shadow: none; border-radius: var(--ed-r-lg); }
html body .insta-tag { color: var(--ed-sub); font-weight: 500; }

html body .knowledge-box {
  background: var(--ed-bg-sub);
  color: var(--ed-text);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-r-lg);
  padding: 28px;
}
html body .knowledge-box::before { content: none; }
html body .know-badge { color: var(--ed-accent); letter-spacing: 0.08em; }
html body .know-title {
  font-family: var(--ed-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ed-ink);
  letter-spacing: -0.03em;
}
html body .know-summary-line { color: var(--ed-sub); font-size: 14px; line-height: 1.75; }
html body .know-summary-dot { background: var(--ed-muted); width: 4px; height: 4px; margin-top: 10px; }
html body .btn-primary-full {
  height: 44px;
  background: var(--ed-ink);
  color: var(--ed-on-ink);
  font-weight: 600;
  transition: background var(--ed-t-fast) ease;
}
html body .btn-primary-full:hover { background: var(--ed-ink-hover); }
html body .btn-primary-full:active { transform: none; }

html body .exp-type { background: var(--ed-bg-sub); color: var(--ed-sub); font-weight: 500; }
html body .exp-title { font-family: var(--ed-serif); font-weight: 600; letter-spacing: -0.03em; }
html body .exp-text { font-size: 15px; line-height: 1.85; }

/* ================= 지식 모아보기 (expertise.html) ================= */
html body .hero-subtitle { color: var(--ed-sub); font-size: 15px; line-height: 1.7; }
html body .index-panel {
  background: var(--ed-bg);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-r-lg);
  box-shadow: none;
}
html body .filter-label { color: var(--ed-muted); font-weight: 600; }
html body .search-input {
  border: 1px solid var(--ed-line-strong);
  border-radius: var(--ed-r-md);
  background: var(--ed-bg);
}
html body .search-input:focus { border-color: var(--ed-ink); box-shadow: none; outline: none; }
html body .knowledge-card {
  background: var(--ed-bg);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-r-lg);
  box-shadow: none;
  transition: border-color var(--ed-t-fast) ease;
}
html body .knowledge-card:hover { border-color: var(--ed-ink); transform: none; box-shadow: none; }
html body .knowledge-card::before { content: none; }
html body .badge,
html body .badge-type[class] {
  background: none !important;
  border: 1px solid var(--ed-line-strong) !important;
  color: var(--ed-sub) !important;
  font-weight: 500;
  border-radius: var(--ed-r-full);
}
html body .badge-category { color: var(--ed-accent) !important; border-color: var(--ed-accent-soft) !important; background: var(--ed-accent-soft) !important; }
html body .card-title,
html body .modal-title {
  font-family: var(--ed-serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ed-ink);
}
html body .card-title .title-sub,
html body .modal-title .title-sub {
  display: block;
  font-family: inherit;
  font-weight: 500;
  color: var(--ed-sub);
  letter-spacing: -0.01em;
}
html body .card-title .title-sub {
  font-size: 14px;
  margin-top: 4px;
  line-height: 1.35;
}
html body .modal-title .title-sub {
  font-size: 18px;
  margin-top: 6px;
  line-height: 1.35;
}
@media (max-width: 768px) {
  html body .modal-title .title-sub {
    font-size: 15px;
  }
}
html body .card-body,
html body .modal-body p { color: var(--ed-sub); line-height: 1.8; }
html body .modal-origin a { color: var(--ed-ink); }
@media (max-width: 768px) {
  html body .modal .yj-wang,
  html body .modal .yj-check { padding: 16px 14px; }
}

/* ================= 휴대폰 ================= */
@media (max-width: 640px) {
  html body .top-nav { padding: 0 16px; }
  html body .hero,
  html body .hero:hover { padding: 44px 16px 16px; }
  html body .hero-band,
  html body[data-persona] .hero-band { padding: 44px 16px 0; }
  html body .main-container { padding-left: 20px; padding-right: 20px; }
  html body .blog-content { font-size: 16.5px !important; line-height: 1.95; }
  html body .blog-intro { font-size: 17.5px !important; line-height: 1.85; }
  html body .blog-quote-box,
  html body .naver-quote-text { font-size: 17px !important; }
  html body .blog-conclusion-box { font-size: 15px !important; padding: 24px 0 0; }
  html body .post-item { padding: 24px 0; }
  html body .post-title { font-size: 18px; }
  /* 떠 있는 버튼 → 하단 고정 바 (본문을 가리지 않게) */
  html body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  html body .floating-actions {
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ed-line);
  }
  html body .frap-btn { width: 40px; height: 40px; border: none; box-shadow: none; }
  html body .persona-pill {
    flex-direction: row;
    box-shadow: none;
    border-color: var(--ed-line-strong);
  }
  html body .persona-tab { width: auto; height: 32px; padding: 0 16px; font-size: 13px; }

  /* 목록 탭: 한 줄 가로 스크롤 */
  html body .track-switcher {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 20px;
    scrollbar-width: none;
  }
  html body .track-switcher::-webkit-scrollbar,
  html body .category-row::-webkit-scrollbar { display: none; }
  html body .category-row { scrollbar-width: none; }
  html body .track-btn { white-space: nowrap; flex-shrink: 0; }
  html body .category-wrap { scrollbar-width: none; }
  html body .category-wrap::-webkit-scrollbar { display: none; }
  html body .post-title-row { flex-wrap: wrap; }
  html body .post-title { flex-basis: 100% !important; width: 100%; }
  html body .cat-badge .full-cat { display: inline !important; }
  html body .cat-badge .short-cat { display: none !important; }
}

/* ================= 2026-09-30 추가 ================= */
/* 상단 띠 + 상단바: 내리면 함께 숨고, 올리면 함께 나온다 (happy-ui.js) */
html body .promo-banner {
  position: sticky;
  top: 0;
  z-index: 101;
  transition: transform var(--ed-t) ease;
}
html body .top-nav {
  top: var(--yj-promo-h, 0px);
  transition: transform var(--ed-t) ease;
}
html.yj-bars-hidden body .promo-banner,
html.yj-bars-hidden body .top-nav {
  transform: translateY(calc(-1 * (var(--yj-promo-h, 0px) + var(--yj-nav-h, var(--ed-header)) + 2px)));
}
@media (prefers-reduced-motion: reduce) {
  html body .promo-banner, html body .top-nav { transition: none; }
}

/* 스와이프 안내 (휴대폰 첫 방문) */
.yj-hint-overlay {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--ed-overlay); opacity: 0; transition: opacity var(--ed-t) ease;
}
.yj-hint-overlay.is-open { opacity: 1; }
.yj-hint {
  width: 100%; max-width: 400px; background: var(--ed-bg); border-radius: var(--ed-r-lg);
  box-shadow: var(--ed-shadow-modal); padding: 28px 24px 12px; text-align: center; font-family: var(--ed-sans);
  transform: translateY(12px); transition: transform var(--ed-t-slow) ease;
}
.yj-hint-overlay.is-open .yj-hint { transform: none; }
.yj-hint-art { color: var(--ed-ink); display: flex; justify-content: center; margin-bottom: 14px; }
.yj-hint-art svg { width: 120px; height: 64px; }
.yj-hint-hand { animation: yj-hint-swipe 1.6s ease-in-out infinite; }
@keyframes yj-hint-swipe { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
.yj-hint-title { font-family: var(--ed-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--ed-ink); }
.yj-hint-text { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--ed-sub); }
.yj-hint-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 22px; }
.yj-hint-steps span {
  font-size: 12px; font-weight: 600; color: var(--ed-sub); padding: 3px 12px;
  border: 1px solid var(--ed-line-strong); border-radius: var(--ed-r-full);
}
.yj-hint-steps i { width: 14px; height: 1px; background: var(--ed-line-strong); }
.yj-hint-ok {
  width: 100%; height: 48px; border: none; border-radius: var(--ed-r-full); background: var(--ed-ink);
  color: var(--ed-on-ink); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.yj-hint-never {
  margin-top: 6px; width: 100%; height: 44px; border: none; background: none; font-family: inherit;
  font-size: 13px; color: var(--ed-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .yj-hint-hand { animation: none; }
  .yj-hint-overlay, .yj-hint { transition: none; }
}

/* 목록 맨 위 고정 게시글: 등장인물 소개 */
html body .yj-pin {
  display: block; padding: 24px 2px; border-bottom: 1px solid var(--ed-line); text-decoration: none; color: inherit;
}
html body .yj-pin-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html body .yj-pin-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ed-accent); }
html body .yj-pin-title { font-family: var(--ed-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--ed-ink); }
html body .yj-pin:hover .yj-pin-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
html body .yj-pin-sub { margin-top: 4px; font-size: 13px; color: var(--ed-muted); }
html body .yj-pin-row {
  display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
html body .yj-pin-row::-webkit-scrollbar { display: none; }
html body .yj-pin-face {
  flex: 0 0 auto; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
}
html body .yj-pin-face img {
  width: 48px; height: 48px; border-radius: var(--ed-r-full); object-fit: cover; display: block;
  background: var(--ed-bg-sub); border: 1px solid var(--ed-line); transition: border-color var(--ed-t-fast) ease;
}
html body .yj-pin-face:hover img { border-color: var(--ed-ink); }
html body .yj-pin-face.is-soon img { filter: grayscale(1); opacity: 0.45; }
html body .yj-pin-face span { font-size: 11px; color: var(--ed-sub); white-space: nowrap; }

/* Q&A 목록 */
html body .yj-qa-item {
  display: block; padding: 22px 2px; border-bottom: 1px solid var(--ed-line); text-decoration: none; color: inherit;
}
html body .yj-qa-q { display: flex; gap: 10px; align-items: baseline; }
html body .yj-qa-mark { font-family: var(--ed-serif); font-size: 18px; font-weight: 700; color: var(--ed-accent); flex: 0 0 auto; }
html body .yj-qa-title { font-family: var(--ed-serif); font-size: 18px; font-weight: 600; letter-spacing: -0.03em; color: var(--ed-ink); line-height: 1.5; }
html body .yj-qa-item:hover .yj-qa-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
html body .yj-qa-lead { margin: 6px 0 0 26px; font-size: 14px; line-height: 1.75; color: var(--ed-sub); }

/* 대사 화자 표시 (page.html) */
html body .yj-say { display: flex; align-items: flex-start; gap: 12px; margin: 0.9em 0; }
html body .yj-say .dialogue-line { margin: 0; flex: 1; min-width: 0; padding-top: 3px; }
html body .yj-say-who { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
html body .yj-say-avatar {
  width: 34px; height: 34px; border-radius: var(--ed-r-full); object-fit: cover; display: block;
  background: var(--ed-bg-sub); border: 1px solid var(--ed-line);
}
html body .yj-say-name { font-size: 10.5px; line-height: 1.3; color: var(--ed-muted); text-align: center; white-space: nowrap; letter-spacing: -0.02em; }
@media (max-width: 640px) {
  html body .yj-say { gap: 10px; }
  html body .yj-say-who { flex-basis: 40px; }
  html body .yj-say-avatar { width: 30px; height: 30px; }
}

/* AI 협업 표기 (2026-09-30 작가 승인) */
html body footer .yj-ai-note { margin-top: 6px; font-size: 12px; color: var(--ed-muted); }

/* 2026-09-30 목록 조정 */
html body .nav-logo img { width: 28px; height: 28px; }
/* 고정 게시글 프로필: PC에서는 줄바꿈해 잘리지 않게, 휴대폰은 가로 스크롤 유지 */
@media (min-width: 641px) {
  html body .yj-pin-row { flex-wrap: wrap; overflow: visible; gap: 14px 6px; }
  html body .yj-pin-face { width: 64px; }
}
/* 페이지 이동: 박스 없는 텍스트 버튼 */
html body .page-nav-text {
  border: none !important; background: none !important; box-shadow: none !important;
  padding: 6px 10px; font-size: 14px; font-weight: 500; color: var(--ed-sub);
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  transition: color var(--ed-t-fast) ease;
}
html body .page-nav-text:hover:not(:disabled) { color: var(--ed-ink); }
html body .page-nav-text:disabled { color: var(--ed-line-strong); cursor: default; }
html body .page-nav-text svg { width: 14px; height: 14px; }
html body .page-btn { width: 32px; height: 32px; font-size: 14px; }

/* 대사: 채팅방 배치 (2026-09-30) — 화자는 오른쪽, 상대는 왼쪽, 연한 말풍선 */
html body .yj-say { align-items: flex-start; margin: 0.7em 0; }
html body .yj-say .dialogue-line {
  flex: 0 1 auto; max-width: 78%; padding: 7px 14px; margin-top: 2px;
  background: var(--ed-bg-sub); border-radius: var(--ed-r-lg); line-height: 1.75;
}
/* 2026-10-01: 좌우는 말하는 사람이 바뀔 때마다 번갈아(is-right). 글쓴이(is-me)는 말풍선 색으로만 구별 */
html body .yj-say.is-right { flex-direction: row-reverse; }
html body .yj-say.is-me .dialogue-line { background: var(--ed-accent-soft); }

/* 목록 배치 (2026-09-30): 1행 회차·요소·날짜 / 2행 제목 / 3행 화자 / 4행 문구 */
html body .post-title-row { align-items: center; }
html body .yj-date-inline { margin: 0 0 0 4px !important; font-size: 12px; color: var(--ed-muted); }
html body .yj-title-line { display: block; margin: 8px 0 8px; }
/* 등장인물: 유자쌤 단독 열 + 가족별 열(아이 위, 부모 아래) */
html body .yj-pin-row { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 10px !important; align-items: flex-start; }
html body .yj-pin-col { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; }
html body .yj-pin-col.is-teacher { padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--ed-line); align-self: stretch; justify-content: center; }
html body .yj-pin-face { width: 60px !important; }

/* 등장인물을 푸터로: PC는 프로필 1줄(유자쌤 먼저, 학생·부모 인접) + 하단 메타정보 1줄, 모바일은 기존 유지 */
html body footer.yj-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 20px 96px 24px 32px;   /* 오른쪽은 떠 있는 버튼 자리, 높이 슬림화 */
  position: relative;
  z-index: 81;
}
html body .yj-footer-cast { flex: 0 0 auto; width: 100%; min-width: 0; }
html body footer .yj-pin { padding: 0; border: none; background: transparent; }
html body footer .yj-pin-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
html body footer .yj-pin-title { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--ed-ink); }
html body footer .yj-pin-sub { font-size: 12px; }
html body footer .yj-pin-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 10px !important;
  align-items: center;
  margin-top: 0;
}
html body footer .yj-pin-row::-webkit-scrollbar { display: none; }
html body footer .yj-pin-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
html body footer .yj-pin-col.is-teacher {
  padding-right: 10px;
  margin-right: 2px;
  border-right: 1px solid var(--ed-line);
  align-self: center;
  justify-content: center;
}
html body footer .yj-pin-face {
  width: 44px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
}
html body footer .yj-pin-face img {
  width: 34px;
  height: 34px;
  border-radius: var(--ed-r-full);
  object-fit: cover;
  border: 1px solid var(--ed-line);
  transition: transform var(--ed-t) ease, border-color var(--ed-t) ease;
}
html body footer .yj-pin-face:hover img { border-color: var(--ed-ink); }
html body footer .yj-pin-face.is-soon img { filter: grayscale(1); opacity: 0.45; }
html body footer .yj-pin-face span {
  font-size: 9.5px;
  line-height: 1.2;
  color: var(--ed-sub);
  white-space: nowrap;
}

/* PC 푸터 메타정보: 1줄 배치 */
html body footer.yj-footer .yj-footer-info {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: left;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ed-muted);
}
html body footer.yj-footer .footer-logo {
  font-size: 13.5px;
  font-family: var(--ed-serif);
  font-weight: 600;
  color: var(--ed-ink);
  margin: 0;
  white-space: nowrap;
}
html body footer.yj-footer .yj-footer-info p {
  margin: 0;
  font-size: 12px;
  color: var(--ed-muted);
  white-space: nowrap;
}
html body footer.yj-footer .yj-ai-note {
  margin: 0;
  font-size: 12px;
  color: var(--ed-muted);
  white-space: nowrap;
}
html body footer.yj-footer .yj-footer-info > * + *::before {
  content: "·";
  margin-right: 10px;
  color: var(--ed-line);
  font-weight: 700;
}

@media (max-width: 900px) {
  html body footer.yj-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 28px 16px 32px;
  }
  html body footer .yj-pin-head,
  html body footer .yj-pin-sub {
    justify-content: center;
    text-align: center;
    margin-bottom: 0;
  }
  html body footer .yj-pin-title {
    font-size: 15px;
  }
  html body footer .yj-pin-row {
    margin-top: 10px;
    gap: 6px !important;
    justify-content: flex-start;
  }
  html body footer .yj-pin-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
  }
  html body footer .yj-pin-col.is-teacher {
    padding-right: 6px;
    margin-right: 0;
    border-right: 1px solid var(--ed-line);
    align-self: stretch;
    justify-content: center;
  }
  html body footer .yj-pin-face {
    width: 48px !important;
    gap: 4px;
  }
  html body footer .yj-pin-face img {
    width: 36px;
    height: 36px;
  }
  html body footer .yj-pin-face span {
    font-size: 10px;
  }
  html body footer.yj-footer .yj-footer-info {
    min-width: 0;
    display: block;
    text-align: center;
    margin-top: 0;
  }
  html body footer.yj-footer .yj-footer-info > * + *::before {
    display: none;
  }
  html body footer.yj-footer .footer-logo {
    font-size: 15px;
    margin-bottom: 6px;
    white-space: normal;
  }
  html body footer.yj-footer .yj-footer-info p {
    font-size: 12px;
    margin: 0;
    white-space: normal;
  }
  html body footer.yj-footer .yj-ai-note {
    margin-top: 6px;
    font-size: 12px;
    white-space: normal;
  }
}

/* 글 제목 아래 화자 배지는 본문 머리와 겹쳐 숨긴다 (2026-09-30) */
html body #hero-speaker-badge { display: none !important; }

/* 2026-10-01: 휴대폰 목록 1행(회차·요소·날짜)을 한 줄로 — 날짜가 폭 100% flex 로 내려가던 것 */
@media (max-width: 640px) {
  html body .post-title-row { flex-wrap: nowrap !important; }
  html body .post-title-row .yj-date-inline { display: inline !important; width: auto !important; flex: 0 0 auto; white-space: nowrap; }
}

/* 2026-10-01: 휴대폰 하단 바 — 삼성 인터넷의 '맨 위로' 버튼이 화면 정가운데에 떠서 시점 선택을 가렸다.
   시점 선택(.persona-pill)을 왼쪽 끝으로, 아이콘 버튼은 오른쪽 끝으로 모으고 가운데를 비운다 */
@media (max-width: 640px) {
  html body .floating-actions { justify-content: flex-start; }
  html body .floating-actions .persona-pill { order: -1; }
  html body .floating-actions > .frap-btn:first-child { margin-left: auto; }
  html body .persona-tab { padding: 0 10px; }
}

/* 2026-10-01: 목록 1행 — 회차(EP.n)와 요소 배지 사이를 조금 벌린다 */
html body .post-title-row .track-badge { margin-right: 6px; }

/* 2026-10-01: 글 화면 인스타 섹션 — PC는 그림을 줄여 왼쪽, 캡션을 오른쪽에 (휴대폰은 위아래 그대로) */
@media (min-width: 769px) {
  html body .insta-card {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    grid-template-areas: "head head" "img body";
    align-items: start;
  }
  html body .insta-card .insta-header { grid-area: head; }
  html body .insta-card .insta-img { grid-area: img; width: 100%; border-right: 1px solid var(--ed-line); }
  html body .insta-card .insta-body { grid-area: body; padding: 20px 24px; }
}

/* 2026-10-01: 전문지식 — 요소 한 줄 · 시점 탭 · 왕관유자로 읽기 · 체크리스트 (expertise.html 모달, page.html 지식 모달) */
html body .yj-card-views { margin: 10px 0 0; font-size: 12px; color: var(--ed-muted); letter-spacing: 0.02em; }
html body .yj-elem-line { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--ed-sub); }
html body .yj-elem-line strong { color: var(--ed-accent); font-weight: 700; }
html body .yj-elem-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px;
  border-radius: var(--ed-r-full); background: var(--ed-accent-soft); color: var(--ed-accent);
  font-family: var(--ed-serif); font-size: 12px; font-weight: 700; vertical-align: -1px;
}
/* 2026-10-02: 왕관유자 6글자 요소 행 (2행 레이아웃) */
html body .yj-wang-letters {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 16px;
}
html body .yj-wang-row1 {
  display: flex; align-items: center; gap: 4px;
}
html body .yj-wang-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--ed-serif); font-size: 13px; font-weight: 600;
  color: var(--ed-muted); background: transparent;
  transition: background 150ms, color 150ms;
}
html body .yj-wang-letter.is-active {
  background: var(--ed-accent); color: #fff; font-weight: 700;
}
html body .yj-wang-row2 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
html body .yj-wang-elem-name {
  color: var(--ed-accent); font-weight: 700; font-size: 13px;
}
html body .yj-wang-elem-def {
  font-size: 13px; color: var(--ed-sub); line-height: 1.5;
}
/* 2026-10-14: 요소 이름을 켜진 글자 바로 아래에 (글자 26px + 간격 4px = 30px 한 칸) */
html body .yj-wang-letters { --yj-wl-i: 0; }
html body .yj-wang-letters:has(.yj-wang-letter.is-active:nth-child(2)) { --yj-wl-i: 1; }
html body .yj-wang-letters:has(.yj-wang-letter.is-active:nth-child(3)) { --yj-wl-i: 2; }
html body .yj-wang-letters:has(.yj-wang-letter.is-active:nth-child(4)) { --yj-wl-i: 3; }
html body .yj-wang-letters:has(.yj-wang-letter.is-active:nth-child(5)) { --yj-wl-i: 4; }
html body .yj-wang-letters:has(.yj-wang-letter.is-active:nth-child(6)) { --yj-wl-i: 5; }
html body .yj-wang-letters:has(.yj-wang-letter.is-active:not(:first-child)) .yj-wang-elem-name {
  margin-left: calc(var(--yj-wl-i) * 30px + 13px); transform: translateX(-50%); white-space: nowrap;
}
html body .yj-view-tabs { display: inline-flex; gap: 4px; padding: 3px; margin: 0 0 16px; border: 1px solid var(--ed-line-strong); border-radius: var(--ed-r-full); }
html body .yj-view-tab {
  height: 32px; padding: 0 16px; border: none; border-radius: var(--ed-r-full); background: transparent;
  font: 600 13px/1 var(--ed-sans); color: var(--ed-sub); cursor: pointer; transition: background var(--ed-t-fast), color var(--ed-t-fast);
}
html body .yj-view-tab.is-on { background: var(--ed-ink); color: var(--ed-on-ink); }
html body .yj-view-title { margin: 0 0 12px; font-family: var(--ed-serif); font-size: 17px; font-weight: 600; color: var(--ed-ink); }
html body .yj-wang, html body .yj-check { margin: 20px 0 0; padding: 20px 24px; border-radius: var(--ed-r-lg); width: 100%; box-sizing: border-box; }
html body .yj-wang { background: var(--ed-accent-soft); }
html body .yj-check { border: 1px solid var(--ed-line-strong); }
html body .yj-wang p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--ed-text); word-break: keep-all; }
html body .yj-box-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ed-accent); }
html body .yj-check ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.8; color: var(--ed-text); word-break: keep-all; }
html body .yj-check li + li { margin-top: 4px; }
html body .yj-other-views { margin: 20px 0 0; font-size: 14px; }
html body .yj-other-views a { color: var(--ed-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ================= 글 상단 배너 (2026-10-08) =================
   images/banner/{id}.png 가 있을 때만 body.has-hero-banner 가 붙는다(page.html setHeroBanner).
   그림은 제목 뒤에 깔리고, 스크롤하면 --hero-zoom 1.18 → 1 로 줄어든다(브런치 표지처럼).
   글자색은 제목 자리 밝기로 고른다: data-hero-tone="light"(밝은 그림) → 진한 글자, "dark" → 흰 글자. */
:root {
  --ed-hero-ink-light: #FFFFFF;
  --ed-hero-scrim-dark: rgba(17, 17, 17, 0.38);
  --ed-hero-scrim-light: rgba(255, 255, 255, 0.55);
}
html body .hero-banner { display: none; }
html body.has-hero-banner .hero-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(260px, 30vw, 400px);
  padding: 72px 24px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body.has-hero-banner .hero-band::after { display: none; }
html body.has-hero-banner .hero-banner {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--hero-fade, 1);
}
html body.has-hero-banner .hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--hero-zoom, 1.18));
  transform-origin: 50% 50%;
  will-change: transform;
}
html body.has-hero-banner .hero-banner::after {   /* 글자 대비용 얇은 막 */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, var(--ed-hero-scrim-light), transparent 75%);
}
html body.has-hero-banner[data-hero-tone="dark"] .hero-banner::after {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, var(--ed-hero-scrim-dark), transparent 80%);
}
html body.has-hero-banner .hero-title { color: var(--ed-ink); text-shadow: 0 0 18px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9); }
html body.has-hero-banner .hero-badge { color: var(--ed-text) !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.95); }
html body.has-hero-banner[data-hero-tone="dark"] .hero-title { color: var(--ed-hero-ink-light); text-shadow: 0 1px 16px rgba(17, 17, 17, 0.7), 0 0 2px rgba(17, 17, 17, 0.6); }
html body.has-hero-banner[data-hero-tone="dark"] .hero-badge { color: var(--ed-hero-ink-light) !important; text-shadow: 0 1px 8px rgba(17, 17, 17, 0.8); }
@media (max-width: 640px) {
  html body.has-hero-banner .hero-band,
  html body.has-hero-banner[data-persona] .hero-band { min-height: 220px; padding: 56px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.has-hero-banner .hero-banner img { transform: none; }
}