/* ============================================================ CS 데스크 디자인 토큰 모든 색·모서리·그림자·글자 크기는 여기서만 정의합니다. 아래 규칙들은 반드시 토큰을 참조하고, 하드코딩한 색을 쓰지 않습니다. ============================================================ */ /* --- 웹폰트: 제목·본문·버튼·알약 태그 모두 Pretendard 하나로 통일 --- Pretendard는 애플 SF Pro / Apple SD Gothic Neo에 맞춰 만든 고딕이라, 웹폰트를 못 받아도 아래 대체 순서대로 각 OS의 기본 고딕으로 자연스럽게 내려갑니다. */ @font-face{font-family:"Pretendard CS";src:url("/fonts/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Pretendard CS";src:url("/fonts/Pretendard-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Pretendard CS";src:url("/fonts/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* 현재 미사용 글꼴입니다. 둥근 글꼴이 업무 화면에 맞지 않아 2026-09 전면 Pretendard로 바꿨습니다. 선언과 폰트 파일은 나중에 다시 쓸 수 있도록 남겨두며, 어떤 규칙에서도 참조하지 않습니다. */ @font-face{font-family:"Cafe24 Dongdong Light";src:url("/fonts/Cafe24DongdongLight.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap} :root{ /* 글꼴 */ --font-body:"Pretendard CS","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",system-ui,sans-serif; /* 제목도 같은 Pretendard를 쓰고, 굵기와 자간으로만 구분합니다. */ --font-display:var(--font-body); /* 바탕 — 회색도 순백도 아닌 따뜻한 크림 */ --bg-page:#fbf7ef; /* 페이지 바탕 */ --bg-card:#ffffff; /* 카드 바탕 */ --bg-sunken:#f4efe4; /* 한 단계 들어간 면(원문 박스, 안내문) */ --bg-hover:#f7f3e9; /* 옅은 호버 */ --bg-input:#ffffff; /* 입력창 */ /* 사이드바 — 따뜻한 먹색 */ --side-bg:#2b2a26; --side-text:#e4e0d4; --side-dim:#a9a79b; --side-line:#46443c; --side-hover:#3a382f; --side-field:#3a382f; --side-field-line:#55534a; /* 글자색 */ --ink:#2a2a24; /* 본문·제목 */ --ink-soft:#4a4a40; /* 보조 본문 */ --ink-muted:#6e6e62; /* 캡션·설명 (크림 위 4.83:1) */ --ink-invert:#fffdf6; /* 선 */ --line:#e8e2d5; /* 기본 hairline */ --line-soft:#f0ebe0; /* 더 옅은 구분선 */ --line-strong:#ddd5c4; /* 표 테두리 */ /* 파스텔 블록 — 카드 채움과 원형 스티커에 사용 */ --pastel-mint:#cfede0; --pastel-lavender:#e6def7; --pastel-lime:#e9eeb4; --pastel-butter:#fbe6ae; --pastel-pink:#f8d9e3; --pastel-sky:#d8e7f8; --pastel-peach:#fbdcc7; --pastel-ink:#2a2a24; /* 파스텔 위 글자 (최소 9:1) */ /* 강조 */ --accent:#f4cf6a; /* 노란 강조 (활성 내비, 하이라이트) */ --accent-ink:#2a2a24; --accent-soft:#fbe08a; /* 상태 알약 — 파스텔 채움 + 진한 글자, 모두 6:1 이상 */ --st-pending-bg:#fbe8c0; --st-pending-fg:#6b4a0e; /* 미처리 6.67:1 */ --st-progress-bg:#d8e7f8; --st-progress-fg:#1f4b77; /* 진행중 7.17:1 */ --st-repair-bg:#cfe9d6; --st-repair-fg:#1e5b36; /* 수선 중 6.25:1 · 초록 */ --st-issue-bg:#fbd9df; --st-issue-fg:#8e2740; /* 이슈 있음 6.40:1 */ /* 수선 중이 초록을 가져갔으므로 완료는 무채색으로 내립니다. 끝난 건은 눈에 덜 띄는 편이 맞고, 초록이 두 개면 표에서 헷갈립니다. */ --st-done-bg:#e9e4d7; --st-done-fg:#5e5e52; /* 완료 6.01:1 · 무채색 */ /* 완료가 무채색이 되면서, 잘된 상태를 뜻하던 다른 자리들이 쓸 초록을 따로 둡니다. */ --ok-bg:#cfe9d6; --ok-fg:#1e5b36; /* 6.25:1 */ /* 통계 상자 중 '끝날 때까지 챙길 일' 네 칸. 상태 세 칸(파랑 208°·초록 140°·분홍 345°)과 색상환에서 겹치지 않도록 주황·보라·청록·노랑으로 벌려 둡니다. 글자는 모두 --pastel-ink. */ --stat-due-bg:#fbdcc0; /* 주황 27° */ --stat-pickupwait-bg:#e0d9f5;/* 보라 251° */ --stat-stock-bg:#c6e6e2; /* 청록 172° */ --stat-fee-bg:#eee7b5; /* 노랑 52° */ /* 목록에서 아직 받지 못한 배송비 금액. 흰 행(#faf7ef) 대비 5.79:1 */ --fee-due:#b3261e; --st-neutral-bg:#e9e4d7; --st-neutral-fg:#5e5e52; /* 중립 태그 5.46:1 */ /* 모서리 — 전반적으로 더 둥글게 */ --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-2xl:28px; --r-pill:999px; /* 그림자 — 아주 부드럽게 */ --shadow-soft:0 1px 2px rgba(64,56,36,.04),0 2px 8px rgba(64,56,36,.05); --shadow-card:0 2px 4px rgba(64,56,36,.04),0 8px 24px rgba(64,56,36,.07); --shadow-lift:0 4px 10px rgba(64,56,36,.07),0 16px 40px rgba(64,56,36,.11); --shadow-dialog:0 24px 70px rgba(48,42,26,.22); /* 글자 크기 */ --fs-display:36px; --fs-h1:34px; --fs-h2:22px; --fs-h3:16px; --fs-body:16px; --fs-sm:14px; --fs-xs:13px; --fs-2xs:12px; --fs-3xs:11px; --fs-table:11px; /* 파생 값 — 위 토큰에서 나온 변형 */ --pastel-border:#d5dc94; /* 파스텔 블록 테두리(라임) */ --pastel-border-sky:#bad3ef; --pastel-border-pink:#eec3d2; --tint-done:#f2f9f4; /* 완료 행 아주 옅은 초록 */ --tint-done-hover:#e3f2e8; --row-selected:#fdf4d6; /* 선택된 문의 행 */ --dot-auto:#e0453c; /* 자동 수집 표시 점 · 흰 행 4.13:1 / 줄무늬 행 3.42:1 / 완료 행 3.86:1 */ --dot-manual:#2a2a24; /* 직접 입력 항목 표시 점(검정, 장식용) */ --check:#6f8f78; /* 체크박스 accent */ --ink-placeholder:#9b9a8d; /* 통합CS일지 표: 항목 이름과 적힌 내용을 색으로 구분한다. 이름은 한 발 물러난 청회색, 내용은 진한 먹색. 대비: 흰 카드에서 이름 5.54:1 / 내용 15.22:1, 완료행(#f7f3e9)에서도 5.00:1 / 13.74:1. */ --journal-label:#626973; --journal-value:#26261f; /* 통합CS일지 표 소제목(th): 헤더 줄이 헤더로 읽히도록 더 진하고 굵게. 크림 헤더 바탕(#f4efe4) 위 14.57:1 (이전 --ink-soft #4a4a40 은 7.81:1). */ --journal-th-ink:#171610; /* 행 구분: 2px 굵은 가로줄 + 홀짝 줄무늬. 행 높이는 늘리지 않는다(아래 패딩에서 1px 상쇄). 줄무늬는 따뜻한 모래색이라, 완료 행의 연둣빛 --tint-done 과 색상·밝기 모두 구분된다. */ --journal-row-line:#d8cfba; /* 흰 행 위 1.55:1 / 줄무늬 행 위 1.28:1 · 굵기는 2px 유지 */ /* 표 바탕은 소제목 줄(--bg-sunken #f4efe4)보다 진해지지 않게 둡니다. 짝수 행을 소제목과 같은 색으로, 홀수 행을 그보다 한 단계 연하게 해서 줄무늬만 남깁니다. */ --journal-row-odd:#faf7ef; /* 소제목 줄보다 연함 · 대비 1.05:1 */ --journal-row-alt:#f4efe4; /* 소제목 줄과 같은 색 */ --journal-row-hover:#eee7d6; /* 짚은 행 · 짝수 행 대비 1.06:1 */ /* 고객이 적어 준 값(닉네임·수취인명)만 파랑. 흰 행 7.90:1 / 줄무늬 행 6.54:1 / 완료 행 7.39:1 */ --journal-customer:#14509c; --ink-hover:#43423a; /* primary 버튼 호버 */ --sticker-white:#ffffff8c; /* 파스텔 위 반투명 흰 칩 */ --sticker-white-strong:#ffffffb8; /* 포커스 */ --focus:#a9852f; } html body{font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;line-height:1.6;letter-spacing:-.018em;word-break:keep-all;overflow-wrap:break-word;font-variant-numeric:tabular-nums} /* 숫자가 줄 맞춰 보이도록: 표·통계·금액 */ .journal-table,.stats strong,.stats .word,.metric strong,.brand-card-count strong,.count-link,.journal-stat strong,.row-top time,.history-row time{font-variant-numeric:tabular-nums} /* 제목·앱 이름·알약 태그 — 같은 Pretendard로, 자간을 조이고 굵기를 올려 제목답게 */ body .brand>span:not(.brand-icon),body .brand-icon,body h1,body .page-heading h1,body h2,body .section-heading h2,body .attention-panel h2,body .detail-empty h2,body .empty-list h3,body .dialog-heading h2,body .stats .word{font-family:var(--font-display);letter-spacing:-.035em;font-weight:750} /* 숫자는 고정폭 숫자로 */ body .metric strong,body .stats strong,body .journal-stat strong,body .brand-card-count strong{font-family:var(--font-body);font-weight:700} body button,body input,body select,body textarea{font-family:inherit} body .brand{font-size:25px;font-weight:800;letter-spacing:-.045em} body .brand small{font-size:12px;font-weight:450;letter-spacing:0;line-height:1.5} body .nav{font-size:16px;font-weight:700;letter-spacing:-.035em;line-height:1.5} body .nav.active{font-weight:750} body .workspace-label,body .brand-select-label{font-size:13px;font-weight:650;letter-spacing:.02em} body #brand-select{font-size:16px;font-weight:650} body .sidebar .nav-icon{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} body .side-channel{font-size:13px;font-weight:550;flex-wrap:wrap} body .side-channel small{font-size:12px;font-weight:450;white-space:nowrap} body .sidebar-footer,body .sidebar-footer small{font-size:13px;line-height:1.6} body h1,body .page-heading h1{font-weight:800;letter-spacing:-.045em;line-height:1.35} body h2,body .section-heading h2,body .attention-panel h2{font-weight:750;letter-spacing:-.035em;line-height:1.45} body .page-heading p{font-size:15px;font-weight:450} body .eyebrow{font-size:12px;font-weight:650;letter-spacing:.08em} body .button{font-size:15px;font-weight:650} body .metric h3{font-size:16px;font-weight:650} body .metric strong{font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums} body .metric p{font-size:13px;font-weight:450;line-height:1.7} body .brand-card h3{font-size:17px;font-weight:750} body .brand-card p,body .brand-card-count small{font-size:13px;line-height:1.6} body .brand-card-count strong{font-weight:750} body .section-heading>span,body .section-heading select,body .table-note{font-size:13px} body .channel-matrix th{font-size:14px;font-weight:600} body .channel-matrix td:first-child strong{font-size:15px;font-weight:650} body .channel-matrix td small,body .connection-label{font-size:13px} body .attention-brand,body .attention-item p,body .connection-attention p,body .dashboard-note p{font-size:14px;line-height:1.75} body .attention-item strong,body .connection-attention strong,body .dashboard-note strong{font-size:15px;font-weight:650} body .inquiry-row h3{font-size:16px;font-weight:650} body .inquiry-row p,body .original,body textarea{font-size:16px;line-height:1.85} body .platform,body .row-top time,body .row-bottom,body .type-badge,body .status{font-size:13px} body .list-tabs button,body .template-layout nav button{font-size:15px;font-weight:600} body .filters select,body .search input,body .url-row input{font-size:15px} body .detail-caption,body .customer,body .draft-heading small,body .draft-actions .text-button,body .source-link{font-size:14px} body .muted,body .form-footer span,body .data-card small,body .channel-card label:not(.check-label),body .channel-card .connection-badge,body .history-row p,body .history-row time,body .placeholder-hint{font-size:14px;line-height:1.75} body .stats span,body .check-label,body label{font-size:15px} body .stats small{font-size:13px} body .stats span,body .stats small,body .customer,body .row-top time,body .row-bottom,body .inquiry-row p,body .muted,body .history-row p,body .history-row time,body .form-footer span,body .draft-heading small,body .channel-card label:not(.check-label),body .data-card p,body .data-card small{color:var(--ink-muted)} @media(max-width:650px){body .sidebar .nav{font-size:14px;padding:10px 6px}body .metric h3{font-size:15px}body .metric p{font-size:13px}body .brand-card h3{font-size:16px}body .brand-card p{font-size:12px}body .section-heading{flex-wrap:wrap}} .journal-callout{display:flex;align-items:center;gap:14px;justify-content:space-between;background:var(--pastel-lavender);padding:18px;border-radius:var(--r-lg);margin-top:20px}.journal-callout p{font-size:13px;line-height:1.6;margin:6px 0 0}.journal-callout strong{font-size:15px}.journal-filters{display:flex;align-items:end;flex-wrap:wrap;gap:10px}.journal-filters>input{flex:1;min-width:200px}.journal-filters label{font-size:12px}.journal-filters label input{font-size:14px;margin-top:5px}.journal-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card);box-shadow:var(--shadow-soft)}.journal-table{border-collapse:collapse;width:100%;min-width:1550px;font-size:14px}.journal-table th{padding:14px;text-align:left;background:var(--bg-sunken);color:var(--ink-soft);white-space:nowrap;font-weight:650}.journal-table td{padding:15px 13px;border-top:1px solid var(--line-soft);vertical-align:top;min-width:125px;max-width:260px}.journal-table td small{display:block;margin-top:6px;color:var(--ink-muted);font-size:12px}.journal-table td strong{display:block}.journal-table td:nth-child(9){min-width:230px}.journal-summary{white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.journal-badge{display:inline-block;margin-top:7px;border-radius:var(--r-pill);padding:3px 10px;background:var(--st-pending-bg);color:var(--st-pending-fg);font-size:12px;font-weight:600}.journal-badge.closed{background:var(--st-done-bg);color:var(--st-done-fg)}.journal-badge.issue{background:var(--st-issue-bg);color:var(--st-issue-fg)}.journal-empty{text-align:center;padding:55px!important;line-height:2}.journal-table .text-button{display:block}.journal-table .button{font-size:13px;padding:8px 11px}#journal-dialog{width:900px;background:var(--bg-card);border-radius:var(--r-2xl)}#journal-dialog fieldset{border:1px solid var(--line);border-radius:var(--r-lg);margin:20px 0;padding:18px}#journal-dialog legend{font-size:16px;font-weight:750;padding:0 8px}.journal-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.journal-form-grid label{margin:0;font-size:14px}.journal-form-grid input,.journal-form-grid select{font-size:15px}.journal-form-grid .journal-wide{grid-column:1/-1}.journal-form-grid .journal-check{align-self:center;min-height:60px}#journal-source summary{cursor:pointer;font-weight:600}#journal-source-text{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:14px;line-height:1.8;padding:15px;background:var(--bg-sunken);border-radius:var(--r-md)}#journal-origin{margin-top:18px;font-size:14px}#journal-dialog .form-footer{position:sticky;bottom:-30px;background:var(--bg-card);padding:16px 0;margin-bottom:0;border-top:1px solid var(--line)}#journal-stats .stats{margin-top:20px}@media(max-width:650px){.journal-form-grid{grid-template-columns:1fr 1fr}.journal-callout{flex-wrap:wrap}.journal-filters>input{min-width:100%}#journal-dialog fieldset{padding:12px}.journal-form-grid{gap:12px}} /* --- 셸: 크림 바탕 + 둥근 먹색 사이드바 --- */ /* styles.css가 쓰는 예전 변수 이름을 새 토큰으로 이어 붙입니다 */ :root{--navy:var(--ink);--mint:var(--pastel-pink);--muted:var(--ink-muted);background:var(--bg-page);color:var(--ink)} html body{background:var(--bg-page);color:var(--ink)} .sidebar{width:212px;padding:24px 13px;background:var(--side-bg);color:var(--side-text);border-radius:var(--r-xl);inset:16px auto 16px 16px;overflow-y:auto;box-shadow:var(--shadow-card)} body .brand{color:var(--ink-invert);padding:0 8px 26px;font-size:25px;gap:11px} .brand-icon{background:var(--pastel-pink);color:var(--ink);border-radius:50%;width:38px;height:38px;flex:none;font-size:22px} body .brand>span:not(.brand-icon){white-space:nowrap;font-size:22px}body .brand small{white-space:normal} body .brand small{color:var(--side-dim);font-size:10px;letter-spacing:.08em;font-family:var(--font-body)} body .workspace-label,body .brand-select-label{color:var(--side-dim);font-size:var(--fs-2xs);font-weight:500} #brand-select{width:100%;height:34px;background:var(--side-field);color:var(--side-text);border:1px solid var(--side-field-line);border-radius:var(--r-sm);padding:3px 11px;margin-bottom:12px} body .nav{color:var(--side-text);font-size:15px;font-weight:550;border-radius:var(--r-md);padding:12px 13px;gap:10px;transition:background .16s,color .16s} .nav:hover{background:var(--side-hover);color:var(--ink-invert)} .nav.active,.nav.active:hover{background:var(--accent-soft);color:var(--accent-ink);font-weight:700} .nav b{background:var(--side-bg);color:var(--side-text);border-radius:var(--r-pill);padding:3px 9px} .nav.active b{background:var(--ink);color:var(--ink-invert)} .sidebar-footer{border-color:var(--side-line);color:var(--side-text)}.sidebar-footer small{color:var(--side-dim)} .local-dot{background:var(--pastel-mint)} body .side-channel{color:var(--side-text);font-size:var(--fs-2xs);padding:9px 8px;flex-wrap:wrap;border-radius:var(--r-sm)} body .side-channel small{color:var(--side-dim);font-size:var(--fs-3xs);white-space:nowrap} .channel-icon,.channel-icon.talk{color:var(--accent)} .channel-heading{margin-top:20px} .brand-dot{display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:var(--accent)} .brand-dot.luciroda{background:var(--pastel-pink)}.brand-dot.garmenthive{background:var(--pastel-lime)} main{margin-left:228px;width:calc(100% - 228px)} .topbar{height:62px;padding:0 32px;background:transparent;border-bottom:1px solid var(--line);color:var(--ink-muted)} .page{padding:28px 32px 44px;max-width:1750px} .connection-banner{margin:18px 32px 0;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card);box-shadow:var(--shadow-soft)} .connection-banner>span,.connection-banner p,.connection-banner button{color:var(--ink-soft)} .connection-banner>span{background:var(--pastel-butter);border-radius:var(--r-pill);padding:4px 12px;color:var(--st-pending-fg);font-family:var(--font-display)} .page-heading{margin-bottom:26px;gap:20px} /* Pretendard로 바뀐 뒤 400은 너무 가늘어 보여서, 굵기를 올리고 자간을 더 조였습니다. */ body .page-heading h1{font-size:var(--fs-h1);font-weight:750;line-height:1.3;letter-spacing:-.04em} body .page-heading p{color:var(--ink-muted);margin-top:10px} body .eyebrow{color:var(--ink-muted);font-size:var(--fs-3xs);font-weight:600;letter-spacing:.1em} /* 버튼 — 완전한 알약 모양 */ .button{border-radius:var(--r-pill);padding:12px 20px;transition:background .16s,border-color .16s,box-shadow .16s,transform .1s} .button:active{transform:translateY(1px)} .primary{background:var(--ink);color:var(--ink-invert);box-shadow:var(--shadow-soft)}.primary:hover{background:var(--ink-hover)} .secondary{background:var(--bg-card);border-color:var(--line);color:var(--ink-soft);box-shadow:var(--shadow-soft)}.secondary:hover{background:var(--bg-hover)} .disabled{background:var(--bg-sunken);border-color:var(--line);color:var(--ink-muted)} .icon-button{background:var(--bg-sunken);color:var(--ink-soft);border-radius:50%;width:38px;height:38px} .icon-button:hover{background:var(--line)} .text-button{border-radius:var(--r-pill)} .overview-stats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px;margin-bottom:25px}.overview-stats>.metric:nth-child(1){grid-column:span 5}.overview-stats>.metric:nth-child(2){grid-column:span 7}.overview-stats>.metric:nth-child(3),.overview-stats>.metric:nth-child(4){grid-column:span 6;min-height:150px}.overview-stats>.metric:nth-child(n+3) .metric-top{margin-bottom:8px} .metric{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);padding:22px 24px;min-height:205px;color:var(--pastel-ink);display:flex;flex-direction:column;box-shadow:var(--shadow-soft)} .metric.blue{background:var(--pastel-butter)}.metric.purple{background:var(--pastel-pink)}.metric.cyan{background:var(--pastel-lime)}.metric.slate{background:var(--pastel-sky)} .metric::after{content:"";position:absolute;width:112px;height:112px;right:-15px;top:25px;z-index:-1;background:currentColor;opacity:.09;clip-path:polygon(50% 0%,60% 28%,82% 9%,76% 37%,100% 42%,76% 55%,95% 78%,67% 71%,59% 100%,45% 76%,20% 94%,27% 65%,0% 55%,27% 43%,9% 20%,39% 27%)} .metric.purple::after{border-radius:50%;clip-path:none;width:120px;height:120px;right:-35px;top:10px} .metric.cyan::after{clip-path:polygon(0 0,100% 0,50% 100%);transform:rotate(-17deg);width:150px;height:160px} .metric-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-size:19px} .metric-top>span:first-child{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--sticker-white)} .metric-top>span:last-child{font-size:20px} body .metric h3{font-size:15px;font-weight:650;margin:0 0 5px} body .metric strong{font-size:43px;font-weight:400;line-height:1.15} .metric strong small{font-size:14px;font-weight:500;margin-left:5px;font-family:var(--font-body)} body .metric p{font-size:var(--fs-xs);line-height:1.6;margin:11px 0 0;color:var(--ink-soft)} .dashboard-columns{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:start} .dashboard-panel{background:transparent;border:0;border-radius:var(--r-xl);padding:0;margin-bottom:28px;overflow:visible} .attention-panel{padding:22px;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-soft)} .section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px} body .section-heading h2,body .attention-panel h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.035em;margin:0} .section-heading>span{color:var(--ink-muted)} .section-heading select{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;color:var(--ink-soft)} #brand-cards{display:flex;flex-direction:column;gap:10px} .brand-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card);color:var(--ink);box-shadow:var(--shadow-soft);transition:box-shadow .16s,transform .12s} .brand-card:hover{background:var(--bg-card);box-shadow:var(--shadow-card);transform:translateY(-1px)} .brand-monogram{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--pastel-butter);font-size:20px;font-weight:700} .luciroda .brand-monogram{background:var(--pastel-pink)}.garmenthive .brand-monogram{background:var(--pastel-lime)} body .brand-card h3{font-size:16px;margin:0 0 4px} body .brand-card p{font-size:var(--fs-2xs);color:var(--ink-muted);margin:0} .brand-card-count{margin-left:auto;display:flex;flex-direction:column;text-align:right;min-width:53px} .brand-card-count strong{font-size:25px;line-height:1.2} body .brand-card-count small{font-size:var(--fs-2xs);color:var(--ink-muted);margin-top:4px} .brand-card-arrow{color:var(--ink-muted);font-size:21px} .table-note{color:var(--ink-muted);margin:-4px 0 15px;font-size:var(--fs-xs)} .table-scroll{overflow:auto;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-soft)} .channel-matrix{border-collapse:collapse;width:100%;min-width:530px;text-align:left} body .channel-matrix th{background:var(--bg-sunken);color:var(--ink-soft);font-size:var(--fs-xs);font-weight:600;padding:13px 10px;white-space:nowrap} .channel-matrix th:first-child{border-top-left-radius:var(--r-xl)} .channel-matrix th:last-child{border-top-right-radius:var(--r-xl)} .channel-matrix td{padding:16px 10px;border-bottom:1px solid var(--line-soft)} .channel-matrix tr:last-child td{border:0} body .channel-matrix td:first-child strong{font-size:var(--fs-sm)} .channel-matrix td small{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--ink-muted);font-size:var(--fs-2xs)} .channel-matrix th:not(:first-child),.channel-matrix td:not(:first-child){text-align:center} .channel-matrix td:last-child small{justify-content:center;white-space:nowrap} .count-link{border:0;background:none;font-size:18px;font-weight:700;color:var(--ink);min-width:36px;padding:6px;border-radius:var(--r-pill)} .count-link:hover{background:var(--accent-soft)} .unknown{color:var(--ink-muted)} .connection-label{display:inline-block;font-size:var(--fs-2xs);border-radius:var(--r-pill);padding:5px 11px;background:var(--st-neutral-bg);color:var(--st-neutral-fg);white-space:nowrap} .connection-label.checked{background:var(--ok-bg);color:var(--ok-fg)} .attention-panel .eyebrow{margin-bottom:7px}.attention-panel h2{margin-bottom:18px} .attention-item{display:block;border:0;background:var(--pastel-pink);border-radius:var(--r-lg);padding:18px;text-align:left;width:100%;margin-bottom:12px;color:var(--pastel-ink);transition:box-shadow .16s,transform .12s} .attention-item:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)} .attention-item:nth-child(3n+2){background:var(--pastel-lavender)} .attention-item:nth-child(3n+3){background:var(--pastel-mint)} .attention-brand{display:block;font-size:var(--fs-2xs);color:var(--ink-soft);margin-bottom:10px} body .attention-item strong{display:block;font-size:15px;line-height:1.6} body .attention-item p{font-size:var(--fs-sm);line-height:1.7;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 14px} .attention-item .type-badge{background:var(--sticker-white-strong);border-radius:var(--r-pill);margin:0;color:var(--ink-soft);padding:4px 11px} .connection-attention{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card);padding:16px 15px;text-align:left;color:var(--ink-soft);margin-bottom:12px} .connection-attention>span{display:grid;place-items:center;background:var(--pastel-butter);border-radius:50%;width:34px;height:34px;flex:none} body .connection-attention strong{font-size:var(--fs-sm);color:var(--ink)} body .connection-attention p{font-size:var(--fs-xs);color:var(--ink-muted);margin:5px 0 0} .dashboard-note{border-top:1px solid var(--line);padding-top:20px;margin-top:22px} body .dashboard-note strong{font-size:var(--fs-sm);color:var(--ink)} body .dashboard-note p{font-size:var(--fs-xs);line-height:1.8;color:var(--ink-muted)} /* --- 카드: 흰 바탕 + 크게 둥근 모서리 + 헤어라인 + 아주 옅은 그림자 --- */ .inquiry-list,.detail,.card,.channel-card{background:var(--bg-card);border-color:var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-soft)} .card{padding:26px 28px} .inquiry-row{background:var(--bg-card);border-top-color:var(--line-soft)} .inquiry-row:hover{background:var(--bg-hover)} .inquiry-row.selected{background:var(--row-selected);border-left-color:var(--accent)} .platform,.source-link,.text-button{color:var(--ink-soft)} .text-button:hover{color:var(--ink)} .original,.notice{background:var(--bg-sunken);border-color:var(--line);border-radius:var(--r-md)} .notice{border-radius:var(--r-lg);color:var(--ink-soft)} .notice strong{color:var(--ink)} .detail-empty{background:linear-gradient(160deg,var(--bg-card),var(--bg-hover))} .detail-symbol{background:var(--pastel-mint);color:var(--ink);border-radius:50%;width:70px;height:70px} .detail-empty h2{color:var(--ink);font-weight:700} .detail-empty p,.empty-list p{color:var(--ink-muted)} .empty-icon{background:var(--pastel-lavender);color:var(--ink);border-radius:50%;width:58px;height:58px} .empty-list h3{color:var(--ink);font-weight:700} /* 상태 배지 — 파스텔 알약, 본문 대비 6:1 이상 */ .status,.type-badge{border-radius:var(--r-pill);padding:4px 11px;font-weight:600} .status.pending{background:var(--st-pending-bg);color:var(--st-pending-fg)} .status.approved{background:var(--st-progress-bg);color:var(--st-progress-fg)} .status.completed{background:var(--ok-bg);color:var(--ok-fg)} .type-badge{background:var(--st-neutral-bg);color:var(--st-neutral-fg);font-weight:500} .stats article{border:1px solid transparent;background:var(--bg-sunken);border-radius:var(--r-xl);padding:20px 22px;box-shadow:var(--shadow-soft)} .stats article:nth-child(1){background:var(--pastel-butter)}.stats article:nth-child(2){background:var(--pastel-pink)}.stats article:nth-child(3){background:var(--pastel-mint)}.stats article:nth-child(4){background:var(--pastel-sky)} .stats article:first-child:before{display:none} .stats strong,.stats .word{font-weight:700;letter-spacing:-.03em} body .stats .word,body .stats span,body .stats small{color:var(--ink-soft)} .add-channel{border:1.5px dashed var(--line-strong);border-radius:var(--r-xl);background:var(--bg-sunken);color:var(--ink-soft);font-size:15px;min-height:110px} .add-channel:hover{background:var(--bg-hover)} .channel-card .connection-badge{color:var(--ink-muted)} .list-tabs{gap:8px;padding:8px 12px 0;border-bottom:1px solid var(--line-soft)} .list-tabs button{border-bottom:0;border-radius:var(--r-pill);padding:10px 16px;color:var(--ink-muted)} .list-tabs button:hover{background:var(--bg-hover)} .list-tabs button.active{background:var(--ink);color:var(--ink-invert);font-weight:650} .template-layout nav button{border-radius:var(--r-lg);border:1px solid transparent;color:var(--ink-muted)} .template-layout nav button:hover{background:var(--bg-hover)} .template-layout nav button.active{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);font-weight:650} .history-row{border-bottom-color:var(--line-soft)} .history-marker{background:var(--pastel-mint);width:10px;height:10px;box-shadow:0 0 0 3px rgba(207,237,224,.45)} .search{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-card);padding-left:15px;color:var(--ink-muted)} .search input{background:transparent} body .muted,body .customer,body .row-top time,body .row-bottom,body .inquiry-row p,body .history-row p,body .history-row time,body .form-footer span,body .draft-heading small,body .channel-card label:not(.check-label),body .data-card p,body .data-card small{color:var(--ink-muted)} /* --- 입력 --- */ input,select,textarea{background:var(--bg-input);border-color:var(--line-strong);color:var(--ink);accent-color:var(--check);border-radius:var(--r-sm)} input::placeholder,textarea::placeholder{color:var(--ink-placeholder)} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px} input:focus,select:focus,textarea:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(169,133,47,.12)} /* --- 대화 상자 --- */ dialog{border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--bg-card);box-shadow:var(--shadow-dialog)} dialog::backdrop{background:rgba(42,42,36,.4);backdrop-filter:blur(2px)} .toast{border-radius:var(--r-lg);background:var(--ink);box-shadow:var(--shadow-lift)} .fatal{border-radius:var(--r-lg)} body .brand-select-label,#brand-select,#brand-shortcuts{display:block} @media(min-width:1500px){.page{padding:32px 40px}.dashboard-columns{grid-template-columns:minmax(0,1fr) 340px}.metric{min-height:220px}.metric strong{font-size:48px}} @media(max-width:1150px){.sidebar{width:198px}main{margin-left:232px;width:calc(100% - 232px)}.page{padding:25px 24px}.topbar{padding:0 24px}.connection-banner{margin:16px 24px 0}.dashboard-columns{grid-template-columns:1fr}.attention-panel{display:block}#attention-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.attention-item,.connection-attention{margin:0}.metric{min-height:190px}.section-heading>span{display:none}} @media(max-width:900px){.sidebar{padding:25px 13px}.brand>span:not(.brand-icon),.sidebar .workspace-label,.sidebar-footer,#sidebar-channels{display:block}body .brand{font-size:23px}body .nav{font-size:15px;justify-content:flex-start;padding:12px;gap:9px}.nav span{font-size:20px}body .page-heading h1{font-size:30px}.page-heading{display:block}.page-heading>.button{margin-top:17px}} @media(max-width:650px){body{display:block}.sidebar{position:static;width:100%;padding:18px;border-radius:0 0 18px 18px}body .brand{padding-bottom:15px}.brand small{display:block}.sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.sidebar .workspace-label,.sidebar .brand-select-label,.sidebar-footer,#sidebar-channels,#brand-shortcuts{display:none}.sidebar #brand-select{margin-bottom:12px}body .sidebar .nav{font-size:13px;padding:10px 5px;justify-content:center;white-space:nowrap}.nav span{display:none}main{margin:0;width:100%}.topbar{display:none}.connection-banner{margin:15px 16px 0}.page{padding:23px 16px}.metric{padding:18px 16px;min-height:185px}.metric strong{font-size:36px}body .metric h3{font-size:14px}body .metric p{font-size:12px}.overview-stats{gap:12px}.dashboard-panel{padding:20px 16px}.section-heading{flex-wrap:wrap}.section-heading select{max-width:145px}#attention-list{display:block}.attention-item,.connection-attention{margin-bottom:12px}.brand-card{padding:14px 10px;gap:10px}.brand-card-arrow{display:none}body .brand-card p{font-size:12px}.brand-monogram{width:36px;height:36px}.channel-matrix{min-width:510px}} /* ============================================================ 여백이 있는 곳에만: 원형 스티커와 손그림 낙서 대시보드·빈 화면에만 넣습니다. CS 일지 표에는 절대 넣지 않습니다. 모두 장식이므로 aria에 잡히지 않는 가상 요소로만 그립니다. ============================================================ */ /* 대시보드 제목 아래 손그림 물결 */ #dashboard-page .page-heading h1::after{content:"";display:block;width:132px;height:18px;margin-top:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'%3E%3Cpath d='M2 12C14 2 26 20 38 10S62 2 74 12s24 8 44-6' fill='none' stroke='%23e6c25e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain} /* 대시보드 새로고침 버튼 쪽을 가리키는 동그란 화살표 낙서 */ #dashboard-page .page-heading{position:relative} #dashboard-page .page-heading::after{content:"";position:absolute;right:-6px;bottom:-34px;width:92px;height:62px;pointer-events:none;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 62'%3E%3Cpath d='M8 54C20 18 56 6 84 16' fill='none' stroke='%23b9b2a0' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M70 8l16 8-13 11' fill='none' stroke='%23b9b2a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain} /* 확인이 필요해요 패널 모서리의 원형 스티커 */ .attention-panel{position:relative} .attention-panel::after{content:"CHECK";position:absolute;top:-14px;right:-10px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--pastel-lime);color:var(--ink);font-family:var(--font-display);font-size:11px;letter-spacing:.06em;transform:rotate(-12deg);box-shadow:var(--shadow-soft);pointer-events:none} /* 브랜드 업무 공간 섹션 제목 옆 작은 물결 */ #dashboard-page .dashboard-panel .section-heading h2::after{content:"";display:inline-block;width:46px;height:9px;margin-left:10px;vertical-align:middle;opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 9'%3E%3Cpath d='M2 6c6-6 12 6 18 0s12-6 24 0' fill='none' stroke='%23d9b7c8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain} /* 빈 화면: 아이콘 뒤 파스텔 원 + 아래 손그림 물결 */ .detail-empty,.empty-list{position:relative} .detail-empty::before{content:"";position:absolute;left:50%;top:64px;width:132px;height:132px;transform:translateX(-50%);border-radius:50%;background:var(--pastel-butter);opacity:.5;pointer-events:none} .detail-symbol,.empty-icon{position:relative} .detail-empty p::after,.empty-list p::after{content:"";display:block;width:104px;height:14px;margin:18px auto 0;opacity:.8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 14'%3E%3Cpath d='M2 9c10-8 20 8 30 0s20-8 34 2 24-4 36-6' fill='none' stroke='%23cfc7b4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain} /* 내용이 없을 때 장식 줄이 떠 있지 않도록 */ #journal-origin:empty{display:none} /* 좁은 화면에서는 낙서를 접어둡니다 */ @media(max-width:1150px){#dashboard-page .page-heading::after,.attention-panel::after{display:none}} /* 통계 카드 장식: 뾰족한 도형 대신 부드러운 흰 원/블롭 */ .metric::after{background:var(--bg-card);opacity:.5;clip-path:none;border-radius:50%;width:140px;height:140px;right:-34px;top:16px} .metric.purple::after{width:150px;height:150px;right:-44px;top:8px} .metric.cyan::after{clip-path:none;transform:none;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;width:150px;height:150px;right:-38px;top:14px} .metric.slate::after{border-radius:54% 46% 42% 58%/46% 58% 42% 54%} /* CHECK 스티커가 화면 밖으로 잘리지 않도록 */ .attention-panel::after{top:-16px;right:8px} /* ============================================================ 로그인 화면 · 비밀번호 변경 · 사이드바 사용자 정보 색·모서리·그림자·글자 크기는 모두 위 토큰만 씁니다. ============================================================ */ .login-screen{position:fixed;inset:0;z-index:200;overflow-y:auto;display:grid;place-items:safe center;padding:24px;background:var(--bg-page)} .login-checking{margin:0;color:var(--ink-muted);font-size:var(--fs-sm)} /* 세션 확인 전에는 카드를 숨겨, 로그인한 사람에게 로그인 폼이 잠깐 번쩍이지 않게 합니다. */ .login-screen[data-checking] .login-card{display:none} .login-screen:not([data-checking]) .login-checking{display:none} .login-card{width:min(380px,100%);display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);padding:34px 32px 30px} .login-brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-.045em} body .login-title{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.03em;margin:22px 0 6px} .login-lead{margin:0;color:var(--ink-muted);font-size:var(--fs-sm)} .login-card label{margin:18px 0 7px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-soft)} .login-card input{width:100%} .login-card .form-error{margin:14px 0 0;line-height:1.7} .login-card .form-error:empty{display:none} .login-card button[type=submit]{width:100%;margin-top:20px} .login-card>small{margin-top:14px;color:var(--ink-muted);font-size:var(--fs-2xs);line-height:1.7} /* 화면이 낮으면 카드를 조금 줄여, 로그인 버튼이 화면 밖으로 밀리지 않게 합니다. */ @media(max-height:620px){.login-card{padding:24px 26px 22px}body .login-title{margin:16px 0 5px}.login-card label{margin:13px 0 6px}} #password-dialog{width:min(460px,calc(100vw - 32px))} #password-dialog .form-error:empty{display:none} .sidebar-footer{display:flex;flex-direction:column;gap:5px;padding-top:16px} .sidebar-footer small{margin-top:0} .sidebar-footer .me-line{display:flex;align-items:center;gap:7px} .sidebar-footer .me-line .local-dot{margin:0} /* 이름·이메일은 사람이 입력한 값이므로 본문 글꼴 기준으로 둡니다. */ #me-name{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:650;color:var(--side-text);word-break:break-all} #me-email{font-family:var(--font-body);font-size:var(--fs-3xs);color:var(--side-dim);word-break:break-all} #me-name:empty,#me-email:empty{display:none} #logout{margin-left:auto;flex:none;background:var(--side-field);border:1px solid var(--side-field-line);color:var(--side-dim);font-size:var(--fs-2xs);padding:5px 12px;border-radius:var(--r-pill)} #logout:hover{background:var(--side-hover);color:var(--ink-invert)} /* 구글 로그인 버튼: 기존 토큰만 사용, 새 색 없음 */ .google-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none} .google-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%; background:var(--ink-invert);color:var(--ink);font-weight:700;font-size:13px} .login-lead{color:var(--ink-soft);font-size:13px;margin:4px 0 14px} /* --- 처리 기록: 한 화면에 더 많이 보이도록 행 간격을 좁힙니다 --- */ /* CS 일지 표와 같은 방식으로, 글자 크기는 그대로 두고 여백과 줄간격만 줄였습니다. */ body .history-row{padding:9px 0;gap:11px} body .history-row strong{line-height:1.35} body .history-row p{margin-top:3px;line-height:1.5} body .history-row time{line-height:1.5} body .history-marker{margin-top:5px} /* --- 채널 설정 아래 '문의 내보내기 / 문의 가져오기': 한 쌍으로 보이게 --- */ /* 가져오기 쪽은