/* チャンネルのページ（channel.html）とチャンネルを作るページ（channel-create.html）。
   チャンネルのページは、次の上映を映画館のチケットにする形（body.tv。docs/design/channel-layouts/ のD。2026-10-18）:
   上の帯 → 見出し（「（名前） の上映会」）→ 次の上映のチケット → 左にこれから・これまでの上映、右にはじめての方へとチャンネルの紹介 → 掲示板 → 通報。
   部品（編集・メンバー・掲示板・窓）の見た目は作るページと共有し、チケットの形は下の「body.tv」にまとめる。 */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: #f5f5f7;
  color: #1c1d22;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
  line-height: 1.6;
}

body > header {
  padding: 14px max(20px, calc((100vw - 1080px) / 2));
  background: #fff;
  border-bottom: 1px solid #e6e8ec;
}
body > header { display: flex; justify-content: space-between; gap: 12px; }
body > header a { color: #e50914; font-weight: 800; text-decoration: none; }
body > header a + a { color: #1c1d22; font-weight: 700; font-size: 14px; }

main { margin: 0 0 60px; }
h1, h2, h3, p { margin-top: 0; }
.num { font-variant-numeric: tabular-nums; }
.error { width: min(100% - 32px, 1080px); margin: 16px auto 0; padding: 12px; border-radius: 8px; background: #ffe5e5; color: #950000; }
.notice { margin: 8px 0 0; color: #5e6573; font-size: 14px; }
.notice:empty { display: none; }
.card { border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .06); }

/* ── 見出しの帯: 名前・テーマ・紹介・共有 ── */
.channel-head { padding: 28px max(20px, calc((100vw - 1080px) / 2)) 22px; background: linear-gradient(120deg, #fff1f2, #fff 45%, #f3f0ff); border-bottom: 1px solid #e6e8ec; }
.channel-head-in { display: flex; gap: 22px; align-items: center; }
.channel-mark { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 24px; background: linear-gradient(135deg, #e50914, #7b4dff); color: #fff; font-size: 40px; font-weight: 800; box-shadow: 0 0 0 4px #fff; }
.channel-head-meta { flex: 1; min-width: 0; }
.channel-kind { margin: 0 0 2px; color: #5e6573; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.channel-head h1 { margin: 0; font-size: 1.8rem; line-height: 1.3; overflow-wrap: anywhere; }
.channel-theme { display: inline-block; margin: 6px 0 0; padding: 1px 10px; border-radius: 999px; background: #ffe3e3; color: #b3000c; font-size: 12px; font-weight: 800; }
.channel-description { max-width: 680px; margin: 8px 0 0; color: #3b3f48; white-space: pre-line; overflow-wrap: anywhere; }
.channel-status-note { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff4d6; color: #6b4a00; font-size: 13px; }
.channel-head-actions { display: grid; gap: 10px; justify-items: end; align-content: center; }
.channel-head-actions > button, .channel-head-actions > a, .channel-small-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; }
/* 大きなボタン（見に来た人の「フォローする」、メンバーの「上映を作る」） */
.follow-channel, .create-screening { padding: 11px 24px; font-size: 15px; }
.follow-channel { background: #e50914; color: #fff; }
.follow-channel.is-following { background: #fff; border: 1px solid #c9cdd4 !important; color: #1c1d22; }
.follow-channel:disabled { opacity: .6; cursor: default; }
.create-screening { background: #1c1d22; color: #fff; }
/* 小さなボタン（共有・管理・メンバー）と、押すと開く窓 */
.channel-head-more { display: flex; gap: 8px; justify-content: flex-end; }
.channel-small-button { padding: 7px 14px; border: 1px solid #c9cdd4; background: #fff; color: #1c1d22; font-size: 13px; }
.channel-menu-wrap { position: relative; }
.channel-menu { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); min-width: 210px; padding: 6px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
.channel-menu > button, .channel-menu > a { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: #1c1d22; font: inherit; font-size: 14px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.channel-menu > button:hover, .channel-menu > a:hover { background: #f3f4f7; }
.channel-menu small { display: block; color: #5e6573; font-size: 12px; font-weight: 400; }
.channel-role-badge { padding: 4px 12px; border-radius: 999px; background: #e9e6ff; color: #4a2fbf; font-size: 12px; font-weight: 800; }
.channel-followers { margin: 6px 0 0; color: #5e6573; font-size: 13px; }
.channel-followers:empty { display: none; }
.channel-head > .notice { padding-left: 110px; }

.channel-edit { display: grid; gap: 6px; max-width: 680px; margin: 14px 0 0 110px; padding: 16px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; }
.channel-edit label { font-weight: 700; font-size: 14px; }
.channel-edit label small { margin-left: 6px; color: #777; font-weight: 400; }
.channel-edit input, .channel-edit textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 10px; font: inherit; background: #fff; }
.channel-edit textarea { resize: vertical; }
.channel-edit-help { margin: 0; color: #666; font-size: 13px; }
.channel-edit-actions { display: flex; gap: 8px; margin-top: 4px; }
.channel-edit-actions button { padding: 9px 16px; border: 0; border-radius: 999px; background: #e50914; color: #fff; font-weight: 700; cursor: pointer; }
.channel-edit-actions button.secondary { background: #fff; color: #333; border: 1px solid #bbb; }
.channel-edit-actions button:disabled { opacity: .6; cursor: default; }
.channel-edit-status { margin: 0; color: #b00020; font-size: 13px; min-height: 1em; }
.channel-name-form { margin-top: 10px; }

/* ── メンバー（段階6）: 一覧・招待・送った招待 ── */
.channel-members { max-width: 680px; margin: 14px 0 0 110px; padding: 16px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; }
.channel-members-head { display: flex; align-items: baseline; gap: 10px; }
.channel-members-head h2 { margin: 0; font-size: 16px; }
.channel-members-count { color: #5e6573; font-size: 13px; }
.channel-members-head button { margin-left: auto; }
.channel-members button { padding: 6px 14px; border: 0; border-radius: 999px; background: #e50914; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.channel-members button.secondary { border: 1px solid #c9cdd4; background: #fff; color: #3b3f48; }
.channel-members button:disabled { opacity: .6; cursor: default; }
.channel-members-roles { margin: 6px 0 10px; color: #5e6573; font-size: 13px; }
.channel-member-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.channel-member, .channel-invite-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: #f7f7f9; }
.channel-member-who { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.channel-member-name { color: #1c1d22; font-weight: 800; text-decoration: none; }
.channel-member-name:hover { text-decoration: underline; }
.channel-member-who small { color: #5e6573; font-size: 12px; }
.channel-member-role { padding: 0 8px; border-radius: 999px; background: #e9e6ff; color: #4a2fbf; font-size: 12px; font-weight: 800; }
.channel-member-role.role-owner { background: #ffe3e3; color: #b3000c; }
.channel-member-role.role-host { background: #e3f4ea; color: #106b3a; }
.channel-invite-state { color: #5e6573; font-size: 12px; }
.channel-member-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.channel-invite { display: grid; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eceef2; }
.channel-invite h3, .channel-invite-sent h3 { margin: 0; font-size: 14px; }
.channel-invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.channel-invite-row label { font-size: 13px; font-weight: 700; }
.channel-invite-row input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 10px; font: inherit; }
.channel-invite-row select { padding: 7px 8px; border: 1px solid #ccc; border-radius: 10px; font: inherit; background: #fff; }
.channel-invite-trust { margin: 0; color: #3b3f48; font-size: 13px; font-weight: 700; }
.channel-invite-owner-only { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eceef2; color: #5e6573; font-size: 13px; }
.channel-invite-help { margin: 0; color: #666; font-size: 12px; }
.channel-invite-help span { margin-left: 4px; }
.channel-invite-status, .channel-members-status { margin: 0; color: #3b3f48; font-size: 13px; }
.channel-invite-status:empty, .channel-members-status:empty { display: none; }
.channel-invite-sent { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eceef2; }
.channel-members-status { margin-top: 10px; }

/* ── チャンネルを作る（channel-create.html。段階7）── */
.channel-create { width: min(100% - 32px, 680px); margin: 28px auto 60px; }
.channel-create h1 { margin: 0 0 6px; font-size: 1.5rem; }
.channel-create-lead { margin: 0 0 14px; color: #5e6573; font-size: 14px; }
.channel-create-form { margin: 0; }
.channel-create-gate, .channel-create-done { padding: 18px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; }
.channel-create-gate p { margin: 0 0 8px; }
.channel-create-gate a, .channel-create-open { color: #e50914; font-weight: 700; }
.channel-create-done h2 { margin: 0 0 12px; font-size: 1.15rem; overflow-wrap: anywhere; }
.channel-create-next { display: grid; gap: 8px; }
.channel-create-next > a, .channel-create-share { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #e6e8ec; border-radius: 12px; background: #f7f7f9; color: #1c1d22; font-weight: 800; text-decoration: none; }
.channel-create-next > a:hover { border-color: #c9cdd4; }
.channel-create-next small { color: #5e6573; font-size: 12px; font-weight: 400; }
.channel-create-share span { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.channel-create-share button, .channel-create-share a { padding: 6px 14px; border: 1px solid #c9cdd4; border-radius: 999px; background: #fff; color: #1c1d22; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.channel-create-done .notice { margin-top: 10px; }
.channel-create-open { display: inline-block; margin-top: 12px; }

/* ── チャンネルの通報（段階7）── */
.channel-report { width: min(100% - 32px, 1080px); margin: 28px auto 0; }
.channel-report-link { padding: 0; border: 0; background: none; color: #8a8f99; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.channel-report-form { max-width: 520px; margin: 0; }
.channel-report-form select { padding: 8px 10px; border: 1px solid #ccc; border-radius: 10px; font: inherit; background: #fff; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.section-head h2 { margin: 0; font-size: 16px; }
.section-note { color: #5e6573; font-size: 12px; }
.more-sessions { display: block; width: 100%; margin-top: 8px; padding: 9px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #333; font-size: 14px; font-weight: 700; cursor: pointer; }

/* 掲示板（チャンネルの紹介の下） */
.channel-board { padding: 18px; }
.board-intro { margin: 0 0 10px; color: #5e6573; font-size: 13px; line-height: 1.7; }
.board-form { display: grid; gap: 6px; margin-bottom: 6px; }
.board-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.board-form textarea, .board-reply-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #cfd3da; border-radius: 12px; font: inherit; font-size: 14px; resize: vertical; }
.board-as-host { display: flex; align-items: center; gap: 6px; color: #3b3f48; font-size: 12px; }
.board-form-actions { display: flex; align-items: center; gap: 10px; }
.board-form-actions button, .board-reply-send { padding: 7px 16px; border: 0; border-radius: 999px; background: #e50914; color: #fff; font-weight: 800; cursor: pointer; }
.board-form-actions button:disabled, .board-reply-send:disabled { opacity: .6; cursor: default; }
.board-status { margin: 0 0 6px; color: #5e6573; font-size: 12px; }
.board-status:empty { display: none; }
.board-status-error { color: #b00020; }
.board-keep-note { margin: 0 0 12px; color: #8c93a0; font-size: 12px; }
.board-login-note { margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: #f5f5f7; color: #3b3f48; font-size: 13px; }
.board-login-note a { color: #e50914; font-weight: 700; }
.board-host-tools { margin-bottom: 8px; }
.board-host-tools button { padding: 3px 12px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #555; font-size: 12px; cursor: pointer; }
.board-list { display: grid; max-height: 70vh; overflow-y: auto; }
.board-post { padding: 12px 0; border-top: 1px solid #eef0f3; }
.board-list > .board-post:first-child { border-top: 0; }
.board-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 2px; font-size: 12px; }
.board-post-head strong { font-size: 13px; }
.board-host-badge { padding: 0 6px; border-radius: 4px; background: #fde6e7; color: #a3121a; font-size: 10px; font-weight: 800; }
.board-own { color: #5e6573; }
.board-post-time { margin-left: auto; color: #8c93a0; }
.board-post-message { margin: 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.board-post-host > .board-post-message { font-weight: 600; }
.board-post-deleted > .board-post-message { color: #8c93a0; font-size: 13px; font-style: italic; }
.board-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.board-reaction { padding: 0 8px; border: 1px solid #e6e8ec; border-radius: 999px; background: #fff; color: #3b3f48; font-size: 12px; line-height: 22px; cursor: pointer; }
.board-reaction.is-mine { border-color: #e50914; background: #fff1f2; color: #a3121a; font-weight: 700; }
.board-reaction:disabled { cursor: default; opacity: .75; }
.board-post-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.board-post-actions:empty { display: none; }
.board-post-actions button, .board-report button, .board-reply-cancel { padding: 1px 10px; border: 1px solid #e0e3e8; border-radius: 999px; background: #fff; color: #6b7280; font-size: 11px; cursor: pointer; }
.board-post-actions button:disabled { opacity: .6; }
/* 返信は1段: 書き込みの下に、左に線を引いて並べる */
.board-replies { display: grid; gap: 0; margin: 8px 0 0 10px; padding-left: 10px; border-left: 2px solid #eef0f3; }
.board-reply { padding: 8px 0; border-top: 0; }
.board-reply-form { display: grid; gap: 6px; padding: 8px 0; }
.board-reply-form > button { justify-self: start; }
.board-report { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 10px; background: #f7f7f7; }
.board-report select { padding: 4px 8px; border: 1px solid #ccc; border-radius: 8px; font: inherit; font-size: 13px; }
.board-empty { margin: 0; color: #777; font-size: 14px; }

/* ── 上映会のチャンネル（body.tv）: 次の上映を映画館のチケットにする形（docs/design/channel-layouts/ のD。2026-10-18）。
   背景はほかのページと同じ明るい色（暗い画面はほかのページへ戻ったときに違和感があったのでやめた） ── */
body.tv { background: #f5f5f7; color: #1c1d22; }
/* リンクの文字は周りの色に。:where で強さを0にし、ボタン（「上映を作る」の白い文字など）の色の指定を上書きしない。 */
:where(.tv) a { color: inherit; }
.tv-bar { display: flex; align-items: center; gap: 22px; background: #fff; padding: 14px max(20px, calc((100vw - 1080px) / 2)); border-bottom: 1px solid #e6e8ec; }
.tv-logo { color: #e50914 !important; font-weight: 900; text-decoration: none; white-space: nowrap; }
.tv-logo span { margin-left: 6px; padding: 1px 8px; border-radius: 5px; background: #e50914; color: #fff; font-size: 12px; vertical-align: 2px; }
.tv-nav { display: flex; gap: 18px; font-size: 14px; }
.tv-nav a, .tv-bar-link { color: #5e6573 !important; text-decoration: none; }
.tv-nav a:hover, .tv-bar-link:hover { color: #1c1d22 !important; }
.tv-bar-link { margin-left: auto; font-size: 13px; white-space: nowrap; }
.tv-chip { display: inline-block; padding: 1px 9px; border-radius: 5px; font-size: 12px; font-weight: 800; line-height: 1.6; white-space: nowrap; }
.tv-chip.next, .tv-chip.live { background: #e50914; color: #fff; }
.tv-chip.live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #fff; vertical-align: 1px; animation: tv-blink 1.4s infinite; }
.tv-chip.done { background: #eef0f3; color: #5e6573; }
.tv-chip.later { border: 1px solid #d5d8de; color: #5e6573; }
@keyframes tv-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tv-chip.live::before { animation: none; } }
.tv-svc { position: absolute; left: 10px; top: 10px; padding: 0 7px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 11px; font-weight: 700; }
.tv-svc:empty { display: none; }
.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tv-btn.red { background: #e50914; color: #fff !important; }
.tv-btn.red:hover { background: #c40812; }
.tv-btn.ghost { border: 1px solid #c9cdd4; background: #fff; color: #1c1d22; font-size: 13px; padding: 8px 16px; }
.tv-btn.ghost:hover { border-color: #9aa0aa; }
.tv-btn[aria-pressed="true"], .tv-btn.red[aria-pressed="true"]:hover { border: 1px solid #f3b6b9; background: #fff1f2; color: #c4000f !important; }
.tv-host { text-decoration: none; }
.tv-host:not(.is-plain):hover { text-decoration: underline; }
.tv-host.is-plain { pointer-events: none; }
.tv-progress { height: 6px; margin: 0; overflow: hidden; border-radius: 3px; background: #f0e3d6; }
.tv-progress span { display: block; height: 100%; width: 0; background: #e50914; }
.tv-interest-info { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #f5f5f7; font-size: 13px; }
.tv-interest-info p { margin: 0; }
.tv-interest-info p + p { margin-top: 6px; }
.tv-interest-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tv-interest-links a, .tv-interest-note a { color: #c4000f !important; font-weight: 700; }
.tv-interest-note { color: #5e6573; }
.tv-interest-status { margin: 8px 0 0; color: #b00020; font-size: 13px; }
.tv-interest-status:empty { display: none; }

/* 見出し: 「（名前） の上映会」・テーマ・開催中の特集 */
.tk-head { width: min(100% - 40px, 1080px); margin: 26px auto 0; text-align: center; }
.tk-kicker { margin: 0; color: #c4000f; font-size: 13px; font-weight: 800; letter-spacing: .1em; overflow-wrap: anywhere; }
.tk-headline { margin: 2px 0 0; font-size: 1.6rem; line-height: 1.3; overflow-wrap: anywhere; }
.tk-note { margin: 2px 0 0; color: #5e6573; font-size: 13px; }

/* 次の上映のチケット: 本体（写真と作品）と、切り取り線の向こうの半券（時計とボタン） */
.tk-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 220px; width: min(100% - 40px, 1080px); margin: 18px auto 0; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); overflow: hidden; }
.tk-main { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; }
.tk-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, #3b1d6e, #c2185b); }
.tk-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.tk-art:hover img { transform: scale(1.03); }
.tk-badge { position: absolute; left: 10px; bottom: 10px; background: #e50914; color: #fff; }
.tk-badge.live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #fff; vertical-align: 1px; }
.tk-info { min-width: 0; }
.tk-stamp { display: inline-block; padding: 1px 10px; border: 2px solid #e50914; border-radius: 6px; color: #e50914; font-size: 12px; font-weight: 900; transform: rotate(-4deg); }
.tk-series { margin: 10px 0 0; color: #c4000f; font-size: 13px; font-weight: 800; }
.tk-title { margin: 4px 0 2px; font-size: 1.4rem; line-height: 1.3; overflow-wrap: anywhere; }
.tk-video { margin: 0; color: #5e6573; font-size: 13px; overflow-wrap: anywhere; }
.tk-when { margin: 10px 0 0; font-size: 16px; font-weight: 800; }
.tk-host-line { margin: 4px 0 0; color: #5e6573; font-size: 13px; }
.tk-stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 18px; border-left: 2px dashed #e1e3e8; background: #fff8f0; text-align: center; }
.tk-stub::before, .tk-stub::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: #f5f5f7; }
.tk-stub::before { top: -11px; }
.tk-stub::after { bottom: -11px; }
.tk-clock-row { display: grid; gap: 2px; margin: 0; }
.tk-stub-label { color: #5e6573; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.tk-clock { font-size: 28px; font-weight: 900; line-height: 1.15; white-space: pre-line; }
.tk-live { display: grid; justify-items: center; gap: 6px; width: 100%; }
.tk-position { font-size: 18px; font-weight: 900; }
.tk-live .tv-progress { width: 100%; }
.tk-stub .tv-btn { width: 100%; }
.tk-interest { color: #c4000f; font-size: 13px; font-weight: 800; }
.tk-empty { display: block; padding: 24px; }

/* その下: 左にこれから・これまでの上映、右にはじめての方へとチャンネルの紹介 */
.tk-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; width: min(100% - 40px, 1080px); margin: 30px auto 0; }
.tk-col, .tk-side { display: grid; gap: 22px; min-width: 0; }
.tk-section h2, .tk-card h2 { margin: 0 0 10px; font-size: 18px; }
.tk-list { padding: 4px 18px; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .06); }
.tk-list > p { margin: 0; padding: 12px 0; color: #5e6573; font-size: 14px; }
.tk-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; grid-template-areas: "when title chip" "when host chip"; gap: 0 14px; align-items: center; padding: 12px 0; border-top: 1px dashed #e1e3e8; text-decoration: none; }
.tk-row:first-child { border-top: 0; }
.tk-row-when { grid-area: when; font-size: 14px; font-weight: 800; }
.tk-row strong { grid-area: title; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.tk-row .tk-row-host { grid-area: host; color: #5e6573; font-size: 12px; text-decoration: none; }
.tk-row a.tk-row-host:hover, a.tk-row:hover strong { text-decoration: underline; }
.tk-row .tv-chip { grid-area: chip; }
.tk-row.is-done strong { font-weight: 600; }
.tk-card { padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .06); }
.tk-howto h2 { font-size: 15px; }
.tk-howto ol { margin: 0; padding-left: 20px; color: #3b3f48; font-size: 13px; line-height: 1.7; }
.tv .more-sessions { margin-top: 10px; }

/* チャンネルの紹介（右の列のカード）。編集・メンバー・窓・掲示板は上の明るい見た目のまま */
.tv .channel-head { padding: 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .06); }
.tv .channel-head-in { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.tv .channel-mark { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; box-shadow: none; }
.tv .channel-head-meta { flex-basis: calc(100% - 72px); }
.tv .channel-head h2 { margin: 0; font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.tv .channel-description { font-size: 13px; }
.tv .channel-head-actions { display: flex; flex-wrap: wrap; width: 100%; justify-content: flex-start; align-items: center; }
.tv .channel-head > .notice { padding-left: 0; }
.tv .channel-edit, .tv .channel-members { margin-left: 0; }
.tv .channel-board { width: min(100% - 40px, 1080px); margin: 22px auto 0; }
.tv .channel-board.is-closed { display: none; }
.tv .channel-report { margin-top: 30px; }

@media (max-width: 860px) {
  .tk-cols { grid-template-columns: minmax(0, 1fr); }
  .tk-main { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .tv-bar { gap: 12px; padding: 12px 16px; }
  .tv-nav { display: none; }
  .tk-head, .tk-ticket, .tk-cols, .tv .channel-board { width: calc(100% - 32px); }
  .tk-headline { font-size: 1.3rem; }
  /* チケットを縦に: 写真・作品の下に、横の切り取り線と半券 */
  .tk-ticket { grid-template-columns: minmax(0, 1fr); }
  .tk-main { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .tk-stub { border-left: 0; border-top: 2px dashed #e1e3e8; }
  .tk-stub::before, .tk-stub::after { top: -12px; bottom: auto; }
  .tk-stub::before { left: -11px; }
  .tk-stub::after { left: auto; right: -11px; }
  .tk-clock { white-space: normal; }
  .tk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when chip" "title chip" "host chip"; }
  .tk-list { padding: 4px 14px; }
  .channel-head { padding: 18px 14px; }
  .channel-head-in { flex-wrap: wrap; gap: 12px; }
  .channel-mark { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; }
  .channel-head-meta { flex-basis: calc(100% - 72px); }
  /* ボタンは折り返して並べる（2列の格子だと、長いボタンが狭い画面の右にはみ出す） */
  .channel-head-actions { display: flex; flex-wrap: wrap; width: 100%; justify-content: flex-start; align-items: center; }
  .channel-head > .notice { padding-left: 0; }
  .channel-edit, .channel-members { margin-left: 0; }
}