/* ============================================================ 觀察者 v2.1 — Three-way race monitor Visual base: 한지(paper) + 먹(ink) + 주서(vermilion) + 청람(sky) + 후보별 식별 액센트 ============================================================ */ :root{ /* Paper / ink palette (v2 base, preserved) */ --bg: #f6f5f1; --bg2: #efede6; --surface: #ffffff; --surface-2: #fbfaf6; --border: #e6e1d4; --border-2: #d8d2c0; --ink: #1a1612; --ink-2: #3a2f25; --ink-3: #6b5d4a; --ink-4: #968670; --ink-5: #b8ad95; /* Semantic accents (kept for state) */ --vermilion: #a8392c; --vermilion-soft: #d4796b; --vermilion-bg: #fbeae6; --ochre: #b88321; --ochre-bg: #f7eed5; --moss: #4a6041; --moss-soft: #7d9573; --moss-bg: #e8efe3; --plum: #5a3a4f; /* Sky / indigo (v2 neutral chart color) */ --indigo: #2b86c8; --indigo-soft: #6fb0db; --indigo-bg: #e4f0fa; --sky: #2b86c8; --sky-soft: #6fb0db; --sky-deep: #1a5f95; --sky-bg: #e4f0fa; --sky-ink: #0e2a45; /* Candidate identity colors KKY (김관영) — 하늘색 light-sky #4ba3d4 LWT (이원택) — 네이비 deep-navy #1f3a68 YJM (양정무) — 빨강 carmine #c8362a */ --c-kky: #4ba3d4; --c-kky-deep: #1f6da1; --c-kky-bg: #e8f3fb; --c-kky-ink: #0e3a5c; --c-lwt: #1f3a68; --c-lwt-deep: #0f2547; --c-lwt-bg: #e2e7f0; --c-lwt-ink: #0c1c38; --c-yjm: #c8362a; --c-yjm-deep: #8e2218; --c-yjm-bg: #fae9e6; --c-yjm-ink: #4a1410; /* Objective (전체) — neutral, slightly de-saturated */ --c-obj: #6b5d4a; --c-obj-deep: #3a2f25; --c-obj-bg: #efede6; --shadow-sm: 0 1px 2px rgba(26,22,18,0.04); --shadow-md: 0 2px 8px rgba(26,22,18,0.06), 0 1px 2px rgba(26,22,18,0.04); --shadow-lg: 0 8px 24px -8px rgba(26,22,18,0.16), 0 2px 4px rgba(26,22,18,0.04); --radius: 14px; --radius-sm: 8px; --radius-xs: 6px; } /* When the page sets data-candidate="kky|lwt|yjm|obj" on , --accent / --accent-deep / --accent-bg / --accent-ink resolve to that candidate. Components reference --accent. */ html[data-candidate="kky"]{ --accent: var(--c-kky); --accent-deep: var(--c-kky-deep); --accent-bg: var(--c-kky-bg); --accent-ink: var(--c-kky-ink); } html[data-candidate="lwt"]{ --accent: var(--c-lwt); --accent-deep: var(--c-lwt-deep); --accent-bg: var(--c-lwt-bg); --accent-ink: var(--c-lwt-ink); } html[data-candidate="yjm"]{ --accent: var(--c-yjm); --accent-deep: var(--c-yjm-deep); --accent-bg: var(--c-yjm-bg); --accent-ink: var(--c-yjm-ink); } html[data-candidate="obj"], html:not([data-candidate]){ --accent: var(--ink-2); --accent-deep: var(--ink); --accent-bg: var(--bg2); --accent-ink: var(--ink); } *{ box-sizing: border-box; } html, body{ margin:0; padding:0; background: var(--bg); color: var(--ink); font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .mono{ font-family: "IBM Plex Mono", "JetBrains Mono", monospace; } .serif{ font-family: "Fraunces", "Noto Serif KR", serif; } .han{ font-family: "Noto Serif KR", serif; font-weight: 700; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; } /* ============================================================ Shell ============================================================ */ .app-shell{ display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } /* ----- Sidebar ----- */ .sidebar{ background: linear-gradient(180deg, #0f1d2c 0%, #0a1620 100%); color: #c8d6e2; padding: 24px 0 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; } .sidebar-brand{ padding: 0 22px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } .sidebar-brand .logo{ font-family: "Fraunces", "Noto Serif KR", serif; font-size: 26px; font-weight: 500; color: #fff; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 10px; } .sidebar-brand .logo .han{ font-family: "Noto Serif KR", serif; font-weight: 700; font-size: 28px; } .sidebar-brand .logo .v{ font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #968670; letter-spacing: 0.12em; } .sidebar-brand .tag{ font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.18em; color: #968670; margin-top: 6px; } /* Candidate switcher in sidebar */ .cand-switcher{ padding: 14px 12px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); } .cand-switcher-label{ font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.18em; color: #6b5d4a; padding: 0 10px 8px; text-transform: uppercase; } .cand-pill-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .cand-pill{ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 8px 8px; cursor: pointer; transition: all 0.12s; display: flex; flex-direction: column; gap: 2px; text-align: left; color: inherit; } .cand-pill:hover{ background: rgba(255,255,255,0.07); } .cand-pill .swatch{ width: 18px; height: 4px; border-radius: 2px; background: var(--cand-color, #888); margin-bottom: 4px; } .cand-pill .nm{ font-family: "Noto Serif KR", serif; font-size: 13px; font-weight: 500; color: #f1f6fb; } .cand-pill .meta{ font-family: "IBM Plex Mono", monospace; font-size: 8.5px; color: #968670; letter-spacing: 0.06em; } .cand-pill.active{ background: rgba(255,255,255,0.10); border-color: var(--cand-color); box-shadow: 0 0 0 1px var(--cand-color); } .cand-pill.active .nm{ color: #fff; } .cand-pill.obj{ grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; } .cand-pill.obj .swatch{ width: 4px; height: 18px; margin-bottom: 0; } .cand-pill.obj .nm{ flex:1; } /* Sidebar nav */ .sidebar-nav{ padding: 14px 12px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; } .sidebar-nav::-webkit-scrollbar{ width: 4px; } .sidebar-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.1); border-radius: 2px; } .sidebar-section{ font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.18em; color: #6b5d4a; padding: 14px 12px 6px; text-transform: uppercase; } .sidebar-link{ display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: #b8ad95; font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.12s, color 0.12s; cursor: pointer; } .sidebar-link:hover{ background: rgba(143,189,224,0.08); color: #f1f6fb; } .sidebar-link.active{ background: var(--accent, #2b86c8); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 6px 14px -6px var(--accent, rgba(43,134,200,0.6)); } .sidebar-link.active .ico{ color: #fff; } .sidebar-link .ico{ width: 16px; height: 16px; color: #968670; flex-shrink: 0; } .sidebar-link .badge{ margin-left: auto; background: var(--vermilion); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 9px; padding: 2px 6px; border-radius: 6px; font-weight: 600; } .sidebar-link.active .badge{ background: rgba(255,255,255,0.25); } .sidebar-foot{ padding: 14px 22px 18px; border-top: 1px solid rgba(255,255,255,0.06); font-family: "IBM Plex Mono", monospace; font-size: 10px; color: #6b5d4a; letter-spacing: 0.06em; } .sidebar-foot .row{ display: flex; justify-content: space-between; padding: 2px 0; } .sidebar-foot .row .v{ color: #b8ad95; } .sidebar-close{ display: none; background: transparent; border: none; color: #b8ad95; cursor: pointer; padding: 4px; } /* ----- Main / Topbar ----- */ .main-area{ display: flex; flex-direction: column; min-height: 100vh; min-width: 0; } .topbar{ height: 64px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 28px; gap: 20px; position: sticky; top: 0; z-index: 10; } .topbar-mobile-brand{ display: none; align-items: baseline; gap: 6px; } .topbar-mobile-brand .han{ font-size: 20px; } .topbar-mobile-brand .v{ font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-4); letter-spacing: 0.1em; } .topbar-title{ min-width: 0; flex-shrink: 1; } .topbar-title h1{ margin: 0; font-family: "Fraunces", "Noto Serif KR", serif; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-title .crumb{ font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .topbar-title .crumb .accent-tag{ background: var(--accent-bg); color: var(--accent-deep); padding: 1px 6px; border-radius: 3px; font-weight: 600; } .topbar-spacer{ flex: 1; } .topbar-search{ display: flex; align-items: center; gap: 8px; background: var(--bg2); padding: 8px 14px; border-radius: 10px; width: 240px; color: var(--ink-3); font-size: 12.5px; } .topbar-search input{ border: none; background: transparent; outline: none; flex: 1; font-family: inherit; color: var(--ink); min-width: 0; } .topbar-search .kbd{ font-size: 9.5px; background: var(--surface); padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--ink-3); } .topbar-btn{ width: 36px; height: 36px; border-radius: 10px; background: var(--bg2); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); position: relative; } .topbar-btn:hover{ background: var(--border); } .topbar-btn .dot{ position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--vermilion); border: 1.5px solid var(--surface); } .topbar-user{ display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 10px; border-radius: 10px; cursor: pointer; } .topbar-user:hover{ background: var(--bg2); } .topbar-user .avatar{ width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Fraunces", serif; font-size: 14px; font-weight: 500; } .topbar-user .name{ font-size: 12.5px; font-weight: 500; white-space: nowrap; } .topbar-user .role{ font-family: "IBM Plex Mono", monospace; font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.08em; white-space: nowrap; } /* Content */ .content{ padding: 26px 28px 80px; max-width: 1640px; margin: 0 auto; width: 100%; } /* ============================================================ Page header strip — accent bar on candidate / objective pages ============================================================ */ .page-strip{ background: var(--accent-bg); border-left: 4px solid var(--accent); padding: 14px 20px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 18px; margin-bottom: 22px; } .page-strip .strip-icon{ width: 44px; height: 44px; background: var(--accent); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: "Noto Serif KR", serif; font-weight: 700; font-size: 18px; flex-shrink: 0; } .page-strip .strip-body{ flex: 1; min-width: 0; } .page-strip .strip-eyebrow{ font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--accent-deep); text-transform: uppercase; } .page-strip .strip-title{ font-family: "Fraunces", "Noto Serif KR", serif; font-size: 22px; font-weight: 500; color: var(--accent-ink); margin: 2px 0 0; } .page-strip .strip-meta{ font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } .page-strip .strip-stats{ display: flex; gap: 22px; align-items: center; } .page-strip .stat{ text-align: right; font-family: "IBM Plex Mono", monospace; } .page-strip .stat .lbl{ font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; } .page-strip .stat .v{ font-size: 18px; font-weight: 600; color: var(--accent-ink); } .page-strip .stat .delta{ font-size: 10.5px; } .page-strip .stat .delta.up{ color: var(--moss); } .page-strip .stat .delta.down{ color: var(--vermilion); } /* ============================================================ Card — base panel ============================================================ */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; position: relative; } .card.flush{ padding: 0; } .card.dark{ background: var(--sky-ink); color: #f1f6fb; border-color: transparent; } .card.tinted{ background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 24%, transparent); } .card-h{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .card.flush .card-h{ padding: 16px 20px 12px; margin-bottom: 0; } .card.dark .card-h{ border-bottom-color: rgba(255,255,255,0.1); } .card-h .t{ font-family: "Fraunces", "Noto Serif KR", serif; font-size: 14px; font-weight: 500; color: var(--ink); } .card.dark .card-h .t{ color: #fff; } .card-h .eye{ font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-4); text-transform: uppercase; } .card.dark .card-h .eye{ color: #968670; } .card-h-r{ display: flex; gap: 6px; align-items: center; } /* Section title */ .section-title{ display: flex; align-items: baseline; gap: 12px; margin: 30px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .section-title .num{ font-family: "Fraunces", serif; font-size: 12px; font-weight: 500; color: var(--accent-deep); letter-spacing: 0.04em; } .section-title .t{ font-family: "Fraunces", "Noto Serif KR", serif; font-size: 18px; font-weight: 500; color: var(--ink); } .section-title .sub{ font-size: 12px; color: var(--ink-3); margin-left: auto; } /* Pills / chips */ .pill{ display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.04em; font-weight: 600; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2); } .pill.ghost{ background: transparent; } .pill.solid{ background: var(--accent); color: #fff; border-color: transparent; } .pill.high{ background: var(--vermilion-bg); color: var(--vermilion); border-color: transparent; } .pill.med{ background: var(--ochre-bg); color: var(--ochre); border-color: transparent; } .pill.low{ background: var(--moss-bg); color: var(--moss); border-color: transparent; } .pill.kky{ background: var(--c-kky-bg); color: var(--c-kky-deep); border-color: transparent; } .pill.lwt{ background: var(--c-lwt-bg); color: var(--c-lwt-deep); border-color: transparent; } .pill.yjm{ background: var(--c-yjm-bg); color: var(--c-yjm-deep); border-color: transparent; } .pill.obj{ background: var(--c-obj-bg); color: var(--c-obj-deep); border-color: transparent; } /* Metric */ .metric{ font-family: "IBM Plex Mono", monospace; } .metric .lbl{ font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; } .metric .v{ font-family: "Fraunces", serif; font-size: 26px; font-weight: 500; color: var(--ink); line-height: 1; } .metric .v.lg{ font-size: 36px; } .metric .delta{ font-size: 11px; font-weight: 500; } .metric .delta.up{ color: var(--moss); } .metric .delta.down{ color: var(--vermilion); } .metric .delta.flat{ color: var(--ink-4); } /* Mobile bottom nav */ .bottom-nav{ display: none; } .more-sheet{ display: none; } /* ============================================================ Responsive — tablet + mobile ============================================================ */ @media (max-width: 1100px){ .topbar-user-meta{ display: none; } .topbar-search{ width: 180px; } } @media (max-width: 860px){ .app-shell{ grid-template-columns: 1fr; } .sidebar{ display: none; } .topbar-mobile-brand{ display: flex; } .topbar-title{ display: none; } .topbar-search{ display: none; } .topbar{ padding: 0 16px; gap: 10px; } .content{ padding: 16px 14px 96px; } .bottom-nav{ display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--surface); border-top: 1px solid var(--border); z-index: 30; padding-bottom: env(safe-area-inset-bottom); } .bn-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: none; color: var(--ink-3); cursor: pointer; position: relative; padding: 0; } .bn-item .ic{ width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .bn-item .lbl{ font-size: 10px; font-weight: 500; } .bn-item.active{ color: var(--accent-deep); } .bn-item.active .ic{ color: var(--accent); } .bn-item .badge{ position: absolute; top: 6px; left: 50%; margin-left: 4px; background: var(--vermilion); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 8px; line-height: 1.2; } .more-sheet{ display: block; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 0.18s; } .more-sheet.open{ pointer-events: auto; opacity: 1; } .more-sheet-bd{ position: absolute; inset: 0; background: rgba(14,42,69,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .more-sheet-panel{ position: absolute; bottom: 0; left: 0; right: 0; background: var(--surface); border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.22s ease-out; box-shadow: 0 -8px 32px rgba(0,0,0,0.18); } .more-sheet.open .more-sheet-panel{ transform: translateY(0); } .more-sheet-handle{ width: 36px; height: 4px; background: var(--border-2); border-radius: 99px; margin: 0 auto 14px; } .more-sheet-h{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding: 0 4px; } .more-sheet-h h3{ margin: 0; font-family: "Fraunces", serif; font-size: 16px; font-weight: 500; } .more-sheet-h .crumb{ font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-3); text-transform: uppercase; } .more-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .more-item{ display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 10px; background: var(--bg2); color: var(--ink-2); border: none; text-align: left; cursor: pointer; font-size: 13px; font-weight: 500; } .more-item .ic{ width: 18px; height: 18px; color: var(--ink-3); } .more-item.active{ background: var(--accent-bg); color: var(--accent-deep); } .more-item.active .ic{ color: var(--accent); } .more-item .badge{ margin-left: auto; background: var(--vermilion); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 9px; padding: 2px 6px; border-radius: 6px; font-weight: 600; } .more-item .tag{ margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 8.5px; color: var(--ink-4); letter-spacing: 0.06em; } /* Candidate switcher when on mobile — swap into topbar */ .topbar-cand-switcher{ display: flex; gap: 4px; align-items: center; margin-left: auto; } .topbar-cand-switcher .tcs{ width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid transparent; background: var(--bg2); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-family: "Noto Serif KR", serif; font-weight: 700; font-size: 12px; color: var(--ink-3); } .topbar-cand-switcher .tcs.active{ background: var(--cand-color); color: #fff; border-color: var(--cand-color); } } @media (min-width: 861px){ .topbar-cand-switcher{ display: none; } } /* ============================================================ Race / share charts (objective dashboard primitives) ============================================================ */ .share-stack{ display: flex; height: 40px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .share-stack .seg{ display: flex; align-items: center; justify-content: center; color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; min-width: 0; } .race-row{ display: grid; grid-template-columns: 80px 1fr 56px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); } .race-row:last-child{ border-bottom: none; } .race-row .nm{ font-family: "Noto Serif KR", serif; font-size: 13px; font-weight: 500; } .race-row .bar{ height: 18px; background: var(--bg2); border-radius: 4px; position: relative; overflow: hidden; } .race-row .bar .fill{ position: absolute; inset: 0 auto 0 0; background: var(--cand-color, var(--accent)); border-radius: 4px; transition: width 0.4s; } .race-row .v{ font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; text-align: right; } /* ============================================================ Tables / list ============================================================ */ .tbl{ width: 100%; border-collapse: collapse; font-size: 12px; } .tbl th{ font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--border); } .tbl td{ padding: 9px 10px; border-bottom: 1px dashed var(--border); vertical-align: middle; } .tbl tr:hover td{ background: var(--bg2); } /* Newsprint column — re-used from v2 newspaper hub feel */ .newscol{ font-family: "Noto Serif KR", serif; } .newscol p{ font-size: 13.5px; line-height: 1.7; margin: 0 0 8px; color: var(--ink-2); } .newscol .lead{ font-size: 15px; font-weight: 500; } .newscol .drop::first-letter{ font-size: 36px; font-weight: 700; float: left; line-height: 0.9; margin: 4px 6px 0 0; color: var(--accent-deep); font-family: "Fraunces", serif; } /* ============================================================ Network (Co-mention) — shared style ============================================================ */ .net-wrap{ position: relative; width: 100%; } /* Hex grid (14 시군) */ .hex-cell text{ font-family: "IBM Plex Mono", monospace; font-size: 9px; } /* Sparkline tone */ .spark{ display: block; } /* Utility */ .row{ display: flex; gap: 12px; align-items: center; } .col{ display: flex; flex-direction: column; gap: 8px; } .grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1100px){ .grid-3{ grid-template-columns: 1fr 1fr; } .grid-4{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } } /* Loading splash */ .splash{ position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 100; } .splash .han{ font-size: 48px; color: var(--ink); } .splash .v{ font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-4); margin-left: 10px; letter-spacing: 0.12em; } /* Print */ @media print{ .sidebar, .topbar, .bottom-nav, .more-sheet{ display: none !important; } .app-shell{ grid-template-columns: 1fr; } .content{ padding: 0; } } /* ============================================================ Mobile fixes — 인라인 grid-template-columns / 표 / 차트 대응 (HTML 인라인 스타일을 덮어쓰기 위해 !important 사용) ============================================================ */ /* 가로 오버플로우 방지: 어떤 요소도 viewport보다 넓어지지 않게 */ html, body{ overflow-x: hidden; } @media (max-width: 1100px){ .hero-grid{ grid-template-columns: 1fr !important; } } @media (max-width: 860px){ .content{ overflow-x: hidden; } /* card 안 콘텐츠가 카드 폭을 넘으면 가로 스크롤 (표·차트 보호) */ .card{ overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 카드 헤더 텍스트가 너무 커서 잘리지 않게 */ .card-h{ flex-wrap: wrap; gap: 8px; } /* topbar 브랜드가 다른 flex 형제(후보 스위처)에 밀려 줄바꿈되는 문제 */ .topbar-mobile-brand{ flex-shrink: 0; white-space: nowrap; } .topbar{ gap: 10px; } /* 모바일에서 topbar-user 아바타와 기타 부가 버튼은 숨겨서 가로 오버플로우 차단 */ .topbar-user{ display: none !important; } } @media (max-width: 640px){ /* 인라인 'gridTemplateColumns: "2fr 1fr"' 등 모두 무효화 */ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr !important; } .hero-grid{ grid-template-columns: 1fr !important; gap: 14px !important; } /* race-row: 80/1fr/56 → 자동 컬럼 (이름·게이지·값) */ .race-row{ grid-template-columns: auto 1fr auto !important; gap: 8px; } /* 표 폰트 축소 */ .tbl{ font-size: 11px; } .tbl th, .tbl td{ padding: 6px 6px; } /* 카드 패딩 축소 */ .card{ padding: 14px 14px; } /* page-strip: 통계는 본문 아래로 떨어뜨려서 제목이 충분한 폭을 갖도록 */ .page-strip{ flex-wrap: wrap; padding: 12px 14px; gap: 12px; } .page-strip .strip-icon{ width: 36px; height: 36px; font-size: 16px; } .page-strip .strip-body{ flex: 1; min-width: 60%; } .page-strip .strip-title{ font-size: 17px; } .page-strip .strip-stats{ flex-basis: 100%; justify-content: flex-start; gap: 14px; border-top: 1px dashed var(--border-2); padding-top: 8px; } .page-strip .stat{ text-align: left; } .page-strip .stat .v{ font-size: 14px; } /* section-title sub 줄바꿈 */ .section-title{ flex-wrap: wrap; } .section-title .sub{ flex-basis: 100%; margin-left: 0; } /* dark 히어로 카드: 헤더 안의 인라인 flex(타이틀+탭)가 모바일에서 좌우로 짤리지 않게 → 세로 스택 */ .card.dark > div:first-child{ display: block !important; } .card.dark > div:first-child > div:last-child{ margin-top: 10px; flex-wrap: wrap; } } /* ≤480: 인라인 grid 모두 단일 컬럼 (alerts row, candidate row 등 5/3-col px 그리드) */ @media (max-width: 640px){ [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; row-gap: 4px; } } @media (max-width: 480px){ .content{ padding: 12px 10px 96px; } .card{ padding: 12px 12px; } .topbar{ padding: 0 10px; } /* 표 가로 스크롤이 카드 안에서 자연스럽게 */ .card .tbl{ min-width: 100%; } }