/* * FanChat 화면 스타일. * 토큰과 컴포넌트 규칙은 fanmake.ai 디자인 시스템을 따른다. * 원본은 라이트·다크 두 테마이고 FanChat은 다크 전용이므로 fanmake의 `.dark` 값을 기본값으로 쓴다. * 브랜드 색은 fanmake 기본값인 green이며 ``로 orange 변형으로 교체할 수 있다. * 레이아웃은 모바일 우선이고 900px 이상에서 2단으로 확장한다. */ :root { color-scheme: dark; /* ── 타이포 스케일 ── */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); /* ── 간격 스케일 ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* ── 모서리 ── */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-2xl: 1.75rem; --radius-full: 9999px; --transition: 0.18s cubic-bezier(0.16, 1, 0.3, 1); --font-body: Inter, "Helvetica Neue", -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", sans-serif; --font-wordmark: Philosopher, Georgia, "Times New Roman", serif; /* ── 팔레트 (fanmake dark) ── */ --bg: #0a0a0a; --bg-secondary: #131210; --bg-elevated: #1f1e1b; --surface: #131210; --surface-alt: #1a1917; --surface-strong: #2d271f; --border: #2a2722; --border-strong: #3a352f; --border-subtle: #1f1e1b; --fg: #f4f0e8; --fg-secondary: #a8a096; --muted: #7a7570; --faint: #4a453e; /* ── 브랜드 (fanmake 기본 green) ── */ --brand: #49f264; --brand-bright: #6ffc87; --brand-strong: #2ad64a; --brand-deep: #1eb037; --brand-rgba: 73, 242, 100; --danger: #e08a8a; --danger-rgba: 224, 138, 138; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --nav-bg: rgba(10, 10, 10, 0.85); --nav-border: rgba(42, 39, 34, 0.8); /* ── 의미 별칭 ── */ --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-2: var(--surface-alt); --color-border: var(--border); --color-divider: var(--border-subtle); --color-text: var(--fg); --color-text-secondary: var(--fg-secondary); --color-text-faint: var(--muted); --color-primary: var(--brand); --color-primary-hover: var(--brand-strong); --color-primary-active: var(--brand-deep); --color-primary-bg: rgba(var(--brand-rgba), 0.08); --color-primary-bg-strong: rgba(var(--brand-rgba), 0.15); --color-primary-ink: #0a0a0a; /* ── FanChat 레이아웃 토큰 ── */ --tap: 44px; --bar: 60px; --gutter: var(--space-4); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); font-family: var(--font-body); } /* fanmake의 orange 브랜드 변형. */ [data-brand="orange"] { --brand: #ff6700; --brand-bright: #ff8c3a; --brand-strong: #ff8c3a; --brand-deep: #ffb340; --brand-rgba: 255, 103, 0; } * { box-sizing: border-box; } html, body { height: 100%; } body { height: var(--app-h, 100dvh); min-width: 320px; margin: 0; overflow: hidden; background-color: var(--color-bg); color: var(--color-text); font-size: var(--text-sm); line-height: 1.65; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } h1, h2 { font-weight: 700; line-height: 1.2; text-wrap: balance; } .icon-sprite { position: absolute; width: 0; height: 0; } button, select, textarea, input { font: inherit; color: inherit; } button, select { cursor: pointer; } svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ── 버튼 (fanmake .btn) ────────────────────────────────── */ .icon-button { display: grid; flex: 0 0 auto; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); transition: background var(--transition), color var(--transition), transform var(--transition); } .icon-button:active { background: var(--color-primary-bg); color: var(--color-primary); transform: scale(0.98); } .icon-button:disabled { opacity: 0.4; } .icon-button-label { display: none; } /* ── 셸 ────────────────────────────────────────────────── */ .app-shell { position: relative; display: grid; /* 행이 콘텐츠 높이로 늘어나 화면 밖으로 넘치지 않게 고정한다. */ grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); height: 100%; overflow: hidden; background: var(--color-bg); } .chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; background: var(--color-bg); } /* ── 앱바 (fanmake .nav) ───────────────────────────────── */ .chat-header { display: flex; grid-row: 1; grid-column: 1; align-items: center; gap: var(--space-2); min-height: calc(var(--bar) + var(--safe-t)); padding: var(--space-2) calc(var(--gutter) + var(--safe-r)) var(--space-2) calc(var(--space-2) + var(--safe-l)); padding-top: calc(var(--space-2) + var(--safe-t)); border-bottom: 1px solid var(--nav-border); background: var(--nav-bg); backdrop-filter: blur(12px); } .persona-trigger { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--tap); padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-lg); background: transparent; color: inherit; text-align: left; transition: background var(--transition); } .persona-trigger:active { background: var(--color-primary-bg); } .avatar, .mini-avatar { display: grid; flex: none; place-items: center; border-radius: var(--radius-full); /* 브랜드 색은 주요 동작(전송·구매·잔액)에 아껴 쓰고 아바타는 중립 면으로 둔다. */ background: var(--surface-strong); color: var(--fg); font-family: var(--font-wordmark); font-weight: 700; } .avatar { width: 38px; height: 38px; font-size: 16px; } /* 프로필 사진은 원형 아바타를 꽉 채우고 얼굴이 위쪽에 오도록 자른다. */ .avatar > img, .mini-avatar > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: 50% 22%; display: block; } .persona-headline { display: grid; min-width: 0; } .name-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .header-name { overflow: hidden; font-family: var(--font-wordmark); font-size: 17px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .online-dot { flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg-strong); } .trigger-chevron { flex: none; width: 16px; height: 16px; color: var(--color-text-faint); } .header-description { margin-top: 2px; overflow: hidden; color: var(--color-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .header-actions { display: flex; flex: none; align-items: center; gap: var(--space-1); } /* fanmake .badge */ .credit-pill { display: inline-flex; align-items: center; min-height: 34px; padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--color-primary-bg-strong); color: var(--color-primary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; transition: background var(--transition), transform var(--transition); } .credit-pill:active { transform: scale(0.98); } .credit-pill.bump { background: rgba(var(--brand-rgba), 0.32); } /* ── 메시지 ────────────────────────────────────────────── */ .messages { display: flex; flex-direction: column; grid-row: 2; grid-column: 1; gap: var(--space-5); overflow-x: hidden; overflow-y: auto; padding: var(--space-5) calc(var(--gutter) + var(--safe-r)) var(--space-6) calc(var(--gutter) + var(--safe-l)); overscroll-behavior: contain; scrollbar-color: var(--border-strong) transparent; -webkit-overflow-scrolling: touch; } .message-row { display: flex; max-width: 86%; flex-direction: column; align-items: flex-start; animation: message-in 180ms ease-out; } .message-row.user { align-self: flex-end; align-items: flex-end; } .message-label { margin: 0 0 var(--space-2) var(--space-1); color: var(--color-text-faint); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* fanmake .card-surface */ .message-bubble { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm) var(--radius-xl) var(--radius-xl) var(--radius-xl); background: var(--color-surface); color: var(--color-text); font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; } /* fanmake .btn-primary와 같은 대비. 사용자 발화가 브랜드 면이 된다. */ .user .message-bubble { border: 0; border-radius: var(--radius-xl) var(--radius-sm) var(--radius-xl) var(--radius-xl); background: var(--color-primary); color: var(--color-primary-ink); font-weight: 500; } .message-meta { margin-top: var(--space-2); color: var(--color-text-faint); font-size: 11px; } .error-message .message-bubble { border-color: rgba(var(--danger-rgba), 0.28); color: var(--danger); } /* fanmake .card */ .generated-image { width: 100%; max-width: 380px; margin-top: var(--space-3); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); transition: border-color var(--transition), box-shadow var(--transition); } .generated-image button { display: block; width: 100%; padding: 0; border: 0; background: transparent; } .generated-image img { display: block; width: 100%; height: auto; background: var(--color-bg); } .image-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); } .image-actions span { color: var(--color-text-faint); font-size: 11px; } /* fanmake .btn-sm + .btn-ghost */ .download-button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 600; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); } .download-button:active { border-color: var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary); } .download-button svg { width: 16px; height: 16px; } .reference-image { display: grid; width: min(200px, 100%); gap: var(--space-2); margin-top: var(--space-2); } .reference-image img { display: block; width: 100%; max-height: 260px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); object-fit: cover; } .reference-image span { color: var(--color-text-faint); font-size: 10px; letter-spacing: 0.1em; } .typing-bubble { display: flex; gap: var(--space-1); padding: var(--space-4) var(--space-5); } .typing-bubble span { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-text-faint); animation: typing 1s infinite ease-in-out; } .typing-bubble span:nth-child(2) { animation-delay: 140ms; } .typing-bubble span:nth-child(3) { animation-delay: 280ms; } .generation-note { margin-top: var(--space-2); color: var(--color-primary); font-size: 11px; } .jump-button { /* 메시지 영역과 같은 칸에 겹쳐 띄운다. 열을 지정하지 않으면 새 열이 생긴다. */ display: flex; z-index: 3; grid-row: 2; grid-column: 1; align-items: center; align-self: end; justify-self: center; gap: var(--space-2); min-height: 38px; margin-bottom: var(--space-3); padding: var(--space-1) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--bg-elevated); color: var(--color-text); font-size: var(--text-xs); font-weight: 600; box-shadow: var(--shadow-md); animation: message-in 160ms ease-out; } .jump-button svg { width: 16px; height: 16px; } .jump-button[hidden] { display: none; } /* ── 컴포저 ────────────────────────────────────────────── */ .composer { grid-row: 4; grid-column: 1; padding: var(--space-3) calc(var(--gutter) + var(--safe-r)) calc(var(--space-3) + var(--safe-b)) calc(var(--gutter) + var(--safe-l)); border-top: 1px solid var(--nav-border); background: var(--nav-bg); backdrop-filter: blur(12px); } .attachment-preview { display: grid; align-items: center; grid-template-columns: 44px minmax(0, 1fr) var(--tap); gap: var(--space-3); margin-bottom: var(--space-2); padding: var(--space-2); border: 1px solid rgba(var(--brand-rgba), 0.24); border-radius: var(--radius-lg); background: var(--color-primary-bg); } .attachment-preview[hidden] { display: none; } .attachment-preview img { width: 44px; height: 44px; border-radius: var(--radius-md); object-fit: cover; } .attachment-preview span { overflow: hidden; color: var(--color-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .composer-box { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); transition: border-color var(--transition); } .composer-box:focus-within { border-color: var(--border-strong); } .attach-button { color: var(--color-primary); } textarea { width: 100%; max-height: 120px; padding: 11px var(--space-1); border: 0; outline: 0; background: transparent; color: var(--color-text); /* 16px 미만이면 iOS에서 포커스마다 화면이 확대된다. */ font-size: 16px; line-height: 1.5; resize: none; } textarea::placeholder { color: var(--color-text-faint); } /* fanmake .btn-primary */ .send-button { display: flex; flex: none; align-items: center; justify-content: center; gap: var(--space-2); width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-ink); font-size: var(--text-xs); font-weight: 600; box-shadow: 0 2px 8px rgba(var(--brand-rgba), 0.35); transition: background var(--transition), box-shadow var(--transition), transform var(--transition); } .send-button:active { background: var(--color-primary-hover); transform: scale(0.98); } .send-button:disabled { cursor: not-allowed; box-shadow: none; opacity: 0.4; } .send-label { display: none; } .composer-hint { margin: var(--space-2) var(--space-2) 0; color: var(--color-text-faint); font-size: 11px; text-align: center; } /* 키보드가 올라온 동안에는 힌트를 숨겨 대화 영역을 넓게 쓴다. */ body.typing .composer-hint { display: none; } /* ── 사이드 패널 (모바일 = 바텀 시트) ──────────────────── */ .scrim { position: fixed; z-index: 30; background: rgba(0, 0, 0, 0.7); inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--transition); backdrop-filter: blur(2px); } body.panel-open .scrim { opacity: 1; pointer-events: auto; } .side-panel { position: fixed; z-index: 40; display: flex; max-height: min(86%, calc(var(--app-h, 100dvh) - 48px)); flex-direction: column; border-top: 1px solid var(--color-border); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--bg-secondary); box-shadow: var(--shadow-lg); inset: auto 0 0; transform: translateY(100%); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } body.panel-open .side-panel { transform: translateY(0); } .side-panel.dragging { transition: none; } .sheet-handle { display: grid; flex: none; place-items: center; width: 100%; height: 26px; padding: 0; border: 0; background: transparent; touch-action: none; } .sheet-handle span { width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--border-strong); } .side-panel-scroll { display: flex; min-height: 0; flex-direction: column; gap: var(--space-6); overflow-y: auto; padding: var(--space-2) calc(var(--gutter) + var(--safe-r)) calc(var(--space-5) + var(--safe-b)) calc(var(--gutter) + var(--safe-l)); overscroll-behavior: contain; } /* 시트가 스크롤될 때 항목이 줄어들며 겹치지 않도록 고정한다. */ .side-panel-scroll > * { flex: none; } .brand { display: none; align-items: center; gap: var(--space-3); } .brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-primary-ink); font-family: var(--font-wordmark); font-size: 22px; font-weight: 700; } .brand strong, .brand span { display: block; } .brand strong { font-family: var(--font-wordmark); font-size: var(--text-lg); font-weight: 700; } .brand div > span { margin-top: 2px; color: var(--color-text-faint); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } /* fanmake .btn-primary */ .new-chat-button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); border: 0; border-radius: var(--radius-lg); background: var(--color-primary); color: var(--color-primary-ink); font-size: var(--text-sm); font-weight: 600; box-shadow: 0 2px 8px rgba(var(--brand-rgba), 0.35); transition: background var(--transition), box-shadow var(--transition), transform var(--transition); } .new-chat-button:active { background: var(--color-primary-hover); transform: scale(0.98); } .new-chat-button:disabled { box-shadow: none; opacity: 0.4; } .control-group { min-width: 0; } .section-kicker { display: block; margin: 0 0 var(--space-2) var(--space-1); color: var(--color-text-faint); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .sidebar-select { width: 100%; min-height: var(--tap); padding: 0 38px 0 var(--space-3); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: none; background: var(--color-surface); color: var(--color-text); font-size: 15px; text-overflow: ellipsis; transition: border-color var(--transition); } .credit-card { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid rgba(var(--brand-rgba), 0.2); border-radius: var(--radius-lg); background: var(--color-primary-bg); } .credit-card span { color: var(--color-text-secondary); font-size: 11px; } .credit-card strong { color: var(--color-primary); font-family: var(--font-wordmark); font-size: var(--text-lg); font-weight: 700; } /* fanmake .btn-secondary */ .credit-tools { display: flex; gap: var(--space-2); margin-top: var(--space-2); } .credit-tool-button { min-height: var(--tap); flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); font-weight: 600; transition: background var(--transition), border-color var(--transition), color var(--transition); } .credit-tool-button:active { border-color: var(--color-primary); background: var(--color-surface-2); color: var(--color-primary); } .persona-list { display: grid; gap: var(--space-2); } /* fanmake .card */ .persona-button { display: grid; align-items: center; grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-3); width: 100%; min-height: 60px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); text-align: left; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .persona-button:active { transform: translateY(1px); } .persona-button.active { border-color: var(--color-primary); background: var(--color-primary-bg); } .persona-button:disabled { opacity: 0.42; } .mini-avatar { width: 42px; height: 42px; } .persona-copy { min-width: 0; } .persona-copy strong, .persona-copy span { display: block; } .persona-copy strong { font-size: 15px; font-weight: 600; } .persona-copy span { margin-top: 2px; overflow: hidden; color: var(--color-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } /* fanmake .badge / .badge-neutral */ .persona-badges { display: flex; gap: var(--space-1); margin-top: var(--space-2); } .persona-badges b { display: inline-flex; align-items: center; padding: 2px var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-secondary); font-size: 10px; font-weight: 600; } .persona-badges b.age { border-color: transparent; background: var(--color-primary-bg-strong); color: var(--color-primary); } .model-note { margin: var(--space-2) var(--space-1) 0; color: var(--color-text-faint); font-size: 12px; line-height: 1.5; } .history-group { min-height: 0; } .history-heading { display: flex; align-items: center; justify-content: space-between; } #history-count { margin: 0 var(--space-1) var(--space-2) 0; color: var(--color-text-faint); font-size: 11px; } .history-list { display: grid; gap: var(--space-1); } .history-item { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) var(--tap); min-height: 56px; padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-lg); background: transparent; transition: background var(--transition), border-color var(--transition); } .history-item.active { border-color: rgba(var(--brand-rgba), 0.28); background: var(--color-primary-bg); } .history-open { min-width: 0; padding: var(--space-1) 0; border: 0; background: transparent; color: var(--color-text); text-align: left; } .history-open strong, .history-open span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-open strong { font-size: 14px; font-weight: 600; } .history-open span { margin-top: 2px; color: var(--color-text-faint); font-size: 11px; } .history-empty { padding: var(--space-4) var(--space-3); color: var(--color-text-faint); font-size: 12px; } /* fanmake .card-surface */ .privacy-note { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); } .status-dot { flex: none; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-primary); box-shadow: 0 0 0 5px var(--color-primary-bg); } .privacy-note strong { font-size: 12px; font-weight: 600; } .privacy-note p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: 11px; line-height: 1.5; } /* ── 시트형 다이얼로그 ─────────────────────────────────── */ .sheet-dialog { width: 100%; max-width: 100%; max-height: 92%; margin: auto auto 0; padding: 0; border: 0; border-top: 1px solid var(--color-border); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--bg-elevated); color: var(--color-text); box-shadow: var(--shadow-lg); } .sheet-dialog[open] { animation: sheet-in 220ms cubic-bezier(0.32, 0.72, 0, 1); } .sheet-dialog::backdrop { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(3px); } .sheet-dialog form { padding: var(--space-2) calc(var(--space-5) + var(--safe-r)) calc(var(--space-5) + var(--safe-b)) calc(var(--space-5) + var(--safe-l)); } .sheet-grip { width: 40px; height: 4px; margin: 0 auto var(--space-4); border-radius: var(--radius-full); background: var(--border-strong); } .dialog-kicker { color: var(--color-primary); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; } .sheet-dialog h2 { margin: var(--space-2) 0 var(--space-3); font-family: var(--font-wordmark); font-size: var(--text-lg); } .sheet-dialog p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.65; } .credit-summary { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0 var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .credit-summary span { color: var(--color-text-secondary); font-size: 12px; } .credit-summary strong { font-size: 13px; font-weight: 600; text-align: right; } .dialog-fineprint { color: var(--color-text-faint); font-size: 12px; } .ask-field { display: grid; gap: var(--space-2); margin: var(--space-5) 0 var(--space-1); } .ask-field[hidden] { display: none; } .ask-field span { color: var(--color-text-secondary); font-size: 12px; } .ask-field input { width: 100%; min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: none; background: var(--color-surface); font-size: 16px; transition: border-color var(--transition); } .ask-field input:focus { border-color: var(--color-primary); } .dialog-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-2); margin-top: var(--space-5); } .dialog-actions button { min-height: 48px; border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 600; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .dialog-actions button:active { transform: scale(0.98); } .dialog-actions button[hidden] { display: none; } /* fanmake .btn-secondary */ .dialog-cancel { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); } /* fanmake .btn-primary */ .dialog-confirm { border: 0; background: var(--color-primary); color: var(--color-primary-ink); box-shadow: 0 2px 8px rgba(var(--brand-rgba), 0.35); } .dialog-confirm:disabled { cursor: not-allowed; box-shadow: none; opacity: 0.42; } .dialog-confirm.danger { background: var(--danger); color: var(--color-primary-ink); box-shadow: 0 2px 8px rgba(var(--danger-rgba), 0.3); } /* ── 이미지 뷰어 ───────────────────────────────────────── */ .viewer-dialog { display: none; width: 100%; max-width: 100%; height: 100%; max-height: 100%; padding: 0; border: 0; background: var(--color-bg); } .viewer-dialog[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; } .viewer-dialog::backdrop { background: var(--color-bg); } .viewer-dialog img { width: 100%; height: 100%; min-height: 0; padding: calc(var(--safe-t) + 56px) var(--space-3) var(--space-3); object-fit: contain; } .viewer-close { position: absolute; z-index: 2; top: calc(var(--safe-t) + var(--space-2)); left: calc(var(--safe-l) + var(--space-2)); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); } .viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) calc(var(--space-4) + var(--safe-r)) calc(var(--space-4) + var(--safe-b)) calc(var(--space-4) + var(--safe-l)); border-top: 1px solid var(--color-border); } .viewer-bar span { overflow: hidden; color: var(--color-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } /* ── 토스트 ────────────────────────────────────────────── */ .toast-stack { position: fixed; z-index: 60; display: grid; justify-items: center; gap: var(--space-2); bottom: calc(var(--safe-b) + 92px); left: 50%; width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; } .toast { max-width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--bg-elevated); color: var(--color-text); font-size: 13px; text-align: center; box-shadow: var(--shadow-md); animation: toast-in 200ms ease-out; } .toast.error { border-color: rgba(var(--danger-rgba), 0.4); color: var(--danger); } .toast.leaving { opacity: 0; transition: opacity 200ms ease; } /* ── 애니메이션 ────────────────────────────────────────── */ @keyframes message-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* ── 포인터가 정밀한 환경(데스크톱)의 보조 상태 ────────── */ @media (hover: hover) and (pointer: fine) { .icon-button:hover { background: var(--color-primary-bg); color: var(--color-primary); } .persona-button:hover, .history-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .credit-tool-button:hover, .download-button:hover, .dialog-cancel:hover { border-color: var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary); } .new-chat-button:hover, .send-button:hover, .dialog-confirm:hover { background: var(--color-primary-hover); box-shadow: 0 4px 16px rgba(var(--brand-rgba), 0.45); } .dialog-confirm.danger:hover { background: var(--danger); } .generated-image:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .sidebar-select:hover, .composer-box:hover { border-color: var(--border-strong); } } /* ── 데스크톱 확장 ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── 액션 시트 (대화방 관리) ───────────────────────────── */ .action-sheet .action-list { display: grid; gap: var(--space-2); margin-top: var(--space-2); } /* fanmake .btn-secondary */ .action-sheet .action-item { min-height: 52px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); font-size: 15px; font-weight: 500; text-align: left; transition: background var(--transition), border-color var(--transition), color var(--transition); } .action-sheet .action-item:active { border-color: var(--color-primary); background: var(--color-surface-2); } .action-sheet .action-item.danger { color: var(--danger); } @media (hover: hover) and (pointer: fine) { .action-sheet .action-item:hover { border-color: var(--color-primary); background: var(--color-surface-2); } } /* ── 이미지 후보 선택 ─────────────────────────────────── */ .image-candidates { margin-top: var(--space-3); display: grid; gap: var(--space-2); } .candidates-label { font-size: var(--text-sm); color: var(--fg-secondary); } .candidate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--space-2); } .candidate { position: relative; padding: 0; border: 2px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-alt); cursor: pointer; transition: var(--transition); } .candidate:hover:not(:disabled), .candidate:focus-visible { border-color: var(--color-primary); } .candidate:active:not(:disabled) { transform: scale(0.98); } .candidate:disabled { opacity: 0.5; cursor: progress; } .candidate img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; } .candidate-index { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.62); color: #fff; font-size: var(--text-xs); font-weight: 600; } /* ══ 앱 셸 ═══════════════════════════════════════════════ */ .stage { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; overflow: hidden; } .landing { display: none; } .device { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-bg); } .device-notch { display: none; position: absolute; top: 0; left: 50%; z-index: 30; width: 126px; height: 26px; transform: translateX(-50%); border-radius: 0 0 16px 16px; background: #000; } .app { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: 100%; overflow: hidden; border-radius: inherit; } .view { display: none; grid-row: 1; grid-column: 1; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; background: var(--color-bg); } .view.is-active { display: grid; } .view-chat.is-active { grid-template-rows: auto minmax(0, 1fr) auto auto; } .view-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .view-lead { margin: 0; padding: var(--space-4) var(--gutter) var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); } /* ── 앱바 ─────────────────────────────────────────────── */ .app-bar { display: flex; grid-row: 1; grid-column: 1; align-items: center; gap: var(--space-2); min-height: calc(var(--bar) + var(--safe-t)); padding: var(--space-2) calc(var(--gutter) + var(--safe-r)) var(--space-2) calc(var(--space-2) + var(--safe-l)); padding-top: calc(var(--space-2) + var(--safe-t)); border-bottom: 1px solid var(--nav-border); background: var(--nav-bg); backdrop-filter: blur(12px); } .app-bar-title { flex: 1; font-size: var(--text-base); font-weight: 700; } .app-bar-count { color: var(--color-text-tertiary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; } .wordmark { flex: 1; padding-left: var(--space-2); font-family: var(--font-display, Philosopher, Georgia, serif); font-size: 21px; font-weight: 700; letter-spacing: 0.01em; } /* ── 하단 탭 ──────────────────────────────────────────── */ .tab-bar { display: grid; grid-row: 2; grid-column: 1; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: var(--safe-b); border-top: 1px solid var(--nav-border); background: var(--nav-bg); backdrop-filter: blur(12px); } .app.is-immersive .tab-bar { display: none; } .tab { display: grid; position: relative; gap: 2px; justify-items: center; min-height: var(--tap); padding: var(--space-2) 0; border: 0; background: none; color: var(--color-text-tertiary); font: inherit; cursor: pointer; transition: var(--transition); } .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .tab span { font-size: 10px; font-weight: 600; } .tab.is-active { color: var(--color-text); } .tab:active { background: var(--color-surface-2); } .tab-badge { position: absolute; top: 6px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } /* ── 스토리 레일 ──────────────────────────────────────── */ .story-rail { display: flex; gap: var(--space-4); padding: var(--space-4) var(--gutter); overflow-x: auto; border-bottom: 1px solid var(--color-divider); scrollbar-width: none; } .story-rail::-webkit-scrollbar { display: none; } .story { display: grid; flex: none; gap: 6px; justify-items: center; width: 68px; border: 0; background: none; color: var(--color-text-secondary); font: inherit; cursor: pointer; } .story-ring { display: grid; place-items: center; width: 64px; height: 64px; padding: 2px; border-radius: 50%; background: linear-gradient(140deg, var(--color-primary), rgba(var(--brand-rgba), 0.35)); } .story.is-locked .story-ring { background: var(--color-border); } .story-ring img, .story-ring .story-initial { display: grid; place-items: center; width: 100%; height: 100%; border: 2px solid var(--color-bg); border-radius: 50%; background: var(--color-surface-2); object-fit: cover; font-weight: 700; } .story span { overflow: hidden; width: 100%; font-size: 11px; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .story.is-locked .story-ring img { filter: grayscale(1) brightness(0.55); } /* ── 피드 ─────────────────────────────────────────────── */ .feed { display: grid; } .post { border-bottom: 1px solid var(--color-divider); } .post-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--gutter); } .post-head button.post-author { display: flex; flex: 1; align-items: center; gap: var(--space-3); min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .post-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface-2); object-fit: cover; } .post-author-copy { display: grid; min-width: 0; } .post-author-copy strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; } .post-author-copy span { color: var(--color-text-tertiary); font-size: var(--text-xs); } .post-media { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: var(--color-surface-2); cursor: pointer; } .post-media img { width: 100%; height: 100%; object-fit: cover; } .post-locked { display: grid; gap: var(--space-2); place-content: center; justify-items: center; width: 100%; height: 100%; padding: var(--space-6); background: repeating-linear-gradient( 135deg, var(--color-surface) 0 12px, var(--color-surface-2) 12px 24px ); color: var(--color-text-tertiary); text-align: center; } .post-locked svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .post-locked strong { color: var(--color-text-secondary); font-size: var(--text-sm); } .post-locked span { font-size: var(--text-xs); } .post-actions { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) calc(var(--gutter) - var(--space-2)); } .post-action { display: inline-grid; grid-auto-flow: column; gap: 6px; align-items: center; min-height: 40px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-secondary); font: inherit; font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; transition: var(--transition); } .post-action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .post-action:active { background: var(--color-surface-2); } .post-action.is-liked { color: #ff4d6d; } .post-action.is-liked svg { fill: currentColor; stroke: currentColor; } .post-action.post-dm { margin-left: auto; padding: 0 var(--space-3); border: 1px solid var(--color-border); color: var(--color-text); font-weight: 600; } .post-body { display: grid; gap: var(--space-1); padding: 0 var(--gutter) var(--space-4); } .post-likes { font-size: var(--text-sm); font-weight: 700; } .post-caption { margin: 0; font-size: var(--text-sm); line-height: 1.55; } .post-caption b { margin-right: 6px; font-weight: 700; } .post-tags { color: var(--color-primary); font-size: var(--text-sm); } .post-time { color: var(--color-text-tertiary); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; } /* ── 페르소나 프로필 ──────────────────────────────────── */ .profile-head { display: grid; gap: var(--space-4); padding: var(--space-5) var(--gutter); } .profile-top { display: flex; align-items: center; gap: var(--space-5); } .profile-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--color-surface-2); object-fit: cover; } .profile-stats { display: grid; flex: 1; grid-auto-flow: column; text-align: center; } .profile-stats div { display: grid; } .profile-stats strong { font-size: var(--text-base); font-variant-numeric: tabular-nums; } .profile-stats span { color: var(--color-text-tertiary); font-size: var(--text-xs); } .profile-copy { display: grid; gap: 2px; } .profile-copy strong { font-size: var(--text-base); } .profile-copy span { color: var(--color-text-secondary); font-size: var(--text-sm); } .profile-actions { display: grid; grid-auto-flow: column; gap: var(--space-2); } .profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-top: 1px solid var(--color-divider); } .profile-grid button { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: var(--color-surface-2); cursor: pointer; } .profile-grid img { width: 100%; height: 100%; object-fit: cover; } .profile-locked { display: grid; place-items: center; width: 100%; height: 100%; color: var(--color-text-tertiary); } .profile-locked svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; } /* 로그인 문. 인증을 강제하는 환경에서만 덮는다. */ .signin-gate[hidden], .album-shelf[hidden], .account-card[hidden], .engine-dot[hidden] { display: none; } .signin-gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: var(--color-bg); } .signin-card { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; text-align: center; } .signin-card h2 { margin: 4px 0 0; font-size: 20px; } .signin-card p { margin: 0; font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; } .signin-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; padding: 0 22px; border-radius: 12px; background: var(--color-primary); color: var(--color-primary-ink); font-size: 15px; font-weight: 600; text-decoration: none; } .signin-note { font-size: 12.5px; } .account-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 12px; } .account-card img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .account-card div { display: flex; flex-direction: column; min-width: 0; flex: 1; } .account-card span { font-size: 12.5px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; } /* 열기 전에는 흐린 미리보기만 보인다. */ .locked-photo { position: relative; margin-top: 8px; border-radius: 14px; overflow: hidden; background: var(--color-surface-2); min-height: 180px; } .locked-photo img { width: 100%; display: block; } .locked-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, 0.35); color: #fff; } .locked-veil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; } .locked-open { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--color-primary); color: var(--color-primary-ink); font-size: 14px; font-weight: 600; cursor: pointer; } .locked-open:disabled { opacity: 0.6; } .tip-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); } .tip-button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-size: 13px; cursor: pointer; } /* 노트북이 살아 있는지 앱바에 점 하나로 알린다. */ .engine-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-bg-strong); color: var(--color-primary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .engine-badge.is-offline { background: rgba(136, 136, 136, 0.14); color: var(--color-text-tertiary, #888); } .engine-badge[hidden] { display: none; } .engine-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex: none; } .engine-dot.is-offline { background: var(--color-text-tertiary, #888); box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.18); } /* 자리를 항상 44px 차지하고 보이기만 바꾼다. position:absolute로 띄우면 마지막 메시지를 가리고 키보드 겹침 계산이 한 겹 늘어난다. */ .guide-rail { grid-row: 3; grid-column: 1; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 16px; visibility: hidden; opacity: 0; transition: opacity 120ms ease-out; } .guide-rail.is-open { visibility: visible; opacity: 1; } @media (prefers-reduced-motion: reduce) { .guide-rail { transition: none; } } .guide-chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .guide-chips::-webkit-scrollbar { display: none; } .guide-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-surface-2); color: var(--color-text); font-size: 14px; white-space: nowrap; cursor: pointer; } .guide-chip b { font-size: 11.5px; font-weight: 500; color: var(--color-text-secondary); } .guide-dismiss { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-secondary); cursor: pointer; } .guide-dismiss svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } /* 인사 바로 아래에 붙는 시작 칩. 말풍선과 같은 x축에 선다. */ .opening-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 0 4px; padding: 0 16px; } .opening-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--color-divider); background: var(--color-surface-2); color: var(--color-text); font-size: 14px; text-align: left; cursor: pointer; animation: chip-in 120ms ease-out both; animation-delay: 200ms; } .opening-chip b { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); } @keyframes chip-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .opening-chip { animation: none; } } .access-block { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; } .access-actions { display: flex; gap: 8px; } .access-button { flex: 1; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-size: 14px; font-weight: 500; cursor: pointer; } .access-button.primary { border-color: transparent; background: var(--color-primary); color: var(--color-primary-ink); } .access-button.is-on { border-color: var(--color-primary); color: var(--color-primary); } .access-section h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; } /* 잠긴 단계도 몇 장이 있는지는 보인다. 살 이유가 여기서 생긴다. */ .access-note { margin: 0 0 10px; font-size: 12.5px; color: var(--color-text-secondary); } .access-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .access-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--color-surface-2); cursor: pointer; } .access-cell img { width: 100%; height: 100%; object-fit: cover; } .lookbook-shelf { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .lookbook-card { flex: 0 0 132px; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; } .lookbook-thumb { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--color-surface-2); color: var(--color-text-secondary); } .lookbook-thumb img { width: 100%; height: 100%; object-fit: cover; } .lookbook-thumb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; } .lookbook-title { font-size: 13px; font-weight: 500; line-height: 1.35; } .lookbook-meta { font-size: 12px; color: var(--color-text-secondary); } .lookbook-card.is-owned .lookbook-meta { color: var(--color-primary); } .gallery-filters { display: flex; gap: 6px; padding: 12px 16px; } .gallery-filter { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text-secondary); font-size: 13px; cursor: pointer; } .gallery-filter.is-active { border-color: transparent; background: var(--color-surface-2); color: var(--color-text); } .album-shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px 16px 16px; } .album-tile { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; } .album-thumb { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--color-surface-2); } .album-thumb img { width: 100%; height: 100%; object-fit: cover; } .album-title { font-size: 13px; font-weight: 500; } .album-meta { font-size: 12px; color: var(--color-text-secondary); } /* 앨범을 열면 위에 제목과 돌아가기가 남는다. */ .album-header { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 0 4px; } .album-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 6px; border: 0; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text); font-size: 13px; cursor: pointer; } .album-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .post-save.is-saved { color: var(--color-primary); } .post-save.is-saved svg { fill: currentColor; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-top: 1px solid var(--color-divider); } .gallery-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: var(--color-surface-2); cursor: pointer; overflow: hidden; } .gallery-cell img { width: 100%; height: 100%; object-fit: cover; } /* 보낸 사진은 받은 사진과 섞이므로 한눈에 갈라 보이게 한다. */ .gallery-cell.is-sent::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--color-primary); pointer-events: none; } .gallery-tag { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .empty-note { padding: var(--space-8) var(--gutter); color: var(--color-text-tertiary); font-size: var(--text-sm); text-align: center; } /* ── 데스크톱 앱 안내 ─────────────────────────────────── */ .landing-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .landing-brand strong { font-family: var(--font-display, Philosopher, Georgia, serif); font-size: var(--text-xl); } .landing h1 { margin: 0 0 var(--space-4); font-size: clamp(var(--text-2xl), 3.4vw, 44px); letter-spacing: -0.02em; } .landing-lead { margin: 0 0 var(--space-6); max-width: 42ch; color: var(--color-text-secondary); font-size: var(--text-base); } .landing-points { display: grid; gap: var(--space-3); margin: 0 0 var(--space-8); padding: 0; list-style: none; } .landing-points li { display: flex; align-items: baseline; gap: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); } .landing-points span { color: var(--color-primary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; font-weight: 700; } .store-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); } .store-button { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; transition: var(--transition); } .store-button:hover { border-color: var(--color-text-tertiary); background: var(--color-surface-2); } .store-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .store-button span { display: grid; font-size: var(--text-sm); font-weight: 600; } .store-button small { color: var(--color-text-tertiary); font-size: 11px; font-weight: 500; } .landing-note { margin: 0; color: var(--color-text-tertiary); font-size: var(--text-xs); } /* ── DM 목록 (메신저 형태) ────────────────────────────── */ .view-dm .history-list { gap: 0; padding: var(--space-2) 0; } .view-dm .history-item { grid-template-columns: minmax(0, 1fr) var(--tap); min-height: 72px; padding: var(--space-2) var(--space-2) var(--space-2) var(--gutter); border-radius: 0; } .view-dm .history-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; width: 100%; cursor: pointer; } .view-dm .history-open .mini-avatar { width: 52px; height: 52px; } .history-copy { display: grid; min-width: 0; } .view-dm .history-open strong { font-size: var(--text-sm); } .view-dm .history-open .history-copy span { margin-top: 1px; color: var(--color-text-secondary); font-size: var(--text-xs); } .history-time { color: var(--color-text-tertiary); font-size: 11px; white-space: nowrap; } /* ── 탐색 (페르소나 목록) ─────────────────────────────── */ .view-explore .persona-list { gap: 0; padding-bottom: var(--space-6); } .view-explore .persona-button { padding: var(--space-3) var(--gutter); border-radius: 0; } .view-explore .persona-button .mini-avatar { width: 56px; height: 56px; } /* ── 내 정보 ──────────────────────────────────────────── */ .view-me .view-scroll { display: grid; gap: var(--space-5); align-content: start; padding: var(--space-5) var(--gutter) var(--space-8); } /* ── 데스크톱: 폰 프레임 안에 앱을 그대로 띄우고 옆에 설치 안내를 둔다 ── */ @media (min-width: 900px) { body { display: grid; padding: var(--space-6); place-items: center; overflow: auto; background: radial-gradient(circle at 12% 12%, rgba(var(--brand-rgba), 0.08), transparent 30rem), var(--color-bg); } .stage { display: grid; grid-template-columns: minmax(320px, 480px) auto; gap: clamp(var(--space-6), 5vw, var(--space-12)); align-items: center; width: min(1180px, 100%); height: auto; } .landing { display: block; } .device { position: relative; width: 390px; height: min(844px, calc(100dvh - 96px)); border: 11px solid #141414; border-radius: 46px; background: var(--color-bg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -20px rgba(0, 0, 0, 0.75); } .device-notch { display: block; } /* 노치 아래로 내용을 내린다. */ .app-bar { padding-top: 30px; } .sheet-dialog { width: min(430px, calc(100% - 32px)); margin: auto; border: 1px solid var(--color-border); border-radius: var(--radius-xl); } .sheet-dialog[open] { animation: message-in 160ms ease-out; } .sheet-grip { display: none; } .sheet-dialog form { padding: var(--space-6); } } /* 언어 전환기. fanmake.ai의 알약형 토글을 그대로 옮겼다. */ .landing-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .lang-toggle { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .lang-toggle button { min-width: 30px; padding: 4px 8px; border: 0; border-radius: 999px; background: none; color: var(--fg-secondary); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .lang-toggle button:hover { color: var(--fg); } .lang-toggle button.active { background: var(--fg); color: var(--bg); } .language-group .lang-toggle { align-self: flex-start; } /* 뷰어에서 넘겨 보기. 손짓과 버튼을 모두 받는다. */ .viewer-step { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: var(--fg); cursor: pointer; } .viewer-step svg { width: 20px; height: 20px; } .viewer-prev { left: 12px; } .viewer-next { right: 12px; } .viewer-next svg { transform: rotate(180deg); } .viewer-step[hidden] { display: none; } .viewer-count { margin-left: auto; font-size: 12px; color: var(--fg-secondary); } .viewer-count[hidden] { display: none; } /* 저장·좋아요는 내가 붙인 표시라 격자에서 바로 뗄 수 있다. */ .gallery-cell { position: relative; } .gallery-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: var(--fg); opacity: 0; transition: opacity 0.15s ease; cursor: pointer; } .gallery-remove svg { width: 14px; height: 14px; } .gallery-cell:hover .gallery-remove, .gallery-remove:focus-visible { opacity: 1; } /* 손가락에는 호버가 없다. 항상 보이게 둔다. */ @media (hover: none) { .gallery-remove { opacity: 1; } } /* 처음 온 사람에게 세 장. 로그인 문 위에는 얹지 않는다. */ .onboarding { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.82); } .onboarding[hidden] { display: none; } .onboarding-card { width: min(360px, 100%); padding: 28px 24px 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); text-align: left; } .onboarding-slide { display: none; } .onboarding-slide.is-active { display: block; } .onboarding-mark { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--brand); } .onboarding-slide h2 { margin: 10px 0 8px; font-size: 20px; line-height: 1.35; } .onboarding-slide p { margin: 0; color: var(--fg-secondary); line-height: 1.6; } .onboarding-dots { display: flex; gap: 6px; margin: 20px 0 16px; } .onboarding-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border); } .onboarding-dot.is-active { background: var(--brand); } .onboarding-actions { display: flex; align-items: center; gap: 12px; } .onboarding-skip { border: 0; background: none; color: var(--fg-secondary); font: inherit; cursor: pointer; padding: 10px 4px; } .onboarding-skip[hidden] { display: none; } .onboarding-next { margin-left: auto; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--brand); color: #06210c; font: inherit; font-weight: 700; cursor: pointer; }