/* ---------- tokens ---------- */
:root {
  --bg: #F2F4F8;
  --card: #FFFFFF;
  --line: #E1E6EE;
  --ink: #162034;
  --muted: #56627A;
  --accent: #2352D1;
  --accent-ink: #FFFFFF;
  --navy: #13254A;
  --navy-ink: #FFFFFF;
  --navy-muted: #C3CEE4;
  --danger: #C23A2E;
  --ok: #17744A; /* 품질 점검: 4.5:1 on the light cards (was #1C8753, 4.29) */
  --warn: #9A5E06;
  --warn-bg: #FDF6E6;
  --danger-bg: #FBEDEC;
  --soft: #F7F9FC;
  /* 자리 색 (주인 10-19 "칸마다 색깔 · 여러 곳에도"): 홈 주황 · 아카이브 청록 · 내 자리 금 · 우리 학교 자주 ·
     자료실 초록 · 일정 보라 · 도구함 파랑 · 운영 남색. 화면 머리 · 메뉴 표시 · 운영 기능 카드가 같은 색을 쓴다. */
  --p-home: #C2661B;
  --p-archive: #0D8A80;
  --p-seat: #A16207;
  --p-school: #B42A64;
  --p-rooms: #16803C;
  --p-cals: #7C3AED;
  --p-tools: #2352D1;
  --p-op: #13254A;
  --sans: 'IBM Plex Sans KR', system-ui, sans-serif;
  --serif: 'Hahmlet', 'IBM Plex Sans KR', serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C1220;
    --card: #141C2B;
    --line: #26314A;
    --ink: #E6EAF2;
    --muted: #9AA6BE;
    --accent: #7D9CFF;
    --accent-ink: #0C1220;
    --navy: #101A2E;
    --navy-muted: #9FB0CE;
    --danger: #FF8D80;
    --ok: #63C795;
    --warn: #E5B25A;
    --warn-bg: #241E10;
    --danger-bg: #2A1614;
    --soft: #101828;
    /* 자리 색: 어두운 바탕에서 한 단 밝게 */
    --p-home: #E89050;
    --p-archive: #43BCB1;
    --p-seat: #D3A135;
    --p-school: #E0699D;
    --p-rooms: #4FB873;
    --p-cals: #A985F5;
    --p-tools: #7D9CFF;
    --p-op: #9FB0CE;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

h1, h2, legend { font-family: var(--serif); font-weight: 700; }

p { margin: 0 0 10px; }

a { color: var(--accent); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- entrance frame ---------- */
.entry {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px 16px;
}

.card {
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(19, 37, 74, 0.08);
}

.brand {
  background: var(--navy);
  color: var(--navy-ink);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brand-home {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px;
  margin: -4px -6px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.brand-mark { display: inline-flex; flex: 0 0 auto; }
.logo { width: 34px; height: 34px; display: block; }

.brand-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tag {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--navy-muted);
  color: var(--navy-muted);
  white-space: nowrap;
}

.brand-lead {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  margin: 0;
  /* Korean sentences break between words, not inside them (no "쌓여/요.") */
  word-break: keep-all;
  text-wrap: balance;
}

.brand-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--navy-muted);
  font-size: 14px;
}

.brand-points li { position: relative; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; word-break: keep-all; }
.brand-points strong { color: var(--navy-ink); font-size: 15px; }
.brand-points li:nth-child(4)::before { background: #C2507A; }
/* 소개: 넓은 화면은 늘 펼침(summary 숨김), 좁은 화면은 [무엇을 하는 곳인가요?]로 펼친다 */
.brand-more { display: flex; flex-direction: column; gap: 14px; }
.brand-more-open {
  display: none; min-height: 44px; align-items: center; cursor: pointer; list-style: none;
  color: var(--navy-ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.brand-more-open::-webkit-details-marker { display: none; }
.brand-why { margin: 0; color: var(--navy-muted); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.brand-trust { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--navy-muted); font-size: 13px; word-break: keep-all; }

.brand-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E7DCD;
}

.brand-points li:nth-child(2)::before { background: #2E9C6C; }
.brand-points li:nth-child(3)::before { background: #D29512; }

.panel { padding: 28px 24px 30px; min-width: 0; }

.title { font-size: 26px; margin: 0 0 8px; line-height: 1.35; }
.lead { color: var(--muted); margin: 0 0 18px; }

/* 첫 화면 가볍게: the version stamp is seven characters, not worth a 15KB face of its own --
   it uses the monospace font the device already has. Every other .mono keeps IBM Plex Mono. */
.version { color: var(--muted); font-size: 12px; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.screen-part { min-width: 0; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.label { font-size: 14px; font-weight: 700; color: var(--ink); }

.input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

select.input { appearance: none; background-image: none; }

.input::placeholder { color: var(--muted); }

.with-button { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.with-button .input { flex: 1 1 auto; min-width: 0; }

.hint { font-size: 13px; color: var(--muted); margin: 0; }
.hint.warn { color: var(--warn); }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--danger); }

button { font-family: var(--sans); }

.primary {
  min-height: 48px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.primary[disabled] { opacity: 0.6; cursor: progress; }

.ghost {
  min-height: 46px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.ghost.wide { width: 100%; }
.reveal { flex: 0 0 auto; }

.step { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; margin: 0; min-width: 0; }
.step + .step { margin-top: 2px; }
.step > .field + .field, .step > .field + .results { margin-top: 14px; }

.legend { display: flex; align-items: center; gap: 8px; font-size: 17px; padding: 0 6px; }

.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
}

.summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.manual { margin-top: 12px; }
.manual .field { margin-top: 12px; }

/* ---------- school search results ---------- */
.results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.results:empty { display: none; }

.result {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 56px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  cursor: pointer;
}

.result input { margin-top: 5px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.result-body { min-width: 0; }
.result-name { font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.chip {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ---------- boxes ---------- */
.note {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--muted);
  font-size: 14px;
}

.note p:last-child { margin-bottom: 0; }

.box { padding: 14px; border-radius: var(--radius); font-size: 14px; margin: 12px 0; }
/* /go/<tool> before the login: the line and [홈으로] side by side, stacked on a phone */
.box.login-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.box.login-go > span { flex: 1 1 12em; min-width: 0; }
.box p:last-child { margin-bottom: 0; }
/* 새 주소로 옮기기 (주인 10-18 도메인): 로그인 화면의 한 번 알림 */
.box.login-moved { word-break: keep-all; overflow-wrap: anywhere; }
.box.login-moved .login-moved-title { font-weight: 700; margin: 0 0 6px; }
.box.login-moved ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.box.login-moved a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.box-warn { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn); }
/* 교원 확인 마무리②: "확인을 마쳤어요" -- the same shape as box-warn, in the done colour */
.box-ok { background: var(--soft); border: 1px solid var(--ok); color: var(--ok); }
.teacher-help > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

.error-box {
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 14px;
}

.error-box p { margin: 0 0 8px; }
.error-code { font-family: var(--mono); font-size: 13px; }

.error-copy {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--danger);
  background: transparent;
  border: 1px solid var(--danger);
  border-radius: 10px;
  cursor: pointer;
}

.error-fallback {
  width: 100%;
  margin-top: 8px;
  min-height: 64px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.foot-link { margin-top: 18px; font-size: 14px; }
.foot-link a { display: inline-flex; align-items: center; min-height: 44px; }

.reasons { color: var(--muted); font-size: 15px; padding-left: 20px; margin: 0 0 12px; }
.steps { padding-left: 20px; margin: 0 0 18px; }
.steps li { margin-bottom: 8px; }

.big-email {
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0 0 12px;
}

/* ---------- invite card ---------- */
.invite-card {
  background: var(--navy);
  color: var(--navy-ink);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}

.invite-school { font-family: var(--serif); font-weight: 700; font-size: 20px; margin: 0 0 6px; overflow-wrap: anywhere; }
.invite-meta { color: var(--navy-muted); font-size: 14px; margin: 0 0 4px; overflow-wrap: anywhere; }
.invite-meta:last-child { margin-bottom: 0; }

/* the inside of the app is styled in inside.css */

/* ---------- narrow: the navy panel becomes a top band ---------- */
@media (max-width: 859.98px) {
  .entry { padding: 12px 12px 12px; justify-content: flex-start; }
  .card { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .brand { padding: 16px 18px; gap: 10px; }
  .brand-more-open { display: inline-flex; }
  .brand-lead { font-size: 16px; }
  .panel { padding: 22px 18px 26px; }
  .title { font-size: 23px; }
}

/* ---------- [보기] sits inside the password box, on the right ---------- */
.with-button:has(> .reveal) { position: relative; }
.with-button:has(> .reveal) > .input { padding-right: 84px; }
.with-button > .reveal {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 9px 9px 0;
  background: transparent;
  font-size: 14px;
}
.title, .lead, .note p, .hint { word-break: keep-all; }

/* 운영 총괄: the band above the sign-in screens, and the 6-digit box */
.status-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 16px; }
.status-band[hidden] { display: none; }
.status-band-text { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.code-input { font-size: 22px; letter-spacing: 0.3em; max-width: 220px; }

#screen-mfa .help > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }

/* ---------- 이어서①-3: 관리자가 잠겼나요? ---------- */
.help-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.help-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* 비밀번호 찾기 (주인 10-17): 로그인 단추 바로 아래 -- 잊은 사람이 가장 먼저 찾는 자리 */
.forgot-line { margin: 10px 0 0; display: flex; justify-content: flex-end; }
.forgot-form { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.forgot-form .box p + p { margin-top: 6px; }
/* the robot trap: out of sight and out of the tab order, but still a real field */
.help-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.help-trap input { font-size: 16px; }

/* ---------- 교원 확인 준비 (folded until SQL 017) ---------- */
.teacher-check { display: flex; flex-direction: column; gap: 8px; }
.teacher-check[hidden] { display: none; }
.teacher-mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.teacher-mail-row .input { flex: 1 1 140px; min-width: 0; }
.teacher-at { font-weight: 700; }