/* =========================================================
     経県値 — しおり本体と同じ「フラットな紙」のつくり。
     影も立体も使わない。面（色）と細い輪郭だけで組み、
     彩度は地図の6色にだけ集める。文字は黒ではなく焦げ茶。

     記録はふたりで1つ。だれの、を分けない。
     ========================================================= */
  :root{
    --paper:#FBF4E7; --paper-2:#F4EAD8;
    --card:#FFFFFF; --card-2:#FDF9F2;
    --ink:#3E2C1E; --ink-2:#5A4331; --body:#75604D; --muted:#8A7361; --subtle:#A08D7A;
    --rule:rgba(62,44,30,.10); --rule-2:rgba(62,44,30,.18);
    --line:#EFE3D2; --line-2:#E3D5BE;

    /* 経県値の6段階。未踏は地になじむ灰色、宿泊は青、居住はオレンジ。 */
    --L0:#E9EEF3; --L1:#9DAEC0; --L2:#6FC2A0; --L3:#F0BE4E; --L4:#7FBEE0; --L5:#EE8B6A;
    --amber:#F7E3B0;

    --disp:'Baloo 2','Zen Maru Gothic',system-ui,sans-serif;
    --round:'Zen Maru Gothic','M PLUS Rounded 1c','Hiragino Maru Gothic ProN',sans-serif;
    --ease:cubic-bezier(.2,.9,.25,1);
    --r-s:10px; --r-m:16px; --r-l:22px; --r-p:999px;
    --safe-b:env(safe-area-inset-bottom,0px);
    --safe-t:env(safe-area-inset-top,0px);
    --app-height:100vh;
    --app-top:0px;
    --app-sheet-max-height:88vh;
  }
  @supports (height:100dvh){:root{--app-height:100dvh;--app-sheet-max-height:88dvh}}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  html{background:var(--paper);overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{
    background:var(--paper);color:var(--ink);
    font-family:var(--round);font-size:14.5px;line-height:1.8;font-weight:500;
    min-height:var(--app-height);overscroll-behavior-y:none;
  }
  /* 紙の目。しおりと同じ粒 */
  body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.3;
    background-image:radial-gradient(currentColor 1px,transparent 1.1px);
    background-size:24px 24px;color:rgba(213,195,168,.5)}
  body>*{position:relative;z-index:1}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
  input,textarea{font:inherit;color:inherit}
  ::selection{background:var(--amber);color:var(--ink)}
  :focus-visible{outline:3px solid var(--L4);outline-offset:2px;border-radius:8px}
  /* しるしは絵文字ではなく Material Symbols（/icons.js） */
  svg.ms{width:16px;height:16px;flex:0 0 auto;display:block}
  .wrap{max-width:560px;margin:0 auto;padding:0 16px}
  .num{font-family:var(--disp);font-weight:800;font-feature-settings:'tnum'}
  .hide{display:none !important}

  /* ---------- 上のバー ----------
     ホームへ戻る札は、しおりの表紙と同じ「上の左」に同じ形で置く。
     札そのものは /nav.css と /nav.js が持っている */
  header.top{padding:calc(var(--safe-t) + 12px) 0 4px}
  .eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
  .maptitle{margin:0;font-size:21px;font-weight:900;letter-spacing:.01em;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .keiken-title-row{display:flex;align-items:center;gap:9px;margin-top:3px}
  .keiken-title-icon{width:24px;height:24px;flex:0 0 24px;
    display:grid;place-items:center;color:var(--accent-i,var(--ink-2))}
  .keiken-title-icon svg{width:20px;height:20px}

  /* ---------- 点数の札 ---------- */
  .scorecard{margin:14px auto 0;max-width:none;background:var(--amber);
    border-radius:var(--r-l);padding:0;position:relative;display:block;
    overflow:hidden;isolation:isolate;text-align:left}
  /* 地図をカードいっぱいに置き、地形の空いている左上へ点数を重ねる。
     ふたつを別々の箱にすると、どちらも小さく見えてしまうため。 */
  .score-copy{position:absolute;z-index:2;top:clamp(18px,5.5vw,31px);
    left:clamp(17px,5vw,29px);width:min(43%,200px);min-width:0;pointer-events:none}
  .score-label{font-size:clamp(10px,2.7vw,12px);font-weight:800;letter-spacing:.06em;color:var(--body)}
  .scorecard .big{font-size:clamp(52px,12vw,76px);line-height:.92;letter-spacing:-.025em;margin-top:7px;
    display:flex;align-items:baseline}
  .scorecard .big span{font-size:clamp(14px,3.5vw,18px);font-weight:800;
    font-family:var(--round);margin-left:5px}
  .scorecard .big #scoreNum{font:inherit;margin:0}
  .scorecard .cap{font-size:clamp(9px,2.35vw,10.5px);font-weight:700;color:#7A6132;
    letter-spacing:.01em;margin-top:12px;line-height:1.55}
  .score-progress{display:flex;align-items:center;gap:7px;margin-top:12px}
  .score-progress .bar{flex:1;min-width:0;margin:0}
  .score-percent{flex:0 0 auto;font-size:clamp(9px,2.4vw,11px);font-weight:700;color:var(--body);
    font-variant-numeric:tabular-nums}
  .bar{margin-top:9px;height:7px;border-radius:var(--r-p);background:rgba(122,97,50,.18);overflow:hidden}
  .bar i{display:block;height:100%;border-radius:var(--r-p);background:#C58B3C;
    transition:width .5s var(--ease)}

  /* ---------- 状態別の件数 ---------- */
  .legend{margin:12px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .lg{display:flex;align-items:center;gap:7px;min-width:0;min-height:54px;padding:9px 10px;
    border-radius:var(--r-s);background:var(--card);box-shadow:var(--sh,none)}
  /* 6段階は手描きの絵。線の細い絵なので、しるしのときの 22px だと
     何が描いてあるか読めなくなる。28px まで上げても .lg の 54px に収まる */
  .status-icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center}
  .status-icon img{width:28px;height:28px;object-fit:contain}
  .lg .tx{min-width:0;flex:1}
  .lg .tx b{display:block;font-size:11px;font-weight:800;line-height:1.35;white-space:nowrap}
  .lg .n{flex:0 0 auto;font-family:var(--disp);font-size:18px;line-height:1;font-weight:800;
    color:var(--ink);font-variant-numeric:tabular-nums}

  /* ---------- 地図 ---------- */
  .scorecard .mapbox{position:relative;margin:0;width:100%;border-radius:inherit;aspect-ratio:1/1;
    background:var(--card);box-shadow:none;overflow:hidden;touch-action:auto}
  .scorecard .mapbox svg{display:block;width:100%;height:100%}
  #mapG path.pref{stroke:var(--ink);stroke-width:1.05;stroke-linejoin:round;
    vector-effect:non-scaling-stroke;transition:fill .22s var(--ease);cursor:pointer}
  #mapG path.pref.on{stroke-width:3}
  #mapG path.pref:focus{outline:none;stroke:var(--accent-s,var(--ink));stroke-width:3}
  #mapG .inset{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;
    stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.55}

  /* ---------- 一覧 ---------- */
  .sec{margin-top:26px}
  .sec-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
  .sec-h .jp{font-size:14px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
  .sec-h .rule{flex:1;height:2px;background:var(--rule);border-radius:2px}
  .sec-h .tail{font-size:10.5px;font-weight:700;color:var(--subtle);white-space:nowrap}
  .region-all{display:inline-flex;align-items:center;gap:2px;color:var(--muted)!important}
  .region-all-icon{display:block;transition:transform .2s var(--ease)}
  .region-all-icon svg{width:14px;height:14px}
  .region-all.open .region-all-icon{transform:rotate(90deg)}

  .reg{margin-bottom:14px}
  .reg>h3{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);
    padding-left:2px}
  .rows{background:var(--card);border-radius:var(--r-m);overflow:hidden}
  /* 一覧は「いま何点か」を眺めるところ。点をつけるのはシートの中だけにして、
     1行に並べるのは 丸・名前・段階のことば の3つに絞る */
  .row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
    padding:10px 12px;border-top:1.5px solid var(--line);
    transition:background .16s var(--ease)}
  .row:first-child{border-top:0}
  .row:active{background:var(--card-2)}
  .row .dot{width:23px;height:23px;flex:0 0 23px;border-radius:50%;
    border:2px solid var(--ink);display:grid;place-items:center;
    font-family:var(--disp);font-size:11.5px;font-weight:800}
  .row .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;letter-spacing:.01em;
    display:flex;align-items:center;gap:6px}
  .row .nm .memo{width:14px;height:14px;color:var(--subtle)}
  .row .lvn{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--muted)}
  .row .chev{width:14px;height:14px;flex:0 0 14px;fill:var(--line-2)}

  /* 7地方は横へ流し、選んだ地方の県だけを下へ開く。 */
  .region-rail{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 2px 12px;
    scrollbar-width:none}
  .region-rail::-webkit-scrollbar{display:none}
  .region-card{flex:0 0 104px;min-height:142px;padding:13px 10px 10px;border-radius:var(--r-m);
    background:var(--card);box-shadow:var(--sh,none);scroll-snap-align:start;
    display:flex;flex-direction:column;align-items:center;text-align:center}
  .region-card[aria-expanded=true]{box-shadow:var(--sh,none),0 0 0 2px var(--accent-l,var(--line-2))}
  .region-card:active{background:var(--card-2)}
  .region-art{height:52px;display:grid;place-items:center}
  .region-art img{width:48px;height:48px;object-fit:contain}
  .region-card .reg-name{min-height:32px;display:grid;place-items:center;font-size:10.5px;
    font-weight:900;line-height:1.45;letter-spacing:.01em}
  .region-card .reg-count{margin-top:4px;font-family:var(--disp);font-size:12px;font-weight:800;
    color:var(--body);font-variant-numeric:tabular-nums}
  .region-progress{width:100%;height:5px;margin-top:auto;border-radius:var(--r-p);
    background:var(--paper-2);overflow:hidden}
  .region-progress i{display:block;width:0;height:100%;border-radius:inherit;
    background:var(--accent-s,#C58B3C);transition:width .5s var(--ease)}
  .region-panels{margin-top:2px}
  .region-panels .reg{margin:0 0 10px}
  .region-panels .reg>h3{padding:0 3px;margin:0 0 6px}
  .region-panels .rows{box-shadow:var(--sh,none)}

  /* ---------- ボトムシート ---------- */
  /* 閉じた fixed 要素を画面外へ押し出すだけだと、iOS Safari が下端の色面として
     拾ってしまう。閉じているあいだは描画そのものから外す。 */
  .scrim{display:none;position:fixed;top:var(--app-top);right:0;left:0;
    height:var(--app-height);z-index:40;background:rgba(62,44,30,.42)}
  .scrim.on{display:block;animation:scrimIn .24s var(--ease) both}
  .sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:41;
    background:var(--paper);border-radius:26px 26px 0 0;
    max-height:var(--app-sheet-max-height);flex-direction:column;
    padding-bottom:var(--safe-b)}
  .sheet.on{display:flex;animation:sheetIn .3s var(--ease) both}
  @keyframes scrimIn{from{opacity:0}to{opacity:1}}
  @keyframes sheetIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .grab{width:42px;height:5px;border-radius:var(--r-p);background:var(--line-2);
    margin:9px auto 0;flex:0 0 auto}
  .sheet-h{display:flex;align-items:center;gap:10px;padding:10px 18px 8px;flex:0 0 auto}
  .sheet-h h2{margin:0;font-size:19px;font-weight:900;flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet-h .sub{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.06em}
  .xbtn{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--paper-2);
    display:grid;place-items:center}
  .xbtn:active{background:var(--line)}
  .xbtn svg{width:17px;height:17px}
  .sheet-b{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 18px 22px;
    overscroll-behavior:contain}

  /* iPhone の編集画面は、下部URLバーを含む layout viewport ではなく、
     viewport.js が測った「いま見えている領域」いっぱいに置く。 */
  @media (max-width:599px), (max-height:599px){
    html.sheet-open,html.sheet-open body{overflow:hidden;overscroll-behavior:none}
    .sheet.on{top:var(--app-top);bottom:auto;width:100%;height:var(--app-height);
      max-height:var(--app-height);border-radius:0;padding-top:var(--safe-t)}
    .sheet.on .grab{margin-top:7px}
  }

  .pick>.pick-h{display:flex;align-items:baseline;gap:7px;margin-bottom:7px}
  .pick>.pick-h b{font-size:13px;font-weight:900}
  .pick>.pick-h .now{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--ink-2)}
  .lvls{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
  .lvls button{padding:8px 2px 7px;border-radius:13px;border:2px solid var(--rule-2);
    background:#FFF;display:flex;flex-direction:column;align-items:center;gap:4px;
    transition:transform .14s var(--ease)}
  .lvls button:active{transform:scale(.93)}
  .lvls button .d{width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);
    display:grid;place-items:center;font-family:var(--disp);font-size:12px;font-weight:800}
  .lvls button .t{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.02em}
  .lvls button[aria-pressed=true]{border-color:var(--ink);background:var(--paper-2)}
  .lvls button[aria-pressed=true] .t{color:var(--ink)}

  .fld{margin-top:16px}
  .fld>label{display:block;font-size:11px;font-weight:800;color:var(--muted);
    letter-spacing:.06em;margin-bottom:5px}
  textarea.memo{width:100%;min-height:82px;resize:vertical;border:2px solid var(--line-2);
    border-radius:14px;background:#FFF;padding:10px 12px;font-size:14px;line-height:1.75;
    font-weight:500}
  textarea.memo::placeholder{color:var(--subtle)}
  textarea.memo:focus{outline:none;border-color:var(--L4)}

  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
  .chip{display:inline-flex;align-items:center;gap:5px;background:#FFF;
    border:2px solid var(--line-2);border-radius:var(--r-p);padding:4px 6px 4px 11px;
    font-size:12.5px;font-weight:700}
  .chip button{width:19px;height:19px;border-radius:50%;background:var(--paper-2);
    display:grid;place-items:center;color:var(--muted)}
  .chip button svg{width:12px;height:12px}
  .addrow{display:flex;gap:7px}
  .addrow input{flex:1;min-width:0;border:2px solid var(--line-2);border-radius:var(--r-p);
    background:#FFF;padding:8px 14px;font-size:14px;font-weight:600}
  .addrow input:focus{outline:none;border-color:var(--L4)}
  .addrow button{flex:0 0 auto;padding:0 16px;border-radius:var(--r-p);background:var(--ink);
    color:#FFF6E8;font-size:13px;font-weight:800}
  .addrow button:active{background:var(--ink-2)}

  /* ---------- 下の帯 ---------- */
  /* 戻る札の見た目は /nav.css。ここは置き場所と、その下の一言だけ */
  .foot{margin:30px 0 0;padding:20px 0 calc(26px + var(--safe-b));text-align:center}
  .foot .st{display:block;margin-top:12px;font-size:10.5px;color:var(--subtle);font-weight:700}

  /* 通信状態 */
  .netbar{position:fixed;left:50%;transform:translateX(-50%) translateY(-120%);top:0;z-index:50;
    background:var(--ink);color:#FFF6E8;font-size:11.5px;font-weight:800;padding:6px 16px;
    border-radius:0 0 14px 14px;transition:transform .3s var(--ease)}
  .netbar.on{transform:translateX(-50%)}

  /* 起動中 */
  .boot{position:fixed;top:0;right:0;left:0;height:var(--app-height);z-index:55;background:var(--paper);display:grid;
    place-items:center;transition:opacity .35s;font-size:12px;font-weight:800;color:var(--muted)}
  .boot.out{opacity:0;pointer-events:none}
  .boot .sp{display:block;margin:0 auto 12px;width:26px;height:26px;border-radius:50%;
    border:3px solid var(--line-2);border-top-color:var(--ink);animation:sp .8s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}

  @media (max-width:399px){
    .score-copy{width:42%}
    .lg{gap:5px;padding:8px 7px}
    .status-icon{width:24px;height:24px;flex-basis:24px}
    .status-icon img{width:24px;height:24px}
    .lg .tx b{font-size:10px}
    .lg .n{font-size:16px}
  }
  @media (max-width:339px){
    .legend{gap:6px}
    .lg{min-height:48px;padding:7px 6px}
    .status-icon{width:21px;height:21px;flex-basis:21px}
    .status-icon img{width:21px;height:21px}
    .lg .tx b{font-size:9px}
    .lg .n{font-size:14px}
  }
  @media (min-width:600px){body{font-size:15px}}
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  }