/* 학교안심 알림장체 (보통·굵게). fonts 폴더에 함께 두므로 인터넷 없이도 표시된다. */
@font-face {
  font-family: "Hakgyoansim Allimjang";
  src: url("fonts/HakgyoansimAllimjang-R.otf") format("opentype");
  font-weight: 100 599;
  font-display: swap;
}

@font-face {
  font-family: "Hakgyoansim Allimjang";
  src: url("fonts/HakgyoansimAllimjang-B.otf") format("opentype");
  font-weight: 600 1000;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #07090d;
  --panel: #121722;
  --panel-strong: #1b2230;
  --text: #f7f8fb;
  --muted: #a9b3c7;
  --accent: #4fb3ff;
  --accent-soft: rgba(79, 179, 255, 0.18);
  --danger: #ff4d5a;
  --border: rgba(255, 255, 255, 0.18);
  --shadow: rgba(0, 0, 0, 0.38);
  /* 전자칠판에서 가려지는 영역. 모든 내용은 이 여백 안쪽에만 배치한다. */
  --safe-top: 10vh;
  --safe-side: 10vw;
  --safe-bottom: 20vh;
  /* 진행 화면의 좌우 열('이전 화면'·'전체 화면')과 시간표가 쓰는 양옆 여백. 나머지는 --safe-side를 따른다. */
  --top-side: 5vw;
  /* 진행 화면의 위쪽 여백. 시작 화면은 --safe-top을 따른다. */
  --exam-top: 5vh;
  /* 진행 화면 위쪽 네 요소(버튼 2개, 현재 시각, 날짜·학년)가 함께 쓰는 글자 크기 */
  --top-font: clamp(18px, min(1.84vw, 3.22vh), 30px);
  /* 현재 시각·날짜·학년 줄의 크기 단계 비율. 1단계는 숫자의 이 배수, 2단계는 그 제곱 */
  --top-step: 0.8;
  /* 남은 시간 양옆 문구에서 '조금 더 큰' 글자(과목명 등)가 '보통'의 몇 배인지 */
  --side-big: 2;
  /* 왼쪽 가운데 문구 전체를 안내 문구('보통')보다 몇 배 키울지. 두 줄의 크기 비율(--side-big)은 그대로 유지된다.
     '자율학습'(조금 더 큰 줄)이 버튼 폭에 딱 맞는 한도가 약 1.21배 */
  --status-scale: 1.2;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(circle at 50% 42%, rgba(42, 61, 88, 0.42), transparent 42%),
    var(--bg);
  color: var(--text);
  font-family: "Hakgyoansim Allimjang", "Malgun Gothic", sans-serif;
  /* 보통·굵게 두 파일만 있으므로, 브라우저가 가짜 굵게 처리로 글자를 뭉개지 않게 막는다. */
  font-synthesis: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.app-shell,
.screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.screen {
  position: relative;
  overflow: hidden;
  padding: var(--safe-top) var(--safe-side) var(--safe-bottom);
}

.hidden {
  display: none !important;
}

/* 숫자 칸: script.js의 setDigitText()가 모든 숫자를 같은 폭으로 감싼다. */
.digit {
  display: inline-block;
  text-align: center;
}

.digit-word {
  white-space: nowrap;
}

/* '/'만 기울기가 뚜렷한 맑은 고딕으로 (script.js의 appendWithSlash()) */
.slash {
  font-family: "Malgun Gothic", "Segoe UI", sans-serif;
  font-weight: inherit;
}

.text-button {
  flex: 0 0 auto;
  min-height: 2.3em;
  padding: 0 1em;
  /* 날짜·학년 버튼과 같은 주황 스타일 */
  border: 2px solid rgba(255, 176, 102, 0.32);
  border-radius: 8px;
  background: rgba(255, 166, 77, 0.12);
  font-size: clamp(16px, min(1.26vw, 2.3vh), 23px);
  font-weight: 400;
  white-space: nowrap;
}

.text-button:hover,
.text-button:focus-visible,
.text-button:active {
  border-color: #ff9a3c;
  background: rgba(255, 140, 40, 0.32);
  box-shadow: inset 0 0 0 2px #ff9a3c;
}

/* ---------- 시작 화면 ---------- */

.start-screen {
  display: grid;
  align-items: center;
  justify-items: center;
}

.start-content {
  width: min(1200px, 100%);
  padding: clamp(18px, min(2.4vw, 3.6vh), 36px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(18, 23, 34, 0.94);
  box-shadow: 0 24px 70px var(--shadow);
}

.start-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 3.8vh, 42px);
}

h1 {
  margin: 0;
  font-size: clamp(30px, min(4.14vw, 6.9vh), 64px);
  line-height: 1.1;
  letter-spacing: 0;
}

.field + .field {
  margin-top: clamp(12px, 2.2vh, 22px);
}

/* 날짜 줄과 학년 줄 사이는 조금 더 띄운다. */
.field + .grade-field {
  margin-top: clamp(18px, 3.4vh, 36px);
}

/* 날짜·학년 버튼은 개수와 상관없이 한 줄을 같은 폭으로 나눈다(시험마다 개수가 달라짐). */
.date-grid,
.grade-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(8px, 0.8vw, 12px);
}

.choice-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(52px, 8.5vh, 76px);
  padding: 4px 8px;
  border: 2px solid rgba(255, 176, 102, 0.32);
  border-radius: 8px;
  /* 옅은 주황 배경, 선택하면 조금 진한 주황 배경과 진한 주황 테두리 */
  background: rgba(255, 166, 77, 0.12);
  font-size: clamp(21px, min(2.05vw, 3.6vh), 31px);
  font-weight: 400;
  word-break: keep-all;
}

.choice-button[aria-pressed="true"] {
  border-color: #ff9a3c;
  background: rgba(255, 140, 40, 0.32);
  box-shadow: inset 0 0 0 2px #ff9a3c;
}

.today-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #03111d;
  font-size: 0.72em;
  font-weight: 900;
}

.test-time-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: clamp(40px, 6vh, 52px);
}

.test-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: clamp(18px, min(1.72vw, 2.99vh), 25px);
  font-weight: 700;
}

.test-toggle:hover,
.test-toggle:focus-visible {
  color: var(--text);
}

.chevron {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 접힌 상태에는 오른쪽(>), 펼친 상태에는 아래쪽(∨) 꺽쇠를 보여 준다. */
.test-toggle .chevron-down,
.test-toggle[aria-expanded="true"] .chevron-right {
  display: none;
}

.test-toggle[aria-expanded="true"] .chevron-down {
  display: block;
}

.test-time-row input {
  width: min(240px, 40%);
  height: clamp(40px, 6vh, 52px);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #080c13;
  font-size: clamp(20px, min(1.84vw, 3.22vh), 28px);
}

.start-error {
  min-height: 1.4em;
  margin: clamp(8px, 1.6vh, 16px) 0 clamp(6px, 1.2vh, 12px);
  color: #ffb2b8;
  font-size: clamp(16px, min(1.49vw, 2.53vh), 22px);
  font-weight: 700;
}

.primary-button {
  width: 100%;
  min-height: clamp(48px, 8vh, 64px);
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #03111d;
  font-size: clamp(23px, min(2.3vw, 4.14vh), 32px);
  font-weight: 900;
}

/* ---------- 시험 진행 화면 ---------- */

/* 위에서부터 3열 영역 → 시간표. 3열 영역이 남는 세로 공간을 모두 차지하고,
   시간표 바닥은 아래쪽 여백(20%) 경계에 맞춘다. */
.exam-screen {
  padding-top: var(--exam-top);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(12px, 3vh, 36px);
  background:
    linear-gradient(90deg, rgba(7, 9, 13, 0.96), rgba(7, 9, 13, 0.78)),
    var(--bg);
}

/* 3열 배치: 왼쪽 열은 이전 화면·현재 시각·가운데 문구, 오른쪽 열은 전체 화면·날짜·학년·안내 문구,
   가운데는 남은 시간. 좌우 열의 폭을 같게 두어 남은 시간이 화면 정가운데에 온다.
   버튼(1행)과 현재 시각·날짜·학년(2행)은 위쪽 끝에 붙이고, 두 문구는 1~3행 전체의 세로 가운데
   (즉 남은 시간의 세로 가운데)에 둔다. 왼쪽 열은 왼쪽 끝, 오른쪽 열은 오른쪽 끝에 맞춘다. */
.top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  flex: 1 1 auto;
  min-height: 0;
  /* 좌우 열만 --top-side 여백까지 바깥으로 넓힌다. 남은 시간 크기는 fitCenter()가 --safe-side 기준 폭으로
     계산하므로 그대로이고, 열 사이 간격만 늘어난다. */
  margin-inline: calc(var(--top-side) - var(--safe-side));
  column-gap: 24px;
  row-gap: clamp(8px, 1.6vh, 16px);
  min-width: 0;
  font-size: var(--top-font);
}

.top-bar > * {
  grid-column: 1;
  justify-self: start;
}

.top-bar > .top-end {
  grid-column: 3;
  justify-self: end;
}

/* '이전 화면'과 '전체 화면(해제)' 버튼은 문구와 상관없이 같은 폭으로 고정한다.
   아래 줄 글자(현재 시각, 날짜·학년)가 이 폭에 맞춰지므로, 전체 화면을 켜고 꺼도 크기가 흔들리지 않는다. */
.top-button {
  grid-row: 1;
  width: 8.4em;
  min-height: 1.9em;
  padding: 0 0.8em;
  font-size: 1em;
}

.top-text {
  grid-row: 2;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

.top-clock {
  color: #ffc48a;
  /* '현재 시각'과 시각 사이의 띄어쓰기 세 칸을 그대로 보이게 한다. */
  white-space: pre;
}

.top-selection {
  /* 현재 시각과 같은 옅은 주황. 날짜와 학년 사이 띄어쓰기 세 칸을 그대로 보이게 한다. */
  color: #ffc48a;
  white-space: pre;
}

/* 크기 단계: 숫자(0단계)가 가장 크고, 1단계(시·분, 요일·학년), 2단계(현재 시각) 순으로 작다.
   글자 크기 자체는 script.js의 fitTopText()가 버튼 폭에 맞춰 정한다. */
.level-1 {
  font-size: calc(var(--top-step) * 1em);
}

.level-2 {
  font-size: calc(var(--top-step) * var(--top-step) * 1em);
}

/* 남은 시간 양옆 문구(왼쪽 가운데 문구, 오른쪽 안내 문구). 각자 열 안에서 가운데 맞춤.
   '보통' 크기는 script.js의 fitSideText()가 가장 긴 줄이 버튼 폭에 맞도록 양쪽 똑같이 정한다. */
.side-text {
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}

/* 한 줄씩. 폭은 글자만큼이고 열 안에서 가운데에 둔다. */
.side-line {
  display: block;
  width: fit-content;
  margin-inline: auto;
  white-space: nowrap;
}

/* '조금 더 큰' 크기(과목명 등)는 '보통'의 이 배수 */
.side-big {
  font-size: calc(var(--side-big) * 1em);
}

.status-message {
  /* 옅은 파란색. 오른쪽 안내 문구(--muted)보다 진하게 */
  color: #8ec9ff;
}

.time-notice {
  color: var(--muted);
}

/* 위쪽 가운데 칸을 세 줄 전체에 걸쳐 차지한다.
   크기는 script.js의 fitCenter()가 남는 폭과 높이에 맞춰 정한다. */
.remaining-time {
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
  font-size: clamp(80px, min(15.8vw, 30.4vh), 304px);
  font-weight: 950;
  /* 이 글꼴은 글자 상자가 1.2em이라, 그보다 작으면 자동 축소 계산에서 빠져 가림 영역을 넘는다. */
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.top-bar > .remaining-time {
  grid-column: 2;
  justify-self: center;
}

/* 테스트 모드(오늘이 아닌 날짜 또는 테스트 시간 입력)는 파란색. 마지막 10분 빨간색이 우선한다. */
.remaining-time.test {
  color: var(--accent);
}

.remaining-time.danger {
  color: var(--danger);
}

/* 남은 시간이 없는 화면(오늘 시험 종료)은 안내 문구를 숨기고, 가운데 문구를 남은 시간 자리에 크게 둔다.
   크기는 script.js의 fitCenter()가 남은 시간과 같은 방식으로 정한다. */
.exam-screen.no-time .time-notice,
.exam-screen.no-time .remaining-time {
  display: none;
}

.exam-screen.no-time .status-message {
  grid-column: 2;
  justify-self: center;
}

.schedule-panel {
  flex: 0 0 auto;
  min-width: 0;
  /* 위쪽 좌우 열과 같이 --top-side 여백까지 넓힌다. */
  margin-inline: calc(var(--top-side) - var(--safe-side));
  position: relative;
  /* 박스 높이는 예전 그대로 고정한다(남은 시간 크기가 이 높이에 따라 정해지므로).
     예전 = 위아래 (박스 여백 + 테두리 1px) + (칸 여백 + 칸 테두리 1px) + 글자(과목명 1.2em + 4px + 시각 0.6em × 1.17) */
  --schedule-old-font: clamp(20px, min(2.035vw, 3.55vh), 33.6px);
  --schedule-height: calc(
    2 * (clamp(14px, min(1.8vw, 3vh), 28px) + 1px + clamp(8px, 1.4vh, 14px) + 1px)
    + 1.902 * var(--schedule-old-font) + 4px
  );
  /* 위아래 안쪽 여백(현재 교시 강조 상자 여백 10px 포함). 남는 높이는 모두 글자 크기로 돌린다(.schedule-item).
     줄이면 글자가 커지고, 늘리면 작아진다. */
  --schedule-pad: 26.83px;
  /* 교시 줄과 시간 줄 사이 간격. 늘린 만큼 --schedule-pad를 절반씩 줄여야 글자 크기가 그대로다. */
  --schedule-line-gap: 12px;
  /* 시간 글자를 교시 글자의 0.6배보다 더 키우는 양. 줄 높이가 이것의 1.17배 늘어나므로,
     그 절반씩 --schedule-pad에서 뺐다(2px → 1.17px). */
  --schedule-time-extra: 2px;
  height: var(--schedule-height);
  /* 좌우 안쪽 여백은 0이라 교시 칸이 박스를 정확히 3등분한다. */
  padding: var(--schedule-pad) 0;
  /* 글자가 폭 때문에 줄어든 경우(script.js의 fitScheduleText())에도 세로 가운데에 둔다. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 3등분 지점에서 위아래로 파이는 세모: 깊이는 박스 높이에 대한 비율, 폭(한쪽)은 깊이에 대한 배수 */
  --notch-depth: 0.22;
  --notch-width: 0.8;
}

/* 박스 모양과 현재 교시 칸. 글자 뒤에 깔린다. */
.schedule-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.schedule-outline {
  fill: rgba(18, 23, 34, 0.86);
  stroke: var(--border);
  stroke-width: 1;
  stroke-linejoin: round;
}

.schedule-current {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* 교시 칸 세 개가 박스 폭을 정확히 3등분한다. */
.schedule-list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 글자는 칸에서 세모 폭을 뺀 네모(현재 교시 강조 상자와 같은 기준)의 가운데에 맞춘다.
   가운데 칸은 양쪽이 같으므로 그대로, 바깥쪽 칸은 3등분 지점 쪽 안쪽 여백에 세모 폭(--notch-half, script.js가 정함)을 더한다. */
.schedule-item {
  padding: 0 14px;
  /* 박스 안 글자 높이(과목명 1.2em + 줄 사이 간격 + 시각 (0.6em + 추가분) × 1.17)가 남는 높이를 꽉 채우는 크기 */
  font-size: calc(
    (var(--schedule-height) - 2 * var(--schedule-pad) - var(--schedule-line-gap) - 1.17 * var(--schedule-time-extra))
    / 1.902
  );
  text-align: center;
}

.schedule-item:first-child {
  padding-right: calc(14px + var(--notch-half, 0px));
}

.schedule-item:last-child {
  padding-left: calc(14px + var(--notch-half, 0px));
}

.schedule-name {
  display: block;
  font-size: 1em;
  /* 교시와 과목 사이 띄어쓰기 세 칸을 그대로 보이게 한다. */
  white-space: pre;
  font-weight: 400;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.schedule-time {
  display: block;
  margin-top: var(--schedule-line-gap);
  color: var(--muted);
  font-size: calc(0.6em + var(--schedule-time-extra));
  font-weight: 400;
  /* 박스 높이 계산(.schedule-panel)에 쓰는 값. 예전 기본 줄 높이와 같다. */
  line-height: 1.17;
}