:root { /* Light Industrial Benchmark Workbench palette. Warm gray canvas, flat white work surfaces, navy accent reserved for selection/primary actions only, hairline borders instead of shadows. */ --bg: #f2f3f1; --panel: #fbfbfa; --panel-raised: #ffffff; --ink: #17202a; --muted: #65717d; --line: #cfd5d9; --line-strong: #9da8b1; --blue: #16577a; --blue-soft: #e4edf3; --green: #14745a; --green-soft: #e2f0ea; --yellow: #a86500; --yellow-soft: #f7edda; --red: #b42318; --red-soft: #f8e6e4; --violet: #5f4bb6; --violet-soft: #eeeafd; --surface-soft: #f8fafc; --surface-tint: #eef2f6; /* VRAM memory-map bar gradient (weights uses --blue; these are the receding shades for kv-cache/other/runtime segments). */ --memmap-kv: #4f8fb0; --memmap-other: #7fa6b8; --memmap-runtime: #9db8c6; --blue-gradient-start: #1c6a90; /* Text/hover shade for solid var(--blue) fills (buttons, active tabs). Light mode's --blue is dark navy, so white text works; dark mode's --blue is deliberately lightened for legibility on a dark page, which flips the contrast need to a dark ink instead. */ --on-blue: #ffffff; --blue-hover: #0f3d68; --shadow: none; --radius-sm: 3px; --radius-md: 5px; --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; /* Matches .app-shell's own centering math (width: min(1540px, 100vw - 48px); margin: 18px auto) so the desktop split-view inspector panel can align its right edge with the app-shell's right edge without being its DOM sibling. */ --shell-gutter: max(24px, calc((100vw - 1540px) / 2)); --inspector-width: clamp(360px, 28vw, 520px); --simple-inspector-width: clamp(440px, 32vw, 520px); } /* Dark theme. Same structural palette (warm-neutral canvas, one navy accent, hairline borders, no shadows) inverted for a dark surface, not a separate design -- toggled by [data-theme="dark"] on , set in app.js. */ [data-theme="dark"] { --bg: #14171a; --panel: #1b1f23; --panel-raised: #21262b; --ink: #e7eaee; --muted: #9aa4ae; --line: #333a41; --line-strong: #4a535c; --blue: #6fb2e0; --blue-soft: #1c2e3b; --green: #5fc9a6; --green-soft: #163229; --yellow: #e0ab52; --yellow-soft: #3a2e14; --red: #ee8a80; --red-soft: #3a1e1c; --violet: #b3a4ec; --violet-soft: #26213f; --surface-soft: #22272c; --surface-tint: #262c32; --memmap-kv: #3f7a9a; --memmap-other: #2e5f78; --memmap-runtime: #1f4356; --blue-gradient-start: #3f7aa0; --on-blue: #0d1e2a; --blue-hover: #8fc4e8; --shadow: none; } .num, .mono-num, .metric-value, .compare-value { font-family: var(--mono); font-variant-numeric: tabular-nums; } * { box-sizing: border-box; } html { min-width: 320px; } body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; letter-spacing: 0; } [hidden] { display: none !important; } button, input, select { font: inherit; } button { color: inherit; } h1, h2, h3, p { margin-top: 0; } .app-header { min-height: 60px; padding: 9px 0; border-bottom: 1px solid var(--line); background: var(--panel-raised); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1540px, calc(100% - 48px)); min-height: 42px; margin: 0 auto; } .brand-block { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; } .eyebrow, .section-kicker { margin: 0 0 4px; color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; } h1 { margin-bottom: 0; font-size: 20px; font-weight: 700; line-height: 1.15; } h2 { margin-bottom: 0; font-size: 24px; line-height: 1.2; } h3 { margin-bottom: 10px; font-size: 14px; font-weight: 600; } .header-nav { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; } .header-nav a { color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; } .language-toggle, .theme-toggle { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 2px; margin-left: 8px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); white-space: nowrap; } .language-toggle button, .theme-toggle button { min-width: 30px; min-height: 24px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; line-height: 24px; } .language-toggle button:hover, .theme-toggle button:hover { color: var(--blue); } .language-toggle button.active, .theme-toggle button.active { background: var(--blue); color: var(--on-blue); } .language-toggle button.active:hover, .theme-toggle button.active:hover { color: var(--on-blue); } .header-nav a:hover { color: var(--blue); } html[lang="en"] .result-toolbar select { min-width: 145px; max-width: 210px; } html[lang="en"] .result-toolbar .search-wrap { flex-basis: 260px; } html[lang="en"] .advanced-tools-inline { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); } html[lang="en"] .workload-tabs { gap: 14px; } html[lang="en"] .simple-mode-head { flex-wrap: wrap; } html[lang="en"] .simple-mode-head > div:first-child { flex: 1 1 520px; } .app-shell { display: grid; gap: 0; width: min(1540px, calc(100vw - 48px)); margin: 18px auto; } .core-task-switcher { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-raised); } .core-task-switcher > div:first-child { flex: 0 1 310px; } .core-task-switcher strong { display: block; font-size: 15px; } .core-task-actions { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 8px; width: min(680px, 100%); } .core-task-button { display: grid; gap: 3px; min-height: 54px; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel-raised); color: var(--ink); cursor: pointer; text-align: left; } .core-task-button:hover { border-color: var(--blue); } .core-task-button.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); } .core-task-button span { font-size: 13px; font-weight: 800; } .core-task-button small { color: var(--muted); font-size: 11px; } .hardware-panel, .results-panel { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); } .hardware-panel { border-radius: var(--radius-md) var(--radius-md) 0 0; } .results-panel { border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); } .hardware-topline { display: grid; grid-template-columns: minmax(280px, 400px) minmax(260px, 1fr) auto; align-items: center; gap: 18px 24px; min-width: 0; padding: 14px 22px; } .primary-gpu-control { min-width: 0; } .primary-gpu-control .field { gap: 6px; } .primary-gpu-control .field > span { color: var(--ink); font-size: 13px; } .primary-gpu-control select, .primary-gpu-control input { min-height: 40px; border-color: var(--line-strong); font-weight: 700; } .hardware-copy { min-width: 0; } .hardware-copy strong { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: 18px; font-weight: 700; line-height: 1.25; } .hardware-piece { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } .dot-separator { color: var(--muted); } .hardware-copy p { max-width: 100%; margin: 4px 0 0; color: var(--muted); font-size: 13px; } .gpu-source-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; } .gpu-source-links a { color: var(--blue); font-size: 11px; font-weight: 800; text-decoration: none; } .gpu-source-links a:hover { text-decoration: underline; } .hardware-meta-line { display: flex; flex-wrap: wrap; gap: 0 8px; } .settings-toggle { align-self: center; white-space: nowrap; } .hardware-top-actions { display: flex; align-items: center; gap: 7px; } .placement-entry-button { white-space: nowrap; } body.placement-task-active #hardwarePanel { border-radius: var(--radius-md); } body.placement-task-active #hardwarePanel > :not(#gpuPlacementPanel) { display: none !important; } .view-toggle { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; } .app-mode-toggle { display: flex; gap: 6px; padding: 12px 22px; background: var(--surface-soft); border-top: 1px solid var(--line); } .app-mode-tab { flex: 1 1 0; min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel-raised); color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 800; } .app-mode-tab:hover { border-color: var(--blue); color: var(--blue); } .app-mode-tab.is-active { border-color: var(--blue); background: var(--blue); color: var(--on-blue); } .workload-tabs { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel-raised); } .workload-tab { min-width: 0; min-height: 46px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0 0 2px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 700; } .workload-tab:hover { color: var(--blue); } .workload-tab.is-active { border-bottom-color: var(--blue); color: var(--blue); } .ghost-button, .toggle-button, .icon-button, .back-button { min-height: 36px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 12px; background: var(--surface-soft); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 700; } .ghost-button:hover, .toggle-button:hover, .back-button:hover, .icon-button:hover { background: var(--blue-soft); } .primary-button { min-height: 36px; border: 1px solid var(--blue); border-radius: var(--radius-md); padding: 0 13px; background: var(--blue); color: var(--on-blue); cursor: pointer; font-size: 13px; font-weight: 800; } .primary-button:hover { background: var(--blue-hover); } button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: 0.55; } .toggle-button.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); } .view-toggle .toggle-button { width: 34px; min-height: 34px; padding: 0; font-size: 18px; line-height: 1; } .settings-panel { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(120px, 1fr)); gap: 10px 12px; padding: 16px 18px 18px; background: var(--surface-soft); } .settings-drawer { border-top: 1px solid var(--line); } .hardware-editor { grid-template-columns: minmax(270px, 0.95fr) minmax(340px, 1.3fr) minmax(290px, 1fr); gap: 8px; padding: 10px 14px; } .settings-cluster { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 9px 10px 10px; background: var(--panel-raised); } .settings-cluster h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; color: var(--ink); font-size: 12px; font-weight: 800; } .settings-cluster h3 span { border-radius: var(--radius-sm); padding: 2px 6px; background: var(--surface-tint); color: var(--muted); font-size: 9px; } .settings-cluster-fields { display: grid; gap: 7px; min-width: 0; } .settings-cluster-fields-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .settings-cluster-fields-secondary { grid-template-columns: minmax(180px, 1fr) 68px; } .hardware-editor .field { gap: 4px; } .hardware-editor .field > span { font-size: 10.5px; } .hardware-editor input, .hardware-editor select { min-height: 32px; padding: 5px 8px; font-size: 12px; } .hardware-editor .field-control-pair { gap: 5px; } .hardware-editor .field-control-pair.is-custom { grid-template-columns: minmax(0, 0.9fr) minmax(105px, 1fr); } .hardware-editor .settings-note { margin-top: 6px; font-size: 9.5px; line-height: 1.35; } .advanced-tools-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--surface-soft); } .advanced-tools-inline > .gpu-placement-label { grid-column: 1 / -1; margin: 0; } .advanced-tools-inline > .hf-import-panel { margin-bottom: 0; } .advanced-tools-inline > .hf-import-panel[open] { grid-column: 1 / -1; } .advanced-tools-inline > .hf-import-panel > summary { min-height: 34px; padding: 8px 10px; } .settings-note { align-self: end; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .advanced-panel { grid-template-columns: repeat(10, minmax(80px, 1fr)); } .workload-settings { gap: 7px 8px; border-top: 1px solid var(--line); padding: 10px 14px 12px; background: var(--panel-raised); } .workload-settings .field { gap: 4px; } .workload-settings .field > span { font-size: 10.5px; } .workload-settings input, .workload-settings select { min-height: 32px; padding: 5px 8px; font-size: 12px; } .workload-settings .field-control-pair { gap: 5px; } .field { display: grid; gap: 7px; min-width: 0; } .field-wide { grid-column: span 2; } .field-control-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; } .field-control-pair.is-custom { grid-template-columns: minmax(0, 0.95fr) minmax(100px, 0.65fr); } @media (min-width: 761px) { .advanced-panel .field:has(.field-control-pair) { grid-column: span 2; } } .field span { color: var(--muted); font-size: 12px; font-weight: 700; } input, select { width: 100%; min-width: 0; min-height: 36px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 10px; background: var(--panel-raised); color: var(--ink); } input:focus, select:focus, button:focus-visible { outline: 3px solid rgba(34, 94, 168, 0.2); outline-offset: 2px; } .results-panel { min-width: 0; padding: 18px 22px 20px; } .onboarding-screen { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); } .onboarding-inner { display: grid; gap: 14px; max-width: 720px; padding: 36px 32px 34px; } .onboarding-inner h2 { margin: 0; } .onboarding-inner > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .onboarding-quickpicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 6px; } .onboarding-gpu-card { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; background: var(--panel-raised); color: var(--ink); text-align: left; cursor: pointer; font: inherit; } .onboarding-gpu-card:hover, .onboarding-gpu-card:focus-visible { border-color: var(--blue); background: var(--blue-soft); } .onboarding-gpu-card strong { font-size: 13px; font-weight: 700; } .onboarding-gpu-card span { color: var(--muted); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; } .onboarding-search { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); } .onboarding-search .field { flex: 1 1 260px; gap: 6px; } .onboarding-search-hint { color: var(--muted); font-size: 11.5px; white-space: nowrap; } .summary-filterbar { position: sticky; top: 0; z-index: 7; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding-bottom: 0; background: var(--panel-raised); } .summary-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0 10px; background: transparent; cursor: pointer; font-size: 13px; } .summary-chip span { color: var(--muted); font-weight: 700; } .summary-chip strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; } .summary-chip.is-active { border-color: var(--blue); background: var(--blue-soft); } .summary-chip.is-active span, .summary-chip.is-active strong { color: var(--blue); } .result-toolbar { position: sticky; top: 48px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; padding-top: 8px; background: var(--panel-raised); } .result-toolbar .result-meta { flex: 0 0 auto; margin-right: 2px; } .result-toolbar .search-wrap { flex: 1 1 200px; min-width: 160px; } .result-toolbar select { flex: 1 1 130px; min-width: 110px; max-width: 170px; } .result-toolbar .view-toggle { flex: 0 0 auto; margin-left: auto; } .calculation-basis-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-soft); } .calculation-basis-strip div { min-width: 0; } .calculation-basis-strip span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; } .calculation-basis-strip strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 13px; } .hf-import-panel { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); } .hf-import-panel summary { padding: 11px 13px; color: var(--blue); cursor: pointer; font-size: 13px; font-weight: 800; } .hf-import-form { padding: 0 13px 13px; } .hf-import-form > label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 800; } .hf-import-controls { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 8px; } .hf-import-form p, .hf-import-form output { display: block; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .hf-import-form output.is-success { color: var(--green); font-weight: 800; } .hf-import-form output.is-error { color: var(--red); font-weight: 800; } .hf-import-form output.is-loading { color: var(--blue); font-weight: 800; } .simple-mode-panel { margin-bottom: 16px; border: 1px solid var(--line); border-top: 2px solid var(--blue); border-radius: var(--radius-md); background: var(--panel-raised); } .simple-mode-body { padding: 18px; } .simple-mode-body p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; } .simple-mode-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .simple-mode-head > div:first-child { min-width: 0; } .simple-mode-head h2 { margin-bottom: 6px; font-size: 20px; } .simple-mode-head p { max-width: 720px; } /* Plain inline stat text instead of three separate bordered badge boxes -- reads as one line of supporting detail rather than three more pills competing for attention next to the heading. */ .simple-data-coverage { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px; max-width: 410px; color: var(--muted); font-size: 11px; font-weight: 700; } .simple-data-coverage span { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } .simple-data-coverage span + span::before { content: "·"; margin-right: 4px; color: var(--line-strong); } .simple-data-coverage strong { color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; } .simple-current-gpu { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; color: var(--muted); font-size: 11px; font-weight: 800; } .simple-current-gpu strong { overflow-wrap: anywhere; color: var(--blue); font-size: 12px; } .simple-mode-hint { margin-top: 10px; color: var(--muted); font-size: 11px; } .simple-mode-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .simple-mode-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; } .simple-pick-card { display: grid; gap: 8px; position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 13px; background: var(--panel-raised); text-align: left; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .simple-pick-card:hover { border-color: var(--blue); background: var(--blue-soft); } /* The top pick gets a real, permanent visual weight difference (tinted background + full border, not just a hover-only tint or thin accent line) so it doesn't read as a 3rd identical box with a different-colored badge -- there should be one clear place the eye lands first. */ .simple-pick-card.is-top-pick { border: 2px solid var(--blue); background: var(--blue-soft); } .simple-pick-card.is-top-pick .simple-pick-head strong { font-size: 15px; } .simple-pick-card.is-selected { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); } .simple-pick-card-toggle { display: grid; gap: 8px; width: 100%; border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } /* Plain colored text instead of a filled pill -- the card itself (border + tint on the top pick) already carries the rank signal, so a solid badge here was redundant emphasis and one more pill shape among many. */ .simple-pick-rank { width: fit-content; color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } .simple-pick-card.is-top-pick .simple-pick-rank { font-size: 12px; } .simple-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .simple-pick-head strong { font-size: 13.5px; line-height: 1.3; } .simple-pick-specs { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 11.5px; font-weight: 700; } .simple-pick-reasons { display: flex; flex-direction: column; gap: 3px; border-top: 1px dashed var(--line); padding-top: 8px; color: var(--ink); font-size: 11px; line-height: 1.4; } .simple-pick-cta { color: var(--blue); font-size: 11px; font-weight: 800; cursor: pointer; } .simple-pick-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; } .simple-pick-copy { color: var(--muted); font-size: 10.5px; font-weight: 800; } .simple-pick-copy:hover, .simple-pick-copy:focus-visible { color: var(--blue); text-decoration: underline; } .simple-explore-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; } .simple-share-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; } .simple-share-actions .ghost-button, .simple-explore-actions > .ghost-button { min-height: 32px; padding: 0 10px; font-size: 11px; } .simple-gpu-empty { min-height: 150px; justify-items: center; align-content: center; padding: 22px; } .simple-gpu-empty .primary-button { margin-top: 2px; } .detail-share-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 18px; background: var(--surface-soft); } .detail-share-actions > span { color: var(--muted); font-size: 11px; font-weight: 800; } .detail-share-actions > div { display: flex; flex-wrap: wrap; gap: 6px; } .detail-share-actions .ghost-button { min-height: 30px; padding: 0 9px; font-size: 11px; } .placement-workspace { min-width: 0; background: var(--panel); } .placement-workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 24px; border-bottom: 1px solid var(--line); background: var(--panel-raised); } .placement-workspace-head h2 { margin: 0 0 6px; } .placement-workspace-head p { margin: 0; color: var(--muted); font-size: 13px; } .placement-workspace-actions { display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto; } .placement-guide { position: relative; } .placement-guide > summary { min-height: 34px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel-raised); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; white-space: nowrap; } .placement-guide > summary::-webkit-details-marker { display: none; } .placement-guide > summary::after { content: " +"; color: var(--blue); } .placement-guide[open] > summary { border-color: var(--blue); color: var(--blue); } .placement-guide[open] > summary::after { content: " −"; } .placement-guide-popover { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(420px, calc(100vw - 48px)); padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel-raised); } .placement-guide-popover > strong { display: block; margin-bottom: 10px; font-size: 14px; } .placement-guide-popover ol { margin: 0; padding-left: 20px; color: var(--ink); font-size: 12px; line-height: 1.7; } .placement-guide-popover dl { display: grid; gap: 7px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); } .placement-guide-popover dl > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; } .placement-guide-popover dt, .placement-guide-popover dd { margin: 0; font-size: 11px; line-height: 1.5; } .placement-guide-popover dt { color: var(--blue); font-weight: 800; } .placement-guide-popover dd, .placement-guide-popover > p { color: var(--muted); } .placement-guide-popover > p { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; } .placement-welcome { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(520px, 1.3fr); gap: 28px; padding: 30px 24px 34px; } .placement-welcome-copy { align-self: center; } .placement-welcome-copy h3 { margin: 0 0 10px; font-size: 22px; } .placement-welcome-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .placement-starter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .placement-starter-card { display: grid; align-content: center; gap: 5px; min-height: 96px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-raised); color: var(--ink); cursor: pointer; text-align: left; } .placement-starter-card:hover { border-color: var(--blue); background: var(--blue-soft); } .placement-starter-card.is-direct { border-style: dashed; } .placement-starter-card strong { font-size: 14px; } .placement-starter-card span { color: var(--muted); font-size: 12px; } .gpu-placement-body.placement-builder { display: grid; gap: 12px; padding: 18px 24px 26px; } .placement-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 2px; padding: 0; list-style: none; } .placement-stepper li { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; color: var(--muted); font-size: 12px; font-weight: 800; } .placement-stepper li::after { position: absolute; right: 14px; left: 40px; bottom: 0; height: 2px; background: var(--line); content: ""; } .placement-stepper li:last-child::after { display: none; } .placement-stepper li > span { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--panel-raised); font-family: var(--mono); font-size: 11px; } .placement-stepper li.is-ready { color: var(--blue); } .placement-stepper li.is-ready > span { border-color: var(--blue); background: var(--blue-soft); } .placement-step-card { padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-raised); } .placement-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .placement-step-head > span { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: var(--radius-sm); background: var(--blue); color: var(--on-blue); font-family: var(--mono); font-size: 11px; font-weight: 800; } .placement-step-head > div { display: grid; gap: 2px; } .placement-step-head strong { font-size: 14px; } .placement-step-head small { color: var(--muted); font-size: 11.5px; } .placement-step-card .placement-type-tabs, .placement-step-card .placement-usage-tabs, .placement-step-card .placement-strategy-tabs { gap: 16px; margin-bottom: 10px; padding: 0; border: 0; } .placement-step-card .workload-tab { min-height: 38px; } .placement-model-gate { display: grid; justify-items: start; gap: 5px; padding: 18px; color: var(--muted); } .placement-model-gate strong { color: var(--ink); font-size: 12px; } .placement-model-gate span { font-size: 11.5px; } .placement-model-gate .ghost-button { margin-top: 4px; } .placement-advanced-conditions { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); } .placement-advanced-conditions > summary, .placement-calculation-details > summary { padding: 10px 12px; color: var(--blue); cursor: pointer; font-size: 12px; font-weight: 800; } .placement-advanced-goals { padding: 0 11px; } .placement-advanced-conditions .gpu-placement-policy-toggles { margin: 10px; background: var(--panel-raised); } .placement-result-overview { display: grid; gap: 7px; margin-bottom: 10px; padding: 15px 16px; border: 1px solid var(--blue); border-left-width: 4px; border-radius: var(--radius-md); background: var(--blue-soft); } .placement-result-overview > strong { font-size: 16px; line-height: 1.45; } .placement-overview-kicker { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } .placement-overview-metrics { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink); font-size: 12px; font-weight: 700; } .placement-result-stage > .gpu-placement-baseline { margin-bottom: 10px; } .placement-calculation-details { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); } .placement-calculation-details[open] { padding-bottom: 12px; } .placement-calculation-details > .gpu-placement-result, .placement-calculation-details > .gpu-placement-export { margin-right: 12px; margin-left: 12px; } .simple-next-actions { display: flex; flex-wrap: wrap; gap: 8px; } .gpu-placement-body { padding: 0 13px 13px; } .gpu-placement-export { margin-top: 12px; } .gpu-placement-export-panel { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-raised); } .gpu-placement-export-panel summary { padding: 10px 12px; color: var(--blue); cursor: pointer; font-size: 12.5px; font-weight: 800; } .gpu-placement-export-body { padding: 0 12px 12px; } .gpu-placement-export-body > p { margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.45; } .export-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 6px; } .export-block-head span { color: var(--ink); font-size: 12px; font-weight: 800; } .export-block-actions { display: flex; gap: 6px; } .export-block-actions .ghost-button { min-height: 28px; padding: 0 10px; font-size: 11px; } .gpu-placement-body p { margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.45; } .gpu-placement-label, .gpu-placement-body > label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; } .gpu-inventory-list { display: flex; flex-direction: column; gap: 6px; } .gpu-inventory-row { display: grid; grid-template-columns: minmax(180px, 1fr) 72px auto; gap: 8px; align-items: center; } .placement-type-tabs { margin: 0 0 8px; } #placementModelSearch { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 12px; padding: 8px 10px; margin-bottom: 8px; } .placement-model-list { border: 1px solid var(--line); border-radius: var(--radius-md); max-height: 220px; overflow-y: auto; background: var(--panel-raised); } .placement-model-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 6px; padding: 7px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--line); } .placement-model-item:last-child { border-bottom: none; } .placement-model-item:hover { background: var(--surface-soft); } .placement-model-item.is-checked { background: var(--blue-soft); } .placement-model-item input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); } .placement-model-item > span { min-width: 0; overflow-wrap: anywhere; } .placement-model-item small { max-width: 240px; overflow: hidden; color: var(--muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; } .placement-model-selected { display: grid; gap: 7px; min-height: 20px; } .placement-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 6px 3px 10px; font-size: 11px; font-weight: 700; background: var(--surface-soft); } .placement-chip button { border: none; background: none; cursor: pointer; font-size: 13px; line-height: 1; color: var(--muted); padding: 2px; } .placement-chip button:hover { color: var(--red); } .placement-model-config { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-raised); } .placement-model-config > summary { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(100px, auto) 28px; align-items: center; gap: 8px; min-height: 38px; padding: 6px 8px 6px 11px; cursor: pointer; list-style: none; } .placement-model-config > summary::-webkit-details-marker { display: none; } .placement-model-config > summary span { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .placement-model-config > summary small { color: var(--muted); font-size: 11px; } .placement-model-config > summary button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 17px; } .placement-model-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface-soft); } .placement-model-config-grid .field { min-width: 0; } .placement-model-replica { display: flex; align-items: center; align-self: end; gap: 7px; min-height: 34px; color: var(--muted); font-size: 11px; } .placement-model-replica input[type="checkbox"], .gpu-placement-policy-toggles input[type="checkbox"] { flex: 0 0 auto; width: 15px; min-width: 15px; height: 15px; min-height: 15px; margin: 0; padding: 0; } .gpu-placement-capacity-line { font-size: 12px; color: var(--ink); opacity: 0.82; padding-bottom: 4px; } .gpu-placement-usage-hint { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .gpu-placement-goals { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; max-width: 760px; } .gpu-placement-goals .field { flex: 1 1 180px; min-width: 160px; } .gpu-placement-policy-toggles { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); } .gpu-placement-policy-toggles label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 11.5px; white-space: nowrap; } .gpu-placement-policy-toggles label.is-disabled { opacity: 0.48; } .gpu-placement-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .gpu-placement-baseline { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; } .gpu-placement-baseline:has(.capacity-warning) { background: var(--red-soft); } .capacity-warning { color: var(--red); font-weight: 800; } .gpu-placement-diagnosis-box { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-left: 3px solid var(--yellow); border-radius: var(--radius-sm); background: var(--yellow-soft); font-size: 12.5px; line-height: 1.55; } .gpu-placement-diagnosis-box.is-balanced { border-left-color: var(--green); background: var(--green-soft); } .gpu-placement-diagnosis-box.is-warning { border-left-color: var(--red); background: var(--red-soft); } .placement-diagnosis-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .placement-diagnosis-head > strong { color: var(--ink); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; } .placement-diagnosis-head small { color: var(--muted); font-size: 10.5px; } .gpu-placement-diagnosis-box > strong { display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); } .gpu-placement-diagnosis-box p { margin: 0 0 6px; color: var(--ink); } .gpu-placement-diagnosis-note { color: var(--muted) !important; font-size: 12px; } .gpu-placement-diagnosis-box .ghost-button { margin-top: 2px; } .placement-adjustment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 9px; } .placement-adjustment-card { display: grid; align-content: start; gap: 7px; padding: 9px; border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-raised) 88%, transparent); } .placement-adjustment-card > strong { font-size: 11.5px; } .placement-adjustment-delta { display: grid; gap: 2px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; line-height: 1.45; } .placement-adjustment-card .ghost-button { justify-self: start; min-height: 29px; margin-top: 2px; } .placement-calculation-basis { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-strong); } .placement-calculation-basis summary { cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 700; } .placement-calculation-basis p { margin: 7px 0 0; font-size: 11px; } #runPlacementButton { margin-top: 0; } .gpu-placement-plan-compare-intro { margin: 10px 0 8px; color: var(--muted); font-size: 12px; } .placement-plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .placement-plan-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-soft); } .placement-plan-card.is-active { border-color: var(--blue); background: var(--blue-soft); } .placement-plan-card-head strong { display: block; font-size: 13px; color: var(--ink); } .placement-plan-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .placement-plan-card-body { display: flex; flex-direction: column; gap: 4px; } .placement-plan-card-body p { margin: 0; font-size: 12px; color: var(--ink); } .placement-plan-search-mode { display: none; } .placement-plan-card .ghost-button { margin-top: auto; align-self: flex-start; } .placement-plan-card .ghost-button:disabled { opacity: 0.55; cursor: default; } .gpu-placement-result { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .gpu-placement-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-soft); } .placement-search-note { margin: 0; color: var(--muted); font-size: 10.5px; } .placement-memory-map { display: grid; gap: 5px; margin: 8px 0 10px; } .placement-memory-track { display: flex; width: 100%; height: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-tint); } .placement-memory-track > span { display: block; min-width: 0; height: 100%; } .placement-memory-weights { background: var(--blue); } .placement-memory-kv { background: var(--memmap-kv); } .placement-memory-runtime { background: var(--memmap-runtime); } .placement-memory-safety { background: repeating-linear-gradient(135deg, var(--yellow) 0 3px, var(--yellow-soft) 3px 6px); } .placement-memory-free { background: var(--surface-tint); } .placement-memory-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; color: var(--muted); font-size: 9.5px; } .placement-memory-legend span { display: inline-flex; align-items: center; gap: 4px; } .placement-memory-legend i { display: inline-block; width: 7px; height: 7px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 1px; } .gpu-placement-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 800; } .gpu-placement-card-head small { color: var(--muted); font-weight: 600; } .gpu-placement-model-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; padding: 4px 0; border-top: 1px dashed var(--line); } .gpu-placement-model-row:first-of-type { border-top: none; margin-top: 6px; } .placement-primary-badge { display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } .placement-replica-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--violet-soft); color: var(--violet); font-size: 9px; font-weight: 800; } .gpu-placement-empty { color: var(--muted); font-size: 11.5px; padding: 4px 0; } .gpu-placement-unplaced { border: 1px dashed var(--red); border-radius: var(--radius-md); padding: 10px 12px; font-size: 11.5px; color: var(--red); } .quant-recommendations { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; background: var(--panel-raised); } .quant-recommendation-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .quant-recommendation-head span, .quant-recommendation-head strong, .quant-recommendation-head small { display: block; } .quant-recommendation-head span { color: var(--blue); font-size: 11px; font-weight: 900; } .quant-recommendation-head strong { margin-top: 3px; font-size: 13px; } .quant-recommendation-head small { color: var(--muted); font-size: 10px; } .quant-recommendation-list { display: flex; flex-wrap: wrap; gap: 8px; } .quant-recommendation-card { display: grid; flex: 1 1 190px; max-width: 240px; gap: 4px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 9px 10px; background: var(--surface-soft); text-align: left; cursor: pointer; } .quant-recommendation-card:hover { border-color: var(--blue); background: var(--blue-soft); } .quant-recommendation-card > span, .quant-recommendation-card small { color: var(--muted); font-size: 10px; font-weight: 800; } .quant-recommendation-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .grade-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; } .grade-dot.grade-s { color: var(--green); } .grade-dot.grade-a { color: var(--blue); } .grade-dot.grade-b { color: var(--muted); } .grade-dot.grade-c, .grade-dot.grade-d { color: var(--yellow); } .active-filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: -2px 0 12px; } .active-filter-chips > span { color: var(--muted); font-size: 12px; font-weight: 800; } .filter-chip, .filter-clear { min-height: 28px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 9px; background: var(--surface-soft); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 800; } .filter-chip:hover, .filter-clear:hover { background: var(--blue-soft); } .filter-clear { border-color: transparent; background: transparent; color: var(--blue); } .search-wrap input { padding-left: 14px; } .result-meta { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; } .model-results { min-width: 0; } .model-list-head, .model-row { display: grid; grid-template-columns: 82px minmax(270px, 1.8fr) 88px 116px 132px 126px 92px 126px 68px 18px; gap: 10px; align-items: center; } .model-list-head { position: sticky; top: 94px; z-index: 5; min-height: 34px; padding: 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; } .model-row { width: 100%; min-height: 62px; margin-bottom: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 9px 10px; background: var(--panel-raised); text-align: left; cursor: pointer; } .model-row:hover { background: var(--surface-soft); } .model-row.is-selected { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); } .model-cell { min-width: 0; color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .numeric-cell, .model-list-head span:nth-child(7), .model-list-head span:nth-child(8), .model-list-head span:nth-child(9) { text-align: right; } .numeric-cell { font-family: var(--mono); font-weight: 600; } .status-cell, .model-list-head span:first-child { justify-self: center; text-align: center; } .status-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; } .compare-checkbox { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--blue); } .provider-cell strong { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; } .provider-cell small, .release-cell small, .benchmark-cell small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.3; } .license-inline, .license-badge { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 10px; font-weight: 800; line-height: 1.2; } .license-inline { margin-top: 5px; padding: 2px 6px; } .license-badge { padding: 5px 9px; font-size: 11px; } .license-allowed { border-color: var(--green); background: var(--green-soft); color: var(--green); } .license-conditional { border-color: var(--yellow); background: var(--yellow-soft); color: var(--yellow); } .license-noncommercial { border-color: var(--red); background: var(--red-soft); color: var(--red); } .license-review, .license-openness { border-color: var(--violet); background: var(--violet-soft); color: var(--violet); } .license-cell { color: var(--muted); overflow-wrap: anywhere; } .release-cell strong, .benchmark-cell strong { display: block; overflow-wrap: anywhere; font-size: 12px; font-weight: 800; line-height: 1.25; } .release-new strong { color: var(--green); } .release-recent strong { color: var(--blue); } .release-current strong { color: var(--ink); } .release-older strong, .release-unknown strong { color: var(--muted); } .benchmark-measured strong { color: var(--green); } .benchmark-quality strong { color: var(--blue); } .benchmark-external strong { color: var(--muted); } .benchmark-reference strong { color: var(--blue); } .benchmark-missing strong { color: var(--muted); } .model-name-cell strong, .compact-card-head strong { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 4px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.25; } .model-meta, .compact-card-head span span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; } .recommendation-line { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; } .estimate-speed-cell strong { display: block; color: var(--ink); font-size: 13px; } .estimate-speed-cell small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 800; } .grade-pill { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 26px; border-radius: var(--radius-sm); padding: 0 2px; background: transparent; font-size: 12px; font-weight: 700; white-space: nowrap; } .grade-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .grade-s { color: var(--green); } .grade-a { color: var(--blue); } .grade-b { background: var(--surface-soft); color: var(--muted); } .grade-c, .grade-d { color: var(--yellow); } .grade-f { color: var(--red); } .tag-row { display: flex; flex-wrap: wrap; gap: 5px; } .compact-tags { margin-top: 6px; } .tag { border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; } .tag-more { color: var(--muted); } .row-chevron { color: var(--muted); font-size: 20px; line-height: 1; text-align: right; } .card-mode { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .compact-card { display: grid; gap: 12px; width: 100%; min-height: 210px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; background: var(--panel-raised); text-align: left; cursor: pointer; } .compact-card:hover { background: var(--surface-soft); } .compact-card-head { display: flex; justify-content: space-between; gap: 10px; } .compact-card-head > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .compact-card-head > span:first-child .compare-checkbox { order: -1; } .compact-card-head > span:first-child > span:last-child { flex-basis: 100%; } .compact-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .compact-specs span { min-height: 34px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 7px 8px; background: var(--surface-soft); color: var(--ink); font-size: 12px; font-weight: 700; } .compact-summary { color: var(--muted); font-size: 12px; line-height: 1.45; } .empty-state { display: grid; gap: 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: 30px; color: var(--muted); background: var(--surface-soft); text-align: center; } .empty-state strong { color: var(--ink); font-size: 15px; } .empty-state span { font-size: 13px; } .empty-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .compare-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; border: 1px solid var(--blue); border-radius: var(--radius-md); padding: 10px 12px; background: var(--blue-soft); } .compare-bar-label { color: var(--blue); font-size: 12px; font-weight: 800; white-space: nowrap; } .compare-bar-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; } .compare-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 6px 4px 10px; background: var(--panel-raised); color: var(--ink); font-size: 12px; font-weight: 700; } .compare-chip button { width: 18px; height: 18px; border: none; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; } .compare-chip button:hover { background: var(--blue-soft); color: var(--blue); } .compare-open-button, .compare-bar .ghost-button { white-space: nowrap; } .compare-modal-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 32, 0.45); } .compare-modal { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 41; width: min(920px, 94vw); max-height: 86vh; overflow-y: auto; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--panel-raised); box-shadow: 0 2px 8px rgba(15, 23, 32, 0.12); } .compare-modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.97); } .compare-modal-head h2 { margin: 2px 0 0; font-size: 17px; } .compare-summary-line { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--blue-soft); color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.5; } .compare-table-wrap { overflow-x: auto; padding: 6px 18px 18px; } .compare-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; } .compare-table th, .compare-table td { vertical-align: top; border-bottom: 1px solid var(--line); padding: 10px 14px; text-align: left; } .compare-table th:not(:first-child), .compare-table td:not(:first-child) { border-left: 1px solid var(--line); } .compare-table tbody th:first-child { width: 120px; } .compare-table thead th { background: var(--panel-raised); vertical-align: bottom; } .compare-table thead th:not(:first-child) { position: relative; padding-right: 32px; } .compare-table thead th strong { display: block; overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; } .compare-remove { position: absolute; top: 8px; right: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); width: 20px; height: 20px; background: var(--surface-soft); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; } .compare-remove:hover { background: var(--blue-soft); color: var(--blue); } .compare-table tbody th { min-width: 110px; color: var(--muted); font-size: 11.5px; font-weight: 800; white-space: nowrap; } .compare-primary { display: block; color: var(--ink); font-weight: 700; } .compare-secondary { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; } .compare-caveat { display: block; margin-top: 3px; color: var(--yellow); font-size: 10.5px; font-weight: 800; } .compare-value { display: block; font-size: 14px; font-weight: 800; } .compare-positive { color: var(--green); } .compare-negative { color: var(--red); } .compare-tags { display: flex; flex-wrap: wrap; gap: 4px; } .drawer-backdrop { position: fixed; inset: 0; z-index: 20; pointer-events: none; background: transparent; } .model-detail { position: fixed; inset: 0 0 0 auto; z-index: 30; width: min(680px, 100%); height: 100vh; overflow-y: auto; border-left: 1px solid var(--line-strong); background: var(--panel-raised); box-shadow: -2px 0 8px rgba(22, 32, 42, 0.08); } .simple-inspector-backdrop { position: fixed; inset: 0; z-index: 31; background: rgba(23, 32, 42, 0.22); } .simple-recommendation-inspector { position: fixed; inset: 72px var(--shell-gutter) auto auto; z-index: 32; width: var(--simple-inspector-width); max-height: calc(100dvh - 92px); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel-raised); box-shadow: -8px 0 24px rgba(22, 32, 42, 0.12); } .simple-inspector-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel-raised) 94%, transparent); } .simple-inspector-head > div { display: grid; min-width: 0; gap: 3px; } .simple-inspector-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .simple-inspector-kicker { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .simple-inspector-body { display: grid; gap: 14px; padding: 16px; } .simple-inspector-title { display: grid; gap: 7px; } .simple-inspector-title p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .simple-inspector-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .simple-inspector-metrics .detail-metric { min-width: 0; border-radius: 0; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .simple-inspector-metrics .detail-metric:nth-child(2n) { border-right: 0; } .simple-inspector-metrics .detail-metric:nth-last-child(-n + 2) { border-bottom: 0; } .simple-inspector-section { display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid var(--line); } .simple-inspector-section h3 { margin: 0; font-size: 13px; } .simple-inspector-reasons { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; } .simple-inspector-actions { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; } @media (min-width: 1280px) { body.simple-inspector-active .app-shell, body.simple-inspector-active .benchmark-panel, body.simple-inspector-active .app-footer { width: min( calc(100vw - var(--simple-inspector-width) - 72px), calc(1540px - var(--simple-inspector-width) - 24px) ); margin-left: var(--shell-gutter); margin-right: auto; } body.simple-inspector-active .simple-inspector-backdrop { display: none; } } @media (max-width: 1279px) { .simple-recommendation-inspector { inset: 0 0 0 auto; width: min(520px, 100%); max-height: none; border-width: 0 0 0 1px; border-radius: 0; } } @media (max-width: 600px) { .simple-recommendation-inspector { inset: auto 0 0; width: 100%; height: min(85dvh, 760px); border-width: 1px 0 0; border-radius: 12px 12px 0 0; } .simple-inspector-metrics { grid-template-columns: 1fr; } .simple-inspector-metrics .detail-metric { border-right: 0; border-bottom: 1px solid var(--line); } .simple-inspector-metrics .detail-metric:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); } .simple-inspector-metrics .detail-metric:last-child { border-bottom: 0; } } .detail-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.96); } .icon-button { width: 36px; padding: 0; color: var(--ink); font-size: 20px; } .detail-title, .detail-section { padding: 18px; } .detail-title { border-bottom: 1px solid var(--line); } .detail-title h2 { margin: 10px 0 6px; overflow-wrap: anywhere; } .detail-title p, .detail-note { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .detail-title .detail-description { margin-top: 10px; color: var(--muted); } .detail-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px; border-bottom: 1px solid var(--line); background: var(--surface-soft); } .detail-metric, .info-item, .runtime-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px; background: var(--panel-raised); } .detail-metric span, .info-item span, .runtime-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; } .detail-metric strong, .info-item strong, .runtime-card strong { display: block; margin-top: 5px; overflow-wrap: anywhere; font-size: 15px; } .detail-metric small, .evidence-card small, .benchmark-mini-table small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.4; } .detail-section { border-bottom: 1px solid var(--line); } .license-summary-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; background: var(--surface-soft); } .license-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; } .license-summary-card > strong { display: block; font-size: 16px; } .license-summary-card p, .license-summary-card small { display: block; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .license-summary-card small { font-size: 11px; } .detail-table { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .detail-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.8fr 1fr; gap: 8px; align-items: center; min-height: 48px; padding: 8px 10px; border-top: 1px solid var(--line); font-size: 13px; } .detail-row:first-child { border-top: 0; } .detail-table-head { min-height: 38px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; } .memory-map { margin-bottom: 16px; } .memmap-title { margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .memmap-bar { display: flex; height: 22px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; } .memmap-seg { height: 100%; } .memmap-seg.memmap-weights, .memmap-swatch.memmap-weights { background: var(--blue); } .memmap-seg.memmap-kv, .memmap-swatch.memmap-kv { background: var(--memmap-kv); } .memmap-seg.memmap-other, .memmap-swatch.memmap-other { background: var(--memmap-other); } .memmap-seg.memmap-runtime, .memmap-swatch.memmap-runtime { background: var(--memmap-runtime); } .memmap-seg.memmap-free, .memmap-swatch.memmap-free { background: var(--panel); border-right: 1px solid var(--line); } .memmap-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px 12px; margin-top: 8px; } .memmap-legend-item { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; } .memmap-swatch { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 1px; } .memmap-swatch.memmap-free { border: 1px solid var(--line-strong); } .memmap-legend-item strong { margin-left: auto; color: var(--ink); font-weight: 600; } .memory-breakdown { display: grid; gap: 12px; } .memory-line { display: grid; gap: 6px; } .memory-label, .memory-total { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 800; } .memory-label strong, .memory-total strong { color: var(--ink); } .memory-bar { height: 10px; border-radius: var(--radius-sm); background: var(--surface-tint); overflow: hidden; } .memory-bar span { display: block; width: var(--bar-width); height: 100%; border-radius: inherit; background: var(--blue); } .memory-total { margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); } .runtime-grid, .model-info-grid, .vram-budget-grid, .fit-rationale-grid, .evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .fit-rationale-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .evidence-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; background: var(--panel-raised); } .evidence-card > span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; } .evidence-card > strong { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: 15px; } .estimate-card { background: var(--surface-soft); } .estimate-error-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700; } .benchmark-mini-table { display: grid; gap: 8px; margin-top: 10px; } .benchmark-mini-table div { border-top: 1px solid var(--line); padding-top: 8px; } .benchmark-mini-table span, .benchmark-mini-table strong { display: block; font-size: 12px; } .benchmark-mini-table span { color: var(--muted); font-weight: 800; } .benchmark-mini-table strong { margin-top: 3px; color: var(--ink); } .evidence-links { margin-top: 9px; } .reason-list { display: flex; flex-wrap: wrap; gap: 7px; } .reason-list span { min-height: 30px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; background: var(--surface-soft); color: var(--ink); font-size: 12px; font-weight: 800; } .vram-budget-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; } .runtime-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 700; } .command-block, .formula-block { margin: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; background: #111827; color: #e5edf6; font-size: 12px; line-height: 1.6; } .formula-block { background: var(--surface-soft); color: var(--ink); } .external-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .external-links a { display: inline-flex; align-items: center; min-height: 34px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 10px; color: var(--blue); background: var(--surface-soft); font-size: 12px; font-weight: 700; text-decoration: none; } .external-links a:hover { background: var(--blue-soft); } .benchmark-panel { width: min(1540px, calc(100vw - 48px)); margin: 0 auto 18px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 22px; background: var(--panel-raised); box-shadow: var(--shadow); } .benchmark-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; } .benchmark-head h2 { font-size: 20px; } .benchmark-head p { margin: 8px 0 0; color: var(--muted); font-size: 13px; } .benchmark-meta { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 800; } .benchmark-table-wrap { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); } .benchmark-table { min-width: 900px; } .benchmark-row { display: grid; /* GPU and 조건 used to be separate 170px/200px columns, but both were "-" or generic boilerplate for most rows (quality benchmarks aren't hardware-specific). Merged into one 환경 column and used the freed width for 규모/출시 (params + release date), which is meaningful on every row. */ grid-template-columns: 34px 92px minmax(220px, 1.5fr) 190px 130px 130px 80px; gap: 12px; align-items: center; min-height: 44px; padding: 8px 10px; border-top: 1px solid var(--line); font-size: 12px; } .benchmark-row-select { display: flex; align-items: center; justify-content: center; } .benchmark-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .benchmark-toolbar input[type="search"] { max-width: 360px; } .benchmark-toolbar select { max-width: 280px; } .benchmark-compare-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--blue-soft); color: var(--ink); font-size: 12px; font-weight: 700; } .benchmark-body { display: grid; gap: 16px; } @media (min-width: 1400px) { .benchmark-body { /* Chart only ever needs ~350-630px (label + capped track + value); on a wide panel the rest of the row was empty space. Put the table beside it instead of stacking, so the panel width is actually used. */ grid-template-columns: minmax(360px, 460px) minmax(480px, 1fr); align-items: start; } } .benchmark-chart { display: grid; align-content: start; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); } .benchmark-chart-intro { margin: 0; color: var(--muted); font-size: 11.5px; } .benchmark-chart-group { display: grid; gap: 6px; } .benchmark-chart-group-title { color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; } .benchmark-chart-group-description { margin: -2px 0 2px; color: var(--muted); font-size: 11px; line-height: 1.5; } .benchmark-chart-bar-row { display: grid; /* Cap the track's width instead of letting it fill 1fr — on a wide screen a 900px+ track makes even an honestly-filled bar read as a thin, barren sliver. A fixed, reasonably narrow track plus 25% gridlines makes the fill level legible at a glance. */ grid-template-columns: minmax(120px, 220px) minmax(140px, 320px) 68px; align-items: center; gap: 10px; font-size: 12px; } .benchmark-chart-bar-label { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .benchmark-chart-bar-track { position: relative; height: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background-color: var(--surface-tint); /* Quarter-mark gridlines so the empty portion still reads as "part of a 0-100 gauge" rather than blank space. */ background-image: linear-gradient(to right, var(--line-strong) 1px, transparent 1px); background-size: 25% 100%; background-repeat: repeat-y; overflow: hidden; } .benchmark-chart-bar-fill { /* This is a nested inside another (.benchmark-chart-bar-track). The track itself gets blockified because it's a direct CSS grid item, but this fill span is not a grid item, so it stays inline by default -- and inline elements ignore the `width:NN%` set inline via JS. Without `display: block` the fill was invisible even though its width was being computed correctly. */ display: block; height: 100%; background: linear-gradient(to right, var(--blue-gradient-start), var(--blue)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08); } .benchmark-chart-bar-value { text-align: right; color: var(--ink); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; } .benchmark-chart-bar-scale { color: var(--muted); font-weight: 400; } .benchmark-chart-group-analysis { margin: 2px 0 0; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; } .benchmark-row:first-child { border-top: 0; } .benchmark-table-head { position: sticky; top: 0; z-index: 1; min-height: 36px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 800; } .data-kind { display: inline-flex; align-items: center; min-height: 24px; border-radius: var(--radius-sm); padding: 0 8px; font-size: 11px; font-weight: 800; } .data-kind.is-measured { background: var(--green-soft); color: var(--green); } .data-kind.is-quality { background: var(--blue-soft); color: var(--blue); } .data-kind.is-reference { background: var(--surface-tint); color: var(--muted); } .evidence-code { font-family: var(--mono); font-size: 10px; font-weight: 700; margin-right: 5px; padding-right: 5px; border-right: 1px solid currentColor; opacity: 0.75; } .app-footer { width: min(1540px, calc(100vw - 48px)); margin: 0 auto 24px; color: var(--muted); font-size: 12px; line-height: 1.5; } @media (max-width: 1180px) { .header-nav { gap: 12px; } .header-nav a { font-size: 12px; } .hardware-topline { grid-template-columns: minmax(0, 1fr) auto; } .primary-gpu-control { grid-column: 1; grid-row: 1; } .hardware-copy { grid-column: 1 / -1; grid-row: 2; } .settings-toggle { grid-column: 2; grid-row: 1; } .settings-panel, .advanced-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hardware-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-cluster-secondary { grid-column: 1 / -1; grid-row: 2; } .calculation-basis-strip, .benchmark-head { align-items: flex-start; flex-direction: column; } .model-list-head, .model-row { grid-template-columns: 72px minmax(210px, 1.6fr) 78px 104px 116px 110px 78px 104px 56px 16px; gap: 8px; } .detail-summary-grid, .runtime-grid, .model-info-grid, .vram-budget-grid, .fit-rationale-grid, .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .app-header { padding: 12px 0; } .header-inner { width: calc(100% - 24px); } .header-nav { gap: 14px; overflow-x: auto; min-width: 0; } .language-toggle, .theme-toggle { margin-left: 0; } .app-shell, .app-footer, .benchmark-panel { width: 100%; margin-top: 12px; padding-right: 12px; padding-left: 12px; } h1 { font-size: 22px; } h2 { font-size: 21px; } .brand-mark { width: 34px; height: 34px; } .hardware-topline, .results-panel, .detail-title, .detail-section, .detail-summary-grid { padding: 14px; } .hardware-topline { grid-template-columns: 1fr; } .primary-gpu-control, .hardware-copy, .settings-toggle { grid-column: 1; grid-row: auto; } .settings-toggle { width: 100%; } .hardware-copy strong { max-width: calc(100vw - 52px); font-size: 17px; line-height: 1.35; white-space: normal; word-break: break-word; } .hardware-copy { width: 100%; max-width: none; } .hardware-piece { min-width: 0; } .hardware-piece:nth-child(3) { flex-basis: 100%; } .hardware-copy p { white-space: normal; word-break: break-word; } .settings-panel, .advanced-panel, .detail-summary-grid, .runtime-grid, .model-info-grid, .vram-budget-grid, .fit-rationale-grid, .evidence-grid { grid-template-columns: 1fr; } .hardware-editor { grid-template-columns: 1fr; } .settings-cluster-secondary { grid-column: auto; grid-row: auto; } .settings-cluster-fields-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .settings-cluster-fields-secondary { grid-template-columns: minmax(0, 1fr) 64px; } .advanced-tools-inline { grid-template-columns: 1fr; } .advanced-tools-inline > .gpu-placement-label, .advanced-tools-inline > .hf-import-panel[open] { grid-column: 1; } .summary-filterbar, .result-toolbar, .model-list-head { position: static; } .calculation-basis-strip { align-items: flex-start; flex-direction: column; } .result-toolbar { flex-direction: column; align-items: stretch; } .result-toolbar .search-wrap, .result-toolbar select { max-width: none; width: 100%; } .result-toolbar .view-toggle { margin-left: 0; } .field-wide { grid-column: auto; } .field-control-pair { grid-template-columns: 1fr; } .field-control-pair.is-custom { grid-template-columns: 1fr; } .simple-mode-questions { grid-template-columns: 1fr; } .simple-mode-body { padding: 14px; } .simple-mode-head { flex-direction: column; gap: 8px; } html[lang="en"] .simple-mode-head > div:first-child { flex-basis: auto; width: 100%; } .app-mode-toggle { padding: 10px 12px; } .app-mode-tab { min-width: 0; padding: 0 6px; white-space: normal; } .simple-mode-head h2 { font-size: 18px; } .simple-data-coverage { justify-content: flex-start; max-width: none; } .simple-mode-result { grid-template-columns: 1fr; } .simple-explore-actions .ghost-button { width: 100%; } .simple-share-actions { width: 100%; margin-right: 0; } .simple-share-actions .ghost-button { flex: 1 1 0; width: auto; } .detail-share-actions { align-items: flex-start; flex-direction: column; } .hf-import-controls { grid-template-columns: 1fr; } .quant-recommendation-head { align-items: flex-start; flex-direction: column; } .workload-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 0 14px; } .workload-tab { width: 100%; padding: 0 8px; } .summary-filterbar { display: flex; gap: 14px; overflow-x: auto; } .summary-chip { justify-content: flex-start; } .model-list-head { display: none; } .model-row { grid-template-columns: 1fr; gap: 8px 12px; min-height: 0; padding: 13px; } .status-cell { grid-column: 1 / -1; } .model-name-cell { grid-column: 1 / -1; } .model-row .model-cell:not(.model-name-cell) { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 5px; grid-column: 1 / -1; min-height: 26px; overflow-wrap: anywhere; } .model-row .numeric-cell { text-align: left; } .status-cell { justify-self: start; text-align: left; } .model-row .model-cell:not(.model-name-cell)::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 800; } .row-chevron { display: none; } .card-mode { grid-template-columns: 1fr; } .compact-card-head { align-items: flex-start; } .compact-specs { grid-template-columns: 1fr; } .model-detail { width: 100%; } .compare-bar { align-items: flex-start; } .compare-modal { inset: auto 0 0 0; transform: none; width: 100%; max-height: 88vh; border-radius: 12px 12px 0 0; } .detail-row, .detail-table-head { grid-template-columns: 1fr; } .detail-table-head { display: none; } .detail-row { align-items: start; gap: 5px; } } @media (max-width: 900px) { .core-task-switcher { align-items: stretch; flex-direction: column; gap: 10px; } .core-task-switcher > div:first-child, .core-task-actions { width: 100%; } .placement-welcome { grid-template-columns: 1fr; } .header-nav a:not(.github-link) { display: none; } .language-icon { display: none; } } @media (max-width: 600px) { .core-task-switcher, .placement-workspace-head, .gpu-placement-body.placement-builder { padding-right: 12px; padding-left: 12px; } .core-task-actions, .placement-starter-grid { grid-template-columns: 1fr; } .placement-workspace-head { flex-direction: column; } .placement-workspace-actions { width: 100%; flex-wrap: wrap; } .placement-workspace-actions > button, .placement-guide { flex: 1 1 auto; } .placement-guide > summary { text-align: center; } .placement-guide[open] { flex-basis: 100%; } .placement-guide-popover { position: static; width: 100%; margin-top: 8px; } .placement-welcome { padding: 22px 12px; } .placement-stepper { grid-template-columns: repeat(4, minmax(92px, 1fr)); overflow-x: auto; } .placement-step-card { padding: 13px 12px; } .placement-step-head { align-items: flex-start; } .hardware-top-actions, .simple-next-actions { width: 100%; flex-direction: column; } .hardware-top-actions .ghost-button, .hardware-top-actions .primary-button, .simple-next-actions .ghost-button, .simple-next-actions .primary-button { width: 100%; } .header-nav .github-link { display: none; } } /* Desktop split-view: in 전체 모델 탐색 (expert) mode on wide viewports, show the model detail as a persistent right-hand inspector next to the list instead of the fixed-overlay drawer used everywhere else (narrower viewports, and 빠른 추천 mode, are untouched — see .model-detail / .drawer-backdrop base rules above and refreshAppModeUi() in app.js for the body.model-workbench-active toggle). #modelDetail deliberately stays outside #expertModeSection in the DOM (it's shared with quick-recommend mode, which would otherwise hide it whenever #expertModeSection has the `hidden` attribute), so this uses position: fixed with --shell-gutter to align its right edge with .app-shell's right edge, rather than true CSS Grid participation. Breakpoint is 1536px, not the 1280px a naive "list 1fr + 400px" split would suggest: the existing model-row grid has 10 columns (status, name, release, benchmark, provider, setting, VRAM, speed, context-limit, chevron) whose fixed-width tracks alone already total ~850px before the name column's own 270px minimum, so reserving a 360-520px inspector column out of a 1540px-max-width shell genuinely does not fit below ~1500px. Below this breakpoint the list keeps every column and the detail panel keeps using the normal overlay drawer instead of forcing an overflow. Within the split-view itself, the release-date and recommended-setting columns are hidden (both are still one click away in the inspector) to recover enough width for the remaining six to sit comfortably beside a 360px-minimum inspector — this matches the trimmed "상태 | 모델 | 대표 평가 | 라이선스 | VRAM | 속도" column set. */ @media (min-width: 1536px) { body.model-workbench-active #expertModeSection { padding-right: calc(var(--inspector-width) + 24px); } body.model-workbench-active #drawerBackdrop { display: none; } body.model-workbench-active #modelDetail { display: block; inset: 88px var(--shell-gutter) 24px auto; width: var(--inspector-width); height: auto; z-index: 6; border-left: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: none; } /* Recover width by hiding the two columns that duplicate information already shown one click away in the inspector (release/generation, and the recommended quant/precision/runtime setting). Both header and row share the same 10-cell order, so the same nth-child positions (3rd = release, 6th = setting) hide the matching cell in each. */ body.model-workbench-active .model-list-head > :nth-child(3), body.model-workbench-active .model-row > :nth-child(3), body.model-workbench-active .model-list-head > :nth-child(6), body.model-workbench-active .model-row > :nth-child(6) { display: none; } body.model-workbench-active .model-list-head, body.model-workbench-active .model-row { grid-template-columns: 82px minmax(270px, 1fr) 116px 132px 92px 126px 68px 18px; } } .detail-empty-state { display: grid; gap: 8px; height: 100%; padding: 32px 22px; color: var(--muted); text-align: center; align-content: center; } .detail-empty-state strong { color: var(--ink); font-size: 14px; } .detail-empty-state p { margin: 0; font-size: 13px; line-height: 1.6; }