토스 행운퀴즈와 배너

금융 앱 제안에서 참여형 상품과 배너 지면을 나란히 보여줄 때. 화면 2개 고정. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 배너 줄은 진한 테두리 상자 1개. 퀴즈 문항 2줄 이내.

토스애즈 상품 해설(inside.ampm.co.kr/insight/12209, /insight/58658), 나스미디어 토스 매체 자료(library.nasmedia.co.kr). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mtsqz">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">행운퀴즈</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><p class="t10 mu" style="padding:4px 12px 0">혜택 › 행운퀴즈</p><div class="pd col" style="gap:8px"><p class="t13 bd" style="line-height:1.35">숲길핏 리포머 미니를 접는 데 걸리는 시간은</p><p class="t9 mu">참여 12,480명 · 숲길핏 제공</p>
<div class="qc"><p class="t10 bd">힌트</p><p class="t10" style="color:#444">숲길핏 체험 안내 페이지 첫 화면에서 확인</p></div>
<div class="gl">힌트 보러 가기</div>
<div style="border:1px solid #d1d6db;border-radius:8px;padding:8px 10px;font-size:11px;color:#b0b8c1">정답 입력</div>
<div class="bl">정답 확인하고 포인트 받기</div><p class="t9 mu" style="text-align:center">정답 확인 뒤 광고주 페이지로 이동</p></div><div class="hr"></div><div class="pd col" style="gap:7px"><p class="t10 bd">다른 퀴즈</p><div class="fx"><span class="av"></span><span class="ln f1"></span></div></div></div></div>
      <div class="fc"><p class="fl">내역 화면 배너</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><p class="t13 bd" style="padding:4px 12px 2px">10월 소비</p><div style="padding:0 12px 6px"><span class="pr" style="width:86px;height:14px"></span></div>
<div class="rw"><span class="av"></span><div class="col f1"><p class="t11">편의점</p><p class="t9 mu">오늘 08:12</p></div><span class="pr" style="width:34px"></span></div>
<div class="rw"><span class="av"></span><div class="col f1"><p class="t11">지하철</p><p class="t9 mu">오늘 07:48</p></div><span class="pr" style="width:28px"></span></div>
<div class="rw adr"><span class="av" style="border-radius:8px"></span><div class="col f1"><p class="t11 bd">첫 수업 무료 체험 받기</p><p class="t9 mu">숲길핏 · 광고</p></div><span class="mu">›</span></div>
<div class="rw"><span class="av"></span><div class="col f1"><p class="t11">카페</p><p class="t9 mu">어제 13:20</p></div><span class="pr" style="width:30px"></span></div>
<div class="rw"><span class="av"></span><div class="col f1"><p class="t11">온라인 쇼핑</p><p class="t9 mu">어제 11:02</p></div><span class="pr" style="width:40px"></span></div>
<div class="rw"><span class="av"></span><div class="col f1"><p class="t11">통신 요금</p><p class="t9 mu">10월 2일</p></div><span class="pr" style="width:36px"></span></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt tight">
    <p class="dk-lb">토스 · 행운퀴즈 · 배너</p>
    <h3>참여형 퀴즈 화면과 내역 화면 배너</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>행운퀴즈는 혜택 탭의 퀴즈 화면, 배너는 송금·결제·소비 내역 화면에 앱 목록과 유사한 형태로 노출</dd></div>
      <div><dt>과금 방식</dt><dd>행운퀴즈는 캠페인 단위, 이번 주 미션은 성과 보상형, 배너는 노출 기준 과금 포함. 견적은 상담으로 확정</dd></div>
      <div><dt>소재 규격</dt><dd>문항은 검색하면 찾을 수 있는 난이도. 힌트 보기·정답 확인 단계에서 광고주 페이지로 연결</dd></div>
      <div><dt>운영 포인트</dt><dd>랜딩 동시 접속 대응 먼저 점검. 아침은 홈·송금 지면, 점심은 결제·혜택 지면. 보상형은 유효 전환 수를 분모로 비용 산출</dd></div>
    </dl>
  </div>
</div>

.dk-mtsqz{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.dk-mtsqz .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mtsqz .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mtsqz .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mtsqz .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mtsqz .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mtsqz .rt .dk-lb{margin:0 0 4px}
.dk-mtsqz .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mtsqz .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mtsqz .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-mtsqz .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mtsqz .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mtsqz .rt.tight dl div{padding:10px 0;grid-template-columns:76px minmax(0,1fr);gap:var(--s3)}
.dk-mtsqz .rt.tight dd{font-size:var(--f-sm)}
.dk-mtsqz .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-mtsqz .ph.n{width:232px}
.dk-mtsqz .ph.s{width:190px}
.dk-mtsqz .ph.xs{width:150px;height:316px;border-width:4px;border-radius:18px;font-size:10px}
.dk-mtsqz .ph.dkm{background:#242424;color:#fff}
.dk-mtsqz .ph>*{flex:none}
.dk-mtsqz p{margin:0}
.dk-mtsqz .ph b,.dk-mtsqz .pc b,.dk-mtsqz .tv b{color:inherit;font-weight:700}
.dk-mtsqz .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mtsqz .xs .sb{padding:5px 12px 2px;font-size:9px}
.dk-mtsqz .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mtsqz .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px;text-align:center}
.dk-mtsqz .gd{background:#3a3a3a;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:9px;text-align:center}
.dk-mtsqz .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mtsqz .pr{display:block;height:9px;border-radius:3px;background:#c9c4bf}
.dk-mtsqz .fx{display:flex;align-items:center;gap:6px}
.dk-mtsqz .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mtsqz .sp{justify-content:space-between}
.dk-mtsqz .f1{flex:1;min-width:0}
.dk-mtsqz .t8{font-size:8px}
.dk-mtsqz .t9{font-size:9px}
.dk-mtsqz .t10{font-size:10px}
.dk-mtsqz .t12{font-size:12px}
.dk-mtsqz .t13{font-size:13px}
.dk-mtsqz .bd{font-weight:700}
.dk-mtsqz .mu{color:#8b8f94}
.dk-mtsqz .hr{height:6px;background:#f0f1f3}
.dk-mtsqz .pd{padding:8px 12px}
.dk-mtsqz .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mtsqz .ic.o{border-radius:50%}
.dk-mtsqz .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}
.dk-mtsqz .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none;white-space:nowrap}
.dk-mtsqz .rel{position:relative}
.dk-mtsqz .pin{position:absolute;z-index:6;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;line-height:1;letter-spacing:0}
.dk-mtsqz .nw{white-space:nowrap}

.dk-mtsqz .bl{background:#3182f6;color:#fff;border-radius:8px;padding:8px 0;text-align:center;font-size:11px;font-weight:700}
.dk-mtsqz .gl{background:#f2f4f6;color:#333;border-radius:8px;padding:8px 0;text-align:center;font-size:11px;font-weight:600}
.dk-mtsqz .qc{background:#f2f4f6;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:5px}
.dk-mtsqz .rw{display:flex;align-items:center;gap:9px;padding:7px 12px}
.dk-mtsqz .rw .av{width:26px;height:26px}
.dk-mtsqz .adr{margin:4px 10px;border-radius:10px;background:#f2f4f6;box-shadow:inset 0 0 0 1.5px var(--ink)}