@charset "UTF-8";

/* =========================================================
   anshin/assets/style.css
   detail.php など共通で使う最低限の見た目
========================================================= */

:root{
  --bg: #f5f0e6;
  --card: rgba(255,255,255,0.92);
  --text: #2b2b2b;
  --muted: #666;
  --border: rgba(0,0,0,0.10);
  --shadow: rgba(0,0,0,0.10);

  --brand: #2f6bff;
  --brand2: #ff8a2b;

  --ok: #2e7d32;
  --ng: #9e2a2b;
  --info: #7a5b3c;

  --radius: 16px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg) url("saigai-bg.png") repeat;
  line-height: 1.7;
}

/* =========================================================
   Layout
========================================================= */

.main{
  width: min(980px, calc(100% - 24px));
  margin: 18px auto 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px var(--shadow);
  padding: 18px 18px 22px;
}

@media (max-width: 520px){
  .main{
    margin: 12px auto 18px;
    padding: 14px 12px 16px;
  }
}

/* =========================================================
   Headings / notes
========================================================= */

h1{
  font-size: 1.35rem;
  margin: 0 0 8px;
  line-height: 1.35;
}

.note{
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0 0 14px;
}

/* 投稿バッジ */
.badge-kamember{
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,255,0.25);
  background: rgba(47,107,255,0.10);
  color: #2445a8;
  font-size: 0.80rem;
  vertical-align: middle;
}

/* =========================================================
   Photo area
========================================================= */

.photo-area{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 14px;
}

@media (max-width: 640px){
  .photo-area{
    grid-template-columns: 1fr;
  }
}

.photo-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.85);
}

.photo-item img{
  display: block;
  width: 100%;
  height: auto;
}

.photo-caption{
  padding: 8px 10px 10px;
  font-size: 0.90rem;
  color: var(--muted);
  text-align: center;
}

.photo-date{
  display: inline-block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: #777;
}

/* =========================================================
   Detail table
========================================================= */

.table-detail{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.90);
}

.table-detail th,
.table-detail td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: top;
}

.table-detail tr:last-child th,
.table-detail tr:last-child td{
  border-bottom: none;
}

.table-detail th{
  width: 180px;
  background: rgba(0,0,0,0.03);
  color: #333;
  font-weight: 700;
}

.table-detail td small{
  color: var(--muted);
}

@media (max-width: 640px){
  .table-detail th{
    width: 34%;
  }
  .table-detail th,
  .table-detail td{
    padding: 10px 10px;
  }
}

/* =========================================================
   Status badge
========================================================= */

.status-badge{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.90rem;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,0.08);
}

.status-open{
  background: rgba(46,125,50,0.14);
  color: var(--ok);
  border-color: rgba(46,125,50,0.25);
}

.status-closed{
  background: rgba(158,42,43,0.12);
  color: var(--ng);
  border-color: rgba(158,42,43,0.25);
}

.status-helped{
  background: rgba(255,138,43,0.16);
  color: #a55216;
  border-color: rgba(255,138,43,0.30);
}

/* =========================================================
   Share box
========================================================= */

.share-box-detail{
  margin: 14px 0 10px;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.88);
}

.share-box-detail strong{
  display: inline-block;
  margin-right: 8px;
}

.sns-btn{
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  margin: 6px 6px 0 0;
  background: #fff;
}

.sns-x{ color: #111; }
.sns-fb{ color: #1877f2; }
.sns-line{ color: #00b900; }

.sns-btn:hover{
  filter: brightness(0.98);
}

/* =========================================================
   Buttons
========================================================= */

.button-row{
  margin-top: 14px;
  text-align: center;
}

.btn-primary,
.btn-secondary{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid transparent;
}

.btn-primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 18px rgba(47,107,255,0.18);
}

.btn-secondary{
  background: #fff;
  color: var(--info);
  border-color: rgba(122,91,60,0.25);
}

.btn-primary:hover,
.btn-secondary:hover{
  filter: brightness(0.98);
}

/* =========================================================
   Links
========================================================= */

a{
  color: #1f63ff;
}

a:hover{
  filter: brightness(0.95);
}