:root{
  color-scheme:light;
  --paper:#ffffff; --card:#ffffff; --ink:#1b2430; --ink-soft:#485463;
  --line:#e3e7ec; --line-soft:#eef1f4; --accent:#1f4e6b; --accent-soft:#e8eef3;
  /* 어법(빨강) + 어휘(파랑) = 어법+어휘(보라) 로 색이 맞물려 있으므로 이 셋은 건드리지 않는다.
     병렬구조는 원래 하늘색(#1f9dd0)이라 어휘의 파랑과 구분이 잘 안 돼 초록으로 바꿨다. */
  --g:#cf2e2e; --v:#1f6fb2; --gv:#7a3fa0; --conj:#15803d; --hl:#fff1a8; --conj-bg:#a9e3bb;
  /* 한 문장에 등위접속사가 둘 이상일 때 묶음별로 색을 달리한다. 접속사 표시는 늘
     '배경(형광)'이 있어 어법·어휘 같은 '색 글자'와는 애초에 구분되므로, 이 색들은
     서로만 구분되면 된다. 노랑(--hl)·주황(--target-hl)과도 겹치지 않게 골랐다.
     처음에 2번을 청록으로 뒀더니 1번 초록과 색 거리가 27밖에 안 나와(0~441 척도)
     사실상 구분이 되지 않았다. 색상환에서 충분히 벌어지도록 초록·보라·자홍으로 잡는다. */
  --conj2:#5b21b6; --conj2-bg:#b09bde;   /* 2번 묶음: 보라 */
  --conj3:#a3196b; --conj3-bg:#f3bcd6;   /* 3번 묶음: 자홍 */
  --target-hl:#ffd8a8; --target-ink:#c2410c;
  /* 학원 마크 패널 전용 강조색 — 위쪽 설정 항목들과 뚜렷이 구분되도록 따뜻한 색으로 */
  --brand:#b45309; --brand-soft:#fdf1e0;
  --shadow:0 1px 2px rgba(20,30,45,.05),0 6px 20px rgba(20,30,45,.05);
}
@media (prefers-color-scheme:dark) and (min-width:999999px){
  :root{
    --paper:#12161c; --card:#1a1f27; --ink:#e7ebf0; --ink-soft:#9aa6b4;
    --line:#2a323d; --line-soft:#232a33; --accent:#7fb5d8; --accent-soft:#1e2c38;
    --g:#ff6b6a; --v:#63b3e8; --gv:#c48fe0; --conj:#5fce8c; --hl:#5c5326; --conj-bg:rgba(95,206,140,.28);
    --brand:#f0b429; --brand-soft:#33270f;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
  }
}

/* 글꼴은 이 한 곳에서만 정한다 — 화면·인쇄 어디서든 같은 글씨체로 보이도록.
   (예전에는 제목에 Georgia를 썼는데 한글 글리프가 없어 바탕체로 대체되면서
    영문과 한글의 글씨체가 한 줄 안에서 달라 보였다) */
:root{ --font:"Segoe UI","Malgun Gothic",Pretendard,system-ui,-apple-system,sans-serif; }
*{box-sizing:border-box;}
html,body{margin:0;}
html{background:var(--paper);}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
/* 입력칸·버튼은 기본값이 브라우저 글꼴(Arial 등)이라 따로 물려줘야 한다 */
input,select,textarea,button{font-family:inherit;}

.wrap{max-width:900px; margin:0 auto; padding:28px 22px 90px;}

/* ── 헤더 ── */
.app-head{margin-bottom:20px;}
.app-head .eyebrow{
  font-size:clamp(22px,6vw,30px); letter-spacing:.03em; text-transform:uppercase;
  color:var(--accent); font-weight:800; line-height:1.2; margin:0 0 6px; text-wrap:balance;
}
.app-head p{color:var(--ink-soft); font-size:14px; margin:0;}

/* ── 입력 패널 ── */
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px; box-shadow:var(--shadow); margin-bottom:22px;
}
.panel label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:0 0 6px; letter-spacing:.02em;}
.btn.small{padding:8px 12px; font-size:13px;}
textarea, input[type=text], select{
  width:100%; font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:9px; padding:10px 12px;
}
textarea{min-height:150px; resize:vertical; line-height:1.55;}
textarea:focus, input:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.row{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px;}
.row .field{flex:1 1 220px; min-width:0;}
.actions{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap;}
.btn{
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  padding:10px 20px; border-radius:9px; display:inline-flex; gap:8px; align-items:center;
  transition:transform .05s, opacity .15s;
}
@media (prefers-color-scheme:dark) and (min-width:999999px){.btn{color:#0f141a;}}
/* 위의 display:inline-flex가 hidden 속성(브라우저 기본 display:none)을 덮어써서,
   btn.hidden = true로는 버튼이 숨겨지지 않는다. 다른 요소들과 같은 방식으로 짝을 맞춘다. */
.btn[hidden]{display:none;}
.btn:hover{opacity:.92;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.ghost{background:var(--card); color:var(--ink); border-color:var(--line);}
.btn.ghost:hover{border-color:var(--accent);}
.btn.ghost.danger{color:var(--g);}
.btn.ghost.danger:hover{border-color:var(--g);}
.hint{font-size:12px; color:var(--ink-soft);}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; user-select:none;}
.chk input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer;}
.chk .chk-sub{font-weight:500; font-size:11.5px; color:var(--ink-soft);}
.error{
  margin-top:14px; padding:11px 14px; border-radius:9px; font-size:13px;
  background:rgba(207,46,46,.08); border:1px solid rgba(207,46,46,.35); color:var(--g);
}
.error:empty{display:none;}

/* ── 시작 화면 (소개 + 키 입력) ── */
.gate[hidden]{display:none;}
.gate-intro{
  padding:26px 26px 22px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); box-shadow:var(--shadow); margin-bottom:16px;
}
.gate-intro h2{
  font-family:var(--font); font-size:22px; line-height:1.35;
  margin:0 0 10px; color:var(--ink); text-wrap:balance;
}
.gate-lead{margin:0 0 20px; font-size:14.5px; line-height:1.75; color:var(--ink-soft); word-break:keep-all;}
.gate-lead b{color:var(--ink);}

/* 쓰는 순서 — 번호를 직접 그려 붙인다(기본 목록 번호보다 눈에 걸리게) */
.gate-flow{
  list-style:none; margin:0; padding:0; counter-reset:gate-flow;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px;
}
.gate-flow li{
  counter-increment:gate-flow; position:relative;
  padding:14px 16px 14px 46px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); word-break:keep-all;
}
.gate-flow li::before{
  content:counter(gate-flow,decimal-leading-zero);
  position:absolute; left:14px; top:13px;
  font-family:var(--font); font-weight:800; font-size:13px; color:var(--accent); opacity:.75;
}
.gate-flow b{display:block; font-size:13.5px; color:var(--ink); margin-bottom:3px;}
.gate-flow span{font-size:12.5px; line-height:1.65; color:var(--ink-soft);}

/* ── 결과물 미리보기 ──
   사진이 아니라 진짜 결과물을 그대로 그린다. 본문 출력용 CSS(.sent, .qz-card …)를
   그대로 쓰되, 로그인 화면에 맞게 크기만 줄이고 지면 높이를 잘라 둔다. */
.gate-showcase{
  margin-top:16px; padding:22px 22px 20px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); box-shadow:var(--shadow);
}
.gate-showcase-title{
  font-family:var(--font); font-size:17px; margin:0 0 6px; color:var(--ink);
}
.gate-showcase-lead{margin:0 0 18px; font-size:13px; color:var(--ink-soft); word-break:keep-all;}

/* min-width:0이 없으면 칸이 안쪽 내용(표는 min-width:520px)만큼 버텨서, 좁은 화면에서
   격자가 화면 밖으로 밀려 나간다 — 문장 카드에서 쓴 것과 같은 이유다. */
.gate-show{border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; min-width:0;}
.gate-show + .gate-show{margin-top:12px;}
.gate-show-wide{margin-bottom:12px;}
.gate-show-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px;}
.gate-show-grid .gate-show + .gate-show{margin-top:0;}
.gate-show-head{padding:13px 16px 11px; border-bottom:1px solid var(--line);}
.gate-show-head b{display:block; font-size:14px; color:var(--accent); margin-bottom:3px;}
.gate-show-head span{font-size:12.5px; line-height:1.65; color:var(--ink-soft); word-break:keep-all;}

/* 미리보기 지면. 실제 출력물은 A4 폭 기준이라 그대로 두면 글자가 크다 — 조금 줄인다.
   내용이 길면 아래를 흐리게 잘라 "이어진다"는 것만 보여 준다. */
.gate-preview{
  padding:14px 16px; background:var(--card); font-size:13px; min-width:0;
  max-height:410px; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
}
/* 문장 카드는 본문에서 좌우 7:3으로 벌어지는데, 좁은 미리보기에서는 위아래로 쌓는다 */
.gate-preview .sent{
  grid-template-columns:1fr; grid-template-areas:"head" "body" "note";
  margin-bottom:0; box-shadow:none;
}
.gate-preview .c-eng{font-size:14.5px; line-height:1.95;}
.gate-preview .note{border-left:none; border-top:1px solid var(--line);}
.gate-preview .qz-card{margin:0; box-shadow:none;}
.gate-preview .qz-answer-box{margin-top:10px;}
.gate-preview .qz-reveal-btn{display:none;}
.gate-preview table.vocab{font-size:12.5px;}
.gate-preview .wb-q:first-of-type{padding-top:4px;}

/* 이 사이트가 어떤 점에 신경 썼는지 — 결과물만으로는 안 보이는 것들 */
.gate-notes{
  margin-top:16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px;
}
.gate-note{
  padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font-size:12.5px; line-height:1.6; color:var(--ink-soft); word-break:keep-all;
}
.gate-note b{display:block; margin-bottom:3px; font-size:13px; color:var(--ink);}

/* ── 로그인/회원가입 게이트 — 시작 화면엔 버튼 두 개만, 실제 폼은 플로팅 창으로 ── */
.gate-auth-launch{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.gate-auth-launch .btn{padding:13px 32px; font-size:15.5px;}
.gate-auth-note{font-size:12.5px; color:var(--ink-soft); word-break:keep-all;}
/* 소개를 다 읽고 내려온 자리 — 위쪽 버튼과 구분되게 여백을 준다 */
.gate-auth-bottom{margin-top:16px;}

.auth-google{display:flex; justify-content:center; margin-bottom:16px;}
.auth-divider{
  display:flex; align-items:center; gap:10px; margin:4px 0 18px;
  font-size:12px; color:var(--ink-soft);
}
.auth-divider::before, .auth-divider::after{content:""; flex:1; height:1px; background:var(--line);}

.auth-panel[hidden]{display:none;}
.auth-panel label{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  margin:12px 0 6px;
}
.auth-panel label:first-of-type{margin-top:0;}
.auth-panel label .opt-sub{font-weight:500; color:var(--ink-soft); font-size:11.5px;}
.auth-panel input{width:100%;}

.gate-actions{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap;}
.gate-actions .btn{padding:11px 22px; font-size:15px;}
.gate-status{font-size:12.5px; color:var(--ink-soft);}
#loginError:not(:empty), #signupError:not(:empty), #verifyError:not(:empty){margin-top:12px;}

/* ── 로그인/회원가입 플로팅 창 ── */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(15,20,28,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay[hidden]{display:none;}
.modal-box{
  position:relative; width:100%; max-width:420px; max-height:calc(100vh - 40px);
  overflow-y:auto; padding:28px 26px 26px; border-radius:16px;
  background:var(--card); box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal-title{
  font-family:var(--font); font-size:19px; margin:0 0 18px; color:var(--ink);
}
.modal-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:8px;
  border:none; background:transparent; color:var(--ink-soft); font-size:20px; line-height:1;
  cursor:pointer;
}
.modal-close:hover{background:var(--paper); color:var(--ink);}

#workspace[hidden]{display:none;}
@media print{ .gate, .modal-overlay, .account-bar{display:none !important;} }

/* ── 저장/불러오기 계정 바 ── */
.account-bar{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.account-state{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.account-state[hidden]{display:none;}
.account-name{font-size:13px; font-weight:600; color:var(--ink-soft);}

/* ── 저장 목록 (내 저장함 모달) ── */
.saved-list{max-height:min(50vh, 420px); overflow:auto; margin:4px 0 0;}
.saved-list-empty{color:var(--ink-soft); font-size:13.5px; padding:10px 0;}
.saved-list-item{
  display:flex; align-items:center; gap:10px; padding:10px 4px;
  border-bottom:1px solid var(--line);
}
.saved-list-item:last-child{border-bottom:none;}
.saved-list-tag{font-size:12px; padding:2px 7px; border-radius:6px; background:var(--line-soft); color:var(--ink-soft); white-space:nowrap;}
.saved-list-info{flex:1 1 auto; min-width:0;}
.saved-list-title{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.saved-list-date{font-size:12px; color:var(--ink-soft);}
.saved-list-actions{display:flex; gap:6px; flex-shrink:0;}

/* 모든 탭이 공유하는 지문 패널 */
.passage-panel{border-color:var(--accent); border-width:1px; transition:background .12s, box-shadow .12s;}
/* ── 사진에서 지문 가져오기 ── */
/* 사진을 끌고 들어왔을 때 — 여기에 놓으면 된다는 것을 보여 준다 */
.passage-panel.dropping{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 2px var(--accent);
}
.passage-panel.dropping .passage-input{pointer-events:none;}
.ocr-hint{margin-top:10px; font-size:11.5px; color:var(--ink-soft); line-height:1.6;}
.ocr-hint b{color:var(--ink);}
.ocr-status{
  margin-top:8px; padding:9px 12px; border-radius:8px; font-size:12px; line-height:1.65;
  background:var(--paper); border:1px solid var(--line);
}
/* display를 직접 지정하므로 hidden 속성(UA의 display:none)을 다시 눌러 준다 */
.ocr-status[hidden]{display:none;}
.ocr-status.ok{border-color:var(--accent); background:var(--accent-soft);}
.ocr-status.warn{border-color:#d9a441; background:rgba(217,164,65,.10);}
.ocr-status .spinner{
  width:13px; height:13px; border-width:2px;
  display:inline-block; vertical-align:-2px; margin-right:5px;
}
.passage-panel .field-head .hint{font-size:11.5px;}

/* ── 탭 내비게이션 ── */
.tabs{display:flex; gap:4px; margin-bottom:18px; border-bottom:2px solid var(--line); flex-wrap:wrap;}
.tab-btn{
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; color:var(--ink-soft);
  background:transparent; border:none; padding:10px 16px; border-bottom:3px solid transparent;
  margin-bottom:-2px; transition:color .15s, border-color .15s;
}
.tab-btn:hover{color:var(--accent);}
.tab-btn.active{color:var(--accent); border-bottom-color:var(--accent);}
.tab-page{display:none;}
.tab-page.active{display:block;}
@media print{ .tabs{display:none !important;} }

/* ── 문제 제작: 유형 체크박스 ── */
/* 라벨 + 전체선택 토글을 한 줄에 */
.field-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;}
.field-head > label{margin:0;}
.toggle-all{font-size:12px; color:var(--accent);}
.toggle-all input{width:15px; height:15px;}

/* 문항 수 안내 + '유형 수에 맞추기' */
.count-hint{margin-top:6px; font-size:11.5px; color:var(--ink-soft); line-height:1.45;}
.count-hint.warn{color:#b8760a; font-weight:600;}
@media (prefers-color-scheme:dark) and (min-width:999999px){ .count-hint.warn{color:#e0a83a;} }
.count-fit{margin-top:7px; padding:5px 10px; font-size:12px; width:100%; justify-content:center;}

.quiz-type-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;}
.quiz-type-grid label{
  display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer;
}
.quiz-type-grid input{accent-color:var(--accent); cursor:pointer;}

/* ── 유형 칩 (출제 유형 + 문항 수 스테퍼) ──
   스테퍼가 <label> 밖에 있어야 +/− 를 눌러도 체크박스가 토글되지 않는다. 그래서 칩이
   테두리·배경을 맡고, 안쪽 label은 배경 없이 체크박스와 이름만 감싼다. */
/* 칸 너비는 이름이 가장 긴 '내용불일치(영)'과 스테퍼가 한 줄에 들어가게 잡는다.
   이름이 잘리면 내용일치(영)/(한)을 구분하지 못하므로 밀도보다 이름을 우선한다. */
#mcqTypeGrid, #saqTypeGrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
.type-chip{
  display:flex; align-items:center; gap:5px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:4px 6px 4px 9px;
}
.type-chip > label{
  flex:1 1 auto; min-width:0; background:none; border:none; padding:0; border-radius:0;
}
.type-chip .type-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.type-chip.picked{border-color:var(--accent); background:var(--accent-soft);}
/* 문항 수 스테퍼 */
.type-count{display:flex; align-items:center; gap:1px; flex-shrink:0;}
.type-count.off{opacity:.4;} /* 체크가 꺼진 유형 — 값은 남기고 흐리게만 */
.type-step{
  width:20px; height:20px; padding:0; line-height:1; cursor:pointer;
  border:1px solid var(--line); border-radius:5px; background:var(--paper);
  color:var(--ink-soft); font-size:13px; font-weight:800;
}
.type-step:hover:not(:disabled){border-color:var(--accent); color:var(--accent);}
.type-step:disabled{opacity:.3; cursor:not-allowed;}
.type-n{
  min-width:16px; text-align:center; font-size:13px; font-weight:800; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
/* 유형 선택 칸 아래 실시간 요약 (총 문항 수 · 예상 금액) */
.cost-hint{margin-top:8px;}
/* 순서 번호 — 워크북 '단계' 칸에서만 쓴다. 체크한 항목에만 붙고 즉시 다시 매겨진다.
   (문제 제작 탭의 유형 칩에는 번호를 붙이지 않는다 — 유형 이름·문항 수 스테퍼와
    함께 두기엔 정보가 많고, 번호가 자리를 먹어 긴 유형 이름이 잘렸다.) */
.quiz-type-grid .type-no{
  font-size:12px; font-weight:800; color:var(--accent);
  min-width:15px; text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; flex-shrink:0;
}
.quiz-type-grid .type-no:empty{display:none;}
.quiz-type-grid label.picked{border-color:var(--accent); background:var(--accent-soft);}
/* Pro 전용 옵션(예: '5개 이상 변형')이 잠겼을 때 — 흐리게 표시하고 클릭을 막는다 */
.quiz-type-grid label.disabled{opacity:.45; cursor:not-allowed;}
.quiz-type-grid label.disabled input{cursor:not-allowed;}
.type-order-hint{margin-top:6px;}
/* 출제 순서·지문 변형·단어장 형식/정렬처럼 select였던 항목을 유형 선택 칸과 같은 모양으로
   통일한 것. 옵션 글자가 길어("단어 5개 내외 변형") 140px 칸에서는 두 줄로 접히므로,
   이 항목들만 칸을 더 넓게 잡아 한 줄에 들어가게 한다.
   .radio-grid = 단일 선택(라디오), .wide-grid = 복수 선택(체크박스) — 너비 규칙은 같다. */
.radio-grid,
.wide-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); margin-top:8px;}
.quiz-type-grid label.opt-2line{align-items:flex-start;}
#wbStageGrid{grid-template-columns:repeat(4, minmax(0,1fr));}
.opt-text{display:flex; flex-direction:column; line-height:1.35;}
.opt-sub{font-weight:500; font-size:11.5px; color:var(--ink-soft);}
/* 라디오 그리드 위에 붙는 소제목 — 그 위 유형 선택 칸과 시각적으로 구분되도록 여백만 더 준다 */
.group-label{margin-top:14px !important;}
.group-note{font-weight:400; font-size:11.5px; color:var(--ink-soft);}

/* ── 문제 카드 ── */
.qz-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow);
  break-inside:avoid; page-break-inside:avoid;
}
.qz-head{display:flex; align-items:center; gap:9px; margin-bottom:10px;}
.qz-no{
  background:var(--accent); color:#fff; font-weight:700; font-size:13px;
  min-width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
}
@media (prefers-color-scheme:dark) and (min-width:999999px){.qz-no{color:#0f141a;}}
.qz-type{font-size:11px; font-weight:700; color:#fff; background:var(--accent); padding:2px 9px; border-radius:20px;}
.qz-instruction{font-weight:700; margin-bottom:12px; line-height:1.6;}
.qz-passage{
  background:var(--paper); border:1px dashed var(--line); border-radius:9px;
  padding:12px 14px; margin-bottom:12px; line-height:1.9; font-size:14.5px;
}
.qz-passage u{text-decoration-color:var(--accent); text-decoration-thickness:2px;}
.qz-choices{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.qz-choices li{display:flex; gap:8px; font-size:14px; line-height:1.5;}
.qz-choices .qz-num{font-weight:700; color:var(--accent); flex:0 0 auto;}
.qz-choices li.qz-correct .qz-choice-text{font-weight:700; color:var(--g);}
/* 서술형 배열 — 섞인 단어 + 답 쓰는 줄 */
.qz-scramble{
  font-size:14.5px; line-height:1.9; color:var(--ink); margin:4px 0 10px;
  padding:10px 12px; background:var(--paper); border:1px dashed var(--line); border-radius:9px;
}
.qz-writeline{border-bottom:1px solid var(--line); height:2em; margin-top:4px;}
.qz-writeline + .qz-writeline{margin-top:10px;}
/* 선택형 — 지문 속 [ A / B ] 강조 */
.qz-passage .wb-choice{color:var(--v); font-weight:600; white-space:nowrap;}
/* 오류 찾기 — 고쳐 쓰는 줄 */
.qz-fixline{font-size:14px; margin-top:9px; color:var(--ink);}
/* O/X 진위판단 */
.qz-tf li{align-items:baseline;}
.qz-tf .qz-num{color:var(--ink-soft); font-weight:700; flex:0 0 auto;}
.qz-ox{
  margin-left:auto; flex:0 0 auto; font-weight:700; color:var(--ink-soft);
  border-bottom:1px solid var(--line); letter-spacing:.1em;
}
.qz-reveal-btn{
  font:inherit; font-size:12.5px; font-weight:700; color:var(--accent); background:none;
  border:1px dashed var(--accent); border-radius:8px; padding:6px 12px; cursor:pointer; margin-top:12px;
}
.qz-answer-box{
  display:none; margin-top:10px; padding:10px 12px; border-radius:8px;
  background:var(--accent-soft); font-size:13px; line-height:1.7;
}
.qz-answer-box.show{display:block;}
.qz-answer-box b{color:var(--accent);}
table.answerkey td:nth-child(1),table.answerkey td:nth-child(3){font-weight:700; color:var(--accent); white-space:nowrap;}
/* 변형 내역표는 '원문' 열도 낱말이라 가운데 열까지 줄바꿈을 막는다 */
table.variedkey td:nth-child(2){white-space:nowrap; color:var(--ink-soft); font-weight:600;}
.qz-varied-count{
  font-size:12px; font-weight:600; color:var(--ink-soft);
  margin-left:6px; vertical-align:middle;
}

/* ── 지문 변형 표시 ──
   변형 모드로 만든 지문에서 실제로 바뀐 낱말. 화면에서는 형광펜으로 어디를
   손댔는지 바로 보이고, 마우스를 올리면 원문 낱말이 뜬다. 인쇄할 때는 아래
   @media print가 배경·밑줄만 지워서 학생이 받는 시험지에는 흔적이 남지 않는다
   (낱말 자체는 그대로 찍힌다). */
v{
  background:var(--hl); border-bottom:2px dotted var(--target-ink);
  border-radius:2px; padding:0 .1em; cursor:help;
}
@media print{
  .qz-reveal-btn, .qz-answer-box{display:none !important;}

  /* 변형 표시 지우기 — 낱말은 남기고 형광펜 자국만 없앤다 */
  v{background:none !important; border-bottom:none !important; padding:0 !important;}

  /* ── 실제 시험지처럼 A4 2단 조판 ──
     문항마다 지문이 통째로 들어가 한 문항이 한 쪽을 다 먹던 것을 두 단으로 흘려
     지면 소모를 줄인다. 단 나눔은 문항 카드에만 적용하고, '정답 및 해설' 표는
     .qz-cards 바깥이라 전체 폭을 그대로 쓴다. */
  .qz-cards{
    column-count:2; column-gap:7mm; column-fill:auto;
    /* 두 단 사이 세로 구분선 — 시험지 느낌 */
    column-rule:1px solid var(--line-soft);
  }
  .qz-card{
    box-shadow:none; border-radius:7px;
    padding:9px 11px; margin:0 0 7px;
    break-inside:avoid; page-break-inside:avoid;
  }
  /* 2단 폭에 맞춰 조판을 촘촘하게 */
  .qz-head{gap:6px; margin-bottom:6px;}
  .qz-no{min-width:20px; height:20px; font-size:12px;}
  .qz-type{font-size:10px; padding:1px 7px;}
  .qz-instruction{font-size:12px; margin-bottom:7px; line-height:1.5;}
  .qz-passage{
    font-size:11.5px; line-height:1.75; padding:8px 9px;
    margin-bottom:8px; border-radius:7px;
  }
  .qz-choices{gap:4px;}
  .qz-choices li{font-size:11.5px; line-height:1.45;}
  .qz-scramble{font-size:11.5px; line-height:1.7; padding:7px 9px; margin:3px 0 7px;}
  .qz-fixline{font-size:11.5px; margin-top:6px;}
  .qz-writeline{height:1.7em;}
  .qz-writeline + .qz-writeline{margin-top:7px;}
}

/* ── 단어장 ── */
.vocab-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.vocab-meta{font-size:12px; color:var(--ink-soft); white-space:nowrap;}
table.vocab td.v-no{color:var(--ink-soft); font-weight:600; width:38px; text-align:right;}
table.vocab td.v-word{font-weight:700; color:var(--ink);}
table.vocab td.v-from{color:var(--ink-soft); font-size:12px; white-space:nowrap;}
/* 시험지 — 답 쓰는 칸 (정답 표시를 켜야 정답이 보임) */
table.vocab-test td.v-blank{border-bottom:1px solid var(--line); min-width:150px;}
table.vocab-test td.v-blank .wb-ans{display:none; color:var(--g); font-weight:700;}
table.vocab-test td.v-blank .wb-ans::before{content:none;}
#vocabDoc.show-answers table.vocab-test td.v-blank .wb-ans{display:inline;}
#vocabDoc:empty{display:none;}

/* ── 워크북 (단계별 학습지) ── */
.wb-cover{
  text-align:center; padding:60px 20px; border:1px solid var(--line); border-radius:14px;
  margin-bottom:16px; background:var(--card);
}
.wb-cover h1{font-family:var(--font); font-size:28px; margin:0 0 10px;}
.wb-cover .wb-exam{font-size:14px; color:var(--ink); margin-bottom:6px;}
.wb-cover .wb-date{color:var(--ink-soft); font-size:13px;}

.wb-titlebar{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding:12px 16px; margin-bottom:14px; border-radius:10px;
  background:var(--accent-soft); border:1px solid var(--line);
  /* 영문·국문 두 줄이 쪽 경계에서 쪼개지지 않게 한 덩어리로 묶는다.
     break-after:avoid는 쓰지 않는다 — 뒤따르는 STEP 표는 거의 늘 한 쪽을 넘기는데,
     그때 Chrome이 '제목을 다음 것과 붙여 두라'는 요구를 지키려고 제목을 통째로
     다음 쪽으로 밀어내 제목만 덩그러니 남은 빈 쪽이 생긴다.
     지문은 .wb-passage의 break-before:page 덕분에 이미 늘 쪽 맨 위에서 시작하므로
     제목이 앞 지문 끝에 홀로 남을 일도 없다. */
  break-inside:avoid; page-break-inside:avoid;
}
.wb-titlebar b{font-family:var(--font); font-size:16px; color:var(--ink);}
.wb-titlebar span{font-size:13px; color:var(--ink-soft);}

/* 한 단계 = 표 하나. <thead>를 쓰는 이유는 인쇄할 때 브라우저가 쪽이 넘어갈 때마다
   머리글 행을 자동으로 다시 그려 주기 때문 — 참고 자료의 '쪽 머리말'이 그렇게 나온다. */
table.wb-page{width:100%; border-collapse:collapse; margin-top:26px;}
table.wb-page > thead{display:table-header-group;}
table.wb-page > thead td,
table.wb-page > tbody td{padding:0; border:none; vertical-align:top;}
.wb-run{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 12px; margin-bottom:10px; border-radius:8px;
  background:var(--accent-soft); border:1px solid var(--line);
}
.wb-run-l{font-family:var(--font); font-weight:800; font-size:14px; color:var(--accent);}
.wb-run-r{font-size:11.5px; color:var(--ink-soft); white-space:nowrap;}

.wb-guide{
  font-size:13px; font-weight:600; color:var(--accent);
  margin:0 0 14px; padding-left:2px;
}
.wb-q{
  border-bottom:1px dashed var(--line); padding:12px 0;
  break-inside:avoid; page-break-inside:avoid;
}
.wb-q:last-child{border-bottom:none;}
.wb-q-body{display:flex; gap:10px; align-items:flex-start;}
.wb-q-main{flex:1; min-width:0;}
.wb-no{
  flex:0 0 auto; background:var(--accent-soft); color:var(--accent); font-weight:700;
  font-size:12px; min-width:22px; height:22px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; margin-top:2px;
}
.wb-heading{font-weight:700; color:var(--ink); font-size:14px; margin:6px 0 8px;}
.wb-ko{font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:6px; word-break:keep-all;}
.wb-en{font-size:15px; line-height:2.1; color:var(--ink);}
/* 영작 — 밑줄이 촘촘히 늘어서므로 줄 간격을 더 준다 */
.wb-en.wb-write{line-height:2.5;}
.wb-para{font-size:14.5px; line-height:2.1; color:var(--ink); margin-bottom:12px;}
.wb-para u{text-decoration-color:var(--ink); text-decoration-thickness:1px; text-underline-offset:4px;}
.wb-scramble{font-size:14.5px; line-height:1.95; color:var(--ink); margin:4px 0;}
.wb-scramble-grp{font-weight:400;}
.wb-keys{
  display:inline-block; font-size:12.5px; font-weight:600; color:var(--gv);
  background:rgba(122,63,160,.08); border-radius:6px; padding:3px 9px; margin:4px 0;
}
.wb-paren{color:var(--g); font-weight:700;}
.wb-choice{color:var(--v); font-weight:600; white-space:nowrap;}
.wb-blank{
  display:inline-block; min-width:90px; border-bottom:1px solid var(--ink-soft);
  margin:0 3px; vertical-align:baseline; height:1.15em;
}
.wb-writeline{
  border-bottom:1px solid var(--line); height:1.9em; margin-top:6px;
}
.wb-fixline{font-size:14px; margin-top:10px; color:var(--ink);}

/* 문단 배열 (A)(B)(C) */
.wb-para-head{margin-bottom:8px;}
.wb-para-tail{margin-top:10px;}
.wb-parablock{
  font-size:14px; line-height:1.95; color:var(--ink); margin:0 0 10px;
  padding-left:26px; text-indent:-26px;
}
.wb-parablock b{color:var(--accent); font-weight:800;}
.wb-orderline{margin-top:14px; font-size:15px; color:var(--ink-soft); text-align:center;}

/* 정답 — '정답 표시'가 켜졌을 때만 노출 (화면·인쇄 공통) */
.wb-ans{display:none; margin-top:7px; font-size:13px; font-weight:700; color:var(--g);}
.wb-ans::before{content:"정답  "; font-weight:700; color:var(--accent);}
#workbookDoc.show-answers .wb-ans{display:block;}

/* ── 뒤쪽 '정답' 모음 (참고 자료의 별지 정답) ── */
.wb-answerbook{margin-top:30px;}
.wb-answerbook-head{
  font-family:var(--font); font-size:20px; margin:0 0 14px; padding-bottom:8px;
  color:var(--accent); border-bottom:2px solid var(--accent);
}
.wb-ab-label{
  font-weight:800; font-size:13px; color:var(--accent);
  margin:14px 0 8px; break-after:avoid; page-break-after:avoid;
}
.wb-ab-stage{margin-bottom:12px; break-inside:avoid; page-break-inside:avoid;}
.wb-ab-stage h3{
  font-size:12.5px; font-weight:800; color:var(--ink); margin:0 0 4px;
}
.wb-ab-stage ol{margin:0; padding-left:24px;}
.wb-ab-stage li{
  font-size:12px; line-height:1.65; color:var(--ink-soft);
  word-break:break-word; margin-bottom:2px;
}

/* ── 답지만 인쇄 ──
   문제지를 통째로 감추고 뒤쪽 '정답' 모음만 남긴다.
   '정답 표시' 체크와 무관하게 항상 노출되며, 인쇄가 끝나면 .answers-only가 떨어진다. */
#workbookDoc.answers-only .wb-passage,
#workbookDoc.answers-only .wb-cover,
#workbookDoc.answers-only > footer{display:none !important;}
#workbookDoc.answers-only .wb-answerbook{margin-top:0;}

@media print{
  /* 새 지문은 늘 새 쪽에서 시작 — 지문 제목이 앞 지문 마지막 쪽 아래에 붙는 것을 막는다.
     첫 지문만 예외로 두어야 (표지가 없을 때) 맨 앞에 빈 쪽이 생기지 않는다. */
  .wb-passage{break-before:page; page-break-before:always;}
  #workbookDoc > .wb-passage:first-of-type{break-before:auto; page-break-before:auto;}
  /* 단계마다 새 쪽에서 시작 (참고 자료와 같은 조판).
     지문의 첫 단계만 예외 — 지문 제목 바로 아래에 이어져야 하므로. */
  table.wb-page{break-before:page; page-break-before:always; margin-top:0;}
  .wb-passage > table.wb-page:first-of-type{break-before:auto; page-break-before:auto;}
  /* 아래쪽 공통 인쇄 규칙의 tr{break-inside:avoid}는 지문분석 표(행이 짧다)를 위한
     것인데, 워크북은 한 단계 전체가 tbody의 tr 하나여서 그것까지 걸린다. 그러면
     쪽에 남은 자리에 안 들어간다고 단계를 통째로 다음 쪽으로 밀어내, 지문 제목만
     덩그러니 남은 빈 쪽이 생긴다. 이 표는 쪽 넘김을 허용해야 한다. */
  table.wb-page > tbody > tr,
  table.wb-page > tbody > tr > td{break-inside:auto; page-break-inside:auto;}
  .wb-cover{break-after:page; page-break-after:always; box-shadow:none;}
  .wb-titlebar{margin-bottom:10px;}
  /* 정답 모음은 별지 — 새 쪽에서 시작하고 2단으로 촘촘하게 */
  .wb-answerbook{break-before:page; page-break-before:always; margin-top:0;}
  .wb-answerbook-head{break-after:avoid; page-break-after:avoid;}
  .wb-ab-passage{column-count:2; column-gap:8mm; column-rule:1px solid var(--line-soft);}
  #workbookDoc.answers-only .wb-answerbook{break-before:auto; page-break-before:auto;}
}

/* ── 여러 지문 입력 (지문 추가/삭제) ── */
#passageCount{font-weight:600; font-size:12px; color:var(--ink-soft);}
#passageList{display:flex; flex-direction:column; gap:12px;}
.passage-item{border:1px solid var(--line); border-radius:10px; background:var(--paper); padding:10px 10px 12px;}
.passage-item-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.passage-item-no{font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:.02em;}
/* 지문 이름 — 비워두면 '지문 1', '지문 2' 가 자동으로 쓰인다 */
.passage-name{
  flex:0 1 260px; min-width:0; width:auto;
  font:inherit; font-size:13px; font-weight:700; color:var(--accent);
  background:transparent; border:none; border-bottom:1px dashed var(--line);
  border-radius:0; padding:3px 2px;
}
.passage-name::placeholder{color:var(--accent); opacity:.55; font-weight:700;}
.passage-name:focus{outline:none; border-bottom-color:var(--accent); background:var(--card);}
.passage-count{margin-left:auto; font-size:11.5px; color:var(--ink-soft); white-space:nowrap;}
.passage-count.warn{color:#b8760a; font-weight:600;}
.passage-count.danger{color:var(--g); font-weight:700;}
@media (prefers-color-scheme:dark) and (min-width:999999px){ .passage-count.warn{color:#e0a83a;} }
.passage-del{padding:4px 10px; font-size:12px; line-height:1;}
/* 붙여넣기 정리 안내 — 무엇을 지웠는지 알리고 되돌릴 수 있게 한다 */
.passage-note{
  margin-top:6px; font-size:11.5px; color:var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
/* display를 직접 지정하면 hidden 속성(UA의 display:none)을 덮어써 버린다 — 다시 눌러 준다 */
.passage-note[hidden]{display:none;}
.passage-note b{color:var(--ink);}
.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--accent); font-weight:700; text-decoration:underline;
}
.passage-input{
  width:100%; min-height:130px; resize:vertical; font:inherit; line-height:1.55;
  color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px;
}
.passage-input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
/* '크게 보기' — resize:vertical 손잡이를 수동으로 끄는 동작과 트랜지션이 섞이면
   드래그가 뒤늦게 쫓아오는 느낌을 주므로 애니메이션 없이 즉시 크기를 바꾼다.
   80vh를 넘는 아주 긴 지문은 JS가 그 높이에서 멈추므로 여기서 세로 스크롤이 생긴다. */
.passage-item.expanded .passage-input{overflow-y:auto;}
.passage-expand.active{border-color:var(--accent); color:var(--accent);}
.passage-add-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px;}
.passage-max-note{font-size:12px; font-weight:600; color:#b8760a;}
.passage-max-note:empty{display:none;}

/* 지문 구분 배너 & 결과 블록 */
.passage-banner{
  display:inline-block; margin:6px 0 12px; padding:5px 14px;
  background:var(--accent); color:#fff; font-weight:800; font-size:14px;
  border-radius:8px; letter-spacing:.03em;
}
@media (prefers-color-scheme:dark) and (min-width:999999px){.passage-banner{color:#0f141a;}}
/* 지문 변형 세트 이름 — 같은 지문에서 나온 원문/변형 문제지를 구분한다 */
.passage-banner-tag{
  margin-left:9px; padding:2px 8px; border-radius:6px;
  background:rgba(255,255,255,.24); font-size:12px; font-weight:700; letter-spacing:0;
}
.passage-block{margin-bottom:10px;}
.passage-error{
  border:1px solid rgba(207,46,46,.35); background:rgba(207,46,46,.08);
  border-radius:12px; padding:14px 16px; margin-bottom:14px; color:var(--g); font-size:13.5px;
}
.passage-error b{display:block; margin-bottom:4px; font-size:14px;}

/* ── 학원 마크 설정 ──
   예전에는 접히는 <details>였는데 접힌 상태가 눈에 띄지 않아 "사라졌다"고 오해하기 쉬웠다.
   모든 탭의 인쇄물에 공통으로 쓰이는 설정이라 항상 펼쳐 두되, 다른 설정 항목(모델 선택 등)과
   섞여 지나치기 쉬웠으므로 별도 강조색(--brand)과 왼쪽 띠로 눈에 띄게 하고,
   입력칸 2개를 한 줄로 붙여 차지하는 세로 공간은 줄였다. */
.brand-panel{
  position:relative; overflow:hidden;
  margin-top:14px; padding:10px 14px 10px 18px;
  border:1px solid var(--brand); border-radius:10px; background:var(--brand-soft);
}
.brand-panel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--brand);
}
.brand-title{font-weight:700; color:var(--brand); font-size:13px;}
.brand-title .sub{color:var(--ink-soft); font-weight:600; font-size:11px;}
.brand-body{margin-top:8px;}
.brand-body .row{margin-top:0;}
.brand-body label{font-size:12px; margin-bottom:4px;}
input[type=file]{width:100%; font:inherit; font-size:13px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px; padding:7px 9px;}
.brand-preview-row{display:flex; align-items:center; gap:8px; margin-top:8px;}
.brand-preview-row #brandRemoveBtn{flex:0 0 auto;}
.brand-preview{
  flex:1; min-width:0; padding:8px 10px; border:1px dashed var(--brand); border-radius:8px;
  display:flex; align-items:center; gap:10px; min-height:40px; background:var(--card);
}
.brand-preview .muted{color:var(--ink-soft); font-size:12px;}
.brand-preview img, .brand-mark img{max-height:36px; max-width:140px; object-fit:contain;}
.brand-name{font-weight:700; color:var(--ink); font-size:13.5px;}

/* 화면 어디서든 누를 수 있는 고정 인쇄/PDF저장 버튼 — 세로로 쌓아 둔다 */
.float-print-group{
  position:fixed; right:22px; bottom:22px; z-index:50;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.float-print-group[hidden]{display:none;}
.float-print{
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  color:#fff; background:var(--accent); border:none;
  padding:13px 20px; border-radius:30px;
  box-shadow:0 6px 20px rgba(20,30,45,.28); display:inline-flex; align-items:center; gap:7px;
  transition:transform .06s, box-shadow .15s, opacity .15s;
}
.float-print:hover{box-shadow:0 8px 26px rgba(20,30,45,.36);}
.float-print:active{transform:translateY(1px);}
.float-print:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@media (max-width:560px){
  .float-print-group{right:14px; bottom:14px; gap:8px;}
  .float-print{padding:12px 16px; font-size:13px;}
}
@media print{ .float-print-group{display:none !important;} }

/* ── 인쇄 안내 창 ──
   인쇄 버튼을 누르면 먼저 뜨는 안내. 인쇄 대화상자에서 '대상(프린터)'을 무엇으로
   고르면 종이/PDF가 되는지 알려 준다. (브라우저가 그 목록을 정하므로 앱이 대신
   고를 수 없다 — 사이트가 몰래 파일을 저장하지 못하게 막는 보안 정책.) */
.print-guide{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,23,35,.45);
}
.print-guide[hidden]{display:none;}
.print-guide-card{
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 18px 50px rgba(15,23,35,.35);
  padding:22px 24px; max-width:520px; width:100%;
  max-height:calc(100vh - 40px); overflow:auto;
}
.print-guide-card h3{margin:0 0 10px; font-size:17px;}
.print-guide-lead{margin:0 0 12px; font-size:14px; line-height:1.65;}
.print-guide-steps{margin:0 0 12px; padding-left:20px; font-size:14px; line-height:1.7;}
.print-guide-steps li + li{margin-top:8px;}
.print-guide-sub{color:var(--ink-soft); font-size:12.5px;}
.print-guide-note{
  margin:0 0 14px; padding:10px 12px; border-radius:8px;
  background:var(--line-soft); color:var(--ink-soft);
  font-size:12.5px; line-height:1.6;
}
.print-guide-skip{display:inline-flex; align-items:center; gap:6px; font-size:13px;}
.print-guide-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
@media print{ .print-guide{display:none !important;} }

/* ── 밑줄 ──
   브라우저 기본값 text-decoration-skip-ink:auto 는 g·p·y 같은 디센더와 겹치는
   구간의 밑줄을 지운다. 그러면 어법·어휘 문항에서 ⑤learning 의 밑줄이 'learnin'
   까지만 그어진 것처럼 보여 학생이 밑줄 범위를 오해한다. 낱말 전체에 끊김 없이
   긋고, 선을 조금 내려 디센더를 관통하지 않게 한다. (화면·인쇄 공통) */
u{
  text-decoration-skip-ink:none;
  text-underline-offset:.16em;
}

/* 인쇄 틀(table/tfoot) — 화면에서는 표 구조를 무력화해 기존 레이아웃 그대로 둔다 */
.print-frame,
.print-frame > tbody,
.print-frame > tbody > tr,
.print-frame > tbody > tr > td{ display:block; width:auto; padding:0; border:0; }
.print-frame > tfoot{ display:none; }   /* 학원명·로고는 인쇄에서만 */

/* ── 로딩 ── */
.loading{display:none; align-items:center; gap:12px; margin:26px 2px; color:var(--ink-soft); font-size:14px;}
.loading.on{display:flex;}
.spinner{
  width:20px; height:20px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none;}}

/* ── 결과 표지 ── */
.cover{
  border:1px solid var(--line); background:var(--card); border-radius:14px;
  padding:22px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden; margin-bottom:16px;
}
.cover::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent);}
.cover h2{font-family:var(--font); font-size:21px; line-height:1.3; margin:0 0 4px; text-wrap:balance;}
.cover .ko-title{color:var(--ink-soft); font-size:14px; margin-bottom:14px;}
.legend{
  display:flex; flex-wrap:wrap; gap:8px 10px; font-size:11.5px; color:var(--ink-soft);
  margin-top:14px; padding:11px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--accent-soft);
}
.legend .legend-title{width:100%; font-weight:700; color:var(--accent); font-size:11px; letter-spacing:.04em; margin-bottom:2px;}
.legend b{display:inline-flex; align-items:center; gap:5px; font-weight:700;}
.dot{width:11px; height:11px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.12);}
/* 병렬구조 항목의 보조 설명 — 색이 여러 개인 이유를 한 마디로 알려 준다 */
.legend .legend-note{font-weight:600; font-size:11px; color:var(--ink-soft); margin-left:1px;}
.legend b .dot + .dot{margin-left:-3px;}

.result-tools{display:flex; justify-content:flex-end; margin:8px 0 18px;}

/* ── 분석본 직접 수정 ── */
.edit-hint{font-size:12px; color:#b8760a; font-weight:600;}
.edit-hint:empty{display:none;}
/* 고칠 수 있는 곳만 표시해 준다 — 영어 원문·제목·범례는 잠겨 있어 표시되지 않는다 */
#result.editing [contenteditable="true"]{
  outline:1px dashed var(--accent); outline-offset:2px; border-radius:3px;
  background:var(--accent-soft); cursor:text;
}
#result.editing [contenteditable="true"]:focus{
  outline:2px solid var(--accent); background:var(--card);
}
/* 해설 안의 자동 라벨은 잠긴 상태이므로 표시에서 제외 */
#result.editing [contenteditable="false"]{
  outline:none; background:none;
}
/* 편집 중 표시는 지면에 남기지 않는다 */
@media print{
  #result.editing [contenteditable]{outline:none !important; background:none !important;}
}

/* ── 문장 카드 (좌우 7:3) ── */
.sent{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  margin-bottom:14px; box-shadow:var(--shadow); overflow:hidden;
  display:grid; grid-template-columns:1fr 34%;
  grid-template-areas:"head note" "body note";
}
.sent-head{grid-area:head; display:flex; align-items:center; gap:9px; padding:14px 18px 0;}
.chunks{
  grid-area:body; padding:12px 18px 14px;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:7px 14px;
}
.note{grid-area:note;}
/* 그리드 열이 긴 단어/루비에 밀려 깨지지 않도록 (min-width:0 필수) */
.sent-head,.chunks,.note{min-width:0;}
/* 청크: 영문 바로 아래 한글 (직독직해) */
.chunk{min-width:0; margin:0; max-width:100%;}
.c-eng{font-size:16px; line-height:2.05; letter-spacing:.01em; overflow-wrap:break-word;}
/* 한글 해석은 11px — 영문(16px)보다 확실히 작게 두는 데는 이유가 있다.
   청크 박스의 폭은 영문과 한글 중 '넓은 쪽'이 정하는데, 짧은 영어에 긴 한글이
   붙는 청크(예: or / 쓰레기나)에서는 한글이 폭을 잡아 영문 뒤에 빈 자리가 남고,
   그 빈 자리가 다음 낱말을 밀어내 띄어쓰기가 들쭉날쭉해 보인다.
   12.5px → 11px로 낮춰 그 낭비를 약 30% 줄였다. 더 줄이면 한글이 낱말 중간에서
   잘리기 시작하므로(word-break:keep-all이라 띄어쓰기 없는 낱말은 쪼갤 데가 없다)
   여기가 안전한 하한이다. */
.c-kor{
  font-size:11px; color:var(--ink-soft); line-height:1.45; margin-top:1px;
  overflow-wrap:break-word; word-break:keep-all;
}
.sent-no{
  background:var(--accent); color:#fff; font-weight:700; font-size:13px;
  min-width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
}
@media (prefers-color-scheme:dark) and (min-width:999999px){.sent-no{color:#0f141a;}}
.sent-head{flex-wrap:wrap;}
.sent-head .tag{font-size:11px; color:var(--ink-soft); letter-spacing:.03em;}
/* 문제 유형 배지 */
.exam-tags{display:inline-flex; flex-wrap:wrap; gap:5px; margin-left:auto;}
.exam-tag{
  font-size:10.5px; font-weight:700; color:#fff; background:var(--accent);
  padding:2px 8px; border-radius:20px; letter-spacing:.02em; white-space:nowrap;
}
.et-topic{background:var(--g);}      /* 주제문 */
.et-gist{background:#c2410c;}         /* 요지 */
.et-blank{background:#7a3fa0;}        /* 빈칸 */
.et-insert{background:#1f6fb2;}       /* 문장삽입 */
.et-order{background:#0e7c86;}        /* 순서 */
.et-imply{background:#b45309;}        /* 함축 */
.et-grammar{background:#cf2e2e;}      /* 어법 */
.et-vocab{background:#1f9dd0;}        /* 어휘 */
.et-title{background:#4b5563;}        /* 제목단서 */
.et-etc{background:var(--accent);}
/* 출제 포인트(왜 이 유형인지) 설명 */
.exam-why{
  margin-top:10px; padding:9px 10px; border-radius:8px;
  background:rgba(31,78,107,.06); border:1px solid var(--line);
  font-size:12px; color:var(--ink); line-height:1.65;
}
.exam-why-title{display:block; font-weight:700; color:var(--accent); font-size:10.5px; letter-spacing:.03em; margin-bottom:4px;}
/* 주제문 카드 강조 */
.sent.is-topic{border-color:var(--g); box-shadow:0 0 0 2px rgba(207,46,46,.18), var(--shadow);}
.sent.is-topic .sent-no{background:var(--g);}
.sent.is-topic .chunks{background:rgba(207,46,46,.045);}

.eng{font-size:16.5px; line-height:2.35; letter-spacing:.01em; padding:12px 18px 2px;}
.sep{color:var(--accent); opacity:.5; margin:0 5px; font-weight:400;}
.kor{font-size:14px; color:var(--ink-soft); line-height:1.9; padding:0 18px 16px;}
.kor .sep{opacity:.35;}

/* 루비 태그 */
ruby{ruby-align:center;}
ruby.over-tag{ruby-position:over;}
ruby rt{font-size:10px; font-weight:700; line-height:1.15; color:var(--g);}
/* 역할별 글자색 (본문·범례 공통) — 루비 보조 클래스가 없어도 색이 맞도록 */
.g{color:var(--g); font-weight:600;}
.v{color:var(--v); font-weight:600;}
.gv{color:var(--gv); font-weight:600;}
ruby.vocab-rt .v{color:var(--v); font-weight:600;}
ruby.vocab-rt rt{color:var(--v);}
ruby.theme-rt .gv{color:var(--gv); font-weight:600;}
ruby.theme-rt rt{color:var(--gv);}
/* 병렬구조(초록 형광펜) — 노란 형광펜(.hl)과 같은 굵기로 맞춘다 */
.conj-hl{background:var(--conj-bg); border-radius:3px; padding:0 3px; font-weight:600;}
/* 짧은 주석 대상은 줄 끝에서 쪼개지지 않게 한다. ruby가 두 줄로 나뉘면 브라우저가
   위의 한글 설명까지 나눠 붙여('예시' → '예' + '시') 뜻을 알 수 없게 되기 때문.
   긴 대상에는 서버가 이 클래스를 붙이지 않으므로 화면 밖으로 넘칠 일은 없다. */
.nobreak{white-space:nowrap;}
/* 병렬 번호 — 파란 어휘 글자 옆에 붙는 일이 많아, 작고 옅으면 묻힌다.
   본문(16.5px) 대비 충분히 읽히도록 키우고 옅은 배지를 깔아 분리한다. */
sup.conj-num-top{
  color:var(--conj); font-weight:800; font-size:11.5px; vertical-align:super;
  background:var(--conj-bg); border-radius:3px; padding:0 2.5px; margin-right:1px;
}
/* 묶음별 색 — 접속사(형광)와 그 접속사가 잇는 요소의 번호가 같은 색을 갖는다.
   한 문장에 접속사가 하나뿐이면 cg1만 쓰이므로 화면은 지금까지와 똑같다. */
.conj-hl.cg2{background:var(--conj2-bg);}
.conj-hl.cg3{background:var(--conj3-bg);}
sup.conj-num-top.cg2{color:var(--conj2); background:var(--conj2-bg);}
sup.conj-num-top.cg3{color:var(--conj3); background:var(--conj3-bg);}
ruby.hl-rt .hl{background:var(--hl); border-radius:3px; padding:0 2px; font-weight:600;}
ruby.hl-rt rt{color:var(--ink-soft);}
/* 목표 어법(주황 형광펜) */
.tg{background:var(--target-hl); color:var(--target-ink); border-radius:3px; padding:0 2px; font-weight:700;}
ruby.target-rt rt{color:var(--target-ink);}
.note code.tg{color:var(--target-ink); background:#fff2e6;}

/* 해설 패널 */
.note{
  border-left:1px dashed var(--line); background:var(--accent-soft);
  padding:14px 15px; font-size:12.5px; color:var(--ink-soft); line-height:1.7;
}
@media (prefers-color-scheme:dark) and (min-width:999999px){.note{background:rgba(127,181,216,.06);}}
.note-title{display:block; font-weight:700; color:var(--accent); font-size:11px; letter-spacing:.03em; margin-bottom:6px;}
.note code{font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; background:var(--line-soft); color:var(--ink); padding:1px 5px; border-radius:4px; font-weight:600;}
/* 해설 속 영어를 좌측 본문과 같은 역할별 색상으로 (가독성 연결) */
.note code.g{color:var(--g);}
.note code.v{color:var(--v);}
.note code.gv{color:var(--gv);}

/* 섹션 & 표 */
h3.section{
  font-family:var(--font); font-size:18px; font-weight:700;
  margin:34px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--accent); display:flex; gap:9px; align-items:baseline;
}
h3.section .num{color:var(--accent); font-size:15px;}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse; font-size:13px; background:var(--card); min-width:520px;}
th,td{border-bottom:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top;}
thead th{background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:12px; letter-spacing:.03em;}
table.flow td:first-child{font-weight:700; color:var(--accent); white-space:nowrap; width:78px;}
table.flow tr:last-child td, table.vocab tr:last-child td{border-bottom:none;}
table.vocab td:first-child{font-weight:600; color:var(--ink);}
table.vocab td.pos{color:var(--ink-soft); font-style:italic; white-space:nowrap;}

footer{margin-top:34px; text-align:center; font-size:11.5px; color:var(--ink-soft);}
#result:empty{display:none;}

@media (max-width:620px){
  .sent{grid-template-columns:1fr; grid-template-areas:"head" "body" "note";}
  .note{border-left:none; border-top:1px dashed var(--line);}
  .eng{font-size:15px; line-height:2.2;}
}
@media print{
  /* 우하단 마크가 놓일 여백 확보 */
  /* 하단은 tfoot(학원명·로고)이 매 페이지 자리를 잡으므로 여백은 작게 */
  @page{ margin:14mm 12mm 10mm; }
  /* OS가 다크모드여도 인쇄는 항상 라이트 색상으로 고정 (색 빠짐 방지) */
  :root{
    color-scheme:light !important;
    --paper:#ffffff; --card:#ffffff; --ink:#1b2430; --ink-soft:#42505f;
    --line:#c9d0d8; --line-soft:#eef1f4; --accent:#1f4e6b; --accent-soft:#eaf0f5;
    --g:#c62828; --v:#1565a8; --gv:#6d329a; --conj:#12692f; --hl:#ffec99; --conj-bg:#a9e3bb;
    --conj2:#4c1d95; --conj2-bg:#b09bde; --conj3:#8f1259; --conj3-bg:#f3bcd6;
    --target-hl:#ffd8a8; --target-ink:#c2410c;
  }
  /* 모든 색/배경을 강제로 인쇄 (형광펜·범례 스와치·루비 색상 포함) */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  /* 내용이 페이지 하단까지 못 채우면 남는 여백이 채색 안 돼 검게 보일 수 있어
     html·body 배경을 !important로 강제하고 최소 높이를 페이지 전체로 확보 */
  html{background:#fff !important; min-height:100%;}
  body{background:#fff !important; min-height:100%;}
  .app-head,.panel,.loading,.result-tools,footer{display:none !important;}
  .sent,.cover,.table-wrap,.legend{box-shadow:none; break-inside:avoid;}
  .wrap{max-width:none; padding:0;}
  /* 지문마다 새 페이지에서 시작 (첫 지문은 그대로) */
  .passage-block{break-before:page; page-break-before:always;}
  .passage-block:first-child{break-before:auto; page-break-before:auto;}
  .passage-banner{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  /* '주제 & 흐름 요약'부터 새 페이지에서 시작 */
  .page-break{break-before:page; page-break-before:always;}
  h3.section{break-after:avoid; page-break-after:avoid;}
  /* 문장 카드·표 행이 페이지 경계에서 쪼개지지 않도록 */
  .sent{break-inside:avoid; page-break-inside:avoid;}
  tr{break-inside:avoid; page-break-inside:avoid;}
  /* 표가 페이지 폭을 넘겨 잘리지 않도록 (인쇄 시 스크롤 대신 줄바꿈) */
  .table-wrap{overflow:visible;}
  table{min-width:0;}
  th,td{overflow-wrap:break-word; word-break:keep-all;}
  /* 인쇄 틀 — <tfoot>은 매 페이지 하단에 '자리를 차지하며' 반복되므로,
     position:fixed 와 달리 본문 마지막 줄과 절대 겹치지 않는다. */
  .print-frame{ display:table; width:100%; border-collapse:collapse; }
  .print-frame > tbody{ display:table-row-group; }
  .print-frame > tfoot{ display:table-footer-group; }
  .print-frame > tbody > tr,
  .print-frame > tfoot > tr{ display:table-row; }
  .print-frame > tbody > tr > td,
  .print-frame > tfoot > tr > td{ display:table-cell; padding:0; border:0; }
  /* 학원명 = 좌하단, 로고 = 우하단 */
  .print-foot{
    display:flex; justify-content:space-between; align-items:flex-end;
    height:12mm; padding-top:3mm;
  }
  .print-foot .print-brand-name{
    font-family:var(--font); font-weight:700; font-size:11px;
    color:#1b2430; letter-spacing:.02em;
  }
  .print-foot .brand-mark img{ max-height:10mm; max-width:38mm; }
}