:root{
  --vh: 100dvh;
  --header-h: 56px;
  --footer-h: 60px;

  /* 基本（ダーク） */
  --bg:#0b0d10;
  --fg:#e9eef2;
  --muted:#98a2ad;
  --brand:#3b82f6;

  --ui-header-bg: rgba(15,18,22,.9);
  --ui-header-border: #1b232c;
  --ui-footer-border: #1b232c;

  --ui-btn-bg: #11161c;
  --ui-btn-border: #243040;
  --ui-btn-fg: var(--fg);

  --ui-seg-border: #243040;

  --ui-viewer-bg: #0f1318;
  --ui-viewer-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* antarctic系テーマ */
.antarctic-viewer{
  --bg:#000;/*全背景色*/
  --fg:#fd0;/*タイトル色*/
  --muted:#ddd;/*右上文字とページ座標色*/
  --brand:#55f;

  --ui-header-bg: #37c;/*headerとfooter色*/
  --ui-header-border: #13223a;
  --ui-footer-border: #13223a;

  --ui-btn-bg: #0f1b2e;/*ボタン色*/
  --ui-btn-border: #1a2c49;
  --ui-btn-fg: #e9f2ff;

  --ui-seg-border: #1a2c49;

  --ui-viewer-bg: #115;/*画像背景色*/
  --ui-viewer-shadow: 0 20px 60px rgba(7,20,40,.55);
}
.theme-blue .btn:hover{
  background:#13223a;
  border-color:#22406e;
}

/* patagonia系テーマ */
.patagonia-viewer{
  --bg:#000;/*全背景色*/
  --fg:#322;/*タイトル色*/
  --muted:#333;/*右上文字とページ座標色*/
  --brand:#55f;

  --ui-header-bg: #e0d1c2;/*headerとfooter色*/
  --ui-header-border: #13223a;
  --ui-footer-border: #13223a;

  --ui-btn-bg: #0f1b2e;/*ボタン色*/
  --ui-btn-border: #1a2c49;
  --ui-btn-fg: #e9f2ff;

  --ui-seg-border: #1a2c49;

  --ui-viewer-bg: #322;/*画像背景色*/
  --ui-viewer-shadow: 0 20px 60px rgba(7,20,40,.55);
}
.patagonia-logbook .btn:hover{
  background:#13223a;
  border-color:#22406e;
}
/* pacific系テーマ */
.pacific-viewer{
  --bg:#000;/*全背景色*/
  --fg:#fff;/*タイトル色*/
  --muted:#ddd;/*右上文字とページ座標色*/
  --brand:#55f;

  --ui-header-bg: #777;/*headerとfooter色*/
  --ui-header-border: #13223a;
  --ui-footer-border: #13223a;

  --ui-btn-bg: #0f1b2e;/*ボタン色*/
  --ui-btn-border: #1a2c49;
  --ui-btn-fg: #e9f2ff;

  --ui-seg-border: #1a2c49;

  --ui-viewer-bg: #222;/*画像背景色*/
  --ui-viewer-shadow: 0 20px 60px rgba(7,20,40,.55);
}
.pacific-logbook .btn:hover{
  background:#13223a;
  border-color:#22406e;
}


/* ベース */
*{ box-sizing:border-box; }
html,body{
  height:100%; margin:0; overflow:hidden;
  background:var(--bg);
  color:var(--fg);
}
html {
    font-size: 112.5%; /* Default font size */
}

@media (max-width: 600px) {
    html {
        font-size: initial; /* Adjust font size for small screens */
    }
}


/* ヘッダー */
header{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.25rem;
  padding:0rem 0.5rem;
  background:var(--ui-header-bg);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ui-header-border);
}
header .title{
  text-align:center;
 font-weight:bold;
  font-size:1.3rem;
  color:var(--fg);
 /*  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;*/
  line-height: 1.1;
transform: translateY(0.5rem); /* ← 見た目だけ上下に寄せる（重なり） */
/*  z-index:-100;*/               
}
header .navline{
  display:flex; align-items:center; gap:.5rem;
}
header .left{
  display:flex; align-items:center; gap:.5rem;
  flex:1 1 auto; min-width:0;
}
#range{
  flex:1 1 20rem; min-width:6rem;
}
.meta{ white-space:nowrap; color:var(--muted); }
header .notice {
  margin-left: auto;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.1;     /* 行間を詰めて全体の高さを抑える */
  padding-top: 0rem;  /* 上に少し余白をつけて「寄せる」 */
}


/* フッター */
footer{
  position:fixed; bottom:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; padding:0rem 0rem;
  background:var(--ui-header-bg);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--ui-footer-border);
  padding-bottom:calc(0rem + env(safe-area-inset-bottom));
}

/* ボタン */
.btn{
  background:var(--ui-btn-bg);
  border:1px solid var(--ui-btn-border);
  color:var(--ui-btn-fg);
  padding:.1rem .2rem;
  border-radius:.6rem;
  cursor:pointer;
  margin: 0.1rem;
  caret-color: transparent; /* キャレットは常に消す */
}
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.seg{
  display:inline-flex; border-radius:.6rem; overflow:hidden;
  min-width: 7rem;
/*  border:1px solid var(--ui-seg-border);*/
}
.seg .btn{ border:none; border-right:1px solid var(--ui-seg-border); }
.seg .btn:last-child{ border-right:none; }

/* メインビューア */
main{
  position:fixed;
  top:var(--header-h);
  bottom:var(--footer-h);
  left:0; right:0;
  padding:0 2vw;
  box-sizing:border-box;
}
.viewer{
  position:relative;
  width:100%; height:100%;
  margin:0 auto;
  background:var(--ui-viewer-bg);
  border-radius:12px;
  box-shadow:var(--ui-viewer-shadow);
  overflow:auto;
  display:grid; place-items:center;
  cursor:grab;
  scrollbar-gutter:stable;
  touch-action:none;
}
.viewer.dragging{ cursor:grabbing; }

.stage{ display:block; z-index:1; }
.spread{ display:flex; align-items:center; justify-content:center; gap:0; }

/* ページ画像 */
.page{
  display:block; margin:0; padding:0; border:0;
  user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none;
  pointer-events:auto; /* guardを廃止したのでイベント可 */
}