html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x:hidden;}

#pdf-container {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
  width: 75vw;
  height: auto;
  margin: 0 auto;
  border: 1px solid black;
  overflow: hidden;
  background-color: #eee;
}

@media (max-width: 768px) {
  #pdf-container {
    width: 100vw;
    margin: 0;
  }
}

.page-info {
    text-align: center;
    font-size: 0.9em;
    color: #555;
}

#link-container {
    text-align: left;
}

.controller {
    text-align: right;
    padding-right: 1em;
}

.controller a {
    vertical-align: middle;
    text-decoration: none;
    color: #333;
}

/* --- 埋め込みモード (embed=true) 用のスタイル --- */
body.embedded-mode {
    margin: 0;
    padding: 0;
    overflow: hidden; /* iframeに不要なスクロールバーが出ないように */
}

body.embedded-mode #pdf-container {
    width: 100vw;  /* iframeの幅いっぱいに */
    height: 100vh; /* iframeの高さ いっぱいに */
    margin: 0;     /* マージンなし */
    border: none;  /* ボーダーなし */
    position: absolute; /* ビューポート基準で配置 */
    top: 0;
    left: 0;
    background-color: transparent; /* 必要なら背景を透過に */
}

/* 埋め込み時に非表示にする要素 */
body.embedded-mode .controller,
body.embedded-mode footer,
body.embedded-mode #link-container { /* link-containerも非表示にする場合 */
    display: none;
}

/* 埋め込み時のページ番号表示のスタイル (例: 右下に表示) */
body.embedded-mode .page-info {
    position: absolute;
    bottom: 5px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
    color: white;
    padding: 3px 8px; /* パディング調整 */
    border-radius: 4px; /* 角丸 */
    font-size: 0.8em;
    z-index: 10; /* PDFコンテナより手前に表示 */
}