/* 학생 첫 화면: 한 줄 목록(시안 B). 왼쪽 과목, 오른쪽 지금 수업과 표 */
body { background: var(--card); }
.app { display: flex; min-height: 100vh; }
.rail { width: calc(236 * var(--fit-px)); flex: none; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; background: #f4f5f7; border-right: 1px solid var(--line); padding: calc(20 * var(--fit-px)) calc(16 * var(--fit-px)); display: flex; flex-direction: column; gap: calc(4 * var(--fit-px)); }
.brand { display: flex; align-items: center; gap: calc(10 * var(--fit-px)); padding: 0 calc(8 * var(--fit-px)) calc(16 * var(--fit-px)); color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: calc(18 * var(--fit-px)); letter-spacing: -0.02em; }
.logo { width: calc(30 * var(--fit-px)); height: calc(30 * var(--fit-px)); flex: none; border-radius: calc(8 * var(--fit-px)); background: var(--brand); color: #fff; display: grid; place-items: center; }
.logo svg { width: 60%; height: 60%; }
.subjects { display: flex; flex-direction: column; gap: calc(4 * var(--fit-px)); }
.subjects button { display: flex; align-items: center; gap: calc(10 * var(--fit-px)); min-height: calc(44 * var(--fit-px)); padding: 0 calc(12 * var(--fit-px)); border: 0; border-radius: calc(10 * var(--fit-px)); background: transparent; color: var(--ink); font-size: calc(16 * var(--fit-px)); font-weight: 700; text-align: left; }
.subjects button:hover { background: #e9ecf0; }
.subjects button[aria-selected="true"] { background: var(--ink); color: #fff; }
.subjects .sw { width: calc(10 * var(--fit-px)); height: calc(10 * var(--fit-px)); border-radius: 3px; background: var(--c); flex: none; }
.subjects button[aria-selected="true"] .sw { box-shadow: 0 0 0 2px #fff; }
.subjects .nm { flex: 1; }
.subjects .n { font-size: calc(13 * var(--fit-px)); font-weight: 500; opacity: .7; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.head { min-height: calc(64 * var(--fit-px)); display: flex; align-items: center; gap: calc(12 * var(--fit-px)); padding: calc(8 * var(--fit-px)) calc(28 * var(--fit-px)); border-bottom: 1px solid var(--line); }
.head h1 { margin: 0; font-family: var(--display); font-size: calc(21 * var(--fit-px)); font-weight: 800; letter-spacing: -0.02em; }
.head .count { font-size: calc(14 * var(--fit-px)); color: var(--muted); }
.head .search { margin-left: auto; min-height: calc(40 * var(--fit-px)); border-radius: calc(10 * var(--fit-px)); }
.head .search input { width: calc(300 * var(--fit-px)); }

/* 줄 칸: 과목, 자료, 단원, 양, 모양, 화살표 */
.thead, .row { display: grid; grid-template-columns: calc(64 * var(--fit-px)) minmax(0, 1fr) calc(190 * var(--fit-px)) minmax(0, calc(320 * var(--fit-px))) calc(110 * var(--fit-px)) calc(24 * var(--fit-px)); gap: calc(16 * var(--fit-px)); align-items: center; }
.pin { display: grid; grid-template-columns: calc(64 * var(--fit-px)) minmax(0, 1fr) calc(190 * var(--fit-px)) minmax(0, calc(320 * var(--fit-px))) calc(24 * var(--fit-px)); gap: calc(16 * var(--fit-px)); align-items: center; }

.now { padding: calc(16 * var(--fit-px)) calc(28 * var(--fit-px)) 0; }
.now[hidden] { display: none; }
.now h2 { margin: 0 0 calc(8 * var(--fit-px)); font-size: calc(14 * var(--fit-px)); font-weight: 800; color: var(--brand); }
#pins { display: flex; flex-direction: column; gap: calc(8 * var(--fit-px)); }
.pin { min-height: calc(60 * var(--fit-px)); padding: calc(8 * var(--fit-px)) calc(16 * var(--fit-px)); border-radius: calc(12 * var(--fit-px)); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); color: inherit; text-decoration: none; }
.pin b { font-family: var(--display); font-size: calc(19 * var(--fit-px)); font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: calc(6 * var(--fit-px)); }
.pin:hover { border-color: var(--brand); }

.table { padding: calc(18 * var(--fit-px)) calc(28 * var(--fit-px)) calc(40 * var(--fit-px)); }
.thead { padding: 0 calc(16 * var(--fit-px)) calc(8 * var(--fit-px)); font-size: calc(13 * var(--fit-px)); font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); }
.row { min-height: calc(48 * var(--fit-px)); padding: calc(6 * var(--fit-px)) calc(16 * var(--fit-px)); border-bottom: 1px solid #eef0f3; color: inherit; text-decoration: none; }
.row:hover { background: #f7f9fc; }
.row b { font-size: calc(16 * var(--fit-px)); font-weight: 700; display: flex; align-items: center; gap: calc(6 * var(--fit-px)); min-width: 0; }
.unit, .amt { font-size: calc(14 * var(--fit-px)); color: var(--ink-2); }
.amt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind { font-size: calc(14 * var(--fit-px)); color: var(--muted); }
.subj { justify-self: start; font-size: calc(13 * var(--fit-px)); font-weight: 800; color: #fff; background: var(--c); border-radius: calc(6 * var(--fit-px)); padding: calc(2 * var(--fit-px)) calc(9 * var(--fit-px)); white-space: nowrap; }
.subj.line { color: var(--c); background: transparent; border: 1px solid var(--c); font-weight: 700; padding: calc(1 * var(--fit-px)) calc(8 * var(--fit-px)); }
.go { width: calc(20 * var(--fit-px)); height: calc(20 * var(--fit-px)); color: #8a919e; }
.pin .go { color: var(--brand); }

/* 좁은 화면: 과목은 위 가로 줄, 표 줄은 두 줄 카드 */
@media (max-width: 960px) {
  .app { flex-direction: column; }
  .rail { position: static; align-self: stretch; width: auto; height: auto; padding: calc(12 * var(--fit-px)) calc(16 * var(--fit-px)); border-right: 0; border-bottom: 1px solid var(--line); gap: calc(10 * var(--fit-px)); }
  .brand { padding: 0; }
  .subjects { flex-direction: row; overflow-x: auto; gap: calc(6 * var(--fit-px)); }
  .subjects button { flex: none; min-height: calc(40 * var(--fit-px)); border: 1px solid var(--line-2); background: var(--card); }
  .head { flex-wrap: wrap; padding: calc(10 * var(--fit-px)) calc(16 * var(--fit-px)); }
  .head .search { margin-left: 0; width: 100%; }
  .head .search input { width: 100%; }
  .now { padding: calc(12 * var(--fit-px)) calc(16 * var(--fit-px)) 0; }
  .table { padding: calc(12 * var(--fit-px)) calc(16 * var(--fit-px)) calc(28 * var(--fit-px)); }
  .thead { display: none; }
  .row, .pin { grid-template-columns: auto minmax(0, 1fr) calc(20 * var(--fit-px)); grid-template-areas: "s t g" "u u u"; row-gap: calc(2 * var(--fit-px)); padding: calc(10 * var(--fit-px)) calc(12 * var(--fit-px)); }
  .row .subj, .pin .subj { grid-area: s; }
  .row b, .pin b { grid-area: t; }
  .row .go, .pin .go { grid-area: g; }
  .row .unit, .pin .unit { grid-area: u; font-size: calc(13 * var(--fit-px)); color: var(--muted); }
  .row .amt, .row .kind, .pin .amt { display: none; }
}