/* コンテナ全体 */
.c-earth-essay-contest-container {
  margin: 32px auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* メタ情報エリア（横書き） - 独立した要素 */
.essay-meta {
  margin-bottom: 16px;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
}

.essay-meta .award {
  font-size: 1.4em;
  color: #12a265;
  font-weight: bold;
}

.essay-meta .author-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.essay-meta .author {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.essay-meta .school-grade {
  font-size: 0.9em;
  color: #666;
}

/* 縦書き作文エリア - 独立した枠 */
.c-earth-essay-contest-view {
  border: 2px solid #afd5ab;
  padding: 40px 20px 30px;
  border-radius: 8px;
  background: #fafafa;
  font-family: "BIZ UDMincho", "BIZ UDPMincho", "源ノ明朝", "Gen Shin Gothic", "Noto Serif JP", "MS P明朝", "MS Mincho", serif, monospace;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  text-orientation: mixed;
  max-height: 80vh;
  height: 80vh;
  max-width: 100%;
  /* チェックリスト✅: overflow-x:auto + -webkit-overflow-scrolling:touch */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  position: relative;
  font-size: 1.2em;
  /* チェックリスト✅: GPU合成レイヤー強制 translate3d(0,0,0) */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: scroll-position;
  /* チェックリスト✅: 再ペイント抑制 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* モバイル最適化 */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}
.c-earth-essay-contest-view.dragging {
  cursor: grabbing;
}
.body {
  overflow: visible;
  max-height: none;
  width: 100%;
  box-sizing: border-box;
}
.c-earth-essay-contest-pages {
  width: 100%;
  height: 80vh;
  max-height: 80vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
}
.c-earth-essay-contest-page {
  width: 100%;
  height: 100%;
  display: none;
  flex-shrink: 0;
  overflow: hidden;
}
.c-earth-essay-contest-page.active {
  display: block;
}
.c-earth-essay-contest-nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  gap: 16px;
}
.c-earth-essay-contest-nav button {
  background: #e0e6f6;
  border: 1px solid #bcd;
  border-radius: 4px;
  padding: 6px 18px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}
.c-earth-essay-contest-nav button:disabled {
  background: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
}
/* 縦書きエリア内のタイトル（上合わせ） */
.c-earth-essay-contest-view .title {
  font-size: 1.4em;
  font-weight: bold;
  margin: 20px 0 0 30px;
  align-self: flex-start;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
@media (max-width: 600px) {
  .c-earth-essay-contest-container {
    margin: 16px auto;
  }
  
  .essay-meta {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .essay-meta .award {
    font-size: 1.1em;
    order: 1;
  }
  
  .essay-meta .author-info {
    align-items: flex-start;
    order: 2;
  }
  
  .essay-meta .author {
    font-size: 1.0em;
    margin-bottom: 2px;
  }
  
  .essay-meta .school-grade {
    font-size: 0.85em;
  }
  
  .c-earth-essay-contest-view {
    padding: 20px 10px 15px;
    font-size: 0.9em;
    max-height: 80vh;
    /* モバイル固有の最適化 */
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0, 0, 0);
    will-change: scroll-position;
    overscroll-behavior-x: contain;
    scroll-snap-type: none;
  }
  
  .c-earth-essay-contest-view .title {
    font-size: 1.2em;
    margin: 10px 0 0 15px;
  }
  
  .c-earth-essay-contest-pages {
    height: 80vh;
    max-height: 80vh;
  }
  
  .body {
    max-height: none;
  }
}

/* Safari/WebKit特有の最適化 */
@supports (-webkit-overflow-scrolling: touch) {
  .c-earth-essay-contest-view {
    /* チェックリスト✅: WebKit最適化 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0, 0, 0);
    isolation: isolate;
  }
}

/* 縦書きエリア内の本文 */
.c-earth-essay-contest-view .body {
  white-space: pre-line;
  text-indent: 1em;
  flex: 1;
  width: 100%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* チェックリスト✅: GPU合成レイヤー強制 */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  /* 再ペイント抑制 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
}