/* =====================================================================
   ハイライト式の部品（ひな形） ― 小部屋（room/style.css）
   HERO担当。読み込む順：tokens.css → base.css → この style.css
   - 形は base.css のクラスを使う（.btn-icon・.shortcuts・.shortcut・.sub-title・.card・.card--soft・.card-title）。
     ここに書くのは小部屋の枠と並べ方だけ。クラスの頭は room-。値は tokens.css の変数だけ。
   - 中の slot（room-gallery・room-plans・room-faq・line-cta）の中身は、ほかの担当の部品が入れる。
   - 説明は README.md、決まりは design.md「小部屋の開き方」。
   ===================================================================== */

/* ---------- 1. 枠（<dialog data-room>）：画面いっぱい。後ろを暗くする地（PC）とシートを中に持つ ---------- */
.room {
  position: fixed;
  inset: 0;
  z-index: var(--z-room);          /* <dialog> を知らない古いブラウザのとき（showModal なら一番上に出る） */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--color-text);
}
.room:not([open]) { display: none; }
.room[open] { display: block; }
.room::backdrop { background: transparent; }   /* 暗くするのは中の .room-scrim（PC）。丸と一緒に広がる */

/* 開いている間は、後ろのページをスクロールさせない */
html.room-open { overflow: hidden; }

/* ---------- 2. 丸がふくらむ・縮む（script が --room-x・--room-y・--room-r を入れる） ---------- */
/* 押した丸の位置と大きさから、clip-path の円で広げる（--dur-slow・--ease-out）。閉じるときは丸に戻る（--dur-close・--ease-in-out） */
.room[data-anim="grow"],
.room[data-anim="shrink"] {
  clip-path: circle(var(--room-r, 0px) at var(--room-x, 50%) var(--room-y, 50%));
}
.room[data-anim="grow"] { transition: clip-path var(--dur-slow) var(--ease-out); }
.room[data-anim="shrink"] { transition: clip-path var(--dur-close) var(--ease-in-out); }
/* 押した丸が画面の外にあるとき：薄く出る・薄く消える（--dur-base） */
.room[data-anim="fade"] {
  opacity: var(--room-o, 1);
  transition: opacity var(--dur-base) var(--ease-in-out);
}
/* 広がり終わったら、中身が下から少しだけ（8px）浮かびながら出る（--dur-base） */
.room-body {
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.room[data-state="opening"] .room-body {
  opacity: 0;
  transform: translateY(var(--space-2));
  pointer-events: none;            /* 見えていない中身を、続けて押しても反応しない */
}
.room[data-guard] .room-body { pointer-events: none; }   /* 開いた直後（丸を続けて押した2回目が中身に当たらない） */
.room[data-state="closing"] { pointer-events: none; }

/* ---------- 3. シート（iPhone は画面いっぱい。中がスクロールし、上の帯は残る） ---------- */
.room-scrim { display: none; }
.room-sheet {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;    /* 中のスクロールを後ろの画面へ伝えない */
  background: var(--color-bg);
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + var(--space-4)); /* 近道で移った見出しが帯に隠れない */
}

/* ---------- 4. 上の帯：ページの上の帯と同じ形・同じ高さ（--nav-h）。中をスクロールしても上に残る ---------- */
/* iPhone：1段目（48px）＝ジャンル名・閉じる、2段目（44px）＝近道 */
.room-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: calc(var(--nav-h) - var(--tap)) var(--tap);
  grid-template-areas:
    "name  close"
    "short short";
  align-items: center;
  padding:
    env(safe-area-inset-top, 0px)
    max(var(--gutter), env(safe-area-inset-right, 0px))
    0
    max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border);   /* 下の線（帯の外に引くので、帯の高さは変わらない） */
}
.room-name {
  grid-area: name;
  min-width: 0;
  font-size: var(--fs-md);         /* 明朝（h2）・--fs-md */
  line-height: var(--lh-tight);
}
/* 開いたときにフォーカスを置く所（押すものではない。Tab で × へ）。URL・履歴から開いたときは線を出さない */
.room[data-quiet-focus] .room-name:focus { outline: none; }
.room-close {
  grid-area: close;
  margin-right: calc((var(--tap) - var(--icon)) / -2);   /* × の右の端を、左右の余白の線にそろえる */
}
.room-shortcuts {
  grid-area: short;
  align-self: stretch;
}
.room-shortcuts .shortcut { min-width: var(--tap); }   /* 2文字の近道（料金・相談）も押せる幅を 44px 以上に */

/* ---------- 5. 中身：ひとこと → 写真 →（注意の囲み）→ 料金 → よくある質問（roomFaq のジャンル）→ 相談 ---------- */
.room-body {
  display: grid;
  gap: var(--space-7);             /* まとまりの間 48px */
  padding: var(--space-5) 0 calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}
.room-top,
.room-rest {
  display: grid;
  gap: var(--space-7);
  min-width: 0;
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left, 0px))
    max(var(--gutter), env(safe-area-inset-right, 0px));
}
/* 写真（room-gallery）は左右の余白なし（画面の端まで。文字の余白は写真担当の部品が付ける） */
.room-body > [data-slot="room-gallery"] { min-width: 0; }
/* 中身がまだ入っていない slot は場所を取らない（間があかない・枠は崩れない） */
.room-body [data-slot]:empty { display: none; }
/* 相談（line-cta）も1つのまとまり。間は上の --space-7 にそろえる（base.css の --space-6 を重ねない） */
.room-rest > [data-slot="line-cta"]:not(:empty) { margin-top: 0; }

.room-lead { line-height: var(--lh-body); }   /* ひとこと：本文の字（--fs-base） */

/* 注意の囲み（script.js の TEXT.care。写真のすぐ後・料金の前に置く案内の囲み .card .card--soft） */
.room-care-list {
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.room-care-list > li {
  position: relative;
  padding-left: var(--space-4);
}
.room-care-list > li::before {   /* 小さな輪の印（.sec-en の輪と同じ形） */
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--fs-sm) * var(--lh-snug) / 2 - 4px);
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
}

/* 料金・よくある質問：見出し（.sub-title）＋ slot */
.room-sec {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

/* ---------- 6. PC・タブレット（768px〜）：帯は1段（ジャンル名・近道・閉じる） ---------- */
@media (min-width: 768px) {
  .room-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: var(--nav-h);
    grid-template-areas: "name short close";
    column-gap: var(--space-4);
  }
  .room-shortcuts { justify-self: end; }
  .room-body {
    width: min(100%, calc(var(--w-main) + var(--gutter) * 2));
    margin-inline: auto;
  }
}

/* ---------- 7. PC（1024px〜）：中央に浮いたシート。左に大きな写真（スクロールしても残る）、右に料金・質問・相談 ---------- */
@media (min-width: 1024px) {
  .room-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
  }
  .room-sheet {
    inset: var(--space-7) 0;
    width: min(var(--w-room), calc(100% - var(--gutter) * 2));
    margin-inline: auto;
    border: 1px solid var(--color-border);   /* ダークでは影が見えにくいので、ふちの線でも分ける */
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
    scroll-padding-top: calc(var(--nav-h) + var(--space-4));
  }
  .room-bar {
    padding-inline: var(--space-6);
  }
  .room-body {
    width: auto;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "photo top"
      "photo rest";
    align-items: start;
    column-gap: var(--space-6);
    row-gap: var(--space-7);
    padding: var(--space-6);
  }
  .room-top { grid-area: top; padding-inline: 0; }
  .room-rest { grid-area: rest; padding-inline: 0; }
  /* 写真は左の列で止まる。写真の部品が画面より高いときは、下の端で止まる（script が --room-stick を入れる） */
  .room-body > [data-slot="room-gallery"] {
    grid-area: photo;
    position: sticky;
    top: var(--room-stick, calc(var(--nav-h) + var(--space-6)));
  }
}