/* IELTS 쓰기 — js/ielts-write.js (2026-09-29, docs/dev/16-writing-speaking.md 2단계).
   문항 칸(#questionsPanel)의 입력칸과 결과 창(공식 답안). 색은 style.css 의 :root 토큰만 쓴다. */

.wr-block { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.wr-left { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }
.wr-left.is-low { color: var(--accent); font-weight: 600; }
.wr-text {
  flex: 1 1 auto; min-height: 50vh; width: 100%; box-sizing: border-box; resize: vertical;
  padding: 12px 14px; border: 1px solid var(--border-mid); border-radius: var(--radius);
  background: var(--bg-elevated); color: var(--text-primary);
  font: inherit; font-size: 1rem; line-height: 1.6;
}
.wr-text:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.wr-text[readonly] { background: var(--bg-secondary); }
.wr-words { color: var(--text-dim); font-size: 0.9em; font-variant-numeric: tabular-nums; text-align: right; }

/* 결과 */
.wr-res .wr-sec { margin: 22px 0 0; }
.wr-res .wr-sec h2 { font-size: var(--t2); margin: 0 0 10px; }
.wf-lead { margin: 0 0 10px; color: var(--muted, #5b5b6b); }
.wf-msg { margin: 8px 0 0; font-size: var(--fs-body); }
.wf-msg:empty { display: none; }
.wf-k { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted, #5b5b6b); }   /* 라벨(S9, 2026-10-18) */
.wf-focus { margin: 0 0 4px; }
.wf-why, .wf-problem { margin: 6px 0; }
.wf-quote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--border-mid); background: var(--surface, #f7f8fc); border-radius: 12px; }
.wf-fix { margin: 12px 0; display: grid; gap: 8px; }
.wf-fix .ie-btn { justify-self: start; }
.wf-cmp p { margin: 4px 0 0; padding: 10px 14px; border-left: 3px solid var(--success); background: rgba(22, 163, 74, .06); border-radius: 12px; }
.wf-h3 { font-size: var(--t3); margin: 16px 0 6px; }
/* 지난 판의 받은 피드백(2026-10-10, fb-keep.js) — Report 창 · 「Your earlier attempts」 글 아래 */
.fk-box { margin: 14px 0 0; padding-top: 2px; border-top: 1px solid var(--line, #e3e3ea); }
.fk-cmp { margin: 8px 0; }
.fk-cmp summary { cursor: pointer; }
/* 써 볼 낱말(2026-10-09, words-review.js wordsTryFill) — 쓰기 · 말하기 과제 머리 한 줄 · 피드백 아래 결과 */
.wt-box { margin: 6px 0 8px; font-size: var(--fs-body); color: var(--muted, #5b5b6b); }
.wt-box b { color: var(--text-primary, #18213a); font-weight: 600; }
.wt-k { margin-right: 4px; }
.wt-res p { margin: 6px 0 0; }
.wf-ranges { border-collapse: collapse; width: 100%; font-size: var(--fs-body); }
.wf-ranges td { padding: 6px 4px; border-bottom: 1px solid var(--line, #e3e3ea); vertical-align: top; }
.wf-ranges td:last-child { text-align: right; white-space: nowrap; }
.wf-quota { margin: 10px 0 0; font-size: var(--fs-label); color: var(--muted, #5b5b6b); }
.wr-past { border: 1px solid var(--line, #e3e3ea); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }
.wr-past summary { cursor: pointer; font-size: var(--fs-body); }
.wr-past .wr-mine { margin-top: 8px; }
.wr-mine, .wr-sample {
  padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-elevated);
}
.wr-mine p, .wr-sample-text p { margin: 0 0 0.7em; line-height: 1.6; }
.wr-mine p:last-child, .wr-sample-text p:last-child { margin-bottom: 0; }
.wr-empty { color: var(--text-dim); }
.wr-sample + .wr-sample { margin-top: 12px; }
.wr-sample h3 { font-size: var(--t3); margin: 0 0 8px; font-weight: 700; }
.wr-script { display: block; width: 100%; height: auto; margin: 0 0 8px; border: 1px solid var(--border-soft); border-radius: 6px; }
.wr-comment { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.wr-comment h4 { margin: 0 0 4px; font-size: var(--fs-label); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.wr-comment p { margin: 0; line-height: 1.55; }
.wr-crit { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.wr-obs { margin: 0 0 6px; line-height: 1.6; }
.wr-note { margin: 6px 0 0; color: var(--text-dim); font-size: 0.9em; }

/* Build a Sentence(TOEFL, 5-②) — 칸에 display 를 주지 않는다(지금 칸이 아닌 칸을 숨기는 규칙을 덮지 않게, 말하기 acd32eb) */
.bs-block > * + * { margin-top: 14px; }
.bs-lead { padding: 10px 14px; border-radius: var(--radius); background: var(--bg-secondary); line-height: 1.55; }
.bs-frame { line-height: 2.6; font-size: 1.05rem; }
.bs-slot {
  min-width: 64px; min-height: 34px; padding: 2px 10px; vertical-align: middle;
  border: none; border-bottom: 2px solid var(--border-mid); background: transparent; color: var(--text-primary); font: inherit; cursor: pointer;
}
.bs-slot.is-on { border-bottom-color: var(--accent); background: var(--bg-elevated); border-radius: 6px 6px 0 0; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chip {
  padding: 6px 12px; border: 1px solid var(--border-mid); border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-primary); font: inherit; cursor: pointer;
}
.bs-chip.is-used { visibility: hidden; }
.bs-mark.is-ok { color: var(--accent); font-weight: 600; }
.bs-mark.is-no { color: var(--text-dim); }
.bs-list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 12px; line-height: 1.55; }
.bs-res-lead { color: var(--text-dim); }
.bs-res.is-ok .bs-res-you b { color: var(--accent); }
.bs-res-key { color: var(--text-dim); font-size: 0.92em; }

/* 사진 문장(TOEIC Q1–5, 5-④) — 칸에 display 를 주지 않는다(칸 숨김을 덮지 않게) */
.ws-block > * + * { margin-top: 12px; }
.ws-block .wr-left { margin-left: auto; }
.ws-img { max-height: 42vh; width: auto; max-width: 100%; display: block; }
.ws-words { line-height: 1.6; }
.ws-line {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--border-mid); border-radius: var(--radius); background: var(--bg-elevated); color: var(--text-primary);
  font: inherit; font-size: 1rem; line-height: 1.5;
}
.ws-line:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ws-list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 14px; }
.ws-res { display: flex; gap: 12px; align-items: flex-start; }
.ws-res p { margin: 4px 0 0; line-height: 1.55; }
.ws-thumb { width: 120px; height: auto; border-radius: 6px; border: 1px solid var(--border-soft); flex: 0 0 auto; }
.ws-sample { color: var(--text-dim); font-size: 0.93em; }

/* 글자 지표 하나 · Fix it now(ielts-wcheck.js, 2026-10-03 단계 I) */
.wc-card { margin: 12px 0; }
.wc-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.6; padding: 12px; border-radius: 12px; border: 1px solid var(--border-mid); margin-top: 8px; }
.wc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.wc-words { font-size: 13px; color: var(--text-dim); }
.wc-res { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.wc-res.is-ok { color: #15803d; }
.wc-res.is-no { color: #b45309; }

.wf-band { margin: 0 0 8px; font-size: var(--fs-body); }
.wf-band b { font-size: var(--n1); font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }   /* 피드백 칸의 주인공 숫자 = N1(S9) */

/* 쓰기 Skill drills(ielts-wdrill.js, 2026-10-18 네 영역 훈련 E) — 과제 칸 · 메모 칸 넷 · 쓰기 판 위 접힌 메모 · 닫힘 한 줄 */
.wd-taskbox { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-mid); background: var(--bg-elevated); }
.wd-task { margin: 0 0 8px; font-size: var(--fs-body); line-height: 1.5; }
.wd-img { display: block; max-width: 100%; height: auto; margin: 8px auto; }
.plan-fs { display: grid; gap: 10px; margin: 0 0 14px; }
.plan-f { display: grid; gap: 4px; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim, #56627A); }
.plan-f input { font: inherit; font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-primary); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-mid); background: var(--bg-elevated); }
.plan-memo { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg-primary, #F5F6FA); font-size: 14px; }
.plan-memo summary { cursor: pointer; font-weight: 600; }
.plan-memo ul { margin: 6px 0 0; padding-left: 18px; }
.plan-memo b { margin-right: 4px; }
.wc-closed { margin: 0 0 8px; font-weight: 600; color: var(--success, #12805C); }
.wc-card.is-closed .wc-closed { margin: 0; }
/* 고쳐 쓴 문장 채점 한 줄(ielts-wfeed.js, 2026-10-18) */
.wf-again { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--text-dim, #56627A); }
.wf-again:empty { display: none; }
.wf-again.is-ok { color: var(--success, #12805C); }
.wf-again.is-no { color: var(--text-primary); }