/* ============================================================
   SOFT SKIN — override for legacy sub-pages
   loaded AFTER each page's inline <style>; flips old
   brutalist/lime UI into soft cream + deep-purple (마켓컬리 결).
   NO lime backgrounds, NO white-on-light text.
   ============================================================ */

/* --- remap legacy vars to soft palette --- */
body{
  --brand-primary: var(--accent-text);
  --brand-secondary: var(--accent-text);
  --brand-accent: var(--gold);
  --brand-gradient: var(--accent);
  --shadow: var(--shadow);
  --shadow-card: var(--shadow-lg);
  --transition: var(--t);
  --nav-active-bg: var(--accent-tint);
  --hard: var(--shadow); --hard-sm: var(--shadow); --hard-lg: var(--shadow-lg);
  --ink: var(--text);
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px;
}

/* --- HEADER --- */
.site-header{ background:var(--header-bg)!important; backdrop-filter:saturate(180%) blur(14px)!important; border-bottom:1px solid var(--border)!important; box-shadow:none!important; }
.logo-mark{ background:var(--accent)!important; border:none!important; border-radius:12px!important; box-shadow:0 6px 16px rgba(236,58,102,.22)!important; }
.logo-mark svg path,.logo-mark svg circle{ fill:#fff!important; stroke:#fff!important; }
.logo-main{ font-family:var(--font-serif)!important; font-weight:700!important; }
.logo-sub{ font-family:var(--font-body)!important; color:var(--text-muted)!important; letter-spacing:1.5px!important; }
.nav-link{ font-weight:600!important; color:var(--text)!important; border:none!important; border-radius:999px!important; }
.nav-link:hover{ background:var(--accent-tint)!important; color:var(--accent-text)!important; }
.nav-link.active{ background:var(--accent-tint)!important; color:var(--accent-text)!important; font-weight:700!important; }
.mode-btn,.admin-btn{ width:40px!important;height:40px!important; background:var(--bg-card)!important; border:1.5px solid var(--border-2)!important; border-radius:999px!important; box-shadow:none!important; color:var(--text)!important; transition:var(--t)!important; }
.mode-btn:hover,.admin-btn:hover{ background:var(--accent-tint)!important; color:var(--accent-text)!important; border-color:var(--accent)!important; transform:none!important; }

/* --- BUTTONS --- */
.btn-primary,.submit-btn{ background:linear-gradient(135deg,#EE3E6D 0%,#F4743B 100%)!important; color:#fff!important; font-weight:700!important; border:none!important; border-radius:999px!important; box-shadow:0 6px 18px rgba(236,58,102,.22)!important; transition:var(--t)!important; }
.btn-primary:hover,.submit-btn:hover{ transform:translateY(-2px)!important; box-shadow:0 10px 26px rgba(236,58,102,.32)!important; background:var(--accent-2)!important; }
.btn-outline{ background:var(--bg-card)!important; color:var(--text)!important; font-weight:600!important; border:1.5px solid var(--border-2)!important; border-radius:999px!important; box-shadow:none!important; }
.btn-outline:hover{ background:var(--bg-card)!important; color:var(--accent-text)!important; border-color:var(--accent)!important; transform:translateY(-2px)!important; box-shadow:var(--shadow)!important; }
.m-cta-btn{ background:linear-gradient(135deg,#EE3E6D,#F4743B)!important; color:#fff!important; border:none!important; border-radius:999px!important; box-shadow:0 6px 18px rgba(236,58,102,.22)!important; }

/* --- CARDS --- */
.card{ border:1px solid var(--border)!important; border-radius:18px!important; box-shadow:var(--shadow)!important; transition:var(--t)!important; }
.card:hover{ transform:translateY(-6px)!important; box-shadow:var(--shadow-lg)!important; border-color:var(--border)!important; }

/* --- BADGES (soft, never white-on-lime) --- */
.badge{ font-weight:700!important; border-radius:999px!important; border:none!important; letter-spacing:.2px!important; text-transform:none!important; }
.badge-red{ background:var(--accent)!important; color:#fff!important; }
.badge-green{ background:var(--accent-tint)!important; color:var(--accent-text)!important; }
.badge-orange{ background:rgba(183,138,69,.15)!important; color:var(--gold)!important; }
.badge-blue{ background:rgba(236,58,102,.10)!important; color:var(--accent-text)!important; }
.s-badge,.sidebar-badge{ border-radius:999px!important; }

/* --- TAG LABEL / TITLES --- */
.tag-label{ font-family:var(--font-body)!important; background:transparent!important; color:var(--accent-text)!important; border-radius:0!important; letter-spacing:2.5px!important; padding-left:0!important; font-size:12px!important; }
.section-title,.page-title{ font-family:var(--font-serif)!important; font-weight:700!important; letter-spacing:-.3px!important; }
.section-title span,.page-title span{ background:transparent!important; color:var(--accent-text)!important; padding:0!important; border:none!important; }
.page-hero{ background:var(--bg)!important; }
.page-badge{ background:var(--accent-tint)!important; color:var(--accent-text)!important; border:none!important; border-radius:999px!important; box-shadow:none!important; font-family:var(--font-body)!important; }

/* --- CAMPAIGN CARDS: real photos --- */
.camp-img{ font-size:0!important; background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; border-bottom:1px solid var(--border)!important; }
:is(.card,.camp-card):nth-child(8n+1) .camp-img{ background-image:url(../../assets/img/sushi.jpg)!important; }
:is(.card,.camp-card):nth-child(8n+2) .camp-img{ background-image:url(../../assets/img/cafe.jpg)!important; }
:is(.card,.camp-card):nth-child(8n+3) .camp-img{ background-image:url(../../assets/img/hanwoo.jpg)!important; }
:is(.card,.camp-card):nth-child(8n+4) .camp-img{ background-image:url(../../assets/img/skincare.jpg)!important; }
:is(.card,.camp-card):nth-child(8n+5) .camp-img{ background-image:url(../../assets/img/taco.jpg)!important; }
:is(.card,.camp-card):nth-child(8n+6) .camp-img{ background-image:url(../../assets/img/ramen.jpg)!important; }
:is(.card,.camp-card):nth-child(8n+7) .camp-img{ background-image:url(../../assets/img/winebar.jpg)!important; }
:is(.card,.camp-card):nth-child(8n) .camp-img{ background-image:url(../../assets/img/vegan.jpg)!important; }
.camp-img{ background-image:url(../../assets/img/cafe.jpg)!important; }
.camp-d{ background:rgba(20,14,10,.62)!important; color:#fff!important; border:none!important; border-radius:999px!important; backdrop-filter:blur(4px)!important; font-weight:700!important; }
.camp-name{ font-weight:700!important; }
.camp-reward{ background:var(--accent-tint)!important; color:var(--accent-text)!important; border:none!important; border-radius:999px!important; padding:4px 10px!important; font-weight:700!important; }
.camp-meta{ border-top:1px solid var(--border)!important; }
.camp-bar{ height:6px!important; background:var(--bg-card2)!important; border:none!important; border-radius:999px!important; }
.camp-bar-fill{ background:var(--accent)!important; }

/* --- FORMS --- */
.form-input{ background:var(--bg-card)!important; border:1.5px solid var(--border-2)!important; border-radius:12px!important; box-shadow:none!important; transition:var(--t)!important; }
.form-input:focus{ border-color:var(--accent)!important; box-shadow:0 0 0 4px var(--accent-tint)!important; transform:none!important; }
.form-label{ font-family:var(--font-body)!important; color:var(--text)!important; text-transform:none!important; font-weight:600!important; }

/* --- AUTH --- */
.auth-box{ border:1px solid var(--border)!important; border-radius:22px!important; box-shadow:var(--shadow-lg)!important; }
.auth-logo-ico{ background:var(--accent)!important; border:none!important; border-radius:16px!important; box-shadow:0 8px 20px rgba(236,58,102,.25)!important; }
.auth-logo-ico svg path,.auth-logo-ico svg circle{ fill:#fff!important; }
.auth-title{ font-family:var(--font-serif)!important; font-weight:700!important; letter-spacing:-.3px!important; }
.social-btn{ border:1.5px solid var(--border-2)!important; border-radius:999px!important; box-shadow:none!important; font-weight:600!important; background:var(--bg-card)!important; color:var(--text)!important; transition:var(--t)!important; }
.social-btn:hover{ transform:translateY(-2px)!important; box-shadow:var(--shadow)!important; }
.social-kakao{ background:#FEE500!important; color:#3A1D1D!important; border-color:#FEE500!important; }
.social-naver{ background:#03C75A!important; color:#fff!important; border-color:#03C75A!important; }
.auth-footer a,.remember-row a{ color:var(--accent-text)!important; }

/* --- FILTER / CHIP / TAB --- */
.filter-tag,.rtab,.chip{ border:1.5px solid var(--border-2)!important; border-radius:999px!important; font-weight:600!important; background:var(--bg-card)!important; color:var(--text)!important; box-shadow:none!important; }
.filter-tag.active,.rtab.active,.chip.active{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important; }

/* --- REGION / CATEGORY TILES --- */
.rsec,.cat-sec,.cat-hero-card{ border:1px solid var(--border)!important; border-radius:18px!important; box-shadow:var(--shadow)!important; transition:var(--t)!important; }
.rsec:hover,.cat-sec:hover,.cat-hero-card:hover{ transform:translateY(-4px)!important; box-shadow:var(--shadow-lg)!important; }
.rsec-ico,.cat-sec-ico,.cat-ico-lg,.ico{ border:none!important; border-radius:12px!important; background:var(--accent-tint)!important; color:var(--accent-text)!important; }
.rsec-ico svg,.cat-sec-ico svg,.cat-ico-lg svg{ stroke:var(--accent-text)!important; }

/* --- ADMIN --- */
.admin-card{ border:1px solid var(--border)!important; border-radius:18px!important; box-shadow:var(--shadow)!important; }
.admin-card-title{ font-weight:700!important; font-family:var(--font-serif)!important; }
.sidebar-link{ border-radius:999px!important; font-weight:600!important; border:none!important; }
.sidebar-link:hover{ background:var(--accent-tint)!important; color:var(--accent-text)!important; }
.sidebar-link.s-active,.sidebar-link.active{ background:var(--accent)!important; color:#fff!important; }
.sidebar-link.s-active svg,.sidebar-link.active svg{ stroke:#fff!important; }
.sidebar-section-label{ font-family:var(--font-body)!important; letter-spacing:1.5px!important; }

/* --- MYPAGE THUMBS --- */
.app-ico{ border:1px solid var(--border)!important; border-radius:12px!important; background-size:cover!important; background-position:center!important; }
.app-item:nth-of-type(8n+1) .app-ico{ background-image:url(../../assets/img/sushi.jpg)!important; }
.app-item:nth-of-type(8n+2) .app-ico{ background-image:url(../../assets/img/cafe.jpg)!important; }
.app-item:nth-of-type(8n+3) .app-ico{ background-image:url(../../assets/img/skincare.jpg)!important; }
.app-item:nth-of-type(8n+4) .app-ico{ background-image:url(../../assets/img/hanwoo.jpg)!important; }
.app-item:nth-of-type(8n+5) .app-ico{ background-image:url(../../assets/img/ramen.jpg)!important; }
.app-item:nth-of-type(8n+6) .app-ico{ background-image:url(../../assets/img/taco.jpg)!important; }
.app-item:nth-of-type(8n+7) .app-ico{ background-image:url(../../assets/img/winebar.jpg)!important; }
.app-item:nth-of-type(8n) .app-ico{ background-image:url(../../assets/img/vegan.jpg)!important; }

/* --- REVIEW THUMBS --- */
.rev-img{ height:150px!important; border-bottom:1px solid var(--border)!important; background-size:cover!important; background-position:center!important; }
.rev-img{ background-image:url(../../assets/img/ramen.jpg); }
div>*:nth-child(8n+1)>.rev-img{ background-image:url(../../assets/img/sushi.jpg)!important; }
div>*:nth-child(8n+2)>.rev-img{ background-image:url(../../assets/img/cafe.jpg)!important; }
div>*:nth-child(8n+3)>.rev-img{ background-image:url(../../assets/img/hanwoo.jpg)!important; }
div>*:nth-child(8n+4)>.rev-img{ background-image:url(../../assets/img/taco.jpg)!important; }
div>*:nth-child(8n+5)>.rev-img{ background-image:url(../../assets/img/winebar.jpg)!important; }
div>*:nth-child(8n+6)>.rev-img{ background-image:url(../../assets/img/vegan.jpg)!important; }
div>*:nth-child(8n+7)>.rev-img{ background-image:url(../../assets/img/skincare.jpg)!important; }
div>*:nth-child(8n)>.rev-img{ background-image:url(../../assets/img/ramen.jpg)!important; }

/* --- avatar circles / gradient chips that used brand-gradient --- */
/* (brand-gradient now = solid purple; white text on it stays readable) */

/* --- FOOTER --- */
.site-footer{ border-top:1px solid var(--border)!important; }
.footer-col h4{ font-family:var(--font-body)!important; text-transform:none!important; font-weight:700!important; }
.footer-col a:hover{ color:var(--accent-text)!important; }
.footer-top{ border-bottom:1px solid var(--border)!important; }

/* --- MOBILE MENU --- */
.mobile-menu{ border-bottom:1px solid var(--border)!important; }
.mobile-menu a{ border-bottom:1px solid var(--border)!important; font-weight:600!important; }

/* --- SAFETY NET: any lime bg + white text left anywhere --- */
[style*="D6FF3F"], [style*="#d6ff3f"]{ background:var(--accent)!important; color:#fff!important; }

/* ============================================================
   MOBILE FIX — 옛 서브페이지 인라인 grid/아이콘 강제 정리
   (인라인 style을 !important + 속성선택자로 오버라이드)
   ============================================================ */
@media (max-width: 768px) {
  /* 4·3칸 인라인 그리드 → 2칸 */
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  /* 7칸(관심사 등) → 3칸 */
  [style*="repeat(7,1fr)"], [style*="repeat(7, 1fr)"] { grid-template-columns: repeat(3,1fr) !important; }
  /* 거대 카테고리/지역 상세 타일 아이콘 억제 */
  .cat-ico-lg, .cat-sec-ico, .rsec-ico { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
  .cat-ico-lg svg, .cat-sec-ico svg, .rsec-ico svg { width: 22px !important; height: 22px !important; }
  .cat-hero-card, .cat-sec, .rsec { padding: 16px !important; }
  /* 캠페인 카드 이미지가 이모지/폰트로 눌리지 않게 최소 높이 */
  .camp-img { min-height: 120px !important; }
  .camp-name { font-size: 13px !important; line-height: 1.35 !important; }
  .camp-desc { font-size: 12px !important; }
  .camp-reward { font-size: 11px !important; }
}
@media (max-width: 480px) {
  /* 아주 좁은 화면: 캠페인/상품 그리드는 1칸 */
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(2,1fr)"], [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="repeat(7,1fr)"], [style*="repeat(7, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  /* 2단 본문 레이아웃(상세페이지 1fr 320px 등) → 세로 */
  [style*="1fr 320px"], [style*="1fr 300px"], [style*="320px 1fr"], [style*="220px 1fr"], [style*="240px 1fr"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   VIEW TOGGLE — 크게 보기 / 작게 보기 (캠페인 목록)
   body.view-compact 이면 카드 그리드를 더 촘촘히
   ============================================================ */
.view-switch { display: inline-flex; gap: 4px; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.view-switch button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-muted); background: transparent; cursor: pointer; transition: var(--t); }
.view-switch button svg { width: 16px; height: 16px; }
.view-switch button.active { background: var(--accent); color: #fff; }

/* 작게 보기: 데스크탑에선 한 줄 더 촘촘, 모바일에선 2열 */
body.view-compact [style*="repeat(4,1fr)"], body.view-compact [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(5,1fr) !important; gap: 12px !important; }
body.view-compact [style*="repeat(3,1fr)"], body.view-compact [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(4,1fr) !important; }
body.view-compact .camp-desc { display: none !important; }
body.view-compact .camp-img { min-height: 120px !important; height: 130px !important; }
body.view-compact .camp-body { padding: 10px !important; }
body.view-compact .camp-name { font-size: 13px !important; }

@media (max-width: 768px) {
  /* 크게 보기(기본): 1열 큰 카드 — 이미 mobile fix에서 처리 */
  /* 작게 보기: 2열 컴팩트 */
  body.view-compact [style*="repeat(4,1fr)"], body.view-compact [style*="repeat(4, 1fr)"],
  body.view-compact [style*="repeat(3,1fr)"], body.view-compact [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  body.view-compact .camp-img { height: 100px !important; min-height: 100px !important; }
  body.view-compact .camp-region, body.view-compact .camp-bar { display: none !important; }
  body.view-compact .camp-name { font-size: 12px !important; -webkit-line-clamp: 2; }
  body.view-compact .camp-meta { padding-top: 8px !important; }
  body.view-compact .camp-reward { font-size: 10px !important; padding: 2px 6px !important; }
  body.view-compact .camp-slots { font-size: 10px !important; }
}
@media (max-width: 480px) {
  /* 작게 보기는 480서도 2열 유지(더 많이 보이게) */
  body.view-compact [style*="repeat(4,1fr)"], body.view-compact [style*="repeat(4, 1fr)"],
  body.view-compact [style*="repeat(3,1fr)"], body.view-compact [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* 뒤로가기 버튼(옛 서브페이지) */
.back-bar { max-width: 1240px; margin: 0 auto; padding: 16px 20px 0; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text-muted); background: var(--bg-card); border: 1.5px solid var(--border-2); border-radius: 999px; padding: 8px 16px 8px 12px; transition: var(--t); cursor: pointer; text-decoration: none; }
.back-btn:hover { color: var(--accent-text); border-color: var(--accent); }
.back-btn svg { width: 18px; height: 18px; }