@charset "UTF-8";
/*
 * BARABOM context navigation — shared grammar (owner decision 2026-09-22).
 *
 * Tokens and the desktop arrow control for every one-row context navigation:
 * the procedure family/child rails (navigation-master-v1.css) and the
 * 바라봄 소개 rail (brb-section-nav.css). Each of those files maps its own markup
 * onto these tokens; this file styles nothing but the injected arrows.
 *
 * Grammar — an editorial index strip, not a row of buttons:
 *   strip    full-width paper band, one hairline below, no top border (sits under the header rule)
 *   track    inset to the page composition: the header column on ≥ 834, a 20px gutter below —
 *            first/last labels on the gutter line; fades and arrows at the track's own edges
 *   items    Pretendard text cells, no container, 16px hairline separators between them
 *   current  a square Deep Green plate painted inside its full-height cell with 6–7px of breathing
 *            room above and below, cream 600 text, a 2px gold rule on the plate's lower edge —
 *            shape + weight + colour (never a rounded pill)
 *   overflow touch (coarse primary pointer, any width): native swipe, cut-off next item, a 32px fade
 *            on the side that has more — never arrows
 *            PC-like (hover + fine pointer, any width): quiet prev/next cells, only on real overflow
 *   targets  every cell and arrow is at least 44 × 44 (min-inline-size; the strip is 48/52 tall)
 */
:root {
	--brb-ctx-paper: #fbf9f5;
	--brb-ctx-rule: rgba(48, 52, 50, 0.14);
	--brb-ctx-sep: rgba(48, 52, 50, 0.2);
	--brb-ctx-ink: #4e433c;                                  /* shell main-nav ink, 9.1:1 on paper */
	--brb-ctx-green: var(--brb-color-web-primary, #0b3328);
	--brb-ctx-green-soft: var(--brb-color-web-primary-soft, #e8ede9);
	--brb-ctx-cream: #f5f1ea;
	--brb-ctx-gold: var(--brb-color-web-accent, #a88959);
	--brb-ctx-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--brb-ctx-row: 48px;
	--brb-ctx-font: 14px;
	--brb-ctx-pad: 14px;
	--brb-ctx-inset: 16px;                                   /* legacy token, kept for consumers */
	--brb-ctx-gutter: 20px;                                  /* < 834: the track sits in the page gutter the heroes use */
	--brb-ctx-plate-inset: 6px;                              /* current plate breathes above and below inside its cell */
	--brb-ctx-fade: 32px;
	--brb-ctx-arrow: 44px;                                   /* arrow cell: 44 wide × strip height */
	--brb-ctx-min-target: 44px;                              /* minimum cell width (e.g. "점") */
}
@media (min-width: 52.125rem) {
	:root {
		--brb-ctx-row: 52px;
		--brb-ctx-font: 14.5px;
		--brb-ctx-pad: 15px;
		--brb-ctx-fade: 24px;
		--brb-ctx-plate-inset: 7px;
	}
}

/* Desktop arrows — injected by context-nav.js; absent from layout until real overflow on a fine pointer. */
.brb-ctx-arrow { display: none; }
[data-ctx-arrows="on"] > * > .brb-ctx-arrow,
[data-ctx-arrows="on"] .brb-ctx-arrow {
	position: relative; display: grid; place-items: center; flex: 0 0 var(--brb-ctx-arrow);
	width: var(--brb-ctx-arrow); height: var(--brb-ctx-row);
	margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
	color: var(--brb-ctx-green); cursor: pointer; box-shadow: none;
}
[data-ctx-arrows="on"] .brb-ctx-arrow--prev { box-shadow: inset -1px 0 0 var(--brb-ctx-rule); }
[data-ctx-arrows="on"] .brb-ctx-arrow--next { box-shadow: inset 1px 0 0 var(--brb-ctx-rule); }
/* at the matching edge the control is visually absent but keeps its slot: no layout shift */
[data-ctx-arrows="on"] .brb-ctx-arrow:disabled { visibility: hidden; }
[data-ctx-arrows="on"] .brb-ctx-arrow:hover { background: var(--brb-ctx-green-soft); }
[data-ctx-arrows="on"] .brb-ctx-arrow:active { background: #dbe4dd; }
[data-ctx-arrows="on"] .brb-ctx-arrow:focus-visible { outline: 2px solid var(--brb-color-web-focus, #0b3328); outline-offset: -4px; }
.brb-ctx-arrow svg { display: block; width: 16px; height: 16px; }