/* =============================================================
 * components/sub-side.css
 * 物件詳細以下のサブページ (タイムライン等。inquiry を除く) で共有する
 * 詳細版 PC サイドバー <x-www.house.sub-side> の専用スタイル。
 *
 * 含まれるブロック:
 *   1. .sub-side__contact   問い合わせ CTA + クリップ + 電話 + 公式サイト
 *   2. .sub-side__bd        画像 + キャッチ + 空室 + 説明 + 入居条件 + 特徴 + アクセス表
 *   3. .sub-side__estate    運営者
 *
 * sub-side.blade.php が @once @push('styles') でこのファイルを要求するため、
 * layout / page blade 側で個別に <link> 不要。
 * ============================================================= */

.sub-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

/* ───── contact ブロック ───── */
.sub-side__contact {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-shadow: var(--sh-1);
}
.sub-side__bd-name {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--sc-text);
  text-align: center;
}

/* クリップ (未クリップ時=白 / クリップ済=黄色塗) */
.sub-side__clip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sc-border);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--sc-text-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sub-side__clip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}
.sub-side__clip > i { font-size: 15px; }
.sub-side__clip-label--on { display: none; }
.sub-side__clip.is-clipped {
  background: #ffd451;
  border-color: #f0c878;
  color: #5a3d00;
  box-shadow: 0 2px 6px rgba(245, 197, 66, .25);
}
.sub-side__clip.is-clipped:hover {
  box-shadow: 0 3px 10px rgba(245, 197, 66, .35);
}
.sub-side__clip.is-clipped .sub-side__clip-label--off { display: none; }
.sub-side__clip.is-clipped .sub-side__clip-label--on  { display: inline; }

/* 電話 */
.sub-side__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--sc-bg-alt);
  color: var(--sc-text);
  text-decoration: none;
  text-align: center;
}
.sub-side__tel:hover { text-decoration: none; color: var(--sc-text); }
.sub-side__tel-label {
  font-size: var(--fs-xs);
  color: var(--sc-text-2);
}
.sub-side__tel-num {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #173748;
}
.sub-side__tel small {
  display: block;
  font-size: 10px;
  color: var(--sc-text-3);
  margin-top: 2px;
}

/* ───── 物件メイン情報ブロック ───── */
.sub-side__bd {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-shadow: var(--sh-1);
}
.sub-side__hero-img {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--sc-bg-alt);
  aspect-ratio: 4 / 3;
}
.sub-side__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sub-side__catch {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sc-accent-d);
  line-height: 1.5;
}
.sub-side__vacancy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sub-side__vacancy {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  flex-shrink: 0;
}
.sub-side__vacancy.is-vacant { background: #58a9cd; }
.sub-side__vacancy.is-soon   { background: #f08c2a; }
.sub-side__vacancy.is-full   { background: #999; }
.sub-side__price {
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.sub-side__price-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sub-side__price-tag--private { background: #ffd451; color: #5a3d00; }
.sub-side__price-tag--dorm    { background: #9bd1e3; color: #0e4a5e; }
.sub-side__rooms {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--sc-text-2);
}
.sub-side__exp {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--sc-text-2);
  line-height: 1.7;
}

/* 入居条件 */
.sub-side__cond {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sub-side__cond > li {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-bottom: 3px solid;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.sub-side__cond .is-ok-man     { color: var(--sc-text); border-color: #58a9cd; }
.sub-side__cond .is-ok-woman   { color: var(--sc-text); border-color: #e85d75; }
.sub-side__cond .is-ok-foreign { color: var(--sc-text); border-color: #f5c542; }
.sub-side__cond .is-ng         { color: var(--sc-text-3); border-color: #ddd; text-decoration: line-through; }
.sub-side__cond-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--sc-text-3);
  line-height: 1.5;
}

/* チップリスト (入居条件詳細 / 特徴) */
.sub-side__chiplist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sub-side__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--sc-border);
  border-radius: 999px;
  background: #fff;
  font-size: var(--fs-xs);
  color: var(--sc-text-2);
  text-decoration: none;
}
.sub-side__chip--feature {
  background: var(--sc-accent-l);
  border-color: var(--sc-accent);
  color: var(--sc-accent-d);
}
.sub-side__chip--feature:hover {
  background: var(--sc-accent);
  color: #fff;
  text-decoration: none;
}
/* button 化された +N個 (クリックで残りを展開) */
button.sub-side__chip--more {
  background: var(--sc-bg-alt);
  color: var(--sc-text-2);
  cursor: pointer;
  font-family: inherit;
}
button.sub-side__chip--more:hover {
  background: var(--sc-accent-l);
  color: var(--sc-accent-d);
  border-color: var(--sc-accent);
}
.sub-side__chip--more {
  background: var(--sc-bg-alt);
  color: var(--sc-text-3);
}

/* アクセス表 */
.sub-side__access {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
}
.sub-side__access th,
.sub-side__access td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--sc-border);
  vertical-align: top;
  text-align: left;
}
.sub-side__access th {
  width: 64px;
  font-weight: 700;
  color: var(--sc-text-2);
  background: var(--sc-bg-alt);
}
.sub-side__access td {
  color: var(--sc-text);
  line-height: 1.6;
}
.sub-side__access tr:last-child th,
.sub-side__access tr:last-child td { border-bottom: 0; }
.sub-side__access-line {
  display: block;
}
.sub-side__access-line + .sub-side__access-line { margin-top: 2px; }

/* ───── 運営者ブロック ───── */
.sub-side__estate {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--sh-1);
}
.sub-side__estate-label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--sc-text-2);
}
.sub-side__estate-name {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sc-text);
}
.sub-side__estate-catch {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--sc-accent-d);
}
.sub-side__estate-exp {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--sc-text-2);
  line-height: 1.7;
}