Spaces:
Sleeping
Sleeping
| :root { | |
| color-scheme: dark; | |
| --bg: #101214; | |
| --surface: #171a1d; | |
| --surface-2: #20252a; | |
| --line: #30363d; | |
| --text: #f4f6f8; | |
| --muted: #a8b0b8; | |
| --soft: #d6dce2; | |
| --blue: #2f80ed; | |
| --blue-2: #1d65c1; | |
| --lime: #eaff2f; | |
| --danger: #ff5c5c; | |
| --shadow: 0 18px 45px rgba(0, 0, 0, 0.28); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| min-height: 100vh; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: | |
| Pretendard, | |
| "Segoe UI", | |
| system-ui, | |
| -apple-system, | |
| BlinkMacSystemFont, | |
| sans-serif; | |
| letter-spacing: 0; | |
| } | |
| button, | |
| select, | |
| textarea, | |
| input { | |
| font: inherit; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| .app-shell { | |
| display: grid; | |
| grid-template-columns: 365px minmax(0, 1fr); | |
| align-items: start; | |
| min-height: 100vh; | |
| } | |
| .sidebar { | |
| overflow-y: auto; | |
| max-height: 100vh; | |
| padding: 16px; | |
| border-right: 1px solid var(--line); | |
| background: #0c0e10; | |
| } | |
| .panel, | |
| .topbar, | |
| .status-strip article, | |
| .model-bank, | |
| .results { | |
| border: 1px solid var(--line); | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| } | |
| .section-heading span, | |
| .status-strip span, | |
| .status-strip em, | |
| .dropzone em { | |
| display: block; | |
| } | |
| .section-heading span, | |
| .status-strip span, | |
| .status-strip em, | |
| .dropzone em { | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .shoot-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 28px; | |
| } | |
| .shoot-header h1 { | |
| margin: 0; | |
| font-size: 24px; | |
| } | |
| .shoot-header div { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .text-button { | |
| border: 0; | |
| background: transparent; | |
| color: #7d8da2; | |
| font-size: 12px; | |
| } | |
| .tiny { | |
| min-height: 28px; | |
| padding: 0 10px; | |
| font-size: 12px; | |
| } | |
| .left-section { | |
| margin-bottom: 28px; | |
| } | |
| .left-section h2 { | |
| margin: 0 0 14px; | |
| color: #fff; | |
| font-size: 18px; | |
| line-height: 1.2; | |
| } | |
| .left-section h2 span { | |
| color: #627084; | |
| font-size: 12px; | |
| } | |
| .model-face-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .face-upload, | |
| .face-preset { | |
| position: relative; | |
| display: grid; | |
| place-items: center; | |
| width: 58px; | |
| height: 58px; | |
| overflow: hidden; | |
| border-radius: 50%; | |
| } | |
| .face-upload { | |
| border: 1px dashed #344257; | |
| background: #15171a; | |
| color: #8da0b8; | |
| } | |
| .face-upload input { | |
| display: none; | |
| } | |
| .face-upload span { | |
| font-size: 18px; | |
| } | |
| .face-upload em { | |
| font-style: normal; | |
| font-size: 10px; | |
| } | |
| .face-preset { | |
| border: 2px solid var(--blue); | |
| padding: 2px; | |
| background: #fff; | |
| } | |
| .face-preset img, | |
| .face-upload img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .model-spec { | |
| padding: 12px; | |
| border: 1px solid #283447; | |
| border-radius: 8px; | |
| background: #15171a; | |
| } | |
| .model-spec-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| } | |
| .model-spec-head strong { | |
| color: #fff; | |
| font-size: 13px; | |
| } | |
| .model-spec-head span { | |
| color: #7d8da2; | |
| font-size: 11px; | |
| } | |
| .model-spec dl { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 8px 16px; | |
| margin: 0; | |
| } | |
| .model-spec div { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .model-spec dt { | |
| color: #8291a4; | |
| font-size: 12px; | |
| } | |
| .model-spec dd { | |
| margin: 0; | |
| color: #fff; | |
| font-size: 12px; | |
| font-weight: 800; | |
| } | |
| .visually-hidden { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| } | |
| .panel { | |
| margin-bottom: 12px; | |
| padding: 12px; | |
| border-radius: 8px; | |
| } | |
| .login-panel { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 8px; | |
| } | |
| .panel-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 10px; | |
| color: var(--lime); | |
| font-size: 15px; | |
| font-weight: 800; | |
| } | |
| .compact-title { | |
| margin-top: 14px; | |
| } | |
| .panel-title span { | |
| display: grid; | |
| place-items: center; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: rgba(234, 255, 47, 0.12); | |
| color: var(--lime); | |
| font-size: 11px; | |
| } | |
| .dropzone { | |
| display: grid; | |
| place-items: center; | |
| min-height: 132px; | |
| padding: 16px; | |
| border: 1px dashed #53606b; | |
| border-radius: 8px; | |
| background: #111519; | |
| text-align: center; | |
| } | |
| .dropzone input { | |
| display: none; | |
| } | |
| .face-dropzone { | |
| min-height: 112px; | |
| } | |
| .drop-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 34px; | |
| height: 34px; | |
| margin-bottom: 8px; | |
| border-radius: 50%; | |
| background: var(--surface-2); | |
| color: var(--lime); | |
| font-size: 22px; | |
| } | |
| .upload-grid, | |
| .shot-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .product-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 14px; | |
| } | |
| .product-pair { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 8px 10px; | |
| } | |
| .product-pair h3 { | |
| grid-column: 1 / -1; | |
| margin: 0; | |
| color: #9db1ca; | |
| font-size: 12px; | |
| } | |
| .upload-tile, | |
| .face-chip, | |
| .segmented button, | |
| .ghost-button, | |
| .primary-button, | |
| .generate-button, | |
| .card-toolbar button { | |
| min-height: 36px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: var(--surface-2); | |
| color: var(--soft); | |
| } | |
| .shot-grid button { | |
| min-height: 30px; | |
| border: 0; | |
| border-radius: 7px; | |
| background: #2b2b2d; | |
| color: #c2cfdd; | |
| padding: 0 14px; | |
| font-size: 12px; | |
| font-weight: 800; | |
| } | |
| .product-slot { | |
| position: relative; | |
| display: grid; | |
| place-items: center; | |
| align-content: center; | |
| min-height: 96px; | |
| overflow: hidden; | |
| padding: 10px 6px; | |
| padding-bottom: 22px; | |
| border: 1px solid #263447; | |
| border-radius: 8px; | |
| background: #202020; | |
| color: #8da0b8; | |
| text-align: center; | |
| } | |
| .product-slot input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .product-slot img { | |
| position: absolute; | |
| inset: 4px; | |
| z-index: 1; | |
| width: calc(100% - 8px); | |
| height: calc(100% - 8px); | |
| object-fit: contain; | |
| } | |
| .product-slot.has-image { | |
| border-color: var(--blue); | |
| background: #f7f8fa; | |
| } | |
| .product-slot.has-image::after { | |
| display: none; | |
| } | |
| .product-slot.has-image .upload-icon { | |
| display: none; | |
| } | |
| .product-slot.has-image em { | |
| z-index: 2; | |
| color: #5c718a; | |
| text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85); | |
| } | |
| .product-slot em, | |
| .upload-icon { | |
| position: relative; | |
| z-index: 1; | |
| font-style: normal; | |
| } | |
| .product-slot em { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 4px; | |
| color: #8da0b8; | |
| font-size: 10px; | |
| line-height: 1.1; | |
| } | |
| .upload-icon { | |
| color: #64758b; | |
| font-size: 20px; | |
| } | |
| .upload-tile.active, | |
| .face-chip.active, | |
| .segmented button.active { | |
| border-color: var(--blue); | |
| background: rgba(47, 128, 237, 0.18); | |
| color: #fff; | |
| } | |
| .shot-grid button.active { | |
| background: var(--blue); | |
| color: #fff; | |
| box-shadow: 0 0 18px rgba(47, 128, 237, 0.35); | |
| } | |
| .shot-grid button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.62; | |
| } | |
| .pose-reference-block { | |
| margin-top: 18px; | |
| } | |
| .pose-reference-head { | |
| display: grid; | |
| gap: 6px; | |
| margin-bottom: 12px; | |
| color: var(--muted); | |
| font-size: 11px; | |
| line-height: 1.45; | |
| } | |
| .pose-reference-head strong { | |
| color: #74849a; | |
| font-size: 12px; | |
| font-weight: 800; | |
| } | |
| .pose-reference-section { | |
| display: grid; | |
| gap: 8px; | |
| margin-bottom: 14px; | |
| } | |
| .pose-reference-section h3 { | |
| margin: 0; | |
| color: #8fa0b3; | |
| font-size: 11px; | |
| font-weight: 800; | |
| } | |
| .pose-reference-row { | |
| display: grid; | |
| grid-auto-flow: column; | |
| grid-auto-columns: 68px; | |
| gap: 8px; | |
| overflow-x: auto; | |
| padding-bottom: 4px; | |
| scrollbar-width: thin; | |
| } | |
| .pose-reference-card { | |
| display: grid; | |
| gap: 4px; | |
| padding: 0; | |
| border: 1px solid #293441; | |
| border-radius: 8px; | |
| background: #202020; | |
| color: #99aabe; | |
| overflow: hidden; | |
| } | |
| .pose-reference-card:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.44; | |
| } | |
| .pose-reference-card.active { | |
| border-color: var(--blue); | |
| box-shadow: 0 0 0 1px var(--blue), 0 0 18px rgba(47, 128, 237, 0.32); | |
| color: #fff; | |
| } | |
| .pose-thumb { | |
| position: relative; | |
| display: block; | |
| width: 100%; | |
| aspect-ratio: 4 / 5; | |
| background: linear-gradient(135deg, #34383e, #191c20); | |
| } | |
| .pose-thumb::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 14px 22px; | |
| border-radius: 999px 999px 10px 10px; | |
| background: rgba(255, 255, 255, 0.12); | |
| } | |
| .pose-thumb img { | |
| position: relative; | |
| z-index: 1; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .pose-reference-card em { | |
| overflow: hidden; | |
| padding: 0 4px 6px; | |
| font-size: 10px; | |
| font-style: normal; | |
| font-weight: 800; | |
| line-height: 1.1; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .pose-upload-card { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 92px; | |
| min-height: 70px; | |
| margin-top: 2px; | |
| border: 1px dashed #283646; | |
| border-radius: 8px; | |
| background: #111519; | |
| color: #64758b; | |
| font-size: 11px; | |
| font-weight: 800; | |
| } | |
| .pose-upload-card input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .pose-upload-card span { | |
| font-size: 18px; | |
| line-height: 1; | |
| } | |
| .batch-shot-button { | |
| width: 100%; | |
| min-height: 38px; | |
| margin-top: 10px; | |
| border: 1px solid #303944; | |
| border-radius: 8px; | |
| background: #1a1d20; | |
| color: #8fa0b3; | |
| font-size: 12px; | |
| font-weight: 800; | |
| } | |
| .batch-shot-button:not(:disabled) { | |
| border-color: var(--blue); | |
| background: rgba(47, 128, 237, 0.16); | |
| color: #fff; | |
| box-shadow: 0 0 18px rgba(47, 128, 237, 0.2); | |
| } | |
| .batch-shot-button:disabled { | |
| cursor: not-allowed; | |
| } | |
| .batch-shot-button { | |
| width: 100%; | |
| min-height: 38px; | |
| margin-top: 10px; | |
| border: 1px solid var(--blue); | |
| border-radius: 8px; | |
| background: rgba(47, 128, 237, 0.16); | |
| color: #fff; | |
| font-weight: 800; | |
| } | |
| .batch-shot-button:disabled { | |
| cursor: not-allowed; | |
| border-color: var(--line); | |
| background: #22262b; | |
| color: #788697; | |
| } | |
| .flow-note { | |
| margin-top: 8px; | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #111519; | |
| color: var(--muted); | |
| font-size: 12px; | |
| line-height: 1.45; | |
| } | |
| .flow-note strong { | |
| display: block; | |
| margin-bottom: 3px; | |
| color: var(--lime); | |
| } | |
| .segmented { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); | |
| gap: 6px; | |
| } | |
| .product-tabs, | |
| .tag-group { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .product-tabs { | |
| margin-bottom: 18px; | |
| } | |
| .product-tabs button, | |
| .tag-group button { | |
| min-height: 30px; | |
| border: 0; | |
| border-radius: 7px; | |
| background: #2b2b2d; | |
| color: #c2cfdd; | |
| padding: 0 14px; | |
| font-size: 12px; | |
| font-weight: 800; | |
| } | |
| .product-tabs button.active, | |
| .tag-group button.active { | |
| background: var(--blue); | |
| color: #fff; | |
| box-shadow: 0 0 18px rgba(47, 128, 237, 0.35); | |
| } | |
| .option-row { | |
| display: grid; | |
| grid-template-columns: 64px minmax(0, 1fr); | |
| align-items: start; | |
| gap: 10px; | |
| margin-top: 14px; | |
| } | |
| .option-row > span { | |
| padding-top: 6px; | |
| color: #8da0b8; | |
| font-size: 13px; | |
| } | |
| .shot-primary { | |
| margin-bottom: 10px; | |
| } | |
| .resolution { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .model-row { | |
| margin-top: 18px; | |
| } | |
| .generation-controls { | |
| display: grid; | |
| gap: 14px; | |
| margin-top: 18px; | |
| padding-bottom: 28px; | |
| } | |
| .generation-controls .resolution { | |
| margin-bottom: 0; | |
| } | |
| .control-row { | |
| display: grid; | |
| grid-template-columns: 92px minmax(0, 1fr); | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .control-row label { | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .length-summary { | |
| margin-top: 10px; | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #111519; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .length-summary strong { | |
| margin-left: 6px; | |
| color: var(--text); | |
| } | |
| .length-summary span { | |
| display: block; | |
| margin-top: 4px; | |
| font-size: 12px; | |
| } | |
| select, | |
| textarea { | |
| width: 100%; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #111519; | |
| color: var(--text); | |
| } | |
| select { | |
| min-height: 38px; | |
| padding: 0 10px; | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| padding: 10px; | |
| line-height: 1.5; | |
| } | |
| #prompt { | |
| min-height: 108px; | |
| border-color: #2f3b4c; | |
| background: #15181c; | |
| color: var(--text); | |
| outline: none; | |
| } | |
| #prompt:focus { | |
| border-color: #3d7fdc; | |
| box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.18); | |
| } | |
| #prompt::placeholder { | |
| color: #7f8b9a; | |
| } | |
| .checkline { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 12px 0; | |
| color: var(--soft); | |
| font-size: 14px; | |
| } | |
| .prompt-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| margin-top: 18px; | |
| color: #d5e3f4; | |
| font-size: 13px; | |
| font-weight: 800; | |
| } | |
| .primary-button, | |
| .generate-button { | |
| border-color: var(--blue); | |
| background: var(--blue); | |
| color: #fff; | |
| font-weight: 800; | |
| } | |
| .ghost-button { | |
| padding: 0 12px; | |
| } | |
| .generate-button { | |
| width: 100%; | |
| min-height: 46px; | |
| } | |
| .workspace { | |
| overflow: visible; | |
| max-height: none; | |
| min-height: 0; | |
| padding: 26px 34px 34px; | |
| background: #181918; | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| padding: 18px; | |
| border-radius: 8px; | |
| } | |
| .topbar p, | |
| .topbar h1, | |
| .section-heading h2 { | |
| margin: 0; | |
| } | |
| .topbar p { | |
| color: var(--lime); | |
| font-weight: 800; | |
| } | |
| .topbar h1 { | |
| max-width: none; | |
| margin-top: 6px; | |
| font-size: 28px; | |
| line-height: 1.12; | |
| white-space: nowrap; | |
| } | |
| .top-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| white-space: nowrap; | |
| } | |
| .download-menu { | |
| position: relative; | |
| } | |
| .download-options { | |
| position: absolute; | |
| top: calc(100% + 8px); | |
| right: 0; | |
| z-index: 20; | |
| display: none; | |
| min-width: 150px; | |
| padding: 8px; | |
| border: 1px solid #344055; | |
| border-radius: 8px; | |
| background: #15181c; | |
| box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35); | |
| } | |
| .download-menu.open .download-options { | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .download-options button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| min-height: 38px; | |
| border: 0; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--text); | |
| padding: 0 8px; | |
| text-align: left; | |
| } | |
| .download-options button:hover { | |
| background: #20252a; | |
| } | |
| .download-options strong { | |
| font-size: 12px; | |
| } | |
| .download-options span { | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .status-strip { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin: 14px 0; | |
| } | |
| .status-strip article { | |
| padding: 14px; | |
| border-radius: 8px; | |
| } | |
| .status-strip strong { | |
| display: block; | |
| margin: 6px 0; | |
| font-size: 18px; | |
| } | |
| .model-bank, | |
| .results { | |
| margin-bottom: 14px; | |
| padding: 16px; | |
| border-radius: 8px; | |
| } | |
| .results { | |
| margin-bottom: 0; | |
| } | |
| .section-heading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 14px; | |
| } | |
| .section-heading h2 { | |
| margin-top: 3px; | |
| font-size: 20px; | |
| } | |
| .compact { | |
| min-height: 34px; | |
| } | |
| .face-list { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(120px, 1fr)); | |
| gap: 10px; | |
| } | |
| .face-chip { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| min-height: 58px; | |
| } | |
| .face-chip span { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: | |
| radial-gradient(circle at 50% 44%, #f2d8c5 0 56%, transparent 57%), | |
| linear-gradient(#1e2023, #1e2023); | |
| } | |
| .result-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 14px; | |
| } | |
| .result-card { | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #16191d; | |
| } | |
| .result-card.selected { | |
| outline: 3px solid var(--blue); | |
| outline-offset: 0; | |
| } | |
| .result-card.download-selected { | |
| border-color: #82c7a5; | |
| box-shadow: inset 0 0 0 2px rgba(130, 199, 165, 0.55); | |
| } | |
| .select-download-button[aria-pressed="true"] { | |
| border-color: var(--blue); | |
| background: var(--blue); | |
| color: #fff; | |
| } | |
| .image-stage { | |
| position: relative; | |
| display: grid; | |
| place-items: center; | |
| aspect-ratio: 2 / 3; | |
| min-height: 260px; | |
| background: | |
| linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px), | |
| linear-gradient(#f6f3ef, #ebe7df); | |
| background-size: 36px 36px, auto; | |
| } | |
| .generated-image { | |
| display: block; | |
| width: 100%; | |
| aspect-ratio: 2 / 3; | |
| object-fit: contain; | |
| background: #f4f1ed; | |
| cursor: zoom-in; | |
| } | |
| .error-card { | |
| border-color: rgba(255, 92, 92, 0.55); | |
| background: #181214; | |
| } | |
| .error-body { | |
| display: grid; | |
| gap: 8px; | |
| min-height: 220px; | |
| padding: 18px; | |
| color: var(--soft); | |
| } | |
| .error-body strong { | |
| color: #ff9a9a; | |
| font-size: 18px; | |
| } | |
| .error-body span { | |
| line-height: 1.45; | |
| word-break: break-word; | |
| } | |
| .error-body em { | |
| color: var(--muted); | |
| font-style: normal; | |
| font-size: 12px; | |
| } | |
| .image-stage::after { | |
| content: "AI"; | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| display: grid; | |
| place-items: center; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: rgba(16, 18, 20, 0.72); | |
| color: #fff; | |
| font-size: 11px; | |
| font-weight: 800; | |
| } | |
| .image-stage.queue::before { | |
| content: ""; | |
| width: 42px; | |
| height: 42px; | |
| border: 4px solid rgba(47, 128, 237, 0.24); | |
| border-top-color: var(--blue); | |
| border-radius: 50%; | |
| background: transparent; | |
| animation: spin 900ms linear infinite; | |
| } | |
| .image-stage.queue { | |
| background: #f4f1ed; | |
| } | |
| /* 대기(큐) 상태 카드: 스피너 멈추고 흐리게 표시해 '생성 중'과 구분 */ | |
| .result-card.queued { | |
| opacity: 0.55; | |
| } | |
| .result-card.queued .image-stage.queue::before { | |
| animation: none; | |
| border-top-color: rgba(47, 128, 237, 0.24); | |
| } | |
| .empty-state { | |
| display: grid; | |
| place-items: center; | |
| align-content: center; | |
| min-height: 320px; | |
| padding: 28px; | |
| border: 1px dashed #3c4652; | |
| border-radius: 8px; | |
| background: #14171a; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .empty-state strong { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text); | |
| font-size: 18px; | |
| } | |
| .empty-state span { | |
| max-width: 360px; | |
| line-height: 1.5; | |
| } | |
| .card-toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| padding: 8px; | |
| background: #16191d; | |
| } | |
| .card-toolbar span { | |
| min-width: 0; | |
| color: var(--text); | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .card-toolbar button { | |
| min-height: 30px; | |
| padding: 0 9px; | |
| color: #fff; | |
| font-size: 12px; | |
| } | |
| .image-modal { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 100; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0; | |
| } | |
| .image-modal.open { | |
| display: flex; | |
| } | |
| .image-modal-backdrop { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.86); | |
| } | |
| .image-modal-content { | |
| position: relative; | |
| z-index: 1; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 360px; | |
| width: 100vw; | |
| height: 100vh; | |
| background: transparent; | |
| } | |
| .image-preview-pane { | |
| display: grid; | |
| align-content: center; | |
| justify-items: center; | |
| gap: 12px; | |
| min-width: 0; | |
| padding: 40px; | |
| overflow: auto; | |
| } | |
| .image-preview-pane > img { | |
| display: block; | |
| max-width: 100%; | |
| max-height: calc(100vh - 120px); | |
| object-fit: contain; | |
| border-radius: 8px; | |
| background: #f4f1ed; | |
| box-shadow: 0 20px 70px rgba(0, 0, 0, 0.46); | |
| } | |
| .image-preview-pane > strong { | |
| color: var(--text); | |
| font-size: 14px; | |
| } | |
| .image-modal-close { | |
| justify-self: end; | |
| min-height: 32px; | |
| border: 1px solid var(--line); | |
| border-radius: 7px; | |
| background: var(--surface-2); | |
| color: var(--soft); | |
| padding: 0 12px; | |
| } | |
| .edit-panel { | |
| display: grid; | |
| align-content: start; | |
| gap: 12px; | |
| height: 100vh; | |
| overflow-y: auto; | |
| padding: 20px; | |
| border-left: 1px solid #2b3340; | |
| background: #151719; | |
| box-shadow: -18px 0 48px rgba(0, 0, 0, 0.28); | |
| } | |
| .edit-panel-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .edit-panel-head strong { | |
| font-size: 20px; | |
| } | |
| .edit-panel-head .image-modal-close { | |
| border: 0; | |
| background: transparent; | |
| font-size: 24px; | |
| } | |
| .edit-help { | |
| margin: -4px 0 8px; | |
| color: #8fa0b3; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| } | |
| .edit-panel h3 { | |
| margin: 12px 0 0; | |
| color: #e9f0f7; | |
| font-size: 13px; | |
| } | |
| .edit-upload { | |
| display: grid; | |
| place-items: center; | |
| width: 100%; | |
| height: 92px; | |
| border: 1px dashed #3c4652; | |
| border-radius: 8px; | |
| background: #111417; | |
| color: #9aabbf; | |
| font-size: 12px; | |
| text-align: center; | |
| } | |
| .edit-upload input { | |
| display: none; | |
| } | |
| .edit-upload span { | |
| display: block; | |
| font-size: 22px; | |
| } | |
| .edit-reference-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .edit-reference-list img { | |
| width: 54px; | |
| height: 54px; | |
| border-radius: 6px; | |
| object-fit: cover; | |
| } | |
| .edit-backgrounds { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 8px; | |
| } | |
| .edit-backgrounds button, | |
| .edit-action { | |
| min-height: 42px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #222426; | |
| color: var(--soft); | |
| font-weight: 800; | |
| } | |
| .edit-backgrounds button { | |
| font-size: 12px; | |
| } | |
| .edit-backgrounds button.active { | |
| border-color: var(--blue); | |
| background: rgba(47, 128, 237, 0.18); | |
| color: #fff; | |
| } | |
| #editInstruction { | |
| min-height: 116px; | |
| border-color: #2f3b4c; | |
| background: #101316; | |
| } | |
| .edit-action.primary { | |
| border-color: var(--blue); | |
| background: #1d4f96; | |
| color: #fff; | |
| } | |
| .edit-save-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| padding-top: 14px; | |
| border-top: 1px solid var(--line); | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @media (max-width: 1040px) { | |
| .app-shell { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar, | |
| .workspace { | |
| max-height: none; | |
| } | |
| .sidebar { | |
| border-right: 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .topbar, | |
| .section-heading { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| } | |
| .topbar h1 { | |
| white-space: normal; | |
| } | |
| .top-actions { | |
| flex-wrap: wrap; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .sidebar, | |
| .workspace { | |
| padding: 10px; | |
| } | |
| .status-strip, | |
| .face-list { | |
| grid-template-columns: 1fr; | |
| } | |
| .login-panel, | |
| .segmented { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .result-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .image-modal-content { | |
| grid-template-columns: 1fr; | |
| overflow-y: auto; | |
| } | |
| .image-preview-pane { | |
| padding: 18px; | |
| } | |
| .edit-panel { | |
| height: auto; | |
| border-left: 0; | |
| border-top: 1px solid #2b3340; | |
| } | |
| } | |