:root {
  --bg: #f3ede1;
  --card: #fbf7ee;
  --ink: #2b2b2b;
  --sub: #8a8172;
  --line: #ddd3c0;
  --accent: #7a5c3e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, "Hiragino Sans", "Yu Gothic", "Microsoft YaHei", sans-serif;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
header {
  flex: 0 0 auto;
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
header .brand { font-weight: 800; color: var(--accent); font-size: 18px; white-space: nowrap; }
header .brand small { font-weight: 500; color: var(--sub); font-size: 12px; margin-left: .4rem; }
header .back {
  color: var(--accent); text-decoration: none; font-weight: 700;
  white-space: nowrap; font-size: 15px;
}
header .back:hover { text-decoration: underline; }
header .htitle { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#q {
  flex: 1;
  min-width: 6rem;
  font: inherit;
  padding: .5rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
#count { color: var(--sub); font-size: 13px; white-space: nowrap; }

#list { flex: 1 1 auto; overflow-y: auto; padding: .6rem; }
.card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .85rem;
  margin: 0 auto .5rem;
  max-width: 900px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.card:hover { background: #fff; border-color: var(--accent); }
.card .main { flex: 1 1 auto; min-width: 0; }
.card .name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .sub { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.badge {
  flex: 0 0 auto;
  min-width: 34px; height: 34px; padding: 0 .5rem;
  border-radius: 17px;
  background: #e9ddc6; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.empty { padding: 2rem 1rem; color: var(--sub); text-align: center; }

/* 続きを読む */
.cont-wrap { max-width: 900px; margin: .2rem auto .4rem; }
.cont-head { font-size: 13px; font-weight: 700; color: var(--sub); padding: .2rem .3rem; }
.cont-row { display: flex; gap: .6rem; overflow-x: auto; padding: .2rem .1rem .5rem; }
.cont-card {
  position: relative; flex: 0 0 auto; width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem .8rem; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.cont-card:hover { border-color: var(--accent); }
.cont-card .ct { font-size: 15px; font-weight: 600; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.cont-card .ca { font-size: 12px; color: var(--sub); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-card .bar { height: 4px; border-radius: 2px; background: #e3d8c2; margin-top: .5rem; overflow: hidden; }
.cont-card .bar > i { display: block; height: 100%; background: var(--accent); }
.cont-card .pct { font-size: 11px; color: var(--sub); margin-top: .25rem; }
.cont-card .rm {
  position: absolute; top: 4px; right: 6px; border: none; background: transparent;
  color: var(--sub); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 5px;
}
.cont-card .rm:hover { color: var(--accent); }
.divider { max-width: 900px; margin: .3rem auto; border-top: 1px solid var(--line); }