@charset "UTF-8";
/*
 * 바라봄 소개 section navigation — the five /brb/ child Pages.
 *
 * Follows the shared BARABOM context-navigation grammar (owner decision
 * 2026-09-22; tokens in context-nav.css): one editorial index strip under the
 * global header — text cells with hairline separators, the current Page a
 * Deep Green cell cut flush into the strip with cream 600 text and a gold
 * lower rule. No individual chip containers.
 *
 *   touch   48px strip; the five cells share the 390 row evenly (they fit), so
 *           no fade or control appears; if a narrower screen overflows, native
 *           swipe + an edge fade (context-nav.js sets data-ctx-edge)
 *   ≥834    52px strip in the 1140 header column, cells at natural width
 *
 * Owned by this rail only. Procedure rails keep navigation-master-v1.css.
 */
.brb-sec {
  position: relative;
  background: var(--brb-ctx-paper, #fbf9f5);
  border-bottom: 1px solid var(--brb-ctx-rule, rgba(48, 52, 50, 0.14));
  color: var(--brb-ctx-ink, #4e433c);
  font-family: var(--brb-ctx-sans, "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif);
  word-break: keep-all;
}
.brb-sec__bar { display: flex; align-items: stretch; }
.brb-sec__scroll { position: relative; display: flex; flex: 1; min-width: 0; height: var(--brb-ctx-row, 48px); }
.brb-sec__chips {
  display: flex; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 var(--brb-ctx-inset, 16px); list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.brb-sec__chips::-webkit-scrollbar { display: none; }
.brb-sec__chips li { position: relative; display: flex; flex: 1 0 auto; margin: 0; }
.brb-sec__chips li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px;
  background: var(--brb-ctx-sep, rgba(48, 52, 50, 0.2)); pointer-events: none;
}
.brb-sec__chips li:has(> [aria-current="page"])::before,
.brb-sec__chips li:has(> [aria-current="page"]) + li::before { opacity: 0; }
.brb-sec__chips a {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
  min-inline-size: var(--brb-ctx-min-target, 44px);
  height: var(--brb-ctx-row, 48px); padding: 0 var(--brb-ctx-pad, 14px);
  color: var(--brb-ctx-ink, #4e433c); font-size: var(--brb-ctx-font, 14px); font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .brb-sec__chips a:hover { color: var(--brb-ctx-green, #0b3328); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
}
.brb-sec__chips a:active { background: var(--brb-ctx-green-soft, #e8ede9); color: var(--brb-ctx-green, #0b3328); }
.brb-sec__chips a:focus-visible { outline: 2px solid var(--brb-color-web-focus, #0b3328); outline-offset: -4px; }   /* inset: never clipped by the scroller */
/* current: a square Deep Green plate painted inside the full-height cell (breathing room above and
   below), cream 600 text, a 2px gold rule on the plate's lower edge; the cell stays the target */
.brb-sec__chips a[aria-current="page"],
.brb-sec__chips a[aria-current="page"]:hover {
  background:
    linear-gradient(var(--brb-ctx-gold, #a88959), var(--brb-ctx-gold, #a88959)) 0 calc(100% - var(--brb-ctx-plate-inset, 6px)) / 100% 2px no-repeat,
    linear-gradient(var(--brb-ctx-green, #0b3328), var(--brb-ctx-green, #0b3328)) 0 50% / 100% calc(100% - 2 * var(--brb-ctx-plate-inset, 6px)) no-repeat;
  color: var(--brb-ctx-cream, #f5f1ea); font-weight: 600; text-decoration: none;
}
.brb-sec__chips a[aria-current="page"]:focus-visible { outline-color: var(--brb-ctx-cream, #f5f1ea); outline-offset: calc(-1 * var(--brb-ctx-plate-inset, 6px) - 3px); }   /* ring inside the plate */

/* edge fades: only on the side that really has more (data-ctx-edge from context-nav.js) */
.brb-sec__fade { position: absolute; top: 0; bottom: 0; z-index: 1; width: var(--brb-ctx-fade, 32px); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.brb-sec__fade--l { left: 0; background: linear-gradient(90deg, var(--brb-ctx-paper, #fbf9f5), rgba(251, 249, 245, 0)); }
.brb-sec__fade--r { right: 0; background: linear-gradient(270deg, var(--brb-ctx-paper, #fbf9f5), rgba(251, 249, 245, 0)); }
.brb-sec[data-ctx-edge="middle"] .brb-sec__fade--l,
.brb-sec[data-ctx-edge="end"] .brb-sec__fade--l,
.brb-sec[data-ctx-edge="start"] .brb-sec__fade--r,
.brb-sec[data-ctx-edge="middle"] .brb-sec__fade--r { opacity: 1; }
.brb-sec[data-ctx-arrows="on"] .brb-sec__fade--l { left: var(--brb-ctx-arrow, 44px); }
.brb-sec[data-ctx-arrows="on"] .brb-sec__fade--r { right: var(--brb-ctx-arrow, 44px); }

/* first / last label on the track's edge line (a current plate keeps its own padding) */
.brb-sec__chips li:first-child a:not([aria-current]) { padding-left: 0; }
.brb-sec__chips li:last-child a:not([aria-current]) { padding-right: 0; }

@media (max-width: 52.124rem) {
  /* the band stays full width; the track sits in the heroes' 20px page gutter. Five short labels share
     that row with no scroll at 390 (cells then grow evenly), thanks to a tighter cell inset */
  .brb-sec__bar { width: calc(100% - 2 * var(--brb-ctx-gutter, 20px)); margin-inline: auto; }
  .brb-sec__chips { padding-inline: 0; }
  .brb-sec__chips a { padding-inline: 9px; }
}

@media (min-width: 52.125rem) {
  .brb-sec__bar { width: min(100% - 80px, 1140px); margin-inline: auto; }   /* aligns with the global header (shell max 1140) */
  .brb-sec__chips { padding: 0; }
  .brb-sec__chips li { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .brb-sec__chips a, .brb-sec__fade { transition: none; }
}