/* 제주홈페이지제작 · 쇼핑몰 분양 소개 페이지
   색은 모두 아래 토큰에서만 정한다. 밝은 화면 = :root, 어두운 화면 = 아래 두 블록(같은 값).
   대상: 휴대폰으로 보는 50~60대 농장주 → 글자 크게(본문 17px), 버튼 크게(52px), 어려운 말 없이. */

:root {
  /* 바탕 */
  --b-bg: #fbf7f0;            /* 따뜻한 종이 */
  --b-paper: #ffffff;         /* 카드 */
  --b-tint: #fff1df;          /* 옅은 귤빛 띠 */
  --b-plan-bg: #eef4f3;       /* 평면도 구역(옅은 청사진) */
  --b-grid: rgba(13, 92, 99, 0.07);
  --b-glass: rgba(251, 247, 240, 0.94);

  /* 글자 */
  --b-ink: #23282c;           /* 현무암 (흰 바탕 14:1) */
  --b-ink-soft: #545b61;      /* 보조 (흰 바탕 6.9:1) */
  --b-line: #eadfcf;
  --b-line-strong: #cdb99c;

  /* 강조 */
  --b-gyul: #ff8c1a;          /* 행동 버튼 바탕 — 글자는 --b-on-gyul */
  --b-gyul-hover: #f57f0a;
  --b-on-gyul: #23282c;
  --b-gyul-ink: #b84300;      /* 귤색 글자 (흰 바탕 5.5:1) */
  --b-gyul-soft: #ffd9ae;     /* 형광펜 */
  --b-gyul-pale: #ffdcb3;     /* 첫 화면 큰 원 */
  --b-sea: #0d5c63;
  --b-sea-soft: #d5ebe8;
  --b-leaf: #2e6b3e;
  --b-stamp: #c2361b;         /* 붉은 도장 */
  --b-stamp-bg: rgba(255, 250, 243, 0.9);
  --b-badge-bg: #e6e5e1;      /* 준비 중 배지 */
  --b-badge-ink: #4a4f54;

  /* 어두운 띠 */
  --b-basalt: #23282c;
  --b-basalt-2: #2f3539;
  --b-on-dark: #f7f3ec;
  --b-on-dark-soft: #c9c3ba;
  --b-gyul-on-dark: #ffb469;

  /* 평면도 */
  --b-wall: #23282c;
  --b-room: #ffffff;
  --b-room-hot: #ffe2bf;
  --b-furniture: #b9c4c6;
  --b-plan-label: #23282c;
  --b-plan-sub: #545b61;

  /* 기기 */
  --b-device: #1b1f22;

  --b-shadow-card: 0 1px 2px rgba(36, 41, 45, 0.06), 0 8px 24px rgba(120, 72, 20, 0.07);
  --b-shadow-lift: 0 2px 4px rgba(36, 41, 45, 0.08), 0 18px 40px rgba(120, 72, 20, 0.14);
  --b-shadow-device: 0 0 0 1px rgba(0, 0, 0, 0.22), 0 22px 48px rgba(36, 41, 45, 0.30);
  --b-shadow-dock: 0 -6px 20px rgba(36, 41, 45, 0.12);
  --b-focus: #0d5c63;

  --b-font: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --b-font-display: "Black Han Sans", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

  --b-max: 1120px;
  --b-gutter: 16px;
  --b-pad-l: max(var(--b-gutter), env(safe-area-inset-left, 0px));
  --b-pad-r: max(var(--b-gutter), env(safe-area-inset-right, 0px));
  --b-sec-y: 64px;
  --b-dock-h: 76px;
  --b-radius: 18px;
  --b-radius-btn: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --b-bg: #15181a;
    --b-paper: #1d2124;
    --b-tint: #2a2118;
    --b-plan-bg: #172124;
    --b-grid: rgba(108, 195, 201, 0.07);
    --b-glass: rgba(21, 24, 26, 0.92);
    --b-ink: #f1ece4;
    --b-ink-soft: #b9b3aa;
    --b-line: #30363a;
    --b-line-strong: #4a5156;
    --b-gyul: #ff9a3c;
    --b-gyul-hover: #ffab5c;
    --b-on-gyul: #1a1d20;
    --b-gyul-ink: #ffb46e;
    --b-gyul-soft: #5a3a16;
    --b-gyul-pale: #3a2a18;
    --b-sea: #6cc3c9;
    --b-sea-soft: #173538;
    --b-leaf: #84c494;
    --b-stamp: #ff6b4f;
    --b-stamp-bg: rgba(29, 33, 36, 0.9);
    --b-badge-bg: #2c3135;
    --b-badge-ink: #c9cdd1;
    --b-basalt: #0e1012;
    --b-basalt-2: #1a1d20;
    --b-on-dark: #f1ece4;
    --b-on-dark-soft: #b9b3aa;
    --b-gyul-on-dark: #ffb469;
    --b-wall: #e9e3d9;
    --b-room: #1d2124;
    --b-room-hot: #4a3216;
    --b-furniture: #3d4a4d;
    --b-plan-label: #f1ece4;
    --b-plan-sub: #b9b3aa;
    --b-device: #000000;
    --b-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --b-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.4);
    --b-shadow-device: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 48px rgba(0, 0, 0, 0.55);
    --b-shadow-dock: 0 -6px 20px rgba(0, 0, 0, 0.45);
    --b-focus: #6cc3c9;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --b-bg: #15181a;
  --b-paper: #1d2124;
  --b-tint: #2a2118;
  --b-plan-bg: #172124;
  --b-grid: rgba(108, 195, 201, 0.07);
  --b-glass: rgba(21, 24, 26, 0.92);
  --b-ink: #f1ece4;
  --b-ink-soft: #b9b3aa;
  --b-line: #30363a;
  --b-line-strong: #4a5156;
  --b-gyul: #ff9a3c;
  --b-gyul-hover: #ffab5c;
  --b-on-gyul: #1a1d20;
  --b-gyul-ink: #ffb46e;
  --b-gyul-soft: #5a3a16;
  --b-gyul-pale: #3a2a18;
  --b-sea: #6cc3c9;
  --b-sea-soft: #173538;
  --b-leaf: #84c494;
  --b-stamp: #ff6b4f;
  --b-stamp-bg: rgba(29, 33, 36, 0.9);
  --b-badge-bg: #2c3135;
  --b-badge-ink: #c9cdd1;
  --b-basalt: #0e1012;
  --b-basalt-2: #1a1d20;
  --b-on-dark: #f1ece4;
  --b-on-dark-soft: #b9b3aa;
  --b-gyul-on-dark: #ffb469;
  --b-wall: #e9e3d9;
  --b-room: #1d2124;
  --b-room-hot: #4a3216;
  --b-furniture: #3d4a4d;
  --b-plan-label: #f1ece4;
  --b-plan-sub: #b9b3aa;
  --b-device: #000000;
  --b-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --b-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.4);
  --b-shadow-device: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 48px rgba(0, 0, 0, 0.55);
  --b-shadow-dock: 0 -6px 20px rgba(0, 0, 0, 0.45);
  --b-focus: #6cc3c9;
  color-scheme: dark;
}

/* ---------- 1. 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--b-bg);
  color: var(--b-ink);
  font-family: var(--b-font);
  font-size: 17px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--b-glass);
  z-index: 40;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--b-focus); outline-offset: 3px; border-radius: 6px; }
.b-skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--b-ink); color: var(--b-bg); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.b-skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.b-wrap { max-width: var(--b-max); margin-inline: auto; padding-left: var(--b-pad-l); padding-right: var(--b-pad-r); }
.b-sec { padding-block: var(--b-sec-y); }
.b-sec--tint { background: var(--b-tint); }
.b-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: var(--b-gyul-ink);
}
.b-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.b-h2 {
  font-family: var(--b-font-display); font-weight: 400;
  font-size: clamp(28px, 6.4vw, 42px); line-height: 1.25; letter-spacing: -0.005em;
  margin: 10px 0 12px; text-wrap: balance;
}
.b-lead { margin: 0; color: var(--b-ink-soft); max-width: 40em; }
.b-head { margin-bottom: 28px; }
.b-hl { background: linear-gradient(transparent 60%, var(--b-gyul-soft) 0); }
.b-ex {
  display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.6;
  color: var(--b-stamp); border: 1.5px solid var(--b-stamp);
}
.b-soon-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--b-badge-bg); color: var(--b-badge-ink); vertical-align: 2px; margin-left: 4px;
}

/* ---------- 2. 버튼 ---------- */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 22px; border-radius: var(--b-radius-btn);
  font-weight: 800; font-size: 17px; line-height: 1.3; text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.b-btn svg { width: 20px; height: 20px; flex: none; }
.b-btn--main { background: var(--b-gyul); color: var(--b-on-gyul); box-shadow: 0 6px 16px rgba(255, 140, 26, 0.28); }
.b-btn--main:hover { background: var(--b-gyul-hover); transform: translateY(-1px); }
.b-btn--line { background: var(--b-paper); color: var(--b-ink); border-color: var(--b-ink); }
.b-btn--line:hover { transform: translateY(-1px); box-shadow: var(--b-shadow-card); }
.b-btn--ghost { background: transparent; color: var(--b-on-dark); border-color: var(--b-on-dark-soft); }
.b-btn--ghost:hover { border-color: var(--b-on-dark); }
.b-btn--sm { min-height: 42px; padding: 8px 14px; font-size: 15px; border-radius: 12px; }

/* ---------- 3. 머리 띠 ---------- */
.b-top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: var(--b-glass); border-bottom: 1px solid var(--b-line);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.b-top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; }
.b-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--b-font-display); font-size: 21px; line-height: 1; }
.b-logo svg { width: 32px; height: 32px; flex: none; }
.lg-house { fill: none; stroke: var(--b-ink); stroke-width: 2.4; stroke-linejoin: round; }
.lg-fruit { fill: var(--b-gyul); }
.lg-leaf { fill: var(--b-leaf); }
.b-nav { display: none; }
.b-nav a { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--b-ink-soft); padding: 6px 4px; }
.b-nav a:hover { color: var(--b-ink); }
.b-top__call .b-num { display: none; }
@media (min-width: 560px) { .b-top__call .b-num { display: inline; } }
@media (min-width: 980px) { .b-nav { display: flex; gap: 18px; } }

/* ---------- 4. 첫 화면 ---------- */
.b-hero { position: relative; overflow: hidden; padding-block: 36px 60px; }
.b-hero::before {
  content: ""; position: absolute; z-index: 0; width: 560px; height: 560px; right: -200px; top: -150px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--b-gyul-pale), transparent 68%);
}
.b-hero__grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
.b-notice-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  border: 2px solid var(--b-ink); border-radius: 999px; background: var(--b-paper);
  font-weight: 800; font-size: 15px; line-height: 1.3;
}
.b-notice-tag b {
  display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--b-stamp); color: var(--b-stamp-bg); font-size: 14px;
}
.b-h1 {
  font-family: var(--b-font-display); font-weight: 400;
  font-size: clamp(38px, 10vw, 64px); line-height: 1.14; letter-spacing: -0.01em;
  margin: 18px 0 18px; text-wrap: balance;
}
.b-h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--b-gyul-soft) 0); }
.b-hero__sub { margin: 0; font-size: 18px; color: var(--b-ink-soft); max-width: 32em; }
.b-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.b-hint { margin: 12px 0 0; font-size: 15px; color: var(--b-ink-soft); }
.b-hint b { color: var(--b-ink); }
.b-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 700; color: var(--b-ink-soft); }
.b-chips li { display: inline-flex; align-items: center; gap: 6px; }
.b-chips li::before { content: "✓"; color: var(--b-leaf); font-weight: 900; }

.b-hero__art { position: relative; justify-self: center; width: min(320px, 82vw); }
.b-phone {
  position: relative; border-radius: 42px; padding: 10px; background: var(--b-device); box-shadow: var(--b-shadow-device);
}
.b-phone img { width: 100%; border-radius: 32px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; background: var(--b-tint); }
.b-stamp {
  position: absolute; z-index: 3; left: -26px; top: 34px; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  color: var(--b-stamp); background: var(--b-stamp-bg);
  border: 3px solid var(--b-stamp); box-shadow: inset 0 0 0 4px var(--b-stamp-bg), inset 0 0 0 6px var(--b-stamp);
  font-weight: 900; font-size: 15px; line-height: 1.15; transform: rotate(-12deg);
}
.b-stamp span { display: block; font-family: var(--b-font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.04em; }
@media (max-width: 480px) {
  .b-stamp { left: -6px; top: 16px; width: 92px; height: 92px; font-size: 13px; }
  .b-stamp span { font-size: 18px; }
}
.b-swap {
  margin: 18px auto 0; max-width: 300px; background: var(--b-paper); border: 1px solid var(--b-line);
  border-radius: 16px; padding: 12px 14px; box-shadow: var(--b-shadow-lift); font-size: 14px;
}
.b-swap strong { display: block; font-size: 14px; margin-bottom: 6px; }
.b-swap ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.b-swap li { padding: 3px 10px; border-radius: 999px; background: var(--b-tint); color: var(--b-gyul-ink); font-weight: 800; }
@media (min-width: 640px) {
  .b-swap { position: absolute; z-index: 3; right: -64px; bottom: 54px; margin: 0; width: 210px; }
}
@media (min-width: 900px) {
  .b-hero { padding-block: 56px 84px; }
  .b-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* ---------- 만드는 중 자리 ---------- */
.b-soon {
  border: 2px dashed var(--b-line-strong); border-radius: var(--b-radius); padding: 28px 20px; text-align: center;
  color: var(--b-ink-soft); font-weight: 700; background: repeating-linear-gradient(-45deg, transparent 0 12px, var(--b-tint) 12px 24px);
}

/* ---------- 5. 분양 개요 (공고) ---------- */
.b-ov {
  position: relative; background: var(--b-paper); border: 2px solid var(--b-ink); border-radius: 8px;
  box-shadow: 8px 8px 0 var(--b-ink); padding: 22px 20px 12px; max-width: 760px;
}
.b-ov__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 3px double var(--b-ink); }
.b-ov__title { margin: 0; min-width: 0; font-family: var(--b-font-display); font-weight: 400; font-size: clamp(21px, 5.6vw, 26px); line-height: 1.25; text-wrap: balance; }
.b-ov__seal {
  flex: none; display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; transform: rotate(6deg);
  border: 2.5px solid var(--b-stamp); color: var(--b-stamp); font-weight: 900; font-size: 15px; line-height: 1.1; text-align: center;
}
.b-ov table { width: 100%; border-collapse: collapse; }
.b-ov th, .b-ov td { padding: 13px 6px; border-bottom: 1px solid var(--b-line-strong); text-align: left; vertical-align: top; }
.b-ov tr:last-child th, .b-ov tr:last-child td { border-bottom: 0; }
.b-ov th { width: 34%; font-size: 15px; font-weight: 700; color: var(--b-ink-soft); }
.b-ov td { font-weight: 700; }
.b-ov td small { display: block; font-weight: 500; font-size: 14px; color: var(--b-ink-soft); }
.b-ov td a { color: var(--b-gyul-ink); }
.b-ov__foot { margin: 14px 0 0; font-size: 14px; color: var(--b-ink-soft); }

/* 비교 카드 */
.b-cmp { display: grid; gap: 16px; margin-top: 44px; }
.b-cmp__card {
  position: relative; background: var(--b-paper); border: 1px solid var(--b-line); border-radius: var(--b-radius);
  padding: 22px 20px; box-shadow: var(--b-shadow-card);
}
.b-cmp__card h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.35; }
.b-cmp__card > p { margin: 0 0 14px; color: var(--b-ink-soft); font-size: 15px; }
.b-cmp__card dl { margin: 0; display: grid; gap: 8px; }
.b-cmp__card dl div { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px dashed var(--b-line); }
.b-cmp__card dt { color: var(--b-ink-soft); font-size: 15px; }
.b-cmp__card dd { margin: 0; font-weight: 800; font-size: 15px; text-align: right; }
.b-mark { display: inline-block; width: 1.4em; text-align: center; font-weight: 900; }
.b-mark--o { color: var(--b-leaf); }
.b-mark--d { color: var(--b-gyul-ink); }
.b-mark--x { color: var(--b-stamp); }
.b-cmp__card--best { border: 2px solid var(--b-gyul); background: var(--b-tint); }
.b-cmp__card--best::after {
  content: "추천"; position: absolute; top: -13px; right: 16px; padding: 2px 12px; border-radius: 999px;
  background: var(--b-gyul); color: var(--b-on-gyul); font-weight: 900; font-size: 13px;
}
@media (min-width: 820px) { .b-cmp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-sub { margin: 52px 0 0; font-size: 21px; line-height: 1.4; text-wrap: balance; }
.b-sub + .b-cmp { margin-top: 20px; }

/* ---------- 6. 모델하우스 ---------- */
.b-model {
  background-color: var(--b-plan-bg);
  background-image: linear-gradient(var(--b-grid) 1px, transparent 1px), linear-gradient(90deg, var(--b-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.b-model__grid { display: grid; gap: 28px; align-items: start; }
.b-plan {
  margin: 0; background: var(--b-paper); border: 1px solid var(--b-line); border-radius: var(--b-radius);
  padding: 14px 10px 10px; box-shadow: var(--b-shadow-card);
}
.b-plan svg { display: block; width: 100%; height: auto; }
.b-plan figcaption { margin: 6px 4px 0; font-size: 14px; color: var(--b-ink-soft); }
.pl-wall { fill: none; stroke: var(--b-wall); stroke-width: 7; stroke-linecap: square; }
.pl-iwall { fill: none; stroke: var(--b-wall); stroke-width: 3.5; stroke-linecap: square; }
.pl-door { fill: none; stroke: var(--b-wall); stroke-width: 1.4; stroke-dasharray: 3 3; }
.pl-balc { fill: none; stroke: var(--b-wall); stroke-width: 2; stroke-dasharray: 7 5; }
.pl-furn { fill: none; stroke: var(--b-furniture); stroke-width: 2; }
.pl-room { cursor: pointer; }
.pl-room .pl-bg { fill: var(--b-room); transition: fill 0.2s ease; }
.pl-room:hover .pl-bg, .pl-room:focus .pl-bg, .pl-room.is-hot .pl-bg { fill: var(--b-room-hot); }
.pl-room:focus { outline: none; }
.pl-room:focus-visible .pl-bg { stroke: var(--b-focus); stroke-width: 4; }
.pl-walls { pointer-events: none; }
.pl-name { fill: var(--b-plan-label); font-family: var(--b-font); font-weight: 800; font-size: 22px; }
.pl-sub { fill: var(--b-plan-sub); font-family: var(--b-font); font-weight: 700; font-size: 16px; }
.pl-balc-name { fill: var(--b-gyul-ink); font-family: var(--b-font); font-weight: 800; font-size: 15px; }
.pl-arrow { fill: var(--b-stamp); }
.pl-in { fill: var(--b-stamp); font-family: var(--b-font); font-weight: 900; font-size: 15px; }
/* 휴대폰에서는 평면도가 작아지므로 방 이름을 키우고 가구는 흐리게 */
@media (max-width: 600px) {
  .pl-name { font-size: 28px; }
  .pl-sub { font-size: 21px; }
  .pl-balc-name { font-size: 19px; }
  .pl-in { font-size: 20px; }
  .pl-furn { opacity: 0.55; }
}

.b-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.b-room {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start;
  background: var(--b-paper); border: 1px solid var(--b-line); border-radius: var(--b-radius); padding: 14px;
  box-shadow: var(--b-shadow-card); scroll-margin-top: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.b-room.is-hot { border-color: var(--b-gyul); box-shadow: 0 0 0 3px var(--b-gyul-soft), var(--b-shadow-card); }
.b-room__shot { margin: 0; border-radius: 16px; padding: 4px; background: var(--b-device); }
.b-room__shot img { width: 100%; border-radius: 12px; aspect-ratio: 390 / 600; object-fit: cover; object-position: top; background: var(--b-tint); }
.b-room__icon {
  margin: 0; border-radius: 16px; aspect-ratio: 104 / 164; display: grid; place-items: center;
  background: var(--b-tint); border: 2px dashed var(--b-line-strong); color: var(--b-gyul-ink);
}
.b-room__icon svg { width: 46px; height: 46px; }
.b-room__tag {
  display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 13px; font-weight: 900;
  background: var(--b-ink); color: var(--b-bg); letter-spacing: 0.02em;
}
.b-room h3 { margin: 8px 0 4px; font-size: 19px; line-height: 1.35; }
.b-room p { margin: 0; font-size: 15px; color: var(--b-ink-soft); }
.b-model__note { margin: 18px 0 0; font-size: 14px; color: var(--b-ink-soft); }
.b-model__cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (min-width: 940px) {
  .b-model__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 36px; }
  .b-plan { position: sticky; top: 92px; }
}

/* 평면 타입 (테마) */
.b-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin: 0; padding: 0; list-style: none; }
.b-type figure { margin: 0; }
.b-type__phone { border-radius: 24px; padding: 6px; background: var(--b-device); box-shadow: var(--b-shadow-card); }
.b-type__phone img { width: 100%; border-radius: 18px; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; background: var(--b-tint); }
.b-type figcaption { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.b-type figcaption b { font-size: 18px; }
.b-type figcaption span { font-size: 14px; color: var(--b-ink-soft); }
.b-type__code {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px;
  font-family: var(--b-font-display); font-size: 17px; color: var(--b-bg); background: var(--b-ink);
}
@media (min-width: 820px) { .b-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 7. 평형 · 분양가 ---------- */
.b-plans { display: grid; gap: 18px; }
.b-plancard {
  position: relative; display: flex; flex-direction: column; background: var(--b-paper); border: 1px solid var(--b-line);
  border-radius: var(--b-radius); padding: 24px 20px 20px; box-shadow: var(--b-shadow-card);
}
.b-plancard--pick { border: 2px solid var(--b-gyul); box-shadow: var(--b-shadow-lift); }
.b-plancard--pick::after {
  content: "추천"; position: absolute; top: -13px; left: 20px; padding: 2px 12px; border-radius: 999px;
  background: var(--b-gyul); color: var(--b-on-gyul); font-weight: 900; font-size: 13px;
}
.b-plancard__size { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.b-plancard__size b { font-family: var(--b-font-display); font-weight: 400; font-size: 30px; line-height: 1.1; }
.b-plancard__size span { font-weight: 800; color: var(--b-gyul-ink); }
.b-plancard__what { margin: 6px 0 16px; color: var(--b-ink-soft); font-size: 15px; }
.b-price { padding: 14px 0; border-block: 1px dashed var(--b-line-strong); }
.b-price small { display: block; font-size: 13px; font-weight: 700; color: var(--b-ink-soft); }
.b-price strong { font-size: 26px; line-height: 1.3; }
.b-price em { display: block; font-style: normal; font-size: 13px; color: var(--b-ink-soft); }
.b-feat { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.b-feat li { display: flex; gap: 8px; }
.b-feat li::before { content: "✓"; flex: none; color: var(--b-leaf); font-weight: 900; }
.b-feat li.plus::before { content: "+"; color: var(--b-gyul-ink); }
.b-feat li.later::before { content: "…"; color: var(--b-badge-ink); }
@media (min-width: 900px) { .b-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }

.b-costs {
  margin-top: 28px; display: grid; gap: 0; background: var(--b-paper); border: 1px solid var(--b-line);
  border-radius: var(--b-radius); overflow: hidden;
}
.b-costs__title { margin: 0; padding: 14px 18px; font-size: 16px; background: var(--b-ink); color: var(--b-bg); }
.b-costs dl { margin: 0; }
.b-costs dl div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 18px; border-top: 1px solid var(--b-line); }
.b-costs dt { font-weight: 800; }
.b-costs dd { margin: 0; color: var(--b-ink-soft); font-size: 15px; }
@media (min-width: 720px) { .b-costs dl div { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; } }

.b-opts { margin-top: 36px; }
.b-opts h3 { margin: 0 0 6px; font-size: 21px; }
.b-opts > p { margin: 0 0 16px; color: var(--b-ink-soft); font-size: 15px; }
.b-opts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.b-opts li {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: var(--b-paper); border: 1px solid var(--b-line);
}
.b-opts li b { display: block; }
.b-opts li span { display: block; color: var(--b-ink-soft); font-size: 15px; }
.b-opts__ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--b-tint); color: var(--b-gyul-ink); }
.b-opts__ic svg { width: 22px; height: 22px; }
@media (min-width: 760px) { .b-opts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 8. 입주 절차 ---------- */
.b-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.b-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; }
.b-step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--b-paper); border: 3px solid var(--b-ink); font-family: var(--b-font-display); font-size: 22px; z-index: 1;
}
.b-step::after { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 3px; background: var(--b-line-strong); }
.b-step:last-child::after { display: none; }
.b-step--open::before { background: var(--b-gyul); border-color: var(--b-gyul); color: var(--b-on-gyul); }
.b-step h3 { margin: 10px 0 4px; font-size: 20px; line-height: 1.35; }
.b-step h3 small { font-size: 14px; color: var(--b-gyul-ink); font-weight: 800; margin-left: 6px; }
.b-step p { margin: 0; color: var(--b-ink-soft); }
.b-after {
  margin-top: 8px; padding: 18px 20px; border-radius: var(--b-radius); background: var(--b-paper); border: 2px solid var(--b-ink);
}
.b-after b { display: block; font-size: 18px; margin-bottom: 4px; }
.b-after p { margin: 0; color: var(--b-ink-soft); }
@media (min-width: 900px) {
  .b-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 28px; }
  .b-step { grid-template-columns: 1fr; gap: 10px; padding-bottom: 0; }
  .b-step::after { display: none; }
}

/* ---------- 9. 자주 묻는 질문 ---------- */
.b-faq { display: grid; gap: 10px; max-width: 820px; }
.b-faq details { background: var(--b-paper); border: 1px solid var(--b-line); border-radius: 14px; padding: 0 18px; }
.b-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 0; font-weight: 800; font-size: 17px;
}
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--b-gyul-ink); transition: transform 0.2s ease; }
.b-faq details[open] summary::after { transform: rotate(45deg); }
.b-faq details p { margin: 0 0 16px; color: var(--b-ink-soft); }

/* ---------- 10. 상담 안내 ---------- */
.b-cta { background: var(--b-basalt); color: var(--b-on-dark); }
.b-cta .b-eyebrow { color: var(--b-gyul-on-dark); }
.b-cta .b-lead { color: var(--b-on-dark-soft); }
.b-cta__box { display: grid; gap: 28px; align-items: center; }
.b-cta__num { margin: 0; font-family: var(--b-font-display); font-weight: 400; font-size: clamp(34px, 9vw, 54px); letter-spacing: 0.02em; color: var(--b-gyul-on-dark); user-select: all; }
.b-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.b-cta__hours { margin: 12px 0 0; font-size: 14px; color: var(--b-on-dark-soft); }
.b-copied { min-height: 1.5em; margin: 8px 0 0; font-size: 14px; color: var(--b-gyul-on-dark); }
@media (min-width: 900px) { .b-cta__box { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }

/* ---------- 11. 꼬리말 ---------- */
.b-foot { background: var(--b-basalt-2); color: var(--b-on-dark-soft); font-size: 14px; padding-block: 32px; }
.b-foot p { margin: 0 0 6px; }
.b-foot b { color: var(--b-on-dark); }

/* ---------- 12. 휴대폰 아래 고정 띠 ---------- */
.b-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px;
  padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: var(--b-glass); border-top: 1px solid var(--b-line); box-shadow: var(--b-shadow-dock);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.b-dock .b-btn { min-height: 54px; padding: 8px 10px; font-size: 16px; }
body.has-dock { padding-bottom: calc(var(--b-dock-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .b-dock { display: none; }
  body.has-dock { padding-bottom: 0; }
}

@media (min-width: 900px) {
  :root { --b-gutter: 28px; --b-sec-y: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 13. 크게 보기 (2026-10-30 사장님 요청: "전체적으로 크게") ----------
   위에서 정한 크기를 여기서 한 번에 키운다(아래 값이 위의 값을 덮는다).
   휴대폰은 글자·버튼을 한 단계씩 키우고, 큰 화면(PC)은 페이지 전체를 확대(zoom)해 넓은 화면을 채운다. */
:root { --b-dock-h: 84px; }
html { scroll-padding-top: 96px; }
body { font-size: 18px; line-height: 1.75; }
.b-eyebrow { font-size: 16px; }
.b-h2 { font-size: clamp(32px, 7.6vw, 52px); }
.b-lead { font-size: 19px; }
.b-head { margin-bottom: 32px; }
.b-ex, .b-soon-badge { font-size: 14px; padding: 2px 10px; }

.b-btn { min-height: 58px; padding: 14px 26px; font-size: 19px; border-radius: 16px; }
.b-btn svg { width: 22px; height: 22px; }
.b-btn--sm { min-height: 48px; padding: 10px 16px; font-size: 17px; }

.b-top__in { min-height: 72px; }
.b-logo { font-size: 24px; }
.b-logo svg { width: 36px; height: 36px; }
.b-nav a { font-size: 17px; }

.b-notice-tag { font-size: 17px; padding: 7px 16px 7px 7px; }
.b-notice-tag b { font-size: 16px; padding: 3px 12px; }
.b-h1 { font-size: clamp(40px, 10.5vw, 80px); }
.b-hero__sub { font-size: 21px; }
.b-hint { font-size: 17px; }
.b-chips { font-size: 17px; }
.b-hero__art { width: min(380px, 86vw); }
.b-stamp { left: -34px; width: 128px; height: 128px; font-size: 17px; }
.b-stamp span { font-size: 26px; }
.b-swap { max-width: 340px; font-size: 16px; }
.b-swap strong { font-size: 16px; }

.b-ov { max-width: 880px; padding: 26px 24px 14px; }
.b-ov__title { font-size: clamp(24px, 6.2vw, 32px); }
.b-ov__seal { width: 62px; height: 62px; font-size: 17px; }
.b-ov th { font-size: 17px; }
.b-ov td { font-size: 19px; }
.b-ov td small { font-size: 16px; }
.b-ov__foot { font-size: 16px; }

.b-cmp__card { padding: 26px 24px; }
.b-cmp__card h3 { font-size: 24px; }
.b-cmp__card > p, .b-cmp__card dt, .b-cmp__card dd { font-size: 17px; }
.b-cmp__card--best::after, .b-plancard--pick::after { top: -15px; padding: 3px 14px; font-size: 15px; }
.b-sub { font-size: 26px; }

.b-plan figcaption { font-size: 16px; }
.b-room { grid-template-columns: 132px minmax(0, 1fr); gap: 20px; padding: 16px; }
.b-room__icon svg { width: 56px; height: 56px; }
.b-room__tag { padding: 3px 12px; font-size: 15px; }
.b-room h3 { font-size: 23px; }
.b-room p { font-size: 17px; }
.b-model__note { font-size: 16px; }

.b-type figcaption b { font-size: 22px; }
.b-type figcaption span { font-size: 16px; }
.b-type__code { min-width: 36px; height: 36px; font-size: 20px; }

.b-plancard { padding: 28px 24px 24px; }
.b-plancard__size b { font-size: 38px; }
.b-plancard__size span { font-size: 20px; }
.b-plancard__what { font-size: 17px; }
.b-price small, .b-price em { font-size: 15px; }
.b-price strong { font-size: 34px; }
.b-feat { gap: 10px; font-size: 17px; }

.b-costs__title { padding: 16px 22px; font-size: 20px; }
.b-costs dl div { padding: 16px 22px; }
.b-costs dt { font-size: 18px; }
.b-costs dd { font-size: 17px; }

.b-opts h3 { font-size: 26px; }
.b-opts > p, .b-opts li span { font-size: 17px; }
.b-opts li { gap: 14px; padding: 16px 18px; }
.b-opts__ic { width: 48px; height: 48px; border-radius: 12px; }
.b-opts__ic svg { width: 26px; height: 26px; }

.b-step { grid-template-columns: 62px minmax(0, 1fr); gap: 18px; }
.b-step::before { width: 62px; height: 62px; font-size: 27px; }
.b-step::after { left: 30px; top: 62px; }
.b-step h3 { font-size: 24px; }
.b-step h3 small { font-size: 16px; }
.b-after { padding: 22px 24px; }
.b-after b { font-size: 22px; }

.b-faq { max-width: 960px; gap: 12px; }
.b-faq details { padding: 0 22px; }
.b-faq summary { padding: 20px 0; font-size: 20px; }
.b-faq summary::after { font-size: 28px; }

.b-cta__num { font-size: clamp(34px, 9.4vw, 60px); white-space: nowrap; }
.b-cta__hours, .b-copied { font-size: 16px; }
.b-foot { font-size: 16px; }
.b-dock .b-btn { min-height: 60px; font-size: 18px; }

.b-top__call { white-space: nowrap; }

/* 모델하우스 실제 화면 (방을 누르면 휴대폰 안에 진짜 페이지가 열림) */
.b-live { display: grid; gap: 16px; align-content: start; min-width: 0; scroll-margin-top: 92px; }
.b-live__head {
  background: var(--b-paper); border: 1px solid var(--b-line); border-radius: var(--b-radius);
  padding: 18px 20px; box-shadow: var(--b-shadow-card);
}
.b-live__now { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; color: var(--b-ink-soft); }
.b-live__title { margin: 8px 0 4px; font-size: 26px; line-height: 1.3; }
.b-live__desc { margin: 0; font-size: 17px; color: var(--b-ink-soft); }
.b-live__phone {
  justify-self: center; width: min(400px, 100%); padding: 10px; border-radius: 44px;
  background: var(--b-device); box-shadow: var(--b-shadow-device);
}
.b-live__screen {
  position: relative; height: min(760px, 78vh); min-height: 520px; border-radius: 34px; overflow: hidden; background: var(--b-paper);
}
.b-live__screen iframe { display: block; width: 100%; height: 100%; border: 0; background: #ffffff; }
.b-live__screen.is-loading::after {
  content: "실제 화면을 여는 중…"; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; color: var(--b-ink-soft); background: var(--b-paper);
}
.b-live__soon {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 28px; text-align: center; background: var(--b-tint); color: var(--b-ink);
}
.b-live__soon[hidden] { display: none; }
.b-live__soon svg { width: 56px; height: 56px; color: var(--b-gyul-ink); }
.b-live__soon b { font-size: 22px; }
.b-live__soon p { margin: 0; font-size: 16px; color: var(--b-ink-soft); }
.b-live__open { justify-self: center; }
.b-live__tabs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.b-live__tab {
  width: 100%; min-height: 64px; display: grid; gap: 2px; justify-items: start; text-align: left; cursor: pointer;
  padding: 10px 14px; border-radius: 14px; border: 2px solid var(--b-line); background: var(--b-paper); color: var(--b-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.b-live__tab b { font-size: 18px; line-height: 1.3; }
.b-live__tab span { font-size: 15px; color: var(--b-ink-soft); line-height: 1.3; }
.b-live__tab:hover { border-color: var(--b-gyul); }
.b-live__tab[aria-pressed="true"] { border-color: var(--b-gyul); background: var(--b-tint); }
.b-live__tab[aria-pressed="true"] b { color: var(--b-gyul-ink); }
@media (min-width: 600px) { .b-live__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .b-live__screen { height: 70vh; min-height: 480px; border-radius: 30px; } .b-live__phone { border-radius: 40px; } }

/* 좁은 휴대폰에서 넘치는 것만 조금 되돌림 */
@media (max-width: 480px) {
  .b-stamp { left: -6px; top: 16px; width: 100px; height: 100px; font-size: 14px; }
  .b-stamp span { font-size: 20px; }
  .b-room { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .b-btn { padding: 14px 20px; }
  .b-btn--sm { padding: 8px 12px; font-size: 16px; }
  .b-logo { gap: 8px; font-size: 20px; }
  .b-logo svg { width: 30px; height: 30px; }
}
/* 메뉴가 보이기 시작하는 중간 폭(확대 전)에서는 머리 띠가 넘치지 않게 메뉴 글자를 줄이고 번호는 숨김 */
@media (min-width: 980px) and (max-width: 1199px) {
  .b-nav { gap: 12px; }
  .b-nav a { font-size: 15px; }
  .b-top__call .b-num { display: none; }
}
@media (min-width: 900px) {
  :root { --b-max: 1240px; --b-gutter: 32px; --b-sec-y: 112px; }
  .b-hero__art { width: 400px; }
  .b-swap { right: -80px; width: 250px; }
  .b-plan { top: 104px; }
}
/* 큰 화면(PC)은 페이지 전체를 확대 — 글자·사진·버튼·평면도가 함께 커진다 */
@media (min-width: 1200px) { body { zoom: 1.12; } }
@media (min-width: 1500px) { body { zoom: 1.25; } }
@media (min-width: 1800px) { body { zoom: 1.4; } }

/* ---------- 14. 업종별 안내 글 (2026-10-31, 검색·AI 답변용 안내 페이지와 첫 화면의 안내 카드) ----------
   안내 페이지(homepage/, webpage/ … pension-homepage/)는 위의 머리 띠·상담·꼬리말을 그대로 쓰고 본문만 여기서 꾸민다. */
.g-hero { padding-block: 28px 4px; }
.g-crumb ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; color: var(--b-ink-soft); }
.g-crumb li + li::before { content: "›"; margin-right: 8px; color: var(--b-line-strong); }
.g-crumb a { color: var(--b-ink-soft); }
.g-h1 {
  font-family: var(--b-font-display); font-weight: 400; font-size: clamp(34px, 8.6vw, 62px);
  line-height: 1.2; letter-spacing: -0.005em; margin: 12px 0 16px; text-wrap: balance;
}
.g-lead { margin: 0; font-size: 20px; color: var(--b-ink-soft); max-width: 38em; }
.g-answer {
  margin-top: 26px; max-width: 880px; background: var(--b-paper); border: 2px solid var(--b-ink); border-radius: 8px;
  box-shadow: 6px 6px 0 var(--b-ink); padding: 20px 22px;
}
.g-answer__label {
  display: inline-block; margin: 0; padding: 0 12px; border: 2px solid var(--b-stamp); border-radius: 8px;
  color: var(--b-stamp); font-weight: 900; font-size: 16px; transform: rotate(-2deg);
}
.g-answer__text { margin: 12px 0 0; font-size: 19px; font-weight: 500; }
.g-meta { margin: 18px 0 0; font-size: 15px; color: var(--b-ink-soft); }
.g-body { padding-bottom: 56px; }
.g-sec { padding-top: 52px; max-width: 900px; scroll-margin-top: 96px; }
.g-sec h2 {
  font-family: var(--b-font-display); font-weight: 400; font-size: clamp(28px, 6.8vw, 42px);
  line-height: 1.25; margin: 0 0 16px; text-wrap: balance;
}
.g-sec p { margin: 0 0 16px; }
.g-sec ul, .g-sec ol { margin: 0 0 16px; padding-left: 1.3em; display: grid; gap: 10px; }
.g-note { font-size: 16px; color: var(--b-ink-soft); }
.g-table { overflow-x: auto; margin: 4px 0 16px; border: 1px solid var(--b-line); border-radius: 14px; background: var(--b-paper); }
.g-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 17px; }
.g-table th, .g-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--b-line); }
.g-table thead th { background: var(--b-ink); color: var(--b-bg); font-size: 16px; font-weight: 800; }
.g-table tbody th { font-weight: 800; white-space: nowrap; }
.g-table tr:last-child th, .g-table tr:last-child td { border-bottom: 0; }
.g-sec .g-check { list-style: none; padding-left: 0; }
.g-check li { display: flex; gap: 10px; }
.g-check li::before { content: "✓"; flex: none; color: var(--b-leaf); font-weight: 900; }
/* 업종 홈페이지 평면도(예시) — 방 하나가 쪽 하나 */
.g-sec .g-plan { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 18px; }
.g-plan li { background: var(--b-room); border: 2px solid var(--b-wall); border-radius: 6px; padding: 12px 14px; min-width: 0; }
.g-plan li b { display: block; font-size: 18px; line-height: 1.35; }
.g-plan li span { display: block; font-size: 15px; color: var(--b-plan-sub); line-height: 1.5; }
.g-plan li.is-wide { grid-column: 1 / -1; background: var(--b-room-hot); }
@media (min-width: 760px) { .g-sec .g-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 18px; }
.g-shots figure { margin: 0; min-width: 0; }
.g-shots img {
  width: 100%; aspect-ratio: 780 / 1200; object-fit: cover; object-position: top;
  border: 6px solid var(--b-device); border-radius: 22px; box-shadow: var(--b-shadow-card); background: var(--b-paper);
}
.g-shots figcaption { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--b-ink-soft); text-align: center; }
@media (min-width: 760px) { .g-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-callout { background: var(--b-tint); border-left: 5px solid var(--b-gyul); border-radius: 12px; padding: 16px 20px; margin: 4px 0 16px; }
.g-callout b { display: block; margin-bottom: 4px; font-size: 18px; }
.g-callout p { margin: 0; }
.g-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; }
/* 다른 안내로 가는 카드 (안내 페이지 아래 · 첫 화면 '업종별 안내') */
.g-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.g-card { min-width: 0; }
.g-card a {
  display: grid; gap: 4px; align-content: start; height: 100%; padding: 20px 22px; border-radius: var(--b-radius);
  background: var(--b-paper); border: 1px solid var(--b-line); box-shadow: var(--b-shadow-card); text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.g-card a:hover { transform: translateY(-2px); border-color: var(--b-gyul); }
.g-card__tag { font-size: 15px; font-weight: 800; color: var(--b-gyul-ink); }
.g-card__title { font-size: 22px; line-height: 1.35; text-wrap: balance; }
.g-card__desc { font-size: 16px; color: var(--b-ink-soft); }
@media (min-width: 700px) { .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .g-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-foot__links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--b-basalt); }
.b-foot__links a { color: var(--b-on-dark); }
.g-404 { padding-block: 56px 80px; }
/* 첫 화면 '업종별 안내'는 7칸이라, 넓은 화면에서 첫 칸을 두 칸 너비로 해 빈자리 없이 채운다(2열: 1+2+2+2, 4열: 2+1+1 / 1+1+1+1) */
@media (min-width: 700px) { .g-cards--hub > .g-card:first-child { grid-column: span 2; } }
@media (min-width: 1000px) { .g-cards--hub { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 휴대폰: 안내 페이지의 표를 줄마다 카드로 쌓는다(옆으로 밀지 않아도 모든 칸이 보이게). 칸 이름은 bunyang.js 5절이 data-label로 붙인다 */
@media (max-width: 599px) {
  .g-table { overflow: visible; border: 0; border-radius: 0; background: none; }
  .g-table table { min-width: 0; }
  .g-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .g-table tbody, .g-table tr { display: block; }
  .g-table tr { background: var(--b-paper); border: 1px solid var(--b-line); border-radius: 14px; padding: 8px 0; margin-bottom: 10px; box-shadow: var(--b-shadow-card); }
  .g-table tbody th, .g-table td { display: block; padding: 4px 16px; border: 0; white-space: normal; }
  .g-table tbody th { font-size: 19px; padding-top: 8px; }
  .g-table td[data-label]::before { content: attr(data-label); display: block; font-size: 14px; font-weight: 800; color: var(--b-gyul-ink); }
}