/* ==========================================================================
   App — 顧客ページ・管理画面（/real-estate/client/, /real-estate/admin/）
   会社サイトのトークン・部品をそのまま使い、業務画面向けに密度を上げる
   ========================================================================== */

/* ---------- Header ---------- */
.app-header { background: var(--c-paper); border-bottom: var(--border); position: sticky; top: 0; z-index: 50; }
.app-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; flex-wrap: wrap; }
.app-header__label {
  margin-left: var(--s-2);
  padding: 0.1em 0.7em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.app-header--admin .app-header__label { background: var(--c-ink); color: var(--c-paper); }
.app-header__logout { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.app-header__user { font-weight: 700; }
@media (max-width: 639px) { .app-header__user { display: none; } }

.app-nav { border-top: 1px solid var(--c-line); }
.app-nav__list { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; padding-block: var(--s-2); }
.app-nav__list::-webkit-scrollbar { display: none; }
.app-nav__link { display: block; padding: var(--s-2) var(--s-4); border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--c-ink-2); }
.app-nav__link:hover { background: var(--c-paper-2); color: var(--c-ink); }
.app-nav__link[aria-current="page"] { background: var(--c-ink); color: var(--c-paper); }

.app-flashes { display: grid; gap: var(--s-2); padding-top: var(--s-4); }

/* ---------- Layout ---------- */
.app-section { padding-block: var(--s-6) var(--s-8); }
.app-title { font-size: var(--fs-2xl); font-weight: 900; margin-bottom: var(--s-3); }
.app-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.app-title-row .app-title { margin-bottom: 0; }
.app-lead { color: var(--c-ink-2); font-size: var(--fs-sm); margin-bottom: var(--s-5); max-width: 48em; }
.app-back { font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.app-back a { color: var(--c-ink-2); text-decoration: none; }
.app-back a:hover { text-decoration: underline; }
.app-grid-2 { display: grid; gap: var(--s-5); align-items: start; }
.app-grid-even { display: grid; gap: var(--s-5); }
@media (min-width: 960px) {
  .app-grid-2 { grid-template-columns: minmax(0, 1fr) 360px; }
  .app-grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.app-aside { display: grid; gap: var(--s-4); }
.stack { display: grid; gap: var(--s-4); }
.stack-sm { display: grid; gap: var(--s-2); justify-items: start; }

.panel { background: var(--c-surface); border: var(--border); border-radius: var(--radius); padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.panel__title { font-size: var(--fs-md); font-weight: 900; }
.panel--danger { border-color: var(--c-error); }
.empty { padding: var(--s-7) var(--s-5); text-align: center; color: var(--c-ink-3); background: var(--c-surface); border: 1.5px dashed var(--c-line); border-radius: var(--radius); }

/* ---------- Forms（業務画面向けの詰めた版） ---------- */
.form--compact { gap: var(--s-3); }
.form-row { display: grid; gap: var(--s-3); }
@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.input--sm { min-height: 40px; padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
textarea.input--sm { min-height: 84px; }
.inline-form { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.inline-form .input--sm { width: auto; }
.btn--danger { --btn-fg: var(--c-error); border-color: var(--c-error); }
.img-admin__buttons { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.segmented { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; margin: 0; padding: 0; }
.segmented legend { width: 100%; margin-bottom: var(--s-2); }
.segmented label { cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: inline-block; padding: var(--s-2) var(--s-4); border: 1.5px solid var(--c-line); border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; }
.segmented input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.segmented input:focus-visible + span { outline: 3px solid var(--c-leap); outline-offset: 2px; }

/* ---------- Auth ---------- */
.auth { padding: var(--s-8) var(--gutter); display: grid; place-items: center; }
.auth__card { width: 100%; max-width: 440px; display: grid; gap: var(--s-4); background: var(--c-surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6); box-shadow: var(--shadow-hard); }
.auth__title { font-size: var(--fs-xl); font-weight: 900; }
.auth__lead, .auth__note { font-size: var(--fs-sm); color: var(--c-ink-2); }
.auth .btn { width: 100%; }

/* ---------- 状態バッジ ---------- */
.re-status { display: inline-block; padding: 0.05em 0.7em; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; border: 1.5px solid currentColor; white-space: nowrap; vertical-align: middle; }
.re-status--draft, .re-status--cancelled, .re-status--closed { color: var(--c-ink-3); }
.re-status--published, .re-status--confirmed, .re-status--completed, .re-status--done { color: var(--c-success); }
.re-status--client_only, .re-status--scheduled, .re-status--in_progress { color: var(--c-real-estate); }
.re-status--negotiating, .re-status--adjusting { color: var(--c-warning); }
.re-status--requested, .re-status--new { color: var(--c-leap-ink); }

/* ---------- 物件カード ---------- */
.re-cards { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .re-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.re-card { display: grid; background: var(--c-surface); border: var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.re-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); }
.re-card__thumb { position: relative; aspect-ratio: 4 / 3; background: var(--c-paper-2); display: grid; place-items: center; }
.re-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.re-card__noimage { font-family: var(--f-display); color: var(--c-ink-3); font-size: var(--fs-sm); }
.re-card__badge { position: absolute; left: var(--s-3); top: var(--s-3); background: var(--c-surface); }
.re-card__saved { position: absolute; right: var(--s-3); top: var(--s-2); color: var(--c-leap); font-size: 1.4rem; text-shadow: 0 0 4px #fff; }
.re-card__body { display: grid; gap: var(--s-1); padding: var(--s-4); }
.re-card__meta { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 700; }
.re-card__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; }
.re-card__price { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); color: var(--accent-text); }
.re-card__spec { font-size: var(--fs-xs); color: var(--c-ink-2); }

/* ---------- 物件詳細 ---------- */
.re-detail-head { margin-bottom: var(--s-4); }
.re-detail-price { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-2xl); color: var(--accent-text); }
.re-description { font-size: var(--fs-sm); line-height: 1.9; padding-top: var(--s-3); border-top: 1px dashed var(--c-line); }
.re-request { font-size: var(--fs-sm); }
.gallery { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.gallery__main { margin: 0; background: var(--c-ink); border-radius: var(--radius); overflow: hidden; }
.gallery__main img { width: 100%; max-height: 520px; object-fit: contain; margin-inline: auto; }
.gallery__main figcaption { padding: var(--s-2) var(--s-4); color: var(--c-paper); font-size: var(--fs-sm); }
.gallery__main figcaption:empty { display: none; }
.gallery__thumbs { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); }
.gallery__thumb { flex: none; width: 88px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--c-paper-2); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--accent); }

/* ---------- 地図 ---------- */
.re-map { position: relative; height: 320px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-paper-2); }
.re-map--picker { height: 360px; }
.re-map__pin { width: 26px; height: 34px; background: var(--accent); clip-path: path('M13 0C5.8 0 0 5.8 0 13c0 9.7 13 21 13 21s13-11.3 13-21C26 5.8 20.2 0 13 0z'); }
.re-map__error { position: absolute; inset: auto var(--s-3) var(--s-3); margin: 0; padding: var(--s-2) var(--s-3); background: var(--c-surface); border: 1px solid var(--c-error); border-radius: var(--radius-sm); font-size: var(--fs-xs); color: var(--c-error); }

/* ---------- 一覧・表 ---------- */
.table-wrap { overflow-x: auto; background: var(--c-surface); border: var(--border); border-radius: var(--radius); }
.data-grid { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-grid th, .data-grid td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.data-grid thead th { font-size: var(--fs-xs); color: var(--c-ink-3); background: var(--c-paper); white-space: nowrap; }
.data-grid tbody tr:last-child td { border-bottom: 0; }
.data-grid .is-muted, tr.is-muted { opacity: 0.55; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-4); }
.filter-tabs a { padding: var(--s-1) var(--s-3); border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; color: var(--c-ink-2); border: 1px solid var(--c-line); }
.filter-tabs a[aria-current="page"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.kpis { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpis a { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); background: var(--c-surface); border: var(--border); border-radius: var(--radius); text-decoration: none; }
.kpis span { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 700; }
.kpis strong { font-family: var(--f-display); font-size: var(--fs-2xl); line-height: 1; }
.kpis .is-alert a { border-color: var(--c-leap); box-shadow: 3px 3px 0 var(--c-leap); }
.mini-list { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.mini-list li { padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); line-height: 1.6; }
.mini-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline { display: grid; gap: 0; }
.timeline__item { position: relative; padding: 0 0 var(--s-4) var(--s-5); border-left: 2px solid var(--c-line); font-size: var(--fs-sm); }
.timeline__item::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.timeline__item--past::before { background: var(--c-line); }
.timeline__date { font-weight: 700; }
.timeline__title { font-weight: 700; font-size: var(--fs-base); }

/* ---------- 比較 ---------- */
.compare-picker { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.compare-picker__list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-sm); }
.compare-table th, .compare-table td { padding: var(--s-3); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--c-paper); }
.compare-table tbody th { width: 7em; color: var(--c-ink-3); white-space: nowrap; }
.compare-table img { width: 100%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }

/* ---------- 管理画面の部品 ---------- */
.img-admin { display: grid; gap: var(--s-3); }
.img-admin__item { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); align-items: start; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); }
.img-admin__item img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.img-admin__form { display: grid; gap: var(--s-2); }
.assign { display: grid; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line); }
.assign__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.assign__reaction { font-size: var(--fs-sm); color: var(--c-ink-2); }
.assign-new { padding-top: var(--s-2); }
.viewing--done { opacity: 0.65; }
.viewing__prefs { display: grid; gap: var(--s-1); font-size: var(--fs-sm); padding-left: 1.4em; list-style: decimal; }
.invite-link { display: flex; gap: var(--s-2); }
.invite-link .input { min-height: 40px; font-size: var(--fs-sm); }

.app-footer { border-top: 1px solid var(--c-line); padding-block: var(--s-5); font-size: var(--fs-xs); color: var(--c-ink-3); }
.app-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }
.app-footer a { color: inherit; }
@media (max-width: 479px) {
  .app-header__inner { flex-wrap: nowrap; }
  .app-header .wordmark__text { font-size: 1rem; }
  .app-header .wordmark .mark { width: 26px; height: 26px; }
  .app-header__label { margin-left: var(--s-1); padding: 0.1em 0.5em; }
  .app-header__logout .btn { min-height: 34px; padding: var(--s-1) var(--s-3); }
}

/* ---------- 顧客の物件一覧（行レイアウト） ---------- */
.re-rows { display: grid; gap: var(--s-3); }
.re-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-3);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (min-width: 640px) { .re-row { grid-template-columns: 200px minmax(0, 1fr); padding: var(--s-4); } }
.re-row:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); }
.re-row__thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-paper-2); display: grid; place-items: center; align-self: start; }
.re-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.re-row__count { position: absolute; right: 4px; bottom: 4px; padding: 0 6px; border-radius: 999px; background: rgb(22 21 15 / 0.75); color: #fff; font-size: 0.6875rem; line-height: 1.6; }
.re-row__body { display: grid; gap: 2px; align-content: start; min-width: 0; }
.re-row__badges { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-1); }
.re-row__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; }
.re-row__price { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xl); color: var(--accent-text); line-height: 1.3; }
.re-row__spec { font-size: var(--fs-sm); font-weight: 500; }
.re-row__meta { font-size: var(--fs-xs); color: var(--c-ink-2); }
.re-row__comment { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--c-paper); border-left: 3px solid var(--accent); font-size: var(--fs-xs); color: var(--c-ink-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
@media (max-width: 639px) { .re-row__comment, .re-row__meta + .re-row__meta { display: none; } }
.re-flag { display: inline-block; padding: 0.05em 0.6em; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--c-paper-2); color: var(--c-ink-2); white-space: nowrap; }
.re-flag--confirmed { background: var(--c-success); color: #fff; }
.re-flag--pending { background: #fff3d6; color: var(--c-warning); }
.re-flag--saved { background: #ffe9e1; color: var(--c-leap-ink); }

/* ---------- 確定した予定（強調） ---------- */
.confirmed {
  display: grid;
  gap: 2px;
  margin-bottom: var(--s-4);
  padding: var(--s-5);
  background: var(--c-success);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--c-ink);
}
.confirmed__label { font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.04em; }
.confirmed__date { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.2; }
.confirmed__title { font-weight: 700; font-size: var(--fs-md); }
.confirmed__meta, .confirmed__note { font-size: var(--fs-sm); opacity: 0.95; }
.confirmed__note { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid rgb(255 255 255 / 0.35); }
.re-request--confirmed { font-weight: 700; color: var(--c-success); }
@media (max-width: 479px) {
  /* 狭い画面ではロゴの文字を省き、「お客さま専用ページ」などのラベルを優先する */
  .app-header .wordmark__text { display: none; }
  .app-header__label { margin-left: 0; white-space: nowrap; }
}