/* ---------------------------------------------------------------
   CONDITION
   配色: Beige Green（#0e4833 / #d3c7b7 / #006741 / #b9a47b）
   設計: デジタル庁デザインシステム（DADS）の基本デザインに準拠
     - 本文と背景のコントラスト比 4.5:1 以上
     - 境界線など非テキスト要素は 3:1 以上
     - 文字サイズは 16px 基準、補助情報でも 14px を下回らない
     - 余白は 8px を基準単位とする
     - フォーカスは黄＋黒の二重リング
   --------------------------------------------------------------- */

:root {
  /* --- 面 --- */
  --bg:          #faf8f4;
  --surface:     #ffffff;
  --surface-alt: #f2ede4;

  /* --- 文字（すべて背景に対し 4.5:1 以上） --- */
  --ink:       #16241d;   /* 15.2 : 1 */
  --ink-soft:  #3e514a;   /*  8.0 : 1 */
  --ink-muted: #5a6a61;   /*  5.4 : 1 */

  /* --- 罫線 --- */
  --line:      #968874;   /*  3.3 : 1（境界・ディバイダー） */
  --line-soft: #e6ded2;   /* グラフの目盛り線のみ。装飾用 */

  /* --- キーカラー --- */
  --primary:      #0e4833;   /*  9.9 : 1 */
  --primary-ink:  #ffffff;   /* 濃緑の上で 10.5 : 1 */
  --primary-soft: #d3c7b7;   /* 濃緑の上で  6.3 : 1 */
  --secondary:    #006741;   /*  6.6 : 1 */
  --beige:        #d3c7b7;
  --tan:          #b9a47b;

  /* --- グラフ（非テキストなので 3:1 以上） --- */
  --c-hr:    #006741;
  --c-deep:  #0e4833;
  --c-light: #3c8c6b;
  --c-rem:   #0f6e77;
  --c-awake: #9a824c;
  --c-bar:   #3c8c6b;
  --c-hrmax: #9a824c;
  --c-hrmin: #0e4833;

  /* --- フォーカス（DADS: 黄＋黒の二重リング。変更しない） --- */
  --focus-inner: #ffe500;
  --focus-outer: #000000;

  /* --- 余白（基準 8px） --- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;

  /* --- 角 --- */
  --r-sm: 4px;
  --r-md: 8px;

  --gut: clamp(16px, 4vw, 40px);

  /* --- 書体 ---
     見出しと数字は Komu New（有料・ラテン専用）。日本語グリフを持たないため、
     日本語は Noto Sans JP の太字が受け持つ。Komu New が未読込のうちは
     同系統の無料グロテスク Archivo Black で代替する。 */
  --font-display: "Komu New", "Archivo Black", "Noto Sans JP",
                  -apple-system, "Hiragino Sans", sans-serif;
  --font-body:    "Noto Sans JP", -apple-system, BlinkMacSystemFont,
                  "Hiragino Sans", "Yu Gothic", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0a1712;
    --surface:     #10231b;
    --surface-alt: #162c23;

    --ink:       #ede7dc;   /* 13.4 : 1 */
    --ink-soft:  #c2bbac;   /*  8.6 : 1 */
    --ink-muted: #9e9a8c;   /*  5.8 : 1 */

    --line:      #66766c;   /*  3.4 : 1 */
    --line-soft: #1e3229;

    --primary:      #57bf90;   /*  7.2 : 1 */
    --primary-ink:  #06231a;
    --primary-soft: #06231a;
    --secondary:    #8fdcb6;
    --beige:        #d3c7b7;
    --tan:          #c9b389;

    --c-hr:    #57bf90;
    --c-deep:  #57bf90;
    --c-light: #8fdcb6;
    --c-rem:   #4fc9d6;
    --c-awake: #c9b389;
    --c-bar:   #57bf90;
    --c-hrmax: #c9b389;
    --c-hrmin: #8fdcb6;
  }
}

* { box-sizing: border-box; }

/* display を指定したクラスが hidden 属性を打ち消さないようにする */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; }

/* --- フォーカス（DADS 準拠の二重リング） ------------------------ */

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--focus-inner);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--focus-outer);
  border-radius: 2px;
}

/* --- ヘッダー --------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s2) var(--gut);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { text-decoration: none; color: inherit; display: block; }

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2em;
}

.brand__sub {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.topbar__right { display: flex; align-items: center; gap: var(--s2); }

.topbar__source {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}

.langswitch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.langswitch__btn {
  background: none;
  border: 0;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
}

.langswitch__btn + .langswitch__btn { border-left: 1px solid var(--line); }
.langswitch__btn:hover { background: var(--surface-alt); }

.langswitch__btn[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-ink);
}

/* --- レイアウト ------------------------------------------------- */

.wrap { padding: 0 var(--gut) var(--s5); }

.state { padding: 96px 0; text-align: center; color: var(--ink-muted); }

/* --- ヒーロー --------------------------------------------------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) 0 var(--s3);
}

.eyebrow {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.22em;
  color: var(--secondary);
  margin-bottom: var(--s1);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.5vw, 45px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.hero__right { text-align: right; }

.hero__meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: var(--s1);
  font-variant-numeric: tabular-nums;
}

.datenav {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.datenav__btn {
  background: none;
  border: 0;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1;
}

.datenav__btn:hover:not(:disabled) { background: var(--surface-alt); color: var(--primary); }
.datenav__btn:disabled { opacity: 0.35; cursor: default; }

.datenav__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 0 var(--s1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- スコアカード ------------------------------------------------ */

.scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (max-width: 760px) { .scores { grid-template-columns: repeat(2, 1fr); } }

.score {
  background: var(--surface);
  padding: var(--s2) var(--s2) var(--s2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 148px;
}

.score--hero { background: var(--primary); color: var(--primary-ink); }
.score--hero .score__label { color: inherit; }
.score--hero .score__qual { color: var(--primary-soft); }

.score__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-soft);
}

.score__value {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 54px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.score__value--empty { font-size: 32px; color: var(--ink-muted); }

.score__unit {
  font-size: 18px;
  font-weight: 400;
  margin-left: 4px;
  color: var(--ink-muted);
}

.score--hero .score__unit { color: var(--primary-soft); }

.score__qual {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* --- 数値グリッド ------------------------------------------------ */

.metrics {
  margin-top: var(--s3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (max-width: 900px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .metrics { grid-template-columns: repeat(2, 1fr); } }

.metric { background: var(--surface); padding: var(--s2); }

.metric__label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.metric__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.metric__value--empty { color: var(--ink-muted); font-weight: 400; }

.metric__sub {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* --- パネル ----------------------------------------------------- */

.panels {
  margin-top: var(--s3);
  display: grid;
  /* グラフの軸ラベルを 14px 以上に保つため SVG は縮小しない。
     1枚あたり 720px 確保できる時だけ 2 列にし、それ以外は 1 列に落とす。 */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 720px), 1fr));
  gap: var(--s3);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s2) var(--s3) var(--s3);
  min-width: 0;
}

.panel--wide { grid-column: 1 / -1; }

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}

.panel__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.panel__note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.panel__body { overflow-x: auto; }

.panel__empty {
  padding: var(--s4) 0;
  text-align: center;
  color: var(--ink-muted);
  font-size: 16px;
}

svg { display: block; width: 100%; height: auto; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s3);
  margin-top: var(--s2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.legend__item { display: inline-flex; align-items: center; gap: var(--s1); }

.legend__swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* --- アクティビティ ---------------------------------------------- */

.acts { display: grid; gap: 1px; background: var(--line-soft); }

.act {
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s3);
  align-items: baseline;
  padding: var(--s1) 0;
}

.act__name { font-weight: 700; font-size: 16px; flex: 1 1 200px; }
.act__stat { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* --- 履歴・カレンダー -------------------------------------------- */

.history {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.history__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin-bottom: var(--s3);
}

.calendar {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cal__month {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  margin-bottom: var(--s1);
  color: var(--ink-soft);
}

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal__dow {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-muted);
  padding-bottom: 2px;
}

.cal__cell {
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink-muted);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.cal__cell--empty { border-color: transparent; }

.cal__cell--has {
  color: var(--ink);
  font-weight: 700;
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) calc(var(--fill) * 1%), var(--surface-alt));
}


.cal__cell--has:hover { outline: 2px solid var(--primary); outline-offset: -2px; }
.cal__cell--current { outline: 3px solid var(--ink); outline-offset: -3px; }

.history__note { margin-top: var(--s3); font-size: 16px; color: var(--ink-muted); }

/* --- フッター --------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  padding: var(--s3) var(--gut) var(--s4);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  display: grid;
  gap: 4px;
  background: var(--surface);
}