/* ───── 할로윈 한정 스킨 (v49) ─────
   html[data-skin="halloween"]일 때만 작동하는 덧입히기 파일. style.css·skin.css는 그대로이며,
   바꾸는 것은 색(토큰)과 장식 이미지뿐이다(기능·메뉴 순서·글꼴·버튼 크기는 그대로).
   끄면 기존 라이트·다크 테마의 색과 표시로 돌아온다. */

/* ── 색 토큰: 라이트(기본) ── */
html[data-skin="halloween"] {
  --bg: #E4D4B9;
  --panel: #F1E4CE;
  --panel2: #E7D7BD;
  --text: #35281F;
  --muted: #6C5846;
  --line: #B79B76;
  --head: #4A2C16;
  --gold: #74401F;          /* 링크·선택 강조 */
  --accent: #8D4C24;        /* 주요 버튼 배경 */
  --on-accent: #FFF4E1;     /* 주요 버튼 글자 */
  --soft: #EBD3AE;          /* 선택된 칸 배경 */
  --focus: #74401F;
  --brass: #8A5E34;         /* 테두리·스크롤바의 호박빛 갈색 */
  --wood: #352820;
  --wood2: #2A1F18;
  --hw-purple: #6B5375;     /* 작은 장식 전용 */
  --hw-sel-bg: #EBD3AE; --hw-sel-bd: #8D4C24; --hw-sel-fg: #4A2410;
  --tag-bg: #E3D1B2; --tag-fg: #4B3A2C;
  --choice-bg: #EADBC0; --banner-bg: #EFDDBB;
  --stone-veil: rgba(228, 212, 185, .90);
}
/* ── 색 토큰: 다크 ── */
html[data-skin="halloween"][data-theme="dark"] {
  --bg: #171619;
  --panel: #24211F;
  --panel2: #302923;
  --text: #EEE2CF;
  --muted: #BEB09C;
  --line: #574333;
  --head: #F2D5AA;
  --gold: #E4A15D;
  --accent: #D99A55;
  --on-accent: #21170F;
  --soft: #3B2C20;
  --focus: #E4A15D;
  --brass: #9A7141;
  --wood: #211C1A;
  --wood2: #181412;
  --hw-purple: #8D7A9D;
  --hw-sel-bg: #3B2C20; --hw-sel-bd: #D99A55; --hw-sel-fg: #F2D5AA;
  --tag-bg: #3A3026; --tag-fg: #EEE2CF;
  --choice-bg: #2C2622; --banner-bg: #33291D;
  --stone-veil: rgba(23, 22, 25, .84);
}
/* 오류·성공·접속 상태·기숙사 색은 기존 의미 그대로 둔다(--good/--bad/--warn/--event 등은 건드리지 않음) */

/* 바깥 배경: 먹빛 석재(내용 뒤에서는 낮춘 대비) */
html[data-skin="halloween"] body::before,
html[data-skin="halloween"] body:not(.shell-on)::before,
html[data-skin="halloween"][data-theme="dark"] body:not(.shell-on)::before {
  background: linear-gradient(var(--stone-veil), var(--stone-veil)), url(/img/stone.webp) 72% center / cover no-repeat;
}

/* 읽는 면: 새 질감 없이 패널 색 그대로 */
html[data-skin="halloween"] .card {
  background-image: none;
  background-color: var(--panel);
  border-color: var(--line);
  border-top-color: var(--line);
}
html[data-skin="halloween"] .card h2 { border-bottom-color: var(--line); }
html[data-skin="halloween"] .log { border-left-color: var(--hw-purple); }

/* 입력창: 면 + 또렷한 테두리, 키보드 포커스는 강조색 외곽선 */
html[data-skin="halloween"] input[type=text], html[data-skin="halloween"] input[type=password],
html[data-skin="halloween"] input[type=number], html[data-skin="halloween"] select, html[data-skin="halloween"] textarea {
  background: var(--panel2);
  border-color: color-mix(in srgb, var(--muted) 62%, var(--line));
}
html[data-skin="halloween"][data-theme="dark"] input[type=text], html[data-skin="halloween"][data-theme="dark"] input[type=password],
html[data-skin="halloween"][data-theme="dark"] select, html[data-skin="halloween"][data-theme="dark"] textarea {
  background: var(--panel2); border-color: #8A7760;
}
html[data-skin="halloween"] input:focus, html[data-skin="halloween"] textarea:focus, html[data-skin="halloween"] select:focus,
html[data-skin="halloween"] button:focus-visible, html[data-skin="halloween"] a:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* 버튼: 주요 버튼만 주황 */
html[data-skin="halloween"] button { background: color-mix(in srgb, var(--panel2) 85%, var(--panel)); }
html[data-skin="halloween"] button.ghost { background: transparent; }
html[data-skin="halloween"] button.primary { background: var(--accent); color: var(--on-accent); border-color: color-mix(in srgb, var(--accent) 72%, #000); }
html[data-skin="halloween"] button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--hw-sel-bd) 55%, var(--line)); }

/* 상단 바·하단 탭: 짙은 목재(라이트에서도 글자는 상아색) */
html[data-skin="halloween"] .topbar, html[data-skin="halloween"] .tabs {
  --text: #EEE2CF; --muted: #C9BBA5; --line: #5A4636; --gold: #E4A15D; --head: #F2D5AA;
  --accent: #E4A15D; --on-accent: #21170F;
  border-bottom-color: #A8703A;
}
html[data-skin="halloween"] .topbar .chip.gal { color: #F2D5AA; border-color: #B77A3E; }
html[data-skin="halloween"] .topbar a, html[data-skin="halloween"] .guidelink { color: #E4A15D; }
html[data-skin="halloween"] .topbar .pill b { color: #F5E9D4; }

/* 선택된 메뉴·칸: 같은 모양으로 통일. 마우스 올림은 이보다 약하게 */
html[data-skin="halloween"] .sidenav button.active, html[data-skin="halloween"] .tabs button.active,
html[data-skin="halloween"] .chan.on, html[data-skin="halloween"] .pick.on, html[data-skin="halloween"] button.sm.on,
html[data-skin="halloween"] .pollopt.on, html[data-skin="halloween"] .placetab.on {
  background: var(--hw-sel-bg); border-color: var(--hw-sel-bd); color: var(--hw-sel-fg); box-shadow: none;
}
html[data-skin="halloween"] .tabs button.active { background: #3B2C20; border-color: #D99A55; color: #F2D5AA; box-shadow: none; }
html[data-skin="halloween"] .sidenav button:hover:not(.active), html[data-skin="halloween"] .chan:hover:not(.on),
html[data-skin="halloween"] .pick:hover:not(.on) {
  background: color-mix(in srgb, var(--hw-sel-bd) 9%, transparent);
  border-color: color-mix(in srgb, var(--hw-sel-bd) 38%, var(--line));
}
html[data-skin="halloween"] .tabs button:hover:not(.active) { background: rgba(217, 154, 85, .10); }

/* 지도: 양피지 원화는 그대로, 프레임의 작은 강조선만 호박빛 */
html[data-skin="halloween"] .mapframe { outline: 1px solid rgba(217, 154, 85, .55); outline-offset: -1px; }
html[data-skin="halloween"][data-theme="dark"] .mapframe { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(217, 154, 85, .22)); }
html[data-skin="halloween"] .tm-chip.on { box-shadow: 0 0 0 2px #D99A55, 0 2px 6px rgba(0, 0, 0, .5); }

/* ── 장식 이미지 (정지 이미지, pointer-events: none, 좁은 화면에서는 숨김) ── */
.hw-seal { display: none; }
html[data-skin="halloween"] .hw-seal { display: inline-block; width: 30px; height: auto; margin-right: 8px; flex: none; vertical-align: middle; pointer-events: none; }
html[data-skin="halloween"] .seal.hw-alt { display: none; }

@media (min-width: 900px) {
  /* 호박 두 개와 촛불: 왼쪽 사이드바 마지막 패널 다음, 사이드바와 함께 스크롤 */
  html[data-skin="halloween"] .side::after {
    content: ""; display: block; width: 150px; height: 74px; margin: 14px auto 8px; pointer-events: none;
    background: url(/img/halloween/pumpkins.webp) center / contain no-repeat;
  }
  /* 거미줄·박쥐: 가운데 첫 콘텐츠 패널에 한 번만. 글자·버튼과 겹치면 스크립트가 클래스를 떼어 생략한다 */
  html[data-skin="halloween"] .card.hw-first { position: relative; }
  html[data-skin="halloween"] .card.hw-first.hw-web::after {
    content: ""; position: absolute; top: 1px; right: 1px; width: 72px; height: 69px; pointer-events: none; opacity: .9;
    background: url(/img/halloween/web.webp) right top / contain no-repeat;
  }
  html[data-skin="halloween"] .card.hw-first.hw-bats::before {
    content: ""; position: absolute; width: 96px; height: 36px; left: var(--hw-bat-l, 0); top: var(--hw-bat-t, 0); pointer-events: none;
    background: url(/img/halloween/bats.webp) center / contain no-repeat;
  }
}

/* 지도 장소 이름표: 할로윈의 공통 button 배경이 덮어써 까맣게 되는 문제 방지 */
html[data-skin="halloween"] .tm-chip { background: rgba(244, 233, 202, .95); color: #30271f; }
html[data-skin="halloween"] .tm-chip:hover:not(:disabled) { background: #fbf1d4; border-color: #4a3720; }
html[data-skin="halloween"] .tm-chip .tm-n2 { color: #6a5030; }