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;
}

.sp-editor-author {
  max-width: 9rem;
}

/* 여러 줄로 적은 글(소개·시놉시스·수정고 메모). 적은 줄바꿈을 그대로 보여 준다. */
.sp-pre-line {
  white-space: pre-line;
}

/* 제작사 로고. 원본이 커도 머리글 한 줄 높이를 넘지 않게 한다. */
.sp-logo {
  max-height: 72px;
  max-width: 180px;
  object-fit: contain;
}

/* 작품 그림. 포스터는 세로(2:3), 스틸컷은 가로(16:9) 틀에 맞춰 자른다. */
.sp-image-poster,
.sp-image-still {
  object-fit: cover;
}

.sp-image-poster {
  aspect-ratio: 2 / 3;
}

.sp-image-still {
  aspect-ratio: 16 / 9;
}

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

/* 휴대폰에서 손가락으로 누르는 단추(67차). 뷰어의 대사 강조·앞뒤 씬·씬 목록이 작아서
   옆 단추를 잘못 누르기 쉬웠다. 높이만 키우고 글자 크기는 두어 줄 수를 지킨다. */
.sp-tap { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }

/* 꼭 넣어야 하는 칸의 이름 뒤에 * 를 붙인다(67차). 칸마다 적지 않고, 모델의 [Required] 가
   만들어 내는 data-val-required 를 보고 붙인다 — 모델을 고치면 표시도 따라 바뀐다. */
.form-label:has(+ input[data-val-required]:not([type="hidden"]))::after,
.form-label:has(+ textarea[data-val-required])::after {
    content: " *";
    color: var(--bs-danger);
}

/* 목록 위 찾기 칸(67차). 화면 전체로 늘어나면 단추가 멀어진다. 좁은 화면에서는 한 줄을 다 쓴다. */
.sp-search { flex: 1 1 14rem; max-width: 28rem; }

/* 편집기의 좁은 화면(67차). 휴대폰 폭에서는 한 줄에 칸 셋이 들어가 장소·지시 칸이 두세 글자로
   줄어들었다. 긴 칸(장소·지시)을 다음 줄로 내리고, 아래 붙은 저장 줄은 두 줄로 접는다.
   input-group 은 한 줄을 전제로 모서리를 깎으므로, 내린 칸과 그 앞 칸의 모서리를 다시 둥글린다. */
@media (max-width: 575.98px) {
  .sp-scene .input-group > .sp-scene-location,
  .sp-block .input-group > .sp-block-paren {
    flex: 1 1 100%;
    order: 3;
    margin-left: 0 !important;
    margin-top: .25rem;
    border-radius: var(--bs-border-radius-sm) !important;
  }

  .sp-scene .input-group > .sp-scene-time,
  .sp-block .input-group > .sp-block-name {
    border-top-right-radius: var(--bs-border-radius-sm) !important;
    border-bottom-right-radius: var(--bs-border-radius-sm) !important;
  }

  .sp-scene-time,
  .sp-block-name {
    max-width: none;
    flex: 1 1 auto;
  }

  /* 줄 아래 "아래에 지문·대사·줄 지우기" 는 글자 단추라 손가락에 작다. 사이를 벌린다. */
  .sp-block-ops { column-gap: .75rem !important; }
  .sp-block-ops > .btn { min-height: 2rem; }
  .sp-block-ops > .text-muted { display: none; }

  .sp-editor-note,
  .sp-editor-author {
    max-width: none;
    flex: 1 1 40%;
    order: 2;
  }
}