/* Existing authentication dialogs and protected builder styles only. */
:root {
      --primary: #004b91;
      --primary-dark: #003366;
      --primary-light: #e8f1fa;
      --favicon-main: #80b6fc;
      --favicon-rgb: 128, 182, 252;
      --accent: #0f766e;
      --bg: #f5f6f8;
      --surface: #ffffff;
      --border: #dcdfe4;
      --border-accent: rgba(128, 182, 252, 0.65);
      --border-subtle: #ebeef2;
      --text-main: #22262a;
      --text-sub: #5f6670;
      --text-muted: #88909c;
      --notice-bg: #fffde6;
      --notice-border: #f7e076;
      --notice-hl: #ffff00;
      --table-header-bg: #f8fafc;
      --row-hover: #f3f7fb;
      --badge-free-color: #059669;
      --badge-free-bg: #ecfdf5;
      --badge-lock-color: #d97706;
      --badge-lock-bg: #fffbeb;
    }
.preview-status {
      display: inline-flex;
      align-items: center;
      margin-left: 4px;
      padding: 1px 5px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 800;
      vertical-align: 1px;
    }
.preview-filter-note {
      flex: 1 0 100%;
      color: #94a3b8;
      font-size: 12px;
      line-height: 1.5;
      padding: 2px 6px 0;
    }
.preview-pending-action {
      color: #64748b !important;
      background: #f1f5f9 !important;
      border: 1px solid #cbd5e1 !important;
      cursor: not-allowed !important;
    }
.preview-disabled-action {
      color: #94a3b8 !important;
      background: #f8fafc !important;
      border-color: #e2e8f0 !important;
      cursor: not-allowed !important;
      opacity: 0.8;
    }
.ebs-variation-placeholder {
      border: 1px solid #dbe4ee;
      border-radius: 14px;
      background: #ffffff;
      padding: 64px 24px;
      text-align: center;
      box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    }
.ebs-variation-placeholder .placeholder-icon {
      font-size: 34px;
      margin-bottom: 12px;
    }
.ebs-variation-placeholder h2 {
      color: #1e293b;
      font-size: 20px;
      margin-bottom: 8px;
    }
.ebs-variation-placeholder p {
      color: #64748b;
      font-size: 14px;
      margin-bottom: 18px;
    }
.ebs-variation-placeholder .placeholder-badge {
      display: inline-flex;
      align-items: center;
      padding: 7px 12px;
      border-radius: 999px;
      background: #eef2ff;
      color: #4338ca;
      font-size: 12px;
      font-weight: 800;
    }

.modal-backdrop {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(3px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
.modal-window {
      background: #ffffff;
      border-radius: 12px;
      max-width: 420px;
      width: 100%;
      padding: 32px 28px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
      position: relative;
    }
.modal-close-btn {
      position: absolute;
      top: 18px; right: 18px;
      background: none;
      border: none;
      font-size: 20px;
      color: #94a3b8;
      cursor: pointer;
    }
.modal-header-title {
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 6px;
    }
.modal-header-desc {
      font-size: 13px;
      color: var(--text-sub);
      margin-bottom: 22px;
    }
.hr-divider {
      display: flex;
      align-items: center;
      text-align: center;
      color: #94a3b8;
      font-size: 12px;
      margin: 16px 0;
    }
.hr-divider::before,
.hr-divider::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid #e2e8f0;
    }
.hr-divider span { padding: 0 10px; }
@media (max-width: 600px) {
.ebs-variation-placeholder {
        padding: 48px 18px;
      }
}

.tooltip-icon {
      font-size: 16px;
      line-height: 1;
    }

.tt-br-wide { display: inline; }
.tt-br-narrow { display: none; }
@media (max-width: 640px) {
.tt-br-wide { display: inline; }
.tt-br-narrow { display: inline; }

.tooltip-arrow {
        right: 24px;
      }
}
.storage-modal-actions button,
.storage-duplicate-choice button {
      min-height: 40px;
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #fff;
      color: #334155;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
.storage-modal-window button:focus-visible,
.storage-modal-window input:focus-visible {
      outline: 3px solid #60a5fa;
      outline-offset: 2px;
    }
.storage-modal-window button:disabled { cursor: not-allowed; opacity: .55; }
.storage-modal-actions .storage-save-primary,
.storage-duplicate-choice .duplicate-add-primary {
      background: #004b91;
      border-color: #004b91;
      color: #fff;
    }
.storage-modal-status {
      min-height: 1.4em;
      color: #475569;
      font-size: 13px;
    }
.folder-input-low-contrast {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 13.5px;
      font-family: inherit;
      outline: none;
      box-sizing: border-box;
    }
.folder-input-low-contrast:focus {
      border-color: #004b91;
    }
.folder-input-low-contrast::placeholder {
      color: #94a3b8;
      opacity: 0.85;
      font-weight: 400;
    }
.storage-folder-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: background 0.15s;
    }
.storage-folder-item:hover {
      background: #f8fafc;
    }
.storage-folder-item.checked {
      background: #eff6ff;
      border-color: #3b82f6;
    }
.storage-modal-window {
      width: min(520px, calc(100vw - 24px));
      max-height: calc(100vh - 24px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
.storage-folder-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 48px;
      margin-bottom: 8px;
      padding: 9px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
    }
.storage-folder-option.checked { background: #eff6ff; border-color: #3b82f6; }
.storage-folder-option input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #004b91; }
.storage-duplicate-choice {
      margin: 12px 0;
      padding: 14px;
      border: 1px solid #f59e0b;
      border-radius: 8px;
      background: #fffbeb;
    }
.storage-duplicate-choice-actions,
.storage-modal-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }
@media (max-width: 640px) {
.storage-modal-actions button { width: 100%; }
.storage-modal-actions { display: grid; grid-template-columns: 1fr; }
.storage-duplicate-choice-actions { display: grid; grid-template-columns: 1fr; }
.storage-modal-window {
  width: min(520px, 100%);
}
}

.row-options {
      margin-top: 40px;
      margin-bottom: 20px;
      gap: 24px;
    }

.qnum-preset-label:hover {
      color: #004b91;
    }

.qnum-groups-container.supplementary-scroll {
      max-height: 290px;
      overflow-y: auto;
      padding-right: 6px;
      gap: 8px;
    }
.qnum-groups-container.supplementary-scroll::-webkit-scrollbar {
      width: 6px;
    }
.qnum-groups-container.supplementary-scroll::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 4px;
    }
.qnum-groups-container.supplementary-scroll::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 4px;
    }
.qnum-groups-container.supplementary-scroll::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

.qnum-group-check-label:hover {
      background: #dbeafe;
      border-color: #93c5fd;
    }

.qnum-pill.disabled {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
      background: #f1f5f9;
      border-color: #e2e8f0;
      color: #94a3b8;
    }

.sort-chip {
      text-align: center;
    }

.count-chip {
      text-align: center;
    }

.count-chip[data-count="all"] {
      flex: 1.35;
      min-width: fit-content;
      padding: 0 8px;
    }

.summary-line-condition strong,
.summary-line-qnums strong {
      color: #0f172a;
      font-weight: 800;
    }

.summary-qnums-list {
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
    }

/* Approved sample shell follows the retained modal/builder compatibility rules above. */

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
      background-color: #ffffff;
      color: var(--text-main);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* 1. 상단 헤더 (스크롤 시 자연스럽게 올라가도록 relative 처리 + 좌우 패딩 28px = 유효폭 1304px 기준선) */
    .top-header {
      background: #ffffff;
      position: relative;
      z-index: 100;
    }
    .top-header-inner {
      max-width: 1360px;
      margin: 0 auto;
      padding: 16px 28px 14px;
      min-height: 92px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .main-logo-area {
      width: 230px;
      max-width: 230px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 2px 0;
      text-decoration: none;
      white-space: nowrap;
    }
    .main-logo-title {
      font-size: 41px;
      font-weight: 900;
      color: var(--primary);
      letter-spacing: -1.1px;
      line-height: 1.05;
    }
    .main-logo-sub {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 0.4px;
      line-height: 1.25;
    }

    .top-header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .header-storage-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #f0f7ff;
      color: #004b91;
      padding: 8px 15px;
      border-radius: 6px;
      font-size: 13.5px;
      font-weight: 700;
      text-decoration: none;
      border: 1px solid #d0e3f7;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }
    .header-storage-btn:hover {
      background: #e1effe;
    }
    .header-membership-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: linear-gradient(135deg, #4338ca 0%, #3b82f6 100%);
      color: #ffffff;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 13.5px;
      font-weight: 800;
      border: none;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }
    .header-membership-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }
    .auth-btn {
      background: var(--primary);
      color: #fff;
      padding: 8px 18px;
      border-radius: 6px;
      font-size: 13.5px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      transition: 0.2s;
      font-family: inherit;
    }
    .auth-btn:hover {
      background: var(--primary-dark);
    }

    /* 로그인 유도 플로팅 툴팁 (프로덕션 동일) */
    .auth-btn-wrapper {
      position: relative;
      display: inline-block;
    }
    .login-floating-tooltip {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      background: #0f172a;
      color: #ffffff;
      padding: 10px 14px;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
      z-index: 1000;
      white-space: nowrap;
      animation: floatSubtle 2.5s ease-in-out infinite;
      display: block;
    }
    @keyframes floatSubtle {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    .tooltip-arrow {
      position: absolute;
      top: -6px;
      right: 22px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #0f172a;
    }
    .tooltip-body {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tooltip-text {
      font-size: 12.5px;
      line-height: 1.45;
      font-weight: 600;
      color: #f1f5f9;
      text-align: left;
    }
    .tooltip-close-btn {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 13px;
      cursor: pointer;
      padding: 2px 5px;
      margin-left: 4px;
      border-radius: 4px;
      line-height: 1;
    }
    .tooltip-close-btn:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.2);
    }

    /* 2. 상단 2차 메인 GNB 바 — 시안 C (라운드 독 박스형, 스크롤 시 단독 sticky + 1304px 수직 정렬선 일치) */
    .gnb-bar {
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(8px);
      border-top: none;
      border-bottom: 1px solid #eef2f7;
      padding: 8px 28px 16px;
      position: sticky;
      top: 0;
      z-index: 95;
    }
    .gnb-bar-inner {
      max-width: 1304px;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      height: 60px;
      border: 1.5px solid rgba(128, 182, 252, 0.55);
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      /* 파비콘 메인 색(#80b6fc)을 경량 2레이어 그림자로 최적화 (스크롤 60fps 유지) */
      box-shadow:
        0 6px 20px rgba(128, 182, 252, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .gnb-divider {
      width: 1px;
      height: 16px;
      background: rgba(128, 182, 252, 0.38);
      flex-shrink: 0;
    }
    .gnb-nav-item {
      font-size: 17.5px;
      font-weight: 700;
      color: #334155;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      position: relative;
      cursor: pointer;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      font-family: inherit;
      padding: 9px 24px;
      letter-spacing: -0.3px;
      transition: all 0.15s ease;
    }
    .gnb-nav-item:hover {
      color: var(--primary);
      background: rgba(128, 182, 252, 0.12);
    }
    .gnb-nav-item.active {
      color: var(--primary);
      background: linear-gradient(180deg, rgba(128, 182, 252, 0.24) 0%, rgba(128, 182, 252, 0.14) 100%);
      border-color: rgba(128, 182, 252, 0.6);
      font-weight: 800;
      box-shadow: 0 2px 6px rgba(128, 182, 252, 0.25);
    }

    /* 3. 메인 바디 컨테이너 (좌우 패딩 28px로 헤더·GNB 독과 1304px 수직 정렬선 완벽 일치) */
    .body-layout {
      max-width: 1360px;
      margin: 0 auto;
      padding: 20px 28px 80px;
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr);
      column-gap: 36px;
      row-gap: 18px;
      align-items: start;
    }
    .body-notice-slot {
      grid-column: 1 / -1;
      grid-row: 1;
      min-width: 0;
    }

    /* 4. 좌측 사이드바 (파비콘 블루 보더 톤 매칭 + '☰ 내신자료' 하단 구분선을 우측 필터 박스 상단선(60px)과 수평 일치) */
    .sidebar {
      grid-column: 1;
      grid-row: 2;
      width: 230px;
    }
    .sidebar-section {
      margin-bottom: 20px;
      border: 1px solid rgba(128, 182, 252, 0.65);
      border-radius: 8px;
      background: #ffffff;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(128, 182, 252, 0.1);
    }
    .sidebar-section-title {
      height: 59px;
      font-size: 16px;
      font-weight: 800;
      color: #22262a;
      background: #f8fafc;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 14px;
      margin-bottom: 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .sidebar-section-title .hamburger {
      color: var(--primary);
      font-size: 18px;
      line-height: 1;
    }

    .sidebar-menu-list {
      list-style: none;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: #eaf3fe;
    }
    .sidebar-menu-item {
      font-size: 14px;
      padding: 9px 12px;
      border-radius: 7px;
      border: 1px solid transparent;
      color: #3b5978;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.15s ease;
    }
    .sidebar-menu-item:hover:not(.active) {
      background: rgba(255, 255, 255, 0.75);
      color: #004b91;
    }
    .sidebar-menu-item.active {
      font-weight: 800;
      color: #ffffff;
      background: linear-gradient(135deg, #004b91 0%, #0d5cab 100%);
      border-color: #003d78;
      box-shadow:
        0 3px 8px rgba(0, 75, 145, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    /* 좌측 중단: 맞춤 시험지 제작기 프로모션 박스 (프로덕션 블루 그라데이션 & 그림자 적용) */
    .sidebar-builder-promo {
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 55%, #2563eb 100%);
      border-radius: 10px;
      padding: 18px 16px;
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(30, 58, 138, 0.2);
      margin-bottom: 22px;
      text-align: center;
    }
    .sidebar-builder-badge {
      display: inline-block;
      font-size: 10.5px;
      font-weight: 800;
      background: rgba(255, 255, 255, 0.2);
      padding: 2px 8px;
      border-radius: 999px;
      margin-bottom: 6px;
      letter-spacing: 0.3px;
    }
    .sidebar-builder-title {
      font-size: 15px;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 4px;
    }
    .sidebar-builder-sub {
      font-size: 11.5px;
      color: #dbeafe;
      font-weight: 600;
      margin-bottom: 14px;
    }
    .sidebar-builder-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 9px 14px;
      background: #ffffff;
      color: #1e3a8a;
      border: none;
      border-radius: 7px;
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
    }
    .sidebar-builder-btn:hover {
      background: #f8fafc;
      transform: translateY(-1px);
    }

    /* 좌측 하단 안내 카드 3개 (프로덕션 .info-card-btn 스타일 유지) */
    .sidebar-bottom-cards {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .info-card-btn {
      display: flex;
      align-items: center;
      gap: 11px;
      background: #f4f6f9;
      border: 1px solid #e2e6eb;
      padding: 12px 14px;
      border-radius: 8px;
      text-decoration: none;
      color: #333a42;
      font-size: 13.5px;
      font-weight: 700;
      transition: all 0.15s;
      cursor: pointer;
    }
    .info-card-btn:hover {
      background: #e9edf2;
      border-color: #cbd5e1;
    }
    .info-card-icon {
      font-size: 18px;
    }

    /* 5. 우측 메인 콘텐츠 */
    .main-content {
      grid-column: 2;
      grid-row: 2;
      min-width: 0;
    }

    /* 공지사항 띠 배너 — 전체 스카이블루 톤과 조화되도록 부드러운 크림 옐로우 하이라이트 적용 */
    .notice-bar {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #f59e0b;
      border-radius: 8px;
      padding: 11px 18px;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13.5px;
      width: 100%;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
    }
    .notice-bar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }
    .notice-tag {
      font-weight: 800;
      color: #d97706;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      flex-shrink: 0;
      font-size: 13.5px;
    }
    .notice-highlight {
      background-color: #fef3a8;
      padding: 3px 10px;
      font-weight: 700;
      color: #1e293b;
      border-radius: 4px;
      line-height: 1.5;
    }
    .notice-all-link {
      font-size: 13px;
      font-weight: 800;
      color: var(--primary);
      text-decoration: none;
      white-space: nowrap;
      padding: 4px 10px;
      border-radius: 4px;
      background: #f0f7ff;
      border: 1px solid #d0e3f7;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .notice-all-link:hover {
      background: #e1effe;
    }

    /* 출처 선택 탭 (모의고사 | EBS·부교재) — 상위 계층(Hierarchy)이 한눈에 드러나도록 브랜드 네이비 솔리드 액티브 & 스카이블루 프레임 적용 */
    .source-tabs-row {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .content-source-tabs {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px;
      height: 48px;
      border: 1.5px solid rgba(128, 182, 252, 0.75);
      border-radius: 10px;
      background: #eaf3fe;
      box-shadow:
        0 2px 8px rgba(128, 182, 252, 0.18),
        inset 0 1px 2px rgba(0, 75, 145, 0.05);
    }
    .source-tab {
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      color: #3b5978;
      font: inherit;
      font-size: 15.5px;
      font-weight: 700;
      height: 38px;
      padding: 0 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      letter-spacing: -0.2px;
    }
    .source-tab:hover:not(.active) {
      color: #004b91;
      background: rgba(255, 255, 255, 0.7);
    }
    .source-tab.active {
      color: #ffffff;
      background: linear-gradient(135deg, #004b91 0%, #0d5cab 100%);
      border-color: #003d78;
      font-weight: 800;
      box-shadow:
        0 3px 8px rgba(0, 75, 145, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    /* 검색 필터 매트릭스 박스 — 표 외곽 테두리·그림자의 파비콘 색은 유지하고 좌측 열(.filter-th) 배경만 기존 #f9fafb로 복원 */
    .filter-box {
      border: 1px solid rgba(128, 182, 252, 0.65);
      border-radius: 8px;
      background: #ffffff;
      margin-bottom: 14px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(128, 182, 252, 0.12);
    }
    .filter-table {
      width: 100%;
      border-collapse: collapse;
    }
    .filter-table tr + tr {
      border-top: 1px solid var(--border-subtle);
    }
    .filter-th {
      width: 88px;
      background: #f9fafb;
      padding: 12px 16px;
      font-size: 13.5px;
      font-weight: 700;
      color: #374151;
      text-align: left;
      border-right: 1px solid var(--border-subtle);
      white-space: nowrap;
    }
    .filter-td {
      padding: 10px 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      align-items: center;
    }
    .portal-filter-loading {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      color: var(--text-sub);
      font-size: 13px;
      line-height: 1.4;
    }
    .filter-item-btn {
      background: none;
      border: none;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      padding: 3px 8px;
      border-radius: 4px;
      transition: 0.15s;
    }
    .filter-item-btn:hover {
      color: #004b91;
      font-weight: 700;
    }
    .filter-item-btn.selected {
      background: #004b91;
      color: #ffffff !important;
      font-weight: 700;
    }

    /* 필터 초기화 / 적용 버튼 (모서리 곡률 6px 통일) */
    .filter-action-row {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-bottom: 24px;
    }
    .btn-reset {
      background: #ffffff;
      color: #004b91;
      border: 1px solid #004b91;
      padding: 8px 20px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .btn-reset:hover {
      background: #f0f7ff;
    }
    .btn-apply {
      background: #004b91;
      color: #ffffff;
      border: 1px solid #004b91;
      padding: 8px 20px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .btn-apply:hover {
      background: #00386e;
    }

    /* 6. 자료 목록 헤더 & 빠른 검색 */
    .list-summary-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 12px;
      padding-bottom: 4px;
    }
    .list-title-group {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }
    .list-section-heading {
      font-size: 17px;
      font-weight: 800;
      color: #111827;
    }
    .total-count-text {
      font-size: 14px;
      color: #4b5563;
      font-weight: 600;
    }
    .total-count-text strong {
      color: #004b91;
      font-weight: 800;
    }
    .quick-search-box {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(128, 182, 252, 0.65);
      border-radius: 6px;
      padding: 7px 13px;
      background: #ffffff;
      box-shadow:
        0 2px 6px rgba(128, 182, 252, 0.16),
        0 1px 2px rgba(15, 23, 42, 0.04);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .quick-search-box:hover {
      border-color: var(--favicon-main);
      box-shadow:
        0 3px 10px rgba(128, 182, 252, 0.22),
        0 1px 3px rgba(15, 23, 42, 0.05);
    }
    .quick-search-box:focus-within {
      border-color: var(--primary);
      box-shadow:
        0 3px 12px rgba(128, 182, 252, 0.28),
        0 0 0 3px rgba(128, 182, 252, 0.22);
    }
    .quick-search-box input {
      border: none;
      outline: none;
      font-size: 13px;
      width: 190px;
      font-family: inherit;
    }

    /* 일괄 선택 툴바 (프로덕션 .bulk-selection-toolbar 스타일) */
    .bulk-selection-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 12px;
      padding: 10px 12px;
      border: 1px solid #dbe4ee;
      border-radius: 8px;
      background: #f8fafc;
    }
    .bulk-selection-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .bulk-selection-toolbar button {
      min-height: 36px;
      padding: 6px 14px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #fff;
      color: #334155;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
    }
    .bulk-selection-toolbar button:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .bulk-selection-toolbar .bulk-save-primary {
      background: #e2e8f0;
      border-color: #cbd5e1;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.18s ease;
    }
    .bulk-selection-toolbar .bulk-save-primary.has-selection {
      background: linear-gradient(135deg, #004b91 0%, #2563eb 100%);
      border-color: #004b91;
      color: #ffffff;
      box-shadow: 0 3px 10px rgba(0, 75, 145, 0.25);
    }
    .bulk-selection-toolbar .bulk-save-primary.has-selection:hover {
      background: linear-gradient(135deg, #003b73 0%, #1d4ed8 100%);
      transform: translateY(-1px);
    }
    .selected-row-count-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.22);
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      padding: 1px 8px;
      border-radius: 999px;
      white-space: nowrap;
    }

    /* 7. 자료 리스트 테이블 (8컬럼 구조 + 선명한 행 구분선) */
    .data-table-container {
      border: 1px solid rgba(128, 182, 252, 0.65);
      border-radius: 8px;
      background: #ffffff;
      overflow-x: auto;
      container-type: inline-size;
      box-shadow: 0 2px 8px rgba(128, 182, 252, 0.08);
    }
    .data-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      font-size: 13.5px;
    }
    .data-table thead {
      background: #f1f5f9;
      border-bottom: 1.5px solid #cbd5e1;
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
    }
    .data-table th {
      padding: 12px 10px;
      font-weight: 700;
      color: #334155;
      white-space: nowrap;
    }
    .data-table td {
      padding: 12px 10px;
      border-bottom: 1px solid #d5dde7;
      color: #374151;
      vertical-align: middle;
    }
    .data-table tbody tr:hover {
      background: var(--row-hover);
    }
    .data-table tbody tr.row-selected {
      background: #eff6ff;
    }
    .data-table tbody tr.row-selected:hover {
      background: #e2eeff;
    }
    .portal-row-selection {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: #004b91;
    }
    .data-table th.col-compact,
    .data-table td.col-compact {
      padding-left: 6px;
      padding-right: 6px;
    }
    .col-grade {
      font-weight: 700;
      color: #334155;
      white-space: nowrap;
    }
    .col-yymm {
      font-weight: 700;
      color: #334155;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .data-table td.col-title {
      text-align: left;
      font-weight: 600;
      color: #1f2937;
      padding-left: 16px;
    }
    .cat-tag {
      font-size: 12.5px;
      font-weight: 800;
      white-space: nowrap;
    }
    .data-table td.col-title a {
      color: #1f2937;
      text-decoration: none;
      transition: color 0.15s;
    }
    .data-table td.col-title a:hover {
      color: #004b91;
      text-decoration: underline;
    }

    /* 프로덕션 뱃지 & 열람 버튼
       - 공개등급 배지(캡슐형): 가볍고 세련된 에어리 스카이 틴트
       - 열람 버튼(라운드 사각형): 클릭감이 살아있는 소프트 스카이블루 그라데이션 */
    .tier-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 999px;
      white-space: nowrap;
      letter-spacing: -0.2px;
    }
    .tier-badge.free {
      background: transparent;
      color: #64748b;
      border: 1px solid #e2e8f0;
      font-weight: 600;
    }
    .tier-badge.lock {
      background: linear-gradient(135deg, #f0f6ff 0%, #e2eeff 100%);
      color: #2563eb;
      border: 1px solid #c2dafc;
      font-weight: 700;
    }

    .tbl-action-btn {
      padding: 6px 13px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      letter-spacing: -0.2px;
    }
    .tbl-action-btn.btn-free {
      background: #004b91;
      color: #ffffff;
      box-shadow: 0 1px 2px rgba(0, 75, 145, 0.18);
    }
    .tbl-action-btn.btn-free:hover {
      background: #003366;
      transform: translateY(-1px);
    }
    .tbl-action-btn.btn-locked {
      background: linear-gradient(180deg, #e1effe 0%, #cfe4fd 100%);
      color: #1e40af;
      border-color: #a6cafb;
      box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
      font-weight: 700;
    }
    .tbl-action-btn.btn-locked:hover {
      background: linear-gradient(180deg, #d0e5fe 0%, #bad7fc 100%);
      border-color: #8ab8f8;
      color: #1e3a8a;
      transform: translateY(-1px);
    }

    /* 페이지네이션 (프로덕션 동일) */
    .pagination-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      margin-top: 24px;
      margin-bottom: 8px;
    }
    .page-btn {
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border: 1px solid var(--border);
      background: #ffffff;
      color: #374151;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    .page-btn:hover:not(.disabled) {
      background: #f1f5f9;
      border-color: #cbd5e1;
      color: #004b91;
    }
    .page-btn.active {
      background: #004b91 !important;
      color: #ffffff !important;
      border-color: #004b91 !important;
      font-weight: 800;
    }
    .page-btn.disabled {
      color: #cbd5e1;
      border-color: #e5e7eb;
      cursor: not-allowed;
      background: #f8fafc;
    }

    /* ===================================================
       탭 뷰 전환 공통 & 사이드바 서브그룹
       =================================================== */
    .tab-view {
      display: none;
    }
    .tab-view.active {
      display: block;
    }
    .sidebar-group-panel {
      display: none;
    }
    .sidebar-group-panel.active {
      display: block;
    }
    .sidebar-sub-label {
      font-size: 13px;
      font-weight: 800;
      color: #004b91;
      padding: 9px 12px;
      margin-top: 6px;
      letter-spacing: -0.2px;
      background: #eef5ff;
      border-top: 1px solid #dbeafe;
      border-bottom: 1px solid #dbeafe;
      border-left: 3px solid #004b91;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* ===================================================
       변형문제 페이지: 프로덕션 맞춤 시험지 제작기 (Step 1~5)
       =================================================== */
    .builder-card {
      background: #ffffff;
      border: 1px solid var(--border-accent);
      border-radius: 8px;
      padding: 0 28px 24px;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
      margin-bottom: 20px;
    }
    .builder-title {
      min-height: 59px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 0 0 20px 0;
      padding: 0;
      border-bottom: 1px solid var(--border-subtle);
      text-align: center;
      flex-wrap: wrap;
    }
    .builder-title h2 {
      font-size: 22px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -0.5px;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0;
    }
    .builder-title .badge-count {
      font-size: 13px;
      font-weight: 800;
      background: linear-gradient(135deg, #f0f6ff 0%, #e2eeff 100%);
      color: #2563eb;
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid #c2dafc;
    }
    .builder-row {
      display: flex;
      gap: 18px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .step-box {
      flex: 1;
      min-width: 220px;
    }
    .step-header-compact {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .step-num {
      width: 26px;
      height: 26px;
      background: #004b91;
      color: #ffffff;
      border-radius: 50%;
      font-size: 13.5px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .step-title {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
    }
    .grade-tabs {
      display: flex;
      gap: 8px;
    }
    .grade-tab-btn {
      flex: 1;
      height: 46px;
      padding: 0 12px;
      border: 1.5px solid #cbd5e1;
      border-radius: 9px;
      background: #ffffff;
      font-size: 15px;
      font-weight: 800;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      font-family: inherit;
    }
    .grade-tab-btn:hover {
      border-color: #60a5fa;
      color: #004b91;
      background: #f8fbff;
    }
    .grade-tab-btn.active {
      border-color: #004b91;
      background: linear-gradient(135deg, #004b91 0%, #0d5cab 100%);
      color: #ffffff;
      font-weight: 800;
      box-shadow: 0 3px 8px rgba(0, 75, 145, 0.25);
    }
    .exam-select-box {
      width: 100%;
      height: 46px;
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 700;
      border: 1.5px solid #cbd5e1;
      border-radius: 9px;
      background: #ffffff;
      color: #1e293b;
      outline: none;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
      min-height: 38px;
    }
    .exam-select-box:focus {
      border-color: #004b91;
      box-shadow: 0 0 0 2px rgba(0, 75, 145, 0.15);
    }
    .qnum-section {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px dashed #cbd5e1;
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px dashed #cbd5e1;
    }
    .qnum-presets-bar {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-top: 12px;
      margin-bottom: 16px;
      padding: 10px 18px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      flex-wrap: wrap;
    }
    .qnum-preset-label {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
      transition: color 0.15s;
    }
    .qnum-preset-label input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: #004b91;
      cursor: pointer;
    }
    .qnum-groups-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .qnum-group-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 8px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }
    .qnum-group-check-label {
      font-size: 13px;
      font-weight: 800;
      color: #004b91;
      background: #eff6ff;
      border: 1.5px solid #bfdbfe;
      padding: 5px 12px;
      border-radius: 8px;
      white-space: nowrap;
      min-width: 105px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
    }
    .qnum-group-check-label input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #004b91;
      cursor: pointer;
    }
    .qnum-group-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 8px;
      align-items: center;
      flex: 1;
    }
    .qnum-pill {
      padding: 5px 13px;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      background: #ffffff;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease-in-out;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }
    .qnum-pill:hover {
      border-color: #3b82f6;
      background: #f0f9ff;
      color: #1d4ed8;
      transform: translateY(-1px);
    }
    .qnum-pill.selected {
      border-color: #004b91;
      background: #004b91;
      color: #ffffff;
      font-weight: 800;
      box-shadow: 0 2px 5px rgba(0, 75, 145, 0.25);
    }
    .qnum-notice {
      margin-top: 12px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
    }
    .sort-chips, .count-chips {
      display: flex;
      gap: 8px;
    }
    .sort-chip, .count-chip {
      flex: 1;
      height: 48px;
      border: 1.5px solid #cbd5e1;
      border-radius: 9px;
      padding: 0 12px;
      background: #ffffff;
      font-size: 15px;
      font-weight: 800;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      white-space: nowrap;
      font-family: inherit;
    }
    .sort-chip:hover, .count-chip:hover {
      border-color: #60a5fa;
      color: #004b91;
      background: #f8fbff;
    }
    .sort-chip.selected, .count-chip.selected {
      border-color: #004b91;
      background: linear-gradient(135deg, #004b91 0%, #0d5cab 100%);
      color: #ffffff;
      font-weight: 800;
      box-shadow: 0 3px 10px rgba(0, 75, 145, 0.26);
    }
    .submit-area {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1.5px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .summary-text {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
      min-width: 260px;
    }
    .summary-line-condition,
    .summary-line-qnums {
      font-size: 14.5px;
      line-height: 1.5;
      color: #475569;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .summary-label {
      font-weight: 800;
      color: #1e293b;
      font-size: 15.5px;
    }
    .count-badge {
      display: inline-flex;
      align-items: center;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #004b91;
      font-size: 14px;
      font-weight: 800;
      padding: 1px 9px;
      border-radius: 6px;
      line-height: 1.4;
    }
    .btn-generate {
      background: linear-gradient(135deg, #004b91 0%, #2563eb 100%);
      color: #ffffff;
      font-size: 16.5px;
      font-weight: 800;
      padding: 15px 34px;
      min-width: 220px;
      justify-content: center;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 6px 18px rgba(0, 75, 145, 0.32);
      animation: floatSubtle 2.5s ease-in-out infinite;
      transition: box-shadow 0.2s ease, filter 0.2s ease;
      font-family: inherit;
    }
    .btn-generate:hover {
      box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
      filter: brightness(1.06);
    }

    /* ===================================================
       커뮤니티 페이지: 게시글 테이블 & 글쓰기 버튼
       =================================================== */
    .btn-write-post {
      background: #004b91;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 8px 16px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 75, 145, 0.2);
      transition: all 0.15s;
    }
    .btn-write-post:hover {
      background: #003366;
      transform: translateY(-1px);
    }
    .comm-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11.5px;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 999px;
      white-space: nowrap;
    }
    .comm-badge.notice {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }
    .comm-badge.solved {
      background: #f0f6ff;
      color: #2563eb;
      border: 1px solid #c2dafc;
    }
    .comm-badge.pending {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }
    .comm-comment-cnt {
      font-size: 12px;
      font-weight: 800;
      color: #2563eb;
      margin-left: 4px;
    }
    .data-table tr.notice-pinned-row {
      background: #f8fbff;
    }

    /* ===================================================
       샘플보기 페이지: 상단 세부 문서 탭 + 인라인 A4 문서 미리보기 뷰어
       =================================================== */
    .sample-subtabs-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 48px;
      margin-bottom: 12px;
      padding: 6px 10px;
      background: #eaf3fe;
      border: 1px solid rgba(128, 182, 252, 0.78);
      border-radius: 8px;
      flex-wrap: wrap;
    }
    .sample-subtab-btn {
      border: 1px solid transparent;
      background: transparent;
      color: #475569;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .sample-subtab-btn:hover {
      color: #004b91;
      background: rgba(255, 255, 255, 0.65);
    }
    .sample-subtab-btn.active {
      background: linear-gradient(135deg, #004b91 0%, #0d5cab 100%);
      color: #ffffff;
      font-weight: 800;
      box-shadow: 0 2px 6px rgba(0, 75, 145, 0.22);
    }
    .sample-viewer-frame {
      border: 1px solid var(--border-accent);
      border-radius: 8px;
      background: #f1f5f9;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    }
    .sample-viewer-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 18px;
      background: #ffffff;
      border-bottom: 1px solid #dbe4ee;
      flex-wrap: wrap;
    }
    .sample-viewer-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .sample-doc-pill {
      background: #eff6ff;
      color: #004b91;
      border: 1px solid #bfdbfe;
      font-size: 12px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 999px;
    }
    .sample-doc-title {
      font-size: 14.5px;
      font-weight: 800;
      color: #0f172a;
    }
    .sample-viewer-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sample-canvas-stage {
      padding: 28px 24px 36px;
      display: flex;
      justify-content: center;
      background: #e9eef5;
    }
    @keyframes a4SheetFadeIn {
      from {
        opacity: 0.35;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .a4-paper-sheet {
      width: 100%;
      max-width: 820px;
      min-height: 620px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.10),
        0 2px 6px rgba(15, 23, 42, 0.05);
      padding: 36px 44px;
      color: #1e293b;
      animation: a4SheetFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .a4-running-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      margin-bottom: 22px;
      border-bottom: 2px solid #004b91;
      font-size: 12px;
      font-weight: 800;
      color: #004b91;
    }
    .a4-sheet-badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      gap: 12px;
    }
    .a4-qnum-box {
      background: #004b91;
      color: #ffffff;
      font-size: 15px;
      font-weight: 900;
      padding: 6px 14px;
      border-radius: 6px;
    }
    .a4-topic-line {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      background: #f8fafc;
      border-left: 4px solid #004b91;
      padding: 8px 14px;
      margin-bottom: 18px;
    }
    .a4-sent-card {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 16px 18px;
      margin-bottom: 14px;
      background: #ffffff;
    }
    .a4-sent-num {
      display: inline-block;
      background: #eff6ff;
      color: #004b91;
      border: 1px solid #bfdbfe;
      font-size: 11.5px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 4px;
      margin-bottom: 8px;
    }
    .a4-eng-line {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.75;
      color: #0f172a;
      margin-bottom: 8px;
    }
    .a4-slash {
      color: #2563eb;
      font-weight: 900;
      padding: 0 3px;
    }
    .a4-kor-line {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.65;
      margin-bottom: 10px;
    }
    .a4-point-box {
      background: #f8fbff;
      border: 1px solid #dbeafe;
      border-radius: 6px;
      padding: 10px 14px;
      font-size: 12.5px;
      line-height: 1.6;
      color: #1e3a8a;
    }
    .a4-two-col-exam {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      border-top: 1px solid #cbd5e1;
      padding-top: 18px;
    }
    .a4-exam-col {
      font-size: 13px;
      line-height: 1.65;
    }
    .a4-exam-col:first-child {
      border-right: 1px solid #cbd5e1;
      padding-right: 20px;
    }

/* Integration states use the approved portal palette, without example data. */
[hidden], #portal-legacy-catalog, #inline-builder-source-tabs { display: none !important; }
body.variation-mode .main-content { padding-top: 0 !important; }
.portal-state-row td { padding: 48px 20px; color: var(--text-sub); text-align: center; }
.portal-preparing-state { padding: 72px 24px; color: #64748b; text-align: center; }
.tbl-action-btn.btn-preparing { background: #f1f5f9; border: 1px solid #cbd5e1; color: #64748b; cursor: not-allowed; box-shadow: none; }
.tbl-action-btn.btn-preparing:hover { transform: none; background: #f1f5f9; }
.portal-preparing-row .col-title,
.portal-preparing-row .planned-title { color: #64748b; font-weight: 400; }
.portal-preparing-row .cat-tag { color: #64748b; opacity: .75; }
.portal-preparing-row .tier-badge {
  color: #64748b;
  background: #f1f5f9;
  border-color: #cbd5e1;
  opacity: .75;
}
.portal-preparing-row input[type="checkbox"] { opacity: .4; }
#portal-import-legacy,
[data-retry] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s, border-color .15s;
}
#portal-import-legacy:hover,
[data-retry]:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
#inline-builder-controls { margin: 0 0 20px; }
#inline-builder-controls .builder-title { display: none; }
.sidebar-menu-item[role="button"]:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Preserve the existing mobile dialog and builder accessibility contract (PUI-RESP-002/003).
   Portal navigation/sidebar layout remains a separate user design checkpoint. */
@media (max-width: 640px) {
  .filter-action-row button,
  .grade-tab-btn,
  .exam-select-box,
  .sort-chip,
  .count-chip,
  .qnum-group-check-label,
  .qnum-preset-label,
  .btn-generate { min-height: 44px; }
  .btn-generate { width: 100%; min-width: 0; white-space: normal; }
  .summary-text { min-width: 0; }
  .storage-modal-actions button,
  .storage-duplicate-choice button { min-height: 44px; }

}

@media (max-width: 640px), (max-height: 500px) {
  .modal-backdrop {
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  .modal-window {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 20px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-block: auto;
  }
  .modal-window button { min-height: 44px; }
  .modal-window input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; font-size: 16px !important; }
  .storage-modal-window {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 16px;
  }
  .modal-close-btn {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Category hues come from the approved sample, not a new palette. */
.cat-tag[data-category="lesson"] { color: #4f46e5; }
.cat-tag[data-category="passage"], .cat-tag[data-category="oneline"] { color: #004b91; }
.cat-tag[data-category="sentence"], .cat-tag[data-category="blank"] { color: #2563eb; }
.cat-tag[data-category="quiz"], .cat-tag[data-category="grammar"] { color: #d97706; }
.cat-tag[data-category="vocab"], .cat-tag[data-category="order-chunk"] { color: #0d9488; }
.cat-tag[data-category="desc"], .cat-tag[data-category="writing"] { color: #dc2626; }
.cat-tag[data-category="order-word"] { color: #0f766e; }
.cat-tag[data-category="sent-order"] { color: #7c3aed; }
.cat-tag[data-category="para-order"] { color: #9333ea; }

/* Approved responsive portal layout: PUI-RESP-001/002/004. */
.mobile-category-toggle { display: none; }

@media (max-width: 1120px) {
  .body-layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 20px;
    padding: 16px;
  }
  .body-notice-slot {
    grid-column: 1;
    grid-row: 1;
  }
  .mobile-category-toggle {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
  }
  #portal-sidebar {
    grid-column: 1;
    grid-row: 3;
    display: none;
    width: 100%;
    min-width: 0;
  }
  body.mobile-categories-open #portal-sidebar { display: block; }
  #portal-sidebar .sidebar-section { width: 100%; }
  #portal-sidebar .sidebar-bottom-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gnb-bar { padding-inline: 16px; }
  .gnb-bar-inner {
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .gnb-nav-item {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
    touch-action: manipulation;
  }
  .gnb-divider { flex: 0 0 1px; }

  #view-naeshin .data-table-container,
  #view-workbook .data-table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #view-naeshin .data-table,
  #view-workbook .data-table { min-width: 850px; }

  .sample-viewer-frame,
  .sample-canvas-stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .sample-canvas-stage {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .a4-paper-sheet {
    width: 820px;
    max-width: 820px;
    min-width: 820px;
    flex: 0 0 820px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .top-header-inner {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 12px;
    padding-block: 10px;
    }
  .main-logo-area {
    width: auto;
    max-width: 100%;
    align-self: center;
    align-items: center;
  }
  .main-logo-title {
    font-size: 41px;
    white-space: nowrap;
  }
  .top-header-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .top-header-right .auth-btn,
  .top-header-right .header-storage-btn,
  .top-header-right .header-membership-btn,
  .top-header-right .user-pill {
    min-height: 44px;
  }

  .gnb-bar { padding-inline: 8px; }
  .gnb-bar-inner {
    height: 52px;
    gap: 8px;
    padding-inline: 8px;
    border-radius: 8px;
  }
  .gnb-nav-item {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 15px;
  }

  .body-layout {
    padding: 16px;
    row-gap: 12px;
    }
  .notice-bar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
  .notice-bar-left {
    flex-wrap: wrap;
    gap: 4px;
  }
  .notice-highlight {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .notice-all-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
  }

  .sidebar-menu-item { min-height: 44px; }
  .source-tabs-row { height: auto; min-height: 48px; flex-wrap: wrap; }
  .source-tab { min-height: 44px; height: auto; padding: 3px 16px; touch-action: manipulation; }

  .filter-table { width: 100%; }
  .filter-table tr {
    display: grid;
    grid-template-columns: minmax(72px, 88px) minmax(0, 1fr);
  }
  .filter-table tr > * { min-width: 0; }
  .filter-th {
    width: auto;
    padding: 9px 8px;
    white-space: normal;
    word-break: keep-all;
  }
  .filter-td {
    min-width: 0;
    gap: 6px 8px;
    padding: 8px;
  }
  .filter-item-btn {
    min-height: 44px;
    padding-inline: 10px;
    touch-action: manipulation;
  }
  .filter-action-row {
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 8px;
  }
  .filter-action-row button {
    flex: 1 1 140px;
    min-height: 44px;
  }

  .list-summary-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .list-title-group {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .quick-search-box {
    width: 100%;
    min-width: 0;
  }
  .quick-search-box input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
  }
  .bulk-selection-toolbar button { min-height: 44px; }
  .page-btn { min-height: 44px; }
  .sample-subtab-btn,
  .sample-viewer-actions button { min-height: 44px; }
  .portal-selection-target {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .data-table input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  .data-table .tbl-action-btn { min-height: 44px; }

  .sample-viewer-toolbar {
    align-items: flex-start;
    padding: 10px 12px;
  }
  .sample-viewer-meta,
  .sample-viewer-actions { min-width: 0; flex-wrap: wrap; }
  .sample-doc-title { overflow-wrap: anywhere; }
  .sample-canvas-stage { padding: 16px 12px 24px; }
}

@media (max-width: 360px) {
  .top-header-inner { padding-inline: 12px; }
  .body-layout { padding-inline: 8px; }
}

@media (max-width: 600px) {
  #portal-sidebar .sidebar-bottom-cards { grid-template-columns: minmax(0, 1fr); }
  .content-source-tabs { max-width: 360px; }
}

@media (max-width: 1120px) {
  /* Reserve real space for the sample login hint, so it cannot cover the GNB. */
  .top-header:has(#login-floating-tooltip:not([hidden])) { padding-bottom: 72px; }
}

@media (max-width: 640px) {

  .portal-selection-target:has(input:disabled) { cursor: not-allowed; }
}
@media (max-width: 1120px) {
  .body-layout button,
  .top-header button,
  .gnb-bar button,
  .modal-window button,
  #portal-import-legacy,
  [data-retry] { min-height: 44px; }
  .notice-all-link,
  .top-header-right .auth-btn,
  .top-header-right .header-storage-btn,
  .sidebar-menu-item[role="button"],
  .info-card-btn { min-height: 44px; }
  .portal-selection-target { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  #view-naeshin .data-table th:first-child, #view-naeshin .data-table td:first-child,
  #view-workbook .data-table th:first-child, #view-workbook .data-table td:first-child { width: 64px !important; padding-inline: 8px; }
  .page-btn {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .main-content {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
  }
  body.mobile-categories-open .main-content { grid-row: 4; }
}

/* Optional hint markup can use this class when the sample viewer scrolls horizontally. */
.sample-scroll-hint { display: none; }
@media (max-width: 1120px) {
  .sample-scroll-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 8px 12px 0;
    color: var(--text-sub);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {

  .top-header:has(#login-floating-tooltip:not([hidden])) { padding-bottom: 56px; }
  .login-floating-tooltip { padding: 8px 10px; }

  .mobile-category-toggle { padding: 8px 12px; }

  #portal-sidebar .sidebar-section { margin-bottom: 12px; }
  #portal-sidebar .sidebar-builder-promo {
    margin-bottom: 12px;
    padding: 12px;
  }
  #portal-sidebar .sidebar-builder-badge { margin-bottom: 4px; }
  #portal-sidebar .sidebar-builder-sub { margin-bottom: 8px; }

  .bulk-selection-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
  }
  .bulk-selection-controls {
    flex: 1 1 100%;
    width: 100%;
  }
  .bulk-selection-controls button {
    flex: 1 1 110px;
    min-width: 0;
    padding-inline: 8px;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .bulk-selection-controls [data-clear-scope] { flex-basis: 100%; }
  .bulk-selection-status {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
    word-break: keep-all;
  }
  .bulk-selection-toolbar .bulk-save-primary {
    order: -1;
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }
  .pagination-wrapper {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .sample-scroll-hint { margin: 6px 12px; }
}

/* Latest approved sample: compact community menu and lesson viewer frame. */
#sidebar-community .sidebar-menu-item:has(> .community-category-control){padding:0;}
#sidebar-community .community-category-control{padding:9px 12px!important;border-radius:7px;min-height:38px;}
#sidebar-community .community-share-sub-wrapper{list-style:none;}
#sidebar-community #sidebar-comm-share-sub{padding:2px 0 2px 12px;gap:2px;}
.community-list-actions{flex-wrap:wrap;min-width:0;max-width:100%;}
.community-access-banner[hidden]{display:none!important;}
#inline-type-status{font-size:12.5px;font-weight:800;line-height:1.6;color:#64748b;}
#inline-type-grid .type-pill,#inline-type-grid .qnum-pill{white-space:normal;}
#inline-type-grid button:disabled{opacity:.55;cursor:not-allowed;}
@media(max-width:1120px){#sidebar-community .community-category-control{min-height:44px;}}
@media(max-width:640px){.community-list-actions{width:100%;}.community-list-actions .quick-search-box{flex:1 1 100%;}#inline-type-grid .qnum-group-row{flex-wrap:wrap;}}

/* Restore the approved builder controls and lesson guidance badge states. */
#inline-type-grid .type-pill {
  padding: 6px 13px;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}
#inline-type-grid .type-pill:hover:not(:disabled) {
  border-color: #3b82f6;
  background: #f0f9ff;
  color: #1d4ed8;
}
#inline-type-grid .type-pill.selected {
  border-color: #004b91;
  background: #004b91;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(0, 75, 145, 0.25);
}
#inline-type-grid .type-pill:disabled {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.6;
}
#inline-generate-button:disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}
.lesson-filter-guidance-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #004b91;
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  margin-left: 0;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  flex-wrap: wrap;
}
.portal-empty-message {
  display: block;
  text-align: center;
}
#sample-subtabs-bar:empty { display: none; }

@media (max-width: 1120px) {
  #inline-type-grid .type-pill { min-width: 44px; min-height: 44px; }
  #view-community .data-table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #view-community .data-table { min-width: 850px; }
  .portal-empty-message {
    position: sticky;
    left: 0;
    width: calc(100vw - 64px);
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}