/* ── 디자인 토큰 (Wealthio풍 — 연그레이 배경 + 세이지 액센트, 시스템폰트) ── */ :root { /* ── 배경 / 면 (대면적은 중립 그레이, 세이지는 액센트로만) ── */ --bg: #F4F5F7; /* 최외곽 배경 — 검색창/입력창·메인카드와 동일 회색으로 통일(=surface-2) */ --panel-bg: #FFFFFF; /* 앱 패널(사이드바+헤더+메인 래퍼) 흰색 */ --main-bg: #F4F5F7; /* 메인 데이터 카드 면 — 검색창/루트배경과 동일 회색 통일(=surface-2). 흰 헤더/사이드바와 대비 + 옅은 보더로 카드 경계 유지 */ --sidebar-bg: #FFFFFF; /* 사이드바 흰색 */ --surface: #FFFFFF; /* 카드 면 */ --surface-2: #F4F5F7; /* 카드 내부 보조 면 */ --surface-3: #FAFBFC; /* hover/zebra용 초연한 면 */ --header-bg: #FFFFFF; /* 헤더 흰색 */ --thead-bg: #EEF0F3; /* 표 thead 헤더 배경 — 연회색(본문 흰색과 구분, 불투명·세로스크롤 비침 방지) */ /* ── 보더 (최소 — 분리는 그림자가 담당) ── */ --line: #ECEEF1; /* 기본 보더 */ --line-2: #E4E7EB; /* 약간 진한 구분선 (표 내부) */ --line-strong: #D6DAE0; /* 인풋/포커스 경계 */ /* ── 텍스트 (시스템폰트 전제, WCAG AA on #FFF/#F4F5F7) ── */ --text: #1A1D21; --text-2: #4A5159; --muted: #79818B; --charcoal: #3A4047; /* ── 세이지 브랜드 (액센트 전용) ── */ --brand: #3E4D41; --brand-2: #4A5A4D; --brand-ink: #2E3A30; --sage: #9BAA9E; --sage-tint: #EAEFEB; --sage-tint-2: #DFE7E1; --sage-tint-3: #EEF2EF; /* 날짜 데이터 열 세로 구분선(아주 연한 세이지) — 과하지 않게 열 구분 가독성용 */ --brand-weak: #EAEFEB; /* 호환 별칭 = sage-tint */ /* ── 그라데이션 (아이콘 배지 / 로고 라운드 아이콘) ── */ --grad-from: #6E8472; --grad-to: #3E4D41; --grad-badge: linear-gradient(135deg, #6E8472 0%, #3E4D41 100%); --grad-logo: linear-gradient(135deg, #7E9281 0%, #3E4D41 100%); /* ── 신호색 (델타/음수) ── */ --pos: #1F8A4C; --pos-bg: #E7F4EC; --neg: #D23B3B; --neg-strong: #B82828; --neg-bg: #FCEDED; /* ── 차트색 (세이지 계열 유지) ── */ --chart-bar: #6E8472; --chart-bar-2: #9BAA9E; --chart-line: #C2683D; --chart-line-ink: #B5623C; --grid: #EEF0F2; /* ── 차트 5시리즈 색 (모두 브랜드 팔레트 내 — 파랑/다크 없음) ── */ --chart-sales: #9BAA9E; /* 매출 막대 — 연세이지 */ --chart-margin: #3E4D41; /* 마진 overlay 막대 — 딥세이지(매출 안에 포함) */ --chart-mkt: #D96E92; /* 마케팅비 막대 — 로즈핑크(197 C 계열, 채도↑·명도↓). 매출/마진 세이지와 대비 */ --chart-rate: #3A4047; /* 마진율 선 — 차콜(중립) */ --chart-roas: #6E8472; /* ROAS 선 — 미드세이지 */ /* ── 그림자 (2겹 soft — 카드를 공중에 띄움) ── */ --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); --shadow-pop: 0 4px 8px rgba(16,24,40,.06), 0 16px 40px rgba(16,24,40,.12); --shadow-badge: 0 4px 10px rgba(62,77,65,.28); --shadow-inset: inset 0 0 0 1px rgba(16,24,40,.04); /* ── 라운드 ── */ --radius: 18px; --radius-lg: 20px; --radius-md: 12px; --radius-sm: 10px; --radius-badge:14px; --radius-pill: 999px; /* ── 폰트 (시스템 폰트 스택) ── */ --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ── 레이아웃 ── */ --panel-margin: 14px; /* 패널 사방 여백 (모바일에서 축소) */ --panel-radius: 24px; /* 패널 모서리 라운드 */ --topbar-h: 70px; --main-radius: 20px; /* 메인 데이터 영역(회색 카드) 사방 모서리 라운드 */ --main-gutter: 14px; /* 메인 데이터 카드와 사이드바/패널 사이 여백 — 곡선이 또렷이 보이도록 */ --col-prod: 140px; /* 제품 열 고정폭 — 최장 제품명('릴렉스틱오리지널_루피' ≈135px)이 줄바꿈/잘림 없이 들어가는 상수. 지표 열 left 기준과 정확히 일치시켜 가로 스크롤 시 어긋남 방지 */ --col-label: 84px; /* 지표 열 고정폭 — 최장 지표명('마케팅비용' ≈72px) 여유 포함 상수 */ --col-daily-label: 152px; /* 데일리 표 항목 열 기본폭(:root 기본값). 세부 라벨이 넘치면 … 말줄임. 사용자가 경계선 드래그로 조절하면 JS가 :root 인라인으로 덮어써 우선되고 localStorage에 저장 */ --sidebar-w: 248px; --sidebar-w-collapsed: 72px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 앱 활성 시 body는 스크롤하지 않음(스크롤은 .main이 담당). 로그인 화면(#gate)에선 정상 스크롤 허용. */ body:has(#app.is-active) { height: 100vh; overflow: hidden; } .num { font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* ── 뷰 전환 ── */ .view { display: none; } .view.is-active { display: block; } /* ════════════════════════════════════════════════════ GATE (로그인 / 가입 / 인증) ════════════════════════════════════════════════════ */ #gate { min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 24px 16px; } #gate.is-active { display: flex; } .gate-card { width: 100%; max-width: 360px; background: var(--surface); border: none; border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-card); } .gate-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding-left: 12px; position: relative; } .gate-brand::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--sage); } .gate-brand .logo { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--text); } .gate-brand .badge { font-size: 11px; font-weight: 600; color: var(--brand); background: var(--sage-tint); padding: 2px 8px; border-radius: 999px; } .gate-sub { color: var(--text-2); font-size: 13px; margin: 0 0 22px; } .gate-tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--surface-2); padding: 4px; border-radius: 8px; } .gate-tab { flex: 1; border: none; background: transparent; padding: 8px 0; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); } .gate-tab.is-active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(46,51,47,.10); } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); } .field input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; padding: 8px 14px; background: var(--surface); color: var(--charcoal); } .btn-primary { width: 100%; background: var(--brand); border-color: var(--brand); color: #fff; padding: 11px 14px; font-size: 14px; } .btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); } .btn-primary:disabled { opacity: .55; cursor: not-allowed; } .btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--charcoal); } .btn-ghost:hover { background: var(--surface-2); } .btn-danger { width: 100%; background: var(--neg); border-color: var(--neg); color: #fff; padding: 11px 14px; font-size: 14px; } .btn-danger:hover { background: var(--neg-strong, #B53030); border-color: var(--neg-strong, #B53030); } .btn-danger:disabled { opacity: .55; cursor: not-allowed; } .gate-msg { font-size: 12.5px; margin: 10px 0 0; min-height: 18px; } .gate-msg.err { color: var(--neg); } .gate-msg.ok { color: var(--pos); } .gate-hint { font-size: 11.5px; color: var(--muted); margin-top: 14px; } .pane { display: none; } .pane.is-active { display: block; } /* 관리자 2FA 안내/액션 (세이지·차분한 톤) */ .gate-mfa-note { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 14px; padding: 11px 12px; background: var(--sage-tint); border-radius: var(--radius-sm); } .gate-mfa-note strong { color: var(--text); font-weight: 600; word-break: break-all; } .gate-mfa-actions { display: flex; gap: 8px; margin-top: 8px; } .gate-mfa-actions .btn { flex: 1 1 0; width: auto; } /* '관리자' 배지 — 어드민 전용 영역 식별(차분한 세이지) */ .gate-admin-badge { display: inline-block; vertical-align: 1px; font-size: 10.5px; font-weight: 700; letter-spacing: .01em; color: var(--brand); background: var(--sage-tint-2); padding: 1px 7px; border-radius: var(--radius-pill); margin-right: 5px; } /* ════════════════════════════════════════════════════ APP — SaaS 셸 (사이드바 + 메인 2분할) ════════════════════════════════════════════════════ */ #app { display: none; } #app.is-active { display: flow-root; } /* flow-root=BFC: 자식 .shell의 margin-top이 부모로 collapse돼 상단 여백(14px)이 사라지는 것 차단(좌우하단은 정상이고 상단만 빠지는 버그) */ .shell { display: flex; align-items: stretch; /* ── 앱 전체를 연그레이 배경 위 흰색 둥근 패널로 부유 ── */ margin: var(--panel-margin); height: calc(100vh - var(--panel-margin) * 2); background: var(--panel-bg); border-radius: var(--panel-radius); box-shadow: var(--shadow-card); overflow: hidden; /* 모서리 클리핑 — 사이드바/메인이 둥근 패널 안에 갇힘 */ } /* ── 사이드바 (좌, 접이식) ── */ .sidebar { flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); background: var(--sidebar-bg); display: flex; flex-direction: column; /* 패널 내 세로 고정 컬럼 (viewport sticky 아님 — 패널이 스크롤 컨텍스트) */ height: 100%; min-height: 0; z-index: 50; transition: width .2s ease, flex-basis .2s ease; } /* 브랜드 블록 (그라데이션 라운드 아이콘 + 워드마크) */ .sb-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 12px; position: relative; min-height: var(--topbar-h); } .sb-logo-mark { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 34px; background: var(--grad-logo); box-shadow: var(--shadow-badge); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; } /* 사이드바 워드마크 로고 이미지 (barybody 가로형, 원본 420×110) */ .sb-logo-img { height: 28px; width: auto; display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; object-fit: contain; } .sb-brand .logo { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; } /* 접기/펼치기 토글 버튼 — 펼침·접힘 양쪽 모두 노출 */ .sb-toggle { margin-left: auto; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; } .sb-toggle:hover { background: var(--surface-2); color: var(--text); } .sb-toggle svg { width: 18px; height: 18px; } /* ── 사이드바 인라인 SVG 라인 아이콘 (Lucide/Feather풍) ── */ .sb-ico svg, .icon-svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; } .sb-toggle svg { stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* 헤더 공통 라인 SVG 아이콘 */ .icon-btn svg, .pagehead-search .s-ico svg, .hamburger svg { stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; } .icon-btn svg { width: 18px; height: 18px; } .pagehead-search .s-ico svg { width: 16px; height: 16px; } .hamburger svg { width: 20px; height: 20px; } /* 그룹 라벨 */ .sb-group-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 14px 8px 6px; white-space: nowrap; margin: 0; flex: 0 0 auto; /* nav 스크롤 시 라벨이 압축되지 않게 */ } /* 메뉴 */ .sb-nav { padding: 4px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; } .sb-nav::-webkit-scrollbar { display: none; } .sb-item { display: flex; align-items: center; gap: 12px; width: 100%; /* nav(flex column)가 스크롤될 때 항목이 세로로 압축돼 짓이겨지는 것 방지 — 항목은 고정 높이를 유지하고, 넘치면 .sb-nav가 overflow-y로 스크롤한다 */ flex: 0 0 auto; border: none; background: transparent; border-radius: 12px; padding: 11px 12px; font-size: 13.5px; font-weight: 500; color: var(--text-2); text-align: left; white-space: nowrap; overflow: hidden; transition: background .15s ease, color .15s ease; } .sb-item .sb-ico { flex: 0 0 20px; color: var(--charcoal); display: inline-flex; align-items: center; justify-content: center; } .sb-item .sb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sb-item:hover { background: var(--surface-2); color: var(--text); } /* 활성: 연세이지 칩 + 브랜드 텍스트 */ .sb-item.is-active { background: var(--sage-tint); color: var(--brand); font-weight: 600; } .sb-item.is-active .sb-ico { color: var(--brand); } /* 비활성(준비중): 중립 흐림 + 우측 핀 */ /* 어드민 전용 메뉴 게이트 — display:flex가 UA [hidden]을 덮으므로 명시 */ .sb-item[hidden] { display: none; } .sb-item.is-disabled { color: var(--muted); opacity: 1; cursor: default; } .sb-item.is-disabled:hover { background: transparent; color: var(--muted); } .sb-item.is-disabled .sb-ico { color: var(--muted); } .sb-pin { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 2px 7px; border-radius: 999px; } /* (사이드바 유저카드/푸터 제거됨 — 로그아웃은 추후 헤더 프로필 드롭다운으로 이관) */ /* ── 사이드바 접힘 상태 (아이콘 rail) ── */ .shell.sb-collapsed .sidebar { flex-basis: var(--sidebar-w-collapsed); width: var(--sidebar-w-collapsed); } .shell.sb-collapsed .sb-brand .logo, .shell.sb-collapsed .sb-logo-mark, .shell.sb-collapsed .sb-logo-img, .shell.sb-collapsed .sb-item .sb-text, .shell.sb-collapsed .sb-pin { display: none; } /* 접힘 시 그룹 라벨 → 카테고리 구분선(라벨 텍스트는 숨기고 가로선만) */ .shell.sb-collapsed .sb-group-label { height: 0; padding: 0; margin: 7px 6px; overflow: hidden; font-size: 0; line-height: 0; color: transparent; border-top: 1px solid var(--line, #E5E7EB); } /* 첫 그룹(채널별 성과)은 맨 위라 구분선 불필요 */ .shell.sb-collapsed .sb-group-label:first-of-type { border-top: none; margin-top: 0; } /* 접힘 상태에서도 펼침 토글은 항상 노출 (브랜드 영역 가운데) */ .shell.sb-collapsed .sb-brand { justify-content: center; padding: 20px 8px 12px; } .shell.sb-collapsed .sb-toggle { margin-left: 0; } .shell.sb-collapsed .sb-nav { padding: 4px 8px; } .shell.sb-collapsed .sb-item { justify-content: center; padding: 11px 0; gap: 0; } .shell.sb-collapsed .sb-item .sb-ico { flex-basis: auto; } /* 접힘 시 라벨 hover 툴팁 */ .shell.sb-collapsed .sb-item[data-tip] { position: relative; } .shell.sb-collapsed .sb-item[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--text); color: #fff; padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; z-index: 60; box-shadow: var(--shadow-pop); pointer-events: none; } /* ── 메인 영역 ── 흰 패널(.shell) 안에서 [흰색 헤더] 위 + [회색 둥근 데이터 카드] 아래로 분리. 구조: .shell(흰) > .sidebar(흰) + .main(흰) > [.pagehead(흰 헤더) + .main-card(회색 둥근 스크롤 카드)] → 흰 헤더와 회색 둥근 카드가 색으로 또렷이 구분되고, 카드 사방 모서리 곡선이 흰 배경 위에 드러난다. */ .main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; /* 위: 흰 헤더 / 아래: 회색 둥근 카드 */ height: 100%; background: var(--panel-bg); /* 흰색 — 헤더와 카드 사이/카드 둘레 여백(gutter)이 흰색으로 보임 */ overflow: hidden; /* 스크롤은 내부 .main-card가 담당 */ } /* 사방 둥근 회색 데이터 카드 (실제 스크롤 컨테이너) */ .main-card { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; /* 세로 스크롤은 카드가 담당 */ overflow-x: hidden; background: var(--main-bg); /* 연그레이 — 내부 흰 위젯 카드가 떠 보임 */ border-radius: var(--main-radius); /* 사방 모서리 둥글게 */ /* 외곽선(border) 제거 — 카드 경계는 배경 회색 면색·둥근 모서리·gutter 여백으로만 구분(테두리 선 없음) */ /* 헤더(위)·사이드바(좌)·패널 가장자리(우/하)와 분리되는 여백(gutter) — 사방 균등으로 카드가 또렷이 뜸 */ margin: var(--main-gutter); -webkit-overflow-scrolling: touch; /* 세로 스크롤바 숨김 (스크롤 기능은 유지) */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* 구 Edge/IE */ } .main-card::-webkit-scrollbar { display: none; } /* Chrome/Safari */ /* 페이지 헤더 — 흰 패널 상단의 흰색 헤더 (회색 데이터 카드와 색으로 분리) */ .pagehead { position: relative; z-index: 40; height: var(--topbar-h); min-height: var(--topbar-h); flex: 0 0 var(--topbar-h); /* flex column 안에서 헤더가 축소되지 않도록 높이 고정 (스크롤은 .main-card가 담당) */ display: flex; align-items: center; gap: 16px; padding: 0 clamp(16px, 3vw, 32px); background: var(--header-bg); /* 흰색 — 그 아래 회색 둥근 카드와 또렷이 구분 */ box-shadow: none; border: 0; /* 흰 패널 상단의 흰 헤더 — 사이드바와 만나는 좌상단 안쪽 코너만 자연스럽게 라운드 */ border-top-left-radius: var(--main-radius); } .pagehead-title { /* 레퍼런스 룩: "크고 가는" 모던 산세리프 — 굵지 않게(400) + 진한 차콜로 또렷하게. 시스템폰트(SF Pro/Segoe) 그대로, 자간만 살짝 타이트. */ font-size: 21.6px; font-weight: 400; letter-spacing: -.018em; color: #1F2733; /* 진한 차콜 — 가는 굵기를 또렷하게 받쳐주는 짙은 톤(거의 검정) */ white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; /* 데스크탑: 제목만 글자 하나 폭(약 20px)만큼 좌측으로 — 부모 패딩은 유지해 우측 요소 무영향. (폰 ≤639는 햄버거와의 간격 유지를 위해 아래 @media에서 0으로 리셋) */ margin-left: -20px; } /* 데스크탑은 '퍼포먼스 대시보드' 전체 노출, 폰에선 폭에 맞춰 단축(아래 @media). */ .pagehead-title .ph-title-full { display: inline; } .pagehead-title .ph-title-short { display: none; } /* 검색 알약 (비주얼 우선) — 헤더 우측 영역에 배치 */ .pagehead-search { flex: 0 1 auto; width: 300px; max-width: 36vw; margin: 0; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 9px 14px; color: var(--muted); font-size: 13px; } .pagehead-search:focus-within { background: #fff; border-color: var(--line-strong); } .pagehead-search .s-ico { font-size: 15px; flex: 0 0 auto; } .pagehead-search input { flex: 1 1 auto; border: none; background: transparent; outline: none; font: inherit; font-size: 13px; color: var(--text); } .pagehead-search input::placeholder { color: var(--muted); } .pagehead-kbd { flex: 0 0 auto; display: inline-flex; gap: 2px; align-items: center; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 2px 6px; border-radius: 6px; } /* 우측 액션 영역 — 검색창·알림·도움말·프로필을 헤더 오른쪽 끝으로 */ .pagehead-right { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; margin-left: auto; } /* 프로필 드롭다운(버튼·아바타·캐럿·메뉴·.pm-* 항목·관리자 배지) — static/css/profile.css로 분리(데스크탑+모바일 전부). JS는 static/js/profile.js */ /* ── 모달 (비밀번호 변경) ── */ .modal-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(26,29,33,.42); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ovIn .15s ease; } .modal-overlay[hidden] { display: none; } @keyframes ovIn { from { opacity: 0; } to { opacity: 1; } } .modal-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 22px 22px 20px; animation: mcIn .16s ease; } @keyframes mcIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal-overlay, .modal-card { animation: none; } } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .modal-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.01em; } .modal-x { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; } .modal-x:hover { background: var(--surface-2); color: var(--text); } .modal-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .modal-card .field { margin-bottom: 12px; } .modal-card .field input[aria-invalid="true"] { border-color: var(--neg); } .modal-actions { display: flex; gap: 8px; margin-top: 16px; } .modal-actions .btn { flex: 1 1 0; width: auto; } .modal-actions .btn-ghost { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; } .modal-submit:disabled { opacity: .55; cursor: not-allowed; } /* ── 데이터 MCP 연동 모달 — 왕초보 스텝 가이드 ── */ .modal-card.mcp-modal { max-width: 560px; max-height: min(86vh, 760px); /* 가이드가 길어 모달 자체를 스크롤 */ overflow-y: auto; overscroll-behavior: contain; } .mcp-desc { font-size: 13.5px; color: var(--text-2); margin: 0 0 14px; line-height: 1.6; } .mcp-sec-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 16px 0 8px; letter-spacing: -.01em; } .mcp-ic { /* 인라인 코드 (claude, claude mcp list 등) */ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--text); word-break: break-all; } .mcp-prep { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); } .mcp-prep p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.6; } .mcp-prep .mcp-code-row { margin-top: 8px; } .mcp-prep .mcp-alt { background: var(--surface); } .mcp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .mcp-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .mcp-step-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .mcp-step-body { flex: 1 1 auto; min-width: 0; } .mcp-step-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 2px 0 4px; } .mcp-step-desc { font-size: 12.5px; color: var(--text-2); margin: 0 0 8px; line-height: 1.6; } .mcp-step-body > :last-child { margin-bottom: 0; } .mcp-issue { width: auto; padding: 9px 18px; font-size: 13px; } .mcp-status { font-size: 12px; color: var(--muted); margin: 0 0 8px; } .mcp-status strong { color: var(--brand); font-weight: 600; } /* 내 토큰 목록 */ .mcp-tokens { margin: 0 0 12px; } .mcp-token-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .mcp-token-item { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .mcp-token-main { min-width: 0; flex: 1 1 auto; } .mcp-token-label { font-size: 13px; font-weight: 600; color: var(--text); margin: 0; word-break: break-word; } .mcp-token-meta { font-size: 11.5px; color: var(--muted); margin: 2px 0 0; line-height: 1.5; } .mcp-token-prefix { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .mcp-token-revoke { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; } .mcp-token-revoke:hover { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); } /* 새 토큰 발급 */ .mcp-new { margin-top: 4px; } .mcp-new-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin: 0 0 6px; } .mcp-new-hint { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 4px; } .mcp-new-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .mcp-new-input { flex: 1 1 160px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; } .mcp-new-input:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); } .mcp-new .mcp-issue { flex: 0 0 auto; } @media (max-width: 480px) { .mcp-new-row { flex-direction: column; } .mcp-new .mcp-issue { width: 100%; } } .mcp-once { font-size: 11px; color: var(--brand); font-weight: 600; margin-left: 6px; } .mcp-code-row { display: flex; gap: 6px; align-items: flex-start; } .mcp-code { flex: 1 1 auto; display: block; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; white-space: pre-wrap; line-height: 1.5; min-width: 0; } .mcp-copy { flex: 0 0 auto; align-self: flex-start; padding-left: 14px; padding-right: 14px; } .mcp-alt { /* 보조 — 직접 터미널로 하실 분 (접이식) */ margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .mcp-alt summary { cursor: pointer; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 7px; border-radius: 10px; line-height: 1.5; } .mcp-alt summary::-webkit-details-marker { display: none; } .mcp-alt summary::before { content: "▸"; flex: 0 0 auto; font-size: 10px; } .mcp-alt[open] summary::before { content: "▾"; } .mcp-alt summary:hover { color: var(--text); } .mcp-alt summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .mcp-alt-body { padding: 0 12px 10px; } .mcp-alt-body .mcp-step-desc { margin-bottom: 8px; } .mcp-alt-body pre.mcp-code { margin: 0 0 8px; overflow-x: auto; } .mcp-mini-steps { margin: 0 0 10px; padding-left: 18px; } .mcp-mini-steps li { font-size: 12.5px; color: var(--text-2); line-height: 1.7; } .mcp-path-note { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.7; word-break: break-all; } .mcp-check { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--sage-tint-3); border: 1px solid var(--sage-tint-2); font-size: 12px; color: var(--text-2); line-height: 1.6; } .mcp-examples { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sage-tint-3); border: 1px solid var(--sage-tint-2); } .mcp-examples-title { font-size: 12px; font-weight: 600; color: var(--brand-ink); margin: 0 0 6px; } .mcp-examples ul { margin: 0; padding-left: 16px; } .mcp-examples li { font-size: 12.5px; color: var(--text-2); line-height: 1.7; } .mcp-examples li b { color: var(--brand-ink); font-weight: 600; } .mcp-examples-foot { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; } .mcp-faq { display: flex; flex-direction: column; gap: 6px; } .mcp-faq details { border: 1px solid var(--line); border-radius: 10px; } .mcp-faq summary { cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; border-radius: 10px; } .mcp-faq summary::-webkit-details-marker { display: none; } .mcp-faq summary::before { content: "+"; flex: 0 0 auto; width: 13px; color: var(--brand); font-weight: 700; } .mcp-faq details[open] summary::before { content: "−"; } .mcp-faq summary:hover { background: var(--surface-2); } .mcp-faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .mcp-faq-a { margin: 0; padding: 0 12px 10px 33px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; } .mcp-modal .modal-actions { justify-content: flex-end; } .mcp-modal .modal-actions .btn-ghost { flex: 0 0 auto; } @media (max-width: 480px) { .modal-card.mcp-modal { max-height: calc(100dvh - 40px); } .mcp-step { padding: 11px 12px; gap: 10px; } } /* 모바일 햄버거 (기본 숨김) */ .hamburger { display: none; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); width: 38px; height: 38px; align-items: center; justify-content: center; font-size: 17px; color: var(--charcoal); flex: 0 0 auto; } .hamburger:hover { background: var(--surface-2); } /* 드로어 오버레이 (모바일) */ .sb-overlay { display: none; position: fixed; inset: 0; z-index: 45; background: rgba(46,51,47,.32); } .updated { font-size: 12px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .stale-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chart-line); display: none; } .updated.is-stale .stale-dot { display: inline-block; } .user-email { font-size: 12px; color: var(--text-2); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } /* 원형 아이콘 버튼 (새로고침·알림·도움말) */ .icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--charcoal); flex: 0 0 auto; /* 좁은 화면에서 찌그러지지 않게 폭 고정 */ display: inline-flex; align-items: center; justify-content: center; font-size: 15px; gap: 0; } .icon-btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .icon-btn:hover { background: var(--surface-2); } .icon-btn:disabled { opacity: .55; cursor: not-allowed; } .icon-btn .lbl { display: none; } /* 알림 벨 — 읽지 않음 표시: 빨간 점 배지 대신 버튼 자체를 진한 로즈핑크(차트 마케팅비 #D96E92) 배경 + 흰 아이콘. 읽으면 .has-unread 제거 → 기존 흰 배경·기본 아이콘색으로 복귀(transition으로 부드럽게). */ .icon-btn.has-badge { position: relative; } .icon-btn.has-badge.has-unread { background: #D96E92; /* 차트 마케팅비 막대(--chart-mkt)와 동일 진한 로즈핑크 */ border-color: #D96E92; color: #fff; /* SVG stroke=currentColor → 흰 아이콘 */ } /* 핑크 배경 위 흰 아이콘 대비 보강(배경색 #D96E92 유지): 선 두께 ↑ + 옅은 어두운 드롭섀도로 또렷하게 */ .icon-btn.has-badge.has-unread svg { stroke-width: 2.1; filter: drop-shadow(0 1px 1.5px rgba(120, 40, 70, .55)); } /* 안읽음 상태 hover — 기존 회색 hover가 아니라 핑크(#D96E92)를 한 톤 진하게(흰 아이콘 유지) */ .icon-btn.has-badge.has-unread:hover { background: #CC5C82; border-color: #CC5C82; } /* ── 알림 벨 팝오버 (전체 사용자) ── */ /* pmIn 등장 애니메이션 — 원래 프로필 드롭다운 것을 .notif-pop이 재사용. 프로필 CSS는 profile.css로 분리됐지만(동일 키프레임 보유), 알림 팝오버가 프로필 모듈에 숨은 의존을 갖지 않도록 여기에도 정의를 남긴다(중복 무해). */ @keyframes pmIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } .notif-wrap { position: relative; flex: 0 0 auto; } .notif-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); transform-origin: top right; animation: pmIn .14s ease; overflow: hidden; } .notif-pop[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .notif-pop { animation: none; } } .notif-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); } .notif-pop-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em; } .notif-pop-list { max-height: 380px; overflow-y: auto; padding: 6px; } .notif-card { padding: 10px 11px; border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 3px; } .notif-card + .notif-card { border-top: 1px solid var(--line); border-radius: 0; } .notif-card-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; } .notif-card-body { font-size: 12px; color: var(--text-2); line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .notif-card-time { font-size: 11px; color: var(--muted); } .notif-empty { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 12.5px; } .notif-loading { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 12.5px; } /* ── 알림 관리 모달 (어드민) — 비번 모달 토대 + 발행 목록 ── */ .modal-card.notif-admin { max-width: 460px; } .notif-admin .field textarea { width: 100%; min-height: 96px; resize: vertical; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); line-height: 1.5; } .notif-admin .field textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--sage-tint); } .notif-admin .field textarea[aria-invalid="true"] { border-color: var(--neg); } .notif-admin-sep { height: 1px; background: var(--line); margin: 18px 0 14px; } .notif-admin-listhead { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; letter-spacing: -.01em; } .notif-admin-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .notif-admin-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); } .notif-admin-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .notif-admin-item-title { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; word-break: break-word; } .notif-admin-item-meta { font-size: 11px; color: var(--muted); } .notif-admin-del { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .notif-admin-del:hover { background: var(--neg-bg); color: var(--neg); border-color: var(--neg-bg); } .notif-admin-del:disabled { opacity: .5; cursor: not-allowed; } .notif-admin-del svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .notif-admin-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; } .notif-admin .modal-actions .modal-submit { flex: 1 1 0; } /* 알림 대상 선택 (전체/특정 사용자 + 체크박스 멀티셀렉트) */ .notif-target { display: flex; gap: 8px; } .notif-target-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: var(--text-2); font-weight: 500; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); } .notif-target-opt:has(input:checked) { border-color: var(--brand); color: var(--brand); background: var(--sage-tint); font-weight: 600; } .notif-target-opt input { accent-color: var(--brand); width: 15px; height: 15px; } .notif-target-list { margin-top: 10px; max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; display: flex; flex-direction: column; gap: 2px; } .notif-target-list[hidden] { display: none; } .notif-target-row { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text); } .notif-target-row:hover { background: var(--surface-2); } .notif-target-row input { accent-color: var(--brand); width: 16px; height: 16px; flex: 0 0 auto; } .notif-target-row .ntr-email { word-break: break-all; } .notif-target-row .ntr-tag { font-size: 10px; font-weight: 700; color: var(--brand); } .notif-target-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12px; } .notif-target-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 6px; } .notif-target-count { font-size: 11.5px; color: var(--muted); } .notif-target-all { font-size: 11.5px; font-weight: 600; color: var(--brand); background: none; border: none; cursor: pointer; padding: 2px 4px; } .notif-target-all:hover { text-decoration: underline; } /* 발행 목록의 대상 배지 */ .notif-admin-target { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); margin-left: 6px; vertical-align: 1px; } .notif-admin-target.all { color: var(--text-2); background: var(--surface-2); } .notif-admin-target.users { color: var(--brand); background: var(--sage-tint-2); } /* ── 사용자 관리 모달 (어드민) ── */ .modal-card.user-admin { max-width: 880px; } .ua-note { font-size: 12px; line-height: 1.55; color: var(--text-2); margin: 0 0 14px; } .ua-note strong { color: var(--text); font-weight: 600; } .ua-warn { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 14px; padding: 10px 12px; background: var(--neg-bg); border-radius: var(--radius-sm); } .ua-warn strong { color: var(--neg-strong, #B53030); font-weight: 700; } .ua-warn-ico { margin-right: 2px; } .ua-table-wrap { max-height: 56vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); } .ua-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; } .ua-table thead th { position: sticky; top: 0; z-index: 1; background: var(--thead-bg); color: var(--text-2); font-weight: 700; text-align: left; white-space: nowrap; padding: 9px 12px; border-bottom: 1px solid var(--line); } .ua-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); } .ua-table tbody tr:nth-child(even) td { background: rgba(243,244,246,.5); } .ua-table tbody tr:last-child td { border-bottom: none; } .ua-email { font-weight: 600; word-break: break-all; } .ua-muted { color: var(--muted); } .ua-self-tag { font-size: 10px; font-weight: 700; color: var(--brand); margin-left: 4px; } /* 상태/권한 칩 */ .ua-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap; } .ua-chip.admin { color: var(--brand); background: var(--sage-tint-2); } .ua-chip.user { color: var(--text-2); background: var(--surface-2); } .ua-chip.active { color: var(--pos); background: #E7F4EC; } .ua-chip.inactive { color: var(--neg); background: var(--neg-bg); } .ua-chip.locked { color: var(--muted); background: var(--surface-2); } .ua-chip.editor { color: var(--brand); background: var(--sage-tint); } /* ── 목표 매출 입력 모달 (어드민 OR 목표 입력 권한자) ── */ .tg-month-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 14px; } .tg-month-nav { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .tg-month-nav:hover { background: var(--surface-2); color: var(--text); } .tg-month-nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .tg-month-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tg-month-label { font-size: 15px; font-weight: 700; color: var(--text); min-width: 104px; text-align: center; font-variant-numeric: tabular-nums; } .tg-field input { text-align: right; font-variant-numeric: tabular-nums; } .tg-sum-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding: 10px 2px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); } .tg-sum-row b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; } .tg-loading { padding: 18px 0; text-align: center; color: var(--muted); font-size: 13px; } /* 월 이동 로딩 — 입력칸 DOM은 유지한 채 은은한 반투명만(통째 재렌더 깜빡임 방지) */ .tg-busy { opacity: 0.55; transition: opacity 0.15s ease; pointer-events: none; } /* 행 액션 버튼들 */ .ua-actions { display: flex; flex-wrap: wrap; gap: 6px; } .ua-act { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 6px 9px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; } .ua-act:hover { background: var(--surface-2); color: var(--text); } .ua-act:disabled { opacity: .4; cursor: not-allowed; } .ua-act.danger { color: var(--neg); border-color: var(--neg-bg); } .ua-act.danger:hover { background: var(--neg-bg); color: var(--neg-strong, #B53030); } .ua-act.go { color: var(--brand); border-color: var(--sage-tint-2); } .ua-act.go:hover { background: var(--sage-tint); } .ua-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 12.5px; } /* 로그인 이력 표(재사용) */ .ua-table.hist td:first-child, .ua-table.hist th:first-child { width: 60%; } .container { padding: 20px clamp(16px, 3vw, 32px) 80px; max-width: 1600px; margin: 0 auto; width: 100%; } .section { margin-bottom: 22px; } .section-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 0 0 10px; letter-spacing: -.01em; } .section-title .cap { font-weight: 600; color: var(--muted); font-size: 11.5px; margin-left: 6px; } /* 표 섹션: 제목(좌) + 컨트롤(우)을 한 줄에 — 제목은 다른 섹션과 동일 스타일/간격 유지 */ .section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; } .section-title-row .section-title { margin: 0; } .section-title-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* ── §0 기간 컨트롤 ── */ .period { background: var(--surface); border: none; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .period-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .period-row .sep { color: var(--muted); font-size: 13px; } .period-field { display: inline-flex; flex-direction: column; gap: 4px; } .period-field label { font-size: 11px; font-weight: 600; color: var(--muted); } .period input[type="date"] { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text); background: var(--surface); font-variant-numeric: tabular-nums; } /* 숨김 시작/종료 input은 항상 숨김 — 모바일 .period input{display:block} 규칙이 [hidden] 속성을 덮어쓰지 않도록 명시(폴백 .no-cally에서만 ID 규칙으로 노출). */ .period input[type="date"][hidden] { display: none; } .period input[type="date"]:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; } .period-apply { background: var(--brand); color: #fff; border: 1px solid var(--brand); border-radius: var(--radius-pill); padding: 8px 18px; font-size: 13px; font-weight: 600; align-self: flex-end; } .period-apply:hover { background: var(--brand-2); border-color: var(--brand-2); } .period-apply:disabled { opacity: .55; cursor: not-allowed; } .period-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .preset-btn { background: var(--surface); color: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 15px; font-size: 12px; font-weight: 600; } .preset-btn:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--brand); } .preset-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .preset-btn.is-active:hover { background: var(--brand-2); color: #fff; } /* ── 기간 선택: Cally 날짜범위 캘린더 (트리거 알약 + 팝오버) ── 기존 input[type=date] 2개는 hidden으로 유지(모든 JS·동기화 로직 그대로). 표시는 이 알약이 담당. */ .period-cal { position: relative; display: inline-flex; } /* 클릭 시 캘린더를 여는 트리거 — 인풋 톤(연회색면+세이지 포커스)과 일관 */ .cal-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; } .cal-trigger:hover { border-color: var(--sage); background: var(--surface-3); } .cal-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .cal-trigger[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--sage-tint); } .cal-trigger .cal-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); } .cal-trigger .cal-ico svg { width: 16px; height: 16px; display: block; } .cal-trigger .cal-range-text { white-space: nowrap; } .cal-trigger .cal-range-text .sep { color: var(--muted); margin: 0 6px; font-weight: 500; } .cal-trigger .cal-caret { width: 0; height: 0; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--muted); flex: 0 0 auto; transition: transform .15s ease; } .cal-trigger[aria-expanded="true"] .cal-caret { transform: rotate(180deg); border-top-color: var(--brand); } /* 팝오버(데스크탑) — 카드 톤 그림자, 트리거 바로 아래. 폭은 JS(syncPopWidth)가 트리거 offsetWidth를 inline width로 박아 좌우 끝까지 '정확히' 일치시킨다. 아래 width:100%/min-width:280px는 JS 미실행(폴백) 시의 안전 기본값일 뿐 — JS가 inline으로 덮어쓴다. */ .cal-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 100%; min-width: 280px; /* 폴백 기본값 — 정상 동작 시 JS가 inline width/min-width로 트리거에 정확 동기화 */ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 12px; } .cal-pop[hidden] { display: none; } /* 팝오버 폭에 맞춰 달력·월 그리드가 가로 꽉 차게(7열 균등 분배) */ .cal-pop calendar-range, .cal-pop calendar-date { display: block; width: 100%; } .cal-pop calendar-month { width: 100%; } /* 모바일 하단 시트용 백드롭(데스크탑은 미사용) */ .cal-backdrop { display: none; } /* 팝오버 푸터(적용/취소) — 데스크탑은 즉시 조회라 숨김, 모바일 시트에서만 노출 */ .cal-pop-actions { display: none; } /* ── Cally / 세이지 스타일 (::part + 커스텀 프로퍼티) ── calendar-date는 비용 관리 증빙일(단일 날짜) — 기간 설정과 동일 룩으로 통일. */ calendar-range, calendar-date { /* Cally 공식 커스텀 프로퍼티 — 선택/범위 끝의 강조색을 우리 딥세이지로 */ --color-accent: var(--brand); --color-text-on-accent: #fff; font-family: inherit; color: var(--text); } calendar-month { font-family: inherit; } /* 헤더(월 이동) — 좌우 화살표 버튼: 테두리·배경 제거하고 채워진 삼각형만 노출. (Cally 기본 button은 UA의 2px outset 검정 테두리 + 연회색 배경 → 굵은 원형 링처럼 보임) */ calendar-range::part(button), calendar-date::part(button) { border: none; background: transparent; box-shadow: none; border-radius: var(--radius-sm); color: var(--charcoal); } calendar-range::part(button):hover, calendar-date::part(button):hover { background: var(--sage-tint); color: var(--brand); } /* 포커스 시 굵은 검정 링 대신 은은한 세이지 윤곽만(키보드 접근성 유지) */ calendar-range::part(button):focus-visible, calendar-date::part(button):focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } calendar-range::part(heading), calendar-date::part(heading) { font-weight: 700; font-size: 14px; color: var(--text); letter-spacing: -.01em; } /* 헤더(월 이동 행) 아래 약간 간격 */ calendar-range::part(header), calendar-date::part(header) { margin-bottom: 6px; } /* 슬롯으로 주입한 이전/다음 화살표 아이콘(채워진 삼각형, 작게) */ .cal-nav-ico { width: 13px; height: 13px; display: block; color: var(--charcoal); } /* 캘린더 그리드(table)를 팝오버 내부 폭에 정확히 맞춘다. Cally 내부는 + (col-1~7, 각 고정 36px) 구조 — 그대로면 7열 합(252px)이 팝오버 내부폭(≈231px)을 넘어 우측(일요일 열)이 잘린다. width:100% + min-width:0(table의 min-content 가드 해제) + table-layout:fixed, 그리고 col-1~7을 14.2857%(=100/7)로 덮어 7열을 폭에 '균등 분배'(≈33px씩) → 잘림 0. */ calendar-month::part(table) { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; } /* 7열 균등 분배 — Cally가 col에 박은 고정 36px를 퍼센트로 덮는다(이게 빠지면 table-layout:fixed가 36px를 따라 잘림). */ calendar-month::part(col-1), calendar-month::part(col-2), calendar-month::part(col-3), calendar-month::part(col-4), calendar-month::part(col-5), calendar-month::part(col-6), calendar-month::part(col-7) { width: 14.2857%; } /* 요일 헤더(Cally part는 'th day day-N' — weekday 아님). 작은 폰트·컴팩트 높이 */ calendar-month::part(th) { color: var(--muted); font-weight: 600; font-size: 11px; padding: 2px 0 6px; text-align: center; height: auto; } /* 날짜 셀 버튼 — 셀(td)을 꽉 채우고(width:100%) 컴팩트 정사각 비율. 고정 36px 대신 width:100%로 7등분 폭을 따르고(min/max-width로 폭 초과 방지), height로 자연스러운 비율(살짝 낮게). */ calendar-month::part(button) { width: 100%; max-width: 100%; min-width: 0; height: 32px; padding: 0; box-sizing: border-box; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; } calendar-month::part(button):hover { background: var(--sage-tint); } calendar-month::part(button):focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* 오늘 — 세이지 링(채움 없음) */ calendar-month::part(today) { box-shadow: inset 0 0 0 1.5px var(--sage); font-weight: 700; } /* 범위 양끝(선택일)·단일 선택일(calendar-date) — 딥세이지 채움 + 흰 글자(--color-accent가 처리하지만 라운드 명시) */ calendar-month::part(selected), calendar-month::part(range-start), calendar-month::part(range-end) { background: var(--brand); color: #fff; font-weight: 700; border-radius: var(--radius-sm); } calendar-month::part(range-start):hover, calendar-month::part(range-end):hover { background: var(--brand-2); } /* 범위 안쪽 — 연세이지 틴트 띠 */ calendar-month::part(range-inner) { background: var(--sage-tint); color: var(--brand-ink); border-radius: 0; } /* 비활성(데이터 범위 밖) — 흐리게 */ calendar-month::part(disallowed) { color: var(--line-strong); text-decoration: line-through; opacity: .6; cursor: not-allowed; } calendar-month::part(outside) { color: var(--muted); opacity: .55; } /* Cally 로드 실패 폴백: 캘린더 트리거 숨기고 기존 시작/종료 input 노출(JS도 동일 가드) */ .no-cally .period-cal { display: none; } .no-cally #startDate, .no-cally #endDate { display: inline-block; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text); background: var(--surface); font-variant-numeric: tabular-nums; } .no-cally .period-apply { display: inline-flex !important; } /* 표시 단위(일/주/월) 세그먼트 토글 — 표·차트 공통 전환. preset과 동일 톤(연면+세이지 활성). */ .unit-toggle-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .unit-toggle { display: inline-flex; align-items: stretch; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px; gap: 2px; } .unit-btn { background: transparent; color: var(--charcoal); border: none; border-radius: var(--radius-pill); padding: 6px 16px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; line-height: 1.4; transition: background .12s ease, color .12s ease; } .unit-btn:hover { color: var(--brand); } .unit-btn.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-card); } .unit-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } @media (max-width: 639px) { .period-apply { align-self: stretch; min-height: 44px; } .preset-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } .period input[type="date"] { min-height: 44px; } /* 단위 토글: 폰에서 가로 꽉 채우고 3등분, 터치폭 충분 */ .unit-toggle-row { width: 100%; min-width: 0; } .unit-toggle { width: 100%; } .unit-btn { flex: 1 1 0; min-height: 44px; padding-left: 8px; padding-right: 8px; } } /* ── §1 KPI 카드 그리드 ── */ .kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .kpi-card { position: relative; background: var(--surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: box-shadow .18s ease, transform .18s ease; } .kpi-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); } .kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .kpi-label { font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .kpi-delta { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 9px; border-radius: 999px; white-space: nowrap; color: var(--muted); background: var(--surface-2); } .kpi-delta:empty { display: none; } .kpi-delta.up { color: var(--pos); background: var(--pos-bg); } .kpi-delta.down { color: var(--neg); background: var(--neg-bg); } .kpi-delta .arr { font-size: 9px; } .kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi-value.neg { color: var(--neg); } .kpi-value .unit, .kpi-value .dec { font-size: 16px; font-weight: 600; color: var(--muted); margin-left: 1px; } .kpi-spark { height: 26px; margin-top: 2px; } .kpi-spark svg { display: block; width: 100%; height: 100%; overflow: visible; } /* ── §0.5 퍼포먼스 매출 목표 (SaaS) ── 데이터: /api/perf-targets (BQ 재현). 월별(6/5/4월)×채널 목표 vs 실매출 진행률. 세이지 톤: 달성 100%↑=세이지 강조, 미달=중립. 다크/브랜드외 파랑 금지. */ /* ── §2 차트존 + 차트 대상 선택 드롭다운 — static/css/chart-module.css로 분리(공유 .ctp-* 는 아래 잔류) ── */ .ctp-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text); user-select: none; } .ctp-opt:hover { background: var(--surface-2); } .ctp-opt input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; } .ctp-opt .ctp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctp-opt.is-checked { color: var(--brand); font-weight: 600; } .ctp-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* '합계(전체)' 옵션 — 구분선으로 제품 목록과 분리 */ .ctp-opt.ctp-all { font-weight: 600; } .ctp-sep { height: 1px; background: var(--line); margin: 4px 6px; flex: 0 0 auto; } /* 표 전용 제품 선택 — 차트 드롭다운과 100% 동일 톤(클래스만 분리해 독립 동작). 차트 .chart-target 규칙을 그대로 상속받도록 동일 셀렉터에 별칭 부여(중복 스타일/드리프트 방지). */ .table-target { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; } .table-target-btn { appearance: none; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--charcoal); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 12px 7px 14px; max-width: 240px; cursor: pointer; line-height: 1.2; } .table-target-btn:hover { background: var(--surface-2); border-color: var(--line-strong); } .table-target-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .table-target-btn .ctb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-target-btn .ctb-caret { flex: 0 0 auto; width: 9px; height: 9px; margin-left: 2px; pointer-events: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .16s ease; } .table-target-btn[aria-expanded="true"] .ctb-caret { transform: translateY(1px) rotate(225deg); border-color: var(--brand); } .table-target.is-product .table-target-btn { background: var(--sage-tint); border-color: var(--sage-tint-2); color: var(--brand); } .table-target.is-product .table-target-btn .ctb-caret { border-color: var(--brand); } .table-target-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 230px; max-width: 280px; max-height: 320px; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .table-target-pop[hidden] { display: none; } .table-target-pop::-webkit-scrollbar { width: 8px; } .table-target-pop::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } /* ── §3 표 카드 (주인공) ── */ .table-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); } .table-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .table-head-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.01em; white-space: nowrap; } .table-head-right { display: flex; align-items: center; gap: 8px; } .table-chip { font-size: 11px; font-weight: 600; color: var(--brand); background: var(--sage-tint); padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .table-fs-btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); padding: 7px 13px; font-size: 12px; font-weight: 600; color: var(--charcoal); display: inline-flex; align-items: center; gap: 5px; } .table-fs-btn:hover { background: var(--surface-2); border-color: var(--line-strong); } /* 숫자 축약 토글 칩 */ .table-abbr-btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); padding: 7px 13px; font-size: 12px; font-weight: 600; color: var(--charcoal); display: inline-flex; align-items: center; } .table-abbr-btn:hover { background: var(--surface-2); border-color: var(--line-strong); } .table-abbr-btn[aria-pressed="true"] { background: var(--sage-tint); border-color: var(--sage-tint-2); color: var(--brand); } .table-card { background: var(--surface); border: none; border-radius: var(--radius); box-shadow: var(--shadow-card); position: relative; overflow: hidden; } /* 데일리표 항목(라벨) 열 너비 조절 핸들 — 라벨 열 우측 경계선에 겹쳐 col-resize. sticky 라벨 위에 떠야 하므로 z-index 높임 */ body.is-col-resizing { cursor: col-resize !important; user-select: none; -webkit-user-select: none; } /* 표 전체화면 모드 */ .table-card.is-fullscreen { position: fixed; inset: 0; z-index: 90; border-radius: 0; border: none; margin: 0; max-width: none; } .table-card.is-fullscreen .table-scroll { max-height: calc(100vh - 52px); /* 52px = 전체화면 타이틀 헤더 높이 */ } /* 전체화면 타이틀 헤더 — 평소 숨김, .is-fullscreen에서만 표 위에 표시. 섹션 타이틀(h2.section-title) 텍스트를 진입 시 JS로 복사해 표시(세이지 톤·기존 타이틀과 일관). 우측 padding은 절대배치 닫기(축소) pill과 겹침 방지. */ .table-fs-head { display: none; align-items: center; height: 52px; padding: 0 110px 0 20px; border-bottom: 1px solid var(--line); background: var(--surface); } .table-card.is-fullscreen .table-fs-head { display: flex; } .table-fs-title { font-size: 14px; font-weight: 700; color: var(--text-2); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table-fs-title .table-fs-cap { font-weight: 600; color: var(--muted); font-size: 11.5px; margin-left: 6px; } /* 전체화면 닫기(축소) 버튼 — 평소 숨김. 전체화면에서만 표 우상단에 고정 표시. */ .table-fs-close { display: none; position: absolute; top: 12px; right: 16px; z-index: 95; /* sticky 헤더(30)·fade(5) 위 */ border: 1px solid var(--sage-tint-2); background: var(--sage-tint); border-radius: var(--radius-pill); padding: 7px 13px; font-size: 12px; font-weight: 600; color: var(--brand); align-items: center; gap: 5px; cursor: pointer; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); } .table-fs-close:hover { background: var(--sage-tint-2); border-color: var(--sage); } .table-fs-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .table-card.is-fullscreen .table-fs-close { display: inline-flex; } .table-scroll { /* 표를 자체 세로+가로 스크롤 컨테이너로 만들어, thead sticky 기준 박스를 이 컨테이너로 고정한다. (overflow-x:auto + overflow-y:visible 조합은 브라우저가 y축도 auto로 강제 → sticky 기준이 컨테이너가 되므로 top 보정을 viewport 기준 값(--topbar-h)이 아니라 컨테이너 기준 0으로 둔다.) */ overflow: auto; /* 표는 .main(패널 내 스크롤 영역) 안의 자체 세로 스크롤 컨테이너. thead sticky 기준은 여전히 이 컨테이너이므로 top:0 그대로 유지. 가용 높이 = 100vh - 패널 상하 여백(panel-margin*2) - 헤더(topbar-h) - 카드 여유. 이 값을 넘지 않게 제한해 표가 둥근 패널 하단을 넘지 않도록 한다. */ max-height: calc(100vh - var(--panel-margin) * 2 - var(--topbar-h) - 28px); -webkit-overflow-scrolling: touch; /* 스크롤바 통일 — 세로/가로 동일한 얇은 커스텀 스타일. Firefox: scrollbar-width/scrollbar-color 는 양축에 동일 적용됨. */ scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } /* 표 스크롤바 (Chrome/Safari) — 세로·가로 한 규칙으로 동일하게 통일(얇기 10px·thumb 색·radius 일치) */ .table-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .table-scroll::-webkit-scrollbar-track { background: transparent; } .table-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid transparent; /* 트랙과 간격을 둬 thumb 이 가늘고 둥글게 보이도록 */ background-clip: padding-box; } .table-scroll::-webkit-scrollbar-thumb:hover { background: var(--sage); } /* 세로·가로 교차 코너 투명 처리 */ .table-scroll::-webkit-scrollbar-corner { background: transparent; } .table-fade { position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), var(--surface)); opacity: 0; transition: opacity .15s ease; z-index: 5; } .table-card.has-overflow .table-fade { opacity: 1; } table.grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12px; } table.grid th, table.grid td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid var(--line); text-align: right; } /* 좌상단 교차칸 (제품 + 지표 헤더 영역) */ .grid thead th.corner-prod { position: sticky; top: 0; left: 0; z-index: 30; background: var(--thead-bg); text-align: center; /* 헤더 연회색(불투명 #EEF0F3) — 세로 스크롤 시 본문 비침 방지 */ width: var(--col-prod); min-width: var(--col-prod); max-width: var(--col-prod); font-weight: 700; color: var(--charcoal); /* 제품/지표 사이 세로 구분선은 border-right 한 줄만(1px). 예전 box-shadow는 border와 1px 어긋나 두 줄로 보였으므로 제거. */ border-right: 1px solid var(--line-strong); } .grid thead th.corner-label { position: sticky; top: 0; left: var(--col-prod); z-index: 30; background: var(--thead-bg); text-align: center; /* 헤더 연회색(불투명) — corner 동일 */ width: var(--col-label); min-width: var(--col-label); max-width: var(--col-label); font-weight: 700; color: var(--charcoal); /* 지표/날짜 경계: 본문 th.label과 동일하게 border-right 없음 — 경계는 .can-scroll-x sticky 그림자 한 줄로만 표현. (헤더에만 border-right 1px이 그림자와 겹쳐 본문보다 두껍게 보이던 문제 제거 → 헤더=본문 동일 1px) */ } .grid thead th.date { position: sticky; top: 0; z-index: 20; background: var(--thead-bg); /* 헤더 연회색(불투명 #EEF0F3) — 세로 스크롤 시 본문 비침 방지 */ font-size: 11px; font-weight: 700; color: var(--charcoal); min-width: 96px; } .grid thead th.date.date--latest { color: var(--brand); font-weight: 800; } /* 요일색 (헤더 영역 전용 — 토 파랑 / 일 빨강, 데이터 셀 음수빨강과 톤 구분) */ .grid thead th.date.dow-sat, .grid thead th.date.date--latest.dow-sat { color: #2F6FEB; } /* 토요일 파랑(캘린더 관습) */ .grid thead th.date.dow-sun, .grid thead th.date.date--latest.dow-sun { color: #E5484D; } /* 일요일 빨강(음수 #B82828보다 밝은 톤) */ /* 현재월 합계 컬럼 (시트 C열 위치) — 그린 틴트 없이 좌우 경계선으로만 구획 구분. 배경은 각 행의 일반 배경(헤더/zebra/tfoot)을 따르고, 좌우 세로선이 헤더~본문~tfoot로 이어짐. 가로 스크롤 시 좌측 고정(sticky) — 라벨 열(제품+지표) 바로 옆 left에 고정, 날짜 열만 스크롤. z-index: 코너(30) > 월합계 헤더(25) > 날짜 헤더(20) > 행 라벨(10) > 월합계 본문(5) > 일반 셀. */ .grid thead th.month-total { position: sticky; top: 0; left: calc(var(--col-prod) + var(--col-label)); z-index: 25; background: var(--thead-bg); /* 불투명 헤더 연회색(th.date와 동일 #EEF0F3) — 세로 스크롤 시 본문이 비쳐 겹치는 것 방지 */ font-size: 11.5px; font-weight: 700; color: var(--charcoal); min-width: 104px; text-align: center; /* '○월 합계' 헤더 가운데 정렬 — 다른 날짜 헤더와 동일(본문 월합계 숫자셀 td는 우측정렬 유지) */ border-left: 1px solid var(--sage-tint-2); border-right: 1px solid var(--sage-tint-2); } /* 본문·tfoot 월합계 셀: 배경은 자기 행을 따름(zebra/tfoot 불투명 규칙이 덮음 — 스크롤 내용 비침 방지), 좌우 경계선 + 살짝 굵게(600) */ .grid td.num.month-total { position: sticky; left: calc(var(--col-prod) + var(--col-label)); z-index: 5; background: var(--surface); /* 불투명 폴백 — zebra(#FFF/#FAFBFC)·tfoot(--surface-2) 규칙이 덮음 */ font-weight: 600; color: var(--text); min-width: 104px; border-left: 1px solid var(--sage-tint-2); border-right: 1px solid var(--sage-tint-2); } /* .grid-daily month-total left 오버라이드(라벨 단일열) — static/css/daily-table.css로 분리. */ /* tfoot 월합계 셀 배경 — tfoot 면색(--surface-2) 유지(위 sticky 폴백 --surface가 덮지 않게 재명시) */ .grid tfoot td.num.month-total { background: var(--surface-2); } /* 월합계 음수 — 데이터 음수셀 A안과 동일 톤(옅은 빨강 배경 + 진한 글자 + 좌측 바), 우측 경계 유지 */ .grid td.num.month-total.neg-cell { background: rgba(210, 59, 59, .06); color: #B82828; box-shadow: inset 2px 0 0 #D23B3B; } /* 월합계 음수셀은 sticky라 불투명 필수 — rgba(.06)+흰배경 합성과 동일한 솔리드(#FCF3F3)로 재정의. (zebra/일반 rgba 음수셀 규칙(아래 .product-block/.tfoot)이 specificity로 이기므로 동급+후순위로 명시) */ .grid tbody.product-block td.num.month-total.neg-cell, .grid tfoot td.num.month-total.neg-cell, .grid-daily tbody.daily-body td.num.month-total.neg-cell { background: #FCF3F3; } /* ── 날짜 데이터 열 세로 구분선 ── 날짜 열(헤더 th.date / 본문·tfoot td.num[data-col])마다 좌측에 아주 연한 세이지선(--sage-tint-3). month-total 컬럼(좌우 --sage-tint-2 경계)과 톤 구분, 과하지 않게 1px. 두 표(.grid·.grid-daily) 공통. background가 아니라 border라 zebra/요일색/sticky/음수셀 배경 무손상. month-total 바로 다음 첫 날짜 열은 month-total의 border-right와 겹치지 않게 border-left 생략. */ .grid thead th.date, .grid tbody td.num[data-col], .grid tfoot td.num[data-col] { border-left: 1px solid var(--sage-tint-3); } /* month-total(우측 경계 보유) 바로 뒤 첫 날짜 셀 — 이중선 방지 */ .grid thead th.month-total + th.date, .grid td.num.month-total + td.num[data-col] { border-left: none; } /* 좌측 sticky 열 (행 헤더: th, scope) */ th.prod { position: sticky; left: 0; z-index: 10; background: var(--surface); vertical-align: top; font-weight: 700; color: var(--text); /* 고정폭(가변 제거) — 콘텐츠 기반 auto 확장을 막아 실제 렌더폭 = --col-prod 가 되도록. 이래야 지표 열 left: var(--col-prod) 가 제품 열 우측과 픽셀 단위로 일치 → 가로 스크롤 시 침범/어긋남 없음. */ font-size: 12px; width: var(--col-prod); min-width: var(--col-prod); max-width: var(--col-prod); /* 제품 열과 지표 열 사이 세로 구분선 — 헤더(corner-prod)와 동일 톤(--line-strong), border-right 한 줄(1px)만. 제품 열은 sticky라 가로 스크롤 시에도 세로선 유지. (예전 box-shadow는 border와 1px 어긋나 두 줄로 보여 제거) */ border-right: 1px solid var(--line-strong); } /* 제품명 좌측 정렬 — table.grid th(right)보다 구체적이어야 적용됨 */ .grid th.prod { text-align: left; overflow: hidden; text-overflow: ellipsis; } th.label { position: sticky; left: var(--col-prod); z-index: 10; background: var(--surface); font-size: 11px; font-weight: 600; color: var(--text-2); /* 고정폭(가변 제거) — 제품 열과 동일하게 폭 고정 */ width: var(--col-label); min-width: var(--col-label); max-width: var(--col-label); } /* 지표명 좌측 정렬 — table.grid th(right)보다 구체적이어야 적용됨 */ .grid th.label { text-align: left; } td.num { min-width: 96px; font-weight: 500; } td.num.muted { color: var(--muted); } /* 단위기호(₩ % 억 만) 톤다운 — 값은 진하게, 기호는 흐리고 약간 작게 */ .grid td.num .unit, .grid td.num.month-total .unit { color: #79818B; font-size: .9em; font-weight: 500; } /* ROAS/마진율 임계 미만 신호 — 글자만 흐리게(나쁜 값 죽임, 빨강/초록 안 씀). 위계색보다 우선하도록 .grid tr 구체성 */ .grid tr.m-roas td.num.weak-signal, .grid tr.m-rate td.num.weak-signal, .grid td.num.weak-signal { color: #79818B; } /* 제품 블록 경계 */ tbody.product-block > tr:first-child > * { border-top: 2px solid var(--line-strong); } tbody.product-block:first-of-type > tr:first-child > * { border-top: none; } /* ── 제품 블록 zebra (홀수 흰색 / 짝수 초연한 그레이) ── 좌측 sticky 행헤더(th.prod/th.label)도 같은 면색으로 통일. 우선순위: 음수셀·월합계·hover > zebra (아래 각 규칙이 구체성/!important로 이김) */ tbody.product-block:nth-of-type(odd) td.num, tbody.product-block:nth-of-type(odd) th.prod, tbody.product-block:nth-of-type(odd) th.label { background: #FFFFFF; } tbody.product-block:nth-of-type(even) td.num, tbody.product-block:nth-of-type(even) th.prod, tbody.product-block:nth-of-type(even) th.label { background: #FAFBFC; } /* ── 지표 위계 (행별 굵기·색) ── 매출=주연(진하고 굵게), 마케팅비=보조(연하게), ROAS/마진율/최종마진=강조(굵게). 음수셀/월합계는 뒤 규칙이 색을 덮음(빨강/세이지). */ .grid tr.m-sales td.num { font-weight: 600; color: #1A1D21; } .grid tr.m-sales th.label { color: #1A1D21; font-weight: 700; } .grid tr.m-cost td.num { font-weight: 600; color: #4A5159; } .grid tr.m-cost th.label { color: #4A5159; } .grid tr.m-roas td.num, .grid tr.m-margin td.num, .grid tr.m-rate td.num { font-weight: 600; } .grid tr.m-roas th.label, .grid tr.m-margin th.label, .grid tr.m-rate th.label { color: #4A5159; } /* 부호 색 */ .neg { color: var(--neg); } /* ── 음수 셀 절제(A안) — 옅은 배경 + 진한 글자 + 좌측 얇은 바 ── zebra(nth-of-type td.num = 0,3,2)를 확실히 이기도록 동급+후순위 구체성으로 명시. */ .grid tbody.product-block td.num.neg-cell, .grid tfoot td.num.neg-cell { background: rgba(210, 59, 59, .06); color: #B82828; box-shadow: inset 2px 0 0 #D23B3B; } .grid tbody.product-block th.prod.neg-cell, .grid tbody.product-block th.label.neg-cell { background: rgba(210, 59, 59, .06); } /* ── sticky 그림자 (가로스크롤 존재 시에만) ── 좌측 고정 그룹(라벨 열 + 합계 열)의 우측 끝 = month-total 셀에 입체 그림자. 스크롤 0이면 평평(.can-scroll-x 없음). 음수셀의 inset 좌측바와 공존하도록 우측 그림자만. */ .table-card.can-scroll-x .grid td.num.month-total, .table-card.can-scroll-x .grid tfoot td.num.month-total { box-shadow: 6px 0 8px -4px rgba(16, 24, 40, .10); } .table-card.can-scroll-x .grid thead th.date { box-shadow: 0 2px 4px -2px rgba(16, 24, 40, .08); } /* 월합계 헤더(좌측 sticky 그룹 우측 끝 교차칸)는 좌측(우방향)+상단(하방향) 그림자 동시 */ .table-card.can-scroll-x .grid thead th.month-total { box-shadow: 6px 0 8px -4px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .08); } /* 데일리 전체 매출·비용 표(.grid-daily) 전용 스타일 — static/css/daily-table.css로 분리. (항목 단일열 sticky·행 위계색·아코디언·셰브론·sticky 그림자. .grid 공통 규칙은 여기 잔류.) */ /* hover 하이라이트 — 열/행은 중립 회색(#F4F5F7), 교차셀만 세이지 틴트(#EAEFEB)로 강조 */ td.col-hover { background: var(--surface-2) !important; } /* #F4F5F7 중립 */ .grid thead th.col-hover { background: var(--surface-2) !important; } tbody.product-block.row-hover th.prod, tbody.product-block.row-hover th.label { background: var(--surface-2) !important; } tbody.product-block.row-hover td.num:not(.neg-cell) { background: var(--surface-2) !important; } /* 교차셀(행+열 동시 hover): 세이지 틴트로 또렷이 */ tbody.product-block.row-hover td.col-hover:not(.neg-cell) { background: var(--sage-tint) !important; } /* tfoot 합계 */ .grid tfoot td, .grid tfoot th { border-top: 2px solid var(--line-strong); background: var(--surface-2); font-weight: 700; } /* tfoot 합계 행은 전 지표 볼드 — 본문 지표위계(.grid tr.m-cost td.num 등, specificity 0,3,2)가 tfoot 합계셀까지 눌러 마케팅비 합계 숫자가 안 굵어지는 문제 차단. #grid(ID) 셀렉터로 (1,1,3) 구체성을 줘 지표위계(0,3,2)를 확실히 이기고 tfoot 전 지표 700 강제. 본문 tbody 위계(매출 진하게·마케팅비 한 톤)는 그대로 유지. */ #grid tfoot tr td.num, #grid tfoot tr th.label, #grid tfoot tr th.prod { font-weight: 700; } .grid tfoot th.prod, .grid tfoot th.label { position: sticky; left: 0; z-index: 10; background: var(--surface-2); font-weight: 700; } /* tfoot 제품열도 제품/지표 사이 세로 구분선 일관 적용 (본문·헤더와 동일 톤) */ .grid tfoot th.prod { text-align: left; border-right: 1px solid var(--line-strong); } .grid tfoot th.label { text-align: left; } .grid tfoot th.label { left: var(--col-prod); } .grid tfoot { position: sticky; bottom: 0; z-index: 15; } /* ── 스켈레톤 ── */ .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--grid) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 5px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .skel-line { height: 12px; margin: 8px 0; } .skel-strip { height: 64px; } .spinner { width: 16px; height: 16px; border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } .spinner.lg { width: 28px; height: 28px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } /* .chart-loading — static/css/chart-module.css로 분리 */ /* ── 상태 (빈/에러) ── */ .state-card { background: var(--surface); border: none; box-shadow: var(--shadow-card); border-radius: var(--radius); padding: 40px 24px; text-align: center; color: var(--text-2); } .state-card.error { border-color: var(--neg); background: var(--neg-bg); color: var(--neg); } .state-card .state-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: inherit; } .state-card .state-desc { font-size: 13px; margin-bottom: 16px; } .banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--neg-bg); border: 1px solid var(--neg); color: var(--neg); border-radius: 10px; padding: 12px 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px; } .banner .btn { border-color: var(--neg); color: var(--neg); background: var(--surface); } /* ── 토스트 ── */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: var(--brand); color: #fff; padding: 10px 18px; /* 기본=딥세이지(안내/성공) */ border-radius: 999px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 100; } /* 에러/실패 토스트만 빨강(성공·안내와 구분) — toast(text,{error:true}) 또는 자동 감지 */ .toast.is-error { background: var(--neg-strong); color: #fff; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── 새 알림 푸시 토스트(우하단 스택) ── 기존 액션 토스트(#toast, 하단중앙 pill)와 별개 컨테이너. 폴링이 새 알림 발견 시 카드로 띄움. 흰 카드 + 좌측 세이지 액센트 바 + 벨 아이콘 + 제목(굵게)/본문 1~2줄 + 닫기(×). 세로 스택. */ #notifToasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 110; display: flex; flex-direction: column-reverse; gap: 10px; width: 340px; max-width: calc(100vw - 32px); pointer-events: none; /* 컨테이너는 클릭 통과, 카드만 받음 */ } .ntoast { position: relative; pointer-events: auto; display: flex; gap: 11px; align-items: flex-start; background: #FCE4EF; color: var(--text); /* 핑크 강조(마킹 팔레트 핑크 #D6336C 계열) */ border: 1px solid #F0A8C8; border-left: 4px solid #D6336C; border-radius: var(--radius-md); box-shadow: 0 0 0 1px rgba(214,51,108,.35), 0 6px 20px rgba(214,51,108,.30); padding: 13px 14px 13px 13px; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .22s ease, transform .22s ease; cursor: pointer; } .ntoast.show { opacity: 1; transform: translateY(0) scale(1); } .ntoast.leaving { opacity: 0; transform: translateY(10px) scale(.98); } .ntoast-ico { flex: 0 0 auto; width: 30px; height: 30px; margin-top: 1px; border-radius: 9px; background: #D6336C; /* 핑크 — 카드와 통일(흰 벨로 강조) */ display: flex; align-items: center; justify-content: center; } .ntoast-ico svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ntoast-main { flex: 1 1 auto; min-width: 0; } .ntoast-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.35; letter-spacing: -.01em; word-break: break-word; } .ntoast-body { font-size: 12px; color: var(--text-2); line-height: 1.45; margin-top: 2px; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ntoast-x { flex: 0 0 auto; width: 24px; height: 24px; margin: -3px -3px 0 0; border: none; background: none; cursor: pointer; border-radius: 7px; color: var(--muted); display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } .ntoast-x:hover { background: var(--surface-2); color: var(--text-2); } .ntoast-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* "외 N건 더" 누적 카운트 칩(스택 초과분) */ .ntoast.is-more { cursor: pointer; border-left-color: var(--sage-tint-2); } .ntoast.is-more .ntoast-title { font-weight: 600; color: var(--text-2); } @media (prefers-reduced-motion: reduce) { .ntoast { transition: opacity .12s ease; transform: none; } .ntoast.show, .ntoast.leaving { transform: none; } } /* ════════════════════════════════════════════════════ 반응형 ════════════════════════════════════════════════════ */ @media (max-width: 1023px) { .grid tfoot { position: static; } /* 모바일/태블릿 합계 sticky 해제 */ .kpi-grid { grid-template-columns: repeat(3, 1fr); } /* 차트존: 위젯을 차트 아래로 스택 */ /* 태블릿: 사이드바 자동 아이콘 rail */ .shell:not(.sb-forced-open) .sidebar { flex-basis: var(--sidebar-w-collapsed); width: var(--sidebar-w-collapsed); } .shell:not(.sb-forced-open) .sb-brand .logo, .shell:not(.sb-forced-open) .sb-logo-mark, .shell:not(.sb-forced-open) .sb-logo-img, .shell:not(.sb-forced-open) .sb-group-label, .shell:not(.sb-forced-open) .sb-item .sb-text, .shell:not(.sb-forced-open) .sb-pin { display: none; } .shell:not(.sb-forced-open) .sb-brand { justify-content: center; padding: 20px 8px 12px; } .shell:not(.sb-forced-open) .sb-toggle { margin-left: 0; } .shell:not(.sb-forced-open) .sb-nav { padding: 4px 8px; } .shell:not(.sb-forced-open) .sb-item { justify-content: center; padding: 11px 0; gap: 0; } /* 태블릿: 검색창 폭 축소 + 단축키 키캡 숨김 (알림·도움말·프로필은 유지) */ .pagehead-search { width: 200px; } .pagehead-kbd { display: none; } } @media (max-width: 639px) { /* ── 폰 가독성 우선: 단순 축소가 아니라 폰 폭에 맞게 재구성(세로 쌓기·여백·터치) ── */ /* 본문 14px 유지(라벨 가독 하한). 패널 여백 10px(좌우 패딩 ≥16과 합쳐 카드 숨쉴 공간) */ body { font-size: 14px; } :root { --panel-margin: 10px; } /* KPI: 2열 유지, 카드 패딩 넉넉히, 핵심 숫자 22px(읽기 편한 크기 — 18px 깨알 금지) */ .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .kpi-card { padding: 16px 16px 14px; gap: 8px; } .kpi-value { font-size: 22px; } .kpi-value .unit, .kpi-value .dec { font-size: 13px; } .kpi-label { font-size: 12.5px; } /* 차트: 폰에서 적당한 높이(범례·캔버스 가로 안 넘침은 Chart.js responsive가 처리) */ /* 표: 데이터 숫자 글자는 유지(가독), 제품/지표 라벨열만 좁혀 말줄임 → 날짜 데이터 2~3열 동시 노출. 좌측 고정열 폭은 변수(--col-prod/--col-label)로만 축소 → width·sticky left 자동 재계산(데스크탑 무영향). */ :root { --col-prod: 92px; --col-label: 56px; } table.grid { font-size: 12.5px; } /* 데이터 셀은 세로 패딩 넉넉히, 가로는 살짝만(숫자 가독 유지) */ table.grid th, table.grid td { padding: 9px 9px; } /* 날짜 데이터 셀 최소폭 축소(가독 유지) → 한 화면에 날짜 열 더 보이게 */ .grid thead th.date { min-width: 64px; font-size: 11.5px; } td.num { min-width: 64px; } /* 월합계 열도 축소(좌측 고정 바로 옆 첫 데이터 열) */ .grid thead th.month-total { min-width: 72px; } .grid td.num.month-total { min-width: 72px; } /* 제품/지표 라벨열: 좁아진 폭에서 말줄임 허용(데이터 숫자는 안 줄임). 가로 패딩 더 축소해 글자 영역 확보 */ .grid th.prod, .grid tfoot th.prod { padding-left: 8px; padding-right: 6px; } .grid th.label, .grid tfoot th.label { padding-left: 8px; padding-right: 6px; } .grid th.label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 좌상단 교차 헤더(제품/지표 라벨)도 좁은 폭에서 말줄임 */ .grid thead th.corner-prod, .grid thead th.corner-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 6px; padding-right: 6px; } /* 표 상단 컨트롤([축약][전체화면][제품선택]) — 폰에서 줄바꿈·좌측 정렬, 터치폭 충분 */ .section-title-row { align-items: flex-start; } .section-title-actions { flex-wrap: wrap; gap: 8px; row-gap: 8px; } .table-abbr-btn, .table-fs-btn, .table-target-btn, .chart-target-btn { min-height: 44px; } /* 헤더: 제목 위계 유지(17px)·우측 액션 압축, 가로 넘침 0. (.ph-email/.ph-caret 숨김은 profile.css 모바일 블록으로 분리) */ .pagehead-search, .updated { display: none; } /* 도움말(?)은 프로덕트 투어 정식 기능이 됐으므로 폰에서도 노출(투어 재실행 진입점). */ .pagehead-title { font-size: 17px; } /* 폰: 제목 짧게 — '퍼포먼스 대시보드' → '퍼포먼스'(말줄임 대신 짧은 텍스트) */ .pagehead-title .ph-title-full { display: none; } .pagehead-title .ph-title-short { display: inline; } .btn { min-height: 44px; } .icon-btn { width: 44px; height: 44px; } .hamburger { width: 44px; height: 44px; } /* 프로필(아바타 알약) 모바일 터치 타깃 — profile.css 모바일 블록으로 분리 */ .pagehead-right { gap: 8px; } /* 좌우 패딩 ≥16px, 제목은 우측 액션을 밀지 않게 줄임 허용(말줄임) */ .pagehead { gap: 10px; padding: 0 16px; } .pagehead-title { flex: 0 1 auto; min-width: 0; margin-left: 0; /* 데스크탑용 -20px 시프트 해제 — 햄버거와 겹침 방지 */ } /* 본문 좌우 패딩 ≥16px 보장(clamp 하한이 16이지만 명시) */ .container { padding: 16px 16px 72px; } /* 폰: 사이드바가 fixed 드로어로 빠져 좌측 gutter가 없어진다 → 데스크탑용 비대칭 gutter(margin:0 g g 0, 좌0/우g)가 카드를 좌측으로 g만큼 치우치게 한다. 폰에서만 좌측에도 동일 gutter를 줘 좌우 대칭(중앙) 정렬 + 회색 카드 둥근 모서리 유지. (데스크탑은 @media 밖 — 사이드바가 좌측에 붙으므로 좌 gutter 0 그대로 유지, 무영향) */ .main-card { margin: 0 var(--main-gutter) var(--main-gutter); } /* 모바일: 사이드바 → 드로어 (기본 숨김) */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; /* iOS Safari 동적 툴바로 100%가 가시영역보다 커질 수 있어 dvh로 보강 — 하단 잘림 방지 */ height: 100dvh; flex-basis: var(--sidebar-w); width: var(--sidebar-w); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-pop); } /* 드로어 메뉴: 항목이 많으면 세로 스크롤되게(하단 safe-area 여백은 아래 .shell:not(.sb-forced-open) .sb-nav 규칙에서 — specificity 우선) */ .sb-nav { min-height: 0; -webkit-overflow-scrolling: touch; } .shell.sb-drawer-open .sidebar { transform: translateX(0); } .shell.sb-drawer-open .sb-overlay { display: block; } /* 모바일에서는 접힘/rail 무효화 — 항상 풀폭 드로어 */ .shell.sb-collapsed .sidebar, .shell:not(.sb-forced-open) .sidebar { flex-basis: var(--sidebar-w); width: var(--sidebar-w); } .shell.sb-collapsed .sb-brand .logo, .shell.sb-collapsed .sb-logo-img, .shell.sb-collapsed .sb-group-label, .shell.sb-collapsed .sb-item .sb-text, .shell.sb-collapsed .sb-pin, .shell:not(.sb-forced-open) .sb-brand .logo, .shell:not(.sb-forced-open) .sb-logo-img, .shell:not(.sb-forced-open) .sb-group-label, .shell:not(.sb-forced-open) .sb-item .sb-text, .shell:not(.sb-forced-open) .sb-pin { display: revert; } .shell.sb-collapsed .sb-brand, .shell:not(.sb-forced-open) .sb-brand { justify-content: flex-start; padding: 20px 18px 12px; } .shell.sb-collapsed .sb-item, .shell:not(.sb-forced-open) .sb-item { justify-content: flex-start; padding: 11px 12px; gap: 12px; } .shell.sb-collapsed .sb-nav, .shell:not(.sb-forced-open) .sb-nav { /* iOS 홈 인디케이터(safe-area)만큼 하단 여백 → 마지막 항목 가림/잘림 방지. 항목이 많으면 .sb-nav가 overflow-y로 스크롤(.sb-item flex:0 0 auto와 함께) */ padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px)); } /* 햄버거 노출, 사이드바 토글 숨김 */ .hamburger { display: inline-flex; } .sb-toggle { display: none; } /* ── 사이드바 메뉴 항목 터치 타깃 ≥44px(폰 드로어) ── */ .sb-item { min-height: 44px; } } /* ════════════════════════════════════════════════════ 폰 전용 — 드롭다운/팝오버/모달을 화면 안에(하단 시트·풀폭) + 터치 타깃 (멀티셀렉트 제품 선택, 알림 팝오버, 비번/알림 모달) ════════════════════════════════════════════════════ */ @media (max-width: 639px) { /* ── 제품 멀티셀렉트(차트·표 공통) → 하단 시트 ── absolute 드롭다운은 표가 페이지 하단에 있어 열면 화면 밖으로 넘침(offBottom). 폰에선 fixed 하단 시트로 띄워 항상 화면 안, 내부 스크롤, 풀폭. */ .chart-target-pop, .table-target-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; min-width: 0; max-width: none; max-height: 62vh; margin: 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px rgba(16,24,40,.20); z-index: 130; /* 모달 오버레이(120) 위 — 팝오버가 가려지지 않게 */ animation: sheetUp .2s ease; } /* 하단 시트 그랩 핸들(상단 바) */ .chart-target-pop::before, .table-target-pop::before { content: ""; display: block; flex: 0 0 auto; width: 40px; height: 4px; margin: 2px auto 8px; background: var(--line-strong); border-radius: 999px; } /* 옵션 행 터치 타깃 ≥44px + 글자 가독 */ .ctp-opt { min-height: 44px; padding: 11px 12px; font-size: 14px; } .ctp-opt input[type="checkbox"] { width: 20px; height: 20px; } /* 트리거 버튼 터치 타깃 */ .chart-target-btn, .table-target-btn { min-height: 44px; max-width: 100%; } /* ── 알림 팝오버 → 풀폭(좌우 16px 여백) ── right:0 앵커라 폭이 커 좌측으로 화면 밖(offLeft). 폰에선 화면 가로 고정. */ .notif-pop { position: fixed; left: 16px; right: 16px; top: calc(var(--topbar-h) + var(--panel-margin)); width: auto; max-width: none; z-index: 130; } .notif-pop-list { max-height: 60vh; } .notif-card { padding: 12px 12px; } .notif-card-title { font-size: 14px; } .notif-card-body { font-size: 13px; } /* ── 새 알림 푸시 토스트 → 하단 중앙(좌우 16px 여백, 풀폭에 가깝게) ── */ #notifToasts { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; } .ntoast-title { font-size: 14px; } .ntoast-body { font-size: 13px; } .ntoast-x { width: 32px; height: 32px; } /* 터치 타깃 키움 */ /* ── 프로필 메뉴 모바일(풀폭 드롭다운) — profile.css 모바일 블록으로 분리 ── */ /* ── 모달(비번 변경·알림 관리·사용자 관리) → 풀폭·하단 정렬 시트풍, 닫기 크게 ── */ .modal-overlay { padding: 0; align-items: flex-end; } .modal-card, .modal-card.notif-admin, .modal-card.user-admin { width: 100%; max-width: none; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; overflow-y: auto; animation: sheetUp .2s ease; } .modal-x { width: 44px; height: 44px; } .modal-card .field input, .notif-admin .field textarea { font-size: 16px; } /* iOS 자동 줌 방지(≥16px) + 가독 */ .modal-actions .btn { min-height: 44px; } .notif-admin-del { width: 44px; height: 44px; } /* 알림 대상 선택 — 폰에서 터치 키우기 */ .notif-target-opt { min-height: 44px; padding: 9px 14px; } .notif-target-row { min-height: 44px; } .notif-target-list { max-height: 38vh; } /* ── 사용자 관리/로그인 이력 표 → 폰에서 카드(스택) 레이아웃 ── */ .ua-table-wrap { max-height: none; border: none; border-radius: 0; overflow: visible; } .ua-table, .ua-table thead, .ua-table tbody, .ua-table tr, .ua-table td { display: block; width: 100%; } .ua-table thead { display: none; } /* 헤더 행 숨김 — 각 셀에 라벨을 붙인다 */ .ua-table tbody tr { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px 4px; margin-bottom: 10px; background: var(--surface); } .ua-table tbody tr:nth-child(even) td { background: transparent; } .ua-table tbody td { border: none; padding: 7px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; } .ua-table tbody td::before { content: attr(data-label); font-weight: 700; color: var(--text-2); font-size: 11.5px; text-align: left; flex: 0 0 auto; } .ua-table tbody td:last-child { display: block; text-align: left; } .ua-table tbody td:last-child::before { display: block; margin-bottom: 6px; } .ua-actions { gap: 8px; } .ua-act { min-height: 40px; padding: 8px 12px; font-size: 12.5px; } .ua-table.hist td::before { content: attr(data-label); } /* 비번 변경 input iOS 줌 방지 */ #adminPwNew { font-size: 16px; } /* 기간 컨트롤: 폰에서 날짜 input 화면 밖 가로 넘침 강력 차단. 근본원인 — iOS Safari의 input[type=date]는 네이티브 위젯(섀도DOM: ::-webkit-date-and-time-value 텍스트 + ::-webkit-calendar-picker-indicator)이 고유 최소폭을 가져, host에 width:100%만 걸어도 내부 콘텐츠가 폭을 밀어내 컨테이너 밖으로 삐짐. 헤드리스 브라우저는 이 위젯을 컴팩트하게 렌더해 검증에서 안 잡히므로, iOS 큰 위젯폭을 가정해 (1)appearance:none으로 네이티브 위젯 폭 제거 (2)내부 의사요소 폭/마진 억제 (3)width/min-width:0/max-width/box-sizing로 폭 강제 (4)두 input 세로 풀폭 스택 (5)최후 가드 overflow-x:hidden(기간 영역 한정 — .table-scroll 가로스크롤엔 무관)으로 가둔다. */ .period { padding-left: 16px; padding-right: 16px; /* 카드 내부 패딩 폰 맞춤(좌우 20→16) */ min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: hidden; /* 최후 가드: 내용이 절대 가로로 안 삐짐 */ } .period-row { gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } .period-field { flex: 1 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .period-row > .sep { display: none; } /* 구(舊) 레이아웃의 직속 ~ 구분자만 숨김(캘린더 트리거 내부 sep는 유지) */ .period input[type="date"] { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; /* 네이티브 위젯 고유폭 제거(폭 밀어냄 차단) */ } /* iOS 섀도DOM 내부: 값 텍스트 좌측정렬·인디케이터 마진 축소로 내부 폭 유발 차단 */ .period input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; } .period input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 4px; margin-right: 0; } .period-presets { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .preset-btn { flex: 0 1 auto; } /* 캘린더 트리거: 폰에선 풀폭·터치폭 ≥44px */ .period-cal { flex: 1 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .cal-trigger { width: 100%; min-height: 44px; justify-content: space-between; min-width: 0; max-width: 100%; box-sizing: border-box; } .cal-trigger .cal-range-text { overflow: hidden; text-overflow: ellipsis; } /* 팝오버 → 하단 시트(풀폭, 화면 하단 고정) + 백드롭 */ .cal-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(16,24,40,.36); } .cal-backdrop[hidden] { display: none; } .cal-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 71; width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(16,24,40,.18); animation: sheetUp .18s ease; } /* 시트 안 달력은 가로 꽉 차게(table-layout:fixed로 7열 균등 — 데스크탑 규칙 공유) */ .cal-pop calendar-range, .cal-pop calendar-date { display: block; width: 100%; } .cal-pop calendar-month { width: 100%; } /* 시트에선 날짜 셀 높이를 키워 터치 영역 확보(폭은 7등분, 높이만 데스크탑보다 여유) */ .cal-pop calendar-month::part(button) { height: 42px; min-height: 42px; min-width: 0; font-size: 14px; } .cal-pop calendar-month::part(th) { font-size: 12px; padding: 4px 0 8px; } /* 시트 하단 적용/취소 버튼 노출(데스크탑은 즉시조회라 숨김) */ .cal-pop-actions { display: flex; gap: 10px; margin-top: 12px; } .cal-pop-actions button { flex: 1 1 0; min-height: 44px; border-radius: var(--radius-pill); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .cal-pop-cancel { background: var(--surface); color: var(--charcoal); border: 1px solid var(--line-strong); } .cal-pop-apply { background: var(--brand); color: #fff; border: 1px solid var(--brand); } .cal-pop-apply:disabled { opacity: .55; cursor: not-allowed; } } @keyframes sheetUp { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .chart-target-pop, .table-target-pop, .modal-card, .modal-card.notif-admin { animation: none; } } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ── 프로덕트 투어(Driver.js) — 세이지 톤 오버라이드 (popoverClass: "bb-tour") ── driver.css를 에서 먼저 로드했으므로 아래 .bb-tour 한정 규칙이 항상 이긴다. */ .bb-tour.driver-popover { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-family: var(--font-sans); padding: 16px 18px; max-width: min(360px, calc(100vw - 32px)); } .bb-tour .driver-popover-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em; margin: 0 0 6px; } .bb-tour .driver-popover-description { font-size: 13px; line-height: 1.55; color: var(--text-2); } .bb-tour .driver-popover-progress-text { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .bb-tour .driver-popover-navigation-btns { gap: 8px; margin-top: 12px; } /* 주 버튼(다음/완료) — 세이지 알약 */ .bb-tour .driver-popover-next-btn { background: var(--brand); background-image: none; color: #fff; border: 1px solid var(--brand); border-radius: var(--radius-pill); padding: 8px 16px; font-weight: 600; font-size: 13px; text-shadow: none; cursor: pointer; transition: background .12s ease; } .bb-tour .driver-popover-next-btn:hover { background: var(--brand-2); border-color: var(--brand-2); } /* 보조 버튼(이전) — 고스트 */ .bb-tour .driver-popover-prev-btn { background: var(--surface); background-image: none; color: var(--charcoal); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 14px; font-weight: 600; font-size: 13px; text-shadow: none; cursor: pointer; transition: background .12s ease; } .bb-tour .driver-popover-prev-btn:hover { background: var(--surface-2); } /* 닫기(X) — 차분한 회색 */ .bb-tour .driver-popover-close-btn { color: var(--muted); border-radius: 8px; transition: color .12s ease; } .bb-tour .driver-popover-close-btn:hover { color: var(--text); } /* 화살표 색을 팝오버 배경에 맞춤 */ .bb-tour .driver-popover-arrow { color: var(--surface); } @media (prefers-reduced-motion: reduce) { .bb-tour.driver-popover { animation: none; } } /* 비용 관리 뷰 스타일(뷰 전환 .view-cost 포함) — static/css/cost.css로 분리(데스크탑+모바일 전부). JS는 static/js/cost.js */ /* ── 사이드바 하단 고정: 분석 챗봇 진입 박스(Upgrade Plan 스타일) ──────────── */ .sb-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); } .sb-chat-launch { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line-strong, var(--line)); border-radius: 12px; background: var(--surface, #fff); cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; } .sb-chat-launch:hover { border-color: var(--brand); background: var(--brand-weak, var(--surface-2)); transform: translateY(-1px); box-shadow: var(--shadow-card); } .sb-chat-launch.is-active { border-color: var(--brand); background: var(--brand-weak, var(--surface-2)); } .sb-launch-ico { flex: 0 0 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: transparent; color: #fff; } .sb-launch-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sb-launch-ico svg.sb-bari-mascot { width: 44px; height: 44px; stroke: none; } .sb-launch-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .sb-launch-text strong { font-size: 14px; font-weight: 600; color: var(--text); } .sb-launch-sub { font-size: 11px; color: var(--muted); } .shell.sb-collapsed .sb-foot { padding: 10px 8px; } .shell.sb-collapsed .sb-launch-text { display: none; } .shell.sb-collapsed .sb-chat-launch { justify-content: center; padding: 11px 0; gap: 0; } /* --- end sb-chat-launch --- */