/* Bar Agit のアプリ（公式サイトの下 /apps/）— 共通の見た目。2026-11-09 Calm Harbor の道具の部品から写し、色を Bar Agit に
   穏やかな港：砂浜の白・夜明けの海の紺・浅瀬の青緑・灯台のあかり（黄）。明るい／暗い画面の両方。
   外の部品（フォント・CDN）は使わない。押す物は 44px 以上。 */
:root{
  color-scheme:dark;
  --bg:#0c0805; --paper:#18110b; --ink:#f1e6d3; --ink-2:#d2c2a8; --ink-3:#a8977b;
  --sea:#d9a54c; --sea-2:#f0c274; --sea-lt:#2a1e11; --light:#e8b65a; --light-lt:#2b2214;
  --warn:#f0b27a; --warn-lt:#3a2817; --line:rgba(232,200,150,.16); --shadow:none;
  --sans:system-ui,-apple-system,'Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif;
  --serif:'Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP',serif;
  --r:16px;
  --jb-offset:64px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--sea)}
:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:720px;margin:0 auto;padding:0 16px 40px}
.num{font-variant-numeric:tabular-nums}

/* 上の帯（港の印・道具の名前） */
.ch-top{display:flex;align-items:center;gap:10px;max-width:720px;margin:0 auto;padding:14px 16px 6px}
.ch-top a.home{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--ink-3);font-size:13px;letter-spacing:.08em}
.ch-top a.home img{width:28px;height:28px;border-radius:50%}
.ch-hero{max-width:720px;margin:0 auto;padding:6px 16px 10px}
.ch-hero h1{margin:0;font-size:clamp(26px,7vw,34px);letter-spacing:.06em;line-height:1.25}
.ch-hero .kana{margin:2px 0 0;font-size:12px;letter-spacing:.28em;color:var(--ink-3)}
.ch-hero .lead{margin:10px 0 0;color:var(--ink-2);font-size:15.5px;word-break:auto-phrase}

/* 箱 */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 14px;box-shadow:var(--shadow)}
.card>h2,.h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:17.5px;letter-spacing:.04em;line-height:1.4}
.card>h2::before,.h2::before{content:'';flex:none;width:18px;height:3px;border-radius:2px;background:var(--sea)}
.hint{margin:-4px 0 10px;font-size:13px;color:var(--ink-3);line-height:1.65}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}

/* 入力 */
.field{display:grid;gap:4px;margin:0 0 12px}
.field>label,.lbl{font-size:14px;color:var(--ink-2);font-weight:600}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row>*{min-width:0}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=url],input[type=tel],input[type=search],select,textarea{
  width:100%;min-height:46px;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);
  font:inherit;font-size:16px;line-height:1.5}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--sea);outline:none;background:var(--paper)}
input[type=color]{width:48px;height:46px;padding:3px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg)}
input[type=range]{width:100%;accent-color:var(--sea);min-height:36px}
.unit{flex:none;font-size:14px;color:var(--ink-2)}
.chk{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;cursor:pointer}
.chk input{width:22px;height:22px;accent-color:var(--sea)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 18px;border-radius:99px;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;text-decoration:none;line-height:1.3}
.btn:hover{border-color:var(--sea)}
.btn.main{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.main:hover{background:var(--sea);border-color:var(--sea)}
.btn.sea{background:var(--sea);border-color:var(--sea);color:#fff}
.btn.wide{width:100%}
.btn.sm{min-height:44px;padding:8px 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns>.btn{flex:1 1 auto}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:44px;padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink-2);font:inherit;font-size:14.5px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--sea-lt);border-color:var(--sea);color:var(--ink);font-weight:700}

/* 結果 */
.result{background:var(--sea-lt);border-radius:16px;padding:14px 16px}
.big{font-size:clamp(28px,8vw,40px);font-weight:800;letter-spacing:.02em;line-height:1.25;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.kv dt{color:var(--ink-3);font-size:14px}
.kv dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.note{background:var(--light-lt);border-radius:12px;padding:10px 12px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.note.warn{background:var(--warn-lt);color:var(--warn)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}

/* 広告の枠（読み終えた所に1つ。読み込む前から高さを取る・来なかったら枠ごと消す） */
.adbox{margin:40px 0 44px;padding-top:10px;border-top:1px dashed var(--line)}
.adbox .adk{margin:0 0 6px;font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.adbox ins{display:block;min-height:250px}
@media (min-width:760px){.adbox ins{min-height:100px}}
.adbox:has(ins[data-ad-status="unfilled"]){display:none}

/* ほかの道具 */
.more{margin-top:28px}
.more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.more a{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;line-height:1.35}
.more a img{width:32px;height:32px;border-radius:9px;flex:none}

/* いちばん下 */
.ch-foot{max-width:720px;margin:24px auto 0;padding:16px 16px calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--ink-3);line-height:1.9}
.ch-foot a{display:inline-block;padding:6px 6px;color:var(--ink-2)}
.ch-foot p{margin:0}

/* 知らせ・確認画面 */
.ch-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9998;background:rgba(20,50,74,.94);color:#fff;
  font-size:14.5px;padding:10px 18px;border-radius:99px;pointer-events:none;opacity:0;transition:opacity .2s;max-width:calc(100vw - 32px);text-align:center}
.ch-toast.on{opacity:1}
.ch-dlg{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,24,34,.55)}
.ch-dlg>div{width:100%;max-width:380px;background:var(--paper);color:var(--ink);border-radius:18px;padding:20px 18px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.ch-dlg p{margin:0 0 16px;white-space:pre-line;line-height:1.8}
.ch-dlg .btns>.btn{flex:1}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.ch-top,.ch-foot,.more,.adbox,.jbar,.noprint{display:none!important}body{background:#fff;color:#000}}

/* ── Bar Agit の色に合わせた所（2026-11-09） ── */
.ch-hero h1{font-family:var(--serif);font-weight:600;letter-spacing:.08em}
.ch-hero .kana{color:var(--sea)}
.ch-top a.home{color:var(--ink-2);letter-spacing:.14em}
.ch-top a.home img{border-radius:6px}
.card>h2,.h2{font-family:var(--serif);font-weight:600}
.btn.main{background:var(--sea);border-color:var(--sea);color:#1a1206}
.btn.main:hover{background:var(--sea-2);border-color:var(--sea-2)}
.btn.sea{color:#1a1206}
.ch-toast{background:rgba(42,30,17,.96);color:var(--ink);border:1px solid var(--line)}
.ch-dlg{background:rgba(0,0,0,.66)}
.ch-foot .legal{margin-top:6px;font-size:12px;color:var(--ink-3)}