/* ============================================================
   酒記/SAKEKI — スタイルシート
   app.html の <style> ブロックを抽出・移植したもの。
   ログイン画面（vAuth）用スタイルを末尾に追加。
   ============================================================ */

:root{
  --bg:#ffffff;--panel:#f5f6f8;--panel-2:#eef0f4;--line:#e8eaef;--line-2:#f1f2f5;
  --indigo:#1e2a44;--indigo-2:#33405e;--steel:#6b7689;
  --ink:#1e2331;--sub:#8a8f9e;--dim:#b2b6c0;
  --gold:#a8854a; /* 差し色（★・評価数値）— 案C 静謐エディトリアル */
  --star:#a8854a;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);background:#e7e9ee;color:var(--ink);-webkit-font-smoothing:antialiased;font-size:13.5px;line-height:1.55;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 0}
.serif{font-family:var(--serif)}
.app{width:100%;max-width:430px;height:min(calc(100vh - 48px),840px);display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden;border-radius:26px;border:1px solid #e3e5ea;box-shadow:0 18px 60px rgba(30,42,68,.16)}
@media (max-width:480px){body{padding:0}.app{height:100dvh;max-width:none;border-radius:0;border:none;box-shadow:none}}
.view{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden}
.view.active{display:flex;animation:fade .24s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.scroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:74px}

/* ヘッダー */
.head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 10px}
.head .logo{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.13em}
.head .icos{display:flex;gap:18px}
.head .icos button{font-size:18px;background:none;border:none;color:var(--ink);cursor:pointer}

/* 検索 */
.searchbar{margin:0 20px 12px;display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:10px;padding:10px 14px}
.searchbar span{color:var(--dim)}
.searchbar input{flex:1;border:none;background:none;outline:none;font-family:var(--sans);font-size:13px;color:var(--ink)}
.searchbar input::placeholder{color:var(--dim)}

/* カテゴリchip */
.chips{display:flex;gap:8px;padding:0 20px 14px;overflow-x:auto}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:12px;border:none;border-radius:20px;padding:7px 14px;background:var(--panel);cursor:pointer;color:var(--steel);font-family:var(--sans)}
.chip.on{background:var(--indigo);color:#fff;font-weight:500}
/* 探すタブの並び替えバー（カテゴリ順/人気順/新着順/名前順） */
.sort-bar{display:flex;align-items:center;gap:6px;padding:2px 20px 14px;flex-wrap:wrap}
.sort-label{font-size:11px;color:var(--sub);margin-right:2px}
.sort-chip{flex:0 0 auto;font-size:11.5px;border:1px solid var(--line-2);border-radius:14px;padding:5px 11px;background:#fff;cursor:pointer;color:var(--steel);font-family:var(--sans)}
.sort-chip.on{border-color:var(--indigo);background:var(--indigo);color:#fff;font-weight:600}

/* セクション見出し */
.sec-h{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 12px}
.sec-h .t{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.sec-h .more{font-size:11px;color:var(--steel);background:none;border:none;cursor:pointer}

/* 注目のお酒（横スクロール） */
.hscroll{display:flex;gap:12px;padding:0 20px 20px;overflow-x:auto}
.hscroll::-webkit-scrollbar{display:none}
.bcard{flex:0 0 108px;cursor:pointer}
.bcard .bimg{height:144px;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px;padding-bottom:6px;position:relative}
/* ランキングの順位バッジ（1〜3位はインディゴ濃く、4位以降は控えめ） */
.bcard .brank{position:absolute;top:6px;left:6px;min-width:22px;height:22px;padding:0 5px;background:var(--indigo);color:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;z-index:2}
.bcard .brank.sub{background:rgba(30,42,68,.42)}
.bcard .bimg svg{height:126px}
.bcard .bn{font-size:12.5px;font-weight:500;margin-bottom:2px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard .bb{font-size:10.5px;color:var(--sub);margin-bottom:5px}
.bcard .br{font-size:12.5px;color:var(--star);font-weight:700}
.bcard .br small{font-family:var(--sans);color:var(--sub);font-weight:400;margin-left:3px;font-size:10px}
.rankno{position:absolute;top:6px;left:6px;min-width:20px;height:20px;border-radius:6px;background:#fff;color:var(--steel);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(30,42,68,.14);padding:0 4px}
.rankno.top{background:var(--indigo);color:#fff}
.bcard:active,.review-card:active,.rank:active,.ccell:active{opacity:.7}

/* カテゴリから探す */
.catgrid{display:flex;gap:10px;padding:0 20px 20px;overflow-x:auto}
.catgrid::-webkit-scrollbar{display:none}
/* アイコンと文字を同じ枠に収めたカード型（2026-06-11 オーナー指示） */
.catcell{flex:0 0 76px;text-align:center;background:var(--panel);border-radius:13px;padding:13px 4px 11px;cursor:pointer;transition:background .15s}
.catcell:active{background:var(--panel-2)}
.catcell .ci{height:34px;background:none;border-radius:0;display:flex;align-items:center;justify-content:center;margin-bottom:7px}
.catcell .cl{font-size:11.5px;color:var(--steel)}
/* SVGカテゴリアイコン */
.ci-icon{display:flex;align-items:center;justify-content:center;color:var(--indigo)}
.ci-icon svg{width:28px;height:28px;display:block}

/* ホーム ウェルカム文 */
.home-welcome{font-size:12px;color:var(--dim);padding:0 20px 12px;letter-spacing:.04em}
/* 今週の一本（案C ヒーロー）: インディゴの帯に1本を大きく */
.hero{display:flex;align-items:center;gap:14px;margin:6px 20px 22px;padding:20px 18px 20px 22px;background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-2) 100%);border-radius:16px;cursor:pointer;box-shadow:0 14px 30px rgba(30,42,68,.18)}
.hero:active{opacity:.92}
.hero-txt{flex:1;min-width:0}
.hero-label{font-size:10.5px;color:rgba(255,255,255,.62);letter-spacing:.22em;margin-bottom:8px}
.hero-name{font-size:20px;font-weight:700;color:#fff;line-height:1.4;letter-spacing:.02em}
.hero-sub{font-size:11px;color:rgba(255,255,255,.66);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-rate{font-size:15px;font-weight:700;color:#d9bc85;margin-top:12px}
.hero-rate small{font-family:var(--sans);font-weight:400;font-size:11px;color:rgba(255,255,255,.55)}
.hero-rate.none{font-family:var(--sans);font-weight:400;font-size:11.5px;color:rgba(255,255,255,.66)}
.hero-cta{display:none} /* PC専用の「詳しく見る →」（desktop.cssで表示） */
.hero-img{width:96px;height:128px;flex:0 0 96px;background:#fff;border-radius:12px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;overflow:hidden}
.hero-img svg{height:112px}
.hero-img .bottle-img{max-height:112px;object-fit:contain}

/* 新着レビュー */
.review-card{margin:0 20px 12px;padding:14px;border:1px solid var(--line);border-radius:11px;cursor:pointer}
.rc-top{display:flex;gap:13px;margin-bottom:10px}
.rc-img{width:52px;height:70px;flex:0 0 52px;background:#fff;border:1px solid var(--line-2);border-radius:6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px}
.rc-img svg{height:62px}
.rc-info{flex:1;min-width:0}
.rc-name{font-size:13.5px;font-weight:600;margin-bottom:2px}
.rc-brand{font-size:11px;color:var(--sub);margin-bottom:4px}
.rc-rate{font-size:13px;color:var(--star);font-weight:600}
.rc-bm{margin-left:auto;color:var(--dim);font-size:17px}
.rc-body{font-size:12.5px;line-height:1.7;color:#454b59;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-user{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--sub)}
.rc-user .ua{width:20px;height:20px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px}

/* おすすめユーザー */
.urow{display:flex;align-items:center;gap:12px;margin:0 20px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px}
.urow .ua{width:42px;height:42px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}
.urow .ui{flex:1;min-width:0}
.urow .un{font-size:14px;font-weight:600}
.urow .ud{font-size:11px;color:var(--sub)}
.urow .follow{font-size:12px;border:1px solid var(--indigo);color:var(--indigo);background:none;border-radius:18px;padding:7px 16px;cursor:pointer;font-family:var(--sans)}
.urow .follow.on{background:var(--indigo);color:#fff}

/* ===== ボトル詳細 ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 0}
.topbar button{font-size:21px;color:var(--ink);background:none;border:none;cursor:pointer;line-height:1}
.topbar .rt{display:flex;gap:18px}
.d-hero{display:flex;align-items:flex-end;justify-content:center;height:200px;margin:8px 20px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding-bottom:10px}
.d-hero svg{height:178px}
.d-title{text-align:center;padding:6px 24px 0}
.d-name{font-size:21px;font-weight:700;margin-bottom:4px}
.d-en{font-size:12px;color:var(--sub);letter-spacing:.04em}
.d-brand{font-size:12px;color:var(--steel);margin-top:6px}
.d-rate{text-align:center;padding:12px 0 2px}
.d-rate .big{font-size:31px;font-weight:700;color:var(--star)}
.d-rate .big .s{font-size:22px}
.d-rate .ct{font-size:12px;color:var(--sub);margin-top:2px}
/* みんなが感じた味わい（レビュー本文から自動抽出した頻出ワードのタグ） */
.d-voice{padding:2px 20px 8px;text-align:center}
.dv-label{font-size:11px;color:var(--sub);letter-spacing:1.5px;margin-bottom:8px}
.dv-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dv-chip{font-size:12px;color:var(--indigo);background:var(--panel);border-radius:14px;padding:6px 12px}
.dv-chip small{color:var(--gold);margin-left:4px;font-weight:700;font-size:11px}

.d-counts{display:flex;justify-content:center;gap:0;margin:12px 20px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.d-counts div{flex:1;text-align:center;padding:13px 0;border-right:1px solid var(--line)}
.d-counts div:last-child{border:none}
.d-counts .cl{font-size:11px;color:var(--sub);margin-bottom:3px}
.d-counts .cn{font-size:19px;font-weight:700}
.d-info{margin:0 24px 8px}
.d-info .irow{display:flex;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.d-info .ik{flex:0 0 92px;color:var(--sub)}
.d-info .iv{flex:1;color:var(--ink)}
.d-tags{margin:6px 24px 8px}
.d-tags .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.d-tags .tag{font-size:11.5px;background:var(--panel);color:var(--indigo-2);padding:5px 12px;border-radius:18px}
.rev-tabs{display:flex;gap:18px;margin:14px 24px 4px;border-bottom:1px solid var(--line);font-size:13px}
.rev-tabs button{background:none;border:none;padding:10px 0;color:var(--sub);cursor:pointer;font-family:var(--sans);position:relative}
.rev-tabs button.on{color:var(--indigo);font-weight:600}
.rev-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--indigo)}
.rev-item{margin:0 24px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.ri-top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.ri-top .ua{width:26px;height:26px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.ri-top .un{font-size:13px;font-weight:600}
.ri-top .dt{font-size:11px;color:var(--dim)}
.ri-top .rr{margin-left:auto;font-size:13px;color:var(--star);font-weight:600}
.ri-top .bm{color:var(--dim);font-size:15px;margin-left:10px}
.ri-body{font-size:12.5px;line-height:1.7;color:#454b59;margin-bottom:8px}
.ri-foot{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sub)}
/* 編集・削除ボタン（本人のみ表示） */
.rev-edit,.rev-del{margin-left:auto;background:none;border:none;cursor:pointer;font-size:11px;font-family:var(--sans);padding:2px 6px;border-radius:4px;color:var(--dim)}
.rev-edit{margin-left:auto}
.rev-del{margin-left:0;color:#c0392b}
.rev-edit:hover{color:var(--steel)}
.rev-del:hover{color:#a93226}
/* マイページのレビュー一覧内：銘柄名リンク */
.ri-drink{font-size:12px;color:var(--indigo);font-weight:600;margin-bottom:5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.d-cta{position:absolute;bottom:58px;left:0;right:0;max-width:430px;margin:0 auto;display:flex;gap:12px;padding:12px 20px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.d-cta button{flex:1;border-radius:8px;padding:15px 8px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans);display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
/* 飲んだ・飲みたいは2つとも枠線ボタン。選択したものだけインディゴで塗る */
.d-cta .drank,.d-cta .want{background:none;border:1px solid var(--indigo);color:var(--indigo)}
.d-cta .drank.on,.d-cta .want.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.d-cta .num{font-size:11px;font-weight:400;opacity:.85}

/* ===== マイページ ===== */
/* ── マイページ（案C: インディゴの帯＋ヘアライン統計）── */
.mp-hero{padding:30px 22px 52px;background:linear-gradient(150deg,var(--indigo) 0%,var(--indigo-2) 100%)}
.mp-id{display:flex;align-items:center;gap:16px}
.mp-id .pa{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:500;flex:0 0 70px;border:1.5px solid rgba(255,255,255,.55);font-family:var(--serif)}
.mp-id-txt{flex:1;min-width:0}
.mp-id .pn{font-size:20px;font-weight:700;color:#fff;line-height:1.25;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-id .ph{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.pedit{font-size:12px;color:#fff;border:1px solid rgba(255,255,255,.5);background:none;border-radius:16px;padding:6px 15px;cursor:pointer;font-family:var(--sans);flex:0 0 auto}
.pedit:active{background:rgba(255,255,255,.12)}
.prof-bio{font-size:13px;color:#454b59;line-height:1.8}
.mp-hero .prof-bio{padding:16px 0 0;margin-top:16px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78)}
.mp-follow{display:flex;gap:22px;margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.6)}
.mp-follow strong{color:#fff;font-size:15px;font-weight:700;margin-right:3px}
/* 統計: 白い面にヘアライン区切りの4列（エディトリアル）*/
/* 統計カード: インディゴ帯の下端に重なる「浮きカード」（2026-06-11 オーナー指示で刷新） */
.mp-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:-30px 18px 20px;border-radius:16px;box-shadow:0 14px 34px rgba(30,42,68,.14);background:#fff;position:relative;z-index:2;overflow:hidden}
.mp-stat{background:#fff;padding:19px 4px 16px;text-align:center;border-right:1px solid var(--line)}
.mp-stat:last-child{border-right:none}
.mp-stat .v{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--indigo);line-height:1;letter-spacing:.02em}
.mp-stat .v .dash{color:var(--dim)}
.mp-stat .l{font-size:10px;color:var(--sub);margin-top:8px;letter-spacing:.14em}
/* よく飲むジャンル（統計セル内・カテゴリ名は文字なので小さめ明朝） */
.mp-stat .v.genre{font-size:14.5px;letter-spacing:.04em;padding-top:5px}

/* よく飲むお酒の円グラフ（読書メーター風ドーナツ＋凡例） */
.mp-pie{display:flex;align-items:center;gap:18px;padding:14px 0 4px}
.pie-svg{width:128px;height:128px;flex:0 0 128px}
.pie-num{font-family:var(--serif);font-size:21px;font-weight:700;fill:var(--indigo)}
.pie-cap{font-size:9px;fill:var(--sub);letter-spacing:1px}
.pie-legend{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.pie-leg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--steel);background:none;border:none;padding:3px 4px;cursor:pointer;font-family:var(--sans);text-align:left;border-radius:8px}
.pie-leg:active{background:var(--panel)}
.pie-leg strong{color:var(--indigo);font-weight:700}
.pie-leg small{color:var(--dim);font-size:11px;margin-left:auto}
.pl-dot{width:10px;height:10px;border-radius:3px;flex:0 0 10px}

/* 飲んだお酒の並び替え（更新順/評価順） */
.mine-sort{display:flex;gap:6px;margin-top:12px}

/* よく飲むカテゴリのチップ */
.mp-cats{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:0 22px 18px}
.mp-cats-label{font-size:11px;color:var(--dim);margin-right:2px}
.mp-cat-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--indigo);background:var(--panel);border:none;border-radius:15px;padding:6px 12px;cursor:pointer;font-family:var(--sans)}
.mp-cat-chip strong{font-weight:700}
.mp-cat-chip:active{background:var(--panel-2)}
/* ⚙メニューの非破壊項目（最終行の赤色指定を上書き） */
.rv-menu button.ok,.rv-menu button.ok:last-child{color:var(--ink)}
.collection{padding:0 22px 22px}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.ccell{cursor:pointer}
.ccell .ci2{height:88px;background:#fff;border:1px solid var(--line-2);border-radius:7px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px;padding-bottom:4px}
.ccell .ci2 svg{height:80px}
.ccell .cn2{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}
.ccell .cr2{font-size:10px;color:var(--star);font-weight:600}

/* ===== レビュー投稿フォーム ===== */
.form-top{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 0}
.form-top button{background:none;border:none;cursor:pointer;color:var(--ink)}
.form-top .x{font-size:23px;line-height:1}
.form-top .draft{font-size:13px;color:var(--sub)}
.form-title{font-size:19px;font-weight:700;padding:14px 22px 6px}
.form-body{flex:1;overflow-y:auto;padding:0 22px 120px}
.frow{padding:13px 0;border-bottom:1px solid var(--line-2)}
.frow .lab{font-size:12px;color:var(--sub);margin-bottom:8px}
.frow input,.frow textarea,.frow select{width:100%;border:none;background:none;outline:none;font-family:var(--sans);font-size:15px;color:var(--ink);line-height:1.7;-webkit-appearance:none;appearance:none}
.frow textarea{resize:none;min-height:70px}
.frow input::placeholder,.frow textarea::placeholder{color:var(--dim)}
.rate-input{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.rate-stars{position:relative;font-size:26px;letter-spacing:3px;color:var(--line);line-height:1}
.rate-stars .fill{position:absolute;left:0;top:0;color:var(--gold);overflow:hidden;white-space:nowrap;width:0}
.rate-val{font-size:20px;font-weight:700;color:var(--indigo);min-width:44px}
/* 評価をつけない トグル */
.no-rate-toggle{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;color:var(--sub);font-family:var(--sans);cursor:pointer;user-select:none}
.no-rate-toggle input{width:16px;height:16px;accent-color:var(--indigo);cursor:pointer}
.rate-input.norate-on .rate-stars{opacity:.32}
.rate-input.norate-on .rate-val{color:var(--sub);font-size:15px}
/* 投稿フォーム上部の対象銘柄ヘッダー */
.form-drinkhead{display:flex;align-items:center;gap:12px;margin:0 22px 16px;padding:12px 14px;background:var(--panel);border-radius:12px}
.form-drinkhead .fdh-bottle{width:40px;height:52px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.form-drinkhead .fdh-bottle svg,.form-drinkhead .fdh-bottle img{max-height:48px;max-width:100%}
.form-drinkhead .fdh-name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.form-drinkhead .fdh-cat{font-size:11px;color:var(--sub);margin-top:2px}
/* 探す画面の申請リンク */
.search-req{text-align:center;padding:20px}
.search-req button{background:none;border:none;color:var(--sub);font-size:12.5px;font-family:var(--sans);cursor:pointer}
.search-req button span{color:var(--indigo);text-decoration:underline;font-weight:500}
#fRateSlider{width:100%;height:22px;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
#fRateSlider::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--indigo) var(--p,0%),var(--line) var(--p,0%));border-radius:2px}
#fRateSlider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--indigo);margin-top:-9.5px;box-shadow:0 2px 6px rgba(30,42,68,.3);border:2.5px solid #fff}
#fRateSlider::-moz-range-track{height:3px;background:var(--line);border-radius:2px}
#fRateSlider::-moz-range-progress{height:3px;background:var(--indigo);border-radius:2px}
#fRateSlider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--indigo);border:2.5px solid #fff;box-shadow:0 2px 6px rgba(30,42,68,.3)}
.form-save{position:absolute;bottom:58px;left:0;right:0;max-width:430px;margin:0 auto;padding:12px 20px 14px;background:linear-gradient(transparent,#fff 30%)}
.btn-post{width:100%;border:none;border-radius:11px;background:var(--indigo);color:#fff;padding:16px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer}
.btn-post:disabled{background:#c5c9d2;cursor:not-allowed}

/* ===== タブバー ===== */
.tab{position:absolute;bottom:0;left:0;right:0;height:58px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex}
.tab button{flex:1;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--dim);font-size:9.5px;position:relative}
.tab button.on{color:var(--indigo)}
.tab button.on::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:2px;background:var(--indigo);border-radius:0 0 2px 2px}
.tab .ti{line-height:1;display:flex}
.tab .ti svg{width:21px;height:21px}

.empty{text-align:center;color:var(--dim);font-size:13px;padding:46px 24px;line-height:1.9}
.sheet-bg{position:absolute;inset:0;background:rgba(30,42,68,.32);z-index:50;display:none;align-items:flex-end}
.sheet-bg.open{display:flex}
.sheet{width:100%;background:#fff;border-radius:18px 18px 0 0;padding:20px 22px 26px;animation:up .25s ease}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet-h{font-size:16px;font-weight:700;margin-bottom:6px}
.toast{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);background:var(--indigo);color:#fff;padding:12px 22px;border-radius:8px;font-size:13px;z-index:60;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* ===== 機能A: いいね♡ボタン ===== */
.like-btn{background:none;border:none;cursor:pointer;font-size:12px;color:var(--sub);padding:2px 4px;border-radius:5px;display:inline-flex;align-items:center;gap:3px;font-family:var(--sans);line-height:1;transition:color .15s}
.like-btn.on{color:var(--indigo);font-weight:600}
.like-btn:active{opacity:.65}
/* ホームの rc-user 行内に並ぶよう ml:auto */
.rc-user .like-btn{margin-left:auto;font-size:11px}

/* ===== 機能E: 評価なし表示 ===== */
.norate{font-size:11px;color:var(--dim);font-family:var(--sans);font-weight:400}

/* ===== 機能B: フォロー数（マイページ） ===== */
.follow-counts{padding:0 22px 14px;font-size:12.5px;color:var(--sub)}
.follow-counts strong{color:var(--ink);font-weight:600}

/* ===== 機能D: 棚（shelf）表示 ===== */
.shelf{padding:14px 0 6px}
.shelf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 0 0;position:relative;margin-bottom:2px}
.shelf-item{cursor:pointer;text-align:center;padding-bottom:14px}
.shelf-item:active{opacity:.7}
.shelf-bottle{height:90px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:5px}
.shelf-bottle svg{height:82px}
.shelf-bottle .bottle-img{max-height:82px;object-fit:contain}
.shelf-name{font-size:10px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
/* 棚の各銘柄に自分のレビュー評価を表示（未レビューは控えめなグレー） */
.shelf-rate{font-size:10px;color:var(--star);font-weight:700;margin-top:1px}
.shelf-rate.none{font-family:var(--sans);color:var(--dim);font-weight:400}
/* 棚板: 各 shelf-row の下に細い線 + 薄い影 */
.shelf-plank{position:absolute;bottom:0;left:-8px;right:-8px;height:5px;background:linear-gradient(to bottom,#dde1e9,#eef0f5);border-radius:2.5px;box-shadow:0 3px 8px rgba(30,42,68,.10);grid-column:1/-1}

/* ===== 楽天API画像対応 ===== */
.bottle-img{max-width:100%;max-height:128px;object-fit:contain;display:block;margin:0 auto}
/* 各カード内の枠でも破綻しないよう上書き */
.bimg .bottle-img{max-height:120px}
.rc-img .bottle-img{max-height:62px}
.ci2 .bottle-img{max-height:78px}
.d-hero .bottle-img{max-height:174px}

/* ===== ログイン画面（vAuth）===== */
.auth-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 34px}
.auth-logo{font-family:var(--serif);font-size:40px;font-weight:600;letter-spacing:.2em;color:var(--ink)}
.auth-tg{font-size:11px;color:var(--sub);letter-spacing:.24em;margin:14px 0 36px}
.auth-form{width:100%;display:flex;flex-direction:column;gap:12px}
.auth-form input{border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-family:var(--sans);font-size:14px;outline:none;background:var(--panel)}
.auth-form input:focus{border-color:var(--indigo);background:#fff}
.auth-err{color:#b03030;font-size:12px;min-height:16px}
.auth-switch{background:none;border:none;color:var(--indigo);font-size:13px;cursor:pointer;padding:6px;font-family:var(--sans)}
.auth-div{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:11px;margin:6px 0}
.auth-div::before,.auth-div::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-skip{background:none;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--steel);font-size:13px;cursor:pointer;font-family:var(--sans)}
.auth-legal{font-size:11px;color:var(--dim);text-align:center;line-height:1.7;margin-top:14px}
.auth-legal a{color:var(--steel);text-decoration:underline}
.auth-age{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding:2px 2px}
.auth-age input{width:18px;height:18px;accent-color:var(--indigo)}

/* ===== 通報・ブロック ===== */
/* .ri-foot の右端に出る「⋯」ボタン */
.ri-more-btn{background:none;border:none;color:var(--dim);font-size:17px;line-height:1;cursor:pointer;padding:0 2px;margin-left:auto;transition:color .15s}
.ri-more-btn:hover{color:var(--steel)}
/* ポップアップメニュー本体（body に append） */
.rv-menu{position:fixed;z-index:1000;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 18px rgba(30,42,68,.14);min-width:160px;overflow:hidden}
.rv-menu button{display:block;width:100%;padding:12px 16px;text-align:left;background:none;border:none;font-family:var(--sans);font-size:13px;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line-2)}
.rv-menu button:last-child{border-bottom:none;color:#b03030}
.rv-menu button:hover{background:var(--panel)}

/* ===== コメント機能 ===== */
/* 吹き出しボタン（like-btn と並んで表示） */
.cmt-btn{background:none;border:none;cursor:pointer;font-size:12px;color:var(--sub);padding:2px 4px;border-radius:5px;display:inline-flex;align-items:center;gap:3px;font-family:var(--sans);line-height:1;transition:color .15s}
.cmt-btn svg{width:14px;height:14px;display:block}
.cmt-btn:active{opacity:.65}
/* ホームのrc-user行内でもml:0で隣接表示 */
.rc-user .cmt-btn{font-size:11px}

/* コメントシート固有の高さ調整 */
.cmt-sheet{display:flex;flex-direction:column;max-height:64vh}
.cmt-list{flex:1;overflow-y:auto;padding:4px 0 8px;min-height:60px}

/* コメントアイテム */
.cmt-item{padding:12px 0;border-bottom:1px solid var(--line-2)}
.cmt-item:last-child{border-bottom:none}
.cmt-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cmt-ua{width:24px;height:24px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex:0 0 24px}
.cmt-un{font-size:13px;font-weight:600}
.cmt-dt{font-size:11px;color:var(--dim);margin-left:2px}
.cmt-del{margin-left:auto;background:none;border:none;cursor:pointer;font-size:11px;color:var(--dim);padding:2px 6px;border-radius:4px;font-family:var(--sans)}
.cmt-del:hover{color:#c0392b}
.cmt-body{font-size:13px;line-height:1.7;color:#454b59}

/* コメント入力エリア */
.cmt-input-area{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.cmt-input-area textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--sans);font-size:13px;color:var(--ink);outline:none;resize:none;background:var(--panel);line-height:1.6}
.cmt-input-area textarea:focus{border-color:var(--indigo);background:#fff}