:root {
  --bg: #1b1410; --panel: #251b14; --panel2: #2e2318; --line: #3b2e22; --line2: #5a4a36;
  --fg: #efe4cc; --mute: #a99b80; --brass: #c9a24a; --brass-dim: #8a6f32; --ink: #1b1410; --danger: #d98a6a;
  --serif: "Kaisei Tokumin", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --num: "Cormorant Garamond", "Hiragino Mincho ProN", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 14px; line-height: 1.6; }
#app { max-width: 520px; margin: 0 auto; padding: 28px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 16px; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 700; }
h1 { font-size: 26px; line-height: 1.3; }
h2 { font-size: 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { width: 100%; min-width: 0; min-height: 46px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0 12px; font-size: 15px; }
textarea { padding: 10px 12px; min-height: 70px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
select { padding: 0 8px; }
label.l { font-size: 12px; color: var(--mute); }
.mark { font-family: var(--num); font-style: italic; font-weight: 600; font-size: 18px; color: var(--brass); }
.num { font-family: var(--num); font-style: italic; font-size: 18px; }
.mute { color: var(--mute); }
.small { font-size: 11px; line-height: 1.7; color: var(--mute); }
.col { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp { justify-content: space-between; }
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
.btn { min-height: 46px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 4px; background: transparent; cursor: pointer; font-size: 13px; }
.btn.primary { width: 100%; min-height: 48px; background: var(--brass); border-color: var(--brass); color: var(--ink); font-size: 15px; font-weight: 700; }
.btn.primary:disabled { opacity: .5; cursor: default; }
.btn.small-btn { min-height: 40px; padding: 0 12px; font-size: 12px; }
.btn.gold { border-color: var(--brass); color: var(--brass); font-weight: 700; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.pill { min-height: 40px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 20px; background: transparent; cursor: pointer; font-size: 13px; }
.pill.gold { border-color: var(--brass); color: var(--brass); font-weight: 700; }
.pill.on { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.tag { font-size: 10px; color: var(--brass); border: 1px solid var(--brass); border-radius: 10px; padding: 0 7px; white-space: nowrap; }
.box { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.x { width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--mute); cursor: pointer; font-size: 18px; }
.err { color: var(--danger); font-size: 12px; min-height: 1em; }
.back { align-self: flex-start; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--mute); font-size: 12px; cursor: pointer; }

.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; cursor: pointer; }
.item .ttl { font-family: var(--serif); font-weight: 700; font-size: 18px; }
.badge { font-size: 12px; font-weight: 700; color: var(--brass); border: 1px solid var(--brass); border-radius: 14px; padding: 4px 12px; white-space: nowrap; }
.badge.zero { color: var(--mute); border-color: var(--line2); font-weight: 400; }
.dots { display: flex; gap: 5px; margin: 4px 0; }
.dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--brass-dim); }
.dots i.last { background: var(--brass); border-color: var(--brass); }
.takerow { padding: 12px 0; }
.takerow.cur { background: var(--panel); margin: 0 -8px; padding: 12px 8px; }
.takerow.cur .ttl, .takerow.cur .num { color: var(--brass); }
.takerow .ttl { font-size: 16px; }

.seek { position: relative; height: 56px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.seek .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--panel2); border-radius: 5px 0 0 5px; }
.seek .band { position: absolute; top: 8px; height: 6px; border-radius: 3px; background: var(--fg); opacity: .8; }
.seek .band.draft { background: var(--brass); }
.seek .dot { position: absolute; top: 8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--brass); }
.seek .head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--brass); }
.seek .lp { position: absolute; top: 20px; bottom: 6px; background: rgba(201, 162, 74, .18); border-inline: 1px solid var(--brass-dim); }
.times { display: flex; justify-content: space-between; font-family: var(--num); font-style: italic; font-size: 15px; color: var(--mute); }
.times b { color: var(--fg); font-weight: 500; }
.ctl { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ctl .skip { min-width: 64px; min-height: 46px; border: 1px solid var(--line2); border-radius: 4px; background: transparent; font-size: 13px; cursor: pointer; }
.play { width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--brass); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.play svg { fill: var(--ink); }

.cm { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cm.now { background: var(--panel); margin: 0 -8px; padding: 6px 8px; }
.cm .tm { min-height: 44px; border: 0; background: transparent; color: var(--brass); font-family: var(--num); font-style: italic; font-weight: 600; font-size: 20px; text-align: left; padding: 0; cursor: pointer; line-height: 1.1; }
.cm .tm small { display: block; font-size: 13px; color: var(--mute); font-weight: 400; }
.cm .by { font-size: 11px; color: var(--mute); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cm .tx { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.cm .tx em { color: var(--brass); font-style: normal; font-weight: 500; }
.cm.done .tx { color: var(--mute); text-decoration: line-through; }
.cm .chk { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mute); min-height: 44px; cursor: pointer; }
.cm .chk input { width: 18px; min-height: 18px; height: 18px; margin: 0; accent-color: var(--brass); }
.cm .del { border: 0; background: transparent; color: var(--mute); font-size: 11px; cursor: pointer; padding: 0; text-decoration: underline; }

.sugg { border: 1px solid var(--brass); border-radius: 6px; background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sugg .cap { font-size: 11px; color: var(--mute); letter-spacing: .08em; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.lyr { white-space: nowrap; }
.prog { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.prog > i { display: block; height: 100%; width: 0; background: var(--brass); }

/* すっきり版 */
.brass { color: var(--brass); }
.topbar { display: flex; align-items: center; gap: 6px; }
.topbar h1 { font-size: 22px; line-height: 1.2; }
.backbtn { width: 44px; height: 44px; margin-left: -12px; border: 0; background: transparent; color: var(--mute); font-size: 20px; cursor: pointer; flex: none; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.linkbtn { align-self: flex-start; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--mute); font-size: 12px; text-decoration: underline; cursor: pointer; }
.linkbtn.gold-link { color: var(--brass); }
.mrow { display: flex; flex-direction: column; gap: 6px; }
.mline { display: flex; align-items: center; gap: 6px; }
.mline > input { flex: 1 1 0; min-width: 0; }
.parts { display: flex; gap: 4px; flex: none; }
.psel { width: 78px; padding: 0 4px; font-size: 14px; }
.mline .x { width: 32px; flex: none; }
.recbtn { min-height: 96px; border: 1px solid var(--line2); border-radius: 6px; background: transparent; color: var(--fg); font-size: 14px; cursor: pointer; }
.recbtn.gold { border-color: var(--brass); background: var(--panel); font-weight: 700; }
.recbtn:disabled { opacity: .5; }
.tksel { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); text-align: left; cursor: pointer; width: 100%; }
.tksel .ttl, .trow .ttl { font-family: var(--serif); font-weight: 700; font-size: 16px; }
.tag.mutetag { color: var(--mute); border-color: var(--line2); }
.seek { height: 44px; }
.ctlrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.ctlrow > .pill { justify-self: end; }
.ctl .skip { min-width: 52px; border: 0; color: var(--mute); }
.pill.small-pill { min-height: 40px; padding: 0 12px; font-size: 12px; color: var(--mute); }
.pill.small-pill.gold { color: var(--brass); }
.composer { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cmform { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; align-items: center; }
.cmtext { width: 100%; min-height: 84px; resize: vertical; box-sizing: border-box; padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--fg); background: #251b14; border: 1px solid var(--line2, #5a4a36); border-radius: 8px; }
.cmtext:focus { outline: 1px solid var(--brass); }
.cmform .sendbtn { min-height: 44px; }
.cmmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.cmby { font-size: 13px; color: var(--mute); }
.cmby b { color: var(--fg); font-weight: 500; }
.cmmeta .cminfo { order: 3; flex: 1 0 100%; font-size: 13px; color: var(--mute); min-width: 0; }
.cmact { margin-left: auto; display: flex; gap: 14px; }
.cmmeta .cminfo .mark { font-size: 18px; }
.pcard { background: #251b14; border: 1px solid #3b2e22; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cmtitle { margin-top: 8px; padding-top: 14px; border-top: 1px solid #3b2e22; font-size: 13px; font-weight: 700; color: var(--brass); }
.sendbtn { min-height: 46px; border: 0; border-radius: 4px; background: var(--brass); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.sendbtn:disabled { opacity: .5; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.seg button { min-height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--mute); font-size: 11px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--line); color: var(--fg); }
.fold { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--brass); font-size: 12px; cursor: pointer; }
.cm { border-bottom: 0; grid-template-columns: 56px minmax(0, 1fr) 44px; column-gap: 8px; min-height: 58px; }
.cm .by .brass { margin-left: 2px; }
.circ { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.circ span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line2); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 13px; }
.circ[aria-checked="true"] span { background: var(--brass); border-color: var(--brass); }
.sheet { position: fixed; inset: 0; z-index: 20; background: var(--bg); overflow-y: auto; }
.sheetin { max-width: 520px; margin: 0 auto; padding: 20px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 12px; }
.month { font-size: 11px; color: var(--mute); letter-spacing: .1em; padding: 14px 0 4px; border-bottom: 1px solid var(--line2); }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 56px; padding: 0; border: 0; border-bottom: 1px solid #2a2018; background: transparent; color: inherit; cursor: pointer; width: 100%; }
.trow.cur { background: var(--panel); margin: 0 -8px; padding: 0 8px; width: calc(100% + 16px); }
.trow.cur .ttl, .trow.cur .num { color: var(--brass); }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.err:empty { display: none; }

.tick { position: absolute; bottom: 0; width: 1px; height: 12px; background: var(--brass-dim); }
.mchips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.mchips::-webkit-scrollbar { display: none; }
.mchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 20px; background: transparent; color: var(--fg); font-size: 12px; cursor: pointer; white-space: nowrap; }
.mchip .num { font-size: 15px; color: var(--brass); }
.mchip.add { border-style: dashed; color: var(--mute); }

.tksel .tag { white-space: nowrap; }
.topbar h1 { overflow-wrap: anywhere; }
.ctlrow > .pill, .pill.small-pill { white-space: nowrap; min-width: 64px; }
.psel { width: 72px; }
.mline > input { flex: 1 1 90px; }
.mline .x { width: 28px; }

/* トップページ */
.hero { border: 1px solid var(--line); border-radius: 4px; padding: 24px 18px 18px; background: radial-gradient(120% 90% at 0% 0%, #33261b 0%, var(--panel) 60%); display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.beats { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.beat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.beat i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--brass-dim); display: flex; align-items: center; justify-content: center; font-family: var(--num); font-style: italic; font-weight: 600; font-size: 16px; color: var(--brass); }
.beat em { font-style: normal; font-size: 11px; color: var(--mute); white-space: nowrap; }
.beat.go i { background: var(--brass); color: var(--ink); font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 700; border-color: var(--brass); }
.beat.go em { color: var(--brass); }
a.cta { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.recrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.recrow .rt { font-family: var(--serif); font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.feat b { font-size: 14px; }
.feat span { font-size: 12px; color: var(--mute); line-height: 1.7; }

/* 画面の広さに合わせる（カウントインと同じ段階）。タブレット・PCでは幅を広げる。1列のまま */
@media (min-width: 720px) {
  body { font-size: 16px; }
  #app, .sheetin { max-width: 860px; }
  #app { gap: 18px; }
  .small { font-size: 12px; }
  .feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .hero h1 { font-size: 32px !important; }
}
@media (min-width: 1100px) {
  #app, .sheetin { max-width: 1040px; }
}

/* 日付の入力（iPhone の Safari で、はみ出して長くなるのを防ぐ） */
input[type="date"] { display: flex; align-items: center; width: 100%; max-width: 100%; min-width: 0; height: 46px; line-height: 44px; padding-top: 0; padding-bottom: 0; -webkit-appearance: none; appearance: none; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 44px; line-height: 44px; }
input[type="date"]::-webkit-datetime-edit { padding: 0; line-height: 44px; }

/* 目印の折りたたみ・コメント内の目印リンク */
.mk { display: flex; flex-direction: column; gap: 8px; }
.mkhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mktog { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--fg); font-size: 13px; cursor: pointer; }
.mktog .caret { color: var(--mute); font-size: 11px; }
.mkwrap { display: flex; flex-wrap: wrap; gap: 8px; }
.mref { display: inline; padding: 0 2px; border: 0; border-bottom: 1px solid var(--brass-dim); background: transparent; color: var(--brass); font: inherit; cursor: pointer; }

/* 固定ヘッダー（ロゴを押すとトップへ）・フッター・確認のダイアログ */
.top { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: calc(12px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); box-shadow: 0 1px 0 var(--line); }
.topin { max-width: 520px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hbtn { min-height: 40px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 6px; background: transparent; color: var(--fg); font-size: 13px; cursor: pointer; }
.hbtn[hidden] { display: none; }
.brand { display: inline-flex; flex-direction: column; color: inherit; text-decoration: none; }
.brand-n { font-family: var(--num); font-style: italic; font-weight: 600; font-size: 21px; line-height: 1.05; color: var(--brass); }
.brand-s { font-size: 9px; letter-spacing: .2em; color: var(--mute); margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--brass); }
#app { padding-top: 20px; }
.legal { max-width: 520px; margin: 0 auto; padding: 14px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 12px; }
.legal a { color: var(--mute); }
.dlgback { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dlg { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 720px) { .topin, .legal { max-width: 860px; } }
@media (min-width: 1100px) { .topin, .legal { max-width: 1040px; } }
.urlbox { border: 1px solid #3b2e22; border-radius: 8px; background: #251b14; padding: 12px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.sharerow > .btn { flex: 1 1 0; min-width: 0; }
a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--fg); box-sizing: border-box; }
.linebtn { background: #06c755; border-color: #06c755; color: #fff !important; font-weight: 700; }
.sbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px; gap: 10px; align-items: center; }
.sbar .backbtn { width: 44px; min-height: 40px; }
.sttl { text-align: center; font-size: 15px; }
.sttl.dirty { color: var(--brass); }
.savebtn { min-height: 40px; border-radius: 6px; }
.savebtn:not(:disabled) { background: var(--brass); border-color: var(--brass); color: var(--ink); font-weight: 700; }
.savebtn:disabled { color: #5a4a36; border-color: #3b2e22; cursor: default; }
.stabs { display: flex; border-bottom: 1px solid #3a2e22; }
.stabs button { flex: 1 1 0; min-height: 44px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--mute); font-size: 14px; cursor: pointer; }
.stabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--brass); }
.linkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.linkdiv { height: 1px; background: #3b2e22; }
.keepbtn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.keepbtn .ico { display: inline-flex; }
.btn.danger.solid { background: var(--danger); color: var(--ink); font-weight: 700; }
.linediv { height: 1px; background: #3b2e22; margin: 4px 0; }

/* 返事：元のコメントの下に1段。タップで開く */
.cmw { border-bottom: 1px solid var(--line); }
.cmw > .cm { border-bottom: 0; }
.rptog { border: 0; background: transparent; color: var(--mute); font-size: 12px; padding: 4px 0; min-height: 28px; cursor: pointer; }
.thread { margin: 0 0 8px 66px; padding-left: 10px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.rp { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp .by { font-size: 11px; color: var(--mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp .tx { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.rp .tx em { color: var(--brass); font-style: normal; font-weight: 500; }
.rp .del { border: 0; background: transparent; color: var(--mute); font-size: 11px; cursor: pointer; padding: 0; text-decoration: underline; }
.rpto { color: var(--brass); }
.rpform { display: flex; flex-direction: column; gap: 6px; }
.rprow { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; align-items: center; }
.rprow .sendbtn { min-height: 44px; }

/* あなたは、だれですか？ */
.whorow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); font-size: 15px; text-align: left; cursor: pointer; }
.whorow.on { border-color: var(--brass); }
.whorow .wd { color: var(--line); }
.whorow.on .wd { color: var(--brass); }
.whorow .wn { font-weight: 500; }
.whorow .wp { margin-left: auto; font-size: 12px; color: var(--mute); }
.whobox { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.whoname { font-size: 17px; font-weight: 700; margin-top: 2px; }
.whobox .btn { width: auto; min-height: 44px; padding: 0 16px; }
.rprow { grid-template-columns: minmax(0, 1fr) 88px; }

/* あなた宛ての未解決（曲の一覧の上） */
.todofold { text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--brass); border-radius: 10px; background: transparent; color: var(--brass); font-size: 14px; cursor: pointer; }
.todon { font-weight: 700; }
.todosong { margin-top: 12px; font-size: 12px; color: var(--brass); }
.todo { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.todotm { display: flex; flex-direction: column; color: var(--brass); text-decoration: none; min-height: 44px; }
.todotm .num { font-size: 19px; line-height: 1.2; }
.todotm small { font-size: 10px; color: var(--mute); }
.todobody { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--fg); text-decoration: none; min-height: 44px; }
.todobody .by { font-size: 11px; color: var(--mute); }
.todobody .tx { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.todorp { font-size: 12px; color: var(--mute); line-height: 1.6; border-left: 2px solid var(--line); padding-left: 8px; overflow-wrap: anywhere; }

/* コメントの編集 */
.edited { font-size: 10px; color: var(--mute); }
.edbox { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.edrow { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; }
.edrow .btn, .edrow .sendbtn { min-height: 44px; }
.cm .del + .del, .rp .del + .del { margin-left: 2px; }

/* 使い方 */
.hright { display: flex; gap: 8px; }
.helpdlg { max-height: calc(100dvh - 40px); overflow-y: auto; max-width: 380px; gap: 8px; }
.hstep { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line2); }
.hn { font-family: var(--num); font-style: italic; font-size: 22px; line-height: 1; color: var(--brass); }
.ht { font-size: 14px; font-weight: 700; }
.hd { font-size: 12.5px; line-height: 1.7; margin-top: 2px; color: var(--mute); }
.hnote { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line2); font-size: 12px; line-height: 1.7; color: var(--mute); }
.hnote b { color: var(--fg); }
.hlink { color: var(--brass); font-size: 13px; text-underline-offset: 2px; }
.hfoot { position: sticky; bottom: -18px; margin-top: 4px; padding: 10px 0 2px; background: var(--panel); }

/* テイクを追加の条件（箇条書き） */
.conds { margin: -4px 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 1px; }