/* ============================================================
   Sprint 4.7 — 16:9 ヒーローゾーン + DOCXライクページビュー
   ============================================================ */

/* --- Hero Zone -------------------------------------------- */
.hero-zone-frame {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.hero-zone {
  width: 100%;
  max-width: 100%;
  height: clamp(600px, 80vh, 1000px);
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-soft, #f4f7f5);
  border: 2px solid rgba(30, 58, 95, 0.14);
  box-shadow:
    0 18px 42px rgba(30, 58, 95, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 0;
}

.hero-zone.drag-over {
  border-color: var(--accent, #2b7a78);
  background: #eef6f6;
  box-shadow:
    0 22px 48px rgba(43, 122, 120, 0.16),
    0 0 0 3px rgba(43, 122, 120, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.hero-zone.drop-bounce {
  animation: dropBounce 0.52s ease-out;
}

@keyframes dropBounce {
  0% { transform: scale(0.992); }
  45% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

/* --- Drop layer (未選択時) --------------------------------- */
.hz-drop-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  pointer-events: none; /* clicks pass through to hero-zone */
}

.hz-drop-icon {
  font-size: 3rem;
  line-height: 1;
}

.hz-drop-text {
  font-size: 1.05rem;
  color: var(--text, #243244);
  font-weight: 600;
  line-height: 1.5;
}

.hz-drop-hint {
  font-size: 0.78rem;
  color: var(--muted, #5c6773);
}

.hz-flow-hint {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--accent, #2b7a78);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Preview layer (選択後) -------------------------------- */
.hz-preview-layer {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* --- State switching -------------------------------------- */
.hz-meta-overlay,
.hz-nav-overlay {
  position: relative;
  width: 100%;
  z-index: 10;
}

/* --- Meta overlay (ファイル名・変更ボタン) ---------------- */
.hz-meta-overlay {
  display: none;
  padding: 0.35rem 0.75rem;
  background: rgba(30, 58, 95, 0.9);
  color: #fff;
  font-size: 0.78rem;
  align-items: center;
  gap: 0.6rem;
  z-index: 10;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hz-meta-overlay .hz-file-info {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hz-meta-overlay button {
  flex-shrink: 0;
  background: var(--accent, #2b7a78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 4px;
  padding: 0.12rem 0.5rem;
  font-size: 0.74rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.2s ease;
}

.hz-meta-overlay button:hover {
  background: #236462;
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 18px rgba(30, 58, 95, 0.18);
}

/* --- Page nav overlay (前/次ボタン) ----------------------- */
.hz-nav-overlay {
  display: flex;
  padding: 0.45rem 1rem;
  background: rgba(30, 58, 95, 0.9);
  color: #fff;
  font-size: 0.85rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 10;
}

.hz-nav-overlay button {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: #fff;
  border-radius: 999px;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hz-nav-overlay button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.hz-nav-overlay button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 18px rgba(30, 58, 95, 0.18);
}

/* --- Loading indicator ------------------------------------ */
.hz-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #5c6773);
  font-size: 0.9rem;
  background: #f9f9f6;
}

/* --- pv-paper (DOCXライク 1ページ = 白い紙1枚) ------------ */
.pv-paper {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 2rem 2.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.8;
  color: #222;
  box-shadow: inset 0 0 0 1px rgba(30, 58, 95, 0.06);
  cursor: grab;
  scrollbar-gutter: stable both-edges;
}

/* --- pv content elements ---------------------------------- */
.pv-container {
  width: 100%;
  height: 100%;
}

.pv-title {
  font-size: 1.2em;
  font-weight: 700;
  margin-block-end: 1em;
}

.pv-author,
.pv-column-heading,
.pv-cast-member {
  margin-block-end: 0.8em;
}

.pv-cast-member {
  padding-inline-start: 5.57em;
  /* AC5: DOCXのLINE_STORY=312（1.3x行間）に合わせて行間を統一 */
  line-height: 1.3;
}

.pv-role {
  display: block;
  padding-inline-start: var(--tab-width);
  /* text-indent は vertical-rl で element-box 基準のため使用不可（オーバーフロー発生）
     代わりに .pv-role-name-slot に margin-inline-start: -tab-width を適用 */
  margin: 0;
}

.pv-role-name-slot {
  display: inline-block;
  inline-size: var(--tab-width);
  margin-inline-start: calc(-1 * var(--tab-width));
}

.pv-role-name {
  font-weight: 700;
}

.pv-dialogue {
  text-indent: 0;
}

.pv-stage {
  font-size: 1em;
  padding-inline-start: 4.56em;
}

.pv-pillar {
  padding-inline-start: var(--tab-width);
  margin-block-end: var(--space-2);
  color: var(--ink);
  font-weight: 700;
}

.pv-stage-single {
  padding-inline-start: 4.56em;
  padding-block-start: 1.1em;
  margin-block-end: 1.1em;
}

.pv-stage-first {
  padding-block-start: 1.1em;
  margin-block-end: 0;
}

.pv-stage-middle {
  padding-block-start: 0;
  margin-block-end: 0;
}

.pv-stage-last {
  padding-block-start: 0;
  margin-block-end: 1.1em;
}

.pv-stage + .pv-stage {
  margin-block-start: 0;
}

.pv-role,
.pv-stage {
  cursor: pointer;
  pointer-events: auto;
}

[data-entry-index] {
  cursor: pointer;
}

[data-entry-index].selected {
  outline: 2px solid rgba(43, 122, 120, 0.7);
  outline-offset: 2px;
  background: rgba(43, 122, 120, 0.08);
}

.pv-scene-break {
  opacity: 0.5;
  margin-block: 1em;
}

.pv-blank {
  min-width: 1em;
}

/* --- pv-unknown: 未分類エントリの視覚的区別 (Sprint 4.32) --- */
.pv-unknown {
  border: 2px dashed #e6c84a;
  background: rgba(230, 200, 74, 0.08);
  padding: 0.2em 0.4em;
  cursor: pointer;
}

/* --- Control bar ------------------------------------------ */
.control-bar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.8rem 0 0.4rem;
}

.control-bar .cb-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text, #243244);
  white-space: nowrap;
}

.control-bar .cb-group input[type="number"] {
  width: 4.2rem;
}

.control-bar .cb-group select {
  min-width: 11rem;
}

/* --- Details accordion ------------------------------------ */
.details-accordion {
  margin-top: 0.6rem;
  margin-bottom: 0.5rem;
}

.details-accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink, #1e3a5f);
  padding: 0.4rem 0;
  font-size: 0.9rem;
  user-select: none;
}

.details-accordion .details-body {
  padding: 0.8rem 0 0.4rem;
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 768px) {
  .hero-zone {
    max-width: 100%;
    border-radius: 8px;
    height: clamp(520px, 72vh, 860px);
  }

  .hz-drop-text {
    font-size: 0.92rem;
  }

  .pv-paper {
    padding: 1.2rem 1.5rem;
  }

  .hz-preview-layer {
    padding-bottom: 80px;
    box-sizing: border-box;
  }

  #hz-change-file-btn {
    min-height: 44px;
  }

  .mobile-submit-guide {
    display: none;
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 1rem;
    z-index: 29;
    padding: 0.85rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(30, 58, 95, 0.14);
    color: var(--ink, #1e3a5f);
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
  }

  body:not(.has-file) .mobile-submit-guide {
    display: flex;
    animation: guidePulse 1.8s ease-in-out infinite;
  }

  body.has-file .mobile-submit-guide {
    display: none;
  }

  body.has-file #submit {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 1rem;
    z-index: 30;
    max-width: calc(100vw - 1.5rem);
    display: block;
  }

  body.has-file {
    padding-bottom: 7rem;
  }

  body:not(.has-file) #submit {
    display: none;
  }
}

.preview-hint {
  display: none;
  margin: 0.5rem 0 0.4rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: rgba(237, 247, 245, 0.9);
  color: var(--ink, #1e3a5f);
  font-size: 0.86rem;
  line-height: 1.5;
}

.preview-hint.is-visible {
  display: block;
}

#entry-context-menu {
  position: fixed;
  display: none;
  z-index: 1200;
  min-width: 160px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--border, #d7e0e8);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(30, 58, 95, 0.2);
}

#entry-context-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  color: var(--text, #243244);
  cursor: pointer;
}

#entry-context-menu button:hover {
  background: #edf7f5;
}

@media (max-width: 480px) {
  .hz-drop-icon {
    font-size: 2rem;
  }

  .hz-drop-text {
    font-size: 0.85rem;
  }

  .control-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .control-bar .cb-group {
    flex-wrap: wrap;
  }
}

@keyframes guidePulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 16px 34px rgba(30, 58, 95, 0.14); }
  50% { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(30, 58, 95, 0.2); }
}

/* AC4 Sprint 4.34: <rt> font-size ≥ 8px 保証
   ブラウザデフォルト (0.5em) は親フォントが 14px 以下の場合 7px 未満になる。
   max() で 0.5em と 8px の大きい方を採用し視認性を確保する。 */
rt {
  font-size: max(0.5em, 8px);
}