반폭 목업 · 네이버 모바일 검색 결과(파워링크 구역)

검색광고 제안 장의 절반 칸에 통합검색 상단 광고 구역을 놓을 때. 옆 칸에는 키워드 표나 입찰 원칙 글. 화면 1개와 번호 설명 3개 고정. 설명 제목 8자 이내, 내용 22자 이내. 값 바꾸는 법: SVG 안 <text> 문구만 교체(한 줄 9자 안팎, 넘으면 화면 밖으로 잘림). 번호 원(1~3)은 오른쪽 설명 li 와 짝. 설명은 li 의 b=제목, 뒤 글=내용. 화면은 칸 높이에 맞춰 비율대로 줄고 늘어남(칸 높이 300px 에서 화면 글자 12px). 사진·영상 자리는 회색 상자 유지.

직접 제작. 네이버 모바일 통합검색의 구성(검색창, 탭, 파워링크 구역, 그 아래 일반 결과)을 참고. 화면 구성만 참고, SVG 직접 제작. 로고·캡처 이미지·실제 계정명 미사용.

<div class="dk dkh dkh-m-nvsearch"><div class="dk-card"><p class="dk-lb">네이버 모바일 검색 · 파워링크 구역</p><div class="row"><div class="scr mock"><svg viewBox="0 0 142 236" preserveAspectRatio="xMidYMid meet" role="img" aria-label="nvsearch"><defs><clipPath id="mc-nvsearch"><rect x="3" y="3" width="136" height="230" rx="13"/></clipPath></defs><rect x="1.5" y="1.5" width="139" height="233" rx="14.5" style="fill:var(--card);stroke:var(--ink);stroke-width:3"/><g clip-path="url(#mc-nvsearch)"><g transform="translate(3,3)"><rect x="6" y="7" width="18" height="18" rx="4" style="fill:#03c75a"/><rect x="28" y="7" width="102" height="18" rx="9" style="fill:var(--card);stroke:#03c75a;stroke-width:1.5"/><text x="36" y="20.3" font-size="12" font-weight="600" text-anchor="start" style="fill:var(--ink)">거실 조명 추천</text><text x="8" y="44" font-size="12" font-weight="700" text-anchor="start" style="fill:#03c75a">전체</text><text x="40" y="44" font-size="12" font-weight="400" text-anchor="start" style="fill:var(--mu)">블로그</text><text x="82" y="44" font-size="12" font-weight="400" text-anchor="start" style="fill:var(--mu)">쇼핑</text><text x="114" y="44" font-size="12" font-weight="400" text-anchor="start" style="fill:var(--mu)">이미지</text><rect x="8" y="49" width="21" height="2" style="fill:#03c75a"/><line x1="0" y1="51.5" x2="136" y2="51.5" style="stroke:var(--line);stroke-width:1"/><text x="8" y="68" font-size="12" font-weight="700" text-anchor="start" style="fill:var(--ink)">파워링크</text><rect x="57" y="58" width="25" height="14" rx="3" style="fill:none;stroke:var(--line2);stroke-width:1"/><text x="69.5" y="68.5" font-size="12" font-weight="400" text-anchor="middle" style="fill:var(--mu)">광고</text><text x="8" y="85" font-size="12" font-weight="400" text-anchor="start" style="fill:var(--mu)">A 조명몰</text><text x="8" y="100" font-size="12" font-weight="700" text-anchor="start" style="fill:#0b53c1">거실 조명 기획전</text><rect x="8" y="106" width="104" height="5" rx="2.5" style="fill:var(--g1)"/><line x1="0" y1="117" x2="136" y2="117" style="stroke:var(--line);stroke-width:1"/><text x="8" y="129" font-size="12" font-weight="400" text-anchor="start" style="fill:var(--mu)">B 리빙</text><text x="8" y="144" font-size="12" font-weight="700" text-anchor="start" style="fill:#0b53c1">무선 스탠드 조명</text><rect x="8" y="150" width="88" height="5" rx="2.5" style="fill:var(--g1)"/><line x1="0" y1="161" x2="136" y2="161" style="stroke:var(--line);stroke-width:1"/><text x="8" y="173" font-size="12" font-weight="400" text-anchor="start" style="fill:var(--mu)">C 인테리어</text><text x="8" y="188" font-size="12" font-weight="700" text-anchor="start" style="fill:#0b53c1">조명 설치 상담</text><rect x="8" y="194" width="96" height="5" rx="2.5" style="fill:var(--g1)"/><line x1="0" y1="205" x2="136" y2="205" style="stroke:var(--line);stroke-width:1"/><text x="8" y="224" font-size="12" font-weight="700" text-anchor="start" style="fill:var(--ink)">블로그</text><circle cx="120" cy="16" r="8" style="fill:var(--ink);stroke:var(--card);stroke-width:1.5"/><text x="120" y="20.2" font-size="12" font-weight="700" text-anchor="middle" style="fill:var(--card)">1</text><circle cx="122" cy="66" r="8" style="fill:var(--ink);stroke:var(--card);stroke-width:1.5"/><text x="122" y="70.2" font-size="12" font-weight="700" text-anchor="middle" style="fill:var(--card)">2</text><circle cx="122" cy="219" r="8" style="fill:var(--ink);stroke:var(--card);stroke-width:1.5"/><text x="122" y="223.2" font-size="12" font-weight="700" text-anchor="middle" style="fill:var(--card)">3</text></g></g></svg></div><div class="nt"><ol><li><i>1</i><p><b>검색어</b>구매 의도 키워드 중심 편성</p></li><li><i>2</i><p><b>파워링크 구역</b>상단 3~5개, 제목 15자 이내</p></li><li><i>3</i><p><b>일반 결과</b>광고 아래 블로그, 쇼핑 순서</p></li></ol><p class="cap">구성 예시, 실제 소재 아님</p></div></div></div></div>

.dkh-m-nvsearch .dk-card{display:flex;flex-direction:column;padding:18px 22px}
.dkh-m-nvsearch .dk-lb{flex:none;margin:0 0 8px}
.dkh-m-nvsearch .row{flex:1;min-height:0;display:flex;align-items:stretch;gap:22px}
.dkh-m-nvsearch .scr{flex:none;height:100%;aspect-ratio:142/236;min-height:0}
.dkh-m-nvsearch .scr svg{display:block;width:100%;height:100%}
.dkh-m-nvsearch .nt{flex:1;min-width:0;display:flex;flex-direction:column}
.dkh-m-nvsearch .nt ol{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dkh-m-nvsearch .nt li{flex:1;display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
.dkh-m-nvsearch .nt li:first-child{border-top:1px solid var(--line2)}
.dkh-m-nvsearch .nt li i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--card);font-style:normal;font-size:var(--f-cap);font-weight:700;line-height:20px;text-align:center}
.dkh-m-nvsearch .nt li p{margin:0;min-width:0;font-size:var(--f-cap);line-height:1.45;color:var(--ink2)}
.dkh-m-nvsearch .nt li p b{display:block;font-size:var(--f-sm);color:var(--ink)}
.dkh-m-nvsearch .cap{flex:none;margin:0;padding-top:6px;border-top:1px solid var(--line);font-size:var(--f-cap);line-height:1.45;color:var(--mu)}