/* 海岸線タイムマシン Ver.2 — Create GBM デザインコード（暗色地・山吹アクセント・和文極太＋英字モノスペース）。
   スマホを基準に組み、タブレット→PC へ広げる。装飾模様・絵文字は使わない。山吹は数か所に絞る。 */
:root{--ink:#0A0F14;--ink2:#0E1620;--snow:#EEF3F6;--mist:#9DB0BC;--dim:#6B7E8A;
--yama:#F8B500;--yama-soft:rgba(248,181,0,.14);--up:#63D297;--down:#FF6B57;
--line:rgba(157,176,188,.22);--card:rgba(20,30,40,.72);--sea:#0B1A28}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--snow);font-family:'Zen Kaku Gothic New','Noto Sans JP',system-ui,sans-serif;font-weight:500;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
input{font:inherit;color:inherit}
a{color:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.18em;font-weight:500}
.app{position:relative;width:100%;height:100%;background:var(--sea);overflow:hidden}
#map{position:absolute;inset:0;background:var(--sea)}
#map .ol-viewport{background:var(--sea)}
/* オーバーレイ束（標高由来の描画）：地図のビューポートの上に重ねる。パン・ズームの途中は app.js の follow() が追随させる。
   キャンバスは CSS transform で拡大縮小し、記号・ラベル（.marks）は拡大縮小せず位置だけ追随させる
   （束ごと transform していたため、地域へ移る途中で史跡の名前が数十倍に拡大されていた・監査 2026-09-29）。
   --x/--y は描いた時点の画面座標（--lx/--ly はラベルの記号からのずれ）。--s/--dx/--dy/--ox/--oy は follow() と placeMarks が入れる */
.stacks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stack{position:absolute;left:0;top:0;width:100%;height:100%;--s:1;--dx:0px;--dy:0px;--ox:50vw;--oy:50vh}
.stack canvas,.stack .marks{position:absolute;left:0;top:0;width:100%;height:100%}
.stack canvas{transform-origin:50% 50%}
.stack .marks{pointer-events:none}
.stack .marks>*{left:calc(var(--ox) + (var(--x,0px) - var(--ox)) * var(--s) + var(--dx) + var(--lx,0px));top:calc(var(--oy) + (var(--y,0px) - var(--oy)) * var(--s) + var(--dy) + var(--ly,0px))}
.stack .marks .site{pointer-events:auto}
/* 縮小して見せている間（次の描画が届くまで）は、縮んだ絵の縁をぼかして、周りの平板な地図との境目を和らげる */
.stack.shrunk canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),linear-gradient(180deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),linear-gradient(180deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-composite:intersect}
.stack.b{clip-path:inset(0 0 0 var(--split,50%))}
.ui{position:absolute;inset:0;pointer-events:none}
.ui>*{pointer-events:auto}

/* パネル */
.panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:14px 16px 14px 20px}
.panel::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;background:var(--yama);border-radius:0 2px 2px 0}
.panel.nb{padding-left:16px}.panel.nb::before{display:none}

/* 史跡記号（U8）：円形バッジ＋SVG 線画。触れる大きさは 30px 以上 */
.site{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(10,15,20,.86);border:1.5px solid var(--mist);display:grid;place-items:center;cursor:pointer}
.site svg{width:18px;height:18px;stroke:var(--snow);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.site.sel{width:38px;height:38px;border:2.5px solid var(--snow);box-shadow:0 0 0 4px rgba(238,243,246,.18)}
.site.sel svg{width:22px;height:22px}
.slabel{position:absolute;font-size:12.5px;font-weight:700;color:var(--snow);text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;white-space:nowrap;letter-spacing:.04em;line-height:1.3;pointer-events:none}
.slabel.sel{font-size:14px}
.pin{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--snow);border:3px solid var(--ink);box-shadow:0 0 0 2px var(--snow),0 2px 8px rgba(0,0,0,.6);pointer-events:none}
.plabel{position:absolute;transform:translate(-50%,16px);font-size:14px;font-weight:900;color:var(--snow);text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;white-space:nowrap;pointer-events:none}

/* 凡例チップ（10 項目。行間と記号を詰めて、1366×635 などの低い画面にも収まる高さにする・監査 2026-09-29） */
.chip{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;color:var(--snow);white-space:nowrap}
.chip .site{position:static;transform:none;width:22px;height:22px;flex:none;cursor:default}
.chip .site svg{width:14px;height:14px}
.chip .sw{width:24px;height:16px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.12)}
/* 見本は地図と同じ重ね方（珊瑚色 .78 の上に水面 .33）で塗る（A-C21） */
.sw.down{background:linear-gradient(rgba(20,60,110,.33),rgba(20,60,110,.33)),rgba(255,107,87,.78)}.sw.up{background:rgba(99,210,151,.5)}
.chip .sw.ln{height:0;border:0;border-radius:0;border-top:3px solid;align-self:center}
.sw.ln.now{border-top-color:#F8B500}.sw.ln.then{border-top-color:rgba(238,243,246,.9)}
/* 凡例の箱: 見出しは折りたたみボタン。高さの上限（max-height）は app.js の layoutLegend() が「ツール行の下端〜下の操作部・字幕・時代カードの上端」で与え、
   収まらないぶんは本体（.body）の内側スクロール。PC・タブレットで全項目が収まらない画面は初期状態を見出しだけ（.fold）にする */
.legend{display:flex;flex-direction:column;padding:4px 12px 8px;overflow:hidden}
.legend .hd{flex:none;display:flex;align-items:center;gap:8px;width:100%;height:28px;font-size:11px;color:var(--dim);text-align:left}
.legend .hd svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:auto;transition:transform .2s}
.legend .body{display:flex;flex-direction:column;gap:5px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:2px}
.legend-wrap.fold .legend .body{display:none}
.legend-wrap.fold .legend .hd svg{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.legend .hd svg{transition:none}}

/* 見出し・キッカー */
.kick{font-size:11px;color:var(--dim)}
.kick .ja{text-transform:none;letter-spacing:.06em;margin-left:10px;color:var(--mist)}
.kick.y{color:var(--yama)}
h1.ttl{font-weight:900;font-size:20px;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
h1.ttl b{color:var(--yama);font-weight:900}
.brand,.lvl{text-shadow:0 0 4px rgba(10,15,20,.9),0 0 12px rgba(10,15,20,.9)}

/* 水位ブロック：数値を主役化 */
.lvl .k{font-size:11px;color:var(--dim);margin-bottom:4px;white-space:nowrap}
.lvl .num{font-weight:900;font-size:40px;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lvl .num .u{font-size:.42em;font-weight:700;color:var(--mist);margin-left:.12em}
/* 時代名の行: ルビ（rt）が付く時代（縄文海進最盛期）だけ行が 8px 高くなり、ツール行が上下していた（監査 audit:phone B5）。
   ルビの無い時代には同じ 8px を上余白として入れ、どの時代でも高さをそろえる（.rb は app.js の renderLevelBlock が付ける） */
.lvl .era{font-weight:900;font-size:18px;margin-top:6px;padding-top:8px;line-height:1.2;text-align:right}
.lvl .era.rb{padding-top:0}
.lvl .era em{font-style:normal;color:var(--yama)}
.lvl .yr{font-size:11px;color:var(--mist);margin-top:6px;text-align:right}
.lvl.anim .num{color:var(--mist)}

/* 時代カード */
.era-card .note{font-size:15px;line-height:1.7;color:var(--snow)}
.era-card .ask{margin-top:12px;padding:8px 0 4px 12px;border-left:3px solid var(--yama)}
.era-card .ask .k{font-size:11px;color:var(--yama);margin-bottom:4px}
.era-card .ask p{font-size:15px;line-height:1.65;font-weight:700}

/* 史跡カード（U7） */
.site-card h3{font-weight:900;font-size:22px;line-height:1.2;margin:4px 0 2px;padding-right:28px}
.site-card .meta{font-size:13px;color:var(--mist)}
.site-card .q{font-size:15px;line-height:1.6;font-weight:700;margin:10px 0 12px}
.dist{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.dist .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dist dt{font-size:13px;color:var(--mist)}
.dist dd{font-weight:900;font-size:22px;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.dist dd small{font-size:12px;font-weight:700;color:var(--mist);margin-left:3px}
.dist dd.sub{font-size:14px;color:var(--down);font-weight:700}
.dist dd.wait{font-size:14px;color:var(--dim);font-weight:700}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;padding:2px 8px;white-space:nowrap;border:1px solid var(--line);border-radius:4px;color:var(--mist);vertical-align:middle}
.site-card .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:11px;color:var(--dim);flex-wrap:wrap}
.close{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--mist)}
.close svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

/* タイムライン（15 時代のドット・進捗線・選択中だけラベル） */
.tl{position:relative;height:56px;margin:0 4px}
.tl .track{position:absolute;left:12px;right:12px;top:22px;height:2px;background:var(--line)}
.tl .prog{position:absolute;left:0;top:0;height:100%;background:var(--snow);opacity:.75}
.tl .dot{position:absolute;top:0;width:44px;height:44px;transform:translateX(-50%);display:grid;place-items:center}
.tl .dot i{display:block;width:10px;height:10px;border-radius:50%;background:var(--dim)}
.tl .dot.past i{background:var(--snow)}
.tl .dot.sel i{width:18px;height:18px;background:var(--snow);box-shadow:0 0 0 4px rgba(238,243,246,.2)}
.tl .dot .lab{position:absolute;top:40px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:700;color:var(--snow);display:none}
.tl .dot.sel .lab{display:block}

/* 水位スライダー（−150〜+50・A-C39）。自在に動かせることが伝わるよう、見出し・太い線・現在値までの白い塗り・0 m の目盛り・
   つまみの左右の矢印・最初の数回だけ広がる白い輪で目立たせる（鮮やかな色は使わない・発注者指示 2026-10-01） */
.slider{display:flex;align-items:center;gap:8px;height:34px}
.slider .lbl{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--snow);white-space:nowrap}
.slider .lbl svg{width:20px;height:20px;fill:none;stroke:var(--snow);stroke-width:2;stroke-linecap:round}
.slider .rng{position:relative;flex:1;display:flex;align-items:center}
.slider .rng .zero{position:absolute;left:calc(14px + (100% - 28px) * var(--zero));top:50%;width:2px;height:16px;margin:-8px 0 0 -1px;background:rgba(238,243,246,.7);border-radius:1px;pointer-events:none}
/* スマホでも水位バーを出す（このコンテンツの中心の操作・発注者指示 2026-09-29）。端の目盛りは詰める。
   スマホの判定は幅 599 以下または高さ 499 以下（横持ち）。app.js の PHONE_MQ と同じ式 */
.slider input{flex:1;width:100%;-webkit-appearance:none;appearance:none;height:8px;background:linear-gradient(to right,rgba(238,243,246,.55) 0 var(--fill,50%),rgba(238,243,246,.14) var(--fill,50%) 100%);border:1px solid rgba(238,243,246,.28);border-radius:5px;outline:none;cursor:pointer}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--snow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 9l-5 5 5 5M17 9l5 5-5 5' fill='none' stroke='%23334155' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/28px no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 0 rgba(238,243,246,0);cursor:grab}
.slider input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--snow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M11 9l-5 5 5 5M17 9l5 5-5 5' fill='none' stroke='%23334155' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/28px no-repeat;border:0;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:grab}
.slider input:active::-webkit-slider-thumb{cursor:grabbing}
.slider.nudge input::-webkit-slider-thumb{animation:ctmThumb 1.8s ease-out 4}
.slider.nudge input::-moz-range-thumb{animation:ctmThumb 1.8s ease-out 4}
@keyframes ctmThumb{0%{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 0 rgba(238,243,246,.55)}100%{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 14px rgba(238,243,246,0)}}
@media (prefers-reduced-motion:reduce){.slider.nudge input::-webkit-slider-thumb,.slider.nudge input::-moz-range-thumb{animation:none}}
.slider .t{font-size:11px;color:var(--dim);width:58px;text-transform:none;white-space:nowrap}
.slider .t.r{text-align:right}
.slider .rst{font-size:12px;color:var(--mist);padding:6px 10px;border:1px solid var(--line);border-radius:14px}
/* スマホ（幅 599 以下または高さ 499 以下・app.js の PHONE_MQ と同じ式）: 端の目盛りを詰め、見出しは波の記号だけにする。上の 58px 指定より後ろに置く */
@media (max-width:599px), (max-height:499px){.slider .t{width:auto;font-size:10px}.slider .rst{padding:5px 8px;font-size:11px}.slider .lbl .tx{display:none}.slider{gap:6px}}

/* 出典行（常設・A-C5）。スマホ・タブレットは 2 行まで折り返す（高さは 2 行分で固定。出典ボタンと同じ 28px なので行の高さは変わらない）。
   PC（.one）は 1 行。中身と並び順は app.js の renderSrcline（監査 2026-09-29） */
.src{font-size:11px;line-height:14px;height:28px;color:var(--dim);letter-spacing:.06em;text-transform:none;overflow:hidden;min-width:0}
.src.one{height:14px;white-space:nowrap;text-overflow:ellipsis}
.srcline{display:flex;align-items:center;gap:10px;padding:0 8px}
.srcline .src{flex:1}
.srcbtn{flex:none;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--line);color:var(--mist);font-size:11px;background:var(--card)}

/* ボトムシート（スマホ） */
.sheet{position:absolute;left:0;right:0;border-radius:14px 14px 0 0;padding-top:10px}
.sheet::before{top:22px;bottom:16px}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:var(--dim);margin:0 auto 10px;opacity:.7}

/* 丸ボタン（触れる大きさ 44px 以上） */
.rbtn{height:44px;min-width:44px;padding:0 14px;border-radius:22px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;color:var(--snow);white-space:nowrap}
.rbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rbtn.on{background:rgba(238,243,246,.16)}
.rbtn.ico{padding:0;width:44px}

/* 地域ボタン（発注者指示 2026-09-29）: 押せる選択肢だと分かるように、山吹の薄い下地と縁・山吹のピン・▾。初回だけ 2 回静かに光る */
.rbtn.region{background:linear-gradient(135deg,rgba(248,181,0,.16),var(--card));border-color:rgba(248,181,0,.55);padding-right:10px;animation:regionPulse 1.6s ease-in-out 1.2s 10}
.rbtn.region>svg:first-child{stroke:var(--yama)}
.rbtn.region .chev{width:16px;height:16px;stroke:var(--mist);margin-left:-2px}
.rbtn.region:hover{border-color:var(--yama)}
@keyframes regionPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,181,0,0)}50%{box-shadow:0 0 0 5px rgba(248,181,0,.22)}}
@media (prefers-reduced-motion:reduce){.rbtn.region{animation:none}}

/* ルビ（小 5 未習の漢字）。rt は暗色地で読める --mist */
ruby{ruby-position:over;ruby-align:center}
rt{font-family:'Zen Kaku Gothic New',sans-serif;font-size:8.5px;font-weight:500;color:var(--mist);letter-spacing:-.02em;text-transform:none}
.lvl .era rt{font-size:9px}
.chip rt{font-size:8px}

/* 右上のスクリム（世界図で緑の陸地に文字が乗っても読めるように） */
.scrim{position:absolute;right:0;top:0;width:680px;max-width:100%;height:300px;pointer-events:none;background:radial-gradient(ellipse at 100% 0%,rgba(10,15,20,.82),rgba(10,15,20,.45) 40%,rgba(10,15,20,0) 72%)}

/* モード切替（セグメント） */
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:3px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.seg button{height:38px;padding:0 14px;border-radius:19px;font-size:14px;font-weight:700;color:var(--mist);white-space:nowrap}
.seg button.on{background:rgba(238,243,246,.16);color:var(--snow)}

/* 字幕帯（U4） */
.subs .who{font-weight:900;font-size:17px;margin-bottom:4px}
.subs .who em{font-style:normal}
.subs .who .mono{font-size:11px;color:var(--dim);margin-left:10px}
.subs .note{font-size:15px;line-height:1.65}
.subs .ask{margin-top:8px;padding:4px 0 2px 12px;border-left:3px solid var(--yama);font-size:15px;line-height:1.6;font-weight:700}
.play{width:56px;height:56px;border-radius:50%;background:var(--snow);color:var(--ink);display:grid;place-items:center;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.play svg{width:22px;height:22px;fill:currentColor}
.ctl{display:flex;align-items:center;gap:10px;margin:0 4px 2px}
.ctl .tl{flex:1}
.ctl .st{display:none;font-size:11px;color:var(--dim);white-space:nowrap}

/* カーテン比較（U5） */
.divider{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--snow);transform:translateX(-1px);box-shadow:0 0 6px rgba(0,0,0,.6);pointer-events:none}
.handle{position:absolute;left:var(--split,50%);top:42%;width:52px;height:52px;border-radius:50%;background:var(--card);border:2px solid var(--snow);transform:translate(-50%,-50%);display:grid;place-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(0,0,0,.6);cursor:ew-resize;touch-action:none}
.handle svg{width:28px;height:28px;stroke:var(--snow);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.clabel{position:absolute;top:calc(42% - 64px);font-size:14px;font-weight:900;padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(8px);white-space:nowrap;pointer-events:none}
.clabel.l{right:calc(100% - var(--split,50%) + 10px)}
.clabel.r{left:calc(var(--split,50%) + 10px)}
.clabel em{font-style:normal}
.clabel .k{display:block;font-size:11px;color:var(--dim);margin-bottom:2px}
.hint{position:absolute;left:50%;transform:translateX(-50%);font-size:14px;color:var(--mist);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 14px;white-space:nowrap;pointer-events:none}

/* 「自分の場所は？」（U6） */
.search h2{font-weight:900;font-size:19px;margin:2px 0 10px}
.search form{display:flex;align-items:center;gap:8px;height:44px;border:1px solid var(--line);border-radius:8px;padding:0 6px 0 12px;background:rgba(10,15,20,.5)}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:15px;color:var(--snow)}
.search input::placeholder{color:var(--dim)}
.search form button{width:36px;height:36px;border-radius:6px;display:grid;place-items:center;color:var(--mist)}
.search form button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.search .res{margin-top:12px}
.search .res .nm{font-weight:900;font-size:17px}
.search .res .el{font-size:13px;color:var(--mist);margin:2px 0 10px}
.search .res .el b{color:var(--snow);font-size:16px;font-weight:900}
.search .cands{list-style:none;margin-top:8px;display:grid;gap:4px}
.search .cands button{width:100%;text-align:left;font-size:13px;padding:8px 10px;border-radius:6px;border:1px solid var(--line);color:var(--snow);line-height:1.4}
.search .foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:var(--dim);gap:8px;flex-wrap:wrap}
.search .credit{font-size:10px;color:var(--dim);margin-top:8px;letter-spacing:.02em}
/* スマホで目的地を選んだ後の畳んだ形（監査 audit:phone B4）: 見出しと入力欄を隠し、3 つの距離を横に並べて、ピンの見える帯を残す。
   虫めがね（.again）で入力欄に戻る */
.search .again{display:none;position:absolute;right:46px;top:10px;width:32px;height:32px;border-radius:50%;place-items:center;color:var(--mist)}
.search .again svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.search.compact .again{display:grid}
.search.compact .kick,.search.compact h2,.search.compact form,.search.compact .el .addr{display:none}
.search.compact .res{margin-top:0;padding-right:80px}
.search.compact .res .nm{font-size:16px}
.search.compact .res .el{margin:0 0 6px}
.search.compact .dist{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:6px;margin-right:-80px}
.search.compact .dist .row{flex-direction:column;align-items:flex-start;gap:2px}
.search.compact .dist dt{font-size:10px;line-height:1.25}
.search.compact .dist dd{font-size:17px}
.search.compact .dist dd small{display:block;margin:2px 0 0}
.search.compact .foot{margin-top:6px}
.search.compact .credit{margin-top:4px}

/* 状態表示・読み込み */
.stateline{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;color:var(--mist);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 12px;display:none;pointer-events:none}
.stateline.on{display:block}
#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--mist);font-size:13px;pointer-events:none}
#loading .spin{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--snow);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}
#loading.off{display:none}

/* 出典パネル */
.sources{position:absolute;left:8px;right:8px;bottom:8px;max-height:70%;overflow:auto;padding:16px 18px;font-size:13px;line-height:1.6}
.sources h2{font-weight:900;font-size:18px;margin-bottom:8px;padding-right:32px}
.sources ul{list-style:none;display:grid;gap:4px}
.sources details{margin-top:8px}
.sources summary{cursor:pointer;color:var(--mist)}
.sources pre{white-space:pre-wrap;font-size:11px;color:var(--mist);margin-top:6px;font-family:'IBM Plex Mono',monospace;line-height:1.5}
.sources a{text-decoration:underline;text-underline-offset:2px}
.sources .sub{display:block;font-size:12px;color:var(--mist);margin:2px 0 4px}
.sources .links{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* 地域プルダウン */
.regions{position:absolute;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:6px;padding:10px;max-height:50%;overflow:auto}
.regions button{height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--mist);white-space:nowrap}
.regions button.on{color:var(--snow);border-color:var(--snow)}

/* 開いたパネル（凡例・検索・地域・史跡カード・時代カード・出典）は、くらべるモードの札・つまみより上に出す（発注者指摘 2026-09-29） */
.legend-wrap,.search-wrap,.regions,.site-card,.era-card,.sources{z-index:5}
/* 下部の操作部（再生・年表の点・水位バー・出典）は、どのパネルにも覆われない（横持ちで凡例が再生ボタンを覆っていた・監査 audit:phone B8）。
   出典パネルは下端から開くので操作部よりさらに上 */
.bottom{z-index:6}.sources{z-index:7}
.legend-wrap,.search-wrap{overflow:auto}

/* OpenLayers の地名ラベルとの見た目合わせ（OL のデフォルト UI は使わない） */
.ol-viewport .ol-overlaycontainer-stopevent{display:none}

/* ------------------ レイアウト（スマホ基準） ------------------ */
.top{position:absolute;left:0;right:0;top:0;padding:12px 12px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.brand{display:none}
.lvl{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}
.lvl .r{padding-top:4px;text-align:right}
.toolrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;width:100%}
.legend-wrap{position:absolute;right:12px;top:150px;display:none}
.legend-wrap.open{display:block}
.era-card{display:none;position:absolute;left:0;right:0}
.era-card.open{display:block}
.site-card{position:absolute;width:100%;display:none}
.site-card.open{display:block}
.search-wrap{position:absolute;left:0;right:0;display:none}
.search-wrap.open{display:block}
.bottom{position:absolute;left:0;right:0;bottom:0;padding:6px 8px 8px;background:linear-gradient(180deg,rgba(10,15,20,0),rgba(10,15,20,.92) 40%)}
.subs{position:absolute;left:8px;right:8px;display:none}
.subs.open{display:block}
.stateline{top:64px}
.iconbar{position:absolute;right:12px;display:flex;flex-direction:column;gap:8px}
.desktop-only{display:none !important}
/* 端末の判定は app.js の PHONE_MQ と同じ式（幅 600 未満、または高さ 500 未満はスマホ。横持ちのスマホもスマホの配置・監査 2026-09-29） */
@media (max-width:599px), (max-height:499px){#searchBtn .lbl,#legendBtn .lbl,#eraBtn .lbl{display:none}#searchBtn,#legendBtn,#eraBtn{padding:0;width:44px}}

/* ------------------ 横持ちのスマホ（幅 600 以上・高さ 499 以下。JS の device() は phone） ------------------
   上下が狭いので、上はツール行（左）と水位ブロック（右）を 1 行に、下は年表・水位バー・出典行を詰める。
   字幕・時代カード・凡例は右、検索は左の側面に寄せ、地図は左側に残す（高さは app.js の layout が決める・監査 audit:phone B8） */
@media (min-width:600px) and (max-height:499px){
  .top{padding:8px 12px 0;flex-wrap:nowrap;align-items:flex-start;gap:10px}
  .toolrow{width:auto;flex:1 1 auto;order:1}
  .lvl{width:auto;flex:none;order:2;gap:14px;align-items:flex-start}
  .lvl .r{padding-top:0}
  .lvl .k{margin-bottom:2px}
  .lvl .num{font-size:30px}
  .lvl .era{font-size:15px;margin-top:0;padding-top:7px}
  .lvl .era.rb{padding-top:0}
  .lvl .yr{margin-top:2px}
  .rbtn{height:40px;min-width:40px;border-radius:20px;padding:0 12px}
  .rbtn.ico,#searchBtn,#legendBtn,#eraBtn{width:40px}
  .seg{padding:2px}
  .seg button{height:36px;padding:0 11px;font-size:13px}
  .bottom{padding:2px 12px 4px}
  .ctl{margin:0}
  .tl{height:44px}
  .tl .track{top:16px}
  .tl .dot{height:36px}
  .tl .dot .lab{top:31px;font-size:12px}
  .play{width:44px;height:44px}
  .play svg{width:18px;height:18px}
  .slider{height:30px}
  .srcline{padding:0 4px}
  .src{height:14px;white-space:nowrap;text-overflow:ellipsis}
  .srcbtn{height:20px;font-size:10px;padding:0 8px}
  .subs,.era-card{left:auto;right:12px;width:min(46vw,380px);overflow:auto;padding:10px 12px}
  .subs .who{font-size:15px}
  .subs .note{font-size:13px;line-height:1.5}
  .subs .ask{font-size:13px;line-height:1.5;margin-top:6px}
  .era-card .note{font-size:13px;line-height:1.5}
  .era-card .ask{margin-top:8px}
  .era-card .ask p{font-size:13px;line-height:1.5}
  .legend-wrap{right:12px}
  .search-wrap{left:12px;right:auto;width:min(46vw,360px)}
  .site-card{width:320px}
}

/* ------------------ タブレット（横持ちのスマホは除く） ------------------ */
@media (min-width:600px) and (min-height:500px){
  .top{padding:18px 20px 0;flex-wrap:wrap}
  .brand{display:block}
  h1.ttl{font-size:22px}
  .lvl{width:auto;flex-direction:column;align-items:flex-end}
  .lvl .r{padding-top:0}
  .lvl .num{font-size:56px}
  .lvl .era{font-size:20px}
  .toolrow{position:static;width:100%;margin-top:6px}
  .legend-wrap{left:20px;right:auto}
  /* 時代カードは .open のときだけ（app.js が「時代をみる」で付ける）。常時表示だと字幕カードやツール行と重なっていた（監査 2026-09-29） */
  .era-card{left:20px;right:20px}
  .era-card .row{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .era-card .ask{margin-top:0}
  .site-card{width:320px}
  .site-card.sheet{border-radius:10px;padding-top:14px}
  .site-card .grip{display:none}
  .search-wrap{left:20px;right:auto;width:330px}
  .bottom{padding:8px 20px 12px}
  .slider{display:flex;max-width:680px}
  .srcline{padding:0}
  .subs{left:20px;right:20px}
  .ctl{margin:0 0 2px}
  .ctl .st{display:block}
  .stateline{top:132px}
  .iconbar{right:20px}
  .desktop-only{display:inline-flex !important}
}
/* ------------------ PC（高さ 500 以上） ------------------ */
@media (min-width:1000px) and (min-height:500px){
  .top{flex-wrap:nowrap}
  .toolrow{position:absolute;left:20px;top:84px;width:auto;margin:0}
  .lvl .num{font-size:72px}
  .lvl .era{font-size:22px}
  .era-card{left:auto;right:20px;width:340px}
  .era-card .row{display:block}
  .era-card .ask{margin-top:12px}
  .subs{left:50%;right:auto;transform:translateX(-50%);width:820px}
  .subs .who{font-size:19px}
  .handle{width:56px;height:56px}
  .tl{margin:0 8px}
}