/* 大型犬のおでかけ帳（/tools/dog-outing/）の見た目。
   サイトの枠に入れず、この画面だけで出す（ナビなし・全画面）。サイトの style.css は読まない。 */
:root{
  --ground:#F3F5F1; --surface:#FFFFFF; --sunk:#E8ECE6; --line:#D5DCD3;
  --ink:#1B2620; --ink-2:#4A5A51; --ink-3:#6E7D74;
  --accent:#1E6B55; --accent-ink:#FFFFFF; --accent-soft:#DCEEE7;
  --ok:#1E6B55; --ok-soft:#DCEEE7;
  --pub:#3E5E7A; --pub-soft:#DFE8F0;
  --warn:#8A5A12; --warn-soft:#F6EAD3;
  --focus:#2F8F73;
  --display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#111714; --surface:#18201C; --sunk:#1F2924; --line:#2E3A33;
    --ink:#E4ECE7; --ink-2:#B3C1B9; --ink-3:#8A9990;
    --accent:#5CC4A4; --accent-ink:#0D1A15; --accent-soft:#1C3A30;
    --ok:#6FD0B0; --ok-soft:#1C3A30;
    --pub:#9DBBD6; --pub-soft:#1E2C39;
    --warn:#E3B465; --warn-soft:#3A2E17;
    --focus:#7FE0C0; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#111714; --surface:#18201C; --sunk:#1F2924; --line:#2E3A33;
  --ink:#E4ECE7; --ink-2:#B3C1B9; --ink-3:#8A9990;
  --accent:#5CC4A4; --accent-ink:#0D1A15; --accent-soft:#1C3A30;
  --ok:#6FD0B0; --ok-soft:#1C3A30;
  --pub:#9DBBD6; --pub-soft:#1E2C39;
  --warn:#E3B465; --warn-soft:#3A2E17;
  --focus:#7FE0C0; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.65;padding-inline:16px;padding-block:0 48px}
.wrap{max-width:1120px;margin:0 auto}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

header.top{padding-block:28px 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.brand{font-family:var(--display);font-weight:900;font-size:clamp(24px,4vw,32px);letter-spacing:.02em;margin:0}
.byline{font-size:13px;color:var(--ink-3);margin:0}
.byline a,.byfoot a{color:var(--ink-2);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)}
.byline a:hover,.byfoot a:hover{color:var(--accent);border-color:var(--accent)}
.byfoot{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--ink-3)}
.loading{padding:40px 0;text-align:center;color:var(--ink-3)}
.lede{color:var(--ink-2);margin:0;font-size:14px}

.ask{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:8px;display:grid;gap:12px}
.ask label{font-family:var(--display);font-weight:700;font-size:17px}
.askrow{display:flex;gap:8px;flex-wrap:wrap}
.askrow input{flex:1 1 260px;min-width:0;border:1.5px solid var(--line);background:var(--ground);border-radius:10px;padding:12px 14px;font-size:16px}
.askrow input:focus{border-color:var(--accent);outline:none}
.btn{border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer;background:var(--accent);color:var(--accent-ink);white-space:nowrap}
.btn[disabled]{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)}

.finder{display:flex;flex-wrap:wrap;gap:6px;min-height:30px}
.finder .hint{font-size:12.5px;color:var(--ink-3);width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.histclear{border:1px solid var(--line);background:transparent;border-radius:999px;padding:1px 10px;font-size:12px;color:var(--ink-2);cursor:pointer}
.histclear:hover{border-color:var(--accent);color:var(--accent)}
.check{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--ground);border-radius:8px;padding:5px 10px;font-size:13.5px;cursor:pointer;color:var(--ink);user-select:none}
.check .box{width:16px;height:16px;border:1.5px solid var(--ink-3);border-radius:4px;display:inline-grid;place-items:center;font-size:11px;line-height:1;flex:none}
.check small{color:var(--ink-3);font-variant-numeric:tabular-nums}
.check[data-st="want"]{border-color:var(--accent);background:var(--accent-soft)}
.check[data-st="want"] .box{border-color:var(--accent);color:var(--accent)}
.check[data-st="must"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.check[data-st="must"] .box{border-color:var(--accent-ink);background:var(--accent-ink);color:var(--accent)}
.check[data-st="must"] small{color:var(--accent-ink);opacity:.8}
.check .tag-st{font-size:10.5px;font-weight:700;letter-spacing:.04em}
.modebar{display:grid;gap:6px}
.mode{display:inline-flex;border:1.5px solid var(--accent);border-radius:10px;overflow:hidden;width:fit-content;max-width:100%}
.seg{border:0;background:transparent;color:var(--accent);padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer}
.seg[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.modehelp{margin:0;font-size:12.5px;color:var(--ink-2)}
.tapguide{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--sunk);border-radius:8px;padding:6px 10px;width:fit-content;max-width:100%}
.notice{margin:6px 0 0;font-size:13px;color:var(--ink-2);background:var(--warn-soft);border-radius:8px;padding:8px 12px;max-width:65em}
.notice b{color:var(--warn)}
.report{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.report a,footer a{color:var(--accent);font-weight:700}
.legend{font-size:12px;color:var(--ink-3);display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.st{border-radius:5px;padding:0 6px;font-size:11px;font-weight:700}
.st.want{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.st.must{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.tagchip.want{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.tagchip b{font-size:10.5px;letter-spacing:.04em}
.picked{border-top:1px dashed var(--line);padding-top:10px;display:grid;gap:8px}
.pickedhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px}
.pickedhead > span{font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.filters{display:grid;gap:10px;margin-top:16px;padding:14px 0;border-block:1px solid var(--line)}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.frow > span{font-size:12px;letter-spacing:.06em;color:var(--ink-3);width:6.5em;flex:none}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer;color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tagchips{display:flex;flex-wrap:wrap;gap:6px}
.tagchip{display:inline-flex;align-items:center;gap:4px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:3px 6px 3px 12px;font-size:13px;border:0;cursor:pointer}
.tagchip i{font-style:normal;opacity:.8;padding:0 4px}
details.alltags{border-top:1px dashed var(--line);padding-top:10px}
details.alltags summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.taggroups .check{font-size:12.5px;padding:3px 8px}
.taggroups{display:grid;gap:10px;margin-top:10px}
.taggroups h4{margin:0 0 4px;font-size:12px;color:var(--ink-3);font-weight:500;letter-spacing:.06em}
.taggroups .g{display:flex;flex-wrap:wrap;gap:5px}
.taggroups .chip{font-size:12px;padding:2px 10px}

.floatbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:10;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--ground);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:14px;white-space:nowrap;max-width:calc(100% - 32px)}
.floatbar b{font-size:20px;font-variant-numeric:tabular-nums;margin:0 2px}
.floatbar button{border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;padding:8px 14px;cursor:pointer}
.resulthead{scroll-margin-top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-top:18px}
.count{font-family:var(--display);font-weight:700;font-size:18px}
.count em{font-style:normal;color:var(--accent);font-size:26px;margin-right:2px;font-variant-numeric:tabular-nums}
.note{font-size:12px;color:var(--ink-3)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.card .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-3)}
.kind{font-weight:700;color:var(--ink-2)}
.trust{border-radius:6px;padding:1px 8px;font-size:11.5px;font-weight:700}
.trust.t1{background:var(--ok-soft);color:var(--ok)}
.trust.t2{background:var(--pub-soft);color:var(--pub)}
.trust.t3{background:var(--warn-soft);color:var(--warn)}
.card h3{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.4;margin:0;text-wrap:balance}
.where{font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 12px}
.where b{font-variant-numeric:tabular-nums}
.facts{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:13px}
.facts li{display:grid;grid-template-columns:5.2em 1fr;gap:6px}
.facts li span{color:var(--ink-3)}
.hl{font-size:14px;margin:0}
.caution{font-size:12.5px;color:var(--warn);margin:0}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tags span{font-size:11.5px;color:var(--ink-2);background:var(--sunk);border-radius:6px;padding:1px 7px}
.tags span.hit{background:var(--accent-soft);color:var(--accent);font-weight:700}
.card .go{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center;font-size:13px;border-top:1px dashed var(--line)}
.card .go a{color:var(--accent);font-weight:700;text-decoration:none}
.card .go a:hover{text-decoration:underline}
.more{display:flex;justify-content:center;margin-top:18px}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--ink-2);margin-top:12px}
footer{margin-top:36px;font-size:12px;color:var(--ink-3);display:grid;gap:4px}
@media (max-width:560px){ .frow > span{width:100%} .grid{grid-template-columns:1fr} .ask{padding:14px} .seg{padding:8px 12px;font-size:13.5px;white-space:nowrap} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* iPhone の Safari で、白い枠の中身が枠より広がって右にはみ出すのを防ぐ
   （grid・flex の子は既定で「中身の幅より縮まない」ので、0 まで縮めてよいと明示する。details は Safari で特に広がりやすい） */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;overflow-wrap:anywhere}
.ask{grid-template-columns:minmax(0,1fr)}
.ask > *,.modebar > *,details.alltags,.taggroups > *,.picked > *,.filters > *,.card > *{min-width:0;max-width:100%}
.askrow input{width:100%;-webkit-appearance:none;appearance:none}
.mode{display:flex}
.seg{flex:1 1 auto;min-width:0}
.check,.tagchip,.chip{max-width:100%;text-align:left}
.facts li{grid-template-columns:5.2em minmax(0,1fr)}
@media (max-width:560px){ .grid{grid-template-columns:minmax(0,1fr)} }

/* エリア（県ごとのアコーディオン）と出発地 */
.frow > span small{display:block;font-size:10.5px;letter-spacing:0;color:var(--ink-3)}
.areapick{flex:1 1 260px;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.areapick > summary{cursor:pointer;padding:8px 12px;font-size:13.5px;color:var(--ink-2)}
.areapick > summary b{color:var(--accent);font-weight:700}
.areapick[open] > summary{border-bottom:1px dashed var(--line)}
.arealist{display:grid;padding:4px 10px 10px}
details.pref{border-bottom:1px solid var(--line)}
details.pref:last-child{border-bottom:0}
details.pref > summary{cursor:pointer;padding:9px 2px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
details.pref > summary small{font-weight:400;color:var(--ink-3);font-size:12px}
details.pref > summary b{margin-left:auto;font-size:11.5px;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:0 9px}
.munis{display:flex;flex-wrap:wrap;gap:5px;padding:2px 0 12px}
.munis .check{font-size:12.5px;padding:3px 8px}
.munis .check.whole{font-weight:700}
.munis .check:disabled{opacity:.55;cursor:default}
.originpick{display:inline-flex;align-items:center;gap:6px;width:auto!important;font-size:13.5px;color:var(--ink-2)}
.originpick i{font-style:normal}
.originpick select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 28px 6px 10px;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.frownote{margin:-4px 0 0;font-size:12px;color:var(--ink-3)}
.card .meta .cond{color:var(--warn);font-weight:700}