@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@300;400;500;600;700&family=Noto+Serif+KR:wght@500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap'); /* ============================================================ PUPLECOVE 리포트 테마 메인 페이지(sign/main_puplecove.php)의 에디토리얼 컨셉을 로그인 후 화면에 이식한다. 이 파일은 puplecove.com 에서만 로드된다. - 토큰은 메인의 --pc-* 와 동일하게 유지 (색 변경 시 양쪽 함께 수정) - daterangepicker 는 직속으로 붙으므로 스코프 없이 지정 ============================================================ */ :root { --pc-purple: #9c33f2; --pc-purple-deep: #840fe3; --pc-purple-soft: #f4edfd; --pc-purple-tint: #faf7ff; --pc-cyan: #78ddff; --pc-ink: #1a1523; --pc-ink-soft: #5f596f; --pc-line: #e7e2ef; --pc-rgb: 156, 51, 242; /* 테이블 보더 — 메인 컬러(config/domain.php primary_color #9c33f2) 기반. 셀 구분선은 옅게, 헤더 하단 룰만 원색으로 앵커를 준다. */ --pc-line-brand: rgba(156, 51, 242, 0.16); --font-serif: 'Playfair Display', 'Noto Serif KR', serif; --font-sans: 'Poppins', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; /* 검색행 컨트롤 높이 — 입력/셀렉트/버튼을 같은 값으로 묶어 높이를 맞춘다 */ --pc-ctl-h: 44px; --pc-ctl-h-sm: 37px; /* 검색행 블록 너비 — 한 줄에 들어가도록 합계를 관리할 것 (캠페인 + 날짜 + 채널 + 조회 + 다운로드 버튼이 같은 행을 공유한다) */ --pc-camp-w: 300px; /* 캠페인 전환 셀렉트 — 캠페인명이 길어 가장 넓게 */ --pc-date-w: 250px; /* 날짜(시작~종료) 블록 — 목록/상세 공통. 한 칸당 약 115px 이어야 'YYYY-MM-DD' 가 잘리지 않는다 */ --pc-search-w: 180px; /* 채널 셀렉트 — 채널코드가 짧아 좁혀도 충분 */ } /* ---------- 기본 타이포 ---------- 주의 — styles.css 가 body 폰트에 !important 를 걸어두어 그냥 지정하면 먹지 않는다. 한글 무게는 Noto Sans KR 이 100/300/400/500/700 만 로드되므로 600 대신 500·700 을 쓴다 (600 을 쓰면 브라우저가 합성해 획이 뭉갠다). */ body, body .table, body .btn, body .form-control, body .form-select { font-family: var(--font-sans) !important; } body { color: var(--pc-ink); letter-spacing: -0.01em; word-break: keep-all; } .body-wrapper { background: transparent; } /* 화면 제목 — 메인의 세리프 헤드라인 */ .page-title, .card-title, h1, h2, h3, h4, h5 { font-family: var(--font-serif); color: var(--pc-ink); letter-spacing: -0.02em; word-break: keep-all; } /* ---------- 브레드크럼 카드 숨김 ---------- layout.php 가 모든 화면 상단에 찍는 '캠페인 리포트 > OO' 카드. 상세는 바로 아래 캠페인 헤더(#5 쿠팡)와 중복이고, 목록은 제목이 비어 빈 카드로 남는다. 이 파일은 puplecove.com 에서만 로드되므로 다른 도메인은 영향 없음. */ .body-wrapper .card:has(nav[aria-label="breadcrumb"]) { display: none !important; } /* 브레드크럼 자체 톤 (숨김을 해제할 경우 대비) */ .card.bg-info-subtle { background: #fff !important; border: 1px solid var(--pc-line); border-radius: 0; } .breadcrumb { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pc-ink-soft); } .breadcrumb a { color: var(--pc-ink-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--pc-purple); } .breadcrumb .active { color: var(--pc-purple); } /* ---------- 카드 ---------- 메인은 라운드를 쓰지 않는다(원형 아이콘 제외). 보더도 두지 않는다 — 배경(--pc-purple-tint) 위 흰 면만으로 블록이 분리된다. */ .card { border: none; border-radius: 0; box-shadow: none; background: #fff; } /* ---------- 검색 영역 ---------- 높이는 --pc-ctl-h(-sm) 로 고정해 버튼과 정확히 맞춘다. textarea 는 고정 높이를 주면 안 되므로 제외. */ .form-control, .form-select { border: 1px solid var(--pc-line); border-radius: 0; color: var(--pc-ink); font-family: var(--font-sans); font-size: 14px; padding: 10px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-control:not(textarea), .form-select { height: var(--pc-ctl-h); padding-top: 0; padding-bottom: 0; line-height: calc(var(--pc-ctl-h) - 2px); } .form-control-sm:not(textarea), .form-select-sm { height: var(--pc-ctl-h-sm); padding-left: 12px; padding-right: 12px; font-size: 13px; line-height: calc(var(--pc-ctl-h-sm) - 2px); } .form-control:focus, .form-select:focus { border-color: var(--pc-purple); box-shadow: 0 0 0 3px rgba(var(--pc-rgb), 0.12); } .form-control::placeholder { color: #a49db4; } /* 검색 영역 좌우 여백 제거 — 카드 보더를 뺀 뒤 테이블이 카드 끝선까지 차므로, 검색행도 같은 끝선에서 시작해야 좌우가 맞는다. (.card-header 의 px-3 16px 패딩이 검색행만 16px 밀어내고 있었다) */ /* 주의 — 목록은 form 이 card-header 안에 있고(:has 로 매칭), 상세는 반대로 card-header 가 form 안에 있다. 두 구조를 모두 잡아야 한다. */ .card-header:has(#search_frm), #search_frm .card-header { /* px-3 유틸리티가 !important 라 같은 강도로 눌러야 한다 */ padding-left: 0 !important; padding-right: 0 !important; /* 템플릿 기본 회색 틴트(rgba(90,106,133,0.03)) 제거 — 본문과 같은 흰 면으로 */ background: transparent; } /* 시작일 ~ 종료일 분리 입력 (date_split = true) 날짜 블록과 채널 셀렉트를 --pc-search-w 하나로 묶어 너비를 맞춘다. 날짜 입력은 JS(nInputWidth)가 인라인 width 를 박으므로 !important 로 눌러 블록 안에서 균등 분할되게 한다. */ .date-split-wrap { width: var(--pc-date-w); max-width: 100%; } .date-split-wrap .form-control { text-align: center; flex: 1 1 0; width: auto !important; min-width: 0; /* 좌우 패딩을 줄여야 좁아진 칸에서도 날짜가 잘리지 않는다 */ padding-left: 4px; padding-right: 4px; } #search_frm select[name="channel_cd"] { width: var(--pc-search-w); max-width: 100%; } /* 캠페인 전환 셀렉트 — 캠페인명이 길어 날짜/채널보다 넓게 */ .camp-switch { width: var(--pc-camp-w); max-width: 100%; } .date-split-sep { color: var(--pc-ink-soft); font-family: var(--font-serif); font-size: 15px; line-height: 1; flex: 0 0 auto; } /* ---------- 버튼 ---------- 메인의 .pc-btn 을 그대로 따른다: 각진 모서리, 대문자, 자간 1.5px, 호버 시 살짝 떠오름. (메인은 padding 14px 30px 이지만 리포트는 밀도가 높아 한 단계 줄임) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--pc-ctl-h); /* 입력/셀렉트와 동일 높이 */ font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 0; padding: 0 26px; border: 1px solid transparent; transition: all 0.3s ease; } .btn:hover { transform: translateY(-2px); } .btn-sm { height: var(--pc-ctl-h-sm); font-size: 11px; letter-spacing: 1.2px; padding: 0 18px; } /* 달력 하단 버튼은 팝오버 안이라 높이를 별도로 낮춘다 */ .daterangepicker .drp-buttons .btn { height: 32px; padding: 0 14px; } .btn-primary { background: var(--pc-purple); border-color: var(--pc-purple); color: #fff; } /* 눌림/포커스/비활성까지 퍼플 유지 — 조회 클릭 중 블루가 드러나지 않게 */ .btn-primary:hover, .btn-primary:focus, .btn-primary:focus-visible, .btn-primary:active, .btn-primary.active, .btn-primary:disabled, .btn-primary.disabled { background: var(--pc-purple-deep); border-color: var(--pc-purple-deep); color: #fff; } .btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(var(--pc-rgb), 0.25); } .btn-outline-primary { color: var(--pc-purple); border-color: var(--pc-line); background: #fff; } .btn-outline-primary:hover { background: var(--pc-purple-soft); border-color: var(--pc-purple); color: var(--pc-purple-deep); } /* 헤더 로그아웃 — 메인 헤더의 로그인 링크(.pc-header__login)와 동일한 '보더 없는 밑줄 텍스트' 처리. .btn 의 높이/패딩/테두리를 모두 되돌린다. */ .header-logout { height: auto; padding: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pc-ink); background: transparent; border: none; border-bottom: 1px solid var(--pc-ink); border-radius: 0; } .header-logout:hover, .header-logout:focus { background: transparent; color: var(--pc-purple); border-bottom-color: var(--pc-purple); transform: none; } /* 다운로드 등 btn-success(민트) — 메인의 잉크 버튼(pc-btn--ink) 톤으로 통일 */ .btn-success { background: var(--pc-ink); border-color: var(--pc-ink); color: #fff; } .btn-success:hover, .btn-success:focus { background: #322b40; border-color: #322b40; color: #fff; } /* ---------- 테이블 (에디토리얼 룩) ---------- */ .table { font-family: var(--font-sans); font-size: 13px; color: var(--pc-ink); margin-bottom: 0; } /* 헤더 — 버튼(.btn-sm)과 동일한 폰트/자간/대문자 처리로 통일 */ .table > thead > tr > th { background: #fff; color: var(--pc-ink-soft); font-family: var(--font-sans); font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; padding: 16px 12px; /* 헤더 하단 룰 — 메인 컬러 원색으로 표의 시작선을 잡는다 */ border-bottom: 1px solid var(--pc-purple) !important; border-top: none; border-color: var(--pc-line-brand); white-space: nowrap; } .table > tbody > tr > td { padding: 14px 12px; border-color: var(--pc-line-brand); vertical-align: middle; /* styles.css 의 '.table > :not(caption) > * > * { font-size: 11px }' 가 .table{font-size:13px} 보다 특이도가 높아 본문이 11px 로 눌린다. 금액(14px)과 격차가 커지므로 여기서 다시 올린다. */ font-size: 13px; } /* table-nowrap 클래스가 붙어 있는데도 white-space 가 normal 로 계산돼 좁은 화면에서 '2026-08-01' 같은 값이 하이픈에서 두 줄로 깨진다. 의도대로 복구. */ .table.table-nowrap > :not(caption) > * > * { white-space: nowrap; } /* 카드 보더를 뺐으므로 테이블 좌우 바깥선도 함께 제거한다. 남겨두면 그게 외곽선처럼 보여 '보더를 뺀' 효과가 상쇄되고, 위쪽 검색행과 좌우 끝선이 어긋나 보인다. */ .table > :not(caption) > * > *:first-child { border-left: 0; } .table > :not(caption) > * > *:last-child { border-right: 0; } /* 숫자 컬럼 자릿수 정렬 */ .table td { font-variant-numeric: tabular-nums; } /* 금액 컬럼도 노출/클릭과 동일한 산세리프·크기로 통일한다. (세리프 숫자는 올드스타일 자형 탓에 행 간 금액 비교가 느려져 본문에는 쓰지 않는다. 세리프는 헤더에만 남겨 메인의 톤을 전달한다) */ .table td.postback_purchase_sales, .table td.postback_cancel_sales, .table td.postback_sales, .table td.media_budget { font-family: var(--font-sans); font-size: 13px; font-variant-numeric: tabular-nums; } .table > tbody > tr:hover > td { background: var(--pc-purple-tint); } /* 합계 행 — 퍼플 톤으로. 목록은 tr.total-row.bg-danger-subtle, 상세는 tr.bg-danger-subtle 만 쓰므로 둘 다 지정 */ .table tr.total-row, .table tr.total-row > td, .table tr.bg-danger-subtle, .table tr.bg-danger-subtle > td { background: var(--pc-purple-soft) !important; color: var(--pc-ink); font-weight: 700; } .table tr.total-row:hover > td, .table tr.bg-danger-subtle:hover > td { background: var(--pc-purple-soft) !important; } /* 데이터 없음 — 합계 행(total-row)도 colspan 을 쓰므로 반드시 제외할 것 */ .table .no-data, .table > tbody > tr:not(.total-row) > td[colspan]:only-child { color: var(--pc-ink-soft); font-family: var(--font-serif); font-style: italic; font-size: 15px; padding: 48px 12px; } /* 툴팁 — 기본값은 max-width 200px + word-break 미지정이라 한글이 '반영됩니 / 다.' 처럼 단어 중간에서 끊긴다. keep-all 로 교정하고 폭을 넓혀 줄 수를 줄인다. 색은 --bs-tooltip-bg 로 지정해야 말풍선 꼬리까지 따라온다. */ .tooltip { --bs-tooltip-bg: var(--pc-ink); --bs-tooltip-border-radius: 0; --bs-tooltip-max-width: 300px; --bs-tooltip-opacity: 1; } .tooltip-inner { max-width: 300px; padding: 10px 14px; font-family: var(--font-sans); font-size: 12px; line-height: 1.65; text-align: left; word-break: keep-all; border-radius: 0; } /* 컬럼 헤더 안내 아이콘 (취소 금액 등) */ .rpt-col-info { color: var(--pc-ink-soft); opacity: 0.55; font-size: 12px; cursor: help; vertical-align: middle; } .rpt-col-info:hover { opacity: 1; color: var(--pc-purple); } /* ---------- 페이지네이션 ---------- helpers/pagenation_helper.php 마크업 기준: .paging > ul > li (일반 페이지는 li > a, 현재 페이지는 li.page_on 텍스트) li.pre_01/.pre_02/.next_02/.next_01 (처음/이전/다음/마지막 화살표) ※ Bootstrap 의 .pagination/.page-link 는 이 화면에서 쓰이지 않는다. */ .paging ul { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .paging li { min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--pc-ink-soft); border-radius: 0; transition: background 0.2s ease, color 0.2s ease; } .paging li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 8px; color: inherit; text-decoration: none; } .paging li:not(.page_on):hover { background: var(--pc-purple-soft); color: var(--pc-purple-deep); } /* 라운딩 제거 — base 스타일이 li.page_on / li a 에 6px 을 걸어두어 .paging li 규칙만으로는 눌리지 않는다. 같은 대상에 직접 지정할 것. */ .paging li, .paging li a, .paging li.page_on { border-radius: 0 !important; } /* 이동 링크 — 각진 박스 + 메인 컬러 틴트 보더 (base 스타일이 회색 보더를 걸어두어 같은 대상에 직접 지정) */ .paging li a, .paging li.pre_01 a, .paging li.pre_02 a, .paging li.next_01 a, .paging li.next_02 a { background: #fff; /* base 스타일의 회색 보더가 더 구체적이라 !important 로 눌러야 한다 */ border: 1px solid var(--pc-line-brand) !important; } /* 페이지가 1개뿐이면 페이징 자체를 감춘다. 번호 링크는 class 없는

로 렌더링되고, 현재 페이지(li.page_on)와 화살표(li.pre_01 등)는 class 를 갖는다. → class 없는 li 가 있을 때만(= 2페이지 이상) 노출한다. 주의 1 — :not(:has(...)) 중첩 형태는 브라우저가 규칙째 버리므로 '기본 숨김 + :has() 로 노출' 순서로 쓸 것. 주의 2 — 주석 안에 별표+슬래시를 쓰면 주석이 거기서 끝나 다음 규칙이 통째로 버려진다. 와일드카드 표기를 주석에 넣지 말 것. */ .paging { display: none; } .paging:has(li:not([class])) { display: block; } .paging li:not(.page_on) a:hover { background: var(--pc-purple-soft); border-color: var(--pc-purple); color: var(--pc-purple-deep); } /* 현재 페이지 — 링크가 없는 li 라 li 자체에 칠한다 */ .paging li.page_on { background: var(--pc-purple); border: 1px solid var(--pc-purple); color: #fff; font-weight: 700; } /* 처음/이전/다음/마지막 화살표 */ .paging li.pre_01, .paging li.pre_02, .paging li.next_02, .paging li.next_01 { color: var(--pc-ink-soft); font-size: 11px; } /* ============================================================ 컴팩트 리포트 구성 (report_compact = true) 공용 뷰의 hode-* 클래스를 그대로 쓴다 — 클래스명은 hode 유래지만 지금은 컴팩트 구성 공용 마크업이다. (개명하려면 hode CSS 도 함께 수정 필요) ============================================================ */ /* 안내 문구 중복 제거 — 검색행 우측 '안내' 팝오버로 대체되므로 목록 위 원본은 숨김 */ body #list_wrap ul.notice { display: none !important; } body #list_wrap > form > .d-flex.pt-3, body #list_wrap form > .d-flex.pt-3.pb-0 { display: none !important; } /* 안내 버튼 + hover 팝오버 */ .rpt-notice-wrap { position: relative; display: inline-block; } .rpt-notice-popover { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--pc-line); border-radius: 0; box-shadow: 0 14px 36px rgba(var(--pc-rgb), 0.14), 0 2px 8px rgba(26, 21, 35, 0.06); padding: 14px 18px; width: max-content; min-width: 320px; max-width: calc(100vw - 24px); z-index: 1050; font-size: 12px; line-height: 1.6; color: var(--pc-ink-soft); text-align: left; white-space: nowrap; } .rpt-notice-wrap:hover .rpt-notice-popover, .rpt-notice-wrap:focus-within .rpt-notice-popover, .rpt-notice-wrap.show .rpt-notice-popover { display: block; } .rpt-notice-popover ul { margin: 0; padding: 0; list-style: none; } .rpt-notice-popover li { position: relative; padding: 5px 0 5px 14px; } /* 불릿 — 퍼플 점 */ .rpt-notice-popover li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--pc-purple); } /* ---------- 캠페인 정보 헤더 (#5 쿠팡 + 캠페인목록) ---------- 하단 여백은 row 의 12px 만 쓴다. (Bootstrap .card 의 margin-bottom 24px 이 더해져 36px 이 되고 있었다) */ .rpt-camp-info-row { margin-bottom: 12px; } .rpt-camp-info { margin-bottom: 0; } .rpt-camp-info { border: 1px solid var(--pc-line); border-radius: 0; background: #fff; } .rpt-camp-info .card-body { padding: 16px 22px !important; display: flex; align-items: center; gap: 12px; } .rpt-camp-info .rpt-camp-id { font-family: var(--font-serif); font-style: italic; font-size: 18px; font-weight: 600; color: var(--pc-purple); } .rpt-camp-info .rpt-camp-nm { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--pc-ink); letter-spacing: -0.02em; } .rpt-camp-info .rpt-camp-list-btn { margin-left: auto; } .rpt-loading { color: var(--pc-ink-soft); font-family: var(--font-serif); font-style: italic; } @media (max-width: 767px) { .rpt-camp-info .card-body { padding: 12px 14px !important; } .rpt-camp-info .rpt-camp-nm, .rpt-camp-info .rpt-camp-id { font-size: 15px; } .rpt-notice-popover { white-space: normal; min-width: 0; } /* 조회 버튼을 날짜 옆으로 올린다. Bootstrap 은 md 미만에서 .row > * 를 width:100% 로 만들어 각 컬럼이 한 줄씩 차지한다. 두 컬럼만 내용 폭으로 되돌리고, DOM 상 사이에 있는 채널 셀렉트보다 앞서도록 order 를 지정한다(안 하면 셀렉트가 남은 폭을 차지해 조회가 다음 줄로 밀린다). */ #search_frm .row > *:has(.date-split-wrap), #search_frm .row > *:has(#search) { width: auto; } #search_frm .row > *:has(.date-split-wrap) { order: -2; } #search_frm .row > *:has(#search) { order: -1; } } /* ============================================================ DATERANGEPICKER — 전면 재디자인 라이브러리가 직속에 마크업을 생성하므로 스코프 없이 지정한다. ============================================================ */ body .daterangepicker { font-family: var(--font-sans); border: 1px solid var(--pc-line); border-radius: 0; box-shadow: 0 18px 48px rgba(var(--pc-rgb), 0.16), 0 2px 8px rgba(26, 21, 35, 0.06); padding: 8px; background: #fff; color: var(--pc-ink); overflow: hidden; } /* 기본 테마의 말풍선 꼬리 제거 */ body .daterangepicker:before, body .daterangepicker:after { display: none; } /* ---------- 프리셋 범위 목록 ---------- */ body .daterangepicker .ranges { border-right: 1px solid var(--pc-line); padding: 10px 8px; margin: 0; } body .daterangepicker .ranges ul { width: 148px; padding: 0; margin: 0; } body .daterangepicker .ranges li { font-size: 13px; font-weight: 500; color: var(--pc-ink-soft); padding: 10px 14px; margin-bottom: 2px; border-radius: 0; transition: background 0.15s ease, color 0.15s ease; } body .daterangepicker .ranges li:hover { background: var(--pc-purple-tint); color: var(--pc-ink); } /* 활성 프리셋 — 솔리드 바 대신 소프트 틴트 + 퍼플 텍스트 */ body .daterangepicker .ranges li.active { background: var(--pc-purple-soft); color: var(--pc-purple-deep); font-weight: 700; } /* ---------- 달력 본체 ---------- */ body .daterangepicker .drp-calendar { padding: 14px 16px; max-width: none; } body .daterangepicker .drp-calendar.left { border-right: 1px solid var(--pc-line); } body .daterangepicker .calendar-table { border: none; background: transparent; padding: 0; } body .daterangepicker .calendar-table table { border-spacing: 2px; border-collapse: separate; } /* 월/연 셀렉트 + 이동 버튼 */ body .daterangepicker .calendar-table thead tr:first-child th { padding-bottom: 10px; font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--pc-ink); } body .daterangepicker .monthselect, body .daterangepicker .yearselect { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 0; padding: 4px 6px; background: #fff; } body .daterangepicker th.prev, body .daterangepicker th.next { border-radius: 50%; width: 30px; height: 30px; transition: background 0.15s ease; } body .daterangepicker th.prev:hover, body .daterangepicker th.next:hover { background: var(--pc-purple-soft); } body .daterangepicker th.prev span, body .daterangepicker th.next span { border-color: var(--pc-ink-soft); } /* 요일 헤더 */ body .daterangepicker .calendar-table thead tr:last-child th { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--pc-ink-soft); padding-bottom: 6px; } /* 날짜 셀 */ body .daterangepicker td { width: 34px; height: 34px; font-size: 13px; font-weight: 500; color: var(--pc-ink); border-radius: 50%; transition: background 0.15s ease, color 0.15s ease; } body .daterangepicker td.available:hover { background: var(--pc-purple-soft); color: var(--pc-purple-deep); } body .daterangepicker td.off, body .daterangepicker td.off.in-range, body .daterangepicker td.off.start-date, body .daterangepicker td.off.end-date { background: transparent; color: #c9c3d6; } body .daterangepicker td.disabled { color: #d9d4e2; text-decoration: none; } /* 오늘 — 시안 링 */ body .daterangepicker td.today:not(.active) { box-shadow: inset 0 0 0 1.5px var(--pc-cyan); font-weight: 600; } /* 선택 범위 — 사각 밴드로 이어지게, 양 끝만 원형 */ body .daterangepicker td.in-range { background: var(--pc-purple-soft); color: var(--pc-ink); border-radius: 0; } body .daterangepicker td.start-date, body .daterangepicker td.end-date, body .daterangepicker td.active, body .daterangepicker td.active:hover { background: var(--pc-purple); color: #fff; font-weight: 600; } body .daterangepicker td.start-date { border-radius: 50% 0 0 50%; } body .daterangepicker td.end-date { border-radius: 0 50% 50% 0; } body .daterangepicker td.start-date.end-date { border-radius: 50%; } /* ---------- 하단 버튼 영역 ---------- */ body .daterangepicker .drp-buttons { border-top: 1px solid var(--pc-line); padding: 12px 16px; } body .daterangepicker .drp-selected { font-size: 12px; color: var(--pc-ink-soft); font-variant-numeric: tabular-nums; } body .daterangepicker .drp-buttons .btn { padding: 7px 16px; font-size: 12px; } body .daterangepicker .applyBtn { background: var(--pc-purple); border-color: var(--pc-purple); } body .daterangepicker .applyBtn:hover { background: var(--pc-purple-deep); border-color: var(--pc-purple-deep); } body .daterangepicker .cancelBtn { background: #fff; border-color: var(--pc-line); color: var(--pc-ink-soft); } /* ============================================================ 모바일 — 달력이 헤더를 가리지 않도록 화면 하단 시트로 고정 (auto-apply 모드라 하단 버튼이 없으므로 시트 높이를 콘텐츠에 맡긴다) ============================================================ */ @media (max-width: 767px) { body .daterangepicker { position: fixed !important; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100%; max-width: 100%; border-radius: 0; border-bottom: none; box-shadow: 0 -12px 40px rgba(26, 21, 35, 0.18); padding: 8px 8px 20px; max-height: 88vh; overflow-y: auto; z-index: 1055; } /* 프리셋을 가로 스크롤 칩으로 전환 */ body .daterangepicker .ranges { border-right: none; border-bottom: 1px solid var(--pc-line); float: none; width: 100%; padding: 12px 12px 10px; } body .daterangepicker .ranges ul { width: 100%; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body .daterangepicker .ranges ul::-webkit-scrollbar { display: none; } body .daterangepicker .ranges li { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--pc-line); margin-bottom: 0; padding: 8px 14px; } body .daterangepicker .ranges li.active { border-color: var(--pc-purple); } /* 두 달을 세로로 쌓는다. 주의 — 오른쪽 달력을 숨기면 그 헤더에 있는 '다음 달' 버튼까지 사라져 앞으로 이동이 불가능해진다. 반드시 둘 다 노출할 것. */ body .daterangepicker .drp-calendar { float: none !important; width: 100%; max-width: 100%; padding: 14px 12px; } body .daterangepicker .drp-calendar.left { border-right: none; border-bottom: 1px solid var(--pc-line); } body .daterangepicker .calendar-table table { width: 100%; } /* 셀이 화면 폭에 맞춰 가로로 늘어난다(약 65×28). 이 상태에서 border-radius:50% 는 원이 아니라 타원이 되므로, 모바일에서는 알약 형태로 고정한다. height 대신 padding 으로 높이를 키워야 td 에 확실히 반영된다. */ body .daterangepicker td { width: auto; padding: 7px 0; font-size: 14px; border-radius: 0; } body .daterangepicker td.available:hover, body .daterangepicker td.today:not(.active), body .daterangepicker td.start-date.end-date { border-radius: 999px; } body .daterangepicker td.start-date { border-radius: 999px 0 0 999px; } body .daterangepicker td.end-date { border-radius: 0 999px 999px 0; } body .daterangepicker .drp-buttons { padding: 12px; } }