/* =========================================================
   HARICHERRY — 投稿コーナー（クイズ・2択・あるある）
   色や角丸は ui.css のトークンだけを使う（新しい色は足さない）
   ========================================================= */

/* ---------------------------------------------------------------- 一覧 */
.ulist{display:grid; gap:18px}

.ubarrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.ucount{color:var(--muted); font-size:13px; font-weight:700}

.ufilter{display:flex; gap:7px; flex-wrap:wrap}
.uchip{
  display:inline-block; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  color:var(--muted); font-size:13px; font-weight:700; text-decoration:none;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.uchip:hover{background:var(--surface-2); color:var(--ink)}
.uchip.is-on{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}

.useg{display:inline-flex; background:var(--surface-2); border-radius:var(--r-pill); padding:3px; gap:2px}
.useg__b{
  padding:6px 15px; border-radius:var(--r-pill); text-decoration:none;
  color:var(--muted); font-size:13px; font-weight:700;
}
.useg__b.is-on{background:var(--surface); color:var(--ink); box-shadow:var(--hard)}

.ugrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ugrid--narrow{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.ucard{
  display:block; padding:16px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--hard); text-decoration:none; color:var(--ink);
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.ucard:hover{transform:translateY(-2px); box-shadow:var(--hard-lg)}
.ucard__cat{
  display:inline-block; margin-bottom:8px; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-2); font-size:11px; font-weight:700;
}
.ucard__title{
  margin:0 0 10px; font-size:15px; font-weight:700; line-height:1.6;
  overflow-wrap:anywhere;
}
.ucard__meta{
  margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  color:var(--muted); font-size:12px; font-weight:700;
}
.urate{color:var(--ink)}
.urate.is-hard{color:var(--accent)}
.uheart{color:var(--accent)}

/* 2択の割合バー */
.ubar{display:flex; height:8px; border-radius:var(--r-pill); overflow:hidden; background:var(--surface-2); margin-bottom:8px}
.ubar__seg{display:block; height:100%}
.ubar__seg--0{background:var(--accent)}
.ubar__seg--1{background:var(--brand-3)}
.ucard__opts{margin:0 0 8px; display:flex; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:700}
.uopt--0{color:var(--accent)}
.uopt--1{color:var(--brand-3)}

.upager{display:flex; align-items:center; justify-content:center; gap:14px}
.upager__n{color:var(--muted); font-size:13px; font-weight:700}

/* -------------------------------------------------------------- 個別 */
.upost{display:grid; gap:18px}

.uq{margin:0 0 16px; font-size:19px; font-weight:700; line-height:1.7; overflow-wrap:anywhere}

.uopts{display:grid; gap:10px}
.uoptbtn{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:15px 17px; text-align:left; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r);
  color:var(--ink); font-family:var(--font); font-size:15px; font-weight:700;
  overflow:hidden; transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.uoptbtn:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.uoptbtn:disabled{cursor:default}
.uoptbtn__label{position:relative; z-index:1; overflow-wrap:anywhere}
.uoptbtn__bar{
  position:absolute; inset:0 auto 0 0; width:0; z-index:0;
  background:var(--accent-soft); transition:width .5s var(--ease);
}
.uoptbtn__pct{position:relative; z-index:1; flex:none; color:var(--muted); font-size:13px}
.uoptbtn.is-done{border-color:var(--line)}
.uoptbtn.is-mine{border-color:var(--ink)}
.uoptbtn.is-correct .uoptbtn__bar{background:var(--accent-soft)}
.uoptbtn.is-correct{border-color:var(--accent)}
.uoptbtn.is-correct .uoptbtn__label::after{content:" ◎"; color:var(--accent)}
.uoptbtn.is-wrong{opacity:.72}

.uhint{margin:12px 0 0; color:var(--muted); font-size:13px; font-weight:700}
.uhint.is-ok{color:var(--accent)}
.uhint.is-ng{color:var(--muted)}

.uexp{
  margin-top:14px; padding:14px 16px; background:var(--surface-2);
  border-radius:var(--r); font-size:14px; line-height:1.8;
}
.uexp b{display:block; margin-bottom:5px; color:var(--accent); font-size:12px}
.uexp p{margin:0; overflow-wrap:anywhere}

.umeta{margin:14px 0 0; color:var(--muted); font-size:13px; font-weight:700}

/* あるある */
.uaruaru{text-align:center}
.uaruaru__text{
  margin:8px 0 22px; font-size:21px; font-weight:700; line-height:1.9;
  overflow-wrap:anywhere;
}
.uheartbtn{
  display:inline-flex; align-items:center; gap:10px; padding:13px 27px; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-pill);
  color:var(--muted); font-family:var(--font); font-size:17px; font-weight:700;
  transition:transform var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.uheartbtn:hover:not(:disabled){transform:scale(1.04); border-color:var(--accent); color:var(--accent)}
.uheartbtn.is-on{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.uheartbtn__ic{font-size:20px; line-height:1}

/* 共有・フッタ */
.ushare{
  padding:16px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--hard);
}
.ushare__lb{display:block; margin-bottom:10px; color:var(--muted); font-size:12px; font-weight:700}

.ufoot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px}
.ufoot__by{color:var(--muted); font-weight:700}
.ureport{
  margin-left:auto; padding:0; background:none; border:0; cursor:pointer;
  color:var(--taupe); font-family:var(--font); font-size:12px; text-decoration:underline;
}
.ureport:hover{color:var(--accent)}

.umore{margin-top:8px}
.umore .rel-head{margin-bottom:12px}

/* ------------------------------------------------------------ 投稿する */
.unew .uoptrow{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.unew .uoptrow input[type=radio]{flex:none; width:19px; height:19px; accent-color:var(--accent)}
.unew textarea.input{resize:vertical; font-family:var(--font); line-height:1.7}
.uhp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.uerr{
  margin:0 0 12px; padding:11px 14px; border-radius:var(--r);
  background:var(--accent-soft); color:var(--accent-2); font-size:13px; font-weight:700;
}

@media (max-width:520px){
  .ugrid,.ugrid--narrow{grid-template-columns:1fr}
  .uaruaru__text{font-size:18px}
  .uq{font-size:17px}
}