:root{
  --vw-a:#C0392B; --vw-i:#B77914; --vw-u:#1F7A6B; --vw-e:#3560B4; --vw-o:#7E4A9E;
  --vw-N:#767E8C; --vw-Q:#98A0AC;
  --paper:#EBEEF3; --card:#FFFFFF; --ink:#171A22; --ink-mid:#565E6E; --ink-soft:#8A92A1;
  --rule:#D2D7E0; --rule-soft:#E3E7ED; --flag:#A8630F;
  --tail-bg:rgba(0,0,0,.05);
  --mono: ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  --jp: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,sans-serif;
}
[data-theme="dark"]{
  --vw-a:#E8695C; --vw-i:#E0A64B; --vw-u:#4FC2AE; --vw-e:#6E9BE8; --vw-o:#B98BD6;
  --vw-N:#9BA3B2; --vw-Q:#7D8593;
  --paper:#12141A; --card:#1B1E27; --ink:#E7EAF0; --ink-mid:#A0A8B8; --ink-soft:#6D7585;
  --rule:#2C3140; --rule-soft:#242936; --flag:#E0A040;
  --tail-bg:rgba(255,255,255,.06);
}
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* ダブル（複合韻）モードは緑系の背景に切り替え */
body.mode-double{ --paper:#EAF2EA; --card:#FFFFFF; --rule:#CADBCA; --rule-soft:#DCEADC; --tail-bg:rgba(20,70,30,.05); }
[data-theme="dark"] body.mode-double,
body.mode-double[data-theme="dark"]{ --paper:#0E1A12; --card:#16261A; --rule:#274031; --rule-soft:#1E3325; --tail-bg:rgba(120,220,150,.06); }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--vw-e);outline-offset:2px}

.masthead{border-bottom:1px solid var(--rule);padding:20px 26px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.masthead .brand{display:flex;align-items:center;text-decoration:none;line-height:0}
.masthead .logo{height:60px;width:auto;display:block}
.masthead p{margin:0;color:var(--ink-mid);font-size:13px}
.count{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);margin-top:8px}
.themebtn{width:36px;height:36px;border:1px solid var(--rule);background:var(--card);border-radius:8px;color:var(--ink-mid);display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .12s,color .12s}
.themebtn:hover{border-color:var(--ink-mid);color:var(--ink)}
.themebtn .ic-moon{display:none}
[data-theme="dark"] .themebtn .ic-sun{display:none}
[data-theme="dark"] .themebtn .ic-moon{display:block}
.menubtn{display:none;position:relative;width:36px;height:36px;border:1px solid var(--rule);background:var(--card);border-radius:8px;color:var(--ink-mid);align-items:center;justify-content:center;padding:0}
.menubtn-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;background:var(--vw-a);color:#fff;border-radius:999px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
.menubtn:hover{border-color:var(--ink-mid);color:var(--ink)}
/* メニューはデスクトップでは素通し（アコーディオンがそのまま並ぶ） */
.menu-head,.menu-back{display:none}

.app{display:grid;grid-template-columns:minmax(280px,330px) 1fr minmax(250px,300px)}
.panel{border-right:1px solid var(--rule);padding:20px 22px 24px;position:sticky;top:0;max-height:100vh;overflow-y:auto}
.stage{padding:20px 24px 80px;min-width:0}
.side{border-left:1px solid var(--rule);padding:20px 20px 60px;position:sticky;top:0;max-height:100vh;overflow-y:auto}

.label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:7px}
.field{margin-bottom:18px}
input[type=text],textarea{width:100%;background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:10px 12px;font-family:var(--jp);font-size:15px;color:var(--ink)}
input[type=text]{font-size:18px}
textarea{resize:vertical;line-height:1.9;font-size:14px}
.hint{margin:6px 0 0;font-size:12px;color:var(--ink-soft);line-height:1.6}

.readout{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:11px 13px;margin-bottom:18px}
.readout.is-add{cursor:pointer;transition:border-color .12s,background .12s}
.readout.is-add:hover{border-color:var(--vw-e);background:color-mix(in srgb,var(--vw-e) 5%,var(--card))}
.readout .addhint{float:right;color:var(--vw-e);font-weight:600;opacity:0;transition:opacity .12s}
.readout.is-add:hover .addhint{opacity:1}
.readout .kana{font-size:19px;letter-spacing:.06em;margin:0}
.readout .vow{font-family:var(--mono);font-size:13px;letter-spacing:.24em;margin:2px 0 0}
.readout .sub{font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.08em;margin:5px 0 0}
.readout.is-bad{border-color:var(--flag)}
.readout.is-bad .kana{color:var(--flag);font-size:14px}

.opt{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:13.5px;color:var(--ink-mid);cursor:pointer}
.opt input{accent-color:var(--vw-e);margin:0;width:15px;height:15px}
.opt.is-on{color:var(--ink)}
.range{display:flex;align-items:center;gap:10px;margin:8px 0}
.range input{flex:1;accent-color:var(--vw-e)}
.range output{font-family:var(--mono);font-size:12px;min-width:58px;text-align:right}
fieldset{border:0;margin:0 0 18px;padding:0}
.acc{margin:0 0 6px;border-bottom:1px solid var(--rule-soft)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:11px 0;user-select:none;margin:0}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{color:var(--ink)}
.acc-ic{margin-left:auto;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s;opacity:.6}
.acc[open]>summary .acc-ic{transform:rotate(-135deg)}
.acc-body{padding:0 0 14px}
.acc[open]>summary{color:var(--ink)}
.acc:last-of-type{border-bottom:0;margin-bottom:0}
.acc:last-of-type .acc-body{padding-bottom:0}

/* 検索欄の追従 */
.searchbar{background:var(--paper)}

.tails{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.tails:empty{margin:0}
.tail{border:1px solid var(--rule);background:var(--card);border-radius:99px;padding:4px 11px;font-size:13px;color:var(--ink-mid)}
.tail:hover{border-color:var(--ink-mid);color:var(--ink)}
.sufs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;align-items:center}
.sufs:empty{margin:0}
.sufs .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-right:4px}
.suf{border:1px solid var(--rule);background:var(--card);border-radius:3px;padding:4px 10px;font-size:13px;color:var(--ink-mid);display:flex;align-items:center;gap:6px}
.suf:hover{border-color:var(--ink-mid);color:var(--ink)}
.suf em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.suf.is-off{background:transparent;border-style:dashed;color:var(--ink-soft);text-decoration:line-through}
.suf.is-off em{text-decoration:none}

.grp{margin-bottom:26px}
.grp h2{margin:0 0 9px;display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);border-bottom:1px solid var(--rule);padding-bottom:7px}
.grp h2 span{font-family:var(--mono);letter-spacing:.2em;font-size:13px;text-transform:none}
.grp h2 em{margin-left:auto;font-style:normal;color:var(--ink-soft)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:6px}
.cand{text-align:left;background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:9px 11px 10px;line-height:1.5;transition:border-color .12s,transform .12s}
.cand:hover{border-color:var(--ink-mid);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.cand{transition:none}.cand:hover{transform:none}}
.cand b{display:block;font-size:15px;font-weight:600;letter-spacing:.02em}
.cand .r{display:block;font-size:11.5px;color:var(--ink-soft)}
.cand .v{font-family:var(--mono);font-size:12px;letter-spacing:.22em;display:block;margin-top:3px}
.cand .v i{font-style:normal}
.cand .v i.hit{box-shadow:inset 0 -2px 0 currentColor}
.cand.pos-p b::after{content:'固';font-size:9px;vertical-align:super;color:var(--ink-soft);margin-left:3px}
.cand.pos-e b::after{content:'英';font-size:9px;vertical-align:super;color:var(--ink-soft);margin-left:3px}
.cand.pos-x b::after{content:'活';font-size:9px;vertical-align:super;color:var(--ink-soft);margin-left:3px}

.v--a{color:var(--vw-a)} .v--i{color:var(--vw-i)} .v--u{color:var(--vw-u)}
.v--e{color:var(--vw-e)} .v--o{color:var(--vw-o)} .v--N{color:var(--vw-N)} .v--Q{color:var(--vw-Q)}

.reshead{display:flex;align-items:center;gap:12px;margin-bottom:14px;min-height:1px}
.reshead .n{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.reshead .ghost{margin-left:auto;padding:5px 13px;font-size:12.5px}
.empty{color:var(--ink-soft);padding:50px 0;text-align:center}
.loading{color:var(--ink-mid);padding:50px 0;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.16em}

.stockhead{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.stockbtns{margin-left:auto;display:flex;gap:6px}
.stockbtns .ghost{padding:4px 11px;font-size:12px}
.stock{display:grid;gap:5px;margin-bottom:16px}
.stockitem{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1px 6px;background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:6px 8px 6px 5px;font-size:15px;position:relative}
.stockitem.dragging{opacity:.95;border-color:var(--vw-e);box-shadow:0 3px 12px rgba(0,0,0,.2);background:color-mix(in srgb,var(--vw-e) 8%,var(--card))}
.stockitem .drag{grid-row:1/3;cursor:grab;color:var(--ink-soft);font-size:16px;line-height:1;padding:0 3px;flex:none;touch-action:none;-webkit-user-select:none;user-select:none;letter-spacing:-3px}
.stockitem .drag:active{cursor:grabbing}
.stockitem .stockword{grid-column:2;cursor:pointer;border-radius:3px;padding:1px 5px;margin-left:-3px;transition:color .12s,background .12s;touch-action:none;-webkit-user-select:none;user-select:none;word-break:break-word;justify-self:start}
.stockitem .stockword:hover{color:var(--vw-e);background:color-mix(in srgb,var(--vw-e) 10%,transparent)}
.stockitem .meta{grid-column:2;display:flex;flex-wrap:wrap;gap:1px 8px;padding-left:2px}
.stockitem .sr{font-size:11px;color:var(--ink-soft)}
.stockitem .v{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-soft)}
.stockitem .rm{grid-column:3;grid-row:1/3;border:0;background:none;color:var(--ink-soft);font-size:15px;line-height:1;padding:2px 4px;flex:none;align-self:center}
.stockitem .rm:hover{color:var(--flag)}
.memohead{display:flex;align-items:center;gap:10px;margin:22px 0 7px}
.miniswitch{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-mid);cursor:pointer}
.miniswitch input{accent-color:var(--vw-e);margin:0;width:14px;height:14px}
.memobtns{display:flex;gap:6px;margin-top:10px}
.ghost.accent{border-color:var(--vw-e);color:var(--vw-e);font-weight:600}
.ghost.accent:hover{background:color-mix(in srgb,var(--vw-e) 10%,transparent)}
.titlerow{display:flex;gap:8px;margin-bottom:14px;align-items:stretch}
.titlerow .inputwrap{flex:1;min-width:0}
.titlerow .accent{flex:none;white-space:nowrap}

/* タブ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.tab{border:0;background:none;padding:9px 4px 10px;font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.tab.is-active{color:var(--ink)}
.tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--vw-e)}
.tabcount{font-family:var(--mono);font-size:10px;background:var(--vw-e);color:#fff;border-radius:999px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center}

/* 保存済み一覧 */
.saved{display:grid;gap:7px}
.saveitem{border:1px solid var(--rule);border-radius:4px;padding:10px 12px;background:var(--card);cursor:pointer;transition:border-color .12s}
.saveitem:hover{border-color:var(--ink-mid)}
.saveitem .st{font-size:15px;font-weight:600;margin-bottom:3px;word-break:break-word}
.saveitem .smeta{font-family:var(--mono);font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.saveitem .sdel{margin-left:auto;border:0;background:none;color:var(--ink-soft);font-size:16px;line-height:1;padding:2px 4px;cursor:pointer}
.saveitem .sdel:hover{color:var(--flag)}
.ghost{border:1px solid var(--rule);background:transparent;border-radius:3px;padding:6px 12px;font-size:12.5px;color:var(--ink-mid)}
.ghost:hover{border-color:var(--ink-mid);color:var(--ink)}

@media (max-width:1180px){
  .app{grid-template-columns:minmax(270px,320px) 1fr}
  .side{grid-column:1/-1;border-left:0;border-top:1px solid var(--rule);position:static;max-height:none}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .panel{display:contents}
  .panel>.searchbar{order:-1}
  .stage{padding:18px 18px 90px}
  .masthead{padding:12px 16px;position:sticky;top:0;z-index:40;background:var(--paper);gap:10px;flex-wrap:nowrap}
  .masthead .logo{height:48px}
  .masthead .brand{flex:0 1 auto;min-width:0}
  .masthead .modebtn .mode-single span,.masthead .modebtn .mode-double span{display:none}
  .masthead .modebtn{padding:8px 10px;flex:none}
  .themebtn,.menubtn{flex:none}

  /* 候補は狭い画面でも2列を維持する */
  .grid{grid-template-columns:1fr 1fr;gap:6px}
  .cand{padding:8px 9px 9px}
  .cand b{font-size:15px}

  /* 検索欄（踏みたい言葉）をヘッダーのすぐ下に追従させる */
  .searchbar{
    position:sticky;top:var(--headh,96px);z-index:30;
    background:var(--paper);
    padding:12px 18px;
    border-bottom:1px solid var(--rule);
    box-shadow:0 4px 12px rgba(0,0,0,.06);
  }
  .searchbar .field{margin-bottom:0}
  .searchbar .hint{display:none}
  .readout{margin:12px 18px 0}
  .count{margin:6px 18px 0}

  /* メニューボタンをヘッダーに表示 */
  .menubtn{display:flex}

  /* 絞り込み・判定を左からのスライドメニューに */
  .menu{
    position:fixed;top:0;right:0;bottom:0;
    width:min(86vw,340px);
    background:var(--paper);
    border-left:1px solid var(--rule);
    z-index:60;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:-12px 0 40px rgba(0,0,0,.18);
    overflow-y:auto;
    padding:0 18px 40px;
  }
  .menu.is-open{transform:translateX(0)}
  .menu-head{display:flex;align-items:center;position:sticky;top:0;background:var(--paper);
    padding:16px 0 12px;margin-bottom:4px;border-bottom:1px solid var(--rule-soft);z-index:1}
  .menu-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
  .menu-close{margin-left:auto;width:30px;height:30px;border:0;background:transparent;color:var(--ink-soft);font-size:22px;line-height:1;border-radius:6px}
  .menu-close:hover{background:var(--rule-soft);color:var(--ink)}
  .menu-back{display:block;position:fixed;inset:0;background:rgba(10,12,18,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .28s}
  .menu-back.is-open{opacity:1;pointer-events:auto}
  .menu .acc{padding:0}
  .menu .acc:first-of-type{border-top:0}
  body.menu-open{overflow:hidden}

  /* サイドを右からのドロワーにする */
  .side{
    position:fixed;top:0;right:0;bottom:0;
    width:min(88vw,360px);
    border-left:1px solid var(--rule);border-top:0;
    background:var(--card);
    z-index:60;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:-12px 0 40px rgba(0,0,0,.18);
    max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0 20px calc(40px + env(safe-area-inset-bottom, 24px));
  }
  .side #memo{min-height:120px;font-size:16px}
  .side #projTitle{font-size:16px}
  .side.is-open{transform:translateX(0)}
  .drawer-head{display:flex;align-items:center;position:sticky;top:0;background:var(--card);
    padding:16px 0 12px;margin-bottom:6px;border-bottom:1px solid var(--rule-soft);z-index:1;gap:4px}
  .drawer-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
  .drawer-gear{margin-left:auto;width:32px;height:32px;border:0;background:transparent;color:var(--ink-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0}
  .drawer-gear:hover{background:var(--rule-soft);color:var(--ink)}
  .drawer-close{width:30px;height:30px;border:0;background:transparent;color:var(--ink-soft);font-size:22px;line-height:1;border-radius:6px}
  .drawer-close:hover{background:var(--rule-soft);color:var(--ink)}

  .drawer-back{position:fixed;inset:0;background:rgba(10,12,18,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .28s}
  .drawer-back.is-open{opacity:1;pointer-events:auto}

  body.drawer-open{overflow:hidden}
}
/* デスクトップでは常に隠す。ドロワー内の歯車も不要（設定は左パネル常設） */
.drawer-head,.drawer-back,.fab,.drawer-gear{display:none}
@media (max-width:820px){ .drawer-head{display:flex} .drawer-gear{display:flex} .drawer-back{display:block} }
.sitefoot{border-top:1px solid var(--rule);padding:20px 26px;text-align:center;font-size:12.5px;color:var(--ink-soft);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sitefoot a{color:var(--ink-mid);text-decoration:none}
.sitefoot a:hover{color:var(--ink)}

/* ヘルプの?ボタン */
.help{width:16px;height:16px;min-width:16px;border:1px solid var(--rule);background:transparent;color:var(--ink-soft);border-radius:50%;font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:2px;transition:border-color .12s,color .12s,background .12s}
.help:hover{border-color:var(--vw-e);color:var(--vw-e)}
.opt .help{margin-left:auto}
.range .help{flex:none}

/* モーダル */
.modal-back{position:fixed;inset:0;background:rgba(10,12,18,.5);display:none;align-items:center;justify-content:center;padding:24px;z-index:100}
.modal-back.is-open{display:flex;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--card);border:1px solid var(--rule);border-radius:8px;max-width:440px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modal-back.is-open,.modal{animation:none}}
.modal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--rule-soft)}
.modal-head h2{margin:0;font-size:16px;line-height:1.5}
.modal-close{margin-left:auto;flex:none;width:28px;height:28px;border:0;background:transparent;color:var(--ink-soft);font-size:20px;line-height:1;border-radius:6px;cursor:pointer}
.modal-close:hover{background:var(--rule-soft);color:var(--ink)}
.modal-body{padding:16px 20px 20px}
.modal-body p{margin:0 0 12px;font-size:14px;line-height:1.85;color:var(--ink-mid)}
.modal-body p:last-child{margin-bottom:0}
.modal-body .ex{background:var(--paper);border:1px solid var(--rule-soft);border-radius:6px;padding:11px 13px;margin:0 0 12px}
.modal-body .ex .cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:5px}
.modal-body .ex .row{font-size:14.5px;line-height:1.7}
.modal-body .ex .vw{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ink-soft)}
.modal-body strong{color:var(--ink);font-weight:600}

/* ===== シングル/ダブル モード切替（アイコンボタン） ===== */
.modebtn{display:inline-flex;align-items:center;gap:7px;margin-left:auto;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:7px 12px;color:var(--ink-mid);text-decoration:none;font-size:13px;font-weight:600;line-height:1;transition:border-color .12s,color .12s}
.modebtn:hover{border-color:var(--ink-mid);color:var(--ink)}
.modebtn svg{color:var(--vw-e)}

/* ===== ダブル（複合韻）ビュー ===== */
#doubleView{max-width:820px}
.split{margin:4px 0 8px}
.split .srow{display:flex;align-items:center;gap:12px}
.split input[type=range]{flex:1}
.splitlabel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin-top:8px;font-family:var(--mono)}
.splitlabel .cell{text-align:center}
.splitlabel b{color:var(--vw-e);font-weight:600}
.splitlabel .sep{color:var(--vw-e)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.col h2{font-size:12px;font-weight:600;color:var(--ink-mid);margin:0 0 8px;display:flex;align-items:baseline;gap:8px}
.col h2 .vw{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-soft);font-weight:400}
.collist{display:grid;gap:6px}
/* カードはシングルの候補(.cand)と同じ見た目に統一 */
.pick{text-align:left;background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:9px 11px 10px;line-height:1.5;cursor:pointer;width:100%;transition:border-color .12s,transform .12s}
.pick:hover{border-color:var(--ink-mid);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.pick{transition:none}.pick:hover{transform:none}}
.pick.sel{border-color:var(--vw-e);background:color-mix(in srgb,var(--vw-e) 10%,transparent)}
.pick .pw{display:block;font-size:15px;font-weight:600;letter-spacing:.02em}
.pick.sel .pw{color:var(--vw-e)}
.pick .pv{display:block;font-size:11.5px;color:var(--ink-soft)}
.pick .pvv{font-family:var(--mono);font-size:12px;letter-spacing:.22em;display:block;margin-top:3px;color:var(--vw-e)}
.col .none{font-size:13px;color:var(--ink-soft);padding:10px 2px}

/* 下部の連結バー */
.combo{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -4px 16px rgba(0,0,0,.08);z-index:45;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px}
.combo[hidden]{display:none}
.combo .txt{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.combo .txt .ph{color:var(--ink-soft);font-weight:400;font-size:14px}
.combo .txt .half{color:var(--vw-e)}
.combo .txt .q{color:var(--ink-soft)}
.combo .add{flex:none;border:none;background:var(--vw-e);color:#fff;font-weight:600;border-radius:8px;padding:9px 16px;font-size:14px;cursor:pointer;opacity:.4;pointer-events:none}
.combo .add.on{opacity:1;pointer-events:auto}
.combo .add:hover{filter:brightness(1.05)}

/* モードボタンの表示切替 */
.modebtn .mode-double{display:none}
body.mode-double .modebtn .mode-single{display:none}
body.mode-double .modebtn .mode-double{display:inline-flex;align-items:center;gap:7px}
.modebtn .mode-single{display:inline-flex;align-items:center;gap:7px}
body.mode-double .stage{padding-bottom:96px}

@media (max-width:820px){
  .cols{gap:10px}
  .pick{padding:8px 9px 9px}
  .pick .pw{font-size:15px}
}

/* 辞書ソースの固定表示（IPADIC/CMUdict） */
.opt.is-fixed{color:var(--ink-soft);cursor:default}
.opt.is-fixed input{opacity:.5}
.srcnote{margin-left:auto;font-size:11px;color:var(--ink-soft);font-family:var(--mono)}
.opt.is-fixed{display:flex;align-items:center;gap:8px}

/* 入力欄の×クリアボタン */
.inputwrap{position:relative;flex:1;min-width:0}
.inputwrap input[type=text]{width:100%;padding-right:38px}
.clearbtn{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:24px;height:24px;border:0;background:var(--rule);color:var(--ink-soft);border-radius:999px;font-size:15px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.clearbtn:hover{background:var(--ink-soft);color:var(--paper)}
.inputwrap.has-text .clearbtn{display:flex}

/* 分割スライダーの無効化とオーバーレイ */
.srow{position:relative}
.srow.is-locked input[type=range]{opacity:.35;pointer-events:none}
.split-lock{position:absolute;left:44px;right:0;top:50%;transform:translateY(-50%);font-size:12px;color:var(--ink-soft);background:var(--paper);padding:4px 8px;border-radius:6px;text-align:center;pointer-events:none}
.split-lock[hidden]{display:none}

/* 一番上に戻るボタン */
.totop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:44;width:44px;height:44px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink-mid);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.18);cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.totop.show{opacity:1;transform:translateY(0)}
.totop[hidden]{display:none}
.totop:hover{border-color:var(--ink-mid);color:var(--ink)}
/* ダブルモードでは下部バーがあるので少し上げる */
body.mode-double .totop{bottom:calc(78px + env(safe-area-inset-bottom,0px))}