/* Sky Today — 見た目。クラス名はすべて st- で始める（サイト全体のCSSと衝突させない） */
.st-app {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  margin-bottom: 50px;
  min-height: calc(100vh - 100px);
  background: #0d0d0d;
  color: #c8c8c8;
  font-size: 12px;
}

.st-app * {
  box-sizing: border-box;
}

.st-app button,
.st-app input,
.st-app select {
  font-family: inherit;
  font-size: 12px;
}

.st-header {
  padding: 8px 12px;
  background: #0a0a0a;
  border-bottom: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.st-title {
  color: #00ff88;
  font-size: 13px;
  font-weight: bold;
}

.st-sub {
  color: #555;
  font-size: 10px;
}

.st-f1 {
  margin-left: auto;
  color: #666;
  font-size: 11px;
  cursor: pointer;
}

.st-f1:hover {
  color: #00ff88;
}

.st-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  padding: 6px 12px;
  border-bottom: 1px solid #1a1a1a;
}

.st-f {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #888;
  font-size: 11px;
}

.st-f>span {
  margin-bottom: 1px;
}

.st-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.st-sep {
  width: 1px;
  align-self: stretch;
  background: #222;
}

.st-in {
  background: #151515;
  border: 1px solid #333;
  color: #ddd;
  padding: 6px 8px;
  border-radius: 3px;
  width: 120px;
}

.st-in.sm {
  width: 70px;
}

.st-in:focus {
  outline: none;
  border-color: #00ff88;
}

select.st-in {
  width: auto;
  max-width: 260px;
}

.st-btn {
  background: #151515;
  border: 1px solid #333;
  color: #ddd;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
}

.st-btn.sm {
  padding: 6px 9px;
}

.st-btn:hover:not(:disabled) {
  border-color: #00ff88;
  color: #00ff88;
}

.st-btn:disabled {
  opacity: .5;
  cursor: default;
}

.st-err {
  margin: 10px 12px 0;
  color: #ff6666;
  background: #2a1111;
  border: 1px solid #5a2222;
  border-radius: 3px;
  padding: 8px 12px;
  line-height: 1.6;
}

.st-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.st-card {
  background: #131313;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.st-card-l {
  color: #888;
  font-size: 10px;
}

.st-card-v {
  font-size: 20px;
  font-weight: bold;
  color: #eee;
  font-variant-numeric: tabular-nums;
}

.st-card-n {
  color: #666;
  font-size: 10px;
  line-height: 1.3;
}

.st-main {
  display: grid;
  grid-template-columns: minmax(300px, 500px) 1fr;
  gap: 12px;
  align-items: stretch;
}

.st-domewrap {
  background: #101010;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 10px;
  min-width: 0;
}

.st-dome {
  width: 100%;
  display: block;
}

.st-domelabel {
  color: #00ff88;
  font-size: 12px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.st-domectl {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: #aaa;
}

.st-domectl label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.st-domectl input {
  accent-color: #00ff88;
}

.st-domenote {
  color: #666;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 6px;
}

.st-chartwrap {
  background: #101010;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 10px;
}

.st-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.st-canvas {
  width: 100%;
  height: 200px;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.st-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: #777;
  font-size: 11px;
}

.st-lg.sun {
  color: #ffc24a;
}

.st-lg.moon {
  color: #8fb4ff;
}

.st-read {
  margin-top: 8px;
  color: #ddd;
  line-height: 1.8;
  font-size: 13px;
}

.st-read b {
  color: #00ff88;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.st-sun {
  color: #ffc24a;
}

.st-moon {
  color: #8fb4ff;
}

.st-note {
  color: #555;
  font-size: 11px;
  line-height: 1.7;
}

.st-modal-bg {
  position: fixed;
  inset: 0;
  background: #000a;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-modal {
  width: min(720px, 94vw);
  max-height: 86vh;
  background: #111;
  border: 1px solid #00ff8899;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  color: #c8c8c8;
  font-size: 12px;
}

.st-modal-h {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #222;
  align-items: center;
}

.st-modal-h b {
  color: #00ff88;
}

.st-modal-h input {
  flex: 1;
  background: #0d0d0d;
  border: 1px solid #333;
  color: #ddd;
  padding: 5px 8px;
  border-radius: 3px;
}

.st-modal-b {
  overflow: auto;
  padding: 8px 14px 14px;
}

.st-help-sec {
  color: #00ff88;
  margin: 14px 0 4px;
  font-size: 11px;
  letter-spacing: 1px;
}

.st-help-q {
  color: #eee;
  font-weight: bold;
  margin-top: 8px;
}

.st-help-a {
  color: #aaa;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .st-main {
    grid-template-columns: 1fr;
  }

  .st-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .st-yearbox {
    min-height: 170px;
  }

  .st-sep {
    display: none;
  }
}

.st-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.st-tab {
  background: #151515;
  border: 1px solid #333;
  color: #aaa;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
}

.st-tab:hover {
  border-color: #00ff88;
  color: #00ff88;
}

.st-tab.on {
  border-color: #00ff88;
  color: #00ff88;
  background: #00ff8812;
}

.st-tabs .st-domelabel {
  margin: 0 0 0 auto;
}

.st-3d {
  width: 100%;
  position: relative;
  background: #000;
  border: 1px solid #222;
}

.st-3dcanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

.st-3dcanvas:active {
  cursor: grabbing;
}

.st-xr {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.st-xrmsg {
  color: #ff8888;
  font-size: 11px;
}

.st-yearwrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 年のグラフは、余った高さまで伸ばす（左の丸い図の下とそろう） */
.st-yearbox {
  flex: 1;
  min-height: 150px;
  position: relative;
}

.st-yeartitle {
  color: #888;
  font-size: 11px;
  margin-bottom: 6px;
}

.st-yearcanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.st-yearread {
  margin-top: 6px;
  color: #ddd;
  font-size: 12px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.st-yearread b {
  color: #00ff88;
}

.st-yearnote {
  color: #666;
  font-size: 11px;
}

.st-unit {
  font-size: .6em;
  font-weight: normal;
  color: #aaa;
  margin: 0 2px;
}

/* 全画面（3D の空）。時刻と操作ヒントを重ねる */
.st-3dhud {
  display: none;
  position: absolute;
  top: 10px;
  left: 14px;
  color: #00ff88;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px #000;
  pointer-events: none;
}

.st-3dhint {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 14px;
  right: 14px;
  color: #aaa;
  font-size: 12px;
  text-shadow: 0 0 4px #000;
  pointer-events: none;
}

.st-3d:fullscreen {
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.st-3d:fullscreen .st-3dhud,
.st-3d:fullscreen .st-3dhint {
  display: block;
}

.st-3dinfo { position: absolute; left: 10px; bottom: 38px; max-width: 70%; padding: 6px 10px; background: rgba(0,0,0,.65); border: 1px solid #0a6; border-radius: 4px; color: #cfe; font-size: 13px; line-height: 1.5; pointer-events: none; z-index: 3; }
.st-3dinfo b { font-size: 15px; color: #fff; }