/* クチリピ 1.4.0 web-n7(2026-10-23): 単語と文法の「使う練習」(N7a N7b)とクイズの「言ってみる」(N7c)。
   色は既存の変数(--k-*)だけを使い、明暗は変数の側で切り替わる。ボタンは発音チェックの rp-btn をそのまま使う。 */
.n7-card{background:var(--k-plane1);color:var(--k-ink);border-radius:var(--k-card,22px);padding:16px;box-shadow:var(--k-lift-card);margin:0 0 12px;text-align:left}
.n7-card .n7-card-t{margin:0 0 6px;font-size:1.0625rem;color:var(--k-ink)}
.n7-card .n7-card-p{margin:0 0 12px;line-height:1.7;color:var(--k-ink)}
.n7-card .n7-card-b{min-height:48px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.card .n7-card{box-shadow:none;padding:0;background:none}

.n7-step{font-family:var(--k-latin);font-weight:800;font-size:.8125rem;color:var(--k-muted);margin:0 0 8px;font-variant-numeric:tabular-nums}
.n7-sec{text-align:left}
.n7-sec .n7-h{margin:0 0 6px;font-size:1.125rem}
.n7-sec .n7-h3{margin:14px 0 4px;font-size:1rem}
.n7-lead,.n7-prompt,.n7-hint,.n7-note,.n7-status{line-height:1.7;margin:4px 0 10px}
.n7-prompt{font-weight:700}
.n7-hint,.n7-note{font-size:.8125rem;color:var(--k-muted)}
.n7-status{font-size:.875rem;min-height:1.2em}
.n7-status:empty{margin:0;min-height:0}

.n7-row{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-top:1px solid var(--k-plane3)}
.n7-row:first-of-type{border-top:0}
.n7-row-tag{display:inline-block;font-weight:800;font-size:.8125rem;color:var(--k-on-apricot,#24201F);background:var(--k-apricot,#FFD09A);border-radius:99px;padding:2px 10px;margin:0 0 6px;white-space:pre}
.n7-en{font-weight:700;font-size:1rem;line-height:1.5;overflow-wrap:anywhere;color:var(--k-ink)}
.n7-ja{font-size:.8125rem;line-height:1.6;color:var(--k-muted);overflow-wrap:anywhere;margin-top:2px}
.n7-ctl .rp-btn{min-height:48px}

.n7-field{display:block;margin:6px 0 8px}
.n7-field-l{display:block;font-size:.78rem;font-weight:800;color:var(--k-muted);margin:10px 0 4px}
.n7-field textarea{width:100%;box-sizing:border-box;min-height:84px;border-radius:var(--k-control,16px);border:0;background:var(--k-plane2);color:var(--k-ink);font:inherit;font-size:1rem;line-height:1.5;padding:12px 14px;resize:vertical}
.n7-field textarea:focus{outline:2px solid var(--k-brick);outline-offset:2px}
.n7-field textarea[readonly]{opacity:.7}
.n7-say-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
.n7-say-tools .rp-btn{min-height:48px}
.n7-meter{flex:1;min-width:120px}
.n7-meter:empty{display:none}
.n7-send{min-height:48px}
.n7-chips{margin:0 0 6px}
.n7-chips .chip{min-height:44px}

.n7-scene{background:var(--k-plane2);border-radius:var(--k-control,16px);padding:4px 14px 10px;margin:6px 0 12px}
.n7-scene-t,.n7-form{margin:0;line-height:1.7}
.n7-scene-t{font-weight:700}
.n7-model:empty{display:none}

.n7-result:empty{display:none}
.n7-coach{border-radius:var(--k-card,22px);padding:14px 16px;margin:12px 0 4px;background:#E1F0E5;color:#1F3A2A}
.n7-coach.n7-partly{background:#FFF1DC;color:#4A3210}
.n7-coach.n7-no{background:#FBE3DE;color:#4A1A12}
.n7-coach .n7-coach-h{font-size:.78rem;font-weight:800;opacity:.85}
.n7-coach .n7-coach-v{font-weight:900;font-size:1.0625rem;margin:2px 0 6px}
.n7-coach .n7-coach-tip{margin:4px 0;line-height:1.7}
.n7-coach .n7-coach-l{font-size:.78rem;font-weight:800;margin:10px 0 2px;opacity:.85}
.n7-coach .n7-en{color:inherit}
@media(prefers-color-scheme:dark){
  .n7-coach{background:#25392D;color:#E3F3E8}
  .n7-coach.n7-partly{background:#3D3020;color:#F6E6CC}
  .n7-coach.n7-no{background:#4A2620;color:#F8DDD8}
}
.n7-why{margin:6px 0 10px}

.n7-acts{display:flex;flex-direction:column;gap:10px;margin:14px 0 24px}
.n7-acts .btn{min-height:48px}
.n7-done{text-align:center}
.n7-done h2{margin:6px 0 8px}
.n7-done .n7-acts{text-align:left}
.n7-done-p{color:var(--k-muted)}

/* N7c クイズの答えのあと */
.n7-say1{background:var(--k-plane1);color:var(--k-ink);border-radius:var(--k-card,22px);padding:12px 14px;box-shadow:var(--k-lift-card);margin:12px 0;text-align:left}
.n7-say1-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.n7-say1-t{font-weight:800;font-size:1rem}
.n7-say1-skip{min-height:44px}
.n7-say1-p{margin:4px 0 0;font-size:.8125rem;line-height:1.6;color:var(--k-muted)}
.n7-say1 .n7-row{border-top:0;padding-bottom:4px}
.n7-say-tools .rt-chunky{width:auto;flex:0 0 auto;padding:0 20px;margin-bottom:5px}
@media(min-width:700px){.n7-ctl .rt-chunky{max-width:260px}.n7-acts{max-width:520px}}

/* ---- DESIGN-2.0.md 4.1 の色(10/23 まとめ役): 地=生成り #FFF8EF、主役のボタン・選んでいる印=テラコッタ #A63828(暗い表示はアプリコット #FFD09A)、
   単語・文法の印=グレープ #7B5CF0(棚の地 #E8E1FD・棚の文字 #3B2A8C)。Apple の青は使わない ---- */
:root{--n7-grape:#7B5CF0;--n7-grape-bg:#E8E1FD;--n7-grape-ink:#3B2A8C;--n7-main:#A63828;--n7-main-edge:#730500;--n7-on-main:#FFF8EF}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--n7-grape:#A58CFF;--n7-grape-bg:#2D2650;--n7-grape-ink:#E8E1FD;--n7-main:#FFD09A;--n7-main-edge:#C9935A;--n7-on-main:#24201F}}
:root[data-theme="dark"]{--n7-grape:#A58CFF;--n7-grape-bg:#2D2650;--n7-grape-ink:#E8E1FD;--n7-main:#FFD09A;--n7-main-edge:#C9935A;--n7-on-main:#24201F}
/* 単語・文法の印(グレープ) */
.n7-card-t::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--n7-grape);margin-right:8px;vertical-align:1px}
.n7-step{color:var(--n7-grape-ink,#3B2A8C)}   /* 文字は棚の文字の色(印の色 #7B5CF0 は生成りの上で 4.3:1 のため、丸と線だけに使う) */
.n7-sec .n7-h::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--n7-grape);margin-right:8px;vertical-align:2px}
.n7-row-tag{background:var(--n7-grape-bg,#E8E1FD);color:var(--n7-grape-ink,#3B2A8C)}
.n7-scene{border-left:4px solid var(--n7-grape)}
/* 主役のボタン・選んでいる印(テラコッタ / 暗い表示はアプリコット) */
.n7-card .n7-card-b,.n7-send,.n7-acts .btn.block:not(.ghost){background:var(--n7-main)!important;color:var(--n7-on-main)!important;border-color:var(--n7-main)!important}
.n7-row .rp-b-brass,.n7-say-tools .rp-b-brass{--f:var(--n7-main);--e:var(--n7-main-edge);--ink:var(--n7-on-main)}
.n7-chips .chip.on{background:var(--n7-main)!important;color:var(--n7-on-main)!important}
