/* ============================================================
   GROW — 大人向けユニバーサルデザイン層
   style.css の後に読み込み、児童向けの装飾を落ち着いた表現に置き換える。
   目標: WCAG 2.1 AA 相当（コントラスト4.5:1以上 / 基本16px以上 /
         キーボード操作とフォーカス可視 / 色だけに依存しない）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');

:root:not([data-theme="dark"]){
  --bg:#F4F6F9;            /* 画面地。無地の淡いグレー */
  --surface:#FFFFFF;       /* カード面 */
  --surface-2:#EEF1F6;     /* 補助面（表ヘッダ等） */
  --ink:#16202E;           /* 本文。#FFF上で 15.5:1 */
  --ink-2:#465569;         /* 補助文。#FFF上で 7.4:1 */
  --line:#C9D2DE;          /* 罫線 */
  --line-strong:#93A1B4;
  --accent:#1B5FAA;        /* 主要操作。#FFF上で 6.4:1 */
  --accent-ink:#FFFFFF;
  --accent-weak:#E8F0F9;
  --focus:#B45309;         /* フォーカスリング。青背景でも視認できる橙 */
  --ok:#1B6B3A;            /* 完了。#FFF上で 5.6:1 */
  --ok-weak:#E6F2EA;
  --warn:#8A4B00;
  --danger:#A5262C;
  --scratch:#A8480F;       /* コース識別色。白背景で4.5:1以上を確保 */
  --minecraft:#1B6B3A;
  --shadow:0 1px 2px rgba(22,32,46,.10),0 2px 8px rgba(22,32,46,.06);
  --radius:10px;
}
[data-theme="dark"]{
  --bg:#12171F;
  --surface:#1B222D;
  --surface-2:#232C39;
  --ink:#F2F5F9;           /* #1B222D上で 14.6:1 */
  --ink-2:#B9C4D2;         /* #1B222D上で 8.1:1 */
  --line:#3A4553;
  --line-strong:#5A6879;
  --accent:#7FB3F0;        /* 暗面上で 7.2:1 */
  --accent-ink:#0E1620;
  --accent-weak:#243444;
  --focus:#FFB454;
  --ok:#6FD39A;
  --ok-weak:#1E3A2B;
  --warn:#F0B064;
  --danger:#F2969B;
  --scratch:#F0A070;
  --minecraft:#6FD39A;
  --shadow:0 1px 2px rgba(0,0,0,.40),0 2px 10px rgba(0,0,0,.28);
}

/* 旧テーマ変数の再マップ（既存CSSがこれらを参照しているため） */
:root:not([data-theme="dark"]),[data-theme="dark"]{
  --text:var(--ink); --text-light:var(--ink-2);
  --card-bg:var(--surface); --primary:var(--accent);
  --glass-bg:var(--surface); --glass-bd:var(--line); --glass-sh:var(--shadow);
  --chip-surface:var(--surface-2); --field-bg:var(--surface);
  --track:var(--line); --cyan:var(--accent); --vio:var(--accent);
  --mag:var(--danger); --gold:var(--warn);
  --scr:var(--scratch); --mc:var(--minecraft);
}

/* ---- ベース ---- */
body{
  font-family:'BIZ UDPGothic','Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic',sans-serif!important;
  background:var(--bg)!important;
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  letter-spacing:.02em;
  min-height:100vh;
}
h1,h2,h3,h4{ -webkit-text-stroke:0!important; color:var(--ink); line-height:1.4; }

/* 装飾用の背景シーンは使わない */
.app-scene{display:none!important}

/* hidden 属性は display 指定より優先させる
   （.btn の display:inline-flex 等が [hidden] を打ち消してしまうため） */
[hidden]{display:none!important}

/* ---- フォーカス可視（キーボード操作） ---- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- ヘッダー ---- */
.navbar{
  background:var(--surface)!important;
  border-bottom:1px solid var(--line);
  box-shadow:none!important;
  backdrop-filter:none!important;
  padding:12px 24px;
}
.navbar-brand{color:var(--ink)!important;font-weight:700;font-size:20px;text-decoration:none}
.navbar-link{
  color:var(--ink-2)!important;font-weight:700;font-size:15px;
  border-radius:6px;padding:8px 14px;
}
.navbar-link:hover{background:var(--surface-2);color:var(--ink)!important}
/* 現在地は色だけでなく下線でも示す（色覚特性への配慮） */
.navbar-link.active{
  background:var(--accent-weak)!important;color:var(--accent)!important;
  box-shadow:inset 0 -3px 0 var(--accent);
}
.navbar-badge{background:var(--danger);color:#fff;font-weight:700}

/* ---- カード ---- */
.card,.course-card,.course-list-card,.quest-card,.glass{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:none!important;
}

/* ---- 見出し ---- */
.mypage-section-title,.page-header h2{
  color:var(--ink)!important;text-shadow:none!important;
  font-size:22px;font-weight:700;
  padding-bottom:8px;border-bottom:2px solid var(--line);
}
.page-header p,.mypage-section-title + p[style]{
  color:var(--ink-2)!important;text-shadow:none!important;font-size:15px;
}

/* ---- ボタン ---- */
.btn,.admin-btn{
  font-family:inherit;font-size:15px;font-weight:700;
  border-radius:8px;padding:11px 20px;
  min-height:44px;                  /* 操作対象を十分な大きさに */
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
}
.btn-primary,.btn-scratch,.btn-minecraft,.admin-btn-primary{
  background:var(--accent)!important;color:var(--accent-ink)!important;
  border-color:var(--accent)!important;
}
.btn-primary:hover,.btn-scratch:hover,.btn-minecraft:hover,.admin-btn-primary:hover{filter:brightness(1.12)}
.btn-secondary,.admin-btn-secondary{
  background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--line-strong)!important;
}
.btn-secondary:hover,.admin-btn-secondary:hover{background:var(--surface-2)!important}
.btn-success{background:var(--ok)!important;color:#fff!important;border-color:var(--ok)!important}
.btn-danger,.admin-btn-danger{background:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important}

/* ---- フォーム ---- */
/* style.css の .form-group input（background:#fff 固定）に勝つ必要があるため
   セレクタを重ねたうえで色は !important で確定させる */
input,select,textarea,
.form-group input,.form-group select,.form-group textarea,
.admin-form-group input,.admin-form-group select,.admin-form-group textarea{
  font-family:inherit;font-size:16px;                /* 16px未満はスマホで拡大されるため */
  background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--line-strong);border-radius:8px;
  padding:11px 12px;min-height:44px;
}
input::placeholder,textarea::placeholder{color:var(--ink-2);opacity:1}
/* フォーカス時は輪郭を消さない（style.css が outline:none にしているため戻す） */
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:3px solid var(--focus)!important;outline-offset:2px;
}
label{font-weight:700;color:var(--ink);font-size:15px}

/* ---- 進捗バー ---- */
.progress-bar-wrap,.progress-bar{background:var(--surface-2)!important;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress-bar-fill{background:var(--accent)!important}

/* ---- 表 ---- */
table{border-collapse:collapse;width:100%;background:var(--surface)!important}
th{background:var(--surface-2);color:var(--ink);font-weight:700;text-align:left}
th,td{border-bottom:1px solid var(--line);padding:12px;font-size:15px;color:var(--ink)}

/* ---- リンク ---- */
a{color:var(--accent)}
a:hover{text-decoration:underline}

/* ---- 動きを減らす設定を尊重 ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}