/* ========================================================= Daeryun Songmu · Toss-inspired Design System ========================================================= */ /* ─── Top progress bar (페이지 이동 로딩) ─── */ .top-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--primary); z-index: 9999; transform: scaleX(0); transform-origin: left; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms; pointer-events: none; box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 45%, transparent); } .top-progress[hidden] { display: none; } /* ─── Native-app 같은 페이지 전환 (cross-fade) ─── Same-origin MPA 페이지 이동 시 흰 화면 깜빡임 대신 부드러운 페이드. Chrome 115+, Safari 18+, Android Chrome 모두 지원. 미지원 브라우저는 무시. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } :root { /* Motion tokens (Toss feel) */ --ease-out-toss: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-toss: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; --dur-4: 520ms; /* Brand */ --primary: #3182F6; --primary-strong: #1B64DA; --primary-soft: #E8F3FF; /* 장식용 주색과 읽고 누르는 색을 분리한다. 스킨 변경 시에도 함께 계산된다. */ --link-color: color-mix(in srgb, var(--primary) 55%, var(--text)); --button-primary-bg: var(--primary); /* 새 채팅 칩과 같은 파랑 */ --button-primary-hover: var(--primary-strong); --button-primary-fg: #FFFFFF; /* Neutrals (Toss palette) */ --bg: #F9FAFB; --surface: #FFFFFF; --surface-2: #F2F4F6; --border: #F2F4F6; --border-strong: #E5E8EB; /* Text */ --text: #191F28; --text-secondary: #4E5968; --text-muted: #8B95A1; --text-disabled: #B0B8C1; /* Semantic */ --success: #05C26A; --success-soft: #E7F8EE; --warning: #FF9A32; --warning-soft: #FFF4E5; --danger: #F04452; --danger-soft: #FEECEE; /* Solid(강조 배경) 위에 얹는 글자 — 파랑/검정 배경 위라 두 테마 모두 흰색 */ --on-solid: #FFFFFF; /* 노랑·주황 위 글자. 밝은 색이라 두 테마 모두 어두운 글자를 얹는다 */ --on-accent: #191F28; /* Tints — 배지·칩·상태 표시의 배경/글자 쌍. 라이트는 파스텔 배경 + 진한 글자, 다크는 반투명 배경 + 밝은 글자. */ --tint-blue-bg: #E8F3FF; --tint-blue-fg: #1D4ED8; --tint-red-bg: #FEE2E2; --tint-red-fg: #B91C1C; --tint-amber-bg: #FFF4E5; --tint-amber-fg: #B45309; --tint-green-bg: #ECFDF5; --tint-green-fg: #047857; --tint-teal-bg: #CCFBF1; --tint-teal-fg: #0F766E; --tint-violet-bg: #F3E8FF; --tint-violet-fg: #7C3AED; --tint-gray-bg: #E5E7EB; --tint-gray-fg: #374151; /* 강조 원색 — 틴트를 rgba 로 직접 그리는 자리에서 쓴다 */ --accent-teal: #14B8A6; --accent-amber: #F59E0B; --accent-rose: #F43F5E; --accent-violet: #8B5CF6; /* 오버레이 — 모달 뒷막, 본문 위 캡션 */ --overlay: rgba(15, 22, 33, 0.5); --overlay-strong: rgba(15, 22, 33, 0.72); /* 입력 필드 — 다크에서는 표면보다 한 단 낮게 파인다 */ --editor-accent: #1A4FD1; --field: #FFFFFF; --field-border: #D0D4DC; /* Elevation (Toss keeps it FLAT) */ --shadow-1: none; --shadow-2: 0 2px 8px rgba(10, 20, 35, 0.04); --shadow-3: 0 10px 30px rgba(10, 20, 35, 0.08); /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* Layout */ --header-h: 56px; --bottom-nav-h: 64px; --sidebar-w: 240px; --content-max: 1280px; } /* ═════════════════════════════════════════════════════════════ 다크 테마 토큰만 갈아끼운다 — 규칙은 라이트와 한 벌을 공유한다. 컴포넌트마다 다크 전용 규칙을 따로 두면 둘이 조금씩 어긋나기 시작하기 때문. 적용은 으로 한다. · 값 없음 → 시스템 설정을 따른다 (아래 @media 블록) · "dark" → 항상 어둡게 · "light" → 항상 밝게. @media 가 이기지 못하도록 :not 으로 막는다. 다크 값 자체는 --d-* 에 한 번만 적어 두고, 두 진입점은 그 값을 대입만 한다. 색을 고칠 때 두 곳을 맞춰 고쳐야 하는 일을 없애려는 것. ═════════════════════════════════════════════════════════════ */ :root { --d-bg: #16181D; --d-surface: #1E2026; --d-surface-2: #262A32; --d-border: #2C3038; --d-border-strong: #3A3F4A; /* 어두운 배경 위에서는 같은 파랑이 탁해 보인다 — 한 단 밝게 올린다 */ --d-primary: #4B93FF; --d-primary-strong: #7FB2FF; --d-primary-soft: rgba(75, 147, 255, 0.16); --d-text: #E9EBEF; --d-text-secondary: #A6ADBA; --d-text-muted: #79818F; --d-text-disabled: #565D69; --d-success: #2ED37F; --d-warning: #FFAE4D; --d-danger: #FF6B75; --d-tint-blue-bg: rgba(75, 147, 255, 0.16); --d-tint-blue-fg: #8FBCFF; --d-tint-red-bg: rgba(255, 107, 117, 0.16); --d-tint-red-fg: #FF9CA4; --d-tint-amber-bg: color-mix(in srgb, var(--accent-amber) 16%, transparent); --d-tint-amber-fg: #FFC46B; --d-tint-green-bg: rgba(46, 211, 127, 0.14); --d-tint-green-fg: #5FDCA0; --d-tint-teal-bg: color-mix(in srgb, var(--accent-teal) 16%, transparent); --d-tint-teal-fg: #5EE0CE; --d-tint-violet-bg: color-mix(in srgb, var(--accent-violet) 20%, transparent); --d-tint-violet-fg: #C0A6FF; --d-tint-gray-bg: rgba(255, 255, 255, 0.08); --d-tint-gray-fg: #B4BCC8; /* 그림자는 어두운 배경에서 묻힌다 — 더 짙게 깔고 표면 경계에 기댄다 */ --d-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.32); --d-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.44); --d-editor-accent: #7FB2FF; --d-field: #22252C; --d-field-border: #3A3F4A; --d-overlay: rgba(0, 0, 0, 0.60); --d-overlay-strong: rgba(0, 0, 0, 0.78); } /* 아래 두 블록은 같은 대입 목록이다 — CSS 로는 @media 안팎을 한 셀렉터로 묶을 수 없어 어쩔 수 없이 두 벌이다. 값은 위 --d-* 한 곳에만 있다. */ :root[data-theme="dark"] { color-scheme: dark; --button-primary-bg: color-mix(in srgb, var(--primary) 80%, #fff); --button-primary-hover: color-mix(in srgb, var(--primary) 70%, #fff); --button-primary-fg: #101820; --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --border: var(--d-border); --border-strong: var(--d-border-strong); --primary: var(--d-primary); --primary-strong: var(--d-primary-strong); --primary-soft: var(--d-primary-soft); --text: var(--d-text); --text-secondary: var(--d-text-secondary); --text-muted: var(--d-text-muted); --text-disabled: var(--d-text-disabled); --success: var(--d-success); --warning: var(--d-warning); --danger: var(--d-danger); --success-soft: var(--d-tint-green-bg); --warning-soft: var(--d-tint-amber-bg); --danger-soft: var(--d-tint-red-bg); --tint-blue-bg: var(--d-tint-blue-bg); --tint-blue-fg: var(--d-tint-blue-fg); --tint-red-bg: var(--d-tint-red-bg); --tint-red-fg: var(--d-tint-red-fg); --tint-amber-bg: var(--d-tint-amber-bg); --tint-amber-fg: var(--d-tint-amber-fg); --tint-green-bg: var(--d-tint-green-bg); --tint-green-fg: var(--d-tint-green-fg); --tint-teal-bg: var(--d-tint-teal-bg); --tint-teal-fg: var(--d-tint-teal-fg); --tint-violet-bg: var(--d-tint-violet-bg); --tint-violet-fg: var(--d-tint-violet-fg); --tint-gray-bg: var(--d-tint-gray-bg); --tint-gray-fg: var(--d-tint-gray-fg); --shadow-2: var(--d-shadow-2); --shadow-3: var(--d-shadow-3); --editor-accent: var(--d-editor-accent); --field: var(--d-field); --field-border: var(--d-field-border); --overlay: var(--d-overlay); --overlay-strong: var(--d-overlay-strong); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --button-primary-bg: color-mix(in srgb, var(--primary) 80%, #fff); --button-primary-hover: color-mix(in srgb, var(--primary) 70%, #fff); --button-primary-fg: #101820; --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --border: var(--d-border); --border-strong: var(--d-border-strong); --primary: var(--d-primary); --primary-strong: var(--d-primary-strong); --primary-soft: var(--d-primary-soft); --text: var(--d-text); --text-secondary: var(--d-text-secondary); --text-muted: var(--d-text-muted); --text-disabled: var(--d-text-disabled); --success: var(--d-success); --warning: var(--d-warning); --danger: var(--d-danger); --success-soft: var(--d-tint-green-bg); --warning-soft: var(--d-tint-amber-bg); --danger-soft: var(--d-tint-red-bg); --tint-blue-bg: var(--d-tint-blue-bg); --tint-blue-fg: var(--d-tint-blue-fg); --tint-red-bg: var(--d-tint-red-bg); --tint-red-fg: var(--d-tint-red-fg); --tint-amber-bg: var(--d-tint-amber-bg); --tint-amber-fg: var(--d-tint-amber-fg); --tint-green-bg: var(--d-tint-green-bg); --tint-green-fg: var(--d-tint-green-fg); --tint-teal-bg: var(--d-tint-teal-bg); --tint-teal-fg: var(--d-tint-teal-fg); --tint-violet-bg: var(--d-tint-violet-bg); --tint-violet-fg: var(--d-tint-violet-fg); --tint-gray-bg: var(--d-tint-gray-bg); --tint-gray-fg: var(--d-tint-gray-fg); --shadow-2: var(--d-shadow-2); --shadow-3: var(--d-shadow-3); --editor-accent: var(--d-editor-accent); --field: var(--d-field); --field-border: var(--d-field-border); --overlay: var(--d-overlay); --overlay-strong: var(--d-overlay-strong); } } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; min-width: 0; } html { max-width: 100vw; } body { overflow-x: clip; } body { font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Noto Sans KR', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; } a { color: var(--link-color); text-decoration: none; } a:hover { text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } :where(a, button, [role="button"]):focus-visible { outline: 2px solid var(--link-color); outline-offset: 3px; } input, select, textarea { font-family: inherit; } /* ========================================================= App Shell ========================================================= */ .app { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-w) 1fr; } .app.no-chrome { grid-template-columns: 1fr; } /* 로그인처럼 사이드바가 없는 화면은 콘텐츠를 뷰포트 정중앙에 둔다 */ .app.no-chrome .main { padding: 24px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; } /* Desktop sidebar */ .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 24px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; } .sidebar .brand { padding: 4px 12px 20px; font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: -0.01em; } /* ─── 테마별 로고 ─── 락업의 'SKYZ' 는 먹색(#0B1220)이라 어두운 배경에서 그대로 사라진다. img 안의 색은 바깥 CSS 로 바꿀 수 없고, SVG 파일 안에 미디어쿼리를 넣어도 그건 OS 설정만 따를 뿐 우리 [어둡게/밝게] 선택을 모른다. 그래서 흰색 락업을 따로 걸어 두고 어느 쪽을 보여줄지만 CSS 가 정한다. */ .brand-logo-light { display: block; } .brand-logo-dark { display: none; } :root[data-theme="dark"] .brand-logo-light { display: none; } :root[data-theme="dark"] .brand-logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo-light { display: none; } :root:not([data-theme="light"]) .brand-logo-dark { display: block; } } /* 크기만 여기서 잡는다 — display 까지 여기서 다시 정하면 특이성이 위 규칙을 이겨서 두 로고가 한꺼번에 보인다. */ .sidebar .brand .brand-logo { /* 락업이 4.44:1 이라 폭(184px)에 맞추면 세로가 너무 작아진다. 높이로 맞춘다. 34px → 폭 151px, SKYZAI 잉크 21.9px — 글자 크기를 옛 로고(22.5px)에 맞춘 값이다. 40px 로 두면 폭이 178px 이 되어 사이드바에서 지나치게 커 보인다. brand/README.md 참고 */ height: 34px; width: auto; } .sidebar .brand small { display: block; font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 6px; } .sidebar .nav-group { display: flex; flex-direction: column; gap: 2px; /* 그룹 라벨이 붙어 세로가 길어졌다. 낮은 창에서는 nav 만 스크롤하고 브랜드·footer 는 제자리에 남긴다 (footer 의 margin-top:auto 유지). */ min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sidebar .nav-group::-webkit-scrollbar { width: 6px; } .sidebar .nav-group::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* 대메뉴 묶음 */ .sidebar .nav-sec { display: flex; flex-direction: column; gap: 2px; } .sidebar .nav-sec + .nav-sec { margin-top: 14px; } .sidebar .nav-sec-label { padding: 0 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); } /* `.nav-sec + .nav-sec` 보다 약하면 margin 이 안 먹는다 — 클래스를 겹쳐 특정도를 맞춘다 */ .sidebar .nav-sec.nav-sec-tail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .sidebar .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text-secondary); font-size: 14px; font-weight: 500; transition: background 0.12s; } .sidebar .nav-item:hover { background: var(--surface-2); color: var(--text); } .sidebar .nav-item.active { background: var(--primary-soft); color: var(--link-color); font-weight: 600; } .sidebar .nav-item .ico { flex-shrink: 0; } /* Notification badge (sidebar + mobile bottom nav) */ .notif-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: var(--on-solid); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; } .notif-badge[hidden] { display: none; } .sidebar .nav-item .notif-badge { margin-left: auto; } .mobile-bottom-nav a { position: relative; } .mobile-bottom-nav a .notif-badge { position: absolute; top: 6px; left: calc(50% + 2px); /* 아이콘 우측상단에 살짝 겹치는 위치 */ right: auto; transform: none; min-width: 16px; height: 16px; font-size: 10px; border: 2px solid var(--surface); } /* ─── Toast (실시간 알림) ─── */ .toast-stack { position: fixed; top: 16px; right: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 380px; width: calc(100% - 32px); } .toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(10, 20, 35, 0.12), 0 2px 8px rgba(10, 20, 35, 0.06); cursor: pointer; animation: toast-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1); } .toast.is-removing { animation: toast-out 220ms ease-in forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { to { opacity: 0; transform: translateX(20px); } } .toast-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; } .toast-icon .ico { width: 18px; height: 18px; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .toast-close { flex-shrink: 0; width: 24px; height: 24px; background: transparent; border: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; } .toast-close:hover { background: var(--surface-2); color: var(--text); } @media (max-width: 768px) { .toast-stack { top: calc(var(--header-h) + 8px); left: 12px; right: 12px; max-width: none; width: auto; } } /* Notifications page — push 토글 */ .push-card { padding: 16px 18px; margin-bottom: 12px; } .push-row { display: flex; align-items: center; gap: 12px; } .push-info { flex: 1; min-width: 0; } .push-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px; } .push-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .push-error { margin-top: 12px; padding: 10px 12px; background: var(--tint-red-bg); color: var(--tint-red-fg); border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.5; word-break: break-word; } .push-error[hidden] { display: none; } .push-test-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .push-test-row[hidden] { display: none; } .push-test-result { font-size: 12px; color: var(--text-muted); } .push-test-result.success { color: var(--tint-green-fg); font-weight: 600; } .push-test-result.fail { color: var(--tint-red-fg); font-weight: 600; } .push-diag { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .push-diag b { color: var(--text-secondary); font-weight: 700; margin-right: 4px; } @media (max-width: 600px) { .push-row { flex-direction: column; align-items: stretch; } .push-info { margin-bottom: 4px; } .push-row .btn { width: 100%; } } /* Notifications page — Toss-style */ .notif-list { display: flex; flex-direction: column; gap: 10px; } .notif-item { position: relative; display: flex; align-items: stretch; gap: 10px; padding: 16px 16px 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: transform 60ms var(--ease-out-toss), background 120ms; } .notif-item:active { transform: scale(0.99); background: var(--surface-2); } .notif-item:hover { background: var(--surface-2); } /* 메인 영역 (아이콘 + 본문) — 카드 내 in-app 이동 링크 */ .notif-main { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: flex-start; color: inherit; text-decoration: none; } /* "바로가기" 외부 링크 버튼 — 대륜탑(aegis) 새 탭 */ .notif-open-ext { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; border: 1px solid var(--border); transition: background 120ms, color 120ms, border-color 120ms; white-space: nowrap; } .notif-open-ext:hover { background: var(--tint-blue-bg); color: var(--primary); border-color: var(--primary); } .notif-open-ext .ico { width: 12px; height: 12px; } /* 모바일: 텍스트 숨기고 아이콘만 표시 (원형 버튼) */ @media (max-width: 600px) { .notif-open-ext { padding: 8px; gap: 0; border-radius: 50%; } .notif-open-ext-label { display: none; } .notif-open-ext .ico { width: 14px; height: 14px; } } /* unread: 좌측 작은 점으로 표시 (배경/테두리 변경 X — 토스 패턴) */ .notif-item.unread::before { content: ""; position: absolute; top: 22px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .notif-item.unread .notif-title { font-weight: 700; } .notif-item .notif-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); } .notif-item .notif-ico .ico { width: 20px; height: 20px; } /* 분석 모드별 아이콘 색상 (kind 는 analysis_done / analysis_error 만 있어 mode chip 으로 추가 구분) */ .notif-item.kind-analysis_error .notif-ico { background: var(--tint-red-bg); color: var(--tint-red-fg); } .notif-item.kind-analysis_done .notif-ico { background: var(--tint-blue-bg); color: var(--primary); } .notif-item.mode-strategy .notif-ico { background: var(--tint-amber-bg); color: var(--tint-amber-fg); } .notif-item.mode-precedent .notif-ico { background: var(--tint-green-bg); color: var(--tint-green-fg); } .notif-item.mode-evidence .notif-ico { background: var(--tint-violet-bg); color: var(--tint-violet-fg); } .notif-item.mode-full .notif-ico { background: var(--tint-blue-bg); color: var(--primary); } .notif-item.mode-management .notif-ico { background: var(--tint-teal-bg); color: var(--tint-teal-fg); } .notif-item .notif-body { flex: 1; min-width: 0; } .notif-item .notif-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; } .notif-item .notif-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.35; } .notif-item .notif-mode-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); letter-spacing: -0.01em; white-space: nowrap; } .notif-item.mode-strategy .notif-mode-chip { background: var(--tint-amber-bg); color: var(--tint-amber-fg); } .notif-item.mode-precedent .notif-mode-chip { background: var(--tint-green-bg); color: var(--tint-green-fg); } .notif-item.mode-evidence .notif-mode-chip { background: var(--tint-violet-bg); color: var(--tint-violet-fg); } .notif-item.mode-full .notif-mode-chip { background: var(--tint-blue-bg); color: var(--primary-strong); } .notif-item.mode-management .notif-mode-chip { background: var(--tint-teal-bg); color: var(--tint-teal-fg); } .notif-item.mode-change .notif-mode-chip { background: var(--tint-amber-bg); color: var(--tint-amber-fg); } .notif-item .notif-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 6px; word-break: break-word; } .notif-item .notif-time { font-size: 12px; color: var(--text-disabled); font-variant-numeric: tabular-nums; } .notif-empty { text-align: center; padding: 60px 16px; color: var(--text-muted); font-size: 14px; } /* 페이지 타이틀 옆 액션 */ .notif-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* 알림 분류 탭 — 토스 segmented control */ .notif-tabs { display: flex; gap: 4px; padding: 4px; margin: 12px 0 16px; background: var(--surface-2); border-radius: 12px; } .notif-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .notif-tab:hover { color: var(--text); } .notif-tab.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .notif-tab-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 18px; text-align: center; } .notif-tab.is-active .notif-tab-count { background: var(--primary-soft); color: var(--primary-strong); } @media (max-width: 480px) { .notif-tab { padding: 8px 10px; font-size: 12.5px; } .notif-tab-count { font-size: 10.5px; } } .btn-text { font-size: 13px; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; padding: 8px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 120ms, color 120ms; } .btn-text:hover { background: var(--surface-2); color: var(--text); } .btn-text:active { background: var(--border); } .btn-text:disabled { opacity: 0.4; cursor: default; } /* "분석중" chip — used on case list rows + detail page header */ .analyzing-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; background: var(--primary-soft, #eff6ff); color: var(--primary-strong, #1d4ed8); font-size: 11px; font-weight: 600; line-height: 1.4; border: 1px solid color-mix(in srgb, var(--primary-strong, #1d4ed8) 25%, transparent); } .analyzing-chip[hidden] { display: none; } .spinner-sm { display: inline-block; width: 9px; height: 9px; border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; } .sidebar .footer { margin-top: auto; padding: 14px 12px 0; margin-bottom: -14px; /* 사이드바 아래 여백(24px)을 10px 로 — 프로필 묶음을 바닥 쪽으로 붙인다 */ font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); } /* 사이드바 신원 줄 — [사진] [직책·이름 / 사번]. .who 는 예전에 홀로 서던 블록이라 아래 여백을 갖고 있었다. 이제 사번과 한 묶음이 되므로 그 여백은 묶음 바깥(.me-row)이 갖는다. */ .sidebar .footer .me-row { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; /* 줄 전체가 [내 정보] 링크. 글자색은 안쪽(.who/.me-id)이 각자 정하므로 여기서는 밑줄만 없앤다. 눌리는 자리라는 표시는 hover 에서 이름이 진해지고 사진에 테가 생기는 것으로 충분하다 — 배경을 깔면 하단 버튼 셋과 같은 모양이 되어 신원 줄이 아니라 넷째 버튼처럼 보인다. */ text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; } .sidebar .footer .me-row:hover .who { color: var(--text); } .sidebar .footer .me-row:hover .me-avatar { box-shadow: 0 0 0 2px var(--primary); } .sidebar .footer .me-row.is-on .who { color: var(--primary); } .sidebar .footer .me-lines { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sidebar .footer .me-id { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar .footer .who { font-weight: 600; color: var(--text-secondary); font-size: 13px; display: flex; align-items: center; gap: 4px; /* 이름이 길면 줄바꿈 대신 잘린다. 두 줄로 접히면 아래 사번 줄과 붙어 신원 블록이 세 줄이 된다. */ white-space: nowrap; overflow: hidden; } /* 사진 자리. 비어 있어도 원을 그린다 — 빈칸을 두면 여기에 사진을 넣을 수 있다는 것을 아무도 모른다. 줄 전체(.me-row)가 내 정보로 가는 링크다. */ .sidebar .footer .me-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; padding: 0; border: 0; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; transition: box-shadow var(--dur-1, 120ms) ease, transform var(--dur-1, 120ms) ease; } .sidebar .footer .me-row:active .me-avatar { transform: scale(0.94); } .sidebar .footer .me-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .sidebar .footer a { color: var(--text-secondary); font-size: 12px; } /* 사이드바 footer 의 버튼형 링크 (설정 등) — 옆의 와 톤을 맞춤 */ .sidebar .footer .footer-link { display: flex; align-items: center; gap: 6px; margin-top: 8px; width: fit-content; background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; } .sidebar .footer .footer-link:hover { color: var(--text); } /* 어드민·설정·로그아웃 — 세로로 두되 줄마다 숨 쉴 간격을 준다. 붙어 있으면 잘못 누르기 쉽다. */ .sidebar .footer .footer-actions { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .sidebar .footer .footer-actions .footer-link { width: 100%; margin-top: 0; gap: 8px; padding: 3px 10px; border-radius: 8px; /* 줄 높이를 못박는다 — button 은 브라우저 기본(normal), a 는 본문 값을 물려받아 같은 클래스인데 높이가 갈렸다(31px·36px). 위아래 3px·줄 사이 2px 인 이유: 이 묶음이 커지면 그만큼 위의 메뉴가 가려진다. 어드민 계정은 버튼이 셋이라 8px 여백이면 '매뉴얼' 이 26px(거의 전부) 가려졌다(높이 925px 실측). 사이드바 아래 여백을 줄여 얻은 자리(위 .footer 의 margin-bottom)는 버튼이 아니라 메뉴에 준다. */ font-size: 13px; line-height: 18px; } .sidebar .footer .footer-actions .footer-link:hover { background: var(--surface-2); } /* Main content */ .main { padding: 28px 32px 64px; max-width: var(--content-max); width: 100%; margin: 0 auto; } /* Mobile top header */ .mobile-header { display: none; } .mobile-bottom-nav { display: none; } /* ========================================================= Page header ========================================================= */ .page-title { font-size: 32px; font-weight: 800; color: var(--text); letter-spacing: -0.035em; margin-bottom: 10px; line-height: 1.25; } .fav-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: transparent; color: var(--text-disabled); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; flex-shrink: 0; } .fav-btn:hover { background: var(--surface-2); color: var(--accent-amber); } .fav-btn.is-fav { color: var(--accent-amber); } .fav-btn.is-fav:hover { transform: scale(1.05); } .fav-btn:disabled { opacity: 0.5; cursor: default; } .fav-btn .ico { width: 22px; height: 22px; } .fav-btn-sm { width: 28px; height: 28px; } .fav-btn-sm .ico { width: 18px; height: 18px; } .page-subtitle { color: var(--text-muted); font-size: 15px; font-weight: 500; margin-bottom: 28px; letter-spacing: -0.01em; } .page-subtitle strong { color: var(--text-secondary); font-weight: 600; } .page-subtitle code { background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-sm); font-size: 12px; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .page-subtitle-meta { color: var(--text-muted); font-weight: 500; } .page-subtitle-meta::before { content: ' · '; } /* ========================================================= Action tile grid (Toss home menu style) ========================================================= */ .tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 768px) { .tile-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; } .tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; } } .tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; background: transparent; border-radius: 16px; border: none; cursor: pointer; transition: background 0.12s, transform 0.08s; text-align: center; } .tile { border: 1px solid transparent; transition: border-color 0.15s, background 0.15s; } .tile:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 18%, transparent); } .tile:active { transform: scale(0.95); } .tile:focus-visible { outline: none; border-color: var(--primary); } .tile .tile-ico { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tile .tile-ico svg { width: 24px; height: 24px; } .tile .tile-ico.blue { background: var(--primary-soft); color: var(--primary-strong); } .tile .tile-ico.green { background: var(--success-soft); color: var(--success); } .tile .tile-ico.orange { background: var(--warning-soft); color: var(--warning); } .tile .tile-ico.red { background: var(--danger-soft); color: var(--danger); } .tile .tile-label { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.35; word-break: keep-all; overflow-wrap: normal; } /* Section header */ .section-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; } .section-bar .section-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); } .section-bar .section-title .ico { color: var(--primary); } /* ========================================================= Card (Toss: flat, spacious, no borders) ========================================================= */ .card { background: var(--surface); border-radius: 20px; padding: 28px; margin-bottom: 16px; overflow-wrap: anywhere; word-break: break-word; } .card.flush { padding: 0; } .card.accent { background: var(--primary-soft); } .card h2 { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.025em; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .card h2 .count { font-size: 13px; font-weight: 700; color: var(--primary-strong); background: var(--primary-soft); padding: 3px 10px; border-radius: var(--r-pill); letter-spacing: 0; } .card h2 .ico { color: var(--primary); } .card h3 { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 18px 0 10px; letter-spacing: -0.01em; } .card h3:first-child { margin-top: 0; } /* ========================================================= Grid ========================================================= */ .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ========================================================= Stat (Toss hero amount) ========================================================= */ .stat { background: var(--surface); border-radius: 20px; padding: 28px; position: relative; overflow: hidden; } .stat .label { font-size: 14px; color: var(--text-secondary); font-weight: 600; margin-bottom: 12px; letter-spacing: -0.01em; } .stat .num { font-size: 36px; font-weight: 800; color: var(--text); letter-spacing: -0.035em; line-height: 1.1; } .stat .num .unit { font-size: 18px; color: var(--text-muted); font-weight: 700; margin-left: 2px; letter-spacing: -0.02em; } /* 강조색 위의 글자는 버튼과 같은 토큰을 쓴다 — 다크(특히 미드나잇처럼 강조색이 밝은 스킨)에서는 흰 글자가 아니라 어두운 글자여야 읽힌다. 보조 글자는 currentColor 를 흐려서, 어느 테마든 본문 글자색을 따라간다. */ .stat.primary { background: var(--primary); color: var(--button-primary-fg, var(--on-solid)); } .stat.primary .label { color: color-mix(in srgb, currentColor 90%, transparent); } .stat.primary .num { color: inherit; } .stat.primary .num .unit { color: color-mix(in srgb, currentColor 85%, transparent); } /* ========================================================= Table ========================================================= */ table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; } .card table { word-break: break-word; } table th { text-align: left; padding: 10px 12px; font-weight: 600; color: var(--text-muted); font-size: 12px; border-bottom: 1px solid var(--border-strong); background: transparent; } table td { padding: 14px 12px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; vertical-align: middle; } table tr:last-child td { border-bottom: none; } table tr:hover td { background: var(--surface-2); } .kv-table th { text-transform: none; letter-spacing: 0; color: var(--text-muted); font-weight: 500; width: 110px; background: transparent; border-bottom: 1px solid var(--border); font-size: 13px; } .kv-table td { color: var(--text); font-weight: 500; font-size: 13px; } /* ========================================================= Button (Toss: one primary, rest ghost/text) ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 22px; border-radius: 14px; background: var(--button-primary-bg); color: var(--button-primary-fg) !important; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; transition: transform 0.08s ease, background 0.12s, opacity 0.12s; min-height: 48px; } .btn:hover:not(:disabled) { background: var(--button-primary-hover); } .btn:active:not(:disabled) { transform: scale(0.97); } .btn.secondary { background: var(--primary-soft); color: var(--link-color) !important; } .btn.secondary:hover:not(:disabled) { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--link-color); } .btn.ghost { background: transparent; color: var(--link-color) !important; min-height: unset; padding: 10px 14px; font-weight: 700; } .btn.ghost:hover:not(:disabled) { background: var(--primary-soft); } .btn.accent { background: var(--button-primary-bg); } .btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; border-radius: 10px; font-weight: 600; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-secondary); font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.12s, color 0.12s, transform 0.08s; border: none; letter-spacing: -0.01em; white-space: nowrap; } .chip:hover { background: var(--border-strong); color: var(--text); } .chip:active { transform: scale(0.97); } .chip.active, .chip.is-on { background: var(--text); color: var(--bg); } .chip.active:hover, .chip.is-on:hover { background: var(--text); color: var(--bg); } .card.accent .chip { background: var(--surface); color: var(--primary-strong); box-shadow: 0 1px 3px rgba(10, 20, 35, 0.08); } .card.accent .chip:hover { background: var(--surface); box-shadow: 0 2px 8px rgba(10, 20, 35, 0.12); } .chip-row { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .chip-row::-webkit-scrollbar { display: none; } /* ========================================================= Inputs ========================================================= */ input[type="text"], input[type="tel"], input[type="password"], input[type="email"], select, textarea { width: 100%; padding: 16px 18px; border: none; background: var(--surface-2); border-radius: 14px; font-size: 15px; color: var(--text); font-weight: 500; transition: background 0.12s, box-shadow 0.12s; } input::placeholder, textarea::placeholder { color: var(--text-muted); font-weight: 500; } input:focus, select:focus, textarea:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary); } label { display: block; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; letter-spacing: -0.01em; } .search-bar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 0 16px; transition: border-color 0.15s, box-shadow 0.15s; } .search-bar:hover { border-color: var(--border-strong); } .search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); } .search-bar input { border: none; background: transparent; padding: 14px 0; font-size: 15px; font-weight: 500; color: var(--text); } .search-bar input:focus { box-shadow: none; outline: none; } .search-bar input::placeholder { color: var(--text-muted); font-weight: 500; } .search-bar .ico { color: var(--text-secondary); flex-shrink: 0; } .search-bar:focus-within .ico { color: var(--primary); } /* ========================================================= Tag / Badge ========================================================= */ .tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 600; } .tag.primary { background: var(--primary-soft); color: var(--primary-strong); } .tag.success { background: var(--success-soft); color: var(--success); } .tag.warn { background: var(--warning-soft); color: var(--warning); } .tag.danger { background: var(--danger-soft); color: var(--danger); } /* ========================================================= Alerts ========================================================= */ .alert { padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 16px; font-weight: 500; } .alert.error { background: var(--danger-soft); color: var(--danger); } .alert.info { background: var(--primary-soft); color: var(--primary-strong); } .alert.warn { background: var(--warning-soft); color: var(--warning); } /* ========================================================= Role card (landing) ========================================================= */ .role-card { background: var(--surface); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--shadow-1); transition: transform 0.15s, box-shadow 0.15s; } .role-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .role-card .icon-wrap { width: 52px; height: 52px; background: var(--primary-soft); color: var(--primary); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .role-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .role-card p { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; line-height: 1.6; } .landing-subtitle { color: var(--text-secondary); font-size: 14px; font-weight: 500; } /* 로그인 폼 카드는 클릭 대상이 아니므로 hover 리프트를 쓰지 않는다 */ .landing-page .role-card:hover { transform: none; box-shadow: var(--shadow-1); } /* ========================================================= AI output ========================================================= */ .btn-full-analyze { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin-top: 10px; padding: 14px 16px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%); border: 0; border-radius: var(--r-md); color: var(--on-solid); cursor: pointer; transition: transform 0.05s, box-shadow 0.15s, filter 0.15s; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 24%, transparent); } .btn-full-analyze:hover { filter: brightness(1.04); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 32%, transparent); } .btn-full-analyze:active { transform: scale(0.99); } .btn-full-analyze-main { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .btn-full-analyze-main .ico { color: var(--on-solid); } .btn-full-analyze-sub { font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82); } @media (max-width: 480px) { .btn-full-analyze { padding: 13px 16px; } .btn-full-analyze-sub { display: none; } } .btn-draft { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin-top: 10px; padding: 14px 16px; background: var(--surface); border: 0; box-shadow: inset 0 0 0 1.5px var(--primary); border-radius: var(--r-md); color: var(--primary-strong); text-decoration: none; cursor: pointer; line-height: normal; transition: background 0.15s, transform 0.05s, box-shadow 0.15s; } .btn-draft:hover { background: var(--primary-soft); box-shadow: inset 0 0 0 1.5px var(--primary), 0 4px 12px color-mix(in srgb, var(--primary) 16%, transparent); } .btn-draft:active { transform: scale(0.99); } .btn-draft-main { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .btn-draft-main .ico { color: var(--primary); } .btn-draft-sub { font-size: 11.5px; font-weight: 500; color: var(--text-muted); } @media (max-width: 480px) { .btn-draft { padding: 13px 16px; } .btn-draft-sub { display: none; } } .ai-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); margin-top: 12px; } .ai-files { margin-top: 10px; padding: 12px 14px; background: var(--primary-soft); border-radius: var(--r-md); } .ai-files-head { font-size: 12px; font-weight: 600; color: var(--primary-strong); margin-bottom: 8px; } .ai-files-head b { font-weight: 700; } .file-chips { display: flex; flex-direction: column; gap: 6px; } .file-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: 13px; color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.05s, background 0.15s; min-width: 0; } a.file-chip:hover { border-color: var(--primary); background: var(--primary-soft); } a.file-chip:active { transform: scale(0.99); } .file-chip-folder { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; } .file-chip-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-chip-ext { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--primary-strong); background: var(--primary-soft); padding: 2px 7px; border-radius: var(--r-pill); letter-spacing: 0.03em; white-space: nowrap; } .ai-files-reason { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--primary) 15%, transparent); font-size: 12px; color: var(--text-secondary); line-height: 1.6; } .ai-output-header { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; } .ai-output-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); } .ai-output-title .ico { color: var(--primary); } .btn-copy { padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--link-color); background: var(--primary-soft); border: 0; border-radius: var(--r-pill); cursor: pointer; transition: background 0.15s; } .btn-copy:hover, .btn-copy:active { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--link-color); } .ai-output-actions { display: flex; gap: 6px; } .btn-ghost-pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-pill); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .btn-ghost-pill:hover { color: var(--link-color); border-color: var(--primary); background: var(--primary-soft); } .btn-ghost-pill .ico { width: 13px; height: 13px; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 0; border-radius: var(--r-pill); color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-icon:hover { background: var(--surface-2); color: var(--text); } .btn-icon:disabled { opacity: .5; cursor: wait; } .ai-output { background: var(--surface); color: var(--text); padding: 20px 22px; border: 1px solid var(--border-strong); border-radius: var(--r-md); max-height: 560px; overflow: auto; } /* 사건 상세 카드·인라인용 높이 제한. 모달은 패널·본문 쪽이 스크롤하므로 내부 560px 박스 제거 */ .ai-modal-body .ai-output { max-height: none; overflow: visible; } #ai-hist-body .ai-output, #ai-history-modal-body .ai-output { max-height: none; overflow: visible; } /* ─── Markdown typography (Toss) ─── */ .markdown-body { font-size: 14px; line-height: 1.75; letter-spacing: -0.01em; color: var(--text); word-break: break-word; overflow-wrap: anywhere; } .markdown-body > *:first-child { margin-top: 0; } .markdown-body > *:last-child { margin-bottom: 0; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 20px 0 10px; } .markdown-body h1 { font-size: 20px; } .markdown-body h2 { font-size: 17px; padding-bottom: 6px; border-bottom: 1px solid var(--border-strong); } .markdown-body h3 { font-size: 15px; color: var(--primary-strong); } .markdown-body h4 { font-size: 14px; color: var(--text-secondary); } @media (max-width: 600px) { .markdown-body h1 { font-size: 16px; } .markdown-body h2 { font-size: 14px; padding-bottom: 4px; } .markdown-body h3 { font-size: 13px; } .markdown-body h4 { font-size: 13px; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin: 14px 0 8px; word-break: keep-all; } } .markdown-body p { margin: 8px 0; } .markdown-body strong { font-weight: 700; color: var(--text); } .markdown-body em { font-style: normal; color: var(--primary-strong); } .markdown-body ul, .markdown-body ol { padding-left: 22px; margin: 8px 0; } .markdown-body li { margin: 4px 0; } .markdown-body li::marker { color: var(--primary); } .markdown-body hr { border: 0; border-top: 1px solid var(--border-strong); margin: 18px 0; } .markdown-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: 2px 6px; background: var(--surface-2); border-radius: 6px; color: var(--primary-strong); } .markdown-body pre { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px; overflow-x: auto; margin: 10px 0; } .markdown-body pre code { padding: 0; background: transparent; color: var(--text); } .markdown-body blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--primary); background: var(--primary-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-secondary); } .markdown-body table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; } .markdown-body th, .markdown-body td { border: 1px solid var(--border-strong); padding: 8px 12px; text-align: left; } .markdown-body th { background: var(--surface-2); font-weight: 600; } .markdown-body a { color: var(--primary); font-weight: 500; } .markdown-body a:hover { text-decoration: underline; } /* ─── AI Modal ─── */ .ai-modal { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; animation: ai-modal-fade 0.15s ease-out; } .ai-modal.is-open { display: flex; } @keyframes ai-modal-fade { from { opacity: 0; } to { opacity: 1; } } /* ─── 모바일 전체 메뉴 시트 ─── 하단 탭 네 자리에 못 들어간 메뉴(홈·캘린더·서면함·판결문·녹취·평가·의견 나눔·매뉴얼)의 입구. 768px 위에서는 사이드바가 그 일을 하므로 뜨지 않는다. */ .more-sheet { padding: 0; align-items: flex-end; } .more-sheet-panel { max-width: none; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .more-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 10px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .more-sheet-list { display: flex; flex-direction: column; padding: 0 8px 12px; } .more-sheet-list a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; border-radius: var(--r-md); } .more-sheet-list a .ico { color: var(--text-muted); flex-shrink: 0; } .more-sheet-list a span { flex: 1; } .more-sheet-caret { color: var(--text-disabled); } .more-sheet-list a.active { background: var(--tint-blue-bg); color: var(--primary); } .more-sheet-list a.active .ico { color: var(--primary); } .more-sheet-list a:active { background: var(--surface-2); } @media (min-width: 769px) { .more-sheet { display: none !important; } } .ai-modal-panel { background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: min(1200px, 92vw); /* 화면을 다 채우지 않고, 본문은 아래 .ai-modal-body에서 스크롤 */ max-height: min(960px, calc(100vh - 20px)); min-height: 0; display: flex; flex-direction: column; box-shadow: var(--shadow-3); animation: ai-modal-slide 0.18s ease-out; } @keyframes ai-modal-slide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ai-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-strong); } .ai-modal-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); } .ai-modal-title .ico { color: var(--primary); } .ai-modal-actions { display: flex; align-items: center; gap: 6px; } .ai-modal-body { padding: 24px 28px; overflow: auto; flex: 1; min-height: 0; } @media (max-width: 600px) { .ai-modal { padding: 0; } .ai-modal-panel { max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0; } .ai-modal-body { padding: 18px 18px 40px; } } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -2px; margin-right: 6px; } @keyframes spin { to { transform: rotate(360deg); } } .btn .spinner { border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; margin-right: 8px; } .btn.is-loading { opacity: 0.92; cursor: wait; pointer-events: none; } /* ─── Case detail collapse ─── */ #case-detail-cards.is-collapsed { display: none; } /* ─── Analyze button active state ─── */ .tile.is-active { background: var(--primary-soft); border-color: var(--primary); } .tile.is-active .tile-label { color: var(--primary-strong); } .btn-full-analyze.is-active { background: linear-gradient(135deg, var(--primary-strong) 0%, #1348b8 100%); outline: 3px solid var(--bg); outline-offset: 2px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 35%, transparent); } /* ─── Analysis Accordion ─── */ .analysis-accordion-list { margin: -24px -28px; } .analysis-accordion { border-bottom: 1px solid var(--border); } .analysis-accordion:last-child { border-bottom: none; } .analysis-accordion summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; user-select: none; transition: background var(--dur-1); } .analysis-accordion summary::-webkit-details-marker { display: none; } .analysis-accordion summary::before { content: ''; display: inline-block; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-out-toss); flex-shrink: 0; } .analysis-accordion[open] summary::before { transform: rotate(45deg); } .analysis-accordion[open] summary { background: var(--surface-2); border-bottom: 1px solid var(--border); } .analysis-accordion summary:hover { background: var(--surface-2); } /* mode chip: 분석 종류 시각화 */ .analysis-mode-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: -0.2px; background: var(--surface-2); color: var(--text); flex-shrink: 0; } .analysis-mode-chip.mode-strategy { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--tint-blue-fg); } .analysis-mode-chip.mode-precedent { background: color-mix(in srgb, var(--accent-violet) 12%, transparent); color: var(--tint-violet-fg); } .analysis-mode-chip.mode-evidence { background: color-mix(in srgb, var(--accent-amber) 12%, transparent); color: var(--tint-amber-fg); } .analysis-mode-chip.mode-full { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--tint-green-fg); } .analysis-mode-chip.mode-management { background: color-mix(in srgb, var(--accent-teal) 12%, transparent); color: var(--tint-teal-fg); } /* 메타: 날짜 · 사용자 (우측 정렬) */ .analysis-meta { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12px; color: var(--text-muted); min-width: 0; flex-shrink: 1; } .analysis-meta .analysis-date { font-variant-numeric: tabular-nums; } .analysis-meta .analysis-author { font-weight: 500; color: var(--text-secondary); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .analysis-meta .analysis-author.is-auto { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--accent-teal) 10%, transparent); color: var(--tint-teal-fg); padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: 11px; } .analysis-accordion-body { padding: 16px 20px 20px; background: var(--bg); } @media (max-width: 600px) { .analysis-accordion summary { padding: 12px 16px; gap: 8px; } .analysis-meta { gap: 6px; font-size: 11px; } .analysis-meta .analysis-author { max-width: 80px; } } .analysis-attached { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; } .analysis-attached span { display: inline-block; background: var(--surface); border: 1px solid var(--border-strong); padding: 1px 7px; border-radius: 4px; margin-right: 4px; margin-bottom: 4px; } @media (max-width: 600px) { .analysis-accordion-list { margin: -18px -18px; } } /* ========================================================= Full-analysis tabs ========================================================= */ .full-analysis-tabs { margin-top: 12px; } .full-tab-bar { display: flex; gap: 6px; margin-bottom: 0; border-bottom: 2px solid var(--border); } .full-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 13px; font-weight: 600; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; background: transparent; cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--text-muted); transition: color 0.15s, border-color 0.15s, background 0.15s; } .full-tab-btn .tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .full-tab-btn:hover { background: var(--surface-2); color: var(--text); } .full-tab-btn.strategy.is-active { color: var(--primary-strong); border-bottom-color: var(--primary-strong); background: var(--primary-soft); } .full-tab-btn.precedent.is-active { color: var(--success); border-bottom-color: var(--success); background: var(--success-soft); } .full-tab-btn.evidence.is-active { color: var(--warning); border-bottom-color: var(--warning); background: var(--warning-soft); } .full-tab-btn.strategy .tab-dot { background: var(--primary-strong); } .full-tab-btn.precedent .tab-dot { background: var(--success); } .full-tab-btn.evidence .tab-dot { background: var(--warning); } .full-tab-pane { display: none; } .full-tab-pane.is-active { display: block; } .full-tab-body { padding: 20px 0 4px; } .full-tab-loading { display: flex; align-items: center; gap: 8px; padding: 24px 0; color: var(--text-muted); font-size: 13px; } /* ========================================================= Bar chart ========================================================= */ .bar-chart { display: flex; flex-direction: column; gap: 10px; } .bar-row { display: grid; grid-template-columns: 140px 1fr 60px; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); } .bar-row .bar-wrap { background: var(--surface-2); border-radius: var(--r-pill); height: 10px; overflow: hidden; } .bar-row .bar { height: 100%; width: var(--bw, 0%); background: linear-gradient(90deg, var(--primary) 0%, var(--primary-strong) 100%); border-radius: var(--r-pill); } .bar-row .val { text-align: right; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* ========================================================= Timeline (schedules) ========================================================= */ .timeline { display: flex; flex-direction: column; gap: 10px; } .timeline-section-title { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em; text-transform: uppercase; padding: 6px 0; } .timeline-item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px; background: var(--surface-2); border-radius: var(--r-md); align-items: center; } .timeline-item.upcoming { background: var(--primary-soft); } .timeline-item.important { background: var(--warning-soft); } .timeline-item .date-box { text-align: center; background: var(--surface); border-radius: var(--r-sm); padding: 6px 0; box-shadow: var(--shadow-1); } .timeline-item .date-box .d { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; } .timeline-item .date-box .m { font-size: 11px; color: var(--text-muted); font-weight: 600; } .timeline-item .body .t { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .timeline-item .body .meta { font-size: 12px; color: var(--text-muted); } .timeline-item .body .result { margin-top: 6px; font-size: 12px; color: var(--text-secondary); padding-top: 6px; border-top: 1px solid var(--border); } /* ========================================================= Progress feed ========================================================= */ .feed { display: flex; flex-direction: column; } .feed-day { padding: 14px 0; border-bottom: 1px solid var(--border); } .feed-day:last-child { border-bottom: none; } .feed-day .date { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; } .feed-day .entry { padding: 10px 0 10px 14px; border-left: 2px solid var(--border-strong); font-size: 13px; color: var(--text); line-height: 1.6; } .feed-day .entry + .entry { margin-top: 4px; } .feed-day .entry .author { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; } /* ========================================================= Memo (Toss message/notification list style) ========================================================= */ .memo-list { display: flex; flex-direction: column; } .memo { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); background: transparent; font-size: 14px; color: var(--text); line-height: 1.6; } .memo:first-child { padding-top: 4px; } .memo:last-child { border-bottom: none; padding-bottom: 4px; } .memo .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: -0.02em; flex-shrink: 0; text-transform: uppercase; } .memo.pinned .avatar { background: var(--text); color: var(--on-solid); } .memo .body { min-width: 0; } .memo .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .memo .head .name { font-weight: 700; color: var(--text); font-size: 15px; letter-spacing: -0.015em; } .memo .head .date { font-size: 12px; color: var(--text-muted); margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; } .memo .head .pin-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--primary-strong); } .memo .head .pin-tag .ico { width: 12px; height: 12px; } .memo .title-line { font-size: 13px; font-weight: 700; color: var(--primary-strong); background: var(--primary-soft); padding: 3px 10px; border-radius: var(--r-pill); display: inline-block; margin-bottom: 8px; } .memo .content { white-space: pre-wrap; color: var(--text-secondary); font-size: 14px; line-height: 1.65; } /* ========================================================= Closing / Payments ========================================================= */ .money-hero { background: var(--primary-soft); border-radius: 18px; padding: 24px; margin-bottom: 20px; } .money-hero .label { font-size: 13px; color: var(--primary-strong); font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; } .money-hero .amount { font-size: 34px; font-weight: 800; color: var(--text); letter-spacing: -0.04em; line-height: 1.1; } .money-hero .amount .unit { font-size: 20px; color: var(--text-secondary); margin-left: 2px; font-weight: 700; } .money-hero .sub { margin-top: 14px; font-size: 13px; color: var(--text-secondary); display: flex; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--primary-strong) 12%, transparent); } .money-hero .sub span { font-weight: 600; } .money-hero .sub span strong { color: var(--text); font-weight: 800; margin-left: 4px; letter-spacing: -0.01em; } .payment-row { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .payment-row:last-child { border-bottom: none; } .payment-row .date { color: var(--text-muted); font-variant-numeric: tabular-nums; } .payment-row .method { color: var(--text); } .payment-row .method .sub { font-size: 12px; color: var(--text-muted); } .payment-row .amount { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } /* ========================================================= Client / Party / Agency cards ========================================================= */ .mini-card { padding: 14px 0; background: transparent; border-bottom: 1px solid var(--border); font-size: 14px; } .mini-card:last-child { border-bottom: none; padding-bottom: 4px; } .mini-card:first-of-type { padding-top: 4px; } .mini-card .name { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; font-size: 15px; letter-spacing: -0.01em; } .mini-card .meta { color: var(--text-secondary); font-size: 13px; line-height: 1.7; } .mini-card .meta > div { margin-top: 2px; } .mini-card .meta .row { display: flex; gap: 8px; align-items: center; color: var(--text-secondary); } .mini-card .meta .ico { color: var(--text-muted); } /* ========================================================= Icons ========================================================= */ .ico { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; flex-shrink: 0; } .ico-sm { width: 14px; height: 14px; } .ico-lg { width: 24px; height: 24px; } /* ========================================================= Pagination ========================================================= */ .pagination { display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; margin-top: 24px; } .pagination .btn-sm { min-width: 40px; background: transparent; color: var(--text-secondary) !important; font-weight: 600; min-height: 40px; border-radius: 10px; } .pagination .btn-sm:hover { background: var(--surface-2); } .pagination .btn-sm.secondary { background: transparent; color: var(--text-secondary) !important; } .pagination .btn-sm:not(.secondary):not([href]) { background: var(--text); color: var(--bg) !important; } /* ========================================================= Filter form (responsive) ========================================================= */ .filter-form { display: grid; grid-template-columns: 1fr 180px auto; gap: 12px; align-items: end; } @media (max-width: 768px) { /* 압축: [검색 input | 유형 select] 한 줄, 별도 검색 버튼 제거(엔터로 제출), label 시각적 숨김 */ .filter-form { grid-template-columns: 1fr 104px; gap: 8px; align-items: center; } .filter-form > div { min-width: 0; } .filter-form button[type="submit"] { display: none; } .filter-form label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .filter-form .search-bar { padding: 0 12px; } .filter-form .search-bar input { padding: 12px 0; } .filter-form select { padding: 13px 10px; } } /* ========================================================= Case list (responsive: table on desktop, cards on mobile) ========================================================= */ .case-list { display: flex; flex-direction: column; } .case-list .head, .case-list .row { display: grid; grid-template-columns: minmax(0, 2.4fr) 180px 120px 140px 110px 64px 56px 20px; gap: 12px; align-items: center; padding: 14px 12px; font-size: 14px; } .case-list .head { font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); padding-top: 4px; padding-bottom: 10px; } /* 본문 분석/채팅 아이콘과 같은 세로축에 오도록 헤더 정렬 통일 */ .case-list .head > div:nth-child(6), .case-list .head > div:nth-child(7) { text-align: center; } .case-list .head > div:nth-child(8) { text-align: right; } .case-list .row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; } .case-list .row:last-child { border-bottom: none; } .case-list .row:hover { background: var(--surface-2); } .case-list .row .title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 사건명 본문 — 폭이 부족할 때만 ellipsis (서버측 글자수 컷 없음) */ .case-list .row .title .case-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 유형 — 대분류 배지 + 소분류 텍스트를 두 줄에서 한 줄로 */ .case-list .row .category { display: flex; align-items: center; gap: 6px; min-width: 0; } .case-list .row .category > .tag { flex: 0 0 auto; } .case-list .row .case-category-sub { min-width: 0; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 종결 표시 — 상단 필터가 '전체'·'즐겨찾기' 일 때만 노출되는 중립 배지 */ .case-list .row .title .case-status-tag { flex: 0 0 auto; padding: 2px 8px; font-size: 11px; font-weight: 600; } .case-list .row .muted-cell { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-list .row .analysis-cell { text-align: center; cursor: default; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; align-self: center; min-width: 0; gap: 6px; } .mgmt-auto-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--tint-teal-bg); color: var(--tint-teal-fg); font-size: 12px; font-weight: 600; white-space: nowrap; letter-spacing: -0.2px; vertical-align: middle; } .mgmt-auto-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-teal) 18%, transparent); } /* 마지막 분석 이후 변동이 있는 사건 — 자동 분석을 끈 뒤(2026-09-16) 사람이 [분석]을 누르게 하는 신호. 초록 '최신' 과 같은 꼴에 색만 주황. */ .mgmt-pending-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: -0.2px; vertical-align: middle; } .mgmt-pending-badge .mgmt-auto-dot { background: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent); } .mgmt-pending { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--warning-soft); font-size: 13px; } .mgmt-pending-head { font-weight: 700; color: var(--warning); margin-bottom: 6px; } .mgmt-pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .mgmt-pending-list li { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .mgmt-pending-kind { flex: 0 0 auto; min-width: 3.4em; font-size: 11px; font-weight: 700; color: var(--text-muted); } .mgmt-pending-at { flex: 0 0 auto; margin-left: auto; font-size: 11px; color: var(--text-muted); } .mgmt-pending-more { margin-top: 4px; font-size: 12px; color: var(--text-muted); } .mgmt-pending-cta { margin-top: 8px; font-size: 12px; color: var(--text-muted); } .mgmt-run-pill.is-pending { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 35%, transparent); } /* 사건 목록 안에서는 색은 유지하고 크기만 축소 — 상태 신호는 남기되 행 높이를 키우지 않음 */ .case-list .row .title .mgmt-auto-badge, .case-list .row .title .mgmt-pending-badge { flex: 0 0 auto; padding: 2px 8px; font-size: 11px; font-weight: 600; } .case-list .row .analysis-eye-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; flex-shrink: 0; line-height: 0; transition: color 0.12s ease, background 0.12s ease, transform 0.08s ease; } .case-list .row .analysis-eye-btn:hover { color: var(--text-secondary); background: var(--surface-2); } .case-list .row .analysis-eye-btn:active { transform: scale(0.95); } .case-list .row .analysis-eye-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .case-list .row .analysis-eye-btn .ico { width: 18px; height: 18px; display: block; vertical-align: unset; } .case-list .row .analysis-eye-btn svg { display: block; /* stroke 아이콘 시각적 중심 보정 */ transform: translateY(0.5px); } .case-list .row .analysis-link { min-width: 32px; padding: 6px 8px; } .case-list .row .chev { color: var(--text-muted); text-align: right; } /* 사건별 AI 채팅 진입 (서면 작성) */ .case-list .row .chat-cell { cursor: default; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; align-self: center; min-width: 0; } .case-chat-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; flex-shrink: 0; line-height: 0; transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease, transform 0.08s ease; } .case-chat-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } .case-chat-btn:active { transform: scale(0.95); } .case-chat-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .case-chat-btn .ico { width: 17px; height: 17px; display: block; vertical-align: unset; } .case-chat-btn-label { display: none; } @media (max-width: 768px) { .case-list .head { display: none; } /* 각 사건을 독립된 카드로 분리 — 탭 영역과 그룹핑을 시각화 */ .case-list .row { display: block; padding: 14px 14px; margin-bottom: 8px; border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 12px; background: var(--surface); position: relative; } .case-list .row:last-child { margin-bottom: 0; border-bottom: 1px solid var(--border); } .case-list .row:active { background: var(--surface-2); } .case-list .row:hover { background: var(--surface); } .case-list .row > * { display: block; } /* 제목 행: 즐겨찾기 + 사건명 + AI관리/종결/분석중 마커 */ .case-list .row .title { display: flex !important; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; line-height: 1.4; white-space: normal; margin-bottom: 8px; } .case-list .row .title .case-title-text { flex: 1 1 auto; min-width: 0; word-break: keep-all; } /* 즐겨찾기 별: 모바일에서 탭 영역 확대 */ .case-list .row .fav-btn-sm { width: 32px !important; height: 32px !important; margin: -4px 0; flex-shrink: 0; } .case-list .row .fav-btn-sm .ico { width: 20px !important; height: 20px !important; } /* 카테고리 행 */ .case-list .row .category { margin-bottom: 8px; } /* 메타 정보: 줄단위 키-값 grid (라벨 폭 고정) */ .case-list .row .muted-cell { display: grid !important; grid-template-columns: 56px 1fr; gap: 8px; align-items: baseline; font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 4px 0; white-space: normal; } .case-list .row .muted-cell:last-of-type { margin-bottom: 0; } .case-list .row .muted-cell::before { content: attr(data-label); color: var(--text-disabled); font-size: 11px; font-weight: 600; letter-spacing: 0; margin-right: 0; } /* 사건명 한 줄 유지 — 폭 부족 시 wrap 대신 ellipsis */ .case-list .row .title { min-height: 24px; flex-wrap: nowrap; overflow: hidden; min-width: 0; } .case-list .row .title .case-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-list .row .analysis-cell { display: none; } .case-list .row .chev { display: none; } /* 채팅 진입은 모바일에서도 유지 — 카드 하단 전체폭 액션 버튼 */ .case-list .row .chat-cell { display: block; margin-top: 10px; } .case-chat-btn { width: 100%; height: 38px; line-height: normal; font-size: 13px; font-weight: 600; color: var(--primary); border-color: var(--border); } .case-chat-btn-label { display: inline; } /* 사건 목록 outer card 의 좌우 padding 약간 줄여 inner 카드 좌우 여백 확보 */ .card:has(> .case-list) { padding-left: 12px; padding-right: 12px; } } /* ========================================================= File tree ========================================================= */ .breadcrumb { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-radius: var(--r-md); font-size: 13px; flex-wrap: wrap; margin-bottom: 12px; } .breadcrumb a { color: var(--primary); font-weight: 600; } .breadcrumb .sep { color: var(--text-disabled); } #file-table { table-layout: auto; } #file-table .show-mobile { display: none; } #file-table td, #file-table th { word-break: keep-all; overflow-wrap: normal; } #file-table td:first-child { word-break: break-word; overflow-wrap: anywhere; } @media (max-width: 768px) { /* Card-like list on mobile */ #file-table, #file-table thead, #file-table tbody, #file-table tr, #file-table td { display: block; width: 100%; } #file-table thead { display: none; } #file-table tr { padding: 14px 0; border-bottom: 1px solid var(--border); position: relative; min-height: 54px; } #file-table tr:last-child { border-bottom: none; } #file-table td { padding: 0; border: none; text-align: left !important; white-space: normal; } #file-table td.name-cell { font-size: 14px; font-weight: 600; padding-right: 80px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #file-table td.name-cell > a, #file-table td.name-cell > span { display: inline !important; white-space: nowrap; } #file-table td.name-cell svg { vertical-align: -3px; margin-right: 6px; } #file-table td.meta-cell { font-size: 12px; color: var(--text-muted); font-weight: 500; } #file-table td.action-cell { position: absolute; top: 10px; right: 0; width: auto !important; } #file-table td.hide-mobile, #file-table th.hide-mobile, #file-table .hide-mobile { display: none !important; } #file-table .show-mobile { display: inline; } #file-table .back-row td { font-size: 13px; color: var(--text-muted); padding: 10px 0; } } /* ========================================================= Mobile (≤768px): native-app shell ========================================================= */ @media (max-width: 768px) { body { background: var(--bg); overscroll-behavior-y: none; } /* 모바일 — mobile-header(56 + safe-area-top) + main(나머지) 두 row 명시. iOS notch / Dynamic Island 영역까지 헤더가 확장되도록 safe-area-inset-top 포함. */ .app { grid-template-columns: 1fr; grid-template-rows: calc(var(--header-h, 56px) + env(safe-area-inset-top, 0px)) 1fr; } .sidebar { display: none; } .mobile-header { display: flex; align-items: center; height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; background: var(--bg); position: sticky; top: 0; z-index: 50; gap: 4px; } .mobile-header .back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--text); } .mobile-header .back:active { background: var(--surface-2); } .mobile-header .back.manual-text { width: auto; height: 34px; padding: 0 14px; margin-right: 10px; font-size: 13px; font-weight: 700; color: var(--primary-strong); background: var(--primary-soft); border-radius: 999px; letter-spacing: -0.01em; } .mobile-header .back.manual-text:active { background: var(--tint-blue-bg); } .mobile-header .title { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.025em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-header .right { display: flex; gap: 4px; } .mobile-header .mobile-logout, .mobile-header .mobile-settings { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--text-muted); flex-shrink: 0; } .mobile-header .mobile-settings { background: none; border: 0; padding: 0; cursor: pointer; } .mobile-header .mobile-logout:active, .mobile-header .mobile-settings:active { background: var(--surface-2); color: var(--text); } .mobile-header .mobile-logout .ico, .mobile-header .mobile-settings .ico { width: 20px; height: 20px; } .mobile-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; /* border-box 환경에서 padding-bottom 이 콘텐츠 영역을 침범하지 않도록 safe-area 만큼 height 도 함께 늘림 (PWA / home indicator 영역 대응) */ height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); z-index: 50; padding-bottom: env(safe-area-inset-bottom, 0px); } .mobile-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-disabled); font-size: 11px; font-weight: 700; letter-spacing: -0.01em; } .mobile-bottom-nav a.active { color: var(--text); } .mobile-bottom-nav a.active .ico { color: var(--text); } .mobile-bottom-nav a:active { opacity: 0.6; } /* [더보기] — 링크가 아니라 시트를 여는 버튼이라 생김새만 옆 탭에 맞춘다 */ .mobile-bottom-nav .mobile-more-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; appearance: none; background: none; border: none; padding: 0; color: var(--text-disabled); font-size: 11px; font-weight: 700; letter-spacing: -0.01em; font-family: inherit; cursor: pointer; } .mobile-bottom-nav .mobile-more-btn.active, .mobile-bottom-nav .mobile-more-btn.active .ico { color: var(--text); } .mobile-bottom-nav .mobile-more-btn:active { opacity: 0.6; } /* 모달 열림 시 모바일 헤더/하단 네비 숨김 — 백드롭 너머로 비치는 UI 정리 */ body:has(.ai-modal.is-open) .mobile-bottom-nav, body:has(.ai-modal.is-open) .mobile-header { display: none; } .main { padding: 20px 20px calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 24px); } .app.no-chrome .main { padding: 20px; } .page-title { font-size: 26px; letter-spacing: -0.03em; } .page-subtitle { font-size: 14px; } .page-subtitle-meta { display: block; margin-top: 6px; } .page-subtitle-meta::before { content: ''; } .card { padding: 20px; border-radius: 16px; margin-bottom: 12px; } .card h2 { font-size: 17px; margin-bottom: 14px; letter-spacing: -0.02em; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .stat .num { font-size: 26px; } table { font-size: 13px; } table th, table td { padding: 10px 8px; } .timeline-item { grid-template-columns: 56px 1fr; padding: 12px; } .payment-row { grid-template-columns: 80px 1fr auto; } .bar-row { grid-template-columns: 90px 1fr 50px; font-size: 12px; } .btn { font-size: 14px; padding: 12px 16px; } input, select, textarea { font-size: 16px; } /* prevent iOS zoom */ } /* ========================================================= Scrollbar (webkit) ========================================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } /* ========================================================= Utilities ========================================================= */ .muted { color: var(--text-muted); } .empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 24px 12px; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-sm { gap: 8px; } .gap-md { gap: 12px; } .wrap { flex-wrap: wrap; } .text-right { text-align: right; } .mt-sm { margin-top: 8px; } .mt-md { margin-top: 16px; } .mb-none { margin-bottom: 0; } /* ========================================================= Motion layer (Toss-inspired animations) ========================================================= */ /* Smooth scroll like native apps */ html { scroll-behavior: smooth; } /* Re-tune existing transitions with Toss easing */ .sidebar .nav-item { transition: background var(--dur-2) var(--ease-out-toss), color var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss); } .sidebar .nav-item:active { transform: scale(0.98); } .tile { transition: background var(--dur-2) var(--ease-out-toss), border-color var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss), box-shadow var(--dur-2) var(--ease-out-toss); } .tile:hover { transform: translateY(-1px); } .tile:active { transform: scale(0.94); transition-duration: 80ms; } .btn { transition: background var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss), box-shadow var(--dur-2) var(--ease-out-toss), opacity var(--dur-2) var(--ease-out-toss); } .btn:active:not(:disabled) { transform: scale(0.96); transition-duration: 80ms; } .chip { transition: background var(--dur-2) var(--ease-out-toss), color var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss); } .chip:active { transform: scale(0.94); transition-duration: 80ms; } .role-card { transition: transform var(--dur-3) var(--ease-out-toss), box-shadow var(--dur-3) var(--ease-out-toss); } .role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); } .case-list .row { transition: background var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss); } .case-list .row:active { transform: scale(0.995); } /* 분석기록 칸만 누를 때는 행 전체 눌림·스케일 없이 버튼만 반응 */ .case-list .row:has(.analysis-cell button:active) { transform: none; } .case-list .row:has(.analysis-cell:hover) { background: transparent; } /* Memo / list row press feedback on mobile */ @media (max-width: 768px) { .memo, .mini-card { transition: background var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss); } .memo:active, .mini-card:active { transform: scale(0.995); } } /* ─── Page entrance: staggered fade-up ─── */ @keyframes toss-fade-up { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .anim-in { opacity: 0; animation: toss-fade-up var(--dur-4) var(--ease-out-toss) forwards; animation-delay: calc(var(--i, 0) * 55ms); will-change: transform, opacity; } /* ─── Main content reveal on every navigation ─── */ @keyframes toss-main-enter { from { opacity: 0; } to { opacity: 1; } } .main { animation: toss-main-enter 320ms var(--ease-out-toss) both; } /* ─── Mobile header/bottom nav slide-in on load ─── */ @keyframes toss-slide-down { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes toss-slide-up { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .mobile-header { animation: toss-slide-down 320ms var(--ease-out-toss) both; } .mobile-bottom-nav { animation: toss-slide-up 360ms var(--ease-out-toss) both; } /* Bottom nav active indicator (animated pill) */ .mobile-bottom-nav a { position: relative; /* home indicator(safe-area)가 padding-bottom 으로 빠지면서 콘텐츠가 박스 전체 기준 위쪽으로 치우쳐 보이던 문제 보정 — safe-area 절반만큼 콘텐츠 아래로 이동 */ transform: translateY(calc(env(safe-area-inset-bottom, 0px) * 0.5)); transition: color var(--dur-2) var(--ease-out-toss); } .mobile-bottom-nav a .ico { transition: transform var(--dur-3) var(--ease-spring), color var(--dur-2) var(--ease-out-toss); } .mobile-bottom-nav a.active .ico { transform: translateY(-2px) scale(1.08); } .mobile-bottom-nav a::before { content: ""; position: absolute; top: 6px; left: 50%; width: 28px; height: 3px; border-radius: 999px; background: var(--text); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2); opacity: 0; } .mobile-bottom-nav a.active::before { transform: translateX(-50%) scaleX(1); opacity: 1; } .mobile-bottom-nav a:active { transform: scale(0.96); } /* Sidebar active indicator bar */ .sidebar .nav-item { position: relative; } .sidebar .nav-item::before { content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 0; background: var(--primary); border-radius: 2px; transform: translateY(-50%); transition: height var(--dur-3) var(--ease-spring); } .sidebar .nav-item.active::before { height: 18px; } /* ─── Tile icon subtle lift ─── */ .tile .tile-ico { transition: transform var(--dur-3) var(--ease-spring); } .tile:hover .tile-ico { transform: translateY(-2px) scale(1.04); } .tile:active .tile-ico { transform: scale(0.96); transition-duration: 80ms; } /* ─── Favorite pop ─── */ @keyframes toss-fav-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 70% { transform: scale(0.92) rotate(4deg); } 100% { transform: scale(1) rotate(0); } } .fav-btn.is-popping { animation: toss-fav-pop 420ms var(--ease-spring); } /* ─── Modal / Bottom sheet ─── */ .ai-modal { animation: toss-fade 200ms var(--ease-out-toss); } @keyframes toss-fade { from { opacity: 0; } to { opacity: 1; } } .ai-modal-panel { animation: toss-modal-pop 280ms var(--ease-spring); } @keyframes toss-modal-pop { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @media (max-width: 600px) { .ai-modal { align-items: flex-end; } .ai-modal-panel { border-radius: 20px 20px 0 0 !important; max-height: 92vh !important; max-height: 92dvh !important; height: auto !important; animation: toss-sheet-up 340ms var(--ease-out-toss); } @keyframes toss-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Drag handle */ .ai-modal-panel::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 8px auto 2px; flex-shrink: 0; } } /* ─── Skeleton shimmer ─── */ @keyframes toss-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-2) 50%, var(--surface-2) 100%); background-size: 800px 100%; animation: toss-shimmer 1.4s linear infinite; border-radius: var(--r-sm); color: transparent !important; pointer-events: none; } /* ─── Count-up: mono-spaced for smooth tick ─── */ .stat .num, .money-hero .amount { font-variant-numeric: tabular-nums; } /* ─── Input focus micro bounce ─── */ input[type="text"], input[type="tel"], input[type="password"], input[type="email"], select, textarea { transition: background var(--dur-2) var(--ease-out-toss), box-shadow var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss); } input:focus, select:focus, textarea:focus { transform: translateY(-1px); } /* ─── Spinner smoother ─── */ .spinner { animation: spin 0.85s var(--ease-in-out-toss) infinite; } /* ─── Past-analysis indicator (replaces model badge) ─── */ .hist-indicator { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px 6px 12px; min-width: 160px; background: var(--primary-soft); color: var(--primary-strong) !important; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; border: none; border-radius: var(--r-pill); text-decoration: none !important; cursor: pointer; font-family: inherit; transition: background var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss); animation: hist-fade-in 420ms var(--ease-out-toss); } .hist-indicator:hover { background: var(--tint-blue-bg); } .hist-indicator:active { transform: scale(0.96); } .hist-indicator strong { font-weight: 800; } .hist-indicator .ico { width: 12px; height: 12px; color: var(--primary-strong); } .hist-indicator .hist-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); position: relative; flex-shrink: 0; } .hist-indicator .hist-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--primary); opacity: 0.45; animation: hist-pulse 1.6s var(--ease-out-toss) infinite; } @keyframes hist-pulse { 0% { transform: scale(0.7); opacity: 0.5; } 70% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes hist-fade-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } /* Smooth anchor scroll offset on mobile (so sticky header doesn't cover) */ #ai-history { scroll-margin-top: 72px; } /* ─── 분석 모드 진행 chip (각 타일 / 종합 버튼 안) ─── */ .tile { position: relative; } .btn-full-analyze { position: relative; } .mode-chip { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; cursor: pointer; pointer-events: auto; user-select: none; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); z-index: 1; } .mode-chip[hidden] { display: none; } .mode-chip:hover { filter: brightness(0.97); } .mode-chip-running { background: var(--primary-soft); color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary-strong, #1d4ed8) 25%, transparent); } .mode-chip-done { background: var(--tint-green-bg); color: var(--tint-green-fg); border-color: color-mix(in srgb, var(--tint-green-fg) 45%, transparent); } .mode-chip-done.is-viewing { background: var(--tint-green-fg); color: var(--on-solid); border-color: var(--tint-green-fg); } .mode-chip-error { background: var(--tint-red-bg); color: var(--tint-red-fg); border-color: color-mix(in srgb, var(--tint-red-fg) 45%, transparent); } /* 종합 버튼은 흰 글자 위에 chip 이 잘 보이도록 강한 배경 */ .btn-full-analyze .mode-chip { background: rgba(255,255,255,0.95); color: var(--primary-strong); border-color: rgba(255,255,255,0.9); } .btn-full-analyze .mode-chip-done { background: var(--tint-green-bg); color: var(--tint-green-fg); border-color: color-mix(in srgb, var(--tint-green-fg) 45%, transparent); } .btn-full-analyze .mode-chip-done.is-viewing { background: var(--tint-green-fg); color: var(--bg); border-color: var(--tint-green-fg); } .btn-full-analyze .mode-chip-error { background: var(--tint-red-bg); color: var(--tint-red-fg); border-color: color-mix(in srgb, var(--tint-red-fg) 45%, transparent); } /* 좁은 확인 모달 패널 */ .ai-modal-panel-sm { max-width: 460px !important; width: calc(100vw - 32px) !important; max-height: 90vh !important; max-height: 90dvh !important; } /* 모바일에서 chip 폰트 살짝 크게 (탭하기 쉽게) */ @media (max-width: 768px) { .mode-chip { font-size: 11px; padding: 4px 9px; top: 5px; right: 5px; } .ai-modal-panel-sm { width: calc(100vw - 16px) !important; } } /* ─── 모바일 랜딩(로그인) 화면: 스크롤 없는 단일 뷰포트 레이아웃 ─── */ @media (max-width: 768px) { .landing-page { max-width: 420px !important; } } @media (max-width: 480px) { .landing-hero { margin-bottom: 20px !important; } .landing-subtitle { font-size: 12px !important; } .landing-footer { margin-top: 20px !important; font-size: 11px !important; } .landing-page .role-card { padding: 20px !important; } .landing-page .role-card label { font-size: 12px !important; margin-bottom: 4px !important; } .landing-page .role-card input[type="text"], .landing-page .role-card input[type="password"] { padding: 11px 14px !important; font-size: 14px !important; border-radius: 10px !important; } .landing-page .role-card .btn { padding: 12px 16px !important; font-size: 14px !important; } } /* ─── Accessibility: respect reduced motion ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .anim-in { opacity: 1 !important; transform: none !important; } } /* ========================================================= AI 사건 관리 결과 (사건 상세 + 분석기록 모달 공통) ========================================================= */ .mgmt-section { margin-bottom: 16px; } .mgmt-section-last, .mgmt-section:last-child { margin-bottom: 0; } .mgmt-section-title { font-weight: 700; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; letter-spacing: -0.2px; } .mgmt-summary-box { padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-md); line-height: 1.7; font-size: 14px; color: var(--text); } .mgmt-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; } .mgmt-card-list { display: flex; flex-direction: column; gap: 8px; } .mgmt-action-card, .mgmt-risk-card { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .mgmt-risk-card { border-left: 3px solid var(--accent-amber); } .mgmt-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .mgmt-card-title { font-weight: 600; font-size: 14px; color: var(--text); word-break: keep-all; } .mgmt-card-detail { font-size: 13px; color: var(--text); line-height: 1.6; word-break: keep-all; } .mgmt-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .mgmt-missing-list { margin: 0; padding-left: 20px; } .mgmt-missing-list li { margin-bottom: 4px; line-height: 1.6; font-size: 13px; word-break: keep-all; } .mgmt-missing-reason { color: var(--text-muted); } .mgmt-pri-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: -0.2px; flex-shrink: 0; } .mgmt-pri-chip.high { background: var(--tint-red-bg); color: var(--tint-red-fg); } .mgmt-pri-chip.med { background: var(--tint-amber-bg); color: var(--tint-amber-fg); } .mgmt-pri-chip.low { background: var(--tint-gray-bg); color: var(--tint-gray-fg); } /* 모바일 보정 — 사건 상세 카드 + 모달 공통 */ @media (max-width: 600px) { .mgmt-summary-box { padding: 12px 14px; font-size: 13px; line-height: 1.65; } .mgmt-action-card, .mgmt-risk-card { padding: 10px 12px; } .mgmt-card-title { font-size: 13px; } .mgmt-card-detail { font-size: 12.5px; } .mgmt-card-meta { font-size: 11px; } .mgmt-missing-list { padding-left: 18px; } .mgmt-missing-list li { font-size: 12.5px; } .mgmt-section { margin-bottom: 14px; } .mgmt-section-title { font-size: 12px; margin-bottom: 6px; } } /* AI 사건 관리 카드 자체 (사건 상세) — 모바일 헤더/버튼 보정 */ @media (max-width: 600px) { #mgmt-card .section-bar { flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; } #mgmt-card .section-title { flex-wrap: wrap; font-size: 16px; gap: 6px; } #mgmt-card #mgmt-last-meta { flex-basis: 100%; margin-top: 2px; font-size: 11px; } #mgmt-card .btn-full-analyze { padding: 12px 14px; } } /* AI 사건 관리 — 토스 스타일 체크박스 */ .mgmt-card-row { display: flex; align-items: flex-start; gap: 12px; } .mgmt-card-body { flex: 1; min-width: 0; } .mgmt-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; flex-shrink: 0; padding-top: 2px; } .mgmt-check input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .mgmt-check-box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--field-border); background: var(--field); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1); flex-shrink: 0; } .mgmt-check-ico { width: 14px; height: 14px; display: block; } .mgmt-check:hover .mgmt-check-box { border-color: var(--primary); background: var(--primary-soft); } .mgmt-check.is-checked .mgmt-check-box, .mgmt-check input:checked + .mgmt-check-box { background: var(--primary); border-color: var(--primary); color: var(--on-solid); } .mgmt-check input:focus-visible + .mgmt-check-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .mgmt-checked-meta { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--success); letter-spacing: -0.2px; font-variant-numeric: tabular-nums; } /* 체크된 카드의 시각 — 옅은 톤 + 텍스트 약하게 */ .mgmt-checkable.is-checked { background: var(--surface-2); } .mgmt-checkable.is-checked .mgmt-card-title, .mgmt-checkable.is-checked .mgmt-card-detail, .mgmt-checkable.is-checked .mgmt-missing-body strong, .mgmt-checkable.is-checked .mgmt-missing-reason { color: var(--text-muted); } .mgmt-checkable.is-checked .mgmt-card-title, .mgmt-checkable.is-checked .mgmt-missing-body strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 32%, transparent); } .mgmt-checkable.is-busy { opacity: 0.6; pointer-events: none; } /* 누락 자료 li 도 row 정렬 */ .mgmt-missing-list li.mgmt-checkable { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; margin-left: -8px; border-radius: 8px; list-style: none; } .mgmt-missing-list li.mgmt-checkable::marker { content: ''; } .mgmt-missing-body { flex: 1; min-width: 0; } ul.mgmt-missing-list:has(li.mgmt-checkable) { padding-left: 0; } @media (max-width: 600px) { .mgmt-card-row { gap: 10px; } .mgmt-check-box { width: 20px; height: 20px; } .mgmt-check-meta { font-size: 10px; } } /* AI 사건 관리 — 분석 기록 chips */ .mgmt-history-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; margin-bottom: 4px; } .mgmt-history-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1); font-variant-numeric: tabular-nums; white-space: nowrap; } .mgmt-history-chip:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .mgmt-history-chip.is-active { background: var(--primary); color: var(--on-solid); border-color: var(--primary); font-weight: 600; } .mgmt-history-chip-auto { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--accent-teal) 14%, transparent); color: var(--tint-teal-fg); letter-spacing: -0.2px; } .mgmt-history-chip.is-active .mgmt-history-chip-auto { background: rgba(255, 255, 255, .25); color: var(--on-solid); } @media (max-width: 600px) { .mgmt-history-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .mgmt-history-tabs::-webkit-scrollbar { height: 4px; } .mgmt-history-tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .mgmt-history-chip { flex: 0 0 auto; } } /* ════════════════════════════════════════════════════════════════ * 일일 업무 브리핑 모달 (토스 스타일) * ════════════════════════════════════════════════════════════════ */ .briefing-panel { max-width: min(640px, 92vw); max-height: min(820px, calc(100vh - 32px)); } .briefing-body { padding: 0; } .briefing-headline { padding: 20px 24px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, transparent), color-mix(in srgb, var(--primary) 0%, transparent)); border-bottom: 1px solid var(--border); } .briefing-date { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: -0.2px; margin-bottom: 4px; } .briefing-title { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; line-height: 1.45; } .briefing-section { padding: 18px 24px 6px; border-bottom: 1px solid var(--border); } .briefing-section:last-of-type { border-bottom: none; } .briefing-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 0; font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; } .briefing-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .briefing-dot-blue { background: var(--primary); } .briefing-dot-amber { background: var(--accent-amber); } .briefing-dot-rose { background: var(--accent-rose); } .briefing-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-secondary); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; min-width: 24px; text-align: center; } .briefing-empty { padding: 12px 14px; font-size: 13px; color: var(--text-secondary); background: var(--surface-2); border-radius: 12px; margin-bottom: 12px; } .briefing-list { list-style: none; margin: 0 0 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .briefing-item { display: flex; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: background 120ms var(--ease-out-toss, ease-out), border-color 120ms; } .briefing-item:hover { background: var(--surface-2); border-color: var(--border-strong); } .briefing-item-stack { flex-direction: column; gap: 4px; } .briefing-time { flex-shrink: 0; width: 56px; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; padding-top: 1px; } .briefing-time-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 78px; } .briefing-time-date { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; } .briefing-d { display: inline-block; font-size: 11px; font-weight: 800; color: var(--tint-red-fg); background: color-mix(in srgb, var(--accent-rose) 10%, transparent); padding: 1px 7px; border-radius: 999px; letter-spacing: -0.2px; } .briefing-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .briefing-chip { display: inline-block; align-self: flex-start; padding: 1px 8px; font-size: 11px; font-weight: 700; border-radius: 999px; letter-spacing: -0.2px; } .briefing-chip-court { background: color-mix(in srgb, var(--accent-rose) 10%, transparent); color: var(--tint-red-fg); } .briefing-chip-consult { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--tint-blue-fg); } .briefing-chip-done { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-secondary); } .briefing-item.is-past { background: var(--surface-2, rgba(0,0,0,0.02)); opacity: 0.62; } .briefing-item.is-past .briefing-item-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 32%, transparent); text-decoration-thickness: 1px; } .briefing-item-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; line-height: 1.45; word-break: keep-all; } .briefing-link { color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--border-strong); transition: color 120ms; } .briefing-link:hover { color: var(--primary); border-bottom-color: var(--primary); } .briefing-meta { font-size: 12px; color: var(--text-secondary); font-weight: 600; letter-spacing: -0.2px; } .briefing-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.55; letter-spacing: -0.2px; } .briefing-focus { margin: 12px 24px 24px; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--primary) 2%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent); border-radius: 14px; } .briefing-focus-label { font-size: 11px; font-weight: 800; color: var(--primary); letter-spacing: 0.2px; margin-bottom: 4px; text-transform: uppercase; } .briefing-focus-text { font-size: 13px; color: var(--text); line-height: 1.6; font-weight: 600; letter-spacing: -0.2px; } .briefing-loading { padding: 60px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .briefing-spinner { width: 28px; height: 28px; border: 3px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; } .briefing-loading-text { font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.2px; } .briefing-error { padding: 24px; background: color-mix(in srgb, var(--accent-rose) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent-rose) 18%, transparent); border-radius: 14px; margin: 18px 24px; } .briefing-error strong { display: block; font-size: 14px; color: var(--tint-red-fg); margin-bottom: 4px; } .briefing-error-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } /* 헤더의 "오늘의 업무" 트리거 — 사이드바 nav-item 옆 작은 아이콘 버튼 */ .briefing-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--text); background: transparent; border: 1px solid var(--border-strong); cursor: pointer; letter-spacing: -0.2px; transition: background 120ms, color 120ms, border-color 120ms; } .briefing-trigger:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } .briefing-trigger .ico { width: 14px; height: 14px; color: var(--primary); } /* 모바일 헤더의 sparkle 아이콘 버튼 */ .mobile-briefing-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text); cursor: pointer; border-radius: 10px; transition: background 120ms; } .mobile-briefing-btn:hover { background: var(--surface-2); } .mobile-briefing-btn .ico { width: 18px; height: 18px; color: var(--primary); } @media (max-width: 600px) { .briefing-panel { max-width: 100vw; max-height: 100vh; max-height: 100dvh; } .briefing-headline { padding: 18px 18px 16px; } .briefing-section { padding: 16px 18px 4px; } .briefing-focus { margin: 12px 18px 24px; } .briefing-time { width: 48px; font-size: 12px; } .briefing-time-stack { width: 70px; } } .briefing-date-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .briefing-branch-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: -0.2px; background: color-mix(in srgb, var(--accent-teal) 12%, transparent); color: var(--tint-teal-fg); white-space: nowrap; cursor: default; } .briefing-branch-tag-soft { background: var(--surface-2); color: var(--text-secondary); } .briefing-chip-row { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .briefing-chip-branch { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 700; border-radius: 999px; letter-spacing: -0.2px; background: color-mix(in srgb, var(--accent-teal) 10%, transparent); color: var(--tint-teal-fg); } /* 일일 브리핑 — 단계별 로딩 진행 */ .briefing-loading-hint { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.2px; margin-top: -4px; } .briefing-loading-steps { list-style: none; padding: 0; margin: 12px 0 0 0; display: flex; flex-direction: column; gap: 8px; width: min(280px, 90%); text-align: left; } .briefing-step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); letter-spacing: -0.2px; transition: background 200ms var(--ease-out-toss, ease-out), color 200ms, border-color 200ms; } .briefing-step-marker { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); position: relative; transition: background 200ms, border-color 200ms; } .briefing-step.is-active { background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } .briefing-step.is-active .briefing-step-marker { border-color: var(--primary); background: var(--primary); animation: briefing-step-pulse 1.2s ease-in-out infinite; } @keyframes briefing-step-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent); } 50% { transform: scale(1.1); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent); } } .briefing-step.is-done { color: var(--tint-teal-fg); background: color-mix(in srgb, var(--accent-teal) 6%, transparent); border-color: color-mix(in srgb, var(--accent-teal) 18%, transparent); } .briefing-step.is-done .briefing-step-marker { background: var(--accent-teal); border-color: var(--accent-teal); } .briefing-step.is-done .briefing-step-marker::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border-right: 2px solid var(--on-solid); border-bottom: 2px solid var(--on-solid); transform: rotate(45deg); } /* 일일 브리핑 — 분석 이후 새 일정 알림 배너 (헤드라인 바로 아래) */ .briefing-stale { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 24px 16px; padding: 12px 14px; background: color-mix(in srgb, var(--accent-amber) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent-amber) 22%, transparent); border-radius: 14px; } .briefing-stale-text { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tint-amber-fg); letter-spacing: -0.2px; flex: 1; min-width: 0; } .briefing-stale-text strong { font-weight: 700; color: var(--tint-amber-fg); } .briefing-stale-text .ico { flex-shrink: 0; color: var(--accent-amber); width: 16px; height: 16px; } .briefing-stale-btn { flex-shrink: 0; padding: 7px 13px; font-size: 12px; font-weight: 700; color: var(--on-accent); background: var(--accent-amber); border: none; border-radius: 999px; cursor: pointer; letter-spacing: -0.2px; transition: background 120ms var(--ease-out-toss, ease-out), transform 120ms; } .briefing-stale-btn:hover { background: color-mix(in srgb, var(--accent-amber) 80%, #fff); } .briefing-stale-btn:active { transform: scale(0.96); } @media (max-width: 600px) { .briefing-stale { margin: 0 18px 14px; flex-wrap: wrap; } .briefing-stale-btn { width: 100%; padding: 9px 14px; } } /* "오늘의 업무" 트리거 — 분석 이후 새 일정 등록됨 표시 점 배지 */ [data-briefing-open] { position: relative; } [data-briefing-open].briefing-has-update::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-amber); border: 2px solid var(--surface); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-amber) 40%, transparent); animation: briefing-badge-pulse 1.6s ease-in-out infinite; } @keyframes briefing-badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-amber) 40%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-amber) 0%, transparent); } } /* 사이드바 nav-item 은 좌측 정렬이라 dot 위치 조정 */ .sidebar [data-briefing-open].briefing-has-update::after { top: 8px; right: 10px; } /* ════════════════════════════════════════════════════════════════ * 서면·리서치 채팅 페이지 * ════════════════════════════════════════════════════════════════ */ .chat-page { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 0px); height: 100dvh; background: var(--surface); overflow: hidden; } .main:has(.chat-page) { padding: 0; min-height: 0; overflow: hidden; } /* 좌측 세션 목록 */ .chat-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface-2); min-height: 0; } .chat-sidebar-header { padding: 12px 12px 8px; border-bottom: 1px solid var(--border); } .chat-new-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: -0.2px; cursor: pointer; transition: background 120ms var(--ease-out-toss, ease-out), border-color 120ms; } .chat-new-btn:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } .chat-new-btn .ico { width: 14px; height: 14px; } .chat-session-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; min-height: 0; } .chat-session-empty { padding: 24px 12px; font-size: 12px; color: var(--text-secondary); text-align: center; line-height: 1.6; } .chat-session-item { display: flex; align-items: stretch; gap: 0; margin-bottom: 4px; border-radius: 10px; transition: background 120ms; } .chat-session-item:hover { background: var(--surface); } .chat-session-item.is-active { background: var(--surface); } .chat-session-open { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: none; background: transparent; text-align: left; cursor: pointer; font-family: inherit; min-width: 0; } .chat-session-title { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .chat-session-item.is-active .chat-session-title { color: var(--primary); } .chat-session-meta { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 11px; color: var(--text-secondary); } .chat-session-count { background: var(--surface-2); padding: 0 6px; border-radius: 999px; font-weight: 600; } .chat-session-item.is-active .chat-session-count { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); } .chat-session-del { width: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 0 10px 10px 0; opacity: 0; transition: opacity 120ms, color 120ms, background 120ms; } .chat-session-item:hover .chat-session-del { opacity: 1; } .chat-session-del:hover { color: var(--tint-red-fg); background: color-mix(in srgb, var(--accent-rose) 6%, transparent); } .chat-session-del .ico { width: 14px; height: 14px; } /* 이름 바꾸기 — 삭제와 같은 자리에 나란히 선다(마우스를 올려야 나타난다). */ .chat-session-rename { width: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; opacity: 0; transition: opacity 120ms, color 120ms, background 120ms; } .chat-session-item:hover .chat-session-rename { opacity: 1; } .chat-session-rename:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); } .chat-session-rename .ico { width: 14px; height: 14px; } /* 손가락만으로 쓰는 화면에서는 hover 가 없다 — 두 버튼을 늘 보여 준다. */ @media (hover: none) { .chat-session-rename, .chat-session-del { opacity: 1; } } /* 고치는 중인 항목 — 목록 한 줄이 통째로 입력칸이 된다. */ .chat-session-item.is-renaming { padding: 4px 6px; background: var(--surface); } .chat-session-rename-input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--primary); border-radius: 8px; background: var(--bg, #fff); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.2px; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); } /* 우측 메인 채팅 영역 */ .chat-main { display: flex; flex-direction: column; min-height: 0; background: var(--surface); } .chat-main-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .chat-mobile-back { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text); cursor: pointer; border-radius: 8px; } .chat-mobile-back:hover { background: var(--surface-2); } .chat-mobile-back .ico { width: 18px; height: 18px; } .chat-current-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 8px; display: flex; flex-direction: column; gap: 12px; } .chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px; text-align: center; } .chat-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 8%, transparent); display: flex; align-items: center; justify-content: center; color: var(--primary); } .chat-empty-icon .ico { width: 28px; height: 28px; } .chat-empty-title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; } .chat-empty-hint { font-size: 13px; color: var(--text-secondary); max-width: 360px; line-height: 1.6; } .chat-empty-suggestions { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .chat-suggest-btn { padding: 9px 14px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: -0.2px; transition: background 120ms, color 120ms, border-color 120ms; } .chat-suggest-btn:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } /* 메시지 버블 */ .chat-msg { display: flex; flex-direction: column; max-width: 100%; gap: 6px; } .chat-msg-user { align-items: flex-end; } .chat-msg-assistant { align-items: flex-start; } .chat-msg-bubble { max-width: min(860px, 90%); padding: 14px 18px; border-radius: 16px; font-size: 14px; line-height: 1.6; letter-spacing: -0.2px; word-wrap: break-word; overflow-wrap: anywhere; } .chat-msg-user .chat-msg-bubble { background: var(--primary); color: var(--on-solid); border-bottom-right-radius: 4px; } .chat-msg-assistant .chat-msg-bubble { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .chat-msg-bubble p { margin: 0 0 6px; } .chat-msg-bubble p:last-child { margin-bottom: 0; } /* 스트리밍 중에는 본문이 '확정된 앞부분'과 '아직 자라는 끝부분' 두 상자로 나뉜다. 그래서 문단 하나가 확정될 때마다 :last-child 가 바뀌며 아래 여백이 사라졌고, 그때마다 읽던 글이 위로 튀었다. 자라는 동안에는 여백을 고정해 둔다. */ .chat-msg-streaming .chat-msg-bubble p:last-child { margin-bottom: 6px; } .chat-msg-bubble a { color: var(--primary); text-decoration: underline; } .chat-msg-user .chat-msg-bubble a { color: var(--on-solid); } /* 번호·글머리표는 목록 상자 '바깥' 에 그려진다. margin 으로만 밀어 두면 표식이 놓이는 자리가 말풍선의 안쪽 여백이라, 번호가 길수록 가장자리로 삐져나왔다. padding 으로 자리를 확보하면 표식이 상자 안에 남는다. */ .chat-msg-bubble ul, .chat-msg-bubble ol { margin: 4px 0 6px; padding-left: 22px; } .chat-msg-bubble li { margin: 2px 0; } .chat-msg-bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; padding: 1px 5px; background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 4px; } /* 근거 칩 — 인용된 문장 바로 뒤에 붙는다. 클릭하면 원본 PDF 의 해당 쪽이 열린다. 본문 줄높이를 밀지 않도록 세로 여백 대신 line-height 로 높이를 맞춘다. */ /* 근거 칩은 화면에만 있는 것이고 서면의 일부가 아니다. user-select 를 풀어 두었을 때는 답변을 드래그해 한글에 붙이면 "1 26.06.18. 수신 준비서면(...).pdf, 2쪽" 이 문장 한가운데 끼어 들어갔다. 실제로 그 상태의 준비서면이 검토까지 올라간 적이 있다(2026-08-17). 선택에서 빼면 클릭으로 원문을 여는 기능은 그대로 두면서 복사만 깨끗해진다. */ .chat-cite { display: inline-flex; align-items: center; gap: 4px; -webkit-user-select: none; user-select: none; margin: 0 2px; padding: 0 7px 0 4px; max-width: 100%; border: 1px solid var(--border, #e2e8f0); border-radius: 999px; background: var(--surface-2, #f7fafc); color: var(--text-muted, #4a5568) !important; font-size: 11px; line-height: 18px; font-weight: 600; text-decoration: none !important; vertical-align: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 무언가 보여 줄 게 있는 근거만 반응한다. 종전에는 span(열 곳이 없는 판례·법령)도 hover 하면 파랗게 변해서, 눌러도 아무 일이 없는 칩이 눌리는 것처럼 보였다. 보여 줄 것이 있는 것과 없는 것을 손끝에서 가르는 신호가 이 hover 하나다. 이제 '보여 줄 것' 은 원본 파일만이 아니다 — 판례·법령처럼 열 파일은 없어도 인용 원문은 있는 근거가 button(.chat-cite-quoted)으로 온다. */ a.chat-cite, button.chat-cite { cursor: pointer; } /* 버튼은 브라우저 기본 글꼴을 들고 온다. 본문에 섞여 앉는 칩이라 반드시 물려받아야 한다(글자 크기는 위 .chat-cite 가 이미 정한다). */ button.chat-cite { font-family: inherit; -webkit-appearance: none; appearance: none; } a.chat-cite:hover, button.chat-cite:hover { border-color: var(--primary); color: var(--primary) !important; background: var(--surface); } /* 이제 칩은 키보드로도 닿는다 — 어디에 서 있는지 보이지 않으면 Enter 를 누를 수 없다. */ a.chat-cite:focus-visible, button.chat-cite:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } span.chat-cite { cursor: default; } .chat-cite-num { flex: none; min-width: 14px; height: 14px; border-radius: 999px; background: var(--primary); color: var(--on-solid); font-size: 9px; line-height: 14px; text-align: center; } /* 근거 층위 배지 — 사건기록 / 판례 / 법령 / 서면 양식. 같은 답변 안에서 사건기록 인용과 판례 인용이 섞이므로, 무엇을 근거로 한 문장인지 칩만 보고 갈라져야 한다. */ .chat-cite-tier { flex: none; padding: 0 5px; border-radius: 999px; background: var(--surface-3, #edf2f7); color: var(--text-muted, #4a5568); font-size: 9px; line-height: 14px; font-weight: 700; } /* 판례·법령 인용은 아직 원문을 열 라우트가 없어 링크가 아니다(). 눌릴 것처럼 보이지 않게 커서와 hover 를 죽인다. */ .chat-cite-ref { cursor: default; border-style: dashed; } .chat-cite-ref:hover { border-color: var(--border, #e2e8f0); color: var(--text-muted, #4a5568) !important; background: var(--surface-2, #f7fafc); } /* 좌표는 맞지만 자료 이름이 이 문장의 것이라는 보장이 없는 인용. 한 자료에 판례가 여럿 실려 있는 경우다 — 눈에 걸려야 변호사가 원문을 확인한다. */ .chat-cite-doubt { background: var(--tint-amber-bg); color: var(--tint-amber-fg); } /* ─── 근거 모달 ─── 칩을 누르면 인용 원문이 서면 위에 겹쳐 뜬다. 셸(.ai-modal / .ai-modal-panel)은 설정 모달과 같은 것을 쓴다 — 모바일 전체화면 규칙과 어두운 바탕이 거기 이미 붙어 있고, 색은 전부 토큰이라 다크 모드가 저절로 따라온다. */ .cite-modal-panel { /* 판시 한 문단이 한눈에 들어오는 폭. 그 이상 넓히면 눈이 줄을 놓친다. */ max-width: min(820px, 92vw); } .cite-modal-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; color: var(--text-muted); } .cite-modal-file { font-size: 13px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; } .cite-modal-page { padding: 0 6px; border-radius: 999px; background: var(--surface-2); font-size: 11px; line-height: 18px; font-weight: 600; } /* 원문 자체. 칩은 user-select 를 풀어 두었지만 여기서는 반대로, 그대로 긁어 한글에 붙일 수 있어야 한다 — 변호사가 판시를 인용문으로 옮겨 적는 자리다. */ .cite-modal-quote { margin: 0; padding: 14px 16px; border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; background: var(--surface-2); color: var(--text); font-size: 15px; line-height: 1.85; letter-spacing: -0.2px; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; } /* 좌표는 맞지만 자료 이름이 이 문장의 것이라는 보장이 없는 인용. 칩에서 한 번 경고했더라도 여기서 또 말한다 — 원문을 읽는 자리가 여기이고, "이 판시가 정말 저 사건번호의 것인가" 를 의심할 자리도 여기다. */ .cite-modal-warn { display: flex; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; background: var(--tint-amber-bg); color: var(--tint-amber-fg); font-size: 12.5px; line-height: 1.65; } .cite-modal-warn .ico { flex: none; margin-top: 2px; } /* 스캔본이라 원문이 비는 경우. 빈 상자로 두면 고장으로 읽힌다. */ .cite-modal-empty { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); color: var(--text-muted); font-size: 13px; line-height: 1.7; } .cite-modal-empty strong { color: var(--text); font-size: 14px; } /* 이 한 줄이 스캔본 분기에서 "그래서 무엇을 하면 되는가" 를 말하는 유일한 문장이다. --text-muted 는 이 바탕(--surface-2) 위에서 2.8:1 밖에 안 나와 AA(4.5:1)에 못 미쳤다. 공통 토큰을 올리면 앱 전체가 따라 움직이므로, 여기서만 한 단계 진한 토큰을 쓴다. */ .cite-modal-empty span { color: var(--text-secondary); } .cite-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .cite-modal-actions .btn, .cite-modal-actions .btn-ghost-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; text-decoration: none; } .cite-modal-frame { margin-top: 14px; } .cite-modal-frame[hidden] { display: none; } .cite-modal-iframe { display: block; width: 100%; height: min(62vh, 620px); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); } /* 안내문도 같은 이유로 --text-muted 를 쓰지 않는다. 작은 글자일수록 대비가 더 필요하다. */ .cite-modal-note { margin: 6px 2px 0; font-size: 11.5px; color: var(--text-secondary); } @media (max-width: 600px) { /* 좁은 화면에서는 셸이 이미 전체화면이 된다. 여기서는 읽는 크기와 버튼이 엄지에 닿는 폭만 다시 맞춘다. */ .cite-modal-quote { padding: 12px 14px; font-size: 14.5px; line-height: 1.8; } .cite-modal-actions .btn, .cite-modal-actions .btn-ghost-pill { flex: 1 1 auto; justify-content: center; } .cite-modal-iframe { height: 56vh; } } .chat-msg-user .chat-msg-bubble code { background: rgba(255,255,255,0.18); } .chat-msg-bubble pre { margin: 6px 0; padding: 10px 12px; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 8px; overflow-x: auto; } .chat-msg-bubble table { border-collapse: collapse; margin: 6px 0; font-size: 12px; display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .chat-msg-bubble th, .chat-msg-bubble td { border: 1px solid var(--border-strong); padding: 4px 8px; text-align: left; white-space: nowrap; } /* 응답 대기 (typing dots) */ .chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; } .chat-typing span { width: 6px; height: 6px; background: var(--text-secondary); border-radius: 50%; animation: chat-typing-bounce 1.2s ease-in-out infinite; } .chat-typing span:nth-child(2) { animation-delay: 0.15s; } .chat-typing span:nth-child(3) { animation-delay: 0.30s; } @keyframes chat-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } /* ── 진행 패널 (서면 작성은 p90 156초. 그동안 무엇을 하는 중인지 보여준다) ── */ .chat-progress { margin: 0 0 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); overflow: hidden; } .chat-progress-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-secondary); text-align: left; } .chat-progress-spinner { flex: none; width: 12px; height: 12px; border: 2px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: chat-progress-spin 0.8s linear infinite; } @keyframes chat-progress-spin { to { transform: rotate(360deg); } } .chat-progress.is-finished .chat-progress-spinner { animation: none; border-color: var(--success); } .chat-progress-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .chat-progress-time { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; } .chat-progress-caret { flex: none; color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out-toss); } .chat-progress.is-collapsed .chat-progress-caret { transform: rotate(-90deg); } .chat-progress.is-collapsed .chat-progress-body { display: none; } /* 진행 상세 — 단계 문구가 몇 분씩 그대로인 구간에 "지금 적고 있는 것" 이 흐른다. 단계 이름보다 한 단 낮게 보여야 무엇이 제목이고 무엇이 진행인지 헷갈리지 않는다. */ .chat-progress-detail { padding: 0 10px 8px 30px; /* 스피너(12) + gap(8) + 좌패딩(10) 만큼 들여 쓴다 */ margin-top: -2px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; /* 쟁점 한 줄이 길다. 두 줄에서 자른다 */ -webkit-box-orient: vertical; overflow: hidden; } .chat-progress-detail[hidden] { display: none; } /* REQUEST_ 왕복이 반복되면 단계가 10개를 넘을 수 있다. 진행 패널이 화면을 잡아먹지 않도록 높이를 묶는다 (완료되면 어차피 한 줄로 접힌다). */ .chat-progress-body { max-height: 200px; padding: 0 10px 8px; overflow-y: auto; } .chat-progress-steps { margin: 0; padding: 0; list-style: none; } .chat-progress-step { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; color: var(--text-muted); } .chat-progress-step.is-running { color: var(--text-secondary); } .chat-progress-mark { flex: none; width: 6px; height: 6px; margin: 0 3px; border-radius: 50%; background: var(--text-disabled); } .chat-progress-step.is-running .chat-progress-mark { background: var(--primary); animation: chat-progress-pulse 1.4s ease-in-out infinite; } .chat-progress-step.is-done .chat-progress-mark { background: var(--success); } @keyframes chat-progress-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } .chat-progress-step-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-progress-step-time { flex: none; color: var(--text-disabled); font-variant-numeric: tabular-nums; } .chat-progress-reasoning { margin-top: 6px; } .chat-progress-reasoning > summary { cursor: pointer; font-size: 12px; color: var(--text-muted); list-style: none; } .chat-progress-reasoning > summary::-webkit-details-marker { display: none; } .chat-progress-reasoning > summary::before { content: '▸ '; color: var(--text-disabled); } .chat-progress-reasoning[open] > summary::before { content: '▾ '; } .chat-progress-reasoning-body { max-height: 160px; margin-top: 6px; padding: 8px 10px; overflow-y: auto; border-radius: 8px; background: var(--surface); font-size: 12px; line-height: 1.6; color: var(--text-muted); white-space: pre-wrap; word-break: break-word; } /* 생성이 중간에 끊긴 답변 — 왜 여기서 끝났는지 알리고 재시도 경로를 준다 */ .chat-msg-aborted { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--text-secondary); } .chat-retry-btn { margin-left: auto; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--primary); cursor: pointer; } .chat-retry-btn:hover { background: var(--primary-soft); } .chat-loading { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; } .chat-spinner { width: 22px; height: 22px; border: 3px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; } /* 입력 바 */ .chat-input-bar { display: flex; align-items: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .chat-input { flex: 1; resize: none; padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; letter-spacing: -0.2px; outline: none; max-height: 180px; transition: border-color 120ms; } .chat-input:focus { border-color: var(--primary); } .chat-input:disabled { opacity: 0.6; cursor: not-allowed; } .chat-send-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--primary); color: var(--on-solid); border-radius: 14px; cursor: pointer; transition: background 120ms, transform 120ms; flex-shrink: 0; } .chat-send-btn:hover:not(:disabled) { background: var(--primary-strong); } .chat-send-btn:active:not(:disabled) { transform: scale(0.95); } .chat-send-btn:disabled { background: var(--border-strong); cursor: not-allowed; } .chat-send-btn .ico { width: 18px; height: 18px; } /* 모바일 — 사이드바를 슬라이드 패널처럼 */ @media (max-width: 720px) { /* chat 페이지 전용 — mobile-header(56 + safe-area-top) 아래부터 mobile-bottom-nav(64 + safe-area-bottom) 위까지 정확히 채움. */ .main:has(.chat-page) { height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)); min-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)); } .chat-page { grid-template-columns: 1fr; height: calc(100dvh - 56px - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } .chat-sidebar { position: fixed; /* mobile-header / bottom-nav 사이를 정확히 채우도록 safe-area 포함. */ top: calc(56px + env(safe-area-inset-top, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 50; width: 100%; border-right: none; transform: translateX(0); transition: transform 220ms var(--ease-out-toss, ease-out); } .chat-sidebar.is-hidden-mobile { transform: translateX(-100%); pointer-events: none; } .chat-mobile-back { display: inline-flex; } .chat-thread { padding: 16px 14px 8px; } .chat-input-bar { padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); } .chat-empty-title { font-size: 16px; } /* 모바일에서 메시지 버블 폭을 충분히 — 테이블 가로 스크롤 안전성 */ .chat-msg-bubble { max-width: 92%; } } /* 서면·리서치 — 응답 안의 추천 질문 칩 (assistant 버블 아래) */ .chat-suggest-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: min(720px, 84%); margin-left: 38px; } .chat-suggest-chip { padding: 7px 13px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 16px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: -0.2px; line-height: 1.3; transition: background 120ms var(--ease-out-toss, ease-out), color 120ms, border-color 120ms; white-space: normal; text-align: left; } .chat-suggest-chip:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } /* ========================================================= 기일 캘린더 (/calendar) — 월 그리드 + 선택일 패널 ========================================================= */ .cal-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .cal-toolbar-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .cal-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; } .cal-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; } .cal-toolbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cal-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .cal-arrow:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .cal-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .cal-arrow .ico { width: 16px; height: 16px; display: block; } /* i-chevron-left 스프라이트가 없어 우측 화살표를 반전해 사용 */ .cal-arrow-flip { transform: scaleX(-1); } .cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .cal-main { margin: 0; padding: 0; overflow: hidden; } .cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border-strong); } .cal-weekdays > div { padding: 10px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; } .cal-weekdays .is-sun { color: var(--danger); } .cal-weekdays .is-sat { color: var(--primary); } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); } .cal-loading { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--text-muted); font-size: 14px; } .cal-day { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 6px 6px 8px; border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); font-family: inherit; text-align: left; cursor: pointer; transition: background 100ms ease; } .cal-day:nth-child(7n) { border-right: none; } .cal-day:nth-child(n+36) { border-bottom: none; } .cal-day:hover { background: var(--surface-2); } .cal-day:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .cal-day.is-other { background: var(--bg); } .cal-day.is-other .cal-day-num { color: var(--text-disabled); } .cal-day.is-selected { background: var(--primary-soft); } .cal-day.is-selected:hover { background: var(--primary-soft); } .cal-day-num { align-self: flex-start; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-secondary); line-height: 22px; text-align: center; } .cal-day.is-sun .cal-day-num { color: var(--danger); } .cal-day.is-sat .cal-day-num { color: var(--primary); } /* 오늘 — 구글 캘린더처럼 파란 원 */ .cal-day.is-today .cal-day-num { background: var(--primary); color: var(--on-solid); } /* 모바일 전용 점 표시 */ .cal-day-dot { display: none; } .cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cal-chip { display: flex; align-items: baseline; gap: 4px; min-width: 0; padding: 2px 5px; border-radius: 4px; background: var(--primary-soft); color: var(--primary-strong); font-size: 11px; line-height: 1.35; } .cal-chip.is-closed { background: var(--surface-2); color: var(--text-muted); } .cal-chip-time { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; } .cal-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-chip-more { padding: 0 5px; font-size: 11px; font-weight: 600; color: var(--text-muted); } /* ── 선택일 패널 ── */ .cal-side { margin: 0; padding: 0; position: sticky; top: 20px; } .cal-side-head { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .cal-side-date { font-size: 15px; font-weight: 700; } .cal-side-sub { font-size: 12px; font-weight: 600; color: var(--primary); } .cal-side-list { max-height: calc(100vh - 220px); overflow-y: auto; } .cal-side-empty { padding: 32px 16px; text-align: center; font-size: 13px; color: var(--text-muted); } .cal-event { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: inherit; transition: background 100ms ease; } .cal-event:last-child { border-bottom: none; } .cal-event:hover { background: var(--surface-2); } .cal-event-time { flex: 0 0 auto; width: 40px; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.6; } .cal-event-body { flex: 1 1 auto; min-width: 0; } .cal-event-head { display: flex; align-items: center; gap: 6px; min-width: 0; } .cal-event-head > .tag { flex: 0 0 auto; padding: 2px 8px; font-size: 11px; } .cal-event-title { min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-event-sub { margin-top: 3px; font-size: 12px; color: var(--text-secondary); } .cal-event-meta { margin-top: 2px; font-size: 11px; color: var(--text-muted); } .cal-event-arrow { flex: 0 0 auto; color: var(--text-muted); margin-top: 4px; } @media (max-width: 1100px) { .cal-body { grid-template-columns: minmax(0, 1fr); } .cal-side { position: static; } .cal-side-list { max-height: none; } } @media (max-width: 768px) { .cal-toolbar { align-items: center; margin-bottom: 12px; } .cal-title { font-size: 20px; } .cal-count { display: none; } /* 모바일 — 셀에 칩 대신 점만, 상세는 아래 패널에서 */ .cal-grid { grid-auto-rows: minmax(46px, auto); } .cal-day { align-items: center; justify-content: flex-start; gap: 3px; padding: 5px 2px; } .cal-day-num { align-self: center; } .cal-chips { display: none; } .cal-day.has-events .cal-day-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); } .cal-day.has-events.is-today .cal-day-dot { background: var(--primary-strong); } .cal-day:nth-child(n+36) { border-bottom: 1px solid var(--border); } } /* 캘린더 — 종결 포함 토글 / 종일 항목 */ .cal-closed-toggle { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; } .cal-closed-toggle input { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; } .cal-chip.is-allday { background: var(--surface-2); color: var(--text-secondary); } .cal-chip.is-allday.is-closed { color: var(--text-muted); } .cal-event-time.is-allday { font-size: 11px; font-weight: 600; color: var(--text-muted); } /* ═══════ 설정 모달 ═══════ */ .set-body { padding: 4px 20px 8px; } .set-section { padding: 16px 0; border-bottom: 1px solid var(--border); } .set-section:last-child { border-bottom: 0; } .set-label { display: block; font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .set-desc { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); } .set-section > select, .set-section > textarea { margin-top: 10px; width: 100%; } .set-section > select { -webkit-appearance: none; appearance: none; padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%238B95A1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px; cursor: pointer; } .set-section > textarea { resize: vertical; line-height: 1.6; } .set-note { margin-top: 6px; font-size: 12px; color: var(--primary); font-weight: 600; } .set-note:empty { display: none; } /* 설정의 프로필 사진 — 사이드바 원과 같은 모양을 크게 그린다. */ .set-avatar-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; } .set-avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-size: 24px; font-weight: 700; line-height: 1; } .set-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .set-avatar-actions { display: flex; align-items: center; gap: 8px; } .set-avatar-btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 9px; cursor: pointer; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); } .set-avatar-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .set-avatar-btn:disabled { opacity: 0.5; cursor: default; } /* 삭제는 되돌리기 어려운 쪽이라 눈에 덜 띄게 둔다. */ .set-avatar-btn.is-quiet { border-color: transparent; color: var(--text-muted); } .set-avatar-btn.is-quiet:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); } .set-counter { margin-top: 6px; text-align: right; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* 토글 스위치 */ /* ─── 화면 테마 고르기 ─── 견본(swatch)은 실제 팔레트 토큰이 아니라 고정색으로 그린다. 지금 걸린 테마와 무관하게 '밝게'는 밝게, '어둡게'는 어둡게 보여야 고르기 전에 무엇을 고르는지 알 수 있기 때문. */ .set-theme { display: flex; gap: 8px; margin-top: 12px; } .set-theme-opt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; font-family: inherit; letter-spacing: -0.2px; cursor: pointer; transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1); } .set-theme-opt:hover { border-color: var(--primary); color: var(--text); } .set-theme-opt.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); } .set-theme-swatch { width: 100%; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); overflow: hidden; } .set-theme-swatch.is-light { background: linear-gradient(160deg, #FFFFFF 0%, #F2F4F6 100%); } .set-theme-swatch.is-dark { background: linear-gradient(160deg, #262A32 0%, #16181D 100%); } /* '시스템에 맞춤' — 반으로 갈라 둘 다 보여준다 */ .set-theme-swatch.is-system { background: linear-gradient(105deg, #FFFFFF 0%, #F2F4F6 49%, #262A32 51%, #16181D 100%); } .set-switch-row { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; } .set-switch-row > span:first-child { flex: 1; min-width: 0; } .set-switch { position: relative; flex-shrink: 0; margin-top: 2px; } .set-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; /* 트랙(형제 span)이 뒤에 오므로 z-index 없이는 input 위에 깔려 스위치를 직접 클릭할 수 없다. */ z-index: 1; } .set-switch-track { display: block; width: 44px; height: 26px; border-radius: 999px; background: var(--border); transition: background 160ms var(--ease-out-toss, ease-out); } .set-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--on-solid); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 160ms var(--ease-out-toss, ease-out); } .set-switch input:checked ~ .set-switch-track { background: var(--primary); } .set-switch input:checked ~ .set-switch-track::after { transform: translateX(18px); } .set-switch input:focus-visible ~ .set-switch-track { outline: 2px solid var(--primary); outline-offset: 2px; } /* footer */ .set-footer { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface, #fff); } .set-status { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .set-status.is-ok { color: var(--success); } .set-status.is-err { color: var(--danger); } /* 푸시 알림 스위치 아래 줄 — 진행 중은 안내색, 실패는 빨강 */ .set-note.is-err { color: var(--danger); } /* 인라인 패널 (내 정보 페이지) — 모달 셸 대신 카드 안에 그대로 얹는다 */ .set-panel-inline .set-body { padding: 0; } .set-panel-inline .set-section:first-child { padding-top: 4px; } .set-panel-inline .set-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); } /* ═══════════════════════════════════════════════ 의견 나눔 (피드백 · 토론의 장) ═══════════════════════════════════════════════ */ .fb-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .fb-title-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .fb-title-actions .btn { display: inline-flex; align-items: center; gap: 6px; } .fb-back-link { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; } .fb-back-link:hover { color: var(--text-secondary); } /* ─── 필터 바 */ .fb-filters { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; } .fb-filters .chip-row { flex: 1; min-width: 0; } .fb-filters .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .fb-filters .chip.is-on { background: var(--text); color: var(--bg); } .fb-filters .chip.is-on:hover { background: var(--text); } .fb-chip-n { font-size: 11px; font-weight: 700; opacity: 0.55; } .fb-chip-mine { margin-left: 4px; } .fb-sort select { height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%238B95A1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); appearance: none; -webkit-appearance: none; cursor: pointer; } /* ─── 목록 */ .fb-list { display: flex; flex-direction: column; gap: 10px; } .fb-item { display: flex; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: background var(--dur-2) var(--ease-out-toss), box-shadow var(--dur-2) var(--ease-out-toss); } .fb-item:hover { background: var(--surface-2); box-shadow: var(--shadow-2); } .fb-item-body { flex: 1; min-width: 0; } .fb-item-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .fb-item-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--text); text-decoration: none; letter-spacing: -0.02em; word-break: break-word; } .fb-item-title:hover { color: var(--primary-strong); } .fb-item-excerpt { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: var(--text-secondary); word-break: break-word; } .fb-item-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--text-muted); } .fb-item-comments { display: inline-flex; align-items: center; gap: 4px; } /* ─── 공감 버튼 */ .fb-vote { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0; width: 48px; min-height: 48px; padding: 6px 0; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-md); font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: background var(--dur-2) var(--ease-out-toss), color var(--dur-2) var(--ease-out-toss), transform var(--dur-1) var(--ease-out-toss); } .fb-vote:hover { background: var(--border-strong); color: var(--text-secondary); } .fb-vote:active { transform: scale(0.94); } .fb-vote.is-on { background: var(--primary-soft); border-color: var(--tint-blue-bg); color: var(--primary-strong); } .fb-vote:disabled { opacity: 0.5; cursor: default; } .fb-vote-lg { flex-direction: row; width: auto; min-height: 0; padding: 9px 16px; gap: 7px; border-radius: var(--r-pill); font-size: 13px; } /* ─── 분류 칩 / 상태 배지 */ .fb-cat-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--text-secondary); } .fb-cat-chip.cat-bug { background: var(--danger-soft); color: var(--tint-red-fg); } .fb-cat-chip.cat-idea { background: var(--primary-soft); color: var(--primary-strong); } .fb-cat-chip.cat-question { background: var(--warning-soft); color: var(--tint-amber-fg); } .fb-cat-chip.cat-praise { background: var(--success-soft); color: var(--tint-green-fg); } .fb-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--text-muted); } .fb-status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .fb-status-badge.s-reviewing { background: var(--warning-soft); color: var(--tint-amber-fg); } .fb-status-badge.s-planned { background: var(--primary-soft); color: var(--primary-strong); } .fb-status-badge.s-done { background: var(--success-soft); color: var(--tint-green-fg); } .fb-status-badge.s-wontfix { background: var(--surface-2); color: var(--text-disabled); } .fb-mine-badge { padding: 3px 7px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 11px; font-weight: 700; color: var(--text-muted); } .fb-empty { padding: 44px 20px; text-align: center; font-size: 13.5px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } /* ─── 글쓰기 폼 */ .fb-form { padding: 16px 20px 18px; } .fb-field-label { display: block; margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--text); } .fb-field-label:first-child { margin-top: 0; } .fb-counter { float: right; font-weight: 600; color: var(--text-disabled); font-size: 11.5px; } .fb-cat-pick { margin-bottom: 4px; } .fb-input, .fb-textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--text); transition: border-color var(--dur-2) var(--ease-out-toss); } .fb-textarea { resize: vertical; } .fb-input:focus, .fb-textarea:focus { outline: none; border-color: var(--primary); } .fb-input::placeholder, .fb-textarea::placeholder { color: var(--text-disabled); } .fb-anon { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; } .fb-anon input { margin-top: 2px; accent-color: var(--primary); } .fb-anon em { font-style: normal; font-weight: 500; color: var(--text-muted); } .fb-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .fb-form-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ─── 상세 */ .fb-detail { margin-bottom: 14px; } .fb-detail-title { margin: 10px 0 0; font-size: 21px; font-weight: 800; line-height: 1.4; letter-spacing: -0.03em; color: var(--text); word-break: break-word; } .fb-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); } .fb-detail-page code { padding: 1px 5px; background: var(--surface-2); border-radius: 4px; font-size: 11.5px; } .fb-detail-content { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 14.5px; line-height: 1.8; color: var(--text); white-space: pre-wrap; word-break: break-word; } .fb-detail-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); } .fb-status-pick { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .fb-status-pick select { height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%238B95A1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; font-size: 12.5px; font-weight: 600; color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; } .fb-delete { margin-left: auto; color: var(--text-muted); } .fb-delete:hover { color: var(--danger); } /* ─── 댓글 */ .fb-comments { display: flex; flex-direction: column; gap: 2px; } .fb-comment { padding: 14px 0; border-bottom: 1px solid var(--border); } .fb-comment:last-child { border-bottom: 0; } .fb-comment.is-staff { margin: 6px 0; padding: 14px 16px; background: var(--primary-soft); border: 0; border-radius: var(--r-md); } .fb-comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .fb-comment-author { font-size: 13px; font-weight: 700; color: var(--text); } .fb-staff-badge { padding: 2px 7px; background: var(--primary); color: var(--on-solid); border-radius: var(--r-sm); font-size: 10.5px; font-weight: 700; } .fb-comment-time { font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .fb-comment-del { margin-left: auto; padding: 2px 6px; background: none; border: 0; font-size: 11.5px; font-weight: 600; color: var(--text-disabled); cursor: pointer; } .fb-comment-del:hover { color: var(--danger); } .fb-comment-body { font-size: 13.5px; line-height: 1.75; color: var(--text-secondary); word-break: break-word; } .fb-comment-empty { padding: 24px 0; text-align: center; font-size: 13px; color: var(--text-muted); } .fb-comment-write { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .fb-comment-write-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; } /* ─── AI 답변 평가 (운영자 화면) */ .fb-rating-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 14px; } .fb-rating-stat { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: center; } .fb-rating-stat-n { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: var(--text); } .fb-rating-pct { font-size: 15px; font-weight: 700; margin-left: 1px; } .fb-rating-stat-l { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .fb-rating-stat.up .fb-rating-stat-n { color: var(--success); } .fb-rating-stat.down .fb-rating-stat-n { color: var(--danger); } .fb-rating-list { display: flex; flex-direction: column; gap: 12px; } .fb-rating-item { padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-md); } .fb-rating-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .fb-rating-who { font-size: 12.5px; font-weight: 700; color: var(--text); } .fb-rating-time { font-size: 11.5px; color: var(--text-muted); } .fb-reason-chip { padding: 2px 7px; background: var(--danger-soft); color: var(--tint-red-fg); border-radius: var(--r-sm); font-size: 11px; font-weight: 700; } .fb-rating-comment { margin-bottom: 8px; font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; } .fb-rating-answer { padding: 10px 12px; background: var(--surface); border-radius: var(--r-sm); font-size: 12px; line-height: 1.7; color: var(--text-muted); white-space: pre-wrap; word-break: break-word; } /* ─── 채팅 답변 평가 버튼 */ .chat-rate-btn.is-up.is-on { background: var(--success-soft); color: var(--tint-green-fg); border-color: color-mix(in srgb, var(--tint-green-fg) 45%, transparent); } .chat-rate-btn.is-down.is-on { background: var(--danger-soft); color: var(--tint-red-fg); border-color: color-mix(in srgb, var(--tint-red-fg) 45%, transparent); } .chat-rate-thanks { font-size: 11.5px; font-weight: 600; color: var(--text-muted); align-self: center; } /* 아쉬움 사유 입력 패널 — 답변 아래에 접혀 나온다 */ .chat-rate-panel { margin-top: 8px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-md); } .chat-rate-panel-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 9px; } .chat-rate-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .chat-rate-reason { padding: 5px 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: background var(--dur-1) var(--ease-out-toss); } .chat-rate-reason:hover { background: var(--primary-soft); } .chat-rate-reason.is-on { background: var(--text); border-color: var(--text); color: var(--bg); } .chat-rate-panel textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); font-family: inherit; font-size: 12.5px; line-height: 1.6; color: var(--text); resize: vertical; } .chat-rate-panel textarea:focus { outline: none; border-color: var(--primary); } .chat-rate-panel-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 9px; } @media (max-width: 600px) { .fb-title-row { flex-direction: column; align-items: stretch; } .fb-title-actions { justify-content: flex-end; } .fb-filters { flex-direction: column; align-items: stretch; gap: 8px; } .fb-sort select { width: 100%; } .fb-item { padding: 14px 15px; gap: 11px; } .fb-vote { width: 42px; min-height: 42px; } .fb-detail-title { font-size: 18.5px; } .fb-rating-stats { grid-template-columns: 1fr; } .fb-form-foot { flex-direction: column; align-items: stretch; } .fb-form-btns { justify-content: flex-end; } } /* ─── 첨부: 업로드 영역 */ .fb-drop { display: flex; align-items: center; justify-content: center; padding: 18px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur-2) var(--ease-out-toss), background var(--dur-2) var(--ease-out-toss); } .fb-drop:hover, .fb-drop:focus-visible { border-color: var(--primary); background: var(--primary-soft); } .fb-drop.is-over { border-color: var(--primary); background: var(--primary-soft); } .fb-drop-hint { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); } .fb-drop-hint svg { color: var(--text-muted); } .fb-drop-hint b { font-weight: 700; color: var(--text); } .fb-drop-hint small { font-size: 11.5px; color: var(--text-disabled); } .fb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .fb-thumbs:empty { display: none; } .fb-thumb { position: relative; width: 84px; height: 84px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); } .fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fb-thumb-loading { display: flex; align-items: center; justify-content: center; height: 100%; } .fb-thumb-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--overlay-strong); color: var(--on-solid); border: 0; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; } .fb-thumb-del:hover { background: rgba(15, 22, 33, 0.92); } /* ─── 첨부: 링크 입력 */ .fb-links { display: flex; flex-direction: column; gap: 8px; } .fb-links:empty { display: none; } .fb-link-row { display: flex; gap: 6px; align-items: center; } .fb-link-row .fb-link-url { flex: 1.6; min-width: 0; } .fb-link-row .fb-link-title { flex: 1; min-width: 0; } .fb-link-row .fb-input { padding: 9px 11px; font-size: 13px; } .fb-link-del { flex-shrink: 0; width: 30px; height: 30px; background: none; border: 0; border-radius: var(--r-sm); font-size: 18px; line-height: 1; color: var(--text-disabled); cursor: pointer; } .fb-link-del:hover { background: var(--surface-2); color: var(--danger); } .fb-link-add { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 7px 12px; background: var(--surface-2); border: 0; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; } .fb-link-add:hover { background: var(--border-strong); color: var(--text); } .fb-link-add:disabled { opacity: 0.45; cursor: default; } /* ─── 목록 썸네일 */ .fb-item-thumb { position: relative; display: inline-block; margin-top: 10px; width: 96px; height: 68px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; } .fb-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fb-item-thumb-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--overlay); color: var(--on-solid); font-size: 13px; font-weight: 700; } /* ─── 상세: 이미지 · 링크 */ .fb-detail-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .fb-detail-image { padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; cursor: zoom-in; max-width: 220px; transition: transform var(--dur-2) var(--ease-out-toss), box-shadow var(--dur-2) var(--ease-out-toss); } .fb-detail-image:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); } .fb-detail-image img { display: block; max-width: 100%; height: auto; } .fb-detail-links { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; } .fb-link-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--surface-2); border-radius: var(--r-md); text-decoration: none; color: var(--text); transition: background var(--dur-2) var(--ease-out-toss); } .fb-link-item:hover { background: var(--border-strong); } .fb-link-item > .ico { flex-shrink: 0; color: var(--primary); } .fb-link-item-body { flex: 1; min-width: 0; } .fb-link-item-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fb-link-item-url { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fb-link-item-ext { flex-shrink: 0; color: var(--text-disabled); } /* ─── 이미지 확대 보기 */ .fb-zoom { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; background: rgba(10, 15, 22, 0.9); animation: toss-fade 180ms var(--ease-out-toss); padding: 56px 20px; } .fb-zoom-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); cursor: default; } .fb-zoom-close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); color: var(--on-solid); border: 0; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; } .fb-zoom-close:hover { background: rgba(255, 255, 255, 0.26); } .fb-zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); color: var(--on-solid); border: 0; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; } .fb-zoom-nav:hover { background: rgba(255, 255, 255, 0.26); } .fb-zoom-nav[hidden] { display: none; } .fb-zoom-nav.prev { left: 16px; } .fb-zoom-nav.next { right: 16px; } .fb-zoom-name { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.78); } @media (max-width: 600px) { .fb-link-row { flex-wrap: wrap; } .fb-link-row .fb-link-url, .fb-link-row .fb-link-title { flex: 1 1 100%; } .fb-link-del { margin-left: auto; } .fb-detail-image { max-width: 100%; } .fb-zoom { padding: 52px 8px; } .fb-zoom-nav { width: 38px; height: 38px; } } /* ─── 글쓰기 폼 다듬기 첨부 UI 가 들어오며 폼이 길어져 등록 버튼이 스크롤 아래로 묻혔다. 버튼 줄을 패널 바닥에 붙여 스크롤 위치와 상관없이 늘 보이게 한다. */ .fb-form-foot { position: sticky; bottom: -18px; z-index: 2; margin: 20px -20px -18px; padding: 14px 20px; background: var(--surface); border-top: 1px solid var(--border-strong); } /* '상태' 두 글자가 세로로 쪼개지던 것. margin-bottom 은 전역 label 규칙(display:block; margin-bottom:8px)이 남긴 것이다. 여기는 align-items:center 인 가로 flex 라 flexbox 가 **마진 박스**를 가운데 맞춘다 — 아래에만 8px 이 붙어 있으면 글자가 그만큼 위로 뜬다(셀렉트 중심보다 4px 높았다). */ .fb-status-pick label { white-space: nowrap; margin-bottom: 0; } /* 이름 옆 직책. 이름보다 한 단 낮게 보여 이름과 붙어 읽히도록 한다. */ .fb-pos { font-style: normal; font-weight: 500; color: var(--text-muted); opacity: 0.85; } .fb-comment-author .fb-pos { font-weight: 500; } /* 변경 안내 문구도 같은 이유로 세로로 쪼개졌다 — .set-status 는 설정 모달 푸터용이라 flex:1(basis 0) 을 갖고 있는데, 폭이 내용만큼인 .fb-status-pick 안에서는 그게 폭 0 이 된다. */ .fb-status-pick { flex-wrap: wrap; } .fb-status-pick .set-status { flex: 0 0 auto; white-space: nowrap; } /* 전역 폼 규칙의 select{width:100%} 가 이 셀렉트까지 늘려서 '상태'·안내문구를 아래로 밀어내고 있었다. */ .fb-status-pick select { width: auto; } /* 좁은 화면에서 '공감 0' 이 쪼개지던 것 — 목록의 작은 세로형 버튼을 위한 @media(max-width:600px) .fb-vote{width:42px} 가 상세의 가로형 버튼까지 잡아 글자를 눌렀다. */ .fb-detail-actions .fb-vote-lg { flex: 0 0 auto; white-space: nowrap; width: auto; } /* ========================================================= 어드민 콘솔 (/admin) — twdong · drkkyubrother 전용 ========================================================= */ .sidebar .footer .footer-link.is-on { color: var(--primary); font-weight: 600; } .adm-tabs { margin: 4px 0 20px; } .adm-n { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; background: var(--surface-2); font-size: 11px; font-weight: 700; color: var(--text-muted); } /* 활성 칩은 글자색으로 뒤집힌 알약(라이트=검정, 다크=흰색)이라 배지 색을 흰색으로 박으면 다크에서 흰 알약 위의 흰 배지가 된다. 알약의 글자색(currentColor)을 따라간다. */ .chip.active .adm-n { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; } .adm-stats { display: grid; gap: 12px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .adm-sub { font-size: 12px; color: var(--text-muted); } .stat .adm-sub { margin-top: 6px; } .stat.primary .adm-sub { color: color-mix(in srgb, currentColor 85%, transparent); } .adm-live { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-strong); font-size: 13px; font-weight: 600; } .adm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: adm-pulse 1.4s ease-in-out infinite; } @keyframes adm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .adm-grid { display: grid; gap: 16px; grid-template-columns: 1.3fr 1fr; align-items: start; } @media (max-width: 900px) { .adm-grid { grid-template-columns: 1fr; } } /* 일별 막대 */ .adm-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; } .adm-bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .adm-bar { min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--primary) 0%, #6BA7FA 100%); transition: opacity var(--dur-1); } .adm-bar-col:hover .adm-bar { opacity: 0.75; } .adm-bar-label { margin-top: 6px; font-size: 10px; color: var(--text-muted); text-align: center; white-space: nowrap; } /* 모델 분포 */ .adm-models { display: flex; flex-direction: column; gap: 14px; } .adm-model-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; } .adm-model-name { font-size: 13px; font-weight: 600; color: var(--text); } .adm-model-n { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .adm-track { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .adm-fill { height: 100%; border-radius: 4px; background: var(--primary); } .adm-model-note { margin-top: 5px; font-size: 11px; color: var(--text-muted); } .adm-caveat { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); line-height: 1.6; } .adm-caveat strong { color: var(--text-secondary); } /* 표 */ .adm-table-wrap { overflow-x: auto; } .adm-user-identity { display: flex; align-items: center; gap: 10px; } .adm-user-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; overflow: hidden; border-radius: 50%; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); font-size: 14px; font-weight: 700; } .adm-user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .adm-user-profile { margin-bottom: 18px; } .adm-user-profile .adm-user-avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 21px; } /* 표 안의 사람 칸 — 사진 옆에 이름·사번·근무지가 쌓이므로 위를 맞추고 원을 줄인다 */ .adm-table .adm-user-identity { align-items: flex-start; gap: 8px; } .adm-table .adm-user-identity .adm-user-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; } /* 대화 전문의 말풍선 머리 — 줄 안에 들어가는 크기 */ .adm-identity-xs { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; } .adm-identity-xs .adm-user-avatar { width: 20px; height: 20px; flex-basis: 20px; font-size: 10px; } .adm-table { width: 100%; border-collapse: collapse; font-size: 13px; } .adm-table th { padding: 12px 14px; text-align: left; white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em; border-bottom: 1px solid var(--border-strong); } .adm-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .adm-table tr:last-child td { border-bottom: 0; } .adm-table tbody tr:hover { background: var(--surface-2); } .adm-table .num { text-align: right; font-variant-numeric: tabular-nums; } .adm-table-sm { font-size: 12px; } .adm-table-sm th, .adm-table-sm td { padding: 8px 10px; } .adm-who { font-weight: 600; color: var(--text); } .adm-row-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; } .adm-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; } .adm-tag-dim { color: var(--text-muted); font-weight: 500; } .adm-tag-soft { background: var(--primary-soft); color: var(--primary-strong); margin-left: 4px; } .adm-tag-live { background: var(--primary); color: var(--button-primary-fg, var(--on-solid)); margin-left: 6px; } /* 대화 목록 */ /* 전역 select 가 width:100% 라 flex 로 두면 줄이 쪼개진다 — grid 로 칸을 고정 */ .adm-chat-filters { display: grid; gap: 8px; margin-bottom: 14px; grid-template-columns: 1fr 220px auto; } @media (max-width: 700px) { .adm-chat-filters { grid-template-columns: 1fr; } } .adm-chat-filters input[type="search"], .adm-chat-filters select { width: 100%; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 14px; background: var(--surface); font-weight: 500; } .adm-chat-filters .btn { padding: 10px 20px; font-size: 14px; } .adm-chat-list { display: flex; flex-direction: column; gap: 8px; } .adm-chat-row { display: flex; gap: 16px; align-items: flex-start; width: 100%; padding: 14px 16px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color var(--dur-1), transform var(--dur-1); } .adm-chat-row:hover { border-color: var(--border-strong); } .adm-chat-row:active { transform: scale(0.995); } .adm-chat-main { flex: 1; min-width: 0; } .adm-chat-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .adm-chat-preview { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .adm-chat-meta { flex-shrink: 0; text-align: right; font-size: 12px; } .adm-chat-meta .adm-who { font-size: 12.5px; } .adm-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; font-size: 12px; color: var(--text-muted); } /* 모달 상세 */ .adm-detail-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; } .adm-k { display: inline-block; min-width: 130px; color: var(--text-muted); font-size: 12px; } .adm-h3 { margin: 20px 0 8px; font-size: 13px; font-weight: 700; color: var(--text); } .adm-pre { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-family: inherit; color: var(--text-secondary); } .adm-uploads { margin: 12px 0 0; font-size: 12px; color: var(--text-muted); } .adm-msgs { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .adm-msg { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); } .adm-msg-user { background: var(--primary-soft); } .adm-msg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .adm-msg-role { font-size: 12px; font-weight: 700; color: var(--text-secondary); } .adm-msg-user .adm-msg-role { color: var(--primary-strong); } .adm-msg-body { font-size: 13px; line-height: 1.75; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto; } /* ─── 운영 지표 패널 (실패·품질·평가·알림·작업·판결문 평가·모델) ─── */ .adm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .adm-toolbar .adm-sub { flex: 1; min-width: 200px; } .adm-toolbar select, .adm-toolbar input[type="search"] { width: auto; min-width: 120px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 13px; background: var(--surface); font-weight: 500; } .adm-toolbar input[type="search"] { min-width: 200px; } /* 개요 · 일별 대화·사용자 — 빠른 선택 칩 + 날짜 칸 */ .adm-range { margin-top: 4px; } .adm-range .chip-row { gap: 6px; } .adm-range .chip { padding: 6px 12px; font-size: 12.5px; } .adm-range-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); } .adm-toolbar input[type="date"] { width: auto; padding: 7px 10px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; color-scheme: light dark; } .adm-activity .adm-stats { margin-bottom: 14px; } .adm-activity .adm-grid-2 .card { margin: 0; } .adm-act-detail { margin-top: 14px; } .adm-act-detail > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 6px 0; } .adm-act-detail > summary:hover { color: var(--text); } .adm-act-detail .adm-table-wrap { max-height: 360px; overflow: auto; margin-top: 6px; } .adm-act-detail thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; } .adm-act-quiet td { color: var(--text-muted); } .adm-branch-wrap { max-height: 300px; overflow: auto; } .adm-table td.adm-dept .nw { white-space: nowrap; } .adm-branch-wrap thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; } @media (max-width: 600px) { /* 좁은 화면에선 막대 라벨을 하나 걸러 지운다 — 14개만 돼도 겹친다 */ .adm-bar-col:nth-child(even) .adm-bar-label { visibility: hidden; } .adm-activity > h2 { flex-wrap: wrap; } .adm-activity > h2 .adm-sub { flex-basis: 100%; margin-left: 0; } } .adm-grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); align-items: start; } .adm-grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; } @media (max-width: 1100px) { .adm-grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 800px) { .adm-grid-3, .adm-grid-2 { grid-template-columns: 1fr; } } .adm-pane .card > h2 { display: flex; align-items: center; gap: 8px; } .adm-pane .card > h2 .adm-sub { margin-left: auto; font-weight: 500; } /* 막대 위에 나쁜 몫(실패·근거 0)을 겹쳐 그린다 */ .adm-bar { position: relative; overflow: hidden; } .adm-bar-bad { position: absolute; left: 0; right: 0; bottom: 0; background: var(--danger); border-radius: 0 0 2px 2px; } .adm-bars.is-tall { height: 180px; } .adm-stat-bad .num { color: var(--danger); } .adm-stat-warn .num { color: #c77700; } /* 원인·사유 분포 — 모델 분포와 같은 트랙 */ .adm-dist { display: flex; flex-direction: column; gap: 10px; } .adm-dist .adm-fill.is-bad { background: var(--danger); } .adm-dist .adm-fill.is-warn { background: #e0a100; } .adm-dist .adm-fill.is-ok { background: #2f9e5f; } .adm-tag-bad { background: rgba(220, 53, 69, 0.12); color: var(--danger); } .adm-tag-ok { background: rgba(47, 158, 95, 0.14); color: #1f7a48; } .adm-tag-warn { background: rgba(224, 161, 0, 0.16); color: #8a5a00; } :root[data-theme="dark"] .adm-tag-ok { color: #6fd39a; } :root[data-theme="dark"] .adm-tag-warn { color: #f0c24d; } .adm-err { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-muted); word-break: break-all; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .adm-table .adm-clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-table tr.is-link { cursor: pointer; } .adm-table .nw, .adm-table .adm-who, .adm-table .num, .adm-table .adm-who + .adm-mini, .adm-table .adm-mini + .adm-mini { white-space: nowrap; } /* 정렬 가능한 머리글 — 누르면 그 열로, 켜진 열엔 방향 화살표 */ .adm-table th.sortable { cursor: pointer; user-select: none; } .adm-table th.sortable:hover { color: var(--text); } .adm-table th.sortable::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.35; border-top: 5px solid currentColor; } .adm-table th.sortable.is-asc::after { border-top: 0; border-bottom: 5px solid currentColor; opacity: 1; } .adm-table th.sortable.is-desc::after { opacity: 1; } .adm-table th.sortable.is-asc, .adm-table th.sortable.is-desc { color: var(--primary-strong); } .adm-table .adm-mini { font-size: 11.5px; color: var(--text-muted); } /* 2×2 격자 (사건 연결 × 근거 유무) */ .adm-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .adm-cell { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); } .adm-cell .adm-cell-k { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; } .adm-cell .adm-cell-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .adm-cell.is-bad { background: rgba(220, 53, 69, 0.10); } .adm-cell.is-bad .adm-cell-v { color: var(--danger); } .adm-cell .adm-sub { margin-top: 2px; } .adm-empty-note { padding: 14px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } .adm-panel-loading { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: 13px; } /* ========================================================= 판결문 가치판단 — 스킨 · 티어 ========================================================= 스킨은 테마와 직교한다. 테마가 '밝게/어둡게' 라면 스킨은 '어떤 색으로' 다. 그래서 스킨은 팔레트 토큰만 덮고 규칙은 건드리지 않는다 — 어느 스킨이든 다크로 볼 수 있고, 컴포넌트마다 스킨 전용 규칙이 생기지 않는다. 구조는 다크 테마와 같다. 값은 --sk-* / --sk-d-* 에 스킨마다 한 번 적고, 아래 세 개의 대입 블록이 그 값을 실제 토큰에 넣는다. 순서가 중요하다 — 대입 블록은 위쪽 다크 테마 블록보다 뒤에 있어야 한다. :root[data-skin] 과 :root[data-theme="dark"] 는 특이성이 같아서, 뒤에 온 쪽이 이긴다. 스킨을 고른 사람에게는 스킨 색이 보여야 한다. 적용은 이고, 무엇을 고를 수 있는지는 서버가 정한다 (base.html 스킨 스크립트 · services/valuation.py 의 티어). ========================================================= */ /* ─── 한지 (실버) — 종이의 미색. 오래 읽는 화면이라 눈부심을 낮춘다 */ :root[data-skin="hanji"] { --sk-bg: #F6F1E7; --sk-surface: #FFFCF5; --sk-surface-2: #EFE7D7; --sk-border: #E8DFCC; --sk-border-strong: #D9CDB4; --sk-primary: #A96A21; --sk-primary-strong: #85511A; --sk-primary-soft: #F6E9D5; --sk-text: #2E2820; --sk-text-secondary: #5B5142; --sk-text-muted: #8C8171; --sk-d-bg: #1B1813; --sk-d-surface: #241F19; --sk-d-surface-2: #2E2820; --sk-d-border: #362F26; --sk-d-border-strong: #463D31; --sk-d-primary: #DBA45C; --sk-d-primary-strong: #EFC287; --sk-d-primary-soft: rgba(219, 164, 92, 0.16); --sk-d-text: #EDE5D8; --sk-d-text-secondary: #B7AB98; --sk-d-text-muted: #8B8171; } /* ─── 미드나잇 (골드) — 깊은 남색 위의 청록 */ :root[data-skin="midnight"] { --sk-bg: #EEF3FA; --sk-surface: #FFFFFF; --sk-surface-2: #E3EBF6; --sk-border: #DCE5F2; --sk-border-strong: #C6D3E8; --sk-primary: #1E63C7; --sk-primary-strong: #14498F; --sk-primary-soft: #DEEAFB; --sk-text: #101C2E; --sk-text-secondary: #3C4C63; --sk-text-muted: #74839A; --sk-d-bg: #0B1220; --sk-d-surface: #121C2E; --sk-d-surface-2: #1A2639; --sk-d-border: #21304A; --sk-d-border-strong: #2E4160; --sk-d-primary: #4FC3F7; --sk-d-primary-strong: #8AD8FB; --sk-d-primary-soft: rgba(79, 195, 247, 0.16); --sk-d-text: #E4ECF7; --sk-d-text-secondary: #A5B6CD; --sk-d-text-muted: #74869E; } /* ─── 포레스트 (플래티넘) */ :root[data-skin="forest"] { --sk-bg: #F1F6F2; --sk-surface: #FFFFFF; --sk-surface-2: #E5EEE7; --sk-border: #DFE9E1; --sk-border-strong: #C7D8CB; --sk-primary: #1E7A52; --sk-primary-strong: #145C3C; --sk-primary-soft: #DCF0E4; --sk-text: #13251C; --sk-text-secondary: #3A5346; --sk-text-muted: #6F877A; --sk-d-bg: #0F1714; --sk-d-surface: #16211C; --sk-d-surface-2: #1D2B24; --sk-d-border: #24352C; --sk-d-border-strong: #31473B; --sk-d-primary: #45C98A; --sk-d-primary-strong: #7BDDAD; --sk-d-primary-soft: rgba(69, 201, 138, 0.16); --sk-d-text: #E4EFE8; --sk-d-text-secondary: #A6BCB0; --sk-d-text-muted: #7A9186; } /* ─── 로열 (다이아) */ :root[data-skin="royal"] { --sk-bg: #F6F3FD; --sk-surface: #FFFFFF; --sk-surface-2: #EDE7FA; --sk-border: #E7E0F8; --sk-border-strong: #D3C7F0; --sk-primary: #6D45D9; --sk-primary-strong: #5730B0; --sk-primary-soft: #EBE3FC; --sk-text: #1F1733; --sk-text-secondary: #453961; --sk-text-muted: #7A6F94; --sk-d-bg: #14101F; --sk-d-surface: #1C172B; --sk-d-surface-2: #251E38; --sk-d-border: #2E2545; --sk-d-border-strong: #3E3260; --sk-d-primary: #A98BFF; --sk-d-primary-strong: #C6B2FF; --sk-d-primary-soft: rgba(169, 139, 255, 0.18); --sk-d-text: #EAE4F8; --sk-d-text-secondary: #B3A8CE; --sk-d-text-muted: #877CA3; } /* ─── 옵시디언 (마스터) — 먹빛 바탕에 호박색 */ :root[data-skin="obsidian"] { --sk-bg: #F4F3F1; --sk-surface: #FFFFFF; --sk-surface-2: #EAE8E4; --sk-border: #E4E1DC; --sk-border-strong: #CFCBC3; --sk-primary: #A76F14; --sk-primary-strong: #7F5410; --sk-primary-soft: #F6EBD8; --sk-text: #1B1A18; --sk-text-secondary: #4A4740; --sk-text-muted: #837E74; --sk-d-bg: #0C0C0D; --sk-d-surface: #141416; --sk-d-surface-2: #1C1C1F; --sk-d-border: #232326; --sk-d-border-strong: #33333A; --sk-d-primary: #E0A03C; --sk-d-primary-strong: #F2BC69; --sk-d-primary-soft: rgba(224, 160, 60, 0.16); --sk-d-text: #EDE8E0; --sk-d-text-secondary: #B0AAA0; --sk-d-text-muted: #837D74; } /* ─── 오로라 (그랜드마스터) */ :root[data-skin="aurora"] { --sk-bg: #F3F6FF; --sk-surface: #FFFFFF; --sk-surface-2: #E9EEFB; --sk-border: #E3EAFA; --sk-border-strong: #CBD8F2; --sk-primary: #0E9F8E; --sk-primary-strong: #0A7A6E; --sk-primary-soft: #DBF3EF; --sk-text: #131A2B; --sk-text-secondary: #3B4661; --sk-text-muted: #737F99; --sk-d-bg: #080C1A; --sk-d-surface: #101733; --sk-d-surface-2: #172042; --sk-d-border: #1E2748; --sk-d-border-strong: #2C3763; --sk-d-primary: #4CE0C0; --sk-d-primary-strong: #8FF0DC; --sk-d-primary-soft: rgba(76, 224, 192, 0.16); --sk-d-text: #E6ECFA; --sk-d-text-secondary: #A6B3D0; --sk-d-text-muted: #7787A6; } /* 오로라만 배경에 빛을 깐다 — --bg 자체를 그라데이션으로 두면 background-color 로 읽는 자리에서 무효값이 되므로, body 배경 이미지로만 얹는다. */ :root[data-skin="aurora"] body { background-image: radial-gradient(60rem 32rem at 12% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%), radial-gradient(52rem 30rem at 92% 4%, color-mix(in srgb, #B08CFF 16%, transparent), transparent 72%); background-attachment: fixed; background-repeat: no-repeat; } /* ─── 대입 (라이트) */ :root[data-skin] { --bg: var(--sk-bg); --surface: var(--sk-surface); --surface-2: var(--sk-surface-2); --border: var(--sk-border); --border-strong: var(--sk-border-strong); --primary: var(--sk-primary); --primary-strong: var(--sk-primary-strong); --primary-soft: var(--sk-primary-soft); --text: var(--sk-text); --text-secondary: var(--sk-text-secondary); --text-muted: var(--sk-text-muted); } /* ─── 대입 (시스템이 어두울 때) — 아래 명시적 dark 블록보다 먼저 와야 한다. 특이성이 같으므로, [어둡게] 를 직접 고른 사람에게는 뒤쪽이 이겨야 한다. */ @media (prefers-color-scheme: dark) { :root[data-skin]:not([data-theme="light"]) { --bg: var(--sk-d-bg); --surface: var(--sk-d-surface); --surface-2: var(--sk-d-surface-2); --border: var(--sk-d-border); --border-strong: var(--sk-d-border-strong); --primary: var(--sk-d-primary); --primary-strong: var(--sk-d-primary-strong); --primary-soft: var(--sk-d-primary-soft); --text: var(--sk-d-text); --text-secondary: var(--sk-d-text-secondary); --text-muted: var(--sk-d-text-muted); } } /* ─── 대입 (어둡게를 직접 고름) */ :root[data-skin][data-theme="dark"] { --bg: var(--sk-d-bg); --surface: var(--sk-d-surface); --surface-2: var(--sk-d-surface-2); --border: var(--sk-d-border); --border-strong: var(--sk-d-border-strong); --primary: var(--sk-d-primary); --primary-strong: var(--sk-d-primary-strong); --primary-soft: var(--sk-d-primary-soft); --text: var(--sk-d-text); --text-secondary: var(--sk-d-text-secondary); --text-muted: var(--sk-d-text-muted); } /* ========================================================= 티어 뱃지 ========================================================= */ /* 사이드바의 이름 옆 마크. 글자가 없으므로 칩(테두리·배경)을 두르지 않는다 — 17px 마크 하나에 알약을 씌우면 그림보다 알약이 먼저 읽힌다. */ .tier-mark-link { display: inline-flex; align-items: center; vertical-align: -3px; margin-left: 5px; text-decoration: none; opacity: .92; } .tier-mark-link:hover { opacity: 1; } /* 등급 마크. 색은 마크 안의 그라데이션이 들고 있다 — 금속은 한 가지 색이 아니라 밝은 곳과 어두운 곳의 차이로 보이기 때문에 currentColor 로 칠하지 않는다. 그래서 밝은 화면과 어두운 화면에서 같은 그림이 나온다. */ .tier-mark { width: 17px; height: 17px; display: block; flex-shrink: 0; } .tier-mark-lg { width: 34px; height: 34px; } .tier-mark-sm { width: 14px; height: 14px; } .tier-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tier-color, var(--text-muted)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier-color, var(--text-muted)) 24%, transparent); } /* 티어 색은 한 곳(services/valuation.py TIERS)에 있고, 여기서는 그 값을 클래스로 받아 둔다. 새 티어가 생기면 두 곳을 함께 고친다. */ .tier-bronze { --tier-color: #A9744F; } .tier-silver { --tier-color: #9AA5B1; } .tier-gold { --tier-color: #D9A62E; } .tier-platinum { --tier-color: #3FBFAE; } .tier-diamond { --tier-color: #4B93FF; } .tier-master { --tier-color: #8B5CF6; } .tier-grandmaster { --tier-color: #F0587C; } /* ── 등급 상승 연출 (valuation.js celebrate) 화면이 통째로 어두워지고 그 위에 마크·게이지·문구만 뜬다. 카드를 두지 않는 이유는, 카드가 있으면 '알림' 으로 읽히고 없으면 '순간' 으로 읽히기 때문이다. 바탕은 스킨·테마와 무관한 고정 흑색 — 어두운 화면에서도 밝은 화면에서도 같은 장면이어야 한다. 빛은 티어 색 하나로만 낸다(--tier-color). z-index 는 사이트 공지(1300)보다 아래, 일반 모달(1000)보다 위. */ .jval-levelup { position: fixed; inset: 0; z-index: 1100; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 16px; background: #06070A; opacity: 0; transition: opacity .5s ease; --lv: var(--tier-color, #9AA5B1); } .jval-levelup.is-open { opacity: 1; } .jval-levelup.is-closing { opacity: 0; transition-duration: .45s; } /* 마크 뒤 큰 빛무리. 차오르는 동안 서서히 밝아지고, 도착하면 확 커진다. */ .jval-levelup-glow { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; transform: translate(-50%, -56%) scale(.55); background: radial-gradient(circle at center, color-mix(in srgb, var(--lv) 42%, transparent) 0%, color-mix(in srgb, var(--lv) 14%, transparent) 22%, transparent 48%); opacity: .35; transition: opacity 1.8s ease, transform 1.8s ease, background .6s ease; pointer-events: none; } .jval-levelup.is-filling .jval-levelup-glow { opacity: .7; transform: translate(-50%, -56%) scale(.8); } .jval-levelup.is-arrived .jval-levelup-glow { opacity: .95; transform: translate(-50%, -56%) scale(1.05); transition-duration: .7s; } /* 도착 순간 한 번 번쩍. */ .jval-levelup-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .jval-levelup.is-arrived .jval-levelup-flash { animation: jval-flash .55s ease-out forwards; } @keyframes jval-flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } } .jval-levelup-panel { position: relative; width: 100%; max-width: 520px; text-align: center; color: #fff; transform: translateY(24px); opacity: 0; transition: transform .9s var(--ease-out-toss), opacity .9s ease; } .jval-levelup.is-open .jval-levelup-panel { transform: none; opacity: 1; } .jval-levelup-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,.45); margin-bottom: 30px; } /* 마크 — 두 장을 겹쳐 두고 도착 순간 앞장을 바꾼다. 도착하면 링 세 개가 시차를 두고 퍼지고, 파편이 사방으로 튄다. */ .jval-levelup-mark { position: relative; width: 200px; height: 200px; margin: 0 auto 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--lv) 30%, transparent), color-mix(in srgb, var(--lv) 6%, transparent) 70%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv) 35%, transparent), 0 0 60px color-mix(in srgb, var(--lv) 25%, transparent); transition: box-shadow .6s ease, background .6s ease; } .jval-levelup.is-arrived .jval-levelup-mark { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv) 60%, transparent), 0 0 120px color-mix(in srgb, var(--lv) 55%, transparent), 0 0 240px color-mix(in srgb, var(--lv) 30%, transparent); } .jval-levelup-mark .tier-mark { position: absolute; width: 118px; height: 118px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.55)); transition: opacity .3s ease, transform .7s var(--ease-out-toss); } .jval-levelup-mark .is-from { animation: jval-breathe 2.2s ease-in-out infinite; } .jval-levelup-mark .is-to { opacity: 0; transform: scale(.4) rotate(-12deg); } .jval-levelup.is-arrived .jval-levelup-mark .is-from { opacity: 0; transform: scale(1.5); animation: none; } .jval-levelup.is-arrived .jval-levelup-mark .is-to { opacity: 1; transform: scale(1) rotate(0deg); animation: jval-land .9s var(--ease-out-toss) forwards; } @keyframes jval-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes jval-land { 0% { transform: scale(.4) rotate(-12deg); } 55% { transform: scale(1.18) rotate(3deg); } 100% { transform: scale(1) rotate(0); } } .jval-levelup-ring { position: absolute; inset: 0; border-radius: 50%; opacity: 0; border: 2px solid var(--lv); pointer-events: none; } .jval-levelup.is-arrived .jval-levelup-ring { animation: jval-ring 1.4s var(--ease-out-toss) forwards; } .jval-levelup.is-arrived .jval-levelup-ring:nth-child(2) { animation-delay: .18s; } .jval-levelup.is-arrived .jval-levelup-ring:nth-child(3) { animation-delay: .36s; border-width: 1px; } @keyframes jval-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } } .jval-levelup-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; } .jval-levelup-burst i { position: absolute; left: 0; top: 0; width: var(--s, 5px); height: var(--s, 5px); margin: calc(var(--s, 5px) / -2); border-radius: 50%; background: var(--lv); opacity: 0; box-shadow: 0 0 10px var(--lv); } .jval-levelup.is-arrived .jval-levelup-burst i { animation: jval-spark 1.1s cubic-bezier(.15, .6, .3, 1) forwards; animation-delay: var(--t, 0ms); } @keyframes jval-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateX(30px) scale(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0); } } /* 게이지 — 빈 상태에서 끝까지. 채워지는 동안 앞머리가 빛난다. 다 차면 옅어진다. */ .jval-levelup-gauge { position: relative; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); margin: 0 auto 34px; width: min(360px, 100%); transition: opacity .5s ease; } .jval-levelup-gauge > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--lv) 70%, #fff 0%), var(--lv), #fff); box-shadow: 0 0 18px var(--lv), 0 0 4px #fff; transition: width 1.8s cubic-bezier(.35, 0, .15, 1); } .jval-levelup.is-arrived .jval-levelup-gauge { opacity: .3; } .jval-levelup-title { font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.6); } .jval-levelup.is-arrived .jval-levelup-title { animation: jval-rise .8s var(--ease-out-toss) both; } .jval-levelup-desc { min-height: 22px; margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.7); word-break: keep-all; opacity: 0; transition: opacity .6s ease .35s; } .jval-levelup.is-arrived .jval-levelup-desc { opacity: 1; } @keyframes jval-rise { 0% { transform: translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } } .jval-levelup-close { margin-top: 36px; padding: 12px 34px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); opacity: 0; transform: translateY(8px); transition: opacity .5s ease .7s, transform .5s ease .7s, background .15s ease; } .jval-levelup.is-arrived .jval-levelup-close { opacity: 1; transform: none; } .jval-levelup-close:hover { background: rgba(255,255,255,.2); } .jval-levelup-close:focus-visible { outline: 2px solid var(--lv); outline-offset: 3px; } @media (max-width: 720px) { .jval-levelup-mark { width: 150px; height: 150px; margin-bottom: 28px; } .jval-levelup-mark .tier-mark { width: 88px; height: 88px; } .jval-levelup-title { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .jval-levelup, .jval-levelup *, .jval-levelup *::before, .jval-levelup *::after { transition: none !important; animation: none !important; } .jval-levelup-flash, .jval-levelup-burst, .jval-levelup-ring { display: none; } .jval-levelup.is-arrived .jval-levelup-mark .is-to { opacity: 1; transform: none; } } /* ========================================================= 가치판단 위젯 — 판결문 뷰어·판례 모달에 공통으로 붙는다 ========================================================= */ .jval { border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); padding: 14px 16px; margin: 16px 0; } .jval-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .jval-title { font-size: 13.5px; font-weight: 700; color: var(--text); } .jval-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } .jval-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .jval-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); transition: background .15s, border-color .15s, color .15s; } .jval-btn:hover { border-color: var(--primary); color: var(--primary-strong); } .jval-btn.is-good:hover { border-color: var(--success); color: var(--success); } .jval-btn.is-bad:hover { border-color: var(--danger); color: var(--danger); } .jval-btn[disabled] { opacity: .5; cursor: default; } .jval-note { width: 100%; margin-top: 10px; resize: vertical; min-height: 62px; padding: 9px 11px; font-size: 13px; line-height: 1.6; font-family: inherit; color: var(--text); background: var(--field, var(--surface)); border: 1px solid var(--field-border, var(--border-strong)); border-radius: var(--r-sm, 8px); } .jval-note:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .jval-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; } .jval-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .jval-verdict { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .jval-verdict.is-green { background: var(--tint-green-bg); color: var(--tint-green-fg); } .jval-verdict.is-red { background: var(--tint-red-bg); color: var(--tint-red-fg); } .jval-verdict.is-gray { background: var(--tint-gray-bg); color: var(--tint-gray-fg); } .jval-by { font-size: 12px; color: var(--text-muted); } .jval-msg { font-size: 12.5px; margin-top: 8px; color: var(--text-muted); } .jval-msg.is-ok { color: var(--success); } .jval-msg.is-err { color: var(--danger); } .jval-void { margin-left: auto; font-size: 11.5px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } .jval-void:hover { color: var(--danger); } /* ─── 설정 · 화면 스킨 선택 테마 선택과 같은 자리에 서므로 크기 감각을 맞춘다. 다만 개수가 7개라 한 줄에 세우지 않고 흐르게 둔다. */ .set-skins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .set-skin-opt { flex: 1 1 96px; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 600; font-family: inherit; letter-spacing: -0.2px; cursor: pointer; transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1); } .set-skin-opt:hover:not([disabled]) { border-color: var(--primary); color: var(--text); } .set-skin-opt.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); } .set-skin-opt[disabled] { cursor: default; } /* 잠긴 스킨 — 색은 옅게 깔고 그 위에 등급 마크를 세운다. 글로 적지 않는 이유는 고를 수 없는 칸의 안내가 고를 수 있는 칸보다 눈에 먼저 들어오기 때문이다. */ .set-skin-opt.is-locked { opacity: .72; } .set-skin-opt.is-locked .set-skin-swatch { filter: saturate(.35); } .set-skin-opt.is-locked .set-skin-name { color: var(--text-muted); } .set-skin-swatch { position: relative; width: 100%; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; } .set-skin-mark { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); } .set-skin-mark .tier-mark { width: 16px; height: 16px; } .set-skin-name { line-height: 1.2; } /* 내 정보 화면의 등급 요약 — 모바일에는 사이드바 마크가 없어 이쪽이 유일한 자리다. 마크와 지금 점수까지만 둔다. 진행 막대와 '다음 마크까지 N점' 은 두지 않는다 — 계단이 몇 개고 어디서 갈리는지가 그 둘에서 읽힌다. */ .vt-tier-inline .vt-tier-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .vt-tier-inline .vt-count { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-0.02em; } .vt-tier-inline .vt-count small { font-size:12px; font-weight:600; color:var(--text-muted); margin-left:2px; } .vt-tier-inline .vt-tier-mark { display:inline-flex; align-items:center; gap:8px; } /* ═══════════════════════════════════════════ 사이트 공지 모달 ─────────────────────────────────────────── 다른 모달과 다른 점은 두 가지다. 배경을 흐려 뒤 화면을 읽지 못하게 하고, z-index 를 푸시 온보딩(1200)보다 위에 둔다 — 공지는 사람이 부른 것이 아니라 화면을 가로막으러 온 것이라, 다른 무엇에도 가려지면 안 된다. 흐림은 배경이 반투명해야 보인다. --overlay-strong(0.72/0.78)을 쓰면 blur 가 묻히므로 여기서만 더 옅은 막을 깐다. */ .notice-modal { /* 1400 — 오늘의 업무 브리핑(#briefing-modal)이 1300 이라, 같은 값을 쓰면 나중에 그려지는 브리핑이 공지를 덮는다. 공지는 사람이 부른 것이 아니라 화면을 가로막으러 온 것이므로 자동으로 뜨는 어떤 것보다도 위에 있어야 한다. */ z-index: 1400; background: rgba(15, 22, 33, 0.38); backdrop-filter: blur(10px) saturate(115%); -webkit-backdrop-filter: blur(10px) saturate(115%); } :root[data-theme="dark"] .notice-modal { background: rgba(0, 0, 0, 0.48); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .notice-modal { background: rgba(0, 0, 0, 0.48); } } /* backdrop-filter 를 못 쓰는 브라우저(구형 Android WebView 등)에서는 흐림이 그냥 사라진다 — 그러면 옅은 막만 남아 뒤 화면이 읽힌다. 짙은 막으로 되돌린다. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .notice-modal { background: var(--overlay-strong); } } /* 크기 — 공지는 다른 모달과 같은 폭(.ai-modal-panel 의 min(1200px, 92vw))을 쓴다. 한때 본문 가독성을 이유로 680px 로 좁혀 두었으나, 공지는 목록과 안내가 함께 오는 글이라 좁히면 항목마다 두세 줄로 접히고 배너도 작아진다. 넓은 쪽이 한 화면에 다 들어와 스크롤 없이 끝까지 읽힌다. 모바일은 반대로 좌우 여백을 없앤다. 화면이 좁을수록 여백 16px 두 개가 본문에서 곧바로 두 글자씩을 빼앗는다. */ .notice-panel { max-height: min(880px, 88vh); max-height: min(880px, 88dvh); } @media (max-width: 600px) { .notice-modal { padding: 0; } .notice-panel { width: 100vw !important; max-width: 100vw !important; max-height: 94vh !important; max-height: 94dvh !important; } } .notice-list { padding: 0; } .notice-item { padding: 26px 30px 28px; } .notice-item + .notice-item { border-top: 1px solid var(--border-strong); } /* 대표 이미지 — 패널 폭을 꽉 채우는 배너. 원본 비율이 무엇이든 CSS 가 잘라 같은 높이로 세운다. 공지마다 이미지 높이가 다르면 모달이 매번 다른 크기로 열려서, 닫는 버튼이 어디 있는지 매번 새로 찾게 된다. 음수 마진은 항목의 padding 을 되물려 이미지만 가장자리까지 내보내는 것이다 — 이미지가 없는 공지는 그 padding 을 그대로 써서 위가 붙지 않는다. */ .notice-hero { margin: -26px -30px 22px; height: 220px; overflow: hidden; background: var(--surface-2); } /* 왜 비율(aspect-ratio)이 아니라 고정 높이인가 — 패널이 1200px 까지 넓어지므로 5:2 를 그대로 두면 배너가 480px 로 서서 첫 화면을 혼자 차지한다. 그렇다고 비율에 max-height 를 씌우면 브라우저가 이번엔 폭을 비율에서 되돌려 계산해, 배너가 550px 짜리 덩어리로 쪼그라든다(실측). 그래서 높이를 못 박고 cover 에 위아래를 맡긴다 — 잘리는 쪽이 위아래이므로 배너 글자는 세로 가운데에 둔다. 모바일은 반대다. 폭이 좁아 고정 높이를 두면 cover 가 좌우를 잘라 오른쪽에 얹은 워드마크가 먼저 사라진다. 그쪽은 배너가 화면 폭(100vw)을 꽉 채우므로 40vw = 정확히 5:2 다. */ @media (max-width: 600px) { .notice-hero { height: 40vw; } } .notice-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } @media (max-width: 600px) { /* .ai-modal-body 의 모바일 규칙(padding 18px 18px 40px)이 이 파일 앞쪽에 있다. 같은 특정도라 뒤에 오는 이쪽이 이긴다 — 여백은 .notice-item 이 혼자 쥐고, 배너는 그 여백을 음수 마진으로 되물려 화면 끝까지 나간다. */ .notice-list { padding: 0; } .notice-item { padding: 20px 20px 24px; } /* 여백만. 높이는 바로 위 모바일 규칙의 40vw(=5:2)가 쥔다. */ .notice-hero { margin: -20px -20px 18px; } } .notice-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .notice-badge { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.4; background: var(--tint-blue-bg); color: var(--tint-blue-fg); } .notice-badge.is-important { background: var(--tint-red-bg); color: var(--tint-red-fg); } .notice-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .notice-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; } /* 본문 — services/notice.render_body 가 만든 좁은 태그 집합만 들어온다: p / br / strong / ul·li / h4 / a. 그 밖의 것은 애초에 만들어지지 않는다. */ .notice-text { word-break: break-word; font-size: 14.5px; line-height: 1.8; color: var(--text); } .notice-text p { margin: 0 0 12px; } .notice-text p:last-child { margin-bottom: 0; } .notice-text h4 { margin: 24px 0 10px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--primary); } .notice-text h4:first-child { margin-top: 0; } .notice-text ul { margin: 0 0 12px; padding: 0; list-style: none; } .notice-text li { position: relative; padding-left: 15px; margin-bottom: 4px; } .notice-text li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-disabled); } .notice-text strong { font-weight: 700; color: var(--text); } .notice-text a { color: var(--primary); text-decoration: underline; } .notice-foot { display: flex; align-items: center; gap: 10px; padding: 16px 30px 20px; border-top: 1px solid var(--border-strong); } .notice-foot .btn-text { margin-right: auto; font-size: 12.5px; } .notice-foot .btn { padding: 10px 22px; } /* 몇 장 중 몇 번째인지. 여러 건일 때만 나온다 — 한 건뿐인데 '1 / 1' 이 붙으면 넘길 것이 있다는 뜻으로 읽힌다. */ .notice-count { font-size: 12.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .notice-foot [hidden] { display: none; } @media (max-width: 600px) { .notice-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); } } /* ═══════════════════════════════════════════ 영상 공지 (전체화면) ─────────────────────────────────────────── 팝업 공지(1400)와 브리핑(1300) 위, 오프닝 로고(3000) 아래. 오프닝이 끝난 뒤에만 뜨므로 둘이 겹칠 일은 없지만, 겹치더라도 로고가 먼저 보이게 한다. 화면은 검정으로 전부 덮고, 영상은 잘리지 않게(contain) 맞춘다. 공지 영상에는 글자가 들어가는데, cover 로 채우면 세로 영상이 데스크톱에서 위아래가 거의 다 잘리고 가로 영상은 세로폰에서 좌우가 잘린다. 비율이 화면과 같으면 여백 없이 찬다. 색은 테마와 무관하게 검정·흰색으로 고정한다 — 영상 위에 얹히는 것이라 라이트 테마의 흰 버튼은 밝은 장면에서 사라진다. */ .video-notice { position: fixed; inset: 0; z-index: 2500; background: #000; opacity: 0; transition: opacity 0.3s ease; } .video-notice[hidden] { display: none; } .video-notice:focus { outline: none; } .video-notice.is-on { opacity: 1; } .video-notice.is-done { opacity: 0; pointer-events: none; } .video-notice-player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; } .video-notice-skip, .video-notice-sound { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.55); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.15s ease, border-color 0.15s ease; } .video-notice-skip { right: calc(28px + env(safe-area-inset-right, 0px)); } .video-notice-sound { left: calc(28px + env(safe-area-inset-left, 0px)); } .video-notice-skip:hover, .video-notice-sound:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); } .video-notice-skip:focus-visible, .video-notice-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .video-notice-sound[hidden] { display: none; } /* 진행 막대 — 얼마나 남았는지 보이면 [건너뛰기] 대신 끝까지 보는 사람이 는다. */ .video-notice-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.15); } .video-notice-bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s linear; } /* 첫 장면이 오기 전까지만 도는 표시 */ .video-notice-spin { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; animation: video-notice-spin 0.9s linear infinite; } .video-notice.is-playing .video-notice-spin { display: none; } @keyframes video-notice-spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .video-notice-skip, .video-notice-sound { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px; font-size: 14px; } .video-notice-skip { right: 16px; } .video-notice-sound { left: 16px; } } /* ═══════════════════════════════════════════ 어드민 — 공지 관리 탭 ═══════════════════════════════════════════ */ /* 쓰는 칸과 보는 칸을 나란히 둔다. 공지는 저장하면 곧바로 전 사용자 앞에 서므로, 확인이 '저장한 뒤에 하는 일' 이면 늦다. */ .adm-notice-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 20px; } /* 좁아지면 미리보기가 아래로 내려간다 — 옆에 두려고 폭을 쥐어짜면 양쪽 다 못 쓴다. */ @media (max-width: 1080px) { .adm-notice-editor { grid-template-columns: minmax(0, 1fr); gap: 18px; } } .adm-notice-write { display: grid; gap: 14px; align-content: start; min-width: 0; } /* 수정 중임을 폼 안에서 알린다. 버튼 라벨만 바뀌면 스크롤이 길 때 신규 작성과 구분되지 않는다. */ .adm-notice-editor.is-editing { border-color: var(--primary); } .adm-notice-mode { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); padding-bottom: 12px; border-bottom: 1px dashed var(--border-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-notice-editor [hidden] { display: none; } /* ── 필드 */ .adm-notice-write .fld { display: grid; gap: 6px; min-width: 0; } .adm-notice-write .fld > label { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); } .fld-opt { font-weight: 400; color: var(--text-muted); } .fld-count { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--text-muted); } .adm-notice-write input[type="text"], .adm-notice-write input[type="datetime-local"], .adm-notice-write select, .adm-notice-write textarea { width: 100%; font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--field-border); border-radius: var(--r-md); padding: 9px 11px; } .adm-notice-write textarea { min-height: 200px; resize: vertical; line-height: 1.7; } .adm-notice-write input:focus, .adm-notice-write select:focus, .adm-notice-write textarea:focus { outline: none; border-color: var(--primary); } /* 틀린 칸을 그 자리에서 표시한다 — 폼 맨 아래 한 줄로는 어디가 틀렸는지 모른다. 선택자에 요소 이름을 함께 적는 이유는 특정도다. 위의 기본 규칙이 input[type="text"] 처럼 속성 선택자를 쓰고 있어, 클래스 하나로는 배경과 테두리를 되돌리지 못한다 — 표시가 붙어도 화면은 그대로였다. */ .adm-notice-write input.is-invalid, .adm-notice-write textarea.is-invalid, .adm-notice-write select.is-invalid { border-color: var(--danger); background: var(--danger-soft); } .fld-err { margin: 0; font-size: 12px; color: var(--danger); } .fld-hint { margin: 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.7; } .fld-hint code { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; } .adm-notice-sep { border: 0; border-top: 1px solid var(--border-strong); margin: 2px 0; } .adm-notice-sched { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 10px; } @media (max-width: 560px) { .adm-notice-sched { grid-template-columns: minmax(0, 1fr); } } .adm-notice-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; } .adm-notice-editor .form-actions { display: flex; gap: 8px; align-items: center; } .adm-notice-editor .form-actions .msg { font-size: 12.5px; color: var(--text-muted); margin-left: auto; } /* ── 미리보기 실제 모달 폭 1200px 을 그대로 세우고 통째로 축소한다(JS 의 fitStage). 좁은 칸에 맞춰 다시 그리면 배너가 잘리는 자리가 실제와 달라져, 확인하려고 만든 것이 확인을 방해한다. */ .adm-notice-preview { min-width: 0; display: grid; gap: 8px; align-content: start; } .adm-notice-preview-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); } .adm-notice-preview-head .adm-sub { margin-left: auto; font-weight: 400; } .adm-notice-preview-head .is-stale { color: var(--danger); } .adm-notice-stage-wrap { overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); } .adm-notice-stage { width: 1200px; transform-origin: top left; } /* 모바일 폭에서 어드민을 보더라도 무대는 데스크톱 모달을 흉내 내야 한다 — .notice-hero 의 600px 이하 규칙(40vw)이 무대 안까지 들어오면 안 된다. */ .adm-notice-stage .notice-hero { height: 220px; margin: -26px -30px 22px; } .adm-notice-stage .notice-item { padding: 26px 30px 28px; } .adm-notice-stage .notice-title.is-placeholder { color: var(--text-disabled); } .adm-notice-stage .pv-placeholder { color: var(--text-disabled); margin: 0; } /* 영상 공지 미리보기 — 실제 화면처럼 검은 바탕에 잘리지 않게(contain). */ .adm-notice-vstage { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: #000; } .adm-notice-vstage[hidden] { display: none; } /* 격자 칸 안에서는 height:100% 가 풀리지 않아 영상이 제 크기로 넘친다 — 칸에 못 박는다. */ .adm-notice-vstage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } /* .adm-notice-write .fld { display: grid } 가 .adm-notice-editor [hidden] 과 특정도가 같고 뒤에 있어서 이긴다 — 형식에 따라 숨기는 칸이 그대로 보였다. */ .adm-notice-write .fld[hidden] { display: none; } .adm-notice-vstage video[hidden], .adm-notice-vstage .pv-placeholder[hidden] { display: none; } .adm-notice-vstage .pv-placeholder { color: rgba(255, 255, 255, 0.6); margin: 0; padding: 0 20px; text-align: center; font-size: 13px; } /* ── 발행 확인 */ .adm-pub-panel { max-width: min(520px, 92vw); } .adm-pub-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--text); } .adm-pub-facts { display: grid; grid-template-columns: 76px 1fr; gap: 8px 14px; margin: 0; font-size: 13px; } .adm-pub-facts dt { color: var(--text-muted); } .adm-pub-facts dd { margin: 0; color: var(--text); word-break: break-word; } .adm-pub-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; border-top: 1px solid var(--border-strong); } /* ── 목록 */ .adm-notice-row-live { font-weight: 700; color: var(--success); } .adm-notice-row-off { color: var(--text-muted); } /* 삭제만 되돌릴 수 없는데 셋이 같은 생김새로 붙어 있었다. 색을 주고 사이를 띄운다. */ .adm-notice-ops { display: flex; gap: 6px; align-items: center; } .adm-notice-ops .is-danger { margin-left: 8px; color: var(--danger); } .adm-notice-ops .is-danger:hover { background: var(--danger-soft); border-color: var(--danger); } .adm-notice-body-cell { max-width: 420px; color: var(--text-secondary); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= 채팅 말풍선 · 첨부 칩 · AI 분석 카드 — 서면·리서치와 어드민 대화 상세가 함께 쓴다 (associate_chat.html 인라인 스타일에서 옮김. 어드민이 chat_render.js 로 같은 HTML 을 그리므로 스타일도 한 곳에 있어야 두 화면이 같은 모양이 된다) ========================================================= */ /* 보낸 메시지에 붙은 첨부 */ .chat-msg-files { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; justify-content:flex-end; } .chat-msg-file { display:inline-flex; align-items:center; gap:5px; max-width:240px; padding:4px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:11.5px; color:var(--text); text-decoration:none; } .chat-msg-file:hover { border-color:var(--primary); color:var(--primary); } .chat-msg-file .ico { width:12px; height:12px; flex-shrink:0; } .chat-msg-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ── 메시지 버블 ── */ .chat-msg-avatar { width:28px; height:28px; border-radius:6px; flex-shrink:0; background:var(--primary); color:var(--on-solid); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:2px; } .chat-msg-bubble { font-size:15px; line-height:1.7; } .chat-msg.is-user .chat-msg-bubble { white-space:pre-wrap; } .chat-msg-bubble p { margin:0 0 0.7em; } .chat-msg-bubble p:last-child { margin-bottom:0; } .chat-msg-bubble ul, .chat-msg-bubble ol { margin:0.4em 0; padding-left:1.4em; } .chat-msg-bubble li { margin:0.25em 0; } .chat-msg-bubble h1,.chat-msg-bubble h2,.chat-msg-bubble h3 { margin:0.6em 0 0.3em; font-size:1em; font-weight:700; } .chat-msg-bubble strong { font-weight:600; } /* ── AI 분석 카드 ── */ .ai-analysis-card { min-width:380px; max-width:600px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); } .ai-analysis-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:2px solid var(--border); } .ai-analysis-title { font-size:14px; font-weight:700; color:var(--text); } .ai-analysis-rebtn { font-size:12px; padding:4px 12px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-family:inherit; transition:border-color 0.15s, color 0.15s; } .ai-analysis-rebtn:not(:disabled):hover { border-color:var(--primary); color:var(--primary); } .ai-analysis-rebtn:disabled { opacity:0.4; cursor:default; } .ai-analysis-body { display:flex; flex-direction:column; } .ai-analysis-section { padding:18px 20px; border-top:1px solid var(--border); } .ai-analysis-section:first-child { border-top:none; } .ai-analysis-sec-label { font-size:13px; font-weight:700; color:var(--text); padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--border); } .ai-analysis-sec-content { font-size:14px; line-height:1.75; color:var(--text); } .ai-analysis-sec-content.is-loading { display:flex; align-items:center; min-height:36px; } /* 어드민 대화 상세 — 말풍선 위에 누가·언제·몇 자를 한 줄 얹고, 그 아래는 사용자 화면과 같은 말풍선이다. 모달 폭에 맞춰 말풍선은 가로를 다 쓴다. */ .adm-turn { display: flex; flex-direction: column; gap: 6px; } .adm-turn .chat-msg-bubble { max-width: 100%; } .adm-turn .chat-msg-assistant > div:first-child { width: 100%; } .adm-turn .chat-msg-assistant .chat-msg-bubble { flex: 1; min-width: 0; } .adm-turn .chat-suggest-chip { cursor: default; } .adm-sys { align-self: flex-start; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--border); font-size: 12px; color: var(--text-muted); } /* ========================================================= 검증 패널 — 서면 관문 결과를 말풍선 끝에 접어서 (chat_render.js gatePanelHtml) 반드시 고칠 것은 펼쳐 두고, 확인할 것은 제목만 보인다. ========================================================= */ .chat-gate { margin-top: 14px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.55; color: var(--text-secondary); } .chat-gate-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; user-select: none; color: var(--text); } .chat-gate-head::-webkit-details-marker { display: none; } .chat-gate-title { font-weight: 600; } .chat-gate-badge { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--danger-soft); color: var(--danger); } .chat-gate-caret { margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted); transform: rotate(-45deg); transition: transform .15s; } .chat-gate[open] > .chat-gate-head .chat-gate-caret { transform: rotate(45deg); } .chat-gate-body { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; } .chat-gate-item { padding: 6px 0 2px; border-top: 1px dashed var(--border); } .chat-gate-item-head { display: block; cursor: pointer; list-style: none; color: var(--text); } .chat-gate-item-head::-webkit-details-marker { display: none; } details.chat-gate-item > .chat-gate-item-head::before { content: '▸'; display: inline-block; width: 12px; color: var(--text-muted); } details.chat-gate-item[open] > .chat-gate-item-head::before { content: '▾'; } .chat-gate-item.is-blocker .chat-gate-item-head { font-weight: 700; color: var(--danger); cursor: default; } .chat-gate-n { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-left: 2px; } .chat-gate-places { margin: 4px 0 2px; padding-left: 16px; color: var(--text-secondary); } .chat-gate-places li { margin: 2px 0; font-size: 12.5px; word-break: break-word; } .chat-gate-more { color: var(--text-muted); list-style: none; margin-left: -12px; } .chat-gate-fix { margin: 4px 0 4px; font-size: 12.5px; color: var(--text-muted); } .case-split-layout > .card > h2, .case-split-layout > .card > .section-bar { min-height: 32px; margin-top: 0; margin-bottom: 20px; box-sizing: border-box; } .case-split-layout > .card > .section-bar { display: flex; align-items: center; } @media (max-width: 768px) { .case-split-layout > .card > h2, .case-split-layout > .card > .section-bar { min-height: 28px; margin-bottom: 14px; } } /* ========================================================= Case detail — fact strip + tabbed panel (2026-09-08) ========================================================= */ .case-facts { display: flex; flex-wrap: wrap; row-gap: 12px; margin: -10px 0 24px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .case-fact { display: flex; flex-direction: column; gap: 3px; padding: 0 22px; border-left: 1px solid var(--border); min-width: 0; } .case-fact:first-child { padding-left: 0; border-left: none; } .case-fact .k { font-size: 11.5px; font-weight: 600; color: var(--text-muted); letter-spacing: -0.01em; } .case-fact .v { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; font-variant-numeric: tabular-nums; } .case-fact.is-hot .v { color: var(--primary-strong); } .card.case-panel { padding: 0; overflow: hidden; } .case-tabs { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .case-tabs::-webkit-scrollbar { display: none; } .case-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; padding: 12px 12px 11px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--text-muted); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color 0.12s, border-color 0.12s; /* 탭 줄은 가로로 스크롤된다(.case-tabs overflow-x). flex 자식은 기본이 flex-shrink:1 이라, 모바일 390px 에서 탭 일곱 개가 눌려 이름 위로 옆 탭의 건수 배지가 겹쳐 찍혔다. 줄이지 말고 넘치게 두어야 스크롤이 제 일을 한다. */ flex: 0 0 auto; } .case-tab:hover { color: var(--text); } .case-tab.is-active { color: var(--text); border-bottom-color: var(--text); } .case-tab-n { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); background: var(--surface-2); padding: 1px 7px; border-radius: var(--r-pill); min-width: 18px; text-align: center; line-height: 1.5; } .case-tab.is-active .case-tab-n { background: var(--primary-soft); color: var(--primary-strong); } .case-tab.is-empty { color: var(--text-disabled); } .case-tab.is-empty:hover, .case-tab.is-empty.is-active { color: var(--text); } .case-pane { display: none; padding: 24px 28px 28px; } .case-pane.is-active { display: block; } .case-sec + .case-sec, .case-sec + .case-people { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); } .case-sec-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 14px; letter-spacing: -0.015em; } .case-sec-title .ico { width: 16px; height: 16px; color: var(--primary); } .case-sec-meta { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-muted); } .case-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin: 0; } .case-kv > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .case-kv > div.wide { grid-column: 1 / -1; } .case-kv dt { font-size: 12px; color: var(--text-muted); font-weight: 500; } .case-kv dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .case-consult { font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: var(--text-secondary); max-height: 150px; overflow: hidden; position: relative; } .case-consult.is-open { max-height: none; } .case-consult.is-clamped:not(.is-open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(to bottom, transparent, var(--surface)); } .case-consult-more { margin-top: 6px; background: none; border: none; padding: 0; color: var(--primary); font-size: 12.5px; font-weight: 600; cursor: pointer; } .case-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px 32px; } .case-people .case-sec { margin-top: 0; padding-top: 0; border-top: none; } .case-empty { font-size: 13px; color: var(--text-muted); padding: 22px 0; text-align: center; } .case-pane h3 { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin: 14px 0 8px; } .case-pane h3:first-child { margin-top: 0; } .case-pane .mini-card + h3 { margin-top: 16px; } @media (max-width: 768px) { .case-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; padding: 12px 0; margin-top: 0; } .case-fact { padding: 0 12px; } .case-fact:nth-child(odd) { padding-left: 0; border-left: none; } .case-fact .v { max-width: none; } .case-tabs { padding: 4px 8px 0; } .case-tab { padding: 10px 10px; font-size: 13px; } .case-pane { padding: 18px 16px 20px; } .case-kv { grid-template-columns: 1fr 1fr; } .case-people { grid-template-columns: 1fr; } } .case-sec > .case-empty { text-align: left; padding: 2px 0 4px; } .mgmt-precheck { margin: 0 0 14px; padding: 10px 14px 4px; background: var(--surface-2); border-radius: var(--r-md); } .mgmt-precheck-title { font-size: 11.5px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em; margin-bottom: 2px; } .mgmt-precheck #case-alert-list > div { padding: 6px 0; } /* ── AI 사건 관리 대장 (2026-09-08) ── */ .mgmt-since { font-size: 12.5px; color: var(--text-muted); padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); margin: 0 0 14px; line-height: 1.55; } .mgmt-since.is-changed { background: var(--primary-soft); color: var(--primary-strong); } .mgmt-since.is-run { background: var(--tint-amber-bg); color: var(--tint-amber-fg); } .mgmt-since strong { font-weight: 700; } .mgmt-since-note { margin-top: 4px; color: var(--text-secondary); font-weight: 500; } .mgmt-run-titles { margin-top: 6px; color: var(--text-secondary); font-size: 12px; } .mgmt-run-titles b { font-weight: 700; color: var(--text); margin-right: 4px; } .mgmt-run-titles .mgmt-dropped { color: var(--text-muted); } .mgmt-run-titles .why { font-size: 10.5px; margin-left: 3px; padding: 0 5px; border-radius: 999px; background: var(--surface); color: var(--text-muted); } .mgmt-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.6; } .mgmt-badge.new { background: var(--primary); color: var(--on-solid); } .mgmt-badge.upd { background: var(--primary-soft); color: var(--primary-strong); } .mgmt-badge.overdue { background: var(--tint-red-bg); color: var(--tint-red-fg); } .mgmt-badge.seen { background: var(--surface-2); color: var(--text-muted); } .mgmt-badge.keep { background: var(--tint-amber-bg); color: var(--tint-amber-fg); } .mgmt-evidence { color: var(--text-muted); } .mgmt-item { position: relative; } .mgmt-item.is-busy { opacity: 0.5; pointer-events: none; } .mgmt-item.is-datafix { border-style: dashed; } .mgmt-item-actions { display: flex; gap: 6px; margin-top: 8px; position: relative; } .mgmt-act { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .mgmt-act:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); } .mgmt-act.done:hover { background: var(--tint-green-bg); color: var(--tint-green-fg); border-color: transparent; } .mgmt-act.undo { margin-left: auto; padding: 2px 8px; font-size: 11.5px; } .mgmt-dismiss-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-width: 220px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(10,20,35,.14); padding: 6px; } .mgmt-dismiss-menu > button { text-align: left; background: none; border: none; padding: 8px 10px; font-size: 13px; color: var(--text); border-radius: 8px; cursor: pointer; } .mgmt-dismiss-menu > button:hover { background: var(--surface-2); } .mgmt-dismiss-other { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--border); margin-top: 4px; } .mgmt-dismiss-other input { flex: 1; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); } .mgmt-dismiss-other button { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; border: none; background: var(--primary); color: var(--on-solid); cursor: pointer; } .mgmt-more { display: block; width: 100%; margin-top: 8px; background: none; border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: 12.5px; font-weight: 600; padding: 7px; border-radius: var(--r-md); cursor: pointer; } .mgmt-more:hover { color: var(--text); background: var(--surface-2); } .mgmt-group { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; } .mgmt-group-head { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none; padding: 6px 2px; font-size: 13px; font-weight: 700; color: var(--text-secondary); cursor: pointer; text-align: left; } .mgmt-group-head:hover { color: var(--text); } .mgmt-group-caret { display: inline-block; transition: transform .15s; color: var(--text-muted); } .mgmt-group.is-open .mgmt-group-caret { transform: rotate(90deg); } .mgmt-group-n { font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--text-muted); padding: 1px 7px; border-radius: 999px; } .mgmt-group-note { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .mgmt-group-body { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 2px; } .mgmt-closed-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); font-size: 12.5px; align-items: center; } .mgmt-closed-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .mgmt-closed-kind { font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--surface); padding: 0 6px; border-radius: 999px; } .mgmt-closed-title { font-weight: 600; color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--border-strong); } .mgmt-closed-meta { color: var(--text-muted); font-size: 11.5px; } .mgmt-closed-reason { grid-column: 1 / -1; color: var(--text-muted); font-size: 12px; padding-left: 2px; } .mgmt-closed-row .mgmt-act.undo { grid-column: 2; grid-row: 1; } .mgmt-error { color: var(--danger); padding: 10px; background: var(--tint-red-bg); border-radius: var(--r-md); margin-bottom: 10px; font-size: 13px; } .mgmt-history-chip-sub { color: var(--text-muted); font-size: 11px; } .mgmt-history-chip.is-active .mgmt-history-chip-sub { color: rgba(255,255,255,.85); } @media (max-width: 600px) { .mgmt-act { padding: 5px 10px; } .mgmt-dismiss-menu { min-width: 200px; } } /* 대장 v2 — 머리글 재분석 버튼, 요약 접기, 보류 */ .mgmt-head-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .mgmt-run-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; border: none; background: var(--primary); color: var(--on-solid); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .mgmt-run-pill:hover { background: var(--primary-strong); } .mgmt-run-pill .ico { width: 14px; height: 14px; } .mgmt-desc { font-size: 12.5px; color: var(--text-muted); margin: -6px 0 12px 2px; } .mgmt-summary-box.is-short { color: var(--text-secondary); } .mgmt-summary-more { background: none; border: none; padding: 0; color: var(--primary); font-size: 12.5px; font-weight: 600; cursor: pointer; } .mgmt-hold-btn { border-top: 1px solid var(--border) !important; margin-top: 4px; color: var(--text-secondary) !important; font-size: 12.5px !important; } .mgmt-hold-row input[type="date"] { font-family: inherit; } #mgmt-card .mgmt-precheck { margin: 14px 0 0; } @media (max-width: 600px) { #mgmt-card .section-bar { flex-wrap: wrap; } .mgmt-head-right { width: 100%; justify-content: space-between; margin-top: 6px; } } #mgmt-card .section-title { white-space: nowrap; } .mgmt-badge.hold { background: var(--tint-gray-bg); color: var(--tint-gray-fg); } .mgmt-item.is-hold { opacity: .75; } /* ── 출석 (내 정보) ── 홈에 있던 그라데이션 띠와 다른 물건이다. 그쪽은 지나가다 누르는 버튼이었고, 이쪽은 찾아와 들여다보는 기록이라 옆 카드들과 같은 흰 바탕에 놓는다. 점수는 적지 않는다 — 여기 답하는 것은 '얼마나 꾸준히 왔나' 하나다. */ /* 달력과 같은 폭으로 세운다. 카드 폭을 다 채우면 아래 달력만 왼쪽에 남아 두 줄이 서로 다른 물건처럼 보인다. */ .att-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 18px; max-width: 340px; } .att-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; background: var(--surface); } .att-stat-num { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); } /* 가운데 칸(이번 달)이 지금 쌓이는 값이라 그쪽만 색을 준다. */ .att-stat:nth-child(2) .att-stat-num { color: var(--primary); } .att-stat-lbl { font-size: 12px; color: var(--text-muted); } .att-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 340px; } .att-w { font-size: 11px; font-weight: 700; color: var(--text-disabled); text-align: center; padding-bottom: 4px; } .att-w.is-sun { color: var(--danger); } .att-w.is-sat { color: var(--primary); } .att-d { aspect-ratio: 1; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-muted); } .att-d.is-empty { background: transparent; } .att-d.is-on { background: var(--primary); color: var(--on-solid); } /* 오늘은 링으로 짚는다. 채워진 날과 겹쳐도 서로를 가리지 않는다. */ .att-d.is-today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--primary); } /* 아직 오지 않은 날 — 바탕까지 지워 '비어 있다'와 '안 왔다'를 가른다. */ .att-d.is-future { background: transparent; color: var(--text-disabled); } /* ── 내 정보의 두 칸(출석·판결문 평가) ── 둘 다 세로로 짧아 홀로 서면 오른쪽 절반이 통째로 빈다. auto-fit 이라 좁은 화면에서는 한 칸으로 접히고, 판결문 평가 카드가 없는 사람에게는 출석이 한 줄을 다 쓴다 — 조건마다 다른 마크업을 두지 않아도 된다. */ .me-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; /* 두 칸의 높이를 맞춘다. 옆 카드에 최근 판단 목록이 들어와 길이가 비슷해졌고, 나란히 선 카드의 아래 끝이 어긋나 있으면 한 줄로 안 읽힌다. */ align-items: stretch; } .me-duo > .card { display: flex; flex-direction: column; } /* 반쪽 카드에 맞춰 조금만 키운다. 남는 자리를 달력이 다 먹게 두면 날짜 칸이 70px 짜리 버튼처럼 커져, 한 달을 훑어보는 표가 아니라 누르는 것처럼 보인다. 좌우로 남는 자리는 양쪽에 나눠 카드 한가운데 세운다. */ /* width:100% 를 함께 준다. 카드가 flex 컨테이너라 좌우 margin:auto 만으로는 stretch 가 풀려 폭이 내용 크기로 줄어든다 — 통계 줄만 달력보다 좁아진다. */ .me-duo .att-stats, .me-duo .att-cal-grid { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; } /* ── 최근 판단 (내 정보) ── 건수만 있으면 '얼마나 했나' 로 끝난다. 무엇을 판단했는지가 보여야 이어서 할 마음이 든다. 카드 바닥까지 늘어나 옆의 출석 카드와 아래 끝을 맞춘다. */ .vt-recent { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); flex: 1; } .vt-recent-head { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; } .vt-recent-list { list-style: none; margin: 0; padding: 0; } .vt-recent-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); } .vt-recent-item:first-child { border-top: 0; } /* 판단 결과를 점 하나로 먼저 보인다. 오른쪽 라벨을 읽기 전에 색으로 훑힌다. */ .vt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .vt-dot.is-green { background: var(--success); } .vt-dot.is-red { background: var(--danger); } .vt-dot.is-gray { background: var(--text-disabled); } .vt-recent-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; } .vt-recent-name { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.vt-recent-name:hover { color: var(--primary); text-decoration: underline; } .vt-recent-sub { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-recent-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .vt-verdict { font-size: 11px; font-weight: 700; } .vt-verdict.is-green { color: var(--success); } .vt-verdict.is-red { color: var(--danger); } .vt-verdict.is-gray { color: var(--text-muted); } .vt-recent-date { font-size: 11px; color: var(--text-disabled); } .vt-recent-empty { font-size: 13px; color: var(--text-muted); padding: 18px 0; text-align: center; } /* ══════════════════════════════════════════════════════ 포인트 상점 ══════════════════════════════════════════════════════ */ /* ── 상점 화면 ── */ .shop-wallet { text-align: center; margin-bottom: 16px; } .shop-bal { display: flex; align-items: baseline; justify-content: center; gap: 6px; } .shop-bal-num { font-size: 38px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--primary); } .shop-bal-unit { font-size: 15px; font-weight: 700; color: var(--text-secondary); } .shop-bal-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .shop-group { margin-bottom: 16px; } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .shop-item { border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } /* 지금 걸고 있는 것 — 목록에서 바로 짚이게 한다. */ .shop-item.is-on { border-color: var(--primary); background: var(--primary-soft); } /* 날개·후광이 원 위아래로 뻗는다. 높이를 그만큼 잡지 않으면 이름 위에 겹친다. */ .shop-preview { height: 104px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } /* 미리보기 원은 사이드바(34px)보다 크게 둔다 — 광택이 돌고 불이 일렁이는 것을 사기 전에 보여 주는 자리라, 34px 로는 무엇을 사는지 알 수 없다. */ .shop-frame-demo { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); font-size: 19px; font-weight: 700; } .shop-title-demo { font-size: 12px; padding: 5px 11px; } .shop-skin-demo { width: 46px; height: 30px; border-radius: 8px; border: 1px solid var(--border-strong); } .skin-demo-skin_ink { background: linear-gradient(135deg, #EDEDEA, #3A3A38); } .skin-demo-skin_mint { background: linear-gradient(135deg, #E8F8F3, #12A594); } .shop-name { font-size: 13px; font-weight: 700; } .shop-note { font-size: 11px; color: var(--text-muted); line-height: 1.4; } .shop-have { font-size: 11px; color: var(--text-muted); margin-top: 6px; } .shop-btn { margin-top: 8px; width: 100%; font-family: inherit; font-size: 12px; font-weight: 700; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1.5px solid var(--primary); background: var(--primary); color: var(--on-solid); } .shop-btn.is-buy { background: var(--surface); color: var(--primary); } .shop-btn.is-buy:hover:not(:disabled) { background: var(--primary); color: var(--on-solid); } /* 못 사는 것도 값은 보인다 — 감추면 무엇을 향해 모으는지 알 수 없다. */ .shop-btn.is-short { border-color: var(--border-strong); color: var(--text-disabled); background: transparent; cursor: default; } .shop-btn.is-quiet { border-color: var(--border-strong); background: transparent; color: var(--text-muted); } .shop-log { list-style: none; margin: 0; padding: 0; } .shop-log li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; } .shop-log li:first-child { border-top: 0; } .shop-log-name { font-weight: 600; } .shop-log-meta { display: flex; align-items: center; gap: 12px; } .shop-log-delta { font-weight: 700; color: var(--danger); } .shop-log-delta.is-plus { color: var(--success); } .shop-log-date { font-size: 12px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════ 프로필 테두리 — 소재(material) 컬렉션 ══════════════════════════════════════════════════════ 날개·왕관·불꽃 같은 그림은 모바일 게임 아이콘의 문법이라 이 도구에서는 유치해 보였다(두 번 그려 보고 걷어냈다). 대신 신용카드 티어처럼 "소재" 로 나눈다 — 로즈쿼츠·스털링·티타늄·로즈골드·골드·오닉스·오로라·이클립스. 전부 링 안에서 끝나고, 움직임은 금속 광택이 도는 것 하나로 절제한다. 구조: ::before 가 링(원뿔 그라데이션을 링 모양으로 마스크), ::after 가 보조 효과(후광·헤어라인·코로나). 둘 다 사진 뒤(z-index)에 깔린다. 링 굵기와 사진과의 간격은 변수라, 상점 미리보기(52px)는 값만 키운다. */ .me-avatar.has-frame, .shop-frame-demo.has-frame, .sidebar .footer .me-avatar.has-frame { --fr-gap: 1.5px; --fr-w: 3px; position: relative; overflow: visible; isolation: isolate; } /* 링과 후광이 원 밖으로 4~9px 나간다. 옆 이름을 덮지 않게 그만큼만 벌린다. */ .sidebar .footer .me-avatar.has-frame { margin: 0 6px 0 4px; } /* overflow 를 풀면 사진을 원으로 자르던 것도 풀린다 — 사진·이니셜을 직접 깎는다. */ .me-avatar.has-frame > img, .me-avatar.has-frame > span, .shop-frame-demo.has-frame > span { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; } .me-avatar.has-frame > span { display: flex; align-items: center; justify-content: center; background: var(--primary-soft); } .shop-frame-demo.has-frame > span { display: flex; align-items: center; justify-content: center; background: var(--surface-2); } .shop-frame-demo.has-frame { --fr-gap: 2px; --fr-w: 4px; } /* 링 — padding 만큼만 남기고 안을 파낸다(mask xor). 링은 회전 대칭이라 요소 자체를 돌리면 광택이 도는 것처럼 보인다. */ .has-frame::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: calc(-1 * (var(--fr-gap) + var(--fr-w))); border-radius: 50%; padding: var(--fr-w); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fr-spin 8s linear infinite; } .has-frame::after { content: ""; position: absolute; z-index: -2; pointer-events: none; inset: calc(-1 * (var(--fr-gap) + var(--fr-w))); border-radius: 50%; } @keyframes fr-spin { to { transform: rotate(360deg); } } @keyframes fr-spin-r { to { transform: rotate(-360deg); } } @keyframes fr-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* 20 · 로즈쿼츠 — 연분홍 석영. 반투명한 느낌으로 가장 조용하다. */ .frame-frame_rosequartz::before { background: conic-gradient(from 0deg, #F8DCE4, #EEB4C6 22%, #FCEDF1 40%, #E89DB4 60%, #F6D3DD 78%, #F8DCE4); animation-duration: 14s; } .frame-frame_rosequartz::after { inset: -7px; background: radial-gradient(circle, rgba(238, 160, 186, 0.35), transparent 70%); } /* 25 · 스털링 — 브러시드 실버. 흰 하이라이트 두 개가 마주 보며 돈다. */ .frame-frame_sterling::before { background: conic-gradient(from 0deg, #FFFFFF, #B7C0CB 18%, #F2F5F8 34%, #8C97A4 52%, #FFFFFF 68%, #C3CBD4 84%, #FFFFFF); animation-duration: 7s; } /* 30 · 티타늄 — 무광 흑연. 어두운 금속에 낮은 광택, 바깥에 가는 헤어라인. */ .frame-frame_titanium::before { background: conic-gradient(from 0deg, #2E333A, #6F7782 22%, #22262C 42%, #858E99 62%, #2E333A 78%, #565E69 90%, #2E333A); animation-duration: 11s; } .frame-frame_titanium::after { inset: calc(-1 * (var(--fr-gap) + var(--fr-w) + 2.5px)); border: 1px solid rgba(110, 120, 132, 0.55); } /* 35 · 로즈골드 — 따뜻한 구리빛, 은은한 온기. */ .frame-frame_rosegold::before { background: conic-gradient(from 0deg, #F6D8CD, #D79C88 20%, #FBE9E1 38%, #C6806B 58%, #F2CDBF 74%, #E0AF9E 88%, #F6D8CD); animation-duration: 7.5s; } .frame-frame_rosegold::after { inset: -8px; background: radial-gradient(circle, rgba(215, 156, 136, 0.4), transparent 70%); } /* 40 · 골드 — 24K. 광택이 빠르고, 후광이 숨 쉰다. */ .frame-frame_gold::before { background: conic-gradient(from 0deg, #FBEFA8, #C7951D 18%, #FFF7CC 34%, #A87A12 52%, #F8E07E 68%, #D3A831 84%, #FBEFA8); animation-duration: 5.5s; } .frame-frame_gold::after { inset: -9px; background: radial-gradient(circle, rgba(232, 190, 60, 0.45), transparent 70%); animation: fr-pulse 4s ease-in-out infinite; } /* 50 · 오닉스 — 유광 블랙에 금 헤어라인 하나. 블랙 카드. */ .frame-frame_onyx::before { background: conic-gradient(from 0deg, #0D0D10, #3A3A43 20%, #050507 40%, #2A2A31 58%, #0D0D10 76%, #474752 90%, #0D0D10); animation-duration: 9s; } .frame-frame_onyx::after { inset: calc(-1 * (var(--fr-gap) + var(--fr-w) + 3px)); border: 1px solid #D4AF37; box-shadow: 0 0 6px rgba(212, 175, 55, 0.35); } /* 60 · 오로라 — 홀로그램. 파스텔 무지개가 돌고, 그 색이 밖으로 번진다. */ .frame-frame_aurora::before { background: conic-gradient(from 0deg, #A9C9FF, #CBB5FF 20%, #FFB9DA 40%, #B9F4E4 60%, #FFF1B5 80%, #A9C9FF); animation-duration: 8s; } .frame-frame_aurora::after { inset: -9px; filter: blur(6px); opacity: 0.6; background: conic-gradient(from 180deg, #A9C9FF, #CBB5FF 20%, #FFB9DA 40%, #B9F4E4 60%, #FFF1B5 80%, #A9C9FF); animation: fr-spin-r 8s linear infinite; } /* 70 · 이클립스 — 검은 링 뒤로 코로나가 번지고, 다이아몬드 링(밝은 점 하나)이 천천히 가장자리를 돈다. */ .frame-frame_eclipse::before { background: conic-gradient(from 0deg, #141416, #34343A 30%, #0A0A0C 55%, #3A3A40 80%, #141416); animation-duration: 16s; } /* 코로나는 흰색으로 그리면 흰 카드 위에서 사라진다 — 앰버로 그린다. */ .frame-frame_eclipse::after { inset: -12px; background: conic-gradient(from 0deg, transparent 0 84%, rgba(255, 236, 190, 1) 92%, transparent 100%), radial-gradient(circle, rgba(255, 196, 96, 0.95) 0, rgba(255, 176, 64, 0.55) 40%, rgba(255, 160, 40, 0.18) 56%, transparent 70%); filter: blur(1.2px); animation: fr-spin 12s linear infinite, fr-pulse 5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .has-frame::before, .has-frame::after { animation: none; } } /* ══════════════════════════════════════════════════════ 칭호 — 칭호마다 제 색 ══════════════════════════════════════════════════════ 값이 오를수록 그라데이션과 광택이 붙는다. 같은 회색 알약에 글자만 다르면 무엇을 샀는지 이름을 읽어야 알고, 그러면 산 보람이 없다. */ .me-title { font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; padding: 3px 7px; border-radius: 20px; flex-shrink: 0; background: var(--primary-soft); color: var(--primary); } .me-title.t-title_veteran { background: #E5E8EB; color: #3C4650; } .me-title.t-title_night { background: #1E1B4B; color: #C7D2FE; } .me-title.t-title_unbeaten { background: #B91C1C; color: #FFF; } .me-title.t-title_blade { background: linear-gradient(135deg, #334155, #64748B); color: #F1F5F9; } .me-title.t-title_guardian { background: linear-gradient(135deg, #047857, #10B981); color: #FFF; } .me-title.t-title_lion { background: linear-gradient(135deg, #B45309, #F59E0B); color: #FFFBEB; } .me-title.t-title_legend { color: #3A2600; background: linear-gradient(110deg, #F5D06A 0%, #FFF3B0 35%, #E0A82E 60%, #FFE58A 100%); background-size: 200% 100%; animation: title-shine 3.6s linear infinite; box-shadow: 0 0 6px rgba(240, 190, 60, 0.55); } .me-title.t-title_myth { color: #FFF; background: linear-gradient(110deg, #7C3AED 0%, #EC4899 40%, #6D28D9 70%, #F472B6 100%); background-size: 200% 100%; animation: title-shine 4s linear infinite; box-shadow: 0 0 8px rgba(168, 85, 247, 0.6); } @keyframes title-shine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } /* ── 상점 스킨 (생성됨: tools/gen_skin_css.py — 손으로 고치지 말 것) ── */ :root[data-skin="skin_sunset"] { --sk-bg: #F8F1EE; --sk-surface: #FFFFFF; --sk-surface-2: #F1E8E6; --sk-border: #F1EAE8; --sk-border-strong: #E5D5D0; --sk-primary: #E2622A; --sk-primary-strong: #B64919; --sk-primary-soft: #FBEBE3; --sk-text: #312728; --sk-text-secondary: #605A61; --sk-text-muted: #949095; --sk-d-bg: #201A19; --sk-d-surface: #272324; --sk-d-surface-2: #332C2E; --sk-d-border: #3C3739; --sk-d-border-strong: #4E4749; --sk-d-primary: #EC9772; --sk-d-primary-strong: #F4C5B1; --sk-d-primary-soft: rgba(236, 151, 114, 0.16); --sk-d-text: #EAE7E8; --sk-d-text-secondary: #ACAAAE; --sk-d-text-muted: #828187; } :root[data-skin="skin_coral"] { --sk-bg: #F9F1F1; --sk-surface: #FFFFFF; --sk-surface-2: #F2E8E9; --sk-border: #F2EAEA; --sk-border-strong: #E7D5D5; --sk-primary: #F2604F; --sk-primary-strong: #EE2D16; --sk-primary-soft: #FDEAE8; --sk-text: #33272D; --sk-text-secondary: #625A65; --sk-text-muted: #959099; --sk-d-bg: #211A1C; --sk-d-surface: #292227; --sk-d-surface-2: #342C31; --sk-d-border: #3E373D; --sk-d-border-strong: #50464D; --sk-d-primary: #F8A59B; --sk-d-primary-strong: #FDE1DD; --sk-d-primary-soft: rgba(248, 165, 155, 0.16); --sk-d-text: #EAE7EA; --sk-d-text-secondary: #ADAAB1; --sk-d-text-muted: #84818A; } :root[data-skin="skin_cherry"] { --sk-bg: #F7EEF2; --sk-surface: #FFFFFF; --sk-surface-2: #F0E5EB; --sk-border: #F0E6EC; --sk-border-strong: #E3CFD9; --sk-primary: #D6336C; --sk-primary-strong: #AA2252; --sk-primary-soft: #FAE4EC; --sk-text: #302130; --sk-text-secondary: #5E5468; --sk-text-muted: #928B9C; --sk-d-bg: #1F161F; --sk-d-surface: #261F2A; --sk-d-surface-2: #312734; --sk-d-border: #3B3240; --sk-d-border-strong: #4D4151; --sk-d-primary: #E4779D; --sk-d-primary-strong: #F0B2C8; --sk-d-primary-soft: rgba(228, 119, 157, 0.16); --sk-d-text: #E9E5EB; --sk-d-text-secondary: #ABA6B4; --sk-d-text-muted: #817E8C; } :root[data-skin="skin_lavender"] { --sk-bg: #F2F1FA; --sk-surface: #FFFFFF; --sk-surface-2: #E9E8F5; --sk-border: #EAE9F5; --sk-border-strong: #D6D4EA; --sk-primary: #7C5CE6; --sk-primary-strong: #5127DE; --sk-primary-soft: #EEEAFC; --sk-text: #25263F; --sk-text-secondary: #545977; --sk-text-muted: #8A8FA8; --sk-d-bg: #181A28; --sk-d-surface: #1F2234; --sk-d-surface-2: #282B40; --sk-d-border: #32364C; --sk-d-border-strong: #42465F; --sk-d-primary: #B5A3F1; --sk-d-primary-strong: #E7E1FA; --sk-d-primary-soft: rgba(181, 163, 241, 0.16); --sk-d-text: #E4E7F1; --sk-d-text-secondary: #A4A9BE; --sk-d-text-muted: #7A8196; } :root[data-skin="skin_ocean"] { --sk-bg: #EBF2F8; --sk-surface: #FFFFFF; --sk-surface-2: #E0EAF2; --sk-border: #E2EBF3; --sk-border-strong: #C6D8E6; --sk-primary: #0B74C9; --sk-primary-strong: #08538F; --sk-primary-soft: #DFEDF8; --sk-text: #17293B; --sk-text-secondary: #465C74; --sk-text-muted: #7E92A5; --sk-d-bg: #0F1C26; --sk-d-surface: #162431; --sk-d-surface-2: #1D2E3E; --sk-d-border: #273949; --sk-d-border-strong: #34495C; --sk-d-primary: #329DF4; --sk-d-primary-strong: #76BDF7; --sk-d-primary-soft: rgba(50, 157, 244, 0.16); --sk-d-text: #DFE8F0; --sk-d-text-secondary: #9BABBB; --sk-d-text-muted: #718394; } :root[data-skin="skin_mint"] { --sk-bg: #EBF4F4; --sk-surface: #FFFFFF; --sk-surface-2: #E0ECED; --sk-border: #E2EDEE; --sk-border-strong: #C7DCDD; --sk-primary: #0E9384; --sk-primary-strong: #095B52; --sk-primary-soft: #E0F1EF; --sk-text: #182D33; --sk-text-secondary: #46606B; --sk-text-muted: #7E959E; --sk-d-bg: #0F1E21; --sk-d-surface: #16262C; --sk-d-surface-2: #1D3137; --sk-d-border: #273C42; --sk-d-border-strong: #354D54; --sk-d-primary: #15DEC7; --sk-d-primary-strong: #4CEEDC; --sk-d-primary-soft: rgba(21, 222, 199, 0.16); --sk-d-text: #DFE9EC; --sk-d-text-secondary: #9BAEB6; --sk-d-text-muted: #71858E; } :root[data-skin="skin_olive"] { --sk-bg: #F0F4EE; --sk-surface: #FFFFFF; --sk-surface-2: #E7ECE5; --sk-border: #E9EDE7; --sk-border-strong: #D4DBCF; --sk-primary: #6B8E23; --sk-primary-strong: #465D17; --sk-primary-soft: #ECF0E2; --sk-text: #232C27; --sk-text-secondary: #515F60; --sk-text-muted: #889494; --sk-d-bg: #161E19; --sk-d-surface: #1E2624; --sk-d-surface-2: #27302D; --sk-d-border: #303B39; --sk-d-border-strong: #404C48; --sk-d-primary: #9CCD35; --sk-d-primary-strong: #B8DB6F; --sk-d-primary-soft: rgba(156, 205, 53, 0.16); --sk-d-text: #E4E9E8; --sk-d-text-secondary: #A2ADAE; --sk-d-text-muted: #798586; } :root[data-skin="skin_slate"] { --sk-bg: #EEF2F6; --sk-surface: #FFFFFF; --sk-surface-2: #E5E9F0; --sk-border: #E6EBF0; --sk-border-strong: #CFD7E1; --sk-primary: #4A6FA5; --sk-primary-strong: #37537B; --sk-primary-soft: #E7ECF3; --sk-text: #1F2937; --sk-text-secondary: #4E5C6F; --sk-text-muted: #8491A1; --sk-d-bg: #141B23; --sk-d-surface: #1B242E; --sk-d-surface-2: #232D3A; --sk-d-border: #2D3846; --sk-d-border-strong: #3C4858; --sk-d-primary: #7C9AC4; --sk-d-primary-strong: #AEC0DA; --sk-d-primary-soft: rgba(124, 154, 196, 0.16); --sk-d-text: #E2E8EE; --sk-d-text-secondary: #A0ABB8; --sk-d-text-muted: #768291; } :root[data-skin="skin_cafe"] { --sk-bg: #F2F0EF; --sk-surface: #FFFFFF; --sk-surface-2: #EAE8E6; --sk-border: #EBE9E8; --sk-border-strong: #D8D4D0; --sk-primary: #8B5A2B; --sk-primary-strong: #5C3C1D; --sk-primary-soft: #F0EAE3; --sk-text: #272628; --sk-text-secondary: #555961; --sk-text-muted: #8B8F95; --sk-d-bg: #191A1A; --sk-d-surface: #202225; --sk-d-surface-2: #2A2B2E; --sk-d-border: #343639; --sk-d-border-strong: #444649; --sk-d-primary: #C58243; --sk-d-primary-strong: #D6A779; --sk-d-primary-soft: rgba(197, 130, 67, 0.16); --sk-d-text: #E5E7E8; --sk-d-text-secondary: #A5A9AF; --sk-d-text-muted: #7B8187; } :root[data-skin="skin_ink"] { --sk-bg: #EEEEEF; --sk-surface: #FFFFFF; --sk-surface-2: #E3E5E7; --sk-border: #E5E7E9; --sk-border-strong: #CDD0D2; --sk-primary: #3A3A38; --sk-primary-strong: #1B1B1A; --sk-primary-soft: #E5E5E5; --sk-text: #1D222A; --sk-text-secondary: #4C5562; --sk-text-muted: #838C96; --sk-d-bg: #12171B; --sk-d-surface: #1A1F26; --sk-d-surface-2: #22282F; --sk-d-border: #2C333B; --sk-d-border-strong: #3A424A; --sk-d-primary: #646460; --sk-d-primary-strong: #888883; --sk-d-primary-soft: rgba(100, 100, 96, 0.16); --sk-d-text: #E1E5E9; --sk-d-text-secondary: #9EA7B0; --sk-d-text-muted: #757E88; } :root[data-skin="skin_rose"] { --sk-bg: #F6F2F3; --sk-surface: #FFFFFF; --sk-surface-2: #EFEAEC; --sk-border: #EFEBED; --sk-border-strong: #E1D8DB; --sk-primary: #C9737B; --sk-primary-strong: #B84751; --sk-primary-soft: #F8EDEE; --sk-text: #2E2932; --sk-text-secondary: #5D5C6A; --sk-text-muted: #91929D; --sk-d-bg: #1E1C20; --sk-d-surface: #25242B; --sk-d-surface-2: #302E36; --sk-d-border: #3A3841; --sk-d-border-strong: #4B4953; --sk-d-primary: #E0AEB3; --sk-d-primary-strong: #F4E1E3; --sk-d-primary-soft: rgba(224, 174, 179, 0.16); --sk-d-text: #E8E8EC; --sk-d-text-secondary: #AAABB5; --sk-d-text-muted: #80838D; } :root[data-skin="skin_sapphire"] { --sk-bg: #EDF0F9; --sk-surface: #FFFFFF; --sk-surface-2: #E2E6F4; --sk-border: #E4E8F4; --sk-border-strong: #CCD2E8; --sk-primary: #2F4BD8; --sk-primary-strong: #2037AA; --sk-primary-soft: #E4E8FA; --sk-text: #1C243D; --sk-text-secondary: #4A5775; --sk-text-muted: #828EA6; --sk-d-bg: #121827; --sk-d-surface: #192132; --sk-d-surface-2: #212A3F; --sk-d-border: #2A344B; --sk-d-border-strong: #39445E; --sk-d-primary: #7486E5; --sk-d-primary-strong: #B0BAF0; --sk-d-primary-soft: rgba(116, 134, 229, 0.16); --sk-d-text: #E1E6F1; --sk-d-text-secondary: #9DA8BC; --sk-d-text-muted: #747F95; } /* ── /상점 스킨 ── */ /* ── 상점 — 보유·사용 중 표시 ── 산 것은 카드 모서리에 표가 붙는다. 스킨은 걸고 내리는 것이 아니라(기기에 남는다) '보유' 하나로 끝나고, 테두리·칭호는 걸었으면 '사용 중' 으로 바뀐다. 없으면 목록에서 무엇을 이미 샀는지 값을 보고 되짚어야 한다. */ .shop-item { position: relative; } .shop-item.is-owned { border-color: var(--success); } .shop-item.is-on { border-color: var(--primary); background: var(--primary-soft); } .shop-tag { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; padding: 4px 7px; border-radius: 20px; background: var(--success); color: #fff; } .shop-item.is-on .shop-tag { background: var(--primary); } .shop-bal-own { font-size: 12px; color: var(--text-secondary); margin-top: 4px; font-weight: 600; } /* ─── 법인 양식 내려받기 대화창 (static/form_export.js) ─── 서면함·채팅 두 화면이 같이 쓰는 공용 위젯이라 여기 둔다. 화면별