/* 2026-10-13: approved compact layout. Shared button styling stays here across all screens. */
:root { --button-surface: #f5f6f8; --button-line: #e2e6eb; --button-chosen: #edf3fd; }
:is(button,a,label).secondary { background: var(--button-surface) !important; border-color: var(--button-line) !important; }
:is(button,a,summary,span).small-button::before,
button.link.small::before { background: var(--button-surface) !important; border-color: var(--button-line) !important; }
.find-chip::before, .offer-toggle::before { background: var(--button-surface); }
.find-cut:not([aria-pressed='true']) { background: var(--button-surface) !important; border-color: var(--button-line) !important; }
/* 相手探しの選んだ札は、トップの個人・会社（.offer-seg）と同じ紺の塗りに白い字（斉藤さん 2026-10-17「薄い背景がつくだけで、選んだ感がない」） */
.find-chip[aria-pressed='true']::before { background: var(--fill) !important; border-color: var(--fill) !important; transition: none; }
.small-button[aria-pressed='true']::before,
.small-button[aria-expanded='true']::before { background: var(--button-chosen) !important; border-color: var(--fill) !important; }
.searchbox input:focus-visible { outline: none; }
.searchbox:focus-within { border-color: var(--fill-text); box-shadow: 0 0 0 1px var(--fill-text); }
.header { min-height: 44px; padding: 2px 0; gap: 16px; }
.header nav { align-items: center; gap: 16px; }
.header nav > button, .header-menu > summary { font-size: 13px; min-height: 36px; padding: 4px 0; }
.header .perukomo-mark { width: 30px; height: auto; aspect-ratio: 56 / 48; flex: 0 1 auto; min-width: 0; }
.header .perukomo-wordmark { width: 118px; height: auto; aspect-ratio: 168 / 40; flex: 0 1 auto; min-width: 0; }
/* ロゴは、メニューが入りきらない狭い画面では、形を保ったまま縮む（幅の数字で分けない） */
.header .perukomo-brand { min-height: 36px; gap: 10px; flex: 0 1 auto; min-width: 0; }
.header-menu { position: relative; }
.header-menu > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; list-style: none; }
.header-menu > summary::-webkit-details-marker { display: none; }
.header-menu > summary::after { content: '▾'; font-size: 10px; color: var(--text-muted); }
.header-menu > div { position: absolute; right: 0; top: 100%; min-width: 180px; padding: 8px; border: 1px solid var(--button-line); border-radius: 6px; background: #fff; box-shadow: 0 6px 20px #16305c12; z-index: 50; }
.header .header-menu button { display: block; width: 100%; text-align: left; border: 0; padding: 4px 10px; }
.header .header-menu button:hover { background: var(--button-surface); }
footer { padding: 8px 0; align-items: center; gap: 16px; }
footer div { justify-content: flex-end; gap: 4px 16px; flex-wrap: wrap; margin-left: auto; }
footer button { background: transparent; }
.hero { margin: 12px 0 16px; }
.hero h1 { font-size: 32px; }
.hero-title > p { font-size: 17px; margin-top: 12px; }
.hero .searchbox { gap: 8px; padding: 4px 6px 4px 14px; }
.hero .searchbox input { font-size: 16px; min-height: 36px; }
.hero .searchbox button { height: 36px; min-height: 36px; --control-pad: 12px; font-size: 13px; }
.hero-search { padding-top: 0; }
.hero-search .examples { margin: 3px 0; gap: 10px; }
.hero-search .examples button { min-height: 28px; font-size: 12px; }
.hero-search .offer { margin-top: 3px; }
.hero-search .offer-fields { gap: 8px; }
.hero-search .offer-field { min-height: 32px; padding-top: 0; padding-bottom: 0; }
.hero-search .offer-field input { font-size: 12px; }
.hero-search .offer-seg button { min-height: 30px; padding-top: 0; padding-bottom: 0; }
.fw-story { font-size: 14px; line-height: 1.75; }
.fw-story p { margin-top: 10px; }
.fw-person { grid-template-columns: 6.25rem minmax(0,1fr); }
.fw-person > .portrait, .fw-person > .initial { width: 6.25rem; height: 6.25rem; }
.fw-actions { gap: 0 8px; }
.fw-actions > .small-button:not(.fw-unlock) { width: 102px; min-width: 102px; padding: 0 8px; }
.fw-foot .fw-cap { margin: 8px 0 0; font-size: 11px; line-height: 1.6; }
.find-hero-now .find-count-wall { margin: 12px 0 0; padding: 0; }
.find-hero-now .find-count { font-size: 13px; }
.find-hero-now .find-num strong { font-size: 30px; }
.find-hero-now .find-size { font-size: 12px; }
.find-chosen-panel { display: block; margin-top: 12px; }
.find-chosen-panel .find-chosen { margin: 0; font-size: 12px; line-height: 1.7; }
.find-cut > span:last-child { font-size: 12px; line-height: 1.6; }
.find-steps { justify-content: flex-start; }
.report-v2 .rb-who { grid-template-columns: 1fr; gap: 8px; }
.report-v2 .rb-who > p:first-child { margin: 0; }
.report-v2 .rb-size { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; white-space: normal; }
.report-v2 .rb-size strong { white-space: nowrap; }
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0,1fr) minmax(32rem,1.25fr); }
  .face-wall { grid-template-columns: minmax(0,1fr) minmax(0,28rem); }
  .fw-grid.fw-all { grid-template-columns: repeat(75,minmax(0,1fr)); gap: 2px; }
  .find-grid.find-grid-all { grid-template-columns: repeat(var(--wall-cols,60),minmax(0,1fr)); grid-auto-rows: auto; }
  .find-grid.find-grid-all .fw-tile { aspect-ratio: 1; height: auto; }
}
/* 2026-10-14 案A：右の紹介を狭め、そのぶん顔の壁を広げる（75人×40段のまま、1440幅で顔が約9.3px → 約10.7px）。
   紹介の幅は、ボタン3つが1行に並び、年齢・仕事の行が全員2行に収まる 22rem（1024〜1099px と同じ幅）。紹介文は字を
   13px にして量を保つ。壁が高くなるぶん、見出しの下と壁のまわりの余白を詰めて、ノートPC（1440×780）でも壁の下の
   一行まで1画面に収める。見出しの下の余白は「相手を選ぶ」画面と共通なので、壁の上端の線は2つの画面でそろったまま。 */
@media (min-width: 1100px) {
  .hero { margin-bottom: 8px; }
  .face-wall { grid-template-columns: minmax(0,1fr) 22rem; column-gap: 24px; }
  .fw-grid.fw-all { padding-top: 8px; }
  .face-wall:has(.fw-all) .fw-person { inset-block-start: 8px; }
  .face-wall:has(.fw-all) .fw-foot { margin-top: 4px; }
  .face-wall:has(.fw-all) .fw-foot .fw-cap { margin-top: 4px; }
  .fw-story { font-size: 0.8125rem; line-height: 1.65; }
  .fw-story p { margin-top: 6px; }
}
@media (min-width: 901px) {
  .find-panel { position: static; max-height: none; overflow: visible; }
  .find-hero-now { position: static; }
  .find-hero-sizer { display: none; }
  .find-hero-steps { min-height: 102px; }
  .find-layout { gap: 32px; grid-template-columns: minmax(0,1fr) minmax(0,28rem); }
  .find-wall .fw-grid { grid-auto-rows: auto; }
  .find-wall .fw-tile { aspect-ratio: 1; }
}
/* 901〜1099px でも右の欄は細めない：札の箱が1行に2枚以上並ぶには、札の中身から測って約435px（いちばん広い2枚の組＋見出し）が要る。
   22rem（352px）に決め打ちで細めると、地域や雪のような短い札まで縦1列になった（1024、統括5 2026-10-27）。残りは顔の並びに回す */
@media (min-width: 1024px) {
  .fw-person { inset-block-start: 16px; }
  .fw-story { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 1099px) {
  .hero h1 { font-size: 28px; }
}
@media (max-width: 900px) {
  .find-hero-now .find-count-wall { display: block; }
  .find-foot .find-count { display: none; }
  .find-hero-steps { min-height: 0; }
  .find-hero-now { position: static; }
  .find-hero-sizer { display: none; }
}
@media (max-width: 700px) {
  .hero h1 { font-size: min(5.5vw,25px); letter-spacing: 0.02em; }
  .hero-title > p { font-size: 15px; }
  .header .perukomo-formal, .header .perukomo-divider { display: none; }
  .header nav { gap: 12px; }
  .header nav > button { font-size: 12px; }
  /* 足元：提供の行と、リンクの行を中央に。リンクの数はページの設定で変わる（料金が出ると7つ）ので、格子で区切らず中央に流す
     （3つずつの格子では、7つ目が1つだけ左に残った。2026-10-26 本番） */
  footer { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
  footer div { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: 0 18px; margin: 4px 0 0; }
  /* 押せる高さは 2.75rem（44px）以上：足元のリンクとロゴ（saito-review 2026-10-28：36px だった） */
  footer div button { min-height: 2.75rem; font-size: 12px; justify-content: center; }
  .header .perukomo-brand { min-height: 2.75rem; }
  .fw-actions > .small-button { min-width: 0; }
  .report-v2 .rb-size { flex-wrap: wrap; justify-content: flex-start; }
}

@media (min-width: 701px) {
  .hero-search .offer .examples { height: 28px; margin-top: 3px; }
  .hero-search .offer .examples > * { height: 28px; }
  .hero-search .offer .offer-fields { height: 34px; margin-top: 3px; }
  .hero-search .offer-field { height: 34px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .hero h1 { font-size: 28px; }
}

body.has-hero #main { padding-top: 20px; padding-bottom: 16px; }

/* 個人・会社：選んだほうは「相手を選ぶ」と同じ紺の塗りに白い字、選んでいないほうは細い線（押せると分かる）。
   押した瞬間に変わる（斉藤さん 2026-10-17「薄い背景がつくだけで、選んだ感がない」）。トップと相手探しで同じ形。 */
.offer-seg button { transition: none; box-shadow: inset 0 0 0 1px var(--line); }
.offer-seg button[aria-pressed='true'] { background: var(--fill); color: var(--on-fill); box-shadow: inset 0 0 0 1px var(--fill); }
.offer-seg button[aria-pressed='true']:hover { background: var(--fill); color: var(--on-fill); }
.find-cut[aria-pressed='true'] { background: var(--button-chosen); }

.fw-sprite { display: block; width: 100%; height: 100%; background-size: 1000% 1000%; background-repeat: no-repeat; }
/* 前面（いま開いた画面の中身）を読み終えるまで、壁のシートは読ませない（foreground.js の html.fg-wait。人物紹介を直接開いたとき） */
html.fg-wait .fw-sprite { background-image: none !important; }

@media (min-width: 901px) { .find-layout .find-panel .find-foot { position: static !important; } }

@media (max-width:700px) { .hero-search .offer-seg button { min-height:44px; } }

@media (max-width:700px) { .hero-search .offer-field input { font-size:16px; } }

/* Reserve the count warning so changing a filter never shifts the choice rows. */
.find-hero-now .find-count-wall { min-height: 90px; align-content: flex-start; }
@media (min-width:901px) { .hero { min-height:148px; } .hero-title { min-height:148px; } .find-hero-steps { height:148px; } }

@media (min-width:901px) { .find-wall .find-grid { grid-template-columns:repeat(var(--wall-cols,50),minmax(0,1fr)); } }

/* Touch controls keep their hit area; the compact mouse layout stays unchanged. */
@media (max-width:1099px), (pointer:coarse) {
  .header nav > button, .header-menu > summary { min-height:44px; }
  .hero-search .offer-seg button { min-height:44px; }
}
@media (min-width:701px) and (max-width:1099px), (min-width:701px) and (pointer:coarse) {
  .hero-search .offer .offer-fields { height:46px; }
  .hero-search .offer-field { height:46px; min-height:46px; }
}
@media (min-width:901px) and (max-width:1200px), (min-width:901px) and (pointer:coarse) {
  .find-layout .find-panel .find-foot { position:fixed !important; bottom:0; right:var(--gutter); width:28rem; z-index:20; }
  .find-layout .find-panel { padding-bottom:88px; }
}
@media (max-width:900px) and (orientation:landscape) {
  .find-wall { position:static; }
}



/* Reserve the two-line warning itself, including Safari's wrapped count layout. */
.find-hero-now .find-count-wall .find-count-warning { display:block; min-height:3.2em; line-height:1.6; }

/* ヘッダーの「データと出典」（2026-10-14）：「保存した対話」と同じ形。ヘッダーに入りきらない幅では、メニューの中だけにする
   （メニューの「データと出典」は menu-narrow。広い幅ではヘッダーにあるので、メニューには出さない。2026-10-18）。 */
@media (max-width: 480px) {
  .header nav > .nav-source { display: none; }
}
/* ヘッダーの右のログインの入口（2026-10-17）。言葉は折らない。スマホでは「保存した対話」をメニューの中に入れて、ログインを1行に収める
   （ロゴ・保存した対話・メニュー・ログインの4つは390に入らず、2行に折れていた）。 */
.header nav > button { white-space: nowrap; }
.header .header-menu .menu-narrow { display: none; }
@media (max-width: 480px) {
  .header nav > #nav-works { display: none; }
  .header .header-menu .menu-narrow { display: block; }
}
/* メニューの区切り（2026-10-18 斉藤さん「すっきりさせてほしい」）：自分の記録 ／ ペルコモを知る ／ hint と ／ ログアウト の4つのまとまり。
   区切りは、まとまりの最初の項目の上に引く。広い幅で「保存したA/Bテスト」がない人は、使い方がいちばん上になるので引かない。 */
.header .header-menu .menu-sep { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--button-line); border-radius: 0; }
@media (min-width: 481px) {
  .header .header-menu #nav-surveys[hidden] + .menu-sep { margin-top: 0; padding-top: 4px; border-top: 0; }
}
/* 2026-10-14 案B（3,000人全員とレンズ）：1024〜1439px は75列だと壁が低く（1280で427px）、512pxの枠の上下が空く。
   60列×50段にして、顔を大きく（1280で約9px → 約11px）、壁を枠より高くする。 */
@media (min-width: 1024px) and (max-width: 1439px) {
  .fw-grid.fw-all { grid-template-columns: repeat(60,minmax(0,1fr)); }
}
/* 1024〜1099px も相手選びは3,000人の壁（2026-10-14）：列の数は右の棚の高さに合わせる（wall-balance.js）。 */
@media (min-width: 1024px) and (max-width: 1099px) {
  .find-grid.find-grid-all { grid-template-columns: repeat(var(--wall-cols,60),minmax(0,1fr)); grid-auto-rows: auto; }
  .find-grid.find-grid-all .fw-tile { aspect-ratio: 1; height: auto; }
}
/* トップの右の棚の見出し「届けたい相手」（top.css .fw-head）があるとき、紹介はその下から（斉藤さん 2026-10-16）。 */
@media (min-width: 1024px) {
  .face-wall:has(.fw-head) .fw-person { inset-block-start: 4.25rem; }
}
/* タブレット（701〜1199px）の足元：提供の行とリンクの行を、どちらも中央に（左右に分かれた段違いにしない。2026-10-26） */
@media (min-width: 701px) and (max-width: 1199px) {
  footer { text-align: center; }
  footer div { justify-content: center; margin-left: 0; }
}