/* =========================
   Base
========================= */
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 20px;
  line-height: 1.5;

  /* 背景（ひまわり9号 画像） */
  background-image: url("./img/ひまわり9号.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /*background-size: 120% auto;*/
}

/* 背景の上に薄い暗幕を敷いて文字を読みやすくする */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /*background: rgba(0, 0, 0, 0.35);*/
  pointer-events: none;
  z-index: 0;
}

/* 本文は暗幕より前面に */
.app {
  position: relative;
  z-index: 1;
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

input,
button {
  padding: 10px;
  font-size: 14px;
}

button {
  cursor: pointer;
}

button.primary {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 10px;
  opacity: .4
}

button.primaryclick {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 10px;
}

button.secondary {
  background: #fff;
  color: #111;
  border: 1px solid #bbb;
  border-radius: 10px;
}

button.secondaryclick {
  background: #fff;
  color: #111;
  border: 1px solid #bbb;
  border-radius: 10px;
  background: transparent;
  opacity: .7
}

button.gohome {
  background: #fff;
  color: #f70404;
  border: 1px solid #f70505;
  border-radius: 10px;
}


.card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 14px;
  margin-top: 14px;

  /* カードは透けない程度に白くする（背景でも読めるように） */
  background: rgb(255, 255, 255, 0.85);
  /*backdrop-filter: blur(2px);*/
  backdrop-filter: none;
}

@media (min-width: 601px) {
  h2 {
    color: #0a92ed;
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 30px;
    width: 425px;
    box-shadow: 0 4px 12px rgba(64, 6, 236, 0.15);
  }
}

@media (max-width: 600px) {
  h2 {
    color: #0a92ed;
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 8px;
    border-radius: 6px;
    width: 350px;
    box-shadow: 0 4px 12px rgba(64, 6, 236, 0.15);
    font-size: 23px;
  }
}

/* 右上の赤文字（ホーム画面表示） */
.topRightNotice {
  display: none;
}

/* PC幅のときだけ表示 */
@media (min-width: 601px) {
  .topRightNotice {
    display: block;
    position: absolute;
    top: 73px;
    right: 16px;
    z-index: 3;
    color: #e60000;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 6px;
  }
}

@media (max-width: 600px) {
  .topRightNotice {
    display: block;
    position: absolute;
    top: 59px;
    right: 16px;
    z-index: 3;
    color: #e60000;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 6px;
  }
}

/* =========================
   Common UI
========================= */
.answer {
  color: #0a92ed;
  font-size: 20px;
}

.muted {
  color: #ce06e9;
  font-size: 12px;
}

.question {
  font-size: 16px;
  margin-top: 10px;
}

.choices {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}


.choice {
  text-align: left;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
}

.choice:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.status {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 10px;
  margin-top: 12px;
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #f80101;
  border-radius: 999px;
  font-size: 16px;
  color: #f50505;
}

.pill.ok {
  border-color: #0a7;
  color: #0a7;
}

.pill.ng {
  border-color: #d33;
  color: #d33;
}

.logOk {
  color: #0a7;
  font-weight: 700;
  border-color: #0a7;
}

.logNg {
  color: #d33;
  font-weight: 700;
  border-color: #d33;
  font-size: 14px;
}

.logInfo {
  color: #555;
}

.ok {
  border-color: #0a7;
  color: #0a7;
  font-weight: 700;
}

.ng {
  color: #d33;
  font-weight: 700;
}

@media (min-width: 601px) {
  body.result-mode #btnHomeResult {
    background: #0a92ed;
    border-color: #0a92ed;
    color: #fff;
  }
}

/* PC結果カード内のホームボタン */
.pcResultHomeWrap {
  display: none;
  margin-top: 12px;
  text-align: right;
}

@media (min-width:601px) {
  body.result-mode .pcResultHomeWrap {
    display: block;
  }
}


/* =========================
   Term list + Graph (home/result 共通)
========================= */
.twoCol {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  margin-top: 10px;
}

.termList {
  max-height: 360px;
  overflow: auto;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.termList ul {
  margin: 0;
  padding-left: 18px;
}

.termList li {
  margin: 2px 0;
}

.termBtn {
  border: none;
  background: transparent;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: #111;
}

.termBtn:hover {
  text-decoration: underline;
}

.termBtn.selected {
  font-weight: 700;
}

.graphPanel {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.graphHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.graphSvgWrap {
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  margin-top: 10px;
  padding: 8px;
  background: #fafafa;
  overflow: auto;
  height: 420px;
}

.graphTableWrap {
  margin-top: 10px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
}



table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 8px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

th {
  background: #fbfbfb;
  position: sticky;
  top: 0;
  z-index: 1;
}

.termSearch {
  width: min(420px, 100%);
}

/* =========================
   Endpoint row (home)
========================= */
.endpointRow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.endpointMain {
  flex: 1;
  min-width: 320px;
}

.endpointSide {
  width: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sideTop {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.termCountInline {
  font-size: 20px;
  margin-left: 10px;
  color: #012df1;
  white-space: nowrap;
}

.statusCompact {
  margin-top: 0;
  padding: 6px 8px;
  font-size: 15px;
  max-width: 230px;
}

/* =========================
   Result UI
========================= */
.resultItem {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  background: #fff;
}

.resultItemWrap {
  position: relative;
}

.judgeMark {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.judgeMark.ok {
  color: #0a7;
}

.judgeMark.ng {
  color: #d33;
}

.resultTerm {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #005bac;
  font-weight: 700;
}

.resultTerm:hover {
  text-decoration: underline;
}

.resultTitle {
  margin-top: 6px;
}

.resultBlock {
  margin-top: 10px;
}

.googleLink {
  color: #005bac;
  font-weight: 700;
  text-decoration: none;
}

.googleLink:hover {
  text-decoration: underline;
}

.lookupLine {
  line-height: 1.9;
  margin-bottom: 12px;
}

/* PC：結果右の知識グラフを追従（sticky） */
#resultGraphPanel {
  position: sticky;
  top: 12px;
  align-self: start;
}

/* =========================
   結果フッター（共通ルール）
   - デフォルトは非表示（ホーム/クイズでは出さない）
   - body.result-mode のときだけ表示
========================= */
#resultFooterBar {
  display: none;
}

body.result-mode #resultFooterBar {
  display: flex;
}

/* PC：結果のフッター（通常配置） */
@media (min-width: 601px) {
  body.result-mode #resultFooterBar {
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    display: none !important;
  }

  /* PCでは「▲ 知識グラフを表示」は不要 */
  #btnShowResultGraph,
  #btnShowResultGraph {
    display: none !important;
  }
}

/* =========================
   Responsive (共通)
========================= */
@media (max-width: 600px) {
  .twoCol {
    grid-template-columns: 1fr;
  }

  /* エンドポイント周り */
  .endpointRow {
    flex-direction: column;
    align-items: stretch;
  }

  .endpointMain {
    min-width: 0;
    width: 100%;
  }

  #endpoint {
    width: 100%;
    box-sizing: border-box;
  }

  .endpointSide {
    width: 100%;
    align-items: flex-start;
    margin-top: 10px;
  }

  .sideTop {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pill {
    white-space: nowrap;
    font-size: 14px;
  }

  .status {
    font-size: 12px;
    max-width: 100%;
  }

  /* 結果：2カラム解除（縦） */
  .twoCol.resultTwoCol {
    display: block;
  }
}

/* =========================
   スマホ：結果 上半分 / 知識グラフ 下半分
   ※ここも「body.result-mode 前提」で成立するように整理
========================= */
@media (max-width: 600px) {
  :root {
    --footerH: 140px;
    /* 固定ボタンバーの高さ（目安） */
    --graphH: 50vh;
    /* 知識グラフを表示したときの高さ（下半分） */
  }

  /* 結果画面ではページ全体スクロール禁止（結果欄だけスクロール） */
  body.result-mode {
    overflow: hidden;
    height: 100vh;
  }

  /* ===== 固定ボタンバー（結果画面のときだけ表示） ===== */
  body.result-mode #resultFooterBar {
    position: fixed;
    left: 0px;
    right: 0px;

    /* セーフエリア分だけ上げる */
    bottom: calc(-1px + env(safe-area-inset-bottom));

    z-index: 9999;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;

    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #ddd;
    /*border-radius: 14px;*/
    box-sizing: border-box;
  }

  #btnHomeResult {
    flex: 1;
    min-height: 44px;
  }

  #btnHideResultGraph {
    min-height: 44px;
    white-space: nowrap;
  }

  /* ===== 結果欄：固定ボタンバーの上だけをスクロール領域にする ===== */
  body.result-mode #resultList {
    height: calc(100vh - var(--footerH) - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* ボタンに隠れないよう余白 */
    padding-bottom: calc(var(--footerH) + 30px + env(safe-area-inset-bottom));
  }

  /* 結果リストの最後の問題ブロックだけ余白を追加 */
  #resultList .resultItem:last-child {
    margin-bottom: 120px;
  }


  /* スマホ：グラフが閉じている時は▲だけ、開いている時は▼だけ */
  body.result-mode.result-graph-collapsed #btnShowResultGraph {
    display: inline-flex !important;
  }

  body.result-mode.result-graph-collapsed #btnHideResultGraph {
    display: none !important;
  }

  body.result-mode:not(.result-graph-collapsed) #btnShowResultGraph {
    display: none !important;
  }

  body.result-mode:not(.result-graph-collapsed) #btnHideResultGraph {
    display: inline-flex !important;
  }


  /* ===== 知識グラフ：表示時だけ下半分のオーバーレイ ===== */
  body.result-mode #resultGraphPanel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 200;

    /*height: var(--graphH);*/
    min-height: 160px;
    max-height: 85vh;
    resize: vertical;
    overflow: auto;

    display: flex;
    flex-direction: column;

    background: rgba(255, 255, 255, 0.97);
    border-top: 3px solid #0a92ed;
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.08);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  /* グラフを隠す（collapsed）＝パネル自体を非表示 */
  body.result-mode #resultGraphPanel.is-collapsed {
    display: none !important;
  }

  body.result-mode #resultGraphSvgWrap {
    flex: 0 0 30% !important;
    height: 0 !important;
    overflow: auto;
  }

  body.result-mode #resultGraphTableWrap {
    flex: 1 1 auto;
    max-height: 30%;
    overflow: auto;
  }
}

/* PCでは一切出さない（念のため） */
#resultGraphResizer {
  display: none;
}

/* ===== スマホ時のみ：結果グラフを下固定パネルとして扱い、ドラッグで高さ変更 ===== */
@media (max-width: 600px) {

  body.result-mode #resultGraphPanel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 200;

    /* 初期高さ（JSが上書きする） */
    height: 240px;

    /* 上下リサイズの制約（JS側でも同じ値でclampする） */
    min-height: 160px;
    max-height: 85vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    /* パネル自体は隠す。中身のスクロールは下で設定 */
    background: rgba(255, 255, 255, 0.97);
    border-top: 3px solid #0a92ed;
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.08);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  /* ドラッグバー（これを指で上下に動かす） */
  #resultGraphResizer {
    display: block;
    height: 18px;
    margin: -6px -12px 6px;
    /* paddingを食って上端いっぱいに */
    cursor: ns-resize;
    touch-action: none;
    /* これ超重要：スクロールにならない */
    background: linear-gradient(to bottom,
        transparent,
        rgba(0, 0, 0, .12),
        transparent);
  }

  /* グラフ描画領域は残り高さを使う */
  body.result-mode #resultGraphSvgWrap {
    flex: 0 0 55% !important;
    min-height: 260px;
    overflow: auto;
  }

  /* 表のエリアも必要ならスクロール */
  body.result-mode #resultGraphTableWrap {
    flex: 1 1 auto;
    overflow: 20%;
  }
}

/* PCだけ：表がはみ出したら横スクロールさせる */
@media (min-width: 601px) {

  .graphTableWrap,
  #resultGraphTableWrap {
    overflow-x: auto;
  }

  .graphTableWrap table,
  #resultGraphTableWrap table {
    width: 100%;
    border-collapse: collapse;
  }
}

#resultGraphResizer {
  touch-action: none !important;
}

#resultGraphHandle {
  touch-action: none;
}

.introduction a {
  font-size: 20px;
  /*background: rgba(255, 255, 255, 0.97);*/
}