/* ============================================
   훈련앱 — 따뜻한 색 (인지 자람터 색조)
   ============================================
   ⛔⛔ 되돌리는 방법 = 이 파일의 내용을 지우는 것뿐이다.
        이 파일이 비면 훈련앱 전체가 지금(어두운) 색으로 그대로 돌아온다.
        훈련 화면 파일은 색을 낱말로만 부르고 있어서, 낱말을 다시 정하지 않으면
        각 화면이 자기 :root 에 적어 둔 원래 어두운 값이 그대로 쓰인다.

   ⛔ 영역 색(--cat / --accent)은 여기서 건드리지 않는다.
      주의력 파랑 · 감각운동 분홍처럼 어느 영역의 훈련인지 알려 주는 색이고,
      2026-08-24에 작업자가 「맨 위 상자는 지금 파랑 그대로」로 정하셨다.

   ⛔ 자극(문제)이 나오는 상자는 프로그램마다 따로 정한다.
      스트룹은 어두운 채로 남긴다 — 잉크 색을 구분해야 훈련이 성립한다.

   낱말 표 (지금 → 따뜻하게)
     --dark-bg          #141010          → #FFF9F0   화면 바탕
     --dark-surface     흰색 4% 막       → #FFFFFF   상자·카드·누르는 것의 바탕
     --dark-film        흰색 6% 막       → 갈색 5% 막  은은하게 얹는 막
     --dark-border      흰색 8%          → 갈색 14%   테두리
     --dark-text        흰색 88%         → #4A3B32   본문 글자
     --dark-text-muted  흰색 40%         → 갈색 72%   흐린 글자
     --dark-text-dim    흰색 20%         → 갈색 42%   더 흐린 글자
       ⛔ 흐린 글자 둘은 그냥 옮기면(52%·28%) 지금보다 더 흐려진다. 크림색 바탕이
          검정 바탕보다 밝아서 같은 옅기라도 대비가 낮아지기 때문이다. 2026-08-25에
          글자마다 대비를 재어 「지금보다 나빠지지 않는」 값으로 올렸다.
     --dark-veil        거의 검정 85%    → 크림 88%   화면을 덮는 것
   ============================================ */

:root {
    /* 이 낱말이 있어야 app/js/warm-home.js 가 첫 화면의 맨 위를 다시 담는다.
       이 파일이 비면 낱말이 없어지고 첫 화면은 지금 모습 그대로 뜬다. */
    --warm-on: 1;

    --dark-bg: #FFF9F0;
    --dark-surface: #FFFFFF;
    --dark-film: rgba(74, 59, 50, 0.05);
    --dark-border: rgba(74, 59, 50, 0.14);
    --dark-text: #4A3B32;
    --dark-text-muted: rgba(74, 59, 50, 0.72);
    --dark-text-dim: rgba(74, 59, 50, 0.42);
    --dark-veil: rgba(255, 249, 240, 0.88);
    /* 잠깐 뜨는 상자를 덮는 것과 그 상자 자체 — 수감각 여덟에서 처음 쓴다 (2026-08-26).
       ⛔ 상자를 어두운 채로 두면 그 안의 글이 갈색으로 얹혀 14.68 에서 1.72 로 사라진다(실측). */
    --dark-veil-strong: rgba(255, 249, 240, 0.92);
    --dark-panel: #FFFFFF;

    /* ── 옅기 사다리 ─────────────────────────────────────────
       훈련 화면들은 어두운 바탕 위에 「흰색을 몇 % 옅게」로 글자·상자·테두리를 그린다.
       크림색 바탕에서는 흰색이 안 보이므로 갈색으로 뒤집되, 옅기를 그냥 옮기면 안 된다.
       그래서 **지금 대비와 같아지는 갈색 옅기**를 계산해 아래 표로 박아 두었다(2026-08-25).

       ⚠ 흰색 75% 위쪽은 크림 바탕에서 따라잡을 수 없다.
         검정 바탕에서 낼 수 있는 최대 대비가 18.90인데 크림 바탕에서는 10.22가 한계다.
         그 위는 전부 10.22로 눌린다 — 눈금(본문 4.5)의 두 배가 넘으므로 또렷하게는 읽힌다.
       ─────────────────────────────────────────────────── */
    --dark-w020: rgba(74, 59, 50, 0.025);        /* 지금 흰색 2% · 대비 1.04 → 1.04 */
    --dark-w025: rgba(74, 59, 50, 0.031);        /* 지금 흰색 2.5% · 대비 1.05 → 1.05 */
    --dark-w030: rgba(74, 59, 50, 0.038);        /* 지금 흰색 3% · 대비 1.06 → 1.06 */
    --dark-w040: rgba(74, 59, 50, 0.052);        /* 지금 흰색 4% · 대비 1.09 → 1.09 */
    --dark-w050: rgba(74, 59, 50, 0.067);        /* 지금 흰색 5% · 대비 1.12 → 1.12 */
    --dark-w060: rgba(74, 59, 50, 0.083);        /* 지금 흰색 6% · 대비 1.15 → 1.15 */
    --dark-w070: rgba(74, 59, 50, 0.099);        /* 지금 흰색 7% · 대비 1.18 → 1.18 */
    --dark-w080: rgba(74, 59, 50, 0.116);        /* 지금 흰색 8% · 대비 1.22 → 1.22 */
    --dark-w090: rgba(74, 59, 50, 0.133);        /* 지금 흰색 9% · 대비 1.25 → 1.25 */
    --dark-w100: rgba(74, 59, 50, 0.151);        /* 지금 흰색 10% · 대비 1.29 → 1.29 */
    --dark-w120: rgba(74, 59, 50, 0.187);        /* 지금 흰색 12% · 대비 1.38 → 1.38 */
    --dark-w130: rgba(74, 59, 50, 0.205);        /* 지금 흰색 13% · 대비 1.43 → 1.43 */
    --dark-w140: rgba(74, 59, 50, 0.223);        /* 지금 흰색 14% · 대비 1.48 → 1.48 */
    --dark-w150: rgba(74, 59, 50, 0.242);        /* 지금 흰색 15% · 대비 1.53 → 1.53 */
    --dark-w160: rgba(74, 59, 50, 0.260);        /* 지금 흰색 16% · 대비 1.59 → 1.59 */
    --dark-w180: rgba(74, 59, 50, 0.297);        /* 지금 흰색 18% · 대비 1.71 → 1.71 */
    --dark-w200: rgba(74, 59, 50, 0.334);        /* 지금 흰색 20% · 대비 1.84 → 1.84 */
    --dark-w220: rgba(74, 59, 50, 0.370);        /* 지금 흰색 22% · 대비 1.98 → 1.98 */
    --dark-w250: rgba(74, 59, 50, 0.423);        /* 지금 흰색 25% · 대비 2.21 → 2.21 */
    --dark-w260: rgba(74, 59, 50, 0.440);        /* 지금 흰색 26% · 대비 2.30 → 2.30 */
    --dark-w300: rgba(74, 59, 50, 0.506);        /* 지금 흰색 30% · 대비 2.67 → 2.67 */
    --dark-w340: rgba(74, 59, 50, 0.568);        /* 지금 흰색 34% · 대비 3.09 → 3.09 */
    --dark-w350: rgba(74, 59, 50, 0.582);        /* 지금 흰색 35% · 대비 3.20 → 3.20 */
    --dark-w400: rgba(74, 59, 50, 0.653);        /* 지금 흰색 40% · 대비 3.82 → 3.82 */
    --dark-w420: rgba(74, 59, 50, 0.679);        /* 지금 흰색 42% · 대비 4.09 → 4.09 */
    --dark-w450: rgba(74, 59, 50, 0.717);        /* 지금 흰색 45% · 대비 4.53 → 4.53 */
    --dark-w500: rgba(74, 59, 50, 0.776);        /* 지금 흰색 50% · 대비 5.33 → 5.33 */
    --dark-w550: rgba(74, 59, 50, 0.830);        /* 지금 흰색 55% · 대비 6.22 → 6.22 */
    --dark-w600: rgba(74, 59, 50, 0.881);        /* 지금 흰색 60% · 대비 7.20 → 7.20 */
    --dark-w650: rgba(74, 59, 50, 0.929);        /* 지금 흰색 65% · 대비 8.29 → 8.29 */
    --dark-w700: rgba(74, 59, 50, 0.974);        /* 지금 흰색 70% · 대비 9.48 → 9.48 */
    --dark-w750: rgba(74, 59, 50, 1.000);        /* 지금 흰색 75% · 대비 10.77 → 10.22  ⚠ 크림에서는 못 미침 */
    --dark-w780: rgba(74, 59, 50, 1.000);        /* 지금 흰색 78% · 대비 11.60 → 10.22  ⚠ 크림에서는 못 미침 */
    --dark-w800: rgba(74, 59, 50, 1.000);        /* 지금 흰색 80% · 대비 12.17 → 10.22  ⚠ 크림에서는 못 미침 */
    --dark-w850: rgba(74, 59, 50, 1.000);        /* 지금 흰색 85% · 대비 13.68 → 10.22  ⚠ 크림에서는 못 미침 */
    --dark-w880: rgba(74, 59, 50, 1.000);        /* 지금 흰색 88% · 대비 14.64 → 10.22  ⚠ 크림에서는 못 미침 */
    --dark-w900: rgba(74, 59, 50, 1.000);        /* 지금 흰색 90% · 대비 15.31 → 10.22  ⚠ 크림에서는 못 미침 */
    --dark-w920: rgba(74, 59, 50, 1.000);        /* 지금 흰색 92% · 대비 15.99 → 10.22  ⚠ 크림에서는 못 미침 */
    --dark-w950: rgba(74, 59, 50, 1.000);        /* 지금 흰색 95% · 대비 17.04 → 10.22  ⚠ 크림에서는 못 미침 */
}

/* ⛔ 화면 전체가 아니라 **결과 화면만** 따뜻하게 하는 갈래가 있다 (2026-08-26 작업자 지시).
   그런 화면은 <html> 에 data-warm-scope="result" 를 붙인다. 그러면 화면 바탕은 지금 색 그대로 두고,
   훈련을 마치고 뜨는 결과 화면만 크림색으로 뜬다. 그 화면에 어떤 색을 쓰는지는 맨 아래에 적었다. */
:root:not([data-warm-scope="result"]) body {
    background: var(--dark-bg) !important;
    color: var(--dark-text);
}

/* ── 맨 위 영역 색 상자 안은 흰 글자 그대로 ─────────────────────
   맨 위 상자는 영역 색(주의력 파랑 · 시지각 보라 …)으로 진하게 칠해져 있고,
   그 안의 글자와 누르는 것은 흰색을 옅게 얹어 그린다.
   바탕이 크림색이 되어도 **그 상자 안은 여전히 진한 색**이므로 흰색을 그대로 써야 한다.
   그래서 상자 안에서만 옅기 사다리를 흰색으로 되돌린다. (2026-08-25)
   ⛔ 이것을 빼먹으면 맨 위 상자의 글자가 진한 색 위에 갈색으로 얹혀 안 읽힌다. */
.zone-header, .zone-header *,
.zone-bridge, .zone-bridge *,
.zone-bridge-s, .zone-bridge-s *,
body[data-warm]:not([data-warm="index"]) .header,
body[data-warm]:not([data-warm="index"]) .header * {
    --dark-text: rgba(255, 255, 255, 0.88);
    --dark-text-muted: rgba(255, 255, 255, 0.4);
    --dark-text-dim: rgba(255, 255, 255, 0.2);
    --dark-surface: rgba(255, 255, 255, 0.04);
    --dark-film: rgba(255, 255, 255, 0.06);
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-w020: rgba(255, 255, 255, 0.02);
    --dark-w025: rgba(255, 255, 255, 0.025);
    --dark-w030: rgba(255, 255, 255, 0.03);
    --dark-w040: rgba(255, 255, 255, 0.04);
    --dark-w050: rgba(255, 255, 255, 0.05);
    --dark-w060: rgba(255, 255, 255, 0.06);
    --dark-w070: rgba(255, 255, 255, 0.07);
    --dark-w080: rgba(255, 255, 255, 0.08);
    --dark-w090: rgba(255, 255, 255, 0.09);
    --dark-w100: rgba(255, 255, 255, 0.1);
    --dark-w120: rgba(255, 255, 255, 0.12);
    --dark-w130: rgba(255, 255, 255, 0.13);
    --dark-w140: rgba(255, 255, 255, 0.14);
    --dark-w150: rgba(255, 255, 255, 0.15);
    --dark-w160: rgba(255, 255, 255, 0.16);
    --dark-w180: rgba(255, 255, 255, 0.18);
    --dark-w200: rgba(255, 255, 255, 0.2);
    --dark-w220: rgba(255, 255, 255, 0.22);
    --dark-w250: rgba(255, 255, 255, 0.25);
    --dark-w260: rgba(255, 255, 255, 0.26);
    --dark-w300: rgba(255, 255, 255, 0.3);
    --dark-w340: rgba(255, 255, 255, 0.34);
    --dark-w350: rgba(255, 255, 255, 0.35);
    --dark-w400: rgba(255, 255, 255, 0.4);
    --dark-w420: rgba(255, 255, 255, 0.42);
    --dark-w450: rgba(255, 255, 255, 0.45);
    --dark-w500: rgba(255, 255, 255, 0.5);
    --dark-w550: rgba(255, 255, 255, 0.55);
    --dark-w600: rgba(255, 255, 255, 0.6);
    --dark-w650: rgba(255, 255, 255, 0.65);
    --dark-w700: rgba(255, 255, 255, 0.7);
    --dark-w750: rgba(255, 255, 255, 0.75);
    --dark-w780: rgba(255, 255, 255, 0.78);
    --dark-w800: rgba(255, 255, 255, 0.8);
    --dark-w850: rgba(255, 255, 255, 0.85);
    --dark-w880: rgba(255, 255, 255, 0.88);
    --dark-w900: rgba(255, 255, 255, 0.9);
    --dark-w920: rgba(255, 255, 255, 0.92);
    --dark-w950: rgba(255, 255, 255, 0.95);
}
/* ⛔ 다만 맨 위 상자 아래로 이어지는 곡선은 화면 바탕색이라 되돌리면 안 된다 */
.zone-bridge-s::after, .zone-bridge::after { --dark-bg: #FFF9F0; }

/* ── 프로그램마다 따로 정하는 것 ──────────────────────────
   화면 파일의 <body> 에 붙인 이름으로 갈라 적는다.
   여기 없는 프로그램은 아직 손대지 않은 것이다. */

/* 스트룹 — 글자가 나오는 상자는 어둡게 남긴다 (색상 대비) */
[data-warm="004_stroop"] .stimulus-area {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.06);
}
[data-warm="004_stroop"] .stimulus {
    text-shadow: 0 2px 0 #00000040;
}
/* 노랑은 크림색 바탕에서 안 읽혀 한 단계 진하게 쓴다 (2026-08-24) */
[data-warm="004_stroop"] .btn[data-color="yellow"] {
    border-color: #d4a800 !important;
    color: #a37f00 !important;
}

/* 테트리스 셋 — 기본·드래그(세로)·드래그(가로)는 같은 색을 쓴다. 작업자 지시 2026-08-25:
   *"테트리스 가로, 세로버전은 기본 테트리스 메뉴 화면과 같은 색상을 채택해야 대비가 될 것 같아요."*
   영역 색(보라)을 글자색으로 쓰던 곳은 밝은 바탕에서 흐려져 한 단계 진하게 쓴다. */
[data-warm="019_tetris_classic"] .status-bar,
[data-warm="019_tetris_classic"] #latestRecordText,
[data-warm="019_tetris_classic"] #recommendBtn,
[data-warm="020_tetris_drag_vertical"] .status-bar,
[data-warm="020_tetris_drag_vertical"] #latestRecordText,
[data-warm="020_tetris_drag_vertical"] #recommendBtn,
[data-warm="021_tetris_drag_horizontal"] .status-bar,
[data-warm="021_tetris_drag_horizontal"] #latestRecordText,
[data-warm="021_tetris_drag_horizontal"] #recommendBtn {
    color: #4338ca !important;
}
/* 설정 이름들은 옅은 상자 위에 얹혀 있어 사다리 값보다 한 눈금 더 진하게 쓴다 */
[data-warm="019_tetris_classic"] .setting-label,
[data-warm="019_tetris_classic"] .toggle-sub,
[data-warm="020_tetris_drag_vertical"] .setting-label,
[data-warm="020_tetris_drag_vertical"] .toggle-sub,
[data-warm="021_tetris_drag_horizontal"] .setting-label,
[data-warm="021_tetris_drag_horizontal"] .toggle-sub {
    color: rgba(74, 59, 50, 0.70) !important;
}
[data-warm="019_tetris_classic"] #recommendBtn,
[data-warm="020_tetris_drag_vertical"] #recommendBtn,
[data-warm="021_tetris_drag_horizontal"] #recommendBtn {
    background: rgba(99, 102, 241, 0.10) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
}

/* ══════════════════════════════════════════════════════════
   훈련앱 첫 화면 — 「인지 자람터」 모양 (2026-08-25 작업자 채택)
   맨 위 흰 줄 + 인사 칸 + 영역 이름을 가운데 큰 제목으로.
   ⛔ 프로그램 카드는 지금 모습 그대로 둔다 — 작업자가 되돌리라고 하셨다.
   ⛔ 영역 여덟 색도 그대로 둔다.
   ══════════════════════════════════════════════════════════ */
[data-warm="index"] {
    --sb-primary: #FF9F43;
    --sb-primary-light: #FFC26B;
    --sb-primary-dark: #E8862F;
    --sb-bg: #FFF9F0;
    --sb-surface: #FFFFFF;
    --sb-text: #4A3B32;
    --sb-text-secondary: #7A6960;
    --sb-border: #F0E2D0;
    --sb-border-light: #F7EEE3;

    background: #FFF9F0 !important;
    color: #4A3B32;
    padding: 0 !important;
    line-height: 1.6;
}
[data-warm="index"] .container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
[data-warm="index"] h1,
[data-warm="index"] h2,
[data-warm="index"] h3,
[data-warm="index"] ._jr-logo,
[data-warm="index"] .category-label-text {
    font-family: 'Jua', 'Noto Sans KR', sans-serif;
    font-weight: normal;
}

/* 맨 위 흰 줄 */
[data-warm="index"] ._jr-bar {
    background: #fff;
    padding: 1rem 5%;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: sticky; top: 0; z-index: 100;
}
/* ⛔⛔ 2026-08-26에 작업자 지시로 **받은 파일(`_sample_skin.html`)의 값과 똑같이** 되돌렸다.
   *"우리시스템에 현재 있는 글자색을 지금 알려준 파일에 있는(상단, 헤더) 글자색과 동일하게 변경해주세요."*

   ⚠️ 앞서 2026-08-25에는 이 값들이 밝은 바탕에서 안 읽힌다고 보아 진하게 내렸었다.
      되돌리면서 대비가 이렇게 바뀐다(눈금 = 본문 4.5 · 큰 글자 3) —
        맨 위 흰 줄의 「🌱 센소리앤브레인」   #B35510 4.97 → #FF9F43 2.04
        맨 위 흰 줄의 영역 이름(안 고른 것)  #4A3B32 10.70 → #7A6960 5.23
        맨 위 흰 줄의 영역 이름(고른 것)    #B35510 4.97 → #FF9F43 2.04
        인사 칸의 큰 제목                #B35510 4.20 → #FF9F43 1.72
        인사 칸의 설명 줄                #6B5A4E 5.54 → #7A6960 4.41
   ⛔ 되돌리려면 아래 다섯 값을 위 표의 왼쪽 값으로 다시 바꾸면 된다. */
[data-warm="index"] ._jr-logo { font-size: 1.8rem; color: #FF9F43; text-decoration: none; }
/* 「HOME」과 「다른 아이디 선택」이 놓이는 곳 — 맨 위 흰 줄의 오른쪽 끝 (2026-08-26)
   ⛔ 예전에는 이 셋이 화면에서 통째로 없어져 로그인 상태를 다루는 곳이 멎었다. */
[data-warm="index"] ._jr-bar .header-actions {
    position: static !important;   /* ⛔ 넓은 화면에서 오른쪽 위에 띄워 두던 것이라 그대로 두면 겹친다 */
    display: flex !important; align-items: center; gap: 10px;
    margin: 0 0 0 auto !important; padding: 0 !important;
    top: auto !important; right: auto !important; flex-shrink: 0;
}
/* ⛔ 「HOME」은 어느 때든 보인다 — 작업자 지시 2026-08-26.
   누르면 OTnote 와 센소리앤브레인 카드가 있는 첫 화면으로 간다(가는 곳은 예전 그대로다). */
[data-warm="index"] ._jr-bar .home-btn.hidden { display: inline-flex !important; }
[data-warm="index"] ._jr-bar .home-btn,
[data-warm="index"] ._jr-bar .logout-btn {
    background: none !important; border: 1px solid rgba(74, 59, 50, 0.22) !important;
    color: #4A3B32 !important; border-radius: 50px !important;
    padding: 6px 14px !important; font-size: 13px !important; font-weight: 600 !important;
}
[data-warm="index"] ._jr-bar .home-btn:hover,
[data-warm="index"] ._jr-bar .logout-btn:hover { border-color: #FF9F43 !important; color: #B35510 !important; }
[data-warm="index"] ._jr-bar .logout-btn.hidden { display: none !important; }
/* ── 「전체」에서는 카드가 죽 이어진다 — 빈칸을 남기지 않는다 (작업자 지시 2026-08-26) ──
   ⛔ 지금은 영역마다 따로 칸을 만들어 담아서 **그 영역의 훈련이 적으면 오른쪽이 빈다**
      (감각운동은 하나뿐이라 「손가락 협응」 옆이 통째로 비었다).
   그래서 「전체」일 때는 영역 칸과 그 안의 담는 칸을 **없는 것처럼 두어**(display: contents)
      카드가 바깥 상자 하나에 죽 이어 담기게 한다.
      → 「손가락 협응」 오른쪽에 「스트룹」이 이어 붙는다.
   ⛔ 어느 영역을 골랐을 때는 예전처럼 영역 칸 하나만 뜬다(아래 `._jr-filtered`). */
[data-warm="index"] ._jr-all-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 22px;
}
[data-warm="index"] ._jr-all-grid .category-section,
[data-warm="index"] ._jr-all-grid .apps-grid { display: contents; }

/* 어느 영역을 골랐을 때 — 그 영역만 예전 모양으로 */
[data-warm="index"]._jr-filtered ._jr-all-grid { display: block; }
[data-warm="index"]._jr-filtered ._jr-all-grid .category-section { display: block; }
[data-warm="index"]._jr-filtered ._jr-all-grid .category-section.hidden { display: none; }
[data-warm="index"]._jr-filtered ._jr-all-grid .apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 22px;
}

/* ── 훈련 카드의 비율 — 좌우가 세로보다 길게 (작업자 지시 2026-08-26) ──
   ⛔⛔ **작업자가 「매번 자주 종종 왔다갔다합니다」로 짚으셨다.** 화면 파일 쪽에 창 너비마다
      다른 규칙(2칸 · 4칸 · 2칸)이 있어서 넓이에 따라 세로가 길어지곤 했다.
      그래서 **여기서 한 번에 못 박는다** — 받은 파일(`_sample_skin.html`)과 같은 셈법이다.
      한 장의 가장 좁은 너비를 258px 로 두고 남는 만큼 늘린다.
   ⛔ 이 값을 다시 세로가 긴 쪽으로 되돌리지 말 것.
      실측 — 창 1728 에서 328 × 264 (가로÷세로 1.24). 고치기 전에는 239 × 272 (0.88) 였다. */
[data-warm="index"] .apps-grid {
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)) !important;
    gap: 22px !important;
}
[data-warm="index"] .app-image { height: 132px !important; }

/* ── 영역 이름 위에 붙는 제목 둘 (2026-08-26 작업자 지시) ──
   ⛔ 받아 오신 그림(20번)에 적혀 있는 글 그대로다 — 「TRAINING GAMES」·「훈련 게임」.
      색도 그 그림에서 읽어 왔다: 위 글 #F2A356 · 아래 글 #483C33 · 바탕 #FEF9F1. */
[data-warm="index"] ._jr-sec {
    /* ⛔ 2026-08-26 작업자 지시로 위 간격을 줄였다 — 주황색 칸 아래에서 이 글까지 50 → 26 */
    margin: 0 0 14px !important; padding: 10px 0 0;   /* ⛔ 바깥 .container 가 이미 여백을 준다 */
}
[data-warm="index"] ._jr-sec-eng {
    font-size: 13px; font-weight: 800; letter-spacing: 2.4px;
    color: #F2A356; margin-bottom: 6px;
}
[data-warm="index"] ._jr-sec-kor {
    font-family: 'Jua', 'Noto Sans KR', sans-serif; font-weight: normal;
    font-size: 2rem; color: #483C33; margin: 0;
}

/* ── 영역 이름(전체·감각운동·주의력…) — 받은 그림처럼 인사 칸 아래에 알약 모양으로 ──
   ⛔ 2026-08-26 작업자 지시. 그림(20번)에서 이것들이 인사 칸 **아래**에 놓여 있다.
      2026-08-25에는 맨 위 흰 줄의 오른쪽에 올려 두었었다 — 그것을 제자리로 되돌린다. */
[data-warm="index"] .filter-tabs {
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 0 28px !important; padding: 0;   /* ⛔ 바깥 .container 가 이미 여백을 준다 */
}
[data-warm="index"] .filter-tab {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
    border-radius: 50px !important;
    color: #776A61 !important;                 /* 그림에서 읽은 값 (흰 알약 위 5.23) */
    font-size: 15px !important; font-weight: 600 !important;
    padding: 9px 22px !important;
    box-shadow: 0 2px 6px rgba(74, 59, 50, 0.06);
}
[data-warm="index"] .filter-tab:hover { border-color: #F2A356 !important; color: #B35510 !important; }
/* 고른 것 — 그림과 같이 주황으로 칠하고 흰 글자를 쓴다(칠하는 주황은 그대로 둔다는 규약과 같다) */
[data-warm="index"] .filter-tab.active {
    background: #F2A356 !important; border-color: #F2A356 !important; color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(242, 163, 86, 0.3);
}

/* 인사 칸 */
[data-warm="index"] .header {
    display: flex !important; align-items: center; justify-content: space-between;
    /* ⛔ 받은 그림에서 인사 칸의 글과 아래 「TRAINING GAMES」의 왼쪽 끝이 **같은 자리**다.
       아래 내용은 max-width 1200px 안에 들어 있으므로 인사 칸도 같은 안쪽 여백을 준다.
       (바탕의 크림 그러데이션은 화면 전체를 덮은 채로 둔다.) */
    position: relative;   /* 오른쪽 그림을 이 칸에 맞춰 붙이려고 */
    padding: 4rem max(5%, calc((100% - 1200px) / 2 + 5%)) !important; margin: 0 0 1rem !important;
    background: linear-gradient(135deg, #FFF0D4, #FFE2B7) !important;
    border-radius: 0 0 30px 30px !important; box-shadow: none !important;
    text-align: left !important; gap: 20px;
    overflow: hidden;              /* 그림이 아래 둥근 모서리를 넘지 않게 */
    min-height: 300px;
}
/* 글이 그림 밑으로 들어가지 않게 오른쪽 절반을 비워 둔다 */
[data-warm="index"] .header ._jr-hero-text { max-width: 48%; }
[data-warm="index"] ._jr-hero-text { flex: 1; position: relative; z-index: 1; }
[data-warm="index"] .header h1 { font-size: 3rem !important; color: #FF9F43 !important; line-height: 1.2; margin-bottom: 1rem !important; }
[data-warm="index"] .header p { font-size: 1.2rem !important; color: #7A6960 !important; margin-bottom: 2rem !important; }
/* ── 인사 칸 오른쪽 그림 (작업자 지시 2026-08-26) ──────────────
   ⛔ 작업자가 정하신 크기 — **좌우 폭은 화면 좌우 폭의 50%를 넘지 않고,
      세로 폭은 주황색이 차지하는 만큼**(인사 칸의 위에서 아래까지) 꽉 채운다.
   그래서 인사 칸의 안쪽 여백을 받지 않도록 따로 띄워 오른쪽 끝에 붙인다. */
[data-warm="index"] ._jr-hero-img {
    /* ⛔ 2026-08-26 작업자 지시 — **왼쪽 끝은 그대로 두고 오른쪽만 안으로 들인다.**
       그 바깥에 주황색이 남는다. 왼쪽 끝 = 100% - 5% - 45% = 50% (지금과 같다). */
    position: absolute; top: 0; right: 5%; bottom: 0;
    width: 45%; max-width: 45%;
    overflow: hidden; text-align: initial; font-size: 0;
}
[data-warm="index"] ._jr-hero-img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    display: block;
}
/* 「로그인」 — 2026-08-26에 인사 칸에서 맨 위 흰 줄의 오른쪽으로 옮겼다(작업자 지시).
   그래서 인사 칸에 있던 큰 단추 크기가 아니라 맨 위 줄에 맞는 크기로 둔다. */
[data-warm="index"] ._jr-bar #guestLoginBtn {
    display: inline-flex !important; background: #FF9F43 !important; color: #fff !important;
    padding: 7px 20px !important; border-radius: 50px !important; border: 0 !important;
    font-weight: 700 !important; font-size: 13px !important;
    box-shadow: 0 3px 8px rgba(255, 159, 67, 0.3);
}
[data-warm="index"] ._jr-bar #guestLoginBtn.hidden { display: none !important; }

/* 영역 이름을 가운데 큰 제목으로 */
/* ⛔ 2026-08-26 작업자 지시 — 영역 이름은 **어느 영역을 골랐을 때만** 보인다.
   「전체」에서는 훈련 사이사이에 끼어 있던 영역 이름을 안 보인다.
   (`_jr-filtered` 는 app/js/warm-home.js 가 붙였다 뗀다.) */
[data-warm="index"] .category-label { display: none !important; }
[data-warm="index"]._jr-filtered .category-label {
    display: block !important; text-align: center; padding: 0 !important;
    /* 위 간격도 줄였다 — 알약 줄 아래에서 이 글까지 58 → 24 */
    margin: 0.8rem 0 1.2rem !important;
}
[data-warm="index"] .category-label-dot,
[data-warm="index"] .category-label-line { display: none !important; }
[data-warm="index"] .category-label-text { font-size: 2rem !important; color: #4A3B32 !important; }

/* 받은 파일에 없는 줄이라 끈다 — 넓은 화면에서만 뜨던 영역 카드 여덟 개.
   영역 고르기는 맨 위 흰 줄로 옮겨 그대로 된다. */
[data-warm="index"] .categories-grid { display: none !important; }

/* ⛔⛔ 로그인 화면과 아이디 고르는 화면 — 2026-08-25에 라이브에서 발견한 것.
   재는 자리마다 로그인 화면을 걷어 두고 쟀기 때문에 **한 번도 안 재고 나갔다.**
   주황을 글자로 쓰거나 주황 바탕에 흰 글자를 얹은 다섯 곳이 전부 대비 2.04였다
   (「센소리앤브레인」·「로그인」·「로그인 없이 하기」·「아이디 선택」·「선택」).
   글자로 쓰는 주황은 진한 주황으로, 주황 바탕은 진한 주황으로 내려 흰 글자가 읽히게 한다. */
[data-warm="index"] .login-box h2 { color: #B35510 !important; }
[data-warm="index"] .login-btn {
    background: #B35510 !important;
    color: #FFFFFF !important;
}
[data-warm="index"] .login-btn:hover { background: #93470D !important; }
[data-warm="index"] .guest-btn {
    color: #B35510 !important;
    border-color: #B35510 !important;
}
[data-warm="index"] .patient-row.selected {
    border-color: #B35510 !important;
    color: #B35510 !important;
    background: rgba(179, 85, 16, 0.07) !important;
}
[data-warm="index"] .patient-row:hover { border-color: #B35510 !important; }

/* 프로그램 카드는 지금 그대로 — 바탕색 낱말이 번지는 것만 되돌린다 */
[data-warm="index"] .app-card { border-color: #f0f0f0 !important; }
[data-warm="index"] .app-info h4 { color: #2c3e50 !important; }
[data-warm="index"] .app-info p { color: #6c757d !important; }
[data-warm="index"] .footer { border-top-color: #F0E2D0; padding-bottom: 30px; }

@media (max-width: 1000px) {
    [data-warm="index"] ._jr-logo { font-size: 1.4rem; }
    [data-warm="index"] .filter-tab { font-size: 13px !important; padding: 7px 16px !important; }
    [data-warm="index"] ._jr-sec { padding-top: 24px; }
    [data-warm="index"] ._jr-sec-kor { font-size: 1.6rem; }
    [data-warm="index"] .header { padding: 2.5rem 5% !important; }
    [data-warm="index"] .header h1 { font-size: 2rem !important; }
    [data-warm="index"] .header p { font-size: 1rem !important; }
    [data-warm="index"] .header ._jr-hero-text { max-width: 100%; }
    [data-warm="index"] ._jr-hero-img { display: none; }   /* 좁은 화면에서는 글이 우선이다 */
    [data-warm="index"] ._jr-bar #guestLoginBtn { padding: 6px 16px !important; font-size: 12px !important; }
    [data-warm="index"] .category-label-text { font-size: 1.6rem !important; }
}

/* ══════════════════════════════════════════════════════════
   10-프레임 기초 둘 (수감각) — 작업자 지적 2026-08-25
   *"색이 들어가지 않은 상태의 별이 보이지 않습니다. 그리고 별과 숫자를 감싸고 있는
     작은 카드들 그리고 이 게임이 진행되는 게임영역의 색감의 차이가 없어 경계가 너무 흐릿합니다."*

   ⛔ 까닭 — 어두운 바탕에서는 「흰색을 옅게 얹어」 층을 만들었다. 밝은 바탕에서 같은 대비의
      갈색 막으로 옮기면 숫자는 맞아도 **층이 안 읽힌다.** 밝은 바탕에서 층을 만드는 방법은
      **흰 카드 + 그림자 + 또렷한 테두리**이지 옅은 막이 아니다. 그래서 여기서만 다시 정한다.
   ══════════════════════════════════════════════════════════ */
[data-warm="031_ten_frame_basic_count"] .frame,
[data-warm="032_ten_frame_basic_fill"] .frame {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
    box-shadow: 0 10px 28px rgba(74, 59, 50, 0.10) !important;
}
/* 별이 든 칸 — 연두 바탕에 진한 초록 별. 빈 칸과 한눈에 갈라 보이게 한다 */
[data-warm="031_ten_frame_basic_count"] .cell,
[data-warm="032_ten_frame_basic_fill"] .cell {
    background: rgba(132, 204, 22, 0.16) !important;
    border: 1px solid rgba(101, 163, 13, 0.35);
}
[data-warm="031_ten_frame_basic_count"] .cell.empty,
[data-warm="032_ten_frame_basic_fill"] .cell.empty {
    background: transparent !important;
    border: 1px dashed rgba(74, 59, 50, 0.22);
}
/* 색이 안 들어간 별 — 흰색 18%를 그대로 옮기면 크림 바탕에서 거의 안 보인다 */
[data-warm="031_ten_frame_basic_count"] .cell.shadow-star,
[data-warm="032_ten_frame_basic_fill"] .cell.shadow-star {
    color: rgba(74, 59, 50, 0.34) !important;
}
[data-warm="031_ten_frame_basic_count"] .num-btn,
[data-warm="032_ten_frame_basic_fill"] .num-btn {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.20) !important;
    box-shadow: 0 2px 6px rgba(74, 59, 50, 0.08) !important;
}
/* 영역 색(연두)을 글자색으로 쓰던 곳은 밝은 바탕에서 안 읽힌다 */
[data-warm="031_ten_frame_basic_count"] .setup-title,
[data-warm="032_ten_frame_basic_fill"] .setup-title,
[data-warm="031_ten_frame_basic_count"] .opt-btn.active,
[data-warm="032_ten_frame_basic_fill"] .opt-btn.active,
[data-warm="031_ten_frame_basic_count"] .cell,
[data-warm="032_ten_frame_basic_fill"] .cell,
[data-warm="031_ten_frame_basic_count"] .cell .num-flash,
[data-warm="032_ten_frame_basic_fill"] .cell .num-flash {
    /* ⛔ #65a30d 로 두면 연두 바탕 위에서 대비가 2.77로 눈금(큰 글자 3)에 못 미친다.
       2026-08-25에 재어 한 단계 진한 #4d7c0f 로 내렸다. 채워진 칸인지는 바탕 색이 알려 준다. */
    color: #4d7c0f !important;
}
/* 빈 칸은 바탕도 테두리도 갈라 둔다 */
[data-warm="031_ten_frame_basic_count"] .cell.empty,
[data-warm="032_ten_frame_basic_fill"] .cell.empty {
    border-color: rgba(74, 59, 50, 0.22) !important;
}

/* 정답을 맞춘 뒤 채워지는 별 — 작업자가 2026-08-25에 여섯 가운데 (나)를 고르셨다.
   (나) = 칸 톤을 진하게 + 칸 테두리를 밝게.
   ⛔ 빈 칸을 정한 것보다 뒤에 적어야 이긴다. */
[data-warm="032_ten_frame_basic_fill"] .cell.answer-filled {
    background: rgba(132, 204, 22, 0.34) !important;
    border: 2px solid #a3e635 !important;
    box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.35) !important;
}
[data-warm="032_ten_frame_basic_fill"] .cell.answer-filled .star {
    color: #2f5d06 !important;
}
[data-warm="031_ten_frame_basic_count"] .opt-btn.active,
[data-warm="032_ten_frame_basic_fill"] .opt-btn.active {
    background: rgba(132, 204, 22, 0.16) !important;
    border-color: #65a30d !important;
}

/* ══════════════════════════════════════════════════════════
   한글자모 합성하기 · 듣고 자모 조합하기 (읽기) — 2026-08-25
   두 화면은 만듦새가 거의 같아 같은 색으로 정한다.

   ⛔ 밝은 바탕에서 흰 글자는 안 읽힌다. 여기서 재어 보니
      자모 타일의 흰 글자 15.54 → 1.27 · 글자판 가운데 큰 글자 16.77 → 1.74 였다.
      그래서 이 둘의 글자를 영역 색 가장 진한 것(#3d2266)으로 바꾼다.
   ⛔ 큰 상자는 옅은 막이 아니라 흰 카드 + 그림자 + 테두리로 층을 만든다.
   ══════════════════════════════════════════════════════════ */

/* 큰 상자 셋 — 흰 카드로 세운다 */
[data-warm="033_hangul_compose"] .setup-card,
[data-warm="034_hangul_listen_compose"] .setup-card,
[data-warm="033_hangul_compose"] .pool,
[data-warm="034_hangul_listen_compose"] .pool,
[data-warm="033_hangul_compose"] .game-info-bar,
[data-warm="034_hangul_listen_compose"] .game-info-bar {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
    box-shadow: 0 8px 24px rgba(74, 59, 50, 0.09) !important;
}

/* 끌어다 놓는 자모 타일 — 흰 카드 위에 놓이므로 영역 색을 옅게 깔고 테두리로 세운다.
   흰 글자(1.27)는 안 읽혀 진한 보라(10.4)로 바꾼다 */
[data-warm="033_hangul_compose"] .jamo,
[data-warm="034_hangul_listen_compose"] .jamo {
    background: rgba(79, 46, 131, 0.12) !important;
    border: 1px solid rgba(79, 46, 131, 0.35) !important;
    color: #3d2266 !important;
}
[data-warm="033_hangul_compose"] .jamo:hover:not(.disabled),
[data-warm="034_hangul_listen_compose"] .jamo:hover:not(.disabled) {
    background: rgba(79, 46, 131, 0.26) !important;
    border-color: #4f2e83 !important;
}

/* 글자판 가운데의 큰 글자 — 흰색이면 1.74로 안 읽힌다 (진한 보라로 7.46) */
[data-warm="033_hangul_compose"] .composed-display,
[data-warm="034_hangul_listen_compose"] .composed-display {
    color: #3d2266 !important;
}
[data-warm="033_hangul_compose"] .tray.drop-hover,
[data-warm="034_hangul_listen_compose"] .tray.drop-hover {
    border-color: #3d2266 !important;
}

/* 고른 것 — 영역 색 옅은 바탕 위에서 #7c5baa 는 3.87 로 눈금에 못 미친다 */
[data-warm="033_hangul_compose"] .opt-btn.active,
[data-warm="034_hangul_listen_compose"] .opt-btn.active {
    color: #4f2e83 !important;
}

/* 결과 화면 — 크림 덮개 위에 흰 카드로 세운다 */
[data-warm="033_hangul_compose"] .result-panel,
[data-warm="034_hangul_listen_compose"] .result-panel {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
    box-shadow: 0 24px 64px rgba(74, 59, 50, 0.18) !important;
}
[data-warm="033_hangul_compose"] .result-panel .result-item,
[data-warm="034_hangul_listen_compose"] .result-panel .result-item,
[data-warm="033_hangul_compose"] .result-panel .btn-history,
[data-warm="034_hangul_listen_compose"] .result-panel .btn-history {
    background: #FFF9F0 !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
}

/* 듣고 자모 조합하기만 — 맞고 틀린 것을 알리는 초록·빨강.
   크림 바탕에서 #10b981 은 2.42, #ef4444 는 3.59 로 큰 글자 눈금(3)에 걸치거나 못 미친다 */
[data-warm="034_hangul_listen_compose"] .feedback-mark.correct { color: #047857 !important; }
[data-warm="034_hangul_listen_compose"] .feedback-mark.wrong { color: #b91c1c !important; }
[data-warm="034_hangul_listen_compose"] .tray.feedback-correct { border-color: #047857 !important; }
[data-warm="034_hangul_listen_compose"] .tray.feedback-wrong { border-color: #b91c1c !important; }

/* 10-프레임 기초 둘 — 고른 것의 글자를 한 단계 더 진하게 (2026-08-25에 다시 재어 고침)
   ⛔ 까닭 — 색을 껐다 켜서 재는 방법으로는 **누르는 것의 「지금 색」 값이 안 잡힌다**는 것을
      2026-08-25에 알아냈다. 화면을 두 번 열어 제대로 재어 보니 고른 것의 글자가
      8.01 에서 4.48 로 떨어져 눈금(4.5)을 살짝 밑돌고 있었다. #3f6212 로 내려 6.11 이 된다.
   ⛔ 칸 안의 숫자는 그대로 #4d7c0f 로 둔다 — 큰 글자라 눈금이 3이고, 더 어둡게 하면
      채워진 칸의 연두빛이 죽는다. */
[data-warm="031_ten_frame_basic_count"] .opt-btn.active,
[data-warm="032_ten_frame_basic_fill"] .opt-btn.active {
    color: #3f6212 !important;
}

/* ══════════════════════════════════════════════════════════
   수감각 여덟 — 10-프레임·5-프레임 무리 (2026-08-26)
   028_ten_frame_count · 029_ten_frame_fill · 035_five_frame_add_2 ·
   036_five_frame_add_1 · 038_five_frame_count_on · 039_ten_frame_count_all ·
   040_ten_frame_count_on · 041_ten_frame_addition

   여덟 다 10-프레임 기초 둘과 만듦새가 같다(별이 든 칸 · 숫자 누르는 곳 · 설정 카드).
   그래서 10-프레임 기초 둘에서 정한 것을 그대로 옮긴다 —
   **큰 상자는 흰 카드 + 그림자 + 테두리** · **칸은 바탕색으로 상태를 갈라** ·
   **영역 색을 글자로 쓰던 곳은 진하게.**

   ⛔ 영역 색이 둘로 갈린다.
      028 · 029 = 연두(#84cc16) — 10-프레임 기초 둘과 같은 색이다.
      나머지 여섯 = 주황(#d97706) — 크림 바탕에서 3.04, 밝은 쪽(#f59e0b)은 2.05 라 안 읽힌다.
      그래서 여섯의 글자는 #92400e 로 내린다(크림 6.77 · 주황 옅은 바탕 5.74).
   ══════════════════════════════════════════════════════════ */

/* ── 큰 상자 셋 — 흰 카드로 세운다 (옅은 막으로는 밝은 바탕에서 층이 안 읽힌다) ── */
[data-warm="028_ten_frame_count"] .frame,
[data-warm="029_ten_frame_fill"] .frame,
[data-warm="035_five_frame_add_2"] .frame,
[data-warm="036_five_frame_add_1"] .frame,
[data-warm="038_five_frame_count_on"] .frame,
[data-warm="039_ten_frame_count_all"] .frame,
[data-warm="040_ten_frame_count_on"] .frame,
[data-warm="041_ten_frame_addition"] .frame,
[data-warm="028_ten_frame_count"] .setup-card,
[data-warm="029_ten_frame_fill"] .setup-card,
[data-warm="035_five_frame_add_2"] .setup-card,
[data-warm="036_five_frame_add_1"] .setup-card,
[data-warm="038_five_frame_count_on"] .setup-card,
[data-warm="039_ten_frame_count_all"] .setup-card,
[data-warm="040_ten_frame_count_on"] .setup-card,
[data-warm="041_ten_frame_addition"] .setup-card,
[data-warm="028_ten_frame_count"] .result-panel,
[data-warm="029_ten_frame_fill"] .result-panel,
[data-warm="035_five_frame_add_2"] .result-panel,
[data-warm="036_five_frame_add_1"] .result-panel,
[data-warm="038_five_frame_count_on"] .result-panel,
[data-warm="039_ten_frame_count_all"] .result-panel,
[data-warm="040_ten_frame_count_on"] .result-panel,
[data-warm="041_ten_frame_addition"] .result-panel {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
    box-shadow: 0 10px 28px rgba(74, 59, 50, 0.10) !important;
}

/* ── 숫자 누르는 곳 — 흰 카드 + 테두리로 서로 갈라 보이게 ── */
[data-warm="028_ten_frame_count"] .num-btn,
[data-warm="029_ten_frame_fill"] .num-btn,
[data-warm="035_five_frame_add_2"] .num-btn,
[data-warm="036_five_frame_add_1"] .num-btn,
[data-warm="038_five_frame_count_on"] .num-btn,
[data-warm="039_ten_frame_count_all"] .num-btn,
[data-warm="040_ten_frame_count_on"] .num-btn,
[data-warm="041_ten_frame_addition"] .num-btn {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.20) !important;
    box-shadow: 0 2px 6px rgba(74, 59, 50, 0.08) !important;
}
[data-warm="028_ten_frame_count"] .result-panel .result-item,
[data-warm="029_ten_frame_fill"] .result-panel .result-item,
[data-warm="035_five_frame_add_2"] .result-panel .result-item,
[data-warm="036_five_frame_add_1"] .result-panel .result-item,
[data-warm="038_five_frame_count_on"] .result-panel .result-item,
[data-warm="039_ten_frame_count_all"] .result-panel .result-item,
[data-warm="040_ten_frame_count_on"] .result-panel .result-item,
[data-warm="041_ten_frame_addition"] .result-panel .result-item,
[data-warm="028_ten_frame_count"] .result-panel .btn-history,
[data-warm="029_ten_frame_fill"] .result-panel .btn-history,
[data-warm="035_five_frame_add_2"] .result-panel .btn-history,
[data-warm="036_five_frame_add_1"] .result-panel .btn-history,
[data-warm="038_five_frame_count_on"] .result-panel .btn-history,
[data-warm="039_ten_frame_count_all"] .result-panel .btn-history,
[data-warm="040_ten_frame_count_on"] .result-panel .btn-history,
[data-warm="041_ten_frame_addition"] .result-panel .btn-history {
    background: #FFF9F0 !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
}

/* ── 별이 든 칸과 빈 칸을 바탕색으로 갈라 준다 ──────────────
   ⛔ 어두운 바탕에서는 「흰색을 8% / 3% 옅게」로 둘을 갈랐다. 크림 바탕에서 같은 옅기를
      갈색으로 옮기면 숫자는 맞아도 **찬 칸인지 빈 칸인지가 안 읽힌다.**
      그래서 찬 칸은 영역 색을 옅게 깔고, 빈 칸은 점선 테두리로 세운다. */
[data-warm="028_ten_frame_count"] .cell,
[data-warm="029_ten_frame_fill"] .cell {
    background: rgba(132, 204, 22, 0.16) !important;
    border: 1px solid rgba(101, 163, 13, 0.35);
    color: #4d7c0f !important;
}
[data-warm="035_five_frame_add_2"] .cell,
[data-warm="036_five_frame_add_1"] .cell,
[data-warm="038_five_frame_count_on"] .cell,
[data-warm="039_ten_frame_count_all"] .cell,
[data-warm="040_ten_frame_count_on"] .cell,
[data-warm="041_ten_frame_addition"] .cell {
    background: rgba(217, 119, 6, 0.16) !important;
    border: 1px solid rgba(184, 101, 0, 0.35);
    color: #92400e !important;
}
[data-warm="028_ten_frame_count"] .cell.empty,
[data-warm="029_ten_frame_fill"] .cell.empty,
[data-warm="035_five_frame_add_2"] .cell.empty,
[data-warm="036_five_frame_add_1"] .cell.empty,
[data-warm="038_five_frame_count_on"] .cell.empty,
[data-warm="039_ten_frame_count_all"] .cell.empty,
[data-warm="040_ten_frame_count_on"] .cell.empty,
[data-warm="041_ten_frame_addition"] .cell.empty {
    background: transparent !important;
    border: 1px dashed rgba(74, 59, 50, 0.22) !important;
}

/* ── 영역 색을 글자색으로 쓰던 곳 ──────────────────────────
   ⛔ 밝은 쪽 영역 색은 크림 바탕에서 거의 안 읽힌다 —
      연두 #a3e635 는 1.66, 주황 #f59e0b 는 2.05 다(큰 글자 눈금 3에도 못 미친다).
      셈하는 숫자와 더하기 기호가 여기에 걸려 있어 그대로 두면 훈련이 안 된다. */
[data-warm="028_ten_frame_count"] .setup-title,
[data-warm="029_ten_frame_fill"] .setup-title,
[data-warm="028_ten_frame_count"] .setting-value,
[data-warm="029_ten_frame_fill"] .setting-value,
[data-warm="028_ten_frame_count"] .countdown,
[data-warm="029_ten_frame_fill"] .countdown,
[data-warm="028_ten_frame_count"] .cell .num-flash,
[data-warm="029_ten_frame_fill"] .cell .num-flash,
[data-warm="028_ten_frame_count"] .result-panel .result-title,
[data-warm="029_ten_frame_fill"] .result-panel .result-title {
    color: #4d7c0f !important;
}
[data-warm="035_five_frame_add_2"] .setup-title,
[data-warm="036_five_frame_add_1"] .setup-title,
[data-warm="038_five_frame_count_on"] .setup-title,
[data-warm="039_ten_frame_count_all"] .setup-title,
[data-warm="040_ten_frame_count_on"] .setup-title,
[data-warm="041_ten_frame_addition"] .setup-title,
[data-warm="035_five_frame_add_2"] .countdown,
[data-warm="036_five_frame_add_1"] .countdown,
[data-warm="038_five_frame_count_on"] .countdown,
[data-warm="039_ten_frame_count_all"] .countdown,
[data-warm="040_ten_frame_count_on"] .countdown,
[data-warm="041_ten_frame_addition"] .countdown,
[data-warm="035_five_frame_add_2"] .cell .num-flash,
[data-warm="036_five_frame_add_1"] .cell .num-flash,
[data-warm="038_five_frame_count_on"] .cell .num-flash,
[data-warm="039_ten_frame_count_all"] .cell .num-flash,
[data-warm="040_ten_frame_count_on"] .cell .num-flash,
[data-warm="041_ten_frame_addition"] .cell .num-flash,
[data-warm="038_five_frame_count_on"] .cell .count-num,
[data-warm="040_ten_frame_count_on"] .cell .count-num,
[data-warm="035_five_frame_add_2"] .op,
[data-warm="036_five_frame_add_1"] .op,
[data-warm="038_five_frame_count_on"] .op,
[data-warm="039_ten_frame_count_all"] .op,
[data-warm="040_ten_frame_count_on"] .op,
[data-warm="041_ten_frame_addition"] .op,
[data-warm="035_five_frame_add_2"] .op-num,
[data-warm="041_ten_frame_addition"] .op-num,
[data-warm="035_five_frame_add_2"] .flying-star,
[data-warm="036_five_frame_add_1"] .flying-star,
[data-warm="038_five_frame_count_on"] .flying-star,
[data-warm="039_ten_frame_count_all"] .flying-star,
[data-warm="040_ten_frame_count_on"] .flying-star,
[data-warm="041_ten_frame_addition"] .flying-star,
[data-warm="035_five_frame_add_2"] .result-panel .result-title,
[data-warm="036_five_frame_add_1"] .result-panel .result-title,
[data-warm="038_five_frame_count_on"] .result-panel .result-title,
[data-warm="039_ten_frame_count_all"] .result-panel .result-title,
[data-warm="040_ten_frame_count_on"] .result-panel .result-title,
[data-warm="041_ten_frame_addition"] .result-panel .result-title {
    color: #92400e !important;
}

/* ── 고른 것 — 옅은 영역 색 바탕에 진한 글자 ── */
[data-warm="028_ten_frame_count"] .opt-btn.active,
[data-warm="029_ten_frame_fill"] .opt-btn.active {
    background: rgba(132, 204, 22, 0.16) !important;
    border-color: #65a30d !important;
    color: #3f6212 !important;
}
[data-warm="035_five_frame_add_2"] .opt-btn.active,
[data-warm="036_five_frame_add_1"] .opt-btn.active,
[data-warm="038_five_frame_count_on"] .opt-btn.active,
[data-warm="039_ten_frame_count_all"] .opt-btn.active,
[data-warm="040_ten_frame_count_on"] .opt-btn.active,
[data-warm="041_ten_frame_addition"] .opt-btn.active {
    background: rgba(217, 119, 6, 0.16) !important;
    border-color: #b86500 !important;
    color: #92400e !important;
}

/* ── 별을 끌어다 놓는 자리 (038 · 040) ──
   빈 칸으로 정한 것보다 뒤에 적어야 이긴다 */
[data-warm="038_five_frame_count_on"] .cell-result.guide-target,
[data-warm="040_ten_frame_count_on"] .cell-result.guide-target {
    background: rgba(217, 119, 6, 0.22) !important;
    border: 2px dashed #b86500 !important;
}

/* ── 맞고 틀린 것을 알리는 동그라미와 가위표 (038 · 040) ──
   크림 바탕에서 #22c55e 는 2.18 로 그림 눈금(3)에 못 미친다. #15803d 로 내려 4.79 가 된다.
   가위표 빨강은 3.59 로 큰 글자 눈금(3)을 넘지만, 동그라미와 나란히 놓이므로 함께 내린다 */
[data-warm="038_five_frame_count_on"] .compare-feedback-correct,
[data-warm="040_ten_frame_count_on"] .compare-feedback-correct {
    border-color: #15803d !important;
}
[data-warm="038_five_frame_count_on"] .compare-feedback-wrong,
[data-warm="040_ten_frame_count_on"] .compare-feedback-wrong {
    color: #b91c1c !important;
}

/* ══════════════════════════════════════════════════════════
   「훈련결과 보기」 화면 — 47개가 함께 쓰는 한 화면 (2026-08-26)

   훈련을 마치면 나오는 「훈련 완료」 상자에서 **「훈련결과 보기」**라고 적힌 것을 누르면
   화면 전체를 덮으며 뜬다. 지난 훈련들의 정답률·평균 처리속도·도달 단계를 선 그림으로,
   인지 프로필을 그물 그림으로 보여 준다.

   ⛔ 이 화면은 프로그램마다 있는 것이 아니라 `app/js/training-history.js` 한 곳이 만든다.
      그래서 여기 한 번만 적으면 47개 전부에 닿는다.
   ⛔ 되돌리기는 그대로다 — 그 프로그램은 낱말이 없으면 자기가 들고 있는 「지금 값」을 쓴다.
      아직 안 고친 서른 화면에는 아래 낱말이 안 닿으므로 지금처럼 검정으로 뜬다.
      이 파일을 비우면 고친 화면도 다시 검정으로 돌아온다.

   ⛔ 계열 색은 크림 바탕에서 그대로 쓸 수 없다 — 2026-08-26에 재어 보니
      정답률 초록 2.42 · 처리속도 주황 3.04 · 밝은 주황 2.05 · 밝은 파랑 2.76 ·
      노랑 1.59 였다. 어느 것이 무슨 값인지 알려 주는 색이므로 **색끼리 갈라 보이는 것은
      그대로 두고 진하기만 내렸다**(초록 5.24 · 주황 6.77 · 남보라 7.55 · 파랑 6.40 · 노랑 4.70).
   ══════════════════════════════════════════════════════════ */
:root {
    --th-bg:        #FFF9F0;                 /* 화면 전체를 덮는 것 */
    --th-card:      #FFFFFF;                 /* 큰 상자 — 밝은 바탕에서는 흰 카드로 층을 만든다 */
    --th-card-line: rgba(74, 59, 50, 0.16);
    --th-tile:      #FFFFFF;                 /* 요약 칸 */
    --th-tile-line: rgba(74, 59, 50, 0.16);
    --th-t1:        #4A3B32;                 /* 글 — 진한 쪽에서 흐린 쪽으로 */
    --th-t2:        rgba(74, 59, 50, 0.92);
    --th-t3:        rgba(74, 59, 50, 0.88);
    --th-t4:        rgba(74, 59, 50, 0.85);
    --th-t5:        rgba(74, 59, 50, 0.82);
    /* ⛔ 「✕ 닫기」의 글자가 여기에 걸린다 — 옅은 갈색 바탕 위라 0.74 면 4.10 으로
       눈금을 밑돈다(지금 색에서는 5.36 이라 떨어지는 것이다). 0.86 으로 올려 5.55 가 된다. */
    --th-t6:        rgba(74, 59, 50, 0.86);
    /* ⛔ 0.70 으로 두면 부제와 요약 칸의 이름이 4.33·4.43 으로 눈금(4.5)을 살짝 밑돈다.
       2026-08-26에 재어 0.76 으로 올렸다 — 크림 바탕 5.08 · 흰 카드 위 5.25 */
    --th-t7:        rgba(74, 59, 50, 0.76);
    /* 그물 그림의 축 글자(20%~100%)가 여기에 걸린다. 겹둥근테 위에 얹혀 있어
       0.66 이면 3.22 다 — 지금 색에서도 2.58 로 눈금 아래였으니 떨어진 것은 아니지만,
       올리는 것은 손해가 없어 0.80 으로 올렸다(흰 카드 위 5.90 · 그물 가운데 4.38). */
    --th-t8:        rgba(74, 59, 50, 0.80);
    --th-t9:        rgba(74, 59, 50, 0.55);
    --th-web-line:  rgba(74, 59, 50, 0.22);  /* 그물 그림의 겹둥근테 */
    --th-web-rgb:   74, 59, 50;              /* 그물 그림 안을 옅게 채우는 색 */
    --th-press:     #FFFFFF;                 /* 누르는 것의 바탕 */
    --th-press-line: rgba(74, 59, 50, 0.22); /* 「✕ 닫기」의 테두리 — 흰색이면 크림 바탕에서 안 보인다 */
    --th-ink:       #4A3B32;                 /* 그림 위의 또렷한 글자 (흰 글자는 크림 바탕에서 1.05) */
    --th-green:     #047857;                 /* 정답률 */
    --th-amber:     #92400e;                 /* 낮은 값을 알리는 색 */
    --th-rt:        #92400e;                 /* 평균 처리속도 */
    --th-indigo:    #4338ca;                 /* 도달 단계 */
    --th-indigo2:   #4338ca;
    --th-blue:      #1d4ed8;                 /* 인지 프로필 */
    --th-blue2:     #1d4ed8;
    --th-yellow:    #a16207;                 /* 앞서 오른 데를 다시 하는 회기 */
    --th-rose:      #b91c1c;
    /* 프로그램마다 자기 영역 색으로 힘주어 적는 자리가 있다 — 그 값도 여기에 모은다
       (2026-08-26 · 「훈련결과 보기」에 찍히는 글을 전부 낱말로 옮기면서 더했다) */
    --th-teal:      #0e7490;                 /* 추론 청록 */
    --th-lime:      #4d7c0f;                 /* 수감각 연두 */
}

/* 큰 상자와 요약 칸에 그림자와 테두리를 준다 —
   밝은 바탕에서는 옅은 막으로 층이 안 읽힌다(2026-08-25에 배운 것) */
#th-overlay #th-sections > div,
#th-overlay #th-summary > div {
    box-shadow: 0 6px 18px rgba(74, 59, 50, 0.08);
}

/* ══════════════════════════════════════════════════════════
   기기 안내 상자 — 47개가 함께 쓰는 또 하나의 화면 (2026-08-26)

   터치가 안 되는 기기에서 감각운동처럼 터치가 있어야 하는 훈련에 들어가면 뜬다.
   `app/js/device-warning.js` 한 곳이 만든다. 「훈련결과 보기」 화면과 같은 갈래다.
   ⛔ 낱말이 없으면 그 프로그램이 자기가 들고 있는 「지금 값」을 쓰므로 되돌리기는 그대로다.
   ══════════════════════════════════════════════════════════ */
:root {
    --dw-veil:         rgba(255, 249, 240, 0.92);   /* 화면을 덮는 것 */
    --dw-card:         #FFFFFF;                     /* 안내 상자 */
    --dw-line:         rgba(74, 59, 50, 0.16);
    --dw-text:         #4A3B32;
    --dw-text-2:       rgba(74, 59, 50, 0.82);
    --dw-text-3:       rgba(74, 59, 50, 0.88);
    /* ⛔ 주황 #f59e0b 은 흰 카드 위에서 2.05 다 — 제목과 「계속하기」 글자가 여기에 걸린다 */
    --dw-accent:       #92400e;
    --dw-accent-soft:  rgba(146, 64, 14, 0.10);
    --dw-accent-line:  rgba(146, 64, 14, 0.38);
    --dw-accent-hover: rgba(146, 64, 14, 0.18);
}

/* ══════════════════════════════════════════════════════════
   시지각 — 칠교놀이 Ⅰ · Ⅱ (2026-08-26)

   ⛔ 조각 색(빨강·파랑·초록·노랑·보라·분홍·하늘)은 **안 건드린다** — 어느 조각인지
      알려 주는 색이고, 그 색을 보고 실루엣에 맞춰 넣는 것이 이 훈련이다.
   ⛔ 영역 색은 시지각 남보라다. 테트리스 셋과 같은 영역이라 **같은 진한 남보라(#4338ca)**를 쓴다
      — `#818cf8` 은 크림 바탕에서 2.85, `#6366f1` 은 4.27 로 눈금(4.5)에 못 미친다.
   ══════════════════════════════════════════════════════════ */
[data-warm="026_tangram"],
[data-warm="027_tangram_2"] {
    --dark-panel: #FFFFFF;                    /* 결과 상자 */
    --dark-veil: rgba(255, 249, 240, 0.88);   /* 결과를 보일 때 화면을 덮는 것 */
    --dark-bar: rgba(255, 249, 240, 0.94);    /* 「시작」이 놓인 아래 띠 */
    --tan-ok: #047857;                        /* 맞췄다고 알리는 초록 (#10b981 은 크림 바탕에서 2.42) */
}

/* 결과 상자 — 밝은 바탕에서는 흰 카드로 층을 만든다 */
[data-warm="026_tangram"] .result-panel,
[data-warm="027_tangram_2"] .result-panel {
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
    box-shadow: 0 24px 64px rgba(74, 59, 50, 0.18) !important;
}
/* 「시작」이 놓인 아래 띠 — 검은 그림자를 두르면 밝은 바탕에서 검은 테처럼 보인다 */
[data-warm="026_tangram"] .start-area,
[data-warm="027_tangram_2"] .start-area {
    box-shadow: 0 -4px 20px rgba(74, 59, 50, 0.12) !important;
}

/* 영역 색(남보라)을 글자색으로 쓰던 곳 */
[data-warm="026_tangram"] .lr-value,
[data-warm="027_tangram_2"] .lr-value,
[data-warm="026_tangram"] .info-title,
[data-warm="027_tangram_2"] .info-title,
[data-warm="026_tangram"] .continue-btn,
[data-warm="027_tangram_2"] .continue-btn,
[data-warm="026_tangram"] .sb-value,
[data-warm="027_tangram_2"] .sb-value,
[data-warm="026_tangram"] .result-panel .result-title,
[data-warm="027_tangram_2"] .result-panel .result-title {
    color: #4338ca !important;
}
/* 고른 단계 — 흰 글자가 옅은 남보라 바탕에서 1.31 로 사라진다 */
[data-warm="026_tangram"] .mini-btn.selected,
[data-warm="027_tangram_2"] .mini-btn.selected {
    color: #4338ca !important;
    border-color: #4338ca !important;
}

/* ══════════════════════════════════════════════════════════
   시지각 — 눈-손 협응 · 도형 연결하기 (2026-08-26)

   ⛔ 영역 색(시지각 남보라)을 글자색으로 쓰던 곳이 많다. 밝은 쪽 `#818cf8` 은 크림 바탕에서
      **2.16** 이라 고른 것이 통째로 사라진다. 테트리스 셋·칠교놀이 둘과 같은 영역이므로
      **같은 진한 남보라 `#4338ca`**(7.55)를 쓴다.
   ⛔ 실루엣과 끌어다 놓는 도형의 색은 안 건드린다 — 그것을 보고 맞추는 것이 이 훈련이다.
   ══════════════════════════════════════════════════════════ */
[data-warm="017_visual_motor"] .mode-btn.selected,
[data-warm="037_visual_motor_large"] .mode-btn.selected,
[data-warm="017_visual_motor"] .input-mode-btn.selected,
[data-warm="037_visual_motor_large"] .input-mode-btn.selected,
[data-warm="017_visual_motor"] .recommend-btn,
[data-warm="037_visual_motor_large"] .recommend-btn,
[data-warm="017_visual_motor"] .br-icon,
[data-warm="037_visual_motor_large"] .br-icon,
[data-warm="017_visual_motor"] .br-value,
[data-warm="037_visual_motor_large"] .br-value,
[data-warm="017_visual_motor"] .level-change.stay,
[data-warm="037_visual_motor_large"] .level-change.stay,
[data-warm="017_visual_motor"] .result-title,
[data-warm="037_visual_motor_large"] .result-title,
[data-warm="017_visual_motor"] .encouragement,
[data-warm="037_visual_motor_large"] .encouragement,
[data-warm="017_visual_motor"] #problemVal,
[data-warm="037_visual_motor_large"] #problemVal {
    color: #4338ca !important;
}

/* ⛔ 고른 레벨은 바탕이 진한 남보라로 칠해진다 — 맨 위 영역 색 상자와 같은 갈래다.
   그 안의 작은 글자는 흰색을 그대로 써야 한다(갈색으로 옮기면 2.35 로 사라진다). */
[data-warm="017_visual_motor"] .lvl-btn.selected,
[data-warm="037_visual_motor_large"] .lvl-btn.selected,
[data-warm="017_visual_motor"] .lvl-btn.selected *,
[data-warm="037_visual_motor_large"] .lvl-btn.selected * {
    --dark-w700: rgba(255, 255, 255, 0.7);
    --dark-w750: rgba(255, 255, 255, 0.75);
    --dark-w800: rgba(255, 255, 255, 0.8);
    --dark-w850: rgba(255, 255, 255, 0.85);
    --dark-text: rgba(255, 255, 255, 0.88);
}

/* ⛔ 실루엣의 선과 끌어다 놓는 도형의 색 — 아이가 이것을 보고 맞춘다.
   `#1E88E5` 는 검정 바탕의 실루엣 위에서 4.89 였는데 크림 바탕에서는 3.27 로 떨어진다.
   같은 파랑 계열의 진한 값으로 내려 5.10 을 되찾는다(색이 바뀌는 것이 아니라 진하기만 내린다). */
[data-warm="017_visual_motor"],
[data-warm="037_visual_motor_large"] {
    --shape-color: #1565c0;
}

/* ══════════════════════════════════════════════════════════
   시지각 — 쓰기 전 선긋기 (2026-08-26)

   ⛔ 영역 색(시지각 남보라)을 글자와 **아이가 긋는 선**에 쓰고 있다.
      `#818cf8` 은 크림 바탕에서 2.85 라 고른 것도, 그은 선도 흐려진다.
      테트리스 셋·칠교놀이 둘·눈-손 협응 둘과 같은 영역이므로 같은 `#4338ca` 를 쓴다.
   ══════════════════════════════════════════════════════════ */
[data-warm="046_pre_writing_tracing"] .setup-title,
[data-warm="046_pre_writing_tracing"] .opt-btn.active,
[data-warm="046_pre_writing_tracing"] .countdown,
[data-warm="046_pre_writing_tracing"] .result-title {
    color: #4338ca !important;
}
/* 아이가 긋는 선 — 이 선이 보여야 자기가 어디까지 그었는지 안다 */
[data-warm="046_pre_writing_tracing"] .ink {
    stroke: #4338ca !important;
}

/* 칠교놀이 둘 — 훈련 중 띠의 이름(단계·진행·조각·시간)
   ⛔ 사다리는 화면 바탕(#141010)에 맞춰 계산한 것이라, 그보다 조금 밝은 띠 위에서는
      4.49 에서 4.39 로 아주 조금 낮아진다. 한 눈금 진한 낱말로 올려 되돌린다. */
[data-warm="026_tangram"] .sb-label,
[data-warm="027_tangram_2"] .sb-label {
    color: var(--dark-w550) !important;
}

/* ══════════════════════════════════════════════════════════
   추론 다섯 — **결과 화면만** 크림색으로 (작업자 지시 2026-08-26)

   018_rule_reasoning · 022_group_rule · 023_pattern_compose ·
   024_group_rule_2 · 025_rule_reasoning_2

   ⛔ 화면 바탕과 훈련 화면은 **지금 색 그대로 둔다.** 작업자가 「결과화면만 진행」으로 정하셨다.
      그래서 이 다섯은 `<html>` 에 `data-warm-scope="result"` 를 붙였고, 위쪽의
      `:root:not([data-warm-scope="result"]) body` 덕분에 화면 바탕은 안 바뀐다.
   ⛔ 결과 화면은 지금도 **흰 상자**다. 바꾸는 것은 그 둘레를 덮는 것과 상자 안의 색조다.
   ⛔ 되돌리기는 그대로다 — 낱말을 부를 때 「낱말이 없으면 지금 값을 쓴다」를 함께 적었다.
   ══════════════════════════════════════════════════════════ */
[data-warm-scope="result"] .result-overlay {
    --rr-veil:       rgba(255, 249, 240, 0.88);  /* 화면을 덮는 것 — 지금은 검정 50% */
    --rr-panel:      #FFFFFF;                    /* 결과 상자 — 지금도 흰색이라 그대로 */
    --rr-panel-line: rgba(74, 59, 50, 0.16);
    --rr-item:       #FFF9F0;                    /* 상자 안의 칸 — 크림으로 (지금은 #f8f9fa) */
    --rr-item-line:  rgba(74, 59, 50, 0.16);
    --rr-label:      rgba(74, 59, 50, 0.76);     /* 항목 이름 (지금 #6c757d) */
    --rr-value:      #4A3B32;                    /* 값 (지금 #2c3e50) */
    /* ⛔ 「✓ 통과!」의 초록 #10b981 은 흰 상자 위에서 2.54 다 — 지금도 눈금 아래였다. 5.48 로 올린다 */
    --rr-ok:         #047857;
}
/* 제목 「훈련 완료」 — 영역 색(추론 청록 #0891b2)이 흰 상자 위에서 3.68 이다.
   같은 청록의 진한 값으로 내려 5.36 이 된다(지금도 눈금 아래였다) */
[data-warm-scope="result"] .result-overlay .result-title,
[data-warm-scope="result"] .result-overlay .btn-back {
    color: #0e7490 !important;
}
/* 결과 상자를 크림 덮개 위에 흰 카드로 세운다 */
[data-warm-scope="result"] .result-overlay .result-panel {
    box-shadow: 0 24px 64px rgba(74, 59, 50, 0.18) !important;
}

/* ══════════════════════════════════════════════════════════
   기억력 다섯 (2026-08-26)
   008_audio_memory_char · 009_audio_memory_num ·
   011_audio_memory_char_reverse · 012_audio_memory_num_reverse · 016_memory_tunnel

   ⛔ 영역 색(기억력 초록)을 글자색으로 쓰던 곳이 많다. 크림 바탕에서 재어 보니
      밝은 쪽 `#10b981` 은 2.42, 가운데 `#059669` 는 3.60 이라 고른 것과 값이 흐려진다.
      **같은 초록의 가장 진한 값 `#047857`**(크림 5.24 · 흰 카드 5.48 · 옅은 초록 바탕 4.65)를 쓴다.
      색이 바뀌는 것이 아니라 진하기만 내리는 것이다.
   ══════════════════════════════════════════════════════════ */
[data-warm="008_audio_memory_char"] .value,
[data-warm="009_audio_memory_num"] .value,
[data-warm="011_audio_memory_char_reverse"] .value,
[data-warm="012_audio_memory_num_reverse"] .value,
[data-warm="008_audio_memory_char"] .level-info,
[data-warm="009_audio_memory_num"] .level-info,
[data-warm="011_audio_memory_char_reverse"] .level-info,
[data-warm="012_audio_memory_num_reverse"] .level-info,
[data-warm="008_audio_memory_char"] .stat-value,
[data-warm="009_audio_memory_num"] .stat-value,
[data-warm="011_audio_memory_char_reverse"] .stat-value,
[data-warm="012_audio_memory_num_reverse"] .stat-value,
[data-warm="008_audio_memory_char"] .result-title,
[data-warm="009_audio_memory_num"] .result-title,
[data-warm="011_audio_memory_char_reverse"] .result-title,
[data-warm="012_audio_memory_num_reverse"] .result-title,
[data-warm="008_audio_memory_char"] .continue-btn,
[data-warm="009_audio_memory_num"] .continue-btn,
[data-warm="011_audio_memory_char_reverse"] .continue-btn,
[data-warm="012_audio_memory_num_reverse"] .continue-btn,
[data-warm="008_audio_memory_char"] .continue-btn.has-value,
[data-warm="009_audio_memory_num"] .continue-btn.has-value,
[data-warm="011_audio_memory_char_reverse"] .continue-btn.has-value,
[data-warm="012_audio_memory_num_reverse"] .continue-btn.has-value,
[data-warm="008_audio_memory_char"] .slider-val,
[data-warm="009_audio_memory_num"] .slider-val,
[data-warm="011_audio_memory_char_reverse"] .slider-val,
[data-warm="012_audio_memory_num_reverse"] .slider-val,
[data-warm="016_memory_tunnel"] .level-badge,
[data-warm="016_memory_tunnel"] .mode-badge,
[data-warm="016_memory_tunnel"] .card-title,
[data-warm="016_memory_tunnel"] .recommend-btn,
[data-warm="016_memory_tunnel"] .recommend-btn.has-value,
[data-warm="016_memory_tunnel"] .slider-value {
    color: #047857 !important;
}

/* ⛔ 고른 것 가운데 **바탕이 진한 초록으로 칠해지는 것**은 흰 글자를 그대로 쓴다 —
   맨 위 영역 색 상자와 같은 갈래다. 2026-08-26에 이것을 빼먹어 「적응형」과 고른 단계가
   진한 초록 바탕 위에 진한 초록 글자가 되어 통째로 사라졌다. */
[data-warm="008_audio_memory_char"] .set-btn.selected,
[data-warm="009_audio_memory_num"] .set-btn.selected,
[data-warm="011_audio_memory_char_reverse"] .set-btn.selected,
[data-warm="012_audio_memory_num_reverse"] .set-btn.selected,
[data-warm="008_audio_memory_char"] .word-btn.selected,
[data-warm="011_audio_memory_char_reverse"] .word-btn.selected,
[data-warm="009_audio_memory_num"] .number-btn.selected,
[data-warm="012_audio_memory_num_reverse"] .number-btn.selected,
[data-warm="016_memory_tunnel"] .stim-btn.active,
[data-warm="016_memory_tunnel"] .level-btn.active {
    color: #FFFFFF !important;
}

/* 기억터널의 로그인 화면 — 제목이 밝은 초록이라 크림 바탕에서 2.42 다(큰 글자 눈금 3에도 못 미친다) */
[data-warm="016_memory_tunnel"] .login-logo h1,
[data-warm="016_memory_tunnel"] .header h1 {
    color: #047857 !important;
}

/* 기억터널의 훈련 화면 「종료」 — 옅은 분홍 글자(255,180,180)는 어두운 바탕에 맞춘 것이라
   크림 바탕에서 1.29 다. 치료사가 훈련을 멈추려고 누르는 것이라 진한 빨강으로 내린다. */
[data-warm="016_memory_tunnel"] .ctrl-danger {
    color: #b91c1c !important;
}

/* 기억터널 훈련 화면의 「N-Back」 이름표 — 옅은 초록 바탕 위라 #047857 로는 4.30 이다.
   지금 색에서는 5.39 였으므로 눈금 아래로 떨어진 것이다. 한 단계 더 진하게 내려 되돌린다. */
[data-warm="016_memory_tunnel"] #levelBadge,
[data-warm="016_memory_tunnel"] .level-badge {
    color: #064e3b !important;
}
/* 판 이름표(작게 적힌 것) — 회청색 40% 는 크림 바탕에서 1.40 이다(지금 색에서는 2.16).
   글이 아니라 표시라 눈금을 채우지는 않지만, 지금보다 낮아지지 않게 진하기를 올린다. */
[data-warm="016_memory_tunnel"] .version-tag {
    color: rgba(74, 59, 50, 0.55) !important;
}
[data-warm="016_memory_tunnel"] {
    --mt-build: rgba(74, 59, 50, 0.55);
}

/* 기억터널의 「전단계 이어서하기」 — 옅은 초록 바탕 위라 #047857 로는 4.26 이다.
   지금 색에서는 6.19 였으므로 눈금 아래로 떨어진 것이다. 한 단계 더 진하게 내린다. */
[data-warm="016_memory_tunnel"] .recommend-btn,
[data-warm="016_memory_tunnel"] .recommend-btn.has-value {
    color: #064e3b !important;
}

/* ══════════════════════════════════════════════════════════
   주의력 둘 — 청각 선택반응 · 시각 선택반응 (2026-08-26)

   ⛔ 영역 색(주의력 파랑)을 글자색으로 쓰던 곳이 있다. 크림 바탕에서 재어 보니
      밝은 쪽 `#5b9be6` 는 2.76, 가운데 `#3a7bd5` 는 4.03 이라 눈금(4.5)에 못 미친다.
      **같은 파랑의 가장 진한 값 `#2a5fb0`**(크림 5.97 · 흰 카드 6.25 · 옅은 파랑 바탕 5.17)를 쓴다.
   ⛔ 스트룹과 같은 주의력 영역이지만 **스트룹은 글자 상자를 어둡게 남기기로 따로 정했다** —
      여기는 그런 자리가 없다(자극이 화면 가운데에 그대로 뜬다).
   ══════════════════════════════════════════════════════════ */
[data-warm="007_01_auditory_training_v1"] .value,
[data-warm="007_02_visual_training_v1"] .value,
[data-warm="007_01_auditory_training_v1"] .setup-title,
[data-warm="007_02_visual_training_v1"] .setup-title,
[data-warm="007_01_auditory_training_v1"] .target-label,
[data-warm="007_02_visual_training_v1"] .target-label,
[data-warm="007_01_auditory_training_v1"] .target-arrow,
[data-warm="007_02_visual_training_v1"] .target-arrow,
[data-warm="007_01_auditory_training_v1"] .result-title,
[data-warm="007_02_visual_training_v1"] .result-title,
[data-warm="007_01_auditory_training_v1"] .preview-item.target,
[data-warm="007_02_visual_training_v1"] .preview-item.target {
    color: #2a5fb0 !important;
}

/* 화면에 직접 적힌 꾸밈 글이라 자리 이름으로는 안 잡힌다 — 낱말 이름으로 잡는다 */
[data-warm="007_01_auditory_training_v1"] #problemVal,
[data-warm="007_02_visual_training_v1"] #problemVal,
[data-warm="007_01_auditory_training_v1"] #previewSelectedType,
[data-warm="007_02_visual_training_v1"] #previewSelectedType {
    color: #2a5fb0 !important;
}

/* ══════════════════════════════════════════════════════════
   연산 셋 — 손모양 숫자인식 · 주사위 합계 · 구구단 (2026-08-26)
   005_number_fast · 006_dice · 013_multiplication

   셋 다 영역 색이 주황(#d97706)이라 앞서 끝낸 주황 무리 여섯과 같은 값을 쓴다 —
   글자로 쓰는 주황은 크림 바탕에서 3.04, 밝은 쪽(#f59e0b)은 2.05 라 안 읽힌다.
   ⛔ 셈하는 값과 아이가 누른 답이 여기에 걸려 있어 그대로 두면 훈련이 안 된다.

   ⛔ 맨 위 영역 색 상자 안은 흰 글자 그대로다(위쪽에서 이미 되돌려 둔다).
   ⛔ 고른 단(구구단)처럼 **바탕이 진한 주황으로 칠해지는 것**도 흰 글자 그대로다.
   ══════════════════════════════════════════════════════════ */
[data-warm="005_number_fast"],
[data-warm="006_dice"],
[data-warm="013_multiplication"] {
    /* 화면 파일이 낱말로 부르는 값 — 이 파일이 비면 화면이 들고 있는 지금 값이 쓰인다 */
    --warm-cat-ink: #92400e;              /* 영역 색을 글자로 쓰는 자리 (크림 6.77) */
    --warm-ok: #047857;                   /* 맞았다는 초록 — 글자와 테두리 (크림 5.24) */
    /* 「훈련결과 보기」 안에서 단을 고르는 것 가운데 **안 고른 것** —
       옅기를 그대로 옮기면 흰 카드 위에서 3.21 이 3.10 으로 조금 낮아진다(실측).
       ⛔ 눈금 아래였던 글자는 더 낮아지면 안 되므로 사다리를 한 단계 올린다. */
    --warm-dan-off: var(--dark-w420);
}

/* ── 영역 색을 글자색으로 쓰던 곳 ────────────────────────── */
[data-warm="005_number_fast"] .best-record .value,
[data-warm="006_dice"] .best-record .value,
[data-warm="013_multiplication"] .best-record .value,
[data-warm="005_number_fast"] .result-title,
[data-warm="006_dice"] .result-title,
[data-warm="013_multiplication"] .result-title,
[data-warm="013_multiplication"] .level-btn .dan-acc {
    color: #92400e !important;
}

/* 화면에 직접 적힌 꾸밈 글이라 자리 이름으로는 안 잡힌다 — 낱말 이름으로 잡는다 */
[data-warm="005_number_fast"] #problemVal,
[data-warm="006_dice"] #problemVal,
[data-warm="013_multiplication"] #problemVal,
[data-warm="005_number_fast"] #stimVal,
[data-warm="006_dice"] #stimVal,
[data-warm="013_multiplication"] #stimVal,
[data-warm="005_number_fast"] #extraVal,
[data-warm="006_dice"] #extraVal,
[data-warm="013_multiplication"] #extraVal {
    color: #92400e !important;
}

/* ── 구구단에서 아이가 누른 답이 뜨는 칸 ───────────────────
   주황을 12% 옅게 깐 바탕 위에 밝은 주황 글자다. 크림 바탕에서는 1.81 로 사라진다. */
[data-warm="013_multiplication"] .answer-display {
    color: #92400e !important;
    border-color: rgba(146, 64, 14, 0.35) !important;
}

/* ── 구구단의 「지우기」와 「확인」 ─────────────────────────
   옅게 깐 바탕 위에 얹힌 글자라 크림 바탕에서 1.67 · 1.91 로 사라진다.
   ⛔ 두 색을 하나로 합치지 않는다 — 지우는 것과 답을 보내는 것을 색으로 갈라 놓았다. */
[data-warm="013_multiplication"] .number-btn.clear-btn {
    color: #92400e !important;
}
[data-warm="013_multiplication"] .number-btn.submit-btn {
    color: #065f46 !important;
}

/* ── 훈련을 마치고 뜨는 결과 화면 ──────────────────────────
   ⛔⛔ 여기가 통째로 어두운 채로 남아 있었다 — 화면을 덮는 것이
      rgba(20,16,16,0.97) 로 코드에 직접 박혀 있어 **바꾸는 도구도 세는 프로그램도 못 보던 모양**이다
      (흰색·검정 순색이 아니라서 걸리지 않는다). 그대로 두면 어두운 덮개 위에 갈색 글자가 얹혀
      「훈련 완료」가 5.16 에서 2.43 으로, 정답률 숫자가 11.71 에서 1.58 로 사라진다(실측).
   ⛔ 큰 상자는 흰 카드로 세운다 — 밝은 바탕에서는 옅은 막으로 층이 안 읽힌다. */
[data-warm="005_number_fast"] .result-screen,
[data-warm="006_dice"] .result-screen,
[data-warm="013_multiplication"] .result-screen {
    background: var(--dark-veil-strong) !important;
}
[data-warm="005_number_fast"] .result-panel,
[data-warm="006_dice"] .result-panel,
[data-warm="013_multiplication"] .result-panel {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
    box-shadow: 0 10px 28px rgba(74, 59, 50, 0.10) !important;
}
[data-warm="005_number_fast"] .result-item,
[data-warm="006_dice"] .result-item,
[data-warm="013_multiplication"] .result-item {
    background: #FFF9F0 !important;
    border-color: rgba(74, 59, 50, 0.16) !important;
}
/* 「훈련결과 보기」와 「돌아가기」 — 영역 색을 옅게 깐 바탕이라 흰 글자가 사라진다 */
[data-warm="005_number_fast"] .result-panel .btn,
[data-warm="006_dice"] .result-panel .btn,
[data-warm="013_multiplication"] .result-panel .btn {
    background: #FFF9F0 !important;
    border: 1px solid rgba(146, 64, 14, 0.30) !important;
    color: #4A3B32 !important;
}

/* ── 맞혔을 때 잠깐 뜨는 동그라미 ──────────────────────────
   ⛔ 걷어 놓고 재면 못 잡는 자리다. 초록을 18% 옅게 깐 바탕에 금색 글자라
      크림 바탕에서는 11.09 에서 1.08 로 사라진다.
      진한 초록으로 채워 금색 글자를 살린다(5.48). */
[data-warm="005_number_fast"] .correct-popup,
[data-warm="006_dice"] .correct-popup,
[data-warm="013_multiplication"] .correct-popup {
    background: #065f46 !important;
    border-color: #047857 !important;
}

/* ══════════════════════════════════════════════════════════
   한글 따라쓰기 · 한글 기억해 쓰기 (2026-08-26)
   047_hangul_tracing · 048_hangul_memory_write

   둘 다 「시작할 때 뜨는 상자」·「다시 하기 상자」·「결과 화면」의 만듦새가 같다.
   ⛔ 그 셋이 전부 어두운 채로 남아 있었다 — 상자 바탕이 rgba(16,15,22,0.96) ·
      rgba(22,16,26,0.96) 으로 코드에 박혀 있어 바꾸는 도구가 못 본다(§7-0-5와 같은 갈래).
   ⛔ 한글 따라쓰기는 **아이가 지금 써야 할 글자**를 흰색으로 칠하고 있었다 —
      크림 바탕에서는 그 글자가 통째로 사라진다. 따라 쓰는 데 필요한 색도 함께 살린다.
   ══════════════════════════════════════════════════════════ */

/* ── 화면을 덮는 것 셋 ── */
[data-warm="047_hangul_tracing"] .intro-modal,
[data-warm="048_hangul_memory_write"] .intro-modal,
[data-warm="047_hangul_tracing"] .result-overlay,
[data-warm="048_hangul_memory_write"] .result-overlay {
    background: var(--dark-veil-strong) !important;
}

/* ── 큰 상자는 흰 카드로 세운다 ── */
[data-warm="047_hangul_tracing"] .intro-modal .panel,
[data-warm="048_hangul_memory_write"] .intro-modal .panel,
[data-warm="047_hangul_tracing"] .retry-modal .modal-panel,
[data-warm="048_hangul_memory_write"] .retry-modal .modal-panel,
[data-warm="047_hangul_tracing"] .result-panel,
[data-warm="048_hangul_memory_write"] .result-panel {
    background: #FFFFFF !important;
    box-shadow: 0 12px 32px rgba(74, 59, 50, 0.12) !important;
}
[data-warm="047_hangul_tracing"] .result-panel .result-item,
[data-warm="048_hangul_memory_write"] .result-panel .result-item {
    background: #FFF9F0 !important;
    border-color: rgba(74, 59, 50, 0.16) !important;
}

/* ══ 한글 따라쓰기 ══════════════════════════════════════ */
[data-warm="047_hangul_tracing"] {
    /* 화면 파일이 낱말로 부르는 값 — 이 파일이 비면 화면이 들고 있는 지금 값이 쓰인다 */
    --warm-cur:   #4f2e83;   /* 지금 써야 할 글자 — 흰색이면 크림 바탕에서 사라진다 (9.78) */
    --warm-ink:   #7c5baa;   /* 아이가 그은 선 — #c9b8ea 는 크림 바탕에서 1.74 다 (5.10) */
    --warm-out:   #b91c1c;   /* 통로를 벗어났다는 표시 (6.18) */
    --warm-gold:  #b45309;   /* 잘 그었다는 표시와 보여 주는 선 — #f59e0b 는 2.05 다 (4.80) */
    --warm-start: #15803d;   /* 시작점과 방향 화살표 — #22c55e 는 2.18 로 그림 눈금(3)에 못 미친다 (4.79) */
    --warm-off:   #64748b;   /* 아직 시작할 수 없다는 회색 (4.55) */
    --warm-em:    #4f2e83;   /* 「훈련결과 보기」에 찍히는 글에서 힘주어 적는 곳 */
}
/* 영역 색을 글자색으로 쓰던 곳 — 옅은 영역 색 위에 얹히는 자리라 진하게 내린다
   (한글자모 합성하기·듣고 자모 조합하기에서 정한 값과 같다) */
[data-warm="047_hangul_tracing"] .setup-card .setup-title,
[data-warm="047_hangul_tracing"] .countdown,
[data-warm="047_hangul_tracing"] .result-panel .result-title,
[data-warm="047_hangul_tracing"] .word-prompt .ch.done {
    color: #4f2e83 !important;
}

/* ⛔ 고른 것 — 영역 색을 옅게 깐 바탕이라 밝은 글자가 8.59 에서 1.09 로 사라진다(실측).
   ⛔ 맨 위 상자처럼 **진하게 칠해진 바탕**이 아니므로 흰 글자를 그대로 두면 안 된다. */
[data-warm="047_hangul_tracing"] .opt-btn.active {
    color: #4f2e83 !important;
}

/* ══ 한글 기억해 쓰기 ═══════════════════════════════════ */
[data-warm="048_hangul_memory_write"] {
    --warm-fb:  #4A3B32;   /* 알려 주는 한 줄 — #f2d4a0 은 크림 바탕에서 1.36 이다 */
    --warm-em:  #86198f;   /* 힘주어 적는 곳 — 이 영역 색을 진하게 내린 값 (7.87) */
    --warm-ok:  #047857;   /* 잘했다는 초록 — #7fdca6 은 1.58 이다 (5.24) */
}
[data-warm="048_hangul_memory_write"] .opt-btn.active {
    color: #701a75 !important;
}
[data-warm="048_hangul_memory_write"] .setup-card .setup-title,
[data-warm="048_hangul_memory_write"] .countdown,
[data-warm="048_hangul_memory_write"] .result-panel .result-title {
    color: #a21caf !important;
}

/* ══════════════════════════════════════════════════════════
   손가락 협응 (2026-08-26)  ·  014_finger_coordination

   이 화면은 다른 것과 만듦새가 다르다 — 훈련하는 자리는 **원래도 밝은 색**이고
   (연분홍 바탕에 흰 카드) **단계를 고르는 화면만 검정**이다.
   ⛔ 그래서 그 검정이 코드에 `#141010` 으로 박혀 있어 도구가 못 봤고,
      단계 고르는 화면이 검정으로 남은 채 그 위의 글만 갈색이 되어
      「왼손」·「오른손」·「1단계」~「4단계」가 8.99 에서 1.58 로 사라졌다(실측).
   ⛔ 손가락 위치 등록 화면 맨 위의 띠도 뒤집혔다 — 옅기 사다리는 글자에 쓰라고 만든 것이라
      바탕에 쓰면 흰 띠가 진한 갈색이 되고, 그 위의 짙은 글자가 10.85 에서 1.03 이 된다.
   ══════════════════════════════════════════════════════════ */
[data-warm="014_finger_coordination"] {
    --warm-menu-bg: #FFF9F0;   /* 단계 고르는 화면의 바탕 */
    --warm-bar:     #FFFFFF;   /* 손가락 위치 등록 화면 맨 위의 띠 */
    --warm-mark:    rgba(74, 59, 50, 0.34);  /* 맨 아래 작게 적힌 글 — 사다리 그대로면 1.53 이 1.11 로 낮아진다 */
    /* ⛔ 이 둘은 단계 고르는 상자 안(분홍을 옅게 깐 카드)에 얹히는 자리라 한 단계 더 진하게 쓴다 —
       #15803d·#b45309 로는 3.67 로 눈금에 못 미친다(실측). */
    --warm-ok:      #065f46;   /* 등록이 끝났다는 초록 (5.62) — #22c55e 는 밝은 바탕에서 2.18 이다 */
    --warm-wait:    #92400e;   /* 아직 등록 안 됐다는 색 (5.19) — #f59e0b 는 2.05 다 */
}
/* 단계를 고르는 상자 안의 글 — 검정 바탕이 크림으로 바뀌므로 흰 글자를 되돌리지 않는다.
   ⛔ 옅게 깐 분홍 위에 얹히는 자리라 영역 색을 진하게 내려 쓴다. */
[data-warm="014_finger_coordination"] .menu-col-title,
[data-warm="014_finger_coordination"] .menu-title {
    color: #a1224b !important;
}

/* ══════════════════════════════════════════════════════════
   결과 화면을 모두 크림색으로 (작업자 지시 2026-08-26)
   ⛔⛔ 이 자리가 통째로 새어 나가고 있었다.

   훈련을 마치면 화면 전체를 덮으며 뜨는 결과 화면의 색이 화면 파일에
   `rgba(20,16,16,0.97)` · `rgba(0,0,0,0.55)` 꼴로 직접 박혀 있다.
   **바꾸는 도구도 세는 프로그램도 이 모양을 못 본다** — 둘 다 아주 어두운 색 코드(`#141010` 꼴)와
   순수한 흰색·검정을 옅게 얹은 막만 훑는데, 이것은 셋 중 어느 것도 아니다.
   그래서 **화면 바탕은 크림색으로 바뀌었는데 결과 화면만 어두운 채로 남고 그 위의 글자만 갈색이 됐다.**
   청각기억력 문자에서 잰 값 — 「최고 레벨」·「별 개수」 1.37 · 「훈련결과 보기」·「돌아가기」 1.36.

   ⛔ 스트룹은 이미 `var(--dark-veil)` 로 부르고 있어 손대지 않는다.
   ⛔ 눈-손 협응과 도형 연결하기는 결과 상자가 이미 흰 카드라 덮개만 바꾼다.
   ══════════════════════════════════════════════════════════ */

/* ── 화면을 덮는 것 ── */
[data-warm="007_01_auditory_training_v1"] .result-screen,
[data-warm="007_02_visual_training_v1"] .result-screen,
[data-warm="008_audio_memory_char"] .result-screen,
[data-warm="009_audio_memory_num"] .result-screen,
[data-warm="011_audio_memory_char_reverse"] .result-screen,
[data-warm="012_audio_memory_num_reverse"] .result-screen,
[data-warm="016_memory_tunnel"] .result-screen,
[data-warm="017_visual_motor"] .result-screen,
[data-warm="019_tetris_classic"] .result-screen,
[data-warm="020_tetris_drag_vertical"] .result-screen,
[data-warm="021_tetris_drag_horizontal"] .result-screen,
[data-warm="037_visual_motor_large"] .result-screen,
[data-warm="014_finger_coordination"] .result-overlay,
[data-warm="031_ten_frame_basic_count"] .result-overlay,
[data-warm="032_ten_frame_basic_fill"] .result-overlay,
[data-warm="046_pre_writing_tracing"] .result-overlay {
    background: var(--dark-veil-strong) !important;
}

/* ── 큰 상자는 흰 카드로 세운다 (옅은 막으로는 밝은 바탕에서 층이 안 읽힌다) ── */
[data-warm="004_stroop"] .result-panel,
[data-warm="007_01_auditory_training_v1"] .result-panel,
[data-warm="007_02_visual_training_v1"] .result-panel,
[data-warm="008_audio_memory_char"] .result-panel,
[data-warm="009_audio_memory_num"] .result-panel,
[data-warm="011_audio_memory_char_reverse"] .result-panel,
[data-warm="012_audio_memory_num_reverse"] .result-panel,
[data-warm="016_memory_tunnel"] .result-panel,
[data-warm="019_tetris_classic"] .result-panel,
[data-warm="020_tetris_drag_vertical"] .result-panel,
[data-warm="021_tetris_drag_horizontal"] .result-panel,
[data-warm="031_ten_frame_basic_count"] .result-panel,
[data-warm="032_ten_frame_basic_fill"] .result-panel,
[data-warm="046_pre_writing_tracing"] .result-panel {
    background: #FFFFFF !important;
    border: 1px solid rgba(74, 59, 50, 0.16) !important;
    box-shadow: 0 12px 32px rgba(74, 59, 50, 0.12) !important;
}
[data-warm="004_stroop"] .result-item,
[data-warm="007_01_auditory_training_v1"] .result-item,
[data-warm="007_02_visual_training_v1"] .result-item,
[data-warm="008_audio_memory_char"] .result-item,
[data-warm="009_audio_memory_num"] .result-item,
[data-warm="011_audio_memory_char_reverse"] .result-item,
[data-warm="012_audio_memory_num_reverse"] .result-item,
[data-warm="016_memory_tunnel"] .result-item,
[data-warm="019_tetris_classic"] .result-item,
[data-warm="020_tetris_drag_vertical"] .result-item,
[data-warm="021_tetris_drag_horizontal"] .result-item,
[data-warm="031_ten_frame_basic_count"] .result-item,
[data-warm="032_ten_frame_basic_fill"] .result-item,
[data-warm="046_pre_writing_tracing"] .result-item {
    background: #FFF9F0 !important;
    border-color: rgba(74, 59, 50, 0.16) !important;
}

/* ── 결과 상자 맨 위의 「훈련 완료」 ─────────────────────────
   흰 카드 위에 얹히게 되면서 영역 색 밝은 쪽이 안 읽힌다 —
   테트리스 셋 5.51 → 2.98 · 10-프레임 기초 둘 11.95 → 1.51 · 기억터널 6.48 → 2.54 (실측).
   ⛔ 영역 색을 바꾸는 것이 아니라 **그 영역의 가장 진한 값으로 내리는 것**이다. */
[data-warm="019_tetris_classic"] .result-title,
[data-warm="020_tetris_drag_vertical"] .result-title,
[data-warm="021_tetris_drag_horizontal"] .result-title {
    color: #4338ca !important;          /* 시지각 남보라 */
}
[data-warm="031_ten_frame_basic_count"] .result-title,
[data-warm="032_ten_frame_basic_fill"] .result-title {
    color: #4d7c0f !important;          /* 수감각 연두 */
}
[data-warm="016_memory_tunnel"] .result-title {
    color: #047857 !important;          /* 기억력 초록 */
}