/* 三つ巴ラボ ツール共通の見た目
 * 色・フォント・ヘッダー・フッター・スマホ下のタブは、サイト（10_サイト/site/src/styles/global.css と Base.astro）と同じ値にそろえる。
 * サイトにダークモードがないので、ツールも明るい配色だけにした（2026-09-24 QA 対応）。
 * 押せる部品はすべて 44×44px 以上（QA P2-10）。主なボタンの地は #23776F（白文字で 5.4:1。QA P2-11）。
 */
:root{
  --navy:#1F3A5F;--navy-l:#E8EEF5;--teal:#2A8C82;--teal-t:#23776F;--teal-l:#E0F1EE;--btn:#23776F;--btn-h:#1D655E;
  --apri:#E9973A;--apri-l:#FCF0DE;--apri-t:#8A5A1C;--lav:#7B68B0;--lav-t:#5E4C99;--lav-l:#EEEAF6;
  --ink:#1E2A36;--sub:#5B6B80;--paper:#F7F4EC;--card:#FFFFFF;--white:#FFFFFF;--line:#DCE3EA;--danger:#B3261E;--danger-l:#FBE9E7;
  --c-red:#C9544A;--c-yellow:#D9A92E;--c-blue:#3E78C2;--c-purple:#8358B0;--c-none:#9AA3AE;
  --h:'Zen Maru Gothic','M PLUS Rounded 1c','Hiragino Maru Gothic ProN',sans-serif;
  --b:'BIZ UDPGothic','Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --m:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --radius:14px;--shadow:0 1px 2px rgba(31,58,95,.08),0 4px 14px rgba(31,58,95,.06);
  --tap:44px;--tabbar-h:0px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--b);font-size:16px;line-height:1.7;overflow-wrap:anywhere}
a{color:var(--teal-t)}
a:hover{color:var(--navy)}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--m)}
.ic{width:1.25em;height:1.25em;display:inline-block;vertical-align:-0.25em;flex:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--apri);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* ---- SIMULATION 帯（サイトと同じ） ---- */
.sim{background:var(--apri);color:var(--ink);font-size:13px;line-height:1.5;padding:7px 16px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;position:relative;z-index:12}
.sim b{background:var(--ink);color:#fff;border-radius:4px;padding:2px 9px;font-family:var(--m);font-weight:600;letter-spacing:.06em;white-space:nowrap}
.sim-s{display:none}

/* ---- ヘッダー（サイトの Base.astro と同じ作り） ---- */
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hd-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:10px 24px}
.logo-link{display:flex;align-items:center;min-height:var(--tap)}
.hd .logo{height:46px;width:auto;display:block}
.hd-tag{font-size:12px;color:var(--sub);line-height:1.35;border-left:1px solid var(--line);padding-left:12px}
.gnav{display:flex;gap:18px;margin-left:auto;font-weight:700;font-size:15px}
.gnav a{color:var(--navy);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;min-height:var(--tap);display:flex;align-items:center}
.gnav a:hover,.gnav a[aria-current=page]{border-color:var(--teal)}
.sbtn{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:5px 14px;font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;margin-left:6px;min-height:var(--tap);min-width:var(--tap);justify-content:center}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;color:var(--navy);display:flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap)}
.mnav summary::-webkit-details-marker{display:none}
.mnav nav{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(31,58,95,.15);padding:8px;display:grid;min-width:220px;z-index:30}
.mnav nav a{padding:10px 12px;color:var(--navy);font-weight:700;text-decoration:none;border-radius:8px;min-height:var(--tap);display:flex;align-items:center}
.mnav nav a:hover{background:var(--navy-l)}

/* ツールの切りかえ（ヘッダーの下の1行） */
.toolnav{background:var(--navy-l);border-bottom:1px solid var(--line)}
.tn-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.tn-in::-webkit-scrollbar{display:none}
.toolnav a{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;font-weight:700;font-size:14px;color:var(--navy);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.toolnav a:hover{border-color:var(--line)}
.toolnav a[aria-current=page]{border-color:var(--btn);color:var(--ink)}
.toolnav .tn-all{color:var(--sub);font-weight:400;padding-left:0}

.crumb{max-width:1180px;margin:0 auto;padding:6px 24px 0;font-size:13px;color:var(--sub)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0}
.crumb li{display:flex;align-items:center}
.crumb li:not(:last-child)::after{content:"＞";margin:0 6px;color:#A5B1BF}
.crumb a{color:var(--sub);display:inline-flex;align-items:center;min-height:var(--tap)}

/* ---- 本体 ---- */
main{max-width:1180px;margin:0 auto;padding:6px 24px 40px}
.page-h{font-family:var(--h);font-weight:900;color:var(--navy);font-size:28px;line-height:1.35;margin:4px 0 4px}
.lead{margin:0 0 10px;color:var(--sub);font-size:15px}
.notice{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;line-height:1.55;background:var(--navy-l);border-left:4px solid var(--navy);border-radius:6px;padding:8px 12px;margin:0 0 14px;color:var(--ink)}
.notice b{color:var(--navy)}
.notice a,.notice .rnote a{display:inline;min-height:0}
.tag-tent{display:inline-block;font-family:var(--b);font-size:11px;font-weight:700;background:var(--apri-l);color:var(--apri-t);border:1px solid var(--apri);border-radius:4px;padding:0 6px;vertical-align:2px}
.tag-open{display:inline-block;font-family:var(--b);font-size:11px;font-weight:700;background:var(--lav-l);color:var(--lav-t);border:1px solid var(--lav);border-radius:4px;padding:0 6px;vertical-align:1px;white-space:nowrap}
.rnote{font-size:12px;color:var(--sub);font-family:var(--b);font-weight:400}
.rnote a{color:var(--teal-t)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.panel h2,.sec-h{font-family:var(--h);font-weight:700;color:var(--navy);font-size:18px;margin:0 0 10px;line-height:1.4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:var(--btn);color:#fff;font-family:var(--h);font-weight:700;font-size:15px;border-radius:999px;padding:9px 18px;cursor:pointer;text-decoration:none;min-height:var(--tap);min-width:var(--tap);line-height:1.3}
.btn:hover{background:var(--btn-h);color:#fff}
.btn-s{font-size:14px;padding:6px 14px}
.btn-ghost{background:transparent;color:var(--teal-t);border:1.5px solid var(--teal)}
.btn-ghost:hover{background:var(--teal-l);color:var(--teal-t)}
.btn-navy{background:var(--navy);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkish{background:none;border:0;padding:0;color:var(--teal-t);text-decoration:underline;cursor:pointer;font:inherit;min-height:var(--tap)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:4px 12px;font-size:14px;cursor:pointer;min-height:var(--tap);min-width:var(--tap);justify-content:center;user-select:none;position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:checked),.chip[aria-pressed="true"]{border-color:var(--navy);background:var(--navy-l);font-weight:700}
.chip:has(input:focus-visible){outline:3px solid var(--apri);outline-offset:2px}
.chip-s{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:0 8px;margin:0 4px 4px 0;background:var(--paper)}
.seg{display:inline-flex;border:1.5px solid var(--navy);border-radius:999px;overflow:hidden;flex:none}
.seg label{padding:0 14px;cursor:pointer;font-weight:700;font-size:14px;color:var(--navy);position:relative;min-height:var(--tap);display:inline-flex;align-items:center;white-space:nowrap}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){background:var(--navy);color:#fff}
.seg label:has(input:focus-visible){outline:3px solid var(--apri);outline-offset:-3px}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--sub);font-weight:700}
.field select,.field input[type=number],.field input[type=text],.field input[type=search],textarea{border:1.5px solid var(--line);border-radius:8px;background:var(--card);padding:7px 10px;font-size:16px;color:var(--ink);font-weight:400;min-height:var(--tap)}
.chk{display:flex;gap:8px;align-items:center;min-height:var(--tap);cursor:pointer}
.chk input{width:20px;height:20px;flex:none}
.search-box{position:relative;display:flex;align-items:center;background:var(--card);border:2px solid var(--navy);border-radius:999px;padding:0 6px 0 16px;min-height:48px}
.search-box input{border:0;outline:0;flex:1;min-width:0;background:transparent;font-size:16px;padding:10px 0;min-height:var(--tap)}
.search-box input::placeholder{color:var(--sub)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;vertical-align:-1px;box-shadow:0 0 0 1.5px var(--card),0 0 0 2.5px rgba(30,42,54,.18)}
.d-red{background:var(--c-red)}.d-yellow{background:var(--c-yellow)}.d-blue{background:var(--c-blue)}.d-purple{background:var(--c-purple)}.d-none{background:var(--c-none)}
.d-multi{background:conic-gradient(var(--c-red) 0 25%,var(--c-yellow) 0 50%,var(--c-blue) 0 75%,var(--c-purple) 0)}
.stars{font-family:var(--m);font-weight:600;color:var(--apri-t);white-space:nowrap}
.stars-na{color:var(--sub)}
.st-i{font-family:var(--b);font-weight:700;margin-right:1px}
.alert{background:var(--danger-l);color:var(--danger);border-radius:8px;padding:10px 12px;font-size:14px}
.ok{color:var(--teal-t);font-weight:700}
.warn{color:var(--danger);font-weight:700}
.muted{color:var(--sub)}
.rar{display:inline-block;min-width:22px;text-align:center;font-family:var(--m);font-size:11px;font-weight:600;border-radius:4px;padding:0 4px;background:var(--navy-l);color:var(--navy)}
.rar-L{background:var(--apri-l);color:var(--apri-t)}.rar-R{background:var(--lav-l);color:var(--lav-t)}.rar-V{background:var(--danger-l);color:var(--danger)}
.flash{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;bottom:calc(20px + var(--tabbar-h));transform:translateY(20px);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100% - 32px)}
.flash.show{opacity:1;transform:none}

/* 検索候補 */
.cb-wrap{position:relative}
.cb-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;list-style:none;margin:0;padding:4px;background:var(--card);border:1.5px solid var(--navy);border-radius:10px;box-shadow:var(--shadow);max-height:360px;overflow:auto}
.cb-list li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;min-height:var(--tap)}
.cb-list li[aria-selected="true"],.cb-list li:hover{background:var(--navy-l)}
.cb-list li.cb-foot{cursor:default;min-height:0;padding:4px 10px;font-size:11px;color:var(--sub);background:none}
.cb-name{flex:1;min-width:0}
.cb-meta{font-family:var(--m);font-size:12px;color:var(--sub);white-space:nowrap}

/* カード詳細ダイアログ */
.card-dialog{border:0;padding:0;border-radius:16px;max-width:640px;width:calc(100% - 24px);max-height:calc(100% - 32px);background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.card-dialog::backdrop{background:rgba(19,32,46,.55)}
.cd-inner{position:relative;padding:18px 18px 14px;max-height:calc(100vh - 32px);overflow:auto}
.cd-close{position:sticky;top:0;float:right;width:var(--tap);height:var(--tap);border-radius:50%;border:1.5px solid var(--line);background:var(--card);font-size:22px;line-height:1;cursor:pointer;margin:-4px -4px 0 8px;z-index:2}
.cd-head{display:flex;gap:10px;align-items:flex-start}
.cd-head .dot{width:18px;height:18px;margin-top:6px}
.cd-meta{margin:0;font-size:12px;color:var(--sub)}
.cd-name{font-family:var(--h);font-weight:900;color:var(--navy);font-size:22px;line-height:1.35;margin:2px 0 0}
.cd-kana{margin:0;font-size:12px;color:var(--sub)}
.cd-stats{width:100%;border-collapse:collapse;margin:12px 0 4px;font-size:14px}
.cd-stats th{text-align:left;font-weight:700;color:var(--sub);width:7.5em;padding:4px 8px 4px 0;vertical-align:top;white-space:nowrap}
.cd-stats td{padding:4px 0;border-bottom:1px dashed var(--line)}
.cd-h{font-family:var(--h);font-weight:700;font-size:15px;color:var(--navy);margin:14px 0 4px}
.cd-text{margin:0;background:var(--paper);border-radius:8px;padding:8px 10px;font-size:14px;line-height:1.75}
.cd-burst{border-left:4px solid var(--apri)}
.cd-muted{color:var(--sub)}
.cd-errata{font-size:13px;background:var(--apri-l);border-radius:8px;padding:6px 10px}
.cd-eval{margin-top:6px;font-size:14px}
.cd-eval p{margin:6px 0}
.cd-evalrow{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.cd-tags{margin:6px 0 0}
.cd-qa{font-size:12px;color:var(--sub)}
.cd-open{background:var(--lav-l);border-left:4px solid var(--lav);border-radius:8px;padding:8px 10px;font-size:13px;margin:8px 0}
.cd-open ul{margin:4px 0 0;padding-left:1.2em}
.cd-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.cd-note{font-size:12px;color:var(--sub);margin:4px 0 0}

/* 使い方・よくある質問（ツールの下） */
.howto{margin-top:22px}
.howto h2{font-family:var(--h);font-weight:700;color:var(--navy);font-size:18px;margin:18px 0 6px}
.howto p,.howto li{font-size:15px}
.howto details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 12px;margin:6px 0}
.howto summary{cursor:pointer;font-weight:700;min-height:var(--tap);display:flex;align-items:center}

/* ---- フッター（サイトと同じ） ---- */
.ft{background:var(--navy);color:#E9EEF3;margin-top:40px}
.ft-in{max-width:1180px;margin:0 auto;padding:32px 24px 24px}
.ft a{color:#fff;text-decoration:none}
.ft a:hover{text-decoration:underline;color:#fff}
.ft-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ft-brand .logo-sym{width:46px;height:46px;background:#fff;border-radius:50%;padding:3px}
.ft-brand b{font-family:var(--h);font-size:20px;display:block;line-height:1.3}
.ft-brand span{font-size:13px;color:#C9D6E4}
.ft-uno{background:rgba(255,255,255,.08);border-left:4px solid var(--apri);padding:10px 14px;border-radius:4px;font-size:14px;margin:0 0 8px}
.ft-uno strong{color:#fff}
.ft-ads,.ft-eval{font-size:13px;color:#C9D6E4;margin:0 0 10px}
.ft-ads a,.ft-eval a{text-decoration:underline;display:inline-flex;align-items:center;min-height:var(--tap)}
.ft-links{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:0 18px;font-weight:700;font-size:14px}
.ft-links a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap)}
.ft-sub{font-weight:400;font-size:13px}
.ft-sub a{color:#C9D6E4}
.ft-copy{font-size:12px;color:#9AA8B8;margin:10px 0 0}

/* ---- スマホの下のタブ（サイトと同じ） ---- */
.tabbar{display:none}

@media (max-width:980px){
  .gnav{display:none}
  .sbtn{margin-left:auto;border:0;padding:0}.sbtn .st{display:none}
  .mnav{display:block}
  .sbtn .ic,.mnav .ic{width:26px;height:26px}
}
@media (max-width:760px){
  :root{--tabbar-h:56px}
  .sim{padding:5px 10px;font-size:12px}.sim-l{display:none}.sim-s{display:inline}
  .hd-in{padding:4px 16px;gap:8px}.hd .logo{height:34px}.hd-tag{display:none}
  .tn-in{padding:0 8px}
  .toolnav a{padding:0 10px;font-size:13px}
  .crumb{display:none}
  main{padding:6px 16px 24px}
  .page-h{font-size:22px}
  .lead{display:none}
  .notice{font-size:12px;padding:6px 10px;margin-bottom:10px}
  .notice .n-long{display:none}
  .ft-in{padding:24px 16px 16px}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom));z-index:20}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--navy);gap:2px;line-height:1.3;text-decoration:none;min-height:48px}
  .tabbar a[aria-current=page]{color:var(--teal-t)}
  .tabbar .ic{width:22px;height:22px}
  .cd-inner{padding:14px 14px 12px}
  .cd-name{font-size:19px}
}
@media (min-width:761px){.notice .n-short{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* 名前のボタン（短い名前でも44px以上） */
.cc-name,.rk-name,.t1-name,.zr-name{min-width:44px}

/* ---- オフライン（shared/offline.js）：見出しの右の「オフラインOK／データの更新日」と、押すと開く説明 ---- */
.page-h.has-ol{position:relative;padding-right:168px;min-height:44px}
.ol-pill{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-height:var(--tap);min-width:var(--tap);max-width:164px;padding:3px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--sub);
  font-family:var(--b);font-weight:700;font-size:12px;line-height:1.3;text-align:left;cursor:pointer}
.ol-pill:hover{background:var(--navy-l)}
.ol-pill .ol-l1{white-space:nowrap}
.ol-pill .ol-l2{font-weight:400;font-size:11px;color:var(--sub);white-space:nowrap;font-family:var(--m)}
.ol-pill .ol-mark{margin-right:3px}
.ol-pill.is-ok{border-color:var(--teal);color:var(--teal-t)}
.ol-pill.is-off{border-color:var(--apri);background:var(--apri-l);color:var(--apri-t)}
.ol-pill.is-off .ol-l2{color:var(--apri-t)}
.ol-pill.has-upd::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--apri);border:2px solid #fff}
.ol-panel{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:10px 14px;margin:6px 0 12px;font-size:14px;line-height:1.7;box-shadow:var(--shadow)}
.ol-panel p{margin:0 0 6px}
.ol-panel .ol-h{color:var(--navy);font-size:15px}
.ol-panel .ol-note{color:var(--sub);font-size:13px}
.ol-panel .ol-upd{background:var(--apri-l);border-radius:8px;padding:6px 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ol-panel .ol-inst{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}
.ol-panel ol{margin:4px 0 6px;padding-left:1.5em}
.ol-panel li{margin:2px 0}
.ol-panel .ol-ic{display:inline-flex;vertical-align:-3px;margin:0 2px;color:var(--navy)}
.ol-panel .btn{font-family:var(--b)}
.ol-panel .ol-close{text-align:right;margin:4px 0 0}
@media (max-width:760px){.page-h.has-ol{padding-right:156px}.ol-pill{max-width:152px;padding:3px 10px}}

/* カード画像（2026-09-28）：詳細は右に 150px（スマホは中央）、一覧は名前の左に小さく */
.cimg{display:block;height:auto;max-width:100%;border-radius:4%/3%;background:var(--line)}
.cimg-thumb{width:26px;flex:none;border-radius:2px}
.cd-fig{float:right;width:150px;margin:0 0 10px 14px}
.cd-fig .cimg{width:150px}
.cimg-credit{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--sub);text-align:center}
.cimg-credit a{color:inherit}
@media (max-width:520px){.cd-fig{float:none;width:160px;margin:4px auto 12px}.cd-fig .cimg{width:160px}}

/* ★の変動（↑↓）2026-09-28。↑は緑・↓は赤。色だけに頼らず矢印の形で分かる */
.rchg{display:inline-block;margin-left:4px;font-weight:700;font-size:.9em;line-height:1;padding:2px 4px;border-radius:4px}
.rchg-up{color:#1d6b43;background:#e3f3ea}
.rchg-down{color:#a3322a;background:#fbe7e4}
.cd-hist{font-size:14px;background:var(--paper,#f6f3ec);border-left:3px solid var(--line,#ddd);padding:6px 10px;border-radius:0 6px 6px 0}

/* 未照合のカードがないときは「現物で確認中」の注意書きを出さない（core.js が hidden を付ける）2026-10-12 */
[data-unverified][hidden]{display:none!important}
.img-credit{margin:2px 0 8px;font-size:12px;color:var(--sub)}
.img-credit a{color:inherit}
[data-imgcredit][hidden]{display:none!important}