@charset "UTF-8";
/* 「セッションを確認しています」「ログインが必要です」などの案内（2026-10-08 作り直し）。
   読むのは ielts_app/config/session-check-ui.php（1枚の画面）と session-check-overlay.php（ページの上に重ねる版）。
   以前は暗い地＋光る水色・橙・赤の枠と等幅の英字ラベルだった。いまはログインの画面（mypage/css/login.css）と同じ、
   白い器・罫・紺の主ボタン。色・角・文字の大きさは役割の変数（css/ds/roles.css） */

.sck-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--ui-surface-sunken);
  color: var(--ui-ink);
  font-family: "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}
.sck-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--ui-surface-sunken);
  color: var(--ui-ink);
  font-family: "Noto Sans JP", sans-serif;
}
.sck-overlay *, .sck-page * { box-sizing: border-box; }

.sck-card {
  width: 100%;
  max-width: 400px;
  padding: 32px 28px 28px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: var(--ui-surface);
  text-align: center;
}
.sck-card__logo { display: block; width: 180px; height: auto; margin: 0 auto 24px; }
.sck-card__title {
  margin: 0 0 8px;
  font-size: var(--ui-fs-lead);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ui-ink-head);
  white-space: pre-line;
}
.sck-card__desc { margin: 0 0 20px; font-size: var(--ui-fs-body); line-height: 1.7; color: var(--ui-ink-muted); }
.sck-card__count { margin: 0 0 16px; font-size: var(--ui-fs-meta); color: var(--ui-ink-muted); }

/* 確認中の印（細い輪が回る） */
.sck-card__spin {
  width: 28px;
  height: 28px;
  margin: 0 auto 16px;
  border: 2px solid var(--ui-line);
  border-top-color: var(--ui-primary);
  border-radius: 50%;
  animation: sck-spin 1s linear infinite;
}
@keyframes sck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sck-card__spin { animation: none; } }

.sck-card__btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--ui-primary);
  border-radius: var(--ui-r-ctl);
  background: var(--ui-primary);
  font-size: var(--ui-fs-card);
  font-weight: 700;
  color: var(--ui-ink-on-fill);
  text-decoration: none;
  transition: background .2s ease;
}
.sck-card__btn:hover { border-color: var(--ui-primary-hover); background: var(--ui-primary-hover); color: var(--ui-ink-on-fill); }