/* CGB英会話homework の見た目（教室のデザインのきまり DESIGN.md にそろえる）
   白が基調、主の色は知多の海の青、黄は「できた」などのうれしいところだけ */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg2: #F7F9FB;
  --ink: #16232F;
  --sub: #64717E;
  --line: #E5EAEF;
  --blue: #1F6FB2;
  --blue-dark: #185A91;
  --blue-soft: #E6F0F8;
  --yellow: #F0A93B;
  --yellow-soft: #FDF1DD;
  --red: #C0503C;
  --red-soft: #F8E5E1;
  --shadow: 0 16px 36px rgba(22, 35, 47, .08);
  --logo: #33298F;
  --fs: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #101820; --bg2: #16212C; --ink: #EAF0F5; --sub: #97A5B2; --line: #26333F;
    --blue: #5AA2DE; --blue-dark: #7DB6E6; --blue-soft: #18324A;
    --yellow-soft: #3A2E17; --red: #E07D6A; --red-soft: #3A211D;
    --shadow: none; --logo: #B9B2F2;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: var(--fs); line-height: 1.85;
  animation: fadein .6s ease both;
}
body.big { --fs: 21px; }
body.fs-small { --fs: 15px; }

/* 文字の大きさ（小・中・大） */
.fs-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); flex: none; }
.fs-seg .fs-lab { font-size: 12px; font-weight: 700; color: var(--sub); padding: 0 6px 0 8px; }
.fs-seg button { width: 36px; height: 36px; border: none; border-radius: 999px; background: none; color: var(--sub); font-weight: 700; cursor: pointer; line-height: 1; }
.fs-seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
@media (max-width: 400px) {
  .fs-seg { padding: 2px; }
  .fs-seg button { width: 32px; height: 32px; }
  .top-in { gap: 8px; }
  .logo-word { font-size: 16px; }
  .logo-mark { height: 24px; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
h1, h2, h3, h4 { line-height: 1.4; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--sub); }
.small { font-size: .82em; }
[hidden] { display: none !important; }

/* 上の帯 */
.top {
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.top-in { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
/* ロゴ：「Chita Global Bridge™」＋結び目マーク ｜ 英会話 Homework */
.brand { display: flex; align-items: center; gap: 4px 14px; min-width: 0; flex-wrap: wrap; text-decoration: none; color: inherit; }
.logo { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.logo-word {
  font-family: "Avenir Next", "Avenir", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--logo); line-height: 1;
}
.logo-word sup { font-size: .45em; font-weight: 600; margin-left: 1px; vertical-align: 1.1em; }
.logo-mark { height: 40px; width: auto; display: block; }
.logo-sep { width: 1px; height: 26px; background: var(--line); }
.logo-sub { white-space: nowrap; line-height: 1.2; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.logo-sub i { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; color: var(--blue); font-size: 1.12em; letter-spacing: .01em; }
.logo-sub small { font-size: .72em; font-weight: 700; color: var(--sub); margin-left: 8px; letter-spacing: 0; }
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .brand { flex-direction: column; align-items: flex-start; gap: 2px; }
  .logo-sep { display: none; }
  .logo-word { font-size: 17px; }
  .logo-mark { height: 28px; }
  .logo-sub { font-size: 13px; }
}
.top-in .grow { flex: 1; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 16px 96px; }
.wrap.narrow { max-width: 720px; }

/* カード */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); }
.card + .card, .stack > * + * { margin-top: 20px; }
@media (max-width: 640px) { .card { padding: 20px 16px; border-radius: 16px; } }
.section-title { font-size: 1.2em; margin: 40px 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-title:first-child { margin-top: 0; }

/* ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 6px 20px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); cursor: pointer; font-weight: 700; font-size: .9em; white-space: nowrap;
  transition: transform .15s, background .15s, border-color .15s; text-decoration: none; color: var(--ink);
}
.btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--blue); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--blue-dark); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost { background: transparent; }
.btn.soft { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.btn.rec { background: var(--red); border-color: var(--red); color: #fff; }
.btn.small { min-height: 36px; padding: 2px 14px; font-size: .8em; }
.btn.link { border: none; background: none; color: var(--sub); text-decoration: underline; padding: 4px 6px; font-weight: 500; }
.btn.link:hover { transform: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--bg2); font-size: 1.3em; cursor: pointer; flex: none; color: var(--ink); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* しるし（青＝できた／黄＝とちゅう／赤＝まだ） */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 999px; font-size: .78em; font-weight: 700; line-height: 1.9; white-space: nowrap; }
.chip.done { background: var(--blue-soft); color: var(--blue); }
.chip.part { background: var(--yellow-soft); color: #9A6410; }
.chip.none { background: var(--red-soft); color: var(--red); }
.chip.gray { background: var(--bg2); color: var(--sub); }
.chip.new { background: var(--yellow); color: #3B2A08; }
@media (prefers-color-scheme: dark) { .chip.part { color: var(--yellow); } }

/* 入力 */
label.f { display: block; margin-bottom: 16px; }
label.f > span { display: block; font-size: .8em; font-weight: 700; color: var(--sub); margin-bottom: 4px; }
input[type=text], input[type=date], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  font-size: max(16px, .9em); line-height: 1.5;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--blue); flex: none; }

/* タブ */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 1080px; margin: 0 auto; padding: 0 16px 8px; }
.tabs button {
  border: none; background: none; padding: 6px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .85em;
  color: var(--sub); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center;
}
.tabs button[aria-selected=true] { background: var(--blue); color: #fff; }
.badge { background: var(--yellow); color: #3B2A08; border-radius: 999px; font-size: .75em; padding: 0 7px; line-height: 1.6; }

/* 表（先生用）：スマホでは横にスクロール */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.t { border-collapse: collapse; width: 100%; font-size: .88em; }
table.t th, table.t td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
table.t th { font-size: .82em; color: var(--sub); font-weight: 700; }
table.t tr:last-child td { border-bottom: none; }

/* 英文と日本語訳 */
.en { font-family: "Helvetica Neue", "Hiragino Sans", Arial, sans-serif; font-weight: 700; font-size: 1.12em; line-height: 1.5; letter-spacing: .01em; }
.ja { color: var(--sub); font-size: .85em; line-height: 1.6; }
.phrase { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.phrase:first-child { border-top: none; padding-top: 4px; }
.phrase .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.say { flex: none; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--blue-soft); color: var(--blue); font-size: 1.3em; cursor: pointer; transition: transform .15s; }
.say:hover { transform: translateY(-2px); }
.say.playing { background: var(--blue); color: #fff; }
.say.mine { width: auto; height: 36px; border-radius: 999px; padding: 0 12px; font-size: .72em; font-weight: 700; }
.who { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8em; margin-top: 6px; }
.who.A { background: var(--blue-soft); color: var(--blue); }
.who.B { background: var(--yellow-soft); color: #9A6410; }
@media (prefers-color-scheme: dark) { .who.B { color: var(--yellow); } }

.lesson-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.lesson-head h2 { font-size: 1.3em; }
.msg { background: var(--bg2); border-radius: 14px; padding: 12px 16px; margin: 14px 0 6px; white-space: pre-wrap; }
.sub-title { font-size: .95em; margin: 26px 0 6px; color: var(--sub); }

.tasks .task { padding: 12px 0; border-top: 1px solid var(--line); }
.tasks .task:first-child { border-top: none; }
.tasks input:checked + span { color: var(--sub); text-decoration: line-through; text-decoration-color: var(--line); }
.task-ex { display: flex; align-items: center; gap: 10px; margin: 6px 0 0 32px; }
.task-ex .en { font-size: 1em; }
.task-exja { margin: 2px 0 0 80px; font-size: .85em; color: var(--sub); }
.task.is-done .task-exja { opacity: .55; }
.task-note { margin: 6px 0 0 32px; font-size: .85em; color: var(--sub); white-space: pre-wrap; }
.task.is-done .task-ex, .task.is-done .task-note { opacity: .55; }
.say.small-say { width: 38px; height: 38px; font-size: 1em; }
.daily { border: 2px solid var(--blue); border-radius: 16px; padding: 12px 16px; margin: 24px 0 4px; }
.daily-t { font-weight: 700; color: var(--blue); font-size: .9em; }

.sample-note { margin: 6px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--bg2); color: var(--sub); font-size: .85em; }

/* 宿題のフレーズ以外で使った言葉・言葉ノート */
.words { margin: 4px 0 8px; }
.word { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.word:first-child { border-top: none; }
.word .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wform { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; background: var(--bg2); border-radius: 14px; padding: 12px; margin-top: 8px; }
.wform input[data-wf="scene"] { grid-column: 1 / -1; }
.wform button { grid-column: 1 / -1; justify-self: end; }
@media (max-width: 560px) { .wform { grid-template-columns: 1fr; } }

/* 表現の見出し（例：put ／ どこかに「置く」「つける」） */
.pgroup { margin: 22px 0 2px; padding: 10px 16px; background: var(--blue-soft); border-radius: 14px; }
.pgroup:first-child { margin-top: 4px; }
.pg-title { font-family: "Helvetica Neue", "Hiragino Sans", Arial, sans-serif; font-weight: 800; font-size: 1.25em; color: var(--blue); line-height: 1.3; }
.pg-note { font-size: .88em; font-weight: 700; }
.pgroup + .phrase { border-top: none; }

/* 見出しの色分け（中身を見分けるための色。ここだけ差し色2色の例外） */
.c-blue { --g: #1F6FB2; --gs: #E6F0F8; }
.c-green { --g: #2F7A6A; --gs: #E0EFEB; }
.c-orange { --g: #B85A2A; --gs: #F8E6DC; }
.c-purple { --g: #6A4FB0; --gs: #ECE7F7; }
.c-pink { --g: #B0426F; --gs: #F8E4EE; }
@media (prefers-color-scheme: dark) {
  .c-blue { --g: #8DBDE8; --gs: #18324A; }
  .c-green { --g: #7CC4B2; --gs: #1F322D; }
  .c-orange { --g: #EBA27A; --gs: #3A271C; }
  .c-purple { --g: #B9A8EE; --gs: #2B2442; }
  .c-pink { --g: #EE9CBF; --gs: #3D2230; }
}
.pgroup[class*="c-"] { background: var(--gs); display: flex; gap: 14px; align-items: center; }
.pgroup[class*="c-"] .pg-title { color: var(--g); }
.pg-icon { flex: none; width: 56px; height: 56px; color: var(--g, var(--blue)); }
.pg-icon svg { width: 100%; height: 100%; display: block; }
.say[class*="c-"] { background: var(--gs); color: var(--g); }
.say[class*="c-"].playing { background: var(--g); color: #fff; }

.progress { height: 10px; background: var(--bg2); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--yellow); border-radius: 999px; transition: width .6s; }

.recbox { background: var(--bg2); border-radius: 16px; padding: 16px; margin-top: 10px; }
.rec-list { list-style: none; padding: 0; margin: 12px 0 0; }
.rec-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.comment { margin-top: 6px; padding: 8px 12px; border-left: 3px solid var(--yellow); background: var(--bg); border-radius: 0 10px 10px 0; white-space: pre-wrap; }
audio { width: 100%; max-width: 360px; height: 40px; }

details.past { border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; margin-top: 12px; }
details.past summary { cursor: pointer; padding: 14px 0; font-weight: 700; list-style-position: inside; }
details.past[open] { padding-bottom: 20px; }

.empty { text-align: center; color: var(--sub); padding: 40px 16px; }
.banner { background: var(--yellow-soft); border-radius: 14px; padding: 10px 16px; font-size: .82em; margin-bottom: 20px; }

/* スクロールで出てくる動き */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } body { animation: none; } }

/* 確認ウィンドウ */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(16, 24, 32, .45); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 720px) { .sheet-wrap { align-items: center; padding: 24px; } }
.sheet { background: var(--bg); width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; box-shadow: var(--shadow); }
.sheet.wide { max-width: 860px; }
@media (min-width: 720px) { .sheet { border-radius: 20px; } }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; padding: 20px 20px 8px; }
.sheet-head h3 { font-size: 1.1em; }
.sheet-head .sub { margin: 2px 0 0; font-size: .8em; color: var(--sub); }
.sheet-body { padding: 8px 20px 16px; overflow-y: auto; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 20px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.err { color: var(--red); font-weight: 700; font-size: .85em; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60;
  background: var(--ink); color: var(--bg); padding: 10px 20px; border-radius: 999px; font-size: .85em; font-weight: 700; transition: .3s; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--red); color: #fff; }