/* 책장·읽기 화면 기본 모양, 질문 상자, 좁은 화면.
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */
[hidden] {
  display: none !important;
}
.books {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 60px;
}
.book-card {
  background: #fff;
  border: 1px solid #e1e5d8;
  border-radius: 20px;
  padding: 12px;
  overflow: hidden;
}
.book-card .scene-frame {
  border-radius: 12px;
}
.book-card h2 {
  font-size: 25px;
  margin: 20px 8px 6px;
}
.book-card p {
  font-size: 12px;
  color: #859279;
  margin: 0 8px 16px;
}
.book-card .primary {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}
.plain {
  border: 0;
  background: none;
  padding: 8px 0;
  font-size: 12px;
  color: #6f8265;
}
.plain:hover {
  color: #304d38;
}
.plain:disabled {
  color: #b9c0b1;
  cursor: default;
}
.page-dots {
  display: flex;
  gap: 7px;
  margin-bottom: 30px;
}
.page-dots span {
  height: 5px;
  background: #e2e7d9;
  flex: 1;
  border-radius: 9px;
}
.page-dots span.done {
  background: #8ca878;
}
.page-dots span.current {
  background: #3f6046;
}
.reading-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
}
.picture-side {
  min-width: 0;
}
.board {
  position: relative;
  aspect-ratio: 1.6;
  overflow: hidden;
  border-radius: 20px;
  background: #e9ecdd;
  box-shadow: 0 4px 18px #344b3210;
}
.scene-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scene-layer .scene-frame {
  width: 100%;
  flex: none;
}
.scene-layer img {
  user-select: none;
}
.scene-layer#after {
  opacity: 0;
  transition: opacity 0.65s ease;
}
.board.acted #after {
  opacity: 1;
}
#target {
  position: absolute;
  background: #ffffff29;
  border: 2px dashed #ffffffed;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #3e5941;
  box-shadow: 0 0 0 1px #42633a33;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
#target-symbol {
  background: #fffdf0d9;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 30px;
}
.target-label {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font: 12px Jua;
  white-space: nowrap;
  background: #fffbea;
  padding: 3px 9px;
  border-radius: 9px;
}
.board.selected #target,
.board.hovered #target {
  background: #fff6ac61;
  border-color: #f5c66e;
  box-shadow: 0 0 0 5px #fff4ca55;
}
.board.acted #target {
  display: none;
}
.scene-status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  border-radius: 20px;
  padding: 4px 10px;
  background: #fffef0e6;
  color: #4e6e43;
}
.scene-status:empty {
  display: none;
}
#placed {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
.tray {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #eff1e5;
  border: 1px solid #e0e6d6;
  border-radius: 15px;
  padding: 13px 16px;
  margin-top: 14px;
  min-height: 115px;
}
.sticker {
  background: #fffef8;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 5px;
  width: 92px;
  min-width: 92px;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.sticker img {
  width: 100%;
  height: 65px;
  object-fit: contain;
  pointer-events: none;
}
.sticker span {
  display: block;
  font: 11px Jua;
  line-height: 1.2;
}
.sticker.selected {
  border-color: #d1ac57;
  box-shadow: 0 3px 10px #6d76451b;
}
.sticker:disabled {
  cursor: default;
  opacity: 0.65;
}
.tray-copy .step-tag {
  font-size: 9px;
  letter-spacing: 1px;
  color: #8b9b7b;
}
.tray-copy p {
  font: 17px Jua;
  line-height: 1.55;
  color: #435e3c;
  margin: 3px 0;
}
.tray-copy > span:last-child {
  font-size: 10px;
  color: #8b9680;
}
.story-copy {
  padding: 12px 0;
}
.story-copy h2 {
  font-size: 34px;
  line-height: 1.35;
}
.story-copy #story-text {
  font-size: 19px;
  line-height: 1.95;
  white-space: pre-line;
  margin-top: 25px;
  color: #4c6148;
  word-break: keep-all;
}
.result-box {
  background: #e9efdf;
  border-left: 3px solid #92aa79;
  border-radius: 0 13px 13px 0;
  padding: 18px 20px;
  margin-top: 24px;
  animation: reveal 0.4s ease;
}
.result-box > span {
  font-size: 10px;
  letter-spacing: 1px;
  color: #7c926b;
}
.result-box p {
  font-size: 17px;
  line-height: 1.85;
  margin-top: 7px;
  white-space: pre-line;
  word-break: keep-all;
}
#again {
  margin-top: 9px;
}
.reader-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 25px 0 35px;
}
.reader-nav .primary {
  margin: 0;
  min-width: 130px;
  justify-content: center;
}
.reader-nav .primary:disabled {
  background: #e0e5d8;
  color: #97a18d;
  cursor: default;
}
#next-hint {
  font-size: 11px;
  color: #8d997e;
  text-align: center;
}
.finish {
  max-width: 550px;
  text-align: center;
  padding: 65px 25px;
  margin: auto;
}
.finish > span {
  font-size: 80px;
  color: #caa15d;
}
.finish h2 {
  font-size: 34px;
}
.finish p {
  margin: 20px 0 30px;
  line-height: 1.9;
  color: #819171;
}
.finish a {
  display: block;
  margin-top: 20px;
  font-size: 12px;
}
.finish .primary {
  justify-content: center;
}
#drag-ghost {
  position: fixed;
  z-index: 99;
  width: 110px;
  height: 110px;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 10px #31452d33);
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 900px) {
  .reading-layout {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 720px;
    margin: auto;
  }
  .story-copy {
    padding: 0 6px;
  }
  .story-copy h2 {
    font-size: 29px;
  }
  .story-copy #story-text {
    font-size: 17px;
    margin-top: 13px;
  }
  .story-copy .eyebrow {
    margin-bottom: 8px;
  }
  .books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .result-box {
    margin-top: 16px;
  }
  .reader-nav {
    max-width: 720px;
    margin: auto;
  }
}
@media (max-width: 500px) {
  .books {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-dots {
    margin-bottom: 15px;
  }
  .board {
    border-radius: 13px;
  }
  .tray {
    padding: 10px;
    gap: 11px;
    min-height: 100px;
  }
  .sticker {
    width: 74px;
    min-width: 74px;
  }
  .sticker img {
    height: 52px;
  }
  .tray-copy p {
    font-size: 15px;
  }
  .tray-copy > span:last-child {
    font-size: 9px;
  }
  .story-copy #story-text {
    font-size: 16px;
    line-height: 1.85;
  }
  .result-box p {
    font-size: 16px;
  }
  .reader-nav {
    gap: 7px;
  }
  .reader-nav .primary {
    min-width: 105px;
    padding: 11px 10px;
  }
  #next-hint {
    font-size: 10px;
    max-width: 135px;
  }
  .target-label {
    font-size: 9px;
    bottom: -20px;
    padding: 2px 6px;
  }
  #target-symbol {
    width: 24px;
    height: 24px;
    line-height: 23px;
    font-size: 19px;
  }
  .board #target {
    border-radius: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .result-box {
    animation: none;
  }
}

body {
  background: #fffaf1;
}
.quiz {
  margin-top: 16px;
  padding: 18px;
  background: #fff2d8;
  border: 2px solid #f2ddb5;
  border-radius: 24px;
}
.quiz-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.step-tag {
  font: 16px Jua;
  color: #755636;
}
.quiz h3 {
  font: 24px/1.5 Jua;
  margin: 12px 0 16px;
  color: #493d30;
}
.choices {
  display: flex;
  gap: 12px;
}
.choice {
  flex: 1;
  min-width: 0;
  background: #fffefb;
  border: 3px solid #f2e4c9;
  border-radius: 20px;
  padding: 10px;
  color: #4c443a;
  cursor: pointer;
}
.choice img {
  width: 100%;
  height: 100px;
  object-fit: contain;
}
.choice span {
  display: block;
  font: 18px/1.4 Jua;
  margin-top: 6px;
}
.choice:hover:not(:disabled),
.choice:focus-visible {
  border-color: #db9b48;
  transform: translateY(-2px);
}
.choice.trying {
  border-color: #dfa54c;
}
.choice.correct {
  border-color: #5b9d70;
  background: #ecf8ea;
}
.choice:disabled {
  cursor: default;
}
.choice:disabled:not(.correct) {
  opacity: 0.65;
}
#quiz-feedback {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 14px;
  color: #675138;
  min-height: 26px;
}
.sound-button {
  border: 1px solid #d2ddc6;
  background: #f7fff1;
  border-radius: 16px;
  padding: 12px 16px;
  min-height: 48px;
  font: 16px Jua;
  color: #426044;
}
.narration {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.narration label {
  font-size: 14px;
}
.narration select {
  padding: 10px;
  border: 1px solid #ccd9c2;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  min-height: 44px;
}
.narration small {
  flex-basis: 100%;
  color: #68745c;
  font-size: 12px;
}
.narration #voice-status {
  font-size: 14px;
  color: #70573b;
  flex-basis: 100%;
}
.plain {
  min-height: 44px;
  font-size: 14px;
}
.tray {
  border-radius: 22px;
}
.sticker {
  width: 110px;
  min-width: 110px;
  border-radius: 20px;
}
.sticker img {
  height: 85px;
}
.sticker span {
  font-size: 16px;
}
.tray-copy p {
  font-size: 20px;
}
.tray-copy > span:last-child {
  font-size: 13px;
  line-height: 1.5;
  display: block;
}
.tray-copy .step-tag {
  font-size: 14px;
}
.reading-layout {
  align-items: start;
}
.story-copy #story-text {
  font-size: 21px;
}
.primary {
  min-height: 48px;
}
.choice:focus-visible,
.sticker:focus-visible,
.sound-button:focus-visible {
  outline: 3px solid #664a9b;
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .story-copy {
    grid-row: 1;
  }
  .picture-side {
    grid-row: 2;
  }
  .story-copy #story-text {
    font-size: 19px;
  }
  .narration {
    margin-top: 10px;
  }
}
@media (max-width: 500px) {
  .quiz {
    padding: 13px;
    border-radius: 18px;
  }
  .quiz h3 {
    font-size: 21px;
  }
  .choices {
    gap: 7px;
  }
  .choice {
    padding: 6px;
    border-radius: 15px;
  }
  .choice img {
    height: 76px;
  }
  .choice span {
    font-size: 15px;
  }
  .sound-button {
    font-size: 14px;
    padding: 10px;
  }
  .sticker {
    width: 92px;
    min-width: 92px;
  }
  .sticker img {
    height: 70px;
  }
  .tray-copy p {
    font-size: 18px;
  }
  #quiz-feedback {
    font-size: 15px;
  }
  .top .book-link {
    font-size: 11px;
  }
  .story-copy #story-text {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-layer#after {
    transition: none;
  }
  .choice {
    transform: none !important;
  }
}