/* 語尾手帖 V2
 * Palette: 和紙 / 墨 / 抹茶 / 藍染 / 朱印 / 竹
 * Type: Noto Serif JP（語尾）/ Noto Sans JP（操作）/ monospace（索引）
 */
.course-v2--notebook {
  --course-accent: var(--conversation-blue);
  --notebook-paper: var(--washi-50);
  --notebook-ink: var(--conversation-blue);
  --notebook-rule: var(--washi-300);
  background: var(--bg-content);
}

.course-v2--notebook .course-v2-content {
  padding: 14px var(--content-pad) 100px;
}

.course-v2--notebook .course-v2-footer {
  background: linear-gradient(180deg, transparent, var(--washi-50) 25%);
}

.notebook-cover,
.notebook-lesson,
.notebook-complete {
  max-width: var(--content-max);
  margin: 0 auto;
}

.notebook-cover {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 5px;
}

.notebook-cover__eyebrow {
  color: var(--notebook-ink);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .11em;
}

.notebook-cover > h1 {
  margin: 0;
  color: var(--fg-1);
  font-size: var(--fs-27);
  font-weight: var(--fw-semibold);
  line-height: 1.38;
}

.notebook-cover > h1 em {
  position: relative;
  color: var(--notebook-ink);
  font-family: var(--font-serif);
  font-style: normal;
}

.notebook-cover > h1 em::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  background: var(--notebook-ink);
  content: "";
  transform: rotate(-2deg);
}

.notebook-cover > p {
  margin: -5px 0 2px;
  color: var(--fg-3);
  font-size: var(--fs-12);
  line-height: var(--lh-body);
}

.notebook-live {
  position: relative;
  min-height: 390px;
  overflow: visible;
  padding: 21px 46px 20px 28px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to right, transparent 35px, var(--notebook-rule) 35px, var(--notebook-rule) 36px, transparent 36px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--notebook-rule) 36px),
    var(--notebook-paper);
}

.notebook-live__binding {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: -7px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.notebook-live__binding i {
  width: 14px;
  height: 14px;
  border: 4px solid var(--take);
  border-radius: 50%;
  background: var(--bg-content);
}

.notebook-live__number {
  color: var(--fg-4);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: .09em;
}

.notebook-live__sentence {
  display: flex;
  min-height: 103px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 0;
  color: var(--fg-1);
  font-family: var(--font-serif);
  line-height: 1.9;
}

.notebook-live__sentence span {
  font-size: var(--fs-16);
}

.notebook-live__sentence strong {
  align-self: flex-start;
  color: var(--notebook-ink);
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
}

.notebook-live__sentence rt,
.notebook-prompt__text rt {
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-size: 8px;
}

.notebook-live__reading {
  min-height: 176px;
  padding: 12px 0 0;
}

.notebook-live__reading > small {
  display: inline-block;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  color: var(--notebook-ink);
  background: var(--conversation-bubble-right);
  font-size: 9px;
  font-weight: var(--fw-bold);
}

.notebook-live__reading > strong {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-14);
}

.notebook-live__reading > p {
  margin: 4px 0 12px;
  color: var(--fg-3);
  font-size: var(--fs-11);
  line-height: var(--lh-body);
}

.notebook-live__reading > div {
  padding-left: 10px;
  border-left: 2px solid var(--notebook-ink);
}

.notebook-live__reading > div span {
  display: block;
  font-size: var(--fs-11);
}

.notebook-live__reading > div span + span {
  margin-top: 2px;
  color: var(--fg-3);
  font-size: 10px;
}

.notebook-tabs {
  position: absolute;
  top: 45px;
  right: -1px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.notebook-tabs button,
.notebook-tabs > div {
  position: relative;
  display: flex;
  width: 44px;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  padding: 7px 5px;
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--fg-3);
  background: var(--washi-100);
  cursor: pointer;
  transition: width var(--dur) var(--ease-out), color var(--dur), background var(--dur);
}

.notebook-tabs button span,
.notebook-tabs > div span {
  font-family: var(--font-serif);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  writing-mode: vertical-rl;
}

.notebook-tabs button i,
.notebook-tabs > div i {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 8px;
  font-style: normal;
}

.notebook-tabs button.active,
.notebook-tabs > div.active {
  width: 48px;
  border-color: var(--notebook-ink);
  color: var(--fg-inverse);
  background: var(--notebook-ink);
}

.notebook-tabs button.collected:not(.active),
.notebook-tabs > div.collected:not(.active) {
  border-color: var(--matcha-tint);
  color: var(--matcha-shade);
  background: var(--matcha-soft);
}

.notebook-cover__promise {
  display: grid;
  grid-template-columns: 45px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
}

.notebook-cover__promise > span {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid var(--matcha-tint);
  border-radius: 50%;
  color: var(--matcha-shade);
  background: var(--matcha-soft);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
}

.notebook-cover__promise p {
  margin: 0;
  color: var(--fg-3);
  font-size: var(--fs-11);
  line-height: 1.55;
}

.notebook-cover__promise strong {
  color: var(--fg-1);
}

.notebook-lesson {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.notebook-progress {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--washi-300);
}

.notebook-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--notebook-ink);
  transition: width var(--dur-slow) var(--ease-out);
}

.notebook-exercise {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 38px;
}

.notebook-exercise > .notebook-tabs {
  top: 55px;
  right: -17px;
}

.notebook-exercise__meta {
  display: flex;
  align-items: center;
  padding-top: 4px;
}

.notebook-exercise__meta span {
  color: var(--notebook-ink);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
}

.notebook-exercise > h1 {
  margin: -5px 0 2px;
  color: var(--fg-1);
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
}

.notebook-context {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  margin-top: -3px;
  padding: 8px 10px;
  border-left: 2px solid var(--notebook-ink);
  background: var(--conversation-bubble-right);
}

.notebook-context strong {
  color: var(--notebook-ink);
  font-size: 9px;
  white-space: nowrap;
}

.notebook-context span {
  color: var(--fg-3);
  font-size: 9px;
  line-height: 1.5;
}

.notebook-prompt {
  position: relative;
  display: flex;
  min-height: 164px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 22px 17px;
  border-radius: var(--radius-lg);
  text-align: center;
}

.notebook-prompt::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--notebook-ink);
  content: "";
  opacity: .75;
}

.notebook-prompt__pattern {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 9px;
  border-radius: 0 0 var(--radius-sm) 0;
  color: var(--notebook-ink);
  background: var(--conversation-bubble-right);
  font-size: 9px;
  font-weight: var(--fw-bold);
}

.notebook-prompt__text {
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: 2;
}

.notebook-prompt__hidden {
  max-width: 210px;
  color: var(--fg-3);
  font-size: var(--fs-11);
  line-height: var(--lh-body);
}

.notebook-prompt__speak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--notebook-ink);
  background: var(--conversation-bubble-right);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.notebook-prompt--listen {
  min-height: 190px;
}

.notebook-prompt--listen .notebook-prompt__text {
  color: var(--fg-3);
  font-size: var(--fs-12);
}

.notebook-prompt__audio {
  display: flex;
  width: 82px;
  height: 82px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 50%;
  color: var(--fg-inverse);
  background: var(--notebook-ink);
  box-shadow: 0 0 0 8px var(--conversation-bubble-right);
  cursor: pointer;
}

.notebook-prompt__audio span {
  font-size: 9px;
}

.notebook-options {
  display: grid;
  gap: 8px;
}

.notebook-options button {
  display: grid;
  min-height: 47px;
  grid-template-columns: 1fr 24px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  background: var(--bg-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}

.notebook-options button span {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}

.notebook-options button i {
  color: var(--matcha-shade);
  font-style: normal;
  font-weight: var(--fw-bold);
  text-align: center;
}

.notebook-options button.selected {
  border-color: var(--notebook-ink);
  color: var(--notebook-ink);
  background: var(--conversation-bubble-right);
}

.notebook-options button.correct {
  border-color: var(--matcha);
  color: var(--matcha-shade);
  background: var(--success-bg);
}

.notebook-options button.wrong {
  border-color: var(--shuin);
  color: var(--shuin);
  background: var(--danger-bg);
}

.notebook-options button:active:not(:disabled),
.notebook-arrange button:active:not(:disabled) {
  transform: scale(.99);
}

.notebook-arrange {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.notebook-arrange__answer {
  display: flex;
  min-height: 82px;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  padding: 11px;
  border: 1px dashed var(--notebook-ink);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--notebook-rule), var(--notebook-rule)) 10px 43px / calc(100% - 20px) 1px no-repeat,
    var(--washi-100);
}

.notebook-arrange__answer > span {
  align-self: center;
  width: 100%;
  color: var(--fg-4);
  font-size: var(--fs-11);
  text-align: center;
}

.notebook-arrange__answer button,
.notebook-arrange__bank button {
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  background: var(--bg-surface);
  box-shadow: var(--shadow-paper);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.notebook-arrange__answer button {
  border-color: var(--notebook-ink);
  color: var(--notebook-ink);
  background: var(--conversation-bubble-right);
}

.notebook-arrange__bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.notebook-arrange__bank button.used {
  min-width: 42px;
  border-color: transparent;
  background: var(--washi-300);
  box-shadow: none;
  opacity: .42;
}

.notebook-feedback {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 11px;
  border-radius: var(--radius-lg);
}

.notebook-feedback__mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  color: var(--fg-inverse);
  font-family: var(--font-serif);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
}

.notebook-feedback strong {
  display: block;
  font-size: var(--fs-12);
}

.notebook-feedback p {
  margin: 3px 0 0;
  font-size: var(--fs-10, 10px);
  line-height: 1.55;
}

.notebook-feedback--correct {
  color: var(--matcha-shade);
  background: var(--success-bg);
}

.notebook-feedback--correct .notebook-feedback__mark {
  background: var(--matcha);
}

.notebook-feedback--wrong {
  color: var(--shuin-shade);
  background: var(--danger-bg);
}

.notebook-feedback--wrong .notebook-feedback__mark {
  background: var(--shuin);
}

.notebook-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 21px 2px;
  text-align: center;
}

.notebook-complete__book {
  position: relative;
  display: flex;
  width: 146px;
  height: 176px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 19px;
  border-left: 8px solid var(--matcha-shade);
  border-radius: 3px var(--radius-lg) var(--radius-lg) 3px;
  color: var(--fg-inverse);
  background: var(--matcha);
  box-shadow: var(--shadow-paper-md);
  text-align: left;
  transform: rotate(-2deg);
}

.notebook-complete__book > span {
  font-size: 9px;
  letter-spacing: .1em;
}

.notebook-complete__book > strong {
  margin-top: 7px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  line-height: 1.35;
}

.notebook-complete__seal {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--fg-inverse);
  border-radius: 50%;
  color: var(--fg-inverse);
  font-family: var(--font-serif);
  font-size: 11px;
  transform: rotate(8deg);
}

.notebook-complete > small {
  margin-top: 5px;
  color: var(--shuin);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
}

.notebook-complete > h1 {
  margin: 0;
  font-size: var(--fs-22);
  line-height: var(--lh-tight);
}

.notebook-complete > p {
  max-width: 290px;
  margin: 0;
  color: var(--fg-3);
  font-size: var(--fs-11);
  line-height: var(--lh-body);
}

.notebook-complete__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.notebook-complete__score strong {
  color: var(--matcha-shade);
  font-size: var(--fs-27);
}

.notebook-complete__score strong span {
  font-size: var(--fs-14);
}

.notebook-complete__score small {
  color: var(--fg-4);
  font-size: 9px;
}

.notebook-complete__patterns {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 3px 0 7px;
}

.notebook-complete__patterns div {
  padding: 9px 3px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.notebook-complete__patterns div.review {
  border-color: var(--shuin);
  background: var(--danger-bg);
}

.notebook-complete__patterns div.review span,
.notebook-complete__patterns div.review small {
  color: var(--shuin);
}

.notebook-complete__patterns span,
.notebook-complete__patterns small {
  display: block;
}

.notebook-complete__patterns span {
  color: var(--notebook-ink);
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: var(--fw-semibold);
}

.notebook-complete__patterns small {
  margin-top: 3px;
  color: var(--fg-4);
  font-size: 8px;
}

.notebook-complete .zen-btn {
  width: 100%;
}

.course-v2--notebook :focus-visible {
  outline: 3px solid var(--matcha-tint);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .course-v2--notebook *,
  .course-v2--notebook *::before,
  .course-v2--notebook *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}