/* =========================================
   style.css (Pink Light Theme) - cleaned
   - 白ベース + 淡いピンク
   - PC: 左サイドバー / SP: 上部固定ヘッダー+2列ナビ
   - 投稿カード / フォーム / ページネーション / 関連投稿（サムネ対応）
   ========================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

:root{
  /* Backgrounds */
  --bg-main: #ffffff;
  --bg-sub:  #fff5f8;
  --card:    #ffffff;

  /* Brand */
  --color-main:   #f4a6b8;
  --color-accent: #e36b8c;
  --color-soft:   #ffd1dc;

  /* Text */
  --text-main: #333333;
  --text-sub:  #777777;

  /* Border / shadow */
  --border-main: #f1c6d3;
  --shadow: 0 4px 12px rgba(227,107,140,.12);

  /* Utility */
  --danger: #e2556f;
  --danger-dark: #c83b55;
}

/* ---------- Base ---------- */
body{
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
}

/* 画像の基本（サムネ等は後で上書き） */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Layout ---------- */
.layout{
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar / Nav (PC) ---------- */
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-sub);
  border-right: 1px solid var(--border-main);
  padding: 18px 14px;
  z-index: 50;
}

/* サイトタイトル */
.site-title{
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0 0 18px;
  letter-spacing: .02em;
}
.site-title a{
  color: var(--text-main);
  text-decoration: none;
}
.site-title a:hover{ color: var(--color-accent); }

/* nav */
.nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav li + li{ margin-top: 8px; }

.nav a{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text-main);
  border-radius: 10px;
  font-size: .95rem;
  border: 1px solid transparent;
  background: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nav a:hover{
  background: var(--color-soft);
  border-color: var(--border-main);
}
.nav a.active{
  font-weight: 900;
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 6px 14px rgba(227,107,140,.18);
}

/* ---------- Main ---------- */
.main{
  margin-left: 260px;
  flex: 1;
  padding: 20px 24px;
  background: var(--bg-main);
}

/* ---------- Alerts ---------- */
.alert{
  padding: 10px 12px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-size: .9rem;
}
.alert-error{
  background: #ffe6ef;
  color: #9a1230;
  border: 1px solid #f7a9bd;
}
.alert-success{
  background: #f0fff6;
  color: #0f7b4a;
  border: 1px solid #8eddb5;
}

/* ---------- Form (Accordion) ---------- */
.bbs-form{
  background: var(--card);
  border: 1px solid var(--border-main);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.bbs-notice{
  background: var(--bg-sub);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-main);
}
.bbs-notice p{
  margin: 4px 0;
  font-size: .9rem;
  color: #7a2a3d;
  line-height: 1.55;
}

.accordion-toggle{
  width: 100%;
  border: none;
  background: var(--color-main);
  color: #fff;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.accordion-toggle:hover{ background: var(--color-accent); }
.accordion-icon{ font-size: 1.2rem; }

.accordion-body{
  padding: 16px 18px 20px;
  border-top: 1px solid var(--border-main);
}

.form-row{
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.form-row label{
  font-weight: 800;
  margin-bottom: 4px;
  font-size: .9rem;
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row textarea,
.form-row input[type="file"],
.form-row select{
  padding: 9px 10px;
  font-size: .95rem;
  border-radius: 10px;
  border: 1px solid var(--border-main);
  background: #fff;
  outline: none;
}
.form-row textarea{ resize: vertical; }
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus{
  border-color: var(--color-main);
  box-shadow: 0 0 0 4px rgba(244,166,184,.25);
}
.form-row small{
  margin-top: 4px;
  font-size: .8rem;
  color: var(--text-sub);
}
.form-actions{ text-align: right; }
.form-actions button{
  padding: 9px 16px;
  font-size: .95rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: var(--color-accent);
  color: #fff;
  font-weight: 900;
}
.form-actions button:hover{ background: #cf4f72; }

/* ---------- List / Cards ---------- */
.bbs-list{ margin-top: 10px; }
.bbs-list h1{
  margin: 0 0 10px;
  font-size: 1.15rem;
}
.bbs-list h2{
  margin: 18px 0 10px;
  padding: 10px 12px;
  background: var(--bg-sub);
  border: 1px solid var(--border-main);
  border-radius: 12px;
  font-size: 1rem;
}

.search-summary{
  font-size: .85rem;
  color: #6b5560;
  margin-bottom: 8px;
}

/* 検索フォーム */
.search-form{
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.search-form input[type="text"]{
  flex: 1 1 200px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-main);
  font-size: .9rem;
  background: #fff;
}
.search-form button{
  padding: 8px 14px;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  background: var(--color-accent);
  color: #fff;
  border-radius: 999px;
  font-weight: 900;
}
.search-form button:hover{ background: #cf4f72; }
.search-form .search-clear{
  font-size: .85rem;
  text-decoration: none;
  color: #7a6370;
}
.search-form .search-clear:hover{ text-decoration: underline; }

/* 投稿カード */
.post-card{
  background: var(--card);
  border: 1px solid var(--border-main);
  border-radius: 14px;
  padding: 16px 16px 12px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.post-card-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.post-card-main{ flex: 1; }

.post-card-name-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.post-card-name{
  color: var(--color-accent);
  font-weight: 900;
  font-size: 1.05rem;
}
.post-card-pill{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-sub);
  border: 1px solid var(--border-main);
  font-size: .75rem;
  color: #6b5560;
}

/* X / LINE / Kakao 行もこのスタイルを流用 */
.post-card-twitter-line{
  font-size: .85rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.post-card-twitter-title{
  color: #6b5560;
  font-weight: 800;
}
.post-card-twitter-line a{
  color: #1d9bf0;
  text-decoration: none;
}
.post-card-twitter-line a:hover{ text-decoration: underline; }

.post-card-meta{
  font-size: .75rem;
  color: #7a6370;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.post-card-avatar{
  flex: 0 0 auto;
}
.post-card-avatar img{
  border-radius: 14px;
  width: 120px;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--border-main);
}

/* 本文 */
.post-card-body{
  margin-top: 10px;
  font-size: .95rem;
  line-height: 1.75;
}

/* フッター */
.post-card-footer{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-main);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: .85rem;
}

.post-card-email{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.post-mail-link{
  font-size: .85rem;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 900;
}
.post-mail-link:hover{ text-decoration: underline; }

/* 削除フォーム */
.delete-form{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.delete-form input[type="password"]{
  padding: 6px 10px;
  font-size: .85rem;
  border-radius: 999px;
  border: 1px solid var(--border-main);
}
.delete-form button{
  padding: 6px 12px;
  font-size: .85rem;
  border: none;
  cursor: pointer;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-weight: 900;
}
.delete-form button:hover{ background: var(--danger-dark); }

/* ---------- Pagination ---------- */
.pagination{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .9rem;
}
.pagination a,
.pagination span{
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-main);
  text-decoration: none;
  color: var(--text-main);
  background: #fff;
}
.pagination a:hover{ background: var(--bg-sub); }
.pagination .current{
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* ---------- Related posts (1 column + thumb) ---------- */
.related-list{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.related-list li{ margin: 0; }

.related-list a{
  display: block;
  text-decoration: none;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-main);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 3px 10px rgba(227,107,140,.08);
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.related-list a:hover{
  background: var(--bg-sub);
  border-color: var(--color-main);
  box-shadow: 0 6px 16px rgba(227,107,140,.14);
}

.related-item{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* サムネ枠（PC基準：56px） */
.related-thumb{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-main);
  background: var(--bg-sub);
}
/* ここは「global img」の影響を受けないように固定 */
.related-thumb img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

.related-text{
  flex: 1;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* ---------- Footer ---------- */
.site-footer{
  text-align: center;
  padding: 20px 10px;
  background: var(--bg-sub);
  border-top: 1px solid var(--border-main);
  margin-top: 40px;
}
.site-footer .footer-contact-link{
  color: var(--color-accent);
  font-size: .95rem;
  text-decoration: none;
  font-weight: 900;
}
.site-footer .footer-contact-link:hover{ text-decoration: underline; }

/* ---------- Mobile Header / Nav ---------- */
.mobile-header,
.mobile-nav{ display: none; }

/* ---------- Admin helpers (optional) ---------- */
.admin-section{
  background: #fff;
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  border: 1px solid var(--border-main);
}
.admin-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.admin-table th,
.admin-table td{
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-main);
  vertical-align: top;
}
.admin-table th{
  background: var(--bg-sub);
  text-align: left;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 900px){
  /* PCサイドバー非表示 */
  .sidebar{ display: none !important; }

  .layout{ display: block; }

  .main{
    width: 100%;
    margin-left: 0;
    padding: 16px;
    padding-top: 170px; /* ヘッダー+2列ナビ分 */
  }

  /* スマホ固定ヘッダー */
  .mobile-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--color-accent);
    color: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(227,107,140,.25);
  }
  .mobile-site-title{
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .02em;
  }

  /* スマホ2列ナビ */
  .mobile-nav{
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: var(--bg-sub);
    border-bottom: 1px solid var(--border-main);
    z-index: 90;
    padding: 8px 10px 10px;
    display: block !important;
  }
  .mobile-nav ul{
    list-style: none;
    padding: 0;
    margin: 0 -5px;
    display: flex;
    flex-wrap: wrap;
  }
  .mobile-nav li{ width: 50%; padding: 5px; }

  .mobile-nav a{
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 8px;
    font-size: .85rem;
    border-radius: 999px;
    color: var(--text-main);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border-main);
    font-weight: 900;
  }
  .mobile-nav a:hover{ background: var(--color-soft); }
  .mobile-nav a.active{
    background: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
  }

  /* 投稿カードの右画像を少し抑える */
  .post-card-avatar img{ width: 96px; }
  /* 関連サムネは40px */
  .related-thumb{
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
}

@media (min-width: 1024px){
  /* PCで投稿画像を少し大きめに（関連サムネには影響しない） */
  .post-card-avatar img{
    width: 160px;
  }
}
/* ===== FORCE FIX: related thumbs ===== */
.related-item{ display:flex !important; align-items:center !important; gap:12px !important; }

.related-thumb{
  display:block !important;
  width:125px !important;
  height:125px !important;
  flex:0 0 125px !important;
  overflow:hidden !important;
  border-radius:10px !important;
}

.related-thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
}
@media (max-width: 900px){
  .related-thumb{
    width:65px !important;
    height:65px !important;
    flex:0 0 65px !important;
  }
}

/* サムネ */
.post-card-avatar img{
  width: 100%;
max-width: 480px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
border-radius: 18px;
}
.post-card-header{
  flex-direction: column;
}

.post-card-avatar{
  margin-top: 10px;
}
@media (min-width: 1024px){
  .post-card-avatar img{
    width: 220px;
  }
}