/* Nesy v2 -- 자급자족 스타일. v1 어떤 것도 import하지 않음. */ /* -- 컬러 토큰 (설계도 06_ui_ux.md §8) -- */ :root { --c-bg: #F8F6F2; /* hanji 배경 */ --c-surface: #FFFFFF; --c-surface-dim: #F1EEE8; --c-ink: #1A1A2E; /* 본문 */ --c-ink-dim: #5A5A6E; /* 보조 */ --c-ink-faint: #9A9AAA; /* 힌트 */ --c-loch-50: #E8F4F6; --c-loch-100: #C5E4E9; --c-loch-500: #1B6B7D; /* 주 브랜드 */ --c-loch-600: #176070; --c-loch-700: #0F4C5C; --c-jade-400: #2A9D8F; /* 보조 */ --c-gat-400: #E9C46A; /* 강조 */ --c-dancheong-400: #E76F51; /* 경고/파괴 */ --c-line: rgba(27, 107, 125, 0.10); --c-line-strong: rgba(27, 107, 125, 0.22); --c-overlay: rgba(10, 58, 71, 0.42); /* 간격 (4px 배수) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; /* 모서리 */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; /* 그림자 */ --shadow-sm: 0 1px 3px rgba(10, 58, 71, 0.06); --shadow-md: 0 6px 18px rgba(10, 58, 71, 0.08); --shadow-lg: 0 12px 32px rgba(10, 58, 71, 0.12); /* 타이포 */ --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px; /* safe-area (iOS 노치) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ═══════════════════════════════════════════════ 다크 모드 스캐폴드 — 명시적 opt-in만 (MVP 범위 외) ─────────────────────────────────────────────── 활성화 방법: 색조 튜닝은 후속 Phase에서. 현재는 토큰 바인딩만. OS prefers-color-scheme 자동 감지는 MVP 확정 후 연결. ═══════════════════════════════════════════════ */ [data-theme="dark"] { --c-bg: #12141A; --c-surface: #1C1F27; --c-surface-dim: #262A34; --c-ink: #ECECF1; --c-ink-dim: #B4B4C0; --c-ink-faint: #7A7A88; --c-loch-50: #133A42; --c-loch-100: #1A4E58; --c-line: rgba(200, 220, 225, 0.10); --c-line-strong: rgba(200, 220, 225, 0.22); --c-overlay: rgba(0, 0, 0, 0.56); } /* -- reset -- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.v2-body { font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--c-bg); color: var(--c-ink); font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; } button { font-family: inherit; cursor: pointer; } a { color: var(--c-loch-600); text-decoration: none; } /* ═══════════════════════════════════════════════ 레이아웃 ═══════════════════════════════════════════════ */ .v2-main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; width: 100%; } /* -- 상단바 (Figma TopBar 17:9) -- */ .v2-topbar { display: flex; align-items: center; gap: var(--s-3); height: 52px; padding: 0 var(--s-4); padding-top: var(--safe-top); background: var(--c-surface); border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: 10; } .v2-topbar-menu { background: none; border: none; padding: var(--s-1); line-height: 0; display: inline-flex; align-items: center; justify-content: center; } .v2-topbar-menu img { display: block; } .v2-topbar-brand { display: inline-flex; align-items: center; gap: var(--s-2); color: inherit; text-decoration: none; } .v2-topbar-logo { display: block; } .v2-topbar-spacer { flex: 1; } .v2-topbar-right { display: inline-flex; align-items: center; gap: var(--s-2); } /* -- Nesy.app 로고타입 (Figma Brand 42:129) -- */ .v2-brand { font-family: "Noto Sans KR", system-ui, sans-serif; font-weight: 700; font-size: var(--t-lg); color: var(--c-loch-600); letter-spacing: 0.01em; line-height: 1.2; } /* -- 네시 아바타 (Figma NesyAvatar 48:134) -- */ .v2-nesy-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface); border-radius: 50%; overflow: hidden; flex: 0 0 auto; } .v2-nesy-avatar img { display: block; } /* -- 범용 아이콘 버튼 (bell, user 등) -- */ .v2-icon-btn { background: none; border: none; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); transition: background 0.15s; } .v2-icon-btn:hover { background: var(--c-surface-dim); } .v2-icon-btn img { display: block; } /* -- 중앙 콘텐츠 -- */ .v2-content { flex: 1; overflow-y: auto; padding: var(--s-4); padding-bottom: calc(var(--s-8) + 72px + var(--safe-bottom)); } /* -- 수신자 선택기 (Figma SendTargetSelector 54:190) -- 기본은 인라인 (예: 다른 곳에서 재사용될 경우). 방 페이지에선 .v2-has-send-target scope로 composer 바로 위에 고정됨 (아래 규칙 참조). */ .v2-send-target { display: flex; flex-direction: column; gap: 6px; padding: 10px var(--s-4); background: var(--c-loch-50); border-top: 1px solid var(--c-line); } .v2-send-target-label { font-size: 11px; font-weight: 700; color: var(--c-ink-dim); line-height: 1.2; } .v2-send-target-pills { display: flex; gap: var(--s-2); } .v2-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 42px; padding: 10px var(--s-4); border-radius: 21px; font-size: var(--t-sm); font-weight: 700; font-family: inherit; border: 1.5px solid var(--c-loch-600); background: var(--c-surface); color: var(--c-loch-700); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .v2-pill img { display: block; } .v2-pill-active { background: var(--c-loch-600); color: #fff; border-color: var(--c-loch-600); box-shadow: 0 2px 8px rgba(10, 58, 71, 0.18); } .v2-pill-nesy.v2-pill-active .v2-nesy-avatar { background: var(--c-surface); } /* 방 페이지 — 수신자 선택기를 composer 바로 위에 고정 */ .v2-has-send-target .v2-send-target { position: fixed; left: 0; right: 0; bottom: calc(72px + var(--safe-bottom)); /* composer 높이 */ z-index: 19; /* composer(20) 바로 아래 */ } .v2-has-send-target .v2-content { /* 컴포저(72) + 선택기(약 81) + 여유 + safe-area */ padding-bottom: calc(72px + 81px + var(--s-4) + var(--safe-bottom)); } /* -- 하단 상주 입력창 -- */ .v2-composer { position: fixed; left: 0; right: 0; bottom: 0; background: var(--c-surface); border-top: 1px solid var(--c-line); padding: var(--s-3) var(--s-4); padding-bottom: calc(var(--s-3) + var(--safe-bottom)); z-index: 20; } .v2-composer-form { display: flex; align-items: flex-end; gap: var(--s-2); max-width: 720px; margin: 0 auto; } .v2-composer-input { flex: 1; resize: none; border: 1px solid var(--c-line-strong); border-radius: var(--r-xl); padding: var(--s-3) var(--s-4); font-family: inherit; font-size: var(--t-base); line-height: 1.5; background: var(--c-bg); color: var(--c-ink); max-height: 160px; outline: none; transition: border-color 0.15s; } .v2-composer-input:focus { border-color: var(--c-loch-500); } .v2-composer-input::placeholder { color: var(--c-ink-faint); } .v2-composer-send { background: var(--c-loch-500); color: white; border: none; border-radius: 50%; width: 48px; height: 48px; flex: 0 0 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 0; box-shadow: var(--shadow-sm); transition: background 0.15s; } .v2-composer-send img { display: block; } .v2-composer-send:hover { background: var(--c-loch-600); } .v2-composer-send:active { background: var(--c-loch-700); } /* ═══════════════════════════════════════════════ 좌측 드로어 (모바일 기준) ═══════════════════════════════════════════════ */ .v2-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; background: var(--c-surface); border-right: 1px solid var(--c-line); transform: translateX(-100%); transition: transform 0.22s ease; z-index: 40; display: flex; flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); } .v2-drawer-open { transform: translateX(0); } .v2-drawer-overlay { position: fixed; inset: 0; background: var(--c-overlay); opacity: 0; pointer-events: none; transition: opacity 0.22s; z-index: 30; } .v2-drawer-overlay-open { opacity: 1; pointer-events: auto; } .v2-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4); border-bottom: 1px solid var(--c-line); } /* 드로어 헤더의 Brand 로고타입은 .v2-brand 스타일을 그대로 사용 */ .v2-drawer-close { background: none; border: none; font-size: 20px; color: var(--c-ink-dim); line-height: 1; } .v2-drawer-nav { flex: 1; overflow-y: auto; padding: var(--s-3) 0; display: flex; flex-direction: column; } .v2-drawer-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: var(--c-ink); font-size: var(--t-base); border-left: 3px solid transparent; } .v2-drawer-item:hover { background: var(--c-surface-dim); } .v2-drawer-item-active { background: var(--c-loch-50); color: var(--c-loch-700); border-left-color: var(--c-loch-500); font-weight: 500; } .v2-drawer-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; } .v2-drawer-section { margin-top: var(--s-5); padding: 0 var(--s-4); } .v2-drawer-section-title { font-size: var(--t-xs); color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s-2); } .v2-drawer-empty { font-size: var(--t-sm); color: var(--c-ink-faint); padding: var(--s-2) 0; } .v2-drawer-footer { margin-top: auto; padding: var(--s-4); border-top: 1px solid var(--c-line); } .v2-drawer-legacy-link { color: var(--c-ink-dim); font-size: var(--t-sm); } /* ═══════════════════════════════════════════════ 대화 스트림 ═══════════════════════════════════════════════ */ .v2-thread { max-width: 720px; margin: 0 auto; } .v2-welcome { text-align: center; padding: var(--s-8) var(--s-4) var(--s-4); } .v2-welcome-logo { display: block; width: 120px; height: auto; margin: 0 auto var(--s-3); } .v2-welcome-title { margin: 0 0 var(--s-2); font-size: var(--t-xl); font-weight: 700; line-height: 1.3; color: var(--c-ink); } .v2-welcome-subtitle { margin: 0 0 var(--s-6); color: var(--c-ink-dim); font-size: var(--t-sm); line-height: 1.5; } .v2-welcome-hints { display: flex; flex-direction: column; gap: var(--s-2); max-width: 320px; margin: 0 auto; } /* ── 팀 없음 온보딩 카드 (Figma team-none 19:22) ── */ .v2-team-none { display: flex; flex-direction: column; gap: var(--s-2); max-width: 343px; margin: var(--s-6) auto 0; } .v2-team-none-card { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-loch-500); border-radius: var(--r-lg); color: var(--c-ink); text-decoration: none; transition: background 0.15s; } .v2-team-none-card:hover { background: var(--c-loch-50); } .v2-team-none-card img { width: 18px; height: 18px; margin-bottom: var(--s-1); } .v2-team-none-card-title { font-size: var(--t-base); font-weight: 500; color: var(--c-ink); line-height: 1.2; } .v2-team-none-card-sub { font-size: var(--t-sm); color: var(--c-ink-dim); line-height: 1.5; } /* -- 힌트 카드 (Figma HintCard 17:2) -- */ .v2-hint-card { background: var(--c-surface); border: 1px solid var(--c-loch-500); border-radius: var(--r-xl); padding: var(--s-3) var(--s-4); color: var(--c-ink); font-size: var(--t-sm); font-family: inherit; width: 100%; max-width: 320px; min-height: 44px; display: flex; align-items: center; text-align: left; cursor: pointer; transition: background 0.15s; } button.v2-hint-card { cursor: pointer; } .v2-hint-card:hover { background: var(--c-loch-50); } .v2-messages { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); } /* -- 말풍선 공통 (Figma BubbleUser/Other/Nesy) -- */ .v2-bubble { max-width: 85%; border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); font-size: var(--t-base); line-height: 1.5; word-wrap: break-word; } /* -- 유저 말풍선 (Figma BubbleUser 15:2) -- */ /* 모서리 규칙: 우측 상단 4px, 나머지 16px (꼬리는 오른쪽 위) */ .v2-bubble-user { align-self: flex-end; background: var(--c-loch-500); color: #fff; border-top-right-radius: 4px; } /* -- 상대 말풍선 (Figma BubbleOther 15:4) -- */ /* 모서리 규칙: 좌측 상단 4px, 나머지 16px (꼬리는 왼쪽 위) */ .v2-bubble-other { align-self: flex-start; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-top-left-radius: 4px; display: flex; flex-direction: column; gap: var(--s-1); } .v2-bubble-other-name { font-size: var(--t-xs); font-weight: 500; color: var(--c-ink-faint); } .v2-bubble-other-body { color: var(--c-ink); } /* -- 네시 귀엣말 말풍선 (Figma BubbleNesy 16:19, state=with-actions | compact) -- */ /* 원칙: - 가로 full-width (메시지 영역을 좌우로 채움 — Figma Screen 2: w-full) - 배경은 한지색 계열 (surface-dim)로 분명히 구분 — 네시의 "속삭임" 레이어 - 점선 테두리 + 왼쪽 위 꼬리 4px + backdrop-blur */ .v2-bubble-nesy-whisper { align-self: stretch; width: 100%; max-width: none; background: rgba(241, 238, 232, 0.82); /* surface-dim + 약간의 투명도 */ -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); border-top-left-radius: 4px; padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); box-shadow: var(--shadow-sm); } .v2-bubble-nesy-header { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--c-ink-faint); } .v2-bubble-nesy-label { font-weight: 500; } .v2-bubble-nesy-body { color: var(--c-ink); font-size: var(--t-base); line-height: 1.5; } .v2-bubble-nesy-body p { margin: 0 0 var(--s-2); } .v2-bubble-nesy-body p:last-child { margin-bottom: 0; } .v2-bubble-nesy-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; } .v2-bubble-action { background: transparent; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); padding: var(--s-1) var(--s-3); font-size: var(--t-xs); font-weight: 500; color: var(--c-ink-dim); line-height: 1.4; transition: background 0.15s; } .v2-bubble-action:hover { background: var(--c-surface-dim); } .v2-bubble-action-primary { background: var(--c-loch-500); border-color: var(--c-loch-500); color: #fff; } .v2-bubble-action-primary:hover { background: var(--c-loch-600); } .v2-bubble-action-destructive { border-color: var(--c-dancheong-400); color: var(--c-dancheong-400); } /* -- 네시 직접 말풍선 (Figma BubbleNesyDirect 80:310) -- */ .v2-bubble-nesy-direct { align-self: flex-start; display: flex; align-items: flex-start; gap: var(--s-2); max-width: 95%; } .v2-bubble-nesy-direct .v2-nesy-avatar { border: 1px solid var(--c-loch-600); box-sizing: border-box; } .v2-bubble-nesy-direct-body { background: var(--c-surface); border: 1px solid var(--c-loch-500); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; min-width: 0; } .v2-bubble-nesy-direct-label { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-dim); } .v2-bubble-nesy-direct-text { color: var(--c-ink); font-size: var(--t-base); line-height: 1.5; } /* ═══════════════════════════════════════════════ ResultCard -- Figma Screen 3 (챗봇 응답 카드) ═══════════════════════════════════════════════ */ .v2-result-card { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; max-width: 343px; padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-loch-500); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); box-sizing: border-box; align-self: flex-start; } .v2-result-card-header { display: flex; align-items: center; gap: var(--s-2); min-height: 20px; } .v2-result-card-header img { flex: 0 0 16px; width: 16px; height: 16px; } .v2-result-card-label { flex: 1; font-size: var(--t-sm); color: var(--c-ink-dim); line-height: 1.5; } .v2-result-card-suffix { font-size: var(--t-xs); font-weight: 500; color: var(--c-ink-faint); line-height: 1.4; } /* ── Finance variant ────────────────────────── */ .v2-result-card-rows { display: flex; flex-direction: column; gap: var(--s-2); } .v2-result-card-row { font-size: var(--t-base); line-height: 1.55; color: var(--c-ink); } .v2-result-card-row-income { color: var(--c-jade-400); } .v2-result-card-row-expense { color: var(--c-dancheong-400); } .v2-result-card-divider { height: 1px; background: var(--c-loch-500); opacity: 0.35; } .v2-result-card-net { font-size: var(--t-lg); font-weight: 700; line-height: 1.35; color: var(--c-ink); } /* ── Schedule variant ───────────────────────── */ .v2-result-card-list { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; } /* -- 방 대화 컨텍스트 배너 (Figma Screen 2 context-banner 23:23) 흰 배경 + 아이콘 + 단일 breadcrumb 텍스트 (ink-faint 12px Medium). */ .v2-context-banner { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4); background: var(--c-surface); border-bottom: 1px solid var(--c-line); font-size: var(--t-xs); color: var(--c-ink-faint); overflow-x: auto; white-space: nowrap; } .v2-context-banner-icon { flex: 0 0 14px; width: 14px; height: 14px; display: block; } .v2-context-banner-path { font-weight: 500; line-height: 1.4; } /* -- 방 빈 상태 (demo 외 room_id용 placeholder) -- */ .v2-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-8) var(--s-4); text-align: center; } .v2-empty-state-title { font-size: var(--t-lg); font-weight: 600; color: var(--c-ink); margin: 0; } .v2-empty-state-sub { color: var(--c-ink-dim); margin: 0; } .v2-empty-state-link { display: inline-block; padding: var(--s-2) var(--s-4); border-radius: var(--r-md); background: var(--c-loch-500); color: #fff; font-weight: 500; font-size: var(--t-sm); } .v2-empty-state-link:hover { background: var(--c-loch-600); } .v2-empty-state-link-alt { background: transparent; color: var(--c-loch-600); border: 1px solid var(--c-loch-500); } .v2-empty-state-link-alt:hover { background: var(--c-loch-50); color: var(--c-loch-700); } /* ═══════════════════════════════════════════════ 반응형 -- 데스크탑 (≥ 1024px) ═══════════════════════════════════════════════ */ @media (min-width: 1024px) { .v2-main { margin-left: 280px; } .v2-drawer { transform: translateX(0); /* 드로어 상주 */ box-shadow: none; } .v2-drawer-close { display: none; } .v2-topbar-menu { display: none; } .v2-drawer-overlay { display: none; } /* 데스크탑: 드로어 헤더에 Brand가 이미 있으므로 topbar 브랜드는 숨김 */ .v2-topbar-brand { display: none; } .v2-topbar { height: 56px; padding: 0 var(--s-6); } .v2-composer { left: 280px; } /* 방 페이지의 고정 수신자 선택기도 드로어 폭만큼 들여쓰기 */ .v2-has-send-target .v2-send-target { left: 280px; } /* 데스크탑: 콘텐츠 세로 여백 보강 (Figma ThreadWrap padding-top 24) */ .v2-content { padding-top: var(--s-6); } } /* ═══════════════════════════════════════════════ 접근성 (ARIA) ═══════════════════════════════════════════════ */ .v2-drawer[aria-hidden="true"] { pointer-events: none; } .v2-drawer[aria-hidden="false"] { pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .v2-drawer, .v2-drawer-overlay, .v2-composer-input, .v2-composer-send, .v2-bubble-action { transition: none; } } /* ═══════════════════════════════════════════════ Auth (로그인 / 회원가입) ═══════════════════════════════════════════════ */ body.v2-auth-body { background: var(--c-surface-dim); min-height: 100vh; min-height: 100dvh; } .v2-auth-main { min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: var(--s-4) var(--s-3); padding-top: calc(var(--safe-top, 0px) + var(--s-4)); padding-bottom: calc(var(--safe-bottom, 0px) + var(--s-4)); box-sizing: border-box; } .v2-auth-shell { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--s-4); } .v2-auth-container { display: flex; flex-direction: column; gap: var(--s-4); } .v2-auth-login { padding-top: var(--s-4); } .v2-auth-logo { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin-top: var(--s-6); margin-bottom: var(--s-2); } .v2-auth-logo img { display: block; width: 96px; height: 96px; } .v2-auth-brand { font-size: 22px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.02em; } .v2-auth-tagline { font-size: 13px; color: var(--c-ink-dim); letter-spacing: -0.01em; } .v2-auth-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .v2-auth-alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: 14px; line-height: 1.5; } .v2-auth-alert-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; } .v2-auth-alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; } .v2-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: var(--s-3) var(--s-4); border: 1px solid transparent; border-radius: var(--r-md); font-size: 15px; font-weight: 500; font-family: inherit; letter-spacing: -0.01em; cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; box-sizing: border-box; } .v2-auth-btn:disabled { opacity: .5; cursor: not-allowed; } .v2-auth-btn-primary { background: var(--c-loch-500); color: #FFFFFF; } .v2-auth-btn-primary:hover:not(:disabled) { background: var(--c-loch-600); } .v2-auth-btn-secondary { background: var(--c-surface); border-color: var(--c-loch-500); color: var(--c-loch-700); } .v2-auth-btn-secondary:hover:not(:disabled) { background: var(--c-loch-50); } .v2-auth-btn-ghost { background: transparent; color: var(--c-ink-dim); border-color: var(--c-line-strong); } .v2-auth-btn-ghost:hover:not(:disabled) { background: var(--c-surface-dim); color: var(--c-ink); } .v2-auth-btn-google { background: var(--c-surface); border-color: var(--c-line-strong); color: var(--c-ink); } .v2-auth-btn-google:hover:not(:disabled) { background: var(--c-surface-dim); } .v2-auth-btn-lg { min-height: 52px; font-size: 16px; font-weight: 600; } .v2-auth-divider { display: flex; align-items: center; gap: var(--s-3); color: var(--c-ink-faint); font-size: 12px; margin: var(--s-1) 0; } .v2-auth-divider::before, .v2-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); } .v2-auth-form { display: flex; flex-direction: column; gap: var(--s-3); } .v2-auth-field { display: flex; flex-direction: column; gap: var(--s-1); } .v2-auth-label { font-size: 13px; font-weight: 500; color: var(--c-ink-dim); } .v2-auth-input { width: 100%; min-height: 44px; padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-ink); font-size: 15px; font-family: inherit; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .v2-auth-input::placeholder { color: var(--c-ink-faint); } .v2-auth-input:focus { outline: none; border-color: var(--c-loch-500); box-shadow: 0 0 0 3px rgba(27, 107, 125, 0.12); } .v2-auth-input-mono { font-family: "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; } select.v2-auth-input { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235A5A6E' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-4) center; padding-right: calc(var(--s-4) * 2); } .v2-auth-hint { font-size: 12px; color: var(--c-ink-faint); margin: 0; } .v2-auth-hint-error { color: #B91C1C; } .v2-auth-forgot { text-align: center; padding-top: var(--s-2); } .v2-auth-forgot a { font-size: 13px; color: var(--c-ink-dim); } .v2-auth-bottom { text-align: center; font-size: 14px; color: var(--c-ink-dim); padding: var(--s-2) 0; } .v2-auth-bottom a { color: var(--c-loch-600); font-weight: 600; margin-left: var(--s-1); } .v2-auth-footer { display: flex; justify-content: center; align-items: center; gap: var(--s-2); font-size: 12px; color: var(--c-ink-faint); padding: var(--s-3) 0 var(--s-4); } .v2-auth-footer a { color: var(--c-ink-dim); } /* ═══════════════════════════════════════════════ Signup (대화형 단계) ═══════════════════════════════════════════════ */ .v2-auth-signup { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; } .v2-signup-header { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-2); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); position: sticky; top: var(--s-2); z-index: 10; } .v2-signup-back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--c-ink-dim); font-size: 24px; line-height: 1; text-decoration: none; flex-shrink: 0; } .v2-signup-back:hover { background: var(--c-surface-dim); color: var(--c-ink); } .v2-signup-progress { flex: 1; display: flex; flex-direction: column; gap: var(--s-1); } .v2-signup-progress-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); } .v2-signup-progress-label { font-size: 13px; font-weight: 500; color: var(--c-ink); } .v2-signup-progress-counter { font-size: 12px; color: var(--c-ink-faint); font-variant-numeric: tabular-nums; } .v2-signup-progress-track { height: 4px; background: var(--c-line); border-radius: 999px; overflow: hidden; } .v2-signup-progress-fill { height: 100%; background: var(--c-loch-500); border-radius: 999px; transition: width .3s ease; } .v2-signup-alert { margin: 0; } .v2-signup-body { display: flex; flex-direction: column; gap: var(--s-3); } .v2-signup-history { display: flex; flex-direction: column; gap: var(--s-3); } .v2-signup-history-item { opacity: 0.7; } .v2-signup-user-row { display: flex; justify-content: flex-end; padding-left: var(--s-6); } .v2-signup-user-row .v2-bubble-user { max-width: 85%; } .v2-signup-step { display: none; flex-direction: column; gap: var(--s-3); } .v2-signup-step-active { display: flex; } .v2-signup-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .v2-signup-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } .v2-signup-options-v { display: flex; flex-direction: column; gap: var(--s-2); } .v2-signup-option { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); min-height: 52px; padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-ink); font-size: 15px; font-family: inherit; cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease; } .v2-signup-options:not(.v2-signup-options-v) .v2-signup-option { align-items: center; justify-content: center; text-align: center; } .v2-signup-option:hover { background: var(--c-loch-50); border-color: var(--c-loch-500); } .v2-signup-option-selected { background: var(--c-loch-50); border-color: var(--c-loch-500); color: var(--c-loch-700); } .v2-signup-option-title { font-weight: 600; font-size: 15px; } .v2-signup-option-sub { font-size: 12px; color: var(--c-ink-faint); } .v2-signup-option-selected .v2-signup-option-sub { color: var(--c-loch-600); } .v2-signup-sub { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--c-line); } .v2-signup-sub-label { margin: 0; font-size: 13px; color: var(--c-ink-dim); } .v2-signup-hint { display: block; margin-top: var(--s-1); font-size: 12px; color: var(--c-ink-faint); font-weight: 400; } .v2-signup-back-link { background: transparent; border: none; font-family: inherit; font-size: 13px; color: var(--c-ink-faint); cursor: pointer; padding: var(--s-1); align-self: center; margin-top: var(--s-1); } .v2-signup-back-link:hover { color: var(--c-ink-dim); text-decoration: underline; } .v2-signup-actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-2); margin-top: var(--s-1); } .v2-signup-actions-3 { grid-template-columns: 1fr 1fr 1fr; } .v2-signup-summary { background: var(--c-surface-dim); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); } .v2-signup-summary-title { font-size: 12px; font-weight: 600; color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-1); } .v2-signup-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-1) 0; font-size: 14px; } .v2-signup-summary-k { color: var(--c-ink-dim); flex-shrink: 0; } .v2-signup-summary-v { color: var(--c-ink); font-weight: 500; text-align: right; word-break: break-all; } .v2-signup-check { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; cursor: pointer; font-size: 14px; color: var(--c-ink); } .v2-signup-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .v2-signup-check-box { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); flex-shrink: 0; transition: background .15s ease, border-color .15s ease; } .v2-signup-check input[type="checkbox"]:checked + .v2-signup-check-box { background: var(--c-loch-500); border-color: var(--c-loch-500); } .v2-signup-check input[type="checkbox"]:checked + .v2-signup-check-box::after { content: ""; width: 6px; height: 11px; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(45deg) translate(-1px, -1px); } .v2-signup-check-label { flex: 1; display: inline-flex; align-items: baseline; gap: var(--s-2); } .v2-signup-check-req { font-size: 12px; color: var(--c-loch-600); font-weight: 500; } .v2-signup-check-opt { font-size: 12px; color: var(--c-ink-faint); } .v2-signup-check-link { color: var(--c-ink-faint); font-size: 18px; line-height: 1; padding: var(--s-1); flex-shrink: 0; } .v2-signup-check-link:hover { color: var(--c-ink-dim); } .v2-signup-check-all { padding: var(--s-2) 0; } .v2-signup-check-all .v2-signup-check-label { font-weight: 600; } .v2-signup-check-divider { height: 1px; background: var(--c-line); margin: var(--s-1) 0; } .v2-signup-bottom { text-align: center; font-size: 14px; color: var(--c-ink-dim); padding: var(--s-2) 0 var(--s-4); } .v2-signup-bottom a { color: var(--c-loch-600); font-weight: 600; margin-left: var(--s-1); } @media (min-width: 480px) { .v2-signup-options { grid-template-columns: 1fr 1fr; } }