.sct-wrap { max-width: 900px; margin: 0 auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }

.sct-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:8px; margin-bottom:16px; position:relative; }
.sct-current { font-size:1.2rem; color:#333; }
.sct-current .sct-infinitive { font-weight:700; font-size:1.6rem; margin-right:.25em; }
.sct-current .sct-meaning { color:#666; margin-right:.25em; }
.sct-stats { font-size:.95rem; color:#444; }
.sct-stats .sct-acc, .sct-stats .sct-streak { font-variant-numeric: tabular-nums; }

.sct-body { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.sct-left, .sct-right { border:1px solid #ddd; padding:12px; border-radius:8px; background:#fff; }
.sct-left h3, .sct-right h3, .sct-footer h3 { margin-top:0; font-size:1rem; color:#444; }
.sct-question { font-size:1.1rem; padding:8px 0; }

.sct-answer { display:flex; gap:4px; align-items: stretch;}
.sct-input { flex:1; padding:10px 12px; font-size:1rem; border:1px solid #ccc; border-radius:6px; }
.sct-check, .sct-next { padding:10px 14px; border:none; border-radius:6px; background:#c8102e; color:#fff; cursor:pointer; }
.sct-next { background:#555; }
.sct-check:hover, .sct-next:hover { opacity:.9; }

.sct-footer { margin-top:16px; border:1px solid #ddd; padding:12px; border-radius:8px; background:#fafafa; min-height:72px; }
.sct-ok { color:#0a7f24; font-weight:700; margin-bottom:4px; }
.sct-ng { color:#c8102e; font-weight:700; margin-bottom:4px; }
.sct-right { margin-bottom:4px; }
.sct-example { color:#333; }

/* PCでは2カラム、スマホは1カラム */
@media (max-width: 720px) {
  .sct-body { grid-template-columns:1fr; }

  /* Stickyヘッダーで被らないようにアンカー余白 */
  .sct-question { scroll-margin-top: calc(10px + env(safe-area-inset-top)); }

  /* iOSフォーカス時ズーム抑止（16px以上） */
  .sct-wrap .sct-input,
  .sct-wrap input,
  .sct-wrap select,
  .sct-wrap textarea {
    font-size:16px;
  }

  /* ページ上部の大ヘッダーを固定表示（任意） */
  .sct-header {
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 10;
    /*background:#fff;*/
  }

  /* スクロールのガタつき軽減 */
  .sct-wrap { overflow-anchor: none; }
}

/* ミニヘッダー：PCは非表示 */
.sct-miniheader { display:none; }

@media (max-width: 720px) {
  .sct-miniheader {
    display:block;
    position:sticky;
    top: env(safe-area-inset-top);
    z-index:5;
    background:#fff;
    padding:6px 8px;
    margin:8px 0 10px;
    border-bottom:1px solid #eee;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  }
  .sct-mini-verb { font-size:.98rem; color:#333; line-height:1.25; }
  .sct-mini-verb .sct-mini-inf { font-weight:700; margin-right:.25em; }
  .sct-mini-verb .sct-mini-mean { color:#666; }
  .sct-mini-person { font-size:.95rem; color:#444; margin-top:2px; line-height:1.2; }

  /* 入力系は常時16px（iOSのズーム回避） */
  .sct-wrap input,
  .sct-wrap select,
  .sct-wrap textarea { font-size:16px; }
}

/* スマホ時：placeholder文字だけ小さめにする */
@media (max-width: 720px) {
  .sct-wrap .sct-input::placeholder {
    font-size: 12px;       /* 少し小さく */
    letter-spacing: -0.5px; /* 文字間を詰める */
    line-height: 1.2;       /* 行の高さも少し圧縮 */
  }
}

/* 結果メッセージの見栄え */
.sct-ok   { background:#e9f7ef; color:#1e7e34; border:1px solid #c9e9d7; padding:.5rem .75rem; border-radius:8px; margin:.5rem 0; }
.sct-ng   { background:#fdecea; color:#b71c1c; border:1px solid #f7c5c0; padding:.5rem .75rem; border-radius:8px; margin:.5rem 0; }
.sct-hint { background:#fff7e6; color:#8a5700; border:1px solid #ffe1a8; padding:.5rem .75rem; border-radius:8px; margin:.5rem 0; }
.sct-right{ margin:.5rem 0; }

.sct-compare { background:#fff; border:1px dashed #ddd; padding:.5rem .75rem; border-radius:8px; margin:.5rem 0; }
.sct-compare code { background:#f8f8f8; padding:.1rem .25rem; border-radius:4px; }

/* アクセント差分のハイライト */
.sct-diff-acc { text-decoration: underline wavy; text-underline-offset: 2px; }
.sct-diff     { background:#ffe4e1; border-radius:3px; padding:0 .1rem; }

/* 例文 */
.sct-example { margin-top: 8px; line-height: 1.5; }
.sct-eg-es { font-weight: 600; }
.sct-eg-ja { color: #555; font-size: .95rem; margin-top: 2px; }

/* アクセント入力パッド（任意） */
.sct-accent-pad { margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.sct-accent-pad button { padding:4px 8px; border:1px solid #ccc; border-radius:6px; background:#fafafa; cursor:pointer; }
.sct-accent-pad button:hover { background:#f0f0f0; }






/*その他のスタイルは追加CSSの最下段に記載*/