반폭 목업 · 광고 관리자 캠페인 목록(PC)

계정 구조나 운영 점검 제안 장의 절반 칸에 광고 관리자 화면을 놓을 때. 옆 칸에는 캠페인 구조 표나 점검 원칙. 캠페인 4~5행과 합계 1행, 수치 4열 고정. 값 바꾸는 법: .rw 하나가 한 행: 상태 점(i.on=운영 중, i 만=중지), 캠페인 이름(9자 이내), 노출, 클릭, 클릭률, 전환 순서. 중지 행은 class="rw off". 합계 행(.rw.sum) 값은 위 행의 합과 맞춤. 창은 칸 폭과 높이를 그대로 채우고 글자는 12px 고정(행 간격과 막대만 늘어남). 아래 설명은 한 줄 30자 이내.

직접 제작. 검색·디스플레이 광고 관리자 화면의 공통 구성(캠페인·광고그룹·소재 탭, 기간 선택, 상태와 지표 열이 있는 표, 합계 행)을 참고. 화면 구성만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지·실제 계정명 미사용.

<div class="dk dkh dkh-m-adsmgr"><div class="dk-card"><p class="dk-lb">광고 관리자 · 캠페인 목록</p><div class="scr mock"><div class="cr"><i></i><i></i><i></i></div><div class="tb"><p><b>캠페인</b><span>광고그룹</span><span>소재</span></p><em>최근 7일</em></div><div class="gr"><div class="rw hd"><span class="d"></span><span>캠페인</span><span class="n">노출</span><span class="n">클릭</span><span class="n">클릭률</span><span class="n">전환</span></div><div class="rw"><span class="d"><i class="on"></i></span><span>브랜드 검색</span><span class="n">48.2만</span><span class="n">1.9만</span><span class="n">3.9%</span><span class="n">412</span></div><div class="rw"><span class="d"><i class="on"></i></span><span>일반 검색 구매</span><span class="n">126만</span><span class="n">2.1만</span><span class="n">1.7%</span><span class="n">286</span></div><div class="rw"><span class="d"><i class="on"></i></span><span>쇼핑 상품 노출</span><span class="n">88.4만</span><span class="n">1.6만</span><span class="n">1.8%</span><span class="n">301</span></div><div class="rw"><span class="d"><i class="on"></i></span><span>영상 조회 확보</span><span class="n">210만</span><span class="n">0.8만</span><span class="n">0.4%</span><span class="n">24</span></div><div class="rw off"><span class="d"><i></i></span><span>재방문 유도</span><span class="n">31.5만</span><span class="n">0.6만</span><span class="n">1.9%</span><span class="n">118</span></div><div class="rw sum"><span class="d"></span><span>합계</span><span class="n">504.1만</span><span class="n">7.0만</span><span class="n">1.4%</span><span class="n">1,141</span></div></div></div><p class="cap"><b>화면 구성</b>상태, 노출, 클릭, 클릭률, 전환 열 · 구성 예시</p></div></div>

.dkh-m-adsmgr .dk-card{display:flex;flex-direction:column;padding:18px 22px}
.dkh-m-adsmgr .dk-lb{flex:none;margin:0 0 8px}
.dkh-m-adsmgr .scr{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--card);font-size:12px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.dkh-m-adsmgr .scr b{font-weight:700}
.dkh-m-adsmgr .cr{flex:none;height:14px;background:var(--g1);display:flex;align-items:center;gap:4px;padding:0 8px}
.dkh-m-adsmgr .cr i{width:5px;height:5px;border-radius:50%;background:var(--g3)}
.dkh-m-adsmgr .cap{flex:none;margin:8px 0 0;font-size:var(--f-cap);line-height:1.5;color:var(--mu)}
.dkh-m-adsmgr .cap b{color:var(--ink2);margin-right:10px}
.dkh-m-adsmgr .tb{flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:1px solid var(--line)}
.dkh-m-adsmgr .tb p{margin:0;display:flex;gap:14px;color:var(--mu)}
.dkh-m-adsmgr .tb p b,.dkh-m-adsmgr .tb p span{padding:6px 0 4px;border-bottom:2px solid transparent}
.dkh-m-adsmgr .tb p b{border-bottom-color:var(--ink)}
.dkh-m-adsmgr .tb em{font-style:normal;color:var(--mu);border:1px solid var(--line2);border-radius:9px;padding:0 8px}
.dkh-m-adsmgr .gr{flex:1;min-height:0;display:grid;grid-template-rows:repeat(7,minmax(18px,1fr))}
.dkh-m-adsmgr .rw{display:grid;grid-template-columns:22px minmax(0,1fr) 56px 48px 48px 46px;align-items:center;padding:0 12px 0 8px;border-bottom:1px solid var(--line);color:var(--ink2)}
.dkh-m-adsmgr .rw span.n{text-align:right;font-variant-numeric:tabular-nums}
.dkh-m-adsmgr .rw span:nth-child(2){color:var(--ink);font-weight:600}
.dkh-m-adsmgr .rw .d{display:flex;justify-content:center}
.dkh-m-adsmgr .rw .d i{width:8px;height:8px;border-radius:50%;background:var(--g2)}
.dkh-m-adsmgr .rw .d i.on{background:var(--ok)}
.dkh-m-adsmgr .rw.hd{background:var(--soft);color:var(--mu)}
.dkh-m-adsmgr .rw.hd span:nth-child(2){color:var(--mu);font-weight:400}
.dkh-m-adsmgr .rw.off,.dkh-m-adsmgr .rw.off span:nth-child(2){color:var(--mu)}
.dkh-m-adsmgr .rw.sum{background:var(--soft);border-bottom:0;color:var(--ink);font-weight:700}