/* 元: デザイン依頼_Cowork_20261001/納品/_v4/v4.css（Cowork の v4。v3 の CSS の後に読む）。絵の場所だけアプリに合わせた。 */
/* ドパガキ問題集 デザイン依頼（2026-10-01）v4 の追加部品
   ・v3 の base.css / log-mock.css の上に重ねる。v3 のトークンと部品（.switcher .appnav--log .appnav--quiz .sw-* など）は変えない。
   ・色は DESIGN_現行.md と app に既にある値だけ。新しい色は作らない（カメラの上の半透明の黒は --text の透明度違い）。
   ・丸ゴシック（DpgRounded）は、同梱フォントに全字がある文字列（勉強ログ・時刻の数字・かなの名前）だけに使う。
   ・動きは v4-motion（このファイルの最後）にまとめ、prefers-reduced-motion では止める。 */

:root{
  --ink-72:rgb(41 38 34 / 72%);   /* --text の透明度違い。カメラ・写真の上の文字の下地（明るい映像でも白い文字が 4.5:1 以上） */
  --rec:var(--danger);             /* 2秒の動画を撮っている間の色（既存の --danger） */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-ios:cubic-bezier(.32,.72,0,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --frame-r:44px;                  /* 画面の角の丸み（iPhone の画面の角に合わせる。組み込み時は端末ごとに調整） */
}
.no-nav{padding-bottom:0 !important}
.hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 16px;margin:0 -16px;scroll-snap-type:x proximity;scroll-padding-inline:16px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{flex:none;scroll-snap-align:start}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:var(--r-pill);font-size:14px;font-weight:800;line-height:1.3;white-space:nowrap}
.pill svg{width:18px;height:18px;flex:none}
.pill--ink{background:var(--ink-72);color:#fff}
.pill--soft{background:var(--primary-soft);color:var(--primary)}
.pill--paper{background:var(--surface-2);color:var(--text)}
.pill--gold{background:var(--gold-soft);color:var(--text)}
.chipbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-weight:800;font-size:15px;line-height:1.3;white-space:nowrap;cursor:pointer}
.chipbtn[aria-pressed=true],.chipbtn[aria-checked=true],.chipbtn.is-on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.chipbtn--add{border-style:dashed;border-color:var(--control-border);color:var(--muted)}
.chipbtn svg{width:18px;height:18px}
.sec-h{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:17px;line-height:1.4;font-weight:800}
.sec-h small{font-size:14px;font-weight:700;color:var(--muted)}
.face-img{display:block;width:100%;height:100%;object-fit:cover}
.photo-img{display:block;width:100%;height:100%;object-fit:cover}
.stack{display:flex}
.stack .avatar{box-shadow:0 0 0 2.5px var(--surface),inset 0 0 0 2px var(--text)}
.stack .avatar + .avatar{margin-left:-10px}
.livedot{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--danger);flex:none}
.state-label{margin:0;padding:10px 16px 8px;font-size:14px;font-weight:800;color:var(--muted);background:var(--bg);border-top:1px dashed var(--border)}
.state-label b{color:var(--primary)}

/* ======================================================================
   E 撮る（全画面のカメラ）。映像なので暗くてよい。映像の上の文字・ボタンは必ず下地か影を付ける
   ====================================================================== */
.cam-page{background:var(--text)}
.cam{position:relative;height:844px;overflow:hidden;color:#fff;background:var(--text);isolation:isolate}
.cam__feed{position:absolute;inset:0;z-index:-2}
.cam__feed img{width:100%;height:100%;object-fit:cover}
.cam__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(41 38 34/70%) 0,rgb(41 38 34/45%) 12%,rgb(41 38 34/0) 28%,rgb(41 38 34/0) 50%,rgb(41 38 34/85%) 100%)}
.cam__top{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:start;gap:8px;padding:16px 16px 0}
.cam-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;background:var(--ink-72);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cam-btn svg{width:26px;height:26px}
.cam__time{display:grid;justify-items:center;gap:8px;text-align:center}
.cam__clock{font-family:var(--font-brand);font-weight:800;font-size:var(--lg-clock-cam,60px);line-height:1;letter-spacing:.02em;text-shadow:0 2px 3px rgb(41 38 34/55%),0 0 24px rgb(41 38 34/45%)}
.cam__bottom{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:14px;padding:0 16px 26px}
.cam__mode{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--r-pill);background:var(--ink-72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cam__mode button{min-width:112px;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-pill);background:none;color:#fff;font-weight:800;font-size:16px;cursor:pointer}
.cam__mode button[aria-pressed=true]{background:#fff;color:var(--primary)}
.cam__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:400px}
.cam__side{display:grid;justify-items:center;gap:4px;justify-self:center;font-size:14px;font-weight:800;text-shadow:0 1px 3px rgb(41 38 34/80%)}
.cam__side .lbl{padding:0 8px;border-radius:var(--r-pill);background:var(--ink-72)}
.shutter{position:relative;display:grid;place-items:center;width:96px;height:96px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.shutter__ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 5px #fff,0 0 0 3px var(--frame),0 6px 20px rgb(41 38 34/45%)}
.shutter__disc{width:76px;height:76px;border-radius:50%;background:#fff url("log/fluffy-smile.webp") 52% 42%/132% no-repeat;box-shadow:inset 0 0 0 2px var(--line)}
.shutter__prog{position:absolute;inset:-6px;width:108px;height:108px;transform:rotate(-90deg)}
.shutter__prog circle{fill:none;stroke-width:6;stroke-linecap:round}
.shutter__prog .bg{stroke:rgb(255 255 255/30%)}
.shutter__prog .fg{stroke:var(--rec);stroke-dasharray:320;stroke-dashoffset:var(--dash,320)}
.cam__hint{margin:0;padding:6px 14px;border-radius:var(--r-pill);background:var(--ink-72);font-size:14px;font-weight:700;line-height:1.5;text-align:center}
.cam__tip{display:inline-flex;align-items:center;gap:6px}
.cam__tip svg{width:18px;height:18px}
.cam__rot{position:absolute;right:16px;top:132px}
/* 長押し中（2秒の動画） */
.cam--rec .shutter__disc{width:40px;height:40px;border-radius:12px;background:var(--rec);box-shadow:none}
.cam--rec .shutter__ring{box-shadow:inset 0 0 0 5px #fff,0 6px 20px rgb(41 38 34/45%)}
.cam__recpill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 14px;border-radius:var(--r-pill);background:var(--rec);color:#fff;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.cam__recpill i{width:10px;height:10px;border-radius:50%;background:#fff}
/* 画面のまわりの線（撮る画面）。長押し中は 2秒で一周して赤で埋まる */
.cam-frame{position:absolute;inset:6px;border-radius:calc(var(--frame-r) - 6px);padding:3px;pointer-events:none;z-index:3;
  background:conic-gradient(from 0deg at 50% 50%,var(--rec) calc(var(--p,0) * 1%),rgb(255 255 255/34%) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.cam:not(.cam--rec) .cam-frame{background:rgb(145 102 234/70%)}
/* カメラが使えない端末 */
.cam--fallback{background:var(--surface-2);color:var(--text);height:auto;min-height:620px;padding:16px 16px 32px}
.fallback-box{display:grid;place-items:center;align-content:center;gap:10px;min-height:320px;margin-top:16px;border:2px dashed var(--control-border);border-radius:var(--r-l);background:var(--surface);text-align:center;color:var(--text);text-decoration:none}
.fallback-box img{width:96px}
.fallback-box b{font-size:18px}
/* 横向き（スマホを横にしたとき。2秒の動画のモードで開く）。
   画面の向き（orientation:landscape かつ 高さ 500px 以下）の @media で決める（2026-10-02。以前は JS が body.land を付けるのを待っていたので、向きが変わった最初の1フレームが縦の形だった）。 */
@media (orientation:landscape) and (max-height:500px){
.cam{height:390px}
.cam__scrim{background:linear-gradient(180deg,rgb(41 38 34/72%) 0,rgb(41 38 34/50%) 16%,rgb(41 38 34/0) 34%),linear-gradient(90deg,rgb(41 38 34/0) 0,rgb(41 38 34/0) 62%,rgb(41 38 34/80%) 100%)}
.cam__top{grid-template-columns:52px minmax(0,1fr) 120px;padding:14px calc(20px + env(safe-area-inset-right,0px)) 0 calc(22px + env(safe-area-inset-left,0px))}
.cam__clock{font-size:var(--lg-clock-cam-land,40px)}
.cam__bottom{left:auto;top:0;bottom:0;right:0;width:calc(150px + env(safe-area-inset-right,0px));align-content:center;padding:0 calc(22px + env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) 0;gap:10px}
.cam__row{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:14px;justify-items:center}
.cam__row > :first-child{order:3}
.cam__mode,.cam__hint--sp{display:none}
.cam__land-note{display:inline-flex !important}
.cam__rot{display:none}
.shutter{width:84px;height:84px}
.shutter__disc{width:66px;height:66px}
.shutter__prog{inset:-6px;width:96px;height:96px}
.cam--rec .shutter__disc{width:34px;height:34px}
.cam__lefttop{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
.cam__land-note{display:none}
/* PC（ウェブカメラ）：真ん中の下に操作 */
@media (min-width:1024px){
  .cam{height:900px}
  .cam__bottom{padding-bottom:36px}
  .cam__rot{display:none}
}

/* ======================================================================
   E 送る：撮ったものを大きく見ながら、送り先をタップして送る
   ====================================================================== */
.send-page{background:var(--surface-2)}
.send{position:relative;background:var(--surface-2)}
.send__media{position:relative;height:452px;overflow:hidden;background:var(--text);color:#fff;border-radius:0 0 var(--r-l) var(--r-l)}
.send__media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.send__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(41 38 34/50%) 0,rgb(41 38 34/0) 24%,rgb(41 38 34/0) 50%,rgb(41 38 34/76%) 100%)}
.send__top{position:absolute;z-index:2;left:0;right:0;top:0;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:8px;padding:14px 14px 0 16px}
.send__kind{justify-self:start}
.send-go{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px 0 14px;border:0;border-radius:var(--r-pill);background:var(--btn-grad);color:#fff;font-weight:800;font-size:16px;box-shadow:var(--btn-shadow);cursor:pointer}
.send-go svg{width:24px;height:24px}
.send-go[disabled]{background:var(--ink-72);box-shadow:none;color:#fff}
.send__say{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;padding:10px 12px 10px 14px;border-radius:var(--r-m);background:var(--ink-72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.send__say textarea{grid-column:1/-1;width:100%;min-height:52px;resize:none;border:0;background:none;color:#fff;font:800 19px/1.45 var(--font);padding:0;outline-offset:4px}
.send__say textarea::placeholder{color:#fff;opacity:.8}
.send__saylbl{font-size:14px;font-weight:700}
.send__count{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.send__sheet{position:relative;z-index:3;margin-top:-22px;padding:12px 16px 20px;border-radius:26px 26px 0 0;background:var(--surface-2);display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.send__sheet > *{min-width:0}
.grip{justify-self:center;width:48px;height:5px;border-radius:5px;background:#d8cfc4}
.dest{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dest__row{display:grid;grid-template-columns:32px 44px minmax(0,1fr);gap:12px;align-items:center;min-height:68px;padding:10px 14px 10px 12px;border:1.5px solid var(--line);border-radius:20px;background:var(--surface);cursor:pointer}
.dest__check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--control-border);background:var(--surface);color:transparent}
.dest__check svg{width:18px;height:18px}
.dest__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--text)}
.dest__icon svg{width:24px;height:24px}
.dest__icon img{width:44px;height:44px;border-radius:50%}
.dest__txt b{display:block;font-size:17px;line-height:1.35}
.dest__txt small{display:block;font-size:14px;line-height:1.45;color:var(--muted)}
.dest__row.is-on{border-color:var(--frame);background:var(--primary-soft)}
.dest__row.is-on .dest__check{border-color:var(--primary);background:var(--primary);color:#fff}
.dest__row.is-on .dest__icon{background:var(--surface);color:var(--primary)}
.send__rule{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;margin:0;padding:10px 12px;border-radius:var(--r-m);background:var(--surface);font-size:15px;line-height:1.55}
.send__rule img{width:48px}
.send__bar{position:sticky;bottom:0;z-index:5;padding:10px 16px 18px;background:linear-gradient(180deg,rgb(255 243 230/0),var(--surface-2) 28%)}
.btn--send{min-height:56px;border-radius:var(--r-pill);font-size:18px}
.send__after{margin:6px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.tagchip{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 4px 0 14px;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary);font-weight:800;font-size:15px}
.tagchip button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--primary);cursor:pointer}
.tagchip button svg{width:18px;height:18px}
@media (min-width:1024px){
  .send-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:start;max-width:1120px;padding:24px 32px 40px}
  .send__media{height:auto;aspect-ratio:3/4;border-radius:var(--r-l);position:sticky;top:24px}
  .send__sheet{margin-top:0;border-radius:0;padding:0;background:none}
  .send__sheet .grip{display:none}
  .send__bar{position:static;padding:0;background:none}
  .send{background:none}
}

/* ======================================================================
   F 勉強ログのつながり
   ====================================================================== */
/* ホームの「いま勉強中」（みんなの勉強部屋の いまの枠 への入口） */
.nowbar{display:grid;grid-template-columns:auto minmax(0,1fr) 28px;gap:12px;align-items:center;min-height:72px;padding:12px 14px;border-radius:var(--r-l);background:var(--surface);border:1.5px solid var(--frame);box-shadow:var(--shadow);color:var(--text);text-decoration:none}
.nowbar b{display:block;font-size:16px;line-height:1.4}
.nowbar small{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);line-height:1.5}
.nowbar > svg{width:24px;height:24px;color:var(--primary)}
.nowbar .avatar{width:36px;height:36px}
.examrow{margin-top:12px}
/* 投稿カード v4：写真が主役 */
.pcard{border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.pcard__media{position:relative;aspect-ratio:4/3;background:#e8e0d6}
.pcard__media img{width:100%;height:100%;object-fit:cover}
.pcard__over{position:absolute;left:12px;top:12px;right:12px;display:flex;justify-content:space-between;gap:8px}
.pcard__body{padding:12px 14px 6px}
.pcard__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.pcard__who{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:800;line-height:1.35}
.pcard__who a{color:var(--text);text-decoration:none}
.pcard__meta{font-size:14px;color:var(--muted);line-height:1.5}
.pcard__count{text-align:right;line-height:1.2}
.pcard__count small{display:block;font-size:14px;color:var(--muted)}
.pcard__count b{font-size:22px}
.pcard__text{margin:10px 0 2px;font-size:16px}
.pcard__acts{display:flex;align-items:center;gap:4px;padding:0 6px 6px}
.chip--exam{background:var(--gold-soft);color:var(--text)}
/* 候補（フォロー中が空のとき） */
.sugg{display:grid;gap:12px}
.scard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.scard__ph{width:96px;height:96px;border-radius:var(--r-m);overflow:hidden}
.scard__who{display:flex;align-items:center;gap:8px;font-weight:800}
.scard__who .avatar{width:32px;height:32px}
.scard__meta{margin:2px 0 8px;font-size:14px;color:var(--muted)}
.scard .btn{min-height:44px;padding:6px 16px}
.btn--following{background:var(--surface);border-color:var(--control-border);color:var(--text)}
.empty-note{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;margin:14px 0 18px;padding:12px 14px;border-radius:var(--r-l);background:var(--surface)}
.empty-note img{width:64px}
.empty-note p{margin:0;font-size:15px;line-height:1.6}

/* みんなの勉強部屋 */
.cm-head{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;margin:8px 0 14px}
.cm-head img{width:56px}
.cm-head h1{margin:0;font-size:24px;line-height:1.3}
.cm-head p{margin:0;font-size:15px;color:var(--muted);line-height:1.55}
.nowslot{position:relative;display:grid;gap:12px;padding:16px;border-radius:var(--r-l);background:var(--surface);border:2px solid var(--frame);box-shadow:0 0 0 4px var(--primary-soft),var(--shadow)}
.nowslot__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nowslot__lbl{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--danger)}
.nowslot__time{margin:0;font-size:30px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.nowslot__who{display:flex;align-items:center;gap:10px}
.nowslot__who .avatar{width:40px;height:40px}
.nowslot__who p{margin:0;font-size:16px;line-height:1.45}
.nowslot__who b{color:var(--primary);font-size:20px}
.nowslot__peek{position:absolute;right:12px;top:-30px;width:64px}
.dayband{margin:18px 0 6px}
.dayband__h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font-size:16px;font-weight:800}
.dayband__h small{font-size:14px;color:var(--muted);font-weight:700}
.dayband__cells{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;padding:4px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.dayband__cells a{display:block;height:34px;border-radius:5px;background:var(--line)}
.dayband__cells a.l1{background:var(--primary-soft-2)}
.dayband__cells a.l2{background:#d9c8ec}
.dayband__cells a.l3{background:var(--frame)}
.dayband__cells a.now{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary);position:relative}
.dayband__cells a.future{background:repeating-linear-gradient(135deg,var(--surface) 0 4px,var(--line) 4px 6px)}
.dayband__axis{display:grid;grid-template-columns:repeat(6,1fr);margin-top:4px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.cm-controls{display:grid;gap:10px;margin:16px 0 8px}
.hourblk{position:relative;padding:14px 0 6px 26px}
.hourblk::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:3px;border-radius:3px;background:var(--frame)}
.hourblk::after{content:"";position:absolute;left:1px;top:19px;width:17px;height:17px;border-radius:50%;background:var(--frame);box-shadow:0 0 0 3px var(--surface-2)}
.hourblk--now::after{background:var(--danger)}
.hourblk__h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.hourblk__h small{font-size:14px;font-weight:700;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:grid;gap:6px;align-content:start;min-width:0;color:var(--text);text-decoration:none}
.tile__ph{position:relative;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;background:#e8e0d6}
.tile__ph .pill{position:absolute;left:8px;bottom:8px}
.tile__who{display:flex;align-items:center;gap:6px;min-width:0;font-weight:800;font-size:15px;line-height:1.3}
.tile__who .avatar{width:28px;height:28px}
.tile__who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile__text{margin:0;font-size:15px;line-height:1.5}
.gap-row{display:flex;align-items:center;gap:10px;min-height:48px;margin:4px 0 4px 26px;padding:8px 14px;border-radius:var(--r-m);border:1.5px dashed var(--border);color:var(--muted);font-size:15px;font-weight:700}
.gap-row svg{width:20px;height:20px}
@media (min-width:700px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){
  .cm-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;padding-top:24px}
  .cm-side{position:sticky;top:24px;display:grid;gap:16px}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 人のページ */
.prof{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;margin:10px 0 14px}
.prof .avatar{width:88px;height:88px;background-size:80%}
.prof h1{margin:0 0 4px;font-family:var(--font-brand);font-size:26px;line-height:1.25}
.prof__nums{display:flex;gap:4px;margin:0 -8px}
.prof__nums a{display:inline-flex;align-items:baseline;gap:4px;min-height:44px;align-items:center;padding:0 8px;border-radius:var(--r-s);color:var(--text);text-decoration:none;font-size:15px}
.prof__nums a b{font-size:20px}
.prof__nums a:hover{background:var(--primary-soft)}
.prof__exams{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;font-size:14px;color:var(--muted);font-weight:700}
.grid30__h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:20px 0 10px}
.grid30__h h2{margin:0;font-size:19px}
.grid30__h small{font-size:14px;color:var(--muted);font-weight:700}
.grid30{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border-radius:var(--r-m);overflow:hidden}
.g30{position:relative;display:block;aspect-ratio:1;background:var(--line);color:var(--muted);text-decoration:none}
.g30 img{width:100%;height:100%;object-fit:cover}
.g30__d{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--ink-72);color:#fff;font-size:14px;font-weight:800;line-height:1.4}
.g30--empty{display:grid;place-items:center;background:#f3ece4}
.g30--empty span{font-size:15px;font-weight:800;color:var(--muted)}
@media (min-width:700px){.grid30{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1024px){
  .prof-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start;padding-top:24px}
  .prof-card{position:sticky;top:24px;padding:20px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
  .prof-card .prof{grid-template-columns:1fr;justify-items:start}
  .grid30{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid30__h{margin-top:0}
}

/* フォロー中／フォロワーの一覧 */
.plist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.prow{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:76px;padding:12px 12px 12px 14px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.prow .avatar{width:52px;height:52px}
.prow__name{display:block;font-weight:800;font-size:17px;line-height:1.35;color:var(--text);text-decoration:none}
.prow__sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;font-size:14px;color:var(--muted)}
.prow .btn{min-height:44px;padding:6px 14px;font-size:15px}
@media (min-width:1024px){.plist{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 通知 */
.ngroup{margin:16px 0 0}
.ngroup h2{margin:0 0 8px;font-size:15px;color:var(--muted)}
.nlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.nrow{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:76px;padding:12px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none}
.nrow.is-new{background:var(--primary-soft);border-color:var(--primary-soft-2)}
.nrow.is-new::before{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--coral)}
.nrow__ic{position:relative;width:52px;height:52px}
.nrow__ic .avatar{width:52px;height:52px}
.nrow__badge{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--surface);color:var(--danger)}
.nrow__badge svg{width:18px;height:18px}
.nrow__badge--room{color:var(--primary)}
.nrow__badge--follow{color:var(--primary)}
.nrow__txt{font-size:16px;line-height:1.5}
.nrow__txt small{display:block;font-size:14px;color:var(--muted)}
.nrow__thumb{width:56px;height:56px;border-radius:12px;overflow:hidden}
.nrow .btn{min-height:44px;padding:6px 14px;font-size:15px}
.nrow__room{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--surface-2)}
.nrow__room img{width:40px}

/* 共有の画像 */
.share-cards{display:grid;gap:18px;justify-items:center}
.scard9{position:relative;width:100%;max-width:340px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--surface-2);box-shadow:0 12px 32px rgb(124 75 30/16%);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.scard1{position:relative;width:100%;max-width:340px;aspect-ratio:1;border-radius:22px;overflow:hidden;background:var(--surface-2);box-shadow:0 12px 32px rgb(124 75 30/16%);display:grid;grid-template-columns:1.1fr 1fr}
.sc__top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px}
.sc__logo{font-family:var(--font-brand);font-weight:800;font-size:22px;line-height:1.2;text-decoration:underline;text-decoration-color:var(--frame);text-decoration-thickness:3px;text-underline-offset:5px}
.sc__time{font-family:var(--font-brand);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.sc__ph{position:relative;margin:0 12px;border-radius:16px;overflow:hidden}
.sc__say{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 12px;border-radius:12px;background:var(--ink-72);color:#fff;font-weight:800;font-size:16px;line-height:1.45}
.sc__foot{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;padding:12px 16px 14px}
.sc__foot img{width:48px}
.sc__foot b{display:block;font-size:16px;line-height:1.35}
.sc__foot small{display:block;font-size:14px;color:var(--muted);line-height:1.4}
.scard1 .sc__ph{margin:12px 0 12px 12px}
.scard1 .sc__side{display:grid;align-content:space-between;padding:14px 14px 14px 12px}
.shr-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;max-width:400px}
.shr-acts a{display:grid;justify-items:center;gap:4px;min-height:72px;padding:8px 2px;border-radius:var(--r-m);color:var(--text);text-decoration:none;font-weight:800;font-size:14px;line-height:1.3;text-align:center}
.shr-acts a span.ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surface);border:1px solid var(--line)}
.shr-acts svg{width:22px;height:22px}
@media (min-width:1024px){.share-cards{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;align-items:start}}

/* ======================================================================
   G 画面のまわりの枠線（アプリ・ホーム画面のPWAだけ）
   ====================================================================== */
.appframe{position:fixed;inset:0;pointer-events:none;z-index:100;border-radius:var(--frame-r)}
.appframe--log{box-shadow:inset 0 0 0 2.5px var(--frame)}
.appframe--log::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 18px 3px rgb(145 102 234/45%);opacity:.7}
.af-ring{position:absolute;inset:0;border-radius:inherit;padding:2.5px;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.af-glow{position:absolute;inset:0;border-radius:inherit;filter:blur(7px);opacity:.5}
.af-glow .af-ring{padding:7px}
.af-ring::before{content:"";position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;background:conic-gradient(#f47a91,#f9c65d,#94cf89,#70c5e5,#a092e5,#e495ce,#f47a91)}
.phone .af-ring::before{width:1400px;height:1400px;margin:-700px 0 0 -700px}

/* ======================================================================
   H みんなの解説
   ====================================================================== */
.ex{padding:16px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.ex__h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 4px}
.ex__h h2{margin:0;font-size:19px;line-height:1.4}
.ex__h h2 small{margin-left:6px;font-size:15px;color:var(--muted)}
.ex__rule{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-2);font-size:14px;font-weight:800;color:var(--text)}
.ex__rainbow{height:3px;margin:10px -16px 14px;background:var(--rainbow);opacity:.9}
.ex__order{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.6}
.note{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:14px 14px 10px 10px;border-radius:20px;background:var(--surface);border:1.5px solid var(--line)}
.note + .note,.note + .undo,.undo + .note{margin-top:10px}
.note--top{padding-top:18px;border:2px solid var(--frame);box-shadow:0 0 0 4px var(--primary-soft)}
.note__flag{position:absolute;left:14px;top:-13px;display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--primary);color:#fff;font-size:14px;font-weight:800;line-height:1}
.note__flag svg{width:16px;height:16px}
.note__flag--mine{background:var(--text)}
.vote{display:grid;justify-items:center;align-content:start;gap:2px}
.vote button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);font-size:22px;line-height:1;cursor:pointer}
.vote button[aria-pressed=true]{border-color:var(--primary);background:var(--primary);box-shadow:0 3px 0 #4215a8}
.vote button[aria-pressed=true].down{border-color:var(--text);background:var(--text);box-shadow:none}
.vote__score{display:grid;justify-items:center;margin:2px 0;line-height:1.05}
.vote__score b{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}
.vote__score small{font-size:14px;font-weight:700;color:var(--muted)}
.vote__score.pos b{color:var(--primary)}
.vote__score.neg b{color:var(--danger)}
.note__who{display:flex;align-items:center;gap:8px;margin:2px 0 6px;font-weight:800;font-size:15px}
.note__who .avatar{width:30px;height:30px}
.note__who small{font-weight:700;color:var(--muted);font-size:14px}
.note__body{margin:0;font-size:16px;line-height:1.75}
.note__imgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.note__imgs span{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--line)}
.note__foot{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:4px}
.note__foot .linkbtn{font-size:14px;color:var(--muted)}
.note__foot .linkbtn--danger{color:var(--danger)}
.scorebox{display:grid;justify-items:center;align-content:start;gap:2px;width:56px;padding:10px 0;border-radius:16px;background:var(--surface-2)}
.scorebox b{font-size:24px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}
.scorebox small{font-size:14px;font-weight:700;color:var(--muted)}
.mine-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mine-acts .btn{min-height:44px;padding:6px 16px;font-size:15px}
.btn--danger-line{border-color:var(--danger);color:var(--danger)}
.undo{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:68px;padding:10px 12px 10px 14px;border-radius:20px;background:#f3ece4;border:1.5px dashed var(--control-border)}
.undo__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--muted)}
.undo__ic svg{width:22px;height:22px}
.undo p{margin:0;font-size:15px;font-weight:800;line-height:1.45}
.undo p small{display:block;font-size:14px;font-weight:700;color:var(--muted)}
.undo .btn{min-height:44px;padding:6px 16px;font-size:15px;border-color:var(--primary);color:var(--primary)}
.more-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;margin-top:12px;padding:0 16px;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--surface-2);color:var(--text);font-weight:800;font-size:16px;cursor:pointer;text-align:left}
.more-toggle svg{width:22px;height:22px;color:var(--primary);transition:transform .2s var(--ease-out)}
.more-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.more-toggle--quiet{background:none;border-style:dashed;color:var(--muted)}
.hidden-list{display:grid;gap:10px;margin-top:10px}
.note--hidden{background:var(--surface-2);border-style:dashed;border-color:var(--control-border);grid-template-columns:minmax(0,1fr)}
.note--hidden .note__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.write-cta{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:12px;padding:10px 12px;border-radius:var(--r-m);background:var(--primary-soft)}
.write-cta img{width:48px}
.write-cta p{margin:0;font-size:15px;line-height:1.5}
.write-cta .btn{min-height:44px;padding:6px 16px;font-size:15px}
.guest-vote{display:grid;justify-items:center;gap:4px;width:56px;padding:10px 0;border-radius:16px;background:var(--surface-2)}
.guest-vote b{font-size:22px;font-weight:900}
.guest-hint{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:8px 8px 8px 14px;border-radius:var(--r-m);background:var(--surface-2);font-size:15px;line-height:1.5}
.guest-hint .btn{min-height:44px;padding:6px 14px;font-size:15px;flex:none}
/* ランキングの「解説（今月）」 */
.rk-ex{padding:18px;border:3px solid var(--text);border-radius:4px;background:var(--surface);box-shadow:6px 6px 0 var(--text)}
.rk-ex__h{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:22px;line-height:1.3;font-weight:900}
.rk-ex__h svg{width:28px;height:28px}
.rk-ex__prize{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;margin:8px 0 14px;padding:10px 12px;border-radius:12px;background:#f0ffb5;border:2px solid var(--text);font-size:15px;line-height:1.55}
.rk-ex__prize b{font-size:16px}
.rk-ex__prize svg{width:28px;height:28px}
.rk-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rk-row{display:grid;grid-template-columns:40px 40px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:60px;padding:8px 12px;border:2px solid var(--text);border-radius:10px;background:var(--surface)}
.rk-row .no{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--text);color:#fff;font-weight:900;font-size:17px}
.rk-row .avatar{width:40px;height:40px}
.rk-row b{font-size:17px;line-height:1.3}
.rk-row small{display:block;font-size:14px;color:var(--muted);font-weight:700}
.rk-row em{font-style:normal;font-weight:900;font-size:20px;font-variant-numeric:tabular-nums}
.rk-row--1{background:#d9ff3a;box-shadow:4px 4px 0 var(--text)}
.rk-row--1 small{color:var(--text)}
.rk-note{margin:10px 0 0;font-size:14px;color:var(--muted);line-height:1.6}

/* ======================================================================
   I 音声解説・お知らせの帯
   ====================================================================== */
.audio{position:sticky;top:8px;z-index:6;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 12px;align-items:center;padding:12px 14px;border-radius:20px;background:var(--primary-soft);border:1.5px solid var(--primary-soft-2);box-shadow:0 6px 18px rgb(101 53 181/14%)}
.audio__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff}
.audio__ic svg{width:24px;height:24px}
.audio__txt b{display:block;font-size:16px;line-height:1.35;color:var(--primary)}
.audio__txt small{display:block;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.4}
.audio__bar{grid-column:1/-1;height:6px;border-radius:6px;background:#d9c8ec;overflow:hidden}
.audio__bar i{display:block;height:100%;width:var(--w,30%);border-radius:6px;background:var(--primary)}
.audio__acts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.audio__acts .btn{min-height:48px;padding:6px 12px;font-size:16px}
.audio--stopped{background:var(--surface);border-color:var(--border);box-shadow:none}
.audio--stopped .audio__ic{background:var(--surface-2);color:var(--primary)}
.audio--stopped .audio__txt b{color:var(--text)}
.audio--stopped .audio__bar{background:var(--line)}
.audio--stopped .audio__bar i{background:var(--control-border)}
.eq{display:flex;align-items:flex-end;gap:3px;height:22px}
.eq i{display:block;width:4px;height:100%;border-radius:2px;background:#fff;transform-origin:50% 100%}
.eq i:nth-child(1){transform:scaleY(.55)}.eq i:nth-child(2){transform:scaleY(1)}.eq i:nth-child(3){transform:scaleY(.7)}
.exp{padding:16px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.exp h2{margin:0 0 10px;font-size:19px}
.exp__ans{display:inline-flex;align-items:center;gap:8px;margin:14px 0 8px;padding:6px 12px;border-radius:12px;background:#e8f4e9;color:var(--green);font-weight:800}
.exp p{margin:0 0 10px;font-size:16px;line-height:1.8}
.exp ul{margin:0;padding-left:1.2em;font-size:16px;line-height:1.8}
.setrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.setrow b{display:block;font-size:17px;line-height:1.4}
.setrow small{display:block;margin-top:2px;font-size:14px;color:var(--muted);line-height:1.6}
.setrow--focus{margin:0 -12px;padding:14px 12px;border-radius:var(--r-m);background:var(--primary-soft);border-bottom:0}
.switch{position:relative;display:inline-block;width:60px;height:36px;flex:none}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch i{position:absolute;inset:0;border-radius:36px;background:var(--control-border);transition:background .2s}
.switch i::after{content:"";position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(41 38 34/30%);transition:transform .2s var(--ease-out)}
.switch input:checked + i{background:var(--primary)}
.switch input:checked + i::after{transform:translateX(24px)}
.switch-wrap{display:grid;place-items:center;min-width:60px;min-height:44px}
.set-preview{display:grid;gap:6px;margin-top:10px}
.set-preview p{margin:0;font-size:14px;color:var(--muted)}
/* お知らせの帯：細く1本。本文の流れの中に置き、下の「今日の目安」と同じ間隔 */
.notice{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:4px 10px;align-items:center;min-height:60px;margin:12px 0;padding:8px 6px 8px 12px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--border);box-shadow:inset 4px 0 0 var(--primary)}
.notice__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--primary-soft);color:var(--primary)}
.notice__ic svg{width:20px;height:20px}
.notice p{margin:0;font-size:15px;font-weight:800;line-height:1.45}
.notice p small{display:block;font-size:14px;font-weight:700;color:var(--muted)}
.notice__acts{display:flex;align-items:center;gap:2px}
.notice .linkbtn{padding:0 8px;font-size:15px;white-space:nowrap}
.notice__x{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px;border:0;border-radius:var(--r-pill);background:none;color:var(--muted);font-weight:800;font-size:15px;cursor:pointer}
.notice__x svg{width:18px;height:18px}
@media (max-width:700px){.notice{grid-template-columns:36px minmax(0,1fr)}.notice__acts{grid-column:2;justify-content:flex-end;margin:-2px -2px -4px 0}}
.notice + .today{margin-top:0}
@media (max-width:420px){.notice p small{display:none}}

/* ======================================================================
   動き（G）。prefers-reduced-motion のときは下でまとめて止める
   ====================================================================== */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
.motion .btn,.motion .chipbtn,.motion .dest__row,.motion .vote button,.motion .cam-btn,.motion .shutter,.motion .appnav__item,.motion .send-go,.motion .act{transition:transform .16s var(--ease-spring),background-color .16s ease,border-color .16s ease,color .16s ease}
.motion .btn:active,.motion .chipbtn:active,.motion .dest__row:active,.motion .vote button:active,.motion .cam-btn:active,.motion .send-go:active,.motion .act:active,.motion .appnav__item:active{transform:scale(.96);transition-duration:.08s}
.motion .shutter:active{transform:scale(.9);transition-duration:.1s}
.motion .dest__check{transition:background-color .16s ease,border-color .16s ease}
.motion .dest__row.is-on .dest__check svg{animation:pop .24s var(--ease-spring)}
@keyframes pop{0%{transform:scale(.5)}100%{transform:scale(1)}}
.motion .cam--rec.is-live{animation:rec 2s linear infinite}
.motion .cam--rec.is-live .shutter__prog .fg{animation:recdash 2s linear infinite}
@keyframes rec{from{--p:0}to{--p:100}}
@keyframes recdash{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
.motion .appframe--log.is-live::after{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.motion .appframe--quiz.is-live .af-ring::before{animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.motion .audio:not(.audio--stopped) .eq i{animation:eq .9s ease-in-out infinite}
.motion .audio:not(.audio--stopped) .eq i:nth-child(2){animation-delay:-.3s}
.motion .audio:not(.audio--stopped) .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.motion .livedot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--danger);animation:ping 1.6s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.motion .dayband__cells a.now{animation:nowpulse 2.4s ease-in-out infinite}
@keyframes nowpulse{0%,100%{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary)}50%{box-shadow:0 0 0 2px var(--surface),0 0 0 6px var(--frame)}}
@media (prefers-reduced-motion:reduce){
  .motion *,.motion *::before,.motion *::after{animation:none !important;transition-duration:0s !important}
  .motion .btn:active,.motion .chipbtn:active,.motion .dest__row:active,.motion .vote button:active,.motion .shutter:active,.motion .cam-btn:active,.motion .send-go:active,.motion .act:active,.motion .appnav__item:active{transform:none}
}

/* ページの見出し（戻る＋名前） */
.subhead{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;min-height:60px;margin:4px 0 2px}
.subhead .iconbtn{border-radius:50%}
.subhead__t{margin:0;font-size:22px;line-height:1.3}
.subhead__t.hand{font-size:24px}
/* 送る：スマホは撮ってから送るまで全画面（下のメニューを出さない）。PC は左のメニューあり */
@media (max-width:1023px){.send-page .appnav,.cam-page .appnav{display:none}.send-page,.cam-page{padding-bottom:0}}
.cam-page .appnav{display:none}
@media (min-width:1024px){.cam-page{padding-left:0}}
.cam__side--info{opacity:.95}
.cam__infoic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px dashed rgb(255 255 255/70%);background:var(--ink-72)}
.cam__infoic svg{width:26px;height:26px}
.cam__side--info .lbl{text-align:center;line-height:1.35}
@media (orientation:landscape) and (max-height:500px){
.cam__side--info{display:none}
.cam:not(.cam--rec) .shutter__disc{background:var(--rec);box-shadow:inset 0 0 0 3px #fff}
.cam:not(.cam--rec) .cam__time .pill{display:none}
.cam__land-note{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:1024px){.send .hscroll{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
/* スマホだけ／PC だけ */
@media (max-width:1023px){.pc-only,.cm-side{display:none !important}}
@media (min-width:1024px){.sp-only,.cm-sp{display:none !important}}
.cm-sp{display:grid;gap:0;margin-bottom:6px}
.cm-sp .nowslot{margin-top:34px}
.phead__title{font-weight:800}
.pcard__count b{display:block;line-height:1.2}
.pcard__who a{display:inline-flex;align-items:center;min-height:44px}
.prow__name{display:flex;align-items:center;min-height:44px}
.pcard__head{align-items:center}
.sc__say{background:rgb(41 38 34/76%)}
.dayband__cells span{display:block;height:34px;border-radius:5px;background:var(--line)}
.dayband__cells span.l1{background:var(--primary-soft-2)}
.dayband__cells span.l2{background:#d9c8ec}
.dayband__cells span.l3{background:var(--frame)}
.dayband__cells span.now{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary);position:relative}
.dayband__cells span.future{background:repeating-linear-gradient(135deg,var(--surface) 0 4px,var(--line) 4px 6px)}
.motion .dayband__cells span.now{animation:nowpulse 2.4s ease-in-out infinite}
.pcard__who a{min-width:44px}
.nrow__ic .avatar{display:block}
.nrow--follow{grid-template-columns:52px minmax(0,1fr)}
.nrow--follow .btn{grid-column:2;justify-self:start;margin-top:-4px}
.tile .chip{justify-self:start}
.rk-keep{display:grid;place-items:center;min-height:120px;margin:0 0 18px;padding:16px;border:2px dashed var(--control-border);border-radius:12px;color:var(--muted);font-weight:700;text-align:center;font-size:15px}
.scorebox,.guest-vote,.vote{align-self:start}
.write-cta{grid-template-columns:48px minmax(0,1fr)}
.write-cta .btn{grid-column:1/-1}
@media (min-width:700px){.write-cta{grid-template-columns:48px minmax(0,1fr) auto}.write-cta .btn{grid-column:auto}}

/* ===== G のモック用（スマホの見本の枠・デモ） ===== */
.g-main{max-width:1180px;padding-bottom:40px}
.g-h1{margin:18px 0 6px;font-size:24px;line-height:1.4}
.g-h2{margin:34px 0 6px;font-size:21px;line-height:1.4}
.g-lead{margin:0 0 16px;color:var(--muted);font-size:15px;max-width:760px}
.phones{display:grid;gap:26px;justify-items:center}
@media (min-width:1024px){.phones{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.pfig{margin:0;display:grid;gap:12px;justify-items:center;width:100%}
.phone{position:relative;width:100%;max-width:330px;aspect-ratio:9/18.5;padding:9px;border-radius:calc(var(--frame-r) + 9px);background:#e9e0d6;box-shadow:0 18px 40px rgb(124 75 30/18%),inset 0 0 0 1px #d8cbbd}
.phone__scr{position:relative;height:100%;overflow:hidden;border-radius:var(--frame-r);background:var(--pg,var(--surface-2));display:grid;grid-template-rows:auto minmax(0,1fr) auto;isolation:isolate}
.phone .appframe{position:absolute;inset:9px;z-index:40}
.phone--cam .phone__scr{display:block;background:var(--text)}
.phone--cam .cam__clock{font-size:44px}
.phone--cam .cam-frame{inset:4px;border-radius:calc(var(--frame-r) - 4px)}
.ph-head{display:flex;align-items:center;gap:8px;min-height:60px;padding:10px 14px 4px;border-bottom:1px solid var(--line)}
.ph-head .switcher__name{font-size:19px}
.ph-head--quiz{border-bottom:0;position:relative}
.ph-head--quiz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rainbow)}
.ph-body{padding:12px 14px;overflow:hidden;min-height:0}
.ph-body .nowbar{min-height:60px;padding:8px 10px}
.ph-body .nowbar b{font-size:15px}
.ph-body .pcard__media{aspect-ratio:16/10}
.ph-books{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding:0 6px 12px;border-bottom:12px solid #e9c48f}
.ph-books .book{max-width:none}
.mn{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:6px 6px 12px;background:var(--surface);border-top:1px solid var(--line);border-radius:20px 20px 0 0}
.mn__i{display:grid;place-items:center;min-height:48px;border-radius:14px;color:var(--muted)}
.mn__i svg{width:26px;height:26px}
.mn__i.is-cur{color:var(--primary);background:var(--primary-soft)}
.mn__i--main{justify-self:center;width:52px;height:52px;min-height:0;border-radius:50%;background:var(--btn-grad);color:#fff;margin-top:-18px;box-shadow:0 3px 0 #4215a8}
.mn__i--main.is-cur{background:var(--btn-grad);color:#fff}
.fspec{display:grid;gap:0;margin:0;width:100%;max-width:330px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.fspec div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;padding:8px 12px;font-size:14px;line-height:1.5}
.fspec div + div{border-top:1px solid var(--line)}
.fspec dt{font-weight:800;color:var(--muted)}
.fspec dd{margin:0;font-weight:700}
/* デモ */
.demo-wrap{display:grid;gap:20px;justify-items:center}
@media (min-width:1024px){.demo-wrap{grid-template-columns:330px minmax(0,420px);justify-content:start;align-items:start}}
.demo-ctrl{display:grid;gap:8px;width:100%;max-width:420px}
.demo-ctrl .btn{justify-content:flex-start}
.reduce-t{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-height:52px;margin-top:6px;font-size:15px;font-weight:700;cursor:pointer}
.demo .scr{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--pg);transition:transform .32s var(--ease-ios),opacity .32s var(--ease-ios),background-color .4s ease}
.demo .scr--b{transform:translateX(100%);visibility:hidden;transition:transform .28s var(--ease-ios),visibility 0s linear .28s;box-shadow:-8px 0 24px rgb(41 38 34/12%);grid-template-rows:auto minmax(0,1fr)}
.demo.is-pushed .scr--a{transform:translateX(-30%)}
.demo.is-pushed .scr--b{transform:none;visibility:visible;transition:transform .32s var(--ease-ios),visibility 0s}
.demo .ph-head b{font-size:18px}
.drow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
.drow b{display:block;line-height:1.3}
.drow small{display:block;font-size:14px;color:var(--muted)}
.drow .btn{min-height:44px;padding:6px 14px;font-size:15px}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:12px;overflow:hidden}
.ph-grid > *{aspect-ratio:1;width:100%;object-fit:cover;background:var(--line)}
.ph-scrim{position:absolute;inset:0;z-index:20;background:rgb(41 38 34/45%);opacity:0;visibility:hidden;transition:opacity .24s ease,visibility 0s linear .24s}
.ph-sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;display:grid;gap:10px;padding:10px 14px 22px;border-radius:24px 24px 0 0;background:var(--bg);transform:translateY(100%);visibility:hidden;transition:transform .36s var(--ease-ios),visibility 0s linear .36s}
.ph-sheet b{font-size:17px;text-align:center}
.demo.is-sheet .ph-scrim{opacity:1;visibility:visible;transition:opacity .24s ease}
.demo.is-sheet .ph-sheet{transform:none;visibility:visible;transition:transform .36s var(--ease-ios)}
.sw-mini{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px;border:1.5px solid var(--line);border-radius:18px;background:var(--surface);font-weight:800;font-size:17px;cursor:pointer;color:var(--text)}
.sw-mini.is-on{border-color:var(--frame);background:var(--primary-soft)}
.demo .appframe{inset:9px;transition:opacity .4s ease}
.demo .appframe--quiz{opacity:0}
.demo.is-quiz .appframe--quiz{opacity:1}
.demo.is-quiz .appframe--log{opacity:0}
.demo.is-quiz{--pg:var(--bg)}
.pop svg{animation:heartpop .28s var(--ease-spring)}
@keyframes heartpop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
/* 動きの表 */
.mtable-wrap{border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.mtable{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.mtable th,.mtable td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.mtable thead th{background:var(--surface-2);font-size:14px}
.mtable tbody th{font-weight:800;width:18%}
@media (max-width:760px){
  .mtable thead{display:none}
  .mtable tr{display:block;padding:10px 12px;border-bottom:1px solid var(--line)}
  .mtable th,.mtable td{display:block;padding:2px 0;border:0}
  .mtable tbody th{width:auto;font-size:16px;margin-bottom:4px}
  .mtable td::before{content:attr(data-l) "：";font-weight:800;color:var(--muted);font-size:14px}
}
/* 動きを減らす（デモのスイッチ）。prefers-reduced-motion と同じ見え方 */
.reduce *,.reduce *::before,.reduce *::after{animation:none !important;transition-duration:.12s !important;transition-property:opacity,visibility !important}
.reduce .demo .scr--b,.reduce .demo.is-pushed .scr--a,.reduce .demo .ph-sheet{transform:none !important}
.reduce .demo .scr--b{opacity:0}
.reduce .demo.is-pushed .scr--b{opacity:1}
.reduce .demo .ph-sheet{opacity:0}
.reduce .demo.is-sheet .ph-sheet{opacity:1}
@media (prefers-reduced-motion:reduce){
  .demo .scr--b,.demo.is-pushed .scr--a,.demo .ph-sheet{transform:none !important}
  .demo .scr--b{opacity:0}.demo.is-pushed .scr--b{opacity:1}
  .demo .ph-sheet{opacity:0}.demo.is-sheet .ph-sheet{opacity:1}
}
.switch input{top:-4px;bottom:-4px;left:0;right:0;width:100%;height:auto}
.qbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qbtns .btn{min-height:52px;padding:8px 10px;font-size:15px}
@media (min-width:1024px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.cam__side--info{visibility:hidden}}
/* 動きを減らす設定でも、2秒の長さは分かるように 1秒ごとに2段で埋める */
@media (prefers-reduced-motion:reduce){
  .motion .cam--rec.is-live{animation:rec 2s steps(2,end) infinite !important}
  .motion .cam--rec.is-live .shutter__prog .fg{animation:recdash 2s steps(2,end) infinite !important}
}
.more-list{display:grid;gap:10px;margin-top:10px}
.more-list .note + .note,.more-list .note + .undo,.more-list .undo + .note{margin-top:0}
.note__body,.exp p,.exp li,.tile__text,.pcard__text{word-break:normal;line-break:strict}
.undo p{font-size:16px}

.set-preview__box{padding:10px;border:1.5px dashed var(--border);border-radius:var(--r-m);pointer-events:none}
.set-preview__box .audio{position:static;box-shadow:none}
/* ホームの右の列：いまの枠にみんなの勉強部屋の名前 */
.nowslot__room{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 4px 0 8px;color:var(--primary);font-weight:800;font-size:15px;text-decoration:none}
.nowslot__room svg{width:18px;height:18px}
/* 撮る：横向きの案内は押せる丸に見せない（アイコンと文字だけ） */
.cam__infoic{width:44px;height:44px;border:0;background:none}
.cam__side--info .lbl{background:none;text-shadow:0 1px 3px rgb(41 38 34/90%),0 0 10px rgb(41 38 34/80%)}

/* ======================================================================
   H みんなの解説 第2版（2026-09-30 の追加の依頼）
   👍・点数・👎 をカードの上の行へ。本文と画像はカードの幅いっぱい。
   ====================================================================== */
.ex__legend{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0 0 16px;font-size:14px;font-weight:700;color:var(--muted);line-height:1.6}
.ex__legend span{white-space:nowrap}
.xnote{position:relative;display:grid;gap:10px;padding:10px 14px 4px;border-radius:20px;background:var(--surface);border:1.5px solid var(--line)}
.xnote--top{padding-top:20px;border:2px solid var(--frame);box-shadow:0 0 0 4px var(--primary-soft)}
.ex > .xnote + .xnote,.ex > .undo + .xnote,.ex > .xnote + .undo{margin-top:12px}
.ex > .undo + .xnote--top{margin-top:24px}
.xnote__head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.xnote__head .note__who{margin:0;min-width:0}
.xnote__head .note__who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 自分の投稿の札「あなた」（2026-10-07）。名前が長いときは名前のほうを省略し、札は縮めない。 */
.xnote__head .note__who .xnote__me{flex:none;min-height:24px;padding:0 9px;font-size:13px}
/* 自分の投稿の［外す］の確認（「外しますか？」の行の下に、確認の2つを別の行で） */
.xnote .note__foot .mine-ask{flex:1 1 100%;display:flex;align-items:center;justify-content:flex-end;min-height:44px;margin:0;font-size:14px;font-weight:700}
.xnote .note__foot .mine-acts{flex:0 0 100%;justify-content:flex-end;margin-top:0;padding-bottom:6px}
.xvote{display:flex;align-items:center;gap:2px;flex:none}
.xvote__b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 9px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);font:inherit;font-size:20px;line-height:1;color:var(--text);cursor:pointer}
.xvote__l{display:none;font-size:14px;font-weight:800}
.xvote__b[aria-pressed=true]{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 3px 0 #4215a8}
.xvote__b.down[aria-pressed=true]{border-color:var(--text);background:var(--text);box-shadow:none}
.xvote__score{display:inline-flex;align-items:baseline;justify-content:center;gap:1px;min-width:50px;font-variant-numeric:tabular-nums}
.xvote__score b{font-size:21px;font-weight:900;line-height:1}
.xvote__score small{font-size:14px;font-weight:700;color:var(--muted)}
.xvote__score.pos b{color:var(--primary)}
.xvote__score.neg b{color:var(--danger)}
@media (min-width:700px){.xvote__l{display:inline}.xvote__b{padding:0 14px}.xvote{gap:6px}}
.xscore{display:inline-flex;align-items:baseline;gap:2px;min-height:36px;padding:6px 12px;border-radius:var(--r-pill);background:var(--surface-2);font-variant-numeric:tabular-nums;flex:none}
.xscore b{font-size:19px;font-weight:900;line-height:1}
.xscore b.pos{color:var(--primary)}
.xscore small{font-size:14px;font-weight:700;color:var(--muted)}
.xnote .note__body{margin:0}
.xnote .note__foot{margin-top:-4px}
/* 画像（4枚まで。1枚目を大きく、2枚目からは下の小さな絵で切り替え。拡大は問題の図と同じ） */
.xfig{display:grid;gap:8px;margin:0}
.xfig__main{display:block;width:100%;padding:0;border:1.5px solid var(--line);border-radius:14px;background:var(--surface-2);overflow:hidden;cursor:zoom-in}
.xfig__main img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}
.xfig__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 8px;min-height:44px}
.xfig__thumbs{display:flex;gap:6px}
.xfig__thumbs button{width:48px;height:48px;padding:0;border-radius:10px;border:2px solid var(--line);overflow:hidden;background:var(--line);cursor:pointer}
.xfig__thumbs button[aria-current=true]{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.xfig__thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.xfig__cap{font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}
/* 「ほかの解説」の中は小さなカード（本文は4行まで・画像は小さな絵だけ） */
.xnote--compact .note__body{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.xnote__mini{display:flex;flex-wrap:wrap;gap:6px}
.xnote__mini button{width:64px;height:64px;padding:0;border-radius:10px;border:1.5px solid var(--line);overflow:hidden;background:var(--line);cursor:zoom-in}
.xnote__mini img{display:block;width:100%;height:100%;object-fit:cover}
.xnote__readmore{justify-self:start;margin:-6px 0 0 -12px}
.more-list .xnote + .xnote,.more-list .xnote + .undo,.more-list .undo + .xnote{margin-top:0}
.more-page{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:2px;border-radius:var(--r-m);border:1.5px dashed var(--control-border);background:none;color:var(--primary);font:inherit;font-weight:800;font-size:16px;cursor:pointer}
/* 👎 のあと、次の解説がせり上がる（ロケット鉛筆のように、1つ抜けると次が上に来る） */
.xnote__flag--next{background:var(--text)}
.motion .xnote--rise{animation:xrise .46s var(--ease-ios) both}
.motion .undo--new{animation:xshrink .28s var(--ease-out) both}
@keyframes xrise{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
@keyframes xshrink{from{transform:scaleY(1.8);opacity:0}to{transform:none;opacity:1}}
.replay{display:flex;justify-content:flex-end;margin:0 0 10px}
.replay .btn{min-height:44px;padding:6px 14px;font-size:15px}
/* 自分の解説がいちばん上のときに、ほかの人でいちばん点数が高い解説を1行で見せる */
.xpeek{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 8px 8px 12px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line)}
.xpeek .avatar{width:32px;height:32px}
.xpeek__txt{min-width:0}
.xpeek__txt b{display:block;font-size:15px;line-height:1.4}
.xpeek__txt b em{font-style:normal;color:var(--primary)}
.xpeek__txt span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--muted)}
.xpeek .btn{min-height:44px;padding:6px 14px;font-size:15px}
/* 解説を書く（文章＋画像4枚まで） */
.xcompose{display:grid;gap:12px;padding:16px 14px;border-radius:20px;background:var(--surface);border:2px solid var(--frame)}
.xcompose h3{margin:0;font-size:17px}
.xcompose label.lbl{display:block;margin:0 0 6px;font-size:15px;font-weight:800}
.xcompose textarea{box-sizing:border-box;width:100%;min-height:150px;padding:12px;border-radius:12px;border:1.5px solid var(--control-border);background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.7;resize:vertical}
.xcompose .hint{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.xattach{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.xattach__slot{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--line)}
.xattach__slot img{display:block;width:100%;height:100%;object-fit:cover}
.xattach__rm{position:absolute;top:0;right:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.xattach__rm i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink-72);color:#fff}
.xattach__rm svg{width:16px;height:16px}
.xattach__add{display:grid;place-items:center;align-content:center;gap:2px;aspect-ratio:1;border-radius:12px;border:2px dashed var(--control-border);background:var(--surface-2);color:var(--primary);font:inherit;font-size:14px;font-weight:800;line-height:1.3;cursor:pointer}
.xattach__add svg{width:24px;height:24px}
.xcompose__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.xcompose__acts .btn{min-height:48px}
@media (min-width:700px){.ex__legend span:not(:last-child){display:none}}

/* ======================================================================
   PC の勉強ログ：画像を選んで投稿（2026-09-30 の追加の依頼）
   ====================================================================== */
.pick{display:grid;gap:16px;max-width:880px;margin:0 auto;padding:6px 16px 28px}
.pick__head h1{margin:0;font-size:26px;line-height:1.35}
.pick__head p{margin:4px 0 0;color:var(--muted);font-size:15px;line-height:1.6}
.drop{display:grid;justify-items:center;align-content:center;gap:10px;min-height:320px;padding:28px 20px;border:2.5px dashed var(--frame);border-radius:24px;background:var(--primary-soft);text-align:center}
.drop img{width:96px;height:auto}
.drop b{font-size:20px;line-height:1.4}
.drop .or{font-size:14px;color:var(--muted);font-weight:700}
.drop .btn{min-width:220px}
.drop__keys{margin:4px 0 0;font-size:14px;color:var(--muted);font-weight:700;line-height:1.9}
kbd{display:inline-block;min-width:26px;padding:0 6px;border-radius:6px;border:1.5px solid var(--control-border);border-bottom-width:3px;background:var(--surface);font:inherit;font-size:14px;line-height:1.5;color:var(--text);text-align:center}
.pick__alts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start}
.alt{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;min-height:76px;padding:12px 16px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.alt__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surface-2);color:var(--primary)}
.alt__ic svg{width:24px;height:24px}
.alt b{display:block;font-size:16px;line-height:1.4}
.alt small{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.when-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.when-compare__h{margin:0 0 8px;font-size:15px;font-weight:800}
.rescard-wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:center}
@media (max-width:640px){.rescard-wrap{grid-template-columns:minmax(0,1fr)}}
.rescard{display:grid;gap:6px;aspect-ratio:1;padding:20px;border-radius:24px;background:var(--surface);border:3px solid var(--frame);box-shadow:0 0 0 6px var(--primary-soft)}
.rescard__top{display:flex;align-items:center;gap:8px}
.rescard__top .face{width:34px;height:34px}
.rescard__app{font-size:20px;font-weight:800}
.rescard__time{margin-left:auto;font-family:var(--font-brand);font-size:20px;font-weight:800;color:var(--primary)}
.rescard__exam{margin:10px 0 0;font-size:18px;font-weight:800}
.rescard__big{display:flex;align-items:baseline;gap:6px;margin:0;line-height:1}
.rescard__big b{font-size:72px;font-weight:900;color:var(--primary);font-variant-numeric:tabular-nums}
.rescard__big span{font-size:18px;font-weight:800}
.rescard__rate{margin:4px 0 0;font-size:18px;font-weight:800;color:var(--muted)}
.rescard__who{display:flex;align-items:center;gap:8px;margin-top:auto;font-weight:800;font-size:16px}
.rescard__who .avatar{width:32px;height:32px}
.rescard__why h3{margin:0 0 6px;font-size:18px}
.rescard__why p{margin:0 0 8px;font-size:15px;line-height:1.7}
/* 選んだ画像（横長のスクショなど）は切らずに全体を見せる */
.send--picked .send__media{background:#3a342e}
.send--picked .send__media > img{object-fit:contain;background:#3a342e}

/* ======================================================================
   F おすすめの画面まわり（2026-09-30 の追加の依頼・第3回で決定）
   ====================================================================== */
.why-tag{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:3px 10px;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary);font-size:14px;font-weight:800;line-height:1.5}
.why-tag svg{width:16px;height:16px}
.pmenu{display:grid;margin:0 12px 12px;padding:6px;border-radius:16px;border:1.5px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
.pmenu__i{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;min-height:48px;padding:8px 10px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;font-size:16px;font-weight:700;text-align:left;cursor:pointer}
.pmenu__i svg{width:22px;height:22px;color:var(--muted)}
.pmenu__i small{display:block;font-size:14px;font-weight:700;color:var(--muted)}
.pmenu__i--new{background:var(--primary-soft)}
.pmenu__i--new svg{color:var(--primary)}
.feed-end{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border-radius:var(--r-l);background:var(--surface);border:1.5px solid var(--line)}
.feed-end img{width:72px}
.feed-end h2{margin:0;font-size:18px}
.feed-end p{margin:4px 0 10px;font-size:15px;line-height:1.6}
.feed-end__acts{display:flex;flex-wrap:wrap;gap:8px}
.feed-end__acts .btn{min-height:44px;padding:6px 16px;font-size:15px}
/* 第2版の直し（独立したレビューのあと） */
.xnote__readmore{min-height:44px}
.xpeek__txt .xpeek__who{color:var(--text);font-weight:800;font-size:14px}
.xpeek__txt .xpeek__who em{font-style:normal;color:var(--primary)}
@media (max-width:520px){.xpeek{grid-template-columns:auto minmax(0,1fr)}.xpeek .btn{grid-column:2;justify-self:start}}

/* ======================================================================
   第3回（2026-09-30「おすすめで全て作成」）: 決定の形に
   ====================================================================== */
/* H: 👎 を押さずに次の解説へ */
.nextbar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
.nextbar--two{grid-template-columns:auto minmax(0,1fr)}
.nextbar .btn{min-height:48px}
.nextbar__next{justify-content:space-between}
.nextbar__next svg,.nextbar__prev svg{width:20px;height:20px}
.nextbar__hint{margin:6px 2px 0;font-size:14px;color:var(--muted);line-height:1.5}
.xcopy{display:grid;gap:4px}

/* 回答欄と数字マーク欄（question-types.js が描く）。問題を解く画面（index.html）と勉強計画の模試（dashboard.html・study-dashboard.js）の
   両方で使うので、両方のページが読むここに置く（2026-10-03 に authoring-v6.css から移した。authoring-v6.css は index.html しか読まない）。 */
.qz-response-form input,.qz-response-form select,.qz-response-form textarea{font:inherit;max-width:100%;box-sizing:border-box;min-width:0;padding:.6rem;border:1px solid #8b867c;border-radius:.3rem;background:#fffdf8;color:#26251f}
.qz-response-form{display:grid;gap:.75rem;min-width:0}.qz-response-form label{display:grid;gap:.3rem}
/* 数字マーク欄（2026-10-03）。マスは押すと選ばれ、キーは 390px でも 6列×2段・高さ52px で押しやすくする。 */
.qz-mark__row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}
.qz-mark__label{font-weight:700;min-width:3em;overflow-wrap:anywhere}
.qz-mark__cells{display:flex;flex-wrap:wrap;gap:.4rem}
.qz-mark__cell{display:grid;grid-template-rows:auto 1fr;justify-items:center;width:52px;min-height:60px;padding:.2rem 0;border:2px solid #8b867c;border-radius:.4rem;background:#fffdf8;color:#24231f;font:inherit;cursor:pointer;touch-action:manipulation}
.qz-mark__cell[aria-pressed=true]{border-color:#286cc3;box-shadow:inset 0 0 0 2px #286cc3}
.qz-mark__name{font-size:.8rem;line-height:1.2}
.qz-mark__value{font-size:1.5rem;font-weight:700;line-height:1.3;min-height:1.3em}
.qz-mark__keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem}
.qz-mark__key{min-height:52px;padding:0 .25rem;white-space:nowrap;font:inherit;font-size:1.3rem;font-weight:700;border:1px solid #8b867c;border-radius:.4rem;background:#fffdf8;color:#24231f;cursor:pointer;touch-action:manipulation}
.qz-mark__key--erase{font-size:1rem}
/* 対応付け・並べ替えのドラッグ＆ドロップ（2026-10-09。question-types.js の solveDnd）。上に候補の札、下に欄ごとの枠。390px でも縦に積んで横にはみ出さない。
   色は quiz.css の変数（ダークテーマでも切り替わる）。変数が無いページ用の予備の色を後ろに付けてある。 */
.qz-dnd{display:grid;gap:.75rem;min-width:0}
.qz-dnd [hidden]{display:none!important}
.qz-dnd__hint{margin:0;font-size:.9rem;line-height:1.5;color:var(--text-2,#5b564c)}
.qz-dnd__pool{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;min-height:3.4rem;padding:.6rem;border:1px solid var(--control-border,var(--text-3,#8b867c));border-radius:.6rem;background:var(--surface-2,#f4f1ea)}
.qz-dnd__note{align-self:center;font-size:.9rem;color:var(--text-2,#5b564c)}
.qz-dnd__rows{display:grid;gap:.75rem;min-width:0}
.qz-dnd__row{display:grid;gap:.3rem;min-width:0}
.qz-dnd__label{font-weight:700;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;color:var(--text,#26251f)}
.qz-dnd__slot{display:flex;align-items:center;min-width:0;min-height:3.4rem;padding:.3rem;box-sizing:border-box;border:2px dashed var(--control-border,var(--text-3,#8b867c));border-radius:.6rem}
.qz-dnd__slot.is-filled{padding:0;border-style:solid;border-color:transparent}
.qz-dnd__pool.is-over,.qz-dnd__slot.is-over{border-color:var(--accent,#286cc3);background:var(--accent-soft,#e6effa)}
.qz-dnd__drop{flex:1 1 auto;min-width:0;min-height:44px;padding:0 .5rem;border:0;background:transparent;font:inherit;text-align:left;color:var(--text-2,#5b564c);cursor:pointer}
.qz-dnd__token{max-width:100%;min-width:0;min-height:44px;padding:.5rem .8rem;box-sizing:border-box;border:1.5px solid var(--control-border,var(--text-3,#8b867c));border-radius:.5rem;background:var(--surface,#fffdf8);color:var(--text,#26251f);font:inherit;line-height:1.4;text-align:left;white-space:pre-line;overflow-wrap:anywhere;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.qz-dnd__slot .qz-dnd__token{flex:1 1 auto}
.qz-dnd__token.is-selected{outline:3px solid var(--accent,#286cc3);outline-offset:1px;background:var(--accent-soft,#e6effa)}
.qz-dnd__token.is-dragging{opacity:.35}
.qz-dnd__ghost{position:fixed;z-index:2000;margin:0;pointer-events:none;opacity:.92;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.qz-dnd__back{justify-self:start}
.qz-dnd__native,.qz-dnd__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* CCNA シミュレーション問題の画面（assets/sim-ui.js。2026-10-09 に作り、2026-10-10 に本試験のラボ画面に寄せた）。
   ・左右2つのパネル。左 = タブ「タスク」「ガイドライン」「トポロジ」、右 = 機器ごとのタブ付きターミナル。390px は上にパネル・下にターミナルの縦並び。
   ・幅 720px 以上（広さの判断は画面でなく .qz-sim 自身の幅 = container。全画面でも同じ規則で動く）は左右の2列にし、境目のつまみ（.qz-sim__split）で左の幅を変える。
     左の幅は --sim-left-w（px。sim-ui.js が localStorage 'dpg-sim-split-v1' に覚える）。無ければ全体の 40%。左は 260px 以上、右（ターミナル）は 360px 以上に収める。
   ・出題カードは sim / simlet のときだけ、使える横幅いっぱい（左のメニューを除く。上限 1600px）まで広げる。回答後の解説は右の列にせず、カードの下に出す
     （views.js が sim のときは qz-page--split を付けない。右の列にすると、広げたカードが半分の幅に潰れるため）。作業域の高さは画面に合わせる。
   ・全画面（.is-full）は position:fixed。container-type は .qz-sim 自身に付ける（祖先に付けると fixed の基準がそこになり、画面全体に出せない）。
   ターミナルは暗い地に明るい文字（テーマに依らず読める色を固定）。出力は折り返さず横スクロール。 */
:root .qz-app[data-screen]:has(.qz-sim-host){max-width:1600px}
.qz-sim-host{display:grid;min-width:0;margin:.75rem 0}
.qz-sim{display:grid;gap:.6rem;min-width:0;margin:0;container-type:inline-size}
.qz-sim [hidden]{display:none!important}
.qz-sim__loading{margin:0;padding:.8rem;border:1px dashed var(--control-border,#8b867c);border-radius:.6rem;color:var(--text-2,#5b564c)}
.qz-sim__bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-width:0}
.qz-sim__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:700;color:var(--text-2,#5b564c)}
.qz-sim__full{flex:0 0 auto;min-height:44px;padding:0 .9rem;border:1px solid var(--accent,#286cc3);border-radius:.5rem;background:var(--surface,#fffdf8);color:var(--accent,#286cc3);font:inherit;font-weight:700;cursor:pointer}
.qz-sim.is-full .qz-sim__full{background:var(--accent,#286cc3);color:#fff}
.qz-sim__layout{display:grid;gap:.75rem;min-width:0}
.qz-sim__left,.qz-sim__term{display:grid;gap:.5rem;min-width:0;align-content:start}
.qz-sim__split{display:none}
.qz-sim__tabs,.qz-sim__devtabs{display:flex;flex-wrap:wrap;gap:.35rem}
.qz-sim__tab,.qz-sim__devtab{min-height:44px;padding:0 .9rem;border:1px solid var(--control-border,#8b867c);border-radius:.5rem .5rem 0 0;background:var(--surface-2,#f4f1ea);color:var(--text,#26251f);font:inherit;cursor:pointer}
.qz-sim__tab[aria-selected=true],.qz-sim__devtab[aria-selected=true]{background:var(--accent,#286cc3);border-color:var(--accent,#286cc3);color:#fff;font-weight:700}
/* 機器のタブはドラッグで並べ替える（pointer イベント）。縦のスクロールは効いたまま、横の動きをタブが受ける */
.qz-sim__devtab{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.qz-sim__devtabs.is-sorting,.qz-sim__devtabs.is-sorting .qz-sim__devtab{cursor:grabbing}
.qz-sim__devtab.is-dragging{box-shadow:0 0 0 3px var(--accent-soft,#e6effa),0 4px 10px rgba(0,0,0,.25)}
.qz-sim__tab{padding:0 .65rem} /* 3つ並べて 390px の幅に収める */
.qz-sim__tab:focus-visible,.qz-sim__devtab:focus-visible,.qz-sim__zbtn:focus-visible,.qz-sim__frame:focus-visible,.qz-sim__sendall:focus-within{outline:3px solid var(--accent,#286cc3);outline-offset:2px}
.qz-sim__panelbody{max-height:42vh;overflow:auto;padding:.7rem .8rem;border:1px solid var(--control-border,#8b867c);border-radius:.5rem;background:var(--surface,#fffdf8);color:var(--text,#26251f);min-width:0}
.qz-sim__text{display:grid;gap:.5rem;min-width:0;line-height:1.7;overflow-wrap:anywhere}
.qz-sim__text p,.qz-sim__text ul,.qz-sim__text ol{margin:0}
.qz-sim__tasks,.qz-sim__text ul{padding-left:1.3rem}
.qz-sim__pts{margin-left:.3em;color:var(--text-2,#5b564c);font-size:.85em;white-space:nowrap}
/* 採点後のタスク一覧（2026-10-14）: 番号のあとに記録の結果の丸（できた ✓ は緑・できていない ✕ は赤。結果のカードの丸と同じ色味）。文は丸の右にそろえて折り返す。
   「今の設定で採点してみる」のあと、練習の結果が記録と違うタスクにだけ、丸の横に黄色い札（練習モードの札と同じ色）。sim-ui.js の paintTaskMarks / paintTryTags */
.qz-sim__tasks>li.is-marked{position:relative;padding-left:1.95rem}
.qz-sim__tmark{position:absolute;left:0;top:.18em;display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;font-size:.85rem;font-weight:800;line-height:1;-webkit-text-stroke:.6px currentColor} /* ✓ の字は代替のフォントで細く出るので、縁取りで太らせる */
.qz-sim__tmark.is-ok{background:var(--success-soft,#e8f4e9);box-shadow:inset 0 0 0 2px var(--success,#276846);color:var(--success,#276846)}
.qz-sim__tmark.is-ng{background:var(--danger-soft,#fff0ed);box-shadow:inset 0 0 0 2px var(--danger,#b23336);color:var(--danger,#b23336)}
.qz-sim__trytag{display:inline-block;margin-right:.4em;padding:0 .45rem;border:1px solid var(--dpg-gold,#f6c744);border-radius:999px;background:var(--dpg-gold-soft,#fff0bf);color:var(--dpg-gold-ink,#62420d);font-size:.75rem;font-weight:800;line-height:1.6;white-space:nowrap;vertical-align:.1em}
.qz-sim__sub{margin:0;font-size:.88rem;line-height:1.5;color:var(--text-2,#5b564c)}
/* トポロジ: 上に［−］［100%］［＋］［元の大きさ］、その下に図の枠（はみ出した分は枠の中でスクロール）、その下に機器のボタンの一覧（小さく） */
.qz-sim__panelbody--topo{max-height:none;overflow:visible}
.qz-sim__topo{display:grid;gap:.5rem;min-width:0}
.qz-sim__zoombar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.qz-sim__zbtn{min-width:44px;min-height:44px;padding:0 .8rem;border:1px solid var(--control-border,#8b867c);border-radius:.5rem;background:var(--surface,#fffdf8);color:var(--text,#26251f);font:inherit;font-weight:700;cursor:pointer}
.qz-sim__zbtn:disabled{opacity:.45;cursor:default}
.qz-sim__zoomlevel{min-width:3.6em;text-align:center;font-variant-numeric:tabular-nums;color:var(--text-2,#5b564c)}
.qz-sim__frame{min-width:0;max-height:46dvh;overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain;border:1px solid var(--control-border,#8b867c);border-radius:.5rem;background:#fff}
.qz-sim__stage{position:relative;margin:0 auto}
.qz-sim__diagram{display:block;width:100%;height:auto}
/* 図の機器の上に重ねる透明のボタン（図と同じ .qz-sim__stage の中。拡大しても位置がずれない） */
.qz-sim__hot{position:absolute;margin:0;padding:0;border:0;border-radius:.4rem;background:transparent;cursor:pointer}
.qz-sim__hot:hover,.qz-sim__hot:focus-visible{outline:2px solid var(--accent,#286cc3);outline-offset:1px}
.qz-sim__hot.is-current{box-shadow:0 0 0 2px var(--accent,#286cc3)}
.qz-sim__hot.is-fixed{cursor:not-allowed}
.qz-sim__devices{list-style:none;margin:0;padding:0!important;display:flex;flex-wrap:wrap;gap:.35rem}
.qz-sim__device{min-height:44px;padding:0 .8rem;border:1px solid var(--control-border,#8b867c);border-radius:.5rem;background:var(--surface-2,#f4f1ea);color:var(--text,#26251f);font:inherit;cursor:pointer}
.qz-sim__devtabs{margin-bottom:-.15rem}
.qz-sim__out{margin:0;height:60dvh;min-height:14rem;overflow:auto;padding:.6rem .7rem;box-sizing:border-box;border-radius:0 .5rem .5rem .5rem;background:#1d1f21;color:#e6e4dc;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;tab-size:8;-webkit-overflow-scrolling:touch}
.qz-sim__keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem}
.qz-sim__key{min-height:44px;padding:0 .2rem;border:1px solid var(--control-border,#8b867c);border-radius:.45rem;background:var(--surface,#fffdf8);color:var(--text,#26251f);font:600 .95rem ui-monospace,Menlo,monospace;cursor:pointer;touch-action:manipulation}
.qz-sim__key:disabled{opacity:.5;cursor:default}
.qz-sim__line{display:flex;align-items:center;gap:.4rem;min-width:0;padding:.2rem .6rem;border-radius:.5rem;background:#1d1f21}
.qz-sim__prompt{flex:0 0 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:pre;color:#9fd18b;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.qz-sim .qz-sim__input{appearance:none;-webkit-appearance:none;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;outline:0;background:transparent;color:#e6e4dc;font:16px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.qz-sim .qz-sim__line:focus-within{box-shadow:0 0 0 3px var(--accent,#286cc3)}
/* 全機器に送る: 入力行の下にチェック（同じ行に、オンの間の印と、エラーの案内 .qz-sim__note も並べて場所を取らない）。オンの間は入力行の縁を警告色にして「全機器に送ります」を出す */
.qz-sim__sendrow{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem;min-width:0}
.qz-sim__sendall{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;cursor:pointer;color:var(--text,#26251f)}
.qz-sim__check{width:1.2rem;height:1.2rem;margin:0;accent-color:var(--accent,#286cc3)}
.qz-sim__sendhint{min-width:0;font-size:.85rem;font-weight:700;line-height:1.4;color:var(--danger,#a63c36);overflow-wrap:anywhere}
.qz-sim .qz-sim__line.is-all{box-shadow:0 0 0 2px var(--danger,#a63c36)}
.qz-sim .qz-sim__line.is-all:focus-within{box-shadow:0 0 0 3px var(--danger,#a63c36)}
.qz-sim__note{margin:0;min-width:0;min-height:1.2em;font-size:.88rem;color:var(--danger,#a63c36)}
.qz-sim__foot{display:grid;gap:.6rem;min-width:0}
/* 採点後の練習モード（2026-10-14）: 端末の上に黄色い札、端末の下に紫の「今の設定で採点してみる」と練習の点数。記録（点数・学習記録）は変えない（sim-ui.js） */
.qz-sim__practice{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;margin:0;padding:.45rem .75rem;border:1px solid var(--dpg-gold,#f6c744);border-radius:.5rem;background:var(--dpg-gold-soft,#fff0bf);color:var(--dpg-gold-ink,#62420d);font-size:.88rem;line-height:1.45}
.qz-sim__practicetag{font-weight:800}
.qz-sim__tryrow{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;min-width:0}
.qz-sim__tryscore{min-width:0;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* 採点結果（2026-10-14 にカードへ）: 上に淡い紫の帯で得点。タスクごとに角丸のカード（できなかった = 左に太い赤の線と ❌、できた = 緑の線と ✅ の1行で、開くと解説）。
   できなかったカードの中は「できていないこと」（grade の detail を ' / ' で分けた箇条書き）と「解説」（Markdown。.qz-notes__body）。保存の行も同じカード。
   得点と ✅/❌ は記録した回答から出す（採点後の練習で打っても変わらない）。 */
.qz-sim__result{display:grid;gap:.6rem;min-width:0}
.qz-sim__score{margin:0;padding:.75rem 1rem;border-radius:.75rem;background:var(--accent-soft,#f3edff);color:var(--accent,#6535b5);font-size:1.6rem;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.qz-sim__checks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.qz-sim__card{min-width:0;margin:0;border:1px solid var(--separator,#e5cdb8);border-left:6px solid var(--control-border,#8b867c);border-radius:.75rem;background:var(--surface,#fffdf8);color:var(--text,#26251f);overflow-wrap:anywhere}
.qz-sim__card.is-ng{border-left-color:var(--danger,#b23336)}
.qz-sim__card.is-ok{border-left-color:var(--success,#276846)}
.qz-sim__cardhead{display:flex;align-items:flex-start;gap:.6rem;min-width:0;padding:.65rem .8rem;font-weight:700;line-height:1.55}
.qz-sim__fold>summary{list-style:none;cursor:pointer;min-height:44px;box-sizing:border-box}
.qz-sim__fold>summary::-webkit-details-marker{display:none}
.qz-sim__fold>summary::after{content:"解説";flex:0 0 auto;margin-left:auto;padding:.05rem .6rem;border:1px solid var(--control-border,#8b867c);border-radius:999px;font-size:.78rem;font-weight:600;color:var(--text-2,#65594d)}
.qz-sim__fold[open]>summary::after{content:"閉じる"}
.qz-sim__fold>summary:focus-visible{outline:3px solid var(--accent,#286cc3);outline-offset:-3px;border-radius:.6rem}
.qz-sim__mark{flex:0 0 auto;display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;font-size:.8rem;line-height:1}
.qz-sim__card.is-ng .qz-sim__mark{background:var(--danger-soft,#fff0ed);box-shadow:inset 0 0 0 2px var(--danger,#b23336)}
.qz-sim__card.is-ok .qz-sim__mark{background:var(--success-soft,#e8f4e9);box-shadow:inset 0 0 0 2px var(--success,#276846)}
.qz-sim__tasktext{flex:1 1 auto;min-width:0;padding-top:.1rem}
.qz-sim__taskno{white-space:nowrap}
.qz-sim__cardbody{display:grid;gap:.35rem;min-width:0;padding:0 .9rem .8rem}
.qz-sim__cardsub{margin:.3rem 0 0;font-size:.85rem;font-weight:700;color:var(--text-2,#65594d)}
.qz-sim__misses{margin:0;padding-left:1.2rem;display:grid;gap:.2rem;font-size:.92rem;line-height:1.6}
.qz-sim__cardnote{margin:0;padding:0 .9rem .7rem;font-size:.92rem;line-height:1.6;color:var(--text-2,#65594d)}
.qz-sim__card.is-ng .qz-sim__cardnote{color:var(--danger,#b23336);font-weight:600}
.qz-sim__cmp{border:1px solid var(--control-border,#8b867c);border-radius:.5rem;background:var(--surface,#fffdf8)}
.qz-sim__cmp summary{min-height:44px;padding:0 .7rem;display:flex;align-items:center;cursor:pointer;font-weight:600}
.qz-sim__cols{display:grid;gap:.6rem;padding:.2rem .7rem .7rem;min-width:0}
.qz-sim__cfg{min-width:0}
.qz-sim__cfg h5{margin:0 0 .25rem;font-size:.9rem}
.qz-sim__pre{margin:0;max-height:18rem;overflow:auto;padding:.5rem .6rem;border-radius:.4rem;background:#1d1f21;color:#e6e4dc;font:12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
/* 全画面: 作業域を画面全体に出す（上に小さな見出しと閉じるボタン）。Esc でも戻る（sim-ui.js）。 */
/* 作業域は画面の8割を下回らない（回答前とほぼ同じ高さ）（回答後に全画面を開くと結果の欄が伸びて、図とターミナルが潰れたため。結果は全画面の中をスクロールして見る。2026-10-10） */
.qz-sim.is-full{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:auto minmax(80dvh,1fr) auto;gap:.5rem;margin:0;padding:max(.6rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.6rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));box-sizing:border-box;overflow:auto;overscroll-behavior:contain;background:var(--bg,#fffdf9)}
/* 練習モード（採点後）は端末に札と「今の設定で採点してみる」の2行が増えるので、作業域を画面いっぱい（上の見出しと余白の分 4.5rem を引く）にする。結果は下へスクロールして見る（2026-10-14） */
.qz-sim.is-full.is-practice{grid-template-rows:auto minmax(calc(100dvh - 4.5rem),1fr) auto}
/* 狭い（スマホ・全画面の細い窓）: 上から タブ（タスク・ガイドライン・トポロジ）→ ターミナル → ボタン列 → 入力欄。 */
.qz-sim.is-full .qz-sim__layout{display:flex;flex-direction:column;min-height:0;height:100%}
.qz-sim.is-full .qz-sim__left{flex:0 1 auto;max-height:44%;overflow:auto}
.qz-sim.is-full .qz-sim__topo.has-hot .qz-sim__devices{display:none} /* 狭い全画面では、図の機器を押せるなら一覧は畳んで場所を図とターミナルに回す */
.qz-sim.is-full .qz-sim__term{flex:1 1 0;min-height:50%;grid-template-rows:auto minmax(0,1fr) auto auto auto}
.qz-sim.is-full.is-practice .qz-sim__term{grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto} /* 練習モード: 札 → タブ → 出力 → ボタン列 → 入力欄 → 全機器に送る → 採点してみる */
.qz-sim.is-full .qz-sim__out{height:auto;min-height:0}
.qz-sim.is-full .qz-sim__panelbody{max-height:22dvh}
.qz-sim.is-full .qz-sim__panelbody--topo{max-height:none;overflow:visible}
.qz-sim.is-full .qz-sim__frame{max-height:calc(44dvh - 190px);min-height:120px} /* 狭い全画面: 図の全体が左のパネルに収まる高さ（上のタブ・ボタン列と、見出し・採点ボタンの分を引く） */
.qz-sim.is-splitting,.qz-sim.is-splitting *{cursor:col-resize!important;user-select:none!important;-webkit-user-select:none!important}
@container (min-width:720px){
  /* 左 | つまみ | 右。左の幅は --sim-left-w（無ければ全体の 40%）を 260px 以上・(全体 − つまみ 14px − 右の最小 360px) 以下に収める。
     作業域の高さは画面に合わせる（下端の入力欄が画面に収まる。上の見出しと余白の分を引く）。 */
  .qz-sim__layout{grid-template-columns:clamp(260px,var(--sim-left-w,40cqw),calc(100cqw - 374px)) 14px minmax(0,1fr);gap:0;align-items:stretch;height:clamp(520px,calc(100dvh - 7.5rem),900px)}
  .qz-sim__left{display:flex;flex-direction:column;gap:.4rem;min-height:0;height:100%}
  .qz-sim__tabs{flex:0 0 auto}
  .qz-sim__panelbody{flex:1 1 0;min-height:0;max-height:none}
  .qz-sim__panelbody--topo{display:flex;flex-direction:column;overflow:hidden;padding:.5rem}
  .qz-sim__topo{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  .qz-sim__zoombar,.qz-sim__devices{flex:0 0 auto}
  .qz-sim__frame{flex:1 1 0;min-height:0;max-height:none}
  .qz-sim__device{min-height:34px;padding:0 .7rem;font-size:.9rem}
  .qz-sim__split{display:block;position:relative;cursor:col-resize;touch-action:none;border-radius:8px}
  .qz-sim__split::before{content:"";position:absolute;top:0;bottom:0;left:6px;width:2px;border-radius:1px;background:transparent;transition:background .15s ease}
  .qz-sim__split:hover::before,.qz-sim__split:focus-visible::before,.qz-sim.is-splitting .qz-sim__split::before{background:var(--accent,#286cc3)}
  .qz-sim__split:focus-visible{outline:3px solid var(--accent,#286cc3);outline-offset:-2px}
  .qz-sim__grip{position:absolute;top:50%;left:3px;width:8px;height:44px;margin-top:-22px;border-radius:4px;background:var(--separator,#e9d6c2);box-shadow:inset 2px 0 0 var(--surface,#fffdf8),inset -2px 0 0 var(--surface,#fffdf8)}
  .qz-sim__split:hover .qz-sim__grip,.qz-sim.is-splitting .qz-sim__grip{background:var(--accent,#286cc3)}
  .qz-sim__term{display:flex;flex-direction:column;min-height:0;height:100%}
  .qz-sim__devtabs,.qz-sim__keys,.qz-sim__line,.qz-sim__sendrow,.qz-sim__practice,.qz-sim__tryrow{flex:0 0 auto}
  .qz-sim__cardbody,.qz-sim__cardnote{padding-left:3.15rem} /* 本文をタスクの文の頭にそろえる（見出しの左 .8rem ＋ 丸 1.75rem ＋ 間 .6rem） */
  .qz-sim__sendall{min-height:36px}
  .qz-sim__out{flex:1 1 0;min-height:0;height:auto}
  .qz-sim__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qz-sim.is-full .qz-sim__layout{display:grid;height:100%}
  .qz-sim.is-full .qz-sim__left{max-height:none;overflow:visible}
  .qz-sim.is-full .qz-sim__term{display:flex}
  .qz-sim.is-full .qz-sim__panelbody{max-height:none}
  .qz-sim.is-full .qz-sim__panelbody--topo{overflow:hidden}
  .qz-sim.is-full .qz-sim__topo.has-hot .qz-sim__devices{display:flex}
  .qz-sim.is-full .qz-sim__frame{max-height:none}
}
@media (prefers-reduced-motion:reduce){.qz-sim__split::before{transition:none}}