/* =====================================================
   학생 태블릿 표면 (.surface-app-wide)
   스토리보드는 학생의 기본 디바이스를 태블릿 가로로 잡는다(ST-07 "기본 디바이스").
   그래서 넓은 화면은 폰 레이아웃을 가운데 정렬한 '큰 폰'이 아니라 제 몫의 표면이다.

   이 파일은 .surface-app-wide 안에서만 동작한다 — 720px 미만은 아예 이 클래스가
   붙지 않으므로 모바일 레이아웃은 한 줄도 건드리지 않는다.
   ===================================================== */

.surface-app-wide { background: var(--paper-dim); }
.surface-app-wide .frame.tablet {
  width: 100%; height: 100%;
  border: none; border-radius: 0; box-shadow: none;
  flex-direction: row; display: flex;
}

/* ---------- 좌측 레일 (하단 탭바를 세운 것) ---------- */
.a-rail {
  width: 96px; flex-shrink: 0; background: #fff;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
  padding-left: calc(10px + env(safe-area-inset-left));
}
.a-rail-mark {
  height: 34px; display: flex; align-items: center; justify-content: center;
  color: var(--ink); margin-bottom: 10px;
}
.a-rail-mark .sym { width: 26px; height: 19px; }

.ar-item {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  padding: 12px 4px; border-radius: 14px;
  color: var(--ink-25); font-size: 10.5px; font-weight: 700;
  transition: background .14s, color .14s;
}
.ar-item .mi { font-size: 19px; line-height: 1; }
.ar-item.on { color: var(--ink); background: var(--paper-dim); }
.ar-item.on::after {
  content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 4px; height: 4px; border-radius: 1px; background: var(--lime-deep);
}
.ar-item:not(.on):hover { color: var(--ink-70); background: var(--paper-dim); }
.ar-item .mn-badge { position: absolute; top: 7px; right: 12px; }

/* ---------- 본문 ---------- */
.a-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--paper); }

.a-top {
  height: 62px; flex-shrink: 0; display: flex; align-items: center; gap: 16px;
  padding: 0 26px; padding-right: calc(26px + env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
}
.a-head { min-width: 0; }
.a-title { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.a-sub { font-size: 11px; color: var(--ink-45); font-weight: 600; margin-top: 1px; }
.a-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 상단바로 올라온 컨트롤들은 앱바 안의 여백 규칙 대신 제 크기를 쓴다 */
.a-actions .seg { margin: 0; width: auto; }
.a-actions .seg button { padding: 7px 14px; white-space: nowrap; }
.a-actions .range-seg { margin: 0; }
.a-actions .acad-row { margin: 0; padding: 0; overflow: visible; }

.a-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 26px 28px;
  padding-right: calc(26px + env(safe-area-inset-right));
}

/* 2단 — 왼쪽이 주 작업, 오른쪽이 곁다리.
   큰 모니터에서 줄 길이가 늘어지지 않게 상한을 두고 가운데로 모은다. */
.a-cols {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 22px; align-items: start; max-width: 1240px; margin: 0 auto;
  /* flex 컨테이너(관리자 .d-body) 안에서는 교차축 auto 마진이 stretch 를 이겨
     그리드가 내용 크기로 쪼그라든다. 폭을 명시해야 두 표면에서 같게 나온다. */
  width: 100%;
}
.a-cols.one { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
/* 달력은 정사각 칸이라 폭이 커지면 세로도 같이 커진다 — 상한을 두고 목록에 더 준다 */
.a-cols.cal { grid-template-columns: minmax(0, 1fr) minmax(320px, 1.05fr); }
.a-cols.cal .a-col:first-child { max-width: 620px; }
.a-col { min-width: 0; }

/* 좁은 태블릿 세로(720–899)에서는 2단이 서로를 눌러 버린다 — 한 단으로 되돌린다 */
@media (max-width: 899px) {
  .a-cols { grid-template-columns: minmax(0, 1fr); }
  .a-col.side { display: contents; }
}

/* 태블릿에서 첫 블록 위 여백은 .a-body 가 이미 갖고 있다 */
.a-body > .a-cols > .a-col > .sec-label:first-child { margin-top: 0; }
.a-body .hero { margin-top: 0; }

/* 넓은 칸의 달력 — 칸이 커지는 만큼 글자도 키운다.
   폰 기준(10.5px)을 그대로 두면 큰 정사각형 안에 작은 숫자가 떠 있게 된다. */
.a-cols.cal .cal-mon { font-size: 17px; }
.a-cols.cal .cal-dw { font-size: 10px; padding: 6px 0; }
/* 폰에서는 정사각(aspect-ratio:1)이 맞지만, 폭이 넓어지면 칸이 74px 짜리 정사각이 되어
   달력만 500px 가까이 늘어진다. 넓은 칸에서는 높이를 따로 정한다. */
.a-cols.cal .cal-d {
  font-size: 13.5px; gap: 4px; border-radius: 12px;
  aspect-ratio: auto; min-height: 52px;
}
.a-cols.cal .cal-d .dots { height: 5px; }
.a-cols.cal .cal-d .dt { width: 5px; height: 5px; }
.a-cols.cal .cal-grid { gap: 4px; }

/* ---------- 지표 카드 · 차트 (ST-06) ---------- */
.a-col .ts-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 폰 기준 막대(15px)를 그대로 늘린 폭에 놓으면 그래프가 아니라 흩뿌린 점처럼 보인다.
   막대를 키우고 차트 자체의 폭에 상한을 둬 의도한 크기로 읽히게 한다. */
.surface-app-wide .wk-chart { height: 136px; max-width: 700px; margin: 0 auto; gap: 10px; }
.surface-app-wide .wk-bar { width: 26px; }
.surface-app-wide .wk-day { font-size: 10px; }

/* ---------- 목록 2열 (ST-02 오답·단어) ---------- */
.a-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1099px) { .a-grid2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 상담 마스터-디테일 (PA-02) ----------
   폰은 목록 → 방으로 «이동»하지만, 태블릿은 둘을 나란히 두고 방만 갈아 끼운다.
   채팅은 각 칸이 따로 스크롤해야 해서 바깥 스크롤을 끄고 높이를 채운다. */
.a-body.fill {
  overflow: hidden; display: flex; min-height: 0;
  padding-bottom: 20px;
}
.a-body.fill > .a-cols { height: 100%; align-items: stretch; }
.a-cols.chat { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); }
.a-cols.chat .a-col { min-height: 0; display: flex; flex-direction: column; }
.a-cols.chat .chat-list {
  flex: 1; min-height: 0; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
}
.a-cols.chat .chat-pane {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
}
.chat-pane-head {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.chat-pane .ch-room { flex: 1; min-height: 0; }
.chat-pane .ch-msgs { min-height: 0; }
/* 선택된 방 강조 — 폰에는 «선택»이라는 상태가 없어 태블릿에서만 필요하다.
   배경만으로는 흰 카드 위에서 거의 구별되지 않아 왼쪽에 표시선을 둔다. */
.chl-row.on {
  background: var(--paper-dim);
  box-shadow: inset 3px 0 0 var(--ink);
  border-radius: 8px;
}

/* ---------- 알림·더보기 동시 노출 (EX-01) ---------- */
.a-pane-t {
  font-size: 12px; font-weight: 800; color: var(--ink-70);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}

/* 태블릿에서는 시트 대신 여백이 넉넉하므로 카드가 눌리지 않게 최소 폭을 준다 */
.surface-app-wide .card { margin-top: 10px; }
.surface-app-wide .sec-label { margin-top: 18px; }
.surface-app-wide .a-col > .sec-label:first-child { margin-top: 0; }