/* Layout: スマホ1列。上にちぎった紙の帯（題名とリストのタブ）、その下にクリップで留めた大きな和紙を1枚。
   和紙の上にカードを並べ、下に「◯件えらび中・コピー」の紙の帯。メモは下からせり上がる罫線の紙
   見た目: 青い地にオレンジがかった太い格子。端がちぎれたクリーム色の和紙、黒いインクの線、手書きの見出しとタイプライターの添え書き
   （参考：作者の「COUNTDOWN EVENT」のチラシ） */
:root{
  --blue:#97A8DC; --grid:#F8E1BF;
  --paper:#F2EEE3; --card:#FBF9F2; --ink:#1C1B1A; --muted:#5F5C55; --sel:#D9E1F8; --clip:#7DB9B5;
  --rule:#E4DCC6; --margin:#F0B3A8; --shade:rgba(28,27,26,.45);
  /* 地図のピン（app.js が読む）：選んだもの＝墨、まだのもの＝青、ふち＝紙 */
  --accent:var(--ink); --pin:#4F69BD; --panel:var(--card); --edge:#4A4843;
  --f-display:"Yusei Magic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --f-mono:"M PLUS 1 Code","Courier New",ui-monospace,monospace;
  --gut-l:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
  /* 手で引いたような、少しゆがんだ角 */
  --wobble:14px 18px 12px 20px / 18px 12px 20px 14px;
  --wobble-s:9px 12px 8px 13px / 12px 8px 13px 9px;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--blue)}
body{margin:0;overflow-x:clip;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;min-height:100vh;
  background:
    linear-gradient(90deg,var(--grid) 0 7px,transparent 7px) -4px 0/104px 104px,
    linear-gradient(var(--grid) 0 7px,transparent 7px) 0 -4px/104px 104px,
    var(--blue)}
[hidden]{display:none!important}
h1,h2{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.02em}
h2{font-size:1.2rem}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--pin);outline-offset:2px}

/* ちぎった紙：作者の和紙の素材（img/paper.png）。ふちは伸ばさず、真ん中は敷き詰める */
.torn{position:relative;isolation:isolate}
.torn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-sizing:border-box;
  border:20px solid transparent;border-image:url("/img/paper.png") 64 58 58 66 fill / 20px / 0 round}
/* 上の帯は下のふちだけ、下の帯は上のふちだけ見せる（ほかのふちは画面の外へ） */
.torn-b{overflow:hidden}
.torn-b::before{inset:-40px -40px 0 -40px}
.torn-t{overflow:hidden}
.torn-t::before{inset:0 -40px -40px -40px}

/* 上の帯：題名とタブ（上に貼りつく） */
.bar{position:sticky;top:0;z-index:4;padding-top:env(safe-area-inset-top,0px);padding-bottom:14px}
.bar-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px var(--gut-r) 4px var(--gut-l)}
.bar h1{font-size:clamp(1.2rem,5.6vw,1.6rem);line-height:1.1;display:flex;align-items:center;gap:8px;white-space:nowrap}
.tagline{margin:0;font-family:var(--f-mono);font-size:.62rem;flex:none;line-height:1.35;text-align:right;font-weight:700}
.pin{width:16px;height:16px;background:var(--pin);border:2px solid var(--ink);border-radius:50% 50% 50% 0;transform:rotate(-45deg);position:relative;flex:none}
.pin::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--paper)}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px var(--gut-r) 8px var(--gut-l);scroll-padding-inline:16px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:1.5px solid var(--edge);background:var(--card);border-radius:999px;padding:6px 15px;font-weight:700;font-size:.9rem;white-space:nowrap;min-height:40px}
.tab[aria-pressed=true]{background:var(--pin);border-color:var(--pin);color:#FFFFFF}
.tab[aria-pressed=true]::before{content:"✓ "}
.tab.all{font-family:var(--f-mono)}
.tab.plus{border-style:dashed;background:transparent}
.tab.plus[aria-current=true]{background:var(--sel)}
.tab .n{font-family:var(--f-mono);font-weight:400;opacity:.8;margin-left:5px;font-variant-numeric:tabular-nums}

/* 本文：クリップで留めた大きな和紙 */
/* 紙は大きく、中身は紙のふちからしっかり内側に */
.page{max-width:660px;margin:18px auto calc(104px + env(safe-area-inset-bottom,0px));
  margin-left:max(4px,env(safe-area-inset-left,0px));margin-right:max(4px,env(safe-area-inset-right,0px));
  padding:44px 32px 42px;filter:drop-shadow(0 2px 3px rgba(28,27,26,.14))}
@media (min-width:600px){.page{margin-left:auto;margin-right:auto;padding:56px 52px 52px}}
@media (min-width:668px){.page{margin-top:28px}}
.page::after{content:"";position:absolute;top:-14px;left:34px;width:22px;height:62px;transform:rotate(-8deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='62' fill='none' stroke='%237DB9B5' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 18v32a4 4 0 0 0 8 0V10a6.5 6.5 0 0 0-13 0v44a9 9 0 0 0 18 0V20'/%3E%3C/svg%3E") no-repeat}
.page>section{display:grid;gap:12px}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.head{align-items:flex-start}
.head h2{min-width:0;display:flex;flex-wrap:wrap;gap:6px;font-family:var(--f-body);font-size:1rem;letter-spacing:0}
.chip{display:inline-flex;align-items:center;min-height:34px;max-width:100%;padding:4px 14px;border-radius:999px;background:var(--pin);color:#FFFFFF;font-weight:700;font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}
.icon-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--edge);border-radius:50%;background:rgba(255,255,255,.6);padding:0}
.icon-btn svg{width:22px;height:22px}
.icon-btn.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.head .link{flex:none;white-space:nowrap}
.box{background:rgba(255,255,255,.5);border:1.5px solid var(--edge);border-radius:var(--wobble);padding:14px 16px;display:grid;gap:10px}
input,textarea{font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.7);border:1.5px solid var(--edge);border-radius:var(--wobble-s);padding:9px 12px;width:100%;min-width:0}
input::placeholder,textarea::placeholder{color:#8A867C}
textarea{resize:vertical}
input:focus,textarea:focus{outline:3px solid var(--sel);outline-offset:0}
.hint{margin:0;color:var(--muted);font-size:.86rem}
.msg{margin:0;font-size:.92rem;font-weight:700;white-space:pre-line}
.msg.err{color:#B3261E}
.msg:empty{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:var(--wobble-s);padding:9px 22px;font-family:var(--f-display);font-size:1.05rem;letter-spacing:.04em;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.share{background:var(--pin);border-color:var(--pin);color:#FFFFFF}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.link{background:none;border:0;color:var(--ink);padding:6px 0;font-size:.9rem;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.link.danger{color:#B3261E}
.how ol,.notes{margin:0;padding-left:1.3em;display:grid;gap:4px;font-size:.95rem}
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding-top:4px}
.paste>summary{cursor:pointer;font-family:var(--f-display);font-size:1.05rem;min-height:28px}
.paste-form{display:grid;gap:10px;margin-top:10px}
.c-src{font-family:var(--f-mono);font-size:.72rem;font-weight:700;color:var(--pin)}

/* カード：まるごと押すと選べる */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:2px 12px;background:rgba(255,255,255,.62);border:1.5px solid var(--edge);border-radius:var(--wobble);padding:14px 12px 14px 14px;cursor:pointer;min-height:68px}
.card:nth-child(even){border-radius:18px 12px 20px 14px / 12px 20px 14px 18px}
.card.on{background:var(--sel);border-color:var(--pin);box-shadow:inset 0 0 0 1px var(--pin)}
/* チェック：名前の1行目と同じ高さに。押せる範囲はカード全体 */
.check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--edge);display:grid;place-items:center;margin-top:3px;background:#FFFFFF}
.card.on .check{background:var(--pin);border-color:var(--pin)}
.card.on .check::after{content:"";width:5px;height:10px;border:solid #FFFFFF;border-width:0 2.2px 2.2px 0;transform:translateY(-1px) rotate(45deg)}
.c-main{display:grid;gap:2px;min-width:0}
.c-name{font-weight:700;font-size:1.14rem;line-height:1.45;overflow-wrap:anywhere}
.c-sub{margin:0;color:var(--muted);font-size:.88rem;overflow-wrap:anywhere}
.c-memo{margin:0;font-size:.92rem;white-space:pre-wrap;overflow-wrap:anywhere}
.c-side{display:grid;justify-items:end;gap:2px}
.c-side a,.c-side button{font-family:var(--f-mono);font-size:.78rem;color:var(--ink);background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.c-side button.danger{color:#B3261E}
.empty{margin:0;color:var(--muted);text-align:center;padding:28px 8px;border:1.5px dashed var(--edge);border-radius:var(--wobble)}
.skeleton{height:64px;border-radius:var(--wobble);border:2px dashed var(--muted);opacity:.5}

/* 一覧・地域・地図の切りかえ */
.views{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--edge);border-radius:var(--wobble-s);padding:3px;gap:3px;background:rgba(255,255,255,.5)}
.views button{border:0;background:none;border-radius:7px;min-height:40px;font-family:var(--f-display);font-size:1rem}
.views button[aria-selected=true]{background:var(--sel);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--pin)}

/* 地域の見出し：格子の1マスを目印に */
.g-pref{list-style:none;font-family:var(--f-display);font-size:1.2rem;padding:12px 2px 0;display:flex;align-items:center;gap:10px}
.g-pref::before{content:"";width:12px;height:12px;background:var(--blue);outline:3px solid var(--grid);outline-offset:-1px}
.g-city{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px;font-weight:700;font-size:.92rem;border-bottom:1px dashed var(--edge)}
.g-city .n{font-family:var(--f-mono);font-weight:400;font-size:.8rem}
.g-city .link{font-size:.84rem}

/* 地図 */
.map{height:min(62vh,520px);border-radius:var(--wobble);border:1.5px solid var(--edge);overflow:hidden;z-index:0;background:var(--sel)}
.leaflet-container{font-family:var(--f-body)}
.leaflet-popup-content-wrapper{border:1.5px solid var(--edge);border-radius:var(--wobble-s);background:var(--card);box-shadow:none}
.leaflet-popup-tip{background:var(--card);box-shadow:none}
.leaflet-popup-content{margin:12px 14px;font-size:.92rem;line-height:1.5;min-width:170px;color:var(--ink)}
.pop{display:grid;gap:6px}
.pop span{color:var(--muted)}
.leaflet-popup-content b{font-size:1rem}
.leaflet-popup-content .btn{min-height:40px;padding:6px 14px;font-size:.95rem}
.map-note{margin:0;color:var(--muted);font-size:.84rem}
.map-note:empty{display:none}

/* 下の帯 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;
  padding:20px var(--gut-r) calc(12px + env(safe-area-inset-bottom,0px)) var(--gut-l);filter:drop-shadow(0 -2px 3px rgba(28,27,26,.14))}
.dock-open{flex:1;display:flex;flex-direction:column;align-items:flex-start;background:none;border:0;padding:2px 0;text-align:left;min-height:48px;justify-content:center}
.dock-open b{font-family:var(--f-display);font-weight:400;font-size:1.45rem;line-height:1.2;font-variant-numeric:tabular-nums}
.dock-open span{font-size:.95rem;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.dock .btn{min-width:148px;min-height:56px;font-size:1.25rem}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:7;margin:0;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:var(--wobble-s);font-weight:700;font-size:.92rem;max-width:calc(100% - 32px);text-align:center}

/* 下からせり上がるメモ */
.sheet{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:flex-end}
.sheet-bg{position:absolute;inset:0;background:var(--shade)}
.sheet-body{max-height:92%;overscroll-behavior:contain;overflow-y:auto;display:grid;gap:12px;
  padding:28px var(--gut-r) calc(16px + env(safe-area-inset-bottom,0px)) var(--gut-l);width:100%;max-width:580px;margin:0 auto}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--edge);border-radius:999px;padding:5px 12px;font-size:.9rem;cursor:pointer;min-height:38px;background:var(--card)}
.opt input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.opt:has(input:checked){background:var(--sel)}
.paper{background:#FFFFFF;border:1.5px solid var(--edge);border-radius:4px;
  background-image:linear-gradient(90deg,transparent 26px,var(--margin) 26px 27px,transparent 27px),repeating-linear-gradient(transparent 0 27px,var(--rule) 27px 28px);
  background-attachment:local;line-height:28px;padding:0 10px 0 36px;min-height:252px;font-size:.95rem}
.sheet-btns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
#clearPicks{justify-self:center}

@media (prefers-reduced-motion:no-preference){
  .sheet:not([hidden]) .sheet-body{animation:up .22s ease-out}
  .card{transition:background-color .12s}
}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.notes{font-size:.9rem}
#keyUrl{font-family:var(--f-mono);font-size:16px}