/* メンバー詳細の写真中心レイアウト。写真はブラウザの表示領域の上端から配置する。 */
body.member-detail-app {
  --member-ink: #2d2622;
  --member-muted: #736b65;
  --member-soft: #fff1e6;
  --member-safe-top: env(safe-area-inset-top, 0px);
  --member-safe-bottom: env(safe-area-inset-bottom, 0px);
  --member-safe-left: env(safe-area-inset-left, 0px);
  --member-safe-right: env(safe-area-inset-right, 0px);
  --member-safe-max-bottom: env(safe-area-max-inset-bottom, 36px);
  --member-frame-offset: max(0px, calc((100vw - 480px) / 2));
  --member-inline-left: max(0px, calc(var(--member-safe-left) - var(--member-frame-offset)));
  --member-inline-right: max(0px, calc(var(--member-safe-right) - var(--member-frame-offset)));
  --member-action-base-height: 76px;
  color: var(--member-ink);
}
.member-detail-app #app-viewport { padding: 0; }
.member-detail-app #app-frame { border: 0; box-shadow: none; padding-bottom: 0 !important; }
.member-detail-app #main {
  padding: 0 0 calc(var(--member-action-base-height) + var(--member-safe-bottom)) !important;
  scroll-margin-bottom: calc(var(--member-action-base-height) + var(--member-safe-bottom));
}
.member-detail-shell, .member-detail-content, .member-app-detail { margin: 0; padding: 0; }
.member-app-notices {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); width: min(100%, 480px);
  bottom: calc(var(--member-action-base-height) + var(--member-safe-bottom) + 12px);
  box-sizing: border-box; padding: 0 calc(16px + var(--member-inline-right)) 0 calc(16px + var(--member-inline-left));
  max-height: calc(100dvh - var(--member-safe-top) - var(--member-safe-bottom) - var(--member-action-base-height) - 40px);
  overflow-y: auto; pointer-events: none;
}
.member-app-notices:empty { display: none; }
.member-app-notices [data-flash] { margin: 0; border-radius: 0; pointer-events: auto; }
.member-app-notices [data-flash] + [data-flash] { margin-top: 8px; }
.member-app-notices [data-flash] button { min-width: 44px; min-height: 44px; margin: 0; padding: 0; }
.member-app-detail { background: #fff; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; }
.member-app-detail *, .member-action-bar * { box-sizing: border-box; }
.member-app-detail button, .member-action-bar button { font-family: inherit; }
.member-app-detail button, .member-app-detail a, .member-action-bar button, .member-action-bar a { -webkit-tap-highlight-color: transparent; }
.member-photo { position: relative; margin: 0; padding: 0; background: #f0eee9; }
.member-photo-toggle {
  position: relative; display: block; width: calc(100% - var(--member-inline-left) - var(--member-inline-right));
  height: 50vh; height: 50svh; max-height: 380px;
  /* 名前・所属と下部操作を初期表示に収め、低い画面では写真をさらに縮める。 */
  max-height: min(380px, max(80px, calc(100svh - var(--member-action-base-height) - var(--member-safe-bottom) - 168px)));
  border: 0; margin: 0 var(--member-inline-right) 0 var(--member-inline-left); padding: 0; border-radius: 0; overflow: hidden; background: #f0eee9;
}
.member-photo-backdrop {
  position: absolute; inset: -32px; width: calc(100% + 64px); height: calc(100% + 64px);
  filter: blur(24px); opacity: .75; pointer-events: none;
}
.member-photo-toggle img { position: relative; display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: 50% 50%; }
.member-photo-controls {
  position: absolute; z-index: 10;
  top: 16px;
  left: calc(16px + var(--member-inline-left));
  right: calc(16px + var(--member-inline-right));
  height: 44px; display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
  transition: opacity 220ms ease-out, visibility 0s linear;
}
[data-member-controls-ready] .member-photo-controls:not(.is-visible):not(.is-fixed) { opacity: 0; visibility: hidden; transition: opacity 220ms ease-out, visibility 0s linear 220ms; }
.member-photo-controls.is-fixed {
  position: fixed; z-index: 35; top: 0; left: 50%; right: auto;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 12px;
  width: min(100%, 480px); height: calc(60px + var(--member-safe-top)); transform: translateX(-50%);
  padding: calc(8px + var(--member-safe-top)) calc(16px + var(--member-inline-right)) 8px calc(16px + var(--member-inline-left));
  border-bottom: 1px solid #f0eee9; background: rgb(255 255 255 / .96); pointer-events: auto;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.member-nav-logo { display: none; }
.member-photo-controls.is-fixed .member-nav-logo {
  display: block; justify-self: center; width: auto; height: 36px; max-width: 100%; object-fit: contain; pointer-events: none;
}
.member-photo-actions { display: flex; gap: 8px; }
.member-photo-controls .member-photo-button {
  width: 44px; height: 44px; min-height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgb(255 255 255 / .7); border-radius: 999px;
  background: rgb(255 255 255 / .82); color: var(--member-ink); box-shadow: 0 2px 8px rgb(45 38 34 / .07);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); pointer-events: auto;
}
.member-photo-controls .member-photo-button svg { width: 21px; height: 21px; }
.member-photo-controls.is-fixed .member-photo-button { border-color: transparent; background: #f3f1ef; box-shadow: none; }
.member-photo-button:focus-visible, .member-follow:focus-visible, .member-share:focus-visible, .member-vote:focus-visible { outline: 2px solid #c2410c; outline-offset: 3px; }
.member-photo-thumbnails { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 calc(16px + var(--member-inline-right)) 12px calc(16px + var(--member-inline-left)); }
.member-photo-thumbnails button { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; overflow: hidden; background: #f0eee9; }
.member-photo-thumbnails button[aria-pressed='true'] { border-color: #c2410c; }
.member-photo-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-app-identity { padding: 16px calc(16px + var(--member-inline-right)) 12px calc(16px + var(--member-inline-left)); }
.member-app-name-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.member-app-name-row form { margin: 0; }
.member-app-identity h1 { margin: 0; font: 700 30px/1.28 -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; letter-spacing: .01em; color: var(--member-ink); overflow-wrap: anywhere; }
.member-app-context { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.member-app-group { display: inline-flex; align-items: center; min-height: 44px; gap: 4px; margin-block: -10px; font-size: 14px; font-weight: 600; color: #c2410c; }
.member-app-group svg { width: 15px; height: 15px; flex-shrink: 0; }
.member-app-region { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; color: var(--member-muted); }
.member-app-region svg { width: 14px; height: 14px; }
.member-app-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; font-size: 12px; color: var(--member-muted); font-variant-numeric: tabular-nums; }
.member-app-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.member-app-stats svg { width: 15px; height: 15px; }
.member-app-stats > span:first-child svg { color: #dc2626; }
.member-app-stats small { font-size: 11px; margin-left: -3px; }
.member-app-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 calc(16px + var(--member-inline-right)) 0 calc(16px + var(--member-inline-left)); }
.member-app-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: var(--member-muted); font-size: 13px; }
.member-app-tabs button[aria-selected='true'] { background: var(--member-soft); color: #c2410c; font-weight: 600; }
.member-app-tabs small { font-size: 11px; }
.member-app-panel { padding: 16px calc(16px + var(--member-inline-right)) 16px calc(16px + var(--member-inline-left)); }
.member-app-panel[hidden] { display: none; }
.member-app-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 0; }
.member-app-facts dt { margin: 0 0 4px; font-size: 11px; color: var(--member-muted); }
.member-app-facts dd { margin: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.member-app-section { margin-top: 24px; }
.member-app-section h2 { margin: 0 0 12px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--member-ink); }
.member-app-section-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.member-app-section-title h2 { margin: 0; }
.member-app-help { min-height: 44px; border: 0; background: transparent; font-size: 12px; color: #c2410c; }
.member-app-links { display: flex; flex-wrap: wrap; gap: 12px; }
.member-app-links a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 52px; min-height: 60px; font-size: 11px; color: var(--member-muted); }
.member-app-links svg, .member-app-links img { width: 22px; height: 22px; }
.member-app-chart { height: 224px; margin-top: 12px; }
.member-app-description, .member-app-secondary { font-size: 13px; overflow-wrap: anywhere; }
.member-app-secondary { margin: 8px 0 0; color: var(--member-muted); }
.member-app-description p { margin: 8px 0 0; }
/* 最大安全領域は先に確保し、Chromeの動的な下端はbottomだけで追従する。 */
body.member-detail-app #bottom-menu.member-action-bar {
  position: fixed !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--member-safe-max-bottom)) !important;
  left: 50%; right: auto; width: 100%; max-width: 480px;
  transform: translateX(-50%); margin: 0 !important; border: 0; z-index: 40; background: #fff;
}
.member-action-inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; margin: 0;
  padding: 12px calc(16px + var(--member-inline-right)) calc(12px + var(--member-safe-max-bottom)) calc(16px + var(--member-inline-left));
}
.member-follow, .member-vote { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; }
.member-follow {
  --member-action-edge: #d6d0cb; --member-action-highlight: #ffe4bd; --member-action-top: #f8f0e6;
  --member-action-surface: #f3f1ef; --member-action-bottom: #e9e1d6; --member-action-inner-shadow: rgb(154 106 64 / .08);
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background-color: var(--member-action-surface); color: #9a3412;
}
.member-action-bar .member-share {
  --member-action-edge: #db9a62; --member-action-highlight: #ffe7c7; --member-action-top: #ffdbb5;
  --member-action-surface: #ffd0a0; --member-action-bottom: #fbc28d; --member-action-inner-shadow: rgb(154 68 20 / .12);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 100%; min-width: 0; min-height: 52px; padding: 8px; border: 0; border-radius: 999px; background-color: var(--member-action-surface); color: #602009; font-size: 14px; font-weight: 700; line-height: 1.3;
}
.member-action-bar .share-button-label { order: 1; min-width: 0; white-space: nowrap; }
.member-action-bar .member-share [data-icon-on] { color: inherit; }
.member-follow[aria-pressed='true'] {
  --member-action-edge: #f4b88f; --member-action-highlight: #ffd29b; --member-action-top: #ffe1b8;
  --member-action-surface: #ffedd5; --member-action-bottom: #fed7aa;
  background-color: var(--member-action-surface); color: #c2410c;
}
.member-follow svg, .member-action-bar .member-share svg { width: 21px; height: 21px; flex-shrink: 0; }
.member-vote {
  --member-action-edge: #4eab84; --member-action-highlight: #d0f4df; --member-action-top: #b2ecd0;
  --member-action-surface: #9fe3c3; --member-action-bottom: #88d8b5; --member-action-inner-shadow: rgb(4 120 87 / .12);
  display: grid; grid-template-columns: 21px minmax(0, max-content); align-content: center; gap: 1px 7px; min-width: 0; padding: 8px 12px; background-color: var(--member-action-surface); color: #034631; font-size: 14px; font-weight: 700; text-align: center;
}
.member-vote > span { min-width: 0; overflow-wrap: anywhere; }
.member-action-bar .member-share:hover { --member-action-highlight: #ffedd6; --member-action-top: #ffe1bf; --member-action-surface: #ffd9af; --member-action-bottom: #fcd09d; }
.member-vote:hover { --member-action-highlight: #dcf7e8; --member-action-top: #c1f0dc; --member-action-surface: #b1ecd0; --member-action-bottom: #9de3c4; }
.member-vote:focus-visible { outline-color: #047857; }
.member-vote svg { width: 21px; height: 21px; flex-shrink: 0; }
.member-vote small { grid-column: 1 / -1; min-width: 0; font-size: 11px; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
/* 白い膜を重ねず、同系色の明暗と下端の厚みで上面の膨らみを表現する。 */
.member-follow, .member-action-bar :is(.member-share, .member-vote) {
  background-image: radial-gradient(ellipse at 50% 8%, var(--member-action-highlight), transparent 70%), linear-gradient(180deg, var(--member-action-top), var(--member-action-surface) 52%, var(--member-action-bottom));
  box-shadow: inset 0 2px 4px var(--member-action-highlight), inset 0 -4px 6px var(--member-action-inner-shadow), 0 4px 1px var(--member-action-edge), 0 6px 10px rgb(45 38 34 / .14);
  touch-action: manipulation;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.member-follow:active:not(:disabled):not([aria-disabled='true']), .member-action-bar :is(.member-share, .member-vote):active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(3px);
  background-image: radial-gradient(ellipse at 50% 8%, var(--member-action-highlight), transparent 55%), linear-gradient(180deg, var(--member-action-top), var(--member-action-surface) 52%, var(--member-action-bottom));
  box-shadow: inset 0 1px 3px var(--member-action-highlight), inset 0 -1px 3px var(--member-action-inner-shadow), 0 1px 1px var(--member-action-edge), 0 2px 4px rgb(45 38 34 / .12);
}
/* 共有・メニュー・確認ダイアログも、切り欠きやジェスチャー領域の外に収める。 */
.member-detail-app .drawer-panel { box-sizing: border-box; padding-top: var(--member-safe-top); padding-bottom: var(--member-safe-bottom); padding-right: var(--member-inline-right); }
.member-detail-app .share-sheet-panel { padding: 0; }
.member-detail-app .share-sheet-panel .safe-area-bottom {
  padding: 16px calc(16px + var(--member-inline-right)) calc(16px + var(--member-safe-bottom)) calc(16px + var(--member-inline-left));
  max-height: calc(100dvh - var(--member-safe-top) - 16px); overflow-y: auto;
}
.member-detail-app [data-login-modal], .member-detail-app [data-vote-help-modal] {
  box-sizing: border-box;
  padding: calc(16px + var(--member-safe-top)) calc(16px + var(--member-safe-right)) calc(16px + var(--member-safe-bottom)) calc(16px + var(--member-safe-left));
}
.member-detail-app [data-login-modal] > div, .member-detail-app [data-vote-help-modal] > div { max-height: 100%; overflow-y: auto; }
/* これらの属性はDocker内でだけ出力される。数値はレイアウトの境界確認用。 */
body[data-member-safe-area='iphone'] { --member-safe-top: 59px; --member-safe-bottom: 34px; --member-safe-left: 0px; --member-safe-right: 0px; --member-safe-max-bottom: 36px; }
body[data-member-safe-area='android'] { --member-safe-top: 24px; --member-safe-bottom: 24px; --member-safe-left: 0px; --member-safe-right: 0px; --member-safe-max-bottom: 36px; }
body[data-member-safe-area='iphone-landscape'] { --member-safe-top: 0px; --member-safe-bottom: 21px; --member-safe-left: 59px; --member-safe-right: 59px; --member-safe-max-bottom: 36px; }
body[data-member-safe-area='android-landscape'] { --member-safe-top: 0px; --member-safe-bottom: 24px; --member-safe-left: 44px; --member-safe-right: 0px; --member-safe-max-bottom: 36px; }
body.member-detail-app[data-member-safe-area] #bottom-menu { bottom: calc(var(--member-safe-bottom) - var(--member-safe-max-bottom)) !important; }
@media (max-width: 350px) {
  .member-app-stats { column-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .member-photo-controls, [data-member-controls-ready] .member-photo-controls:not(.is-visible), .member-follow, .member-action-bar :is(.member-share, .member-vote) { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .member-photo-controls .member-photo-button, .member-photo-controls.is-fixed { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }