/* =========================================================
  deli-check.com style.css (整理整頓版 / 1ファイル運用)
  目的：
  - 重複定義（:root / mosaic / filterBox / chip / reaction-pill 等）を統合
  - “後ろ勝ち”の上書き地獄を止める
========================================================= */

/* ===== Tokens ===== */
:root{
  /* Base */
  --bg:#f7f7f8;              /* 上品グレー */
  --card:#ffffff;
  --soft:#f9fafb;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.10);

  /* Brand (赤) */
  --brand:#9f1239;           /* deep red */
  --brand2:#be123c;          /* a bit brighter */
  --accent:var(--brand2);    /* 既存互換 */
  --accent2:#111827;

  /* Status */
  --ok:#10b981;
  --okbg:rgba(16,185,129,.08);
  --okline:rgba(16,185,129,.25);

  /* UI */
  --star:#f59e0b;
  --shopbg:#eff6ff;
  --shopline:#cfe7ff;

  --shadow:0 12px 30px rgba(15,23,42,.08);
}

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:system-ui,-apple-system,"Noto Sans JP",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.92}

/* ===== Layout ===== */
.container{max-width:1100px;margin:0 auto;padding:16px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:1fr}
@media(min-width:920px){.grid.two{grid-template-columns:1.25fr .75fr}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}
.card + .card{margin-top:12px}

.h1{font-size:22px;font-weight:900;margin:0 0 6px}
.h2{font-size:18px;font-weight:900;margin:0 0 10px}
.p{margin:6px 0;color:var(--muted);line-height:1.65}
.small{font-size:12px;color:var(--muted);line-height:1.6}
.hr{height:1px;background:var(--line);margin:12px 0}

/* 互換（title/meta/kv） */
.kv{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
.kv .title, .title{font-weight:900;font-size:18px;line-height:1.25}
.kv .meta, .meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ===== Header ===== */
.header{
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.header-inner{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:12px 16px;max-width:1100px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{
  width:36px;height:36px;border-radius:10px;background:var(--accent);
  display:grid;place-items:center;color:#fff;font-weight:800;flex:0 0 auto;
}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-title{
  font-weight:900;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-sub{
  font-size:12px;color:var(--muted);font-weight:800;line-height:1.2;
  white-space:nowrap;
}
@media(max-width:520px){ .brand-sub{display:none;} }

.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* ===== Buttons / Badges ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:#fff;font-weight:900;color:var(--accent2);
  cursor:pointer; user-select:none;
}
.btn:hover{background:rgba(17,24,39,.02)}
.btn:active{transform:translateY(1px)}
.btn.small{padding:8px 10px;border-radius:10px;font-weight:900}

/* 投稿は赤（既存 primary を維持） */
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(.97)}

/* ボタン色分け：検索=薄緑 / 写真=薄青 / 投稿=赤 */
.btn.btn-search{
  background: rgba(0, 180, 90, .12);
  border: 1px solid rgba(0, 180, 90, .28);
  color: rgba(0, 120, 60, 1);
}
.btn.btn-photo{
  background: rgba(0, 120, 255, .12);
  border: 1px solid rgba(0, 120, 255, .28);
  color: rgba(0, 80, 170, 1);
}
.btn.btn-post{
  background: #e60012;
  border: 1px solid rgba(0,0,0,.08);
  color: #fff;
}

.badge{
  display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  color:var(--muted);font-size:12px;font-weight:900;
}

/* ===== Forms ===== */
.searchbar{display:flex;gap:10px;flex-wrap:wrap}
.input, select, textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:14px;
  outline:none;
}
.input:focus, select:focus, textarea:focus{
  border-color: rgba(212,0,42,.35);
  box-shadow: 0 0 0 4px rgba(212,0,42,.08);
}
textarea{min-height:120px; resize:vertical}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.col{flex:1;min-width:220px}

/* ===== List item (共通カード) ===== */
.list{display:grid;gap:10px}
.item{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;
}
.thumb{
  width:96px;height:72px;border-radius:12px;background:var(--soft);
  border:1px solid var(--line);overflow:hidden;flex:0 0 auto;position:relative;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.item-main{flex:1;min-width:0;text-align:left}
.item-title{font-weight:900}
.item-sub{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.45}
.item-right{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* ランキング/最新の“店舗部分”だけ薄水色（既存互換） */
.rank-scope .item-main,
.latest-scope .item-main{
  background: var(--shopbg);
  border: 1px solid var(--shopline);
  border-radius: 12px;
  padding: 10px 12px;
}

/* ===== Notice ===== */
.notice{
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(212,0,42,.25);
  background:rgba(212,0,42,.06);
  color:#7f1d1d;
  font-weight:900;
  line-height:1.6;
}
.notice.ok{border-color:var(--okline);background:var(--okbg);color:#065f46}

.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ===== Star rating (投稿フォーム) ===== */
.rating-block{margin-top:12px}
.rating-label{font-size:12px;color:var(--muted);font-weight:900;margin-bottom:6px;display:block}
.rating{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rating .stars{display:inline-flex;gap:8px;user-select:none;flex-wrap:nowrap;align-items:center}
.star-btn{
  width:34px;height:34px;padding:0;
  border:1px solid var(--line);background:#fff;border-radius:12px;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  display:grid;place-items:center;
}
.star-btn:hover{background:rgba(17,24,39,.02)}
.star-btn:active{transform:translateY(1px)}
.star-btn svg{width:22px;height:22px;display:block}
.star-btn .st{fill: rgba(107,114,128,.12);stroke: rgba(107,114,128,.65);stroke-width: 1.2}
.star-btn.is-on{border-color: rgba(245,158,11,.30);background: rgba(245,158,11,.10)}
.star-btn.is-on .st{fill: rgba(245,158,11,.95);stroke: rgba(245,158,11,.95)}
.rating-value{min-width:44px;text-align:right;font-size:12px;color:var(--muted);font-weight:900}
.stars.orange{display:inline-block;color:var(--star);letter-spacing:1px;font-weight:900}

/* ===== Chips (共通 / filterで使用) ===== */
.chipRow{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){
  .chipRow{flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
}
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding: 8px 12px;border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}
.chip:hover{background:rgba(17,24,39,.02)}
.chip:active{transform:translateY(1px)}
.chip.is-active{
  background: rgba(230,0,18,.12);
  border-color: rgba(230,0,18,.45);
  box-shadow: inset 0 0 0 2px rgba(230,0,18,.18);
}

/* ===== FilterBox（薄赤） ===== */
.filterBox{
  background: rgba(230,0,18,.06);
  border: 1px solid rgba(230,0,18,.18);
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0;
}
.filterSummary{
  cursor: pointer;
  font-weight: 900;
  display:flex;
  gap:10px;
  align-items:center;
  padding: 6px 2px 10px;
}
.filterHint{margin-left:auto;font-size:12px;opacity:.7}
.filterSec{padding:10px 0;border-top:1px solid rgba(0,0,0,.06)}
.filterLabel{font-size:13px;font-weight:900;margin-bottom:8px}

.filterFoot{padding-top:10px;display:flex;justify-content:flex-end}
.resetBtn{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration:none;
  font-weight: 900;
}

/* ===== Search result (1カラム細め) ===== */
.resultList{display:flex;flex-direction: column;gap: 10px;margin-top: 12px}
.shopCard{
  display:flex;gap:10px;align-items:center;
  padding:10px 12px;border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;text-decoration:none;
}
.shopThumb{width:54px;height:54px;border-radius:12px;background:rgba(0,0,0,.06);flex:0 0 auto}
.shopBody{min-width:0;flex:1 1 auto}
.shopTitle{font-weight:1000;line-height:1.2}
.shopMeta{font-size:12px;opacity:.75;margin-top:2px}
.shopScore{font-size:12px;margin-top:4px;opacity:.9}
.shopScore .stars{font-weight:1000}
.shopScore .count{opacity:.75}
.shopRight{flex:0 0 auto}

/* ===== Photos grid (shop/review) ===== */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:520px){.photos{grid-template-columns:repeat(2,1fr)}}
.ph{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.ph img{width:100%;height:140px;object-fit:cover;display:block}

/* ===== Gallery mosaic（重複削除・これだけ） ===== */
.mosaic{
  display:grid;
  gap:8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media(max-width:420px){
  .mosaic{ grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}
@media(min-width:820px){
  .mosaic{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.m-item{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  display:block;
  aspect-ratio: 4 / 5;
}
.m-item img{width:100%;height:100%;object-fit:cover;display:block}
.m-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:8px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  color:#fff;
}
.m-title{font-weight:900;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-sub{margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.m-sub .small{ color:rgba(255,255,255,.92) }
@media(max-width:420px){ .m-sub{ display:none; } }

/* ===== Reactions ===== */
.reaction-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}
@media (max-width: 640px){
  .reaction-grid{ grid-template-columns: 1fr; }
}
.reaction-pill{
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background:#fff;
}
.reaction-pill.rose{ background: #fff5f7; border-color:#ffd2db; }
.reaction-pill.green{ background: #d1fae5; border-color:#6ee7b7; }
.reaction-pill.red{ background: #fee2e2; border-color:#fecaca; }
.reaction-title{ font-weight: 900; font-size: 14px; }
.reaction-sub{ font-size: 12px; color: #6b7280; font-weight: 800; margin-top: 2px; }
.reaction-num{ font-weight: 900; font-size: 34px; color: #111827; line-height: 1; }

/* ===== Before / After（画像がデカすぎ問題対策） ===== */
.before-after{margin-top:16px;gap:12px}
.ba-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}
.ba-label{
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
  background: rgba(15,23,42,.04);
}
.ba-image{aspect-ratio:4/3;max-height:220px}
.ba-image img{width:100%;height:100%;object-fit:cover;display:block}
.ba-caption{padding:10px 12px;font-size:12px;color:#334155;line-height:1.6}
.ba-item.bad{ border-color: rgba(190,18,60,.20); }
.ba-item.good{ border-color: rgba(16,185,129,.20); }
.ba-vs{
  width: 44px; height: 44px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.12);
  color: var(--brand);
  font-weight: 1000;
}
@media (max-width: 720px){ .ba-image{ max-height: 34vh; } }

/* ===== Misc ===== */
.share-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.footer{color:var(--muted);font-size:12px;margin:18px 0;text-align:center}

.badge-featured{
  position:absolute;top:8px;left:8px;
  padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:900;
  background:rgba(245,158,11,.95);
  color:#111827;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.shop-hero{
  background: var(--shopbg);
  border: 1px solid var(--shopline);
  border-radius: 12px;
  padding: 12px;
}
.linkGrid6{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  margin-top:12px;
}
@media(min-width:780px){
  .linkGrid6{grid-template-columns:1fr 1fr;}
}

.linkCard{
  display:block;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.linkCard:hover{transform: translateY(-1px);}
.linkCard:active{transform: translateY(0px);}

.lc-title{font-weight:1000; font-size:14px; line-height:1.25;}
.lc-sub{margin-top:6px; font-size:12px; opacity:.75; line-height:1.45;}

/* うっすい背景色（おまけ感） */
.linkCard.l-ghost{background: rgba(230,0,18,.06); border-color: rgba(230,0,18,.14);}
.linkCard.l-howto{background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.18);}
.linkCard.l-int{background: rgba(99,102,241,.07); border-color: rgba(99,102,241,.18);}
.linkCard.l-route{background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.18);}
.linkCard.l-gear{background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.18);}
.linkCard.l-rank{background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12);}

.linkGrid6{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  margin-top:12px;
}
@media(min-width:780px){
  .linkGrid6{grid-template-columns:1fr 1fr;}
}

.linkCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  text-decoration:none;
}
.linkCard:hover{transform: translateY(-1px);}
.linkCard:active{transform: translateY(0px);}

.lc-left{display:flex;align-items:center;gap:12px;min-width:0;}
.lc-ico{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.08);
  flex:0 0 auto;
}
.lc-txt{min-width:0;}
.lc-title{font-weight:1000;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lc-sub{margin-top:4px;font-size:12px;opacity:.75;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lc-arrow{font-size:22px;opacity:.35;font-weight:1000;flex:0 0 auto;}

.linkCard.l-ghost{background: rgba(230,0,18,.06); border-color: rgba(230,0,18,.14);}
.linkCard.l-howto{background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.18);}
.linkCard.l-int{background: rgba(99,102,241,.07); border-color: rgba(99,102,241,.18);}
.linkCard.l-route{background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.18);}
.linkCard.l-gear{background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.18);}
.linkCard.l-rank{background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12);}