/* 아이콘 의미는 접힌 평가 도구를 펼쳤을 때도 항상 글자로 읽을 수 있다. */
.rating-options, .quiz-screen #app .rating-options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%;
}
.rate .rate-label, .quiz-screen #app .rate .rate-label { display: inline; white-space: normal; }
.rating-options button, .rating-options summary, .quiz-screen #app .rating-options button, .quiz-screen #app .rating-options summary {
  min-width: 44px; min-height: 44px; padding: 8px; font-size: 16px; line-height: 1.3;
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; position: relative;
}
.rating-options summary { cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: 12px; }
.rating-options summary::-webkit-details-marker { display: none; }
.rating-options .rating-memo { margin: 0; min-width: 0; }
.rating-options .rating-memo[open] { grid-column: 1 / -1; }
.rating-memo form { padding-top: 8px; }
.quiz-screen #app .display-controls.ratings-open .rating-tools { display: block; }
.quiz-screen #app .display-controls .rating-tools {
  width: min(380px, calc(100vw - 30px)); max-height: calc(var(--visible-height, 100vh) - 80px); overflow-y: auto;
}
.tv-mode .rating-options button, .tv-mode .rating-options summary,
.tv-mode.quiz-screen #app .rating-options button, .tv-mode.quiz-screen #app .rating-options summary { font-size: 20px; }
.rating-help { position: absolute; top: 100%; left: 0; z-index: 30; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 16px; white-space: nowrap; pointer-events: none; }
.rating-help[hidden] { display: none; }