/* ============================================================
   ENDOLPHIN — 엔치원2 (nch.css)
   ------------------------------------------------------------
   GAME 안에 있지만 '학교 · 성장 · 함께 배우는 공간' 느낌으로.
   어둡고 딱딱하지 않게, 민트(성장)와 골드(기록)를 씁니다.
   색은 shared/theme.css 토큰 위에 얹으므로 다크 모드도 따라옵니다.
   ============================================================ */

/* ══ 소개 슬라이더 ═══════════════════════════════════════
   PC = 넓은 가로형, 폰 = 손가락으로 미는 카드.
   자동으로 넘어가고, 손을 대면 멈춥니다.                    */
.nc-slider{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1.5px solid var(--line); box-shadow:var(--shadow); background:var(--surface); }
.nc-track{ display:flex; transition:transform .45s cubic-bezier(.22,.61,.36,1); }
/* 좌우 여백은 화살표(42px + 14px 여백) 를 피해서 넉넉히 둡니다 —
   안 그러면 화살표가 글자 위에 겹칩니다. */
.nc-slide{ flex:0 0 100%; min-width:100%; padding:46px 76px 44px;
  min-height:250px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.nc-slide-k{ font-size:12.5px; font-weight:800; letter-spacing:1.4px; color:#1f7f5f; }
html[data-theme="dark"] .nc-slide-k{ color:#8ef0c9; }
.nc-slide-t{ font-family:'Jua',sans-serif; font-weight:400; font-size:34px; line-height:1.2; color:var(--ink); }
.nc-slide-d{ font-size:15.5px; color:var(--ink-2); white-space:pre-line; }
.nc-slide-go{ margin-top:8px; align-self:flex-start; font-size:14px; font-weight:800; color:#1f7f5f;
  padding:10px 18px; border-radius:999px; background:rgba(110,231,183,.2); transition:.15s; }
.nc-slide:hover .nc-slide-go{ background:rgba(110,231,183,.34); }
html[data-theme="dark"] .nc-slide-go{ color:#8ef0c9; }
/* 슬라이드마다 옅은 바탕색 — 넘어갈 때 결이 바뀌는 게 보이도록 */
.nc-slide.s0{ background:radial-gradient(circle at 88% 10%, rgba(110,231,183,.26) 0, transparent 46%),
                          radial-gradient(circle at 6% 96%, rgba(230,185,100,.16) 0, transparent 44%); }
.nc-slide.s1{ background:radial-gradient(circle at 88% 10%, rgba(255,111,168,.20) 0, transparent 46%); }
.nc-slide.s2{ background:radial-gradient(circle at 88% 10%, rgba(167,139,250,.24) 0, transparent 46%); }
.nc-slide.s3{ background:radial-gradient(circle at 88% 10%, rgba(158,203,240,.26) 0, transparent 46%); }
.nc-slide.s4{ background:radial-gradient(circle at 88% 10%, rgba(230,185,100,.24) 0, transparent 46%); }

.nc-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink-2); font-size:17px; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:.15s; display:flex; align-items:center; justify-content:center; }
.nc-arrow:hover{ border-color:#5bc9a2; color:var(--ink); transform:translateY(-50%) scale(1.06); }
.nc-prev{ left:14px; } .nc-next{ right:14px; }
.nc-dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:7px; z-index:2; }
.nc-dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--line-2); transition:.16s; }
.nc-dot.on{ width:22px; border-radius:999px; background:#2f9f7a; }

/* ══ 멤버 ══════════════════════════════════════════════ */
.nc-race{ margin:18px 0 8px; display:flex; align-items:center; gap:8px;
  font-family:'Jua',sans-serif; font-weight:400; font-size:18px; color:var(--ink-2); }
.nc-race i{ font-style:normal; font-size:18px; }
.nc-members{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; }
.nc-m{ text-align:left; font-family:inherit; cursor:pointer; padding:14px; border-radius:var(--r);
  border:1.5px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.nc-m:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }

/* ══ 종족 색 — 2026-09-05 주인님 지정 ═══════════════════
   테란 파랑 · 저그 보라 · 프로토스 노랑.
   앰블럼 그림에 쓰인 색과 맞춰 뒀습니다.                  */
.r-t{ --race:#2f6ed6; --race-soft:rgba(47,110,214,.13); }   /* 테란   — 파랑 */
.r-z{ --race:#8b45c9; --race-soft:rgba(139,69,201,.13); }   /* 저그   — 보라 */
.r-p{ --race:#d79a0d; --race-soft:rgba(215,154,13,.15); }   /* 프로토스 — 노랑 */

.nc-m.r-t, .nc-m.r-z, .nc-m.r-p{ border-color:var(--race); }
.nc-m.r-t:hover, .nc-m.r-z:hover, .nc-m.r-p:hover{
  box-shadow:0 8px 22px var(--race-soft); }
/* 움짤 — 사진과 같은 자리에 같은 크기로 */
.nc-m-vid{ width:100%; height:100%; object-fit:cover; display:block; background:#111; }
.nc-modal-ph .nc-m-vid{ width:100%; height:100%; }
/* 화면 움직임을 줄이도록 설정한 분에게는 첫 장면에서 멈춥니다 */
@media (prefers-reduced-motion: reduce){
  .nc-m-vid{ animation:none; }
}

/* 종족 앰블럼 */
.nc-race-em{ width:34px; height:34px; object-fit:contain; flex:0 0 auto;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.18)); }
.nc-race.r-t, .nc-race.r-z, .nc-race.r-p{ color:var(--race); }
.nc-m-ph{ width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; margin-bottom:10px;
  background:var(--bg-2); display:flex; align-items:center; justify-content:center;
  font-size:34px; color:var(--ink-3); }
.nc-m-ph img{ width:100%; height:100%; object-fit:cover; }
.nc-m-nm{ font-family:'Jua',sans-serif; font-weight:400; font-size:18px; color:var(--ink); }
.nc-m-meta{ margin-top:3px; display:flex; flex-wrap:wrap; gap:5px; }
.nc-tagm{ font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:999px; }
/* 종족 태그 — 위 .r-t/.r-p/.r-z 에 정한 종족 색을 그대로 씁니다.
   ⚠️ 여기에 색을 따로 적지 마세요. 두 곳이 어긋납니다.
      (2026-09-05 — 태그만 주황·보라·초록으로 따로 놀고 있었음) */
.nc-tagm.t{ color:#2f6ed6; background:rgba(47,110,214,.13); }    /* 테란   — 파랑 */
.nc-tagm.p{ color:#b07c05; background:rgba(215,154,13,.16); }    /* 프로토스 — 노랑 */
.nc-tagm.z{ color:#8b45c9; background:rgba(139,69,201,.13); }    /* 저그   — 보라 */
/* 엔치원 표시 티어 — 스타 전체 티어표와는 별개 값입니다 (2026-09-05) */
.nc-tagm.tier{ color:#0f766e; background:rgba(45,212,191,.20); }
.nc-tagm.tier.pending{ color:var(--ink-3); background:var(--bg-2); font-weight:700; }
.nc-tagm.role{ color:var(--ink-2); background:var(--bg-2); }
html[data-theme="dark"] .nc-tagm.t{ color:#8ab6f5; }
html[data-theme="dark"] .nc-tagm.p{ color:#f0cd8a; }
html[data-theme="dark"] .nc-tagm.z{ color:#c9a0f0; }
.nc-m.open-slot{ border-style:dashed; background:var(--surface-2); cursor:default; opacity:.75; }
.nc-m.open-slot:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--line-2); }
.nc-m.open-slot .nc-m-nm{ color:var(--ink-3); }

/* 멤버 상세 (지금은 간단히, 나중에 경력·성적·경기기록이 여기 붙습니다) */
.nc-modal{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(30,26,34,.45); backdrop-filter:blur(3px); }
.nc-modal.show{ display:flex; }
.nc-modal-card{ position:relative; width:100%; max-width:380px; padding:28px 24px 24px;
  border-radius:var(--r-lg); background:var(--surface); border:1.5px solid var(--line); box-shadow:var(--shadow-lg); }
.nc-modal-x{ position:absolute; top:12px; right:14px; border:0; background:none; cursor:pointer;
  font-size:19px; color:var(--ink-3); }
.nc-modal-ph{ width:96px; height:96px; margin:0 auto 12px; border-radius:20px; overflow:hidden;
  background:var(--bg-2); display:flex; align-items:center; justify-content:center; font-size:40px; color:var(--ink-3); }
.nc-modal-ph img{ width:100%; height:100%; object-fit:cover; }
.nc-modal-nm{ text-align:center; font-family:'Jua',sans-serif; font-weight:400; font-size:24px; color:var(--ink); }
.nc-modal-meta{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.nc-modal-bio{ margin-top:14px; font-size:14px; color:var(--ink-2); text-align:center; line-height:1.7; }
/* SOOP 방송국 가기 (2026-09-05) — 주소를 아는 멤버에게만 붙습니다 */
.nc-modal-soop{ display:block; margin-top:14px; padding:11px 16px; border-radius:12px;
  text-align:center; font-size:14px; font-weight:800; text-decoration:none;
  color:var(--ink); background:var(--bg-2); border:1.5px solid var(--line);
  transition:.15s; }
.nc-modal-soop:hover{ border-color:var(--race, var(--line-2)); color:var(--race, var(--ink)); }
.nc-modal-note{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); text-align:center; }

/* ══ 경기 기록 ═════════════════════════════════════════
   스타 화면과 같은 game_matches 한 줄을 조건만 다르게 읽습니다.  */
.nc-mlist{ display:flex; flex-direction:column; gap:8px; }
.nc-mrow{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:var(--r);
  border:1.5px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); }
.nc-mres{ flex:0 0 auto; width:38px; height:38px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-family:'Jua',sans-serif; font-size:15px; }
.nc-mres.w{ color:#1f7f5f; background:rgba(110,231,183,.24); }
.nc-mres.l{ color:var(--pink-ink); background:var(--pink-soft); }
html[data-theme="dark"] .nc-mres.w{ color:#8ef0c9; }
.nc-mmid{ flex:1 1 auto; min-width:0; }
.nc-mvs{ display:block; font-size:15px; font-weight:700; color:var(--ink); }
.nc-mmeta{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-3); }
.nc-mright{ flex:0 0 auto; text-align:right; }
.nc-mscore{ display:block; font-family:'Jua',sans-serif; font-weight:400; font-size:18px; color:var(--ink-2); }
.nc-mdate{ display:block; font-size:12px; color:var(--ink-3); }

/* ══ 반응형 ══════════════════════════════════════════ */
@media (max-width:760px){
  .nc-slide{ padding:32px 26px 40px; min-height:210px; }
  .nc-slide-t{ font-size:26px; }
  .nc-slide-d{ font-size:14.5px; }
  .nc-arrow{ display:none; }          /* 폰에서는 손가락으로 밉니다 */
}
@media (max-width:640px){
  .nc-members{ grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:10px; }
  .nc-m-nm{ font-size:16.5px; }
  .nc-slide-t{ font-size:23px; }
}

/* ══ 엔치원2 메뉴 (2026-09-05 신설) ═════════════════════
   엔치원2 안의 여섯 갈래로 들어가는 카드.
   스타크래프트 허브(.sc-card)와 같은 결로 맞췄습니다. */
.nc-menu{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin:22px 0 8px;
}
.nc-mi{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:22px 22px 18px; text-decoration:none;
  border-radius:var(--r-lg); border:1.5px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nc-mi::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 92% 6%, rgba(110,231,183,.22) 0, transparent 46%);
}
.nc-mi > *{ position:relative; }
.nc-mi:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg), var(--glow); border-color:#5bc9a2; }
.nc-mi-ic{ font-size:26px; line-height:1; }
.nc-mi-nm{ font-family:'Jua',sans-serif; font-weight:400; font-size:21px; color:var(--ink); }
.nc-mi-ds{ font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.nc-mi-go{ margin-top:auto; padding-top:10px; font-size:13.5px; font-weight:800; color:#1f7f5f; }
html[data-theme="dark"] .nc-mi-go{ color:#8ef0c9; }

/* 소개관 — 첫 칸은 한 줄을 다 씁니다 (대표 갈래) */
.nc-mi-intro{ grid-column:1 / -1; }
.nc-mi-intro::before{
  background:radial-gradient(circle at 88% 8%, rgba(255,111,168,.24) 0, transparent 46%),
             radial-gradient(circle at 6% 96%, rgba(167,139,250,.22) 0, transparent 48%);
}
.nc-mi-intro:hover{ border-color:var(--pink); }
.nc-mi-intro .nc-mi-go{ color:var(--pink-ink); }

/* ⚠️ hidden 은 반드시 이겨야 합니다.
   .nc-mi 가 display:flex 라서, 그냥 hidden 만 걸면 브라우저 기본값
   [hidden]{display:none} 이 클래스 규칙에 밀려 그대로 보입니다.
   (2026-09-07 실측 — 장부 카드가 비로그인에게 그대로 보였습니다)
   장부 카드는 권한을 확인하기 전까지 절대 보이면 안 됩니다. */
.nc-mi[hidden]{ display:none !important; }

/* 장부 — 관계자만 볼 수 있는 갈래 */
.nc-mi-lock::before{ background:radial-gradient(circle at 92% 6%, rgba(100,116,139,.20) 0, transparent 46%); }
.nc-mi-lock:hover{ border-color:var(--slate); }
.nc-mi-lock .nc-mi-go{ color:var(--slate); }

@media (max-width:900px){ .nc-menu{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .nc-menu{ grid-template-columns:1fr; gap:11px; }
  .nc-mi{ padding:18px 17px 16px; }
  .nc-mi-nm{ font-size:19px; }
}

/* ════════════════════════════════════════════════════════════
   ENDOLPHIN ACADEMY 리디자인 (2026-09-05)
   ------------------------------------------------------------
   시안: 밝고 귀여운 아카데미 로비. 아이보리·연핑크·민트·라벤더.
   ⚠️ 링크·기능·문구는 그대로입니다. 겉모습만 얹었습니다.
   ⚠️ HERO 왼쪽은 '그림 안 글자' 가 아니라 전부 HTML 입니다.
      그래야 폰에서 안 찌그러지고 버튼도 그대로 눌립니다.
   ════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────── */
.nc-slider{ border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 16px 40px rgba(214,138,164,.16); }
.nc-slide{ padding:0; }

.nc-slide.has-img{ display:grid; grid-template-columns:44% 56%; align-items:center;
  min-height:340px;
  background:linear-gradient(100deg,#fffdfa 0 34%, #fff4f8 62%, #f4f1ff 100%); }
.nc-slide-tx{ display:flex; flex-direction:column; gap:9px; padding:44px 28px 44px 72px; }
.nc-slide:not(.has-img) .nc-slide-tx{ padding:46px 76px 44px; }

.nc-slide-pre{ font-family:'Gaegu',cursive; font-size:16.5px; font-weight:700; color:var(--ink-2); }
.nc-slide.has-img .nc-slide-k{ display:none; }
.nc-slide.has-img .nc-slide-t{ font-size:52px; letter-spacing:-1px; line-height:1.05; }
.nc-slide-sub{ font-family:'Playfair Display',serif; font-weight:700;
  font-size:14px; letter-spacing:5px; color:var(--ink-3); margin-top:-2px; }
.nc-slide.has-img .nc-slide-d{ margin-top:6px; }
.nc-slide.has-img .nc-slide-go{ margin-top:14px; font-family:'Jua',sans-serif; font-weight:400;
  font-size:16px; color:#fff; background:linear-gradient(135deg,#12a06d,#19b97f);
  padding:13px 26px; box-shadow:0 8px 20px rgba(18,160,109,.28); }
.nc-slide.has-img:hover .nc-slide-go{ background:linear-gradient(135deg,#0e8d5f,#15a874); }

.nc-slide-img{ width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; align-self:stretch;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 9%, #000 24%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 9%, #000 24%);
  transition:transform .5s ease; }
.nc-slide.has-img:hover .nc-slide-img{ transform:scale(1.02); }

/* ── 메뉴 카드 (위 3칸 / 아래 교육일지 넓게 + 장부) ──────────
   2026-09-06 시안(메인배너 2.png) 기준으로 다시 짰습니다.
   ⚠️ 카드 겉모습만 바꿉니다 — 링크·문구·데이터·권한·API 는 그대로입니다.
   ⚠️ 시안 이미지를 배경으로 깔지 않고, HTML/CSS + 기존 에셋으로 다시 그렸습니다.
   ⚠️ 시안 속 가짜 인물은 쓰지 않습니다. 선생님·학생은 실제 등록된 사진만. */
.nc-menu{ grid-template-columns:repeat(3,1fr); gap:16px; }
.nc-mi{
  padding:24px 24px 22px; border-radius:26px; overflow:hidden; gap:0;
  min-height:344px;
  border:1.5px solid rgba(255,255,255,.9); box-shadow:0 10px 26px rgba(214,138,164,.13);
}
.nc-mi:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(214,138,164,.22); }

/* 머리줄 — 아이콘 + 영문 라벨 */
.nc-mi-head{ display:flex; align-items:center; gap:9px; }
.nc-mi-ic-img{ width:34px; height:34px; object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
.nc-mi-ic2{ width:34px; height:34px; border-radius:11px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:0 5px 12px rgba(0,0,0,.14); }
.nc-mi-ic2.st{ background:linear-gradient(135deg,#b39cff,#7c5cf0); }
.nc-mi-ic2.sc{ background:linear-gradient(135deg,#5fd9ae,#19b97f); }
.nc-mi-ic2.nt{ background:linear-gradient(135deg,#7fc9a8,#3aa77e); }
.nc-mi-ic2.lk{ background:linear-gradient(135deg,#9a92c4,#655e88); }
.nc-mi-lab{ font-family:'Playfair Display',serif; font-weight:800;
  font-size:12.5px; letter-spacing:2.4px; color:var(--ink-3); }
.nc-mi-teacher .nc-mi-lab{ color:#4a4fb5; }
.nc-mi-student .nc-mi-lab{ color:#7c3fb5; }
.nc-mi-sched   .nc-mi-lab{ color:#12906c; }
.nc-mi-note    .nc-mi-lab{ color:#8a7a5f; }
.nc-mi-lock    .nc-mi-lab{ color:#6f6892; }

.nc-mi-nm{ font-size:30px; margin-top:10px; line-height:1.15; }
.nc-mi-ds{ font-size:13.5px; line-height:1.65; margin-top:7px; word-break:keep-all; }

/* 바닥줄 — 왼쪽 이동 글, 오른쪽 손글씨 */
.nc-mi-foot{ margin-top:auto; padding-top:16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.nc-mi-foot .nc-mi-go{ margin-top:0; padding-top:0; }
.nc-mi-go{ font-size:14.5px; }
.nc-hand{ font-family:'Gaegu',cursive; font-size:15px; line-height:1.25;
  text-align:right; color:#dc93b2; transform:rotate(-4deg); white-space:nowrap; }
.nc-sign{ position:absolute; right:24px; bottom:9px;
  font-family:'Playfair Display',serif; font-size:9px; letter-spacing:2.4px;
  color:rgba(120,110,160,.45); }

/* 바탕 그림(워터마크) — 카드 밖으로 안 나가게 */
.nc-mi .nc-wm{ position:absolute; pointer-events:none; }
.nc-mi .nc-wm-race{ inset:0; overflow:hidden; }
.nc-wm-race img{ position:absolute; }
.nc-wm-race .w1{ width:132px; right:-26px; top:-20px; transform:rotate(10deg); opacity:.13; }
.nc-wm-race .w2{ width:92px;  right:74px;  top:38px;  transform:rotate(-9deg); opacity:.09; }
.nc-wm-race .w3{ width:112px; right:-16px; top:128px; transform:rotate(-15deg); opacity:.10; }
.nc-mi .nc-wm-cap{ right:-8px; top:6px; font-size:104px; line-height:1;
  opacity:.10; transform:rotate(-10deg); }
.nc-mi .nc-wm-cal{ right:14px; top:14px; font-size:56px; line-height:1;
  opacity:.9; transform:rotate(6deg); filter:drop-shadow(0 6px 12px rgba(25,185,127,.22)); }

/* ⚠️ 기존 .nc-mi::before 가 민트 빛을 덮어써서 카드가 전부 초록으로 보였습니다.
   카드마다 그 빛을 각자 색으로 바꿔줍니다 (2026-09-05 실측 후 수정). */
.nc-mi-teacher{ background:linear-gradient(155deg,#ffffff 0 40%, #eef1ff 78%, #f6efff 100%); }
.nc-mi-teacher::before{ background:radial-gradient(circle at 92% 8%, rgba(120,150,240,.20) 0, transparent 48%),
                                   radial-gradient(circle at 4% 96%, rgba(167,139,250,.14) 0, transparent 46%); }
.nc-mi-teacher:hover{ border-color:#a9c2ff; }
.nc-mi-teacher{ padding-bottom:30px; }

.nc-mi-student{ background:linear-gradient(155deg,#ffffff 0 38%, #fdeef7 76%, #f7ecff 100%); }
.nc-mi-student::before{ background:radial-gradient(circle at 90% 8%, rgba(255,111,168,.20) 0, transparent 48%),
                                   radial-gradient(circle at 6% 94%, rgba(167,139,250,.14) 0, transparent 46%); }
.nc-mi-student:hover{ border-color:var(--pink); }

.nc-mi-sched{ background:linear-gradient(155deg,#ffffff 0 36%, #e7f8f1 74%, #eaf6ff 100%); }
.nc-mi-sched::before{ background:radial-gradient(circle at 92% 8%, rgba(110,231,183,.24) 0, transparent 48%); }
.nc-mi-sched:hover{ border-color:#5bc9a2; }

.nc-mi-note{ grid-column:span 2;
  display:grid; grid-template-columns:minmax(232px,42%) 1fr; align-items:stretch;
  padding:26px 22px 24px 56px; min-height:318px;
  background:linear-gradient(112deg,#fffaf1 0 42%, #fdeef4 100%); }
.nc-mi-note::before{ background:radial-gradient(circle at 86% 10%, rgba(230,185,100,.18) 0, transparent 50%); }
.nc-mi-note:hover{ border-color:#f3c3d4; }
.nc-mi-note .nc-mi-go{ color:#fff; align-self:flex-start; margin-top:auto;
  font-family:'Jua',sans-serif; font-weight:400; font-size:15px;
  padding:12px 24px; border-radius:999px;
  background:linear-gradient(135deg,#12a06d,#19b97f); box-shadow:0 9px 20px rgba(18,160,109,.28); }
.nc-note-tx{ display:flex; flex-direction:column; }

.nc-mi-lock{ background:linear-gradient(155deg,#f5f4f9 0 42%, #e9e5f4 100%); }
.nc-mi-lock::before{ background:radial-gradient(circle at 92% 8%, rgba(140,130,190,.20) 0, transparent 50%); }
.nc-mi-lock:hover{ border-color:#b9b1d6; }
.nc-lock-tx{ display:flex; flex-direction:column; width:60%; }
.nc-mi-lock .nc-mi-go{ align-self:flex-start; margin-top:20px; padding:11px 22px;
  border-radius:999px; color:#fff; font-family:'Jua',sans-serif; font-weight:400; font-size:15px;
  background:linear-gradient(135deg,#7c7496,#5f5880); box-shadow:0 9px 20px rgba(95,88,128,.28); }
.nc-mi-lock .nc-hand-lock{ position:absolute; right:18px; bottom:16px;
  color:#9b93bd; transform:rotate(-4deg); font-size:14px; }

/* ── 선생님 — 실제 인물 사진을 크게 + 실제 종족 마크 ────────
   종족 배지는 nch.js MEMBERS 의 race 값과 같습니다 (지어낸 값 아님). */
.nc-faces{ display:flex; margin-top:22px; padding-left:10px; }
.nc-face{ position:relative; width:106px; height:106px; margin-right:-16px; }
.nc-face img{ width:100%; height:100%; border-radius:24px; object-fit:cover;
  border:3px solid #fff; background:#fff; box-shadow:0 10px 22px rgba(90,110,180,.24); }
.nc-face:nth-child(1){ transform:rotate(-6deg); }
.nc-face:nth-child(2){ transform:rotate(2deg) translateY(-8px); z-index:2; }
.nc-face:nth-child(3){ transform:rotate(7deg); z-index:1; }
.nc-face i{ position:absolute; right:-9px; bottom:-9px; width:42px; height:42px; z-index:5; }
.nc-face i img{ width:100%; height:100%; border:0; border-radius:0; background:none;
  object-fit:contain; box-shadow:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.28)); }
.nc-races{ display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.nc-race-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
  letter-spacing:.4px; padding:7px 13px; border-radius:999px; background:#fff;
  border:1px solid rgba(0,0,0,.05); box-shadow:0 3px 9px rgba(0,0,0,.07); }
.nc-race-pill i{ width:8px; height:8px; border-radius:50%; }
.nc-race-pill.t{ color:#2563d6; } .nc-race-pill.t i{ background:#2f7bf6; }
.nc-race-pill.p{ color:#b07d11; } .nc-race-pill.p i{ background:#e6b964; }
.nc-race-pill.z{ color:#7c3fb5; } .nc-race-pill.z i{ background:#a855e0; }

/* ── 학생 — 실제 프로필만 (없는 학생은 만들지 않습니다) ────── */
.nc-mi-student .nc-hand-top{ position:absolute; right:16px; top:74px;
  color:#e0568a; font-size:16px; transform:rotate(-8deg); }
.nc-mi .nc-heart{ position:absolute; color:#f8a9c6; pointer-events:none; }
.nc-mi .nc-heart.h1{ right:120px; top:198px; font-size:26px; opacity:.7;  transform:rotate(-12deg); }
.nc-mi .nc-heart.h2{ right:26px;  top:250px; font-size:17px; opacity:.55; transform:rotate(9deg); }
.nc-avatars{ display:flex; align-items:center; margin-top:22px; padding-left:6px; }
.nc-av{ position:relative; display:inline-block; margin-right:-18px; }
.nc-av:nth-child(2){ z-index:2; }
.nc-avatars img{ display:block; width:98px; height:98px; border-radius:50%; object-fit:cover;
  border:4px solid #fff; background:#fff; box-shadow:0 9px 20px rgba(190,120,160,.26); }
/* 종족 배지 — assets/race-*.png 를 배경그림으로 씁니다.
   ⚠️ 여기에 <img> 를 넣으면 nch.js studentMore() 가 세는 학생 수가 틀어집니다. */
.nc-av i{ position:absolute; right:-7px; bottom:-2px; width:40px; height:40px; z-index:5;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.26)); }
.nc-av i.t{ background-image:url("assets/race-terran.png"); }
.nc-av i.p{ background-image:url("assets/race-protoss.png"); }
.nc-av i.z{ background-image:url("assets/race-zerg.png"); }
.nc-av-more{ width:72px; height:72px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; margin-left:34px;
  font-family:'Jua',sans-serif; font-size:20px; color:var(--lav-ink);
  background:var(--lav-soft); border:4px solid #fff; box-shadow:0 6px 14px rgba(140,120,200,.2); }

/* ── 일정 — 하나의 예쁜 스케줄 보드처럼 ────────────────────
   ⚠️ 이번 달 날짜만 그립니다. 일정 표시(점·칩)는 넣지 않습니다 —
      없는 일정을 지어내지 않으려고요. 실제 일정은 일정 페이지에서 봅니다. */
.nc-cal{ display:block; margin-top:18px; padding:14px 14px 15px; border-radius:18px;
  background:#fff; border:1px solid rgba(25,185,127,.16);
  box-shadow:0 8px 22px rgba(60,140,110,.14); }
.nc-cal-top{ display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; }
.nc-cal-top b{ font-family:'Jua',sans-serif; font-weight:400; font-size:16.5px; color:var(--ink); }
.nc-cal-top .ch{ font-style:normal; font-size:14px; color:#7cbfa6;
  width:24px; height:24px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; background:rgba(25,185,127,.09); }
.nc-cal-dow, .nc-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.nc-cal-dow{ padding-bottom:5px; margin-bottom:4px; border-bottom:1px solid rgba(25,185,127,.12); }
.nc-cal-dow i{ font-style:normal; font-size:11px; font-weight:800; color:var(--ink-3); text-align:center; }
.nc-cal-dow i:first-child{ color:#e0568a; } .nc-cal-dow i:last-child{ color:#3f86c9; }
.nc-cal-grid i{ font-style:normal; font-size:11.5px; text-align:center; color:var(--ink-2);
  padding:4px 0; border-radius:8px; font-weight:600; }
.nc-cal-grid i.sun{ color:#e0568a; } .nc-cal-grid i.sat{ color:#3f86c9; }
.nc-cal-grid i.on{ color:#fff; background:#19b97f; font-weight:800;
  box-shadow:0 4px 10px rgba(25,185,127,.36); }

/* ── 교육일지 — 사람 얼굴 없이 기록 오브젝트만 ─────────────
   스프링 노트 · 종족 인덱스 탭 · 손글씨 메모 · 캠퍼스 사진 · 클립 · 펜 · 꽃잎 */
.nc-mi .nc-spring{ position:absolute; left:0; top:0; bottom:0; width:38px; pointer-events:none;
  background:
    radial-gradient(circle at 19px 34px,  rgba(120,90,110,.16) 5px, transparent 6px),
    radial-gradient(circle at 19px 90px,  rgba(120,90,110,.16) 5px, transparent 6px),
    radial-gradient(circle at 19px 146px, rgba(120,90,110,.16) 5px, transparent 6px),
    radial-gradient(circle at 19px 202px, rgba(120,90,110,.16) 5px, transparent 6px),
    radial-gradient(circle at 19px 258px, rgba(120,90,110,.16) 5px, transparent 6px),
    linear-gradient(to right, rgba(243,195,212,.42), rgba(243,195,212,0)); }
.nc-mi-note .nc-note-deco{ position:relative; }
.nc-nt-sheet{ position:absolute; border-radius:10px; background:#fffdf7;
  border:1px solid rgba(0,0,0,.05); box-shadow:0 10px 24px rgba(150,110,120,.14); }
.nc-nt-sheet.s1{ left:8%;  top:9%;  width:76%; height:80%; transform:rotate(-2.5deg); }
.nc-nt-sheet.s2{ left:14%; top:13%; width:76%; height:80%; transform:rotate(1.6deg); background:#fffefb; }
.nc-tab{ position:absolute; font-size:10.5px; font-weight:800; letter-spacing:.5px;
  padding:6px 13px; border-radius:7px 13px 13px 7px; color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.14); }
.nc-tab.t{ left:0;  top:24%; background:#7fa8f0; }
.nc-tab.p{ left:3%; top:40%; background:#e9c06a; }
.nc-tab.z{ left:0;  top:56%; background:#b98be0; }
.nc-memo{ position:absolute; left:28%; top:20%; width:138px; padding:13px 11px;
  font-family:'Gaegu',cursive; font-size:14.5px; line-height:1.5; color:#6b5560; text-align:center;
  background:#fffdf4; border:1px solid rgba(0,0,0,.05); border-radius:4px;
  box-shadow:0 8px 20px rgba(0,0,0,.12); transform:rotate(-3deg); }
.nc-polaroid{ position:absolute; right:5%; bottom:9%; width:124px; padding:7px 7px 17px;
  background:#fff; border-radius:4px; box-shadow:0 12px 26px rgba(0,0,0,.18);
  transform:rotate(5deg); }
.nc-polaroid .nc-pv{ display:block; height:78px; overflow:hidden; border-radius:2px;
  background:#eef4ff; }
.nc-polaroid img{ display:block; width:232%; height:auto;
  /* ⚠️ 공통 스타일의 img{max-width:100%} 가 폭을 다시 100% 로 눌러버립니다.
     그래서 사진이 안 커지고 하늘만 보였습니다 (2026-09-06 실측). */
  max-width:none;
  margin-left:-116%; margin-top:-6%; }
.nc-mug{ position:absolute; right:7%; top:7%; padding:9px 12px; border-radius:12px;
  font-family:'Gaegu',cursive; font-size:13px; line-height:1.3; color:#8a6f5c; text-align:center;
  background:#fff8ee; border:1px solid rgba(160,120,80,.14);
  box-shadow:0 6px 14px rgba(160,120,80,.14); transform:rotate(4deg); }
.nc-clip{ position:absolute; left:52%; top:9%; width:16px; height:38px;
  border:3px solid #c9b7d6; border-radius:9px; transform:rotate(16deg); opacity:.85; }
.nc-check{ position:absolute; left:31%; bottom:16%; font-size:26px; color:#19b97f;
  font-weight:800; transform:rotate(-8deg); }
.nc-pen{ position:absolute; left:60%; bottom:26%; font-size:30px; color:#c8b6d8;
  transform:rotate(28deg); }
.nc-petal{ position:absolute; width:15px; height:15px; border-radius:62% 0 62% 0;
  background:#f9c6d8; opacity:.8; }
.nc-petal.p1{ left:20%; top:6%;  transform:rotate(18deg); }
.nc-petal.p2{ left:8%;  bottom:12%; transform:rotate(-24deg); opacity:.6; }
.nc-petal.p3{ right:30%; top:12%; transform:rotate(38deg); opacity:.55; width:12px; height:12px; }

/* ── 장부 — 사람 얼굴 없이 문서·차트·자물쇠·펜 ─────────────
   ⚠️ 그림만입니다. 장부 권한 검사는 서버·장부 페이지에 있고 여기서 안 만듭니다. */
.nc-mi-lock .nc-ledger-deco{ position:absolute; right:0; top:0; bottom:0; width:54%;
  pointer-events:none; overflow:hidden; }
.nc-doc{ position:absolute; border-radius:7px; background:#fff;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 24px rgba(90,80,130,.18); }
.nc-doc.d1{ width:88px; height:116px; right:47%; top:20%; transform:rotate(-11deg); }
.nc-doc.d3{ width:88px; height:116px; right:31%; top:15%; transform:rotate(-2deg); background:#fbfaff; }
.nc-doc.d2{ width:94px; height:122px; right:13%; top:22%; transform:rotate(7deg); }
.nc-chart{ position:absolute; left:15px; bottom:16px; display:flex; align-items:flex-end;
  gap:5px; height:42px; }
.nc-chart i{ width:9px; border-radius:3px; background:#c3bbdd; }
.nc-chart i:nth-child(1){ height:34%; } .nc-chart i:nth-child(2){ height:62%; }
.nc-chart i:nth-child(3){ height:46%; } .nc-chart i:nth-child(4){ height:92%; background:#8e85bb; }
.nc-stamp{ position:absolute; right:9%; bottom:33%; font-size:10.5px; font-weight:800;
  letter-spacing:.5px; color:#c0396a; padding:5px 10px; border-radius:6px;
  border:2px solid rgba(192,57,106,.5); background:rgba(255,255,255,.92);
  transform:rotate(-9deg); }
.nc-big-lock{ position:absolute; right:56%; bottom:33%; font-size:36px;
  filter:grayscale(.3) drop-shadow(0 6px 12px rgba(90,80,130,.3)); }
.nc-pen2{ position:absolute; right:30%; bottom:16%; font-size:26px; color:#a79ec9;
  transform:rotate(-24deg); }

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width:1100px){
  .nc-mi-nm{ font-size:26px; }
  .nc-face{ width:84px; height:84px; }
  .nc-face i{ width:34px; height:34px; }
  .nc-avatars img{ width:78px; height:78px; }
  .nc-av i{ width:32px; height:32px; }
  .nc-av-more{ width:62px; height:62px; margin-left:28px; }
  .nc-mi .nc-heart.h1{ right:104px; top:172px; }
  .nc-mi .nc-heart.h2{ right:22px;  top:216px; }
}
@media (max-width:900px){
  /* 두 칸일 때 빈 칸이 생기지 않게 순서를 잡아 줍니다
     (1줄 선생님·학생 / 2줄 일정·장부 / 3줄 교육일지 넓게) */
  .nc-menu{ grid-template-columns:repeat(2,1fr); }
  .nc-mi-teacher{ order:1; } .nc-mi-student{ order:2; }
  .nc-mi-sched{ order:3; }   .nc-mi-lock{ order:4; grid-column:span 1; }
  .nc-mi-note{ order:5; grid-column:span 2; }
  .nc-mi-lock .nc-ledger-deco{ width:44%; }
}
@media (max-width:760px){
  .nc-slide.has-img{ grid-template-columns:1fr; min-height:0; }
  .nc-slide-tx{ padding:30px 24px 22px; }
  .nc-slide.has-img .nc-slide-t{ font-size:38px; }
  .nc-slide-sub{ letter-spacing:3.5px; font-size:12.5px; }
  .nc-slide-img{ height:auto; aspect-ratio:16/9;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 12%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 12%); }
  .nc-slide.has-img:hover .nc-slide-img{ transform:none; }
}
@media (max-width:560px){
  /* 좁은 화면에서도 '작은 포스터' 느낌은 살리되, 겹치는 장식은 덜어냅니다 */
  .nc-menu{ grid-template-columns:1fr; gap:13px; }
  .nc-mi{ padding:20px 18px 18px; min-height:0; border-radius:22px; }
  .nc-mi-teacher, .nc-mi-student, .nc-mi-sched, .nc-mi-lock, .nc-mi-note{ order:0; grid-column:span 1; }
  .nc-mi-nm{ font-size:25px; }
  .nc-mi-ds{ font-size:13px; }
  .nc-mi-foot{ padding-top:14px; }
  .nc-hand{ font-size:13.5px; }

  .nc-face{ width:72px; height:72px; margin-right:-12px; }
  .nc-face img{ border-radius:20px; }
  .nc-face i{ width:29px; height:29px; right:-6px; bottom:-6px; }
  .nc-races{ margin-top:18px; }
  .nc-mi-teacher{ padding-bottom:28px; }

  .nc-avatars img{ width:62px; height:62px; margin-right:-16px; }
  .nc-av-more{ width:52px; height:52px; margin-left:24px; font-size:17px; }
  .nc-mi-student .nc-hand-top{ top:auto; bottom:78px; right:14px; font-size:14px; }
  .nc-mi .nc-heart.h1{ right:96px; top:128px; font-size:20px; }
  .nc-mi .nc-heart.h2{ right:26px; top:166px; font-size:14px; }
  .nc-mi .nc-wm-cal{ font-size:44px; }

  /* 교육일지 — 위 글 / 아래 노트 그림 */
  .nc-mi-note{ grid-template-columns:1fr; padding:20px 18px 18px 44px; }
  .nc-mi .nc-spring{ width:30px; background-size:auto; }
  .nc-mi-note .nc-note-deco{ height:190px; margin-top:16px; }
  .nc-mi-note .nc-mi-go{ margin-top:16px; }
  .nc-tab{ font-size:9.5px; padding:5px 10px; }
  .nc-tab.t{ left:1%; top:22%; } .nc-tab.p{ left:4%; top:40%; } .nc-tab.z{ left:1%; top:58%; }
  .nc-memo{ left:26%; top:14%; width:116px; font-size:13px; padding:10px 8px; }
  .nc-polaroid{ width:96px; right:2%; bottom:6%; }
  .nc-polaroid .nc-pv{ height:60px; }
  .nc-mug, .nc-clip, .nc-pen, .nc-petal{ display:none; }
  .nc-check{ left:26%; bottom:10%; font-size:22px; }

  /* 장부 — 글 폭을 조금 넓히고 그림은 덜어냅니다 */
  .nc-lock-tx{ width:62%; }
  /* 손글씨 자리를 비워 두려고 그림 영역을 위로 올립니다 */
  .nc-mi-lock .nc-ledger-deco{ width:46%; right:-6px; bottom:40px; }
  .nc-doc.d1{ display:none; }
  .nc-doc.d3{ width:78px; height:100px; right:30%; top:20%; }
  .nc-doc.d2{ width:82px; height:104px; right:6%; top:26%; }
  .nc-chart{ left:12px; bottom:14px; height:34px; }
  .nc-chart i{ width:7px; }
  .nc-big-lock{ right:52%; bottom:15%; font-size:28px; }
  .nc-stamp{ font-size:9.5px; padding:4px 8px; right:6%; bottom:14%; }
  .nc-pen2{ display:none; }
  .nc-mi-lock .nc-hand-lock{ font-size:12.5px; right:14px; bottom:12px; }
}

/* ══ 보조 진입 줄 — 엔치원 소개 · Q&A (2026-09-07) ═══════════
   ⚠️ 위 다섯 칸(.nc-mi)은 '기능' 이고 이 둘은 '읽을거리' 입니다.
      급을 낮춰 보이도록 카드가 아니라 한 줄 버튼으로 둡니다.
      .nc-mi 규칙은 하나도 건드리지 않았습니다. */
.nc-sub{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;
}
.nc-sub-a{
  display:flex; align-items:center; gap:12px;
  padding:15px 16px; border-radius:14px; text-decoration:none;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  transition:border-color .2s ease, transform .16s ease, box-shadow .2s ease;
  min-height:62px;
}
.nc-sub-a:hover{
  border-color:rgba(255,143,177,.6); transform:translateY(-2px); box-shadow:var(--shadow);
}
.nc-sub-ic{ font-size:22px; line-height:1; flex:0 0 auto; }
.nc-sub-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.nc-sub-tx b{ font-family:'Jua',sans-serif; font-weight:400; font-size:16.5px; }
.nc-sub-tx i{
  font-style:normal; font-size:12.5px; color:var(--ink-3); line-height:1.5;
  word-break:keep-all;
}
.nc-sub-go{ flex:0 0 auto; font-size:16px; color:var(--ink-3); }
.nc-sub-a:hover .nc-sub-go{ color:var(--pink-ink); }

@media (max-width:640px){
  .nc-sub{ grid-template-columns:1fr; gap:9px; }
  .nc-sub-a{ padding:14px; min-height:58px; }
  .nc-sub-tx b{ font-size:15.5px; }
}

/* ══ 함께하기 — 승부예측 · 서포터즈 (2026-09-08) ══════════════
   위 다섯 칸(.nc-mi)은 엔치원2 를 '운영' 하는 문이고, 이 둘은 보는
   사람이 '참여' 하는 문입니다. 그래서 .nc-mi(카드) 와 .nc-sub(한 줄)
   사이 급으로 뒀습니다.
   ⚠️ .nc-mi · .nc-sub 규칙은 하나도 건드리지 않았습니다.
   ⚠️ 승부예측과 서포터즈는 완전히 별개입니다. 색을 다르게 준 것도
      "이건 서로 다른 것" 이라고 화면에서 말하기 위해서입니다.
      한 카드로 합치지 마세요. */
.nc-play{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;
}
.nc-play-a{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  padding:19px 20px; border-radius:18px; text-decoration:none; min-height:84px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  transition:border-color .2s ease, transform .16s ease, box-shadow .2s ease;
}
/* 카드마다 다른 빛 */
.nc-play-a::before{ content:""; position:absolute; inset:0; pointer-events:none; }
.nc-play-pred::before{
  background:radial-gradient(circle at 96% 8%, rgba(47,110,214,.14) 0, transparent 52%); }
.nc-play-sup::before{
  background:radial-gradient(circle at 96% 8%, rgba(255,111,168,.16) 0, transparent 52%); }
.nc-play-a > *{ position:relative; }

.nc-play-a:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.nc-play-pred:hover{ border-color:rgba(47,110,214,.55); }
.nc-play-sup:hover{  border-color:rgba(255,111,168,.6); }

.nc-play-ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:15px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.nc-play-pred .nc-play-ic{ background:linear-gradient(135deg,#93b6f2,#2f6ed6); }
.nc-play-sup  .nc-play-ic{ background:linear-gradient(135deg,#ffc0d6,#ff6fa8); }

.nc-play-tx{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; }
.nc-play-tx b{ font-family:'Jua',sans-serif; font-weight:400; font-size:19px; }
.nc-play-tx i{
  font-style:normal; font-size:13px; color:var(--ink-2); line-height:1.55;
  word-break:keep-all;
}
.nc-play-go{ flex:0 0 auto; font-size:18px; color:var(--ink-3); }
.nc-play-pred:hover .nc-play-go{ color:#2f6ed6; }
.nc-play-sup:hover  .nc-play-go{ color:var(--pink-ink); }

@media (max-width:640px){
  .nc-play{ grid-template-columns:1fr; gap:10px; }
  .nc-play-a{ padding:16px; min-height:74px; gap:12px; }
  .nc-play-ic{ width:42px; height:42px; font-size:22px; border-radius:13px; }
  .nc-play-tx b{ font-size:17.5px; }
  .nc-play-tx i{ font-size:12.5px; }
}

/* ══════════════════════════════════════════════════════════
   메인 압축 개편 (2026-09-08)
   지금 방송중 → 소개관 7 : Q&A 3 → 메뉴 5칸 → 승부예측·서포터즈

   ⚠️ 색은 새로 정하지 않았습니다. 이 파일이 이미 쓰는 값
      (--surface · --line · --ink · --pink 등)만 그대로 씁니다.
      세부 색·간격은 시안을 받은 뒤 맞춥니다.
   ⚠️ 링크·기능·데이터는 하나도 안 건드렸습니다. 크기와 배치만입니다.
   ══════════════════════════════════════════════════════════ */

/* ── 지금 방송중 ─────────────────────────────────────────
   SOOP 대형 카드보다 훨씬 작은 '미니 라이브 프리뷰' 입니다.
   썸네일 170×96(16:9) · 영역 전체 높이 약 196px.

   ⚠️ .nc-lc-b 의 display:block 을 지우지 마세요.
      마크업이 <span> 이라 기본값이 inline 입니다. inline 이면
      위아래 padding 이 높이에 안 잡히고, 대신 부모 줄높이(25.6px)만큼
      빈 공간이 생겨 카드가 40px 가까이 헛되이 커집니다.
   ⚠️ h2 의 margin:0 도 지우지 마세요. 브라우저 기본 h2 마진이
      위아래 15.77px 씩(총 31px) 붙어 머리말이 62px 이 됩니다. */
.nc-live{ margin:4px 0 10px; }
.nc-live-h{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.nc-live-h h2{ font-family:'Jua',sans-serif; font-weight:400; font-size:17px;
  line-height:1.25; margin:0; color:var(--ink); }
.nc-live-h h2 em{ font-style:normal; color:var(--pink); }
.nc-live-n{ font-size:11.5px; font-weight:800; color:#fff; background:#e8365d;
  padding:2px 8px; border-radius:999px; }
.nc-live-h .sp{ flex:1; }
.nc-live-ar{ width:26px; height:26px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:14px; line-height:1; }
.nc-live-ar:hover{ border-color:var(--pink); color:var(--pink-ink); }
.nc-live-ar[disabled]{ opacity:.35; cursor:default; }

.nc-live-track{ display:flex; gap:9px; overflow-x:auto; padding-bottom:2px;
  scroll-behavior:smooth; scroll-snap-type:x mandatory;
  scrollbar-width:none; }
.nc-live-track::-webkit-scrollbar{ display:none; }

.nc-lc{ flex:0 0 170px; scroll-snap-align:start; text-decoration:none;
  border-radius:14px; overflow:hidden; background:var(--surface);
  border:1.5px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .15s ease, border-color .15s ease; }
.nc-lc:hover{ transform:translateY(-2px); border-color:var(--pink); }
.nc-lc-th{ position:relative; width:170px; height:96px; background:#111; display:block; }
.nc-lc-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.nc-lc-live{ position:absolute; left:7px; top:7px; font-size:10.5px; font-weight:800;
  color:#fff; background:#e8365d; padding:2px 7px; border-radius:5px; letter-spacing:.3px; }
.nc-lc-v{ position:absolute; right:7px; bottom:7px; font-size:10.5px; font-weight:700;
  color:#fff; background:rgba(0,0,0,.55); padding:2px 7px; border-radius:5px; }
.nc-lc-b{ display:block; padding:6px 10px 8px; }
.nc-lc-nm{ display:block; font-size:13px; font-weight:800; color:var(--ink);
  line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nc-lc-t{ display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3);
  line-height:1.3; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ── 소개관 7 : Q&A 3 ───────────────────────────────────── */
.nc-hero{ display:grid; grid-template-columns:7fr 3fr; gap:14px;
  align-items:stretch; margin-bottom:6px; }
.nc-hero .nc-slider{ margin:0; }
/* 소개 슬라이드 높이를 낮춰 첫 화면 밀도를 올립니다 (글자 크기는 유지) */
.nc-hero .nc-slide.has-img{ min-height:296px; }
.nc-hero .nc-slide-tx{ padding:30px 24px 30px 46px; }
.nc-hero .nc-slide.has-img .nc-slide-t{ font-size:42px; }

/* Q&A — 소개관 옆 작은 보조 패널. 글자는 안 줄이고 여백만 줄입니다. */
.nc-qa{ display:flex; flex-direction:column; padding:16px 16px 14px;
  border-radius:var(--r-lg); border:1.5px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-sm); min-width:0; }
.nc-qa-h b{ display:block; font-family:'Jua',sans-serif; font-weight:400;
  font-size:19px; color:var(--ink); }
.nc-qa-h i{ display:block; font-style:normal; font-size:12.5px; color:var(--ink-3);
  margin-top:3px; line-height:1.5; word-break:keep-all; }
.nc-qa-list{ display:flex; flex-direction:column; gap:6px; margin:11px 0 10px; flex:1; }
.nc-qa-i{ text-align:left; font-family:inherit; cursor:pointer; width:100%;
  padding:9px 11px; border-radius:11px; border:1.5px solid var(--line);
  background:var(--bg-2, var(--surface)); transition:.15s; }
.nc-qa-i:hover{ border-color:var(--pink); }
.nc-qa-q{ display:flex; gap:7px; align-items:flex-start;
  font-size:13px; font-weight:700; color:var(--ink); line-height:1.5;
  word-break:keep-all; }
.nc-qa-q b{ color:var(--pink-ink); font-weight:800; flex:none; }
.nc-qa-a{ margin-top:7px; padding-top:7px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.65; color:var(--ink-2); word-break:keep-all; }
.nc-qa-more{ align-self:flex-end; font-size:12.5px; font-weight:800;
  color:var(--pink-ink); text-decoration:none; }
.nc-qa-more:hover{ text-decoration:underline; }

/* ── 메뉴 5칸 압축 ───────────────────────────────────────
   ★ 링크·문구·색·아이콘은 그대로입니다. 높이만 줄입니다.
     설명은 3줄에서 자르고, 장식(손글씨·종족 알약)은 접습니다. */
.nc-menu{ grid-template-columns:repeat(5,1fr); gap:10px; margin:14px 0 12px; }
.nc-mi{ min-height:0; padding:14px 14px 12px; border-radius:18px; }
.nc-mi-nm{ font-size:19px; margin-top:6px; }
.nc-mi-ds{ font-size:12px; line-height:1.5; margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nc-mi .nc-faces{ margin-top:10px; transform:scale(.72); transform-origin:left center; height:44px; }
.nc-mi .nc-races,
.nc-mi .nc-hand,
.nc-mi .nc-sign,
.nc-mi .nc-wm{ display:none; }
.nc-mi-foot{ margin-top:8px; }
.nc-mi-go{ font-size:12.5px; }

@media (max-width:1180px){ .nc-menu{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){
  .nc-hero{ grid-template-columns:1fr; }        /* 모바일은 세로 */
  .nc-hero .nc-slide.has-img{ min-height:auto; }
  .nc-menu{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .nc-live-ar{ display:none; }                  /* 폰은 스와이프로 */
  .nc-lc{ flex:0 0 150px; }
  .nc-lc-th{ width:150px; height:85px; }
  .nc-menu{ grid-template-columns:1fr; }
  .nc-mi .nc-faces{ display:none; }
}

/* ── 메뉴 5칸을 '작은 바로가기 카드' 로 (2026-09-08) ────────
   ★ 목표: 다섯 칸 높이를 똑같이 180~220px 안쪽으로.
     지금은 '엔치원 일정' 카드의 큰 달력이 혼자 200px 넘게 차지해서
     다섯 칸 전체가 그 높이에 끌려갑니다.
   ★ 달력은 지우지 않습니다 — 작은 월간 미리보기로 줄입니다.
     "이번 달에 일정이 이만큼 있구나" 만 느끼면 되고,
     자세한 일정은 카드를 눌러 일정 페이지에서 봅니다.
   ★ 색은 새로 정하지 않았습니다. 크기·여백만 줄입니다. */

/* 다섯 칸 높이를 같게 — 카드 안 내용은 위에서부터 채웁니다 */
.nc-menu{ align-items:stretch; }
/* ★ 교육일지 카드는 예전 3칸 배치 때 '두 칸 차지' 였습니다.
   5칸 한 줄에서는 그대로 두면 장부 카드가 다음 줄로 밀립니다.
   (장부는 권한 있는 분에게만 보이므로 평소엔 안 보였을 뿐입니다) */
.nc-mi-note{ grid-column:span 1; }
.nc-mi{ min-height:200px; max-height:220px; justify-content:flex-start; }

/* 설명은 두 줄까지만 */
.nc-mi-ds{ -webkit-line-clamp:2; }

/* 머리 줄(라벨)·제목 여백 축소 */
.nc-mi-head{ margin-bottom:2px; }
.nc-mi-nm{ font-size:17.5px; margin-top:4px; }
.nc-mi-lab{ font-size:10px; letter-spacing:1.2px; }

/* 선생님·학생 얼굴 — 카드 높이에 맞춰 더 작게 */
.nc-mi .nc-faces{ transform:scale(.56); height:34px; margin-top:6px; }

/* 교육일지·장부의 큰 장식은 작은 카드에서 자리만 차지합니다 */
.nc-mi-note .nc-note-deco,
.nc-mi-lock .nc-ledger-deco{ display:none; }

/* ── 미니 달력 — 100~120px 안쪽 ──────────────────────────── */
.nc-mi-sched .nc-cal{
  margin-top:6px; padding:5px 6px 6px; border-radius:10px;
  box-shadow:0 3px 10px rgba(60,140,110,.10);
}
.nc-mi-sched .nc-cal-top{ margin-bottom:2px; }
.nc-mi-sched .nc-cal-top b{ font-size:11px; }
.nc-mi-sched .nc-cal-top .ch{ display:none; }   /* 장식 화살표는 뺍니다 */
.nc-mi-sched .nc-cal-dow,
.nc-mi-sched .nc-cal-grid{ gap:1px; }
.nc-mi-sched .nc-cal-dow{ padding-bottom:2px; margin-bottom:2px; }
.nc-mi-sched .nc-cal-dow i{ font-size:8px; }
.nc-mi-sched .nc-cal-grid i{ font-size:8.5px; padding:0; border-radius:4px;
  line-height:1.45; }
.nc-mi-sched .nc-cal-grid i.on{ box-shadow:none; }
/* 일정 카드는 달력이 주인공이라 설명을 한 줄로 */
.nc-mi-sched .nc-mi-ds{ -webkit-line-clamp:1; }

/* 아래 '보기 →' 줄은 카드 맨 아래에 붙입니다 */
.nc-mi-foot{ margin-top:auto; }

@media (max-width:1180px){
  .nc-mi{ min-height:190px; max-height:none; }
}
@media (max-width:560px){
  .nc-mi{ min-height:0; max-height:none; }      /* 폰은 한 칸씩이라 자유롭게 */
  .nc-mi-sched .nc-cal-grid i{ font-size:11px; padding:3px 0; }
}


/* ══════════════════════════════════════════════════════════
   넓은 PC — 본문이 넓어진 만큼 안쪽도 여유롭게 (2026-09-11)
   ----------------------------------------------------------
   본문 폭을 1080 → 1440~1560 으로 넓혔습니다 (게임/game-ui.css 의
   body[data-nch2] 규칙). 그대로 두면 카드만 커지고 안쪽 글자·얼굴은
   작은 채로 남아 허전해 보입니다. 그래서 크기를 같이 올립니다.

   ⚠️ 1199px 이하는 한 줄도 바꾸지 않습니다 — 폰·태블릿은 그대로입니다.
      이 파일의 기존 규칙은 전부 max-width(좁은 쪽)라 서로 부딪히지
      않습니다.
   ⚠️ 색·구조·링크는 그대로입니다. 크기와 여백만 올립니다.
   ⚠️ 이 파일은 엔치원2 첫 화면만 씁니다. 하위 페이지에는 안 실립니다.
   ══════════════════════════════════════════════════════════ */
@media (min-width:1200px){

  /* ── 메뉴 5칸 — 한 칸이 208px → 290px 안팎으로 넓어집니다 ── */
  .nc-menu{ gap:14px; }
  /* 높이는 다섯 칸이 다 같아야 합니다. 가장 키가 큰 '학생' 카드가
     넘치지 않는 값으로 잡았습니다(실측 뒤 정한 값). */
  .nc-mi{ min-height:224px; max-height:288px; padding:18px 20px 16px; }
  .nc-mi-lab{ font-size:10.5px; }
  .nc-mi-nm{ font-size:20px; margin-top:5px; }
  /* 설명은 두 줄 그대로 — 칸이 넓어져 한 줄에 더 들어갑니다 */
  .nc-mi-ds{ font-size:13px; line-height:1.55; }
  .nc-mi-go{ font-size:13.5px; }
  /* 선생님·학생 얼굴 — 카드가 넓어졌으니 덜 줄입니다 */
  .nc-mi .nc-faces{ transform:scale(.74); height:46px; margin-top:9px; }

  /* ── 승부예측 · 서포터즈 — 가로가 길어져 가운데가 비었습니다 ── */
  .nc-play{ gap:14px; }
  .nc-play-a{ padding:22px 24px; min-height:96px; gap:18px; }
  .nc-play-ic{ width:54px; height:54px; font-size:28px; border-radius:17px; }
  .nc-play-tx b{ font-size:21px; }
  .nc-play-tx i{ font-size:14px; }
  .nc-play-go{ font-size:20px; }

  /* ── 멤버 — 넓어진 만큼 한 줄에 더 들어갑니다 (칸은 조금만 키움) ── */
  .nc-members{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }

  /* ── 소개관 — 글이 너무 넓게 퍼지지 않게 안쪽 여백을 늘립니다 ── */
  .nc-hero .nc-slide-tx{ padding:34px 30px 34px 54px; }

  /* ── 지금 방송중 — 썸네일도 한 단계 크게 ── */
  .nc-lc{ flex:0 0 196px; }
  .nc-lc-th{ width:196px; height:110px; }
}

@media (min-width:1600px){
  .nc-mi{ min-height:238px; max-height:288px; }
  .nc-mi-nm{ font-size:21px; }
  .nc-mi .nc-faces{ transform:scale(.82); height:52px; }
  .nc-hero .nc-slide.has-img{ min-height:330px; }
  .nc-members{ grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); }
}