/* ! -------------------------------------------------- - ダイアログ（確認・選択の小窓）の共通の見た目 新規スキャンの重複ダイアログ（ScanUpload）で決めた形を、再分析の確認（TerminalConfirmDialog）などでも使う。 上から head（見出し）/ body（本文・失敗の理由）/ foot（操作）。線は引かず、foot だけ薄い灰色の面で区切る。 幅 480px・見出し 16px の太字・余白 16px（本文の下だけ 24px）・ボタンは中央に並べて幅 120px 以上。 ⚠️ Headless UI の Modal（components/v2/common/Modal.tsx の variant="plain"）も同じ値で作ってある（Tailwind で書いている） -------------------------------------------------- */.c-dialog-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,18,28,.48)}.c-dialog{box-sizing:border-box;width:min(480px,100%);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);color:var(--text);box-shadow:0 18px 60px rgba(0,0,0,.22);white-space:normal}.c-dialog.is-fixed{position:fixed;top:50%;left:50%;z-index:101;width:min(480px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow-y:auto;transform:translate(-50%,-50%)}.c-dialog__head{padding:16px 16px 0;:is(h2,h3){margin:0;font-size:16px;font-weight:700;color:var(--text-strong)}}.c-dialog__body{padding:16px 16px 24px;font-size:13px;line-height:1.6;p{margin:0 0 8px;white-space:pre-line}p:last-child{margin-bottom:0}}:where(.c-dialog__body) p{line-height:1.5}.c-dialog__error{margin-bottom:16px}.c-dialog__facts+.c-dialog__facts{margin-top:8px}.c-dialog__facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin:16px 0 0;padding-left:16px;border-left:3px solid var(--primary);dt{display:flex;align-items:center;font-size:12px;color:var(--dim-2)}dd{margin:0;font-size:14px;font-weight:700;color:var(--text-strong);overflow-wrap:anywhere}&.is-wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;>dd{min-width:0;max-width:100%}}&.is-muted{border-left-color:var(--line-2)}dd.is-none{font-weight:400;color:var(--dim)}}.c-dialog__error .c-dialog__error-msg{flex-direction:column;align-items:flex-start;gap:4px}.c-dialog__error .c-dialog__error-title{font-weight:700}.c-dialog__error .c-dialog__error-msg>span{font-weight:400}.c-dialog__timer{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-chip);background:var(--panel-2)}.c-dialog__timer-label{display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--dim);.c-icon{color:var(--primary)}}.c-dialog__timer-value{font-size:32px;font-weight:700;line-height:40px;font-variant-numeric:tabular-nums;color:var(--text-strong);&.is-urgent{color:var(--crit)}}.c-dialog__foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:var(--panel-2);.c-btn{min-width:120px}}.c-btn--outline.danger.is-confirm,.c-dialog__foot .c-btn--outline.danger{background-color:color-mix(in srgb,var(--crit) 10%,var(--panel));&:hover{background-color:color-mix(in srgb,var(--crit) 18%,var(--panel))}}.c-dialog .c-btn[aria-busy=true]{opacity:.7;cursor:wait}@media (prefers-reduced-motion:reduce){.c-dialog,.c-dialog-backdrop{animation:none!important;transition:none!important}}.ops-legal{display:grid;gap:4px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--radius-chip);background-color:var(--panel-2)}.ops-legal__row{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-strong);font-weight:700}.ops-legal .ops-legal__row input[type=checkbox]{position:static;flex:none;width:16px;height:16px;margin:0;opacity:1;pointer-events:auto;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;accent-color:var(--primary)}.ops-legal .ops-legal__row input[type=checkbox]:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.ops-legal__tag{padding:1px 6px;border:1px solid var(--line);border-radius:2px;color:var(--dim);font-size:11px;font-weight:400}.ops-legal__desc{margin:0;padding-left:24px;color:var(--dim);font-size:12px;line-height:1.6} /* ! -------------------------------------------------- - ブランド適合（GA-12 / FN2-019）の利用者の部品 ・新規スキャン・再分析の確認の「ブランド適合を確かめる」の行（BrandFitScanRow） ・当てるガイドラインを編集（BrandFitSelectModal）・紐づけを編集（GuidelinePickerModal） ・案件管理の詳細パネルの「ガイドライン」「ブランド適合」（BrandFitDetailSection） 行は法務チェックの切替（.ops-legal・dialog.css）と同じ形にする。.ops-legal は運営だけの部品で、 こちらは利用者の部品なので、クラスは借りずにここで持つ（片方の見た目を変えても他方へ響かないように） -------------------------------------------------- */.bf-row{display:grid;gap:4px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--radius-chip);background-color:var(--panel-2)}.bf-row__head,.bf-row__label{display:flex;align-items:center;gap:8px}.bf-row__label{flex:1;min-width:0;cursor:pointer;color:var(--text-strong);font-weight:700}.bf-row__label:has(input:disabled){cursor:default}.bf-row__desc{margin:0;padding-left:24px;color:var(--dim);font-size:12px;line-height:1.6}.bf-row__desc b{color:var(--text-strong)}.bf-row__targets{margin:0;padding:0 0 0 24px;list-style:none;color:var(--dim);font-size:12px;line-height:1.6}.bf-row__targets b{color:var(--text-strong)}.bf-row__warn{color:var(--warn-text)}.bf-conflict .c-icon,.bf-list__note.is-warn .c-icon,.bf-over .c-icon,.bf-row__warn .c-icon{flex:none;margin-right:4px;vertical-align:-2px}.dash-home-canvas.is-side .bf-row{margin-top:auto;padding:16px;border-radius:var(--radius-card);background-color:var(--panel)}.dash-home-canvas.is-side .bf-row__label{font-size:14px}.dash-home-canvas.is-side .ops-legal+.bf-row{margin-top:8px}.dash-home-canvas.is-side .bf-row+.scan-cost{margin-top:0}.bf-row.is-disabled{opacity:.5}.c-dialog.is-fixed.bf-dialog{width:min(640px,calc(100vw - 48px))}.bf-dialog .c-dialog__head h2{display:flex;align-items:baseline;gap:8px}.bf-dialog__sub{color:var(--dim);font-size:12px;font-weight:400}.bf-dialog__foot-link{margin-right:auto}.bf-list{display:flex;flex-direction:column;margin:8px 0;border:1px solid var(--line);border-radius:var(--radius-chip);overflow:hidden}.bf-list__row{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px;border-top:1px solid var(--line);font-size:13px}.bf-list__row:first-child{border-top:0}.bf-list__row.is-head{min-height:32px;background-color:var(--panel-2);color:var(--dim);font-size:12px}.bf-list__row.is-out{color:var(--dim)}.bf-list__name{flex:1;min-width:0;overflow-wrap:anywhere}.bf-list__src{width:96px}.bf-list__note,.bf-list__src{flex:none;color:var(--dim);font-size:12px}.bf-list__note{width:136px}.bf-list__note.is-warn{color:var(--crit)}.bf-list__empty{margin:0;padding:16px;color:var(--dim);font-size:12px;text-align:center}.bf-list__tag{flex:none;padding:0 8px;border-radius:var(--radius-sm);background-color:var(--panel-2);color:var(--dim);font-size:10px;line-height:1.8}.bf-list__check{display:flex;flex:1;align-items:center;gap:8px;min-width:0;cursor:pointer}.bf-list__check:has(input:disabled){cursor:default}.bf-switch{display:inline-flex;flex:none;align-items:center;gap:8px;color:var(--dim);font-size:12px;cursor:pointer}.bf-switch input[type=checkbox].c-native-check{accent-color:var(--primary)}.bf-search{height:32px;margin-top:8px}.bf-section-title{margin:16px 0 0;color:var(--text-strong);font-size:12px;font-weight:700}.bf-section-title:first-child{margin-top:0}.bf-det-box{margin:0;padding:8px;border:1px solid var(--line);border-radius:var(--radius-chip);background-color:var(--panel);color:var(--text);font-size:12px;line-height:1.6}.bf-det-box b{color:var(--text-strong)}.bf-det-box__sub{display:block;color:var(--dim);font-size:11px}.bf-det-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.bf-conflict{margin:0;color:var(--crit);font-size:11px;line-height:1.5}.c-dialog__body .bf-row+p,.c-dialog__body .ops-legal+.bf-row{margin-top:8px} /* ! -------------------------------------------------- - 「参考なし」の案内（似た事例（RAG）を使わずに評価された分析・運営だけ・RagUnavailableBadge.tsx） 見た目は共通の c-notice plain（地も枠も無い）と c-status（状態の札）。ここは並べ方だけ: 1 行目に札・タイトル（説明）・「使えなかった理由」の開閉。開くと理由を 2 行目に全幅で、 薄い灰色の面（案D の「なぜ選ばれたか」と同じ形）として出す -------------------------------------------------- */.c-notice.rag-notice{display:grid;grid-template-columns:minmax(0,1fr);-moz-column-gap:8px;column-gap:8px;row-gap:4px;align-items:start;border-radius:var(--radius-none)}.rag-notice .rag-notice-admin{gap:2px;.c-icon{fill:currentColor}}.rag-notice .rag-notice-head{grid-column:1;display:flex;align-items:center;margin:0}.rag-notice .rag-notice-reason{grid-column:1/-1;margin:0}.rag-notice .rag-notice-head>.c-status{display:inline-flex;min-height:0;vertical-align:middle}.rag-notice .rag-notice-msg{display:inline;min-height:0;font-size:12px;font-weight:500;line-height:1.6;color:var(--text-strong)}.rag-notice .rag-notice-head .c-btn__text{vertical-align:bottom;line-height:1.6;.c-icon{transition:transform .15s}&[aria-expanded=true] .c-icon{transform:rotate(90deg)}}.rag-notice .rag-notice-reason{padding:8px 12px;border-radius:var(--radius-chip);background:var(--panel);font-size:12px;font-weight:400;line-height:1.6;color:var(--text);overflow-wrap:anywhere;&[hidden]{display:none}}@media (prefers-reduced-motion:reduce){.rag-notice .rag-notice-toggle .c-icon{transition:none}}.rag-badge-inline{margin-left:6px} /* ! -------------------------------------------------- - フラッシュメッセージ（c-flash・components/terminal/Flash.tsx） 上部バーのすぐ下・本文の領域（.shell-workspace）の中央に浮かべる操作の結果の通知。成功（success）とアラート（error）。 色・文字は c-notice（form.css・新規スキャンの通知と同じ）。ここは位置・影・不透明な地・アイコン・閉じる。 ⚠️ サイドバーの引き出し（60）より上・ダイアログ（100）より下に置く -------------------------------------------------- */.shell{--flash-rail:var(--rail-width)}.shell:has(.shell-rail.collapsed),:root[data-rail-collapsed] .shell:not(:has(.shell-rail.admin)){--flash-rail:56px}@media (max-width:1024px){.shell,.shell:has(.shell-rail.collapsed),:root[data-rail-collapsed] .shell:not(:has(.shell-rail.admin)){--flash-rail:0px}}.c-flash-region{position:fixed;top:calc(var(--crumb-height) + 8px);left:calc(var(--flash-rail, 0px) + (100vw - var(--flash-rail, 0px)) / 2);transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;width:-moz-max-content;width:max-content;max-width:calc(100vw - var(--flash-rail, 0px) - 32px);pointer-events:none}.c-notice.c-flash{pointer-events:auto;width:auto;align-items:center;flex-wrap:nowrap;gap:8px;padding:8px 8px 8px 16px;border-radius:var(--radius-card);box-shadow:0 8px 24px rgba(15,23,42,.18);white-space:normal;animation:c-flash-in .2s ease;&.success{background:color-mix(in srgb,var(--ok) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--ok) 35%,var(--panel))}&.error{background:color-mix(in srgb,var(--crit) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--crit) 35%,var(--panel))}p{margin:0;font-size:13px}&:before{content:"";flex:0 0 auto;width:20px;height:20px;background:currentColor}&.success:before{-webkit-mask:url("data:image/svg+xml;utf8,") center /contain no-repeat;mask:url("data:image/svg+xml;utf8,") center /contain no-repeat}&.error:before{-webkit-mask:url("data:image/svg+xml;utf8,") center /contain no-repeat;mask:url("data:image/svg+xml;utf8,") center /contain no-repeat}}.c-flash__action{flex:0 0 auto;padding:2px 8px;border:0;border-radius:var(--radius-chip);background:transparent;color:inherit;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer;&:hover{background:color-mix(in srgb,currentColor 12%,transparent)}&:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}}.c-flash__close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-chip);background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer;&:hover{background:color-mix(in srgb,currentColor 12%,transparent)}&:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}}@keyframes c-flash-in{0%{opacity:0;transform:translateY(-8px)}} /* ! -------------------------------------------------- - テキスト -------------------------------------------------- */.c-txt{color:var(--text-strong);font-weight:400;line-height:1.5;word-break:break-word;&.xl3{font-size:2rem}&.xl2{font-size:1.5rem}&.xl{font-size:1.25rem}&.lg{font-size:1rem}&.md{font-size:.9rem}&.sm{font-size:.875rem}&.xs{font-size:.75rem}&.min{font-size:11px}&.unit{font-size:.75rem;line-height:1em;letter-spacing:0;display:inline-block;&.before{margin-inline-end:.25rem}&.after{margin-inline-start:.125rem}}}@media (min-width:641px){.c-txt{&.xl3{font-size:2.5rem}&.xl2{font-size:2rem}&.xl{font-size:1.5rem}&.lg{font-size:1.25rem}&.md{font-size:1rem}}}.height--1{line-height:1}.height--1_2{line-height:1.2}.height--1_5{line-height:1.5}.height--1_8{line-height:1.8}.height--2{line-height:2}.letter--0{letter-spacing:0}.space--wrap{white-space:pre-wrap}.space--nowrap{white-space:nowrap}.space--pre-line{white-space:pre-line}.weight__100{font-weight:100}.weight__200{font-weight:200}.weight__300{font-weight:300}.weight__400{font-weight:400}.weight__500{font-weight:500}.weight__600{font-weight:600}.weight__700{font-weight:700}.weight__800{font-weight:800}.weight__900{font-weight:900}.color__base{color:var(--text)}.color__white{color:#fff}.color__primary{color:var(--accent-vivid-text)}.color__alert{color:var(--crit)}.color__gray{color:#999}.color__dim{color:var(--dim)}.color__dimLight{color:var(--dim-2)}.color__dimWeak{color:var(--dim-3)}.u-center{text-align:center}.u-right{text-align:right}.clamp{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.clamp--2{-webkit-line-clamp:2}.clamp--3{-webkit-line-clamp:3}.c-txt__notice{display:flex;align-items:flex-start;gap:.25rem;&:before{content:"※"}}.c-txt__error{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:var(--crit-soft);border:1px solid var(--crit);border-radius:var(--radius-md);color:var(--crit);font-size:11px;font-weight:400;&:before{content:"!";font-size:.875rem;font-weight:900;margin-right:.125rem}} /* ! -------------------------------------------------- - テーブル -------------------------------------------------- */.t-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--text);td,th{padding:.5rem .75rem;text-align:left}thead th{background-color:var(--panel-2);color:var(--dim);border-bottom:1px solid var(--line)}tbody th,thead th{font-weight:500}tbody tr{border-bottom:1px solid var(--line);&:last-child{border-bottom:0}}.center{text-align:center}td small{display:block;color:var(--dim-2);font-size:11px}}.t-table--wp{overflow-x:auto} /* ! -------------------------------------------------- - 中でスクロールする一覧（c-hover-scroll・部品は components/terminal/shared/HoverScroll.tsx） ふだんはスクロールバーを見せない。一覧にカーソルを乗せている間（キーボードで中にいる間）だけ、 右端の上に細い棒（4px・--line-2）を浮かせて出す。棒は幅を取らないので、出ていないときに余白は残らない。 モック「A案 ドライブ型」の表の浮いたスクロールバーと同じ（2026-10-27） -------------------------------------------------- */.c-hover-scroll{position:relative;display:flex;flex-direction:column;min-height:0}.c-hover-scroll__body{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}.c-hover-scroll__body::-webkit-scrollbar{display:none}.c-hover-scroll__thumb{position:absolute;right:3px;z-index:3;width:4px;border-radius:var(--radius-full);background:var(--line-2);opacity:0;transition:opacity .15s;cursor:pointer}.c-hover-scroll__thumb:before{content:"";position:absolute;inset:0 -4px}.c-hover-scroll:is(:hover,:focus-within) .c-hover-scroll__thumb,.c-hover-scroll__thumb.is-drag{opacity:1}.c-hover-scroll__thumb[hidden]{display:none}@media (prefers-reduced-motion:reduce){.c-hover-scroll__thumb{transition:none}} /* ! -------------------------------------------------- - プラン（サイドバー） -------------------------------------------------- */.rail-plan{padding:.75rem;margin:.25rem .5rem .75rem;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel-1)}.rail-plan-name{color:var(--text);margin-bottom:.25rem;small{color:var(--dim);font-size:.625rem}}.rail-plan-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;-moz-column-gap:8px;column-gap:8px;row-gap:2px;margin-bottom:6px}.rail-plan-count{font-size:12px;line-height:1.5;color:var(--text);white-space:nowrap;b{font-size:1rem;color:var(--accent-vivid-text)}}.rail-plan-count b{font-size:16px;color:var(--accent-vivid-text)}.rail-plan-percent{font-size:1rem;font-weight:700}.rail-plan-percent.ok{color:var(--ok)}.rail-plan-percent.warn{color:var(--warn)}.rail-plan-percent.crit{color:var(--crit)}.rail-plan-bar{width:100%;height:.25rem;border-radius:999px;background:var(--panel);overflow:hidden;margin-bottom:.5rem}:root[data-theme=dark] .rail-plan-bar{background:var(--line-2)}.rail-plan-bar-fill{height:100%;border-radius:999px;&.ok{background:var(--ok)}&.warn{background:var(--warn)}&.crit{background:var(--crit)}}.rail-plan-bar-fill.ok{background:var(--ok)}.rail-plan-bar-fill.warn{background:var(--warn)}.rail-plan-bar-fill.crit{background:var(--crit)}.rail-plan-note{margin:-4px 0 8px;font-size:11px;font-weight:600}.rail-plan-note.warn{color:var(--warn)}.rail-plan-note.crit{color:var(--crit)}.rail-plan-topup{display:flex;flex-direction:column;gap:6px;margin:0 0 8px}.rail-plan-topup-count{font-size:11px;color:var(--dim)}.rail-plan-topup-link{align-self:flex-start;padding:0;border:0;background:none;font-size:11px;color:var(--accent);text-decoration:underline;cursor:pointer}.rail-plan-name{display:flex;align-items:baseline;gap:.125rem;font-size:1rem;color:var(--text-strong);margin-bottom:4px}.rail-plan-name small{color:var(--dim);font-size:.625rem}.rail-plan-cta{width:100%;display:block;text-align:center;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-chip);background:var(--panel);color:var(--accent-vivid-text);font-size:11px;font-weight:600;cursor:pointer;text-decoration:none}.rail-plan-cta:hover{background:var(--accent-soft);border-color:var(--accent-vivid)}.rail-account-menu .rail-plan{margin:0 0 .25rem} /* ! -------------------------------------------------- - react-joyride（チュートリアル） -------------------------------------------------- */.react-joyride__tooltip{width:360px!important;max-width:calc(100vw - 32px)!important;padding:1rem!important;border-radius:var(--radius-card)!important;background:var(--panel)!important;color:var(--text)!important;font-size:.8rem!important;box-shadow:var(--shadow-soft)!important;>div{justify-content:center!important;margin-top:.5rem!important;>div{flex:0 0 auto!important;&:has([data-action=skip]){flex:1 1 auto!important}}&:first-child{margin-top:0!important;text-align:left!important;h1{font-size:.875rem!important;font-weight:600!important;padding:0 .5rem!important}>div{line-height:1.5;padding:.5rem .5rem .75rem!important}}}[data-action=close]{display:flex;justify-content:center;align-items:center;padding:.5rem!important;width:1.5rem!important;height:1.5rem!important;aspect-ratio:1/1!important;border-radius:.25rem!important;overflow:hidden;right:.25rem!important;top:.25rem!important;svg{min-width:.625rem!important;aspect-ratio:1/1!important}&:hover{background-color:var(--bg)!important}}}.react-joyride__tooltip [data-action=primary]{font-size:13px!important;padding-left:1rem!important;background:var(--accent-vivid)!important;color:var(--accent-vivid-ink)!important;border:1px solid var(--accent-vivid)!important;border-radius:var(--radius-chip)!important;min-width:5rem;&:hover{background-color:var(--accent-vivid-ink)!important;color:var(--accent-vivid-text)!important;border:1px solid var(--accent-vivid)!important}}.react-joyride__tooltip [aria-label=\5B8C\4E86]{padding-left:.5rem!important}.react-joyride__tooltip [data-action=back]{font-size:.75rem!important;background-color:var(--panel-2)!important;color:var(--text)!important;border:1px solid var(--line-2)!important;border-radius:var(--radius-chip)!important;margin-left:0!important;margin-right:.25rem!important;&:hover{background-color:var(--panel-3)!important}}.react-joyride__tooltip [data-action=skip]{color:var(--dim)!important;font-size:.75rem!important;text-decoration:underline!important;margin-right:auto!important;&:hover{opacity:.5!important;text-decoration:none!important}}.react-joyride__spotlight{width:var(--rail-width)!important}.__floater.__floater__open{transition:opacity .2s,transform .2s!important}.__floater__arrow{span{margin-top:.25rem!important;margin-bottom:.25rem!important;left:4px}}.device-notice{position:fixed;left:var(--pad-md);right:var(--pad-md);bottom:var(--pad-md);z-index:90;display:flex;align-items:flex-start;gap:var(--pad-sm);padding:var(--pad-sm) var(--pad-md);background:var(--panel-2);color:var(--text-strong);border:1px solid var(--line-2);border-radius:var(--radius-card);box-shadow:0 4px 16px rgba(0,0,0,.2);font-family:var(--font-jp);font-size:13px;line-height:1.5}.device-notice-text{flex:1 1 auto;margin:0}.device-notice-close{flex:0 0 auto;min-width:44px;min-height:44px;margin:calc(-1 * var(--pad-sm)) calc(-1 * var(--pad-sm)) 0 0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;border-radius:var(--radius-chip)}.device-notice-close:hover{color:var(--text-strong)}.device-notice-close:focus-visible{outline:var(--focus-outline-w) solid var(--focus-ring);outline-offset:2px}.shell.has-analysis-disclaimer{grid-template-rows:minmax(var(--crumb-height),auto) auto 1fr}.shell.has-analysis-disclaimer .shell-rail{grid-row:1/4}.shell.has-analysis-disclaimer .shell-workspace{grid-row:3}.shell-disclaimer{grid-row:2;grid-column:2;display:flex;align-items:center;gap:var(--pad-xs);min-width:0;padding:4px var(--pad-sm);background:#eef0f3;border-bottom:1px solid var(--line)}.shell-disclaimer-icon{flex:0 0 auto;color:#2d3f5d}.shell-disclaimer-text{min-width:0;margin:0;font-family:var(--font-jp);font-size:12px;line-height:1.5;color:#3a414c}.shell.has-billing-banner{grid-template-rows:minmax(var(--crumb-height),auto) auto 1fr}.shell.has-billing-banner .shell-rail{grid-row:1/4}.shell.has-billing-banner .shell-workspace{grid-row:3}.shell.has-billing-banner.has-analysis-disclaimer{grid-template-rows:minmax(var(--crumb-height),auto) auto auto 1fr}.shell.has-billing-banner.has-analysis-disclaimer .shell-rail{grid-row:1/5}.shell.has-billing-banner.has-analysis-disclaimer .shell-workspace{grid-row:4}.shell-billing{grid-row:2;grid-column:2;min-width:0;padding:var(--pad-xs) var(--pad-sm);border-bottom:1px solid var(--line)}.shell.has-analysis-disclaimer .shell-billing{grid-row:3}.shell-billing .c-notice p{align-items:center;flex-wrap:wrap} /* ! -------------------------------------------------- - 設定＞プランの決済の区画（GA-06・Stripe 決済設計書 §4.6・frontend-design.md §6.27） 行（左に文・右にボタン）・行の区切り・支払履歴の表。運営の「支払い」ダイアログ（`compact`）も同じ部品 -------------------------------------------------- */.billing-rows{display:flex;flex-direction:column}.billing-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;&+&{border-top:1px solid var(--line)}&>p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0}}.billing-row--separated,.billing-rows+.billing-row{border-top:1px solid var(--line);margin-top:4px}.billing-invoices{& th{padding:4px 12px 8px 0;color:var(--dim-2);font-size:12px;font-weight:400;white-space:nowrap}& td{vertical-align:middle;font-variant-numeric:tabular-nums}}.billing-invoices__actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;white-space:nowrap}.billing-compact{&+&{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}}.billing-compact__title{margin:0 0 8px;color:var(--text-strong);font-size:13px;font-weight:700}.billing-compact__body{font-size:12px;& dl>div{padding:2px 0}}.modal-panel.org-billing-dialog{max-width:720px}.plan-tabbar{max-width:100%}.plan-tabbar>.c-tab__list{min-width:0;max-width:100%;padding:4px;overflow-x:auto;background:var(--panel-3);border-radius:var(--radius-card);scrollbar-width:thin}.plan-tabbar .c-tab__btn[aria-selected=true]{background:var(--panel)}.plan-tabbar .c-tab__btn:not([aria-selected=true]):hover{background:var(--panel-2)}@media (max-width:639px){.plan-tabbar>.c-tab__list{flex:1 1 auto;scrollbar-width:none}.plan-tabbar .c-tab__btn{flex:1 1 auto;padding-right:4px;padding-left:4px}}.plan-card-action{display:flex;flex-direction:column;gap:8px}.plan-card-note{margin:0;color:var(--dim);font-size:12px;line-height:1.6;text-align:center}.plan-change-scheduled{padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel)}.plan-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:12px 0 0;padding:0;list-style:none;color:var(--text);font-size:13px;font-weight:700}.plan-steps__sep{color:var(--dim);font-weight:400}