/* 民法・条文判例解説（ウェブ版）。アプリのネオン（暗い地・細い線・差し色の光）とライト（チタンの地）を写した */

:root {
  /* 差し色：条文・判例・体系（暗い地, 明るい地）。既定は紺 */
  --c1d: #A6B1EC; --c1l: #2E3968;
  --c2d: #98BDEB; --c2l: #264E80;
  --c3d: #B5ACEE; --c3l: #443B84;
  /* ライトの地・字・薄い字（既定はチタン） */
  --gl: #ECECEA; --il: #0A0A0A; --ml: #454A50;

  --ground: #0E0E12;
  --ink-rgb: 247, 245, 240;
  --text: rgb(var(--ink-rgb));
  --mute: rgba(var(--ink-rgb), .55);
  --faint: rgba(var(--ink-rgb), .1);
  --c1: var(--c1d); --c2: var(--c2d); --c3: var(--c3d);
  --alert: #FF9EA3;
  --glow: 1;
  --weight: 300;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  color-scheme: dark;
}

[data-accent="blue"]   { --c1d:#9DBDFF; --c1l:#2F5687; --c2d:#8CCDFF; --c2l:#25618F; --c3d:#A8B2FF; --c3l:#3B4A92; }
[data-accent="green"]  { --c1d:#9FE6B5; --c1l:#2E6A4B; --c2d:#8CE4D4; --c2l:#22675F; --c3d:#BFE8A0; --c3l:#48692A; }
[data-accent="violet"] { --c1d:#CFA6F5; --c1l:#6A3E86; --c2d:#E8A3E0; --c2l:#7E3A74; --c3d:#B4ACFF; --c3l:#4B4398; }
[data-accent="amber"]  { --c1d:#FFCF8A; --c1l:#8A5512; --c2d:#FFB48A; --c2l:#93461E; --c3d:#F7E38C; --c3l:#7A6414; }
[data-accent="rose"]   { --c1d:#F9A8C9; --c1l:#94365E; --c2d:#F2A7B8; --c2l:#8A3A4E; --c3d:#E8A3E0; --c3l:#7E3A74; }
[data-accent="silver"] { --c1d:#DADDE3; --c1l:#3A3F47; --c2d:#C4CCD6; --c2l:#2F3640; --c3d:#E6E1DA; --c3l:#45403A; }

[data-paper="ivory"] { --gl:#F3EFE6; --il:#141210; --ml:#4F4A42; }
[data-paper="mist"]  { --gl:#E6ECF1; --il:#0A0F14; --ml:#42505C; }
[data-paper="stone"] { --gl:#DCDDDF; --il:#0A0A0A; --ml:#3F4348; }

/* ライト：地と字を入れ替え、差し色は深い色に、光は消す */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: var(--gl); --text: var(--il); --mute: var(--ml);
    --faint: color-mix(in srgb, var(--il) 12%, transparent);
    --c1: var(--c1l); --c2: var(--c2l); --c3: var(--c3l);
    --alert: #A3363A; --glow: 0; --weight: 400; --ink-rgb: 10, 10, 10;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: var(--gl); --text: var(--il); --mute: var(--ml);
  --faint: color-mix(in srgb, var(--il) 12%, transparent);
  --c1: var(--c1l); --c2: var(--c2l); --c3: var(--c3l);
  --alert: #A3363A; --glow: 0; --weight: 400; --ink-rgb: 10, 10, 10;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--weight);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  min-height: 100vh;
  transition: background .4s, color .4s;
}
body::before {
  /* 上からうっすら差し色の光（アプリの Backdrop） */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--c1) calc(14% * var(--glow) + 4%), transparent), transparent 70%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--c1); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px 120px; }
.caps { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; font-weight: 400; }
.mute { color: var(--mute); }
.hair { height: 1px; background: var(--faint); border: 0; margin: 0; }
.num { font-variant-numeric: tabular-nums; }

/* 上の帯 */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--faint);
}
.bar .title { flex: 1; min-width: 0; text-align: center; font-size: 14px; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .title small { display: block; font-size: 9px; letter-spacing: .3em; color: var(--accent, var(--c1)); line-height: 1.4; }
.iconbtn {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  color: color-mix(in srgb, var(--text) 85%, transparent);
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.iconbtn:hover { border-color: var(--accent, var(--c1)); color: var(--accent, var(--c1)); }
.iconbtn.on { border-color: var(--accent, var(--c1)); color: var(--accent, var(--c1)); box-shadow: 0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--accent, var(--c1)) 50%, transparent); }
.iconbtn svg, .ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ghost { width: 38px; flex: none; }

/* 初期メニュー */
.menu { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 40px; }
.logo { text-align: center; }
.logo .en { font-size: 20px; letter-spacing: .5em; padding-left: .5em; font-weight: 300; }
.logo .bars { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.logo .bars i { width: 14px; height: 1px; border-radius: 1px; }
.logo .ja { font-size: 14px; letter-spacing: .3em; padding-left: .3em; opacity: .9; margin-top: 12px; }
.menulist { margin-top: 44px; }
.menurow { display: flex; align-items: baseline; gap: 14px; padding: 15px 6px; border-bottom: 1px solid var(--faint); transition: background .2s; }
.menurow:first-child { border-top: 1px solid var(--faint); }
.menurow:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.menurow .t { font-size: 19px; letter-spacing: .32em; }
.menurow .d { margin-left: auto; font-size: 12px; color: var(--mute); }
.menurow .chev { color: var(--mute); font-size: 12px; }
.searchpill {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent); border-radius: 999px;
}
.searchpill .t { font-size: 14px; letter-spacing: .3em; }
.menubtns { display: flex; justify-content: center; gap: 22px; margin-top: 20px; }
.ring { width: 38px; height: 38px; }
.seren { margin-top: 26px; }
.seren .head { display: flex; align-items: center; gap: 8px; }
.seren .head .hair { flex: 1; }
.guide { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.guide canvas { width: 30px; height: 34px; flex: none; cursor: pointer; image-rendering: pixelated; }
.guide .words { font-size: 13px; line-height: 1.75; color: color-mix(in srgb, var(--text) 85%, transparent); cursor: pointer; }
.guide .words b { font-weight: inherit; display: block; color: var(--text); }
.foot { margin-top: 40px; font-size: 11px; line-height: 1.8; color: var(--mute); }
.foot a { text-decoration: underline; text-decoration-color: var(--faint); }

/* 見出し */
.pagehead { padding: 28px 0 8px; }
.pagehead .path { font-size: 11px; color: var(--mute); letter-spacing: .08em; }
.pagehead h1 { font-weight: inherit; font-size: 26px; letter-spacing: .12em; margin: 4px 0 0; line-height: 1.5; }
.pagehead h1 .cap { font-size: 16px; color: var(--mute); margin-left: 10px; letter-spacing: .06em; }
.sechead { display: flex; align-items: center; gap: 10px; margin: 40px 0 14px; }
.sechead .hair { flex: 1; }
.sechead .caps { color: var(--accent, var(--c1)); }
.sechead .ja { font-size: 13px; letter-spacing: .2em; }

/* 一覧 */
.listhead { position: sticky; top: 59px; z-index: 5; padding: 18px 0 6px; background: linear-gradient(var(--ground) 70%, transparent); font-size: 13px; letter-spacing: .14em; color: var(--accent, var(--c1)); }
.listhead.part { font-size: 15px; letter-spacing: .3em; padding-top: 34px; color: var(--text); }
.listsub { font-size: 11px; color: var(--mute); padding: 10px 0 2px; letter-spacing: .1em; }
.row { display: flex; align-items: baseline; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--faint); transition: background .15s; }
.row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.row .l { flex: none; min-width: 5.6em; font-size: 14px; letter-spacing: .06em; }
.row .c { flex: 1; min-width: 0; font-size: 14px; color: color-mix(in srgb, var(--text) 82%, transparent); }
.row .c small { display: block; color: var(--mute); font-size: 11px; line-height: 1.6; }
.row .m { flex: none; font-size: 11px; color: var(--mute); }
.row .chk { flex: none; width: 14px; color: var(--accent, var(--c1)); }
.row .key { color: var(--c2); font-size: 10px; margin-left: 6px; letter-spacing: .1em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chip { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--faint); letter-spacing: .08em; transition: border-color .2s, color .2s; }
.chip:hover, .chip.on { border-color: var(--accent, var(--c1)); color: var(--accent, var(--c1)); }
.jump { display: flex; gap: 8px; align-items: center; margin: 18px 0 4px; }
.jump input { width: 7em; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--faint); background: transparent; }
.jump input:focus { outline: none; border-color: var(--accent, var(--c1)); }

/* 条文 */
.statute { border-left: 1px solid var(--accent, var(--c1)); padding: 4px 0 4px 18px; margin: 18px 0 8px; }
.statute p { margin: 0 0 10px; font-size: 17px; line-height: 2; }
.statute .pn { color: var(--accent, var(--c1)); font-size: 13px; margin-right: 8px; }
.statute .items { margin: 0 0 10px 1.6em; }
.statute .items div { font-size: 15.5px; line-height: 1.95; }
.statute .items .il { color: var(--mute); margin-right: .6em; }
mark.ph { background: none; color: inherit; border-bottom: 1px solid color-mix(in srgb, var(--accent, var(--c1)) 70%, transparent); cursor: pointer; transition: color .2s, text-shadow .2s; }
mark.ph:hover, mark.ph.lit { color: var(--accent, var(--c1)); text-shadow: 0 0 calc(8px * var(--glow)) color-mix(in srgb, var(--accent, var(--c1)) 60%, transparent); }
.prose p { margin: 0 0 1.1em; font-size: 15.5px; line-height: 2; text-align: justify; }
.prose a.ln { color: var(--accent, var(--c1)); border-bottom: 1px solid color-mix(in srgb, var(--accent, var(--c1)) 40%, transparent); }
.prose a.ln.case { color: var(--c2); border-bottom-color: color-mix(in srgb, var(--c2) 40%, transparent); }
.speaking { background: color-mix(in srgb, var(--accent, var(--c1)) 10%, transparent); box-shadow: -10px 0 0 color-mix(in srgb, var(--accent, var(--c1)) 10%, transparent), 10px 0 0 color-mix(in srgb, var(--accent, var(--c1)) 10%, transparent); border-radius: 4px; }

/* 論点・判例のカード */
.card { border: 1px solid var(--faint); border-radius: 18px; padding: 18px 18px 8px; margin: 14px 0; background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.card h3 { font-weight: inherit; font-size: 17px; letter-spacing: .06em; margin: 0 0 10px; line-height: 1.6; }
.card h3 .no { color: var(--accent, var(--c1)); font-size: 12px; margin-right: 8px; letter-spacing: .1em; }
.card .lab { font-size: 11px; letter-spacing: .24em; color: var(--accent, var(--c1)); margin: 14px 0 4px; }
.card .quote { font-size: 13px; color: var(--mute); margin-bottom: 6px; }
.card .quote b { font-weight: inherit; color: var(--accent, var(--c1)); }
.casecard { display: block; transition: border-color .2s; }
.casecard:hover { border-color: color-mix(in srgb, var(--c2) 50%, transparent); }
.casecard .court { font-size: 12px; color: var(--c2); letter-spacing: .08em; }
.casecard .hold { font-size: 14px; color: color-mix(in srgb, var(--text) 80%, transparent); line-height: 1.85; margin: 6px 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tag { display: inline-block; font-size: 10px; letter-spacing: .14em; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c2) 50%, transparent); color: var(--c2); margin-left: 6px; vertical-align: 2px; line-height: 1.8; }

/* 図 */
.fig { border: 1px solid color-mix(in srgb, var(--accent, var(--c1)) 25%, transparent); border-radius: 16px; padding: 14px; margin: 16px auto; max-width: 520px; background: color-mix(in srgb, var(--accent, var(--c1)) 3.5%, transparent); }
.fig .fcap { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .08em; color: color-mix(in srgb, var(--text) 75%, transparent); margin-bottom: 8px; line-height: 1.5; }
.fig .fcap .ico { width: 12px; height: 12px; color: var(--accent, var(--c1)); flex: none; }
.fig .fcap .hair { flex: 1; min-width: 12px; }
.fig svg.d { display: block; width: 100%; overflow: visible; }
.fig table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.6; }
.fig td, .fig th { text-align: left; padding: 6px; vertical-align: top; font-weight: inherit; border-top: 1px solid var(--faint); }
.fig th { color: var(--accent, var(--c1)); border-top: 0; }
.fig td:first-child { color: var(--text); background: color-mix(in srgb, var(--accent, var(--c1)) 5%, transparent); }
.fig .tablewrap { overflow-x: auto; }

/* 読了・ページ送り */
.done { display: flex; justify-content: center; margin: 36px 0 10px; }
.check { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--text) 28%, transparent); color: color-mix(in srgb, var(--text) 35%, transparent); transition: all .25s; }
.check svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.check.on { border-color: var(--accent, var(--c1)); color: var(--accent, var(--c1)); background: color-mix(in srgb, var(--accent, var(--c1)) 16%, transparent); box-shadow: 0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--accent, var(--c1)) 50%, transparent); }
.check.on svg { stroke-width: 1.8; }
.pager { display: flex; gap: 10px; margin: 18px 0; }
.pager a { flex: 1; border: 1px solid var(--faint); border-radius: 14px; padding: 10px 14px; font-size: 13px; transition: border-color .2s; min-width: 0; }
.pager a:hover { border-color: var(--accent, var(--c1)); }
.pager a small { display: block; font-size: 10px; letter-spacing: .3em; color: var(--accent, var(--c1)); }
.pager a span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pager a.next { text-align: right; }
.pager .sp { flex: 1; }

.btnline { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent, var(--c1)) 40%, transparent); font-size: 13px; letter-spacing: .1em; margin: 6px 8px 6px 0; transition: background .2s; }
.btnline:hover { background: color-mix(in srgb, var(--accent, var(--c1)) 10%, transparent); }

/* 判決文 */
.judg { margin-top: 14px; border-top: 1px solid var(--faint); padding-top: 14px; }
.judg h4 { font-weight: inherit; font-size: 14px; letter-spacing: .3em; color: var(--accent, var(--c1)); margin: 22px 0 8px; }
.judg p { font-size: 14.5px; line-height: 2; margin: 0 0 .9em; user-select: text; }
.judg .src { font-size: 11px; color: var(--mute); }

/* 検索 */
.searchbox { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); margin: 22px 0 6px; }
.searchbox input { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; min-width: 0; }
.hit { display: block; padding: 12px 4px; border-bottom: 1px solid var(--faint); }
.hit .t { font-size: 14.5px; }
.hit .s { font-size: 11px; color: var(--mute); margin-left: 8px; }
.hit .x { font-size: 13px; color: var(--mute); line-height: 1.75; margin-top: 2px; }
.hit em { font-style: normal; color: var(--c1); }

/* 進捗 */
.gauges { display: grid; gap: 18px; margin: 26px 0; }
.gauge .top { display: flex; align-items: baseline; gap: 10px; font-size: 13px; letter-spacing: .14em; }
.gauge .top .n { margin-left: auto; font-size: 12px; color: var(--mute); }
.gauge .track { height: 4px; border-radius: 4px; background: var(--faint); margin-top: 6px; overflow: hidden; }
.gauge .fill { height: 100%; border-radius: 4px; box-shadow: 0 0 calc(8px * var(--glow)) currentColor; background: currentColor; }
.bigring { display: grid; place-items: center; margin: 30px 0 10px; }
.bigring svg { width: 160px; height: 160px; }

/* 読み上げのミニプレイヤー */
#player {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  width: min(380px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c1) 40%, transparent);
  background: color-mix(in srgb, var(--ground) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 30px rgba(0,0,0,.25);
}
#player .now { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#player .now small { display: block; font-size: 9px; letter-spacing: .3em; color: var(--c1); line-height: 1.3; }
#player .iconbtn { width: 34px; height: 34px; }

/* シート（色の設定・判決文） */
#sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center; background: rgba(0,0,0,.35); }
#sheet .panel {
  width: min(560px, 100%); max-height: 88vh; overflow: auto; padding: 22px 20px max(28px, env(safe-area-inset-bottom));
  background: var(--ground); border: 1px solid var(--faint); border-bottom: 0; border-radius: 22px 22px 0 0;
  animation: up .28s cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 700px) { #sheet { place-items: center; } #sheet .panel { border-radius: 22px; border-bottom: 1px solid var(--faint); } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.panel h2 { font-weight: inherit; font-size: 15px; letter-spacing: .24em; margin: 0 0 6px; display: flex; align-items: center; }
.panel h2 .x { margin-left: auto; }
.panel .lab { font-size: 11px; letter-spacing: .24em; color: var(--mute); margin: 18px 0 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--faint); position: relative; }
.sw.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--text); }
.seg { display: inline-flex; border: 1px solid var(--faint); border-radius: 999px; padding: 3px; }
.seg button { padding: 4px 16px; border-radius: 999px; font-size: 13px; letter-spacing: .1em; }
.seg button.on { background: color-mix(in srgb, var(--c1) 18%, transparent); color: var(--c1); }

/* 読了したときの印 */
.burst { position: fixed; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; z-index: 60; pointer-events: none; animation: burst 1.4s ease forwards; }
@keyframes burst { 0% { opacity: 0; transform: scale(.9); } 15% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
.burst circle.bg { fill: color-mix(in srgb, var(--ground) 90%, transparent); }
.burst .ring2 { stroke-dasharray: 280; stroke-dashoffset: 280; animation: draw .5s ease-out forwards; }
.burst .tick { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .3s .35s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.empty { padding: 40px 0; text-align: center; color: var(--mute); font-size: 13px; }
.loading { padding: 80px 0; text-align: center; color: var(--mute); font-size: 12px; letter-spacing: .3em; }

/* 入るときにふわっと */
.view { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .view, .burst, #sheet .panel { animation: none; } }

@media (max-width: 480px) {
  .pagehead h1 { font-size: 22px; }
  .statute p { font-size: 16px; }
  .prose p { font-size: 15px; }
  .card { padding: 16px 14px 6px; border-radius: 16px; }
  .menurow .t { font-size: 17px; letter-spacing: .24em; }
}