/* 規約: 指で使う前提 (的 44px 以上) ・ 高コントラスト ・ 本文 16px 以上 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 18px;
  background: #f2f4f7;
  color: #17273b;
}

.view { min-height: 100vh; }

/* 上の帯 */
.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #17466b;
  color: #fff;
  padding: max(env(safe-area-inset-top), 10px) 16px 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.bar h1 { font-size: 20px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.btn-bar {
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  font-size: 17px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: transparent;
  color: #fff;
}
.btn-bar:active { background: rgba(255, 255, 255, 0.25); }

/* 門 */
.gate-box {
  max-width: 420px;
  margin: 18vh auto 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.gate-box h1 { color: #17466b; }
.gate-box input {
  font-size: 24px;
  padding: 12px;
  text-align: center;
  border: 2px solid #17466b;
  border-radius: 8px;
}
.btn-main {
  min-height: 52px;
  font-size: 20px;
  font-weight: bold;
  background: #17466b;
  color: #fff;
  border: none;
  border-radius: 8px;
}
.btn-main:active { background: #0e2f4a; }
.error { color: #b3261e; font-weight: bold; }

/* 一覧 */
.big-list { list-style: none; padding: 12px; }
.big-list li { margin-bottom: 12px; }
.big-list button {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  font-size: 19px;
  text-align: left;
  background: #fff;
  color: #17273b;
  border: 2px solid #c6d2de;
  border-radius: 10px;
}
.big-list button:active { background: #dbe7f2; }
.big-list .sub { display: block; font-size: 15px; color: #4a5a6d; margin-top: 4px; }

.sync-status { padding: 8px 16px; font-size: 16px; color: #4a5a6d; }
.sync-status.err { color: #b3261e; }

/* 閲覧 */
#viewer-pages { padding: 8px; }
#viewer-pages canvas {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}