/* ============================================================ HEART AI BytePlus Studio — design system A deliberately "designed" editorial look: warm off-black/off-white tones (never pure #000/#FFF), a serif display face paired with a clean sans for UI, hairline rules instead of glow/gradient chrome. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ Z-INDEX 레이어 테이블 (2026-07-30 전면 정리) ------------------------------------------------------------ 이전에는 층위 기준이 없어서 값이 서로 충돌했다. 대표적으로 .sim3d-tut-modal-back / .comfy-modal-overlay / .comfy-jobs-drawer 가 모두 1200 으로 동일했고, 결과 상세 라이트박스(1000)가 작업 드로어(1200)와 생성 오버레이(1100) 뒤로 숨는 버그가 있었다. 아래 밴드로 재배치했다. 같은 밴드 안에서는 10 단위로 띄워 동일값(타이)을 만들지 않는다. 밴드 범위 용도 ───────────────────────────────────────────────────────── 콘텐츠 0 ~ 99 문서 흐름 안의 겹침(배지, ::before, 스티키 헤더 등) 드로어 1000~1099 측면 도킹 패널과 그 백드롭/핸들 플로팅 1100~1199 셸 내비 + 떠 있는 액션/배너 (드로어보다 위 — 드로어를 열어둔 채로도 이동·조작 가능해야 함) 모달 2000~2999 전면 오버레이(폼·편집기·게이트) 상세 라이트박스 3000~3199 이미지/결과 상세 및 확대 뷰어 (모달보다 위) 다이얼로그 4000~4099 확인/입력 대체 창 (모달·라이트박스 어디서 띄워도 위) 팝오버·드래그 5000~5399 앵커드 메뉴/팝오버, 드래그 고스트·마퀴 토스트·전역배너 6000~6999 공지 배너와 토스트 (항상 최상단) 현재 배정값 1000 .comfy-jobs-drawer-backdrop 1010 .comfy-jobs-drawer 1020 .comfy-jobs-handle 1100 .mobile-tabbar 1110 .comfy-gen-min-dock 1120 .assistant-fab 1130 .assistant-panel 1140 .music-join-banner 2000 .comfy-gen-overlay 2100 .gal-modal-overlay 2150 .feedpage-detail(모바일 상세) 2200 .mask-editor-overlay 2300 .comfy-maske-overlay 2400 .sim3d-tut-modal-back 2500 .cmdk-overlay 2600 .music-url-pop-overlay 2900 .auth-overlay(로그인 게이트 — 모달 밴드 최상단) 3000 .lightbox-overlay 3020 .comfy-lightbox-overlay 3030 .comfy-ov-jobnav 3100 .comfy-inputzoom-overlay 4000 .comfy-modal-overlay 5000 .gal-marquee 5010 .gal-drag-ghost 5100 .mmp-queue-pop 5200 .gt-jobmenu 5210 .notif-panel 5300 .comfy-img-ctxmenu 6000 .announce-banner 6500 .copy-toast 6600 .toast-stack 서브앱(public/apps 하위) CSS는 별도 문서/스택 컨텍스트라 이 표의 대상이 아니다. ============================================================ */ :root{ --radius: 14px; --radius-sm: 9px; /* Display face — swapped from a warm serif (Fraunces) to a tight, bold geometric grotesk after checking Higgsfield's real, live site (checked 2026-07-02): their headings/titles use Space Grotesk, font-weight 700, uppercase, letter-spacing around -4%, on a near-black/near-white base — not a serif-editorial look at all. Falls back to the UI sans for any Korean text (Space Grotesk has no Hangul glyphs), which is standard multi-script behavior. */ --display: 'Space Grotesk', 'Inter', 'Pretendard', sans-serif; --serif: var(--display); /* legacy alias, existing rules still reference --serif */ --sans: 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size:18px; } /* ---------------- Night (default) ---------------- Matched directly against the Higgsfield reference screenshots the user supplied (checked 2026-07-02): near-black stage, dark elevated cards, a single bright chartreuse/neon-lime accent used for the primary CTA, selected chips, and active nav — everything else stays neutral gray so the lime reads as a deliberate accent, not decoration everywhere. */ html[data-theme="night"]{ --bg:#131215; --bg-elev:#19181c; --rail:#0b0a0d; --sidebar:#0e0d10; --surface:#1c1b1f; --surface-2:#232227; --border:#333238; --border-soft:#28272c; --text:#f4f3ef; --text-dim:#a9a8ad; --text-faint:#717077; --accent:#d7fb3d; --accent-soft:rgba(215,251,61,.14); --ink:#7dc8fb; --ink-soft:rgba(125,200,251,.14); --gold:#dcae63; --success:#4ade8a; --warn:#dcae63; --danger:#ff6259; --on-accent:#111008; --shadow: 0 18px 44px -18px rgba(0,0,0,.75); } /* ---------------- Day ---------------- Same accent family (kept on-brand), deepened so it stays legible as text/icon color against a light surface — the bright lime is reserved for filled buttons/chips where the dark on-accent text does the work. */ html[data-theme="day"]{ --bg:#f5f5f1; --bg-elev:#ececE6; --rail:#e9e9e3; --sidebar:#eeeeea; --surface:#ffffff; --surface-2:#f2f2ed; --border:#dcdcd5; --border-soft:#e7e7e1; --text:#19191c; --text-dim:#57565d; --text-faint:#88878e; --accent:#7a9a00; --accent-soft:rgba(122,154,0,.10); --ink:#2566a8; --ink-soft:rgba(37,102,168,.09); --gold:#a5762c; --success:#2f9e5c; --warn:#a5762c; --danger:#c23a3a; --on-accent:#fafaf6; --shadow: 0 18px 44px -22px rgba(20,20,15,.22); } *{box-sizing:border-box;} html,body{height:100%;} /* ---------------- Scrollbars ---------------- Slim, theme-aware scrollbar applied app-wide, replacing the stock OS scrollbar (thick gray thumb + arrow buttons on a white track) that clashed with the dark stage. Firefox uses scrollbar-width/scrollbar-color; WebKit (Chrome/Edge/Safari) uses the ::-webkit-scrollbar pseudo-elements. Every color is a design token, so the day/night toggle recolors the scrollbar automatically — --border/--text-faint already carry their light values in the html[data-theme="day"] block above, which IS the day override. The rounded thumb (border-radius:999px) matches the app's rounded-corner look; the 2px transparent border + padding-box clip keeps the thumb visually slim inside a 10px gutter. More specific rules (e.g. .icon-rail width:0) still win because they come later in the cascade. Thumb is a lime(--accent)-tinted color at rest, going full lime on hover/drag — a plain var(--border) thumb (previous version) read as generic gray, not the brand lime the rest of the shell uses. */ *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--accent) 45%, var(--border)) transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:999px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{background:var(--accent);} ::-webkit-scrollbar-corner{background:transparent;} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow:hidden; transition:background .2s ease, color .2s ease; } a{color:inherit;} ::selection{background:var(--accent-soft);} .eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); } .serif{font-family:var(--serif);} /* ---------- SHELL GRID (icon rail + context panel + main) ---------- Redesign: the top bar spans the full width; beneath it three columns — a compact vertical ICON RAIL holding the top-level module buttons (re-homed from the old top-bar .gt-nav), the SIDEBAR now acting as a per-module CONTEXT PANEL, and the MAIN work area. All nav JS hooks (.module-item[data-module], #modnav-, #sidebarctx-, the #topbar* title elements, #view-) are preserved verbatim — only their position/skin changed. */ /* 상단바 높이 — .app-shell의 grid-template-rows와 값이 항상 같아야 하며, ComfyUI 우측 도킹 패널(.comfy-jobs-drawer, .app-shell 바깥 body 직계 자식이라 .app-shell에 변수를 둬도 상속되지 않는다)도 이 값을 그대로 참조해 상단바를 가리지 않고 그 아래부터 시작한다. :root에 둬서 반응형 분기점마다 함께 갱신되면 두 곳 모두 자동으로 맞는다. */ :root{ --topbar-h:60px; } .app-shell{ display:grid; grid-template-columns:88px 236px 1fr; grid-template-rows:var(--topbar-h) 1fr; grid-template-areas: "topbar topbar topbar" "rail sidebar main"; height:100vh; } /* NAI / 3D 시뮬레이터처럼 컨텍스트 패널이 필요 없는 임베드 모듈에서는 가운데 sidebar(컨텍스트 패널) 열을 폭 0으로 접어, 그 폭을 main(=iframe)이 가져가게 한다. app.js의 updateTopbarTitleVisibility()가 .app-shell에 'ctx-collapsed'를 얹고/뗀다 (기존 content-embed 토글과 같은 지점). */ .app-shell.ctx-collapsed{ grid-template-columns:88px 0 1fr; } .app-shell.ctx-collapsed .sidebar{ padding:0; border-left:none; border-right:none; overflow:hidden; } /* Hidden until the auth check in app.js confirms a logged-in, approved session — prevents a flash of the full app UI before that check resolves. */ body:not(.authed) .app-shell{display:none;} /* ---------- GLOBAL TOP BAR ---------- */ .global-topbar{ grid-area:topbar; background:var(--sidebar); border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:16px; padding:0 22px 0 20px; z-index:20; position:relative; } /* Root cause of the persistent "top-left logo looks off-center" report: .logo (defined further down, for the sidebar/auth-screen decorative logo) sets padding:2px 4px 24px. Since ".logo" and ".gt-logo" are both single- class selectors of equal specificity, whichever is declared LATER in this file wins ties — and .logo comes after .gt-logo in source order, so its asymmetric 2px-top/24px-bottom padding was silently overriding this block's intended padding:0, pushing the topbar logo's visual center ~11px above the nav items next to it (looked "top-aligned" instead of centered). Targeting both classes together (.logo.gt-logo) raises specificity so this rule always wins regardless of source order. */ .logo.gt-logo{padding:0; gap:11px; flex-shrink:0;} .gt-logo .logo-mark{width:36px;height:36px;border-radius:9px;} .gt-logo .logo-mark svg{width:18px;height:18px;} .gt-logo .logo-text{font-size:17px;} .gt-logo .logo-sub{font-size:10px;margin-top:4px;letter-spacing:.14em;} .gt-logo .logo-mark{background:var(--accent); color:var(--on-accent);} /* Vertical hairline between brand and breadcrumb (mockup). */ .gt-brand-div{width:1px; height:26px; background:var(--border-soft); margin:0 4px; flex-shrink:0;} /* ---------- BREADCRUMB (module → view path in the top bar) ---------- Presents the current location as a path. #gtCrumbModule / #gtCrumbView are updated alongside the preserved #topbarTitle/#topbarSub (which still live in the main area's #topbarRow and are still written by switchView). */ .gt-breadcrumb{display:flex; align-items:center; gap:8px; min-width:0; flex-shrink:1;} .gt-crumb-mod{font-size:13px; font-weight:600; color:var(--text-faint); white-space:nowrap;} .gt-crumb-sep{width:15px; height:15px; color:var(--text-faint); opacity:.6; flex-shrink:0;} .gt-crumb-view{ font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:-.2px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 콘텐츠 제작(content) 모듈 전용 상단바 서브탭 — 챗봇 메이커 / 스토리보드 메이커. 역할이 서로 다른 두 서브앱을 사이드바 목록이 아니라 상단바에서 바로 구분할 수 있도록 breadcrumb 옆에 pill 탭 두 개로 배치한다. 표시 여부는 app.js의 updateTopbarTitleVisibility()가 module==='content'일 때만 켠다. */ .gt-subtabs{display:flex; align-items:center; gap:4px; margin-left:4px; flex-shrink:0;} .gt-subtab{ display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--text-faint); background:transparent; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .12s, color .12s; } .gt-subtab svg{width:15px; height:15px; flex-shrink:0;} .gt-subtab:hover{color:var(--text-dim); background:rgba(255,255,255,.04);} .gt-subtab.active{color:var(--accent); background:var(--accent-soft); border-color:transparent;} /* ---------- GLOBAL SEARCH FIELD (Ctrl/⌘+K command palette) ---------- Styled as the mockup's 300px search field: icon + placeholder text + ⌘K chip on a --bg-elev field. It is still a button that opens the command palette (the label acts as the placeholder). */ .gt-search-trigger{ display:flex; align-items:center; gap:9px; flex-shrink:0; width:300px; height:38px; background:var(--bg-elev); border:1px solid var(--border-soft); color:var(--text-faint); border-radius:10px; padding:0 13px; cursor:pointer; font-size:13.5px; text-align:left; transition:border-color .12s, color .12s; } .gt-search-trigger:hover{border-color:var(--border); color:var(--text-dim);} .gt-search-trigger svg{width:15px; height:15px; flex-shrink:0;} .gt-search-label{flex:1; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .gt-search-kbd{ font-family:var(--mono); font-size:10.5px; color:var(--text-faint); border:1px solid var(--border-soft); border-radius:5px; padding:2px 5px; line-height:1; flex-shrink:0; } /* ---------- TOP-BAR ICON BUTTONS (theme toggle, notification bell) ---------- */ .tbtn{ width:38px; height:38px; border-radius:10px; background:var(--bg-elev); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; color:var(--text-dim); cursor:pointer; flex-shrink:0; transition:.12s; } .tbtn:hover{color:var(--text); border-color:var(--border);} .tbtn svg{width:16px; height:16px;} /* ---------- USER CHIP (avatar + two-line name/role, mockup pill) ---------- */ .gt-user .uchip{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:999px; cursor:pointer; transition:border-color .12s; } .gt-user .uchip:hover{border-color:var(--border); background:var(--bg-elev);} .gt-user .uav{ width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; overflow:hidden; } .gt-user .uchip-tx{display:flex; flex-direction:column; line-height:1;} .gt-user .uchip .user-name{font-size:13px; font-weight:700; color:var(--text); line-height:1;} .gt-user .uchip .user-plan{font-size:11px; color:var(--text-faint); line-height:1; margin-top:3px;} /* ---------- 레벨/포인트 배지(게이미피케이션) — 상단 사용자 칩 옆 ---------- */ .uchip-level{ display:flex; align-items:center; gap:7px; padding:5px 9px; border-radius:999px; background:var(--accent-soft); border:1px solid var(--border-soft); cursor:pointer; flex-shrink:0; user-select:none; transition:border-color .15s, background .15s; } .uchip-level:hover{ border-color:var(--accent); } .uchip-level .lvl-badge{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:-.02em; color:var(--accent); white-space:nowrap; } .uchip-level .lvl-bar{ width:52px; height:6px; border-radius:999px; overflow:hidden; background:var(--surface-2); } .uchip-level .lvl-bar-fill{ height:100%; border-radius:999px; background:var(--accent); transition:width .4s ease; } /* 좁은 화면에선 배지만 남기고 미니 바는 숨겨 공간 절약(사용자 칩 축소와 동일 정책) */ @media (max-width: 820px){ .uchip-level .lvl-bar{ display:none; } } /* ---------- 레벨 상세 모달 내부 ---------- */ .lvl-modal-top{ display:flex; align-items:center; gap:14px; margin-bottom:12px; } .lvl-modal-badge{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; color:var(--on-accent); background:var(--accent); padding:8px 14px; border-radius:12px; white-space:nowrap; } .lvl-modal-meta{ display:flex; flex-direction:column; gap:3px; } .lvl-modal-points{ font-size:16px; font-weight:700; color:var(--text); } .lvl-modal-next{ font-size:12.5px; color:var(--text-dim); } .lvl-modal-bar{ width:100%; height:10px; border-radius:999px; overflow:hidden; background:var(--surface-2); margin-bottom:20px; } .lvl-modal-bar-fill{ height:100%; border-radius:999px; background:var(--accent); transition:width .4s ease; } .lvl-modal-section-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); margin:14px 0 8px; } .lvl-modal-table{ display:flex; flex-direction:column; gap:1px; border-radius:9px; overflow:hidden; } .lvl-modal-table .lvl-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 11px; background:var(--bg-elev); font-size:13px; } .lvl-modal-table .lvl-row .lvl-row-label{ color:var(--text-dim); } .lvl-modal-table .lvl-row .lvl-row-pts{ color:var(--accent); font-weight:700; font-family:var(--display); } .lvl-modal-history{ display:flex; flex-direction:column; gap:1px; border-radius:9px; overflow:hidden; max-height:220px; overflow-y:auto; } .lvl-modal-history .lvl-hrow{ display:flex; align-items:center; justify-content:space-between; padding:7px 11px; background:var(--bg-elev); font-size:12.5px; } .lvl-modal-history .lvl-hrow .lvl-h-label{ color:var(--text-dim); } .lvl-modal-history .lvl-hrow .lvl-h-time{ color:var(--text-faint); font-size:11px; margin-left:auto; margin-right:10px; } .lvl-modal-history .lvl-hrow .lvl-h-pts{ color:var(--success); font-weight:700; } .lvl-modal-history .lvl-h-empty{ padding:14px 11px; text-align:center; color:var(--text-faint); font-size:12.5px; background:var(--bg-elev); border-radius:9px; } /* ---------- COMMAND PALETTE OVERLAY (Ctrl/⌘+K) ---------- */ .cmdk-overlay{ display:none; position:fixed; inset:0; z-index:2500; /* 모달 밴드 */ background:color-mix(in srgb, var(--bg) 30%, black 55%); align-items:flex-start; justify-content:center; padding-top:14vh; } .cmdk-overlay.open{display:flex;} .cmdk-panel{ width:min(560px, 92vw); background:var(--bg-elev); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; max-height:64vh; } .cmdk-input-row{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-soft);} .cmdk-input-row svg{width:18px; height:18px; color:var(--text-faint); flex-shrink:0;} .cmdk-input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-family:var(--sans); font-size:16px; } .cmdk-input::placeholder{color:var(--text-faint);} .cmdk-list{overflow-y:auto; padding:6px;} .cmdk-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; cursor:pointer; color:var(--text-dim); font-size:14px; } .cmdk-item:hover, .cmdk-item.active{background:var(--surface); color:var(--text);} .cmdk-item svg{width:16px; height:16px; flex-shrink:0; opacity:.85;} .cmdk-item-sub{margin-left:auto; font-size:11.5px; color:var(--text-faint);} .cmdk-empty{padding:22px 16px; text-align:center; color:var(--text-faint); font-size:13.5px;} /* ---------- 🎵 easter-egg: 미니 음악 플레이어 (검색창 왼쪽) ---------- */ /* 큐에 곡이 있을 때만 노출. 기존 상단바 토큰(--bg-elev/--border-soft/--accent)을 그대로 재사용해 검색 트리거·테마 버튼과 톤을 맞춘다. */ .mini-music-player{ display:none; } .mini-music-player:not([hidden]){ display:flex; align-items:center; gap:3px; flex-shrink:0; height:34px; padding:0 5px; border-radius:999px; background:var(--bg-elev); border:1px solid var(--border-soft); } .mmp-btn{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:none; border-radius:50%; background:none; color:var(--text-dim); cursor:pointer; transition:.12s; flex-shrink:0; } .mmp-btn:hover{ color:var(--text); background:rgba(255,255,255,.06); } .mmp-btn svg{ width:15px; height:15px; } .mmp-play{ color:var(--accent); } /* 진행자가 아닐 때 재생 제어 버튼: 흐리게 + 잠금 커서(눌러도 안내 토스트만). */ .mmp-btn.mmp-locked{ opacity:.4; cursor:not-allowed; } .mmp-btn.mmp-locked:hover{ background:none; color:var(--text-dim); } .mmp-play.mmp-locked{ color:color-mix(in srgb, var(--accent) 45%, transparent); } .mmp-range{ width:64px; height:3px; accent-color:var(--accent); background:transparent; cursor:pointer; flex-shrink:0; } /* ---------- 🎵 음악 같이 듣기: "참여하기" 배너(우하단, 커스텀) ---------- */ .music-join-banner{ position:fixed; right:18px; bottom:18px; z-index:1140; /* 플로팅 밴드 */ display:flex; align-items:center; gap:10px; max-width:min(360px, 92vw); padding:11px 12px 11px 14px; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); animation:mjbIn .18s ease; } @keyframes mjbIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .mjb-ico{ font-size:16px; flex-shrink:0; } .mjb-tx{ flex:1; min-width:0; font-size:12.5px; color:var(--text-dim); line-height:1.4; } .mjb-tx b{ color:var(--text); } .mjb-sub{ color:var(--text-faint); } .mjb-join{ flex-shrink:0; padding:7px 13px; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:700; cursor:pointer; } .mjb-join:hover{ filter:brightness(1.05); } .mjb-x{ flex-shrink:0; width:24px; height:24px; padding:0; border:none; border-radius:50%; background:none; color:var(--text-faint); font-size:13px; cursor:pointer; } .mjb-x:hover{ color:var(--text); background:rgba(255,255,255,.06); } /* ---------- 📢 공지 브로드캐스트 배너(상단 중앙 고정) ---------- */ .announce-banner{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:6000; /* 전역 배너 밴드 */ display:flex; align-items:flex-start; gap:11px; max-width:min(560px, 94vw); padding:13px 14px 13px 16px; background:var(--bg-elev); border:1px solid var(--accent); border-radius:var(--radius); box-shadow:var(--shadow); animation:abIn .2s ease; } @keyframes abIn{ from{ opacity:0; transform:translate(-50%,-10px); } to{ opacity:1; transform:translate(-50%,0); } } .ab-ico{ font-size:17px; flex-shrink:0; line-height:1.4; } .ab-body{ flex:1; min-width:0; } .ab-msg{ font-size:13.5px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; } .ab-from{ margin-top:3px; font-size:11.5px; color:var(--text-faint); } .ab-x{ flex-shrink:0; width:24px; height:24px; padding:0; border:none; border-radius:50%; background:none; color:var(--text-faint); font-size:13px; cursor:pointer; } .ab-x:hover{ color:var(--text); background:rgba(255,255,255,.06); } /* 공지 작성 모달 보조 요소(comfy-modal-* 스타일 재사용, 추가분만 정의) */ .ann-textarea{ width:100%; box-sizing:border-box; margin-top:10px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:13.5px; line-height:1.5; resize:vertical; font-family:inherit; } .ann-textarea:focus{ outline:none; border-color:var(--accent); } /* 공지 이력(작성 모달 하단) — 최근 공지 목록 + 개별 삭제 */ .ann-hist{ margin-top:14px; } .ann-hist-tag{ font-size:11px; font-weight:700; color:var(--text-faint); margin-bottom:6px; } .ann-hist-list{ max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; } .ann-hist-empty{ font-size:12.5px; color:var(--text-faint); padding:8px 2px; } .ann-hist-item{ display:flex; align-items:flex-start; gap:9px; padding:9px 10px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--radius-sm); } .ann-hist-item.is-system{ opacity:.72; } .ann-hist-main{ flex:1; min-width:0; } .ann-hist-msg{ font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; } .ann-hist-meta{ margin-top:4px; font-size:11px; color:var(--text-faint); } .ann-hist-del{ flex-shrink:0; width:22px; height:22px; padding:0; border:none; border-radius:50%; background:none; color:var(--text-faint); font-size:12px; cursor:pointer; } .ann-hist-del:hover{ color:var(--text); background:rgba(255,255,255,.06); } .ann-hist-del:disabled{ opacity:.5; cursor:default; } /* 숨김 유지용 YouTube IFrame 호스트 — display:none은 일부 브라우저에서 재생을 막으므로 1px 투명 처리(오디오만 사용). */ #musicYtHost{ position:fixed; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden; z-index:-1; } /* ---------- 🎵 easter-egg: URL 붙여넣기 팝오버 ---------- */ .music-url-pop-overlay{ position:fixed; inset:0; z-index:2600; display:flex; /* 모달 밴드 */ align-items:flex-start; justify-content:center; padding-top:16vh; background:color-mix(in srgb, var(--bg) 30%, black 55%); } .music-url-pop{ width:min(420px, 92vw); background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; gap:12px; } .mup-head{ font-size:16px; font-weight:700; color:var(--text); } .mup-desc{ font-size:13px; color:var(--text-dim); line-height:1.5; } .mup-input{ width:100%; box-sizing:border-box; padding:11px 13px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--sans); font-size:14px; outline:none; } .mup-input:focus{ border-color:var(--accent); } .mup-input::placeholder{ color:var(--text-faint); } .mup-actions{ display:flex; justify-content:flex-end; gap:8px; } .mup-btn{ padding:9px 16px; border-radius:var(--radius-sm); font-size:13px; font-weight:700; cursor:pointer; border:1px solid var(--border); transition:.12s; } .mup-btn.ghost{ background:none; color:var(--text-dim); } .mup-btn.ghost:hover{ color:var(--text); border-color:var(--border); background:rgba(255,255,255,.04); } .mup-btn.primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); } .mup-btn.primary:hover{ filter:brightness(1.05); } /* URL 팝오버 안 채널 선택(1~99) 행 + 활성 채널 힌트 칩 */ .mup-ch-row{ display:flex; align-items:center; gap:10px; } .mup-ch-label{ font-size:12.5px; font-weight:700; color:var(--text-dim); flex-shrink:0; } .mup-ch-input{ width:90px; } .mup-ch-input::-webkit-inner-spin-button{ opacity:1; } .mup-ch-hints[hidden]{ display:none; } .mup-ch-hints{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .mup-ch-hints-tag{ width:100%; font-size:11px; font-weight:700; color:var(--text-faint); } .mup-ch-chip{ max-width:100%; padding:5px 10px; border-radius:999px; cursor:pointer; background:var(--surface); border:1px solid var(--border-soft); color:var(--text-dim); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mup-ch-chip:hover{ border-color:var(--accent); color:var(--text); } .mup-ch-chip b{ color:var(--accent); } /* ---------- 🎵 미니 플레이어 v3: 채널 뱃지·마퀴 제목·대기열 hover·참여 유도 바 ---------- */ /* 현재 채널 뱃지 */ /* 현재 채널 뱃지 = 채널 전환 버튼(클릭 시 채널 입력 팝오버). */ .mmp-badge{ flex-shrink:0; padding:2px 7px; border-radius:999px; margin-right:1px; background:color-mix(in srgb, var(--accent) 18%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap; cursor:pointer; transition:.12s; } .mmp-badge:hover{ background:color-mix(in srgb, var(--accent) 30%, transparent); border-color:var(--accent); } /* 진행자(호스트) 뱃지 — 내가 진행자면 강조, 남이 진행자면 이름과 함께 조용히 표시. */ .mmp-hostbadge{ flex-shrink:0; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 7px; border-radius:999px; margin-right:1px; font-size:10px; font-weight:700; letter-spacing:.01em; color:var(--text-faint); border:1px solid var(--border); background:rgba(255,255,255,.04); } .mmp-hostbadge.is-host{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 14%, transparent); } /* 마퀴(흐르는) 제목 — 고정폭 컨테이너(overflow:hidden) 안에서 짧으면 정지, 길면 좌로 무한 스크롤(요청 #1). 표준 단일 텍스트 패턴으로 폭이 UI를 넓히지 않는다. */ .mmp-title-wrap{ position:relative; overflow:hidden; max-width:120px; flex:0 1 auto; min-width:0; } .mmp-title-text{ display:inline-block; white-space:nowrap; font-size:11.5px; font-weight:600; color:var(--text-dim); will-change:transform; } /* 넘칠 때만 흐른다. 짧으면 애니메이션 없이 좌측 정렬 정적 표시. 핑퐁 방식: 왼쪽으로 흘러 제목 끝까지 보여준 뒤(양끝 잠깐 정지) 다시 돌아온다. translateX 이동량은 "넘친 만큼"(--mmp-shift, 음수 px)이라 텍스트가 절대 화면 밖으로 통째로 사라지지 않는다(이전 100%↔-100% 방식이 제목을 비게 만들던 근본 원인 수정). */ .mmp-title-wrap.is-marquee .mmp-title-text{ animation:mmpMarquee var(--mmp-marquee-dur,10s) ease-in-out infinite alternate; } @keyframes mmpMarquee{ 0%, 16% { transform:translateX(0); } 84%, 100% { transform:translateX(var(--mmp-shift, 0)); } } /* 대기열 hover 확장(요청 #2) + 맨 앞 +URL(요청 #5) */ .mmp-queue{ position:relative; } .mmp-queue-pop{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:5100; /* 앵커드 팝오버 밴드 */ width:min(260px, 78vw); padding:8px; flex-direction:column; gap:6px; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow); } .mmp-queue:hover .mmp-queue-pop, .mmp-queue:focus-within .mmp-queue-pop{ display:flex; } .mmp-queue-head{ font-size:11px; font-weight:700; color:var(--text-faint); padding:2px 4px; } .mmp-queue-add{ display:inline-flex; align-items:center; gap:6px; justify-content:center; padding:8px 10px; border-radius:7px; cursor:pointer; background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent); font-size:12.5px; font-weight:700; } .mmp-queue-add:hover{ filter:brightness(1.08); } .mmp-queue-add svg{ width:14px; height:14px; } .mmp-queue-list{ display:flex; flex-direction:column; gap:1px; max-height:230px; overflow-y:auto; } .mmp-queue-item{ padding:7px 8px; border-radius:6px; font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mmp-queue-item.current{ background:var(--surface); color:var(--text); font-weight:700; } .mmp-queue-empty{ padding:8px; font-size:11.5px; line-height:1.45; color:var(--text-faint); } /* 미구독자용 참여 유도 바(요청 #4): 활성 채널이 있으면 미니 플레이어가 이 형태로 등장 */ .mmp-joinbar{ gap:8px; padding:0 8px; } .mmp-live{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--text-dim); white-space:nowrap; } .mmp-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation:mmpPulse 1.6s ease-out infinite; } @keyframes mmpPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } .mmp-live-hint{ max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--text-faint); } .mmp-joinpill{ display:inline-flex; align-items:center; gap:5px; flex-shrink:0; padding:5px 11px 5px 8px; border-radius:999px; cursor:pointer; background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); font-size:11.5px; font-weight:700; } .mmp-joinpill:hover{ filter:brightness(1.05); } .mmp-joinpill svg{ width:14px; height:14px; } /* 좁은 화면에서 상단바가 눌릴 때 미니 플레이어가 레이아웃을 깨지 않도록 축소 */ @media (max-width:720px){ .mmp-title-wrap{ max-width:96px; } .mmp-range{ width:44px; } .mmp-live-hint{ display:none; } } /* ---------- ICON RAIL (top-level modules, re-homed from the top bar) ---------- The module buttons (.module-item[data-module]) were moved out of the top bar's .gt-nav into this vertical rail. .gt-nav is now a column of compact icon+micro-label tiles. Every hook attribute/id on the tiles is unchanged; only the layout/skin differs, so switchModule()/switchView()/applyModule- MenuVisibility() keep working untouched. */ .icon-rail{ grid-area:rail; background:var(--rail, var(--sidebar)); border-right:1px solid var(--border-soft); display:flex; flex-direction:column; align-items:center; padding:12px 0 14px; gap:3px; overflow-y:auto; overflow-x:hidden; } .icon-rail::-webkit-scrollbar{width:0;} .gt-nav{display:flex; flex-direction:column; align-items:center; gap:3px;} /* Rail tiles per the mockup: 64px wide, icon housed in a 44×38 rounded box, a 10px micro-label below. The soft-accent chip sits behind the ICON box on the active tile (not the whole tile), plus a 3px left accent bar + accent text — matching the redesign spec exactly. */ .gt-nav .nav-item{ width:64px; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px 0 8px; font-size:10px; font-weight:600; line-height:1.15; letter-spacing:-.1px; border-left:none; border-radius:12px; text-align:center; white-space:normal; color:var(--text-faint); } .gt-nav .nav-item svg{ width:20px; height:20px; opacity:1; display:flex; align-items:center; justify-content:center; } /* Icon box: a 44×38 rounded slot that fills with soft-accent when active. */ .gt-nav .nav-item{position:relative;} .gt-nav .nav-item::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:44px; height:38px; border-radius:11px; background:transparent; transition:background .12s; z-index:0; } .gt-nav .nav-item svg{z-index:1;} .gt-nav .nav-item span, .gt-nav .nav-item{position:relative;} .gt-nav .nav-item .nav-idx{display:none;} .gt-nav .nav-item:hover{color:var(--text-dim); background:rgba(255,255,255,.04);} /* Day theme now uses a coherent LIGHT rail (--rail:#e9e9e3), matching the rest of the light theme so day mode reads as one consistent surface (the earlier near-black rail against otherwise-light chrome looked half-broken). The idle icon color falls through to var(--text-faint); only the hover wash is overridden here because the base rule's white-tinted hover is invisible on a light strip — a dark-tinted wash reads correctly instead. */ html[data-theme="day"] .gt-nav .nav-item:hover{color:var(--text); background:rgba(20,20,15,.055);} .gt-nav .nav-item.active{border-left:none; background:none; color:var(--accent);} .gt-nav .nav-item.active::before{background:var(--accent-soft);} .gt-nav .nav-item.active svg{opacity:1; color:var(--accent);} /* Accent bar on the left edge marks the active module (replaces the old underline that suited a horizontal bar). */ .gt-nav .nav-item.active::after{ content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; background:var(--accent); border-radius:0 3px 3px 0; z-index:2; } /* The pending-signup / missing-key dots that live inside 회원 관리·설정 tiles sit at the top-right corner of the compact tile instead of inline. */ .gt-nav .nav-item{position:relative;} .gt-nav .nav-item > span[id="navPendingWarn"], .gt-nav .nav-item > span[id="navKeyWarn"]{ position:absolute; top:7px; right:12px; margin-left:0 !important; } /* Apps dropdown */ .gt-apps{position:relative;} .gt-apps-trigger{padding:7px 10px; font-size:13px; border-radius:8px;} .gt-apps-trigger .chev{width:13px;height:13px;opacity:.6;transition:transform .15s;} .gt-apps.open .gt-apps-trigger{background:var(--surface); color:var(--text);} .gt-apps.open .gt-apps-trigger .chev{transform:rotate(180deg);} .gt-apps-menu{ display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:210px; background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:11px; box-shadow:0 12px 30px rgba(0,0,0,.22); padding:6px; gap:1px; flex-direction:column; } .gt-apps.open .gt-apps-menu{display:flex;} .gt-apps-menu .nav-item{font-size:13px; border-left:none;} .gt-spacer{flex:1;} .gt-user{display:flex; align-items:center; gap:9px; flex-shrink:0;} /* ---------- SIDEBAR (context panel) ---------- */ /* The SIDEBAR now acts as the 2nd-tier CONTEXT PANEL, sitting to the right of the icon rail. A slightly lighter surface + a hairline against the rail visually separates the two tiers (rail = which module, panel = within it). */ .sidebar{ grid-area:sidebar; background:color-mix(in srgb, var(--sidebar) 70%, var(--surface)); border-right:1px solid var(--border-soft); border-left:1px solid var(--border-soft); display:flex; flex-direction:column; padding:18px 12px; overflow-y:auto; } /* Active module's own internal nav (re-homed from the old global top bar). Shown only while that module is active. */ .sidebar-modnav{display:none; flex-direction:column; gap:2px; margin-bottom:14px;} .sidebar-modnav.active{display:flex;} .sidebar-modnav .modview-item{width:100%; font-size:14px;} .sidebar-modnav .modview-item.active{background:var(--surface); color:var(--text); border-left-color:var(--accent);} .sidebar-modnav .modview-item.active svg{opacity:1;color:var(--accent);} /* ── 사이드 메뉴 디자인 통일 (스토리 메이커 신규 네비 기준) ───────────────── 기존 셸 사이드바는 왼쪽 세로바(border-left) + 사각 하이라이트라 앱 내부에서 새로 만든 스토리 메이커 네비(라운드 박스 + 라임 아이콘)와 인상이 달랐다. 사용자 지시로 전 모듈 사이드 메뉴를 그 디자인으로 맞춘다. · 항목: 배경 투명 + 라운드 9px + 1px 투명 테두리 · hover: 살짝 밝은 면 · active: 한 단계 더 밝은 면 + 테두리 + 라임 아이콘 왼쪽 세로 액센트바는 제거해 라운드 박스만 남긴다. */ .sidebar-modnav .nav-item, .sidebar-ctx .nav-item{ border-left:none; border:1px solid transparent; border-radius:9px; padding:8px 10px; gap:9px; font-size:13px; font-weight:700; color:var(--text-dim); background:transparent; } .sidebar-modnav .nav-item svg, .sidebar-ctx .nav-item svg{width:15px;height:15px;opacity:.9;color:var(--accent);} .sidebar-modnav .nav-item:hover, .sidebar-ctx .nav-item:hover{ background:var(--surface); color:var(--text); border-color:transparent; } .sidebar-modnav .nav-item.active, .sidebar-modnav .modview-item.active, .sidebar-ctx .nav-item.active{ background:var(--bg-elev); border-color:var(--border-soft); border-left-color:var(--border-soft); color:var(--text); } .sidebar-modnav .nav-item.active svg, .sidebar-ctx .nav-item.active svg{opacity:1;color:var(--accent);} /* 섹션 라벨도 같은 톤(작고 넓은 자간의 대문자)으로 */ .sidebar-modnav .sidebar-ctx-label, .sidebar .sidebar-ctx-label{ font-size:9px; letter-spacing:.12em; font-weight:800; color:var(--text-faint); padding:2px 6px 7px; } /* 챗봇 메이커·스토리 메이커의 셸 사이드바 페이지 목록은 앱 내부 워크플로 네비와 중복되어 제거했다(#modnav-content는 빈 컨테이너로만 남음). 관련 규칙도 함께 정리. app.js가 아직 showing-prompt/showing-mov 클래스를 토글하지만 대상이 없어 무해하다. */ .content-subnav-actions{display:none; flex-direction:column; gap:2px;} .sidebar-ctx{display:none; flex-direction:column; gap:5px; margin-bottom:14px;} .sidebar-ctx.active{display:flex;} .sidebar-ctx-label{ font-size:11px; color:var(--text-faint); font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:2px 6px 8px; } /* create-tab restyled as a vertical sidebar list */ .sidebar-ctx .create-tab{ padding:9px 12px; font-size:13px; border-radius:9px; width:100%; color:var(--text-dim); background:var(--surface); border:1px solid var(--border-soft); justify-content:flex-start; } .sidebar-ctx .create-tab svg{width:15px;height:15px;} .sidebar-ctx .create-tab.active{background:var(--accent); color:var(--on-accent); border-color:transparent;} /* settings-tab restyled as a vertical sidebar list */ .sidebar-ctx .settings-tab{ padding:9px 12px; font-size:13px; border-radius:9px; width:100%; background:var(--surface); border:1px solid var(--border-soft); color:var(--text-dim); } .sidebar-ctx .settings-tab.active{background:var(--accent); color:var(--on-accent); border-color:transparent;} /* gallery filter chips as a vertical sidebar list */ #galleryFilterChips{display:flex; flex-direction:column; gap:5px;} #galleryFilterChips .chip{width:100%; border-radius:9px; text-align:center; padding:9px 12px; font-size:13px;} .logo{display:flex; align-items:center; gap:11px; padding:2px 4px 24px;} .logo-mark{ width:34px; height:34px; border-radius:9px; background:var(--ink); color:var(--on-accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; } html[data-theme="day"] .logo-mark{ background:var(--ink); color:#fafaf6; } .logo-mark svg{width:17px;height:17px;} /* The two-line text stack was visually sitting higher than the icon square next to it even though align-items:center was centering their bounding boxes correctly — tight line-height on all-caps, no-descender text still leaves ascender padding above the glyphs that the icon square doesn't have, so the *visible* text always read a few px above true center. line-height:1 removes that slack so the boxes' centers line up with what you actually see, not just their CSS box heights. */ .logo-textwrap{display:flex; flex-direction:column; justify-content:center;} .logo-text{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.4px; line-height:1; text-transform:uppercase;} .logo-sub{font-size:11px; line-height:1; color:var(--text-faint); margin-top:3px; letter-spacing:.06em; text-transform:uppercase;} /* Topbar logo doubles as a "홈으로" shortcut back to 살펴보기 — cursor + subtle hover feedback signal that, unlike the auth-screen logo (decorative only, no onclick), this one is clickable. */ .gt-logo{cursor:pointer;} .gt-logo:hover .logo-mark{opacity:.85;} .nav-group-label{ font-size:11px; color:var(--text-faint); font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:16px 10px 7px; display:flex; align-items:center; gap:8px; } .nav-group-label::after{content:""; flex:1; height:1px; background:var(--border-soft);} .nav{display:flex; flex-direction:column; gap:1px;} .nav-item{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; color:var(--text-dim); text-decoration:none; font-size:14.5px; font-weight:600; cursor:pointer; border-left:2px solid transparent; transition:background .12s, color .12s, border-color .12s; position:relative; } .nav-item .nav-idx{ font-family:var(--mono); font-size:11px; color:var(--text-faint); width:14px; flex-shrink:0; } .nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8;} .nav-item:hover{background:var(--surface); color:var(--text);} .nav-item.active{background:var(--surface); color:var(--text); border-left-color:var(--accent);} .nav-item.active svg{opacity:1;color:var(--accent);} .nav-item.active .nav-idx{color:var(--accent);} /* "Apps" group items — external sub-apps opened in a new tab (↗ affordance). */ .nav-item.nav-app{color:var(--text-dim);} .nav-item.nav-app .nav-ext{ margin-left:auto; font-size:11px; color:var(--text-faint); opacity:.7; flex-shrink:0; } .nav-item.nav-app:hover .nav-ext{opacity:1; color:var(--accent);} .sidebar-spacer{flex:1;} .local-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:13px 14px; margin-bottom:10px; } .local-card-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px;} .local-label{font-size:11.5px; color:var(--text-faint); letter-spacing:.04em;} .local-val{font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.5px;} /* Thin usage progress bar (mockup .usage-bar). */ .usage-bar{height:5px; border-radius:3px; background:var(--bg-elev); overflow:hidden; margin:9px 0 7px;} .usage-bar > i{display:block; height:100%; width:0%; border-radius:3px; background:var(--accent); transition:width .3s ease;} .local-sub{font-size:11.5px; color:var(--text-faint); margin-top:2px;} .status-line{display:flex; align-items:center; gap:6px; margin-top:9px; font-size:12px; color:var(--text-faint);} .status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);flex-shrink:0;} .status-dot.ok{background:var(--success);} .status-dot.warn{background:var(--warn);} /* 버전 정보 타일 — 아이콘 레일(.icon-rail) 최하단에 margin-top:auto로 고정되는 컴팩트 타일. 폭 좁은 컨텍스트 열에서 텍스트가 잘리던 문제를 피해, 항상 같은 폭으로 보이는 좌측 레일에 아이콘+버전번호만 압축 노출한다. 클릭 시 업데이트 내역 모달. 레일 타일과 동일한 토큰(--text-faint/--accent)만 사용해 셸 디자인과 일관성 유지. */ .rail-version{ margin-top:auto; width:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:9px 2px 6px; border-radius:12px; font-size:9.5px; font-weight:600; line-height:1.15; letter-spacing:-.2px; color:var(--text-faint); text-align:center; white-space:normal; word-break:break-all; cursor:pointer; user-select:none; transition:color .15s ease, background .15s ease; } .rail-version svg{ width:17px; height:17px; flex-shrink:0; } .rail-version:hover{ color:var(--accent); background:rgba(255,255,255,.04); } html[data-theme="day"] .rail-version:hover{ color:var(--accent); background:rgba(20,20,15,.055); } .rail-version:focus-visible{ outline:1px solid var(--accent); outline-offset:1px; } /* 업데이트 내역 모달 본문 — comfy-modal-box 안에서 스크롤되는 버전 목록. */ .changelog-list{ max-height:56vh; overflow-y:auto; margin:4px 0 2px; } .changelog-entry{ padding:11px 0; border-top:1px solid var(--border-soft); } .changelog-entry:first-child{ border-top:none; } .changelog-entry-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; } .changelog-ver{ font-family:var(--display); font-size:13px; font-weight:700; color:var(--accent); letter-spacing:-.3px; } .changelog-title{ font-size:13px; font-weight:600; color:var(--text); } .changelog-date{ margin-left:auto; font-size:11px; color:var(--text-faint); white-space:nowrap; } .changelog-items{ margin:0; padding-left:16px; } .changelog-items li{ font-size:12.5px; line-height:1.6; color:var(--text-faint); } .user-row{display:flex; align-items:center; gap:9px; padding:8px; border-radius:8px; cursor:pointer;} .user-row:hover{background:var(--surface);} .avatar{ width:28px;height:28px;border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700;flex-shrink:0; } .avatar svg{width:15px;height:15px;} .user-name{font-size:14px;font-weight:700;} .user-plan{font-size:11.5px;color:var(--text-faint);} .theme-toggle{ margin-left:auto; width:30px;height:30px;border-radius:8px; background:var(--bg-elev); border:1px solid var(--border-soft); display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim); } .theme-toggle svg{width:14px;height:14px;} /* ---------- MAIN ---------- */ .main{grid-area:main; display:flex; flex-direction:column; min-height:0; height:100%; overflow:hidden; position:relative;} /* 임베드 모듈(LoRA/챗봇/무비/NAI/3D)은 상단 모듈 네비 탭 자체에 이미 이름이 보이고, 그 아래 sidebar-ctx-label에도 같은 이름이 또 나온다 — 이 줄까지 같은 이름을 세 번째로 보여주는 건 중복이라 접는다(높이째로 0). generate는 뷰마다 제목/부제가 실제로 바뀌므로(살펴보기/만들기/...) 그대로 둔다. */ .topbar.topbar-collapsed{height:0; border-bottom:none; padding:0; overflow:hidden;} .topbar{ height:58px; flex-shrink:0; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; padding:0 26px; gap:14px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(6px); position:relative; z-index:5; } .topbar-title{font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:-.2px;} /* The big view title now lives in the top-bar breadcrumb (#gtCrumbView), so hide the duplicate here on wide screens — the descriptive #topbarSub line and the "새로 생성" button remain. #topbarTitle is NOT removed (nav JS still writes its .textContent, and updateTopbarTitleVisibility toggles the wrap); it's only visually hidden. On mobile (breadcrumb label collapses) it comes back so the row still names the current view. */ .topbar-title{display:none;} .topbar-sub{font-size:12px; color:var(--text-faint); margin-top:1px;} .topbar-spacer{flex:1;} .icon-btn{ width:34px;height:34px;border-radius:8px;background:var(--surface); border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center; color:var(--text-dim);cursor:pointer;flex-shrink:0; } .icon-btn:hover{color:var(--text);border-color:var(--border);} .icon-btn svg{width:16px;height:16px;} .btn-primary{ display:flex;align-items:center;gap:7px; background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); padding:8.5px 16px;border-radius:8px;font-weight:700;font-size:14px; cursor:pointer;white-space:nowrap;flex-shrink:0; } .btn-primary:hover{filter:brightness(1.06);} .btn-primary svg{width:15px;height:15px;} .btn-ghost{ display:flex;align-items:center;gap:7px; background:var(--surface); border:1px solid var(--border-soft); color:var(--text); padding:8.5px 16px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer; white-space:nowrap;flex-shrink:0; } .btn-ghost:hover{border-color:var(--border);} .btn-ghost.danger{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--border-soft));} /* [버튼 세로 줄바꿈 수정] 이 두 클래스는 앱 전체 액션 버튼의 기반 클래스인데 white-space:nowrap이 없어, 좁은 flex 툴바(예: .comfy-group-actions의 flex:1 1 auto, .feedback-toolbar-actions의 flex:1)에서 flex-shrink로 짓눌리면 한글 라벨이 "저장"→"저/장"처럼 세로로 쪼개질 수 있었다. 라벨은 모두 한 줄짜리 짧은 동작명이라 nowrap을 적용해도 기존에 의도한 줄바꿈은 없다(회귀 없음). */ .content{ flex:1;overflow-y:auto;padding:24px 30px 60px;position:relative; background-image:radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px); background-size:20px 20px; background-position:-9px -9px; } /* 임베드 모듈(LoRA/챗봇 메이커/무비 메이커/NAI/3D 시뮬레이터)이 활성화되면 이 .content의 패딩+점무늬 배경이 iframe 가장자리 밖으로 얇게 드러나 "흰색/밝은 테두리 선"처럼 보이는 문제가 있었다 — 각 모듈은 자기 자신의 배경을 이미 꽉 채워 그리므로, 임베드 모드에서는 패딩과 점무늬를 완전히 제거해 이음매 없이 맞닿게 한다. (public/app.js의 updateTopbarTitleVisibility()가 토글) */ .content.content-embed{padding:0;background-image:none;} .view{display:none;animation:fadeIn .2s ease;height:100%;} .view.active{display:block;} /* Embedded iframe module views (LoRA/prompt/mov/nai/sim3d) need a flex column layout so their iframe/status-strip stack and stretch to fill height. This used to be an inline style="display:flex..." on each view div, but inline styles always beat stylesheet rules — including .view{display:none} above — so every one of these views stayed visibly on screen regardless of the 'active' class, stacking underneath whichever module was opened next. Scoping "flex" to .view-embed.active (3 classes) keeps it hidden by default and only switches to flex once active, same as every other view. */ .view.view-embed.active{display:flex;flex-direction:column;position:relative;} /* ComfyUI 실 웹 UI iframe은 ComfyUI 자체의 캔버스/단축키가 클릭·키보드 이벤트를 모두 가로채서, 우리 셸의 아이콘 레일을 다시 누를 방법이 없으면 사용자가 그 화면에 "갇히는" 문제가 있었다("들어갔는데 나갈 수가 없다"). iframe 위에 항상 떠 있는 고정 위치 탈출 버튼을 두어, 셸 내비게이션과 무관하게 항상 확실한 탈출 경로를 보장한다. */ .comfy-webui-exit{ position:absolute; top:14px; right:14px; z-index:40; display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px; border:1px solid var(--accent); background:color-mix(in srgb, var(--bg) 88%, transparent); color:var(--accent); font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 10px 26px -14px rgba(0,0,0,.5); backdrop-filter:blur(6px); } .comfy-webui-exit svg{width:15px;height:15px;flex-shrink:0;} .comfy-webui-exit:hover{background:var(--accent); color:var(--on-accent);} /* 3D 시뮬레이터 튜토리얼 진입 버튼 (작업 #33) — 좌측 셸 사이드 탭을 없애고 나서 #view-sim3d(.view-embed) 우상단에 떠 있는 작은 오버레이 버튼으로, 기존 iframe (public/apps/3d/*, 무접촉) 위에 얹혀 sim3d-tutorial 뷰로 라우팅한다. 위 .comfy-webui-exit와 같은 "iframe 위에 떠 있는 고정 오버레이" 패턴을 재사용. */ .sim3d-tut-btn{ position:absolute; top:14px; right:14px; z-index:6; padding:7px 13px; font-size:12.5px; font-weight:700; box-shadow:0 10px 26px -14px rgba(0,0,0,.5); } .sim3d-tut-btn svg{width:15px;height:15px;} /* AI 채팅 view도 같은 이유로 flex column이 필요하다 — #chatPanel(.chat-panel)이 flex:1;min-height:0으로 부모의 남은 세로 공간을 꽉 채우도록 설계되어 있는데 (예전엔 .create-view{display:flex;flex-direction:column}의 자식이었다), 승격 이후 이 view가 곧바로 부모가 되었으므로 여기서도 flex 컨텍스트를 만들어줘야 채팅 스레드가 옛날처럼 전체 높이를 채운다. */ .view.view-chat-flex.active{display:flex;flex-direction:column;} @keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} h1.page-h{font-family:var(--serif); font-size:24px;margin:0 0 3px;font-weight:700;letter-spacing:-.3px;} p.page-sub{color:var(--text-faint);font-size:14px;margin:0 0 22px;} .card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:17px;} /* LoRA 메이커 — slim status strip above the embedded tool iframe (the tool auto-starts with the studio server now, so this is no longer a full-page status/launch screen — just a thin header over the live embedded app). */ .lora-status-strip{flex-shrink:0;padding:10px 20px 8px;} /* 좁아져도 줄바꿈·세로 접힘 없이 한 줄을 유지하고, 넘치면 가로 스크롤로 처리한다 (스튜디오 레이아웃 철칙: 재배치 금지). */ .lora-status{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;overflow-x:auto;} .lora-status>*{flex-shrink:0;} .lora-status-note{margin:0;font-size:12px;white-space:nowrap;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;} /* Mirrored LoRA Maker project list, rendered natively in #modnav-lora from postMessage broadcasts — reuses .nav-item's look so it reads as the same sidebar, not a bolted-on extra widget. */ .lora-project-item{font-size:13px;font-weight:500;} .lora-project-item.active{background:var(--surface); color:var(--text); border-left-color:var(--accent);} .lora-proj-emoji{font-size:14px;flex-shrink:0;} .lora-proj-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .lora-proj-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);flex-shrink:0;} .lora-proj-dot.status-training,.lora-proj-dot.status-running{background:var(--ink);} .lora-proj-dot.status-completed,.lora-proj-dot.status-done{background:var(--success);} .lora-proj-dot.status-error,.lora-proj-dot.status-failed{background:var(--danger);} .lora-badge{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid var(--border-soft);} .lora-badge.running{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, var(--border-soft));} .lora-badge.stopped{background:var(--bg-elev);color:var(--text-dim);} .lora-badge.checking{background:var(--bg-elev);color:var(--text-faint);} .lora-status code{font-size:12.5px;background:var(--bg-elev);padding:1px 5px;border-radius:5px;} .banner{ display:flex; gap:11px; border-radius:11px; padding:13px 15px; font-size:13.5px; line-height:1.6; border:1px solid var(--border-soft); background:var(--surface); color:var(--text-dim); margin-bottom:16px; } .banner svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;} .banner.info{border-color:color-mix(in srgb, var(--ink) 30%, var(--border-soft)); background:var(--ink-soft);} .banner.info svg{color:var(--ink);} .banner.warn{border-color:color-mix(in srgb, var(--warn) 40%, var(--border-soft)); background:color-mix(in srgb, var(--warn) 12%, transparent);} .banner.warn svg{color:var(--warn);} .banner.danger{border-color:color-mix(in srgb, var(--danger) 40%, var(--border-soft)); background:color-mix(in srgb, var(--danger) 10%, transparent); color:var(--text);} .banner.danger svg{color:var(--danger);} .banner a{color:var(--accent); text-decoration:none; font-weight:700; margin-left:4px;} /* ---- dashboard ---- */ .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px;} .stat-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:17px 18px;} .stat-top{display:flex;justify-content:space-between;align-items:flex-start;} .stat-icon{width:28px;height:28px;border-radius:7px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent);} .stat-icon svg{width:14px;height:14px;} .stat-val{font-family:var(--display); font-size:29px;font-weight:700;margin:13px 0 2px;letter-spacing:-1px;} .stat-label{font-size:12.5px;color:var(--text-faint);} .quick-row{display:grid;grid-template-columns:1.4fr 1.4fr 1fr;gap:14px;margin-bottom:28px;} .quick-card{ border-radius:var(--radius);padding:20px;cursor:pointer; border:1px solid var(--border-soft); background:var(--surface); transition:transform .12s, border-color .12s; } .quick-card:hover{transform:translateY(-2px);border-color:var(--accent);} /* Feature card (first quick-action) gets the mockup's subtle ink→surface wash. */ .quick-card.feat{background:linear-gradient(150deg, color-mix(in srgb, var(--ink) 26%, var(--surface)), var(--surface) 62%);} /* Compact "setup" card (3rd) — muted icon, laid out as a top/bottom split. */ .quick-card.mini{display:flex;flex-direction:column;justify-content:space-between;} .quick-card.mini .quick-icon{background:var(--surface-2);} .quick-card.mini .quick-icon svg{color:var(--text-dim);} .quick-tag{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:11px;} .quick-icon{width:40px;height:40px;border-radius:11px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:15px;} .quick-icon svg{width:20px;height:20px;color:#fff;} html[data-theme="day"] .quick-icon svg{color:#fafaf6;} .quick-title{font-family:var(--serif); font-size:17px;font-weight:700;margin-bottom:5px;} .quick-desc{font-size:12.5px;color:var(--text-faint);line-height:1.55;} .section-head{display:flex;align-items:baseline;margin-bottom:13px;gap:10px;} .section-title{font-family:var(--serif); font-size:17px;font-weight:700;} .section-head::after{content:"";flex:1;height:1px;background:var(--border-soft);} .section-link{font-size:12.5px;color:var(--text-faint);cursor:pointer;flex-shrink:0;} .section-link:hover{color:var(--accent);} /* ===== 신고(마스터 전용) ===== */ .feedback-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px;} .feedback-toolbar-actions{display:flex; gap:8px;} .feedback-count{font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--text-dim); margin-left:4px;} .feedback-list{display:flex; flex-direction:column; gap:10px;} .feedback-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:12px 14px; } .feedback-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px;} .feedback-card-who{font-size:13px; font-weight:700; color:var(--text);} .feedback-card-meta{display:flex; align-items:center; gap:10px;} .feedback-card-time{font-size:11.5px; color:var(--text-faint);} .feedback-card-del{ background:transparent; border:none; cursor:pointer; color:var(--text-faint); width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px; } .feedback-card-del:hover{background:var(--surface-2); color:var(--danger);} .feedback-card-del svg{width:14px; height:14px;} .feedback-card-text{font-size:13.5px; line-height:1.6; color:var(--text); white-space:pre-wrap; word-break:break-word;} .feedback-empty{padding:28px 10px; text-align:center; color:var(--text-faint); font-size:13px;} /* 신고 처리 상태 뱃지 + 관리자 회신 UI + 회원 "내 신고" — 셸 디자인 토큰만 사용 */ .fb-badge{display:inline-flex; align-items:center; font-family:var(--sans); font-size:11px; font-weight:700; line-height:1; padding:4px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap;} .fb-badge-received{color:var(--text-dim); background:var(--surface-2); border-color:var(--border-soft);} .fb-badge-in_progress{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, transparent);} .fb-badge-resolved{color:var(--success); background:color-mix(in srgb, var(--success) 14%, transparent); border-color:color-mix(in srgb, var(--success) 40%, transparent);} .fb-badge-rejected{color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent); border-color:color-mix(in srgb, var(--danger) 38%, transparent);} .feedback-comments{margin-top:10px; padding-top:10px; border-top:1px dashed var(--border-soft); display:flex; flex-direction:column; gap:8px;} .feedback-comments-title{font-size:11px; font-weight:700; color:var(--text-faint); letter-spacing:.02em;} .fb-comment{background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:8px 10px;} .fb-comment-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px;} .fb-comment-who{font-size:12px; font-weight:700; color:var(--text);} .fb-comment-status{font-size:10.5px; font-weight:700; color:var(--accent);} .fb-comment-time{font-size:11px; color:var(--text-faint); margin-left:auto;} .fb-comment-text{font-size:12.5px; line-height:1.55; color:var(--text); white-space:pre-wrap; word-break:break-word;} .feedback-reply{margin-top:10px; padding-top:10px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:8px;} .feedback-reply-row{display:flex; align-items:center; gap:8px;} .feedback-reply-lbl{font-size:12px; font-weight:600; color:var(--text-dim);} .feedback-status-select{font-family:var(--sans); font-size:12.5px; color:var(--text); background:var(--surface-2); border:1px solid var(--border-soft); border-radius:8px; padding:6px 8px; cursor:pointer;} .feedback-reply-input{width:100%; box-sizing:border-box; resize:vertical; min-height:44px; font-family:var(--sans); font-size:12.5px; color:var(--text); background:var(--surface-2); border:1px solid var(--border-soft); border-radius:8px; padding:8px 10px; line-height:1.5;} .feedback-reply-actions{display:flex; justify-content:flex-end;} .btn.btn-sm{padding:6px 12px; font-size:12.5px;} /* 신고 팝오버 탭 + 회원 내 신고 목록 */ .feedback-pop-tabs{display:flex; gap:4px; margin-bottom:8px;} .feedback-pop-tab{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--text-dim); background:transparent; border:1px solid var(--border-soft); border-radius:8px; padding:6px 8px; cursor:pointer; transition:.12s;} .feedback-pop-tab:hover{color:var(--text);} .feedback-pop-tab.active{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, transparent);} .fb-mine-badge{display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; font-size:10px; font-weight:800; line-height:1; color:var(--on-accent); background:var(--danger); border-radius:999px;} .feedback-mine-list{display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto;} .feedback-mine-card{background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px 12px;} .feedback-mine-card.fb-mine-new{border-color:color-mix(in srgb, var(--accent) 55%, transparent);} .feedback-mine-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;} .feedback-mine-head .feedback-card-time{margin-left:auto;} .fb-new-tag{font-size:10px; font-weight:800; color:var(--on-accent); background:var(--accent); padding:2px 6px; border-radius:999px;} /* 신고 버튼(assistantFeedbackBtn) 새 답변 알림 점 */ .assistant-gear{position:relative;} .assistant-gear-dot{position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--bg-elev);} .thumb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:30px;} .thumb{ aspect-ratio:1/1;border-radius:9px;position:relative;overflow:hidden; border:1px solid var(--border-soft);cursor:pointer;background:var(--surface-2); } .thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block;} .thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-faint);} .thumb-ph svg{width:20px;height:20px;opacity:.5;} /* Real first-frame preview for video results: a muted