/* ============================================================
   skin-grunge.css — 그런지 & 콜라주 스킨
   구조는 base.css에 있고, 여기선 그런지 팔레트/폰트 + 특유 효과만 얹는다.
   light/dark 두 모드.
   종이 질감 표현(노이즈·테이프·기울기·도장 배지·형광펜)과 폰트는 [data-fx="paper"]로 스코프해
   같은 성격의 다른 팔레트 테마(올리브 등)도 공유한다. data-fx는 base.html의 SKINS에서 지정.
   ============================================================ */

/* ── 팔레트 (모드별) ── */
:root[data-theme="grunge-light"] {
  color-scheme: light;   /* 네이티브 달력·스크롤바 등을 밝게 렌더 */
  --paper:   #e7e2d4;
  --paper-2: #ddd6c3;
  --card:    #f0ebdd;
  --ink:     #211d18;
  --ink-soft:#5a5044;
  --line:    #b9b09a;
  --stamp:   #a83028;
  --ochre:   #a9791d;
  --blue:    #33506e;
  --green:   #4f6b34;
  --marker-hl: rgba(169,121,29,0.55);
  --noise-blend: multiply;
  --noise-op: 0.06;
}
:root[data-theme="grunge-dark"] {
  color-scheme: dark;    /* 네이티브 달력·스크롤바 등을 어둡게 렌더 */
  --paper:   #201d18;
  --paper-2: #191612;
  --card:    #2b271f;
  --ink:     #ece3d0;
  --ink-soft:#a99c83;
  --line:    #4a4234;
  --stamp:   #d8574a;
  --ochre:   #d7a63f;
  --blue:    #85a7cd;
  --green:   #9cb576;
  --marker-hl: rgba(215,166,63,0.30);
  --noise-blend: screen;
  --noise-op: 0.05;
}

/* ── 폰트 ── */
:root[data-fx="paper"] {
  --font-display: 'Noto Sans KR', sans-serif;
  --font-num:     'Noto Sans KR', sans-serif;
  --font-type:    'Noto Sans KR', sans-serif;
  --font-body:    'Noto Sans KR', sans-serif;
}

/* ── 종이 질감: 은은한 얼룩 + 노이즈 오버레이 ── */
:root[data-fx="paper"] body {
  background-image:
    radial-gradient(circle at 20% 12%, rgba(0,0,0,0.05) 0, transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(0,0,0,0.06) 0, transparent 50%);
}
:root[data-fx="paper"] body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--noise-op);
  mix-blend-mode: var(--noise-blend);
  pointer-events: none; z-index: 9999;
}

/* ── 콜라주 카드: 거친 그림자 + 테이프 + 기울기 ── */
:root[data-fx="paper"] .scrap {
  box-shadow: 3px 4px 0 rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.08);
}
:root[data-fx="paper"] .scrap.taped::after {
  content: "";
  position: absolute; top: -10px; left: 50%;
  width: 68px; height: 22px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(190,170,90,0.28);
  border-left: 1px dashed rgba(0,0,0,0.12);
  border-right: 1px dashed rgba(0,0,0,0.12);
}
:root[data-fx="paper"] .tilt-1 { transform: rotate(-1.1deg); }
:root[data-fx="paper"] .tilt-2 { transform: rotate(0.8deg); }
:root[data-fx="paper"] .tilt-3 { transform: rotate(-0.5deg); }

/* ── 고무도장 배지: 회전 + 빗금 질감 ── */
:root[data-fx="paper"] .stamp {
  border-width: 2.5px;
  transform: rotate(-6deg);
  opacity: 0.92;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255,255,255,0.12) 3px 4px);
}

/* ── 거친 형광펜 밑줄 ── */
:root[data-fx="paper"] .marker {
  padding: 0 4px;
  background: linear-gradient(105deg, transparent 2%, var(--marker-hl) 2%, var(--marker-hl) 98%, transparent 98%);
  background-repeat: no-repeat;
  background-position: 0 68%;
  background-size: 100% 42%;
}

/* ── 찢어진 구분선 ── */
:root[data-fx="paper"] .divide-torn { border-bottom: 2px dashed var(--line); }