/* ============================================================
   parent-monthly.css — "이번 달 한 장"(monthly.html) 전용 배치
   정본: docs/DESIGN_SPEC_v6.md (§2 팔레트 · §4 컴포넌트 · §6 검수)
   원칙
     - 색은 var(--p-*) 토큰만 쓴다. 새 hex 를 만들지 않는다.
     - 이 화면은 종이로 쓰인다. 화면용 배치와 인쇄용 배치를 같은 파일에서 관리한다.
     - 잠긴 본문은 화면에서도 인쇄에서도 나오지 않는다(엔진이 붙이는 hidden 을 되돌리지 않는다).
   로드 순서: eduverse.css → parent.css → parent-theme.css → parent-monthly.css
   ============================================================ */

/* ── 1. 고르기 줄 (학년 칩 · 월 탭 · 인쇄) ───────────────────── */

.mo-pick {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
  background: var(--p-white);
  display: grid;
  gap: 16px;
}

.mo-pick__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.mo-pick__label {
  flex: 0 0 76px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--p-clay);
}

.mo-pick__row--foot {
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--p-line);
}

/* 월 탭 — 학년 칩과 같은 알약형·같은 높이. 지난달은 흐리게 두되 누를 수 있다. */
.mo-month {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--p-r-pill);
  border: 1px solid var(--p-line);
  background: var(--p-white);
  color: var(--p-ink-2);
  font-family: var(--p-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.mo-month:hover { border-color: var(--p-ink-3); color: var(--p-ink); }
.mo-month[aria-pressed="true"] { background: var(--p-ink); border-color: var(--p-ink); color: var(--p-white); }
.mo-month:focus-visible { outline: 2px solid var(--p-green); outline-offset: 2px; }

/* 지난달 — 선을 점선으로 두고 글자만 한 단계 옅게. 누르는 것은 막지 않는다. */
.mo-month--past { color: var(--p-ink-3); border-style: dashed; }
.mo-month--past[aria-pressed="true"] { color: var(--p-white); border-style: solid; }

.mo-pick__now {
  font-size: 13px;
  font-weight: 600;
  color: var(--p-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ── 2. 한 장(카드) ────────────────────────────────────────── */

.mo-sheet {
  margin-top: 24px;
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
  background: var(--p-white);
  overflow: hidden;
}

.mo-sheet__body { padding: 30px 32px; }
.mo-sheet__body + .mo-sheet__body { padding-top: 0; }

.mo-sheet__title {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--p-ink);
  margin-top: 6px;
  word-break: keep-all;
}

.mo-sheet__lead {
  margin-top: 12px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--p-ink-2);
  word-break: keep-all;
}

.mo-block { margin-top: 34px; }
.mo-block:first-child { margin-top: 0; }

.mo-block__h {
  font-family: var(--p-sans);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--p-ink);
}

.mo-block__sub {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--p-ink-3);
}

/* ── 3. 확인해 둘 것 — 리스트형(3열 그리드를 쓰지 않는다) ────── */

.mo-checks { margin-top: 14px; list-style: none; }

.mo-check {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0 14px;
  padding: 18px 0;
  border-top: 1px solid var(--p-line);
}

.mo-checks--head > .mo-check:first-child { border-top: 0; padding-top: 6px; }

.mo-check__no {
  grid-row: 1 / span 3;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--p-r-pill);
  border: 1px solid var(--p-line);
  background: var(--p-paper-2);
  color: var(--p-clay);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mo-check__title { font-size: 1.02rem; font-weight: 700; color: var(--p-ink); word-break: keep-all; }
.mo-check__body { margin-top: 7px; font-size: 15px; line-height: 1.85; color: var(--p-ink-2); word-break: keep-all; }

.mo-check__why {
  margin-top: 9px;
  padding-left: 12px;
  border-left: 2px solid var(--p-line);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--p-ink-3);
  word-break: keep-all;
}

/* ── 4. 대화 한 세트 — 인용문 ─────────────────────────────── */

.mo-talk { margin-top: 14px; }

.mo-talk__situation {
  padding: 14px 16px;
  border-radius: var(--p-r-sm);
  background: var(--p-paper-2);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--p-ink-2);
  word-break: keep-all;
}

.mo-talk .say { margin-top: 16px; }
.mo-talk__then,
.mo-talk__why {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--p-ink-2);
  word-break: keep-all;
}
.mo-talk__why { color: var(--p-ink-3); font-size: 13.5px; }

/* ── 5. 가정 실천 — 번호 스텝 ─────────────────────────────── */

.mo-practice { margin-top: 14px; }

.mo-practice__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.mo-practice__name { font-size: 1.02rem; font-weight: 700; color: var(--p-ink); word-break: keep-all; }

.mo-practice__min {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--p-clay);
  font-variant-numeric: tabular-nums;
}

.mo-practice__steps { margin-top: 12px; }

/* ── 6. 이번 주 실천 — 손으로 표시하는 네 줄 ────────────────── */

.mo-week { margin-top: 14px; list-style: none; display: grid; gap: 0; }

.mo-week__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--p-line);
  font-size: 15px;
  line-height: 1.8;
  color: var(--p-ink);
  word-break: keep-all;
}

.mo-week__item:first-child { border-top: 0; }

.mo-week__box {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border: 1px solid var(--p-ink-3);
  border-radius: 4px;
  background: var(--p-white);
}

/* ── 7. 다음 달 미리보기 ───────────────────────────────────── */

.mo-next {
  margin-top: 34px;
  padding: 20px 22px;
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
  background: var(--p-sage);
}

.mo-next__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--p-clay);
}

.mo-next__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--p-ink);
  word-break: keep-all;
}

/* ── 8. 출처 ───────────────────────────────────────────────── */

.mo-sources { margin-top: 16px; display: grid; gap: 12px; list-style: none; }

.mo-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--p-line);
}

.mo-source:last-child { border-bottom: 0; padding-bottom: 0; }

.mo-source__name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--p-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  word-break: keep-all;
}

.mo-source__name:hover { color: var(--p-green-2); }

/* ── 9. 잠금 안내(엔진이 붙이는 상자)에 여백만 맞춘다 ────────── */

.mo-sheet .locked__gate { border-radius: 0; }

.mo-sheet .locked__open {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--p-r-sm);
  border: 1px solid var(--p-green);
  background: var(--p-green);
  color: var(--p-white);
  font-family: var(--p-sans);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}

.mo-sheet .locked__open:hover { background: var(--p-green-2); border-color: var(--p-green-2); }
.mo-sheet .locked__open:focus-visible { outline: 2px solid var(--p-green); outline-offset: 3px; }

.mo-sheet .locked__msg {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--p-ink-2);
  word-break: keep-all;
}

.mo-sheet .locked__join,
.mo-sheet .locked__pro {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--p-green);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.mo-sheet .locked__join:hover,
.mo-sheet .locked__pro:hover { color: var(--p-green-2); }

/* 엔진이 만드는 안내 띠 — 화면 아래 고정. parent-theme.css 의 .toast 와 같은 모양. */
.engine-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  transform: translateX(-50%);
  max-width: min(calc(100% - 32px), 420px);
  padding: 13px 18px;
  border-radius: var(--p-r-sm);
  border: 1px solid var(--p-line);
  background: var(--p-ink);
  color: var(--p-paper);
  font-size: 14px;
  line-height: 1.6;
}

.engine-toast:empty, .engine-toast[hidden] { display: none; }

@media (max-width: 900px) {
  .engine-toast { bottom: calc(var(--p-tab-h) + 16px); }
}

/* ── 10. 안내 문구 ─────────────────────────────────────────── */

.mo-foot {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--p-ink-3);
  word-break: keep-all;
}

/* 잠긴 채로 인쇄하실 때만 종이에 나오는 한 줄 */
.mo-printnote { display: none; }

/* ── 11. 좁은 화면 ─────────────────────────────────────────── */

@media (max-width: 720px) {
  .mo-pick { padding: 16px 16px; gap: 14px; }
  .mo-pick__label { flex: 1 1 100%; }
  .mo-pick__row--foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .mo-pick__row--foot .btn { width: 100%; }
  .mo-sheet__body { padding: 22px 18px; }
  .mo-check { grid-template-columns: 26px minmax(0, 1fr); gap: 0 12px; }
  .mo-check__no { width: 26px; height: 26px; font-size: 12px; }
  .mo-next { padding: 18px; }
  .mo-sheet .locked__open { justify-self: stretch; width: 100%; }
}

/* ── 12. 인쇄 (A4 한 장 기준) ──────────────────────────────── */

@media print {
  @page { size: A4; margin: 14mm; }

  /* 화면 전용 장치는 종이에서 뺀다. parent-theme.css 가 nav·tabbar·btn 을 이미 뺀다. */
  .mo-pick,
  .mo-month,
  .mo-pick__now,
  .engine-toast,
  .mo-lead-screen { display: none; }

  .mo-sheet {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .mo-sheet__body { padding: 0; }
  .mo-sheet__body + .mo-sheet__body { padding-top: 0; }

  .mo-sheet__title { font-size: 16pt; margin-top: 0; }
  .mo-sheet__lead { font-size: 10.5pt; max-width: none; }

  .mo-block { margin-top: 14pt; break-inside: avoid; }
  .mo-block__h { font-size: 12pt; }

  .mo-check,
  .mo-week__item,
  .mo-next,
  .mo-talk,
  .mo-practice { break-inside: avoid; }

  .mo-next { background: none; border: 1px solid var(--p-line); padding: 10pt 12pt; }

  .mo-week__box { width: 12pt; height: 12pt; }

  .mo-source__name { display: inline; min-height: 0; text-decoration: none; color: var(--p-ink); }

  /* 잠긴 부분은 종이에도 나오지 않는다. 엔진이 붙인 hidden 을 되돌리지 않는다. */
  .mo-sheet .locked__gate { display: none; }
  .locked .mo-printnote {
    display: block;
    margin-top: 12pt;
    padding-top: 8pt;
    border-top: 1px solid var(--p-line);
    font-size: 9pt;
    color: var(--p-ink-2);
  }
}