/* 배너 광고 자리 공용 (2026-09-18) — include/ad_banner.php · js/ad_rotate.js
   컨트롤: a 하단 바(참고 sample/광고하단.png) · e 오른쪽 작게 · m 모바일 바(업체명 + 1/N) · n 없음. 다크 폴백 포함. */
.an-ad{position:relative;box-sizing:border-box;margin:0 auto;font-family:inherit}
.an-ad__frame{position:relative;width:100%;overflow:hidden;border-radius:6px 6px 0 0;background:var(--color-bg-white,#fff)}
.an-ad--n .an-ad__frame,.an-ad--adsense{border-radius:6px}
.an-ad__link{display:block;line-height:0}
.an-ad__img{display:block;width:100%;height:auto}
.an-ad__ctl{display:flex;align-items:center;gap:6px;padding:6px 6px;border:1px solid var(--ctl-border,#E2E2E6);border-top:0;border-radius:0 0 6px 6px;background:var(--color-bg-white,#fff);font-size:13px;font-weight:700;color:var(--tint-coral-fg,#B3331E);line-height:1}
body.dark .an-ad__ctl{background:var(--dark-bg-secondary,#232323);border-color:var(--dark-border,#3a3a3a);color:var(--color-text-emphasis,#F2C25E)}
.an-ad__who{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-ad__cnt{font-style:normal;font-weight:500;font-size:11px;color:var(--color-text-tertiary,#8A837D);white-space:nowrap}
.an-ad__btn{flex:none;width:30px;height:30px;padding:0;border:1px solid var(--ctl-border,#CFC7BE);border-radius:7px;background:var(--color-bg-white,#fff);color:var(--color-text-primary,#1F1B1A);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
body.dark .an-ad__btn{background:var(--dark-bg-secondary,#232323);border-color:var(--dark-border,#4a4a4a);color:var(--color-text-primary,#eee)}
.an-ad__btn:hover{border-color:var(--color-brand,#D8432A);color:var(--color-brand,#D8432A)}
.an-ad__btn:focus-visible{outline:2px solid var(--color-brand,#D8432A);outline-offset:2px}
.an-ad__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* E: 오른쪽 작게 */
.an-ad__ctl--e{justify-content:flex-end;padding:5px 8px}
.an-ad__ctl--e .an-ad__who{flex:none;font-size:12.5px;margin-right:4px;max-width:60%}
.an-ad__ctl--e .an-ad__btn{width:26px;height:26px}
/* 좁은 자리(120·125·150·200px) — 화살표 작게 */
.an-ad-pc_quick_top .an-ad__btn,.an-ad-pc_comm_rail .an-ad__btn,.an-ad-pc_comm_corner .an-ad__btn,.an-ad-pc_login .an-ad__btn{width:22px;height:22px;border-radius:5px}
.an-ad-pc_quick_top .an-ad__ctl,.an-ad-pc_comm_rail .an-ad__ctl,.an-ad-pc_comm_corner .an-ad__ctl,.an-ad-pc_login .an-ad__ctl{font-size:11.5px;padding:4px 4px;gap:3px}
/* 관리자 미리보기(?an_adhl=1) */
.an-ad--hl{outline:3px dashed #E9B94A;outline-offset:2px}
.an-ad__hl{position:absolute;left:0;top:-22px;z-index:6;background:#F2C25E;color:#3A2019;font-size:11.5px;font-weight:900;padding:2px 8px;border-radius:5px;white-space:nowrap;line-height:1.4}
.an-ad--empty{display:flex;align-items:center;justify-content:center;border:2px dashed #E9B94A;border-radius:8px;background:rgba(242,194,94,.12)}
.an-ad__emptytxt{font-size:12.5px;font-weight:700;color:#7A5200}
/* ── [2026-09-24] 「이 자리에 광고하기」(업체회원·관리자만) · 광고 1개 얇은 바 · 0구좌 모집 줄 ── */
.an-ad__frame--solo{border-radius:6px}
.an-ad__adv{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--color-text-tertiary,#8A837D);text-decoration:none;white-space:nowrap;line-height:1}
.an-ad__adv:hover{color:var(--color-brand,#D8432A)}
.an-ad__chip{font-size:10px;font-weight:900;padding:2px 4px;border:1px solid var(--ctl-border,#CFC7BE);border-radius:3px;letter-spacing:.04em;line-height:1}
.an-ad__adv:hover .an-ad__chip{border-color:var(--color-brand,#D8432A)}
.an-ad__ctl--e .an-ad__adv{margin-right:auto}
.an-ad__ctl--hasline{border-radius:0}
.an-ad__advline{display:flex;align-items:center;justify-content:center;height:22px;border:1px solid var(--ctl-border,#E2E2E6);border-top:0;border-radius:0 0 6px 6px;background:var(--color-bg-secondary,#FAF8F6);font-size:11px;font-weight:700;color:var(--color-text-tertiary,#8A837D);text-decoration:none;line-height:1}
.an-ad__advline:hover{color:var(--color-brand,#D8432A)}
.an-ad__thin{display:flex;align-items:center;gap:8px;padding:0 10px;height:30px;border:1px solid var(--ctl-border,#E2E2E6);border-top:0;border-radius:0 0 6px 6px;background:var(--color-bg-white,#fff);font-size:12.5px;font-weight:700;color:var(--tint-coral-fg,#B3331E);line-height:1}
.an-ad__thin .an-ad__who{flex:1;text-align:left}
.an-ad__thin .an-ad__adv{margin-left:auto}
.an-ad__thin--n{height:24px;padding:0 6px;font-size:11.5px;border-radius:0}
.an-ad__thin--n .an-ad__who{text-align:center}
.an-ad__thin--m{height:40px;border-radius:0 0 10px 10px;font-size:14px}
.an-ad--recruit{margin:0 auto}
.an-ad__recruit{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border:1px solid var(--ctl-border,#E2E2E6);border-radius:6px;background:var(--color-bg-secondary,#FAF8F6);font-size:12.5px;font-weight:700;color:var(--color-text-secondary,#6F6862);text-decoration:none;white-space:nowrap;line-height:1}
.an-ad__recruit b{color:var(--tint-coral-fg,#B3331E)}
.an-ad__recruit i{font-style:normal;color:var(--color-text-tertiary,#8A837D)}
.an-ad__recruit:hover{border-color:var(--color-brand,#D8432A)}
.an-ad-pc_comm_rail .an-ad__recruit,.an-ad-pc_quick_top .an-ad__recruit,.an-ad-pc_quick_bottom .an-ad__recruit,.an-ad-pc_login .an-ad__recruit{flex-direction:column;gap:2px;height:44px;font-size:11.5px;white-space:normal;text-align:center}
/* 모바일 M 바 안 칩(누르는 칸 40px) */
.an-ad--m .an-ad__adv{height:40px;padding:0 10px;border:1px solid var(--ctl-border,#CFC7BE);border-radius:10px;font-size:13px;color:var(--tint-coral-fg,#B3331E)}
.an-ad--m .an-ad__adv .an-ad__chip{border-color:var(--color-brand,#D8432A);color:var(--color-brand,#D8432A)}
.an-ad--m .an-ad__recruit{height:44px;border-radius:10px;font-size:14px}
#right_mainSub_banner_container .an-ad__recruit,#right_mainSub_banner_container .an-ad__advline,#right_mainSub_banner_container .an-ad__thin{display:flex;line-height:1}#right_mainSub_banner_container .an-ad__adv{display:inline-flex;line-height:1}#right_mainSub_banner_container .an-ad__recruit{border-radius:12px} /* 2026-09-26 통(pk-box, radius 12·overflow hidden)이 6px 상자의 좌우 테두리·모서리를 잘라 hover 때 위아래 선만 보이던 것(호버시라인.png) */ /* 2026-09-26 첫 화면 오른쪽 옛 배너 통 규칙(main_right.php `#right_mainSub_banner_container a{display:inline-block;line-height:0}`)이 글자 줄을 덮어 글씨가 상자 위로 튀던 것(구독칸.png) */
.an-ad__recruit--sq{flex-direction:column;gap:4px;white-space:normal;text-align:center;font-size:12px;line-height:1.35;padding:8px;box-sizing:border-box;border-radius:10px}.an-ad__recruit--sq i{display:none} /* 2026-09-26 고정 칸(S) 빈 자리 = 자리 크기 상자 */
body.dark .an-ad__advline,body.dark .an-ad__thin,body.dark .an-ad__recruit{background:var(--dark-bg-secondary,#232323);border-color:var(--dark-border,#3a3a3a)}
body.dark .an-ad__adv,body.dark .an-ad__advline,body.dark .an-ad__recruit{color:var(--color-text-secondary,#C9C1BB)}
body.dark .an-ad__thin{color:var(--color-text-emphasis,#F2C25E)}
body.dark .an-ad__recruit b{color:var(--color-text-emphasis,#F2C25E)}
.an-ad--m .an-ad__btn{width:40px;height:40px;border-radius:10px}
.an-ad--m .an-ad__ctl{padding:8px;gap:8px;font-size:14px;border-radius:0 0 10px 10px}
.an-ad--m .an-ad__frame{border-radius:10px 10px 0 0}
.an-ad--m .an-ad__frame--solo{border-radius:10px}
/* [2026-09-25] 구매 화면 「실제 화면 보기」 → ?an_adhl=<slot> 로 온 «그 자리 하나» 강조(누구에게나) */
.an-ad--hl-me{outline:3px solid #E9B94A;outline-offset:3px;border-radius:6px;animation:anAdHlPulse 1.1s ease-in-out 5}
.an-ad--hl-me.an-ad--empty{outline-style:solid}
.an-ad__hl--me{background:var(--color-brand,#D8432A);color:#fff;font-size:12.5px;padding:3px 10px;top:-26px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
@keyframes anAdHlPulse{0%,100%{box-shadow:0 0 0 0 rgba(233,185,74,0)}50%{box-shadow:0 0 0 14px rgba(233,185,74,.38)}}
@media (prefers-reduced-motion:reduce){.an-ad--hl-me{animation:none}}
.an-ad--empty .an-ad__emptytxt{text-align:center;padding:0 10px;line-height:1.5}
/* ── [2026-09-25] 고정 칸 S(글보기 프로필 옆·목록 작은 박스·기둥·커뮤니티 맨 위 띠) — 바 없음, 「AD」 표식만 ── */
.an-ad--s .an-ad__frame{border-radius:10px}
.an-ad__dots{position:absolute;left:0;right:0;bottom:5px;display:flex;justify-content:center;gap:4px;pointer-events:none;z-index:2}.an-ad__dots i{display:block;width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.5);transition:width .2s,background .2s}.an-ad__dots i.on{width:12px;background:#fff} /* 2026-09-26 고정 칸(S) 회전 점 */
.an-ad__adchip{position:absolute;left:6px;top:6px;z-index:2;font-size:9.5px;font-weight:900;letter-spacing:.06em;line-height:1;padding:3px 5px;border-radius:4px;background:rgba(31,27,26,.72);color:#fff;pointer-events:none}
.an-mvside .an-ad{width:125px !important}
.an-mvside .an-ad__frame{border:1px solid var(--ctl-border,#E4DFD6);box-shadow:0 1px 3px rgba(0,0,0,.06)}
body.dark .an-mvside .an-ad__frame{border-color:var(--dark-border,#3a3a3a)}
/* 모바일 커뮤니티 맨 위 띠 — 폭을 꽉 채움(그림 320×100 → 화면 폭, 비율 유지), 여백 없음 */
.m-adslot--commtop{margin:0;padding:0}
.m-adslot--commtop .an-ad{width:100% !important;max-width:none !important;margin:0}
.m-adslot--commtop .an-ad__frame{border-radius:0}
.m-adslot--commtop .an-ad__img{width:100%;height:auto}
.m-adslot--commtop .an-ad--recruit{width:100% !important}
/* ── [2026-10-06] 움직이는 배너(영상) — include/ad_banner.php an_ad_media_html · js/ad_rotate.js bindVideo. 소리 버튼(좌상)·광고주명(좌하)·남은 시간(우하)·진행 막대(맨 아래) ── */
.an-ad__video{display:block;width:100%;height:auto;background:#000;object-fit:cover}
.an-ad__vctl{display:contents}
.an-ad__snd{position:absolute;left:6px;top:6px;z-index:4;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.an-ad__snd:hover{background:rgba(0,0,0,.65)}.an-ad__snd:focus-visible{outline:2px solid #fff;outline-offset:1px}
.an-ad__snd svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.an-ad__snd .w{display:none}.an-ad__snd.on{background:var(--color-brand,#D8432A)}.an-ad__snd.on .x{display:none}.an-ad__snd.on .w{display:block}
.an-ad__vwho{position:absolute;left:8px;bottom:8px;z-index:3;font-style:normal;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.an-ad__vtime{position:absolute;right:8px;bottom:8px;z-index:3;font-style:normal;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);font-variant-numeric:tabular-nums;pointer-events:none;line-height:1.2}
.an-ad__vbar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(255,255,255,.25);pointer-events:none}
.an-ad__vbar b{display:block;height:100%;width:0;background:var(--color-brand,#D8432A)}
/* 작은 칸(≤150px)·낮은 띠(높이 ≤100px) — 버튼 작게, 광고주명 작게 */
.an-ad-pc_quick_top .an-ad__snd,.an-ad-pc_comm_rail .an-ad__snd,.an-ad-pc_view_side .an-ad__snd,.an-ad-pc_quick_bottom .an-ad__snd,.an-ad-m_view_side .an-ad__snd,.an-ad-m_list_box .an-ad__snd,.an-ad-m_home_top .an-ad__snd,.an-ad-m_view .an-ad__snd,.an-ad-m_detail .an-ad__snd,.an-ad-m_comm_top .an-ad__snd,.an-ad-m_footer .an-ad__snd,.an-ad--strip .an-ad__snd{width:22px;height:22px;border-radius:5px}
.an-ad-m_home_top .an-ad__vwho,.an-ad-m_view .an-ad__vwho,.an-ad-m_detail .an-ad__vwho,.an-ad-m_comm_top .an-ad__vwho,.an-ad-m_footer .an-ad__vwho,.an-ad-pc_view_bottom .an-ad__vwho{font-size:11px;bottom:7px}
/* 고정 칸(S): AD 표식이 좌상에 있어 소리 버튼은 우상으로, 점은 막대 위로 */
.an-ad--s .an-ad__snd{left:auto;right:6px}
.an-ad__frame--v .an-ad__dots{bottom:8px}
/* 맨 위 띠: 「광고」 표식·닫기 버튼과 안 겹치게 — 소리 버튼은 표식 오른쪽 */
.an-ad--strip .an-ad__snd{left:46px;top:50%;transform:translateY(-50%)}.an-ad--strip .an-ad__vwho,.an-ad--strip .an-ad__vtime{display:none}
@media (prefers-reduced-motion:reduce){.an-ad__vbar{display:none}}