네이버 지식iN 질문과 답변

지식iN 답변 운영·질문형 검색 대응 제안에서 답변 노출 형태를 보여줄 때. 질문 1, 답변 1. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·제목·설명 문구와 오른쪽 4행 설명만 교체. 사진 자리는 회색 상자(.g) 유지. 금액은 넣지 않음. 답변 본문은 3문장 이내, 링크 문구 1줄.

네이버 지식iN 질문 상세 화면. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mnvkn">
  <div class="lf">
    <div class="fr">
      <div class="ph mock "><div class="sb"><span>9:41</span><i></i></div><div class="kh"><span class="nvn" style="width:18px;height:18px;border-radius:4px;background:#03c75a;color:#fff;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center">N</span><span class="t12 bd">지식iN</span></div>
<div class="bx"><span class="q">Q</span><div class="col f1" style="gap:4px"><p class="t13 bd" style="line-height:1.3">허리 디스크 있는데 집에서 필라테스 기구 써도 되나요</p><p style="color:#444">병원에서 코어 운동을 권했는데 학원 다닐 시간이 없어요. 집에 리포머를 두고 혼자 해도 괜찮을까요</p><p class="t10 mu">비공개 · 조회 3,412 · 운동 건강</p></div></div>
<div class="hr"></div>
<div class="bx"><span class="a">A</span><div class="col f1" style="gap:5px"><div class="fx"><span class="av"></span><div class="col"><p class="t10 bd">숲길핏 운동처방팀</p><p class="t9 mu">물리치료사 · 채택 답변 214</p></div><span class="ok" style="margin-left:auto">질문자 채택</span></div><p style="color:#333">가능합니다. 다만 급성 통증 시기는 피하고 주치의 확인 후 시작하세요. 처음 4주는 스프링을 가장 약하게 두고 누운 자세 동작 위주로 진행합니다.</p><p class="t10" style="color:#0b53c1">디스크 환자용 4주 순서 보기</p></div></div>
<div class="hr"></div>
<div class="bx"><span class="a">A</span><div class="col f1" style="gap:6px"><div class="fx"><span class="av"></span><p class="t10 bd">코어지킴이</p></div><span class="ln" style="width:94%"></span><span class="ln" style="width:70%"></span></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">네이버 · 지식iN</p>
    <h3>질문 상세와 채택 답변</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>통합검색 지식iN 영역, 지식iN 탭, AI 브리핑 인용 출처</dd></div>
      <div><dt>과금 방식</dt><dd>매체 과금 없음. 답변 작성과 계정 운영 비용</dd></div>
      <div><dt>소재 규격</dt><dd>결론 먼저 2~3문장, 근거와 확인 방법, 출처 링크 1개</dd></div>
      <div><dt>운영 포인트</dt><dd>실명·전문가 계정으로 답변, 광고성 문구 배제, 질문 키워드 주간 수집</dd></div>
    </dl>
  </div>
</div>

.dk-mnvkn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center}
.dk-mnvkn .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mnvkn .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mnvkn .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mnvkn .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mnvkn .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mnvkn .rt .dk-lb{margin:0 0 4px}
.dk-mnvkn .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mnvkn .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mnvkn .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-mnvkn .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mnvkn .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mnvkn .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-mnvkn .ph.n{width:232px}
.dk-mnvkn .ph.dkm{background:#242424;color:#fff}
.dk-mnvkn .ph>*{flex:none}
.dk-mnvkn p{margin:0}
.dk-mnvkn .ph b{color:inherit;font-weight:700}
.dk-mnvkn .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mnvkn .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mnvkn .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px}
.dk-mnvkn .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mnvkn .fx{display:flex;align-items:center;gap:6px}
.dk-mnvkn .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mnvkn .sp{justify-content:space-between}
.dk-mnvkn .f1{flex:1;min-width:0}
.dk-mnvkn .t9{font-size:9px}
.dk-mnvkn .t10{font-size:10px}
.dk-mnvkn .t12{font-size:12px}
.dk-mnvkn .t13{font-size:13px}
.dk-mnvkn .bd{font-weight:700}
.dk-mnvkn .mu{color:#8b8f94}
.dk-mnvkn .hr{height:6px;background:#f0f1f3}
.dk-mnvkn .pd{padding:8px 12px}
.dk-mnvkn .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mnvkn .ic.o{border-radius:50%}
.dk-mnvkn .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}

.dk-mnvkn .kh{padding:8px 12px;border-bottom:1px solid #e9ebee;display:flex;gap:6px;align-items:center}
.dk-mnvkn .q{color:#03c75a;font-weight:900;font-size:16px;line-height:1.1}
.dk-mnvkn .a{color:#3f7df0;font-weight:900;font-size:16px;line-height:1.1}
.dk-mnvkn .ok{font-size:9px;color:#fff;background:#03c75a;border-radius:9px;padding:1px 7px}
.dk-mnvkn .bx{padding:10px 12px;display:flex;gap:8px}