/* 헤더 숨김 (앱 모드) */
body.app-mode #common-header-mount,
body.app-mode #common-footer-mount,
body.app-mode .toc-edit-fab {
  display: none !important;
}

/* 앱 모드: progress bar를 모바일 목차 바로 아래에 fixed */
body.app-mode .render-header {
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 149;
  height: 4px;
  background: var(--border-color);
}

body.app-mode .render-header .progress-fill {
  background: var(--primary-color);
}

/* 콘텐츠 및 레이아웃 모바일 튜닝 */
body.app-mode {
  overflow-x: hidden;
  max-width: 100vw;
}

body.app-mode .render-layout {
  padding-top: 48px;
  max-width: 100vw;
  overflow-x: hidden;
}

body.app-mode .render-container {
  padding: 16px 12px 60px;
  max-width: 100vw;
  overflow-x: hidden;
}

body.app-mode .render-content__inner {
  padding: 24px 16px 200px;
  border-radius: var(--radius-md);
  max-width: 100%;
  box-sizing: border-box;
}

body.app-mode .question-item {
  padding-bottom: 32px;
  max-width: 100%;
  overflow-x: hidden;
}

body.app-mode .question-text {
  font-size: 1rem;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.app-mode .input-blank {
  min-width: 50px;
  max-width: 100%;
  font-size: 1rem;
  padding: 4px 2px;
  -webkit-appearance: none;
  border-radius: 0;
}

body.app-mode .input-inline-wrapper {
  max-width: 100%;
  display: inline;
}

/* 테이블 가로 스크롤 방지 */
body.app-mode .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.app-mode .question-table {
  table-layout: fixed;
  width: 100%;
  font-size: 0.85rem;
}

body.app-mode .question-table th,
body.app-mode .question-table td {
  padding: 8px 6px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body.app-mode .question-table .input-blank,
body.app-mode .question-table .table-answer-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 14px;
  box-sizing: border-box;
}

/* 버튼 터치 영역 확보 */
body.app-mode .reveal-answer-btn,
body.app-mode .btn-primary,
body.app-mode .btn-secondary {
  min-height: 44px;
  padding: 12px 16px;
}

/* 이미지 반응형 */
body.app-mode .question-image {
  max-width: 100%;
  height: auto;
}

/* 모달 모바일 최적화 */
body.app-mode .edit-modal__dialog {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  border-radius: 0;
  max-height: 100vh;
}

/* 사이드바 숨김 */
body.app-mode .render-sidebar {
  display: none;
}

/* iOS 입력 줌 방지 - 모든 입력 필드 16px 이상 */
body.app-mode input,
body.app-mode textarea,
body.app-mode select,
body.app-mode .input-blank,
body.app-mode .normalized-blank-input,
body.app-mode .table-answer-input {
  font-size: 16px !important;
  transform: scale(1);
  -webkit-text-size-adjust: 100%;
}

/* ========================================
   Mobile TOC - 모바일 목차 드롭다운
   ======================================== */
.mobile-toc {
  display: none;
  position: sticky;
  top: var(--common-header-offset, 0px);
  z-index: 150;
  background: var(--bg-paper);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* 일반 모바일 화면에서 표시 */
@media (max-width: 1023px) {
  .mobile-toc {
    display: block;
  }
}

/* 앱 모드: fixed로 변경 (WebView sticky 호환성) */
body.app-mode .mobile-toc {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.mobile-toc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
}

.mobile-toc__trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-toc__trigger-btn:active {
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
}

.mobile-toc__current {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-toc__icon {
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.mobile-toc.is-open .mobile-toc__icon {
  transform: rotate(180deg);
}

.mobile-toc__dropdown {
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-paper);
  border-top: 1px solid var(--border-color);
  -webkit-overflow-scrolling: touch;
}

.mobile-toc.is-open .mobile-toc__dropdown {
  display: block;
  pointer-events: auto;
}

.mobile-toc__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

/* 1단계 목차 */
.mobile-toc__item {
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.mobile-toc__item:last-child {
  border-bottom: none;
}

.mobile-toc__chapter {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  font-family: inherit;
  text-align: left;
}

.mobile-toc__toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-toc__toggle-btn:active {
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
}

.mobile-toc__chapter-title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-toc__chapter-icon {
  font-size: 20px;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.mobile-toc__item.is-expanded .mobile-toc__chapter-icon {
  transform: rotate(180deg);
}

/* 2단계 목차 */
.mobile-toc__sublist {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 8px 0;
  background: var(--bg-app);
}

.mobile-toc__item.is-expanded .mobile-toc__sublist {
  display: block;
}

.mobile-toc__subitem {
  margin: 0;
}

.mobile-toc__link {
  display: block;
  padding: 10px 16px 10px 32px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.mobile-toc__link:active {
  background: var(--primary-light);
}

.mobile-toc__link.is-active {
  color: var(--primary-color);
  font-weight: 600;
  background: var(--primary-light);
}

/* 목차 없는 대목차 직접 링크 */
.mobile-toc__chapter-link {
  display: block;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.mobile-toc__chapter-link:active {
  background: var(--primary-light);
}
/* ========================================
   Mobile Quiz Panel - 터치 기반 빈칸 퀴즈
   ======================================== */
.mobile-quiz-panel {
  display: none;
}

/* 활성 문제 하이라이트 - 최소한의 스타일 */
body.app-mode .mobile-quiz-question--active {
  background: transparent;
}

/* 정답 선택 패널 */
body.app-mode .mobile-quiz-panel {
  display: flex;
  flex-direction: column;
  background: #f5f7f6;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
  margin: 12px 0;
}

body.app-mode .mobile-quiz-panel--hidden {
  display: none;
}

.mobile-quiz-panel__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.mobile-quiz-panel__title {
  font-size: 0.75rem;
  font-weight: 500;
  color: #888;
}

.mobile-quiz-panel__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.mobile-quiz-choice {
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-quiz-choice:active {
  background: #e8f5e9;
}

.mobile-quiz-choice--used {
  opacity: 0.3;
  pointer-events: none;
}

.mobile-quiz-choice--correct {
  background: #d4edda;
  border-color: #28a745;
  color: #28a745;
}

.mobile-quiz-choice--wrong {
  background: #f8d7da;
  border-color: #dc3545;
  animation: quiz-shake 0.3s ease;
}

@keyframes quiz-shake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}

.mobile-quiz-panel__complete {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #28a745;
  padding: 6px 0;
}

/* 현재 채워야 할 빈칸 */
body.app-mode .mobile-quiz-active {
  background: #fffde7 !important;
  border-color: #ffc107 !important;
}

/* ========================================