:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#667085;
  --border:#e6e8ef;
  --primary:#d94e61;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(17,24,39,.06);
  --radius:16px;
  --container-max:1200px;
}

/* =========================
   Base
========================= */
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  color: var(--text);
  background: var(--bg);
}

.container{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 24px 20px;
}

a{ color: inherit; }
.link{
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.link:hover{ text-decoration: underline; }

.brand{
  font-weight: 900;
  letter-spacing: .2px;
}

.h1{ font-size:22px; font-weight:900; margin:0 0 8px; }
.h2{ font-size:18px; font-weight:900; margin:0 0 8px; }
.muted{ color:var(--muted); font-size:13px; margin-top:6px; }

.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  background: var(--card);
}

.divider{
  height:1px;
  background: var(--border);
  margin: 14px 0;
}

/* =========================
   Header / Nav (site_parts.php)
========================= */
.topbar{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}

.topbar__inner{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 16px 20px;
}

.site-header__brand{
  font-weight:900;
  text-decoration:none;
  color:inherit;
}

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

.site-nav__link{
  text-decoration:none;
  color:inherit;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid transparent;
}

.site-nav__link:hover{
  border-color: var(--border);
  background:#fff;
}

.site-nav__link.is-active{
  border-color: var(--border);
  background:#fff;
  font-weight:800;
}

/* =========================
   Forms / Buttons
========================= */
.form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.input, .select, .textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:16px;
  background:#fff;
  color: var(--text);
}
.textarea{ resize: vertical; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{ background:#f7f8fc; }

.btn.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.btn.primary:hover{ filter: brightness(.97); }

.badge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
}

/* =========================
   Layout helpers
========================= */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.list{
  display:grid;
  gap:10px;
}

.grid-2col{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.filters-grid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
.filters-actions{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.help-note{ margin-top:6px; }

.actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================
   Item (cards in list)
========================= */
.item{
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  background:#fff;
}
.item__title{ font-weight:900; }
.item__meta{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
  line-height:1.45;
  white-space:pre-wrap;
}

/* =========================
   Photos
========================= */
.photos{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.photo{
  border:1px solid var(--border);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
}
.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:1/1;
  display:block;
}

/* =========================
   Shops Index (shops/index.php)
========================= */
.shop-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.shop-ava{
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  flex:0 0 38px;
  font-size:18px;
  line-height:1;
  overflow:hidden;
}
.shop-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-body{ flex:1; min-width:0; }

/* =========================
   Visits Index (visits/index.php)
========================= */
.log-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.log-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  flex:0 0 34px;
  font-size:16px;
  line-height:1;
  overflow:hidden;
  margin-top:2px;
}
.log-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.log-body{ flex:1; min-width:0; }

.log-title-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.log-date{ font-weight:900; }

.pager{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.pager__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   Rank Common (/rank/*)
========================= */
.rank-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.rank-avatar{
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  flex:0 0 38px;
  font-size:18px;
  line-height:1;
  overflow:hidden;
}
.rank-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.rank-body{ flex:1; min-width:0; }

.rank-title-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.rank-actions{ margin-top:10px; }

/* =========================
   Home (/index.php)
========================= */
.top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.stats-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.stats-card{ padding:12px; margin:0; }
.stats-num{ margin-top:4px; font-weight:900; }

.rank-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.rank-card{ padding:12px; margin:0; }

.rank-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.scrollbox{
  max-height:520px;
  overflow:auto;
  padding-right:6px;
}

.top-recent-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   Shop Show (shops/show.php)
========================= */
.shop-hero{
  display:grid;
  grid-template-columns: 1fr; /* mobile first */
  gap: 14px;
  align-items: stretch;
}

.shop-hero__img{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  min-height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shop-hero__img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.rank-ava{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 44px;
  background:#fff;
}

.shop-hero__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  min-width:0;
}

.shop-sub{ margin-top:4px; line-height:1.5; }

.shop-badges{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.shop-meta{
  display:grid;
  gap: 0;
}
.meta-row{
  display:grid;
  grid-template-columns: 1fr; /* mobile first */
  gap:4px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.meta-row:last-child{ border-bottom:none; }
.meta-label{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}
.meta-value{ min-width:0; }

.shop-kv-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.visit-title{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================
   Utilities
========================= */
.link-reset{ text-decoration:none; color:inherit; }

.u-mt-4{ margin-top:4px; }
.u-mt-6{ margin-top:6px; }
.u-mt-8{ margin-top:8px; }
.u-mt-10{ margin-top:10px; }
.u-mt-12{ margin-top:12px; }

.u-h-8{ height:8px; }
.u-h-10{ height:10px; }
.u-h-12{ height:12px; }
.u-h-16{ height:16px; }

.fw-700{ font-weight:700; }
.fw-800{ font-weight:800; }
.fw-900{ font-weight:900; }

.m-0{ margin:0; }



/* =========================
   Center alignment fix
   (site_header() uses .site-container / .site-header__inner)
========================= */
:root{
  --container-max:1200px;
}

/* 本文側：.site-container を中央寄せ＆幅統一 */
.site-container{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 24px 20px;
}

/* ヘッダー側：内側も同じ幅に揃える */
.site-header__inner{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 16px 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* =========================
   Footer
========================= */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:40px;
  padding:20px 0;
  background:#fff;
}

.site-footer__inner{
  text-align:center;
  font-size:13px;
}

/* =========================
   Fix: /rank/stale.php 店名が縦になる問題
   - .rank-row が幅いっぱいにならず
   - .rank-body が伸びずに極細になっている
========================= */

/* リンク(item)の中身(rank-row)を横幅いっぱいに */
.item .rank-row{
  width: 100%;
}

/* 本文は必ず伸びる & 縮むときも崩れない */
.rank-body{
  flex: 1 1 auto;
}

/* 長い店名でも“1文字改行”にならないようにする */
.rank-body .item__title{
  white-space: normal;
  word-break: break-word; /* 英数字の長い塊も折り返す */
}

/* ついでに：item が space-between で中身を潰すのを抑止（安全策） */
.item{
  justify-content: flex-start;
  align-items: flex-start;
}

/* =========================
   FINAL FIX for /rank/* (rank-ava conflict)
========================= */

.rank-avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
}
.rank-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 本文は必ず伸ばす（縦積み防止の要） */
.rank-row .rank-body{
  flex:1 1 auto;
  min-width:0;
}

/* 念のため：item内のrank-rowは横幅いっぱい */
.item > .rank-row{
  width:100%;
}

/* =========================
   Shop Show Hero polish
   (shops/show.php)
========================= */

/* カード内のヒーローを少し“面”に見せる */
.shop-hero{
  gap:18px;
}

/* 画像：比率と丸み、影を少し強める */
.shop-hero__img{
  border-radius: 18px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 40px rgba(17,24,39,.08);
}

/* 画像がないときのプレースホルダー（🍜）も同じ雰囲気に */
.shop-hero__img .rank-ava{
  font-size: 56px;
  background: linear-gradient(180deg, rgba(217,78,97,.08), rgba(17,24,39,.02));
}

/* タイトル：少し大きく、行間を詰める */
.shop-head .h1{
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: .2px;
  margin:0;
}

/* サブ情報：読みやすく */
.shop-sub{
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* バッジ：統一感（余白と角） */
.shop-badges{
  margin-top: 12px;
  gap: 8px;
}
.shop-badges .badge{
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
}

/* メタ行：行間と区切りを少し強調 */
.shop-meta .meta-row{
  padding: 12px 0;
}

/* ボタン列：密度を上げる */
.shop-kv-actions{
  margin-top: 2px;
  gap: 10px;
}
.shop-kv-actions .btn{
  height: 46px;
  border-radius: 14px;
}

/* 店詳細ページ内の “最新の訪問ログ” のカード感を少し上げる */
.visit-item{
  background:#fff;
  box-shadow: 0 10px 24px rgba(17,24,39,.05);
}
/* =====================================================
   ADD: Public pages (new markup support)
   - /index.php /shops/index.php /visits/index.php /rank/*
   - append to the end of site.css
===================================================== */

/* ---------- Page header / actions ---------- */
.page-head{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}
.page-head h1{
  font-size:26px;
  font-weight:900;
  margin:0;
  letter-spacing:.2px;
}
.page-head p{
  margin:0;
}

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

.btn--ghost{
  background:#fff;
  border-color: var(--border);
}
.btn--ghost:hover{ background:#f7f8fc; }

/* ---------- Sections ---------- */
.section{
  margin-top:16px;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.section-head h2{
  font-size:18px;
  font-weight:900;
  margin:0;
}

/* ---------- Cards grid (for visits/shops/home) ---------- */
.cards{
  display:grid;
  gap:10px;
}

/* card inner parts */
.card__body{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.card__title{
  font-weight:900;
  line-height:1.35;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card__title a{ text-decoration:none; }
.card__title a:hover{ text-decoration:underline; }

.card__meta{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.card__row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  font-size:13px;
}

.card__memo{
  margin:0;
  color:var(--text);
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  border-top:1px solid var(--border);
  padding-top:10px;
}

/* 未訪問強調（既存と整合） */
.item--no-visit,
.card.item--no-visit{
  border-color: rgba(217,78,97,.35);
  box-shadow: 0 12px 34px rgba(217,78,97,.10);
}

/* ---------- <details> filters ---------- */
.filters{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding: 10px 12px;
}
.filters > summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.filters > summary::-webkit-details-marker{ display:none; }

.filters__body{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}

/* ---------- Form layout (new markup) ---------- */
.form__row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form__row label{
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}
.form__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.form__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:4px;
}

/* input/select/textarea: 既存 .input .select .textarea もあるので両対応 */
.form input[type="text"],
.form input[type="number"],
.form input[type="date"],
.form select,
.form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:16px;
  background:#fff;
  color: var(--text);
}

/* ---------- Two-column panels (home) ---------- */
.two-col{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.panel{
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  background:#fff;
}

/* ---------- Rank list ---------- */
.rank{
  margin:0;
  padding-left: 22px; /* ordered list default spacing */
  display:grid;
  gap:8px;
}
.rank li{
  line-height:1.55;
}
.rank--big{
  padding-left: 0;
  list-style:none;
  gap:10px;
}

.rank__item{
  border:1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  background:#fff;
  padding: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.rank__no{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background:#fff;
  flex:0 0 32px;
}

.rank__body{
  flex:1 1 auto;
  min-width:0;
}
.rank__title{
  font-weight:900;
  line-height:1.35;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rank__title a{ text-decoration:none; }
.rank__title a:hover{ text-decoration:underline; }

.rank__meta{
  margin-top:6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  font-size:13px;
}

/* ---------- Pager (new markup compatibility) ---------- */
.pager__info{ font-size:13px; }
.pager__links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pager__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  text-decoration:none;
}
.pager__btn:hover{ background:#f7f8fc; }


/* =====================================================
   Desktop / Large screens (まとめて後半)
   - min-width 系はここに集約
===================================================== */

/* grid 2 columns */
@media (min-width: 720px){
  .grid{ grid-template-columns: 1fr 1fr; }
  .photos{ grid-template-columns: repeat(6, 1fr); }
}

/* 2col helpers / filters */
@media (min-width: 820px){
  .grid-2col{ grid-template-columns:1fr 1fr; }
  .filters-grid{ grid-template-columns:1fr 1fr; }
  .cards{
    grid-template-columns: 1fr 1fr;
  }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .site-header__inner{
    gap:10px;
    align-items:flex-start;
  }
  .site-nav{
    justify-content:flex-start;
    gap:10px;
  }
  .form__grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* home */
@media (min-width: 820px){
}

/* shop show */
@media (min-width: 900px){
  .meta-row{
    grid-template-columns: 110px 1fr;
    gap:10px;
  }
  .shop-hero{
    grid-template-columns: 420px 1fr; /* ここが効く */
    gap: 20px;
  }
  .shop-hero__img{
    min-height: 280px;
  }
  .shop-head .h1{
    font-size: 32px;
  }
}
/* home rank */
@media (min-width: 980px){
  .rank-grid{ grid-template-columns:1fr 1fr 1fr; }
  .two-col{
    grid-template-columns:1fr 1fr;
  }
}


@media (min-width: 1000px){
  .container{
    padding-left: 32px;
    padding-right: 32px;
  }  
  .site-container{ padding-left: 32px; padding-right: 32px; }
  .site-header__inner{ padding-left: 32px; padding-right: 32px; }
}

/* 3カラム（広め） */
@media (min-width: 1100px){
  .cards{
    grid-template-columns: 1fr 1fr 1fr;
  }
}