/* ===== 2026 할로윈 스킨 — 어두운 배경 컨셉 =====
   켜는 곳: HalloweenSkin.classFor() 가 정한다 — 기간(~2026-11-05 23:59:59 KST) + DB 스위치
   (BMP_ATS_TOGGLE HW_SKIN_OFF / HW_SKIN_SITEWIDE) + 관리자(/admin/**) 제외. 켜지면 레이아웃이 이 파일을 로드하고
   메인(/)·이벤트 페이지는 <body> 에 hw-body, 그 밖의 화면은 hw-body hw-site(+광고주 센터 hw-adv, 소개 화면 hw-intro),
   header.jsp 화면은 <div class=bodybg> 에 hw-skin 을 붙인다.
   규칙은 전부 body.hw-body / .hw-skin / body.hw-site·hw-adv·hw-intro 로 시작한다 — 클래스가 빠지면 아무 영향도 없다.
   사이트 전체용 규칙은 파일 맨 아래 "사이트 전체 확대" 절에 있다.

   컨셉: 예전 main.css 할로윈 스킨(주석으로 남은 .bodybg halloween38.jpg + "할로윈 이벤트용 #ffffff" 카드)
   — 화면 전체에 어두운 할로윈 그림을 깔고, 카드는 흰 바탕으로 꽉 채워 또렷하게 띄운다.
   카드 밖에 직접 놓이는 글자는 흰 글자 + 반투명 어두운 판/칩. 배경이 고정이라 스크롤하면 어떤 글자든
   밝은 보름달 위를 지나갈 수 있다 — 그래서 글자만 흰색으로 바꾸지 않고 어두운 판을 깐다(대비 4.5:1 이상).

   구조 메모: .bodybg 는 헤더(로그아웃 폼 + nav)만 감싼다. 본문(.home-v2, 이벤트 페이지 .hw-page)과
   푸터는 그 뒤 형제 요소라서 본문 쪽은 `.hw-skin ~ …` 로 잡는다. 하단 탭바는 JS 가 body 끝에 붙인다.
   배경은 background-attachment:fixed 대신 body::before 고정 레이어(iOS 에서 fixed 배경이 깨진다).
   이 파일을 고치면 header.jsp 의 ?ver= 를 올릴 것(/resources 는 1일 캐시).

   ★ 할로윈 스타일은 전부 이 파일 한 곳에만 둔다 — main.css·main-home.css 등 기존 CSS 는 건드리지 않는다.
   기존 파일에 들어간 할로윈 코드는 `[할로윈 2026]` 으로 검색하면 전부 나온다. 철거 절차: docs/plans/halloween-2026/RESTORE.md */

/* ── 바탕: 화면 전체 고정 레이어 ─────────────────────────────── */
/* body 배경은 캔버스로 퍼지므로 오버스크롤·레이어 바깥도 같은 검정이 된다 */
body.hw-body{background-color:#0d0806}
body.hw-body::before{content:'';position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,8,6,0) 0%,rgba(13,8,6,0) 55%,rgba(13,8,6,.6) 100%),
    url(/resources/img/halloween/hw-bg-2026.jpg) center top/cover no-repeat,
    #0d0806}

/* ── 헤더: 반투명 어두운 바 + 아래 주황 선 ─────────────────────── */
.hw-skin .header-4b{background:rgba(15,8,5,.84);border-bottom:2px solid #ff8a1f;box-shadow:0 6px 18px rgba(0,0,0,.35)}
/* 모바일·앱은 forblog-app-shell.js 가 html.forblog-app .header-4b{background-color:#fff} 를 주입한다 */
html.forblog-app .hw-skin .header-4b{background-color:rgba(15,8,5,.84)}
.hw-skin .catUl .catDropDown,
.hw-skin .catUl a{color:#f5ece4}
.hw-skin .catUl .catDropDown .bi-list{color:inherit}
.hw-skin .catUl .catDropDown:hover,
.hw-skin .catUl a:hover,.hw-skin .catUl a:focus{color:#ffb15c}
/* 구분선 '|' 은 인라인 color:#dddddd 라 !important 로만 덮인다 */
.hw-skin .catUl > li > div[style*="color"]{color:rgba(255,255,255,.28) !important}
.hw-skin #alertBell{color:#f5ece4}
/* 로그인 배지: 회색 → 흰 바탕 진한 글자 (어두운 바 위에서 버튼으로 보이게) */
.hw-skin #naverIdLogin a.badge{background:#fff;color:#2a1608}
/* 검색창은 흰 바탕 그대로, 전체 카테고리 펼침(.catDropDownContent)·프로필 메뉴는 흰 판이라 손대지 않는다 */

/* ── 배너 캐러셀: 배경 그림 위에 그대로 띄운다 ───────────────────── */
.hw-skin ~ .home-v2 .hv2-banner .rank-slide__box,
.hw-skin ~ .home-v2 .hv2-banner .evs__box{box-shadow:0 16px 36px rgba(0,0,0,.55)}
.hw-skin ~ .home-v2 .hv2-banner .slick-dots button{background:rgba(255,255,255,.5)}
.hw-skin ~ .home-v2 .hv2-banner .slick-dots .slick-active button{background:#ff8a1f}

/* ── 할로윈 배너 슬라이드(mainEventSlides.jsp 의 .evs--halloween) — 다크 퍼플·오렌지, CSS 오브젝트만 ──
   슬라이드 마크업은 같은 스위치(HalloweenEvent.isSkinActive())로 기간에만 출력되므로 스타일도 이 파일에 둔다.
   공용 골격(.evs__box·.evs__inner·evsFloatA~C 키프레임)은 mainEventSlides.jsp 에 그대로 있다. */
.hw-skin ~ .home-v2 .evs--halloween .evs__box{background:
  radial-gradient(circle at 90% 18%,#fff4c4 0 5%,rgba(255,236,170,.22) 5.4%,transparent 15%),
  radial-gradient(ellipse 60% 45% at 78% 100%,rgba(255,138,31,.32),transparent 70%),
  linear-gradient(135deg,#1a1026 0%,#2b1540 55%,#3a1b2e 100%)}
.hw-skin ~ .home-v2 .evs--halloween .evs__eyebrow{background:rgba(255,138,31,.14);border:1px solid rgba(255,138,31,.7);color:#ffb15c}
.hw-skin ~ .home-v2 .evs--halloween .evs__sub{color:#e6dcf5;font-weight:700}
.hw-skin ~ .home-v2 .evs--halloween .evs__title{color:#fff;text-shadow:0 3px 14px rgba(255,138,31,.35)}
.hw-skin ~ .home-v2 .evs--halloween .evs__cta{background:linear-gradient(90deg,#ff8a1f,#ffb15c);color:#fff;
  box-shadow:0 6px 18px rgba(255,138,31,.4)}
/* 호박: 몸통(라디얼) + 눈·입(라디얼) + 꼭지(::before) */
.hw-skin ~ .home-v2 .evs-pumpkin{position:absolute;left:76%;top:56%;width:22%;padding-bottom:18%;border-radius:50%;
  transform:translate(-50%,-50%);z-index:2;
  background:
    radial-gradient(circle at 36% 42%,#3b1a00 0 8%,transparent 8.6%),
    radial-gradient(circle at 64% 42%,#3b1a00 0 8%,transparent 8.6%),
    radial-gradient(ellipse 26% 11% at 50% 68%,#3b1a00 0 70%,transparent 74%),
    radial-gradient(circle at 34% 28%,#ffb562,#ff8a1f 55%,#d65f08);
  box-shadow:0 12px 28px rgba(0,0,0,.4),inset -6px -8px 0 rgba(150,60,0,.25);
  animation:evsFloatA 7s ease-in-out infinite}
.hw-skin ~ .home-v2 .evs-pumpkin::before{content:'';position:absolute;left:50%;top:-9%;width:10%;height:20%;border-radius:3px;
  background:#4f7a2a;transform:translateX(-50%) rotate(10deg)}
/* 유령: 둥근 머리 + 눈 */
.hw-skin ~ .home-v2 .evs-ghost{position:absolute;left:91%;top:40%;width:10%;padding-bottom:12%;transform:translate(-50%,-50%);z-index:3;
  border-radius:50% 50% 22% 22% / 60% 60% 18% 18%;opacity:.94;
  background:
    radial-gradient(circle at 36% 40%,#2b1540 0 9%,transparent 10%),
    radial-gradient(circle at 64% 40%,#2b1540 0 9%,transparent 10%),
    linear-gradient(180deg,#ffffff,#ece4f7);
  box-shadow:0 8px 20px rgba(0,0,0,.3);animation:evsFloatB 6s ease-in-out infinite}
/* 박쥐: clip-path 실루엣 */
.hw-skin ~ .home-v2 .evs-bat{position:absolute;width:9%;padding-bottom:4.5%;background:#0d0814;z-index:1;
  clip-path:polygon(50% 30%,54% 12%,58% 30%,66% 26%,78% 4%,100% 36%,88% 44%,80% 64%,70% 52%,62% 78%,50% 92%,
    38% 78%,30% 52%,20% 64%,12% 44%,0% 36%,22% 4%,34% 26%,42% 30%,46% 12%)}
.hw-skin ~ .home-v2 .evs-bat--1{left:62%;top:18%;animation:evsFloatC 5.5s ease-in-out infinite}
.hw-skin ~ .home-v2 .evs-bat--2{left:80%;top:12%;width:6%;padding-bottom:3%;opacity:.85;animation:evsFloatA 6.5s ease-in-out .5s infinite}
.hw-skin ~ .home-v2 .evs--halloween .evs__spark{color:#ffb15c}
.hw-skin ~ .home-v2 .evs--halloween .evs__spark--1{left:66%;top:70%;animation-delay:.4s}
.hw-skin ~ .home-v2 .evs--halloween .evs__spark--2{left:96%;top:68%;animation-delay:1.3s}

/* ── 카드: 흰 바탕으로 꽉 채워 또렷하게 (main.css 의 "할로윈 이벤트용 background-color:#ffffff") ──
   main-home.css 의 박스리스 카드 규칙(.home-v2 #rCampaignContainer .mainbox = 1,2,0 / .hv2-rail = 0,3,0)이
   투명·그림자 없음으로 덮으므로 같은 경로에 .hw-skin ~ 를 붙여 한 단계 높인다(:hover 도 그쪽이 그림자를 지운다).
   반짝이 카드(.mainbox.sparkle-card, sparkle-card.js)는 투명한 별 카드라 제외한다.
   ⚠️ 카드에 height:100% 를 주지 말 것 — sparkle-card.js 가 옆 카드 높이를 ResizeObserver 로 복사해서
   줄 높이 ↔ 카드 높이가 서로 키우는 순환이 생긴다(실측: 한 줄이 5,538px 까지 늘어남). */
/* 주황 테두리는 border 대신 안쪽 그림자 고리(inset 0 0 0 2px)로 그린다 — 카드 폭·줄 높이가 1px 도 안 바뀌고,
   고리는 padding(8px) 안쪽에 그려져 사진과 겹치지 않는다. */
.hw-skin ~ * .mainbox:not(.sparkle-card),
.hw-skin ~ * .mymainbox,
.hw-skin ~ .home-v2 #rCampaignContainer .mainbox:not(.sparkle-card),
.hw-skin ~ .home-v2 .hv2-card-grid .mainbox:not(.sparkle-card),
.hw-skin ~ .home-v2 .hv2-rail .mainbox:not(.sparkle-card){background-color:#ffffff;border-radius:14px;
  padding:8px 8px 10px;transition:box-shadow .2s;
  box-shadow:inset 0 0 0 2px #f07a1a,0 0 12px rgba(255,138,31,.22),0 8px 22px rgba(0,0,0,.4)}
/* 호버: 테두리를 밝게 + 주황 빛 번짐 (main-home.css 의 :hover 가 그림자를 지우므로 같은 경로로 덮는다) */
.hw-skin ~ * .mainbox:not(.sparkle-card):hover,
.hw-skin ~ * .mymainbox:hover,
.hw-skin ~ .home-v2 #rCampaignContainer .mainbox:not(.sparkle-card):hover,
.hw-skin ~ .home-v2 .hv2-card-grid .mainbox:not(.sparkle-card):hover,
.hw-skin ~ .home-v2 .hv2-rail .mainbox:not(.sparkle-card):hover{background-color:#ffffff;border-radius:14px;
  padding:8px 8px 10px;
  box-shadow:inset 0 0 0 2px #ffb15c,0 0 20px rgba(255,138,31,.55),0 8px 22px rgba(0,0,0,.4)}

/* ── 카드 밖 컨트롤: 검정 바탕 + 주황 테두리·주황 글자 (선택된 것은 주황 바탕 + 검정 글자) ──
   배경이 고정이라 스크롤하면 어떤 글자든 밝은 보름달 위를 지나간다 — 바탕을 거의 불투명한 검정으로 깐다. */
/* 카테고리 아이콘 줄: 한 장의 어두운 판 위에 검정 원 + 주황 아이콘·주황 테두리 */
.hw-skin ~ .home-v2 .hv2-quick .submenu-con{background:rgba(15,8,5,.72);border:1px solid rgba(255,138,31,.45);
  border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.hw-skin ~ .home-v2 .hv2-quick .im-title{color:#ffd9b0}
.hw-skin ~ .home-v2 .hv2-quick .im-img{background:#140a06;border-radius:50%;
  box-shadow:inset 0 0 0 2px #ff8a1f;transition:background .2s,box-shadow .2s}
.hw-skin ~ .home-v2 .hv2-quick .im-img .bi{color:#ff8a1f}
.hw-skin ~ .home-v2 .hv2-quick .submenu-con > a:hover .im-img,
.hw-skin ~ .home-v2 .hv2-quick .submenu-con > a:focus .im-img,
.hw-skin ~ .home-v2 .hv2-quick .im-img:hover{background:#241005;
  box-shadow:inset 0 0 0 2px #ffb15c,0 0 16px rgba(255,138,31,.7)}
.hw-skin ~ .home-v2 .hv2-quick .submenu-con > a:hover .im-img .bi{color:#ffb15c}
.hw-skin ~ .home-v2 .hv2-quick .submenu-con > a:hover .im-title{color:#fff}

/* 필터 칩·지역·정렬: 검정 칩 + 주황 테두리·연한 주황 글자 */
.hw-skin ~ .home-v2 .snsfilter .nav-menu > li:not(.active) > .smenulink{
  background:rgba(14,8,5,.9) !important;border-color:#ff8a1f !important;color:#ffc690 !important}
.hw-skin ~ .home-v2 .snsfilter .nav-menu > li:not(.active) > .smenulink:hover,
.hw-skin ~ .home-v2 .snsfilter .nav-menu > li:not(.active) > .smenulink:focus{
  background:rgba(40,18,6,.95) !important;border-color:#ffb15c !important;color:#ffe0bf !important;
  box-shadow:0 0 12px rgba(255,138,31,.5)}
/* 회색 SNS 아이콘(svg img)은 검정 칩에서 안 보이므로 연한 주황으로 물들인다 */
.hw-skin ~ .home-v2 .snsfilter .nav-menu > li:not(.active) > .smenulink img{
  filter:brightness(0) invert(1) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.05)}
/* 선택된 칩: 주황 바탕 + 검정 글자. 원래는 핑크(main.css .nav-menu>li.active>a), 실시간쿠폰은 보라(.smenulink-coupon) */
.hw-skin ~ .home-v2 .snsfilter .nav-menu > li.active > a,
.hw-skin ~ .home-v2 .snsfilter .nav-menu > li.active > a:hover,
.hw-skin ~ .home-v2 .snsfilter .nav-menu > li.active > a:focus{
  background-color:#ff8a1f !important;border-color:#ff8a1f !important;color:#140a06 !important;
  box-shadow:0 0 12px rgba(255,138,31,.45)}
.hw-skin ~ .home-v2 .snsfilter .nav-menu > li.active > a img{filter:brightness(0)}

/* 섹션 제목(Premium 캠페인 등)·더보기·검색결과: 검정 칩 + 주황 테두리·주황 글자 */
.hw-skin ~ .home-v2 .hv2-title{display:inline-block;padding:6px 14px;border-radius:999px;color:#ffc690;
  background:rgba(14,8,5,.9);border:1.5px solid #ff8a1f}
.hw-skin ~ .home-v2 .hv2-title::after{content:'🎃';display:inline-block;margin-left:6px;font-size:.85em;vertical-align:1px}
.hw-skin ~ .home-v2 .hv2-more{padding:4px 10px;border-radius:999px;color:#ffc690;background:rgba(14,8,5,.9);
  border:1px solid #ff8a1f}
.hw-skin ~ .home-v2 .hv2-more:hover{color:#ffe0bf;box-shadow:0 0 12px rgba(255,138,31,.5)}
.hw-skin ~ .home-v2 .searchStatus{display:inline-block;padding:4px 12px;border-radius:999px;color:#ffc690;
  background:rgba(14,8,5,.9);border:1px solid #ff8a1f}

/* ── 푸터·하단 탭바: 어두운 판 + 연한 글자 ─────────────────────── */
.hw-skin ~ .footer.mm-footer{background:rgba(10,6,4,.86);border-top:1px solid rgba(255,138,31,.35);color:#cfc3b8}
.hw-skin ~ .footer.mm-footer .mm-footer__links a{color:#efe4da}
.hw-skin ~ .footer.mm-footer .mm-footer__links a:hover{color:#ffb15c}
.hw-skin ~ .footer.mm-footer .mm-footer__sep{color:rgba(255,255,255,.3)}
.hw-skin ~ .footer.mm-footer .mm-footer__biz{color:#cfc3b8}
.hw-skin ~ .footer.mm-footer .mm-footer__copy{color:#b3a699}
/* 탭바 스타일은 forblog-app-shell.js 가 html.forblog-app … 로 나중에 주입한다 — 특이도를 한 단계 높여 덮는다 */
html.forblog-app body.hw-body .fbl-tabbar{background:rgba(15,8,5,.94);border-top:1px solid rgba(255,138,31,.45);
  box-shadow:0 -4px 16px rgba(0,0,0,.35)}
html.forblog-app body.hw-body .fbl-tab{color:#cbbfb3}
html.forblog-app body.hw-body .fbl-tab--active{color:#ffb15c}
html.forblog-app body.hw-body .fbl-tab--active .fbl-tab__icon{background:rgba(255,138,31,.2)}
html.forblog-app body.hw-body .fbl-tab__dot{border-color:#140a05}

/* ── 이벤트 페이지(/event/halloween): 같은 배경, 히어로는 투명, 카드는 흰 판 ──
   페이지 고유 스타일은 halloween.jsp 안에 있고(스킨이 꺼져도 깨지지 않게), 여기서는 스킨 기간에만 덮는다.
   히어로 글자 바로 뒤에 보름달이 오므로 투명 대신 가장자리가 사라지는 어두운 타원을 깐다. */
.hw-skin ~ .hw-page .hw-hero{
  background:radial-gradient(ellipse 62% 72% at 50% 55%,rgba(13,8,6,.74) 0%,rgba(13,8,6,.5) 55%,rgba(13,8,6,0) 100%)}
.hw-skin ~ .hw-page .hw-hero__title,
.hw-skin ~ .hw-page .hw-hero__sub{text-shadow:0 2px 12px rgba(0,0,0,.65)}
.hw-skin ~ .hw-page .hw-hero__sub{color:#f3e9de}
.hw-skin ~ .hw-page .hw-hero__eyebrow{background:rgba(15,8,5,.6)}
/* 카드 3개(룰렛·포스팅·유의사항): 메인 캠페인 카드와 같은 주황 테두리 */
.hw-skin ~ .hw-page .hw-card,
.hw-skin ~ .hw-page .hw-notice{border:2px solid #f07a1a;
  box-shadow:0 0 16px rgba(255,138,31,.28),0 14px 34px rgba(0,0,0,.45)}
.hw-skin ~ .hw-page .hw-notice{background:#fff}
/* 떠다니는 장식은 배경 그림으로 충분 — 박쥐 둘은 숨기고 호박·유령만 남긴다 */
.hw-skin ~ .hw-page .hw-float--3,
.hw-skin ~ .hw-page .hw-float--4{display:none}
/* 좁은 화면에서는 유령이 제목 끝 글자("잡아라!")와 겹친다 */
@media (max-width:520px){
  .hw-skin ~ .hw-page .hw-float--2{display:none}
}

/* ── 룰렛 (2단계, halloween-roulette.js) ─────────────────────────────
   룰렛 기간(10/27~11/5)은 스킨 기간 안에 있어 스타일을 이 파일에 둔다. 11/6 부터는 룰렛이 "종료" 버튼만
   그리므로 이 규칙이 없어도 화면이 깨지지 않는다(원판·버튼 골격은 halloween.jsp 고유 스타일). */
.hw-skin ~ .hw-page .hw-wheel__disc{will-change:transform}
/* 결과를 받은 뒤 약 4초 감속 회전 → 결과 칸에서 멈춘다 (JS 의 SPIN_MS 와 맞출 것) */
.hw-skin ~ .hw-page .hw-wheel__disc.is-spinning{transition:transform 4s cubic-bezier(.12,.72,.1,1)}
/* 상태 줄: "10월 선정 N건 · 사용 M회 · 남은 횟수 K회 · 오늘 참여 여부" */
.hw-skin ~ .hw-page .hw-rlt-status{margin:18px 0 0;padding:8px 14px;border-radius:999px;background:#f7f3fc;
  border:1px solid #ece6f5;color:#3a1d5c;font-size:13px;font-weight:700;line-height:1.5;text-align:center}
.hw-skin ~ .hw-page #hwSpinBtn:not([disabled]){box-shadow:0 6px 18px rgba(255,138,31,.45)}
.hw-skin ~ .hw-page #hwSpinBtn:not([disabled]):hover{box-shadow:0 0 22px rgba(255,138,31,.7)}
/* 결과 판 */
.hw-skin ~ .hw-page .hw-rlt-result{width:100%;max-width:360px;margin:16px auto 0;padding:14px 16px;border-radius:14px;
  text-align:center;font-size:15px;line-height:1.55}
.hw-skin ~ .hw-page .hw-rlt-result[hidden]{display:none}
.hw-skin ~ .hw-page .hw-rlt-result strong{display:block;font-weight:900}
.hw-skin ~ .hw-page .hw-rlt-result span{display:block;margin-top:4px;font-size:13px;font-weight:600;opacity:.85}
.hw-skin ~ .hw-page .hw-rlt-result a{display:inline-block;margin-top:8px;padding:6px 14px;border-radius:999px;
  background:#ff8a1f;color:#fff;font-size:13px;font-weight:800;text-decoration:none}
.hw-skin ~ .hw-page .hw-rlt-result--win{background:linear-gradient(135deg,#ffe27a,#ffb15c);color:#3b1a00;
  box-shadow:0 0 24px rgba(255,211,77,.6);animation:hwRltWin 1.2s ease-in-out 2}
.hw-skin ~ .hw-page .hw-rlt-result--lose{background:linear-gradient(135deg,#2b1540,#3a1d5c);color:#ffc690}
.hw-skin ~ .hw-page .hw-rlt-result--info{background:#f7f5fa;color:#5d5470}
@keyframes hwRltWin{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
/* 하단 공개 집계: 카드 밖(배경 그림 위)이라 검정 칩 + 주황 테두리 */
.hw-skin ~ .hw-page .hw-rlt-stats{display:table;margin:22px auto 0;padding:8px 16px;border-radius:999px;
  background:rgba(14,8,5,.9);border:1px solid #ff8a1f;color:#ffc690;font-size:14px;font-weight:700;text-align:center}
.hw-skin ~ .hw-page .hw-rlt-stats b{color:#ffe0bf}
@media (prefers-reduced-motion:reduce){
  .hw-skin ~ .hw-page .hw-wheel__disc.is-spinning{transition:none}
  .hw-skin ~ .hw-page .hw-rlt-result--win{animation:none}
}

/* =====================================================================
   사이트 전체 확대 (19-sitewide-skin-spec.md) — 관리자(/admin/**) 제외 전 화면
   켜는 곳: HalloweenSkin.classFor() 가 "hw-body hw-site" 를 돌려주면
     · 블로거 화면(header.jsp)        : <body class="hw-body hw-site"> + .bodybg.hw-skin
     · 광고주 센터(advertiser header.jspf) : body 에 "hw-body hw-site hw-adv" (스크립트로 추가)
     · /freeCenter·/cuCenter 소개(freeIntro·cuCenterIntro) : body 에 "hw-body hw-site hw-intro"
   위의 배경 고정 레이어(body.hw-body::before)·헤더·푸터·카드 규칙은 그대로 함께 적용된다.

   원칙: 글자·표·폼이 촘촘한 본문은 안쪽을 하나하나 어둡게 바꾸지 않고, 본문 덩어리를 흰 "종이" 패널
   (둥근 모서리 + 주황 테두리 + 그림자)로 감싼다. 패널 안은 원래 색 그대로.
   주황 테두리는 border 대신 안쪽 그림자 고리(inset 0 0 0 2px)라 폭이 1px 도 바뀌지 않는다.
   모달·드롭다운·달력·토스트는 원래 흰 판이라 손대지 않는다.
   ===================================================================== */

/* ── 블로거 화면: 본문 덩어리 = 흰 종이 패널 ──────────────────────────
   header.jsp 의 .bodybg 는 헤더만 감싸고, 화면 본문은 그 뒤 <body> 직계 형제로 온다.
   화면별 본문 래퍼(실측 목록): .container(마이페이지·쿠폰함·포인트·약관·가이드 등),
   .content.m700(리뷰 등록), .noti-page(알림), .KSV(키워드 검색량), .panel-body(탈퇴). */
body.hw-site .bodybg ~ .container,
body.hw-site .bodybg ~ .content.m700,
body.hw-site .bodybg ~ .noti-page,
body.hw-site .bodybg ~ .KSV,
body.hw-site .bodybg ~ .panel-body{background-color:#fff;border-radius:18px;
  margin-top:24px;margin-bottom:32px;padding-top:12px;padding-bottom:20px;
  box-shadow:inset 0 0 0 2px #f07a1a,0 0 16px rgba(255,138,31,.25),0 12px 30px rgba(0,0,0,.45)}
/* 에러 화면(error/*.jsp): 본문이 <div class="row" style="width:100%"> 하나라 폭을 두고 가운데 패널로 */
body.hw-site .bodybg ~ .row{background-color:#fff;border-radius:18px;
  width:auto !important;max-width:1140px;margin:24px auto 32px;padding:12px 0 24px;
  box-shadow:inset 0 0 0 2px #f07a1a,0 0 16px rgba(255,138,31,.25),0 12px 30px rgba(0,0,0,.45)}
@media (max-width:767px){
  body.hw-site .bodybg ~ .row{margin:12px 8px 20px;border-radius:14px}
  body.hw-site .bodybg ~ .container,
  body.hw-site .bodybg ~ .content.m700,
  body.hw-site .bodybg ~ .noti-page,
  body.hw-site .bodybg ~ .KSV,
  body.hw-site .bodybg ~ .panel-body{margin:12px 8px 20px;border-radius:14px}
}

/* 캠페인 상세(/campaign/{cid}): 본문 줄(.content)은 화면 폭 전체 flex 라 줄 대신 두 칸을 각각 패널로.
   왼쪽 상세(.panel-campaigninfo)는 원래 흰 판, 오른쪽 신청·달력(.status-container)은 원래 투명 → 흰 판으로. */
body.hw-site .bodybg ~ .content{padding-bottom:36px}
body.hw-site .bodybg ~ .content > .panel-campaigninfo{border-radius:18px;
  box-shadow:inset 0 0 0 2px #f07a1a,0 0 16px rgba(255,138,31,.25),0 12px 30px rgba(0,0,0,.45)}
/* 원래 height:600px 고정이라 달력이 판 밖으로 넘친다 → 내용 높이(쿠폰 상세와 같은 height:auto, sticky 는 그대로) */
body.hw-site .bodybg ~ .content > .status-container{background-color:#fff;border-radius:18px;height:auto;min-height:600px;
  box-shadow:inset 0 0 0 2px #f07a1a,0 0 16px rgba(255,138,31,.25),0 12px 30px rgba(0,0,0,.45)}
@media (max-width:599px){
  body.hw-site .bodybg ~ .content > .panel-campaigninfo{border-radius:0 0 16px 16px}
}

/* 로그인(/login): 밝은 회색 바탕(login.css)을 걷어 배경 그림을 보이고, 흰 카드에 주황 테두리, 카드 밖 글자는 밝게 */
body.hw-site .bodybg ~ .login-page-wrapper{background:transparent}
body.hw-site .bodybg ~ .login-page-wrapper .login-card{
  box-shadow:inset 0 0 0 2px #f07a1a,0 0 16px rgba(255,138,31,.28),0 14px 34px rgba(0,0,0,.5)}
body.hw-site .bodybg ~ .login-page-wrapper .login-brand-header{color:#ffd9b0;text-shadow:0 2px 10px rgba(0,0,0,.7)}
body.hw-site .bodybg ~ .login-page-wrapper .login-brand-header *{color:inherit}

/* 기본 강조 버튼: 주황 바탕 + 검정 글자 */
body.hw-site .btn-primary,
body.hw-site .btn-primary:focus{background-color:#ff8a1f;border-color:#f07a1a;color:#140a06}
body.hw-site .btn-primary:hover,
body.hw-site .btn-primary:active{background-color:#ffb15c;border-color:#ff8a1f;color:#140a06}

/* ── 광고주 센터(/free/**, /cu/**) ─────────────────────────────────
   상단 바·좌측 메뉴 = 검정 + 주황, 본문(.adv-main__inner) = 종이 패널(원래 회색 바탕 그대로라 안쪽 흰 카드가 그대로 보인다). */
body.hw-adv .adv-shell{background:transparent}
/* 모바일 상단 바 */
body.hw-adv .adv-topbar{background:rgba(15,8,5,.9);border-bottom:2px solid #ff8a1f;box-shadow:0 6px 18px rgba(0,0,0,.35)}
body.hw-adv .adv-topbar .adv-logo,
body.hw-adv .adv-topbar .adv-logo__text{color:#f5ece4}
/* 좌측 메뉴(PC) / 아래에서 올라오는 메뉴 시트(모바일) */
body.hw-adv .adv-sidenav{background:#120a06;border-color:rgba(255,138,31,.55);border-right-color:rgba(255,138,31,.55)}
body.hw-adv .adv-sidenav::before{background:rgba(255,198,144,.35)}
body.hw-adv .adv-sidenav .adv-logo,
body.hw-adv .adv-sidenav .adv-logo__text{color:#ffd9b0}
body.hw-adv .adv-sidebar__close{color:#ffc690}
body.hw-adv .adv-sidebar__close:hover{background:rgba(255,138,31,.16)}
body.hw-adv .adv-sidebar__label{color:rgba(255,198,144,.7)}
body.hw-adv .adv-menu__link{color:#ffc690}
body.hw-adv .adv-menu__link .adv-menu__icon{background:rgba(255,138,31,.13)}
body.hw-adv .adv-menu__link:hover{background:rgba(255,138,31,.16);color:#ffe0bf}
body.hw-adv .adv-menu__link--active,
body.hw-adv .adv-menu__link--active:hover{background:#ff8a1f;color:#140a06}
body.hw-adv .adv-menu__link--active .adv-menu__icon{background:#140a06;color:#ff8a1f}
/* 모바일 하단 탭바 */
body.hw-adv .adv-bottom-nav{background:rgba(15,8,5,.95);border-top:1px solid rgba(255,138,31,.55);box-shadow:0 -4px 16px rgba(0,0,0,.35)}
body.hw-adv .adv-bottom-nav__item{color:#e6d6c8}
body.hw-adv .adv-bottom-nav__item:hover{background:rgba(255,138,31,.16);color:#ffe0bf}
body.hw-adv .adv-bottom-nav__item--active,
body.hw-adv .adv-bottom-nav__item--active:hover{background:rgba(255,138,31,.2);color:#ffb15c}
/* 본문 = 종이 패널 */
body.hw-adv .adv-main__inner{background:#F8F9FA;border-radius:20px;padding:24px;
  box-shadow:inset 0 0 0 2px #f07a1a,0 0 16px rgba(255,138,31,.25),0 12px 30px rgba(0,0,0,.45)}
@media (max-width:767px){
  body.hw-adv .adv-main__inner{padding:16px 12px;border-radius:16px}
}
/* 본문 카드: 흰 판 그대로, 테두리만 연한 주황 */
body.hw-adv .adv-main .adv-card{border-color:#ffd2a6}
/* 기본 강조 버튼: 주황 바탕 + 검정 글자 (원래 파랑 바탕 + 흰 글자) */
body.hw-adv .adv-btn--primary{background:#ff8a1f;color:#140a06}
body.hw-adv .adv-btn--primary:hover{background:#ffb15c;color:#140a06}
body.hw-adv .adv-btn--primary:active{background:#f07a1a}
body.hw-adv .adv-footer{color:#cfc3b8}

/* ── /freeCenter·/cuCenter 소개(로그인) 화면: 상단 바 검정, 가운데 흰 기둥(.main_whitebg)에 주황 테두리 ──
   이 화면은 <html> 에 배경이 있어 body 배경이 캔버스로 퍼지지 않고 body 상자에만 칠해진다 → 그러면 body 의
   검정이 고정 레이어(body::before)를 덮고, 화면 높이 아래로는 html 의 회색이 드러난다. body 를 투명으로 둔다
   (고정 레이어가 늘 화면 전체를 덮으므로 아래가 비지 않는다). */
body.hw-intro{background-color:transparent}
/* html 의 회색(cuadmin.css #F4F7FA)은 오버스크롤(iOS 당김) 때 드러난다 — :has 지원 브라우저에서만 검정으로(미지원이면 종전 회색) */
html:has(> body.hw-intro){background-color:#0d0806}
body.hw-intro .navbar-default{background:rgba(15,8,5,.88);border-color:transparent;border-bottom:2px solid #ff8a1f}
body.hw-intro .navbar-default .navbar-brand{color:#f5ece4}
body.hw-intro .main_whitebg{margin-top:24px;margin-bottom:32px;border-radius:20px;
  box-shadow:inset 0 0 0 2px #f07a1a,0 0 16px rgba(255,138,31,.25),0 12px 30px rgba(0,0,0,.45)}
body.hw-intro .main_whitebg .foot_empty{background:transparent}
@media (max-width:767px){
  body.hw-intro .main_whitebg{margin:12px 8px 20px}
}