/* ============================================================
   ENDOLPHIN — 엔치원2 공개 화면: 선생님 · 학생 · 일정
   ------------------------------------------------------------
   관리자 화면이 아니라 **시청자가 보는 쪽** 입니다.
   엔치원2 본 화면(nch.css)과 같은 결을 씁니다.

   ⚠️ 종족 표시는 주인님이 주신 마크 그림만 씁니다.
      임의 이모지를 쓰지 않습니다.
   ============================================================ */

/* ── 큰 상자 ── */
.pg{ margin-top:22px; padding:20px 20px 24px; border-radius:var(--r-lg);
  background:var(--surface); border:1.5px solid var(--line); box-shadow:var(--shadow); }
.pg-h{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.pg-h h2{ font-family:'Jua',sans-serif; font-weight:400; font-size:22px; color:var(--ink); }
.pg-h b{ font-family:inherit; font-weight:400; font-size:13px; color:var(--ink-3); }
.pg-d{ font-size:14px; color:var(--ink-3); margin-bottom:4px; }

/* ── 종족 줄 ── */
.rc{ margin-top:20px; }
.rc:first-of-type{ margin-top:12px; }
.rc-h{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.rc-h img{ width:34px; height:34px; object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.16)); }
.rc-h span{ font-family:'Jua',sans-serif; font-weight:400; font-size:18px; color:var(--ink); }
.rc-h b{ font-family:inherit; font-weight:400; font-size:12.5px; color:var(--ink-3); }

.pcs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:12px; }

/* ── 사람 카드 ── */
.p{ position:relative; padding:16px 17px 15px; border-radius:var(--r);
  background:var(--surface-2); border:1.5px solid var(--line);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.p:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.p-top{ display:flex; align-items:center; gap:11px; }
.p-ph{ width:48px; height:48px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--surface); display:grid; place-items:center;
  font-size:20px; color:var(--ink-3); }
.p-ph img{ width:100%; height:100%; object-fit:cover; }
.p-who{ flex:1; min-width:0; }
.p-nm{ display:block; font-family:'Jua',sans-serif; font-weight:400;
  font-size:19px; color:var(--ink); }
.p-tier{ display:block; font-size:12px; font-weight:800; color:var(--ink-3); }
/* 이름 오른쪽 종족 마크 — 종족 줄과 같은 크기 */
.p-mark{ width:34px; height:34px; object-fit:contain; flex:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.16)); }

.p-ds{ font-size:13px; color:var(--ink-2); margin-top:10px; line-height:1.7; }
.p-bt{ font-size:12px; color:var(--ink-3); margin-top:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-act{ display:flex; gap:7px; margin-top:12px; align-items:center; }
.p-home{ display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:12.5px; font-weight:800; padding:8px 14px; border-radius:999px;
  background:var(--surface); border:1.5px solid var(--line-2); color:var(--ink-2); }
.p-home:hover{ border-color:var(--pink); color:var(--pink-ink); }
.p-chk{ font-size:11.5px; color:var(--ink-3); animation:pChk 1.4s ease-in-out infinite; }
@keyframes pChk{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }
@media (prefers-reduced-motion: reduce){ .p-chk{ animation:none; } }

/* 빈자리 (저그 선생님 공석) — DB 에는 행이 없습니다 */
.p.vacant{ border-style:dashed; background:transparent; }
.p.vacant:hover{ transform:none; box-shadow:none; }
.p.vacant .p-nm{ color:var(--ink-3); }
.p.vacant .p-mark{ opacity:.4; filter:grayscale(.6); }

/* ── LIVE — 은은하게 숨쉬듯 ── */
.p.live{ border-color:var(--pink); }
.p-live{ position:absolute; top:-10px; left:15px;
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:999px;
  color:#fff; background:linear-gradient(135deg,#ff6f8e,#e0568f);
  box-shadow:0 3px 10px rgba(224,86,143,.35);
  animation:pLive 2.4s ease-in-out infinite; }
.p-live i{ width:6px; height:6px; border-radius:50%; background:#fff;
  animation:pDot 2.4s ease-in-out infinite; }
@keyframes pLive{
  0%,100%{ box-shadow:0 3px 10px rgba(224,86,143,.30); }
  50%    { box-shadow:0 3px 17px rgba(224,86,143,.64); }
}
@keyframes pDot{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@media (prefers-reduced-motion: reduce){
  .p-live, .p-live i{ animation:none; }
}

/* ── 아직 없을 때 ── */
.pg-empty{ padding:30px 20px; text-align:center; border-radius:var(--r);
  font-size:14px; color:var(--ink-3); line-height:1.8;
  border:1.5px dashed var(--line-2); }

@media (max-width:640px){
  .pg{ padding:16px 15px 18px; }
  .pcs{ grid-template-columns:1fr; }
  .pg-h h2{ font-size:19px; }
}

/* ══ 공개 월간 달력 ═══════════════════════════════════════ */
.scbar{ display:flex; align-items:center; justify-content:center; gap:14px; margin:16px 0 12px; }
.scbar b{ font-family:'Jua',sans-serif; font-weight:400; font-size:27px;
  min-width:180px; text-align:center; color:var(--ink); }
.scbar button{ font-family:inherit; font-size:19px; cursor:pointer; line-height:1;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--line-2); color:var(--ink-2); }
.scbar button:hover{ border-color:var(--pink); color:var(--pink-ink); }
.scbar .tbtn{ width:auto; padding:0 17px; border-radius:999px;
  font-size:14.5px; font-weight:800; }

.sc{ border-radius:var(--r); overflow:hidden;
  background:var(--surface); border:1.5px solid var(--line); }
.sc-dow{ display:grid; grid-template-columns:repeat(7,1fr);
  background:var(--surface-2); border-bottom:1.5px solid var(--line); }
.sc-dow span{ padding:12px 0; text-align:center; font-size:15px; font-weight:800;
  color:var(--ink-2); }
.sc-dow span.sun{ color:#d64550; }
.sc-dow span.sat{ color:#3d7bd6; }

.sc-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.sc-grid .cell{ min-height:132px; padding:9px 9px 10px; position:relative;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.sc-grid .cell:nth-child(7n){ border-right:0; }
.sc-grid .cell.out{ background:var(--surface-2); opacity:.5; }

.sc-grid .d{ display:flex; align-items:baseline; gap:5px; }
.sc-grid .d-n{ font-size:18px; font-weight:800; color:var(--ink); }
.sc-grid .cell.sat .d-n{ color:#3d7bd6; }
/* ★ 공휴일이 토요일보다 뒤 — 토요일에 걸린 공휴일이 파랗게 나오면 안 됩니다 */
.sc-grid .cell.sun .d-n, .sc-grid .cell.holi .d-n{ color:#d64550; }
.sc-grid .d-h{ font-size:12.5px; color:#d64550; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 오늘 — 확실하게 */
.sc-grid .cell.today{ background:rgba(255,111,168,.07);
  box-shadow:inset 0 0 0 2.5px var(--pink); }
.sc-grid .cell.today .d-n{ color:var(--pink-ink); font-size:20px; }
.sc-grid .d-today{ font-size:11px; font-weight:800; color:#fff;
  background:var(--pink); padding:2px 8px; border-radius:999px; line-height:1.5; }

.sc-grid .evs{ margin-top:7px; display:grid; gap:4px; }
.sc-grid .ev{ font-size:13.5px; padding:5px 8px; border-radius:8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2); }
.sc-grid .ev .t{ font-weight:800; opacity:.75; margin-right:3px; }
.sc-grid .ev.ck{ background:rgba(255,111,168,.14); border-color:rgba(255,111,168,.4); color:#b3313f; }
.sc-grid .ev.univ_war{ background:rgba(99,132,214,.12); border-color:rgba(99,132,214,.36); color:#3d5bb5; }
.sc-grid .ev.lesson{ background:rgba(110,231,183,.16); border-color:rgba(60,190,140,.36); color:#1f7f5f; }
.sc-grid .ev.collab{ background:rgba(230,185,100,.16); border-color:rgba(210,160,70,.38); color:#9a6b20; }
.sc-grid .ev.entrance_exam{ background:rgba(167,139,250,.16); border-color:rgba(150,115,240,.36); color:#6b45b5; }
.sc-grid .ev.event{ background:rgba(240,120,190,.14); border-color:rgba(230,100,175,.36); color:#a53170; }
/* ── 관리자가 고른 색 아홉 가지 (2026-09-05) ──────────────
   ★ 종류색 규칙보다 뒤에 써서, 색을 고르면 이게 이깁니다.
     색을 안 고른 일정은 위의 종류색이 그대로 나옵니다. */
.sc-grid .ev.k-red{    background:rgba(228,73,79,.14);  border-color:rgba(228,73,79,.42);  color:#b3252f; }
.sc-grid .ev.k-orange{ background:rgba(232,134,44,.15); border-color:rgba(232,134,44,.42); color:#a35a12; }
.sc-grid .ev.k-yellow{ background:rgba(229,198,47,.20); border-color:rgba(200,170,30,.45); color:#8a6d09; }
.sc-grid .ev.k-green{  background:rgba(58,165,92,.15);  border-color:rgba(58,165,92,.42);  color:#1f7a3d; }
.sc-grid .ev.k-blue{   background:rgba(50,114,208,.13); border-color:rgba(50,114,208,.40); color:#1f5eb5; }
.sc-grid .ev.k-navy{   background:rgba(51,64,140,.13);  border-color:rgba(51,64,140,.40);  color:#2c3a80; }
.sc-grid .ev.k-purple{ background:rgba(125,71,189,.14); border-color:rgba(125,71,189,.40); color:#66339e; }
.sc-grid .ev.k-gray{   background:rgba(138,143,151,.16);border-color:rgba(138,143,151,.44);color:#55606b; }
.sc-grid .ev.k-pink{   background:rgba(224,85,154,.14); border-color:rgba(224,85,154,.42); color:#a82f6d; }

.sc-grid .ev-more{ font-size:12.5px; color:var(--ink-3); cursor:pointer; padding:3px 7px; }
.sc-grid .ev-more:hover{ color:var(--pink-ink); }

@media (max-width:700px){
  .sc-grid .cell{ min-height:96px; padding:6px 5px 7px; }
  .sc-grid .d-n{ font-size:15px; }
  .sc-grid .d-h{ display:none; }
  .sc-grid .ev{ font-size:11.5px; padding:3px 5px; }
  .scbar b{ font-size:22px; min-width:140px; }
}

/* ══ 모바일 달력 표시 다듬기 (2026-09-06) ═══════════════════
   CSS 만 고칩니다. schedule-view.js 는 손대지 않았습니다.
   ① '오늘' 배지가 '오/늘' 로 세로로 쪼개지던 것 → 한 줄 고정
   ② 일정 칩이 '엔…' 으로 심하게 잘리던 것 → 두 줄까지 보이게 */
@media (max-width:700px){
  /* ① 오늘 배지 — 한 줄 유지. 칸이 좁으면 날짜 밑으로 내려갑니다 */
  .sc-grid .d{ flex-wrap:wrap; gap:4px; row-gap:2px; }
  .sc-grid .d-today{
    white-space:nowrap; font-size:10px; padding:1px 6px; line-height:1.6; }

  /* ② 일정 칩 — 칸 여백을 줄여 글자 폭을 벌고, 세 줄까지 보여줍니다.
        한글은 단어 단위로 끊습니다(keep-all). */
  .sc-grid .cell{ min-height:106px; padding:6px 2px 7px; }
  .sc-grid .ev{
    font-size:9.5px; padding:3px 2px; line-height:1.34; letter-spacing:-.2px;
    white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
  .sc-grid .ev .t{ margin-right:2px; }
  .sc-grid .ev-more{ font-size:11px; padding:2px 4px; }

  /* ③ 위쪽 '오늘' 버튼도 '오/늘' 로 쪼개지던 것 → 한 줄 고정 */
  .scbar{ gap:8px; }
  .scbar b{ min-width:110px; }
  .scbar .tbtn{ flex:0 0 auto; white-space:nowrap; font-size:12.5px; padding:0 12px; }
}

/* ══ 종족 고르는 줄 ═══════════════════════════════════════
   선생님·학생 화면 위쪽. 처음엔 '전체' 가 눌려 있습니다.
   ⚠️ 종족 색은 여기서 새로 정하지 않고 --race 를 씁니다.
      (색을 두 곳에 적으면 어긋납니다 — 2026-09-06) */
.rft{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0 18px; }
.rft-b{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:800; line-height:1;
  padding:9px 15px; border-radius:999px; color:var(--ink-2);
  background:var(--surface); border:1.5px solid var(--line-2);
  transition:border-color .15s, color .15s, background .15s; }
.rft-b:hover{ border-color:var(--pink); color:var(--pink-ink); }
.rft-b b{ font-size:12px; font-weight:800; opacity:.6; }
.rft-m{ width:18px; height:18px; object-fit:contain; }

/* 눌린 칸 — 종족이면 그 종족 색, 전체면 분홍 */
.rft-b.on{ color:#fff; background:var(--pink); border-color:var(--pink); }
.rft-b.on b{ opacity:.8; }
.rft-b.r-t.on{ background:#2f6ed6; border-color:#2f6ed6; }
.rft-b.r-p.on{ background:#d79a0d; border-color:#d79a0d; }
.rft-b.r-z.on{ background:#8b45c9; border-color:#8b45c9; }

@media (max-width:700px){
  .rft{ gap:6px; margin:12px 0 14px; }
  .rft-b{ font-size:12.5px; padding:8px 12px; }
  .rft-m{ width:16px; height:16px; }
}