/* ====== Base ====== */
html, body {
  margin: 0; padding: 0;
  background: #0b0b14; color: #e8e8f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans JP', sans-serif;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root { --image-max-height: 90dvh; }
.wrap { display: block; min-height: 100svh; }

.pagetitle {
  padding: 10px 12px;
  font-size: 1.05rem; font-weight: 600;
  color: #e8e8f0; background: #0f1020;
  border-bottom: 1px solid #1e2030; text-align: center;
}

/* ====== Tabs ====== */
.tabs-wrap {
  position: sticky; top: 0; z-index: 10;
  display: block; background: #0f1020; border-bottom: 1px solid #1e2030;
}
.tabs-scroll {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  padding: 4px 6px; margin: 0 28px;
}
.tabs {
  display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-start;
  width: max-content; margin: 0 auto;
}
.tabs-arrow {
  position: absolute; top: 0; bottom: 0; width: 28px;
  display: flex; align-items: center; justify-content: center;
  color: #cfd2ff; font-size: 20px; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.tabs-arrow.left { left: 0; background: linear-gradient(90deg, rgba(15,16,32,0.95), rgba(15,16,32,0)); }
.tabs-arrow.right { right: 0; background: linear-gradient(270deg, rgba(15,16,32,0.95), rgba(15,16,32,0)); }
.tabs-arrow.show { opacity: .9; pointer-events: auto; }
.tab {
  white-space: nowrap; cursor: pointer;
  padding: 3px 8px; border-radius: 6px;
  background: #16182a; color: #cfd2ff;
  border: 1px solid #2a2d44; opacity: 0.9;
  font-size: 0.80rem;
  flex: 0 0 auto;
  line-height: 1.25;
}
.tab.active {
  background: #3a3e66; border-color: #7b80b0; opacity: 1;
  box-shadow: 0 0 0 1px rgba(123,128,176,0.6) inset, 0 2px 6px rgba(0,0,0,0.35);
  font-weight: 600; color: #ffffff;
}

/* ====== Stage & Viewer ====== */
.stage { display: block; }
.viewer { position: relative; overflow: hidden; padding: 0; width: 100%; min-height: 0; }
.page {
  position: absolute; inset: 0; display: block;
  text-align: center; padding: 4px;
  opacity: 0; transform: translateX(0);
  transition: transform 220ms ease, opacity 220ms ease;
  pointer-events: none;
}
.page.active { opacity: 1; pointer-events: auto; z-index: 2; }
.page.top { z-index: 3; }
.page.bottom { z-index: 1; }
.page.enter-from-right { transform: translateX(100%); opacity: 1; }
.page.enter-from-left  { transform: translateX(-100%); opacity: 1; }
.page.leave-to-left    { transform: translateX(-100%); opacity: 0; z-index: 1; }
.page.leave-to-right   { transform: translateX(100%); opacity: 0; z-index: 1; }

img.chart {
  display: block;
  margin: 0 auto;
  object-fit: contain;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  max-width: 100%;
  height: auto;
  max-height: var(--image-max-height);
}

@media (orientation: portrait) {
  img.chart {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}
@media (orientation: landscape) {
  img.chart { width: auto; height: auto; }
  .tabs { gap: 6px; padding: 4px 6px; }
  .tab  { padding: 3px 8px; font-size: 0.78rem; }
  .page { padding: 2px; }
}

.hint  { padding: 4px 8px; font-size: 10px; color: #9aa0c3; text-align: right; }
.desc  { padding: 8px 10px; color: #c8cbe4; background: #0f1020; border-top: 1px solid #1e2030; font-size: 0.80rem; text-align: center; }
.datasrc{ text-align: center; font-size: 10px; color: #9aa0c3; padding: 6px 8px; }
.backlink { margin-left: 8px; color: #9aa0c3; }

/* ====== Links ====== */
:root{
  --link: #86b7ff;
  --link-visited: #c1cdff;
  --link-hover: #d9e6ff;
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--link-visited); }
a:hover, a:focus { color: var(--link-hover); text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 480px) {
  .pagetitle { font-size: 1.0rem; padding: 8px 10px; }
}
@media (orientation: landscape) and (max-width: 812px) {
  .desc  { font-size: 0.78rem; }
  .hint  { font-size: 10px; }
  .datasrc { font-size: 10px; }
}

/* ====== Side Tabs (モバイル横向き) ====== */
@media (orientation: landscape) and (max-width: 812px) and (hover: none) and (pointer: coarse) {
  :root { --side-tabs-width: auto; }
  .stage {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'viewer tabs';
    align-items: stretch; column-gap: 8px; padding: 0 0;
  }
  .viewer { grid-area: viewer; margin: 0; }
  .tabs-wrap {
    grid-area: tabs; position: relative; top: auto; right: auto; bottom: auto; left: auto;
    width: auto; min-width: 0; border-left: 1px solid #1e2030; border-bottom: none; height: auto;
  }
  .tabs-scroll { max-height: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 8px; }
  .tabs { flex-direction: column; gap: 8px; margin: 0; justify-content: flex-start; width: auto; }
  .tabs-arrow { display: none; }
}

/* ====== Lightbox ====== */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.96); display: none;
            z-index: 999; align-items: center; justify-content: center; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.lightbox .close { position: absolute; top: 8px; right: 12px; color: #fff; font-size: 28px; background: none; border: 0; cursor: pointer; }

/* ====== Controls ====== */
.ctrl-overlay {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s ease; z-index: 5;
}
.ctrl-overlay.show { opacity: 1; pointer-events: auto; }
.btn-nav {
  position: absolute; top: calc(50% + 44px); transform: translateY(-50%);
  background: rgba(20,20,32,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px; width: 44px; height: 44px; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.btn-nav.left { left: 8px; }
.btn-nav.right { right: 8px; }
.btn-nav[disabled] { opacity: 0.4; cursor: default; }
.btn-fs {
  position: absolute; right: 8px; bottom: 8px; background: rgba(20,20,32,0.6);
  color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  height: 38px; padding: 0 10px; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}