/* 수업안 AI 검토실
   교사용 활동지처럼 차분하게. 외부 글꼴·이미지·아이콘을 부르지 않는다.
   크롬북 1366x768 우선, 모바일 세로에서도 버튼과 입력란이 살아 있어야 한다. */

:root{
  --bg:#F6F2EA;
  --surface:#FFFFFF;
  --ink:#19324A;
  --ink-soft:#4A5B6B;
  --accent:#236B73;
  --accent-dark:#1A5158;
  --warn:#B6473D;
  --ok:#386A52;
  --line:#D6D0C5;

  --sans:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}

*{box-sizing:border-box}

/* .btn 등에 display 를 지정하면 브라우저 기본값 [hidden]{display:none} 을 덮어쓴다.
   공유 버튼처럼 숨겨 둔 요소가 빈 상자로 나타나므로 여기서 못을 박는다. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  padding-bottom:112px;     /* 개인정보 안내 바 자리 — 좁은 화면에서 두 줄이 되어도 버튼을 가리지 않게 */
}

/* 키보드 사용자 */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff; padding:12px 18px; z-index:100;
}
.skip-link:focus{left:0}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
main:focus{outline:none}

/* 상단 */
.topbar{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  background:var(--ink); color:#fff;
  margin:0; padding:12px 20px;
  flex-wrap:wrap;
}
.topbar-name{margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em}
.topbar-step{margin:0; font-size:15px; color:#CFD9E2}

/* 본문 */
main{
  max-width:860px;
  margin:0 auto;
  padding:28px 20px 40px;
}

h1{font-size:30px; line-height:1.35; margin:0 0 12px; letter-spacing:-.02em}
h2{font-size:21px; line-height:1.4; margin:32px 0 10px}
p{margin:0 0 14px}

.lead{color:var(--ink-soft); margin-bottom:22px}
.note{font-size:16px; color:var(--ink-soft); margin:10px 0 0}

.activity-time{
  display:inline-block;
  border:2px solid var(--ink);
  padding:8px 16px;
  font-weight:700;
  margin:6px 0 22px;
}

.warn-strong{
  border-left:5px solid var(--warn);
  background:var(--surface);
  padding:14px 16px;
  margin:0 0 22px;
  font-weight:700;
}

.checklist{margin:0 0 8px; padding-left:22px}
.checklist li{margin-bottom:8px}

/* 수업안 */
.plan{
  background:var(--surface);
  border:1px solid var(--line);
  padding:22px 24px;
  margin-bottom:28px;
}
.plan h3{
  font-size:15px; letter-spacing:.04em; text-transform:none;
  color:var(--ink-soft); margin:22px 0 8px; font-weight:700;
}
.plan h3:first-child{margin-top:0}
.plan p{margin:0 0 10px}
.plan ul,.plan ol{margin:0 0 10px; padding-left:22px}
.plan li{margin-bottom:6px}
.plan .meta{font-size:16px; color:var(--ink-soft)}
.plan .standard{font-size:16px}
.plan .stage{font-weight:700; margin:16px 0 6px}
.plan .ai-mark{
  border-left:5px solid var(--accent);
  padding-left:14px;
  margin-left:-19px;
}
.plan .plan-source{
  font-size:15px; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:12px; margin-top:20px;
}

/* 화면 2의 참고 자료 */
.reference-doc{
  margin:-14px 0 26px;
  font-size:16px;
}
.reference-doc a{
  color:var(--accent); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
}
.reference-doc a:hover{color:var(--accent-dark)}
.reference-doc .rd-note{color:var(--ink-soft); font-size:15px}

/* 인용 */
.quote-box{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:5px solid var(--accent);
  padding:18px 20px;
  margin:0 0 26px;
}
.quote-label{font-size:15px; color:var(--ink-soft); margin:0 0 8px; font-weight:700}
.quote-text{margin:0}

/* 입력 */
.field{margin:0 0 26px}
.field label{display:block; font-weight:700; margin-bottom:6px}
.field-help{font-size:16px; color:var(--ink-soft); margin:0 0 8px}

textarea{
  display:block; width:100%;
  font-family:var(--sans);
  font-size:18px; line-height:1.6;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line);
  padding:12px 14px;
  resize:vertical;
}
textarea.mono-ish{white-space:pre-wrap}
textarea:focus{border-color:var(--accent)}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px}

/* 검토표 */
.review{
  border:1px solid var(--line);
  background:var(--surface);
  padding:16px 18px;
  margin:0 0 16px;
}
.review legend{font-weight:700; padding:0 6px}
.review .field-help{margin-bottom:12px}
.review-options{display:flex; gap:12px; flex-wrap:wrap}
.review-options label{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  padding:10px 14px;
  min-height:48px;
  cursor:pointer;
}
.review-options input{width:20px; height:20px; margin:0}
.review-options label:hover{background:#F0EDE6}
/* 색만으로 구분하지 않는다 — 글자와 기호를 함께 쓴다 */
.review-options input:checked + .mark-ok{color:var(--ok); font-weight:700}
.review-options input:checked + .mark-fix{color:var(--warn); font-weight:700}
.review.answered-ok{border-left:5px solid var(--ok)}
.review.answered-fix{border-left:5px solid var(--warn)}

/* 최종 확인 */
.final-check{list-style:none; margin:0 0 24px; padding:0}
.final-check li{margin-bottom:4px}
.final-check label{
  display:flex; align-items:center; gap:12px;
  min-height:48px; padding:6px 4px; cursor:pointer;
}
.final-check input{width:22px; height:22px; margin:0; flex:none}

/* 버튼 */
.actions{display:flex; gap:12px; margin:28px 0 0; align-items:stretch}
.actions-wrap{flex-wrap:wrap; margin-top:14px}

.btn{
  font-family:var(--sans);
  font-size:17px; font-weight:700; line-height:1.3;
  min-height:48px; padding:12px 20px;
  color:var(--ink); background:var(--surface);
  border:2px solid var(--ink);
  cursor:pointer;
  text-decoration:none;           /* AI 도구 버튼은 a 요소다 */
  display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{background:#EFEAE1}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-dark); border-color:var(--accent-dark)}
.btn-quiet{border-color:var(--line); color:var(--ink-soft); font-weight:400}
.btn-quiet:hover{border-color:var(--ink-soft); color:var(--ink)}
.btn-danger{border-color:var(--warn); color:var(--warn)}
.btn-danger:hover{background:var(--warn); color:#fff}

/* 마지막 줄의 다음 버튼은 오른쪽으로 */
.actions .btn-primary:last-child{margin-left:auto}
.actions-wrap .btn-primary:last-child{margin-left:0}

/* 예시 응답 · 해설 */
.fallback,.debrief{
  border:1px solid var(--line);
  background:var(--surface);
  padding:0 18px;
  margin:26px 0 0;
}
.fallback summary,.debrief summary{
  font-weight:700; cursor:pointer;
  padding:14px 0; min-height:48px;
  display:flex; align-items:center;
}
.fallback[open],.debrief[open]{padding-bottom:18px}

.sample{
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word;
  background:var(--bg);
  border:1px solid var(--line);
  padding:14px 16px;
  margin:12px 0;
  max-height:340px; overflow:auto;
}

.debrief h3{font-size:17px; margin:18px 0 8px}
.debrief ul{margin:0; padding-left:22px}
.debrief li{margin-bottom:8px}

/* 쉬는 시간 활동 — 화면 맨 아래에 조용히 둔다.
   고정하지 않는다. 크롬북 768px 화면에서 고정 요소가 늘어나면 본문이 좁아진다. */
.side-activities{
  max-width:860px;
  margin:0 auto;
  padding:16px 20px 24px;
  border-top:1px solid var(--line);
  font-size:16px;
}
.side-activities .sa-row{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 18px;
}
.side-activities .sa-row + .sa-row{margin-top:10px}
.side-activities-label{color:var(--ink-soft); font-weight:700}
.side-activities a{
  color:var(--accent); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  padding:6px 0;
}
.side-activities a:hover{color:var(--accent-dark)}
.side-activities .sa-note{color:var(--ink-soft); font-size:15px}

@media (max-width:720px){
  .side-activities .sa-row{flex-direction:column; gap:10px; align-items:flex-start}
  .side-activities a{padding:8px 0}
}

/* 개인정보 안내 바 — 항상 보인다 */
.privacy-bar{
  position:fixed; left:0; right:0; bottom:0;
  margin:0; padding:12px 20px;
  background:var(--ink); color:#F0E6E4;
  border-top:4px solid var(--warn);
  font-size:15px; line-height:1.5;
  text-align:center;
}

/* 알림 */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  background:var(--ink); color:#fff;
  padding:14px 22px; font-size:17px; font-weight:700;
  max-width:calc(100% - 40px);
  opacity:0; pointer-events:none; transition:opacity .15s;
  z-index:60;
}
.toast.show{opacity:1}
.toast.warn{background:var(--warn)}

#print-area{display:none}

/* 모바일 */
@media (max-width:720px){
  body{font-size:17px}
  h1{font-size:25px}
  main{padding:22px 16px 32px}
  .two-col{grid-template-columns:1fr; gap:0}
  .actions{flex-direction:column}
  .actions .btn-primary:last-child{margin-left:0}
  .actions-wrap{flex-direction:row}
  .btn{width:100%}
  .actions-wrap .btn{width:auto; flex:1 1 auto}
  .plan{padding:18px 16px}
  .plan .ai-mark{margin-left:0}
}

/* 인쇄 — 브라우저의 PDF로 저장을 쓴다 */
@media print{
  body{background:#fff; padding:0; font-size:11pt}
  .topbar,.privacy-bar,.actions,.toast,.skip-link,.fallback,.debrief,.field-help{display:none !important}
  main{max-width:none; padding:0}

  /* 결과 인쇄 */
  body.print-result .screen{display:none !important}
  body.print-result #print-area{display:block}

  /* 수업안 인쇄 */
  body.print-plan .screen{display:none !important}
  body.print-plan #screen-2{display:block !important}
  body.print-plan #screen-2 .field{display:none}
  body.print-plan .plan{border:none; padding:0}

  .plan .ai-mark{margin-left:0; border-left:3px solid #000}
  h1{font-size:16pt}
  #print-area h1{font-size:16pt; margin-bottom:4pt}
  #print-area h2{font-size:12pt; margin:14pt 0 4pt}
  #print-area p{margin:0 0 8pt; white-space:pre-wrap}
  #print-area .pa-meta{font-size:10pt; color:#444}
}