/*
 * 포블로그 Play 스킨 (2026-11-13) — 쥬드가 고른 시안(마이페이지·캠페인 상세)을 실제 화면에 입힌다.
 * 마크업은 거의 그대로 두고 이 파일 하나로 모양만 바꾼다. 문제가 생기면 이 파일 <link> 두 줄만 빼면 원래대로 돌아간다.
 *   - 마이페이지: body.mypage-modern (memberHeader.jsp 에서 불러옴)
 *   - 캠페인 상세: body.campaign-detail-page (campaign-main.jsp 에서 불러옴)
 * 밤 모드는 theme-dark.js 가 이 색들을 자동으로 바꾼다.
 */
:root{
  --pf-ink:#17142a; --pf-ink2:#4a4760; --pf-mute:#8b88a0; --pf-line:#ece9f6;
  --pf-soft:#f7f5ff; --pf-soft2:#fff4fa;
  --pf-blue:#516aec; --pf-blue-d:#3c52d4; --pf-purple:#8b5cf6; --pf-pink:#ff5fa2; --pf-mint:#1fc59a; --pf-yellow:#ffd23f;
  --pf-grad:linear-gradient(120deg,#516aec 0%,#8b5cf6 48%,#ff5fa2 100%);
}

/* =========================== 마이페이지 =========================== */
html body.mypage-modern{background:#fbfaff}
html body.mypage-modern .mmh{position:relative;overflow:visible;border:0;border-radius:36px;
  background:linear-gradient(165deg,#efeaff 0%,#fff1f8 100%);box-shadow:none;padding-bottom:6px}
html body.mypage-modern .mmh::after{content:"";position:absolute;right:26px;top:-34px;width:104px;height:104px;
  background:url(/resources/img/cat/cat-hello.webp) center/contain no-repeat;pointer-events:none;
  animation:pfFloat 5s ease-in-out infinite}
@keyframes pfFloat{50%{transform:translateY(-7px) rotate(-3deg)}}
html body.mypage-modern .mmh__top{border:0;background:transparent;padding-right:140px}
html body.mypage-modern .mmh__avatar img,html body.mypage-modern .mmh__avatar .cropBox{
  border-radius:38% 62% 55% 45% / 48% 42% 58% 52%;box-shadow:0 0 0 4px #fff,0 10px 24px rgba(40,20,90,.15)}
html body.mypage-modern .mmh__heading h1,html body.mypage-modern .mmh__heading h2,html body.mypage-modern .mmh__heading h3,
html body.mypage-modern .mmh__heading strong{font-weight:900;letter-spacing:-.045em;color:var(--pf-ink)}
html body.mypage-modern .mmh__btn{border-radius:999px;font-weight:800;border:0;background:#fff;color:var(--pf-ink);
  box-shadow:inset 0 0 0 2px var(--pf-ink),0 4px 0 var(--pf-ink);transition:transform .15s}
html body.mypage-modern .mmh__btn:hover{transform:translateY(-2px)}
html body.mypage-modern .mmh__btn--kakao{background:#fee500;box-shadow:0 4px 0 #c9b400}
html body.mypage-modern .mmh__tabs{border:0;background:transparent;gap:6px;padding:6px 16px}
html body.mypage-modern .mmh__tabs a{border-radius:999px;font-weight:800;color:var(--pf-ink2);padding:9px 16px}
html body.mypage-modern .mmh__tabs a.is-active{background:var(--pf-ink);color:#fff}
html body.mypage-modern .mmh__subtabs{border:0;background:rgba(255,255,255,.55);margin:4px 14px 10px;border-radius:999px;padding:5px}
html body.mypage-modern .mmh__subtabs a{border-radius:999px;font-weight:800}
html body.mypage-modern .mmh__subtabs a.is-active{background:#fff;color:var(--pf-blue);box-shadow:0 4px 12px rgba(40,20,90,.1)}

html body.mypage-modern .mp-section-kicker{background:var(--pf-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:900;letter-spacing:.08em}
html body.mypage-modern .mp-section-head .udh4{font-size:26px;font-weight:900;letter-spacing:-.045em;color:var(--pf-ink)}
html body.mypage-modern .mp-section-head .btn{border-radius:999px;font-weight:800;border:0;box-shadow:inset 0 0 0 2px var(--pf-line);background:#fff}

/* 캠페인 카드: 둥근 큰 카드 + 사진 + 상태 스티커 */
html body.mypage-modern #mycamBox .umainbox,html body.mypage-modern .mycamBox .umainbox{border:0;border-radius:28px;background:#fff;
  box-shadow:0 0 0 2px var(--pf-line);overflow:hidden;transition:transform .2s,box-shadow .2s}
html body.mypage-modern #mycamBox .umainbox:hover,html body.mypage-modern .mycamBox .umainbox:hover{transform:translateY(-5px) rotate(-.5deg);
  box-shadow:0 0 0 2px #d9d3ff,0 22px 44px rgba(40,20,90,.12)}
html body.mypage-modern .umainbox .main-img-inbox{border-radius:0}
html body.mypage-modern .umainbox .camp-name{font-weight:900;letter-spacing:-.04em;color:var(--pf-ink)}
html body.mypage-modern .umainbox .mylabel,html body.mypage-modern .umainbox .lbtp{border-radius:999px}
html body.mypage-modern .umainbox .label-bb{border-radius:999px;background:#e6fbf4;color:#0f9e78;font-weight:900}
html body.mypage-modern .ucamp-ship{border-radius:18px;border:0;background:var(--pf-soft)}
html body.mypage-modern #mycamBox .ucamp-actions .btn,html body.mypage-modern .ucamp-actions .btn,html body.mypage-modern .ucamp-actions .btn-review{border:0!important;border-radius:999px;
  background:var(--pf-blue)!important;color:#fff!important;font-weight:800;box-shadow:0 4px 0 var(--pf-blue-d)!important;transition:transform .15s}
html body.mypage-modern .ucamp-actions .btn:hover{transform:translateY(-2px);color:#fff}

/* 빈 목록 등에서 쓰는 고양이 */
.pf-cat{display:block;width:120px;height:120px;margin:0 auto 10px}

@media (max-width:767px){
  html body.mypage-modern .mmh{border-radius:28px}
  html body.mypage-modern .mmh::after{width:70px;height:70px;right:12px;top:-20px}
  html body.mypage-modern .mmh__top{padding-right:80px}
}

/* =========================== 캠페인 상세 =========================== */
html body.campaign-detail-page{background:#fff}
html body.campaign-detail-page .panel-campaigninfo{border:0;box-shadow:none;background:transparent}
html body.campaign-detail-page .panel-heading .label{border-radius:999px;padding:6px 12px;font-weight:800}
html body.campaign-detail-page .campaignInfo-title,html body.campaign-detail-page .campaignInfo-title *{
  font-weight:900;letter-spacing:-.045em;color:var(--pf-ink)}
html body.campaign-detail-page .campaignInfo-title{font-size:32px;line-height:1.2}
html body.campaign-detail-page .main-cam-img img,html body.campaign-detail-page .img-campaign{border-radius:28px}
html body.campaign-detail-page #showMoreButton{border:0;border-radius:999px;height:48px;font-weight:800;background:#fff;color:var(--pf-ink);
  box-shadow:inset 0 0 0 2px var(--pf-ink),0 4px 0 var(--pf-ink)}

/* 섹션 제목: 아이콘 + 굵은 글씨 */
html body.campaign-detail-page label.campaigninfo-label{display:flex;align-items:center;gap:10px;margin:36px 0 12px;
  font-size:21px;font-weight:900;letter-spacing:-.04em;color:var(--pf-ink)}
html body.campaign-detail-page label.campaigninfo-label::before{content:"✨";flex:none;width:38px;height:38px;border-radius:13px;
  display:inline-grid;place-items:center;font-size:19px;background:var(--pf-soft)}
html body.campaign-detail-page label.campaigninfo-label[data-sec="offer"]::before{content:"🎁";background:#eef0ff}
html body.campaign-detail-page label.campaigninfo-label[data-sec="guide"]::before{content:"📌";background:#fff4e6}
html body.campaign-detail-page label.campaigninfo-label[data-sec="place"]::before{content:"📍";background:#eafbf4}
html body.campaign-detail-page label.campaigninfo-label[data-sec="keyword"]::before{content:"🔎";background:#e9f6ff}
html body.campaign-detail-page label.campaigninfo-label[data-sec="mission"]::before{content:"✅";background:#ffe0ee}
html body.campaign-detail-page label.campaigninfo-label[data-sec="banner"]::before{content:"🏷️";background:#f3efff}

/* 섹션 내용: 둥근 박스 (라벨 바로 뒤, <br> 뒤, 라벨을 감싼 div 뒤 — 세 가지 마크업 모양 모두) */
html body.campaign-detail-page .panel-campaigninfo .campaigninfo-text{margin-left:0;padding:22px 26px;border-radius:24px;
  background:var(--pf-soft);line-height:1.75;color:var(--pf-ink2)}
html body.campaign-detail-page :is(label[data-sec="offer"] + .campaigninfo-text,label[data-sec="offer"] + br + .campaigninfo-text,div:has(> label[data-sec="offer"]) + .campaigninfo-text){
  background:linear-gradient(150deg,#eef0ff,#f8efff);font-size:19px;font-weight:900;letter-spacing:-.035em;color:var(--pf-ink)}
html body.campaign-detail-page :is(label[data-sec="mission"] + .campaigninfo-text,label[data-sec="mission"] + br + .campaigninfo-text,div:has(> label[data-sec="mission"]) + .campaigninfo-text){background:var(--pf-soft2)}
html body.campaign-detail-page :is(label[data-sec="place"] + .campaigninfo-text,label[data-sec="place"] + br + .campaigninfo-text,div:has(> label[data-sec="place"]) + .campaigninfo-text){
  background:#fff;box-shadow:inset 0 0 0 2px var(--pf-line);font-weight:700}
html body.campaign-detail-page .panel-campaigninfo br + .campaigninfo-text{margin-top:-8px}
html body.campaign-detail-page #map{border-radius:24px;overflow:hidden;margin-top:12px}
html body.campaign-detail-page .guide-card{border:0;border-radius:22px;box-shadow:0 0 0 2px var(--pf-line);overflow:hidden;margin-top:14px}
html body.campaign-detail-page .reservation-badge-v2{border-radius:999px}
html body.campaign-detail-page .eventHolder{border:0;border-radius:24px;background:linear-gradient(120deg,#f3f1ff,#fff1f8)}
html body.campaign-detail-page .btn-copy-banner{border-radius:999px}

/* 신청 버튼 */
html body.campaign-detail-page .submitBtn{border-radius:999px!important;font-weight:900;font-size:17px;letter-spacing:-.02em;
  box-shadow:0 6px 0 var(--pf-blue-d);transition:transform .15s}
html body.campaign-detail-page .submitBtn:hover{transform:translateY(-2px)}

/* 신청 코멘트: 말풍선 */
html body.campaign-detail-page #comments{border:0;box-shadow:none;background:transparent}
html body.campaign-detail-page #commentDiv .profile-img{border-radius:50%;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(40,20,90,.12)}
html body.campaign-detail-page #commentDiv .media-body.borderd{position:relative;border:0;border-radius:22px;background:var(--pf-soft)}
html body.campaign-detail-page #commentDiv .media-body.borderd::before{content:"";position:absolute;left:-7px;top:24px;width:16px;height:16px;
  background:inherit;transform:rotate(45deg);border-radius:3px}
html body.campaign-detail-page #commentDiv .maininfocmt{font-weight:900;color:var(--pf-ink)}

/* 오른쪽 신청 카드 */
@media (min-width:992px){
  html body.campaign-detail-page .status-container{height:auto!important;background:#fff;border-radius:34px;padding:22px 20px 18px;
    box-shadow:0 30px 70px rgba(40,20,90,.13),0 0 0 1px var(--pf-line)}
}
html body.campaign-detail-page .cat-right-title{font-weight:900;letter-spacing:-.04em;color:var(--pf-ink)}
html body.campaign-detail-page .btnApplyTop{border:0;border-radius:999px;height:52px;font-weight:900;font-size:17px;color:#fff;
  background:var(--pf-blue);box-shadow:0 6px 0 var(--pf-blue-d);transition:transform .15s}
html body.campaign-detail-page .btnApplyTop:hover{transform:translateY(-2px);color:#fff}
html body.campaign-detail-page .status-dates .st{border-radius:999px}
html body.campaign-detail-page .status-dates .st.active{background:var(--pf-ink);color:#fff}
html body.campaign-detail-page #calendar .btn{border:0;border-radius:12px;background:var(--pf-soft)}

@media (max-width:767px){
  html body.campaign-detail-page .campaignInfo-title{font-size:25px}
  html body.campaign-detail-page label.campaigninfo-label{font-size:19px;margin-top:28px}
  html body.campaign-detail-page label.campaigninfo-label + .campaigninfo-text{padding:18px 18px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){html body.mypage-modern .mmh::after{animation:none}}