/* Layout: 最上部に「フォルダ見出し」の帯。その下に編集/一覧/比較のタブ。
   編集画面は左にチャート(スマホでは上に固定)、右(スマホでは下)に「値/見た目」の設定。
   （スキンの色・背景・値バー・スライダーは radar-core.css に分けた。研究所と共通。）
   明るさは4段: 背景 < パネル < 持ち上げたパネル < フォルダ帯。 */
* { box-sizing: border-box; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 16px; padding-block: 16px 36px; }
header.top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.bt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand small.sub { display: block; font-family: var(--f-body); letter-spacing: .22em; font-size: 12px; line-height: 1; color: var(--accent); font-weight: 700; opacity: .92; }
.brand h1 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(20px, 4.2vw, 30px); line-height: 1.15; letter-spacing: .04em; text-wrap: balance; }
.badge { font-family: var(--f-num); font-size: 12px; letter-spacing: .16em; color: var(--mute); border: 1px solid var(--line); padding: 2px 10px; border-radius: 3px; }

input[type=text], input[type=number], select {
  width: 100%; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line2);
  border-radius: 4px; padding: 7px 9px; font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn {
  background: var(--btnfill, var(--panel2)); box-shadow: var(--btnsh, none); color: var(--text); border: 1px solid var(--line2); border-radius: 4px;
  padding: 6px 12px; font: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.4; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--acfill, var(--accent)); color: var(--accent-ink); border-color: var(--acbd, var(--accent)); box-shadow: var(--acsh, none); font-weight: 700; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.wide { width: 100%; justify-content: center; border-style: dashed; }
.btn:disabled { opacity: .35; cursor: default; }
.btn:disabled:hover { border-color: var(--line2); }
.ico { width: 30px; height: 30px; padding: 0; justify-content: center; flex: none; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.field > label, .lbl { font-size: 12px; color: var(--mute); }
.hint { color: var(--mute); font-size: 12px; margin: 6px 0 0; }

/* フォルダ見出し（最も明るい帯） */
.fhead { position: relative; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: linear-gradient(180deg, var(--band), var(--panel2)); border: 1px solid var(--line2); border-radius: 8px; }
.fhead-l { min-width: 0; flex: 1 1 260px; }
.fkicker { display: block; font-size: 11px; letter-spacing: .2em; color: var(--accent); font-weight: 700; }
.fname { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; background: none; border: 0; padding: 2px 0; color: var(--text); font-family: var(--f-display); font-weight: 800; font-size: clamp(20px, 4.4vw, 28px); line-height: 1.3; cursor: pointer; text-align: left; }
.fname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.caret { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--accent); flex: none; margin-top: 2px; }
.fname:hover span { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.fcap { margin: 2px 0 0; color: var(--mute); font-size: 12px; }
.fmenu { position: absolute; z-index: 30; left: 10px; top: calc(100% - 6px); width: min(360px, calc(100vw - 32px)); background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 6px; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
.fm-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; color: var(--text); font: inherit; padding: 9px 10px; border-radius: 6px; cursor: pointer; text-align: left; }
.fm-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fm-item small { color: var(--mute); flex: none; }
.fm-item:hover { background: var(--band); }
.fm-item[aria-selected=true] { background: var(--band); color: var(--accent); font-weight: 700; }
.fm-new { display: block; width: 100%; margin-top: 4px; padding: 10px; background: none; border: 1px dashed var(--line2); border-radius: 6px; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.fm-new:hover { border-color: var(--accent); }

.fpanel { background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 16px; margin-top: 10px; }
.fpanel h2 { margin: 0 0 6px; font-size: 16px; font-family: var(--f-display); }
.fpanel .note { margin: 0 0 14px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; }
@media (max-width: 900px) { .fgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.fp-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.tpl { text-align: left; background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; color: var(--text); font: inherit; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpl:hover { border-color: var(--accent); }
.tpl b { font-size: 14px; }
.tpl span { color: var(--mute); font-size: 12px; }

/* タブ（アプリの主要操作なので、押せる大きなボタンにする） */
.tabbar { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.tabs { flex: 0 1 480px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; }
.tab { display: flex; align-items: center; justify-content: center; gap: 7px; background: none; border: 0; border-radius: 8px; color: var(--mute); padding: 10px 8px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.tab svg { flex: none; }
.tab:hover { color: var(--text); background: var(--panel2); }
.tab[aria-pressed=true] { background: var(--acfill, var(--accent)); color: var(--accent-ink); box-shadow: var(--acsh, 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent)); }
@media (max-width: 600px) { .tabs { flex: 1 1 auto; } .tab { padding: 10px 4px; font-size: 14px; gap: 5px; } .hsm { display: none; } }
#stage-body { margin-top: 16px; min-width: 0; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line2); color: var(--text); padding: 5px 12px; border-radius: 999px; font: inherit; cursor: pointer; flex: none; max-width: 70vw; }
.chip i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip[aria-pressed=true] { border-color: var(--accent); background: var(--panel2); }

/* 編集画面 */
.edit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.chartcol { position: sticky; top: 12px; z-index: 4; }
.chartbox { height: clamp(360px, 44vw, 540px); background: var(--cbg, var(--panel)); border: 1px solid var(--cborder); border-radius: 8px; min-width: 0; box-shadow: var(--cbox, 0 0 28px var(--cshadow)); }
@media (max-width: 900px) {
  .edit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chartcol { top: env(safe-area-inset-top, 0px); background: var(--bg); padding-block: 4px 6px; }
  .chartbox { height: var(--chart-h, clamp(250px, 40vh, 380px)); }
}
.editor { background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 14px; min-width: 0; --ic: var(--accent); }
.ptabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; background: var(--bg); padding: 3px; border-radius: 6px; margin-bottom: 16px; }
.ptab { background: none; border: 0; color: var(--mute); padding: 7px 4px; border-radius: 4px; font: inherit; font-weight: 700; cursor: pointer; }
.ptab[aria-pressed=true] { background: var(--band); color: var(--accent); box-shadow: 0 0 0 1px var(--line2); }
.sec { margin: 0 0 8px; font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.sec small { font-family: var(--f-num); letter-spacing: .18em; color: var(--mute); font-weight: 600; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

.sliders { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; }
.sl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.sl input[type=range] { grid-column: 1 / -1; }
  .lc { min-width: 0; line-height: 1.15; }
.lc .was { display: block; font-size: 10px; color: var(--accent); font-family: var(--f-num); }
.sl label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl .ownname { padding: 4px 6px; font-size: 12px; border-style: dashed; }
.nm { display: flex; align-items: center; gap: 3px; }
.nm .btn { width: 26px; height: 30px; padding: 0; justify-content: center; }
.nm .num { width: 54px; padding: 5px 4px; text-align: center; font-family: var(--f-num); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.num::-webkit-outer-spin-button, .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num { -moz-appearance: textfield; appearance: textfield; }
input[type=range] { touch-action: pan-y; width: 100%; accent-color: var(--ic); min-width: 0; }
.sl2 { display: grid; grid-template-columns: 8em minmax(0, 1fr) 4ch; gap: 10px; align-items: center; margin-bottom: 6px; }
.sl2 output { font-family: var(--f-num); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.stepper b { font-family: var(--f-num); font-size: 24px; font-weight: 700; min-width: 2ch; text-align: center; color: var(--accent); font-variant-numeric: tabular-nums; }
.stepper span { color: var(--mute); font-size: 12px; }
.axes { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.axes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.axes li.drag { opacity: .5; }
.axes .idx { font-family: var(--f-num); color: var(--mute); width: 2ch; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.axes input[type=text] { flex: 1; min-width: 0; }
.axes input.ashort { flex: none; width: 4.2em; text-align: center; }
.axes .own { flex: 1 1 100%; padding-left: 32px; font-size: 12px; color: var(--mute); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.grip { width: 26px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--mute); cursor: grab; touch-action: none; user-select: none; flex: none; letter-spacing: -2px; font-weight: 700; }
.arrows { display: none; gap: 4px; }
.nosort .grip { display: none; }
.nosort .arrows { display: inline-flex; }
.axes.hidden li { opacity: .75; flex-wrap: nowrap; }
.axes.hidden .lbl2 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }

.swatches { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
.sw { aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; min-width: 0; }
.sw[aria-pressed=true] { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }
.colorrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
input[type=color] { width: 40px; height: 30px; padding: 0; border: 1px solid var(--line2); background: var(--panel2); border-radius: 4px; cursor: pointer; }
details.adv { border: 1px solid var(--line2); border-radius: 6px; padding: 0 12px; margin-top: 16px; background: var(--panel); }
details.adv summary { cursor: pointer; padding: 10px 0; font-weight: 700; }
details.adv[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
details.adv .inner { padding-bottom: 12px; }
.chk { display: flex; gap: 8px; align-items: center; margin: 8px 0; }

/* 一覧 */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar select { width: auto; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; }
.seg button { background: var(--panel2); color: var(--mute); border: 0; border-right: 1px solid var(--line2); padding: 5px 11px; font: inherit; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed=true] { background: var(--acfill, var(--accent)); color: var(--accent-ink); font-weight: 700; }
.grid { display: grid; gap: 8px; margin-top: 12px; }
.card { display: flex; flex-direction: column; justify-content: flex-start; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 4px 2px 2px; color: var(--text); font: inherit; text-align: left; cursor: pointer; position: relative; min-width: 0; }
.card:hover { border-color: var(--accent); }
.card .mini { width: 100%; aspect-ratio: 1 / 1; }
.card .cname { display: flex; align-items: center; gap: 8px; padding-inline: 6px; font-weight: 700; min-width: 0; }
.card .cname i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.card .cname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta { padding-inline: 6px; color: var(--mute); font-size: 12px; margin-top: 2px; }
.card .meta b { font-family: var(--f-num); font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.card .chead { padding: 2px 6px 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.card .chead .cn { flex: 1 1 80px; min-width: 0; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .chead .rk { flex: none; font-size: 11px; color: var(--mute); font-family: var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card .chead .rk b { color: var(--text); font-size: 12px; }
.card .chead .rk.top b { color: var(--accent); }
.toolbar + .toolbar { margin-top: 8px; }
.chip.add { background: var(--acfill, var(--accent)); color: var(--accent-ink); border-color: var(--acbd, var(--accent)); font-weight: 700; position: sticky; left: 0; z-index: 2; box-shadow: 10px 0 8px -4px var(--bg); }
.rail-hadd { margin-left: auto; white-space: nowrap; flex: none; padding: 4px 12px; border: 1px solid var(--acbd, var(--accent)); border-radius: 999px; background: var(--acfill, var(--accent)); box-shadow: var(--acsh, none); color: var(--accent-ink); font: 700 13px var(--f-body, inherit); letter-spacing: 0; cursor: pointer; }
.rail-hadd:hover { filter: brightness(1.1); }
.rail-h .rail-hadd + .qh { margin-left: 6px; }
.addtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px; background: none; border: 1px dashed var(--line2); border-radius: 8px; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.addtile:hover { border-color: var(--accent); background: var(--panel); }
.addtile b { font-size: 26px; line-height: 1; font-weight: 400; }

.cmpbox { height: clamp(340px, 50vw, 520px); background: var(--cbg, var(--panel)); border: 1px solid var(--cborder); border-radius: 8px; margin-top: 12px; min-width: 0; }
.empty { border: 1px dashed var(--line2); border-radius: 8px; padding: 40px 16px; text-align: center; color: var(--mute); display: flex; flex-direction: column; gap: 14px; align-items: center; background: var(--panel); }
.foot { margin-top: 26px; color: var(--mute); font-size: 12px; }
.foot a { color: inherit; text-decoration: underline; }
/* 広告枠（AdSense）。高さを先に確保して読み込み時にずれないようにし、広告が出ない（unfilled）ときは枠ごと隠す */
.adslot { margin-top: 40px; min-height: 100px; text-align: center; overflow: hidden; }
.adslot ins.adsbygoogle { display: block; }
.adside { display: none; position: fixed; top: 24px; width: 160px; height: 600px; z-index: 1; overflow: hidden; }
/* スマホ専用の上部バナー（PCでは出さない）。操作ボタンから離すため、ヘッダーとの間に余白を取る */
.adtop { margin: 6px 0 18px; height: 100px; text-align: center; overflow: hidden; }
@media (min-width: 1024px) { .adtop { display: none; } }
.adslot:has(ins[data-ad-status="unfilled"]), .adside:has(ins[data-ad-status="unfilled"]), .adtop:has(ins[data-ad-status="unfilled"]) { display: none !important; }
/* フォルダ名を「押せるボタン」に見せる */
.fname { width: 100%; justify-content: space-between; border: 1px solid var(--line2); background: color-mix(in srgb, var(--bg) 55%, transparent); padding: 6px 8px 6px 14px; border-radius: 8px; transition: border-color .15s; }
.fname:hover { border-color: var(--accent); }
.fname:hover span { text-decoration: none; }
.swt { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-family: var(--f-body); font-size: 12px; font-weight: 700; color: var(--accent); background: var(--band); border: 1px solid var(--line2); border-radius: 6px; padding: 3px 9px; flex: none; }
.swt .caret { border-left-width: 5px; border-right-width: 5px; border-top-width: 6px; margin-top: 0; }
.fhead-r { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fhint { color: var(--accent); font-size: 12px; font-weight: 700; }
.toolbar .seg { flex: none; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

textarea { width: 100%; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line2); border-radius: 4px; padding: 7px 9px; font: inherit; line-height: 1.55; resize: vertical; }
::placeholder { color: var(--mute); opacity: .7; }

/* 説明セクション（検索エンジンと初めての人向けの文章。広告の上に置く。色はスキンに追従） */
.about { max-width: 880px; margin: 38px auto 0; padding-inline: 4px; color: var(--text); }
.about h2 { font-size: clamp(18px, 3.6vw, 23px); margin: 44px 0 12px; line-height: 1.45; padding-left: 12px; border-left: 3px solid var(--accent); letter-spacing: .03em; }
.about h2:first-child { margin-top: 0; }
.about p { margin: 0 0 12px; line-height: 1.8; }
.about .lead { font-size: 15px; }
.about .more { margin-top: 14px; font-size: 13px; }
.about a { color: var(--accent); }
.about .ab-tri, .about .ab-cards, .about .ab-skins, .about .ab-folder { display: grid; gap: 10px; margin: 16px 0; }
.about .ab-tri { grid-template-columns: repeat(4, 1fr); }
.about .ab-cards, .about .ab-folder { grid-template-columns: repeat(2, 1fr); }
.about .ab-skins { grid-template-columns: repeat(3, 1fr); }
.about .ab-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.about .ab-box b { display: block; margin-bottom: 4px; font-size: 15px; }
.about .ab-box span, .about .ab-box small { display: block; color: var(--mute); font-size: 13px; line-height: 1.6; }
.about .ab-box ul { margin: 0; padding-left: 18px; color: var(--mute); font-size: 13px; line-height: 1.7; }
.about .ab-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.about ol.ab-steps { margin: 0; padding: 0; list-style: none; counter-reset: ab; display: grid; gap: 10px; }
.about ol.ab-steps li { counter-increment: ab; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 12px 54px; position: relative; line-height: 1.7; }
.about ol.ab-steps li::before { content: counter(ab); position: absolute; left: 12px; top: 11px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; display: grid; place-items: center; }
.about ol.ab-steps b { display: block; }
.about dl { margin: 0; display: grid; gap: 8px; }
.about dl div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.about dt { font-weight: 700; color: var(--accent); font-size: 13px; }
.about dd { margin: 2px 0 0; font-size: 13px; line-height: 1.7; }
.about details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.about summary { cursor: pointer; font-weight: 700; }
.about details p { margin: 8px 0 0; font-size: 13px; }
@media (max-width: 640px) { .about .ab-tri, .about .ab-skins { grid-template-columns: 1fr 1fr; } .about .ab-cards, .about .ab-folder { grid-template-columns: 1fr; } }
/* ヘッダー：右上にスキンボタン */
header.top { flex-wrap: wrap; align-items: center; row-gap: 10px; }
.brand { min-width: 0; }
.hright { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 520px) { .hright .badge { display: none; } .brand { flex: 1 1 100%; gap: 10px; } .brand h1 { font-size: 20px; white-space: nowrap; } .emb svg { width: 34px; height: 34px; } .hright { flex: 1 1 100%; justify-content: flex-end; } }
.tbtn .tdots { display: inline-flex; }
.tbtn .tdots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line2); margin-left: -4px; }
.tbtn .tdots i:first-child { margin-left: 0; }

/* テーマ選択（モーダルの中）：スマホは上のチップ、PCは左のレールでカテゴリを絞り込む */
.mbox.themebox { width: min(660px, 100%); padding: 0; display: flex; flex-direction: column; overflow: hidden; max-height: min(calc(100dvh - 24px), 840px); }
.themebox .thead { display: flex; align-items: center; gap: 10px; padding: 14px 14px 2px 16px; flex: none; }
.themebox .thead h2 { flex: none; margin: 0; font-size: 18px; font-family: var(--f-display); }
.themebox .tsub { flex: 1; min-width: 0; font-size: 12px; color: var(--mute); }
.tchips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 10px; flex: none; scrollbar-width: none; }
.tchips::-webkit-scrollbar { display: none; }
.tchip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: 700 13px var(--f-body); border-radius: 999px; padding: 6px 13px; cursor: pointer; white-space: nowrap; }
.tchip small { font-size: 11px; font-weight: 700; color: var(--mute); }
.tchip[aria-pressed=true] { background: var(--acfill, var(--accent)); border-color: var(--acbd, var(--accent)); color: var(--accent-ink); }
.tchip[aria-pressed=true] small { color: inherit; opacity: .75; }
.tscroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 18px; }
.tgh { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 9px; font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.tsec:first-child .tgh { margin-top: 6px; }
.tgh small { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--mute); }
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 540px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tcard { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 6px 6px 9px; color: var(--text); font: inherit; cursor: pointer; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .tcard:hover { border-color: var(--accent); transform: translateY(-2px); } }
.tcard[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 38%, transparent); }
.tprev { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid rgba(128, 128, 128, .35); background: var(--bg); color: var(--text); container-type: inline-size; }
.pv-bg { position: absolute; inset: 0; background: radial-gradient(70% 70% at 12% 0, var(--glow1), transparent 70%), radial-gradient(60% 60% at 100% 0, var(--glow2), transparent 70%); }
.pv-bg::before { content: ''; position: absolute; left: 0; top: 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; background-image: var(--bgx, none); background-size: var(--bgxs, auto); background-position: var(--bgxp, 0 0); background-repeat: var(--bgxr, repeat); -webkit-mask-image: var(--bgxm, none); mask-image: var(--bgxm, none); }
.pv-plate { position: absolute; left: 4.5cqw; top: 5cqw; bottom: 5cqw; width: 56cqw; border-radius: 2.4cqw; border: 1px solid var(--cborder); background: var(--cbg, var(--panel)); box-shadow: var(--cbox, 0 0 3cqw var(--cshadow)); overflow: hidden; }
.pv-plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-side { position: absolute; left: 65.5cqw; right: 4.5cqw; top: 5cqw; bottom: 5cqw; display: flex; flex-direction: column; justify-content: space-between; gap: 2cqw; }
.pv-t { font-family: var(--f-display); font-weight: 700; font-size: 5.8cqw; line-height: 1.15; color: var(--text); white-space: nowrap; overflow: hidden; }
.pv-n { font-family: var(--f-num); font-weight: 700; font-size: 9.5cqw; line-height: 1; color: var(--accent); }
.pv-sl { position: relative; height: 1.8cqw; border-radius: 99px; background: var(--line2); }
.pv-sl i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 99px; background: var(--slfill, var(--acfill, var(--accent))); }
.pv-b { display: flex; align-items: center; justify-content: center; height: 9.5cqw; border-radius: 2.2cqw; font-size: 4.4cqw; font-weight: 700; line-height: 1; color: var(--text); border: 1px solid var(--line2); background: var(--btnfill, var(--panel2)); box-shadow: var(--btnsh, none); }
.pv-b.p { color: var(--accent-ink); border-color: var(--acbd, var(--accent)); background: var(--acfill, var(--accent)); box-shadow: var(--acsh, none); }
.pv-sw { display: flex; gap: 1.8cqw; }
.pv-sw i { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; }
.tuse { display: inline-block; margin-left: 6px; vertical-align: 2px; font: 700 10px var(--f-body); font-style: normal; background: var(--acfill, var(--accent)); color: var(--accent-ink); padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; }
.tname { display: block; padding: 4px 4px 0; font-family: var(--pfont); font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.ttag { display: block; padding: 0 4px; font-size: 11px; color: var(--mute); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal:has(.themebox.pc) { padding: 28px; }
.mbox.themebox.pc { width: min(1120px, 100%); height: min(780px, calc(100dvh - 56px)); max-height: none; flex-direction: row; }
.themebox.pc .trail { flex: 0 0 236px; display: flex; flex-direction: column; gap: 10px; padding: 26px 18px 20px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.trail h2 { margin: 0; font-family: var(--f-display); font-size: 21px; }
.trail .hint { margin: 0 0 8px; font-size: 12px; line-height: 1.65; }
.tnav { display: flex; flex-direction: column; gap: 4px; }
.tnavb { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: 700 14px var(--f-body); cursor: pointer; }
.tnavb small { font-size: 12px; color: var(--mute); font-weight: 700; }
.tnavb:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tnavb[aria-pressed=true] { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--accent); }
.tnavb[aria-pressed=true] small { color: inherit; }
.tnow { margin-top: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tnow small { display: block; font-size: 11px; color: var(--mute); }
.tnow b { font-family: var(--f-display); font-size: 15px; }
.themebox.pc .tmain { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.themebox.pc .tclose { position: absolute; top: 14px; right: 14px; z-index: 2; }
.themebox.pc .tscroll { padding: 20px 28px 28px; }
.themebox.pc .tsec:first-child .tgh { margin-top: 0; }
.themebox.pc .tgrid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
.themebox.pc .tcard { padding: 8px 8px 11px; }
.themebox.pc .tname { font-size: 15px; }
.themebox.pc .ttag { font-size: 12px; }

/* ？アイコンと説明の吹き出し */
.qh { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel2); color: var(--mute); font: 700 12px/1 var(--f-body); cursor: pointer; flex: none; vertical-align: middle; }
.qh::after { content: ''; position: absolute; inset: -8px; }
.qh:hover, .qh[aria-expanded=true] { color: var(--accent); border-color: var(--accent); }
.sec .qh { align-self: center; }
.lrow { display: flex; align-items: center; gap: 6px; }
.lrow label { font-size: 12px; color: var(--mute); }
.pop { position: fixed; z-index: 60; width: max-content; max-width: min(320px, calc(100vw - 24px)); background: var(--panel2); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.65; color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); white-space: pre-line; }
.namerow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.sechead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sechead .sec { margin: 0; }
.wbody .sechead { margin-top: 18px; }
.wbody .sechead .sec { margin-top: 0; }

/* ウィザード（フォルダ作成・チャート追加）：全体を1枚でスクロール。下のボタンだけ固定 */
.mbox.wiz { --ic: var(--accent); width: min(560px, 100%); padding: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; max-height: min(calc(100dvh - 32px), 800px); }
.whead { flex: none; padding: 14px 16px 0; }
.wbody { flex: 1 0 auto; padding: 12px 16px 14px; }
.wfoot { flex: none; position: sticky; bottom: 0; z-index: 3; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--panel2); }
.wcount { font-family: var(--f-num); font-size: 14px; font-weight: 400; color: var(--mute); margin-left: 8px; }
.wmake { min-height: 1.8em; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--accent); }
.wlead { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.wlead small { display: block; font-size: 12px; font-weight: 400; color: var(--mute); margin-top: 3px; line-height: 1.6; }
.wprev { height: 200px; margin: 4px 0 18px; background: var(--cbg, var(--panel)); border: 1px solid var(--cborder); border-radius: 8px; }
.wbody .sec { margin-top: 18px; }
.waxes { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.waxes li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.waxes .idx { font-family: var(--f-num); color: var(--mute); width: 2ch; text-align: right; flex: none; }
.waxes input { flex: 1; min-width: 0; }
.waxes input.ws { flex: none; width: 4.8em; text-align: center; }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) 5.2em 30px; gap: 8px; align-items: center; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) 5.2em; gap: 8px; }
.frow input + input, .vrow input + input { text-align: center; }
.wsw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 600px) {
  .modal.full { padding: 0; align-items: stretch; }
  .modal.full .mbox.wiz { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
}
@media (max-width: 480px) {
  .wprev { height: 175px; }
  .waxes { grid-template-columns: minmax(0, 1fr); }
  .wsw { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 数字キーパッド（タッチ端末で、スライダー横の数字欄をタップすると下から出る。色はテーマに従う） */
.kpad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--panel2); border-top: 1px solid var(--line2); box-shadow: 0 -12px 32px rgba(0, 0, 0, .35); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.kp-top { display: flex; align-items: baseline; gap: 10px; max-width: 480px; margin: 0 auto 8px; padding: 0 2px; min-width: 0; }
.kp-name { flex: 0 1 auto; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text); }
.kp-range { flex: none; font-size: 11px; color: var(--mute); }
.kp-val { flex: 1; min-width: 0; text-align: right; font-family: var(--f-num); font-size: 30px; font-weight: 700; line-height: 1.1; min-height: 33px; color: var(--accent); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.kp-val i { font-style: normal; font-family: var(--f-body); font-size: 13px; font-weight: 400; color: var(--mute); }
.kp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 480px; margin: 0 auto; }
.kk { height: 50px; padding: 0; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: 700 22px var(--f-num); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.kk:active { background: var(--band); border-color: var(--accent); }
.kk.fn { color: var(--mute); font: 700 14px var(--f-body); }
.kk.done { grid-column: span 2; background: var(--acfill, var(--accent)); border-color: var(--acbd, var(--accent)); color: var(--accent-ink); font: 700 16px var(--f-body); letter-spacing: .1em; }
.kp body { padding-bottom: var(--kph, 0px); }
.kp .modal.full .mbox.wiz { padding-bottom: var(--kph, 0px); }
.kp .wfoot { display: none; }
.num.kpon { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (max-width: 900px) { .kp .chartbox { height: clamp(120px, 20vh, 160px); } }
/* スマホではプレビューも自然にスクロール。入力中は下部操作が欄を覆わない。 */
@media (max-width: 1023px) {
  .chartcol, .stagecol { position: static; }
  .kb .wfoot { position: static; }
  input[type=text], input[type=number], textarea, select { font-size: max(16px, 1em); }
}
@media (max-height: 500px) and (max-width: 1023px) {
  .kk { height: 32px; }
  .kp-grid { gap: 4px; }
  .kp-val { font-size: 22px; min-height: 24px; }
}
/* スマホ入力の調整ここまで */

/* 一覧のチャートを大きく見るポップアップ */
.mbox.peek { width: min(560px, 100%); }
.mbox.wide { width: min(660px, 100%); }
.ptitle { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ptitle i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ptitle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmeta { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; color: var(--mute); font-size: 13px; }
.pmeta .pr { font-family: var(--f-num); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--accent); }
.pmeta .pv { font-family: var(--f-num); font-size: 20px; font-weight: 700; color: var(--text); }
.peek .mfoot { flex-direction: column; align-items: stretch; gap: 8px; }
.peek .mfoot .btn { height: 48px; justify-content: center; font-size: 15px; font-weight: 700; }
.pnavrow { display: flex; gap: 8px; }
.pnavrow .btn { flex: 1; }
.pnone { color: var(--mute); opacity: .6; }
.peekchart { height: min(58vh, 440px); margin-top: 8px; background: var(--cbg, var(--panel)); border: 1px solid var(--cborder); border-radius: 8px; }
.pinfo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 10px 2px 0; font-size: 13px; }
.pinfo dt { color: var(--mute); font-size: 12px; }
.pinfo dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .peekchart { height: min(52vh, calc(100vw - 32px)); } }

/* 情報欄 */
.igrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .igrid { grid-template-columns: minmax(0, 1fr); } }
.ibox { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px 2px; min-width: 0; }
.ihead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ihead b { font-size: 13px; }
.ihead span { font-size: 11px; color: var(--mute); }
details.adv summary small { color: var(--mute); font-weight: 400; margin-left: 6px; }
.fields li { flex-wrap: nowrap; }
.cinfo { padding: 0 6px 5px; display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.45; min-width: 0; }
.ci { display: flex; gap: 6px; min-width: 0; align-items: baseline; }
.ci .ck { flex: none; max-width: 45%; color: var(--mute); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci .cv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lset { margin-left: auto; }
.lset svg { flex: none; }

/* 設定モーダル（スマホでは下から出るシート） */
.modal { position: fixed; inset: 0; top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100%); z-index: 50; background: rgba(0, 0, 0, .62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mbox { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.mhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mhead h2 { margin: 0; font-size: 17px; font-family: var(--f-display); }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mrow .ml { min-width: 0; flex: 1 1 120px; }
.mrow .ml b { display: block; overflow-wrap: anywhere; }
.mrow .ml small { color: var(--mute); font-size: 11px; }
.mfoot { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.fields input.fshort { flex: none; width: 4.6em; text-align: center; }
@media (max-width: 480px) { .modal { padding: 12px; } .mbox { padding: 14px; } }

/* 一覧の表示オプション：ラベル列をそろえて、ボタンの横位置をそろえる */
.lopts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.lopts > .lbl { font-size: 13px; font-weight: 700; color: var(--mute); white-space: nowrap; }
.lopts .ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lopts .seg { flex: none; }
.lopts .seg button { min-width: 2.7em; padding: 6px 10px; }
.lopts select { width: auto; min-width: 6em; flex: 0 1 auto; }
.lopts .gear { margin-left: auto; width: 36px; height: 34px; padding: 0; justify-content: center; flex: none; }
@media (max-width: 480px) { .lopts { gap: 8px 10px; padding: 10px; } .lopts .seg button { padding: 6px 8px; min-width: 2.4em; } }

/* ===== 折りたたみボタン（目立たせる。閉じているときは塗りつぶし） ===== */
.ctog { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: background .15s, box-shadow .15s; }
.ctog:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); }
.ctog .chev { flex: none; transform: rotate(180deg); transition: transform .15s; }
.ctog[aria-expanded=false] { background: var(--acfill, var(--accent)); border-color: var(--acbd, var(--accent)); color: var(--accent-ink); box-shadow: var(--acsh, 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent)); }
.ctog[aria-expanded=false] .chev { transform: none; }
.sechead h3 { cursor: pointer; user-select: none; }
.sechead.closed { padding: 8px 8px 8px 12px; border: 1px dashed var(--line2); border-radius: 8px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.sechead.closed:hover { border-color: var(--accent); }
details.adv summary { color: var(--accent); }
details.adv summary:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ===== PC専用（幅1024px以上） ===== */
.fmeta { display: none; }
.fmeta { align-items: baseline; gap: 8px; margin: 0; color: var(--mute); font-size: 12px; white-space: nowrap; }
.fmeta b { font: 700 17px var(--f-num); color: var(--text); font-variant-numeric: tabular-nums; }
.fmeta i { font-style: normal; opacity: .35; }
@media (min-width: 1024px) {
  .wrap { max-width: 1480px; padding: 18px 28px 40px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand mode right" "cloud cloud cloud" "fhead fhead fhead" "tabs tabs tabs" "stage stage stage" "admid admid admid" "about about about" "ad ad ad" "foot foot foot"; column-gap: 24px; align-items: center; }
  header.top { display: contents; }
  .brand { grid-area: brand; gap: 14px; }
  .emb svg { width: 42px; height: 42px; }
  .brand h1 { font-size: 24px; white-space: nowrap; }
  .brand small.sub { font-size: 12px; }
  .hright { grid-area: right; justify-self: end; }
  .modebar { grid-area: mode; justify-self: center; margin: 0; width: 100%; max-width: 420px; }
  .tabbar { grid-area: tabs; margin: 14px 0 0; justify-content: flex-start; border-bottom: 1px solid var(--line2); }
  .tabs { flex: none; width: auto; display: flex; gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; }
  .tab { padding: 11px 22px 10px; font-size: 16px; border-radius: 8px 8px 0 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
  .tab[aria-pressed=true] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-bottom-color: var(--accent); box-shadow: none; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); }
  .fhead { grid-area: fhead; margin-top: 16px; align-items: center; padding: 12px 18px; }
  .fhead-l { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
  .fhead-l .lrow { flex: none; }
  .fname { width: auto; max-width: min(620px, 100%); font-size: 25px; gap: 14px; }
  .fmeta { display: flex; }
  #stage-body { grid-area: stage; margin-top: 16px; }
  .foot { grid-area: foot; }
  .about { grid-area: about; width: 100%; }
  .adslot { grid-area: ad; width: 100%; min-height: 90px; margin-top: 36px; }
  .adslot.admid { grid-area: admid; }

  /* チャートの枠：四隅のブラケットと方眼 */
  .hud { border-radius: 4px; background:
    linear-gradient(var(--accent), var(--accent)) left top / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 2px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 18px no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 7%, transparent), transparent) center / 100% 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--line) 40%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, color-mix(in srgb, var(--line) 40%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--cbg, var(--panel)); }


  /* 一覧 */
  .grid { gap: 12px; }
  .card { transition: border-color .15s, box-shadow .15s, transform .15s; }
  .card:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-2px); }
  .card .chead { padding: 6px 8px 0; }
  .card .chead .cn { font-size: 14px; }
  .card .chead .rk { font-size: 12px; }
  .card .chead .rk b { font-size: 16px; }
  .card .cinfo { padding: 0 8px 7px; }
  .addtile { min-height: 200px; }
}

/* 編集（PC）：左＝チャート一覧、中央＝チャート、右＝設定 */
.pcedit { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(360px, 420px); gap: 18px; align-items: start; }
.rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 32px); background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 10px; min-width: 0; }
.rail-h { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); font: 700 12px var(--f-num); letter-spacing: .24em; color: var(--mute); }
.rail-h b { color: var(--accent); font-size: 15px; letter-spacing: 0; }
.rail-h .qh { margin-left: auto; }
.rail-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.ri, .crow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ri i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.ri .rn, .crow .rn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri .rt, .crow .rt { flex: none; font: 700 15px var(--f-num); color: var(--mute); font-variant-numeric: tabular-nums; }
.ri:hover, .crow:hover { background: var(--panel2); }
.ri[aria-pressed=true] { background: var(--band); border-color: var(--line2); box-shadow: inset 3px 0 0 var(--accent); }
.ri[aria-pressed=true] .rt { color: var(--accent); }
.rail-add { margin-top: 4px; padding: 9px; border: 1px dashed var(--line2); border-radius: 6px; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.rail-add:hover { border-color: var(--accent); background: var(--panel2); }
.stagecol { position: sticky; top: 16px; min-width: 0; }
.stagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; min-width: 0; }
.sh-name { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.25; }
.sh-name i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 12px currentColor; }
.sh-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-stats { display: flex; gap: 20px; flex: none; }
.sh-stats > span { display: flex; align-items: baseline; gap: 6px; }
.sh-stats small { font: 600 11px var(--f-num); letter-spacing: .22em; color: var(--mute); }
.sh-stats b { font: 700 30px/1 var(--f-num); color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); font-variant-numeric: tabular-nums; }
.sh-stats em { font: 600 14px var(--f-num); color: var(--mute); font-style: normal; }
.pcedit .chartbox { height: clamp(420px, calc(100vh - 290px), 780px); }
.pcedit .editor { padding: 16px 18px; }

@media (min-width: 1840px) {
  .adside { display: flex; }
  .adside.l { left: calc(50% - 740px - 176px); }
  .adside.r { right: calc(50% - 740px - 176px); }
}
@media (max-width: 1279px) {
  .pcedit { grid-template-columns: 180px minmax(0, 1fr) 340px; gap: 14px; }
  .sh-stats b { font-size: 26px; }
}
/* 値の行：広い画面では、項目名・スライダー・数字を1行に */
@media (min-width: 1280px) {
  .sl { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; grid-template-areas: "lab rng nm"; gap: 4px 12px; }
  .sl .lc { grid-area: lab; }
  .sl .nm { grid-area: nm; }
  .sl input[type=range] { grid-area: rng; }
  .sliders { gap: 10px; }
}
/* 一覧（PC）：表示設定を1行に */
.lopts.pc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 10px 14px; }
.lopts.pc .og { display: flex; align-items: center; gap: 10px; }
.lopts.pc .ctl { display: flex; align-items: center; gap: 8px; }
.lopts.pc .gear { margin-left: auto; }

/* 比較（PC） */
.pccmp { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.crow i { position: relative; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--c); flex: none; }
.crow[aria-pressed=true] i { background: var(--c); box-shadow: 0 0 10px var(--c); }
.crow[aria-pressed=true] i::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.crow[aria-pressed=false] .rn { color: var(--mute); }
.avgrow { --c: var(--text); margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 12px; }
.avgrow i { border-style: dashed; }
.cmpmain { min-width: 0; }
.pccmp .cmpbox { margin-top: 0; height: clamp(420px, calc(100vh - 300px), 720px); }
.ctable-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); }
.ctable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ctable th, .ctable td { padding: 7px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ctable th:first-child { text-align: left; color: var(--mute); font-weight: 500; }
.ctable thead th { font-weight: 700; color: var(--text); }
.ctable thead th i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ctable td { font: 700 17px var(--f-num); font-variant-numeric: tabular-nums; }
.ctable td.top { color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.ctable .avgc { color: var(--mute); font-weight: 500; }
.ctable tr.tot th, .ctable tr.tot td { border-bottom: 0; border-top: 1px solid var(--line2); }
.ctable tbody tr:hover { background: var(--panel2); }

/* 大きく見る（PC） */
.mbox.peek.pcpeek { width: min(1060px, 100%); padding: 18px 22px; }
.pk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 12px; }
.pcpeek .peekchart { height: min(62vh, 520px); margin: 0; }
.pk-side { min-width: 0; overflow-y: auto; max-height: min(62vh, 520px); }
.pk-side .sec { margin-top: 4px; }
.pk-side .sec + * { margin-bottom: 18px; }
.pcpeek .pinfo { margin: 0; }
.pcpeek .mfoot { flex-direction: row; align-items: center; margin-top: 16px; }
.pcpeek .mfoot .btn { height: 42px; padding-inline: 18px; }
.pcpeek .pnavrow .btn { flex: none; }

/* ウィザード（PC）：左＝見本チャート、右＝入力。大きさは固定 */
.modal.full:has(.pcwiz) { padding: 24px; }
.mbox.wiz.pcwiz { width: min(1240px, 100%); height: min(820px, calc(100dvh - 48px)); max-height: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(460px, 1fr); overflow: hidden; padding: 0; }
.wz-prev { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 22px 26px 20px; border-right: 1px solid var(--line2); background: var(--panel); }
.wz-ph { min-width: 0; }
.wz-ph small { display: block; font: 600 11px var(--f-num); letter-spacing: .3em; color: var(--accent); }
.wz-ph > b { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1.3; }
.wz-ph > b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-ph > b.ph span { color: var(--mute); opacity: .5; }
.wz-ph > b i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 12px currentColor; }
.wz-sub { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.wz-sub b { font: 700 16px var(--f-num); color: var(--accent); }
.wz-chart { flex: 1 1 auto; min-height: 0; margin: 14px 0 12px; border: 1px solid var(--cborder); }
.wz-pf { flex: none; min-height: 20px; }
.pf-tip { margin: 0; color: var(--mute); font-size: 12px; }
.pf-tip b { color: var(--accent); }
.pf-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 6px; background: var(--panel2); font-size: 13px; }
.pf-info dt { color: var(--mute); font-size: 12px; }
.pf-info dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel2); }
.pcwiz .whead { flex: none; padding: 18px 24px 14px; border-bottom: 1px solid var(--line); }
.pcwiz .mhead h2 { font-size: 19px; }
.pcwiz .wbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 28px; }
.pcwiz .wfoot { position: static; padding: 14px 24px; }
.pcwiz .wfoot .btn { padding: 8px 16px; }
.pcwiz .wlead { font-size: 16px; }
.kp .pcwiz .wbody { padding-bottom: calc(28px + var(--kph, 0px)); }
.wsteps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wsteps button { width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 8px 2px 0; border: 0; border-top: 3px solid var(--line2); background: none; color: var(--mute); font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.wsteps button:hover { color: var(--text); }
.wsteps b { font: 700 18px var(--f-num); }
.wsteps .done { color: var(--text); border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.wsteps .on { color: var(--accent); border-top-color: var(--accent); }
.wsteps .on b { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }

/* ===== モード切り替え（かんたん作成／フォルダ管理）と、かんたん作成 ===== */
.modebar { display: flex; justify-content: center; margin: 0 0 12px; }
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; }
.mode { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; background: none; border: 0; border-radius: 8px; color: var(--mute); padding: 10px 8px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.mode:hover { color: var(--text); background: var(--panel2); }
.mode[aria-pressed=true] { background: var(--acfill, var(--accent)); color: var(--accent-ink); box-shadow: var(--acsh, 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent)); }
.mode em { font: 700 12px/1 var(--f-num); font-style: normal; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); }
.wrap.easy #fhead, .wrap.easy .tabbar { display: none; }
.wrap.easy .modebar { margin-bottom: 0; }

.notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.notice .nt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.notice .nt b { color: var(--accent); }
.notice .nt span { color: var(--mute); font-size: 12px; }
.notice .nb { display: flex; align-items: center; gap: 8px; }

.sl.er { grid-template-columns: minmax(0, 1fr) auto 30px; }
.sl.er .lc { min-width: 0; }
.sl.er .lc input { padding: 5px 8px; }
.sl.er .erm { width: 30px; height: 30px; padding: 0; justify-content: center; }
@media (min-width: 1280px) {
  .sl.er { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) auto 30px; grid-template-areas: "lab rng nm del"; }
  .sl.er .erm { grid-area: del; }
}
.exrow { display: flex; flex-wrap: wrap; gap: 8px; }
.exrow .chip.warn { border-color: var(--danger); color: var(--danger); }
.trow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.eacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: stretch; }
.eacts .btn { justify-content: center; }
.eacts .fsv { margin-left: auto; flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 18px; line-height: 1.35; border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.eacts .fsv:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.eacts .fsv b { font-size: 15px; }
.eacts .fsv small { font-size: 11px; color: var(--mute); }
.edit .eacts { margin-top: 16px; }
.edit .eacts .btn { flex: 1 1 40%; }
.edit .eacts .fsv { flex: 1 1 100%; margin-left: 0; align-items: center; }
.pceasy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 480px); gap: 18px; align-items: start; }
.pceasy .chartbox { height: clamp(400px, calc(100vh - 340px), 760px); }
.pceasy .editor { padding: 16px 18px; }
.mbox.esave { width: min(520px, 100%); }
.esdia { margin: 12px 0 4px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.esdia svg { display: block; width: 100%; height: auto; max-height: 120px; }
.eslead { margin: 8px 0 0; font-size: 14px; font-weight: 700; text-wrap: balance; }

/* Shared viewing and publishing */
.shared-readonly-note{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--accent) 5%,var(--panel));color:var(--text);font-size:13px;line-height:1.7}
.shared-readonly-note p{flex:1;margin:0;min-width:0}
.shared-readonly-note a{color:var(--accent);margin-left:8px;text-underline-offset:3px}
.shared-notice-close{flex:none;width:28px;height:28px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--mute);font:22px/1 Arial,sans-serif;cursor:pointer}
.shared-notice-close:hover{background:var(--panel2);color:var(--text)}
.shared-notice-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shared-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.shared-create .shared-create-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.shared-create-choice{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.shared-create-choice h3{margin:0 0 6px;font-size:15px}
.shared-create-detail{margin:0 0 14px;color:var(--mute);font:400 13px/1.8 var(--f-body);max-width:58ch;flex:1}
.shared-create-choice .btn{flex:none;text-decoration:none;white-space:normal}
body[data-share-view="preview"] .shared-readonly-note a{display:none}
@media(max-width:700px){.shared-create .shared-create-options{grid-template-columns:minmax(0,1fr);gap:22px}.shared-tools{justify-content:flex-end}}
body[data-share-view] [hidden]{display:none!important}
.shared-wrap header.top{display:flex;align-items:center;justify-content:space-between;padding-bottom:0}
.shared-wrap .fmeta{display:flex;white-space:normal}
@media(max-width:1023px){.shared-wrap .tabs{display:flex;width:100%;flex:1 1 auto}.shared-wrap .tab{flex:1 1 0;min-width:0;padding-inline:4px}}
.share-dialog{box-sizing:border-box;width:min(1100px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:20px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);color:var(--text);font-family:var(--f-body);overflow:auto}
.share-dialog::backdrop{background:rgba(0,0,0,.72)}
.share-top,.share-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.share-top h2{font-size:20px;margin:0}.share-bottom{margin-top:16px;justify-content:flex-end}.share-dialog .toolbar{flex-wrap:wrap}.share-choices{max-height:48dvh;overflow:auto;margin:16px 0}.share-choice{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--line);cursor:pointer}.share-choice span{flex:1;min-width:0;overflow-wrap:anywhere}.share-choice input{width:20px;height:20px;flex-shrink:0;accent-color:var(--accent)}.share-status{color:var(--accent);white-space:pre-wrap;overflow-wrap:anywhere}.share-dialog iframe{display:block;width:100%;height:65dvh;border:1px solid var(--line);border-radius:10px;background:var(--bg)}.share-dialog .share-url{box-sizing:border-box;width:100%;font-size:14px}.share-dialog .field{display:block}.share-dialog .hint{margin:12px 0}
.shared-wrap{display:flex!important;flex-direction:column;gap:18px;max-width:1400px}.shared-wrap>*{width:100%;box-sizing:border-box}.shared-brand{font-size:18px;font-weight:700;color:var(--text);text-decoration:none}.shared-wrap .top{justify-content:space-between}.shared-wrap .fhead h1{font-size:24px;margin:8px 0;overflow-wrap:anywhere}.shared-wrap .fmeta{flex-wrap:wrap}.shared-wrap #stage-body{min-width:0}.shared-single{padding:18px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.shared-single h2{margin:0 0 12px;font-size:22px;overflow-wrap:anywhere}.shared-single-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px}.shared-single .chartbox{height:460px;min-height:0}.shared-values dl{margin:0}.shared-values dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}.shared-values dt,.shared-values dd{overflow-wrap:anywhere}.shared-values dd{margin:0;font-weight:700;max-width:65%}.shared-table-scroll{overflow-x:auto}.shared-table{width:100%}.shared-create{padding:22px;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}.shared-create h2{font-size:18px;margin:0 0 14px}.shared-wrap .grid{min-width:0}.shared-wrap .lopts{flex-wrap:wrap}
body[data-share-view="preview"] .shared-create,body[data-share-view="preview"] .shared-wrap .foot{display:none}
@media(max-width:700px){.share-dialog{padding:14px}.share-top h2{font-size:17px}.share-dialog iframe{height:60dvh}.share-bottom .btn{white-space:normal}.shared-single-grid{grid-template-columns:minmax(0,1fr);gap:14px}.shared-single .chartbox{height:320px}.shared-single{padding:12px}.shared-wrap .fhead h1{font-size:21px}.shared-wrap .tabs{flex-wrap:wrap}.shared-wrap .toolbar{flex-wrap:wrap}}

/* 左上のロゴ：押すとフォルダ管理の「編集」を開く */
.brand[data-act="home"] { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 6px; }
.brand[data-act="home"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* 合計の単位（狭い所は pt、広い所は point） */
.unit { font-size: .78em; font-weight: 400; margin-left: 2px; color: var(--mute); }
.pmeta .pv .unit { font-size: 13px; margin-left: 4px; }
.ri .rt small, .crow .rt small { font-size: 11px; font-weight: 400; margin-left: 1px; }

/* 比較タブの表示オプション */
.cmpopts { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 2px; align-items: center; margin: 4px 0 8px; font-size: 13px; }
.cmpopts .chk { margin: 0; min-height: 32px; cursor: pointer; }
.cmpopts input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; flex: none; }
.pccmp .cmpopts { margin-top: -4px; }

/* カラーピッカー（PC・スマホ共通。OS標準のピッカーは端末ごとに見た目が違うため自作） */
.cpwrap { margin-top: 10px; }
.cp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line2); border-radius: 999px; background: var(--btnfill, var(--panel2)); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.cp-btn:hover { border-color: var(--accent); }
.cp-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line2); flex: none; }
.cp-btn .chev { transition: transform .15s; color: var(--mute); }
.cp-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cp-note { display: inline-block; margin: 0 0 0 10px; vertical-align: middle; }
.cpick { --hue: 0; margin-top: 10px; padding: 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel2); max-width: 320px; }
.cp-sv { position: relative; height: 150px; border-radius: 6px; cursor: crosshair; touch-action: none; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue), 100%, 50%)); }
.cp-sv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-k { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
html input[type=range].cp-h { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; margin: 12px 0 10px; border-radius: 99px; background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); cursor: pointer; touch-action: none; }
html input[type=range].cp-h::-webkit-slider-runnable-track { height: 14px; background: transparent; border: 0; }
html input[type=range].cp-h::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -2px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4); }
html input[type=range].cp-h::-moz-range-track { height: 14px; background: transparent; border: 0; }
html input[type=range].cp-h::-moz-range-progress { background: transparent; }
html input[type=range].cp-h::-moz-range-thumb { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.cp-row { display: flex; align-items: center; gap: 10px; }
.cp-pv { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--line2); flex: none; }
.cp-hex { width: 9em !important; max-width: 10em; flex: none; font-family: var(--f-num, monospace); text-transform: lowercase; }
html[data-sq] .cp-sv, html[data-sq] .cpick, html[data-sq] .cp-pv { border-radius: 0; }

/* 2026-10-15: 比較リストの幅、チャート追加の24色（スマホは8列）、大きく見るの値バー */
.pccmp { grid-template-columns: 290px minmax(0, 1fr); }
@media (max-width: 480px) { .wsw { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* 2026-10-15 段階C: 項目ごとの範囲・単位・向き、総合 */
.lowmk { margin-left: 2px; color: var(--accent); font-weight: 700; }
.vunit { flex: none; width: 2.6em; margin-left: 2px; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc .oor { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 10px; line-height: 1.6; border-radius: 3px; color: var(--accent-ink); background: var(--accent); vertical-align: 1px; }
.lc .oor[hidden] { display: none; }
.overrow { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; font-size: 13px; }
.overrow .chk { margin: 0; min-height: 32px; cursor: pointer; }
.overrow input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; flex: none; }
.cunit { font-size: 10px; font-weight: 400; color: var(--mute); white-space: nowrap; }
.ctable .tot th .qh { margin-left: 4px; vertical-align: middle; }
.axr { margin-top: 14px; border-top: 1px dashed var(--line2); padding-top: 10px; }
.axr-head { display: flex; align-items: center; gap: 6px; }
.axr-tog { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; }
.axr-tog:hover span { color: var(--accent); }
.axr-tog .chev { flex: none; color: var(--mute); transition: transform .15s; transform: rotate(-90deg); }
.axr-tog[aria-expanded="true"] .chev { transform: none; }
.axr-lead { margin: 2px 0 10px; }
.axr-lead .hint { margin: 0; }
.axr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 1024px) { .axr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.axr-card { padding: 10px 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel2); min-width: 0; }
.axr-name { display: block; margin-bottom: 8px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axr-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; min-width: 0; }
.axr-l { flex: none; font-size: 12px; color: var(--mute); }
.axr-row .axr-num { width: 0; flex: 1 1 4.5em; min-width: 3.5em; padding: 6px; text-align: center; font-family: var(--f-num); }
.axr-to { flex: none; color: var(--mute); }
.axr-row .axr-sfx { width: 0; flex: 1 1 5em; min-width: 4em; padding: 6px; }
.axr-row select { width: auto; flex: 0 1 auto; min-width: 5.5em; }
.axr-err { margin: -2px 0 8px; font-size: 12px; color: var(--accent); font-weight: 700; }
.axr-err[hidden] { display: none; }
.axr-bt { display: flex; width: 100%; }
.axr-bt button { flex: 1 1 0; min-width: 0; padding: 7px 4px; font-size: 12px; line-height: 1.3; white-space: normal; }
.axr-out { margin-top: 6px; }
.axr-out .chk { margin: 0; min-height: 32px; font-size: 13px; cursor: pointer; }
.axr-out input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; flex: none; }
html[data-sq] .axr-card { border-radius: 0; }