/* 언어(한국어 · English)와 책장 보기(분류별 · 나이별), 책 카드 나이 칩 */
/* ───── 설정: 화면 언어 ───── */
#reader-settings .setting-lang {
  margin: 20px 0 0;
  padding: 14px;
  border: 1px solid #dce3d3;
  border-radius: 16px;
  background: #fff;
}
#reader-settings .lang-choices {
  display: flex;
  gap: 10px;
}
#reader-settings .lang-choices label {
  flex: 1;
  cursor: pointer;
}
#reader-settings .lang-choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#reader-settings .lang-choices span {
  display: block;
  padding: 10px 12px;
  border: 1px solid #dce3d3;
  border-radius: 12px;
  background: #f2f5e9;
  text-align: center;
  font:
    17px/1.3 Jua,
    sans-serif;
  color: #365941;
}
#reader-settings .lang-choices input:checked + span {
  background: #3e5c45;
  border-color: #3e5c45;
  color: #fff;
}
#reader-settings .lang-choices input:focus-visible + span {
  outline: 3px solid #664a9b;
  outline-offset: 3px;
}
#reader-settings .setting-lang small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #59684f;
}

/* ───── 책 안: 한 / EN (그 책에 두 언어가 다 있을 때만) ───── */
.lang-toggle {
  gap: 2px;
  padding: 4px;
  font-size: 15px;
}
.lang-toggle span {
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 10px;
  color: #7b867d;
  text-align: center;
}
.lang-toggle span.on {
  background: #3e5c45;
  color: #fff;
}
#reader .reader-progress .lang-toggle {
  min-height: 36px;
  padding: 3px;
}

/* ───── 책장 위: 분류별 / 나이별 (부모용이라 작게, 오른쪽 위) ───── */
.shelf-view {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin: -8px 0 10px;
}
.shelf-view button {
  font-family: inherit; /* 버튼은 기본 글꼴을 쓰므로 앱 글꼴로 맞춘다 */
  padding: 4px 12px;
  border: 1px solid #dce3d3;
  border-radius: 999px;
  background: transparent;
  color: #7b867d;
  font-size: 13px;
  line-height: 1.4;
}
.shelf-view button[aria-pressed='true'] {
  background: #e9efdd;
  border-color: #c9d4bd;
  color: #365941;
}

/* ───── 책 카드 나이 칩: 표지 왼쪽 위에 작게 ───── */
.age-chip {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fffdf5e6;
  color: #3e5c45;
  font:
    13px/1.5 Jua,
    sans-serif;
  pointer-events: none;
}