/* TaleNest Neuro — 공유 스타일: 접근성 + 이해 퀴즈 + 출처 */

/* ── 접근성: 움직임 줄이기 (감각 예민·신경다양성 배려 + 웹접근성) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 키보드 포커스 표시 ── */
:focus-visible {
  outline: 2px solid #5C6BC0;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 이해 체크 퀴즈 ── */
.quiz { background: #fff; border: 1px solid #E5DDC8; border-radius: 14px; padding: 16px; margin-top: 18px; }
.quiz-q { font-size: 14px; font-weight: 800; color: #3D5961; margin-bottom: 10px; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt { text-align: left; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #4E6F79; background: #F9F7F3; border: 1.5px solid #E5DDC8; border-radius: 10px; padding: 11px 14px; cursor: pointer; transition: all .15s ease; }
.quiz-opt:hover { border-color: #9FBBD4; }
.quiz-opt.ok { border-color: #5B8A6B; background: rgba(91,138,107,.12); color: #3F7150; }
.quiz-opt.no { border-color: #D08B74; background: rgba(208,139,116,.1); opacity: .7; }
.quiz-fb { font-size: 12.5px; font-weight: 700; margin-top: 10px; min-height: 17px; }
.quiz-fb.ok { color: #3F7150; }
.quiz-fb.no { color: #B96B52; }

/* ── 출처·근거 ── */
.src { font-size: 11.5px; color: #6B97A5; line-height: 1.6; margin-top: 14px; text-align: center; }
.src a { color: #6B97A5; font-weight: 700; text-underline-offset: 2px; }
.src a:hover { color: #B96B52; }

/* ═══════════════════════════════════════════════════════
   학습 모드 (Study Mode) — 헤더 학습 바·이전/다음·진행·토글
   ═══════════════════════════════════════════════════════ */

/* ── 챕터 상단: 학습 정보 바 ── */
.tn-study-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: white; border: 1px solid #E5DDC8; border-radius: 12px;
  padding: 9px 14px; margin-bottom: 14px;
  font-size: 12px;
  box-shadow: 0 1px 6px rgba(78, 111, 121, 0.04);
}
.tn-sb-progress { color: #6B97A5; font-weight: 600; font-size: 11.5px; }
.tn-sb-progress b { color: #4E6F79; font-weight: 800; }
.tn-sb-meta { display: flex; gap: 12px; font-weight: 600; color: #6B97A5; font-size: 11.5px; }
.tn-sb-level { background: rgba(220, 235, 222, 0.6); padding: 3px 9px; border-radius: 999px; color: #3F7150; }
.tn-sb-mins { padding: 3px 0; }
.tn-sb-actions button {
  background: none; border: 0; cursor: pointer; font-size: 17px;
  opacity: 0.32; transition: opacity 0.2s, transform 0.15s;
  padding: 2px 4px; font-family: inherit;
  filter: grayscale(100%);
}
.tn-sb-actions button.on { opacity: 1; filter: none; }
.tn-sb-actions button:hover { opacity: 0.85; transform: scale(1.1); }

/* ── 챕터 끝: 마침·이전/다음·목차 ── */
.tn-chapter-end { margin-top: 30px; }
.tn-ce-divider {
  text-align: center; color: #A8B5BE; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; margin: 20px 0 14px;
}
.tn-ce-actions { text-align: center; margin-bottom: 18px; }
.tn-ce-mark {
  background: white; border: 1.5px solid #E5DDC8; border-radius: 999px;
  padding: 9px 22px; font-size: 12.5px; font-weight: 700; color: #6B97A5;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.tn-ce-mark:hover { border-color: #5C8073; color: #3F7150; }
.tn-ce-mark.on { background: #DCEBDE; border-color: #5C8073; color: #3F7150; }

.tn-ce-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.tn-ce-nav-card {
  display: flex; flex-direction: column; gap: 4px;
  background: white; border: 1px solid #E5DDC8; border-radius: 12px;
  padding: 13px 14px; text-decoration: none; color: #4E6F79;
  transition: all 0.18s; min-height: 78px;
}
.tn-ce-nav-card:hover { border-color: #D08B74; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(208, 139, 116, 0.12); }
.tn-ce-nav-card.empty {
  background: transparent; border: 1px dashed #E5DDC8; opacity: 0.5;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #A8B5BE; font-weight: 600;
}
.tn-ce-nav-card.next { text-align: right; }
.tn-ce-nav-label {
  font-size: 10.5px; font-weight: 700; color: #A8B5BE;
  letter-spacing: 1px; text-transform: uppercase;
}
.tn-ce-nav-title { font-size: 13.5px; font-weight: 800; color: #3D5961; line-height: 1.35; }
.tn-ce-nav-meta { font-size: 11px; color: #6B97A5; font-weight: 600; }

.tn-ce-toc {
  display: block; text-align: center; background: #FCF3DC; color: #7A5C00;
  text-decoration: none; padding: 11px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; margin-bottom: 14px;
}
.tn-ce-toc:hover { background: #F5EBC4; }

/* 챕터 끝: 함께 보기 (관련) */
.tn-ce-related-h {
  font-size: 11.5px; font-weight: 700; color: #6B97A5;
  letter-spacing: 0.3px; margin: 18px 0 8px; padding-left: 2px;
}
.tn-ce-related { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tn-ce-related-card {
  display: flex; align-items: center; gap: 11px;
  background: white; border: 1px solid #E5DDC8; border-radius: 11px;
  padding: 10px 13px; text-decoration: none; color: #4E6F79;
  transition: all 0.15s;
}
.tn-ce-related-card:hover { border-color: #D08B74; transform: translateX(2px); box-shadow: 0 3px 10px rgba(208,139,116,0.1); }
.tn-ce-rc-em { font-size: 18px; line-height: 1; flex-shrink: 0; }
.tn-ce-rc-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tn-ce-rc-title { font-size: 13px; font-weight: 700; color: #3D5961; }
.tn-ce-rc-meta { font-size: 11px; color: #6B97A5; font-weight: 600; }
.tn-ce-rc-arrow { color: #A8B5BE; font-weight: 700; flex-shrink: 0; }

/* Explore 검색바 + 카테고리 필터 */
.tn-explore-search {
  background: white; border: 1px solid #E5DDC8; border-radius: 14px;
  padding: 12px 14px; margin-bottom: 18px;
}
.tn-es-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tn-es-input {
  flex: 1; background: #F9F7F3; border: 1px solid #E5DDC8;
  border-radius: 10px; padding: 9px 12px;
  font-size: 13.5px; color: #4E6F79;
  font-family: inherit; outline: none; transition: border-color 0.15s;
  -webkit-user-select: text; user-select: text;
}
.tn-es-input::placeholder { color: #A8B5BE; font-weight: 500; }
.tn-es-input:focus { border-color: #D08B74; background: white; }
.tn-es-clear {
  background: none; border: 0; cursor: pointer;
  color: #A8B5BE; font-size: 14px; font-weight: 700;
  padding: 4px 8px; font-family: inherit;
}
.tn-es-clear:hover { color: #6B97A5; }
.tn-es-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.tn-es-cat {
  background: #F9F7F3; border: 1px solid #E5DDC8;
  border-radius: 999px; padding: 5px 11px;
  font-size: 11.5px; font-weight: 700; color: #6B97A5;
  cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.tn-es-cat:hover { border-color: #D08B74; color: #A85F4A; }
.tn-es-cat.on { background: #D08B74; border-color: #D08B74; color: white; }
.tn-es-status {
  margin-top: 10px; padding: 7px 10px; background: #FCF3DC; border-radius: 8px;
  font-size: 11.5px; color: #7A5C00; font-weight: 600; text-align: center;
}

/* ── 학습 모드 토글 (플로팅 우측 하단 알약) ── */
.tn-study-toggle {
  position: fixed; bottom: 14px; right: 14px; z-index: 50;
  height: 40px; padding: 0 14px 0 10px;
  border-radius: 999px;
  background: white; border: 1px solid #E5DDC8;
  box-shadow: 0 3px 14px rgba(78, 111, 121, 0.15);
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  font-family: inherit; font-weight: 700; color: #4E6F79;
  transition: all 0.18s ease;
}
.tn-study-toggle .tn-st-icon { font-size: 18px; line-height: 1; }
.tn-study-toggle .tn-st-label { font-size: 12.5px; letter-spacing: -0.2px; }
.tn-study-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(78, 111, 121, 0.22);
  border-color: #5C8073;
}
/* 학습 모드 ON 시 토글 자체도 시각화 */
body.tn-focus .tn-study-toggle {
  background: linear-gradient(135deg, #DCEBDE, #F1F7E8);
  border-color: #5C8073;
  color: #3F7150;
}

/* ── 학습 모드 (focus) — 깊은 독서 모드 ── */
body.tn-focus { background: #F5EFE0; }

/* 본문 가독성 ↑ — 폰트·간격·폭 강화 */
body.tn-focus .wrap { max-width: 540px; padding: 12px 22px 60px; }
body.tn-focus .sec p,
body.tn-focus .lead { font-size: 15.5px; line-height: 1.85; letter-spacing: -0.1px; }
body.tn-focus .sec { padding: 22px; box-shadow: none; border-color: rgba(229, 221, 200, 0.5); margin-bottom: 18px; background: rgba(255,255,255,0.85); }
body.tn-focus .sec-title { font-size: 16px; margin-bottom: 14px; }

/* 헤더·푸터·토픽바 거의 안 보이게 */
body.tn-focus .topbar { opacity: 0.2; transition: opacity 0.25s; }
body.tn-focus .topbar:hover { opacity: 1; }
body.tn-focus .pin-header { background: rgba(245, 239, 224, 0.92); backdrop-filter: blur(14px); border-bottom-color: rgba(229, 221, 200, 0.4); }
body.tn-focus .footer { opacity: 0.45; }
body.tn-focus .footer:hover { opacity: 1; }

/* 학습 바 — 미니멀 */
body.tn-focus .tn-study-bar {
  background: rgba(255,255,255,0.6);
  border-color: rgba(229, 221, 200, 0.45);
  box-shadow: none;
}

/* 본문 외 채도 살짝 ↓ */
body.tn-focus .danger,
body.tn-focus .help,
body.tn-focus .legal,
body.tn-focus .promise { box-shadow: none; filter: saturate(0.78); }

/* 챕터 끝 네비 — 차분 */
body.tn-focus .tn-chapter-end { opacity: 0.85; }
body.tn-focus .tn-chapter-end:hover { opacity: 1; }
body.tn-focus .tn-ce-nav-card { box-shadow: none; }

/* 집중 모드 상단 슬림 배너 */
body.tn-focus::before {
  content: "🌳 집중 중 — 우하단 토글로 끄기";
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: linear-gradient(90deg, #DCEBDE, #F1F7E8);
  color: #3F7150;
  font-size: 11px; font-weight: 700; text-align: center;
  padding: 5px 12px; letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(91, 138, 107, 0.25);
  font-family: 'SUITE', -apple-system, sans-serif;
}
body.tn-focus { padding-top: 24px; }
body.tn-focus .pin-header { top: 24px; }

/* 모바일에서도 살짝 좁게 */
@media (max-width: 640px) {
  body.tn-focus .wrap { padding: 12px 18px 60px; }
  body.tn-focus .sec p, body.tn-focus .lead { font-size: 15px; line-height: 1.8; }
}

/* ── Explore 페이지: 학습 진행 위젯 ── */
.tn-explore-progress {
  background: linear-gradient(135deg, #FCF3DC, #F9F7F3);
  border: 1px solid #E5DDC8; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 18px;
}
.tn-ep-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.tn-ep-label { font-size: 12.5px; font-weight: 700; color: #3D5961; }
.tn-ep-count { font-size: 13px; font-weight: 800; color: #A85F4A; }
.tn-ep-count b { color: #6F3724; font-weight: 800; }
.tn-ep-bar {
  background: white; height: 8px; border-radius: 999px;
  overflow: hidden; border: 1px solid #E5DDC8;
}
.tn-ep-fill {
  height: 100%;
  background: linear-gradient(90deg, #D08B74, #A85F4A);
  transition: width 0.6s ease;
}
.tn-recent {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed #E5DDC8;
}
.tn-recent-h { font-size: 11.5px; font-weight: 700; color: #6B97A5; margin-bottom: 8px; }
.tn-recent-list {
  display: flex; gap: 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.tn-recent-list::-webkit-scrollbar { display: none; }
.tn-recent-item {
  flex-shrink: 0; background: white; border: 1px solid #E5DDC8;
  border-radius: 10px; padding: 8px 12px; text-decoration: none;
  color: #4E6F79; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.tn-recent-item:hover { border-color: #D08B74; color: #A85F4A; }

/* ── 반응형 모바일 ── */
@media (max-width: 480px) {
  .tn-study-bar { padding: 8px 11px; font-size: 11px; flex-wrap: wrap; gap: 6px; }
  .tn-sb-meta { gap: 8px; font-size: 11px; }
  .tn-ce-nav { grid-template-columns: 1fr; }
  .tn-ce-nav-card.next { text-align: left; }
  .tn-study-toggle { bottom: 12px; right: 12px; height: 36px; padding: 0 12px 0 9px; gap: 6px; }
  .tn-study-toggle .tn-st-icon { font-size: 16px; }
  .tn-study-toggle .tn-st-label { font-size: 11.5px; }
}

/* ── 콘텐츠 보호: 드래그·선택 차단 (저작권 + 출판 준비) ── */
/* 입력 필드는 예외 (observe 일지 등) */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}