/* 생성 파일: tools/design/analysis.css 수정 후 node tools/build-design-t1.mjs */
/* Content-only rules: the shared title band, menu and footer remain site-owned. */
/* Lesson documents stay opaque white over the section's exterior tint. */
html body.t1 .fx-page-analysis[data-lesson-id] .analysis-workspace :is(
 .analysis-tab-panel,#syntax-content,.parse-view,.parse-passage,.parse-table,.parse-section,.parse-center,.parse-right,.analysis-items,
 .preview-paper-surface,.ex-sheet,.ex-q,.preview-reading,.it-card,.it-main,.it-side,
 .analysis-saved-group
){background:#fff!important}
html body.t1 .fx-page-analysis[data-lesson-id] .analysis-workspace :is(
 .analysis-tab-panel,#syntax-content,.preview-paper-surface,.preview-reading,.it-card,.analysis-saved-group
){border:1px solid #d8dadd}
html body.t1 .fx-page-analysis[data-lesson-id] .analysis-workspace :is(.preview-workspace>.it-main,.preview-workspace>.it-side,.ex-sheet){border:1px solid #d8dadd}
html body.t1 .fx-page-analysis[data-lesson-id] #syntax-content{padding:16px;border-radius:8px}
html body.t1 .fx-page-analysis[data-lesson-id] .preview-reading{padding:12px;border-radius:8px}
.analysis-directory, .analysis-workspace { min-width: 0; margin-block: var(--s3); }
.analysis-directory [hidden], .analysis-workspace [hidden] { display: none !important; }
.analysis-help { margin-block: var(--s1) var(--s2); font: var(--t5); }
#analysis-status { margin-bottom: var(--s2); font: var(--t5); }
.analysis-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); margin-bottom: var(--s1); }
.analysis-grade { min-height: var(--touch); border: var(--line) solid var(--ink); border-radius: var(--r); background: var(--paper); color: var(--ink); font: var(--t4); font-weight: 700; cursor: pointer; }
.analysis-grade[aria-pressed="true"], .analysis-book[aria-pressed="true"] { background: rgba(16,40,72,.18); color: var(--ink); border-color: var(--navy); }
.analysis-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s1); margin-bottom: var(--s1); }
.analysis-book { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: var(--touch); padding: var(--s1) var(--s2); border: var(--line) solid var(--surface); border-radius: var(--r); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.analysis-book-name { font: var(--t5); font-weight: 700; overflow-wrap: anywhere; }
.analysis-lesson-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s1); }
.analysis-scoped .analysis-grades, .analysis-scoped .analysis-books { display: none; }
.analysis-count { font: var(--t6); font-weight: 400; white-space: nowrap; }
.analysis-lesson-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--touch); padding: var(--s1); border: var(--line) solid var(--ink); border-radius: var(--r); color: var(--ink); text-decoration: none; font-weight: 700; }
@media (hover: hover) { .analysis-lesson-link:hover, .analysis-book:not([aria-pressed="true"]):hover, .analysis-grade:not([aria-pressed="true"]):hover { background: var(--surface); } }
.analysis-directory :is(button, a):focus-visible, .analysis-workspace :is(button, a, input, [tabindex]):focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.analysis-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--glass-line); }
.analysis-tabs button { min-height: 52px; padding: var(--s1); background: var(--paper); color: var(--ink); border: 0; cursor: pointer; font-weight: 700; }

.analysis-tab-panel { padding-block: var(--s3); min-width: 0; }
.analysis-empty { padding: var(--s4) var(--s3); background: var(--surface); border-radius: var(--r); display: grid; gap: var(--s1); }
.analysis-empty p { max-width: 56ch; }
.analysis-layers { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0 0 var(--s3); padding: var(--s2); border: var(--line) solid var(--ink); border-radius: var(--r); }
.analysis-layers label, #sentence-picker label { display: flex; align-items: center; gap: var(--s1); min-height: var(--touch); cursor: pointer; }
.analysis-workspace input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--navy); }
.analysis-sentence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--s3); padding-block: var(--s3); border-bottom: var(--line) solid var(--surface); }
.analysis-sentence > div { min-width: 0; }
.analysis-column-title { font: var(--t6); font-weight: 700; margin-bottom: var(--s1); }
.analysis-sentence p { overflow-wrap: anywhere; }
.analysis-notes { display: grid; gap: var(--s1); font: var(--t5); }
.analysis-english { font-size: 18px; line-height: 3.2; overflow-wrap: anywhere; }
.analysis-word { position: relative; display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.analysis-role { position: absolute; left: 0; top: -0.05em; font-size: 11px; line-height: 1; color: var(--navy); font-weight: 700; }
.analysis-mark { position: absolute; bottom: 0.7em; left: 0; right: 0; border-bottom: 1px solid var(--navy); }
/* Visibility preserves every text box and column: layer toggles cannot reflow sentences. */
.analysis-layer-off { visibility: hidden; }
.analysis-passage { margin-top: var(--s3); }
.analysis-summary { padding: var(--s2); margin-block: var(--s2); background: var(--surface); border-radius: var(--r); }
.analysis-field { display: grid; gap: var(--s1); margin-block: var(--s2); max-width: 480px; }
.analysis-field input { min-height: var(--touch); width: 100%; padding: var(--s1) var(--s2); border: var(--line) solid var(--ink); border-radius: var(--r); color: var(--ink); background: var(--paper); }
.analysis-picker { border: var(--line) solid var(--ink); border-radius: var(--r); margin: var(--s2) 0; padding: var(--s2); }
#sentence-picker label { align-items: flex-start; padding-block: var(--s1); }
#sentence-picker input { margin-top: 3px; }
.analysis-action { min-height: var(--touch); padding: var(--s1) var(--s2); color: var(--paper); background: var(--navy); border: var(--line) solid var(--navy); border-radius: var(--r); cursor: pointer; }
.analysis-action:disabled { opacity: .55; cursor: not-allowed; }
#group-status { margin-top: var(--s1); }
.analysis-saved-groups { display: grid; gap: var(--s2); margin-top: var(--s3); }
.analysis-saved-group { padding: var(--s2); border: var(--line) solid var(--ink); border-radius: var(--r); }
.analysis-saved-group ul { padding-left: var(--s3); margin-block: var(--s2); }
@media (max-width: 600px) {
  .analysis-disclosure { gap: var(--s1); padding: var(--s2) var(--s1); flex-wrap: wrap; }
  .analysis-grade > h3 > .analysis-disclosure > .analysis-count { flex-basis: 100%; order: 3; }
  .analysis-textbook { margin-inline: var(--s1); }
  .analysis-textbook .analysis-count { font: var(--t6); }
  .analysis-lessons { padding-left: var(--s1); }
  .analysis-lesson-link { padding-inline: var(--s1); }
  .analysis-sentence { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .analysis-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); overflow-x: auto; }
  .analysis-tabs button { font: var(--t5); font-weight: 700; white-space: nowrap; }
  .analysis-empty { padding: var(--s3) var(--s2); }
}

@media (max-width: 600px) {
  .analysis-lesson-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .analysis-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analysis-directory > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .analysis-directory .analysis-help { margin-block: 0 var(--s1); font: var(--t6); }
  #analysis-status { margin-bottom: var(--s1); font: var(--t6); }
}

/* Selected state = navy fill + white text in every interaction state (hover/focus/active stay navy). */
body.t1 .analysis-book { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: var(--s1) !important; padding-block: var(--s1) !important; min-height: var(--touch) !important; }
body.t1 .analysis-book-name { display: flex; flex-direction: column; gap: 0; min-width: 0; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font: var(--t6); font-weight: 700; }
body.t1 .analysis-book-subject, body.t1 .analysis-book-publisher { display: block; overflow-wrap: anywhere; }
body.t1 .analysis-book-publisher { font-weight: 400; }
body.t1 .analysis-book .analysis-count { flex: none; }

/* Pressed grade chip: navy + white in every state (touch :hover must never win). */

.analysis-selected-book { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); margin-block: var(--s1); font: var(--t6); }
.analysis-library-link { display: inline-flex; align-items: center; min-height: var(--touch); text-underline-offset: 3px; }
.analysis-coming { display: block; margin-top: var(--s1); font: var(--t6); }
.analysis-local-groups { margin-bottom: var(--s2); min-width: 0; }
.analysis-local-groups > summary { min-height: var(--touch); padding-block: var(--s1); cursor: pointer; font: var(--t5); font-weight: 700; }
#sentence-picker { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
#sentence-picker span, .analysis-saved-group { min-width: 0; overflow-wrap: anywhere; }
.analysis-export-actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin-block: var(--s2) var(--s1); }
#export-status { font: var(--t5); }
#group-export-text { width: 100%; min-width: 0; font: var(--t5); padding: var(--s1); }
.analysis-print-frame { position: fixed; width: 1px; height: 1px; border: 0; left: -10000px; top: 0; }
.analysis-workspace a.analysis-action { display: inline-flex; align-items: center; width: fit-content; }
.analysis-workspace summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* Allow the local group tools to expand while item panes retain independent scrolling. */
html body.analysis-items-active { overflow: auto; }
html body.analysis-items-active .analysis-tab-panel:not([hidden]) { overflow: visible; }
/* V3 toggle labels keep their look but get a 40px real hit area on touch. */
.v3 .tg label { position: relative; min-height: 32px; display: inline-flex; align-items: center; }
.v3 .tg label::before { content: ''; position: absolute; inset: -4px 0; }
/* Touch targets (director 11:01): V3 toggles and passage prev/next are 40px tall. */
.v3 .tg label { min-height: 40px !important; padding-inline: 14px !important; }
.analysis-items :is(button, select):not(.ht-chip) { min-height: 40px; }
/* Lessons own the vertical flow: foundation's flex gap and shared title-band
   margins otherwise accumulate even when the breadcrumb precedes the band. */
body.t1 .fx-work.fx-page-analysis[data-lesson-id] {
  display: flex !important; flex-direction: column !important;
  justify-content: flex-start !important; gap: 0 !important;
}
body.t1 .fx-page-analysis[data-lesson-id] > .fx-crumbs {
  order: -2 !important; margin: 0 0 8px !important; padding-block: 0 !important;
}
/* Lesson headers stay low and span the workspace. */
body.t1 .fx-page-analysis[data-lesson-id] > .fx-band-b {
  order: -1 !important; flex: none !important; width: 100%;
  margin: 0 0 24px !important;
  mask-image: none; -webkit-mask-image: none; border-radius: 0;
}
body.t1 .fx-page-analysis[data-lesson-id] > .fx-band-b .fx-hero {
  width: 100%; max-width: none; min-height: 128px;
  padding: 24px 128px 24px 32px !important; align-items: center;
}
body.t1 .fx-page-analysis[data-lesson-id] .fx-hero h1 {
  margin: 0; font-size: 36px; line-height: 1.3; text-wrap: wrap;
}
body.t1 .fx-page-analysis[data-lesson-id] .fx-hero::after {
  width: 80px; height: 64px; right: 24px; top: 50%; transform: translateY(-50%);
}
@media (max-width: 700px) {
  body.t1 .fx-page-analysis[data-lesson-id] > .fx-band-b .fx-hero { padding: 20px 88px 20px 20px !important; }
  body.t1 .fx-page-analysis[data-lesson-id] .fx-hero h1 { font-size: 28px; }
  body.t1 .fx-page-analysis[data-lesson-id] .fx-hero::after { width: 48px; height: 40px; right: 20px; }
}
body.t1 .fx-page-analysis[data-lesson-id] .v3 .topbar h1 { display: none !important; }
body.t1 .fx-page-analysis .analysis-workspace { margin-block: 0 !important; }
body.t1 .fx-page-analysis .analysis-tab-panel { padding-block: 0 !important; }
body.t1 .fx-page-analysis .v3 .book { padding-top: 0 !important; }
body.t1 .fx-page-analysis .v3 .topbar { margin-top: 0 !important; }

/* Lesson screens: the footer follows the content directly (no viewport-tall empty area). */
body.t1 .fx-work.fx-page-analysis[data-lesson-id] { min-height: 0 !important; }
body.t1 .fx-work.fx-page-analysis[data-lesson-id] > .launch-legal-footer { margin-top: var(--s4) !important; }
@media (max-width: 700px) { body.t1 #sentence-picker { max-height: none !important; overflow: visible !important; } }

/* 선택색은 tools/design/t1.css의 공통 글래스 규칙(배경 14%, 테두리 86%)을 따른다. */
html body.t1 .analysis-workspace [aria-pressed="true"]::after { color: inherit !important; }
html body.t1 .analysis-workspace .v3 .tg label {
  background: var(--gb-bg); border: 1px solid var(--gb-edge); border-radius: 6px;
  color: var(--t1-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* Keep each size control at the same starting edge as its syntax column. */
body.t1 .fx-page-analysis .v3 .v3-size-control { justify-content: flex-start; gap: 4px; }
body.t1 .fx-page-analysis .v3 .v3-size-control > span { flex-basis: 100%; margin: 0 0 4px; }
body.t1 .fx-page-analysis .v3 .v3-size-control button {
  width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0; font-size: 11px;
}
body.t1 .fx-page-analysis .analysis-items.is-reading-only { padding: 28px; }
body.t1 .fx-page-analysis .analysis-items .variants-reading { max-width: 760px; margin-top: 24px; }
body.t1 .fx-page-analysis .variants-reading p { margin: 0; padding-block: 12px; line-height: 1.8; }
body.t1 .fx-page-analysis .variants-reading h3 { margin-block: 24px 8px; }

.analysis-lesson,.analysis-tab-panel,.analysis-content,.analysis-preview,.parse-view{min-width:0;max-width:100%}
.analysis-local-groups>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}.analysis-local-groups>summary small{font-size:13px;font-weight:400}

/* Directory-only compact picker. Beat the shared T1 card layout without
   changing lesson workspaces or selectors on any other screen. */
body.t1 .analysis-directory { margin-block: 16px; }
body.t1 .analysis-directory > h2 { margin: 0 0 4px; font-size: 18px; line-height: 26px; }
body.t1 .analysis-directory #analysis-status { margin: 0 0 12px; font-size: 12px; line-height: 20px; }
body.t1 .analysis-directory .analysis-grades {
  display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 0 10px;
}
body.t1 .analysis-directory .analysis-grade {
  flex: 0 0 auto; min-width: 64px; min-height: 40px; padding: 6px 16px;
  font-size: 14px; line-height: 20px; white-space: nowrap;
}
body.t1 .analysis-directory :is(.analysis-books, .analysis-lesson-grid) {
  display: grid; grid-template-columns: repeat(var(--analysis-columns, 1), minmax(0, 1fr));
  gap: 6px; margin: 0; padding: 0; min-width: 0;
}
body.t1 .analysis-directory [data-dense="true"] { gap: 4px; }
body.t1 .analysis-directory .analysis-book {
  min-width: 0; min-height: 48px !important; height: 48px;
  justify-content: center !important; padding: 4px 8px !important; text-align: center;
}
body.t1 .analysis-directory .analysis-book-name {
  align-items: center; width: 100%; font-size: 14px; line-height: 18px;
}
body.t1 .analysis-directory :is(.analysis-book-subject, .analysis-book-publisher) {
  white-space: nowrap; overflow-wrap: normal;
}
body.t1 .analysis-directory .analysis-book-subject { font-size: 11px; font-weight: 400; }
body.t1 .analysis-directory .analysis-book-publisher { font-weight: 700; }
body.t1 .analysis-directory [data-dense="true"] .analysis-book { padding-inline: 3px !important; }
body.t1 .analysis-directory [data-dense="true"] .analysis-book-name { font-size: 12px; }
body.t1 .analysis-directory .analysis-selected-book {
  gap: 4px 12px; margin: 6px 0; min-height: 32px; font-size: 12px; line-height: 20px;
}
body.t1 .analysis-directory .analysis-library-link { min-height: 32px; }
body.t1 .analysis-directory .analysis-coming { display: inline; margin: 0 0 0 6px; }
body.t1 .analysis-directory .analysis-lesson-grid > li { min-width: 0; }
body.t1 .analysis-directory .analysis-lesson-link {
  flex-direction: row; gap: 6px; min-height: 44px; height: 44px; padding: 6px;
  font-size: 14px; line-height: 20px; white-space: nowrap;
}
body.t1 .analysis-directory .analysis-scoped :is(.analysis-grades, .analysis-books) { display: none; }
@media (max-width: 1100px) {
  body.t1 .analysis-directory :is(.analysis-grades, .analysis-books, .analysis-lesson-grid) {
    display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto;
    padding: 4px; scroll-padding-inline: 4px; overscroll-behavior-x: contain;
  }
  body.t1 .analysis-directory .analysis-book { flex: 0 0 auto; padding-inline: 12px !important; }
  body.t1 .analysis-directory .analysis-book-name { font-size: 14px; }
  body.t1 .analysis-directory .analysis-lesson-grid > li { flex: 0 0 auto; }
  body.t1 .analysis-directory .analysis-lesson-link { padding-inline: 12px; }
  body.t1 .analysis-directory .analysis-library-link { min-height: 40px; }
}
/* tabs390: on phones the four tabs share one row (no sideways scroll); desktop and 481px+ unchanged */
@media (max-width: 480px) {
  .analysis-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; gap: 4px; }
  .analysis-tabs button { padding-inline: 2px; }
}