@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poor+Story&display=swap");
:root { --gs-primary: #4a90e2; --gs-primary-dark: #1e3a8a; --gs-primary-dark-rgb: 30, 58, 138; --gs-accent: #22d3ee; --gs-badge-bg: #4a90e2; --gs-text-dark: #1a1a1a; --gs-text-medium: #374151; --gs-text-light: #6b7280; --gs-border: #e5e7eb; --gs-page-bg: #f8f9fa; --gs-footer-bg: #f0f4f8; --gs-white: #ffffff; }
.gatsaeng-container { background-color: var(--gs-white); }
.dark { --gs-text-dark: #f3f4f6; --gs-text-medium: #d1d5db; --gs-text-light: #6b7280; --gs-border: #374151; --gs-page-bg: #111827; --gs-footer-bg: #1f2937; --gs-white: #1f2937; }
.gatsaeng-page-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 3px solid var(--gs-primary); margin-bottom: 28px; }
.gatsaeng-header-left { display: flex; align-items: center; gap: 10px; }
.gatsaeng-header-bar { width: 5px; height: 45px; background-color: var(--gs-primary-dark); border-radius: 2px; flex-shrink: 0; }
.gatsaeng-header-content { display: flex; align-items: baseline; gap: 8px; }
.gatsaeng-page-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 28px; font-weight: 800; color: var(--gs-primary-dark); line-height: 1; }
.gatsaeng-page-subtitle { font-family: "Poor Story", cursive; font-size: 19px; color: var(--gs-text-dark); line-height: 1; }
.gatsaeng-step-badge { display: flex; align-items: center; gap: 4px; background-color: var(--gs-primary-dark); color: rgb(255, 255, 255); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.gatsaeng-step-number { background-color: rgb(255, 255, 255); color: var(--gs-primary-dark); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.page-content > div:has(.gatsaeng-card) { padding-top: 24px; padding-bottom: 26px; margin-bottom: 0px; border-bottom: 1px solid rgba(var(--gs-primary-dark-rgb),.25); }
.page-content > div:has(.gatsaeng-card):first-child { padding-top: 0px; }
.gatsaeng-card { break-inside: avoid; }
.gatsaeng-card-layout { display: flex; gap: 0px; }
.gatsaeng-left-column { width: 36px; min-width: 36px; background-color: color-mix(in srgb,var(--gs-primary) 8%,transparent); padding: 6px 4px; display: flex; flex-direction: column; align-items: center; border-radius: 4px 0px 0px 4px; }
.dark .gatsaeng-left-column { background-color: color-mix(in srgb,var(--gs-primary) 10%,transparent); }
.gatsaeng-right-column { flex: 1 1 0%; padding-left: 10px; }
.gatsaeng-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.gatsaeng-number { font-family: Dongle, sans-serif; font-size: 18px; font-weight: 700; color: var(--gs-primary); }
.gatsaeng-word-info { flex: 1 1 0%; }
.gatsaeng-word-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; line-height: 1.1; }
.gatsaeng-word { font-size: 23px; font-weight: 700; color: var(--gs-primary-dark); }
.gatsaeng-meaning { font-size: 14px; font-weight: 600; color: var(--gs-text-dark); }
.gatsaeng-meaning-description { font-family: "Poor Story", cursive; font-size: 12px; font-weight: 400; color: var(--gs-text-medium); }
.gatsaeng-checkboxes { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; flex-shrink: 0; }
.gatsaeng-checkbox { width: 11px; height: 11px; border: 1px solid var(--gs-border); border-radius: 2px; background-color: var(--gs-white); }
.gatsaeng-pronunciation { font-size: 11px; color: var(--gs-text-light); margin-bottom: 0px; line-height: 1.2; }
.gatsaeng-derivatives { margin-top: 4px; margin-bottom: 0px; display: flex; flex-direction: column; gap: 1px; }
.gatsaeng-derivative { display: flex; align-items: baseline; gap: 16px; }
.gatsaeng-derivative-word { font-size: 12px; font-weight: 700; color: var(--gs-text-dark); min-width: 90px; }
.gatsaeng-derivative-meaning { font-size: 12px; color: var(--gs-text-medium); }
.gatsaeng-derivative-etymology { font-family: "Poor Story", cursive; font-size: 11px; color: var(--gs-text-light); margin-left: 8px; }
.gatsaeng-sections { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.gatsaeng-section { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 8px; }
.gatsaeng-badge { background-color: transparent; color: var(--gs-primary-dark); font-family: Dongle, sans-serif; font-size: 16px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; line-height: 1.1; width: 22px; min-width: 22px; text-align: center; display: flex; align-items: center; justify-content: center; height: 18px; }
.gatsaeng-section-content { font-size: 12px; color: var(--gs-text-medium); line-height: 1.6; flex: 1 1 0%; margin: 0px; min-width: 0px; }
.gatsaeng-section-content.example { font-size: 12px; }
.gatsaeng-section-content.tip { font-family: "Poor Story", cursive; font-size: 12px; line-height: 1.7; }
.gatsaeng-section-content.definition { font-size: 12px; font-family: "Times New Roman", Times, serif; font-style: italic; }
.gatsaeng-confusables-table { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0%; }
.gatsaeng-confusable-row { display: flex; align-items: baseline; gap: 20px; }
.gatsaeng-confusable-word { font-size: 12px; font-weight: 700; color: var(--gs-text-dark); min-width: 100px; }
.gatsaeng-confusable-meaning { font-size: 12px; color: var(--gs-text-medium); }
.gatsaeng-syn-ant-word { font-weight: 600; color: var(--gs-primary); }
.gatsaeng-syn-ant-meaning { font-size: 11px; color: var(--gs-text-light); }
.gatsaeng-example-word { font-weight: 700; color: var(--gs-primary); }
.gatsaeng-confusable-word { font-weight: 600; color: var(--gs-primary); }
.gatsaeng-confusable-vs { font-weight: 600; color: var(--gs-text-dark); }
.gatsaeng-highlight { font-weight: 600; }
.gatsaeng-footer { background-color: var(--gs-white); padding: 8px 0px; display: flex; align-items: center; justify-content: space-between; }
.page-footer:has(.gatsaeng-footer) { bottom: 5mm !important; left: 12mm !important; right: 12mm !important; }
.gatsaeng-footer-logo { display: flex; align-items: center; }
.gatsaeng-footer-logo-gatsaeng { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 900; font-style: italic; color: var(--gs-primary-dark); }
.gatsaeng-footer-logo-boca { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 900; font-style: italic; color: var(--gs-text-medium); }
.gatsaeng-page-number { display: flex; align-items: center; justify-content: center; }
.gatsaeng-page-number-circle { width: 26px; height: 26px; background-color: var(--gs-page-bg); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--gs-text-medium); }
.gatsaeng-footer-right { display: flex; align-items: center; gap: 12px; }
.gatsaeng-footer-text { font-family: "Poor Story", cursive; font-size: 12px; color: var(--gs-text-medium); }
.gatsaeng-container ~ .page-number-bottom-left, .gatsaeng-container ~ .page-number-bottom-right, .a4-page:has(.gatsaeng-container) .page-number-bottom-left, .a4-page:has(.gatsaeng-container) .page-number-bottom-right { display: none !important; }
.a4-page:has(.gatsaeng-container) { padding-top: 16mm !important; padding-bottom: 10mm !important; }
.a4-page:has(.gatsaeng-container) .page-content { flex: 1 1 0%; gap: 0px !important; }
.spoiler-page-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 3px solid var(--gs-primary); margin-bottom: 16px; }
.spoiler-header-left { display: flex; align-items: center; gap: 10px; }
.spoiler-header-bar { width: 5px; height: 45px; background-color: var(--gs-primary-dark); border-radius: 2px; flex-shrink: 0; }
.spoiler-header-content { display: flex; align-items: baseline; gap: 8px; }
.spoiler-page-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 28px; font-weight: 800; color: var(--gs-primary-dark); line-height: 1; }
.spoiler-page-subtitle { font-family: "Poor Story", cursive; font-size: 18px; color: var(--gs-text-medium); line-height: 1; }
.spoiler-header-right { display: flex; align-items: center; gap: 16px; }
.spoiler-tip-text { font-family: "Poor Story", cursive; font-size: 12px; color: var(--gs-text-medium); text-align: right; line-height: 1.4; }
.spoiler-tip-highlight { color: var(--gs-text-medium); text-decoration: none; }
.spoiler-step-badge { display: flex; align-items: center; gap: 4px; background-color: var(--gs-primary-dark); color: rgb(255, 255, 255); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.spoiler-step-number { background-color: rgb(255, 255, 255); color: var(--gs-primary-dark); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.spoiler-content { display: flex; gap: 20px; flex: 1 1 0%; }
.spoiler-column { flex: 1 1 0%; display: flex; flex-direction: column; gap: 16px; }
.spoiler-group { border: 1px solid var(--gs-border); border-radius: 4px; overflow: hidden; }
.spoiler-sentence { background-color: color-mix(in srgb,var(--gs-primary) 5%,var(--gs-white)); padding: 10px 12px; font-size: 12px; line-height: 1.6; color: var(--gs-text-dark); border-bottom: 1px solid var(--gs-border); }
.spoiler-highlight-word { font-weight: 700; color: var(--gs-text-dark); }
.spoiler-word-list { padding: 0px; }
.spoiler-word-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--gs-border); }
.spoiler-word-item:last-child { border-bottom: none; }
.spoiler-word-number { font-size: 12px; font-weight: 600; color: var(--gs-primary); min-width: 20px; }
.spoiler-checkbox { width: 12px; height: 12px; border: 1px solid var(--gs-border); border-radius: 2px; background-color: var(--gs-white); flex-shrink: 0; }
.spoiler-word-text { font-size: 13px; font-weight: 600; color: var(--gs-text-dark); }
.workbook-page-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 3px solid var(--gs-primary); margin-bottom: 16px; }
.workbook-header-left { display: flex; align-items: center; gap: 10px; }
.workbook-header-bar { width: 5px; height: 45px; background-color: var(--gs-primary-dark); border-radius: 2px; flex-shrink: 0; }
.workbook-header-content { display: flex; align-items: baseline; gap: 8px; }
.workbook-page-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 28px; font-weight: 800; color: var(--gs-primary-dark); line-height: 1; }
.workbook-page-subtitle { font-family: "Poor Story", cursive; font-size: 18px; color: var(--gs-text-medium); line-height: 1; }
.workbook-header-right { display: flex; align-items: center; gap: 16px; }
.workbook-tip-text { font-family: "Poor Story", cursive; font-size: 12px; color: var(--gs-text-medium); text-align: right; line-height: 1.4; }
.workbook-tip-highlight { color: var(--gs-primary); font-weight: 600; }
.workbook-step-badge { display: flex; align-items: center; gap: 4px; background-color: var(--gs-primary-dark); color: rgb(255, 255, 255); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.workbook-step-number { background-color: rgb(255, 255, 255); color: var(--gs-primary-dark); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.workbook-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.workbook-section { border: 1px solid var(--gs-border); border-radius: 6px; overflow: hidden; }
.workbook-section-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background-color: color-mix(in srgb,var(--gs-primary) 10%,var(--gs-white)); border-bottom: 1px solid var(--gs-border); }
.workbook-section-icon { font-size: 14px; }
.workbook-section-title { font-size: 13px; font-weight: 700; color: var(--gs-primary-dark); }
.workbook-matching-container { display: flex; padding: 10px; gap: 16px; }
.workbook-matching-column { flex: 1 1 0%; }
.workbook-matching-header { font-size: 11px; font-weight: 600; color: var(--gs-text-light); padding-bottom: 6px; border-bottom: 1px solid var(--gs-border); margin-bottom: 6px; }
.workbook-matching-item { display: flex; align-items: center; gap: 8px; padding: 4px 0px; }
.workbook-matching-item.meaning { gap: 6px; }
.workbook-matching-letter { width: 18px; height: 18px; background-color: var(--gs-primary-dark); color: rgb(255, 255, 255); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.workbook-matching-word { font-size: 12px; font-weight: 600; color: var(--gs-text-dark); }
.workbook-matching-number { font-size: 12px; color: var(--gs-primary); font-weight: 600; }
.workbook-matching-meaning { font-size: 11px; color: var(--gs-text-medium); }
.workbook-fill-container { padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.workbook-fill-item { padding-bottom: 10px; border-bottom: 1px solid var(--gs-border); }
.workbook-fill-item:last-child { border-bottom: none; padding-bottom: 0px; }
.workbook-fill-sentence { font-size: 11px; color: var(--gs-text-dark); line-height: 1.5; margin: 0px 0px 8px; }
.workbook-fill-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.workbook-fill-choice { display: flex; align-items: center; gap: 6px; }
.workbook-choice-letter { width: 16px; height: 16px; background-color: var(--gs-page-bg); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--gs-text-medium); flex-shrink: 0; }
.workbook-choice-word { font-size: 11px; color: var(--gs-text-dark); }
.workbook-choice-grid { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.workbook-choice-item { display: flex; flex-direction: column; gap: 4px; }
.workbook-choice-question { display: flex; align-items: center; gap: 6px; }
.workbook-question-number { width: 18px; height: 18px; background-color: var(--gs-primary); color: rgb(255, 255, 255); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.workbook-question-word { font-size: 12px; font-weight: 700; color: var(--gs-text-dark); }
.workbook-choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding-left: 24px; }
.workbook-choice-option { display: flex; align-items: center; gap: 4px; }
.workbook-option-number { font-size: 11px; color: var(--gs-text-light); }
.workbook-option-word { font-size: 11px; color: var(--gs-text-medium); }
.reading-page-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 3px solid var(--gs-primary); margin-bottom: 16px; }
.reading-header-left { display: flex; align-items: center; gap: 10px; }
.reading-header-bar { width: 5px; height: 45px; background-color: var(--gs-primary-dark); border-radius: 2px; flex-shrink: 0; }
.reading-header-content { display: flex; align-items: baseline; gap: 8px; }
.reading-page-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 28px; font-weight: 800; color: var(--gs-primary-dark); line-height: 1; }
.reading-page-subtitle { font-family: "Poor Story", cursive; font-size: 18px; color: var(--gs-text-medium); line-height: 1; text-decoration: underline dotted; text-underline-offset: 3px; }
.reading-header-right { display: flex; align-items: center; gap: 16px; }
.reading-tip-text { font-family: "Poor Story", cursive; font-size: 12px; color: var(--gs-text-medium); text-align: right; line-height: 1.4; }
.reading-tip-highlight { color: var(--gs-primary); font-weight: 600; text-decoration: underline dotted; }
.reading-step-badge { display: flex; align-items: center; gap: 4px; background-color: var(--gs-primary-dark); color: rgb(255, 255, 255); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.reading-step-number { background-color: rgb(255, 255, 255); color: var(--gs-primary-dark); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.reading-content { display: flex; flex-direction: column; gap: 40px; }
.reading-passage-wrapper { margin-bottom: 32px; }
.reading-passage-section { margin-bottom: 0px; }
.reading-topic-header { font-size: 13px; font-weight: 700; color: var(--gs-primary-dark); margin-bottom: 8px; }
.reading-question-text { font-size: 12px; color: var(--gs-text-dark); margin-bottom: 10px; }
.reading-passage-container { display: flex; gap: 16px; }
.reading-passage-content { flex: 1 1 0%; }
.reading-passage-text { font-size: 11px; line-height: 1.7; color: var(--gs-text-dark); text-align: justify; margin: 0px 0px 12px; }
.reading-choices { display: flex; flex-direction: column; gap: 4px; }
.reading-choice-item { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; }
.reading-choice-number { color: var(--gs-text-medium); flex-shrink: 0; }
.reading-choice-text { color: var(--gs-text-dark); }
.reading-word-list-wide { width: 220px; flex-shrink: 0; border: 1px solid var(--gs-border); border-radius: 6px; overflow: hidden; }
.reading-word-list-header { background-color: color-mix(in srgb,var(--gs-primary) 10%,var(--gs-white)); padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--gs-text-dark); border-bottom: 1px solid var(--gs-border); }
.reading-word-list-items { padding: 4px 0px; }
.reading-word-list-item { display: flex; align-items: center; gap: 6px; padding: 3px 10px; }
.reading-word-number { font-size: 10px; color: var(--gs-primary); font-weight: 600; min-width: 18px; }
.reading-word-text { font-size: 10px; font-weight: 600; color: var(--gs-text-dark); min-width: 70px; }
.reading-word-blank { font-size: 9px; color: var(--gs-text-light); letter-spacing: 0.3px; white-space: nowrap; }
.reading-answer-section { margin-top: 24px; border: 1px solid var(--gs-border); border-radius: 6px; overflow: hidden; }
.reading-answer-header { background-color: color-mix(in srgb,var(--gs-primary) 10%,var(--gs-white)); padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--gs-text-dark); border-bottom: 1px solid var(--gs-border); }
.reading-answer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; }
.reading-answer-column { border-right: 1px solid var(--gs-border); }
.reading-answer-column:last-child { border-right: none; }
.reading-answer-topic-header { font-size: 11px; font-weight: 700; color: var(--gs-primary-dark); padding: 8px 12px; background-color: color-mix(in srgb,var(--gs-primary) 5%,var(--gs-white)); border-bottom: 1px solid var(--gs-border); }
.reading-answer-items { padding: 6px 0px; }
.reading-answer-item { display: grid; grid-template-columns: 24px 70px 1fr; gap: 8px; padding: 3px 12px; font-size: 10px; }
.reading-answer-number { color: var(--gs-text-light); }
.reading-answer-word { font-weight: 600; color: var(--gs-text-dark); }
.reading-answer-meaning { color: var(--gs-text-medium); }
@media print {
  .gatsaeng-page-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 800 !important; }
  .gatsaeng-page-subtitle { font-family: "Poor Story", cursive !important; }
  .gatsaeng-number { font-family: Dongle, sans-serif !important; font-weight: 700 !important; }
  .gatsaeng-footer-logo-gatsaeng, .gatsaeng-footer-logo-boca { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; }
  .gatsaeng-footer-text { font-family: "Poor Story", cursive !important; }
  .gatsaeng-footer-logo-gatsaeng, .gatsaeng-footer-logo-boca { font-weight: 900 !important; }
  .gatsaeng-word { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .gatsaeng-meaning { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .gatsaeng-meaning-description { font-family: "Poor Story", cursive !important; font-weight: 400 !important; }
  .gatsaeng-pronunciation { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; }
  .gatsaeng-derivative-word { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .gatsaeng-derivative-meaning { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; }
  .gatsaeng-derivative-etymology { font-family: "Poor Story", cursive !important; }
  .gatsaeng-badge { font-family: Dongle, sans-serif !important; font-weight: 700 !important; }
  .gatsaeng-section-content, .gatsaeng-section-content.example { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; }
  .gatsaeng-section-content.tip { font-family: "Poor Story", cursive !important; }
  .gatsaeng-section-content.definition { font-family: "Times New Roman", Times, serif !important; }
  .gatsaeng-confusable-word { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .gatsaeng-confusable-meaning { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; }
  .gatsaeng-syn-ant-word { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .gatsaeng-syn-ant-meaning { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; }
  .gatsaeng-example-word { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .gatsaeng-confusable-vs, .gatsaeng-highlight, .gatsaeng-page-number-circle, .gatsaeng-step-badge { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .gatsaeng-step-number { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .spoiler-page-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 800 !important; }
  .spoiler-page-subtitle, .spoiler-tip-text { font-family: "Poor Story", cursive !important; }
  .spoiler-step-badge { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .spoiler-step-number, .spoiler-highlight-word { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .spoiler-word-number, .spoiler-word-text { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .workbook-page-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 800 !important; }
  .workbook-page-subtitle, .workbook-tip-text { font-family: "Poor Story", cursive !important; }
  .workbook-tip-highlight, .workbook-step-badge { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .workbook-step-number, .workbook-section-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .workbook-matching-header { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .workbook-matching-letter { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .workbook-matching-word, .workbook-matching-number, .workbook-choice-letter { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .workbook-question-number, .workbook-question-word { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .reading-page-title { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 800 !important; }
  .reading-page-subtitle, .reading-tip-text { font-family: "Poor Story", cursive !important; }
  .reading-tip-highlight, .reading-step-badge { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .reading-step-number, .reading-topic-header { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .reading-word-list-header, .reading-word-number, .reading-word-text { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .reading-answer-header, .reading-answer-topic-header { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }
  .reading-answer-word { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; }
  .gatsaeng-container, .gatsaeng-page-header, .gatsaeng-card, .gatsaeng-footer { print-color-adjust: exact !important; }
  .gatsaeng-card { break-inside: avoid !important; }
  .a4-page:has(.gatsaeng-container) { break-after: page !important; }
  .a4-page:has(.gatsaeng-container):last-child { break-after: auto !important; }
  .gatsaeng-page-header { border-bottom-color: var(--gs-primary) !important; }
  .page-content > div:has(.gatsaeng-card) { border-bottom-width: 1px !important; border-bottom-style: solid !important; border-bottom-color: rgba(var(--gs-primary-dark-rgb),.25) !important; print-color-adjust: exact !important; }
  .gatsaeng-step-badge { background-color: var(--gs-primary-dark) !important; }
  .gatsaeng-left-column { background-color: color-mix(in srgb,var(--gs-primary) 8%,transparent) !important; }
  .gatsaeng-badge { background-color: transparent !important; color: var(--gs-primary-dark) !important; }
  .gatsaeng-footer { background-color: var(--gs-white) !important; }
  .gatsaeng-page-number-circle { background-color: var(--gs-page-bg) !important; }
}
.gatsaeng-day-separator { display: flex; align-items: center; gap: 12px; margin: 24px 0px; padding: 12px 0px; }
.gatsaeng-day-separator-line { flex: 1 1 0%; height: 2px; background: var(--gs-primary-main); opacity: 0.3; }
.gatsaeng-day-separator-text { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 18px; font-weight: 700; color: var(--gs-primary-dark); white-space: nowrap; }
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
  *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: rotateX(0); --tw-rotate-y: rotateY(0); --tw-rotate-z: rotateZ(0); --tw-skew-x: skewX(0); --tw-skew-y: skewY(0); --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; }
}
}
@layer theme {
  :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-100: oklch(.936 .032 17.717); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-800: oklch(.444 .177 26.899); --color-orange-50: oklch(.98 .016 73.684); --color-orange-200: oklch(.901 .076 70.697); --color-amber-50: oklch(.987 .022 95.277); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-600: oklch(.511 .262 276.966); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-xs: 20rem; --container-md: 28rem; --container-lg: 32rem; --container-2xl: 42rem; --container-4xl: 56rem; --container-5xl: 64rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -.025em; --tracking-wide: .025em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --radius-xs: .125rem; --radius-2xl: 1rem; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-sm: 8px; --blur-md: 12px; --blur-3xl: 64px; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var(--font-sans--font-variation-settings); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); }
}
:root { --font-size: 16px; --font-scale: 1; --background: #fff; --foreground: oklch(.145 0 0); --card: #fff; --card-foreground: oklch(.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(.145 0 0); --primary: #030213; --primary-foreground: oklch(1 0 0); --secondary: oklch(.95 .0058 264.53); --secondary-foreground: #030213; --muted: #ececf0; --muted-foreground: #717182; --accent: #e9ebef; --accent-foreground: #030213; --destructive: #d4183d; --destructive-foreground: #fff; --border: #0000001a; --input: transparent; --input-background: #f3f3f5; --switch-background: #cbced4; --font-weight-medium: 500; --font-weight-normal: 400; --ring: oklch(.708 0 0); --chart-1: oklch(.646 .222 41.116); --chart-2: oklch(.6 .118 184.704); --chart-3: oklch(.398 .07 227.392); --chart-4: oklch(.828 .189 84.429); --chart-5: oklch(.769 .188 70.08); --radius: .625rem; --sidebar: oklch(.985 0 0); --sidebar-foreground: oklch(.145 0 0); --sidebar-primary: #030213; --sidebar-primary-foreground: oklch(.985 0 0); --sidebar-accent: oklch(.97 0 0); --sidebar-accent-foreground: oklch(.205 0 0); --sidebar-border: oklch(.922 0 0); --sidebar-ring: oklch(.708 0 0); }
html { font-size: var(--font-size); height: 100%; overflow: hidden; }
body { height: 100%; overflow: hidden; }
@media print {
  @page { size: a4; margin: 0px; }
  body { counter-reset: page 0; }
  .a4-page { counter-increment: page 1; break-after: page !important; }
  .a4-page:last-child { break-after: auto !important; }
  .page-number::after { content: counter(page); }
  html { height: auto !important; overflow: visible !important; }
  body { print-color-adjust: exact; height: auto !important; overflow: visible !important; font-family: "Pretendard Variable", Pretendard, sans-serif !important; }
  * { overflow: visible !important; font-family: "Pretendard Variable", Pretendard, sans-serif !important; }
  .vocabulary-card, table, tr, .test-row, .simple-row, .table-row { break-inside: avoid !important; orphans: 999 !important; widows: 999 !important; display: block !important; overflow: visible !important; }
  .vocabulary-card *, table *, tr *, .test-row *, .simple-row *, .table-row * { overflow: visible !important; }
  .page-content { flex-direction: column !important; gap: 0.5rem !important; display: flex !important; }
  .page-container { width: 100% !important; box-shadow: none !important; gap: 0px !important; margin: 0px !important; padding: 0px !important; }
  .a4-page { width: 210mm !important; height: 297mm !important; min-height: 297mm !important; box-shadow: none !important; background: rgb(255, 255, 255) !important; margin: 0px !important; padding: 17mm 20mm 20mm !important; overflow: visible !important; position: relative !important; }
  .a4-page::after { display: none; }
}
@media screen {
  .page-container { flex-direction: column; gap: 20px; max-width: 210mm; margin: 0px auto; display: flex; }
  .a4-page { background: var(--palette-bg, #fff); flex-direction: column; width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm; margin: 0px auto; padding: 17mm 20mm 20mm; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; font-family: "Pretendard Variable", Pretendard, sans-serif; }
  .page-content { flex-direction: column; gap: 0.5rem; display: flex; }
  .page-footer { position: absolute; bottom: 22mm; left: 20mm; right: 20mm; }
  .page-number-bottom-left { color: rgb(102, 102, 102); font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 11px; position: absolute; bottom: 10mm; left: 20mm; }
  .page-number-bottom-right { color: rgb(102, 102, 102); font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 11px; position: absolute; bottom: 10mm; right: 20mm; }
}
@media print {
  .page-footer { position: absolute; bottom: 22mm; left: 20mm; right: 20mm; }
  .page-number-bottom-left { color: rgb(102, 102, 102); font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 11px; position: absolute; bottom: 10mm; left: 20mm; }
  .page-number-bottom-right { color: rgb(102, 102, 102); font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 11px; position: absolute; bottom: 10mm; right: 20mm; }
}
[data-sonner-toaster] { width: auto !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.animate-shake { animation: 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 1 normal both running shake; }
.overflow-x-auto::-webkit-scrollbar { display: none; }
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-rotate-x { syntax: "*"; inherits: false; initial-value: rotateX(0); }
@property --tw-rotate-y { syntax: "*"; inherits: false; initial-value: rotateY(0); }
@property --tw-rotate-z { syntax: "*"; inherits: false; initial-value: rotateZ(0); }
@property --tw-skew-x { syntax: "*"; inherits: false; initial-value: skewX(0); }
@property --tw-skew-y { syntax: "*"; inherits: false; initial-value: skewY(0); }
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-gradient-position { syntax: "*"; inherits: false; }
@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-tracking { syntax: "*"; inherits: false; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-backdrop-blur { syntax: "*"; inherits: false; }
@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }
@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }
@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }
@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-backdrop-invert { syntax: "*"; inherits: false; }
@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }
@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }
@keyframes pulse { 
  50% { opacity: 0.5; }
}
@keyframes enter { 
  0% { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); }
}
@keyframes exit { 
  100% { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); }
}
.underline { text-decoration-line: underline; }
.underline-offset-2 { text-underline-offset: 2px; }
.font-bold { font-weight: 700; }
.header-label { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 16px 40px !important; min-width: 200px !important; background: linear-gradient(135deg,var(--badge-bg, #f0f4f8) 0%,#ffffff 50%,var(--badge-bg, #f0f4f8) 100%) !important; border-radius: 50px !important; box-shadow: 0 4px 20px #00000014,0 0 0 1px var(--badge-border, #e2e8f0),inset 0 1px #fffc !important; position: relative !important; overflow: hidden !important; }
.header-label-text { font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--badge-text, #1e3a5f) !important; text-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px !important; font-family: Inter, Pretendard, sans-serif !important; line-height: 1 !important; }
:root { --font-size: 16px; --background: #ffffff; --foreground: oklch(.145 0 0); --card: #ffffff; --card-foreground: oklch(.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(.145 0 0); --primary: #030213; --primary-foreground: oklch(1 0 0); --secondary: oklch(.95 .0058 264.53); --secondary-foreground: #030213; --muted: #ececf0; --muted-foreground: #717182; --accent: #e9ebef; --accent-foreground: #030213; --destructive: #d4183d; --destructive-foreground: #ffffff; --border: rgba(0, 0, 0, .1); --input: transparent; --input-background: #f3f3f5; --switch-background: #cbced4; --font-weight-medium: 500; --font-weight-normal: 400; --ring: oklch(.708 0 0); --chart-1: oklch(.646 .222 41.116); --chart-2: oklch(.6 .118 184.704); --chart-3: oklch(.398 .07 227.392); --chart-4: oklch(.828 .189 84.429); --chart-5: oklch(.769 .188 70.08); --radius: .625rem; --sidebar: oklch(.985 0 0); --sidebar-foreground: oklch(.145 0 0); --sidebar-primary: #030213; --sidebar-primary-foreground: oklch(.985 0 0); --sidebar-accent: oklch(.97 0 0); --sidebar-accent-foreground: oklch(.205 0 0); --sidebar-border: oklch(.922 0 0); --sidebar-ring: oklch(.708 0 0); }
.dark { --background: oklch(.145 0 0); --foreground: oklch(.985 0 0); --card: oklch(.145 0 0); --card-foreground: oklch(.985 0 0); --popover: oklch(.145 0 0); --popover-foreground: oklch(.985 0 0); --primary: oklch(.985 0 0); --primary-foreground: oklch(.205 0 0); --secondary: oklch(.269 0 0); --secondary-foreground: oklch(.985 0 0); --muted: oklch(.269 0 0); --muted-foreground: oklch(.708 0 0); --accent: oklch(.269 0 0); --accent-foreground: oklch(.985 0 0); --destructive: oklch(.396 .141 25.723); --destructive-foreground: oklch(.637 .237 25.331); --border: oklch(.269 0 0); --input: oklch(.269 0 0); --ring: oklch(.439 0 0); --font-weight-medium: 500; --font-weight-normal: 400; --chart-1: oklch(.488 .243 264.376); --chart-2: oklch(.696 .17 162.48); --chart-3: oklch(.769 .188 70.08); --chart-4: oklch(.627 .265 303.9); --chart-5: oklch(.645 .246 16.439); --sidebar: oklch(.205 0 0); --sidebar-foreground: oklch(.985 0 0); --sidebar-primary: oklch(.488 .243 264.376); --sidebar-primary-foreground: oklch(.985 0 0); --sidebar-accent: oklch(.269 0 0); --sidebar-accent-foreground: oklch(.985 0 0); --sidebar-border: oklch(.269 0 0); --sidebar-ring: oklch(.439 0 0); }
html { font-size: var(--font-size); overflow: hidden; height: 100%; }
body { overflow: hidden; height: 100%; }
@media print {
  @page { size: a4; margin: 0px; }
  body { counter-reset: page 0; }
  .a4-page { counter-increment: page 1; break-after: page !important; }
  .a4-page:last-child { break-after: auto !important; }
  .page-number::after { content: counter(page); }
  html { height: auto !important; overflow: visible !important; }
  body { print-color-adjust: exact; height: auto !important; overflow: visible !important; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif !important; }
  * { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif !important; }
  :not(table):not(thead):not(tbody):not(tr):not(td):not(th) { overflow: visible !important; }
  .vocabulary-card { break-inside: avoid !important; display: block !important; overflow: visible !important; orphans: 999 !important; widows: 999 !important; }
  .vocabulary-card * { overflow: visible !important; }
  .page-content { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; }
  .page-container { width: 100% !important; margin: 0px !important; padding: 0px !important; box-shadow: none !important; gap: 0px !important; }
  .a4-page { width: 210mm !important; min-height: 297mm !important; max-height: 297mm !important; height: 297mm !important; margin: 0px !important; padding: 20mm !important; box-shadow: none !important; background: rgb(255, 255, 255) !important; overflow: visible !important; }
  .a4-page::after { display: none; }
}
.a4-measure-container { position: absolute; left: -9999px; top: 0px; pointer-events: none; width: 210mm; padding: 20mm 15mm 15mm; box-sizing: border-box; height: auto; max-height: none; min-height: auto; overflow: visible; background: rgb(255, 255, 255); display: flex; flex-direction: column; }
.a4-measure-container .page-content { display: flex; flex-direction: column; gap: 0.5rem; }
@media screen {
  .page-container { max-width: 210mm; margin: 0px auto; display: flex; flex-direction: column; gap: 20px; }
  .a4-page { width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm; padding: 20mm 15mm 15mm; margin: 0px auto; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; position: relative; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
  .page-content { display: flex; flex-direction: column; gap: 0.5rem; }
  .page-number-bottom-left { position: absolute; bottom: 8mm; left: 15mm; font-size: 11px; font-family: Pretendard; color: rgb(102, 102, 102); }
  .page-number-bottom-right { position: absolute; bottom: 8mm; right: 15mm; font-size: 11px; font-family: Pretendard; color: rgb(102, 102, 102); }
}
@media print {
  .page-number-bottom-left { position: absolute; bottom: 10mm; left: 20mm; font-size: 11px; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif; color: rgb(102, 102, 102); }
  .page-number-bottom-right { position: absolute; bottom: 10mm; right: 20mm; font-size: 11px; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif; color: rgb(102, 102, 102); }
}
[data-sonner-toaster] { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; }
[data-sonner-toast] { box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 40px !important; }
@keyframes shake { 
  0%, 100% { transform: translate(0px); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-8px); }
  20%, 40%, 60%, 80% { transform: translate(8px); }
}
.animate-shake { animation: 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 1 normal both running shake; }
.question-group-layout { display: flex; gap: 20px; margin-bottom: 20px; align-items: flex-start; break-inside: avoid; }
.question-row-with-sidebar { display: flex; gap: 20px; align-items: stretch; padding-bottom: 12px; border-bottom: 1px solid rgb(229, 229, 229); break-inside: avoid; }
.questions-column { flex: 0 0 50%; max-width: 50%; overflow-wrap: break-word; }
.sidebar-column { flex: 0 0 calc(50% - 20px); max-width: calc(50% - 20px); }
.question-compact { margin-bottom: 12px; break-inside: avoid; }
.q-instruction { color: rgb(51, 51, 51); font-weight: 400; margin-bottom: 6px; line-height: 1.4; text-align: justify; }
.q-instruction.q-instruction-common { font-weight: 600; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgb(221, 221, 221); }
.q-insert-sentence { background: rgba(0, 0, 0, 0.04); padding: 8px 12px; margin: 8px 0px 12px; color: rgb(51, 51, 51); font-weight: 700; line-height: 1.6; text-align: justify; }
.question-row { display: flex; gap: 10px; margin-bottom: 8px; width: 100%; align-items: flex-start; break-inside: avoid; }
.q-number { display: inline-flex; align-items: flex-start; justify-content: center; min-width: 28px; color: var(--badge-text, #9b59b6); font-weight: 700; flex-shrink: 0; line-height: 1.4; }
.q-number.q-number-vertical { flex-direction: column; background: none; min-width: 28px; height: auto; padding: 0px; line-height: 1.2; }
.q-number-separator { font-size: 0.7em; color: rgb(153, 153, 153); transform: rotate(90deg); display: inline-block; }
.grouped-question-item { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgb(221, 221, 221); }
.grouped-question-item:first-child { margin-top: 8px; padding-top: 0px; border-top: none; }
.grouped-question-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.grouped-question-num { font-weight: 700; color: var(--badge-text, #9b59b6); flex-shrink: 0; }
.grouped-question-instruction { color: rgb(85, 85, 85); font-size: 0.9em; }
.q-content { flex: 1 1 0%; min-width: 0px; overflow-wrap: break-word; word-break: break-word; }
.q-passage { color: rgb(51, 51, 51); margin-bottom: 8px; text-align: justify; word-break: break-word; overflow-wrap: break-word; border-left: 2px solid var(--badge-text, #9b59b6); padding-left: 8px; line-height: 1.6; }
.q-choices { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.q-choices.q-choices-horizontal { flex-flow: wrap; gap: 4px 16px; }
.q-choice { color: rgb(51, 51, 51); white-space: normal; word-break: break-word; display: flex; align-items: flex-start; gap: 4px; }
.q-choice-label { flex-shrink: 0; width: 1.1em; }
.q-choice-text { flex: 1 1 0%; text-align: justify; word-spacing: -0.5px; }
.q-choices-horizontal .q-choice { display: inline; }
.q-choice.correct { font-weight: 600; color: var(--badge-text, #9b59b6); }
.myvoca-sidebar { height: 100%; display: flex; flex-direction: column; }
.myvoca-header { text-align: center; margin-bottom: 6px; }
.myvoca-title { font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--badge-text, #9b59b6); }
.myvoca-list { display: flex; flex-direction: column; gap: 6px; }
.myvoca-item { display: flex; align-items: flex-end; gap: 0px; border-bottom: 1px dotted rgb(187, 187, 187); height: 18px; }
.myvoca-num { color: var(--badge-text, #9b59b6); font-size: 9px; font-weight: 600; width: 14px; flex-shrink: 0; height: 18px; line-height: 18px; margin-right: 2px; }
.myvoca-word-box { width: 85px; height: 18px; flex-shrink: 0; }
.myvoca-arrow { color: rgb(153, 153, 153); font-size: 8px; flex-shrink: 0; margin: 0px 2px; height: 18px; line-height: 18px; }
.myvoca-meaning-line { flex: 1 1 0%; min-width: 15px; height: 18px; }
.analysis-sidebar { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; height: 100%; }
.analysis-section-title { color: var(--badge-text, #9b59b6); font-weight: 500; margin-top: 8px; }
.analysis-section-title:first-child { margin-top: 0px; }
.analysis-text { color: rgb(102, 102, 102); line-height: 1.4; }
.analysis-box-sm { min-height: 40px; background: rgb(248, 248, 248); border-radius: 4px; }
.analysis-box-md { min-height: 60px; background: rgb(248, 248, 248); border-radius: 4px; }
.analysis-box-lg { min-height: 80px; background: rgb(248, 248, 248); border-radius: 4px; flex: 1 1 0%; }
.analysis-sidebar > .analysis-box-sm:last-child, .analysis-sidebar > .analysis-box-md:last-child, .analysis-sidebar > .analysis-box-lg:last-child { flex: 1 1 0%; }
@media print {
  .question-group-layout { display: flex !important; gap: 20px !important; }
  .questions-column, .sidebar-column { flex: 5 1 0% !important; }
  .analysis-box-sm, .analysis-box-md, .analysis-box-lg { background: rgb(248, 248, 248) !important; print-color-adjust: exact !important; }
  .myvoca-item { border-bottom: 1px dashed rgb(153, 153, 153) !important; }
  .question-compact, .question-row, .question-row-with-sidebar, .q-choices { break-inside: avoid !important; }
}
.key-vocabulary-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.vocab-item { display: inline-flex; gap: 4px; align-items: baseline; }
.vocab-item strong { font-weight: 600; }
.explanation-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.category-summary-table { margin-top: 8px; display: flex; justify-content: center; }
.category-summary-table table { display: table; width: auto; border-collapse: collapse; border: 1px solid rgb(221, 221, 221); }
.category-summary-table tbody { display: table-row-group; }
.category-summary-table tr { display: table-row; border-bottom: 1px solid rgb(221, 221, 221); }
.category-summary-table tr:last-child { border-bottom: none; }
.category-summary-table td { display: table-cell; padding: 3px 12px; font-size: 9px; white-space: nowrap; }
.category-summary-table .category-name-cell { font-weight: 600; color: rgb(51, 51, 51); background: rgba(0, 0, 0, 0.03); border-right: 1px solid rgb(221, 221, 221); }
.category-summary-table .category-count-cell { font-weight: 500; color: rgb(102, 102, 102); border-right: 1px solid rgb(221, 221, 221); text-align: center; }
.category-summary-table .category-count-cell:last-child, .category-summary-table .category-count-cell.empty { border-right: none; }
.category-summary-table .category-name-cell.empty, .category-summary-table .category-count-cell.empty { background: transparent; }
.passage-summary { background: rgb(248, 245, 240); border-left: 2px solid var(--badge-text, #9b59b6); padding: 8px 12px; font-size: 8.5px; line-height: 1.5; border-radius: 0px 4px 4px 0px; }
.passage-summary .summary-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.passage-summary .summary-row:last-child { margin-bottom: 0px; }
.passage-summary .summary-label { font-weight: 600; color: var(--badge-text, #9b59b6); min-width: 28px; flex-shrink: 0; }
.passage-summary .summary-value { color: rgb(51, 51, 51); flex: 1 1 0%; }
.passage-summary .summary-divider { color: rgb(204, 204, 204); margin: 0px 4px; }
.quick-answer-table { flex-shrink: 0; margin-bottom: 16px; background: rgba(0, 0, 0, 0.024); border-radius: 8px; padding: 10px 12px; }
.quick-answer-title { text-align: right; font-size: 10px; font-weight: 500; letter-spacing: 1px; color: rgb(153, 153, 153); margin-bottom: 6px; }
.quick-answer-grid { border-collapse: collapse; width: auto; border: 1px solid rgb(204, 204, 204); }
.quick-answer-grid tr { border-bottom: 1px solid rgb(204, 204, 204); }
.quick-answer-grid tr:last-child { border-bottom: none; }
.quick-answer-cell { padding: 3px 4px; text-align: center; border-right: 1px solid rgb(204, 204, 204); white-space: nowrap; background: transparent; width: 38px; box-sizing: border-box; }
.quick-answer-cell:last-child { border-right: none; }
.quick-answer-cell:nth-child(2n+1) { background: transparent; }
.quick-answer-cell:nth-child(2n) { background: transparent; }
.quick-answer-num { font-size: 10px; font-weight: 600; color: rgb(51, 51, 51); display: inline; margin-right: 4px; }
.quick-answer-circle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--badge-text, #9b59b6); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; line-height: 1; }
.page-content.two-column-layout { column-fill: auto; overflow: hidden; display: block !important; columns: 2 !important; column-gap: 24px !important; height: 937px !important; }
.vertical-block { break-inside: avoid; margin-bottom: 12px; }
.vertical-block.question-block { background: transparent; border-radius: 0px; padding: 12px 0px 0px; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid rgb(221, 221, 221); margin-top: 8px; }
.vertical-block.question-block:first-child { border-top: none; padding-top: 0px; margin-top: 0px; }
.vertical-block.question-block .explanation-question, .vertical-block.passage-block .explanation-question { flex: 1 1 0%; max-width: 100%; }
.vertical-block.passage-block { background: transparent; border-radius: 0px; padding: 0px; border: none; }
.vertical-block.question-block-unit { background: transparent; padding: 0px; }
.vertical-block.question-block-unit .question-block-header { margin-bottom: 8px; }
.vertical-block.question-block-unit .question-number { font-weight: 700; color: var(--badge-text, #9b59b6); }
.vertical-block.question-block-unit .question-block-content { line-height: 1.6; }
.vertical-block.explanation-block-unit { padding: 0px; margin-bottom: 16px; }
.vertical-block.grouped-passage-block { background: rgb(245, 248, 250); border-radius: 6px; padding: 12px; border: 1px solid rgb(208, 215, 222); margin-bottom: 16px; }
.block-question-header { margin-bottom: 8px; }
.block-question-number { font-weight: 700; color: var(--badge-text, #9b59b6); }
.block-question-number.grouped { color: var(--primary, #1e3a5f); }
.block-question-content { line-height: 1.6; }
.vertical-block.answer-header-block { background: rgb(240, 244, 248); border-radius: 4px; padding: 8px 12px; border-left: 3px solid var(--badge-text, #9b59b6); }
.explanation-card { display: flex; gap: 32px; margin-bottom: 20px; break-inside: avoid; }
.explanation-card.question-unit { break-inside: avoid; margin-bottom: 16px; display: block !important; }
.explanation-card.question-unit .explanation-question, .explanation-card.question-unit .explanation-content { flex: 0 0 auto !important; max-width: 100% !important; width: 100% !important; }
.explanation-card.question-unit .explanation-question { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgb(229, 229, 229); }
.explanation-card.question-unit .explanation-content { padding-left: 0px; }
.explanation-question { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); display: flex; gap: 8px; }
.explanation-question .question-number { font-weight: 700; color: var(--badge-text, #9b59b6); flex-shrink: 0; min-width: 28px; }
.explanation-question .question-number-vertical { display: flex; flex-direction: column; align-items: center; font-weight: 700; color: var(--badge-text, #9b59b6); flex-shrink: 0; min-width: 28px; line-height: 1.2; }
.explanation-question .question-number-vertical .number-separator-vertical { font-size: 0.7em; color: rgb(153, 153, 153); transform: rotate(90deg); display: inline-block; }
.explanation-question .question-content { flex: 1 1 0%; min-width: 0px; }
.explanation-question .question-passage { color: rgb(51, 51, 51); margin-bottom: 8px; text-align: justify; word-break: break-word; }
.explanation-question .question-choices { display: flex; flex-direction: column; gap: 2px; }
.explanation-question .question-choice { color: rgb(51, 51, 51); font-size: calc(9.5px * var(--font-scale, 1)); }
.explanation-question .question-choice.correct { font-weight: 700; color: var(--badge-text, #9b59b6); }
.explanation-content { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); }
.explanation-section { display: flex; flex-direction: column; gap: 12px; }
.explanation-answer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgb(238, 238, 238); }
.answer-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.answer-label-group { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
.answer-label { font-weight: 700; color: var(--badge-text, #9b59b6); font-size: 11px; white-space: nowrap; }
.answer-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--badge-text, #9b59b6); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; line-height: 1; }
.answer-text { font-size: calc(11px * var(--font-scale, 1)); color: rgb(0, 0, 0); font-weight: 700; margin-left: 4px; }
.answer-change { font-size: calc(11px * var(--font-scale, 1)); color: rgb(0, 0, 0); font-weight: 600; margin-left: 6px; }
.answer-category { font-size: 9px; color: rgb(153, 153, 153); font-weight: 500; }
.answer-right { display: flex; align-items: center; gap: 8px; }
.regenerate-controls { display: flex; align-items: center; gap: 4px; }
.hint-input { width: 120px; padding: 2px 8px; font-size: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 4px; outline: none; transition: border-color 0.2s; }
.hint-input:focus { border-color: var(--badge-text, #9b59b6); }
.hint-input:disabled { background-color: rgb(245, 245, 245); cursor: not-allowed; }
.regenerate-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; border: 1px solid rgb(221, 221, 221); border-radius: 4px; background: rgb(255, 255, 255); cursor: pointer; color: rgb(102, 102, 102); transition: 0.2s; }
.regenerate-btn:hover:not(:disabled) { border-color: var(--badge-text, #9b59b6); color: var(--badge-text, #9b59b6); background: rgb(249, 245, 255); }
.regenerate-btn:disabled { cursor: not-allowed; opacity: 0.5; }
@media print {
  .no-print { display: none !important; }
}
.answer-word { font-weight: 600; color: rgb(51, 51, 51); font-size: 12px; }
.vocab-answer-highlight { display: flex; align-items: center; gap: 8px; background: var(--badge-bg, #fdf2f8); padding: 6px 12px; border-radius: 4px; margin: 8px 0px; border: 1px solid var(--badge-border, #fbcfe8); }
.vocab-answer-label, .vocab-answer-text { font-size: 12px; font-weight: 700; color: var(--badge-text, #9b59b6); }
.grammar-header { flex-wrap: wrap; }
.grammar-header .answer-label { font-weight: 700; color: var(--badge-text, #9b59b6); font-size: 11px; }
.grammar-header .answer-change { font-weight: 500; color: rgb(51, 51, 51); font-size: 11px; }
.grammar-header .test-point { font-size: 11px; color: var(--badge-text, #9b59b6); margin-left: auto; }
.explanation-block { display: flex; flex-direction: column; gap: 4px; }
.explanation-block-title { font-size: 11px; font-weight: 700; color: var(--badge-text, #9b59b6); display: flex; align-items: center; gap: 4px; }
.explanation-block-title.highlight { background: linear-gradient(to right,var(--badge-bg, #f3e8ff),transparent); padding: 4px 8px; border-radius: 4px; }
.block-icon { font-size: 12px; }
.explanation-block-content { font-size: calc(9.5px * var(--font-scale, 1)); color: rgb(51, 51, 51); line-height: 1.6; padding-left: 4px; text-align: justify; }
.editable-content { cursor: text; outline: none; border: 1px dashed rgb(59, 130, 246); background-color: rgba(59, 130, 246, 0.05); border-radius: 4px; padding: 4px 6px; min-height: 20px; }
.editable-content:focus { border-color: rgb(37, 99, 235); background-color: rgba(59, 130, 246, 0.1); box-shadow: rgba(59, 130, 246, 0.2) 0px 0px 0px 2px; }
.editable-content:hover { background-color: rgba(59, 130, 246, 0.08); }
@media print {
  .editable-content { border: none; background-color: transparent; padding: 0px; }
}
.placeholder-text { color: rgb(153, 153, 153); font-style: italic; }
.synonym-table { width: 100%; border-collapse: separate; border-spacing: 0px; font-size: calc(10px * var(--font-scale, 1)); table-layout: fixed; }
.synonym-table tbody { display: table-row-group; }
.synonym-table tr { display: table-row; }
.synonym-table td { display: table-cell; padding: 4px 8px; border-bottom: 1px solid rgb(229, 229, 229); vertical-align: top; box-sizing: border-box; }
.synonym-table tr:last-child td { border-bottom: none; }
.synonym-table td.synonym-english, td.synonym-english, .synonym-english { width: 40%; color: rgb(0, 0, 0); font-weight: 700; }
.synonym-table td.synonym-korean, td.synonym-korean, .synonym-korean { width: 60%; color: rgb(51, 51, 51); padding-left: 20px; text-align: left; }
.wrong-explanations { display: flex; flex-direction: column; gap: 6px; }
.wrong-item { display: flex; gap: 6px; }
.wrong-label { flex-shrink: 0; font-weight: 700; color: var(--badge-text, #9b59b6); min-width: 24px; }
.wrong-text { flex: 1 1 0%; text-align: justify; }
.choice-explanations { display: flex; flex-direction: column; gap: 6px; }
.choice-item { display: flex; gap: 3px; }
.choice-item.correct { background: var(--badge-bg, #f3e8ff); padding: 4px 6px; border-radius: 4px; margin: -4px -6px; }
.choice-label { flex-shrink: 0; font-weight: 700; color: var(--badge-text, #9b59b6); min-width: 12px; }
.choice-text { flex: 1 1 0%; text-align: justify; }
.position-explanations { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 8px; background: rgb(250, 250, 250); border-radius: 4px; }
.position-item { display: flex; gap: 6px; }
.position-label { flex-shrink: 0; font-weight: 700; color: rgb(102, 102, 102); min-width: 24px; }
.position-text { flex: 1 1 0%; text-align: justify; }
.conclusion { font-weight: 500; color: var(--badge-text, #9b59b6); padding: 8px; background: var(--badge-bg, #f3e8ff); border-radius: 4px; }
.question-num-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 4px; background: var(--badge-bg, #f3e8ff); color: var(--badge-text, #9b59b6); font-size: 14px; font-weight: 700; margin-right: 8px; }
.explanation-card.grouped { padding-bottom: 20px; }
.grouped-question-choices { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgb(221, 221, 221); }
.grouped-question-choices:first-of-type { margin-top: 16px; }
.grouped-question-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.grouped-question-num { font-weight: 700; color: var(--badge-text, #9b59b6); font-size: 12px; }
.grouped-question-instruction { font-size: calc(10px * var(--font-scale, 1)); color: rgb(102, 102, 102); }
.grouped-explanation-item { padding-top: 12px; }
.grouped-explanation-item:first-child { padding-top: 0px; }
.grouped-explanation-item.mt-4 { margin-top: 16px; }
.question-passage-translation { font-style: normal; border-left: 2px solid var(--badge-text, #9b59b6); padding-left: 8px; background: linear-gradient(to right, rgba(139, 92, 246, 0.03), transparent); text-align: justify; }
.question-choice-translated { display: flex; flex-direction: row; align-items: baseline; gap: 4px; padding: 4px 6px; margin-bottom: 4px; border-radius: 4px; background: rgb(250, 250, 250); }
.question-choice-translated.correct { background: var(--badge-bg, #f3e8ff); }
.question-choice-translated .choice-label { font-weight: 700; color: var(--badge-text, #9b59b6); font-size: 11px; }
.question-choice-translated .choice-text { display: flex; flex-direction: column; gap: 1px; }
.question-choice-translated .choice-english { color: rgb(136, 136, 136); font-size: calc(8.5px * var(--font-scale, 1)); text-align: justify; }
.question-choice-translated .choice-korean { color: rgb(51, 51, 51); font-size: calc(9.5px * var(--font-scale, 1)); text-align: justify; }
.question-choice-translated .choice-korean-only { color: rgb(51, 51, 51); text-align: justify; }
@media print {
  .explanation-card { break-inside: avoid !important; }
  .explanation-header { display: flex !important; }
  .quick-answer-table { print-color-adjust: exact !important; }
  .category-summary-table { margin-top: 8px !important; display: flex !important; justify-content: center !important; }
  .category-summary-table table { width: auto !important; border-collapse: collapse !important; border: 1px solid rgb(221, 221, 221) !important; display: table !important; }
  .category-summary-table tbody { display: table-row-group !important; }
  .category-summary-table tr { display: table-row !important; border-bottom: 1px solid rgb(221, 221, 221) !important; }
  .category-summary-table tr:last-child { border-bottom: none !important; }
  .category-summary-table td { display: table-cell !important; padding: 3px 12px !important; font-size: 9px !important; white-space: nowrap !important; }
  .category-summary-table .category-name-cell { font-weight: 600 !important; color: rgb(51, 51, 51) !important; background: rgba(0, 0, 0, 0.03) !important; border-right: 1px solid rgb(221, 221, 221) !important; print-color-adjust: exact !important; }
  .category-summary-table .category-count-cell { font-weight: 500 !important; color: rgb(102, 102, 102) !important; border-right: 1px solid rgb(221, 221, 221) !important; text-align: center !important; }
  .category-summary-table .category-count-cell:last-child { border-right: none !important; }
  .category-summary-table .category-name-cell.empty, .category-summary-table .category-count-cell.empty { background: transparent !important; border-right: none !important; }
  .quick-answer-grid { border-collapse: collapse !important; display: table !important; width: auto !important; border: 1px solid rgb(204, 204, 204) !important; }
  .quick-answer-grid tbody { display: table-row-group !important; }
  .quick-answer-grid tr { display: table-row !important; border-bottom: 1px solid rgb(204, 204, 204) !important; }
  .quick-answer-grid tr:last-child { border-bottom: none !important; }
  .quick-answer-cell { display: table-cell !important; padding: 4px 8px !important; border-right: 1px solid rgb(204, 204, 204) !important; vertical-align: middle !important; white-space: nowrap !important; }
  .quick-answer-cell:last-child { border-right: none !important; }
  .answer-badge, .question-num-badge, .explanation-block-title, .choice-item.correct, .conclusion, .question-choice-translated.correct, .question-passage-translation { print-color-adjust: exact !important; }
  .answer-badge, .quick-answer-circle { -webkit-text-stroke: 0.3px currentcolor; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; line-height: 1 !important; }
  .answer-text, .vocab-answer-text { -webkit-text-stroke: 0.3px currentcolor; font-weight: 700 !important; }
  .synonym-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; display: table !important; }
  .synonym-table tbody { display: table-row-group !important; }
  .synonym-table tr { display: table-row !important; break-inside: avoid !important; }
  .synonym-table td { display: table-cell !important; padding: 4px 8px !important; border-bottom: 1px solid rgb(229, 229, 229) !important; vertical-align: top !important; }
  .synonym-table tr:last-child td { border-bottom: none !important; }
  td.synonym-english, .synonym-table td.synonym-english, .synonym-english { width: 40% !important; color: rgb(0, 0, 0) !important; font-weight: 700 !important; print-color-adjust: exact !important; }
  td.synonym-korean, .synonym-table td.synonym-korean, .synonym-korean { width: 60% !important; color: rgb(51, 51, 51) !important; padding-left: 20px !important; text-align: left !important; }
}
@media print {
  .voca-preview-table { display: table !important; width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; }
  .voca-preview-table tbody { display: table-row-group !important; }
  .voca-preview-table tr { display: table-row !important; }
  .voca-preview-table td { display: table-cell !important; padding: 3px 6px !important; border-bottom: 1px solid rgb(229, 231, 235) !important; }
}
.polysemy-card { border-radius: 8px; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); padding: 20px; margin-bottom: 16px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; position: relative; break-inside: avoid; overflow: hidden; border: 1px solid var(--badge-border, #e5e7eb); }
.polysemy-grid { display: grid; gap: 24px; grid-template-columns: 28% 1fr; }
.polysemy-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; backdrop-filter: blur(8px); border-radius: 9999px; margin-bottom: 8px; background-color: var(--badge-bg, #f1f5f9); box-shadow: 0 0 0 .5px var(--badge-border, #cbd5e1); }
.polysemy-badge-text { text-transform: uppercase; letter-spacing: -0.025em; font-weight: 500; text-align: center; font-size: 8px; color: var(--badge-text, #475569); margin: 0px; }
.polysemy-word { margin: 0px 0px 2px; letter-spacing: -0.025em; font-size: 19px; font-weight: 700; color: var(--badge-text, #000); }
.polysemy-pronunciation { color: rgb(156, 163, 175); font-size: 10px; margin: -2px 0px 0px; }
.polysemy-derivatives-wrap { margin-top: 8px; }
.polysemy-derivative-item { line-height: 1.25; display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.polysemy-derivative-word { color: rgb(31, 41, 55); font-weight: 500; font-size: 11px; }
.polysemy-derivative-pos { font-size: 8px; color: var(--badge-text, #475569); }
.polysemy-derivative-meaning { color: rgb(107, 114, 128); font-size: 10px; }
.polysemy-tip-wrap { margin-top: 16px; }
.polysemy-tip-badge { margin-bottom: 6px; }
.polysemy-tip-content { color: rgb(75, 85, 99); line-height: 1.625; font-size: 10px; text-align: justify; }
.polysemy-meanings-wrap { flex: 1 1 0%; }
.polysemy-meaning-item-separated { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--badge-border, #e5e7eb); }
.polysemy-meaning-header { margin-bottom: 4px; }
.polysemy-meaning-text { color: rgb(0, 0, 0); line-height: 1.375; font-size: 13px; margin: 0px 8px 0px 0px; }
.polysemy-meaning-number { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background-color: var(--badge-bg, #f1f5f9); border: 1px solid var(--badge-border, #cbd5e1); font-size: 9px; font-weight: 700; color: var(--badge-text, #475569); margin-right: 6px; vertical-align: middle; }
.polysemy-derivation { font-size: 10px; color: rgb(156, 163, 175); margin-right: 4px; }
.polysemy-arrow { font-size: 10px; color: rgb(156, 163, 175); margin-right: 6px; }
.polysemy-part-of-speech { font-size: 10px; font-weight: 700; color: var(--badge-text, #475569); margin-right: 4px; }
.polysemy-definition { font-style: italic; font-size: 10.5px; color: rgb(156, 163, 175); margin-left: 8px; }
.polysemy-example-wrap { padding-left: 10px; padding-top: 2px; padding-bottom: 2px; border-left: 2px solid var(--badge-border, #cbd5e1); margin-left: 4px; margin-top: 0px; margin-bottom: 0px; }
.polysemy-example-text { color: rgb(0, 0, 0); line-height: 1.625; font-size: 12px; margin: 0px 0px 4px; }
.polysemy-translation-text { color: rgb(75, 85, 99); line-height: 1.625; font-size: 10px; margin: 0px; }
.polysemy-syn-ant-block { display: inline-flex; flex-direction: column; margin-left: 10px; vertical-align: top; }
.polysemy-syn-ant-row { display: flex; align-items: center; line-height: 1.4; }
.polysemy-syn-ant-wrap { display: flex; gap: 20px; margin-top: 8px; padding-left: 12px; }
.polysemy-syn-ant-item { display: flex; align-items: center; gap: 6px; }
.polysemy-syn-ant-label { font-size: 10px; font-weight: 700; color: var(--badge-text, #475569); margin-right: 4px; }
.polysemy-syn-ant-value { color: rgb(107, 114, 128); font-size: 10px; margin-left: 2px; }
.polysemy-checkbox-wrap { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; }
.polysemy-checkbox { width: 8px; height: 8px; border: 1px solid var(--badge-border, #d1d5db); }
.polysemy-highlight { font-weight: 700; color: var(--badge-text); }
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@900&display=swap");
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / .5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / .5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::before, ::after { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
::before, ::after { --tw-content: ""; }
html, :host { line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }
body { margin: 0px; line-height: inherit; }
hr { height: 0px; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { appearance: none; }
::-webkit-file-upload-button { appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0px; }
fieldset { margin: 0px; padding: 0px; }
legend { padding: 0px; }
ol, ul, menu { list-style: none; margin: 0px; padding: 0px; }
dialog { padding: 0px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none; }
* { border-color: hsl(var(--border)); outline-color: hsl(var(--ring) / .5); }
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 { font-size: var(--text-2xl); font-weight: var(--font-weight-medium); line-height: 1.5; }
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 { font-size: var(--text-xl); font-weight: var(--font-weight-medium); line-height: 1.5; }
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 { font-size: var(--text-lg); font-weight: var(--font-weight-medium); line-height: 1.5; }
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 { font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: 1.5; }
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p { font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 1.5; }
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button { font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: 1.5; }
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input { font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 1.5; }
.container { width: 100%; }
@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}
@media (min-width: 1536px) {
  .container { max-width: 1536px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; }
.pointer-events-none { pointer-events: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.inset-0 { inset: 0px; }
.inset-8 { inset: 2rem; }
.inset-y-0 { top: 0px; bottom: 0px; }
.-top-3 { top: -0.75rem; }
.bottom-0 { bottom: 0px; }
.bottom-2 { bottom: 0.5rem; }
.bottom-20 { bottom: 5rem; }
.bottom-3 { bottom: 0.75rem; }
.bottom-8 { bottom: 2rem; }
.left-0 { left: 0px; }
.left-1\/2 { left: 50%; }
.left-2 { left: 0.5rem; }
.left-20 { left: 5rem; }
.left-3 { left: 0.75rem; }
.left-8 { left: 2rem; }
.right-0 { right: 0px; }
.right-2 { right: 0.5rem; }
.right-20 { right: 5rem; }
.right-3 { right: 0.75rem; }
.right-4 { right: 1rem; }
.right-8 { right: 2rem; }
.top-0 { top: 0px; }
.top-1\/2 { top: 50%; }
.top-2 { top: 0.5rem; }
.top-20 { top: 5rem; }
.top-3 { top: 0.75rem; }
.top-8 { top: 2rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-\[100\] { z-index: 100; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0px; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-4 { margin-left: 1rem; }
.ml-auto { margin-left: auto; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-16 { margin-top: 4rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.table { display: table; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.contents { display: contents; }
.aspect-square { aspect-ratio: 1 / 1; }
.h-1 { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-2 { height: 0.5rem; }
.h-2\.5 { height: 0.625rem; }
.h-24 { height: 6rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-64 { height: 16rem; }
.h-7 { height: 1.75rem; }
.h-72 { height: 18rem; }
.h-8 { height: 2rem; }
.h-80 { height: 20rem; }
.h-96 { height: 24rem; }
.h-\[350px\] { height: 350px; }
.h-full { height: 100%; }
.h-px { height: 1px; }
.h-screen { height: 100vh; }
.max-h-60 { max-height: 15rem; }
.max-h-\[90vh\] { max-height: 90vh; }
.min-h-\[120px\] { min-height: 120px; }
.min-h-screen { min-height: 100vh; }
.w-1 { width: 0.25rem; }
.w-1\.5 { width: 0.375rem; }
.w-1\/2 { width: 50%; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-2 { width: 0.5rem; }
.w-2\.5 { width: 0.625rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.w-5 { width: 1.25rem; }
.w-56 { width: 14rem; }
.w-6 { width: 1.5rem; }
.w-64 { width: 16rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-80 { width: 20rem; }
.w-full { width: 100%; }
.w-px { width: 1px; }
.w-screen { width: 100vw; }
.min-w-\[16px\] { min-width: 16px; }
.min-w-\[28px\] { min-width: 28px; }
.min-w-\[96px\] { min-width: 96px; }
.min-w-full { min-width: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-lg { max-width: 32rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-xs { max-width: 20rem; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }
.border-collapse { border-collapse: collapse; }
.-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.transform { transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
@keyframes pulse { 
  50% { opacity: 0.5; }
}
.animate-pulse { animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.cursor-not-allowed { cursor: not-allowed; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.resize-none { resize: none; }
.resize { resize: both; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0px, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0px, 1fr)); }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-0\.5 { gap: 0.125rem; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(.5rem * var(--tw-space-x-reverse)); margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse))); }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(.125rem * var(--tw-space-y-reverse)); }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(.25rem * var(--tw-space-y-reverse)); }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(.375rem * var(--tw-space-y-reverse)); }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(.5rem * var(--tw-space-y-reverse)); }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(.75rem * var(--tw-space-y-reverse)); }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); }
.divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1)); }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1)); }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-scroll { overflow-x: scroll; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.rounded { border-radius: 0.25rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-sm { border-radius: 0.125rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.rounded-t-xl { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.border { border-width: 1px; }
.border-0 { border-width: 0px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-b { border-bottom-width: 1px; }
.border-r { border-right-width: 1px; }
.border-t { border-top-width: 1px; }
.border-\[\#4F6AF6\] { --tw-border-opacity: 1; border-color: rgb(79 106 246 / var(--tw-border-opacity, 1)); }
.border-amber-200 { --tw-border-opacity: 1; border-color: rgb(253 230 138 / var(--tw-border-opacity, 1)); }
.border-blue-100 { --tw-border-opacity: 1; border-color: rgb(219 234 254 / var(--tw-border-opacity, 1)); }
.border-blue-200 { --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); }
.border-cyan-500 { --tw-border-opacity: 1; border-color: rgb(6 182 212 / var(--tw-border-opacity, 1)); }
.border-fuchsia-200 { --tw-border-opacity: 1; border-color: rgb(245 208 254 / var(--tw-border-opacity, 1)); }
.border-gray-100 { --tw-border-opacity: 1; border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)); }
.border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); }
.border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); }
.border-green-100 { --tw-border-opacity: 1; border-color: rgb(220 252 231 / var(--tw-border-opacity, 1)); }
.border-green-200 { --tw-border-opacity: 1; border-color: rgb(187 247 208 / var(--tw-border-opacity, 1)); }
.border-indigo-100 { --tw-border-opacity: 1; border-color: rgb(224 231 255 / var(--tw-border-opacity, 1)); }
.border-orange-200 { --tw-border-opacity: 1; border-color: rgb(254 215 170 / var(--tw-border-opacity, 1)); }
.border-pink-100 { --tw-border-opacity: 1; border-color: rgb(252 231 243 / var(--tw-border-opacity, 1)); }
.border-red-200 { --tw-border-opacity: 1; border-color: rgb(254 202 202 / var(--tw-border-opacity, 1)); }
.border-red-500 { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); }
.border-slate-200 { --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); }
.border-slate-700 { --tw-border-opacity: 1; border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); }
.border-slate-700\/50 { border-color: rgba(51, 65, 85, 0.5); }
.border-slate-800 { --tw-border-opacity: 1; border-color: rgb(30 41 59 / var(--tw-border-opacity, 1)); }
.border-stone-300 { --tw-border-opacity: 1; border-color: rgb(214 211 209 / var(--tw-border-opacity, 1)); }
.border-transparent { border-color: transparent; }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.border-white\/60 { border-color: rgba(255, 255, 255, 0.6); }
.border-t-transparent { border-top-color: transparent; }
.border-t-white { --tw-border-opacity: 1; border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); }
.bg-\[\#03C75A\] { --tw-bg-opacity: 1; background-color: rgb(3 199 90 / var(--tw-bg-opacity, 1)); }
.bg-\[\#3758F9\] { --tw-bg-opacity: 1; background-color: rgb(55 88 249 / var(--tw-bg-opacity, 1)); }
.bg-\[\#4CD9AC\] { --tw-bg-opacity: 1; background-color: rgb(76 217 172 / var(--tw-bg-opacity, 1)); }
.bg-\[\#4F6AF6\] { --tw-bg-opacity: 1; background-color: rgb(79 106 246 / var(--tw-bg-opacity, 1)); }
.bg-\[rgba\(0\,0\,0\,0\)\] { background-color: rgba(0, 0, 0, 0); }
.bg-amber-100 { --tw-bg-opacity: 1; background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1)); }
.bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); }
.bg-blue-50 { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); }
.bg-blue-50\/40 { background-color: rgba(239, 246, 255, 0.4); }
.bg-blue-500 { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); }
.bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); }
.bg-fuchsia-100 { --tw-bg-opacity: 1; background-color: rgb(250 232 255 / var(--tw-bg-opacity, 1)); }
.bg-fuchsia-50 { --tw-bg-opacity: 1; background-color: rgb(253 244 255 / var(--tw-bg-opacity, 1)); }
.bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); }
.bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); }
.bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); }
.bg-gray-800 { --tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); }
.bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); }
.bg-green-50 { --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); }
.bg-orange-200 { --tw-bg-opacity: 1; background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1)); }
.bg-orange-50 { --tw-bg-opacity: 1; background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1)); }
.bg-purple-100 { --tw-bg-opacity: 1; background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1)); }
.bg-purple-50 { --tw-bg-opacity: 1; background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1)); }
.bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); }
.bg-red-50 { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); }
.bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); }
.bg-rose-100 { --tw-bg-opacity: 1; background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); }
.bg-slate-100 { --tw-bg-opacity: 1; background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); }
.bg-slate-200 { --tw-bg-opacity: 1; background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); }
.bg-slate-300 { --tw-bg-opacity: 1; background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1)); }
.bg-slate-400 { --tw-bg-opacity: 1; background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1)); }
.bg-slate-50 { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); }
.bg-slate-800 { --tw-bg-opacity: 1; background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); }
.bg-slate-800\/50 { background-color: rgba(30, 41, 59, 0.5); }
.bg-slate-900 { --tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); }
.bg-slate-900\/80 { background-color: rgba(15, 23, 42, 0.8); }
.bg-stone-200 { --tw-bg-opacity: 1; background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1)); }
.bg-stone-300 { --tw-bg-opacity: 1; background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1)); }
.bg-stone-50 { --tw-bg-opacity: 1; background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1)); }
.bg-transparent { background-color: transparent; }
.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/50 { background-color: rgba(255, 255, 255, 0.5); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-yellow-100 { --tw-bg-opacity: 1; background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); }
.bg-yellow-50 { --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1)); }
.bg-opacity-50 { --tw-bg-opacity: .5; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right,var(--tw-gradient-stops)); }
.bg-gradient-to-l { background-image: linear-gradient(to left,var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right,var(--tw-gradient-stops)); }
.from-blue-400 { --tw-gradient-from: #60a5fa var(--tw-gradient-from-position); --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-blue-400\/20 { --tw-gradient-from: rgb(96 165 250 / .2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-blue-500 { --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-cyan-500 { --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-orange-50 { --tw-gradient-from: #fff7ed var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-slate-900 { --tw-gradient-from: #0f172a var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-transparent { --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-rose-50 { --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fff1f2 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.via-slate-400 { --tw-gradient-to: rgb(148 163 184 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #94a3b8 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.via-slate-800 { --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-amber-50 { --tw-gradient-to: #fffbeb var(--tw-gradient-to-position); }
.to-blue-600 { --tw-gradient-to: #2563eb var(--tw-gradient-to-position); }
.to-blue-600\/20 { --tw-gradient-to: rgb(37 99 235 / .2) var(--tw-gradient-to-position); }
.to-slate-400 { --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position); }
.to-slate-900 { --tw-gradient-to: #0f172a var(--tw-gradient-to-position); }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.p-0 { padding: 0px; }
.p-1 { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-12 { padding: 3rem; }
.p-2 { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-16 { padding-left: 4rem; padding-right: 4rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-20 { padding-left: 5rem; padding-right: 5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-0 { padding-top: 0px; padding-bottom: 0px; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-2\.5 { padding-left: 0.625rem; }
.pl-4 { padding-left: 1rem; }
.pr-14 { padding-right: 3.5rem; }
.pr-4 { padding-right: 1rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-20 { padding-top: 5rem; }
.pt-4 { padding-top: 1rem; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-8xl { font-size: 6rem; line-height: 1; }
.text-\[100px\] { font-size: 100px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[9px\] { font-size: 9px; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.italic { font-style: italic; }
.leading-\[1\.1\] { line-height: 1.1; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
.leading-tight { line-height: 1.25; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.text-\[\#4F6AF6\] { --tw-text-opacity: 1; color: rgb(79 106 246 / var(--tw-text-opacity, 1)); }
.text-amber-600 { --tw-text-opacity: 1; color: rgb(217 119 6 / var(--tw-text-opacity, 1)); }
.text-amber-700 { --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity, 1)); }
.text-amber-800 { --tw-text-opacity: 1; color: rgb(146 64 14 / var(--tw-text-opacity, 1)); }
.text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); }
.text-blue-100 { --tw-text-opacity: 1; color: rgb(219 234 254 / var(--tw-text-opacity, 1)); }
.text-blue-400 { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity, 1)); }
.text-blue-500 { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1)); }
.text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); }
.text-blue-700 { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); }
.text-blue-900 { --tw-text-opacity: 1; color: rgb(30 58 138 / var(--tw-text-opacity, 1)); }
.text-fuchsia-700 { --tw-text-opacity: 1; color: rgb(162 28 175 / var(--tw-text-opacity, 1)); }
.text-fuchsia-800 { --tw-text-opacity: 1; color: rgb(134 25 143 / var(--tw-text-opacity, 1)); }
.text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); }
.text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); }
.text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); }
.text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); }
.text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); }
.text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity, 1)); }
.text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); }
.text-green-600 { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity, 1)); }
.text-green-700 { --tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity, 1)); }
.text-green-800 { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity, 1)); }
.text-indigo-700 { --tw-text-opacity: 1; color: rgb(67 56 202 / var(--tw-text-opacity, 1)); }
.text-orange-600 { --tw-text-opacity: 1; color: rgb(234 88 12 / var(--tw-text-opacity, 1)); }
.text-orange-700 { --tw-text-opacity: 1; color: rgb(194 65 12 / var(--tw-text-opacity, 1)); }
.text-pink-600 { --tw-text-opacity: 1; color: rgb(219 39 119 / var(--tw-text-opacity, 1)); }
.text-pink-700 { --tw-text-opacity: 1; color: rgb(190 24 93 / var(--tw-text-opacity, 1)); }
.text-purple-600 { --tw-text-opacity: 1; color: rgb(147 51 234 / var(--tw-text-opacity, 1)); }
.text-purple-700 { --tw-text-opacity: 1; color: rgb(126 34 206 / var(--tw-text-opacity, 1)); }
.text-red-400 { --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity, 1)); }
.text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); }
.text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); }
.text-red-700 { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity, 1)); }
.text-red-800 { --tw-text-opacity: 1; color: rgb(153 27 27 / var(--tw-text-opacity, 1)); }
.text-slate-400 { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); }
.text-slate-500 { --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); }
.text-slate-600 { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); }
.text-slate-700 { --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); }
.text-slate-800 { --tw-text-opacity: 1; color: rgb(30 41 59 / var(--tw-text-opacity, 1)); }
.text-slate-900 { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); }
.text-stone-400 { --tw-text-opacity: 1; color: rgb(168 162 158 / var(--tw-text-opacity, 1)); }
.text-stone-500 { --tw-text-opacity: 1; color: rgb(120 113 108 / var(--tw-text-opacity, 1)); }
.text-stone-600 { --tw-text-opacity: 1; color: rgb(87 83 78 / var(--tw-text-opacity, 1)); }
.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-yellow-600 { --tw-text-opacity: 1; color: rgb(202 138 4 / var(--tw-text-opacity, 1)); }
.text-yellow-800 { --tw-text-opacity: 1; color: rgb(133 77 14 / var(--tw-text-opacity, 1)); }
.underline { text-decoration-line: underline; }
.line-through { text-decoration-line: line-through; }
.underline-offset-2 { text-underline-offset: 2px; }
.antialiased { -webkit-font-smoothing: antialiased; }
.placeholder-gray-400::placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1)); }
.opacity-0 { opacity: 0; }
.opacity-20 { opacity: 0.2; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); }
.shadow-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); }
.shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); }
.shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); }
.shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); }
.shadow-cyan-500\/20 { --tw-shadow-color: rgb(6 182 212 / .2); --tw-shadow: var(--tw-shadow-colored); }
.shadow-cyan-500\/25 { --tw-shadow-color: rgb(6 182 212 / .25); --tw-shadow: var(--tw-shadow-colored); }
.outline-none { outline: transparent solid 2px; outline-offset: 2px; }
.outline { outline-style: solid; }
.ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000); }
.ring-4 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000); }
.ring-red-100 { --tw-ring-opacity: 1; --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity, 1)); }
.blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.blur-3xl { --tw-blur: blur(64px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.backdrop-blur-lg { --tw-backdrop-blur: blur(16px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-md { --tw-backdrop-blur: blur(12px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-sm { --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-xl { --tw-backdrop-blur: blur(24px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.duration-200 { transition-duration: 0.2s; }
.duration-300 { transition-duration: 0.3s; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { font-family: var(--font-sans); color: rgb(17, 25, 40); background-color: rgb(255, 255, 255); overflow-x: hidden; }
.jj-card { background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 10px; box-shadow: rgba(92, 115, 160, 0.07) 0px 10px 20px; }
.jj-card-header { background: rgb(249, 250, 251); padding: 20px 24px; border-radius: 10px 10px 0px 0px; border-bottom: 1px solid rgb(223, 228, 234); }
.jj-card-title { font-size: 20px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px; }
.jj-card-content { padding: 24px; }
.jj-input { width: 100%; padding: 12px 20px; font-size: 16px; font-weight: 400; color: rgb(17, 25, 40); background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 6px; outline: none; transition: border-color 0.2s; }
.jj-input::placeholder { color: rgb(107, 114, 128); }
.jj-input:hover { border-color: rgb(107, 114, 128); }
.jj-input:focus { border-color: rgb(30, 58, 95); }
.jj-input:disabled { background: rgb(229, 231, 235); color: rgb(107, 114, 128); cursor: not-allowed; }
.jj-textarea { width: 100%; padding: 16px 20px; font-size: 16px; font-weight: 400; color: rgb(17, 25, 40); background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 6px; outline: none; resize: none; min-height: 120px; transition: border-color 0.2s; }
.jj-textarea::placeholder { color: rgb(107, 114, 128); }
.jj-textarea:hover { border-color: rgb(107, 114, 128); }
.jj-textarea:focus { border-color: rgb(30, 58, 95); }
.jj-label { display: block; font-size: 16px; font-weight: 400; color: rgb(17, 25, 40); margin-bottom: 8px; }
.jj-select-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; position: relative; }
.jj-select-trigger { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 10px; width: 100%; height: 48px; background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 6px; cursor: pointer; transition: border-color 0.2s; }
.jj-select-trigger:hover { border-color: rgb(107, 114, 128); }
.jj-select-trigger.open { border-color: rgb(30, 58, 95); }
.jj-select-value { font-family: Inter, sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(99, 115, 129); }
.jj-select-value.selected { color: rgb(17, 25, 40); }
.jj-select-icon { width: 16px; height: 16px; color: rgb(99, 115, 129); transition: transform 0.2s; }
.jj-select-trigger.open .jj-select-icon { transform: rotate(180deg); }
.jj-select-dropdown { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 1px; gap: 0px; width: 100%; background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); box-shadow: rgba(166, 175, 195, 0.3) 0px 4px 10px; border-radius: 6px; position: absolute; top: calc(100% + 5px); left: 0px; z-index: 200; max-height: 200px; overflow-y: auto; }
.jj-select-option { display: flex; flex-direction: row; align-items: center; padding: 7px 16px; gap: 10px; width: 100%; background: rgb(255, 255, 255); cursor: pointer; transition: background 0.15s; border: none; text-align: left; }
.jj-select-option:hover { background: rgb(249, 250, 251); }
.jj-select-option.selected { background: rgb(30, 58, 95); }
.jj-select-option-text { font-family: Inter, sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(99, 115, 129); }
.jj-select-option.selected .jj-select-option-text { color: rgb(255, 255, 255); }
.jj-select { width: 100%; padding: 12px 48px 12px 20px; font-size: 16px; font-weight: 400; color: rgb(17, 25, 40); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23637381' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 16px center no-repeat rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 6px; cursor: pointer; appearance: none; }
.jj-select:hover { border-color: rgb(107, 114, 128); }
.jj-select:focus { border-color: rgb(30, 58, 95); outline: none; }
.jj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 28px; font-size: 16px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
.jj-btn-primary { background: rgb(17, 25, 40); color: rgb(255, 255, 255); border-color: rgb(17, 25, 40); }
.jj-btn-primary:hover { background: rgb(99, 115, 129); border-color: rgb(99, 115, 129); }
.jj-btn-secondary { background: transparent; color: rgb(17, 25, 40); border-color: rgb(17, 25, 40); }
.jj-btn-secondary:hover { background: rgb(222, 226, 230); }
.jj-btn-tertiary { background: rgb(255, 255, 255); color: rgb(17, 25, 40); border: none; box-shadow: rgba(166, 175, 195, 0.4) 0px 1px 3px; }
.jj-btn-tertiary:hover { background: rgb(222, 226, 230); border: 1px solid rgb(17, 25, 40); }
.jj-btn:disabled { background: rgb(229, 231, 235); color: rgb(107, 114, 128); border-color: rgb(229, 231, 235); cursor: not-allowed; }
.jj-header { display: flex; align-items: stretch; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(223, 228, 234); overflow-x: auto; }
.jj-header-section { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px; justify-content: center; flex-shrink: 0; }
.jj-header-left { width: 550px; min-width: 550px; flex-direction: row; align-items: center; gap: 24px; }
.jj-header-center { flex: 1 0 auto; flex-direction: row; align-items: stretch; padding: 0px; gap: 0px; border-right: 1px solid rgb(223, 228, 234); overflow: visible; }
.jj-header-center::-webkit-scrollbar { height: 4px; }
.jj-header-center::-webkit-scrollbar-track { background: rgb(243, 244, 246); }
.jj-header-center::-webkit-scrollbar-thumb { background: rgb(209, 213, 219); border-radius: 2px; }
.jj-header-center::-webkit-scrollbar-thumb:hover { background: rgb(156, 163, 175); }
.jj-header-settings { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 24px; background: rgb(255, 255, 255); border-left: 1px solid rgb(223, 228, 234); flex: 1 1 0%; min-width: 700px; }
.jj-header-settings-row { display: flex; flex-direction: row; align-items: center; gap: 20px; position: relative; }
.jj-header-settings-row:first-child { z-index: 10; }
.jj-header-settings-row:last-child { z-index: 1; }
.jj-header-field { display: flex; flex-direction: column; gap: 4px; }
.jj-header-field-label { font-size: 11px; font-weight: 500; color: rgb(99, 115, 129); text-transform: uppercase; letter-spacing: 0.5px; }
.jj-header-input { padding: 6px 12px; font-size: 14px; color: rgb(17, 25, 40); background: rgb(249, 250, 251); border: 1px solid rgb(223, 228, 234); border-radius: 6px; outline: none; min-width: 160px; transition: border-color 0.2s; }
.jj-header-input::placeholder { color: rgb(156, 163, 175); }
.jj-header-input:hover { border-color: rgb(107, 114, 128); }
.jj-header-input:focus { border-color: rgb(30, 58, 95); background: rgb(255, 255, 255); }
.jj-header-color-field { position: relative; }
.jj-header-color-dropdown { position: relative; width: 100%; }
.jj-header-color-button { width: 100%; height: 36px; padding: 0px 12px; background: rgb(249, 250, 251); border: 1px solid rgb(223, 228, 234); border-radius: 6px; cursor: pointer; transition: 0.2s; font-size: 12px; font-weight: 500; text-align: left; }
.jj-header-color-button:hover { border-color: rgb(30, 58, 95); background: rgb(255, 255, 255); }
.jj-header-color-item { width: 24px; height: 24px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.jj-header-color-item:hover { transform: scale(1.1); }
.jj-header-color-item.selected { border-color: rgb(17, 25, 40); transform: scale(1.15); }
.jj-header-field .jj-select-wrapper { width: auto; min-width: 100px; }
.jj-header-field .jj-select-trigger { height: 36px; padding: 6px 12px; background: rgb(249, 250, 251); }
.jj-header-toggle { padding: 6px 16px; font-size: 12px; font-weight: 600; color: rgb(99, 115, 129); background: rgb(243, 244, 246); border: 1px solid rgb(223, 228, 234); border-radius: 6px; cursor: pointer; transition: 0.2s; min-width: 60px; width: 60px; display: flex; align-items: center; justify-content: center; }
.jj-header-unit-input { display: flex; align-items: center; gap: 4px; }
.jj-header-input-small { min-width: 66px; width: 66px; padding: 6px 8px; text-align: center; }
.jj-header-unit-suffix { font-size: 12px; color: rgb(99, 115, 129); }
.jj-header-unit-btn { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(99, 115, 129); background: rgb(249, 250, 251); border: 1px solid rgb(223, 228, 234); border-radius: 6px; cursor: pointer; transition: 0.15s; white-space: nowrap; }
.jj-header-unit-btn:hover { background: rgb(243, 244, 246); border-color: rgb(156, 163, 175); }
.jj-header-unit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jj-header-toggle:hover { background: rgb(229, 231, 235); }
.jj-header-toggle.active { background: rgb(30, 58, 95); color: rgb(255, 255, 255); border-color: rgb(30, 58, 95); }
.jj-header-right { width: 15%; min-width: 100px; max-width: 150px; align-items: center; flex-shrink: 0; }
.jj-header-logo-area { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jj-header-logo { display: flex; align-items: center; }
.jj-market-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 24px; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(255, 107, 107), rgb(255, 142, 83)); border: none; border-radius: 16px; cursor: pointer; transition: 0.15s; min-width: 120px; }
.jj-market-btn:hover { background: linear-gradient(135deg, rgb(255, 82, 82), rgb(255, 112, 67)); transform: scale(1.02); }
.jj-logo-image { height: 80px; width: auto; }
.jj-logo { font-size: 24px; font-weight: 700; color: rgb(17, 25, 40); }
.jj-logo-sub { font-size: 14px; font-weight: 400; color: rgb(99, 115, 129); margin-left: 12px; }
.jj-user-info { display: flex; align-items: center; gap: 8px; }
.jj-user-name { font-size: 14px; font-weight: 500; color: rgb(99, 115, 129); cursor: pointer; padding: 8px 16px; border-radius: 6px; transition: 0.2s; }
.jj-user-name:hover { background: rgb(249, 250, 251); color: rgb(17, 25, 40); }
.jj-user-points { font-size: 13px; font-weight: 600; color: rgb(30, 58, 95); background: rgb(232, 238, 244); padding: 4px 10px; border-radius: 12px; }
.jj-header-actions { display: flex; gap: 8px; margin-top: 8px; width: 100%; }
.jj-header-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0%; gap: 2px; padding: 8px 16px; font-size: 12px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid rgb(223, 228, 234); background: rgb(255, 255, 255); color: rgb(55, 65, 81); line-height: 1.2; }
.jj-header-action-btn:hover { background: rgb(243, 244, 246); }
.jj-header-action-pdf, .jj-header-action-binding { background: rgb(30, 58, 95); color: rgb(255, 255, 255); border-color: rgb(30, 58, 95); }
.jj-header-action-pdf:hover, .jj-header-action-binding:hover { background: rgb(21, 41, 66); }
.jj-header-right { flex-direction: column; align-items: flex-end; justify-content: center; }
.jj-split-pane { display: flex; height: 100%; width: 100%; }
.jj-panel-left { position: relative; height: 100%; overflow: hidden; background: rgb(255, 255, 255); transition: width 0.25s, min-width 0.25s; }
.jj-panel-left.jj-panel-collapsed { overflow: hidden; width: 0px !important; min-width: 0px !important; }
.jj-panel-right { flex: 1 1 0%; height: 100%; overflow: hidden; background: rgb(249, 250, 251); display: flex; flex-direction: column; }
.jj-preview-with-toolbar { display: flex; flex-direction: column; height: 100%; width: 100%; }
.jj-divider-container { position: relative; display: flex; flex-direction: column; align-items: center; background: rgb(243, 244, 246); border-left: 1px solid rgb(229, 231, 235); border-right: 1px solid rgb(229, 231, 235); }
.jj-panel-toggle-btn { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; background: transparent; border: none; border-radius: 4px; color: rgb(107, 114, 128); cursor: pointer; transition: 0.15s; }
.jj-panel-toggle-btn:hover { background: rgb(229, 231, 235); color: rgb(55, 65, 81); }
.jj-divider-container .jj-panel-toggle-btn { position: static; margin-top: 8px; }
.jj-divider { flex: 1 1 0%; width: 4px; background: rgb(229, 231, 235); cursor: col-resize; transition: background 0.2s; }
.jj-divider:hover { background: rgb(59, 130, 246); }
.jj-preview-wrapper { display: flex; flex-direction: column; flex: 1 1 0%; height: 100%; min-height: 0px; overflow: hidden; }
.jj-preview-container { flex: 1 1 0%; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; align-items: center; container: preview / inline-size; padding: 40px 0px 20px; }
.jj-preview-content { padding: 24px; display: grid; user-select: none; grid-template-columns: repeat(var(--preview-columns, 1),210mm); place-content: start center; gap: 20px; transform: scale(var(--preview-zoom, 1)); transform-origin: center top; width: fit-content; flex-shrink: 0; }
.jj-preview-container::-webkit-scrollbar { width: 6px; }
.jj-preview-container::-webkit-scrollbar-thumb { background: rgb(203, 213, 225); border-radius: 3px; }
.jj-preview-container::-webkit-scrollbar-thumb:hover { background: rgb(148, 163, 184); }
.jj-preview-container::-webkit-scrollbar-track { background: transparent; }
.jj-preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 400px; text-align: center; color: rgb(107, 114, 128); }
.unit-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: 20px; background: var(--badge-bg, #f0f4f8); color: var(--badge-text, #1e3a5f); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; }
.jj-page-header { margin-bottom: 0.8rem; }
.jj-header-line-top { height: 0.5px; background: var(--theme-color, #1a1a1a); margin-bottom: 16px; }
.jj-header-line-bottom { height: 0.5px; background: var(--theme-color, #1a1a1a); margin-top: 16px; margin-bottom: 24px; }
.jj-header-content { display: flex; justify-content: space-between; align-items: center; padding: 0px 4px; min-height: 70px; }
.jj-header-left { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 0%; width: auto; min-width: 0px; max-width: none; }
.jj-unit-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--theme-color, #1a1a1a); color: rgb(255, 255, 255); padding: 8px 12px; min-width: 60px; }
.jj-unit-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.jj-unit-number { font-size: 32px; font-weight: 900; line-height: 1; margin-top: 2px; }
.jj-header-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0%; min-width: 0px; overflow: hidden; }
.jj-header-title { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; font-family: "Noto Sans KR", sans-serif; color: var(--theme-color, #1E3A5F); overflow-wrap: break-word; word-break: keep-all; line-height: 1.3; width: 100%; }
.jj-header-title-text { display: block; width: 100%; }
.jj-header-title-input { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; font-family: "Noto Sans KR", sans-serif; background: transparent; border: none; outline: none; min-width: 200px; color: var(--theme-color, #1E3A5F); }
.jj-header-title-input::placeholder { color: rgb(204, 204, 204); font-style: normal; }
.jj-header-description { font-size: 14px; font-weight: 400; color: rgb(102, 102, 102); font-family: SUIT, sans-serif; }
.jj-header-description-text:empty { display: none; }
.jj-header-desc-input { font-size: 14px; font-weight: 400; color: rgb(102, 102, 102); font-family: SUIT, sans-serif; background: transparent; border: none; outline: none; min-width: 300px; }
.jj-header-desc-input::placeholder { color: rgb(204, 204, 204); }
.jj-desc-highlight { color: var(--theme-color, #1E3A5F); font-weight: 600; }
.jj-preview-content .jj-header-logo { display: var(--logo-display, block) !important; align-items: center; }
.jj-header-logo-img { height: 60px; width: auto; }
.jj-header-category { margin-top: 12px; }
.header-label { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; background: linear-gradient(135deg,var(--badge-bg, #f0f4f8) 0%,#ffffff 50%,var(--badge-bg, #f0f4f8) 100%); border-radius: 30px; box-shadow: 0 2px 8px #0000000f,0 0 0 1px var(--badge-border, #e2e8f0); position: relative; overflow: hidden; }
.header-label-text { font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--badge-text, #1e3a5f); font-family: Inter, Pretendard, sans-serif; margin: 0px; }
.jj-preview-content .mb-6.relative { padding: 1.5rem 0px; margin-bottom: 2.5rem !important; }
.jj-preview-content .mb-6.relative > .flex.justify-center.mb-4 { margin-bottom: 1rem !important; }
.jj-preview-content .header-label { position: relative; overflow: hidden; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 16px 40px !important; background: linear-gradient(135deg,var(--badge-bg, #f0f4f8) 0%,#ffffff 50%,var(--badge-bg, #f0f4f8) 100%) !important; border-radius: 50px !important; box-shadow: 0 4px 20px #00000014,0 0 0 1px var(--badge-border, #e2e8f0),inset 0 1px #fffc !important; }
.jj-preview-content .header-label .header-label-text, .jj-preview-content .header-label input { text-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--badge-text, #1e3a5f) !important; font-family: Inter, Pretendard, sans-serif !important; }
.jj-preview-content .mb-6.relative > .flex.justify-center:not(:first-child) p.text-gray-600 { margin-top: 0.5rem; font-size: 0.9rem !important; color: rgb(100, 116, 139) !important; }
.jj-preview-content .absolute.top-0.left-0 { font-size: 0.75rem !important; font-weight: 700 !important; padding: 6px 12px !important; border-radius: 20px !important; top: 50% !important; transform: translateY(-50%) !important; }
.jj-preview-page { position: relative; width: 210mm; min-height: 297mm; background: rgb(255, 255, 255); box-shadow: rgba(92, 115, 160, 0.07) 0px 10px 20px; border-radius: 8px; padding: 40px; flex-shrink: 0; transition: transform 0.2s; }
.jj-preview-page-number { position: absolute; bottom: 20px; left: 50%; transform: translate(-50%); font-size: 12px; color: rgb(156, 163, 175); }
.jj-preview-footer-left { position: absolute; bottom: 20px; left: 40px; font-size: 11px; color: rgb(156, 163, 175); }
.jj-preview-content .page-number-bottom-left { display: var(--footer-display, block) !important; }
.jj-preview-content .page-number-bottom-right { display: var(--page-number-display, block) !important; }
.jj-preview-navbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: rgba(255, 255, 255, 0.98); border-top: 1px solid rgb(229, 231, 235); z-index: 10; flex-shrink: 0; }
.jj-preview-zoom { display: flex; align-items: center; gap: 8px; }
.jj-preview-zoom-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgb(223, 228, 234); border-radius: 6px; background: rgb(255, 255, 255); color: rgb(99, 115, 129); cursor: pointer; transition: 0.15s; }
.jj-preview-zoom-btn:hover:not(:disabled) { background: rgb(243, 244, 246); border-color: rgb(30, 58, 95); color: rgb(30, 58, 95); }
.jj-preview-zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jj-preview-zoom-value { font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); min-width: 48px; text-align: center; }
.jj-preview-pagination { display: flex; align-items: center; gap: 8px; }
.jj-preview-nav-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgb(223, 228, 234); border-radius: 6px; background: rgb(255, 255, 255); color: rgb(99, 115, 129); cursor: pointer; transition: 0.15s; }
.jj-preview-nav-btn:hover:not(:disabled) { background: rgb(243, 244, 246); border-color: rgb(30, 58, 95); color: rgb(30, 58, 95); }
.jj-preview-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jj-preview-page-indicator { display: flex; align-items: center; gap: 4px; max-width: 480px; overflow-x: auto; scrollbar-width: thin; }
.jj-preview-page-indicator::-webkit-scrollbar { height: 3px; }
.jj-preview-page-indicator::-webkit-scrollbar-thumb { background: rgb(203, 213, 225); border-radius: 2px; }
.jj-preview-page-dot { min-width: 28px; height: 28px; padding: 0px 6px; border: none; border-radius: 4px; background: transparent; color: rgb(99, 115, 129); font-size: 12px; font-weight: 500; cursor: pointer; transition: 0.15s; }
.jj-preview-page-dot:hover { background: rgb(243, 244, 246); }
.jj-preview-page-dot.active { background: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-preview-info { font-size: 13px; color: rgb(99, 115, 129); }
.jj-unit-selector { display: flex; align-items: center; gap: 4px; }
.jj-unit-nav-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgb(223, 228, 234); border-radius: 4px; background: rgb(255, 255, 255); color: rgb(99, 115, 129); cursor: pointer; transition: 0.15s; }
.jj-unit-nav-btn:hover:not(:disabled) { background: rgb(243, 244, 246); border-color: rgb(30, 58, 95); color: rgb(30, 58, 95); }
.jj-unit-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jj-unit-indicator { padding: 4px 12px; background: rgb(30, 58, 95); color: rgb(255, 255, 255); border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.jj-color-picker { display: flex; flex-wrap: wrap; gap: 12px; }
.jj-color-item { width: 32px; height: 32px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.jj-color-item:hover { transform: scale(1.05); }
.jj-color-item.selected { border-color: rgb(17, 25, 40); transform: scale(1.1); }
.jj-form-group { margin-bottom: 16px; }
.jj-form-group:last-child { margin-bottom: 0px; }
.jj-helper-text { font-size: 14px; color: rgb(99, 115, 129); margin-top: 8px; }
.jj-module-container { flex: 1 1 0%; overflow: hidden; display: flex; position: relative; padding-right: 48px; }
.jj-history-sidebar { width: 48px; height: 100%; background: rgb(255, 255, 255); border-left: 1px solid rgb(223, 228, 234); display: flex; flex-direction: column; overflow: hidden; transition: width 0.25s, box-shadow 0.25s; position: absolute; right: 0px; top: 0px; z-index: 100; }
.jj-history-sidebar:hover { width: 280px; box-shadow: rgba(0, 0, 0, 0.1) -4px 0px 20px; }
.jj-history-sidebar > * { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.jj-history-sidebar:hover > * { opacity: 1; visibility: visible; }
.jj-history-sidebar::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 40px; background: rgb(209, 213, 219); border-radius: 2px; transition: opacity 0.2s; }
.jj-history-sidebar:hover::before { opacity: 0; }
.jj-history-sidebar.pinned { width: 280px; box-shadow: rgba(0, 0, 0, 0.1) -4px 0px 20px; }
.jj-history-sidebar.pinned > * { opacity: 1; visibility: visible; }
.jj-history-sidebar.pinned::before { opacity: 0; }
.jj-history-pin-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid rgb(229, 231, 235); border-radius: 6px; background: rgb(249, 250, 251); color: rgb(156, 163, 175); cursor: pointer; transition: 0.15s; flex-shrink: 0; }
.jj-history-pin-btn:hover { background: rgb(243, 244, 246); color: rgb(107, 114, 128); border-color: rgb(209, 213, 219); }
.jj-history-pin-btn.active { background: rgb(238, 242, 255); color: rgb(79, 70, 229); border-color: rgb(165, 180, 252); }
.jj-history-pin-btn.active:hover { background: rgb(224, 231, 255); }
.jj-history-header { padding: 12px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(249, 250, 251); display: flex; flex-direction: column; gap: 10px; }
.jj-history-user { display: flex; align-items: center; justify-content: space-between; }
.jj-history-user-info { display: flex; flex-direction: column; gap: 2px; }
.jj-history-user-name { font-size: 13px; font-weight: 500; color: rgb(17, 25, 40); }
.jj-history-user-points { font-size: 12px; font-weight: 600; color: rgb(30, 58, 95); }
.jj-history-user-actions { display: flex; align-items: center; gap: 4px; }
.jj-history-charge-btn { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 12px; font-weight: 500; background: rgb(235, 245, 255); color: rgb(30, 58, 95); border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-history-charge-btn:hover { background: rgb(219, 234, 254); }
.jj-history-logout-btn { display: flex; align-items: center; justify-content: center; padding: 6px; background: transparent; color: rgb(107, 114, 128); border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-history-logout-btn:hover { background: rgb(243, 244, 246); color: rgb(55, 65, 81); }
.jj-history-actions { display: flex; gap: 8px; }
.jj-history-action-btn { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; font-size: 12px; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-history-action-pdf { background: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-history-action-pdf:hover { background: rgb(21, 41, 66); }
.jj-history-action-binding { background: rgb(255, 255, 255); color: rgb(30, 58, 95); border: 1px solid rgb(30, 58, 95); }
.jj-history-action-binding:hover { background: rgb(232, 238, 244); border-color: rgb(21, 41, 66); }
.jj-history-tabs { display: flex; align-items: center; gap: 0px; padding: 8px 12px; border-bottom: 1px solid rgb(223, 228, 234); background: rgb(255, 255, 255); }
.jj-history-tab { flex: 1 1 0%; padding: 8px 16px; font-size: 13px; font-weight: 500; color: rgb(99, 115, 129); background: transparent; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 2px solid transparent; cursor: pointer; transition: 0.15s; white-space: nowrap; outline: none; }
.jj-history-tab:hover { color: rgb(33, 43, 54); background: rgb(249, 250, 251); }
.jj-history-tab.active { color: rgb(30, 58, 95); border-bottom-color: rgb(30, 58, 95); font-weight: 600; }
.jj-history-custom-content { flex: 1 1 0%; overflow-y: auto; display: flex; flex-direction: column; }
.jj-history-list { flex: 1 1 0%; overflow-y: auto; padding: 8px 8px 40px; display: flex; flex-direction: column; gap: 6px; }
.jj-history-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; color: rgb(148, 163, 184); font-size: 13px; text-align: center; padding: 20px; }
.jj-history-sentinel { padding: 8px 0px; min-height: 1px; }
.jj-history-loading, .jj-history-end { padding: 8px 12px; color: rgb(148, 163, 184); font-size: 12px; text-align: center; }
.jj-history-item { display: flex; flex-direction: row; align-items: center; padding: 10px 12px; gap: 10px; background: rgb(255, 255, 255); border-radius: 8px; cursor: pointer; transition: 0.15s; border: 1px solid transparent; }
.jj-history-item:hover { background: rgb(249, 250, 251); border-color: rgb(223, 228, 234); }
.jj-history-item-thumbnail { width: 36px; height: 36px; background: rgb(243, 244, 246); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jj-history-item-thumbnail svg { width: 18px; height: 18px; color: rgb(156, 163, 175); }
.jj-history-item-thumbnail.vocabulary { background: rgb(238, 242, 255); }
.jj-history-item-thumbnail.vocabulary svg { color: rgb(79, 70, 229); }
.jj-history-item-thumbnail.syntax { background: rgb(254, 243, 199); }
.jj-history-item-thumbnail.syntax svg { color: rgb(245, 158, 11); }
.jj-history-item-info { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 2px; }
.jj-history-item-name-row { display: flex; align-items: center; gap: 6px; }
.jj-history-item-name { font-family: Inter, sans-serif; font-weight: 500; font-size: 13px; line-height: 18px; color: rgb(17, 25, 40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-history-item-type { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.jj-history-item-type--normal { background-color: rgb(229, 246, 253); color: rgb(3, 105, 161); }
.jj-history-item-type--polysemy { background-color: rgb(254, 243, 199); color: rgb(180, 83, 9); }
.jj-history-item-type--confusing { background-color: rgb(252, 231, 243); color: rgb(190, 24, 93); }
.jj-history-item-type--workbook { background-color: rgb(220, 252, 231); color: rgb(22, 101, 52); }
.jj-history-item-type--theory { background-color: rgb(207, 250, 254); color: rgb(14, 116, 144); }
.jj-history-item-type--syntax { background-color: rgb(237, 233, 254); color: rgb(109, 40, 217); }
.jj-history-item-type--gapfill { background-color: rgb(254, 243, 199); color: rgb(217, 119, 6); }
.jj-history-item-type--reading { background-color: rgb(219, 234, 254); color: rgb(29, 78, 216); }
.jj-history-item-type--school { background-color: rgb(209, 250, 229); color: rgb(6, 95, 70); }
.jj-history-item-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgb(99, 115, 129); }
.jj-history-item-date { font-size: 11px; color: rgb(30, 58, 95); font-weight: 500; }
.jj-history-item-count { font-size: 11px; color: rgb(156, 163, 175); font-weight: 400; }
.jj-history-item-unit { font-size: 11px; color: rgb(107, 114, 128); font-weight: 500; }
.jj-history-item-checkbox { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jj-history-item-checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: rgb(30, 58, 95); }
.jj-history-item-delete { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: 6px; cursor: pointer; color: rgb(156, 163, 175); transition: 0.15s; flex-shrink: 0; opacity: 0; }
.jj-history-item:hover .jj-history-item-delete { opacity: 1; }
.jj-history-item-delete:hover { background: rgb(254, 226, 226); color: rgb(239, 68, 68); }
.jj-history-item-action { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: 6px; cursor: pointer; color: rgb(156, 163, 175); transition: 0.15s; flex-shrink: 0; opacity: 0; }
.jj-history-item:hover .jj-history-item-action { opacity: 1; }
.jj-history-item-action:hover { background: rgb(220, 252, 231); color: rgb(22, 101, 52); }
.jj-history-download-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.jj-history-download-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgb(255, 255, 255); border: 1.5px solid rgb(223, 228, 234); border-radius: 8px; cursor: pointer; transition: 0.15s; flex-shrink: 0; }
.jj-history-download-btn.pdf { color: rgb(79, 70, 229); border-color: rgb(199, 210, 254); }
.jj-history-download-btn.pdf:hover { background: rgb(238, 242, 255); border-color: rgb(165, 180, 252); transform: translateY(-1px); box-shadow: rgba(79, 70, 229, 0.1) 0px 2px 4px; }
.jj-history-download-btn.excel { color: rgb(5, 150, 105); border-color: rgb(167, 243, 208); }
.jj-history-download-btn.excel:hover { background: rgb(209, 250, 229); border-color: rgb(110, 231, 183); transform: translateY(-1px); box-shadow: rgba(5, 150, 105, 0.1) 0px 2px 4px; }
.jj-history-download-btn.delete { color: rgb(220, 38, 38); border-color: rgb(254, 202, 202); }
.jj-history-download-btn.delete:hover { background: rgb(254, 226, 226); border-color: rgb(252, 165, 165); transform: translateY(-1px); box-shadow: rgba(220, 38, 38, 0.1) 0px 2px 4px; }
.jj-history-download-btn.download { color: rgb(37, 99, 235); border-color: rgb(191, 219, 254); }
.jj-history-download-btn.download:hover { background: rgb(219, 234, 254); border-color: rgb(147, 197, 253); transform: translateY(-1px); box-shadow: rgba(37, 99, 235, 0.1) 0px 2px 4px; }
.jj-delete-confirm-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: 0.2s ease 0s 1 normal none running fadeIn; }
.jj-delete-confirm-modal { background: rgb(255, 255, 255); border-radius: 16px; padding: 28px; width: 90%; max-width: 380px; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px; animation: 0.2s ease 0s 1 normal none running slideUp; text-align: center; }
.jj-delete-confirm-icon { margin-bottom: 16px; }
.jj-delete-confirm-title { font-size: 18px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px 0px 8px; }
.jj-delete-confirm-name { font-size: 14px; color: rgb(75, 85, 99); margin: 0px 0px 16px; word-break: break-all; }
.jj-delete-confirm-warning { background: rgb(254, 243, 199); border: 1px solid rgb(253, 230, 138); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; text-align: left; }
.jj-delete-confirm-warning p { font-size: 13px; color: rgb(146, 64, 14); margin: 0px; line-height: 1.5; }
.jj-delete-confirm-warning p:first-child { margin-bottom: 4px; }
.jj-delete-confirm-actions { display: flex; gap: 12px; }
.jj-delete-confirm-cancel, .jj-delete-confirm-delete { flex: 1 1 0%; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: 0.15s; }
.jj-delete-confirm-cancel { background: rgb(243, 244, 246); border: 1px solid rgb(209, 213, 219); color: rgb(55, 65, 81); }
.jj-delete-confirm-cancel:hover { background: rgb(229, 231, 235); }
.jj-delete-confirm-delete { background: rgb(239, 68, 68); border: 1px solid rgb(220, 38, 38); color: rgb(255, 255, 255); }
.jj-delete-confirm-delete:hover { background: rgb(220, 38, 38); }
@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes slideUp { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.jj-button-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0px; padding: 0px; border: 1px solid rgb(223, 228, 234); border-radius: 8px; overflow: hidden; }
.jj-button-group-item { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 12px 20px; gap: 6px; height: 44px; background: rgb(255, 255, 255); border: none; border-radius: 0px; cursor: pointer; transition: 0.2s; position: relative; }
.jj-button-group-item:nth-child(2n+1)::after { content: ""; position: absolute; right: 0px; top: 0px; bottom: 0px; width: 1px; background: rgb(223, 228, 234); }
.jj-button-group-item:nth-child(1)::before, .jj-button-group-item:nth-child(2)::before { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: rgb(223, 228, 234); }
.jj-button-group-item.active { background: rgb(30, 58, 95); }
.jj-button-group-item.active::after, .jj-button-group-item.active::before { background: rgb(223, 228, 234); }
.jj-button-group-item:hover:not(.active):not(.disabled) { background: rgb(249, 250, 251); }
.jj-button-group-item span { font-family: Inter, sans-serif; font-weight: 600; font-size: 16px; line-height: 22px; text-align: center; color: rgb(17, 25, 40); }
.jj-button-group-item.active span { color: rgb(255, 255, 255); }
.jj-button-group-item.disabled { background: rgb(243, 244, 246); cursor: not-allowed; opacity: 0.6; }
.jj-button-group-item.disabled:hover { background: rgb(243, 244, 246); }
.jj-button-group-item.disabled span { color: rgb(156, 163, 175); }
.jj-tab-nav { box-sizing: border-box; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); padding: 0px; gap: 0px; background: rgb(249, 250, 251); flex: 0 0 400px; min-width: 400px; }
.jj-tab-item { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 6px 4px; gap: 2px; background: rgb(249, 250, 251); border-top: none; border-left: none; border-image: initial; border-bottom: 2px solid rgb(223, 228, 234); border-right: 1px solid rgb(229, 231, 235); cursor: pointer; transition: 0.2s; }
.jj-tab-item:nth-child(4n) { border-right: none; }
.jj-tab-item:hover:not(.active) { background: rgb(255, 255, 255); }
.jj-tab-item.active { background: rgba(30, 58, 95, 0.1); border-bottom: 2px solid rgb(30, 58, 95); }
.jj-tab-item span { font-family: Inter, sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; text-align: center; color: rgb(99, 115, 129); }
.jj-tab-item.active span { color: rgb(30, 58, 95); }
.jj-input-panel { display: flex; flex-direction: column; gap: 12px; padding: 20px 12px 0px; height: 100%; width: 100%; min-width: 0px; overflow: hidden auto; position: relative; background: rgb(248, 250, 252); }
.jj-input-panel-header { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 0px 24px 12px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(255, 255, 255); margin: 0px -12px 8px; }
.jj-input-panel-title { font-size: 18px; font-weight: 600; color: rgb(30, 58, 95); margin: 0px 0px 8px; }
.jj-input-panel-description { font-size: 13px; line-height: 1.6; color: rgb(107, 114, 128); text-align: center; }
.jj-input-panel-description p { margin: 0px 0px 2px; }
.jj-input-panel-description p:last-child { margin-bottom: 0px; }
.jj-input-panel-description strong { color: rgb(55, 88, 249); font-weight: 600; }
.jj-promo-banner { margin-top: 12px; padding: 8px 16px; background: linear-gradient(135deg, rgb(255, 107, 107), rgb(255, 142, 83)); color: rgb(255, 255, 255); font-size: 14px; font-weight: 500; border-radius: 8px; text-align: center; animation: 2s ease-in-out 0s infinite normal none running pulse-glow; }
.jj-promo-banner strong { color: rgb(255, 255, 255); font-weight: 700; }
@keyframes pulse-glow { 
  0%, 100% { box-shadow: rgba(255, 107, 107, 0.5) 0px 0px 5px; }
  50% { box-shadow: rgba(255, 107, 107, 0.8) 0px 0px 15px; }
}
.jj-input-mode-tabs { display: flex; gap: 0px; }
.jj-input-mode-tab { padding: 6px 14px; font-size: 13px; font-weight: 600; color: rgb(148, 163, 184); background: transparent; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 2px solid transparent; cursor: pointer; transition: 0.15s; white-space: nowrap; }
.jj-input-mode-tab:hover { color: rgb(100, 116, 139); }
.jj-input-mode-tab.active { color: rgb(30, 58, 95); border-bottom-color: rgb(30, 58, 95); }
.jj-simple-input-textarea { flex: 1 1 0%; width: 100%; min-height: 200px; padding: 16px; font-size: 14px; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; line-height: 1.8; color: rgb(30, 41, 59); background: rgb(255, 255, 255); border: none; outline: none; resize: none; }
.jj-simple-input-textarea::placeholder { color: rgb(148, 163, 184); }
.jj-spreadsheet-help { padding: 10px 16px; font-size: 12px; color: rgb(100, 116, 139); background: rgb(248, 250, 252); border-top: 1px solid rgb(226, 232, 240); margin: 0px; }
.jj-spreadsheet-container { display: flex; flex-direction: column; flex: 1 1 0px; min-height: 0px; min-width: 0px; position: relative; width: 100%; background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 10px; overflow: hidden; transition: 0.3s; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px; }
.jj-spreadsheet-maximized { position: relative; width: calc(-320px + 100vw); z-index: 1000; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 24px; }
.jj-spreadsheet-maximized .jj-spreadsheet-wrapper { max-height: none; flex: 1 1 0%; }
.jj-input-panel:has(.jj-spreadsheet-maximized) { overflow: visible; }
.jj-panel-left:has(.jj-spreadsheet-maximized) { overflow: visible; z-index: 999; }
.jj-syntax-spreadsheet:has(.jj-spreadsheet-maximized) { overflow: visible; }
.jj-spreadsheet-maximize-btn { position: absolute; top: 10px; right: 10px; z-index: 10; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 6px; cursor: pointer; color: rgb(107, 114, 128); transition: 0.15s; box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px; }
.jj-spreadsheet-maximize-btn:hover { background: rgb(243, 244, 246); color: rgb(30, 58, 95); border-color: rgb(30, 58, 95); }
.jj-spreadsheet-header { display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: linear-gradient(rgb(255, 255, 255), rgb(250, 251, 252)); border-bottom: 1px solid rgb(226, 232, 240); }
.jj-spreadsheet-title { font-size: 13px; font-weight: 600; color: rgb(30, 41, 59); margin: 0px; display: flex; align-items: center; gap: 6px; }
.jj-spreadsheet-title::before { content: ""; width: 3px; height: 14px; background: rgb(59, 130, 246); border-radius: 2px; }
.jj-spreadsheet-add-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(59, 130, 246); background: rgb(239, 246, 255); border: 1px solid rgb(191, 219, 254); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-spreadsheet-add-btn:hover { background: rgb(219, 234, 254); border-color: rgb(147, 197, 253); }
.jj-spreadsheet-shuffle-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(124, 58, 237); background: rgb(245, 243, 255); border: 1px solid rgb(221, 214, 254); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-spreadsheet-shuffle-btn:hover { background: rgb(237, 233, 254); border-color: rgb(196, 181, 253); }
.jj-spreadsheet-dedup-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(5, 150, 105); background: rgb(236, 253, 245); border: 1px solid rgb(167, 243, 208); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-spreadsheet-dedup-btn:hover { background: rgb(209, 250, 229); border-color: rgb(110, 231, 183); }
.jj-spreadsheet-wrapper { flex: 1 1 0%; overflow: auto; scrollbar-width: none; }
.jj-spreadsheet-wrapper::-webkit-scrollbar { display: none; }
.jj-spreadsheet { min-width: 1200px; border-collapse: collapse; table-layout: fixed; }
.jj-vocabulary-spreadsheet .jj-spreadsheet { min-width: 0px; width: 100%; }
.jj-spreadsheet thead { position: sticky; top: 0px; z-index: 10; }
.jj-spreadsheet th { padding: 8px 10px; font-size: 11px; font-weight: 600; color: rgb(100, 116, 139); text-align: left; background: linear-gradient(rgb(248, 250, 252), rgb(241, 245, 249)); border-bottom: 1px solid rgb(226, 232, 240); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px; }
.jj-spreadsheet-row-num { position: sticky; left: 0px; z-index: 2; font-size: 11px; width: 36px !important; min-width: 36px !important; max-width: 36px !important; text-align: center !important; color: rgb(156, 163, 175) !important; background: rgb(249, 250, 251) !important; border-right: none !important; padding: 0px !important; }
.jj-spreadsheet-drag-handle { cursor: grab; display: flex; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 100%; min-height: 36px; padding: 4px 0px; }
.jj-spreadsheet-drag-handle:active { cursor: grabbing; }
.jj-drag-icon { color: rgb(203, 213, 225); flex-shrink: 0; transition: color 0.15s; }
.jj-row-number { color: rgb(156, 163, 175); font-size: 11px; font-weight: 500; }
.jj-spreadsheet-drag-handle:hover .jj-drag-icon, .jj-spreadsheet-drag-handle:hover .jj-row-number { color: rgb(100, 116, 139); }
.jj-spreadsheet tbody tr.dragging { background: rgb(239, 246, 255); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.jj-spreadsheet tbody tr.dragging td { background: rgb(239, 246, 255); }
.jj-spreadsheet th.jj-spreadsheet-row-num, .jj-spreadsheet th.jj-spreadsheet-actions { z-index: 11; }
.jj-spreadsheet-word-col { position: sticky !important; left: 96px !important; z-index: 2 !important; background: rgb(255, 255, 255) !important; border-right: 2px solid rgb(223, 228, 234) !important; }
.jj-spreadsheet th.jj-spreadsheet-word-col { z-index: 11 !important; background: rgb(243, 244, 246) !important; }
.jj-spreadsheet tbody tr:hover .jj-spreadsheet-word-col { background: rgb(249, 250, 251) !important; }
.jj-spreadsheet tbody tr.selected-row .jj-spreadsheet-word-col, .jj-spreadsheet tbody tr.selected-row .jj-spreadsheet-actions, .jj-spreadsheet tbody tr.selected-row .jj-spreadsheet-row-num { background: rgb(240, 243, 247) !important; }
.jj-spreadsheet-checkbox-col { background: rgb(249, 250, 251); width: 24px !important; min-width: 24px !important; max-width: 24px !important; text-align: center !important; padding: 0px !important; }
.jj-spreadsheet-checkbox { width: 14px; height: 14px; cursor: pointer; accent-color: rgb(30, 58, 95); }
.jj-vocabulary-layout-normal .jj-spreadsheet th:nth-child(2), .jj-vocabulary-layout-normal .jj-spreadsheet td:nth-child(2), .jj-vocabulary-layout-polysemy .jj-spreadsheet th:nth-child(2), .jj-vocabulary-layout-polysemy .jj-spreadsheet td:nth-child(2) { position: sticky; left: 36px; z-index: 2; background: rgb(249, 250, 251); border-right: none; }
.jj-vocabulary-layout-normal .jj-spreadsheet th:nth-child(2)::after, .jj-vocabulary-layout-normal .jj-spreadsheet td:nth-child(2)::after, .jj-vocabulary-layout-polysemy .jj-spreadsheet th:nth-child(2)::after, .jj-vocabulary-layout-polysemy .jj-spreadsheet td:nth-child(2)::after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; width: 2px; background: rgb(223, 228, 234); box-shadow: rgba(0, 0, 0, 0.08) 2px 0px 4px; }
.jj-vocabulary-layout-normal .jj-spreadsheet th:nth-child(2), .jj-vocabulary-layout-polysemy .jj-spreadsheet th:nth-child(2) { background: rgb(243, 244, 246); z-index: 11; }
.jj-vocabulary-layout-normal .jj-spreadsheet tbody tr:hover td:nth-child(2), .jj-vocabulary-layout-polysemy .jj-spreadsheet tbody tr:hover td:nth-child(2) { background: rgb(243, 244, 246); }
.jj-vocabulary-layout-confusing .jj-spreadsheet td:nth-child(2) { position: sticky; left: 36px; z-index: 2; background: rgb(249, 250, 251); box-shadow: rgba(0, 0, 0, 0.08) 2px 0px 4px; }
.jj-vocabulary-layout-confusing .jj-spreadsheet th:nth-child(2) { position: sticky; left: 36px; z-index: 11; background: rgb(243, 244, 246); box-shadow: rgba(0, 0, 0, 0.08) 2px 0px 4px; }
.jj-vocabulary-layout-confusing .jj-spreadsheet tbody tr:hover td:nth-child(2) { background: rgb(243, 244, 246); }
.jj-syntax-spreadsheet .jj-spreadsheet th:nth-child(2), .jj-syntax-spreadsheet .jj-spreadsheet td:nth-child(2) { position: static; background: rgb(249, 250, 251); }
.jj-syntax-spreadsheet .jj-spreadsheet th:nth-child(2) { background: rgb(243, 244, 246); }
.jj-spreadsheet tbody tr.selected-row td:nth-child(2) { background: rgba(30, 58, 95, 0.08); }
.jj-spreadsheet-flags-col { width: 140px !important; min-width: 140px !important; max-width: 200px !important; padding: 4px 6px !important; background: rgb(250, 251, 252) !important; vertical-align: middle !important; }
.jj-spreadsheet th.jj-spreadsheet-flags-col { font-size: 12px; font-weight: 600; color: rgb(107, 114, 128); text-align: center; }
.jj-spreadsheet-flags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-start; }
.jj-spreadsheet-flag { display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: 500; border-radius: 4px; white-space: nowrap; }
.jj-spreadsheet-flag-grammar { background: rgb(224, 231, 255); color: rgb(55, 48, 163); }
.jj-spreadsheet-flag-signal { background: rgb(209, 250, 229); color: rgb(6, 95, 70); }
.jj-spreadsheet-actions { border-right: 1px solid rgb(223, 228, 234); position: sticky; left: 36px; z-index: 2; transform: translateZ(0px); width: 60px !important; min-width: 60px !important; max-width: 60px !important; text-align: center !important; background-color: rgb(249, 250, 251) !important; border-left: none !important; padding: 0px !important; }
.jj-spreadsheet-actions-group { display: flex; align-items: center; justify-content: center; gap: 1px; }
.jj-spreadsheet tbody tr { transition: background 0.1s; }
.jj-spreadsheet tbody tr:hover { background: rgb(249, 250, 251); }
.jj-spreadsheet tbody tr.selected-row { background: rgba(30, 58, 95, 0.04); }
.jj-spreadsheet td { padding: 0px; border-bottom: 1px solid rgb(229, 231, 235); border-right: 1px solid rgb(229, 231, 235); vertical-align: middle; }
.jj-spreadsheet th { border-right: 1px solid rgb(223, 228, 234); }
.jj-spreadsheet td.jj-spreadsheet-row-num, .jj-spreadsheet td.jj-spreadsheet-actions { padding: 8px 4px; }
.jj-spreadsheet-cell { cursor: cell; min-height: 36px; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
.jj-spreadsheet-cell:hover { background: rgba(30, 58, 95, 0.02); }
.jj-spreadsheet-cell.selected { background: rgba(30, 58, 95, 0.06); outline: rgb(30, 58, 95) solid 2px; outline-offset: -2px; }
.jj-spreadsheet-cell.editing { padding: 0px; }
.jj-spreadsheet-cell-content { display: block; padding: 8px 12px; font-size: 13px; color: rgb(17, 25, 40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-spreadsheet-input { width: 100%; height: 100%; padding: 8px 12px; font-size: 13px; color: rgb(17, 25, 40); background: transparent; border: none; outline: none; font-family: inherit; }
.jj-spreadsheet td:nth-child(2) .jj-spreadsheet-input { background: rgb(249, 250, 251); }
.jj-spreadsheet tbody tr:hover td:nth-child(2) .jj-spreadsheet-input { background: rgb(243, 244, 246); }
.jj-spreadsheet-regenerate-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; color: rgb(156, 163, 175); background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: 0; transition: 0.15s; }
.jj-spreadsheet-regenerate-btn.regenerating { opacity: 1; color: rgb(59, 130, 246); }
.jj-spreadsheet tbody tr:hover .jj-spreadsheet-regenerate-btn { opacity: 1; }
.jj-spreadsheet-regenerate-btn:hover { color: rgb(30, 58, 95); background: rgb(224, 231, 239); }
.jj-spreadsheet-regenerate-btn:disabled { cursor: not-allowed; opacity: 0.3 !important; }
.jj-spreadsheet-delete-row-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; color: rgb(156, 163, 175); background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: 0; transition: 0.15s; }
.jj-spreadsheet tbody tr:hover .jj-spreadsheet-delete-row-btn { opacity: 1; }
.jj-spreadsheet-delete-row-btn:hover { color: rgb(220, 38, 38); background: rgb(254, 226, 226); }
.jj-spreadsheet-delete-row-btn:disabled { cursor: not-allowed; opacity: 0.3 !important; }
.jj-spreadsheet-help { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; font-size: 11px; color: rgb(148, 163, 184); background: linear-gradient(rgb(248, 250, 252), rgb(241, 245, 249)); border-top: 1px solid rgb(226, 232, 240); margin: 0px; }
.jj-spreadsheet-help kbd { display: inline-flex; align-items: center; padding: 2px 6px; font-size: 10px; font-family: inherit; color: rgb(100, 116, 139); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 4px; box-shadow: rgb(226, 232, 240) 0px 1px; }
.jj-contextual-indicator { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin: 0px 12px 6px; font-size: 12px; font-weight: 500; color: rgb(124, 58, 237); background: rgb(245, 243, 255); border: 1px solid rgb(221, 214, 254); border-radius: 8px; }
.jj-contextual-indicator-close { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: rgb(156, 163, 175); cursor: pointer; border-radius: 4px; padding: 0px; }
.jj-contextual-indicator-close:hover { color: rgb(124, 58, 237); background: rgb(237, 233, 254); }
.jj-field-selection { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0px 12px 6px; background: rgb(248, 250, 252); border: 1px solid rgb(226, 232, 240); border-radius: 8px; }
.jj-field-selection-label { font-size: 11px; font-weight: 600; color: rgb(100, 116, 139); white-space: nowrap; }
.jj-field-selection-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-field-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; font-size: 11px; color: rgb(148, 163, 184); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 12px; cursor: pointer; transition: 0.15s; user-select: none; }
.jj-field-chip input[type="checkbox"] { display: none; }
.jj-field-chip:hover { border-color: rgb(203, 213, 225); color: rgb(100, 116, 139); }
.jj-field-chip.active { color: rgb(30, 58, 95); background: rgb(224, 231, 239); border-color: rgb(176, 190, 197); }
.jj-generate-btn { display: flex; margin: 0px 12px 12px; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(30, 58, 95), rgb(21, 41, 66)); border: none; border-radius: 10px; cursor: pointer; transition: 0.2s; box-shadow: rgba(30, 58, 95, 0.25) 0px 2px 8px, rgba(255, 255, 255, 0.1) 0px 1px inset; z-index: 10; }
.jj-generate-btn:hover { background: linear-gradient(135deg, rgb(21, 41, 66), rgb(15, 29, 46)); box-shadow: rgba(30, 58, 95, 0.35) 0px 4px 12px, rgba(255, 255, 255, 0.1) 0px 1px inset; transform: translateY(-1px); }
.jj-generate-btn:active { transform: translateY(0px); box-shadow: rgba(30, 58, 95, 0.2) 0px 1px 4px; }
.jj-layout-type-selector { display: flex; gap: 0px; margin-bottom: 12px; border-radius: 8px; overflow: hidden; border: 1px solid rgb(223, 228, 234); }
.jj-layout-type-btn { flex: 1 1 0%; padding: 10px 16px; font-size: 13px; font-weight: 500; color: rgb(99, 115, 129); background: rgb(255, 255, 255); border-top: none; border-bottom: none; border-left: none; border-image: initial; cursor: pointer; transition: 0.15s; border-right: 1px solid rgb(223, 228, 234); }
.jj-layout-type-btn:last-child { border-right: none; }
.jj-layout-type-btn:hover { background: rgb(243, 244, 246); color: rgb(30, 58, 95); }
.jj-layout-type-btn.active { background: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-input-panel-source-btns { display: flex; gap: 6px; margin-bottom: 4px; }
.jj-input-panel-source-btns .jj-input-panel-btn { flex: 1 1 0%; justify-content: center; }
.jj-excel-group { display: flex; flex-direction: column; align-items: center; flex: 1 1 0%; }
.jj-excel-group .jj-input-panel-btn { width: 100%; justify-content: center; }
.jj-template-link { display: flex; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: rgb(156, 163, 175); font-size: 10px; padding: 1px 4px; margin-top: 1px; }
.jj-template-link:hover { color: rgb(107, 114, 128); text-decoration: underline; }
.jj-input-panel-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12px; font-weight: 500; color: rgb(71, 85, 105); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 8px; cursor: pointer; transition: 0.15s; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 2px; }
.jj-input-panel-btn:hover { background: rgb(248, 250, 252); border-color: rgb(203, 213, 225); color: rgb(51, 65, 85); }
.jj-input-panel-btn svg { width: 15px; height: 15px; color: rgb(100, 116, 139); }
.jj-input-panel-btn svg.rotated { transform: rotate(180deg); }
.jj-preset-dropdown { position: relative; }
.jj-preset-dropdown-menu { position: absolute; top: 100%; left: 0px; margin-top: 4px; min-width: 280px; max-height: 60vh; overflow-y: auto; background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; z-index: 100; }
.jj-preset-dropdown-header { padding: 8px 14px; font-size: 12px; font-weight: 600; color: rgb(100, 116, 139); background: rgb(248, 250, 252); cursor: default; position: sticky; top: 0px; z-index: 1; border-bottom: 1px solid rgb(226, 232, 240); }
.jj-preset-dropdown-divider { height: 1px; background: rgb(226, 232, 240); margin: 2px 0px; }
.jj-preset-chapter-item { padding-left: 24px !important; font-size: 12.5px !important; }
.jj-preset-dropdown-item { display: block; width: 100%; padding: 10px 14px; font-size: 13px; color: rgb(71, 85, 105); background: transparent; border: none; text-align: left; cursor: pointer; transition: 0.15s; }
.jj-preset-dropdown-item:hover { background: rgb(241, 245, 249); color: rgb(30, 41, 59); }
.jj-preset-dropdown-item:not(:last-child) { border-bottom: 1px solid rgb(241, 245, 249); }
.jj-preset-accordion-group { border-top: 1px solid rgb(226, 232, 240); }
.jj-preset-accordion-header { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 14px; font-size: 12px; font-weight: 600; color: rgb(100, 116, 139); background: rgb(248, 250, 252); border: none; cursor: pointer; transition: 0.15s; }
.jj-preset-accordion-header:hover { background: rgb(241, 245, 249); color: rgb(71, 85, 105); }
.jj-preset-accordion-header.expanded { color: rgb(51, 65, 85); background: rgb(239, 246, 255); border-bottom: 1px solid rgb(226, 232, 240); }
.jj-preset-chevron { transition: transform 0.2s; flex-shrink: 0; }
.jj-preset-chevron.rotated { transform: rotate(90deg); }
.jj-preset-group-label { flex: 1 1 0%; text-align: left; }
.jj-preset-group-total { font-size: 11px; font-weight: 400; color: rgb(148, 163, 184); }
.jj-preset-accordion-content { padding: 4px 0px; max-height: 280px; overflow-y: auto; }
.jj-preset-chapter-checkbox { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 24px; font-size: 12.5px; color: rgb(71, 85, 105); cursor: pointer; transition: background 0.1s; }
.jj-preset-chapter-checkbox:hover { background: rgb(241, 245, 249); }
.jj-preset-chapter-checkbox input[type="checkbox"] { width: 14px; height: 14px; accent-color: rgb(59, 130, 246); cursor: pointer; flex-shrink: 0; }
.jj-preset-select-all { font-weight: 600; color: rgb(51, 65, 85); padding-left: 14px; border-bottom: 1px solid rgb(241, 245, 249); margin-bottom: 2px; }
.jj-preset-apply-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid rgb(226, 232, 240); background: rgb(248, 250, 252); }
.jj-preset-selected-count { font-size: 11px; color: rgb(100, 116, 139); }
.jj-preset-apply-btn { padding: 5px 16px; font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(59, 130, 246); border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-preset-apply-btn:hover { background: rgb(37, 99, 235); }
.jj-preset-apply-btn:disabled { background: rgb(203, 213, 225); cursor: not-allowed; }
.jj-preset-loading { padding: 16px 14px; font-size: 12px; color: rgb(148, 163, 184); text-align: center; }
.jj-preset-search-row { position: sticky; top: 0px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(226, 232, 240); }
.jj-preset-search-input { flex: 1 1 0%; padding: 6px 10px; font-size: 12px; color: rgb(30, 41, 59); background: rgb(248, 250, 252); border: 1px solid rgb(226, 232, 240); border-radius: 6px; outline: none; transition: border-color 0.15s, background 0.15s; }
.jj-preset-search-input:focus { border-color: rgb(59, 130, 246); background: rgb(255, 255, 255); }
.jj-preset-search-clear { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgb(100, 116, 139); background: rgb(241, 245, 249); border: none; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.jj-preset-search-clear:hover { background: rgb(226, 232, 240); color: rgb(30, 41, 59); }
.jj-preset-category-block { border-top: 1px solid rgb(226, 232, 240); }
.jj-preset-category-header { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px; font-size: 12px; font-weight: 700; color: rgb(30, 41, 59); background: rgb(248, 250, 252); border: none; cursor: pointer; text-align: left; transition: background 0.15s; }
.jj-preset-category-header:hover { background: rgb(241, 245, 249); }
.jj-preset-category-header.expanded { background: rgb(239, 246, 255); color: rgb(29, 78, 216); }
.jj-preset-category-label { flex: 1 1 0%; text-align: left; }
.jj-preset-category-count { font-size: 11px; font-weight: 500; color: rgb(148, 163, 184); background: rgb(241, 245, 249); padding: 1px 7px; border-radius: 10px; }
.jj-preset-accordion-group--nested .jj-preset-accordion-header { padding-left: 26px; }
.jj-preset-chapter-block { border-bottom: 1px solid rgb(241, 245, 249); }
.jj-preset-chapter-header { align-items: center; gap: 8px; padding: 7px 14px 7px 24px; font-weight: 600; color: rgb(51, 65, 85); background: rgb(250, 251, 252); cursor: default; display: flex !important; }
.jj-preset-chapter-header:hover { background: rgb(241, 245, 249); }
.jj-preset-chapter-header.all { color: rgb(29, 78, 216); background: rgb(239, 246, 255); }
.jj-preset-chapter-header.some { color: rgb(29, 78, 216); }
.jj-preset-chapter-header-label { flex: 1 1 0%; cursor: pointer; font-size: 12.5px; }
.jj-preset-chapter-header-count { font-weight: 400; color: rgb(148, 163, 184); font-size: 11.5px; margin-left: 2px; }
.jj-preset-chapter-expand-btn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: rgb(100, 116, 139); border-radius: 4px; flex-shrink: 0; }
.jj-preset-chapter-expand-btn:hover { background: rgb(226, 232, 240); color: rgb(30, 41, 59); }
.jj-preset-section-item { padding-left: 44px !important; font-size: 12px !important; color: rgb(100, 116, 139) !important; }
.jj-preset-section-item:hover { background: rgb(248, 250, 252) !important; }
.jj-exam-example-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.jj-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-size: 12px; font-weight: 500; color: rgb(100, 116, 139); background: rgb(241, 245, 249); border: 1px solid rgb(226, 232, 240); border-radius: 8px; cursor: pointer; transition: 0.15s; flex: 1 1 0%; }
.jj-toggle-btn:hover { background: rgb(226, 232, 240); color: rgb(71, 85, 105); }
.jj-toggle-btn.active { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); }
.jj-toggle-btn.active svg { color: rgb(255, 255, 255); }
.jj-exam-select { padding: 8px 12px; font-size: 13px; font-weight: 500; color: rgb(30, 58, 95); background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 8px; cursor: pointer; transition: 0.15s; outline: none; }
.jj-exam-select:hover { border-color: rgb(30, 58, 95); }
.jj-exam-select:focus { border-color: rgb(30, 58, 95); box-shadow: rgba(30, 58, 95, 0.1) 0px 0px 0px 2px; }
.jj-exam-select-group { display: flex; align-items: center; gap: 6px; flex: 1 1 0%; }
.jj-exam-select-group .jj-exam-select { flex: 1 1 0%; }
.jj-exam-label { font-size: 13px; font-weight: 500; color: rgb(107, 114, 128); white-space: nowrap; }
.jj-spreadsheet-header-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; justify-content: flex-end; }
.jj-spreadsheet-clear-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(220, 38, 38); background: rgb(254, 242, 242); border: 1px solid rgb(254, 202, 202); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-spreadsheet-clear-btn:hover { background: rgb(254, 226, 226); border-color: rgb(248, 113, 113); }
.jj-passage-modal { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 48px; width: 95vw; max-width: 1400px; height: 85vh; max-height: 900px; display: flex; flex-direction: column; overflow: hidden; }
.jj-passage-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgb(223, 228, 234); }
.jj-passage-modal-header h2 { font-size: 18px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px; }
.jj-modal-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; border-radius: 8px; color: rgb(99, 115, 129); cursor: pointer; transition: 0.15s; }
.jj-modal-close:hover { background: rgb(243, 244, 246); color: rgb(17, 25, 40); }
.jj-passage-modal-body { flex: 1 1 0%; display: flex; overflow: hidden; }
.jj-passage-input-section { flex: 1 1 0%; display: flex; flex-direction: column; border-right: 1px solid rgb(223, 228, 234); }
.jj-passage-input-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: rgb(249, 250, 251); border-bottom: 1px solid rgb(223, 228, 234); font-size: 13px; font-weight: 600; color: rgb(99, 115, 129); }
.jj-passage-input-actions { display: flex; gap: 8px; }
.jj-passage-input-btn { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 12px; font-weight: 500; color: rgb(99, 115, 129); background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-passage-input-btn:hover { background: rgb(243, 244, 246); color: rgb(30, 58, 95); }
.jj-passage-dropzone { flex: 1 1 0%; position: relative; display: flex; flex-direction: column; }
.jj-passage-dropzone.dragging { background: rgba(30, 58, 95, 0.05); }
.jj-passage-dropzone.dragging::after { content: "이미지를 여기에 놓으세요"; position: absolute; inset: 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; color: rgb(30, 58, 95); background: rgba(255, 255, 255, 0.9); border: 2px dashed rgb(30, 58, 95); border-radius: 12px; pointer-events: none; }
.jj-passage-textarea { flex: 1 1 0%; width: 100%; padding: 20px; font-size: 15px; line-height: 1.8; color: rgb(17, 25, 40); background: transparent; border: none; outline: none; resize: none; font-family: inherit; }
.jj-passage-textarea::placeholder { color: rgb(156, 163, 175); }
.jj-passage-dropzone-hint { position: absolute; bottom: 20px; left: 50%; transform: translate(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgb(156, 163, 175); font-size: 13px; pointer-events: none; }
.jj-passage-image-preview { flex: 1 1 0%; position: relative; padding: 20px; overflow: auto; }
.jj-passage-image-preview img { max-width: 100%; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.jj-passage-image-remove { position: absolute; top: 28px; right: 28px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.6); border: none; border-radius: 8px; color: rgb(255, 255, 255); cursor: pointer; transition: background 0.15s; }
.jj-passage-image-remove:hover { background: rgba(0, 0, 0, 0.8); }
.jj-passage-preview-section { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; }
.jj-vocab-filter { padding: 8px 12px; background: rgb(249, 250, 251); border-bottom: 1px solid rgb(223, 228, 234); }
.jj-vocab-filter-header { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: rgb(17, 25, 40); }
.jj-vocab-coverage { margin-left: auto; font-size: 12px; font-weight: 400; color: rgb(99, 115, 129); }
.jj-vocab-coverage strong { color: rgb(30, 58, 95); font-weight: 600; }
.jj-vocab-filter-levels { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-vocab-level-btn { display: flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; font-weight: 500; border: 1.5px solid; border-radius: 12px; cursor: pointer; transition: 0.2s; }
.jj-vocab-level-btn:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px; }
.jj-vocab-level-count { display: flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0px 3px; font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, 0.3); border-radius: 8px; }
.jj-vocab-filter-tip { font-size: 10px; color: rgb(156, 163, 175); font-weight: 400; margin-left: 8px; }
.jj-vocab-filter-range-label { font-size: 11px; color: rgb(30, 58, 95); font-weight: 500; margin-left: auto; margin-right: 12px; padding: 2px 8px; background: rgb(232, 238, 244); border-radius: 4px; }
.jj-vocab-range-slider { padding: 4px 0px 8px; }
.jj-vocab-range-labels { display: flex; justify-content: space-between; margin-bottom: 4px; }
.jj-vocab-range-label { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; font-size: 9px; transition: 0.2s; }
.jj-vocab-range-label.active { font-weight: 600; }
.jj-vocab-range-label-text { white-space: nowrap; }
.jj-vocab-range-label-count { font-size: 10px; font-weight: 600; opacity: 0.8; }
.jj-vocab-range-track-wrapper { position: relative; height: 24px; padding: 0px 6px; cursor: pointer; }
.jj-vocab-range-track { position: absolute; top: 50%; left: 6px; right: 6px; height: 8px; transform: translateY(-50%); display: flex; border-radius: 4px; overflow: hidden; }
.jj-vocab-range-segment { position: absolute; height: 100%; transition: background-color 0.2s; }
.jj-vocab-range-input { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; appearance: none; background: transparent; pointer-events: none; z-index: 2; }
.jj-vocab-range-input::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; background: rgb(255, 255, 255); border: 2px solid rgb(30, 58, 95); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px; transition: transform 0.15s, box-shadow 0.15s; }
.jj-vocab-range-input::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px; }
.jj-vocab-range-input::-webkit-slider-thumb:active { transform: scale(1.1); background: rgb(232, 238, 244); }
.jj-vocab-range-min::-webkit-slider-thumb { border-color: rgb(34, 197, 94); }
.jj-vocab-range-max::-webkit-slider-thumb { border-color: rgb(31, 41, 55); }
.jj-passage-highlight-container { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; }
.jj-passage-highlight-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 13px; font-weight: 600; color: rgb(99, 115, 129); border-bottom: 1px solid rgb(223, 228, 234); }
.jj-passage-highlight-header-left { display: flex; align-items: center; gap: 8px; }
.jj-passage-highlight-header-right { display: flex; align-items: center; gap: 12px; }
.jj-passage-highlight-content { flex: 1 1 0%; padding: 16px; overflow: auto; }
.jj-passage-highlight-text { font-size: 13px; line-height: 1.7; color: rgb(55, 65, 81); margin: 0px; white-space: pre-wrap; }
.jj-highlighted-word { display: inline-block; padding: 1px 4px; margin: 1px 0px; border-radius: 3px; font-weight: 500; font-size: 13px; cursor: pointer; transition: opacity 0.15s, transform 0.1s; }
.jj-highlighted-word:hover { opacity: 0.85; transform: scale(1.02); }
.jj-word-included { box-shadow: rgb(245, 158, 11) 0px 0px 0px 2px; }
.jj-word-excluded { display: inline-block; padding: 1px 4px; margin: 1px 0px; border-radius: 3px; font-size: 13px; text-decoration: line-through; color: rgb(156, 163, 175); background: rgb(243, 244, 246); cursor: pointer; transition: background 0.15s; }
.jj-word-excluded:hover { background: rgb(229, 231, 235); color: rgb(107, 114, 128); }
.jj-word-manual { display: inline-block; padding: 1px 4px; margin: 1px 0px; border-radius: 3px; font-weight: 500; font-size: 13px; color: rgb(255, 255, 255); cursor: pointer; box-shadow: rgb(251, 191, 36) 0px 0px 0px 2px; transition: opacity 0.15s; }
.jj-word-manual:hover { opacity: 0.85; }
.jj-word-clickable { cursor: pointer; border-bottom: 1px dashed rgb(209, 213, 219); transition: background 0.15s, border-color 0.15s; }
.jj-word-clickable:hover { background: rgb(243, 244, 246); border-color: rgb(156, 163, 175); }
.jj-word-unknown { cursor: pointer; color: rgb(107, 114, 128); transition: background 0.15s; }
.jj-word-unknown:hover { background: rgb(254, 243, 199); }
.jj-word-loading { background: rgb(224, 242, 254); animation: 1s ease-in-out 0s infinite normal none running jj-word-pulse; }
@keyframes jj-word-pulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.jj-passage-highlight-empty { color: rgb(156, 163, 175); font-size: 14px; text-align: center; padding: 40px 20px; }
.jj-passage-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 20px; background: rgb(249, 250, 251); border-top: 1px solid rgb(223, 228, 234); }
.jj-passage-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(99, 115, 129); }
.jj-passage-legend-dot { width: 12px; height: 12px; border-radius: 3px; }
.jj-passage-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; background: rgb(249, 250, 251); border-top: 1px solid rgb(223, 228, 234); }
.jj-btn-secondary { padding: 10px 20px; font-size: 14px; font-weight: 500; color: rgb(99, 115, 129); background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-btn-secondary:hover { background: rgb(243, 244, 246); color: rgb(17, 25, 40); }
.jj-btn-primary { padding: 10px 20px; font-size: 14px; font-weight: 500; color: rgb(255, 255, 255); background: rgb(30, 58, 95); border: 1px solid rgb(30, 58, 95); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-btn-primary:hover { background: rgb(22, 45, 74); }
.jj-readability-stats { display: flex; align-items: center; gap: 12px; }
.jj-readability-stats.standalone { padding: 10px 14px; background: rgb(249, 250, 251); border-radius: 6px; margin-top: 8px; }
.jj-readability-item { display: flex; align-items: center; gap: 4px; }
.jj-readability-label { font-size: 10px; color: rgb(156, 163, 175); text-transform: uppercase; }
.jj-readability-value { font-size: 12px; font-weight: 600; color: rgb(30, 58, 95); }
.jj-readability-divider { width: 1px; height: 12px; background: rgb(223, 228, 234); }
.jj-passage-loading { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(107, 114, 128); }
.jj-passage-highlight-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px; color: rgb(107, 114, 128); }
.jj-passage-highlight-loading p { font-size: 14px; }
.jj-passage-recommend { font-size: 11px; color: rgb(30, 58, 95); background: rgb(224, 231, 255); padding: 3px 6px; border-radius: 4px; font-weight: 500; }
.jj-passage-image-notice { position: absolute; bottom: 8px; left: 0px; right: 0px; text-align: center; font-size: 12px; color: rgb(239, 68, 68); background: rgba(255, 255, 255, 0.9); padding: 4px; }
.jj-passage-ocr-status { position: absolute; bottom: 8px; left: 0px; right: 0px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: rgb(59, 130, 246); background: rgba(255, 255, 255, 0.95); padding: 8px; }
.jj-passage-camera-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; background: rgb(243, 244, 246); border: 1px solid rgb(229, 231, 235); border-radius: 6px; color: rgb(107, 114, 128); cursor: pointer; transition: 0.15s; }
.jj-passage-camera-btn:hover { background: rgb(229, 231, 235); color: rgb(55, 65, 81); border-color: rgb(209, 213, 219); }
.jj-passage-camera-btn:active { background: rgb(209, 213, 219); }
.jj-passage-camera-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.jj-btn-primary:disabled { background: rgb(156, 163, 175); border-color: rgb(156, 163, 175); cursor: not-allowed; }
.jj-passage-modal-large { max-width: 1200px; width: 95%; }
.jj-passage-db-section { padding: 12px 20px; background: rgb(248, 250, 252); border-bottom: 1px solid rgb(229, 231, 235); }
.jj-passage-db-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgb(30, 58, 95); margin-bottom: 10px; }
.jj-passage-db-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jj-passage-select { padding: 6px 12px; border: 1px solid rgb(209, 213, 219); border-radius: 6px; font-size: 13px; background: rgb(255, 255, 255); min-width: 90px; cursor: pointer; }
.jj-passage-select:focus { outline: none; border-color: rgb(30, 58, 95); }
.jj-passage-month-selector { display: flex; gap: 4px; }
.jj-passage-month-btn { padding: 5px 10px; border: 1px solid rgb(209, 213, 219); border-radius: 4px; font-size: 12px; background: rgb(255, 255, 255); cursor: pointer; transition: 0.15s; }
.jj-passage-month-btn:hover { border-color: rgb(30, 58, 95); }
.jj-passage-month-btn.selected { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-passage-load-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; }
.jj-passage-input-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgb(55, 65, 81); }
.jj-passage-count { background: rgb(30, 58, 95); color: rgb(255, 255, 255); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.jj-passage-actions { display: flex; gap: 6px; margin-left: auto; }
.jj-passage-action-btn { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid rgb(209, 213, 219); border-radius: 4px; font-size: 12px; background: rgb(255, 255, 255); color: rgb(99, 115, 129); cursor: pointer; transition: 0.15s; }
.jj-passage-action-btn:hover { border-color: rgb(30, 58, 95); color: rgb(30, 58, 95); }
.jj-passage-action-btn.danger { color: rgb(220, 38, 38); }
.jj-passage-action-btn.danger:hover { border-color: rgb(220, 38, 38); background: rgb(254, 242, 242); }
.jj-passage-action-btn.primary { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-passage-action-btn.primary:hover { background: rgb(45, 74, 111); border-color: rgb(45, 74, 111); }
.jj-passage-action-btn.primary:disabled { background: rgb(156, 163, 175); border-color: rgb(156, 163, 175); cursor: not-allowed; }
.jj-passage-list { flex: 1 1 0%; overflow-y: auto; padding: 12px 8px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 0px; }
.jj-passage-card { background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; transition: 0.15s; cursor: pointer; }
.jj-passage-card:hover { border-color: rgb(156, 163, 175); }
.jj-passage-card.selected { border-color: rgb(30, 58, 95); background: rgb(248, 250, 252); }
.jj-passage-card.selected:hover { border-color: rgb(45, 74, 111); }
.jj-passage-card.excluded { opacity: 0.6; background: rgb(249, 250, 251); }
.jj-passage-card-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgb(243, 244, 246); }
.jj-passage-checkbox { position: relative; display: flex; cursor: pointer; }
.jj-passage-checkbox input { position: absolute; opacity: 0; cursor: pointer; width: 16px; height: 16px; }
.jj-passage-checkmark { width: 16px; height: 16px; border: 2px solid rgb(209, 213, 219); border-radius: 3px; transition: 0.15s; }
.jj-passage-checkbox input:checked + .jj-passage-checkmark { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); }
.jj-passage-checkbox input:checked + .jj-passage-checkmark::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border-style: solid; border-color: white; border-image: initial; border-width: 0px 2px 2px 0px; transform: rotate(45deg); }
.jj-passage-icon { color: rgb(156, 163, 175); }
.jj-passage-source { flex: 1 1 0%; font-size: 13px; font-weight: 600; color: rgb(17, 24, 39); }
.jj-passage-expand-btn, .jj-passage-remove-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: none; border-radius: 4px; cursor: pointer; color: rgb(156, 163, 175); transition: 0.15s; }
.jj-passage-expand-btn:hover { background: rgb(243, 244, 246); color: rgb(55, 65, 81); }
.jj-passage-remove-btn:hover { background: rgb(254, 226, 226); color: rgb(220, 38, 38); }
.jj-passage-card-content { padding: 10px 12px; font-size: 12px; line-height: 1.6; color: rgb(107, 114, 128); max-height: 60px; overflow: hidden; transition: max-height 0.3s; }
.jj-passage-card-content.expanded { max-height: 300px; overflow-y: auto; }
.jj-passage-example-option { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.jj-passage-example-option input { position: absolute; opacity: 0; }
.jj-passage-example-checkmark { width: 18px; height: 18px; border: 2px solid rgb(209, 213, 219); border-radius: 4px; transition: 0.15s; position: relative; }
.jj-passage-example-option input:checked + .jj-passage-example-checkmark { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); }
.jj-passage-example-option input:checked + .jj-passage-example-checkmark::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border-style: solid; border-color: white; border-image: initial; border-width: 0px 2px 2px 0px; transform: rotate(45deg); }
.jj-passage-example-label { font-size: 13px; color: rgb(55, 65, 81); display: flex; flex-direction: column; gap: 2px; }
.jj-passage-example-desc { font-size: 11px; color: rgb(156, 163, 175); }
.jj-extract-mode-wrapper { display: flex; align-items: center; gap: 12px; }
.jj-extract-mode-selector { display: flex; background: rgb(229, 231, 235); border-radius: 8px; padding: 3px; gap: 2px; }
.jj-extract-mode-desc { font-size: 12px; color: rgb(107, 114, 128); margin: 0px; }
.jj-extract-mode-btn { padding: 8px 16px; font-size: 13px; font-weight: 500; color: rgb(107, 114, 128); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; white-space: nowrap; }
.jj-extract-mode-btn:hover { color: rgb(55, 65, 81); background: rgba(255, 255, 255, 0.5); }
.jj-extract-mode-btn.active { color: rgb(30, 58, 95); background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; }
.jj-extract-progress { flex: 1 1 0%; max-width: 300px; margin: 0px 20px; }
.jj-extract-progress-bar { height: 6px; background: rgb(229, 231, 235); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.jj-extract-progress-fill { height: 100%; background: linear-gradient(90deg, rgb(59, 130, 246), rgb(30, 58, 95)); border-radius: 3px; transition: width 0.3s; animation: 1.5s ease-in-out 0s infinite normal none running progress-pulse; }
@keyframes progress-pulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.jj-extract-progress-text { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.jj-extract-progress-step { color: rgb(30, 58, 95); font-weight: 600; min-width: 30px; }
.jj-extract-progress-message { color: rgb(107, 114, 128); animation: 1.5s ease-in-out 0s infinite normal none running fade-in-out; }
@keyframes fade-in-out { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.jj-extract-toggles { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.jj-contextual-meaning-wrapper { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgb(254, 243, 199); border-radius: 8px; margin-left: auto; }
.jj-contextual-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.jj-contextual-toggle input { display: none; }
.jj-toggle-slider { position: relative; width: 40px; height: 22px; background: rgb(209, 213, 219); border-radius: 11px; transition: 0.2s; }
.jj-toggle-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: rgb(255, 255, 255); border-radius: 50%; transition: 0.2s; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; }
.jj-contextual-toggle input:checked + .jj-toggle-slider { background: rgb(245, 158, 11); }
.jj-contextual-toggle input:checked + .jj-toggle-slider::before { transform: translate(18px); }
.jj-toggle-label { font-size: 13px; font-weight: 600; color: rgb(146, 64, 14); }
.jj-contextual-cost { font-size: 12px; color: rgb(180, 83, 9); background: rgb(253, 230, 138); padding: 2px 8px; border-radius: 4px; }
.jj-contextual-desc { font-size: 11px; color: rgb(146, 64, 14); margin: 0px; }
.jj-passage-modal-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid rgb(229, 231, 235); background: rgb(249, 250, 251); }
.jj-passage-footer-buttons { display: flex; gap: 10px; margin-left: auto; }
.jj-vocabulary-title-input { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.jj-vocabulary-title-input label { font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); white-space: nowrap; }
.jj-vocabulary-title-field { width: 200px; padding: 8px 12px; border: 1px solid rgb(209, 213, 219); border-radius: 6px; font-size: 13px; color: rgb(17, 25, 40); background: rgb(255, 255, 255); transition: border-color 0.15s, box-shadow 0.15s; }
.jj-vocabulary-title-field:focus { outline: none; border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 3px; }
.jj-vocabulary-title-field::placeholder { color: rgb(156, 163, 175); }
.jj-my-passages-modal-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.jj-my-passages-modal { background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 50px; width: 90%; max-width: 700px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.jj-my-passages-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(248, 250, 252); }
.jj-my-passages-modal-header h3 { display: flex; align-items: center; gap: 8px; margin: 0px; font-size: 16px; font-weight: 600; color: rgb(30, 58, 95); }
.jj-my-passages-filters { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(250, 251, 252); flex-wrap: wrap; }
.jj-my-passages-filter-group { display: flex; align-items: center; gap: 6px; }
.jj-my-passages-filter-label { font-size: 12px; font-weight: 500; color: rgb(107, 114, 128); }
.jj-my-passages-actions { display: flex; gap: 6px; margin-left: auto; }
.jj-my-passages-list { flex: 1 1 0%; overflow-y: auto; padding: 12px; background: rgb(255, 255, 255); max-height: 400px; }
.jj-my-passages-loading, .jj-my-passages-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; color: rgb(156, 163, 175); }
.jj-my-passages-empty p { margin: 0px; font-size: 14px; }
.jj-my-passages-empty-hint { font-size: 12px !important; color: rgb(209, 213, 219); }
.jj-my-passage-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid rgb(229, 231, 235); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: 0.15s; background: rgb(255, 255, 255); }
.jj-my-passage-item:hover { border-color: rgb(30, 58, 95); background: rgb(248, 250, 252); }
.jj-my-passage-item.selected, .jj-my-passage-item.jj-my-passage-selected { border-color: rgb(124, 58, 237); background: rgb(245, 243, 255); }
.jj-my-passage-item input[type="checkbox"] { margin-top: 2px; accent-color: rgb(30, 58, 95); }
.jj-my-passage-item-content { flex: 1 1 0%; min-width: 0px; }
.jj-my-passage-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.jj-my-passage-source { font-size: 13px; font-weight: 600; color: rgb(30, 58, 95); }
.jj-my-passage-schools { font-size: 11px; color: rgb(107, 114, 128); background: rgb(243, 244, 246); padding: 2px 6px; border-radius: 4px; }
.jj-my-passage-category { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.jj-my-passage-category-textbook { background: rgb(219, 234, 254); color: rgb(29, 78, 216); }
.jj-my-passage-category-mock_exam { background: rgb(254, 226, 226); color: rgb(220, 38, 38); }
.jj-my-passage-category-workbook { background: rgb(209, 250, 229); color: rgb(5, 150, 105); }
.jj-my-passage-category-external { background: rgb(229, 231, 235); color: rgb(75, 85, 99); }
.jj-my-passage-preview { margin: 0px; font-size: 12px; color: rgb(107, 114, 128); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jj-my-passages-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid rgb(229, 231, 235); background: rgb(249, 250, 251); }
.jj-my-passages-selected-count { font-size: 13px; color: rgb(107, 114, 128); }
.jj-my-passages-footer-buttons { display: flex; gap: 8px; }
.jj-modal-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.jj-wizard-modal { background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px; width: 90%; max-width: 1200px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.jj-wizard-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgb(223, 228, 234); }
.jj-wizard-title { font-size: 20px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px; }
.jj-wizard-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; border-radius: 6px; cursor: pointer; color: rgb(99, 115, 129); transition: 0.15s; }
.jj-wizard-close:hover { background: rgb(243, 244, 246); color: rgb(17, 25, 40); }
.jj-wizard-content-horizontal { display: flex; flex: 1 1 0%; overflow: hidden; }
.jj-wizard-panel { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; }
.jj-wizard-divider { width: 1px; background: rgb(223, 228, 234); flex-shrink: 0; }
.jj-wizard-panel-header { padding: 20px 24px; border-bottom: 1px solid rgb(223, 228, 234); background: rgb(249, 250, 251); }
.jj-wizard-panel-header h3 { font-size: 16px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px 0px 4px; }
.jj-wizard-panel-header p { font-size: 13px; color: rgb(99, 115, 129); margin: 0px; }
.jj-wizard-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgb(30, 58, 95); border-radius: 6px; color: rgb(255, 255, 255); margin-bottom: 8px; }
.jj-wizard-panel-content { flex: 1 1 0%; padding: 16px 24px; overflow-y: auto; }
.jj-db-list { display: flex; flex-direction: column; gap: 8px; }
.jj-db-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-db-item:hover { border-color: rgb(30, 58, 95); background: rgb(249, 250, 251); }
.jj-db-item.selected { border-color: rgb(30, 58, 95); background: rgb(232, 238, 244); }
.jj-db-item svg { color: rgb(30, 58, 95); flex-shrink: 0; }
.jj-db-item-info { display: flex; flex-direction: column; gap: 2px; }
.jj-db-item-name { font-size: 14px; font-weight: 500; color: rgb(17, 25, 40); }
.jj-db-item-count { font-size: 12px; color: rgb(99, 115, 129); }
.jj-word-list-header { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgb(223, 228, 234); }
.jj-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgb(17, 25, 40); cursor: pointer; }
.jj-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: rgb(30, 58, 95); cursor: pointer; }
.jj-word-list { display: flex; flex-direction: column; gap: 6px; }
.jj-word-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-word-item:hover { background: rgb(249, 250, 251); }
.jj-word-item.selected { border-color: rgb(30, 58, 95); background: rgb(232, 238, 244); }
.jj-word-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: rgb(30, 58, 95); cursor: pointer; flex-shrink: 0; }
.jj-word-item-content { display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
.jj-word-item-word { font-size: 14px; font-weight: 500; color: rgb(17, 25, 40); }
.jj-word-item-meaning { font-size: 12px; color: rgb(99, 115, 129); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-wizard-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid rgb(223, 228, 234); background: rgb(249, 250, 251); }
.jj-wizard-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(30, 58, 95), rgb(21, 41, 66)); border: none; border-radius: 10px; cursor: pointer; transition: 0.2s; box-shadow: rgba(30, 58, 95, 0.25) 0px 2px 8px, rgba(255, 255, 255, 0.1) 0px 1px inset; }
.jj-wizard-btn:hover { background: linear-gradient(135deg, rgb(21, 41, 66), rgb(15, 29, 46)); box-shadow: rgba(30, 58, 95, 0.35) 0px 4px 12px, rgba(255, 255, 255, 0.1) 0px 1px inset; transform: translateY(-1px); }
.jj-wizard-btn:active { transform: translateY(0px); box-shadow: rgba(30, 58, 95, 0.2) 0px 1px 4px; }
.jj-wizard-btn svg { width: 18px; height: 18px; color: rgb(255, 255, 255); flex-shrink: 0; }
.jj-wizard-btn span { font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); letter-spacing: -0.2px; }
.jj-wizard-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.jj-wizard-btn.secondary { background: linear-gradient(135deg, rgb(107, 114, 128), rgb(75, 85, 99)); }
.jj-wizard-btn.secondary:hover { background: linear-gradient(135deg, rgb(75, 85, 99), rgb(55, 65, 81)); }
.jj-syntax-input-area { flex: 1 1 0%; display: flex; flex-direction: column; }
.jj-syntax-textarea { flex: 1 1 0%; width: 100%; padding: 16px; font-size: 14px; line-height: 1.8; color: rgb(17, 25, 40); background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 8px; outline: none; resize: none; font-family: inherit; }
.jj-syntax-textarea::placeholder { color: rgb(156, 163, 175); }
.jj-syntax-textarea:focus { border-color: rgb(30, 58, 95); }
.jj-syntax-wizard-modal { background: rgb(17, 25, 40); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 48px; width: 95vw; max-width: 1400px; height: 90vh; max-height: 900px; display: flex; flex-direction: column; overflow: hidden; }
.jj-syntax-wizard-modal .jj-wizard-header { background: rgb(17, 25, 40); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-syntax-wizard-modal .jj-wizard-title { color: rgb(255, 255, 255); }
.jj-syntax-wizard-modal .jj-wizard-close { color: rgb(156, 163, 175); }
.jj-syntax-wizard-modal .jj-wizard-close:hover { background: rgb(55, 65, 81); color: rgb(255, 255, 255); }
.jj-syntax-wizard-modal .jj-wizard-header-left { display: flex; align-items: center; gap: 10px; }
.jj-magic-wand-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgb(75, 85, 99); border-radius: 8px; background: transparent; color: rgb(167, 139, 250); cursor: pointer; transition: 0.15s; }
.jj-magic-wand-btn:hover { background: rgb(55, 65, 81); color: rgb(196, 181, 253); border-color: rgb(107, 114, 128); }
.jj-magic-wand-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10001; }
.jj-magic-wand-modal { background: rgb(31, 41, 55); border-radius: 14px; box-shadow: rgba(0, 0, 0, 0.4) 0px 24px 48px; width: 560px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.jj-magic-wand-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-magic-wand-header-left { display: flex; align-items: center; gap: 8px; color: rgb(167, 139, 250); }
.jj-magic-wand-header-left h3 { margin: 0px; font-size: 16px; font-weight: 600; color: rgb(243, 244, 246); }
.jj-magic-wand-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: rgb(156, 163, 175); cursor: pointer; transition: 0.15s; }
.jj-magic-wand-close:hover { background: rgb(55, 65, 81); color: rgb(255, 255, 255); }
.jj-magic-wand-body { flex: 1 1 0%; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.jj-magic-wand-input-section { position: relative; }
.jj-magic-wand-textarea { width: 100%; padding: 12px 14px; border: 1px solid rgb(55, 65, 81); border-radius: 10px; background: rgb(17, 25, 40); color: rgb(243, 244, 246); font-size: 14px; line-height: 1.6; resize: none; outline: none; transition: border-color 0.15s; box-sizing: border-box; }
.jj-magic-wand-textarea:focus { border-color: rgb(99, 102, 241); }
.jj-magic-wand-textarea::placeholder { color: rgb(107, 114, 128); }
.jj-magic-wand-analyzing { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: rgb(156, 163, 175); }
.jj-magic-wand-results { min-height: 100px; }
.jj-magic-wand-placeholder { display: flex; align-items: center; justify-content: center; min-height: 100px; color: rgb(107, 114, 128); font-size: 13px; text-align: center; }
.jj-magic-wand-flags { display: flex; flex-direction: column; gap: 12px; }
.jj-magic-wand-category { display: flex; flex-direction: column; gap: 6px; }
.jj-magic-wand-category-label { font-size: 11px; font-weight: 600; color: rgb(156, 163, 175); text-transform: uppercase; letter-spacing: 0.05em; }
.jj-magic-wand-category-items { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-magic-wand-flag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid rgb(55, 65, 81); border-radius: 6px; background: rgb(17, 25, 40); color: rgb(209, 213, 219); font-size: 12px; cursor: pointer; transition: 0.15s; }
.jj-magic-wand-flag:hover { border-color: rgb(99, 102, 241); color: rgb(243, 244, 246); }
.jj-magic-wand-flag.selected { background: rgba(99, 102, 241, 0.15); border-color: rgb(99, 102, 241); color: rgb(165, 180, 252); }
.jj-magic-wand-flag-check { font-size: 11px; width: 14px; text-align: center; color: rgb(99, 102, 241); }
.jj-magic-wand-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid rgb(55, 65, 81); }
.jj-magic-wand-footer-info { font-size: 12px; color: rgb(156, 163, 175); }
.jj-magic-wand-footer-actions { display: flex; gap: 8px; }
.jj-syntax-wizard-content { flex: 1 1 0%; display: flex; overflow: hidden; }
.jj-syntax-wizard-panel { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.jj-syntax-wizard-panel:not(:last-child)::after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; width: 1px; background: rgb(55, 65, 81); }
.jj-syntax-panel-chapters { width: 280px; min-width: 280px; max-width: 280px; flex: 0 0 auto; background: linear-gradient(rgb(26, 31, 46), rgb(21, 25, 34)); }
.jj-syntax-panel-filters { flex: 1 1 0%; min-width: 300px; display: flex; flex-direction: column; }
.jj-filter-apply-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgb(17, 25, 40); border-top: 1px solid rgb(55, 65, 81); }
.jj-filter-status-section { display: flex; align-items: center; justify-content: center; padding: 10px 16px; background: rgb(17, 25, 40); border-top: 1px solid rgb(55, 65, 81); }
.jj-filter-status-text { color: rgb(156, 163, 175); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.jj-btn-apply { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)); color: rgb(255, 255, 255); border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.jj-btn-apply:hover:not(:disabled) { background: linear-gradient(135deg, rgb(37, 99, 235), rgb(29, 78, 216)); transform: translateY(-1px); }
.jj-btn-apply:disabled { background: rgb(55, 65, 81); color: rgb(107, 114, 128); cursor: not-allowed; }
.jj-apply-hint { font-size: 12px; color: rgb(156, 163, 175); }
.jj-syntax-panel-preview { flex: 1.3 1 0%; min-width: 350px; }
.jj-syntax-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0px 20px; height: 56px; min-height: 56px; background: rgb(17, 25, 40); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-syntax-panel-header h3 { font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); margin: 0px; }
.jj-word-count-filter { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 12px; }
.jj-word-count-label { font-size: 11px; color: rgb(156, 163, 175); white-space: nowrap; }
.jj-word-count-input { width: 50px; padding: 4px 6px; font-size: 11px; background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 4px; color: rgb(255, 255, 255); text-align: center; }
.jj-word-count-input:focus { outline: none; border-color: rgb(99, 102, 241); }
.jj-word-count-sep { color: rgb(107, 114, 128); font-size: 11px; }
.jj-syntax-panel-content { flex: 1 1 0%; padding: 16px; overflow-y: auto; }
.jj-setting-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-setting-group:last-child { margin-bottom: 0px; padding-bottom: 0px; border-bottom: none; }
.jj-setting-label { display: block; font-size: 12px; font-weight: 500; color: rgb(156, 163, 175); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.jj-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.jj-chip { padding: 8px 14px; font-size: 13px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 20px; cursor: pointer; transition: 0.15s; }
.jj-chip:hover { background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-chip.selected { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(59, 130, 246); }
.jj-add-chapter-btn { display: flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 11px; font-weight: 500; color: rgb(59, 130, 246); background: transparent; border: 1px solid rgb(59, 130, 246); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-add-chapter-btn:hover:not(:disabled) { background: rgba(59, 130, 246, 0.1); }
.jj-add-chapter-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jj-chapter-hint { font-size: 12px; color: rgb(107, 114, 128); margin: 0px 0px 12px; }
.jj-chapter-list { display: flex; flex-direction: column; gap: 8px; }
.jj-chapter-item { display: flex; align-items: flex-start; gap: 8px; padding: 12px; background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-chapter-item:hover { background: rgb(75, 85, 99); }
.jj-chapter-item.selected { background: rgb(30, 58, 95); border-color: rgb(59, 130, 246); }
.jj-chapter-item.dragging { opacity: 0.8; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; }
.jj-chapter-item-drag { display: flex; align-items: center; justify-content: center; color: rgb(107, 114, 128); cursor: grab; flex-shrink: 0; height: 28px; width: 20px; }
.jj-chapter-item-drag:active { cursor: grabbing; }
.jj-chapter-item-content { flex: 1 1 0%; min-width: 0px; }
.jj-chapter-name-input { width: 100%; padding: 6px 10px; font-size: 14px; font-weight: 500; color: rgb(255, 255, 255); background: rgb(31, 41, 55); border: 1px solid rgb(55, 65, 81); border-radius: 6px; outline: none; }
.jj-chapter-name-input:focus { background: rgb(31, 41, 55); border-color: rgb(59, 130, 246); }
.jj-chapter-name-input::placeholder { color: rgb(107, 114, 128); }
.jj-chapter-meta { padding: 0px 8px; }
.jj-chapter-count { font-size: 11px; color: rgb(156, 163, 175); }
.jj-chapter-sentence-count { display: flex; align-items: center; gap: 4px; font-size: 12px; color: rgb(156, 163, 175); flex-shrink: 0; }
.jj-sentence-count-input { width: 70px; padding: 6px 10px; font-size: 13px; font-weight: 500; color: rgb(255, 255, 255); background: rgb(31, 41, 55); border: 1px solid rgb(55, 65, 81); border-radius: 6px; text-align: center; outline: none; }
.jj-sentence-count-input:focus { border-color: rgb(59, 130, 246); }
.jj-chapter-delete { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: rgb(107, 114, 128); background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: 0; transition: 0.15s; flex-shrink: 0; }
.jj-chapter-item:hover .jj-chapter-delete { opacity: 1; }
.jj-chapter-delete:hover { color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.1); }
.jj-chapter-item-row { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 6px; }
.jj-chapter-name-input { flex: 1 1 0%; min-width: 0px; }
.jj-chapter-count-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(156, 163, 175); }
.jj-chapter-count-row .jj-sentence-count-input { width: 70px; }
.jj-chapter-count-row .jj-available-count { font-size: 12px; color: rgb(107, 114, 128); }
.jj-chapter-selected-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.jj-chapter-items-row { display: flex; align-items: flex-start; gap: 8px; }
.jj-chapter-items-label { font-size: 10px; font-weight: 600; color: rgb(156, 163, 175); width: 36px; flex-shrink: 0; padding-top: 2px; }
.jj-chapter-items-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 0%; }
.jj-chapter-tag { display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: 500; border-radius: 3px; }
.jj-chapter-tag-grammar { color: rgb(147, 197, 253); background: rgba(59, 130, 246, 0.2); }
.jj-chapter-tag-signal { color: rgb(252, 165, 165); background: rgba(239, 68, 68, 0.2); }
.jj-chapter-empty-hint { font-size: 11px; color: rgb(107, 114, 128); margin-top: 6px; font-style: italic; }
.jj-selected-chapter-label { font-size: 12px; color: rgb(59, 130, 246); padding: 4px 10px; background: rgba(59, 130, 246, 0.1); border-radius: 12px; }
.jj-grammar-signal-container { display: flex; flex-direction: column; gap: 24px; }
.jj-grammar-section, .jj-signal-section { display: flex; flex-direction: column; gap: 12px; }
.jj-section-title { font-size: 13px; font-weight: 600; color: rgb(209, 213, 219); margin: 0px; padding-bottom: 8px; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-grammar-categories, .jj-signal-categories { display: flex; flex-direction: column; gap: 8px; }
.jj-grammar-flat-list, .jj-signal-flat-list { display: flex; flex-direction: column; gap: 10px; }
.jj-grammar-row, .jj-signal-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0px; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-grammar-row:last-child, .jj-signal-row:last-child { border-bottom: none; }
.jj-grammar-category-label, .jj-signal-category-label { width: 120px; min-width: 120px; font-size: 12px; font-weight: 600; color: rgb(156, 163, 175); padding-top: 4px; flex-shrink: 0; }
.jj-grammar-items-inline, .jj-signal-items-inline { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 0%; }
.jj-grammar-item-flat, .jj-signal-item-flat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-grammar-item-flat:hover, .jj-signal-item-flat:hover { background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-grammar-item-flat.selected { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(59, 130, 246); }
.jj-signal-item-flat.selected { color: rgb(255, 255, 255); background: var(--signal-color, #1E3A5F); border-color: var(--signal-color, #3B82F6); }
.jj-signal-item-flat .jj-signal-name { font-weight: 500; }
.jj-signal-item-flat .jj-signal-count { font-size: 10px; color: rgb(156, 163, 175); }
.jj-signal-item-flat.selected .jj-signal-count { color: rgba(255, 255, 255, 0.7); }
.jj-collapsible-category { background: rgb(55, 65, 81); border-radius: 8px; overflow: hidden; }
.jj-collapsible-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; font-size: 13px; font-weight: 500; color: rgb(229, 231, 235); background: transparent; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 3px solid rgb(107, 114, 128); cursor: pointer; transition: 0.15s; }
.jj-collapsible-header:hover { background: rgb(75, 85, 99); }
.jj-collapsible-title { flex: 1 1 0%; text-align: left; }
.jj-collapsible-content { padding: 12px 16px; background: rgb(45, 55, 72); }
.jj-grammar-items { display: flex; flex-wrap: wrap; gap: 8px; }
.jj-grammar-item { padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(75, 85, 99); border: 1px solid rgb(107, 114, 128); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-grammar-item:hover { background: rgb(107, 114, 128); }
.jj-grammar-item.selected { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(59, 130, 246); }
.jj-signal-items { display: flex; flex-wrap: wrap; gap: 8px; }
.jj-signal-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(75, 85, 99); border: 1px solid rgb(107, 114, 128); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-signal-item:hover { background: rgb(107, 114, 128); }
.jj-signal-item.selected { color: rgb(255, 255, 255); background: var(--signal-color, #1E3A5F); border-color: var(--signal-color, #3B82F6); }
.jj-signal-name { font-weight: 500; }
.jj-signal-count { font-size: 11px; color: rgb(156, 163, 175); }
.jj-signal-item.selected .jj-signal-count { color: rgba(255, 255, 255, 0.7); }
.jj-no-chapter-selected { display: flex; align-items: center; justify-content: center; height: 200px; font-size: 14px; color: rgb(107, 114, 128); }
.jj-syntax-wizard-modal .jj-wizard-footer { background: rgb(17, 25, 40); border-top: 1px solid rgb(55, 65, 81); justify-content: space-between; }
.jj-wizard-footer-info { font-size: 13px; color: rgb(156, 163, 175); }
.jj-wizard-footer-actions { display: flex; gap: 12px; }
.jj-syntax-wizard-modal .jj-btn-secondary { color: rgb(209, 213, 219); background: rgb(55, 65, 81); border-color: rgb(75, 85, 99); }
.jj-syntax-wizard-modal .jj-btn-secondary:hover { background: rgb(75, 85, 99); }
.jj-syntax-wizard-modal .jj-passage-actions { display: flex; align-items: center; gap: 6px; }
.jj-syntax-wizard-modal .jj-passage-actions .jj-action-btn { padding: 4px 10px; font-size: 11px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-syntax-wizard-modal .jj-passage-actions .jj-action-btn:hover { background: rgb(75, 85, 99); }
.jj-syntax-wizard-modal .jj-passage-actions .jj-action-btn.jj-btn-deselect { color: rgb(252, 165, 165); border-color: rgba(239, 68, 68, 0.3); }
.jj-syntax-wizard-modal .jj-passage-actions .jj-action-btn.jj-btn-deselect:hover { background: rgba(239, 68, 68, 0.15); }
.jj-sentence-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0px; }
.jj-sentence-filter-tab { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 500; color: rgb(156, 163, 175); background: rgb(31, 41, 55); border: 1px solid rgb(55, 65, 81); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-sentence-filter-tab:hover { background: rgb(55, 65, 81); color: rgb(209, 213, 219); }
.jj-sentence-filter-tab.active { color: rgb(255, 255, 255); background: rgb(59, 130, 246); border-color: rgb(59, 130, 246); }
.jj-sentence-filter-tab-count { font-size: 10px; opacity: 0.7; }
.jj-sentence-filter-tab.active .jj-sentence-filter-tab-count { opacity: 0.9; }
.jj-sentence-filter-tab-grammar.active { background: rgb(139, 92, 246); border-color: rgb(139, 92, 246); }
.jj-sentence-filter-tab-signal.active { background: rgb(16, 185, 129); border-color: rgb(16, 185, 129); }
.jj-sentence-filter-tab-complexity.active { background: rgb(245, 158, 11); border-color: rgb(245, 158, 11); }
.jj-filter-tabs { display: flex; border-bottom: 1px solid rgb(55, 65, 81); background: rgb(31, 41, 55); }
.jj-filter-tab { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; font-size: 13px; font-weight: 500; color: rgb(156, 163, 175); background: transparent; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 2px solid transparent; cursor: pointer; transition: 0.15s; }
.jj-filter-tab:hover { color: rgb(209, 213, 219); background: rgba(255, 255, 255, 0.05); }
.jj-filter-tab.active { color: rgb(59, 130, 246); border-bottom-color: rgb(59, 130, 246); background: rgba(59, 130, 246, 0.1); }
.jj-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0px 5px; font-size: 10px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(59, 130, 246); border-radius: 9px; }
.jj-tab-filters { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgb(31, 41, 55); border-bottom: 1px solid rgb(55, 65, 81); margin-bottom: 12px; }
.jj-tab-filter-row { display: flex; align-items: center; gap: 8px; }
.jj-tab-filter-label { font-size: 11px; font-weight: 600; color: rgb(156, 163, 175); width: 40px; flex-shrink: 0; }
.jj-tab-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-tab-filter-chip { padding: 4px 10px; font-size: 11px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 12px; cursor: pointer; transition: 0.15s; }
.jj-tab-filter-chip:hover { background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-tab-filter-chip.selected { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(59, 130, 246); }
.jj-complexity-section { display: flex; flex-direction: column; gap: 12px; }
.jj-complexity-desc { font-size: 12px; color: rgb(156, 163, 175); margin: 0px; padding: 0px 4px; }
.jj-complexity-list, .jj-complexity-group { display: flex; flex-direction: column; gap: 8px; }
.jj-complexity-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 8px; cursor: pointer; transition: 0.15s; text-align: left; }
.jj-complexity-item:hover { background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-complexity-item.selected { background: rgb(30, 58, 95); border-color: rgb(59, 130, 246); }
.jj-complexity-label { font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); }
.jj-complexity-key { font-size: 11px; font-family: monospace; color: rgb(156, 163, 175); }
.jj-complexity-item.selected .jj-complexity-key { color: rgb(147, 197, 253); }
.jj-complexity-legend { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: rgb(31, 41, 55); border-radius: 8px; margin-top: 8px; }
.jj-legend-item { font-size: 11px; color: rgb(156, 163, 175); line-height: 1.4; }
.jj-legend-item strong { color: rgb(209, 213, 219); }
.jj-chapter-tag-complexity { color: rgb(165, 243, 252); background: rgba(34, 211, 238, 0.2); }
.jj-preview-summary { display: flex; flex-direction: column; gap: 20px; }
.jj-preview-chapter-info { padding-bottom: 16px; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-preview-chapter-info h4 { font-size: 18px; font-weight: 600; color: rgb(255, 255, 255); margin: 0px 0px 4px; }
.jj-preview-chapter-info p { font-size: 13px; color: rgb(156, 163, 175); margin: 0px; }
.jj-preview-filters { display: flex; flex-direction: column; gap: 16px; }
.jj-preview-filter-group { display: flex; flex-direction: column; gap: 8px; }
.jj-preview-filter-label { font-size: 12px; font-weight: 600; color: rgb(156, 163, 175); text-transform: uppercase; letter-spacing: 0.5px; }
.jj-preview-filter-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-preview-tag { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: 4px; }
.jj-preview-tag-grammar { color: rgb(147, 197, 253); background: rgba(59, 130, 246, 0.2); }
.jj-preview-tag-signal { color: rgb(252, 165, 165); background: rgba(239, 68, 68, 0.2); }
.jj-preview-tag-complexity { color: rgb(165, 243, 252); background: rgba(34, 211, 238, 0.2); }
.jj-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.jj-preview-empty p { font-size: 14px; color: rgb(107, 114, 128); margin: 0px; }
.jj-preview-hint { font-size: 12px !important; color: rgb(75, 85, 99) !important; margin-top: 8px !important; }
.jj-preview-count { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: rgb(31, 41, 55); border-radius: 8px; margin-top: 8px; }
.jj-preview-count-label { font-size: 13px; color: rgb(156, 163, 175); }
.jj-preview-count-value { font-size: 16px; font-weight: 600; color: rgb(59, 130, 246); }
.jj-chapter-section { display: flex; flex-direction: column; gap: 8px; }
.jj-preview-chapter-tabs { display: flex; gap: 4px; padding: 8px 12px; background: rgb(31, 41, 55); border-bottom: 1px solid rgb(55, 65, 81); overflow-x: auto; }
.jj-preview-chapter-tab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(156, 163, 175); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 6px; cursor: pointer; transition: 0.15s; white-space: nowrap; }
.jj-preview-chapter-tab:hover { background: rgb(75, 85, 99); color: rgb(209, 213, 219); }
.jj-preview-chapter-tab.active { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(59, 130, 246); }
.jj-preview-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0px 4px; font-size: 10px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(107, 114, 128); border-radius: 8px; }
.jj-preview-chapter-tab.active .jj-preview-tab-count { background: rgb(59, 130, 246); }
.jj-sentence-preview { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0px; }
.jj-preview-chapter-summary { padding: 12px; background: rgb(31, 41, 55); border-radius: 8px; }
.jj-preview-chapter-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jj-preview-chapter-name { font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); }
.jj-preview-chapter-count { font-size: 12px; color: rgb(156, 163, 175); }
.jj-preview-active-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-mini-tag { display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: 500; border-radius: 3px; }
.jj-mini-tag-grammar { color: rgb(147, 197, 253); background: rgba(59, 130, 246, 0.2); }
.jj-mini-tag-signal { color: rgb(252, 165, 165); background: rgba(239, 68, 68, 0.2); }
.jj-mini-tag-complexity { color: rgb(165, 243, 252); background: rgba(34, 211, 238, 0.2); }
.jj-mini-tag-clickable { cursor: pointer; transition: 0.15s; }
.jj-mini-tag-clickable:hover { transform: scale(1.05); filter: brightness(1.2); }
.jj-mini-tag-grammar.jj-mini-tag-clickable:hover { background: rgba(59, 130, 246, 0.35); }
.jj-mini-tag-signal.jj-mini-tag-clickable:hover { background: rgba(239, 68, 68, 0.35); }
.jj-mini-tag-complexity.jj-mini-tag-clickable:hover { background: rgba(34, 211, 238, 0.35); }
.jj-mini-tag-count { margin-left: 2px; opacity: 0.8; font-weight: 600; }
.jj-sentence-highlight { animation: 1.5s ease-out 0s 1 normal none running sentenceHighlight; }
@keyframes sentenceHighlight { 
  0% { box-shadow: rgba(59, 130, 246, 0.6) 0px 0px 0px 3px; background: rgba(59, 130, 246, 0.15); }
  100% { box-shadow: rgba(59, 130, 246, 0) 0px 0px; background: transparent; }
}
.jj-sentence-preview-list { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0%; min-height: 0px; }
.jj-sentence-summary-bar { display: flex; align-items: center; gap: 16px; padding: 8px 12px; background: rgb(31, 41, 55); border-radius: 6px; font-size: 12px; }
.jj-summary-filtered { color: rgb(156, 163, 175); font-size: 11px; }
.jj-summary-total { color: rgb(107, 114, 128); }
.jj-summary-selected, .jj-summary-unselected { display: flex; align-items: center; gap: 6px; color: rgb(209, 213, 219); }
.jj-summary-dot { width: 8px; height: 8px; border-radius: 50%; }
.jj-summary-dot.selected { background: rgb(59, 130, 246); }
.jj-summary-dot.unselected { background: rgb(107, 114, 128); }
.jj-summary-sort { margin-left: auto; }
.jj-sort-select { padding: 4px 8px; font-size: 11px; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 4px; cursor: pointer; outline: none; }
.jj-sort-select:hover { background: rgb(75, 85, 99); }
.jj-sort-select:focus { border-color: rgb(96, 165, 250); }
.jj-sort-select option { background: rgb(31, 41, 55); color: rgb(209, 213, 219); }
.jj-sentence-list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0%; min-height: 0px; overflow-y: auto; padding-right: 4px; }
.jj-sentence-list::-webkit-scrollbar { width: 6px; }
.jj-sentence-list::-webkit-scrollbar-track { background: rgb(31, 41, 55); border-radius: 3px; }
.jj-sentence-list::-webkit-scrollbar-thumb { background: rgb(75, 85, 99); border-radius: 3px; }
.jj-sentence-list::-webkit-scrollbar-thumb:hover { background: rgb(107, 114, 128); }
.jj-sentence-loading-more { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: rgb(156, 163, 175); font-size: 13px; }
.jj-sentence-end-message { text-align: center; padding: 12px; color: rgb(107, 114, 128); font-size: 12px; font-style: italic; }
.jj-sentence-item { display: flex; gap: 12px; padding: 12px; border-radius: 8px; transition: 0.15s; }
.jj-sentence-item.jj-sentence-selected { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.4); }
.jj-sentence-item.jj-sentence-selected:hover { border-color: rgba(59, 130, 246, 0.6); }
.jj-sentence-item.jj-sentence-unselected { background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); opacity: 0.7; }
.jj-sentence-item.jj-sentence-unselected:hover { opacity: 0.85; border-color: rgb(107, 114, 128); }
.jj-sentence-item.jj-sentence-clickable { cursor: pointer; user-select: none; }
.jj-sentence-item.jj-sentence-clickable:active { transform: scale(0.98); }
.jj-sentence-item.jj-sentence-used { border-left: 3px solid rgba(239, 68, 68, 0.6); }
.jj-sentence-item.jj-sentence-used.jj-sentence-unselected { opacity: 0.55; }
.jj-sentence-eng-used { color: rgb(248, 113, 113) !important; }
.jj-indicator-used { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 12px; font-weight: 700; color: rgb(254, 202, 202); background: rgba(239, 68, 68, 0.3); border-radius: 50%; }
.jj-summary-hint { margin-left: auto; font-size: 11px; color: rgb(107, 114, 128); font-style: italic; }
.jj-sentence-indicator { display: flex; align-items: flex-start; flex-shrink: 0; }
.jj-indicator-selected { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); background: rgb(59, 130, 246); border-radius: 50%; }
.jj-indicator-unselected { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 11px; font-weight: 600; color: rgb(156, 163, 175); background: rgb(31, 41, 55); border-radius: 50%; }
.jj-sentence-content { flex: 1 1 0%; min-width: 0px; }
.jj-sentence-eng { font-size: 13px; font-weight: 500; color: rgb(255, 255, 255); margin: 0px 0px 4px; line-height: 1.5; }
.jj-sentence-kor { font-size: 12px; color: rgb(156, 163, 175); margin: 0px 0px 8px; line-height: 1.4; }
.jj-sentence-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jj-sentence-source, .jj-sentence-difficulty, .jj-sentence-wordcount { font-size: 10px; color: rgb(107, 114, 128); padding: 2px 6px; background: rgb(31, 41, 55); border-radius: 3px; }
.jj-sentence-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-sentence-flag { font-size: 9px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.jj-sentence-flag.jj-flag-grammar { background: rgba(59, 130, 246, 0.2); color: rgb(147, 197, 253); border: 1px solid rgba(59, 130, 246, 0.3); }
.jj-sentence-flag.jj-flag-signal { background: rgba(139, 92, 246, 0.2); color: rgb(196, 181, 253); border: 1px solid rgba(139, 92, 246, 0.3); }
.jj-sentence-flag.jj-flag-more { background: rgba(107, 114, 128, 0.2); color: rgb(156, 163, 175); border: 1px solid rgba(107, 114, 128, 0.3); }
.jj-preview-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: rgb(156, 163, 175); }
.jj-preview-loading p { margin: 12px 0px 0px; font-size: 13px; }
.jj-preview-more-hint { text-align: center; padding: 12px; font-size: 12px; color: rgb(107, 114, 128); font-style: italic; }
.jj-pdf-modal { background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px; width: 400px; max-width: 90%; overflow: hidden; }
.jj-pdf-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgb(223, 228, 234); }
.jj-pdf-modal-title { font-size: 20px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px; }
.jj-pdf-modal-content { padding: 20px 24px; }
.jj-pdf-stats { display: flex; flex-direction: column; gap: 8px; }
.jj-pdf-stat-row { display: flex; align-items: center; justify-content: space-between; }
.jj-pdf-stat-label { font-size: 14px; color: rgb(55, 65, 81); flex: 1 1 0%; }
.jj-pdf-stat-count { font-size: 13px; color: rgb(107, 114, 128); width: 100px; text-align: center; }
.jj-pdf-stat-points { font-size: 14px; font-weight: 600; color: rgb(17, 25, 40); width: 60px; text-align: right; }
.jj-pdf-divider { height: 1px; background: rgb(223, 228, 234); margin: 14px 0px; }
.jj-pdf-divider-thin { height: 1px; background: rgb(229, 231, 235); margin: 8px 0px; }
.jj-pdf-summary { display: flex; flex-direction: column; gap: 6px; }
.jj-pdf-summary-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: rgb(55, 65, 81); }
.jj-pdf-summary-total { font-weight: 600; color: rgb(17, 25, 40); font-size: 16px; }
.jj-pdf-points-value { font-weight: 600; color: rgb(17, 25, 40); }
.jj-pdf-points-minus, .jj-pdf-points-error { color: rgb(239, 68, 68); }
.jj-pdf-error { margin-top: 16px; padding: 12px; background: rgb(254, 242, 242); border: 1px solid rgb(254, 202, 202); border-radius: 8px; color: rgb(220, 38, 38); font-size: 13px; text-align: center; }
.jj-pdf-modal-footer { padding: 16px 24px; border-top: 1px solid rgb(223, 228, 234); background: rgb(249, 250, 251); }
.jj-pdf-download-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(59, 130, 246); border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-pdf-download-btn:hover { background: rgb(37, 99, 235); }
.jj-pdf-download-btn.disabled { background: rgb(156, 163, 175); cursor: not-allowed; }
.jj-pdf-download-btn.disabled:hover { background: rgb(156, 163, 175); }
.jj-pdf-download-buttons { display: flex; gap: 12px; width: 100%; }
.jj-pdf-download-buttons .jj-pdf-download-btn { flex: 1 1 0%; }
.jj-pdf-download-btn-excel { background: rgb(5, 150, 105); }
.jj-pdf-download-btn-excel:hover { background: rgb(4, 120, 87); }
.jj-pdf-download-notice { padding: 24px 0px; text-align: center; }
.jj-pdf-download-notice p { margin: 0px; padding: 8px 0px; font-size: 15px; line-height: 1.6; color: rgb(75, 85, 99); }
.jj-pdf-download-notice p strong { color: rgb(31, 41, 55); font-weight: 600; }
.jj-pdf-download-notice-compact { padding: 8px 14px; background: rgb(240, 253, 244); border-radius: 6px; margin-bottom: 8px; }
.jj-pdf-download-notice-compact span { font-size: 13px; color: rgb(21, 128, 61); line-height: 1.4; }
.jj-pdf-download-notice-compact strong { color: rgb(22, 101, 52); font-weight: 600; }
.jj-pdf-payment-info { padding: 16px 24px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgb(243, 244, 246); }
.jj-pdf-payment-label { font-size: 13px; color: rgb(107, 114, 128); }
.jj-pdf-payment-methods { display: flex; gap: 8px; }
.jj-pdf-payment-method { font-size: 12px; color: rgb(55, 65, 81); background: rgb(243, 244, 246); padding: 4px 10px; border-radius: 4px; }
.jj-charge-btn { display: flex; align-items: center; gap: 4px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: rgb(120, 53, 15); background: linear-gradient(135deg, rgb(252, 211, 77), rgb(245, 158, 11)); border: none; border-radius: 4px; cursor: pointer; transition: 0.2s; box-shadow: rgba(245, 158, 11, 0.3) 0px 1px 2px; }
.jj-charge-btn:hover { background: linear-gradient(135deg, rgb(253, 230, 138), rgb(251, 191, 36)); box-shadow: rgba(245, 158, 11, 0.4) 0px 2px 4px; }
.jj-logout-btn { display: flex; align-items: center; justify-content: center; padding: 4px 10px; font-size: 12px; font-weight: 600; color: rgb(100, 116, 139); background: linear-gradient(135deg, rgb(241, 245, 249), rgb(226, 232, 240)); border: 1px solid rgb(203, 213, 225); border-radius: 6px; cursor: pointer; transition: 0.2s; box-shadow: rgba(100, 116, 139, 0.2) 0px 1px 2px; }
.jj-logout-btn:hover { color: rgb(71, 85, 105); background: linear-gradient(135deg, rgb(226, 232, 240), rgb(203, 213, 225)); border-color: rgb(148, 163, 184); box-shadow: rgba(100, 116, 139, 0.3) 0px 2px 4px; }
.jj-charge-modal { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px; width: 900px; max-width: 95%; overflow: hidden; }
.jj-charge-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 32px 32px 24px; text-align: center; }
.jj-charge-modal-header > div { flex: 1 1 0%; }
.jj-charge-modal-label { display: block; font-size: 14px; font-weight: 600; color: rgb(59, 130, 246); margin-bottom: 8px; }
.jj-charge-modal-title { font-size: 28px; font-weight: 700; color: rgb(17, 25, 40); margin: 0px 0px 8px; }
.jj-charge-modal-desc { font-size: 14px; color: rgb(107, 114, 128); margin: 0px; }
.jj-charge-modal-desc strong { color: rgb(30, 58, 95); }
.jj-charge-plans { display: flex; gap: 24px; padding: 0px 32px 32px; justify-content: center; }
.jj-charge-plan-card { flex: 1 1 0%; max-width: 280px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 12px; padding: 32px 24px; cursor: pointer; transition: 0.2s; position: relative; }
.jj-charge-plan-card:hover { border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.15) 0px 4px 12px; }
.jj-charge-plan-card.selected { border-color: rgb(59, 130, 246); border-width: 2px; box-shadow: rgba(59, 130, 246, 0.2) 0px 4px 16px; }
.jj-charge-plan-card.recommended { border-color: rgb(59, 130, 246); }
.jj-charge-plan-badge { position: absolute; top: 0px; right: 20px; background: rgb(59, 130, 246); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 0px 0px 8px 8px; writing-mode: vertical-rl; text-orientation: mixed; }
.jj-charge-plan-name { font-size: 18px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px 0px 16px; }
.jj-charge-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 24px; }
.jj-charge-plan-currency { font-size: 20px; font-weight: 500; color: rgb(17, 25, 40); }
.jj-charge-plan-amount { font-size: 48px; font-weight: 700; color: rgb(17, 25, 40); line-height: 1; }
.jj-charge-plan-unit { font-size: 16px; color: rgb(107, 114, 128); }
.jj-charge-plan-features { margin-bottom: 24px; }
.jj-charge-plan-feature { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgb(107, 114, 128); margin-bottom: 12px; }
.jj-charge-plan-feature svg { color: rgb(59, 130, 246); flex-shrink: 0; }
.jj-charge-plan-bonus { color: rgb(16, 185, 129); font-weight: 500; }
.jj-charge-plan-bonus svg { color: rgb(16, 185, 129); }
.jj-charge-plan-total { font-size: 16px; font-weight: 600; color: rgb(30, 58, 95); text-align: center; padding: 12px; background: rgb(240, 249, 255); border-radius: 8px; margin-bottom: 16px; }
.jj-charge-plan-btn { width: 100%; padding: 14px 24px; font-size: 15px; font-weight: 600; color: rgb(59, 130, 246); background: rgb(255, 255, 255); border: 2px solid rgb(59, 130, 246); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-charge-plan-btn:hover { background: rgb(239, 246, 255); }
.jj-charge-plan-btn.selected { background: rgb(59, 130, 246); color: rgb(255, 255, 255); }
.jj-charge-modal-footer { padding: 16px 32px 24px; text-align: center; }
.jj-charge-modal-notice { font-size: 13px; color: rgb(156, 163, 175); margin: 0px; }
.jj-chapter-sidebar { width: 18%; min-width: 220px; max-width: 300px; height: 100%; background: rgb(255, 255, 255); border-left: 1px solid rgb(223, 228, 234); display: flex; flex-direction: column; overflow: hidden; }
.jj-chapter-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgb(223, 228, 234); }
.jj-chapter-sidebar-title { font-size: 13px; font-weight: 500; color: rgb(99, 115, 129); margin: 0px; }
.jj-chapter-sidebar-add-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgb(243, 244, 246); border: 1px solid rgb(223, 228, 234); border-radius: 6px; color: rgb(99, 115, 129); cursor: pointer; transition: 0.15s; }
.jj-chapter-sidebar-add-btn:hover:not(:disabled) { background: rgb(229, 231, 235); color: rgb(55, 65, 81); }
.jj-chapter-sidebar-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jj-chapter-sidebar-list { flex: 1 1 0%; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.jj-chapter-sidebar-item { position: relative; padding: 10px 12px; background: rgb(255, 255, 255); border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-chapter-sidebar-item:hover { background: rgb(249, 250, 251); border-color: rgb(223, 228, 234); }
.jj-chapter-sidebar-item.selected { background: rgb(239, 246, 255); border-color: rgb(59, 130, 246); }
.jj-chapter-sidebar-item-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.jj-chapter-sidebar-item-name { font-size: 13px; font-weight: 500; color: rgb(17, 25, 40); }
.jj-chapter-sidebar-item-count { font-size: 11px; color: rgb(99, 115, 129); }
.jj-chapter-sidebar-item-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-chapter-tag-more { font-size: 10px; color: rgb(99, 115, 129); padding: 2px 6px; background: rgb(243, 244, 246); border-radius: 4px; }
.jj-chapter-sidebar-item-delete { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: transparent; border: none; color: rgb(156, 163, 175); cursor: pointer; opacity: 0; transition: 0.15s; }
.jj-chapter-sidebar-item:hover .jj-chapter-sidebar-item-delete { opacity: 1; }
.jj-chapter-sidebar-item-delete:hover { color: rgb(239, 68, 68); }
.jj-chapter-sidebar-footer { padding: 12px 16px; border-top: 1px solid rgb(223, 228, 234); }
.jj-chapter-sidebar-count { font-size: 12px; color: rgb(99, 115, 129); }
.jj-chapter-list { display: flex; flex-direction: column; height: 100%; }
.jj-chapter-list-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(249, 250, 251); }
.jj-chapter-list-count { font-size: 11px; color: rgb(99, 115, 129); }
.jj-chapter-list-add-btn { display: flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 500; background: rgb(79, 70, 229); color: rgb(255, 255, 255); border: none; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-chapter-list-add-btn:hover:not(:disabled) { background: rgb(67, 56, 202); }
.jj-chapter-list-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jj-chapter-list-items { flex: 1 1 0%; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.jj-chapter-list-item { position: relative; padding: 10px 12px; background: rgb(255, 255, 255); border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-chapter-list-item:hover { background: rgb(249, 250, 251); border-color: rgb(223, 228, 234); }
.jj-chapter-list-item.selected { background: rgb(239, 246, 255); border-color: rgb(59, 130, 246); }
.jj-chapter-list-item-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.jj-chapter-list-item-name { font-size: 13px; font-weight: 500; color: rgb(17, 25, 40); }
.jj-chapter-list-item-count { font-size: 11px; color: rgb(99, 115, 129); }
.jj-chapter-list-item-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-chapter-list-item-delete { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: transparent; border: none; color: rgb(156, 163, 175); cursor: pointer; opacity: 0; transition: 0.15s; }
.jj-chapter-list-item:hover .jj-chapter-list-item-delete { opacity: 1; }
.jj-chapter-list-item-delete:hover { color: rgb(239, 68, 68); }
.jj-syntax-spreadsheet { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0px; overflow: hidden; background: rgb(248, 250, 252); position: relative; }
.jj-syntax-spreadsheet .jj-spreadsheet-container { margin: 0px 12px 12px; }
.jj-syntax-wizard-btn-wrapper { padding: 12px 16px; background: linear-gradient(rgb(255, 255, 255), rgb(248, 250, 252)); }
.jj-generate-btn-inline { position: relative; bottom: auto; left: auto; right: auto; width: 100%; }
.jj-syntax-chapter-area { background: linear-gradient(rgb(250, 251, 252), rgb(245, 247, 250)); padding: 12px 16px; }
.jj-syntax-chapter-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jj-syntax-chapter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: rgb(100, 116, 139); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 20px; cursor: pointer; transition: 0.15s; }
.jj-syntax-chapter-chip:hover { border-color: rgb(203, 213, 225); background: rgb(248, 250, 252); }
.jj-syntax-chapter-chip.active { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); }
.jj-syntax-chapter-chip-name { font-weight: 500; }
.jj-syntax-chapter-chip-count { font-size: 11px; padding: 2px 6px; background: rgba(0, 0, 0, 0.1); border-radius: 10px; }
.jj-syntax-chapter-chip.active .jj-syntax-chapter-chip-count { background: rgba(255, 255, 255, 0.2); }
.jj-syntax-filter-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.jj-syntax-filter-row:not(:last-child) { margin-bottom: 8px; }
.jj-syntax-filter-row-indent { padding-left: 48px; }
.jj-syntax-filter-group-inline { display: flex; align-items: center; gap: 8px; }
.jj-syntax-filter-label { font-size: 11px; font-weight: 600; color: rgb(100, 116, 139); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.jj-syntax-filter-select { padding: 6px 28px 6px 10px; font-size: 13px; font-weight: 500; color: rgb(51, 65, 85); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 8px center no-repeat rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 8px; cursor: pointer; min-width: 90px; appearance: none; transition: 0.15s; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 2px; }
.jj-syntax-filter-select:hover { border-color: rgb(203, 213, 225); background-color: rgb(250, 251, 252); }
.jj-syntax-filter-select:focus { outline: none; border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 3px; }
.jj-syntax-year-checkboxes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jj-syntax-year-checkbox { display: flex; align-items: center; gap: 0px; cursor: pointer; }
.jj-syntax-year-checkbox input[type="checkbox"] { display: none; }
.jj-syntax-year-checkbox span { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; font-size: 12px; font-weight: 500; color: rgb(100, 116, 139); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 16px; user-select: none; transition: 0.15s; }
.jj-syntax-year-checkbox:hover span { border-color: rgb(203, 213, 225); background: rgb(248, 250, 252); }
.jj-syntax-year-checkbox input[type="checkbox"]:checked + span { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); box-shadow: rgba(30, 58, 95, 0.3) 0px 1px 3px; }
.jj-syntax-spreadsheet .jj-spreadsheet-container { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; }
.jj-syntax-spreadsheet .jj-spreadsheet-wrapper { flex: 1 1 0%; overflow: auto; scrollbar-width: thin; }
.jj-syntax-spreadsheet .jj-spreadsheet-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
.jj-syntax-spreadsheet .jj-spreadsheet-wrapper::-webkit-scrollbar-track { background: rgb(241, 245, 249); border-radius: 4px; }
.jj-syntax-spreadsheet .jj-spreadsheet-wrapper::-webkit-scrollbar-thumb { background: rgb(203, 213, 225); border-radius: 4px; }
.jj-syntax-spreadsheet .jj-spreadsheet-wrapper::-webkit-scrollbar-thumb:hover { background: rgb(148, 163, 184); }
.jj-spreadsheet-textarea { width: 100%; min-height: 60px; padding: 8px; font-size: 13px; font-family: inherit; color: rgb(17, 25, 40); background: rgb(255, 255, 255); border: none; resize: none; outline: none; }
.jj-binding-modal { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px; width: 640px; max-width: 95%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.jj-binding-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 16px; }
.jj-binding-modal-title-row { display: flex; align-items: center; gap: 12px; }
.jj-binding-modal-title-row svg { color: rgb(30, 58, 95); }
.jj-binding-modal-title { font-size: 20px; font-weight: 700; color: rgb(17, 25, 40); margin: 0px; }
.jj-binding-pdf-edit-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: rgb(30, 58, 95); background: rgb(239, 246, 255); border: 1px solid rgb(191, 219, 254); border-radius: 6px; cursor: pointer; transition: 0.15s; margin-left: 12px; }
.jj-binding-pdf-edit-btn:hover { background: rgb(219, 234, 254); border-color: rgb(147, 197, 253); }
.jj-binding-pdf-edit-btn svg { color: rgb(59, 130, 246); }
.jj-binding-estimate-bar { display: flex; align-items: center; justify-content: space-between; padding: 0px 28px 16px; }
.jj-binding-estimate { display: flex; align-items: baseline; gap: 8px; }
.jj-binding-estimate-label { font-size: 14px; font-weight: 600; color: rgb(59, 130, 246); }
.jj-binding-estimate-price { font-size: 24px; font-weight: 700; color: rgb(59, 130, 246); }
.jj-binding-estimate-vat { font-size: 12px; color: rgb(156, 163, 175); }
.jj-binding-required-notice { font-size: 13px; color: rgb(59, 130, 246); text-decoration: underline; }
.jj-binding-pricing-info { position: relative; display: inline-block; }
.jj-binding-pricing-trigger { display: flex; align-items: center; gap: 4px; font-size: 13px; color: rgb(59, 130, 246); cursor: pointer; text-decoration: underline; }
.jj-binding-pricing-trigger:hover { color: rgb(37, 99, 235); }
.jj-binding-pricing-tooltip { position: absolute; top: calc(100% + 8px); right: 0px; width: 320px; padding: 16px; background: rgb(31, 41, 55); color: rgb(249, 250, 251); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 25px; font-size: 13px; line-height: 1.6; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: 0.2s; }
.jj-binding-pricing-info:hover .jj-binding-pricing-tooltip { opacity: 1; visibility: visible; transform: translateY(0px); }
.jj-binding-pricing-tooltip::before { content: ""; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: rgb(31, 41, 55); transform: rotate(45deg); }
.jj-binding-pricing-tooltip strong { display: block; font-size: 14px; margin-bottom: 8px; color: rgb(255, 255, 255); }
.jj-binding-pricing-tooltip p { margin: 0px 0px 10px; color: rgb(209, 213, 219); }
.jj-binding-pricing-tooltip ul { margin: 0px 0px 12px; padding-left: 20px; color: rgb(229, 231, 235); }
.jj-binding-pricing-tooltip ul li { margin-bottom: 4px; }
.jj-binding-pricing-note { font-size: 12px; color: rgb(156, 163, 175); border-top: 1px solid rgb(55, 65, 81); padding-top: 10px; margin-top: 8px; }
.jj-binding-tab-buttons { display: flex; gap: 12px; padding: 0px 28px 20px; }
.jj-binding-tab-btn { flex: 1 1 0%; padding: 14px 24px; font-size: 15px; font-weight: 600; color: rgb(107, 114, 128); background: rgb(255, 255, 255); border: 1px solid rgb(209, 213, 219); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-binding-tab-btn:hover { background: rgb(249, 250, 251); }
.jj-binding-tab-btn.active { color: rgb(17, 25, 40); border-color: rgb(17, 25, 40); background: rgb(255, 255, 255); }
.jj-binding-modal-content { flex: 1 1 0%; overflow-y: auto; padding: 0px 28px 20px; }
.jj-binding-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.jj-binding-form-field { display: flex; flex-direction: column; }
.jj-binding-form-section { margin-bottom: 16px; }
.jj-binding-label { font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); margin-bottom: 6px; }
.jj-binding-input { width: 100%; padding: 12px 14px; font-size: 14px; color: rgb(17, 25, 40); background: rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); border-radius: 8px; outline: none; transition: border-color 0.2s; }
.jj-binding-input::placeholder { color: rgb(156, 163, 175); }
.jj-binding-input:focus { border-color: rgb(59, 130, 246); background: rgb(255, 255, 255); }
.jj-binding-select { width: 100%; padding: 12px 36px 12px 14px; font-size: 14px; color: rgb(17, 25, 40); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 12px center no-repeat rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); border-radius: 8px; outline: none; cursor: pointer; transition: border-color 0.2s; appearance: none; }
.jj-binding-select:focus { border-color: rgb(59, 130, 246); background-color: rgb(255, 255, 255); }
.jj-binding-address-row { display: flex; gap: 8px; margin-bottom: 8px; }
.jj-binding-input-zip { width: 120px; flex-shrink: 0; }
.jj-binding-address-btn { display: flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: 14px; font-weight: 500; color: rgb(55, 65, 81); background: rgb(255, 255, 255); border: 1px solid rgb(209, 213, 219); border-radius: 8px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.jj-binding-address-btn:hover { background: rgb(249, 250, 251); border-color: rgb(156, 163, 175); }
.jj-binding-input-address { flex: 1 1 0%; }
.jj-binding-modal-footer { padding: 16px 28px 24px; background: rgb(249, 250, 251); border-top: 1px solid rgb(229, 231, 235); }
.jj-binding-notices { margin-bottom: 16px; }
.jj-binding-notice { font-size: 13px; color: rgb(107, 114, 128); margin: 0px 0px 4px; }
.jj-binding-notice:last-child { margin-bottom: 0px; }
.jj-binding-notice strong { color: rgb(30, 58, 95); font-weight: 600; }
.jj-binding-footer-actions { display: flex; justify-content: flex-end; gap: 12px; }
.jj-binding-cart-btn { padding: 14px 32px; font-size: 15px; font-weight: 600; color: rgb(55, 65, 81); background: rgb(255, 255, 255); border: 1px solid rgb(209, 213, 219); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-binding-cart-btn:hover:not(:disabled) { background: rgb(243, 244, 246); border-color: rgb(156, 163, 175); }
.jj-binding-cart-btn:disabled { color: rgb(156, 163, 175); cursor: not-allowed; }
.jj-binding-submit-btn { padding: 14px 32px; font-size: 15px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(30, 58, 95); border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.jj-binding-submit-btn:hover:not(:disabled) { background: rgb(21, 41, 66); }
.jj-binding-submit-btn:disabled { background: rgb(156, 163, 175); cursor: not-allowed; }
:root { --font-size: 16px; --background: #ffffff; --foreground: oklch(.145 0 0); --card: #ffffff; --card-foreground: oklch(.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(.145 0 0); --primary: #030213; --primary-foreground: oklch(1 0 0); --secondary: oklch(.95 .0058 264.53); --secondary-foreground: #030213; --muted: #ececf0; --muted-foreground: #717182; --accent: #e9ebef; --accent-foreground: #030213; --destructive: #d4183d; --destructive-foreground: #ffffff; --border: rgba(0, 0, 0, .1); --input: transparent; --input-background: #f3f3f5; --switch-background: #cbced4; --font-weight-medium: 500; --font-weight-normal: 400; --ring: oklch(.708 0 0); --chart-1: oklch(.646 .222 41.116); --chart-2: oklch(.6 .118 184.704); --chart-3: oklch(.398 .07 227.392); --chart-4: oklch(.828 .189 84.429); --chart-5: oklch(.769 .188 70.08); --radius: .625rem; --sidebar: oklch(.985 0 0); --sidebar-foreground: oklch(.145 0 0); --sidebar-primary: #030213; --sidebar-primary-foreground: oklch(.985 0 0); --sidebar-accent: oklch(.97 0 0); --sidebar-accent-foreground: oklch(.205 0 0); --sidebar-border: oklch(.922 0 0); --sidebar-ring: oklch(.708 0 0); }
.dark { --background: oklch(.145 0 0); --foreground: oklch(.985 0 0); --card: oklch(.145 0 0); --card-foreground: oklch(.985 0 0); --popover: oklch(.145 0 0); --popover-foreground: oklch(.985 0 0); --primary: oklch(.985 0 0); --primary-foreground: oklch(.205 0 0); --secondary: oklch(.269 0 0); --secondary-foreground: oklch(.985 0 0); --muted: oklch(.269 0 0); --muted-foreground: oklch(.708 0 0); --accent: oklch(.269 0 0); --accent-foreground: oklch(.985 0 0); --destructive: oklch(.396 .141 25.723); --destructive-foreground: oklch(.637 .237 25.331); --border: oklch(.269 0 0); --input: oklch(.269 0 0); --ring: oklch(.439 0 0); --font-weight-medium: 500; --font-weight-normal: 400; --chart-1: oklch(.488 .243 264.376); --chart-2: oklch(.696 .17 162.48); --chart-3: oklch(.769 .188 70.08); --chart-4: oklch(.627 .265 303.9); --chart-5: oklch(.645 .246 16.439); --sidebar: oklch(.205 0 0); --sidebar-foreground: oklch(.985 0 0); --sidebar-primary: oklch(.488 .243 264.376); --sidebar-primary-foreground: oklch(.985 0 0); --sidebar-accent: oklch(.269 0 0); --sidebar-accent-foreground: oklch(.985 0 0); --sidebar-border: oklch(.269 0 0); --sidebar-ring: oklch(.439 0 0); }
html, body { overflow-y: auto !important; height: auto !important; }
html.pdf-preview-mode, html.pdf-preview-mode body { overflow: hidden !important; height: 100% !important; }
@page { size: a4; margin: 0px; }
.a4-page { position: relative; width: 210mm; min-height: 297mm; background: rgb(255, 255, 255); box-shadow: rgba(92, 115, 160, 0.07) 0px 10px 20px; border-radius: 8px; padding: 20mm 15mm 15mm; box-sizing: border-box; break-after: page !important; }
.a4-page:last-child { break-after: auto !important; }
@media print {
  body { counter-reset: page 0; }
  .a4-page { counter-increment: page 1; }
  .page-number::after { content: counter(page); }
  html { height: auto !important; overflow: visible !important; }
  body { print-color-adjust: exact; height: auto !important; overflow: visible !important; }
  :not(table):not(thead):not(tbody):not(tr):not(td):not(th) { overflow: visible !important; }
  .vocabulary-card { break-inside: avoid !important; display: block !important; overflow: visible !important; orphans: 999 !important; widows: 999 !important; }
  .vocabulary-card * { overflow: visible !important; }
  .page-content { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .page-container { width: 100% !important; margin: 0px !important; padding: 0px !important; box-shadow: none !important; gap: 0px !important; }
  .a4-page { width: 210mm !important; min-height: 297mm !important; max-height: 297mm !important; height: 297mm !important; margin: 0px !important; padding: 20mm 15mm 15mm !important; box-shadow: none !important; background: rgb(255, 255, 255) !important; overflow: visible !important; position: relative !important; }
  .a4-page::after { display: none; }
}
.a4-measure-container { position: absolute; left: -9999px; top: 0px; pointer-events: none; width: 210mm; padding: 20mm 15mm 15mm; box-sizing: border-box; height: auto; max-height: none; min-height: auto; overflow: visible; background: rgb(255, 255, 255); display: flex; flex-direction: column; }
.a4-measure-container .page-content { display: flex; flex-direction: column; gap: 10px; }
@media screen {
  .page-container { max-width: 210mm; margin: 0px auto; display: flex; flex-direction: column; gap: 20px; }
  .a4-page { width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm; padding: 20mm 15mm 15mm; margin: 0px auto; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; position: relative; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
  .page-content { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0%; }
  .page-number-bottom-left { position: absolute; bottom: 8mm; left: 15mm; font-size: 11px; font-family: Pretendard; color: rgb(102, 102, 102); }
  .page-number-bottom-right { position: absolute; bottom: 8mm; right: 15mm; font-size: 11px; font-family: Pretendard; color: rgb(102, 102, 102); }
  .page-footer { position: absolute; bottom: 18mm; left: 15mm; right: 15mm; }
}
@media print {
  .page-number-bottom-left { position: absolute; bottom: 10mm; left: 20mm; font-size: 11px; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif; color: rgb(102, 102, 102); }
  .page-number-bottom-right { position: absolute; bottom: 10mm; right: 20mm; font-size: 11px; font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif; color: rgb(102, 102, 102); }
  .page-footer { position: absolute; bottom: 20mm; left: 20mm; right: 20mm; }
}
[data-sonner-toaster] { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; }
[data-sonner-toast] { box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 40px !important; }
@keyframes shake { 
  0%, 100% { transform: translate(0px); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-8px); }
  20%, 40%, 60%, 80% { transform: translate(8px); }
}
.animate-shake { animation: 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 1 normal both running shake; }
.question-group-layout { display: flex; gap: 20px; margin-bottom: 20px; align-items: flex-start; break-inside: avoid; }
.question-row-with-sidebar { display: flex; gap: 20px; align-items: stretch; padding-bottom: 12px; border-bottom: 1px solid rgb(229, 229, 229); break-inside: avoid; }
.questions-column { flex: 0 0 50%; max-width: 50%; overflow-wrap: break-word; }
.sidebar-column { flex: 0 0 calc(50% - 20px); max-width: calc(50% - 20px); }
.question-compact { margin-bottom: 12px; break-inside: avoid; }
.q-instruction { color: rgb(51, 51, 51); font-weight: 400; margin-bottom: 6px; line-height: 1.4; text-align: justify; }
.q-instruction.q-instruction-common { font-weight: 600; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgb(221, 221, 221); }
.q-insert-sentence { background: rgba(0, 0, 0, 0.04); padding: 8px 12px; margin: 8px 0px 12px; color: rgb(51, 51, 51); font-weight: 700; line-height: 1.6; text-align: justify; }
.question-row { display: flex; gap: 10px; margin-bottom: 8px; width: 100%; align-items: flex-start; break-inside: avoid; }
.q-number { display: inline-flex; align-items: flex-start; justify-content: center; min-width: 28px; color: var(--badge-text, #9b59b6); font-weight: 700; flex-shrink: 0; line-height: 1.4; }
.q-number.q-number-vertical { flex-direction: column; background: none; min-width: 28px; height: auto; padding: 0px; line-height: 1.2; }
.q-number-separator { font-size: 0.7em; color: rgb(153, 153, 153); transform: rotate(90deg); display: inline-block; }
.grouped-question-item { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgb(221, 221, 221); }
.grouped-question-item:first-child { margin-top: 8px; padding-top: 0px; border-top: none; }
.grouped-question-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.grouped-question-num { font-weight: 700; color: var(--badge-text, #9b59b6); flex-shrink: 0; }
.grouped-question-instruction { color: rgb(85, 85, 85); font-size: 0.9em; }
.q-content { flex: 1 1 0%; min-width: 0px; overflow-wrap: break-word; word-break: break-word; }
.q-passage { color: rgb(51, 51, 51); margin-bottom: 8px; text-align: justify; word-break: break-word; overflow-wrap: break-word; border-left: 2px solid var(--badge-text, #9b59b6); padding-left: 8px; line-height: 1.6; }
.q-choices { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.q-choices.q-choices-horizontal { flex-flow: wrap; gap: 4px 16px; }
.q-choice { color: rgb(51, 51, 51); white-space: normal; word-break: break-word; display: flex; align-items: flex-start; gap: 4px; }
.q-choice-label { flex-shrink: 0; width: 1.1em; }
.q-choice-text { flex: 1 1 0%; text-align: justify; word-spacing: -0.5px; }
.q-choices-horizontal .q-choice { display: inline; }
.q-choice.correct { font-weight: 600; color: var(--badge-text, #9b59b6); }
.myvoca-sidebar { height: 100%; display: flex; flex-direction: column; }
.myvoca-header { text-align: center; margin-bottom: 6px; }
.myvoca-title { font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--badge-text, #9b59b6); }
.myvoca-list { display: flex; flex-direction: column; gap: 6px; }
.myvoca-item { display: flex; align-items: flex-end; gap: 0px; border-bottom: 1px dotted rgb(187, 187, 187); height: 18px; }
.myvoca-num { color: var(--badge-text, #9b59b6); font-size: 9px; font-weight: 600; width: 14px; flex-shrink: 0; height: 18px; line-height: 18px; margin-right: 2px; }
.myvoca-word-box { width: 85px; height: 18px; flex-shrink: 0; }
.myvoca-arrow { color: rgb(153, 153, 153); font-size: 8px; flex-shrink: 0; margin: 0px 2px; height: 18px; line-height: 18px; }
.myvoca-meaning-line { flex: 1 1 0%; min-width: 15px; height: 18px; }
.analysis-sidebar { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; height: 100%; }
.analysis-section-title { color: var(--badge-text, #9b59b6); font-weight: 500; margin-top: 8px; }
.analysis-section-title:first-child { margin-top: 0px; }
.analysis-text { color: rgb(102, 102, 102); line-height: 1.4; }
.analysis-box-sm { min-height: 40px; background: rgb(248, 248, 248); border-radius: 4px; }
.analysis-box-md { min-height: 60px; background: rgb(248, 248, 248); border-radius: 4px; }
.analysis-box-lg { min-height: 80px; background: rgb(248, 248, 248); border-radius: 4px; flex: 1 1 0%; }
.analysis-sidebar > .analysis-box-sm:last-child, .analysis-sidebar > .analysis-box-md:last-child, .analysis-sidebar > .analysis-box-lg:last-child { flex: 1 1 0%; }
@media print {
  .question-group-layout { display: flex !important; gap: 20px !important; }
  .questions-column, .sidebar-column { flex: 5 1 0% !important; }
  .analysis-box-sm, .analysis-box-md, .analysis-box-lg { background: rgb(248, 248, 248) !important; print-color-adjust: exact !important; }
  .myvoca-item { border-bottom: 1px dashed rgb(153, 153, 153) !important; }
  .question-compact, .question-row, .question-row-with-sidebar, .q-choices { break-inside: avoid !important; }
}
.key-vocabulary-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.vocab-item { display: inline-flex; gap: 4px; align-items: baseline; }
.vocab-item strong { font-weight: 600; }
.explanation-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.category-summary-table { margin-top: 8px; display: flex; justify-content: center; }
.category-summary-table table { display: table; width: auto; border-collapse: collapse; border: 1px solid rgb(221, 221, 221); }
.category-summary-table tbody { display: table-row-group; }
.category-summary-table tr { display: table-row; border-bottom: 1px solid rgb(221, 221, 221); }
.category-summary-table tr:last-child { border-bottom: none; }
.category-summary-table td { display: table-cell; padding: 3px 12px; font-size: 9px; white-space: nowrap; }
.category-summary-table .category-name-cell { font-weight: 600; color: rgb(51, 51, 51); background: rgba(0, 0, 0, 0.03); border-right: 1px solid rgb(221, 221, 221); }
.category-summary-table .category-count-cell { font-weight: 500; color: rgb(102, 102, 102); border-right: 1px solid rgb(221, 221, 221); text-align: center; }
.category-summary-table .category-count-cell:last-child, .category-summary-table .category-count-cell.empty { border-right: none; }
.category-summary-table .category-name-cell.empty, .category-summary-table .category-count-cell.empty { background: transparent; }
.passage-summary { background: rgb(248, 245, 240); border-left: 2px solid var(--badge-text, #9b59b6); padding: 8px 12px; font-size: 8.5px; line-height: 1.5; border-radius: 0px 4px 4px 0px; }
.passage-summary .summary-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.passage-summary .summary-row:last-child { margin-bottom: 0px; }
.passage-summary .summary-label { font-weight: 600; color: var(--badge-text, #9b59b6); min-width: 28px; flex-shrink: 0; }
.passage-summary .summary-value { color: rgb(51, 51, 51); flex: 1 1 0%; }
.passage-summary .summary-divider { color: rgb(204, 204, 204); margin: 0px 4px; }
.quick-answer-table { flex-shrink: 0; margin-bottom: 16px; background: rgba(0, 0, 0, 0.024); border-radius: 8px; padding: 10px 12px; }
.quick-answer-title { text-align: right; font-size: 10px; font-weight: 500; letter-spacing: 1px; color: rgb(153, 153, 153); margin-bottom: 6px; }
.quick-answer-grid { border-collapse: collapse; width: auto; border: 1px solid rgb(204, 204, 204); }
.quick-answer-grid tr { border-bottom: 1px solid rgb(204, 204, 204); }
.quick-answer-grid tr:last-child { border-bottom: none; }
.quick-answer-cell { padding: 3px 4px; text-align: center; border-right: 1px solid rgb(204, 204, 204); white-space: nowrap; background: transparent; width: 38px; box-sizing: border-box; }
.quick-answer-cell:last-child { border-right: none; }
.quick-answer-cell:nth-child(2n+1) { background: transparent; }
.quick-answer-cell:nth-child(2n) { background: transparent; }
.quick-answer-num { font-size: 10px; font-weight: 600; color: rgb(51, 51, 51); display: inline; margin-right: 4px; }
.quick-answer-circle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--badge-text, #9b59b6); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; line-height: 1; }
.page-content.two-column-manual { display: flex; flex-direction: row; gap: 20px; }
.page-content.two-column-manual .column-left, .page-content.two-column-manual .column-right { flex: 1 1 0%; width: calc(50% - 10px); max-width: calc(50% - 10px); min-width: 0px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 6px; }
.page-content.two-column-manual .column-left { border-right: 1px solid rgb(229, 231, 235); padding-right: 10px; margin-bottom: 4px; }
.page-content.two-column-manual .column-item { break-inside: avoid; width: 100%; max-width: 100%; }
.page-content.two-column-manual .column-left > .column-item:first-child, .page-content.two-column-manual .column-right > .column-item:first-child, .page-content.two-column-manual .column-left > .column-item:first-child *, .page-content.two-column-manual .column-right > .column-item:first-child * { margin-top: 0px !important; padding-top: 0px !important; }
.page-content.two-column-layout { column-rule: 1px solid rgb(229, 231, 235); column-fill: auto; overflow: hidden; display: block !important; columns: 2 !important; column-gap: 28px !important; height: 937px !important; }
.vertical-block { break-inside: avoid; margin-bottom: 12px; }
.vertical-block.question-block { background: transparent; border-radius: 0px; padding: 12px 0px 0px; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid rgb(221, 221, 221); margin-top: 8px; }
.vertical-block.question-block:first-child { border-top: none; padding-top: 0px; margin-top: 0px; }
.vertical-block.question-block .explanation-question, .vertical-block.passage-block .explanation-question { flex: 1 1 0%; max-width: 100%; }
.vertical-block.passage-block { background: transparent; border-radius: 0px; padding: 0px; border: none; }
.vertical-block.question-block-unit { background: transparent; padding: 0px; }
.vertical-block.question-block-unit .question-block-header { margin-bottom: 8px; }
.vertical-block.question-block-unit .question-number { font-weight: 700; color: var(--badge-text, #9b59b6); }
.vertical-block.question-block-unit .question-block-content { line-height: 1.6; }
.vertical-block.explanation-block-unit { padding: 0px; margin-bottom: 16px; }
.vertical-block.grouped-passage-block { background: rgb(245, 248, 250); border-radius: 6px; padding: 12px; border: 1px solid rgb(208, 215, 222); margin-bottom: 16px; }
.block-question-header { margin-bottom: 8px; }
.block-question-number { font-weight: 700; color: var(--badge-text, #9b59b6); }
.block-question-number.grouped { color: var(--primary, #1e3a5f); }
.block-question-content { line-height: 1.6; }
.vertical-block.answer-header-block { background: rgb(240, 244, 248); border-radius: 4px; padding: 8px 12px; border-left: 3px solid var(--badge-text, #9b59b6); }
.explanation-card { display: flex; gap: 32px; margin-bottom: 20px; break-inside: avoid; }
.explanation-card.question-unit { break-inside: avoid; margin-bottom: 16px; display: block !important; }
.explanation-card.question-unit .explanation-question, .explanation-card.question-unit .explanation-content { flex: 0 0 auto !important; max-width: 100% !important; width: 100% !important; }
.explanation-card.question-unit .explanation-question { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgb(229, 229, 229); }
.explanation-card.question-unit .explanation-content { padding-left: 0px; }
.explanation-question { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); display: flex; gap: 8px; }
.explanation-question .question-number { font-weight: 700; color: var(--badge-text, #9b59b6); flex-shrink: 0; min-width: 28px; }
.explanation-question .question-number-vertical { display: flex; flex-direction: column; align-items: center; font-weight: 700; color: var(--badge-text, #9b59b6); flex-shrink: 0; min-width: 28px; line-height: 1.2; }
.explanation-question .question-number-vertical .number-separator-vertical { font-size: 0.7em; color: rgb(153, 153, 153); transform: rotate(90deg); display: inline-block; }
.explanation-question .question-content { flex: 1 1 0%; min-width: 0px; }
.explanation-question .question-passage { color: rgb(51, 51, 51); margin-bottom: 8px; text-align: justify; word-break: break-word; }
.explanation-question .question-choices { display: flex; flex-direction: column; gap: 2px; }
.explanation-question .question-choice { color: rgb(51, 51, 51); font-size: calc(9.5px * var(--font-scale, 1)); }
.explanation-question .question-choice.correct { font-weight: 700; color: var(--badge-text, #9b59b6); }
.explanation-content { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); }
.explanation-section { display: flex; flex-direction: column; gap: 12px; }
.explanation-answer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgb(238, 238, 238); }
.answer-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.answer-label-group { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
.answer-label { font-weight: 700; color: var(--badge-text, #9b59b6); font-size: 11px; white-space: nowrap; }
.answer-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--badge-text, #9b59b6); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; line-height: 1; }
.answer-text { font-size: calc(11px * var(--font-scale, 1)); color: rgb(0, 0, 0); font-weight: 700; margin-left: 4px; }
.answer-change { font-size: calc(11px * var(--font-scale, 1)); color: rgb(0, 0, 0); font-weight: 600; margin-left: 6px; }
.answer-category { font-size: 9px; color: rgb(153, 153, 153); font-weight: 500; }
.answer-right { display: flex; align-items: center; gap: 8px; }
.regenerate-controls { display: flex; align-items: center; gap: 4px; }
.hint-input { width: 120px; padding: 2px 8px; font-size: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 4px; outline: none; transition: border-color 0.2s; }
.hint-input:focus { border-color: var(--badge-text, #9b59b6); }
.hint-input:disabled { background-color: rgb(245, 245, 245); cursor: not-allowed; }
.regenerate-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; border: 1px solid rgb(221, 221, 221); border-radius: 4px; background: rgb(255, 255, 255); cursor: pointer; color: rgb(102, 102, 102); transition: 0.2s; }
.regenerate-btn:hover:not(:disabled) { border-color: var(--badge-text, #9b59b6); color: var(--badge-text, #9b59b6); background: rgb(249, 245, 255); }
.regenerate-btn:disabled { cursor: not-allowed; opacity: 0.5; }
@media print {
  .no-print { display: none !important; }
}
.answer-word { font-weight: 600; color: rgb(51, 51, 51); font-size: 12px; }
.vocab-answer-highlight { display: flex; align-items: center; gap: 8px; background: var(--badge-bg, #fdf2f8); padding: 6px 12px; border-radius: 4px; margin: 8px 0px; border: 1px solid var(--badge-border, #fbcfe8); }
.vocab-answer-label, .vocab-answer-text { font-size: 12px; font-weight: 700; color: var(--badge-text, #9b59b6); }
.grammar-header { flex-wrap: wrap; }
.grammar-header .answer-label { font-weight: 700; color: var(--badge-text, #9b59b6); font-size: 11px; }
.grammar-header .answer-change { font-weight: 500; color: rgb(51, 51, 51); font-size: 11px; }
.grammar-header .test-point { font-size: 11px; color: var(--badge-text, #9b59b6); margin-left: auto; }
.explanation-block { display: flex; flex-direction: column; gap: 4px; }
.explanation-block-title { font-size: 11px; font-weight: 700; color: var(--badge-text, #9b59b6); display: flex; align-items: center; gap: 4px; }
.explanation-block-title.highlight { background: linear-gradient(to right,var(--badge-bg, #f3e8ff),transparent); padding: 4px 8px; border-radius: 4px; }
.block-icon { font-size: 12px; }
.explanation-block-content { font-size: calc(9.5px * var(--font-scale, 1)); color: rgb(51, 51, 51); line-height: 1.6; padding-left: 4px; text-align: justify; }
.editable-content { cursor: text; outline: none; border: 1px dashed rgb(59, 130, 246); background-color: rgba(59, 130, 246, 0.05); border-radius: 4px; padding: 4px 6px; min-height: 20px; }
.editable-content:focus { border-color: rgb(37, 99, 235); background-color: rgba(59, 130, 246, 0.1); box-shadow: rgba(59, 130, 246, 0.2) 0px 0px 0px 2px; }
.editable-content:hover { background-color: rgba(59, 130, 246, 0.08); }
@media print {
  .editable-content { border: none; background-color: transparent; padding: 0px; }
}
.placeholder-text { color: rgb(153, 153, 153); font-style: italic; }
.synonym-table { width: 100%; border-collapse: separate; border-spacing: 0px; font-size: calc(10px * var(--font-scale, 1)); table-layout: fixed; }
.synonym-table tbody { display: table-row-group; }
.synonym-table tr { display: table-row; }
.synonym-table td { display: table-cell; padding: 4px 8px; border-bottom: 1px solid rgb(229, 229, 229); vertical-align: top; box-sizing: border-box; }
.synonym-table tr:last-child td { border-bottom: none; }
.synonym-table td.synonym-english, td.synonym-english, .synonym-english { width: 40%; color: rgb(0, 0, 0); font-weight: 700; }
.synonym-table td.synonym-korean, td.synonym-korean, .synonym-korean { width: 60%; color: rgb(51, 51, 51); padding-left: 20px; text-align: left; }
.wrong-explanations { display: flex; flex-direction: column; gap: 6px; }
.wrong-item { display: flex; gap: 6px; }
.wrong-label { flex-shrink: 0; font-weight: 700; color: var(--badge-text, #9b59b6); min-width: 24px; }
.wrong-text { flex: 1 1 0%; text-align: justify; }
.choice-explanations { display: flex; flex-direction: column; gap: 6px; }
.choice-item { display: flex; gap: 3px; }
.choice-item.correct { background: var(--badge-bg, #f3e8ff); padding: 4px 6px; border-radius: 4px; margin: -4px -6px; }
.choice-label { flex-shrink: 0; font-weight: 700; color: var(--badge-text, #9b59b6); min-width: 12px; }
.choice-text { flex: 1 1 0%; text-align: justify; }
.position-explanations { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 8px; background: rgb(250, 250, 250); border-radius: 4px; }
.position-item { display: flex; gap: 6px; }
.position-label { flex-shrink: 0; font-weight: 700; color: rgb(102, 102, 102); min-width: 24px; }
.position-text { flex: 1 1 0%; text-align: justify; }
.conclusion { font-weight: 500; color: var(--badge-text, #9b59b6); padding: 8px; background: var(--badge-bg, #f3e8ff); border-radius: 4px; }
.question-num-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 4px; background: var(--badge-bg, #f3e8ff); color: var(--badge-text, #9b59b6); font-size: 14px; font-weight: 700; margin-right: 8px; }
.explanation-card.grouped { padding-bottom: 20px; }
.grouped-question-choices { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgb(221, 221, 221); }
.grouped-question-choices:first-of-type { margin-top: 16px; }
.grouped-question-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.grouped-question-num { font-weight: 700; color: var(--badge-text, #9b59b6); font-size: 12px; }
.grouped-question-instruction { font-size: calc(10px * var(--font-scale, 1)); color: rgb(102, 102, 102); }
.grouped-explanation-item { padding-top: 12px; }
.grouped-explanation-item:first-child { padding-top: 0px; }
.grouped-explanation-item.mt-4 { margin-top: 16px; }
.question-passage-translation { font-style: normal; border-left: 2px solid var(--badge-text, #9b59b6); padding-left: 8px; background: linear-gradient(to right, rgba(139, 92, 246, 0.03), transparent); text-align: justify; }
.question-choice-translated { display: flex; flex-direction: row; align-items: baseline; gap: 4px; padding: 4px 6px; margin-bottom: 4px; border-radius: 4px; background: rgb(250, 250, 250); }
.question-choice-translated.correct { background: var(--badge-bg, #f3e8ff); }
.question-choice-translated .choice-label { font-weight: 700; color: var(--badge-text, #9b59b6); font-size: 11px; }
.question-choice-translated .choice-text { display: flex; flex-direction: column; gap: 1px; }
.question-choice-translated .choice-english { color: rgb(136, 136, 136); font-size: calc(8.5px * var(--font-scale, 1)); text-align: justify; }
.question-choice-translated .choice-korean { color: rgb(51, 51, 51); font-size: calc(9.5px * var(--font-scale, 1)); text-align: justify; }
.question-choice-translated .choice-korean-only { color: rgb(51, 51, 51); text-align: justify; }
@media print {
  .explanation-card { break-inside: avoid !important; }
  .explanation-header { display: flex !important; }
  .quick-answer-table { print-color-adjust: exact !important; }
  .category-summary-table { margin-top: 8px !important; display: flex !important; justify-content: center !important; }
  .category-summary-table table { width: auto !important; border-collapse: collapse !important; border: 1px solid rgb(221, 221, 221) !important; display: table !important; }
  .category-summary-table tbody { display: table-row-group !important; }
  .category-summary-table tr { display: table-row !important; border-bottom: 1px solid rgb(221, 221, 221) !important; }
  .category-summary-table tr:last-child { border-bottom: none !important; }
  .category-summary-table td { display: table-cell !important; padding: 3px 12px !important; font-size: 9px !important; white-space: nowrap !important; }
  .category-summary-table .category-name-cell { font-weight: 600 !important; color: rgb(51, 51, 51) !important; background: rgba(0, 0, 0, 0.03) !important; border-right: 1px solid rgb(221, 221, 221) !important; print-color-adjust: exact !important; }
  .category-summary-table .category-count-cell { font-weight: 500 !important; color: rgb(102, 102, 102) !important; border-right: 1px solid rgb(221, 221, 221) !important; text-align: center !important; }
  .category-summary-table .category-count-cell:last-child { border-right: none !important; }
  .category-summary-table .category-name-cell.empty, .category-summary-table .category-count-cell.empty { background: transparent !important; border-right: none !important; }
  .quick-answer-grid { border-collapse: collapse !important; display: table !important; width: auto !important; border: 1px solid rgb(204, 204, 204) !important; }
  .quick-answer-grid tbody { display: table-row-group !important; }
  .quick-answer-grid tr { display: table-row !important; border-bottom: 1px solid rgb(204, 204, 204) !important; }
  .quick-answer-grid tr:last-child { border-bottom: none !important; }
  .quick-answer-cell { display: table-cell !important; padding: 4px 8px !important; border-right: 1px solid rgb(204, 204, 204) !important; vertical-align: middle !important; white-space: nowrap !important; }
  .quick-answer-cell:last-child { border-right: none !important; }
  .answer-badge, .question-num-badge, .explanation-block-title, .choice-item.correct, .conclusion, .question-choice-translated.correct, .question-passage-translation { print-color-adjust: exact !important; }
  .answer-badge, .quick-answer-circle { -webkit-text-stroke: 0.3px currentcolor; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; line-height: 1 !important; }
  .answer-text, .vocab-answer-text { -webkit-text-stroke: 0.3px currentcolor; font-weight: 700 !important; }
  .synonym-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; display: table !important; }
  .synonym-table tbody { display: table-row-group !important; }
  .synonym-table tr { display: table-row !important; break-inside: avoid !important; }
  .synonym-table td { display: table-cell !important; padding: 4px 8px !important; border-bottom: 1px solid rgb(229, 229, 229) !important; vertical-align: top !important; }
  .synonym-table tr:last-child td { border-bottom: none !important; }
  td.synonym-english, .synonym-table td.synonym-english, .synonym-english { width: 40% !important; color: rgb(0, 0, 0) !important; font-weight: 700 !important; print-color-adjust: exact !important; }
  td.synonym-korean, .synonym-table td.synonym-korean, .synonym-korean { width: 60% !important; color: rgb(51, 51, 51) !important; padding-left: 20px !important; text-align: left !important; }
}
@media print {
  .voca-preview-table { display: table !important; width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; }
  .voca-preview-table tbody { display: table-row-group !important; }
  .voca-preview-table tr { display: table-row !important; }
  .voca-preview-table td { display: table-cell !important; padding: 3px 6px !important; border-bottom: 1px solid rgb(229, 231, 235) !important; }
}
.polysemy-card { border-radius: 8px; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); padding: 20px; margin-bottom: 16px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; position: relative; break-inside: avoid; overflow: hidden; border: 1px solid var(--badge-border, #e5e7eb); }
.polysemy-grid { display: grid; gap: 24px; grid-template-columns: 28% 1fr; }
.polysemy-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; backdrop-filter: blur(8px); border-radius: 9999px; margin-bottom: 8px; background-color: var(--badge-bg, #f1f5f9); box-shadow: 0 0 0 .5px var(--badge-border, #cbd5e1); }
.polysemy-badge-text { text-transform: uppercase; letter-spacing: -0.025em; font-weight: 500; text-align: center; font-size: 8px; color: var(--badge-text, #475569); margin: 0px; }
.polysemy-word { margin: 0px 0px 2px; letter-spacing: -0.025em; font-size: 19px; font-weight: 700; color: var(--badge-text, #000); }
.polysemy-pronunciation { color: rgb(156, 163, 175); font-size: 10px; margin: -2px 0px 0px; }
.polysemy-derivatives-wrap { margin-top: 8px; }
.polysemy-derivative-item { line-height: 1.25; display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.polysemy-derivative-word { color: rgb(31, 41, 55); font-weight: 500; font-size: 11px; }
.polysemy-derivative-pos { font-size: 8px; color: var(--badge-text, #475569); }
.polysemy-derivative-meaning { color: rgb(107, 114, 128); font-size: 10px; }
.polysemy-tip-wrap { margin-top: 16px; }
.polysemy-tip-badge { margin-bottom: 6px; }
.polysemy-tip-content { color: rgb(75, 85, 99); line-height: 1.625; font-size: 10px; text-align: justify; }
.polysemy-tip-root-label { font-weight: 700; font-size: 11px; color: rgb(30, 41, 59); margin-bottom: 4px; }
.polysemy-tip-root-emoji { margin-right: 4px; }
.polysemy-tip-branch { font-weight: 600; font-size: 9px; color: var(--badge-text, #475569); background: var(--badge-bg, #f1f5f9); border-radius: 3px; padding: 1px 6px; margin: 5px 0px 2px; display: inline-block; }
.polysemy-tip-line { margin: 1px 0px; }
.polysemy-tip-root { font-weight: 700; color: var(--badge-text, #475569); }
.polysemy-tip-evolved { font-weight: 600; color: var(--badge-text, #475569); text-decoration-line: underline; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: var(--badge-bg, #f1f5f9); text-underline-offset: 2px; }
.polysemy-tip-arrow { color: rgb(156, 163, 175); font-size: 10px; }
.polysemy-meanings-wrap { flex: 1 1 0%; }
.polysemy-meaning-item-separated { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--badge-border, #e5e7eb); }
.polysemy-meaning-header { margin-bottom: 4px; }
.polysemy-meaning-text { color: rgb(0, 0, 0); line-height: 1.375; font-size: 13px; margin: 0px 8px 0px 0px; }
.polysemy-meaning-number { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background-color: var(--badge-bg, #f1f5f9); border: 1px solid var(--badge-border, #cbd5e1); font-size: 9px; font-weight: 700; color: var(--badge-text, #475569); margin-right: 6px; vertical-align: middle; }
.polysemy-derivation { font-size: 10px; color: rgb(156, 163, 175); margin-right: 4px; }
.polysemy-arrow { font-size: 10px; color: rgb(156, 163, 175); margin-right: 6px; }
.polysemy-part-of-speech { font-size: 10px; font-weight: 700; color: var(--badge-text, #475569); margin-right: 4px; }
.polysemy-definition { font-style: italic; font-size: 10.5px; color: rgb(156, 163, 175); margin-left: 8px; }
.polysemy-example-wrap { padding-left: 10px; padding-top: 2px; padding-bottom: 2px; border-left: 2px solid var(--badge-border, #cbd5e1); margin-left: 4px; margin-top: 0px; margin-bottom: 0px; }
.polysemy-example-text { color: rgb(0, 0, 0); line-height: 1.625; font-size: 12px; margin: 0px 0px 4px; }
.polysemy-translation-text { color: rgb(75, 85, 99); line-height: 1.625; font-size: 10px; margin: 0px; }
.polysemy-syn-ant-block { display: inline-flex; flex-direction: column; margin-left: 10px; vertical-align: top; }
.polysemy-syn-ant-row { display: flex; align-items: center; line-height: 1.4; }
.polysemy-syn-ant-wrap { display: flex; gap: 20px; margin-top: 8px; padding-left: 12px; }
.polysemy-syn-ant-item { display: flex; align-items: center; gap: 6px; }
.polysemy-syn-ant-label { font-size: 10px; font-weight: 700; color: var(--badge-text, #475569); margin-right: 4px; }
.polysemy-syn-ant-value { color: rgb(107, 114, 128); font-size: 10px; margin-left: 2px; }
.polysemy-checkbox-wrap { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; }
.polysemy-checkbox { width: 8px; height: 8px; border: 1px solid var(--badge-border, #d1d5db); }
.polysemy-highlight { font-weight: 700; color: var(--badge-text); }
.jj-pdf-title-edit { margin-bottom: 12px; }
.jj-pdf-title-label { display: block; font-size: 13px; font-weight: 600; color: rgb(55, 65, 81); margin-bottom: 4px; }
.jj-pdf-title-input { width: 100%; padding: 8px 12px; border: 1px solid rgb(209, 213, 219); border-radius: 6px; font-size: 14px; color: rgb(17, 24, 39); outline: none; transition: border-color 0.15s; box-sizing: border-box; }
.jj-pdf-title-input:focus { border-color: rgb(99, 102, 241); box-shadow: rgba(99, 102, 241, 0.15) 0px 0px 0px 2px; }
.jj-pdf-viewmode-section { margin-top: 1rem; }
.jj-pdf-viewmode-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.jj-pdf-viewmode-title { font-weight: 600; font-size: 0.9rem; }
.jj-pdf-viewmode-buttons { display: flex; gap: 0.5rem; }
.jj-pdf-viewmode-btn { padding: 0.25rem 0.75rem; font-size: 0.8rem; border: 1px solid rgb(221, 221, 221); border-radius: 4px; background: rgb(255, 255, 255); cursor: pointer; transition: 0.2s; }
.jj-pdf-viewmode-btn:hover { background: rgb(245, 245, 245); border-color: rgb(153, 153, 153); }
.jj-pdf-viewmode-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; margin-bottom: 0.5rem; }
.jj-pdf-viewmode-checkbox { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid rgb(224, 224, 224); border-radius: 6px; cursor: pointer; transition: 0.2s; }
.jj-pdf-viewmode-checkbox:hover { background: rgb(249, 249, 249); border-color: rgb(153, 153, 153); }
.jj-pdf-viewmode-checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.jj-pdf-viewmode-checkbox span { font-size: 0.9rem; }
.jj-pdf-viewmode-error { padding: 0.5rem; background: rgb(255, 243, 205); border: 1px solid rgb(255, 193, 7); border-radius: 4px; font-size: 0.85rem; color: rgb(133, 100, 4); text-align: center; }
.jj-pdf-mode-selection { margin-top: 0.5rem; }
.jj-pdf-mode-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.jj-pdf-mode-label { font-weight: 600; font-size: 0.9rem; color: rgb(51, 51, 51); }
.jj-pdf-mode-actions { display: flex; gap: 0.5rem; }
.jj-pdf-mode-action { padding: 0.25rem 0.5rem; font-size: 0.75rem; border: 1px solid rgb(221, 221, 221); border-radius: 4px; background: rgb(255, 255, 255); cursor: pointer; transition: 0.2s; color: rgb(102, 102, 102); }
.jj-pdf-mode-action:hover { background: rgb(245, 245, 245); border-color: rgb(153, 153, 153); }
.jj-pdf-mode-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.jj-pdf-mode-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid rgb(224, 224, 224); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-pdf-mode-item:hover { background: rgb(249, 249, 249); border-color: rgb(187, 187, 187); }
.jj-pdf-mode-checkbox { width: 20px; height: 20px; min-width: 20px; border: 2px solid rgb(204, 204, 204); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: 0.2s; background: rgb(255, 255, 255); }
.jj-pdf-mode-checkbox.checked { background: rgb(34, 197, 94); border-color: rgb(34, 197, 94); color: rgb(255, 255, 255); }
.jj-pdf-mode-info { display: flex; flex-direction: column; gap: 0.15rem; }
.jj-pdf-mode-name { font-weight: 500; font-size: 0.9rem; color: rgb(51, 51, 51); }
.jj-pdf-mode-desc { font-size: 0.8rem; color: rgb(102, 102, 102); }
.jj-text-gray { color: rgb(75, 85, 99); }
.jj-main-sidebar { position: relative; width: 160px; min-width: 160px; height: 100%; background: rgb(28, 36, 52); border-right: 1px solid rgb(49, 61, 74); display: flex; flex-direction: column; overflow: visible; transition: width 0.2s, min-width 0.2s; }
.jj-main-sidebar.collapsed { width: 48px; min-width: 48px; }
.jj-sidebar-header { padding: 0px; height: 150px; box-sizing: border-box; background: rgb(28, 36, 52); border-bottom: 1px solid rgb(49, 61, 74); display: flex; flex-direction: column; justify-content: center; gap: 0px; position: relative; }
.jj-main-sidebar.collapsed .jj-sidebar-header { padding: 8px; height: auto; min-height: 48px; justify-content: center; align-items: center; }
.jj-sidebar-toggle-row { display: flex; justify-content: flex-end; padding: 4px 8px 0px; background: rgb(28, 36, 52); }
.jj-main-sidebar.collapsed .jj-sidebar-toggle-row { justify-content: center; }
.jj-sidebar-toggle-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; background: transparent; border: none; border-radius: 4px; color: rgb(107, 114, 128); cursor: pointer; transition: 0.15s; }
.jj-sidebar-toggle-btn:hover { background: rgb(229, 231, 235); color: rgb(55, 65, 81); }
.jj-sidebar-logo { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0px 0px 16px; width: 100%; height: 100%; }
.jj-sidebar-logo .jj-logo-image { width: 100%; height: 100%; object-fit: contain; }
.jj-sidebar-my-content { padding: 12px; margin-top: auto; border-top: 1px solid rgb(226, 232, 240); }
.jj-sidebar-my-content-header { font-size: 11px; font-weight: 600; color: rgb(14, 165, 233); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding-left: 4px; }
.jj-sidebar-my-content-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(59, 130, 246, 0.1)); color: rgb(14, 165, 233); border: 1px solid rgba(14, 165, 233, 0.3); border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; transition: 0.2s; margin-bottom: 6px; }
.jj-sidebar-my-content-btn:hover { background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(59, 130, 246, 0.2)); border-color: rgba(14, 165, 233, 0.5); transform: translateY(-1px); }
.jj-sidebar-footer { padding: 12px; border-top: 1px solid rgb(226, 232, 240); }
.jj-sidebar-market-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 12px; background: linear-gradient(135deg, rgb(249, 115, 22), rgb(251, 146, 60)); color: rgb(255, 255, 255); border: none; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; transition: 0.2s; }
.jj-sidebar-market-btn:hover { background: linear-gradient(135deg, rgb(234, 88, 12), rgb(249, 115, 22)); transform: translateY(-1px); box-shadow: rgba(249, 115, 22, 0.3) 0px 4px 12px; }
.jj-sidebar-mypage-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 12px; margin-top: 8px; background: linear-gradient(135deg, rgb(100, 116, 139), rgb(148, 163, 184)); color: rgb(255, 255, 255); border: none; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; transition: 0.2s; }
.jj-sidebar-mypage-btn:hover { background: linear-gradient(135deg, rgb(71, 85, 105), rgb(100, 116, 139)); transform: translateY(-1px); box-shadow: rgba(100, 116, 139, 0.3) 0px 4px 12px; }
.jj-main-sidebar-nav { flex: 1 1 0%; overflow: hidden auto; padding: 8px 6px; }
.jj-sidebar-category { margin-bottom: 4px; }
.jj-sidebar-category-header { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px; background: transparent; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; color: rgb(222, 228, 238); cursor: pointer; transition: 0.15s; text-align: left; }
.jj-sidebar-category-header:hover:not(.disabled) { background: rgba(255, 255, 255, 0.04); color: rgb(255, 255, 255); }
.jj-sidebar-category-header.active { background: rgba(255, 255, 255, 0.06); color: rgb(255, 255, 255); font-weight: 600; border-radius: 6px; }
.jj-sidebar-category-header.disabled { color: rgb(90, 100, 116); cursor: not-allowed; }
.jj-main-sidebar.collapsed .jj-sidebar-category-header { padding: 10px; justify-content: center; }
.jj-sidebar-category-label { flex: 1 1 0%; }
.jj-sidebar-chevron { color: rgb(90, 100, 116); display: flex; align-items: center; transition: transform 0.2s; }
.jj-sidebar-category-header.active .jj-sidebar-chevron { color: rgb(222, 228, 238); }
.jj-sidebar-subcategories { padding-left: 12px; background: transparent; overflow: hidden; animation: 0.2s ease-out 0s 1 normal none running slideDown; }
@keyframes slideDown { 
  0% { opacity: 0; max-height: 0px; transform: translateY(-8px); }
  100% { opacity: 1; max-height: 500px; transform: translateY(0px); }
}
.jj-sidebar-subcategory { border-left: none; }
.jj-sidebar-subcategory-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: transparent; border: none; border-radius: 6px; font-size: 12px; color: rgb(138, 153, 175); cursor: pointer; transition: 0.15s; text-align: left; }
.jj-sidebar-subcategory-header:hover { background: rgba(255, 255, 255, 0.04); color: rgb(222, 228, 238); }
.jj-sidebar-subcategory-header.active { background: rgba(255, 255, 255, 0.06); color: rgb(255, 255, 255); font-weight: 500; border-radius: 6px; }
.jj-sidebar-subcategory-indent .jj-sidebar-subcategory-header { padding-left: 24px; font-size: 12px; }
.jj-sidebar-check { color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; }
.jj-sidebar-viewmodes { padding: 4px 0px 4px 12px; background: transparent; overflow: hidden; animation: 0.15s ease-out 0s 1 normal none running fadeSlideIn; }
@keyframes fadeSlideIn { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.jj-sidebar-viewmode { display: block; width: 100%; padding: 6px 12px; background: transparent; border: none; font-size: 11px; color: rgb(138, 153, 175); cursor: pointer; transition: 0.15s; text-align: left; border-radius: 6px; margin-bottom: 2px; }
.jj-sidebar-viewmode:hover { background: rgba(255, 255, 255, 0.04); color: rgb(222, 228, 238); }
.jj-sidebar-viewmode.active { background: rgba(255, 255, 255, 0.06); color: rgb(255, 255, 255); font-weight: 500; border-radius: 6px; }
.jj-sidebar-my-content { padding: 12px; border-top: 1px solid rgb(49, 61, 74); background: transparent; }
.jj-sidebar-my-content-header { font-size: 11px; font-weight: 600; color: rgb(34, 211, 238); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding-left: 4px; }
.jj-sidebar-my-content-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: rgba(14, 165, 233, 0.1); color: rgb(34, 211, 238); border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: 0.15s; margin-bottom: 6px; }
.jj-sidebar-my-content-btn:last-child { margin-bottom: 0px; }
.jj-sidebar-my-content-btn:hover { background: rgba(14, 165, 233, 0.2); border-color: rgba(34, 211, 238, 0.5); }
.jj-sidebar-footer { padding: 12px; border-top: 1px solid rgb(49, 61, 74); background: transparent; display: flex; flex-direction: column; gap: 8px; }
.jj-sidebar-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; font-size: 13px; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-sidebar-action-pdf { background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
.jj-sidebar-action-pdf:hover { background: rgba(255, 255, 255, 0.15); }
.jj-sidebar-action-binding { background: transparent; color: rgb(138, 153, 175); border: 1px solid rgb(49, 61, 74); }
.jj-sidebar-action-binding:hover { background: rgba(255, 255, 255, 0.04); color: rgb(222, 228, 238); }
.jj-sidebar-user { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: transparent; border-radius: 8px; border: 1px solid rgb(49, 61, 74); }
.jj-sidebar-user-info { display: flex; flex-direction: column; gap: 2px; }
.jj-sidebar-user-name { font-size: 13px; font-weight: 500; color: rgb(222, 228, 238); }
.jj-sidebar-user-points { font-size: 12px; font-weight: 600; color: rgb(138, 153, 175); }
.jj-sidebar-user-actions { display: flex; align-items: center; gap: 4px; }
.jj-sidebar-charge-btn { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 12px; font-weight: 500; background: rgba(255, 255, 255, 0.06); color: rgb(222, 228, 238); border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-sidebar-charge-btn:hover { background: rgba(255, 255, 255, 0.1); }
.jj-sidebar-logout-btn { display: flex; align-items: center; justify-content: center; padding: 6px; background: transparent; color: rgb(138, 153, 175); border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-sidebar-logout-btn:hover { background: rgba(255, 255, 255, 0.04); color: rgb(222, 228, 238); }
.jj-top-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(229, 231, 235); flex-shrink: 0; }
.jj-top-header-logo { display: flex; align-items: center; }
.jj-top-header-logo .jj-logo-image { height: 28px; width: auto; }
.jj-top-header-market-btn { padding: 8px 16px; font-size: 13px; font-weight: 600; background: linear-gradient(135deg, rgb(30, 58, 95), rgb(44, 82, 130)); color: rgb(255, 255, 255); border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-top-header-market-btn:hover { background: linear-gradient(135deg, rgb(21, 41, 66), rgb(30, 58, 95)); transform: translateY(-1px); box-shadow: rgba(30, 58, 95, 0.3) 0px 4px 12px; }
.jj-floating-toolbar-wrapper { overflow-x: auto; scrollbar-width: none; flex-shrink: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(229, 231, 235); }
.jj-floating-toolbar-wrapper::-webkit-scrollbar { display: none; }
.jj-floating-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; z-index: 100; overflow: visible; width: max-content; min-width: 100%; }
.jj-floating-toolbar-field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.jj-floating-toolbar-label { font-size: 10px; font-weight: 600; color: rgb(107, 114, 128); text-transform: uppercase; letter-spacing: 0.5px; }
.jj-floating-toolbar-input { width: 140px; padding: 6px 10px; font-size: 13px; border: 1px solid rgb(229, 231, 235); border-radius: 6px; background: rgb(249, 250, 251); transition: 0.15s; }
.jj-floating-toolbar-input:focus { outline: none; border-color: rgb(30, 58, 95); background: rgb(255, 255, 255); }
.jj-floating-toolbar-input-sm { width: 100px; }
.jj-floating-toolbar-input-number { width: 60px; padding: 6px 8px; font-size: 13px; border: 1px solid rgb(229, 231, 235); border-radius: 6px; background: rgb(249, 250, 251); text-align: center; }
.jj-floating-toolbar-input-number:focus { outline: none; border-color: rgb(30, 58, 95); background: rgb(255, 255, 255); }
.jj-floating-toolbar-group { display: flex; flex-direction: column; gap: 4px; }
.jj-floating-toolbar-group-label { font-size: 10px; font-weight: 600; color: rgb(107, 114, 128); text-transform: uppercase; letter-spacing: 0.5px; }
.jj-floating-toolbar-group-content { display: flex; flex-direction: row; align-items: flex-end; gap: 6px; }
.jj-floating-toolbar-label-mini { font-size: 11px; color: rgb(107, 114, 128); }
.jj-floating-toolbar-group-content .jj-floating-toolbar-field { flex-direction: column; align-items: flex-start; gap: 4px; }
.jj-floating-toolbar-divider { width: 1px; height: 40px; background: rgb(229, 231, 235); margin: 0px 4px; }
.jj-floating-toolbar-dropdown { position: relative; }
.jj-floating-toolbar-select { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 11px; border: 1px solid rgb(229, 231, 235); border-radius: 6px; background: rgb(249, 250, 251); cursor: pointer; transition: 0.15s; white-space: nowrap; }
.jj-floating-toolbar-select-sm { min-width: auto; }
.jj-floating-toolbar-select:hover { border-color: rgb(156, 163, 175); }
.jj-floating-toolbar-select svg { transition: transform 0.2s; margin-left: auto; }
.jj-floating-toolbar-color-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.1); flex-shrink: 0; }
.jj-floating-toolbar-dropdown-menu { position: absolute; top: 100%; left: 0px; margin-top: 4px; min-width: 140px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px; padding: 4px; z-index: 9999; max-height: 240px; overflow-y: auto; }
.jj-floating-toolbar-color-menu { min-width: 180px; }
.jj-floating-toolbar-custom-color { padding: 8px 10px; border-bottom: 1px solid rgb(229, 231, 235); margin-bottom: 4px; }
.jj-floating-toolbar-color-section { padding: 4px 0px; }
.jj-floating-toolbar-color-section-label { font-size: 10px; font-weight: 600; color: rgb(156, 163, 175); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; }
.jj-floating-toolbar-saved-colors { display: flex; gap: 6px; padding: 4px 10px 8px; flex-wrap: wrap; }
.jj-floating-toolbar-saved-color-item { position: relative; }
.jj-floating-toolbar-color-swatch-btn { width: 28px; height: 28px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-floating-toolbar-color-swatch-btn:hover { transform: scale(1.1); }
.jj-floating-toolbar-color-swatch-btn.selected { border-color: rgb(30, 58, 95); box-shadow: rgba(30, 58, 95, 0.2) 0px 0px 0px 2px; }
.jj-floating-toolbar-remove-color-btn { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: rgb(239, 68, 68); color: rgb(255, 255, 255); border: none; font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.jj-floating-toolbar-saved-color-item:hover .jj-floating-toolbar-remove-color-btn { opacity: 1; }
.jj-floating-toolbar-add-color-btn { width: 32px; height: 32px; border: 1px dashed rgb(209, 213, 219); border-radius: 4px; background: rgb(249, 250, 251); color: rgb(107, 114, 128); font-size: 18px; cursor: pointer; transition: 0.15s; display: flex; align-items: center; justify-content: center; }
.jj-floating-toolbar-add-color-btn:hover:not(:disabled) { border-color: rgb(30, 58, 95); color: rgb(30, 58, 95); background: rgb(239, 246, 255); }
.jj-floating-toolbar-add-color-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jj-floating-toolbar-custom-color-inputs { display: flex; gap: 8px; align-items: center; }
.jj-floating-toolbar-color-picker { width: 32px; height: 32px; border: 1px solid rgb(209, 213, 219); border-radius: 4px; cursor: pointer; padding: 0px; background: none; }
.jj-floating-toolbar-color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.jj-floating-toolbar-color-picker::-webkit-color-swatch { border-radius: 2px; border: none; }
.jj-floating-toolbar-hex-input { flex: 1 1 0%; padding: 6px 8px; border: 1px solid rgb(209, 213, 219); border-radius: 4px; font-family: monospace; font-size: 13px; text-transform: uppercase; width: 90px; }
.jj-floating-toolbar-hex-input:focus { outline: none; border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 2px; }
.jj-floating-toolbar-hex-input.invalid { border-color: rgb(239, 68, 68); background-color: rgb(254, 242, 242); }
.jj-floating-toolbar-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; font-size: 13px; border: none; background: transparent; border-radius: 4px; cursor: pointer; transition: 0.15s; text-align: left; }
.jj-floating-toolbar-dropdown-item:hover { background: rgb(243, 244, 246); }
.jj-floating-toolbar-dropdown-item.selected { background: rgb(235, 245, 255); color: rgb(30, 58, 95); font-weight: 500; }
.jj-floating-toolbar-toggle { padding: 6px 12px; font-size: 12px; font-weight: 600; border: 1px solid rgb(229, 231, 235); border-radius: 6px; background: rgb(249, 250, 251); color: rgb(107, 114, 128); cursor: pointer; transition: 0.15s; }
.jj-floating-toolbar-toggle:hover { border-color: rgb(156, 163, 175); }
.jj-floating-toolbar-toggle.active { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-unit-custom-trigger { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 11px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 6px; cursor: pointer; white-space: nowrap; min-width: 80px; color: rgb(55, 65, 81); transition: 0.15s; }
.jj-unit-custom-trigger:hover { border-color: rgb(156, 163, 175); }
.jj-unit-custom-trigger.active { color: rgb(30, 58, 95); border-color: rgb(30, 58, 95); background: rgb(239, 246, 255); }
.jj-unit-custom-panel { background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px; z-index: 9999; min-width: 280px; max-height: 360px; display: flex; flex-direction: column; }
.jj-unit-custom-panel-header { font-size: 12px; font-weight: 600; color: rgb(55, 65, 81); padding: 10px 12px 8px; border-bottom: 1px solid rgb(243, 244, 246); }
.jj-unit-custom-panel-list { padding: 6px 12px; overflow-y: auto; max-height: 240px; flex: 1 1 0%; }
.jj-unit-custom-panel-row { display: flex; align-items: center; gap: 8px; padding: 4px 0px; }
.jj-unit-custom-panel-label { font-size: 12px; font-weight: 500; color: rgb(55, 65, 81); min-width: 56px; white-space: nowrap; }
.jj-unit-custom-panel-input { width: 56px; height: 28px; border: 1px solid rgb(209, 213, 219); border-radius: 4px; padding: 0px 6px; font-size: 12px; text-align: center; color: rgb(55, 65, 81); }
.jj-unit-custom-panel-input:focus { outline: none; border-color: rgb(30, 58, 95); box-shadow: rgb(30, 58, 95) 0px 0px 0px 1px; }
.jj-unit-custom-panel-input:disabled { background: rgb(249, 250, 251); color: rgb(156, 163, 175); cursor: not-allowed; }
.jj-unit-custom-panel-range { font-size: 11px; color: rgb(156, 163, 175); white-space: nowrap; }
.jj-unit-custom-panel-footer { padding: 8px 12px; border-top: 1px solid rgb(243, 244, 246); display: flex; align-items: center; justify-content: space-between; }
.jj-unit-custom-panel-total { font-size: 11px; font-weight: 500; }
.jj-unit-custom-panel-total.balanced { color: rgb(5, 150, 105); }
.jj-unit-custom-panel-total.unbalanced { color: rgb(220, 38, 38); }
.jj-unit-custom-panel-actions { display: flex; gap: 6px; }
.jj-unit-custom-panel-btn { font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; border: 1px solid rgb(209, 213, 219); background: rgb(255, 255, 255); color: rgb(55, 65, 81); transition: 0.15s; }
.jj-unit-custom-panel-btn:hover { background: rgb(249, 250, 251); }
.jj-unit-custom-panel-btn-apply { background: rgb(30, 58, 95); color: rgb(255, 255, 255); border-color: rgb(30, 58, 95); }
.jj-unit-custom-panel-btn-apply:hover { background: rgb(22, 50, 80); }
.jj-unit-custom-panel-remove { width: 20px; height: 20px; border: none; background: none; color: rgb(209, 213, 219); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 3px; flex-shrink: 0; padding: 0px; line-height: 1; }
.jj-unit-custom-panel-remove:hover { color: rgb(220, 38, 38); background: rgb(254, 242, 242); }
.jj-header.jj-header-no-sidebar { padding-left: 16px; }
.jj-header-section.jj-header-main { flex: 1 1 0%; display: flex; align-items: flex-start; gap: 16px; }
.jj-dialog-overlay { position: fixed; inset: 0px; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.jj-dialog-backdrop { position: absolute; inset: 0px; background-color: rgba(0, 0, 0, 0.5); }
.jj-dialog-content { position: relative; z-index: 1; width: 320px; max-width: calc(100% - 32px); background: rgb(255, 255, 255); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 25px; padding: 20px; }
.jj-dialog-header { margin-bottom: 12px; }
.jj-dialog-title { font-size: 15px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px; }
.jj-dialog-description { font-size: 13px; color: rgb(107, 114, 128); margin-top: 4px; }
.jj-dialog-content .space-y-4 > * + * { margin-top: 12px; }
.jj-dialog-content .space-y-2 > * + * { margin-top: 6px; }
.jj-dialog-content .py-4 { padding-top: 12px; padding-bottom: 12px; }
.jj-dialog-content .flex.gap-2 { display: flex; gap: 8px; }
.jj-dialog-content .flex-1 { flex: 1 1 0%; }
.jj-dialog-content .text-xs { font-size: 12px; color: rgb(107, 114, 128); margin-top: 4px; }
.jj-input-wrapper { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.jj-input-label { font-size: 13px; font-weight: 500; color: rgb(17, 25, 40); }
.jj-input { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid rgb(223, 228, 234); border-radius: 6px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: rgb(255, 255, 255); }
.jj-input:hover { border-color: rgb(156, 163, 175); }
.jj-input:focus { border-color: rgb(30, 58, 95); box-shadow: rgba(30, 58, 95, 0.1) 0px 0px 0px 3px; }
.jj-input-error { border-color: rgb(242, 48, 48); }
.jj-input-error:focus { border-color: rgb(242, 48, 48); box-shadow: rgba(242, 48, 48, 0.1) 0px 0px 0px 3px; }
.jj-input-success { border-color: rgb(34, 173, 92); }
.jj-input-success:focus { border-color: rgb(34, 173, 92); box-shadow: rgba(34, 173, 92, 0.1) 0px 0px 0px 3px; }
.jj-input-disabled { background: rgb(229, 231, 235); color: rgb(107, 114, 128); cursor: not-allowed; }
.jj-input-helper { font-size: 12px; color: rgb(99, 115, 129); }
.jj-input-helper-error { color: rgb(242, 48, 48); }
.jj-input-helper-success { color: rgb(34, 173, 92); }
.jj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
.jj-btn-sm { padding: 6px 12px; font-size: 13px; height: 32px; }
.jj-btn-md { padding: 8px 16px; font-size: 14px; height: 38px; }
.jj-btn-lg { padding: 12px 24px; font-size: 15px; height: 48px; }
.jj-btn-rounded-full { border-radius: 50px; }
.jj-btn-primary { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-btn-primary:hover { background: rgb(21, 41, 66); border-color: rgb(21, 41, 66); }
.jj-btn-secondary { background: rgb(255, 255, 255); border-color: rgb(223, 228, 234); color: rgb(55, 65, 81); }
.jj-btn-secondary:hover { background: rgb(243, 244, 246); border-color: rgb(156, 163, 175); }
.jj-btn-tertiary { background: rgb(255, 255, 255); border-color: transparent; color: rgb(55, 65, 81); box-shadow: rgba(166, 175, 195, 0.4) 0px 1px 3px; }
.jj-btn-tertiary:hover { background: rgb(243, 244, 246); border-color: rgb(55, 65, 81); }
.jj-btn-disabled { cursor: not-allowed; background: rgb(229, 231, 235) !important; border-color: rgb(229, 231, 235) !important; color: rgb(107, 114, 128) !important; }
.jj-unit-split-wrapper { position: relative; }
.jj-unit-split-dropdown { position: absolute; top: calc(100% + 4px); right: 0px; background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; padding: 12px; width: 160px; z-index: 100; }
.jj-unit-split-input-row { display: flex; align-items: center; gap: 6px; }
.jj-unit-split-input-row + .jj-unit-split-input-row { margin-top: 8px; }
.jj-unit-split-input { width: 70px; padding: 6px 8px; font-size: 14px; border: 1px solid rgb(223, 228, 234); border-radius: 4px; outline: none; text-align: center; }
.jj-unit-split-input:focus { border-color: rgb(30, 58, 95); }
.jj-unit-split-prefix, .jj-unit-split-suffix { font-size: 13px; color: rgb(107, 114, 128); }
.jj-unit-split-input-small { width: 50px; }
.jj-unit-split-info { font-size: 11px; color: rgb(107, 114, 128); margin: 6px 0px 0px; }
.jj-unit-split-actions { display: flex; gap: 6px; margin-top: 10px; }
.jj-unit-split-reset, .jj-unit-split-apply { flex: 1 1 0%; padding: 6px 10px; font-size: 12px; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-unit-split-reset { background: rgb(255, 255, 255); border: 1px solid rgb(223, 228, 234); color: rgb(107, 114, 128); }
.jj-unit-split-reset:hover { background: rgb(243, 244, 246); }
.jj-unit-split-apply { background: rgb(30, 58, 95); border: 1px solid rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-unit-split-apply:hover { background: rgb(21, 41, 66); }
.jj-sentence-viewer { display: flex; flex-direction: column; height: 100%; background: rgb(250, 251, 252); }
.jj-viewer-header { display: flex; flex-direction: column; align-items: center; padding: 20px 24px 12px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(229, 231, 235); }
.jj-viewer-title { font-size: 18px; font-weight: 600; color: rgb(30, 58, 95); margin: 0px 0px 8px; text-align: center; }
.jj-viewer-desc { font-size: 13px; line-height: 1.6; color: rgb(107, 114, 128); text-align: center; }
.jj-viewer-desc p { margin: 0px 0px 2px; }
.jj-viewer-desc p:last-child { margin-bottom: 0px; }
.jj-viewer-wizard-btn { padding: 12px 24px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(229, 231, 235); }
.jj-viewer-wizard-btns { display: flex; gap: 12px; padding: 12px 24px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(229, 231, 235); }
.jj-grammar-theory-btn { background: linear-gradient(135deg, rgb(91, 192, 190), rgb(58, 155, 153)) !important; }
.jj-grammar-theory-btn:hover { background: linear-gradient(135deg, rgb(58, 155, 153), rgb(45, 122, 120)) !important; }
.jj-viewer-chapter-tabs { display: flex; gap: 8px; padding: 14px 20px; background: rgb(248, 249, 250); border-bottom: 1px solid rgba(0, 0, 0, 0.06); overflow-x: auto; }
.jj-viewer-chapter-tab { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; cursor: pointer; white-space: nowrap; transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 2px; }
.jj-viewer-chapter-tab:hover { background: rgb(229, 231, 235); color: rgb(55, 65, 81); }
.jj-viewer-chapter-tab:hover:not(.active) { background: rgb(243, 244, 246); border-color: rgba(0, 0, 0, 0.12); }
.jj-viewer-chapter-tab.active { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); box-shadow: rgba(30, 58, 95, 0.2) 0px 2px 4px; }
.jj-tab-count { font-size: 11px; font-weight: 600; padding: 2px 6px; background: rgba(0, 0, 0, 0.08); border-radius: 10px; min-width: 20px; text-align: center; }
.jj-viewer-chapter-tab.active .jj-tab-count { background: rgba(255, 255, 255, 0.2); }
.jj-viewer-flag-tabs { display: flex; gap: 6px; padding: 10px 24px; background: rgb(248, 249, 250); overflow-x: auto; }
.jj-viewer-flag-tab { padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(107, 114, 128); background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 16px; cursor: pointer; white-space: nowrap; transition: 0.15s; }
.jj-viewer-flag-tab:hover { background: rgb(243, 244, 246); }
.jj-viewer-flag-tab.active { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-viewer-flag-tab.grammar { border-color: rgb(30, 58, 95); color: rgb(30, 58, 95); }
.jj-viewer-flag-tab.grammar.active { background: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-viewer-flag-tab.signal { border-color: rgb(45, 74, 111); color: rgb(45, 74, 111); }
.jj-viewer-flag-tab.signal.active { background: rgb(45, 74, 111); color: rgb(255, 255, 255); }
.jj-viewer-summary { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(229, 231, 235); }
.jj-summary-count { font-size: 14px; font-weight: 600; color: rgb(30, 58, 95); }
.jj-summary-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(107, 114, 128); }
.jj-summary-item.clickable:hover { color: rgb(30, 58, 95); text-decoration: underline; }
.jj-dot { width: 8px; height: 8px; border-radius: 50%; }
.jj-dot.selected { background: rgb(30, 58, 95); }
.jj-dot.unselected { background: rgb(156, 163, 175); }
.jj-viewer-actions { margin-left: auto; display: flex; gap: 8px; }
.jj-viewer-sort-btn { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 12px; color: rgb(107, 114, 128); background: rgb(243, 244, 246); border: 1px solid rgb(229, 231, 235); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-viewer-sort-btn:hover { background: rgb(229, 231, 235); }
.jj-viewer-sort-btn.active { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-viewer-sort-btn.jj-add-btn { background: rgb(16, 185, 129); border-color: rgb(16, 185, 129); color: rgb(255, 255, 255); }
.jj-viewer-sort-btn.jj-add-btn:hover { background: rgb(5, 150, 105); border-color: rgb(5, 150, 105); }
.jj-viewer-sort-btn.jj-maximize-btn { padding: 6px 8px; }
.jj-viewer-mode-tabs { display: flex; gap: 4px; padding: 0px 24px 12px; border-bottom: 1px solid rgb(229, 231, 235); }
.jj-viewer-mode-tab { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: rgb(107, 114, 128); background: transparent; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 2px solid transparent; cursor: pointer; transition: 0.15s; }
.jj-viewer-mode-tab:hover { color: rgb(30, 58, 95); background: rgb(249, 250, 251); }
.jj-viewer-mode-tab.active { color: rgb(30, 58, 95); border-bottom-color: rgb(30, 58, 95); }
.jj-viewer-content { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; min-height: 0px; margin: 12px; border: 1px solid rgb(229, 231, 235); border-radius: 8px; background: rgb(255, 255, 255); }
.jj-viewer-content-maximized { position: relative; width: calc(-320px + 100vw); z-index: 1000; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 24px; }
.jj-viewer-content-maximized .jj-viewer-list, .jj-viewer-content-maximized .jj-spreadsheet-wrapper { max-height: none; flex: 1 1 0%; }
.jj-sentence-viewer:has(.jj-viewer-content-maximized) { overflow: visible; }
.jj-panel-left:has(.jj-viewer-content-maximized) { overflow: visible; z-index: 999; }
.jj-viewer-content-header { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(249, 250, 251); border-radius: 8px 8px 0px 0px; }
.jj-viewer-content-header .jj-viewer-mode-tabs { display: flex; gap: 4px; padding: 0px; border-bottom: none; }
.jj-viewer-content-subheader { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(255, 255, 255); }
.jj-viewer-content-subheader .jj-summary-count { font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); }
.jj-viewer-content-subheader .jj-viewer-actions { display: flex; gap: 6px; margin-left: auto; }
.jj-viewer-list { flex: 1 1 0%; overflow-y: auto; padding: 16px 24px; }
.jj-viewer-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
.jj-viewer-empty p { margin: 0px; color: rgb(107, 114, 128); font-size: 14px; }
.jj-viewer-empty-hint { margin-top: 8px !important; font-size: 13px !important; color: rgb(156, 163, 175) !important; }
.jj-viewer-sentence-list { padding: 12px; }
.jj-viewer-sentence { display: flex; gap: 12px; padding: 14px 16px; margin-bottom: 12px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-viewer-sentence:hover { border-color: rgb(209, 213, 219); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; }
.jj-viewer-sentence.selected { background: rgb(240, 244, 248); border-color: rgb(30, 58, 95); }
.jj-viewer-sentence.selected:hover { border-color: rgb(21, 41, 66); }
.jj-viewer-sentence.dragging { box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.jj-viewer-sentence-handle { display: flex; align-items: flex-start; padding-top: 2px; cursor: grab; }
.jj-viewer-sentence-handle:active { cursor: grabbing; }
.jj-viewer-indicator { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 600; }
.jj-viewer-sentence.selected .jj-viewer-indicator { background: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-viewer-sentence.unselected .jj-viewer-indicator { background: rgb(243, 244, 246); color: rgb(107, 114, 128); }
.jj-indicator-check { font-size: 14px; }
.jj-indicator-num { font-size: 12px; }
.jj-viewer-sentence-content { flex: 1 1 0%; min-width: 0px; }
.jj-viewer-eng { font-size: 13px; font-weight: 500; color: rgb(31, 41, 55); margin: 0px 0px 4px; line-height: 1.5; }
.jj-viewer-kor { font-size: 12px; color: rgb(107, 114, 128); margin: 0px 0px 8px; line-height: 1.4; }
.jj-viewer-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jj-viewer-source { font-size: 11px; color: rgb(75, 85, 99); background: rgb(229, 231, 235); padding: 2px 8px; border-radius: 4px; }
.jj-viewer-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.jj-viewer-flag { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.jj-viewer-flag.grammar { background: rgb(232, 238, 244); color: rgb(30, 58, 95); }
.jj-viewer-flag.signal { background: rgb(237, 240, 244); color: rgb(45, 74, 111); }
.jj-viewer-help { padding: 12px 24px; margin: 0px; font-size: 12px; color: rgb(156, 163, 175); text-align: center; background: rgb(255, 255, 255); border-top: 1px solid rgb(229, 231, 235); }
.jj-saved-data-content { display: flex; flex-direction: column; height: 100%; padding: 12px; gap: 12px; }
.jj-save-current-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; background: rgb(30, 58, 95); color: rgb(255, 255, 255); border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.jj-save-current-btn:hover:not(:disabled) { background: rgb(21, 41, 66); }
.jj-save-current-btn:disabled { background: rgb(156, 163, 175); cursor: not-allowed; }
.jj-save-count { font-size: 12px; opacity: 0.8; }
.jj-saved-data-list { flex: 1 1 0%; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.jj-saved-data-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; color: rgb(107, 114, 128); }
.jj-saved-data-empty p { margin: 0px; font-size: 14px; }
.jj-saved-data-hint { margin-top: 4px !important; font-size: 12px !important; color: rgb(156, 163, 175) !important; }
.jj-saved-data-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-saved-data-item:hover { background: rgb(243, 244, 246); border-color: rgb(30, 58, 95); }
.jj-saved-data-info { flex: 1 1 0%; min-width: 0px; }
.jj-saved-data-name { display: block; font-size: 13px; font-weight: 500; color: rgb(31, 41, 55); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-saved-data-meta { display: flex; gap: 8px; font-size: 11px; color: rgb(107, 114, 128); }
.jj-saved-data-meta span { white-space: nowrap; }
.jj-saved-data-delete { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: 6px; color: rgb(156, 163, 175); cursor: pointer; transition: 0.2s; }
.jj-saved-data-delete:hover { background: rgb(254, 226, 226); color: rgb(239, 68, 68); }
.jj-grammar-theory-modal { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 48px; width: 700px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.jj-grammar-theory-content { flex: 1 1 0%; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.jj-grammar-theory-unit-info { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgb(240, 253, 250); border: 1px solid rgb(91, 192, 190); border-radius: 8px; }
.jj-grammar-theory-unit-label { font-size: 13px; color: rgb(107, 114, 128); }
.jj-grammar-theory-unit-name { font-size: 14px; font-weight: 600; color: rgb(13, 148, 136); }
.jj-grammar-theory-sentence-count { font-size: 12px; color: rgb(156, 163, 175); }
.jj-grammar-theory-section { display: flex; flex-direction: column; gap: 12px; }
.jj-grammar-theory-section h3 { font-size: 14px; font-weight: 600; color: rgb(55, 65, 81); margin: 0px; }
.jj-grammar-theory-section-header { display: flex; align-items: center; justify-content: space-between; }
.jj-grammar-theory-preset-btn { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12px; color: rgb(91, 192, 190); background: transparent; border: 1px solid rgb(91, 192, 190); border-radius: 6px; cursor: pointer; transition: 0.2s; }
.jj-grammar-theory-preset-btn:hover { background: rgb(240, 253, 250); }
.jj-grammar-theory-presets { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: rgb(249, 250, 251); border-radius: 8px; margin-bottom: 8px; }
.jj-grammar-theory-preset-item { padding: 6px 12px; font-size: 12px; color: rgb(55, 65, 81); background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 20px; cursor: pointer; transition: 0.2s; }
.jj-grammar-theory-preset-item:hover:not(:disabled) { border-color: rgb(91, 192, 190); color: rgb(91, 192, 190); }
.jj-grammar-theory-preset-item.selected, .jj-grammar-theory-preset-item:disabled { background: rgb(229, 231, 235); color: rgb(156, 163, 175); cursor: not-allowed; }
.jj-grammar-theory-topics { display: flex; flex-direction: column; gap: 8px; }
.jj-grammar-theory-topic-row { display: flex; align-items: center; gap: 8px; }
.jj-grammar-theory-topic-num { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(91, 192, 190); border-radius: 50%; flex-shrink: 0; }
.jj-grammar-theory-topic-input { flex: 1 1 0%; padding: 10px 14px; font-size: 14px; color: rgb(17, 25, 40); background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; outline: none; transition: border-color 0.2s; }
.jj-grammar-theory-topic-input:focus { border-color: rgb(91, 192, 190); }
.jj-grammar-theory-desc-input { width: 200px; padding: 10px 14px; font-size: 13px; color: rgb(107, 114, 128); background: rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); border-radius: 8px; outline: none; transition: border-color 0.2s; }
.jj-grammar-theory-desc-input:focus { border-color: rgb(91, 192, 190); background: rgb(255, 255, 255); }
.jj-grammar-theory-remove-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: 6px; color: rgb(156, 163, 175); cursor: pointer; transition: 0.2s; }
.jj-grammar-theory-remove-btn:hover:not(:disabled) { background: rgb(254, 226, 226); color: rgb(239, 68, 68); }
.jj-grammar-theory-remove-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.jj-grammar-theory-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; font-size: 13px; color: rgb(91, 192, 190); background: transparent; border: 1px dashed rgb(91, 192, 190); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-grammar-theory-add-btn:hover { background: rgb(240, 253, 250); }
.jj-grammar-theory-options { display: flex; flex-direction: column; gap: 12px; }
.jj-grammar-theory-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-grammar-theory-option:hover { border-color: rgb(91, 192, 190); }
.jj-grammar-theory-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: rgb(91, 192, 190); }
.jj-grammar-theory-option svg { color: rgb(91, 192, 190); }
.jj-grammar-theory-option span { font-size: 14px; color: rgb(55, 65, 81); }
.jj-grammar-theory-error { padding: 12px 16px; font-size: 13px; color: rgb(220, 38, 38); background: rgb(254, 242, 242); border: 1px solid rgb(254, 202, 202); border-radius: 8px; }
.jj-grammar-theory-preview { display: flex; flex-direction: column; gap: 16px; }
.jj-grammar-theory-preview-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid rgb(91, 192, 190); }
.jj-grammar-theory-preview-header h3 { font-size: 18px; font-weight: 600; color: rgb(17, 25, 40); margin: 0px; }
.jj-grammar-theory-page-count { font-size: 13px; color: rgb(91, 192, 190); font-weight: 500; }
.jj-grammar-theory-preview-sections { display: flex; flex-direction: column; gap: 16px; }
.jj-grammar-theory-preview-section h4 { font-size: 14px; font-weight: 600; color: rgb(91, 192, 190); margin: 0px 0px 8px; }
.jj-grammar-theory-preview-section ul { margin: 0px; padding-left: 20px; }
.jj-grammar-theory-preview-section li { font-size: 13px; color: rgb(55, 65, 81); line-height: 1.6; margin-bottom: 4px; }
.jj-grammar-theory-preview-section ul ul { margin-top: 4px; }
.jj-grammar-theory-preview-section ul ul li { font-size: 12px; color: rgb(107, 114, 128); }
.jj-grammar-theory-preview-examples { padding: 16px; background: rgb(249, 250, 251); border-radius: 8px; }
.jj-grammar-theory-preview-examples h4 { font-size: 13px; font-weight: 600; color: rgb(55, 65, 81); margin: 0px 0px 12px; }
.jj-grammar-theory-preview-example { padding: 10px 0px; border-bottom: 1px solid rgb(229, 231, 235); }
.jj-grammar-theory-preview-example:last-child { border-bottom: none; padding-bottom: 0px; }
.jj-grammar-theory-example-eng { font-size: 13px; color: rgb(17, 25, 40); font-style: italic; margin-bottom: 4px; }
.jj-grammar-theory-example-kor { font-size: 12px; color: rgb(107, 114, 128); }
.jj-grammar-theory-more { font-size: 12px; color: rgb(156, 163, 175); text-align: center; padding-top: 8px; }
.jj-grammar-theory-preview-further, .jj-grammar-theory-preview-practice { padding: 16px; background: rgb(255, 251, 235); border: 1px solid rgb(254, 243, 199); border-radius: 8px; }
.jj-grammar-theory-preview-further h4, .jj-grammar-theory-preview-practice h4 { font-size: 13px; font-weight: 600; color: rgb(146, 64, 14); margin: 0px 0px 12px; }
.jj-grammar-theory-further-item { margin-bottom: 12px; }
.jj-grammar-theory-further-item:last-child { margin-bottom: 0px; }
.jj-grammar-theory-further-item strong { font-size: 13px; color: rgb(55, 65, 81); }
.jj-grammar-theory-further-item p { font-size: 12px; color: rgb(107, 114, 128); margin: 4px 0px 0px; line-height: 1.5; }
.jj-grammar-theory-practice-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0px; font-size: 13px; color: rgb(55, 65, 81); }
.jj-practice-type { padding: 2px 8px; font-size: 11px; font-weight: 500; color: rgb(146, 64, 14); background: rgb(254, 243, 199); border-radius: 4px; flex-shrink: 0; }
.jj-spin { animation: 1s linear 0s infinite normal none running jj-spin; }
@keyframes jj-spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.jj-grammar-theory-page { width: 210mm; min-height: 297mm; padding: 20mm 15mm; background: rgb(255, 255, 255); font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
.jj-grammar-theory-page-header { padding-left: 16px; border-left: 4px solid rgb(91, 192, 190); margin-bottom: 24px; }
.jj-grammar-theory-page-unit { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 4px; }
.jj-grammar-theory-page-title { font-size: 24px; font-weight: 700; color: rgb(17, 25, 40); margin: 0px; line-height: 1.3; }
.jj-grammar-theory-page-sections { display: flex; flex-direction: column; gap: 24px; margin-bottom: 28px; }
.jj-grammar-theory-page-section { display: flex; flex-direction: column; gap: 12px; }
.jj-grammar-theory-page-section-header { margin-top: 20px; margin-bottom: 8px; }
.jj-grammar-theory-page-category { padding-left: 16px; border-left: 4px solid currentcolor; margin-bottom: 20px; margin-top: 8px; }
.jj-grammar-theory-page-category-label { font-size: 12px; font-weight: 600; display: block; margin-bottom: 2px; }
.jj-grammar-theory-page-category-title { font-size: 18px; font-weight: 700; margin: 0px; color: rgb(17, 25, 40); }
.jj-grammar-theory-page-section-title { font-weight: 700; margin: 0px; padding-bottom: 8px; border-bottom: 2px solid; display: flex; align-items: baseline; gap: 4px; font-size: 17px; }
.jj-grammar-theory-page-section-num { font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); padding: 2px 8px; border-radius: 4px; margin-right: 4px; }
.jj-grammar-theory-page-section-name { font-size: inherit; font-weight: 700; color: rgb(17, 25, 40); }
.jj-grammar-theory-page-example-badge { display: inline-block; font-size: 9px; font-weight: 600; color: rgb(255, 255, 255); background-color: rgb(156, 163, 175); padding: 0px 4px; border-radius: 6px; margin-right: 6px; vertical-align: middle; }
.jj-grammar-theory-page-example-inline { font-size: 11px; color: rgb(55, 65, 81); }
.jj-grammar-theory-page-points { display: flex; flex-direction: column; gap: 12px; }
.jj-grammar-theory-page-point { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.jj-grammar-theory-page-bullet { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); border-radius: 50%; flex-shrink: 0; }
.jj-grammar-theory-page-point-content { flex: 1 1 0%; }
.jj-grammar-theory-page-point-content p { margin: 0px; font-size: 12px; line-height: 1.6; color: rgb(55, 65, 81); }
.jj-grammar-theory-page-subpoints { margin: 8px 0px 0px; padding-left: 20px; list-style: disc; }
.jj-grammar-theory-page-subpoints li { font-size: 11px; line-height: 1.5; color: rgb(31, 42, 55); margin-bottom: 4px; }
.jj-grammar-theory-page-examples { padding: 20px; background: rgb(249, 250, 251); border-left: 4px solid rgb(91, 192, 190); border-radius: 0px 8px 8px 0px; margin-bottom: 24px; }
.jj-grammar-theory-page-examples-title { font-size: 13px; font-weight: 700; margin: 0px 0px 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.jj-grammar-theory-page-examples-header { margin-top: 24px; margin-bottom: 12px; }
.jj-grammar-theory-page-examples-list { display: flex; flex-direction: column; gap: 16px; }
.jj-grammar-theory-page-example { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: rgb(249, 250, 251); border-left: 3px solid rgb(156, 163, 175); border-radius: 0px 8px 8px 0px; margin-bottom: 8px; }
.jj-grammar-theory-page-example-num { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); border-radius: 4px; flex-shrink: 0; }
.jj-grammar-theory-page-example-content { flex: 1 1 0%; }
.jj-grammar-theory-page-example-eng { font-size: 12px; line-height: 1.5; color: rgb(17, 25, 40); margin: 0px 0px 4px; }
.jj-grammar-theory-page-example-kor { font-size: 11px; line-height: 1.4; color: rgb(55, 65, 81); margin: 0px; }
.jj-grammar-theory-page-further { padding: 16px 20px; background: rgb(255, 251, 235); border: 1px solid rgb(254, 243, 199); border-radius: 8px; margin-bottom: 24px; }
.jj-grammar-theory-page-further-title { font-size: 13px; font-weight: 700; color: rgb(146, 64, 14); margin: 0px 0px 12px; display: flex; align-items: center; gap: 8px; }
.jj-grammar-theory-page-icon { font-size: 14px; }
.jj-grammar-theory-page-further-items { display: flex; flex-direction: column; gap: 18px; }
.jj-grammar-theory-page-further-yellow-box { padding: 16px 20px; background: rgb(255, 251, 235); border: 1px solid rgb(254, 243, 199); border-radius: 8px; }
.jj-grammar-theory-page-further-item h4 { font-size: 13px; font-weight: 800; color: rgb(55, 65, 81); margin: 0px 0px 4px; display: flex; align-items: center; gap: 6px; }
.jj-grammar-theory-page-further-item h4::before { content: "▸"; color: rgb(217, 119, 6); font-size: 12px; }
.jj-grammar-theory-page-further-item p { font-size: 11px; line-height: 1.9; color: rgb(31, 42, 55); margin: 0px; }
.jj-grammar-theory-page-practice { padding: 20px; background: rgb(240, 253, 250); border: 1px solid rgb(153, 246, 228); border-radius: 8px; }
.jj-grammar-theory-page-practice-title { font-size: 13px; font-weight: 700; margin: 0px 0px 16px; display: flex; align-items: center; gap: 8px; }
.jj-grammar-theory-page-practice-items { display: flex; flex-direction: column; gap: 16px; }
.jj-grammar-theory-page-practice-item { display: flex; flex-flow: wrap; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.jj-grammar-theory-page-practice-header { display: flex; align-items: center; gap: 8px; }
.jj-grammar-theory-page-practice-num { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); border-radius: 50%; }
.jj-grammar-theory-page-practice-type { font-size: 9px; font-weight: 600; color: rgb(255, 255, 255); background-color: rgb(156, 163, 175); padding: 1px 5px; border-radius: 3px; }
.jj-grammar-theory-page-practice-question { font-size: 12px; line-height: 1.6; color: rgb(31, 42, 55); margin: 0px; flex: 1 1 0%; }
.jj-grammar-theory-page-answer-header-section { margin-top: 32px; margin-bottom: 12px; }
.jj-grammar-theory-page-answer-title { font-size: 13px; font-weight: 700; margin: 0px; display: flex; align-items: center; gap: 8px; }
.jj-grammar-theory-page-answer-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: rgb(248, 250, 252); border-radius: 8px; margin-bottom: 8px; }
.jj-grammar-theory-page-answer-num { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgb(255, 255, 255); font-size: 10px; font-weight: 700; flex-shrink: 0; }
.jj-grammar-theory-page-answer-content { flex: 1 1 0%; }
.jj-grammar-theory-page-answer-text { font-size: 12px; color: rgb(17, 25, 40); margin: 0px 0px 4px; }
.jj-grammar-theory-page-answer-explanation { font-size: 11px; color: rgb(107, 114, 128); margin: 0px; line-height: 1.5; }
.jj-grammar-theory-answer-page { width: 210mm; min-height: 297mm; padding: 20mm 15mm; background: rgb(255, 255, 255); font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
.jj-grammar-theory-answer-header { padding-left: 16px; border-left: 4px solid rgb(91, 192, 190); margin-bottom: 24px; }
.jj-grammar-theory-answer-header span { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; }
.jj-grammar-theory-answer-header h1 { font-size: 20px; font-weight: 700; color: rgb(17, 25, 40); margin: 0px; }
.jj-grammar-theory-answer-items { display: flex; flex-direction: column; gap: 16px; }
.jj-grammar-theory-answer-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: rgb(249, 250, 251); border-radius: 8px; }
.jj-grammar-theory-answer-num { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); border-radius: 50%; flex-shrink: 0; }
.jj-grammar-theory-answer-content { flex: 1 1 0%; }
.jj-grammar-theory-answer-text { font-size: 14px; color: rgb(17, 25, 40); margin: 0px 0px 4px; }
.jj-grammar-theory-answer-text strong { color: rgb(91, 192, 190); }
.jj-grammar-theory-answer-explanation { font-size: 13px; line-height: 1.5; color: rgb(107, 114, 128); margin: 0px; }
.jj-viewmode-tabs { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: rgb(249, 250, 251); border-bottom: 1px solid rgb(229, 231, 235); }
.jj-viewmode-unit-badge { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; background: linear-gradient(135deg, rgb(30, 58, 95), rgb(45, 90, 135)); border-radius: 6px; color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: rgba(30, 58, 95, 0.3) 0px 1px 3px; }
.jj-viewmode-unit-number { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.85; }
.jj-viewmode-unit-name { font-size: 13px; font-weight: 600; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.3); }
.jj-viewmode-unit-container { position: relative; }
.jj-viewmode-unit-badge.clickable { cursor: pointer; transition: 0.15s; border: none; }
.jj-viewmode-unit-badge.clickable:hover { background: linear-gradient(135deg, rgb(22, 46, 77), rgb(36, 74, 112)); transform: translateY(-1px); box-shadow: rgba(30, 58, 95, 0.4) 0px 2px 6px; }
.jj-viewmode-unit-chevron { margin-left: 4px; opacity: 0.8; transition: transform 0.2s; }
.jj-viewmode-unit-chevron.open { transform: rotate(180deg); }
.jj-viewmode-unit-dropdown { position: absolute; top: calc(100% + 4px); left: 0px; min-width: 180px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 16px; z-index: 100; overflow: hidden; animation: 0.15s ease 0s 1 normal none running unitDropdownFadeIn; }
@keyframes unitDropdownFadeIn { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.jj-viewmode-unit-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; font-size: 13px; color: rgb(55, 65, 81); background: transparent; border: none; cursor: pointer; transition: background 0.1s; text-align: left; }
.jj-viewmode-unit-dropdown-item:hover { background: rgb(243, 244, 246); }
.jj-viewmode-unit-dropdown-item.active { background: rgb(239, 246, 255); color: rgb(30, 58, 95); font-weight: 600; }
.jj-viewmode-unit-dropdown-item .unit-number { font-size: 11px; font-weight: 700; text-transform: uppercase; color: rgb(107, 114, 128); min-width: 50px; }
.jj-viewmode-unit-dropdown-item.active .unit-number { color: rgb(30, 58, 95); }
.jj-viewmode-unit-dropdown-item .unit-name { flex: 1 1 0%; font-size: 13px; }
.jj-viewmode-tab-group { display: flex; gap: 4px; }
.jj-viewmode-tab { padding: 6px 14px; font-size: 13px; font-weight: 500; color: rgb(107, 114, 128); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-viewmode-tab:hover { color: rgb(55, 65, 81); background: rgb(243, 244, 246); }
.jj-viewmode-tab.active { color: rgb(30, 58, 95); background: rgb(255, 255, 255); border-color: rgb(229, 231, 235); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; }
.jj-simpletest-range { display: flex; align-items: center; gap: 8px; margin-left: 4px; flex-wrap: wrap; }
.jj-simpletest-range-presets { display: flex; gap: 3px; flex-wrap: wrap; }
.jj-simpletest-range-preset { padding: 3px 8px; font-size: 11px; font-weight: 500; color: rgb(107, 114, 128); background: rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); border-radius: 4px; cursor: pointer; transition: 0.15s; white-space: nowrap; }
.jj-simpletest-range-preset:hover { background: rgb(243, 244, 246); color: rgb(55, 65, 81); }
.jj-simpletest-range-preset.active { background: rgb(238, 242, 255); color: rgb(79, 70, 229); border-color: rgb(165, 180, 252); }
.jj-simpletest-range-inputs { display: flex; align-items: center; gap: 4px; }
.jj-simpletest-range-input { width: 52px; padding: 3px 4px; font-size: 12px; text-align: center; border: 1px solid rgb(209, 213, 219); border-radius: 4px; outline: none; transition: border-color 0.15s; }
.jj-simpletest-range-input:focus { border-color: rgb(99, 102, 241); box-shadow: rgba(99, 102, 241, 0.25) 0px 0px 0px 1px; }
.jj-simpletest-download-btn { display: flex; align-items: center; gap: 3px; padding: 3px 10px; font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(79, 70, 229); border: none; border-radius: 4px; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.jj-simpletest-download-btn:hover { background: rgb(67, 56, 202); }
.jj-simpletest-download-btn:disabled { background: rgb(156, 163, 175); cursor: not-allowed; }
.jj-generate-vocab-btn { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(30, 58, 95), rgb(45, 74, 111)); border: none; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.jj-generate-vocab-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgb(45, 74, 111), rgb(61, 90, 127)); transform: translateY(-1px); box-shadow: rgba(30, 58, 95, 0.3) 0px 2px 8px; }
.jj-generate-vocab-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.jj-custom-panel { display: flex; flex-direction: column; gap: 12px; padding: 0px 12px 72px; height: 100%; width: 100%; min-width: 0px; overflow: hidden; position: relative; background: rgb(248, 250, 252); }
.jj-custom-header { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 20px 24px 12px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(255, 255, 255); margin: 0px -12px; }
.jj-custom-input-section { padding: 0px; background: transparent; }
.jj-custom-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: rgb(55, 65, 81); margin-bottom: 8px; }
.jj-custom-hint { font-weight: 400; color: rgb(156, 163, 175); font-size: 12px; }
.jj-custom-input { width: 100%; padding: 10px 14px; font-size: 14px; color: rgb(55, 65, 81); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 8px; outline: none; transition: 0.15s; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px; }
.jj-custom-input:focus { background: rgb(255, 255, 255); border-color: rgb(30, 58, 95); box-shadow: rgba(30, 58, 95, 0.1) 0px 0px 0px 3px; }
.jj-custom-input::placeholder { color: rgb(156, 163, 175); }
.jj-custom-textarea-section { display: flex; flex-direction: column; flex: 1 1 0px; min-height: 0px; min-width: 0px; width: 100%; background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 10px; overflow: hidden; transition: 0.3s; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px; }
.jj-custom-textarea-section .jj-custom-label { padding: 12px 16px 8px; margin-bottom: 0px; border-bottom: 1px solid rgb(226, 232, 240); background: rgb(248, 250, 252); }
.jj-custom-textarea { flex: 1 1 0%; min-height: 0px; padding: 14px 16px; font-size: 14px; line-height: 1.6; color: rgb(55, 65, 81); background: rgb(255, 255, 255); border: none; outline: none; resize: none; transition: 0.15s; }
.jj-custom-textarea:focus { background: rgb(255, 255, 255); }
.jj-custom-textarea::placeholder { color: rgb(156, 163, 175); }
.jj-custom-generate-btn { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162)); border: none; border-radius: 10px; cursor: pointer; transition: 0.2s; box-shadow: rgba(102, 126, 234, 0.25) 0px 2px 8px; z-index: 10; }
.jj-custom-generate-btn:hover { background: linear-gradient(135deg, rgb(90, 103, 216), rgb(107, 70, 193)); box-shadow: rgba(102, 126, 234, 0.35) 0px 4px 12px; transform: translateY(-1px); }
.jj-custom-generate-btn:active { transform: translateY(0px); box-shadow: rgba(102, 126, 234, 0.2) 0px 1px 4px; }
.jj-custom-generate-btn:disabled { background: rgb(229, 231, 235); color: rgb(156, 163, 175); cursor: not-allowed; transform: none; box-shadow: none; }
.jj-generate-btn-full:disabled { background: rgb(229, 231, 235); color: rgb(156, 163, 175); cursor: not-allowed; transform: none; box-shadow: none; }
.jj-add-chapter { background: transparent !important; border-style: dashed !important; border-color: rgba(0, 0, 0, 0.15) !important; color: rgb(156, 163, 175) !important; box-shadow: none !important; }
.jj-add-chapter:hover { background: rgba(0, 0, 0, 0.03) !important; color: rgb(107, 114, 128) !important; border-color: rgba(0, 0, 0, 0.25) !important; }
.jj-sentence-modal { background: rgb(255, 255, 255); border-radius: 12px; width: 90%; max-width: 560px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px; }
.jj-sentence-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgb(229, 231, 235); }
.jj-sentence-modal-header h3 { margin: 0px; font-size: 18px; font-weight: 600; color: rgb(17, 24, 39); }
.jj-sentence-modal-body { padding: 20px; overflow-y: auto; flex: 1 1 0%; }
.jj-sentence-field { margin-bottom: 16px; }
.jj-sentence-field label { display: block; font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); margin-bottom: 6px; }
.jj-sentence-field textarea, .jj-sentence-field input { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid rgb(209, 213, 219); border-radius: 6px; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s; }
.jj-sentence-field textarea:focus, .jj-sentence-field input:focus { outline: none; border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 3px; }
.jj-sentence-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jj-sentence-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jj-sentence-tag { padding: 6px 12px; font-size: 12px; font-weight: 500; border-radius: 16px; cursor: pointer; transition: 0.15s; }
.jj-sentence-tag.grammar { background: rgb(238, 242, 255); color: rgb(79, 70, 229); border: 1px solid rgb(199, 210, 254); }
.jj-sentence-tag.grammar.selected { background: rgb(79, 70, 229); color: rgb(255, 255, 255); border-color: rgb(79, 70, 229); }
.jj-sentence-tag.signal { background: rgb(254, 243, 199); color: rgb(217, 119, 6); border: 1px solid rgb(252, 211, 77); }
.jj-sentence-tag.signal.selected { background: rgb(217, 119, 6); color: rgb(255, 255, 255); border-color: rgb(217, 119, 6); }
.jj-sentence-hint { margin-top: 16px; padding: 12px; background: rgb(243, 244, 246); border-radius: 6px; font-size: 12px; color: rgb(107, 114, 128); text-align: center; }
.jj-sentence-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid rgb(229, 231, 235); background: rgb(249, 250, 251); }
.jj-btn-cancel { padding: 8px 16px; font-size: 14px; font-weight: 500; color: rgb(107, 114, 128); background: rgb(255, 255, 255); border: 1px solid rgb(209, 213, 219); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-btn-cancel:hover { background: rgb(243, 244, 246); }
.jj-btn-submit { padding: 8px 20px; font-size: 14px; font-weight: 500; color: rgb(255, 255, 255); background: rgb(16, 185, 129); border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-btn-submit:hover { background: rgb(5, 150, 105); }
.jj-btn-submit:disabled { background: rgb(209, 213, 219); cursor: not-allowed; }
.jj-reading-wizard-modal { background: rgb(17, 25, 40); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 48px; width: 95vw; max-width: 1400px; height: 90vh; max-height: 900px; display: flex; flex-direction: column; overflow: hidden; color: rgb(229, 231, 235); }
.jj-reading-wizard-modal .jj-wizard-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgb(55, 65, 81); background: rgb(17, 25, 40); }
.jj-reading-wizard-modal .jj-wizard-header-left { display: flex; align-items: center; gap: 12px; }
.jj-reading-wizard-modal .jj-wizard-icon { color: rgb(167, 139, 250); }
.jj-reading-wizard-modal .jj-wizard-title { font-size: 22px; font-weight: 700; color: rgb(243, 244, 246); margin: 0px; background: linear-gradient(135deg, rgb(167, 139, 250), rgb(96, 165, 250)) text; -webkit-text-fill-color: transparent; }
.jj-reading-wizard-modal .jj-wizard-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; border-radius: 8px; cursor: pointer; color: rgb(156, 163, 175); transition: 0.2s; }
.jj-reading-wizard-modal .jj-wizard-close:hover { background: rgb(55, 65, 81); color: rgb(255, 255, 255); }
.jj-reading-wizard-modal .jj-wizard-content-horizontal { display: flex; flex: 1 1 0%; overflow: hidden; }
.jj-reading-wizard-panel { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.jj-reading-wizard-panel:not(:last-child)::after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; width: 1px; background: rgb(55, 65, 81); }
.jj-reading-wizard-panel .jj-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0px 20px; height: 56px; min-height: 56px; background: rgb(17, 25, 40); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-reading-wizard-panel .jj-panel-header h3 { font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); margin: 0px; }
.jj-reading-wizard-panel .jj-panel-header-info { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(156, 163, 175); }
.jj-reading-wizard-panel .jj-header-selected { color: rgb(96, 165, 250); font-weight: 500; }
.jj-reading-wizard-panel .jj-panel-content { flex: 1 1 0%; overflow-y: auto; padding: 16px; }
.jj-top-filters { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgb(31, 41, 55); border-bottom: 1px solid rgb(55, 65, 81); margin-bottom: 12px; }
.jj-top-filter-row { display: flex; align-items: center; gap: 8px; }
.jj-top-filter-label { font-size: 11px; font-weight: 600; color: rgb(156, 163, 175); width: 40px; flex-shrink: 0; }
.jj-top-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-top-chip { padding: 4px 10px; font-size: 11px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 12px; cursor: pointer; transition: 0.15s; }
.jj-top-chip:hover { background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-top-chip.active { color: rgb(255, 255, 255); background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-panel2-tabs { display: flex; border-bottom: 1px solid rgb(55, 65, 81); background: rgb(17, 25, 40); }
.jj-panel2-tab { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; font-size: 14px; font-weight: 500; color: rgb(156, 163, 175); background: transparent; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 2px solid transparent; cursor: pointer; transition: 0.2s; }
.jj-panel2-tab:hover { color: rgb(229, 231, 235); background: rgba(255, 255, 255, 0.02); }
.jj-panel2-tab.active { color: rgb(96, 165, 250); border-bottom-color: rgb(96, 165, 250); background: rgba(96, 165, 250, 0.05); }
.jj-panel2-tab svg { opacity: 0.7; }
.jj-panel2-tab.active svg { opacity: 1; }
.jj-panel-units { width: 280px; min-width: 280px; max-width: 280px; flex: 0 0 auto; background: linear-gradient(rgb(26, 31, 46), rgb(21, 25, 34)); }
.jj-add-unit-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgb(55, 65, 81); border: none; border-radius: 6px; cursor: pointer; color: rgb(156, 163, 175); transition: 0.2s; }
.jj-add-unit-btn:hover { background: rgb(75, 85, 99); color: rgb(243, 244, 246); }
.jj-add-unit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jj-unit-list { display: flex; flex-direction: column; gap: 10px; }
.jj-unit-item { padding: 14px; background: rgb(31, 42, 55); border: 1px solid rgb(55, 65, 81); border-radius: 10px; cursor: pointer; transition: 0.2s; }
.jj-unit-item:hover { border-color: rgb(75, 85, 99); }
.jj-unit-item.selected { border-color: rgb(59, 130, 246); background: rgba(59, 130, 246, 0.1); }
.jj-unit-item-content { display: flex; flex-direction: column; gap: 8px; }
.jj-unit-item-row { display: flex; align-items: center; gap: 8px; }
.jj-unit-name-input { flex: 1 1 0%; padding: 6px 10px; font-size: 14px; font-weight: 500; color: rgb(243, 244, 246); background: transparent; border: 1px solid transparent; border-radius: 6px; outline: none; transition: 0.2s; }
.jj-unit-name-input:hover { background: rgb(55, 65, 81); }
.jj-unit-name-input:focus { background: rgb(55, 65, 81); border-color: rgb(75, 85, 99); }
.jj-unit-delete { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: 4px; cursor: pointer; color: rgb(107, 114, 128); opacity: 0; transition: 0.15s; flex-shrink: 0; }
.jj-unit-item:hover .jj-unit-delete { opacity: 1; }
.jj-unit-delete:hover { background: rgba(239, 68, 68, 0.1); color: rgb(239, 68, 68); }
.jj-drag-handle { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: transparent; border: none; border-radius: 4px; cursor: grab; color: rgb(107, 114, 128); transition: 0.2s; flex-shrink: 0; }
.jj-drag-handle:hover { background: rgb(55, 65, 81); color: rgb(156, 163, 175); }
.jj-drag-handle:active { cursor: grabbing; }
.jj-syntax-cross-card.jj-dragging { box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 24px; background: rgb(255, 255, 255); border-radius: 8px; z-index: 100; }
.jj-syntax-cross-card .jj-drag-handle { color: rgb(156, 163, 175); }
.jj-syntax-cross-card .jj-drag-handle:hover { background: rgba(0, 0, 0, 0.05); color: rgb(55, 65, 81); }
.jj-unit-count-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(156, 163, 175); }
.jj-unit-selected-count { color: rgb(96, 165, 250); font-weight: 500; margin-left: 4px; }
.jj-unit-count-row .jj-selected-count { font-size: 13px; color: rgb(209, 213, 219); }
.jj-unit-count-row .jj-selected-count strong { color: rgb(59, 130, 246); font-weight: 600; }
.jj-unit-count-row .jj-no-selection { color: rgb(107, 114, 128); font-style: italic; }
.jj-passage-count-input { width: 50px; padding: 4px 8px; font-size: 13px; color: rgb(243, 244, 246); background: rgb(45, 49, 57); border: 1px solid rgb(55, 65, 81); border-radius: 4px; text-align: center; }
.jj-unit-filter-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.jj-unit-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: 4px; }
.jj-tag-topic { background: rgba(167, 139, 250, 0.15); color: rgb(196, 181, 253); }
.jj-tag-type { background: rgba(96, 165, 250, 0.15); color: rgb(147, 197, 253); }
.jj-tag-more { background: rgb(55, 65, 81); color: rgb(156, 163, 175); }
.jj-unit-empty-hint { font-size: 12px; color: rgb(107, 114, 128); font-style: italic; }
.jj-panel-filters { flex: 1 1 0%; min-width: 320px; display: flex; flex-direction: column; }
.jj-panel-filters .jj-panel-content { flex: 1 1 0%; overflow-y: auto; min-height: 0px; }
.jj-filter-list { display: flex; flex-direction: column; gap: 4px; }
.jj-filter-section { background: rgb(31, 42, 55); border: 1px solid rgb(55, 65, 81); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.jj-filter-section-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; font-size: 13px; font-weight: 500; color: rgb(209, 213, 219); background: transparent; border: none; cursor: pointer; text-align: left; transition: background 0.2s; }
.jj-filter-section-header:hover { background: rgb(55, 65, 81); }
.jj-filter-section-header svg { color: rgb(107, 114, 128); }
.jj-filter-badge { margin-left: auto; padding: 2px 8px; font-size: 11px; font-weight: 600; color: rgb(96, 165, 250); background: rgba(59, 130, 246, 0.15); border-radius: 10px; }
.jj-filter-section-content { padding: 0px 14px 14px; }
.jj-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-filter-chip:hover { background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-filter-chip.active { color: rgb(255, 255, 255); background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-type-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-type-icon { font-size: 12px; }
.jj-topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-topic-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 4px; cursor: pointer; transition: 0.15s; text-align: left; }
.jj-topic-chip:hover { background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-topic-chip.active { color: rgb(255, 255, 255); background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-topic-icon { font-size: 12px; }
.jj-difficulty-chip.active { background: color-mix(in srgb,var(--difficulty-color) 20%,transparent); border-color: var(--difficulty-color); color: var(--difficulty-color); }
.jj-no-unit-selected { display: flex; align-items: center; justify-content: center; height: 100px; color: rgb(107, 114, 128); font-size: 14px; }
.jj-panel-passages { flex: 1.3 1 0%; min-width: 400px; }
.jj-panel-passages .jj-panel-content { padding: 0px; }
.jj-search-panel { display: flex; flex-direction: column; gap: 12px; }
.jj-search-container-vertical { display: flex; flex-direction: column; gap: 10px; }
.jj-search-container-vertical .jj-search-input { padding: 12px 16px; font-size: 14px; color: rgb(243, 244, 246); background: rgb(30, 33, 40); border: 1px solid rgb(55, 65, 81); border-radius: 8px; outline: none; transition: 0.2s; }
.jj-search-container-vertical .jj-search-input:focus { border-color: rgb(96, 165, 250); box-shadow: rgba(96, 165, 250, 0.1) 0px 0px 0px 2px; }
.jj-search-btn-full { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)); border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-search-btn-full:hover { background: linear-gradient(135deg, rgb(37, 99, 235), rgb(29, 78, 216)); transform: translateY(-1px); }
.jj-search-guide-compact { padding: 12px; background: rgb(30, 33, 40); border: 1px solid rgb(45, 49, 57); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.jj-guide-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgb(156, 163, 175); cursor: help; }
.jj-search-examples-compact { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.jj-example-section { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jj-example-section .jj-example-label { min-width: 60px; text-align: center; }
.jj-example-section .jj-example-btns { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 0%; }
.jj-example-section .jj-example-btn { padding: 5px 10px; font-size: 11px; }
.jj-panel-search { flex: 1 1 0%; min-width: 500px; }
.jj-panel-search .jj-panel-content { padding: 0px; }
.jj-passage-oracle { display: flex; flex-direction: column; height: 100%; }
.jj-search-container { display: flex; gap: 12px; padding: 20px 24px; background: rgb(30, 33, 40); }
.jj-search-input { flex: 1 1 0%; padding: 14px 18px; font-size: 15px; color: rgb(243, 244, 246); background: rgb(45, 49, 57); border: 1px solid rgb(55, 65, 81); border-radius: 10px; outline: none; transition: 0.2s; }
.jj-search-input::placeholder { color: rgb(107, 114, 128); }
.jj-search-input:focus { border-color: rgb(167, 139, 250); box-shadow: rgba(167, 139, 250, 0.1) 0px 0px 0px 3px; }
.jj-search-btn { display: flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 14px; font-weight: 600; color: rgb(26, 29, 35); background: rgb(243, 244, 246); border: none; border-radius: 10px; cursor: pointer; transition: 0.2s; }
.jj-search-btn:hover { background: rgb(255, 255, 255); transform: translateY(-1px); }
.jj-search-guide { margin: 0px 24px 16px; padding: 16px 20px; background: rgb(30, 33, 40); border: 1px solid rgb(45, 49, 57); border-radius: 10px; }
.jj-guide-title { font-size: 13px; font-weight: 600; color: rgb(156, 163, 175); margin-bottom: 12px; }
.jj-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jj-guide-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgb(156, 163, 175); }
.jj-guide-bracket { color: rgb(167, 139, 250); font-weight: 600; }
.jj-guide-label { padding: 2px 8px; font-size: 10px; font-weight: 600; border-radius: 4px; }
.jj-label-grammar { background: rgba(45, 212, 191, 0.15); color: rgb(45, 212, 191); }
.jj-label-difficulty { background: rgba(251, 146, 60, 0.15); color: rgb(251, 146, 60); }
.jj-label-keyword { background: rgba(96, 165, 250, 0.15); color: rgb(96, 165, 250); }
.jj-guide-keyword { color: rgb(244, 114, 182); font-weight: 500; }
.jj-guide-example { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(45, 49, 57); font-size: 12px; color: rgb(107, 114, 128); }
.jj-search-examples { padding: 0px 24px 16px; display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow-y: auto; }
.jj-example-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jj-example-label { padding: 4px 10px; font-size: 11px; font-weight: 700; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.jj-label-sql { background: rgba(250, 204, 21, 0.2); color: rgb(250, 204, 21); }
.jj-label-ai { background: rgba(167, 139, 250, 0.2); color: rgb(167, 139, 250); }
.jj-label-hybrid { background: rgba(74, 222, 128, 0.2); color: rgb(74, 222, 128); }
.jj-example-desc { font-size: 11px; color: rgb(107, 114, 128); margin-right: 4px; }
.jj-example-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-example-btn { padding: 6px 12px; font-size: 12px; color: rgb(209, 213, 219); background: rgb(45, 49, 57); border: 1px solid rgb(55, 65, 81); border-radius: 6px; cursor: pointer; transition: 0.2s; }
.jj-example-btn:hover { background: rgb(55, 65, 81); border-color: rgb(75, 85, 99); }
.jj-example-btn.jj-btn-ai { border-color: rgba(167, 139, 250, 0.3); }
.jj-example-btn.jj-btn-ai:hover { background: rgba(167, 139, 250, 0.1); border-color: rgb(167, 139, 250); }
.jj-example-btn.jj-btn-hybrid { border-color: rgba(74, 222, 128, 0.3); }
.jj-example-btn.jj-btn-hybrid:hover { background: rgba(74, 222, 128, 0.1); border-color: rgb(74, 222, 128); }
.jj-passage-results { flex: 1 1 0%; display: flex; flex-direction: column; border-top: 1px solid rgb(45, 49, 57); overflow: hidden; }
.jj-results-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: rgb(30, 33, 40); border-bottom: 1px solid rgb(45, 49, 57); }
.jj-results-count { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(156, 163, 175); }
.jj-results-selected { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: rgb(96, 165, 250); }
.jj-passage-list { flex: 1 1 0%; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }
.jj-selected-passages-section { background: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 8px; margin: 12px 12px 0px; padding: 10px; }
.jj-selected-passages-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: rgb(96, 165, 250); }
.jj-selected-passages-hint { font-size: 11px; font-weight: 400; color: rgb(107, 114, 128); }
.jj-selected-passage-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgb(30, 33, 40); border: 1px solid rgb(55, 65, 81); border-radius: 6px; }
.jj-selected-passage-item:hover { border-color: rgb(75, 85, 99); }
.jj-selected-passage-title { flex: 1 1 0%; font-size: 12px; color: rgb(229, 231, 235); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-selected-passage-type { font-size: 11px; color: rgb(156, 163, 175); padding: 2px 6px; background: rgb(55, 65, 81); border-radius: 4px; }
.jj-selected-passage-remove { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: transparent; border: none; border-radius: 4px; cursor: pointer; color: rgb(107, 114, 128); transition: 0.15s; }
.jj-passage-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: rgb(30, 33, 40); border: 1px solid rgb(45, 49, 57); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-passage-item:hover { border-color: rgb(75, 85, 99); }
.jj-passage-item.selected { border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.15); }
.jj-passage-item.selected:hover { border-color: rgba(59, 130, 246, 0.6); }
.jj-passage-checkbox { display: flex; align-items: flex-start; }
.jj-check-selected { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(59, 130, 246); border-radius: 50%; }
.jj-check-empty { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 11px; font-weight: 600; color: rgb(156, 163, 175); background: rgb(31, 41, 55); border-radius: 50%; }
.jj-passage-content { flex: 1 1 0%; min-width: 0px; }
.jj-passage-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.jj-passage-title { font-size: 13px; font-weight: 500; color: rgb(255, 255, 255); }
.jj-passage-tags { display: flex; align-items: center; gap: 4px; }
.jj-passage-tags .jj-tag { padding: 2px 8px; font-size: 11px; font-weight: 500; background: rgb(55, 65, 81); color: rgb(209, 213, 219); border: 1px solid rgb(75, 85, 99); border-radius: 10px; }
.jj-passage-tags .jj-tag-topic { background: transparent; border: none; padding: 0px; font-size: 14px; }
.jj-passage-tags .jj-tag-type, .jj-passage-tags .jj-tag-difficulty { background: rgb(55, 65, 81); color: rgb(209, 213, 219); border: 1px solid rgb(75, 85, 99); }
.jj-passage-tags .jj-diff-easy { background: rgba(34, 197, 94, 0.15); color: rgb(134, 239, 172); border-color: rgba(34, 197, 94, 0.3); }
.jj-passage-tags .jj-diff-medium { background: rgba(234, 179, 8, 0.15); color: rgb(253, 224, 71); border-color: rgba(234, 179, 8, 0.3); }
.jj-passage-tags .jj-diff-hard { background: rgba(239, 68, 68, 0.15); color: rgb(252, 165, 165); border-color: rgba(239, 68, 68, 0.3); }
.jj-passage-tags .jj-diff-killer { background: rgba(124, 58, 237, 0.15); color: rgb(196, 181, 253); border-color: rgba(124, 58, 237, 0.3); }
.jj-unit-tab-bar { display: flex; background: rgb(31, 41, 55); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-unit-tab { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; font-size: 13px; font-weight: 500; color: rgb(156, 163, 175); background: transparent; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 2px solid transparent; cursor: pointer; transition: 0.15s; }
.jj-unit-tab:hover { color: rgb(209, 213, 219); background: rgba(255, 255, 255, 0.05); }
.jj-unit-tab.active { color: rgb(59, 130, 246); border-bottom-color: rgb(59, 130, 246); background: rgba(59, 130, 246, 0.1); }
.jj-unit-info-card { padding: 10px 12px; background: rgb(31, 41, 55); border-radius: 6px; margin: 12px 16px; }
.jj-unit-info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.jj-unit-info-name { font-size: 13px; font-weight: 500; color: rgb(243, 244, 246); }
.jj-unit-info-count { font-size: 11px; color: rgb(156, 163, 175); }
.jj-type-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-type-filter-tab { padding: 4px 10px; font-size: 11px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 12px; cursor: pointer; transition: 0.15s; }
.jj-type-filter-tab:hover { background: rgb(75, 85, 99); }
.jj-type-filter-tab.active { color: rgb(255, 255, 255); background: rgba(59, 130, 246, 0.2); border-color: rgb(59, 130, 246); }
.jj-passage-controls { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgb(31, 41, 55); border-radius: 6px; margin: 0px 16px 12px; }
.jj-passage-stats { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgb(156, 163, 175); }
.jj-stats-dot { color: rgb(75, 85, 99); }
.jj-stats-selected { color: rgb(96, 165, 250); }
.jj-passage-actions { display: flex; align-items: center; gap: 6px; }
.jj-action-btn { padding: 4px 10px; font-size: 11px; font-weight: 500; color: rgb(209, 213, 219); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-action-btn:hover { background: rgb(75, 85, 99); }
.jj-action-btn.jj-btn-deselect { color: rgb(252, 165, 165); border-color: rgba(239, 68, 68, 0.3); }
.jj-action-btn.jj-btn-deselect:hover { background: rgba(239, 68, 68, 0.15); }
.jj-sort-select { padding: 4px 22px 4px 8px; font-size: 11px; color: rgb(209, 213, 219); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") right 4px center / 14px no-repeat rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 4px; cursor: pointer; appearance: none; }
.jj-sort-select:hover { background-color: rgb(75, 85, 99); }
.jj-header-available { color: rgb(107, 114, 128); margin-left: 4px; }
.jj-passage-item-header { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.jj-expand-hint { margin-left: auto; font-size: 11px; color: rgb(107, 114, 128); }
.jj-passage-item.expanded { border-color: rgb(96, 165, 250); flex-direction: column; }
.jj-passage-expanded { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(55, 65, 81); display: flex; flex-direction: column; gap: 16px; }
.jj-view-toggle { display: flex; gap: 4px; margin-bottom: 12px; background: rgb(31, 41, 55); border-radius: 6px; padding: 3px; width: fit-content; }
.jj-view-toggle-btn { padding: 4px 12px; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; background: transparent; color: rgb(156, 163, 175); transition: 0.15s; }
.jj-view-toggle-btn.active { background: rgb(59, 130, 246); color: rgb(255, 255, 255); }
.jj-tag-refined { background: rgba(59, 130, 246, 0.15) !important; color: rgb(147, 197, 253) !important; border-color: rgba(59, 130, 246, 0.3) !important; }
.jj-passage-refined h4 { font-size: 12px; font-weight: 600; color: rgb(96, 165, 250); margin: 0px 0px 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.jj-refined-sentence { display: flex; gap: 10px; margin-bottom: 10px; padding: 6px 0px; border-bottom: 1px solid rgb(31, 41, 55); }
.jj-sentence-num { font-size: 11px; color: rgb(107, 114, 128); min-width: 20px; text-align: right; padding-top: 2px; }
.jj-sentence-eng { font-size: 13px; color: rgb(209, 213, 219); line-height: 1.7; margin: 0px; }
.jj-sentence-kor { font-size: 12px; color: rgb(156, 163, 175); line-height: 1.6; margin: 4px 0px 0px; }
.jj-passage-fulltext h4, .jj-passage-questions h4 { font-size: 12px; font-weight: 600; color: rgb(96, 165, 250); margin: 0px 0px 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.jj-passage-fulltext p { font-size: 13px; color: rgb(209, 213, 219); line-height: 1.8; margin: 0px; text-align: justify; }
.jj-passage-questions .jj-question-title { font-size: 13px; font-weight: 500; color: rgb(229, 231, 235); margin: 0px 0px 8px; }
.jj-passage-questions .jj-question-option { font-size: 12px; color: rgb(156, 163, 175); margin: 0px 0px 4px; padding-left: 8px; }
.jj-passage-analysis { display: flex; flex-direction: column; gap: 16px; }
.jj-analysis-header-row { display: flex; align-items: center; gap: 10px; }
.jj-wrong-rate { display: inline-block; padding: 4px 12px; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 6px; font-size: 13px; font-weight: 700; color: rgb(248, 113, 113); }
.jj-analysis-section h4 { font-size: 11px; font-weight: 600; color: rgb(107, 114, 128); margin: 0px 0px 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.jj-analysis-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-topic-tag { display: inline-block; padding: 3px 10px; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 12px; font-size: 12px; color: rgb(147, 197, 253); }
.jj-analysis-concepts { display: flex; flex-wrap: wrap; gap: 6px; }
.jj-concept-tag { display: inline-block; padding: 3px 10px; background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.25); border-radius: 12px; font-size: 12px; color: rgb(196, 181, 253); }
.jj-domain-tag { display: inline-block; padding: 3px 10px; background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.25); border-radius: 12px; font-size: 12px; color: rgb(251, 191, 36); }
.jj-learning-tag { display: inline-block; padding: 3px 10px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 12px; font-size: 12px; color: rgb(74, 222, 128); }
.jj-difficulty-factor { margin-bottom: 10px; padding: 10px 12px; background: rgba(239, 68, 68, 0.06); border-left: 3px solid rgb(239, 68, 68); border-radius: 0px 6px 6px 0px; }
.jj-factor-type { display: inline-block; font-size: 10px; font-weight: 700; color: rgb(248, 113, 113); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.jj-difficulty-factor p { font-size: 13px; color: rgb(209, 213, 219); line-height: 1.6; margin: 0px; }
.jj-bg-knowledge { font-size: 13px; color: rgb(209, 213, 219); line-height: 1.8; margin: 0px; padding: 12px; background: rgba(59, 130, 246, 0.06); border-radius: 8px; border: 1px solid rgba(59, 130, 246, 0.15); }
.jj-passage-preview { font-size: 12px; color: rgb(156, 163, 175); line-height: 1.4; margin: 0px 0px 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jj-passage-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: rgb(107, 114, 128); }
.jj-passage-add { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgb(45, 49, 57); border: none; border-radius: 6px; cursor: pointer; color: rgb(156, 163, 175); transition: 0.2s; flex-shrink: 0; }
.jj-passage-add:hover { background: rgb(59, 130, 246); color: rgb(255, 255, 255); }
.jj-reading-wizard-modal .jj-wizard-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; background: rgb(30, 33, 40); border-top: 1px solid rgb(45, 49, 57); }
.jj-reading-wizard-modal .jj-wizard-footer-info { font-size: 14px; color: rgb(156, 163, 175); }
.jj-reading-wizard-modal .jj-wizard-footer-info strong { color: rgb(59, 130, 246); font-weight: 600; }
.jj-reading-wizard-modal .jj-wizard-footer-info .jj-no-selection { color: rgb(107, 114, 128); font-style: italic; }
.jj-footer-selected { margin-left: 8px; color: rgb(96, 165, 250); font-weight: 500; }
.jj-reading-wizard-modal .jj-wizard-footer-actions { display: flex; gap: 12px; }
.jj-reading-wizard-modal .jj-btn { padding: 10px 24px; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.jj-reading-wizard-modal .jj-btn-secondary { color: rgb(156, 163, 175); background: transparent; border: 1px solid rgb(55, 65, 81); }
.jj-reading-wizard-modal .jj-btn-secondary:hover { background: rgb(45, 49, 57); border-color: rgb(75, 85, 99); }
.jj-reading-wizard-modal .jj-btn-primary { color: rgb(26, 29, 35); background: linear-gradient(135deg, rgb(167, 139, 250), rgb(129, 140, 248)); border: none; }
.jj-reading-wizard-modal .jj-btn-primary:hover { transform: translateY(-1px); box-shadow: rgba(167, 139, 250, 0.3) 0px 4px 12px; }
.jj-school-placeholder, .jj-mocktest-placeholder { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 40px; background: linear-gradient(135deg, rgb(31, 41, 55), rgb(17, 25, 40)); }
.jj-placeholder-content { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 400px; padding: 48px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgb(55, 65, 81); border-radius: 16px; }
.jj-placeholder-content svg { color: rgb(107, 114, 128); margin-bottom: 24px; }
.jj-placeholder-content h2 { font-size: 24px; font-weight: 700; color: rgb(243, 244, 246); margin: 0px 0px 12px; }
.jj-placeholder-content p { font-size: 14px; color: rgb(156, 163, 175); margin: 0px 0px 24px; line-height: 1.6; }
.jj-placeholder-content ul { list-style: none; padding: 0px; margin: 0px 0px 32px; text-align: left; width: 100%; }
.jj-placeholder-content ul li { font-size: 13px; color: rgb(107, 114, 128); padding: 8px 0px 8px 24px; position: relative; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-placeholder-content ul li:last-child { border-bottom: none; }
.jj-placeholder-content ul li::before { content: "✓"; position: absolute; left: 0px; color: rgb(59, 130, 246); }
.jj-coming-soon-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 14px; font-weight: 600; color: rgb(156, 163, 175); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 8px; cursor: not-allowed; }
.jj-coming-soon-btn svg { color: rgb(245, 158, 11); margin: 0px; }
.jj-start-wizard-btn { display: flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: 15px; font-weight: 600; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)); border: none; border-radius: 10px; cursor: pointer; transition: 0.2s; box-shadow: rgba(59, 130, 246, 0.3) 0px 4px 12px; }
.jj-start-wizard-btn:hover { background: linear-gradient(135deg, rgb(37, 99, 235), rgb(29, 78, 216)); box-shadow: rgba(59, 130, 246, 0.4) 0px 6px 16px; transform: translateY(-1px); }
.jj-start-wizard-btn:active { transform: translateY(0px); }
.jj-start-wizard-btn svg { color: rgb(252, 211, 77); }
.jj-reading-passage { position: relative; font-size: calc(13px * var(--font-scale, 1)); line-height: 1.75; margin-bottom: 16px; padding: 12px 16px; background: linear-gradient(135deg, rgb(250, 251, 252), rgb(248, 249, 250)); border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 2px, rgba(0, 0, 0, 0.02) 0px 4px 12px; white-space: pre-wrap; color: rgb(31, 41, 55); letter-spacing: -0.01em; text-align: justify; word-break: keep-all; }
.jj-reading-vocab { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgba(0, 0, 0, 0.1); text-align: right; font-size: calc(11px * var(--font-scale, 1)); color: rgb(107, 114, 128); line-height: 1.5; }
.jj-reading-passage::before { content: ""; position: absolute; left: 0px; top: 12px; bottom: 12px; width: 4px; background: linear-gradient(180deg,var(--theme-color, #0F4C81) 0%,var(--theme-color, #0F4C81)80 100%); border-radius: 0px 4px 4px 0px; }
.jj-reading-passage-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.jj-reading-passage-number { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 14px; font-weight: 700; background-color: var(--theme-color, #0F4C81); }
.jj-reading-passage-title { flex: 1 1 0%; font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; color: rgb(31, 41, 55); margin: 0px; letter-spacing: -0.02em; line-height: 1.5; }
.jj-reading-passage-source { font-size: calc(8px * var(--font-scale, 1)); color: rgb(107, 114, 128); white-space: nowrap; flex-shrink: 0; padding: 2px 10px; border-radius: 30px; background-color: rgb(243, 244, 246); margin-left: auto; }
.jj-reading-questions { font-size: calc(13px * var(--font-scale, 1)); line-height: 1.75; margin-top: 8px; }
.jj-reading-question-stem { margin-bottom: 12px; font-weight: 600; color: rgb(17, 24, 39); padding-left: 0px; }
.jj-reading-question-option { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px; font-weight: 400; color: rgb(0, 0, 0); line-height: 1.4; }
.jj-reading-question-number { flex-shrink: 0; font-size: 1.15em; font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.jj-reading-question-option-text { flex: 1 1 0%; }
.jj-reading-sentence-row { display: flex; gap: 14px; margin-bottom: 12px; padding: 10px 14px; border-radius: 8px; transition: background 0.15s; }
.jj-reading-sentence-row:nth-child(2n+1) { background: rgba(0, 0, 0, 0.02); border-left: 2px solid rgba(var(--theme-color-rgb, 15, 76, 129),.15); }
.jj-reading-sentence-row:hover { background: rgba(var(--theme-color-rgb, 15, 76, 129),.04); }
.jj-reading-sentence-number { color: var(--theme-color, #0F4C81); font-weight: 700; min-width: 24px; font-size: calc(12px * var(--font-scale, 1)); padding-top: 2px; }
.jj-reading-sentence-content { flex: 1 1 0%; }
.jj-reading-sentence-eng { font-size: calc(13px * var(--font-scale, 1)); line-height: 1.7; margin-bottom: 4px; color: rgb(31, 41, 55); }
.jj-reading-sentence-kor { font-size: calc(12px * var(--font-scale, 1)); line-height: 1.6; color: rgb(107, 114, 128); }
.jj-guide-tooltip-fixed { position: fixed; padding: 8px 12px; background: rgb(31, 41, 55); border: 1px solid rgb(75, 85, 99); border-radius: 6px; font-size: 12px; color: rgb(229, 231, 235); width: 280px; z-index: 10000; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; line-height: 1.5; white-space: normal; pointer-events: auto; }
.jj-label-hybrid { background: rgba(74, 222, 128, 0.15); color: rgb(74, 222, 128); }
.jj-clickable { cursor: pointer; transition: filter 0.15s, transform 0.15s; }
.jj-clickable:hover { filter: brightness(1.3); transform: translateY(-1px); }
.jj-transform-wizard-modal { background: rgb(17, 25, 40); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 48px; width: 95vw; max-width: 1400px; height: 85vh; max-height: 900px; display: flex; flex-direction: column; overflow: hidden; }
.jj-transform-wizard-modal .jj-wizard-header { background: rgb(17, 25, 40); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-transform-wizard-modal .jj-wizard-title { color: rgb(255, 255, 255); }
.jj-transform-wizard-modal .jj-wizard-close { color: rgb(156, 163, 175); }
.jj-transform-wizard-modal .jj-wizard-close:hover { background: rgb(55, 65, 81); color: rgb(255, 255, 255); }
.jj-transform-wizard-content { flex: 1 1 0%; display: flex; overflow: hidden; }
.jj-transform-wizard-panel { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.jj-transform-wizard-panel:not(:last-child)::after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; width: 1px; background: rgb(55, 65, 81); }
.jj-transform-panel-passages { flex: 0 0 22%; min-width: 260px; background: rgb(31, 41, 55); display: flex; flex-direction: column; }
.jj-transform-panel-types { flex: 0 0 35%; min-width: 350px; background: rgb(31, 41, 55); }
.jj-transform-panel-summary { flex: 1 1 0%; min-width: 400px; background: rgb(31, 41, 55); }
.jj-transform-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgb(17, 25, 40); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-transform-panel-header h3 { font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); margin: 0px; }
.jj-transform-panel-content { flex: 1 1 0%; overflow-y: auto; padding: 12px; }
.jj-add-passage-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(59, 130, 246); background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-add-passage-btn:hover { background: rgba(59, 130, 246, 0.2); }
.jj-passage-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; color: rgb(107, 114, 128); }
.jj-passage-empty svg { color: rgb(75, 85, 99); margin-bottom: 12px; }
.jj-passage-empty p { font-size: 13px; margin-bottom: 16px; }
.jj-add-first-passage-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: rgb(255, 255, 255); background: rgb(59, 130, 246); border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.jj-add-first-passage-btn:hover { background: rgb(37, 99, 235); }
.jj-passage-list { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; margin-bottom: 16px; }
.jj-passage-item { padding: 10px 12px; background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-passage-item:hover { border-color: rgb(107, 114, 128); }
.jj-passage-item.selected { border-color: rgb(59, 130, 246); background: rgba(59, 130, 246, 0.1); }
.jj-passage-item-content { display: flex; flex-direction: column; gap: 6px; }
.jj-passage-item-header { display: flex; align-items: center; gap: 8px; }
.jj-passage-icon { color: rgb(156, 163, 175); flex-shrink: 0; }
.jj-passage-source { flex: 1 1 0%; font-size: 13px; font-weight: 600; color: rgb(17, 24, 39); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-passage-delete { padding: 4px; color: rgb(156, 163, 175); background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: 0; transition: 0.15s; }
.jj-passage-item:hover .jj-passage-delete { opacity: 1; }
.jj-passage-delete:hover { color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.1); }
.jj-passage-item-meta { display: flex; align-items: center; gap: 6px; }
.jj-passage-badge { font-size: 11px; padding: 2px 8px; background: rgba(59, 130, 246, 0.2); color: rgb(96, 165, 250); border-radius: 10px; }
.jj-passage-badge.empty { background: rgba(107, 114, 128, 0.2); color: rgb(156, 163, 175); }
.jj-passage-viewer { padding: 12px; background: rgb(17, 25, 40); border-radius: 8px; border: 1px solid rgb(55, 65, 81); }
.jj-passage-viewer h4 { font-size: 12px; font-weight: 600; color: rgb(156, 163, 175); margin: 0px 0px 8px; }
.jj-passage-text { font-size: 13px; line-height: 1.7; color: rgb(209, 213, 219); max-height: 350px; overflow-y: auto; }
.jj-arrangement-sentences { display: flex; flex-direction: column; gap: 2px; }
.jj-arrangement-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0px; border-bottom: 1px dashed rgb(55, 65, 81); }
.jj-arrangement-row:last-of-type { border-bottom: none; }
.jj-sentence-number { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: rgb(156, 163, 175); background: rgb(55, 65, 81); border-radius: 50%; }
.jj-sentence-text { flex: 1 1 0%; font-size: 13px; line-height: 1.6; color: rgb(209, 213, 219); }
.jj-split-btn { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgb(55, 65, 81); border: 2px dashed rgb(75, 85, 99); border-radius: 6px; cursor: pointer; transition: 0.15s; margin-left: auto; }
.jj-split-btn:hover { background: rgb(75, 85, 99); border-color: rgb(107, 114, 128); }
.jj-split-btn.active { background: rgba(251, 191, 36, 0.3); border: 2px solid rgb(251, 191, 36); }
.jj-split-icon { font-size: 16px; font-weight: 700; color: rgb(156, 163, 175); }
.jj-split-btn.active .jj-split-icon { color: rgb(251, 191, 36); }
.jj-arrangement-info { margin-top: 8px; padding: 8px 12px; font-size: 12px; color: rgb(156, 163, 175); background: rgb(31, 41, 55); border-radius: 6px; text-align: center; }
.jj-arrangement-passage { line-height: 1.8; text-align: justify; }
.jj-split-btn-inline { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 18px; font-weight: 700; color: rgb(156, 163, 175); background: rgb(255, 255, 255); border: 2px dashed rgb(156, 163, 175); border-radius: 4px; cursor: pointer; transition: 0.15s; vertical-align: middle; margin: 0px 2px; }
.jj-split-btn-inline:hover { color: var(--split-color, #ea580c); border-color: var(--split-color, #ea580c); transform: scale(1.15); box-shadow: rgba(234, 88, 12, 0.3) 0px 0px 8px; }
.jj-split-btn-inline.active { background: var(--split-color, #ea580c); color: rgb(255, 255, 255); border-color: var(--split-color, #ea580c); border-style: solid; }
.jj-insertion-sentences { display: flex; flex-direction: column; gap: 4px; }
.jj-insertion-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: rgb(31, 41, 55); border: 1px solid rgb(55, 65, 81); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-insertion-row:hover { background: rgb(55, 65, 81); border-color: rgb(75, 85, 99); }
.jj-insertion-row.selected { background: rgba(194, 65, 12, 0.2); border-color: rgb(194, 65, 12); }
.jj-insertion-row.selected .jj-sentence-number { background: rgb(194, 65, 12); color: rgb(255, 255, 255); }
.jj-insertion-badge { flex-shrink: 0; padding: 2px 8px; font-size: 10px; font-weight: 600; color: rgb(194, 65, 12); background: rgba(194, 65, 12, 0.2); border-radius: 4px; margin-left: auto; }
.jj-insertion-info { margin-top: 8px; padding: 8px 12px; font-size: 12px; color: rgb(156, 163, 175); background: rgb(31, 41, 55); border-radius: 6px; text-align: center; }
.jj-selected-passage-label { font-size: 12px; color: rgb(96, 165, 250); background: rgba(59, 130, 246, 0.1); padding: 4px 10px; border-radius: 12px; }
.jj-quick-select-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jj-quick-select-btns { display: flex; gap: 4px; }
.jj-quick-btn { padding: 4px 8px; font-size: 11px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-quick-btn.jj-quick-high { background: rgba(241, 245, 249, 0.15); color: rgb(241, 245, 249); }
.jj-quick-btn.jj-quick-high:hover { background: rgba(241, 245, 249, 0.25); }
.jj-quick-btn.jj-quick-medium { background: rgba(203, 213, 225, 0.15); color: rgb(203, 213, 225); }
.jj-quick-btn.jj-quick-medium:hover { background: rgba(203, 213, 225, 0.25); }
.jj-quick-btn.jj-quick-low { background: rgba(148, 163, 184, 0.15); color: rgb(148, 163, 184); }
.jj-quick-btn.jj-quick-low:hover { background: rgba(148, 163, 184, 0.25); }
.jj-quick-btn.jj-quick-reset { background: rgba(107, 114, 128, 0.2); color: rgb(156, 163, 175); }
.jj-quick-btn.jj-quick-reset:hover { background: rgba(107, 114, 128, 0.4); }
.jj-type-settings { display: flex; flex-direction: column; gap: 8px; }
.jj-no-passage-selected { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; color: rgb(107, 114, 128); }
.jj-no-passage-selected p { font-size: 14px; }
.jj-category-accordion { background: rgb(55, 65, 81); border-radius: 8px; overflow: hidden; }
.jj-category-header-row { display: flex; align-items: center; gap: 8px; }
.jj-category-header { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; padding: 12px 14px; background: transparent; border: none; cursor: pointer; transition: background 0.15s; }
.jj-category-quick-btns { display: flex; gap: 4px; padding-right: 10px; }
.jj-cat-quick-btn { padding: 4px 8px; font-size: 11px; font-weight: 500; color: rgb(156, 163, 175); background: rgba(107, 114, 128, 0.2); border: none; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-cat-quick-btn:hover { background: rgba(107, 114, 128, 0.4); color: rgb(209, 213, 219); }
.jj-category-header:hover { background: rgb(75, 85, 99); }
.jj-category-icon { font-size: 16px; }
.jj-category-label { flex: 1 1 0%; font-size: 14px; font-weight: 600; color: rgb(229, 231, 235); text-align: left; }
.jj-category-subtotal { font-size: 12px; color: rgb(156, 163, 175); margin-right: 8px; }
.jj-category-header svg { color: rgb(156, 163, 175); }
.jj-category-content { padding: 8px 12px 12px; border-top: 1px solid rgb(75, 85, 99); background: rgb(45, 55, 72); }
.jj-subtype-row { display: flex; align-items: center; gap: 10px; padding: 8px 0px; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-subtype-row:last-child { border-bottom: none; }
.jj-subtype-index { width: 20px; font-size: 12px; font-weight: 600; color: rgb(107, 114, 128); }
.jj-subtype-label { flex: 1 1 0%; font-size: 13px; color: rgb(209, 213, 219); min-width: 80px; }
.jj-difficulty-toggle { display: flex; background: rgb(31, 41, 55); border-radius: 6px; overflow: hidden; }
.jj-diff-btn { padding: 4px 10px; font-size: 11px; font-weight: 500; color: rgb(156, 163, 175); background: transparent; border: none; cursor: pointer; transition: 0.15s; }
.jj-diff-btn:hover { background: rgb(55, 65, 81); }
.jj-diff-btn.active { background: rgb(59, 130, 246); color: rgb(255, 255, 255); }
.jj-choice-lang-toggle { display: flex; background: rgb(31, 41, 55); border-radius: 6px; overflow: hidden; }
.jj-lang-btn { padding: 4px 8px; font-size: 11px; font-weight: 500; color: rgb(156, 163, 175); background: transparent; border: none; cursor: pointer; transition: 0.15s; }
.jj-lang-btn:hover { background: rgb(55, 65, 81); }
.jj-lang-btn.active { background: rgb(16, 185, 129); color: rgb(255, 255, 255); }
.jj-split-count-toggle { display: flex; background: rgb(31, 41, 55); border-radius: 6px; overflow: hidden; }
.jj-split-btn { padding: 4px 8px; font-size: 11px; font-weight: 500; color: rgb(156, 163, 175); background: transparent; border: none; cursor: pointer; transition: 0.15s; }
.jj-split-btn:hover { background: rgb(55, 65, 81); }
.jj-split-btn.active { background: rgb(139, 92, 246); color: rgb(255, 255, 255); }
.jj-count-control { display: flex; align-items: center; gap: 2px; background: rgb(31, 41, 55); border-radius: 6px; overflow: hidden; }
.jj-count-btn { width: 28px; height: 28px; font-size: 14px; font-weight: 600; color: rgb(156, 163, 175); background: transparent; border: none; cursor: pointer; transition: 0.15s; }
.jj-count-btn:hover:not(:disabled) { background: rgb(55, 65, 81); color: rgb(255, 255, 255); }
.jj-count-btn:disabled { color: rgb(75, 85, 99); cursor: not-allowed; }
.jj-count-value { width: 28px; text-align: center; font-size: 13px; font-weight: 600; color: rgb(229, 231, 235); }
.jj-diff-counts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.jj-diff-count-item { display: flex; align-items: center; gap: 2px; background: rgb(31, 41, 55); border-radius: 4px; padding: 2px; }
.jj-diff-label { font-size: 11px; font-weight: 600; color: rgb(156, 163, 175); padding: 0px 4px; min-width: 16px; text-align: center; }
.jj-mini-btn { width: 20px; height: 20px; font-size: 12px; font-weight: 600; color: rgb(156, 163, 175); background: transparent; border: none; cursor: pointer; transition: 0.15s; border-radius: 2px; }
.jj-mini-btn:hover:not(:disabled) { background: rgb(55, 65, 81); color: rgb(255, 255, 255); }
.jj-mini-btn:disabled { color: rgb(75, 85, 99); cursor: not-allowed; }
.jj-mini-value { min-width: 16px; text-align: center; font-size: 12px; font-weight: 600; color: rgb(229, 231, 235); }
.jj-row-total { font-size: 11px; font-weight: 600; color: rgb(96, 165, 250); background: rgba(96, 165, 250, 0.15); padding: 2px 6px; border-radius: 4px; margin-left: 4px; min-width: 20px; text-align: center; }
.jj-row-total.empty { color: rgb(75, 85, 99); background: transparent; }
.jj-mark-btn { display: flex; align-items: center; gap: 3px; padding: 2px 6px; font-size: 10px; font-weight: 500; color: var(--mark-color, #6B7280); background: var(--mark-bg, #F3F4F6); border: 1px solid var(--mark-color, #D1D5DB); border-radius: 4px; cursor: pointer; margin-left: 6px; transition: 0.15s; }
.jj-mark-btn:hover { filter: brightness(0.95); }
.jj-mark-btn.active { color: rgb(255, 255, 255); background: var(--mark-color, #6B7280); border-color: var(--mark-color, #6B7280); }
.jj-mark-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0px 3px; font-size: 9px; font-weight: 600; color: rgb(255, 255, 255); background: var(--mark-color, #6B7280); border-radius: 7px; }
.jj-mark-btn.active .jj-mark-badge { background: rgba(255, 255, 255, 0.3); }
.jj-mark-reset-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0px; color: rgb(107, 114, 128); background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: 0.15s; margin-left: 2px; }
.jj-mark-reset-btn:hover { color: rgb(248, 113, 113); background: rgba(248, 113, 113, 0.1); border-color: rgb(248, 113, 113); }
.jj-subtype-row.marking-active { background: rgba(96, 165, 250, 0.1); border-radius: 4px; }
.jj-passage-full-content.marking-mode { cursor: text; border: 2px dashed var(--active-mark-color, #6B7280); border-radius: 8px; padding: 12px; background: linear-gradient(to bottom,var(--active-mark-bg, #F3F4F6) 0%,transparent 20%); }
.jj-marking-indicator { display: flex; align-items: center; gap: 8px; padding: 6px 12px; margin-bottom: 12px; font-size: 12px; font-weight: 500; border: 1px solid; border-radius: 6px; }
.jj-marking-hint { font-size: 11px; opacity: 0.7; margin-left: auto; }
.jj-marking-close { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0px; background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: 0.7; transition: opacity 0.15s; }
.jj-marking-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
.jj-passage-mark { position: relative; padding: 1px 2px; border-radius: 3px; cursor: pointer; transition: filter 0.15s; }
.jj-passage-mark:hover { filter: brightness(0.92); }
.jj-mark-tag { position: absolute; top: -9px; right: -4px; padding: 0px 3px; font-size: 8px; font-weight: 600; color: rgb(255, 255, 255); border-radius: 3px; white-space: nowrap; pointer-events: none; }
.jj-mark-tag::after { content: attr(data-label); }
.jj-mark-tag[data-is-answer="true"]::after { content: attr(data-label) " ★"; }
.jj-passage-mark.jj-mark-answer { outline: rgb(239, 68, 68) solid 2px; outline-offset: 1px; border-radius: 2px; }
.jj-answer-star { color: rgb(239, 68, 68); font-size: 10px; position: relative; top: -4px; margin-right: -1px; font-weight: 700; }
.jj-passage-mark.jj-mark-implication { text-decoration: underline 2px; text-underline-offset: 2px; }
.jj-passage-mark.jj-mark-overlap { padding: 0px 2px; margin: 0px 1px; }
.jj-type-summary { padding: 10px 16px; background: rgb(17, 25, 40); border-top: 1px solid rgb(55, 65, 81); font-size: 12px; color: rgb(96, 165, 250); }
.jj-summary-tabs { display: flex; gap: 4px; padding: 8px 12px; background: rgb(17, 25, 40); border-bottom: 1px solid rgb(55, 65, 81); overflow-x: auto; }
.jj-summary-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: rgb(156, 163, 175); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 6px; cursor: pointer; white-space: nowrap; transition: 0.15s; }
.jj-summary-tab:hover { border-color: rgb(107, 114, 128); }
.jj-summary-tab.active { color: rgb(255, 255, 255); background: rgb(59, 130, 246); border-color: rgb(59, 130, 246); }
.jj-summary-tab-label { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0px; }
.jj-summary-tab-remove { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: rgb(107, 114, 128); cursor: pointer; padding: 2px; border-radius: 3px; opacity: 0.5; transition: 0.15s; }
.jj-summary-tab-remove:hover { opacity: 1; color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.15); }
.jj-summary-tab.active .jj-summary-tab-remove { color: rgba(255, 255, 255, 0.6); }
.jj-summary-tab.active .jj-summary-tab-remove:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.2); }
.jj-summary-tab-badge { font-size: 10px; padding: 2px 6px; background: rgba(255, 255, 255, 0.2); border-radius: 8px; }
.jj-cat-marking-hint { font-size: 10px; color: rgb(156, 163, 175); padding: 2px 6px; background: rgb(55, 65, 81); border-radius: 3px; }
.jj-summary-content { display: flex; flex-direction: column; gap: 12px; }
.jj-passage-info-line { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgb(55, 65, 81); border-radius: 6px; font-size: 13px; }
.jj-passage-info-source { color: rgb(229, 231, 235); font-weight: 500; }
.jj-passage-info-divider { color: rgb(107, 114, 128); }
.jj-passage-info-count { color: rgb(156, 163, 175); }
.jj-passage-full-content { padding: 16px; background: rgb(31, 41, 55); border: 1px solid rgb(55, 65, 81); border-radius: 6px; font-size: 13px; line-height: 1.8; color: rgb(209, 213, 219); min-height: 180px; max-height: 400px; overflow-y: auto; text-align: justify; }
.jj-sentences-container, .jj-sentence { display: inline; }
.jj-sentence-insertion { display: inline; padding: 2px 0px; margin: 0px 2px; border-radius: 4px; }
.jj-insertion-bracket { font-size: 18px; font-weight: 700; vertical-align: middle; margin: 0px 2px; }
.jj-insertion-tag, .jj-split-tag { display: inline-block; font-size: 8px; font-weight: 600; color: rgb(255, 255, 255); padding: 0px 3px; border-radius: 3px; vertical-align: middle; margin-right: 2px; }
.jj-insertion-tag { position: relative; top: -1px; }
.jj-split-tag { position: relative; top: -9px; margin-right: 0px; }
.jj-split-marker { display: inline-block; font-size: 16px; font-weight: 700; cursor: pointer; padding: 2px 6px; margin: 0px 2px; border-radius: 4px; vertical-align: middle; transition: 0.15s; }
.jj-split-marker:hover { transform: scale(1.1); filter: brightness(0.95); }
.jj-summary-section { padding: 12px; background: rgb(55, 65, 81); border-radius: 8px; }
.jj-summary-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jj-summary-section-header h4 { font-size: 12px; font-weight: 600; color: rgb(156, 163, 175); margin: 0px; text-transform: uppercase; }
.jj-reset-marks-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 10px; font-weight: 500; color: rgb(156, 163, 175); background: rgb(31, 41, 55); border: 1px solid rgb(75, 85, 99); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-reset-marks-btn:hover { color: rgb(248, 113, 113); border-color: rgb(248, 113, 113); background: rgba(248, 113, 113, 0.1); }
.jj-summary-section h4 { font-size: 12px; font-weight: 600; color: rgb(156, 163, 175); margin: 0px 0px 10px; text-transform: uppercase; }
.jj-summary-info { display: flex; flex-direction: column; gap: 8px; }
.jj-summary-row { display: flex; justify-content: space-between; font-size: 13px; }
.jj-summary-label { color: rgb(156, 163, 175); }
.jj-summary-value { color: rgb(229, 231, 235); font-weight: 500; }
.jj-summary-types-flat { display: flex; flex-wrap: wrap; gap: 8px; }
.jj-summary-types { display: flex; flex-direction: column; gap: 10px; }
.jj-summary-type-group { display: flex; flex-direction: column; gap: 6px; }
.jj-summary-type-category { font-size: 13px; font-weight: 600; color: rgb(229, 231, 235); }
.jj-summary-type-items { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 24px; }
.jj-summary-type-item-wrapper { display: inline-flex; align-items: center; gap: 4px; }
.jj-summary-type-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; color: rgb(209, 213, 219); background: rgb(45, 55, 72); border-radius: 6px; transition: 0.15s; }
.jj-summary-type-item.marking-active { background: rgba(96, 165, 250, 0.3); border: 1px solid rgb(96, 165, 250); }
.jj-summary-diff { font-size: 10px; padding: 2px 6px; background: rgba(59, 130, 246, 0.2); color: rgb(96, 165, 250); border-radius: 4px; }
.jj-summary-empty { font-size: 13px; color: rgb(107, 114, 128); text-align: center; padding: 12px; }
.jj-custom-instruction { width: 100%; min-height: 100px; padding: 10px 12px; font-size: 13px; color: rgb(229, 231, 235); background: rgb(31, 41, 55); border: 1px solid rgb(75, 85, 99); border-radius: 8px; resize: vertical; }
.jj-custom-instruction::placeholder { color: rgb(107, 114, 128); }
.jj-custom-instruction:focus { outline: none; border-color: rgb(59, 130, 246); }
.jj-transform-wizard-modal .jj-wizard-footer { background: rgb(17, 25, 40); border-top: 1px solid rgb(55, 65, 81); justify-content: space-between; }
.jj-transform-wizard-modal .jj-btn-secondary { color: rgb(209, 213, 219); background: rgb(55, 65, 81); border-color: rgb(75, 85, 99); }
.jj-transform-wizard-modal .jj-btn-secondary:hover { background: rgb(75, 85, 99); }
.jj-nested-modal { z-index: 1001; }
.jj-add-passage-modal { background: rgb(31, 41, 55); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 16px 32px; width: 90vw; max-width: 600px; overflow: hidden; }
.jj-add-passage-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: rgb(17, 25, 40); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-add-passage-header h3 { font-size: 16px; font-weight: 600; color: rgb(255, 255, 255); margin: 0px; }
.jj-add-passage-header button { padding: 6px; color: rgb(156, 163, 175); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-add-passage-header button:hover { background: rgb(55, 65, 81); color: rgb(255, 255, 255); }
.jj-add-passage-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.jj-form-group { display: flex; flex-direction: column; gap: 6px; }
.jj-form-group label { font-size: 13px; font-weight: 500; color: rgb(209, 213, 219); }
.jj-form-group input, .jj-form-group textarea { padding: 10px 12px; font-size: 14px; color: rgb(229, 231, 235); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 8px; }
.jj-form-group input::placeholder, .jj-form-group textarea::placeholder { color: rgb(107, 114, 128); }
.jj-form-group input:focus, .jj-form-group textarea:focus { outline: none; border-color: rgb(59, 130, 246); }
.jj-form-group textarea { resize: vertical; min-height: 150px; font-family: inherit; line-height: 1.6; }
.jj-add-passage-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; background: rgb(17, 25, 40); border-top: 1px solid rgb(55, 65, 81); }
.jj-add-passage-modal-large { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; }
.jj-add-passage-modal-large .jj-add-passage-body { flex: 1 1 0%; overflow-y: auto; max-height: 60vh; }
.jj-add-passage-tabs { display: flex; gap: 8px; padding: 12px 20px; background: rgb(17, 25, 40); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-add-passage-tab { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: rgb(156, 163, 175); background: transparent; border: 1px solid rgb(55, 65, 81); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-add-passage-tab:hover { background: rgb(55, 65, 81); color: rgb(229, 231, 235); }
.jj-add-passage-tab.active { background: rgb(59, 130, 246); border-color: rgb(59, 130, 246); color: rgb(255, 255, 255); }
.jj-form-row { display: flex; gap: 12px; }
.jj-form-group-half { flex: 1 1 0%; }
.jj-form-group-quarter { flex: 0 0 calc(25% - 9px); }
.jj-form-group select { padding: 10px 12px; font-size: 14px; color: rgb(229, 231, 235); background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 8px; cursor: pointer; }
.jj-form-group select:focus { outline: none; border-color: rgb(59, 130, 246); }
.jj-school-input-wrapper { display: flex; gap: 8px; }
.jj-school-input-wrapper input { flex: 1 1 0%; }
.jj-school-input-wrapper button { padding: 10px 16px; font-size: 13px; font-weight: 500; color: rgb(229, 231, 235); background: rgb(75, 85, 99); border: 1px solid rgb(107, 114, 128); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-school-input-wrapper button:hover { background: rgb(107, 114, 128); }
.jj-school-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jj-school-tag { display: flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px; color: rgb(229, 231, 235); background: rgb(55, 65, 81); border-radius: 4px; }
.jj-school-tag button { padding: 0px; width: 16px; height: 16px; font-size: 14px; line-height: 1; color: rgb(156, 163, 175); background: transparent; border: none; cursor: pointer; }
.jj-school-tag button:hover { color: rgb(239, 68, 68); }
.jj-mydb-search { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 8px; }
.jj-mydb-search svg { color: rgb(107, 114, 128); flex-shrink: 0; }
.jj-mydb-search input { flex: 1 1 0%; padding: 0px; font-size: 14px; color: rgb(229, 231, 235); background: transparent; border: none; }
.jj-mydb-search input::placeholder { color: rgb(107, 114, 128); }
.jj-mydb-search input:focus { outline: none; }
.jj-mydb-list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.jj-mydb-loading, .jj-mydb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; color: rgb(107, 114, 128); }
.jj-mydb-item { display: flex; gap: 12px; padding: 12px; background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-mydb-item:hover { background: rgb(75, 85, 99); }
.jj-mydb-item.selected { background: rgba(59, 130, 246, 0.15); border-color: rgb(59, 130, 246); }
.jj-mydb-item-checkbox { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: rgb(31, 41, 55); border: 1px solid rgb(75, 85, 99); border-radius: 4px; flex-shrink: 0; font-size: 12px; color: rgb(59, 130, 246); }
.jj-mydb-item.selected .jj-mydb-item-checkbox { background: rgb(59, 130, 246); border-color: rgb(59, 130, 246); color: rgb(255, 255, 255); }
.jj-mydb-item-content { flex: 1 1 0%; min-width: 0px; }
.jj-mydb-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.jj-mydb-item-source { font-size: 14px; font-weight: 500; color: rgb(229, 231, 235); }
.jj-mydb-item-category { font-size: 11px; padding: 2px 6px; background: rgb(31, 41, 55); color: rgb(156, 163, 175); border-radius: 4px; }
.jj-mydb-item-preview { font-size: 12px; color: rgb(156, 163, 175); line-height: 1.4; margin: 0px 0px 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jj-mydb-item-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: rgb(107, 114, 128); }
.jj-mydb-item-meta span { display: inline-flex; align-items: center; }
.jj-selected-passages { padding: 8px 12px; background: rgba(59, 130, 246, 0.1); border-bottom: 1px solid rgb(55, 65, 81); }
.jj-selected-passages-header { font-size: 11px; color: rgb(156, 163, 175); margin-bottom: 6px; }
.jj-selected-passages-list { display: flex; flex-direction: column; gap: 4px; }
.jj-selected-passage-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgb(31, 41, 55); border: 1px solid rgb(55, 65, 81); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-selected-passage-item:hover { background: rgb(55, 65, 81); }
.jj-selected-passage-item.active { background: rgb(55, 65, 81); border-color: rgb(59, 130, 246); }
.jj-selected-passage-item .jj-check-icon { color: rgb(16, 185, 129); flex-shrink: 0; }
.jj-selected-passage-source { flex: 1 1 0%; font-size: 12px; color: rgb(229, 231, 235); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jj-selected-passage-count { font-size: 10px; padding: 2px 6px; background: rgb(59, 130, 246); color: rgb(255, 255, 255); border-radius: 10px; }
.jj-selected-passage-remove { padding: 2px; color: rgb(107, 114, 128); background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: 0; transition: 0.15s; }
.jj-selected-passage-item:hover .jj-selected-passage-remove { opacity: 1; }
.jj-selected-passage-remove:hover { color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.1); }
.jj-passage-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-filter-label { font-size: 11px; color: rgb(107, 114, 128); margin-right: 2px; }
.jj-filter-btn { padding: 4px 8px; font-size: 11px; color: rgb(156, 163, 175); background: rgba(55, 65, 81, 0.5); border: none; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-filter-btn:hover { background: rgba(75, 85, 99, 0.5); color: rgb(229, 231, 235); }
.jj-filter-btn.active { background: rgb(59, 130, 246); color: rgb(255, 255, 255); }
.jj-filter-divider { color: rgb(75, 85, 99); margin: 0px 2px; }
.jj-passage-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 8px 12px; background: rgb(55, 65, 81); border: 1px solid rgb(75, 85, 99); border-radius: 6px; }
.jj-passage-search svg { color: rgb(107, 114, 128); flex-shrink: 0; }
.jj-passage-search input { flex: 1 1 0%; padding: 0px; font-size: 13px; color: rgb(229, 231, 235); background: transparent; border: none; }
.jj-passage-search input::placeholder { color: rgb(107, 114, 128); }
.jj-passage-search input:focus { outline: none; }
.jj-mydb-passages { flex: 1 1 0%; overflow-y: auto; padding: 12px; }
.jj-mydb-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: rgb(107, 114, 128); font-size: 13px; }
.jj-mydb-empty-inline { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; color: rgb(107, 114, 128); text-align: center; }
.jj-mydb-empty-inline span { font-size: 12px; }
.jj-mydb-passage-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 6px; background: rgb(55, 65, 81); border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-passage-checkbox { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; cursor: pointer; accent-color: rgb(59, 130, 246); }
.jj-mydb-passage-body { flex: 1 1 0%; min-width: 0px; }
.jj-mydb-passage-item:hover { background: rgb(75, 85, 99); }
.jj-mydb-passage-item.selected { border-color: rgb(59, 130, 246); }
.jj-mydb-passage-item.selected:hover { background: rgb(75, 85, 99); }
.jj-mydb-passage-item.active { background: rgba(59, 130, 246, 0.15); border-color: rgb(96, 165, 250); }
.jj-mydb-passage-item.active:hover { background: rgba(59, 130, 246, 0.2); }
.jj-mydb-passage-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.jj-mydb-passage-source { font-size: 13px; font-weight: 500; color: rgb(229, 231, 235); }
.jj-mydb-passage-category { font-size: 10px; padding: 2px 6px; background: rgb(31, 41, 55); color: rgb(156, 163, 175); border-radius: 4px; }
.jj-mydb-passage-count { font-size: 10px; padding: 2px 6px; background: rgb(59, 130, 246); color: rgb(255, 255, 255); border-radius: 4px; margin-left: auto; }
.jj-mydb-passage-preview { font-size: 11px; color: rgb(156, 163, 175); line-height: 1.4; margin: 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jj-classnotes-card { padding: 4px 0px 16px; display: flex; flex-direction: column; flex: 1 1 0%; gap: 8px; }
.jj-classnotes-title-bar { font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; color: var(--theme-color, #0F4C81); margin-bottom: 4px; padding: 6px 10px; border-radius: 4px; }
.jj-classnotes-content { display: flex; gap: 12px; flex: 1 1 0%; }
.jj-classnotes-sentences { flex: 7 1 0%; border-right: 1px solid rgb(229, 231, 235); padding-right: 12px; line-height: 2.2; }
.jj-classnotes-sentence-row { font-size: calc(11px * var(--font-scale, 1)); margin-bottom: var(--sentence-gap, 6px); display: flex; gap: 6px; align-items: flex-start; }
.jj-classnotes-sentence-number { font-weight: 700; font-size: calc(12px * var(--font-scale, 1)); min-width: 18px; flex-shrink: 0; }
.jj-classnotes-sentence-text { color: rgb(31, 41, 55); }
.jj-classnotes-notes { flex: 3 1 0%; display: flex; flex-direction: column; gap: 8px; }
.jj-classnotes-note-box { border-radius: 4px; padding: 8px; }
.jj-classnotes-note-label { font-size: calc(9px * var(--font-scale, 1)); font-weight: 700; margin-bottom: 4px; padding-bottom: 2px; }
.jj-classnotes-note-content { font-size: calc(9px * var(--font-scale, 1)); color: rgb(55, 65, 81); min-height: 30px; }
.jj-classnotes-note-textarea { width: 100%; min-height: 80px; border: none; outline: none; resize: vertical; font-size: calc(9px * var(--font-scale, 1)); font-family: Pretendard, sans-serif; color: rgb(55, 65, 81); }
.jj-classnotes-korean { margin-top: 0px; min-height: 0px; padding: 12px 10px 10px; background: rgb(249, 250, 251); border-radius: 4px; border-width: 2px 1px 1px; border-style: solid; border-color: rgb(229, 231, 235); border-image: initial; break-inside: avoid; }
.jj-classnotes-korean-text { font-size: calc(9px * var(--font-scale, 1)); line-height: 1.8; color: rgb(75, 85, 99); }
.jj-classnotes-instruction { font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; color: rgb(31, 41, 55); margin-bottom: 6px; padding: 5px 10px; background: rgb(243, 244, 246); border-radius: 4px; border-left: 3px solid var(--theme-color, #0F4C81); line-height: 1.6; }
.jj-classnotes-question-block { margin-top: 4px; }
.jj-classnotes-choices { margin-top: 6px; padding: 8px 10px; background: rgb(250, 250, 250); border: 1px solid rgb(229, 231, 235); border-radius: 4px; }
.jj-classnotes-choice-item { font-size: calc(10px * var(--font-scale, 1)); line-height: 2; color: rgb(55, 65, 81); padding: 2px 0px; }
.jj-classnotes-choice-number { font-weight: 700; font-size: calc(11px * var(--font-scale, 1)); }
.placeholder\:text-gray-400::placeholder { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); }
.last\:border-b-0:last-child { border-bottom-width: 0px; }
.hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.hover\:border-slate-600\/50:hover { border-color: rgba(71, 85, 105, 0.5); }
.hover\:bg-\[\#02b351\]:hover { --tw-bg-opacity: 1; background-color: rgb(2 179 81 / var(--tw-bg-opacity, 1)); }
.hover\:bg-\[\#3bc99a\]:hover { --tw-bg-opacity: 1; background-color: rgb(59 201 154 / var(--tw-bg-opacity, 1)); }
.hover\:bg-\[\#3d5ae0\]:hover { --tw-bg-opacity: 1; background-color: rgb(61 90 224 / var(--tw-bg-opacity, 1)); }
.hover\:bg-blue-100\/60:hover { background-color: rgba(219, 234, 254, 0.6); }
.hover\:bg-blue-50:hover { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); }
.hover\:bg-blue-600:hover { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); }
.hover\:bg-blue-700:hover { --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); }
.hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); }
.hover\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); }
.hover\:bg-gray-300:hover { --tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); }
.hover\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); }
.hover\:bg-red-50:hover { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); }
.hover\:bg-red-700:hover { --tw-bg-opacity: 1; background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); }
.hover\:bg-slate-50:hover { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); }
.hover\:bg-slate-700:hover { --tw-bg-opacity: 1; background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); }
.hover\:bg-slate-700\/50:hover { background-color: rgba(51, 65, 85, 0.5); }
.hover\:bg-stone-100:hover { --tw-bg-opacity: 1; background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1)); }
.hover\:bg-white:hover { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.hover\:bg-yellow-50:hover { --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1)); }
.hover\:from-cyan-600:hover { --tw-gradient-from: #0891b2 var(--tw-gradient-from-position); --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.hover\:to-blue-700:hover { --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position); }
.hover\:text-\[\#03C75A\]:hover { --tw-text-opacity: 1; color: rgb(3 199 90 / var(--tw-text-opacity, 1)); }
.hover\:text-\[\#EA4335\]:hover { --tw-text-opacity: 1; color: rgb(234 67 53 / var(--tw-text-opacity, 1)); }
.hover\:text-\[\#FEE500\]:hover { --tw-text-opacity: 1; color: rgb(254 229 0 / var(--tw-text-opacity, 1)); }
.hover\:text-blue-600:hover { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); }
.hover\:text-blue-700:hover { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); }
.hover\:text-blue-800:hover { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity, 1)); }
.hover\:text-gray-600:hover { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); }
.hover\:text-gray-700:hover { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); }
.hover\:text-gray-900:hover { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); }
.hover\:text-red-600:hover { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); }
.hover\:text-red-700:hover { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity, 1)); }
.hover\:text-red-800:hover { --tw-text-opacity: 1; color: rgb(153 27 27 / var(--tw-text-opacity, 1)); }
.hover\:text-slate-300:hover { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity, 1)); }
.hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:shadow-md:hover { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow); }
.focus\:border-gray-600:focus { --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); }
.focus\:border-transparent:focus { border-color: transparent; }
.focus\:outline-none:focus { outline: transparent solid 2px; outline-offset: 2px; }
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000); }
.focus\:ring-\[\#4F6AF6\]:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(79 106 246 / var(--tw-ring-opacity, 1)); }
.focus\:ring-blue-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.group:hover .group-hover\:scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.peer:checked ~ .peer-checked\:scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.peer:checked ~ .peer-checked\:opacity-100 { opacity: 1; }
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:flex { display: flex; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}
@media print {
  .print\:hidden { display: none; }
  .print\:text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); }
}
.\[\&\:\:-webkit-slider-thumb\]\:h-4::-webkit-slider-thumb { height: 1rem; }
.\[\&\:\:-webkit-slider-thumb\]\:w-4::-webkit-slider-thumb { width: 1rem; }
.\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer::-webkit-slider-thumb { cursor: pointer; }
.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb { appearance: none; }
.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb { border-radius: 9999px; }
:root { --color-primary: #1E3A5F; --color-primary-hover: #152942; --color-primary-light: #E8EEF4; --color-dark: #111928; --color-dark-2: #1F2A37; --color-dark-3: #374151; --color-dark-4: #4B5563; --color-dark-5: #6B7280; --color-dark-6: #9CA3AF; --color-jj-gray: #F9FAFB; --color-gray-2: #F3F4F6; --color-gray-3: #E5E7EB; --color-gray-4: #DEE2E6; --color-gray-5: #CED4DA; --color-stroke: #DFE4EA; --color-text-primary: #637381; --color-success: #22AD5C; --color-warning: #F59E0B; --color-error: #F23030; --color-info: #1E3A5F; --shadow-1: 0px 1px 3px rgba(166, 175, 195, .4); --shadow-2: 0px 4px 10px rgba(166, 175, 195, .3); --shadow-3: 0px 10px 20px rgba(92, 115, 160, .07); --shadow-4: 0px 15px 30px rgba(92, 115, 160, .1); --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-full: 50px; }
* { box-sizing: border-box; }
body { font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Noto Color Emoji", sans-serif; color: rgb(17, 25, 40); background-color: rgb(255, 255, 255); margin: 0px; padding: 0px; }
body.pdf-mode .a4-page { box-shadow: none !important; border-radius: 0px !important; }
.jj-workbook-module { display: flex; flex: 1 1 0%; height: 100%; overflow: hidden; }
.jj-workbook-input { position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 0px; background: rgb(255, 255, 255); overflow: hidden; }
.jj-workbook-input-content { flex: 1 1 0%; display: flex; flex-direction: column; gap: 12px; overflow: visible auto; padding: 20px 12px 160px; background: rgb(248, 250, 252); scrollbar-width: none; }
.jj-workbook-input-content::-webkit-scrollbar { display: none; }
.jj-workbook-input-header { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 24px 12px; border-bottom: 1px solid rgb(229, 231, 235); background: rgb(255, 255, 255); margin: -20px -12px 8px; }
.jj-workbook-input-header h2 { font-size: 18px; font-weight: 600; color: rgb(30, 58, 95); margin: 0px 0px 8px; }
.jj-workbook-input-header p { font-size: 13px; color: rgb(107, 114, 128); margin: 0px; line-height: 1.6; }
.jj-workbook-section { padding: 12px 20px; border-bottom: 1px solid rgb(243, 244, 246); }
.jj-workbook-section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgb(55, 65, 81); margin: 12px 0px 6px; width: 100%; min-width: 0px; overflow: visible; }
.jj-workbook-select-wrapper { position: relative; }
.jj-workbook-select { width: 100%; padding: 10px 36px 10px 12px; font-size: 14px; color: rgb(55, 65, 81); background-color: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 10px center; background-repeat: no-repeat; background-size: 20px; }
.jj-workbook-select:focus { outline: none; border-color: rgb(30, 58, 95); box-shadow: rgba(30, 58, 95, 0.1) 0px 0px 0px 3px; }
.jj-workbook-select:disabled { background-color: rgb(249, 250, 251); cursor: not-allowed; }
.jj-workbook-hint { font-size: 12px; color: rgb(156, 163, 175); margin: 8px 0px 0px; }
.jj-workbook-hint.warning { color: rgb(245, 158, 11); }
.jj-workbook-units { margin-top: 16px; }
.jj-workbook-units-placeholder { min-height: 140px; margin-top: 16px; }
.jj-workbook-units-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.jj-workbook-units-header span { font-size: 13px; font-weight: 500; color: rgb(75, 85, 99); }
.jj-workbook-btn-text { font-size: 12px; color: rgb(30, 58, 95); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.jj-workbook-btn-text:hover { background: rgb(232, 238, 244); }
.jj-workbook-units-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; padding: 4px; }
.jj-workbook-unit-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); border-radius: 8px; transition: 0.15s; }
.jj-workbook-unit-item.selected { background: rgb(232, 238, 244); border-color: rgb(30, 58, 95); }
.jj-workbook-unit-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1 1 0%; }
.jj-workbook-unit-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: rgb(30, 58, 95); cursor: pointer; }
.jj-workbook-unit-label { font-size: 13px; color: rgb(55, 65, 81); }
.jj-workbook-unit-ratio { display: flex; align-items: center; gap: 8px; }
.jj-workbook-slider { width: 80px; height: 4px; accent-color: rgb(30, 58, 95); }
.jj-workbook-ratio-value { font-size: 12px; font-weight: 500; color: rgb(30, 58, 95); min-width: 32px; text-align: right; }
.jj-workbook-unit-dropdowns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.jj-workbook-unit-dropdown { display: flex; align-items: center; gap: 10px; }
.jj-workbook-dropdown-label { font-size: 12px; font-weight: 500; color: rgb(107, 114, 128); min-width: 50px; }
.jj-workbook-select.small { flex: 1 1 0%; padding: 8px 12px; font-size: 13px; }
.jj-workbook-add-unit-btn { display: flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: rgb(30, 58, 95); background: rgb(232, 238, 244); border: 1px solid rgb(30, 58, 95); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-workbook-add-unit-btn:hover { background: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-workbook-dropdown-row { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; }
.jj-workbook-dropdown-row .jj-workbook-select { flex: 1 1 0%; }
.jj-workbook-remove-unit-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0px; color: rgb(156, 163, 175); background: transparent; border: 1px solid rgb(229, 231, 235); border-radius: 6px; cursor: pointer; transition: 0.15s; flex-shrink: 0; }
.jj-workbook-remove-unit-btn:hover { color: rgb(239, 68, 68); border-color: rgb(239, 68, 68); background: rgb(254, 242, 242); }
.jj-workbook-ratio-bar-container { margin-top: 20px; margin-bottom: 16px; }
.jj-ratio-bar-wrapper { margin-top: 10px; user-select: none; }
.jj-ratio-bar { position: relative; height: 40px; background: linear-gradient(rgb(243, 244, 246), rgb(229, 231, 235)); border-radius: 12px; overflow: visible; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px inset; }
.jj-ratio-bar:not(.dragging) .jj-ratio-segment { transition: left 0.15s ease-out, width 0.15s ease-out; }
.jj-ratio-bar:not(.dragging) .jj-ratio-handle { transition: left 0.15s ease-out, transform 0.15s, box-shadow 0.15s; }
.jj-ratio-segment { position: absolute; top: 3px; height: calc(100% - 6px); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 8px; }
.jj-ratio-segment-label { font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px; white-space: nowrap; letter-spacing: 0.5px; }
.jj-ratio-handle { position: absolute; top: 50%; width: 20px; height: 48px; background: linear-gradient(rgb(255, 255, 255), rgb(249, 250, 251)); border: 2px solid rgb(30, 58, 95); border-radius: 10px; cursor: ew-resize; transform: translate(-50%, -50%); z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px; }
.jj-ratio-handle:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: rgba(0, 0, 0, 0.28) 0px 4px 14px; border-color: rgb(15, 23, 42); }
.jj-ratio-handle.dragging { transform: translate(-50%, -50%) scale(1.12); box-shadow: rgba(30, 58, 95, 0.35) 0px 6px 20px; border-color: rgb(30, 58, 95); background: linear-gradient(rgb(30, 58, 95), rgb(45, 74, 111)); }
.jj-ratio-handle.dragging .jj-ratio-handle-grip { background: repeating-linear-gradient(rgba(255, 255, 255, 0.8) 0px, rgba(255, 255, 255, 0.8) 2px, transparent 2px, transparent 5px); }
.jj-ratio-handle-grip { width: 6px; height: 20px; background: repeating-linear-gradient(rgb(156, 163, 175) 0px, rgb(156, 163, 175) 2px, transparent 2px, transparent 5px); border-radius: 2px; }
.jj-ratio-labels { display: flex; margin-top: 10px; padding: 0px 3px; }
.jj-ratio-label { display: flex; justify-content: center; min-width: 0px; }
.jj-ratio-bar:not(.dragging) + .jj-ratio-labels .jj-ratio-label { transition: flex 0.15s ease-out; }
.jj-ratio-unit-name { font-size: 12px; font-weight: 600; color: rgb(75, 85, 99); }
.jj-workbook-presets { display: flex; gap: 8px; margin-bottom: 16px; }
.jj-workbook-preset-btn { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-workbook-preset-btn:hover { background: rgb(232, 238, 244); border-color: rgb(30, 58, 95); }
.jj-workbook-preset-btn.active { background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-workbook-preset-btn.active .jj-workbook-preset-name { color: rgb(255, 255, 255); }
.jj-workbook-preset-btn.active .jj-workbook-preset-desc { color: rgba(255, 255, 255, 0.8); }
.jj-workbook-preset-title { display: flex; align-items: center; gap: 4px; }
.jj-workbook-preset-icon { font-size: 16px; }
.jj-workbook-preset-name { font-size: 13px; font-weight: 600; color: rgb(55, 65, 81); }
.jj-workbook-preset-desc { font-size: 11px; color: rgb(156, 163, 175); }
.jj-workbook-divider { height: 1px; background: rgb(229, 231, 235); margin: 8px 0px; }
.jj-workbook-categories { display: flex; flex-direction: column; gap: 8px; }
.jj-workbook-category { border: 1px solid rgb(229, 231, 235); border-radius: 8px; overflow: hidden; background: rgb(255, 255, 255); }
.jj-workbook-category-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; background: rgb(255, 255, 255); border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(229, 231, 235); cursor: pointer; transition: background 0.15s; }
.jj-workbook-category-header:hover { background: rgb(249, 250, 251); }
.jj-workbook-category-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgb(55, 65, 81); }
.jj-workbook-category-icon { font-size: 14px; }
.jj-workbook-category-subtotal { font-size: 12px; color: rgb(107, 114, 128); margin-right: 8px; }
.jj-workbook-category-content { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.jj-workbook-question-type { display: flex; align-items: center; justify-content: space-between; padding: 6px 0px; }
.jj-workbook-question-label { font-size: 13px; color: rgb(75, 85, 99); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jj-workbook-alphabet-label { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-radius: 4px; flex-shrink: 0; }
.jj-workbook-hint-toggle { padding: 2px 6px; font-size: 10px; font-weight: 500; border-radius: 4px; border: 1px solid rgb(229, 231, 235); cursor: pointer; transition: 0.15s; flex-shrink: 0; margin-left: 4px; }
.jj-workbook-hint-toggle.on { background: rgb(232, 134, 58); color: rgb(255, 255, 255); border-color: rgb(232, 134, 58); }
.jj-workbook-hint-toggle.off { background: rgb(243, 244, 246); color: rgb(107, 114, 128); border-color: rgb(209, 213, 219); }
.jj-workbook-hint-toggle:hover { opacity: 0.85; }
.jj-workbook-question-count { display: flex; align-items: center; gap: 4px; }
.jj-workbook-count-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: rgb(107, 114, 128); background: rgb(243, 244, 246); border: 1px solid rgb(229, 231, 235); border-radius: 4px; cursor: pointer; transition: 0.15s; }
.jj-workbook-count-btn:hover { background: rgb(229, 231, 235); color: rgb(55, 65, 81); }
.jj-workbook-count-input { width: 40px; height: 24px; text-align: center; font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); border: 1px solid rgb(229, 231, 235); border-radius: 4px; }
.jj-workbook-count-input:focus { outline: none; border-color: rgb(30, 58, 95); }
.jj-workbook-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 0px 0px; margin-top: 8px; border-top: 1px solid rgb(229, 231, 235); }
.jj-workbook-total-label { font-size: 14px; font-weight: 600; color: rgb(30, 58, 95); }
.jj-workbook-config-actions { display: flex; gap: 4px; align-items: center; }
.jj-workbook-config-actions [data-tooltip]::after { left: auto; right: 0px; transform: none; z-index: 99999; }
.jj-workbook-btn-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgb(229, 231, 235); border-radius: 6px; background: rgb(255, 255, 255); color: rgb(107, 114, 128); cursor: pointer; transition: 0.15s; position: relative; }
.jj-workbook-btn-icon:hover:not(:disabled) { border-color: rgb(55, 88, 249); color: rgb(55, 88, 249); background: rgb(238, 242, 255); }
.jj-workbook-btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.jj-workbook-badge { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0px 4px; font-size: 10px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(55, 88, 249); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.jj-workbook-saved-dropdown { position: relative; }
.jj-workbook-saved-list { position: absolute; top: 100%; right: 0px; margin-top: 4px; min-width: 200px; max-height: 240px; overflow-y: auto; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; z-index: 100; }
.jj-workbook-saved-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; transition: background 0.15s; }
.jj-workbook-saved-item:hover { background: rgb(243, 244, 246); }
.jj-workbook-saved-item:not(:last-child) { border-bottom: 1px solid rgb(243, 244, 246); }
.jj-workbook-saved-name { flex: 1 1 0%; font-size: 13px; color: rgb(55, 65, 81); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-workbook-saved-count { font-size: 11px; color: rgb(156, 163, 175); }
.jj-workbook-saved-delete { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 4px; background: transparent; color: rgb(156, 163, 175); cursor: pointer; opacity: 0; transition: 0.15s; }
.jj-workbook-saved-item:hover .jj-workbook-saved-delete { opacity: 1; }
.jj-workbook-saved-delete:hover { background: rgb(254, 226, 226); color: rgb(239, 68, 68); }
.jj-workbook-ratio-total { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin-top: 8px; background: rgb(249, 250, 251); border-radius: 6px; font-size: 12px; color: rgb(107, 114, 128); }
.jj-ratio-ok { font-weight: 600; color: rgb(5, 150, 105); }
.jj-ratio-warn { font-weight: 600; color: rgb(220, 38, 38); }
.jj-ratio-hint { font-size: 11px; color: rgb(156, 163, 175); }
.jj-workbook-footer { position: absolute; bottom: 12px; left: 12px; right: 12px; padding: 12px; background: rgb(255, 255, 255); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px -2px 10px; }
.jj-workbook-generate-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; font-size: 15px; font-weight: 600; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(30, 58, 95), rgb(45, 74, 111)); border: none; border-radius: 10px; cursor: pointer; transition: 0.2s; }
.jj-workbook-generate-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgb(21, 41, 66), rgb(30, 58, 95)); transform: translateY(-1px); box-shadow: rgba(30, 58, 95, 0.3) 0px 4px 12px; }
.jj-workbook-generate-btn:disabled { background: rgb(156, 163, 175); cursor: not-allowed; }
.jj-workbook-footer-info { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.jj-workbook-shuffle-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: rgb(75, 85, 99); background: rgb(243, 244, 246); border: 1px solid rgb(229, 231, 235); border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-workbook-shuffle-btn:hover:not(:disabled) { background: rgb(229, 231, 235); color: rgb(31, 41, 55); }
.jj-workbook-shuffle-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jj-workbook-price { font-size: 12px; color: rgb(34, 173, 92); font-weight: 500; }
.jj-workbook-stats { font-size: 12px; color: rgb(107, 114, 128); }
.jj-workbook-second-round-banner { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: linear-gradient(135deg, rgb(220, 252, 231), rgb(209, 250, 229)); border: 1px solid rgb(134, 239, 172); border-radius: 8px; margin-bottom: 10px; font-size: 12px; color: rgb(22, 101, 52); font-weight: 500; }
.jj-workbook-cancel-second-round { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgb(255, 255, 255); border: 1px solid rgb(134, 239, 172); border-radius: 4px; font-size: 11px; color: rgb(22, 101, 52); cursor: pointer; transition: 0.15s; }
.jj-workbook-cancel-second-round:hover { background: rgb(254, 226, 226); border-color: rgb(254, 202, 202); color: rgb(220, 38, 38); }
.jj-workbook-preview { display: flex; flex-direction: column; flex: 1 1 0%; height: 100%; background: rgb(243, 244, 246); overflow: hidden; }
.jj-workbook-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(229, 231, 235); gap: 16px; }
.jj-workbook-user-info { display: flex; align-items: center; gap: 8px; }
.jj-workbook-user-name { font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); }
.jj-workbook-user-points { font-size: 13px; font-weight: 600; color: rgb(30, 58, 95); }
.jj-workbook-charge-btn, .jj-workbook-logout-btn { display: flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 12px; color: rgb(107, 114, 128); background: rgb(243, 244, 246); border: 1px solid rgb(229, 231, 235); border-radius: 4px; cursor: pointer; }
.jj-workbook-charge-btn:hover, .jj-workbook-logout-btn:hover { background: rgb(229, 231, 235); }
.jj-workbook-view-tabs { display: flex; gap: 4px; padding: 8px 16px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(229, 231, 235); }
.jj-workbook-view-tab { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: rgb(107, 114, 128); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: 0.15s; }
.jj-workbook-view-tab:hover { color: rgb(55, 65, 81); background: rgb(243, 244, 246); }
.jj-workbook-view-tab.active { color: rgb(30, 58, 95); background: rgb(232, 238, 244); border-color: rgb(30, 58, 95); }
.jj-workbook-preview-content { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; scrollbar-width: none; }
.jj-workbook-preview-content::-webkit-scrollbar { display: none; }
.jj-workbook-preview-empty { text-align: center; color: rgb(156, 163, 175); }
.jj-workbook-preview-empty-icon { margin-bottom: 16px; color: rgb(209, 213, 219); }
.jj-workbook-preview-empty h3 { font-size: 16px; font-weight: 600; color: rgb(107, 114, 128); margin: 0px 0px 8px; }
.jj-workbook-preview-empty p { font-size: 13px; line-height: 1.6; margin: 0px; }
.jj-workbook-preview-paper { width: 595px; min-height: 820px; background: rgb(255, 255, 255); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px; transform-origin: center top; overflow: hidden; }
.jj-workbook-paper-content { padding: 48px 40px; }
.jj-workbook-paper-title { font-size: 24px; font-weight: 700; text-align: center; margin: 0px 0px 8px; }
.jj-workbook-paper-subtitle { font-size: 14px; color: rgb(107, 114, 128); text-align: center; margin: 0px 0px 24px; }
.jj-workbook-paper-section { margin-top: 24px; }
.jj-workbook-paper-section h4 { font-size: 13px; font-weight: 600; color: rgb(55, 65, 81); margin: 0px 0px 16px; }
.jj-workbook-question-item { margin-bottom: 12px; }
.jj-workbook-question-number { font-size: 13px; font-weight: 600; color: rgb(55, 65, 81); margin-right: 8px; }
.jj-workbook-question-word { font-size: 14px; font-weight: 500; color: rgb(17, 25, 40); }
.jj-workbook-question-options { display: flex; gap: 16px; margin-top: 4px; padding-left: 24px; font-size: 12px; color: rgb(75, 85, 99); }
.jj-workbook-preview-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgb(255, 255, 255); border-top: 1px solid rgb(229, 231, 235); }
.jj-workbook-zoom-controls, .jj-workbook-page-controls { display: flex; align-items: center; gap: 8px; }
.jj-workbook-zoom-controls button, .jj-workbook-page-controls button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgb(243, 244, 246); border: 1px solid rgb(229, 231, 235); border-radius: 4px; cursor: pointer; color: rgb(107, 114, 128); }
.jj-workbook-zoom-controls button:hover:not(:disabled), .jj-workbook-page-controls button:hover:not(:disabled) { background: rgb(229, 231, 235); color: rgb(55, 65, 81); }
.jj-workbook-zoom-controls button:disabled, .jj-workbook-page-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
.jj-workbook-zoom-controls span, .jj-workbook-page-controls span { font-size: 12px; color: rgb(107, 114, 128); min-width: 48px; text-align: center; }
.jj-workbook-preview-footer .jj-workbook-stats { font-size: 12px; color: rgb(107, 114, 128); }
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%); padding: 3px 6px; background: rgb(30, 41, 59); color: rgb(255, 255, 255); font-size: 10px; font-weight: 500; white-space: nowrap; border-radius: 3px; opacity: 0; visibility: hidden; transition: opacity 0.12s, visibility 0.12s; pointer-events: none; z-index: 9999; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px; }
[data-tooltip]:hover::after { opacity: 1; visibility: visible; }
[data-tooltip-position="bottom"]::after { bottom: auto; top: calc(100% + 8px); }
.jj-history-download-actions [data-tooltip]::after, .jj-history-item-delete[data-tooltip]::after, .jj-history-item-action[data-tooltip]::after { inset: calc(100% + 4px) auto auto 50%; transform: translate(-50%); }
.jj-workbook-sheet { padding: 20px 24px; font-size: calc(11px * var(--font-scale, 1)); line-height: 1.5; }
.jj-workbook-sheet .jj-header-right-group { display: flex; align-items: center; gap: 16px; }
.jj-workbook-namefield { display: flex; align-items: center; gap: 4px; font-size: calc(11px * var(--font-scale, 1)); color: rgb(55, 65, 81); }
.jj-workbook-nameline { display: inline-block; width: 80px; border-bottom: 1px solid rgb(55, 65, 81); }
.jj-workbook-two-column { display: flex; gap: 16px; margin-top: 20px; }
.jj-workbook-column { flex: 1 1 0%; min-width: 0px; }
.jj-workbook-column-left { padding-right: 12px; }
.jj-workbook-column-right { padding-left: 12px; border-left: 1px solid rgb(229, 231, 235); }
.jj-workbook-section { margin-bottom: 14px; padding: 12px; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 10px; }
.jj-workbook-section-header { display: flex; align-items: center; gap: 10px; font-size: calc(11px * var(--font-scale, 1)); margin: 0px 0px 12px; padding-bottom: 10px; border-bottom: 1px solid rgb(229, 231, 235); }
.jj-workbook-section-start .jj-workbook-section-header { border-bottom: none; padding-bottom: 0px; margin-bottom: 6px; }
.jj-workbook-section-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 12px; font-weight: 700; color: rgb(255, 255, 255); border-radius: 8px; flex-shrink: 0; }
.jj-workbook-section-instruction { font-weight: 500; color: rgb(55, 65, 81); }
.jj-workbook-section-range { font-size: calc(10px * var(--font-scale, 1)); color: rgb(156, 163, 175); font-weight: 400; }
.jj-workbook-questions { display: flex; flex-direction: column; gap: 0px; }
.jj-workbook-question { padding: 8px 0px; border-bottom: 1px solid rgb(229, 231, 235); margin-bottom: 6px; max-width: 100%; overflow: hidden; }
.jj-workbook-question:last-child { border-bottom: none; margin-bottom: 0px; }
.jj-workbook-question.subjective { border-bottom: none; }
.jj-workbook-section-start .jj-workbook-question { border-bottom: none; margin-bottom: 0px; padding-bottom: 0px; }
.jj-workbook-question-row { display: flex; align-items: flex-start; gap: 3px; }
.jj-workbook-question-number { font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; color: var(--theme-color, #1E3A5F); min-width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-color: color-mix(in srgb,var(--theme-color, #1E3A5F) 12%,white); border-radius: 50%; flex-shrink: 0; }
.jj-workbook-question-content { flex: 1 1 0%; min-width: 0px; display: flex; align-items: flex-start; gap: 8px; }
.jj-workbook-question-text { font-weight: 600; font-size: calc(11px * var(--font-scale, 1)); color: rgb(17, 25, 40); line-height: 1.5; width: 90px; flex-shrink: 0; }
.jj-workbook-options { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 1px 12px; flex: 1 1 0%; min-width: 0px; }
.jj-workbook-options.single-col { grid-template-columns: minmax(0px, 1fr); }
.jj-workbook-question-content:has(.jj-workbook-options.single-col) { display: flex; align-items: flex-start; }
.jj-workbook-question-content:has(.jj-workbook-options.single-col) .jj-workbook-question-text { min-width: 100px; flex-shrink: 0; margin-right: 8px; }
.jj-workbook-question-content:has(.jj-workbook-options.single-col) .jj-workbook-options { display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0px; }
.jj-workbook-question-content:has(.jj-workbook-options.single-col) .jj-workbook-options .jj-workbook-option { display: block; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.jj-workbook-question-content.example-layout, .jj-workbook-question-content.definition-layout { padding-right: 12px; padding-bottom: 8px; display: block !important; }
.jj-workbook-question-content.definition-layout .jj-workbook-question-text { display: block; margin-bottom: 6px; width: auto !important; }
.jj-workbook-question-content.definition-layout .jj-workbook-options { display: flex; flex-direction: column; gap: 2px; }
.jj-workbook-question-content.definition-layout .jj-workbook-option { display: block; padding-left: 1.2em; text-indent: -1.2em; }
.jj-workbook-question-content.definition-to-word-layout { padding-right: 12px; padding-bottom: 8px; display: block !important; }
.jj-workbook-question-content.definition-to-word-layout .jj-workbook-question-text { display: block; margin-bottom: 6px; width: 100% !important; }
.jj-workbook-question-content.definition-to-word-layout .jj-workbook-options { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.jj-workbook-question-content.synonym-to-word-layout { padding-right: 12px; padding-bottom: 8px; display: block !important; }
.jj-workbook-question-content.synonym-to-word-layout .jj-workbook-question-text { display: block; margin-bottom: 6px; font-weight: 600; width: 100% !important; }
.jj-workbook-question-content.synonym-to-word-layout .jj-workbook-options { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.jj-workbook-example-text { font-weight: 600; font-size: calc(11px * var(--font-scale, 1)); color: rgb(17, 25, 40); line-height: 1.5; margin-bottom: 4px; text-align: justify; }
.jj-workbook-example-translation { font-weight: 400; font-size: calc(10px * var(--font-scale, 1)); color: rgb(107, 114, 128); line-height: 1.4; margin-bottom: 6px; text-align: justify; }
.jj-workbook-question-content.example-layout .jj-workbook-options { margin-top: 6px; }
.jj-workbook-option { display: flex; align-items: flex-start; gap: 4px; color: rgb(0, 0, 0); font-size: calc(11px * var(--font-scale, 1)); line-height: 1.6; min-width: 0px; }
.jj-workbook-option.correct { font-weight: 600; }
.jj-workbook-option-num { flex-shrink: 0; font-size: 1.15em; font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.jj-workbook-option-text { flex: 1 1 0%; word-break: break-word; overflow-wrap: break-word; }
.jj-workbook-option-meaning { font-size: 0.85em; color: rgb(107, 114, 128); line-height: 1.4; margin-top: 1px; text-indent: 0px; padding-left: 0px; }
.jj-workbook-option-meaning-block { font-size: 0.85em; color: rgb(107, 114, 128); line-height: 1.4; margin-top: 2px; }
.jj-workbook-question-content:has(.jj-workbook-options.answer-vertical) { display: block !important; }
.jj-workbook-question-content:has(.jj-workbook-options.answer-vertical) .jj-workbook-question-text { display: block; margin-bottom: 6px; width: auto !important; }
.jj-workbook-options.answer-vertical { grid-template-columns: 1fr 1fr; gap: 6px 12px; display: grid !important; }
.jj-workbook-options.answer-vertical .jj-workbook-option { display: block; width: 100%; }
.jj-workbook-options-multi { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; flex: 1 1 0%; }
.jj-workbook-answer-note { width: 100%; margin-top: 4px; font-size: calc(10px * var(--font-scale, 1)); font-weight: 600; }
.jj-workbook-subjective { flex: 1 1 0%; }
.jj-workbook-blank { display: inline-block; min-width: 120px; border-bottom: 1px solid rgb(156, 163, 175); color: transparent; }
.jj-workbook-hint-blanks { display: block; margin-top: 4px; font-size: calc(11px * var(--font-scale, 1)); color: rgb(55, 65, 81); line-height: 1.8; }
.jj-workbook-answer { font-weight: 600; font-size: calc(11px * var(--font-scale, 1)); }
.jj-workbook-matching { margin: 8px 0px; }
.jj-workbook-matching-grid { display: grid; grid-template-columns: 1fr 8px 1fr; gap: 0px; width: 100%; position: relative; }
.jj-workbook-matching .jj-workbook-question-content, .jj-workbook-matching-center { display: block; }
.jj-workbook-matching-lines { position: relative; width: 100%; height: 100%; }
.jj-workbook-matching-lines svg { width: 100%; height: 100%; }
.jj-workbook-matching-left, .jj-workbook-matching-right { display: flex; flex-direction: column; justify-content: space-between; }
.jj-workbook-matching-item { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 6px; padding: 3px 0px; font-size: calc(11px * var(--font-scale, 1)); line-height: 1.4; }
.jj-workbook-matching-item > span:last-child { word-break: break-word; flex: 1 1 0%; }
.jj-workbook-matching-left .jj-workbook-matching-item > span:not(.jj-workbook-matching-label) { font-weight: 700; }
.jj-workbook-matching-label { font-weight: 600; color: rgb(107, 114, 128); }
.jj-workbook-matching-right .jj-workbook-matching-label { width: 5px; height: 5px; min-width: 5px; background-color: var(--theme-color, #1E3A5F); border-radius: 50%; font-size: 0px; color: transparent; margin-right: 6px; }
.jj-workbook-matching-answer { margin-left: auto; font-weight: 600; font-size: calc(10px * var(--font-scale, 1)); }
.jj-workbook-matching-answer-list { display: flex; flex-direction: column; gap: 4px; }
.jj-workbook-matching-answer-item { display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--font-scale, 1)); line-height: 1.4; }
.jj-force-rebuild { display: none; }
.jj-save-status { position: absolute; top: 8px; right: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; z-index: 100; transition: 0.2s; }
.jj-save-status--saving { background: rgb(254, 243, 199); color: rgb(217, 119, 6); }
.jj-save-status--saved { background: rgb(209, 250, 229); color: rgb(5, 150, 105); }
.jj-save-status--error { background: rgb(254, 226, 226); color: rgb(220, 38, 38); }
.jj-workbook-section-info-badge { margin-left: auto; font-size: 11px; font-weight: 500; color: rgb(107, 114, 128); background: rgb(243, 244, 246); padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.jj-workbook-vocab-chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.jj-workbook-vocab-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, rgb(232, 238, 244), rgb(241, 245, 249)); border: 1px solid rgb(30, 58, 95); border-radius: 10px; transition: 0.15s; }
.jj-workbook-vocab-chip:hover { background: linear-gradient(135deg, rgb(220, 230, 239), rgb(232, 238, 244)); }
.jj-workbook-vocab-chip-index { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 12px; font-weight: 700; color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-radius: 50%; flex-shrink: 0; }
.jj-workbook-vocab-chip-label { font-size: 11px; color: rgb(107, 114, 128); flex-shrink: 0; }
.jj-workbook-vocab-chip-title { font-size: 13px; font-weight: 600; color: rgb(30, 58, 95); flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-workbook-vocab-chip-count { font-size: 12px; color: rgb(107, 114, 128); flex-shrink: 0; }
.jj-workbook-vocab-chip-remove { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; color: rgb(156, 163, 175); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; flex-shrink: 0; }
.jj-workbook-vocab-chip-remove:hover { color: rgb(239, 68, 68); background: rgb(254, 226, 226); }
.jj-workbook-vocab-add-wrapper { position: relative; }
.jj-workbook-vocab-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 500; color: rgb(30, 58, 95); background: rgb(255, 255, 255); border: 2px dashed rgb(203, 213, 225); border-radius: 10px; cursor: pointer; transition: 0.15s; }
.jj-workbook-vocab-add-btn:hover:not(:disabled) { border-color: rgb(30, 58, 95); background: rgb(248, 250, 252); }
.jj-workbook-vocab-add-btn:disabled { color: rgb(156, 163, 175); border-color: rgb(229, 231, 235); cursor: not-allowed; }
.jj-workbook-vocab-dropdown { position: absolute; top: calc(100% + 4px); left: 0px; right: 0px; max-height: 280px; overflow-y: auto; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px; z-index: 100; }
.jj-workbook-vocab-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; background: transparent; border: none; cursor: pointer; transition: background 0.15s; text-align: left; }
.jj-workbook-vocab-dropdown-item:hover { background: rgb(243, 244, 246); }
.jj-workbook-vocab-dropdown-item:not(:last-child) { border-bottom: 1px solid rgb(243, 244, 246); }
.jj-vocab-dropdown-label { font-size: 11px; color: rgb(107, 114, 128); flex-shrink: 0; }
.jj-vocab-dropdown-title { font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-vocab-dropdown-count { font-size: 12px; color: rgb(156, 163, 175); flex-shrink: 0; }
.jj-workbook-multi-vocab-info { margin-top: 16px; padding: 12px; background: linear-gradient(135deg, rgb(224, 242, 254), rgb(240, 249, 255)); border: 1px solid rgb(125, 211, 252); border-radius: 10px; }
.jj-workbook-hint.info { color: rgb(3, 105, 161); font-weight: 500; margin: 0px 0px 4px; }
.jj-workbook-range-chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.jj-workbook-range-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, rgb(232, 238, 244), rgb(241, 245, 249)); border: 1px solid rgb(30, 58, 95); border-radius: 10px; transition: 0.15s; }
.jj-workbook-range-chip:hover { background: linear-gradient(135deg, rgb(220, 230, 239), rgb(232, 238, 244)); }
.jj-workbook-range-chip-index { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 12px; font-weight: 700; color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-radius: 50%; flex-shrink: 0; }
.jj-workbook-range-chip-title { font-size: 13px; font-weight: 500; color: rgb(30, 58, 95); flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-workbook-range-chip-remove { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; color: rgb(156, 163, 175); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: 0.15s; flex-shrink: 0; }
.jj-workbook-range-chip-remove:hover { color: rgb(239, 68, 68); background: rgb(254, 226, 226); }
.jj-workbook-range-chip-ratio { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; background: rgb(255, 255, 255); border: 1px solid rgb(30, 58, 95); border-radius: 6px; font-size: 12px; font-weight: 600; color: rgb(30, 58, 95); flex-shrink: 0; }
.jj-workbook-range-chip-ratio input { width: 36px; padding: 0px; margin: 0px; font: inherit; color: inherit; background: transparent; border: none; outline: none; text-align: right; }
.jj-workbook-range-chip-ratio input::-webkit-outer-spin-button, .jj-workbook-range-chip-ratio input::-webkit-inner-spin-button { appearance: none; margin: 0px; }
.jj-workbook-range-chip-ratio input:focus { background: rgb(241, 245, 249); border-radius: 3px; }
.jj-workbook-range-add-wrapper { position: relative; }
.jj-workbook-range-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 500; color: rgb(30, 58, 95); background: rgb(255, 255, 255); border: 2px dashed rgb(203, 213, 225); border-radius: 10px; cursor: pointer; transition: 0.15s; }
.jj-workbook-range-add-btn:hover:not(:disabled) { border-color: rgb(30, 58, 95); background: rgb(248, 250, 252); }
.jj-workbook-range-add-btn:disabled { color: rgb(156, 163, 175); border-color: rgb(229, 231, 235); cursor: not-allowed; }
.jj-workbook-range-dropdown { position: absolute; top: calc(100% + 4px); left: 0px; right: 0px; max-height: 320px; overflow-y: auto; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px; z-index: 100; }
.jj-workbook-range-dropdown-back { display: flex; align-items: center; gap: 4px; width: 100%; padding: 10px 14px; font-size: 13px; font-weight: 500; color: rgb(30, 58, 95); background: rgb(248, 250, 252); border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(229, 231, 235); cursor: pointer; text-align: left; }
.jj-workbook-range-dropdown-back:hover { background: rgb(241, 245, 249); }
.jj-workbook-range-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; background: transparent; border: none; cursor: pointer; transition: background 0.15s; text-align: left; }
.jj-workbook-range-dropdown-item:hover:not(.disabled) { background: rgb(243, 244, 246); }
.jj-workbook-range-dropdown-item.disabled { opacity: 0.5; cursor: not-allowed; }
.jj-workbook-range-dropdown-item:not(:last-child) { border-bottom: 1px solid rgb(243, 244, 246); }
.jj-range-dropdown-label { font-size: 11px; color: rgb(107, 114, 128); flex-shrink: 0; }
.jj-range-dropdown-title { font-size: 13px; font-weight: 500; color: rgb(55, 65, 81); flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-range-dropdown-count { font-size: 12px; color: rgb(156, 163, 175); flex-shrink: 0; }
.jj-range-dropdown-unit { font-size: 11px; color: rgb(107, 114, 128); background-color: rgb(243, 244, 246); padding: 2px 8px; border-radius: 4px; margin-left: 4px; flex-shrink: 0; }
.jj-range-dropdown-arrow { color: rgb(156, 163, 175); flex-shrink: 0; }
.jj-gapfill-input { display: flex; flex-direction: column; gap: 16px; padding: 20px; height: 100%; overflow-y: auto; }
.jj-gapfill-section { display: flex; flex-direction: column; gap: 8px; }
.jj-gapfill-row { display: flex; gap: 16px; }
.jj-gapfill-half { flex: 1 1 0%; }
.jj-gapfill-label { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: rgb(30, 58, 95); }
.jj-gapfill-required { color: rgb(220, 38, 38); }
.jj-gapfill-label-row { display: flex; justify-content: space-between; align-items: center; }
.jj-gapfill-char-count { font-size: 12px; color: rgb(156, 163, 175); }
.jj-gapfill-text-input { padding: 10px 12px; border: 1px solid rgb(223, 228, 234); border-radius: 8px; font-size: 14px; color: rgb(30, 58, 95); background: rgb(255, 255, 255); transition: border-color 0.2s, box-shadow 0.2s; }
.jj-gapfill-text-input:focus { outline: none; border-color: rgb(30, 58, 95); box-shadow: rgba(30, 58, 95, 0.1) 0px 0px 0px 3px; }
.jj-gapfill-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.jj-gapfill-radio { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid rgb(226, 232, 240); border-radius: 6px; font-size: 13px; color: rgb(100, 116, 139); background: rgb(241, 245, 249); cursor: pointer; transition: 0.15s; }
.jj-gapfill-radio:hover { background-color: rgb(226, 232, 240); color: rgb(71, 85, 105); }
.jj-gapfill-radio.active { background-color: rgb(30, 58, 95); border-color: rgb(30, 58, 95); color: rgb(255, 255, 255); }
.jj-gapfill-radio input { display: none; }
.jj-gapfill-toggle-group { display: flex; gap: 8px; }
.jj-gapfill-toggle-btn { flex: 1 1 0%; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; font-size: 12px; font-weight: 500; color: rgb(100, 116, 139); background: rgb(241, 245, 249); border: 1px solid rgb(226, 232, 240); border-radius: 8px; cursor: pointer; transition: 0.15s; }
.jj-gapfill-toggle-btn:hover { background: rgb(226, 232, 240); color: rgb(71, 85, 105); }
.jj-gapfill-toggle-btn.active { color: rgb(255, 255, 255); background: rgb(30, 58, 95); border-color: rgb(30, 58, 95); }
.jj-gapfill-textarea-section { flex: 1 1 0%; display: flex; flex-direction: column; min-height: 200px; }
.jj-gapfill-textarea { flex: 1 1 0%; min-height: 180px; padding: 12px; border: 1px solid rgb(223, 228, 234); border-radius: 8px; font-size: 14px; line-height: 1.6; color: rgb(30, 58, 95); background: rgb(255, 255, 255); resize: none; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.jj-gapfill-textarea:focus { outline: none; border-color: rgb(30, 58, 95); box-shadow: rgba(30, 58, 95, 0.1) 0px 0px 0px 3px; }
.jj-gapfill-textarea::placeholder { color: rgb(156, 163, 175); }
.jj-gapfill-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgb(55, 65, 81); cursor: pointer; }
.jj-gapfill-checkbox input { width: 16px; height: 16px; accent-color: rgb(30, 58, 95); }
.jj-gapfill-cost { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgb(248, 250, 252); border: 1px solid rgb(226, 232, 240); border-radius: 8px; font-size: 14px; color: rgb(100, 116, 139); }
.jj-gapfill-cost strong { font-weight: 600; color: rgb(30, 58, 95); }
.jj-gapfill-cost strong.insufficient { color: rgb(220, 38, 38); }
.jj-gapfill-cost-detail { color: rgb(148, 163, 184); font-size: 13px; }
.jj-gapfill-charge-btn { margin-left: auto; padding: 6px 14px; background: rgb(30, 58, 95); color: rgb(255, 255, 255); border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.jj-gapfill-charge-btn:hover { background: rgb(21, 41, 66); }
.jj-gapfill-error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgb(254, 242, 242); border: 1px solid rgb(254, 202, 202); border-radius: 8px; color: rgb(220, 38, 38); font-size: 13px; }
.jj-gapfill-ai-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; background: rgb(255, 251, 235); border: 1px solid rgb(252, 211, 77); border-radius: 8px; color: rgb(180, 83, 9); font-size: 12px; line-height: 1.5; }
.jj-gapfill-ai-warning svg { flex-shrink: 0; margin-top: 2px; }
.jj-gapfill-ai-warning strong { font-weight: 600; color: rgb(146, 64, 14); }
.jj-gapfill-generate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(30, 58, 95), rgb(21, 41, 66)); border: none; border-radius: 10px; cursor: pointer; transition: 0.2s; box-shadow: rgba(30, 58, 95, 0.25) 0px 2px 8px, rgba(255, 255, 255, 0.1) 0px 1px inset; }
.jj-gapfill-generate-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgb(21, 41, 66), rgb(15, 29, 46)); box-shadow: rgba(30, 58, 95, 0.35) 0px 4px 12px, rgba(255, 255, 255, 0.1) 0px 1px inset; transform: translateY(-1px); }
.jj-gapfill-generate-btn:active:not(:disabled) { transform: translateY(0px); box-shadow: rgba(30, 58, 95, 0.2) 0px 1px 4px; }
.jj-gapfill-generate-btn:disabled { background: rgb(229, 231, 235); color: rgb(156, 163, 175); box-shadow: none; cursor: not-allowed; }
.jj-gapfill-category { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 16px 0px 12px; border-left: 4px solid; background: rgb(248, 250, 252); }
.jj-gapfill-category-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.jj-gapfill-category-title { font-size: 14px; font-weight: 700; color: rgb(30, 41, 59); margin: 0px; }
.jj-gapfill-section-title { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin: 12px 0px 10px; border-bottom: 2px solid; }
.jj-gapfill-section-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 12px; font-weight: 700; }
.jj-gapfill-section-name { font-size: 13px; font-weight: 600; color: rgb(51, 65, 85); }
.jj-gapfill-section-content { padding: 8px 0px 8px 34px; color: rgb(71, 85, 105); line-height: 1.7; }
.jj-gapfill-point { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0px; margin-left: 34px; }
.jj-gapfill-bullet { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.jj-gapfill-point-content { flex: 1 1 0%; line-height: 1.6; }
.jj-gapfill-point-kor { margin-top: 4px; color: rgb(100, 116, 139); }
.jj-gapfill-example { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 6px 0px 6px 34px; background: rgb(248, 250, 252); border-radius: 8px; border-left: 3px solid rgb(226, 232, 240); }
.jj-gapfill-example-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.jj-gapfill-example-content { flex: 1 1 0%; }
.jj-gapfill-example-eng { margin: 0px; font-weight: 500; color: rgb(30, 41, 59); line-height: 1.5; }
.jj-gapfill-example-kor { margin: 4px 0px 0px; color: rgb(100, 116, 139); }
.jj-gapfill-eg-badge { display: inline-block; padding: 2px 6px; margin-right: 6px; background: rgb(226, 232, 240); border-radius: 4px; font-size: 10px; font-weight: 600; color: rgb(100, 116, 139); }
.jj-gapfill-eg-content { color: rgb(100, 116, 139); font-style: italic; }
.jj-gapfill-tip-box { margin: 12px 0px; padding: 14px 16px; background: rgb(255, 254, 245); border-radius: 10px; border: 1px solid rgb(254, 243, 199); }
.jj-gapfill-tip-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.jj-gapfill-tip-icon { font-size: 18px; }
.jj-gapfill-tip-title { font-size: 13px; font-weight: 700; color: rgb(133, 77, 14); }
.jj-gapfill-tip-content { margin: 0px; color: rgb(113, 63, 18); line-height: 1.7; }
.jj-gapfill-tip-item { padding: 6px 0px; color: rgb(113, 63, 18); line-height: 1.7; }
.jj-gapfill-tip-explanation { margin-top: 4px; color: rgb(146, 64, 14); }
.jj-gapfill-exercise-box { margin: 16px 0px; border-radius: 10px; overflow: hidden; border: 1px solid rgb(226, 232, 240); }
.jj-gapfill-exercise-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid; }
.jj-gapfill-exercise-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: rgb(255, 255, 255); font-size: 13px; }
.jj-gapfill-exercise-title { font-size: 13px; font-weight: 700; color: rgb(51, 65, 85); }
.jj-gapfill-exercise-instruction { padding: 12px 16px; background: rgb(248, 250, 252); border-bottom: 1px dashed rgb(226, 232, 240); color: rgb(30, 41, 59); font-weight: 500; line-height: 1.6; }
.jj-gapfill-exercise-items { padding: 12px 16px; background: rgb(255, 255, 255); }
.jj-gapfill-exercise-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0px; border-bottom: 1px dashed rgb(226, 232, 240); }
.jj-gapfill-exercise-item:last-child { border-bottom: none; }
.jj-gapfill-exercise-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.jj-gapfill-exercise-content { flex: 1 1 0%; }
.jj-gapfill-exercise-content p { margin: 0px; line-height: 1.6; }
.jj-gapfill-exercise-answer { margin-top: 6px; padding: 4px 8px; background: rgb(240, 253, 244); border-radius: 4px; color: rgb(22, 101, 52); font-size: 12px; font-weight: 500; }
.jj-gapfill-exercise-explanation { margin-top: 4px; color: rgb(100, 116, 139); font-size: 12px; }
.jj-gapfill-answerkey-box { margin: 16px 0px; border-radius: 10px; overflow: hidden; border: 1px solid rgb(209, 213, 219); background: rgb(250, 250, 250); }
.jj-gapfill-answerkey-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid; background: rgb(243, 244, 246); }
.jj-gapfill-answerkey-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: rgb(255, 255, 255); font-size: 13px; }
.jj-gapfill-answerkey-title { font-size: 13px; font-weight: 700; color: rgb(55, 65, 81); }
.jj-gapfill-answerkey-items { padding: 12px 16px; background: rgb(255, 255, 255); }
.jj-gapfill-answer-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0px; border-bottom: 1px dashed rgb(229, 231, 235); }
.jj-gapfill-answer-item:last-child { border-bottom: none; }
.jj-gapfill-answer-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.jj-gapfill-answer-content { flex: 1 1 0%; }
.jj-gapfill-answer-text { margin: 0px; padding: 4px 10px; background: rgb(245, 245, 245); border-radius: 6px; color: rgb(31, 41, 55); line-height: 1.6; font-weight: 500; }
.jj-gapfill-answer-explanation { margin: 6px 0px 0px; padding: 0px 10px; color: rgb(55, 65, 81); line-height: 1.6; }
.jj-gapfill-student-badge { display: inline-block; padding: 6px 14px; background: var(--badge-bg, #eef2ff); border: 1px solid var(--badge-border, #c7d2fe); border-radius: 20px; color: var(--badge-text, #4f46e5); font-size: 13px; font-weight: 600; }
.jj-gapfill-history-item { padding: 12px; border-bottom: 1px solid rgb(241, 245, 249); cursor: pointer; transition: background 0.2s; }
.jj-gapfill-history-item:hover { background: rgb(248, 250, 252); }
.jj-gapfill-history-title { font-size: 13px; font-weight: 600; color: rgb(30, 41, 59); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jj-gapfill-history-subtitle { font-size: 12px; color: rgb(100, 116, 139); }
.swb-input-container { padding: 24px; height: 100%; overflow-y: auto; background: rgb(250, 250, 250); }
.swb-input-header { margin-bottom: 24px; }
.swb-input-title { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 700; color: rgb(30, 41, 59); margin-bottom: 8px; }
.swb-input-desc { font-size: 0.875rem; color: rgb(100, 116, 139); }
.swb-input-section { margin-bottom: 20px; }
.swb-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.swb-section-header h3 { font-size: 0.875rem; font-weight: 600; color: rgb(55, 65, 81); }
.swb-section-badge { font-size: 0.625rem; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgb(219, 234, 254); color: rgb(29, 78, 216); text-transform: uppercase; }
.swb-title-input { width: 100%; padding: 12px 16px; border: 1px solid rgb(229, 231, 235); border-radius: 12px; font-size: 1rem; font-weight: 500; background: rgb(255, 255, 255); transition: 0.2s; }
.swb-title-input:focus { outline: none; border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 3px; }
.swb-passage-input { position: relative; }
.swb-textarea { width: 100%; padding: 16px; border: 1px solid rgb(229, 231, 235); border-radius: 12px; font-size: 0.875rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1.6; background: rgb(255, 255, 255); resize: vertical; transition: 0.2s; }
.swb-textarea:focus { outline: none; border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 3px; }
.swb-char-count { position: absolute; bottom: 8px; right: 12px; font-size: 0.75rem; color: rgb(156, 163, 175); }
.swb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: 0.2s; border: none; }
.swb-btn-primary { background: rgb(37, 99, 235); color: rgb(255, 255, 255); }
.swb-btn-primary:hover:not(:disabled) { background: rgb(29, 78, 216); }
.swb-btn-primary:disabled { background: rgb(147, 197, 253); cursor: not-allowed; }
.swb-btn-generate { width: 100%; padding: 16px 24px; font-size: 1rem; box-shadow: rgba(37, 99, 235, 0.3) 0px 4px 12px; }
.swb-btn-generate:hover:not(:disabled) { transform: translateY(-1px); box-shadow: rgba(37, 99, 235, 0.4) 0px 6px 16px; }
.swb-generate-section { margin-top: 24px; }
.swb-generate-info { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 0.75rem; color: rgb(107, 114, 128); }
.swb-analyzing { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.swb-analyzing-text { margin-top: 16px; font-size: 1rem; font-weight: 600; color: rgb(30, 41, 59); }
.swb-analyzing-sub { margin-top: 8px; font-size: 0.875rem; color: rgb(156, 163, 175); }
.swb-back-btn { display: flex; align-items: center; gap: 4px; padding: 8px 0px; margin-bottom: 16px; font-size: 0.875rem; font-weight: 500; color: rgb(107, 114, 128); background: none; border: none; cursor: pointer; transition: color 0.2s; }
.swb-back-btn:hover { color: rgb(37, 99, 235); }
.swb-section-toggles { display: flex; flex-direction: column; gap: 8px; }
.swb-toggle-item { display: block; }
.swb-toggle-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 1px solid rgb(229, 231, 235); border-radius: 10px; background: rgb(255, 255, 255); font-size: 0.875rem; font-weight: 500; color: rgb(75, 85, 99); cursor: pointer; transition: 0.2s; }
.swb-toggle-btn:hover { border-color: rgb(147, 197, 253); background: rgb(248, 250, 252); }
.swb-toggle-btn.active { border-color: rgb(59, 130, 246); background: rgb(239, 246, 255); color: rgb(29, 78, 216); }
.swb-preview-content { padding: 40px; background: rgb(255, 255, 255); min-height: 100%; }
.swb-preview-header { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 24px; margin-bottom: 40px; border-bottom: 4px solid rgb(30, 41, 59); }
.swb-preview-title-area { flex: 1 1 0%; }
.swb-preview-title { font-size: 2rem; font-weight: 900; color: rgb(15, 23, 42); margin: 0px; }
.swb-preview-subtitle { margin-top: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(156, 163, 175); }
.swb-preview-name-area { text-align: right; font-size: 0.75rem; font-weight: 600; color: rgb(156, 163, 175); line-height: 2; }
.swb-section { margin-bottom: 48px; position: relative; }
.swb-section-number { font-size: 1.5rem; font-weight: 900; color: rgb(226, 232, 240); margin-bottom: 8px; }
.swb-section-title { font-size: 1.125rem; font-weight: 900; color: rgb(15, 23, 42); padding-bottom: 4px; border-bottom: 2px solid rgb(15, 23, 42); display: inline-block; margin-bottom: 20px; }
.swb-topic-content { background: rgb(248, 250, 252); border-left: 4px solid rgb(15, 23, 42); padding: 20px 24px; border-radius: 0px 12px 12px 0px; font-size: 1rem; font-weight: 600; color: rgb(30, 41, 59); line-height: 1.6; }
.swb-sentences { display: flex; flex-direction: column; gap: 32px; }
.swb-sentence-item { display: flex; gap: 16px; position: relative; padding-left: 8px; border-left: 1px solid rgb(229, 231, 235); }
.swb-sentence-num { position: absolute; left: -10px; top: 0px; width: 20px; height: 20px; border-radius: 50%; background: rgb(15, 23, 42); color: rgb(255, 255, 255); font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.swb-sentence-content { flex: 1 1 0%; padding-left: 16px; }
.swb-sentence-original { font-size: 1.125rem; font-family: Georgia, "Times New Roman", serif; color: rgb(15, 23, 42); line-height: 1.6; font-weight: 500; margin: 0px 0px 12px; }
.swb-sentence-meta { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.swb-meta-label { font-size: 0.625rem; font-weight: 800; color: rgb(203, 213, 225); letter-spacing: 0.02em; min-width: 70px; padding-top: 2px; }
.swb-meta-label.grammar { color: rgb(147, 197, 253); }
.swb-sentence-translation { flex: 1 1 0%; font-size: 0.9rem; color: rgb(100, 116, 139); font-weight: 500; }
.swb-grammar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.swb-grammar-tag { font-size: 0.6875rem; font-weight: 700; color: rgb(29, 78, 216); background: rgb(239, 246, 255); padding: 2px 8px; border-radius: 6px; border: 1px solid rgb(191, 219, 254); }
.swb-vocabulary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
.swb-vocab-item { display: flex; align-items: center; padding: 10px 0px; border-bottom: 1px solid rgb(241, 245, 249); }
.swb-vocab-num { font-size: 0.625rem; font-weight: 700; color: rgb(203, 213, 225); width: 20px; flex-shrink: 0; }
.swb-vocab-word { flex: 1 1 0%; font-weight: 700; color: rgb(15, 23, 42); font-size: 0.9rem; }
.swb-vocab-meaning { font-size: 0.8rem; color: rgb(100, 116, 139); font-weight: 500; text-align: right; max-width: 55%; }
.swb-cloze-content { background: rgb(248, 250, 252); padding: 24px; border-radius: 12px; font-size: 1rem; font-family: Georgia, "Times New Roman", serif; color: rgb(15, 23, 42); line-height: 1.8; text-align: justify; }
.swb-cloze-num { font-size: 0.625rem; color: rgb(203, 213, 225); font-weight: 700; font-family: sans-serif; margin-left: 2px; }
.swb-unscramble-list { display: flex; flex-direction: column; gap: 28px; }
.swb-unscramble-item { display: flex; flex-direction: column; gap: 12px; }
.swb-unscramble-header { display: flex; align-items: flex-start; gap: 12px; }
.swb-unscramble-num { width: 20px; height: 20px; border-radius: 4px; background: rgb(15, 23, 42); color: rgb(255, 255, 255); font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.swb-unscramble-hint { font-size: 0.875rem; font-weight: 600; color: rgb(71, 85, 105); line-height: 1.4; }
.swb-unscramble-words { padding: 16px; background: rgb(255, 255, 255); border: 2px dashed rgb(226, 232, 240); border-radius: 10px; font-size: 0.9375rem; font-weight: 700; color: rgb(30, 41, 59); line-height: 1.6; }
.swb-unscramble-answer-line { height: 40px; border-bottom: 1px solid rgb(226, 232, 240); opacity: 0.5; }
.swb-preview-footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgb(241, 245, 249); text-align: center; font-size: 0.625rem; font-weight: 700; color: rgb(203, 213, 225); }
.swb-chunks-section { margin-top: 12px; }
.swb-chunks-list { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0%; }
.swb-chunk-item { display: flex; align-items: baseline; gap: 8px; padding: 4px 0px; }
.swb-chunk-en { font-size: 0.875rem; font-weight: 600; color: rgb(30, 41, 59); font-style: italic; }
.swb-chunk-ko { font-size: 0.8rem; color: rgb(100, 116, 139); }
.swb-structure-section { margin-top: 16px; background: rgb(248, 250, 252); padding: 12px; border-radius: 8px; }
.swb-meta-label.structure { color: rgb(5, 150, 105); }
.swb-structure-diagram { flex: 1 1 0%; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; line-height: 1.8; }
.swb-structure-line { display: flex; flex-wrap: wrap; gap: 4px; }
.swb-structure-part { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; }
.swb-part-text { color: rgb(30, 41, 59); }
.swb-part-role { font-size: 0.5rem; font-weight: 700; padding: 1px 3px; border-radius: 3px; vertical-align: super; }
.swb-role-S { background: rgb(254, 243, 199); color: rgb(146, 64, 14); }
.swb-role-V { background: rgb(219, 234, 254); color: rgb(30, 64, 175); }
.swb-role-O { background: rgb(220, 252, 231); color: rgb(22, 101, 52); }
.swb-role-C { background: rgb(252, 231, 243); color: rgb(157, 23, 77); }
.swb-role-SC { background: rgb(224, 231, 255); color: rgb(67, 56, 202); }
.swb-role-M { background: rgb(243, 232, 255); color: rgb(124, 58, 237); }
.swb-role-R { background: rgb(254, 215, 170); color: rgb(194, 65, 12); }
.swb-role-Conj { background: rgb(229, 231, 235); color: rgb(55, 65, 81); }
.swb-vocabulary-extended { display: flex; flex-direction: column; gap: 8px; }
.swb-vocab-extended-item { padding: 12px 16px; background: rgb(248, 250, 252); border-radius: 8px; border-left: 3px solid rgb(229, 231, 235); }
.swb-vocab-header { display: flex; align-items: center; gap: 12px; }
.swb-vocab-extra { margin-top: 6px; padding-left: 32px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.75rem; }
.swb-vocab-role { color: rgb(5, 150, 105); font-style: italic; }
.swb-vocab-contrast { color: rgb(220, 38, 38); font-weight: 500; }
.swb-cloze-extended { display: flex; flex-direction: column; gap: 20px; }
.swb-cloze-item { padding: 16px; background: rgb(248, 250, 252); border-radius: 10px; }
.swb-cloze-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.swb-cloze-num-badge { width: 22px; height: 22px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.swb-cloze-type { font-size: 0.625rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.swb-cloze-type-definition { background: rgb(219, 234, 254); color: rgb(30, 64, 175); }
.swb-cloze-type-contrast { background: rgb(254, 243, 199); color: rgb(146, 64, 14); }
.swb-cloze-type-paraphrase { background: rgb(220, 252, 231); color: rgb(22, 101, 52); }
.swb-cloze-blanked { font-size: 1rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.6; color: rgb(30, 41, 59); margin: 0px; }
.swb-cloze-hint { margin-top: 8px; font-size: 0.8rem; color: rgb(107, 114, 128); font-style: italic; }
.swb-verb-form-list { display: flex; flex-direction: column; gap: 16px; }
.swb-verb-form-item { padding: 16px; background: rgb(248, 250, 252); border-radius: 10px; }
.swb-verb-form-header { margin-bottom: 10px; }
.swb-verb-num { width: 22px; height: 22px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 0.625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.swb-verb-blanked { font-size: 1rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.6; color: rgb(30, 41, 59); margin: 0px; }
.swb-word-choice-list { display: flex; flex-direction: column; gap: 16px; }
.swb-word-choice-item { padding: 16px; background: rgb(248, 250, 252); border-radius: 10px; }
.swb-word-choice-header { margin-bottom: 10px; }
.swb-word-choice-num { width: 22px; height: 22px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 0.625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.swb-word-choice-blanked { font-size: 1rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.6; color: rgb(30, 41, 59); margin: 0px; }
.swb-pdf-layout { font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; background: rgb(255, 255, 255); color: rgb(30, 41, 59); }
.jj-preview-container .swb-pdf-layout { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 0px; }
.jj-preview-container .swb-pdf-page { box-shadow: rgba(92, 115, 160, 0.07) 0px 10px 20px; border-radius: 8px; }
.swb-pdf-page { width: 210mm; min-height: 297mm; padding: 20mm 15mm 15mm; background: rgb(255, 255, 255); box-sizing: border-box; break-inside: avoid; }
.swb-pdf-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 3px solid rgb(30, 41, 59); }
.swb-pdf-logo { height: 40px; object-fit: contain; margin-right: 16px; }
.swb-pdf-header-text { flex: 1 1 0%; }
.swb-pdf-header-text h1 { margin: 0px; font-size: 1.5rem; font-weight: 900; }
.swb-pdf-header-text p { margin: 4px 0px 0px; font-size: 0.75rem; color: rgb(100, 116, 139); }
.swb-pdf-name-area { text-align: right; font-size: 0.6875rem; font-weight: 600; color: rgb(156, 163, 175); line-height: 1.8; }
.swb-pdf-section { margin-bottom: 24px; break-inside: avoid; }
.swb-pdf-section-header { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 6px 6px 0px 0px; color: rgb(255, 255, 255); }
.swb-pdf-section-num { font-size: 0.875rem; font-weight: 900; }
.swb-pdf-section-title { font-size: 0.875rem; font-weight: 700; }
.swb-pdf-section-header-standalone { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 6px; color: rgb(255, 255, 255); margin-bottom: 8px; }
.swb-pdf-page-break { break-before: page; }
.swb-pdf-sub-block { padding: 0px 0px 0px 28px; margin-bottom: 2px; }
.swb-pdf-section-continuation { padding: 0px 16px 8px; background: rgb(248, 250, 252); border-right: 1px solid rgb(229, 231, 235); border-bottom: 1px solid rgb(229, 231, 235); border-left: 1px solid rgb(229, 231, 235); border-image: initial; border-top: none; border-radius: 0px 0px 6px 6px; }
.swb-pdf-section-continuation + .swb-pdf-section-continuation { border-radius: 0px 0px 6px 6px; }
.swb-pdf-sentence-wrap { margin-bottom: 2px; }
.swb-pdf-section-body { padding: 16px; background: rgb(248, 250, 252); border-right: 1px solid rgb(229, 231, 235); border-bottom: 1px solid rgb(229, 231, 235); border-left: 1px solid rgb(229, 231, 235); border-image: initial; border-top: none; border-radius: 0px 0px 6px 6px; }
.swb-pdf-topic { font-size: 0.82rem; line-height: 1.7; color: rgb(51, 65, 85); margin: 0px; }
.swb-pdf-sentence { padding: 6px 0px; border-bottom: none; }
.swb-pdf-sentence:last-child { border-bottom: none; }
.swb-pdf-sentence-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.swb-pdf-sentence-num { width: 20px; height: 20px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.swb-pdf-sentence-text { font-size: 0.82rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.7; color: rgb(30, 41, 59); font-weight: 500; }
.swb-pdf-chunks, .swb-pdf-translation, .swb-pdf-structure, .swb-pdf-grammar { display: flex; gap: 8px; margin-top: 3px; padding-left: 4px; }
.swb-pdf-label { font-size: 0.5625rem; font-weight: 800; color: rgb(148, 163, 184); min-width: 60px; flex-shrink: 0; }
.swb-pdf-chunks-list { display: flex; flex-direction: column; gap: 2px; }
.swb-pdf-chunk { display: flex; gap: 8px; font-size: 0.72rem; }
.swb-pdf-chunk-en { color: rgb(30, 41, 59); font-style: italic; }
.swb-pdf-chunk-ko { color: rgb(100, 116, 139); }
.swb-pdf-translation span { font-size: 0.7rem; color: rgb(100, 116, 139); }
.swb-pdf-structure-diagram { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.68rem; line-height: 1.7; }
.swb-pdf-structure-line { display: flex; flex-wrap: wrap; gap: 4px; }
.swb-pdf-structure-part { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; }
.swb-pdf-part-text { color: rgb(51, 65, 85); }
.swb-pdf-part-role { font-size: 0.5rem; font-weight: 700; padding: 1px 3px; border-radius: 2px; }
.swb-pdf-grammar-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.swb-pdf-grammar-tag { font-size: 0.625rem; font-weight: 600; padding: 2px 6px; background: rgb(239, 246, 255); color: rgb(29, 78, 216); border-radius: 4px; }
.swb-pdf-vocab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.swb-pdf-vocab-item { padding: 8px 0px; border-bottom: 1px solid rgb(241, 245, 249); }
.swb-pdf-vocab-main { display: flex; align-items: center; gap: 8px; }
.swb-pdf-vocab-num { font-size: 0.5625rem; font-weight: 700; color: rgb(148, 163, 184); min-width: 16px; }
.swb-pdf-vocab-word { font-weight: 700; font-size: 0.72rem; color: rgb(30, 41, 59); }
.swb-pdf-vocab-meaning { font-size: 0.68rem; color: rgb(100, 116, 139); margin-left: auto; text-align: right; max-width: 55%; }
.swb-pdf-vocab-extra { margin-top: 4px; padding-left: 24px; display: flex; gap: 12px; font-size: 0.6875rem; }
.swb-pdf-vocab-role { color: rgb(5, 150, 105); font-style: italic; }
.swb-pdf-vocab-contrast { color: rgb(220, 38, 38); font-weight: 500; }
.swb-pdf-cloze-item { padding: 12px; margin-bottom: 12px; background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(229, 231, 235); }
.swb-pdf-cloze-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.swb-pdf-cloze-num { width: 20px; height: 20px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 0.5625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.swb-pdf-cloze-type { font-size: 0.5625rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }
.swb-pdf-cloze-definition { background: rgb(219, 234, 254); color: rgb(30, 64, 175); }
.swb-pdf-cloze-contrast { background: rgb(254, 243, 199); color: rgb(146, 64, 14); }
.swb-pdf-cloze-paraphrase { background: rgb(220, 252, 231); color: rgb(22, 101, 52); }
.swb-pdf-cloze-blanked { font-size: 0.78rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.7; color: rgb(51, 65, 85); margin: 0px; }
.swb-pdf-cloze-hint { font-size: 0.75rem; color: rgb(107, 114, 128); font-style: italic; margin: 8px 0px 0px; }
.swb-pdf-cloze-answer { font-size: 0.75rem; color: rgb(5, 150, 105); font-weight: 600; margin: 8px 0px 0px; }
.swb-pdf-verb-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin-bottom: 8px; background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(229, 231, 235); }
.swb-pdf-verb-num { width: 20px; height: 20px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 0.5625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.swb-pdf-verb-blanked { font-size: 0.78rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.7; color: rgb(51, 65, 85); margin: 0px; flex: 1 1 0%; }
.swb-pdf-verb-answer { font-size: 0.75rem; color: rgb(5, 150, 105); font-weight: 600; margin: 8px 0px 0px; }
.swb-pdf-choice-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin-bottom: 8px; background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(229, 231, 235); }
.swb-pdf-choice-num { width: 20px; height: 20px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 0.5625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.swb-pdf-choice-blanked { font-size: 0.78rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.7; color: rgb(51, 65, 85); margin: 0px; flex: 1 1 0%; }
.swb-pdf-choice-answer { font-size: 0.75rem; color: rgb(5, 150, 105); font-weight: 600; margin: 8px 0px 0px; }
.swb-pdf-unscramble-item { padding: 12px; margin-bottom: 12px; background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(229, 231, 235); }
.swb-pdf-unscramble-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.swb-pdf-unscramble-num { width: 20px; height: 20px; border-radius: 4px; color: rgb(255, 255, 255); font-size: 0.5625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.swb-pdf-unscramble-hint { font-size: 0.8rem; color: rgb(71, 85, 105); font-weight: 600; }
.swb-pdf-unscramble-words { padding: 12px; background: rgb(248, 250, 252); border: 2px dashed rgb(226, 232, 240); border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: rgb(51, 65, 85); line-height: 1.6; }
.swb-pdf-unscramble-line { height: 30px; border-bottom: 1px solid rgb(226, 232, 240); margin-top: 12px; }
.swb-pdf-unscramble-answer { font-size: 0.75rem; color: rgb(5, 150, 105); font-weight: 600; margin: 8px 0px 0px; }
.swb-pdf-footer { display: flex; justify-content: space-between; padding-top: 16px; margin-top: auto; border-top: 1px solid rgb(229, 231, 235); font-size: 0.625rem; color: rgb(148, 163, 184); }
.swb-marker { font-weight: 700; }
.swb-marker-grammar { color: rgb(220, 38, 38); text-decoration: underline wavy; text-underline-offset: 3px; }
.swb-marker-meaning { color: rgb(37, 99, 235); text-decoration: underline; text-underline-offset: 2px; }
.swb-marker-verb { color: rgb(124, 58, 237); }
.swb-pdf-drill-instruction { font-size: 0.72rem; color: rgb(71, 85, 105); margin-bottom: 10px; padding: 6px 10px; background: rgb(248, 250, 252); border-left: 3px solid rgb(148, 163, 184); border-radius: 0px 4px 4px 0px; }
.swb-pdf-drill-passage { font-size: 0.78rem; line-height: 1.9; color: rgb(30, 41, 59); margin-bottom: 16px; padding: 12px; border: 1px solid rgb(226, 232, 240); border-radius: 6px; background: rgb(250, 250, 250); }
.swb-pdf-drill-question { display: flex; align-items: baseline; gap: 6px; padding: 4px 0px; font-size: 0.72rem; }
.swb-pdf-drill-q-num { color: rgb(107, 114, 128); font-weight: 600; min-width: 24px; }
.swb-pdf-drill-q-target { font-weight: 700; color: rgb(30, 41, 59); }
.swb-pdf-drill-q-arrow { color: rgb(156, 163, 175); }
.swb-pdf-drill-q-blank { color: rgb(209, 213, 219); letter-spacing: 1px; }
.swb-pdf-drill-q-answer { color: rgb(5, 150, 105); font-weight: 700; }
.swb-pdf-answer-section { margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgb(226, 232, 240); }
.swb-pdf-answer-title { font-size: 0.75rem; font-weight: 700; color: rgb(5, 150, 105); margin-bottom: 8px; }
.swb-pdf-answer-item { display: flex; gap: 6px; font-size: 0.75rem; color: rgb(71, 85, 105); padding: 3px 0px; line-height: 1.5; }
.swb-pdf-answer-num { color: rgb(107, 114, 128); font-weight: 600; min-width: 24px; flex-shrink: 0; }
.swb-pdf-answer-text { flex: 1 1 0%; }
.swb-pdf-deep-sentence { padding: 10px 0px; border-bottom: 1px solid rgb(241, 245, 249); }
.swb-pdf-deep-sentence:last-child { border-bottom: none; }
.swb-pdf-deep-header { display: flex; gap: 8px; margin-bottom: 6px; }
.swb-pdf-deep-num { font-weight: 700; color: rgb(30, 41, 59); min-width: 24px; flex-shrink: 0; }
.swb-pdf-deep-text { font-size: 0.78rem; line-height: 1.8; color: rgb(30, 41, 59); }
.swb-pdf-deep-questions { margin-left: 24px; padding: 4px 0px; }
.swb-pdf-deep-question { display: flex; align-items: baseline; gap: 4px; padding: 2px 0px; font-size: 0.78rem; }
.swb-pdf-deep-q-arrow { color: rgb(37, 99, 235); font-weight: 600; }
.swb-pdf-deep-q-type { color: rgb(37, 99, 235); font-weight: 700; min-width: 36px; }
.swb-pdf-deep-q-target { font-weight: 700; color: rgb(55, 65, 81); }
.swb-pdf-deep-q-suffix { color: rgb(107, 114, 128); margin-left: 2px; }
.swb-pdf-deep-q-blank { color: rgb(209, 213, 219); letter-spacing: 1px; }
.swb-pdf-deep-q-answer { color: rgb(5, 150, 105); font-weight: 700; margin-left: 4px; }
.swb-pdf-deep-explanations { margin-left: 24px; margin-top: 6px; padding: 6px 8px; background: rgb(240, 253, 244); border-radius: 4px; border-left: 3px solid rgb(5, 150, 105); }
.swb-pdf-deep-explanation { font-size: 0.72rem; color: rgb(71, 85, 105); padding: 2px 0px; line-height: 1.5; }
.swb-pdf-deep-exp-label { font-weight: 700; color: rgb(5, 150, 105); margin-right: 4px; }
.swb-pdf-grammar-list { display: flex; flex-direction: column; gap: 4px; }
.swb-pdf-grammar-item { display: flex; gap: 6px; align-items: baseline; font-size: 0.75rem; line-height: 1.5; }
.swb-pdf-grammar-label { font-weight: 700; color: rgb(124, 58, 237); white-space: nowrap; }
.swb-pdf-grammar-phrase { font-weight: 600; color: rgb(55, 65, 81); }
.swb-pdf-grammar-explanation { color: rgb(107, 114, 128); }
@media print {
  .swb-pdf-page { break-after: page; }
  .swb-pdf-page:last-child { break-after: auto; }
}
.pa-left-panel { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 16px; overflow-y: auto; }
.pa-input-container { background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; overflow: hidden; }
.pa-input-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgb(229, 231, 235); }
.pa-input-title { font-size: 0.875rem; font-weight: 600; color: rgb(55, 65, 81); margin: 0px; }
.pa-input-actions { display: flex; gap: 8px; }
.pa-btn-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgb(243, 244, 246); border: none; border-radius: 6px; color: rgb(107, 114, 128); cursor: pointer; transition: 0.2s; }
.pa-btn-icon:hover:not(:disabled) { background: rgb(229, 231, 235); color: rgb(55, 65, 81); }
.pa-btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.pa-textarea { width: 100%; min-height: 180px; padding: 16px; font-size: 0.9375rem; line-height: 1.6; border: none; resize: none; outline: none; }
.pa-textarea::placeholder { color: rgb(156, 163, 175); }
.pa-input-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid rgb(229, 231, 235); background: rgb(249, 250, 251); }
.pa-char-count { font-size: 0.75rem; color: rgb(156, 163, 175); }
.pa-btn-unit { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid rgb(209, 213, 219); border-radius: 6px; background: rgb(255, 255, 255); color: rgb(107, 114, 128); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.15s; margin-left: auto; }
.pa-btn-unit:hover { background: rgb(239, 246, 255); border-color: rgb(147, 197, 253); color: rgb(37, 99, 235); }
.pa-btn-analyze { display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 0.875rem; font-weight: 600; color: rgb(255, 255, 255); background: rgb(59, 130, 246); border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.pa-btn-analyze:hover:not(:disabled) { background: rgb(37, 99, 235); }
.pa-btn-analyze:disabled { background: rgb(156, 163, 175); cursor: not-allowed; }
.pa-history-toggle { display: flex; }
.pa-history-toggle-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 0.875rem; color: rgb(107, 114, 128); background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.pa-history-toggle-btn:hover { border-color: rgb(209, 213, 219); color: rgb(55, 65, 81); }
.pa-history-toggle-btn.active { background: rgb(243, 244, 246); border-color: rgb(209, 213, 219); color: rgb(55, 65, 81); }
.pa-history-panel { background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; max-height: 300px; overflow-y: auto; }
.pa-history-loading, .pa-history-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; font-size: 0.875rem; color: rgb(156, 163, 175); }
.pa-history-list { padding: 8px; }
.pa-history-item { display: flex; align-items: center; padding: 8px 12px; border-radius: 6px; transition: background 0.2s; }
.pa-history-item:hover { background: rgb(243, 244, 246); }
.pa-history-item-content { flex: 1 1 0%; cursor: pointer; min-width: 0px; }
.pa-history-item-text { font-size: 0.875rem; color: rgb(55, 65, 81); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-history-item-meta { display: flex; gap: 12px; font-size: 0.75rem; color: rgb(156, 163, 175); margin-top: 4px; }
.pa-history-item-delete { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: 4px; color: rgb(156, 163, 175); cursor: pointer; transition: 0.2s; }
.pa-history-item-delete:hover { background: rgb(254, 226, 226); color: rgb(239, 68, 68); }
.pa-cost-info { display: flex; gap: 16px; padding: 12px 16px; background: rgb(255, 255, 255); border-radius: 8px; border: 1px solid rgb(229, 231, 235); }
.pa-cost-item { display: flex; align-items: center; gap: 8px; }
.pa-cost-label { font-size: 0.8125rem; color: rgb(107, 114, 128); }
.pa-cost-value { font-size: 0.8125rem; font-weight: 600; color: rgb(5, 150, 105); }
.pa-btn-download { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 0.8125rem; font-weight: 600; color: rgb(255, 255, 255); background: rgb(5, 150, 105); border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s; margin-left: auto; }
.pa-btn-download:hover:not(:disabled) { background: rgb(4, 120, 87); }
.pa-btn-download:disabled { background: rgb(156, 163, 175); cursor: not-allowed; }
.pa-save-status { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 0.75rem; background: rgb(243, 244, 246); border-radius: 6px; }
.pa-save-saving { color: rgb(107, 114, 128); }
.pa-save-saved { color: rgb(5, 150, 105); }
.pa-save-error { color: rgb(239, 68, 68); }
.pa-empty-result { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: rgb(156, 163, 175); }
.pa-empty-result p { margin: 0px; font-size: 0.9375rem; }
.pa-empty-hint { font-size: 0.8125rem !important; color: rgb(209, 213, 219) !important; }
.animate-spin { animation: 1s linear 0s infinite normal none running spin; }
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hidden { display: none; }
@media (max-width: 1024px) {
  .pa-left-panel { width: 100%; min-width: unset; }
  .pa-textarea { min-height: 200px; }
}
.pa-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 2px solid var(--badge-text, #0F4C81); }
.pa-header-left { flex: 1 1 0%; }
.pa-header-title { font-size: calc(18px * var(--font-scale, 1)); font-weight: 800; margin: 0px; letter-spacing: -0.02em; color: var(--badge-text, #0F4C81); }
.pa-header-desc { font-size: calc(10px * var(--font-scale, 1)); color: rgb(107, 114, 128); margin: 4px 0px 0px; }
.pa-header-logo { height: calc(32px * var(--font-scale, 1)); width: auto; flex-shrink: 0; }
.pa-section { margin-bottom: 24px; }
.pa-section:last-child { margin-bottom: 0px; }
.pa-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pa-section-num { font-size: calc(24px * var(--font-scale, 1)); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--badge-text, #0F4C81); }
.pa-section-label { font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; color: rgb(55, 65, 81); }
.pa-card { border: 1px solid rgb(229, 231, 235); border-radius: 10px; overflow: hidden; background: rgb(255, 255, 255); }
.pa-card-block { padding: 14px 16px; border-top: 1px solid rgb(243, 244, 246); }
.pa-kv-table { width: 100%; border-collapse: collapse; }
.pa-kv-table tr:last-child td { border-bottom: none; }
.pa-kv-key { width: 80px; padding: 10px 16px; font-size: calc(9px * var(--font-scale, 1)); font-weight: 700; color: rgb(156, 163, 175); letter-spacing: 0.08em; vertical-align: top; border-bottom: 1px solid rgb(243, 244, 246); }
.pa-kv-val { padding: 10px 16px; font-size: calc(11px * var(--font-scale, 1)); color: rgb(31, 41, 55); line-height: 1.6; border-bottom: 1px solid rgb(243, 244, 246); }
.pa-kv-compact .pa-kv-key { width: 50px; padding: 6px 0px; }
.pa-kv-compact .pa-kv-val { padding: 6px 0px; }
.pa-badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pa-badge { display: inline-block; padding: 2px 8px; font-size: calc(8px * var(--font-scale, 1)); font-weight: 700; color: rgb(255, 255, 255); background: var(--badge-text, #1f2937); border-radius: 3px; letter-spacing: 0.08em; }
.pa-badge-text { font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 600; color: rgb(55, 65, 81); }
.pa-table { width: 100%; border-collapse: collapse; font-size: calc(10.5px * var(--font-scale, 1)); }
.pa-table thead th { padding: 8px 10px; font-weight: 700; font-size: calc(10px * var(--font-scale, 1)); color: rgb(55, 65, 81); background: rgb(248, 249, 250); border-bottom: 2px solid rgb(229, 231, 235); text-align: left; white-space: nowrap; }
.pa-table tbody td { padding: 7px 10px; color: rgb(75, 85, 99); border-bottom: 1px solid rgb(243, 244, 246); line-height: 1.4; }
.pa-table tbody tr:last-child td { border-bottom: none; }
.pa-row-core { background: var(--badge-bg, #f8faff); }
.pa-cell-id { font-weight: 600; font-size: calc(10px * var(--font-scale, 1)); color: rgb(107, 114, 128); font-family: "SF Mono", Menlo, monospace; }
.pa-cell-text { font-weight: 500; color: rgb(17, 24, 39); }
.pa-cell-gray { color: rgb(107, 114, 128); font-size: calc(10px * var(--font-scale, 1)); }
.pa-cell-word { font-weight: 600; color: rgb(17, 24, 39); }
.pa-cell-pos { font-size: calc(10px * var(--font-scale, 1)); color: rgb(156, 163, 175); }
.pa-cell-syn { color: rgb(5, 150, 105); }
.pa-cell-ant { color: rgb(220, 38, 38); }
.pa-role-chip { display: inline-block; padding: 2px 7px; font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; border-radius: 4px; text-align: center; }
.pa-chunk-flow { display: flex; flex-wrap: wrap; gap: 5px; }
.pa-chunk-block { border-left: 3px solid rgb(229, 231, 235); padding: 4px 8px; background: rgb(250, 250, 250); border-radius: 0px 4px 4px 0px; min-width: 0px; flex-grow: 1; }
.pa-chunk-block.core { background: rgb(248, 250, 255); }
.pa-chunk-top { display: flex; align-items: center; gap: 4px; }
.pa-role-chip-sm { display: inline-block; padding: 1px 5px; font-size: calc(8px * var(--font-scale, 1)); font-weight: 700; border-radius: 3px; flex-shrink: 0; }
.pa-chunk-text { font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 600; color: rgb(17, 24, 39); white-space: nowrap; }
.pa-chunk-bottom { display: flex; align-items: center; gap: 3px; margin-top: 1px; }
.pa-chunk-grammar { font-size: calc(8.5px * var(--font-scale, 1)); color: rgb(156, 163, 175); font-weight: 500; }
.pa-chunk-dot { color: rgb(209, 213, 219); font-size: calc(8px * var(--font-scale, 1)); }
.pa-chunk-meaning { font-size: calc(8.5px * var(--font-scale, 1)); color: rgb(107, 114, 128); font-weight: 500; }
.pa-role-badge { margin-left: auto; padding: 3px 10px; font-size: calc(9px * var(--font-scale, 1)); font-weight: 600; border-radius: 4px; flex-shrink: 0; }
.pa-flow-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-flow-tag { padding: 4px 10px; font-size: calc(9px * var(--font-scale, 1)); font-weight: 600; border-radius: 4px; background: rgb(243, 244, 246); color: rgb(55, 65, 81); }
.pa-logic-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: calc(10.5px * var(--font-scale, 1)); color: rgb(55, 65, 81); line-height: 1.6; }
.pa-logic-step { display: inline; }
.pa-logic-arrow { color: rgb(209, 213, 219); margin: 0px 2px; font-weight: 700; }
.pa-concept-item { padding: 12px 0px; border-bottom: 1px solid rgb(243, 244, 246); }
.pa-concept-item:last-child { border-bottom: none; }
.pa-concept-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pa-concept-cid { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 20px; padding: 0px 6px; font-size: calc(8px * var(--font-scale, 1)); font-weight: 700; color: rgb(255, 255, 255); background: var(--badge-text, #0F4C81); border-radius: 3px; }
.pa-concept-name { font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; color: rgb(17, 24, 39); }
.pa-concept-en { font-size: calc(10px * var(--font-scale, 1)); font-weight: 400; color: rgb(156, 163, 175); }
.pa-exam-tag { margin-left: auto; padding: 2px 8px; font-size: calc(8px * var(--font-scale, 1)); font-weight: 600; border-radius: 3px; }
.pa-exam-high { background: rgb(254, 226, 226); color: rgb(153, 27, 27); }
.pa-exam-medium { background: rgb(254, 243, 199); color: rgb(146, 64, 14); }
.pa-exam-low { background: rgb(243, 244, 246); color: rgb(107, 114, 128); }
.pa-concept-def { font-size: calc(10.5px * var(--font-scale, 1)); color: rgb(75, 85, 99); line-height: 1.5; margin-bottom: 8px; }
.pa-concept-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 6px; }
.pa-concept-keywords { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pa-keyword { padding: 2px 8px; font-size: calc(8.5px * var(--font-scale, 1)); font-weight: 500; color: rgb(107, 114, 128); background: rgb(243, 244, 246); border-radius: 100px; }
.pa-bar-row { display: flex; align-items: center; gap: 8px; }
.pa-bar-label { font-size: calc(9px * var(--font-scale, 1)); font-weight: 500; color: rgb(156, 163, 175); min-width: 52px; flex-shrink: 0; }
.pa-bar-track { flex: 1 1 0%; height: calc(8px * var(--font-scale, 1)); background: rgb(243, 244, 246); border-radius: 4px; overflow: hidden; }
.pa-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; background: var(--badge-text, #0F4C81); }
.pa-bar-value { font-size: calc(9px * var(--font-scale, 1)); font-weight: 700; color: rgb(55, 65, 81); min-width: 32px; text-align: right; }
.pa-salience-inline { display: flex; flex-wrap: wrap; gap: 5px; }
.pa-salience-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 500; color: rgb(55, 65, 81); background: rgb(243, 244, 246); border-radius: 4px; }
.pa-salience-score { font-weight: 700; color: var(--badge-text, #0F4C81); }
.pa-section-sentence { margin-bottom: 0px; }
.pa-sent-text-box { padding: 14px 16px; border: 1px solid rgb(229, 231, 235); border-radius: 10px; background: rgb(255, 255, 255); margin-bottom: 16px; }
.pa-sent-original { margin: 0px; font-size: calc(12px * var(--font-scale, 1)); font-weight: 500; line-height: 1.7; color: rgb(17, 24, 39); }
.pa-sent-translation { margin: 8px 0px 0px; padding-top: 8px; border-top: 1px solid rgb(243, 244, 246); font-size: calc(10.5px * var(--font-scale, 1)); color: rgb(107, 114, 128); line-height: 1.6; }
.pa-subsection { margin-bottom: 16px; }
.pa-subsection:last-child { margin-bottom: 0px; }
.pa-skeleton-box { padding: 12px 16px; background: rgb(248, 249, 250); border: 1px solid rgb(229, 231, 235); border-radius: 8px; }
.pa-skeleton-text { margin: 0px 0px 6px; font-size: calc(12px * var(--font-scale, 1)); font-weight: 600; color: rgb(17, 24, 39); }
.pa-skeleton-meta { display: flex; gap: 16px; font-size: calc(9px * var(--font-scale, 1)); }
.pa-skeleton-core { color: var(--badge-text, #2563eb); font-weight: 600; }
.pa-skeleton-opt { color: rgb(156, 163, 175); }
.pa-grammar-card { border: 1px solid rgb(229, 231, 235); border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: rgb(255, 255, 255); }
.pa-grammar-card:last-child { margin-bottom: 0px; }
.pa-grammar-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgb(248, 249, 250); border-bottom: 1px solid rgb(229, 231, 235); font-size: calc(10.5px * var(--font-scale, 1)); }
.pa-grammar-id { padding: 2px 6px; font-size: calc(9px * var(--font-scale, 1)); font-weight: 700; color: rgb(55, 65, 81); background: rgb(229, 231, 235); border-radius: 3px; }
.pa-level-chip { padding: 2px 7px; font-size: calc(9px * var(--font-scale, 1)); font-weight: 700; border-radius: 3px; }
.pa-grammar-name { font-weight: 600; color: rgb(17, 24, 39); }
.pa-grammar-name-kr { font-weight: 400; color: rgb(107, 114, 128); }
.pa-grammar-body { padding: 10px 12px; }
.pa-grammar-why { font-size: calc(10.5px * var(--font-scale, 1)); color: rgb(75, 85, 99); line-height: 1.5; margin: 6px 0px 0px; }
.pa-code { padding: 2px 6px; background: rgb(243, 244, 246); border-radius: 4px; font-family: "SF Mono", Menlo, monospace; font-size: calc(10px * var(--font-scale, 1)); }
.pa-mistakes { margin-top: 8px; }
.pa-mistakes-label { font-size: calc(9px * var(--font-scale, 1)); font-weight: 700; color: rgb(239, 68, 68); margin-bottom: 2px; }
.pa-mistakes ul { margin: 2px 0px 0px; padding-left: 16px; font-size: calc(10px * var(--font-scale, 1)); color: rgb(75, 85, 99); line-height: 1.5; }
.pa-drill { padding: 10px 12px; background: rgb(248, 249, 250); border-top: 1px solid rgb(229, 231, 235); }
.pa-drill-prompt { font-size: calc(10px * var(--font-scale, 1)); font-weight: 600; color: rgb(55, 65, 81); margin-bottom: 4px; }
.pa-drill-exercise { font-size: calc(10.5px * var(--font-scale, 1)); color: rgb(17, 24, 39); margin-bottom: 4px; }
.pa-drill-answer { font-size: calc(10px * var(--font-scale, 1)); font-weight: 600; color: rgb(5, 150, 105); }
.pa-pdf-layout { font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; color: rgb(30, 41, 59); }
.jj-preview-container .pa-pdf-layout { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 0px; }
.jj-preview-container .pa-pdf-page { box-shadow: rgba(92, 115, 160, 0.07) 0px 10px 20px; border-radius: 8px; }
.pa-pdf-page { width: 210mm; min-height: 297mm; padding: 20mm 15mm 15mm; background: rgb(255, 255, 255); box-sizing: border-box; display: flex; flex-direction: column; }
.pa-pdf-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 3px solid var(--badge-text, #1e293b); }
.pa-pdf-logo { height: 36px; object-fit: contain; margin-right: 16px; }
.pa-pdf-header-text { flex: 1 1 0%; }
.pa-pdf-header-text h1 { margin: 0px; font-size: 1.4rem; font-weight: 900; color: var(--badge-text, #0F4C81); }
.pa-pdf-header-text p { margin: 4px 0px 0px; font-size: 0.75rem; color: rgb(100, 116, 139); }
.pa-pdf-body { flex: 1 1 0%; }
.pa-pdf-footer { display: flex; justify-content: space-between; padding-top: 12px; margin-top: auto; border-top: 1px solid rgb(229, 231, 235); font-size: 0.625rem; color: rgb(148, 163, 184); }
.pa-pdf-structure { margin-bottom: 20px; border: 1px solid var(--badge-border, #e5e7eb); border-radius: 8px; overflow: hidden; }
.pa-pdf-structure-header { padding: 8px 16px; border-top: 3px solid var(--badge-text, #0F4C81); color: var(--badge-text, #0F4C81); background: rgb(255, 255, 255); font-size: 0.875rem; font-weight: 700; }
.pa-pdf-structure-body { padding: 16px; }
.pa-pdf-structure-row { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.pa-pdf-structure-row:last-child { margin-bottom: 0px; }
.pa-pdf-structure-label { font-size: 0.6875rem; font-weight: 700; color: rgb(148, 163, 184); min-width: 80px; flex-shrink: 0; padding-top: 2px; }
.pa-pdf-structure-value { font-size: 0.85rem; color: rgb(51, 65, 85); line-height: 1.5; }
.pa-pdf-sent-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-pdf-sent-role { font-size: 0.6875rem; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.pa-pdf-logic-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.8rem; color: rgb(71, 85, 105); }
.pa-pdf-flow-step { display: inline-flex; align-items: center; gap: 4px; }
.pa-pdf-flow-arrow { color: rgb(148, 163, 184); font-size: 0.75rem; }
.pa-pdf-concept { margin-bottom: 20px; border: 1px solid var(--badge-border, #e5e7eb); border-radius: 8px; overflow: hidden; }
.pa-pdf-concept-header { padding: 8px 16px; border-top: 3px solid var(--badge-text, #0F4C81); color: var(--badge-text, #0F4C81); background: rgb(255, 255, 255); font-size: 0.875rem; font-weight: 700; }
.pa-pdf-concept-body { padding: 16px; }
.pa-pdf-concepts-grid { display: flex; flex-direction: column; gap: 12px; }
.pa-pdf-concept-card { padding: 14px; background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid var(--badge-border, #e5e7eb); box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 2px; }
.pa-pdf-concept-name { font-size: 0.875rem; font-weight: 700; color: rgb(30, 41, 59); margin-bottom: 4px; }
.pa-pdf-concept-id { display: inline-flex; align-items: center; justify-content: center; font-size: 0.5625rem; font-weight: 700; color: rgb(255, 255, 255); background: var(--badge-text, #0F4C81); padding: 2px 8px; border-radius: 12px; margin-right: 6px; }
.pa-pdf-concept-name-en { font-size: 0.75rem; color: rgb(148, 163, 184); font-weight: 400; }
.pa-pdf-concept-def { font-size: 0.8rem; color: rgb(71, 85, 105); line-height: 1.5; margin-bottom: 6px; }
.pa-pdf-concept-meta { display: flex; gap: 12px; font-size: 0.6875rem; color: rgb(107, 114, 128); margin-bottom: 6px; }
.pa-pdf-exam-value { font-weight: 600; }
.pa-pdf-exam-high { color: rgb(220, 38, 38); }
.pa-pdf-exam-medium { color: rgb(217, 119, 6); }
.pa-pdf-exam-low { color: rgb(107, 114, 128); }
.pa-pdf-concept-keywords { display: flex; flex-wrap: wrap; gap: 4px; }
.pa-pdf-concept-keywords span { font-size: 0.625rem; font-weight: 500; padding: 2px 8px; border-radius: 10px; }
.pa-pdf-salience { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(229, 231, 235); }
.pa-pdf-salience-label { font-size: 0.6875rem; font-weight: 700; color: rgb(148, 163, 184); margin-bottom: 8px; }
.pa-pdf-sentence { margin-bottom: 16px; padding: 16px; background: rgb(248, 250, 252); border-radius: 8px; border: 1px solid var(--badge-border, #e5e7eb); box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px; }
.pa-pdf-sentence.pa-pdf-sentence-start, .pa-pdf-sentence.pa-pdf-sentence-cont { border-radius: 8px; margin-bottom: 8px; }
.pa-pdf-sentence-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.pa-pdf-sentence-num { width: 24px; height: 24px; border-radius: 50%; color: rgb(255, 255, 255); background-color: var(--badge-text, #0F4C81); font-size: 0.6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px; }
.pa-pdf-sentence-text { font-size: 0.9rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.6; color: rgb(30, 41, 59); font-weight: 500; flex: 1 1 0%; }
.pa-pdf-sentence-role { font-size: 0.625rem; font-weight: 600; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }
.pa-pdf-sentence-trans { font-size: 0.8rem; color: rgb(100, 116, 139); line-height: 1.5; margin-bottom: 12px; padding-left: 34px; }
.pa-pdf-section { margin-top: 12px; padding-left: 34px; }
.pa-pdf-section-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; color: var(--badge-text, #0F4C81); border-left: 3px solid var(--badge-text, #0F4C81); padding-left: 8px; }
.pa-pdf-chunks { display: flex; flex-direction: column; gap: 6px; }
.pa-pdf-section-title-only { padding-bottom: 8px; margin-bottom: 4px !important; }
.pa-pdf-chunk-wrapper { padding: 4px 16px; background: rgb(248, 250, 252); border: 1px solid var(--badge-border, #e5e7eb); border-radius: 8px; margin-bottom: 4px; }
.pa-pdf-grammar-wrapper { padding: 8px 16px; background: rgb(248, 250, 252); border: 1px solid var(--badge-border, #e5e7eb); border-radius: 8px; margin-bottom: 4px; }
.pa-pdf-chunk { padding: 10px 14px; background: rgb(255, 255, 255); border-radius: 8px; border-left: 3px solid rgb(229, 231, 235); box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px; }
.pa-pdf-chunk.core { border-left: 4px solid var(--badge-text, #0F4C81); background: rgb(255, 255, 255); }
.pa-pdf-chunk-tags { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.pa-pdf-chunk-id { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0px 5px; border-radius: 10px; background: var(--badge-bg, #f1f5f9); color: var(--badge-text, #475569); font-size: 0.5625rem; font-weight: 700; box-shadow: 0 0 0 .5px var(--badge-border, #cbd5e1); }
.pa-pdf-chunk-type { font-size: 0.5625rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; letter-spacing: 0.03em; }
.pa-pdf-chunk-type.core { background: var(--badge-bg, #dbeafe); color: var(--badge-text, #1e40af); box-shadow: 0 0 0 .5px var(--badge-border, #93c5fd); }
.pa-pdf-chunk-type.optional { background: rgb(243, 244, 246); color: rgb(107, 114, 128); }
.pa-pdf-chunk-role { font-size: 0.5625rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; }
.pa-pdf-chunk-text { font-size: 0.85rem; font-family: Georgia, "Times New Roman", serif; color: rgb(30, 41, 59); line-height: 1.5; }
.pa-pdf-chunk-grammar { font-size: 0.6875rem; color: rgb(107, 114, 128); font-style: italic; margin-top: 2px; }
.pa-pdf-chunk-korean { font-size: 0.75rem; color: rgb(100, 116, 139); margin-top: 2px; }
.pa-pdf-skeleton { padding: 12px 14px; background: rgb(255, 255, 255); border-radius: 8px; border: 1px dashed var(--badge-border, #e5e7eb); }
.pa-pdf-skeleton-text { font-size: 0.85rem; font-family: Georgia, "Times New Roman", serif; color: rgb(30, 41, 59); line-height: 1.5; margin-bottom: 6px; }
.pa-pdf-skeleton-meta { display: flex; gap: 16px; font-size: 0.6875rem; }
.pa-pdf-skeleton-core { color: rgb(30, 64, 175); font-weight: 600; }
.pa-pdf-skeleton-optional { color: rgb(107, 114, 128); }
.pa-pdf-grammar-targets { display: flex; flex-direction: column; gap: 10px; }
.pa-pdf-grammar-target { padding: 14px; background: rgb(255, 255, 255); border-radius: 8px; border: 1px solid var(--badge-border, #e5e7eb); box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px; }
.pa-pdf-grammar-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pa-pdf-grammar-id { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0px 5px; border-radius: 10px; background: var(--badge-bg, #f1f5f9); color: var(--badge-text, #475569); font-size: 0.5625rem; font-weight: 700; box-shadow: 0 0 0 .5px var(--badge-border, #cbd5e1); }
.pa-pdf-grammar-level { font-size: 0.5625rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
.pa-pdf-grammar-title { font-size: 0.8rem; font-weight: 700; color: rgb(30, 41, 59); }
.pa-pdf-grammar-title-kr { font-weight: 400; color: rgb(107, 114, 128); }
.pa-pdf-grammar-pattern { font-size: 0.75rem; color: rgb(71, 85, 105); margin-bottom: 4px; }
.pa-pdf-grammar-pattern code { background: rgb(241, 245, 249); padding: 1px 4px; border-radius: 3px; font-size: 0.75rem; }
.pa-pdf-grammar-evidence { font-size: 0.75rem; color: rgb(71, 85, 105); margin-bottom: 4px; }
.pa-pdf-grammar-evidence em { color: rgb(30, 41, 59); font-weight: 500; }
.pa-pdf-grammar-refs { color: rgb(148, 163, 184); margin-left: 4px; }
.pa-pdf-grammar-why { font-size: 0.75rem; color: rgb(51, 65, 85); line-height: 1.5; margin-bottom: 6px; }
.pa-pdf-grammar-mistakes { font-size: 0.6875rem; color: rgb(220, 38, 38); }
.pa-pdf-mistakes-label { font-weight: 600; margin-bottom: 2px; }
.pa-pdf-grammar-mistakes ul { margin: 2px 0px 0px 16px; padding: 0px; }
.pa-pdf-grammar-mistakes li { margin-bottom: 2px; }
.pa-pdf-grammar-drill { margin-top: 8px; padding: 8px 12px; background: rgb(248, 250, 252); border-radius: 4px; border-left: 3px solid var(--badge-text, #0F4C81); }
.pa-pdf-drill-prompt { font-size: 0.6875rem; font-weight: 600; color: rgb(30, 64, 175); margin-bottom: 4px; }
.pa-pdf-drill-exercise { font-size: 0.8rem; color: rgb(30, 41, 59); font-family: Georgia, "Times New Roman", serif; }
.pa-pdf-drill-answer { font-size: 0.6875rem; font-weight: 600; color: rgb(5, 150, 105); margin-top: 4px; }
.pa-pdf-vocabulary { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-pdf-vocab-item { padding: 8px 12px; background: rgb(255, 255, 255); border-radius: 8px; border: 1px solid var(--badge-border, #e5e7eb); min-width: 140px; box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 2px; }
.pa-pdf-vocab-word { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.pa-pdf-vocab-text { font-size: 0.8rem; font-weight: 700; color: var(--badge-text, #1e293b); }
.pa-pdf-vocab-pos { font-size: 0.5625rem; color: rgb(148, 163, 184); font-style: italic; }
.pa-pdf-vocab-meaning { font-size: 0.75rem; color: rgb(71, 85, 105); }
.pa-pdf-vocab-related { display: flex; gap: 8px; margin-top: 2px; font-size: 0.625rem; }
.pa-pdf-vocab-syn { color: rgb(5, 150, 105); }
.pa-pdf-vocab-ant { color: rgb(220, 38, 38); }
@media print {
  .pa-pdf-page { break-after: page; }
  .pa-pdf-page:last-child { break-after: auto; }
}
:root { --jj-rpp-struct: #1E3A5F; --jj-rpp-meaning: #0E7490; --jj-rpp-writing: #1E3A5F; --jj-rpp-mode-problem: #1E3A5F; --jj-rpp-mode-answer: #16A34A; --jj-rpp-mode-explanation: #7C3AED; --jj-rpp-mode-student: #1E3A5F; --jj-rpp-mode-teacher: #16A34A; --jj-rpp-text: #0F172A; --jj-rpp-muted: #475569; --jj-rpp-hint: #94A3B8; --jj-rpp-border: #E5E7EB; --jj-rpp-soft-bg: #F8FAFC; --jj-rpp-card-bg: #FFFFFF; --jj-rpp-warn: #B91C1C; --jj-rpp-warn-bg: #FFFBEB; --jj-rpp-warn-border: #FCD34D; --jj-rpp-info: #1E40AF; --jj-rpp-info-bg: #EFF6FF; --jj-rpp-info-border: #93C5FD; --jj-rpp-good: #15803D; --jj-rpp-good-bg: #F0FDF4; --jj-rpp-good-border: #86EFAC; --jj-rpp-keyword-bg: #FEF3C7; --jj-rpp-keyword-text: #92400E; }
.jj-rpp-page { font-family: Pretendard, "Noto Sans KR", sans-serif; font-size: 14.5px; color: var(--jj-rpp-text); line-height: 1.55; }
.jj-rpp-page.jj-rpp--struct .jj-rpp-header { border-bottom-color: var(--jj-rpp-struct); }
.jj-rpp-page.jj-rpp--meaning .jj-rpp-header { border-bottom-color: var(--jj-rpp-meaning); }
.jj-rpp-page.jj-rpp--writing .jj-rpp-header { border-bottom-color: var(--jj-rpp-writing); }
.jj-rpp-page.jj-rpp--struct .jj-rpp-title { color: var(--jj-rpp-struct); }
.jj-rpp-page.jj-rpp--meaning .jj-rpp-title { color: var(--jj-rpp-meaning); }
.jj-rpp-page.jj-rpp--writing .jj-rpp-title { color: var(--jj-rpp-writing); }
.jj-rpp-header { border-bottom: 1px solid var(--jj-rpp-border); padding-bottom: 6px; margin-bottom: 12px; }
.jj-rpp-header-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jj-rpp-title { font-size: 18px; font-weight: 700; margin: 0px; }
.jj-rpp-meta { font-size: 11px; color: var(--jj-rpp-muted); margin-top: 3px; }
.jj-rpp-badge { font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); padding: 2px 8px; border-radius: 3px; display: inline-block; }
.jj-rpp-badge--problem { background: var(--jj-rpp-mode-problem); }
.jj-rpp-badge--answer { background: var(--jj-rpp-mode-answer); }
.jj-rpp-badge--explanation { background: var(--jj-rpp-mode-explanation); }
.jj-rpp-badge--student { background: var(--jj-rpp-mode-student); }
.jj-rpp-badge--teacher { background: var(--jj-rpp-mode-teacher); }
.jj-rpp-step { margin-bottom: 10px; break-inside: avoid; }
.jj-rpp-step-label { font-size: 12.5px; font-weight: 700; padding: 4px 8px; border-radius: 2px; margin-bottom: 6px; }
.jj-rpp--struct .jj-rpp-step-label { color: var(--jj-rpp-struct); background: rgb(239, 246, 255); }
.jj-rpp--meaning .jj-rpp-step-label { color: var(--jj-rpp-meaning); background: rgb(236, 254, 255); }
.jj-rpp--writing .jj-rpp-step-label { color: var(--jj-rpp-writing); background: rgb(239, 246, 255); }
.jj-rpp-card { border: 1px solid var(--jj-rpp-border); border-radius: 4px; padding: 10px; background: var(--jj-rpp-card-bg); break-inside: avoid; }
.jj-rpp-card + .jj-rpp-card { margin-top: 10px; }
.jj-rpp-card-stack { display: flex; flex-direction: column; gap: 10px; }
.jj-rpp-sentence-head { font-size: 13.5px; font-weight: 600; background: rgb(241, 245, 249); border-left: 2.5px solid var(--jj-rpp-struct); padding: 4px 8px; margin-bottom: 6px; }
.jj-rpp--meaning .jj-rpp-sentence-head { border-left-color: var(--jj-rpp-meaning); }
.jj-rpp-sentence-head-idx { font-weight: 700; margin-right: 4px; }
.jj-rpp-blank { display: inline-block; border-bottom: .5pt solid var(--jj-rpp-hint); min-width: 80px; height: 14px; vertical-align: bottom; }
.jj-rpp-blank--block { display: block; min-height: 22px; border-bottom: .5pt solid var(--jj-rpp-hint); }
.jj-rpp-blank--full { width: 100%; }
.jj-rpp-box { padding: 8px; border-radius: 3px; margin-bottom: 8px; font-size: 12px; line-height: 1.5; }
.jj-rpp-box-title { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.jj-rpp-box--warn { background: var(--jj-rpp-warn-bg); border: .5pt solid var(--jj-rpp-warn-border); color: rgb(120, 53, 15); }
.jj-rpp-box--warn .jj-rpp-box-title { color: rgb(146, 64, 14); }
.jj-rpp-box--info { background: var(--jj-rpp-info-bg); border: .5pt solid var(--jj-rpp-info-border); }
.jj-rpp-box--info .jj-rpp-box-title { color: var(--jj-rpp-info); }
.jj-rpp-box--good { background: var(--jj-rpp-good-bg); border: .5pt solid var(--jj-rpp-good-border); }
.jj-rpp-box--good .jj-rpp-box-title { color: var(--jj-rpp-good); }
.jj-rpp-box--neutral { background: var(--jj-rpp-soft-bg); border: 0.5pt solid rgb(203, 213, 225); }
.jj-rpp-chip { font-size: 11px; background: var(--jj-rpp-keyword-bg); color: var(--jj-rpp-keyword-text); padding: 1px 6px; border-radius: 3px; display: inline-block; }
.jj-rpp-code { background: var(--jj-rpp-soft-bg); padding: 0px 4px; border-radius: 2px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; }
.jj-rpp-code--accent { background: var(--jj-rpp-info-bg); color: var(--jj-rpp-info); font-weight: 600; }
.jj-rpp-tag { font-size: 10.5px; font-weight: 700; color: rgb(255, 255, 255); padding: 1px 6px; border-radius: 2px; display: inline-block; }
.jj-rpp-tag--gray { background: rgb(100, 116, 139); }
.jj-rpp-tag--blue { background: var(--jj-rpp-info); }
.jj-rpp-tag--green { background: var(--jj-rpp-good); }
.jj-rpp-tag--purple { background: var(--jj-rpp-mode-explanation); }
.jj-rpp-warn-text { color: var(--jj-rpp-warn); }
.jj-rpp-good-text { color: var(--jj-rpp-good); font-weight: 600; }
.jj-rpp-list { margin: 0px; padding-left: 16px; font-size: 12px; }
.jj-rpp-list > li + li { margin-top: 2px; }
.jj-rpp-page.jj-rpp--struct { font-size: 12.5px; line-height: 1.28; }
.jj-rpp-page.jj-rpp--struct .jj-rpp-title { font-size: 16px; }
.jj-rpp-page.jj-rpp--struct .jj-rpp-meta { font-size: 10.5px; margin-top: 2px; }
.jj-rpp-page.jj-rpp--struct .jj-rpp-step { margin-bottom: 2px; }
.jj-rpp-page.jj-rpp--struct .jj-rpp-step-label { font-size: 11px; font-weight: 700; padding: 1px 4px; margin-bottom: 2px; }
.jj-rpp-struct-sentence-group { break-inside: avoid; margin-bottom: 7px; }
.jj-rpp-struct-ans { break-inside: avoid; padding: 3px 0px 4px; border-bottom: 0.5pt dashed rgb(203, 213, 225); }
.jj-rpp-struct-ans:last-child { border-bottom: none; }
.jj-rpp-struct-ans-raw { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; font-weight: 600; color: rgb(15, 23, 42); line-height: 1.3; }
.jj-rpp-struct-ans-rawtext { flex: 1 1 0%; min-width: 0px; }
.jj-rpp-struct-ans-idx { color: var(--jj-rpp-struct); font-weight: 700; }
.jj-rpp-struct-ans-type { font-size: 9.5px; font-weight: 700; color: var(--jj-rpp-struct); background: rgb(238, 242, 255); padding: 0px 5px; border-radius: 2px; white-space: nowrap; }
.jj-rpp-struct-ans-type--passive { color: rgb(146, 64, 14); background: rgb(254, 243, 199); }
.jj-rpp-struct-ans-slots { font-size: 10.5px; line-height: 1.35; }
.jj-rpp-struct-ans-tag { font-size: 8.5px; font-weight: 700; color: var(--jj-rpp-struct); background: rgb(224, 231, 255); padding: 0px 4px; border-radius: 2px; margin-right: 4px; }
.jj-rpp-struct-ans-slot { display: inline; margin-right: 6px; }
.jj-rpp-struct-ans-slot b { font-size: 9px; font-weight: 700; color: var(--jj-rpp-struct); margin-right: 2px; }
.jj-rpp-struct-ans-slot i { font-style: normal; color: rgb(15, 23, 42); }
.jj-rpp-struct-ans-pos { font-size: 10.5px; line-height: 1.4; }
.jj-rpp-struct-ans-poswrd { margin-right: 5px; white-space: nowrap; }
.jj-rpp-struct-ans-poswrd .w { color: var(--jj-rpp-text); }
.jj-rpp-struct-ans-poswrd .p { color: var(--pos-color, var(--jj-rpp-struct)); font-weight: 700; font-size: 9.5px; }
.jj-rpp-struct-ans-poswrd .p::before { content: "·"; color: var(--jj-rpp-hint); margin: 0px 1px; }
.jj-rpp-struct-ans-chunks { font-size: 10.5px; line-height: 1.4; color: var(--jj-rpp-muted); }
.jj-rpp-struct-ans-ch { margin-right: 6px; }
.jj-rpp-struct-ans-ch .en { color: rgb(15, 23, 42); }
.jj-rpp-struct-ans-ch .en::after { content: "·"; color: var(--jj-rpp-hint); margin: 0px 2px; }
.jj-rpp-struct-ans-ch + .jj-rpp-struct-ans-ch::before { content: " / "; color: var(--jj-rpp-hint); }
.jj-rpp-struct-ans-role { display: inline-block; font-size: 8.5px; font-weight: 700; padding: 0px 4px; border-radius: 2px; background: rgb(219, 234, 254); color: rgb(30, 58, 95); margin-left: 2px; vertical-align: middle; }
.jj-rpp-struct-ans-role.jj-rpp-role--corr { background: rgb(252, 231, 243); color: rgb(157, 23, 77); }
.jj-rpp-struct-ans-role.jj-rpp-role--compare { background: rgb(254, 243, 199); color: rgb(146, 64, 14); }
.jj-rpp-struct-ans-role.jj-rpp-role--rel { background: rgb(253, 242, 248); color: rgb(190, 24, 93); }
.jj-rpp-struct-ans-role.jj-rpp-role--participle { background: rgb(236, 253, 245); color: rgb(4, 120, 87); }
.jj-rpp-struct-ans-role.jj-rpp-role--inf { background: rgb(238, 242, 255); color: rgb(67, 56, 202); }
.jj-rpp-struct-ans-role.jj-rpp-role--gerund { background: rgb(239, 246, 255); color: rgb(29, 78, 216); }
.jj-rpp-struct-ans-role.jj-rpp-role--prep { background: rgb(245, 243, 255); color: rgb(124, 58, 237); }
.jj-rpp-struct-ans-tr { font-size: 11px; line-height: 1.35; color: rgb(15, 23, 42); font-weight: 500; }
.jj-rpp-struct-ans-tr::before { content: "→ "; color: var(--jj-rpp-struct); font-weight: 700; }
.jj-rpp-page.jj-rpp--struct .two-column-manual .column-item:first-child .jj-rpp-struct-card { padding-top: 4px !important; }
.jj-rpp-page.jj-rpp--struct .two-column-manual .column-item:first-child .jj-rpp-struct-card--sub { padding-top: 3px !important; margin-top: 3px !important; }
.jj-rpp-page.jj-rpp--struct .two-column-manual .column-item:first-child .jj-rpp-struct-sentence-raw { padding-top: 3px !important; }
.jj-rpp-struct-card { border: 0.5pt solid rgb(203, 213, 225); border-radius: 2px; padding: 4px 6px; background: rgb(255, 255, 255); break-inside: avoid; }
.jj-rpp-struct-card + .jj-rpp-struct-card { margin-top: 3px; }
.jj-rpp-struct-card--sub { padding: 3px 6px; background: rgb(250, 251, 252); border-color: rgb(226, 232, 240); }
.jj-rpp-struct-sentence-raw { font-size: 13px; font-weight: 600; color: rgb(15, 23, 42); background: rgb(241, 245, 249); border-left: 2.5px solid var(--jj-rpp-struct); padding: 3px 6px; margin-bottom: 3px; line-height: 1.3; }
.jj-rpp-struct-sentence-idx { color: var(--jj-rpp-struct); font-weight: 700; margin-right: 4px; }
.jj-rpp-struct-row { display: block; margin-bottom: 3px; }
.jj-rpp-struct-step1, .jj-rpp-struct-step3 { width: 100%; }
.jj-rpp-struct-clause { font-size: 11.5px; padding-left: 4px; }
.jj-rpp-struct-clause + .jj-rpp-struct-clause { margin-top: 3px; padding-top: 3px; border-top: .5pt dashed var(--jj-rpp-border); }
.jj-rpp-struct-clause-tag { background: rgb(224, 231, 255); color: var(--jj-rpp-struct); padding: 0.5px 4px; border-radius: 2px; font-size: 8.5px; margin-right: 3px; }
.jj-rpp-struct-pattern { font-size: 9px; color: var(--jj-rpp-muted); }
.jj-rpp-struct-step1-block { padding: 1px 0px; }
.jj-rpp-struct-clause-row { display: flex; flex-direction: column; gap: 2px; padding: 2px 0px; }
.jj-rpp-struct-clause-row + .jj-rpp-struct-clause-row { border-top: .5pt dashed var(--jj-rpp-border); margin-top: 1px; padding-top: 3px; }
.jj-rpp-struct-slot-row { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: stretch; }
.jj-rpp-struct-slot { display: inline-flex; flex-direction: column; border: .4pt solid var(--jj-rpp-border); border-radius: 3px; padding: 2px 7px 3px; background: rgb(250, 251, 252); font-size: 13px; min-width: 64px; flex: 0 1 auto; line-height: 1.25; }
.jj-rpp-struct-slot:first-child { background: rgb(238, 242, 255); }
.jj-rpp-struct-slot strong { font-size: 10.5px; color: var(--jj-rpp-struct); font-weight: 700; text-transform: none; letter-spacing: 0.02em; margin-bottom: 1px; }
.jj-rpp-struct-slot em { font-style: normal; color: var(--jj-rpp-text); font-size: 13px; font-weight: 500; }
.jj-rpp-struct-slot .jj-rpp-struct-detail-blank { display: inline-block; min-width: 50px; height: 15px; flex: 1 1 0%; }
.jj-rpp-struct-fragment-note { font-size: 11.5px; color: var(--jj-rpp-muted); font-style: italic; padding: 1px 0px 0px 4px; }
.jj-rpp-struct-trap-note { margin-top: 2px; padding: 2px 6px; background: rgb(254, 243, 199); border-left: 2pt solid rgb(245, 158, 11); border-radius: 2px; font-size: 11.5px; color: rgb(120, 53, 15); font-weight: 500; line-height: 1.3; }
.jj-rpp-struct-step3-block { margin-top: 3px; }
.jj-rpp-struct-pos-legend { display: flex; flex-wrap: wrap; gap: 2px 9px; padding: 3px 5px; margin-bottom: 3px; background: rgb(248, 250, 252); border: 0.4pt dashed rgb(148, 163, 184); border-radius: 3px; font-size: 10px; color: var(--jj-rpp-muted); line-height: 1.3; }
.jj-rpp-struct-pos-legend-label { font-size: 9px; font-weight: 700; color: var(--jj-rpp-struct); background: rgb(238, 242, 255); padding: 0px 4px; border-radius: 2px; margin-right: 4px; }
.jj-rpp-struct-pos-legend strong { color: rgb(15, 23, 42); font-weight: 600; font-style: normal; }
.jj-rpp-struct-pos-grid { display: flex; flex-wrap: wrap; gap: 3px 5px; padding: 1px 0px; }
.jj-rpp-struct-pos-item { display: flex; flex-direction: column; align-items: center; border: .5pt solid var(--jj-rpp-border); border-radius: 3px; padding: 2px 6px; background: rgb(250, 251, 252); min-width: 36px; }
.jj-rpp-struct-pos-word { font-size: 12.5px; color: var(--jj-rpp-text); font-weight: 500; text-align: center; line-height: 1.2; }
.jj-rpp-struct-pos-label { font-size: 12px; color: var(--jj-rpp-struct); font-weight: 700; min-height: 16px; min-width: 22px; text-align: center; border-top: .4pt solid var(--jj-rpp-hint); margin-top: 2px; padding-top: 1px; width: 100%; line-height: 1.2; }
.jj-rpp-struct-pos-label .jj-rpp-struct-detail-blank { display: inline-block; width: 22px; border-bottom: none; }
.jj-rpp-pos--noun { --pos-color: #1D4ED8; --pos-bg: #EFF6FF; }
.jj-rpp-pos--verb { --pos-color: #DC2626; --pos-bg: #FEF2F2; }
.jj-rpp-pos--adj { --pos-color: #047857; --pos-bg: #ECFDF5; }
.jj-rpp-pos--adv { --pos-color: #B45309; --pos-bg: #FFFBEB; }
.jj-rpp-pos--prep { --pos-color: #7C3AED; --pos-bg: #F5F3FF; }
.jj-rpp-pos--conj { --pos-color: #0F766E; --pos-bg: #F0FDFA; }
.jj-rpp-pos--rel { --pos-color: #BE185D; --pos-bg: #FDF2F8; }
.jj-rpp-pos--pron { --pos-color: #0E7490; --pos-bg: #ECFEFF; }
.jj-rpp-pos--det { --pos-color: #475569; --pos-bg: #F8FAFC; }
.jj-rpp-pos--verbal { --pos-color: #4338CA; --pos-bg: #EEF2FF; }
.jj-rpp-pos--modal { --pos-color: #92400E; --pos-bg: #FEF3C7; }
.jj-rpp-struct-pos-item[class*="jj-rpp-pos--"] { background: var(--pos-bg); border-color: var(--pos-color); }
.jj-rpp-struct-pos-item[class*="jj-rpp-pos--"] .jj-rpp-struct-pos-label { color: var(--pos-color); border-top-color: var(--pos-color); }
.jj-rpp-struct-pos-item.jj-rpp-pos--modal { border-width: 0.8pt; }
.jj-rpp-struct-pos-item.jj-rpp-pos--modal .jj-rpp-struct-pos-word { color: rgb(146, 64, 14); font-weight: 700; }
.jj-rpp-pos-leg { color: var(--pos-color, var(--jj-rpp-muted)); font-weight: 600; }
.jj-rpp-pos-leg strong { color: var(--pos-color, #0F172A); font-weight: 700; }
.jj-rpp-struct-pos-legend--band { margin: 5px 0px 0px; background: rgb(251, 252, 254); }
.jj-rpp-step-label-hint { font-weight: 500; font-size: 9.5px; color: var(--jj-rpp-hint); }
.jj-rpp-struct-detail-table { display: flex; flex-direction: column; border-radius: 2px; overflow: hidden; }
.jj-rpp-struct-detail-header { display: flex; flex-direction: row; background: rgb(238, 242, 255); border-bottom: 0.5pt solid rgb(148, 163, 184); padding: 1.5px 3px; }
.jj-rpp-struct-detail-header span { font-size: 8.5px; font-weight: 700; color: var(--jj-rpp-struct); }
.jj-rpp-struct-detail-row { display: flex; flex-direction: row; padding: 1.5px 3px; border-bottom: 0.3pt solid rgb(226, 232, 240); border-left: 4px solid rgb(203, 213, 225); font-size: 9px; }
.jj-rpp-struct-detail-row:last-child { border-bottom: none; }
.jj-rpp-struct-detail-cell-item { width: 32%; padding-right: 3px; color: rgb(15, 23, 42); }
.jj-rpp-struct-detail-cell-role { width: 22%; padding-right: 3px; color: var(--jj-rpp-muted); }
.jj-rpp-struct-detail-cell-target { width: 20%; padding-right: 3px; color: rgb(15, 23, 42); }
.jj-rpp-struct-detail-cell-trap { width: 26%; color: var(--jj-rpp-warn); font-size: 8.5px; }
.jj-rpp-struct-detail-blank { display: inline-block; border-bottom: .4pt solid var(--jj-rpp-hint); width: 100%; height: 9px; }
.jj-rpp-struct-chunk-table { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; }
.jj-rpp-struct-chunk-header { display: flex; flex-direction: row; background: rgb(248, 250, 252); border-bottom: 0.4pt solid rgb(148, 163, 184); padding: 1.5px 4px; }
.jj-rpp-struct-chunk-header span { font-size: 10px; font-weight: 700; color: var(--jj-rpp-muted); }
.jj-rpp-struct-chunk-row { display: flex; flex-direction: row; padding: 2px 4px; border-bottom: 0.3pt solid rgb(226, 232, 240); }
.jj-rpp-struct-chunk-row:last-child { border-bottom: none; }
.jj-rpp-struct-chunk-phrase { width: 50%; padding-right: 4px; color: rgb(15, 23, 42); }
.jj-rpp-struct-chunk-literal { width: 50%; color: var(--jj-rpp-muted); }
.jj-rpp-struct-chunk-role { display: inline-block; margin-left: 5px; padding: 1px 5px; background: rgb(219, 234, 254); color: rgb(30, 58, 95); font-size: 10.5px; font-weight: 600; border-radius: 2px; }
.jj-rpp-struct-chunk-role.jj-rpp-role--corr { background: rgb(252, 231, 243); color: rgb(157, 23, 77); }
.jj-rpp-struct-chunk-role.jj-rpp-role--compare { background: rgb(254, 243, 199); color: rgb(146, 64, 14); }
.jj-rpp-struct-chunk-role.jj-rpp-role--rel { background: rgb(253, 242, 248); color: rgb(190, 24, 93); }
.jj-rpp-struct-chunk-role.jj-rpp-role--participle { background: rgb(236, 253, 245); color: rgb(4, 120, 87); }
.jj-rpp-struct-chunk-role.jj-rpp-role--inf { background: rgb(238, 242, 255); color: rgb(67, 56, 202); }
.jj-rpp-struct-chunk-role.jj-rpp-role--gerund { background: rgb(239, 246, 255); color: rgb(29, 78, 216); }
.jj-rpp-struct-chunk-role.jj-rpp-role--advcl { background: rgb(240, 253, 250); color: rgb(15, 118, 110); }
.jj-rpp-struct-chunk-role.jj-rpp-role--nounclause { background: rgb(236, 254, 255); color: rgb(14, 116, 144); }
.jj-rpp-struct-chunk-role.jj-rpp-role--prep { background: rgb(245, 243, 255); color: rgb(124, 58, 237); }
.jj-rpp-struct-chunk-blank { display: inline-block; border-bottom: .4pt solid var(--jj-rpp-hint); width: 100%; height: 12px; }
.jj-rpp-struct-translation { font-size: 12.5px; color: rgb(15, 23, 42); line-height: 1.3; padding-left: 4px; }
.jj-rpp-struct-translation-blank { display: block; border-bottom: .5pt solid var(--jj-rpp-hint); min-height: 16px; }
.jj-rpp-meaning-passage { font-size: 12px; background: rgb(240, 249, 255); border-left: 2.5px solid var(--jj-rpp-meaning); padding: 8px; margin-bottom: 8px; line-height: 1.5; }
.jj-rpp-meaning-chunk { margin-bottom: 6px; }
.jj-rpp-meaning-chunk-label { font-weight: 700; color: var(--jj-rpp-good); font-size: 12px; }
.jj-rpp-meaning-chunk-summary { font-size: 12px; color: var(--jj-rpp-good); font-weight: 600; }
.jj-rpp-meaning-chunk-keywords { font-size: 10.5px; color: var(--jj-rpp-muted); }
.jj-rpp-meaning-key-sentence { font-size: 12.5px; color: var(--jj-rpp-info); background: rgb(255, 255, 255); padding: 4px; border-radius: 2px; margin-bottom: 4px; }
.jj-rpp-writing-types { display: flex; flex-direction: column; gap: 10px; }
.jj-rpp-writing-card { border: 1px solid var(--jj-rpp-border); border-radius: 4px; break-inside: avoid; background: var(--jj-rpp-card-bg); overflow: hidden; }
.jj-rpp-writing-card-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--jj-rpp-soft-bg); border-bottom: 1px solid var(--jj-rpp-border); }
.jj-rpp-writing-type-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; margin: 6px 0px 2px; background: linear-gradient(90deg,var(--jj-rpp-soft-bg) 0%,transparent 100%); border-left: 3px solid var(--jj-rpp-writing); border-radius: 3px; break-inside: avoid; break-after: avoid; }
.jj-rpp-wm-underline { text-decoration: underline 1.5px rgb(220, 38, 38); font-weight: 500; }
.jj-rpp-writing-type-label { font-size: 12.5px; font-weight: 700; color: var(--jj-rpp-writing); }
.jj-rpp-writing-type-score { font-size: 11px; color: var(--jj-rpp-muted); background: rgb(255, 255, 255); padding: 1px 6px; border-radius: 2px; border: 1px solid var(--jj-rpp-border); }
.jj-rpp-writing-body { padding: 10px; font-size: 12px; }
.jj-rpp-writing-passage { background: rgb(240, 249, 255); border-left: 2.5px solid var(--jj-rpp-writing); padding: 8px; font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.jj-rpp-writing-stem { font-weight: 600; margin-bottom: 6px; }
.jj-rpp-writing-conditions { margin: 0px 0px 8px; padding-left: 18px; font-size: 11.5px; color: var(--jj-rpp-muted); }
.jj-rpp-writing-answer-form { border: .5pt solid var(--jj-rpp-hint); border-radius: 3px; padding: 10px; min-height: 36px; background: var(--jj-rpp-soft-bg); font-size: 12px; margin-bottom: 8px; white-space: pre-wrap; }
.jj-rpp-writing-marked { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.jj-rpp-writing-marked-chip { font-size: 11px; background: var(--jj-rpp-warn-bg); border: .5pt solid var(--jj-rpp-warn-border); padding: 1px 6px; border-radius: 3px; }
.jj-rpp-writing-wordbank { font-size: 12.5px; font-weight: 600; background: rgb(255, 255, 255); border: .5pt solid var(--jj-rpp-border); padding: 4px 8px; border-radius: 3px; display: inline-block; }
.jj-rpp-writing-korean { font-size: 12px; color: var(--jj-rpp-muted); font-style: normal; margin-bottom: 4px; }
.jj-rpp-writing-field { margin-bottom: 8px; }
.jj-rpp-writing-field-label { display: block; font-size: 11px; font-weight: 700; color: var(--jj-rpp-muted); margin-bottom: 3px; }
.jj-rpp-writing-def { font-size: 12px; margin-bottom: 3px; }
.jj-rpp-writing-def-label { font-weight: 700; margin-right: 4px; }
.jj-rpp-writing-def-hint { margin-left: 6px; color: var(--jj-rpp-hint); font-family: "JetBrains Mono", ui-monospace, monospace; }
.jj-rpp-writing-bullet { font-size: 12px; margin-bottom: 3px; }
.jj-rpp-writing-section { margin-bottom: 8px; }
.jj-rpp-writing-section-label { font-size: 11px; font-weight: 700; color: var(--jj-rpp-good); background: var(--jj-rpp-good-bg); padding: 2px 6px; border-radius: 2px; display: inline-block; margin-bottom: 4px; }
.jj-rpp-writing-model-answer { font-size: 12.5px; color: var(--jj-rpp-good); font-weight: 600; background: rgb(255, 255, 255); border: .5pt solid var(--jj-rpp-good-border); padding: 6px 8px; border-radius: 3px; margin-bottom: 4px; }
.jj-rpp-writing-wrong { font-size: 12px; color: var(--jj-rpp-warn); margin-bottom: 4px; }
.jj-rpp-writing-correct { font-size: 12px; color: var(--jj-rpp-good); margin-bottom: 4px; }
.jj-rpp-writing-evidence, .jj-rpp-writing-reason { font-size: 11px; color: var(--jj-rpp-muted); margin-left: 12px; }
.jj-rpp-writing-rubric { display: flex; justify-content: space-between; font-size: 11.5px; border-bottom: .5pt dashed var(--jj-rpp-border); padding: 2px 0px; }
.jj-rpp-writing-rubric-points { font-weight: 700; color: var(--jj-rpp-writing); }
.jj-rpp-writing-empty { font-size: 13px; color: var(--jj-rpp-muted); text-align: center; padding: 20px; }
.jj-rpp-writing-shared-passage { border-left: 3px solid var(--jj-rpp-writing); background: rgb(240, 249, 255); padding: 10px 14px; margin-bottom: 12px; border-radius: 0px 4px 4px 0px; break-inside: avoid; }
.jj-rpp-writing-shared-passage-label { font-size: 11.5px; font-weight: 700; color: var(--jj-rpp-writing); margin-bottom: 4px; }
.jj-rpp-writing-shared-passage-body { font-size: 12.5px; line-height: 1.6; color: var(--jj-rpp-text); }
.jj-rpp-writing-derivation { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.jj-rpp-writing-derivation-step { border-left: 2.5px solid var(--jj-rpp-mode-explanation); padding: 4px 8px; background: rgb(250, 245, 255); border-radius: 0px 3px 3px 0px; }
.jj-rpp-writing-derivation-label { font-size: 11.5px; font-weight: 700; color: var(--jj-rpp-mode-explanation); margin-bottom: 2px; }
.jj-rpp-writing-derivation-content { font-size: 12px; color: var(--jj-rpp-text); line-height: 1.5; }
.jj-rpp-ml-step-heading { font-size: 13px; font-weight: 700; color: var(--jj-rpp-meaning); background: linear-gradient(90deg, rgb(236, 254, 255) 0%, transparent 100%); border-left: 3px solid var(--jj-rpp-meaning); padding: 4px 10px; margin: 4px 0px 2px; break-inside: avoid; }
.jj-rpp-ml-card { border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--jj-rpp-meaning); border-radius: 4px; background: var(--jj-rpp-card-bg); padding: 6px 10px; margin-bottom: 4px; break-inside: avoid; font-size: 11.5px; line-height: 1.5; }
.jj-rpp-ml-card--passage { border-left-color: rgb(148, 163, 184); padding: 8px 10px; }
.jj-rpp-ml-card--guide { border-left-color: var(--jj-rpp-warn-border); background: var(--jj-rpp-warn-bg); }
.jj-rpp-ml-card--relation { border-left-color: rgb(245, 158, 11); }
.jj-rpp-ml-card--word { border-left-color: var(--jj-rpp-keyword-text); }
.jj-rpp-ml-card--ref { border-left-color: var(--jj-rpp-mode-explanation); }
.jj-rpp-ml-card--inference { border-left-color: var(--jj-rpp-good); background: var(--jj-rpp-good-bg); }
.jj-rpp-ml-card--summary { border-left-color: var(--jj-rpp-meaning); background: var(--jj-rpp-soft-bg); }
.jj-rpp-ml-card--flow { border-left-color: var(--jj-rpp-good); }
.jj-rpp-ml-card--key { border-left-color: var(--jj-rpp-info); }
.jj-rpp-ml-card--mark { border-left-color: var(--jj-rpp-meaning); }
.jj-rpp-ml-card--seed { border-left-color: var(--jj-rpp-mode-explanation); }
.jj-rpp-ml-card--annotation { border-left-color: rgb(14, 165, 233); background: rgb(240, 249, 255); }
.jj-rpp-ml-card--role { border-left-color: rgb(139, 92, 246); }
.jj-rpp-ml-anno-list { display: flex; flex-direction: column; gap: 6px; }
.jj-rpp-ml-anno-row { padding: 4px 6px; border-bottom: 1px dotted var(--jj-rpp-border); }
.jj-rpp-ml-anno-row:last-child { border-bottom: none; }
.jj-rpp-ml-anno-skeleton { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; padding-left: 22px; font-size: 11px; color: var(--jj-rpp-muted); }
.jj-rpp-ml-anno-skeleton-text { font-style: italic; color: var(--jj-rpp-text); }
.jj-rpp-ml-role { display: inline-flex; align-items: baseline; padding: 1px 4px; margin: 0px 1px; border-radius: 3px; border: 1px solid transparent; }
.jj-rpp-ml-role-text { line-height: 1.3; }
.jj-rpp-ml-role-tag { margin-left: 3px; font-size: 8.5px; font-weight: 700; vertical-align: sub; opacity: 0.78; }
.jj-rpp-ml-role--role-agent { background: rgb(219, 234, 254); color: rgb(30, 64, 175); border-color: rgb(147, 197, 253); }
.jj-rpp-ml-role--role-theme { background: rgb(220, 252, 231); color: rgb(22, 101, 52); border-color: rgb(134, 239, 172); }
.jj-rpp-ml-role--role-cause { background: rgb(254, 215, 170); color: rgb(154, 52, 18); border-color: rgb(253, 186, 116); }
.jj-rpp-ml-role--role-condition { background: rgb(254, 243, 199); color: rgb(146, 64, 14); border-color: rgb(252, 211, 77); }
.jj-rpp-ml-role--role-result { background: rgb(254, 202, 202); color: rgb(153, 27, 27); border-color: rgb(252, 165, 165); }
.jj-rpp-ml-role--role-benefactive { background: rgb(233, 213, 255); color: rgb(107, 33, 168); border-color: rgb(216, 180, 254); }
.jj-rpp-ml-role--role-instrument { background: rgb(221, 214, 254); color: rgb(91, 33, 182); border-color: rgb(196, 181, 253); }
.jj-rpp-ml-role--role-time { background: rgb(226, 232, 240); color: rgb(71, 85, 105); border-color: rgb(203, 213, 225); }
.jj-rpp-ml-role--role-locative { background: rgb(229, 231, 235); color: rgb(75, 85, 99); border-color: rgb(209, 213, 219); }
.jj-rpp-ml-role--role-directional { background: rgb(241, 245, 249); color: rgb(100, 116, 139); border-color: rgb(226, 232, 240); }
.jj-rpp-ml-role--role-topic { background: rgb(207, 250, 254); color: rgb(21, 94, 117); border-color: rgb(103, 232, 249); }
.jj-rpp-ml-role--role-paraphrase { background: rgb(204, 251, 241); color: rgb(17, 94, 89); border-color: rgb(94, 234, 212); }
.jj-rpp-ml-role--role-other { background: rgb(243, 244, 246); color: rgb(107, 114, 128); border-color: rgb(229, 231, 235); }
.jj-rpp-ml-prop-free { display: flex; flex-direction: column; gap: 8px; }
.jj-rpp-ml-prop-row { display: flex; gap: 6px; align-items: baseline; border-bottom: 1px solid var(--jj-rpp-border); padding-bottom: 3px; }
.jj-rpp-ml-rel-answer { display: flex; gap: 6px; align-items: baseline; margin-top: 3px; }
.jj-rpp-ml-trap-tag { display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 9.5px; font-weight: 700; color: rgb(180, 83, 9); background: rgb(254, 243, 199); border: 1px solid rgb(252, 211, 77); border-radius: 3px; letter-spacing: -0.2px; }
.jj-rpp-ml-card-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px dashed var(--jj-rpp-border); }
.jj-rpp-ml-card-title { font-size: 12px; font-weight: 700; color: var(--jj-rpp-text); }
.jj-rpp-ml-card-idx { font-size: 10.5px; font-weight: 700; color: var(--jj-rpp-meaning); background: rgb(236, 254, 255); padding: 1px 6px; border-radius: 8px; }
.jj-rpp-ml-card-marker { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 11px; font-weight: 700; background: var(--jj-rpp-meaning); color: rgb(255, 255, 255); border-radius: 50%; }
.jj-rpp-ml-card-confidence { font-size: 10px; color: var(--jj-rpp-muted); margin-left: auto; }
.jj-rpp-ml-card-arrow { color: var(--jj-rpp-muted); font-weight: 700; }
.jj-rpp-ml-card-raw { font-size: 12px; font-weight: 500; margin-bottom: 4px; padding: 4px 8px; background: var(--jj-rpp-soft-bg); border-radius: 3px; color: var(--jj-rpp-text); }
.jj-rpp-ml-card-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; }
.jj-rpp-ml-card-row--block { flex-direction: column; align-items: stretch; }
.jj-rpp-ml-card-row--warn { color: var(--jj-rpp-warn); }
.jj-rpp-ml-card-label { flex: 0 0 50px; font-size: 10.5px; font-weight: 700; color: var(--jj-rpp-muted); text-align: right; padding-top: 1px; }
.jj-rpp-ml-keyword-list { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.jj-rpp-ml-mark-list { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jj-rpp-ml-mark { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
.jj-rpp-ml-mark-icon { font-weight: 700; color: var(--jj-rpp-meaning); }
.jj-rpp-ml-mark-tag { font-size: 10.5px; color: var(--jj-rpp-hint); }
.jj-rpp-ml-mark-arrow { color: var(--jj-rpp-muted); }
.jj-rpp-ml-guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; font-size: 11px; }
.jj-rpp-ml-guide-mark { display: inline-block; width: 18px; font-weight: 700; color: var(--jj-rpp-warn); }
.jj-rpp-wm-body { display: flex; flex-direction: column; gap: 6px; }
.jj-rpp-wm-section { border-radius: 4px; padding: 6px 10px; break-inside: avoid; }
.jj-rpp-wm-section--neutral { background: var(--jj-rpp-soft-bg); border-left: 3px solid rgb(203, 213, 225); }
.jj-rpp-wm-section--info { background: var(--jj-rpp-info-bg); border-left: 3px solid var(--jj-rpp-info); }
.jj-rpp-wm-section--good { background: var(--jj-rpp-good-bg); border-left: 3px solid var(--jj-rpp-good); }
.jj-rpp-wm-section--warn { background: var(--jj-rpp-warn-bg); border-left: 3px solid var(--jj-rpp-warn); }
.jj-rpp-wm-section-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--jj-rpp-muted); margin-bottom: 4px; }
.jj-rpp-wm-section--info .jj-rpp-wm-section-label { color: var(--jj-rpp-info); }
.jj-rpp-wm-section--good .jj-rpp-wm-section-label { color: var(--jj-rpp-good); }
.jj-rpp-wm-section--warn .jj-rpp-wm-section-label { color: var(--jj-rpp-warn); }
.jj-rpp-wm-section-body { font-size: 12px; line-height: 1.55; color: var(--jj-rpp-text); }
.jj-rpp-wm-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; }
.jj-rpp-wm-row-label { flex: 0 0 56px; font-size: 10.5px; font-weight: 700; color: var(--jj-rpp-muted); padding-top: 1px; }
.jj-rpp-wm-row-value { flex: 1 1 0%; }
.jj-rpp-wm-stem { font-size: 12px; font-weight: 600; }
.jj-rpp-wm-conditions { margin: 0px; padding-left: 18px; font-size: 11.5px; line-height: 1.6; }
.jj-rpp-wm-conditions > li + li { margin-top: 1px; }
.jj-rpp-wm-marked { display: flex; flex-wrap: wrap; gap: 4px; }
.jj-rpp-wm-marked-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgb(255, 255, 255); border: 1px solid var(--jj-rpp-border); border-radius: 10px; font-size: 11px; }
.jj-rpp-wm-marked-label { font-weight: 700; color: var(--jj-rpp-writing); }
.jj-rpp-wm-korean { font-size: 12px; color: var(--jj-rpp-text); padding: 2px 0px; }
.jj-rpp-wm-wordbank { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.jj-rpp-wm-wordbank-chip { display: inline-block; padding: 2px 8px; background: rgb(255, 255, 255); border: 1px solid var(--jj-rpp-border); border-radius: 3px; font-size: 11.5px; font-family: Pretendard, sans-serif; }
.jj-rpp-wm-defs { display: flex; flex-direction: column; gap: 3px; }
.jj-rpp-wm-def { display: grid; grid-template-columns: 32px 1fr auto; gap: 6px; align-items: center; font-size: 11.5px; }
.jj-rpp-wm-def-label { font-weight: 700; color: var(--jj-rpp-writing); }
.jj-rpp-wm-def-en { font-family: Pretendard, sans-serif; }
.jj-rpp-wm-def-hint { font-size: 10.5px; color: var(--jj-rpp-muted); font-family: monospace; }
.jj-rpp-wm-answer-form { background: rgb(255, 255, 255); border: 1px solid var(--jj-rpp-good-border); border-radius: 3px; padding: 6px 10px; min-height: 24px; font-size: 12px; line-height: 1.6; font-family: Pretendard, sans-serif; }
.jj-rpp-wm-detail-questions { display: flex; flex-direction: column; gap: 6px; }
.jj-rpp-wm-detail-q { background: rgb(255, 255, 255); border: 1px solid var(--jj-rpp-border); border-radius: 3px; padding: 6px 8px; }
.jj-rpp-wm-detail-q-stem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 500; margin-bottom: 3px; }
.jj-rpp-wm-detail-q-no { font-weight: 700; color: var(--jj-rpp-writing); background: var(--jj-rpp-info-bg); padding: 1px 6px; border-radius: 8px; font-size: 10.5px; }
.jj-rpp-wm-detail-q-limit { margin-left: auto; font-size: 10.5px; color: var(--jj-rpp-muted); }
.jj-rpp-wm-model-answer { background: rgb(255, 255, 255); border: 1px solid var(--jj-rpp-good-border); border-radius: 3px; padding: 6px 10px; font-size: 12.5px; line-height: 1.55; font-weight: 500; color: var(--jj-rpp-text); }
.jj-rpp-wm-answer-list, .jj-rpp-wm-correction-list { display: flex; flex-direction: column; gap: 4px; }
.jj-rpp-wm-answer-row, .jj-rpp-wm-correction-row { display: grid; grid-template-columns: 32px 1fr; gap: 6px; align-items: flex-start; padding: 4px 6px; background: rgb(255, 255, 255); border-radius: 3px; }
.jj-rpp-wm-answer-label { font-weight: 700; color: var(--jj-rpp-writing); padding-top: 1px; }
.jj-rpp-wm-answer-body { font-size: 11.5px; line-height: 1.55; }
.jj-rpp-wm-evidence, .jj-rpp-wm-reason { font-size: 11px; color: var(--jj-rpp-muted); margin-top: 1px; }
.jj-rpp-wm-correction-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jj-rpp-wm-correction-arrow { color: var(--jj-rpp-muted); font-weight: 700; }
.jj-rpp-wm-wrong { text-decoration: line-through; color: var(--jj-rpp-warn); }
.jj-rpp-wm-explanation { font-size: 11.5px; line-height: 1.6; color: var(--jj-rpp-text); }
.jj-rpp-wm-rubric-table { display: flex; flex-direction: column; gap: 2px; }
.jj-rpp-wm-rubric-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 3px 8px; background: rgb(255, 255, 255); border-radius: 3px; font-size: 11.5px; }
.jj-rpp-wm-rubric-criterion { color: var(--jj-rpp-text); }
.jj-rpp-wm-rubric-points { font-weight: 700; color: var(--jj-rpp-writing); }
.jj-rpp-wm-steps { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 4px; }
.jj-rpp-wm-step { display: grid; grid-template-columns: 24px 1fr; gap: 6px; align-items: start; background: rgb(255, 255, 255); border-radius: 3px; padding: 4px 8px; }
.jj-rpp-wm-step-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--jj-rpp-mode-explanation); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; }
.jj-rpp-wm-step-label { font-size: 11.5px; font-weight: 700; color: var(--jj-rpp-mode-explanation); margin-bottom: 1px; }
.jj-rpp-wm-step-content { font-size: 11.5px; line-height: 1.55; color: var(--jj-rpp-text); }
.jj-rpp-ml-step-num { display: inline-block; background: var(--jj-rpp-meaning); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-right: 6px; }
.jj-rpp-ml-step-label { font-size: 13px; font-weight: 700; color: var(--jj-rpp-meaning); }
.jj-rpp-ml-card--options { border-left-color: rgb(99, 102, 241); background: rgb(245, 247, 255); }
.jj-rpp-ml-card--answers { border-left-color: rgb(16, 185, 129); background: rgb(236, 253, 245); }
.jj-rpp-ml-card--hints { border-left-color: rgb(245, 158, 11); background: rgb(255, 251, 235); }
.jj-rpp-ml-card-hint { font-size: 10px; color: rgb(180, 83, 9); margin-left: 6px; font-weight: 400; }
.jj-rpp-ml-passage-body { font-size: 12.5px; line-height: 1.85; letter-spacing: 0.01em; }
.jj-rpp-ml-passage-line { margin: 0px 0px 4px; }
.jj-rpp-ml-sent-num { display: inline-block; font-weight: 700; color: var(--jj-rpp-meaning); margin-right: 4px; font-size: 12px; }
.jj-rpp-ml-marked-span { background: rgb(254, 243, 199); border-radius: 2px; padding: 0px 2px; font-weight: 500; }
.jj-rpp-ml-mark-num { font-size: 9px; color: rgb(185, 28, 28); font-weight: 700; margin-left: 1px; }
.jj-rpp-ml-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin-top: 4px; }
.jj-rpp-ml-option { display: flex; align-items: baseline; gap: 4px; padding: 2px 0px; font-size: 11px; line-height: 1.4; }
.jj-rpp-ml-option-letter { flex: 0 0 auto; font-weight: 700; color: var(--jj-rpp-meaning); }
.jj-rpp-ml-option-content { flex: 1 1 0%; }
.jj-rpp-ml-answer-grid { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 6px; padding: 4px 0px; }
.jj-rpp-ml-answer-slot { display: inline-flex; align-items: baseline; gap: 2px; font-size: 12px; }
.jj-rpp-ml-answer-filled { display: inline-block; min-width: 18px; padding: 0px 4px; border: 1px solid rgb(16, 185, 129); border-radius: 3px; background: rgb(220, 252, 231); color: rgb(6, 95, 70); font-weight: 700; text-align: center; }
.jj-rpp-ml-answer-blank { display: inline-block; min-width: 22px; border-bottom: 1px solid rgb(156, 163, 175); color: transparent; }
.jj-rpp-ml-skeleton-list { display: flex; flex-direction: column; gap: 6px; }
.jj-rpp-ml-skeleton-row { border: 1px dashed rgb(203, 213, 225); border-radius: 3px; padding: 4px 6px; background: rgb(255, 255, 255); }
.jj-rpp-ml-skeleton-header { display: flex; align-items: baseline; gap: 4px; font-size: 11px; color: rgb(71, 85, 105); margin-bottom: 2px; }
.jj-rpp-ml-skeleton-raw { font-style: italic; color: rgb(51, 65, 85); font-size: 11px; }
.jj-rpp-ml-skeleton-template { font-size: 12px; color: var(--jj-rpp-text); font-weight: 500; margin: 2px 0px; }
.jj-rpp-ml-skeleton-blanks { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.jj-rpp-ml-blank-slot { display: inline-flex; align-items: baseline; gap: 2px; }
.jj-rpp-ml-blank-line { display: inline-block; min-width: 70px; border-bottom: 1px solid rgb(156, 163, 175); color: transparent; }
.jj-rpp-ml-blank-filled { display: inline-block; padding: 0px 4px; border-bottom: 1px solid rgb(16, 185, 129); color: rgb(6, 95, 70); font-weight: 600; font-style: normal; }
.jj-rpp-ml-match-options, .jj-rpp-ml-summary-options { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.jj-rpp-ml-match-option, .jj-rpp-ml-summary-option { display: flex; align-items: baseline; gap: 6px; padding: 2px 0px; font-size: 11px; line-height: 1.45; }
.jj-rpp-ml-ref-items { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.jj-rpp-ml-ref-row { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; }
.jj-rpp-ml-rel-items { display: flex; flex-direction: column; gap: 4px; }
.jj-rpp-ml-rel-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 11.5px; }
.jj-rpp-ml-rel-spans { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; width: 100%; margin-top: 2px; font-size: 10.5px; }
.jj-rpp-ml-rel-type-options { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-top: 6px; padding-top: 4px; border-top: 1px dashed rgb(203, 213, 225); }
.jj-rpp-ml-evidence-block, .jj-rpp-ml-inference-block { margin-top: 6px; padding-top: 4px; border-top: 1px dashed rgb(203, 213, 225); }
.jj-rpp-ml-evidence-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.jj-rpp-ml-evidence-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; }
.jj-rpp-ml-checkbox { flex: 0 0 auto; font-size: 13px; font-family: "Segoe UI Symbol", "Apple Color Emoji", sans-serif; }
.jj-rpp-ml-inference-options { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.jj-rpp-ml-inf-option { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px; font-size: 11px; border-radius: 2px; }
.jj-rpp-ml-inf-option--correct { background: rgb(220, 252, 231); border: 1px solid rgb(16, 185, 129); }
.jj-rpp-ml-anchor-box { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 4px 6px; background: rgb(236, 254, 255); border: 1px solid var(--jj-rpp-meaning); border-radius: 4px; margin: 4px 0px; }
.jj-rpp-ml-anchor-item { display: inline-block; padding: 1px 6px; background: rgb(255, 255, 255); border-radius: 8px; border: 1px solid rgb(203, 213, 225); font-size: 10.5px; font-weight: 500; }
.jj-rpp-ml-chunk-slots { display: flex; flex-direction: column; gap: 3px; }
.jj-rpp-ml-chunk-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 11.5px; }
.jj-rpp-ml-chunk-label { flex: 0 0 auto; font-weight: 700; color: var(--jj-rpp-meaning); min-width: 60px; }
.jj-rpp-ml-chunk-range, .jj-rpp-ml-chunk-summary-slot { flex: 0 0 auto; }
.jj-rpp-ml-topic-options { display: flex; flex-direction: column; gap: 3px; }
.jj-rpp-ml-topic-option { display: flex; align-items: baseline; gap: 6px; padding: 3px 6px; font-size: 11.5px; border-radius: 2px; line-height: 1.45; }
.jj-rpp-ml-topic-option--correct { background: rgb(220, 252, 231); border: 1px solid rgb(16, 185, 129); font-weight: 600; }
.jj-rpp-ml-hint-list { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.jj-rpp-ml-hint-row { line-height: 1.5; }
.jj-rpp-ml-freewrite-list { display: flex; flex-direction: column; gap: 6px; }
.jj-rpp-ml-freewrite-row { display: flex; align-items: baseline; gap: 4px; font-size: 11.5px; }
.jj-rpp-ml-answer-blank--long { min-width: 280px; border-bottom: 1px solid rgb(156, 163, 175); }
.jj-rpp-ml-topic-freewrite { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.jj-rpp-ml-answer-blank--block { display: block; min-height: 36px; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(156, 163, 175); width: 100%; color: transparent; padding: 8px 0px; }
.jj-rpp-ml-answer-filled--block { display: block; padding: 8px 12px; border: 1px solid rgb(16, 185, 129); border-radius: 3px; background: rgb(220, 252, 231); color: rgb(6, 95, 70); font-weight: 600; line-height: 1.6; }
.jj-rpp-page { --jj-rpp-text: #111827; --jj-rpp-muted: #4B5563; --jj-rpp-hint: #9AA4B2; --jj-rpp-border: #D7DEE8; --jj-rpp-soft-bg: #F6F8FB; --jj-rpp-card-bg: #FFFFFF; --jj-rpp-rule: #CBD5E1; font-family: Pretendard, "Noto Sans KR", sans-serif; color: var(--jj-rpp-text); -webkit-font-smoothing: antialiased; text-rendering: geometricprecision; }
.jj-rpp-page .a4-page { box-shadow: none; border-radius: 0px; }
.jj-rpp-page .jj-page-header { margin-bottom: 10px; }
.jj-rpp-page .jj-header-line-top { height: 2px; margin-bottom: 10px; background: var(--theme-color, var(--jj-rpp-struct)); }
.jj-rpp-page .jj-header-line-bottom { height: 0.5pt; margin-top: 10px; margin-bottom: 12px; background: var(--jj-rpp-rule); }
.jj-rpp-page .jj-header-content { min-height: 46px; padding: 0px 2px; align-items: center; }
.jj-rpp-page .jj-header-left { gap: 10px; }
.jj-rpp-page .jj-header-title { font-size: 22px; font-weight: 850; letter-spacing: 0px; line-height: 1.2; color: var(--theme-color, var(--jj-rpp-struct)); }
.jj-rpp-page .jj-header-description { font-size: 11.5px; line-height: 1.35; color: var(--jj-rpp-muted); }
.jj-rpp-page .jj-header-logo { width: 64px !important; height: 42px !important; }
.jj-rpp-badge { border-radius: 2px; padding: 2px 7px; font-size: 10.5px; font-weight: 750; letter-spacing: 0px; }
.jj-rpp-meta { font-size: 10.8px; color: var(--jj-rpp-muted); }
.jj-rpp-step-label, .jj-rpp-ml-step-heading, .jj-rpp-writing-type-header { border-left-width: 4px; box-shadow: inset 0 -.5pt 0 var(--jj-rpp-border); }
.jj-rpp-step-label { border-left: 4px solid currentcolor; border-radius: 0px; padding: 3px 8px; background: var(--jj-rpp-soft-bg); }
.jj-rpp-card, .jj-rpp-struct-card, .jj-rpp-ml-card, .jj-rpp-writing-card, .jj-rpp-wm-section, .jj-rpp-wm-detail-q, .jj-rpp-wm-answer-row, .jj-rpp-wm-correction-row, .jj-rpp-wm-step, .jj-rpp-wm-rubric-row { border-color: var(--jj-rpp-border); }
.jj-rpp-card, .jj-rpp-struct-card, .jj-rpp-ml-card, .jj-rpp-writing-card { border-radius: 3px; box-shadow: rgba(15, 23, 42, 0.024) 0px 0px 0px 0.35pt; }
.jj-rpp-box { border-radius: 3px; padding: 8px 10px; }
.jj-rpp-chip, .jj-rpp-tag, .jj-rpp-code { border-radius: 2px; }
.jj-rpp-page.jj-rpp--struct { font-size: 13px; line-height: 1.35; }
.jj-rpp-page.jj-rpp--struct .jj-rpp-step { margin-bottom: 4px; }
.jj-rpp-page.jj-rpp--struct .jj-rpp-step-label { font-size: 11.4px; padding: 3px 8px; margin-bottom: 4px; }
.jj-rpp-struct-card { padding: 6px 8px; border-left: 3px solid rgb(216, 224, 236); }
.jj-rpp-struct-card--sub { background: rgb(252, 253, 254); }
.jj-rpp-struct-sentence-raw { font-size: 13.2px; line-height: 1.35; background: rgb(244, 247, 251); border-left-width: 3px; padding: 5px 8px; margin-bottom: 5px; }
.jj-rpp-struct-slot { border-color: rgb(220, 227, 237); background: rgb(255, 255, 255); padding: 3px 8px 4px; min-width: 68px; }
.jj-rpp-struct-slot:first-child { background: rgb(238, 244, 255); border-color: rgb(201, 215, 240); }
.jj-rpp-struct-slot strong { font-size: 9.8px; color: var(--jj-rpp-muted); }
.jj-rpp-struct-slot em { font-size: 12.4px; color: rgb(17, 24, 39); }
.jj-rpp-struct-chunk-row, .jj-rpp-struct-detail-row { border-bottom-color: rgb(231, 236, 243); }
.jj-rpp-struct-detail-row { font-size: 9.6px; }
.jj-rpp-struct-detail-cell-trap { font-size: 9.2px; }
.jj-rpp-struct-pos-legend { border-color: rgb(202, 212, 226); background: rgb(248, 250, 253); }
.jj-rpp-struct-pos-item { background: rgb(255, 255, 255); border-color: rgb(220, 227, 237); }
.jj-rpp-struct-trap-note { border-left-width: 3px; background: rgb(255, 247, 237); }
.jj-rpp-ml-step-heading { background: linear-gradient(90deg,color-mix(in srgb,var(--jj-rpp-meaning) 9%,#fff),#fff); padding: 5px 10px; margin: 6px 0px 4px; border-radius: 0px; }
.jj-rpp-ml-card { padding: 7px 10px; border-left-width: 4px; }
.jj-rpp-ml-card-header { border-bottom-color: rgb(221, 229, 239); padding-bottom: 4px; margin-bottom: 5px; }
.jj-rpp-ml-card-marker { width: 18px; height: 18px; border-radius: 3px; }
.jj-rpp-meaning-passage, .jj-rpp-writing-passage, .jj-rpp-writing-shared-passage { background: rgb(246, 250, 253); border-left-width: 4px; }
.jj-rpp-ml-card-label, .jj-rpp-wm-row-label { color: rgb(100, 116, 139); }
.jj-rpp-writing-type-header { padding: 6px 10px; margin: 8px 0px 3px; background: linear-gradient(90deg,color-mix(in srgb,var(--jj-rpp-writing) 8%,#fff),#fff); border-radius: 0px; }
.jj-rpp-writing-type-label { font-size: 12.8px; }
.jj-rpp-writing-type-score { border-color: rgb(215, 222, 232); background: rgb(255, 255, 255); }
.jj-rpp-wm-section { border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left-width: 4px; padding: 7px 10px; }
.jj-rpp-wm-section-label { letter-spacing: 0px; text-transform: none; font-size: 10.8px; }
.jj-rpp-wm-answer-form, .jj-rpp-wm-model-answer, .jj-rpp-wm-detail-q, .jj-rpp-wm-answer-row, .jj-rpp-wm-correction-row, .jj-rpp-wm-rubric-row, .jj-rpp-wm-step { border: 0.5pt solid rgb(225, 231, 240); }
.jj-rpp-page { --jj-rpp-ink: #111827; --jj-rpp-ink-soft: #374151; --jj-rpp-caption: #667085; --jj-rpp-rule: #D3DAE6; --jj-rpp-rule-strong: #B8C3D4; --jj-rpp-paper-soft: #F7F9FC; --jj-rpp-paper-tint: #FBFCFE; --jj-rpp-answer-bg: #F0FDF4; --jj-rpp-answer-border: #9AE6B4; --jj-rpp-radius-card: 3px; --jj-rpp-radius-pill: 3px; --jj-rpp-font-xxs: 9.8px; --jj-rpp-font-xs: 10.8px; --jj-rpp-font-sm: 11.6px; --jj-rpp-font-body: 12.4px; --jj-rpp-font-lead: 13.2px; color: var(--jj-rpp-ink); font-variant-numeric: tabular-nums; print-color-adjust: exact; }
.jj-rpp-page .a4-page { background: rgb(255, 255, 255); overflow: hidden; }
.jj-rpp-page .a4-page::before { content: ""; position: absolute; top: 20mm; bottom: 15mm; left: 10.5mm; width: 0.5pt; background: var(--jj-rpp-rule); }
.jj-rpp-page .jj-page-header { margin-bottom: 8px; }
.jj-rpp-page .jj-header-line-top { height: 3px; margin-bottom: 8px; background: var(--theme-color, var(--jj-rpp-struct)); }
.jj-rpp-page .jj-header-line-bottom { height: 0.5pt; margin-top: 8px; margin-bottom: 10px; background: var(--jj-rpp-rule-strong); }
.jj-rpp-page .jj-header-content { min-height: 48px; padding: 0px 2px 1px; }
.jj-rpp-page .jj-header-title { font-size: 21px; font-weight: 850; letter-spacing: 0px; line-height: 1.18; color: var(--theme-color, var(--jj-rpp-struct)); }
.jj-rpp-page .jj-header-description { font-size: 11.2px; line-height: 1.4; color: var(--jj-rpp-caption); }
.jj-rpp-page .jj-header-logo { width: 62px !important; height: 40px !important; }
.jj-rpp-meta-bar { display: flex; align-items: center; gap: 8px; min-height: 26px; margin: 0px 0px 2px; padding: 5px 8px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 4px solid var(--theme-color, var(--jj-rpp-struct)); border-radius: var(--jj-rpp-radius-card); background: var(--jj-rpp-paper-soft); break-inside: avoid; }
.jj-rpp-meta-items { display: flex; align-items: center; flex-wrap: wrap; gap: 0px; min-width: 0px; color: var(--jj-rpp-caption); font-size: var(--jj-rpp-font-xs); line-height: 1.35; }
.jj-rpp-meta-item { display: inline-flex; align-items: center; min-width: 0px; }
.jj-rpp-meta-item + .jj-rpp-meta-item::before { content: ""; display: inline-block; width: 1px; height: 9px; margin: 0px 7px; background: var(--jj-rpp-rule-strong); }
.jj-rpp-badge { flex: 0 0 auto; border-radius: var(--jj-rpp-radius-pill); padding: 2px 7px 2.5px; font-size: var(--jj-rpp-font-xs); line-height: 1.25; font-weight: 800; letter-spacing: 0px; }
.jj-rpp-step-label, .jj-rpp-ml-step-heading, .jj-rpp-writing-type-header { border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 4px solid currentcolor; border-radius: var(--jj-rpp-radius-card); background: var(--jj-rpp-paper-soft); box-shadow: none; }
.jj-rpp-step-label { color: var(--theme-color, var(--jj-rpp-struct)); font-size: var(--jj-rpp-font-sm); line-height: 1.35; }
.jj-rpp-ml-step-heading { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 5px 9px; margin: 8px 0px 4px; color: var(--jj-rpp-meaning); background: rgb(244, 251, 253); }
.jj-rpp-ml-step-num { border-radius: 2px; padding: 2px 6px; background: var(--jj-rpp-meaning); color: rgb(255, 255, 255); font-size: var(--jj-rpp-font-xs); line-height: 1.15; }
.jj-rpp-ml-step-label { font-size: var(--jj-rpp-font-body); line-height: 1.35; }
.jj-rpp-writing-type-header { min-height: 30px; padding: 6px 10px; margin: 8px 0px 3px; color: var(--jj-rpp-writing); background: rgb(246, 248, 252); }
.jj-rpp-card, .jj-rpp-struct-card, .jj-rpp-ml-card, .jj-rpp-writing-card, .jj-rpp-wm-section, .jj-rpp-wm-detail-q, .jj-rpp-wm-answer-row, .jj-rpp-wm-correction-row, .jj-rpp-wm-step, .jj-rpp-wm-rubric-row { border-color: var(--jj-rpp-rule); border-radius: var(--jj-rpp-radius-card); box-shadow: none; }
.jj-rpp-card, .jj-rpp-struct-card, .jj-rpp-ml-card, .jj-rpp-writing-card { background: rgb(255, 255, 255); }
.jj-rpp-struct-card { border-left-color: rgb(215, 224, 236); padding: 6px 8px; }
.jj-rpp-struct-card--sub { background: var(--jj-rpp-paper-tint); }
.jj-rpp-struct-sentence-raw, .jj-rpp-meaning-passage, .jj-rpp-writing-passage, .jj-rpp-writing-shared-passage, .jj-rpp-ml-card-raw { background: var(--jj-rpp-paper-soft); border-left-width: 4px; border-radius: 2px; }
.jj-rpp-struct-sentence-raw { font-size: var(--jj-rpp-font-lead); line-height: 1.38; padding: 5px 8px; }
.jj-rpp-struct-slot { border-color: rgb(220, 227, 237); background: rgb(255, 255, 255); }
.jj-rpp-struct-slot:first-child { background: rgb(241, 246, 255); }
.jj-rpp-struct-slot strong, .jj-rpp-struct-chunk-header span, .jj-rpp-struct-detail-header span { color: var(--jj-rpp-caption); }
.jj-rpp-struct-slot em, .jj-rpp-struct-chunk-phrase, .jj-rpp-struct-translation, .jj-rpp-ml-card-title, .jj-rpp-wm-section-body { color: var(--jj-rpp-ink); }
.jj-rpp-struct-chunk-table, .jj-rpp-struct-detail-table { border: 0.5pt solid rgb(226, 232, 240); border-radius: var(--jj-rpp-radius-card); overflow: hidden; }
.jj-rpp-struct-chunk-header, .jj-rpp-struct-detail-header { background: rgb(241, 245, 250); }
.jj-rpp-struct-pos-legend { border-style: solid; background: rgb(251, 252, 254); }
.jj-rpp-struct-pos-item { background: rgb(255, 255, 255); }
.jj-rpp-ml-card { padding: 8px 10px; border-left-width: 4px; line-height: 1.52; }
.jj-rpp-ml-card-header { min-height: 22px; padding-bottom: 5px; margin-bottom: 6px; border-bottom: 0.5pt solid rgb(221, 229, 239); }
.jj-rpp-ml-card-title { font-size: var(--jj-rpp-font-body); line-height: 1.35; }
.jj-rpp-ml-card-idx, .jj-rpp-ml-card-marker, .jj-rpp-ml-option-letter, .jj-rpp-ml-sent-num { color: var(--jj-rpp-meaning); }
.jj-rpp-ml-card-idx { border: 0.5pt solid rgb(201, 238, 245); border-radius: var(--jj-rpp-radius-pill); background: rgb(240, 252, 254); }
.jj-rpp-ml-card-marker { border-radius: var(--jj-rpp-radius-pill); background: var(--jj-rpp-meaning); color: rgb(255, 255, 255); }
.jj-rpp-ml-card-label, .jj-rpp-wm-row-label, .jj-rpp-wm-section-label { color: var(--jj-rpp-caption); font-weight: 800; }
.jj-rpp-ml-options-grid, .jj-rpp-ml-match-options, .jj-rpp-ml-summary-options, .jj-rpp-ml-topic-options { border-top: 0.5pt solid rgb(227, 233, 242); padding-top: 5px; }
.jj-rpp-ml-answer-filled, .jj-rpp-ml-blank-filled, .jj-rpp-good-text { color: rgb(5, 96, 58); }
.jj-rpp-ml-answer-filled, .jj-rpp-ml-answer-filled--block { border-color: var(--jj-rpp-answer-border); background: var(--jj-rpp-answer-bg); }
.jj-rpp-blank, .jj-rpp-ml-answer-blank, .jj-rpp-ml-blank-line, .jj-rpp-struct-detail-blank, .jj-rpp-struct-chunk-blank, .jj-rpp-struct-translation-blank { border-bottom-color: rgb(125, 135, 148); }
.jj-rpp-chip, .jj-rpp-tag, .jj-rpp-code, .jj-rpp-wm-marked-chip, .jj-rpp-wm-wordbank-chip, .jj-rpp-ml-anchor-item { border-radius: var(--jj-rpp-radius-pill); }
.jj-rpp-code { border: 0.5pt solid rgb(226, 232, 240); background: rgb(255, 255, 255); }
.jj-rpp-wm-section { padding: 7px 10px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left-width: 4px; }
.jj-rpp-wm-section--neutral { background: rgb(248, 250, 252); border-left-color: rgb(170, 180, 195); }
.jj-rpp-wm-section--info { background: rgb(243, 248, 255); border-left-color: rgb(37, 99, 235); }
.jj-rpp-wm-section--good { background: rgb(242, 251, 245); border-left-color: rgb(22, 163, 74); }
.jj-rpp-wm-section--warn { background: rgb(255, 248, 237); border-left-color: rgb(217, 119, 6); }
.jj-rpp-wm-section-label { margin-bottom: 5px; font-size: var(--jj-rpp-font-xs); letter-spacing: 0px; text-transform: none; }
.jj-rpp-wm-answer-form, .jj-rpp-wm-model-answer, .jj-rpp-wm-detail-q, .jj-rpp-wm-answer-row, .jj-rpp-wm-correction-row, .jj-rpp-wm-rubric-row, .jj-rpp-wm-step { background: rgb(255, 255, 255); border: 0.5pt solid rgb(225, 231, 240); }
.jj-rpp-writing-shared-passage { border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 4px solid var(--jj-rpp-writing); background: rgb(247, 250, 254); }
.jj-rpp-writing-shared-passage-label { color: var(--jj-rpp-writing); font-size: var(--jj-rpp-font-xs); }
.jj-rpp-page .page-number-bottom-left, .jj-rpp-page .page-number-bottom-right { bottom: 8mm; color: rgb(107, 114, 128); font-family: Pretendard, "Noto Sans KR", sans-serif; font-size: 9.8px; line-height: 1; letter-spacing: 0px; }
.jj-rpp-page .page-number-bottom-left { left: 15mm; max-width: 120mm; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jj-rpp-page .page-number-bottom-right { right: 15mm; }
.gf-title-bar { padding: 0px 32px; }
.gf-title-main { padding: 10px 14px; border-radius: 4px; margin-bottom: 8px; }
.gf-title-text { font-size: calc(13px * var(--font-scale, 1)); font-weight: 700; color: var(--theme-color, #0F4C81); }
.gf-title-meta { font-size: calc(9.5px * var(--font-scale, 1)); color: rgb(107, 114, 128); margin-top: 2px; }
.gf-sentence-block { padding: 6px 32px 2px; }
.gf-sentence-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.gf-sentence-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; margin-top: 1px; }
.gf-sentence-text { font-size: calc(10.5px * var(--font-scale, 1)); color: rgb(31, 41, 55); line-height: 1.7; font-weight: 500; }
.gf-sentence-translation { font-size: calc(9px * var(--font-scale, 1)); color: rgb(156, 163, 175); margin-left: 30px; margin-bottom: 4px; line-height: 1.5; }
.gf-point-child { padding-top: 0px; padding-bottom: 0px; }
.gf-points-container { margin-left: 30px; margin-bottom: 8px; border: 1px solid rgb(229, 231, 235); border-radius: 4px; overflow: hidden; }
.gf-point-row { display: flex; border-bottom: 1px solid rgb(243, 244, 246); }
.gf-point-row:last-child { border-bottom: none; }
.gf-point-color-bar { width: 4px; flex-shrink: 0; }
.gf-point-content { flex: 1 1 0%; padding: 5px 10px; }
.gf-point-header-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gf-point-cat-name { font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 700; }
.gf-point-phrase { font-size: calc(10px * var(--font-scale, 1)); color: rgb(31, 41, 55); font-weight: 500; }
.gf-point-freq { font-size: calc(8.5px * var(--font-scale, 1)); font-weight: 600; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.gf-point-freq[data-freq="최빈출"] { color: rgb(220, 38, 38); background: rgb(254, 242, 242); border: 1px solid rgb(254, 202, 202); }
.gf-point-freq[data-freq="빈출"] { color: rgb(217, 119, 6); background: rgb(255, 251, 235); border: 1px solid rgb(253, 230, 138); }
.gf-point-freq[data-freq="보통"] { color: rgb(107, 114, 128); background: rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); }
.gf-point-explanation { font-size: calc(9.5px * var(--font-scale, 1)); color: rgb(55, 65, 81); line-height: 1.6; margin-top: 2px; }
.gf-point-extra { font-size: calc(9px * var(--font-scale, 1)); color: rgb(107, 114, 128); margin-top: 2px; line-height: 1.5; }
.gf-point-extra-label { font-weight: 600; color: rgb(75, 85, 99); }
.gf-point-quicknote { font-size: calc(9px * var(--font-scale, 1)); color: rgb(8, 145, 178); margin-top: 2px; font-weight: 500; }
.gf-point-exam { color: rgb(194, 65, 12); }
.gf-point-trap { color: rgb(185, 28, 28); }
.gf-summary-section { padding: 4px 32px; }
.gf-summary-title { font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; color: var(--theme-color, #0F4C81); padding: 8px 12px; border-radius: 4px; margin-bottom: 8px; }
.gf-summary-table { width: 100%; border-collapse: collapse; font-size: calc(9.5px * var(--font-scale, 1)); }
.gf-th { text-align: left; padding: 6px 10px; font-weight: 700; color: rgb(55, 65, 81); border-bottom: 2px solid; font-size: calc(9px * var(--font-scale, 1)); }
.gf-th-center { text-align: center; }
.gf-td { padding: 5px 10px; border-bottom: 1px solid rgb(243, 244, 246); vertical-align: middle; }
.gf-td-color { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.gf-td-center { text-align: center; font-weight: 600; color: rgb(55, 65, 81); }
.gf-td-indices { color: rgb(107, 114, 128); font-size: calc(9px * var(--font-scale, 1)); }
.gf-exam-tips { padding: 8px 32px; }
.gf-exam-tips-title { font-size: calc(11px * var(--font-scale, 1)); font-weight: 700; margin-bottom: 6px; }
.gf-exam-tips-list { padding-left: 20px; margin: 0px; }
.gf-exam-tip-item { font-size: calc(9.5px * var(--font-scale, 1)); color: rgb(55, 65, 81); line-height: 1.7; margin-bottom: 4px; }
.rg-guide-card { padding: 4px 32px 16px; display: flex; flex-direction: column; flex: 1 1 0%; gap: 8px; }
.rg-guide-card.rg-compact { padding: 0px 32px; gap: 0px; }
.rg-continuation { margin-left: 10px; padding-left: 10px; border-left: 2px solid rgb(229, 231, 235); }
.rg-guide-title { padding: 8px 12px; border-radius: 4px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
.rg-guide-title-text { font-size: calc(13px * var(--font-scale, 1)); font-weight: 700; color: var(--theme-color, #0F4C81); }
.rg-guide-meta { display: flex; gap: 6px; }
.rg-meta-tag { font-size: calc(9px * var(--font-scale, 1)); font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.rg-section-block { margin-bottom: 8px; }
.rg-section-heading { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 3px; margin-bottom: 4px; }
.rg-section-icon { font-size: calc(11px * var(--font-scale, 1)); }
.rg-section-title { font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; color: rgb(31, 41, 55); }
.rg-section-time { font-size: calc(9px * var(--font-scale, 1)); color: rgb(156, 163, 175); margin-left: 4px; }
.rg-instruction { font-size: calc(10px * var(--font-scale, 1)); color: rgb(75, 85, 99); padding: 6px 10px; margin: 0px 10px 4px; border: 1px solid; border-radius: 4px; line-height: 1.6; font-style: italic; }
.rg-points { padding: 4px 10px; }
.rg-point-item { display: flex; gap: 8px; margin-bottom: 6px; align-items: flex-start; }
.rg-point-num { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgb(243, 244, 246); display: flex; align-items: center; justify-content: center; font-size: calc(9px * var(--font-scale, 1)); font-weight: 700; margin-top: 1px; }
.rg-point-content { flex: 1 1 0%; min-width: 0px; }
.rg-point-text { font-size: calc(10px * var(--font-scale, 1)); color: rgb(31, 41, 55); line-height: 1.7; }
.rg-point-highlight { display: inline-block; font-size: calc(9px * var(--font-scale, 1)); font-weight: 600; margin-top: 2px; padding: 1px 6px; border-left: 2px solid; border-radius: 2px; background: rgb(255, 251, 235); }
.rg-point-example { font-size: calc(9px * var(--font-scale, 1)); color: rgb(107, 114, 128); margin-top: 2px; padding-left: 10px; border-left: 2px solid rgb(229, 231, 235); line-height: 1.6; }
.rg-point-example-label { font-weight: 600; color: rgb(156, 163, 175); }
.rg-student-check { padding: 4px 10px; }
.rg-check-question { font-size: calc(10px * var(--font-scale, 1)); color: rgb(31, 41, 55); padding: 2px 0px; line-height: 1.6; }
.rg-check-encouragement { font-size: calc(9.5px * var(--font-scale, 1)); color: rgb(75, 85, 99); padding: 6px 10px; margin-top: 4px; border: 1px solid; border-radius: 4px; font-style: italic; }
.rg-summary { padding: 8px 10px; margin-top: 4px; }
.rg-summary-row { display: flex; align-items: flex-start; gap: 6px; font-size: calc(9.5px * var(--font-scale, 1)); margin-bottom: 4px; }
.rg-summary-icon { font-size: calc(10px * var(--font-scale, 1)); flex-shrink: 0; }
.rg-summary-label { font-weight: 700; color: rgb(55, 65, 81); white-space: nowrap; flex-shrink: 0; }
.rg-summary-text { color: rgb(107, 114, 128); line-height: 1.6; }
.rg-summary-highlight { font-weight: 600; }
@keyframes go2264125279 { 
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  100% { transform: scale(1) rotate(45deg); opacity: 1; }
}
@keyframes go3020080000 { 
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes go463499852 { 
  0% { transform: scale(0) rotate(90deg); opacity: 0; }
  100% { transform: scale(1) rotate(90deg); opacity: 1; }
}
@keyframes go1268368563 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes go1310225428 { 
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  100% { transform: scale(1) rotate(45deg); opacity: 1; }
}
@keyframes go651618207 { 
  0% { height: 0px; width: 0px; opacity: 0; }
  40% { height: 0px; width: 6px; opacity: 1; }
  100% { opacity: 1; height: 10px; }
}
@keyframes go901347462 { 
  0% { transform: scale(0.6); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}
.go4109123758 { z-index: 9999; }
.go4109123758 > * { pointer-events: auto; }
.pin-card { break-inside: avoid; }
.pinset-pdf-layout sup { line-height: 0; }
 @keyframes go2264125279{from{transform:scale(0) rotate(45deg);opacity:0;}to{transform:scale(1) rotate(45deg);opacity:1;}}@keyframes go3020080000{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}@keyframes go463499852{from{transform:scale(0) rotate(90deg);opacity:0;}to{transform:scale(1) rotate(90deg);opacity:1;}}@keyframes go1268368563{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes go1310225428{from{transform:scale(0) rotate(45deg);opacity:0;}to{transform:scale(1) rotate(45deg);opacity:1;}}@keyframes go651618207{0%{height:0;width:0;opacity:0;}40%{height:0;width:6px;opacity:1;}100%{opacity:1;height:10px;}}@keyframes go901347462{from{transform:scale(0.6);opacity:0.4;}to{transform:scale(1);opacity:1;}}.go4109123758{z-index:9999;}.go4109123758 > *{pointer-events:auto;}

.pin-card { break-inside: avoid; page-break-inside: avoid; }
.pinset-pdf-layout sup { line-height: 0; }