/* Drawing Warmup 改善パッチ (3者レビュー反映)  — 既存CSSのあとに読み込む */

/* 1. 読みやすさ: 薄いグレー・薄い緑の文字を濃くする (WCAG AA 4.5:1 を目安) */
:root{--sub:#5b6761;--accent:#1f6f56}
.card-bottom,footer,.hub-note,.step,.exercise-card p,.card-badge,.daily-banner p,
.daily-progress span,.daily-progress small,.section-help small,.section-help p,
.light-panel p,.result p,.hint p,.panel h2 span,.note,.legend,.canvas-label{color:#566656}
.card-bottom{color:#5f6b5b}
.step-num{color:#6b8068}
.card-bottom>span{color:var(--accent)}
.mode:not(.active){color:#4d5a54}
.mode:hover{background:#eef3ee}
button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}

/* 2. ホーム: 今日やった / おすすめ バッジ */
.exercise-card{position:relative}
.exercise-card.dw-done::after,.exercise-card.dw-reco::after{position:absolute;top:12px;right:14px;font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px}
.exercise-card.dw-done::after{content:"✓ 今日やった";background:var(--accent);color:#fff}
.exercise-card.dw-reco::after{content:"今日のおすすめ";background:#fbe9d6;color:#8a4b17;border:1px solid #e3b98d}
.exercise-card.dw-reco{border-color:#d79056}
.exercise-card.dw-done .card-badge,.exercise-card.dw-reco .card-badge{margin-right:96px}

/* 3. 結果パネルの説明 */
.dw-note{font-size:12px;color:#8a4b17;margin:6px 0 0;line-height:1.6}

/* 4. スマホ: タップしやすく、読みやすく */
@media(max-width:680px){
  button,select,.mode{min-height:44px}
  .board-actions button{font-size:12px;padding:10px 12px}
  .toolbar button{min-height:44px;font-size:13px}
  .note,.legend,.canvas-label,.card-bottom,.step,.hub-note,.stat small,.panel h2 span,footer,
  .daily-progress small,.daily-banner p,.light-panel p,.section-help small,.section-help p,
  .exercise-card p,.card-badge,.eyebrow{font-size:12px}
  .exercise-card p{min-height:0}
  /* 練習メニューを全幅に、5列で */
  .sidebar>.panel:first-child{grid-column:1/-1}
  .modes{grid-template-columns:repeat(5,1fr);gap:5px}
  .mode{font-size:11px;padding:8px 2px}
  .mode svg{width:34px;height:28px;margin-bottom:4px}
  /* 採点結果はキャンバス直下に */
  .sidebar .result{order:-1}
  input[type=range]{height:44px;width:100%}
  .card-top{flex-direction:row;align-items:center}
  .exercise-card.dw-done .card-badge,.exercise-card.dw-reco .card-badge{margin-right:0}
  .exercise-card.dw-done::after,.exercise-card.dw-reco::after{top:auto;bottom:14px;right:14px}
}
@media(max-width:380px){.modes{grid-template-columns:repeat(4,1fr)}}
.shortcut-note{font-size:11px;color:#526654;align-self:center;margin-left:8px}
@media(max-width:680px){.shortcut-note{display:none}}
.color-wheel-control{display:flex;gap:24px;align-items:center;justify-content:center;padding:14px 24px;border-top:1px solid var(--border);background:#fafbf6}
.color-wheel-control[hidden]{display:none}.color-wheel-control canvas{width:280px;height:280px;touch-action:none;cursor:crosshair;max-width:none}.color-wheel-control p{font-size:12px;color:#526654}.color-wheel-control summary{font-size:12px;cursor:pointer}.color-wheel-control .color-controls{display:flex;flex-direction:column;padding:12px 0;border:0}.color-wheel-control #fineColor{min-width:200px}
@media(max-width:680px){.color-wheel-control{flex-direction:column;gap:0;padding:10px}.color-wheel-control canvas{width:260px;height:260px}}
.practice-group{grid-column:1/-1;padding:24px 0 2px}.practice-group:first-child{padding-top:0}.practice-group h2{font-size:20px;margin:0 0 8px}.practice-group p{font-size:13px;color:#526654;margin:0}.menu-group{grid-column:1/-1;font-size:11px;font-weight:700;color:#526654;padding:12px 0 2px}.menu-group:first-child{padding-top:0}
/* Results take precedence over navigation, including the large drawing view. */
.sidebar #result{order:-1;border:2px solid #acc5ab;background:#f6faf1;scroll-margin-top:16px}
.sidebar #result p{font-size:14px;line-height:1.8;color:#324c3d}.sidebar #result .scoreline strong{font-size:54px}
.sidebar #result h2{font-size:14px}.sidebar #result .metric{font-size:13px}.sidebar #result button{font-size:13px}
.sound-toggle{white-space:nowrap}.board-actions .sound-toggle{font-size:11px;padding:8px}
body.drawing-focus.showing-feedback #practiceArea{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:12px}
body.drawing-focus.showing-feedback #practiceArea>.sidebar{display:flex!important;overflow-y:auto;min-height:0;padding:0 0 2px;gap:0}
body.drawing-focus.showing-feedback .sidebar>:not(#result){display:none!important}
body.drawing-focus.showing-feedback #result.show{display:block!important;margin:0}
body.drawing-focus.showing-feedback .focus-score{display:none}
@media(max-width:850px){
 body.drawing-focus.showing-feedback #practiceArea{grid-template-columns:minmax(0,1fr) 270px}
}
@media(max-width:680px){
 .sidebar #result{grid-column:1/-1}.practice-menu-panel{grid-column:1/-1}
 body.drawing-focus.showing-feedback #practiceArea{grid-template-columns:1fr;grid-template-rows:minmax(200px,1fr) minmax(0,38dvh);gap:6px}
 body.drawing-focus.showing-feedback #result.show{width:100%;padding:12px 16px}
 body.drawing-focus.showing-feedback #result .scoreline strong{font-size:36px}
 body.drawing-focus.showing-feedback #result p{font-size:13px;margin-top:4px}
 .board-actions .sound-toggle{font-size:11px;min-height:36px}
}
@media(min-width:681px){body:not(.drawing-focus) .sidebar #result.show{position:sticky;top:16px;z-index:2}}
.perspective-review{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 16px;background:#f0f5e9;border-bottom:1px solid #dce4d4;flex-shrink:0}
.perspective-review[hidden]{display:none}.perspective-review .check{margin:0;font-size:12px}.perspective-view-buttons{display:flex;gap:5px}.perspective-view-buttons button{padding:8px 10px;font-size:12px}.perspective-view-buttons button[aria-pressed=true]{background:#dfead7;border-color:#8ca880;font-weight:700}
.perspective-axis-legend{display:flex;gap:7px;align-items:center;font-size:12px;color:#526654}.perspective-axis-legend i{width:17px;height:2px;background:var(--axis);margin-left:5px}
@media(max-width:680px){.perspective-review{padding:8px;gap:8px}.perspective-review .check{font-size:11px}.perspective-view-buttons button{font-size:11px;min-height:36px}.perspective-axis-legend{font-size:11px}}
.new-practice-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:8px 16px;background:#f0f4e9;border-bottom:1px solid var(--border);flex-shrink:0}.new-practice-controls[hidden]{display:none}.new-practice-controls label{display:flex;gap:8px;align-items:center;font-size:12px;white-space:nowrap}.new-practice-controls select{width:auto;max-width:300px;padding:8px;font-size:12px}.new-practice-controls>span{font-size:12px;color:#526654}.pressure-review{padding:12px 0;border-top:1px solid #dce4d4}.pressure-review b{font-size:12px}.pressure-review canvas{width:100%;height:auto;cursor:default;touch-action:auto;margin-top:8px}.pressure-review small{font-size:11px;color:#526654;line-height:1.7}
@media(max-width:680px){.new-practice-controls{padding:6px 9px;gap:5px}.new-practice-controls select{font-size:11px;max-width:260px}.new-practice-controls>span{font-size:11px}}
@media(max-width:680px){.new-practice-controls label{max-width:100%}.new-practice-controls select{max-width:min(260px,calc(100vw - 100px))}}
/* Current round remains readable in normal and full drawing views. */
.board-head #round{display:flex;flex-direction:column;gap:4px;min-width:174px;letter-spacing:0;flex-shrink:0}
.round-main{display:flex;align-items:baseline;gap:9px}.round-prefix{font-size:12px;color:#526654;font-weight:600}.round-main strong{font-size:36px;line-height:1;font-weight:750;font-variant-numeric:tabular-nums;color:#235c45}.round-state{font-size:10px;font-weight:500;color:#526654}
.round-position{font-size:11px;color:#526654;font-weight:500}.round-track{display:flex;gap:4px;margin-top:2px}.round-track i{width:13px;height:4px;border-radius:3px;background:#e1e7db}.round-track i.done{background:#2d805a}.round-track i.current{background:#b8cda7;outline:1px solid #6c9266;outline-offset:1px}
.round-at-milestone .round-main strong{color:#996020}.round-at-milestone .round-track i.done{background:#b57c36}
.round-milestone{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:13px 18px;background:#fbefd8;border-bottom:1px solid #dfc18b;color:#704d20;flex-shrink:0}.round-milestone[hidden]{display:none}.round-milestone strong{font-size:17px}.round-milestone span{font-size:12px;line-height:1.6}
@media(max-width:680px){.board-head #round{min-width:150px;gap:3px}.round-main strong{font-size:30px}.round-prefix{font-size:11px}.round-state{font-size:10px}.round-position{font-size:11px}.round-track i{width:11px}.round-milestone{padding:9px 12px}.round-milestone strong{font-size:15px}.round-milestone span{font-size:11px}.board-head{flex-wrap:wrap;gap:10px}.board-actions{flex-wrap:wrap;justify-content:flex-end}}
.board-head{flex-wrap:wrap;gap:12px}.board-head .board-actions{margin-left:auto}
.canvas-input-setting{display:flex;align-items:center;gap:6px;font-size:11px;color:#526654}.canvas-input-setting select{width:auto;max-width:205px;padding:8px;font-size:11px;background:#fffefa}
@media(max-width:680px){.canvas-input-setting select{max-width:min(205px,calc(100vw - 95px));font-size:11px;min-height:36px}.canvas-input-setting{font-size:11px}}
/* Switching exercise is a deliberate action, outside the resting-hand area. */
.practice-switcher{font-size:12px;padding:10px 12px;background:#eef3e8;border-color:#c8d5be;white-space:nowrap}
.practice-picker{width:min(680px,calc(100vw - 28px));max-height:85dvh;margin:auto;padding:20px;border:1px solid #b7c8ad;border-radius:16px;background:#fafcf5;color:var(--ink);box-shadow:0 24px 80px #1d392b30}
.practice-picker::backdrop{background:#172f235c}.practice-picker-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.practice-picker-head h2{font-size:20px;margin:0 0 8px}.practice-picker-head p{font-size:12px;color:#526654;margin:0}.practice-picker .modes{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.practice-picker .mode{font-size:12px;min-height:72px}.practice-picker-head button{white-space:nowrap}.practice-picker .menu-group{font-size:13px}
@media(max-width:680px){.practice-picker{padding:14px}.practice-picker .modes{grid-template-columns:repeat(3,minmax(0,1fr))}.practice-picker-head h2{font-size:17px}.practice-switcher{font-size:11px;min-height:36px}}
.taper-settings{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 16px;background:#f7f9f0;border-bottom:1px solid var(--border);flex-shrink:0}.taper-settings[hidden]{display:none}.taper-settings label{display:flex;align-items:center;gap:7px;font-size:12px}.taper-settings select{width:auto;font-size:12px;padding:7px}.taper-settings button{font-size:12px;padding:8px 10px}.taper-settings>span{font-size:11px;color:#526654}
#result.taper-result .scoreline small{display:none}#result.taper-result .scoreline strong{font-size:42px}
@media(max-width:680px){.taper-settings{padding:6px 9px;gap:6px}.taper-settings label,.taper-settings button,.taper-settings select{font-size:11px}.taper-settings>span{font-size:11px}#result.taper-result .scoreline strong{font-size:32px}}
.practice-picker .practice-menu-panel{margin:0 0 14px;padding:14px;background:#f0f4e9}.practice-picker .practice-menu-panel .field{margin-top:12px}.practice-picker .practice-menu-panel .check{margin-top:10px}
.canvas-wrap,.canvas-wrap.observation{background-image:radial-gradient(#adbba7 1px,transparent 1px);background-size:24px 24px}
.board-head .board-actions{gap:9px}.board-head .board-actions button,.board-head .practice-switcher{font-size:13px;font-weight:650;min-height:42px;padding:10px 13px;border:1px solid #9eaf9d;background:#fffefa;color:#244333;box-shadow:0 1px 2px #233b350a}.board-head #focusToggle{border-color:#59886b;background:#e8f1df}.board-head .board-actions button:hover,.board-head .practice-switcher:hover{background:#dcebd3;border-color:#648267}.board-head .pill{font-size:11px;color:#325a40}.board-head .canvas-input-setting{font-size:12px}
.pen-eraser-tools{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.pen-eraser-tools[hidden]{display:none}.pen-eraser-tools button{font-size:12px;min-height:38px;padding:8px 11px}.pen-eraser-tools button[aria-pressed=true]{background:#e1edda;border-color:#6a936f;font-weight:700}.pen-eraser-tools label{font-size:11px;display:flex;align-items:center;gap:4px}.pen-eraser-tools label[hidden]{display:none}.pen-eraser-tools select{font-size:11px;width:60px;padding:6px}.pen-eraser-tools small{font-size:11px;color:#526654;max-width:130px}.tools{flex-wrap:wrap;align-items:center}.using-eraser{cursor:none!important}.eraser-cursor{position:absolute;border:2px solid #38604a;border-radius:50%;background:#fff7;box-shadow:0 0 0 1px #fff;transform:translate(-50%,-50%);pointer-events:none;z-index:4}.eraser-cursor[hidden]{display:none}
@media(max-width:680px){.board-head .board-actions button,.board-head .practice-switcher{font-size:12px;min-height:40px;padding:9px 11px}.board-head .board-actions{gap:6px}.pen-eraser-tools button{min-height:40px}.toolbar{flex-wrap:wrap}.toolbar .tools{flex:1}.pen-eraser-tools small{max-width:150px}}
.board-head{justify-content:flex-start}.board-head .practice-switcher{margin-right:auto}#homeButton{font-size:13px;font-weight:650;padding:10px 13px;min-height:42px;border-color:#9eaf9d;background:#fffefa;color:#244333}
/* Keep current difficulty visible without opening the exercise drawer. */
.practice-top-settings{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid #c4d1bb;background:#f1f6eb}
.practice-top-settings .field{margin:0;display:flex;align-items:center;gap:9px}.practice-top-settings .field-label{margin:0;white-space:nowrap;color:#294e3b;font-weight:700}
.practice-top-settings select{min-height:42px;width:auto;max-width:100%;font-size:14px;color:#204b36;border:1px solid #839f7a;background:#fffefa;font-weight:650}
.wrap-practice{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650}.wrap-practice[hidden]{display:none}
.level-explanation{flex-basis:100%;margin:0;font-size:13px;color:#365b41;line-height:1.5}
.sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:82px}.sound-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sound-toggle[aria-pressed=false]{background:#eef0e9;color:#66715f}
@media(max-width:680px){.practice-top-settings{padding:8px;gap:8px}.practice-top-settings .field{flex:1;flex-wrap:wrap}.practice-top-settings select{font-size:12px}.level-explanation{font-size:12px}}
.new-practice-controls label[for=newPracticeLevel],#focusLineControls label:has(#focusLineLength){display:none}
.practice-top-settings .field[hidden]{display:none}
.practice-top-settings,.taper-settings,.new-practice-controls{flex-shrink:0}