:root{
    --sea:#E4E9E7; --paper:#FBFCFB; --ink:#16241F; --ink-2:#5A6B64;
    --line:#CBD5D0; --malt:#B4761C; --malt-soft:#F0E0C4; --hop:#4C7A3C; --quiet:#93A29B;
    --srm0:#F5F1E6; --srm1:#F2CE68; --srm2:#DC9A2C; --srm3:#A9601B; --srm4:#5A3111;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",
       system-ui,sans-serif; color:var(--ink); background:var(--sea); -webkit-font-smoothing:antialiased;
       display:flex; flex-direction:column}
  /* 高さは .screen 側で決める。ここで height を指定すると二重定義になり、
     スマホ幅で中身(52vh+48vh)が親(100vh-40px)を超えて地図が潰れる。 */
  .wrap{display:grid; grid-template-columns:330px 1fr; min-height:0}
  @media (max-width:820px){
    /* vh固定ではなく比率で分ける。親の高さがいくつでも破綻しない */
    .wrap{grid-template-columns:1fr; grid-template-rows:52fr 48fr}
    .side{order:2; border-right:none; border-top:1px solid var(--line)} .mapwrap{order:1}
  }
  /* グリッドの子が内容サイズで膨らんで親をはみ出すのを防ぐ */
  .wrap>*{min-height:0; min-width:0}
  .side{background:var(--paper); border-right:1px solid var(--line);
        display:flex; flex-direction:column; overflow:hidden}
  .head{padding:18px 20px 12px}
  h1{margin:0 0 2px; font-size:19px; font-weight:700; letter-spacing:.02em}
  .sub{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.6}
  .crumb{display:flex; align-items:center; gap:5px; padding:0 20px 14px; flex-wrap:wrap}
  .crumb button{font:inherit; font-size:11.5px; padding:3px 9px; border-radius:999px;
        border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer}
  .crumb button:last-child{background:var(--malt-soft); color:var(--ink); border-color:var(--malt-soft);
        font-weight:600}
  .crumb .sep{color:var(--ink-2); font-size:11px}
  /* 地方 / 都道府県を選ぶボタン列。階層に応じて中身が入れ替わる */
  .picker{display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:0 20px 14px}
  .picker[hidden]{display:none}
  .picklabel{font-size:11px; color:var(--ink-2); margin-right:3px}
  .pick{font:inherit; font-size:11.5px; padding:4px 9px; border-radius:6px;
        border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer}
  .pick:hover{background:var(--malt-soft); border-color:var(--malt)}
  /* ブルワリーが登録済みの県は文字を濃く、件数を添える */
  .pick.has{color:var(--ink); font-weight:600}
  .pick.has em{font-style:normal; color:var(--malt); margin-left:4px; font-size:10.5px}
  .pick.on{background:var(--ink); color:#fff; border-color:var(--ink)}
  .pick.on em{color:var(--malt-soft)}
  .meter{display:flex; align-items:center; gap:14px; padding:14px 20px;
         border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .glass{position:relative; width:38px; height:52px; flex:none; border:2px solid var(--ink);
         border-top:none; border-radius:3px 3px 7px 7px; overflow:hidden; background:#fff}
  .glass i{position:absolute; left:0; right:0; bottom:0; height:0%;
           background:linear-gradient(180deg,var(--srm1),var(--srm4));
           transition:height .5s cubic-bezier(.4,0,.2,1)}
  .glass b{position:absolute; left:0; right:0; height:6px; background:#fff; opacity:0;
           transition:bottom .5s cubic-bezier(.4,0,.2,1),opacity .3s}
  .mnum{font-size:26px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
  .mnum span{font-size:13px; font-weight:400; color:var(--ink-2)}
  .mlab{font-size:12px; color:var(--ink-2); margin-top:4px}
  .legend{padding:12px 20px; border-bottom:1px solid var(--line)}
  .legend p{margin:0 0 7px; font-size:12px; color:var(--ink-2)}
  .swatches{display:flex; height:14px; border-radius:3px; overflow:hidden; border:1px solid var(--line)}
  .swatches div{flex:1}
  /* 地方ごとの色見本。左が未着手、右へ行くほど濃い */
  .regionkey{display:flex; flex-direction:column; gap:4px}
  .rkrow{display:flex; align-items:center; gap:7px}
  .rkrow span{font-size:10.5px; color:var(--ink-2); width:74px; flex:none}
  .rkbar{flex:1; display:flex; height:11px; border-radius:3px; overflow:hidden;
        border:1px solid var(--line)}
  .rkbar i{flex:1}
  .scale{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-2); margin-top:5px}
  .search{padding:12px 20px 8px}
  .search input{width:100%; padding:9px 11px; font:inherit; font-size:13.5px;
        border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink)}
  .search input:focus{outline:2px solid var(--malt); outline-offset:1px; border-color:var(--malt)}
  .chip{font-size:12px; padding:5px 11px; border:1px solid var(--line); border-radius:999px;
        background:#fff; color:var(--ink-2); cursor:pointer}
  .chip[aria-pressed=true]{background:var(--ink); color:#fff; border-color:var(--ink)}
  .chip:focus-visible{outline:2px solid var(--malt); outline-offset:2px}
  .tools{display:flex; gap:7px; padding:0 20px 12px; align-items:center}
  .tools select{flex:1; font:inherit; font-size:12px; padding:6px 8px; border-radius:7px;
        border:1px solid var(--line); background:#fff; color:var(--ink)}
  .tools button{font:inherit; font-size:12px; padding:6px 10px; border-radius:7px;
        border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
        white-space:nowrap}
  .tools button:hover{background:var(--malt-soft); border-color:var(--malt)}
  .tools button:focus-visible{outline:2px solid var(--malt); outline-offset:1px}
  .item{align-items:flex-start!important; padding:11px 20px 11px 20px!important; gap:11px!important}
  .ibody{flex:1; min-width:0}
  .irow1{display:flex; align-items:baseline; gap:7px}
  .imeta{display:flex; gap:6px; align-items:center; margin-top:4px; flex-wrap:wrap}
  .badge{font-size:10.5px; padding:1px 7px; border-radius:4px; background:var(--sea);
        color:var(--ink-2); white-space:nowrap}
  .badge.tap{background:var(--malt-soft); color:#7A4E0F}
  .badge.dist{background:#E3EDE5; color:#375A2C; font-variant-numeric:tabular-nums}
  .badge.q{background:#EFEFEC; color:var(--quiet)}
  .item .logo,.item .mono{width:32px; height:32px; border-radius:6px; font-size:12px}
  .list{overflow-y:auto; flex:1; padding-bottom:20px}
  .ahead{display:flex; align-items:center; gap:9px; width:100%; padding:10px 20px; border:none;
        border-bottom:1px solid var(--line); background:var(--paper); text-align:left;
        font:inherit; cursor:pointer; position:sticky; top:0}
  .ahead:hover{background:#F2F5F3}
  .ahead.pref{z-index:2}
  .ahead.city{padding-left:34px; top:39px; z-index:1; font-size:12.5px}
  .ahead.city .cname{font-size:12.5px; font-weight:600}
  .cchip{width:15px; height:15px; border-radius:3px; flex:none; border:1px solid rgba(0,0,0,.18)}
  .cname{font-size:13px; font-weight:700}
  /* 開閉の矢印。開くと下向きになる */
  .ahead .cv{font-style:normal; display:inline-block; width:11px; flex:none;
        color:var(--ink-2); font-size:12px; transition:transform .18s ease}
  .ahead .cv.on{transform:rotate(90deg); color:var(--malt)}
  /* その見出しに含まれる件数 */
  .cnum{font-size:10.5px; color:var(--ink-2); background:var(--sea); border-radius:999px;
        padding:1px 7px; font-variant-numeric:tabular-nums}
  .cprog{margin-left:auto; font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
  .item{display:flex; align-items:center; gap:9px; width:100%; padding:8px 20px 8px 34px;
        border:none; border-bottom:1px solid #EEF1EF; background:none; text-align:left;
        cursor:pointer; font:inherit}
  .item:hover{background:#F2F5F3}
  .item:focus-visible{outline:2px solid var(--malt); outline-offset:-2px}
  .item[aria-current=true]{background:var(--malt-soft)}
  .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--malt);transform:translateY(-1px)}
  .item[data-status="要確認"] .dot{background:var(--quiet)}
  .item.drunk .dot{background:var(--hop); box-shadow:0 0 0 3px rgba(76,122,60,.35)}
  .iname{font-size:13.5px; line-height:1.35}
  /* ロゴ。画像がなければ頭文字のモノグラムを出す */
  .logo{width:26px; height:26px; border-radius:5px; flex:none; object-fit:contain;
        background:#fff; border:1px solid var(--line)}
  .mono{width:26px; height:26px; border-radius:5px; flex:none; display:grid;
        place-items:center; font-size:11px; font-weight:700; color:#fff;
        letter-spacing:.01em}
  .hover{position:absolute; z-index:700; width:262px; background:var(--paper);
        border:1px solid var(--line); border-radius:9px; padding:13px 15px;
        box-shadow:0 6px 22px rgba(22,36,31,.22); font-size:12.5px; line-height:1.55;
        pointer-events:auto; opacity:0; transform:translateY(3px);
        transition:opacity .14s, transform .14s; display:none}
  .hover.on{opacity:1; transform:none}
  .htop{display:flex; gap:10px; align-items:flex-start}
  .htop .logo,.htop .mono{width:38px; height:38px; font-size:14px; border-radius:7px}
  .hname{font-size:14px; font-weight:700; line-height:1.3}
  .hcity{font-size:11.5px; color:var(--ink-2); margin-top:2px}
  .hbeers{display:flex; flex-wrap:wrap; gap:4px; margin-top:10px}
  .hbeers span{background:var(--malt-soft); border-radius:4px; padding:2px 7px; font-size:11.5px}
  .hbeers .none{background:none; color:var(--ink-2); padding:0}
  .hfoot{display:flex; gap:8px; align-items:center; margin-top:11px;
        padding-top:10px; border-top:1px solid var(--line)}
  .hfoot a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-size:12px}
  .hfoot .det{margin-left:auto; border:1px solid var(--line); background:#fff; color:var(--ink);
        font:inherit; font-size:12px; padding:6px 11px; border-radius:6px; cursor:pointer}
  .hfoot .rec{ border:none; background:var(--hop); color:#fff; font:inherit;
        font-size:12px; font-weight:600; padding:6px 13px; border-radius:6px; cursor:pointer}
  .hstat{font-size:11.5px; color:var(--quiet); margin-top:8px}
  .icity{font-size:11px; color:var(--ink-2); margin-left:auto; flex:none}
  .icount{font-size:11px; color:#fff; background:var(--hop); border-radius:999px; padding:1px 7px;
          font-variant-numeric:tabular-nums}
  .mapwrap{position:relative}
  #map{position:absolute; inset:0; background:var(--sea)}
  .note{position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:500;
        background:#fff; border:1px solid var(--line); border-radius:7px; padding:10px 16px;
        font-size:12.5px; color:var(--ink-2); display:none; max-width:86%; line-height:1.6}
  /* 左上はLeafletのズームボタンが占めるので、右上に置く */
  .verify{position:absolute; right:12px; top:12px; z-index:700; background:var(--paper);
        border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:12px;
        box-shadow:0 3px 14px rgba(22,36,31,.14); max-width:250px}
  .verify .vrow{display:flex; align-items:center; gap:9px}
  .verify button{font:inherit; font-size:12px; padding:5px 11px; border-radius:6px;
        border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer}
  .verify button.exp{background:var(--hop); color:#fff; border-color:var(--hop)}
  .verify p{margin:9px 0 0; color:var(--ink-2); line-height:1.55; font-size:11.5px}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(180,118,28,.55)}
                   50%{box-shadow:0 0 0 7px rgba(180,118,28,0)}}
  /* 選択中のピン。密集地でどれを開いているか分かるよう、
     リング+脈打つ光暈で強調する。z-indexも前面に出す(paint()側で設定)。 */
  .pin.selected{
    width:18px!important; height:18px!important; margin-left:-2px!important; margin-top:-2px!important;
    border-color:#2E6FB7; border-width:3px;
    animation:selectPulse 1.1s ease-out infinite;
  }
  @keyframes selectPulse{
    0%{box-shadow:0 0 0 0 rgba(46,111,183,.55)}
    70%{box-shadow:0 0 0 12px rgba(46,111,183,0)}
    100%{box-shadow:0 0 0 0 rgba(46,111,183,0)}
  }
  .areabadge{position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:650;
        background:rgba(22,36,31,.92); color:#fff; border-radius:7px; padding:7px 15px;
        font-size:13px; font-weight:700; letter-spacing:.02em; pointer-events:none;
        opacity:0; transition:opacity .15s; white-space:nowrap}
  .areabadge.on{opacity:1}
  .areabadge span{font-weight:400; opacity:.75; margin-left:9px; font-size:12px;
        font-variant-numeric:tabular-nums}
  .zoomhint{position:absolute; right:12px; bottom:12px; z-index:500; background:rgba(255,255,255,.92);
        border:1px solid var(--line); border-radius:6px; padding:6px 11px; font-size:12px; color:var(--ink-2)}
  .pin{border-radius:50%; border:2.5px solid #fff; background:var(--malt);
       box-shadow:0 1px 4px rgba(0,0,0,.4)}
  .pin.q{background:var(--quiet)}
  .pin.drunk{background:var(--hop); box-shadow:0 0 0 4px rgba(76,122,60,.45),0 1px 4px rgba(0,0,0,.4)}
  .card{position:absolute; z-index:600; left:16px; right:16px; bottom:16px; background:var(--paper);
        border:1px solid var(--line); border-radius:10px; padding:18px 20px;
        box-shadow:0 8px 28px rgba(22,36,31,.2); display:none; max-width:420px}
  .card h2{margin:0; font-size:17px; line-height:1.3}
  .card .alias{font-size:12px; color:var(--ink-2); margin:3px 0 0}
  .card dl{margin:12px 0 0; display:grid; grid-template-columns:68px 1fr; gap:6px 12px;
           font-size:12.5px; line-height:1.5; color:var(--ink-2)}
  .card dd{margin:0; color:var(--ink)}
  .form{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
  .form label{display:block; font-size:12px; color:var(--ink-2); margin-bottom:6px}
  .row{display:flex; gap:8px}
  .row input{flex:1; padding:11px 12px; font:inherit; font-size:15px; border:1px solid var(--line);
        border-radius:7px; background:#fff; color:var(--ink)}
  .row input:focus{outline:2px solid var(--malt); outline-offset:1px; border-color:var(--malt)}
  .row button{padding:11px 18px; font:inherit; font-size:14px; font-weight:600; border:none;
        border-radius:7px; background:var(--hop); color:#fff; cursor:pointer}
  .sugg{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
  .sugg button{font:inherit; font-size:12px; padding:4px 10px; border-radius:5px;
        border:1px solid var(--malt-soft); background:var(--malt-soft); color:var(--ink); cursor:pointer}
  .checkin-cta{display:inline-block; margin-top:12px; padding:7px 15px; border-radius:999px;
        font:inherit; font-size:12.5px; font-weight:700; color:#20180C; background:#F2C230;
        border:none; cursor:pointer}
  .checkin-cta:hover{background:#FFD23F}
  .detail-cta{display:inline-block; margin:12px 0 0 7px; padding:7px 15px; border-radius:999px;
        font:inherit; font-size:12.5px; color:var(--ink); background:#fff;
        border:1px solid var(--line); cursor:pointer}
  .detail-cta:hover{background:var(--malt-soft); border-color:var(--malt)}
  /* 記録済みの一覧。×で1件ずつ消せる */
  .logs{margin-top:12px}
  .logs h3{margin:0 0 7px; font-size:12px; font-weight:400; color:var(--ink-2)}
  .log{display:flex; align-items:center; gap:8px; padding:6px 8px 6px 11px; border-radius:6px;
       background:#EFF3F0; margin-bottom:5px; font-size:13px}
  .log time{margin-left:auto; font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
  .log button{border:none; background:none; color:var(--ink-2); font-size:16px; line-height:1;
        cursor:pointer; padding:2px 5px; border-radius:4px}
  .log button:hover{background:#DDE4E0; color:#8C2F1F}
  .log button:focus-visible{outline:2px solid var(--malt); outline-offset:1px}
  .undo{display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px 12px;
        border-radius:6px; background:var(--ink); color:#fff; font-size:12.5px}
  .undo button{margin-left:auto; border:1px solid rgba(255,255,255,.5); background:none; color:#fff;
        font:inherit; font-size:12px; padding:3px 11px; border-radius:5px; cursor:pointer}
  .links{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12.5px}
  .links a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
  /* SNSアイコン。ブランドカラーの丸ボタン。下線なし(hfoot/links の a 下線を打ち消す) */
  .snsicon{display:inline-flex; align-items:center; justify-content:center;
        width:28px; height:28px; border-radius:50%; color:#fff;
        text-decoration:none!important; flex:none; filter:saturate(1.05)}
  /* .hfoot a / .links a の方が詳細度が高く色を上書きしてしまうため、
     同等以上の詳細度で白文字を明示し直す(でないとFacebook/Xの文字が
     var(--ink)の暗い色で描画され、背景色に埋もれて読めなくなる) */
  .hfoot .snsicon, .links .snsicon{color:#fff}
  .snsicon .glyph{font-weight:800; font-size:13px; line-height:1; font-style:normal; color:inherit}
  .snsicon:hover{filter:brightness(1.1)}
  .sns-instagram{background:radial-gradient(circle at 30% 110%,
        #fdf497 0%, #fdf497 8%, #fd5949 45%, #d6249f 65%, #285aeb 95%)}
  .sns-x{background:#0a0a0a}
  .sns-facebook{background:#1877f2}
  .sns-threads{background:#101010}
  .sns-link{background:var(--ink-2)}
  .offsite{color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-size:12px}
  .close{position:absolute; top:12px; right:12px; border:none; background:none; font-size:20px;
        line-height:1; color:var(--ink-2); cursor:pointer; padding:4px 8px}
  .warn{font-size:12px; color:var(--ink-2); margin:10px 0 0; line-height:1.5}
  .leaflet-tooltip.poly{background:rgba(22,36,31,.92); border:none; color:#fff; font-size:12px;
        padding:5px 9px; box-shadow:none}
  .leaflet-tooltip.poly::before{display:none}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  /* ── モーダル共通(ビール登録・チェックインのポップアップ) ── */
  .modal{position:fixed; inset:0; z-index:900; display:flex; align-items:flex-end; justify-content:center}
  .modal[hidden]{display:none}
  .modalbg{position:absolute; inset:0; background:rgba(10,8,6,.6)}
  .modalclose{border:none; background:none; color:inherit; font-size:20px; line-height:1;
        cursor:pointer; padding:4px 8px; opacity:.7}
  .modalclose:hover{opacity:1}

  /* ── フローティングの+ボタン ── */
  .fab{position:fixed; right:22px; bottom:22px; z-index:850; width:56px; height:56px;
        border-radius:50%; border:none; background:#F2C230; color:#20180C; font-size:28px;
        font-weight:700; line-height:1; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.28);
        display:flex; align-items:center; justify-content:center}
  .fab:hover{background:#FFD23F}
  .fab:active{transform:scale(.96)}
  .fab[aria-expanded=true]{transform:rotate(45deg)}
  /* ＋から開く2択メニュー。ボタンの上に積み上がる */
  .fabmenu{position:fixed; right:22px; bottom:88px; z-index:860; display:flex;
        flex-direction:column; gap:8px; align-items:flex-end}
  .fabmenu[hidden]{display:none}
  .fabmenu button{text-align:right; padding:11px 16px; border-radius:12px; border:1px solid var(--line);
        background:var(--paper); color:var(--ink); font:inherit; cursor:pointer;
        box-shadow:0 6px 20px rgba(22,36,31,.18); min-width:200px}
  .fabmenu button:hover{background:var(--malt-soft); border-color:var(--malt)}
  .fabmenu button b{display:block; font-size:13.5px; font-weight:700}
  .fabmenu button span{display:block; font-size:11px; color:var(--ink-2); margin-top:3px}

  /* ── 詳細ページ(ブルワリー情報・ビール情報のモーダル) ── */
  #brewModal,#beerModal{
    --dt-stout:#1E1811; --dt-panel:#261E15; --dt-line:rgba(245,237,220,.13);
    --dt-foam:#F5EDDC; --dt-dim:rgba(245,237,220,.52); --dt-amber:#E8A33D; --dt-hop:#7A9A4E;
  }
  .detailsheet{position:relative; z-index:1; width:100%; max-width:480px; margin:0 auto;
        max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
        background:var(--dt-stout); color:var(--dt-foam);
        font-family:var(--font-body);
        border-radius:20px 20px 0 0}
  .dtbar{height:42px; flex:none; display:flex; align-items:center; justify-content:space-between;
        padding:0 20px; font-size:12.5px; color:var(--dt-dim); border-bottom:1px solid var(--dt-line)}
  .dtbody{flex:1; overflow-y:auto; padding:18px 20px 40px}

  /* 見出し */
  .dthead{display:flex; gap:13px; align-items:flex-start; padding-bottom:16px;
        border-bottom:1px solid var(--dt-line)}
  .dthead .logo,.dthead .mono{width:52px; height:52px; border-radius:11px; flex:none}
  .dthead .mono{display:grid; place-items:center; font-size:17px; font-weight:900; color:#fff}
  .dthead h2{font-size:18px; font-weight:900; line-height:1.35}
  .dthead .sub{font-size:11.5px; color:var(--dt-dim); margin-top:4px; line-height:1.6}
  .dthead .tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
  .dthead .tags span{font-size:10px; padding:2px 8px; border-radius:999px;
        background:var(--dt-panel); border:1px solid var(--dt-line); color:var(--dt-dim)}
  .dthead .tags span.on{background:rgba(232,163,61,.18); color:var(--dt-amber);
        border-color:rgba(232,163,61,.3)}

  /* 自分の記録のまとめ */
  .dtmine{display:flex; gap:7px; margin-top:16px}
  .dtmine div{flex:1; background:var(--dt-panel); border:1px solid var(--dt-line);
        border-radius:10px; padding:10px 6px; text-align:center}
  .dtmine b{display:block; font-size:17px; font-weight:900; color:var(--dt-amber); line-height:1;
        font-variant-numeric:tabular-nums}
  .dtmine span{display:block; font-size:9.5px; color:var(--dt-dim); margin-top:5px}

  .dtsec{margin-top:24px}
  .dtsec h3{font-size:12.5px; font-weight:700; margin-bottom:10px}
  .dtsec dl{display:grid; grid-template-columns:78px 1fr; gap:8px 12px; font-size:13px;
        line-height:1.55; margin:0}
  .dtsec dt{color:var(--dt-dim); font-size:11.5px}
  .dtsec dd{margin:0}
  .dtsec dd a{color:var(--dt-foam); text-decoration:underline; text-underline-offset:3px}
  .dtsec .none{font-size:12px; color:var(--dt-dim); line-height:1.8; margin:0}
  .dtsec .memo{font-size:11.5px; color:var(--dt-dim); line-height:1.8; margin:0;
        background:var(--dt-panel); border:1px solid var(--dt-line); border-radius:10px;
        padding:11px 13px}

  /* ビールの一覧(ブルワリー情報の中) */
  .beerlist{display:flex; flex-direction:column; gap:7px}
  .beerlist button{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
        padding:11px 13px; border-radius:10px; background:var(--dt-panel);
        border:1px solid var(--dt-line); color:var(--dt-foam); font:inherit; font-size:13px;
        cursor:pointer}
  .beerlist button:hover{border-color:var(--dt-amber)}
  .beerlist .bn{flex:1; min-width:0}
  .beerlist .bc{font-size:10.5px; color:var(--dt-amber); font-weight:700; flex:none}
  .beerlist .bs{font-size:10px; color:var(--dt-dim); display:block; margin-top:3px}

  /* 自分の記録の履歴(ビール情報の中) */
  .dtlogs{display:flex; flex-direction:column; gap:7px}
  .dtlogs .row{display:flex; align-items:center; gap:10px; font-size:12.5px;
        padding:9px 0; border-bottom:1px solid var(--dt-line)}
  .dtlogs .row:last-child{border-bottom:0}
  .dtlogs time{color:var(--dt-dim); font-size:11px; flex:none;
        font-variant-numeric:tabular-nums}
  .dtlogs .sc{margin-left:auto; color:var(--dt-amber); font-weight:700; flex:none;
        font-variant-numeric:tabular-nums}
  .dtlogs .edbtn{flex:none; background:none; border:1px solid var(--dt-line); border-radius:6px;
        color:var(--dt-dim); font:inherit; font-size:10.5px; padding:4px 9px; cursor:pointer;
        margin-left:8px}
  .dtlogs .edbtn:hover{border-color:var(--dt-amber); color:var(--dt-amber)}
  .dtlogs .cm{font-size:11.5px; color:var(--dt-dim); line-height:1.7; padding:0 0 9px}

  .dtcta{width:100%; margin-top:22px; padding:14px; border-radius:12px; border:0;
        background:var(--dt-amber); color:#20180C; font:inherit; font-size:14.5px;
        font-weight:900; cursor:pointer}
  .dtcta.ghost{background:transparent; color:var(--dt-dim); border:1px solid var(--dt-line);
        font-weight:500; font-size:13px; margin-top:10px}

  /* ── バッジ獲得の演出 ──
     チェックインを保存した直後に、新しく取れたバッジだけを順に見せる。 */
  .bgwrap{position:fixed; inset:0; z-index:1200; display:flex; align-items:center;
        justify-content:center; font-family:var(--font-body)}
  .bgwrap[hidden]{display:none}
  .bgbg{position:absolute; inset:0; background:rgba(10,8,6,.82);
        animation:bgFade .3s ease both}
  @keyframes bgFade{from{opacity:0}to{opacity:1}}
  .bgstage{position:relative; z-index:1; text-align:center; padding:0 32px; max-width:420px}

  .bgcard{animation:bgIn .55s cubic-bezier(.2,.9,.3,1.2) both}
  @keyframes bgIn{
    from{opacity:0; transform:scale(.6) translateY(24px)}
    to{opacity:1; transform:scale(1) translateY(0)}}

  .bglabel{font-size:12px; font-weight:700; letter-spacing:.24em; color:#E8A33D;
        margin-bottom:22px; animation:bgLabel .5s .1s ease both}
  @keyframes bgLabel{from{opacity:0; letter-spacing:.5em}to{opacity:1; letter-spacing:.24em}}

  /* メダル。後光が回りながら脈打つ */
  .bgmedal{width:132px; height:132px; margin:0 auto 26px; position:relative;
        border-radius:50%; display:grid; place-items:center;
        background:radial-gradient(circle at 36% 30%,#F8CE7A 0%,#E8A33D 46%,#B4761A 100%);
        box-shadow:0 0 0 9px rgba(232,163,61,.14), 0 20px 50px rgba(232,163,61,.3)}
  .bgmedal::before{content:""; position:absolute; inset:-30px; border-radius:50%;
        background:conic-gradient(from 0deg, transparent 0 62%, rgba(248,206,122,.5) 72%,
                   transparent 82% 100%);
        animation:bgSpin 2.4s linear infinite}
  .bgmedal i{font-style:normal; font-size:52px; line-height:1; position:relative; z-index:1}
  @keyframes bgSpin{to{transform:rotate(360deg)}}

  /* はじける粒 */
  .bgspark{position:absolute; top:50%; left:50%; width:7px; height:7px; border-radius:50%;
        background:#F8CE7A; opacity:0; pointer-events:none}
  .bgspark.go{animation:bgBurst .85s ease-out forwards}
  @keyframes bgBurst{
    0%{opacity:1; transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}}

  .bgname{font-size:25px; font-weight:900; color:#F5EDDC; line-height:1.4;
        animation:bgUp .5s .25s ease both}
  .bgdesc{font-size:13px; color:rgba(245,237,220,.62); line-height:1.8; margin-top:12px;
        animation:bgUp .5s .35s ease both}
  @keyframes bgUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

  .bgcount{font-size:11.5px; color:rgba(245,237,220,.4); margin-top:22px;
        font-variant-numeric:tabular-nums; animation:bgUp .5s .45s ease both}
  .bgnext{margin-top:26px; padding:13px 34px; border-radius:12px; border:0; cursor:pointer;
        background:#E8A33D; color:#20180C; font:inherit; font-size:14.5px; font-weight:900;
        animation:bgUp .5s .5s ease both}

  @media (prefers-reduced-motion:reduce){
    .bgcard,.bglabel,.bgname,.bgdesc,.bgcount,.bgnext{animation:none}
    .bgmedal::before{animation:none}
    .bgspark{display:none}
  }


  /* ── ★(お気に入り) ── */
  .starbtn{flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--dt-line);
        background:var(--dt-panel); color:rgba(245,237,220,.28); font-size:19px; line-height:1;
        cursor:pointer; align-self:flex-start}
  .starbtn.on{color:#F2C230; border-color:rgba(242,194,48,.45); background:rgba(242,194,48,.12)}
  .starbtn:hover{border-color:#F2C230}
  .starwhy{font-size:11px; color:#F2C230; margin-top:10px; font-weight:700}
  .beerlist .bstar{color:#F2C230; font-size:12px; flex:none}
  /* 一覧の行に出る★ */
  .istar{font-style:normal; color:#F2C230; font-size:11px; margin-right:4px}
  /* 地図の絞り込みボタン */
  .starfilter{flex:none; width:32px; height:30px; border-radius:7px; border:1px solid var(--line);
        background:#fff; color:#CBD5D0; font-size:14px; line-height:1; cursor:pointer}
  .starfilter[aria-pressed=true]{background:#F2C230; border-color:#F2C230; color:#20180C}
  /* ★付きのピンは縁を金色にして、1047軒の中で目立たせる */
  .pin.starred{border-color:#F2C230!important; box-shadow:0 1px 4px rgba(0,0,0,.4),0 0 0 2px rgba(242,194,48,.35)}

  /* ── 記録の編集(モーダル) ── */
  #editModal{
    --dt-stout:#1E1811; --dt-panel:#261E15; --dt-line:rgba(245,237,220,.13);
    --dt-foam:#F5EDDC; --dt-dim:rgba(245,237,220,.52); --dt-amber:#E8A33D;
  }
  .edsec{margin-top:22px}
  .edsec>label{display:block; font-size:12.5px; font-weight:700; margin-bottom:9px;
        color:var(--dt-foam)}
  .edsec>label em{font-style:normal; color:var(--dt-dim); font-size:11px;
        font-weight:400; margin-left:6px}
  #editModal input,#editModal textarea{width:100%; padding:12px 13px; border-radius:10px;
        background:var(--dt-panel); border:1px solid var(--dt-line); color:var(--dt-foam);
        font-size:14.5px; font-family:inherit}
  #editModal textarea{resize:none; height:76px; line-height:1.65}
  #editModal input:focus,#editModal textarea:focus{outline:2px solid var(--dt-amber);
        outline-offset:1px; border-color:transparent}
  #editModal input::placeholder,#editModal textarea::placeholder{color:rgba(245,237,220,.3)}
  #editModal .chips{display:flex; flex-wrap:wrap; gap:7px}
  #editModal .chip{padding:8px 13px; border-radius:999px; cursor:pointer;
        background:var(--dt-panel); border:1px solid var(--dt-line); color:var(--dt-foam);
        font-size:12.5px; font-family:inherit}
  #editModal .chip[aria-pressed=true]{background:var(--dt-amber); border-color:var(--dt-amber);
        color:#20180C; font-weight:700}
  /* 評価グラス(チェックインと同じ操作感) */
  .edrate{width:74px; height:150px; margin:0 auto; position:relative; cursor:grab;
        touch-action:none; clip-path:polygon(11% 0,89% 0,80% 100%,20% 100%);
        background:rgba(245,237,220,.055)}
  .edrate:active{cursor:grabbing}
  .edrate:focus-visible{outline:2px solid var(--dt-amber); outline-offset:4px}
  .edpour{position:absolute; left:0; right:0; bottom:0; height:0;
        background:linear-gradient(180deg,#F2BC5D,#D0891F); transition:height .12s linear}
  .edpour::after{content:""; position:absolute; top:-8px; left:0; right:0; height:15px;
        background:#F8F1DF; border-radius:50% 50% 40% 40%}
  .edtick{position:absolute; left:0; right:0; height:1px; background:rgba(245,237,220,.14)}
  .edscore{text-align:center; margin-top:13px}
  .edscore b{font-size:27px; font-weight:900; letter-spacing:-.02em}
  .edscore b i{font-style:normal; font-size:14px; color:var(--dt-dim); font-weight:500; margin-left:3px}
  .edscore button{display:block; margin:9px auto 0; background:none; border:0;
        color:var(--dt-dim); font:inherit; font-size:11.5px; cursor:pointer;
        text-decoration:underline; text-underline-offset:3px}
  /* 削除ボタンだけ色を分ける */
  #edDelete{color:#C4726A; border-color:rgba(196,114,106,.35)}

  /* ── チェックイン(モーダル) ──
     配色・演出は別モックからの移植。--chk- 接頭辞にして他と衝突しないようにする。
     .field/.combo/.sug/.chips 等のクラス名は #registerview 側と共通なので、
     #checkinModal のスコープでも同じ見た目になるよう並行して定義する。 */
  #checkinModal{
    --chk-night:#14100C; --chk-stout:#1E1811; --chk-panel:#261E15; --chk-panel-hi:#332818;
    --chk-line:rgba(245,237,220,.13); --chk-foam:#F5EDDC; --chk-foam-dim:rgba(245,237,220,.52);
    --chk-amber:#E8A33D; --chk-hop:#7A9A4E; --chk-citrus:#E5C13B; --chk-malt:#A8703C; --chk-dark:#6E5B8A;
  }
  .modalsheet{position:relative; z-index:1; width:100%; max-width:480px; margin:0 auto;
        max-height:92vh; display:flex; flex-direction:column;
        background:var(--chk-stout); color:var(--chk-foam);
        font-family:var(--font-body);
        border-radius:20px 20px 0 0; overflow:hidden}
  .chkbar{height:40px; flex:none; display:flex; align-items:center; justify-content:space-between;
        padding:0 20px; font-size:13px; font-weight:700; color:var(--chk-foam);
        border-bottom:1px solid var(--chk-line)}
  .chkbody{flex:1; overflow-y:auto; padding:16px 20px 40px}
  .chkstep{display:none}
  .chkstep.on{display:block}

  /* 写真ステップ。登録画面の .view と同じ役割だがスコープが別なので個別に定義 */
  #checkinModal .ckview{position:relative; height:min(62vh,460px); margin:0 -20px;
        background:radial-gradient(120% 80% at 50% 42%,#2E2419,#120E0A 70%);
        display:flex; align-items:center; justify-content:center}
  #checkinModal .bglass{width:96px; height:176px; position:relative;
        clip-path:polygon(14% 0,86% 0,74% 100%,26% 100%);
        background:rgba(245,237,220,.09); box-shadow:0 20px 46px rgba(0,0,0,.6)}
  #checkinModal .bglass i{position:absolute; left:0; right:0; bottom:0; height:76%;
        background:linear-gradient(180deg,#F2BC5D,#C97F1C)}
  #checkinModal .bglass i::after{content:""; position:absolute; top:-11px; left:0; right:0;
        height:21px; background:#F8F1DF; border-radius:50% 50% 40% 40%}
  #checkinModal .frame{position:absolute; inset:76px 40px 128px;
        border:1.5px solid rgba(232,163,61,.5); border-radius:6px; pointer-events:none}
  #checkinModal .frame span{position:absolute; width:16px; height:16px; border:2.5px solid var(--chk-amber)}
  #checkinModal .frame span:nth-child(1){top:-2px; left:-2px; border-right:0; border-bottom:0}
  #checkinModal .frame span:nth-child(2){top:-2px; right:-2px; border-left:0; border-bottom:0}
  #checkinModal .frame span:nth-child(3){bottom:-2px; left:-2px; border-right:0; border-top:0}
  #checkinModal .frame span:nth-child(4){bottom:-2px; right:-2px; border-left:0; border-top:0}
  #checkinModal .hint{position:absolute; top:34px; left:0; right:0; text-align:center;
        font-size:13.5px; text-shadow:0 2px 10px #000}
  #checkinModal .hint em{display:block; font-style:normal; font-size:11.5px;
        color:var(--chk-foam-dim); margin-top:6px}
  #checkinModal .shutter{position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
        width:62px; height:62px; border-radius:50%; border:3px solid var(--chk-foam);
        background:transparent; cursor:pointer; display:grid; place-items:center}
  #checkinModal .shutter b{width:46px; height:46px; border-radius:50%; background:var(--chk-amber); display:block}
  #checkinModal .skip{position:absolute; bottom:44px; right:22px; font-size:12.5px;
        color:var(--chk-foam-dim); background:none; border:0; cursor:pointer; font-family:inherit}
  #checkinModal .pickfile{position:absolute; bottom:44px; left:22px; font-size:12.5px;
        color:var(--chk-foam-dim); background:none; border:0; cursor:pointer; font-family:inherit;
        text-decoration:underline; text-underline-offset:3px}
  #checkinModal .shotimg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        max-width:58%; max-height:52%; border-radius:10px; object-fit:contain;
        box-shadow:0 18px 44px rgba(0,0,0,.6)}
  #checkinModal .shotimg[hidden]{display:none}
  #checkinModal .picked{font-size:11.5px; color:var(--chk-hop); margin-top:8px; display:none}
  /* カタログに登録済みの情報の表示。チェックイン・ビール登録の両方で使う */
  .dthead .tags span.major{background:rgba(120,150,200,.2); color:#9BB6DB;
        border-color:rgba(120,150,200,.35)}
  .majornote{font-size:11.5px; color:var(--dt-dim); line-height:1.8; margin-top:20px;
        padding:12px 14px; border-radius:10px; background:var(--dt-panel);
        border:1px solid var(--dt-line)}
  #checkinModal .known,#registerview .known{margin-top:11px; padding:12px 14px; border-radius:11px;
        background:rgba(232,163,61,.08); border:1px solid rgba(232,163,61,.25)}
  #checkinModal .known[hidden],#registerview .known[hidden]{display:none}
  #checkinModal .known dl,#registerview .known dl{display:grid; grid-template-columns:72px 1fr;
        gap:6px 12px; font-size:12.5px; line-height:1.5; margin:0}
  #checkinModal .known dt,#registerview .known dt{color:var(--chk-foam-dim); font-size:11.5px}
  #registerview .known dt{color:var(--reg-foam-dim)}
  #checkinModal .known dd,#registerview .known dd{margin:0}
  #checkinModal .known .kt,#registerview .known .kt{font-size:11px; font-weight:700;
        color:var(--chk-amber); margin-bottom:9px; letter-spacing:.02em}
  #registerview .known .kt{color:var(--reg-amber)}
  #checkinModal .picked.on{display:block}
  #checkinModal .field[hidden]{display:none}

  #checkinModal .field{margin-top:22px}
  #checkinModal .field:first-child{margin-top:0}
  #checkinModal .field>label{display:block; font-size:13px; font-weight:700; margin-bottom:9px}
  #checkinModal .field>label em{font-style:normal; color:var(--chk-foam-dim); margin-left:6px;
        font-size:11px; font-weight:400}
  #checkinModal .note{font-size:11.5px; color:var(--chk-foam-dim); margin:9px 0 9px; line-height:1.6}
  #checkinModal input[type=text],#checkinModal textarea{width:100%; padding:13px 14px; border-radius:11px;
        background:var(--chk-panel); border:1px solid var(--chk-line); color:var(--chk-foam);
        font-size:14.5px; font-family:inherit}
  #checkinModal textarea{resize:none; height:80px; line-height:1.65}
  #checkinModal input:focus,#checkinModal textarea:focus{outline:2px solid var(--chk-amber);
        outline-offset:1px; border-color:transparent}
  #checkinModal input::placeholder,#checkinModal textarea::placeholder{color:rgba(245,237,220,.3)}

  #checkinModal .combo{position:relative}
  #checkinModal .sug{list-style:none; position:absolute; z-index:9; top:calc(100% + 6px); left:0; right:0;
        background:var(--chk-panel); border:1px solid var(--chk-line); border-radius:12px;
        overflow:hidden; display:none; box-shadow:0 14px 32px rgba(0,0,0,.55); max-height:260px; overflow-y:auto}
  #checkinModal .sug.on{display:block}
  #checkinModal .sug li{padding:12px 14px; cursor:pointer; display:flex; align-items:center; gap:10px;
        border-bottom:1px solid var(--chk-line)}
  #checkinModal .sug li:last-child{border-bottom:0}
  #checkinModal .sug li:hover,#checkinModal .sug li.cur{background:var(--chk-panel-hi)}
  #checkinModal .sug .txt{flex:1; min-width:0}
  #checkinModal .sug .txt b{display:block; font-size:14.5px; font-weight:700}
  #checkinModal .sug .txt b mark{background:none; color:var(--chk-amber)}
  #checkinModal .sug .txt span{display:block; font-size:11.5px; color:var(--chk-foam-dim); margin-top:3px}
  #checkinModal .sug .tagm{font-size:10px; font-weight:700; padding:3px 7px; border-radius:5px; flex:none}
  #checkinModal .tagm.near{background:rgba(232,163,61,.18); color:var(--chk-amber)}
  #checkinModal .sug li.mk{background:rgba(232,163,61,.09)}
  #checkinModal .sug li.mk .txt b{color:var(--chk-amber)}

  #checkinModal .chips{display:flex; flex-wrap:wrap; gap:8px}
  #checkinModal .chip{padding:9px 14px; border-radius:999px; cursor:pointer; background:var(--chk-panel);
        border:1px solid var(--chk-line); color:var(--chk-foam); font-size:13.5px; font-family:inherit;
        display:inline-flex; align-items:center; gap:7px}
  #checkinModal .chip .dot{width:9px; height:9px; border-radius:50%; flex:none}
  #checkinModal .chip[aria-pressed=true]{background:var(--chk-amber); border-color:var(--chk-amber);
        color:#20180C; font-weight:700}
  #checkinModal .chip.sm{font-size:12.5px; padding:7px 12px}
  /* 候補チップの末尾。まだ他に候補があることを示す */
  #checkinModal .more{font-size:11px; color:var(--chk-foam-dim); align-self:center; padding-left:3px}

  #checkinModal .cta{width:100%; padding:16px; border-radius:13px; border:0; cursor:pointer;
        background:var(--chk-amber); color:#20180C; font-size:15.5px; font-weight:900;
        font-family:inherit; margin-top:22px}
  #checkinModal .cta:disabled{background:var(--chk-panel); color:rgba(245,237,220,.28); cursor:not-allowed}
  #checkinModal .cta.ghost{background:transparent; color:var(--chk-foam-dim); font-weight:500;
        font-size:13.5px; margin-top:12px; padding:10px}

  #checkinModal .notfound{font-size:12px; color:var(--chk-foam-dim); margin-top:10px; line-height:1.7}
  #checkinModal .notfound button{display:block; margin-top:6px; background:none; border:none;
        color:var(--chk-amber); font:inherit; font-size:12.5px; text-decoration:underline;
        cursor:pointer; padding:0}

  #checkinModal .who{display:flex; gap:13px; align-items:center; padding-bottom:16px;
        border-bottom:1px solid var(--chk-line); margin-bottom:4px}
  #checkinModal .who .thumb{width:44px; height:44px; border-radius:11px; flex:none;
        background:linear-gradient(140deg,#4A3A24,#7A5E2E); display:grid; place-items:center;
        font-size:15px; font-weight:900; color:var(--chk-amber)}
  #checkinModal .who h3{font-size:15px; font-weight:900; line-height:1.35}
  #checkinModal .who p{font-size:11.5px; color:var(--chk-foam-dim); margin-top:3px}

  /* 評価グラス(ドラッグして5点満点) */
  #checkinModal .rateblock{padding:6px 0 8px; text-align:center}
  #checkinModal .rateblock>p{font-size:13.5px; color:var(--chk-foam-dim); margin-bottom:18px}
  #checkinModal .rateblock .opt{font-style:normal; font-size:11px; margin-left:7px;
        padding:2px 7px; border-radius:999px; background:var(--chk-panel);
        border:1px solid var(--chk-line)}
  #checkinModal .rate{width:88px; height:190px; margin:0 auto; position:relative; cursor:grab; touch-action:none;
        clip-path:polygon(11% 0,89% 0,80% 100%,20% 100%); background:rgba(245,237,220,.055)}
  #checkinModal .rate:active{cursor:grabbing}
  #checkinModal .rate:focus-visible{outline:2px solid var(--chk-amber); outline-offset:4px}
  #checkinModal .pour{position:absolute; left:0; right:0; bottom:0; height:0;
        background:linear-gradient(180deg,#F2BC5D,#D0891F); transition:height .12s linear}
  #checkinModal .pour::after{content:""; position:absolute; top:-9px; left:0; right:0; height:17px;
        background:#F8F1DF; border-radius:50% 50% 40% 40%}
  #checkinModal .rate .tick{position:absolute; left:0; right:0; height:1px; background:rgba(245,237,220,.14)}
  #checkinModal .rate .b{position:absolute; bottom:10px; width:5px; height:5px; border-radius:50%;
        background:rgba(255,255,255,.45); animation:ckrise 2.8s linear infinite}
  #checkinModal .rate .b:nth-child(3){left:22px; animation-delay:.6s}
  #checkinModal .rate .b:nth-child(4){left:44px; animation-delay:1.4s; width:4px; height:4px}
  #checkinModal .rate .b:nth-child(5){left:60px; animation-delay:2.2s}
  @keyframes ckrise{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(-140px);opacity:0}}
  #checkinModal .score{margin-top:16px}
  #checkinModal .score b{font-size:34px; font-weight:900; letter-spacing:-.02em; line-height:1}
  #checkinModal .score b i{font-style:normal; font-size:16px; color:var(--chk-foam-dim); font-weight:500; margin-left:3px}
  #checkinModal .score span{display:block; font-size:14px; font-weight:700; color:var(--chk-amber); margin-top:8px; min-height:20px}

  /* 完了画面 */
  #checkinModal .ckdone{display:none; text-align:center; padding-top:10px}
  #checkinModal .ckdone.on{display:block}
  #checkinModal .medal{width:100px; height:100px; margin:0 auto; border-radius:50%; position:relative;
        background:radial-gradient(circle at 38% 32%,#F8CE7A 0%,#E8A33D 44%,#B4761A 100%);
        display:grid; place-items:center; box-shadow:0 0 0 7px rgba(232,163,61,.12),0 14px 34px rgba(232,163,61,.22)}
  #checkinModal .medal i{font-style:normal; font-size:30px; font-weight:900; color:#20180C; line-height:1}
  #checkinModal .medal i small{display:block; font-size:10px; font-weight:700; margin-top:2px; letter-spacing:.05em}
  #checkinModal .ckdone h2{font-size:19px; font-weight:900; margin-top:18px; line-height:1.5; color:var(--chk-foam)}
  #checkinModal .ckdone>p{font-size:12.5px; color:var(--chk-foam-dim); margin-top:8px; line-height:1.7}
  #checkinModal .ckdone .stats{display:flex; gap:8px; margin-top:20px}
  #checkinModal .ckdone .stat{flex:1; background:var(--chk-panel); border:1px solid var(--chk-line);
        border-radius:12px; padding:12px 6px}
  #checkinModal .ckdone .stat b{display:block; font-size:19px; font-weight:900; color:var(--chk-amber)}
  #checkinModal .ckdone .stat span{display:block; font-size:10px; color:var(--chk-foam-dim); margin-top:4px}
  #checkinModal .ckdone .cta{width:100%; padding:15px; border-radius:13px; border:0; cursor:pointer;
        background:var(--chk-amber); color:#20180C; font-size:14.5px; font-weight:900; font-family:inherit}
  #checkinModal .ckdone .cta.ghost{background:transparent; color:var(--chk-foam-dim); font-weight:500;
        border:1px solid var(--chk-line); margin-top:10px}

  /* ── 統計(タブ) ──
     記録がなくても見られるページ。配色はマイページと揃える。 */
  #statsview{
    --st-night:#14100C; --st-stout:#1E1811; --st-panel:#261E15;
    --st-line:rgba(245,237,220,.13); --st-foam:#F5EDDC; --st-dim:rgba(245,237,220,.52);
    --st-amber:#E8A33D;
    background:var(--st-night); justify-content:center; align-items:stretch;
  }
  #stPhone{position:relative; width:100%; max-width:480px; margin:0 auto;
        display:flex; flex-direction:column; overflow:hidden;
        background:var(--st-stout); color:var(--st-foam);
        font-family:var(--font-body)}
  .stbody{flex:1; overflow-y:auto; padding:18px 20px 44px}
  .sttop h2{font-size:20px; font-weight:900; line-height:1.4}
  .sttop p{font-size:11.5px; color:var(--st-dim); margin-top:7px; line-height:1.7;
        padding-bottom:16px}

  .stcards{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
  .stcard{background:var(--st-panel); border:1px solid var(--st-line); border-radius:11px;
        padding:11px 4px; text-align:center}
  .stcard b{display:block; font-size:18px; font-weight:900; color:var(--st-amber); line-height:1;
        font-variant-numeric:tabular-nums}
  .stcard span{display:block; font-size:9.5px; color:var(--st-dim); margin-top:5px}

  .sttabs{display:flex; gap:5px; background:var(--st-panel); border-radius:11px; padding:4px;
        margin:20px 0 14px}
  .sttabs button{flex:1; padding:8px 2px; border:0; border-radius:8px; background:transparent;
        color:var(--st-dim); font-family:inherit; font-size:12px; font-weight:700; cursor:pointer}
  .sttabs button[aria-selected=true]{background:var(--st-amber); color:#20180C}

  /* ランキング(横棒つき) */
  .strank{display:flex; flex-direction:column; gap:9px}
  .strow{font-size:12.5px}
  .strow .hd{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
  .strow .no{width:20px; flex:none; text-align:right; color:var(--st-dim); font-size:11px;
        font-variant-numeric:tabular-nums}
  .strow .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .strow .vl{flex:none; color:var(--st-amber); font-weight:700; font-variant-numeric:tabular-nums}
  .strow .vl em{font-style:normal; font-size:10px; color:var(--st-dim); margin-left:2px}
  .strow .tr{height:5px; border-radius:99px; background:var(--st-panel); overflow:hidden;
        margin-left:28px}
  .strow .fl{height:100%; border-radius:99px; background:linear-gradient(90deg,#F2CE68,#D0891F)}

  /* スタイル一覧 */
  .stfam{display:flex; justify-content:space-between; align-items:baseline;
        font-size:12px; font-weight:700; color:var(--st-amber); margin:18px 0 8px;
        padding-bottom:6px; border-bottom:1px solid var(--st-line)}
  .stfam:first-child{margin-top:0}
  .stfam em{font-style:normal; font-weight:400; color:var(--st-dim); font-size:10.5px}
  .stlist{display:flex; flex-direction:column; gap:1px}
  .strow2{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:6px 0;
        border-bottom:1px solid rgba(245,237,220,.05)}
  .strow2 .sn{flex:1; min-width:0}
  .strow2 .sn em{font-style:normal; display:block; font-size:10px; color:var(--st-dim);
        margin-top:2px}
  .strow2 .sa{flex:none; font-size:10.5px; color:var(--st-dim);
        font-variant-numeric:tabular-nums}
  .strow2 .sc2{flex:none; min-width:24px; text-align:right; font-size:11.5px;
        font-weight:700; color:var(--st-amber); font-variant-numeric:tabular-nums}
  /* 登録があるスタイルは名前を明るく */
  .strow2.has .sn{color:var(--st-foam); font-weight:700}
  .strow2:not(.has) .sn{color:var(--st-dim)}

  .stsec{margin-top:28px}
  .stsec h3{font-size:13px; font-weight:700; margin-bottom:12px}
  .stnote{font-size:11px; color:var(--st-dim); margin-top:10px; line-height:1.7}
  #statsview .bars{display:flex; flex-direction:column; gap:11px}
  #statsview .bar{font-size:12px}
  #statsview .bar .lb{display:flex; justify-content:space-between; margin-bottom:5px}
  #statsview .bar .lb em{font-style:normal; color:var(--st-dim); font-variant-numeric:tabular-nums}
  #statsview .bar .tr{height:7px; border-radius:99px; background:var(--st-panel); overflow:hidden}
  #statsview .bar .fl{height:100%; border-radius:99px;
        background:linear-gradient(90deg,#F2CE68,#D0891F)}

  /* 豆知識 */
  .facts{display:flex; flex-direction:column; gap:9px}
  .fact{background:var(--st-panel); border:1px solid var(--st-line); border-radius:11px;
        padding:13px 15px; font-size:12.5px; line-height:1.8}
  .fact b{color:var(--st-amber); font-weight:900}

  /* ── マイページ(タブ) ──
     記録一覧と同じ配色を使う。--me- 接頭辞で独立させる。 */
  #meview{
    --me-night:#14100C; --me-stout:#1E1811; --me-panel:#261E15;
    --me-line:rgba(245,237,220,.13); --me-foam:#F5EDDC; --me-dim:rgba(245,237,220,.52);
    --me-amber:#E8A33D; --me-hop:#7A9A4E;
    background:var(--me-night); justify-content:center; align-items:stretch;
  }
  #mePhone{position:relative; width:100%; max-width:480px; margin:0 auto;
        display:flex; flex-direction:column; overflow:hidden;
        background:var(--me-stout); color:var(--me-foam);
        font-family:var(--font-body)}
  .mebody{flex:1; overflow-y:auto; padding:18px 20px 44px}
  .metop h2{font-size:21px; font-weight:900; padding-bottom:14px}

  .mecards{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
  .mecard{background:var(--me-panel); border:1px solid var(--me-line); border-radius:11px;
        padding:11px 4px; text-align:center}
  .mecard b{display:block; font-size:19px; font-weight:900; color:var(--me-amber); line-height:1;
        font-variant-numeric:tabular-nums}
  .mecard span{display:block; font-size:9.5px; color:var(--me-dim); margin-top:5px}

  /* 記録一覧への導線 */
  .melog{display:flex; align-items:center; gap:12px; width:100%; margin-top:14px;
        padding:15px 16px; border-radius:12px; background:var(--me-panel);
        border:1px solid var(--me-line); color:var(--me-foam); font:inherit;
        text-align:left; cursor:pointer}
  .melog:hover{border-color:var(--me-amber)}
  .melog b{flex:1; font-size:14px; font-weight:700}
  .melog b span{display:block; font-weight:400; font-size:11px; color:var(--me-dim); margin-top:4px}
  .melog span{flex:1; font-size:11px; color:var(--me-dim)}
  .melog i{font-style:normal; font-size:19px; color:var(--me-amber); flex:none}

  .mesec{margin-top:26px}
  .mesec h3{font-size:13px; font-weight:700; margin-bottom:12px}
  .menote{font-size:11.5px; color:var(--me-dim); margin:-6px 0 12px; line-height:1.7}

  /* 地理の進捗バー */
  .bars{display:flex; flex-direction:column; gap:11px}
  .bar{font-size:12px}
  .bar .lb{display:flex; justify-content:space-between; margin-bottom:5px}
  .bar .lb em{font-style:normal; color:var(--me-dim); font-variant-numeric:tabular-nums}
  .bar .tr{height:7px; border-radius:99px; background:var(--me-panel); overflow:hidden}
  .bar .fl{height:100%; border-radius:99px;
        background:linear-gradient(90deg,#F2CE68,#D0891F); transition:width .5s ease}

  /* 展開できるバー */
  .bar.openable>.lb{cursor:pointer; user-select:none}
  .bar.openable>.lb:hover{color:var(--me-amber)}
  .bar .cv{font-style:normal; display:inline-block; width:12px; color:var(--me-amber);
        transition:transform .2s ease}
  .bar.on .cv{transform:rotate(90deg)}
  .drill{margin-top:11px; padding:11px 12px; border-radius:10px; background:var(--me-panel);
        border:1px solid var(--me-line); max-height:320px; overflow-y:auto}
  .drill[hidden]{display:none}
  /* 内訳の見出し(地方名・都道府県名) */
  .dgrp{display:flex; justify-content:space-between; align-items:baseline;
        font-size:11px; font-weight:700; color:var(--me-amber); margin:12px 0 6px;
        padding-bottom:5px; border-bottom:1px solid var(--me-line)}
  .dgrp:first-child{margin-top:0}
  .dgrp em{font-style:normal; font-weight:400; color:var(--me-dim); font-size:10.5px;
        font-variant-numeric:tabular-nums}
  /* 内訳の1行 */
  .drow{display:flex; align-items:center; gap:9px; font-size:11.5px; padding:4px 0}
  .drow .dn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .drow .dn em{font-style:normal; color:var(--me-dim); font-size:10px; margin-left:6px}
  .drow .dtr{width:52px; flex:none; height:4px; border-radius:99px;
        background:rgba(245,237,220,.1); overflow:hidden}
  .drow .dtr i{display:block; height:100%; border-radius:99px;
        background:linear-gradient(90deg,#F2CE68,#D0891F)}
  .drow .dv{flex:none; width:46px; text-align:right; font-variant-numeric:tabular-nums;
        color:var(--me-foam)}
  .drow .dv em{font-style:normal; color:var(--me-dim); font-size:10px; margin-left:1px}
  /* 制覇した行は琥珀、未記録の行は沈める */
  .drow.done .dn{color:var(--me-amber); font-weight:700}
  .drow.done .dv{color:var(--me-amber); font-weight:700}
  .drow.zero{opacity:.42}
  .dnone,.dnote{font-size:11px; color:var(--me-dim); line-height:1.7; margin:10px 0 0}

  /* ランキング */
  .rank{display:flex; flex-direction:column; gap:8px}
  .rank .rw{display:flex; align-items:center; gap:10px; font-size:13px}
  .rank .no{width:18px; flex:none; text-align:right; color:var(--me-dim); font-size:11px;
        font-variant-numeric:tabular-nums}
  .rank .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .rank .ct{flex:none; font-size:11.5px; color:var(--me-amber); font-weight:700;
        font-variant-numeric:tabular-nums}
  .rank .sub{font-size:10.5px; color:var(--me-dim); margin-left:4px}
  .rank .empty{font-size:12px; color:var(--me-dim); line-height:1.8}

  /* バッジ */
  .badgehead{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
  .badgehead h3{margin:0}
  .badgehead h3 span{font-weight:400; color:var(--me-dim); font-size:11.5px; margin-left:7px;
        font-variant-numeric:tabular-nums}
  .badgehead button{background:none; border:0; color:var(--me-amber); font:inherit;
        font-size:11.5px; cursor:pointer; padding:4px}
  .badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:9px}
  /* 説明文の行数がバッジごとに違うため、そのままだと背の低いカードの
     中身が上に寄ってしまう。縦フレックスにして中身を上下中央に置く。 */
  .bg{background:var(--me-panel); border:1px solid var(--me-line); border-radius:11px;
        padding:14px 8px; text-align:center;
        display:flex; flex-direction:column; align-items:center; justify-content:center}
  .bg .ic{width:38px; height:38px; margin:0 0 8px; flex:none; border-radius:50%; display:grid;
        place-items:center; font-size:17px;
        background:radial-gradient(circle at 36% 30%,#F8CE7A,#E8A33D 46%,#B4761A)}
  .bg .nm{font-size:11px; font-weight:700; line-height:1.4}
  .bg .ds{font-size:9.5px; color:var(--me-dim); margin-top:5px; line-height:1.5}
  /* 未取得はくすませる。何が要るかは見せて動機にする */
  .bg.locked{opacity:.44}
  .bg.locked .ic{background:var(--me-panel); border:1px dashed var(--me-line); color:var(--me-dim)}
  .bg .pg{font-size:9.5px; color:var(--me-amber); margin-top:5px; font-variant-numeric:tabular-nums}

  /* 問い合わせリンク */
  .melinks{display:flex; flex-direction:column; gap:8px}
  .melinks a{display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:11px;
        background:var(--me-panel); border:1px solid var(--me-line); color:var(--me-foam);
        text-decoration:none; font-size:13px}
  .melinks a:hover{border-color:var(--me-amber)}
  .melinks a b{flex:1; font-weight:700}
  .melinks a span{font-size:10.5px; color:var(--me-dim)}
  .melinks a i{font-style:normal; color:var(--me-amber)}

  /* ── 記録一覧(タブ) ──
     記録一覧と同じ配色を使う。--hist- 接頭辞で他と衝突しないようにする。 */
  #historyview{
    --hist-night:#14100C; --hist-stout:#1E1811; --hist-panel:#261E15;
    --hist-line:rgba(245,237,220,.13); --hist-foam:#F5EDDC; --hist-foam-dim:rgba(245,237,220,.52);
    --hist-amber:#E8A33D; --hist-hop:#7A9A4E; --hist-citrus:#E5C13B; --hist-malt:#A8703C; --hist-dark:#6E5B8A;
    background:var(--hist-night); justify-content:center; align-items:stretch;
  }
  #histPhone{position:relative; width:100%; max-width:480px; margin:0 auto;
        display:flex; flex-direction:column; overflow:hidden;
        background:var(--hist-stout); color:var(--hist-foam);
        font-family:var(--font-body)}
  .histbody{flex:1; overflow-y:auto; padding:18px 20px 40px}
  .histtop{display:flex; align-items:center; justify-content:space-between; padding-bottom:10px}
  .histback{background:none; border:0; color:var(--hist-amber); font-family:inherit;
        font-size:13px; cursor:pointer; padding:4px 0}
  .histh2{font-size:21px; font-weight:900; padding-bottom:14px}
  .histtop button{background:none; border:0; color:var(--hist-amber); font-family:inherit;
        font-size:12.5px; cursor:pointer; padding:4px}
  #historyview .sum{display:flex; gap:8px; margin-bottom:16px}
  #historyview .sum div{flex:1; background:var(--hist-panel); border:1px solid var(--hist-line);
        border-radius:12px; padding:11px 6px; text-align:center}
  #historyview .sum b{display:block; font-size:19px; font-weight:900; color:var(--hist-amber); line-height:1}
  #historyview .sum span{display:block; font-size:10px; color:var(--hist-foam-dim); margin-top:5px}
  .histtabs{display:flex; gap:6px; background:var(--hist-panel); border-radius:11px; padding:4px; margin-bottom:18px}
  .histtabs button{flex:1; padding:9px; border:0; border-radius:8px; background:transparent;
        color:var(--hist-foam-dim); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer}
  .histtabs button[aria-selected=true]{background:var(--hist-amber); color:#20180C}

  #historyview .day{display:flex; align-items:center; gap:10px; margin:20px 0 12px;
        font-size:12px; color:var(--hist-foam-dim)}
  #historyview .day:first-of-type{margin-top:4px}
  #historyview .day::after{content:""; flex:1; height:1px; background:var(--hist-line)}
  #historyview .day b{font-weight:700; color:var(--hist-foam); font-size:13px}

  .rec{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--hist-line); align-items:flex-start}
  .rec:last-child{border-bottom:0}
  .pic{width:60px; height:60px; border-radius:12px; flex:none; position:relative; overflow:hidden;
        background:radial-gradient(110% 90% at 50% 34%,#33271A,#17110B 76%);
        display:flex; align-items:flex-end; justify-content:center}
  .gl{position:relative; clip-path:polygon(14% 0,86% 0,74% 100%,26% 100%); background:rgba(245,237,220,.1)}
  .gl i{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#F2BC5D,#C97F1C)}
  .gl i::after{content:""; position:absolute; top:-4px; left:0; right:0; height:8px;
        background:#F8F1DF; border-radius:50% 50% 40% 40%}
  .pic .gl{width:28px; height:46px; margin-bottom:-7px}
  .pic .gl i{height:74%}
  .rmain{flex:1; min-width:0}
  .rmain h3{font-size:15px; font-weight:700; line-height:1.35}
  .rmain p{font-size:11.5px; color:var(--hist-foam-dim); margin-top:4px}
  .tg{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
  .tg span{font-size:10.5px; padding:3px 8px; border-radius:999px; background:var(--hist-panel);
        border:1px solid var(--hist-line); display:inline-flex; align-items:center; gap:5px}
  .tg span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--hist-citrus)}
  .tg span.h::before{background:var(--hist-hop)}
  .tg span.m::before{background:var(--hist-malt)}
  .tg span.d::before{background:var(--hist-dark)}
  .rsc{flex:none; text-align:center; width:34px}
  .rsc .gl{width:20px; height:36px; margin:0 auto}
  .rsc b{display:block; font-size:12.5px; font-weight:900; margin-top:6px; color:var(--hist-amber)}
  .hedit{display:block; margin-top:7px; background:none; border:1px solid var(--hist-line);
        border-radius:5px; color:var(--hist-foam-dim); font:inherit; font-size:9.5px;
        padding:3px 6px; cursor:pointer; width:100%}
  .hedit:hover{border-color:var(--hist-amber); color:var(--hist-amber)}

  .shelf{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
  .tile{position:relative; text-align:left}
  .tile .pic{width:100%; height:92px; border-radius:12px}
  .tile .gl{width:36px; height:60px; margin-bottom:-9px}
  .tile .gl i{height:76%}
  .tile h4{font-size:11.5px; font-weight:700; margin-top:7px; line-height:1.4;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .tile p{font-size:10px; color:var(--hist-foam-dim); margin-top:3px}
  .cups{position:absolute; top:6px; right:6px; background:rgba(20,16,12,.78);
        border:1px solid rgba(232,163,61,.4); color:var(--hist-amber); font-size:10px;
        font-weight:900; padding:3px 7px; border-radius:999px}
  #historyview .empty{text-align:center; padding:44px 0; color:var(--hist-foam-dim);
        font-size:13px; line-height:1.9}

  /* しぼりこみシート */
  .histsheetwrap{position:absolute; inset:0; z-index:5}
  .histsheetwrap[hidden]{display:none}
  #historyview .dimbg{position:absolute; inset:0; background:rgba(10,8,6,.6)}
  #historyview .sheet{position:absolute; left:0; right:0; bottom:0; background:var(--hist-stout);
        border-top:1px solid var(--hist-line); border-radius:22px 22px 0 0; padding:20px 20px 24px;
        box-shadow:0 -20px 50px rgba(0,0,0,.55); max-height:86%; overflow-y:auto}
  #historyview .grip{width:38px; height:4px; border-radius:2px; background:var(--hist-line); margin:0 auto 18px}
  #historyview .sheet h3{font-size:17px; font-weight:900; margin-bottom:18px}
  #historyview .fg{margin-bottom:20px}
  #historyview .fg label{display:block; font-size:12px; font-weight:700; margin-bottom:9px;
        color:var(--hist-foam-dim)}
  #historyview .chips{display:flex; flex-wrap:wrap; gap:7px}
  #historyview .chip{padding:8px 13px; border-radius:999px; cursor:pointer; background:var(--hist-panel);
        border:1px solid var(--hist-line); color:var(--hist-foam); font-size:12.5px; font-family:inherit}
  #historyview .chip[aria-pressed=true]{background:var(--hist-amber); border-color:var(--hist-amber);
        color:#20180C; font-weight:700}
  #historyview .cta{width:100%; padding:15px; border-radius:13px; border:0; cursor:pointer;
        background:var(--hist-amber); color:#20180C; font-size:15px; font-weight:900; font-family:inherit}

  /* ── ビール登録(モーダル) ──
     配色・演出は別モックからの移植。変数は --reg- 接頭辞にして地図側と衝突しないようにし、
     すべて #registerview の中だけで完結させる(グローバルの :root は汚さない)。 */
  #registerview{
    --reg-night:#14100C; --reg-stout:#1E1811; --reg-panel:#261E15; --reg-panel-hi:#332818;
    --reg-line:rgba(245,237,220,.13); --reg-foam:#F5EDDC; --reg-foam-dim:rgba(245,237,220,.52);
    --reg-amber:#E8A33D; --reg-hop:#7A9A4E; --reg-citrus:#E5C13B; --reg-malt:#A8703C; --reg-dark:#6E5B8A;
  }
  #regPhone{position:relative; z-index:1; width:100%; max-width:480px; margin:0 auto;
        max-height:92vh; display:flex; flex-direction:column;
        background:var(--reg-stout); color:var(--reg-foam);
        font-family:var(--font-body);
        border-radius:20px 20px 0 0; overflow:hidden}
  .regbar{height:40px; flex:none; display:flex; align-items:center; justify-content:space-between;
        padding:0 20px; font-size:12px; color:var(--reg-foam-dim); border-bottom:1px solid var(--reg-line)}
  .regbody{flex:1; overflow-y:auto; padding:16px 20px 40px}
  .regstep{display:none}
  .regstep.on{display:block}

  /* カメラ */
  #regCam .view{position:relative; height:min(62vh,460px); margin:0 -20px;
        background:radial-gradient(120% 80% at 50% 40%,#2E2419,#120E0A 70%);
        display:flex; align-items:center; justify-content:center}
  .can{width:96px; height:196px; border-radius:12px/16px;
       background:linear-gradient(100deg,#3B2F20,#5C4728 42%,#33291C); position:relative;
       box-shadow:0 18px 44px rgba(0,0,0,.6)}
  .can::before,.can::after{content:""; position:absolute; left:6px; right:6px; height:9px;
        background:#7C6B4E; border-radius:50%}
  .can::before{top:-4px} .can::after{bottom:-4px; background:#4A3D2B}
  .can i{position:absolute; inset:52px 0 auto; text-align:center; font-style:normal; font-size:22px;
        font-weight:900; color:var(--reg-amber); letter-spacing:.06em; line-height:1.25}
  .can i small{display:block; font-size:9px; font-weight:500; color:var(--reg-foam-dim);
        letter-spacing:.18em; margin-top:6px}
  .frame{position:absolute; inset:96px 40px 150px; border:1.5px solid rgba(232,163,61,.5);
        border-radius:6px; pointer-events:none}
  .frame span{position:absolute; width:16px; height:16px; border:2.5px solid var(--reg-amber)}
  .frame span:nth-child(1){top:-2px; left:-2px; border-right:0; border-bottom:0}
  .frame span:nth-child(2){top:-2px; right:-2px; border-left:0; border-bottom:0}
  .frame span:nth-child(3){bottom:-2px; left:-2px; border-right:0; border-top:0}
  .frame span:nth-child(4){bottom:-2px; right:-2px; border-left:0; border-top:0}
  #regCam .hint{position:absolute; top:52px; left:0; right:0; text-align:center; font-size:13.5px;
        text-shadow:0 2px 10px #000}
  #regCam .hint em{display:block; font-style:normal; font-size:11.5px; color:var(--reg-foam-dim);
        margin-top:6px}
  .shutter{position:absolute; bottom:44px; left:50%; transform:translateX(-50%); width:66px;
        height:66px; border-radius:50%; border:3px solid var(--reg-foam); background:transparent;
        cursor:pointer; display:grid; place-items:center}
  .shutter b{width:50px; height:50px; border-radius:50%; background:var(--reg-amber); display:block}
  .skip{position:absolute; bottom:60px; right:26px; font-size:12.5px; color:var(--reg-foam-dim);
        background:none; border:0; cursor:pointer; font-family:inherit}
  .pickfile{position:absolute; bottom:60px; left:26px; font-size:12.5px; color:var(--reg-foam-dim);
        background:none; border:0; cursor:pointer; font-family:inherit; text-decoration:underline;
        text-underline-offset:3px}
  /* 選んだ写真のプレビュー。缶のダミー絵と入れ替えて表示する */
  .shotimg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        max-width:60%; max-height:56%; border-radius:10px; object-fit:contain;
        box-shadow:0 18px 44px rgba(0,0,0,.6)}
  .shotimg[hidden]{display:none}

  /* グラスの進捗ゲージ */
  #registerview .gauge{display:flex; align-items:center; gap:14px; padding:14px 0 16px;
        border-bottom:1px solid var(--reg-line); margin-bottom:18px}
  #registerview .glass{width:46px; height:112px; flex:none; position:relative; overflow:hidden;
        clip-path:polygon(9% 0,91% 0,83% 100%,17% 100%); background:rgba(245,237,220,.055);
        border:none; border-radius:0}
  #registerview .beer{position:absolute; left:0; right:0; bottom:0; height:0;
        background:linear-gradient(180deg,#F2BC5D,#D0891F); transition:height .62s cubic-bezier(.24,.86,.3,1)}
  #registerview .beer::after{content:""; position:absolute; top:-7px; left:0; right:0; height:13px;
        background:#F8F1DF; border-radius:50% 50% 42% 42%}
  .bub{position:absolute; bottom:8px; width:4px; height:4px; border-radius:50%;
       background:rgba(255,255,255,.5); animation:regrise 2.6s linear infinite}
  .bub:nth-child(2){left:12px; animation-delay:.7s}
  .bub:nth-child(3){left:24px; animation-delay:1.5s; width:3px; height:3px}
  .bub:nth-child(4){left:32px; animation-delay:2.1s}
  @keyframes regrise{0%{transform:translateY(0);opacity:0}18%{opacity:.85}100%{transform:translateY(-84px);opacity:0}}
  .gtext b{display:block; font-size:15.5px; font-weight:700; line-height:1.45; color:var(--reg-foam)}
  .gtext span{display:block; font-size:12.5px; color:var(--reg-foam-dim); margin-top:5px; line-height:1.6}

  /* 入力項目 */
  #registerview .field{margin-bottom:22px}
  #registerview .field>label{display:block; font-size:13px; font-weight:700; margin-bottom:9px;
        color:var(--reg-foam)}
  #registerview .field>label em{font-style:normal; color:var(--reg-amber); margin-left:6px;
        font-size:11px; font-weight:500}
  #registerview .note{font-size:11.5px; color:var(--reg-foam-dim); margin:9px 0 9px; line-height:1.6}
  #registerview input[type=text]{width:100%; padding:13px 14px; border-radius:11px;
        background:var(--reg-panel); border:1px solid var(--reg-line); color:var(--reg-foam);
        font-size:15px; font-family:inherit}
  #registerview input[type=text]:focus{outline:2px solid var(--reg-amber); outline-offset:1px;
        border-color:transparent}
  #registerview input::placeholder{color:rgba(245,237,220,.3)}
  #registerview input:disabled{opacity:.45}

  #registerview .combo{position:relative}
  #registerview .sug{list-style:none; position:absolute; z-index:9; top:calc(100% + 6px); left:0;
        right:0; background:var(--reg-panel); border:1px solid var(--reg-line); border-radius:12px;
        overflow:hidden; display:none; box-shadow:0 14px 32px rgba(0,0,0,.55); max-height:260px;
        overflow-y:auto}
  #registerview .sug.on{display:block}
  #registerview .sug li{padding:12px 14px; cursor:pointer; display:flex; align-items:center; gap:10px;
        border-bottom:1px solid var(--reg-line)}
  #registerview .sug li:last-child{border-bottom:0}
  #registerview .sug li:hover,#registerview .sug li.cur{background:var(--reg-panel-hi)}
  #registerview .sug .txt{flex:1; min-width:0}
  #registerview .sug .txt b{display:block; font-size:14.5px; font-weight:700}
  #registerview .sug .txt b mark{background:none; color:var(--reg-amber)}
  #registerview .sug .txt span{display:block; font-size:11.5px; color:var(--reg-foam-dim); margin-top:3px}
  #registerview .sug .tagm{font-size:10px; font-weight:700; padding:3px 7px; border-radius:5px; flex:none}
  #registerview .tagm.far{background:rgba(245,237,220,.1); color:var(--reg-foam-dim)}
  #registerview .tagm.near{background:rgba(232,163,61,.18); color:var(--reg-amber)}
  #registerview .tagm.mine{background:rgba(122,154,78,.2); color:#A5C878}
  #registerview .sug li.mk{background:rgba(232,163,61,.09)}
  #registerview .sug li.mk .txt b{color:var(--reg-amber)}
  #registerview .picked{font-size:11.5px; color:var(--reg-hop); margin-top:8px; display:none}
  #registerview .picked.on{display:block}

  #registerview .chips{display:flex; flex-wrap:wrap; gap:8px}
  #registerview .chip{padding:9px 14px; border-radius:999px; cursor:pointer; background:var(--reg-panel);
        border:1px solid var(--reg-line); color:var(--reg-foam); font-size:13.5px; font-family:inherit;
        display:inline-flex; align-items:center; gap:7px; transition:background .18s,border-color .18s,color .18s}
  #registerview .chip:focus-visible{outline:2px solid var(--reg-amber); outline-offset:2px}
  #registerview .chip .dot{width:9px; height:9px; border-radius:50%; flex:none}
  #registerview .chip[aria-pressed=true]{background:var(--reg-amber); border-color:var(--reg-amber);
        color:#20180C; font-weight:700}
  #registerview .chip.sm{font-size:12.5px; padding:7px 12px}
  #registerview .more{font-size:11px; color:var(--reg-foam-dim); align-self:center; padding-left:3px}

  #registerview .divider{display:flex; align-items:center; gap:12px; margin:26px 0 20px;
        color:var(--reg-foam-dim); font-size:12.5px}
  #registerview .divider::before,#registerview .divider::after{content:""; flex:1; height:1px;
        background:var(--reg-line)}

  #registerview .cta{width:100%; padding:16px; border-radius:13px; border:0; cursor:pointer;
        background:var(--reg-amber); color:#20180C; font-size:15.5px; font-weight:900;
        font-family:inherit; margin-top:6px}
  #registerview .cta:disabled{background:var(--reg-panel); color:rgba(245,237,220,.28); cursor:not-allowed}
  #registerview .cta.ghost{background:transparent; color:var(--reg-foam-dim); font-weight:500;
        font-size:13.5px; margin-top:12px; padding:10px}

  /* 完了画面 */
  #registerview .done{display:none; padding-top:26px; text-align:center}
  #registerview .done.on{display:block}
  #registerview .done h2{font-size:21px; font-weight:900; line-height:1.5}
  #registerview .done p{font-size:13px; color:var(--reg-foam-dim); margin-top:10px; line-height:1.75}
  #registerview .tally{margin-top:16px; font-size:14px; font-weight:700}
  #registerview .tally b{color:var(--reg-amber); font-size:20px; font-weight:900}

  /* ── タブ切り替え(地図 / 記録する) ── */
  .tabbar{display:flex; gap:0; background:var(--ink); flex:none}
  .tabbar button{flex:1; padding:11px 4px; font:inherit; font-size:12.5px; font-weight:700;
        border:none; background:none; color:rgba(255,255,255,.55); cursor:pointer;
        border-bottom:2.5px solid transparent}
  .tabbar button[aria-selected=true]{color:#fff; border-bottom-color:var(--malt)}
  .screen{display:none; height:calc(100vh - 40px); height:calc(100dvh - 40px)}
  /* 画面ごとに元の display 種別を保つ(地図は grid、記録画面は flex)。
     クラスだけで display:flex に統一すると、.wrap の display:grid を
     詳細度で上書きしてしまい地図の2カラムレイアウトが崩れるため、
     id で明示して確実に勝たせる。 */
  #mapview.on{display:grid}
  #historyview.on{display:flex}
  #meview.on{display:flex}
  #statsview.on{display:flex}

  /* ── MapLibre に載せ替えたことによる調整 ── */
  /* Leaflet ではピンの大きさを変える時に margin で中心を合わせていたが、
     MapLibre は要素の中心で位置を決めるので margin は不要 */
  .maplibregl-marker.pin, .maplibregl-marker.pin.selected{margin:0!important}
  .here-dot{border-radius:50%; background:#fff; border:3px solid #2E6FB7; box-shadow:0 1px 4px rgba(0,0,0,.35)}
  .maplibregl-ctrl-group{border-radius:8px}

  /* ライト/ダークの切り替え */
  .verify:has(.modeseg){padding:4px}
  .modeseg{display:grid; grid-template-columns:auto auto auto; gap:2px; background:var(--card);
        border:1px solid var(--line); border-radius:8px; padding:3px}
  .modeseg button{width:32px; height:28px; padding:0; border:0; border-radius:6px; display:grid;
        place-items:center; background:transparent; color:var(--ink-2); cursor:pointer}
  .modeseg button svg{display:block}
  .modeseg button[aria-checked="true"]{background:var(--ink); color:var(--paper); font-weight:700}
  .modeseg button:focus-visible{outline:2px solid var(--malt); outline-offset:1px}

  /* ── ダークモード。サイドバーと地図まわりの色を差し替える ── */
  :root{--card:#fff}
  [data-mode="dark"]{
    --sea:#141918; --paper:#1A201F; --ink:#E3E9E6; --ink-2:#9AA7A1; --line:#34403C;
    --malt:#D9A04A; --malt-soft:#3A3122; --hop:#7FB06A; --quiet:#6F7E78; --card:#222927;
    color-scheme:dark;
  }
  [data-mode="dark"] .crumb button, [data-mode="dark"] .pick, [data-mode="dark"] .search input,
  [data-mode="dark"] .chip, [data-mode="dark"] .tools select, [data-mode="dark"] .tools button,
  [data-mode="dark"] .hfoot .det, [data-mode="dark"] .note, [data-mode="dark"] .detail-cta,
  [data-mode="dark"] .verify{background:var(--card); color:var(--ink)}
  [data-mode="dark"] .starfilter{background:var(--card)}
  [data-mode="dark"] .pick.on, [data-mode="dark"] .chip[aria-pressed=true]{color:var(--paper)}
  [data-mode="dark"] .zoomhint{background:rgba(26,32,31,.92); color:var(--ink); border-color:var(--line)}
  [data-mode="dark"] .tabbar{background:#0E1211}
  [data-mode="dark"] .glass{background:#101514; border-color:var(--ink-2)}
  [data-mode="dark"] .maplibregl-ctrl-group{background:#222927}
  [data-mode="dark"] .maplibregl-ctrl-group button+button{border-top-color:#34403C}
  [data-mode="dark"] .maplibregl-ctrl-icon{filter:invert(1) hue-rotate(180deg)}
  [data-mode="dark"] .maplibregl-ctrl-attrib{background:rgba(26,32,31,.82); color:#9AA7A1}
  [data-mode="dark"] .maplibregl-ctrl-attrib a{color:#C9D2CE}

  /* ポップアップ・選択カードの★ */
  .hstar,.cstar{margin-left:auto; flex:none; align-self:flex-start; width:30px; height:30px; padding:0;
        border-radius:50%; border:1px solid var(--line); background:var(--card); color:#C4CDC9;
        font-size:15px; line-height:1; cursor:pointer}
  .hstar.on,.cstar.on{color:#F2C230; border-color:rgba(242,194,48,.55); background:rgba(242,194,48,.12)}
  .hstar:hover,.cstar:hover{border-color:#F2C230}
  .hstar:focus-visible,.cstar:focus-visible{outline:2px solid var(--malt); outline-offset:2px}
  .starwhy2{font-size:11px; font-weight:700; color:#C99A12; margin-top:6px}
  [data-mode="dark"] .starwhy2{color:#F2C230}

  /* ポップアップの主要銘柄。杯数と「ほか◯種」 */
  .hbeers span em{font-style:normal; font-size:10px; font-weight:700; color:var(--malt); margin-left:5px;
        font-variant-numeric:tabular-nums}
  .hbeers span.more{background:none; border-color:transparent; color:var(--ink-2); padding-left:2px}

  /* ポップアップの下部。リンクの行とボタンの行に分け、ボタンは折り返さずに横に並べる */
  .hfoot{flex-direction:column; align-items:stretch; gap:9px}
  .hfoot .hlinks{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .hfoot .hlinks:empty{display:none}
  .hfoot .hacts{display:flex; gap:8px}
  .hfoot .hacts button{flex:1; margin-left:0; white-space:nowrap; text-align:center}
  .onsite{display:inline-block; font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px;
        background:rgba(232,163,61,.18); color:#E8A33D; margin-left:4px; vertical-align:1px}
  /* ラインナップの小見出し(定番・季節限定・限定醸造) */
  .lgh{margin:14px 0 6px; font-size:12px; font-weight:700; color:inherit; opacity:.75}
  .lgh:first-child{margin-top:0}
  .lgh span{font-weight:500; opacity:.7}
  /* 地図を独立した重なりの層にする。選択中のピンの z-index(1000)が
     Check in などの画面(900)を突き抜けないよう、地図の中だけで比べさせる */
  #map{isolation:isolate}

/* ── 記録一覧の1行(指示書07)。タイムラインのカードと同じ作り ── */
#historyview .rec .pic{
  width:76px; height:76px; flex:none; border-radius:12px; overflow:hidden;
  background:#20180F; display:block;
}
#historyview .rec .pic img{ width:100%; height:100%; object-fit:cover; display:block; }
#historyview .rec .pic svg{ display:block; }
#historyview .rec .rmain{ flex:1; min-width:0; }
#historyview .rec .rrate{
  display:block; font-size:17px; color:#E8A33D; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.2;
}
#historyview .rec .rmain h3{ margin:1px 0 2px; font-size:15px; line-height:1.4; }

/* マイページの右上の歯車(設定へ) */
.metop{ display:flex; align-items:center; gap:10px; }
.metop h2{ flex:1; min-width:0; }
.megear{ width:40px; height:40px; display:grid; place-items:center;
  color:var(--hist-foam-dim, #A89C8A); text-decoration:none; border-radius:10px; }
.megear:hover{ background:rgba(255,255,255,.06); }

/* ブルワリー情報のいちばん下の「この掲載について」 */
.dtform{ display:block; margin:18px 0 4px; font-size:12.5px; color:var(--hist-foam-dim,#A89C8A);
  text-decoration:underline; text-underline-offset:3px; }


/* ── 板の安全(2026-09-25)。× と戻るは必ず最前面で、すぐ反応する ── */
.modalclose, #chkClose, .regclose, [data-back] {
  position: relative; z-index: 60; touch-action: manipulation;
}
/* 閉じている候補の一覧が、見えないまま押す邪魔をしないように */
.sug:not(.on) { display: none !important; pointer-events: none !important; }


/* ══ 打っている間の画面(見本 3_checkin_register/Typing.html) ══ */
.cktype{ position:fixed; left:0; right:0; top:0; height:100vh; z-index:3000;
  display:flex; flex-direction:column; background:#1E1811; color:#F5EDDC;
  font-family:var(--font-body); }
.cktype[hidden]{ display:none; }
.ctbar{ flex:none; display:flex; align-items:center; gap:8px; padding:12px 12px 12px 14px;
  border-bottom:1px solid #3B3228; }
.ctfield{ flex:1; display:flex; align-items:center; gap:9px; height:48px; padding:0 14px;
  border-radius:13px; background:#261E15; border:1.5px solid #E8A33D; color:#A89C8A; margin:0; }
.ctfield input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:#F5EDDC;
  font:inherit; font-size:16px; padding:0; }
.ctcancel{ flex:none; height:44px; padding:0 10px; border:0; background:transparent; color:#E8A33D;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; touch-action:manipulation; }
.ctbody{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ctcap{ margin:12px 16px 6px; font-size:11.5px; font-weight:700; color:#A89C8A; }
.ctlist{ border-top:1px solid #3B3228; }
.ctrow{ width:100%; display:flex; align-items:center; gap:11px; padding:12px 14px; border:0;
  border-bottom:1px solid #3B3228; background:transparent; color:#F5EDDC; font:inherit;
  text-align:left; cursor:pointer; touch-action:manipulation; -webkit-appearance:none; appearance:none; }
.ctrow.mine{ background:rgba(232,163,61,.08); }
.ctrow.cur, .ctrow:hover{ background:rgba(232,163,61,.12); }
.ctthumb{ width:40px; height:40px; flex:none; border-radius:9px; overflow:hidden; background:#20180F;
  display:grid; place-items:center; }
.ctthumb svg{ display:block; width:100%; height:100%; }
.ctthumb.plus{ color:#E8A33D; font-size:20px; font-weight:700; }
.cttxt{ flex:1; min-width:0; }
.cttxt b{ display:block; font-size:14.5px; }
.cttxt b mark{ background:none; color:#E8A33D; }
.ctsub{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11.5px; color:#A89C8A; }
.ctlogo{ width:16px; height:16px; flex:none; border-radius:4px; background:#FFFFFF; overflow:hidden;
  display:grid; place-items:center; color:#20180C; font-size:9px; font-weight:700; }
.ctlogo img{ width:100%; height:100%; object-fit:contain; display:block; }
.cttag{ flex:none; font-size:10.5px; color:#E8A33D; font-weight:700; }
.ctnew b{ color:#E8A33D; }
/* 打っている間は、後ろの板や地図がスクロールしないように */
body.cktyping{ overflow:hidden; }
/* 板の中のビール欄は、押すための見た目だけ(打つのは上の層で) */
#ckbn[readonly]{ cursor:pointer; caret-color:transparent; }


/* ── 戻るの「‹」(見本の形)。画面の左上に ── */
.dtbar.backbar{ justify-content:flex-start; gap:4px; }
.dtbar.backbar > span{ flex:1; min-width:0; }
.modalback{ width:44px; height:44px; display:grid; place-items:center; border:0;
  background:transparent; color:inherit; cursor:pointer; touch-action:manipulation;
  margin-left:-10px; padding:0; }
.histback.modalback{ margin-left:-12px; }


/* ══ Check in の3段(見本 3_checkin_register/)。色・寸法は見本から写した ══ */
#checkinSheet{ display:flex; flex-direction:column; }
.ck3bar{ height:54px; flex:none; display:flex; align-items:center; gap:9px; padding:0 10px 0 16px;
  border-bottom:1px solid #3B3228; }
.ck3bar .cktitle{ flex:none; font-size:17px; color:#F5EDDC; white-space:nowrap; }
.ck3bar .cksub{ flex:1; min-width:0; font-size:12.5px; color:#A89C8A; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ckdots{ display:flex; gap:5px; align-items:center; flex:none; }
.ckdots i{ display:block; width:6px; height:6px; border-radius:3px; background:#463C31; }
.ckdots i.done{ background:#E8A33D; }
.ckdots i.now{ width:18px; background:#E8A33D; }
.ck3bar .modalclose{ width:40px; height:40px; display:grid; place-items:center; color:#A89C8A; }

.ck3step.on{ display:flex; flex-direction:column; min-height:0; }
.ck3body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 18px 18px; }
.ck3foot{ flex:none; padding:12px 18px 22px; border-top:1px solid #3B3228; background:inherit; }
.ck3foot.two{ display:flex; gap:10px; }
.ck3foot.two > *{ flex:1; }
.ck3foot.sticky{ position:sticky; bottom:0; margin:18px -18px -18px; background:#1E1811; }
.ck3ghost, .ck3amber, .ck3btn{ height:54px; border-radius:14px; font:inherit; font-size:15px;
  font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  touch-action:manipulation; -webkit-appearance:none; appearance:none; }
.ck3ghost{ border:1.5px solid #5E5145; background:transparent; color:#F5EDDC; }
.ck3ghost.wide{ width:100%; font-size:16px; }
.ck3amber{ border:0; background:#E8A33D; color:#20180C; }
.ck3ghost:disabled, .ck3amber:disabled{ opacity:.45; cursor:default; }

/* ① 写真 */
.ck3lead{ margin:0 0 16px; font-size:13px; color:#A89C8A; line-height:1.7; }
.ck3frame{ border-radius:18px; background:#261E15; border:1.5px dashed #3B3228; height:300px;
  display:grid; place-items:center; margin-bottom:16px; overflow:hidden; position:relative; }
.ck3framein{ text-align:center; color:#A89C8A; }
.ck3framein svg{ display:block; margin:0 auto; }
.ck3framein p{ margin:8px 0 0; font-size:12.5px; }
.ck3frame .shotimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ck3row{ display:flex; gap:10px; }
.ck3btn{ flex:1; height:52px; border:0; background:#261E15; color:#F5EDDC; font-size:14.5px; }

/* ② ビールと点数 */
.ck3h{ display:flex; align-items:baseline; gap:8px; margin:0 0 9px; }
.ck3h b{ font-size:14.5px; color:#F5EDDC; }
.ck3beer{ margin:0; }
.ck3beerrow{ width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:13px;
  border:1.5px solid #3B3228; background:#261E15; color:#F5EDDC; font:inherit; text-align:left;
  margin-bottom:10px; cursor:pointer; touch-action:manipulation; }
.ck3thumb{ width:44px; height:44px; flex:none; border-radius:10px; overflow:hidden; background:#2A2018; }
.ck3thumb svg{ display:block; width:100%; height:100%; }
.ck3txt{ flex:1; min-width:0; }
.ck3txt b{ display:block; font-size:16px; }
.ck3txt span{ display:block; margin-top:2px; font-size:12px; color:#A89C8A; }
.ck3change{ flex:none; font-size:12px; color:#8FC46A; }
#ckKnown{ display:none !important; }
.ck3div{ height:1px; background:#3B3228; margin:10px 0 16px; }
.ck3rate{ display:flex; flex-direction:row; align-items:center; gap:18px; }
.ck3rate .rate{ flex:none; }
.ck3rate .score{ flex:1; min-width:0; text-align:left; }
.ck3rate .score b#cknum{ font-size:42px; color:#F5EDDC; font-variant-numeric:tabular-nums; }
.ck3rate .score b#cknum i{ font-size:16px; color:#A89C8A; font-style:normal; margin-left:6px; }
.ck3rate #ckword{ display:block; margin-top:2px; font-size:15px; color:#E8A33D; font-weight:700; }
.ck3rhint{ margin:10px 0 0; font-size:11.5px; color:#A89C8A; line-height:1.7; }

/* ブルワリーの行(見本 Score.html) */
.bwrowx{ width:100%; display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:13px;
  border:1.5px solid #3B3228; background:#261E15; color:#F5EDDC; font:inherit; text-align:left;
  margin-bottom:10px; cursor:pointer; touch-action:manipulation; }
.bwrowx .bwlogo{ width:38px; height:38px; flex:none; border-radius:9px; background:#FFFFFF; overflow:hidden;
  display:grid; place-items:center; color:#20180C; font-size:14px; font-weight:700; }
.bwrowx .bwlogo img{ width:100%; height:100%; object-fit:contain; }
.bwrowx .bwt{ flex:1; min-width:0; }
.bwrowx .bwt small{ display:block; font-size:11px; color:#A89C8A; }
.bwrowx .bwt b{ display:block; margin-top:1px; font-size:14.5px; color:#8FC46A; }
.bwrowx .bwchev{ flex:none; color:#6E6255; display:grid; place-items:center; }

/* 完了(見本 Done.html) */
#checkinModal .ck3done.on{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center; min-height:100%; }
/* 完了は見本どおり見出しなし(画面の真ん中に) */
#checkinModal.ck3isdone .ck3bar{ display:none; }
.ck3doneicon{ width:96px; height:96px; border-radius:50%; background:rgba(232,163,61,.14);
  display:grid; place-items:center; color:#E8A33D; }
.ck3done h1{ margin:20px 0 0; font-size:24px; color:#F5EDDC; }
.ck3done > p#ckDoneSub{ margin:8px 0 0; font-size:13.5px; color:#A89C8A; }
.ck3bands{ width:100%; max-width:330px; margin:22px 0 0; display:flex; flex-direction:column; gap:10px; }
.ck3bands:empty{ display:none; }
.ck3band{ display:flex; align-items:center; gap:9px; padding:13px 14px; border-radius:13px;
  background:rgba(232,163,61,.10); color:#E8A33D; font-size:13.5px; text-align:left; }
.ck3band svg{ flex:none; }
.ck3donebtns{ width:100%; max-width:330px; margin-top:26px; display:flex; flex-direction:column; gap:10px; }
.ck3donebtns .ck3amber{ font-size:16.5px; }
.ck3donebtns .ck3ghost{ height:52px; font-size:15.5px; }
.ck3save{ margin:18px 0 0; font-size:11.5px; color:#A89C8A; min-height:1.4em; }

/* hidden を付けた部品は、display を指定していても必ず隠す */
#checkinModal [hidden], #ckType [hidden]{ display:none !important; }
/* 点数のグラスは見本の大きさ(112×164) */
.ck3rate .rate{ width:112px !important; height:164px !important; }
/* スマホでは画面いっぱいの板(指示書08 C-10) */
@media (max-width:768px){
  #checkinModal .modalsheet{ height:100vh !important; height:calc(100dvh - env(safe-area-inset-top,0px)) !important;
    max-height:none !important; border-radius:0 !important; }
  #checkinModal .chkbody{ flex:1; min-height:0; display:flex; flex-direction:column; }
}

/* 板の中は、段ごとに自分でスクロールする(下のボタンの帯を画面の下に固定するため) */
#checkinModal .chkbody{ padding:0 !important; overflow:hidden !important; display:flex;
  flex-direction:column; flex:1; min-height:0; }
#chkStepMore.on{ display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; padding:0; }
#chkDone.on{ flex:1; min-height:0; overflow-y:auto; }

/* 段は板の高さいっぱいに広げ、下のボタンの帯を画面のいちばん下に置く */
.ck3step.on{ flex:1; }

/* ③の「この一杯を残す」は、前からの .cta の余白を打ち消して 戻る と横に並べる */
.ck3foot .cta{ margin:0 !important; width:auto !important; height:54px; border-radius:14px; }
.ck3foot.sticky{ margin:18px -18px -18px; padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)); }

/* ③ くわしく(見本 Flavor.html) */
#chkStepMore .field{ margin:0 0 22px; }
#chkStepMore .field > label{ display:flex; align-items:baseline; gap:8px; margin:0 0 9px;
  font-size:14.5px; font-weight:700; color:#F5EDDC; }
#chkStepMore .field > label em{ font-style:normal; font-size:11.5px; font-weight:400; color:#A89C8A; margin:0; }
.ck3fhint{ margin:-4px 0 10px; font-size:12px; color:#A89C8A; }
.ck3fnote{ margin:-13px 2px 24px; font-size:11.5px; color:#A89C8A; }
#chkStepMore .chips{ display:flex; flex-wrap:wrap; gap:8px; }
#chkStepMore .chip{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; height:44px;
  padding:0 15px; border-radius:999px; border:1.5px solid #3B3228; background:transparent;
  color:#F5EDDC; font:inherit; font-size:14px; font-weight:500; margin:0; }
#chkStepMore .chip[aria-pressed=true]{ background:#E8A33D; border-color:transparent; color:#20180C; font-weight:700; }
#chkStepMore .chip .dot{ width:8px; height:8px; border-radius:50%; flex:none; margin:0; }
#chkStepMore .ck3fold .chip.ck3extra:not([aria-pressed=true]){ display:none; }
.ck3morechips{ align-self:center; border:0; background:transparent; color:#8FC46A; font:inherit;
  font-size:12.5px; padding:8px 4px; cursor:pointer; }
#chkStepMore input[type=text], #chkStepMore textarea{ width:100%; box-sizing:border-box; border-radius:12px;
  border:1.5px solid #3B3228; background:#261E15; color:#F5EDDC; font:inherit; font-size:16px; }
#chkStepMore input[type=text]{ height:50px; padding:0 14px; }
#chkStepMore textarea{ padding:12px 14px; line-height:1.7; min-height:0; height:auto; resize:vertical; }
.ck3onsite{ display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px;
  background:rgba(143,196,106,.12); color:#8FC46A; margin:0 0 18px; font-size:13px; }
.ck3onsite > span{ flex:1; }
.ck3onsite small{ display:block; margin-top:2px; font-size:11.5px; color:#9FB58A; }
#ckGo{ width:100% !important; }
#ckDots{ cursor:pointer; padding:10px 4px; }

/* 見出しの「‹」(②と③) */
.ck3back{ flex:none; width:36px; height:40px; margin-left:-10px; margin-right:-4px; display:grid;
  place-items:center; border:0; background:transparent; color:#F5EDDC; cursor:pointer;
  touch-action:manipulation; padding:0; }


/* ══ ビール登録の3段(見本 3_checkin_register/BeerNew*.html) ══ */
#regPhone{ max-width:480px; }
@media (min-width:769px){ #regPhone{ height:min(820px, 92vh); max-height:none; } }
@media (max-width:768px){
  #regPhone{ height:100vh !important; height:calc(100dvh - env(safe-area-inset-top,0px)) !important;
    max-height:none !important; border-radius:0 !important; }
}
#regPhone .regbar.ck3bar{ height:54px; padding:0 10px 0 16px; font-size:inherit; color:inherit;
  justify-content:flex-start; border-bottom:1px solid #3B3228; }
#regPhone .regbar .cktitle{ font-size:17px; color:#F5EDDC; }
#registerview [hidden]{ display:none !important; }
#regPhone .regbody{ padding:0; overflow:hidden; display:flex; flex-direction:column; flex:1; min-height:0; }
#registerview .regstep.on{ display:flex; flex-direction:column; flex:1; min-height:0; }
#registerview .ck3body{ padding:16px 18px 18px; }
#registerview .ck3foot .cta{ margin:0 !important; width:100% !important; height:54px; border-radius:14px;
  padding:0; font-size:16.5px; font-weight:700; }
#registerview .ck3foot .cta:disabled{ background:#E8A33D; color:#20180C; opacity:.45; }
#registerview .rg3frame{ height:268px; margin-bottom:14px; }
#registerview .shotimg{ position:static; transform:none; max-width:100%; max-height:100%; width:100%; height:100%;
  object-fit:cover; border-radius:0; box-shadow:none; }
.rg3info{ display:flex; gap:9px; padding:12px 13px; border-radius:12px; background:rgba(232,163,61,.08);
  color:#A89C8A; font-size:11.5px; line-height:1.75; margin-top:14px; }
.rg3info b{ color:#F5EDDC; }
.rg3infoic{ flex:none; color:#E8A33D; }
.rg3lead{ margin:0 0 16px; font-size:12.5px; color:#A89C8A; line-height:1.7; }
.rg3h{ display:flex; align-items:baseline; gap:8px; margin:0 0 9px; }
.rg3h b{ font-size:14.5px; color:#F5EDDC; }
.rg3h span{ font-size:11.5px; color:#A89C8A; }
#registerview .field{ margin-bottom:16px; }
#registerview input[type=text], #registerview textarea, #registerview input[type=month]{ height:50px; padding:0 14px;
  border-radius:12px; border:1.5px solid #3B3228; background:#261E15; color:#F5EDDC; font:inherit; font-size:16px;
  width:100%; box-sizing:border-box; }
#registerview textarea{ height:auto; padding:12px 14px; line-height:1.7; resize:vertical; }
#registerview .chips{ gap:8px; }
#registerview .chip{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; height:40px; padding:0 15px;
  border-radius:999px; border:1.5px solid #3B3228; background:transparent; color:#F5EDDC; font:inherit;
  font-size:14px; font-weight:500; }
#registerview .chip[aria-pressed=true]{ background:#E8A33D; border-color:transparent; color:#20180C; font-weight:700; }
#registerview .chip.sm{ height:34px; font-size:13px; padding:0 12px; }
.rg3quick{ margin-bottom:10px; }
.rg3more{ width:100%; height:46px; border-radius:12px; border:1.5px solid #3B3228; background:transparent;
  color:#8FC46A; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
#regStyleSearch{ margin-top:10px; }
.rg3div{ height:1px; background:#3B3228; margin:20px 0; }
.rg3sect{ margin:0 0 12px; font-size:12px; font-weight:700; color:#A89C8A; }
.rg3abv{ display:flex; align-items:center; gap:10px; }
#registerview .rg3abv input{ width:96px; }
.rg3abv span{ font-size:15px; color:#A89C8A; }
.rg3bwrow{ width:100%; display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:13px;
  border:1.5px solid #3B3228; background:#261E15; color:#F5EDDC; font:inherit; text-align:left; cursor:pointer; }
.rg3bwrow .bwlogo{ width:38px; height:38px; flex:none; border-radius:9px; background:#FFFFFF; display:grid;
  place-items:center; color:#8A7F70; font-size:15px; font-weight:700; overflow:hidden; }
.rg3bwrow .bwlogo img{ width:100%; height:100%; object-fit:contain; }
.rg3bwrow b{ flex:1; min-width:0; font-size:15px; color:#8FC46A; }
.rg3chev{ flex:none; color:#6E6255; display:grid; place-items:center; }
.rg3list{ background:#261E15; border:1px solid #3B3228; border-radius:13px; margin-bottom:18px; }   /* 候補の一覧がはみ出せるように、切らない */
.rg3opt{ width:100%; display:flex; align-items:center; gap:10px; padding:13px 14px; border:0;
  border-bottom:1px solid #3B3228; background:transparent; color:#F5EDDC; font:inherit; text-align:left; cursor:pointer; }
.rg3list > :last-child{ border-bottom:0; }
.rg3optt{ flex:1; min-width:0; }
.rg3optt b{ display:block; font-size:14px; font-weight:600; }
.rg3optt span{ display:block; margin-top:3px; font-size:12px; color:#6E6255; }
.rg3optt span.on{ color:#E8A33D; }
.rg3opt .rg3chev svg{ transition:transform .15s; }
.rg3opt.open .rg3chev svg{ transform:rotate(90deg); }
.rg3panel{ padding:4px 14px 14px; border-bottom:1px solid #3B3228; }
#regPanelHop .chips, #regPanelIng .chips{ margin-top:10px; }
.rg3sub{ margin-top:10px; }
#availSeason .chip{ height:36px; }
.rg3fnote{ margin:8px 2px 0; font-size:11.5px; color:#A89C8A; line-height:1.7; }
#registerview .done.ck3done.on{ display:flex; flex:1; min-height:0; overflow-y:auto; flex-direction:column;
  align-items:center; justify-content:center; padding:24px; text-align:center; }
#registerview .ck3done h1{ margin:20px 0 0; font-size:24px; color:#F5EDDC; }
#registerview .ck3done > p{ margin:8px 0 0; font-size:13.5px; color:#A89C8A; }
#registerview .ck3donebtns .ck3amber, #registerview .ck3donebtns .ck3ghost{ width:100%; }
#registerview.rg3isdone .regbar{ display:none; }
#regDots{ cursor:pointer; padding:10px 4px; }
/* 空いている項目を足す: もう埋まっている項目は隠す */
#registerview .rg3filled{ display:none !important; }
#registerview.rg3fill #regFormA .rg3lead, #registerview.rg3fill .rg3div,
#registerview.rg3fill .rg3sect{ display:none; }
/* 済んだ段の点(.done)は、前からの「完了画面を隠す」決まりに当たらないように */
#registerview .ckdots i.done{ display:block; padding:0; }


/* ══ ビール情報(見本 BeerInfo.html) ══ */
#beerSheet{ background:#1E1811; color:#F5EDDC; }
#beerModal [hidden]{ display:none !important; }
@media (max-width:768px){
  #beerSheet{ height:100vh !important; height:calc(100dvh - env(safe-area-inset-top,0px)) !important;
    max-height:none !important; border-radius:0 !important; }
}
#beerModal .dtbar{ height:54px; padding:0 10px 0 4px; border-bottom:1px solid #3B3228; }
#beerModal .dtbar > span{ font-size:16px; font-weight:700; color:#F5EDDC; }
#beerModal .modalback{ color:#E8A33D; margin-left:0; }
#beerModal .bimenu{ width:40px; height:40px; display:grid; place-items:center; color:#A89C8A; }
.bimenupop{ position:absolute; top:50px; right:12px; z-index:5; min-width:220px; background:#2A2118;
  border:1px solid #3B3228; border-radius:12px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.bimenupop button{ display:block; width:100%; text-align:left; padding:12px 12px; border:0; border-radius:8px;
  background:transparent; color:#F5EDDC; font:inherit; font-size:14px; cursor:pointer; }
.bimenupop button:hover{ background:#332818; }
#beerBody{ padding:16px 18px 24px; }
.bihead{ display:flex; gap:14px; margin-bottom:16px; }
.bipic{ width:104px; height:104px; flex:none; border-radius:14px; overflow:hidden; background:#2A2018;
  display:grid; place-items:center; }
.bipic img{ width:100%; height:100%; object-fit:cover; display:block; }
.bipic svg{ display:block; }
.bimain{ flex:1; min-width:0; }
.bimain h2{ margin:0; font-size:19px; line-height:1.4; color:#F5EDDC; font-weight:700; }
.bibrew{ display:flex; align-items:center; gap:7px; margin-top:6px; padding:0; border:0; background:none;
  font:inherit; font-size:13px; color:#8FC46A; text-align:left; cursor:pointer; }
.bilogo{ width:22px; height:22px; flex:none; border-radius:5px; background:#FFFFFF; display:grid; place-items:center;
  color:#8A7F70; font-size:11px; font-weight:700; overflow:hidden; }
.bilogo img{ width:100%; height:100%; object-fit:contain; }
.birate{ display:flex; align-items:baseline; gap:8px; margin-top:8px; }
.birate b{ font-size:20px; color:#E8A33D; }
.birate span{ font-size:11.5px; color:#A89C8A; }
.bibox{ background:#261E15; border:1px solid #3B3228; border-radius:14px; padding:14px; margin-bottom:14px; }
.biboxh{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.bibox .biboxh h3{ margin:0; font-size:13px; color:#A89C8A; font-weight:700; }
.bibox .biboxh span{ font-size:11px; color:#8FC46A; }
.bibox dl{ margin:0; display:grid; grid-template-columns:82px 1fr; gap:10px 12px; font-size:13.5px; }
.bibox dt{ color:#A89C8A; }
.bibox dd{ margin:0; color:#F5EDDC; }
.biof{ margin-left:4px; font-size:10.5px; padding:2px 7px; border-radius:999px; background:rgba(143,196,106,.16);
  color:#8FC46A; font-weight:700; white-space:nowrap; }
.bidesc{ margin:12px 0 0; font-size:13px; line-height:1.8; color:#F5EDDC; }
.bibox .none, .bimine .none{ margin:0; font-size:12.5px; color:#A89C8A; line-height:1.8; }
.bifill{ width:100%; height:44px; margin-top:14px; border-radius:12px; border:1.5px solid #3B3228; background:transparent;
  color:#F5EDDC; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.bireport{ width:100%; height:40px; margin-top:8px; border-radius:12px; border:0; background:transparent;
  color:#A89C8A; font:inherit; font-size:12.5px; cursor:pointer; }
.bimine .biboxh{ margin-bottom:4px; }
.bimine .biboxh h3{ margin:0; font-size:14px; color:#F5EDDC; font-weight:700; }
.bimine .biboxh span{ font-size:12.5px; color:#A89C8A; }
.birec{ width:100%; display:flex; gap:12px; padding:12px 0; border:0; border-bottom:1px solid #3B3228;
  background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.birecpic{ width:72px; height:72px; flex:none; border-radius:12px; overflow:hidden; }
.birecpic img{ width:100%; height:100%; object-fit:cover; display:block; }
.birecpic svg{ display:block; }
.birect{ flex:1; min-width:0; }
.birec1{ display:flex; align-items:baseline; gap:8px; }
.birec1 .r{ font-size:17px; color:#E8A33D; font-variant-numeric:tabular-nums; }
.birec1 .n{ flex:1; min-width:0; font-size:14.5px; color:#F5EDDC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.birec2{ display:block; margin-top:2px; font-size:12px; color:#8FC46A; }
.birec3{ display:block; margin-top:2px; font-size:11.5px; color:#A89C8A; }


/* ══ ブルワリーのロゴ(C-4)。白い四角の上。無ければ頭文字 ══ */
.lgbox{ flex:none; display:grid; place-items:center; overflow:hidden; background:#FFFFFF;
  color:#8A7F70; font-weight:700; line-height:1; width:26px; height:26px; border-radius:6px; font-size:12px; }
.lgbox img{ width:100%; height:100%; object-fit:contain; display:block; }
/* 明るい地(地図)では、白い四角の縁を見せる */
.item .lgbox, #card .lgbox, .hover .lgbox{ border:1px solid #D5DDD8; color:#9AA59F; }
.item .lgbox{ width:40px !important; height:40px !important; border-radius:10px !important; font-size:15px; }
#card .htop .lgbox{ width:52px; height:52px; border-radius:12px; font-size:19px; }
.mbrew .btop .lgbox{ width:52px; height:52px; border-radius:12px; font-size:19px; border:1px solid #D5DDD8; color:#9AA59F; }
.hover .htop .lgbox{ width:38px; height:38px; border-radius:9px; font-size:14px; }
.dthead .lgbox{ width:72px; height:72px; border-radius:16px; font-size:26px; }
#editHead .lgbox{ width:38px; height:38px; border-radius:9px; font-size:14px; }
.lgbox.lg16{ width:16px; height:16px; border-radius:4px; font-size:9px; color:#20180C; }
.sug li .lgbox.lg16{ margin-right:2px; }
/* Check in でブルワリーを選んだら、探す欄は隠してロゴ付きの行だけ */
#ckbwField.bwpicked .combo, #ckbwField.bwpicked #ckbwNear{ display:none; }


/* ── マイページ(見本 Main。C-6) ── */
#meview{ --me-panel:#261E15; --me-line:#3B3228; --me-dim:#A89C8A; --me-green:#8FC46A; --me-track:#33291F; }
#mePhone{ background:#1E1811; }
.mebody{ padding:14px 16px 44px; }
.metop h2{ font-size:20px; padding-bottom:6px; }

.mewho{ display:flex; align-items:center; gap:13px; padding:6px 0 14px; color:inherit; text-decoration:none; }
.mewho .av{ width:54px; height:54px; flex:none; border-radius:50%; background:#E8A33D; color:#20180C;
  display:grid; place-items:center; font-weight:700; font-size:21px; overflow:hidden; }
.mewho .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.mewho .tx{ flex:1; min-width:0; }
.mewho .tx > b{ display:block; font-size:18px; }
.mewho .tx > span{ display:block; margin-top:2px; font-size:12.5px; color:var(--me-dim); }
.mewho .tx > span + span{ margin-top:4px; font-size:12px; }
.mewho .tx > span b{ color:#F5EDDC; }
.meguest{ padding:4px 0 14px; font-size:13px; color:var(--me-dim); line-height:1.7; }
.meguest span{ display:flex; gap:8px; margin-top:8px; }
.meguest a{ flex:1; text-align:center; padding:10px; border-radius:12px; border:1px solid var(--me-line);
  color:#F5EDDC; text-decoration:none; font-weight:700; font-size:13.5px; }
.meguest a.pri{ background:#E8A33D; border-color:#E8A33D; color:#20180C; }

.menums{ display:flex; gap:8px; padding:12px 0; border-top:1px solid var(--me-line); border-bottom:1px solid var(--me-line); }
.menums div{ flex:1; min-width:0; text-align:center; }
.menums b{ display:block; font-size:20px; color:#E8A33D; font-variant-numeric:tabular-nums; line-height:1.25; }
.menums span{ display:block; margin-top:2px; font-size:11px; color:var(--me-dim); }

.melink{ display:flex; align-items:center; gap:12px; width:100%; margin-top:8px; padding:14px;
  border-radius:14px; background:var(--me-panel); border:1px solid var(--me-line); color:#F5EDDC;
  font:inherit; text-align:left; cursor:pointer; touch-action:manipulation; }
.melink:first-of-type, #meToHistory{ margin-top:14px; }
.melink > b{ flex:1; font-size:15px; }
.melink > span{ font-size:12px; color:var(--me-dim); }
.melink > i{ font-style:normal; color:#6E6255; display:grid; }
.melink > i.mestar{ color:#E8A33D; }
.melink:hover{ border-color:#E8A33D; }

.mesec{ margin-top:22px; }
.mehead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
.mehead h3{ margin:0; font-size:14px; }
.memore{ border:0; background:none; padding:4px 0; font:inherit; font-size:12.5px; color:var(--me-green); cursor:pointer; }

.megeo{ display:flex; gap:14px; align-items:flex-start; margin:6px 0 2px; }
.memap{ flex:none; width:118px; height:122px; padding:0; border:0; background:none; cursor:pointer; }
.memap svg{ width:100%; height:100%; display:block; }
.megeo .gbars{ flex:1; min-width:0; }
.gbar{ border-bottom:1px solid var(--me-line); }
.gbar .lb{ display:flex; align-items:baseline; gap:8px; width:100%; padding:11px 0 0; border:0; background:none;
  color:inherit; font:inherit; text-align:left; cursor:pointer; }
.gbar .cv{ font-style:normal; color:#E8A33D; font-size:13px; transition:transform .15s; }
.gbar.on .cv{ transform:rotate(90deg); }
.gbar .lb b{ flex:1; font-size:14px; }
.gbar .gn{ font-size:13px; color:var(--me-dim); font-variant-numeric:tabular-nums; }
.gbar .gn em{ font-style:normal; color:#E8A33D; font-size:15px; font-weight:700; }
.gbar .tr{ display:block; margin:7px 0 11px; height:5px; border-radius:3px; background:var(--me-track); overflow:hidden; }
.gbar .fl{ display:block; height:5px; border-radius:3px; background:#E8A33D; }
.gbar .drill{ margin:0 0 12px; }
#meGeoDrill{ margin:8px 0 4px; }

.crowns{ display:flex; gap:10px; margin-top:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.crowns::-webkit-scrollbar{ display:none; }
.crown{ width:56px; height:56px; flex:none; padding:0; border:0; background:none; cursor:pointer; }
.crown img{ width:56px; height:56px; display:block; }
.crown.locked{ cursor:pointer; opacity:.9; }
.crowns .empty{ font-size:12px; color:var(--me-dim); margin:4px 0; }

.rank{ gap:0; }
.rank .rw{ display:flex; align-items:baseline; gap:10px; width:100%; padding:10px 0; border:0;
  border-bottom:1px solid var(--me-line); background:none; color:inherit; font:inherit; text-align:left; }
.rank button.rw{ cursor:pointer; }
.rank .no{ width:14px; font-size:12px; color:var(--me-dim); text-align:left; }
.rank .nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank .nm b{ font-size:14px; }
.rank .sub{ margin-left:7px; font-size:11.5px; color:var(--me-dim); }
.rank .ct{ font-size:13.5px; color:#E8A33D; white-space:nowrap; }
.rank .empty, .toplist .empty{ font-size:12px; color:var(--me-dim); line-height:1.8; margin:6px 0; }

.toplist .tp{ display:flex; gap:12px; width:100%; padding:12px 0; border:0; border-bottom:1px solid var(--me-line);
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.toplist .pic{ width:72px; height:72px; flex:none; border-radius:12px; overflow:hidden; background:#20180F; }
.toplist .pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.toplist .pic svg{ display:block; }
.toplist .tx{ flex:1; min-width:0; }
.toplist .l1{ display:flex; align-items:baseline; gap:8px; }
.toplist .rt{ font-size:17px; color:#E8A33D; font-variant-numeric:tabular-nums; }
.toplist .bn{ flex:1; min-width:0; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toplist .l2{ display:block; margin-top:2px; font-size:12px; color:var(--me-green); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toplist .l3{ display:block; margin-top:2px; font-size:11.5px; color:var(--me-dim); }

/* 何も無い時(見本 EmptyMe) */
#meFull[hidden], .meempty[hidden]{ display:none; }
.meempty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 12px 20px; }
.meempty svg{ margin-bottom:18px; }
.meempty b{ font-size:17px; }
.meempty p{ margin:10px 0 18px; font-size:13px; color:#A89C8A; line-height:1.8; }
.meempty button{ width:100%; max-width:320px; height:48px; margin-top:10px; border-radius:14px; border:1.5px solid #6E6255;
  background:transparent; color:#F5EDDC; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.meempty button.pri{ background:#E8A33D; border-color:#E8A33D; color:#20180C; }

/* ── 飲みたいリスト(見本 Wishlist) ── */
#wishview{ background:#14100C; justify-content:center; align-items:stretch; }
#wishview.on{ display:flex; }
#wishPhone{ position:relative; width:100%; max-width:480px; margin:0 auto; display:flex; flex-direction:column;
  overflow:hidden; background:#1E1811; color:#F5EDDC;
  font-family:var(--font-body); }
.wishtop{ display:flex; align-items:center; gap:4px; padding:10px 8px 6px 4px; }
.wishtop .modalback{ margin-left:0; color:#E8A33D; }
.wishtop h2{ flex:1; margin:0; font-size:19px; }
.wishbody{ flex:1; overflow-y:auto; padding:8px 16px 44px; }
.seg{ display:flex; gap:6px; padding:4px; border-radius:12px; background:#261E15; margin-bottom:8px; }
.seg button{ flex:1; height:36px; border-radius:9px; border:0; background:transparent; color:#A89C8A;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.seg button[aria-selected=true]{ background:rgba(232,163,61,.12); color:#E8A33D; }
.wsort{ display:flex; gap:6px; margin:8px 0 4px; overflow-x:auto; scrollbar-width:none; }
.wsort::-webkit-scrollbar{ display:none; }
.wsort button{ flex:none; padding:5px 11px; border-radius:999px; font:inherit; font-size:12px;
  border:1px solid #3B3228; background:transparent; color:#A89C8A; cursor:pointer; }
.wsort button[aria-pressed=true]{ background:rgba(232,163,61,.12); border-color:transparent; color:#E8A33D; }
.wmsg{ margin:8px 2px 0; font-size:12px; color:#A89C8A; }
.wrow{ display:flex; align-items:center; gap:4px; border-bottom:1px solid #3B3228; }
.wmain{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:11px 0; border:0; background:none;
  color:inherit; font:inherit; text-align:left; cursor:pointer; }
.wmain:disabled{ cursor:default; }
.wpic{ width:52px; height:52px; flex:none; border-radius:12px; overflow:hidden; background:#20180F; display:grid; }
.wpic svg, .wpic img{ display:block; }
.wpic .lgbox{ width:52px; height:52px; border-radius:12px; font-size:19px; color:#9AA59F; }
.wtx{ flex:1; min-width:0; }
.wtx b{ display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wtx span{ display:block; margin-top:2px; font-size:12px; color:#A89C8A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wdone{ display:inline-block; margin-top:5px; font-style:normal; font-size:10.5px; padding:2px 8px; border-radius:999px;
  background:rgba(143,196,106,.16); color:#8FC46A; font-weight:700; }
.wstar{ flex:none; width:42px; height:42px; border:0; background:transparent; display:grid; place-items:center;
  color:#6E6255; cursor:pointer; touch-action:manipulation; }
.wstar.on{ color:#E8A33D; }
.wrow.off .wtx{ opacity:.55; }
.wempty{ padding:28px 4px 8px; font-size:13px; color:#A89C8A; line-height:1.8; }
.wnote{ margin:16px 2px 0; font-size:11.5px; color:#A89C8A; line-height:1.75; }

/* ── 飲んだ記録(見本 Records) ── */
#historyview .histtop{ display:flex; align-items:center; gap:4px; justify-content:flex-start; padding-bottom:8px; }
#historyview .histh2{ flex:1; margin:0; padding:0; font-size:19px; font-weight:700; }
#historyview .histback.modalback{ color:#E8A33D; }
#historyview .histfilter{ display:flex; align-items:center; gap:5px; height:36px; padding:0 12px; border-radius:999px;
  border:1px solid #3B3228; background:transparent; color:#F5EDDC; font:inherit; font-size:12.5px; font-weight:700; }
#historyview .sum[hidden]{ display:none; }
#historyview .histtabs{ gap:6px; padding:4px; border-radius:12px; background:#261E15; margin-bottom:4px; }
#historyview .histtabs button{ height:36px; padding:0; border-radius:9px; font-size:13px; }
#historyview .histtabs button[aria-selected=true]{ background:rgba(232,163,61,.12); color:#E8A33D; }
#historyview .day{ margin:14px 4px 2px; }
#historyview .day:first-of-type{ margin-top:10px; }
#historyview .day::after{ display:none; }
#historyview .day b{ font-size:12px; color:#A89C8A; }
#historyview .rec{ gap:12px; padding:12px 0; border-bottom:1px solid #3B3228; }
#historyview .rec .pic{ width:72px; height:72px; }
#historyview .rec .rmain .l1{ display:flex; align-items:baseline; gap:8px; }
#historyview .rec .rrate{ display:inline; flex:none; }
#historyview .rec .rmain h3{ flex:1; min-width:0; margin:0; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#historyview .rec .rmain .l2{ margin:2px 0 0; font-size:12px; color:#8FC46A; }
#historyview .rec .rmain .l3{ margin:2px 0 0; font-size:11.5px; color:#A89C8A; }
#historyview .rec .tg{ margin-top:6px; }


/* ── 統計(見本 Stats。C-6) ── */
#statsview{ --st-line:#3B3228; --st-dim:#A89C8A; --st-track:#33291F; }
.stbody{ padding:14px 16px 44px; }
.sttop h2{ font-size:20px; font-weight:700; }
.sttop p{ font-size:12.5px; padding-bottom:12px; }
.stcards{ display:flex; gap:8px; padding:12px 0; border-top:1px solid var(--st-line); border-bottom:1px solid var(--st-line); }
.stcard{ flex:1; min-width:0; background:none; border:0; border-radius:0; padding:0; }
.stcard b{ font-size:20px; font-weight:700; line-height:1.25; }
.stcard span{ font-size:11px; margin-top:2px; }
.sttabs{ gap:6px; border-radius:12px; margin:14px 0 6px; }
.sttabs button{ height:36px; padding:0 2px; border-radius:9px; font-size:12.5px; }
.sttabs button[aria-selected=true]{ background:rgba(232,163,61,.12); color:var(--st-amber); }

.strank{ gap:0; }
#statsview .strow{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; border:0;
  border-bottom:1px solid var(--st-line); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
#statsview .strow .no{ width:22px; font-size:13px; }
#statsview .strow .mid{ flex:1; min-width:0; }
#statsview .strow .nm{ display:block; font-size:14.5px; font-weight:700; }
#statsview .strow .tr{ display:block; margin:6px 0 0; height:4px; border-radius:2px; background:var(--st-track); }
#statsview .strow .fl{ display:block; height:4px; border-radius:2px; background:var(--st-amber); }
#statsview .strow .vl{ font-size:15px; }
#statsview .gochev{ flex:none; margin-left:0; color:#6E6255; display:grid; }

.stfam{ margin:14px 4px 2px; padding:0; border:0; font-size:12px; }
.stfam em{ font-size:12px; font-weight:500; margin-left:6px; }
.stfam{ justify-content:flex-start; }
.stlist{ gap:0; }
#statsview .strow2{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--st-line); width:100%;
  background:none; border-top:0; border-left:0; border-right:0; color:inherit; font:inherit; text-align:left; }
#statsview .strow2.has{ cursor:pointer; }
#statsview .strow2 .sn{ font-size:14.5px; }
#statsview .strow2 .sn em{ font-size:11.5px; margin-top:2px; font-weight:400; }
#statsview .strow2 .tr{ display:block; margin-top:6px; height:4px; border-radius:2px; background:var(--st-track); }
#statsview .strow2 .fl{ display:block; height:4px; border-radius:2px; background:var(--st-amber); }
#statsview .strow2 .sc2{ font-size:15px; }


/* ── 王冠の図鑑(見本 ZukanJisseki / ZukanGotochi。C-7) ── */
#zukanview{ background:#14100C; justify-content:center; align-items:stretch; }
#zukanview.on{ display:flex; }
#zukanPhone{ position:relative; width:100%; max-width:480px; margin:0 auto; display:flex; flex-direction:column;
  overflow:hidden; background:#1E1811; color:#F5EDDC;
  font-family:var(--font-body); }
.zknote{ margin:10px 2px 4px; font-size:12.5px; color:#A89C8A; line-height:1.7; }
.zkh{ margin:16px 2px 8px; font-size:12.5px; font-weight:700; color:#E8A33D; }
.zkh span{ color:#A89C8A; font-weight:500; margin-left:4px; }
.zkgrid{ display:grid; gap:14px 8px; }
.zkgrid.j{ grid-template-columns:repeat(4,1fr); }
.zkgrid.g{ grid-template-columns:repeat(3,1fr); }
.zktile{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; border:0; background:none;
  color:#F5EDDC; font:inherit; cursor:pointer; min-width:0; touch-action:manipulation; }
.zktile .crimg{ width:100%; max-width:76px; height:auto; aspect-ratio:1; display:block; }
.zkgrid.g .zktile .crimg{ max-width:92px; }
.zktile span{ font-size:11.5px; font-weight:700; text-align:center; line-height:1.35; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zkgrid.g .zktile span{ font-size:12.5px; }
.zktile.locked span{ color:#6E6255; font-weight:500; }

/* ── 王冠を押した時(見本 BadgeDetail / BadgeLocked) ── */
#badgeModal{ z-index:1400; align-items:stretch; background:#14100C; }
#badgeSheet{ position:relative; width:100%; max-width:480px; margin:0 auto; display:flex; flex-direction:column;
  background:#1E1811; color:#F5EDDC; font-family:var(--font-body); }
#badgeSheet .wishtop{ border-bottom:1px solid #3B3228; }
.bdbody{ flex:1; overflow-y:auto; padding:24px 18px 40px; }
.bdtop{ text-align:center; }
.bdimg{ width:200px; height:200px; display:block; margin:6px auto 12px; }
.bdtop h2{ margin:0; font-size:22px; }
.bdmeta{ margin:6px 0 0; font-size:12.5px; color:#A89C8A; }
.bdcond{ margin:16px 0 0; font-size:14px; line-height:1.7; }
.bdwhen{ margin:8px 0 0; font-size:12px; color:#A89C8A; }
.bdbox{ display:flex; gap:14px; align-items:center; margin-top:22px; padding:16px; border-radius:14px;
  background:#261E15; border:1px solid #3B3228; text-align:left; }
.bdnext{ flex:none; width:56px; height:56px; opacity:.85; }
.bdnext img{ width:56px; height:56px; display:block; }
.bdboxm{ flex:1; min-width:0; }
.bdboxm > b{ display:block; font-size:14.5px; }
.bdsub{ display:block; margin-top:4px; font-size:12px; color:#A89C8A; }
.bdtr{ display:block; margin-top:10px; height:6px; border-radius:3px; background:#33291F; overflow:hidden; }
.bdtr span{ display:block; height:6px; border-radius:3px; background:#E8A33D; }
.bdnum{ display:flex; justify-content:space-between; margin-top:7px; font-size:12px; color:#A89C8A; }
.bdnum b{ color:#E8A33D; font-variant-numeric:tabular-nums; }
.bdboxm p{ margin:10px 0 0; font-size:12px; color:#A89C8A; line-height:1.7; }
.bdact{ display:block; width:100%; margin-top:18px; height:50px; border-radius:14px; border:1.5px solid #6E6255;
  background:transparent; color:#F5EDDC; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.bdact.pri{ background:#E8A33D; border-color:#E8A33D; color:#20180C; }


/* ── 王冠を手に入れた時(見本 CrownGet。C-8) ── */
.bglabel{ font-size:13px; letter-spacing:.08em; margin-bottom:18px; }
.bgmedal{ width:200px; height:200px; margin:0 auto 22px; background:none !important; border:0 !important;
  box-shadow:none !important; display:grid; place-items:center; }
.bgmedal img{ width:200px; height:200px; display:block; position:relative; z-index:1; }
.bgname{ font-size:22px; font-weight:700; }
.bgdesc{ margin-top:8px; }
.bgmore{ display:inline-block; margin-top:14px; padding:5px 12px; border-radius:999px; border:0; background:#2A2118;
  color:#A89C8A; font:inherit; font-size:11.5px; cursor:pointer; }
.bgzukan, .bgcard .bgnext{ display:block; width:100%; max-width:300px; height:50px; margin:12px auto 0; padding:0;
  border-radius:14px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.bgzukan{ margin-top:26px; border:1.5px solid #6E6255; background:transparent; color:#F5EDDC; }
.bgcard .bgnext{ border:0; background:#E8A33D; color:#20180C; }


/* ══ ブルワリー情報(見本 Main.html。C-7) ══ */
#brewSheet{ background:#1E1811; color:#F5EDDC; }
#brewModal [hidden]{ display:none !important; }
@media (max-width:768px){
  #brewSheet{ height:100vh !important; height:calc(100dvh - env(safe-area-inset-top,0px)) !important;
    max-height:none !important; border-radius:0 !important; }
}
#brewModal .dtbar{ height:54px; padding:0 10px 0 4px; border-bottom:1px solid #3B3228; }
#brewModal .dtbar > span{ font-size:16px; font-weight:700; color:#F5EDDC; }
#brewModal .modalback{ color:#E8A33D; margin-left:0; }
#brewModal .bimenu{ width:40px; height:40px; display:grid; place-items:center; color:#A89C8A; }
#brewMenuPop a{ display:block; padding:12px; border-radius:8px; color:#F5EDDC; font-size:14px; text-decoration:none; }
#brewMenuPop a:hover{ background:#332818; }
#brewBody{ padding:18px 18px 28px; }

.bwhead{ display:flex; gap:14px; align-items:flex-start; }
.bwhead > .lgbox{ width:72px; height:72px; border-radius:16px; font-size:26px; color:#9AA59F; }
.bwname{ flex:1; min-width:0; }
.bwname h2{ margin:2px 0 0; font-size:19px; line-height:1.4; font-weight:700; }
.bwsub{ margin:3px 0 0; font-size:12px; color:#A89C8A; }
.bwchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.bwchips span{ padding:3px 10px; border-radius:999px; font-size:11.5px; background:#2E261D; color:#C9BDA9; }
.bwchips span.ok{ background:rgba(143,196,106,.16); color:#8FC46A; font-weight:700; }
.bwstar{ flex:none; width:44px; height:44px; border-radius:50%; border:1px solid #3B3228; background:transparent;
  color:#F5EDDC; display:grid; place-items:center; cursor:pointer; }
.bwstar.on{ color:#E8A33D; border-color:rgba(232,163,61,.5); background:rgba(232,163,61,.12); }
.bwstar.on svg{ fill:currentColor; }
.bwwhy{ margin:8px 0 0; font-size:11.5px; color:#E8A33D; }
.bwaddr{ display:flex; gap:6px; align-items:flex-start; margin-top:16px; font-size:13px; color:#8FC46A; text-decoration:none; line-height:1.6; }
.bwaddr svg{ flex:none; margin-top:3px; }
.bwaddr em{ font-style:normal; color:#A89C8A; margin-left:6px; }
.bwacts{ display:flex; gap:10px; margin-top:14px; }
.bwacts button{ flex:1; height:48px; border-radius:14px; border:1.5px solid #6E6255; background:transparent;
  color:#F5EDDC; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.bwacts button.pri{ background:#E8A33D; border-color:#E8A33D; color:#20180C; }
.bwnums{ display:flex; gap:8px; margin-top:12px; }
.bwnums div{ flex:1; min-width:0; text-align:center; padding:12px 4px; border-radius:12px; background:#261E15; }
.bwnums b{ display:block; font-size:18px; color:#E8A33D; font-variant-numeric:tabular-nums; }
.bwnums span{ display:block; margin-top:3px; font-size:11px; color:#A89C8A; }

.bwh{ display:flex; align-items:baseline; justify-content:space-between; margin:26px 0 4px; }
.bwh h3{ margin:0; font-size:15px; font-weight:700; }
.bwh span{ font-size:12.5px; color:#A89C8A; }
.bwgh{ margin:14px 0 2px; font-size:12.5px; font-weight:700; color:#E8A33D; }
.bwgh span{ color:#A89C8A; font-weight:500; margin-left:2px; }
.bwbeer{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 0; border:0; border-bottom:1px solid #3B3228;
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.bwpic{ width:50px; height:50px; flex:none; border-radius:10px; overflow:hidden; background:#20180F; display:grid; }
.bwpic svg, .bwpic img{ display:block; }
.bwtx{ flex:1; min-width:0; }
.bwtx .l1{ display:flex; align-items:center; gap:8px; min-width:0; }
.bwtx .l1 b, .bwsib .bwtx > b{ font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bwsold{ flex:none; font-style:normal; font-size:10.5px; padding:2px 8px; border-radius:999px; background:#2E261D; color:#A89C8A; }
.bwst{ flex:none; font-style:normal; color:#E8A33D; font-size:12px; }
.bwtx .l2{ display:block; margin-top:3px; font-size:11.5px; color:#A89C8A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bwmine{ font-style:normal; margin-left:6px; color:#8FC46A; font-weight:700; }
.bwr{ flex:none; font-size:15px; color:#E8A33D; font-variant-numeric:tabular-nums; }
.bwall{ display:block; width:100%; height:44px; margin-top:12px; border-radius:12px; border:1.5px solid #3B3228;
  background:transparent; color:#8FC46A; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.bwnone{ margin:8px 0 0; font-size:12.5px; color:#A89C8A; line-height:1.8; }
.bwadd{ display:block; margin:14px 0 0; padding:4px 0; border:0; background:none; color:#8FC46A;
  font:inherit; font-size:13px; cursor:pointer; }
.bwnote{ margin:10px 0 0; font-size:11.5px; color:#A89C8A; line-height:1.7; }
.bwsib{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 0; border:0; border-bottom:1px solid #3B3228;
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.bwsib > .lgbox{ width:34px; height:34px; border-radius:8px; font-size:13px; color:#9AA59F; }
.bwsib .bwtx > b{ display:block; }
.bwchev{ flex:none; color:#6E6255; display:grid; font-style:normal; }
.bwlinks{ display:flex; flex-wrap:wrap; gap:14px 6px; margin-top:10px; }
.bwlink{ width:76px; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:#C9BDA9; }
.bwlc{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#3B3228; color:#FFFFFF; }
.bwlink.sm{ width:auto; }
.bwlink.sm .bwlc{ width:36px; height:36px; }
.bwlink.sm .bwlc svg{ width:18px; height:18px; }
.bwll{ font-size:11px; text-align:center; line-height:1.35; }
.bw-site .bwlc{ background:#F5EDDC; color:#20180C; }
.bw-instagram .bwlc{ background:radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.bw-x .bwlc, .bw-threads .bwlc, .bw-tiktok .bwlc, .bw-note .bwlc{ background:#000000; box-shadow:inset 0 0 0 1px #3B3228; }
.bw-facebook .bwlc{ background:#0866FF; }
.bw-youtube .bwlc{ background:#FF0000; }
.bw-line .bwlc{ background:#06C755; }
.bw-store .bwlc{ background:#7FA83A; }
.bwabout{ margin-top:26px; padding:14px; border-radius:12px; background:#261E15; font-size:12px; color:#A89C8A; line-height:1.8; }
.bwabout a{ display:block; margin-top:4px; color:#8FC46A; font-weight:700; text-decoration:none; }
.bwabout span{ display:block; }
.bwage{ margin:20px 0 0; text-align:center; font-size:11.5px; color:#6E6255; }


/* ── 地図の検索結果(見本 Search.html。C-8) ── */
#mapSearch .ctcap{ margin:14px 16px 4px; }
#mapSearch .ctlist{ border-top:0; }
#mapSearch .ctrow{ border-bottom:0; padding:10px 16px; }
.ctthumb.msmap{ background:#2A2118; color:#E8A33D; }
.ctthumb.msmap svg{ width:18px; height:18px; }
.ctthumb.mslogo{ background:#FFFFFF; }
.ctthumb.mslogo .lgbox{ width:40px; height:40px; border-radius:9px; font-size:15px; color:#9AA59F; }
.msmore{ display:block; margin:4px 16px 8px; padding:6px 0; border:0; background:none; color:#8FC46A;
  font:inherit; font-size:13px; cursor:pointer; text-align:left; }

/* 選んだ市区町村の中のピンは少し大きく(選んだブルワリーは琥珀の輪のまま) */
.pin.incity{ width:18px !important; height:18px !important; }


/* ══ 記録を直す(見本 EditRecord.html。C-8) ══ */
#editSheet{ background:#1E1811; color:#F5EDDC; }
#editModal [hidden]{ display:none !important; }
@media (max-width:768px){
  #editSheet{ height:100vh !important; height:calc(100dvh - env(safe-area-inset-top,0px)) !important;
    max-height:none !important; border-radius:0 !important; }
}
#editModal .dtbar{ height:54px; padding:0 10px 0 4px; border-bottom:1px solid #3B3228; }
#editModal .dtbar > span{ flex:1; font-size:16px; font-weight:700; color:#F5EDDC; }
#editModal .modalback{ color:#E8A33D; margin-left:0; }
.edsavetop{ flex:none; height:36px; padding:0 16px; border-radius:999px; border:0; background:#E8A33D; color:#20180C;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.edbody{ padding:16px 18px 36px !important; }
.edphoto{ display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.edpic{ width:88px; height:88px; flex:none; border-radius:12px; overflow:hidden; background:#2A2018; display:grid; place-items:center; }
.edpic img{ width:100%; height:100%; object-fit:cover; display:block; }
.edpicnone{ font-size:11px; color:#6E6255; }
.edphbtns{ flex:1; display:flex; flex-direction:column; gap:6px; }
.edphbtn{ height:44px; border-radius:12px; border:1.5px solid #3B3228; background:transparent; color:#F5EDDC;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.edphtext{ height:34px; border:0; background:none; color:#A89C8A; font:inherit; font-size:13px; cursor:pointer; }
#editModal .edsec{ margin:0 0 22px; }
#editModal .edsec > label{ display:flex; align-items:baseline; gap:8px; margin:0 0 9px; font-size:14.5px; font-weight:700; color:#F5EDDC; }
#editModal .edsec > label em{ font-style:normal; font-size:11.5px; font-weight:400; color:#A89C8A; }
.edhint{ margin:-4px 0 10px; font-size:12px; color:#A89C8A; }
.edsec .chips + .edhint{ margin:8px 2px 0; }
.edbeer{ display:flex; align-items:center; gap:12px; width:100%; padding:12px; border-radius:14px; border:1.5px solid #3B3228;
  background:#261E15; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.edbpic{ width:44px; height:44px; flex:none; border-radius:10px; overflow:hidden; background:#20180F; display:grid; place-items:center; }
.edbpic svg, .edbpic img{ display:block; width:100%; height:100%; }
.edbpic.plus{ color:#E8A33D; font-size:20px; font-weight:700; }
.edbtx{ flex:1; min-width:0; }
.edbtx b{ display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.edbtx span{ display:block; margin-top:2px; font-size:12px; color:#A89C8A; }
.edbeer em{ flex:none; font-style:normal; font-size:13px; color:#8FC46A; }
.edbeerpick{ margin-top:8px; padding:10px; border-radius:14px; background:#261E15; border:1px solid #3B3228; }
.edbeerpick input{ width:100%; box-sizing:border-box; height:46px; padding:0 12px; border-radius:10px; border:1.5px solid #E8A33D;
  background:#1E1811; color:#F5EDDC; font:inherit; font-size:16px; }
.edsug{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 4px; border:0; border-bottom:1px solid #3B3228;
  background:none; color:#F5EDDC; font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.edsug .edbpic{ width:34px; height:34px; border-radius:8px; }
.edsug.new span:last-child{ color:#E8A33D; }
#edBeerSug .edhint{ margin:10px 2px 2px; }
.edbrew{ display:flex; align-items:center; gap:12px; margin-top:8px; padding:12px; border-radius:14px; border:1.5px solid #3B3228; }
.edbrew > .lgbox{ width:38px; height:38px; border-radius:9px; font-size:14px; color:#9AA59F; }
.edbrewnote{ margin:6px 2px 0; font-size:11.5px; color:#A89C8A; line-height:1.6; }
.edbrew small{ display:block; font-size:11px; color:#A89C8A; }
.edbrew b{ display:block; font-size:14.5px; color:#8FC46A; }
.edratesec{ padding-top:18px; border-top:1px solid #3B3228; }
.edrrow{ display:flex; gap:28px; align-items:center; }
#editModal .edrate{ margin:0 0 0 12px !important; }
#editModal .edscore{ flex:1; display:block; text-align:left; margin:0; }
#editModal .edscore b{ font-size:36px; }
#editModal .edscore b i{ font-size:15px; }
.edword{ display:block; margin-top:6px; font-size:15px; font-weight:700; color:#E8A33D; min-height:1.4em; }
#editModal .edscore p{ margin:10px 0 0; font-size:12px; color:#A89C8A; line-height:1.7; }
#editModal #edClearRate{ margin-top:6px; padding:0; }
#editModal .chips{ display:flex; flex-wrap:wrap; gap:8px; }
#editModal .chip{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; height:44px; padding:0 15px;
  border-radius:999px; border:1.5px solid #3B3228; background:transparent; color:#F5EDDC; font:inherit;
  font-size:14px; font-weight:500; margin:0; }
#editModal .chip[aria-pressed=true]{ background:#E8A33D; border-color:transparent; color:#20180C; font-weight:700; }
#editModal .chip .dot{ width:8px; height:8px; border-radius:50%; flex:none; margin:0; }
#editModal .ck3fold .chip.ck3extra:not([aria-pressed=true]){ display:none; }
#editModal input[type=text], #editModal input[type=date], #editModal textarea{ width:100%; box-sizing:border-box;
  border-radius:12px; border:1.5px solid #3B3228; background:#261E15; color:#F5EDDC; font:inherit; font-size:16px; }
#editModal input[type=text], #editModal input[type=date]{ height:50px; padding:0 14px; }
#editModal textarea{ padding:12px 14px; line-height:1.7; resize:vertical; }
#editModal .ck3onsite{ margin:0 0 22px; }
.eddelete{ display:block; width:100%; height:48px; margin-top:6px; border:0; background:none; color:#E2705F;
  font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; }


/* ── 一覧の行の ☆(見本 2_mobile_map/ListOpen。C-9) ── */
.item{ position:relative; }
.istarbtn{ flex:none; margin-left:auto; width:40px; height:40px; display:grid; place-items:center;
  color:#B5AFA3; cursor:pointer; touch-action:manipulation; }
.istarbtn.on{ color:#E8A33D; }
[data-mode='dark'] .istarbtn{ color:#6E6255; }
[data-mode='dark'] .istarbtn.on{ color:#E8A33D; }


/* ══ パソコン版の決まり(C-10) ══ */
@media (min-width:769px){
  /* 地図以外の画面は、中央に幅560pxの列。左右は背景の色 */
  #mePhone, #stPhone, #histPhone, #wishPhone, #zukanPhone{ max-width:560px; }

  /* Check in・ビール登録は、中央に出る窓(480px) */
  #checkinModal, #registerview{ align-items:center; }
  #checkinSheet, #regPhone{ max-width:480px; width:calc(100% - 48px); border-radius:20px !important;
    height:min(820px, 90vh) !important; max-height:none !important; }

  /* ブルワリー情報・ビール情報・記録を直す・王冠も、中央の窓(560px)にそろえる */
  #brewModal, #beerModal, #editModal{ align-items:center; }
  #brewSheet, #beerSheet, #editSheet{ max-width:560px; width:calc(100% - 48px); border-radius:20px !important;
    height:min(860px, 90vh) !important; max-height:none !important; }
  #badgeModal{ align-items:center; background:rgba(10,8,6,.6); }
  #badgeSheet{ max-width:560px; width:calc(100% - 48px); border-radius:20px; overflow:hidden;
    height:min(820px, 90vh); }
}


/* ══ app.css が効いたら地図の中身を見せる(D その2。隠すのは globals.css) ══ */
html .ippai-root, html .cktype{ visibility:visible; }


/* 見出しだけ Zen Kaku Gothic New(本文は端末の書体。globals.css の --font-body) */
.ippai-root :is(h1, h2, h3), .dtbar > span, .cktitle{ font-family:var(--font-head, var(--font-body)); }