/* ==========================================================
   LUMEX THEME LAYER — 마케팅랩 (2026-09-20)
   lumexcorp 리뉴얼시안의 질감을 커뮤니티에 이식하는 최상위 레이어.
   로드 순서: style → extra → features → style-v2 → style-clean → lumex(마지막)

   원칙
   1) 구조/마크업은 건드리지 않는다. 이 파일만 빼면 원상복구된다.
   2) 베이스는 바이올렛(기존 인디고 계열 유지), 라임은 "살아있는 신호"에만.
   3) 숨김 CSS 는 JS 가 성공한 뒤에만 켜진다 (html.lxrv). 시안의 안전장치 계승.
   ========================================================== */

:root {
  /* ── 시안 이식 토큰 ── */
  --lx-ink:#0c0c12;
  --lx-deep:#0a0a10;
  --lx-deep2:#12121b;
  --lx-paper:#f6f6f9;
  --lx-white:#fff;

  --lx-muted:#757a87;
  --lx-sub:#5b606d;
  --lx-faint:#9aa0ad;
  --lx-line:#e4e5ec;
  --lx-line2:#eff0f5;

  /* 메인 — 바이올렛 */
  --lx-v:#8b5cf6;
  --lx-v-d:#6d28d9;
  --lx-v-l:#f4f0ff;
  --lx-v-b:#ddd2fb;

  /* 액센트 — 라임 (LIVE·활동중·NEW 에만) */
  --lx-lime:#b9ff66;
  --lx-lime-d:#4c9800;
  --lx-lime-l:#f3fce4;

  --lx-max:1240px;

  /* 그림자 3단 — 시안 그대로 */
  --lx-s1:0 1px 2px rgba(12,12,18,.05);
  --lx-s2:0 6px 18px rgba(12,12,18,.07),0 1px 3px rgba(12,12,18,.05);
  --lx-s3:0 24px 52px rgba(12,12,18,.13),0 6px 14px rgba(12,12,18,.06);

  /* 이징 — 시안 그대로 */
  --lx-e:cubic-bezier(.22,1,.36,1);
}

html, body {
  background: var(--lx-paper) !important;
  letter-spacing: -.02em;
}
::selection { background: var(--lx-v); color: #fff; }

/* ==========================================================
   1. EYEBROW — 시안의 마이크로 라벨
   ========================================================== */
.lx-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:9.5px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lx-v-d);
}
.lx-eyebrow i.dot{
  width:6px;height:6px;border-radius:50%;background:var(--lx-v);
  box-shadow:0 0 8px rgba(139,92,246,.55);display:inline-block;flex:none;
}
.lx-eyebrow.live{color:var(--lx-lime-d)}
.lx-eyebrow.live i.dot{background:var(--lx-lime-d);box-shadow:0 0 8px rgba(76,152,0,.5)}

/* ==========================================================
   2. PILL 버튼 — 시안 이식
   ========================================================== */
.ml-main .btn,
.ml-main .btn-primary,
.header-quick .btn-primary,
.btn-point-charge,
.ml-more,
.lx-pill{
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  transition:transform .22s var(--lx-e), box-shadow .22s var(--lx-e), background .2s, border-color .2s !important;
}
.header-quick .btn-primary{
  background:var(--lx-ink) !important;border-color:var(--lx-ink) !important;color:#fff !important;
  padding:0 20px !important;min-height:40px !important;
  display:inline-flex !important;align-items:center;gap:7px;
}
.header-quick .btn-primary:hover{
  transform:translateY(-2px);box-shadow:var(--lx-s3) !important;
}
.btn-point-charge{
  background:var(--lx-lime) !important;color:#16240a !important;border:1px solid var(--lx-lime) !important;
  font-weight:850 !important;
}
.btn-point-charge:hover{
  transform:translateY(-1px);box-shadow:0 10px 22px rgba(185,255,102,.42) !important;
}

/* 사이드바·게시판의 기본 버튼들 — 예전 파란색(#2563eb)이 남아 톤이 튀었다.
   시안의 잉크/바이올렛으로 통일한다. */
.sidebar .btn-primary,
.left-sidebar .btn-primary,
.login-box .btn-primary,
.board-header .btn-primary,
.btn-write,
a.btn-primary,
button.btn-primary{
  background:var(--lx-ink) !important;
  border-color:var(--lx-ink) !important;
  color:#fff !important;
  border-radius:999px !important;
  font-weight:800 !important;
  transition:transform .22s var(--lx-e), box-shadow .22s var(--lx-e) !important;
}
.sidebar .btn-primary:hover,
.left-sidebar .btn-primary:hover,
.login-box .btn-primary:hover,
.board-header .btn-primary:hover,
.btn-write:hover,
a.btn-primary:hover,
button.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:var(--lx-s2) !important;
  color:#fff !important;
}
.sidebar .btn-outline,
.btn-outline{
  border-radius:999px !important;font-weight:800 !important;
}

/* 더보기 링크 — 화살표가 밀려나는 시안 모션 */
.ml-more{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--lx-muted) !important;
  padding:5px 12px;border:1px solid var(--lx-line);background:#fff;
}
.ml-more:hover{
  color:var(--lx-ink) !important;border-color:var(--lx-ink);
  transform:translateY(-1px);box-shadow:var(--lx-s2);
}

/* ==========================================================
   3. HERO — 시안의 딥 배경 + 베일 + 상하 그라데이션
   ========================================================== */
.ml-hero{
  position:relative;overflow:hidden;
  background:var(--lx-deep) !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:var(--lx-s3) !important;
}
.ml-hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(980px 640px at 76% 42%, rgba(139,92,246,.20), transparent 68%),
    radial-gradient(620px 420px at 12% 88%, rgba(185,255,102,.075), transparent 70%);
}
.ml-hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,12,.55) 0%, transparent 24%, transparent 74%, rgba(8,8,12,.80) 100%);
}
.ml-hero-inner{position:relative;z-index:2}

.ml-hero h1{
  letter-spacing:-.062em !important;
  line-height:1.06 !important;
  font-weight:850 !important;
}
.ml-hero h1 .grad{
  background:linear-gradient(98deg,#ffffff 0%,#e9dcff 34%,#b9a2fb 70%,#8b5cf6 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
}

/* 히어로 배지 — 라임 LIVE 신호 */
.ml-hero-badge{
  border:1px solid rgba(185,255,102,.28) !important;
  background:rgba(185,255,102,.07) !important;
  color:#dff7b6 !important;
  border-radius:999px !important;
  font-weight:800;letter-spacing:-.01em;
}
.ml-hero-badge .dot{
  background:var(--lx-lime) !important;
  box-shadow:0 0 10px var(--lx-lime) !important;
  animation:lxpulse 2.4s var(--lx-e) infinite;
}
@keyframes lxpulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

/* 진단 입력 박스 */
.ml-diag-box{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .22s var(--lx-e), box-shadow .22s var(--lx-e);
}
.ml-diag-box:focus-within{
  border-color:rgba(185,255,102,.55) !important;
  box-shadow:0 0 0 4px rgba(185,255,102,.12) !important;
}
.ml-diag-btn{
  border-radius:999px !important;
  background:var(--lx-lime) !important;color:#16240a !important;
  font-weight:850 !important;border:0 !important;
  transition:transform .22s var(--lx-e), box-shadow .22s var(--lx-e);
}
.ml-diag-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(185,255,102,.36)}

/* 플로팅 카드 — 유리질감 */
.ml-float-card{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.28) !important;
}
.ml-float-activity .live-dot{
  background:var(--lx-lime) !important;
  box-shadow:0 0 10px var(--lx-lime) !important;
  animation:lxpulse 2.4s var(--lx-e) infinite;
}
.ml-float-activity .head{color:var(--lx-lime) !important;font-weight:850;letter-spacing:.06em;font-size:10px}
.ml-float-stats .num{
  font-weight:850 !important;letter-spacing:-.05em !important;
  background:linear-gradient(180deg,#fff,#cbb9fb);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ==========================================================
   4. 카드 / 섹션 — 시안의 얇은 선 + 3단 그림자
   ========================================================== */
.ml-card,
.ml-tool-card,
.ml-engage-card,
.ml-guide-card{
  background:#fff !important;
  border:1px solid var(--lx-line) !important;
  border-radius:16px !important;
  box-shadow:var(--lx-s1) !important;
  transition:transform .26s var(--lx-e), box-shadow .26s var(--lx-e), border-color .26s var(--lx-e) !important;
}
.ml-tool-card:hover,
.ml-engage-card:hover,
.ml-guide-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--lx-s2) !important;
  border-color:var(--lx-v-b) !important;
}
.ml-card:hover{box-shadow:var(--lx-s2) !important}

.ml-section-head h2,
.ml-card-head h3{
  font-weight:850 !important;letter-spacing:-.035em !important;
}
.ml-section-head{
  border-bottom:0 !important;
  padding-bottom:14px !important;
}
.ml-card-head{
  border-bottom:1px solid var(--lx-line2) !important;
}

/* 도구 아이콘 — 시안톤으로 채도 낮춤 */
.ml-tool-icon{
  border-radius:13px !important;
  box-shadow:var(--lx-s1);
}

/* 태그 */
.ml-tool-tag,
.ml-tag{
  border-radius:999px !important;font-weight:800 !important;letter-spacing:-.01em;
}
.ml-tool-tag.new{
  background:var(--lx-lime-l) !important;color:var(--lx-lime-d) !important;
  border:1px solid rgba(76,152,0,.22) !important;
}

/* ==========================================================
   5. 리스트 — 읽기 밀도 정리
   ========================================================== */
.ml-list li{
  border-bottom:1px solid var(--lx-line2) !important;
  transition:background .16s var(--lx-e), padding-left .2s var(--lx-e) !important;
}
.ml-list li:hover{
  background:var(--lx-v-l) !important;
  padding-left:6px !important;
}
.ml-list li:last-child{border-bottom:0 !important}
.ml-title-text{letter-spacing:-.022em}
.ml-when{color:var(--lx-faint) !important;font-variant-numeric:tabular-nums}
.ml-empty{color:var(--lx-faint) !important;font-size:13px;text-align:center;padding:26px 0 !important}

/* ==========================================================
   6. 헤더 / 내비 — 시안의 stuck 유리
   ========================================================== */
.header-main{
  border-bottom:1px solid var(--lx-line) !important;
}
.logo-title{
  font-weight:850 !important;letter-spacing:-.06em !important;
}
.logo-subtitle{color:var(--lx-faint) !important;letter-spacing:-.01em}

.nav-main{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--lx-line) !important;
  box-shadow:none !important;
}
.nav-menu .nav-link{
  font-size:13px !important;font-weight:750 !important;letter-spacing:-.022em !important;
  border-radius:999px !important;
  color:var(--lx-sub) !important;
  transition:.18s var(--lx-e) !important;
}
.nav-menu .nav-link:hover,
.nav-menu .nav-item:hover > .nav-link{
  color:var(--lx-ink) !important;
  background:rgba(12,12,18,.05) !important;
}
.nav-dropdown{
  border:1px solid var(--lx-line) !important;
  border-radius:14px !important;
  box-shadow:var(--lx-s3) !important;
  padding:7px !important;
  overflow:hidden;
}
.nav-dropdown li a{
  border-radius:9px !important;font-size:13px !important;font-weight:650 !important;
  transition:.15s var(--lx-e) !important;
}
.nav-dropdown li a:hover{background:var(--lx-v-l) !important;color:var(--lx-v-d) !important}

.header-top{background:var(--lx-ink) !important;border-bottom:0 !important}
.header-top a, .header-top span{color:rgba(255,255,255,.66) !important}
.header-top a:hover{color:#fff !important}
.header-top .point-display{
  background:rgba(185,255,102,.13) !important;color:var(--lx-lime) !important;
  border-radius:999px !important;padding:3px 11px !important;font-weight:800 !important;
}

/* 검색 */
.search-form{
  border:1px solid var(--lx-line) !important;border-radius:999px !important;
  overflow:hidden;transition:border-color .2s var(--lx-e), box-shadow .2s var(--lx-e);
}
.search-form:focus-within{
  border-color:var(--lx-v) !important;box-shadow:0 0 0 4px rgba(139,92,246,.11) !important;
}
.search-input, .search-select{border:0 !important;background:transparent !important}
.search-btn{background:var(--lx-ink) !important;color:#fff !important;border:0 !important}

/* ==========================================================
   7. 게시판 목록 페이지
   ========================================================== */
.board-list-table tbody tr,
.post-list li,
.board-row{
  transition:background .16s var(--lx-e) !important;
}
.board-list-table tbody tr:hover,
.post-list li:hover{background:var(--lx-v-l) !important}
.board-list-table th{
  font-size:12px !important;font-weight:800 !important;
  letter-spacing:.02em !important;color:var(--lx-muted) !important;
  border-bottom:1px solid var(--lx-line) !important;
}

/* ==========================================================
   8. 접근성 — 시안 미결 3순위였던 focus-visible, 여기선 처음부터 넣는다
   ========================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--lx-v) !important;
  outline-offset:2px !important;
  border-radius:6px;
}
.ml-hero a:focus-visible,
.ml-hero button:focus-visible,
.ml-hero input:focus-visible{
  outline-color:var(--lx-lime) !important;
}

/* ==========================================================
   9. 스크롤 리빌 — 시안 ③ 이식
   숨김은 html.lxrv 가 붙은 뒤에만. JS 실패 시 전부 보임.
   ========================================================== */
html.lxrv .lx-rv{
  opacity:0;
  transform:translateY(16px) scale(.978);
  transition:opacity .62s var(--lx-e), transform .62s var(--lx-e), filter .62s var(--lx-e);
  will-change:opacity,transform;
}
html.lxrv .lx-rv.h{
  transform:translateY(14px);
  filter:blur(9px);
}
html.lxrv .lx-rv.on{
  opacity:1;transform:none;filter:none;
}
@media(prefers-reduced-motion:reduce){
  html.lxrv .lx-rv{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .ml-hero-badge .dot,.ml-float-activity .live-dot{animation:none !important}
}

/* ==========================================================
   10. 모바일
   ========================================================== */

/* 히어로 플로팅 카드 — 데스크톱에선 겹쳐 띄우는 연출이지만
   좁은 화면에선 position:absolute 세 장이 그대로 포개져 글씨가 읽히지 않았다.
   960px 아래에선 흐름에 되돌려 세로로 쌓는다. */
@media(max-width:960px){
  /* 그리드/플렉스 아이템의 기본 min-width 는 auto 라서,
     안쪽 내용(3칸 통계 카드 등)이 화면보다 넓으면 트랙이 늘어나
     히어로 전체가 가로로 삐져나간다. min-width:0 으로 줄어들 수 있게 한다. */
  .ml-hero-inner, .ml-hero-left, .ml-hero-right{min-width:0 !important;}
  .ml-hero-left{max-width:100% !important}

  .ml-hero-right{
    height:auto !important;min-height:0 !important;
    display:flex !important;flex-direction:column;gap:10px;margin-top:24px;
  }
  .ml-float-card{
    position:static !important;
    top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
    width:100% !important;min-width:0 !important;transform:none !important;
  }
  .ml-float-stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .ml-float-stats .num{font-size:20px !important}
  .ml-float-card .item-text{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
  }
  .ml-float-badge{align-self:flex-start}
}

/* "무료 진단" 버튼이 좁은 폭에서 한 글자씩 세로로 쪼개지던 문제 */
.ml-diag-btn{
  white-space:nowrap !important;
  flex:0 0 auto !important;
  min-width:max-content !important;
}
.ml-diag-box{display:flex !important;align-items:center;gap:8px}
.ml-diag-box input{min-width:0 !important;flex:1 1 auto !important}

@media(max-width:768px){
  .ml-hero{border-radius:16px !important}
  .ml-hero h1{letter-spacing:-.045em !important}
  .ml-card,.ml-tool-card{border-radius:14px !important}
}

@media(max-width:480px){
  /* 아주 좁은 화면에선 입력과 버튼을 위아래로 */
  .ml-diag-box{flex-wrap:wrap;border-radius:18px !important;padding:8px !important}
  .ml-diag-box input{flex:1 1 100% !important;text-align:center}
  .ml-diag-btn{flex:1 1 100% !important;justify-content:center}
}

/* ==========================================================
   11. 다크모드 보정 — 기존 [data-theme=dark] 위에 얹는다
   ========================================================== */
[data-theme="dark"]{
  --lx-paper:#0f0f16;
  --lx-line:#252533;
  --lx-line2:#1d1d28;
  --lx-muted:#8b909e;
  --lx-faint:#6b7080;
  --lx-v-l:#1b1630;
}
[data-theme="dark"] .ml-card,
[data-theme="dark"] .ml-tool-card,
[data-theme="dark"] .ml-engage-card,
[data-theme="dark"] .ml-guide-card{
  background:#16161f !important;border-color:#252533 !important;
}
[data-theme="dark"] .nav-main{background:rgba(15,15,22,.88) !important}
[data-theme="dark"] .ml-list li:hover{background:#1b1630 !important}

/* ── 커뮤니티 활력 섹션 (index.php 인라인 스타일 위에 얹는다)
      [data-theme] + class 라 인라인 <style> 의 단일 class 보다 우선순위가 높다 ── */
[data-theme="dark"] .cp-need,
[data-theme="dark"] .cp-box{background:#16161f !important;border-color:#252533 !important}
[data-theme="dark"] .cp-need-head,
[data-theme="dark"] .cp-need li{border-color:#1d1d28 !important}
[data-theme="dark"] .cp-need-head h2,
[data-theme="dark"] .cp-box h3,
[data-theme="dark"] .cp-tt,
[data-theme="dark"] .cp-mi-t b,
[data-theme="dark"] .cp-rank span,
[data-theme="dark"] .cp-clean b{color:#e8e8f2 !important}
[data-theme="dark"] .cp-need li a{color:#e8e8f2 !important}
[data-theme="dark"] .cp-need li:hover{background:#1b1630 !important}
[data-theme="dark"] .cp-bd{background:#241c3d !important;color:#c4b5fd !important}
[data-theme="dark"] .cp-meta,
[data-theme="dark"] .cp-rank em,
[data-theme="dark"] .cp-mi-n,
[data-theme="dark"] .cp-clean span{color:#7d8393 !important}
[data-theme="dark"] .cp-foot{background:#12121a !important;color:#8b909e !important;border-top:1px solid #1d1d28}
[data-theme="dark"] .cp-guest p{color:#8b909e !important}
[data-theme="dark"] .cp-bar{background:#252533 !important}
[data-theme="dark"] .cp-mi,
[data-theme="dark"] .cp-rank li{border-color:#1d1d28 !important}
[data-theme="dark"] .cp-rank b{background:#252533 !important;color:#8b909e !important}
[data-theme="dark"] .cp-rank li:nth-child(-n+3) b{background:#e8e8f2 !important;color:#0c0c12 !important}
[data-theme="dark"] .cp-quick{background:#1c1c26 !important;border-color:#252533 !important;color:#e8e8f2 !important}
[data-theme="dark"] .cp-quick:hover{background:#1b1630 !important;border-color:#2f2452 !important}
[data-theme="dark"] .cp-reply{background:#e8e8f2 !important;color:#0c0c12 !important}
[data-theme="dark"] .cp-count{background:#2e2011 !important;color:#fbbf24 !important}

/* ── 프로그램 카탈로그 ── */
[data-theme="dark"] .pg-card{background:#16161f !important;border-color:#252533 !important}
[data-theme="dark"] .pg-name{color:#e8e8f2 !important}
[data-theme="dark"] .pg-desc{color:#9aa0ad !important}
[data-theme="dark"] .pg-price{color:#e8e8f2 !important}
[data-theme="dark"] .pg-foot{border-color:#1d1d28 !important}
[data-theme="dark"] .pg-tab{background:#16161f !important;border-color:#252533 !important;color:#9aa0ad !important}
[data-theme="dark"] .pg-tab.on{background:#e8e8f2 !important;border-color:#e8e8f2 !important;color:#0c0c12 !important}
[data-theme="dark"] .pg-go{background:#e8e8f2 !important;color:#0c0c12 !important}
[data-theme="dark"] .pg-sub{background:linear-gradient(120deg,#1b1630,#16161f 62%) !important;border-color:#2f2452 !important}
[data-theme="dark"] .pg-sub h3,[data-theme="dark"] .pg-sub .price strong{color:#e8e8f2 !important}
[data-theme="dark"] .pg-sub p,[data-theme="dark"] .pg-sub .price span{color:#9aa0ad !important}
[data-theme="dark"] .pg-how{background:#16161f !important;border-color:#252533 !important}
[data-theme="dark"] .pg-how h3,[data-theme="dark"] .pg-step div strong{color:#e8e8f2 !important}
[data-theme="dark"] .pg-step div p{color:#9aa0ad !important}
[data-theme="dark"] .pg-step b{background:#e8e8f2 !important;color:#0c0c12 !important}

/* ============================================================
   ============================================================
   PART 2 — 전 페이지 공통 (2026-09-20)

   PART 1 은 메인(ml-*)·헤더·내비만 잡았다.
   도구·마켓몰·매칭·콘텐츠·글보기·마이페이지는 각자 다른 클래스 체계를 써서
   예전 스타일 그대로 남아 있었다. 여기서 공통 부품 단위로 전부 맞춘다.

   방식: 새 클래스를 만들지 않고 이미 쓰이는 클래스에 얹는다.
         (btn / card / form-* / badge / table / modal / post-* …)
   ============================================================
   ============================================================ */

/* ==========================================================
   P2-1. 버튼 — 전부 pill + 잉크 톤
   ========================================================== */
.btn,
button.btn,
a.btn,
input[type="submit"],
input[type="button"],
.tab-btn,
.filter-chip,
.category-tab,
.cat-sec-tab{
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:-.018em !important;
  font-family:inherit !important;
  transition:transform .22s var(--lx-e), box-shadow .22s var(--lx-e),
             background .2s var(--lx-e), border-color .2s var(--lx-e), color .2s !important;
}

.btn{
  display:inline-flex !important;align-items:center;justify-content:center;gap:7px;
  padding:0 20px !important;min-height:42px !important;
  font-size:13.5px !important;border:1px solid transparent !important;
  cursor:pointer;white-space:nowrap;
}
.btn i{font-size:.92em}

.btn-primary,
input[type="submit"]{
  background:var(--lx-ink) !important;border-color:var(--lx-ink) !important;color:#fff !important;
}
.btn-primary:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);box-shadow:var(--lx-s3) !important;color:#fff !important;
}

.btn-secondary{
  background:var(--lx-v) !important;border-color:var(--lx-v) !important;color:#fff !important;
}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(139,92,246,.30) !important;color:#fff !important}

.btn-outline,
.btn-ghost{
  background:#fff !important;border-color:var(--lx-line) !important;color:var(--lx-sub) !important;
}
.btn-outline:hover,
.btn-ghost:hover{
  border-color:var(--lx-ink) !important;color:var(--lx-ink) !important;
  transform:translateY(-1px);box-shadow:var(--lx-s2) !important;
}

.btn-danger{
  background:#e5484d !important;border-color:#e5484d !important;color:#fff !important;
}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(229,72,77,.28) !important;color:#fff !important}

.btn-success{background:var(--lx-lime-d) !important;border-color:var(--lx-lime-d) !important;color:#fff !important}

.btn-sm{min-height:33px !important;padding:0 14px !important;font-size:12px !important}
.btn-lg{min-height:52px !important;padding:0 28px !important;font-size:14.5px !important}
.btn-block,.btn.full{width:100%}

/* 비활성 */
.btn:disabled,.btn.disabled,.btn[disabled]{
  background:var(--lx-line2) !important;border-color:var(--lx-line2) !important;
  color:var(--lx-faint) !important;transform:none !important;box-shadow:none !important;cursor:default;
}

/* ==========================================================
   P2-2. 카드 — 얇은 선 + 16px + 3단 그림자
   ========================================================== */
.card,
.tool-card,
.tool-card-sm,
.result-card,
.stat-card,
.sh-card,
.pmc-card,
.price-mobile-card,
.mypage-section,
.form-section,
.admin-panel,
.matching-wrap > .panel,
.content-card,
.guide-card,
.post-view{
  background:#fff !important;
  border:1px solid var(--lx-line) !important;
  border-radius:16px !important;
  box-shadow:var(--lx-s1) !important;
  transition:transform .26s var(--lx-e), box-shadow .26s var(--lx-e), border-color .26s var(--lx-e) !important;
}

/* 누를 수 있는 카드만 떠오르게 — 정보 카드는 가만히 둔다 */
a.card:hover,
a.tool-card:hover,
.tool-card:hover,
.tool-card-sm:hover,
a.sh-card:hover,
.sh-card:hover,
a.result-card:hover,
a.guide-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--lx-s2) !important;
  border-color:var(--lx-v-b) !important;
}

.card-header,
.result-card-header,
.sh-head,
.panel-header{
  border-bottom:1px solid var(--lx-line2) !important;
  background:transparent !important;
  padding:16px 20px !important;
}
.card-body{padding:20px !important}
.card-title,
.card-header h2,.card-header h3,.card-header h4{
  font-weight:850 !important;letter-spacing:-.035em !important;margin:0 !important;
}

/* 도구 카드 아이콘 */
.tool-icon,.tool-icon-sm,.section-icon,.stat-icon,.sh-thumb-empty{
  border-radius:13px !important;
  box-shadow:var(--lx-s1);
}
.tool-icon-sm{border-radius:10px !important}

/* 상품 썸네일 */
.sh-thumb,.sh-thumb img{border-radius:12px !important;overflow:hidden}

/* ==========================================================
   P2-3. 페이지 머리 — 연보라 그라데이션 박스를 걷어낸다
   ========================================================== */
.page-header,
.tools-header,
.tools-section-header,
.tool-header,
.section-header{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--lx-line) !important;
  border-radius:0 !important;
  padding:6px 0 16px !important;
  margin-bottom:22px !important;
  text-align:left !important;
  box-shadow:none !important;
}
.page-header h1,
.tools-header h1,
.tool-header h1,
.section-header h1,
.page-header h2,
.tools-section-header h2{
  font-size:clamp(20px,2.4vw,27px) !important;
  font-weight:850 !important;
  letter-spacing:-.045em !important;
  margin:0 0 5px !important;
  text-align:left !important;
}
.page-header p,
.page-desc,
.tools-header p,
.section-desc,
.section-subtitle{
  color:var(--lx-muted) !important;
  font-size:13.5px !important;
  margin:0 !important;
  text-align:left !important;
}

/* 섹션 제목 줄 — 아이콘 + 제목 + 우측 설명 */
.tools-section-header{
  display:flex !important;align-items:center;gap:12px;flex-wrap:wrap;
}
.tools-section-header .section-desc{margin-left:auto !important;font-size:12px !important}

/* ==========================================================
   P2-4. 폼 — 초점 링 통일
   ========================================================== */
.form-input,
.form-control,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea{
  border:1px solid var(--lx-line) !important;
  border-radius:11px !important;
  padding:11px 14px !important;
  font-size:13.5px !important;
  font-family:inherit !important;
  background:#fff !important;
  color:var(--lx-ink) !important;
  transition:border-color .2s var(--lx-e), box-shadow .2s var(--lx-e) !important;
}
.form-input:focus,
.form-control:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:0 !important;
  border-color:var(--lx-v) !important;
  box-shadow:0 0 0 4px rgba(139,92,246,.11) !important;
}
.form-input::placeholder,
.form-control::placeholder,
textarea::placeholder{color:var(--lx-faint) !important}

.form-label,.label,.pf-form-label{
  font-size:12.5px !important;font-weight:800 !important;
  letter-spacing:-.018em !important;color:var(--lx-sub) !important;
  margin-bottom:6px !important;display:block;
}
.form-label .required,.required{color:#e5484d !important;font-weight:800}
.form-text,.form-hint{font-size:11.5px !important;color:var(--lx-faint) !important;margin-top:5px !important}
.form-group,.pf-form-group{margin-bottom:16px !important}

/* 헤더 검색창은 PART 1 에서 pill 로 잡았으니 여기 규칙에서 뺀다 */
.search-form .search-input,
.search-form .search-select,
.ml-diag-box input{
  border:0 !important;box-shadow:none !important;border-radius:0 !important;background:transparent !important;
}

/* ==========================================================
   P2-5. 배지 · 칩 · 탭
   ========================================================== */
.badge,
.status-badge,
.tool-badge,
.eval-badge,
.badge-hot,
.badge-new{
  display:inline-flex;align-items:center;gap:4px;
  border-radius:999px !important;
  padding:3px 10px !important;
  font-size:10.5px !important;
  font-weight:850 !important;
  letter-spacing:-.005em !important;
  line-height:1.5;
}
.badge-hot{background:#fff1f0 !important;color:#c22b2b !important;border:1px solid #fbd5d2 !important}
.badge-new{background:var(--lx-lime-l) !important;color:var(--lx-lime-d) !important;border:1px solid rgba(76,152,0,.22) !important}
.tool-badge{background:var(--lx-v-l) !important;color:var(--lx-v-d) !important;border:1px solid var(--lx-v-b) !important}

/* 칩/탭 */
.filter-chip,.category-tab,.cat-sec-tab,.tab-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px !important;
  border:1px solid var(--lx-line) !important;
  background:#fff !important;
  color:var(--lx-sub) !important;
  font-size:12.5px !important;font-weight:750 !important;
  cursor:pointer;
}
.filter-chip:hover,.category-tab:hover,.cat-sec-tab:hover,.tab-btn:hover{
  border-color:var(--lx-ink) !important;color:var(--lx-ink) !important;transform:translateY(-1px);
}
.filter-chip.active,.category-tab.active,.cat-sec-tab.active,.tab-btn.active{
  background:var(--lx-ink) !important;border-color:var(--lx-ink) !important;color:#fff !important;
}
.filter-chip .count,.category-tab .count,.filter-chip span:last-child{
  background:var(--lx-line2);color:var(--lx-muted);border-radius:999px;
  padding:1px 7px;font-size:10.5px;font-weight:800;
}
.filter-chip.active .count,.category-tab.active .count,.filter-chip.active span:last-child{
  background:rgba(255,255,255,.2);color:#fff;
}

/* ==========================================================
   P2-6. 표
   ========================================================== */
.table-wrapper{
  border:1px solid var(--lx-line) !important;
  border-radius:14px !important;
  overflow:hidden auto;
  background:#fff;
}
.table-wrapper table,table.data-table,.admin-table{width:100%;border-collapse:collapse}
.table-wrapper th,table.data-table th,.admin-table th{
  background:#fafafb !important;
  font-size:12px !important;font-weight:850 !important;
  letter-spacing:.01em !important;color:var(--lx-muted) !important;
  padding:12px 14px !important;
  border-bottom:1px solid var(--lx-line) !important;
  text-align:left;
}
.table-wrapper td,table.data-table td,.admin-table td{
  padding:12px 14px !important;
  border-bottom:1px solid var(--lx-line2) !important;
  font-size:13px !important;
}
.table-wrapper tbody tr:last-child td{border-bottom:0 !important}
.table-wrapper tbody tr{transition:background .16s var(--lx-e)}
.table-wrapper tbody tr:hover{background:var(--lx-v-l) !important}
.tnum,.mono,.amount,.price,.stat-value,.num,.value{font-variant-numeric:tabular-nums}

/* ==========================================================
   P2-7. 통계 타일
   ========================================================== */
.stat-card{padding:18px 20px !important;display:flex;align-items:center;gap:13px}
.stat-value{font-size:22px !important;font-weight:850 !important;letter-spacing:-.045em !important;line-height:1.15}
.stat-label{font-size:11.5px !important;color:var(--lx-muted) !important;font-weight:650 !important}
.stat-icon{
  width:42px;height:42px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}

/* ==========================================================
   P2-8. 빈 상태 · 알림
   ========================================================== */
.empty-state,.no-data,.sh-empty,.ml-empty{
  text-align:center !important;
  padding:48px 22px !important;
  color:var(--lx-faint) !important;
  font-size:13.5px !important;
  background:#fff;
  border:1px dashed var(--lx-line) !important;
  border-radius:16px !important;
}
.empty-state i,.no-data i,.sh-empty i{font-size:26px;opacity:.4;display:block;margin-bottom:10px}
.empty-state h3,.no-data h3{font-size:15px !important;font-weight:850 !important;color:var(--lx-sub) !important;margin-bottom:6px !important}

.alert{
  border-radius:13px !important;
  padding:13px 16px !important;
  font-size:13px !important;font-weight:650 !important;
  border:1px solid transparent !important;
  display:flex;align-items:center;gap:9px;
}
.alert-success{background:var(--lx-lime-l) !important;border-color:rgba(76,152,0,.22) !important;color:#2f6300 !important}
.alert-info{background:var(--lx-v-l) !important;border-color:var(--lx-v-b) !important;color:var(--lx-v-d) !important}
.alert-warning{background:#fff7e8 !important;border-color:#f6dfb0 !important;color:#8a5a00 !important}
.alert-danger,.alert-error{background:#fff1f0 !important;border-color:#fbd5d2 !important;color:#b02622 !important}

/* ==========================================================
   P2-9. 모달
   ========================================================== */
.modal-content,.modal > .modal-content{
  border-radius:20px !important;
  border:1px solid var(--lx-line) !important;
  box-shadow:var(--lx-s3) !important;
  overflow:hidden;
}
.modal-overlay{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:rgba(12,12,18,.48) !important}
.modal-header{border-bottom:1px solid var(--lx-line2) !important;padding:18px 22px !important}
.modal-header h3,.modal-header h4{font-weight:850 !important;letter-spacing:-.035em !important;font-size:16px !important}
.modal-body{padding:20px 22px !important;font-size:13.5px}
.modal-footer{border-top:1px solid var(--lx-line2) !important;padding:14px 22px !important;gap:9px;display:flex;justify-content:flex-end}
.modal-close{border:0;background:transparent;color:var(--lx-faint);font-size:22px;cursor:pointer;line-height:1}
.modal-close:hover{color:var(--lx-ink)}

/* ==========================================================
   P2-10. 글보기 — 읽기 편한 본문
   ========================================================== */
.post-view{padding:32px 34px !important}
.post-header{border-bottom:1px solid var(--lx-line2) !important;padding-bottom:18px !important;margin-bottom:22px !important}
.post-title{
  font-size:clamp(19px,2.3vw,25px) !important;
  font-weight:850 !important;letter-spacing:-.045em !important;line-height:1.35 !important;
  margin-bottom:14px !important;
}
.post-category{
  display:inline-block;border-radius:999px !important;
  background:var(--lx-v-l) !important;color:var(--lx-v-d) !important;
  padding:3px 11px !important;font-size:11px !important;font-weight:850 !important;
  margin-bottom:10px !important;
}
.post-meta,.post-info{font-size:12.5px !important;color:var(--lx-faint) !important}
.post-content{
  font-size:15px !important;
  line-height:1.85 !important;
  letter-spacing:-.011em !important;
  color:#26282f !important;
  word-break:keep-all;
}
.post-content p{margin-bottom:1.1em}
.post-content img{border-radius:12px;max-width:100%;height:auto}
.post-content a{color:var(--lx-v-d) !important;text-decoration:underline;text-underline-offset:3px}
.post-content blockquote{
  border-left:3px solid var(--lx-v-b);background:var(--lx-v-l);
  padding:12px 16px;border-radius:0 10px 10px 0;margin:1.2em 0;
}
.post-actions,.post-toolbar{
  display:flex;gap:9px;flex-wrap:wrap;
  padding-top:20px !important;margin-top:22px !important;
  border-top:1px solid var(--lx-line2) !important;
}
.post-navigation{
  border:1px solid var(--lx-line) !important;border-radius:14px !important;
  overflow:hidden;margin-top:20px !important;
}
.post-navigation a,.post-navigation > div{
  padding:13px 18px !important;font-size:13px !important;
  border-bottom:1px solid var(--lx-line2);transition:background .16s var(--lx-e);
}
.post-navigation a:hover{background:var(--lx-v-l) !important}
.post-navigation > *:last-child{border-bottom:0 !important}

/* 댓글 */
.comment-item,.comment-list li{
  border-bottom:1px solid var(--lx-line2) !important;
  padding:15px 0 !important;
}
.comment-item:last-child{border-bottom:0 !important}
.comment-content{font-size:13.5px !important;line-height:1.75 !important}
.comment-author{font-weight:800 !important;font-size:13px !important}
.comment-date{font-size:11.5px !important;color:var(--lx-faint) !important}

/* ==========================================================
   P2-11. 페이지네이션
   ========================================================== */
.pagination,.sh-pager,.paging{
  display:flex;gap:5px;justify-content:center;align-items:center;
  margin:26px 0 !important;flex-wrap:wrap;
}
.pagination a,.pagination span,
.sh-pager a,.sh-pager span,
.paging a,.paging span{
  min-width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--lx-line) !important;
  border-radius:9px !important;
  background:#fff !important;
  font-size:12.5px !important;font-weight:750 !important;
  color:var(--lx-sub) !important;
  transition:.18s var(--lx-e) !important;
  padding:0 9px;
}
.pagination a:hover,.sh-pager a:hover,.paging a:hover{
  border-color:var(--lx-ink) !important;color:var(--lx-ink) !important;transform:translateY(-1px);
}
.pagination .active,.pagination .current,
.sh-pager .active,.sh-pager .current,
.paging .active,.paging .current{
  background:var(--lx-ink) !important;border-color:var(--lx-ink) !important;color:#fff !important;
}

/* ==========================================================
   P2-12. 사이드바
   ========================================================== */
.sidebar-widget,.sidebar > div,.widget,.login-box{
  border-radius:16px !important;
  border:1px solid var(--lx-line) !important;
  box-shadow:var(--lx-s1) !important;
}
.sidebar-widget h3,.widget h3,.widget-title{
  font-size:14px !important;font-weight:850 !important;letter-spacing:-.035em !important;
  padding-bottom:11px !important;border-bottom:1px solid var(--lx-line2) !important;
}

/* ==========================================================
   P2-13. 마켓몰 · 상품
   ========================================================== */
.sh-card{display:flex;flex-direction:column;overflow:hidden}
.sh-card .name{font-size:13.5px !important;font-weight:750 !important;letter-spacing:-.022em !important;line-height:1.5}
.sh-card .price{font-size:16px !important;font-weight:850 !important;letter-spacing:-.04em !important}
.sh-card .meta{font-size:11.5px !important;color:var(--lx-faint) !important}
.price-lock{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px !important;font-weight:750 !important;color:var(--lx-muted) !important;
}
.stock-low{background:#fff7e8 !important;color:#8a5a00 !important;border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:800}
.stock-out{background:#fff1f0 !important;color:#b02622 !important;border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:800}
.sh-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ==========================================================
   P2-14. 단가표 (pmc-*)
   ========================================================== */
.pmc-row{border-bottom:1px solid var(--lx-line2) !important;padding:11px 0 !important}
.pmc-label{font-size:12.5px !important;color:var(--lx-muted) !important;font-weight:650 !important}
.pmc-value{font-size:13.5px !important;font-weight:800 !important;font-variant-numeric:tabular-nums}
.pmc-title{font-size:15px !important;font-weight:850 !important;letter-spacing:-.035em !important}
.pmc-note,.price-note{font-size:11.5px !important;color:var(--lx-faint) !important}
.price-low{color:var(--lx-muted) !important}
.price-avg{font-weight:850 !important;color:var(--lx-ink) !important}
.price-high{color:var(--lx-muted) !important}
.price-separator{color:var(--lx-line) !important}

/* ==========================================================
   P2-15. 접근성 — 내부 페이지에도 초점 표시
   ========================================================== */
.btn:focus-visible,
.filter-chip:focus-visible,
.category-tab:focus-visible,
.tab-btn:focus-visible,
.pagination a:focus-visible{
  outline:2px solid var(--lx-v) !important;outline-offset:2px !important;
}

/* ==========================================================
   P2-16. 다크모드
   ========================================================== */
[data-theme="dark"] .card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .tool-card-sm,
[data-theme="dark"] .result-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .sh-card,
[data-theme="dark"] .pmc-card,
[data-theme="dark"] .price-mobile-card,
[data-theme="dark"] .mypage-section,
[data-theme="dark"] .form-section,
[data-theme="dark"] .post-view,
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .sidebar-widget,
[data-theme="dark"] .widget,
[data-theme="dark"] .login-box,
[data-theme="dark"] .modal-content{
  background:#16161f !important;border-color:#252533 !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .post-header,
[data-theme="dark"] .post-actions,
[data-theme="dark"] .post-toolbar,
[data-theme="dark"] .pmc-row,
[data-theme="dark"] .comment-item,
[data-theme="dark"] .sidebar-widget h3,
[data-theme="dark"] .widget h3{border-color:#1d1d28 !important}
[data-theme="dark"] .card-title,
[data-theme="dark"] .post-title,
[data-theme="dark"] .pmc-title,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .tools-header h1,
[data-theme="dark"] .sh-card .name,
[data-theme="dark"] .sh-card .price,
[data-theme="dark"] .comment-author,
[data-theme="dark"] .price-avg{color:#e8e8f2 !important}
[data-theme="dark"] .post-content{color:#c8ccd6 !important}
[data-theme="dark"] .post-content blockquote{background:#1b1630;border-color:#3b2d63}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background:#1c1c26 !important;border-color:#252533 !important;color:#e8e8f2 !important;
}

[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .filter-chip,
[data-theme="dark"] .category-tab,
[data-theme="dark"] .cat-sec-tab,
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span,
[data-theme="dark"] .sh-pager a{
  background:#16161f !important;border-color:#252533 !important;color:#9aa0ad !important;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] .filter-chip.active,
[data-theme="dark"] .category-tab.active,
[data-theme="dark"] .cat-sec-tab.active,
[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .pagination .active,
[data-theme="dark"] .sh-pager .active{
  background:#e8e8f2 !important;border-color:#e8e8f2 !important;color:#0c0c12 !important;
}

[data-theme="dark"] .table-wrapper th{background:#12121a !important;border-color:#252533 !important;color:#8b909e !important}
[data-theme="dark"] .table-wrapper td{border-color:#1d1d28 !important}
[data-theme="dark"] .table-wrapper tbody tr:hover{background:#1b1630 !important}

[data-theme="dark"] .empty-state,
[data-theme="dark"] .no-data,
[data-theme="dark"] .sh-empty{background:#16161f !important;border-color:#252533 !important;color:#7d8393 !important}

[data-theme="dark"] .page-header,
[data-theme="dark"] .tools-header,
[data-theme="dark"] .tools-section-header,
[data-theme="dark"] .section-header{border-color:#252533 !important}

[data-theme="dark"] .post-navigation{border-color:#252533 !important}
[data-theme="dark"] .post-navigation a,
[data-theme="dark"] .post-navigation > div{border-color:#1d1d28 !important}
[data-theme="dark"] .post-navigation a:hover{background:#1b1630 !important}

/* ==========================================================
   P2-17. 모바일
   ========================================================== */
@media(max-width:768px){
  .post-view{padding:22px 18px !important}
  .card-body{padding:16px !important}
  .card-header,.sh-head{padding:14px 16px !important}
  .btn{min-height:40px !important;padding:0 16px !important}
  .btn-lg{min-height:46px !important;padding:0 20px !important}
  .table-wrapper{overflow-x:auto}
  .page-header h1,.tools-header h1{font-size:19px !important}
  .tools-section-header .section-desc{margin-left:0 !important;flex-basis:100%}
}

/* ============================================================
   ============================================================
   PART 3 — 퀄리티 (2026-09-20)

   PART 2 가 "톤을 맞추는" 작업이었다면 여기는 "읽기 좋게 만드는" 작업.

   문제였던 것
   1) 도구 카드가 가운데 정렬 + 68px 아이콘이라 한 장이 세로로 길고,
      넓은 화면에서 2개씩만 들어가 여백만 커 보였다. 훑어보기도 어렵다.
   2) 섹션 간격이 제각각이라 페이지가 덜그럭거렸다.
   3) 제목 위계(h1/h2/h3)가 크기로만 구분되고 자간·굵기가 안 잡혀 있었다.
   ============================================================
   ============================================================ */

/* ==========================================================
   P3-1. 도구 카드 — 세로 → 가로형
   아이콘 왼쪽, 제목·설명 오른쪽. 한 장의 높이가 절반으로 줄고
   같은 폭에 더 많이 들어간다. 눈이 왼쪽 세로선을 따라 내려가며 읽는다.
   ========================================================== */
/* 마크업이 <a> 안에 [아이콘 div][배지 span][h3][p] 네 형제로 평평하게 놓여 있다.
   flex-direction:row 로 바꾸면 h3 와 p 까지 옆으로 서 버린다(실제로 그렇게 깨졌다).
   래퍼를 만들 수 없으니 grid 로 자리를 지정한다 —
   1열은 아이콘이 두 줄에 걸치고, 2열에 제목/설명이 쌓인다. */
.tool-card{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:14px !important;
  row-gap:4px !important;
  align-items:start !important;
  align-content:start !important;
  text-align:left !important;
  padding:18px 20px !important;
  position:relative !important;
}
.tool-card .tool-icon{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:44px !important;height:44px !important;
  border-radius:12px !important;
  font-size:17px !important;
  margin:0 !important;
  box-shadow:var(--lx-s1) !important;
}
.tool-card h3,
.tool-card .tool-name{
  grid-column:2 !important;grid-row:1 !important;
  font-size:14.5px !important;
  font-weight:800 !important;
  letter-spacing:-.032em !important;
  line-height:1.4 !important;
  margin:1px 0 0 !important;
  padding-right:44px !important;   /* 우상단 배지 자리 */
}
.tool-card p,
.tool-card .tool-desc{
  grid-column:2 !important;grid-row:2 !important;
  font-size:12.5px !important;
  line-height:1.6 !important;
  color:var(--lx-muted) !important;
  margin:0 !important;
  word-break:keep-all;
}
/* 배지는 흐름에서 빼서 그리드 칸을 차지하지 않게 한다 */
.tool-card > .tool-badge,
.tool-card > .badge-hot,
.tool-card > .badge-new{
  position:absolute !important;
  top:14px !important;right:14px !important;
  margin:0 !important;grid-area:unset !important;
}



/* 그리드 밀도 — 본문 폭에 맞춰 자동으로 칸 수를 정한다 */
.tools-grid,
.tools-grid-2,
.tools-grid-sm{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr)) !important;
  gap:14px !important;
}
@media(max-width:560px){
  .tools-grid,.tools-grid-2,.tools-grid-sm{grid-template-columns:1fr !important}
}

/* 작은 도구 카드 */
.tool-card-sm{
  flex-direction:row !important;align-items:center !important;text-align:left !important;
  padding:13px 15px !important;gap:11px !important;
}
.tool-card-sm .tool-icon-sm{width:34px !important;height:34px !important;font-size:14px !important;margin:0 !important;flex:none}

/* ==========================================================
   P3-2. 섹션 리듬 — 간격을 하나로 통일
   ========================================================== */
.tools-section,
.ml-section,
.content-section,
section + section{
  margin-top:34px !important;
}
.tools-section:first-child,
.ml-section:first-child{margin-top:0 !important}

.tools-section-header,
.section-header{
  display:flex !important;align-items:center;gap:12px;
  padding:0 0 12px !important;margin:0 0 16px !important;
  border-bottom:1px solid var(--lx-line) !important;
}
.tools-section-header .section-icon,
.section-header .section-icon{
  width:34px !important;height:34px !important;
  border-radius:10px !important;font-size:14px !important;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.tools-section-header h2,
.section-header h2{
  font-size:16.5px !important;font-weight:850 !important;
  letter-spacing:-.038em !important;margin:0 !important;line-height:1.3;
}
.tools-section-header .section-subtitle,
.section-header .section-subtitle{
  display:block;font-size:12px !important;color:var(--lx-muted) !important;
  font-weight:600 !important;margin-top:1px !important;
}

/* ==========================================================
   P3-3. 타이포 위계 — 크기만이 아니라 자간·굵기로 구분
   제목은 크고 좁게, 본문은 편안하게.
   ========================================================== */
.main-content h1,.content-area h1{letter-spacing:-.048em !important;font-weight:850 !important;line-height:1.22 !important}
.main-content h2,.content-area h2{letter-spacing:-.040em !important;font-weight:850 !important;line-height:1.28 !important}
.main-content h3,.content-area h3{letter-spacing:-.033em !important;font-weight:800 !important;line-height:1.34 !important}
.main-content h4,.content-area h4{letter-spacing:-.028em !important;font-weight:800 !important}
.main-content p,.content-area p{letter-spacing:-.013em}

/* 숫자는 어디서나 자리폭 고정 — 표·통계가 흔들리지 않게 */
.stat-value,.num,.value,.amount,.price,.count,.tnum,
td,.pmc-value,.ml-when,.cp-mi-n{font-variant-numeric:tabular-nums}

/* 긴 한글 제목이 어색하게 끊기지 않도록 */
h1,h2,h3,h4,.post-title,.card-title,.tool-card h3,.sh-card .name{word-break:keep-all}

/* ==========================================================
   P3-4. 본문 컨테이너 — 좌우 여백과 최대폭
   ========================================================== */
.main-content,.content-area{padding-top:22px !important}
.main-layout,.main-content{gap:24px}

/* 읽는 글은 너무 넓으면 눈이 줄을 놓친다 */
.post-content{max-width:74ch}

/* ==========================================================
   P3-5. 구분선·여백 정리
   ========================================================== */
hr{border:0 !important;border-top:1px solid var(--lx-line) !important;margin:22px 0 !important}
.divider{background:var(--lx-line) !important}

/* 카드 안 첫/마지막 요소의 군더더기 여백 제거 */
.card-body > *:first-child,.post-view > *:first-child{margin-top:0 !important}
.card-body > *:last-child,.post-view > *:last-child{margin-bottom:0 !important}

/* ==========================================================
   P3-6. 링크 — 본문 링크만 밑줄, 나머지는 색으로
   ========================================================== */
.post-content a:hover,.card-body a.inline-link:hover{color:var(--lx-v) !important}
a:not(.btn):not(.pill):not(.tool-card):not(.card):not(.sh-card){transition:color .16s var(--lx-e)}

/* ==========================================================
   P3-7. 이미지 · 아바타
   ========================================================== */
.avatar,.user-avatar,.profile-image,.author-avatar{
  border-radius:50% !important;object-fit:cover;
  border:1px solid var(--lx-line);
}
.thumb,.thumbnail,.post-image-item img{border-radius:12px !important;object-fit:cover}

/* ==========================================================
   P3-8. 스크롤바 — 데스크톱에서 덜 튀게
   ========================================================== */
@media(hover:hover){
  .table-wrapper::-webkit-scrollbar,
  .tab-content::-webkit-scrollbar,
  .nav-dropdown::-webkit-scrollbar{height:8px;width:8px}
  .table-wrapper::-webkit-scrollbar-thumb,
  .tab-content::-webkit-scrollbar-thumb,
  .nav-dropdown::-webkit-scrollbar-thumb{background:var(--lx-line);border-radius:99px}
  .table-wrapper::-webkit-scrollbar-thumb:hover,
  .tab-content::-webkit-scrollbar-thumb:hover{background:var(--lx-faint)}
  .table-wrapper::-webkit-scrollbar-track{background:transparent}
}

/* ==========================================================
   P3-9. 다크모드 보정
   ========================================================== */
[data-theme="dark"] .tool-card h3,
[data-theme="dark"] .tool-card strong,
[data-theme="dark"] .tools-section-header h2,
[data-theme="dark"] .section-header h2{color:#e8e8f2 !important}
[data-theme="dark"] .tool-card p,
[data-theme="dark"] .tools-section-header .section-subtitle{color:#9aa0ad !important}
[data-theme="dark"] hr,
[data-theme="dark"] .tools-section-header,
[data-theme="dark"] .section-header{border-color:#252533 !important}
[data-theme="dark"] .avatar,
[data-theme="dark"] .user-avatar{border-color:#252533}
[data-theme="dark"] .table-wrapper::-webkit-scrollbar-thumb{background:#2d2d3d}

/* ============================================================
   ============================================================
   PART 4 — 페이지 히어로 통일 + 잔여 톤 정리 (2026-09-20)

   문제
     각 페이지가 자기 <style> 안에 히어로를 따로 갖고 있었다.
     tool-page-header(16곳) / content-hub-hero / trend-hero / matching-hero
     / tools-hero / portfolio-hero / ref-hero / venue-hero …
     전부 연보라 그라데이션(#eef2ff→#ede9fe) + 가운데 정렬이라
     메인·프로그램 페이지의 딥 히어로와 따로 놀았다.

     페이지 <style> 이 lumex.css 보다 뒤에 오므로 !important 로 이긴다.

   방침
     메인(.ml-hero)·프로그램(.pg-hero)과 같은 레시피로 통일한다 —
     딥 배경 + 바이올렛 글로우 + 라임 미세 반사 + 상하 그라데이션.
   ============================================================
   ============================================================ */

/* ==========================================================
   P4-1. 모든 페이지 히어로 → 딥 잉크
   ========================================================== */
.tool-page-header,
.content-hub-hero,
.trend-hero,
.matching-hero,
.tools-hero,
.portfolio-hero,
.ref-hero,
.venue-hero,
.page-hero{
  position:relative !important;
  overflow:hidden !important;
  background:var(--lx-deep) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:22px !important;
  box-shadow:var(--lx-s3) !important;
  padding:38px 36px !important;
  margin:0 0 26px !important;
  text-align:left !important;
}

/* 페이지 자체 ::before 장식(원형 블러 등)을 우리 글로우로 덮는다 */
.tool-page-header::before,
.content-hub-hero::before,
.trend-hero::before,
.matching-hero::before,
.tools-hero::before,
.portfolio-hero::before,
.ref-hero::before,
.venue-hero::before,
.page-hero::before{
  content:'' !important;
  position:absolute !important;inset:0 !important;
  top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  width:auto !important;height:auto !important;
  transform:none !important;
  border-radius:0 !important;
  opacity:1 !important;
  z-index:0 !important;pointer-events:none !important;
  background:
    radial-gradient(760px 420px at 78% 40%, rgba(139,92,246,.22), transparent 68%),
    radial-gradient(520px 340px at 8% 92%, rgba(185,255,102,.07), transparent 70%) !important;
}
.tool-page-header::after,
.content-hub-hero::after,
.trend-hero::after,
.matching-hero::after,
.tools-hero::after{
  content:'' !important;
  position:absolute !important;inset:0 !important;
  z-index:0 !important;pointer-events:none !important;
  background:linear-gradient(180deg, rgba(8,8,12,.45) 0%, transparent 26%, transparent 74%, rgba(8,8,12,.75) 100%) !important;
  transform:none !important;border-radius:0 !important;
}

/* 내용은 장식 위로 */
.tool-page-header > *,
.content-hub-hero > *,
.trend-hero > *,
.matching-hero > *,
.tools-hero > *,
.portfolio-hero > *,
.ref-hero > *,
.venue-hero > *,
.page-hero > *{position:relative;z-index:2}

.tool-page-header h1,
.content-hub-hero h1,
.trend-hero h1,
.matching-hero h1,
.tools-hero h1,
.portfolio-hero h1,
.page-hero h1,
.tool-page-header h2,
.content-hub-hero h2{
  color:#fff !important;
  font-size:clamp(23px,3.1vw,33px) !important;
  font-weight:850 !important;
  letter-spacing:-.052em !important;
  line-height:1.18 !important;
  margin:0 0 10px !important;
  text-align:left !important;
  justify-content:flex-start !important;
}
.tool-page-header p,
.content-hub-hero p,
.trend-hero p,
.matching-hero p,
.tools-hero p,
.portfolio-hero p,
.page-hero p,
.tool-page-header .tool-page-desc,
.tool-page-header .subtitle{
  color:rgba(232,232,245,.80) !important;
  font-size:14.5px !important;
  line-height:1.72 !important;
  max-width:640px;
  margin:0 !important;
  text-align:left !important;
}

/* 히어로 안의 작은 칩(최종 업데이트 등) */
.header-update-badge,
.tool-page-header .badge,
.matching-hero .badge,
.trend-hero .badge{
  display:inline-flex !important;align-items:center;gap:7px;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:rgba(255,255,255,.88) !important;
  border-radius:999px !important;
  padding:7px 15px !important;
  font-size:12px !important;font-weight:800 !important;
  margin-top:16px !important;
}

/* 히어로 안의 통계 — 매칭 페이지 등 */
.matching-hero .stat-value,
.trend-hero .stat-value,
.tool-page-header .stat-value{
  color:#fff !important;
  background:linear-gradient(180deg,#fff,#cbb9fb);
  -webkit-background-clip:text;background-clip:text;
}
.matching-hero .stat-label,
.trend-hero .stat-label{color:rgba(232,232,245,.62) !important}

/* 히어로 안의 버튼 */
.matching-hero .btn-primary,
.tool-page-header .btn-primary,
.content-hub-hero .btn-primary{
  background:var(--lx-lime) !important;border-color:var(--lx-lime) !important;color:#16240a !important;
}
.matching-hero .btn-primary:hover{box-shadow:0 14px 30px rgba(185,255,102,.34) !important;color:#16240a !important}
.matching-hero .btn-outline,
.matching-hero .btn-secondary,
.tool-page-header .btn-outline{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.matching-hero .btn-outline:hover,
.matching-hero .btn-secondary:hover{background:rgba(255,255,255,.12) !important;color:#fff !important}

@media(max-width:640px){
  .tool-page-header,.content-hub-hero,.trend-hero,.matching-hero,
  .tools-hero,.portfolio-hero,.ref-hero,.venue-hero,.page-hero{
    padding:26px 20px !important;border-radius:16px !important;
  }
}

/* ==========================================================
   P4-2. 필터 탭 — 보라 그라데이션 → 잉크
   ========================================================== */
.filter-tab{
  border-radius:999px !important;
  border:1px solid var(--lx-line) !important;
  background:#fff !important;
  color:var(--lx-sub) !important;
  font-size:12.5px !important;font-weight:750 !important;
  padding:9px 16px !important;
  box-shadow:none !important;
  transition:.2s var(--lx-e) !important;
}
.filter-tab:hover{border-color:var(--lx-ink) !important;color:var(--lx-ink) !important;transform:translateY(-1px)}
.filter-tab.active{
  background:var(--lx-ink) !important;
  border-color:var(--lx-ink) !important;
  color:#fff !important;
  box-shadow:var(--lx-s2) !important;
}

/* ==========================================================
   P4-3. 막대 그래프 — 형광 채도를 낮춰 표처럼 읽히게
   ========================================================== */
.chart-bar-track{
  background:var(--lx-line2) !important;
  border-radius:99px !important;
  height:8px !important;
  overflow:hidden;
}
.chart-bar-fill{
  border-radius:99px !important;
  height:100% !important;
  transition:width .7s var(--lx-e) !important;
  filter:saturate(.82);
}
.chart-bar-label{font-size:13px !important;font-weight:750 !important;letter-spacing:-.022em !important}
.chart-bar-group{margin-bottom:14px !important}
.chart-bar-group .amount,
.chart-bar-group .value{font-weight:850 !important;letter-spacing:-.03em !important}
.chart-subtitle{font-size:12.5px !important;color:var(--lx-muted) !important}
.chart-section{padding:22px 24px !important}

/* 카테고리 아이콘 — 원색 유지하되 살짝 낮춘다 */
.category-icon{border-radius:10px !important;filter:saturate(.88)}
.category-header{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px !important;margin-bottom:14px !important;
  border-bottom:1px solid var(--lx-line2) !important;
}
.category-header h2,.category-header h3{font-size:15.5px !important;font-weight:850 !important;letter-spacing:-.036em !important;margin:0 !important}
.category-count{
  margin-left:auto;background:var(--lx-line2) !important;color:var(--lx-muted) !important;
  border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800;
}

/* ==========================================================
   P4-4. 안내 카드 · CTA 구역
   ========================================================== */
.notice-card,.disclaimer{
  background:#fafafb !important;
  border:1px solid var(--lx-line) !important;
  border-radius:14px !important;
  padding:16px 18px !important;
  font-size:12.5px !important;
  line-height:1.72 !important;
  color:var(--lx-sub) !important;
  box-shadow:none !important;
}
.notice-header{font-weight:850 !important;font-size:13px !important;margin-bottom:6px !important;display:flex;align-items:center;gap:7px}
.notice-icon{color:var(--lx-v) !important}
.notice-text{color:var(--lx-muted) !important}

.cta-section{
  background:var(--lx-deep) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:20px !important;
  padding:32px 30px !important;
  color:#fff !important;
  position:relative;overflow:hidden;
  box-shadow:var(--lx-s3) !important;
}
.cta-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 300px at 80% 30%, rgba(139,92,246,.22), transparent 70%);
}
.cta-section > *{position:relative;z-index:2}
.cta-section h2,.cta-section h3{color:#fff !important;font-weight:850 !important;letter-spacing:-.04em !important}
.cta-section p{color:rgba(232,232,245,.78) !important}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--lx-lime) !important;color:#16240a !important;
  border:0 !important;border-radius:999px !important;
  padding:0 24px !important;min-height:46px !important;
  font-weight:850 !important;font-size:13.5px !important;
  transition:transform .22s var(--lx-e), box-shadow .22s var(--lx-e) !important;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(185,255,102,.34) !important;color:#16240a !important}

/* ==========================================================
   P4-5. 라벨 묶음 (label-icon / label-text / label-value)
   ========================================================== */
.label-icon{color:var(--lx-v) !important}
.label-text{font-size:12.5px !important;color:var(--lx-muted) !important;font-weight:650 !important}
.label-value{font-weight:850 !important;letter-spacing:-.03em !important;font-variant-numeric:tabular-nums}

/* ==========================================================
   P4-6. 다크모드
   ========================================================== */
[data-theme="dark"] .filter-tab{background:#16161f !important;border-color:#252533 !important;color:#9aa0ad !important}
[data-theme="dark"] .filter-tab.active{background:#e8e8f2 !important;border-color:#e8e8f2 !important;color:#0c0c12 !important}
[data-theme="dark"] .chart-bar-track{background:#252533 !important}
[data-theme="dark"] .chart-bar-label,
[data-theme="dark"] .category-header h2,
[data-theme="dark"] .category-header h3,
[data-theme="dark"] .label-value{color:#e8e8f2 !important}
[data-theme="dark"] .chart-section,
[data-theme="dark"] .notice-card,
[data-theme="dark"] .disclaimer{background:#16161f !important;border-color:#252533 !important;color:#9aa0ad !important}
[data-theme="dark"] .category-header{border-color:#1d1d28 !important}
[data-theme="dark"] .category-count{background:#252533 !important;color:#8b909e !important}

/* ============================================================
   ============================================================
   PART 5 — 긴 꼬리 페이지 마감 (2026-09-20)

   페이지마다 자기만의 클래스를 갖고 있다 —
   guide-card / case-card / badge-card / attendance-check-card /
   trend-card / bookmark-item / lottery-box …  전부 세면 수백 개다.

   하나씩 나열하는 대신 "이름 끝"으로 잡는다.
   한국 웹에서 흔한 작명 규칙(-card / -grid / -btn / -tab / -chip /
   -empty / -thumb / -header)을 그대로 쓰고 있어서 패턴이 잘 맞는다.

   이미 PART 1~4 에서 잡은 것(ml- / cp- / pg- / tool-)과 겹쳐도
   같은 값이라 충돌하지 않는다.
   ============================================================
   ============================================================ */

/* ==========================================================
   P5-1. 이름이 -card 로 끝나는 모든 것
   ========================================================== */
:is([class$="-card"],[class*="-card "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
:is([class$="-box"],[class*="-box "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
:is([class$="-item"],[class*="-item "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(li):not(.nav-item):not(.stat-item){
  border-radius:16px !important;
}
:is([class$="-card"],[class*="-card "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){
  background:#fff !important;
  border:1px solid var(--lx-line) !important;
  box-shadow:var(--lx-s1) !important;
  transition:transform .26s var(--lx-e), box-shadow .26s var(--lx-e), border-color .26s var(--lx-e) !important;
}
a:is([class$="-card"],[class*="-card "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):hover,
:is([class$="-card"],[class*="-card "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):has(> a):hover,
.guide-card:hover,.case-card:hover,.trend-card:hover,.badge-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--lx-s2) !important;
  border-color:var(--lx-v-b) !important;
}

/* 카드 안 제목/본문 */
:is([class$="-title"],[class*="-title "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.post-title):not(.card-title):not(.logo-title){
  font-weight:800 !important;
  letter-spacing:-.032em !important;
  line-height:1.42 !important;
  word-break:keep-all;
}
:is([class$="-excerpt"],[class*="-excerpt "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-desc"],[class*="-desc "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-summary"],[class*="-summary "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){
  font-size:12.8px !important;
  line-height:1.65 !important;
  color:var(--lx-muted) !important;
  word-break:keep-all;
}
:is([class$="-meta"],[class*="-meta "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-footer"],[class*="-footer "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.modal-footer):not(.site-footer){
  font-size:11.5px !important;
  color:var(--lx-faint) !important;
}

/* ==========================================================
   P5-2. -grid 로 끝나는 것 — 간격만 통일
   ========================================================== */
:is([class$="-grid"],[class*="-grid "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){gap:14px !important}

/* ==========================================================
   P5-3. -btn 으로 끝나는 것 → pill
   ========================================================== */
:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.search-btn):not(.modal-close):not(.banner-close){
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:-.018em !important;
  font-family:inherit !important;
  transition:transform .22s var(--lx-e), box-shadow .22s var(--lx-e),
             background .2s, border-color .2s !important;
}
:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.search-btn):not(.modal-close):not(.banner-close):hover{
  transform:translateY(-1px);
}

/* 히어로 안 버튼 (matching 등 — hero-btn / hero-btn-primary / hero-btn-outline) */
.hero-btn{
  display:inline-flex !important;align-items:center;gap:8px;
  padding:0 22px !important;min-height:46px !important;
  font-size:13.5px !important;border:1px solid transparent !important;
}
.hero-btn-primary{
  background:var(--lx-lime) !important;border-color:var(--lx-lime) !important;color:#16240a !important;
}
.hero-btn-primary:hover{box-shadow:0 14px 30px rgba(185,255,102,.34) !important;color:#16240a !important}
.hero-btn-outline,.hero-btn-secondary{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.hero-btn-outline:hover,.hero-btn-secondary:hover{
  background:rgba(255,255,255,.13) !important;color:#fff !important;
}

/* ==========================================================
   P5-4. -tab / -chip / -pill / -sort 로 끝나는 것
   ========================================================== */
:is([class$="-tab"],[class*="-tab "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-chip"],[class*="-chip "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-pill"],[class*="-pill "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){
  border-radius:999px !important;
  font-weight:750 !important;
  font-size:12.5px !important;
  letter-spacing:-.018em !important;
  transition:.2s var(--lx-e) !important;
}
:is([class$="-tab"],[class*="-tab "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active),:is([class$="-chip"],[class*="-chip "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active){
  background:#fff !important;
  border:1px solid var(--lx-line) !important;
  color:var(--lx-sub) !important;
}
:is([class$="-tab"],[class*="-tab "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active):hover,:is([class$="-chip"],[class*="-chip "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active):hover{
  border-color:var(--lx-ink) !important;color:var(--lx-ink) !important;transform:translateY(-1px);
}
:is([class$="-tab"],[class*="-tab "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active,:is([class$="-chip"],[class*="-chip "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active{
  background:var(--lx-ink) !important;
  border:1px solid var(--lx-ink) !important;
  color:#fff !important;
  box-shadow:var(--lx-s1) !important;
}

/* 정렬 링크 (최신순/인기순/조회순) */
:is([class$="-sort"],[class*="-sort "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) a,:is([class$="-sort-bar"],[class*="-sort-bar "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) a{
  font-size:12.5px !important;font-weight:750 !important;
  color:var(--lx-faint) !important;padding:4px 9px;border-radius:8px;
}
:is([class$="-sort"],[class*="-sort "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) a:hover,:is([class$="-sort-bar"],[class*="-sort-bar "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) a:hover{color:var(--lx-ink) !important;background:var(--lx-line2) !important}
:is([class$="-sort"],[class*="-sort "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) a.active,:is([class$="-sort-bar"],[class*="-sort-bar "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) a.active{color:var(--lx-ink) !important;font-weight:850 !important}

/* ==========================================================
   P5-5. 썸네일 · 플레이스홀더
   ========================================================== */
:is([class$="-thumb"],[class*="-thumb "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-thumbnail"],[class*="-thumbnail "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),[class*="-thumb-placeholder"]{
  border-radius:13px !important;
  overflow:hidden;
  background:var(--lx-v-l) !important;
}
:is([class$="-thumb"],[class*="-thumb "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) img,:is([class$="-thumbnail"],[class*="-thumbnail "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) img{
  width:100%;height:100%;object-fit:cover;display:block;
}
[class*="-thumb-placeholder"]{
  display:flex;align-items:center;justify-content:center;
  color:var(--lx-v-b) !important;font-size:28px;
}
:is([class$="-icon-wrap"],[class*="-icon-wrap "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-icon"],[class*="-icon "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.section-icon):not(.tool-icon):not(.stat-icon):not(.logo-icon){
  border-radius:11px !important;
}

/* ==========================================================
   P5-6. 빈 상태 · 안내
   ========================================================== */
:is([class$="-empty"],[class*="-empty "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-no-data"],[class*="-no-data "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-prompt"],[class*="-prompt "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){
  text-align:center !important;
  padding:44px 22px !important;
  color:var(--lx-faint) !important;
  font-size:13.5px !important;
  background:#fff !important;
  border:1px dashed var(--lx-line) !important;
  border-radius:16px !important;
}

/* ==========================================================
   P5-7. 페이지 머리 (-header 로 끝나는 것 중 페이지 제목 줄)
   ========================================================== */
:is([class$="-page-header"],[class*="-page-header "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
.guides-header,
.badge-page-header,
.trends-header,
.cases-header{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--lx-line) !important;
  border-radius:0 !important;
  padding:6px 0 16px !important;
  margin:0 0 20px !important;
  text-align:left !important;
  box-shadow:none !important;
}
:is([class$="-page-header"],[class*="-page-header "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) h1,
.guides-header h1,.badge-page-header h1{
  font-size:clamp(20px,2.4vw,27px) !important;
  font-weight:850 !important;letter-spacing:-.045em !important;
  margin:0 0 5px !important;text-align:left !important;
}
:is([class$="-page-header"],[class*="-page-header "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) p,
.guides-header p,.badge-page-header p{
  color:var(--lx-muted) !important;font-size:13.5px !important;
  margin:0 !important;text-align:left !important;
}
/* 단, PART 4 에서 딥 히어로로 만든 것들은 예외 */
.tool-page-header{
  background:var(--lx-deep) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:22px !important;
  padding:38px 36px !important;
  margin:0 0 26px !important;
}

/* ==========================================================
   P5-8. 딥 히어로 안의 통계 숫자 (.num / .label)
   matching-hero 등은 .hero-stat > .num/.label 구조다.
   ========================================================== */
.matching-hero .num,
.trend-hero .num,
.tools-hero .num,
.tool-page-header .num,
.content-hub-hero .num,
.hero-stats .num,
.hero-stat .num{
  color:#fff !important;
  font-size:24px !important;font-weight:850 !important;
  letter-spacing:-.05em !important;line-height:1.15 !important;
  background:linear-gradient(180deg,#fff,#cbb9fb) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  display:block;
}
.matching-hero .label,
.trend-hero .label,
.hero-stats .label,
.hero-stat .label{
  color:rgba(232,232,245,.62) !important;
  font-size:11.5px !important;font-weight:650 !important;
}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap;margin:22px 0 !important}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* 히어로 안의 strong 강조 */
.matching-hero p strong,
.tool-page-header p strong,
.content-hub-hero p strong{color:var(--lx-lime) !important;font-weight:850}

/* ==========================================================
   P5-9. 단가표 금액 — 남아 있던 보라색 제거
   ========================================================== */
.chart-bar-group .amount,
.chart-bar-group .value,
.chart-bar-group :is([class$="-value"],[class*="-value "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
.pmc-value,.label-value,.price-avg{
  color:var(--lx-ink) !important;
}

/* ==========================================================
   P5-10. 검색 입력 묶음 (입력 + 버튼)
   ========================================================== */
/* 헤더 검색(.header-search)은 PART 1 에서 하나의 pill 묶음으로 이미 잡았다.
   여기 규칙이 걸리면 돋보기 버튼이 동그래져 버리므로 제외한다. */
:is([class$="-search"],[class*="-search "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.header-search){display:flex;gap:8px;align-items:center}
:is([class$="-search"],[class*="-search "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.header-search) input{flex:1;min-width:0}
:is([class$="-search"],[class*="-search "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.header-search) button,
:is([class$="-search"],[class*="-search "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.header-search) .btn{
  border-radius:999px !important;
  background:var(--lx-ink) !important;border-color:var(--lx-ink) !important;color:#fff !important;
  min-height:42px !important;padding:0 20px !important;flex:none;
}

/* ==========================================================
   P5-11. 출석 달력
   ========================================================== */
.calendar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px !important;margin-bottom:12px !important;
  border-bottom:1px solid var(--lx-line2) !important;
}
.calendar td,.calendar-body td{border-radius:9px !important;font-variant-numeric:tabular-nums}
.already-checked{color:var(--lx-lime-d) !important;font-weight:800 !important}

/* ==========================================================
   P5-12. 다크모드 — 패턴 규칙에도 동일 적용
   ========================================================== */
[data-theme="dark"] :is([class$="-card"],[class*="-card "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
[data-theme="dark"] :is([class$="-empty"],[class*="-empty "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
[data-theme="dark"] :is([class$="-prompt"],[class*="-prompt "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){
  background:#16161f !important;border-color:#252533 !important;
}
[data-theme="dark"] :is([class$="-title"],[class*="-title "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.logo-title){color:#e8e8f2 !important}
[data-theme="dark"] :is([class$="-excerpt"],[class*="-excerpt "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
[data-theme="dark"] :is([class$="-desc"],[class*="-desc "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
[data-theme="dark"] :is([class$="-summary"],[class*="-summary "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){color:#9aa0ad !important}
[data-theme="dark"] :is([class$="-tab"],[class*="-tab "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active),
[data-theme="dark"] :is([class$="-chip"],[class*="-chip "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active){
  background:#16161f !important;border-color:#252533 !important;color:#9aa0ad !important;
}
[data-theme="dark"] :is([class$="-tab"],[class*="-tab "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active,
[data-theme="dark"] :is([class$="-chip"],[class*="-chip "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active{
  background:#e8e8f2 !important;border-color:#e8e8f2 !important;color:#0c0c12 !important;
}
[data-theme="dark"] :is([class$="-thumb"],[class*="-thumb "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
[data-theme="dark"] [class*="-thumb-placeholder"]{background:#1b1630 !important}
[data-theme="dark"] :is([class$="-page-header"],[class*="-page-header "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
[data-theme="dark"] .guides-header,
[data-theme="dark"] .badge-page-header{border-color:#252533 !important}
[data-theme="dark"] :is([class$="-search"],[class*="-search "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.header-search) button,
[data-theme="dark"] :is([class$="-search"],[class*="-search "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.header-search) .btn{
  background:#e8e8f2 !important;border-color:#e8e8f2 !important;color:#0c0c12 !important;
}
[data-theme="dark"] .chart-bar-group .amount,
[data-theme="dark"] .pmc-value,
[data-theme="dark"] .label-value,
[data-theme="dark"] .price-avg{color:#e8e8f2 !important}
[data-theme="dark"] .calendar-header{border-color:#1d1d28 !important}

/* ============================================================
   ============================================================
   PART 6 — 마감 손질 (2026-09-20)

   PART 5 의 패턴 규칙이 모양은 잡았는데 색과 줄바꿈이 남았다.
     · .gf-btn / .cat-btn 처럼 "-btn 인데 실제로는 필터 칩"인 것들의
       활성 상태가 각 페이지 보라색(#6366f1)으로 남아 있었다
     · 아이콘 + 글자가 들어간 칩이 좁은 칸에서 두 줄로 쪼개졌다
   ============================================================
   ============================================================ */

/* ==========================================================
   P6-1. 필터 역할을 하는 -btn 들 — 활성색 통일 + 줄바꿈 금지
   ========================================================== */
:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.search-btn):not(.modal-close):not(.banner-close):not(.hero-btn):not(.cta-btn),
:is([class$="-tab"],[class*="-tab "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-chip"],[class*="-chip "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  white-space:nowrap !important;
  line-height:1.2;
}

/* 링크형 필터(-btn)가 활성일 때 */
a:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active,
button:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active,
:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active:not(.hero-btn):not(.cta-btn){
  background:var(--lx-ink) !important;
  border-color:var(--lx-ink) !important;
  color:#fff !important;
  box-shadow:var(--lx-s1) !important;
}
a:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active):not(.hero-btn):not(.cta-btn):not(.search-btn),
button:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active):not(.hero-btn):not(.cta-btn):not(.search-btn){
  border:1px solid var(--lx-line) !important;
  background:#fff !important;
  color:var(--lx-sub) !important;
  padding:8px 15px !important;
  font-size:12.5px !important;
}
a:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active):not(.hero-btn):not(.cta-btn):not(.search-btn):hover,
button:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active):not(.hero-btn):not(.cta-btn):not(.search-btn):hover{
  border-color:var(--lx-ink) !important;color:var(--lx-ink) !important;
}

/* 아이콘만 있는 원형 버튼(검색 등)은 정사각 비율 유지 */
:is([class$="-search"],[class*="-search "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.header-search) button{
  width:44px;min-width:44px;padding:0 !important;justify-content:center;
}

/* ==========================================================
   P6-2. 칩 묶음 간격
   ========================================================== */
:is([class$="-filters"],[class*="-filters "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-tabs"],[class*="-tabs "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-chips"],[class*="-chips "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){
  display:flex !important;gap:7px !important;flex-wrap:wrap;align-items:center;
  margin-bottom:16px !important;
}

/* ==========================================================
   P6-3. 카드 썸네일 영역 — 비어 보이던 높이를 줄인다
   ========================================================== */
:is([class$="-thumb"],[class*="-thumb "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),[class*="-thumb-placeholder"]{
  aspect-ratio:16 / 8.5;
  min-height:0 !important;
  max-height:190px;
}
:is([class$="-thumb"],[class*="-thumb "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) i,[class*="-thumb-placeholder"] i{font-size:26px !important;opacity:.45}

/* 카드 본문 패딩 */
.guide-body,.case-body,:is([class$="-body"],[class*="-body "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.card-body):not(.modal-body):not(.calendar-body){
  padding:16px 18px !important;
}
:is([class$="-cat"],[class*="-cat "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),:is([class$="-category"],[class*="-category "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){
  display:inline-block;border-radius:999px !important;
  background:var(--lx-v-l) !important;color:var(--lx-v-d) !important;
  padding:3px 10px !important;font-size:10.5px !important;font-weight:850 !important;
  margin-bottom:9px !important;
}

/* ==========================================================
   P6-4. 다크모드
   ========================================================== */
[data-theme="dark"] a:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active):not(.hero-btn):not(.cta-btn):not(.search-btn),
[data-theme="dark"] button:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])):not(.active):not(.hero-btn):not(.cta-btn):not(.search-btn){
  background:#16161f !important;border-color:#252533 !important;color:#9aa0ad !important;
}
[data-theme="dark"] a:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active,
[data-theme="dark"] button:is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active,
[data-theme="dark"] :is([class$="-btn"],[class*="-btn "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])).active:not(.hero-btn):not(.cta-btn){
  background:#e8e8f2 !important;border-color:#e8e8f2 !important;color:#0c0c12 !important;
}
[data-theme="dark"] :is([class$="-cat"],[class*="-cat "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])),
[data-theme="dark"] :is([class$="-category"],[class*="-category "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])){background:#241c3d !important;color:#c4b5fd !important}

/* ============================================================
   ============================================================
   PART 7 — 패턴 규칙 회귀 복구 (2026-09-20)

   무슨 일이 있었나
     PART 5/6 의 패턴 선택자를 [class$="-card"] 에서
     :is([class$="-card"],[class*="-card "]):not(:is([class^="ml-"],[class*=" ml-"],[class^="pg-"],[class*=" pg-"],[class^="cp-"],[class*=" cp-"],[class^="lx-"],[class*=" lx-"],[class^="prg-"],[class*=" prg-"],[class^="pv-"],[class*=" pv-"])) 로 고치자
     클래스가 두 개인 요소까지 잡히기 시작했다.

     그 결과 class="ml-float-card ml-float-stats" 처럼
     "어두운 히어로 위에 얹힌 유리 카드"가 흰 카드로 바뀌어
     흰 글씨가 흰 배경에 묻혀 안 보이게 됐다.
     .ml-diag-btn 도 -btn 패턴에 걸려 라임색을 잃었다.

   고치는 방법
     88개 선택자에 일일이 :not() 을 붙이는 대신,
     맨 뒤에서 "어두운 영역 안쪽"만 되돌린다.
     같은 !important 라도 나중에 선언된 쪽이 이긴다.

   ★ 앞으로 패턴 규칙을 추가할 때는 이 블록이 항상 파일 맨 끝에 있어야 한다.
   ============================================================
   ============================================================ */

/* ==========================================================
   P7-1. 어두운 영역 안에서는 패턴 규칙을 무력화
   ========================================================== */
.ml-hero [class*="-card"],
.pg-hero [class*="-card"],
.tool-page-header [class*="-card"],
.matching-hero [class*="-card"],
.trend-hero [class*="-card"],
.content-hub-hero [class*="-card"],
.cta-section [class*="-card"]{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.28) !important;
  color:#fff !important;
}

/* 히어로 안 글자는 전부 밝게 */
.ml-hero [class*="-card"] *,
.pg-hero [class*="-card"] *,
.matching-hero [class*="-card"] *{color:inherit}

/* ==========================================================
   P7-2. 메인 히어로 요소 원복 (PART 1 의 의도 복원)
   ========================================================== */
.ml-float-card{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.28) !important;
  color:#fff !important;
  transform:none !important;
}
.ml-float-card .label,
.ml-float-card .item-text,
.ml-float-card .text{color:rgba(232,232,245,.78) !important}
.ml-float-card strong{color:#fff !important}
.ml-float-stats .num{
  background:linear-gradient(180deg,#fff,#cbb9fb) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  font-weight:850 !important;letter-spacing:-.05em !important;
}
.ml-float-activity .head{color:var(--lx-lime) !important;font-weight:850 !important}
.ml-float-activity .live-dot{background:var(--lx-lime) !important;box-shadow:0 0 10px var(--lx-lime) !important}

/* 진단 버튼 — 라임 복원 */
.ml-diag-btn{
  background:var(--lx-lime) !important;
  border:0 !important;
  color:#16240a !important;
  border-radius:999px !important;
  font-weight:850 !important;
  padding:0 22px !important;min-height:44px !important;
  white-space:nowrap !important;
}
.ml-diag-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(185,255,102,.36) !important;color:#16240a !important}
.ml-diag-box{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
}
.ml-diag-box input{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  color:#fff !important;
}
.ml-diag-box input::placeholder{color:rgba(255,255,255,.5) !important}

.ml-hero-badge{
  border:1px solid rgba(185,255,102,.28) !important;
  background:rgba(185,255,102,.07) !important;
  color:#dff7b6 !important;
}
.ml-hero-badge .dot{background:var(--lx-lime) !important;box-shadow:0 0 10px var(--lx-lime) !important}

/* 아바타 줄 */
.ml-avatars .ml-avatar{
  border-radius:50% !important;
  border:2px solid var(--lx-deep) !important;
}

/* ==========================================================
   P7-3. 프로그램 페이지 원복
   ========================================================== */
.pg-tab.on{
  background:var(--lx-ink) !important;border-color:var(--lx-ink) !important;color:#fff !important;
}
.pg-tab:not(.on){
  background:#fff !important;border:1px solid var(--lx-line) !important;color:var(--lx-sub) !important;
}
.pg-cta{
  background:var(--lx-lime) !important;color:#16240a !important;border:0 !important;
  white-space:nowrap !important;
}
.pg-cta:hover{color:#16240a !important}
.pg-chip{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
}
.pg-go{background:var(--lx-ink) !important;color:#fff !important}
.pg-card{transform:none}
.pg-card:hover{transform:translateY(-3px)}

/* ==========================================================
   P7-4. 커뮤니티 활력 위젯 원복
   ========================================================== */
.cp-get{
  background:var(--lx-lime) !important;color:#16240a !important;border:0 !important;
  white-space:nowrap !important;
}
.cp-get[disabled]{background:var(--lx-line2) !important;color:var(--lx-faint) !important}
.cp-reply{background:var(--lx-ink) !important;color:#fff !important;border:0 !important}
.cp-count{background:#fff4e6 !important;color:#b45309 !important;border:0 !important}
.cp-bd{background:var(--lx-v-l) !important;color:var(--lx-v-d) !important;border:0 !important}
.cp-need,.cp-box{border-radius:16px !important}

/* ==========================================================
   P7-5. 헤더 안쪽 — 패턴이 건드리면 안 되는 것들
   ========================================================== */
.header-top .point-display{
  background:rgba(185,255,102,.13) !important;color:var(--lx-lime) !important;border:0 !important;
}
.btn-point-charge{
  background:var(--lx-lime) !important;color:#16240a !important;border:1px solid var(--lx-lime) !important;
}
.search-btn{
  background:var(--lx-ink) !important;color:#fff !important;border:0 !important;
  border-radius:0 !important;width:auto !important;min-width:0 !important;
}
.header-quick .btn-primary{background:var(--lx-ink) !important;color:#fff !important}
.dark-mode-toggle,.notification-bell,.header-icon-btn{border-radius:50% !important}

/* 토스트 */
.lx-toast{background:#fff !important}
.lx-toast-body a{background:transparent !important;border:0 !important}

/* ==========================================================
   P7-6. 다크모드에서도 동일 보장
   ========================================================== */
[data-theme="dark"] .ml-float-card{
  background:rgba(255,255,255,.055) !important;border-color:rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .cp-get{background:var(--lx-lime) !important;color:#16240a !important}
[data-theme="dark"] .ml-diag-btn,
[data-theme="dark"] .pg-cta{background:var(--lx-lime) !important;color:#16240a !important}
[data-theme="dark"] .lx-toast{background:#16161f !important}

/* ============================================================
   ============================================================
   PART 8 — 인라인 스타일 잔재 정리 (2026-09-20)

   shop / matching / content / boards 등 40여 개 파일에
   style="background:#6366f1 …" 같은 인라인 버튼이 박혀 있다.
   파일을 전부 고치는 대신 속성 선택자로 잡는다.

   (작성자 !important 는 작성자 인라인 선언보다 우선한다 — 그래서 먹는다)
   ============================================================
   ============================================================ */

/* ==========================================================
   P8-1. 인라인 보라 버튼 → 잉크 pill
   ========================================================== */
a[style*="background:#6366f1"],
a[style*="background: #6366f1"],
a[style*="background:#4f46e5"],
a[style*="background: #4f46e5"],
a[style*="background:#7c3aed"],
a[style*="background: #7c3aed"],
button[style*="background:#6366f1"],
button[style*="background: #6366f1"],
button[style*="background:#4f46e5"],
button[style*="background:#7c3aed"]{
  background:var(--lx-ink) !important;
  border:1px solid var(--lx-ink) !important;
  color:#fff !important;
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:-.018em !important;
  display:inline-flex !important;align-items:center;gap:6px;
  white-space:nowrap;
  transition:transform .22s var(--lx-e), box-shadow .22s var(--lx-e) !important;
}
a[style*="background:#6366f1"]:hover,
a[style*="background: #6366f1"]:hover,
a[style*="background:#4f46e5"]:hover,
a[style*="background:#7c3aed"]:hover,
button[style*="background:#6366f1"]:hover{
  transform:translateY(-1px);box-shadow:var(--lx-s2) !important;color:#fff !important;
}

/* 인라인 그라데이션 버튼도 같이 */
a[style*="linear-gradient(135deg,#6366f1"],
a[style*="linear-gradient(135deg, #6366f1"],
a[style*="linear-gradient(135deg,#4f46e5"]{
  background:var(--lx-ink) !important;border-radius:999px !important;color:#fff !important;
}

/* 인라인 보라 글자색 → 톤 맞춤 */
[style*="color:#6366f1"],[style*="color: #6366f1"],
[style*="color:#4f46e5"],[style*="color: #4f46e5"]{
  color:var(--lx-v-d) !important;
}

/* 인라인 연보라 배경(안내 박스) → 차분하게 */
[style*="background:#eef2ff"],[style*="background: #eef2ff"],
[style*="background:#f5f3ff"],[style*="background: #f5f3ff"]{
  background:var(--lx-v-l) !important;
}

/* ==========================================================
   P8-2. 썸네일 빈칸이 "빈 상태 박스"로 잡히던 문제
   .sh-thumb-empty / .guide-thumb-placeholder 처럼
   -empty 로 끝나지만 실제로는 이미지 자리인 것들.
   ========================================================== */
[class*="-thumb-empty"],
[class*="-thumb-placeholder"],
[class*="-image-empty"]{
  padding:0 !important;
  border:0 !important;
  border-radius:13px !important;
  background:var(--lx-v-l) !important;
  color:var(--lx-v-b) !important;
  display:flex !important;align-items:center;justify-content:center;
  aspect-ratio:1 !important;
  width:100%;
  font-size:30px !important;
}

/* 상품 카드 — 썸네일 높이를 한 줄로 맞춘다 */
.sh-card .sh-thumb,
.sh-card [class*="-thumb-empty"]{
  aspect-ratio:1 !important;max-height:none !important;
}

/* ==========================================================
   P8-3. 남은 각진 모서리 정리
   ========================================================== */
[style*="border-radius:8px"],[style*="border-radius: 8px"]{border-radius:11px !important}
[style*="border-radius:6px"],[style*="border-radius: 6px"]{border-radius:9px !important}

/* ==========================================================
   P8-4. 다크모드
   ========================================================== */
[data-theme="dark"] a[style*="background:#6366f1"],
[data-theme="dark"] a[style*="background: #6366f1"],
[data-theme="dark"] a[style*="background:#4f46e5"],
[data-theme="dark"] button[style*="background:#6366f1"]{
  background:#e8e8f2 !important;border-color:#e8e8f2 !important;color:#0c0c12 !important;
}
[data-theme="dark"] [style*="background:#eef2ff"],
[data-theme="dark"] [style*="background: #eef2ff"],
[data-theme="dark"] [style*="background:#f5f3ff"]{background:#1b1630 !important}
[data-theme="dark"] [class*="-thumb-empty"],
[data-theme="dark"] [class*="-thumb-placeholder"]{background:#1b1630 !important;color:#3b2d63 !important}

/* ============================================================
   ============================================================
   PART 9 — 시안의 "레이아웃 언어" 이식 (2026-09-20)

   앞서 PART 1~8 은 색과 모양만 맞췄다. 그래서 시안의 느낌이 안 났다.
   시안이 고급스러운 이유는 색이 아니라 아래 네 가지 구조다.

     1) 다크 밴드      한 섹션 전체가 #0a0a0c 로 깔리고 위쪽에 라임 글로우가 번진다
     2) 2단 섹션헤더    좌: 아이브로우 + 아주 큰 제목 / 우: 설명문. 밑선 기준 정렬
     3) 열별 액센트     카드 묶음마다 다른 색을 주고 상단 보더·아이콘·태그에 그 색을 쓴다
     4) 라임 = 주 CTA   포인트 색이 아니라 "가장 중요한 버튼"의 색

   실제 시안 수치를 그대로 옮겼다.
     .section-heading  grid 1.25fr .75fr / gap 80 / align-items:end / mb 54
     h2                clamp(36px,4.3vw,63px) / lh 1.06 / ls -.065em / w850
     p                 15.5px / lh 1.78 / w450 / ls -.015em
     .bsec::before     900x700 라임 radial, blur 56px, top -24% left 44%
   ============================================================
   ============================================================ */

/* ==========================================================
   P9-1. 다크 밴드
   ========================================================== */
.lx-band{
  position:relative;overflow:hidden;
  background:var(--lx-deep);
  color:#fff;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.06);
  padding:64px 56px;
  margin:0 0 30px;
}
.lx-band::before{
  content:"";position:absolute;top:-24%;left:44%;
  width:900px;height:700px;pointer-events:none;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(185,255,102,.08), transparent 66%);
  filter:blur(56px);
}
/* 바이올렛 변주 — 커뮤니티 쪽 섹션에 쓴다 */
.lx-band.v::before{background:radial-gradient(ellipse, rgba(139,92,246,.16), transparent 66%)}
.lx-band > *{position:relative;z-index:2}

@media(max-width:760px){
  .lx-band{padding:40px 22px;border-radius:18px}
}

/* ==========================================================
   P9-2. 2단 섹션 헤더 — 시안 수치 그대로
   ========================================================== */
.lx-sechead{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:80px;
  align-items:end;
  margin-bottom:44px;
}
.lx-sechead h2{
  margin:17px 0 0;
  font-size:clamp(28px,3.6vw,50px);
  line-height:1.06;
  letter-spacing:-.065em;
  font-weight:850;
  word-break:keep-all;
}
.lx-sechead p{
  font-size:15px;
  line-height:1.78;
  font-weight:450;
  letter-spacing:-.015em;
  color:var(--lx-sub);
  margin:0;
  word-break:keep-all;
}
.lx-band .lx-sechead h2{color:#fff}
.lx-band .lx-sechead p{color:rgba(255,255,255,.48)}
.lx-band .lx-eyebrow{color:var(--lx-lime)}
.lx-band .lx-eyebrow i.dot{background:var(--lx-lime);box-shadow:0 0 10px var(--lx-lime)}

@media(max-width:900px){
  .lx-sechead{grid-template-columns:1fr;gap:16px;align-items:start;margin-bottom:30px}
  .lx-sechead h2{font-size:clamp(25px,6vw,34px)}
}

/* ==========================================================
   P9-3. 열별 액센트 — 시안 팔레트 그대로
   ========================================================== */
.c-lime  {--cl:#b9ff66;--cl-b:rgba(185,255,102,.32);--cl-bg:rgba(185,255,102,.10);--cl-s:rgba(185,255,102,.16)}
.c-mint  {--cl:#7ff0c0;--cl-b:rgba(127,240,192,.32);--cl-bg:rgba(127,240,192,.10);--cl-s:rgba(127,240,192,.16)}
.c-sky   {--cl:#7fdcf5;--cl-b:rgba(127,220,245,.32);--cl-bg:rgba(127,220,245,.10);--cl-s:rgba(127,220,245,.16)}
.c-blue  {--cl:#9fb8ff;--cl-b:rgba(159,184,255,.32);--cl-bg:rgba(159,184,255,.10);--cl-s:rgba(159,184,255,.16)}
.c-violet{--cl:#c7a8ff;--cl-b:rgba(199,168,255,.32);--cl-bg:rgba(199,168,255,.10);--cl-s:rgba(199,168,255,.16)}
.c-amber {--cl:#ffd479;--cl-b:rgba(255,212,121,.32);--cl-bg:rgba(255,212,121,.10);--cl-s:rgba(255,212,121,.16)}

/* ==========================================================
   P9-4. 다크 카드 — 상단 액센트 보더
   ========================================================== */
.lx-dcard{
  position:relative;
  background:#111114;
  border:1px solid rgba(255,255,255,.07);
  border-top:2px solid var(--cl, rgba(255,255,255,.18));
  border-radius:14px;
  padding:22px 20px 18px;
  display:flex;flex-direction:column;gap:9px;
  transition:transform .34s var(--lx-e), box-shadow .34s var(--lx-e), border-color .34s var(--lx-e);
}
.lx-dcard::after{
  content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;
  background:linear-gradient(180deg, var(--cl-bg, transparent), transparent);
  opacity:.9;
}
.lx-dcard > *{position:relative;z-index:2}
a.lx-dcard:hover,.lx-dcard.hoverable:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 46px rgba(0,0,0,.44);
  border-color:var(--cl-b, rgba(255,255,255,.2));
}
.lx-dcard-ico{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--cl-bg,rgba(255,255,255,.07));
  border:1px solid var(--cl-b,rgba(255,255,255,.14));
  color:var(--cl,#fff);font-size:15px;
  margin-bottom:5px;
}
.lx-dcard h3,.lx-dcard .t{
  font-size:15px;font-weight:850;letter-spacing:-.035em;
  color:var(--cl,#fff);margin:0;line-height:1.35;word-break:keep-all;
}
.lx-dcard p,.lx-dcard .d{
  font-size:12.5px;line-height:1.62;color:rgba(255,255,255,.52);
  margin:0;word-break:keep-all;flex:1;
}
.lx-dcard .tag{
  align-self:flex-start;
  padding:4px 10px;border-radius:99px;
  background:var(--cl-s,rgba(255,255,255,.1));
  color:var(--cl,#fff);
  font-size:10px;font-weight:850;letter-spacing:-.005em;
}

/* 작은 하위 카드 (시안 하단 그리드) */
.lx-dsub{
  background:#0f0f12;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:16px 16px;
  text-align:center;
  transition:border-color .3s var(--lx-e), transform .3s var(--lx-e);
}
a.lx-dsub:hover{border-color:var(--cl-b,rgba(255,255,255,.2));transform:translateY(-3px)}
.lx-dsub b{display:block;font-size:13px;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:4px}
.lx-dsub span{display:block;font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.5}
.lx-dsub em{
  display:block;margin-top:7px;font-style:normal;
  font-size:11px;font-weight:800;color:var(--cl,var(--lx-lime));letter-spacing:-.01em;
}

/* ==========================================================
   P9-5. 하단 CTA 바 (시안 .bfoot)
   ========================================================== */
.lx-ctabar{
  margin-top:24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 30px;border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  position:relative;z-index:2;
}
.lx-ctabar h3{font-size:19px;font-weight:850;letter-spacing:-.04em;color:#fff;margin:0 0 5px}
.lx-ctabar p{font-size:13px;color:rgba(255,255,255,.5);margin:0;line-height:1.6}
.lx-ctabar .lx-pill-lime{flex:none}

/* 밝은 배경용 변주 */
.lx-ctabar.light{
  background:linear-gradient(120deg,var(--lx-v-l),#fff 62%);
  border:1px solid var(--lx-v-b);
}
.lx-ctabar.light h3{color:var(--lx-ink)}
.lx-ctabar.light p{color:var(--lx-muted)}

@media(max-width:620px){
  .lx-ctabar{padding:20px 18px;flex-direction:column;align-items:flex-start}
}

/* ==========================================================
   P9-6. 라임 = 주 CTA (시안의 .pill.primary)
   ========================================================== */
.lx-pill-lime,
.lx-pill-ghost,
.lx-pill-line{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 24px;border-radius:999px;
  font-size:13px;font-weight:850;letter-spacing:-.01em;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .22s var(--lx-e), box-shadow .22s var(--lx-e), background .2s;
}
.lx-pill-lime{background:var(--lx-lime);border-color:var(--lx-lime);color:#0b1304}
.lx-pill-lime:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(185,255,102,.34);color:#0b1304}
.lx-pill-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#fff}
.lx-pill-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);color:#fff}
.lx-pill-line{background:#fff;border-color:var(--lx-line);color:var(--lx-ink)}
.lx-pill-line:hover{border-color:var(--lx-ink);transform:translateY(-2px);box-shadow:var(--lx-s2)}
.lx-pill-lime.lg,.lx-pill-ghost.lg{min-height:54px;padding:0 30px;font-size:14px}
.lx-pill-lime svg,.lx-pill-ghost svg,
.lx-pill-lime i,.lx-pill-ghost i{transition:transform .22s var(--lx-e)}
.lx-pill-lime:hover i,.lx-pill-ghost:hover i{transform:translateX(3px)}

/* ==========================================================
   P9-7. 통계 줄 (시안 히어로 하단)
   ========================================================== */
.lx-stats{
  display:flex;flex-wrap:wrap;gap:46px;
  padding-top:26px;margin-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
}
.lx-stats.on-light{border-top-color:var(--lx-line)}
.lx-stat b{
  display:block;font-size:30px;font-weight:850;letter-spacing:-.055em;line-height:1.1;
  color:#fff;font-variant-numeric:tabular-nums;
}
.lx-stats.on-light .lx-stat b{color:var(--lx-ink)}
.lx-stat span{
  display:block;margin-top:5px;
  font-size:9.5px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.lx-stats.on-light .lx-stat span{color:var(--lx-faint)}
@media(max-width:620px){.lx-stats{gap:26px}.lx-stat b{font-size:24px}}

/* ==========================================================
   P9-8. 밝은 카드 (시안 .card) — 큰 라운드·넉넉한 패딩
   ========================================================== */
.lx-lcard{
  background:#fff;border:1px solid var(--lx-line);border-radius:22px;
  padding:30px 28px 24px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  box-shadow:var(--lx-s1);
  transition:transform .34s var(--lx-e), box-shadow .34s var(--lx-e), border-color .34s var(--lx-e);
}
a.lx-lcard:hover,.lx-lcard.hoverable:hover{
  transform:translateY(-6px);box-shadow:var(--lx-s3);border-color:var(--lx-v-b);
}
.lx-lcard-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;
  color:var(--lx-faint);font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;
}
.lx-lcard-top b{
  padding:5px 9px;border-radius:99px;
  background:var(--lx-lime-l);color:var(--lx-lime-d);font-size:9px;letter-spacing:0;
}
.lx-lcard h3{font-size:17px;font-weight:850;letter-spacing:-.04em;margin:0;line-height:1.35}
.lx-lcard p{font-size:13px;line-height:1.68;color:var(--lx-muted);margin:0;flex:1;word-break:keep-all}

/* ==========================================================
   P9-9. 다크 밴드 안에서는 밝은 톤 규칙을 무력화
   (PART 2/5 의 패턴 규칙이 흰 배경을 칠하지 못하게)
   ========================================================== */
.lx-band [class*="-card"]:not(.lx-dcard):not(.lx-lcard),
.lx-band .card,
.lx-band .stat-card{
  background:#111114 !important;
  border-color:rgba(255,255,255,.07) !important;
  color:#fff !important;
}
.lx-band h1,.lx-band h2,.lx-band h3,.lx-band h4,.lx-band strong{color:#fff}
.lx-band p,.lx-band span,.lx-band li{color:rgba(255,255,255,.55)}
.lx-band a:not(.lx-pill-lime):not(.lx-pill-ghost):not(.lx-dcard):not(.lx-dsub){color:#fff}
.lx-band .lx-dcard h3,.lx-band .lx-dcard .t{color:var(--cl,#fff)}
.lx-band .lx-dcard p{color:rgba(255,255,255,.52)}

/* ==========================================================
   P9-10. 다크모드에서 밝은 카드 보정
   ========================================================== */
[data-theme="dark"] .lx-lcard{background:#16161f;border-color:#252533}
[data-theme="dark"] .lx-lcard h3{color:#e8e8f2}
[data-theme="dark"] .lx-lcard p{color:#9aa0ad}
[data-theme="dark"] .lx-sechead h2{color:#e8e8f2}
[data-theme="dark"] .lx-sechead p{color:#9aa0ad}
[data-theme="dark"] .lx-pill-line{background:#16161f;border-color:#252533;color:#e8e8f2}
[data-theme="dark"] .lx-ctabar.light{
  background:linear-gradient(120deg,#1b1630,#16161f 62%);border-color:#2f2452;
}
[data-theme="dark"] .lx-ctabar.light h3{color:#e8e8f2}
[data-theme="dark"] .lx-stats.on-light{border-top-color:#252533}
[data-theme="dark"] .lx-stats.on-light .lx-stat b{color:#e8e8f2}

/* ============================================================
   ============================================================
   PART 10 — 다크 컴포넌트 강제 적용 (2026-09-20)

   PART 9 로 만든 컴포넌트가 화면에서 깨졌다. 원인 두 가지.

   1) style-clean.css 가
        h1,h2,h3,h4,h5,h6 { color: var(--mc-text) !important; }   ← #111827
      로 전체 제목을 어두운 색에 !important 로 못박아 뒀다.
      그래서 다크 밴드/슬라이더 안의 흰 제목이 전부 먹색으로 나왔다.
      (기존 .ml-hero 가 멀쩡했던 건 style-clean 에 .ml-hero h1 예외가
       이미 !important 로 들어 있었기 때문이다.)

   2) PART 2/5 의 패턴 규칙 [class*="-card"] 가 !important 로 흰 배경을 칠한다.
      새로 만든 .prg-card(다크 상품 카드)가 여기에 걸려 흰 카드가 됐고,
      흰 배경에 흰 글씨가 되어 내용이 안 보였다.

   → 다크 문맥에서는 !important 로 되받아친다.
     (명시도 싸움이 아니라 '나중 선언' 으로 이기기 위해 파일 맨 끝에 둔다)
   ============================================================
   ============================================================ */

/* ==========================================================
   P10-1. 다크 문맥의 제목 — style-clean 의 전역 !important 되받기
   ========================================================== */
.lx-band h1, .lx-band h2, .lx-band h3, .lx-band h4, .lx-band h5,
.lx-slider h1, .lx-slider h2, .lx-slider h3, .lx-slider h4,
.lx-ctabar:not(.light) h1, .lx-ctabar:not(.light) h2, .lx-ctabar:not(.light) h3,
.prg-hero h1, .prg-hero h2, .prg-hero h3,
.prg-allin h3, .prg-name, .prg-step strong,
.pv-head h1, .pv-head h2,
.tool-page-header h1, .tool-page-header h2,
.content-hub-hero h1, .content-hub-hero h2,
.trend-hero h1, .trend-hero h2,
.matching-hero h1, .matching-hero h2,
.tools-hero h1, .tools-hero h2,
.cta-section h1, .cta-section h2, .cta-section h3{
  color:#fff !important;
}

/* 그라데이션 글자는 색을 비워야 background-clip 이 보인다 */
.prg-hero h1 em,
.ml-hero h1 .grad,
.lx-band .grad{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/* 다크 문맥의 본문 */
.lx-band p, .lx-band li,
.prg-hero .lead, .prg-allin p, .prg-step p,
.pv-head .lead,
.lx-ctabar:not(.light) p{
  color:rgba(255,255,255,.58) !important;
}
.lx-slide h3{color:#fff !important}
.lx-slide p{color:rgba(232,232,245,.76) !important}

/* ==========================================================
   P10-2. 다크 카드 — 패턴 규칙의 흰 배경 되받기
   ========================================================== */
.prg-card,
.lx-dcard{
  background:#111114 !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-top:2px solid var(--cl, rgba(255,255,255,.18)) !important;
  border-radius:16px !important;
  box-shadow:none !important;
}
.prg-card:hover,
a.lx-dcard:hover{
  box-shadow:0 22px 46px rgba(0,0,0,.45) !important;
  border-color:var(--cl-b, rgba(255,255,255,.22)) !important;
}
.prg-desc, .lx-dcard p{color:rgba(255,255,255,.5) !important}
.prg-price{color:#fff !important}
.prg-foot{border-top:1px solid rgba(255,255,255,.08) !important}

/* 카드 안 분류 라벨 — 패턴이 보라 pill 로 늘려놓은 것을 되돌린다 */
.prg-cat{
  display:inline-block !important;
  background:transparent !important;
  color:var(--cl,#fff) !important;
  padding:0 !important;margin:0 !important;
  border:0 !important;border-radius:0 !important;
  font-size:9px !important;font-weight:850 !important;
  letter-spacing:.12em !important;text-transform:uppercase;
  opacity:.85;
}

/* 상태 배지 */
.prg-badge{border:0 !important}
.prg-badge.ok{background:var(--cl-s,rgba(185,255,102,.16)) !important;color:var(--cl,#b9ff66) !important}
.prg-badge.soon,.prg-badge.mt{background:rgba(255,255,255,.08) !important;color:rgba(255,255,255,.55) !important}

/* 카드 안 "자세히" 버튼 */
.prg-go{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
}
.prg-card:hover .prg-go{
  background:var(--lx-lime) !important;border-color:var(--lx-lime) !important;color:#0b1304 !important;
}

/* ==========================================================
   P10-3. 지갑 카드 · 구독 박스 · CTA 바
   ========================================================== */
.prg-wallet,
.prg-allin,
.lx-ctabar:not(.light){
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:none !important;
}
.prg-wallet .sub,.prg-wallet-note{color:rgba(255,255,255,.5) !important}
.prg-wallet .pt{color:transparent !important;-webkit-text-fill-color:transparent !important}
.prg-allin-price strong{color:#fff !important}
.prg-allin-price .per{color:rgba(255,255,255,.5) !important}
.prg-allin-price del{color:rgba(255,255,255,.34) !important}
.prg-save{background:rgba(185,255,102,.16) !important;color:#b9ff66 !important;border:0 !important}

/* 필터 탭 — 밝은 배경에 있으므로 패턴 규칙과 값이 같지만 명시적으로 */
.prg-tab{background:#fff !important;border:1px solid var(--lx-line) !important;color:var(--lx-sub) !important}
.prg-tab.on{background:var(--lx-ink) !important;border-color:var(--lx-ink) !important;color:#fff !important}

/* ==========================================================
   P10-4. 상세 페이지
   ========================================================== */
.pv-head{
  background:var(--lx-deep) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-top:3px solid var(--cl,rgba(255,255,255,.2)) !important;
}
.pv-chip{background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.14) !important;color:rgba(255,255,255,.82) !important}
.pv-chip.ok{background:var(--cl-s,rgba(185,255,102,.16)) !important;color:var(--cl,#b9ff66) !important}
.pv-cat{color:var(--cl,#fff) !important;background:transparent !important;padding:0 !important}
.pv-buy{background:#fff !important;border:1px solid var(--lx-line) !important}
.pv-buy-price{color:var(--lx-ink) !important}

/* ==========================================================
   P10-5. 슬라이더 — 패턴 규칙이 건드리지 못하게
   ========================================================== */
.lx-slider,.lx-slide,.lx-slide-in{background:transparent !important;border:0 !important;box-shadow:none !important}
.lx-slider{background:var(--lx-deep) !important;border:1px solid rgba(255,255,255,.06) !important}
.lx-slide-badge{background:rgba(255,255,255,.09) !important;border:1px solid rgba(255,255,255,.16) !important;color:rgba(255,255,255,.92) !important}
.lx-slide-b1{background:#b9ff66 !important;border:0 !important;color:#16240a !important}
.lx-slide-b2{background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.2) !important;color:#fff !important}
.lx-slide-art{
  background:rgba(var(--lx-slide-rgb),.16) !important;
  border:1px solid rgba(var(--lx-slide-rgb),.30) !important;
  color:rgba(255,255,255,.88) !important;
}
.lx-slider-nav{background:rgba(12,12,18,.45) !important;border:1px solid rgba(255,255,255,.18) !important;color:#fff !important}
.lx-slider-dots button{background:rgba(255,255,255,.28) !important;border:0 !important}
.lx-slider-dots button.on{background:#b9ff66 !important}

/* ==========================================================
   P10-6. 제휴사 카드
   ========================================================== */
.prg-partner{background:#fff !important;border:1px solid var(--lx-line) !important}
.prg-partner-logo{background:var(--lx-v-l) !important;color:var(--lx-v-d) !important;border:0 !important}
.prg-partner-txt b{color:var(--lx-ink) !important}
.prg-partner-txt span{color:var(--lx-muted) !important}
.prg-partner-txt em{color:var(--lx-lime-d) !important}

/* ==========================================================
   P10-7. 다크모드
   ========================================================== */
[data-theme="dark"] .prg-tab{background:#16161f !important;border-color:#252533 !important;color:#9aa0ad !important}
[data-theme="dark"] .prg-tab.on{background:#e8e8f2 !important;border-color:#e8e8f2 !important;color:#0c0c12 !important}
[data-theme="dark"] .prg-partner{background:#16161f !important;border-color:#252533 !important}
[data-theme="dark"] .prg-partner-txt b{color:#e8e8f2 !important}
[data-theme="dark"] .pv-buy{background:#16161f !important;border-color:#252533 !important}
[data-theme="dark"] .pv-buy-price{color:#e8e8f2 !important}