/* LUBY member/event pages — complement to /styles.css (loaded first, same as the homepage).
   Only layout pieces the public stylesheet does not have. No imports, no external resources. */
.member-page { min-height:100vh; display:flex; flex-direction:column }
.member-page > main { flex:1 }

/* Hero: the homepage .review-hero, shorter */
.member-hero { min-height:auto; padding:clamp(56px,11vh,120px) 12vw clamp(36px,6vh,70px) }
.member-hero h1 { font-size:clamp(2.6rem,6vw,5.4rem); word-break:keep-all }
.member-hero > p:last-child { max-width:520px; word-break:keep-all }
.member-hero .back { margin-bottom:40px }

/* Body column: same rhythm as .reviews */
.member-body { border-top:1px solid var(--line); padding:60px 12vw 100px }
.member-body > * { max-width:860px }
.member-body p,.member-body li { word-break:keep-all }
.member-body .label { margin:0 0 14px; color:#777 }
.member-body code { font-family:'DM Mono',monospace; font-size:.85em; padding:1px 6px; border:1px solid var(--line); border-radius:6px }

/* Cards (same border/radius as .toc / .revenue-link) */
.member-card { margin:0 0 18px; padding:28px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.35) }
.member-card h2 { font-size:clamp(1.25rem,2.4vw,1.7rem); letter-spacing:-.055em; line-height:1.3; margin:0 0 18px }
.member-card > :last-child { margin-bottom:0 }
.member-cta { border-color:var(--ink); background:linear-gradient(135deg,color-mix(in srgb,var(--lime) 30%,transparent),transparent 62%) }
.member-message p { margin:0 0 18px; font-size:1rem; line-height:1.8 }
.member-note { color:#666; font-size:.84rem; line-height:1.8 }
.member-status { margin:0 0 16px; font-size:1.1rem; font-weight:700 }
.member-empty { margin:0; padding:42px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); color:#666 }
.member-danger { border-color:color-mix(in srgb,#e7422d 40%,var(--line)) }
.member-actions { display:flex; justify-content:flex-end; padding:16px 28px }

/* Lists and facts (override the homepage's global dl/h2 sizing) */
.member-list { list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--ink) }
.member-list li { display:grid; grid-template-columns:160px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line) }
.member-list b { font-size:.88rem }
.member-list span { color:#666; font-size:.86rem; line-height:1.7 }
.member-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; max-width:none; margin:0 }
/* DM Mono has no Hangul: fall back to the site's Korean face, not the OS monospace */
.member-facts dt,.member-body .label,.event-card p,.event-card time,.event-phase,.member-events span { font-family:'DM Mono','Noto Sans KR',monospace }
.member-facts dd { overflow-wrap:anywhere }
.event-facts { margin:0 0 26px }
.event-description { margin-top:0; white-space:pre-line; line-height:1.9 }
.member-steps { margin:0 0 14px; padding-left:1.3em; line-height:2 }
.member-steps a { color:inherit; text-underline-offset:3px }
.member-events { list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--ink) }
.member-events a { display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none }
.member-events a:hover { background:#eeeae0 }
.member-events span { font:500 .68rem 'DM Mono',monospace; color:#777; white-space:nowrap }

/* Event list = homepage .review-list/.review-card with a wider status column */
.event-list { margin:0 }
.event-card { grid-template-columns:120px 1fr 25px }
.event-phase { justify-self:start; padding:3px 9px; border:1px solid var(--line); border-radius:20px; white-space:nowrap }

/* Forms and buttons (pill buttons like the homepage .button) */
.member-form { display:grid; gap:16px; margin:0 }
.member-actions .member-form { display:block }
.member-check { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; line-height:1.7; cursor:pointer }
.member-check input { flex:0 0 auto; width:18px; height:18px; margin:3px 0 0; accent-color:var(--ink) }
.member-button { display:inline-flex; align-items:center; justify-content:center; justify-self:start; margin:4px 0 14px; padding:14px 22px; border:1px solid var(--ink); border-radius:50px; background:var(--ink); color:var(--paper); font:700 .78rem Manrope,'Noto Sans KR',sans-serif; text-decoration:none; cursor:pointer; transition:transform .18s }
.member-button:hover,.member-button:focus-visible { transform:translateY(-2px) }
.member-button:focus-visible,.member-link:focus-visible { outline:2px solid var(--blue); outline-offset:3px }
.member-button-ghost { background:transparent; color:var(--ink) }
.member-button-danger { background:transparent; color:#c2361f; border-color:#c2361f }
.member-link { display:inline-block; color:inherit; font-size:.8rem; font-weight:600; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px }
.header nav a[aria-current="page"] { font-weight:800; border-bottom:1px solid var(--ink) }

/* Dark: follow the theme chosen on the main site (data-theme set by /assets/member-theme.js, same key as
   site.js). /styles.css already styles :root[data-theme="dark"]; these are the member-only extras. */
:root[data-theme="dark"] .member-card { background:rgba(255,255,255,.035) }
:root[data-theme="dark"] .member-note,:root[data-theme="dark"] .member-list span,:root[data-theme="dark"] .member-empty,:root[data-theme="dark"] .member-body .label,:root[data-theme="dark"] .member-events span { color:#9fa29b }
:root[data-theme="dark"] .member-hero > p:last-child { color:#b9bbb5 }
:root[data-theme="dark"] .member-events a:hover { background:#202220 }
:root[data-theme="dark"] .member-button-danger { color:#ff7a62; border-color:#ff7a62 }
/* No-JS fallback only: without data-theme, follow the system (never overrides an explicit light choice) */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) { color-scheme:dark; --ink:#f1f0eb; --paper:#151615; --line:#383a37; --lime:#b9d94e; --blue:#7395d1; --pink:#d9829c }
  :root:not([data-theme]) body { background:var(--paper); color:var(--ink) }
  :root:not([data-theme]) .member-card { background:rgba(255,255,255,.035) }
  :root:not([data-theme]) .member-note,:root:not([data-theme]) .member-list span,:root:not([data-theme]) .member-empty,:root:not([data-theme]) .member-body .label,:root:not([data-theme]) .member-events span,:root:not([data-theme]) .footer-info p,:root:not([data-theme]) .footer-info a,:root:not([data-theme]) .footer-info nav a,:root:not([data-theme]) .review-card p,:root:not([data-theme]) .review-card time { color:#9fa29b }
  :root:not([data-theme]) .member-hero > p:last-child { color:#b9bbb5 }
  :root:not([data-theme]) .member-events a:hover,:root:not([data-theme]) .review-card:hover,:root:not([data-theme]) .footer-social a { background:#202220 }
  :root:not([data-theme]) .member-button-danger { color:#ff7a62; border-color:#ff7a62 }
}
/* Theme toggle: with the KO/EN/JP .language-switcher (added by /assets/member-theme.js), styles.css already
   pushes the switcher right (margin-left:auto) and keeps the toggle's 10px/4px gap. Without it (no JS),
   push the toggle to the right edge itself, so there is never a second auto margin splitting the header. */
.member-page .header:not(:has(> .language-switcher)) > .theme-toggle { margin-left:auto }
@media (max-width:650px) {
  .member-hero { padding:clamp(40px,9vh,80px) 7vw clamp(28px,5vh,48px) }
  .member-body { padding:40px 7vw 70px }
  .member-card { padding:20px }
  .member-actions { padding:14px 20px }
  .member-list li { grid-template-columns:1fr; gap:4px }
  .event-card { grid-template-columns:1fr 15px }
  .event-phase { grid-column:1 / -1 }
  .member-button { width:100%; justify-self:stretch }
}
@media (prefers-reduced-motion:reduce) { .member-button { transition:none } }

/* Japanese (lang set by /assets/member-theme.js): keep-all blocks breaks between kana/kanji, so long
   sentences without spaces overflow narrow screens. Restore CJK wrapping with strict kinsoku; ko/en unchanged. */
:root[lang="ja"] .member-page,
:root[lang="ja"] .member-hero h1,
:root[lang="ja"] .member-hero > p:last-child,
:root[lang="ja"] .member-body p,
:root[lang="ja"] .member-body li { word-break:normal; line-break:strict; overflow-wrap:anywhere }
:root[lang="ja"] .member-hero h1 { line-height:1.25; text-wrap:balance }
/* Narrow screens: the header rows are the shared site-header tiers in /styles.css (same as every public page). */

/* Japanese glyphs: Manrope / Noto Sans KR lack many kanji (会/収/認/数). For lang=ja only, fall back to Noto Sans JP
   (stylesheet inserted by /assets/member-theme.js) and system JP faces before Noto Sans KR. Latin stays Manrope / DM Mono. */
:root[lang="ja"] body,
:root[lang="ja"] .member-page :is(h1,h2,h3,h4),
:root[lang="ja"] .member-button { font-family:Manrope,'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',YuGothic,Meiryo,'Noto Sans KR',sans-serif }
:root[lang="ja"] .member-facts dt,:root[lang="ja"] .member-body .label,:root[lang="ja"] .event-card p,:root[lang="ja"] .event-card time,:root[lang="ja"] .event-phase,:root[lang="ja"] .member-events span { font-family:'DM Mono','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',YuGothic,Meiryo,'Noto Sans KR',monospace }

/* Page-to-page transition (cross-document View Transitions, CSS only, progressive enhancement).
   Same-origin link navigations between pages that load this stylesheet (public pages + member/event pages) crossfade:
   the shared header is captured on its own, so it stays put (identical headers crossfade into themselves; where a page's
   header differs, e.g. narrow-screen rows, it eases to the new one); the rest of the page (content, event strip, footer)
   fades out and the next page fades in with an 8px rise. While a transition runs the header is painted solid --paper
   instead of its backdrop blur (Chrome drew a captured backdrop-filter header blurred or not at all for some frames).
   ::view-transition is the new page's --paper (already dark when the theme boot script chose dark): never a light gap.
   Browsers without support (e.g. Firefox) navigate exactly as before. Not animated by design: reloads (incl. the
   KO/EN/JP switch), same-page #anchors / TOC, the theme toggle (no navigation), external links. Reduced motion never opts
   in; print is untouched (screen only). body > header.header: exactly one per page, so the name is always unique. */
@media screen and (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto }
  body > header.header { view-transition-name:luby-header }
  :root:active-view-transition body > header.header { backdrop-filter:none; background-color:var(--paper) }
  ::view-transition { background:var(--paper) }
  ::view-transition-group(luby-header) { animation-duration:.3s; animation-timing-function:cubic-bezier(.2,.8,.2,1) }
  ::view-transition-old(root) { animation:luby-page-out .18s ease-out both }
  ::view-transition-new(root) { animation:luby-page-in .3s cubic-bezier(.2,.8,.2,1) both }
}
@keyframes luby-page-out { to { opacity:0 } }
@keyframes luby-page-in { from { opacity:0; transform:translateY(8px) } }

/* GearX booster page editor (/account/page): plain form controls in the member card language; no script needed
   (reorder = submit buttons). */
.booster-form label { display:grid; gap:6px; font-size:.86rem; font-weight:700 }
.booster-form input[type="text"],.booster-form input[type="url"],.booster-form textarea,.booster-form select { width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:transparent; color:inherit; font:500 .92rem Manrope,'Noto Sans KR',sans-serif }
.booster-form textarea { resize:vertical; min-height:96px; line-height:1.7 }
.booster-form input:focus-visible,.booster-form textarea:focus-visible,.booster-form select:focus-visible { outline:2px solid var(--blue); outline-offset:2px }
.booster-form > .member-note { margin:-8px 0 0 }
.booster-colors { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px }
.booster-colors input[type="color"] { width:64px; height:40px; padding:2px; border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer }
.booster-links { display:grid; gap:10px; margin:0; padding:18px 0 0; border:0; border-top:1px solid var(--ink) }
.booster-links legend { padding:0 0 10px; font-size:.86rem; font-weight:800 }
.booster-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) 88px; gap:8px; align-items:center }
.booster-move { display:flex; gap:4px }
.booster-move .member-button { margin:0; padding:9px 12px; width:auto }
.booster-errors { border-color:#c2361f }
.booster-user { overflow-wrap:anywhere }
@media (max-width:650px) { .booster-row { grid-template-columns:1fr; padding-bottom:10px; border-bottom:1px solid var(--line) } }