: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: #5c6873; --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; cursor: pointer; } 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; border: none; background: none; padding: 0; text-align: left; } .brand-block:hover h1 { color: var(--blue); } .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; /* 명시적 트랙을 선언하지 않으면 그리드의 암묵적 auto 트랙이 내부 콘텐츠의 max-content(줄바꿈을 전혀 하지 않았을 때의 너비)로 계산돼, 위의 width 제약을 무시하고 옆으로 넘쳐버리는 "그리드 블로우아웃"이 생긴다. 실제로 영어 모드 모바일(390px 폭)에서 "I already have a GPU" 같은 긴 카드 문구 때문에 app-shell이 453px까지 넓어지며 화면 전체가 가로 스크롤되는 문제가 있었다. 트랙을 minmax(0, 1fr)로 명시해 항상 컨테이너 폭 안으로 줄어들 수 있게 한다. */ grid-template-columns: minmax(0, 1fr); gap: 0; width: min(1540px, calc(100vw - 48px)); margin: 18px auto; } .hardware-panel, .results-panel { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: none; } .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(260px, 1fr) auto; align-items: center; gap: 18px 24px; min-width: 0; padding: 14px 22px; } .primary-gpu-control { min-width: 0; } #gpuChangePanel { padding: 0 22px 16px; border-top: 1px solid var(--line); } #gpuChangePanel[hidden] { display: none; } #gpuChangePanel .field { max-width: 360px; padding-top: 14px; } .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, .primary-gpu-control .gpu-preset-trigger { min-height: 40px; border-color: var(--line-strong); font-weight: 700; } /* "내 GPU" custom dropdown -- a plain native stays in the DOM (hidden) as the value store every other script still reads. */ .gpu-preset-combo { position: relative; min-width: 0; } .gpu-preset-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 10px; background: var(--panel-raised); color: var(--ink); text-align: left; } .gpu-preset-trigger-caret { color: var(--muted); font-size: 11px; transition: transform 0.15s ease; } .gpu-preset-trigger[aria-expanded="true"] .gpu-preset-trigger-caret { transform: rotate(180deg); } .gpu-preset-list-panel { margin-top: 6px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel); } .gpu-preset-list-panel[hidden] { display: none; } .gpu-preset-filter { margin-bottom: 6px; } .gpu-preset-list { max-height: 320px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border-top: 1px solid var(--line); } .gpu-preset-option { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; } .gpu-preset-option:hover, .gpu-preset-option.is-highlighted { background: var(--blue-soft); } .gpu-preset-option.is-selected { color: var(--blue); font-weight: 700; } .gpu-preset-list-empty { margin: 6px 2px 2px; color: var(--muted); font-size: 12px; } .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; } .gpu-not-found-actions { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); } .gpu-not-found-actions strong, .gpu-not-found-actions span { display: block; } .gpu-not-found-actions span { margin: 5px 0 12px; color: var(--muted); font-size: 0.88rem; } .gpu-not-found-actions > div, .gpu-runtime-facts { display: flex; flex-wrap: wrap; gap: 8px; } .gpu-runtime-facts { margin-top: 9px; } .gpu-runtime-facts span { padding: 4px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 0.78rem; } .hardware-capability-details { margin: 0 22px 12px; border-top: 1px solid var(--line); } .hardware-capability-details > summary { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 0; color: var(--ink); cursor: pointer; list-style: none; } .hardware-capability-details > summary::-webkit-details-marker { display: none; } .hardware-capability-details > summary::after { content: "+"; flex: 0 0 auto; color: var(--blue); font-family: var(--mono); font-size: 16px; font-weight: 800; } .hardware-capability-details[open] > summary::after { content: "−"; } .hardware-capability-details > summary span { font-size: 12.5px; font-weight: 850; } .hardware-capability-details > summary small { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .hardware-capability-summary { margin: 0; padding: 0 0 12px; } .hardware-capability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); } .hardware-capability-card { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--line); background: transparent; } .hardware-capability-card:last-child { border-right: 0; } .hardware-capability-card span, .hardware-capability-card small { display: block; color: var(--muted); line-height: 1.3; } .hardware-capability-card strong { display: block; margin: 3px 0; line-height: 1.25; } .gpu-insights-panel { margin: 12px 0; padding: 14px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .gpu-advisor-panel { margin: 18px 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); } .decision-studio { width: min(1540px, calc(100vw - 48px)); margin: 18px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); } .decision-studio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); } .decision-studio-head h2, .decision-studio-head p { margin: 4px 0 0; } .decision-studio-head p, .studio-market-summary, .studio-form-note { color: var(--muted); } .decision-studio-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .decision-studio-tabs button { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; background: var(--surface-soft); color: var(--ink); font-weight: 800; } .decision-studio-tabs button.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); } .decision-studio-body { padding: 22px; } .studio-question-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .studio-question-grid label { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--muted); font-size: 0.8rem; font-weight: 800; } .studio-question-grid .studio-wide { grid-column: span 2; } .studio-question-grid .studio-check { display: flex; align-items: center; gap: 8px; min-height: 42px; margin-top: 20px; } /* "" checkboxes (separate-network, streaming, autoscale, vision, dev/prod toggles) had no sizing rule of their own, so the browser's native checkbox rendered at an oversized default with no defined gap from its label — the box and its text looked unrelated. */ .studio-question-grid .studio-check > input[type="checkbox"] { flex: 0 0 18px; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--blue); } .studio-question-grid input, .studio-question-grid select { min-width: 0; } .si-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .si-intro h3 { margin: 6px 0; font-size: 1.25rem; } .si-intro p { margin: 0; color: var(--muted); } .si-presets, .si-actions { display: flex; flex-wrap: wrap; gap: 8px; } .si-presets button { min-height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; background: var(--surface-soft); color: var(--ink); font-weight: 800; } .si-presets button.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); } .si-question-grid { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface-soft); } .si-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .si-plan-card, .si-output-grid > article { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface-soft); } .si-plan-card { cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .si-plan-card:hover { border-color: var(--blue); transform: translateY(-2px); } .si-plan-card.is-featured { border: 2px solid var(--blue); background: var(--blue-soft); } .si-plan-card.is-selected { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 24%, transparent); } .si-plan-card > span { color: var(--blue); font-size: 0.78rem; font-weight: 900; } .si-plan-card h3 { margin: 8px 0 4px; } .si-plan-card p { margin: 0 0 14px; color: var(--muted); } .si-plan-card dl { display: grid; gap: 8px; margin: 0; } .si-plan-card dl > div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line); padding-top: 8px; } .si-plan-card dd { margin: 0; font-weight: 800; text-align: right; } .si-plan-open { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--blue) !important; } .si-plan-detail { margin-top: 14px; padding: 20px; border: 2px solid var(--blue); border-radius: 14px; background: var(--panel-raised); box-shadow: 0 10px 30px color-mix(in srgb, var(--blue) 10%, transparent); } .si-plan-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .si-plan-detail-head h3, .si-plan-detail-head p { margin: 4px 0; } .si-plan-detail-head p, .si-price-disclaimer, .si-plan-detail-grid article > p { color: var(--muted); } .si-plan-detail-head > strong { display: grid; gap: 3px; color: var(--blue); font-size: 1.2rem; text-align: right; } .si-plan-detail-head small { color: var(--muted); font-size: 0.72rem; } .si-plan-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .si-plan-detail-grid article { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); } .si-plan-detail-grid h4 { margin: 0 0 10px; } .si-plan-detail-grid ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.65; } .si-plan-detail-grid dl { display: grid; gap: 8px; margin: 0; } .si-plan-detail-grid dl > div { display: grid; gap: 3px; padding-bottom: 7px; border-bottom: 1px dashed var(--line); } .si-plan-detail-grid dt { color: var(--muted); font-size: 0.75rem; } .si-plan-detail-grid dd { margin: 0; font-weight: 800; } .si-source-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .si-source-links a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue); background: var(--surface-soft); font-weight: 800; text-decoration: none; } .si-price-disclaimer { margin: 12px 0 0; font-size: 0.78rem; } .si-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .si-output-grid h3 { margin-top: 0; } .si-output-grid ul { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.7; } .si-checklist { list-style: none; padding-left: 0 !important; } .si-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .si-actions > :is(button, a) { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin: 0; line-height: 1.2; text-align: center; vertical-align: middle; box-sizing: border-box; } .si-editable-bom { margin-top: 14px; padding: 18px; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--panel-raised); } .si-editable-bom .si-version-head p { margin: 4px 0 0; color: var(--muted); } .si-bom-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .si-bom-editor > label { display: grid; gap: 7px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); } .si-bom-editor > label > span:first-child { color: var(--muted); font-size: 0.78rem; font-weight: 800; } .si-bom-editor select, .si-bom-editor input { width: 100%; min-width: 0; } .si-bom-qty { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; } .si-bom-qty b { min-width: 0; color: var(--blue); font-size: 0.8rem; text-align: right; } .si-bom-extra small { color: var(--muted); } .si-bom-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .si-bom-summary span { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-soft); } .si-bom-summary strong { color: var(--ink); font-size: 1rem; } .si-bom-summary .is-total { border-color: var(--blue); background: var(--blue-soft); } .si-bom-summary .is-total strong { color: var(--blue); } .si-validation-score { min-width: 90px; padding: 10px 12px; border: 1px solid currentColor; border-radius: 10px; text-align: center; font-weight: 900; } .si-validation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .si-validation-grid article { display: grid; gap: 5px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-tint); } .si-validation-grid article.is-ok { border-color: color-mix(in srgb, #45b97c 55%, var(--line)); } .si-validation-grid article.is-warning { border-color: color-mix(in srgb, #ef8f70 70%, var(--line)); } .si-validation-grid span { color: var(--muted); font-size: 0.76rem; } .si-price-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); } .si-commercial-flow { display: flex; align-items: stretch; gap: 7px; margin-top: 12px; overflow-x: auto; } .si-commercial-flow > span { display: grid; flex: 1 0 145px; gap: 5px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-tint); } .si-commercial-flow > b { align-self: center; color: var(--muted); } .si-commercial-flow .is-total { border-color: var(--blue); background: var(--blue-soft); } .si-commercial-flow strong { color: var(--ink); } .si-topology-metrics { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; } .si-topology-metrics span { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-tint); } .si-topology-metrics strong { color: var(--ink); } .si-topology-metrics small { font-size: 0.72rem; } .si-quote-status { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; font-weight: 900; } .si-quote-status.is-approved { color: #45b97c; border-color: currentColor; } .si-quote-status.is-rejected { color: #ef8f70; border-color: currentColor; } .si-quote-status.is-review { color: var(--blue); border-color: currentColor; } .si-approval-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .si-v48-table th:not(:first-child), .si-v48-table td:not(:first-child) { min-width: 190px; } .si-advanced { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); } .si-advanced summary { padding: 14px 16px; color: var(--blue); cursor: pointer; font-weight: 900; } .si-advanced .studio-question-grid { /* The base .studio-question-grid rule carries no padding of its own (it's meant to sit inside an already-padded parent), so this section's fields ("PCIe" etc.) were flush against the border-top separator with no breathing room. */ padding: 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; } .si-plan-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .si-plan-foot span { border-radius: 8px; padding: 9px; background: var(--panel-raised); color: var(--muted); font-size: 0.75rem; } .si-plan-foot strong { display: block; margin-top: 3px; color: var(--ink); } .si-deliverable-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .si-deliverable-grid > article, .si-poc-mode { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface-soft); } .si-deliverable-grid h3, .si-poc-mode h3 { margin: 6px 0 12px; } .si-deliverable-grid p, .si-poc-mode p { color: var(--muted); line-height: 1.55; } .si-topology-row { display: grid; grid-template-columns: 0.7fr 1fr 1.5fr 0.7fr; gap: 8px; border-top: 1px solid var(--line); padding: 10px 0; font-size: 0.78rem; } .si-bom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .si-bom-grid span { border-radius: 8px; padding: 10px; background: var(--panel-raised); font-size: 0.8rem; } .si-confidence-list { display: grid; gap: 8px; } .si-confidence-list span { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; color: var(--muted); } .si-confidence-list strong { color: var(--ink); text-align: right; } .si-poc-mode { margin-top: 12px; } .si-poc-mode > div:first-child { display: flex; align-items: baseline; gap: 12px; } .si-poc-mode > div:first-child p { margin-left: auto; } .si-poc-verdict { margin-bottom: 0; border-left: 3px solid var(--blue); padding: 10px 12px; background: var(--blue-soft); color: var(--ink) !important; font-weight: 800; } .studio-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .studio-pick-card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface-soft); } .studio-pick-card.is-featured { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); } .studio-pick-card > span, .custom-model-result > article span, .parts-total span { color: var(--blue); font-size: 0.78rem; font-weight: 900; } .studio-pick-card h3 { margin: 8px 0; } .studio-pick-card p { min-height: 42px; color: var(--muted); font-size: 0.85rem; } .studio-pick-card dl, .custom-model-result dl { display: grid; gap: 7px; } .studio-pick-card dl > div, .custom-model-result dl > div { display: flex; justify-content: space-between; gap: 10px; } .studio-pick-card dd, .custom-model-result dd { margin: 0; font-weight: 800; text-align: right; } .studio-market-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .studio-market-summary p { margin: 0; } .studio-table-wrap { overflow-x: auto; } .studio-table { width: 100%; border-collapse: collapse; white-space: nowrap; } .studio-table th, .studio-table td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: top; } .studio-table th { color: var(--muted); font-size: 0.76rem; } .studio-table td small { display: block; margin-top: 4px; color: var(--muted); white-space: normal; } /* API cost calculator: highlight the cheapest tracked hosted API model in the results table, and style the infra-studio "build vs buy" callout that links over to it. Reuses .si-poc-mode's box treatment rather than adding a new one. */ .studio-table tr.is-cheapest { background: var(--blue-soft); } .studio-table th.is-sortable { cursor: pointer; -webkit-user-select: none; user-select: none; } .studio-table th.is-sortable:hover { color: var(--ink); } .api-cost-empty { color: var(--muted); text-align: center; padding: 20px 10px; } .si-api-cost-bridge, .api-cost-local { min-width: 0; margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface-soft); } .si-api-cost-bridge h3, .api-cost-local h3 { margin: 6px 0 8px; } .si-api-cost-verdict, .api-cost-local-verdict { font-weight: 600; } .si-api-cost-breakeven { color: var(--ink); font-size: 14px; } .si-api-cost-scale td.is-cheapest { font-weight: 700; color: var(--blue); } .si-api-cost-scale tr.is-current-usage td { background: var(--panel-raised); } .studio-stale, .studio-fresh { display: inline-block; margin-left: 6px; border-radius: 999px; padding: 2px 6px; font-size: 0.68rem; font-weight: 900; } .studio-stale { background: var(--yellow-soft); color: var(--yellow); } .studio-fresh { background: var(--green-soft); color: var(--green); } .custom-model-result, .parts-result, .runtime-compat-card { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface-soft); } .custom-model-result { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr); gap: 16px; } .custom-model-result > article strong, .parts-total strong { display: block; margin-top: 4px; font-size: 1.65rem; } .custom-model-result > article small, .parts-total small { display: block; margin-top: 4px; color: var(--muted); } .custom-gpu-list { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 7px; } .custom-gpu-list span { border-radius: 999px; padding: 6px 9px; background: var(--blue-soft); color: var(--blue); font-size: 0.78rem; font-weight: 800; } .custom-model-result .primary-button { width: fit-content; } .parts-result { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 14px; } .parts-check-list { display: grid; gap: 8px; } .parts-check-list article { display: flex; justify-content: space-between; gap: 10px; border-radius: 10px; padding: 11px; } .parts-check-list article.is-ok { background: var(--green-soft); color: var(--green); } .parts-check-list article.is-warning { background: var(--yellow-soft); color: var(--yellow); } .parts-total { align-self: stretch; border-left: 1px solid var(--line); padding-left: 16px; } .runtime-compat-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .runtime-compat-card > div strong { border-radius: 999px; padding: 5px 9px; background: var(--blue-soft); color: var(--blue); } .runtime-compat-card pre { overflow-x: auto; border-radius: 10px; padding: 13px; background: #111827; color: #e5edf6; } .runtime-warning { display: block; color: var(--yellow); } .community-row-list { display: grid; gap: 9px; margin-top: 16px; } .community-row-list article { display: grid; grid-template-columns: minmax(180px, 1.5fr) 1fr auto 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: var(--surface-soft); } .community-row-list article.is-outlier { border-color: var(--yellow); } .community-row-list article div span, .community-row-list article div strong, .community-row-list article small { display: block; } @media (max-width: 1100px) { .studio-question-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .si-plan-grid { grid-template-columns: 1fr; } .si-deliverable-grid { grid-template-columns: 1fr; } .community-row-list article { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .decision-studio { width: 100%; margin-inline: 0; border-radius: 0; } .decision-studio-head { display: block; padding: 16px; } .si-intro { display: block; } .si-presets { margin-top: 14px; } .decision-studio-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; } .decision-studio-body { padding: 16px; } .studio-question-grid, .studio-pick-grid, .si-output-grid, .si-deliverable-grid, .custom-model-result, .parts-result, .community-row-list article { grid-template-columns: 1fr; } .si-topology-row, .si-bom-grid, .si-plan-foot { grid-template-columns: 1fr; } .si-poc-mode > div:first-child { display: block; } .studio-question-grid .studio-wide, .custom-gpu-list { grid-column: span 1; } .parts-total { border-top: 1px solid var(--line); border-left: 0; padding-top: 14px; padding-left: 0; } .studio-market-summary { display: block; } } .gpu-advisor-controls { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) minmax(260px, 1.8fr) minmax(170px, .8fr); gap: 12px; margin-top: 16px; } .advisor-wizard-panel[data-advisor-step-panel="1"] { grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.4fr) minmax(280px, 1.8fr); } .advisor-wizard-panel[data-advisor-step-panel="2"] { grid-template-columns: minmax(220px, 420px) minmax(0, 1fr); } .advisor-wizard-panel[data-advisor-step-panel="2"] .advisor-detailed-settings { grid-column: 1 / -1; } .advisor-wizard-navigation { display: grid; grid-template-columns: minmax(110px, auto) 1fr minmax(150px, auto); align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .advisor-wizard-navigation > span { color: var(--muted); font-size: .82rem; font-weight: 800; text-align: center; } .advisor-wizard-navigation > :last-child, .advisor-wizard-navigation > [data-advisor-next] { grid-column: 3; grid-row: 1; } .advisor-model-select-field { position: relative; } .advisor-detailed-settings { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); } .advisor-detailed-settings > summary { min-height: 44px; padding: 11px 14px; cursor: pointer; color: var(--blue); font-weight: 850; } .advisor-detail-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0 14px 14px; } .advisor-model-select-field small { position: absolute; top: 0; right: 0; color: var(--muted); font-size: 0.78rem; } .advisor-alternative-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; border: 1px solid var(--yellow); border-radius: 11px; padding: 10px 12px; background: var(--yellow-soft); color: var(--yellow); font-size: 0.84rem; font-weight: 800; } .advisor-difference { display: flex; flex-wrap: wrap; gap: 5px; } .advisor-difference span { border-radius: 999px; padding: 3px 7px; background: var(--yellow-soft); color: var(--yellow); font-size: 0.72rem; font-weight: 800; } .gpu-advisor-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .gpu-advisor-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } .gpu-advisor-card > div:first-child { display: flex; align-items: center; gap: 8px; } .advisor-rank { color: var(--blue); font-size: 0.8rem; font-weight: 900; } .gpu-advisor-card p, .advisor-disclaimer { color: var(--muted); font-size: 0.82rem; } .gpu-advisor-card dl { display: grid; gap: 6px; margin: 12px 0; } .gpu-advisor-card dl > div { display: grid; grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr); gap: 8px; } .gpu-advisor-card dt { color: var(--muted); } .gpu-advisor-card dd { margin: 0; font-weight: 800; text-align: right; overflow-wrap: anywhere; } body[data-workspace="finder"] #gpuAdvisorPanel, body[data-workspace="finder"] #gpuPlacementPanel, body[data-workspace="finder"] #decisionStudio, body[data-workspace="modelFinder"] #onboardingScreen, body[data-workspace="modelFinder"] #hardwarePanel, body[data-workspace="modelFinder"] #resultsPanel, body[data-workspace="modelFinder"] #gpuInsightsPanel, body[data-workspace="modelFinder"] #benchmarkSheet, body[data-workspace="modelFinder"] #benchmarkDashboard, body[data-workspace="placement"] #onboardingScreen, body[data-workspace="placement"] #resultsPanel, body[data-workspace="placement"] #gpuAdvisorPanel, body[data-workspace="placement"] #gpuInsightsPanel, body[data-workspace="placement"] #benchmarkSheet, body[data-workspace="placement"] #benchmarkDashboard, body[data-workspace="infra"] #onboardingScreen, body[data-workspace="infra"] #hardwarePanel, body[data-workspace="infra"] #resultsPanel, body[data-workspace="infra"] #gpuAdvisorPanel, body[data-workspace="infra"] #gpuInsightsPanel, body[data-workspace="infra"] #benchmarkSheet, body[data-workspace="infra"] #benchmarkDashboard { display: none !important; } body[data-workspace="placement"] #hardwarePanel > :not(#gpuPlacementPanel) { display: none !important; } .benchmark-dashboard { width: 100%; margin: 18px 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); } .benchmark-dashboard-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 16px 0; } .benchmark-dashboard-grid > div { padding: 14px; border-radius: 12px; background: var(--surface-soft); } .benchmark-dashboard-grid span, .benchmark-dashboard-grid strong { display: block; } .benchmark-dashboard-grid span { color: var(--muted); font-size: 0.8rem; } .benchmark-dashboard-grid strong { margin-top: 4px; font-size: 1.35rem; } .gpu-mobile-comparison-cards { display: none; } @media (max-width: 1100px) { .gpu-advisor-controls, .advisor-wizard-panel[data-advisor-step-panel="1"], .advisor-wizard-panel[data-advisor-step-panel="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .advisor-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gpu-advisor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { button, .ghost-button, .primary-button, [data-language-toggle] button, [data-theme-toggle] button { min-height: 44px; height: auto; } .gpu-advisor-controls, .advisor-wizard-panel[data-advisor-step-panel="1"], .advisor-wizard-panel[data-advisor-step-panel="2"], .gpu-advisor-list, .advisor-detail-grid { grid-template-columns: 1fr; } .advisor-model-search-field, .advisor-model-select-field { grid-column: span 1; } .advisor-wizard-navigation { grid-template-columns: 1fr 1fr; } .advisor-wizard-navigation > span { grid-column: 1 / -1; grid-row: 1; } .advisor-wizard-navigation > [data-advisor-back] { grid-column: 1; grid-row: 2; } .advisor-wizard-navigation > :last-child, .advisor-wizard-navigation > [data-advisor-next] { grid-column: 2; grid-row: 2; } .advisor-alternative-notice { align-items: stretch; flex-direction: column; } .benchmark-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gpu-comparison-table { display: none; } .gpu-mobile-comparison-cards { display: grid; gap: 10px; } .gpu-mobile-comparison-cards article { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); } .gpu-mobile-comparison-cards dl { display: grid; gap: 6px; margin: 10px 0 0; } .gpu-mobile-comparison-cards dl > div { display: flex; justify-content: space-between; gap: 10px; } .gpu-mobile-comparison-cards dt { color: var(--muted); } .gpu-mobile-comparison-cards dd { margin: 0; font-weight: 800; } } /* v2 decision hub: reliability, deep links, TCO, and launch recipes */ .decision-hub { width: min(1540px, calc(100% - 48px)); margin: 20px auto; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); overflow: hidden; } .decision-hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px; border-bottom: 1px solid var(--line); } .decision-hub-head h2 { margin: 4px 0 6px; } .decision-hub-head p { margin: 0; color: var(--muted); } .decision-hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .decision-hub-tabs button { min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font-weight: 700; } .decision-hub-tabs button.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); } .decision-hub-body { padding: 24px; } .hub-metric-grid, .tco-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .hub-metric-grid article, .tco-summary article { display: grid; gap: 5px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-raised); } .hub-metric-grid span, .tco-summary span, .deep-link-grid > article > span { color: var(--muted); font-size: 0.86rem; } .hub-metric-grid strong, .tco-summary strong { font-size: 1.35rem; } .hub-metric-grid small { color: var(--muted); } .reliability-list, .benchmark-v2-list { display: grid; gap: 10px; margin-top: 16px; } .reliability-card, .benchmark-v2-list article { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-raised); } .reliability-card { padding: 16px; border-left: 4px solid var(--muted); } .reliability-card.confidence-high { border-left-color: var(--green); } .reliability-card.confidence-medium { border-left-color: var(--blue); } .reliability-card > div:first-child, .benchmark-v2-list article > div:first-child { display: flex; justify-content: space-between; gap: 14px; } .reliability-card dl, .deep-link-grid dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; } .reliability-card dl div, .deep-link-grid dl div { display: grid; gap: 3px; } .reliability-card dt, .deep-link-grid dt { color: var(--muted); font-size: 0.78rem; } .reliability-card dd, .deep-link-grid dd { margin: 0; font-weight: 700; } .benchmark-v2-toolbar, .purchase-controls, .launch-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .benchmark-v2-toolbar { grid-template-columns: minmax(220px, 2fr) auto minmax(180px, 1fr); } .benchmark-v2-toolbar label, .purchase-controls label, .launch-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 0.82rem; } .benchmark-v2-toolbar .check-field { display: flex; align-items: center; align-self: end; justify-self: start; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; white-space: nowrap; } .benchmark-v2-toolbar .check-field input[type="checkbox"] { flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--blue); } .benchmark-v2-list article { display: grid; grid-template-columns: minmax(220px, 2fr) auto minmax(160px, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 15px; } .benchmark-v2-list article > div { display: grid !important; } .benchmark-v2-list article > div span { color: var(--muted); } .evidence-pill { padding: 4px 8px; border-radius: 999px; background: var(--blue-soft); font-size: 0.78rem; font-weight: 700; } .evidence-pill.is-external { background: var(--panel); color: var(--muted); } .deep-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .deep-link-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-raised); } .deep-link-grid h3 { margin: 6px 0 16px; } .deep-link-grid .ghost-button { margin-top: 18px; } .purchase-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0; } .upgrade-verdict { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-raised); } .upgrade-verdict.is-worth { border-color: var(--green); } .upgrade-verdict.is-skip { border-color: var(--yellow); } .build-selector-grid, .build-price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; } .build-selector-grid label, .build-price-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 0.82rem; } .build-selector-grid label:first-child, .build-selector-grid label:nth-child(2) { grid-column: span 2; } .build-price-fieldset { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; } .build-price-fieldset legend { padding: 0 8px; font-weight: 800; } .build-price-fieldset small { color: var(--muted); } .build-verdict { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: 14px; background: var(--panel-raised); } .build-verdict.is-runnable { border-left-color: var(--green); } .build-verdict.is-blocked { border-left-color: var(--red); } .build-verdict > div { display: grid; align-content: start; gap: 5px; } .build-verdict span, .build-verdict small { color: var(--muted); } .build-verdict strong { font-size: 1.08rem; } .build-priority { margin-top: 18px; } .build-priority ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: build-priority; } .build-priority li { display: grid; grid-template-columns: minmax(150px, 0.4fr) 1.6fr; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-raised); counter-increment: build-priority; } .build-priority li strong::before { content: counter(build-priority) ". "; color: var(--blue); } .build-priority li span { color: var(--muted); } .launch-controls { grid-template-columns: repeat(2, minmax(0, 260px)); margin: 16px 0; } .launch-output { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .launch-output > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--panel-raised); } .launch-output pre { max-height: 360px; margin: 0; padding: 16px; overflow: auto; border-top: 1px solid var(--line); background: #10151b; color: #e7edf3; white-space: pre-wrap; } .hub-empty { padding: 28px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; } @media (max-width: 900px) { .decision-hub-head { align-items: stretch; flex-direction: column; } .hub-metric-grid, .tco-summary, .purchase-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .build-selector-grid, .build-price-grid, .build-verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); } .benchmark-v2-list article { grid-template-columns: 1fr auto; } } @media (max-width: 680px) { .decision-hub { width: calc(100% - 20px); border-radius: 14px; } .decision-hub-head, .decision-hub-body { padding: 16px; } .decision-hub-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .decision-hub-tabs button { width: 100%; } .hub-metric-grid, .tco-summary, .deep-link-grid, .benchmark-v2-toolbar, .purchase-controls, .build-selector-grid, .build-price-grid, .build-verdict, .launch-controls { grid-template-columns: 1fr; } .build-selector-grid label:first-child, .build-selector-grid label:nth-child(2) { grid-column: span 1; } .build-priority li { grid-template-columns: 1fr; } .reliability-card dl, .deep-link-grid dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .benchmark-v2-list article { grid-template-columns: 1fr; gap: 8px; } .upgrade-verdict { align-items: flex-start; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .gpu-insights-head, .gpu-compare-controls, .gpu-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .gpu-insights-head h2 { margin: 3px 0 0; font-size: 1.15rem; } .gpu-detail-summary { margin-top: 16px; align-items: stretch; flex-wrap: wrap; } .gpu-detail-fact { flex: 1 1 150px; padding: 12px; border-radius: 12px; background: var(--surface-soft); } .gpu-detail-fact span, .gpu-detail-fact small { display: block; color: var(--muted); } .gpu-detail-fact strong { display: block; margin: 4px 0; } .gpu-compare-builder { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .gpu-compare-controls { justify-content: flex-start; flex-wrap: wrap; } .gpu-compare-controls .field { min-width: min(100%, 280px); } .gpu-comparison-table-wrap { margin-top: 14px; overflow-x: auto; } .gpu-comparison-table { width: 100%; min-width: 660px; border-collapse: collapse; } .gpu-comparison-table th, .gpu-comparison-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; } :where(button, a, input, select, summary, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 70%, white); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 760px) { .workload-tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 6px; } .workload-tab { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; } .gpu-insights-panel { padding: 15px; } .gpu-insights-head { align-items: flex-start; flex-direction: column; } .gpu-insights-head .ghost-button, .gpu-not-found-actions .primary-button, .gpu-not-found-actions .ghost-button { width: 100%; min-height: 44px; } .gpu-not-found-actions > div { flex-direction: column; } .gpu-detail-fact { flex-basis: calc(50% - 8px); min-width: 130px; } } .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; flex-wrap: wrap; gap: 7px; } 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); } .app-mode-status { margin: 0; padding: 0 22px 12px; color: var(--muted); background: var(--surface-soft); font-size: 12px; } #simpleModePanel[hidden], #expertModeSection[hidden] { display: none !important; } #expertModeSection:not([hidden]) { display: block; } .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; 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: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .onboarding-gpu-card { display: grid; gap: 4px; flex: 1 1 190px; max-width: 260px; 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: 0; border: 0; border-radius: 0; background: transparent; } .simple-mode-body { padding: 0; } .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: 8px; 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-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 52%, var(--panel-raised)); box-shadow: inset 3px 0 0 var(--blue); } .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 { min-height: 32px; border: 0; border-radius: 5px; padding: 0 4px; background: transparent; 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 { min-height: 32px; border: 0; border-radius: 5px; padding: 0 4px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 800; cursor: pointer; } .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; } .run-feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .run-feedback-actions > span { flex: 1 1 180px; color: var(--ink); font-weight: 800; } .run-feedback-actions > a { min-height: 40px; text-decoration: none; } .simple-inspector-actions { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; } @media (min-width: 1280px) { /* #communityMeasurementPanel(실측 결과 제보)과 #decisionHub(의사결정 허브)는 app.js/community-feedback.js/platform-v2.js에서 #benchmarkSheet 옆에 형제 요소로 끼워 넣지만, 이 폭 목록에는 빠져 있었다. 그래서 "1순위" 카드를 눌러 오른쪽 상세 패널(간편 인스펙터)이 열리면 .app-shell·.benchmark-panel·.app-footer는 인스펙터 폭만큼 줄어드는데, 이 두 패널만 원래 폭(min(1540px, calc(100vw - 48px)))을 그대로 유지해서 인스펙터 뒤로 훨씬 길게 삐져나가 보였다(사용자 보고: "어느 창들은 옆으로 가지는데 어느 창들은 그대로 길게 있어"). 같은 목록에 추가해 동일하게 줄어들도록 한다. */ body.simple-inspector-active .app-shell, body.simple-inspector-active .benchmark-panel, body.simple-inspector-active .app-footer, body.simple-inspector-active #communityMeasurementPanel, body.simple-inspector-active #decisionHub { 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; } .community-nudge { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; } .community-nudge-empty { display: inline-block; padding: 5px 10px; border: 1px solid var(--yellow); border-radius: var(--radius-sm); color: var(--yellow); font-weight: 600; } .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; } .value-frontier { margin: 2px 0 18px; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-soft); } .value-frontier-head, .value-frontier-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .value-frontier-head h3 { margin: 4px 0 0; font-size: 18px; } .value-frontier-head p, .value-frontier-method, .value-frontier-budget > p { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; } .value-frontier-filter { display: grid; flex: 0 0 min(360px, 40%); gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; } .value-frontier-filter select { width: 100%; } .value-frontier-method { margin-bottom: 14px; padding: 8px 10px; border-left: 3px solid var(--green); background: var(--panel-raised); } .value-frontier-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.8fr); gap: 14px; align-items: start; } .value-frontier-chart, .value-frontier-budget { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-raised); } .value-frontier-chart { min-height: 300px; padding: 8px; } .value-frontier-chart svg { display: block; width: 100%; height: auto; } .frontier-grid { stroke: var(--line); stroke-width: 1; } .frontier-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .frontier-point { stroke: var(--panel-raised); stroke-width: 2; } .frontier-point.is-frontier { fill: var(--green); } .frontier-point.is-dominated { fill: var(--muted); opacity: 0.45; } .frontier-gpu-line { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; } .frontier-gpu-label, .frontier-model-label, .frontier-axis-label, .frontier-axis-title { fill: var(--muted); font-family: inherit; font-size: 10px; } .frontier-gpu-label, .frontier-axis-title { fill: var(--ink); font-weight: 800; } .frontier-model-label { fill: var(--ink); font-size: 9px; font-weight: 700; } .value-frontier-budget { padding: 14px; } .value-frontier-budget h4 { margin: 0; font-size: 14px; } .value-frontier-budget-table { display: grid; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .value-frontier-budget-row { display: grid; grid-template-columns: 58px minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; align-items: center; min-height: 38px; padding: 7px 9px; border-top: 1px solid var(--line); font-size: 11px; } .value-frontier-budget-row:first-child { border-top: 0; } .value-frontier-budget-row.is-head { background: var(--surface-tint); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; } .value-frontier-budget-row span { min-width: 0; } .value-frontier-budget-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; } .value-frontier-footer { align-items: center; margin-top: 10px; color: var(--muted); font-size: 10.5px; } .value-frontier-footer a { flex: 0 0 auto; color: var(--blue); font-weight: 800; text-decoration: none; } .value-frontier-footer a:hover { text-decoration: underline; } .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; } } @media (max-width: 1100px) { .value-frontier-layout { grid-template-columns: 1fr; } } @media (max-width: 680px) { .value-frontier { padding: 13px; } .value-frontier-head, .value-frontier-footer { display: grid; } .value-frontier-filter { width: 100%; } .value-frontier-budget-row { grid-template-columns: 48px minmax(0, 1fr); } .value-frontier-budget-row > :nth-child(3) { display: none; } .frontier-model-label { display: none; } } .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: 0; } .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; } .benchmark-body, .benchmark-body > * { min-width: 0; max-width: 100%; } .benchmark-chart-bar-row { grid-template-columns: minmax(0, 1fr) minmax(72px, 1fr) 48px; gap: 6px; } .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: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding: 0 12px 6px; scroll-padding-inline: 12px; scrollbar-width: thin; } .workload-tab { flex: 0 0 auto; width: auto; padding: 0 10px; white-space: nowrap; } .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; } .getting-started-panel { 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 { width: 100%; flex-direction: row; } .hardware-top-actions .ghost-button, .hardware-top-actions .primary-button { flex: 1 1 0; width: auto; white-space: nowrap; } .simple-next-actions { width: 100%; flex-direction: column; } .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; } /* 아래 트랙 폭들은 --inspector-width가 clamp(360px, 28vw, 520px)의 상한(520px)에 가깝게 붙는 매우 넓은 화면(대략 1857px+, 이 폭부터는 .app-shell도 1540px 상한에 걸려 더 커지지 않으므로 목록에 남는 여유 폭이 더 이상 늘지 않고 고정됨)을 기준으로 다시 계산한 값이다. 기존 값(82 270 116 132 92 126 68 18 + gap 10×7)은 그 폭에서 실제 가용 공간보다 약 44px 넓어서, 그리드 내용이 상세 패널 쪽으로 삐져나가 CTX 값과 화살표가 겹쳐 보이는 문제가 있었다(사용자 보고). 각 열을 6~15% 정도씩만 줄여 여유를 만들었다 — 특히 모델명 열은 270→230px로 줄었지만 기존에도 최소폭보다 여유가 있어 실제 표시에는 영향이 없는 것을 확인함. */ body.model-workbench-active .model-list-head, body.model-workbench-active .model-row { grid-template-columns: 82px minmax(230px, 1fr) 108px 124px 84px 118px 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; } .si-version-section { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } .si-version-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .si-version-head h3 { margin: 3px 0 0; } .si-version-head .is-good { color: #45b97c; } .si-version-head .is-risk { color: #ef8f70; } .si-compact-grid { grid-template-columns: repeat(5, minmax(130px, 1fr)); margin-bottom: 14px; } .si-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 8px; } .si-metric-grid span { display: grid; gap: 5px; padding: 12px; color: var(--muted); border-radius: 10px; background: var(--surface-tint); } .si-metric-grid strong { color: var(--ink); font-size: 1rem; } .si-avatar-latency, .si-architecture { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 12px; overflow-x: auto; border: 1px dashed var(--line-strong); border-radius: 10px; } .si-avatar-latency span, .si-architecture span { flex: 0 0 auto; padding: 9px 11px; border-radius: 8px; background: var(--surface-tint); } .si-avatar-latency strong { margin-left: auto; white-space: nowrap; } .si-project-actions, .si-mode-switch { display: flex; flex-wrap: wrap; gap: 8px; } .si-project-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .si-project-list button { display: grid; gap: 4px; min-width: 0; padding: 11px; text-align: left; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-tint); } .si-project-list span, .si-change-summary, .si-confidence-list small { color: var(--muted); } .si-mode-switch button { padding: 8px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; background: transparent; } .si-mode-switch button.is-active { color: var(--ink); border-color: var(--blue); background: var(--blue-soft); } .si-command { max-width: 100%; padding: 13px; overflow: auto; color: #d6f0ff; border-radius: 10px; background: #111820; } .si-evidence-panel .si-confidence-list span { grid-template-columns: minmax(140px, .8fr) minmax(170px, 1fr); } @media (max-width: 720px) { .si-version-head, .si-avatar-latency, .si-architecture { align-items: stretch; flex-direction: column; } .si-compact-grid, .si-metric-grid, .si-project-list { grid-template-columns: 1fr; } .si-avatar-latency b, .si-architecture b { align-self: center; transform: rotate(90deg); } .si-avatar-latency strong { margin-left: 0; white-space: normal; } .si-bom-editor, .si-bom-summary, .si-validation-grid, .si-price-grid, .si-topology-metrics { grid-template-columns: 1fr; } .si-actions > :is(button, a) { width: 100%; } .si-commercial-flow { align-items: stretch; flex-direction: column; overflow: visible; } .si-commercial-flow > span { flex-basis: auto; } .si-commercial-flow > b { transform: rotate(90deg); } } body.infra-task-active .onboarding-screen, body.infra-task-active #hardwarePanel, body.infra-task-active #resultsPanel, body.infra-task-active #gpuAdvisorPanel, body.infra-task-active #decisionHub, body.infra-task-active #benchmarkSheet, body.infra-task-active #benchmarkDashboard, body.infra-task-active #communityMeasurementPanel, body.placement-task-active #resultsPanel, body.placement-task-active #gpuAdvisorPanel, body.placement-task-active #decisionHub, body.placement-task-active #benchmarkSheet, body.placement-task-active #benchmarkDashboard, body.placement-task-active #communityMeasurementPanel, /* #decisionHub(의사결정 허브)는 coreTaskMode와 무관하게 platform-v2.js가 #benchmarkSheet 형제로 무조건 삽입한다. infra/placement/community 모드는 이미 숨기고 있었는데 "실행할 모델을 알아요"(modelFinder) 모드만 빠져 있어, GPU 어드바이저 결과 밑에 관련 없는 의사결정 허브가 그대로 노출되고 있었다 — 같은 목록에 추가해 숨긴다. */ body.model-finder-task-active #decisionHub { display: none !important; } /* #benchmarkDashboard·#communityMeasurementPanel는 community-feedback.js와 platform-v2.js가 coreTaskMode와 무관하게 #benchmarkSheet의 형제로 무조건 삽입한다. 4번째 "커뮤니티 데이터" 모드를 분리 신설하면서, 이 두 패널은 community 모드에서만 보이고 나머지 3개 모드(finder/model-finder/infra)에서는 기본적으로 숨긴다. */ #benchmarkDashboard, #communityMeasurementPanel { display: none; } body.community-task-active #benchmarkDashboard, body.community-task-active #communityMeasurementPanel { display: block; } body.community-task-active .onboarding-screen, body.community-task-active #hardwarePanel, body.community-task-active #resultsPanel, body.community-task-active #gpuAdvisorPanel, body.community-task-active #decisionHub, body.community-task-active #benchmarkSheet { display: none !important; } .decision-studio.is-infra-workspace { margin-top: 18px; } .decision-studio.is-infra-workspace .decision-studio-tabs { display: none; } .si-input-mode-switch { display: flex; gap: 8px; margin-bottom: 14px; } .si-input-mode-switch button { min-height: 40px; padding: 0 18px; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-tint); } .si-input-mode-switch button.is-active { color: var(--on-blue); border-color: var(--blue); background: var(--blue); } .si-simple-wizard { padding: 20px; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--surface-soft); box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 7%, transparent); } .si-wizard-head { display: flex; justify-content: space-between; gap: 18px; } .si-wizard-head h3, .si-wizard-head p { margin: 4px 0; } .si-wizard-step { margin-top: 20px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-raised); } .si-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .si-choice-grid button { display: grid; gap: 4px; min-height: 54px; padding: 10px; text-align: left; color: var(--ink); border: 2px solid var(--line); border-radius: 10px; background: var(--surface-tint); } .si-choice-grid button:hover { border-color: var(--blue); } .si-choice-grid button.is-active { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); } .si-choice-grid small { color: var(--muted); } .si-user-choice-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .si-custom-users { display: grid; gap: 5px; min-height: 54px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface-tint); color: var(--muted); font-size: 0.76rem; font-weight: 800; } .si-custom-users > span:last-child { display: flex; align-items: center; gap: 5px; color: var(--ink); } .si-custom-users input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; } .si-auto-result { margin-top: 22px; padding: 16px; border: 1px solid var(--blue); border-radius: 12px; background: var(--panel-raised); } .si-auto-result > div:first-child { display: grid; gap: 4px; } .si-auto-result > div:first-child > span, .si-auto-result small, .si-auto-result p { color: var(--muted); } .si-auto-result > div:first-child strong { font-size: 18px; } .link-button { border: 0; background: none; padding: 0; margin: 0; color: var(--blue); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; } .link-button:hover, .link-button:focus-visible { opacity: 0.8; } .si-auto-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .si-auto-parts span { display: grid; gap: 4px; padding: 11px; border-radius: 9px; background: var(--surface-soft); } .si-model-selection-evidence { display: grid; gap: 10px; margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); } .si-model-selection-evidence > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .si-model-selection-evidence > div > span { display: grid; gap: 3px; min-width: 0; } .si-model-selection-evidence b { color: var(--muted); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; } .si-model-selection-evidence a { color: var(--blue); overflow-wrap: anywhere; } .si-expert-form { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; } .si-expert-form > summary { padding: 14px 16px; cursor: pointer; font-weight: 800; } .si-expert-form .si-question-grid { /* Was "0 16px 16px" (no top padding), which put the first row of fields ("제안 회사" etc.) flush against the card's top border right under the summary toggle. Restored top breathing room to match the other sides. */ padding: 16px; } .si-baseline-guide { display: grid; gap: 14px; margin-top: 14px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-soft); } .si-baseline-guide h3 { margin: 4px 0 6px; } .si-baseline-guide p { max-width: 880px; margin: 0; color: var(--muted); line-height: 1.55; } .si-baseline-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .si-baseline-options button { display: grid; gap: 5px; min-width: 0; min-height: 92px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); color: var(--ink); cursor: pointer; text-align: left; } .si-baseline-options button:hover, .si-baseline-options button:focus-visible, .si-baseline-options button.is-active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } .si-baseline-options button.is-active { background: var(--blue-soft); } .si-baseline-options strong { color: var(--blue); font-size: 0.92rem; } .si-baseline-options small, .si-baseline-options span { overflow-wrap: anywhere; color: var(--muted); line-height: 1.4; } .si-baseline-options span { color: var(--ink); font-size: 0.76rem; font-weight: 800; } .studio-question-grid label > span:first-child { min-width: 0; } .studio-question-grid .studio-check { /* Was flex-wrap: wrap, which — at this grid's ~130px column width — wrapped the checkbox and its label onto separate flex lines instead of just letting the label's own text wrap normally. That made the checkbox look unrelated to any label ("스트리밍 응답"/"자동 확장" floating below an unlabeled box). Keeping them on one flex line and letting long labels (e.g. "서비스·스토리지·관리망 분리") wrap their own text instead keeps the checkbox visually attached to its label at any width. */ flex-wrap: nowrap; align-items: flex-start; } .studio-question-grid .studio-check > input[type="checkbox"] { margin-top: 2px; } .si-expert-form .studio-question-grid .studio-check { /* This checkbox variant can carry a third child - a full-width .si-field-baseline hint appended by decorateSiDetailedFields() - on top of the checkbox and its label. The general nowrap rule above kept that hint on the same flex line, where its flex-basis:100% left almost no room for the label text and squeezed it down to a couple of characters wide, wrapping it vertically. This card always spans the full form width (grid-column: 1 / -1), so allowing wrap here just sends the hint to its own line without ever splitting the checkbox from its label text. */ flex-wrap: wrap; grid-column: 1 / -1; min-height: 0; margin-top: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); } .si-field-baseline { display: block; min-width: 0; color: var(--muted); font-size: 0.7rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .si-field-warning { display: block; color: var(--yellow); font-size: 0.7rem; font-weight: 800; line-height: 1.4; } .studio-question-grid label.has-input-warning > input, .studio-question-grid label.has-input-warning > select { border-color: var(--yellow); box-shadow: 0 0 0 1px color-mix(in srgb, var(--yellow) 30%, transparent); } .studio-check .si-field-baseline { flex: 0 0 100%; } .si-readiness-panel { display: grid; gap: 13px; margin: 14px 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 55%), var(--panel-raised); } .si-readiness-panel.is-ready { border-color: color-mix(in srgb, var(--green) 60%, var(--line)); } .si-readiness-panel.is-warning { border-color: color-mix(in srgb, var(--yellow) 55%, var(--line)); } .si-readiness-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .35fr); align-items: center; gap: 18px; } .si-readiness-head h3 { margin: 3px 0; } .si-readiness-head p { margin: 0; color: var(--muted); } .si-readiness-progress { height: 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); } .si-readiness-progress span { display: block; height: 100%; border-radius: inherit; background: var(--blue); } .si-readiness-panel.is-ready .si-readiness-progress span { background: var(--green); } .si-workflow-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .si-workflow-nav button, .si-readiness-checks button { min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); cursor: pointer; text-align: left; } .si-workflow-nav button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 11px; font-weight: 850; } .si-workflow-nav button b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); } .si-workflow-nav button:hover, .si-workflow-nav button:focus-visible { border-color: var(--blue); } .si-readiness-details > summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--blue); font-weight: 850; } .si-readiness-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; } .si-readiness-checks button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 7px; min-height: 70px; padding: 9px; } .si-readiness-checks button > span { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-tint); font-weight: 900; } .si-readiness-checks button small { overflow-wrap: anywhere; color: var(--muted); line-height: 1.35; } .si-readiness-checks button.is-ok > span { color: var(--green); } .si-readiness-checks button.is-warning > span, .si-readiness-checks button.is-advisory > span { color: var(--yellow); } .si-readiness-checks button:disabled { cursor: default; opacity: 1; } .si-readiness-actions { display: flex; flex-wrap: wrap; gap: 8px; } .si-plan-fit { margin-left: auto; padding: 4px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; } .si-plan-fit.is-fit { color: var(--green); } .si-plan-fit.is-review { color: var(--yellow); } .si-plan-tradeoffs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 14px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); } .si-plan-tradeoffs span { display: grid; gap: 4px; min-width: 0; padding: 11px; background: var(--surface-soft); } .si-plan-tradeoffs small { color: var(--muted); } .si-plan-tradeoffs strong { overflow-wrap: anywhere; } .decision-studio.is-simple-sizing .si-intro, .decision-studio.is-simple-sizing .si-expert-form, .decision-studio.is-simple-sizing .si-advanced, .decision-studio.is-simple-sizing .si-output-grid, .decision-studio.is-simple-sizing .si-deliverable-grid, .decision-studio.is-simple-sizing .si-poc-mode, .decision-studio.is-simple-sizing .si-version-section { display: none; } @media (max-width: 900px) { .core-task-actions, .si-choice-grid, .si-auto-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .si-user-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .si-plan-detail-grid { grid-template-columns: 1fr; } .si-baseline-options { grid-template-columns: 1fr; } .si-readiness-checks, .si-plan-tradeoffs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .core-task-actions, .si-choice-grid, .si-auto-parts, .si-model-selection-evidence > div { grid-template-columns: 1fr; } .si-wizard-head { flex-direction: column; } .si-user-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .si-plan-detail-head { flex-direction: column; } .si-plan-detail-head > strong { text-align: left; } .si-readiness-head, .si-workflow-nav, .si-readiness-checks, .si-plan-tradeoffs { grid-template-columns: 1fr; } .si-plan-card-head { align-items: flex-start; flex-wrap: wrap; } .si-plan-fit { order: 3; width: 100%; margin-left: 0; text-align: center; } } .showcase-copy { display: grid; gap: 2px; min-width: 150px; } .showcase-copy strong { color: var(--ink); font-size: 13px; } .showcase-copy small { color: var(--muted); font-weight: 650; } .showcase-feedback { min-height: 44px; display: inline-flex; align-items: center; margin-left: auto; color: var(--blue); font-size: 12px; font-weight: 850; } body.guide-modal-open { overflow: hidden; } .guide-modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 32, 0.5); } .guide-modal-backdrop[hidden] { display: none; } .getting-started-panel { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 51; width: min(880px, 94vw); max-height: 86vh; overflow-y: auto; padding: 20px; border: 1px solid var(--line-strong); border-top: 4px solid var(--blue); border-radius: var(--radius-md); background: var(--panel-raised); box-shadow: 0 16px 40px rgba(15, 23, 32, 0.28); } .getting-started-panel[hidden] { display: none; } .getting-started-panel > div { display: flex; align-items: center; justify-content: space-between; } .guide-panel-actions { display: flex; align-items: center; gap: 8px; } .getting-started-panel ol { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding: 0; list-style: none; } .getting-started-panel li { padding: 0; } .guide-step-button { display: grid; /* v7.20.4: dropped the trailing "auto" column, which used to hold a "입력 1개 · 약 10초"-style time/step-count tag. Feedback called these out as reading like generic AI-generated filler rather than something a person would actually write, so the tag (and its data) were removed entirely instead of just restyled. */ grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4px 16px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-raised); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .guide-step-button::before { content: counter(guide-step); counter-increment: guide-step; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-tint); color: var(--blue); font-family: var(--mono); font-size: 12px; } .getting-started-panel ol { counter-reset: guide-step; } .guide-step-button:hover, .guide-step-button:focus-visible { border-color: var(--blue); transform: translateY(-1px); } .getting-started-panel li b { font-size: 13px; } .getting-started-panel li span, .getting-started-panel > p { color: var(--muted); font-size: 12px; line-height: 1.5; } @media (max-width: 720px) { .guide-step-button { grid-template-columns: 26px 1fr; } } .guide-wizard-view[hidden], .guide-list-view[hidden] { display: none; } .guide-wizard-view { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-raised); } .guide-wizard-back { margin-bottom: 10px; } .guide-wizard-question { margin: 0 0 10px; font-size: 13px; font-weight: 800; } .guide-wizard-options { display: flex; flex-direction: column; gap: 8px; } .guide-wizard-option { width: 100%; text-align: left; } @keyframes guideHighlightPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } 25% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .35); } 50% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } 75% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .35); } } .is-guide-highlight { animation: guideHighlightPulse 1.1s ease; } .catalog-request-center { border-top: 1px solid var(--line); } .catalog-request-center > summary { padding-top: 10px; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; } .catalog-request-center > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 8px; } .catalog-request-center > div span { padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-raised); font-size: 11px; font-weight: 800; } .catalog-request-center > div b { color: var(--blue); font-family: var(--mono); } .catalog-request-center p { color: var(--muted); font-size: 12px; } .catalog-request-center nav { display: flex; flex-wrap: wrap; gap: 8px; } .catalog-request-center nav a { color: var(--blue); font-size: 12px; font-weight: 800; } .workspace-journey { display: flex; align-items: center; gap: 16px; margin: 10px 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); } .workspace-journey > strong { flex: 0 0 auto; font-size: 12px; } .workspace-journey ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; } .workspace-journey li { display: flex; align-items: center; color: var(--muted); font-size: 12px; font-weight: 700; } .workspace-journey li:not(:last-child)::after { content: "→"; margin: 0 10px; color: var(--line-strong); } .workspace-journey li b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--mono); } .workspace-journey li.is-current { color: var(--blue); } .workspace-journey li.is-current b { border-color: var(--blue); background: var(--blue); color: var(--on-blue); } .workspace-journey li.is-done b { border-color: var(--green); color: var(--green); } .workspace-journey .journey-step-trigger { cursor: pointer; border-radius: 6px; } .workspace-journey .journey-step-trigger:hover, .workspace-journey .journey-step-trigger:focus-visible { color: var(--blue); outline: none; } .workspace-journey .journey-step-trigger:hover b, .workspace-journey .journey-step-trigger:focus-visible b { border-color: var(--blue); } .si-wizard-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 20px; padding: 0; list-style: none; } .si-wizard-progress li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 28px auto; align-items: center; min-width: 0; row-gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; border-radius: 8px; } .si-wizard-progress li:hover, .si-wizard-progress li:focus-visible { color: var(--blue); outline: none; } .si-wizard-progress li:hover b, .si-wizard-progress li:focus-visible b { border-color: var(--blue); } .si-wizard-progress li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 14px; right: -4px; left: 36px; height: 1px; background: var(--line); } .si-wizard-progress b { display: inline-grid; z-index: 1; grid-column: 1; grid-row: 1; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel-raised); } .si-wizard-progress li > span { grid-column: 1 / -1; grid-row: 2; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; } .si-wizard-progress .is-current { color: var(--blue); } .si-wizard-progress .is-current b { border-color: var(--blue); background: var(--blue); color: var(--on-blue); } .si-wizard-result { min-width: 0; } .simple-verdict { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; gap: 8px 12px; min-width: 0; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-raised); } .simple-verdict > span { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; } .simple-verdict.is-fit > span { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); } .simple-verdict.is-review > span { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, transparent); } .simple-verdict > strong { min-width: 0; font-size: 1.08rem; line-height: 1.3; white-space: nowrap; } .simple-verdict > small { min-width: 0; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; } .si-step-hint { display: block; margin: 5px 0 12px; color: var(--muted); } .si-choice-grid.si-scenario-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .si-scenario-grid button { display: grid; grid-template-columns: auto 1fr; align-content: start; min-height: 104px; text-align: left; } .si-scenario-grid button > span { grid-row: 1 / span 2; padding: 3px 6px; border-radius: 4px; background: var(--surface-tint); color: var(--blue); font: 700 10px var(--mono); } .si-scenario-grid button > b, .si-scenario-grid button > small { margin-left: 8px; } .si-scenario-grid button > small { margin-top: 5px; color: var(--muted); line-height: 1.4; } .price-coverage-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 8px; } .price-coverage-note strong, .price-coverage-note small { display: block; } .price-coverage-note small { margin-top: 4px; color: var(--muted); } .decision-guidance { margin: 16px 0; padding: 18px; border: 1px solid var(--blue); border-radius: 12px; background: color-mix(in srgb, var(--blue-soft) 55%, var(--panel)); } .decision-guidance-head, .cost-lever-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .decision-guidance-head h3 { margin: 3px 0 0; } .decision-reason-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; padding: 0; list-style: none; } .decision-reason-list li { padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-raised); font-weight: 800; } .decision-guidance details { margin: 10px 0 18px; } .cost-lever-head small { color: var(--muted); } .cost-lever-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .cost-lever-grid button { display: flex; align-items: flex-start; flex-direction: column; min-height: 96px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-raised); } .cost-lever-grid button:hover { border-color: var(--blue); } .cost-lever-grid button strong { color: var(--green); } .cost-lever-grid button small { margin-top: 5px; color: var(--muted); } .decision-studio.is-readonly-proposal .decision-studio-head { padding-bottom: 0; border-bottom: 0; } .decision-studio.is-readonly-proposal .decision-studio-head > div:first-child { display: none; } .customer-proposal { max-width: 1120px; margin: 0 auto; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-raised); } .customer-proposal > header, .customer-proposal > footer, .proposal-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .customer-proposal h3 { margin: 4px 0; font-size: clamp(22px, 3vw, 32px); } .proposal-readonly-badge { padding: 6px 9px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-size: 11px; font-weight: 900; white-space: nowrap; } .proposal-hero { margin: 22px 0; padding: 20px; border-radius: 10px; background: var(--blue-soft); } .proposal-hero strong, .proposal-hero h4, .proposal-hero span { display: block; margin: 4px 0; } .proposal-hero h4 { font-size: 21px; } .proposal-summary-grid, .proposal-part-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 22px; } .proposal-summary-grid > span, .proposal-part-grid > span { padding: 12px; border: 1px solid var(--line); border-radius: 8px; } .proposal-summary-grid small, .proposal-summary-grid strong, .proposal-part-grid b { display: block; } .proposal-summary-grid small { margin-bottom: 4px; color: var(--muted); } .proposal-part-grid b { margin-bottom: 5px; color: var(--blue); } .proposal-caution { padding: 12px; border-left: 3px solid var(--yellow); background: var(--yellow-soft); } .customer-proposal > footer { justify-content: flex-end; margin-top: 22px; } @media (max-width: 900px) { .catalog-request-center > div, .si-choice-grid.si-scenario-grid, .proposal-summary-grid, .proposal-part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workspace-journey { align-items: flex-start; flex-direction: column; } .workspace-journey ol { width: 100%; overflow-x: auto; } } @media (max-width: 600px) { .core-task-switcher { padding: 14px; } .core-task-intro, .price-coverage-note, .customer-proposal > header, .proposal-hero { align-items: stretch; flex-direction: column; } .start-guide-button { width: 100%; } .core-task-actions, .catalog-request-center > div, .si-choice-grid.si-scenario-grid, .decision-reason-list, .cost-lever-grid, .proposal-summary-grid, .proposal-part-grid { grid-template-columns: 1fr; } .workspace-journey li span { white-space: nowrap; } .si-wizard-progress li { grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: 24px auto; } .si-wizard-progress b { width: 24px; height: 24px; } .si-wizard-progress li:not(:last-child)::after { display: none; } .simple-verdict { grid-template-columns: max-content minmax(0, 1fr); } .simple-verdict > small { grid-column: 1 / -1; } .customer-proposal { padding: 16px; } } @media print { .customer-proposal { border: 0; } .customer-proposal button, .core-task-switcher, .workspace-journey { display: none !important; } } /* v4.8.1 pre-launch UX foundation */ .skip-link { position: fixed; z-index: 10000; top: 8px; left: 8px; padding: 10px 14px; border-radius: 8px; background: var(--blue); color: var(--on-blue); font-weight: 800; text-decoration: none; transform: translateY(-160%); transition: transform .15s ease; } .skip-link:focus { transform: translateY(0); } .demo-chip, .advanced-entry > summary, .advanced-entry button { min-height: 44px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel-raised); color: var(--ink); cursor: pointer; } .demo-chip { padding: 0 13px; font-weight: 800; } .demo-chip:hover, .advanced-entry > summary:hover, .advanced-entry button:hover { border-color: var(--blue); color: var(--blue); } .advanced-entry { position: relative; margin-left: auto; } .advanced-entry > summary { display: grid; place-items: center; min-width: 104px; padding: 0 13px; font-weight: 800; list-style: none; } .advanced-entry > summary::-webkit-details-marker { display: none; } .advanced-entry[open] > button { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); display: grid; gap: 3px; width: min(330px, calc(100vw - 48px)); padding: 12px; text-align: left; box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 18%, transparent); } .advanced-entry button span { font-weight: 800; } .advanced-entry button small { color: var(--muted); } .si-simple-budget { display: grid; gap: 12px; margin-top: 10px; } .si-simple-budget > label { display: grid; gap: 6px; } .si-simple-budget input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-tint); color: var(--ink); } .si-plan-card { display: grid; gap: 12px; padding: 16px; } .si-plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .si-plan-kind, .si-plan-selected { color: var(--blue); font-size: 12px; font-weight: 900; } .si-plan-selected { color: var(--muted); } .si-plan-card.is-selected .si-plan-selected { color: var(--green); } .si-decision-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); } .si-decision-metrics > span { display: grid; gap: 4px; min-width: 0; padding: 10px; background: var(--surface-soft); } .si-decision-metrics small { color: var(--muted); } .si-decision-metrics strong { overflow-wrap: anywhere; } .si-plan-reason { margin: 0; color: var(--ink); font-weight: 750; line-height: 1.5; } .si-plan-error-note { color: var(--muted); } .term-help { display: inline-grid; position: relative; place-items: center; vertical-align: middle; width: 18px; min-width: 18px; height: 18px; margin-left: 3px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-soft); color: var(--blue); cursor: help; font-size: 10px; font-weight: 900; line-height: 1; } .term-help::after { content: attr(data-tooltip); position: absolute; z-index: 40; left: var(--term-tip-offset-x, 50%); bottom: calc(100% + 8px); width: var(--term-tip-width, min(360px, calc(100vw - 32px))); padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel-raised); color: var(--ink); box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 16%, transparent); font-size: 12px; font-weight: 600; line-height: 1.45; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s; } .term-help:hover::after, .term-help:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } .term-help.is-tip-left::after { left: 0; transform: translate(0, 4px); } .term-help.is-tip-right::after { right: 0; left: auto; transform: translate(0, 4px); } .term-help.is-tip-positioned::after { right: auto; left: var(--term-tip-offset-x); transform: translate(0, 4px); } .term-help.is-tip-left:hover::after, .term-help.is-tip-left:focus-visible::after, .term-help.is-tip-right:hover::after, .term-help.is-tip-right:focus-visible::after, .term-help.is-tip-positioned:hover::after, .term-help.is-tip-positioned:focus-visible::after { transform: translate(0, 0); } .evidence-badge, .price-state { overflow-wrap: anywhere; } .simple-pick-specs .evidence-badge { margin-top: 3px; border-left: 3px solid currentColor; padding: 5px 7px; background: var(--surface-soft); font-size: 10.5px; line-height: 1.4; } .evidence-badge.is-estimate, .price-state.is-launch { color: var(--yellow); } .evidence-badge.is-user, .evidence-badge.is-external, .evidence-badge.is-measured, .price-state.is-market { color: var(--green); } .evidence-badge.is-related { color: var(--blue); } .price-state.is-quote { color: var(--muted); } .price-state small { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; } .studio-aging { display: block; color: var(--yellow); font-size: 11px; font-weight: 800; } .app-toast { position: fixed; z-index: 12000; right: 20px; bottom: 20px; max-width: min(380px, calc(100vw - 40px)); padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-raised); color: var(--ink); box-shadow: 0 14px 38px color-mix(in srgb, var(--ink) 20%, transparent); font-weight: 800; } .app-toast[data-tone="success"] { border-color: var(--green); } :where(button, a, input, select, summary, [role="button"]) { overflow-wrap: anywhere; } @media (max-width: 900px) { .core-task-actions { /* minmax(0, 1fr)이 아닌 단순 1fr을 쓰면, 그리드 트랙의 auto 최소 크기가 내부 .core-task-button(자체가 30px 1fr 그리드)의 min-content가 아니라 사실상 콘텐츠가 줄바꿈되지 않은 것으로 간주해 계산되면서 트랙이 강제로 넓어지는 "그리드 블로우아웃" 현상이 생긴다. 실제로 390px 폭 모바일에서 영어 모드일 때 "I already have a GPU" 카드가 423px로 넘쳐 본문 전체가 가로 스크롤되는 문제가 있었다. 최소 트랙 크기를 0으로 명시해 컨테이너 폭에 맞춰 줄어들 수 있게 한다. */ grid-template-columns: minmax(0, 1fr); } .core-task-button { min-height: 60px; } } @media (max-width: 560px) { .header-inner { align-items: stretch; flex-direction: column; gap: 10px; } .brand-block { width: 100%; } .brand-block h1 { min-width: 0; font-size: 19px; line-height: 1.3; } .header-nav { width: 100%; justify-content: flex-start; overflow-x: visible; } .core-task-demos { align-items: stretch; flex-direction: column; } .demo-chip, .showcase-feedback, .advanced-entry, .advanced-entry > summary { width: 100%; margin-left: 0; } .showcase-copy { width: 100%; } .advanced-entry[open] > button { position: static; width: 100%; margin-top: 6px; } .si-decision-metrics { grid-template-columns: 1fr; } .si-plan-card, .si-simple-wizard { padding: 14px; } } @media (prefers-reduced-motion: reduce) { .skip-link, .term-help::after { transition: none; } } /* Final v5.4 mobile touch-target override. Excludes .term-help: it's a small inline "?" annotation next to a field label, not a primary tap target, and forcing it to 44px tall while its width stays 18px turned the circular badge into a tall oval. */ @media (max-width: 680px) { button:not(.term-help), .ghost-button, .primary-button, [data-language-toggle] button, [data-theme-toggle] button { min-height: 44px !important; height: auto !important; } } /* v7.18 — consolidate the quick-recommendation result actions into a "공유 ▾" dropdown (Share ▾) and demote the Stack Planner shortcut to a small text link, since it also lives in the header's More menu now. */ .simple-share-dropdown { position: relative; margin-right: auto; } .simple-share-dropdown > .ghost-button { min-height: 32px; padding: 0 10px; font-size: 11px; } .simple-share-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 180px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-raised); box-shadow: 0 12px 28px rgba(15, 23, 32, 0.18); } .simple-share-menu[hidden] { display: none; } .simple-share-menu button { min-height: 0; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font-size: 12px; font-weight: 700; cursor: pointer; } .simple-share-menu button:hover { background: var(--blue-soft); } .text-link-button { min-height: 0; padding: 0; border: none; background: none; color: var(--blue); font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; } .gpu-insights-head { align-items: center; } @media (max-width: 680px) { .simple-share-dropdown { width: 100%; margin-right: 0; } .simple-share-dropdown > .ghost-button { width: 100%; } .simple-share-menu { left: 0; right: 0; width: 100%; } } /* v7.18 — "API vs Local": Quality-first tier view, workload hint, and the computed "비교 조건" (comparison conditions) summary. */ .api-cost-tier-hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; } .api-cost-usage-summary { justify-content: flex-start; max-width: none; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); } .api-cost-expand-toggle { margin-top: 10px; } .api-cost-expanded { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .api-cost-payback { color: var(--ink); font-size: 14px; } .api-cost-disclaimer { color: var(--muted); font-size: 12px; } .si-api-cost-dimensions td.is-favorable { font-weight: 700; color: var(--blue); } /* v7.23 — "API vs Local" conclusion-first redesign: a verdict banner leads the panel, the default 3-model view is comparison cards instead of a table, the workload/tier selectors are restructured so "사용 목적" reads as the primary input and "등급 변경" as a secondary override, and a small inline SVG chart visualizes the API-vs-Local break-even point. */ .api-cost-purpose-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .api-cost-purpose-field { width: 100%; } .api-cost-tier-hint-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .api-cost-tier-hint-row .api-cost-tier-hint { margin: 0; flex: 1 1 240px; } .api-cost-tier-inline { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; width: auto; } .api-cost-tier-inline span { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; } .api-cost-tier-inline select { min-height: 30px; padding: 2px 6px; font-size: 12px; } .api-cost-verdict { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--blue-soft); } .api-cost-verdict-headline { margin: 0; color: var(--blue); font-size: 17px; font-weight: 800; } .api-cost-verdict-usage { margin: 4px 0 0; color: var(--muted); font-size: 12px; } .api-cost-verdict-figures { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; } .api-cost-verdict-figures span { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); font-weight: 700; } .api-cost-verdict-figures strong { font-size: 16px; color: var(--ink); } .api-cost-verdict-diff strong { color: var(--blue); } .api-cost-verdict-breakeven { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; } .api-cost-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 4px; } .api-cost-candidate-card { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); font-family: inherit; text-align: left; cursor: pointer; } .api-cost-candidate-card:hover { border-color: var(--blue); } .api-cost-candidate-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .api-cost-candidate-card.is-cheapest { border-color: var(--green, #1a9c5c); } .api-cost-candidate-card.is-selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); } .api-cost-candidate-provider { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .api-cost-candidate-cost { display: flex; flex-direction: column; gap: 2px; font-size: 20px; color: var(--ink); } .api-cost-candidate-cost small { font-size: 11px; font-weight: 700; color: var(--muted); } .api-cost-candidate-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 700; } .api-cost-candidate-rates { color: var(--muted); font-size: 11px; } .api-cost-empty { color: var(--muted); font-size: 13px; } .api-cost-breakeven { margin-top: 16px; } .api-cost-breakeven h3 { margin: 0 0 8px; font-size: 14px; } .api-cost-chart { width: 100%; height: auto; max-width: 640px; } .api-cost-chart-local-line { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 3; } .api-cost-chart-api-line { stroke: var(--blue); stroke-width: 2.5; } .api-cost-chart-breakeven-line { stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 3 3; } .api-cost-chart-breakeven-label, .api-cost-chart-current-label, .api-cost-chart-local-label { fill: var(--muted); font-size: 10px; font-weight: 700; } .api-cost-chart-current-dot { fill: var(--blue); } .api-cost-chart-tick { fill: var(--muted); font-size: 10px; } .api-cost-chart-caption { margin: 6px 0 0; color: var(--muted); font-size: 11px; } /* v7.25 -- affiliate "구매하기" CTA on GPU recommendation cards and the purchase hub. A distinct outline color (not a filled/loud button) marks this as an external commerce link without competing visually with the primary in-app actions ("이 GPU 선택" etc.) sitting right next to it. */ .gpu-buy-link { display: inline-flex; align-items: center; gap: 4px; border-color: var(--green, #1a9c5c); color: var(--green, #1a9c5c); text-decoration: none; } .gpu-buy-link:hover { background: var(--green-soft, #e2f0ea); } /* v7.25 -- Cloud rental section (API vs Local vs Cloud), parallel styling to .api-cost-local / .api-cost-candidate-card above. */ .api-cost-cloud { min-width: 0; margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface-soft); } .api-cost-cloud h3 { margin: 6px 0 8px; } .api-cost-cloud-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; } .api-cost-cloud-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-raised); } .api-cost-cloud-card.is-cheapest { border-color: var(--green, #1a9c5c); } .api-cost-cloud-card.is-unavailable { opacity: 0.6; } .api-cost-cloud-kind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 11px; font-weight: 700; } .api-cost-cloud-note { margin: 0; color: var(--muted); font-size: 11px; } .api-cost-chart-cloud-line { stroke: var(--green, #1a9c5c); stroke-width: 2; stroke-dasharray: 6 3; } .api-cost-chart-cloud-label { fill: var(--green, #1a9c5c); font-size: 10px; font-weight: 700; }