/* =============================================================================
   층(layer)을 쓰지 않는 따로 떨어진 페이지(첫 페이지·PASS·학생 서류 발급)용 연결 파일 · 2026-09-19 P6
   ① 옛 색 이름(design-tokens.css·base.css) → 디자인 토큰(ds-tokens.css). 본체 앱은 css/ds-bridge.css(층 안)가
      같은 일을 한다 — 대응을 바꿀 때 두 파일을 함께 고친다(테스트가 같은지 본다).
   ② 선 아이콘(/icons/ds-icons.svg) 기본 모양 — 본체 ds.css 의 .o-icon 과 같다.
   싣는 순서: design-tokens.css → base.css(있으면) → ds-tokens.css → 이 파일.
   어두운 화면(:root.dark)은 옛 값 그대로 — 더 구체적인 규칙이라 이 파일이 덮지 않는다(P7 에서 정리).
   ============================================================================= */
:root {
  --ink-50:  var(--o-grey-50);
  --ink-100: var(--o-grey-100);
  --ink-200: var(--o-grey-200);
  --ink-300: var(--o-grey-300);
  --ink-400: var(--o-grey-500);
  --ink-500: var(--o-grey-600);
  --ink-600: var(--o-grey-700);
  --ink-700: var(--o-grey-800);
  --ink-800: var(--o-grey-900);
  --ink-900: var(--o-grey-900);

  --paper-0: var(--o-grey-0);
  --paper-1: var(--o-grey-50);
  --paper-2: var(--o-grey-50);

  --success-100: var(--o-success-subtle);
  --success-600: var(--o-success);
  --success-700: var(--o-success-text);
  --warning-100: var(--o-warning-subtle);
  --warning-700: var(--o-warning-text);
  --warning-800: var(--o-warning-text);
  --danger-100: var(--o-red-100);
  --danger-600: var(--o-danger);
  --danger-700: var(--o-red-600);

  /* base.css 의 옛 줄임 이름 — 본체 main-inline.css 와 같은 대응 */
  --G0: var(--paper-1);
  --G1: var(--ink-100);
  --G2: var(--ink-200);
  --G3: var(--ink-500);
  --G4: var(--ink-700);
  --G5: var(--ink-700);
  --TX: var(--ink-900);
  --WH: var(--paper-0);
  --OK: var(--success-600);
  --ER: var(--danger-600);
}

.o-icon {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}

/* 슬로건의 'OLLA' — 층(@layer)이 없는 화면(첫 페이지·PASS·학생)에서도 같은 강조색(2026-09-20) */
.o-olla { color: var(--o-primary); font-weight: 700; }
:root.dark .o-olla { color: var(--o-primary-300); }

/* 알림 상자(Callout) — 본체 ds.css 의 .o-callout 과 같은 모양·같은 색 이름(2026-10-07, 첫 페이지 체험 신청의 채용 공고 안내).
   data-tone 으로 색을 바꾼다(info 기본 · warning · danger · success) */
.o-callout {
  --_bg: var(--o-info-subtle); --_bd: var(--o-info-border); --_fg: var(--o-info-text);
  display: flex; align-items: flex-start; gap: var(--o-space-8); padding: var(--o-space-12);
  font-size: var(--o-font-size-table); line-height: var(--o-font-line-table);
  color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--o-radius-m);
}
.o-callout[data-tone="warning"] { --_bg: var(--o-warning-subtle); --_bd: var(--o-warning-border); --_fg: var(--o-warning-text); }
.o-callout[data-tone="danger"] { --_bg: var(--o-danger-subtle); --_bd: var(--o-danger-border); --_fg: var(--o-danger-text); }
.o-callout[data-tone="success"] { --_bg: var(--o-success-subtle); --_bd: var(--o-success-border); --_fg: var(--o-success-text); }
.o-callout[hidden] { display: none; }
.o-callout > .o-icon { margin-top: 2px; }
.o-callout__body { flex: 1; min-width: 0; }
.o-callout__title { display: block; font-weight: 700; }

/* ── 하단 탭바(2026-10-17, 학생 앱 0단계) — 학생 화면(/me/)의 다섯 탭(홈·출결·할 일·평가·더보기).
   휴대폰: 화면 아래에 붙고 아이폰 홈 막대 자리(--o-safe-bottom)를 비운다. 넓은 화면(768px~): 같은 다섯이 위쪽 탭 줄이 된다.
   누르는 곳은 44px 이상. 고른 탭은 aria-current="page". 숫자 표시는 .o-tabbar__badge. 예시는 스타일 가이드 '하단 탭바' */
.o-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--o-z-appbar);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 var(--o-space-4) var(--o-safe-bottom); background: var(--o-surface-card);
  border-top: 1px solid var(--o-border-divider); box-shadow: var(--o-shadow-xs);
}
.o-tabbar[hidden] { display: none; }
.o-tabbar--static { position: static; }
.o-tabbar__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--o-space-2);
  min-width: var(--o-touch); min-height: var(--o-tabbar); padding: var(--o-space-6) 0; border: 0; background: transparent;
  font-family: var(--o-font-family-sans); font-size: var(--o-font-size-caption); font-weight: var(--o-font-weight-semibold);
  color: var(--o-text-subtle); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.o-tabbar__item .o-icon { width: var(--o-icon-l); height: var(--o-icon-l); }
.o-tabbar__item:hover { color: var(--o-text-title); }
.o-tabbar__item[aria-current="page"] { color: var(--o-primary-text); }
.o-tabbar__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--o-focus-ring); border-radius: var(--o-radius-m); }
.o-tabbar__badge {
  position: absolute; top: var(--o-space-4); left: calc(50% + var(--o-space-6)); min-width: var(--o-icon-s); padding: 0 var(--o-space-4);
  border-radius: var(--o-radius-full); background: var(--o-danger); color: var(--o-on-danger);
  font-size: var(--o-font-size-footnote); line-height: var(--o-font-line-footnote); text-align: center;
}
.o-tabbar__badge[hidden] { display: none; }
@media screen and (min-width: 768px) {
  .o-tabbar {
    position: sticky; top: 0; bottom: auto; display: flex; gap: var(--o-space-4); padding: 0;
    background: var(--o-surface-page); border-top: 0; border-bottom: 1px solid var(--o-border-divider); box-shadow: none;
  }
  .o-tabbar--static { position: static; }
  .o-tabbar__item {
    flex-direction: row; gap: var(--o-space-6); min-height: var(--o-touch); padding: 0 var(--o-space-16); margin-bottom: -1px;
    border-bottom: 2px solid transparent; font-size: var(--o-font-size-body);
  }
  .o-tabbar__item .o-icon { width: var(--o-icon-m); height: var(--o-icon-m); }
  .o-tabbar__item[aria-current="page"] { border-bottom-color: var(--o-primary); }
  .o-tabbar__badge { position: static; }
}

/* ── 서명칸(2026-10-17, 학생 앱 1단계) — 입학원서 등의 서명 문항. 손가락·마우스로 이름을 쓰는 칸(js/sign-pad.js 가 그린다).
   칸 비율 3:1, 획 색은 칸의 글자색. 쓰면 data-state="ink", 빠뜨렸으면 data-state="bad". [서명 지우기]는 44px. 예시는 스타일 가이드 '서명칸' */
.o-sign { display: flex; flex-direction: column; gap: var(--o-space-8); }
.o-sign__pad {
  position: relative; border: 1px dashed var(--o-border-input); border-radius: var(--o-radius-m);
  background: var(--o-surface-card); color: var(--o-text-title); touch-action: none;
}
.o-sign__canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; border-radius: var(--o-radius-m); cursor: crosshair; }
.o-sign__hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--o-space-12);
  color: var(--o-text-muted); font-size: var(--o-font-size-body); text-align: center; pointer-events: none;
}
.o-sign[data-state="ink"] .o-sign__hint { visibility: hidden; }
.o-sign[data-state="bad"] .o-sign__pad { border: 2px solid var(--o-danger); }
.o-sign__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-8); }
.o-sign__state { font-size: var(--o-font-size-caption); color: var(--o-success-text); }
.o-sign__clear {
  min-height: var(--o-touch); padding: 0 var(--o-space-16); border: 1px solid var(--o-border-input); border-radius: var(--o-radius-m);
  background: var(--o-surface-card); color: var(--o-text-subtle); font: inherit; font-size: var(--o-font-size-body); cursor: pointer;
}
.o-sign__clear:hover { color: var(--o-text-title); }
.o-sign__clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--o-focus-ring); }

/* ── 출결 달력(2026-10-17, 학생 앱 2단계) — 학생 앱 [출결]의 날짜별 출결. 날마다 단추 하나(누르면 그날 입실·퇴실 시각).
   색은 상태 등록표(ODS.STATUS.attendance)의 data-tone — 같은 말이면 어느 화면에서나 같은 색. 수업 없는 날은 data-off, 오늘은 data-today,
   고른 날은 aria-pressed="true". 날 단추는 44px 이상(7칸 사이 간격을 좁혀 휴대폰 390px 에서도 44px). 예시는 스타일 가이드 '출결 달력' */
.o-atdcal { display: grid; gap: var(--o-space-4); }
.o-atdcal__week, .o-atdcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--o-space-2); }
.o-atdcal__week span { text-align: center; font-size: var(--o-font-size-caption); color: var(--o-text-muted); }
.o-atdcal__pad { min-height: var(--o-touch); }
.o-atdcal [data-tone] { --_bg: var(--o-neutral-subtle); --_fg: var(--o-neutral-text); }
.o-atdcal [data-tone="success"] { --_bg: var(--o-success-subtle); --_fg: var(--o-success-text); }
.o-atdcal [data-tone="info"] { --_bg: var(--o-info-subtle); --_fg: var(--o-info-text); }
.o-atdcal [data-tone="warning"] { --_bg: var(--o-warning-subtle); --_fg: var(--o-warning-text); }
.o-atdcal [data-tone="danger"] { --_bg: var(--o-danger-subtle); --_fg: var(--o-danger-text); }
.o-atdcal__day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--o-space-2);
  min-width: 0; min-height: 52px; padding: var(--o-space-4) 0; border: 1px solid transparent; border-radius: var(--o-radius-m);
  background: var(--_bg, var(--o-surface-subtle)); color: var(--_fg, var(--o-text-subtle)); font: inherit; cursor: pointer;
}
.o-atdcal__num { font-size: var(--o-font-size-body); font-weight: 600; line-height: 1; color: var(--o-text-title); }
.o-atdcal__word { max-width: 100%; overflow: hidden; font-size: var(--o-font-size-footnote); line-height: 1.1; white-space: nowrap; }
.o-atdcal__day[data-off] { background: transparent; cursor: default; }
.o-atdcal__day[data-off] .o-atdcal__num { font-weight: 400; color: var(--o-text-muted); }
.o-atdcal__day[data-today] { border-color: var(--o-border-strong); }
.o-atdcal__day[aria-pressed="true"] { border: 2px solid var(--o-primary); }
.o-atdcal__day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--o-focus-ring); }
.o-atdcal__legend {
  display: flex; flex-wrap: wrap; gap: var(--o-space-6) var(--o-space-12); margin: var(--o-space-8) 0 0; padding: 0; list-style: none;
  font-size: var(--o-font-size-caption); color: var(--o-text-subtle);
}
.o-atdcal__legend li { display: inline-flex; align-items: center; gap: var(--o-space-4); }
.o-atdcal__key { display: inline-block; width: var(--o-space-12); height: var(--o-space-12); border-radius: var(--o-radius-xs); background: var(--_bg); }