/* UNIT 練習（/school/learn）。色・角の丸みは site.css の値を使う。
   タイ文字は教科書と同じループのある字（Noto Sans Thai Looped）。声調は色と矢印で見せる */
.learn {
  --t-mid: #5f6f7e; --t-low: #2f4fb0; --t-falling: #b02a6b; --t-high: #a8650a; --t-rising: #0d7f7a;
  --th-font: "Noto Sans Thai Looped", "Noto Sans Thai", "Leelawadee UI", "Thonburi", sans-serif;
  --ro-font: "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  padding-bottom: 96px;
}
.learn [lang="th"], .learn .th { font-family: var(--th-font); }
.learn .ro { font-family: var(--ro-font); color: var(--muted); line-height: 1.5; }
.learn .ro span.syl { white-space: nowrap; }
.learn .t-mid { color: var(--t-mid); } .learn .t-low { color: var(--t-low); } .learn .t-falling { color: var(--t-falling); }
.learn .t-high { color: var(--t-high); } .learn .t-rising { color: var(--t-rising); }
.learn .dot { color: var(--line-strong); padding: 0 .15em; }
.learn mark { background: #fff1c2; color: inherit; border-radius: 4px; padding: 0 .1em; }
.learn h1 { margin-bottom: .25rem; }
.learn .crumb { font-size: .85rem; color: var(--muted); margin-top: 1rem; display: flex; gap: 6px; flex-wrap: wrap; }
.learn .unit-head { display: grid; gap: 4px; margin-bottom: 12px; }
.learn .unit-th { font-size: 1.7rem; font-weight: 600; line-height: 1.3; }
.learn .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.learn .seg { max-width: 100%; display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: var(--surface); }
.learn .seg button { white-space: nowrap; border: 0; background: none; font: inherit; padding: 8px 14px; min-height: 40px; cursor: pointer; color: var(--text); }
.learn .seg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.learn .tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 14px 0 14px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
.learn .tabs button { border: 0; background: none; font: inherit; padding: 12px 14px; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; min-height: 48px; }
.learn .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); font-weight: 700; }
.learn .stack { display: grid; gap: 12px; }
.learn .stack > * { min-width: 0; } /* 横に長い表があっても画面からはみ出さない */
.learn .card { margin-bottom: 0; }
.learn .card h2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.learn .draft { font-size: .75rem; font-weight: 500; background: #fff4e0; color: #8a5300; border: 1px solid #f2d39b; border-radius: 999px; padding: 1px 10px; }
.learn .item { border-top: 1px solid var(--line); padding: 12px 0; display: grid; gap: 2px; }
.learn .item:first-of-type { border-top: 0; padding-top: 0; }
.learn .big { font-size: 1.45rem; font-weight: 600; line-height: 1.35; }
.learn .mid { font-size: 1.15rem; font-weight: 600; line-height: 1.45; }
.learn .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.learn .row.spread { justify-content: space-between; }
.learn .icon { border: 0; background: var(--brand-soft); color: var(--brand-dark); border-radius: 999px; min-width: 40px; height: 40px; padding: 0 12px; font: inherit; font-weight: 700; cursor: pointer; }
.learn .icon.rec { background: var(--brand); color: var(--brand-ink); }
.learn .icon:focus-visible, .learn button:focus-visible { outline: 3px solid var(--brand-bright); outline-offset: 2px; }
.learn .check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }
.learn .check input { width: 20px; height: 20px; }
.learn .note { color: var(--muted); font-size: .9rem; }
.learn .legend { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: .8rem; font-family: var(--ro-font); }
.learn .who { font: 700 .8rem/1 var(--ro-font); min-width: 30px; height: 30px; border-radius: 15px; padding: 0 8px; display: inline-grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark); flex: none; }
.learn .who.other { background: #eef1f4; color: var(--text); }
.learn .line { display: flex; gap: 10px; align-items: flex-start; }
.learn .line > div { min-width: 0; flex: 1; }
.learn .sep { text-align: center; color: var(--muted); letter-spacing: .3em; }
.learn .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.learn .choices button { background: var(--surface); border: 2px solid var(--line); border-radius: 12px; padding: 12px 10px; min-height: 64px; font: inherit; cursor: pointer; color: var(--text); }
.learn .choices button.right { border-color: #2e8b57; background: var(--ok-bg); }
.learn .choices button.wrong { border-color: var(--accent); background: var(--err-bg); }
@media (max-width: 420px) { .learn .choices { grid-template-columns: 1fr; } }
.learn .bar { width: 100%; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.learn .bar i { display: block; height: 100%; background: var(--brand); }
.learn .tokens { display: flex; gap: 8px; flex-wrap: wrap; min-height: 52px; padding: 8px; border: 2px dashed var(--line-strong); border-radius: 12px; }
.learn .tokens.pool { border-style: solid; border-color: transparent; padding: 0; }
.learn .token { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 10px; padding: 6px 10px; cursor: pointer; font: inherit; display: grid; text-align: center; color: var(--text); }
.learn .token .ro { font-size: .75rem; }
.learn .token.used { visibility: hidden; }
.learn .result-ok { color: #1e7a3c; font-weight: 700; }
.learn .result-ng { color: var(--accent); font-weight: 700; }
.learn .unit-list { display: grid; gap: 8px; }
.learn .unit-link { display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 12px; align-items: center; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.learn .unit-link:hover { border-color: var(--brand); color: var(--text); }
.learn .unit-link .no { font: 700 1rem/1 var(--ro-font); color: var(--brand); text-align: center; }
.learn .unit-link .t { min-width: 0; }
.learn .unit-link .st { font-size: .8rem; color: var(--muted); text-align: right; white-space: nowrap; }
.learn .unit-link .st.done { color: #1e7a3c; font-weight: 700; }
.learn .group-title { margin: 18px 0 8px; font-size: 1rem; }
.learn .courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.learn .course-card { display: grid; gap: 6px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.learn a.course-card:hover { border-color: var(--brand); color: var(--text); }
.learn .course-card .th { font-size: 1.4rem; font-weight: 600; color: var(--brand-dark); }
.learn .course-card.soon { background: #f7f9fb; color: var(--muted); }
.learn .badge { font-size: .75rem; border-radius: 999px; padding: 1px 10px; background: var(--brand-soft); color: var(--brand-dark); justify-self: start; }
.learn .sheet { position: fixed; inset: auto 0 0 0; background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18); padding: 16px max(16px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px));
  max-height: 92vh; overflow-y: auto; z-index: 60; }
.learn .sheet .in { max-width: 680px; margin: 0 auto; display: grid; gap: 10px; }
.learn canvas { width: 100%; height: 190px; display: block; }
.learn .pager { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .learn * { transition: none !important; } }

/* タイ文字（learn-letters.js）。クラスの色：中＝青・高＝赤茶・低＝緑 */
.learn { --cls-M: #2b5fb4; --cls-H: #b8441a; --cls-L: #18794e; }
.learn .cls-M { color: var(--cls-M); } .learn .cls-H { color: var(--cls-H); } .learn .cls-L { color: var(--cls-L); }
.learn .cls-bg-M { background: #e3ecfa; color: var(--cls-M); } .learn .cls-bg-H { background: #fbe9e1; color: var(--cls-H); } .learn .cls-bg-L { background: #e2f3ea; color: var(--cls-L); }
.learn .letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 10px; }
.learn .letter-tile { position: relative; display: grid; justify-items: center; gap: 0; padding: 8px 4px; background: var(--surface); border: 2px solid currentColor; border-radius: 12px; cursor: pointer; font: inherit; }
.learn .letter-tile .ro { color: var(--muted); font-size: .9rem; }
.learn .letter-tile.done { background: #f3faf6; }
.learn .letter-tile .tick { position: absolute; top: 2px; right: 6px; font-size: .8rem; color: #1e7a3c; font-weight: 700; }
.learn .big-letter { font-size: 2rem; line-height: 1.2; }
.learn .huge-letter { font-size: 4.5rem; line-height: 1.1; font-weight: 600; }
.learn .list-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line);
  padding: 12px 2px; font: inherit; color: var(--text); cursor: pointer; }
.learn .list-link:first-of-type { border-top: 0; }
.learn .list-link > span:last-child { color: var(--muted); font-size: 1.3rem; }
.learn .quiz-big { font-size: 3.6rem; line-height: 1.25; font-weight: 600; }
.learn .result-box { border: 2px solid var(--line-strong); border-radius: 14px; padding: 14px; display: grid; gap: 4px; }
.learn .vowel-sym { font-size: 2rem; min-width: 64px; text-align: center; }
.learn .tone-table th, .learn .tone-table td { text-align: center; padding: 8px 6px; white-space: nowrap; font-weight: 700; }
.learn .tone-table td.note { font-weight: 400; }
.learn .sign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.learn .sign { border: 3px solid #ffffff; outline: 1px solid var(--line); border-radius: 8px; padding: 10px 8px; display: grid; gap: 2px; justify-items: center; cursor: pointer; font: inherit; color: #ffffff; }
.learn .sign-th { font-size: 1.5rem; line-height: 1.3; }
.learn .sign-ja { font-size: .75rem; opacity: .9; }
.learn .sign-0 { background: #b3261e; } .learn .sign-1 { background: #1f5fa8; } .learn .sign-2 { background: #157347; } .learn .sign-3 { background: #ffcc00; color: #1c1c1c; }
.learn .quiz-big.sign { padding: 8px 18px; font-size: 2.4rem; }

/* 単語（learn-vocab.js） */
.learn .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.learn .cat-card { display: grid; gap: 6px; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.learn .cat-card:hover { border-color: var(--brand); }
.learn .cat-card.done { background: #f3faf6; }
.learn button.course-card { width: 100%; }
.learn .icon.star { background: none; color: #b8860b; font-size: 1.2rem; }
.learn .icon.star[aria-pressed="true"] { background: #fff5d6; }
.learn .src a { margin: 0 .1em; }
.learn .ex { border-left: 3px solid var(--line); padding-left: 10px; margin: 4px 0; }
.learn .flash { display: grid; gap: 12px; justify-items: center; width: 100%; min-height: 220px; align-content: center; background: var(--surface);
  border: 2px solid var(--line); border-radius: 18px; padding: 20px 14px; font: inherit; color: var(--text); cursor: pointer; }
.learn .flash hr { width: 60%; border: 0; border-top: 1px solid var(--line); margin: 0; }
.learn .flash-th { font-size: 2.4rem; font-weight: 600; line-height: 1.35; }
.learn .flash-ja { font-size: 1.5rem; font-weight: 700; text-align: center; }