@charset "UTF-8";
/* =============================================================================
   クチリピ web52 — app.kuchiripi.com の見た目
   2026-09-25 / desktop54
   -----------------------------------------------------------------------------
   公開中の css/app-v7.css・rin-coach-ui.css・rin-onboarding.css の後ろに読ませて、
   上から塗り替える。公開中のファイルは1バイトも書き換えない。
   このホスト（app.kuchiripi.com）だけに配られる。eigonorin.com は無関係。

   考え方（LP = 承認済みの正本 をそのまま web アプリに移す）:
     - 囲いの線を引かない。段は「持ち上がり（墨を薄く流した影）」で出す
     - 角丸は4種類だけ（chip 12 / control 16 / card 22 / hero 28）。押せるものほど丸い
     - 書体は1系統。LP と同じ太い日本語ゴシック。明朝は全廃。数字だけ欧文
     - 色は LP の4色と、そこから作った段（plane1-3）から増やさない
     - 面で塗り分ける（LP の plane）。墨のプレーンは PC の縦メニュー1か所だけに使う

   PC（1000px 以上）の組み:
     縦メニュー（墨）＋ 広い盤面。ホームは「今日の札束」が主役で、
     次にやる1枚だけが山から引き出されている。脇の列に段階・復習・調整を置く。
   ============================================================================= */

/* ---------- 1. 色と寸法 --------------------------------------------------- */
html.k52 {
  /* LP = 承認済みの正本。ここで色を増やさない */
  --k-paper: #FFF8EF;
  --k-ink: #24201F;
  --k-brick: #A63828;
  --k-apricot: #FFD09A;

  /* 段（面の色） */
  --k-canvas: #FFF8EF;
  --k-plane1: #F8E6D2;
  --k-plane2: #F0DCC2;
  --k-plane3: #E6CDAC;

  --k-on-brick: #FFF8EF;
  --k-on-apricot: #24201F;
  --k-muted: #6B5F59;
  --k-faint: #8A7C74;

  /* 縦メニューの墨のプレーン（LP の .plane-ink） */
  --k-rail: #24201F;
  --k-rail-on: #FFF8EF;

  /* 持ち上がり。黒ではなく墨を流す（黒い落ち影は暖白の縁を灰色に濁らせる） */
  --k-lift-card: 0 4px 12px rgb(36 32 31 / .10);
  --k-lift-raised: 0 8px 18px rgb(36 32 31 / .14);
  --k-lift-hero: 0 14px 30px rgb(36 32 31 / .20);
  --k-lift-press: 0 2px 6px rgb(36 32 31 / .16);

  /* 角丸は4つだけ */
  --k-chip: 12px;
  --k-control: 16px;
  --k-card: 22px;
  --k-hero: 28px;

  /* 書体は1系統。LP と同じ日本語ゴシック。数字だけ欧文で太く出す */
  --k-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
            "Noto Sans CJK JP", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic",
            Meiryo, system-ui, sans-serif;
  --k-latin: "Helvetica Neue", "Arial Black", Arial, var(--k-sans);

  --k-tabs-h: 64px;
  --k-top-h: 56px;
  --k-gutter: 20px;
  --k-read: 600px;
  --k-ease: cubic-bezier(.2, .7, .2, 1);

  --k-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html.k52 {
    --k-canvas: #1A1615;
    --k-plane1: #272120;
    --k-plane2: #332B28;
    --k-plane3: #3E3430;
    --k-paper: #1A1615;
    --k-ink: #F4EBE1;
    --k-brick: #E0604A;
    --k-apricot: #E6B075;
    --k-on-brick: #1A1615;
    --k-on-apricot: #1A1615;
    --k-muted: #B5A79E;
    --k-faint: #8E827A;
    --k-rail: #120F0E;
    --k-rail-on: #F4EBE1;
    --k-lift-card: 0 4px 12px rgb(0 0 0 / .34);
    --k-lift-raised: 0 8px 18px rgb(0 0 0 / .44);
    --k-lift-hero: 0 14px 30px rgb(0 0 0 / .54);
    --k-lift-press: 0 2px 6px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}

/* 公開中の app-v7.css が持っている旧トークンを、そのまま新しい値に差し替える。
   これだけで、個別に当て直していない細かい部品も一緒に色が変わる。 */
html.k52 {
  --ra-bg: var(--k-canvas);
  --ra-surface: var(--k-plane1);
  --ra-raised: var(--k-plane2);
  --ra-line: transparent;
  --ra-line-soft: transparent;
  --ra-text: var(--k-ink);
  --ra-muted: var(--k-muted);
  --ra-faint: var(--k-faint);
  --ra-brass: var(--k-brick);
  --ra-brass-light: var(--k-brick);
  --ra-navy: var(--k-plane3);
  --ra-good: #3F7D57;
  --ra-bad: var(--k-brick);
  --ra-paper: var(--k-plane1);
  --ra-paper-bg: var(--k-canvas);
  --ra-ink: var(--k-ink);
  --ra-ink-muted: var(--k-muted);
  --ra-ink-line: transparent;
  --ra-cta: var(--k-brick);
  /* 明朝の全廃。見出し用の別名も同じ日本語ゴシックを指す */
  --ra-serif: var(--k-sans);
  --ra-sans: var(--k-sans);
  --font-display: var(--k-sans);
  --font-jp: var(--k-sans);
  --font-body: var(--k-sans);
  --ra-r-card: var(--k-card);
  --ra-r-btn: var(--k-control);
  --ra-tabs-h: var(--k-tabs-h);
  --ra-top-h: var(--k-top-h);
  --r-xs: var(--k-chip);
  --r-sm: var(--k-chip);
  --r-md: var(--k-control);
  --r-lg: var(--k-card);
  --surface-1: var(--k-plane1);
  --surface-2: var(--k-plane2);
  --surface-border: transparent;
  --hairline: transparent;
  --edge-light: transparent;
  --surface-shadow: var(--k-lift-card);
  --on-primary: var(--k-on-brick);

  /* 公開中の :root で**直値**のまま残っている旧トークン。
     発音チェック・英作文チェックの部品がこれを「操作の面」として使うので、
     暖白の地では黒い箱に見えていた。ここで段の色に付け替える。 */
  --lp-canvas-2: var(--k-plane2);
  --canvas-night-soft: var(--k-plane2);
  --lp-canvas: var(--k-canvas);
  --lp-paper: var(--k-ink);
  --lp-body: var(--k-ink);
  --lp-mute: var(--k-muted);
  --lp-hair: transparent;
  --lp-hair-2: transparent;
  --brass: var(--k-brick);
  --pc-red: var(--k-brick);
  --pc-red-soft: var(--k-brick);

  /* コーチ画面が直値で持っていた暗い面。段に置き換える */
  --rc-home-top: var(--k-plane1);
  --rc-home-bottom: var(--k-plane1);
  --rc-home-border: transparent;
  --rc-bubble-surface: var(--k-plane2);
  --rc-cta-top: var(--k-brick);
  --rc-cta-bottom: var(--k-brick);
  --rc-cta-border: transparent;
  --rc-cta-text: var(--k-on-brick);
  --rc-done: var(--k-muted);
}

/* 公開中の CSS が .btn などに display を当てているため、hidden 属性だけでは消えない。
   こちらで隠したものは確実に消す（対象は hidden 属性が付いたものだけ）。 */
html.k52 [hidden] { display: none !important; }

/* ---------- 2. 地と文字 --------------------------------------------------- */
html.k52,
html.k52 body {
  background: var(--k-canvas);
  color: var(--k-ink);
  font-family: var(--k-sans);
  -webkit-font-smoothing: antialiased;
}

/* 明朝が残っていた2か所を含め、serif 指定を全部つぶす */
html.k52 .ra-serif,
html.k52 .quote__ja,
html.k52 .quote__en,
html.k52 .ra-hero__title,
html.k52 .ra-today__name,
html.k52 h1, html.k52 h2, html.k52 h3, html.k52 h4 {
  font-family: var(--k-sans);
  font-weight: 800;
  letter-spacing: -.02em;
}

html.k52 h1 { font-size: 1.75rem; line-height: 1.22; font-weight: 900; }
html.k52 h2 { font-size: 1.3125rem; line-height: 1.3; }
html.k52 h3 { font-size: 1.0625rem; line-height: 1.35; }
html.k52 p, html.k52 li { line-height: 1.85; }
html.k52 .muted, html.k52 .rc-muted, html.k52 .note, html.k52 .row-sub { color: var(--k-muted); }

/* 数字だけ欧文。縦に比べられるよう等幅にする */
html.k52 .pct-lg, html.k52 .stat, html.k52 .ra-stat,
html.k52 .ra-progress-text, html.k52 .ra-ring__num,
html.k52 .rc-ring-label, html.k52 .k52-num {
  font-family: var(--k-latin);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* 読み幅。80字を超えさせない（PC では列の中で効かせ直す） */
@media (max-width: 999px) {
  html.k52 .ra-body > * { max-width: var(--k-read); }
}
html.k52 .ra-body { margin-inline: auto; }

/* ---------- 3. 上段（ブランド。狭い画面の固定バー） ------------------------ */
html.k52 .ra-top {
  height: var(--k-top-h);
  background: var(--k-canvas);
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.k52 .ra-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html.k52 .ra-brand,
html.k52 .ra-rail-brand {
  font-family: var(--k-sans);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0;
  color: var(--k-ink);
  text-decoration: none;
}
html.k52 .k52-logo { display: block; height: 26px; width: auto; }
html.k52 .ra-brand-logo { display: none; }   /* 旧ブランドの白ロゴは出さない */

/* 右上の歯車（設定） */
html.k52 .k52-gear {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--k-control);
  color: var(--k-ink);
  background: transparent;
  text-decoration: none;
}
html.k52 .k52-gear svg { width: 22px; height: 22px; }
html.k52 .k52-gear[aria-current="page"] { background: var(--k-plane2); }

/* ---------- 4. 下段のタブ（狭い画面。ぼかしはここだけ） -------------------- */
html.k52 .ra-tabs {
  height: calc(var(--k-tabs-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--k-canvas) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 0;
  border-radius: 0;
  box-shadow: 0 -1px 0 rgb(36 32 31 / .06);
}
@media (prefers-color-scheme: dark) {
  html.k52 .ra-tabs { box-shadow: 0 -1px 0 rgb(255 255 255 / .06); }
}
html.k52 .ra-tabs__inner { gap: 0; }
html.k52 .ra-tab {
  flex-direction: column;
  gap: 3px;
  height: var(--k-tabs-h);
  border-radius: 0;
  background: transparent;
  color: var(--k-faint);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: 0;
  transition: color .16s var(--k-ease), background-color .16s var(--k-ease);
}
html.k52 .ra-tab svg { width: 24px; height: 24px; stroke-width: 1.8; }
html.k52 .ra-tab[aria-current="page"] { background: transparent; color: var(--k-brick); }
html.k52 .ra-tab[aria-current="page"] svg { color: var(--k-brick); }
/* 狭い画面では設定をタブから外し、上段の歯車へ移した */
html.k52 .ra-tab[data-tab="settings"] { display: none; }

/* ---------- 5. 面と持ち上がり（囲いの線は引かない） ------------------------ */
html.k52 .card,
html.k52 .ra-pcard,
html.k52 .rc-card,
html.k52 .tipcard,
html.k52 .lockcard,
html.k52 .ra-lesson,
html.k52 .scoreboard,
html.k52 .report-stats,
html.k52 .ra-account-list,
html.k52 .rin-referral,
html.k52 .rowlist {
  background: var(--k-plane1);
  border: 0;
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
}

/* 一覧の器は面にしない。行そのものを札にする（同じ色の箱が二重にならない） */
html.k52 .rowlist,
html.k52 .ra-account-list {
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html.k52 .rowlist > [role="listitem"] { display: flex; min-width: 0; }
html.k52 .rowlist > [role="listitem"] > .row { flex: 1; }
html.k52 .rowlist .row,
html.k52 .ra-librow,
html.k52 .ra-account-list > * {
  background: var(--k-plane1);
  border: 0;
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
  padding: 16px 18px;
  min-height: 44px;
}
html.k52 .rowlist .row { display: flex; align-items: center; gap: 12px; }
/* 一覧の行は面に置いた札。題は墨で読ませ、色は「押せる印」の山形だけが持つ */
html.k52 .rowlist a.row { color: var(--k-ink); text-decoration: none; }
html.k52 .rowlist a.row .row-title { color: var(--k-ink); }
html.k52 .rowlist a.row .chev { color: var(--k-brick); font-size: 1.125rem; }
html.k52 .row-main { flex: 1; min-width: 0; }
html.k52 .row-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.45; }
html.k52 .row-sub { margin: 3px 0 0; font-size: .875rem; line-height: 1.6; }
html.k52 .chev { color: var(--k-faint); flex: none; }

/* ---------- 6. 押せるもの ------------------------------------------------- */
/* 主操作 = 朱赤のベタ。次にやる1つ = 杏。静か = 面。どれも文字は必ず読める */
html.k52 .btn,
html.k52 .rc-choice-btn,
html.k52 .tts-btn,
html.k52 button.btn {
  font-family: var(--k-sans);
  font-weight: 800;
  border: 0;
  border-radius: var(--k-control);
  background: var(--k-brick);
  color: var(--k-on-brick);
  box-shadow: var(--k-lift-raised);
  min-height: 44px;
  padding: 11px 20px;
  letter-spacing: 0;
  transition: transform .12s var(--k-ease), box-shadow .12s var(--k-ease), background-color .12s var(--k-ease);
}
html.k52 .btn.sm { min-height: 38px; padding: 8px 15px; font-size: .875rem; }
html.k52 .btn.block { display: block; width: 100%; text-align: center; }

/* 押している最中だけ沈む（動きは操作に対する返事だけ） */
html.k52 .btn:active,
html.k52 .checkbtn:active,
html.k52 .rc-choice-btn:active {
  transform: translateY(1px);
  box-shadow: var(--k-lift-press);
}

/* 完了のチェック箱。入れていない状態を「入れた」ように見せない（面は空のまま） */
html.k52 .checkbtn { background: transparent; color: transparent; box-shadow: none; border: 0; }
html.k52 .checkbtn::before {
  border: 2px solid var(--k-plane3);
  border-radius: 8px;
  background: var(--k-canvas);
}
html.k52 .checkbtn.on { color: var(--k-on-brick); }
html.k52 .checkbtn.on::before { background: var(--k-brick); border-color: var(--k-brick); }

/* 静かなボタン。面の色は変えても「押せる高さ」は残す */
html.k52 .btn.ghost,
html.k52 .btn.solid.ghost,
html.k52 .rc-toggle {
  background: var(--k-plane2);
  color: var(--k-ink);
  box-shadow: var(--k-lift-card);
}
html.k52 .btn.ghost:hover { background: var(--k-plane3); }

/* 選ばれている状態が読めること（色だけに頼らず、面と太さでも出す） */
html.k52 .rc-choice-btn[aria-pressed="true"],
html.k52 .chip.on,
html.k52 .ra-chip.on,
html.k52 .btn.on {
  background: var(--k-apricot);
  color: var(--k-on-apricot);
  box-shadow: var(--k-lift-raised);
  font-weight: 800;
}

html.k52 .chip,
html.k52 .ra-chip,
html.k52 .rc-chip,
html.k52 .tag {
  border: 0;
  border-radius: var(--k-chip);
  background: var(--k-plane2);
  color: var(--k-ink);
  font-weight: 700;
  box-shadow: none;
}
html.k52 .tag.brand { background: var(--k-apricot); color: var(--k-on-apricot); }

/* 見えるフォーカス */
html.k52 :focus-visible {
  outline: 3px solid var(--k-brick);
  outline-offset: 2px;
  border-radius: var(--k-chip);
}
@media (prefers-color-scheme: dark) {
  html.k52 :focus-visible { outline-color: var(--k-apricot); }
}

/* 文字だけのリンク */
html.k52 .ra-textlink,
html.k52 .rc-link,
html.k52 a:not(.btn):not(.ra-tab):not(.ra-brand):not(.ra-rail-brand):not(.k52-gear) {
  color: var(--k-brick);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ---------- 7. 旧ホーム（#/dashboard）の見出し帯 --------------------------- */
/* 公開中は写真の上に黒いグラデーションを重ねて白抜きにしていた。
   クチリピは地が暖白なので、写真は出さずに文字で見出しを立てる。 */
html.k52 .ra-hero {
  height: auto;
  min-height: 0;
  background: var(--k-canvas);
  color: var(--k-ink);
  overflow: visible;
  padding-bottom: 8px;
}
html.k52 .ra-hero::after { display: none; }
html.k52 .ra-hero__img { display: none; }
html.k52 .ra-hero__text { padding-top: 12px; position: relative; }
html.k52 .ra-hero .ra-brand { color: var(--k-ink); }
html.k52 .ra-hero__greet {
  margin: 10px 0 0;
  color: var(--k-muted);
  font-size: .9375rem;
  letter-spacing: 0;
}
html.k52 .ra-hero__title {
  margin: 6px 0 0;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--k-ink);
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
  padding-inline-end: 140px;   /* 右上の「今週の学習」に重ねない */
}
html.k52 .ra-hero__sub { margin: 10px 0 0; color: var(--k-muted); letter-spacing: 0; }

html.k52 .rc-header-week {
  background: var(--k-plane1);
  border: 0;
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
  color: var(--k-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.k52 .rc-header-week__title { color: var(--k-muted); font-weight: 700; }
html.k52 .rc-header-week .ra-ring__num { fill: var(--k-ink); color: var(--k-ink); }
html.k52 .rc-header-week__days { color: var(--k-muted); }
html.k52 .rc-header-week__days i { background: var(--k-plane3); }
html.k52 .rc-header-week__days .is-done i { background: var(--k-brick); }

html.k52 .ra-hero .k52-gear {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  inset-inline-end: var(--ra-gutter, 20px);
  margin: 0;
  color: var(--k-ink);
}

html.k52 .ra-week {
  background: var(--k-plane1);
  border: 0;
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
}
html.k52 .ra-week__label { color: var(--k-muted); }
html.k52 .ra-streak { color: var(--k-ink); }
html.k52 .ra-streak svg { color: var(--k-brick); }
html.k52 .ra-day { background: var(--k-plane3); }
html.k52 .ra-day.on { background: var(--k-brick); }

/* ---------- 8. ホーム（AIコーチ #/coach）: 今日の札束 ----------------------- */
html.k52 .rc-home,
html.k52 .rc-card.rc-home {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
html.k52 .rc-page { max-width: var(--k-read); }
html.k52 .rc-head { margin: 0 0 20px; }
html.k52 .rc-title {
  font-family: var(--k-sans);
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0;
}
html.k52 .rc-sub { color: var(--k-muted); font-size: .9375rem; max-width: 34em; }
html.k52 .rc-home > .rc-h2,
html.k52 .rc-home .rc-h2 {
  font-family: var(--k-sans);
  margin: 4px 2px 10px;
  font-size: 1.3125rem;
  font-weight: 800;
}
html.k52 .rc-lead { margin: 8px 0; font-size: 1rem; line-height: 1.85; max-width: 34em; }

/* 二つの列（PC でだけ効く。狭い画面では display:contents で無かったことにする） */
html.k52 .k52-home,
html.k52 .k52-home__main,
html.k52 .k52-home__side { display: contents; }

/* 札の並び。狭い画面は1枚ずつ独立した札 */
html.k52 .rc-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
html.k52 .rc-home .rc-items .row,
html.k52 .rc-items .row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 16px 18px;
  background: var(--k-plane1);
  border: 0;
  border-bottom: 0;
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
}
html.k52 .rc-home .rc-items .row-title { font-size: 1.0625rem; font-weight: 800; margin: 0; }
html.k52 .rc-home .rc-items .row-sub { font-size: .875rem; margin: 3px 0 0; color: var(--k-muted); }
html.k52 .rc-home .rc-items .row .btn { flex: none; white-space: nowrap; }

/* 通し番号。今日の課題は上から順に進める並びなので、番号は順序の情報になる */
html.k52 .rc-items:not(.rc-review-due) { counter-reset: k52card; }
html.k52 .rc-items:not(.rc-review-due) .row { counter-increment: k52card; }
html.k52 .rc-items:not(.rc-review-due) .row::before {
  content: counter(k52card);
  align-self: center;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--k-plane2);
  color: var(--k-muted);
  font-family: var(--k-latin);
  font-size: .9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 次にやる1枚だけを主役にする。主操作はこの札の中にしかない */
html.k52 .rc-home .rc-items .row.k52-next {
  background: var(--k-apricot);
  box-shadow: var(--k-lift-hero);
  padding: 20px 20px 22px;
  border-radius: var(--k-hero);
}
html.k52 .rc-items:not(.rc-review-due) .row.k52-next::before {
  background: var(--k-on-apricot);
  color: var(--k-apricot);
}
html.k52 .rc-home .rc-items .row.k52-next .row-title { font-size: 1.1875rem; color: var(--k-on-apricot); }
html.k52 .rc-home .rc-items .row.k52-next .row-sub { color: color-mix(in srgb, var(--k-on-apricot) 70%, transparent); }
html.k52 .rc-home .rc-items .row:not(.k52-next) .btn {
  background: var(--k-plane2);
  color: var(--k-ink);
  box-shadow: var(--k-lift-card);
}

/* 終わった札は「抜き取られた跡」にする。消さない（やった記録は残る） */
html.k52 .rc-home .rc-items .row.is-done {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--k-plane3);
}
html.k52 .rc-home .rc-items .row.is-done .row-title { color: var(--k-muted); font-weight: 700; }
html.k52 .rc-home .rc-items .row.is-done .row-sub { color: var(--k-faint); }
html.k52 .rc-items:not(.rc-review-due) .row.is-done::before {
  content: "";
  background: var(--k-brick);
  -webkit-mask: var(--k-check) center / 18px 18px no-repeat;
  mask: var(--k-check) center / 18px 18px no-repeat;
}

/* 期日の来た復習は課題の山とは別の1枚。狭い列でも題が折れないよう縦に組む */
html.k52 .rc-review-due { margin: 0; }
html.k52 .rc-home .rc-items.rc-review-due .row,
html.k52 .rc-review-due .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  background: var(--k-plane2);
  box-shadow: none;
}
/* 主操作は「次の1つを始める」だけ。復習は静かな面のボタンにして、押せることは残す */
html.k52 .rc-home .rc-items.rc-review-due .row .btn,
html.k52 .rc-review-due .row .btn {
  justify-self: stretch;
  text-align: center;
  background: var(--k-canvas);
  color: var(--k-ink);
  box-shadow: var(--k-lift-card);
}
html.k52 .rc-review-due .row .btn:hover { background: var(--k-plane1); }

/* コーチ（リピ）のふきだし */
html.k52 .rc-coach,
html.k52 .rc-home .rc-coach {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
}
html.k52 .rc-bubble,
html.k52 .rc-home .rc-bubble {
  background: var(--k-plane1);
  border: 0;
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
  padding: 14px 16px;
  clip-path: none;
}
html.k52 .rc-bubble__tail { display: none; }
html.k52 .rc-bubble__name {
  font-weight: 800;
  font-size: .8125rem;
  color: var(--k-brick);
  letter-spacing: 0;
  margin: 0 0 3px;
}
html.k52 .rc-bubble p { font-size: 1rem; line-height: 1.75; }
html.k52 .rc-home .rc-ring-label,
html.k52 .rc-ring-label {
  color: var(--k-muted);
  font-size: .875rem;
  margin: 8px 0 0;
  text-align: left;
}
html.k52 .rc-rin, html.k52 .rc-rin--small, html.k52 .rc-beast-img { filter: none; }
/* 承認済みのリピ。寸法を固定して置く。勝手には動かない */
html.k52 .k52-ripi {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: contain;
  border-radius: var(--k-card);
  background: var(--k-plane2);
}
@media (max-width: 380px) {
  html.k52 .rc-coach, html.k52 .rc-home .rc-coach { grid-template-columns: 76px minmax(0, 1fr); }
  html.k52 .k52-ripi { width: 76px; height: 76px; }
}

html.k52 .rc-actions,
html.k52 .rc-home .rc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start;
}
html.k52 .rc-home .rc-actions .btn.ghost {
  background: var(--k-plane2);
  border: 0;
  padding: 8px 15px;
  font-size: .875rem;
  min-height: 38px;
}

html.k52 .rc-links,
html.k52 .rc-home .rc-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 14px;
  padding: 0;
  border: 0;
}
html.k52 .rc-home .rc-link { font-size: .9375rem; }
html.k52 .rc-status {
  border-radius: var(--k-control);
  background: var(--k-plane2);
  color: var(--k-muted);
  font-size: .8125rem;
}
html.k52 .rc-status--warn { background: var(--k-apricot); color: var(--k-on-apricot); font-weight: 700; }
html.k52 .rc-code { font-family: var(--k-latin); color: var(--k-muted); font-size: .8125rem; }

/* 目標までの流れ（実際の段階。公開中の部品をそのまま使う） */
html.k52 .rc-home-journey {
  background: var(--k-plane1);
  border: 0;
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
  padding: 16px 18px;
}
html.k52 .rc-journey-heading h2 { font-family: var(--k-sans); font-size: 1.0625rem; font-weight: 800; }
html.k52 .rc-journey-heading > span { color: var(--k-brick); }
html.k52 .rc-path li:not(:last-child)::after { background: var(--k-plane3); }
html.k52 .rc-path-dot {
  background: var(--k-plane2);
  border: 0;
  color: var(--k-muted);
  font-family: var(--k-latin);
  font-weight: 800;
}
html.k52 .rc-path .is-current .rc-path-dot { background: var(--k-brick); color: var(--k-on-brick); }
html.k52 .rc-path-title { color: var(--k-muted); font-size: .75rem; }
html.k52 .rc-path .is-current .rc-path-title { color: var(--k-ink); font-weight: 700; }

/* 課題数（3 / 5 / 10）。土台が対応しているときだけ出る */
html.k52 .k52-load { margin: 12px 0 10px; }
html.k52 .k52-load__title { margin: 0 0 8px; font-weight: 800; font-size: .9375rem; }
html.k52 .k52-load__group { display: flex; gap: 8px; }
html.k52 .k52-load__opt {
  flex: 1;
  font-family: var(--k-latin);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
}
html.k52 .k52-load__opt[aria-pressed="true"] {
  background: var(--k-apricot);
  color: var(--k-on-apricot);
  box-shadow: var(--k-lift-raised);
}
html.k52 .k52-load__msg:not(:empty) {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--k-plane2);
  border-radius: var(--k-control);
}
html.k52 .k52-load__ask { margin: 0 0 10px; font-size: .9375rem; line-height: 1.7; }
html.k52 .k52-load__ask-actions { display: flex; gap: 8px; }
html.k52 .k52-load__ask-actions .btn { flex: 1; }
html.k52 .k52-load__now {
  margin: 8px 0 0;
  color: var(--k-muted);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
html.k52 .k52-fold__lead { margin: 8px 0 0; color: var(--k-muted); font-size: .875rem; }

html.k52 .k52-fold { margin-top: 12px; }
html.k52 .k52-fold > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px;
  color: var(--k-brick);
  font-weight: 800;
  font-size: .9375rem;
}
html.k52 .k52-fold > summary::-webkit-details-marker { display: none; }
html.k52 .k52-fold > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2.4px solid currentColor;
  border-bottom: 2.4px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--k-ease);
}
html.k52 .k52-fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* ---------- 9. 教材ライブラリ ---------------------------------------------- */
/* ひとまとまりは「束ねるだけ」。面にしない。見出しは地の上に置き、札をその下に並べる */
html.k52 .ra-library__section {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html.k52 .ra-library__section > h2,
html.k52 .ra-library__section > h3 {
  margin: 0 2px;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--k-ink);
  line-height: 1.4;
}
/* 分類の色（LP の plane をそのまま4つに割り当てる）。
   PC では見出しがこの色のベタ面（＝表紙）になる。狭い画面では太い短い罫で出す。 */
html.k52 .ra-library__section {
  --k-cover: var(--k-brick);
  --k-cover-on: var(--k-on-brick);
}
html.k52 #app > .ra-library__section:nth-of-type(2) { --k-cover: var(--k-apricot); --k-cover-on: var(--k-on-apricot); }
html.k52 #app > .ra-library__section:nth-of-type(3) { --k-cover: var(--k-rail); --k-cover-on: var(--k-rail-on); }
html.k52 #app > .ra-library__section:nth-of-type(4) { --k-cover: var(--k-plane2); --k-cover-on: var(--k-ink); }
html.k52 .ra-library__section > h2::after {
  content: "";
  display: block;
  width: 40px; height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--k-cover);
}

html.k52 .ra-library__section .rowlist .row {
  text-decoration: none;
  align-items: flex-start;
}
html.k52 .ra-library__section .row-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 1.0625rem;
  color: var(--k-ink);
}
html.k52 .ra-library__section .row-sub { color: var(--k-muted); }
html.k52 .ra-library__section .ra-progress-text { color: var(--k-ink); font-size: .8125rem; }
html.k52 .ra-lock {
  background: var(--k-apricot);
  color: var(--k-on-apricot);
  border-radius: var(--k-chip);
  padding: 2px 9px;
  font-size: .6875rem;
  font-weight: 800;
}
html.k52 .ra-librow__title { font-weight: 800; font-size: 1rem; }
html.k52 .ra-librow__sub { color: var(--k-muted); font-size: .875rem; }

/* ---------- 10. 進み具合の部品 --------------------------------------------- */
html.k52 .ra-ring__track { stroke: var(--k-plane3); }
html.k52 .ra-ring__fill { stroke: var(--k-brick); }
html.k52 .ra-ring__num { fill: var(--k-ink); }
html.k52 .pbar { background: var(--k-plane3); border-radius: 999px; overflow: hidden; }
html.k52 .pbar > * { background: var(--k-brick); }
html.k52 .ra-danger { background: var(--k-brick); color: var(--k-on-brick); }
html.k52 .ra-legal { color: var(--k-faint); font-size: .8125rem; }

/* ---------- 11. 記録タブに足す「学習カレンダー」（PC のみ・実データだけ）---- */
html.k52 .k52-records { display: none; }   /* 出すのは PC だけ。狭い画面の組みは据え置き */
html.k52 .k52-records__title {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  font-weight: 800;
}
html.k52 .k52-cal {
  background: var(--k-plane1);
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
  padding: 18px;
}
html.k52 .k52-cal__dow,
html.k52 .k52-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
html.k52 .k52-cal__dow {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  color: var(--k-faint);
  font-size: .6875rem;
  font-weight: 700;
  text-align: center;
}
html.k52 .k52-cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--k-chip);
  background: var(--k-plane2);
  color: var(--k-faint);
  font-family: var(--k-latin);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.k52 .k52-cal__day.is-studied { background: var(--k-brick); color: var(--k-on-brick); }
html.k52 .k52-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--k-ink); }
html.k52 .k52-cal__day.is-future { background: transparent; box-shadow: inset 0 0 0 1px var(--k-plane2); color: var(--k-plane3); }
html.k52 .k52-cal__total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--k-muted);
  font-size: .875rem;
}
html.k52 .k52-cal__total b {
  font-family: var(--k-latin);
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--k-ink);
  line-height: 1;
}
html.k52 .k52-cal__total b small { font-size: .875rem; margin-inline-start: 2px; }
html.k52 .k52-records__links { margin-top: 18px; }

/* 目標までの流れは PC の脇の列にだけ出す（狭い画面の組みは据え置き） */
@media (max-width: 999px) {
  html.k52 .rc-page--home .rc-home-journey { display: none; }
}

/* ---------- 12. 直値 #111113 が残っていた面 ---------------------------------
   公開中の CSS が旧アプリの黒をそのまま書いている箇所。暖白の地では
   「読めない黒い箱」になっていた（教材の本文・検索・解説・紹介リンク）。 */
html.k52 .script-box,
html.k52 .q-why,
html.k52 .rin-referral-link,
html.k52 .field input,
html.k52 .field select,
html.k52 .field textarea,
html.k52 input[type="text"],
html.k52 input[type="email"],
html.k52 input[type="password"],
html.k52 input[type="search"],
html.k52 select,
html.k52 textarea {
  background: var(--k-plane2);
  color: var(--k-ink);
  border: 0;
}
html.k52 .script-box {
  border-radius: var(--k-card);
  box-shadow: none;
  padding: 16px 18px;
}
html.k52 .tts-script { color: var(--k-ink); }
html.k52 .q-why {
  border-left: 3px solid var(--k-brick);
  border-radius: 0 var(--k-control) var(--k-control) 0;
  color: var(--k-ink);
}

/* 選択肢。公開中は面と枠が同じ色になって「文字だけ」に見えていた。
   正解・誤答は色だけでなく、面と印でも分かるようにする。 */
html.k52 .q-opt {
  position: relative;
  background: var(--k-plane2);
  border: 0;
  border-radius: var(--k-control);
  color: var(--k-ink);
  font-family: var(--k-sans);
  font-weight: 700;
  box-shadow: var(--k-lift-card);
  padding-inline-start: 54px;
  transition: transform .12s var(--k-ease), background-color .12s var(--k-ease);
}
/* 選べることが形で分かるように、左に空の印を置く（選ぶと埋まる） */
html.k52 .q-opt::before {
  content: "";
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--k-faint);
}
html.k52 .q-opt.correct::before,
html.k52 .q-opt.wrong::before { background: currentColor; box-shadow: none; }
html.k52 .q-opt:hover { background: var(--k-plane3); }
html.k52 .q-opt:active { transform: translateY(1px); }
html.k52 .q-opt.correct {
  background: var(--k-apricot);
  color: var(--k-on-apricot);
  box-shadow: inset 0 0 0 3px var(--k-on-apricot), var(--k-lift-card);
}
html.k52 .q-opt.wrong {
  background: var(--k-brick);
  color: var(--k-on-brick);
  box-shadow: var(--k-lift-card);
}
html.k52 .q-opt.dim { opacity: .45; box-shadow: none; }
html.k52 .q-footer { margin-top: 20px; }
html.k52 .rin-referral-link { border-radius: var(--k-control); }

/* ---------- 13. 認証 ------------------------------------------------------- */
html.k52 .auth-modal { background: rgb(36 32 31 / .5); }
html.k52 .auth-card {
  background: var(--k-plane1);
  border: 0;
  border-radius: var(--k-hero);
  box-shadow: var(--k-lift-hero);
  color: var(--k-ink);
}
html.k52 .auth-card h3 { font-family: var(--k-sans); font-weight: 800; }
html.k52 .auth-lead, html.k52 .auth-note { color: var(--k-muted); }
html.k52 .auth-card input,
html.k52 .field input,
html.k52 .field textarea,
html.k52 .field select {
  background: var(--k-canvas);
  color: var(--k-ink);
  border: 0;
  border-radius: var(--k-control);
  box-shadow: inset 0 0 0 2px var(--k-plane3);
  min-height: 46px;
  padding: 11px 14px;
  font-family: var(--k-sans);
  font-size: 1rem;
}
html.k52 .auth-card input:focus-visible,
html.k52 .field input:focus-visible { box-shadow: inset 0 0 0 2px var(--k-brick); }
html.k52 .auth-x { color: var(--k-muted); background: transparent; }

/* ---------- 14. 初回設定 --------------------------------------------------- */
html.k52 .rin-onboarding, html.k52 .rin-shell { background: var(--k-canvas); color: var(--k-ink); }
/* SRC100 Atelier.onBrass と同じ主操作の文字色。旧CSSの固定黒を引き継がない。 */
html.k52 .rin-button--primary { background: var(--k-brick); color: var(--k-on-brick); }
html.k52 .rin-onboarding .rin-button { font-size: 1rem !important; }
html.k52 .rin-brand-logo { display: none; }
html.k52 .rin-progress { background: var(--k-plane3); border-radius: 999px; }
html.k52 .rin-progress > span { background: var(--k-brick); }
html.k52 .rin-exit-button {
  background: var(--k-plane2);
  color: var(--k-ink);
  border: 0;
  border-radius: var(--k-control);
  font-weight: 700;
  min-height: 40px;
  padding: 8px 14px;
}

/* ---------- 15. 発音チェック・英作文チェック ------------------------------- */
html.k52 .hc-card {
  background: var(--k-plane1);
  border: 0;
  border-radius: var(--k-card);
  box-shadow: var(--k-lift-card);
  padding: 18px;
}
html.k52 .hc-kicker {
  font-family: var(--k-sans);
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--k-ink);
}
html.k52 .hc-note, html.k52 .hc-target-note { color: var(--k-muted); }
html.k52 .hc-target-note { border-left: 3px solid var(--k-brick); padding: 4px 12px; }

html.k52 .hc-mode,
html.k52 .hc-filter,
html.k52 .hc-w {
  background: var(--k-plane2);
  color: var(--k-ink);
  border: 0;
  border-radius: var(--k-chip);
  box-shadow: none;
  font-family: var(--k-sans);
  font-weight: 700;
  min-height: 38px;
}
/* 公開中の app-v7.css が .hc-mode / .hc-filter に !important で
   角丸10px・透明背景・細い枠を当てている。同じ強さで上書きする（要素は消さない）。 */
html.k52 .hc-mode,
html.k52 .hc-filter {
  border: 0 !important;
  background: var(--k-plane2) !important;
  color: var(--k-ink) !important;
  border-radius: var(--k-chip) !important;
  min-height: 38px !important;
  font-weight: 700 !important;
}
html.k52 .hc-mode { border-radius: var(--k-control) !important; padding: 9px 16px; }
html.k52 .hc-mode.on,
html.k52 .hc-filter.on {
  background: var(--k-brick) !important;
  border-color: transparent !important;
  color: var(--k-on-brick) !important;
  box-shadow: var(--k-lift-card);
}
html.k52 .hc-mode:hover, html.k52 .hc-filter:hover, html.k52 .hc-w:hover { background: var(--k-plane3); }

html.k52 .hc-slist { gap: 10px; }
html.k52 .hc-item {
  border: 0;
  border-radius: var(--k-card);
  background: var(--k-plane2);
  box-shadow: none;
  overflow: hidden;
}
html.k52 .hc-item.open {
  border: 0;
  background: var(--k-canvas);
  box-shadow: var(--k-lift-raised);
}
html.k52 .hc-s {
  background: transparent;
  border: 0;
  border-radius: var(--k-card);
  padding: 14px 16px;
  min-height: 44px;
}
html.k52 .hc-s:hover { background: var(--k-plane3); }
html.k52 .hc-s.on, html.k52 .hc-item.open .hc-s { background: var(--k-apricot); }
html.k52 .hc-item.open .hc-s .en,
html.k52 .hc-s .en { color: var(--k-ink); font-weight: 700; }
html.k52 .hc-item.open .hc-s .jp, html.k52 .hc-s .jp { color: var(--k-muted); }
html.k52 .hc-item.open .hc-s .jp { color: color-mix(in srgb, var(--k-on-apricot) 72%, transparent); }
html.k52 .hc-exp { padding: 4px 16px 18px; }
html.k52 .hc-exp-result { border-top: 0; margin-top: 16px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--k-plane3); }

html.k52 .hc-tag {
  font-family: var(--k-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--k-ink);
  background: var(--k-plane3);
  border: 0;
  border-radius: var(--k-chip);
  padding: 3px 9px;
}
html.k52 .hc-target { font-family: var(--k-sans); font-weight: 800; color: var(--k-ink); }
html.k52 .hc-target-jp { color: var(--k-muted); }

html.k52 .hc-btn {
  font-family: var(--k-sans);
  font-weight: 800;
  color: var(--k-on-brick);
  background: var(--k-brick);
  border: 0;
  border-radius: var(--k-control);
  box-shadow: var(--k-lift-raised);
  min-height: 44px;
  padding: 11px 20px;
}
html.k52 .hc-btn.ghost {
  background: var(--k-plane2);
  color: var(--k-ink);
  box-shadow: var(--k-lift-card);
}
html.k52 .hc-btn:active { transform: translateY(1px); box-shadow: var(--k-lift-press); }
html.k52 .hc-btn.rec.recording { background: var(--k-brick); color: var(--k-on-brick); }
html.k52 .hc-btn:disabled { opacity: .4; }

html.k52 .hc-meter .bar, html.k52 .hc-sub .bar { background: var(--k-plane3); border-radius: 999px; }
html.k52 .hc-meter .bar i { background: var(--k-brick); }
html.k52 .hc-sub .bar i { background: var(--k-brick); }
html.k52 .hc-meter .t, html.k52 .hc-sub .l { font-family: var(--k-sans); color: var(--k-muted); }
html.k52 .hc-sub .l b { color: var(--k-ink); }
html.k52 .hc-score { font-family: var(--k-latin); font-weight: 800; color: var(--k-ink); letter-spacing: 0; }
html.k52 .hc-score small { color: var(--k-muted); }
html.k52 .hc-verdict {
  font-family: var(--k-sans);
  font-weight: 800;
  color: var(--k-on-apricot);
  background: var(--k-apricot);
  border-radius: var(--k-chip);
  padding: 7px 14px;
}
/* 語ごとの出来ばえ。色だけに頼らず、面と線の種類でも違いを出す（元の作りを踏襲） */
html.k52 .hc-w.good { background: var(--k-plane2); color: var(--k-ink); }
html.k52 .hc-w.mid { background: var(--k-apricot); color: var(--k-on-apricot); }
html.k52 .hc-w.bad { background: var(--k-brick); color: var(--k-on-brick); border: 0; }
html.k52 .hc-w.ins { background: transparent; box-shadow: inset 0 0 0 2px var(--k-plane3); color: var(--k-muted); }
html.k52 .hc-w.omit { opacity: .5; }
html.k52 .hc-banner {
  border: 0;
  border-radius: var(--k-control);
  background: var(--k-plane2);
  color: var(--k-ink);
}
html.k52 .hc-banner.err { background: var(--k-brick); color: var(--k-on-brick); }
html.k52 .hc-modal-box { border-radius: var(--k-card); background: var(--k-plane1); }

/* ---------- 16. 教材の説明（初めて開いたとき）------------------------------ */
html.k52.k52-modal-open .ra-tabs { pointer-events: none; }
html.k52 .k52-intro {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(36 32 31 / .48);
  padding: 0;
}
@media (min-width: 700px) { html.k52 .k52-intro { align-items: center; padding: 24px; } }
html.k52 .k52-intro__card {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--k-canvas);
  border-radius: var(--k-hero) var(--k-hero) 0 0;
  box-shadow: var(--k-lift-hero);
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 700px) { html.k52 .k52-intro__card { border-radius: var(--k-hero); } }
html.k52 .k52-intro__x {
  align-self: flex-end;
  width: 40px; height: 40px;
  margin: -6px -6px -8px 0;
  border: 0;
  border-radius: var(--k-control);
  background: transparent;
  color: var(--k-muted);
  font-family: var(--k-sans);
  font-size: 1.25rem;
  cursor: pointer;
}
html.k52 .k52-intro__x::before { content: "×"; }
html.k52 .k52-intro__art {
  height: 148px;
  border-radius: var(--k-card);
  background: var(--k-plane1);
  display: grid;
  place-items: center;
  overflow: hidden;
}
html.k52 .k52-intro__art svg { width: 68%; height: auto; }
html.k52 .k52-intro__label { color: var(--k-brick); font-weight: 800; font-size: .9375rem; margin: 0; }
html.k52 .k52-intro__title { font-size: 1.375rem; font-weight: 800; margin: 0; }
html.k52 .k52-intro__text { margin: 0; color: var(--k-ink); line-height: 1.85; }
html.k52 .k52-intro__flow { margin: 0; padding-inline-start: 1.15em; display: flex; flex-direction: column; gap: 6px; }
html.k52 .k52-intro__nav { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
html.k52 .k52-intro__nav .btn { flex: 1; }
html.k52 .k52-intro__dots { display: flex; gap: 6px; justify-content: center; }
html.k52 .k52-intro__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--k-plane3); }
html.k52 .k52-intro__dot.on { background: var(--k-brick); width: 20px; }
html.k52 .k52-intro__hint { color: var(--k-faint); font-size: .8125rem; text-align: center; margin: 0; }

/* 「← 戻る」と同じ行に並ばないよう、教材の説明の呼び出しは1行使う */
html.k52 .k52-replay[data-k52-intro] { display: flex; width: fit-content; }
html.k52 .k52-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--k-brick);
  font-family: var(--k-sans);
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
}

/* ---------- 17. 長文の壁を畳む --------------------------------------------- */
html.k52 .k52-clamp > .k52-clamp__body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.k52 .k52-clamp.is-open > .k52-clamp__body {
  display: block;
  overflow: visible;
}

/* =============================================================================
   18. PC（1000px 以上）
   -----------------------------------------------------------------------------
   公開中の app-v7.css も 1000px で縦メニューに切り替える。同じ境目に合わせて、
   面の色・幅・盤面の組みだけを差し替える（境目を増やすと 900〜999px が壊れる）。
   ============================================================================= */
@media (min-width: 1000px) {
  html.k52 {
    --ra-rail: 236px;
    --ra-gutter: 40px;
  }

  /* --- 18-1. 墨のプレーンの縦メニュー（LP の plane-ink。ここ1か所だけ） --- */
  html.k52 .ra-tabs {
    display: flex;
    flex-direction: column;
    width: var(--ra-rail);
    height: auto;
    padding: 30px 14px 18px;
    background: var(--k-rail);
    color: var(--k-rail-on);
    border: 0;
    border-radius: 0;
    /* 暗い配色では地と墨が近づくので、境目だけ髪の毛1本残す */
    box-shadow: 1px 0 0 rgb(255 255 255 / .07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* 墨の面に杏の名乗り。LP の帯（.plane-ink）と同じ組み合わせ */
  html.k52 .ra-rail-brand {
    display: inline-flex;
    align-items: center;
    margin: 0 10px 30px;
    color: var(--k-apricot);
  }
  html.k52 .ra-rail-brand .k52-logo { height: 30px; }
  html.k52 .ra-tabs__inner { flex-direction: column; gap: 4px; max-width: none; }
  html.k52 .ra-tab {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    height: 50px;
    padding: 0 14px;
    border-radius: var(--k-control);
    background: transparent;
    color: color-mix(in srgb, var(--k-rail-on) 66%, transparent);
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: 0;
  }
  html.k52 .ra-tab svg { width: 22px; height: 22px; }
  html.k52 .ra-tab:hover {
    background: color-mix(in srgb, var(--k-rail-on) 10%, transparent);
    color: var(--k-rail-on);
  }
  html.k52 .ra-tab[aria-current="page"] {
    background: var(--k-apricot);
    color: var(--k-on-apricot);
  }
  html.k52 .ra-tab[aria-current="page"] svg { color: var(--k-on-apricot); }
  html.k52 .ra-tab[data-tab="settings"] { display: flex; }
  html.k52 .k52-gear { display: none; }
  /* 墨の面の上では、焦点の輪郭も杏にする（朱赤は墨の上で読めない） */
  html.k52 .ra-tabs :focus-visible { outline-color: var(--k-apricot); }
  /* 学習中と入口（初回設定・ログイン）では縦メニューを出さない。
     公開中の app-v7.css と同じ決まりだが、こちらが後から display を当てるので明示し直す。 */
  html.k52 body[data-mode="focus"] .ra-tabs,
  html.k52 body[data-mode="gate"] .ra-tabs { display: none; }
  html.k52 body[data-mode="focus"] .ra-main,
  html.k52 body[data-mode="gate"] .ra-main { margin-left: 0; }
  /* 案内役は案内の場所に。承認済みのリピが下端から顔を出す（読み上げ対象外） */
  html.k52 .ra-tabs::after {
    content: "";
    margin-top: auto;
    height: 104px;
    background: url("/kuchiripi/ripi-peek.png") center bottom / contain no-repeat;
    opacity: .92;
  }
  html.k52 .ra-tabs:focus-within::after { opacity: 1; }

  /* --- 18-2. 盤面。画面ごとに幅を変える ---
     教材の中（一覧・レッスン）は 1 行が 80 字を超えない幅で止める。
     組み直した3つの画面（今日・教材・記録）だけ、広い盤面を使い切る。 */
  html.k52 .ra-body {
    max-width: 980px;
    padding: 52px var(--ra-gutter) 88px;
  }
  html.k52 body[data-route="coach"] .ra-body,
  html.k52 body[data-route="review"] .ra-body { max-width: 1240px; }
  html.k52 .ra-body > * { max-width: none; }
  html.k52 .ra-body > p,
  html.k52 .page-head .crumb,
  html.k52 .rc-sub,
  html.k52 .rc-lead { max-width: 36em; }
  html.k52 .page-head { margin-bottom: 36px; }
  html.k52 .page-head h1 {
    font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.03em;
  }
  html.k52 .rc-page { max-width: none; }
  html.k52 .rc-title { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); }

  /* --- 18-3. ホーム: 札束（主）＋ 脇の列 --- */
  html.k52 .rc-home .rc-coach,
  html.k52 .rc-coach { grid-template-columns: 116px minmax(0, 1fr); gap: 18px; margin: 0; }
  html.k52 .k52-ripi { width: 116px; height: 116px; }
  html.k52 .rc-home .rc-bubble { padding: 18px 22px; }
  html.k52 .rc-bubble p { font-size: 1.0625rem; max-width: 40em; }
  html.k52 .rc-home .rc-ring-label {
    margin: 12px 0 0;
    font-size: 1.125rem;
    color: var(--k-ink);
  }

  /* 札束。1日分の札が箱に積んである */
  html.k52 .rc-home .rc-items:not(.rc-review-due) {
    gap: 0;
    padding: 16px 18px 20px;
    background: var(--k-plane2);
    border-radius: var(--k-hero);
  }
  html.k52 .rc-home .rc-items:not(.rc-review-due) .row {
    position: relative;
    margin-top: -10px;           /* 重ねて積む。後の札ほど上に描かれる */
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 4px 18px;
    padding: 20px 22px 24px;
  }
  html.k52 .rc-home .rc-items:not(.rc-review-due) .row:first-child { margin-top: 0; }
  html.k52 .rc-items:not(.rc-review-due) .row::before { width: 38px; height: 38px; font-size: 1.0625rem; }

  /* 次にやる1枚だけが山から引き出されている。主操作はここにしかない */
  html.k52 .rc-home .rc-items:not(.rc-review-due) .row.k52-next {
    z-index: 2;
    margin-inline: -34px -12px;
    margin-block: 0 4px;
    padding: 26px 26px 28px;
  }
  html.k52 .rc-home .rc-items .row.k52-next .row-title { font-size: 1.5rem; line-height: 1.35; }
  html.k52 .rc-home .rc-items .row.k52-next .row-sub { font-size: .9375rem; }
  html.k52 .rc-home .rc-items .row.k52-next .btn { min-height: 52px; padding: 13px 28px; font-size: 1.0625rem; }
  html.k52 .rc-home .rc-items:not(.rc-review-due) .row.k52-next::before { width: 44px; height: 44px; font-size: 1.1875rem; }

  /* 脇の列の中身は一段静かに */
  html.k52 .k52-home__side .rc-items { gap: 10px; }
  html.k52 .k52-home__side .rc-review-due .row { padding: 16px 18px; }
  html.k52 .k52-home__side .rc-links { margin: 0; }
  html.k52 .k52-home__side .k52-fold { margin: 0; }
  html.k52 .rc-home-journey { padding: 18px 20px; }

  /* --- 18-4. 教材ライブラリ: 分類の「表紙」＋ 札の盤 ---
     分類ごとに LP の面の色をベタで敷く。見出しがそのまま表紙になるので、
     飾りの枠も説明の文字も足さない。札は表紙の中身。 */
  html.k52 body[data-route="library"] .ra-body { max-width: 1320px; }
  html.k52 body[data-route="library"] #app { display: block; }
  html.k52 .ra-library__section { margin: 0 0 32px; gap: 16px; }
  html.k52 .ra-library__section > h2 {
    margin: 0;
    padding: 24px;
    background: var(--k-cover);
    color: var(--k-cover-on);
    font-size: clamp(1.5rem, 2.25vw, 2rem);
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: -.03em;
    /* 4隅のうち1つだけ大きく丸める。LP の口の形と同じで、左右対称にしない */
    border-radius: var(--k-hero) var(--k-hero) 64px var(--k-hero);
    text-wrap: balance;
  }
  html.k52 .ra-library__section > h2::after { display: none; }
  html.k52 .ra-library__section .rowlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  html.k52 .ra-library__section .rowlist > [role="listitem"] { display: flex; }
  html.k52 .ra-library__section .rowlist .row {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px 22px;
    background: var(--k-plane1);
    box-shadow: none;
    transition: transform .14s var(--k-ease), background-color .14s var(--k-ease);
  }
  html.k52 .ra-library__section .rowlist .row:hover,
  html.k52 .ra-library__section .rowlist .row:focus-visible {
    background: var(--k-plane2);
    transform: translateY(-3px);
  }
  html.k52 .ra-library__section .row-title { font-size: 1.25rem; line-height: 1.5; }
  html.k52 .ra-library__section .rowlist .row .chev { display: none; }
  html.k52 .ra-library__section .row-main { width: 100%; }

  /* --- 18-5. 記録: 学習カレンダー --- */
  html.k52 body[data-route="review"] #app > .k52-records { display: block; margin-top: 28px; }

  /* --- 18-6. 設定・その他の1列画面は読みやすい幅で止める --- */
  html.k52 body[data-route="account"] .ra-body,
  html.k52 body[data-route="report"] .ra-body { max-width: 900px; }
}

/* =============================================================================
   18-7. 2列に割る（1200px 以上）
   -----------------------------------------------------------------------------
   1000〜1199px は縦メニュー＋広い1列のまま。脇の列を押し込むと札が読めなくなる。
   ============================================================================= */
@media (min-width: 1200px) {
  html.k52 .k52-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(288px, 24vw, 344px);
    gap: 28px 32px;
    align-items: start;
  }
  html.k52 .k52-home__main,
  html.k52 .k52-home__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  html.k52 .k52-home__side { gap: 14px; }
  html.k52 .k52-home__main > *,
  html.k52 .k52-home__side > * { margin-top: 0; margin-bottom: 0; }
  /* 計画がまだ無い日の入口。列いっぱいの帯にはしない */
  html.k52 .k52-home__main > .btn.block { max-width: 420px; }

  /* 教材: 表紙を左の柱にして、札を2列に並べる */
  html.k52 .ra-library__section {
    display: grid;
    grid-template-columns: clamp(190px, 18vw, 252px) minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
  }
  html.k52 .ra-library__section > h2 {
    display: flex;
    align-items: flex-start;
    padding: 28px 24px;
  }
  html.k52 .ra-library__section .rowlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.k52 .ra-library__section .rowlist .row { min-height: 112px; }

  /* 記録: 復習（主）＋ 学習カレンダー（脇）。
     記録面が実際に出ているときだけ2列にする。問題を解いている画面（#/review/due）は1列のまま */
  html.k52 body[data-route="review"] #app:has(> .k52-records) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(288px, 24vw, 344px);
    gap: 24px 32px;
    align-items: start;
  }
  html.k52 body[data-route="review"] #app:has(> .k52-records) > * { grid-column: 1; }
  html.k52 body[data-route="review"] #app > .page-head { grid-column: 1 / -1; }
  html.k52 body[data-route="review"] #app:has(> .k52-records) > .k52-records {
    grid-column: 2;
    grid-row: 2 / span 2;
    margin-top: 0;
  }
}

@media (min-width: 1600px) {
  html.k52 { --ra-rail: 264px; }
  html.k52 body[data-route="coach"] .ra-body,
  html.k52 body[data-route="review"] .ra-body { max-width: 1400px; }
  html.k52 body[data-route="library"] .ra-body { max-width: 1480px; }
}

/* ---------- 19. 動き ------------------------------------------------------- */
/* 動くのは、人が触ったときだけ。読み込みの演出は置かない。 */
html.k52 .k52-intro__card { animation: k52-rise .24s var(--k-ease) both; }
@keyframes k52-rise { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  html.k52 *,
  html.k52 *::before,
  html.k52 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 20. 旧ブランドの名残 ------------------------------------------- */
/* 運営者の法的な表記（特商法・プライバシー・会社名）は消さない。
   消すのは「英語のりん」を名乗っている画面上のブランド表示だけ。 */
html.k52 [data-k52-legacy-brand] { display: none; }

/* Phrase boundaries keep Japanese category names readable in narrow covers. */
html.k52 .k54-category-phrase { display: inline-block; }
@media (min-width: 1200px) {
  html.k52 .ra-library__section > h2 {
    display:block;
    font-size:clamp(1.25rem,1.9vw,1.75rem);
  }
}

/* ---------- 21. 「わからない」と有料プランの案内（2026-09-26 resume64） ------- */
/* 設問ごとの「わからない」。押している間は、既存の「選ばれている状態」と同じ杏で示す */
html.k52 .unsure-row { display: flex; justify-content: flex-end; margin: 0 0 8px; }
html.k52 .btn.unsure-flag { letter-spacing: 0; }
html.k52 .btn.unsure-flag[aria-pressed="true"] {
  background: var(--k-apricot);
  color: var(--k-on-apricot);
}

/* 無料プランの人だけに出る有料プランの案内。面と角丸は .ra-pcard のまま使う */
html.k52 .ra-upgrade { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
html.k52 .ra-upgrade__title { margin: 0; font-size: 1.15rem; font-weight: 800; }
html.k52 .ra-upgrade__lead { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--k-muted); }

/* 週次レポートの未読の印。行の中で文字とくっつかないだけの間を取る */
html.k52 [data-rin-unread] { margin-top: 6px; }

/* ---------- 22. 料金画面の2枚の札と、今日タブのお願いカード（2026-09-27 web78） ------- */
/* 色・角丸・書体は既存の変数だけを使う（LP の正本から色を増やさない）。 */
html.k52 .kp-pw-back {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgb(36 32 31 / .48);
}
@media (min-width: 700px) { html.k52 .kp-pw-back { align-items: center; } }
html.k52 .kp-pw {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 20px 20px; border-radius: var(--k-hero);
  background: var(--k-canvas); color: var(--k-ink); box-shadow: var(--k-lift-hero);
  font-family: var(--k-sans);
}
html.k52 .kp-pw__x {
  position: absolute; top: 10px; right: 12px; width: 40px; height: 40px;
  border: 0; border-radius: var(--k-chip); background: transparent; color: var(--k-muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
html.k52 .kp-pw__title { margin: 0; font-size: 1.1rem; font-weight: 800; outline: none; }
html.k52 .kp-pw__lead { margin: 0; font-size: .9rem; line-height: 1.7; }
html.k52 .kp-pw__fine { margin: 0; font-size: .78rem; line-height: 1.6; color: var(--k-muted); }
html.k52 .kp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 8px; }
html.k52 .kp-plan {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px; border-radius: var(--k-control); text-align: left; cursor: pointer;
  border: 2px solid var(--k-plane3); background: var(--k-plane1); color: var(--k-ink);
  font-family: var(--k-sans);
}
html.k52 .kp-plan.is-selected { border-color: var(--k-brick); background: var(--k-plane2); box-shadow: var(--k-lift-press); }
html.k52 .kp-plan__name { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: .9rem; font-weight: 800; color: var(--k-muted); }
html.k52 .kp-plan.is-selected .kp-plan__name { color: var(--k-brick); }
html.k52 .kp-plan__check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--k-plane3); }
html.k52 .kp-plan.is-selected .kp-plan__check { border: 5px solid var(--k-brick); }
html.k52 .kp-plan__price { font-family: var(--k-latin); font-size: 1.3rem; font-weight: 900; font-variant-numeric: tabular-nums; }
html.k52 .kp-plan__sub { font-size: .78rem; font-weight: 700; color: var(--k-muted); }
html.k52 .kp-plan__sub.is-trial { color: var(--k-brick); }
html.k52 .kp-plan__badge {
  position: absolute; top: -11px; right: 8px; padding: 3px 8px; border-radius: var(--k-chip);
  background: var(--k-apricot); color: var(--k-on-apricot); font-size: .72rem; font-weight: 900;
}

html.k52 .rc-asks { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
html.k52 .rc-asks > .rc-mount { display: flex; flex-direction: column; gap: 12px; }
html.k52 .rc-ask { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--k-card); background: var(--k-plane1); }
html.k52 .rc-ask--baseline { background: var(--k-apricot); color: var(--k-on-apricot); }
html.k52 .rc-ask__row { display: flex; align-items: flex-start; gap: 12px; }
html.k52 .rc-ask__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--k-brick); color: var(--k-on-brick);
}
html.k52 .rc-ask__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 900; }
html.k52 .rc-ask__body { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.6; }
html.k52 .rc-ask--notify .rc-ask__body { color: var(--k-muted); }
html.k52 .rc-ask__actions { display: flex; gap: 10px; }
html.k52 .rc-ask__actions > .rc-ask__go { flex: 1; margin: 0; }
html.k52 .rc-ask__actions > .rc-ask__later { flex: none; min-width: 96px; margin: 0; }

/* ---------- 23. 会員 Web の進み具合と操作の返事（phase 2） ---------- */
html.k52 .btn:not(.ghost):not(.teal),
html.k52 .rc-choice-btn {
  box-shadow: 0 4px 0 color-mix(in srgb, var(--k-brick) 72%, var(--k-ink));
}
html.k52 .btn:not(.ghost):not(.teal):active,
html.k52 .rc-choice-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 color-mix(in srgb, var(--k-brick) 72%, var(--k-ink));
}
html.k52 .rc-step-summary { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; color: var(--k-ink); font-weight: 800; }
html.k52 .rc-step-dots { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
html.k52 .rc-step-dots > span { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--k-brick); background: transparent; }
html.k52 .rc-step-dots > span.is-done { background: var(--k-brick); }
html.k52 .rc-step-finished { margin: 8px 0 16px; font-size: .95rem; font-weight: 800; color: var(--k-brick); }

html.k52 .ra-library__section .row-sub:has(.ra-material-ring) { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html.k52 .ra-material-ring { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: conic-gradient(var(--k-brick) var(--p), var(--k-plane3) 0); }
html.k52 .ra-material-ring > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--k-plane1); color: var(--k-ink); font: 800 .65rem var(--k-latin); }

html.k52 .q-why.ra-result-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--k-tabs-h) + env(safe-area-inset-bottom, 0px)); z-index: 70;
  width: 100%; max-height: 50vh; overflow: auto;
  margin: 0; padding: 16px max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: var(--k-plane1); color: var(--k-ink);
  border: 0; border-top: 4px solid var(--k-apricot); border-radius: var(--k-card) var(--k-card) 0 0;
  box-shadow: var(--k-lift-raised);
  animation: k52-result-in .28s var(--k-ease) both;
}
html.k52 .ra-result-bar > .btn { display: block; position: sticky; bottom: 0; max-width: 420px; margin: 12px auto 0; }
html.k52 body:has(.ra-result-bar) .ra-main { padding-bottom: max(50vh, var(--k-tabs-h)); }
@media (min-width: 1000px) {
  html.k52 .q-why.ra-result-bar { left: var(--ra-rail); width: auto; bottom: 0; max-height: 42vh; }
}
/* The daily reward is already represented by these two feedback screens. */
html.k52 body:has(.ra-result-bar) .study-reward,
html.k52 body:has(.ra-complete) .study-reward { display: none; }
@keyframes k52-result-in { from { transform: translateY(100%); opacity: .6; } to { transform: none; opacity: 1; } }

html.k52 .ra-complete { position: relative; }
html.k52 .ra-complete__ringtext small,
html.k52 .ra-complete__ringtext b span,
html.k52 .ra-complete__ringtext em,
html.k52 .ra-complete__sub,
html.k52 .ra-stat small { color: var(--k-muted); }
html.k52 .ra-complete__stats { border-top-color: var(--k-plane3); }
html.k52 .ra-complete__stats > i { background: var(--k-plane3); }
html.k52 .ra-celebration { position: absolute; top: 100px; left: 50%; width: 1px; height: 1px; pointer-events: none; }
html.k52 .ra-celebration i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--k-apricot); animation: k52-burst 1.2s ease-out forwards; transform: rotate(calc(var(--i) * 51.4deg)) translateY(-20px); }
html.k52 .ra-celebration i:nth-child(even) { background: var(--k-brick); }
@keyframes k52-burst { to { transform: rotate(calc(var(--i) * 51.4deg)) translateY(-95px); opacity: 0; } }

html.k52 .ra-not-found { min-height: min(70vh, 620px); max-width: 540px; margin: 0 auto; padding: 44px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
html.k52 .ra-not-found__art { position: relative; width: 280px; height: 165px; }
html.k52 .ra-not-found__art strong { position: absolute; left: 0; top: 0; font: 900 8rem/1 var(--k-latin); color: var(--k-plane3); }
html.k52 .ra-not-found__art img { position: absolute; right: 6px; bottom: 0; width: 144px; height: 144px; object-fit: contain; }
html.k52 .ra-not-found h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 1.8rem); }
html.k52 .ra-not-found p { margin: 0 0 12px; color: var(--k-muted); }
html.k52 .ra-not-found .btn { max-width: 320px; }
html.k52 .card.center[role="status"] { background: var(--k-plane1); border-radius: var(--k-card); }
html.k52 .ra-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; }
html.k52 .ra-empty-state > img { width: 96px; height: 96px; object-fit: contain; }
html.k52 .ra-empty-state > h2,
html.k52 .ra-empty-state > p { margin: 0; }
html.k52 .ra-empty-state > .btn { max-width: 320px; margin-top: 6px; }

/* 2026-09-27 K1: 録音(Kokoro)がまだ無い英文の再生ボタン。押せない・薄く(端末の読み上げは使わない) */
html.k52 .ra-play[disabled], html.k52 .ra-play.is-preparing{opacity:.4;cursor:default}

/* web-quickwins: 無料期間終了前の学習記録。 */
html.k52 .ra-trial-ending { display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--k-plane1); }
html.k52 .ra-trial-ending__title { margin:0; font-size:1.15rem; font-weight:900; }
html.k52 .ra-trial-ending__lead,
html.k52 .ra-trial-ending__price,
html.k52 .ra-trial-ending__saving { margin:0; line-height:1.6; }
html.k52 .ra-trial-ending__lead { color:var(--k-muted); font-size:.9rem; }
html.k52 .ra-trial-ending__stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
html.k52 .ra-trial-ending__stats li { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--k-control); background:var(--k-plane2); }
html.k52 .ra-trial-ending__stats b { font:900 1.25rem var(--k-latin); }
html.k52 .ra-trial-ending__stats span { color:var(--k-muted); font-size:.75rem; font-weight:700; }
html.k52 .ra-trial-ending__price { font-weight:900; }
html.k52 .ra-trial-ending__saving { color:var(--k-brick); font-size:.85rem; font-weight:900; }
@media (min-width:700px) { html.k52 .ra-trial-ending__stats { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* SRC100 quiz: choice meanings appear only after answering. */
html.k52 .q-meanings { border-top: 1px solid var(--k-plane3); margin-top: 1rem; padding-top: .75rem; }
html.k52 .q-meanings h3 { font-size: 1rem; margin: 0 0 .5rem; }
html.k52 .q-meaning { border-radius: .5rem; padding: .5rem; margin: .25rem 0; overflow-wrap: anywhere; }
html.k52 .q-meaning.is-correct { background: var(--k-apricot); color: var(--k-on-apricot); border-inline-start: 3px solid var(--k-on-apricot); }

/* Feature-specific AI consent, independent of onboarding. */
.rin-ai-consent { width:min(32rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; box-sizing:border-box; border:1px solid var(--k-faint); border-radius:20px; padding:24px; background:var(--k-paper); color:var(--k-ink); }
.rin-ai-consent::backdrop { background:rgba(0,0,0,.55); }
.rin-ai-consent h2 { font-size:1.35rem; line-height:1.5; margin:0 0 16px; }
.rin-ai-consent p { font-size:1rem; line-height:1.8; }
.rin-ai-consent .btn { margin-top:12px; min-height:48px; width:100%; font-size:1rem; white-space:normal; }
.rin-ai-consent .primary { background:var(--k-brick); color:var(--k-on-brick); }
.rin-ai-consent .ghost { background:transparent; color:var(--k-ink); border:1px solid var(--k-faint); }

.rin-sound-settings label { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0; font-size:1rem; }
.rin-sound-settings input[type=range] { flex:1; min-width:100px; height:44px; accent-color:var(--k-brick); }
.rin-sound-settings input[type=checkbox], .rin-sound-settings input[type=radio] { min-width:24px; min-height:24px; accent-color:var(--k-brick); }
.rin-sound-settings .rin-sound-track, .rin-sound-settings .rin-sound-toggle { min-height:44px; }
.rin-sound-settings fieldset { border:1px solid var(--k-faint); border-radius:16px; padding:12px; margin-top:20px; }
.rin-sound-settings legend { font-weight:700; }
.rin-sound-value { min-width:3.5em; text-align:right; }

.rin-sound-track-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rin-sound-track-row > label { flex:1; min-width:0; margin:8px 0; }
.rin-sound-track-row .btn { flex-shrink:0; min-height:44px; }

/* SRC100 challenge: same costume PNGs, scalable text and native-style 3-column shelf. */
.game100{padding-bottom:24px}.game-links{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 24px}.game-balance{font-size:1.6rem;font-weight:800}.game-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.game-tile{border:1px solid var(--k-line,#d5d1c7);border-radius:16px;padding:10px 6px;text-align:center;min-width:0}.game-tile h3{font-size:.8rem;line-height:1.5;margin:8px 0;overflow-wrap:anywhere}.game-tile p{font-size:.75rem;line-height:1.5}.game-tile .btn{min-height:44px;width:100%;font-size:.75rem;padding:8px 3px;white-space:normal}.game-costume-art{width:100%;max-width:112px;height:112px;object-fit:contain}.game-tile.is-locked .game-costume-art{filter:brightness(0);opacity:.45}.game-lock{font-size:.75rem}.game-wearing{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.game-wearing .game-costume-art{width:96px}.game-confirm{max-width:min(360px,90vw);border:1px solid var(--k-line,#ccc);border-radius:20px;background:var(--k-plane1,#faf8f2);color:var(--k-ink,#282824);padding:24px;text-align:center}.game-confirm::backdrop{background:#0008}.game-confirm .btn{margin:6px;min-height:44px}.game-local-note{font-size:.8rem;margin-top:28px}.game-result{margin-top:18px}.game-entry{margin:16px 0}@media(min-width:900px){.game-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(prefers-color-scheme:dark){.game-tile.is-locked .game-costume-art{filter:brightness(0) invert(1)}}

/* SRC100 AI practice: uses the existing warm/dark palette. */
.ai100{display:grid;gap:1rem;max-width:48rem;margin:auto}
.ai100-field{display:grid;gap:.5rem;font-weight:700}
.ai100 textarea,.ai100 select{box-sizing:border-box;width:100%;padding:.8rem;border:1px solid var(--k-plane3);border-radius:1rem;background:var(--k-plane1);color:var(--k-ink);font:inherit}
.ai100-output{display:grid;gap:1rem;overflow-wrap:anywhere}
.ai100-practiced{display:flex;gap:.6rem;align-items:center;min-height:44px}
.ai100 .btn,.ai100-consent .btn{min-height:48px;white-space:normal}
.ai100-consent{box-sizing:border-box;width:min(94vw,36rem);max-height:90dvh;overflow:auto;border:0;border-radius:1.5rem;padding:1.5rem;background:var(--k-canvas);color:var(--k-ink)}
.ai100-consent::backdrop{background:#0008}
.ai100-consent h2{margin:0 0 1rem}.ai100-consent h3{font-size:1rem;margin:1.25rem 0 .35rem}.ai100-consent p{line-height:1.65;margin:.4rem 0}
.ai100-consent .btn{width:100%;margin-top:.8rem}.ai100-consent .btn:last-child{background:var(--k-plane1);color:var(--k-ink)}

.mouth100{max-width:42rem;margin:1rem auto;display:grid;gap:1rem}
.mouth100-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.mouth100-chips .btn{min-height:44px;min-width:3.5rem;font-family:Georgia,serif;font-size:1.15rem}
.mouth100-chips [aria-pressed=true]{background:var(--k-brick);color:var(--k-on-brick)}
.mouth100 svg{display:block;width:100%;height:auto;border-radius:1rem}
.mouth100 p{margin:0;line-height:1.6}.mouth100-legend{font-size:1rem;color:var(--k-muted)}
.mouth100-caption,.mouth100-status{font-weight:700}.mouth100-caption{margin:.8rem 0!important}
html.k52 .mouth100-chips .btn[aria-pressed=false]{background:var(--k-plane2);color:var(--k-ink);box-shadow:none}
html.k52 .mouth100-chips .btn[aria-pressed=true]{background:var(--k-brick);color:var(--k-on-brick)}
/* SRC100 confirmed post-signup flow, shared light/dark tokens. */
.ob100{max-width:560px;margin:0 auto;padding:16px 4px 32px;color:var(--k-ink);font-family:var(--ra-sans);position:relative;min-height:80vh}.ob100-track{display:flex;gap:5px;margin:4px 20px 28px}.ob100-track span{height:8px;flex:1;background:var(--k-plane3);border-radius:9px}.ob100-track .done{background:#2caf78}.ob100-track .current{background:var(--k-accent,#a43825)}.ob100-title{font-size:clamp(24px,6.3vw,32px);line-height:1.45;margin:24px 0 20px}.ob100-body{font-size:17px;line-height:1.75;margin:8px 0 16px;overflow-wrap:anywhere}.ob100-label{font-size:14px;font-weight:700;margin:12px 0 2px}.ob100-card{padding:22px;border-radius:26px;background:var(--k-plane1);margin:18px 0;line-height:1.7}.ob100-plan{background:var(--k-plane3)}.ob100-plan .ob100-body{font-weight:700;font-size:20px}.ob100-card li{padding:9px 0}.ob100-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ob100-primary,.ob100-secondary{display:block;width:100%;min-height:52px;padding:16px;border:0;border-radius:20px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;margin:10px 0;background:var(--k-plane1);color:var(--k-ink);box-shadow:0 4px 0 rgba(70,40,20,.25);line-height:1.5}.ob100-primary,.ob100-secondary[aria-pressed=true]{background:#a43825;color:#fff8ef;box-shadow:0 5px 0 #681b10}.ob100-primary:disabled,.ob100-secondary:disabled{opacity:.55;cursor:default}.ob100-actions{margin-top:32px;padding:8px 0 max(16px,env(safe-area-inset-bottom));background:var(--k-canvas)}.ob100-legal{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;margin:18px 0}.ob100-legal .ob100-secondary{width:auto;padding:0;font-size:13px;box-shadow:none;background:transparent;margin:0;min-height:44px}.ob100-close{position:absolute;right:0;top:38px;width:44px;min-height:44px;padding:4px;background:transparent;box-shadow:none;font-size:25px}.ob100 input[type=time]{font:inherit;font-size:20px;color:var(--k-ink);background:var(--k-plane1);border:1px solid var(--k-plane3);padding:12px;border-radius:12px;max-width:100%}.ob100-timeline{padding:22px 22px 22px 42px;background:var(--k-plane1);border-radius:24px}.ob100-timeline li{padding:12px 0}.ob100-price{font-weight:700;font-size:23px}.ob100 .rc-coach{grid-template-columns:74px minmax(0,1fr)}.ob100 .rc-bubble{background:var(--k-plane1);color:var(--k-ink);border:0;box-shadow:none;padding:16px;border-radius:20px}.ob100 .rc-bubble__name{display:none}.ob100 .rc-bubble p{font-size:17px;line-height:1.55;font-weight:700}.ob100 .rc-rin{width:74px}.ob100-notice{font-size:15px;line-height:1.7}.ob100 audio{max-width:100%}.ob100 button:focus-visible,.ob100 a:focus-visible,.ob100 input:focus-visible{outline:3px solid var(--k-ink);outline-offset:3px}
.ob100-close{top:0;right:0;z-index:2}.ob100:has(.ob100-close) .ob100-track{margin-right:52px}.ob100-pre input{font:inherit;font-size:20px;padding:14px;border:1px solid var(--k-plane3);border-radius:14px;background:var(--k-plane1);color:var(--k-ink);width:100%;box-sizing:border-box}.ob100-pre .ob100-card,.ob100-pre .ob100-secondary{white-space:pre-line}.ob100-pre svg{display:block;width:100%;height:auto}
.ob100[data-ob100-step=paywall]{padding-top:62px;padding-bottom:132px}.ob100[data-ob100-step=paywall] .ob100-track{display:none}.ob100[data-ob100-step=paywall] .ob100-close{left:0;right:auto;border-radius:50%;background:var(--k-plane3)}.ob100-price-card{background:#ffd29a;color:#29231f;border-radius:28px;padding:24px;margin:20px 0}.ob100-price-card .ob100-price{font-size:30px;margin:14px 0}.ob100-trial-badge{display:inline-block;background:#2caf78;color:#12221a;font-weight:800;padding:5px 14px;border-radius:24px}.ob100-timeline{list-style:none;padding:20px 20px 20px 64px}.ob100-timeline li{position:relative}.ob100-timeline li:before{content:'✓';position:absolute;left:-44px;top:12px;border-radius:50%;width:30px;height:30px;background:#2caf78;color:#fff;display:grid;place-items:center;font-weight:800}.ob100-timeline li:nth-child(2):before{content:'!';background:#ffca36;color:#29231f}.ob100-timeline li:nth-child(3):before{content:'▰';background:#a43825}.ob100[data-ob100-step=paywall] .ob100-actions{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));z-index:5;margin:0}.ob100[data-ob100-step=paywall] .ob100-actions .ob100-primary{margin:0 0 6px}

/* Native comparison: amount stays together; text still wraps at enlarged sizes. */
.ob100-price-card .ob100-price{display:flex;flex-wrap:wrap;gap:5px 10px;align-items:baseline;line-height:1.3}.ob100-price span,.ob100-price small{font-size:16px}.ob100-price strong{font-size:36px;white-space:nowrap}.ob100[data-ob100-step=paywall] .ob100-title{font-size:24px;line-height:1.45}.ob100[data-ob100-step=paywall] .ob100-body{font-size:16px}.ob100-price-card{padding:20px}.ob100-pre .ob100-back{position:absolute;left:0;top:5px;width:32px;min-height:32px;padding:0;background:transparent;box-shadow:none;font-size:30px;margin:0}.ob100-pre .ob100-track{margin-left:40px}.ob100-growth{padding:18px}.ob100-growth>p{font-size:13px;font-weight:700}.ob100[data-ob100-step=assessment] .rc-coach,.ob100[data-ob100-step=assessment]>.ob100-title{display:none}.ob100[data-ob100-step=assessment] .ob100-card{background:transparent;padding:0}.ob100[data-ob100-step=assessment] .ob100-card>p{padding:22px;background:#ffd29a;color:#29231f;border-radius:24px;font-size:22px;font-weight:700}.ob100[data-ob100-step=assessment] .ob100-secondary{text-align:left}.ob100[data-ob100-step=assessment] .ob100-secondary[aria-pressed=true]{background:#29231f;color:#fff8ef}.ob100-plan{background:#ffd29a;color:#29231f}

.ob100 .ob100-refine{font-size:14px;width:auto;min-height:44px;padding:6px 0;background:transparent;box-shadow:none;text-decoration:underline;margin:8px 0;color:var(--k-ink)}

/* 1.2.4(2026-10-13): 「本日の学習を記録しました」は上端の1行の帯に(下端の主ボタン・タブに重ねない。押せない表示) */
html.k52 .study-reward { top: calc(env(safe-area-inset-top, 0px) + 8px); bottom: auto !important; margin-left: 0; padding: 10px 16px; border-radius: 999px; line-height: 1.5; pointer-events: none; }
html.k52 .study-reward strong { margin: 0; font-size: 15px; }