/* Rulebook viewer styles. The app shell (topbar, nav, .sheet, .foot, palette) comes from /styles.css, loaded first; this file only adds the rulebook sub-nav (tabs), the language toggle, and the document-content styling. */ /* ---- language toggle: show one language at a time, driven by ---- */ html[lang="ko"] [lang="en"] { display: none; } html[lang="en"] [lang="ko"] { display: none; } /* inline alternates keep flow tidy */ span[lang] { display: inline; } .lang-toggle { display: inline-flex; flex-shrink: 0; border: 2px solid var(--teal-ink); border-radius: 999px; overflow: hidden; background: var(--card); } .lang-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 5px 13px; border: none; background: transparent; color: var(--teal-ink); cursor: pointer; line-height: 1.4; } .lang-btn + .lang-btn { border-left: 2px solid var(--teal-ink); } .lang-btn.on { background: var(--teal-ink); color: #fff; } /* ---- document tab strip (sub-nav under the app topbar) ---- */ .rb-subbar { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto; padding: 12px 16px 0; } .rb-tabs { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .rb-tabs::-webkit-scrollbar { display: none; } .rb-tab { flex: 0 0 auto; font: inherit; white-space: nowrap; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--teal-ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; } .rb-tab:hover { color: var(--orange-ink); border-color: var(--mustard-dk); } .rb-tab.on { background: var(--teal-ink); color: #fff; border-color: var(--teal-ink); } .rb-tab:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; } .rb-panel:focus { outline: none; } /* ---- document card ---- */ .doc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 26px; line-height: 1.5; box-shadow: 0 1px 0 var(--mustard-dk), 0 10px 22px rgba(80, 60, 20, 0.10); } .doc-head { text-align: center; border-bottom: 3px double var(--mustard-dk); padding-bottom: 14px; margin-bottom: 18px; } .doc-title { font-family: "Jua", "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: 26px; line-height: 1.2; margin: 0; color: var(--ink); } .doc-eyebrow { font-family: "Bungee", "Rubik", sans-serif; font-size: 11px; letter-spacing: 1px; color: var(--orange-ink); text-transform: uppercase; margin: 0 0 6px; } .doc-sub { font-size: 13.5px; color: var(--ink-soft); margin: 6px 0 0; } /* ---- chapters / articles ---- */ .chapter { margin: 20px 0; } .chapter:first-of-type { margin-top: 8px; } .chapter-h { font-family: "Jua", "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: 18px; color: var(--teal-ink); margin: 0 0 10px; padding: 5px 0 5px 12px; border-left: 5px solid var(--mustard); background: linear-gradient(90deg, var(--card-2), transparent); } ol.arts, ol.sub { list-style: none; padding-left: 0; margin: 0; } ol.arts { counter-reset: art; } ol.arts > li { counter-increment: art; position: relative; padding-left: 2.2em; margin: 8px 0; } ol.arts > li::before { content: counter(art) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--teal-ink); font-variant-numeric: tabular-nums; } ol.sub { counter-reset: sub; margin: 6px 0 2px; } ol.sub > li { counter-increment: sub; position: relative; padding-left: 2.2em; margin: 4px 0; color: var(--ink-soft); } ol.sub > li::before { content: counter(sub) ")"; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--orange-ink); font-variant-numeric: tabular-nums; } ol.sub.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; } @media (max-width: 520px) { ol.sub.cols2 { grid-template-columns: 1fr; } } ol.sub.alpha > li::before { content: counter(sub, upper-alpha) ")"; } ol.sub.alpha .subhead { margin: 0 0 4px; } .lead { margin: 4px 0; } .amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gold-ink); white-space: nowrap; } .term { font-weight: 700; color: var(--ink); } .eng-inline { font-family: "Rubik", sans-serif; } /* ---- bullets ---- */ ul.bul { list-style: none; padding-left: 0; margin: 6px 0; } ul.bul > li { position: relative; padding-left: 1.4em; margin: 4px 0; } ul.bul > li::before { content: "\2022"; position: absolute; left: 0.2em; color: var(--orange); font-weight: 700; } /* ---- callouts / notes ---- */ .callout { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--mustard-dk); border-left: 5px solid var(--mustard-dk); border-radius: 10px; background: var(--card-2); font-size: 14.5px; } .callout .callout-h { font-weight: 700; color: var(--gold-ink); margin-right: 6px; } .subhead { font-family: "Jua", "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: 15.5px; color: var(--orange-ink); margin: 16px 0 6px; } /* ---- generic tables (prize list, point system) ---- */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; } table.grid { border-collapse: collapse; width: 100%; font-size: 14px; } table.grid th, table.grid td { border: 1px solid var(--line); padding: 7px 9px; text-align: center; } table.grid thead th { background: var(--card-2); color: var(--ink); font-weight: 700; } table.grid td.lbl, table.grid th.lbl { text-align: left; font-weight: 600; } table.grid tr.total td { font-weight: 700; background: #fbf7ea; color: var(--gold-ink); border-top: 2px solid var(--mustard-dk); } table.grid .num { font-variant-numeric: tabular-nums; } table.grid .hl { color: var(--red-ink); font-weight: 700; } .pts-subnote { font-weight: 400; color: var(--ink-soft); font-size: 12px; margin-top: 3px; } /* ---- modifiers (kept here, not inline, so the app's CSP allows them) ---- */ .note-line { margin: 0 0 8px; color: var(--ink-soft); font-size: 14px; } .subhead.sm { font-size: 14px; } ol.arts.from-5 { counter-reset: art 4; } .callout .bul { margin: 6px 0 0; } .callout .lead:last-child { margin-bottom: 0; } /* ---- matchup matrix ---- */ .mm-block { margin: 20px 0; } .mm-block-h { display: flex; align-items: baseline; gap: 10px; font-family: "Jua", "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: 17px; color: var(--teal-ink); margin: 0 0 8px; } .mm-block-h .mm-count { font-family: "Bungee", sans-serif; font-size: 13px; color: var(--orange-ink); } table.mm { border-collapse: collapse; width: 100%; font-size: 13.5px; } table.mm th, table.mm td { border: 1px solid var(--line); padding: 6px 7px; text-align: center; white-space: nowrap; } table.mm thead th { background: var(--card-2); color: var(--ink-soft); font-weight: 700; font-size: 12px; } table.mm td.wk { font-weight: 700; color: var(--ink); background: var(--card-2); } table.mm td.bye { color: var(--ghost); font-style: italic; } table.mm tr.posround td { background: #fbf2da; } table.mm tr.posround td.wk { color: var(--orange-ink); } .mm-pos { display: block; font-size: 10px; font-weight: 700; color: var(--orange-ink); margin-top: 1px; } .mm-legend { font-size: 13px; color: var(--ink-soft); margin: 6px 0 14px; line-height: 1.45; } .mm-legend .swatch { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -1px; background: #fbf2da; border: 1px solid var(--mustard-dk); border-radius: 3px; } /* ---- footer note ---- */ .rb-foot-note { font-size: 11.5px; color: var(--ghost); margin: 0; } /* ---- print: drop the chrome, print the open document ---- */ @media print { .lang-toggle, .rb-subbar, .foot { display: none; } .doc { border: none; box-shadow: none; border-radius: 0; padding: 0; } .chapter { break-inside: avoid; } table.grid th, table.grid td, table.mm th, table.mm td { border-color: #999; } .mm-block { break-inside: avoid; } }