:root{color-scheme:light;--bg:#fff;--ink:#1F2328;--soft:#545B64;--line:#D0D5DD;--control:#89717D;--accent:#AD3F58;--strong:#96334B;--parent:#176B66;--child:#A64B16;--parent-bg:#EDF6F4;--child-bg:#FFF3E8;--press:90ms;--release:220ms;--spring:cubic-bezier(.34,1.56,.64,1);--press-scale:.96;--press-scale-soft:.975}
*{box-sizing:border-box}html{overflow-anchor:none}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;font-size:16px;line-height:1.75;overflow-wrap:anywhere}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button,a.button{min-height:44px;min-width:44px}button{font-size:14px;line-height:1.5;padding:10px 14px;border-radius:8px}a{color:var(--strong)}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--strong);outline-offset:3px}.primary{background:var(--accent);color:white;border:1px solid var(--accent)}.secondary{background:white;border:1px solid var(--control);color:var(--ink)}.quiet{border:0;background:white;color:var(--strong);text-decoration:underline;padding:10px 4px}.demo-strip{font-size:12px;color:var(--soft);text-align:center;border-bottom:1px solid var(--line);padding:6px 12px}.header,.wrap{max-width:880px;margin:auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.header{padding-top:8px;padding-bottom:12px;display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap}.brand{font-family:'Zen Maru Gothic',Meiryo,sans-serif;font-size:23px;font-weight:700;color:var(--ink);text-decoration:none;min-height:44px;display:flex;align-items:center;margin-right:auto}.current-profile{font-size:13px;margin:0;flex:1 1 100%}.ages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.ages button{border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font-size:14px;padding:8px}.ages button[aria-pressed=true]{background:#343A40;color:white;font-weight:700;border-color:#343A40}.boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;border-bottom:1px solid var(--line);margin-top:16px}.boards button{border:0;border-bottom:4px solid transparent;border-radius:6px 6px 0 0;background:white;color:var(--ink);font-size:17px;padding:10px 4px}.boards button[aria-pressed=true]{font-weight:700}.rules{padding:8px 0 0}.rules p{margin:0;font-size:14px}.rules .small,.small{font-size:13px;color:var(--soft)}.search{display:block;font-size:13px;margin:8px 0}input,textarea,select{display:block;width:100%;max-width:100%;min-width:0;font-size:16px;border:1px solid var(--control);border-radius:8px;background:white;color:var(--ink);padding:10px 12px;min-height:44px}input::placeholder,textarea::placeholder{color:#625861;opacity:1}textarea{resize:vertical;min-height:140px;line-height:1.75}label{display:block;font-size:14px;margin-bottom:12px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h1,.section-head h2{font-size:18px;margin:8px 0}.section-head+p:empty{display:none}.post-row{border-bottom:1px solid var(--line);padding:14px 0}.post-row:first-child{border-top:1px solid var(--line)}.post-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}.list-title{font-weight:700;font-size:16px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.answer-count{font-size:14px;white-space:nowrap;color:var(--soft);font-variant-numeric:tabular-nums}.sample,.closed{font-size:12px;color:var(--soft);margin-right:8px}.back{display:inline-flex;align-items:center;min-height:44px;font-size:14px;margin:10px 0}.post-title{font-size:26px;line-height:1.5;margin:12px 0;overflow-wrap:anywhere}.meta{font-size:13px;color:var(--soft);margin:8px 0}.body-copy{font-size:16px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.post-content{padding-bottom:18px;border-bottom:2px solid #98A2B3}.answers{padding-top:12px}.answers>h2{font-size:20px;margin:0 0 8px}.answer{border-bottom:1px solid var(--line);padding:18px 0}.answer h3{font-size:16px;margin:0}.replies{margin:14px 0 12px;padding:0 12px;background:#F5F6F7;border-left:2px solid #98A2B3}.reply{border-top:1px solid var(--line);padding:10px 0}.reply:first-child{border-top:0}.entry-tools{display:flex;justify-content:flex-end}.reply-form,.answer-form{margin-top:20px}.form-note{font-size:13px;color:var(--soft)}.form-error{font-size:14px;color:#96334B;white-space:pre-wrap}.form-error:empty{display:none}.saved{outline:2px dashed #545B64;outline-offset:4px}.footer{font-size:12px;color:var(--soft);border-top:1px solid var(--line);margin-top:32px;padding-top:16px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}.profile-group{border-top:1px solid var(--line);padding:12px 0}.profile-group h3{font-size:16px;margin:0 0 8px}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.profile-grid button{overflow-wrap:anywhere;text-align:left}.profile-grid button[aria-pressed=true]{border:2px solid var(--strong);font-weight:700}
/* Retain v3's fixed-body lock and visual-viewport sizing for Safari modal scroll. */
body.modal-locked{position:fixed;width:100%;overflow:hidden}dialog{position:fixed;inset:var(--visible-top,0px) 0 auto;margin:max(12px,env(safe-area-inset-top)) auto 0;width:calc(100% - 24px);max-width:580px;max-height:calc(var(--visible-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border:1px solid var(--line);border-radius:8px;padding:0;overflow:hidden;color:var(--ink);background:white}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:rgb(31 35 40 / .4)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:12px 16px;flex-shrink:0}.modal-head h2{font-size:18px;margin:0;min-width:0}.modal-head button{flex-shrink:0}#modalBody{padding:16px;overflow-y:auto;overscroll-behavior:contain;min-height:0;scroll-padding-bottom:24px;-webkit-overflow-scrolling:touch}#modalNotice{padding:8px 16px;margin:0;font-size:14px;color:var(--strong)}#modalNotice:empty{display:none}#notice{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:10px 14px;color:white;background:var(--ink);border-radius:8px;pointer-events:none;font-size:14px;z-index:10}#notice:empty{display:none}[hidden]{display:none!important}
@media(max-width:600px){.brand{font-size:20px}.header{gap:6px}.header>button{font-size:13px;padding:10px}.current-profile{flex-basis:100%;text-align:left}.ages{grid-template-columns:repeat(2,minmax(0,1fr))}.post-title{font-size:23px}.profile-grid{grid-template-columns:1fr}.rules p{font-size:13px}.replies{padding-left:10px}}
@media(prefers-reduced-motion:no-preference){
button{transform:scale(1);transition:transform var(--release) var(--spring),background-color .12s}
button.is-pressed{transform:scale(var(--press-scale));transition:transform var(--press) ease-out,background-color .12s}
.secondary.is-pressed,.ages button.is-pressed,.boards button.is-pressed{transform:scale(var(--press-scale-soft))}
.quiet,.report{transition:transform .14s ease-out,background-color .12s}
.quiet.is-pressed,.report.is-pressed{transform:scale(.985)}
.ages button,.boards button{transition:transform var(--release) var(--spring),background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.ages button.is-pressed,.boards button.is-pressed{transition:transform var(--press) ease-out,background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.post-link{transition:background-color .12s ease-out}
dialog[open]{animation:modalIn var(--release) var(--spring)}
@keyframes modalIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.answer-form,.reply-form{animation:formIn var(--release) var(--spring)}
@keyframes formIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.saved{animation:savedPop var(--release) var(--spring)}
@keyframes savedPop{0%{transform:scale(.985)}60%{transform:scale(1.015)}100%{transform:scale(1)}}
.editor-slot{transition:opacity .13s ease-out}
}

/* Separate topic selection, speaking roles, and conversation controls. */
.age-area{background:#F1F3F5;padding:10px;border-radius:8px}.age-label{font-size:12px;color:var(--soft);margin:0 0 4px}.boards small{display:block;font-size:12px;font-weight:400;line-height:1.5;margin-top:4px}.boards [data-board=parent][aria-pressed=true]{background:var(--parent-bg);color:var(--parent);border-bottom-color:var(--parent)}.boards [data-board=child][aria-pressed=true]{background:var(--child-bg);color:var(--child);border-bottom-color:var(--child)}.rules details{font-size:13px;color:var(--soft)}summary{min-height:44px;cursor:pointer;align-content:center;font-size:13px}summary:focus-visible{outline:3px solid var(--strong);outline-offset:2px}.rules details[open]{padding-bottom:8px}.rules details p{margin:4px 0}.profile-tool{background:white;color:var(--soft);border:0;text-decoration:underline;padding:8px 2px;font-size:13px}.entry-meta{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}.entry-meta .meta{min-width:0;margin:8px 0}.role-badge{display:inline-block;font-weight:700;font-size:13px;padding:2px 6px;border-radius:4px}.role-badge.parent{color:var(--parent);background:var(--parent-bg)}.role-badge.child{color:var(--child);background:var(--child-bg)}.report{background:transparent;color:var(--soft);font-size:12px;flex-shrink:0;border:0;padding:10px 4px}.replies:empty{display:none}.editor{margin:16px 0}.form-actions,.own-answers>div{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.own-answers{margin:12px 0;border-bottom:1px solid var(--line);padding-bottom:12px}.own-answers>div+div{margin-top:8px}.post-management{margin-top:20px;border-top:1px solid var(--line);color:var(--soft)}.post-management button{margin:8px 0}.answer-form,.reply-form{scroll-margin-bottom:24px}.answer-form textarea,.reply-form textarea{scroll-margin-top:16px;scroll-margin-bottom:100px}.answer{scroll-margin-top:12px}

/* Keep the list reachable: the top holds role, age, tabs and search without repeating itself. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.role-bar{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.current-profile{flex:0 1 auto}
.mine-open{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:13px;padding:10px 12px}
.age-area{padding:8px 10px}.age-label{margin:0 0 2px}
.ages button{padding:8px 2px;font-size:13px;overflow-wrap:anywhere}
.search{margin:6px 0 2px}
.rules{padding:0}.rules details{margin:0}
.new-mark{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--strong);white-space:nowrap}
.new-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.new-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.answer.is-new,.reply.is-new{border-left:3px solid var(--accent);padding-left:10px}
.own-answers .own-title{margin:0 0 6px;font-size:14px;font-weight:700}
.own-links{display:flex;gap:8px;flex-wrap:wrap}
.answer-jump{margin:12px 0 0}
.mine-title{font-size:23px;margin:8px 0}
#mineTabs{margin-top:12px}
.mine-meta{font-size:13px;color:var(--soft);margin:4px 0 0}
.draft-choice .form-actions{margin:12px 0;gap:8px}
@media(max-width:600px){.ages{grid-template-columns:repeat(4,minmax(0,1fr))}.mine-title{font-size:20px}}

/* Tactile feedback state: kept unconditional so color/visibility still switches instantly under reduced-motion, only the smoothing transition above is gated. */
.post-link.is-pressed{background:#F5F6F7}
@media(hover:hover) and (pointer:fine){.post-link:hover{background:#F5F6F7}}
.editor-slot.closing{opacity:0}

/* Keep the two moving lists inside their own viewport, without changing page scroll. */
.board-stage{position:relative;min-width:0}.board-stage.sliding{overflow:clip}.board-outgoing{position:absolute;inset:0 0 auto;pointer-events:none;background:var(--bg)}#boardPanel{position:relative;background:var(--bg)}#boardPanel>.section-head+p:empty{display:none}

.board-cue{position:relative;display:grid;place-items:center;min-height:56px;padding:2px 0;text-align:center}.board-cue #boardRule{margin:0;line-height:1.75}.board-cue.showing-art #boardRule{opacity:0}.board-role-art{position:absolute;width:80px;height:52px;pointer-events:none;z-index:1;display:flex;align-items:center;justify-content:center}.board-role-art.parent{color:var(--parent)}.board-role-art.child{color:var(--child)}.board-role-art .art-frame{position:relative;display:block;line-height:0}.board-role-art .art-figure{display:block;width:auto;height:auto;max-width:80px;max-height:52px;-webkit-user-drag:none;user-select:none}.board-role-art .art-bubble{position:absolute;left:100%;top:0;width:9px;height:9px;margin-left:1px;overflow:visible;transform-origin:left bottom}@media(prefers-reduced-motion:reduce){.board-role-art{display:none}}

/* Member-specific layout; the v4 typography, content rows, modal and role palette are shared. */
/* Design baseline (2026-09-14): one value per role. generation.css stays untouched; the member app overrides it here. */
:root{--control:#7B818A;
 --fs-meta:13px;--fs-ui:14px;--fs-body:16px;--fs-panel:20px;--fs-section:22px;--fs-page:24px;
 --lh-body:1.75;--lh-text:1.5;--lh-heading:1.4;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
 --radius:8px;--radius-pill:999px;
 --rule-strong:#98A2B3;--surface-quiet:#F2F3F5;--accent-tint:#FBEAF0;--radius-sm:4px;
 --dur-press:90ms;--dur-state:120ms;--dur-move:200ms;--ease-out:cubic-bezier(.22,.75,.25,1);
 --press:var(--dur-press);--release:var(--dur-move);--spring:var(--ease-out)}
#memberHeader{min-height:76px;flex-wrap:wrap;gap:4px 12px}#memberHeader .brand{font-size:var(--fs-panel);min-width:0}#accountNav{display:flex;gap:6px;flex-shrink:0;margin-left:auto}#accountNav button{font-size:var(--fs-ui);padding:8px;white-space:nowrap}
/* Only 新規登録 stays a filled brand button; ログイン reads as plain dark text. */
#accountNav .plain{border:0;background:white;color:var(--ink);font-weight:400;text-decoration:none;min-height:44px;padding:8px 6px}
.member-ages{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;border-bottom:1px solid var(--line);gap:0;max-width:100%}.member-ages button{flex:1 0 max-content;min-width:58px;white-space:nowrap;border:0;border-bottom:2px solid transparent;border-radius:0;background:white;color:var(--ink);font-size:var(--fs-ui);padding:10px 6px}.member-ages button[aria-pressed=true]{font-weight:700;border-bottom-color:var(--ink);background:var(--surface-quiet)}
.affiliation{font-size:var(--fs-meta);color:var(--soft)}#connection:empty{display:none}#connection{margin:0 0 var(--space-2)}#policyLinks{display:contents}#more{margin:var(--space-4) 0;width:100%}.check-label{display:flex;align-items:flex-start;gap:var(--space-2)}.check-label input{width:20px;min-height:24px;flex-shrink:0}.form-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.notification-row{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}.new-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#D92D20;margin-left:4px}.member-menu{display:grid;gap:var(--space-2)}.member-menu button{text-align:left}.answer-form .form-actions{margin-top:var(--space-3)}#postView .body-copy{white-space:pre-wrap}.pending{opacity:.7}button:disabled{opacity:.65;cursor:default}.auth-links{display:flex;gap:var(--space-4);flex-wrap:wrap}.board-role-art{pointer-events:none}
@media(max-width:360px){#accountNav button{padding:8px 6px}}

/* Top-level spaces: the generation questions (home), 雑談ひろば and 運営からのお知らせ. */
/* Space tabs (2026-09-14): one full-width segmented control, so the row has no empty right side. Enlarged text overflows into a sideways strip. */
.spaces{display:flex;gap:0;flex-wrap:nowrap;margin:0 0 var(--space-3);padding:1px;border:1px solid var(--control);border-radius:var(--radius-pill);background:white;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.spaces button{flex:1 1 0;min-width:max-content;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink);font-size:var(--fs-ui);padding:8px 12px;min-height:44px;white-space:nowrap}
.spaces button[aria-pressed=true]{font-weight:700;background:var(--ink);color:white}
.search{margin:var(--space-3) 0}
/* One chosen announcement, between the search box and the popular list. */
.home-notice{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-3);min-height:44px;padding:var(--space-2) var(--space-3);margin:0 0 var(--space-4);background:var(--surface-quiet);color:var(--ink);text-decoration:none;border-radius:var(--radius)}
.home-notice-label{flex:0 0 auto;font-size:var(--fs-meta);line-height:var(--lh-text);color:var(--strong);background:var(--accent-tint);border-radius:var(--radius-sm);padding:0 var(--space-1)}
.home-notice-title{flex:1 1 10ch;min-width:0;font-weight:700;font-size:var(--fs-body);line-height:var(--lh-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-notice-arrow{flex:0 0 auto;margin-left:auto;color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-text)}
.notice-admin{margin:var(--space-4) 0;padding:var(--space-3) 0;border-top:1px solid var(--line)}
.notice-admin p{margin:var(--space-2) 0 0}
/* お知らせ detail (2026-09-14): tag and date, the operator line with the logo, a quiet no-comment note, older/newer links. */
.notice-head{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2) 0 0}
.notice-tag{font-size:var(--fs-meta);line-height:var(--lh-text);color:var(--strong);background:var(--accent-tint);border-radius:var(--radius-sm);padding:0 var(--space-1)}
.notice-by{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0 0 var(--space-3);border-bottom:2px solid var(--ink);font-size:var(--fs-meta);line-height:var(--lh-text);font-weight:700}
.notice-by~.post-content{padding-bottom:0;border-bottom:0}
.notice-closed{margin:var(--space-5) 0 0;padding:var(--space-2) var(--space-3);background:var(--surface-quiet);border-radius:var(--radius);font-size:var(--fs-meta);line-height:var(--lh-text);color:var(--soft)}
.notice-pager{margin:var(--space-5) 0 0;border-top:1px solid var(--line)}
.pager-link{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:var(--space-3);min-height:44px;padding:var(--space-2) 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.pager-label{font-size:var(--fs-meta);color:var(--soft);white-space:nowrap}
.pager-title{font-size:var(--fs-ui);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The end of every detail: one outlined button back to the list. */
.detail-end{display:flex;align-items:center;justify-content:center;min-height:44px;margin:var(--space-5) 0 var(--space-4);border:1px solid var(--control);border-radius:var(--radius);color:var(--ink);text-decoration:none;font-size:var(--fs-ui)}
@media(hover:hover) and (pointer:fine){.pager-link:hover,.detail-end:hover{background:var(--surface-quiet)}}
/* Footer (2026-09-14): centred links with thin dividers, then the logo, the name and one line about the place. */
.footer{font-size:var(--fs-meta);text-align:center}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.footer-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-3);color:var(--ink);text-decoration:none;white-space:nowrap}
.footer-links a:not(.footer-link)::before{content:'';position:absolute;left:0;top:50%;width:1px;height:12px;margin-top:-6px;background:var(--rule-strong)}
@media(hover:hover) and (pointer:fine){.footer-links a:hover{text-decoration:underline}}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-3) 0 0;font-family:'Zen Maru Gothic',Meiryo,sans-serif;font-size:var(--fs-ui);line-height:var(--lh-text);font-weight:700;color:var(--ink)}
.footer-tagline{margin:var(--space-1) 0 0;line-height:var(--lh-text);color:var(--soft)}


/* List rows: the same rhythm in popular, the home groups and every board list. */
.post-row{padding:var(--space-3) 0}
.post-link{gap:var(--space-1) var(--space-3)}
/* Row format (2026-09-14, DCInside-style): board line on top, then title[count] and the date on one line. */
.post-link{align-items:baseline;align-content:center}
.post-link .row-meta{grid-column:1 / -1}
/* Title and [count] share one two-line text box, so the count follows the last character. */
.post-link .row-title{grid-column:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-width:0;font-weight:700;font-size:var(--fs-body);line-height:var(--lh-text);overflow-wrap:anywhere}
.list-title{line-height:var(--lh-text)}
.row-title .list-title{display:inline}
.reply-count{font-size:var(--fs-ui);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.pin-tag{display:inline-block;margin-right:var(--space-1);vertical-align:1px;font-size:var(--fs-meta);line-height:var(--lh-heading);font-weight:400;color:var(--strong);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:0 var(--space-1)}
/* member.js cuts a title that needs more than two lines ("…" plus room for [99+]); while it measures, the box is unclamped. The clamp stays as a fallback. */
.post-link .row-title.is-measuring{display:block;-webkit-line-clamp:none;overflow:visible}
.post-link .post-date{grid-column:2;white-space:nowrap}
.row-meta{display:flex;flex-wrap:wrap;gap:0 var(--space-2);font-size:var(--fs-meta);line-height:var(--lh-heading);color:var(--soft)}
.row-meta .closed{font-size:var(--fs-meta);margin:0}
.affiliation.chat{color:var(--ink)}
.section-head h1,.section-head h2{font-size:var(--fs-section);line-height:var(--lh-heading);margin:var(--space-2) 0}
#activityView h1{font-size:var(--fs-section);line-height:var(--lh-heading);margin:var(--space-2) 0 var(--space-3)}
.boards button{font-size:var(--fs-body);border-radius:var(--radius) var(--radius) 0 0}
#popular h2{font-size:var(--fs-section);line-height:var(--lh-heading);margin:var(--space-3) 0 0;padding-bottom:var(--space-2);border-bottom:2px solid var(--ink)}
#popular{margin-bottom:var(--space-6)}

/* Waiting, nothing there and failure each have one look. */
.state{margin:0;padding:var(--space-4) 0;font-size:var(--fs-ui);line-height:var(--lh-text);color:var(--soft)}
.state p{margin:0}
.state-empty{border-bottom:1px solid var(--line)}
.state-error{margin:var(--space-3) 0;padding:var(--space-2) 0 var(--space-2) var(--space-3);border-left:3px solid var(--strong);color:var(--ink)}
.state-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-2)}
.state-loading{animation:stateAppear var(--dur-state) ease-out 300ms both}
@keyframes stateAppear{from{opacity:0}to{opacity:1}}
#notice{font-size:var(--fs-ui);line-height:var(--lh-text)}
#notice.is-error{box-shadow:inset 4px 0 0 #F4A6B7;padding-left:18px}

/* Detail and conversation: title, author, body, then actions; one rule for answers, follow-ups and comments. */
.back{margin:var(--space-2) 0}
.meta{line-height:var(--lh-text)}
.post-title{font-size:var(--fs-page);font-weight:700;line-height:var(--lh-heading);margin:var(--space-2) 0}
.post-content{padding-bottom:0;border-bottom:0}
.post-content .body-copy,.answer .body-copy{max-width:42em}
/* Detail (2026-09-17): the post stays on the cream page with its poll and post buttons; an 8px warm-grey band then opens a white answer area
   (edge to edge on phones, inside the content width on larger screens). 回答/コメント N件 is a small section title so the post title stays the
   strongest heading, the list follows it directly, and joining in (login prompt, 回答する/コメントする, 受付終了) comes after the list. */
.answers{margin-top:var(--space-5);padding:var(--space-4) var(--space-4) var(--space-5);border-top:8px solid #EFEAE5;background:white}
@media(max-width:600px){.answers{margin-left:calc(-1 * max(16px,env(safe-area-inset-left)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right)));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}
.answers>h2{font-size:17px;font-weight:600;line-height:var(--lh-heading);margin:0}
.answers-count{margin-left:var(--space-1);font-size:var(--fs-ui);font-weight:400;color:var(--soft)}
.join{margin-top:var(--space-4)}
.join:empty{display:none}
.join-prompt{padding:var(--space-3) var(--space-4) var(--space-4);background:var(--band-pink);border-radius:var(--radius)}
.join-lead{margin:0 0 var(--space-2);font-size:var(--fs-ui);font-weight:700;line-height:var(--lh-text);color:#96334B}
/* Dark text on the light pink button: white text on it is below 4.5:1. */
.join .join-login{width:100%;color:var(--ink)}
.answer{padding:var(--space-4) 0}
.answer>.secondary{margin-top:var(--space-3)}
.entry-meta{display:flex;align-items:center;justify-content:space-between;gap:0 var(--space-3);flex-wrap:wrap}
.entry-meta .meta{margin:0;flex:1 1 12ch;min-width:0}
.entry-meta+.body-copy{margin:var(--space-1) 0 0}
.answers .entry-name{font-size:var(--fs-ui);font-weight:700;color:var(--ink)}
.poster-tag{display:inline-block;margin-right:var(--space-2);padding:0 var(--space-1);border-radius:var(--radius-sm);background:var(--accent-tint);color:#96334B;font-size:12px;line-height:var(--lh-text)}
.entry-report{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 var(--space-1);border:0;border-radius:var(--radius);background:transparent;color:var(--soft);font-size:var(--fs-meta);text-decoration:underline}
.post-report{margin:var(--space-3) 0 0}
.replies{margin:var(--space-3) 0 0;padding:0 0 0 var(--space-3);background:none;border-left:2px solid var(--rule-strong)}
.reply{padding:var(--space-2) 0;border-top:1px solid var(--line)}

/* Buttons: primary, secondary, link-style, plain text and icon; link-style buttons never draw a box. */
.quiet{background:transparent}
.close-button,.menu-close{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--space-2);border:0;background:transparent;color:var(--ink);font-size:var(--fs-ui)}
.modal-head h2{font-size:var(--fs-panel);line-height:var(--lh-heading)}
.post-link.is-pressed{background:var(--surface-quiet)}
@media(hover:hover) and (pointer:fine){.post-link:hover{background:var(--surface-quiet)}}

/* Chat comments reuse the conversation rule above. */

/* Every row carries the posted date on the right (format: listStamp in member.js). */
.post-date{font-size:var(--fs-meta);color:var(--soft);font-variant-numeric:tabular-nums}

/* ☰ opens the board menu; it and the brand always stay together, and the account area may wrap below. */
.header-start{display:flex;align-items:center;gap:2px;min-width:0;margin-right:auto}
#memberHeader .header-start .brand{margin-right:0}
/* Logo (2026-09-14): a sun with a parent and a child, beside the two-line name 親子の / ひだまり. */
#memberHeader .brand{gap:var(--space-2)}
.brand-name{display:flex;flex-direction:column;line-height:1.2}
.brand-sub{font-size:var(--fs-meta);color:var(--soft)}
.brand-main{font-size:var(--fs-panel)}
.menu-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin-left:-10px;border:0;border-radius:var(--radius);background:transparent;color:var(--ink)}
.menu-button svg{width:22px;height:22px}

/* Left board menu: board navigation only, apart from the account menu. */
.board-menu{inset:0 auto 0 0;margin:0;width:min(84vw,320px);max-width:none;height:auto;max-height:none;border:0;border-radius:0;transform:translateX(-100%);transition:transform var(--dur-move) var(--ease-out);animation:none}
.board-menu[open]{display:block;animation:none}
.board-menu.is-open{transform:translateX(0)}
.board-menu-panel{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:max(8px,env(safe-area-inset-top)) 12px max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.board-menu-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:0 0 var(--space-2) var(--space-3);border-bottom:1px solid var(--line)}
.board-menu-head h2{font-size:var(--fs-panel);line-height:var(--lh-heading);margin:0}
.menu-list,.menu-sub{list-style:none;margin:0;padding:0}
.menu-list{padding-top:var(--space-2)}
.menu-link{display:flex;align-items:center;min-height:44px;padding:var(--space-2) var(--space-3);border-left:3px solid transparent;color:var(--ink);text-decoration:none;font-size:var(--fs-body);line-height:var(--lh-text)}
.menu-sub .menu-link{padding-left:28px}
.menu-group{margin:var(--space-2) 0;padding:var(--space-2) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* The generation group name is a caption, not a link: smaller and grey so it is not mistaken for a place to tap. */
.menu-group-label{display:block;padding:var(--space-2) var(--space-3) var(--space-1);border-left:3px solid transparent;font-size:var(--fs-ui);line-height:var(--lh-text);font-weight:700;color:var(--soft)}
.menu-group-label.is-inside{color:var(--ink)}
.menu-link.is-current{font-weight:700;border-left-color:var(--ink);background:var(--surface-quiet)}

/* Home: each board as its own titled group; the rows inside stay close, the groups apart. */
.home-group{margin:0 0 var(--space-6)}
.group-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:0 var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--ink)}
.group-text{min-width:0}
.group-head h2{font-size:var(--fs-section);line-height:var(--lh-heading);margin:0}
.group-head p{margin:var(--space-1) 0 0}
.group-more{display:flex;align-items:center;min-height:44px;padding:0 2px;white-space:nowrap;font-size:var(--fs-ui)}
.group-list .post-row:first-child{border-top:0}
.all-latest{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;margin:0 0 var(--space-5);border:1px solid var(--control);border-radius:var(--radius);color:var(--ink);text-decoration:none;font-size:var(--fs-ui)}

/* Motion: press, state change and movement use three durations and one ease-out curve, with no overshoot. */
@media(prefers-reduced-motion:no-preference){
 button{transition:transform var(--release) var(--spring),background-color var(--dur-state) ease-out}
 button.is-pressed{transition:transform var(--press) ease-out,background-color var(--dur-state) ease-out}
 .quiet,.report,.entry-report,.close-button,.menu-close{transition:transform var(--dur-press) ease-out,background-color var(--dur-state) ease-out}
 .quiet.is-pressed,.report.is-pressed,.entry-report.is-pressed{transform:scale(.985)}
 .ages button,.boards button,.member-ages button,.spaces button{transition:transform var(--release) var(--spring),background-color var(--dur-state) ease-out,color var(--dur-state) ease-out,border-color var(--dur-state) ease-out}
 .ages button.is-pressed,.boards button.is-pressed,.member-ages button.is-pressed,.spaces button.is-pressed{transition:transform var(--press) ease-out,background-color var(--dur-state) ease-out,color var(--dur-state) ease-out,border-color var(--dur-state) ease-out}
 .post-link{transition:background-color var(--dur-state) ease-out}
}
@media (prefers-reduced-motion: reduce){.board-menu{transition:none}.state-loading{animation:none}}

/* Swipes: horizontal moves belong to the page script; vertical scrolling and pinch zoom stay with the browser.
   Strips that really scroll sideways keep their own horizontal panning. */
body,body *{touch-action:pan-y pinch-zoom}
.scrolls-x,.scrolls-x *{touch-action:manipulation}
.board-menu.is-dragging{transition:none;z-index:1000}
.board-menu::backdrop{background:rgb(31 35 40 / calc(.4 * var(--menu-progress,1)))}
.menu-shade{position:fixed;inset:0;z-index:999;background:rgb(31 35 40 / .4);opacity:0}
body.is-swiping-back main,body.is-swiping-back .footer{box-shadow:-12px 0 24px rgb(31 35 40 / .12)}

/* Section headings on list screens: larger than post titles, marked with a short accent bar, over a 2px dark rule
   that differs from the 1px light line between posts. Panel titles (dialogs, menu, 回答/コメント) stay at --fs-panel. */
.section-head{border-bottom:2px solid var(--ink);padding-bottom:var(--space-1)}
#popular h2,.group-head h2,.section-head h1,#activityView h1{position:relative;padding-left:14px}
#popular h2::before,.group-head h2::before,.section-head h1::before,#activityView h1::before{content:'';position:absolute;left:0;top:.2em;height:1em;width:4px;border-radius:2px;background:var(--accent)}
#popularList .post-row:first-child,#postList .post-row:first-child,.group-list .post-row:first-child{border-top:0}

/* Focus rings are for keyboard navigation only (member.js sets data-input). Finger and mouse users see none;
   text fields keep a quiet dark border so the field being typed in is still clear. */
html:not([data-input="keyboard"]) :focus-visible{outline:none}
html:not([data-input="keyboard"]) :is(input,textarea,select):focus-visible{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* ===== Picture-book look after the approved version 1 mockup (2026-09-14; mockup copy: v1-page-mockup-reference.png) =====
   Ivory paper, dusty pink / pink-beige / sage accents, rounded type where the device has it (Hiragino Maru Gothic on iPhone and Mac; no web font
   is downloaded), white post cards, and the eight approved PNGs. The PNGs are reduced copies of the delivered files (make-decor-small.cjs: exact area average to 4x the largest drawn size), never recoloured or stretched
   (each <img> keeps its own ratio, object-fit: contain). Each file has a flat cream background (#FEFBF4-#FEFCF6) and no transparency: on ivory it
   meets the same cream; on a tinted band or row a soft cream glow (.glow) sits behind the drawing so no box edge shows. .decor only hides the empty
   cream margin around a drawing by placing the image inside a clipped box; the drawing itself stays whole. */
:root{--bg:#FEFBF4;--ink:#3F3A3B;--soft:#6B6264;--accent:#C8687A;--strong:#BA6474;--control:#9C8B7F;--line:#EFE6DF;--surface-quiet:#F6F0E6;--paper-line:#F0E6DC;--tab-on:#DAA5AC;--band-pink:#FAEEEC;--band-sage:#EEEFE4;--notice-bg:#F4EFE1;--label-sage:#77725C;--petal:#D9A6AB;--card-radius:14px;--round:'Hiragino Maru Gothic ProN','Zen Maru Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif}
html{background:var(--bg)}
.decor{position:relative;display:block;flex:none;overflow:hidden;pointer-events:none;height:var(--h);width:calc(var(--h) * var(--sw) / (var(--sh) * var(--ar)))}
.decor img{position:absolute;max-width:none;height:auto;object-fit:contain;width:calc(var(--h) / (var(--sh) * var(--ar)));left:calc(var(--h) * var(--sx) / (var(--sh) * var(--ar)) * -1);top:calc(var(--h) * var(--sy) / var(--sh) * -1)}
/* Where the drawing sits in each file (fractions of the file's width and height, measured from the pixels plus a small safety margin), the file's height/width ratio, and the shown height. */
.decor-logo{--h:34px;--sx:0;--sw:1;--sy:0;--sh:1;--ar:1}
.decor-notice{--h:34px;--sx:.302;--sw:.401;--sy:.284;--sh:.412;--ar:.33333}
.decor-bear{--h:48px;--sx:.278;--sw:.444;--sy:.292;--sh:.396;--ar:.5}
.decor-talk{--h:44px;--sx:.119;--sw:.757;--sy:.098;--sh:.808;--ar:.66667}
.decor-cat{--h:24px;--sx:.16;--sw:.653;--sy:.313;--sh:.386;--ar:.5}
.decor-flower{--h:20px;--sx:.258;--sw:.481;--sy:.257;--sh:.453;--ar:1}
.decor-bed{--h:40px;--sx:.145;--sw:.705;--sy:.295;--sh:.543;--ar:.33333}
.decor-rabbit{--h:44px;--sx:.314;--sw:.39;--sy:.175;--sh:.665;--ar:1}
.decor-star{--h:24px;--sx:.307;--sw:.396;--sy:.3;--sh:.384;--ar:1}
.decor-bubbles{--h:18px;--sx:.104;--sw:.789;--sy:.219;--sh:.477;--ar:.66667}
.decor-house{--h:18px;--sx:.2009;--sw:.595;--sy:.2001;--sh:.6102;--ar:1}
.notice-by .decor{--h:24px}
.deco-head .decor-flower,.group-head .decor-flower{--h:22px}
/* A cream glow behind a drawing that sits on a tinted surface; its solid middle covers the drawing's box, then it fades into the tint. */
.glow{position:relative;display:block;flex:none;isolation:isolate;--glow:#FEFBF4}
.glow::before{content:'';position:absolute;z-index:-1;inset:-100%;pointer-events:none;background:radial-gradient(closest-side,var(--glow) 50%,transparent)}
.glow-talk{--glow:#FEFCF4}
.glow-cat,.glow-flower{--glow:#FEFBF5}
.glow-flower::before{inset:-150%}
.glow-bubbles{--glow:#FEFCF6}
.glow-bubbles::before{inset:-200% -100%}

/* Header: the mother-and-child drawing is the brand mark; ログイン is an outlined petal button, 新規登録 the dusty pink one. */
#memberHeader .brand{font-family:var(--round);font-weight:400;letter-spacing:.04em}
.brand-sub{color:var(--ink)}
#accountNav button{font-family:var(--round);border-radius:10px;padding:8px 9px}
/* The outlined ログイン is wider than plain text, so the header gap tightens a little to keep one line on 375px phones. */
#memberHeader{column-gap:8px}
#accountNav .plain{background:transparent;border:1px solid var(--petal);color:var(--strong)}
#accountNav .quiet{background:transparent}
/* Filled pink buttons (新規登録, 質問する, コメントする…) use the mockup's light pink. */
.primary{background:var(--tab-on);border-color:var(--tab-on);color:white}

/* Space tabs: three cream tabs side by side; the chosen one has a 3px pink bar, dark bold text and its own picture. The bar is drawn over the tab,
   so choosing a tab never changes its height or moves its text up or down. */
.spaces{gap:6px;padding:0;border:0;border-radius:0;background:transparent}
.spaces button{display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative;border-radius:10px;background:#FEFCF6;color:var(--soft);font-family:var(--round);letter-spacing:.04em;padding:8px}
.spaces button[aria-pressed=true]{background:#FEFCF6;color:var(--ink);font-weight:700}
.spaces button[aria-pressed=true]::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:2px;background:var(--accent)}
/* The chosen tab shows its own approved picture (ホーム house, 世代別の質問 speech bubbles, 雑談ひろば pink flower), as the flower used to. The tabs are the
   pictures' own cream (#FEFCF6), so no glow sits behind them. Heights balance the three drawings; under 360px the tabs' side padding and the wide bubbles
   shrink a little so the chosen 世代別の質問 or 雑談ひろば still fits without sideways scrolling. */
.spaces [data-tab-icon]{display:none}
.spaces button[aria-pressed=true] [data-tab-icon]{display:block}
.spaces .decor-house,.spaces .decor-flower{--h:18px}
.spaces .decor-bubbles{--h:12px}
@media(max-width:359px){.spaces button{padding:8px 6px}.spaces .decor-bubbles{--h:10px}}

/* Search: a rounded field with a magnifier. */
.search{position:relative}
.search-icon{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--soft);pointer-events:none}
#search{background:white;border-radius:var(--radius-pill);padding-left:44px;letter-spacing:.04em}

/* お知らせ row: megaphone, sage label, the title with its arrow right after it, and the rabbit in a reserved right-hand area (text never runs under it). */
.home-notice{position:relative;overflow:hidden;background:var(--notice-bg);border:0;border-radius:var(--card-radius);gap:0 var(--space-2);font-family:var(--round);padding-right:calc(var(--space-3) + var(--space-2) + 101px)}
.home-notice-icon{flex:none;width:20px;height:20px;color:#8C9774}
.home-notice-label{color:white;background:var(--label-sage);border-radius:var(--radius-pill);padding:0 var(--space-2);letter-spacing:.04em}
.home-notice-main{display:flex;align-items:center;gap:6px;flex:1 1 6ch;min-width:0}
.home-notice-title{flex:0 1 auto;min-width:0;font-weight:400;font-size:var(--fs-ui)}
.home-notice-arrow{position:static;transform:none;flex:none;margin:0;color:var(--soft)}
.home-notice .glow{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%)}
/* Text sits above the cream glows, which are positioned layers and would otherwise wash over it. */
.home-notice-icon,.home-notice-label,.home-notice-main,.group-head h2,.group-head p,.group-more{position:relative;z-index:1}

/* Home headings: a small picture instead of the bar (star for 人気の投稿, speech bubbles for 世代別の質問, pink flower for 雑談ひろば), rounded regular type, no heavy rule. */
#popular h2,.group-head h2{font-family:var(--round);font-weight:400;letter-spacing:.04em;padding-left:0;color:var(--ink)}
#popular h2::before,.group-head h2::before{display:none}
.section-head h1,#activityView h1{font-family:var(--round);font-weight:400;letter-spacing:.04em}

/* 人気の投稿: heading on the ivory with the bear on the right, then a white card. */
#popular{background:none;border:0;border-radius:0;margin-bottom:var(--space-5)}
#popular h2{margin:0;padding-bottom:0;border-bottom:0;min-width:0}
.deco-head{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-1) var(--space-1);border:0;border-radius:0;background:none}
.deco-head .decor-bear{margin-left:auto;margin-right:var(--space-3);align-self:flex-end}
#popularList,.group-list{background:white;padding:0 var(--space-3)}
#popularList{border:1px solid var(--paper-line);border-radius:var(--card-radius);box-shadow:0 1px 3px rgb(96 72 60 / .06)}
#popularList .post-row:last-child,.group-list .post-row:last-child,#postList .post-row:last-child,#myItems .post-row:last-child{border-bottom:0}

/* 世代別の質問 / 雑談ひろば: a white card with a pink or sage band on top; flower, title and subtitle on the left, the drawing and 一覧を見る on the right. */
.home-group{background:white;border:1px solid var(--paper-line);border-radius:var(--card-radius);box-shadow:0 1px 3px rgb(96 72 60 / .06);margin-bottom:var(--space-5)}
.group-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon title side" ". sub sub";align-items:center;column-gap:var(--space-2);row-gap:var(--space-1);padding:var(--space-3);border:0;border-radius:calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0;overflow:hidden}
.home-group[aria-labelledby=groupQuestionTitle] .group-head{background:var(--band-pink)}
.home-group[aria-labelledby=groupChatTitle] .group-head{background:var(--band-sage)}
.group-text{display:contents}
.group-head .glow-flower,.group-head .glow-bubbles{grid-area:icon}
.group-head h2{grid-area:title;margin:0;min-width:0}
.group-head p{grid-area:sub;margin:0;font-family:var(--round);letter-spacing:.04em;color:var(--soft)}
.group-side{grid-area:side;display:flex;flex-direction:row;align-items:center;gap:var(--space-2);flex:none}
.group-side .group-more{position:relative}
.group-more{font-family:var(--round);font-size:var(--fs-meta);letter-spacing:.04em;color:var(--strong);text-decoration:none}
.group-more::after{content:'›';margin-left:4px}
.group-list{border-radius:0 0 var(--card-radius) var(--card-radius)}

/* Rows: regular-weight titles as in the mockup; the [count] keeps the accent colour. */
.post-link .row-title,.post-link .list-title,.reply-count{font-weight:400}
.post-link .row-title{letter-spacing:.02em}

/* すべての新着を見る: a petal-edged button with the small flower. */
.all-latest{background:var(--bg);border-color:var(--petal);border-radius:var(--card-radius);color:var(--strong);font-family:var(--round);letter-spacing:.06em}

/* Board and activity lists: white cards on the ivory page. */
#postList{background:white;border:1px solid var(--paper-line);border-top:0;border-radius:0 0 var(--card-radius) var(--card-radius);padding:0 var(--space-3)}
#myItems{background:white;border:1px solid var(--paper-line);border-radius:var(--card-radius);padding:0 var(--space-3)}

/* Footer: links, the rabbit beside the name with a small heart, one line about the place, and the flowerbed in both lower corners (same file twice, not mirrored). */
.footer{position:relative;overflow:hidden;border-top:0;padding-bottom:calc(var(--space-3) + 40px + env(safe-area-inset-bottom))}
.footer-links a{color:var(--soft);font-family:var(--round)}
.footer-brand{margin-top:var(--space-1);font-family:var(--round);font-weight:400;font-size:var(--fs-body);letter-spacing:.08em}
.footer-brand>span::after{content:'♥';content:'♥' / '';margin-left:4px;color:#D59495;font-size:.8em}
.footer-tagline{font-family:var(--round);letter-spacing:.04em}
.footer-bed{position:absolute;bottom:0}
.footer-bed-left{left:0}
.footer-bed-right{right:0}

@media(max-width:419px){.home-notice{padding-right:calc(var(--space-3) + var(--space-2) + 66px)}.decor-notice{--h:32px;--sx:.426;--sw:.277}}
@media(min-width:600px){.decor-bear,.decor-talk{--h:56px}.decor-cat{--h:34px}}
@media(max-width:389px){.group-head .glow-flower,.group-head .glow-bubbles{display:none}.group-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title side" "sub side"}.group-side{flex-direction:column;align-items:flex-end;gap:0}.decor-cat{--h:30px}}
@media(max-width:359px){.home-notice{padding-right:calc(var(--space-3) + var(--space-2) + 63px)}.decor-notice{--h:30px}.home-notice-icon{display:none}.decor-bear,.decor-talk{--h:44px}.decor-bed{--h:32px}.footer{padding-bottom:calc(var(--space-3) + 32px + env(safe-area-inset-bottom))}}
/* The speech bubbles are wider than the flower, so on 390-429px phones the 世代別の質問 band title is 20px and its drawing a little smaller, keeping the title on one line. */
@media(min-width:390px) and (max-width:429px){.home-group[aria-labelledby=groupQuestionTitle] .group-head h2{font-size:var(--fs-panel)}.home-group[aria-labelledby=groupQuestionTitle] .decor-talk{--h:40px}}
/* Poll rows keep their labels readable at narrow widths; the bar never determines layout. */
.poll-tag,.sample-tag{font-size:12px;color:var(--muted,#545b64);border:1px solid #d0d5dd;border-radius:4px;padding:1px 5px;white-space:nowrap}
.post-poll{margin:20px 0;padding:0 0 20px;border-bottom:1px solid #d0d5dd;overflow-wrap:anywhere}
.post-poll h2{font-size:17px;line-height:1.7;margin:0 0 12px;white-space:pre-wrap}
.poll-options{display:grid;gap:8px}
.poll-option{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:12px;text-align:left;min-height:48px;width:100%;padding:12px;border:1px solid #777b83;border-radius:8px;background:#fff;color:#1f2328;font-size:16px;line-height:1.7;white-space:normal}
.poll-option:disabled{opacity:1;color:#1f2328;cursor:default}
.poll-option.is-selected{border:2px solid #96334b;padding:11px}
.poll-label{position:relative;flex:1;min-width:0;overflow-wrap:anywhere}
.poll-percent{position:relative;flex:none;font-weight:700;min-width:3.2em;text-align:right}
.poll-bar{position:absolute;inset:0 auto 0 0;background:#f8e5eb;z-index:-1;transition:width 180ms ease-out;pointer-events:none}
.poll-check{font-weight:700;color:#96334b}
.poll-total{font-size:13px;margin:12px 0 8px}
.poll-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.poll-actions button,.poll-edit-option button{min-height:44px;white-space:normal}
.poll-fields{min-width:0;margin:14px 0;padding:12px;border:1px solid #777b83;border-radius:8px}
.poll-edit-option{display:flex;align-items:end;gap:8px;margin-block:10px}
.poll-edit-option label{flex:1;min-width:0;margin:0}
.poll-edit-option input,.poll-fields input{width:100%;min-width:0;font-size:16px}
.poll-edit-option button{flex:none}
.poll-error:empty{display:none}
@media(prefers-reduced-motion:reduce){.poll-bar{transition:none}}