.board-document { scroll-behavior:auto; scroll-padding-top:25px; }
.board-container { width:min(1260px,88%); margin:auto; }
.board-breadcrumb { display:flex; gap:16px; color:var(--muted); font-size:11px; margin:28px 0 0; }
.board-breadcrumb a:hover { color:var(--pink); }
.board-hero { display:grid; grid-template-columns:1.3fr 1fr; gap:70px; padding:70px 0 55px; }
.board-hero h1 { font-size:clamp(36px,4vw,62px); line-height:1.35; letter-spacing:-.045em; margin:22px 0; }
.board-hero h1 em { color:var(--pink); font-style:normal; }
.board-hero-copy>p { color:var(--muted); font-size:14px; line-height:2.1; }
.board-hero-actions { display:flex; align-items:center; gap:28px; margin-top:30px; }
.board-hero-actions .button { margin:0; font-size:13px; }
.board-text-link { font-size:12px; color:var(--muted); }
.board-hero-side { border:1px solid #655164; background:linear-gradient(130deg,#2d2435,#16181f); padding:26px 30px; align-self:center; position:relative; }
.board-hero-side:before { content:''; position:absolute; top:-5px; left:26px; width:45px; height:5px; background:var(--pink); }
.crew-art { display:flex; align-items:center; justify-content:center; gap:18px; padding:24px 0; }
.crew-art svg { width:58%; max-width:240px; stroke:var(--pink); stroke-width:3; }
.crew-art>span { width:85px; font:800 26px/1.05 'Barlow Condensed',sans-serif; color:var(--purple); }
.board-hero-facts { border-top:1px solid #564658; padding-top:16px; display:flex; flex-wrap:wrap; gap:12px; font-size:10px; color:var(--muted); }
.board-notice { display:grid; grid-template-columns:160px 1fr; border-block:1px solid var(--line); gap:25px; padding:20px 0; align-items:center; }
.board-notice>span { font:700 15px 'Barlow Condensed',sans-serif; color:var(--pink); letter-spacing:.08em; }
.board-notice p { font-size:12px; color:var(--muted); margin:0; line-height:2; }
.board-notice strong { color:var(--ink); }
.board-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:45px; margin:60px 0 75px; }
.board-section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:26px; }
.board-section-heading h2 { font-size:clamp(25px,2.8vw,34px); margin:9px 0 0; line-height:1.5; }
.result-count { font-size:12px; color:var(--muted); white-space:nowrap; }
.result-count b { font:700 35px 'Barlow Condensed',sans-serif; color:var(--pink); margin-right:4px; }
.board-filters { background:#1b1d26; border:1px solid var(--line); padding:20px; margin-bottom:25px; }
.filter-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.filter-row+.filter-row { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.filter-row>label { font-size:11px; color:var(--muted); }
.filter-row select { width:auto; flex:1; min-width:115px; max-width:190px; padding:8px 10px; font-size:12px; }
.check-label { display:flex; align-items:center; gap:6px; }
.filter-reset { font-size:10px; color:var(--muted); text-decoration:underline; }
.board-page input,.board-page select,.board-page textarea { font:inherit; background:#111218; border:1px solid #555660; border-radius:0; color:var(--ink); padding:12px 14px; max-width:100%; width:100%; }
.board-page input:focus-visible,.board-page select:focus-visible,.board-page textarea:focus-visible { outline:2px solid var(--pink); outline-offset:2px; }
.board-page input[type=checkbox],.board-page input[type=radio] { width:18px; height:18px; padding:0; accent-color:var(--pink); flex-shrink:0; }
.board-page select { color-scheme:dark; }
.board-filters select { font-size:12px; padding:8px 10px; }
.small-button { border:1px solid #776378; background:#2e2634; color:var(--ink); padding:8px 12px; cursor:pointer; font-size:11px; }
.small-button:hover { border-color:var(--pink); color:var(--pink); }
.empty-board { text-align:center; border:1px dashed #5b5165; padding:50px 20px; background:linear-gradient(#1c1b25,#15161d); }
.empty-symbol { display:block; color:var(--purple); font-size:44px; line-height:1; }
.empty-board h3 { font-size:22px; margin:20px 0 10px; }
.empty-board p { color:var(--muted); font-size:13px; }
.empty-board .button { font-size:12px; margin-top:15px; }
.board-sidebar { padding-top:5px; }
.board-side-note { border-top:3px solid var(--pink); padding:22px 23px; background:#1d1c26; }
.board-side-note h2 { margin:14px 0 25px; font-size:22px; line-height:1.6; }
.board-side-note ol { list-style:none; counter-reset:step; padding:0; margin:0; }
.board-side-note li { counter-increment:step; border-top:1px solid #45414d; padding:16px 0; }
.board-side-note li:before { content:'0' counter(step); font:700 22px 'Barlow Condensed',sans-serif; color:var(--purple); margin-right:10px; }
.board-side-note b { font-size:12px; }
.board-side-note li p { font-size:11px; color:var(--muted); margin:7px 0 0; }
.board-side-note>a { display:block; font-size:11px; color:var(--pink); border-top:1px solid #45414d; padding-top:18px; }
.board-side-small { padding:25px 15px; font-size:11px; color:var(--muted); }
.board-side-small>span { font:700 14px 'Barlow Condensed',sans-serif; color:var(--purple); }
.recruit-card { background:#1b1d26; border:1px solid #4d424f; padding:26px; margin-bottom:24px; scroll-margin-top:25px; }
.recruit-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; }
.post-number { font:600 12px 'Barlow Condensed',sans-serif; color:var(--muted); }
.post-number b { font-size:26px; color:var(--purple); margin-left:5px; }
.post-number time { font:400 10px 'Noto Sans JP',sans-serif; margin-left:17px; }
.post-state { font-size:10px; padding:3px 10px; border:1px solid #77667f; white-space:nowrap; }
.post-state.active { color:#c1e8cd; border-color:#557b65; background:#25443655; }
.post-state.ended { color:var(--muted); border-color:#4c4d56; }
.post-badges { display:flex; gap:8px; flex-wrap:wrap; }
.post-badges>span { font-size:10px; padding:3px 9px; }
.badge-platform { background:var(--purple); color:#1c1823; font-weight:700; }
.badge-type { color:var(--pink); background:#3b2736; border:1px solid #71465e; }
.badge-vc { border:1px solid #57545d; color:var(--muted); }
.recruit-comment { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:2.1; margin:22px 0; padding:22px; background:#111218; border-left:2px solid #655164; }
.post-contacts { border-top:1px solid var(--line); }
.contact-row { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:start; border-bottom:1px solid var(--line); padding:11px 0; gap:14px; }
.contact-label { font-size:11px; color:var(--muted); padding-top:4px; }
.contact-content { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.contact-value { font-size:13px; overflow-wrap:anywhere; margin-right:auto; }
.copy-contact,.open-contact { border:1px solid #64576b; background:none; color:var(--purple); padding:3px 8px; font-size:10px; cursor:pointer; }
.expired-contact,.unset-contact { font-size:11px; color:#8e8e9c; padding:4px 0; }
.post-expiry { font-size:10px; color:var(--muted); margin:14px 0; }
.post-expiry time { color:var(--purple); margin-left:9px; }
.expiry-caption { color:#90909d; }
.post-tools { display:flex; flex-wrap:wrap; gap:14px; border-top:1px solid var(--line); padding-top:12px; }
.post-tools details { flex:1 1 160px; font-size:11px; }
.post-tools summary { cursor:pointer; color:var(--muted); }
.post-tools form { padding-top:15px; }
.post-tools input,.post-tools select { font-size:14px; padding:9px 10px; margin:7px 0 10px; }
.post-tools form p { color:var(--muted); font-size:10px; }
.manage-actions { display:flex; gap:10px; flex-wrap:wrap; }
.danger { color:#ffbbbe; border-color:#815660; }
.is-ended { border-color:#35363e; }
.board-pagination { display:flex; justify-content:center; gap:24px; font-size:12px; margin:30px 0; }
.board-pagination a { color:var(--pink); }
.new-post-section { border-top:1px solid var(--line); padding-top:55px; scroll-margin-top:25px; }
.form-required-note { color:var(--muted); font-size:11px; white-space:nowrap; }
.form-required-note b { color:var(--pink); }
.recruit-form { padding:35px; background:#1b1d26; border:1px solid #5b4a5f; }
.form-columns { display:grid; grid-template-columns:1fr 1fr; gap:30px 40px; }
.form-field>label,.recruit-form legend { font-size:13px; font-weight:700; display:block; margin-bottom:12px; }
.recruit-form label>span,.recruit-form legend>span { color:var(--pink); margin-left:5px; }
.form-field small { color:var(--muted); margin-left:7px; font-weight:400; font-size:10px; }
.recruit-form fieldset { margin:0; padding:0; border:0; min-width:0; }
.choice-row { display:flex; gap:8px; flex-wrap:wrap; }
.choice { display:flex; align-items:center; gap:7px; border:1px solid #54515f; padding:10px 12px; cursor:pointer; }
.choice:has(input:checked) { border-color:var(--pink); background:#382b39; }
.choice>span { color:var(--ink)!important; margin:0!important; font-size:12px; font-weight:500; }
.field-help { font-size:10px; color:var(--muted); margin:7px 0 0; }
.comment-field { margin:30px 0; }
.comment-field textarea { display:block; resize:vertical; font-size:14px; line-height:1.9; }
.comment-help { display:flex; justify-content:space-between; gap:10px; }
#body-count { font:600 14px 'Barlow Condensed',sans-serif; color:var(--muted); margin-top:10px; white-space:nowrap; }
.input-prefix { display:flex; align-items:center; border:1px solid #555660; background:#111218; }
.input-prefix>span { color:var(--pink); padding-left:14px; }
.input-prefix>input { border:0; }
.form-consent { border-top:1px solid var(--line); padding-top:24px; margin-top:30px; }
.form-consent label { display:flex; align-items:flex-start; gap:12px; font-size:12px; }
.form-consent input { margin-top:3px; }
.form-consent p { font-size:10px; color:var(--muted); margin-left:30px; }
.form-submit { display:flex; align-items:center; gap:30px; margin-top:25px; }
.form-submit .button { border:0; cursor:pointer; font-size:13px; margin:0; }
.form-submit p { font-size:10px; color:var(--muted); }
.honey { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.board-faq { display:grid; grid-template-columns:1fr 2fr; gap:50px; padding:65px 0 80px; }
.board-faq h2 { font-size:27px; }
.board-faq p { font-size:12px; }
.board-message { border:1px solid; padding:20px 25px; margin:25px 0; font-size:13px; }
.board-message.success { color:#c1e8cd; border-color:#557b65; background:#25443655; }
.board-message.error { border-color:#b56c85; background:#402433; }
.board-message ul { padding-left:20px; }
.board-message p { font-size:11px; color:var(--muted); }
.board-toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:40; background:var(--pink); color:#211723; padding:10px 18px; font-size:12px; box-shadow:0 3px 24px #0005; max-width:90%; width:max-content; }
.board-toast:empty { display:none; }
#preview-dialog { width:min(620px,90vw); }
#preview-dialog h2 { font-size:26px; }
.preview-close { position:absolute; right:18px; top:15px; border:0; background:none; color:var(--ink); font-size:26px; cursor:pointer; }
.preview-body { background:#111218; padding:20px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.preview-info { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.preview-actions { display:flex; gap:15px; justify-content:flex-end; flex-wrap:wrap; margin-top:25px; }
.preview-actions button { margin:0; cursor:pointer; font-size:12px; }
.board-page footer { margin-top:0; }
@media(max-width:1000px) { .board-layout { grid-template-columns:minmax(0,1fr) 210px; gap:25px; } .board-hero { gap:30px; } .board-hero-actions { flex-wrap:wrap; gap:20px; } .form-columns { gap:25px; } }
@media(max-width:800px) { .board-layout { grid-template-columns:1fr; } .board-sidebar { display:none; } .board-hero { grid-template-columns:1fr; padding:40px 0; } .board-hero-side { display:none; } .board-hero h1 { font-size:44px; } .board-notice { grid-template-columns:1fr; gap:10px; } .board-faq { grid-template-columns:1fr; gap:5px; } }
@media(max-width:550px) { .board-container { width:88%; } .board-hero h1 { font-size:36px; } .board-hero-copy>p { font-size:12px; } .board-hero-copy>p br { display:none; } .board-hero-actions { gap:20px; } .board-hero .eyebrow { font-size:13px; gap:10px; } .board-notice p { font-size:11px; } .board-layout { margin:40px 0 45px; } .board-filters { padding:16px; } .filter-row>label:not(.check-label) { width:100%; } .filter-row select { max-width:none; flex-basis:100%; } .filter-row .check-label { margin:8px 0; font-size:11px; } .board-section-heading h2 { font-size:24px; } .recruit-card { padding:18px; } .post-number time { display:block; margin:0; font-size:9px; } .recruit-comment { padding:15px; font-size:13px; } .contact-row { grid-template-columns:1fr; gap:4px; } .post-expiry time { margin-left:0; display:block; } .expiry-caption { display:none; } .recruit-form { padding:20px; } .form-columns { grid-template-columns:1fr; } .recruit-form input[type=text],.recruit-form input[type=password],.recruit-form select,.recruit-form textarea { font-size:16px; } .choice { padding:10px; } .choice>span { font-size:11px; } .form-submit { flex-direction:column; align-items:stretch; gap:10px; } .form-submit .button { padding:16px; font-size:12px; } .form-submit p { text-align:center; } .form-required-note { font-size:9px; } .new-post-section { padding-top:35px; } .empty-board h3 { font-size:19px; } .board-page .header nav { gap:8px 14px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

/* Recruitment copy uses the site reading scale; helper notes stay compact. */
.board-hero-copy>p, .recruit-comment, .empty-board p, .board-faq p,
.preview-body { font-size:var(--font-body); }
.board-hero-actions .button, .board-text-link, .board-filters select,
.small-button, .filter-reset, .empty-board .button, .contact-value,
.post-tools input, .post-tools select, .board-pagination,
.form-submit .button, .preview-actions button { font-size:var(--font-control); }
.filter-row>label, .post-state, .post-badges>span, .contact-label,
.copy-contact, .open-contact, .expired-contact, .unset-contact,
.post-tools details, .form-field>label, .recruit-form legend,
.choice>span, .preview-info { font-size:var(--font-label); }
.recruit-form input[type=text], .recruit-form input[type=password],
.recruit-form select, .recruit-form textarea { font-size:var(--font-body); }
.board-side-note b, .board-side-note li p, .board-side-note>a { font-size:var(--font-label); }
.board-hero-actions, .board-section-heading { flex-wrap:wrap; }
.filter-row select { min-width:175px; max-width:220px; }
.contact-row { grid-template-columns:125px minmax(0,1fr); }
.post-expiry { font-size:var(--font-label); }
.expiry-caption { font-size:10px; }
.preview-actions { flex-wrap:wrap; }
@media(max-width:650px) {
  .board-filters select, .post-tools input, .post-tools select { font-size:16px; }
}
@media(max-width:550px) {
  .filter-row .check-label { font-size:var(--font-label); }
  .filter-row select { max-width:none; }
  .contact-row { grid-template-columns:1fr; }
  .form-submit .button { font-size:var(--font-control); }
}

/* Use the same light palette as the free board; preserve the site header/footer. */
.board-page:not(.free-page) {
  background:#EDEBE3; color:#171822;
  --bg:#EDEBE3; --panel:#FFFFFF; --ink:#171822; --muted:#625d68;
  --line:#d3cfd5; --pink:#6c527c; --purple:#6c527c;
}
.board-page:not(.free-page) .header,
.board-page:not(.free-page) footer {
  background:#111218; color:#f7f4eb;
  --ink:#f7f4eb; --muted:#b9bac6; --line:#34353e; --pink:#f4a6c5;
}
.board-page:not(.free-page) .pill { background:#f2eef5; color:#6c527c; }
.board-page:not(.free-page) .button.pink {
  background:#6c527c; color:#FFFFFF; border:1px solid #6c527c; box-shadow:none;
}
.board-page:not(.free-page) .button.pink:hover { background:#534061; border-color:#534061; }
.board-page:not(.free-page) .button.outline { background:#FFFFFF; border-color:#b8aabf; color:#6c527c; }
.board-page:not(.free-page) .button.outline:hover { background:#f2eef5; }
.board-page:not(.free-page) .board-hero-side,
.board-page:not(.free-page) .board-filters,
.board-page:not(.free-page) .board-side-note,
.board-page:not(.free-page) .recruit-card,
.board-page:not(.free-page) .recruit-form,
.board-page:not(.free-page) .empty-board { background:#FFFFFF; border-color:#d3cfd5; }
.board-page:not(.free-page) .board-hero-facts,
.board-page:not(.free-page) .board-side-note li,
.board-page:not(.free-page) .board-side-note>a { border-color:#d3cfd5; }
.board-page:not(.free-page) .board-side-note { border-top-color:#6c527c; }
.board-page:not(.free-page) input,
.board-page:not(.free-page) select,
.board-page:not(.free-page) textarea,
.board-page:not(.free-page) .input-prefix { background:#FFFFFF; color:#171822; border-color:#aaa1b1; }
.board-page:not(.free-page) select { color-scheme:light; }
.board-page:not(.free-page) input::placeholder,
.board-page:not(.free-page) textarea::placeholder { color:#736c7a; opacity:1; }
.board-page:not(.free-page) .small-button { background:#f2eef5; color:#6c527c; border-color:#b8aabf; }
.board-page:not(.free-page) .small-button:hover { background:#e8e0ee; border-color:#6c527c; }
.board-page:not(.free-page) .small-button.danger { background:#fff4f5; color:#8e3d51; border-color:#cfacb6; }
.board-page:not(.free-page) .post-state.active { background:#edf6ef; color:#315b3d; border-color:#afc7b6; }
.board-page:not(.free-page) .post-state.ended { background:#f5f3f6; color:#625d68; border-color:#d3cfd5; }
.board-page:not(.free-page) .badge-platform,
.board-page:not(.free-page) .badge-type { background:#f2eef5; color:#6c527c; border:1px solid #e1dbe6; }
.board-page:not(.free-page) .badge-vc { background:#FFFFFF; color:#625d68; border-color:#d3cfd5; }
.board-page:not(.free-page) .recruit-comment { background:#f7f5f8; color:#171822; border-left-color:#6c527c; }
.board-page:not(.free-page) .copy-contact,
.board-page:not(.free-page) .open-contact { background:#f2eef5; color:#6c527c; border-color:#b8aabf; }
.board-page:not(.free-page) .copy-contact:hover,
.board-page:not(.free-page) .open-contact:hover { background:#e8e0ee; }
.board-page:not(.free-page) .expired-contact,
.board-page:not(.free-page) .unset-contact,
.board-page:not(.free-page) .expiry-caption { color:#625d68; }
.board-page:not(.free-page) .choice { background:#FFFFFF; border-color:#aaa1b1; }
.board-page:not(.free-page) .choice:has(input:checked) { background:#f2eef5; border-color:#6c527c; }
.board-page:not(.free-page) .board-message.success { background:#edf6ef; color:#315b3d; border-color:#afc7b6; }
.board-page:not(.free-page) .board-message.error { background:#fff0f3; color:#853c50; border-color:#cfacb6; }
.board-page:not(.free-page) .board-toast { background:#6c527c; color:#FFFFFF; }
.board-page:not(.free-page) .faq-list details { background:#FFFFFF; }
/* Both boards have light dialogs; keep their body copy and close controls legible. */
.board-page dialog { background:#FFFFFF; color:#171822; border-color:#b8aabf; }
.board-page dialog p,.board-page dialog li { color:#625d68; }
.board-page dialog .close,.board-page dialog .preview-close { color:#171822; }
.board-page:not(.free-page) .preview-body { background:#f7f5f8; color:#171822; }

/* ===== Friends board: B layout (2026-10-18) =====
   Scoped to .friends-page because the free board also loads this stylesheet. */
.friends-page { --platform-ps5:#0070D1; --platform-xbox:#107C10; --platform-pc:#3C3C44; }

/* Post form: collapsed panel above the search. */
.friends-page .post-form-panel { background:#FFFFFF; border:1px solid #6c527c; margin-bottom:18px; scroll-margin-top:25px; }
.friends-page .post-form-toggle { list-style:none; display:flex; align-items:center; gap:12px; min-height:60px; padding:0 22px; cursor:pointer; color:#6c527c; }
.friends-page .post-form-toggle::-webkit-details-marker { display:none; }
.friends-page .post-form-toggle:hover { background:#faf8fb; }
.friends-page .post-form-toggle:focus-visible { outline:2px solid #6c527c; outline-offset:2px; }
.friends-page .toggle-plus { width:30px; height:30px; display:grid; place-items:center; flex-shrink:0; background:#6c527c; color:#FFFFFF; font-size:18px; line-height:1; }
.friends-page .toggle-title { font-size:17px; font-weight:800; }
.friends-page .toggle-note { font-size:12px; color:#625d68; }
.friends-page .toggle-state { margin-left:auto; font:700 18px 'Barlow Condensed',sans-serif; letter-spacing:.08em; white-space:nowrap; }
.friends-page .post-form-panel .when-open, .friends-page .post-form-panel[open] .when-closed { display:none; }
.friends-page .post-form-panel[open] .when-open { display:inline; }
.friends-page .post-form-panel .recruit-form { border:0; border-top:1px solid #e4e0e6; }
.friends-page .recruit-form .form-required-note { margin:0 0 18px; text-align:right; }
.friends-page .form-submit p { font-size:var(--font-label); line-height:1.7; }
.friends-page .form-submit .button { white-space:nowrap; flex-shrink:0; }

/* Search: compact bar on PC, collapsible on phones. */
.friends-page .filter-panel { background:#FFFFFF; border:1px solid #d3cfd5; margin-bottom:12px; }
.friends-page .filter-toggle { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:0 16px; cursor:pointer; }
.friends-page .filter-toggle::-webkit-details-marker { display:none; }
.friends-page .filter-title { font-size:15px; font-weight:800; }
.friends-page .filter-summary { font-size:12px; color:#625d68; display:none; }
.friends-page .board-filters { border:0; margin:0; padding:0 16px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.friends-page .board-filters>label { font-size:12px; color:#625d68; }
.friends-page .board-filters select { flex:1 1 150px; max-width:200px; min-width:0; }
.friends-page .filter-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.friends-page .list-meta { display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 10px; font-size:12px; color:#625d68; }
.friends-page .list-meta .result-count b { font-size:24px; }

/* Post card: info column | comment + contacts. */
.friends-page .crew-card { display:grid; grid-template-columns:150px minmax(0,1fr); background:#FFFFFF; border:1px solid #d3cfd5; margin-bottom:12px; scroll-margin-top:25px; }
.friends-page .crew-meta { background:#f7f5f8; border-right:1px solid #e4e0e6; padding:16px 14px; display:flex; flex-direction:column; gap:6px; }
.friends-page .crew-meta .post-number { font:600 13px 'Barlow Condensed',sans-serif; color:#625d68; line-height:1; }
.friends-page .crew-meta .post-number b { font-size:30px; color:#6c527c; margin-left:3px; }
.friends-page .crew-meta .post-state { align-self:flex-start; font-size:12px; padding:2px 9px; margin:2px 0 4px; }
.friends-page .crew-meta>span:not(.post-number):not(.post-state) { font-size:12px; padding:3px 8px; line-height:1.5; }
.friends-page .crew-meta .badge-platform { font-weight:700; color:#FFFFFF; border:0; }
.friends-page .crew-meta .platform-ps5 { background:var(--platform-ps5); }
.friends-page .crew-meta .platform-xbox { background:var(--platform-xbox); }
.friends-page .crew-meta .platform-pc { background:var(--platform-pc); }
.friends-page .crew-meta .badge-type { background:#FFFFFF; color:#6c527c; border:1px solid #e1dbe6; }
.friends-page .crew-meta .badge-vc { background:#FFFFFF; color:#625d68; border:1px solid #d3cfd5; }
.friends-page .label-short { display:none; }
.friends-page .crew-main { min-width:0; padding:14px 22px 10px; display:flex; flex-direction:column; gap:8px; }
.friends-page .post-date { font-size:12px; color:#625d68; }
.friends-page .crew-main .recruit-comment { margin:0; padding:0; background:none; border:0; font-size:15px; line-height:1.8; color:#171822; white-space:pre-wrap; overflow-wrap:anywhere; }
.friends-page .recruit-comment.is-clamped { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.friends-page .comment-more { align-self:flex-start; background:none; border:0; padding:2px 0; color:#6c527c; font-size:13px; font-weight:700; cursor:pointer; }
.friends-page .crew-main .post-contacts { border:0; display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.friends-page .crew-main .contact-row { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:3px 4px 3px 10px; border:1px solid #e1dbe6; background:#f2eef5; }
.friends-page .crew-main .contact-label { font-size:11px; color:#625d68; padding:0; }
.friends-page .crew-main .contact-value { font-size:14px; font-weight:700; margin:0; overflow-wrap:anywhere; }
.friends-page .crew-main .copy-contact, .friends-page .crew-main .open-contact { display:inline-flex; align-items:center; background:#FFFFFF; border:1px solid #b8aabf; color:#6c527c; font-size:12px; padding:4px 9px; min-height:28px; }
.friends-page .crew-main .contact-row.is-expired { background:#FFFFFF; border-style:dashed; border-color:#d3cfd5; padding-right:12px; }
.friends-page .crew-main .expired-contact { font-size:12px; color:#625d68; padding:0; }
.friends-page .crew-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:6px 16px; border-top:1px solid #ebe7ed; padding-top:8px; margin-top:auto; }
.friends-page .crew-footer .post-expiry { margin:0; font-size:12px; color:#625d68; }
.friends-page .crew-footer .post-expiry time { margin-left:4px; color:#6c527c; }
.friends-page .crew-footer .post-tools { border:0; padding:0; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 16px; }
.friends-page .crew-footer .post-tools details { flex:0 1 auto; font-size:12px; }
.friends-page .crew-footer .post-tools details[open] { flex-basis:100%; }
.friends-page .crew-footer .post-tools summary { color:#625d68; }
.friends-page .crew-footer:has(details[open]) .post-tools { flex-basis:100%; justify-content:flex-start; }
/* Ended posts stay listed, faded; contacts are replaced by "募集期間終了". */
.friends-page .crew-card.is-ended { border-color:#dedae0; }
.friends-page .crew-card.is-ended .crew-meta, .friends-page .crew-card.is-ended .post-date,
.friends-page .crew-card.is-ended .recruit-comment, .friends-page .crew-card.is-ended .post-contacts,
.friends-page .crew-card.is-ended .post-expiry { opacity:.6; }

@media(max-width:800px) {
  .friends-page .toggle-note { display:none; }
}
@media(max-width:550px) {
  .friends-page .post-form-toggle { min-height:52px; padding:0 14px; gap:10px; }
  .friends-page .toggle-plus { width:26px; height:26px; font-size:16px; }
  .friends-page .toggle-title { font-size:15px; }
  .friends-page .toggle-state { font-size:16px; }
  .friends-page .board-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 14px 14px; }
  .friends-page .board-filters>label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .friends-page .board-filters select { max-width:none; font-size:16px; }
  .friends-page .filter-actions { margin:0; justify-content:space-between; }
  .friends-page .filter-actions .small-button { flex:1; min-height:44px; }
  .friends-page .crew-card { grid-template-columns:72px minmax(0,1fr); margin-bottom:10px; }
  .friends-page .crew-meta { padding:10px 6px; gap:4px; text-align:center; align-items:stretch; }
  .friends-page .crew-meta .post-number { font-size:10px; display:flex; flex-direction:column; }
  .friends-page .crew-meta .post-number b { font-size:22px; margin:0; }
  .friends-page .crew-meta .post-state { align-self:stretch; font-size:10px; padding:2px 0; margin:0; }
  .friends-page .crew-meta>span:not(.post-number):not(.post-state) { font-size:10px; padding:2px 0; letter-spacing:-.02em; }
  .friends-page .label-full { display:none; }
  .friends-page .label-short { display:inline; }
  .friends-page .crew-main { padding:9px 11px 4px; gap:6px; }
  .friends-page .post-date { font-size:10px; }
  .friends-page .crew-main .recruit-comment { font-size:14px; line-height:1.65; }
  .friends-page .comment-more { font-size:12px; }
  .friends-page .crew-main .post-contacts { flex-direction:column; gap:4px; }
  .friends-page .crew-main .contact-row { display:flex; min-height:40px; padding:2px 3px 2px 8px; gap:6px; }
  .friends-page .crew-main .contact-label { width:50px; flex-shrink:0; font-size:10px; }
  .friends-page .crew-main .contact-value { flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .friends-page .crew-main .copy-contact, .friends-page .crew-main .open-contact { display:inline-flex; align-items:center; font-size:11px; padding:0 7px; min-height:32px; flex-shrink:0; }
  .friends-page .crew-main .contact-label { width:44px; }
  .friends-page .crew-footer { padding-top:2px; gap:0 12px; align-items:center; }
  .friends-page .crew-footer .post-expiry { font-size:10px; line-height:32px; }
  .friends-page .crew-footer .post-expiry time { margin-left:2px; display:inline; }
  .friends-page .crew-footer { flex-wrap:nowrap; }
  .friends-page .crew-footer .post-expiry { white-space:nowrap; }
  .friends-page .crew-footer .post-tools { flex-wrap:nowrap; gap:10px; }
  .friends-page .crew-footer:has(details[open]) { flex-wrap:wrap; }
  .friends-page .crew-footer .post-tools summary { white-space:nowrap; }
  .friends-page .crew-meta>span:not(.post-number):not(.post-state) { white-space:nowrap; }
  .friends-page .filter-summary { display:inline; }
  .friends-page .crew-footer .post-tools details { font-size:11px; }
  .friends-page .crew-footer .post-tools summary { min-height:32px; line-height:32px; }
}