/* 진행상황 관리보드(칸반) 전용 스타일. board.html 과 index.html(대시보드) 이 같은 칸반을 쓰므로 한 곳에 모아 둔다. */ .wrap { max-width: 1180px; margin: 0 auto; } .board-shell { width: fit-content; max-width: 100%; } .board-title-row { display: flex; align-items: center; width: 100%; margin-bottom: 12px; } h1.page-title { margin: 0; } .board-toolbar { display: flex; gap: 8px; margin-left: auto; } .board-toolbar .add-lead-btn, .board-toolbar .bin-box, .board-toolbar .reject-chip { width: auto; white-space: nowrap; padding: 6px 12px; } .board-outer { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card-bg); width: fit-content; max-width: 100%; } .board-scroll { display: flex; overflow-x: auto; } .lane { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); height: 560px; padding: 10px 7px; } .lane:last-child { border-right: none; } .lane-sched { width: 150px; } .lane-header { font-size: 11.5px; font-weight: 700; color: var(--text); text-align: center; padding-bottom: 8px; border-bottom: 2px solid var(--border); margin-bottom: 8px; height: 58px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .lane-count { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); margin-top: 1px; } .lane-cards { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; } .lane-cards.drop-hover { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 6px; } .lane-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; } a.kcard { display: block; width: 100%; height: 52px; box-sizing: border-box; overflow: hidden; background: var(--accent-soft); border: 1px solid rgba(94,106,210,0.28); border-radius: 7px; padding: 4px 6px; cursor: pointer; text-decoration: none; flex-shrink: 0; } a.kcard, a.kcard * { text-decoration: none; } a.kcard:hover { border-color: var(--accent); background: var(--overlay-highlight); } a.kcard.dragging { opacity: 0.4; } /* ── 광고일정 레인 ── 핵심: 일정 박스 높이(52px)와 줄 간격(6px)이 광고중 카드와 완전히 같아야 같은 줄에 나란히 놓인다. 이 값이 어긋나면 아래로 갈수록 밀린다. 그래서 a.kcard 의 height 를 바꾸면 .sbox 도 반드시 같이 바꿔야 한다. */ .sbox { height: 52px; /* a.kcard 와 동일 */ box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; gap: 4px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-dark); border-radius: 7px; padding: 4px 6px; font-size: 9.5px; line-height: 1.32; font-weight: 700; overflow: hidden; } .sbox-arrow { font-size: 11px; flex-shrink: 0; } .sbox-body { min-width: 0; } .sbox-body > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sbox-dday { opacity: 0.8; } /* 짝이 없는 카드 자리 — 줄을 맞추기 위한 빈 칸 */ .sbox-empty { height: 52px; box-sizing: border-box; flex-shrink: 0; } /* 광고사별 색 (달력과 같은 색을 씁니다) */ .sbox.ag-jeio { border-color: #ea580c; background: #fff3e9; color: #9a3412; } .sbox.ag-leader { border-color: #2563eb; background: #e9f1ff; color: #1a3fa8; } /* 마감이 지난 일정(「마감 N일 지남」)은 광고사 색과 상관없이 글씨 전부 회색. 배경·테두리는 그대로. */ .sbox.sbox-over, .sbox.sbox-over .sbox-dday { color: #6b7280; opacity: 1; } .sbox.sbox-over .sbox-over-word { color: #dc2626; } /* 「마감 N일 지남」의 「마감」 글자만 빨강 */ .kcard-name-row { display: flex; align-items: center; gap: 3px; overflow: hidden; } .kcard-name { font-size: 10.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kcard-pos { font-size: 8px; font-weight: 600; color: var(--accent-dark); background: rgba(255,255,255,0.5); border-radius: 3px; padding: 0px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46px; flex-shrink: 0; } .kcard-site { font-size: 9.5px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kcard-phone { font-size: 8.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 심사신청 가져오기 — 새로 들어온 신청이 있을 때만 나타난다 */ .screen-sync-btn { background:#fff7ed; border:1px solid #fdba74; color:#9a3412; font-size:12px; font-weight:700; border-radius:8px; padding:6px 12px; cursor:pointer; white-space:nowrap; } .screen-sync-btn:hover { background:#ffedd5; } .screen-sync-btn:disabled { opacity:.6; cursor:default; } .add-lead-btn, .bin-box, .reject-chip { border-radius: 7px; padding: 4px 6px; font-size: 10.5px; font-weight: 700; line-height: 1.35; cursor: pointer; text-align: center; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-dark); } .add-lead-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; } .add-lead-btn:hover, .bin-box:hover, .reject-chip:hover { background: var(--overlay-highlight); } .bin-box.drop-hover { outline: 2px dashed currentColor; outline-offset: 2px; } .reject-chip.drop-hover { outline: 2px dashed var(--accent); outline-offset: 2px; } .sched-item { position: relative; color: #fff; border-radius: 7px; padding: 5px 8px 5px 10px; font-size: 8.5px; font-weight: 700; text-align: center; line-height: 1.55; margin-bottom: 6px; } .sched-arrow { position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .sched-dday { font-size: 10px; } .longwait-row { margin-top: 14px; display: flex; align-items: flex-start; gap: 8px; } .longwait-label { width: 66px; flex-shrink: 0; background: var(--agency-b); color: #fff; border-radius: 7px; padding: 8px 6px; font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.4; } .longwait-cards { display: flex; gap: 6px; flex-wrap: wrap; } .addlead-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; background: var(--backdrop); overflow-y: auto; } .addlead-page { max-width: 420px; width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .page-topbar-mini { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .addlead-body { padding: 20px 22px; } .btn-create-lead { width: 100%; padding: 13px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; } .btn-create-lead:hover { background: var(--accent-dark); } .or-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--text-faint); font-size: 11px; } .or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); } .search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg); } .search-box input { flex: 1; border: none; background: none; outline: none; font-size: 13px; color: var(--text); font-family: inherit; } .search-results { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .search-result-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 12.5px; flex-wrap: wrap; } .search-add-btn { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--accent); border: none; border-radius: 6px; padding: 5px 11px; cursor: pointer; } .new-lead-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .new-lead-form input, .new-lead-form select, .new-lead-form textarea { padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--card-bg); color: var(--text); font-family: inherit; } .new-lead-form textarea { min-height: 56px; resize: vertical; } .status-msg { font-size: 12px; margin-top: 8px; min-height: 16px; } .status-msg.err { color: var(--err); } .status-msg.ok { color: var(--ok); } .dropedit-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--backdrop); } .dropedit-page { max-width: 300px; width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .dropedit-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .dropedit-body label { font-size: 11px; color: var(--text-muted); font-weight: 600; } .dropedit-body textarea, .dropedit-body select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; background: var(--bg); color: var(--text); font-family: inherit; } .dropedit-body textarea { min-height: 60px; resize: vertical; } .dropedit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; } /* ══════════════════════════════════════════════════════════════════════════ 여기 아래 규칙은 전부 @media (max-width: 640px) 안에 있습니다. = "화면 가로가 640px 이하일 때(=폰)만 켜라" 라는 뜻입니다. 데스크탑(641px 이상)에서는 한 줄도 켜지지 않으므로 지금 보드는 그대로입니다. 위쪽의 기존 규칙도 한 줄도 고치지 않았습니다. 아래에 붙이기만 했습니다. 폰에서 바뀌는 것 세 가지 ① 6칸이 나란히 → 위에 「칸 이름 알약 탭」, 아래에 고른 칸 하나만 ② 카드가 손가락에 맞게 커지고, 카드마다 「옮기기」 버튼이 생김 ③ 옆에 나란히 붙던 「광고일정 레인」은 감추고, 그 내용을 광고중 카드 안에 넣음 ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* ── ① 틀 ─────────────────────────────────────────────────────── 데스크탑은 보드 폭을 "내용만큼"(fit-content)으로 잡아 두는데, 폰에서는 화면 폭을 꽉 채워야 카드가 커집니다. */ .board-shell, .board-outer { width: auto; max-width: 100%; } .board-title-row { flex-wrap: wrap; gap: 8px; } /* 제목과 버튼줄이 겹치지 않게 */ .board-toolbar { margin-left: 0; flex-wrap: wrap; } .board-scroll { display: block; overflow-x: visible; } /* 가로로 늘어놓지 않는다 */ /* ── ② 칸 이름 알약 탭 ────────────────────────────────────────── board.js 가 만든