/* ============ 캐릭터 테마 ============ */
/*
   html[data-theme="<슬러그>"] 하나로 앱 전체 색이 바뀐다.
   01-base.css 의 :root 변수를 덮어쓰는 방식이라 기존 CSS 는 한 줄도 고치지 않았다
   (앱 전체가 var(--) 를 1200번 쓰고 있어서 변수만 갈아끼우면 따라온다).

   속성이 없으면 = 기본 흑백 테마. 아무것도 적용되지 않는다.

   색을 고를 때 지킨 것:
   - 배경은 전부 어둡게 유지한다. 야간 학습용이고 기존 화면이 순검정 기준으로 짜여 있다.
   - --success / --danger 는 캐릭터 색으로 바꾸지 않는다. 정답이 초록, 오답이 빨강이라는
     신호가 깨지면 채점 결과를 오독한다. 캐릭터 개성은 --accent 로만 낸다.
   - 본문 대비(--text-primary on --bg)는 WCAG AA 4.5:1 을 넘긴다. 매일 읽는 글자다.

   --accent-rgb 는 왜 따로 두나: 히트맵처럼 같은 색을 투명도만 바꿔 여러 단계로 쓰는 곳이
   있는데, rgba(var(--accent-rgb), 0.2) 로 쓰면 color-mix() 없이도 어느 브라우저에서나 된다.
*/

/* 이미지 슬롯 기본값 — 파일을 넣지 않은 테마는 그냥 안 그려진다 (요청 자체가 안 나간다) */
:root {
  --char-img: none;
  --char-portrait: none;
  --accent-rgb: 225, 225, 225;
}

/* ---------- 1. 아이리 칸나 · 보라 ---------- */
html[data-theme="airi-kanna"] {
  --bg: #08060d;
  --bg-elev: #100c19;
  --bg-input: #171122;
  --bg-hover: #1e1730;
  --border: rgba(185, 165, 232, 0.12);
  --border-strong: rgba(185, 165, 232, 0.24);
  --text-primary: #e9e4f2;
  --text-secondary: #a99bc4;
  --text-muted: #6b6084;
  --accent: #b9a5e8;
  --accent-hover: #d3c5f5;
  --accent-glow: rgba(185, 165, 232, 0.09);
  --accent-rgb: 185, 165, 232;
}

/* ---------- 2. 아야츠노 유니 · 라벤더 ---------- */
html[data-theme="ayatsuno-yuni"] {
  --bg: #0a090f;
  --bg-elev: #131220;
  --bg-input: #1a1929;
  --bg-hover: #232238;
  --border: rgba(205, 189, 245, 0.12);
  --border-strong: rgba(205, 189, 245, 0.24);
  --text-primary: #eeebf7;
  --text-secondary: #aea9c6;
  --text-muted: #706c88;
  --accent: #cdbdf5;
  --accent-hover: #e4d9ff;
  --accent-glow: rgba(205, 189, 245, 0.09);
  --accent-rgb: 205, 189, 245;
}

/* ---------- 3. 시라유키 히나 · 홍색 ---------- */
html[data-theme="shirayuki-hina"] {
  --bg: #0b0708;
  --bg-elev: #150d0f;
  --bg-input: #1c1214;
  --bg-hover: #26181b;
  --border: rgba(232, 99, 111, 0.14);
  --border-strong: rgba(232, 99, 111, 0.28);
  --text-primary: #f2e7e8;
  --text-secondary: #c0a4a7;
  --text-muted: #7d6568;
  --accent: #e8636f;
  --accent-hover: #ff8b95;
  --accent-glow: rgba(232, 99, 111, 0.09);
  --accent-rgb: 232, 99, 111;
}

/* ---------- 4. 네네코 마시로 · 은회색 ---------- */
html[data-theme="neneko-mashiro"] {
  --bg: #08090a;
  --bg-elev: #111315;
  --bg-input: #171a1d;
  --bg-hover: #202427;
  --border: rgba(207, 212, 220, 0.11);
  --border-strong: rgba(207, 212, 220, 0.22);
  --text-primary: #e9ecf0;
  --text-secondary: #a5acb5;
  --text-muted: #697078;
  --accent: #cfd4dc;
  --accent-hover: #f0f3f7;
  --accent-glow: rgba(207, 212, 220, 0.07);
  --accent-rgb: 207, 212, 220;
}

/* ---------- 5. 아카네 리제 · 진홍 ---------- */
html[data-theme="akane-lize"] {
  --bg: #0a0607;
  --bg-elev: #150b0d;
  --bg-input: #1d0f12;
  --bg-hover: #281418;
  --border: rgba(224, 70, 86, 0.14);
  --border-strong: rgba(224, 70, 86, 0.28);
  --text-primary: #f3e5e7;
  --text-secondary: #c39ba0;
  --text-muted: #806064;
  --accent: #e04656;
  --accent-hover: #ff6f7d;
  --accent-glow: rgba(224, 70, 86, 0.09);
  --accent-rgb: 224, 70, 86;
}

/* ---------- 6. 아라하시 타비 · 시안 ---------- */
html[data-theme="arahashi-tabi"] {
  --bg: #05090b;
  --bg-elev: #0c1418;
  --bg-input: #101b20;
  --bg-hover: #16252c;
  --border: rgba(95, 211, 230, 0.13);
  --border-strong: rgba(95, 211, 230, 0.26);
  --text-primary: #e3f1f5;
  --text-secondary: #97b7c0;
  --text-muted: #5e7880;
  --accent: #5fd3e6;
  --accent-hover: #8ae8f6;
  --accent-glow: rgba(95, 211, 230, 0.08);
  --accent-rgb: 95, 211, 230;
}

/* ---------- 7. 텐코 시부키 · 자주 ---------- */
html[data-theme="tenko-shibuki"] {
  --bg: #09070c;
  --bg-elev: #130f1a;
  --bg-input: #1a1424;
  --bg-hover: #241b31;
  --border: rgba(178, 148, 224, 0.13);
  --border-strong: rgba(178, 148, 224, 0.26);
  --text-primary: #ede6f4;
  --text-secondary: #afa1c4;
  --text-muted: #706584;
  --accent: #b294e0;
  --accent-hover: #ccb4f2;
  --accent-glow: rgba(178, 148, 224, 0.09);
  --accent-rgb: 178, 148, 224;
  /* 무녀복 주홍을 경고색으로 빌려 쓴다 */
  --warning: #e0a15f;
}

/* ---------- 8. 아오쿠모 린 · 청색 ---------- */
html[data-theme="aokumo-rin"] {
  --bg: #05070c;
  --bg-elev: #0b1018;
  --bg-input: #0f1620;
  --bg-hover: #16202d;
  --border: rgba(121, 176, 232, 0.13);
  --border-strong: rgba(121, 176, 232, 0.26);
  --text-primary: #e2ebf6;
  --text-secondary: #98aac1;
  --text-muted: #5f6e84;
  --accent: #79b0e8;
  --accent-hover: #a3ccf5;
  --accent-glow: rgba(121, 176, 232, 0.09);
  --accent-rgb: 121, 176, 232;
}

/* ---------- 9. 하나코 나나 · 핫핑크 ---------- */
html[data-theme="hanako-nana"] {
  --bg: #0b060a;
  --bg-elev: #160c13;
  --bg-input: #1e1019;
  --bg-hover: #291623;
  --border: rgba(245, 98, 164, 0.14);
  --border-strong: rgba(245, 98, 164, 0.28);
  --text-primary: #f5e6ee;
  --text-secondary: #c89db4;
  --text-muted: #836074;
  --accent: #f562a4;
  --accent-hover: #ff8ec1;
  --accent-glow: rgba(245, 98, 164, 0.09);
  --accent-rgb: 245, 98, 164;
}

/* ---------- 10. 유즈하 리코 · 연둣빛 ---------- */
html[data-theme="yuzuha-riko"] {
  --bg: #060a07;
  --bg-elev: #0d150f;
  --bg-input: #111c14;
  --bg-hover: #18271c;
  --border: rgba(147, 224, 150, 0.13);
  --border-strong: rgba(147, 224, 150, 0.26);
  --text-primary: #e5f2e7;
  --text-secondary: #9dbca1;
  --text-muted: #627c66;
  --accent: #93e096;
  --accent-hover: #b6f0b9;
  --accent-glow: rgba(147, 224, 150, 0.08);
  --accent-rgb: 147, 224, 150;
  /* accent 가 초록이라 정답색과 겹친다. 정답은 청록으로 밀어 구분을 살린다. */
  --success: #7fd9c4;
  --success-bg: rgba(127, 217, 196, 0.08);
}

/* ==================================================================
   테마가 켜졌을 때만 적용되는 공통 규칙
   ================================================================== */

/* ---------- 원본에 색이 직접 박혀 있던 6군데 ----------
   원본 파일은 건드리지 않고 여기서 더 구체적인 선택자로 덮는다. */
html[data-theme] .attempt-detail pre { background: var(--bg-elev); }          /* 05-notes.css:92 */
html[data-theme] .today-card {                                                /* 06-dashboard.css:33 */
  background: linear-gradient(135deg, var(--bg-elev), var(--bg-input));
}
html[data-theme] .qa-toggle:hover { background: var(--accent-hover); }        /* 07-modal.css:150 */
html[data-theme] .btn-success:hover:not(:disabled) {                          /* 07-modal.css:222 */
  background: var(--success);
  filter: brightness(1.18);
}
html[data-theme] .notes-area.code-answer { background: var(--bg-elev); }      /* 07-modal.css:316 */
html[data-theme] .hud-cam { background: var(--bg); }                          /* 12-hud.css:85 */

/* ---------- 히트맵 잔디밭 ----------
   02-history.css 는 rgba(163,217,192,…) 를 직접 쓴다. 테마 accent 램프로 덮어
   공부한 날이 캐릭터 색으로 물들게 한다. */
html[data-theme] .heatmap-cell.completed-1 {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
}
html[data-theme] .heatmap-cell.completed-2 {
  background: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-hover);
  border-color: rgba(var(--accent-rgb), 0.5);
}
html[data-theme] .heatmap-cell.completed-3plus {
  background: rgba(var(--accent-rgb), 0.68);
  color: var(--bg);
  border-color: var(--accent);
}
html[data-theme] .heatmap-legend-cell:nth-of-type(1) { background: rgba(var(--accent-rgb), 0.2) !important; }
html[data-theme] .heatmap-legend-cell:nth-of-type(2) { background: rgba(var(--accent-rgb), 0.4) !important; }
html[data-theme] .heatmap-legend-cell:nth-of-type(3) { background: rgba(var(--accent-rgb), 0.65) !important; }

/* ---------- 이미지 슬롯 1 · 우하단 배경 워터마크 ----------
   fixed 로 깔고 본문은 그 위에 띄운다. 스크롤해도 따라오지 않는다. */
html[data-theme] body::before {
  content: '';
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(38vw, 460px);
  height: min(70vh, 720px);
  background-image: var(--char-img);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
  /* 잘린 티가 나지 않게 위·왼쪽으로 흐려진다 */
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%),
                      linear-gradient(to left, #000 40%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, #000 30%, transparent 100%),
              linear-gradient(to left, #000 40%, transparent 100%);
  mask-composite: intersect;
}

/* ---------- 이미지 슬롯 2 · 우측 큰 일러스트 ----------
   레일 56px + 본문 900px 가운데 정렬이라, 1500px 밑에서는 본문을 침범한다.
   그래서 넓은 화면에서만 나온다. */
html[data-theme] body::after { content: none; }

@media (min-width: 1500px) {
  html[data-theme] body::after {
    content: '';
    position: fixed;
    right: 0;
    bottom: 0;
    /* 본문 오른쪽 끝과 화면 오른쪽 끝 사이 여백만 쓴다 */
    width: calc((100vw - 900px - var(--left-w, 72px)) / 2 + 60px);
    max-width: 420px;
    height: 92vh;
    background-image: var(--char-portrait);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
    mask-image: linear-gradient(to left, #000 55%, transparent 100%);
    animation: theme-illust-in 0.5s ease-out both;
  }
}

@keyframes theme-illust-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 0.22; transform: none; }
}

/* 본문·네비·모달은 항상 이미지 위에 온다 */
html[data-theme] .container,
html[data-theme] .nav-rail,
html[data-theme] .modal-overlay,
html[data-theme] .hud { position: relative; z-index: 1; }
html[data-theme] .nav-rail,
html[data-theme] .modal-overlay,
html[data-theme] .hud { z-index: 50; }

/* 좁은 화면에서는 이미지를 전부 뺀다. 본문과 겹친다. */
@media (max-width: 900px) {
  html[data-theme] body::before,
  html[data-theme] body::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body::after { animation: none; }
}

/* ==================================================================
   테마 고르는 화면 (설정 안)
   ================================================================== */

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.14s, transform 0.14s;
}
.theme-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.theme-card:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.theme-card.active { border-color: var(--accent); }

/* 캐릭터 이미지 자리 — 파일이 없으면 팔레트 색만 보인다 */
.theme-card-art {
  height: 76px;
  background-color: var(--tc-bg, var(--bg-elev));
  background-image: var(--tc-img, none);
  background-size: cover;
  background-position: center 22%;
  position: relative;
}
.theme-card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--tc-bg, var(--bg-elev)) 4%, transparent 70%);
}
/* 이미지가 없을 때 채우는 그라데이션 */
.theme-card.no-art .theme-card-art {
  background-image: linear-gradient(140deg, var(--tc-accent) 0%, transparent 72%);
  opacity: 0.55;
}

.theme-card-name {
  padding: 7px 8px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
.theme-card-swatches {
  display: flex;
  gap: 3px;
  padding: 0 8px 9px;
}
.theme-card-swatch {
  width: 12px;
  height: 4px;
  border-radius: 2px;
}

.theme-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.theme-card.active .theme-card-check { display: flex; }

/* 기본(흑백) 카드는 이미지 자리를 무채색 체크무늬로 */
.theme-card.is-default .theme-card-art {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.05) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.05) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  opacity: 1;
}

.theme-picker-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 10px 0 2px;
  line-height: 1.6;
}

/* ---------- 해금 토스트 ---------- */
.nerd-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 11px 18px;
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  z-index: 9999;
  pointer-events: none;
  animation: nerd-toast-in 0.28s ease-out both;
}
@keyframes nerd-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.nerd-toast.leaving { animation: nerd-toast-out 0.24s ease-in both; }
@keyframes nerd-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .nerd-toast, .nerd-toast.leaving { animation: none; }
}