/* SVG 아이콘 기본 스타일 */
    svg { vertical-align: middle; display: inline-block; flex-shrink: 0; }

    /* 기본 폰트 */
    @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&family=Noto+Sans+KR:wght@400;700&family=Pretendard+Variable&family=Gothic+A1:wght@400;700&family=Gowun+Batang:wght@400;700&family=Gowun+Dodum&family=Nanum+Myeongjo:wght@400;700&family=Hahmlet:wght@400;700&family=IBM+Plex+Sans+KR:wght@400;700&family=Sunflower:wght@300;500&display=swap');
    body {
      font-family: var(--font-family, 'Gowun Batang', serif);
      background: var(--bg-color, #f8faf8) !important;
      color: var(--text-color, #1a2e1a) !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    :root {
      --bg-color: #f8faf8;
      --card-color: #ffffff;
      --text-color: #1a2e1a;
      --accent-color: #16a34a;
      --header-color: #eef3ee;
      --font-size: 20px;
      --font-family: 'Gowun Batang';
    }

    /* 스와이프 카드 애니메이션 */
    .card-container { perspective: 1000px; }
    .card {
      transition: transform 0.3s ease, opacity 0.3s ease;
      touch-action: pan-y;
      will-change: transform;
    }
    .card.swiping { transition: none; }
    .card.swipe-left {
      transform: translateX(-120%) rotate(-15deg);
      opacity: 0;
    }
    .card.swipe-right {
      transform: translateX(120%) rotate(15deg);
      opacity: 0;
    }

    /* 스크롤바 숨김 */
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* 탭 인디케이터 */
    .tab-active {
      border-bottom: 2px solid #e2b66b;
      color: #e2b66b;
    }

    /* 진도 바 */
    .progress-fill {
      transition: width 0.5s ease;
    }

    /* 페이드 인 */
    .fade-in {
      animation: fadeIn 0.3s ease-in;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 온보딩 스와이프 제스처 애니메이션 */
    .ob-hand {
      animation: obSwipe 2s ease-in-out infinite;
    }
    @keyframes obSwipe {
      0%, 100% { transform: translateX(-30px); opacity: 0.4; }
      50% { transform: translateX(30px); opacity: 1; }
    }
    .ob-swipe-area {
      animation: obCardGlow 2s ease-in-out infinite;
    }
    @keyframes obCardGlow {
      0%, 100% { border-color: rgba(255,255,255,0.15); }
      50% { border-color: rgba(255,255,255,0.4); }
    }

    /* 바텀시트 */
    .bottom-sheet {
      transition: transform 0.3s ease;
      transform: translateY(100%);
    }
    .bottom-sheet.open {
      transform: translateY(0);
    }

    /* 로딩 스피너 */
    .spinner {
      border: 3px solid rgba(226,182,107,0.2);
      border-top-color: #e2b66b;
      border-radius: 50%;
      width: 32px; height: 32px;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* 액션 버튼 클릭 효과 */
    .action-btn, .tab-btn {
      transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
    }
    #reader-tabbar {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .action-btn:active {
      transform: scale(0.88);
      background: var(--accent-color, #a78bfa) !important;
      color: var(--bg-color, #09090b) !important;
      box-shadow: 0 0 16px rgba(167,139,250,0.4);
    }
    .action-btn.btn-flash {
      background: var(--accent-color, #a78bfa) !important;
      color: var(--bg-color, #09090b) !important;
      box-shadow: 0 0 16px rgba(167,139,250,0.4);
      transform: scale(1.05);
    }

    /* ==========================================
       이지모드 - 노인/저시력 사용자 전용
       화면을 최대한 활용, 본문 요소 대형화
       REBUILD13: 2단계 on/off → 4단계 순환(--easy-scale).
       헤더는 글자 단계의 영향을 받지 않는다(사용자 요구).
       ========================================== */
    body[data-easy-step="1"] { --easy-scale: 1.2; }
    body[data-easy-step="2"] { --easy-scale: 1.4; }
    body[data-easy-step="3"] { --easy-scale: 1.6; }

    body.easy-mode {
      font-size: calc(16px * var(--easy-scale, 1.4));
    }

    /* 장보기 본문 — 글자 단계 적용 (REBUILD13. 기본 1rem/0.875rem × 단계 배율) */
    #chapter-view-body .ch-verse-num { font-size: calc(0.875rem * var(--easy-scale, 1)); }
    #chapter-view-body .ch-verse-text { font-size: calc(1rem * var(--easy-scale, 1)); }

    /* 홈 화면 */
    body.easy-mode #page-home p.text-gold\/60 {
      font-size: 18px;
    }
    body.easy-mode #daily-card {
      padding: 28px 20px;
      max-width: 100%;
      border-radius: 20px;
    }
    body.easy-mode #daily-ref {
      font-size: calc(14px * var(--easy-scale, 1)) !important;
      margin-bottom: 16px;
    }
    body.easy-mode #daily-text {
      /* font-size 는 공통 규칙(#daily-text)의 --font-size × --easy-scale 로 처리 */
      line-height: 1.7;
    }
    body.easy-mode #page-home button {
      font-size: 22px;
      padding: 16px 32px;
    }
    body.easy-mode #btn-continue {
      font-size: 18px !important;
      padding: 12px 24px !important;
    }

    /* 책 선택 그리드: 3열 → 2열 */
    body.easy-mode #books-ot,
    body.easy-mode #books-nt {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    body.easy-mode #books-ot button,
    body.easy-mode #books-nt button {
      font-size: 18px;
      padding: 14px 8px;
      border-radius: 12px;
    }
    body.easy-mode #page-books h2 {
      font-size: 22px;
      margin-bottom: 12px;
    }

    /* 장 선택 그리드: 5열 → 4열 */
    body.easy-mode #chapter-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    body.easy-mode #chapter-grid button {
      font-size: 20px;
      padding: 16px 8px;
      border-radius: 12px;
    }
    body.easy-mode #chapter-title {
      font-size: 24px;
    }
    body.easy-mode #page-chapters .text-gold.mr-3 {
      font-size: 28px;
    }

    /* 카드 리더 - 이지모드에서 카드 영역 스크롤 */
    body.easy-mode #reader-scroll {
      overflow-y: auto !important;
      min-height: 0 !important;
    }
    body.easy-mode #card-area {
      min-height: auto !important;
      flex: 1 !important;
    }
    /* 페이징+유튜브를 하단 탭바 바로 위에 배치 */
    body.easy-mode #reader-scroll > div:not(#card-area) {
      flex-shrink: 0;
    }
    body.easy-mode #single-card,
    body.easy-mode #compare-body {
      padding: 24px 20px;
      max-width: 100%;
      border-radius: 20px;
    }
    body.easy-mode #card-ref,
    body.easy-mode #compare-ref {
      font-size: calc(14px * var(--easy-scale, 1)) !important;
    }
    body.easy-mode #card-bookmark,
    body.easy-mode #compare-bookmark {
      font-size: 32px;
      top: 8px;
      right: 12px;
    }
    body.easy-mode #card-text,
    body.easy-mode #compare-text {
      /* font-size 는 공통 규칙의 --font-size × --easy-scale 로 처리 */
      line-height: 1.8 !important;
    }
    body.easy-mode #reader-info {
      font-size: 16px;
    }
    body.easy-mode #btn-compare {
      font-size: 16px;
      padding: 8px 16px;
      min-height: 44px;
    }
    body.easy-mode .compare-tab {
      font-size: 17px;
      padding: 8px 12px;
    }

    /* 하단 네비 이전/다음 버튼 - 탭바 내 */
    body.easy-mode #nav-prev,
    body.easy-mode #nav-next {
      min-width: 48px;
      min-height: 52px;
    }
    body.easy-mode #verse-counter {
      font-size: 13px;
    }

    /* 진도 바 */
    body.easy-mode #page-reader .h-1 {
      height: 6px;
    }

    /* 하단 탭바 - 이지모드 */
    body.easy-mode #reader-tabbar .tab-btn {
      padding: 6px 8px;
      min-height: 52px;
    }
    body.easy-mode #reader-tabbar .text-\[10px\] {
      font-size: 13px !important;
    }

    /* TTS 컨트롤 바 */
    body.easy-mode #tts-controls {
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 12px;
    }
    body.easy-mode .tts-rate-btn {
      font-size: 16px !important;
      padding: 10px 16px !important;
      min-height: 44px;
      min-width: 52px;
    }
    body.easy-mode #tts-controls label {
      font-size: 15px !important;
    }

    /* 유튜브 섹션 */
    body.easy-mode #youtube-section {
      padding: 4px 12px 8px;
    }
    body.easy-mode #btn-youtube-toggle {
      font-size: 18px;
      padding: 12px 4px;
    }
    body.easy-mode #youtube-list a {
      padding: 12px;
    }
    body.easy-mode #youtube-list .text-sm {
      font-size: 16px !important;
    }
    body.easy-mode #youtube-list .text-xs {
      font-size: 14px !important;
    }
    body.easy-mode #youtube-list img {
      width: 120px;
      height: 68px;
    }
    body.easy-mode #yt-more-btn {
      font-size: 18px;
      padding: 14px;
    }
    body.easy-mode #yt-sort-bar {
      gap: 8px;
      padding-bottom: 8px;
    }
    body.easy-mode .yt-sort-btn {
      font-size: 16px !important;
      padding: 6px 12px !important;
    }

    /* 온보딩 가이드 */
    body.easy-mode #onboarding p {
      font-size: 18px;
    }
    body.easy-mode #onboarding .text-xl {
      font-size: 26px !important;
    }
    body.easy-mode #onboarding .text-6xl {
      font-size: 72px !important;
    }
    body.easy-mode #onboarding button {
      font-size: 22px;
      padding: 18px 40px;
    }

    /* 사이드 네비게이션 */
    body.easy-mode #side-nav {
      width: 288px;
    }
    body.easy-mode #side-nav h2 {
      font-size: 22px;
      margin-bottom: 16px;
    }
    body.easy-mode #side-nav ul {
      gap: 6px;
    }
    /* 사이드 메뉴는 세로 공간이 한정적이라 본문만큼 키우지 않는다(너무 커서 메뉴가 잘리는 것 방지).
       추가로 nav 는 flex 컬럼 + 메뉴 영역 스크롤이라, 넘쳐도 스크롤로 접근 가능. */
    body.easy-mode #side-nav button {
      font-size: 18px;
      padding: 9px 0;
      min-height: 40px;
    }
    body.easy-mode #side-nav .text-gray-600 {
      font-size: 13px;
    }

    /* 검색 모달 */
    body.easy-mode #search-input {
      font-size: 18px;
      padding: 12px 18px;
    }
    body.easy-mode #btn-search-go {
      font-size: 16px;
      padding: 10px 16px;
      border-radius: 9999px;
    }
    body.easy-mode #tab-verse,
    body.easy-mode #tab-text {
      font-size: 16px;
      padding: 10px 0;
    }
    body.easy-mode #search-results {
      font-size: 18px;
    }
    body.easy-mode #search-results .text-sm {
      font-size: 17px !important;
    }
    body.easy-mode #search-results .text-xs {
      font-size: 15px !important;
    }
    body.easy-mode #search-results > div {
      padding: 16px;
      margin-bottom: 10px;
    }
    body.easy-mode #search-modal .text-gold {
      font-size: 22px;
    }
    body.easy-mode #search-more-btn {
      font-size: 18px !important;
      padding: 16px !important;
      min-height: 52px;
    }

    /* 테마 모달 */
    body.easy-mode #theme-modal .text-sm {
      font-size: 18px !important;
    }
    body.easy-mode #theme-modal .text-xs {
      font-size: 16px !important;
    }
    body.easy-mode #theme-modal .text-lg {
      font-size: 24px !important;
    }
    body.easy-mode #theme-presets {
      grid-template-columns: repeat(2, 1fr);
    }
    body.easy-mode #theme-presets button {
      padding: 16px;
      font-size: 16px !important;
    }
    body.easy-mode #font-presets button {
      padding: 16px;
      font-size: 18px !important;
    }

    /* 읽기 현황 / 북마크 모달 */
    body.easy-mode #progress-modal .text-lg,
    body.easy-mode #bookmark-modal .text-lg {
      font-size: 24px !important;
    }
    body.easy-mode #progress-modal .text-sm,
    body.easy-mode #bookmark-modal .text-sm {
      font-size: 18px !important;
    }
    body.easy-mode #progress-modal .text-xs,
    body.easy-mode #bookmark-modal .text-xs {
      font-size: 16px !important;
    }
    body.easy-mode #progress-modal .text-gold.text-xl,
    body.easy-mode #bookmark-modal .text-gold.text-xl {
      font-size: 28px !important;
    }
    body.easy-mode #bookmark-list > div {
      padding: 16px;
      margin-bottom: 10px;
    }

    /* 로딩 */
    body.easy-mode #loading-text {
      font-size: 20px;
    }
    body.easy-mode .spinner {
      width: 48px;
      height: 48px;
    }


    /* 토스트 */
    body.easy-mode #toast {
      font-size: 18px !important;
      padding: 14px 28px !important;
      bottom: 30px !important;
    }

    /* 헤더 이지모드 토글 */
    #btn-easy {
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 20px;
      border: 1.5px solid var(--accent-color, #a78bfa);
      background: transparent;
      color: var(--accent-color, #a78bfa);
      font-weight: bold;
      transition: all 0.2s;
      /* REBUILD13 §5 — 단계 순환 시 라벨 길이가 달라도 헤더가 출렁이지 않게 고정 폭·줄바꿈 금지 */
      white-space: nowrap;
      min-width: 64px;
      text-align: center;
    }
    /* 좁은 화면(360px 미만) — 헤더 우측 클러스터 압축 */
    @media (max-width: 374px) {
      #header { padding-left: 12px; padding-right: 12px; }
      #header .gap-2 { gap: 6px; }
      #btn-easy { font-size: 12px; padding: 4px 7px; min-width: 56px; }
    }
    #btn-easy.active {
      background: var(--accent-color, #a78bfa);
      color: var(--bg-color, #09090b);
    }

    /* ==========================================
       CSS 변수 기반 테마 오버라이드
       updateDynamicStyles 대체 - !important 불필요
       ========================================== */
    .text-gold, .tab-active { color: var(--accent-color); }
    .tab-active { border-bottom-color: var(--accent-color); }
    .bg-gold { background: var(--accent-color); }
    .border-gold\/40, .border-gold\/50, .border-gold\/60 { border-color: color-mix(in srgb, var(--accent-color) 40%, transparent); }
    .bg-darkcard { background: var(--card-color); }
    .bg-darkbg, .bg-darkbg\/90, .bg-darkbg\/95 { background: var(--bg-color); }
    .bg-navy, .bg-navy\/80 { background: var(--header-color); }
    .text-gray-100 { color: var(--text-color); }
    .text-gray-200 { color: var(--text-color); }
    .text-gray-400 { color: color-mix(in srgb, var(--text-color) 60%, transparent); }
    .text-gray-500 { color: color-mix(in srgb, var(--text-color) 47%, transparent); }
    .text-gray-600 { color: color-mix(in srgb, var(--text-color) 55%, transparent); }
    .text-gold\/50 { color: color-mix(in srgb, var(--accent-color) 50%, transparent); }
    .text-gold\/60, .text-gold\/70 { color: color-mix(in srgb, var(--accent-color) 60%, transparent); }
    .text-gold\/30 { color: color-mix(in srgb, var(--accent-color) 30%, transparent); }
    .text-gold\/40 { color: color-mix(in srgb, var(--accent-color) 40%, transparent); }
    .bg-gold.text-navy { background: var(--accent-color); color: var(--bg-color); }
    .spinner { border-color: color-mix(in srgb, var(--accent-color) 20%, transparent); border-top-color: var(--accent-color); }
    .progress-fill, .bg-gold.rounded-full { background: var(--accent-color); }
    .border-gray-700, .border-gray-700\/50, .border-gray-700\/30, .border-gray-800 { border-color: color-mix(in srgb, var(--text-color) 13%, transparent); }
    #card-text, #compare-text, #daily-text { font-size: calc(var(--font-size, 20px) * var(--easy-scale, 1)); font-family: var(--font-family, 'Gowun Batang'), serif; }
    #preview-text { font-size: var(--font-size, 20px); font-family: var(--font-family, 'Gowun Batang'), serif; }
    #search-input { background: var(--card-color); color: var(--text-color); }
    #search-input:focus { border-color: var(--accent-color); }
    #side-nav { background: var(--header-color); }
    #side-nav button { color: var(--text-color); }
    #side-nav button:hover { color: var(--accent-color); }
    #side-nav h2 { color: var(--accent-color); }
    #side-nav .text-gray-600 { color: color-mix(in srgb, var(--text-color) 53%, transparent); }
    #search-modal, #progress-modal, #bookmark-modal { background: var(--bg-color); color: var(--text-color); }
    .action-btn.btn-flash { background: var(--accent-color); color: var(--bg-color); }

    /* 그리드 버튼 (책/장 선택) 클릭 효과 */
    .grid-btn-flash {
      background: var(--accent-color) !important;
      color: var(--bg-color, #fff) !important;
      border-color: var(--accent-color) !important;
      transform: scale(0.92);
      box-shadow: 0 0 12px color-mix(in srgb, var(--accent-color) 40%, transparent);
    }

    /* 토스트 투명도 */
    .opacity-0 { opacity: 0; }
    .opacity-100 { opacity: 1; }