/* パターン2専用。アジャスター・全画面HERO・枠なしヘッダー・住まいコラージュ */
:root {
  --space-section: 138px;
  --space-block: 83px;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .3s ease, border-color .3s ease;
}

@supports (backdrop-filter: blur(1px)) {
  .header { background: color-mix(in srgb, var(--bg) 88%, transparent); }
}

.header.is-over-hero {
  background: transparent;
  border-bottom-color: transparent;
}

/* カバー（HERO / page-hero）が無いページは、fixed ヘッダー分の上余白を確保する */
.main:not(:has([data-cover])) {
  padding-top: calc(var(--space-section) * 1.25);
}

.login-text {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 6px 0;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: inherit;
}

.header.is-over-hero,
.header.is-over-hero .logo,
.header.is-over-hero .login-text,
.header.is-over-hero .icon-btn,
.header.is-over-hero .icon-link,
.header.is-over-hero .icon-count,
.header.is-over-hero .badge {
  color: #fff;
}

.header.is-over-hero .header-nav a { color: rgba(255,255,255,.78); }
.header.is-over-hero .header-nav a.is-on { color: #fff; border-bottom-color: #fff; }
.header.is-over-hero .badge { border-color: #fff; }

.search-panel,
.login-panel {
  border-top: 0;
  background: #fff;
  color: var(--ink);
}

.header.is-over-hero .search-panel,
.header.is-over-hero .login-panel {
  background: #fff;
  color: var(--ink);
}

.header.is-over-hero .search-panel input,
.header.is-over-hero .login-panel input,
.header.is-over-hero .search-panel button,
.header.is-over-hero .login-panel button,
.header.is-over-hero .login-note {
  color: var(--ink);
  border-color: var(--ink);
}

.scene-tabs { margin: 20px 0 28px; }

.hero {
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: 480px;
  margin-top: 0;
}

.lkd-rail .lkd-card { flex: 0 0 240px; }
.lkd-rail .lkd-kanji { font-size: calc(var(--fs-h1) * 1.5); }

.collage-main { display: grid; gap: 24px; align-content: start; }

.house {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--paper);
  overflow: hidden;
}

.house-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 0; }
.house-blend { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.house-spot { position: absolute; inset: 0; pointer-events: none; }
.house-face { position: absolute; inset: 0; pointer-events: auto; transition: background .15s ease; }
.house-ceiling .house-face { clip-path: polygon(0% 0%, 100% 0%, 100% 16%, 0% 16%); }
.house-wall .house-face { clip-path: polygon(18% 16%, 78% 16%, 78% 66%, 18% 66%); }
.house-floor .house-face { clip-path: polygon(0% 66%, 100% 66%, 100% 100%, 0% 100%); }
.house-table .house-face { clip-path: polygon(20% 50%, 80% 50%, 84% 60%, 16% 60%); }
.house-head .house-face { clip-path: polygon(8% 38%, 42% 38%, 42% 78%, 8% 78%); }
.house-leftwall .house-face { clip-path: polygon(0% 6%, 18% 6%, 18% 90%, 0% 90%); }
.house-doma .house-face { clip-path: polygon(0% 68%, 78% 68%, 78% 100%, 0% 100%); }
.house-cabinet .house-face { clip-path: polygon(78% 18%, 100% 18%, 100% 90%, 78% 90%); }
.house-shoji .house-face { clip-path: polygon(56% 8%, 100% 8%, 100% 82%, 56% 82%); }
.house-window .house-face { clip-path: polygon(0% 6%, 20% 6%, 20% 86%, 0% 86%); }
.house-door .house-face { clip-path: polygon(80% 10%, 98% 10%, 98% 82%, 80% 82%); }
.house-chair .house-face { clip-path: polygon(28% 62%, 72% 62%, 74% 76%, 26% 76%); }
.house-face img { display: none; }
.house-spot.is-over .house-face { background: rgba(26,26,26,.18); }
.house-floor { z-index: 1; }
.house-wall, .house-ceiling { z-index: 2; }
.house-leftwall, .house-doma, .house-cabinet, .house-shoji,
.house-door, .house-chair, .house-window, .house-head { z-index: 3; }
.house-table { z-index: 4; }

.house-scene-living .house-wall .house-face { clip-path: polygon(19% 16%, 71% 16%, 71% 69%, 19% 69%); }
.house-scene-entrance .house-wall .house-face-a { clip-path: polygon(12% 6%, 78% 6%, 78% 52%, 12% 52%); }
.house-scene-entrance .house-wall .house-face-b { clip-path: polygon(0% 6%, 11% 6%, 11% 78%, 0% 78%); }
.house-scene-entrance .house-floor .house-face { clip-path: polygon(10% 48%, 78% 48%, 78% 70%, 10% 70%); }
.house-scene-bedroom .house-wall .house-face { clip-path: polygon(4% 10%, 56% 10%, 56% 48%, 4% 48%); }
.house-scene-bedroom .house-ceiling .house-face { clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 0% 10%); }
.house-scene-dining .house-wall .house-face { clip-path: polygon(20% 10%, 80% 10%, 80% 56%, 20% 56%); }
.house-scene-dining .house-ceiling .house-face { clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 0% 10%); }

.house-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: 0.08em;
  background: var(--bg);
  padding: 4px 10px;
  border: 1px dashed var(--line);
  pointer-events: none;
}

.house-ceiling .house-hint { top: 8%; }
.house-wall .house-hint { top: 38%; }
.house-floor .house-hint { top: 83%; }
.house-table .house-hint { top: 54%; }
.house-head .house-hint { top: 52%; left: 25%; }
.house-leftwall .house-hint { top: 40%; left: 9%; }
.house-doma .house-hint { top: 86%; left: 36%; }
.house-cabinet .house-hint { top: 48%; left: 89%; }
.house-shoji .house-hint { top: 36%; left: 78%; }
.house-window .house-hint { top: 36%; left: 10%; }
.house-door .house-hint { top: 40%; left: 89%; }
.house-chair .house-hint { top: 68%; }
.house-scene-entrance .house-wall .house-hint { top: 24%; }
.house-scene-entrance .house-floor .house-hint { top: 58%; }

.house-del {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-size: .6875rem;
  padding: 4px 10px;
  pointer-events: auto;
  z-index: 2;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
}

.house-ceiling .house-del { top: 16%; }
.house-wall .house-del { top: 58%; }
.house-floor .house-del { top: 90%; }
.house-table .house-del { top: 58%; }
.house-head .house-del { top: 70%; left: 25%; }
.house-leftwall .house-del { top: 48%; left: 9%; }
.house-doma .house-del { top: 88%; left: 36%; }
.house-cabinet .house-del { top: 56%; left: 89%; }
.house-shoji .house-del { top: 48%; left: 78%; }
.house-window .house-del { top: 48%; left: 10%; }
.house-door .house-del { top: 50%; left: 89%; }
.house-chair .house-del { top: 70%; }
.house-scene-entrance .house-wall .house-del { top: 36%; }
.house-scene-entrance .house-floor .house-del { top: 62%; }
.house-scene-bedroom .house-ceiling .house-del,
.house-scene-dining .house-ceiling .house-del { top: 6%; }
.collage-lib button[draggable="true"] { cursor: grab; }

.collage-lab { margin: 20px 0 28px; }
.collage-lab-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.collage-lab-actions button:disabled { opacity: .45; cursor: wait; }
.house.is-baked .house-img { object-fit: fill; }

@media (max-width: 900px) {
  .hero { height: 100svh; min-height: 380px; }
}