/* INDEX CONVERTER v2（ch-texts.org のトップと同じ色・ヘッダー・フッター） */
:root { --bg:#f5f4f0; --fg:#1a1a1a; --sub:#7a7a7a; --muted:#6b6b6b; --card:#fff; --line:#e6e5e1; --chip:#edece8; --nh:56px;
  --accent:#10b981; --accent-dark:#047857; --accent-soft:#ecfdf5; --hl:#fef3c7; --poly:#b45309; }
@media (prefers-color-scheme: dark) { :root { --bg:#121212; --fg:#e8e6e1; --sub:#8a8a8a; --muted:#a3a19c; --card:#1c1c1c; --line:#2a2a2a; --chip:#262626;
  --accent:#34d399; --accent-dark:#6ee7b7; --accent-soft:#10261d; --hl:#4a3b10; --poly:#f0b35a; } }
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--fg); font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif; font-size:15px; line-height:1.75; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-dark); }
code, pre { font-family:ui-monospace,Consolas,"Noto Sans Mono CJK SC",monospace; font-size:13px; }
pre { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 12px; overflow-x:auto; margin:8px 0; white-space:pre-wrap; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.hidden { display:none !important; }

/* ---------- ヘッダー（ch-texts.org のトップと同じ） ---------- */
.nv { position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.nv-i { max-width:1080px; margin:0 auto; padding:0 24px; height:var(--nh); display:flex; align-items:center; justify-content:space-between; }
.nv-b { font-size:16px; font-weight:800; color:var(--fg); text-decoration:none; }
.nv-l { display:flex; gap:3px; }
.nv-l a { font-size:12px; font-weight:600; padding:6px 12px; border-radius:6px; color:var(--sub); text-decoration:none; transition:all .2s; }
.nv-l a:hover { color:var(--fg); background:var(--chip); }
.nv-l a em { font-style:normal; font-size:10px; opacity:.4; margin-right:3px; }
.hb { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--fg); }
.mo { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5); }
.mo.open { display:block; }
.mo-p { position:fixed; top:0; right:0; bottom:0; width:280px; background:var(--card); padding:24px; box-shadow:-4px 0 24px rgba(0,0,0,.1); overflow-y:auto; }
.mo-c { background:none; border:none; cursor:pointer; font-size:28px; color:var(--sub); float:right; }
.mo-n { margin-top:48px; }
.mo-n a { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; font-weight:600; color:var(--fg); text-decoration:none; }
.mo-n .mn { font-size:12px; color:var(--sub); width:24px; }
.mo-x { margin-top:32px; padding-top:20px; border-top:1px solid var(--line); }
.mo-x a { display:block; padding:10px 0; font-size:13px; color:var(--sub); text-decoration:none; }
@media (max-width:980px) { .nv-l { display:none; } .hb { display:block; } }

/* ---------- フッター（ch-texts.org のトップと同じ） ---------- */
.ft { text-align:center; padding:40px 24px 48px; border-top:1px solid var(--line); margin-top:24px; }
.ft p { font-size:11px; color:var(--sub); opacity:.6; margin-top:4px; }
.lab { max-width:560px; margin:0 auto 22px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--card); text-align:left; }
.lab h4 { font-size:13px; font-weight:800; margin-bottom:6px; }
.lab p { font-size:12px; color:var(--sub); line-height:1.8; margin:0; opacity:1; }
.lab a.cbtn { display:inline-block; margin-top:10px; padding:9px 22px; border-radius:8px; background:#10b981; color:#fff; font-size:12.5px; font-weight:700; text-decoration:none; }
.lab a.cbtn:hover { opacity:.88; }
.fl { display:flex; justify-content:center; gap:28px; margin-bottom:16px; flex-wrap:wrap; }
.fl a { font-size:12px; color:var(--sub); font-weight:600; text-decoration:none; }
.fl a:hover { color:var(--fg); }

/* ---------- 本文 ---------- */
main { max-width:1080px; margin:0 auto; padding:28px 24px 8px; }
.intro { margin-bottom:18px; }
.kicker { font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--accent-dark); }
.intro h1 { font-size:32px; line-height:1.3; margin:2px 0 8px; letter-spacing:.02em; }
.lead { color:var(--muted); max-width:760px; }
.vsw { float:right; display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:13px; background:var(--card); }
.vsw > * { padding:5px 14px; text-decoration:none; color:var(--muted); }
.vsw .on { background:var(--accent); color:#fff; font-weight:700; }
.vsw a:hover { color:var(--fg); background:var(--chip); }

/* 手順の帯 */
.steps { list-style:none; padding:6px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0 0 12px; position:sticky; top:var(--nh); z-index:50; background:var(--bg); }
.steps li { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:700; cursor:default; }
.steps .sn { flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--chip); color:var(--muted); font-size:13px; }
.steps li.done { cursor:pointer; color:var(--accent-dark); }
.steps li.done .sn { background:var(--accent-soft); color:var(--accent-dark); }
.steps li.done .sn::before { content:"✓"; }
.steps li.done .sn span, .steps li.done .sn { font-size:0; }
.steps li.done .sn::before { font-size:13px; }
.steps li.now { border-color:var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
.steps li.now .sn { background:#fff; color:var(--accent-dark); }
.steps li.reach { cursor:pointer; }

/* STEP の枠 */
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-bottom:16px; scroll-margin-top:calc(var(--nh) + 70px); }
.sh { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.sh h2 { font-size:19px; }
h2.plain { font-size:17px; margin-bottom:8px; }
.badge { flex:none; font-size:12px; font-weight:800; letter-spacing:.08em; padding:4px 10px; border-radius:6px; background:var(--accent); color:#fff; }
.todo { font-size:14px; padding:8px 12px; background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:6px; margin:6px 0 12px; }
.step.now { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.step.locked { opacity:.45; }
.step.locked > :not(.sh):not(.locknote) { pointer-events:none; }
.locknote { display:none; font-size:13px; font-weight:700; color:var(--poly); margin:4px 0 10px; }
.step.locked .locknote { display:block; }
.next { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 16px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.next > .muted, .next > .info { flex:1 1 280px; min-width:0; }

.row { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:10px 0; }
.lbl { flex:none; width:5.5em; font-size:13px; font-weight:700; color:var(--muted); }
.info { font-size:13px; color:var(--accent-dark); min-height:1em; margin:4px 0; }
.info:empty { display:none; }
.row > .info { flex:1 1 260px; min-width:0; margin:0; }
details.more { display:inline-flex; align-items:center; gap:6px; }
details.more summary { cursor:pointer; font-size:13px; color:var(--muted); list-style:none; padding:6px 4px; }
details.more summary::-webkit-details-marker { display:none; }
details.more summary::after { content:" ▾"; }
details.more[open] { display:inline-flex; }
details.hint, details.sub { margin:10px 0; }
details.hint summary, details.sub summary { cursor:pointer; color:var(--accent-dark); font-size:14px; font-weight:600; }

textarea { width:100%; display:block; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:15px; line-height:1.9; background:var(--card); color:var(--fg); font-family:"Noto Sans SC","Noto Sans TC","Microsoft YaHei","PingFang SC","Noto Sans JP",sans-serif; resize:vertical; }
textarea:focus, input:focus, select:focus { outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:1px; }
input[type=text], input[type=search], select { font:inherit; font-size:14px; padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); }
.btn { display:inline-flex; align-items:center; font:inherit; font-size:14px; padding:7px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.btn.primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.btn.big { font-size:15px; padding:10px 22px; }
.btn.ghost { background:transparent; }
.btn[disabled] { opacity:.5; cursor:wait; }
.modes { display:flex; flex-direction:column; gap:6px; margin:4px 0 6px; }
.modes label { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.chk { display:inline-flex; align-items:center; gap:6px; margin-right:12px; }

/* 区切りの編集（STEP 2） */
.segguide { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); margin:10px 0 6px; }
.segguide b { color:var(--fg); }
.joinmark { display:inline-block; padding:0 6px; border:1px solid var(--line); border-radius:6px; }
.seged { border:1px solid var(--line); border-radius:10px; padding:8px 4px; max-height:60vh; overflow:auto; background:var(--card);
  font-family:"Noto Sans SC","Noto Sans TC","Microsoft YaHei","PingFang SC","Noto Sans JP",sans-serif; font-size:18px; }
.seged > p { padding:8px 12px; }
.ln { display:flex; gap:8px; align-items:flex-start; padding:3px 6px; border-bottom:1px dashed var(--line); }
.ln:last-child { border-bottom:0; }
.lno { flex:none; width:2.6em; text-align:right; font-size:11px; color:var(--muted); padding-top:9px; font-family:'Noto Sans JP',sans-serif; user-select:none; }
.lc { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; row-gap:6px; line-height:1.6; }
.mk { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:var(--muted); background:var(--chip); border-radius:6px; padding:2px 8px; margin-right:6px; }
.tok { display:inline-flex; align-items:center; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:7px; padding:1px 3px; }
.ch { display:inline-block; }
/* 語の中の「区切れる所」：ふだんは細く、乗せると緑の縦線 */
.gap { display:inline-block; width:9px; height:1.5em; margin:0 -3px; padding:0; border:0; background:transparent; cursor:col-resize; position:relative; z-index:1; }
.gap:hover::after, .gap:focus-visible::after { content:""; position:absolute; left:3px; top:2px; bottom:2px; width:3px; border-radius:2px; background:var(--accent); }
/* 語と語のあいだ：押すとくっつく */
.sep { display:inline-block; width:14px; height:1.6em; padding:0; border:0; background:transparent; cursor:pointer; position:relative; }
.sep::after { content:""; position:absolute; left:6px; top:5px; bottom:5px; width:2px; border-radius:1px; background:var(--line); }
.sep:hover::after, .sep:focus-visible::after { left:2px; width:10px; background:var(--hl); border:1px dashed var(--poly); }
.sep.fx { cursor:default; width:6px; }
.sep.fx::after { display:none; }
.join { flex:none; margin-left:8px; font-size:13px; line-height:1; padding:4px 7px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; }
.join:hover { border-color:var(--accent); }
.join.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.segpager { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:8px 0; }
.segpager:empty { display:none; }
@media (hover:none) { .gap { width:14px; margin:0 -4px; } .gap::after { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:color-mix(in srgb, var(--accent) 30%, transparent); } }

/* 結果 */
.toolbar label { display:inline-flex; align-items:center; gap:6px; margin-right:6px; }
.stat { font-size:14px; font-weight:700; margin:6px 0; }
.stat:empty { display:none; }
.legend { margin:6px 0 10px; }
.tablewrap { max-height:65vh; overflow:auto; border:1px solid var(--line); border-radius:10px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { padding:6px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { position:sticky; top:0; background:var(--card); color:var(--muted); font-size:12px; font-weight:700; border-bottom:2px solid var(--line); z-index:1; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.w { font-family:"Noto Sans SC","Noto Sans TC","Microsoft YaHei","PingFang SC",sans-serif; font-size:16px; white-space:nowrap; cursor:pointer; }
td.w:hover { color:var(--accent-dark); text-decoration:underline; }
td.py { white-space:nowrap; cursor:pointer; }
td.py:hover { background:var(--hl); }
td.py.edited { color:var(--accent-dark); font-weight:700; }
td.loc { font-size:13px; color:var(--muted); word-break:break-all; }
tr.group td { background:var(--bg); font-weight:800; font-size:15px; padding-top:8px; }
tbody:empty::after { content:"STEP 3 で「索引をつくる」を押すと、ここに索引が出ます。"; display:block; padding:24px; color:var(--muted); font-size:14px; }
.poly { display:inline-block; font-size:10px; line-height:1; padding:2px 4px; border-radius:4px; border:1px solid var(--poly); color:var(--poly); margin-left:4px; vertical-align:middle; }
.export { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }

/* KWIC */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:300; }
.modal .box { background:var(--card); border-radius:12px; width:min(820px,100%); max-height:80vh; overflow:auto; padding:14px 18px; }
.mhead { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.mhead .x { margin-left:auto; font-size:22px; background:none; border:0; cursor:pointer; color:var(--muted); }
.occfix { font:inherit; font-size:11px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--accent-dark); cursor:pointer; }
.occfix:hover { border-color:var(--accent); }
.kw { display:grid; grid-template-columns:5.5em 1fr auto 1fr auto; align-items:center; gap:4px 8px; font-family:"Noto Sans SC","Noto Sans TC","Microsoft YaHei",sans-serif; font-size:15px; }
.kw .loc { color:var(--muted); font-size:12px; font-family:inherit; }
.kw .l { text-align:right; overflow:hidden; white-space:nowrap; direction:rtl; }
.kw .k { background:var(--hl); font-weight:800; padding:0 3px; border-radius:3px; }
.kw .r { overflow:hidden; white-space:nowrap; }

@media (max-width:720px) {
  main { padding:20px 16px 8px; }
  .nv-i { padding:0 16px; }
  .intro h1 { font-size:26px; }
  .vsw { float:none; margin-bottom:10px; }
  .steps { grid-template-columns:repeat(4,1fr); gap:4px; }
  .steps li { flex-direction:column; gap:2px; padding:6px 4px; font-size:11px; text-align:center; }
  .card { padding:16px; }
  .lbl { width:auto; }
  .kw { grid-template-columns:4.5em 1fr auto 1fr auto; font-size:14px; }
}
@media print {
  .nv, .mo, .intro, .steps, #step1, #step2, #step3, #about, .ft, .toolbar, .legend, .export, .todo, .sh, .locknote { display:none !important; }
  body { background:#fff; color:#000; }
  .card { border:0; padding:0; box-shadow:none; }
  .tablewrap { max-height:none; overflow:visible; border:0; }
  th { position:static; }
}