/* RECOVERIC 매거진 · '광고' 첫 화면(스폰서 카드 · 업종별 묶음 · 지면 속 광고) + 예시 화면 안내 한 줄 — 대표 지시 2026-10-30
   사용자(독자·사업자 고객) 위주: 업체가 하는 일 · 지역 · 납기 · 최소수량 · 후기를 한눈에. '광고' 라벨은 항상 보인다. 단추는 둥근 버튼 토큰(--rv-btn-*).
   가상 업체일 때만 demo.js 가 이 파일을 불러 그린다(실제 저장소 전환 · RV_SHOW_SAMPLES=false 에서는 쓰이지 않는다). 모든 글자 word-break:keep-all. */
.sp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:9px 0;border-bottom:1px solid #E6E6E6;font:400 12px/1.5 'Noto Sans KR',sans-serif;letter-spacing:.06em;color:#6A6A6A;word-break:keep-all}
.sp-top-off{appearance:none;border:0;background:none;padding:2px 0;font:inherit;letter-spacing:.04em;color:#6A6A6A;border-bottom:1px solid #CFCFCF;cursor:pointer}
.sp-top-off:hover{color:#1B2438;border-bottom-color:#1B2438}
[data-pt-sponsor]{word-break:keep-all}
.pt-soon{margin:40px 0 0;padding:28px 0;border-top:1px solid #E6E6E6;border-bottom:1px solid #E6E6E6;font-family:'Noto Serif KR',serif;font-size:17px;font-weight:300;color:#4A4A4A}
body:has([data-sp-card]) .pt-soon,body:has([data-pt-list] .pt-card) .pt-soon{display:none}
.sp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:44px}
.sp-note{margin:0;max-width:440px}
.sp-lb2{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid #1B2438;border-radius:var(--rv-btn-r-sm,8px);font:500 11.5px/1.4 'Noto Sans KR',sans-serif;letter-spacing:.14em;color:#1B2438;vertical-align:middle}
.sp-ty .sp-lb2{margin:0 8px 0 0;padding:1px 6px;font-size:11.5px}
.sp-chips{display:flex;flex-wrap:nowrap;gap:8px;margin:22px 0 0;overflow-x:auto;scrollbar-width:none}
.sp-chips::-webkit-scrollbar{display:none}
.sp-chip{appearance:none;flex:none;min-height:var(--rv-btn-h-sm,36px);padding:0 16px;border:1px solid var(--rv-btn-line,#D2D2D2);border-radius:var(--rv-btn-r-pill,999px);background:var(--rv-btn-bg,#FFFFFF);color:var(--rv-btn-ink,#111111);font:400 14px/1 'Noto Sans KR',sans-serif;cursor:pointer;transition:background var(--rv-btn-ease,.14s ease),border-color var(--rv-btn-ease,.14s ease)}
.sp-chip:hover{border-color:var(--rv-btn-line-hover,#1B2438)}
.sp-chip.on{background:var(--rv-btn-navy,#1B2438);border-color:var(--rv-btn-navy,#1B2438);color:var(--rv-btn-on,#FFFFFF)}
.sp-chip:focus-visible{outline:0;box-shadow:var(--rv-btn-focus,0 0 0 2px #FFF,0 0 0 4px #1B2438)}
/* 큰 스폰서 카드: 첫 화면에서 가장 크게. 사진은 4:5 */
.sp-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:28px}
.sp-card{display:flex;flex-direction:column;min-width:0}
.sp-ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#F3F4F7}
.sp-ph img{display:block;width:100%;height:100%;object-fit:cover}
.sp-lb{position:absolute;left:12px;top:12px;padding:3px 9px;background:#FFFFFF;color:#111111;font:500 12px/1.4 'Noto Sans KR',sans-serif;letter-spacing:.14em}
.sp-tx{display:flex;flex-direction:column;flex:1;padding:16px 0 0}
.sp-ty{margin:0;font:400 13px/1.5 'Noto Sans KR',sans-serif;letter-spacing:.06em;color:#6A6A6A}
.sp-nm{margin:6px 0 0;font:400 22px/1.35 'Noto Serif KR',serif;word-break:keep-all}
.sp-nm a{color:#111111;text-decoration:none}
.sp-nm a:hover{text-decoration:underline;text-underline-offset:4px}
.sp-ln{margin:8px 0 0;font:300 15px/1.7 'Noto Serif KR',serif;color:#333333}
.sp-fa{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid #E6E6E6;font:400 13px/1.5 'Noto Sans KR',sans-serif;color:#111111}
.sp-fa span+span::before{content:'';display:inline-block;width:1px;height:10px;margin:0 14px 0 -7px;background:#CFCFCF}
.sp-rv{margin:8px 0 0;font:400 13px/1.5 'Noto Sans KR',sans-serif}
.sp-rate b{font-weight:400;color:#1B2438}
.sp-trs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.sp-tr{padding:2px 8px;border:1px solid #D2D2D2;border-radius:var(--rv-btn-r-sm,8px);font:400 12px/1.5 'Noto Sans KR',sans-serif;color:#4A4A4A}
.sp-acts{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding-top:16px}
.sp-acts .pt-btn{min-height:var(--rv-btn-h,44px);padding:0 20px;border-radius:var(--rv-btn-r,10px);text-decoration:none}
.sp-acts .pt-btn.is-off{display:inline-flex;align-items:center;justify-content:center;cursor:not-allowed;background:#EFEEEA;border-color:#EFEEEA;color:#6E6E74}
.sp-acts .pt-btn.is-off:hover{background:#EFEEEA;color:#6E6E74}
.sp-off{margin:8px 0 0;font-size:13px;line-height:1.6;color:#6E6E74;word-break:keep-all}
/* 업종별 묶음 */
.sp-grp{margin-top:56px}
.sp-gh{margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid #111111;font:400 20px/1.4 'Noto Serif KR',serif}
.sp-gh .mute{font:400 13px 'Noto Sans KR',sans-serif;color:#6A6A6A}
.sp-mg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.sp-mini{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.sp-mph{display:block;aspect-ratio:4/5;overflow:hidden;background:#F3F4F7}
.sp-mph img{display:block;width:100%;height:100%;object-fit:cover}
.sp-mini .sp-nm{font-size:17px}
.sp-mini .sp-ln{font-size:13.5px;line-height:1.6}
.sp-mini .sp-fa{margin-top:8px;padding-top:8px;font-size:13px}
.sp-mini .sp-rv{font-size:13px}
/* 지면 속 광고 */
.sp-slots{margin-top:72px}
.sp-page{max-width:760px;margin-top:24px;padding:24px 28px;border:1px solid #E6E6E6;background:#FAFAFA}
.sp-art{display:flex;align-items:center;gap:16px;margin:0;padding:14px 0;border-bottom:1px solid #E6E6E6;font:300 15px/1.5 'Noto Serif KR',serif;color:#6A6A6A}
.sp-art i{flex:1;height:8px;background:repeating-linear-gradient(90deg,#E6E6E6 0 10px,transparent 10px 14px)}
.sp-page .ad-slot{margin:20px 0}
@container mg (max-width:960px){
  .sp-head{flex-direction:column;align-items:flex-start;gap:8px;margin-top:32px}
  .sp-feat{grid-template-columns:minmax(0,1fr);gap:40px}
  .sp-mg{grid-template-columns:minmax(0,1fr);gap:24px}
  .sp-nm{font-size:20px}
  .sp-page{padding:16px 16px}
  .sp-page .sp-ad1{display:none}
  .sp-acts .pt-btn{flex:1}
  .sp-slots{margin-top:56px}
}
@container mg (max-width:960px){.sp-feat{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-mg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container mg (max-width:600px){.sp-feat,.sp-mg{grid-template-columns:minmax(0,1fr)}.sp-page .sp-ad1{display:none}}

/* 2026-10-31 광고 디자인팀(편집장 승인): 휴대폰 업종 칩은 보이는 36px 그대로, 누르는 자리만 44px · '예시 끄기' 글자 단추도 누르는 자리만 넓힘 */
@container mg (max-width:640px){
.sp-chips{padding:4px 0;margin-top:18px}
.sp-chip{position:relative}
.sp-chip::before{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.sp-top-off{position:relative}
.sp-top-off::after{content:'';position:absolute;left:-8px;right:-8px;top:-11px;bottom:-11px}
}
/* 스폰서 자리가 비었을 때(목업 · 스폰서 0곳): 업체 찾기 위 120px 빈칸이 생기지 않게(디자인 점검 2026-11-02) */
.sp:not([data-sp-on])+.pt-sec{margin-top:48px}
/* 2026-11-05 광고 디자인팀: 업종 칩도 공용 '상자 칩 → 글자 탭'(아트 디렉터 11-04). 고른 업종 = 진한 글자 + 네이비 1px 밑줄, 나머지 회색 글자.
   누르는 높이 44px(PC·휴대폰). 스폰서 카드(사진 · '광고' 표시 · 업체 보기/문의하기) 디자인은 그대로 */
.sp-chips{gap:0 26px;padding:0;margin-top:14px}
.sp-chip{min-height:44px;padding:0;border:0;border-radius:0;background:none;color:#5E5E5E;font-size:15px;text-underline-offset:8px;transition:color var(--rv-btn-ease,.14s ease)}
.sp-chip:hover{border:0;color:#111111}
.sp-chip.on{background:none;border:0;color:#111111;font-weight:500;text-decoration:underline 1px #1B2438}
.sp-chip{position:relative}
.sp-chip::before{content:'';position:absolute;left:-8px;right:-8px;top:0;bottom:0}