/* yumizu design tokens and shared parts (quiz + learning home).
   Type: BIZ UDPGothic（教材向けUDフォント）で本文、Lexendで数字と欧文。 */
:root{
 --mist:#eef3f8;--paper:#fff;--paper-2:#f6f9fc;--ink:#14233b;--ink-2:#4a5a73;--ink-3:#7f8da3;
 --line:#dbe3ee;--line-2:#c6d2e1;--blue:#1666b1;--blue-deep:#0f4c8a;--blue-soft:#e6f0fb;
 --aqua:#3bbfc8;--aqua-soft:#e2f6f7;--ok:#0f9f78;--ok-soft:#e1f5ee;--ok-ink:#0b7a5c;
 --ng:#e04a5f;--ng-soft:#fdecef;--ng-ink:#b8293d;--mark:#ffd970;--shadow:0 1px 0 rgba(20,35,59,.04),0 10px 30px -12px rgba(20,35,59,.18);
 --jp:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI",Meiryo,sans-serif;
 --num:"Lexend","BIZ UDPGothic","Hiragino Sans",system-ui,sans-serif;
 --fs:17px;--bar-h:56px;--dock-h:76px;
 color-scheme:light;
}
:root[data-theme="night"]{
 --mist:#0d1626;--paper:#141f33;--paper-2:#18253c;--ink:#e6edf7;--ink-2:#a9b7cc;--ink-3:#7385a0;
 --line:#25344d;--line-2:#33456a;--blue:#6aa8ff;--blue-deep:#9cc5ff;--blue-soft:#1b2d4b;
 --aqua:#46d0d8;--aqua-soft:#143439;--ok:#3ccf9f;--ok-soft:#123a30;--ok-ink:#6fe2bc;
 --ng:#ff6b7d;--ng-soft:#40202a;--ng-ink:#ff9aa7;--mark:#8a6d1c;--shadow:0 10px 30px -12px rgba(0,0,0,.6);color-scheme:dark;
}
:root[data-theme="sepia"]{
 --mist:#efe8da;--paper:#fbf7ee;--paper-2:#f5efe2;--ink:#2e2a23;--ink-2:#5f574a;--ink-3:#8c8272;
 --line:#e2d7c3;--line-2:#d3c5ab;--blue-soft:#ece4d2;--aqua-soft:#e6efe6;
}
:root[data-font="s"]{--fs:15.5px}:root[data-font="l"]{--fs:19px}:root[data-font="xl"]{--fs:21px}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--ink);font:400 15px/1.7 var(--jp);-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 0}
button{font:inherit;color:inherit;letter-spacing:inherit}
a{color:var(--blue)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--aqua) 70%,transparent);outline-offset:2px;border-radius:10px}
.yz-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.yz-num{font-family:var(--num);font-feature-settings:"tnum" 1;letter-spacing:0}

/* ───────── App bar ───────── */
.yz-bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.yz-bar-in{max-width:1240px;margin:0 auto;height:var(--bar-h);display:flex;align-items:center;gap:4px;padding:0 6px}
.yz-ibtn{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:12px;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.yz-ibtn:hover{background:var(--paper-2);color:var(--ink)}
.yz-ibtn:active{background:var(--blue-soft)}
.yz-ibtn[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue)}
.yz-ibtn svg{width:22px;height:22px}
.yz-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:none;padding:4px 6px;border-radius:10px;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.yz-title:hover{background:var(--paper-2)}
.yz-title-mode{font-weight:700;font-size:14.5px;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yz-title-meta{display:flex;align-items:center;gap:10px;font:500 12.5px/1.2 var(--num);color:var(--ink-3)}
.yz-title-meta b{color:var(--ink);font-weight:600}
.yz-title-meta .ok{color:var(--ok-ink)}.yz-title-meta .ng{color:var(--ng-ink)}
.yz-title-meta .yz-clock{display:inline-flex;align-items:center;gap:3px}
.yz-title-meta svg{width:12px;height:12px}
.yz-progress{height:3px;background:var(--line);position:relative;overflow:hidden}
.yz-progress>span{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--aqua);border-radius:0 3px 3px 0;transition:width .5s cubic-bezier(.2,.8,.2,1)}

.yz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:16px;border:0;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s,transform .08s,box-shadow .15s}
.yz-btn:active{transform:translateY(1px)}
.yz-btn svg{width:20px;height:20px}
.yz-btn-primary{flex:1;background:var(--blue);color:#fff;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--blue) 80%,transparent)}
:root[data-theme="night"] .yz-btn-primary{color:#07172d}
.yz-btn-primary:hover{background:var(--blue-deep)}
:root[data-theme="night"] .yz-btn-primary:hover{background:#8dbcff}
.yz-btn-ghost{background:var(--paper-2);color:var(--ink);border:1px solid var(--line-2)}
.yz-btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.yz-btn-quiet{background:none;color:var(--ink-2);padding:0 14px;min-height:44px;font-weight:600;font-size:14px}
.yz-btn-quiet:hover{color:var(--blue)}
.yz-empty{max-width:520px;margin:0 auto;padding:64px 22px;text-align:center;display:grid;gap:14px;justify-items:center}
.yz-empty h1{margin:0;font-size:20px}
.yz-empty p{margin:0;color:var(--ink-2)}
.yz-loading{display:grid;place-items:center;min-height:60vh;color:var(--ink-3);font-size:14px}
.yz-loading::before{content:"";width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--aqua);animation:yz-spin .8s linear infinite;margin-bottom:12px}
@keyframes yz-spin{to{transform:rotate(360deg)}}
.yz-toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + 20px);transform:translate(-50%,8px);z-index:90;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:12px;font-size:13.5px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.yz-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (min-width:1100px){.yz-toast{bottom:28px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}