/* ============================================================
   theme-tone.css — 브랜드 톤 시트 (현재 팔레트: 네이비)
   ------------------------------------------------------------
   목적: 마크업을 하나도 건드리지 않고, nanum.css 뒤에 이 파일만 얹어 색·타이포·질감을 바꾼다.
        색은 전부 아래 :root 안에만 있고, 규칙부에는 하드코딩된 색이 하나도 없다.

   전제: 현재 프로젝트는 색을 727곳에서 CSS 변수로 참조하고 하드코딩은 66곳뿐이라
        토큰만 갈아끼워도 전 화면이 함께 바뀐다. 그래서 이 시안 파일은
        ① 토큰 재정의 ② 토큰을 안 거치는 소수 지점 보정 ③ 질감(라운드·그림자·폰트) 만 다룬다.

   적용/해제: <link> 한 줄 추가/제거로 끝난다. 기존 nanum.css 는 손대지 않았다.
   팔레트 교체: assets/tone-{sage,navy,light,charcoal}.css 의 :root 를 아래에 붙여 넣으면 된다.
   ============================================================ */

/* bgift 가 쓰는 것과 같은 웹폰트(랜딩과 동일 CDN) */
/* [2026-09-13 GL-023] 정적 pretendard.min.css 는 굵기 6벌을 서브셋 없이 통째로 받아
   홈 한 화면에서만 폰트로 4.6MB 를 썼다(굵기당 750~780KB). 가변폰트 동적 서브셋으로 바꾸면
   실제로 쓰인 글자 범위만 조각으로 받아오고, 굵기도 한 파일이 전부 감당한다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  /* ── 팔레트 : 네이비 ────────────────────────────────────
     고른 이유 — 붉은 고기 사진 옆에서 초록(세이지)은 보색으로 살짝 튀는데 남색은 뒤로 물러난다.
     다른 톤으로 바꾸려면 assets/tone-*.css 의 :root 를 여기에 붙여 넣으면 된다
     (sage / navy / light / charcoal 네 벌을 만들어 뒀다). */
  --red:#2F5068;            /* 브랜드 — 딥 네이비블루 · 흰 글자 대비 8.51:1 */
  --red-dark:#234054;       /* 딥 톤(hover) */
  --red-tint:#E8EEF3;       /* 연한 틴트(배지·안내 바탕) */

  --orange:#BD533B;         /* 액센트 — 벽돌빛(경고·마감임박) · 흰 글자 대비 4.70:1 */

  /* ── 글자 ─────────────────────────────────────────────── */
  --ink:#1A1A1A;
  --ink-2:#565656;
  --gray:#6E6E6E;           /* 흰 배경 대비 5.3:1 — AA 충족 */

  /* ── 면·선 ────────────────────────────────────────────── */
  --line:#DFE4EA;
  --bg:#F4F6F8;             /* 배경 — 서늘한 회청 */
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;

  /* ── 보조색 ───────────────────────────────────────────── */
  --yellow:#B98A2E;         /* 쿠폰 포인트 */
  --star-off:#D6DBE1;
  --blue:#2F5068;           /* 링크·무료배송 — 브랜드와 같은 계열로 묶는다 */

  /* ── 질감 ─────────────────────────────────────────────── */
  --radius:14px;
  --radius-s:10px;
  --shadow:0 6px 20px -12px rgba(0,0,0,.16);
  --shadow-lg:0 14px 40px -18px rgba(0,0,0,.20);

  /* ── 어두운 면 ──────────────────────────────────────────
     푸터·다크 버튼·오프라인 띠처럼 "짙은 바탕에 흰 글자"인 자리.
     여기까지 토큰으로 빼 두어 팔레트 교체가 이 블록 하나로 끝난다. */
  --dark:#1E2A35;           /* 짙은 면 — 남색 잉크 */
  --dark-2:#334554;         /* 짙은 면 밝은 쪽(그라디언트 끝) */
  --brand-deep:#1B3547;     /* 브랜드 그라디언트의 어두운 끝 */
  --accent-deep:#8A3628;    /* 액센트 그라디언트의 어두운 끝 */
  --brand-soft:#4A7290;     /* 브랜드 밝은 변주(배너 4번) */
}

/* 폰트 — bgift 는 전 화면 Pretendard 한 벌로 통일한다 */
body{
  font-family:"Pretendard Variable", "Pretendard", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  background:var(--bg);
  letter-spacing:-.01em;
}

/* ── 토큰을 거치지 않는 소수 지점 보정 ────────────────────────
   nanum.css 에서 색을 직접 적어 둔 곳(주로 어두운 면). bgift 는 검정 대신
   네이비그린 계열(--dark)을 쓴다. 값은 :root 에서 한 번에 바꾼다. */
.btn--dark{background:var(--dark)}
.badge--dark{background:var(--dark)}
.tag.new{background:var(--red);color:#fff}

/* 상단바·하단바 — bgift 는 흰 배경에 얇은 선 한 줄로 경계를 만든다 */
.subhead{border-bottom:1px solid var(--line);background:var(--surface)}
.tabbar{border-top:1px solid var(--line)}
.buybar{border-top:1px solid var(--line)}

/* 섹션 제목 — bgift 는 굵기를 낮추고 자간을 좁혀 차분하게 */
.section__head h2,.section__head h3{font-weight:800;letter-spacing:-.03em}
.section__head h2 em,.section__head h3 em{color:var(--red);font-style:normal}
.section__head h2 .sec-ic,.section__head h3 .sec-ic{background:var(--red-tint)}

/* 버튼 — 알약형 + 낮은 대비. bgift 의 rounded-full 감각 */
.btn{border-radius:999px;font-weight:700;letter-spacing:-.01em}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-dark)}
.btn--line-red{border-color:var(--red);color:var(--red)}
.btn--dark{border-radius:999px}

/* 칩 — bgift 의 필터 알약 */
.chip{border-radius:999px;border-color:var(--line);color:var(--ink-2);font-weight:600}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}

/* 카드 — 그림자를 줄이고 선으로 구분(랜딩 톤) */
.pcard .thumb{border-radius:var(--radius)}
.summary,.oc-card,.addr-card{border-radius:var(--radius);border-color:var(--line)}

/* 가격 강조 — 핑크가 아니라 잉크로, 할인율만 브랜드색 */
.price .won{color:var(--ink)}
.price .off{color:var(--red)}
.price-red{color:var(--red)}

/* 데스크톱 헤더/푸터 — bgift 는 1120px 폭에 68px 헤더 */
.dt-inner{max-width:1120px}
.dt-nav{border-bottom:1px solid var(--line)}
.dt-foot{background:var(--dark)}
.dt-foot-inner{max-width:1120px}

/* 신뢰 배너·틴트 면 — 크림 톤으로 */
.trust-banner{background:var(--red-tint);border-color:var(--line)}

/* 오프라인 상태 띠 — 검정 대신 네이비그린 */
.off-bar{background:var(--dark)}

/* ── 그라디언트 면 : 토큰을 거치지 않고 직접 적어 둔 곳 ──────────
   배너 슬라이드·팝업·프로모 띠는 색을 코드에 직접 박아 두어 토큰 교체만으로는 안 바뀐다.
   bgift 계열(세이지그린·네이비그린·크림·벽돌빛)로 다시 칠한다. */
.slide.s1{background:linear-gradient(120deg,var(--red),var(--brand-deep))}
.slide.s2{background:linear-gradient(120deg,var(--dark),var(--dark-2))}
.slide.s3{background:linear-gradient(120deg,var(--orange),var(--accent-deep))}
.slide.s4{background:linear-gradient(120deg,var(--brand-soft),var(--brand-deep))}
.popup__img{background:linear-gradient(150deg,var(--red),var(--dark))}
.promo{background:linear-gradient(100deg,var(--dark),var(--dark-2))}
.prow.rk-top{background:linear-gradient(90deg,var(--red-tint) 0%,rgba(230,236,228,0) 60%)}

/* 랭킹 배지·마감 타이머처럼 브랜드색을 배경으로 쓰는 곳은 대비 확보 */
.badge--red{background:var(--red);color:#fff}
.tag.free{color:var(--blue)}

/* ============================================================
   사용자 색상 설정 — 흰색 / 검정색 / 적색 / 파랑색 계열
   ------------------------------------------------------------
   이 파일 위쪽 :root 가 기본값(파랑 계열)이고, 아래 네 블록은 <html data-tone="..."> 가
   붙었을 때만 토큰을 덮는다. 규칙부(버튼·칩·그라디언트 …)는 전부 토큰을 참조하므로
   여기서 값만 갈아끼우면 전 화면이 함께 바뀐다 — 마크업은 하나도 건드리지 않는다.

   대비 기준: 브랜드색(--red) 위에 흰 글자를 얹는 자리가 많아 4.5:1 이상을 지켰다.
   설정을 저장하지 않은 사용자는 data-tone 이 없어 기본값(파랑)이 그대로 적용된다.
   ============================================================ */

/* ── 흰색 계열 — 무채색 밝은 톤. 색을 최대한 빼고 사진이 주인공이 되게 ── */
:root[data-tone="white"]{
  --red:#3F4650;            /* 브랜드 — 슬레이트 잉크 · 흰 글자 대비 9.55:1 */
  --red-dark:#2B313A;
  --red-tint:#F0F2F5;
  --orange:#A8621B;         /* 액센트 · 흰 글자 대비 4.62:1 */
  --ink:#151515;
  --ink-2:#4A4A4A;
  --gray:#6E6E6E;
  --line:#E6E8EC;
  --bg:#FAFBFC;             /* 거의 흰색 — 카드와 구분될 만큼만 남긴다 */
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --yellow:#A8791F;
  --star-off:#DEE1E6;
  --blue:#2F6FB5;
  --dark:#2A2F37;
  --dark-2:#454C57;
  --brand-deep:#2B313A;
  --accent-deep:#7E4914;
  --brand-soft:#79818E;
}

/* ── 검정색 계열 — 먹색. 가장 강한 대비 ── */
:root[data-tone="black"]{
  --red:#22242A;            /* 브랜드 — 먹색 · 흰 글자 대비 15.20:1 */
  --red-dark:#121418;
  --red-tint:#EDEEF0;
  --orange:#8F5A16;         /* 액센트 · 흰 글자 대비 5.34:1 */
  --ink:#0F1013;
  --ink-2:#40434A;
  --gray:#6A6E76;
  --line:#E2E4E8;
  --bg:#F5F6F7;
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --yellow:#8F5A16;
  --star-off:#D8DADE;
  --blue:#3C4550;
  --dark:#141519;
  --dark-2:#2E3138;
  --brand-deep:#0C0D10;
  --accent-deep:#6B430F;
  --brand-soft:#5A5E67;
}

/* ── 적색 계열 — 진홍. 정육 브랜드의 기본값에 가장 가까운 톤 ── */
:root[data-tone="red"]{
  --red:#C1272D;            /* 브랜드 — 진홍 · 흰 글자 대비 5.63:1 */
  --red-dark:#991E23;
  --red-tint:#FBECEC;
  --orange:#B5541A;         /* 액센트 · 흰 글자 대비 4.74:1 */
  --ink:#191111;
  --ink-2:#4A4141;
  --gray:#6E6666;
  --line:#EBE3E3;
  --bg:#FAF6F5;
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --yellow:#A87A22;
  --star-off:#E0D6D6;
  --blue:#1F63A8;
  --dark:#3A1F20;
  --dark-2:#5A3436;
  --brand-deep:#8A1B20;
  --accent-deep:#8A3F13;
  --brand-soft:#D4696D;
}

/* ── 파랑색 계열 — 이 파일 위쪽 :root 와 같은 값(현재 기본값).
      설정을 저장한 사용자가 명시적으로 파랑을 고른 경우를 위해 그대로 한 벌 더 둔다 ── */
:root[data-tone="blue"]{
  --red:#2F5068;
  --red-dark:#234054;
  --red-tint:#E8EEF3;
  --orange:#BD533B;
  --ink:#1A1A1A;
  --ink-2:#565656;
  --gray:#6E6E6E;
  --line:#DFE4EA;
  --bg:#F4F6F8;
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --yellow:#B98A2E;
  --star-off:#D6DBE1;
  --blue:#2F5068;
  --dark:#1E2A35;
  --dark-2:#334554;
  --brand-deep:#1B3547;
  --accent-deep:#8A3628;
  --brand-soft:#4A7290;
}

/* ── 색상 설정 타일 ────────────────────────────────────────────
   네 계열을 실제 색으로 미리 보여 주는 스와치. 고른 항목은 테두리와 체크로 표시한다. */
.tone-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px 4px}
.tone-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;
  border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;
  font-size:12px;font-weight:700;color:var(--ink-2);transition:border-color .15s,box-shadow .15s}
.tone-tile:hover{border-color:var(--gray)}
.tone-tile__sw{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:900;line-height:1}
.tone-tile[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.tone-tile[aria-pressed="true"] .tone-tile__t{color:var(--red)}
/* 스와치 색은 각 계열의 브랜드색을 그대로 — 지금 어떤 톤을 고르든 타일 색은 고정이라
   "무엇을 고르면 무슨 색이 되는지"가 항상 같게 보인다 */
.tone-tile[data-tone-set="white"] .tone-tile__sw{background:#3F4650}
.tone-tile[data-tone-set="black"] .tone-tile__sw{background:#22242A}
.tone-tile[data-tone-set="red"]   .tone-tile__sw{background:#C1272D}
.tone-tile[data-tone-set="blue"]  .tone-tile__sw{background:#2F5068}
.tone-note{padding:6px 16px 16px;font-size:11.5px;line-height:1.7;color:var(--gray)}


/* ============================================================
   다크모드 — 색 계열(data-tone)과 따로 도는 축이다.
   ------------------------------------------------------------
   왜 토큰만으로 안 되는가: 브랜드색(--red)이 두 가지로 쓰인다.
     ① 면을 채우고 그 위에 흰 글자를 얹는 곳(버튼·배지·칩)
     ② 밝은 바탕 위의 글자·테두리(가격·강조·아웃라인 버튼)
   어두운 바탕에서는 ②가 읽히려면 밝아져야 하는데, 밝아지면 ①의 흰 글자가 안 읽힌다.
   (계산상 두 조건을 동시에 만족하는 명도 구간이 없다.)
   그래서 --red 는 ②에 맞춰 밝히고, ①에 올라가는 글자색만 --on-brand 로 빼서 어둡게 뒤집는다.
   ①에 해당하는 선택자는 아래 "브랜드 면 위 글자" 블록에 모아 뒀다.

   적용: <html data-mode="dark">. 설정이 '시스템 따름'이면 스크립트가 prefers-color-scheme 을 보고
   같은 속성을 붙여 준다 — CSS 는 이 한 가지 경우만 알면 된다.
   ============================================================ */

:root[data-mode="dark"]{
  --bg:#101317;             /* 페이지 바탕 */
  --surface:#191D23;        /* 카드·헤더·입력칸 */
  --surface-2:#222730;      /* 한 단 눌린 면 */
  --white:#191D23;          /* 남아 있는 옛 이름도 표면을 따라가게 */

  --ink:#EDEFF2;            /* 본문 — 표면 대비 14.4:1 */
  --ink-2:#BFC5CD;          /* 보조 — 8.6:1 */
  --gray:#98A0AA;           /* 약한 글자 — 5.2:1 (AA 충족) */

  --line:#2E343C;
  --star-off:#69727D;   /* 미선택 별 — 표면 대비 3.0:1(비텍스트 기준). 채운 별(--yellow)과는 색으로 구분된다 */
  --on-brand:#0E1116;       /* 브랜드 면 위 글자 — 어두운 잉크로 뒤집는다 */
  --ink-fill:#2C323A;       /* 어두운 칩 바탕 — 표면보다 한 단 밝게(흰 글자 대비 9.7:1) */

  --dark:#0A0D11;           /* 푸터·오프라인 띠 — 바탕보다 더 어둡게 */
  --dark-2:#171B21;

  --shadow:0 6px 20px -12px rgba(0,0,0,.75);
  --shadow-lg:0 14px 40px -18px rgba(0,0,0,.85);
}

/* 계열별 브랜드색 — 어두운 표면 위에서 읽히도록 밝은 쪽으로 옮긴다 */
:root[data-mode="dark"]{                       /* 기본(파랑) */
  --red:#78B0D8; --red-dark:#9BC6E5; --red-tint:#1B2A36;
  --orange:#E8927A; --yellow:#D8B266; --blue:#78B0D8;
  --brand-deep:#2A4459; --brand-soft:#5C87A6; --accent-deep:#A35C48;
}
:root[data-mode="dark"][data-tone="white"]{
  --red:#AEB6C2; --red-dark:#C7CDD6; --red-tint:#232830;
  --orange:#D9A277; --yellow:#CFB27C; --blue:#8FB4DC;
  --brand-deep:#333A44; --brand-soft:#79818E; --accent-deep:#8A6242;
}
:root[data-mode="dark"][data-tone="black"]{
  --red:#C9CDD3; --red-dark:#DFE2E6; --red-tint:#22262C;
  --orange:#CFA46B; --yellow:#CFA46B; --blue:#A9B2BD;
  --brand-deep:#2A2E34; --brand-soft:#6E747C; --accent-deep:#7A5A2E;
}
:root[data-mode="dark"][data-tone="red"]{
  --red:#F0736F; --red-dark:#F79A96; --red-tint:#2E1D1F;
  --orange:#E89A6A; --yellow:#D6B36B; --blue:#7FAEDC;
  --brand-deep:#5A2124; --brand-soft:#C4666A; --accent-deep:#8A4A2C;
}
:root[data-mode="dark"][data-tone="blue"]{
  --red:#78B0D8; --red-dark:#9BC6E5; --red-tint:#1B2A36;
  --orange:#E8927A; --yellow:#D8B266; --blue:#78B0D8;
  --brand-deep:#2A4459; --brand-soft:#5C87A6; --accent-deep:#A35C48;
}

/* ── 브랜드 면 위 글자 ─────────────────────────────────────────
   --red 로 면을 채우고 그 위에 흰 글자를 얹던 자리. 다크에서는 면이 밝아지므로
   글자를 어둡게 뒤집는다. 라이트 모드 규칙은 하나도 건드리지 않는다. */
/* ── 브랜드 면 위 글자 ─────────────────────────────────────────
   --red 로 면을 채우고 흰 글자를 얹던 자리. 다크에서는 면이 밝아지니 글자를 어둡게 뒤집는다.
   배경과 글자를 반드시 한 규칙에서 같이 지정한다 — 한쪽만 걸리면 대비가 무너진다. */
:root[data-mode="dark"] .logo .box,
:root[data-mode="dark"] .icon-btn .dot,
:root[data-mode="dark"] .badge--red,
:root[data-mode="dark"] .step-list li::before,
:root[data-mode="dark"] .pcard .thumb .grade.hi,
:root[data-mode="dark"] .tag.grade-tag.hi,
:root[data-mode="dark"] .pager a.on,
:root[data-mode="dark"] .dt-logo .box,
:root[data-mode="dark"] .co-step,
:root[data-mode="dark"] .cl-step.on i,
:root[data-mode="dark"] .su-step__n,
:root[data-mode="dark"] .ev-ribbon,
:root[data-mode="dark"] .dv-pv__c.is-done,
:root[data-mode="dark"] .tag.new,
:root[data-mode="dark"] .rk-chg--new{
  background:var(--red); color:var(--on-brand);
}
/* 아웃라인/비활성 상태까지 함께 뒤집히지 않도록, 활성 상태에만 건다 */
:root[data-mode="dark"] .btn--primary:not(:disabled){ background:var(--red); color:var(--on-brand); }
:root[data-mode="dark"] .btn--primary:not(:disabled):hover{ background:var(--red-dark); color:var(--on-brand); }
:root[data-mode="dark"] .btn--ship:not(:disabled){ background:var(--blue); color:var(--on-brand); }
/* 배경이 있는 칩만 — 밑줄형 탭(.fa-tabs)은 배경이 없어 제외한다 */
:root[data-mode="dark"] .chip.on:not(.fa-tabs .chip){ background:var(--red); color:var(--on-brand); }
:root[data-mode="dark"] .fa-tabs .chip.on{ background:transparent; color:var(--red); }
/* --dark/--ink-fill 로 채운 면은 다크에서도 계속 어두우므로 글자는 흰색 그대로 */
:root[data-mode="dark"] .btn--dark,
:root[data-mode="dark"] .badge--dark,
:root[data-mode="dark"] .off-bar,
:root[data-mode="dark"] .sr-rank--top,
:root[data-mode="dark"] .bstrip__item,
:root[data-mode="dark"] .pcard .rank,
:root[data-mode="dark"] .pcard .thumb .grade,
:root[data-mode="dark"] .tag.grade-tag{ color:#fff; }
/* 어두운 면 자체는 표면보다 한 단 밝게 둬야 카드 위에서 형태가 보인다 */
:root[data-mode="dark"] .btn--dark,
:root[data-mode="dark"] .badge--dark{ background:var(--ink-fill); }
/* 비활성 버튼 — 눌리지 않는다는 게 보이되 글자는 읽혀야 한다 */
:root[data-mode="dark"] .btn:disabled{ background:var(--surface-2); color:var(--gray); }

/* ── 토큰을 거치지 않는 소수 지점 보정(다크 한정) ────────────────
   위쪽 톤 시트가 라이트 기준으로 흰색을 직접 적어 둔 자리들. */
:root[data-mode="dark"] body{ background:var(--bg); }
:root[data-mode="dark"] .subhead{ background:var(--surface); border-bottom-color:var(--line); }
:root[data-mode="dark"] .tabbar,
:root[data-mode="dark"] .buybar{ background:var(--surface); border-top-color:var(--line); }
/* 상품 사진은 밝은 흰 배경 컷이 많아 어두운 면 위에서 눈을 찌른다 — 아주 살짝만 눌러 준다 */
:root[data-mode="dark"] .thumb img,
:root[data-mode="dark"] .thumb-img{ filter:brightness(.92); }
/* 이모지 자리표시자 썸네일은 밝은 회색 면이라 그대로 두면 카드보다 튄다 */
:root[data-mode="dark"] .thumb{ background:var(--surface-2); }
/* 어두운 바탕에서 흰 글자 위 그라디언트 배너는 그대로 두되, 대비만 확보 */
:root[data-mode="dark"] .slide small,
:root[data-mode="dark"] .slide h2,
:root[data-mode="dark"] .slide p{ color:#fff; }

/* 모드 선택 타일(밝게·어둡게·시스템) */
.mode-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px 16px 0}
.mode-tile{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 6px;
  border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;
  font-size:12.5px;font-weight:700;color:var(--ink-2)}
.mode-tile:hover{border-color:var(--gray)}
.mode-tile[aria-pressed="true"]{border-color:var(--red);color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}

/* 사진 위에 얹히는 흰 반투명 면들 — 어두운 바탕에서는 반대로 눌러 준다 */
:root[data-mode="dark"] .pcard .heart{ background:rgba(20,24,29,.82); color:var(--ink-2); }
:root[data-mode="dark"] .pcard.sold-out .thumb::after{ background:rgba(16,19,23,.68); }
:root[data-mode="dark"] .pd-gal__dot{ background:rgba(255,255,255,.35); }
/* 카테고리 타일·푸터처럼 밝은 회색 면을 직접 적어 둔 자리 */
:root[data-mode="dark"] .footer,
:root[data-mode="dark"] .dt-foot{ background:var(--surface); }
:root[data-mode="dark"] .dtable th{ background:var(--surface-2); }
:root[data-mode="dark"] .dtable tr:hover td{ background:var(--surface-2); }
/* 상태·태그의 파스텔 바탕은 어두운 글자와 짝이라 그대로 두면 눈에 튄다 — 채도만 낮춘다 */
:root[data-mode="dark"] .tag.new,
:root[data-mode="dark"] .tag.up,
:root[data-mode="dark"] .tag.down,
:root[data-mode="dark"] .tag.trace,
:root[data-mode="dark"] .rk-chg.up,
:root[data-mode="dark"] .rk-chg.down,
:root[data-mode="dark"] .st.ok,
:root[data-mode="dark"] .st.wait,
:root[data-mode="dark"] .st.done,
:root[data-mode="dark"] .st.no,
:root[data-mode="dark"] .pf-ok{ filter:brightness(.42) saturate(1.25); }