/* 国語道場の意匠（2026-10-09）。トップ（/）と LP（/lp/）に合わせて、看板（墨色の帯＋朱の下線＋筆文字）、紙色の面、朱のボタンをそろえる。
   各ページの <style> のあとに読む。body の class で系統を分ける。
     dj-v     … 予習シリーズ・読み方解き方・テスト解説・過去問解説・わたしの記録（iOS 型の共通テンプレート）
     dj-essay … AI採点（記述）
     dj-kanji … 項目別の暗記（出題カードと○×ボタンの見た目は変えない）
     dj-calm  … 保護者ページ・特商法（LP の落ち着いた配色） */
:root{
  --dj-paper:#fff8ec; --dj-surface:#fffdf8; --dj-surface2:#fbf1e1; --dj-line:#ecdcc4;
  --dj-ink:#2b2420; --dj-muted:#5f5349; --dj-deep:#342b25;
  --dj-shu:#c1272d; --dj-shu-press:#9e1f24; --dj-shu-edge:#8a1c21; --dj-accent:#a64f2e;
  --dj-band-ink:#fffaf2; --dj-band-muted:#cbbcad; --dj-band-line:rgba(255,250,242,.28);
  --dj-fude:"Yuji Syuku","Hiragino Mincho ProN","Yu Mincho",serif;
  --dj-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --dj-maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","BIZ UDPGothic","Hiragino Sans",sans-serif;
}
.fude{font-family:var(--dj-fude); font-weight:400;}

/* ---------- 看板 ---------- */
.dj-kb{background:var(--dj-deep); border-bottom:4px solid var(--dj-shu); color:var(--dj-band-ink);
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px; margin:0;}
.dj-kb-in{max-width:880px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:36px;}
.dj-kb-brand{display:flex; align-items:baseline; flex-wrap:wrap; column-gap:10px; min-width:0;
  color:var(--dj-band-ink); text-decoration:none;}
.dj-kb-brand .fude{font-size:22px; letter-spacing:.06em; line-height:1.3; white-space:nowrap;}
.dj-kb-brand small{font-size:13px; color:var(--dj-band-muted); letter-spacing:.06em; font-weight:500; line-height:1.4;}
.dj-kb-r{display:flex; align-items:center; gap:8px; flex:none;}
.dj-kb-home,.dj-kb-r .link{flex:none; color:var(--dj-band-ink); text-decoration:none; font:inherit; font-size:14px; line-height:1.4;
  background:transparent; border:1px solid var(--dj-band-line); border-radius:8px; padding:6px 12px; white-space:nowrap; cursor:pointer;}
.dj-kb-home:hover,.dj-kb-r .link:hover{background:rgba(255,250,242,.08);}
.dj-kb-home:focus-visible,.dj-kb-r .link:focus-visible{outline:2px solid var(--dj-band-ink); outline-offset:2px;}

/* ---------- 見出し（筆文字＋朱の下線） ---------- */
.dj-title{font-family:var(--dj-fude); font-weight:400; color:var(--dj-deep); letter-spacing:.04em;
  font-size:clamp(28px,8vw,34px); line-height:1.3; margin:18px 16px 14px;}
.dj-title::after{content:""; display:block; width:44px; height:4px; border-radius:2px; background:var(--dj-shu); margin-top:8px;}

/* =====================================================================
   dj-v（動画の間・わたしの記録）と dj-essay（AI採点）：iOS 型テンプレートの変数を紙色と朱に置きかえる
   ===================================================================== */
body.dj-v,body.dj-essay{color-scheme:light;
  --bg:var(--dj-paper); --group:var(--dj-surface); --group-2:var(--dj-surface2);
  --label:var(--dj-ink); --label-2:var(--dj-muted); --label-3:#8a7a6c;
  --sep:var(--dj-line); --fill:rgba(166,79,46,.10);
  --tint:var(--dj-shu); --tint-press:var(--dj-shu-press); --ok:#3f8f5a; --ok-tint:rgba(63,143,90,.14); --warn:#b4471c;
  --material:var(--dj-surface); --hairline:var(--dj-line);
  --shadow:0 0 0 1px var(--dj-line), 0 8px 18px -14px rgba(52,43,37,.45);
  --r-card:12px; --r-btn:12px; --r-row:10px;
  --font:var(--dj-maru);
  letter-spacing:.01em;
}
/* 上部のナビ（看板の下の紙色の帯） */
body.dj-v .nav,body.dj-essay .bar{background:var(--dj-surface); border-bottom:1px solid var(--dj-line);
  backdrop-filter:none; -webkit-backdrop-filter:none;}
body.dj-v .nav h1,body.dj-essay .bar h1{font-family:var(--dj-fude); font-weight:400; font-size:19px; letter-spacing:.04em; color:var(--dj-deep);}
body.dj-v .nav .act,body.dj-essay .bar .back{color:var(--dj-shu); font-weight:700;}
/* 大見出し */
body.dj-v .largetitle{font-family:var(--dj-fude); font-weight:400; color:var(--dj-deep); letter-spacing:.04em; line-height:1.3; margin:18px 0 6px;}
body.dj-v .largetitle::after{content:""; display:block; width:44px; height:4px; border-radius:2px; background:var(--dj-shu); margin-top:8px;}
body.dj-v .subtitle{letter-spacing:.01em; line-height:1.8;}
/* ボタン（朱・下に厚み） */
body.dj-v .btn,body.dj-essay .btn{border-radius:12px; font-weight:700; letter-spacing:.04em; box-shadow:0 4px 0 var(--dj-shu-edge);}
body.dj-v .btn:active,body.dj-essay .btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--dj-shu-edge);}
body.dj-v .btn.ghost,body.dj-essay .btn.ghost{background:var(--dj-surface); color:var(--dj-ink); border:1px solid var(--dj-line); box-shadow:0 3px 0 var(--dj-line);}
body.dj-v .btn.ghost.accent,body.dj-essay .btn.ghost.accent{color:var(--dj-shu); border-color:rgba(193,39,45,.35);}
body.dj-v .btn.ghost:active,body.dj-essay .btn.ghost:active{box-shadow:0 1px 0 var(--dj-line);}
body.dj-essay .btn.sel{box-shadow:0 3px 0 var(--dj-shu-edge);}
body.dj-v .btn:disabled,body.dj-essay .btn:disabled{box-shadow:none;}
/* ゲート（よみこみ中／未ログイン） */
body.dj-v .login-card h2{font-family:var(--dj-fude); font-weight:400; font-size:24px; letter-spacing:.04em; color:var(--dj-deep);}
body.dj-v .brand,body.dj-essay .brand{letter-spacing:.12em;}
/* 学年・巻の切替 */
body.dj-v .seg,body.dj-essay .seg{background:var(--fill); border:1px solid var(--dj-line);}
body.dj-v .segIndicator{box-shadow:0 1px 0 var(--dj-line), 0 2px 6px -2px rgba(52,43,37,.3);}
body.dj-v .segBtn.on{font-weight:700; color:var(--dj-deep);}
body.dj-essay .seg button.on{color:var(--dj-deep); box-shadow:0 1px 0 var(--dj-line), 0 2px 6px -2px rgba(52,43,37,.3);}

/* ---------- 動画の一覧：巻物／札のカード ---------- */
body.dj-v .kaicard{position:relative; padding:14px 14px 12px 22px; overflow:hidden;
  background:linear-gradient(180deg,var(--dj-surface),#fffaf1);}
body.dj-v .kaicard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:7px;
  background:linear-gradient(90deg,#4a3d33,var(--dj-deep) 60%,#241d18);}
body.dj-v .kaicard .kt{display:flex; align-items:center; gap:10px; font-family:var(--dj-fude); font-weight:400;
  font-size:19px; letter-spacing:.04em; color:var(--dj-deep);}
body.dj-v .kaicard .kt::before{content:""; flex:none; width:12px; height:12px; border-radius:50%; background:var(--dj-shu);
  box-shadow:0 0 0 3px rgba(193,39,45,.16);}
/* 回の中の札（基本・発展…）。動画のある札は朱、準備中は点線 */
body.dj-v .kpill{border-radius:6px; background:var(--dj-surface2); border:1px dashed #d8c6ad; color:var(--dj-muted); font-weight:700; padding:8px 14px;}
body.dj-v .kpill.done{background:#fff; border:1px solid rgba(193,39,45,.55); color:var(--dj-shu); box-shadow:0 2px 0 rgba(193,39,45,.18);}
body.dj-v .kpill:active{background:var(--fill);}
/* 読み方・解き方：段（小学生向け／中学生向け）と行 */
body.dj-v .audhead{font-family:var(--dj-fude); font-weight:400; font-size:22px; letter-spacing:.04em; color:var(--dj-deep);
  padding-bottom:6px; border-bottom:2px solid var(--dj-line); margin:22px 2px 2px;}
body.dj-v .vrowbtn{background:#fff; border:1px solid var(--dj-line); border-radius:8px; color:var(--dj-ink);}
body.dj-v .vrowbtn .vn{background:var(--dj-surface2); color:var(--dj-muted); border:1px dashed #d8c6ad; font-weight:700;}
body.dj-v .vrowbtn.done .vn{background:var(--dj-shu); color:#fff; border:0;}
body.dj-v .vrowbtn .vt{font-weight:700;}
/* テスト解説・過去問解説：大問ラベルを札に */
body.dj-v .ktop{align-items:center;}
body.dj-v .kno{display:inline-block; border:1px solid var(--dj-shu); color:var(--dj-shu); background:#fff; border-radius:4px;
  padding:0 8px; font-weight:700; letter-spacing:.04em;}
body.dj-v .kwork{font-weight:700; color:var(--dj-deep);}
/* プレーヤー：墨色の額 */
body.dj-v .videowrap{border-radius:10px; box-shadow:0 0 0 5px var(--dj-deep), 0 14px 30px -14px rgba(52,43,37,.55); margin-top:8px;}
body.dj-v .ptitle{font-weight:700; color:var(--dj-deep);}
body.dj-v .waitcard b{font-family:var(--dj-fude); font-weight:400; font-size:19px; letter-spacing:.04em;}

/* ---------- わたしの記録 ---------- */
body.dj-v .sec{display:flex; align-items:center; gap:8px; font-family:var(--dj-fude); font-weight:400; font-size:18px;
  letter-spacing:.04em; color:var(--dj-deep); margin:26px 2px 10px;}
body.dj-v .sec::before{content:""; flex:none; width:5px; height:18px; border-radius:2px; background:var(--dj-shu);}
body.dj-v .stat b{font-weight:700; color:var(--dj-deep);}
body.dj-v .row .tag{background:var(--dj-surface2); border:1px solid var(--dj-line);}

/* ---------- AI採点 ---------- */
body.dj-essay .sec-title{display:flex; align-items:center; gap:8px; font-family:var(--dj-fude); font-weight:400; font-size:17px;
  letter-spacing:.04em; color:var(--dj-deep);}
body.dj-essay .sec-title::before{content:""; flex:none; width:5px; height:16px; border-radius:2px; background:var(--dj-shu);}
body.dj-essay .scorebox .num{color:var(--dj-shu);}
body.dj-essay .waitcard b{font-family:var(--dj-fude); font-weight:400; letter-spacing:.04em;}
body.dj-essay .fbwrap .q,body.dj-essay .fieldbox .fhead b{color:var(--dj-deep);}
/* 看板に「ホームへ」があるので、帯の中の「ホーム」は出さない（もどるは残す） */
body.dj-essay .bar a.back[href="/"]{display:none;}

/* =====================================================================
   dj-kanji（項目別の暗記）
   ===================================================================== */
body.dj-kanji{color-scheme:light;
  --red:var(--dj-shu); --red-d:var(--dj-shu-press); --ink:var(--dj-ink); --sub:var(--dj-muted);
  --bg:var(--dj-paper); --card:var(--dj-surface); --line:var(--dj-line); --ok:#1f8f3a; --ng:#c93400;
  --shadow:0 0 0 1px var(--dj-line), 0 8px 18px -14px rgba(52,43,37,.45);
  --card-2:var(--dj-surface2); --fill:rgba(166,79,46,.10); --material:var(--dj-surface);
  --ok-tint:rgba(31,143,58,.12); --ng-tint:rgba(201,52,0,.12); --red-tint:rgba(193,39,45,.12);
  --font:var(--dj-maru);
}
/* 出題カードの字は元の字体のまま（漢字の形を読みやすく） */
body.dj-kanji .cardwrap,body.dj-kanji .weaklist .k{font-family:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;}
body.dj-kanji .bar{background:var(--dj-surface); border-bottom:1px solid var(--dj-line); backdrop-filter:none; -webkit-backdrop-filter:none;}
body.dj-kanji .bar h1{font-family:var(--dj-fude); font-weight:400; font-size:19px; letter-spacing:.04em; color:var(--dj-deep);}
body.dj-kanji .bar .back{font-weight:700;}
body.dj-kanji .bar a.back[href="/"]{display:none;}
body.dj-kanji .btn{border-radius:12px; font-weight:700; letter-spacing:.04em; box-shadow:0 4px 0 var(--dj-shu-edge);}
body.dj-kanji .btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--dj-shu-edge);}
body.dj-kanji .btn.ghost{background:var(--dj-surface); color:var(--dj-ink); border:1px solid var(--dj-line); box-shadow:0 3px 0 var(--dj-line);}
body.dj-kanji .btn.ghost.accent{color:var(--dj-shu); border-color:rgba(193,39,45,.35);}
body.dj-kanji .btn.ghost:active{box-shadow:0 1px 0 var(--dj-line);}
body.dj-kanji .sec-title{display:flex; align-items:center; gap:8px; font-family:var(--dj-fude); font-weight:400; font-size:17px;
  letter-spacing:.04em; color:var(--dj-deep);}
body.dj-kanji .sec-title::before{content:""; flex:none; width:5px; height:16px; border-radius:2px; background:var(--dj-shu);}
body.dj-kanji .sec-title .muted{font-family:var(--dj-maru); font-size:12px;}
body.dj-kanji .pill b{color:var(--dj-deep);}
body.dj-kanji .seg{border:1px solid var(--dj-line);}
body.dj-kanji .uchip{border-radius:6px;}
body.dj-kanji .result-num{font-family:var(--dj-fude); font-weight:400;}
/* 出題中は看板をしまって、カードとボタンの場所を変えない */
body.dj-kanji:has(#quiz.active) .dj-kb{display:none;}

/* =====================================================================
   dj-calm（保護者ページ・特商法）
   ===================================================================== */

/* 保護者ページ：元の header 指定（下線・余白）を看板用に戻す */
body.dj-parent header.dj-kb{display:block; margin:0 -16px 16px; padding:calc(env(safe-area-inset-top) + 10px) 16px 19px;}
body.dj-parent{--bg:#f3eee5; --card:#fffdf8; --ink:#302b26; --sub:#746b62; --line:#ddd2c4; --shu:#a64f2e; --shu2:#c0673f; --bar:#c9a86a;}
body.dj-parent h1{font-family:var(--dj-fude); font-weight:400; font-size:24px; letter-spacing:.04em; color:#28231f; line-height:1.4;}
body.dj-parent h2{font-family:var(--dj-fude); font-weight:400; font-size:19px; letter-spacing:.04em; color:#28231f; line-height:1.5;}
body.dj-parent .tabs button.on{font-weight:600;}
body.dj-parent .btn:hover{filter:brightness(.94);}
/* 特商法：看板と見出しだけ */
body.dj-doc h1{font-family:var(--dj-fude); font-weight:400; font-size:28px; letter-spacing:.04em; color:#28231f; line-height:1.4;}
body.dj-doc h1::after{content:""; display:block; width:44px; height:4px; border-radius:2px; background:var(--dj-accent); margin-top:8px;}

/* ---------- 375px 幅 ---------- */
@media (max-width:420px){
  .dj-kb-brand .fude{font-size:20px;}
  .dj-kb-brand small{font-size:12px;}
  .dj-kb-home,.dj-kb-r .link{padding:5px 10px; font-size:13px;}
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  body.dj-v .btn,body.dj-essay .btn,body.dj-kanji .btn,.dj-kb-home{transition:none;}
  body.dj-v .btn:active,body.dj-essay .btn:active,body.dj-kanji .btn:active{transform:none;}
  body.dj-v .screen,body.dj-essay .screen{transition:none !important; transform:none !important;}
  body.dj-v .playerBody{transition:none !important; transform:none !important;}
}

/* 看板のぶんだけ、画面いっぱいの高さを減らす（何もない画面でスクロールが出ないように） */
body.dj-v #app{min-height:calc(100dvh - 64px);}
body.dj-kanji #app{min-height:calc(100% - 64px);}
/* 出題中の「やめる」：ブラウザ既定のボタン枠を消して朱の文字に */
body.dj-kanji .qmeta .back{background:none; border:0; color:var(--dj-shu); font-weight:700; font-size:15px; cursor:pointer;}

/* 書体（2026-10-09 Shohei「フォントも全体的に道場っぽく」）。本文は明朝（Shippori Mincho）、見出しは筆文字、ボタンは明朝の太字。項目別の暗記の出題カードは字形の学習のためゴシックのまま */
body.dj-v,body.dj-essay,body.dj-kanji,body.dj-calm,body.dj-parent,body.dj-doc{font-family:var(--dj-mincho);}
body.dj-v button,body.dj-v .btn,body.dj-essay button,body.dj-essay .btn,body.dj-parent button,body.dj-parent .btn,body.dj-calm button,body.dj-calm .btn{font-family:var(--dj-mincho); font-weight:700; letter-spacing:.04em;}
body.dj-v input,body.dj-v select,body.dj-v textarea,body.dj-essay input,body.dj-essay textarea,body.dj-parent input,body.dj-parent select,body.dj-parent textarea{font-family:var(--dj-mincho);}

/* =====================================================================
   道場の改装（2026-10-11 Shohei「デザインをもう少し道場らしく」。変更前は _archive/20261011-design/）
   板の間の床・畳縁の帯・木札・掛け軸・帯の色。外部画像は使わず CSS のグラデーションだけで描く。
   文字は背景の一番濃いところ（床 #ebdbbf・木札 #ecd4a6）で 4.5:1 以上。
   ===================================================================== */
:root{
  --dj-wood:#f3e6cf; --dj-wood2:#efe0c6; --dj-wood-ink:#3a2a1c; --dj-wood-edge:#b8915c; --dj-wood-shadow:#a07a48;
  --dj-heri:#26304a; --dj-heri2:#313d5c; --dj-heri-gold:#c9a86a;
  --dj-tatami:#ebe8c6; --dj-tatami2:#e3dfb6;
  /* 板の間：96px 幅の板を2色で交互に、板目の筋と継ぎ目 */
  --dj-floor:
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 94px,rgba(150,110,60,.22) 94px 96px),
    repeating-linear-gradient(90deg,rgba(150,105,55,.05) 0 2px,rgba(0,0,0,0) 2px 9px,rgba(150,105,55,.07) 9px 10px,rgba(0,0,0,0) 10px 23px,rgba(150,105,55,.04) 23px 26px,rgba(0,0,0,0) 26px 41px),
    linear-gradient(90deg,var(--dj-wood) 0 50%,var(--dj-wood2) 50% 100%) 0 0/192px 100%,
    var(--dj-wood);
  /* 木札：明るい木肌に板目 */
  --dj-tag:
    repeating-linear-gradient(92deg,rgba(150,100,50,.07) 0 2px,rgba(0,0,0,0) 2px 7px,rgba(150,100,50,.05) 7px 8px,rgba(0,0,0,0) 8px 15px),
    linear-gradient(180deg,#f6e6c4,#ecd4a6);
  /* 濃い木（看板）の板目 */
  --dj-grain-dk:repeating-linear-gradient(178deg,rgba(255,236,200,.035) 0 2px,rgba(0,0,0,0) 2px 7px,rgba(0,0,0,.06) 7px 8px,rgba(0,0,0,0) 8px 15px);
  /* 畳縁：紺地に金の細線と点の柄（高さ 9px の帯として敷く） */
  --dj-heri-dots:repeating-linear-gradient(90deg,rgba(201,168,106,.6) 0 4px,rgba(0,0,0,0) 4px 10px);
  --dj-heri-band:linear-gradient(0deg,var(--dj-heri-gold) 0 1px,var(--dj-heri) 1px 8px,var(--dj-heri-gold) 8px 9px);
}

/* ---------- 看板：墨色の板に、下は畳縁の帯 ---------- */
.dj-kb{border-bottom:0; padding-bottom:19px;
  background:var(--dj-heri-dots) left 0 bottom 3px/100% 3px no-repeat, var(--dj-heri-band) left bottom/100% 9px no-repeat, var(--dj-grain-dk), var(--dj-deep);}
body.dj-parent header.dj-kb{border-bottom:0;}

/* ---------- 板の間の床（動画の間・AI採点・漢字・保護者・教材） ---------- */
body.dj-v,body.dj-essay,body.dj-kanji,body.dj-calm{background:var(--dj-floor);}

/* ---------- 木札（ラベル）：吊るし穴つきの小さな板 ---------- */
.dj-fuda{display:inline-flex; align-items:center; gap:8px; font-family:var(--dj-fude); font-weight:400; font-size:16px; letter-spacing:.08em; line-height:1.4;
  color:var(--dj-wood-ink); background:var(--dj-tag); border:1px solid var(--dj-wood-edge); border-radius:4px; padding:3px 14px 3px 10px;
  box-shadow:0 2px 0 var(--dj-wood-shadow), inset 0 1px 0 rgba(255,255,255,.55);}
.dj-fuda::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:#5b3a22; box-shadow:inset 0 1px 1px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.6);}

/* ---------- 掛け軸：見出し（.dj-jiku）と本紙（.dj-scroll） ---------- */
.dj-jiku,.dj-scroll{position:relative; background:#fffef9; border-left:1px solid #e6d8bf; border-right:1px solid #e6d8bf;
  box-shadow:inset 0 0 0 4px #fffef9, inset 0 0 0 5px #d8b979, 0 8px 14px -10px rgba(60,40,20,.55);}
.dj-jiku::before,.dj-jiku::after,.dj-scroll::before,.dj-scroll::after{content:""; position:absolute; left:-8px; right:-8px; height:8px; border-radius:4px;
  background:linear-gradient(180deg,#7a5235,#3e281a); box-shadow:0 1px 2px rgba(0,0,0,.25);}
.dj-jiku::before,.dj-scroll::before{top:-6px;}
.dj-jiku::after,.dj-scroll::after{bottom:-6px;}
.dj-jiku{display:inline-block; margin:24px 10px 14px; padding:12px 22px 10px; font-family:var(--dj-fude); font-weight:400; letter-spacing:.08em; line-height:1.35; color:var(--dj-deep);}
.dj-scroll{display:block; margin:16px 10px 12px; padding:16px 18px 14px;}

/* ---------- 帯（ランク）：白・黄・緑・茶・黒。ステッチの線を2本 ---------- */
.belt.b1,.belts .b1{background:#f7f3ea; color:#4a4036; box-shadow:inset 0 0 0 1px #cfc3b0;}
.belt.b2,.belts .b2{background:#f0c93a; color:#3d2e00;}
.belt.b3,.belts .b3{background:#2f7d4f; color:#fff;}
.belt.b4,.belts .b4{background:#6e4223; color:#fff;}
.belt.b5,.belts .b5{background:#1f1b18; color:#fff;}
.belt::after,.belts span::before{top:3px; bottom:3px; height:auto; background:none; border-top:1px dashed rgba(0,0,0,.2); border-bottom:1px dashed rgba(0,0,0,.2);}
.belt.b3::after,.belt.b4::after,.belt.b5::after,.belts .b3::before,.belts .b4::before,.belts .b5::before{border-color:rgba(255,255,255,.32);}

/* ---------- 動画の一覧：回のカードを木札に ---------- */
body.dj-v .kaicard{background:linear-gradient(180deg,#fffdf8,#fbf3e4); border:1px solid #e3cfac;}
body.dj-v .kaicard::before{width:8px; background:var(--dj-tag); border-right:1px solid var(--dj-wood-edge);}

/* ---------- 教材と復習（/kyozai/）：生徒が使う面。木札の見出しと札の切替 ---------- */
body.dj-kz{--sub:#62574d; --line:#e0cfb2;}
/* 看板は画面の端から端まで（body の左右 16px の余白を打ち消す） */
body.dj-kz>header.dj-kb{margin:0 -16px;}
body.dj-kz h1.dj-jiku{font-size:24px; margin:26px 10px 12px;}
body.dj-kz .card{border-color:#dcc7a3; border-radius:12px; box-shadow:0 3px 0 #dcc6a0, 0 12px 22px -16px rgba(60,40,20,.45);}
body.dj-kz h2{font-family:var(--dj-fude); font-weight:400; font-size:19px; letter-spacing:.06em; color:var(--dj-deep);
  border-left:0; padding-left:20px; align-items:center;
  background:radial-gradient(circle at 5px 5px,#5b3a22 0 1.6px,rgba(0,0,0,0) 2.2px) left center/10px 22px no-repeat, linear-gradient(180deg,#efd9ae,#d9b980) left center/10px 22px no-repeat;}
body.dj-kz h2 small{font-family:var(--dj-mincho);}
body.dj-kz .nav a{background:var(--dj-tag); border:1px solid var(--dj-wood-edge); border-radius:4px; box-shadow:0 2px 0 var(--dj-wood-shadow);
  color:var(--dj-wood-ink); font-family:var(--dj-fude); font-size:15px; letter-spacing:.06em; padding:3px 12px;}
body.dj-kz .btn{border-radius:10px; font-weight:700; box-shadow:0 3px 0 var(--dj-shu-edge);}
body.dj-kz .btn.ok{box-shadow:0 3px 0 #1f5a40;}
body.dj-kz .btn.ghost{box-shadow:0 3px 0 var(--line);}
body.dj-kz .btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--dj-shu-edge);}
body.dj-kz .btn.ok:active{box-shadow:0 1px 0 #1f5a40;} body.dj-kz .btn.ghost:active{box-shadow:0 1px 0 var(--line);}
/* 暗記カードは木の札。めくると答え（緑）を出す */
body.dj-kz .flash{background:var(--dj-tag); border:1px solid var(--dj-wood-edge); border-radius:10px; box-shadow:0 4px 0 var(--dj-wood-shadow), 0 14px 22px -14px rgba(60,40,20,.55);}
body.dj-kz .flash .f{font-family:var(--dj-fude); font-weight:400; font-size:26px; color:var(--dj-wood-ink); letter-spacing:.04em;}
body.dj-kz .flash .b{color:#25603f;}
body.dj-kz .flash .h{color:#5f5349;}
/* 箱（1・2・4・8・16日）は木箱 */
body.dj-kz .boxes div{background:linear-gradient(180deg,#f6ead2,#efdcb8); border:1px solid #d6bb8c; color:#5f5349;}
body.dj-kz .boxes b{color:var(--dj-wood-ink);}
body.dj-kz .tag{border-radius:4px;}

/* ---------- 保護者ページ：落ち着いた配色のまま、床と木の縁だけ ---------- */
body.dj-parent{--sub:#62574d;}
body.dj-parent .card{border-color:#dccbad; box-shadow:0 2px 0 #e2d2b4, 0 10px 20px -16px rgba(60,40,20,.4);}
/* お子様の名前のカードは名札（木札） */
body.dj-parent #mainView>.card:first-child{background:var(--dj-tag); border-color:var(--dj-wood-edge); box-shadow:0 3px 0 var(--dj-wood-shadow), 0 10px 20px -16px rgba(60,40,20,.5);}
body.dj-parent .tabs{border-bottom:2px solid #d8c6a6;}
body.dj-parent .tabs button{color:#5f5349;}
body.dj-parent .tabs button.on{color:var(--dj-wood-ink); border-bottom-color:var(--dj-accent);}
body.dj-parent footer{color:#5f5349;}

@media (prefers-reduced-motion:reduce){
  body.dj-kz .btn:active{transform:none;}
}