:root{--bg:#f6f7fb;--card:#fff;--ink:#0f172a;--muted:#64748b;--p:#5b61ff}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6
}
a{color:var(--p);text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:0 16px}

/* Header */
.site-header{background:#fff;box-shadow:0 1px 0 rgba(15,23,42,.06);position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:800;color:var(--p);font-size:22px}
.nav .link{margin-right:12px}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:12px;background:#eef0ff;color:var(--p);border:0}
.btn.primary{background:var(--p);color:#fff}
.site-footer{padding:24px 0;color:var(--muted);font-size:12px}

/* Text */
h1{font-size:24px;margin:18px 0 8px}
h2{font-size:22px;margin:14px 0 8px}
h3{font-size:16px;margin:10px 0 6px}
.sub{color:var(--muted)}
.hero{margin:22px 0 8px}

/* Base form controls */
.search-form,.form-vertical{
  display:block;background:var(--card);border-radius:16px;padding:14px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);margin:8px 0 16px
}
.search-form .field,.form-vertical .group{display:block;margin:10px 0}
.search-form label,.form-vertical label{display:block;font-weight:700;margin-bottom:6px}

input[type="text"],input[type="url"],input[type="number"],input[type="date"],input[type="time"],select,textarea{
  width:100%;max-width:100%;min-width:0;border:1px solid #e2e8f0;border-radius:10px;padding:.55rem .7rem;background:#fff
}
textarea{line-height:1.5}
.legend{font-weight:800;margin:14px 0 6px}
.hint{color:var(--muted);font-size:12px;margin-top:4px}
.group-grid{display:grid;grid-template-columns:110px 1fr;gap:8px 12px}
.group-inline{display:grid;grid-template-columns:130px 130px 1fr;gap:8px 12px;align-items:center}
.group-inline.stack-sm{grid-template-columns:130px 130px 1fr}
.stack>*+*{margin-top:8px}
.actions{margin:14px 0}

/* ▼ここが今回の修正（スマホで長文ラベルを折り返し表示） */
.actions label{
  display:flex;align-items:center;gap:6px;
  flex:1 1 260px;               /* ボタンの横でも自動折返し */
  flex-wrap:wrap;               /* ラベル内で折返し可 */
  white-space:normal;           /* 改めて折返し許可 */
  line-height:1.5;
}
.actions label span{
  min-width:0;                  /* Flexのはみ出し抑制 */
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* ▲修正ここまで */

.muted{color:var(--muted)}
.hidden{display:none !important}
.chk{margin-right:12px}
.form-break{display:block;flex-basis:100%;height:0;margin:6px 0}

/* === 検索フォーム（PCを綺麗に） === */
.search-panel{margin:8px 0}
.search-panel>summary{
  cursor:pointer;font-weight:800;padding:12px 14px;border-radius:12px;background:#eef0ff;color:var(--p);
  list-style:none;width:max-content;box-shadow:0 1px 0 rgba(15,23,42,.04)
}
.search-panel[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.sf-shell{border:1px solid #e5e7eb;border-top:0;border-radius:0 0 12px 12px;background:#fff}
.sf-inner{padding:16px}

/* グリッドユーティリティ（PCは12分割） */
.sf-grid{display:grid;gap:14px 18px}
@media (min-width:980px){
  .sf-grid{grid-template-columns:repeat(12,1fr)}
  .col-12{grid-column:span 12}
  .col-6{grid-column:span 6}
  .col-4{grid-column:span 4}
  .col-3{grid-column:span 3}
}
@media (max-width:979px){
  .col-12,.col-6,.col-4,.col-3{grid-column:1 / -1}
}

/* 詳細条件カード */
.filter-card{border:1px dashed #e5e7eb;border-radius:12px;padding:16px;background:#fcfdff}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:flex;align-items:center;gap:8px;background:#f4f6ff;border:1px solid #e0e7ff;color:#374151;
  padding:.5rem .8rem;border-radius:10px
}
.chip input{margin:0}
@media (max-width:768px){
  .chips-perf{display:grid;grid-template-columns:1fr;gap:10px}
}

/* List */
.card-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:14px}
.card{background:#fff;border-radius:14px;box-shadow:0 6px 22px rgba(15,23,42,.06);overflow:hidden}
.card-link{display:flex;gap:12px;color:inherit;padding:10px}
.card .thumb{width:120px;height:80px;object-fit:cover;border-radius:8px}
.card .meta .title{font-weight:800}

/* ===== 詳細ページ ===== */
.detail-wrap{display:block}
.detail-grid{display:grid;gap:18px}
@media (min-width:980px){
  .detail-grid{grid-template-columns:minmax(280px,420px) 1fr;align-items:start}
}
.detail-title{font-size:22px;margin:0 0 6px;overflow-wrap:anywhere;word-break:break-word}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}
.detail-img{max-width:100%;height:auto;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.06);display:block}
@media (max-width:899.98px){
  .detail-img{width:90%;margin:0 auto}
}
.meta-list{margin:8px 0;padding:0;list-style:none}
.meta-list li{margin:4px 0}
.meta-k{display:inline-block;width:68px;color:#64748b}
.times{margin:6px 0 8px;font-weight:600}
.section{margin:12px 0}
.section h3{margin:0 0 6px;font-size:16px}
.section .body{white-space:normal;line-height:1.7;overflow-wrap:anywhere;word-break:break-word}

/* URL行 */
.url-list{display:grid;gap:6px}
.url-row{display:grid;grid-template-columns:minmax(3.2em,max-content) 1fr;gap:10px;align-items:center}
.url-label{padding:.22rem .5rem;border-radius:9999px;background:#eef0ff;color:#4f46e5;font-weight:700;font-size:12px;white-space:nowrap}
.url-link{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.url-link a{display:inline-block;text-decoration:underline;color:#1f2937;max-width:100%;overflow-wrap:anywhere;word-break:break-word}

/* 旧構造(リンクのカード型)にも対応 */
.link-list{display:flex;flex-direction:column;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.link-item a{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  text-decoration:none;border:1px solid #e5e7eb;border-radius:10px;padding:.5rem .7rem
}
.link-item small{color:#6b7280;white-space:nowrap}
.link-item span{min-width:0;overflow-wrap:anywhere;word-break:break-word}

/* 広告 */
.ad-slot{margin:10px 0 0;text-align:center}
.ad-slot .ad-pr{font-size:12px;color:#6b7280;margin:0 0 4px}
.ad-slot img{max-width:100%;height:auto;border:0;display:block}

/* スマホ調整 */
@media (max-width:768px){
  h1{font-size:22px}
  .group-grid{grid-template-columns:100px 1fr}
  .group-inline.stack-sm{grid-template-columns:1fr}
  .group-inline.stack-sm > *{width:100%}
  .card .thumb{width:96px;height:64px}
}

/* 投稿フォームの日時2カラム（スマホ1カラム） */
.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.time-grid > *{min-width:0}
@media (max-width:640px){
  .time-grid{grid-template-columns:1fr}
}

/* iOS Safari 向け：入力の高さを統一（ズレ/欠け解消） */
input,select,textarea,button{font-size:16px;line-height:1.4}
input[type="date"],input[type="time"]{
  -webkit-appearance:none;appearance:none;
  height:44px;line-height:1.3;padding:.55rem .7rem;
}
select{-webkit-appearance:none;appearance:none}