/* 共通UI。1017_lp_bootcamp の css/site.css・modal.css・index-ux.css のパターンを踏襲して新規に書いたもの。要 tokens.css */

.ux-page{margin:0;font-family:var(--sans);font-feature-settings:"palt";color:var(--ink);background:var(--bg);
  font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;word-break:auto-phrase;line-break:strict}
.ux-page *,.ux-page *::before,.ux-page *::after{box-sizing:border-box}
.ux-page :where(h1,h2,h3,h4,p,ul,ol,figure,pre,dl,dd){margin:0}
.ux-page :where(ul,ol){padding:0;list-style:none}
.ux-page :where(h1,h2,h3,h4){text-wrap:balance}
.ux-page :where(p,li){text-wrap:pretty}
:where(.ux-page) a{color:var(--accent)}
.ux-page ::selection{background:var(--accent-soft)}
html{scroll-behavior:smooth}
.ux-page :focus-visible{outline:var(--focus-ring);outline-offset:2px}
.ux-page [data-heading]:focus{outline:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ux-page *,.ux-page *::before,.ux-page *::after{transition:none!important;animation:none!important}
}
[hidden]{display:none!important}

.ux-wrap{max-width:var(--w-screen,var(--w-text));margin:0 auto;padding:0 var(--sp-3)}
.ux-wrap--wide{max-width:var(--w-wide)}
/* 画面ごとの最大幅（アフターサポートは既定の --w-text のまま）。中央揃えは .ux-wrap の margin:0 auto */
#screen-home,#screen-work,#screen-faq{--w-screen:900px}
#screen-roadmap{--w-screen:950px}
#screen-benefits{--w-screen:1000px}
.ux-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ux-skip{position:absolute;left:var(--sp-2);top:-100px;z-index:400;padding:var(--sp-1) var(--sp-2);background:var(--ink);color:#fff!important;border-radius:var(--r-sm)}
.ux-skip:focus{top:var(--sp-1)}

/* ===== 上部ヘッダー（サイト名＋右側に独立した「困ったときはFAQ」） ===== */
.ux-topbar{background:var(--paper);border-bottom:1px solid var(--border)}
.ux-topbar__in{max-width:var(--w-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:10px var(--sp-3)}
.ux-topbar__brand{display:flex;align-items:center;gap:8px;min-width:0;font-size:.9rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ux-topbar__brand::before{content:"";flex:none;width:18px;height:18px;border-radius:5px;background:var(--grad-main)}
.ux-topbar__faq{flex:none;min-height:40px;padding:6px 18px;font-size:.85rem}
.ux-topbar__actions{display:flex;align-items:center;gap:8px;flex:none}
/* 狭い画面では、サイト名の行と、ボタン2つの行に折り返す（ボタンは非表示にしない。画面幅・端末による出し分けはしない） */
@media (max-width:560px){
  .ux-topbar__in{flex-wrap:wrap;row-gap:8px}
  .ux-topbar__brand{flex:1 1 100%}
  .ux-topbar__actions{flex:1 1 100%;flex-wrap:wrap}
  .ux-topbar__actions .ux-btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
}
.ux-topbar__phone{flex:none;gap:6px;min-height:40px;padding:6px 16px;font-size:.85rem}
.ux-topbar__phone-icon{flex:none}
/* 「困ったときはFAQ」：淡いイエロー背景＋オレンジ系の文字・枠（青系の他のボタンと見分ける） */
.ux-btn.ux-topbar__faq{background:#FFF6D6;border-color:#E5922B;color:#9A4A00}
.ux-btn.ux-topbar__faq:hover{background:#FFE9A6;border-color:#D17A12;color:#7F3B00}
.ux-btn.ux-topbar__faq:active{background:#FFDD80;border-color:#C26E0A;color:#7F3B00}

/* ===== メインメニュー（ヒーロー画像の直下。白い横長バーに6項目を横並び。スクロール時は上部に固定） ===== */
.ux-sitenav{position:sticky;top:0;z-index:200;background:var(--paper);border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:0 1px 8px rgba(18,41,74,.05)}
.ux-sitenav__in{max-width:var(--w-wide);margin:0 auto;padding:6px var(--sp-3)}
.ux-sitenav ul{display:flex;align-items:stretch;gap:4px}
.ux-sitenav li{flex:1 1 0;min-width:0}
.ux-sitenav a{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--tap);padding:6px 8px;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:500;color:var(--ink-sub);text-align:center;text-decoration:none;transition:color .2s,background .2s}
.ux-sitenav a:hover{color:var(--accent);background:var(--accent-soft)}
.ux-sitenav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);font-weight:700}
@media (max-width:720px){
  .ux-wrap{padding:0 20px}
  .ux-topbar__in{padding:8px 16px}
  .ux-topbar__brand{font-size:.82rem}
  .ux-topbar__faq{padding:4px 14px;font-size:.8rem}
  .ux-sitenav__in{padding:6px 8px}
  .ux-sitenav ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .ux-sitenav a{min-height:40px;padding:4px 4px;font-size:.8rem}
}

/* ===== ヒーロー ===== */
.ux-hero{padding:32px var(--sp-3) 24px;background:radial-gradient(1100px 320px at 50% -60px,rgba(37,99,214,.14),transparent),var(--bg)}
.ux-hero__h1{margin:0;font-size:0;line-height:0}
.ux-hero__img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--accent-soft);font-size:1rem;font-weight:400;line-height:1.7;color:var(--ink-sub);height:auto;border-radius:var(--r);box-shadow:var(--shadow)}
@media (max-width:720px){.ux-hero{padding:20px 20px 16px}}

/* ホーム上部の画像2枚（サムネイル・今日のゴール）に共通の最大幅。中央寄せ、16:9は各画像の aspect-ratio で維持 */
.ux-homeimg{width:100%;max-width:640px;margin-inline:auto}

/* ホーム：今日のゴール（画像ブロック） */
.ux-imgblock{margin-block:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow)}
.ux-imgblock img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--accent-soft);font-size:.95rem;line-height:1.7;color:var(--ink-sub)}

/* ホーム：終了後のご案内（アンケート＝緑、X＝濃紺。下に青い主ボタン） */
.ux-notices{margin-top:var(--sp-2)}
.ux-notice{display:flex;flex-direction:column;overflow:hidden;border:1.5px solid var(--border-strong);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none;transition:box-shadow .15s,transform .15s}
.ux-notice:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.ux-notice__head{padding:12px 20px;background:var(--fill);color:var(--on-fill);font-size:.95rem;font-weight:700;letter-spacing:.04em}
.ux-notice__body{display:flex;flex:1;flex-direction:column;gap:8px;padding:18px 20px 20px;background:var(--paper)}
.ux-notice__body b{font-size:1.05rem}
.ux-notice__body>span:not(.ux-notice__go){font-size:.9rem;line-height:1.8;color:var(--ink-sub)}
.ux-notice__go{align-self:flex-start;margin-top:auto}
.ux-notice:hover .ux-notice__go{background:color-mix(in srgb,var(--fill) 86%,#000)}
.ux-notice:focus-visible .ux-notice__go{background:color-mix(in srgb,var(--fill) 86%,#000)}
.ux-actions--center{justify-content:center;margin-top:var(--sp-3)}
@media (max-width:720px){.ux-actions--center .ux-btn{width:100%}}

/* ===== 画面（メインメニューの切替先） ===== */
.ux-screen{padding:var(--sp-4) 0 var(--sp-8)}
.ux-screen>.ux-wrap>*+*{margin-top:var(--sp-3)}
.ux-label{margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ux-title{margin-bottom:10px;font-size:1.45rem;font-weight:700;line-height:1.45}
.ux-desc{font-size:.92rem;line-height:1.85;color:var(--ink-sub)}
.ux-h3{font-size:1.08rem;font-weight:700;line-height:1.5}
.ux-h4{font-size:.95rem;font-weight:700;line-height:1.5}
.ux-lead{font-size:1.12rem;font-weight:700;line-height:1.7;margin-bottom:8px}
.ux-card__body>.ux-h4{margin-top:16px}
.ux-note{font-size:.85rem;line-height:1.8;color:var(--ink-sub)}
.ux-stack>*+*{margin-top:var(--sp-2)}
.ux-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.ux-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
@media (max-width:720px){.ux-grid2,.ux-grid3{grid-template-columns:1fr}}

/* ===== ボタン ===== */
.ux-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:9px 18px;
  border:1.5px solid var(--border-strong);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.88rem;font-weight:700;line-height:1.3;text-decoration:none;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.ux-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ux-btn--primary{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.ux-btn--primary:hover{background:color-mix(in srgb,var(--fill) 86%,#000);border-color:var(--fill);color:var(--on-fill)}
.ux-btn--pill{border-radius:50px}
.ux-btn--danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,#fff)}
.ux-btn--danger:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.ux-btn--sm{min-height:36px;padding:5px 12px;font-size:.8rem}
.ux-btn.is-done{background:var(--ok);border-color:var(--ok);color:#fff}
.ux-btn:active{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 30%)}
.ux-btn--primary:active{background:color-mix(in srgb,var(--fill) 74%,#000);color:var(--on-fill)}
.ux-btn[disabled],.ux-btn--primary[disabled]{cursor:not-allowed;background:var(--line-soft);border-color:var(--line);color:var(--ink-sub)}
.ux-btn[disabled]:hover,.ux-btn--primary[disabled]:hover{background:var(--line-soft);border-color:var(--line);color:var(--ink-sub)}
.ux-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}

/* ===== カード ===== */
.ux-card{overflow:hidden;border:1px solid var(--border);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow-sm)}
.ux-card__head{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--grad-band);border-bottom:1px solid var(--border)}
.ux-card__head h3,.ux-card__head h4{font-size:1rem;font-weight:700;line-height:1.4}
.ux-card__body{padding:18px 20px 20px}
.ux-card__body>*+*{margin-top:12px}
.ux-card--goal{border-radius:var(--r-lg);box-shadow:var(--shadow)}
.ux-card--goal .ux-card__body{padding:22px 24px 24px}
.ux-numhead{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.ux-numhead .ux-num{width:30px;height:30px;font-size:.9rem}
.ux-num{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fill);color:var(--on-fill);font-weight:700}
.ux-menu-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1.5px solid var(--border-strong);border-radius:var(--r);background:var(--paper);color:var(--ink)!important;text-decoration:none;transition:border-color .15s,background .15s}
.ux-menu-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.ux-menu-card b{font-size:1rem}
.ux-menu-card span{font-size:.84rem;color:var(--ink-sub);line-height:1.7}

/* ===== コールアウト ===== */
.ux-callout{padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:var(--r-sm);background:var(--accent-soft)}
.ux-callout__label{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:.88rem;font-weight:700}
.ux-callout__label::before{content:"i";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem}
.ux-callout p,.ux-callout li{font-size:.88rem;line-height:1.85;color:var(--ink-sub)}
.ux-callout ul{list-style:disc;padding-left:1.3em}
.ux-callout--ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.ux-callout--ok .ux-callout__label::before{content:"✓";background:var(--ok)}
.ux-callout--warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.ux-callout--warn .ux-callout__label::before{content:"!";background:var(--warn)}
/* 注意書きと同じ配色のまま、アイコンだけ「!」ではなく「i」にする（「大切にしたい考え方」用） */
.ux-callout--warn.ux-callout--i .ux-callout__label::before{content:"i"}
.ux-callout--ng{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.ux-callout--ng .ux-callout__label::before{content:"!";background:var(--bad)}
.ux-closing{padding:24px 26px;border-radius:var(--r-sm);background:var(--paper);box-shadow:var(--shadow-sm)}
.ux-closing p{font-size:1rem;line-height:2}
.ux-closing p+p{margin-top:10px}

/* ===== アコーディオン ===== */
.ux-acc{overflow:hidden;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--paper)}
.ux-acc+.ux-acc{margin-top:8px}
.ux-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:10px 18px;font-size:.92rem;font-weight:700;cursor:pointer;list-style:none}
.ux-acc>summary::-webkit-details-marker{display:none}
.ux-acc>summary::after{content:"＋";flex:none;color:var(--ink-sub);font-weight:400}
.ux-acc>summary:hover{background:var(--bg)}
.ux-acc[open]>summary{background:var(--accent-soft);color:var(--accent);border-bottom:1px solid var(--border)}
.ux-acc[open]>summary::after{content:"−";color:var(--accent)}
.ux-acc__body{padding:15px 18px;font-size:.9rem;line-height:1.9}
.ux-acc__body>*+*{margin-top:10px}
.ux-acc__body ul{list-style:disc;padding-left:1.3em}
.ux-acc__body ol{list-style:decimal;padding-left:1.4em}
.ux-faq-cat{margin:var(--sp-4) 0 var(--sp-1);font-size:1rem;font-weight:700;color:var(--accent)}
.ux-faq-cat:first-child{margin-top:0}

/* ===== サブタブ（ピル。メインメニューより小さく、色塗りで区別） ===== */
.ux-subtabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--paper)}
.ux-subtabs__label{flex:none;font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--ink-sub)}
.ux-subtabs [role="tablist"]{display:flex;flex-wrap:wrap;gap:8px}
.ux-subtab{display:flex;align-items:center;min-height:var(--tap);padding:8px 18px;border:1.5px solid var(--border-strong);border-radius:50px;background:var(--paper);
  color:var(--ink-sub);font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.ux-subtab:hover{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.ux-subtab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:700}
.ux-subtab[aria-selected="true"]::before{content:"✓";margin-right:6px;color:var(--accent)}
/* 当日ワーク：章タブは白いカードの外。各章の中身は見出し付きの独立カードに分ける */
/* 章タブ：スクロールしてもヘッダーのナビ（.ux-sitenav, z-index:200）の直下に固定。背景は不透明で、下の内容が透けない。--nav-h は js/app.js がナビの実際の高さを入れる */
.ux-tabgroup>.ux-subtabs{position:sticky;top:var(--nav-h,58px);z-index:190;border:0;border-radius:0;background:var(--bg);
  margin-inline:calc(-1*var(--sp-3));padding:8px var(--sp-3);box-shadow:0 8px 10px -9px rgba(18,41,74,.22)}
.ux-tabgroup .ux-card__head{background:var(--accent-soft)}
.ux-tabgroup .ux-card__head .hint{font-size:.8rem;font-weight:400;color:var(--ink-sub)}
.ux-card__head .ux-num{width:30px;height:30px;font-size:.9rem}
/* 第1章：PCは Q1・Q2 / Q3・詳細メモ の2カラム、スマホは1カラム。プレビューは全幅 */
.ux-ch1grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);align-items:stretch}
.ux-ch1grid>#ch1-questions{display:contents}
.ux-ch1grid .ux-q,.ux-ch1grid .ux-q+.ux-q{margin-top:0}
.ux-ch1grid>.ux-card,.ux-ch1grid .ux-q{display:flex;flex-direction:column;min-width:0}
.ux-ch1grid .ux-card__body{flex:1;display:flex;flex-direction:column}
.ux-ch1grid .ux-textarea{flex:1;min-height:140px}
.ux-ch1grid__wide{grid-column:1/-1}
.ux-actions--pair{flex-wrap:nowrap}
.ux-actions--pair .ux-btn{flex:0 1 auto}
@media (max-width:720px){
  .ux-ch1grid{grid-template-columns:1fr}
  .ux-actions--pair{flex-direction:column;align-items:stretch}
  .ux-actions--pair .ux-btn{width:100%}
}
.ux-stack--cards>*+*,.ux-stack--cards>.ux-q+.ux-q{margin-top:var(--sp-3)}
/* アフターサポート：上部2カラムの選択カード型タブ。内容は必ずタブの下に全幅で表示 */
.ux-cardtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.ux-cardtab{display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;padding:12px 16px;border:1.5px solid var(--border-strong);border-radius:var(--r);background:var(--paper);
  color:var(--ink-sub);font:inherit;font-size:1rem;font-weight:500;line-height:1.4;text-align:center;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.ux-cardtab:hover{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.ux-cardtab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:700}
.ux-cardtab[aria-selected="true"]::before{content:"✓";color:var(--accent)}
@media (max-width:720px){.ux-cardtab{min-height:var(--tap);padding:10px 8px;font-size:.9rem}}
.ux-subpane{margin-top:var(--sp-3)}
.ux-subpane>*+*{margin-top:var(--sp-3)}
.ux-pager{display:flex;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-4)}

/* ===== フォーム ===== */
.ux-field{display:grid;gap:6px}
.ux-field>label,.ux-legend{font-size:.9rem;font-weight:700}
.ux-field .hint{font-size:.8rem;color:var(--ink-sub);font-weight:400}
.ux-input,.ux-textarea,.ux-select{width:100%;min-height:var(--tap);padding:9px 12px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;line-height:1.6}
.ux-textarea{min-height:110px;resize:vertical}
.ux-textarea--tall{min-height:260px;font-family:var(--mono);font-size:.85rem}
.ux-input:hover,.ux-textarea:hover,.ux-select:hover{border-color:var(--accent)}
.ux-fieldset{margin:0;padding:0;border:0;min-width:0}
.ux-chips{display:grid;gap:8px;margin-top:8px}
.ux-chip{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:8px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--paper);font-size:.92rem;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}
.ux-chip>input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ux-chip::before{content:"";flex:none;width:18px;height:18px;border:2px solid var(--border-strong);border-radius:5px;background:var(--paper)}
.ux-chip--radio::before{border-radius:50%}
.ux-chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.ux-chip:has(input:checked){background:color-mix(in srgb,var(--accent) 7%,#fff);border-color:var(--accent);font-weight:700}
.ux-chip:has(input:checked)::before{border-color:var(--accent);background:var(--accent) center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ux-chip--radio:has(input:checked)::before{background:radial-gradient(circle,var(--accent) 0 4px,var(--paper) 5px)}
.ux-chip:has(input:focus-visible){outline:var(--focus-ring);outline-offset:2px}
.ux-q+.ux-q{margin-top:var(--sp-3)}
.ux-q__title{display:flex;gap:12px;align-items:flex-start;margin-bottom:4px;font-size:1rem;font-weight:700}
.ux-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:var(--r-sm);background:var(--accent-soft);font-size:.85rem}
.ux-status--ok{background:var(--ok-soft)}
.ux-status--warn{background:var(--warn-soft)}
.ux-status--ng{background:var(--bad-soft)}
.ux-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:50px;background:var(--accent-soft);color:var(--accent);font-size:.75rem;font-weight:700}
.ux-badge--pending{background:var(--warn-soft);color:var(--warn)}
.ux-badge--ok{background:var(--ok-soft);color:var(--ok)}

/* ===== プロンプトカード（暗色ブロック。1017のモーダル方式ではなく、その場に全文を表示） ===== */
.ux-prompt{overflow:hidden;border-radius:var(--r-sm);background:var(--block)}
.ux-prompt__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1) var(--sp-2);padding:9px 12px 9px 16px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1)}
.ux-prompt__label{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent-on-dark)}
.ux-prompt .ux-btn{min-height:36px;padding:5px 14px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-xs);background:rgba(255,255,255,.12);color:#fff;font-size:.8rem}
.ux-prompt .ux-btn:hover{background:rgba(255,255,255,.22);color:#fff}
.ux-prompt .ux-btn--primary{background:var(--fill);border-color:var(--fill)}
.ux-prompt .ux-btn.is-done{background:#1F9D55;border-color:#1F9D55}
.ux-prompt__src{margin:0;padding:16px 18px;max-height:26rem;overflow:auto;color:#EAF2FF;font-family:var(--mono);font-size:.82rem;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.ux-prompt--sm .ux-prompt__src{max-height:14rem}

/* ===== AI相談室：PC 2カラム／スマホ1カラム。行内の高さを揃え、ボタンは下端に置く ===== */
.ux-cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);align-items:stretch}
.ux-cgrid>.ux-card{display:flex;flex-direction:column;min-width:0}
.ux-cgrid>.ux-card>.ux-card__body{flex:1;display:flex;flex-direction:column}
.ux-cgrid .ux-card__body>.ux-prompt{margin-top:auto;padding-top:var(--sp-2)}
@media (max-width:720px){.ux-cgrid{grid-template-columns:1fr}}

/* ===== 参加者特典 ===== */
.ux-bullets{list-style:disc;padding-left:1.3em;font-size:.9rem;line-height:1.85}
.ux-card__sep{padding-top:14px;border-top:1px solid var(--border)}
.ux-card__sep>.ux-note{margin-bottom:10px}

/* ===== プロンプトのモーダル版（本文は「プロンプトを開く」で全文表示。JS非対応時は本文とコピーを表示） ===== */
.ux-prompt--modal{overflow:visible;border-radius:0;background:none}
.ux-prompt--modal .ux-prompt__head{padding:0;background:none;border:0}
.ux-prompt--modal .ux-prompt__label{font-size:.88rem;letter-spacing:0;color:var(--ink)}
.ux-prompt--modal .ux-btn{min-height:var(--tap);padding:9px 22px;font-size:.88rem;border-radius:50px}
.ux-prompt--modal .ux-btn--primary,.ux-prompt--modal .ux-btn--primary:focus{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.ux-prompt--modal .ux-btn--primary:hover{background:color-mix(in srgb,var(--fill) 86%,#000);border-color:var(--fill);color:var(--on-fill)}
.ux-prompt--modal .ux-btn--primary:active{background:color-mix(in srgb,var(--fill) 74%,#000);color:var(--on-fill)}
.ux-prompt--modal .ux-btn.is-done{background:var(--ok);border-color:var(--ok)}
.ux-prompt--modal .ux-prompt__src{margin-top:12px;border-radius:var(--r-sm);background:var(--block)}
.ux-prompt--modal [data-prompt-open]{display:none}
.ux-js .ux-prompt--modal [data-prompt-open]{display:inline-flex}
.ux-js .ux-prompt--modal [data-copy],.ux-js .ux-prompt--modal .ux-prompt__src{display:none}

/* ===== モーダル本体（本文だけがスクロール。コピー／閉じるは常に表示） ===== */
html.ux-modal-open{overflow:hidden;padding-right:var(--ux-sbw,0)}
.ux-modal{padding:0;border:0;border-radius:var(--r);background:var(--paper);color:var(--ink);width:min(40rem,calc(100vw - 32px));max-width:none;max-height:85vh;max-height:85dvh;margin:auto;box-shadow:var(--shadow-lg);overflow:hidden;font-family:inherit}
.ux-modal[open]{display:flex}
.ux-modal::backdrop{background:rgba(18,41,74,.55)}
.ux-modal__panel{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.ux-modal__head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 6px}
.ux-modal__title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.5}
.ux-modal__close{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--accent-soft);color:var(--ink);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.ux-modal__close:hover{background:var(--border-strong)}
.ux-modal__body{flex:1 1 auto;min-height:6rem;margin:8px 20px 0;padding:16px 18px;overflow:auto;overscroll-behavior:contain;border-radius:var(--r-sm);background:var(--block);color:#EAF2FF;font-family:var(--mono);font-size:.82rem;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
.ux-modal__foot{flex:none;padding:12px 20px 18px}
.ux-modal__status{min-height:1.6em;margin:0 0 8px;font-size:.85rem;color:var(--ink-sub)}
.ux-modal__actions{display:flex;gap:8px}
.ux-modal__actions .ux-btn--primary{flex:2}
.ux-modal__actions .ux-btn:not(.ux-btn--primary){flex:1}
.ux-modal :focus-visible{outline:var(--focus-ring);outline-offset:2px}
.ux-modal__body:focus-visible{outline-offset:-3px;outline-color:var(--accent-on-dark)}
@media (max-width:640px){
  .ux-modal{width:100%;margin:auto 0 0;border-radius:var(--r) var(--r) 0 0;max-height:92vh;max-height:92dvh}
  .ux-modal__head{padding:14px 16px 4px}
  .ux-modal__body{margin:8px 16px 0;padding:14px}
  .ux-modal__foot{padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px))}
}

/* ===== プレビュー（Markdown描画／保存内容） ===== */
.ux-preview{padding:16px 20px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--paper)}
.ux-preview--empty{color:var(--ink-sub);font-size:.88rem;background:var(--bg);border-style:dashed}
.ux-md{font-size:.92rem;line-height:1.85;overflow-wrap:anywhere}
.ux-md>*+*{margin-top:.7em}
.ux-md h3,.ux-md h4,.ux-md h5,.ux-md h6{font-weight:700;line-height:1.5;margin-top:1.1em}
.ux-md h3{font-size:1.25rem}.ux-md h4{font-size:1.12rem;padding-bottom:4px;border-bottom:1px solid var(--border)}.ux-md h5{font-size:1.02rem}.ux-md h6{font-size:.95rem}
.ux-md ul{list-style:disc;padding-left:1.4em}.ux-md ol{list-style:decimal;padding-left:1.5em}
.ux-md blockquote{padding:4px 14px;border-left:4px solid var(--border-strong);color:var(--ink-sub)}
.ux-md code{padding:1px 5px;border-radius:4px;background:var(--accent-soft);font-family:var(--mono);font-size:.86em}
.ux-md pre{padding:12px 14px;border-radius:var(--r-sm);background:var(--block);color:#EAF2FF;overflow:auto}
.ux-md pre code{padding:0;background:none;color:inherit}
.ux-md table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.86rem}
.ux-md th,.ux-md td{padding:6px 10px;border:1px solid var(--border);text-align:left;vertical-align:top}
.ux-md th{background:var(--accent-soft)}
.ux-md hr{border:0;border-top:1px solid var(--border);margin:1em 0}
.ux-kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:.9rem}
.ux-kv dt{font-weight:700;color:var(--ink-sub)}
.ux-kv dd{overflow-wrap:anywhere}
.ux-tags{display:flex;flex-wrap:wrap;gap:6px}
.ux-tags li{padding:2px 12px;border-radius:50px;background:var(--accent-soft);font-size:.85rem}

/* ===== 履歴リスト ===== */
.ux-list{display:grid;gap:10px}
.ux-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--paper)}
.ux-item.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,#fff)}
.ux-item__main{min-width:0}
.ux-item__main b{font-size:.98rem}
.ux-item__meta{display:block;font-size:.8rem;color:var(--ink-sub)}
.ux-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-sm);background:var(--bad-soft);font-size:.85rem}

/* ===== 特典：Canva枠・ファイル構成 ===== */
.ux-embed{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.ux-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ux-embed__ph{position:absolute;inset:0;display:grid;place-content:center;gap:6px;padding:20px;text-align:center;border:2px dashed var(--border-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--ink-sub);font-size:.9rem}
.ux-tree{padding:14px 18px;border-radius:var(--r-sm);background:var(--block);color:#EAF2FF;font-family:var(--mono);font-size:.82rem;line-height:1.7;overflow:auto;white-space:pre}
.ux-todo{padding:13px 16px;border:1.5px dashed var(--border-strong);border-radius:10px;background:var(--bg);font-size:.88rem;color:var(--ink-sub)}
.ux-steps{counter-reset:s;display:grid;gap:8px}
.ux-steps>li{counter-increment:s;display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.75}
.ux-steps>li::before{content:counter(s);flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--fill);color:var(--on-fill);font-size:.8rem;font-weight:700}
/* 当日ワーク内の操作手順は、バッジではなく通常のテキスト番号（1. 2. 3.）。番号と本文は左揃え */
#screen-work .ux-steps,#screen-support .ux-steps{gap:10px}
#screen-work .ux-steps>li,#screen-support .ux-steps>li{gap:8px;line-height:1.8}
#screen-work .ux-steps>li::before,#screen-support .ux-steps>li::before{content:counter(s) ".";display:block;width:auto;height:auto;min-width:1.5em;margin:0;border-radius:0;background:none;color:var(--ink);font-size:inherit;font-weight:700;line-height:inherit;text-align:left}

.ux-footer{padding:var(--sp-4) 0 var(--sp-6);border-top:1px solid var(--border);font-size:.8rem;color:var(--ink-sub)}

@media (max-width:720px){
  .ux-card__body{padding:16px}
  .ux-pager{flex-direction:column}
  .ux-subtabs{padding:10px}
  .ux-subtab{padding:8px 14px;font-size:.85rem}
  .ux-tabgroup>.ux-subtabs{flex-wrap:nowrap;gap:6px;margin-inline:-20px;padding:6px 20px}
  .ux-tabgroup>.ux-subtabs [role="tablist"]{flex:1;min-width:0;flex-wrap:nowrap;gap:4px}
  .ux-tabgroup>.ux-subtabs .ux-subtab{flex:1 1 0;min-width:0;justify-content:center;min-height:40px;padding:6px 2px;font-size:.82rem}
  .ux-tabgroup>.ux-subtabs .ux-subtab[aria-selected="true"]::before{margin-right:3px}
  .ux-kv{grid-template-columns:1fr}
  .ux-kv dt{margin-top:6px}
}

/* ===== ホームのスクロール演出（js/reveal.js が .ux-anim を付けたときだけ有効。初回のみ・控えめな速度） ===== */
.ux-anim [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.ux-anim [data-reveal].is-in{opacity:1;transform:none}
.ux-anim .ux-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ux-anim .ux-line__in{display:block}
.ux-anim [data-linereveal] .ux-line__in{transform:translateY(112%);transition:transform .95s cubic-bezier(.22,1,.36,1);transition-delay:inherit}
.ux-anim [data-linereveal].is-in .ux-line__in{transform:none}
@media (prefers-reduced-motion:reduce){
  .ux-anim [data-reveal],.ux-anim [data-linereveal] .ux-line__in{opacity:1;transform:none;transition:none}
}

/* ===== 第4章：「実践会完走！」ボタンとお祝いモーダル（js/complete.js）。モーダルの外枠は .ux-modal を共用 ===== */
.ux-closing{padding-bottom:30px}
.ux-closing .ux-complete{display:flex;justify-content:center;margin-top:22px}
.ux-complete__btn{min-height:56px;padding:14px 40px;font-size:1.1rem;box-shadow:var(--shadow)}
.ux-complete__btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ux-complete-modal{width:min(46rem,calc(100vw - 32px))}
.ux-complete-modal__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 20px 4px;text-align:center}
.ux-complete-modal__img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(85dvh - 230px);margin:0 auto;border-radius:var(--r-sm);object-fit:contain;-webkit-touch-callout:default}
.ux-complete-modal__missing{padding:28px 12px;font-size:.92rem;line-height:1.9;color:var(--ink-sub)}
.ux-complete-modal__missing code{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:6px;background:var(--accent-soft);color:var(--ink);font-family:var(--mono);font-size:.85rem}
.ux-complete-modal__hint{margin:10px 0 0;font-size:.82rem;line-height:1.7;color:var(--ink-sub)}
.ux-complete-modal__hint[hidden],.ux-complete-modal__missing[hidden]{display:none}
.ux-complete-modal__actions .ux-btn{flex:1 1 0;text-align:center}
.ux-complete-modal__actions .ux-btn[aria-disabled="true"],.ux-complete-modal__actions .ux-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
@media (max-width:640px){
  .ux-complete-modal{width:100%}
  .ux-complete-modal__body{padding:6px 16px 2px}
  .ux-complete-modal__img{max-height:calc(92dvh - 330px)}
  .ux-complete-modal__actions{flex-direction:column}
  .ux-complete-modal__actions .ux-btn{flex:none;width:100%}
}

/* ===== ヘッダーの「スマホで見る」QRコードモーダル（js/qr.js）。外枠は .ux-modal を共用 ===== */
.ux-qr-modal{width:min(34rem,calc(100vw - 32px));max-height:92vh;max-height:92dvh}
.ux-qr-modal__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 24px 14px}
.ux-qr-modal__lead{margin:0 0 12px;font-size:.92rem;line-height:1.8;color:var(--ink-sub);text-align:center}
/* QRコードは、変形・ぼかし・切り抜き・フィルターをかけない。余白（クワイエットゾーン）は SVG の中に含まれている */
.ux-qr-modal__code{width:max-content;max-width:100%;margin:0 auto;padding:0;border:1px solid var(--border);background:#fff;line-height:0}
.ux-qr-modal__code svg{display:block;max-width:100%;height:auto;transform:none;filter:none}
.ux-qr-modal__local{margin:10px 0 0;padding:8px 12px;border-radius:var(--r-sm);background:var(--accent-soft);font-size:.82rem;line-height:1.7;color:var(--ink)}
.ux-qr-modal__url{display:flex;gap:8px;align-items:stretch;margin-top:14px}
.ux-qr-modal__url .ux-input{flex:1;min-width:0;font-size:.85rem}
.ux-qr-modal__url .ux-btn{flex:none;white-space:nowrap}
.ux-qr-modal__url .ux-btn.is-done{background:var(--ok);border-color:var(--ok);color:#fff}
.ux-qr-modal .ux-modal__status{margin:6px 0 10px}
.ux-qr-modal__notice{margin-top:4px}
@media (max-width:640px){
  .ux-qr-modal{width:100%}
  .ux-qr-modal__body{padding:6px 16px 2px}
  .ux-qr-modal__url{flex-direction:column}
}