/* ==========================================================================
   SquashRT — "2a" identity (Claude Design: Squashrt 홈 화면 3안 / Turn 2 + Turn 3)
   Court white ground, wall cream surface, line red action, ball yellow live,
   tin black ink. Broadsheet type/layout grammar in Pretendard.

   This layer sits ON TOP of Bootstrap 5 (which the menu pages still use for
   grid + utilities). It only restyles the visual surface, never the grid, so
   pages not yet ported still pick up the new identity coherently.
   Loaded from assets/_include/header.php → menu pages only (the game and
   Court View never include header.php).
   ========================================================================== */

/* Pretendard itself is linked from header.php (an @import here would serialise
   the font CSS behind this file and delay first paint). */

:root {
    /* — the five inks — */
    --srt-white: #fbf7f0;   /* court white · ground   */
    --srt-cream: #ede1cc;   /* wall cream  · surface  */
    --srt-red: #d6231f;     /* line red    · action   */
    --srt-yellow: #eec324;  /* ball yellow · live     */
    --srt-ink: #1d1a17;     /* tin black   · ink      */

    /* — tonal ramps (one shared lightness scale) — */
    --srt-red-100: #fdeceb;
    --srt-red-200: #fbd4d1;
    --srt-red-300: #f7aca6;
    --srt-red-400: #ef7c73;
    --srt-red-500: #e04a3e;
    --srt-red-600: #d6231f;
    --srt-red-700: #ad1410;
    --srt-red-800: #7d100d;
    --srt-red-900: #4e1310;

    --srt-yellow-100: #fdf6d9;
    --srt-yellow-200: #fbe9a3;
    --srt-yellow-300: #f7d75c;
    --srt-yellow-400: #eec324;
    --srt-yellow-500: #d9ac00;
    --srt-yellow-600: #b88f00;
    --srt-yellow-700: #8f6f00;
    --srt-yellow-800: #665000;

    --srt-n100: #f8f4f4;
    --srt-n200: #eae7e7;
    --srt-n300: #d7d3d3;
    --srt-n400: #bab6b6;
    --srt-n500: #9b9797;
    --srt-n600: #7d7979;
    --srt-n700: #605d5d;
    --srt-n800: #444141;
    --srt-n900: #2d2b2b;

    --srt-divider: color-mix(in srgb, #1d1a17 16%, transparent);

    --srt-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", "Segoe UI", Roboto, sans-serif;

    /* Broadsheet radii — near-square: the identity is rules and plates, not pills. */
    --srt-radius-sm: 1px;
    --srt-radius-md: 2px;
    --srt-radius-lg: 4px;

    --srt-shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
    --srt-shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
    --srt-shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

    /* Page gutter — 64px on the 1280 artboard, tightened on small screens. */
    --srt-gutter: 64px;

    /* ONE vertical scale for every band. Sections and colour bands both read these,
       so the page rhythm stays in step when the breakpoint changes — setting the
       padding per-band (inline or otherwise) is what broke it before. */
    --srt-sec-pt: 56px;
    --srt-sec-pb: 64px;
    --srt-band-pt: 56px;
    --srt-band-pb: 56px;
    --srt-strip-pt: 44px;
    --srt-strip-pb: 44px;

    /* Bootstrap variable bridge, so un-ported components inherit the palette. */
    --bs-primary: #d6231f;
    --bs-primary-rgb: 214, 35, 31;
    --bs-link-color: #ad1410;
    --bs-link-color-rgb: 173, 20, 16;
    --bs-link-hover-color: #7d100d;
    --bs-border-radius: 2px;
    --bs-border-radius-sm: 1px;
    --bs-border-radius-lg: 4px;
    --bs-border-radius-xl: 4px;
    --bs-border-radius-2xl: 4px;
    --bs-body-font-family: var(--srt-font);
    --bs-body-color: #1d1a17;
}

@media (max-width: 991.98px) {
    :root {
        --srt-gutter: 32px;
        --srt-sec-pt: 40px;
        --srt-sec-pb: 44px;
        --srt-band-pt: 40px;
        --srt-band-pb: 40px;
        --srt-strip-pt: 32px;
        --srt-strip-pb: 32px;
    }
}

@media (max-width: 575.98px) {
    :root { --srt-gutter: 20px; }
}

/* ─────────────────────────────── base ─────────────────────────────── */

html body[data-page="menu"],
html body[data-page="menu"].lang-ko,
html body[data-page="menu"].lang-en {
    font-family: var(--srt-font);
    background: var(--srt-white);
    color: var(--srt-ink);
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.003em;
}

body[data-page="menu"] h1,
body[data-page="menu"] h2,
body[data-page="menu"] h3,
body[data-page="menu"] h4,
body[data-page="menu"] h5,
body[data-page="menu"] h6 {
    font-family: var(--srt-font);
    color: var(--srt-ink);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

body[data-page="menu"] a:not(.btn) {
    color: var(--srt-red-700);
    text-decoration: none;
}

body[data-page="menu"] a:not(.btn):hover {
    color: var(--srt-red-800) !important;
}

/* NO global :visited rule.
   There used to be one here (a:not(.btn):visited → red-700) to override an old
   grey visited colour in style.css. That rule is gone, so this one had nothing
   left to fix — but at (0,3,2) it still outranked component rules like
   `.srt-nav a` (0,2,2), which turned every VISITED top-nav item red and made it
   look like the current-page marker. Links inherit their colour from the base
   rule in every state now; only .srt-visitable (below) opts into a visited look.
   Headless Chromium never reports :visited, so this can only be caught by eye —
   removed on report from the user, 2026-08-02. */

/* A headline that happens to be a link is still a headline: ink, not link red.
   Red is reserved for actions and inline links (blog list titles, drill names,
   routine names all sit inside headings).
   NOTE the :not(.btn): without it this selector scores (0,2,3) against the
   generic `a:not(.btn)` rule's (0,2,2)… which it would win — but the earlier
   version WITHOUT it scored (0,1,3) and silently lost, so every headline link
   rendered link-red. Measured 2026-08-02; keep the class count at or above 2. */
body[data-page="menu"] h1 > a:not(.btn),
body[data-page="menu"] h2 > a:not(.btn),
body[data-page="menu"] h3 > a:not(.btn),
body[data-page="menu"] h4 > a:not(.btn),
body[data-page="menu"] h5 > a:not(.btn) {
    color: var(--srt-ink);
}

body[data-page="menu"] h1 > a:not(.btn):hover,
body[data-page="menu"] h2 > a:not(.btn):hover,
body[data-page="menu"] h3 > a:not(.btn):hover,
body[data-page="menu"] h4 > a:not(.btn):hover,
body[data-page="menu"] h5 > a:not(.btn):hover {
    color: var(--srt-red-700) !important;
}

body[data-page="menu"] ::selection {
    background: color-mix(in srgb, var(--srt-red) 28%, transparent);
}

body[data-page="menu"] :focus-visible {
    outline: 2px solid var(--srt-red);
    outline-offset: 2px;
}

/* ──────────────────────── shell / page rhythm ─────────────────────── */

/* ── the shell ──────────────────────────────────────────────────────────────
   style.css sizes .menu-shell as a 1180px grid with 26px top padding and a
   22px row gap. Under the 2a identity the shell must be the FULL viewport —
   the tin band and the footer are full-bleed bands — and every section owns
   its own vertical rhythm, so the grid gap and the shell padding both go.  */
body[data-page="menu"] main.menu-shell {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* The content column. Every direct child of the shell caps to it — on ported and
   un-ported pages alike — EXCEPT the full-bleed bands below. */
body[data-page="menu"] main.menu-shell > * {
    width: 100%;
    max-width: var(--srt-content, 1280px);
    margin-left: auto;
    margin-right: auto;
}

.srt-sheet {
    width: 100%;
    background: var(--srt-white);
}

/* Full-bleed bands: background runs edge to edge, contents ride the column. */
body[data-page="menu"] main.menu-shell > .srt-tin,
body[data-page="menu"] main.menu-shell > .srt-topbar,
body[data-page="menu"] main.menu-shell > .srt-band,
body[data-page="menu"] main.menu-shell > .srt-hero,
.srt-tin,
.srt-topbar,
.srt-footer {
    max-width: none;
    width: 100%;
}

/* Full-bleed colour band: the background runs edge to edge while the content
   still starts on the column. The padding formula resolves to the plain gutter
   whenever the viewport is narrower than the column, so no extra media query. */
.srt-band {
    padding-left: max(var(--srt-gutter), calc((100% - var(--srt-content, 1280px)) / 2 + var(--srt-gutter)));
    padding-right: max(var(--srt-gutter), calc((100% - var(--srt-content, 1280px)) / 2 + var(--srt-gutter)));
}

.srt-topbar-inner,
.srt-footer-inner {
    width: 100%;
    max-width: var(--srt-content, 1280px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}

:root { --srt-content: 1280px; }

.srt-pad {
    padding-left: var(--srt-gutter);
    padding-right: var(--srt-gutter);
}

/* Eyebrow: 30px red rule + tracked uppercase label. The identity's section mark. */
.srt-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--srt-red-700);
    font-weight: 600;
    margin: 0;
}

.srt-eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--srt-red);
    flex: 0 0 auto;
}

.srt-eyebrow--plain {
    display: block;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--srt-red-700);
    font-weight: 600;
}

.srt-eyebrow--plain::before { content: none; }

/* Column rules — the 3px red top rule that heads every column and panel. */
.srt-rule {
    padding-top: 14px;
    border-top: 3px solid var(--srt-red);
}

.srt-rule-thin {
    padding-top: 12px;
    border-top: 1px solid var(--srt-red);
}

.srt-lede {
    font-size: 18px;
    line-height: 1.55;
    color: var(--srt-n800);
    margin: 0;
}

.srt-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--srt-n800);
    margin: 0;
}

.srt-meta {
    font-size: 13px;
    color: var(--srt-n700);
}

/* Picture frame. The Broadsheet system's halftone plate treatment (a 3px dot
   screen multiplied over the image, plus a grayscale/contrast push) was removed
   on 2026-08-02: SquashRT's pictures are mostly court diagrams and 3D renders,
   and on thin vector lines the dot screen read as noise rather than as print.
   The class stays as the sizing/cropping container every page already uses. */
.srt-halftone {
    position: relative;
    overflow: hidden;
    background: var(--srt-cream);
}

.srt-halftone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ───────────────────────────── top bar ────────────────────────────── */

.srt-tin {
    height: 9px;
    background: var(--srt-ink);
}

.srt-topbar {
    padding: 0;
    border-bottom: 2px solid var(--srt-red);
    background: var(--srt-white);
    min-width: 0;
}

.srt-topbar-inner {
    justify-content: space-between;
    gap: 20px;
    padding: 16px var(--srt-gutter) 14px;
    /* the min-width:0 chain: without it the nav's min-content width (441px at a
       390 viewport) inflates the whole document and the page drifts right on
       phones — the failure mode the old .gnb-nav hit in 2026-07. */
    min-width: 0;
}

.srt-topbar-left {
    display: flex;
    align-items: center;
    gap: 30px;
    min-width: 0;
    flex: 1 1 auto;
}

.srt-topbar-logo img {
    height: 30px;
    width: auto;
    display: block;
}

.srt-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
}

.srt-nav > a { flex: 0 0 auto; }

.srt-nav::-webkit-scrollbar { display: none; }

body[data-page="menu"] .srt-nav a {
    color: var(--srt-ink);
    font-weight: 500;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

body[data-page="menu"] .srt-nav a:hover {
    color: var(--srt-red-700) !important;
}

body[data-page="menu"] .srt-nav a[aria-current="page"] {
    color: var(--srt-red-700);
    font-weight: 700;
    border-bottom-color: var(--srt-red);
}

.srt-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.srt-langswitch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--srt-n700);
}

.srt-langswitch button {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: var(--srt-n700);
    cursor: pointer;
}

.srt-langswitch button.is-active {
    color: var(--srt-ink);
    font-weight: 700;
}

.srt-langswitch .srt-langsep {
    color: var(--srt-n400);
}

@media (max-width: 991.98px) {
    .srt-topbar-inner { flex-wrap: wrap; }
    .srt-topbar-left { gap: 18px; width: 100%; flex-basis: 100%; }
    .srt-topbar-right { width: 100%; justify-content: space-between; }
    .srt-nav { gap: 16px; font-size: 14px; }
}

/* The whole sheet is width-capped to the viewport: any single wide child (a nav,
   a table, a wide image) scrolls inside itself instead of widening the document. */
/* The document — not the sheet — owns horizontal clipping now: the sheet holds
   full-bleed children, so clipping there would cut the bands off at the column. */
html body[data-page="menu"] { overflow-x: clip; }

@media (max-width: 575.98px) {
    .srt-tin { height: 7px; }
    .srt-topbar-inner { padding-top: 12px; padding-bottom: 10px; }
    .srt-topbar-logo img { height: 24px; }
}

/* ────────────────────────────── buttons ───────────────────────────── */

body[data-page="menu"] .btn {
    font-family: var(--srt-font);
    font-weight: 700;
    border-radius: var(--srt-radius-md);
    line-height: 1.2;
    letter-spacing: -0.01em;
    box-shadow: none;
}

body[data-page="menu"] .btn-primary,
body[data-page="menu"] .btn-primary:visited {
    background: var(--srt-red);
    border-color: var(--srt-red);
    color: var(--srt-white);
}

body[data-page="menu"] .btn-primary:hover,
body[data-page="menu"] .btn-primary:focus-visible {
    background: var(--srt-red-700);
    border-color: var(--srt-red-700);
    color: var(--srt-white);
}

body[data-page="menu"] .btn-primary:active {
    background: var(--srt-red-800) !important;
    border-color: var(--srt-red-800) !important;
}

body[data-page="menu"] .btn-secondary,
body[data-page="menu"] .btn-outline-primary,
body[data-page="menu"] .btn-outline-secondary {
    background: transparent;
    /* 32%, not the 16% divider tint: at .btn-sm size a 16% hairline all but
       disappeared on the cream ground and the drill-row buttons read as blank
       space (user report, 2026-08-02). */
    border: 1px solid color-mix(in srgb, var(--srt-ink) 32%, transparent);
    color: var(--srt-ink);
}

body[data-page="menu"] .btn-secondary:hover,
body[data-page="menu"] .btn-outline-primary:hover,
body[data-page="menu"] .btn-outline-secondary:hover {
    background: color-mix(in srgb, var(--srt-ink) 7%, transparent);
    border-color: var(--srt-ink);
    color: var(--srt-ink);
}

body[data-page="menu"] .btn-link {
    color: var(--srt-red-700);
    text-decoration: none;
    font-weight: 700;
}

body[data-page="menu"] .btn-link:hover {
    color: var(--srt-red-800);
}

/* On the ink hero the outline button inverts. */
.srt-btn-inverse {
    background: transparent !important;
    border: 1.5px solid var(--srt-white) !important;
    color: var(--srt-white) !important;
}

.srt-btn-inverse:hover {
    background: rgba(251, 247, 240, 0.12) !important;
    color: var(--srt-white) !important;
}

/* ────────────────────────────── surfaces ──────────────────────────── */

/* Legacy panels (.container.border-srt-primary.rounded-5) across pages that
   have not been re-laid-out yet: strip the rounded card, keep the content,
   and head it with the identity's red rule. */
body[data-page="menu"] .border-srt-primary {
    border-color: var(--srt-red) !important;
}

body[data-page="menu"] main.menu-shell > .container.border-srt-primary {
    background: transparent !important;
    border: 0 !important;
    border-top: 3px solid var(--srt-red) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 28px var(--srt-gutter) 44px !important;
    max-width: 1280px;
}

/* The bar already ends on a 2px red rule — a panel rule immediately under it
   reads as a double line, so the first panel on a page drops its own. */
body[data-page="menu"] main.menu-shell > .srt-topbar + .container.border-srt-primary,
body[data-page="menu"] main.menu-shell > .srt-topbar + style + .container.border-srt-primary {
    border-top: 0 !important;
    padding-top: 40px !important;
}

body[data-page="menu"] .rounded-5,
body[data-page="menu"] .rounded-4,
body[data-page="menu"] .rounded-3 {
    border-radius: var(--srt-radius-md) !important;
}

body[data-page="menu"] .shadow,
body[data-page="menu"] .shadow-sm,
body[data-page="menu"] .shadow-lg {
    box-shadow: none !important;
}

.srt-surface {
    background: var(--srt-cream);
}

.srt-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--srt-cream);
    border-top: 3px solid var(--srt-red);
    border-radius: 0;
    transition: transform .18s ease, box-shadow .18s ease;
}

a.srt-card:hover,
.srt-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--srt-shadow-md);
}

.srt-card-kicker {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--srt-red-700);
    font-weight: 600;
}

.srt-card-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--srt-ink);
}

/* A card title that IS the link (the routine list) still reads as a title, not
   as a link: the generic `a:not(.btn)` rule scores (0,2,2) and was beating the
   plain `.srt-card-title` class (0,1,0), so routine names rendered link-red.
   Same reasoning as the headline-link rule near the top of this file. */
body[data-page="menu"] a.srt-card-title,
body[data-page="menu"] a.srt-card {
    color: var(--srt-ink);
}

body[data-page="menu"] a.srt-card-title:hover,
body[data-page="menu"] a.srt-card:hover .srt-card-title {
    color: var(--srt-red-700) !important;
}

.srt-card-body {
    font-size: 15px;
    line-height: 1.5;
    color: var(--srt-n800);
    margin: 0;
}

/* ─────────────────────────────── tables ───────────────────────────── */

.srt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 0;
}

.srt-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--srt-n700);
    font-weight: 600;
    padding: 8px 4px;
    border-bottom: 1px solid var(--srt-divider);
}

.srt-table td {
    padding: 9px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--srt-ink) 8%, transparent);
    vertical-align: middle;
}

.srt-table tbody tr:hover {
    background: color-mix(in srgb, var(--srt-ink) 4%, transparent);
}

.srt-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.srt-clip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ──────────────────────────────── tags ───────────────────────────── */

.srt-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 1px;
    white-space: nowrap;
}

.srt-tag-live   { background: var(--srt-yellow-200); color: var(--srt-yellow-800); }
.srt-tag-action { background: var(--srt-red-100);    color: var(--srt-red-800); }
.srt-tag-mute   { background: var(--srt-n100);       color: var(--srt-n800); }
.srt-tag-ink    { background: var(--srt-ink);        color: var(--srt-white); }

/* Drill-type chips — ONE look per type on every page (user, 2026-08-02). /drill used
   live+mute, /routine used Bootstrap success+primary and the in-game picker used
   green+blue, so the same drill read three different ways. Feed = ball yellow,
   Rally = line red. !important because /routine keeps Bootstrap's .badge markup, whose
   bridge rules below also carry !important. The in-game picker mirrors these exact hexes
   in style.css (.td-lvl-type) — change both together. */
body[data-page="menu"] .srt-tag-feed,
body[data-page="menu"] .badge.srt-tag-feed {
    background: var(--srt-yellow-200) !important;
    color: var(--srt-yellow-800) !important;
}

body[data-page="menu"] .srt-tag-rally,
body[data-page="menu"] .badge.srt-tag-rally {
    background: var(--srt-red-100) !important;
    color: var(--srt-red-800) !important;
}

/* Bootstrap badge bridge — un-ported lists keep their markup, gain the palette. */
body[data-page="menu"] .badge {
    border-radius: 1px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

body[data-page="menu"] .badge.text-bg-danger  { background: var(--srt-red) !important;        color: var(--srt-white) !important; }
body[data-page="menu"] .badge.text-bg-primary { background: var(--srt-red-200) !important;    color: var(--srt-red-800) !important; }
body[data-page="menu"] .badge.text-bg-secondary { background: var(--srt-n200) !important;     color: var(--srt-n800) !important; }
body[data-page="menu"] .badge.text-bg-success { background: var(--srt-yellow-200) !important; color: var(--srt-yellow-800) !important; }

/* (the pulsing live dot was removed from the Online Match heading, 2026-08-02) */

/* ─────────────────────────────── hero ─────────────────────────────── */

.srt-hero {
    position: relative;
    overflow: hidden;
    background: var(--srt-ink);
}

/* Paint order matters here: ::before is generated BEFORE the <img> in tree order,
   so without these z-indexes the photo paints on top of its own scrim and the
   headline loses contrast against the bright front wall. */
.srt-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 45%;
    z-index: 0;

}

.srt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(20, 17, 14, .94) 24%, rgba(20, 17, 14, .78) 52%, rgba(20, 17, 14, .30) 100%);
    z-index: 1;
}

.srt-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--srt-red);
    z-index: 3;
}

.srt-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 88px;
    padding-bottom: 72px;
}

.srt-hero-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 760px;
}

.srt-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f3c9c7;
}

.srt-hero-eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--srt-red);
}

body[data-page="menu"] .srt-hero h1 {
    font-size: clamp(32px, 5.2vw, 62px);
    line-height: 1.04;
    margin: 0;
    letter-spacing: -0.025em;
    color: var(--srt-white);
    max-width: 18ch;
    text-wrap: balance;
}

.srt-hero-sub {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    margin: 0;
    max-width: 52ch;
    color: #cdc6bc;
}

.srt-hero-cta {
    display: flex;
    gap: 12px;
    padding-top: 6px;
    flex-wrap: wrap;
}

.srt-hero-stats {
    display: flex;
    gap: 40px;
    padding-top: 20px;
    margin-top: 14px;
    border-top: 1px solid rgba(251, 247, 240, .22);
    flex-wrap: wrap;
}

.srt-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.srt-hero-stat strong {
    font-size: 26px;
    color: var(--srt-yellow);
    line-height: 1.1;
}

.srt-hero-stat span {
    font-size: 13px;
    color: #cdc6bc;
}

@media (max-width: 767.98px) {
    .srt-hero-inner { padding-top: 52px; padding-bottom: 44px; }
    .srt-hero-col { gap: 16px; }
    /* A 16:9 hero cropped to a narrow portrait box loses most of its width, and
       the desktop framing (60%) sliced the player in half. Bias the crop toward
       the figure so he reads whole. */
    .srt-hero > img { object-position: 80% 48%; }
    .srt-hero::before {
        background: linear-gradient(170deg, rgba(20, 17, 14, .92) 40%, rgba(20, 17, 14, .62) 100%);
    }
    .srt-hero-stats { gap: 24px; }
    .srt-hero-stat strong { font-size: 22px; }
}

/* ───────────────────────────── sections ──────────────────────────── */

.srt-section {
    padding: var(--srt-sec-pt) var(--srt-gutter) var(--srt-sec-pb);
}

/* --tight continues the block above it with no seam. This must come AFTER the
   .srt-section shorthand and must NOT be re-set inside a media query, or the
   shorthand wins there and the seam reappears on phones (measured 2026-08-02). */
.srt-section--tight { padding-top: 0; }

/* Colour bands: same scale, band rhythm. */
.srt-band-pad {
    padding-top: var(--srt-band-pt);
    padding-bottom: var(--srt-band-pb);
}

.srt-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.srt-section-head h2 {
    font-size: clamp(26px, 3vw, 34px);
    margin: 0;
    letter-spacing: -0.015em;
}

.srt-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.srt-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.srt-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

@media (max-width: 991.98px) {
    .srt-grid-3 { grid-template-columns: 1fr 1fr; gap: 24px; }
    .srt-grid-4 { grid-template-columns: 1fr 1fr; }
    .srt-grid-2 { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 599.98px) {
    .srt-grid-3,
    .srt-grid-4 { grid-template-columns: 1fr; gap: 24px; }
}

/* Door column (Train / Match / Plan) */
.srt-door {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
    border-top: 3px solid var(--srt-red);
}

.srt-door h2 {
    font-size: clamp(24px, 2.6vw, 30px);
    margin: 0;
    line-height: 1.12;
}

.srt-door .srt-halftone {
    aspect-ratio: 16 / 10;
}

.srt-door .btn {
    width: 100%;
    font-size: 17px;
    padding: 12px;
}

/* ───────────────────── live strip (rooms / rankers / results) ───────────────────── */

/* The three columns STRETCH to the tallest one (see .srt-live-foot below): the row counts are
   height-matched in index.php, but the Online Match list is live — rooms come and go — so the
   trailing links still need to pin to a common baseline rather than float mid-band. */
.srt-live {
    padding-top: var(--srt-strip-pt);
    padding-bottom: var(--srt-strip-pb);
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .srt-live { grid-template-columns: 1fr 1fr; gap: 32px; }
    .srt-live > .srt-live-col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 599.98px) {
    .srt-live { grid-template-columns: 1fr; gap: 28px; }
}

.srt-live-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.srt-live-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.srt-live-head h3 {
    font-size: 20px;
    margin: 0;
}

.srt-live-foot {
    margin-top: auto;   /* pin the trailing link to the bottom of the stretched column */
    padding-top: 4px;
}

.srt-live-foot a,
.srt-lib-foot a {
    font-size: 15px;
    font-weight: 600;
}

/* Shared-library band: the "all routines" link under the routine cards. */
.srt-lib-foot {
    margin-top: 20px;
}

/* Row list — the identity's table rhythm, on <ul> so the existing JS renderers
   (index-ranking.js, footer.php's WebSocket refresher) can keep writing <li>. */
.srt-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
}

.srt-rows > li {
    padding: 9px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--srt-ink) 8%, transparent);
    min-width: 0;
    font-size: 15px;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.srt-rows > li:first-child {
    border-top: 1px solid var(--srt-divider);
}

.srt-row-empty {
    color: var(--srt-n700);
    font-size: 14px;
}

.srt-row--flat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.srt-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-width: 0;
}

.srt-row-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.srt-row-vs {
    color: var(--srt-n600);
    font-size: 13px;
    padding: 0 6px;
}

.srt-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
    color: var(--srt-n700);
}

.srt-row-meta .srt-dot { opacity: .45; }

.srt-rank {
    flex: 0 0 auto;
    min-width: 18px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--srt-n600);
}

.srt-row--flat .srt-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.srt-row--flat .srt-num { flex: 0 0 auto; margin-left: auto; color: var(--srt-n800); font-size: 14px; }

/* Safety net: any renderer still emitting Bootstrap list markup inside .srt-rows
   inherits the row rhythm instead of the old card look. */
.srt-rows > li.list-group-item {
    padding-left: 2px;
    padding-right: 2px;
}

/* ─────────────────────────────── news ────────────────────────────── */

.srt-news {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.srt-news-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 4px;
}

.srt-news-title {
    font-size: 21px;
    margin: 0;
    line-height: 1.25;
}

body[data-page="menu"] .srt-news-title a {
    color: var(--srt-ink);
}

body[data-page="menu"] .srt-news-title a:hover {
    color: var(--srt-red-700) !important;
}

.srt-news-excerpt {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    color: var(--srt-n800);
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ──────────────────────────── sign-in band ───────────────────────── */

.srt-signin-band {
    padding-top: var(--srt-strip-pt);
    padding-bottom: var(--srt-strip-pb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 3px solid var(--srt-red);
}

/* ─────────────────────────────── footer ───────────────────────────── */

.srt-footer {
    background: var(--srt-ink);
    color: var(--srt-white);
    padding: 0;
}

.srt-footer-inner {
    padding: 36px var(--srt-gutter) 44px;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.srt-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.srt-footer-brand img {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 4px;
}

.srt-footer-links {
    display: flex;
    gap: 18px;
    font-size: 14px;
    flex-wrap: wrap;
}

body[data-page="menu"] .srt-footer a,
body[data-page="menu"] .srt-footer a:visited {
    color: var(--srt-white);
}

body[data-page="menu"] .srt-footer a:hover {
    color: var(--srt-yellow) !important;
}

.srt-footer-copy {
    font-size: 13px;
    opacity: .65;
}

/* ──────────────────────────── list bridge ─────────────────────────── */

/* Bootstrap list groups used across records/routines/drills pages. */
body[data-page="menu"] .list-group-item {
    background: transparent;
    border-color: color-mix(in srgb, var(--srt-ink) 8%, transparent);
    color: var(--srt-ink);
}

body[data-page="menu"] .text-body-secondary,
body[data-page="menu"] .text-muted {
    color: var(--srt-n700) !important;
}

body[data-page="menu"] hr {
    border-color: var(--srt-divider);
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   SUB-PAGE GRAMMAR — the vocabulary the Turn-3 pages (3a…3l) are built from.
   Every sub-page composes these; no page invents its own spacing.
   ══════════════════════════════════════════════════════════════════════════ */

/* — page head: eyebrow · headline · standfirst — */
.srt-page-head {
    /* reads the shared vertical scale — a hard-coded 56px here stayed 56px on
       phones while every neighbouring band dropped to 40px (2026-08-02). */
    padding-top: var(--srt-sec-pt);
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.srt-page-head h1 {
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.06;
    margin: 0;
    letter-spacing: -0.025em;
    max-width: 22ch;
}

.srt-page-head p {
    font-size: 18px;
    line-height: 1.55;
    margin: 0;
    max-width: 62ch;
    color: var(--srt-n800);
}

/* head with an action parked on the right */
.srt-page-head--split {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    flex-wrap: wrap;
}

.srt-page-head--split > .srt-head-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 60ch;
    min-width: 0;
}

/* — tab strip: active tab is a red plate on the 2px red rule — */
.srt-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--srt-red);
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.srt-tabs::-webkit-scrollbar { display: none; }

body[data-page="menu"] .srt-tabs a {
    font-size: 16px;
    padding: 12px 22px;
    color: var(--srt-ink);
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

body[data-page="menu"] .srt-tabs a:hover {
    color: var(--srt-red-700) !important;
}

body[data-page="menu"] .srt-tabs a.is-active,
body[data-page="menu"] .srt-tabs a[aria-current="page"] {
    background: var(--srt-red);
    color: var(--srt-white) !important;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    body[data-page="menu"] .srt-tabs a { font-size: 15px; padding: 10px 16px; }
}

/* — bullet list: an 8px red square, not a disc — */
.srt-bullets {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.srt-bullets > li,
.srt-bullet {
    display: flex;
    gap: 14px;
    margin: 0;
}

.srt-bullets > li::before,
.srt-bullet::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 9px;
    flex: none;
    background: var(--srt-red);
}

.srt-bullets p,
.srt-bullet p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* — numbered step column — */
.srt-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 3px solid var(--srt-red);
}

.srt-step-num {
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: var(--srt-red);
}

.srt-step h3 {
    font-size: 21px;
    margin: 0;
}

.srt-step p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: var(--srt-n800);
}

/* — a figure column with an ordinal caption (guide steps) — */
.srt-shot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.srt-shot .srt-halftone { aspect-ratio: 4 / 3; }

.srt-shot-cap {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.srt-shot-cap span {
    font-size: 14px;
    font-weight: 700;
    color: var(--srt-red);
}

.srt-shot-cap h3 { font-size: 20px; margin: 0; }

.srt-shot p {
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    color: var(--srt-n800);
}

/* — side panel: cream, red top rule — */
.srt-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--srt-cream);
    border-top: 3px solid var(--srt-red);
}

.srt-aside h2,
.srt-aside h3 { font-size: 20px; margin: 0; }

.srt-aside p {
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    color: var(--srt-n800);
}

.srt-aside .btn { width: 100%; }

/* — content + rail — */
.srt-with-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 56px;
    align-items: start;
}

.srt-with-toc {
    display: grid;
    grid-template-columns: 240px minmax(0, 760px);
    gap: 56px;
    align-items: start;
}

.srt-with-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 72px;
    align-items: start;
}

@media (max-width: 991.98px) {
    .srt-with-rail,
    .srt-with-toc,
    .srt-with-form { grid-template-columns: 1fr; gap: 32px; }
    .srt-with-toc > .srt-toc { position: static; }
}

.srt-toc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 24px;
    padding-top: 14px;
    border-top: 3px solid var(--srt-red);
}

.srt-toc-label {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--srt-n700);
}

body[data-page="menu"] .srt-toc a { font-size: 16px; }

/* — long-form prose (legal, blog post) — */
.srt-prose {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.srt-prose > p {
    font-size: 17px;
    line-height: 1.75;
    margin: 0;
    color: #2d2a27;
}

.srt-prose h2 {
    font-size: 24px;
    margin: 0;
}

.srt-prose h3 {
    font-size: 20px;
    margin: 0;
}

.srt-prose section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.srt-prose ul,
.srt-prose ol { margin: 0; padding-left: 1.2em; }

.srt-prose li { font-size: 17px; line-height: 1.75; color: #2d2a27; }

.srt-prose blockquote {
    margin: 12px 0;
    padding: 20px 24px;
    background: var(--srt-cream);
    border-left: 4px solid var(--srt-red);
    font-size: 19px;
    line-height: 1.6;
    font-style: italic;
}

.srt-prose img { max-width: 100%; height: auto; }

.srt-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.srt-prose th, .srt-prose td {
    padding: 9px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--srt-ink) 10%, transparent);
    text-align: left;
}

.srt-lede-strong {
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    font-weight: 600;
}

/* — index list rows (drills, blog, my page) — */
.srt-listrow {
    display: grid;
    gap: 24px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--srt-ink) 14%, transparent);
    min-width: 0;
}

.srt-listrow h3 { font-size: 22px; margin: 0; }

.srt-listrow p {
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    color: var(--srt-n800);
}

.srt-listrow--drill { grid-template-columns: minmax(0, 1fr) 110px minmax(300px, 330px); }
.srt-listrow--post  { grid-template-columns: 160px minmax(0, 1fr); }
.srt-listrow--mine  { grid-template-columns: minmax(0, 1fr) 130px 120px 240px; align-items: center; }

.srt-listhead {
    display: grid;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 2px solid var(--srt-red);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--srt-n700);
}

.srt-listrow-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-content: flex-start;
}

/* Labels are never squeezed: a button either fits on the line or wraps to the
   next one. Shrinking them to an ellipsis makes the row unreadable. */
.srt-listrow-actions .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: max-content;
}

/* Drill-row actions are a 3-column GRID that hugs the right edge, so "Add to my drills"
   spanning 1/-1 is EXACTLY as wide as the three buttons above it — gaps included — at any
   viewport. flex:1 0 100% sized it to the grid CELL instead, which is wider than the three
   buttons whenever they don't fill it, so the button stuck out on the left (user 2026-08-03).
   Mobile keeps its own 2-col `.drill-card-btns` grid (display:grid !important in drill.php). */
@media (min-width: 576px) {
    .srt-listrow--drill .srt-listrow-actions {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: end;
        align-content: start;
    }
}

/* 576–991px: the row collapses to a single column, where the actions block stays LEFT
   aligned (see the 991.98px rule above) — keep that, only the widths are grid-driven. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .srt-listrow--drill .srt-listrow-actions { justify-content: start; }
}

.srt-listrow-actions .btn.srt-listrow-action-wide {
    grid-column: 1 / -1;
    min-width: 0;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .srt-listrow--drill,
    .srt-listrow--mine { grid-template-columns: 1fr; gap: 12px; }
    .srt-listrow--post { grid-template-columns: 1fr; gap: 8px; }
    .srt-listrow-actions { justify-content: flex-start; }
    .srt-listhead { display: none; }
}

/* — filter bar — */
.srt-filterbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--srt-red);
}

.srt-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.srt-chip {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 1px;
    border: 1px solid var(--srt-red);
    color: var(--srt-red-700);
    white-space: nowrap;
}

body[data-page="menu"] a.srt-chip { color: var(--srt-red-700); }

.srt-chip.is-active,
body[data-page="menu"] a.srt-chip.is-active {
    background: var(--srt-red-100);
    border-color: var(--srt-red-100);
    color: var(--srt-red-800) !important;
}

/* — stat row — */
.srt-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 14px;
    border-top: 3px solid var(--srt-red);
}

.srt-stat strong { font-size: 32px; line-height: 1.1; }
.srt-stat span { font-size: 14px; color: var(--srt-n700); }

/* — forms — */
.srt-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.srt-field > label {
    font-size: 12px;
    color: color-mix(in srgb, var(--srt-ink) 70%, transparent);
}

body[data-page="menu"] .srt-input,
body[data-page="menu"] input[type="text"].srt-input,
body[data-page="menu"] input[type="email"].srt-input,
body[data-page="menu"] textarea.srt-input,
body[data-page="menu"] select.srt-input {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--srt-ink);
    caret-color: var(--srt-red);
    background: var(--srt-white);
    border: 1px solid var(--srt-divider) !important;
    border-radius: var(--srt-radius-md);
}

body[data-page="menu"] textarea.srt-input { min-height: 120px; resize: vertical; }

/* A focused FORM FIELD draws NO outline at all (user request, 2026-08-02) — not the red
   identity ring, not Bootstrap's blue .form-control:focus glow. Focus stays visible through
   the field's own 1px border turning dark grey, which is the only focus cue keyboard users
   get here. Buttons and links keep the red :focus-visible ring from the base rule. */
/* The selector list mirrors the .srt-input base block above (and the legacy
   `input[type="text"] { border: … !important }` from style.css): both of those carry
   !important, so each focus selector has to out-specify its own base selector — plain
   `.srt-input:focus` (0,3,1) LOSES to `input[type="text"].srt-input` (0,3,2). Hence the
   type-qualified variants; don't trim them back. */
body[data-page="menu"] .srt-input:focus,
body[data-page="menu"] input[type="text"].srt-input:focus,
body[data-page="menu"] input[type="email"].srt-input:focus,
body[data-page="menu"] input[type="password"].srt-input:focus,
body[data-page="menu"] input[type="search"].srt-input:focus,
body[data-page="menu"] textarea.srt-input:focus,
body[data-page="menu"] select.srt-input:focus,
body[data-page="menu"] input:focus,
body[data-page="menu"] input[type]:focus,
body[data-page="menu"] select:focus,
body[data-page="menu"] textarea:focus,
body[data-page="menu"] .form-control:focus,
body[data-page="menu"] .form-select:focus,
body[data-page="menu"] .form-check-input:focus {
    border-color: var(--srt-n800) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* — the sign-in split — */
.srt-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
}

.srt-split-art {
    position: relative;
    overflow: hidden;
    background: var(--srt-ink);
}

.srt-split-art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 45%;
    z-index: 0;
}

.srt-split-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(20, 17, 14, .86), rgba(20, 17, 14, .62));
    z-index: 1;
}

.srt-split-art-inner {
    position: relative;
    z-index: 2;
    /* the gutter, not the design's raw 56px: the panel's logo has to sit on the
       same line as the top-bar and footer logos (measured 136 vs 144, 2026-08-02) */
    padding: 56px var(--srt-gutter);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    height: 100%;
}

.srt-split-art-inner img { width: 160px; height: auto; display: block; }

body[data-page="menu"] .srt-split-art-inner h2 {
    font-size: 34px;
    line-height: 1.12;
    margin: 0;
    color: var(--srt-white);
    max-width: 16ch;
}

.srt-split-art-inner p {
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    color: #cdc6bc;
    max-width: 40ch;
}

.srt-split-form {
    padding: 72px var(--srt-gutter);
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .srt-split { grid-template-columns: 1fr; min-height: 0; }
    .srt-split-art { min-height: 280px; }
    .srt-split-art-inner { padding: 32px var(--srt-gutter); }
    .srt-split-form { padding: 40px var(--srt-gutter) 56px; }
}

/* — misc — */
.srt-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--srt-red);
    color: var(--srt-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex: 0 0 auto;
}

.srt-pager {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.srt-gap-32 { display: flex; flex-direction: column; gap: 32px; }
.srt-gap-28 { display: flex; flex-direction: column; gap: 28px; }
.srt-gap-20 { display: flex; flex-direction: column; gap: 20px; }
.srt-gap-14 { display: flex; flex-direction: column; gap: 14px; }

/* Grid modifiers — NEVER set grid-template-columns inline on a .srt-grid-*:
   an inline declaration outranks the responsive media query and the layout
   stops collapsing on phones (measured: 504px document at a 390px viewport). */
.srt-grid-2--rail { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.srt-grid-2--start { align-items: start; }

@media (max-width: 991.98px) {
    .srt-grid-2--rail { grid-template-columns: 1fr; }
}

/* My Page tab strip — Bootstrap nav-tabs re-cut as the identity's tab plate
   (the page keeps the nav-tabs markup its script binds to). */
body[data-page="menu"] .srt-sheet .mp-tabs.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-border-radius: 0;
    border-bottom: 2px solid var(--srt-red);
    gap: 0;
}

body[data-page="menu"] .srt-sheet .mp-tabs.nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    color: var(--srt-ink);
    font-size: 16px;
    font-weight: 500;
    padding: 12px 22px;
    background: transparent;
}

body[data-page="menu"] .srt-sheet .mp-tabs.nav-tabs .nav-link:hover {
    color: var(--srt-red-700);
}

body[data-page="menu"] .srt-sheet .mp-tabs.nav-tabs .nav-link.active {
    background: var(--srt-red);
    color: var(--srt-white);
    font-weight: 700;
    border: 0;
}

body[data-page="menu"] .srt-sheet .mp-tabs.nav-tabs .nav-link.active .mp-count { opacity: .8; }

body[data-page="menu"] .srt-sheet .mp-avatar {
    background: var(--srt-red);
    color: var(--srt-white);
}

/* Bordered content panels across the ported pages (guide cards, my-page blocks):
   the identity heads a block with a rule, it does not box it in. */
body[data-page="menu"] .srt-sheet .border.rounded-4,
body[data-page="menu"] .srt-sheet .card.border {
    border: 0 !important;
    border-top: 3px solid var(--srt-red) !important;
    border-radius: 0 !important;
    background: transparent;
}

/* A page head that ends on a tab strip owns no bottom padding — the strip's own
   2px rule is the separator, and extra space under it reads as a broken seam. */
.srt-page-head--tabbed { padding-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Overflow scroller — one line, never wrapped, with ◀ ▶ carets that appear
   only while the row actually overflows and dim at each end. Used by the top
   nav and the footer link row. (2026-08-02)
   ══════════════════════════════════════════════════════════════════════════ */

.srt-scroller {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.srt-scroll-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.srt-scroll-track::-webkit-scrollbar { display: none; }
.srt-scroll-track > * { flex: 0 0 auto; }

/* Carets take no space until the row overflows, so a short menu stays centred
   on its own edges instead of being padded by two invisible buttons. */
.srt-scroll-arrow {
    display: none;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    color: var(--srt-n600);
    transition: opacity .15s ease;
}

.srt-scroller.is-scrollable > .srt-scroll-arrow { display: inline-flex; }
.srt-scroller.at-start > .srt-scroll-arrow--left,
.srt-scroller.at-end > .srt-scroll-arrow--right { opacity: .22; pointer-events: none; }

.srt-scroll-arrow:hover { color: var(--srt-red-700); }

/* On the ink footer the carets read light. */
.srt-footer .srt-scroll-arrow { color: rgba(251, 247, 240, .55); }
.srt-footer .srt-scroll-arrow:hover { color: var(--srt-yellow); }

/* — the two rows that use it — */
.srt-navwrap { min-width: 0; flex: 1 1 auto; }

.srt-nav.srt-scroll-track { gap: 20px; }

.srt-footer-links {
    display: flex;
    gap: 18px;
    font-size: 14px;
    flex-wrap: nowrap;      /* one line, scrolled — never wrapped (user, 2026-08-02) */
    white-space: nowrap;
}

.srt-footer-links-wrap { width: 100%; }

@media (max-width: 991.98px) {
    .srt-nav.srt-scroll-track { gap: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Visited links — OPT-IN, editorial content only (2026-08-02)

   Navigation, tabs, buttons and cards deliberately carry NO visited state: the
   reader clicks those constantly, so "visited" would carry no information there
   and would compete with the current-page marker, which is already line red.

   Where "have I read this one?" is a real question — the blog index, the home
   News row, related posts — the answer is expressed as REDUCED EMPHASIS in the
   same neutral family, never as a new hue. A red→purple shift would be exactly
   the "why is this one a different colour?" confusion we are avoiding.

   Colour is the only lever available: browsers restrict :visited to colour-ish
   properties for privacy, so opacity/weight/marker tricks silently do nothing.
   #605d5d on court white measures ~5.9:1 — AA at body size, not just headlines.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-page="menu"] a.srt-visitable:visited,
body[data-page="menu"] h1 > a.srt-visitable:visited,
body[data-page="menu"] h2 > a.srt-visitable:visited,
body[data-page="menu"] h3 > a.srt-visitable:visited,
body[data-page="menu"] h4 > a.srt-visitable:visited {
    color: var(--srt-n700);
}

body[data-page="menu"] a.srt-visitable:hover,
body[data-page="menu"] h1 > a.srt-visitable:hover,
body[data-page="menu"] h2 > a.srt-visitable:hover,
body[data-page="menu"] h3 > a.srt-visitable:hover,
body[data-page="menu"] h4 > a.srt-visitable:hover {
    color: var(--srt-red-700) !important;
}

/* Search field + submit as ONE control: the magnifier belongs to the field it
   submits, not to the sort control that happened to sit next to it
   (user, 2026-08-02). The seam is closed — square inner corners, one shared
   hairline — so the pair reads as a single input group. */
.srt-inputgroup {
    display: flex;
    min-width: 0;
}

.srt-inputgroup > .srt-input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.srt-inputgroup > .btn {
    flex: 0 0 auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 14px;
    padding-right: 14px;
}

/* the field's own right border would double up against the button */
.srt-inputgroup > .srt-input + .btn { margin-left: -1px; }

/* ══════════════════════════════════════════════════════════════════════════
   Pagination — one component for every list (blog, drills). Previously the
   blog used a text pager and the drill list used Bootstrap's « 1 2 3 » chips,
   both landing on Bootstrap-blue actives that belong to no palette here.

   The current page is INK, not line red: red marks actions and the current
   NAV location, and reusing it for a page number would say "this is a
   destination" about something that is just where you already are.

   Specificity note: the prefix is required. `.srt-pagination .page-link`
   scores (0,2,0) and loses to the generic `a:not(.btn)` rule at (0,2,2) —
   the same trap that reddened the nav, the blog titles and the routine names.
   ══════════════════════════════════════════════════════════════════════════ */

.srt-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.srt-pagination .page-item { display: flex; }

body[data-page="menu"] .srt-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 11px;
    border: 0;
    background: transparent;
    border-radius: var(--srt-radius-md);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--srt-ink);
    box-shadow: none;
}

body[data-page="menu"] .srt-pagination .page-link:hover {
    background: color-mix(in srgb, var(--srt-ink) 8%, transparent);
    color: var(--srt-ink) !important;
}

body[data-page="menu"] .srt-pagination .page-item.active > .page-link,
body[data-page="menu"] .srt-pagination .page-link.active {
    background: var(--srt-ink);
    color: var(--srt-white) !important;
    border-radius: var(--srt-radius-md);
}

body[data-page="menu"] .srt-pagination .page-item.disabled > .page-link,
body[data-page="menu"] .srt-pagination .page-link[aria-disabled="true"] {
    opacity: .32;
    pointer-events: none;
}

/* First / Prev / Next / Last read as words on a wide screen and as carets on a
   phone, where four spelled-out controls push the page numbers off the row. */
.srt-pagination .srt-page-icon { display: none; }

@media (max-width: 575.98px) {
    .srt-pagination { gap: 2px; }
    .srt-pagination .srt-page-label { display: none; }
    .srt-pagination .srt-page-icon { display: inline-block; }
    body[data-page="menu"] .srt-pagination .page-link { min-width: 32px; padding: 0 7px; }
}

/* Equal-width button grid (the coaching band's 2x2). Buttons share one column
   width instead of sizing to their labels, so "Coaching" and "Open Tactics
   Board" line up rather than stagger. */
.srt-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.srt-btn-grid .btn {
    width: 100%;
    font-size: 16px;
    padding: 11px 14px;
}

@media (max-width: 400px) {
    /* below this the two-up row squeezes "Open Tactics Board" into two lines */
    .srt-btn-grid { grid-template-columns: 1fr; }
}

/* ── 인덱스 원자 클래스 (user 2026-08-03) ──────────────────────────────────────
   index.php / live-rooms.php 에 있던 인라인 style 을 전부 여기로 옮겼다. 인라인 style 은
   스타일시트의 어떤 규칙(!important 포함)보다 우선해서, "CSS 한 곳에서 제어" 자체를
   깨뜨린다 — 실제로 Join 버튼 우측정렬이 인라인 justify-self 때문에 세 번 되돌아갔다.
   두 렌더 경로(SSR·새로고침)가 같은 클래스만 쓰도록 마크업도 live-rooms.php 로 합쳤다. */
.srt-btn-hero  { font-size: 17px; padding: 13px 28px; }
.srt-btn-cta   { font-size: 16px; padding: 11px 22px; flex: 0 0 auto; }
.srt-btn-mini  { font-size: 12px; padding: 4px 10px; }
/* 승자 강조 — 인덱스(SSR·index-ranking.js)와 기록/마이페이지 목록이 같은 클래스를 쓴다. */
.srt-row-name.is-win,
.record-list-name.is-win { font-weight: 700; }
.srt-row-score { margin-left: auto; }

/* 세트별 점수 칸 (record.js / mypage). 이긴 세트만 빨강, 미기록은 회색. */
.srt-setpoint { display: inline-block; width: 1.8rem; text-align: center; color: var(--srt-ink, #111); }
.srt-setpoint--win  { color: var(--srt-red, #d93025); }
.srt-setpoint--none { color: #8a8a8a; }

/* 기록 목록의 레벨 숫자 — 자릿수가 달라도 폭이 흔들리지 않도록 최소폭 + 우측 정렬. */
.srt-lvl-num { min-width: 1.2rem; text-align: right; display: inline-block; }
.srt-halftone--wide  { aspect-ratio: 16 / 10; }
.srt-coach-title { font-size: clamp(26px, 3.2vw, 38px); margin: 0; line-height: 1.1; }

/* 국기 배지 — 치수는 여기서만. srt_idx_flag()/JS 렌더러가 클래스만 붙인다. */
.srt-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 16px;
    vertical-align: middle;
}
.srt-flag--globe { line-height: 1; }
.srt-flag img { display: block; width: 22px; height: 16px; object-fit: cover; border-radius: 2px; }
/* 마이페이지 목록은 행이 촘촘해 한 치수 작은 배지를 쓴다. */
.srt-flag--sm { width: 20px; min-width: 20px; height: 15px; }
.srt-flag--sm img { width: 20px; height: 15px; }

/* ── TEMP: 국기 숨김 (user 2026-08-03) ─────────────────────────────────────────
   인덱스·기록·마이페이지·온라인 매치 목록의 국기를 임시로 가린다. 국기를 만드는
   함수는 7곳(index.php / record.php / mypage/index.php / mypage/_render.php /
   index-ranking.js / record.js / footer.php)이지만 모두 .srt-flag 를 달아 두었으므로
   되살릴 때는 아래 한 블록만 지우면 된다. 마크업·국가코드 데이터는 그대로 유지된다.
   ※ 게임 화면(스코어보드)은 이 CSS를 로드하지 않으므로 script.js 의
     SRT_SHOW_COUNTRY_FLAGS 상수로 따로 끈다. */
.srt-flag { display: none !important; }

/* 라이브 스트립 헤더 높이 통일 (user 2026-08-03): Online Match 헤더에만 Refresh 버튼이 있어
   그 열만 2px 높았고, 아래 목록 전체가 다른 두 열보다 밀려 내려갔다. 세 헤더를 같은 높이로
   고정해 목록 시작선을 맞춘다(버튼 높이 24px + 여유). */
.srt-live-head { min-height: 26px; }

/* 라이브 스트립 행(Online Match · Last results)의 "P1 vs P2" 3열 그리드에서 마지막 칸을
   오른쪽 끝에 붙인다 (user 2026-08-03).
   · 마지막 칸이 버튼/빈 span(Open 방의 "Join Match")이면 칸 자체를 오른쪽으로 — justify-self.
   · 마지막 칸이 이름이면 칸은 1fr 폭을 유지해야 .srt-clip 말줄임이 살아 있으므로
     stretch 로 되돌리고 내용만 오른쪽으로 — justify-content. */
.srt-row-main > :last-child { justify-self: end; }
.srt-row-main > .srt-row-name:last-child { justify-self: stretch; justify-content: flex-end; }