/* 애니 아트 스타일 전환의 토큰 계약과 공통 부품 스킨 — 전 페이지가 이 한 장을 물고 리스킨된다
 *
 * ── 왜 이 방식인가 ───────────────────────────────────────────────
 * 이 사이트의 HTML 89개 중 79개가 인라인 <style> 을 갖고 있다. 전부 손으로 고칠 수는 없다.
 * 다행히 두 별칭 계열이 **모두 같은 정본 토큰 8개에서 var() 로 파생**되고 있다.
 *
 *   랜딩 계열 (index.html 등)   --bg0:var(--night); --yellow:var(--star); --green:var(--aurora); …
 *   학습 계열 (grade*_ktrag 등) --bg0:var(--night); --gold:var(--star);  --hp-green:var(--aurora); …
 *
 * CSS 커스텀 속성은 **선언 시점이 아니라 사용 시점에 해석된다.** 그래서 이 파일이
 * `--night` `--star` `--aurora` 같은 정본 토큰 8개의 값만 바꿔 주면
 * 두 계열의 별칭 수십 개가 저절로 따라온다. 페이지 본문 규칙은 한 줄도 건드리지 않는다.
 *
 * 손으로 덮어야 하는 것은 var() 로 파생되지 않고 **hex 를 직접 박아 둔 별칭**뿐이다.
 * 그것들은 §3 에 모아 놨다.
 *
 * ── 토큰 이름은 왜 그대로 두나 ───────────────────────────────────
 * day 스킨에서 `--night` 가 크림색이 되는 건 이름과 값이 어긋나 보인다.
 * 하지만 이름을 바꾸려면 57개 파일을 편집해야 한다. **이름은 슬롯이고 값만 바뀐다.**
 * 이 저장소는 이미 같은 수법을 두 번 썼다 (index.html:41, grade5-1_ktrag.html:2 주석).
 *
 * ── 물리는 법 ────────────────────────────────────────────────────
 *   <link rel="stylesheet" href="/assets/anime/anime.css" />
 * <head> 안 어디든 좋다. 선택자를 `:root:root` (특이도 0,2,0) 로 올려 놔서
 * 페이지 인라인 <style> 의 `:root` 보다 **위치와 무관하게** 이긴다.
 *
 * 밝은 스킨이 기본이다. 오래 들여다보는 학습 화면은 <html data-skin="night"> 를 준다.
 */

/* 폰트도 이 한 줄에 딸려 온다 — 페이지마다 제각각이던 family= 링크를 여기로 모은다.
   외부 도메인이 아니라 자체 호스팅본이다. 다섯 패밀리 전부 SIL OFL 1.1 이고
   재배포 고지는 vendor/fonts/NOTICE.md 에 있다. */
@import url('../../vendor/fonts/fonts.css');

/* ═══════════════════════════════════════════════════════════════════
   §1. DAY — 매직아워. 관문 화면(랜딩·선택·리포트)이 쓴다.
   ═══════════════════════════════════════════════════════════════════ */
:root:root{
  /* 스타일 뼈대 */
  --ink:#1B1240;          /* 외곽선이자 본문 글자 */
  --ink-2:#5B4A8F;        /* 보조 글자 */
  --paper:#FFF4E0;        /* 바탕 */
  --paper-2:#FFE6BE;      /* 눌린 바탕 */
  --surface:#FFFFFF;      /* 카드 면 */
  --cel:#E7CFA6;          /* 종이 위 플랫 그림자 한 단 */

  /* 하늘 색면 — 배경 연출용. 그라데이션이 아니라 경계가 보이는 분할이다 */
  --sky-hi:#8BE3FF;
  --sky-mid:#FFAFD0;
  --sky-low:#FFD489;

  /* 팝 컬러 여덟. -s 접미사는 셀셰이딩 한 단(그림자 면) 이다 */
  --red:#FF4D6D;    --red-s:#D6244A;
  --orange:#FF8A3D; --orange-s:#9E4409;   /* --ember 슬롯이 글자로 쓰여서 3.32:1 이었다 */
  /* 민트·노랑의 -s 는 다른 색보다 많이 내렸다. 두 색은 본질적으로 밝아서
     한 단만 내리면 흰 글자도(3.10:1) 진행 막대 채움도(2.56:1) 기준에 못 미친다.
     셀 그림자로도 여전히 같은 색의 어두운 면으로 읽힌다 */
  --yellow:#FFD23F; --yellow-s:#7A5C00;
  --mint:#2FD6A6;   --mint-s:#0A6E52;
  --cyan:#3ECBE8;   --cyan-s:#1799B6;
  --blue:#4D7CFE;   --blue-s:#2453D6;
  --purple:#A15BFF; --purple-s:#7431D6;
  --pink:#FF7BA8;   --pink-s:#D6497B;

  /* ── 정본 토큰 8개. 이 여덟 줄이 두 별칭 계열 전체를 끌고 간다 ── */
  --night:  var(--paper);     /* 페이지 바탕 슬롯 */
  --dusk:   var(--surface);   /* 패널·카드 슬롯 */
  --dusk-2: var(--paper-2);   /* 살짝 올라온 면 슬롯 */
  /* 강조 세 색은 밝은 원색이 아니라 -s 다. 원본에서 이 셋은 **어두운 배경 위의
     밝은 강조색**이라 글자로도 면으로도 쓰였다 (`.scene-no{color:var(--star)}`,
     `.cst.lit .node{fill:var(--star)}`). 배경을 뒤집었으니 밝은 스킨에서는
     어두운 강조색이어야 두 역할이 모두 산다. 노랑 글자는 크림 위에서 1.4:1 이다. */
  --star:   var(--yellow-s);  /* 강조 골드 슬롯 */
  --aurora: var(--mint-s);    /* 성공·완료 슬롯 */
  --ember:  var(--orange-s);  /* 따뜻한 강조 슬롯 */
  --mist:   var(--ink-2);     /* 흐린 글자 슬롯 */
  --moon:   var(--ink);       /* 본문 글자 슬롯 */

  --on-bright:var(--ink);   /* 밝은 색면 위에 얹는 글자색 */

  /* 기존 페이지들이 rgba(255,255,255,α) 로 박아 둔 자리를 옮겨 담을 슬롯.
     그 값의 뜻은 「흰색」이 아니라 **바탕과 대비되는 전경색 α」** 였다.
     밤에는 달빛, 낮에는 잉크다. scripts/anime-migrate-page.mjs 가 치환한다. */
  --fg-rgb:27,18,64;

  /* 글꼴 — 제목은 둥글고 굵게, 캐릭터 말은 손글씨, 본문은 읽기 편하게 */
  --font-title:"Jua",system-ui,sans-serif;
  --font-hand:"Gaegu",cursive;
  --font-body:"Gowun Dodum",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* 애니 스타일 손잡이 */
  --lw:4px;            /* 라인 두께 */
  --lw-sm:3px;
  --pop:7px;           /* 플랫 그림자 오프셋 — blur 는 언제나 0 이다 */
  --pop-sm:4px;
  --ease:cubic-bezier(.34,1.56,.64,1);   /* 튕기는 만화 타이밍 */
  --r-a:30px 16px 28px 20px;             /* 네 모서리가 서로 다른 라운드 */
  --r-b:18px 32px 18px 30px;
  --r-c:26px 26px 14px 32px;
}

/* ═══════════════════════════════════════════════════════════════════
   §2. NIGHT — 밤은 유지하되 라인워크·플랫 그림자·과장 캐릭터는 똑같이 입는다.
        30분 들여다보는 학습 화면이 쓴다. 스타일은 하나, 밝기만 두 벌이다.
   ═══════════════════════════════════════════════════════════════════ */
:root:root[data-skin="night"]{
  --ink:#080420;          /* 밤에도 외곽선은 있다. 면보다 더 어두운 남색 */
  --ink-2:#B9A9FF;
  --paper:#1A1145;        /* 기존 #0A0E27 보다 채도를 올린 밤 */
  --paper-2:#241858;
  --surface:#2A1B6B;
  --cel:#120A34;

  --sky-hi:#2A1B6B;
  --sky-mid:#3B1E6E;
  --sky-low:#1A1145;

  --red:#FF5F7E;    --red-s:#C42B4C;
  --orange:#FF7B4D; --orange-s:#C9502A;
  --yellow:#FFD84D; --yellow-s:#C9A213;
  --mint:#4DF0C7;   --mint-s:#0C7255;   /* 민트는 밤에도 더 내려야 흰 글자가 산다 */
  --cyan:#5FD9F2;   --cyan-s:#1E9CBD;
  --blue:#7B9BFF;   --blue-s:#3D63D6;
  --purple:#B57BFF; --purple-s:#7B44D6;
  --pink:#FF8FBC;   --pink-s:#D65A8E;

  /* 정본 토큰 8개 — 이름도 순서도 §1 과 같다. 값만 다르다 */
  --night:  var(--paper);
  --dusk:   var(--surface);
  --dusk-2: var(--paper-2);
  --star:   var(--yellow);
  --aurora: var(--mint);
  --ember:  var(--orange);
  --mist:   var(--ink-2);
  --moon:   #F4F2FF;      /* 밤의 본문 글자는 --ink 가 아니라 달빛이다 */
  --fg-rgb:244,242,255;   /* 밤에서는 원래의 흰색 그대로 — 겉보기가 바뀌지 않는다 */

  --lw:4px;
  --lw-sm:3px;
  --pop:7px;
  --pop-sm:4px;
  --ease:cubic-bezier(.34,1.56,.64,1);
  --r-a:30px 16px 28px 20px;
  --r-b:18px 32px 18px 30px;
  --r-c:26px 26px 14px 32px;
}

/* ═══════════════════════════════════════════════════════════════════
   §3. 하드코딩 별칭 덮어쓰기.
        여기 있는 것들은 페이지가 var() 가 아니라 hex 를 직접 박아 둔 자리다.
        정본 토큰을 바꿔도 따라오지 않으므로 명시적으로 덮는다.
        값을 토큰으로 쓰기 때문에 day/night 양쪽에서 자동으로 갈린다.
   ═══════════════════════════════════════════════════════════════════ */
:root:root{
  /* 테두리·유리면 (랜딩 계열) */
  --line:var(--ink);
  --glass:var(--surface);
  --bg1:var(--dusk);        /* index.html 은 여기만 hex 를 박아 뒀다 (#0B1230) */

  /* 테두리 (학습 계열) */
  --panel-border:var(--ink);
  --border-purple:var(--ink);
  --border:var(--ink);

  /* 상태색 중 hex 로 박혀 있던 것들 */
  --core2:var(--red-s);
  --hp-red:var(--red);
  --locked:var(--cel);

  /* 그림자 — blur 반경 0. 이 한 줄이 화면 전체의 「튀어나온 정도」다 */
  --shadow:var(--pop) var(--pop) 0 var(--ink);
  --shadow-lg:calc(var(--pop) + 4px) calc(var(--pop) + 5px) 0 var(--ink);
  --softshadow:var(--pop-sm) var(--pop-sm) 0 var(--ink);

  /* 광채 — 셀 애니에는 번짐이 없다. 링 하나로 대체한다 */
  --glow-star:0 0 0 6px color-mix(in srgb, var(--star) 40%, transparent);
  --glow-aurora:0 0 0 6px color-mix(in srgb, var(--aurora) 40%, transparent);
  --glow-f:var(--glow-aurora);
  --flt:color-mix(in srgb, var(--aurora) 16%, transparent);

  /* 라운드 — 비대칭으로 바꾼다 */
  --r:var(--r-a);
  --r-lg:var(--r-a); --r-md:var(--r-b); --r-sm:14px;
  --r20:var(--r-a); --r14:var(--r-b); --r9:12px;
}

/* color-mix 를 모르는 브라우저를 위한 폴백. 지원 브라우저에서는 위 규칙이 이긴다 */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  :root:root{
    --glow-star:0 0 0 6px rgba(255,210,63,.4);
    --glow-aurora:0 0 0 6px rgba(47,214,166,.4);
    --flt:rgba(47,214,166,.16);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   §4. 바탕 — 살짝 뒤틀린 공간.
        `anime-space` 클래스를 body 에 주면 켜진다. 기본은 꺼져 있다.
   ═══════════════════════════════════════════════════════════════════ */
/* 페이지 기본. 기존 페이지들은 body 에 다층 그라데이션과 `color:white` 를 박아 뒀다.
   셀 애니에는 그라데이션이 없고, 밝은 스킨에서 흰 글자는 읽히지 않는다.
   anime.css 를 물린 페이지에만 적용되므로 미전환 페이지는 영향받지 않는다. */
body{background:var(--paper);color:var(--moon)}
body.anime-space{background:var(--paper)}
.anime-gridwarp{
  position:fixed;inset:-12%;z-index:-5;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(27,18,64,.055) 0 2px,transparent 2px 54px),
    repeating-linear-gradient(90deg,rgba(27,18,64,.045) 0 2px,transparent 2px 54px);
  transform:skewY(-1.4deg) rotate(.6deg);
}
:root[data-skin="night"] .anime-gridwarp{
  background:
    repeating-linear-gradient(0deg, rgba(185,169,255,.07) 0 2px,transparent 2px 54px),
    repeating-linear-gradient(90deg,rgba(185,169,255,.055) 0 2px,transparent 2px 54px);
}
/* 하늘·해·구름은 히어로 구간에만 산다. fixed 로 두면 본문 뒤까지 따라온다 */
.anime-backdrop{position:absolute;left:0;right:0;top:0;height:1180px;z-index:-1;overflow:hidden;pointer-events:none}
.anime-sky{
  position:absolute;inset:0;
  background:linear-gradient(177deg,          /* 3도 기울인 지평선 */
    var(--sky-hi) 0%, var(--sky-hi) 22%,
    var(--sky-mid) 22%, var(--sky-mid) 46%,
    var(--sky-low) 46%, var(--sky-low) 62%,
    var(--paper) 62%, var(--paper) 100%);
}
/* 소실점을 68% 로 밀어 놨다. 정직한 원근은 재미가 없다 */
.anime-floor{
  position:absolute;left:-40%;right:-40%;bottom:-6%;height:46%;
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 96px),
    repeating-linear-gradient(0deg, var(--ink) 0 3px,transparent 3px 96px);
  transform:perspective(360px) rotateX(65deg) rotate(-2.2deg) skewX(-7deg);
  transform-origin:68% 100%;
  opacity:.16;
  -webkit-mask-image:linear-gradient(to top,#000 6%,transparent 78%);
          mask-image:linear-gradient(to top,#000 6%,transparent 78%);
}
.anime-sun{
  position:absolute;right:9%;top:6%;width:190px;height:190px;
  border-radius:50%;background:var(--yellow);border:var(--lw) solid var(--ink);
  box-shadow:0 0 0 16px color-mix(in srgb,var(--yellow) 35%,transparent),
             0 0 0 34px color-mix(in srgb,var(--yellow) 16%,transparent);
  animation:animeSunBeat 6s ease-in-out infinite;
}
@keyframes animeSunBeat{50%{transform:scale(1.05) rotate(4deg)}}

/* 떠 있는 사물 — 서로 다른 각도로 기울어야 「장난스러운 왜곡」이 된다 */
.anime-backdrop .props{position:absolute;inset:0;pointer-events:none}
.anime-backdrop .prop{position:absolute;animation:animeDrift 9s ease-in-out infinite alternate}
@keyframes animeDrift{to{transform:translate(18px,-26px) rotate(var(--r2,6deg))}}
.anime-backdrop .cloud{
  background:#fff;border:var(--lw) solid var(--ink);
  border-radius:60% 40% 55% 45%/70% 65% 35% 30%;
  box-shadow:inset -18px -12px 0 0 var(--cel);   /* 셀셰이딩 — 흐림 없는 단색 한 단 */
}
.anime-backdrop .glyph{
  font-family:var(--font-title);color:var(--ink);
  text-shadow:4px 4px 0 rgba(27,18,64,.18);
}

/* ═══════════════════════════════════════════════════════════════════
   §5. 공통 부품.
        `index-anime.html` 에서 페이지 고유 레이아웃을 걷어내고 계약만 남긴 것.
   ═══════════════════════════════════════════════════════════════════ */
.ink-box{
  background:var(--surface);
  border:var(--lw) solid var(--ink);
  border-radius:var(--r-a);
  box-shadow:var(--shadow);
  position:relative;
}
.ink-box.r-b{border-radius:var(--r-b)}
.ink-box.r-c{border-radius:var(--r-c)}

/* 글꼴은 강제하지 않는다 — 87개 페이지의 기존 타이포를 뒤엎지 않으려고 붙이는 쪽만 바꾼다 */
.anime-title{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;line-height:1.25}
.anime-hand{font-family:var(--font-hand);font-weight:700}
.anime-body{font-family:var(--font-body)}

/* 균일하지 않게 — 수평선이 완벽히 수평인 요소가 화면에 없어야 한다 */
.tilt-a{transform:rotate(-1.3deg)}
.tilt-b{transform:rotate(1.1deg)}
.tilt-c{transform:rotate(-.6deg)}

.hoverpop{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.hoverpop:hover{transform:translate(-4px,-5px) rotate(-1.6deg);box-shadow:var(--shadow-lg)}
.hoverpop:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--ink)}

/* 글자색은 --ink 가 아니라 --moon 이다. --ink 는 「외곽선」 슬롯이라
   밤 스킨에서 거의 검정이 되고, 어두운 카드 면 위에서 글자가 사라진다. */
.ink-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:var(--lw-sm) solid var(--ink);border-radius:999px;
  padding:6px 13px;font-size:13px;font-weight:700;white-space:nowrap;
  background:var(--surface);color:var(--moon);text-decoration:none;
  box-shadow:var(--pop-sm) var(--pop-sm) 0 var(--ink);
  transition:transform .16s var(--ease);
}
.ink-chip:hover{transform:translate(-2px,-2px) rotate(-2deg)}

/* 밝은 색면을 깔면 글자는 다시 잉크색이다. 인라인 style 로 배경만 바꾸면
   글자색이 따라오지 않아 밤 스킨에서 깨진다 — 그래서 클래스로 묶어 둔다. */
.ink-chip.c-red{background:var(--red)}
.ink-chip.c-orange{background:var(--orange)}
.ink-chip.c-yellow{background:var(--yellow)}
.ink-chip.c-mint{background:var(--mint)}
.ink-chip.c-cyan{background:var(--cyan)}
.ink-chip.c-blue{background:var(--blue)}
.ink-chip.c-purple{background:var(--purple)}
.ink-chip.c-pink{background:var(--pink)}
/* 밝은 색면 위의 글자색은 --ink 를 따라가면 안 된다. --ink 는 외곽선 슬롯이라
   고대비 모드에서 뒤집히고, 그러면 밝은 칩 위에 밝은 글자가 앉는다. */
.ink-chip[class*="c-"]{color:var(--on-bright)}

/* 규칙. **흰 글자를 얹는 면은 -s(셀 그림자) 색을 쓴다.** 밝은 원색 위의 흰 글자는
   18px 에서 WCAG 를 넘지 못한다 (흰색 on --red = 3.21:1). 밝은 원색은
   글자를 얹지 않는 장식·칩 배경 전용이고, 거기엔 잉크색 글자가 올라간다. */
.ink-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:"Jua",sans-serif;font-size:18px;text-decoration:none;
  background:var(--red-s);color:#fff;
  border:var(--lw) solid var(--ink);border-radius:28px 14px 26px 16px;
  padding:13px 26px;box-shadow:var(--pop) calc(var(--pop) + 1px) 0 var(--ink);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.ink-btn:hover{transform:translate(-3px,-4px) rotate(-1.5deg);box-shadow:var(--shadow-lg)}
.ink-btn:active{transform:translate(4px,5px);box-shadow:1px 1px 0 var(--ink)}

/* 진행 막대 — 채운 쪽 끝에도 잉크선이 있다.
   채움도 -s 색이다. 밝은 민트를 크림 트랙에 넣으면 1.71:1 로 어디까지 찼는지 안 보인다 */
.ink-bar{height:16px;background:var(--paper-2);border:var(--lw-sm) solid var(--ink);border-radius:999px;overflow:hidden}
.ink-bar > i{display:block;height:100%;background:var(--mint-s);border-right:var(--lw-sm) solid var(--ink);border-radius:0 999px 999px 0}

/* 말풍선 */
.ink-bubble{
  position:relative;background:var(--surface);color:var(--moon);
  border:var(--lw) solid var(--ink);border-radius:26px 26px 26px 6px;
  padding:12px 16px;box-shadow:var(--pop-sm) calc(var(--pop-sm) + 2px) 0 var(--ink);
  font-family:"Gaegu",cursive;font-weight:700;font-size:17.5px;line-height:1.4;
}
.ink-bubble::after{content:"";position:absolute;left:26px;bottom:calc(-2 * var(--lw) - 13px);
  border:11px solid transparent;border-top-color:var(--ink)}
.ink-bubble::before{content:"";position:absolute;left:29px;bottom:calc(-2 * var(--lw) - 5px);z-index:1;
  border:8px solid transparent;border-top-color:var(--surface)}

/* 스쿼시 & 스트레치 — 부피는 유지된다 */
@keyframes animeHover{
  0%,100%{transform:translateY(0)     scaleX(1)    scaleY(1)}
  45%    {transform:translateY(-20px) scaleX(.965) scaleY(1.045)}
  70%    {transform:translateY(4px)   scaleX(1.055) scaleY(.945)}
}
@keyframes animeBlink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes animeSparkle{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(35deg)}}
@keyframes animeOk{0%{transform:scale(.86) rotate(-6deg)}60%{transform:scale(1.16) rotate(4deg)}100%{transform:scale(1)}}
@keyframes animeNo{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.anime-float{animation:animeHover 3.6s ease-in-out infinite;transform-origin:50% 100%}
.anime-blink{animation:animeBlink 4.3s steps(1,end) infinite;transform-origin:center}
.anime-sparkle{animation:animeSparkle 2.2s ease-in-out infinite;transform-origin:center}
.anime-ok{animation:animeOk .45s var(--ease)}
.anime-no{animation:animeNo .38s}

/* ═══════════════════════════════════════════════════════════════════
   §6. 마감 규칙
   ═══════════════════════════════════════════════════════════════════ */

/* 두꺼운 외곽선에 포커스 링이 묻히지 않도록 바깥으로 뺀다 */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
}

/* 인쇄 — 잉크선과 고채도 색면을 그대로 보내면 토너를 먹는다 */
@media print{
  :root:root, :root:root[data-skin="night"]{
    --paper:#fff; --paper-2:#fff; --surface:#fff; --cel:#eee;
    --ink:#000; --ink-2:#444; --moon:#000; --mist:#444;
    --lw:1.5px; --lw-sm:1px; --pop:0px; --pop-sm:0px;
    --shadow:none; --shadow-lg:none; --softshadow:none;
    --glow-star:none; --glow-aurora:none; --glow-f:none;
  }
  .anime-gridwarp,.anime-backdrop,.anime-sky,.anime-floor,.anime-sun{display:none!important}
  .tilt-a,.tilt-b,.tilt-c{transform:none!important}
}

/* 모션 감축 */
@media (prefers-reduced-motion:reduce){
  .anime-float,.anime-blink,.anime-sparkle,.anime-ok,.anime-no,.anime-sun{
    animation:none!important;
  }
  .hoverpop,.ink-chip,.ink-btn{transition:none!important}
}

/* 고대비 — 28개 페이지의 접근성 패널이 이 속성을 켠다 */
/* 고대비에서는 색면 자체가 뒤집힌다 — 밝은 화면이면 색면이 어두워지고, 어두운 화면이면
   색면이 밝아진다. 그래서 --on-bright 도 함께 뒤집어야 칩 글자가 산다. */
:root[data-contrast="high"]{
  --paper:#fff; --paper-2:#f2f2f2; --surface:#fff; --ink:#000; --ink-2:#1a1a1a;
  --moon:#000; --mist:#1a1a1a;
  --red:#B3001B; --orange:#8A4200; --yellow:#6B5200; --mint:#00614A;
  --cyan:#00505F; --blue:#0031B0; --purple:#4A0F8F; --pink:#8A0040;
  --on-bright:#fff;        /* 색면이 어두워졌으므로 글자는 희다 */
}
:root[data-contrast="high"][data-skin="night"]{
  --paper:#000; --paper-2:#0d0d0d; --surface:#000; --ink:#fff; --ink-2:#f0f0f0;
  --moon:#fff; --mist:#f0f0f0;
  --red:#FF9AA9; --orange:#FFC08A; --yellow:#FFE98A; --mint:#8AF5D9;
  --cyan:#9DE8F7; --blue:#B3C6FF; --purple:#D9B3FF; --pink:#FFB3CE;
  --on-bright:#000;        /* 색면이 밝아졌으므로 글자는 검다 */
}

/* 작은 화면에서는 선과 그림자를 줄인다. 안 그러면 화면을 잡아먹는다 */
@media (max-width:560px){
  :root:root, :root:root[data-skin="night"]{--lw:3.5px;--lw-sm:2.5px;--pop:5px;--pop-sm:3px}
}
