:root{
  --bg: #211c18;
  --bg-deep: #17130f;
  --paper: #efe6d2;
  --paper-soft: #e6dcc4;
  --ink: #2a231d;
  --muted: #8a7f6e;
  --line: #c9bba0;
  --red: #a8402c;
  --red-deep: #7d2e1f;
  --gold: #b8922e;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  background-image: radial-gradient(ellipse at top, #2c251f 0%, var(--bg) 55%);
  color: var(--paper);
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.8;
  min-height: 100vh;
}
a{ color: inherit; }
.wrap{ max-width: 880px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------- Header : noren (curtain) ---------- */
header.noren{
  position: relative;
  padding: 56px 20px 40px;
  text-align: center;
  background: linear-gradient(180deg, var(--red-deep) 0%, var(--red) 100%);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
header.noren::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-14px;
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--red) 0 34px, var(--bg) 34px 36px);
}
.site-name{
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.7rem);
  letter-spacing: .1em;
  color: var(--paper);
  margin: 0;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.site-tagline{
  margin: 14px 0 0;
  font-size: .95rem;
  color: #ecd9c8;
  letter-spacing: .06em;
}

/* ---------- Category tabs : tanzaku (縦書き・横一列) ---------- */
nav.tabs{
  display:flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap:10px;
  padding: 30px 0 6px;
  overflow-x: auto;
}
nav.tabs a{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Shippori Mincho", serif;
  background: var(--paper);
  color: var(--ink);
  padding: 16px 10px;
  font-size: 1rem;
  letter-spacing: .22em;
  text-decoration: none;
  border-radius: 2px 2px 6px 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
nav.tabs a.active{
  background: var(--gold);
  color: var(--bg-deep);
  font-weight: 700;
}
nav.tabs a::before{
  content:"";
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width: 2px; height: 10px; background: var(--muted);
}

/* ---------- Top bar (login / post / profile) ---------- */
.topbar{
  display:flex; align-items:center; gap:12px; justify-content:flex-end;
  padding: 14px 0 0;
  font-size: .82rem;
}
.btn-post{
  margin-right:auto;
  font-family:"Shippori Mincho", serif;
  background: var(--red);
  color: var(--paper) !important;
  border-radius: 20px;
  padding: 9px 20px;
  text-decoration:none;
  font-size:.88rem;
  letter-spacing:.05em;
}
.btn-post:hover{ background: var(--red-deep); }
.topbar-link{ color: var(--paper); text-decoration:none; opacity:.85; }
.topbar-link:hover{ opacity:1; text-decoration:underline; }
.topbar-user{ text-decoration:none; }

section{ margin-top: 46px; }
h2.section-title{
  font-family:"Shippori Mincho", serif;
  font-size: 1.5rem;
  letter-spacing: .1em;
  color: var(--gold);
  margin: 0 0 4px;
}
p.section-sub{
  margin: 0 0 20px; color: var(--muted); font-size: .85rem;
}

/* ---------- Banzuke ranking ---------- */
.banzuke{
  background: var(--paper);
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.banzuke-row{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  align-items:center;
  gap: 14px;
  padding: 16px 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration:none;
}
.banzuke-row:last-child{ border-bottom:none; }
.rank-badge{
  font-family:"Shippori Mincho", serif;
  font-weight:700;
  font-size: 1.05rem;
  color: var(--red);
  text-align:center;
  line-height:1.3;
}
.rank-badge small{
  display:block; font-size: .6rem; color: var(--muted); font-family:"Zen Kaku Gothic New",sans-serif; letter-spacing:.1em;
}
.banzuke-body .post-line{ font-size: .98rem; color: var(--ink); }
.banzuke-body .post-meta{ font-size: .78rem; color: var(--muted); margin-top: 4px; }
.banzuke-count{
  font-family:"Shippori Mincho", serif;
  color: var(--red-deep);
  font-size: .95rem;
  white-space: nowrap;
}
.banzuke-empty{ padding: 20px 14px; color: var(--muted); font-size:.88rem; }

/* ---------- Post detail ---------- */
.post-card{
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  padding: 30px 28px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.post-meta-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size: .78rem; color: var(--muted); margin-bottom: 14px;
}
.post-body{ font-size: 1.05rem; white-space: pre-wrap; word-break: break-word; }
.post-flagged-note{ margin-top:10px; font-size:.76rem; color: var(--red-deep); }

/* ---------- Sanbon-jime : three-way reaction ---------- */
.toriage{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.toriage-label{
  text-align:center; font-size: .8rem; color: var(--muted); letter-spacing:.2em; margin-bottom: 14px;
}
.sanbon{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pillar{
  background: #f4ede0;
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 16px 8px 18px;
  text-align:center;
}
.pillar .kimari{
  font-family:"Shippori Mincho", serif;
  font-size: .98rem;
  color: var(--ink);
  min-height: 2.6em;
  display:flex; align-items:center; justify-content:center;
}
.pillar .bar-track{
  height: 6px;
  background: #d9cbac;
  border-radius: 3px;
  margin: 10px 0 8px;
  overflow:hidden;
}
.pillar .bar-fill{ height:100%; background: var(--red); border-radius: 3px; }
.pillar .pct{
  font-family:"Shippori Mincho", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--red-deep);
}
.pillar .vote-btn{
  margin-top: 10px;
  display:inline-block;
  font-size: .76rem;
  border: 1px solid var(--ink);
  border-radius: 20px;
  padding: 7px 14px;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  transition: transform .15s ease, background .15s ease;
}
.pillar .vote-btn:hover:not(:disabled){ background: var(--red); color: var(--paper); transform: scale(1.04); border-color: var(--red); }
.pillar .vote-btn.selected{ background: var(--red); color: var(--paper); border-color: var(--red); }
.pillar .vote-btn:disabled{ opacity:.55; cursor: default; }

.gap-note, .login-note{
  margin-top: 16px;
  font-size: .82rem;
  color: var(--muted);
  text-align:center;
}
.category-note{
  font-size: .72rem;
  color: var(--muted);
  text-align:center;
  margin: -6px 0 14px;
}

/* ---------- Flash messages (投稿・リアクション等の結果表示・画面上に重ねて表示) ---------- */
.flash-message{
  position: fixed;
  top: 22px;
  left: 50%;
  z-index: 1000;
  max-width: min(92vw, 520px);
  width: max-content;
  margin: 0;
  padding: 18px 28px;
  border-radius: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .03em;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  pointer-events: none;
  animation: flash-pop 3.4s ease forwards;
}
.flash-success{
  background: var(--gold);
  color: var(--bg-deep);
}
.flash-error{
  background: var(--red);
  color: var(--paper);
}
@keyframes flash-pop{
  0%   { opacity: 0; transform: translate(-50%, -14px); }
  8%   { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}
.banzuke-heading{
  font-family: "Shippori Mincho", serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--paper);
  margin: 34px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--gold);
}
section .banzuke-heading:first-of-type{ margin-top: 20px; }

/* ---------- Comments : kansei (audience voices) ---------- */
.kansei{ margin-top: 8px; }
.kansei-title{
  font-size: .82rem; color: var(--muted); letter-spacing:.15em; margin: 0 0 12px;
}
.kansei-title-main{
  display:inline-block;
  font-family:"Shippori Mincho", serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--gold);
  letter-spacing: .1em;
  margin-right: 6px;
}
.voice{
  display:flex; align-items:flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ded2b6;
}
.voice:last-child{ border-bottom:none; }
.voice-body{ flex: 1 1 auto; min-width: 0; }
.voice-meta{
  flex: 0 0 auto;
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.voice-meta-info{
  display:flex; align-items:center; gap: 8px;
}
.voice-sympathy-form{ flex: 0 0 auto; }
.voice-sympathy{
  flex: 0 0 52px;
  width: 52px;
  text-align:center;
  font-family:"Shippori Mincho", serif;
  color: var(--red);
  font-size: .95rem;
  background: transparent;
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 6px 4px;
  cursor: pointer;
}
.voice-sympathy:hover:not(:disabled){ background: var(--red); color: var(--paper); }
.voice-sympathy.selected{ background: var(--red); color: var(--paper); }
.voice-sympathy:disabled{ cursor: default; }
.voice-sympathy small{ display:block; font-size:.6rem; color: var(--muted); font-family:"Zen Kaku Gothic New",sans-serif; }
.voice-sympathy:hover:not(:disabled) small, .voice-sympathy.selected small{ color: #f0ddd2; }
.voice-text{ font-size: .92rem; color: var(--ink); }
.voice-tag{ font-size:.72rem; color: var(--muted); white-space: nowrap; }
.voice-report{ background:none; border:none; color: var(--muted); font-size:.7rem; cursor:pointer; text-decoration:underline; padding:0; }

.comment-composer{
  display:flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.comment-input{
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f7f2e6;
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: .88rem;
  padding: 10px 16px;
}
.comment-submit{
  flex: 0 0 auto;
  font-family: "Shippori Mincho", serif;
  background: var(--red);
  color: var(--paper);
  border: none;
  border-radius: 20px;
  padding: 0 20px;
  font-size: .86rem;
  cursor: pointer;
}
.comment-submit:hover{ background: var(--red-deep); }

/* ---------- Profile card ---------- */
.profile-card{
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  padding: 26px 26px 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.profile-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 16px; flex-wrap: wrap; }
.profile-stats{ display:flex; gap: 18px; }
.stat-box{ text-align:center; }
.stat-num{
  display:block; font-family:"Shippori Mincho", serif; font-weight:700;
  font-size: 1.3rem; color: var(--red-deep);
}
.stat-label{ display:block; font-size: .68rem; color: var(--muted); margin-top: 2px; }
.profile-name{ font-family:"Shippori Mincho", serif; font-size: 1.15rem; }
.profile-sub{ font-size: .78rem; color: var(--muted); }
.profile-grid{
  display:grid; grid-template-columns: 100px 1fr; gap: 10px 16px;
  font-size: .9rem;
}
.profile-grid dt{ color: var(--muted); }
.profile-grid dd{ margin:0; word-break: break-word; }

/* ---------- 使用方法ページ ---------- */
.howto-card{ text-align: left; }
.howto-section{ margin-bottom: 26px; }
.howto-section:last-child{ margin-bottom: 0; }
.howto-section h3{
  font-family: "Shippori Mincho", serif;
  font-size: 1.05rem;
  color: var(--red-deep);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.howto-section p{ font-size: .92rem; margin: 0 0 8px; }
.howto-section p:last-child{ margin-bottom: 0; }

footer.note{
  margin-top: 60px; text-align:center; font-size: .74rem; color: var(--muted);
}

/* ---------- Post / profile edit form ---------- */
.form-card{
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  padding: 28px 26px 26px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.form-row{ margin-bottom: 20px; }
.form-label{
  font-size: .8rem; color: var(--muted); letter-spacing:.08em; margin-bottom: 8px; display:block;
}
.chip-group{ display:flex; gap: 10px; flex-wrap: wrap; }
.chip{
  font-size: .88rem;
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 20px;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  font-family: inherit;
}
.chip.selected{ background: var(--red); color: var(--paper); border-color: var(--red); }
.chip.disabled{
  color: var(--muted); border-color: var(--line);
  cursor: not-allowed;
  position: relative;
}
.chip.disabled .chip-note{
  display:block; font-size:.68rem; margin-top:2px;
}
textarea.post-input, input.text-input{
  width:100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #f7f2e6;
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: .98rem;
  padding: 14px;
}
textarea.post-input{ min-height: 120px; resize: vertical; }
.char-count{
  display:flex; justify-content:flex-end;
  font-size: .78rem; color: var(--muted); margin-top: 6px;
}
.char-count.warn{ color: var(--red); }
.form-footer{
  display:flex; flex-wrap: wrap; gap: 14px;
  justify-content:space-between; align-items:center;
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line);
}
.anon-name{ display:flex; align-items:center; gap:6px; flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--muted); }
.anon-name strong{ color: var(--ink); font-family:"Shippori Mincho", serif; font-weight:700; }
.submit-btn{
  flex: 0 0 auto;
  font-family: "Shippori Mincho", serif;
  background: var(--red);
  color: var(--paper);
  border: none;
  border-radius: 24px;
  padding: 12px 28px;
  font-size: .95rem;
  letter-spacing: .1em;
  cursor: pointer;
}
.submit-btn:hover{ background: var(--red-deep); }
.form-hint{
  font-size: .74rem; color: var(--muted); margin-top: 10px;
}
.form-error{
  background:#f7e9dc; border:1px solid var(--red); color:var(--red-deep);
  padding:12px 16px; border-radius:3px; font-size:.85rem; margin-bottom:18px;
}

/* ---------- Warning / report modal (server-rendered) ---------- */
.modal-mock{
  margin-top: 18px;
  background: #f7e9dc;
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 16px 18px;
  color: var(--ink);
}
.modal-mock .modal-title{
  font-family:"Shippori Mincho", serif;
  color: var(--red-deep);
  font-size: .98rem;
  margin: 0 0 6px;
}
.modal-mock p{ margin: 0 0 6px; font-size: .88rem; }
.modal-actions{ display:flex; gap:10px; margin-top: 12px; flex-wrap: wrap; }
.modal-actions button, .modal-actions a{
  font-size: .8rem;
  padding: 8px 16px;
  border-radius: 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration:none;
  font-family: inherit;
}
.modal-actions button.primary{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ---------- Feed list (category page) ---------- */
.feed-list{
  background: var(--paper);
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.feed-item{
  display:flex; gap: 14px; align-items:flex-start;
  padding: 16px 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration:none;
}
.feed-item:last-child{ border-bottom:none; }
.feed-item .hanko{ margin-top: 2px; }
.feed-main{ flex: 1 1 auto; min-width: 0; }
.feed-title-row{ display:flex; justify-content:space-between; gap: 10px; font-size:.72rem; color: var(--muted); margin-bottom: 4px; }
.feed-line{ font-size: .95rem; }
.feed-stats{ font-size: .76rem; color: var(--red-deep); margin-top: 6px; font-family:"Shippori Mincho", serif; }
.feed-empty{ padding:24px 14px; color: var(--muted); font-size:.88rem; }
.feed-more{ text-align:center; margin-top: 18px; }
.feed-more a, .feed-more button{
  display:inline-block;
  font-size: .82rem; padding: 10px 22px; border-radius: 20px;
  border: 1px solid var(--paper); color: var(--paper); background: transparent; cursor:pointer;
  text-decoration:none; font-family: inherit;
}

/* ---------- Hanko-style username ---------- */
.hanko{
  display:inline-flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red);
  background: #f7f0e2;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  text-align:center;
  line-height: 1.05;
}
.hanko-md{ width: 54px; height: 54px; font-size: .82rem; padding: 2px; }
.hanko-sm{ width: 42px; height: 42px; font-size: .7rem; padding: 1px; margin-right: 10px; vertical-align: middle; }
.hanko-tiny{ width: 32px; height: 32px; font-size: .58rem; padding: 0; margin-right: 8px; vertical-align: middle; }
.post-author{ display:flex; align-items:center; gap: 8px; }
.post-author-name{ font-size: .82rem; color: var(--ink); }

/* ---------- Admin queue ---------- */
.admin-table{ width:100%; border-collapse: collapse; background: var(--paper); color: var(--ink); border-radius:4px; overflow:hidden; }
.admin-table th, .admin-table td{ padding:10px 12px; border-bottom:1px solid var(--line); font-size:.85rem; text-align:left; vertical-align:top; }
.admin-table tr.priority-1{ background:#f7d9d9; }
.admin-table tr.priority-2{ background:#f7ecd9; }
.admin-badge{ font-size:.7rem; padding:2px 8px; border-radius:10px; background:var(--muted); color:#fff; }
.admin-actions form{ display:inline-block; margin-right:6px; }
.admin-actions button{ font-size:.76rem; padding:6px 12px; border-radius:14px; border:1px solid var(--ink); background:transparent; cursor:pointer; }
.admin-actions button.danger{ background:var(--red); color:#fff; border-color:var(--red); }

.login-card{
  background: var(--paper); color: var(--ink); border-radius:4px; padding:30px 26px; text-align:center;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.google-btn{
  display:inline-block; margin-top:16px; background:#fff; color:#3c4043; border:1px solid #dadce0;
  border-radius:24px; padding:12px 24px; text-decoration:none; font-size:.92rem; font-family: "Zen Kaku Gothic New", sans-serif;
}
.dev-login-note{ margin-top:20px; font-size:.76rem; color: var(--muted); }
.dev-login-btn{ display:inline-block; margin-top:8px; background: var(--muted); color:#fff; border-radius:20px; padding:8px 18px; text-decoration:none; font-size:.8rem; }

@media (max-width: 560px){
  .banzuke-row{ grid-template-columns: 44px 1fr; }
  .banzuke-count{ grid-column: 2 / 3; }
  .profile-grid{ grid-template-columns: 84px 1fr; }
  .admin-table{ display:block; overflow-x:auto; }

  /* スマホでは三本柱の余白・文字を詰めて、縦に間延びしないようにする */
  .post-card{ padding: 22px 14px; }
  .sanbon{ gap: 6px; }
  .pillar{ padding: 12px 4px 14px; }
  .pillar .kimari{ font-size: .82rem; min-height: 2.1em; line-height: 1.25; }
  .pillar .bar-track{ margin: 8px 0 6px; }
  .pillar .pct{ font-size: 1.15rem; }
  .pillar .vote-btn{ font-size: .68rem; padding: 6px 8px; letter-spacing: 0; }
}