/* 학부모 화면 전용 스타일 — parent.html <style>에서 분리 (규칙 1, 07-26). app.css 다음에 로드된다. */
  /* 자녀 탭 · 주간/월간 · 담당 선생님이 한 줄 (원장 지시 08-01) — 폰에서 한 줄이 곧 일정표 높이다 */
  .prow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .prow .tabs, .prow .vtabs { margin-bottom: 0; }
  /* 선생님 이름 — 누르면 근무 요일·시간 (원장 지시 08-01). 단추처럼 보이되 줄을 차지하지 않는다 */
  .wk-who button { border: 0; background: none; padding: 0 2px; font-size: 13.5px; font-weight: 700; color: #1f2937; cursor: pointer; text-decoration: underline dotted #9ca3af; }
  .wk-who button + button { margin-left: 10px; }
  .wk-who span { color: #6b7280; font-weight: 400; }
  .vtabs { display: flex; gap: 8px; margin-bottom: 12px; }
  .vtabs button { padding: 7px 20px; border: 1px solid #d1d5db; background: #fff; border-radius: 999px; font-size: 14px; cursor: pointer; }
  .vtabs button.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
  .monav-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
  .monav { min-width: 34px; height: 30px; padding: 0 10px; border: 1px solid #d1d5db; background: #fff; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
  .monav .lbl { font-size: 13.5px; font-weight: 600; }
  /* 작은 화면(대부분 학부모 휴대폰): 월간은 « » 기호만 (원장 지시 07-28).
     주간 한달 점프(«  »)는 **다시 보인다** (원장 지시 08-11) — 카드 제목에서 자녀 이름을
     뺀 만큼 그 줄에 자리가 생겼다. 07-28 에 숨긴 까닭이 자리 부족이었으므로 그 까닭이 없어졌다 */
  @media (max-width: 640px) {
    .monav .lbl { display: none; }
    header.top .lbl { display: none; } /* 폰: 헤더는 자물쇠만 — 로그아웃과 나란히 들어가야 한다 (07-30) */
    /* 이름과 단추를 **한 줄**에 (원장 지시 07-31) — app.css 는 폰에서 제목을 한 줄 통째로 쓰게 해
       단추가 아래로 밀렸다. 학부모 화면은 세로 한 줄이 아깝다: 그만큼 일정표가 위로 올라온다 */
    header.top h1 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    header.top { padding: 7px 10px; }
  }
  .molabel { font-size: 15px; font-weight: 600; }
  .chg { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef0f3; font-size: 13px; color: #374151; }
  .chg b { font-size: 18px; color: #1d4ed8; }
  .chg.zero b { color: #dc2626; }
  /* 주간 그리드 (규칙 12-A2) */
  .wk-rooms { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
  .wk-rooms button { padding: 5px 12px; border: 1px solid #d1d5db; background: #fff; border-radius: 999px; font-size: 13px; cursor: pointer; }
  .wk-rooms button.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
  .wk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .wk-head h2 { font-size: 16px; }
  .wk-scroll { overflow-x: auto; border: 1px solid #dfe7f2; border-radius: 8px; }
  .wk-grid { display: grid; grid-template-columns: 42px repeat(7, minmax(88px, 1fr)); }
  .wk-corner, .wk-dayhead { position: sticky; top: 0; background: #eef3fa; border-bottom: 1px solid #dfe7f2; font-size: 12px; text-align: center; padding: 6px 0; z-index: 4; font-weight: 700; color: #111827; }
  .wk-dayhead.wknd { background: #faf4e8; } /* 주말 — 자기 시간축을 갖는 구간 (원장 지시 07-24) */
  .wk-dayhead.today { background: #eff6ff; color: #1d4ed8; }
  /* 시간축은 가로 스크롤에 밀리지 않고 항상 보인다 (원장 지시 07-22) */
  .wk-corner { left: 0; z-index: 6; }
  /* 시간축 — v1과 동일: 시간마다 좌상단 'N시' / 우하단 '~N시' (모바일은 숫자만) */
  .wk-timeax { position: sticky; left: 0; background: #f8fafc; border-right: 1px solid #dfe7f2; z-index: 5; overflow: hidden; }
  .wk-th1 { position: absolute; left: 3px; font-size: 11px; font-weight: 500; color: #4b5563; line-height: 1; }
  .wk-th2 { position: absolute; right: 4px; font-size: 11px; font-weight: 500; color: #9ca3af; line-height: 1; }
  .wk-th1 i, .wk-th2 i { font-style: normal; }
  @media (max-width: 767px) { .wk-th1 i, .wk-th2 i { display: none; } }
  .wk-daycol { position: relative; border-right: 1px solid #e3e9f2; overflow: hidden; background: #fff; }
  .wk-daycol.today { background: #fbfdff; }
  .wk-hline { position: absolute; left: 0; right: 0; border-top: 1px solid #edf1f7; }
  .wk-hlineh { position: absolute; left: 0; right: 0; border-top: 1px dotted #e6ebf3; } /* 10분 보조선 — v1처럼 옅은 점선 */
  .wk-lane { position: absolute; top: 0; bottom: 0; border-left: 1px solid #eef0f3; pointer-events: none; }
  /* 셀 속 강의실 이름 (원장 지시 07-31) — 셀이 짧으면 글자에 자리를 내주고 숨는다 */
  .wk-room { font-size: 8.5px; font-style: normal; font-weight: 700; color: #1e3a8a; opacity: .65; line-height: 1; margin-bottom: 1px; }
  .wk-ev[data-n="1"] .wk-room, .wk-ev[data-n="2"] .wk-room { display: none; }
  .wk-ev { position: absolute; box-sizing: border-box; border-radius: 4px; overflow: hidden; cursor: pointer; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 10px; line-height: 1.05; padding: 1px; color: #111827; word-break: keep-all; }
  .wk-nav { margin-left: auto; margin-right: 10px; display: flex; gap: 6px; } /* 오른쪽 끝에 붙지 않게 여백 (원장 지시 07-23) */
  .wk-nav button { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 3px 10px; font-size: 12px; cursor: pointer; line-height: 1.2; }
  /* 연장 토막 — **학원 주간일정표와 같은 색** (admin.css .ev.extstaff/.extparent, 원장 지시 08-08).
     기존 셀은 그대로 두고 늘어난 부분만 갈라 칠한다: 강사·관리자 자주 / 학부모 당근 */
  .wk-ev.wk-ext { background: #f0c8ee; border: 1px solid #d783d1; }
  .wk-ev.wk-ext.byparent { background: #ffe4c8; border: 1px solid #fdba74; }
  .wk-oth { position: absolute; box-sizing: border-box; border-radius: 4px; background: rgba(148,163,184,.28); border: 1px solid rgba(148,163,184,.45); z-index: 1; }
  /* 강사 근무시간 밖 = 빗금 (학부모 편의 — 예약 불가 구간, 원장 지시 07-24) */
  .wk-off { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(148,163,184,.09) 0 5px, rgba(148,163,184,.22) 5px 10px); }
  /* 수업 상세 모달 (A4) */
  .ses-back { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); align-items: center; justify-content: center; z-index: 50; padding: 16px; }
  .ses-card { background: #fff; border-radius: 12px; max-width: 420px; width: 100%; max-height: 85vh; overflow: auto; padding: 18px; position: relative; }
  .ses-h { font-size: 17px; font-weight: 700; color: #1d4ed8; padding-right: 34px; }
  .ses-sub { font-size: 13px; color: #6b7280; margin: 3px 0 10px; }
  .ses-row { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid #f1f3f5; font-size: 14px; line-height: 1.45; }
  .ses-row .k { color: #6b7280; width: 68px; flex: none; font-size: 13px; }
  .ses-x { position: absolute; top: 14px; right: 14px; border: 0; background: #f3f4f6; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 17px; line-height: 1; }
  .ses-chg-btn { margin-top: 14px; width: 100%; padding: 10px; border: 1px solid #1d4ed8; background: #eff6ff; color: #1d4ed8; border-radius: 8px; font-size: 14px; cursor: pointer; }
  /* 보강권 카드 (규칙 12-A5) — 0분이면 아예 뜨지 않으므로(원장 지시 08-01) 강조가 기본이다 */
  .mk-card { display: flex; align-items: center; gap: 8px; border: 1px solid #93c5fd; background: #eff6ff; border-radius: 10px; padding: 8px 14px; margin-bottom: 8px; font-size: 14px; color: #1e3a8a; }
  .mk-card b { color: #1d4ed8; font-size: 17px; }
  .mk-card button { border: 1px solid #1d4ed8; background: #1d4ed8; color: #fff; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
  .ses-chg-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f3; }
  /* 폰 가로 모드 (원장 지시 07-23) — 헤더·탭 최소화, 주간표 + ‹오늘› 이동만 꽉 차게 */
  @media (orientation: landscape) and (max-height: 520px) {
    header.top { display: none; }
    main { padding: 3px; }
    .card { padding: 4px 6px; margin-bottom: 4px; border-radius: 6px; }
    .prow { margin-bottom: 3px; }
    .tabs { margin-bottom: 3px; }
    .tabs button { padding: 3px 10px; font-size: 12px; }
    .vtabs { display: none; } /* 월간 보기는 세로에서 — 가로는 주간 전용 */
    #weekWrap { display: block !important; }
    #monthWrap { display: none !important; }
    .wk-head { margin-bottom: 3px; }
    .wk-head h2 { font-size: 13px; }
    .wk-rooms { margin-bottom: 3px; }
    .wk-rooms button { padding: 2px 9px; font-size: 11.5px; }
    .chg { display: none; }
  }

  /* 결제 창 (원장 캡처 08-09) — 학부모 화면에는 .modal-bg 규칙이 없어서 창이 **페이지 맨 아래에
     펼쳐진 채로** 보였다. 관리자 화면(admin.css)에만 있던 규칙이라 여기서는 아무것도 안 걸렸다 */
  .modal-bg { display: none; position: fixed; inset: 0; background: rgba(17,24,39,.45);
    align-items: center; justify-content: center; z-index: 50; padding: 16px; }
  .modal-bg.show { display: flex; }
  .modal { background: #fff; border-radius: 12px; width: 420px; max-width: 94vw;
    max-height: 85vh; overflow: auto; padding: 18px 20px; position: relative; }
  .modal .close { position: absolute; top: 14px; right: 14px; border: 0; background: #f3f4f6;
    border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 17px; line-height: 1; }
  .modal .sub { color: #6b7280; font-size: 13px; margin-top: 3px; }

  /* 도우미가 아직 안 열린 학원에서는 흑백으로 둔다 — 못 하는 일을 열어 두면 그게 거짓말이 된다.
     결제(#vPay)는 08-13 에 열려 이 규칙에서 빠졌다 (parentpay.js 의 PAY_READY) */
  #botBtn[disabled] { filter: grayscale(1); opacity: .5; }
  #botBtn[disabled] { cursor: not-allowed; }

/* 날짜 고르기 달력 (pickcal.js, 원장 지시 08-15) — 보강 예약·자습 예약 공용 */
.pkc-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.pkc-h b { font-size: 14px; }
.pkc-nav { width: 30px; padding: 3px 0; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; }
.pkc-nav:disabled { color: #d1d5db; cursor: default; }
.pkc-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pkc-w { text-align: center; font-size: 11px; color: #6b7280; padding: 2px 0; }
/* 주말 — 일요일은 빨강, 토요일은 파랑 (특강 달력이 쓰던 가름을 합치며 공용으로 올렸다 08-19).
   `.we` 는 월요일 시작 창(보강·자습)이 끝 두 칸에 쓰던 옛 이름 — `.sat`/`.sun` 이 대신한다 */
.pkc-w.sat { color: #2563eb; }
.pkc-w.sun { color: #dc2626; }
.pkc-d { padding: 6px 0; border: 1px solid #e5e7eb; background: #fff; border-radius: 7px; font-size: 12.5px; cursor: pointer; }
.pkc-d:disabled, .pkc-d[data-pk-off] { background: #f9fafb; color: #d1d5db; border-color: #e5e7eb; cursor: default; }
/* 누름을 받는 잠금 칸 — 겉모습은 disabled 와 **똑같다** (고를 수 있어 보이면 안 된다).
   누르면 까닭만 말한다 (원장 확정 08-22 — 폰에는 호버가 없다) */
.pkc-d[data-pk-off] { cursor: help; }
.pkc-d.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; font-weight: 700; }
.pkc-d.dot { box-shadow: inset 0 -3px 0 var(--pkdot, #f59e0b); }
/* 보강 달력의 「내가 잡은 날」 (#336, 원장 확정 08-20) — 칸이 작아 글자가 안 들어가므로
   **바탕색 하나로** 말한다. 색은 특강·자습 달력의 잡힌 칸(.pkc-d.big.mark)과 같은 연파랑 */
#mkCal .pkc-d.dot { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; font-weight: 700; box-shadow: none; }
/* 아직 달력을 열 때가 아닐 때 — 빈 격자 대신 다음 걸음 한 줄 (특강 순차 활성화, 08-17) */
.pkc-empty { text-align: center; color: #9ca3af; font-size: 12.5px; padding: 18px 0; }
/* 칸 속에 정보를 적는 큰 칸 (#283, 원장 지시 08-19) — 날짜 / 속(쌤·시간대) / 꼬리표 3줄.
   속·꼬리를 안 넘기는 창(보강·일정 변경)은 이 class 가 안 붙어 종전 그대로다 */
.pkc-d.big { min-height: 56px; padding: 5px 0 3px; font-size: 14px; line-height: 1.1; }
.pkc-d.big .pkc-s, .pkc-d.big .pkc-t { display: block; height: 11px; font-size: 9px; font-weight: 700; font-style: normal; overflow: hidden; text-decoration: none; }
.pkc-d.big .pkc-s { color: var(--pkin, #6b7280); }
.pkc-d.big .pkc-t { color: var(--pktag, #2563eb); }
/* 잡힌 날 — 밑줄(.dot) 대신 **연한 파랑 칸** (#283-2, 원장 지시 08-19: 특강 달력과 같은 꼴).
   무엇이 잡혔는지는 꼬리표 글자가 말하므로 밑줄 색이 따로 할 일이 없다 */
.pkc-d.big.mark { border-color: #bfdbfe; background: #eff6ff; box-shadow: none; }
/* 결제 대기 칸 — 파란 바탕이 **천천히** 깜박인다 (원장 지시 09-06 13:42: *"바탕색(파란색)이 깜박깜박
   천천히 해서, 눈에 띄도록"*). 안내 상자가 달력이 선 뒤에야 서므로 칸 자신이 눈을 끈다.
   고른 날(.on)이면 진한 파랑이 이긴다 — 뒤에 오는 규칙이라 그대로 덮인다 */
.pkc-d.big.wait { animation: pkWait 2.4s ease-in-out infinite; }
@keyframes pkWait { 50% { background: #bfdbfe; border-color: #60a5fa; } }
/* 그 시각에 수업이 겹치는 날 — 빗금 (특강 #242). 속·꼬리에는 번지지 않는다 */
.pkc-d.strike { text-decoration: line-through; }
/* 구간의 시작·끝 (#335, 원장 지시 08-20 "월별 등록 시작과 끝에 조그맣게 ㄱ자로 구분") —
   월간 일정표(.moday.pstart/.pend)와 같은 자리·같은 색이되, **팔 길이는 칸 변의 1/3**이다
   (원장 지시 08-20 2차: *"선분의 길이를 절반으로. 위치는 좋아"* → 3차: *"절반 말고 1/3"*).
   테두리를 통째로 칠하면 칸 하나가 통째로 둘러싸인 것처럼 보여 「고름」과 헷갈렸다.
   칸의 배경(흰색·연파랑)을 건드리지 않으려고 겹칩(::before/::after)으로 그린다 */
.pkc-d.pstart, .pkc-d.pend { position: relative; }
.pkc-d.pstart::before, .pkc-d.pend::after {
  content: ""; position: absolute; width: 33%; height: 33%; pointer-events: none;
}
.pkc-d.pstart::before {
  left: -1px; top: -1px; border-top: 2px solid rgba(17,24,39,.7); border-left: 2px solid rgba(17,24,39,.7);
  border-radius: 7px 0 0 0;
}
.pkc-d.pend::after {
  right: -1px; bottom: -1px; border-bottom: 2px solid rgba(17,24,39,.7); border-right: 2px solid rgba(17,24,39,.7);
  border-radius: 0 0 7px 0;
}
/* 고른 날은 무슨 일이 있어도 파랑 — 잡힌 칸(.mark)·잠긴 칸보다 뒤에 두어 색이 뒤집히지 않게 한다 */
.pkc-d.big.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; font-weight: 700; }
.pkc-d.big.on .pkc-s, .pkc-d.big.on .pkc-t { color: #dbeafe; }
button.b-add { background: #fff; color: #1d4ed8; border: 1px solid #93c5fd; border-radius: 6px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
button.b-pay { background: #ea580c; color: #fff; border: 1px solid #ea580c; border-radius: 6px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
button.b-close { background: #fff; color: #374151; border: 1px solid #d1d5db; border-radius: 6px; padding: 9px 16px; font-size: 14px; cursor: pointer; }
button.b-add:disabled, button.b-pay:disabled { background: #f3f4f6; color: #c4c9d1; border-color: #eef0f3; cursor: default; }

/* 접힘 줄의 details 기본 ▸ 표식 떼기 (원장 지시 08-17) — 결제 창 청구서 줄(parentpay.js)과
   보강 예약 제목(parent.html)이 같이 쓴다: 줄에 이미 글이 차서 표식까지 있으면 좁은 화면에서 넘친다 */
.sum-plain { list-style: none; }
.sum-plain::-webkit-details-marker { display: none; }

/* 서버를 기다리는 동안 (원장 지시 09-17) — *"에러나 난것처럼 가만히 화면이 멈춰 있다가
   갑자기 다음 화면으로 5초쯤 후에 툭 바뀌고 있어요"*. 멈춘 화면과 「일하는 중」이 겉이 같으면
   안 된다. 점 셋이 차례로 밝아진다. 움직임을 싫어하는 기기에서는 가만히 흐리게만 (접근성) */
.ppWait { display: flex; align-items: center; gap: 4px; color: #6b7280; font-size: 12.5px; padding: 12px 2px; }
.ppWait span { width: 4px; height: 4px; border-radius: 50%; background: #9ca3af; opacity: .25; animation: ppDot 1s infinite; }
.ppWait span:nth-child(2) { animation-delay: .15s; }
.ppWait span:nth-child(3) { animation-delay: .3s; }
@keyframes ppDot { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ppWait span { animation: none } }