/* =========================================================================
 * kanji-writing.css — 漢字手書きモード（なぞりがき / かいてあてる）
 * タップ領域44px以上・focus-visible・reduced-motionは既存包括ルールでカバー
 * ========================================================================= */

.kw-prompt {
  font-size: 17px; font-weight: 800; text-align: center;
  line-height: 1.7; margin: 4px 0 2px;
  color: var(--color-text-primary, #1A2238);
}
.kw-prompt b { font-size: 24px; }
.kw-read { font-size: 13px; color: var(--color-text-secondary, #5B6474); font-weight: 700; display: inline-block; white-space: nowrap; }
.kw-hint {
  font-size: 13.5px; font-weight: 700; text-align: center;
  color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: 10px; padding: 8px 10px; margin: 6px auto 0; max-width: 360px;
}

.kw-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.kw-canvas-box {
  position: relative;
  width: min(340px, calc(100vw - 56px));
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 2px solid #CBD5E1;
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 2px 10px rgba(26, 34, 56, .08));
  overflow: hidden;
}
.kw-canvas-box canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;           /* 指書き中のスクロールを止める */
  cursor: crosshair;
}
.kw-mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 96px; pointer-events: none;
  opacity: 0; transform: scale(.4);
}
.kw-mark.show { animation: kwMarkPop .5s var(--ease-smooth) forwards; }
@keyframes kwMarkPop { to { opacity: .92; transform: scale(1); } }

.kw-toolbar { display: flex; gap: 8px; width: min(340px, calc(100vw - 56px)); }
.kw-btn {
  flex: 1; min-height: 44px; padding: 10px 8px;
  border: 1px solid #E7E1D2; border-radius: 12px;
  background: #fff; font-size: 13.5px; font-weight: 800;
  color: var(--color-text-secondary, #5B6474); cursor: pointer;
}
.kw-btn:active { transform: scale(.97); }
.kw-btn:focus-visible { outline: 3px solid var(--color-primary, #4F5BD5); outline-offset: 2px; }

.kw-submit {
  width: min(340px, calc(100vw - 56px));
  min-height: 56px; padding: 14px;
  border: none; border-radius: 14px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff; font-size: 18px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 0 #15803D;
}
.kw-submit:active { transform: translateY(2px); box-shadow: 0 2px 0 #15803D; }
.kw-submit:focus-visible { outline: 3px solid var(--color-primary, #4F5BD5); outline-offset: 2px; }
.kw-submit.hidden { display: none; }

.kw-after { display: flex; gap: 8px; width: min(340px, calc(100vw - 56px)); }
.kw-after.hidden { display: none; }
.kw-after .kw-btn { min-height: 52px; }
.kw-after .kw-btn.hidden { display: none; }
.kw-next {
  flex: 1.4; min-height: 52px;
  border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary, #4F5BD5), #7C3AED);
  color: #fff; font-size: 16px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 0 #3B46B0;
}
.kw-next:active { transform: translateY(2px); box-shadow: 0 2px 0 #3B46B0; }
.kw-next:focus-visible { outline: 3px solid #1A2238; outline-offset: 2px; }