/* ホームの「作る」の帯・本棚の点線の「＋ 作る」・購入シート（commission-screens-20260924・Cowork）
   index.html の theme-dpg.css の後に読む。views.js / app.js のロジックと data-role は変えない。
   ・帯：カードと同じ幅に広げ、3入口を線のアイコンに（絵文字は隠す。読み上げは元から aria-hidden）
   ・購入シート：スマホは下から出るシート、PC は中央のダイアログ。後ろは暗くする（box-shadow の幕）。 */

/* ---------- 帯：ヘッダーの右の余白（設定ボタンの列）まで広げる ---------- */
:root[data-quiz-theme=paper] .qz-header .qz-home-cards,
:root[data-quiz-theme=paper] .qz-header .dpg-home-create{margin-right:-64px}
:root[data-quiz-theme=paper] .dpg-home-create{position:relative;overflow:hidden;border:1.5px solid #b89ce6;background:linear-gradient(110deg,#f6f1ff 0%,#f3edff 55%,#efe6ff 100%);box-shadow:0 3px 0 #d9c8f5}
:root[data-quiz-theme=paper] .dpg-home-create::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#ffffff99 0,#fff0 70%);pointer-events:none}
:root[data-quiz-theme=paper] .dpg-home-create__mascot{width:64px;height:64px}
:root[data-quiz-theme=paper] .dpg-home-create__mark{background:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%);box-shadow:0 2px 0 #4215a8}
:root[data-quiz-theme=paper] .dpg-home-create__label{font-size:22px;letter-spacing:.01em}
:root[data-quiz-theme=paper] .dpg-home-create__sub{font-size:13px}
:root[data-quiz-theme=paper] .dpg-home-create__actions{padding:8px;gap:8px;background:#ffffffcc}
:root[data-quiz-theme=paper] .dpg-home-create__action{position:relative;gap:6px;padding:10px 4px 9px;border:1px solid #e6dcf6;border-radius:12px;background:#fff;font-size:13px;color:#3a2a63}
:root[data-quiz-theme=paper] .dpg-home-create__action:hover{border-color:#b89ce6;background:#fdfbff}
:root[data-quiz-theme=paper] .dpg-home-create__icon{font-size:0;width:26px;height:26px;background:#6535b5;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
[data-role="home-create-photo"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 8h4l2-3h6l2 3h4v12H3z'/%3E%3Ccircle cx='12' cy='13.5' r='3.8'/%3E%3C/svg%3E")}
[data-role="home-create-pdf"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 2.8h8.5L19 7.3V21H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M8.6 16.5v-4h1.6a1.2 1.2 0 0 1 0 2.4H8.6M12.4 16.5v-4h1a2 2 0 0 1 0 4zM16.4 16.5v-4h1.8M16.4 14.6h1.5' stroke-width='1.4'/%3E%3C/svg%3E")}
[data-role="home-create-paste"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3h6v3H9zM8.5 11h7M8.5 14.5h7M8.5 18h4'/%3E%3C/svg%3E")}
:root[data-quiz-theme=paper] .dpg-home-create__quota{display:inline-flex;justify-self:center;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:#ffffffb3;font-size:12px;font-weight:700;color:#5b4a86}
/* 上限のとき（3入口が無い）：帯を押すと購入シートが開くことを「›」で示す */
:root[data-quiz-theme=paper] .dpg-home-create:not(:has(.dpg-home-create__actions)) .dpg-home-create__title-btn::after{content:"";flex:none;width:12px;height:12px;margin-left:auto;margin-right:6px;border-top:3px solid #6535b5;border-right:3px solid #6535b5;transform:rotate(45deg)}
@media(min-width:1000px){
  :root[data-quiz-theme=paper] .dpg-home-create{padding:18px 22px}
  :root[data-quiz-theme=paper] .dpg-home-create__mascot{width:104px;height:104px}
  :root[data-quiz-theme=paper] .dpg-home-create__label{font-size:28px}
  :root[data-quiz-theme=paper] .dpg-home-create__quota{justify-self:start}
  :root[data-quiz-theme=paper] .dpg-home-create__action{padding:12px 8px;min-width:112px}
}
@media(max-width:620px){
  :root[data-quiz-theme=paper] .qz-header .qz-home-cards,
  :root[data-quiz-theme=paper] .qz-header .dpg-home-create{margin-right:-56px}
}

/* ---------- 本棚の点線の「＋ 作る」 ---------- */
:root[data-quiz-theme=paper] .dpg-add[data-role="shelf-create-deck"]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:2px dashed #b89ce6;background:#faf7ff;color:#4f22a0;font-weight:800}
:root[data-quiz-theme=paper] .dpg-add[data-role="shelf-create-deck"]::before{content:"";width:48px;height:48px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236535b5' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 2px 6px rgb(101 53 181 / 18%)}
:root[data-quiz-theme=paper] .dpg-add[data-role="shelf-create-deck"]:hover{background:#f3edff}

/* ---------- 購入シート ---------- */
/* 幕（D-3・D-8）。qz-purchase の box-shadow の見た目だけの暗さでは下の要素にクリックが
   抜けてしまうので、実体の要素を敷いて押すと閉じる（views.js が onclick を付ける）。 */
:root[data-quiz-theme=paper] .qz-purchase-scrim{position:fixed;inset:0;background:rgb(41 38 34 / 45%);z-index:59}
:root[data-quiz-theme=paper] .qz-solve-home>.qz-purchase,
:root[data-quiz-theme=paper] .qz-purchase{
  position:fixed;z-index:60;left:0;right:0;bottom:0;margin:0;max-height:min(92dvh,900px);overflow:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-content:start;
  padding:28px 20px calc(18px + env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;background:#fffcf7;
  box-shadow:0 -10px 30px rgb(41 38 34 / 18%)
}
:root[data-quiz-theme=paper] .qz-purchase>*{grid-column:1/-1;margin:0}
:root[data-quiz-theme=paper] .qz-purchase::before{content:"";position:absolute;left:50%;top:10px;width:44px;height:5px;margin-left:-22px;border-radius:99px;background:#dccfc2}
/* ドパガキくん（右上から応援） */
:root[data-quiz-theme=paper] .qz-purchase::after{display:block;content:"";position:absolute;right:10px;top:12px;width:78px;height:78px;background:url("screens/cheer.webp?v=20260925screens1") center/contain no-repeat;pointer-events:none}
:root[data-quiz-theme=paper] .qz-purchase__title{padding-right:84px;font-size:22px;line-height:1.4;font-weight:900;color:#292622}
/* ?purchase=1 の直リンクで起動直後に開いたときだけ、見出しへの programmatic focus の
   輪を消す。操作前はブラウザが :focus-visible をキーボード操作と区別できないため
   （app.js の purchaseBootOpen）。ボタン操作で開いたとき・キーボード操作のときは
   通常どおり :focus-visible の輪が出る。 */
:root[data-quiz-theme=paper] .qz-purchase[data-boot-open="true"] .qz-purchase__title:focus-visible{outline:none}
/* いまの使用量（D-1）。「なぜ今このシートが出たか」を帯・ほかのこと…と同じ文言で一目にする。 */
:root[data-quiz-theme=paper] .qz-purchase__usage{display:inline-flex;margin:0;padding:3px 12px;border-radius:999px;background:#f3edff;font-size:12px;font-weight:700;color:#4f22a0}
:root[data-quiz-theme=paper] .qz-purchase__lead{padding-right:84px;font-size:13px;line-height:1.7;color:#65594d}
/* 3つのプランの量（ul）を横に並べて比べる */
:root[data-quiz-theme=paper] ul.qz-purchase__lead{padding:0!important;margin:4px 0 0!important;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
:root[data-quiz-theme=paper] ul.qz-purchase__lead li{padding:9px 8px;border:1px solid #eadccd;border-radius:12px;background:#fff;font-size:12px;line-height:1.5;color:#3d352c;font-weight:700}
:root[data-quiz-theme=paper] ul.qz-purchase__lead li:first-child{background:#f7f3ee;color:#65594d}
:root[data-quiz-theme=paper] ul.qz-purchase__lead li:last-child{border-color:#c9b3f0;background:#faf7ff;color:#4f22a0}
:root[data-quiz-theme=paper] ul.qz-purchase__lead+.qz-purchase__lead{padding-right:0}
:root[data-quiz-theme=paper] .qz-purchase__consent{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid #eadccd;border-radius:14px;background:#fff;font-size:13px;line-height:1.6;color:#292622;font-weight:700;cursor:pointer}
:root[data-quiz-theme=paper] .qz-purchase__consent:has(input:checked){border-color:#6535b5;background:#faf7ff}
:root[data-quiz-theme=paper] .qz-purchase__consent input{flex:none;width:22px;height:22px;margin:0;accent-color:#6535b5}
/* 2枚のプラン：押せるのは同意のあとだけ（views.js のまま） */
:root[data-quiz-theme=paper] .qz-purchase__plans{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
:root[data-quiz-theme=paper] .qz-purchase__plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:96px;padding:14px 14px 12px;border:1.5px solid #eadccd;border-radius:16px;background:#fff;color:#292622;text-align:left;box-shadow:0 3px 0 #eadccd}
:root[data-quiz-theme=paper] .qz-purchase__plan.qz-btn--primary{border-color:#8f6ad6;background:#faf7ff;box-shadow:0 3px 0 #c9b3f0}
:root[data-quiz-theme=paper] .qz-purchase__plan.qz-btn--primary::before{content:"おすすめ";position:absolute;right:10px;top:-11px;padding:1px 10px;border-radius:999px;background:#6535b5;color:#fff;font-size:12px;font-weight:800;line-height:1.7}
:root[data-quiz-theme=paper] .qz-purchase__plan-label{font-size:13px;font-weight:700;color:#65594d;line-height:1.4;text-wrap:balance}
:root[data-quiz-theme=paper] .qz-purchase__price{font-size:24px;font-weight:900;line-height:1.3;color:#292622}
/* プラン別のAIの回数（D-2）。「読み取り」の回数だけを小さく添える。 */
:root[data-quiz-theme=paper] .qz-purchase__plan-ai{font-size:11px;font-weight:700;color:#65594d;line-height:1.4}
:root[data-quiz-theme=paper] .qz-purchase__plan.qz-btn--primary .qz-purchase__price{color:#4f22a0}
:root[data-quiz-theme=paper] .qz-purchase__plan:not(:disabled){cursor:pointer}
:root[data-quiz-theme=paper] .qz-purchase__plan:not(:disabled).qz-btn--primary{background:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%);border-color:transparent;box-shadow:0 3px 0 #4215a8}
:root[data-quiz-theme=paper] .qz-purchase__plan:not(:disabled).qz-btn--primary .qz-purchase__price,
:root[data-quiz-theme=paper] .qz-purchase__plan:not(:disabled).qz-btn--primary .qz-purchase__plan-label,
:root[data-quiz-theme=paper] .qz-purchase__plan:not(:disabled).qz-btn--primary .qz-purchase__plan-ai{color:#fff}
:root[data-quiz-theme=paper] .qz-purchase__plan:not(:disabled).qz-btn--primary::before{background:#fff;color:#4f22a0}
:root[data-quiz-theme=paper] .qz-purchase__plan:not(:disabled):not(.qz-btn--primary){border-color:#6535b5;box-shadow:0 3px 0 #c9b3f0}
:root[data-quiz-theme=paper] .qz-purchase__plan:disabled{opacity:1;cursor:not-allowed}
:root[data-quiz-theme=paper] .qz-purchase:has([data-role="purchase-consent"]:not(:checked)) .qz-purchase__plans::after{content:"上の確認にチェックを入れると、選べるようになります。";grid-column:1/-1;margin-top:-2px;font-size:12px;color:#65594d;text-align:center}
:root[data-quiz-theme=paper] .qz-purchase__note{font-size:12px;line-height:1.7;color:#65594d}
:root[data-quiz-theme=paper] .qz-purchase .qz-btn-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
:root[data-quiz-theme=paper] .qz-purchase .qz-btn-row .qz-btn{min-height:44px;font-weight:800}
:root[data-quiz-theme=paper] .qz-purchase [data-role="enter-code"]{color:#6535b5;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0 4px}
:root[data-quiz-theme=paper] .qz-purchase [data-role="purchase-close"]{padding:8px 22px;border:1.5px solid #ad8973;border-radius:12px;background:#fff;color:#292622}
@media(min-width:760px){
  :root[data-quiz-theme=paper] .qz-solve-home>.qz-purchase,
  :root[data-quiz-theme=paper] .qz-purchase{left:50%;right:auto;top:50%;bottom:auto;width:min(720px,calc(100vw - 48px));max-height:calc(100dvh - 64px);transform:translate(-50%,-50%);padding:32px 34px 24px;border-radius:28px;gap:14px;box-shadow:0 20px 50px rgb(41 38 34 / 25%)}
  :root[data-quiz-theme=paper] .qz-purchase::before{display:none}
  :root[data-quiz-theme=paper] .qz-purchase::after{width:112px;height:112px;right:22px;top:16px}
  :root[data-quiz-theme=paper] .qz-purchase__title{font-size:28px;padding-right:130px}
  :root[data-quiz-theme=paper] .qz-purchase__lead{font-size:14px;padding-right:130px}
  :root[data-quiz-theme=paper] ul.qz-purchase__lead li{font-size:13px;padding:12px}
  :root[data-quiz-theme=paper] .qz-purchase__plan{min-height:108px;padding:16px 18px}
  :root[data-quiz-theme=paper] .qz-purchase__price{font-size:30px}
  :root[data-quiz-theme=paper] .qz-purchase__plan-label{font-size:14px}
  :root[data-quiz-theme=paper] .qz-purchase__consent{font-size:14px}
}
@media(max-width:360px){:root[data-quiz-theme=paper] ul.qz-purchase__lead{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){:root[data-quiz-theme=paper] .qz-purchase{scroll-behavior:auto}}

/* ---------- 「ほかのこと…」シート（購入シートと同じ作りに揃える） ---------- */
:root[data-quiz-theme=paper] .dpg-more-sheet{background:#fffcf7;padding:28px 18px 18px;box-shadow:0 -10px 30px rgb(41 38 34 / 18%),0 0 0 100vmax rgb(41 38 34 / 30%)}
:root[data-quiz-theme=paper] .dpg-more-sheet::before{content:"";position:absolute;left:50%;top:10px;width:44px;height:5px;margin-left:-22px;border-radius:99px;background:#dccfc2}
:root[data-quiz-theme=paper] .dpg-more-sheet__section{padding:14px 16px;border:1px solid #eadccd;border-radius:16px;background:#fff}
:root[data-quiz-theme=paper] .dpg-more-sheet__section h4{font-size:13px;font-weight:800;color:#65594d}
:root[data-quiz-theme=paper] .dpg-more-sheet__close{margin-top:6px;border:1.5px solid #ad8973;border-radius:12px;background:#fff;color:#292622;font-weight:800;min-height:48px}
@media(min-width:760px){:root[data-quiz-theme=paper] .dpg-more-sheet::before{display:none}:root[data-quiz-theme=paper] .dpg-more-sheet{padding:24px 22px 18px}}
/* 本棚ページの注記も 12px 以上に */
:root[data-quiz-theme=paper] .qz-foot__disclaimer{font-size:12px}
:root[data-quiz-theme=paper] .dpg-more-sheet{text-align:left}

/* ---------- 1冊作った後の作る入口（2026-10-15 区間3・本人選択 Q8(b)） ----------
   帯：「＋ 今の冊に足す（無料）」（home-create-add）を今までの「＋ 問題集を作る」と同じ見出しの形にし、
       購入の入口（home-create・行き先は今のまま）は「2冊目からはプラス」の文字リンク（3番手）に下げる。
   タイル（スマホ）：「＋ 今の冊に足す（無料）」（shelf-create-add）は枠のボタン（2番手）、「2冊目からはプラス」は文字リンク。
   dpg-home.css（後で読む）の帯の指定より強くするため、.qz-app[data-screen] と2つのクラスで指す。色は dpg-guide.css の変数。 */
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-home-create.dpg-home-create--full .dpg-home-create__main{display:flex;flex-direction:column;align-items:stretch;gap:4px}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-home-create.dpg-home-create--full .dpg-home-create__add{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-home-create.dpg-home-create--full .dpg-home-create__add::after{content:"";flex:none;width:12px;height:12px;margin-left:auto;margin-right:6px;border-top:3px solid var(--accent);border-right:3px solid var(--accent);transform:rotate(45deg)}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-home-create.dpg-home-create--full .dpg-home-create__title-btn{width:auto;min-height:44px;align-self:flex-start}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-home-create.dpg-home-create--full .dpg-home-create__title-btn::after{display:none}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-home-create.dpg-home-create--full .dpg-home-create__title-btn .dpg-home-create__label{font-size:var(--g-fs-body,17px);font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-maketile .dpg-maketile__sub{grid-column:1/-1;margin:-4px 0 0;font-size:var(--g-fs-small,14px);color:var(--text-2)}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-maketile .dpg-maketile__btn.dpg-maketile__btn--add{gap:8px;min-height:52px;font-size:var(--g-fs-body,17px);font-weight:800}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-maketile .dpg-maketile__plus{font-size:var(--g-fs-body,17px);font-weight:800;line-height:1}
/* 2026-10-16: 設定を2倍に拡大した幅（187px）で「今の冊に足す（無料）」が折り返さず、ページが右へ 4px はみ出していた（文字は nowrap）。
   狭いときだけ折り返せるようにする（ふつうの幅では1行に収まるので変わらない。tools/qa-ux-header-filter.mjs の「⑦ ページは横にはみ出さない」） */
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-maketile .dpg-maketile__btn.dpg-maketile__btn--add{min-width:0;max-width:100%}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-maketile .dpg-maketile__btn.dpg-maketile__btn--add > span:not(.dpg-maketile__plus){min-width:0;white-space:normal;overflow-wrap:anywhere}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-maketile .dpg-maketile__btn.dpg-maketile__btn--link{min-height:44px;border:0;background:none;color:var(--accent);font-size:var(--g-fs-body,17px);font-weight:700;text-decoration:underline;text-underline-offset:3px}
:root[data-quiz-theme=paper] .qz-app[data-screen] .dpg-maketile .dpg-maketile__btn.dpg-maketile__btn--link:hover{background:none;color:var(--accent)}

/* ---------- 作る画面の①入力（2026-10-15 関所D Q4。editor.js の buildInputPanel・renderMake） ----------
   ・欄の直下の1行「単語だけでも作れます」（paste-note）: 欄と同じ点線の箱の中。余白は箱の gap（8px）に任せる
   ・「単語帳として作ります」「入力から判定」の札: 12px だったのを、欄の上の説明（hint）と同じ小さい字（--edit-small。標準は 14px）に */
:root[data-quiz-theme=paper] .qz-editor .qz-editor__paste-note{margin:0;padding:0 4px;color:var(--text-2)}
:root[data-quiz-theme=paper] .qz-editor .qz-editor__make-row .qz-editor__chip--plain{font-size:var(--edit-small,14px)}