/*
 * public/css/ef-width-mode.css
 * [feat 2026-05-20] 전역 폭 선택 모드 — 1280 중앙 / 전체 폭 토글.
 *   body 의 클래스(.ef-width-centered / .ef-width-full)에 따라 본문 컨테이너 최대 너비 결정.
 *   사용자 선호는 localStorage('efWidthMode') 에 영속화 — 다음 진입 시 복원.
 */

/* ─── 디폴트(centered): 어드민 .ef-admin-container 는 1600px 로 좁힘 ─── */
body.ef-width-centered .ef-admin-container {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 학습자 측 일반적인 컨테이너들 (centered 디폴트 강제, full 모드에서만 100%) */
body.ef-width-centered .ef-content-host,
body.ef-width-centered main.ef-main {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── full 모드: 어드민/학습자 공통, 모든 wrapper 의 max-width override ─── */
body.ef-width-full .ef-admin-container,
body.ef-width-full .ef-content-host,
body.ef-width-full main.ef-main {
  max-width: 100% !important;
  width: 100% !important;
}

/* 헤더 우측에 박히는 토글 버튼 자체의 스타일 — 어드민/학습자 공유 */
.ef-width-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(120, 120, 140, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.ef-width-toggle:hover {
  background: rgba(241, 245, 249, 1);
  border-color: rgba(99, 102, 241, 0.45);
  color: #4338ca;
}
.ef-width-toggle svg { width: 16px; height: 16px; }
.ef-width-toggle .ef-width-label { white-space: nowrap; }

/* 아이콘 전용 변형 — 정사각 버튼, 라벨 숨김 */
.ef-width-toggle.ef-width-toggle--icon {
  padding: 8px;
  width: 36px;
  height: 36px;
}
.ef-width-toggle.ef-width-toggle--icon .ef-width-label { display: none; }

/* 활성 모드 표시: full 모드일 때 살짝 강조 */
body.ef-width-full .ef-width-toggle {
  background: linear-gradient(135deg, #eef2ff, #ede9fe);
  border-color: rgba(99, 102, 241, 0.4);
  color: #4338ca;
}