html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* 부수 입력칸의 폭. 인라인 style="" 을 쓰지 않는 이유는 CSP 의
   style-src 에 'unsafe-inline' 을 넣지 않기 위해서다. */
.sp-copies {
  width: 5.5rem;
}

.sp-copies-wide {
  width: 6rem;
}

/* 작품 정보(제목·방송사)를 고치는 폼. 둘 다 짧으니 줄 전체를 먹지 않게 묶어 둔다. */
.sp-rename {
  max-width: 32rem;
}

/* 두 줄의 칸 이름표. "제목"과 "방송사"는 글자 수가 달라서, 폭을 잡아 주지
   않으면 입력 칸의 왼쪽 끝이 줄마다 어긋난다. */
.sp-rename-label {
  min-width: 4.5rem;
}

/* 회차 번호 칸. 세 자리면 충분하다 — 부제 칸이 나머지를 가져간다. */
.sp-episode-number {
  max-width: 5rem;
  flex: 0 0 auto;
}

/* 사람을 찾는 칸. 줄 전체를 먹으면 표보다 검색창이 커 보인다. */
.sp-people-find {
  max-width: 32rem;
}

/* 사람 상세의 소속 목록. 찾기 칸과 같은 폭으로 맞춘다. */
.sp-person-tenants {
  max-width: 32rem;
}

/* 편집기. 씬 번호·시간은 짧고 장소가 나머지를 가져간다. 인물 칸은 이름 열(15자)만큼. */
.sp-scene-number {
  max-width: 5rem;
  flex: 0 0 auto;
}

.sp-scene-time {
  max-width: 7rem;
  flex: 0 0 auto;
}

.sp-block-kind {
  max-width: 5.5rem;
  flex: 0 0 auto;
}

.sp-block-name {
  max-width: 10rem;
}

/* 저장·올리기 줄은 긴 회차에서도 손 닿는 곳에 있어야 한다. */
.sp-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.sp-editor-note {
  max-width: 20rem;
}

/* 오류가 없을 때의 검증 요약. ASP.NET 은 빈 <li style="display:none"> 을 넣어 두는데,
   CSP 가 인라인 style 을 막아 빈 글머리표(빨간 점)가 보인다. 요약 칸째로 숨긴다. */
.validation-summary-valid {
  display: none;
}