/**
 * 늘채움 · 학부모 편지 한 장의 모양
 *
 * **`parent/letter.js` 와 짝이다.** 글자를 그 파일이 만들고 모양을 이 파일이
 * 만든다. 한쪽만 가져다 쓰면 글자는 맞는데 모양이 통째로 벗겨진다.
 *
 * ── 왜 갈라 냈는가 ──
 * 원장이 보내기 전에 보는 미리보기가 **학부모가 실제로 보는 것과 한 글자도
 * 달라서는 안 된다.** 그래야 「이대로 나가도 되나」 를 판단할 수 있다.
 * 두 벌로 두면 한쪽만 고치는 날이 오고, 그때 원장은 멀쩡한 화면을 보고
 * 학부모는 다른 것을 본다.
 *
 * ── `.plet` 으로 감싼다 ──
 * 학부모 앱은 이 이름들을 그대로 쓰지만(`#app` 이 `.plet` 이다), 원장 화면은
 * 데스크 어휘가 이미 `.card` · `.lab` · `.mut` 를 쓰고 있다.
 * **감싸지 않으면 편지 CSS 가 관리실 화면을 통째로 덮는다.**
 */
.plet .num{font-variant-numeric:tabular-nums}
.plet .card{background:#fff; border:1px solid #E4EAE8; border-radius:14px; padding:13px 14px}
.plet .lab{font-size:10.5px; font-weight:700; letter-spacing:.04em; color:#8FA09A}
.plet .h{font-size:14px; font-weight:800}
.plet .p{font-size:12.5px; color:#556660; line-height:1.7}
.plet .mut{font-size:11px; color:#8FA09A}
.plet .row-between{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.plet .week{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:2px 2px 0}
.plet .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#E4EAE8;
  border:1px solid #E4EAE8; border-radius:14px; overflow:hidden}
.plet .stat{background:#fff; padding:13px 6px 12px; text-align:center}
.plet .stat .v{font-size:21px; font-weight:800; letter-spacing:-.04em; line-height:1.1}
.plet .stat .v small{font-size:11.5px; font-weight:700; color:#8FA09A; letter-spacing:0}
.plet .stat .k{font-size:10.5px; color:#8FA09A; margin-top:4px; font-weight:600}
.plet .bub{background:#F2F0E9; border:1px solid #E4DFD1; border-radius:13px 13px 13px 4px;
  padding:12px 13px; font-size:12.5px; line-height:1.75; color:#4A4A3E}
.plet .bub .from{font-size:10.5px; font-weight:800; color:#6E6F53; margin-bottom:5px}
.plet .sum{display:flex; align-items:baseline; gap:6px}
.plet .sum .v{font-size:19px; font-weight:800; letter-spacing:-.04em}
/* 출결 사항 한 줄. **날짜만 굵다.** 종류까지 굵으면 한 줄이 통째로 진해져서,
   붉은색을 안 쓰기로 한 것이 글자 굵기로 되살아난다.
   건이 넷을 넘으면 저절로 접힌다(`flex-wrap` 이 아니라 줄바꿈이다) */
.plet .attline{margin-top:7px}
.plet .attline .av{font-size:12.5px; color:#3E4B47; line-height:1.75}
.plet .attline .av b{font-weight:700}
.plet .attline .adot{color:#C6D2CE; margin:0 4px}

/* 하루마다의 공부 시간. **막대를 걷고 숫자를 세운 자리다.**
   막대는 가장 긴 날을 기준으로 높이를 매겨서, 한 주가 통째로 짧은 주에는
   30분짜리가 가장 높게 섰다. 「많이 한 날」 은 보이는데 「얼마나」 는 안 보였다.
   **높이는 막대가 있던 만큼 그대로다.** 편지의 층이 안 흔들린다.
   ⚠ 한 칸이 폰에서 마흔몇 픽셀이라 `2:10` 으로 적는다. 범례가 한 번 말한다 */
.plet .dnum{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:11px}
.plet .dnum .dc{text-align:center; padding:7px 2px 6px; border-radius:9px; background:#F2F6F5}
/* 학원에 오지 않는 날. **바탕을 걷는다.** 0 인 것과 올 일이 없던 것은 다른 말이다 */
.plet .dnum .dc.off{background:transparent}
.plet .dnum .dd{font-size:10.5px; font-weight:700; color:#7E8F89}
.plet .dnum .dc.off .dd{color:#BCC9C5; font-weight:600}
.plet .dnum .dv{font-size:12.5px; font-weight:800; color:#3E4B47; margin-top:3px;
  letter-spacing:-.03em}
.plet .dnum .dv.z{color:#C6D2CE; font-weight:700}
.plet .legend{margin-top:9px; font-size:10.5px; color:#9AAAA5; line-height:1.6}
/* 공부한 것. 숫자 칸 밑 잔줄이라 **카드 안에서 한 단 낮게** 읽힌다 */
.plet .subj{display:flex; gap:8px; margin-top:10px; padding-top:9px;
  border-top:1px solid #EEF2F1; align-items:baseline}
.plet .subj .sk{font-size:10.5px; font-weight:700; color:#8FA09A; flex:none}
.plet .subj .sv{font-size:12px; color:#3E4B47; line-height:1.7; min-width:0}
/* 과목 사이의 가운뎃점. **글자와 같은 색이면 이름과 시간의 경계가 흐려진다** */
.plet .subj .sv .st{color:#C6D2CE; margin:0 4px}
.plet .prog{height:5px; border-radius:3px; background:#E7EEEC; overflow:hidden}
.plet .prog i{display:block; height:100%; background:#5E7E75; border-radius:3px}
.plet .chips{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.plet .chip{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px;
  background:#EDF3F1; color:#4C6A62}
.plet .chip.w{background:#EFE9DE; color:#6E6F53}
.plet .rows{display:flex; flex-direction:column; margin-top:6px}
.plet .rw{display:flex; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid #EEF2F1}
.plet .rw:first-child{border-top:0}
.plet .rw .rk{font-size:11.5px; color:#8FA09A; font-weight:700; flex:none; width:38px}
.plet .rw .rv{font-size:12.5px; color:#3E4B47; flex:1; min-width:0}
.plet .rw .rr{font-size:11.5px; color:#8FA09A; flex:none}
.plet .nt{border-top:1px solid #EEF2F1; padding:8px 0}
.plet .nt:first-child{border-top:0}
.plet .nt summary{display:flex; align-items:baseline; gap:10px; cursor:pointer;
  list-style:none; font-size:12.5px; color:#3E4B47}
.plet .nt summary::-webkit-details-marker{display:none}
.plet .nt summary .rk{font-size:11.5px; color:#8FA09A; font-weight:700; flex:none; width:38px}
.plet .nt summary .tt{flex:1; min-width:0; font-weight:700}
.plet .nt summary .dd{font-size:11px; color:#8FA09A; flex:none;
  font-variant-numeric:tabular-nums}
.plet .nt summary .ar{color:#B4C7C0; font-size:11px; flex:none; transition:transform .15s}
.plet .nt[open] summary .ar{transform:rotate(90deg)}
.plet .nt .bd{font-size:12px; color:#556660; line-height:1.75; padding:8px 0 2px 48px;
  white-space:pre-wrap}

/* 꼬리는 **편지의 일부가 아니라 종이의 무늬다.** 바탕색에 가깝게 두어
   찾으면 보이고 읽을 때는 안 걸리게 한다. 마지막 카드 바로 밑에 진하게
   붙어 있으면 학부모가 그것을 마지막 한 마디로 읽는다 */
.plet .foot{text-align:center; padding:30px 6px 8px; font-size:10.5px;
  color:#D3DCD8; letter-spacing:.06em; font-weight:600; line-height:1.75;
  user-select:none}