/* Terminal Command Center — design mockup
   基準サイズ: iPad Pro 10.5" 横向き 1112 x 834 CSS px (2224 x 1668 @2x)
   1rem = 16px @ 基準。画面サイズに応じて html の font-size が拡縮する。 */

@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400;
  src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 700;
  src: url("../fonts/jetbrains-mono-latin-700.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0B0F0E;
  --panel: #111916;
  --line: #244A3A;
  --green: #39FF88;
  --cyan: #42C8F5;
  --amber: #FFB547;
  --text: #E8F0EC;
  --dim: #84958C;
  --mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas,
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 4:3 のステージを画面内に収める: 幅 69.5rem × 高さ 52.125rem */
html {
  /* 縦はステータスバー等のセーフエリアを除いた高さに合わせる */
  font-size: min(calc(100vw / 69.5), calc((100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 52.125));
  background: var(--bg);
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 1rem;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

.stage {
  position: absolute;
  top: calc(50% + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2); left: 50%;
  width: 69.5rem; height: 52.125rem;
  margin: -26.0625rem 0 0 -34.75rem;
  padding: 0 1.25rem;
  display: flex; flex-direction: column;
  background:
    linear-gradient(rgba(57,255,136,.025) 1px, transparent 1px) 0 0 / 100% 0.25rem,
    var(--bg);
}

.dim { color: var(--dim); }
.warn { color: var(--amber); }
.ok  { color: var(--green); }
.sep { color: var(--line); margin: 0 .5rem; }
a { color: inherit; text-decoration: none; }

/* ---------- header / footer ---------- */
.hdr, .ftr {
  display: flex; justify-content: space-between; align-items: center;
  flex: none;
  font-size: .875rem; letter-spacing: .06em;
  color: var(--text);
}
.hdr { height: 3rem; border-bottom: 1px solid var(--line); }
.ftr { height: 2.5rem; border-top: 1px solid var(--line); font-size: .8125rem; }
.hdr-l { font-size: 1rem; font-weight: 700; color: var(--green); }
.hdr-l .prompt { margin-right: .4rem; }
.cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.dot.off { background: var(--amber); box-shadow: 0 0 .4rem rgba(255,181,71,.6); }
.dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--green); margin-right: .4rem;
  box-shadow: 0 0 .4rem rgba(57,255,136,.7);
}
.cfg { color: var(--dim); padding: .9rem .25rem; }

/* ---------- layout ---------- */
.main {
  flex: 1; min-height: 0;
  display: flex; gap: 1rem;
  padding: 1rem 0;
}
.col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.col-l { flex: 500; }
.col-r { flex: 540; }

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.5rem 1rem 1rem;
}
/* 四隅のブラケット */
.panel::before, .panel::after {
  content: ""; position: absolute; width: .6rem; height: .6rem;
  border: 2px solid var(--green);
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.label {
  position: absolute; top: .45rem; left: 1rem; right: 1rem;
  font-size: .6875rem; font-weight: 400; letter-spacing: .14em;
  color: var(--dim);
  display: flex; justify-content: space-between;
}
.label::before { content: "┌─ "; color: var(--line); white-space: pre; }
.label { justify-content: flex-start; }
.cal-nav { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.cal-nav button { font-size: .75rem; letter-spacing: .1em; color: var(--green); padding: .75rem .9rem; margin: -.75rem -.15rem; min-width: 2.6rem; line-height: 1; }
.cal-nav button:active { background: rgba(57,255,136,.14); }
.cal-nav button:disabled { color: var(--line); cursor: default; }
.cal-nav button#cal-today:disabled { color: var(--dim); opacity: .6; }
.label .note { margin-left: 1rem; color: var(--amber); letter-spacing: .04em; }
.label .loc { margin-left: auto; color: var(--cyan); letter-spacing: .04em; }

/* ---------- clock ---------- */
.clock-panel { flex: none; padding-top: 1.75rem; }
.clock {
  font-weight: 700; color: var(--green);
  font-size: 7.4rem; line-height: 1; letter-spacing: -.02em;
  text-shadow: 0 0 1.2rem rgba(57,255,136,.28);
  white-space: nowrap;
}
.clock .sec { font-size: 3rem; color: var(--cyan); text-shadow: none; letter-spacing: 0; margin-left: .2rem; font-weight: 400; }
.ampm { font-size: 1.5rem; font-weight: 400; color: var(--amber); margin-left: .6rem; letter-spacing: .06em; }
.date {
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px dashed var(--line);
  font-size: 1.375rem; letter-spacing: .04em;
}
.date b { color: var(--amber); font-weight: 400; }
.date .hol-name { margin-left: .5rem; font-style: normal; font-size: .9375rem; color: var(--amber); border: 1px solid var(--amber); padding: .05rem .5rem; vertical-align: .15rem; }
.world { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line); font-size: .8125rem; letter-spacing: .06em; }
.world .wc { display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; }
.world .k { color: var(--dim); }
.world b { color: var(--cyan); font-weight: 700; font-size: .9375rem; }
.world em { font-style: normal; color: var(--dim); }
.world i { font-style: normal; color: var(--dim); opacity: .7; }
.date .iso { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--dim); letter-spacing: .08em; }

/* ---------- weather ---------- */
.wx-panel { flex: 1; min-height: 0; display: flex; }
.wx { flex: 1; display: flex; gap: .25rem; min-width: 0; }
.wd {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem 0 .25rem;
  border-left: 1px solid rgba(36,74,58,.55);
}
.wd:first-child { border-left: 0; }
.wd { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wd:active { background: rgba(255,181,71,.07); }
.wd.sel { background: rgba(255,181,71,.09); outline: 1px solid var(--amber); }
.wd.today { background: rgba(57,255,136,.06); outline: 1px solid var(--line); }
.wd .dow { font-size: .8125rem; letter-spacing: .08em; color: var(--text); }
.wd .dow.sat { color: var(--cyan); }
.wd .dow.sun { color: var(--amber); }
.wd .dt { font-size: .6875rem; color: var(--dim); margin-top: .1rem; }
.wd svg { width: 2.4rem; height: 2.4rem; margin: .7rem 0 .5rem; }
.wd .hi { font-size: 1.125rem; font-weight: 700; color: var(--amber); }
.wd .lo { font-size: .9375rem; color: var(--cyan); }
.bar { position: relative; flex: 1; width: .3125rem; margin: .5rem 0; background: rgba(36,74,58,.6); border-radius: 2px; }
.bar i { position: absolute; left: 0; right: 0; border-radius: 2px; background: linear-gradient(var(--amber), var(--cyan)); }
.wd .pop { font-size: .8125rem; color: var(--cyan); }
.wd .pop.hi-pop { color: var(--text); font-weight: 700; }
.wd .pop small { display: block; font-size: .5625rem; letter-spacing: .1em; color: var(--dim); text-align: center; }

/* ---------- calendar ---------- */
.cal-panel { flex: none; }
/* 横スクロール: 2か月ぶんが見え、1か月ずつスナップする */
.cals {
  display: flex; gap: 1.1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cals::-webkit-scrollbar { display: none; }
.month { flex: 0 0 calc((100% - 1.1rem) / 2); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.month h3 {
  font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: .06em;
  padding-bottom: .5rem; margin-bottom: .35rem; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
}
.month h3 span { font-size: .6875rem; font-weight: 400; color: var(--dim); }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .15rem; text-align: center; }
.grid .h { font-size: .6875rem; color: var(--dim); padding: .25rem 0; letter-spacing: .04em; }
.grid .d { font-size: 1.1875rem; line-height: 2.6rem; height: 2.6rem; }
.grid .out { color: #3A4741; }
.grid .sat { color: var(--cyan); }
.grid .sun { color: var(--amber); }
.grid .h.sat { color: var(--cyan); opacity: .7; }
.grid .h.sun { color: var(--amber); opacity: .7; }
.grid .out.sat, .grid .out.sun { opacity: .35; }
.grid .hol { color: var(--amber); font-weight: 700; position: relative; }
.grid .hol::after { content: ""; position: absolute; left: 50%; bottom: .2rem; width: .25rem; height: .25rem; margin-left: -.125rem; border-radius: 50%; background: var(--amber); }
.grid .hol.out { opacity: .35; font-weight: 400; }
.grid .today.hol::after { background: var(--bg); }
.grid .today {
  font-weight: 700; color: var(--bg);
  background: var(--green); border-radius: .2rem;
  box-shadow: 0 0 .8rem rgba(57,255,136,.35);
}

/* ---------- hourly forecast ---------- */
.hr-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hr-legend { position: absolute; top: .45rem; right: 1rem; font-size: .6875rem; letter-spacing: .08em; }
.hr-legend .t { color: var(--amber); margin-right: 1rem; }
.hr-legend .r { color: var(--cyan); }
.hr-panel .label .note { margin-left: 1rem; color: var(--amber); letter-spacing: .04em; }
.hr-panel .label .note.dim { color: var(--dim); }
.label .loc { display: none; }
.hr { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hr svg { flex: 1; min-height: 0; width: 100%; display: block; font-family: var(--mono); }
/* 縦線やバーと重なる文字を読みやすくする（パネル色の縁取り） */
.hr svg text { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }

/* ---------- settings mock ---------- */
.set-wrap { flex: 1; min-height: 0; padding: 1rem 0; display: flex; }
.set-panel { flex: 1; padding-top: 2rem; display: flex; flex-direction: column; justify-content: space-around; }
.set-row { display: flex; align-items: center; justify-content: space-between; font-size: 1.125rem; padding: .25rem 0; }
.set-row .k { color: var(--dim); font-size: .875rem; letter-spacing: .08em; }
.seg { display: flex; border: 1px solid var(--line); }
.seg span { padding: .6rem 1.4rem; color: var(--dim); }
.seg span.on { background: var(--green); color: var(--bg); font-weight: 700; }
.field {
  border: 1px solid var(--line); background: var(--bg);
  padding: .65rem 1rem; min-width: 22rem; color: var(--text);
}
.field .ph { color: var(--dim); }
.hint { font-size: .8125rem; color: var(--amber); }
.btn { border: 1px solid var(--green); color: var(--green); padding: .7rem 1.6rem; letter-spacing: .1em; }

/* ---------- empty / error state ---------- */
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .9rem; padding: 0 1rem; }
.empty .big { font-size: 1.125rem; font-weight: 700; color: var(--amber); letter-spacing: .08em; }
.empty .body { font-size: .9375rem; color: var(--dim); line-height: 1.6; }

/* ---------- settings (functional) ---------- */
.set-panel { justify-content: flex-start; gap: 1.1rem; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-appearance: none; border-radius: 0; }
.seg button { padding: .6rem 1.4rem; color: var(--dim); }
.seg button.on { background: var(--green); color: var(--bg); font-weight: 700; }
.set-k { font-size: .875rem; letter-spacing: .08em; margin-bottom: .6rem; }
.search { display: flex; gap: .5rem; }
.search input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.125rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: .65rem 1rem; outline: 0;
  -webkit-user-select: text; user-select: text; -webkit-appearance: none;
}
.search input:focus { border-color: var(--green); }
.search .btn { padding: .65rem 1.4rem; background: none; }
.cur { font-size: .9375rem; margin-top: .6rem; }
.cur b { color: var(--cyan); font-weight: 400; }
.results { display: flex; flex-direction: column; border: 1px solid var(--line); margin-top: .5rem; max-height: 14rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.results:empty { display: none; }
.results button { display: flex; justify-content: space-between; text-align: left; padding: .8rem 1rem; border-bottom: 1px solid rgba(36,74,58,.6); font-size: 1rem; }
.results button:last-child { border-bottom: 0; }
.results button small { color: var(--dim); font-size: .8125rem; }
.results button:active { background: rgba(57,255,136,.12); }
.status { font-size: .8125rem; color: var(--dim); min-height: 1.2rem; margin-top: .5rem; }
.status.err { color: var(--amber); }
.set-grow { flex: none; }