/* エディタUI（サイト側のCSSは js/site-css.js） */
:root {
  --ui-bg: #f4f5f8;
  --ui-panel: #ffffff;
  --ui-line: #e4e6ec;
  --ui-text: #1d2030;
  --ui-sub: #6b7080;
  --ui-accent: #4f46e5;
  --ui-accent-soft: #eef0ff;
  --ui-danger: #dc2626;
  --ui-font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--ui-font); color: var(--ui-text); background: var(--ui-bg); font-size: 13px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#app { display: grid; grid-template-columns: 272px 1fr 316px; grid-template-rows: 52px 1fr; height: 100vh; min-width: 1024px; }
.tb { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: var(--ui-panel); border-bottom: 1px solid var(--ui-line); z-index: 10; }
.tb-l, .tb-r, .tb-c { display: flex; align-items: center; gap: 6px; }
.tb-c { background: var(--ui-bg); border-radius: 9px; padding: 3px; }
.tb-sep { width: 1px; height: 22px; background: var(--ui-line); margin: 0 6px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.brand-mark { display: block; width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.brand-tag { font-size: 10px; font-weight: 700; color: var(--ui-accent); background: var(--ui-accent-soft); padding: 2px 6px; border-radius: 4px; }
.el-crumbs { display: flex; flex-wrap: wrap; align-items: center; margin: -4px 0 10px; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.el-crumbs .crumb { border: 0; background: none; padding: 2px 3px; color: var(--ui-sub); cursor: pointer; font: inherit; }
.el-crumbs .crumb:not(:last-child)::after { content: "›"; margin-left: 5px; color: #b5b9c6; }
.el-crumbs .crumb.on { color: var(--ui-text); font-weight: 700; }
.el-crumbs .crumb:hover { color: var(--ui-accent); }
.pi-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.posts-sec { margin-top: 24px; }
.add-post { width: 100%; justify-content: center; margin-top: 8px; white-space: normal; height: auto; min-height: 32px; text-align: center; }
/* お客様モードでも投稿の編集・削除はできる（納品後のお知らせ更新のため） */
html[data-client="1"] .page-item.post-item .pf { display: block !important; }
html[data-client="1"] .page-item.post-item .btn.danger { display: inline-flex !important; }
.snap-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--ui-line); }
.snap-item small { display: block; color: var(--ui-sub); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ui-sub); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--ui-line); }
.g-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid #dadce0; color: #1f1f1f; font-weight: 600; }
.g-btn:hover { background: #f8f9fa; }
.tb-select { height: 32px; border: 1px solid var(--ui-line); border-radius: 8px; padding: 0 28px 0 10px; background: #fff; min-width: 150px; cursor: pointer; }
.save-state { color: var(--ui-sub); font-size: 12px; margin-right: 6px; }
.save-state.warn { color: var(--ui-danger); font-weight: 700; }

.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 7px; cursor: pointer; color: var(--ui-sub); }
.icon-btn:hover { background: var(--ui-bg); color: var(--ui-text); }
.tb-c .icon-btn:hover { background: #fff; }
.icon-btn.on { background: #fff; color: var(--ui-accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.icon-btn svg, .btn svg { width: 17px; height: 17px; }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ui-line); background: #fff; cursor: pointer; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: #cfd2dc; background: #fafafb; }
.btn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.btn.primary:hover { background: #4338ca; }
.btn:disabled, .btn:disabled:hover { opacity: .4; cursor: not-allowed; }
a.btn { text-decoration: none; color: inherit; }
a.btn.primary { color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--ui-bg); }
.btn.danger { color: var(--ui-danger); }
.btn.block { width: 100%; justify-content: center; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }

.menu-wrap { position: relative; }
.menu { position: absolute; top: 38px; right: 0; background: #fff; border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(20,20,40,.14); padding: 6px; min-width: 220px; z-index: 30; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu button:hover { background: var(--ui-bg); }
.menu hr { border: 0; border-top: 1px solid var(--ui-line); margin: 6px 0; }
.menu .danger { color: var(--ui-danger); }
/* 右クリックメニュー（IMP-B10） */
.ctx-menu { position: fixed; top: 0; right: auto; z-index: 60; min-width: 240px; }
.ctx-menu button { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.ctx-menu button:focus-visible { outline: 2px solid #0f766e; outline-offset: -2px; }
.ctx-menu kbd { font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #7a7f8c; background: none; border: 0; padding: 0; }
/* 取り込む前の分け方（IMP-A12） */
.imp-plan { margin-top: 16px; border: 1px solid var(--ui-line); border-radius: 10px; padding: 12px 14px; background: var(--ui-bg); }
.imp-plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.imp-plan-count { color: #0f766e; font-weight: 700; }
.imp-plan > small { display: block; color: #667085; margin: 4px 0 8px; }
.imp-plan-list { margin: 0; padding-left: 24px; max-height: 280px; overflow: auto; }
.imp-plan-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 7px 4px 7px 0; border-top: 1px solid var(--ui-line); }
.imp-plan-list li:first-child { border-top: 0; }
.imp-plan-list li > small { grid-column: 1; color: #667085; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-take, .imp-merge { display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }
.imp-merge { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; white-space: nowrap; }
.imp-plan-list li.off { opacity: .45; }
.imp-plan-list li.merged { border-top: 1px dashed #0f766e; }
.modal-foot .plan-btn { margin-right: auto; }
/* スマホで見る（QRコード。IMP-F02） */
.qr-body { text-align: center; }
.qr-img { width: 220px; max-width: 100%; margin: 4px auto 12px; }
.qr-img svg { display: block; width: 100%; height: auto; }
.qr-url { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.qr-url code { font-size: 12px; word-break: break-all; }

/* サイドパネル */
.side { background: var(--ui-panel); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.side-l { border-right: 1px solid var(--ui-line); }
.side-r { border-left: 1px solid var(--ui-line); }
.side-body { overflow-y: auto; flex: 1; padding: 14px 14px 40px; }
.tabs { display: flex; border-bottom: 1px solid var(--ui-line); padding: 0 8px; }
.tabs button { flex: 1; border: 0; background: none; padding: 12px 0 10px; font-weight: 700; color: var(--ui-sub); border-bottom: 2px solid transparent; cursor: pointer; }
.tabs button.on { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }

.sec-title { font-size: 11px; font-weight: 700; color: var(--ui-sub); letter-spacing: .06em; margin: 18px 2px 8px; }
.sec-title:first-child { margin-top: 2px; }
.hint { color: var(--ui-sub); font-size: 12px; line-height: 1.6; background: var(--ui-bg); border-radius: 8px; padding: 10px 12px; }
.hint b { color: var(--ui-text); }

.palette { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tile { border: 1px solid var(--ui-line); border-radius: 10px; background: #fff; padding: 8px 8px 7px; cursor: grab; text-align: center; transition: border-color .12s, box-shadow .12s, transform .12s; user-select: none; }
.tile:hover { border-color: var(--ui-accent); box-shadow: 0 4px 12px rgba(79,70,229,.12); transform: translateY(-1px); }
.tile:active { cursor: grabbing; }
/* 左のブロックの一覧：まとまりごとに折りたたむ（IMP-C15） */
.pal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: -2px 2px 8px; font-size: 11px; color: var(--ui-sub); line-height: 1.5; }
.pal-tools span { flex: 1 1 100%; }
.pal-tools span + button { margin-left: auto; }
.pal-tools button { flex: none; background: none; border: 0; padding: 2px 0; font-size: 11px; color: var(--ui-sub); cursor: pointer; text-decoration: underline; }
.pal-tools button:hover { color: var(--ui-accent); }
.pal-group { border-top: 1px solid var(--ui-line); }
.pal-group:last-child { border-bottom: 1px solid var(--ui-line); }
.pal-group > summary { display: flex; align-items: center; gap: 8px; padding: 11px 4px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--ui-text); user-select: none; border-radius: 6px; }
.pal-group > summary::-webkit-details-marker { display: none; }
.pal-group > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px 0 2px; border-right: 2px solid var(--ui-sub); border-bottom: 2px solid var(--ui-sub); transform: rotate(-45deg); transition: transform .15s; }
.pal-group[open] > summary::before { transform: rotate(45deg); }
.pal-group > summary:hover { color: var(--ui-accent); background: var(--ui-bg); }
.pal-group > summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.pal-group > summary small { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ui-sub); background: var(--ui-bg); border-radius: 999px; padding: 1px 8px; }
.pal-group > .palette { padding: 2px 0 14px; }
.pi-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; line-height: 1.7; vertical-align: 1px; background: #fef3c7; color: #92400e; }
.pi-badge.lang { background: #e0f2fe; color: #075985; }
.badge.sched { background: #fef3c7; color: #92400e; }
.pub-sched { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-top: 8px; font-size: 13px; }
.lang-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.lang-row select { flex: 1 1 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.lang-row .btn { flex: none; }
/* 確認用のリンク（IMP-V11）：リンクの欄とボタンを1行に。狭い画面では欄だけ1行使う */
.pv-link { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pv-link input { flex: 1 1 220px; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.pv-link .btn, .pv-acts .btn { flex: none; }
.pv-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) { .pv-link input { flex-basis: 100%; } }
/* 修正報告・作業の記録（IMP-I05・I07） */
.report-sec h3 { font-size: 14px; margin: 14px 0 6px; }
.report-sec:first-child h3 { margin-top: 0; }
.report-sec ul { margin: 0; padding-left: 1.3em; line-height: 1.75; font-size: 13.5px; }
.worklog-wrap { overflow-x: auto; }
.worklog { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.worklog th, .worklog td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.worklog th { color: var(--ui-sub); font-weight: 600; font-size: 12px; }
.tw-row { display: flex; gap: 6px; }
.tw-row select { flex: 1; min-width: 0; }
.font-sample { margin: -4px 0 12px; padding: 10px 12px; border: 1px dashed var(--ui-line); border-radius: 8px; font-size: 15px; line-height: 1.6; color: var(--ui-text); }
/* 写真の調整 */
.ie-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; }
.ie-stage { display: grid; place-items: center; min-height: 360px; padding: 10px; border-radius: 10px; background: #1d2030 repeating-conic-gradient(#262a3a 0 25%, #1d2030 0 50%) 0 0 / 20px 20px; }
.ie-canvas { max-width: 100%; cursor: grab; touch-action: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.ie-canvas:active { cursor: grabbing; }
.ie-shapes, .ie-turn { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ie-shapes .btn.on { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-soft); }
@media (max-width: 760px) { .ie-wrap { grid-template-columns: minmax(0, 1fr); } .ie-stage { min-height: 240px; } }
/* マイブロック（保存したブロック） */
.my-tile { position: relative; min-width: 0; cursor: pointer; }
.my-tile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 21, 31, .6); color: #fff; font-size: 12px; line-height: 20px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.my-tile:hover .tile-del, .tile-del:focus-visible { opacity: 1; }
@media (hover: none) { .tile-del { opacity: 1; } }
.sample-pick { font-size: 12px; height: 28px; padding: 0 6px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; }
.tile svg { width: 100%; height: auto; display: block; background: #f6f7fa; border-radius: 6px; color: #9aa0ae; }
.tile svg .a { fill: var(--ui-accent); }
.tile svg .d { fill: #4b5162; }
.tile svg .m { fill: #c5c9d4; }
.tile svg .l2 { fill: #fff; stroke: #d5d8e0; stroke-width: .8; }
.tile svg .sd { stroke: #8a90a0; stroke-width: 1.6; }
.tile span { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; }

/* ページ一覧 */
.pages { display: flex; flex-direction: column; gap: 6px; }
.page-item { border: 1px solid var(--ui-line); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: #fff; }
.page-item:hover { border-color: #cfd2dc; }
.page-item.on { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); cursor: default; }
.page-item .pi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.page-item .pi-name { font-weight: 700; }
.page-item .pi-slug { color: var(--ui-sub); font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; }
.page-item .pf { margin-top: 10px; }

/* テーマ */
/* 設定項目の「？」（押すと説明を出す） */
.pf-q { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid #cfd2dc; background: #fff; color: var(--ui-sub); font: 700 10.5px/1 var(--ui-font); cursor: pointer; vertical-align: 1px; }
.pf-q:hover, .pf-q[aria-expanded="true"] { color: var(--ui-accent); border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.pf-toggle-row { display: flex; align-items: center; gap: 2px; }
.pf-help { display: block; margin-top: 4px; }
.imp-slug { margin: -2px 0 10px 28px; }
/* 自由な段組みの「列の中身」 */
.cells { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.cell { min-width: 0; border: 1px solid var(--ui-line); border-radius: 10px; padding: 8px; background: #fafbfd; }
.cell-item, .cell-item-body { min-width: 0; }
.cell-head { font-size: 11.5px; font-weight: 700; color: var(--ui-sub); margin: 0 2px 6px; }
.cell-item { background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; margin-bottom: 6px; }
.cell-item-head { display: flex; align-items: center; gap: 1px; padding: 3px; }
.cell-item-name { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 5px 6px; font-weight: 600; font-size: 12.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; }
.cell-item-name:hover { background: var(--ui-accent-soft); }
.cell-item-head .btn.sm { padding: 0 5px; min-width: 26px; }
.cell-item-head svg { width: 14px; height: 14px; }
.cell-item-body { padding: 6px 10px 10px; border-top: 1px solid var(--ui-line); }
.cell-add { width: 100%; }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swatch { border: 1px solid var(--ui-line); border-radius: 10px; padding: 8px; cursor: pointer; background: #fff; text-align: left; }
.swatch:hover { border-color: var(--ui-accent); }
.swatch .sw-colors { display: flex; height: 22px; border-radius: 5px; overflow: hidden; border: 1px solid rgba(0,0,0,.06); }
.swatch .sw-colors i { flex: 1; }
.swatch span { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; }
.swatch small { display: block; margin-top: 1px; font-size: 10.5px; line-height: 1.4; color: var(--ui-sub); }
.swatch.on { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft); }

/* プロパティフォーム */
.pf { margin-bottom: 14px; }
.pf > label, .pf .pf-label { display: block; font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.pf input[type=text], .pf textarea, .pf select { width: 100%; border: 1px solid var(--ui-line); border-radius: 8px; padding: 7px 9px; background: #fff; outline: none; }
.pf textarea { resize: vertical; line-height: 1.6; min-height: 64px; }
.pf input[type=text]:focus, .pf textarea:focus, .pf select:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.pf small { display: block; color: var(--ui-sub); font-size: 11px; margin-top: 5px; line-height: 1.5; }
.pf-row { display: flex; gap: 8px; align-items: center; }
.pf-row input[type=range] { flex: 1; accent-color: var(--ui-accent); }
.pf-row .val { width: 48px; text-align: right; color: var(--ui-sub); font-variant-numeric: tabular-nums; }
.pf-color { display: flex; gap: 8px; align-items: center; }
.pf-color input[type=color] { width: 36px; height: 32px; padding: 2px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; cursor: pointer; }
.pf-color input[type=text] { font-family: ui-monospace, Menlo, monospace; }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 12px; }
.switch input { appearance: none; width: 34px; height: 20px; border-radius: 20px; background: #d1d4dc; position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--ui-accent); }
.switch input:checked::after { transform: translateX(14px); }
.pimg { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; }
.pimg-prev { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--ui-line); background: #f1f2f5 center / cover no-repeat; }
.pimg-prev.empty { background-image: repeating-linear-gradient(45deg, #eceef2 0 6px, #f6f7f9 6px 12px); }
.pimg-actions { display: flex; gap: 6px; margin-top: 6px; }
.link-picker { display: flex; gap: 6px; }
.link-picker select { width: 92px; flex: none; }

.pl { display: flex; flex-direction: column; gap: 6px; }
.pl-item { border: 1px solid var(--ui-line); border-radius: 9px; background: #fff; }
.pl-item[open] { border-color: #cfd2dc; }
.pl-item summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 7px 6px 7px 10px; cursor: pointer; font-weight: 600; }
.pl-item summary::-webkit-details-marker { display: none; }
.pl-item summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--ui-sub); border-bottom: 1.6px solid var(--ui-sub); transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: 2px; }
.pl-item[open] summary::before { transform: rotate(45deg); }
.pl-item summary .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-item .mini { width: 24px; height: 24px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ui-sub); display: grid; place-items: center; }
.pl-item .mini:hover { background: var(--ui-bg); color: var(--ui-text); }
.pl-item .mini.del:hover { color: var(--ui-danger); }
.pl-item .mini svg { width: 14px; height: 14px; }
.pl-body { padding: 4px 10px 2px; border-top: 1px solid var(--ui-line); }
.pl-body .pf { margin: 10px 0; }
.add-btn { border: 1px dashed #c9ccd6; background: none; border-radius: 9px; padding: 8px; cursor: pointer; color: var(--ui-sub); font-weight: 600; }
.add-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }

.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.panel-head h2 { margin: 0; font-size: 15px; }
.panel-desc { color: var(--ui-sub); font-size: 12px; margin: 4px 0 12px; line-height: 1.6; }
.panel-actions { display: flex; gap: 4px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ui-line); }
.panel-actions .btn { flex: 1; justify-content: center; padding: 0 6px; font-size: 12px; }
.panel-actions .btn svg { width: 14px; height: 14px; }
.empty-panel { text-align: center; padding: 40px 10px 20px; color: var(--ui-sub); }
.empty-panel .big { font-size: 34px; line-height: 1; margin-bottom: 12px; color: #c5c9d4; }
.empty-panel h3 { color: var(--ui-text); font-size: 14px; margin: 0 0 6px; }
.kbd-list { margin-top: 24px; text-align: left; }
.kbd-list div { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid var(--ui-line); font-size: 12px; }
kbd { font-family: ui-monospace, Menlo, monospace; font-size: 11px; background: var(--ui-bg); border: 1px solid var(--ui-line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--ui-text); }

/* ステージ（キャンバスは iframe。取り込んだコードのCSS・メディアクエリをそのまま効かせるため） */
#stage { overflow: hidden; padding: 20px 28px; display: flex; justify-content: center; min-height: 0; }
#frame { width: 100%; max-width: 100%; height: 100%; background: #fff; box-shadow: 0 1px 3px rgba(20,20,40,.06), 0 12px 40px rgba(20,20,40,.08); border-radius: 8px; overflow: hidden; transition: max-width .3s ease; }
#frame.dev-tablet { max-width: 820px; }
/* body のスクリプトの動きを確かめる（IMP-A11） */
#stage { position: relative; }
#stage.has-note { padding-top: 56px; }
#frame { position: relative; }
.script-note { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 40px); padding: 5px 6px 5px 14px; border-radius: 999px; background: #fff8eb; border: 1px solid #f0c77a; color: #8a5a00; font-size: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .06); white-space: nowrap; }
.script-note span { overflow: hidden; text-overflow: ellipsis; }
.live-view { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #fff; }
.live-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #1e1b4b; color: #e0defc; font-size: 12px; }
.live-view iframe { flex: 1; width: 100%; border: 0; }
#frame.dev-mobile { max-width: 390px; }
#canvas { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

.btn.code { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; margin-left: 6px; }
.btn.code:hover { background: #ccfbf1; border-color: #5eead4; }
.code-input { width: 100%; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--ui-line); border-radius: 8px; padding: 10px 12px; resize: vertical; background: #fbfbfd; outline: none; tab-size: 2; }
.code-input:focus { border-color: #0f766e; box-shadow: 0 0 0 3px #ccfbf1; }
/* コードの色分け（IMP-B15）：色は下に重ねた pre で付け、上の textarea の文字は透明にする */
.code-ed { position: relative; }
.code-ed .code-input { position: relative; z-index: 1; display: block; background: transparent; color: transparent; caret-color: var(--ui-text); white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-gutter: stable; }
.code-ed .code-input::selection { background: rgba(79, 70, 229, .25); color: transparent; }
.code-hl { position: absolute; inset: 0; margin: 0; overflow: hidden; pointer-events: none; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background: #fbfbfd; color: #1d2030; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; scrollbar-gutter: stable; }
.hl-t { color: #6d28d9; }
.hl-a { color: #0f766e; }
.hl-s { color: #b45309; }
.hl-c { color: #7c8294; font-style: italic; }
.hl-k { color: #be185d; }
.code-probs { margin: 6px 0 0; padding: 8px 10px 8px 26px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 12px; line-height: 1.6; }
.imp-grid { display: grid; grid-template-columns: 1fr 290px; gap: 20px; }
.imp-grid .pf-label { font-weight: 700; font-size: 12px; margin: 0 0 6px; display: flex; justify-content: space-between; align-items: center; }
.radio { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--ui-line); border-radius: 9px; margin-bottom: 6px; cursor: pointer; line-height: 1.5; }
.radio:has(input:checked) { border-color: #0f766e; background: #f0fdfa; }
.radio input { margin-top: 3px; accent-color: #0f766e; }
.radio small { display: block; color: var(--ui-sub); font-size: 11px; }
.rights { background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; padding: 10px 12px; display: flex; gap: 8px; font-size: 12px; line-height: 1.6; cursor: pointer; margin-top: 12px; }
.rights input { margin-top: 3px; flex: none; align-self: flex-start; width: 15px; height: 15px; }
.warn-list { margin: 0; padding-left: 18px; color: #92400e; line-height: 1.7; }
.el-card { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px; padding: 10px 12px 2px; margin-bottom: 16px; }
.el-title { font: 700 12px ui-monospace, Menlo, monospace; color: #92400e; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.el-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.ci-label { display: flex; justify-content: space-between; gap: 6px; }
.ci-label code { font-size: 10.5px; color: var(--ui-sub); font-weight: 500; }
.ci-rich { font-size: 12px; background: var(--ui-bg); border-radius: 8px; padding: 8px 10px; color: var(--ui-sub); line-height: 1.6; }
.ci-rich div { color: var(--ui-text); margin-bottom: 4px; max-height: 60px; overflow: hidden; }
.adv { border: 1px solid var(--ui-line); border-radius: 10px; margin-top: 18px; }
.adv > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; list-style: none; }
.adv > summary::-webkit-details-marker { display: none; }
.adv > div { padding: 0 12px 12px; }
/* たたんで見せる設定のまとまり（編集画面をすっきりさせる） */
.more { border-top: 1px solid var(--ui-line); margin-top: 14px; }
.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 2px; font-weight: 700; font-size: 12.5px; color: var(--ui-sub); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.more[open] > summary::before { transform: rotate(45deg); }
.more > summary:hover { color: var(--ui-text); }
.more > div { padding: 2px 0 4px; }
.el-card .more { margin-top: 6px; }
/* ブロックの「…」（その他の操作） */
.panel-actions .act-more { position: relative; flex: none; }
.act-more > summary { list-style: none; padding: 0 12px; font-weight: 800; letter-spacing: .08em; }
.act-more > summary::-webkit-details-marker { display: none; }
.act-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 210px; background: #fff; border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,20,40,.14); padding: 6px; }
.act-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.act-menu button:hover { background: var(--ui-bg); }
/* 部品を探す */
.blk-search { width: 100%; height: 34px; border: 1px solid var(--ui-line); border-radius: 8px; padding: 0 10px; margin: 0 0 10px; background: #fff; outline: none; }
.blk-search:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.script-item { display: flex; gap: 8px; align-items: center; border: 1px solid var(--ui-line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font: 11px ui-monospace, Menlo, monospace; }
.script-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.script-item b { font-family: var(--ui-font); font-size: 10px; background: var(--ui-bg); padding: 1px 6px; border-radius: 4px; }
.tpl-thumb iframe { width: 1200px; height: 1000px; border: 0; transform: scale(.19); transform-origin: 0 0; position: absolute; top: 0; left: 0; pointer-events: none; }
.tpl-thumb.code-start { background: linear-gradient(135deg, #0f172a, #134e4a); display: grid; place-items: center; }
.tpl-thumb.code-start pre { margin: 0; color: #99f6e4; font: 11px/1.6 ui-monospace, Menlo, monospace; opacity: .9; }
.tpl-card.featured { border-color: #5eead4; box-shadow: 0 0 0 3px #ccfbf1; }

/* モーダル・トースト */
.modal { position: fixed; inset: 0; background: rgba(18,18,32,.45); display: grid; place-items: center; z-index: 100; padding: 24px; backdrop-filter: blur(2px); }
.modal-box { background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.3); width: min(960px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.modal-box.sm { width: min(420px, 100%); }
.modal-head { padding: 20px 24px 6px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-head p { margin: 6px 0 0; color: var(--ui-sub); }
.modal-body { padding: 16px 24px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tpl-card { border: 1px solid var(--ui-line); border-radius: 12px; overflow: hidden; cursor: pointer; background: #fff; text-align: left; padding: 0; transition: border-color .12s, box-shadow .12s, transform .12s; }
.tpl-card:hover { border-color: var(--ui-accent); box-shadow: 0 10px 28px rgba(79,70,229,.16); transform: translateY(-2px); }
.tpl-thumb { height: 190px; overflow: hidden; position: relative; background: #f4f5f8; border-bottom: 1px solid var(--ui-line); pointer-events: none; }
.tpl-thumb .bs-root { width: 1200px; transform: scale(.19); transform-origin: 0 0; position: absolute; top: 0; left: 0; }
.tpl-info { padding: 12px 14px 14px; }
.tpl-info b { display: block; font-size: 14px; }
.tpl-info span { color: var(--ui-sub); font-size: 12px; line-height: 1.5; display: block; margin-top: 4px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1d2030; color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 200; }
.toast.err { background: var(--ui-danger); }

/* ===== 使いやすさ：画面の文字サイズ・操作モード ===== */
html[data-uisize="l"] { --z: 1.15; --zt: 1.06; }
html[data-uisize="xl"] { --z: 1.3; --zt: 1.1; }
#app { grid-template-columns: calc(272px * var(--z, 1)) 1fr calc(316px * var(--z, 1)); grid-template-rows: calc(52px * var(--zt, 1)) 1fr; }
.tb { zoom: var(--zt, 1); }
.side, .modal-box, .toast { zoom: var(--z, 1); }
.modal-box { max-width: calc((100vw - 48px) / var(--z, 1)); max-height: calc((100vh - 48px) / var(--z, 1)); }
html[data-mode="easy"] .adv-only { display: none !important; }
:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.icon-btn.labeled { width: auto; padding: 0 9px; gap: 4px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; }
.mode-switch { display: flex; background: var(--ui-bg); border-radius: 9px; padding: 3px; margin-left: 6px; }
.mode-switch button { border: 0; background: none; padding: 5px 10px; border-radius: 7px; font-weight: 700; font-size: 12px; color: var(--ui-sub); cursor: pointer; }
.mode-switch button.on { background: #fff; color: var(--ui-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
@media (max-width: 1400px) { .save-state { display: none; } }
@media (max-width: 1250px) { .brand-tag, .mode-switch { display: none; } }

.toast { display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box; } /* left:50% だと幅が画面の半分に縮むため、中身の幅にする */
.toast-act { flex: none; white-space: nowrap; background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 7px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.toast-act:hover { background: rgba(255,255,255,.3); }

/* 何も選んでいないときの「やりたいこと」 */
.empty-panel { padding: 16px 6px 4px; }
.quick { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.quick-item { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--ui-line); background: #fff; border-radius: 12px; padding: 11px 12px; cursor: pointer; }
.quick-item:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.qi-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--ui-accent-soft); color: var(--ui-accent); display: grid; place-items: center; flex: none; }
.qi-icon svg { width: 19px; height: 19px; }
.quick-item b { display: block; font-size: 13.5px; }
.quick-item small { color: var(--ui-sub); font-size: 11.5px; }

/* ブロック選択（大きなカード） */
.picker-cat { font-weight: 700; font-size: 12px; color: var(--ui-sub); margin: 18px 2px 8px; }
.picker-cat:first-child { margin-top: 0; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.picker-card { border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; padding: 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.picker-card:hover { border-color: var(--ui-accent); box-shadow: 0 6px 16px rgba(79,70,229,.14); }
.picker-card.code { border-color: #99f6e4; background: #f0fdfa; }
.picker-card svg { width: 100%; height: auto; display: block; background: #f6f7fa; border-radius: 8px; color: #9aa0ae; }
.picker-card svg .a { fill: var(--ui-accent); }
.picker-card svg .d { fill: #4b5162; }
.picker-card svg .m { fill: #c5c9d4; }
.picker-card svg .l2 { fill: #fff; stroke: #d5d8e0; stroke-width: .8; }
.picker-card svg .sd { stroke: #8a90a0; stroke-width: 1.6; }
.picker-card b { font-size: 13.5px; }
.picker-card span { font-size: 11.5px; color: var(--ui-sub); line-height: 1.5; }

/* 使い方ツアー */
#tour { position: fixed; inset: 0; z-index: 300; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15,18,40,.55); outline: 3px solid #fbbf24; pointer-events: none; }
.tour-bubble { position: fixed; background: #fff; border-radius: 14px; padding: 18px 20px 14px; box-shadow: 0 20px 50px rgba(0,0,0,.3); font-size: calc(15px * var(--z, 1)); line-height: 1.75; }
.tour-bubble p { margin: 6px 0 4px; }
.tour-step { font-size: 12px; color: var(--ui-accent); font-weight: 700; }
.tour-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* 設定・チェック */
.seg { display: flex; background: var(--ui-bg); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 8px; font-weight: 700; cursor: pointer; color: var(--ui-sub); }
.seg button.on { background: #fff; color: var(--ui-accent); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.steps { padding-left: 20px; line-height: 1.8; margin: 0 0 14px; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.check-list li { display: flex; gap: 12px; align-items: center; border: 1px solid var(--ui-line); border-radius: 10px; padding: 10px 12px; }
.check-list li > div { flex: 1; line-height: 1.6; }
.ck-badge { flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #fef3c7; color: #92400e; }
.ck-info .ck-badge { background: #e0f2fe; color: #075985; }
.mini-sw { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.sw-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); cursor: pointer; padding: 0; }
.pimg.drag { outline: 2px dashed var(--ui-accent); outline-offset: 3px; border-radius: 8px; }
.pf-color .btn { flex: none; }
/* 大きい文字サイズでも上部バーのラベルが折り返さないようにする */
.tb button, .tb .brand, .tb .save-state, .mode-switch button { white-space: nowrap; }
html[data-uisize="l"] .save-state, html[data-uisize="xl"] .save-state, html[data-uisize="xl"] .brand-tag { display: none; }

/* ===== クラウド（ログイン・マイサイト・公開） ===== */
.site-btn { max-width: 220px; border: 1px solid var(--ui-line); background: #fff; }
.site-btn span { overflow: hidden; text-overflow: ellipsis; }
.pub-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; display: inline-block; flex: none; }
.pf input[type=email], .pf input[type=password] { width: 100%; border: 1px solid var(--ui-line); border-radius: 8px; padding: 9px 10px; background: #fff; outline: none; }
.pf input[type=email]:focus, .pf input[type=password]:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form .pf { margin: 0; }
.auth-err { background: #fef2f2; color: var(--ui-danger); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.6; }
.auth-alt { text-align: center; margin-top: 14px; font-size: 12px; }
.auth-ok { background: #ecfdf5; color: #065f46; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.6; }
.auth-forgot { display: block; margin: 10px auto 0; background: none; border: 0; padding: 4px; color: var(--ui-sub); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.auth-forgot:hover { color: inherit; }
.auth-alt a { color: var(--ui-sub); }
.site-list { display: flex; flex-direction: column; gap: 8px; }
.site-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ui-line); border-radius: 12px; padding: 12px 14px; }
.site-row.on { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-main b { font-size: 14px; }
.sr-main small { color: var(--ui-sub); }
.sr-pub { font-size: 12px; color: #15803d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ui-bg); color: var(--ui-sub); white-space: nowrap; }
.badge.on { background: #dcfce7; color: #15803d; }
.pub-status { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; }
.pub-status a { color: var(--ui-accent); word-break: break-all; }
.slug-row { display: flex; align-items: center; gap: 4px; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.slug-row span { color: var(--ui-sub); white-space: nowrap; }
.slug-row input { flex: 1; min-width: 120px; font: inherit !important; }
.pub-prog { height: 6px; background: var(--ui-bg); border-radius: 6px; overflow: hidden; margin: 8px 0; }
.pub-prog i { display: block; height: 100%; width: 0; background: var(--ui-accent); transition: width .2s; }
.pub-msg { border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 13px; line-height: 1.6; }
.pub-msg.ok { background: #f0fdf4; color: #166534; }
.pub-msg.ok a { color: #15803d; font-weight: 700; word-break: break-all; }
.pub-msg.err { background: #fef2f2; color: var(--ui-danger); }
.ver-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--ui-line); font-size: 12.5px; }
.hint.warn { background: #fffbeb; color: #92400e; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.modal-foot .btn.danger { margin-right: auto; }
/* 上部バーの右側（保存状態・公開ボタン）は常に見えるようにし、狭いときは左側を縮める */
.tb-r, .tb-c { flex-shrink: 0; }
.tb-l { min-width: 0; overflow: hidden; }
.tb-select { min-width: 120px; max-width: 190px; }
.site-btn { max-width: 180px; }
@media (max-width: 1800px) { .brand-tag { display: none; } }
/* 幅が狭いときは「ブロックサイト」の文字を消してロゴの印だけにし、操作ボタンの場所を空ける */
@media (max-width: 1500px) { .tb .brand { font-size: 0; gap: 0; } }

/* ===== 構成（アウトライン） ===== */
.outline { display: flex; flex-direction: column; gap: 4px; }
.ol-row { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ui-line); border-radius: 9px; padding: 6px 6px 6px 8px; background: #fff; cursor: pointer; }
.ol-row:hover { border-color: #cfd2dc; }
.ol-row.on { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.ol-num { width: 20px; height: 20px; border-radius: 6px; background: var(--ui-bg); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ui-sub); flex: none; }
.ol-label { flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-label small { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--ui-sub); background: var(--ui-bg); padding: 1px 5px; border-radius: 4px; }
.ol-row .mini { width: 24px; height: 24px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ui-sub); display: grid; place-items: center; flex: none; }
.ol-row .mini:hover { background: var(--ui-bg); color: var(--ui-text); }
.ol-row .mini.del:hover { color: var(--ui-danger); }
.ol-row .mini svg { width: 14px; height: 14px; }
.tabs button { font-size: 12.5px; }

/* くり返し項目 */
.rep-box { border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 9px; padding: 8px 10px 2px; margin: 4px 0 12px; }
.rep-title { font-weight: 700; font-size: 12.5px; color: #3730a3; }
.rep-box small { display: block; color: var(--ui-sub); font-size: 11px; margin: 2px 0 8px; }

/* サイトの色（取り込んだコード） */
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.cchip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ui-line); border-radius: 9px; padding: 5px 8px; background: #fff; cursor: pointer; font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.cchip input { width: 26px; height: 26px; padding: 0; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; background: none; cursor: pointer; flex: none; }
.cchip small { margin-left: auto; color: var(--ui-sub); font-family: var(--ui-font); }

/* 文字の一括置換 */
.rep-info { margin-top: 6px; font-size: 13px; }
.rep-hits { list-style: none; padding: 0; margin: 8px 0 0; max-height: 220px; overflow: auto; border: 1px solid var(--ui-line); border-radius: 8px; }
.rep-hits li { padding: 7px 10px; border-bottom: 1px solid var(--ui-line); display: flex; flex-direction: column; gap: 2px; }
.rep-hits li:last-child { border-bottom: 0; }
.rep-hits li span { font-weight: 700; font-size: 12px; }
.rep-hits li small { color: var(--ui-sub); font-size: 12px; }
.rep-hits mark { background: #fef08a; padding: 0 1px; }

/* ===== お客様モード（制作者ロック） ===== */
html[data-client="1"] .pro-only,
html[data-client="1"] .panel-actions,
html[data-client="1"] .el-card > .el-actions,
html[data-client="1"] .ol-row .mini,
html[data-client="1"] #leftBody .btn.block,
html[data-client="1"] .page-item .pf,
html[data-client="1"] .page-item .btn.danger,
html[data-client="1"] .mode-switch { display: none !important; }

/* ===== スマホ（幅 820px 以下）：文字と写真の変更に絞った画面（IMP-C02a） ===== */
.sheet-handle { display: none; }
html[data-mobile="1"] .pro-only,
html[data-mobile="1"] .el-card > .el-actions,
html[data-mobile="1"] .mode-switch,
html[data-mobile="1"] .side-l,
html[data-mobile="1"] .tb-c,
html[data-mobile="1"] .brand,
html[data-mobile="1"] .tb-sep,
html[data-mobile="1"] #siteBtn,
html[data-mobile="1"] #importBtn,
html[data-mobile="1"] #helpBtn,
html[data-mobile="1"] #findBtn,
html[data-mobile="1"] #exportBtn,
html[data-mobile="1"] #redoBtn,
html[data-mobile="1"] .save-state { display: none !important; }
html[data-mobile="1"] #app { grid-template-columns: 1fr; grid-template-rows: 52px 1fr; min-width: 0; }
html[data-mobile="1"] .tb { gap: 4px; padding: 0 8px; zoom: 1; }
html[data-mobile="1"] .tb-l { flex: 1; }
html[data-mobile="1"] .tb-select { min-width: 0; max-width: none; width: 100%; }
html[data-mobile="1"] .tb-r { gap: 2px; }
html[data-mobile="1"] .tb-r .btn, html[data-mobile="1"] .tb-r .icon-btn { font-size: 0; gap: 0; padding: 0 9px; }
html[data-mobile="1"] .tb-r .btn svg, html[data-mobile="1"] .tb-r .icon-btn svg { width: 18px; height: 18px; margin: 0; }
html[data-mobile="1"] #stage { padding: 0 0 46px; }
/* スマホでは下から編集パネルが出るため、知らせは上に出す（パネルの見出しに重ならないように。V01） */
html[data-mobile="1"] .toast { bottom: auto; top: 60px; max-width: calc(100vw - 24px); }
html[data-mobile="1"] #frame { max-width: 100% !important; border-radius: 0; box-shadow: none; }
html[data-mobile="1"] .side-r { position: fixed; left: 0; right: 0; bottom: 0; height: 62vh; z-index: 40; border: 0; border-top: 1px solid var(--ui-line); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(20,20,40,.16); transform: translateY(calc(100% - 46px)); transition: transform .25s ease; zoom: 1; }
html[data-mobile="1"] .side-r.open { transform: none; }
html[data-mobile="1"] .sheet-handle { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; width: 100%; height: 46px; padding-top: 7px; border: 0; background: none; color: var(--ui-sub); font-weight: 700; font-size: 12px; cursor: pointer; }
html[data-mobile="1"] .sheet-handle span { width: 40px; height: 4px; border-radius: 4px; background: #cfd2dc; }
.client-btn { background: #fff7ed; border-color: #fdba74; color: #9a3412; margin-left: 6px; }
.client-btn:hover { background: #ffedd5; border-color: #fb923c; }
.client-btn span { margin-left: 6px; text-decoration: underline; font-weight: 600; }
.lock-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lock-list { border: 1px solid var(--ui-line); border-radius: 10px; max-height: 240px; overflow: auto; padding: 4px 12px 8px; }
.lock-page { font-size: 11px; font-weight: 700; color: var(--ui-sub); margin: 10px 0 4px; }
.lock-item { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; cursor: pointer; }
.lock-item input { accent-color: var(--ui-accent); }

/* ハイコントラストの編集画面（使い方・設定の「コントラストを強くする」。IMP-C10） */
html[data-contrast="high"] { --ui-bg: #ffffff; --ui-line: #5d6272; --ui-text: #000000; --ui-sub: #262a36; --ui-accent: #3524b5; --ui-accent-soft: #e3e0ff; }
html[data-contrast="high"] .btn, html[data-contrast="high"] input, html[data-contrast="high"] select, html[data-contrast="high"] textarea, html[data-contrast="high"] .tile, html[data-contrast="high"] .swatch, html[data-contrast="high"] .cell-item { border-color: #5d6272; }
html[data-contrast="high"] :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }
html[data-contrast="high"] .hint, html[data-contrast="high"] small, html[data-contrast="high"] .panel-desc, html[data-contrast="high"] .sec-title { color: #262a36; }
html[data-contrast="high"] .tabs button { color: #262a36; }
html[data-contrast="high"] .btn.ghost { border-color: #5d6272; }

/* 最初の画面の「どんなサイトを作りますか？」（IMP-C11） */
.purpose { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.purpose-q { font-weight: 700; margin-right: 6px; }
.purpose .btn.on { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-soft); }
.tpl-card { position: relative; }
.tpl-card.rec { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft); }
.rec-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 10px; border-radius: 999px; background: var(--ui-accent); color: #fff; font-size: 11.5px; font-weight: 700; }

/* 起動中の「読み込み中…」（クラウドの準備を待つあいだ、真っ白に見えないように。app.js が body に bs-ready を付けたら消える） */
body.bs-boot:not(.bs-ready)::before { content: ""; position: fixed; inset: 0; z-index: 1000; background: var(--ui-bg); }
body.bs-boot:not(.bs-ready)::after { content: "読み込み中…"; position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 1001; padding: 14px 22px 14px 48px; border-radius: 10px; background: var(--ui-panel); border: 1px solid var(--ui-line); color: var(--ui-sub); font-size: 15px; font-weight: 600;
  background-image: radial-gradient(circle, var(--ui-accent) 0 5px, transparent 6px); background-repeat: no-repeat; background-position: 20px center; background-size: 12px 12px; animation: bs-boot 1s ease-in-out infinite; }
@keyframes bs-boot { 50% { background-size: 4px 4px; } }
@media (prefers-reduced-motion: reduce) { body.bs-boot:not(.bs-ready)::after { animation: none; } }

/* 修正依頼・コメント（IMP-I04） */
.req-btn { margin-top: 14px; border-style: dashed; }
.req-item { align-items: flex-start; gap: 12px; }
.req-item .req-body { min-width: 0; flex: 1; }
.req-item .req-text { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.req-item.done .req-body { opacity: .6; }
.req-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex-shrink: 0; max-width: 45%; }
/* 書き出す先（IMP-F07） */
.host-seg { flex-wrap: wrap; }
.host-steps { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--ui-bg); line-height: 1.7; }
.err-text { color: var(--ui-danger); }
/* 公開したあとに変更があるとき、公開ボタンに印（押し忘れの防止） */
#publishBtn { position: relative; }
#publishBtn[data-pending="1"]::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; border: 2px solid var(--ui-panel); }
/* 公開までのやることリスト（IMP-U03） */
.todo-card { border: 1px solid var(--ui-line); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; background: #fff; }
.todo-head { display: flex; align-items: center; gap: 8px; }
.todo-head b { flex: 1; }
.todo-head span { color: var(--ui-sub); font-size: 12px; font-weight: 700; }
.todo-x { border: 0; background: none; cursor: pointer; color: var(--ui-sub); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.todo-x:hover { background: var(--ui-bg); }
.todo-bar { height: 6px; border-radius: 3px; background: var(--ui-bg); margin: 8px 0 6px; overflow: hidden; }
.todo-bar i { display: block; height: 100%; background: #16a34a; border-radius: 3px; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--ui-line); }
.todo-list li:first-child { border-top: 0; }
.todo-mark { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cfd2dc; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.todo-list li.ok .todo-mark { background: #16a34a; border-color: #16a34a; }
.todo-list li.ok span, .todo-list li.ok .todo-go { color: var(--ui-sub); text-decoration: line-through; }
.todo-list small { display: block; color: var(--ui-sub); font-size: 11px; line-height: 1.5; }
.todo-go { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ui-accent); cursor: pointer; text-align: left; }
.todo-go:hover { text-decoration: underline; }
.todo-done { margin: 8px 0 0; color: #16a34a; font-weight: 700; }
/* お試し（登録なし）：新規登録のボタン */
.trial-btn { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-soft); }
.trial-btn:hover { background: #e2e5ff; border-color: var(--ui-accent); }
/* 公開前チェックからヘルプへ（IMP-U20） */
.ck-help { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ui-accent); }
/* お試し中の案内（IMP-U13） */
.trial-hint { border: 1px solid #c7d2fe; background: var(--ui-accent-soft); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.trial-hint b { color: var(--ui-accent); }
.trial-hint p { margin: 4px 0 10px; font-size: 12px; line-height: 1.6; color: var(--ui-text); }
.trial-hint-acts { display: flex; flex-wrap: wrap; gap: 6px; }
/* SNS で共有したときの見え方（IMP-U14） */
.sns-prev { margin-top: 12px; }
.sns-card { display: flex; border: 1px solid var(--ui-line); border-radius: 12px; overflow: hidden; background: #fff; max-width: 520px; }
.sns-img { flex: 0 0 38%; aspect-ratio: 1.91 / 1; background: var(--ui-bg) center / cover no-repeat; display: grid; place-items: center; color: var(--ui-sub); font-size: 12px; }
.sns-txt { min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.sns-txt small { color: var(--ui-sub); font-size: 11px; }
.sns-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sns-txt span { font-size: 12px; color: var(--ui-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* デザインの着せ替え（IMP-U19） */
.restyle-btn { margin-top: 10px; }
.restyle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.restyle-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; }
.restyle-card:hover, .restyle-card:focus-visible { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft); }
.restyle-card small { color: var(--ui-sub); font-size: 11px; }
.restyle-sw { display: flex; gap: 6px; align-items: center; width: 100%; height: 34px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--ui-line); }
.restyle-sw i { width: 18px; height: 18px; border-radius: 50%; }
/* 同時に編集したときの違い（IMP-U17） */
.conflict-list { max-height: 320px; overflow: auto; border: 1px solid var(--ui-line); border-radius: 10px; padding: 8px 12px; }
.conflict-list ul { margin: 4px 0 10px; padding-left: 1.2em; font-size: 12px; line-height: 1.7; }
/* 「どんなサイトを作りますか？」で絞り込んだとき（IMP-C11 の改良） */
.purpose-note { margin: -6px 0 12px; font-size: 12.5px; color: var(--ui-sub); }
/* 右のパネルのタブ（中身・見た目・動き・設定。2026-09-14） */
.ptabs { display: flex; gap: 3px; margin: 12px 0 4px; padding: 3px; background: var(--ui-bg); border-radius: 10px; }
.ptab { flex: 1; border: 0; background: none; padding: 7px 0; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--ui-sub); cursor: pointer; }
.ptab:hover { color: var(--ui-text); }
.ptab.on { background: #fff; color: var(--ui-accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ptab-lead { margin: 4px 2px 12px; font-size: 12px; line-height: 1.6; color: var(--ui-sub); }
.warn-hint { color: #b45309 !important; }
.play-btn { margin: 8px 0 4px; }
/* 左右のパネルをしまう（2026-09-14） */
#app { grid-template-columns: var(--bs-lw, calc(272px * var(--z, 1))) 1fr var(--bs-rw, calc(316px * var(--z, 1))); }
html[data-fold-l="1"]:not([data-mobile="1"]) #app { --bs-lw: 40px; }
html[data-fold-r="1"]:not([data-mobile="1"]) #app { --bs-rw: 40px; }
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--ui-line); font-size: 11px; font-weight: 700; color: var(--ui-sub); flex-shrink: 0; }
.side-r .side-top { padding: 6px 12px 6px 8px; justify-content: flex-start; }
.fold-btn { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 7px; background: #fff; color: var(--ui-sub); font-size: 14px; line-height: 1; cursor: pointer; }
.fold-btn:hover { color: var(--ui-accent); border-color: var(--ui-accent); }
html[data-fold-l="1"]:not([data-mobile="1"]) .side-l > :not(.side-top),
html[data-fold-l="1"]:not([data-mobile="1"]) .side-l .side-top span,
html[data-fold-r="1"]:not([data-mobile="1"]) .side-r > :not(.side-top),
html[data-fold-r="1"]:not([data-mobile="1"]) .side-r .side-top span { display: none; }
html[data-fold-l="1"]:not([data-mobile="1"]) .side-top,
html[data-fold-r="1"]:not([data-mobile="1"]) .side-r .side-top { justify-content: center; padding: 6px 0; border-bottom: 0; }
html[data-mobile="1"] .side-top { display: none; }
/* やることリストから移ったとき、仮の値が残っている欄（IMP-V02） */
#panel .todo-field { background: #fef9c3; border-color: #f59e0b; }
/* 基本情報をまとめて入力（IMP-V03）の入口 */
.todo-sub { display: inline; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--ui-accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.basics-btn { width: 100%; justify-content: center; margin: 2px 0 12px; }
/* ファイルメニューのまとまり（IMP-V08） */
.menu { max-height: calc(100vh - 70px); overflow-y: auto; }
.menu-h { padding: 8px 10px 3px; font-size: 11px; font-weight: 700; color: var(--ui-sub); letter-spacing: .04em; }
.menu-h:first-child { padding-top: 3px; }
/* 構成タブのドラッグ（IMP-V10） */
.ol-row[draggable="true"] { cursor: grab; }
.ol-row.dragging { opacity: .45; }
.ol-row.drop-before { box-shadow: 0 -3px 0 var(--ui-accent); }
.ol-row.drop-after { box-shadow: 0 3px 0 var(--ui-accent); }
/* 押した部分だけの編集パネル（IMP-V15） */
.part-head { margin: 4px 0 6px; padding: 10px 12px; border: 1px solid var(--ui-accent); border-radius: 10px; background: var(--ui-accent-soft); }
.part-back { margin-bottom: 8px; max-width: 100%; height: auto; min-height: 32px; padding: 5px 10px; white-space: normal; text-align: left; line-height: 1.35; }
.part-title { display: flex; flex-direction: column; gap: 2px; }
.part-title small { color: var(--ui-sub); font-size: 11px; font-weight: 700; }
.part-title b { font-size: 15px; }
.part-head .hint { margin: 6px 0 0; }
/* リンク先を言葉で（IMP-V05） */
.link-desc { display: block; margin-top: 4px; color: var(--ui-sub); font-size: 12px; }
/* やりたいことから探す（IMP-V06） */
.finder-input { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 10px; }
.finder-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; }
.finder-list button { width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; font: inherit; cursor: pointer; }
.finder-list button.on, .finder-list button:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.finder-empty { color: var(--ui-sub); padding: 10px 2px; }
/* ファビコン・色（IMP-V09） */
.fav-prev { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--ui-line); }
.logo-sw { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.logo-sw button { width: 56px; height: 56px; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ui-line); cursor: pointer; }
.side-btn { width: 100%; justify-content: center; margin: 0 0 12px; }
/* 上のバーが狭いとき（1600px以下）は「探す」をアイコンだけにする（「コードを取り込む」が切れないように。名前は title・aria-label） */
@media (max-width: 1600px) { #findBtn { font-size: 0; gap: 0; padding: 0 9px; } #findBtn svg { margin: 0; } }
/* ページの選択欄はページ名だけになったため、少しせまくする（上のバーの「コードを取り込む」が切れないように。V01） */
.tb-select { min-width: 96px; max-width: 150px; }
/* さらに狭いとき（1360px以下）は「戻す」「進む」もアイコンだけにする（名前は aria-label・title） */
@media (max-width: 1360px) { .icon-btn.labeled span { display: none; } }
/* お試しからサービスの紹介に戻る */
.trial-back { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--ui-accent); font-weight: 700; }
.brand.brand-link { cursor: pointer; border-radius: 6px; }
.brand.brand-link:hover, .brand.brand-link:focus-visible { background: var(--ui-bg); }
/* 記号で選ぶ欄（IMP-V25）：文字の大きさ・太さ・揃え */
.seg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.seg-label { width: 44px; flex: none; font-size: 12px; font-weight: 700; color: var(--ui-sub); }
.seg-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.seg-btn { min-width: 38px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; cursor: pointer; color: var(--ui-ink, #1d2030); padding: 0 8px; }
.seg-btn:hover { background: var(--ui-bg); }
.seg-btn.on { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); }
.seg-btn svg { width: 17px; height: 17px; }
/* スライダー＋数値（IMP-V26）：記号のボタンの下に並べ、細かい値も決められるようにする */
.num-row { margin: -2px 0 12px; }
.num-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ui-accent, #4f46e5); }
.num-row .num-in { width: 64px; flex: none; text-align: right; padding: 4px 6px; font-size: 12px; }
.num-unit { font-size: 12px; color: var(--ui-sub); width: 14px; flex: none; } /* 単位がなくても幅を取り、大きさ・太さの欄の右端をそろえる */
/* 「構成」タブ：中の部品の一覧（IMP-V39） */
.ol-more { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ui-sub); font-size: 12px; font-weight: 700; padding: 4px 10px; cursor: pointer; }
.ol-more:hover { color: var(--ui-text); }
.ol-row.ol-kid { font-size: 12px; padding-top: 4px; padding-bottom: 4px; color: var(--ui-sub); }
.ol-row.ol-kid.on { color: var(--ui-text); }
/* 構成タブ：背景の飾りの数だけ知らせる行（クリックしても何も起きないので、控えめに出す。IMP-V48） */
.ol-row.ol-deco { color: var(--ui-sub); font-size: 12px; cursor: default; }
.ol-row.ol-deco:hover { background: none; }

/* 見た目違いを絵で選ぶ欄（IMP-V12） */
.look-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.look-btn { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 5px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; cursor: pointer; color: #9aa0ae; text-align: center; min-width: 0; }
.look-btn:hover { border-color: var(--ui-accent); }
.look-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.look-btn.on { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: 0 0 0 1px var(--ui-accent) inset; }
.look-btn svg { width: 100%; height: auto; display: block; background: #f6f7fa; border-radius: 5px; }
.look-btn svg .a { fill: var(--ui-accent); }
.look-btn svg .d { fill: #4b5162; }
.look-btn svg .m { fill: #c5c9d4; }
.look-btn svg .l2 { fill: #fff; stroke: #d5d8e0; stroke-width: .8; }
.look-btn svg .sd { stroke: #c5c9d4; }
.look-btn svg .ring-a { stroke: var(--ui-accent); color: var(--ui-accent); }
.look-btn span { font-size: 11px; line-height: 1.35; color: var(--ui-ink, #1d2030); overflow-wrap: anywhere; }
.look-btn.on span { color: var(--ui-accent); font-weight: 700; }