/* ============================================================ CREANSWER TEAM — 디자인 토큰 톤: 딥 잉크 다크 + 절제된 코발트 액센트 (차분·장시간 사용) ============================================================ */ :root{ /* 배경 계층 — 단계마다 눈에 보이는 간격을 둔다 (구분이 최우선) */ --ink-900:#070A11; /* 사이드바·입력창 — 가장 어두움 */ --ink-800:#111722; /* 본문 페이지 배경 */ --ink-700:#1B2331; /* 카드·패널 — 배경에서 확실히 떠 보이게 */ --ink-600:#26303F; /* 테이블 헤더·버튼 */ --line:#33404F; /* 경계선 — 카드 위에서 또렷하게 보이는 밝기 */ --line-hi:#44536A; /* 강조 경계선 */ --zebra:rgba(255,255,255,.042); /* 표 줄무늬 */ /* 텍스트 — AA 하한(4.5:1)이 아니라 "오래 봐도 편한" AAA(7:1)를 목표로. 회색 단계를 좁게 두되 전부 충분히 밝게 (다크 배경 + 작은 한글 기준) */ --txt-hi:#F2F5FA; /* 제목·강조 숫자 */ --txt:#C9D2E0; /* 본문·표 내용 */ --txt-lo:#B8C2D2; /* 라벨·보조 정보 — 밝은 패널 제목줄(ink-600) 위에서도 7:1 이 나오는 값 */ --txt-dim:#9AA5BA; /* 최소 강조(플레이스홀더 등) */ /* 액센트 — 상태색(초록·앰버·빨강)과 겹치지 않는 코발트 */ --accent:#7C9CFF; /* 면(버튼 배경·테두리·포커스링)용 */ --accent-hi:#9DB4FF; --accent-txt:#A8BEFF; /* 글자(링크)용 — 다크 위에서 7:1 확보 */ --accent-txt-hi:#C6D5FF; --accent-soft:rgba(124,156,255,.13); --font-display:'Archivo','Pretendard Variable','Pretendard',sans-serif; --font-body:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --r-sm:6px; --r-md:10px; --r-lg:16px; } * { margin:0; padding:0; box-sizing:border-box; } html { color-scheme:dark; } /* 셀렉트·달력·기본 스크롤바까지 다크로 */ body { font-family:var(--font-body); background:var(--ink-800); color:var(--txt); font-size:14px; -webkit-font-smoothing:antialiased; } a { color:var(--accent-txt); text-decoration:none; } a:hover { color:var(--accent-txt-hi); } button { font-family:inherit; } ::selection { background:rgba(124,156,255,.3); color:var(--txt-hi); } /* ============================================================ 로그인 — 좌: 브랜드 / 우: 폼 ============================================================ */ body.auth-body { background:var(--ink-900); color:var(--txt); font-family:var(--font-body); } .auth { min-height:100vh; display:grid; grid-template-columns:1.12fr .88fr; } /* ---- 좌측 브랜드 패널 ---- */ .auth-brand { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(2.5rem,5vw,4.5rem); background:var(--ink-900); border-right:1px solid var(--line); } /* 은은하게 숨쉬는 앰비언트 글로우 */ .auth-brand::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(115% 85% at 12% 18%, rgba(124,156,255,.13), transparent 62%), radial-gradient(85% 65% at 88% 92%, rgba(86,196,178,.055), transparent 58%); animation:breathe 16s ease-in-out infinite; } /* 미세 도트 그리드 텍스처 */ .auth-brand::after{ content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(72% 62% at 26% 38%, #000, transparent 76%); mask-image:radial-gradient(72% 62% at 26% 38%, #000, transparent 76%); } @keyframes breathe { 0%,100%{opacity:.6} 50%{opacity:1} } .auth-brand-body { position:relative; z-index:1; margin-top:auto; margin-bottom:auto; } .eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-lo); } .eyebrow::before { content:''; width:26px; height:2px; background:var(--accent); border-radius:2px; } .wordmark { margin:1.6rem 0 0; line-height:1; } .wordmark .wm-thin { display:block; font-family:var(--font-display); font-size:clamp(.9rem,1.1vw,1.05rem); font-weight:500; letter-spacing:.4em; color:var(--txt-lo); } .wordmark .wm-bold { display:block; margin-top:.5rem; font-family:var(--font-display); font-size:clamp(3.6rem,8vw,6.2rem); font-weight:800; letter-spacing:-.035em; color:var(--txt-hi); } .tagline { margin-top:1.5rem; font-size:1rem; color:var(--txt); letter-spacing:-.01em; max-width:34ch; text-wrap:balance; } .auth-brand-foot { position:relative; z-index:1; display:flex; align-items:center; gap:.55rem; font-size:.83rem; color:var(--txt-lo); letter-spacing:.01em; } .auth-brand-foot .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } /* ---- 우측 폼 패널 ---- */ .auth-panel { display:flex; align-items:center; justify-content:center; padding:clamp(2rem,4vw,3.5rem); background:var(--ink-800); } .auth-form { width:100%; max-width:352px; } .auth-title { font-size:1.5rem; font-weight:700; color:var(--txt-hi); letter-spacing:-.02em; } .auth-desc { margin-top:.5rem; font-size:.9rem; color:var(--txt-lo); } .auth-form form { margin-top:2.25rem; } .fld-a { margin-bottom:1.15rem; } .fld-a label { display:block; margin-bottom:.5rem; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-lo); } .fld-a input { width:100%; padding:.8rem .95rem; background:var(--ink-900); border:1px solid var(--line-hi); border-radius:var(--r-sm); color:var(--txt-hi); font-size:.95rem; font-family:inherit; transition:border-color .18s, box-shadow .18s, background .18s; } .fld-a input::placeholder { color:var(--txt-dim); } .fld-a input:hover { border-color:#3A465C; } .fld-a input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--ink-600); } /* 크롬 자동완성이 다크 배경을 흰색으로 덮는 문제 방지 */ .fld-a input:-webkit-autofill, .fld-a input:-webkit-autofill:focus { -webkit-text-fill-color:var(--txt-hi); -webkit-box-shadow:0 0 0 1000px var(--ink-900) inset; transition:background-color 9999s ease-in-out 0s; } .btn-auth { width:100%; margin-top:1.9rem; padding:.85rem; background:var(--accent); color:#0A0D13; border:none; border-radius:var(--r-sm); font-size:.95rem; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:background .18s, transform .18s, box-shadow .18s; } .btn-auth:hover { background:var(--accent-hi); transform:translateY(-1px); box-shadow:0 8px 22px rgba(124,156,255,.22); } .btn-auth:active { transform:translateY(0); box-shadow:none; } .btn-auth:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; } .auth-err { min-height:1.15rem; margin-top:.9rem; font-size:.8rem; color:#F98080; text-align:center; } .auth-foot { margin-top:2.5rem; font-size:.81rem; color:var(--txt-lo); text-align:center; letter-spacing:.01em; } /* ---- 진입 연출 (0.07s 간격 스태거) ---- */ @keyframes rise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} } .auth-brand-body > *, .auth-brand-foot, .auth-form > *, .auth-form form > * { animation:rise .65s cubic-bezier(.22,1,.36,1) both; } .eyebrow{animation-delay:.05s} .wordmark{animation-delay:.12s} .tagline{animation-delay:.19s} .auth-brand-foot{animation-delay:.26s} .auth-title{animation-delay:.18s} .auth-desc{animation-delay:.24s} .auth-form form .fld-a:nth-of-type(1){animation-delay:.30s} .auth-form form .fld-a:nth-of-type(2){animation-delay:.37s} .btn-auth{animation-delay:.44s} .auth-err{animation-delay:.44s} .auth-foot{animation-delay:.51s} @media (max-width:900px){ .auth { grid-template-columns:1fr; } .auth-brand { border-right:none; border-bottom:1px solid var(--line); padding:2.5rem 1.6rem 2rem; } .auth-brand-body { margin:0; } .wordmark .wm-bold { font-size:3.2rem; } .auth-brand-foot { display:none; } .auth-panel { padding:2.25rem 1.6rem 3rem; align-items:flex-start; } .fld-a input { font-size:16px; } /* iOS 포커스 시 자동 확대 방지 */ } @media (prefers-reduced-motion:reduce){ .auth-brand::before { animation:none; } .auth-brand-body > *, .auth-brand-foot, .auth-form > *, .auth-form form > * { animation:none; } .section.show, .modal, .modal-bg.on { animation:none; } .btn-auth:hover, .btn:hover, .kpi:hover { transform:none; } .toast { transition:none; } } /* ============================================================ 앱 셸 (관리자 · 업체 공통) — 로그인과 동일 톤 ============================================================ */ .app { display:flex; min-height:100vh; background:var(--ink-800); } /* ---- 사이드바 ---- */ .side { width:238px; flex-shrink:0; position:sticky; top:0; height:100vh; background:var(--ink-900); /* 본문과 확실히 갈라지도록: 밝은 경계선 + 바깥으로 퍼지는 그림자 */ border-right:1px solid var(--line); box-shadow:6px 0 24px rgba(0,0,0,.45); padding:26px 0 20px; display:flex; flex-direction:column; z-index:2; } .side .logo { padding:0 22px 22px; margin-bottom:18px; border-bottom:1px solid var(--line); line-height:1; } .side .logo .lg-1 { display:block; font-family:var(--font-display); font-size:.7rem; font-weight:500; letter-spacing:.26em; color:var(--txt-lo); } .side .logo .lg-2 { display:block; margin-top:.45rem; font-family:var(--font-display); font-size:1.32rem; font-weight:800; letter-spacing:-.02em; color:var(--txt-hi); } .side nav { display:flex; flex-direction:column; gap:1px; } /* 비활성 메뉴도 충분히 밝게 — 선택 구분은 배경·왼쪽 선이 담당한다 */ .side nav a { display:block; padding:12px 22px; color:var(--txt); font-size:14px; font-weight:500; border-left:2px solid transparent; cursor:pointer; transition:color .15s, background .15s; } .side nav a:hover { color:var(--txt); background:rgba(255,255,255,.032); } .side nav a.act { color:var(--txt-hi); background:var(--accent-soft); border-left-color:var(--accent); font-weight:600; } .side .bottom { margin-top:auto; padding:16px 22px 0; border-top:1px solid var(--line); font-size:13px; color:var(--txt-lo); } .side .bottom a { display:block; margin-top:9px; color:var(--txt); cursor:pointer; transition:color .15s; } .side .bottom a:hover { color:var(--accent-txt); } .main { flex:1; padding:30px 34px; min-width:0; background:var(--ink-800); } h1 { font-size:1.42rem; font-weight:700; color:var(--txt-hi); letter-spacing:-.022em; } .sub { color:var(--txt-lo); font-size:13.5px; margin:6px 0 26px; } /* ---------- 컴포넌트 ---------- */ .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; } .kpi { background:var(--ink-700); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; box-shadow:0 2px 10px rgba(0,0,0,.28); transition:border-color .18s; } .kpi:hover { border-color:var(--line-hi); } .kpi .t { font-size:12.5px; color:var(--txt-lo); letter-spacing:.02em; margin-bottom:9px; } .kpi .n { font-size:1.7rem; font-weight:800; color:var(--txt-hi); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .kpi .n em { font-style:normal; font-size:.8rem; color:#6EE7A0; margin-left:6px; } .kpi-more { display:inline-block; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--accent-txt); cursor:pointer; } .kpi-more:hover { color:var(--accent-txt-hi); } .panel { background:var(--ink-700); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:20px; overflow-x:auto; box-shadow:0 2px 10px rgba(0,0,0,.28); /* 배경 위에 얹힌 느낌 */ } .panel table { min-width:600px; } /* 패널 제목줄 — 한 단계 밝은 띠로 만들어 본문과 분리 */ .panel > h2 { font-size:14px; font-weight:600; color:var(--txt-hi); padding:14px 20px; background:var(--ink-600); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; } /* 접기/펴기 패널 */ .panel.collapsed > .body { display:none; } .panel > h2.panel-toggle { cursor:pointer; user-select:none; transition:background .15s; } .panel > h2.panel-toggle:hover { background:#2C3746; } .panel > h2.panel-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .panel.collapsed > h2.panel-toggle { border-bottom:none; } .panel > h2 a { font-size:12.5px; color:var(--accent-txt); font-weight:500; cursor:pointer; } .panel > h2 a:hover { color:var(--accent-txt-hi); } .panel .body { padding:18px 20px; } .panel .body + table thead th { border-top:1px solid var(--line); } table { width:100%; border-collapse:collapse; font-size:14px; } th { text-align:left; padding:12px 16px; background:var(--ink-600); color:var(--txt-lo); font-size:12.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap; border-bottom:1px solid var(--line); } td { padding:13px 16px; border-top:1px solid var(--line); color:var(--txt); vertical-align:top; word-break:keep-all; line-height:1.65; } /* 줄무늬 — 행이 많은 표에서 가로 읽기 흐름을 잡아준다 */ tbody tr:nth-child(even) > td { background:var(--zebra); } td b { color:var(--txt-hi); font-weight:600; } td code { color:var(--accent-txt); font-size:12.5px; } tbody tr:hover > td { background:rgba(124,156,255,.07); } tr.click { cursor:pointer; } .bdg { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap; } /* 배지 — 짧지만 자주 읽는 상태 표시. 글자를 넉넉히 밝게 */ .b-blue { background:rgba(124,156,255,.16); color:#C2D0FF; } .b-green { background:rgba(74,222,128,.14); color:#8AEFB4; } .b-amber { background:rgba(251,191,36,.15); color:#F9D28E; } .b-red { background:rgba(248,113,113,.15); color:#FDB8B8; } .b-gray { background:rgba(255,255,255,.08); color:#C3CDDC; } .muted { color:var(--txt-lo); font-size:13px; } .btn { padding:8px 15px; border-radius:var(--r-sm); border:1px solid var(--line-hi); background:var(--ink-600); color:var(--txt); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, color .15s; } .btn:hover { background:#232C3B; border-color:#3A465C; color:var(--txt-hi); } .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .btn-p { background:var(--accent); border-color:var(--accent); color:#0A0D13; } .btn-p:hover { background:var(--accent-hi); border-color:var(--accent-hi); color:#0A0D13; } .btn-d { color:#FB9C9C; border-color:rgba(248,113,113,.28); background:rgba(248,113,113,.07); } .btn-d:hover { color:#FCA5A5; border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.15); } .btn-sm { padding:5px 11px; font-size:12.5px; border-radius:5px; } .btn:disabled { opacity:.5; cursor:default; } /* ---------- 폼 ---------- */ .form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .form-grid .full { grid-column:1/-1; } .fld label { display:block; font-size:12.5px; color:var(--txt-lo); font-weight:600; letter-spacing:.02em; margin-bottom:6px; } .fld input, .fld select, .fld textarea { width:100%; padding:9px 12px; background:var(--ink-900); border:1px solid var(--line-hi); border-radius:var(--r-sm); color:var(--txt-hi); font-size:13.5px; font-family:inherit; transition:border-color .15s, box-shadow .15s; } .fld input::placeholder, .fld textarea::placeholder { color:var(--txt-dim); } .fld input:hover, .fld select:hover, .fld textarea:hover { border-color:#3A465C; } .fld input:focus, .fld select:focus, .fld textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .fld textarea { resize:vertical; min-height:64px; line-height:1.65; } .form-actions { margin-top:16px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .section { display:none; } /* fill-mode 없음 — 애니메이션이 실행되지 않아도 내용은 항상 보이도록 */ .section.show { display:block; animation:rise .42s cubic-bezier(.22,1,.36,1); } .toast { position:fixed; bottom:24px; right:24px; background:var(--ink-600); color:var(--txt-hi); border:1px solid var(--line-hi); border-left:3px solid var(--accent); padding:12px 20px; border-radius:var(--r-sm); font-size:13px; box-shadow:0 18px 44px rgba(0,0,0,.55); opacity:0; transform:translateY(8px); transition:opacity .28s, transform .28s cubic-bezier(.22,1,.36,1); pointer-events:none; z-index:99; } .toast.on { opacity:1; transform:none; } /* 요청 상세 카드 */ .req-card { border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; margin-bottom:12px; background:var(--ink-700); box-shadow:0 2px 10px rgba(0,0,0,.28); transition:border-color .18s; } .req-card:hover { border-color:var(--line-hi); } /* 머리글은 2단 — ① 업체명 + 상태·기한 배지 ② 제목 */ .req-card .rc-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .req-card .rc-comp { font-size:12.5px; font-weight:700; color:var(--txt-lo); letter-spacing:.02em; margin-right:2px; } .req-card .rc-title { font-weight:700; font-size:15px; color:var(--txt-hi); margin-top:7px; line-height:1.45; } .req-card .rc-meta { color:var(--txt-lo); font-size:12.5px; margin-left:auto; } .req-card .rc-detail { color:var(--txt); font-size:13.5px; margin:8px 0; white-space:pre-wrap; line-height:1.7; } .req-card .rc-reply { background:var(--accent-soft); border-left:2px solid var(--accent); padding:11px 13px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13px; color:var(--txt); margin-top:10px; white-space:pre-wrap; line-height:1.7; } .req-card .rc-reply b { color:var(--accent-txt); } .req-card .rc-actions { display:flex; gap:6px; margin-top:12px; align-items:center; flex-wrap:wrap; } /* 업체 · 담당자 · 요청일 · 기한을 한 줄에 — 카드만 봐도 "누가 누구에게 언제까지"가 읽히게 */ .req-card .rc-line { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; color:var(--txt-lo); padding:8px 0 2px; border-top:1px solid var(--line); margin-top:8px; } .req-card .rc-line b { color:var(--txt); font-weight:600; } /* 기한을 넘긴 건은 카드 자체에 붉은 띠를 둘러 목록에서 바로 튀게 */ .req-card.over { border-color:rgba(248,113,113,.42); box-shadow:0 2px 10px rgba(0,0,0,.28), inset 3px 0 0 #F87171; } /* ---------- 요청사항 첨부파일 ---------- */ .rc-files { margin-top:10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ink-800); } .rc-files .rf-head { padding:8px 12px; font-size:12.5px; font-weight:600; color:var(--txt-lo); background:var(--ink-600); border-bottom:1px solid var(--line); border-radius:var(--r-sm) var(--r-sm) 0 0; } .rc-files .rf { display:flex; align-items:center; gap:10px; padding:9px 12px; min-width:0; border-top:1px solid var(--line); } .rc-files .rf:first-of-type { border-top:none; } .rc-files .rf-ic { flex-shrink:0; font-size:15px; } .rc-files .rf-name { font-size:13.5px; color:var(--txt-hi); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .rc-files .rf-meta { font-size:12px; color:var(--txt-lo); white-space:nowrap; margin-right:auto; } .rc-files .rf .btn { flex-shrink:0; } /* 브라우저에서 못 여는 형식은 미리보기 버튼을 흐리게 (자리는 유지해 줄이 흔들리지 않게) */ .rc-files .btn.off { opacity:.4; cursor:not-allowed; } /* 파일 첨부 버튼 — label 이지만 버튼처럼 보이고 눌리게 */ .rc-actions label.btn { cursor:pointer; } /* 등록 폼에서 고른 파일 미리 표시 */ .file-pick { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .file-pick .fp { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12.5px; background:var(--accent-soft); color:var(--txt-hi); border:1px solid var(--line-hi); } .file-pick .fp i { font-style:normal; color:var(--txt-lo); font-size:12px; } .lbl-hint { font-weight:400; color:var(--txt-lo); font-size:12.5px; margin-left:6px; } .fld input[type=file] { padding:8px 10px; font-size:13px; cursor:pointer; background:var(--ink-900); border:1px solid var(--line-hi); border-radius:var(--r-sm); color:var(--txt); width:100%; } .fld input[type=file]::file-selector-button { margin-right:10px; padding:5px 12px; cursor:pointer; background:var(--ink-600); color:var(--txt-hi); border:1px solid var(--line-hi); border-radius:var(--r-sm); font:inherit; font-size:12.5px; } .fld input[type=file]::file-selector-button:hover { background:#2F3B4C; } /* 검수 결과창 — 정해진 줄 수만 보이고 나머지는 스크롤. .scrollbox 의 기본 330px 제한을 풀어야 실제로 잰 높이가 적용된다 */ .scrollbox.rev-scroll { max-height:none; overflow-y:auto; overflow-x:hidden; } /* 결과 패널도 접힌다 — 접으면 스크롤 영역째 감춘다 */ .panel.collapsed > .scrollbox { display:none; } /* 사람이 직접 확인한 건 */ .btn.btn-ok { color:#6EE7A0; border-color:rgba(52,211,153,.42); background:rgba(52,211,153,.12); } .btn.btn-ok:hover { color:#8BF0B6; border-color:rgba(52,211,153,.62); background:rgba(52,211,153,.2); } /* 확인이 끝난 카드는 접어 둔다 — 머리를 누르면 다시 펼친다 */ .rev-card.folded > .fold-body, .img-card.folded .fold-body { display:none; } .rv-click { cursor:pointer; } .fold-caret { margin-left:8px; flex-shrink:0; color:var(--txt-lo); font-size:11px; } .fold-caret::before { content:'▴'; } .folded .fold-caret::before { content:'▾'; } .rev-card.folded, .img-card.folded { opacity:.72; } .rev-card.folded:hover, .img-card.folded:hover { opacity:1; } .img-card.folded .ic-body { padding-bottom:12px; } .rev-scroll > .body { padding-bottom:12px; } /* ---------- 선택 업체의 매체별 진행 (허브 미러) ---------- */ .media-chips { display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin-bottom:20px; } .media-chips.empty { padding:14px 18px; background:var(--ink-700); border:1px solid var(--line); border-radius:var(--r-md); font-size:13px; } .mc { position:relative; min-width:118px; padding:13px 15px 11px; background:var(--ink-700); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 2px 10px rgba(0,0,0,.28); } .mc-n { font-size:21px; font-weight:800; color:var(--txt-hi); line-height:1.15; font-variant-numeric:tabular-nums; } .mc-n span { font-size:14px; font-weight:600; color:var(--txt-lo); } .mc-t { font-size:12.5px; color:var(--txt-lo); margin-top:3px; white-space:nowrap; } .mc-bar { height:4px; border-radius:999px; background:var(--ink-900); margin-top:8px; overflow:hidden; } .mc-bar i { display:block; height:100%; border-radius:999px; background:var(--accent); } /* 목표를 채운 매체는 초록, 진행 중이면 파랑 */ .mc.ok .mc-n { color:#6EE7A0; } .mc.ok .mc-bar i { background:#34D399; } .mc.run .mc-n { color:var(--accent-txt); } /* 계약에 없는 매체로 올라온 실적 */ .mc.extra { border-style:dashed; } .mc.extra .mc-n { color:var(--txt); } .mc-t i { font-style:normal; font-size:11px; color:var(--txt-dim); } .mc-at { align-self:flex-end; font-size:12px; padding-bottom:12px; } /* ---------- 포스팅 현황 보고서 — 담당자별 판 ---------- */ .rep-panel .rep-owner { font-size:12.5px; font-weight:700; color:var(--txt-lo); padding:3px 10px; border-radius:999px; background:var(--ink-800); border:1px solid var(--line); } .rep-panel .rep-owner.mine { color:var(--accent-txt); background:var(--ink-900); border-color:var(--line-hi); } .rep-panel .rep-meta { font-size:12.5px; } /* ---------- 최근 GEO 작업 (허브 연동 안내 · 진척도) ---------- */ .geo-note { margin:0 20px 12px; padding:11px 14px; border-radius:var(--r-sm); font-size:13px; line-height:1.7; color:var(--txt); background:var(--ink-800); border:1px solid var(--line); } .geo-note:first-child { margin-top:14px; } .geo-note.warn { background:rgba(245,194,101,.09); border-color:rgba(245,194,101,.28); color:#F0CE94; } .geo-note code { background:var(--ink-900); border:1px solid var(--line-hi); border-radius:3px; padding:1px 6px; font-size:12.5px; color:var(--txt-hi); } /* 업체 한 줄에 진행 단계·진행률·최근 작업이 함께 보이게 */ .panel .geo-table { min-width:820px; table-layout:fixed; } .geo-table th:nth-child(1) { width:23%; } .geo-table th:nth-child(2) { width:17%; } .geo-table th:nth-child(3) { width:47%; } .geo-table th:nth-child(4) { width:13%; } .geo-table td { vertical-align:top; } td.gs-step { white-space:nowrap; font-variant-numeric:tabular-nums; } .gs-num { font-size:15px; font-weight:800; color:var(--txt-hi); } .gs-num span { font-size:12.5px; font-weight:600; color:var(--txt-lo); } .gs-bar { height:5px; border-radius:999px; background:var(--ink-900); margin:5px 0 4px; overflow:hidden; } .gs-bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent), #34D399); } .gs-task { color:var(--txt-hi); font-weight:600; line-height:1.55; } .geo-table td .btn { width:100%; text-align:center; } td.gs-step .btn { margin-top:7px; } /* ---------- 작업순서도 전체 보기 ---------- */ .wo-top { display:flex; align-items:center; gap:14px; margin-bottom:14px; } .wo-sum { font-size:15px; color:var(--txt-lo); white-space:nowrap; } .wo-sum b { font-size:19px; font-weight:800; color:var(--txt-hi); } .wo-tabs { display:flex; gap:4px; background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-md); padding:4px; margin-bottom:14px; width:fit-content; } .wo-tabs button { display:flex; align-items:center; gap:7px; padding:7px 14px; border:none; border-radius:var(--r-sm); background:transparent; color:var(--txt-lo); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; } .wo-tabs button:hover { background:var(--ink-700); color:var(--txt); } .wo-tabs button.on { background:var(--ink-600); color:var(--txt-hi); } .wo-tabs button i { font-style:normal; font-size:12.5px; font-weight:700; padding:1px 6px; border-radius:999px; background:var(--ink-800); color:var(--txt); } .wo-tabs button.on i { background:var(--ink-900); color:var(--accent-txt); } .wo-table { width:100%; border-collapse:collapse; } .wo-table th { position:sticky; top:0; background:var(--ink-600); z-index:1; text-align:left; padding:10px 12px; font-size:12.5px; font-weight:700; color:var(--txt-hi); } .wo-table td { padding:10px 12px; border-top:1px solid var(--line); font-size:13.5px; color:var(--txt); vertical-align:top; line-height:1.6; } .wo-table td:first-child { width:48px; color:var(--txt-lo); font-variant-numeric:tabular-nums; } .wo-table td:nth-child(2) { width:104px; white-space:nowrap; } .wo-table tr.undone td:last-child { color:var(--txt-lo); } /* 허브 화면을 그대로 띄우는 모달 — 원본과 같은 폭·높이를 확보한다 */ .modal.modal-full { width:min(1560px, 96vw); max-width:none; } .modal.modal-full .m-body { padding:0; max-height:none; overflow:hidden; } .hub-frame { display:block; width:100%; height:78vh; min-height:520px; border:0; background:#0b0e17; } /* ---------- GEO 지표 (자체 렌더 — 지금은 미러링을 쓰므로 예비) ---------- */ .mx-meta { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:12.5px; color:var(--txt-lo); padding-bottom:12px; border-bottom:1px solid var(--line); } .mx-meta b { color:var(--txt-hi); } .mx-h { font-size:14px; font-weight:700; color:var(--txt-hi); margin:20px 0 10px; } .mx-h .muted { font-weight:400; } .mx-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); } .mx-table { border-collapse:collapse; min-width:100%; } .mx-table th { background:var(--ink-600); padding:9px 10px; font-size:12.5px; font-weight:700; color:var(--txt-hi); white-space:nowrap; border-left:1px solid var(--line); } .mx-table td { padding:8px 10px; border-top:1px solid var(--line); border-left:1px solid var(--line); vertical-align:top; font-size:12.5px; } .mx-table th.mx-q, .mx-table td.mx-q { border-left:none; min-width:190px; max-width:280px; } .mx-table td.mx-q b { color:var(--txt-hi); font-size:13px; line-height:1.5; } .mx-v { display:flex; align-items:baseline; gap:6px; white-space:nowrap; line-height:1.9; } .mx-v span { font-size:11.5px; color:var(--txt-lo); min-width:38px; } .mx-v.a-top { color:#6EE7A0; font-weight:700; } .mx-v.a-ok { color:#A8BEFF; } .mx-v.a-weak { color:#F0CE94; } .mx-v.a-no { color:var(--txt-lo); } .mx-v.a-none { color:var(--txt-dim); } .mx-note { margin-top:10px; padding:11px 13px; border-radius:var(--r-sm); background:var(--ink-800); border:1px solid var(--line); font-size:12.5px; color:var(--txt-lo); line-height:1.75; } .mx-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:8px; } .mg { padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ink-800); min-width:0; } .mg-k { display:block; font-size:12.5px; font-weight:700; color:var(--txt-hi); margin-bottom:6px; } .mg .muted { margin-top:5px; line-height:1.55; } .mg-v { margin-top:5px; font-size:12px; color:var(--txt); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ============================================================ 디자이너 일정 — 월간 달력 + 요청일~마감일 구간 막대 ============================================================ */ .cal-nav { display:flex; align-items:center; gap:6px; margin-left:auto; } .cal-legend { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:400; color:var(--txt-lo); margin-right:6px; } .cal-legend .lg { width:10px; height:10px; border-radius:3px; display:inline-block; margin-left:6px; } .cal-legend .lg:first-child { margin-left:0; } .lg-run { background:#7C9CFF; } .lg-over { background:#F87171; } .lg-done { background:#34D399; } .cal { border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--ink-800); } .cal-dow { display:grid; grid-template-columns:repeat(7,1fr); background:var(--ink-600); } .cal-dow > div { padding:9px 0; text-align:center; font-size:12.5px; font-weight:700; color:var(--txt); border-left:1px solid var(--line); } .cal-dow > div:first-child { border-left:none; } .cal-dow .sun { color:#FCA5A5; } .cal-dow .sat { color:#A8BEFF; } /* 한 주 = 날짜칸(배경) 위에 구간 막대를 겹쳐 올린다 */ .cal-week { position:relative; border-top:1px solid var(--line); } .cw-days { display:grid; grid-template-columns:repeat(7,1fr); } .cd { /* 날짜 숫자 자리 + 그 주에 필요한 막대 레인만큼 높이를 늘린다 */ min-height:calc(34px + var(--lanes) * 25px + 8px); padding:6px 8px; border-left:1px solid var(--line); cursor:pointer; transition:background .13s; } .cd:first-child { border-left:none; } .cd:hover { background:rgba(255,255,255,.035); } .cd.other { background:rgba(0,0,0,.20); } .cd.other .cd-n { color:var(--txt-dim); } .cd.today { background:rgba(124,156,255,.09); box-shadow:inset 0 2px 0 var(--accent); } .cd.sel { background:rgba(124,156,255,.15); box-shadow:inset 0 0 0 2px var(--accent); } .cd-n { font-size:12.5px; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums; } .cd-n.sun { color:#FCA5A5; } .cd-n.sat { color:#A8BEFF; } .cd.today .cd-n { background:var(--accent); color:#0B1020; border-radius:999px; padding:1px 7px; display:inline-block; } .cw-bars { position:absolute; left:0; right:0; top:30px; display:grid; grid-template-columns:repeat(7,1fr); gap:3px 0; grid-auto-rows:22px; pointer-events:none; } .cbar { pointer-events:auto; cursor:pointer; min-width:0; overflow:hidden; display:flex; align-items:center; gap:6px; white-space:nowrap; margin:0 3px; padding:0 8px; height:22px; font-size:12px; font-weight:600; gap:0; border-radius:2px; border-left:3px solid transparent; transition:filter .13s; } .cbar:hover { filter:brightness(1.25); } /* 시작·끝이 이 주 안에 있으면 모서리를 둥글게 — 주를 넘어가는 건은 각져서 이어져 보인다 */ .cbar.head { border-radius:4px 2px 2px 4px; } .cbar.tail { border-radius:2px 4px 4px 2px; } .cbar.head.tail { border-radius:4px; } /* 업체명이 길어도 폭을 다 먹지 않게 — 무엇을 만들지(제목)가 더 중요하다 */ .cbar .cb-c { font-weight:800; min-width:0; max-width:44%; flex-shrink:1; overflow:hidden; text-overflow:ellipsis; } .cbar .cb-c::after { content:"·"; opacity:.55; margin-left:6px; } .cbar .cb-t { overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; } /* 제목 */ .cbar .cb-d { margin-left:8px; flex-shrink:0; font-size:11.5px; opacity:.92; } /* 하루짜리 막대 — 좁으니 업체명도 더 줄여 제목 자리를 남긴다 */ .cbar.narrow { padding:0 6px; } .cbar.narrow .cb-c { max-width:38%; } .cbar.narrow .cb-c::after { margin-left:4px; } /* 진행 중 / 기한 초과 / 완료 — 배경은 어둡게, 글자는 밝게 해 대비를 확보 */ .cb-run { background:rgba(124,156,255,.20); border-left-color:#7C9CFF; color:#D3DEFF; } .cb-over { background:rgba(248,113,113,.20); border-left-color:#F87171; color:#FFD3D3; } .cb-done { background:rgba(52,211,153,.17); border-left-color:#34D399; color:#BFEEDA; } /* ---------- 디자이너 대시보드 — 주간 보기 ---------- */ .dw-sum { font-size:13.5px; color:var(--txt-lo); margin-bottom:12px; } .dw-sum b { color:var(--txt-hi); font-size:16px; font-weight:800; } .dw-sum .over { color:#FCA5A5; font-weight:700; } .dw-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } .dw-day { min-width:0; background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; } .dw-day.today { border-color:var(--accent); background:rgba(124,156,255,.09); } .dw-h { display:flex; align-items:baseline; gap:6px; margin-bottom:8px; } .dw-h b { font-size:12.5px; color:var(--txt); } .dw-h b.sun { color:#FCA5A5; } .dw-h b.sat { color:#A8BEFF; } .dw-h span { font-size:12.5px; color:var(--txt-lo); font-variant-numeric:tabular-nums; } .dw-day.today .dw-h span { color:var(--accent-txt); font-weight:700; } .dw-card { border-left:3px solid transparent; border-radius:3px; padding:7px 8px; margin-bottom:6px; min-width:0; cursor:default; } .dw-card:last-child { margin-bottom:0; } .dw-c { font-size:11.5px; font-weight:700; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dw-t { font-size:12.5px; font-weight:600; line-height:1.45; margin:2px 0 3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .dw-d { font-size:11.5px; opacity:.85; } .dw-none { text-align:center; color:var(--txt-dim); font-size:12.5px; padding:6px 0; } @media (max-width:1100px){ .dw-grid { grid-template-columns:repeat(4,1fr); } } /* 선택한 날짜의 작업 카드 */ .dcard { border:1px solid var(--line); border-left:3px solid var(--line-hi); border-radius:var(--r-md); padding:14px 16px; margin-bottom:10px; background:var(--ink-800); } .dcard:last-child { margin-bottom:0; } .dcard.d-run { border-left-color:#7C9CFF; } .dcard.d-over { border-left-color:#F87171; } .dcard.d-done { border-left-color:#34D399; } .dc-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .dc-comp { font-size:12.5px; font-weight:700; color:var(--txt-lo); } .dc-term { font-size:12.5px; color:var(--txt-lo); margin-left:auto; font-variant-numeric:tabular-nums; } .dc-term b { color:var(--txt-hi); } .dc-title { font-size:15px; font-weight:700; color:var(--txt-hi); margin:9px 0 6px; line-height:1.45; } .dc-detail { font-size:13.5px; color:var(--txt); line-height:1.75; white-space:pre-wrap; } .dc-files { margin-top:9px; font-size:12.5px; color:var(--txt-lo); } .dc-files a { color:var(--accent-txt); } @media (max-width:900px){ .cal { overflow-x:auto; } .cal-dow, .cw-days, .cw-bars { min-width:700px; } } /* ============================================================ 검수 — 콘텐츠(글 주소) · 이미지 공통 결과 표시 정상은 녹색, 검토는 빨간색 띠로 목록에서 바로 갈리게 한다 ============================================================ */ .rev-card { border:1px solid var(--line); border-left:3px solid var(--line-hi); border-radius:var(--r-md); padding:15px 17px; margin-bottom:12px; background:var(--ink-700); box-shadow:0 2px 10px rgba(0,0,0,.28); } .rev-card.ok { border-left-color:#34D399; } .rev-card.ng { border-left-color:#F87171; } .img-card.ok { box-shadow:inset 3px 0 0 #34D399, 0 2px 10px rgba(0,0,0,.28); } .img-card.ng { box-shadow:inset 3px 0 0 #F87171, 0 2px 10px rgba(0,0,0,.28); } .rv-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .rv-comp { font-size:12.5px; font-weight:700; color:var(--txt-lo); } .rv-meta { font-size:12.5px; color:var(--txt-lo); margin-left:auto; } .rv-title { font-size:15px; font-weight:700; color:var(--txt-hi); margin:8px 0 4px; line-height:1.45; } .rv-url { display:inline-block; font-size:12.5px; color:var(--accent-txt); word-break:break-all; } .rv-act { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; } .rv-thumbs { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .rv-thumbs img { width:64px; height:64px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line); display:block; } /* 판정 요약 — 정상 / 검수 불가 / 검수 중 */ .rev-ok, .rev-err, .rev-wait, .rev-sum { margin-top:10px; padding:10px 13px; border-radius:var(--r-sm); font-size:13.5px; line-height:1.7; } .rev-ok { background:rgba(52,211,153,.10); border:1px solid rgba(52,211,153,.26); color:#A7E9CE; } .rev-err { background:rgba(245,194,101,.09); border:1px solid rgba(245,194,101,.26); color:#F0CE94; white-space:pre-wrap; } .rev-wait { background:var(--ink-800); border:1px solid var(--line); color:var(--txt-lo); } .rev-sum { background:var(--ink-800); border:1px solid var(--line); color:var(--txt); } /* 이미지 카드는 좁아서 요약을 두 줄로 줄이고 자세한 건 창에서 본다 */ .rev-sum.rev-clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .btn.rev-more { margin-top:8px; width:100%; text-align:center; } /* 문제 상세 창 머리 — 이미지와 정보를 나란히 */ .iss-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:4px; } .iss-head img { width:200px; height:150px; object-fit:contain; background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-sm); display:block; flex-shrink:0; } .iss-head .iss-info { min-width:0; } .iss-head .iss-name { font-size:14px; font-weight:700; color:var(--txt-hi); margin-top:8px; word-break:break-all; } @media (max-width:640px){ .iss-head { flex-direction:column; } .iss-head img { width:100%; } } /* 무엇이 문제인지 알려주는 곳 */ .rev-issues { margin-top:10px; border:1px solid rgba(248,113,113,.30); border-radius:var(--r-sm); overflow:hidden; } .rev-issues .ri-head { padding:8px 13px; font-size:12.5px; font-weight:700; color:#FCA5A5; background:rgba(248,113,113,.11); border-bottom:1px solid rgba(248,113,113,.24); } .rev-issues .ri { display:flex; gap:11px; padding:11px 13px; border-top:1px solid var(--line); background:var(--ink-800); } .rev-issues .ri:first-of-type { border-top:none; } .rev-issues .ri-k { flex-shrink:0; align-self:flex-start; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; } .ri-k.k-typo { background:rgba(124,156,255,.15); color:#B6C8FF; } .ri-k.k-comp { background:rgba(245,194,101,.15); color:#F5CE95; } .ri-k.k-law { background:rgba(248,113,113,.16); color:#FCA5A5; } .ri-k.k-etc { background:rgba(255,255,255,.09); color:var(--txt); } .rev-issues .ri-body { min-width:0; font-size:13.5px; line-height:1.7; } .rev-issues .ri-q { color:var(--txt-hi); font-weight:600; word-break:break-word; } .rev-issues .ri-f { color:#A7E9CE; margin-top:3px; word-break:break-word; } .rev-issues .ri-n { color:var(--txt-lo); font-size:12.5px; margin-top:3px; } /* ---------- 요청사항 툴바 (진행 탭 + 필터) ---------- */ .req-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); } .tabs { display:flex; gap:4px; background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-md); padding:4px; } .tabs button { display:flex; align-items:center; gap:7px; padding:8px 14px; border:none; border-radius:var(--r-sm); background:transparent; color:var(--txt-lo); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .15s, color .15s; } .tabs button:hover { background:var(--ink-700); color:var(--txt); } .tabs button.on { background:var(--ink-600); color:var(--txt-hi); box-shadow:0 1px 4px rgba(0,0,0,.3); } .tabs button i { font-style:normal; font-size:12.5px; font-weight:700; min-width:20px; text-align:center; padding:1px 6px; border-radius:999px; background:var(--ink-800); color:var(--txt); } /* 밝은 액센트 글자를 반투명 액센트 면에 얹으면 대비가 무너진다 → 어두운 면에 얹을 것 */ .tabs button.on i { background:var(--ink-900); color:var(--accent-txt); } /* 기한 초과 건이 있으면 '진행확인' 탭 숫자를 붉게 — 탭을 열지 않아도 알아채게 */ .tabs button.warn i { background:rgba(248,113,113,.16); color:#FCA5A5; } .req-filters { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; } .req-filters select.mini-input { width:auto; min-width:150px; cursor:pointer; } /* ---------- 업체 선택 드롭다운 ---------- */ .comp-select { padding:10px 14px; background:var(--ink-900); border:1px solid var(--line-hi); border-radius:var(--r-sm); font-size:13.5px; font-weight:600; color:var(--txt-hi); min-width:280px; max-width:100%; cursor:pointer; transition:border-color .15s, box-shadow .15s; } .comp-select:hover { border-color:#3A465C; } .comp-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* ---------- 이미지 검수 ---------- */ /* 한 줄에 5개 — 좁아지면 줄여서 카드가 찌그러지지 않게 */ .img-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; padding:18px 20px; } @media (max-width:1500px){ .img-grid { grid-template-columns:repeat(4,1fr); } } @media (max-width:1200px){ .img-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:900px){ .img-grid { grid-template-columns:repeat(2,1fr); } } .img-card { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--ink-600); display:flex; flex-direction:column; transition:border-color .18s; } .img-card:hover { border-color:var(--line-hi); } .img-card img { width:100%; height:180px; object-fit:contain; background:var(--ink-900); display:block; transition:opacity .18s; } .img-card a:hover img { opacity:.82; } .ic-body { padding:12px 14px; display:flex; flex-direction:column; gap:8px; } .ic-name { font-weight:600; font-size:13px; color:var(--txt-hi); word-break:break-all; line-height:1.55; } .ic-body textarea { width:100%; min-height:58px; padding:8px 10px; background:var(--ink-900); border:1px solid var(--line-hi); border-radius:var(--r-sm); color:var(--txt-hi); font-size:12.5px; font-family:inherit; resize:vertical; line-height:1.65; } .ic-body textarea::placeholder { color:var(--txt-dim); } .ic-body textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* ---------- 매체별 카드 ---------- */ .media-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:16px 20px; } .media-card { border:1px solid var(--line); border-radius:var(--r-md); background:var(--ink-600); overflow:hidden; min-width:0; } .media-card h4 { padding:13px 16px 9px; font-size:13.5px; font-weight:600; color:var(--txt-hi); } .media-card .bar { height:5px; background:rgba(255,255,255,.07); margin:0 16px; border-radius:99px; overflow:hidden; } .media-card .bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#3FBF7F,#63E3A4); } .media-card .mstats { padding:9px 16px 11px; font-size:12.5px; color:var(--txt-lo); font-variant-numeric:tabular-nums; } .media-card .mstats b { color:var(--txt-hi); } .media-list { max-height:250px; overflow:auto; border-top:1px solid var(--line); } .mrow { display:flex; gap:8px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; } .media-list .mrow:nth-of-type(even) { background:var(--zebra); } .media-list .mrow:hover { background:rgba(124,156,255,.07); } .mrow:last-child { border-bottom:none; } .mrow .md { width:74px; flex-shrink:0; color:var(--txt-lo); white-space:nowrap; font-variant-numeric:tabular-nums; } /* '찾은 곳' 칸 — 한 글이 여러 곳에서 잡히면 배지가 여러 개 붙는다 */ .mrow .ms { width:104px; flex-shrink:0; display:flex; gap:3px; flex-wrap:wrap; } .mrow .ms .bdg { padding:1px 6px; font-size:11px; } .mrow .ml { width:48px; flex-shrink:0; white-space:nowrap; color:var(--accent-txt); } .mrow .mk { width:120px; flex-shrink:0; color:var(--accent-txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mrow .mt { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--txt); min-width:0; } .mrow-head { position:sticky; top:0; background:var(--ink-700); z-index:1; padding:7px 14px; border-bottom:1px solid var(--line); } .mrow-head span { color:var(--txt-lo) !important; font-size:11.5px; font-weight:700; letter-spacing:.02em; } @media (max-width:1100px){ .media-grid { grid-template-columns:1fr; } } /* ---------- 현황 보고서 ---------- */ /* 기본값(JS 로드 전 깜빡임 방지용). 실제 높이는 fitReportRows()가 5행에 맞춰 다시 계산 */ .scrollbox { max-height:330px; overflow:auto; } .scrollbox.expanded { max-height:none; } /* [전체보기] — 높이 제한 해제 */ .scrollbox table { min-width:900px; } .scrollbox thead th { position:sticky; top:0; background:var(--ink-600); z-index:1; } /* 포스팅 현황 보고서 표 각 열 실제 내용 길이를 실측해 폭을 배분 — 남는 폭은 전부 제목 열로 보내 행 높이를 낮춘다 */ /* 대시보드 업체 요약표 — 가로는 패널 폭에 맞추고 세로만 스크롤 */ .scrollbox.comp-scroll { overflow-x:hidden; } .scrollbox.comp-scroll table { min-width:0; } .comp-dash tbody tr:last-child td { border-bottom:none; } .scrollbox .rep-table { min-width:1020px; } .rep-table th, .rep-table td { padding:11px; white-space:nowrap; } /* 업체명·키워드·제목만 줄바꿈 허용 */ .rep-table td:nth-child(3), .rep-table td:nth-child(6), .rep-table td:nth-child(7) { white-space:normal; line-height:1.55; } .rep-table th:nth-child(1) { width:46px; } /* No */ .rep-table th:nth-child(2) { width:100px; } /* 등록 날짜 */ .rep-table th:nth-child(3) { width:134px; } /* 업체명 */ .rep-table th:nth-child(4) { width:98px; } /* 포스팅 유형 */ .rep-table th:nth-child(5) { width:63px; } /* url */ .rep-table th:nth-child(6) { width:142px; } /* 키워드 */ .rep-table th:nth-child(8) { width:58px; } /* 순위 */ .rep-table th:nth-child(9) { width:72px; } /* 변동순위 */ /* 긴 값(엑셀에 문장이 들어간 키워드 등)은 줄 수를 제한 — 마우스를 올리면 전체가 보인다. td에 직접 걸면 표 레이아웃이 깨지므로 안쪽 span에 적용 */ .rep-table .clamp2, .rep-table .clamp3 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } .rep-table .clamp2 { -webkit-line-clamp:2; } .rep-table .clamp3 { -webkit-line-clamp:3; } /* 7번(제목)은 폭 지정 없이 남는 공간을 모두 차지 */ .rep-table th:nth-child(8), .rep-table td:nth-child(8), .rep-table th:nth-child(9), .rep-table td:nth-child(9) { text-align:right; font-variant-numeric:tabular-nums; } .rep-table td:nth-child(2) { font-variant-numeric:tabular-nums; } /* ---------- 채널·수량·단가·총금액 복수 입력 줄 ---------- */ .item-head { display:flex; gap:8px; margin-bottom:6px; font-size:12px; color:var(--txt-lo); font-weight:600; letter-spacing:.02em; } .item-head .ip { flex:2; } .item-head .qt { width:70px; flex-shrink:0; text-align:right; } .item-head .pr, .item-head .tt { flex:1; text-align:right; } .item-head .rmsp { width:33px; flex-shrink:0; } .item-row { display:flex; gap:8px; margin-bottom:8px; align-items:center; } .item-row .ip { flex:2; } .item-row .qt { width:70px; flex-shrink:0; text-align:right; } .item-row .pr { flex:1; text-align:right; } .item-row .tt { flex:1; text-align:right; background:var(--ink-600) !important; color:var(--txt-hi); font-weight:700; } .item-row input { padding:9px 12px; background:var(--ink-900); border:1px solid var(--line-hi); border-radius:var(--r-sm); color:var(--txt-hi); font-size:13.5px; min-width:0; font-family:inherit; transition:border-color .15s, box-shadow .15s; } .item-row input::placeholder { color:var(--txt-dim); } .item-row input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .item-row .tt:focus { border-color:var(--line-hi); box-shadow:none; } .item-row .rm { flex-shrink:0; color:#FB9C9C; border-color:rgba(248,113,113,.28); background:rgba(248,113,113,.07); } .item-row .rm:hover { color:#FCA5A5; border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.15); } /* ---------- 모달 ---------- */ .modal-bg { position:fixed; inset:0; z-index:50; display:none; background:rgba(4,6,10,.74); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); align-items:center; justify-content:center; } .modal-bg.on { display:flex; animation:fadein .2s ease both; } @keyframes fadein { from{opacity:0} to{opacity:1} } .modal { background:var(--ink-700); border:1px solid var(--line-hi); border-radius:var(--r-lg); width:400px; max-width:92vw; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:rise .32s cubic-bezier(.22,1,.36,1) both; } .modal-wide { width:760px; } .modal h3 { font-size:15px; font-weight:600; color:var(--txt-hi); padding:18px 22px; border-bottom:1px solid var(--line); } .modal .m-body { padding:20px 22px; max-height:64vh; overflow:auto; } .modal-wide .m-body { padding:0; } .modal-wide .m-body table { min-width:0; } .modal-wide .m-body > .muted { display:block; padding:24px 22px; } .modal .m-body .fld { margin-bottom:14px; } .modal .m-foot { padding:14px 22px 20px; display:flex; gap:8px; justify-content:flex-end; } .modal .m-note { font-size:12.5px; color:var(--txt-lo); margin-bottom:14px; } /* ---------- 목록 행 액션 버튼 — 가로가 아닌 세로로 쌓기 ---------- */ td.row-actions { white-space:nowrap; width:104px; } td.row-actions .btn { display:block; width:100%; margin-bottom:5px; text-align:center; } td.row-actions .btn:last-child { margin-bottom:0; } /* ============================================================ 업체 목록 — 5열 구성 상품·금액을 한 칸에 짝지어 넣고 상태는 업체명 옆으로 올려, 운영 채널(구분+주소)이 들어갈 폭을 확보한다 ============================================================ */ /* 업체 목록 — 6행만 보이고 나머지는 스크롤 (가로는 표가 넓어 그대로 둔다) */ .scrollbox.complist-scroll { max-height:none; overflow:auto; } /* 열 폭을 내용에 맡기면 업체마다 칸 너비가 들쭉날쭉해지므로 비율로 고정한다 */ .panel .comp-table { min-width:1040px; table-layout:fixed; } /* .panel table 의 600px 을 이겨야 함 */ .comp-table th:nth-child(1) { width:19%; } /* 업체명 */ .comp-table th:nth-child(2) { width:29%; } /* 진행 채널·견적금액 */ .comp-table th:nth-child(3) { width:30%; } /* 운영 채널 */ .comp-table th:nth-child(4) { width:13%; } /* 계약 기간 */ .comp-table th:nth-child(5) { width:9%; } /* 액션 */ .comp-table td { vertical-align:top; padding:16px; } /* 행 높이가 내용에 따라 달라지므로 경계를 확실히 세운다 */ .comp-table tbody td { border-top:2px solid var(--line-hi); } .comp-table tbody tr:first-child td { border-top:none; } /* 열 구분선 — 행이 길어져도 어느 칸을 보고 있는지 놓치지 않게 */ .comp-table td + td, .comp-table th + th { border-left:1px solid var(--line); } /* 업체명 칸에 옅은 배경을 줘 행의 시작점을 고정 */ .comp-table td.c-name { background:rgba(255,255,255,.022); } .comp-table tbody tr:hover > td.c-name { background:rgba(124,156,255,.09); } /* 업체명 칸 — 상호명 / 마크(진행여부·D-day) / 담당자 를 줄바꿈 없이 3단 고정 */ .c-name .cn-name b { color:var(--txt-hi); font-size:14px; } .c-name .cn-badges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:7px 0 6px; } /* 제목줄 안 검색창은 오른쪽 끝으로 */ .panel > h2 #compSearch { margin-left:auto; } .c-term { white-space:nowrap; font-variant-numeric:tabular-nums; line-height:26px; } .c-term .btn { margin-top:6px; } /* 진행 채널 · 견적금액 — 채널명 / 수량 / 금액을 열맞춤 한 줄 높이를 운영 채널과 동일(26px)하게 맞춰, 좌우 칸의 줄이 같은 선상에 놓이게 한다 */ /* baseline 정렬은 글자 크기가 다른 칸끼리 행 높이를 늘려 오른쪽 운영 채널과 줄이 어긋난다 → center */ .item-lines { display:grid; grid-template-columns:1fr auto auto; gap:0 10px; align-items:center; } .item-lines .il { display:contents; } .item-lines .il-n, .item-lines .il-q, .item-lines .il-p { line-height:26px; } /* 채널명이 길어도 줄바꿈하지 않고 말줄임 — 모든 줄 높이를 26px로 고정하기 위함 (전체 이름은 마우스를 올리면 표시) */ .item-lines .il-n { color:var(--txt); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .item-lines .il-q { color:var(--txt-lo); font-size:12.5px; white-space:nowrap; } .item-lines .il-p { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; } .item-lines .il-sum .il-n, .item-lines .il-sum .il-p { color:var(--txt-hi); font-weight:700; padding-top:6px; margin-top:4px; border-top:1px solid var(--line); } .item-lines .il-sum .il-q { border-top:1px solid var(--line); margin-top:4px; } /* 마이너스(할인·차감) 금액은 색으로 구분 */ .item-lines .il-p.neg { color:#FB9C9C; } .item-row input.neg, .item-row .tt.neg { color:#FB9C9C; } /* 비고 버튼 — 내용이 있으면 점 표시로 한눈에 구분 */ .cell-memo { margin-top:10px; } .cell-memo .btn.has-memo { color:var(--accent-txt); border-color:var(--line-hi); } .cell-memo .btn.has-memo i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:5px; vertical-align:middle; } .memo-view { white-space:pre-wrap; line-height:1.75; color:var(--txt); font-size:13.5px; } /* 운영 채널 — [구분] 주소 를 한 줄씩 (줄 높이는 진행 채널과 동일하게 26px) */ .ch-lines { display:flex; flex-direction:column; } .ch-lines .chl { display:flex; align-items:center; gap:7px; min-width:0; min-height:26px; } .ch-lines .chl .bdg { flex-shrink:0; } .ch-lines .chl a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 폼: 운영 채널 입력 줄 (채널 구분 + 주소) */ .ch-head { display:flex; gap:8px; margin-bottom:6px; font-size:12px; color:var(--txt-lo); font-weight:600; letter-spacing:.02em; } .ch-head .ct { width:150px; flex-shrink:0; } .ch-head .cu { flex:1; } .ch-head .rmsp { width:33px; flex-shrink:0; } .ch-row { display:flex; gap:8px; margin-bottom:8px; align-items:center; } .ch-row .ct { width:150px; flex-shrink:0; } .ch-row .cu { flex:1; min-width:0; } .ch-row .ct, .ch-row .cu { padding:9px 12px; background:var(--ink-900); border:1px solid var(--line-hi); border-radius:var(--r-sm); color:var(--txt-hi); font-size:13.5px; font-family:inherit; transition:border-color .15s, box-shadow .15s; } .ch-row .cu::placeholder { color:var(--txt-dim); } .ch-row .ct:focus, .ch-row .cu:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .ch-row .rm { flex-shrink:0; color:#FB9C9C; border-color:rgba(248,113,113,.28); background:rgba(248,113,113,.07); } .ch-row .rm:hover { color:#FCA5A5; border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.15); } @media (max-width:1200px){ .ch-head .ct, .ch-row .ct { width:124px; } } /* ---------- 소형 인풋 (패널 헤더 내 검색 등) ---------- */ .mini-input { padding:6px 11px; width:200px; background:var(--ink-900); border:1px solid var(--line-hi); border-radius:var(--r-sm); color:var(--txt-hi); font-size:13px; font-family:inherit; transition:border-color .15s, box-shadow .15s; } .mini-input::placeholder { color:var(--txt-dim); } .mini-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* ---------- 다크 스크롤바 ---------- */ *::-webkit-scrollbar { width:10px; height:10px; } *::-webkit-scrollbar-track { background:transparent; } *::-webkit-scrollbar-thumb { background:#3E4C60; border-radius:99px; border:2px solid transparent; background-clip:content-box; } *::-webkit-scrollbar-thumb:hover { background:#556780; background-clip:content-box; } * { scrollbar-color:#3E4C60 transparent; scrollbar-width:thin; } @media (max-width:900px){ .kpis { grid-template-columns:repeat(2,1fr); } .form-grid { grid-template-columns:1fr; } .side { width:190px; } .main { padding:20px 16px; } } /* ============================================================ 체험단 — 방문 예정일 달력 + 그 날 체험인 명단 막대(기간)가 아니라 하루짜리 칩이라 날짜 칸 안에 직접 쌓는다 ============================================================ */ .tr-week .cd { min-height:104px; display:flex; flex-direction:column; gap:3px; align-items:flex-start; } .tr-week .cd-n { margin-bottom:1px; } .tchip { width:100%; display:flex; align-items:baseline; gap:5px; padding:2px 7px; border-radius:4px; cursor:pointer; font-size:11.5px; line-height:1.6; white-space:nowrap; overflow:hidden; background:var(--ink-600); color:var(--txt-hi); border-left:3px solid var(--line-hi); } .tchip b { font-weight:700; flex-shrink:0; } /* 신청일·방문일을 한 달력에 얹으므로 어느 쪽인지 한 글자로 구분한다 */ .tchip i, .tmark, .cal-legend b { font-style:normal; font-size:10px; font-weight:800; line-height:1; padding:2px 4px; border-radius:3px; flex-shrink:0; } .tag-a { background:rgba(154,167,187,.28); color:#DCE3EE; } .tag-v { background:rgba(251,191,36,.22); color:#F9D28E; } .cal-legend .lg-sep { color:var(--txt-dim); margin:0 4px 0 8px; } .cal-legend b { margin:0 3px 0 6px; } .kbdg { font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; border:1px solid var(--line-hi); color:var(--txt-lo); white-space:nowrap; } .kbdg.k-real { border-color:rgba(196,181,253,.4); color:#D5C9FE; } .kbdg.k-blog { border-color:rgba(124,156,255,.4); color:#C2D0FF; } .kbdg.k-sns { border-color:rgba(94,234,212,.4); color:#9DEEDF; } .dc-title .tel { font-size:13.5px; font-weight:600; color:var(--accent-txt); margin-left:6px; } .tr-method { font-size:13px; color:var(--txt); line-height:1.7; margin:2px 0 4px; } .tr-method b { color:var(--txt-lo); font-size:12px; font-weight:700; margin-right:7px; } .tchip span { color:var(--txt-lo); overflow:hidden; text-overflow:ellipsis; min-width:0; } .tchip.t-new { border-left-color:#9AA7BB; } .tchip.t-ok { border-left-color:#7C9CFF; } .tchip.t-visit { border-left-color:#FBBF24; } .tchip.t-done { border-left-color:#34D399; } .tchip.t-cancel { border-left-color:#F87171; opacity:.5; text-decoration:line-through; } .tmore { font-size:11px; color:var(--txt-lo); padding-left:3px; } .cal-legend .lg-new { background:#9AA7BB; } .cal-legend .lg-ok { background:#7C9CFF; } .cal-legend .lg-visit { background:#FBBF24; } .dcard.t-new { border-left-color:#9AA7BB; } .dcard.t-ok { border-left-color:#7C9CFF; } .dcard.t-visit { border-left-color:#FBBF24; } .dcard.t-done { border-left-color:#34D399; } .dcard.t-cancel { border-left-color:#F87171; } .tr-links { display:flex; gap:14px; flex-wrap:wrap; margin:2px 0 4px; font-size:12.5px; } .tr-links a { color:var(--accent-txt); } @media (max-width:900px){ .tr-week .cw-days { min-width:700px; } } /* ============================================================ 입금 리스트 — 숫자를 세로로 훑는 표라 오른쪽 정렬 + 등폭 숫자가 핵심 ============================================================ */ .kpi .hint { font-size:12px; color:var(--txt-lo); margin-top:7px; line-height:1.5; } .kpi-warn { border-color:rgba(248,113,113,.3); } .kpi-warn .n { color:#FCA5A5; } .scrollbox.pay-scroll { max-height:none; overflow-y:auto; overflow-x:auto; } .panel .pay-table { width:100%; min-width:940px; border-collapse:collapse; } .pay-table th, .pay-table td { padding:11px 12px; font-size:13px; border-bottom:1px solid var(--line); } .pay-table thead th { position:sticky; top:0; z-index:2; background:var(--ink-600); font-size:12px; font-weight:700; color:var(--txt-lo); text-align:left; white-space:nowrap; } .pay-table .r, .pay-table th.r { text-align:right; font-variant-numeric:tabular-nums; } .pay-table .nowrap { white-space:nowrap; } .pay-table tbody tr { cursor:pointer; transition:background .13s; } .pay-table tbody tr:hover { background:rgba(255,255,255,.035); } .pay-table tbody tr.on { background:rgba(124,156,255,.13); box-shadow:inset 3px 0 0 var(--accent); } .pay-table tbody tr.p-over { box-shadow:inset 3px 0 0 #F87171; } .pay-table tbody tr.p-over.on { box-shadow:inset 3px 0 0 #F87171, inset 0 0 0 99em rgba(124,156,255,.10); } .pay-table .pt-name { font-weight:700; color:var(--txt-hi); white-space:nowrap; } .pay-table .pt-prod { display:block; font-size:11.5px; font-weight:400; color:var(--txt-lo); margin-top:2px; } .pay-table .dim { color:var(--txt-dim); } .pay-table .spot { color:#F9D28E; } .pay-table .unpaid { color:#FCA5A5; } .pay-table .dday { margin-left:6px; font-size:11.5px; color:#FCA5A5; font-weight:700; } /* ---------- 상세: 견적 · 스팟 · 입금을 나란히 ---------- */ .pd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .pd-col > h3 { font-size:13.5px; font-weight:700; color:var(--txt-hi); margin:0 0 11px; } .pd-col > h3 .muted { font-size:11.5px; font-weight:400; margin-left:6px; } .mini-table { width:100%; border-collapse:collapse; } .mini-table td { padding:7px 8px; font-size:12.5px; border-bottom:1px solid var(--line); vertical-align:top; } .mini-table td.r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .mini-table td.x { width:26px; text-align:right; padding-left:0; } .mini-table .dim { color:var(--txt-dim); } .mini-table .got { color:#8AEFB4; } .mini-table tr.tot td { font-weight:700; color:var(--txt-hi); border-bottom:none; border-top:1px solid var(--line-hi); } .mini-table tr.tot.bad td { color:#FCA5A5; } .mini-table tr.tot.good td { color:#8AEFB4; } .lnk-x { border:none; background:none; color:var(--txt-dim); cursor:pointer; font-size:12px; padding:2px 4px; line-height:1; border-radius:4px; } .lnk-x:hover { color:#FCA5A5; background:rgba(248,113,113,.12); } .pd-add, .pd-edit { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:12px; } .pd-add .mini-input, .pd-edit .mini-input { flex:1 1 120px; min-width:0; } .pd-add .mini-input.amt, .pd-edit .mini-input { text-align:right; font-variant-numeric:tabular-nums; } .pd-add .mini-input:not(.amt) { text-align:left; } .pd-edit label { font-size:12px; color:var(--txt-lo); font-weight:600; flex:0 0 auto; } @media (max-width:1200px){ .pd-grid { grid-template-columns:1fr; } } /* ============================================================ 마케팅 기록 — 수집된 글 목록 (여기서 우리 실적이 아닌 건을 뺀다) ============================================================ */ .scrollbox.wc-scroll { max-height:none; overflow-y:auto; overflow-x:auto; } .panel .wc-table { width:100%; min-width:900px; border-collapse:collapse; table-layout:fixed; } .wc-table th, .wc-table td { padding:10px 12px; font-size:13px; border-bottom:1px solid var(--line); vertical-align:middle; } .wc-table thead th { position:sticky; top:0; z-index:2; background:var(--ink-600); font-size:12px; font-weight:700; color:var(--txt-lo); text-align:left; white-space:nowrap; } .wc-table th:nth-child(1), .wc-table td:nth-child(1) { width:104px; } .wc-table th:nth-child(2), .wc-table td:nth-child(2) { width:124px; } .wc-table th:nth-child(4), .wc-table td:nth-child(4) { width:130px; } .wc-table th:nth-child(5), .wc-table td:nth-child(5) { width:210px; } .wc-table th:nth-child(6), .wc-table td:nth-child(6) { width:132px; text-align:right; } .wc-table .nowrap { white-space:nowrap; } .wc-table tbody tr:hover { background:rgba(255,255,255,.03); } .wc-t { color:var(--txt-hi); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wc-u { color:var(--accent-txt); font-size:12.5px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .src-b { display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; margin-right:4px; border-radius:20px; background:var(--ink-900); color:var(--txt-lo); border:1px solid var(--line); } .wc-table tr.excl { opacity:.62; } .wc-table tr.excl .wc-t { text-decoration:line-through; } .btn.on { background:var(--ink-600); color:var(--txt-hi); border-color:var(--line-hi); } .btn i { font-style:normal; font-weight:800; color:var(--accent-txt); margin-left:5px; } /* ============================================================ 플레이스 관측 — 숫자 하나보다 '흐름'이 먼저 읽혀야 하는 표 ============================================================ */ .fld.full2 { grid-column:span 2; } .scrollbox.q-scroll { max-height:none; overflow-y:auto; overflow-x:auto; } .panel .q-table { width:100%; min-width:960px; border-collapse:collapse; } .q-table th, .q-table td { padding:11px 12px; font-size:13px; border-bottom:1px solid var(--line); } .q-table thead th { position:sticky; top:0; z-index:2; background:var(--ink-600); font-size:12px; font-weight:700; color:var(--txt-lo); text-align:left; white-space:nowrap; } .q-table .c, .q-table th.c { text-align:center; } .q-table .nowrap { white-space:nowrap; text-align:right; } .q-table tbody tr { cursor:pointer; transition:background .13s; } .q-table tbody tr:hover { background:rgba(255,255,255,.035); } .q-table tbody tr.on { background:rgba(124,156,255,.13); } .q-table tbody tr.q-top { box-shadow:inset 3px 0 0 #34D399; } .q-table tbody tr.q-out { box-shadow:inset 3px 0 0 #F87171; } .q-comp { font-size:12.5px; color:var(--txt-lo); white-space:nowrap; } .q-kw { font-weight:700; color:var(--txt-hi); } .q-kw .q-pn { display:block; font-size:11.5px; font-weight:400; color:var(--txt-dim); margin-top:2px; } .q-r { font-size:15px; font-variant-numeric:tabular-nums; color:var(--txt-hi); } .q-r.hot { color:#8AEFB4; } .q-none { font-size:12.5px; color:#FCA5A5; } .q-up { color:#8AEFB4; font-weight:700; } .q-dn { color:#FCA5A5; font-weight:700; } .q-table .dim { color:var(--txt-dim); } .spark { display:block; overflow:visible; } .spark .sp-l { fill:none; stroke:#7C9CFF; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; } .spark .sp-5 { stroke:rgba(52,211,153,.30); stroke-width:1; stroke-dasharray:3 3; } .spark .sp-now { fill:#A8BEFF; } .spark .sp-out { fill:#F87171; } .qd-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:26px; } .qd-grid h3 { font-size:13.5px; font-weight:700; color:var(--txt-hi); margin:0 0 12px; } .qd-grid h3 .muted { font-size:11.5px; font-weight:400; margin-left:6px; } .qchart { display:block; } .qchart .qc-g { stroke:var(--line); stroke-width:1; } .qchart .qc-l { fill:none; stroke:#7C9CFF; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .qchart .qc-d { fill:#A8BEFF; } .qchart .qc-ax { fill:var(--txt-lo); font-size:10.5px; } .qchart .qc-out{ fill:#FCA5A5; font-size:10px; font-weight:700; } .mini-table tr.me td { color:#8AEFB4; font-weight:700; } .q-me { font-size:10.5px; font-weight:800; margin-left:7px; padding:2px 6px; border-radius:3px; background:rgba(52,211,153,.16); color:#8AEFB4; } .qd-meta { margin-top:12px; font-size:12.5px; color:var(--txt-lo); line-height:1.7; } .qd-meta a { color:var(--accent-txt); } .qd-meta.warn { color:#FDB8B8; } @media (max-width:1100px){ .qd-grid { grid-template-columns:1fr; } .fld.full2 { grid-column:auto; } } /* ---------- 플레이스 관측 이력 (잰 날짜·시각을 그대로) ---------- */ .q-at { font-size:12px; color:var(--txt-lo); font-variant-numeric:tabular-nums; white-space:nowrap; } .qd-h { font-size:13.5px; font-weight:700; color:var(--txt-hi); margin:26px 0 12px; } .qd-h .muted { font-size:11.5px; font-weight:400; margin-left:6px; } .scrollbox.qlog-scroll { max-height:296px; overflow-y:auto; overflow-x:auto; } .qlog-table { width:100%; min-width:560px; border-collapse:collapse; } .qlog-table th, .qlog-table td { padding:8px 12px; font-size:12.5px; border-bottom:1px solid var(--line); } .qlog-table thead th { position:sticky; top:0; z-index:2; background:var(--ink-600); font-size:11.5px; font-weight:700; color:var(--txt-lo); text-align:left; white-space:nowrap; } .qlog-table .c, .qlog-table th.c { text-align:center; } .qlog-table .nowrap { white-space:nowrap; } .qlog-table .dim { color:var(--txt-dim); } .qlog-table b { color:var(--txt-hi); font-variant-numeric:tabular-nums; } /* 날짜가 바뀌는 줄에 선을 그어 하루 단위가 눈에 잡히게 */ .qlog-table tr.d-new td { border-top:1px solid var(--line-hi); } .qlog-table tr:first-child td { border-top:none; } .qlog-1 { color:var(--txt-lo); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; } /* ============================================================ 업체 선택 콤보박스 — 쳐서 좁히는 자동완성 원래