@charset "UTF-8";
/*
 * /brb/ 바라봄소개 hub — owner-confirmed B-02F (2026-09-15).
 * At 390 every value is the B-02F artboard's; from 834 the same layout is only scaled.
 * Palette: paper #FBF9F5 · ink #303432 · gold text #816945 · deep green #0B3328.
 */
.page-brb {
  --about-paper: #fbf9f5;
  --about-ink: #303432;
  --about-gold: #816945;
  --about-green: #0b3328;
  --about-serif: "Noto Serif KR", var(--brb-font-display, serif);
  --about-sans: var(--brb-font-body, Pretendard, "Noto Sans KR", sans-serif);
  display: block;
  background: var(--about-paper);
  color: var(--about-ink);
  font-family: var(--about-sans);
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.page-brb *, .page-brb *::before, .page-brb *::after { box-sizing: border-box; }
.page-brb a { color: inherit; text-decoration: none; }
.page-brb a:focus-visible { outline: 3px solid var(--about-green); outline-offset: 3px; }
.page-brb img { display: block; max-width: 100%; }
.page-brb p, .page-brb h1, .page-brb figure { margin: 0; }

/* --- hero: full width, title on the photo --------------------------------- */
.page-brb .brb-about-hero { position: relative; height: 350px; overflow: hidden; background: var(--about-green); }
.page-brb .brb-about-hero-image { width: 100%; height: 350px; object-fit: cover; object-position: 50% 56%; }
.page-brb .brb-about-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 36, 28, 0.14) 0%, rgba(7, 36, 28, 0) 24%, rgba(7, 36, 28, 0.16) 48%, rgba(7, 36, 28, 0.8) 100%); }
.page-brb .brb-about-hero-copy { position: absolute; left: 22px; right: 22px; bottom: 26px; }
.page-brb .brb-about-eyebrow { color: #e8d5ad; font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-shadow: 0 1px 10px rgba(7, 36, 28, 0.6); }
.page-brb .brb-about-hero h1 { margin-top: 10px; color: #fff; font-family: var(--about-serif); font-size: 40px; font-weight: 600; line-height: 1.18; letter-spacing: -0.035em; text-shadow: 0 1px 24px rgba(7, 36, 28, 0.34); }

/* --- intro ---------------------------------------------------------------- */
.page-brb .brb-about-wrap { padding-inline: 22px; }
.page-brb .brb-about-lead-wrap { padding-top: 26px; }
.page-brb .brb-about-lead { max-width: 21em; color: rgba(48, 52, 50, 0.78); font-size: 14px; line-height: 1.85; }

/* --- CONTENTS ------------------------------------------------------------- */
.page-brb .brb-about-contents { padding: 36px 0 44px; }
.page-brb .brb-about-kicker { margin-bottom: 14px; color: var(--about-gold); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; }
.page-brb .brb-about-toc { display: block; }
.page-brb .brb-about-row { display: grid; grid-template-columns: 34px 1fr 62px; align-items: center; gap: 12px; min-height: 84px; border-top: 1px solid rgba(48, 52, 50, 0.18); }
.page-brb .brb-about-row:first-child { border-top: 1px solid var(--about-ink); }
.page-brb .brb-about-row:last-child { border-bottom: 1px solid var(--about-ink); }
.page-brb .brb-about-no { color: var(--about-gold); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.page-brb .brb-about-label strong { display: block; font-family: var(--about-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.page-brb .brb-about-label small { display: block; color: rgba(48, 52, 50, 0.7); font-size: 11.5px; line-height: 1.5; }
.page-brb .brb-about-thumb { width: 62px; height: 62px; overflow: hidden; background: #ece5d9; }
.page-brb .brb-about-thumb img { width: 100%; height: 100%; object-fit: cover; }
.page-brb .brb-about-thumb img.is-whole { object-fit: contain; }
.page-brb a.brb-about-row:hover strong { color: var(--about-green); }

/* --- 834: same layout, scaled -------------------------------------------- */
@media (min-width: 52.125rem) {
  /* Desktop height follows the window width (entrance photo is 4:3), so a
   * wider window no longer flattens it; capped so the intro line still peeks. */
  .page-brb .brb-about-hero { height: clamp(480px, 50vw, calc(100svh - 160px)); }
  .page-brb .brb-about-hero-image { height: 100%; }
  .page-brb .brb-about-hero-copy { left: max(40px, calc((100% - 760px) / 2)); right: 40px; bottom: 40px; }
  .page-brb .brb-about-eyebrow { font-size: 12px; }
  .page-brb .brb-about-hero h1 { font-size: 52px; }
  .page-brb .brb-about-wrap { width: min(100% - 80px, 760px); margin-inline: auto; padding-inline: 0; }
  .page-brb .brb-about-lead-wrap { padding-top: 36px; }
  .page-brb .brb-about-lead { font-size: 16px; }
  .page-brb .brb-about-contents { padding: 48px 0 72px; }
  .page-brb .brb-about-kicker { font-size: 12px; margin-bottom: 18px; }
  .page-brb .brb-about-row { grid-template-columns: 56px 1fr 96px; gap: 20px; min-height: 120px; }
  .page-brb .brb-about-no { font-size: 13px; }
  .page-brb .brb-about-label strong { font-size: 26px; }
  .page-brb .brb-about-label small { font-size: 14px; }
  .page-brb .brb-about-thumb { width: 96px; height: 96px; }
}

/* --- 1440 ----------------------------------------------------------------- */