/* ============================================================
   🪜 학습 단계 — 암기 → 고르기 → 철자
   ------------------------------------------------------------
   ★ 색만으로 알려주지 않습니다.
     통과한 단계에는 「통과」 글자 이름표가, 잠긴 단계에는 「잠김」 이
     함께 붙습니다. 색을 못 보셔도 어디까지 했는지 알 수 있습니다.
   ★ 문제 푸는 화면(.q-card · .choices · .rv)은 시험·오답 연습과
     같은 모양을 그대로 씁니다. 같은 모양을 두 번 적지 않습니다.
   ============================================================ */

:root{
  --sy-ok:     #256B49;   /* 통과 — 초록 (흰 바탕 대비 6.4 : 1) */
  --sy-ok-bg:  #E2F1E8;
  --sy-lock:   #5E7288;   /* 잠김 — 회색 */
  --sy-lock-bg:#EDF2F7;
  --sy-now:    #0E6A88;   /* 지금 할 단계 */
}

/* ── 맨 위 한 줄 ── */
.sy-one{
  margin:0 0 16px; font-size:14.5px; line-height:1.8; color:var(--ink-soft);
}
.sy-note-warn{
  margin:0 0 16px; padding:11px 14px; font-size:13px; line-height:1.8;
  border:1px solid var(--warn); border-radius:var(--radius);
  background:var(--warn-soft); color:var(--ink);
}

/* ── 진도 막대 ── */
.sy-bar{
  position:relative; height:26px; margin:0 0 20px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); overflow:hidden;
}
/* ★ 채워진 쪽에 세로 선을 긋지 않습니다.
     선을 그으면 ① 가운데 글씨를 가로질러 지저분하고
     ② 100% 일 때 둥근 모서리 밖으로 삐져나와 홈처럼 보입니다.
     대신 채운 색을 조금 진하게 해서 경계가 저절로 보이게 합니다. */
.sy-bar-in{
  position:absolute; inset:0 auto 0 0;
  background:var(--sy-ok-bg);
  transition:width .25s ease;
}
.sy-bar-t{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; color:var(--ink-mid);
}

/* ── 단계 카드 셋 ── */
.sy-steps{ display:grid; gap:14px; }
@media (min-width:760px){ .sy-steps{ grid-template-columns:repeat(3, 1fr); } }

.sy-step{
  border:1px solid var(--line); border-left:4px solid var(--line-soft);
  border-radius:var(--radius); background:var(--surface);
  padding:16px 17px 18px; display:flex; flex-direction:column; gap:9px;
}
.sy-step.ok  { border-left-color:var(--sy-ok); }
.sy-step.lock{ border-left-color:var(--sy-lock); background:var(--surface-2); }

.sy-step-h{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sy-step-h .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--surface-2); color:var(--ink-mid);
  font-size:12.5px; font-weight:800; font-family:var(--font-mono);
}
.sy-step.ok .sy-step-h .n{ background:var(--sy-ok-bg); color:var(--sy-ok); }
.sy-step-h h2{ margin:0; font-size:16px; }

.sy-tag{
  font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px;
  border:1px solid transparent;
}
.sy-tag.ok  { background:var(--sy-ok-bg);   color:var(--sy-ok);   border-color:var(--sy-ok); }
.sy-tag.lock{ background:var(--sy-lock-bg); color:var(--sy-lock); border-color:var(--sy-lock); }

.sy-step .d{ margin:0; font-size:13.5px; line-height:1.75; color:var(--ink-soft); }
.sy-best{ margin:0; font-size:13px; color:var(--ink-mid); }
.sy-best small{ color:var(--ink-faint); }
.sy-lock-why{ margin:0; font-size:12.5px; color:var(--ink-faint); line-height:1.7; }
.sy-step form{ margin-top:auto; }
.sy-step .btn{ width:100%; }

/* ── 다 끝냈을 때 ── */
.sy-all-done{
  margin:20px 0 0; padding:18px 20px;
  border:1px solid var(--sy-ok); border-radius:var(--radius);
  background:var(--sy-ok-bg);
}
.sy-all-done .t{ margin:0 0 6px; font-size:16px; font-weight:800; color:var(--sy-ok); }
.sy-all-done p{ margin:0 0 12px; font-size:14px; line-height:1.8; color:var(--ink); }

.sy-honest{
  margin:22px 0 0; padding:13px 15px; font-size:12.5px; line-height:1.85;
  border:1px dashed var(--line); border-radius:var(--radius);
  background:var(--surface-2); color:var(--ink-soft);
}
.sy-nav{ display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 30px; }
.sy-nav .btn{ white-space:normal; word-break:keep-all; }

/* ============================================================
   1단계 암기 — 넘겨 보는 카드
   ============================================================ */
.sy-count{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; font-size:13.5px; color:var(--ink-mid);
}
.sy-count b{ font-family:var(--font-mono); font-size:17px; color:var(--ink); }
.sy-count-bar{
  flex:1; height:8px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line); overflow:hidden;
}
.sy-count-bar i{ display:block; height:100%; background:var(--sy-now); transition:width .2s ease; }

/* ★ 자바스크립트가 꺼져 있으면 카드가 모두 펼쳐진 채로 보입니다.
     assets/study.js 가 .is-one 을 달아줄 때만 한 장씩 넘기는 모양이 됩니다.
     그래야 스크립트가 막힌 기기에서도 공부를 할 수 있습니다. */
.sy-cards{ position:relative; display:grid; gap:12px; }
.sy-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:34px 22px 24px; text-align:center;
}
.sy-cards.is-one{ display:block; }
.sy-cards.is-one .sy-card{ display:none; }
.sy-cards.is-one .sy-card.on{ display:block; }

/* 접힌 카드 — 뜻과 고르는 단추를 잠시 가립니다 */
.sy-card.is-folded .ko,
.sy-card.is-folded .sy-judge{ display:none; }
.sy-flip{ display:none; }                    /* 스크립트가 켜질 때만 나옵니다 */
.sy-card.is-folded .sy-flip{ display:inline-block; }

.sy-card .en{ font-size:30px; font-weight:800; line-height:1.4; word-break:break-word; }
.sy-card .en b{ font-weight:800; }
.sy-card .en .pos{
  font-size:12px; font-weight:600; color:var(--ink-faint);
  margin-left:7px; vertical-align:middle;
}
.sy-card .ko{ margin-top:18px; }
.sy-card .ko .m{ display:block; font-size:20px; font-weight:700; line-height:1.6; }
.sy-card .ko .ex{
  display:block; margin-top:9px; font-size:13.5px; line-height:1.8;
  color:var(--ink-soft); font-style:italic;
}

.sy-flip{
  margin-top:20px; padding:10px 20px;
  border:1px solid var(--line-2); border-radius:999px;
  background:var(--surface-2); color:var(--ink-mid);
  font-size:14px; font-weight:700; cursor:pointer;
}
.sy-flip:hover{ background:var(--surface); }

.sy-judge{ display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.sy-judge .btn{ min-width:130px; }

.sy-cards.is-one ~ .sy-memo-end{ display:none; }
.sy-cards.is-one ~ .sy-memo-end.is-on{ display:block; }
.sy-memo-end{
  margin-top:18px; padding:18px 20px; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.sy-memo-end p{ margin:0 0 12px; font-size:14px; color:var(--ink-soft); }

/* ── 한 판 결과 ── */
.sy-score{
  padding:20px 22px; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.sy-score.ok{ border-color:var(--sy-ok); background:var(--sy-ok-bg); }
.sy-score .n{ font-size:44px; font-weight:800; line-height:1.1; color:var(--ink-mid); }
.sy-score.ok .n{ color:var(--sy-ok); }
.sy-score p{ margin:9px 0 0; font-size:14.5px; color:var(--ink); }
.sy-score .note{ margin-top:10px; font-size:12.5px; color:var(--ink-faint); }

/* ── 단어장 목록·홈에 붙는 작은 진도 칩 ── */
.sy-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--ink-mid); border:1px solid var(--line);
}
.sy-chip.ok{ background:var(--sy-ok-bg); color:var(--sy-ok); border-color:var(--sy-ok); }

/* ============================================================
   어두운 바탕에서
   ============================================================ */
body.theme-dark{
  --sy-ok:     #6FD39E;
  --sy-ok-bg:  #17321F;
  --sy-lock:   #93A6B6;
  --sy-lock-bg:#1D2731;
  --sy-now:    #63C4E0;
}

/* ============================================================
   인쇄 — 단계 화면은 종이로 낼 것이 아닙니다
   ============================================================ */
@media print{
  .sy-bar, .sy-nav, .sy-flip, .sy-judge, .sy-memo-end, .sy-count{ display:none !important; }
  .sy-cards, .sy-cards.is-one{ display:block !important; }
  .sy-card, .sy-cards.is-one .sy-card{ display:block !important; page-break-inside:avoid; }
  .sy-card.is-folded .ko{ display:block !important; }
}

/* ============================================================
   📋 숙제 — 내는 화면 · 현황 표
   ------------------------------------------------------------
   숙제도 「학습 단계」 와 같은 초록/회색을 씁니다.
   한 화면에서 두 가지 색 규칙이 돌아가면 헷갈리기 때문입니다.
   ============================================================ */

/* 선생님 화면(style.css)에는 .soft 가 없어서 여기에 둡니다 */
.field label .soft,
.hw-pick summary .soft{ font-weight:500; color:var(--ink-faint); font-size:12px; }

.box-note{
  margin:20px 0 30px; padding:15px 17px;
  border:1px dashed var(--line); border-radius:var(--radius);
  background:var(--surface-2);
}
.box-note .t{ margin:0 0 6px; font-size:14px; font-weight:800; color:var(--ink); }
.box-note p{ margin:0; font-size:13px; line-height:1.85; color:var(--ink-soft); }

/* ── 문법·회화 고르기 ── */
.hw-pick{ display:grid; gap:8px; }
.hw-pick details{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.hw-pick summary{
  padding:11px 14px; font-size:14px; font-weight:700; cursor:pointer;
  list-style:none; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.hw-pick summary::-webkit-details-marker{ display:none; }
.hw-pick summary::before{ content:'▸'; color:var(--ink-faint); }
.hw-pick details[open] summary::before{ content:'▾'; }
.hw-pick-in{
  max-height:280px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line); padding:6px 8px;
}
.hw-one{
  display:flex; align-items:baseline; gap:9px;
  padding:7px 8px; border-radius:8px; cursor:pointer; font-size:13.5px;
}
.hw-one:hover{ background:var(--surface-2); }
.hw-one input{ margin:0; flex:none; }
.hw-one span{ min-width:0; }
.hw-one small{ margin-left:auto; color:var(--ink-faint); font-size:11.5px; white-space:nowrap; }

/* ── 현황 표 ── */
.hw-sum{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px; }
.hw-sum .one{
  flex:1 1 130px; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.hw-sum .one .k{ display:block; font-size:12px; color:var(--ink-faint); margin-bottom:4px; }
.hw-sum .one .v{ font-size:22px; font-weight:800; font-family:var(--font-mono); }
.hw-sum .one.ok .v{ color:var(--sy-ok); }

.hw-yes{ color:var(--sy-ok); font-weight:800; }
.hw-no { color:var(--ink-faint); font-weight:700; }
.hw-late{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  font-size:11px; font-weight:700;
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn);
}

@media print{
  .hw-pick, .box-note{ display:none !important; }
}

/* ── 학생이 보는 숙제 카드 ── */
.hw-list{ display:grid; gap:12px; }
.hw-card{
  border:1px solid var(--line); border-left:4px solid var(--line-soft);
  border-radius:var(--radius); background:var(--surface); padding:16px 18px 17px;
}
.hw-card.ok  { border-left-color:var(--sy-ok); }
.hw-card.late{ border-left-color:var(--warn); }

.hw-card-h{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px; }
.hw-card-h h2{ margin:0; font-size:16.5px; }

.hw-what{ margin:0; font-size:13.5px; line-height:1.8; color:var(--ink-soft); }
.hw-set{
  display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px;
  font-size:11.5px; background:var(--surface-2); color:var(--ink-mid); border:1px solid var(--line);
}
.hw-now{ margin:9px 0 0; font-size:13.5px; color:var(--ink); }
.hw-now b{ color:var(--ink); }
.hw-due{ margin-left:8px; font-size:12px; color:var(--ink-faint); }
.hw-memo{
  margin:9px 0 0; padding:9px 12px; font-size:13px; line-height:1.8;
  border-left:3px solid var(--line-2); background:var(--surface-2); color:var(--ink-soft);
}
.hw-go{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:13px; }
.hw-who{ font-size:12px; color:var(--ink-faint); }

/* 홈에 붙는 「이번 주 숙제」 */
.hw-home{ display:grid; gap:8px; }
.hw-home a{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  padding:11px 13px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:var(--radius); background:var(--surface);
}
.hw-home a:hover{ background:var(--surface-2); }
.hw-home .t{ font-weight:700; font-size:14px; }
.hw-home .d{ font-size:12px; color:var(--ink-faint); margin-left:auto; white-space:nowrap; }