/* RECOVERIC 매거진 · 머무는 지면 광고 카드 (광고 디자인팀 · 클래스 접두 ad- · 2026-10-24 광고 자리 합동 회의)
   본문 칸 전체 폭 한 장. PC: 사진 7칸(16:9) + 글 5칸. 휴대폰(본문 폭 960 이하): 사진 위 16:9 · 글 아래.
   위 1px 검정 선은 기사 구역과 같은 결(목록 안 자리는 아래 선). 닫기 버튼·띄움·움직임 없음. */
.ad-slot{display:block;margin:72px 0 0;padding:28px 0 0;border-top:1px solid #111111}   /* 아래 선은 두지 않는다 — 다음 구역의 머리 선과 겹쳐 두 줄로 보이지 않게(아트 디렉터 검수) */
.ad-slot[hidden]{display:none}
.ad-slot[data-ad-slot="main"]{margin-top:140px}   /* 메인은 구역 사이 간격(.sec 140)과 같은 호흡 — 앞 구역의 '전체 보기' 선과 붙어 보이지 않게 */
/* 칼럼(브랜드 스토리 · 백로그 193): 중간 자리는 본문 700 칸 안이라 사진 위 · 글 아래로 쌓고, 다음 소제목과 섞이지 않게 아래 선을 둔다. 끝 자리는 서명 뒤 960 칸 가운데. */
.ad-slot[data-ad-slot="column"][data-ad-pos="mid"]{margin-top:64px;padding:24px 0 30px;border-bottom:1px solid #111111}
.ad-slot[data-ad-slot="column"][data-ad-pos="mid"] .ad-card{grid-template-columns:minmax(0,1fr);row-gap:20px}
.ad-slot[data-ad-slot="column"][data-ad-pos="mid"] .ad-ph,.ad-slot[data-ad-slot="column"][data-ad-pos="mid"] .ad-tx{grid-column:auto}
.ad-slot[data-ad-slot="column"][data-ad-pos="mid"] .ad-t{margin-top:10px;font-size:23px}
.ad-slot[data-ad-slot="column"][data-ad-pos="mid"] .ad-go{margin-top:18px}
.ad-slot[data-ad-slot="column"][data-ad-pos="end"]{max-width:960px;margin:96px auto 0}
/* 오른쪽 열 세로 자리(data-ad-pos="rail", 지원사업 등 · docs/액션카드/20261101_지원사업_오른쪽열_광고.md): 사진 위 · 글 아래 */
.ad-slot[data-ad-pos="rail"]{margin:24px 0 0;padding:0;border-top:0}   /* 업체 카드가 제 위 선을 갖고 있어 자리 선은 두지 않는다(두 줄 방지) */
.ad-slot[data-ad-pos="rail"] .ad-card{grid-template-columns:minmax(0,1fr);row-gap:16px}
.ad-slot[data-ad-pos="rail"] .ad-ph,.ad-slot[data-ad-pos="rail"] .ad-tx{grid-column:auto}
.ad-slot[data-ad-pos="rail"] .ad-t{margin-top:8px;font-size:19px;line-height:1.5}
.ad-slot[data-ad-pos="rail"] .ad-b{font-size:13.5px;line-height:1.7;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ad-slot[data-ad-pos="rail"] .ad-go{margin-top:14px}
.ad-slot.ad-in-list{margin:0;padding:24px 0;border-top:0;border-bottom:1px solid #111111}
.ad-card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;align-items:center;color:#111111;text-decoration:none}
.ad-card:hover{text-decoration:none}
.ad-ph{grid-column:span 7;position:relative;margin:0;overflow:hidden;background:#EEEDEA;aspect-ratio:16/9}
.ad-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ad-card:hover .ad-ph img{transform:scale(1.02)}
.ad-lb{position:absolute;left:0;top:0;padding:6px 10px 6px 12px;background:#FFFFFF;color:#111111;font-family:'Noto Sans KR',sans-serif;font-size:10px;line-height:1.4;letter-spacing:.22em;font-weight:500}
.ad-tx{grid-column:9 / span 4;min-width:0}
.ad-v{margin:0;font-family:'Noto Sans KR',sans-serif;font-size:12px;letter-spacing:.06em;font-weight:500;color:#6A6A6A}   /* 한글 상호는 자간을 거의 두지 않는다 */
.ad-t{margin:14px 0 0;font-family:'Noto Serif KR',serif;font-size:28px;line-height:1.45;font-weight:400;text-wrap:balance}
.ad-b{margin:14px 0 0;font-size:14px;line-height:1.8;color:#4A4A4A}
.ad-go{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding-bottom:4px;border-bottom:1px solid #111111;font-size:12px;letter-spacing:.16em;font-weight:500}
.ad-go .ar{font-family:'Bodoni Moda',serif;font-size:18px;letter-spacing:0;line-height:1}
.ad-card:hover .ad-go{border-bottom-color:#1B2438;color:#1B2438}
.ad-note{margin:12px 0 0;font-size:10.5px;line-height:1.6;color:#8A8A8A}
.ad-slot.ad-house .ad-lb{letter-spacing:.24em}
/* 원문 창을 옆에 열어 본문이 좁아지면(분할) · 휴대폰: 사진 위 · 글 아래 */
@container mg (max-width:960px){
.ad-slot{margin-top:56px;padding:20px 0 0}
.ad-slot[data-ad-slot="main"]{margin-top:96px}
.ad-slot[data-ad-slot="column"][data-ad-pos="mid"]{margin-top:48px;padding:20px 0 24px}
.ad-slot[data-ad-slot="column"][data-ad-pos="end"]{margin-top:64px}
.ad-slot[data-ad-slot="column"][data-ad-pos="mid"] .ad-t{font-size:21px}
.ad-card{grid-template-columns:minmax(0,1fr);row-gap:18px}
.ad-ph,.ad-tx{grid-column:auto}
.ad-t{margin-top:10px;font-size:21px}
.ad-b{margin-top:8px;font-size:13.5px}
.ad-go{margin-top:16px}   /* 카드 전체가 링크라 누르는 자리는 충분하다 */
}
/* 디자인 점검 11-02 광고: 태블릿 세로(본문 700~960)는 쌓으면 사진이 410px 로 지면을 덮어, 사진 7 · 글 5 로 나란히(지원사업 · 랭킹 · 메인 끝 자리 공통) */
@container mg (min-width:700px) and (max-width:960px){
.ad-slot:not(.ad-line):not([data-ad-pos="rail"]):not([data-ad-slot="column"]) .ad-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;row-gap:0}
.ad-slot:not(.ad-line):not([data-ad-pos="rail"]):not([data-ad-slot="column"]) .ad-t{font-size:20px;line-height:1.5}
}
@media (min-width:1100px){html.rv-split .ad-card{grid-template-columns:minmax(0,1fr);row-gap:18px}html.rv-split .ad-ph,html.rv-split .ad-tx{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.ad-ph img{transition:none}.ad-card:hover .ad-ph img{transform:none}}

/* 가로 한 줄형 카드 (2026-10-29 광고 노출 회의 3·4절): 뉴스 목록 사이 · 브랜드 스토리 칼럼 중간·끝 · 요약 지면 하단.
   왼쪽 사진, 오른쪽 문구 2줄(제목 · 한 줄 소개). '광고' 표시는 사진 위 작게. 광고가 없으면 자리를 접는다(빈 상자 없음). */
.ad-slot.ad-line{margin:40px 0 0;padding:20px 0 0;border-top:1px solid #111111}
.ad-slot.ad-line.ad-in-list{grid-column:1/-1;margin:0;padding:24px 0;border-top:0;border-bottom:1px solid #E6E6E6}   /* 뉴스 목록의 줄 선과 같은 결 */
.ad-slot.ad-line .ad-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:24px;row-gap:0;align-items:center}
.ad-slot.ad-line .ad-ph{grid-column:auto;aspect-ratio:3/2}
.ad-slot.ad-line .ad-tx{grid-column:auto}
.ad-slot.ad-line .ad-v{font-size:12px}
.ad-slot.ad-line .ad-t{margin:6px 0 0;font-size:20px;line-height:1.5;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ad-slot.ad-line .ad-b{margin:6px 0 0;font-size:13.5px;line-height:1.7;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.ad-slot.ad-line .ad-go{margin-top:12px;font-size:11.5px}
.ad-slot.ad-line .ad-note{margin-top:8px}
/* 업체 홈페이지 카드도 같은 가로 모양: 업체 톤(테마·대표색)은 그대로, 사진을 왼쪽에 */
.ad-slot.ad-line .ad-hp{max-width:none}
.ad-slot.ad-line .ad-hp-th{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:0;align-items:center;padding:0}
.ad-slot.ad-line .ad-hp-th[data-r] .ph{aspect-ratio:3/2}
.ad-slot.ad-line .ad-hp-th{text-align:left}
.ad-slot.ad-line .ad-hp-th .tx{padding:12px 20px;border-top:0;min-width:0}
.ad-slot.ad-line .ad-hp-th .ty{display:block;max-width:100%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-slot.ad-line .ad-hp-th .nm{font-size:19px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ad-slot.ad-line .ad-hp-th .ln{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.ad-slot.ad-line .ad-hp-th .gx{margin-top:10px}
@container mg (min-width:760px){.ad-slot.ad-line.ad-in-list{grid-column:span 2}.ad-slot.ad-line.ad-in-list .ad-card,.ad-slot.ad-line.ad-in-list .ad-hp-th{grid-template-columns:minmax(0,260px) minmax(0,1fr)}.ad-slot.ad-line.ad-in-list .ad-card{column-gap:28px}}   /* 칸이 둘 이상일 때는 두 칸 폭(남는 칸은 뒤 글이 채움), 한 칸이면 한 줄 전체 */
/* 요약 지면 하단(#rv .rb): 광고 2장은 위아래로 쌓고, 선은 첫 장 위에만 크게 */
.ad-reader{margin:0}
.ad-reader .ad-slot.ad-line{margin-top:28px}
.ad-reader .ad-slot.ad-line+.ad-slot.ad-line{margin-top:20px;border-top:1px solid #E6E6E6}
@container mg (max-width:560px){
.ad-slot.ad-line .ad-card,.ad-slot.ad-line .ad-hp-th{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:14px}
.ad-slot.ad-line .ad-hp-th{column-gap:0}
.ad-slot.ad-line .ad-t{font-size:17px}
.ad-slot.ad-line .ad-b{font-size:12.5px}
.ad-slot.ad-line .ad-go{margin-top:8px}
.ad-slot.ad-line .ad-hp-th .tx{padding:10px 12px}
.ad-slot.ad-line .ad-hp-th .ty{font-size:10.5px}
.ad-slot.ad-line .ad-hp-th .nm{font-size:16px}
.ad-slot.ad-line .ad-hp-th .ln{font-size:12.5px}
.ad-slot.ad-line.ad-in-list{padding:20px 0}
}
@container mg (min-width:760px){.ad-slot.ad-line[data-ad-slot="film"] .ad-card,.ad-slot.ad-line[data-ad-slot="film"] .ad-hp-th{grid-template-columns:minmax(0,260px) minmax(0,1fr)}.ad-slot.ad-line[data-ad-slot="film"] .ad-card{column-gap:28px}}   /* 유튜브 지면 끝(2026-10-31): 영상 목록 끝에서 튀지 않게 뉴스 목록 한 줄형과 같은 크기 */
@container mg (min-width:960px){.ad-slot:not(.ad-line) .ad-hp-th{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;text-align:left}.ad-slot:not(.ad-line) .ad-hp-th .ph{aspect-ratio:16/10;height:auto}.ad-slot:not(.ad-line) .ad-hp-th .tx{padding:28px 40px;border-top:0;min-width:0}}   /* 지면 사이 광고(2026-10-31): 세로로 쌓으면 높이 870px(한 화면)이라 PC 는 사진·글을 나란히 — '눈에 띄되 거슬리지 않게' */
@container mg (min-width:760px){.ad-slot.ad-line[data-ad-slot="mypage"] .ad-card,.ad-slot.ad-line[data-ad-slot="mypage"] .ad-hp-th{grid-template-columns:minmax(0,260px) minmax(0,1fr)}.ad-slot.ad-line[data-ad-slot="mypage"] .ad-card{column-gap:28px}.ad-slot[data-ad-slot="mypage"]{margin-top:56px}}   /* 마이페이지 홈·스크랩 끝(2026-10-31): 한 줄형 */
/* 오른쪽 열 세로 자리(rail) — 업체 카드도 세로로(위 960px 나란히 규칙보다 뒤에 둔다) · 사진 4:5 */
.ad-slot[data-ad-pos="rail"] .ad-hp{max-width:none}
.ad-slot[data-ad-pos="rail"] .ad-hp-th{display:block;text-align:left}
.ad-slot[data-ad-pos="rail"] .ad-hp-th .ph{aspect-ratio:4/5;height:auto}
.ad-slot[data-ad-pos="rail"] .ad-hp-th .tx{padding:16px 18px 18px;border-top:0;min-width:0}
.ad-slot[data-ad-pos="rail"] .ad-hp-th .ty{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-slot[data-ad-pos="rail"] .ad-hp-th .nm{font-size:19px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ad-slot[data-ad-pos="rail"] .ad-hp-th .ln{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ad-slot[data-ad-pos="rail"] .ad-hp-th .gx{margin-top:12px}
/* 노트 목록 중간(3칸 격자 안) · 원단 찾기 결과 중간(docs/액션카드/20261103_원단찾기_결과_중간_광고.md): 한 줄 전체를 쓴다 */
.nl-grid>.ad-slot.ad-in-list,.fx-grid>.ad-slot.ad-in-list{grid-column:1/-1;padding:28px 0 0;border-top:1px solid #111111;border-bottom:0}
/* 업체 카드(.ad-hp)가 들어간 자리: 카드가 제 위 선·상자 선을 갖고 있으므로 자리 선을 뺀다(두 줄 방지 · 아트 디렉터 결정 11-01, 전 지면 공통). 간격은 margin 이 맡는다 */
.ad-slot.ad-vp,.nl-grid>.ad-slot.ad-in-list.ad-vp,.fx-grid>.ad-slot.ad-in-list.ad-vp{border-top:0;padding-top:0}
.ad-slot.ad-vp[data-ad-slot="column"][data-ad-pos="mid"]{border-bottom:0;padding-bottom:0}
/* 2026-11-05 광고 디자인팀 · 휴대폰 한 줄형(사진 폭 130px 안팎, 시세 · 뉴스 목록 · 유튜브 끝): 'PARTNER · 광고' 표시가 사진 폭을 거의 다 덮어 사진이 띠처럼 보였다.
   표시는 그대로 두고(광고가 기사처럼 보이지 않게) 글자 사이와 여백만 줄여 사진 왼쪽 위 모서리에 작게 앉힌다 */
@container mg (max-width:560px){
.ad-slot.ad-line .ad-lb,.ad-slot.ad-line .ad-hp-th .lb{padding:4px 7px 4px 8px;font-size:9.5px;letter-spacing:.12em}
}
