/* 세로 휴대폰: 스티커는 그림 밑에 가로 한 줄로 (그림은 폭에 꽉). 폭 700 이하(키 낮은 가로 휴대폰은 빼고).
   키가 낮은 가로 휴대폰(높이 500 이하)은 맨 아래 규칙대로 스티커를 그림 오른쪽 세로 줄로(그림을 크게).
   태블릿·컴퓨터는 그대로(그림 오른쪽 세로 줄, 아이패드 세로는 11 에서 이미 그림 밑).
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */
@media (max-width: 700px) and (orientation: portrait), (max-width: 700px) and (min-height: 501px) {
  #reader .picture-side {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  #reader .board {
    justify-self: center;
  }
  #reader .item-rail {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 18px;
  }
  #reader .item-rail #choice-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }
  #reader .item-rail #choice-panel[hidden] {
    display: none;
  }
  /* 「골라서 붙여요」 글은 좁은 줄에서 빼고 스티커를 크게 (아이는 글 대신 그림을 본다) */
  #reader .item-rail .step-tag {
    display: none;
  }
  #reader .choices {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-width: 0;
    gap: 8px;
  }
  #reader .choice {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 6px 8px;
    border-radius: 14px;
  }
  #reader .choice-art {
    flex: none;
    width: 64px;
  }
  #reader .choice img {
    height: 60px;
  }
  #reader .choice > span:last-child {
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    text-align: left;
  }
  /* 다 붙인 쪽: 붙인 스티커와 「다시 붙이기」를 한 줄로 */
  #reader .item-rail .tray {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }
  #reader .item-rail .sticker {
    width: 84px;
    flex: none;
  }
  #reader #sticker-art > img {
    height: 60px;
  }
  #reader .item-rail #again {
    width: auto;
    margin: 0;
    padding: 8px 14px;
    font-size: 15px;
  }
}
/* 폭 380 이하(아이폰 SE 등): 보기 글씨를 그림 밑으로 */
@media (max-width: 380px) {
  #reader .choice {
    flex-direction: column;
    gap: 2px;
  }
  #reader .choice > span:last-child {
    text-align: center;
    font-size: 14px;
  }
  #reader .choice img {
    height: 52px;
  }
}
/* 가로 휴대폰: 스티커는 그림 오른쪽 세로 줄(좁게), 그림은 화면 높이에 맞춰 크게(조작 줄은 그 밑, 조금 내리면 보임) */
@media (orientation: landscape) and (max-height: 500px) {
  #reader {
    --reader-chrome: 150px;
  }
  #reader .picture-side {
    grid-template-columns: auto 96px;
    justify-content: center;
    gap: 8px;
    align-items: start;
  }
  /* 폭 700 이하 가로(아이폰 SE 등)는 10 에서 그림을 폭에 꽉 채우므로, 여기서 다시 화면 높이에 맞춘다 */
  #reader .board {
    /* 칸 폭이 그림을 따라가므로 100% 대신 화면 폭에서 스티커 줄·여백을 뺀 만큼까지 */
    width: min(calc(100vw - 140px), calc((100vh - var(--reader-chrome)) * var(--ratio, 1.6)));
    width: min(calc(100vw - 140px), calc((100dvh - var(--reader-chrome)) * var(--ratio, 1.6)));
  }
  #gnb {
    height: 52px;
  }
  .gnb-button {
    min-height: 42px;
    padding: 6px 12px;
  }
  #reader .reader-progress {
    margin: 2px 0 4px;
  }
  #reader .item-rail {
    display: block;
    width: auto;
    padding: 6px;
    border-radius: 16px;
  }
  #reader .item-rail .step-tag {
    display: none;
  }
  #reader .choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #reader .choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-height: 0;
    padding: 4px;
    border-radius: 12px;
  }
  #reader .choice-art {
    width: auto;
  }
  #reader .choice img,
  #reader #sticker-art > img {
    height: 44px;
  }
  #reader .choice > span:last-child {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
  }
  /* 다 붙인 쪽: 붙인 스티커 밑에 「다시 붙이기」 */
  #reader .item-rail .tray {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  #reader .item-rail .sticker {
    width: 100%;
  }
  #reader .item-rail #again {
    width: 100%;
    margin: 0;
    padding: 6px 4px;
    font-size: 13px;
  }
}