Spaces:
Running
Running
| :root { | |
| --bg: #f4f6fb; | |
| --card: #ffffff; | |
| --ink: #1c2330; | |
| --ink-soft: #5b667a; | |
| --muted: #8a94a6; | |
| --line: #e6eaf1; | |
| --line-soft: #eef1f7; | |
| --accent: #a50034; | |
| --accent-2: #c4264e; | |
| --accent-dark: #7d0028; | |
| --accent-weak: #fbe9ee; | |
| --best-bg: #e7f7ee; | |
| --best-ink: #0f7a46; | |
| --worst-bg: #fdecec; | |
| --worst-ink: #bf2f2f; | |
| --shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 8px 24px rgba(20, 30, 60, .06); | |
| --radius: 14px; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--ink); | |
| font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| a { color: inherit; text-decoration: none; } | |
| .topbar { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| gap: 14px 24px; | |
| flex-wrap: wrap; | |
| padding: 16px 28px; | |
| background: var(--card); | |
| border-bottom: 3px solid var(--accent); | |
| box-shadow: 0 2px 8px rgba(20, 30, 60, .05); | |
| } | |
| .brand { display: flex; align-items: center; gap: 16px; min-width: 0; } | |
| .brand-mark { | |
| display: grid; | |
| place-items: center; | |
| width: 146px; | |
| height: 58px; | |
| border-radius: 10px; | |
| background: #fff; | |
| overflow: hidden; | |
| } | |
| .brand-mark img { | |
| display: block; | |
| max-width: 125px; | |
| max-height: 47px; | |
| object-fit: contain; | |
| } | |
| .brand-divider { width: 1px; height: 34px; background: var(--line); flex: none; } | |
| .brand h1 { margin: 0; color: var(--ink); font-size: 23px; font-weight: 800; letter-spacing: 0; line-height: 1.15; } | |
| .brand h1 span { color: var(--accent); } | |
| .brand p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; } | |
| .meta { display: flex; align-items: center; gap: 12px; } | |
| .pill { | |
| background: var(--accent-weak); | |
| color: var(--accent); | |
| padding: 5px 12px; | |
| border-radius: 999px; | |
| font-weight: 700; | |
| font-size: 12.5px; | |
| } | |
| .exaone-pill { | |
| background: var(--accent); | |
| color: #fff; | |
| box-shadow: 0 1px 8px rgba(165, 0, 52, .22); | |
| } | |
| .muted { color: var(--muted); } | |
| .viewtabs { | |
| display: flex; | |
| gap: 4px; | |
| padding: 0 28px; | |
| background: var(--card); | |
| border-bottom: 1px solid var(--line); | |
| position: sticky; | |
| top: 0; | |
| z-index: 5; | |
| overflow-x: auto; | |
| } | |
| .viewtabs button { | |
| appearance: none; | |
| border: 0; | |
| background: none; | |
| cursor: pointer; | |
| padding: 14px 16px; | |
| font: inherit; | |
| font-weight: 600; | |
| color: var(--ink-soft); | |
| border-bottom: 2.5px solid transparent; | |
| margin-bottom: -1px; | |
| white-space: nowrap; | |
| } | |
| .viewtabs button:hover { color: var(--ink); } | |
| .viewtabs button.active { color: var(--accent); border-bottom-color: var(--accent); } | |
| .content { display: flex; align-items: flex-start; } | |
| .sidebar { | |
| flex: none; | |
| width: 400px; | |
| padding: 22px 16px 24px 28px; | |
| position: sticky; | |
| top: 48px; | |
| max-height: calc(100vh - 48px); | |
| overflow-y: auto; | |
| } | |
| main { flex: 1 1 auto; min-width: 0; padding: 22px 32px 60px; } | |
| .site-footer { padding: 0 32px 36px 28px; color: var(--muted); font-size: 12px; } | |
| .panel { animation: fade .2s ease; } | |
| @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } | |
| .hint { | |
| background: var(--accent-weak); | |
| color: var(--accent-dark); | |
| border: 1px solid #f3d3dc; | |
| border-radius: 10px; | |
| padding: 10px 14px; | |
| margin: 0 0 16px; | |
| font-size: 13px; | |
| } | |
| .hint code, code { background: #fff; padding: 1px 5px; border-radius: 5px; font-size: 12px; } | |
| .overview-headline { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin: 0 0 10px; | |
| } | |
| .overview-hint { | |
| flex: 1 1 auto; | |
| margin: 0; | |
| } | |
| .overview-toolbar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| justify-content: flex-end; | |
| flex: none; | |
| } | |
| .switch-field { | |
| display: grid; | |
| grid-template-columns: 82px 48px; | |
| align-items: center; | |
| gap: 10px; | |
| justify-content: end; | |
| } | |
| .switch-title { | |
| color: var(--ink); | |
| font-size: 12px; | |
| font-weight: 800; | |
| line-height: 1; | |
| text-align: right; | |
| } | |
| .mode-switch { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .mode-switch input { position: absolute; opacity: 0; pointer-events: none; } | |
| .mode-switch i { | |
| position: relative; | |
| width: 48px; | |
| height: 24px; | |
| border-radius: 999px; | |
| background: var(--line); | |
| border: 1px solid #d4dae5; | |
| transition: background .15s ease, border-color .15s ease; | |
| } | |
| .mode-switch i::after { | |
| content: ""; | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #fff; | |
| box-shadow: 0 1px 3px rgba(20, 30, 60, .22); | |
| transition: transform .15s ease; | |
| } | |
| .mode-switch input:checked + i { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .mode-switch input:checked + i::after { transform: translateX(24px); } | |
| .specbar, .filters, .table-wrap { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .specbar { padding: 12px 14px; } | |
| .specbar + .specbar { margin-top: 14px; } | |
| .specbar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } | |
| .specbar-title { font-weight: 700; font-size: 13px; } | |
| .collapse-trigger { | |
| appearance: none; | |
| border: 0; | |
| background: none; | |
| color: var(--ink); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 0; | |
| font: inherit; | |
| font-weight: 700; | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .collapse-trigger:hover { color: var(--accent); } | |
| .collapse-mark { | |
| display: grid; | |
| place-items: center; | |
| width: 17px; | |
| height: 17px; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| line-height: 1; | |
| } | |
| .toggle-group.collapsed { display: none; } | |
| .specbar-head:has(+ .toggle-group.collapsed) { margin-bottom: 0; } | |
| .ghost-btn { | |
| margin-left: auto; | |
| appearance: none; | |
| border: 1px solid var(--line); | |
| background: #fff; | |
| color: var(--ink-soft); | |
| border-radius: 8px; | |
| padding: 5px 11px; | |
| font: inherit; | |
| font-size: 12px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .ghost-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .ghost-btn:disabled { opacity: .55; cursor: wait; } | |
| .loading-note { margin: 0; padding: 10px 2px; color: var(--muted); font-size: 12px; } | |
| .toggle-group { display: flex; flex-direction: column; gap: 14px; } | |
| .spec-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; max-width: 100%; } | |
| .spec-subcard { | |
| padding: 10px; | |
| border: 1px solid var(--line-soft); | |
| border-radius: 10px; | |
| background: #fafbfe; | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); | |
| } | |
| .spec-group-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding-bottom: 6px; | |
| border-bottom: 1px solid var(--line-soft); | |
| } | |
| .spec-group-label { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--muted); padding-left: 2px; } | |
| .spec-subcard .spec-group-label { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| color: var(--ink-soft); | |
| } | |
| .subcard-trigger { | |
| appearance: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| padding: 0 2px; | |
| border: 0; | |
| background: transparent; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .subcard-trigger:hover { color: var(--accent); } | |
| .spec-subcard .spec-chips { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| padding-top: 2px; | |
| } | |
| .spec-subcard.subcard-collapsed .spec-group-head { | |
| padding-bottom: 0; | |
| border-bottom: 0; | |
| } | |
| .spec-subcard.subcard-collapsed .spec-chips { display: none; } | |
| .spec-chips { display: flex; flex-wrap: wrap; gap: 6px; } | |
| .spec-subcard .spec-chips button { | |
| width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .spec-subcard .spec-chips button.wide { | |
| grid-column: 1 / -1; | |
| overflow: visible; | |
| text-overflow: clip; | |
| } | |
| .toggle-group .filter-chip { | |
| appearance: none; | |
| cursor: pointer; | |
| font: inherit; | |
| font-size: 12px; | |
| font-weight: 600; | |
| border: 1px solid var(--line); | |
| background: #fff; | |
| color: var(--ink-soft); | |
| padding: 5px 11px; | |
| border-radius: 14px; | |
| max-width: 100%; | |
| white-space: nowrap; | |
| word-break: normal; | |
| line-height: 1.3; | |
| } | |
| .toggle-group .filter-chip:hover { border-color: var(--accent-2); } | |
| .toggle-group .filter-chip.on { background: var(--accent-weak); border-color: #f0c2cf; color: var(--accent-dark); } | |
| .toggle-group .filter-chip.off { opacity: .45; text-decoration: line-through; } | |
| .filters { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 14px; | |
| padding: 14px 16px; | |
| margin-bottom: 14px; | |
| } | |
| .filters label { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| color: var(--muted); | |
| font-size: 11.5px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .4px; | |
| } | |
| .filters select { | |
| appearance: none; | |
| font: inherit; | |
| font-weight: 600; | |
| color: var(--ink); | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 9px; | |
| padding: 8px 30px 8px 11px; | |
| min-width: 190px; | |
| cursor: pointer; | |
| } | |
| .metric-desc { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); padding-left: 4px; } | |
| .dir.up { color: var(--best-ink); font-weight: 700; } | |
| .dir.down { color: var(--worst-ink); font-weight: 700; } | |
| .dir-arrow { | |
| display: inline-block; | |
| margin-left: 4px; | |
| font-weight: 800; | |
| } | |
| .dir-arrow.up { color: var(--best-ink); } | |
| .dir-arrow.down { color: var(--worst-ink); } | |
| .winner-strip { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin: 0 0 14px; | |
| padding: 10px 14px; | |
| border: 1px solid #f3d3dc; | |
| border-radius: 10px; | |
| background: #fff7fa; | |
| color: var(--accent-dark); | |
| } | |
| .winner-strip span { | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .winner-strip b { color: var(--accent); } | |
| .winner-strip strong { margin-left: auto; font-variant-numeric: tabular-nums; } | |
| .overview-plot { | |
| position: relative; | |
| margin: 0 0 16px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: #fff; | |
| } | |
| .plot-head { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .plot-head h2 { | |
| margin: 0; | |
| font-size: 14px; | |
| } | |
| .plot-head p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .plot-scroll { overflow-x: auto; } | |
| .plot-body { position: relative; } | |
| .metric-progress-grid { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 12px; | |
| } | |
| .rank-size-plot { | |
| display: block; | |
| min-width: 760px; | |
| width: 100%; | |
| height: auto; | |
| } | |
| .plot-grid { | |
| stroke: #eef1f6; | |
| stroke-width: 1; | |
| } | |
| .plot-axis { | |
| stroke: #cbd5e1; | |
| stroke-width: 1.2; | |
| } | |
| .plot-line { | |
| fill: none; | |
| stroke-width: 1.7; | |
| stroke-opacity: .5; | |
| stroke-dasharray: none; | |
| } | |
| .plot-point circle { | |
| stroke: #fff; | |
| stroke-width: 1.5; | |
| filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .18)); | |
| } | |
| .plot-point:hover circle { | |
| stroke: var(--ink); | |
| stroke-width: 2; | |
| } | |
| .plot-star { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| paint-order: stroke; | |
| font-size: 20px; | |
| font-weight: 900; | |
| cursor: default; | |
| } | |
| .plot-point:hover .plot-star { | |
| stroke: var(--ink); | |
| stroke-width: 1px; | |
| } | |
| .plot-best-label { | |
| fill: var(--ink); | |
| font-size: 12px; | |
| font-weight: 900; | |
| paint-order: stroke; | |
| stroke: #fff; | |
| stroke-width: 3px; | |
| } | |
| .metric-progress-card { | |
| overflow-x: auto; | |
| padding: 10px 12px; | |
| border: 1px solid var(--line-soft); | |
| border-radius: 8px; | |
| background: #fafbfe; | |
| } | |
| .metric-progress-card h3 { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin: 0 0 6px; | |
| color: var(--ink); | |
| font-size: 13px; | |
| } | |
| .metric-progress-card h3 span { | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-weight: 700; | |
| } | |
| .metric-progress-plot { | |
| display: block; | |
| min-width: 760px; | |
| width: 100%; | |
| height: auto; | |
| } | |
| .metric-progress-line { | |
| fill: none; | |
| stroke-width: 1.7; | |
| stroke-opacity: .5; | |
| stroke-dasharray: none; | |
| } | |
| .metric-progress-point circle { | |
| stroke: #fff; | |
| stroke-width: 1.5; | |
| filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .18)); | |
| } | |
| .metric-progress-point:hover circle { | |
| stroke: var(--ink); | |
| stroke-width: 2; | |
| } | |
| .plot-tooltip { | |
| position: absolute; | |
| z-index: 5; | |
| min-width: 260px; | |
| padding: 8px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #fff; | |
| box-shadow: 0 12px 28px rgba(15, 23, 42, .16); | |
| color: var(--ink); | |
| font-size: 12px; | |
| font-weight: 700; | |
| line-height: 1.55; | |
| pointer-events: none; | |
| } | |
| .plot-tooltip table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .plot-tooltip th, | |
| .plot-tooltip td { | |
| padding: 4px 6px; | |
| border-bottom: 1px solid var(--line-soft); | |
| text-align: left; | |
| white-space: nowrap; | |
| } | |
| .plot-tooltip tr:last-child th, | |
| .plot-tooltip tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| .plot-tooltip th { | |
| color: var(--muted); | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| } | |
| .plot-tooltip td { | |
| color: var(--ink); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .plot-label { | |
| fill: var(--muted); | |
| font-size: 11px; | |
| font-weight: 700; | |
| } | |
| .plot-axis-title { | |
| fill: var(--ink-soft); | |
| font-size: 11px; | |
| font-weight: 800; | |
| } | |
| .plot-legend { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 8px 12px; | |
| color: var(--ink-soft); | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .plot-legend span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| min-width: 0; | |
| } | |
| .plot-legend b { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .plot-legend i { | |
| flex: 0 0 auto; | |
| width: 11px; | |
| height: 11px; | |
| border-radius: 50%; | |
| } | |
| @media (max-width: 760px) { | |
| .overview-headline { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .overview-toolbar { justify-content: flex-start; } | |
| .plot-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .metric-progress-grid { grid-template-columns: 1fr; } | |
| } | |
| .table-wrap { overflow: auto; } | |
| table.board { width: 100%; min-width: 980px; border-collapse: collapse; } | |
| table.board th { | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| background: #fafbfe; | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-align: left; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--line); | |
| cursor: pointer; | |
| user-select: none; | |
| white-space: nowrap; | |
| } | |
| table.board th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } | |
| table.board th.sorted { color: var(--accent); } | |
| table.board th.sorted::after { content: " ▾"; font-size: 10px; } | |
| table.board th.sorted.asc::after { content: " ▴"; } | |
| table.board td { | |
| padding: 11px 16px; | |
| border-bottom: 1px solid var(--line-soft); | |
| white-space: nowrap; | |
| } | |
| table.board tbody tr:last-child td { border-bottom: 0; } | |
| table.board tbody tr.model-row:hover { background: #f7f8fd; } | |
| table.board td.metric-score { cursor: pointer; } | |
| table.board td.rank-sum { cursor: pointer; } | |
| table.board td.tier-rank, | |
| table.board td.metric-score, | |
| table.board td.rank-sum, | |
| table.board tr.model-row td.model-link { | |
| transition: background .12s ease, box-shadow .12s ease; | |
| } | |
| table.board td.tier-rank:hover, | |
| table.board td.metric-score:hover, | |
| table.board td.rank-sum:hover, | |
| table.board tr.model-row td.model-link:hover { | |
| background: var(--accent-weak); | |
| box-shadow: inset 0 0 0 1px #efb7c8; | |
| } | |
| table.board tbody tr.exaone-row td { | |
| background: #fff7fa; | |
| border-top: 1px solid #f3d3dc; | |
| border-bottom-color: #f3d3dc; | |
| } | |
| table.board tbody tr.exaone-row .model-name { | |
| color: var(--accent); | |
| font-weight: 800; | |
| } | |
| table.smap tr.exaone-row td.mh { | |
| color: var(--accent); | |
| font-weight: 800; | |
| } | |
| .model-name { font-weight: 600; } | |
| .model-name a { | |
| color: inherit; | |
| text-decoration: underline; | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 3px; | |
| } | |
| .model-type-cell { | |
| text-align: center; | |
| width: 78px; | |
| } | |
| .model-type-mark { | |
| display: inline-block; | |
| width: 12px; | |
| height: 12px; | |
| vertical-align: middle; | |
| } | |
| .model-type-mark.type-pretrained, | |
| .model-type-mark.type-zero-shot { | |
| background: #d93025; | |
| border-radius: 50%; | |
| } | |
| .model-type-mark.type-statistical { | |
| background: #f6b84b; | |
| transform: rotate(45deg); | |
| } | |
| .filter-chip .model-type-mark { | |
| flex: 0 0 auto; | |
| margin-right: 6px; | |
| } | |
| .skip { color: var(--muted); } | |
| .val-best { color: var(--best-ink); font-weight: 700; } | |
| .rankbadge { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 22px; | |
| height: 22px; | |
| padding: 0 6px; | |
| border-radius: 7px; | |
| font-weight: 700; | |
| font-size: 12px; | |
| background: #eef1f7; | |
| color: var(--ink-soft); | |
| } | |
| .rankbadge.g1 { background: #fef3c7; color: #92600a; } | |
| .rankbadge.g2 { background: #eef0f4; color: #4b5563; } | |
| .rankbadge.g3 { background: #fbe7d6; color: #9a4f1c; } | |
| .hint-badge { | |
| margin: 0 2px; | |
| vertical-align: middle; | |
| } | |
| .cell-example { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| margin: 0 3px; | |
| padding: 3px 6px; | |
| border: 1px solid var(--line); | |
| border-radius: 7px; | |
| background: #fff; | |
| box-shadow: 0 1px 2px rgba(20, 30, 60, .06); | |
| vertical-align: middle; | |
| } | |
| .rank-total { | |
| margin-left: 4px; | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .cell-sub { | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| .score-align { | |
| display: inline-block; | |
| min-width: 32px; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .tier-rank { cursor: pointer; } | |
| .tier-rank:hover .rankbadge { background: var(--accent); color: #fff; box-shadow: 0 1px 6px rgba(165, 0, 52, .28); } | |
| .cat-rank { | |
| cursor: pointer; | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| .cat-rank:hover { | |
| background: var(--accent-weak); | |
| text-decoration: underline; | |
| } | |
| .smap-wrap { overflow: auto; max-height: 80vh; border: 1px solid var(--line); background: #fff; } | |
| table.smap { border-collapse: collapse; font-size: 12px; } | |
| table.smap th, table.smap td { border: 1px solid var(--line-soft); padding: 3px 7px; text-align: center; white-space: nowrap; } | |
| table.smap th.mh, table.smap td.mh { position: sticky; left: 0; background: #fff; text-align: left; z-index: 1; max-width: 340px; overflow: hidden; text-overflow: ellipsis; } | |
| table.smap thead th { position: sticky; top: 0; background: #f8fafc; z-index: 2; vertical-align: bottom; } | |
| table.smap thead th.mh { z-index: 3; } | |
| table.smap th.sp { min-width: 42px; height: 150px; } | |
| table.smap th.sp > span { | |
| writing-mode: vertical-rl; | |
| display: inline-block; | |
| max-height: 136px; | |
| font-weight: 600; | |
| } | |
| table.smap th.sp .sp-stack { | |
| writing-mode: horizontal-tb; | |
| display: inline-flex; | |
| align-items: flex-end; | |
| justify-content: center; | |
| gap: 2px; | |
| max-height: none; | |
| } | |
| table.smap th.sp .sp-stack span { | |
| writing-mode: vertical-rl; | |
| display: inline-block; | |
| max-height: 136px; | |
| font-weight: 600; | |
| } | |
| table.smap td.ov, table.smap th.ov { font-weight: 700; } | |
| .scrim { position: fixed; inset: 0; background: rgba(20, 25, 45, .34); z-index: 20; animation: fade .15s ease; } | |
| .drawer { | |
| --drawer-w: min(660px, 92vw); | |
| --drawer2-w: min(540px, 92vw); | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| height: 100vh; | |
| width: var(--drawer-w); | |
| background: var(--card); | |
| z-index: 21; | |
| box-shadow: -12px 0 40px rgba(20, 30, 60, .18); | |
| padding: 20px 22px; | |
| overflow-y: auto; | |
| animation: slidein .2s ease; | |
| transition: right .2s ease; | |
| } | |
| @keyframes slidein { from { transform: translateX(100%); } to { transform: none; } } | |
| #detail.shifted { right: var(--drawer2-w); } | |
| .drawer2 { | |
| --drawer-w: var(--drawer2-w); | |
| z-index: 22; | |
| } | |
| .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } | |
| .drawer-head h2 { margin: 0; font-size: 18px; } | |
| .drawer table { width: 100%; border-collapse: collapse; } | |
| .drawer thead th { | |
| text-align: left; | |
| color: var(--muted); | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: .4px; | |
| padding: 8px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .drawer thead th.num { text-align: right; } | |
| .drawer tbody td { | |
| padding: 8px; | |
| border-bottom: 1px solid var(--line-soft); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .drawer td.num { text-align: right; } | |
| .drawer .note { color: var(--muted); font-size: 12px; margin-top: 14px; } | |
| .drawer .detail-k, .funnel { | |
| margin: 0 0 14px; | |
| padding: 10px 14px; | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| } | |
| .drawer .detail-k b { font-size: 18px; } | |
| .drawer .detail-k .muted { font-size: 12px; font-weight: 400; } | |
| .period-card { | |
| margin: 0 0 12px; | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: #fff; | |
| } | |
| .period-card h3 { | |
| margin: 0 0 8px; | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| font-weight: 800; | |
| } | |
| .period-help { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 6px; | |
| margin: 0; | |
| } | |
| .period-help span { | |
| border: 1px solid var(--line); | |
| background: #fafbfe; | |
| border-radius: 8px; | |
| padding: 6px 7px; | |
| color: var(--ink-soft); | |
| font-size: 11px; | |
| line-height: 1.2; | |
| text-align: center; | |
| } | |
| .period-help b { | |
| display: block; | |
| color: var(--accent); | |
| font-size: 12px; | |
| } | |
| .guide-h { margin: 22px 0 6px; font-size: 15px; color: var(--accent); } | |
| .gp { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; margin: 2px 0 12px; } | |
| .guide-grid { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .guide-card { | |
| overflow: auto; | |
| padding: 14px; | |
| border: 1px solid var(--line-soft); | |
| border-radius: 10px; | |
| background: #fafbfe; | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); | |
| } | |
| .guide-card h3 { | |
| margin: 0 0 10px; | |
| color: var(--accent); | |
| font-size: 14px; | |
| } | |
| .guide-table { min-width: 620px; } | |
| @media (max-width: 980px) { | |
| #detail.shifted { right: 0; } | |
| } | |
| @media (max-width: 860px) { | |
| .content { flex-direction: column; } | |
| .sidebar { position: static; width: auto; max-height: none; overflow: visible; padding: 16px 28px 0; } | |
| .toggle-group { flex-direction: row; gap: 14px 22px; } | |
| main { padding: 16px 14px 40px; width: 100%; } | |
| .topbar { padding: 18px 16px 14px; } | |
| } | |