/* ============================================================
   Arcade Teading — 디자인 시스템
   ------------------------------------------------------------
   이 파일은 semantic.css '뒤에' 로드되어야 합니다.
   (index.html의 link 순서 확인)

   원칙
   1. 번들(main.js 9.8MB)은 건드리지 않는다. 여기서만 덮어쓴다.
   2. 블록 카테고리 색상(blockColors)은 절대 바꾸지 않는다.
      전 세계 메이크코드 교재·영상과 학생 화면이 어긋난다.
   3. 홈 화면(#homescreen)만 어둡게. 에디터는 밝게 둔다.
      오래 들여다보는 작업 공간이고 교실 프로젝터에서도 보여야 한다.
   4. 고대비 모드를 깨뜨리지 않는다.
      색을 바꾸는 규칙은 전부 body:not(.high-contrast)로 감싼다.
   ============================================================ */

:root {
  /* 브랜드 */
  --ct-brand:      #17A24A;
  --ct-brand-lt:   #3BD473;
  --ct-brand-dk:   #0F7F38;
  --ct-brand-deep: #0A5C2A;
  --ct-brand-dark: #07401D;

  /* 아케이드 지면 — 브랜드 그린을 끝까지 어둡게 민 값.
     옛 인광 CRT의 녹색 잔상 계열이라 레트로 컴퓨팅과 맞고
     헤더 #17A24A와 한 가족으로 읽힌다. */
  --ct-void:   #08130D;
  --ct-ground: #0C1B13;
  --ct-surf:   #13291D;
  --ct-surf-2: #1B3827;
  --ct-line:   #1F4630;
  --ct-line-2: #2E6B48;
  --ct-dim:    #EAF6EE;
  --ct-dim-2:  #93B3A0;
  --ct-dim-3:  #5F7D6C;

  /* 밝은 면(에디터·문서) */
  --ct-paper: #F7F9F7;
  --ct-card:  #FFFFFF;
  --ct-ink:   #16211B;
  --ct-ink-2: #5A6B61;
  --ct-ink-3: #8A9A90;
  --ct-hair:  #E2EAE4;
  --ct-tint:  #EEF8F1;
  --ct-tint-line: #CDE7D7;

  --ct-amber: #F2A007;

  /* 아케이드 팔레트 16색 — 아이가 만든 게임이 실제로 쓰는 색.
     카테고리 칩·강조에는 여기서만 고른다. target.js의 device.palette와 동일. */
  --pal-1:  #ffffff;  --pal-2:  #ff2121;  --pal-3:  #ff93c4;  --pal-4:  #ff8135;
  --pal-5:  #fff609;  --pal-6:  #249ca3;  --pal-7:  #78dc52;  --pal-8:  #003fad;
  --pal-9:  #87f2ff;  --pal-10: #8e2ec4;  --pal-11: #a4839f;  --pal-12: #5c406c;
  --pal-13: #e5cdc4;  --pal-14: #91463d;

  /* 코딩티딩 홈페이지와 동일한 폰트 스택 */
  --ct-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --ct-mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", Menlo, monospace;

  --ct-header-h: 56px;   /* header.menubar 높이 (position:absolute라 본문이 밑으로 깔립니다) */
  --ct-radius:   10px;
  --ct-radius-s: 8px;

  /* 홈 화면 글자 배율. 기본 크기가 작아 1.2배로 올려 뒀습니다.
     이 값 하나만 바꾸면 홈 화면 글자가 한꺼번에 조정됩니다. */
  --ct-scale: 1.2;
}

/* ============================================================
   1. 타이포그래피
   ------------------------------------------------------------
   기존 custom.css의 `* { font-family }`는 custom.css가 semantic.css보다
   먼저 로드되는 탓에 메뉴·카드 제목이 monospace로 밀려나 있었다.
   여기서 바로잡되, 코드 에디터·블록의 monospace는 반드시 지킨다.
   ============================================================ */

body, body.main,
.ui.menu, .ui.card, .ui.card .content .header, .ui.card .content .description,
.ui.button, .ui.header, .ui.modal, .ui.dropdown, .ui.input input,
.ui.label, .ui.list, .ui.segment, .ui.text,
#homescreen, #mainmenu {
  font-family: var(--ct-font);
}

.monaco-editor, .monaco-editor *,
.blocklyHtmlInput,
code, pre, kbd, samp, tt,
.ui.text.mono, .serial-modal-digit {
  font-family: var(--ct-mono);
}
.blocklyText { font-family: inherit; }

body { -webkit-font-smoothing: antialiased; }

/* 한국어는 어절 단위로 끊어야 읽기 편하다 */
.ui.card .content .header,
#homescreen .ui.header,
#homescreen .ui.card .content,
.ui.modal .header {
  word-break: keep-all;
  letter-spacing: -.012em;
}

/* ============================================================
   2. 헤더 — 브랜드 그린 + 8px 픽셀 디더 경계
   ============================================================ */

body:not(.high-contrast) .ui.inverted.menu,
body:not(.high-contrast) #mainmenu.ui.menu {
  background: var(--ct-brand);
}
body:not(.high-contrast) #mainmenu { position: relative; }
body:not(.high-contrast) #mainmenu::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background-image: linear-gradient(90deg, var(--ct-brand-dark) 50%, transparent 50%);
  background-size: 8px 4px;
  pointer-events: none;
}

#mainmenu .ui.item.logo.organization img.ui.logo,
.ui.item.logo.organization img.ui.logo { height: 1.9rem; width: auto; }

#mainmenu .ui.item.logo.brand .name,
#mainmenu .ui.item.logo.brand .name-short {
  font-family: var(--ct-font);
  font-weight: 800;
  letter-spacing: -.018em;
}

body:not(.high-contrast) .ui.accessibleMenu { background: var(--ct-brand-dk); }

/* ============================================================
   3. 홈 화면 — 어두운 아케이드 지면
   ------------------------------------------------------------
   #homescreen 아래만 어둡게 하므로 에디터는 그대로 밝다.
   ============================================================ */

body:not(.high-contrast) #homescreen,
body:not(.high-contrast) #homescreen .projectsdialog,
body:not(.high-contrast) #homescreen .tabsegment,
body:not(.high-contrast) #homescreen .ui.segment {
  background: var(--ct-ground);
  color: var(--ct-dim);
  border-color: var(--ct-line);
  box-shadow: none;
}
body:not(.high-contrast) #homescreen .ui.header,
body:not(.high-contrast) #homescreen h2,
body:not(.high-contrast) #homescreen .ui.card .content .header {
  color: var(--ct-dim);
}

/* 영역 순서
   ------------------------------------------------------------
   .tabsegment를 flex 컨테이너로 만들면 너비가 무너져(자식이 min-content로
   줄어들어) 격자가 1열이 되고 탭 칩이 세로로 쌓인다. 건드리지 않는다.
   home-enhance.js가 진입 카드와 탭 바를 첫 갤러리 '앞'에 끼워 넣으므로
   DOM 순서만으로 원하는 배치가 나온다:
     히어로 → 내 프로젝트 → 처음이라면 → 탭 바 → 갤러리 → 푸터 */
#homescreen .tabsegment { padding: 0 !important; }

/* 섹션 제목 */
#homescreen .gallerysegment > h2.ui.header.heading,
#homescreen .gallerysegment .ui.header.myproject-header {
  font-size: calc(1.15rem * var(--ct-scale));
  font-weight: 800;
  letter-spacing: -.022em;
  margin: 0 0 .85rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
body:not(.high-contrast) #homescreen .gallerysegment .ui.header.myproject-header,
body:not(.high-contrast) #homescreen .gallerysegment .ui.header.myproject-header:hover {
  color: var(--ct-dim);
}
#homescreen .gallerysegment .ui.header.myproject-header > .view-all-button {
  margin-left: .9rem;
  font-size: calc(.78rem * var(--ct-scale));
  font-weight: 600;
}
body:not(.high-contrast) #homescreen .gallerysegment .ui.header.myproject-header > .view-all-button {
  color: var(--ct-brand-lt);
}

/* 제목 줄 오른쪽 버튼 (가져오기 / 사용자 컨텐츠 페이지 열기 / 가이드 페이지) */
#homescreen .gallerysegment .ui.heading {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
#homescreen .gallerysegment .ui.heading .column { margin: 0; padding: 0; }
#homescreen .gallerysegment .ui.heading .column.right.aligned { margin-left: auto; }
body:not(.high-contrast) #homescreen .gallerysegment .ui.button,
body:not(.high-contrast) #homescreen .import-dialog-btn,
body:not(.high-contrast) #homescreen .gallerysegment h2 .ui.button {
  background: var(--ct-surf) !important;
  border: 1px solid var(--ct-line) !important;
  color: var(--ct-dim) !important;
  border-radius: var(--ct-radius-s);
  font-size: calc(.8rem * var(--ct-scale));
  font-weight: 600;
  box-shadow: none !important;
  /* 원본이 h2 안에서 float/margin으로 자리를 잡고 있어 격자와 어긋납니다 */
  float: none !important;
  margin: 0 0 0 auto !important;
}
body:not(.high-contrast) #homescreen .gallerysegment .ui.button:hover,
body:not(.high-contrast) #homescreen .import-dialog-btn:hover {
  background: var(--ct-surf-2) !important;
  border-color: var(--ct-line-2) !important;
  color: #fff !important;
}
#homescreen .gallerysegment { padding: 1.5rem 3.75rem 1.1rem !important; }
#homescreen .gallerysegment:not(.mystuff-segment) { padding-top: .6rem !important; }

@media only screen and (max-width: 991px) {
  #homescreen .gallerysegment { padding: 1.2rem 1.1rem .9rem !important; }
}

/* ============================================================
   4. 히어로
   ============================================================ */

/* 원본 히어로는 `margin-top:-2.1rem`으로 헤더 아래에 밀어 넣고
   글 영역을 `position:absolute; width:20rem; height:6.5rem; overflow-y:auto`로
   잡아 둡니다. 그대로 두면 위가 34px 잘리고 글에 스크롤바가 생깁니다.
   가로 flex 한 줄(글 | 게임 화면)로 다시 짭니다. */
#homescreen .getting-started-segment.hero {
  margin-top: 0 !important;
  min-height: 22rem;
  /* header.menubar가 position:absolute라 본문 위에 떠 있습니다(높이 56px).
     배경 이미지는 헤더 밑까지 깔리도록 두고, 글과 게임 화면만 헤더 아래로 내립니다. */
  padding: calc(var(--ct-header-h) + 2.2rem) 3.75rem 2.2rem !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid var(--ct-line);
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  overflow: hidden;
}
#homescreen .getting-started-segment.hero .gradient-overlay {
  position: absolute !important;
  inset: 0;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 0;
}
body:not(.high-contrast) #homescreen .getting-started-segment.hero .gradient-overlay {
  background: linear-gradient(96deg,
    rgba(8,19,13,.97) 0%,
    rgba(8,19,13,.90) 46%,
    rgba(8,19,13,.42) 100%);
}

#homescreen .hero-banner-contents {
  position: relative !important;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 36rem;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1rem;
}
/* 글 영역의 고정 높이와 스크롤바를 걷어낸다 */
#homescreen .hero .description {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: inherit !important;
}
#homescreen .hero-banner-contents .description p {
  margin: 0;
  font-size: calc(1.7rem * var(--ct-scale));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.032em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.ct-kicker {
  font-family: var(--ct-mono);
  font-size: calc(.66rem * var(--ct-scale));
  letter-spacing: .16em;
  color: var(--ct-brand-lt);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
#homescreen .hero-banner-contents .action { margin: 0 !important; }
#homescreen .hero-banner-contents .dots { margin: 0 !important; }

@media only screen and (max-width: 991px) {
  #homescreen .getting-started-segment.hero {
    padding: calc(var(--ct-header-h) + 1.4rem) 1.1rem 1.6rem !important;
    min-height: 17rem;
  }
  #homescreen .hero-banner-contents .description p { font-size: calc(1.3rem * var(--ct-scale)); }
}

/* 히어로 버튼 — blue 클래스로 나오지만 브랜드색으로 */
body:not(.high-contrast) #homescreen .hero .ui.button,
body:not(.high-contrast) #homescreen .hero .ui.blue.button {
  background: var(--ct-brand);
  color: #fff;
  border-radius: var(--ct-radius-s);
  font-weight: 700;
  letter-spacing: -.015em;
}
body:not(.high-contrast) #homescreen .hero .ui.button:hover,
body:not(.high-contrast) #homescreen .hero .ui.blue.button:hover {
  background: var(--ct-brand-lt);
  color: #06210F;
}

/* 히어로 오른쪽에서 실제로 돌아가는 게임 화면 (home-enhance.js가 삽입)
   absolute로 두면 히어로의 overflow에 잘리므로 flex 형제로 배치한다. */
.ct-hero-screen {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  /* 글 영역에 max-width가 있어 남는 공간이 배분되지 않습니다.
     margin-left:auto로 남는 공간을 왼쪽에 몰아 오른쪽에 붙이되,
     히어로 여백 안에 두어 다른 영역과 오른쪽 선을 맞춥니다. */
  margin-left: auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--ct-line),
              0 0 60px -8px rgba(59, 212, 115, .38);
}
.ct-hero-screen canvas {
  display: block;
  image-rendering: pixelated;   /* 최근접 이웃 확대 — 어떤 크기에서도 도트가 살아 있다 */
  width: 320px; height: 240px;  /* 160x120의 2배 */
}
.ct-hero-screen::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 3px);
}
@media only screen and (max-width: 1240px) {
  .ct-hero-screen canvas { width: 240px; height: 180px; }
}
/* 좁은 화면에서는 글이 우선이라 감춥니다 */
@media only screen and (max-width: 860px) {
  .ct-hero-screen { display: none; }
}

/* 캐러셀 점 */
body:not(.high-contrast) #homescreen .hero .dots .ui.button {
  background: rgba(255,255,255,.34);
  width: .55rem; height: .55rem;
}
body:not(.high-contrast) #homescreen .hero .dots .ui.button.selected,
body:not(.high-contrast) #homescreen .hero .dots .ui.button[aria-current="true"] {
  background: var(--ct-brand-lt);
}

/* ============================================================
   5. 가로 캐러셀 → 반응형 격자
   ------------------------------------------------------------
   .carouselbody는 JS가 인라인으로 width와 margin-left만 준다.
   !important로 덮으면 격자로 바뀐다. 화살표는 필요 없어지므로 숨긴다.
   ============================================================ */

#homescreen .carouselcontainer { overflow: visible !important; }
#homescreen .carouselbody {
  width: 100% !important;
  margin-left: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .9rem;
}
#homescreen .carouselitem {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  /* 한 줄에 놓인 카드들의 높이를 맞춘다 */
  display: flex;
}
#homescreen .carouselitem > .ui.card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* 제목 칸이 남는 높이를 먹어 카드 아래쪽이 정렬된다 */
#homescreen .carouselitem > .ui.card > .content { flex: 1 1 auto; }
#homescreen .carouselarrow { display: none !important; }

@media only screen and (max-width: 640px) {
  #homescreen .carouselbody { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .65rem; }
}

/* ============================================================
   6. 카드 — 게임 화면 그대로 4:3, 픽셀은 픽셀로
   ------------------------------------------------------------
   썸네일 원본은 대부분 320x240(게임 화면 160x120의 정확히 2배)인데
   기존 카드 칸은 280x144(약 2:1)라 위아래가 잘리고 배율이 어긋나
   도트가 뭉개지고 있었다.
   ============================================================ */

/* semantic.css의 `.projectsdialog .ui.card { width:15rem; height:9rem; white-space:nowrap }`가
   카드를 144px에 가둬 두고 제목 줄바꿈도 막고 있었습니다.
   내용만큼 늘어나게 풀어야 이미지·제목·진행도가 겹치지 않습니다. */
#homescreen .ui.card,
#homescreen .projectsdialog .ui.card {
  width: 100% !important;
  height: auto !important;
  white-space: normal !important;
  margin: 0 !important;
  border-radius: var(--ct-radius);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* semantic.css의 `.projectsdialog .ui.card { border:5px solid #e9eef2 !important }`가
   두꺼운 흰 테두리를 강제하고 있어 !important로 되받아야 합니다.
   호버의 `transform: scale(1.1)`도 격자에서는 옆 카드를 덮어 어색합니다. */
body:not(.high-contrast) #homescreen .ui.card {
  background-color: var(--ct-surf) !important;
  border: 1px solid var(--ct-line) !important;
  box-shadow: none;
}
#homescreen .ui.card.link:hover,
#homescreen .ui.card.example:hover { transform: translateY(-4px) !important; }
body:not(.high-contrast) #homescreen .ui.card.link:hover,
body:not(.high-contrast) #homescreen .ui.card.example:hover {
  background-color: var(--ct-surf-2) !important;
  border-color: var(--ct-line-2) !important;
  box-shadow: 0 14px 28px -16px rgba(0,0,0,.8),
              0 0 30px -14px rgba(59,212,115,.5);
}
/* 선택된 카드의 10px 흰 테두리와 말풍선 꼬리 */
body:not(.high-contrast) #homescreen .carouselitem.selected .ui.card {
  border: 2px solid var(--ct-brand-lt) !important;
}
#homescreen .carouselitem.selected .ui.card:after,
#homescreen .carouselitem.selected .ui.card:before { display: none !important; }

/* 이미지 칸 */
#homescreen .ui.card .ui.image,
#homescreen .projectsdialog .ui.card.example .ui.image,
#homescreen .ui.card .ui.imagewrapper {
  height: auto !important;
  padding: 0 !important;
  background: #000;
}
#homescreen .ui.card .ui.cardimage,
#homescreen .projectsdialog .ui.card.example .ui.cardimage {
  position: relative;
  height: auto !important;
  aspect-ratio: 4 / 3;
  background-color: #000;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* 도트를 보간하지 않는다 — 이 한 줄이 체감 차이가 가장 크다 */
  image-rendering: pixelated;
}

/* --- 내 프로젝트 카드 -----------------------------------------
   .ui.card.file은 갤러리 카드와 구조가 다릅니다.
   .fileimage는 썸네일이 아니라 `position:absolute`로 모서리에 붙는
   '파일 종류 아이콘'이라, 여기에 aspect-ratio를 걸었더니 32x24로 쪼그라들고
   제목과 겹쳐 깨져 보였습니다. 아이콘은 아이콘대로 두고
   이미지 칸만 4:3으로 잡아 갤러리 카드와 결을 맞춥니다. */
#homescreen .ui.card.file .ui.image {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto !important;
}
body:not(.high-contrast) #homescreen .ui.card.file .ui.image {
  background:
    radial-gradient(120% 120% at 50% 0%, #1B3827 0%, #0E1F16 70%);
}
#homescreen .ui.card.file .fileimage {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 3.4rem !important;
  height: 2.6rem !important;
  opacity: .92;
}
#homescreen .ui.card.file .content {
  margin-left: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
/* semantic.css의 `.ui.card.file .content .header { height:6.5rem; word-break:break-all }`.
   제목 한 줄짜리에도 104px를 잡아먹어 카드가 길쭉해졌습니다.
   한글은 break-all로 끊으면 어절 중간이 잘려 읽기 나쁩니다. */
#homescreen .ui.card.file .content .header {
  height: auto !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
}
#homescreen .ui.card.file .meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 .7rem .6rem !important;
  font-size: calc(.7rem * var(--ct-scale)) !important;
}
body:not(.high-contrast) #homescreen .ui.card.file .meta,
body:not(.high-contrast) #homescreen .ui.card.file .meta .date {
  color: var(--ct-dim-2) !important;
}
#homescreen .ui.card.file .meta .ui.label {
  margin: 0;
  float: none !important;
  font-size: inherit;
  padding: .28em .6em;
  border-radius: 999px;
}
body:not(.high-contrast) #homescreen .ui.card.file .meta .ui.label {
  background: var(--ct-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}
#homescreen .ui.card.file .meta .date { margin-left: auto; }

/* 주사선 — 아주 옅게 */
body:not(.high-contrast) #homescreen .ui.card .ui.cardimage::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

/* 제목 */
#homescreen .ui.card .content {
  height: auto !important;
  padding: .55rem .7rem .65rem !important;
  border: 0 !important;
}
#homescreen .ui.card .content .header,
#homescreen .projectsdialog .ui.card.file .content .header {
  font-size: calc(.84rem * var(--ct-scale)) !important;
  font-weight: 600;
  line-height: 1.35;
}
body:not(.high-contrast) #homescreen .ui.card .content { background: var(--ct-surf); }
body:not(.high-contrast) #homescreen .ui.card .content .description,
body:not(.high-contrast) #homescreen .ui.card .content .meta { color: var(--ct-dim-2); }

/* 새 프로젝트 / 가져오기 같은 버튼 카드 */
body:not(.high-contrast) #homescreen .ui.card.buttoncard {
  background: var(--ct-surf-2);
  border: 1.5px dashed var(--ct-line-2);
  color: var(--ct-brand-lt);
}
#homescreen .ui.card.buttoncard .content {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .4rem;
  aspect-ratio: 4 / 3;
}
body:not(.high-contrast) #homescreen .ui.card.buttoncard .content,
body:not(.high-contrast) #homescreen .ui.card.buttoncard .header,
body:not(.high-contrast) #homescreen .ui.card.buttoncard .icon {
  background: transparent;
  color: var(--ct-brand-lt) !important;
}
body:not(.high-contrast) #homescreen .ui.card.buttoncard:hover {
  background: var(--ct-surf);
  border-color: var(--ct-brand-lt);
}

/* 추천 리본 — 유일한 보조 강조색 */
body:not(.high-contrast) #homescreen .ui.ribbon.label,
body:not(.high-contrast) #homescreen .ui.orange.ribbon.label {
  background-color: var(--ct-amber) !important;
  border-color: #B87605 !important;
  color: #33230A !important;
  font-weight: 800;
  font-size: calc(.66rem * var(--ct-scale)) !important;
  letter-spacing: -.01em;
  z-index: 2;
}

/* --- 사용자 컨텐츠 -------------------------------------------
   index.html의 loadUserContentList()가 만들어 붙입니다.
   원본에 크림색(#FDE9C7) 인라인 배경이 박혀 있어 되돌립니다. */
body:not(.high-contrast) #homescreen #user-content-list,
body:not(.high-contrast) #homescreen #user-content-list .ui.heading {
  background-color: var(--ct-ground) !important;
  margin-bottom: 0 !important;
}
#homescreen .user-content-like {
  top: 8px; right: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: calc(.68rem * var(--ct-scale));
  z-index: 3;
}
body:not(.high-contrast) #homescreen .user-content-like {
  background: rgba(8, 19, 13, .74);
}
#homescreen .user-content-like p { margin: 0; }

/* 진행 막대(내 프로젝트의 튜토리얼 진행도) */
body:not(.high-contrast) #homescreen .ui.card .ui.progress,
body:not(.high-contrast) #homescreen .ui.card .bar { background: var(--ct-line); }
body:not(.high-contrast) #homescreen .ui.card .ui.progress .bar { background: var(--ct-brand-lt); }

/* ============================================================
   7. 진입 카드 3장 · 탭 바 (home-enhance.js가 삽입)
   ============================================================ */

#homescreen .ct-entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .8rem;
  padding: .4rem 3.75rem 1.4rem;
}
@media only screen and (max-width: 991px) {
  #homescreen .ct-entries { padding: .4rem 1.1rem 1.1rem; }
}
.ct-entry {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1.05rem 1.15rem 1.15rem;
  border-radius: var(--ct-radius);
  background: var(--ct-surf);
  border: 1px solid var(--ct-line);
  color: var(--ct-dim);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ct-entry:hover {
  transform: translateY(-3px);
  border-color: var(--ct-line-2);
  box-shadow: 0 14px 28px -18px rgba(0,0,0,.8);
  color: var(--ct-dim);
}
.ct-entry canvas { image-rendering: pixelated; align-self: flex-start; }
.ct-entry b { font-size: calc(.98rem * var(--ct-scale)); font-weight: 700; letter-spacing: -.018em; }
.ct-entry small { color: var(--ct-dim-2); font-size: calc(.8rem * var(--ct-scale)); line-height: 1.55; }
.ct-entry .go { margin-top: .2rem; font-size: calc(.78rem * var(--ct-scale)); font-weight: 700; color: var(--ct-brand-lt); }

#homescreen .ct-tabbar {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .4rem 3.75rem 0;
  align-items: center;
}
@media only screen and (max-width: 991px) {
  #homescreen .ct-tabbar { padding: .4rem 1.1rem 0; }
}
#homescreen .ct-tabbar .ct-tabtitle {
  font-size: calc(1.15rem * var(--ct-scale)); font-weight: 800; letter-spacing: -.022em;
  margin-right: .55rem;
}
.ct-tab {
  font: inherit;
  font-size: calc(.8rem * var(--ct-scale)); font-weight: 600;
  padding: .34rem .85rem;
  border-radius: 999px;
  background: var(--ct-surf);
  border: 1px solid var(--ct-line);
  color: var(--ct-dim-2);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.ct-tab:hover { color: var(--ct-dim); border-color: var(--ct-line-2); }
.ct-tab[aria-selected="true"] {
  background: var(--ct-brand);
  border-color: var(--ct-brand);
  color: #fff;
}

/* 탭 필터 — 선택된 갤러리만 남긴다 */
#homescreen .tabsegment[data-ct-tab] .gallerysegment[data-ct-gallery] { display: none; }
#homescreen .tabsegment[data-ct-tab="*"] .gallerysegment[data-ct-gallery] { display: block; }
#homescreen .tabsegment[data-ct-tab="0"] .gallerysegment[data-ct-gallery="0"],
#homescreen .tabsegment[data-ct-tab="1"] .gallerysegment[data-ct-gallery="1"],
#homescreen .tabsegment[data-ct-tab="2"] .gallerysegment[data-ct-gallery="2"],
#homescreen .tabsegment[data-ct-tab="3"] .gallerysegment[data-ct-gallery="3"],
#homescreen .tabsegment[data-ct-tab="4"] .gallerysegment[data-ct-gallery="4"],
#homescreen .tabsegment[data-ct-tab="5"] .gallerysegment[data-ct-gallery="5"],
#homescreen .tabsegment[data-ct-tab="6"] .gallerysegment[data-ct-gallery="6"],
#homescreen .tabsegment[data-ct-tab="7"] .gallerysegment[data-ct-gallery="7"] { display: block; }
/* 탭으로 묶인 갤러리는 제목을 탭이 대신하므로 숨긴다 */
#homescreen .tabsegment[data-ct-tab]:not([data-ct-tab="*"]) .gallerysegment[data-ct-gallery] > h2 { display: none; }

/* ============================================================
   8. 푸터
   ============================================================ */

body:not(.high-contrast) #homescreen .homefooter {
  background: var(--ct-void);
  border-top: 1px solid var(--ct-line);
  padding: 1.1rem 3.75rem 1.3rem;
  margin: 0;
}
body:not(.high-contrast) #homescreen .homefooter .item { color: var(--ct-dim-2) !important; }
body:not(.high-contrast) #homescreen .homefooter a.item:hover { color: var(--ct-brand-lt) !important; }
#homescreen .homefooter .ui.item.copyright {
  flex-basis: 100%;
  margin-top: .45rem;
  font-size: calc(.74rem * var(--ct-scale));
  line-height: 1.6;
  color: var(--ct-dim-3);
}

/* ============================================================
   9. 로딩 화면
   ------------------------------------------------------------
   semantic.css의 .ui.loader.main:after / .msft:after 에는 예전 코딩티딩
   로고가 base64 PNG로 박혀 있고 3D 회전 애니메이션이 걸려 있다.
   그 로더는 쓰지 않고, index.html의 #loading을 통째로 교체한다.
   ============================================================ */

/* semantic.css의 .ui.loader.main:after 에는 예전 코딩티딩 로고가
   base64 PNG로 박혀 있고 3D 회전이 걸려 있습니다.
   첫 진입 화면(#loading)뿐 아니라 JavaScript/애셋 편집기로 전환할 때도
   같은 로더가 뜨므로 전역으로 브랜드 스피너로 바꿉니다. */
#loading .ui.loader.main:after,
#loading .ui.loader.main:before,
#loading .ui.loader.main.msft:after { display: none !important; content: none !important; }

body:not(.high-contrast) .ui.loader.main:after,
body:not(.high-contrast) .ui.loader.main.msft:after {
  background: none !important;
  background-image: none !important;
  border: 4px solid var(--ct-hair) !important;
  border-top-color: var(--ct-brand) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  animation: ct-spin .8s linear infinite !important;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body:not(.high-contrast) .ui.loader.main:after,
  body:not(.high-contrast) .ui.loader.main.msft:after { animation: none !important; }
}

/* '따라해 보기 시작중...' 같은 안내 문구가 있는 로더
   semantic은 이 로더를 200x200 상자로 잡고 고리를 그 위에 겹쳐 놓기만 해서,
   글자가 상자 맨 위 = 고리 맨 위에 그대로 얹혔습니다.
   고리를 작게 줄이고, 글자는 고리 아래로 내려 여백을 줍니다.
   (고리는 position:absolute + top:0 이라 padding-top의 영향을 받지 않습니다) */
body:not(.high-contrast) .ui.loader.main:after,
body:not(.high-contrast) .ui.loader.main.msft:after {
  width: 4.5rem !important;
  height: 4.5rem !important;
  margin: 0 0 0 -2.25rem !important;
}
body:not(.high-contrast) .ui.loader.main {
  width: auto !important;
  height: auto !important;
  min-width: 14rem;
  padding-top: 6rem !important;
  font-size: 1rem !important;
  font-family: var(--ct-font);
  line-height: 1.5;
}

#loading.ct-loading {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.15rem;
  background: var(--ct-void);
  opacity: 1;
}
.ct-load-screen {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--ct-line), 0 0 60px -10px rgba(59,212,115,.34);
}
.ct-load-screen canvas { display: block; image-rendering: pixelated; }
.ct-load-screen::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
.ct-load-brand {
  display: flex; align-items: center; gap: .55rem;
  color: #fff; font-family: var(--ct-font);
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.022em;
}
.ct-load-brand img { width: 26px; height: 26px; display: block; }
.ct-load-bar {
  width: 13rem; height: 6px; border-radius: 3px;
  background: var(--ct-surf); overflow: hidden;
}
.ct-load-bar i {
  display: block; height: 100%; width: 38%;
  border-radius: 3px; background: var(--ct-brand-lt);
  animation: ct-load-slide 1.5s ease-in-out infinite;
}
@keyframes ct-load-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(300%); }
}
.ct-load-text {
  font-family: var(--ct-font); font-size: .82rem; color: var(--ct-dim-2);
}

/* ============================================================
   10. 접근성
   ============================================================ */

:where(a, button, .ui.button, .ui.card.link, .ct-tab, .ct-entry,
       [role="menuitem"], [tabindex]):focus-visible {
  outline: 3px solid var(--ct-brand-lt);
  outline-offset: 2px;
  border-radius: 4px;
}
body:not(.high-contrast) #mainmenu :focus-visible,
body:not(.high-contrast) .ui.inverted.menu :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  #homescreen .ui.card, .ct-entry { transition: none; }
  #homescreen .ui.card.link:hover,
  #homescreen .ui.card.example:hover,
  .ct-entry:hover { transform: none; }
  .ct-load-bar i { animation: none; width: 100%; }
}

/* ============================================================
   11. 기타 밝은 면
   ============================================================ */

.ui.button { border-radius: var(--ct-radius-s); font-weight: 700; letter-spacing: -.012em; }
body:not(.high-contrast) .ui.primary.button,
body:not(.high-contrast) .ui.green.button {
  background-color: var(--ct-brand); color: #fff;
}
body:not(.high-contrast) .ui.primary.button:hover,
body:not(.high-contrast) .ui.green.button:hover { background-color: var(--ct-brand-dk); }
body:not(.high-contrast) #customDownloadArea .download-button { border-radius: var(--ct-radius-s); }

/* ============================================================
   12. 에디터 크롬
   ------------------------------------------------------------
   에디터 본체는 밝게 둡니다(오래 보는 작업 공간, 교실 프로젝터).
   블록 카테고리 색과 작업 공간 배경은 손대지 않습니다.
   메이크코드 청록(#028b9b)으로 되어 있던 강조만 브랜드색으로 바꿉니다.
   ============================================================ */

/* 실행 취소 / 다시 실행 / 확대 / 축소 */
body:not(.high-contrast) .editortools-btn,
body:not(.high-contrast) #editortools .ui.button.editortools-btn {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
  border-radius: var(--ct-radius-s);
}
body:not(.high-contrast) .editortools-btn:hover,
body:not(.high-contrast) #editortools .ui.button.editortools-btn:hover {
  background-color: var(--ct-brand-dk) !important;
}
body:not(.high-contrast) .editortools-btn[aria-disabled="true"],
body:not(.high-contrast) .editortools-btn:disabled {
  background-color: var(--ct-hair) !important;
  color: var(--ct-ink-3) !important;
}

/* 시뮬레이터가 놓이는 왼쪽 판 — 원본은 청록(#b1e3da)입니다.
   기기 본체를 진한 녹색으로 바꿨으니 판도 같은 계열의 옅은 톤으로 맞춥니다. */
body:not(.high-contrast) #editorSidebar,
body:not(.high-contrast) #githubEditor,
body:not(.high-contrast) #serialEditor,
body:not(.high-contrast) #serialConsole,
body:not(.high-contrast) #serialCsv {
  background-color: var(--ct-tint);
}

/* 시뮬레이터 툴바 (실행·다시 시작·디버그·소리·전체화면 등) */
body:not(.high-contrast) .play-button,
body:not(.high-contrast) .restart-button,
body:not(.high-contrast) .debug-button,
body:not(.high-contrast) .fullscreen-button,
body:not(.high-contrast) .mute-button,
body:not(.high-contrast) .screenshot-button,
body:not(.high-contrast) .keyboard-button,
body:not(.high-contrast) #editorSidebar .ui.button.icon {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
  border-radius: var(--ct-radius-s);
}
body:not(.high-contrast) .play-button:hover,
body:not(.high-contrast) .restart-button:hover,
body:not(.high-contrast) .debug-button:hover,
body:not(.high-contrast) .fullscreen-button:hover,
body:not(.high-contrast) .mute-button:hover,
body:not(.high-contrast) .screenshot-button:hover,
body:not(.high-contrast) .keyboard-button:hover,
body:not(.high-contrast) #editorSidebar .ui.button.icon:hover {
  background-color: var(--ct-brand-dk) !important;
}

/* 메이크코드 청록(#028b9b)이 남아 있던 나머지 자리들 —
   에디터 투어 말풍선, 애셋 팔레트 버튼, 안내 메시지 */
body:not(.high-contrast) .teaching-bubble,
body:not(.high-contrast) .common-button.teal,
body:not(.high-contrast) .ui.teal.inverted.segment {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
}
body:not(.high-contrast) .teaching-bubble {
  border-radius: var(--ct-radius);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.55);
}
body:not(.high-contrast) .teaching-bubble .common-button {
  border-radius: 6px;
  font-family: var(--ct-font);
  font-weight: 700;
}

/* 게임기 연결 모달 (custom.css에서 파랑으로 두었던 것) */
body:not(.high-contrast) .serial-modal-close-btn { background: var(--ct-brand) !important; }
body:not(.high-contrast) .serial-modal-close-btn:hover { background: var(--ct-brand-dk) !important; }
body:not(.high-contrast) .serial-modal-digit { border-bottom-color: var(--ct-brand) !important; }
body:not(.high-contrast) .serial-modal { border-radius: var(--ct-radius); }
body:not(.high-contrast) .serial-modal-header {
  font-family: var(--ct-font); font-weight: 800; letter-spacing: -.02em;
}

/* 작업 공간과 블록 모음(도구 상자)
   ------------------------------------------------------------
   원본은 크림색(#FEF3E0) 한 가지로 작업 공간과 도구 상자를 모두 칠해
   경계가 없고 색이 누렇게 뜹니다.
   작업 공간은 초록 기운의 아주 옅은 회색, 도구 상자는 흰색으로 나눠
   블록이 더 또렷하게 보이도록 합니다.
   블록 자체의 색은 건드리지 않습니다. */
body:not(.high-contrast) .blocklySvg,
body:not(.high-contrast) .blocklyBackground {
  background-color: var(--ct-paper) !important;
  fill: var(--ct-paper);
}
body:not(.high-contrast) .blocklyToolboxDiv {
  background-color: var(--ct-card) !important;
  border-right: 1px solid var(--ct-hair);
}
/* 카테고리 줄 — 선택/호버 표시를 브랜드 톤으로 */
body:not(.high-contrast) .blocklyTreeRow:hover {
  background-color: var(--ct-tint) !important;
}
#homescreen ~ * .blocklyTreeLabel,
.blocklyTreeLabel {
  font-family: var(--ct-font) !important;
  font-weight: 600;
}
/* 고른 카테고리 — 원본은 바탕을 카테고리 색으로 칠하고 글자를 흰색으로 뒀는데,
   도구 상자를 흰 바탕으로 바꾸면서 흰 글자만 남아 사라졌습니다. */
body:not(.high-contrast) .blocklyTreeRow.blocklyTreeSelected {
  background-color: var(--ct-tint) !important;
}
body:not(.high-contrast) .blocklyTreeRow.blocklyTreeSelected .blocklyTreeLabel {
  color: var(--ct-ink) !important;
  font-weight: 700;
}
/* 도구 상자 검색칸 */
body:not(.high-contrast) .blocklyToolboxDiv .ui.input input {
  border-radius: var(--ct-radius-s);
  border: 1px solid var(--ct-hair);
  font-family: var(--ct-font);
}
body:not(.high-contrast) .blocklyToolboxDiv .ui.input input:focus {
  border-color: var(--ct-brand);
  box-shadow: 0 0 0 3px rgba(23, 162, 74, .16);
}
/* 블록 서랍(플라이아웃) 배경 — 원본은 회색(#7f8c8d)이라
   블록 위에 먹구름이 낀 것처럼 보입니다. 인라인 스타일이라 !important가 필요합니다. */
body:not(.high-contrast) .blocklyFlyoutBackground {
  fill: var(--ct-paper) !important;
  fill-opacity: .98 !important;
}
body:not(.high-contrast) .monacoFlyout {
  background: rgba(247, 249, 247, .98) !important;
  border-right: 1px solid var(--ct-hair);
}
/* JavaScript 쪽 서랍도 마찬가지입니다. 바탕 위에 놓인 글자만 어둡게 하고,
   블록(.monacoDraggableBlock) 위의 흰 글자는 그대로 둡니다. */
body:not(.high-contrast) .monacoFlyout .monacoFlyoutLabelText {
  color: var(--ct-ink) !important;
  font-family: var(--ct-font);
  font-weight: 700;
}
body:not(.high-contrast) .monacoFlyout .monacoFlyoutLabelLine { border-color: var(--ct-hair) !important; }
body:not(.high-contrast) .monacoFlyout .monacoBlock .detail,
body:not(.high-contrast) .monacoFlyout .monacoBlock .detail .description,
body:not(.high-contrast) .monacoFlyout .monacoBlock .detail .signature,
body:not(.high-contrast) .monacoFlyout .monacoBlock .detail .params,
body:not(.high-contrast) .monacoFlyout .monacoBlock .detail .paramName,
body:not(.high-contrast) .monacoFlyout .monacoBlock .detail .paramDescription {
  color: var(--ct-ink-2) !important;
}
body:not(.high-contrast) .monacoFlyout .monacoBlock .blockHandle { color: var(--ct-ink-3) !important; }
/* 위에서 서랍 바탕을 밝게 바꿨더니, 어두운 바탕을 전제로 흰 글자였던
   것들이 보이지 않게 됐습니다. SVG라 color가 아니라 fill입니다.
   - .blocklyFlyoutLabelText : 서랍 맨 위의 '스프라이트' 같은 구분 제목
   - .blocklyFlyoutButton    : '변수 만들기...' 같은 서랍 안의 버튼
   블록에 얹힌 글자(.blocklyText)는 블록 색 위에 있으므로 건드리지 않습니다. */
body:not(.high-contrast) .blocklyFlyoutLabelText,
body:not(.high-contrast) .blocklyFlyoutLabelText:hover,
body:not(.high-contrast) text.blocklyFlyoutLabelText {
  fill: var(--ct-ink) !important;
  font-family: var(--ct-font) !important;
  font-weight: 700;
}
body:not(.high-contrast) .blocklyFlyoutLabelBackground { fill: var(--ct-hair) !important; }
body:not(.high-contrast) .blocklyFlyoutButton .blocklyText {
  fill: var(--ct-brand-dk) !important;
  font-family: var(--ct-font) !important;
  font-weight: 700;
}
/* 버튼 바탕색은 배경 rect가 아니라 그룹의 fill이 정합니다
   (.blocklyFlyoutButton{fill:transparent} / :hover{fill:#20aff7}). */
body:not(.high-contrast) .blocklyFlyoutButton { fill: #fff !important; }
body:not(.high-contrast) .blocklyFlyoutButton:hover { fill: var(--ct-tint) !important; }
body:not(.high-contrast) .blocklyFlyoutButtonBackground {
  stroke: var(--ct-brand) !important;
  stroke-width: 2px !important;
}

/* 하단 도구 막대 (다운로드 · 프로젝트 이름 · 저장) */
body:not(.high-contrast) #editortools {
  background-color: var(--ct-card) !important;
  border-top: 1px solid var(--ct-hair);
}
body:not(.high-contrast) #editortools .ui.item input,
body:not(.high-contrast) #editortools input[type="text"] {
  border: 1px solid var(--ct-hair);
  border-radius: var(--ct-radius-s) 0 0 var(--ct-radius-s);
  font-family: var(--ct-font);
  font-size: calc(.86rem * var(--ct-scale));
  padding: .55rem .75rem;
  color: var(--ct-ink);
}
body:not(.high-contrast) #editortools .ui.item input:focus {
  border-color: var(--ct-brand);
  box-shadow: 0 0 0 3px rgba(23, 162, 74, .16);
  outline: none;
}
#editortools .download-button {
  font-family: var(--ct-font);
  font-weight: 700;
  font-size: calc(.9rem * var(--ct-scale));
  letter-spacing: -.015em;
}

/* pxt 공용 버튼 — 공유하기 모달의 파란 버튼 등 */
body:not(.high-contrast) .common-button.primary {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
  border-radius: var(--ct-radius-s);
  font-family: var(--ct-font);
  font-weight: 700;
}
body:not(.high-contrast) .common-button.primary:hover {
  background-color: var(--ct-brand-dk) !important;
}
body:not(.high-contrast) .common-button.primary .common-button-label,
body:not(.high-contrast) .common-button.primary .common-button-flex { color: #fff !important; }
/* 글자만 있는 보조 버튼(썸네일 업데이트 등)의 파란 링크색 */
body:not(.high-contrast) .common-modal .common-button:not(.primary):not(.teal) .common-button-label {
  color: var(--ct-brand-dk) !important;
  font-family: var(--ct-font);
  font-weight: 600;
}

/* ------------------------------------------------------------
   '가이드 페이지' 진입점 정리
   ------------------------------------------------------------
   히어로 띠의 버튼과 홈 화면 입구 카드(.ct-entry) 두 곳으로만 들어갑니다.
   갤러리 제목줄에 붙어 있던 버튼은 입구 카드가 대신하므로 감춥니다.
   (도움말·설정 메뉴 쪽은 여전히 감춰 둔 상태입니다)
   ------------------------------------------------------------ */
#mainmenu [aria-label="가이드 페이지"],
#mainmenu .setting-docs-item[aria-label="가이드 페이지"],
#homescreen .gallerysegment h2 a[href*="guide"] { display: none !important; }

/* ------------------------------------------------------------
   사이드 문서 패널 (도움말 > 블록)
   iframe(/docs.html)이라 그쪽에도 design.css를 걸어 두었습니다.
   ------------------------------------------------------------ */
body.ui .ui.container,
#sidedocs, #sidedocsframe-wrapper { font-family: var(--ct-font); }
body:not(.high-contrast) #sidedocsbar { background: var(--ct-paper); }

/* '...' 더보기 메뉴 (장치 연결 / 하드웨어 선택 / 파일로 다운로드) */
body:not(.high-contrast) #editortools .ui.dropdown .menu,
body:not(.high-contrast) .ui.dropdown.button .menu {
  border-radius: var(--ct-radius);
  border: 1px solid var(--ct-hair);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.4);
  overflow: hidden;
  padding: .3rem 0;
}
body:not(.high-contrast) #editortools .ui.dropdown .menu .item {
  font-family: var(--ct-font);
  font-size: calc(.82rem * var(--ct-scale)) !important;
  padding: .55rem 1.1rem !important;
}
body:not(.high-contrast) #editortools .ui.dropdown .menu .item:hover {
  background: var(--ct-tint) !important;
  color: var(--ct-brand-dk) !important;
}

/* 하드웨어 선택 — D5는 감춥니다.
   Kitronik ARCADE Max가 같은 변형(hw---samd51)을 쓰기 때문에
   변형 자체를 숨기면 Kitronik까지 사라져서, 카드만 가립니다.
   N3와 micro:bit Game:Bit Shield는 설정에서 제거했습니다. */
.hardwaredialog .ui.card[aria-label="D5"] { display: none !important; }

/* 블록 / JavaScript / 애셋 탭 */
#maineditor .editor-menuitem,
.menu .item.editor-menuitem {
  font-family: var(--ct-font);
  font-weight: 700;
  letter-spacing: -.015em;
}
body:not(.high-contrast) .editor-menuitem .ui.item.link.active,
body:not(.high-contrast) .editor-menuitem .item.active {
  border-radius: var(--ct-radius-s) var(--ct-radius-s) 0 0;
}

/* 헤더 설정(톱니) 드롭다운 */
body:not(.high-contrast) #mainmenu .ui.dropdown .menu {
  border-radius: 0 0 var(--ct-radius) var(--ct-radius);
  border: 1px solid var(--ct-hair);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.4);
  overflow: hidden;
  padding: .3rem 0;
}
#mainmenu .ui.dropdown .menu .item {
  font-family: var(--ct-font);
  font-size: calc(.82rem * var(--ct-scale)) !important;
  font-weight: 500;
  padding: .55rem 1.1rem !important;
}
body:not(.high-contrast) #mainmenu .ui.dropdown .menu .item:hover {
  background: var(--ct-tint) !important;
  color: var(--ct-brand-dk) !important;
}
body:not(.high-contrast) #mainmenu .ui.dropdown .menu .divider {
  border-top-color: var(--ct-hair);
  margin: .3rem 0;
}

/* 프로젝트 이름 입력칸 */
body:not(.high-contrast) #editortools .ui.input input,
body:not(.high-contrast) .project-name-input input {
  border-radius: var(--ct-radius-s) 0 0 var(--ct-radius-s);
  font-family: var(--ct-font);
  border-color: var(--ct-hair);
}
body:not(.high-contrast) #editortools .ui.input input:focus,
body:not(.high-contrast) .project-name-input input:focus {
  border-color: var(--ct-brand);
  box-shadow: 0 0 0 3px rgba(23, 162, 74, .16);
}

/* ------------------------------------------------------------
   튜토리얼(따라해 보기) 패널
   학생이 가장 오래 보는 화면입니다. 원본은 메이크코드 청록(#028b9b)과
   민트(#ceff f5)를 쓰는데, 브랜드색으로 맞춥니다.
   지시문 안의 블록 이름 강조색(``||scene:...||``)은 블록 카테고리 색이므로
   절대 건드리지 않습니다.
   ------------------------------------------------------------ */

/* 다음 / 완료 버튼 */
body:not(.high-contrast) .tutorial-content .ui.button,
body:not(.high-contrast) .tutorial-callout-button {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
  border-radius: var(--ct-radius-s);
  font-family: var(--ct-font);
  font-weight: 700;
  letter-spacing: -.015em;
}
body:not(.high-contrast) .tutorial-content .ui.button:hover,
body:not(.high-contrast) .tutorial-callout-button:hover {
  background-color: var(--ct-brand-dk) !important;
}

/* '내 코드 바꾸기' (튜토리얼 패널 맨 아래)
   원본은 padding:0 인 파란 글자 링크입니다. 위의 규칙이 배경만 초록으로
   칠하는 바람에 글자에 딱 붙은 초록 덩어리가 되어 버렸습니다.
   여백을 준 테두리 버튼으로 되돌립니다. 이 버튼은 학생이 쓴 코드를
   지우는 동작이라, 스킬맵의 '재시작'과 같은 결로 조용하게 둡니다. */
body:not(.high-contrast) .tutorial-replace-code .tutorial-callout-button.ui.button {
  background-color: transparent !important;
  color: var(--ct-ink-2) !important;
  border: 1.5px solid var(--ct-hair) !important;
  border-radius: var(--ct-radius-s);
  padding: .55rem 1.1rem !important;
  margin: 0 0 1rem !important;
  font-weight: 600;
  line-height: 1.35;
}
body:not(.high-contrast) .tutorial-replace-code .tutorial-callout-button.ui.button:hover,
body:not(.high-contrast) .tutorial-replace-code .tutorial-callout-button.ui.button:focus {
  background-color: var(--ct-tint) !important;
  border-color: var(--ct-tint-line) !important;
  color: var(--ct-ink) !important;
}

/* 단계 표시 점과 좌우 화살표 */
body:not(.high-contrast) .common-button.circle-button.current {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
}
/* .common-button-flex는 모든 common-button 안에 들어가는 공용 래퍼입니다.
   여기에 전역으로 색을 주면 애셋 편집기의 '색' 버튼처럼
   초록 배경 위 초록 글자가 되어 글자가 사라집니다.
   단계 이동 버튼(.square-button) 안으로만 한정합니다. */
body:not(.high-contrast) .common-button.square-button,
body:not(.high-contrast) .common-button.square-button .common-button-flex,
body:not(.high-contrast) .common-button.square-button .icon {
  color: var(--ct-brand) !important;
}
/* 배경이 채워진 버튼의 글자는 항상 흰색 */
body:not(.high-contrast) .common-button.teal .common-button-flex,
body:not(.high-contrast) .common-button.teal .common-button-label,
body:not(.high-contrast) .common-button.teal .icon {
  color: #fff !important;
}

/* 지시문 앞의 동그란 아이콘 (:tree:, :mouse pointer: 등) */
body:not(.high-contrast) .tutorial-content .formatted-bullet .ui.icon {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
}

/* ~hint 접이식 설명 상자 — 원본은 민트(#cefff5) */
body:not(.high-contrast) .tutorial-content details {
  background: var(--ct-tint) !important;
  border: 1px solid var(--ct-tint-line);
  border-radius: var(--ct-radius-s);
  overflow: hidden;
}
body:not(.high-contrast) .tutorial-content details > summary {
  font-family: var(--ct-font);
  font-weight: 700;
  color: var(--ct-brand-dk);
  padding: .5rem .7rem;
  cursor: pointer;
}

/* 단계 점이 있는 위쪽 줄 — 본문과 경계가 없어 붙어 보였습니다 */
body:not(.high-contrast) .tutorial-step-counter {
  border-bottom: 1px solid var(--ct-hair);
  background: var(--ct-card);
}

/* 활동 이름 + 단계 수 줄
   원본은 둘이 같은 크기·색이라 무엇이 제목인지 읽히지 않았습니다. */
.tutorial-content-bkg > .tutorial-step-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ct-hair);
  margin-bottom: .9rem;
}
body:not(.high-contrast) .tutorial-step-label .tutorial-step-title {
  font-family: var(--ct-font);
  font-weight: 700;
  font-size: calc(.8rem * var(--ct-scale));
  color: var(--ct-ink-2);
  letter-spacing: -.015em;
}
body:not(.high-contrast) .tutorial-step-label .tutorial-step-number {
  font-family: var(--ct-mono);
  font-size: calc(.72rem * var(--ct-scale));
  color: var(--ct-ink-3);
  white-space: nowrap;
}

/* '다음' 줄 — 본문과 붙어 있어 어디까지가 지시문인지 흐렸습니다 */
body:not(.high-contrast) .tutorial-controls {
  border-top: 1px solid var(--ct-hair);
  padding-top: .9rem;
  margin-top: .6rem;
}

/* 지시문 스크롤 막대 — 기본 막대가 두꺼워 좁은 패널에서 눈에 거슬립니다 */
body:not(.high-contrast) .tutorial-content-bkg { scrollbar-width: thin; scrollbar-color: var(--ct-hair) transparent; }
body:not(.high-contrast) .tutorial-content-bkg::-webkit-scrollbar { width: 8px; }
body:not(.high-contrast) .tutorial-content-bkg::-webkit-scrollbar-thumb {
  background: var(--ct-hair); border-radius: 4px;
}
body:not(.high-contrast) .tutorial-content-bkg::-webkit-scrollbar-thumb:hover { background: var(--ct-ink-3); }
body:not(.high-contrast) .tutorial-content-bkg::-webkit-scrollbar-track { background: transparent; }

/* 지시문 본문 — 한국어 가독성 */
.tutorial-content {
  font-family: var(--ct-font);
  word-break: keep-all;
  line-height: 1.7;
}
/* 지시문 안의 단계 제목(## 배경 설정 등) */
body:not(.high-contrast) .tutorial-step-content > h1:first-child,
body:not(.high-contrast) .tutorial-step-content > h2:first-child,
body:not(.high-contrast) .tutorial-step-content > h3:first-child {
  font-size: calc(1.05rem * var(--ct-scale));
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ct-ink);
  margin: 0 0 .8rem;
}
.tutorial-content .tutorial-step-title,
.tutorial-content h1, .tutorial-content h2, .tutorial-content h3 {
  font-weight: 800;
  letter-spacing: -.022em;
}

/* ============================================================
   13. 모달 · 대화상자
   ------------------------------------------------------------
   모달은 어두운 홈 위에도, 밝은 에디터 위에도 뜹니다.
   그래서 카드 자체는 밝게 두고 딤(뒷배경)만 어둡게 합니다.
   한쪽 테마에 맞추면 반대쪽에서 반드시 어색해집니다.
   ============================================================ */

/* 딤 — 원본은 회색 반투명(rgba(127,140,141,.85))이라
   어두운 홈 위에 뜨면 화면이 뿌옇게 바래 보입니다. */
body:not(.high-contrast) .ui.page.dimmer,
body:not(.high-contrast) .ui.dimmer.modals,
body:not(.high-contrast) .ReactModal__Overlay {
  background: rgba(5, 13, 9, .8);
  backdrop-filter: blur(3px);
}

body:not(.high-contrast) .ui.modal {
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55),
              0 0 0 1px rgba(16, 26, 20, .08);
  overflow: hidden;
}

/* 머리말 — 브랜드 그린 얇은 띠로 시작 */
body:not(.high-contrast) .ui.modal > .header {
  position: relative;
  background: var(--ct-card);
  border-bottom: 1px solid var(--ct-hair);
  padding: 1.15rem 1.4rem 1rem !important;
}
body:not(.high-contrast) .ui.modal > .header::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background-image: linear-gradient(90deg, var(--ct-brand) 50%, var(--ct-brand-deep) 50%);
  background-size: 8px 3px;
}
.ui.modal > .header .header-title,
.ui.modal > .header {
  font-size: calc(1.05rem * var(--ct-scale));
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--ct-ink);
}

.ui.modal > .content { padding: 1.3rem 1.4rem !important; }
body:not(.high-contrast) .ui.modal > .content { color: var(--ct-ink-2); }
.ui.modal > .content p { font-size: calc(.88rem * var(--ct-scale)); line-height: 1.65; }

body:not(.high-contrast) .ui.modal > .actions {
  background: var(--ct-paper);
  border-top: 1px solid var(--ct-hair);
  padding: .9rem 1.4rem !important;
}

/* 닫기 — 검은 원이 너무 무겁습니다 */
body:not(.high-contrast) .ui.modal > .closeIcon .icon {
  color: var(--ct-ink-3);
  background: transparent;
  font-size: 1.3rem;
  transition: color .14s ease;
}
body:not(.high-contrast) .ui.modal > .closeIcon:hover .icon { color: var(--ct-ink); }

/* 입력칸 */
body:not(.high-contrast) .ui.modal .ui.input input,
body:not(.high-contrast) .ui.form input[type="text"] {
  border: 1.5px solid var(--ct-hair);
  border-radius: var(--ct-radius-s);
  font-family: var(--ct-font);
  font-size: calc(.92rem * var(--ct-scale));
  padding: .6rem .8rem;
  color: var(--ct-ink);
}
body:not(.high-contrast) .ui.modal .ui.input input:focus,
body:not(.high-contrast) .ui.form input[type="text"]:focus {
  border-color: var(--ct-brand);
  box-shadow: 0 0 0 3px rgba(23, 162, 74, .16);
  outline: none;
}

/* 버튼 — 확인 계열은 브랜드색, 취소 계열은 중립 */
.ui.modal .ui.button {
  font-family: var(--ct-font);
  font-size: calc(.86rem * var(--ct-scale));
  font-weight: 700;
  letter-spacing: -.015em;
  border-radius: var(--ct-radius-s);
  padding: .62rem 1.15rem;
}
body:not(.high-contrast) .ui.modal .ui.button.positive,
body:not(.high-contrast) .ui.modal .ui.button.approve,
body:not(.high-contrast) .ui.modal .ui.button.primary {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body:not(.high-contrast) .ui.modal .ui.button.positive:hover,
body:not(.high-contrast) .ui.modal .ui.button.approve:hover,
body:not(.high-contrast) .ui.modal .ui.button.primary:hover {
  background-color: var(--ct-brand-dk) !important;
}
body:not(.high-contrast) .ui.modal .ui.button.cancel,
body:not(.high-contrast) .ui.modal .ui.button.negative {
  background-color: var(--ct-card) !important;
  color: var(--ct-ink-2) !important;
  box-shadow: inset 0 0 0 1.5px var(--ct-hair) !important;
}
body:not(.high-contrast) .ui.modal .ui.button.cancel:hover,
body:not(.high-contrast) .ui.modal .ui.button.negative:hover {
  color: var(--ct-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--ct-ink-3) !important;
}

/* 펼침 링크 (코드 옵션 등) */
body:not(.high-contrast) .ui.modal .expandable-menu .menu-header {
  color: var(--ct-brand-dk);
  font-weight: 600;
  font-size: calc(.84rem * var(--ct-scale));
}

/* ------------------------------------------------------------
   pxt 자체 모달(.common-modal) — 애셋 편집기의 '새 애셋 생성' 등
   semantic의 .ui.modal과 다른 컴포넌트라 규칙을 따로 씁니다.
   ------------------------------------------------------------ */
body:not(.high-contrast) .common-modal-container {
  background: rgba(5, 13, 9, .8);
  backdrop-filter: blur(3px);
}
body:not(.high-contrast) .common-modal {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55);
}
body:not(.high-contrast) .common-modal-header {
  position: relative;
  font-family: var(--ct-font);
  font-weight: 800;
  letter-spacing: -.022em;
  font-size: calc(1.05rem * var(--ct-scale));
  border-bottom: 1px solid var(--ct-hair);
}
body:not(.high-contrast) .common-modal-header::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background-image: linear-gradient(90deg, var(--ct-brand) 50%, var(--ct-brand-deep) 50%);
  background-size: 8px 3px;
}
body:not(.high-contrast) .common-modal-body { font-family: var(--ct-font); }

/* 전체 화면 대화상자 — 확장 프로그램 / 버전 기록 / 실험 등
   원본은 머리말이 메이크코드 파랑(#20aff7), 본문이 크림색(#FEF3E0)입니다. */
body:not(.high-contrast) .common-modal-container.fullscreen .common-modal-header {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
}
body:not(.high-contrast) .common-modal-container.fullscreen .common-modal-header::before { display: none; }
body:not(.high-contrast) .common-modal-container.fullscreen .common-modal-header .common-button,
body:not(.high-contrast) .common-modal-container.fullscreen .common-modal-header .common-button-label,
body:not(.high-contrast) .common-modal-container.fullscreen .common-modal-header i { color: #fff !important; }
body:not(.high-contrast) .common-modal-container.fullscreen .common-modal-body {
  background-color: var(--ct-paper) !important;
}
body:not(.high-contrast) .common-modal-container.fullscreen .common-modal {
  border-radius: 0;
  box-shadow: none;
}
/* 확장 프로그램 카드 */
body:not(.high-contrast) .extensions-browser .ui.card {
  border-radius: var(--ct-radius);
  border: 1px solid var(--ct-hair) !important;
  box-shadow: none;
}
body:not(.high-contrast) .extensions-browser .ui.card:hover {
  border-color: var(--ct-brand) !important;
  box-shadow: 0 10px 22px -14px rgba(16,60,32,.4);
}
/* 분류 칩 */
body:not(.high-contrast) .extensions-browser .extension-tags .common-button,
body:not(.high-contrast) .extensions-browser .tag-button {
  border-radius: 999px;
  font-family: var(--ct-font);
  font-weight: 600;
}

/* 애셋 유형 타일 (이미지 / 타일 / 타일맵 / 애니메이션 / 노래) */
body:not(.high-contrast) .asset-editor-create-button {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
  border-radius: var(--ct-radius);
  font-family: var(--ct-font);
  font-weight: 700;
  transition: transform .14s ease, background-color .14s ease;
}
body:not(.high-contrast) .asset-editor-create-button:hover {
  background-color: var(--ct-brand-dk) !important;
  transform: translateY(-2px);
}
body:not(.high-contrast) .asset-editor-create-button .common-button-flex,
body:not(.high-contrast) .asset-editor-create-button .common-button-label,
body:not(.high-contrast) .asset-editor-create-button .icon,
body:not(.high-contrast) .asset-editor-create-button i { color: #fff !important; }

/* ------------------------------------------------------------
   이미지 · 타일맵 편집기 (도트 찍는 화면)
   ------------------------------------------------------------
   ⚠ 팔레트 16색과 캔버스 주변의 중립 회색은 절대 건드리지 않습니다.
   캔버스 둘레에 색을 깔면 아이가 고른 색이 다르게 보입니다.
   여기서는 상단 바와 완료 버튼 같은 '크롬'만 브랜드색으로 맞춥니다.
   ------------------------------------------------------------ */
body:not(.high-contrast) .gallery-editor-header {
  background-color: var(--ct-brand) !important;
}
body:not(.high-contrast) .image-editor-confirm {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
  border-radius: var(--ct-radius-s);
  font-family: var(--ct-font);
  font-weight: 700;
}
body:not(.high-contrast) .image-editor-confirm:hover {
  background-color: var(--ct-brand-dk) !important;
}
.image-editor-wrapper,
.gallery-editor-header { font-family: var(--ct-font); }

/* 안내 토스트 — 어두운 홈 위에 흰 상자가 뜨면 튑니다 */
body:not(.high-contrast) .iziToast {
  background: var(--ct-surf) !important;
  border: 1px solid var(--ct-line) !important;
  border-radius: var(--ct-radius) !important;
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.7) !important;
}
body:not(.high-contrast) .iziToast .iziToast-title,
body:not(.high-contrast) .iziToast .iziToast-message { color: var(--ct-dim) !important; }
body:not(.high-contrast) .iziToast .iziToast-message { font-size: calc(.8rem * var(--ct-scale)) !important; }
body:not(.high-contrast) .iziToast > .iziToast-progressbar > div { background: var(--ct-brand-lt) !important; }

/* ============================================================
   14. 스킬맵 (skillmap.html)
   ------------------------------------------------------------
   별도 앱이라 자체 번들 CSS를 씁니다. skillmap.html에서
   번들 CSS 뒤에 design.css를 걸어 색만 덮어씁니다.
   지도 그림(책 더미, 비둘기 등)은 학습 콘텐츠라 건드리지 않습니다.
   ============================================================ */

/* 스킬맵은 색을 CSS 변수로 정합니다.
   .app-container.arcade가 --tertiary-color: #e77038(주황)로 헤더 색을 잡고 있어
   규칙을 덮기보다 변수를 덮는 쪽이 맞습니다. */
body:not(.high-contrast) .app-container.arcade {
  --tertiary-color: #17A24A;
}
body:not(.high-contrast) .common-menubar.header,
body:not(.high-contrast) .skillmap-header {
  background-color: var(--ct-brand) !important;
}
/* 오른쪽 정보 패널 — 원본은 크림색(#fdf3e0) */
body:not(.high-contrast) .info-panel {
  background-color: var(--ct-card) !important;
  border-left: 1px solid var(--ct-hair);
  font-family: var(--ct-font);
}
body:not(.high-contrast) .info-panel-image {
  background-color: var(--ct-brand-deep) !important;
}
.info-panel h1, .info-panel h2, .info-panel h3, .info-panel .info-panel-title {
  font-family: var(--ct-font);
  font-weight: 800;
  letter-spacing: -.022em;
  word-break: keep-all;
}
body:not(.high-contrast) .info-panel .info-panel-description,
body:not(.high-contrast) .info-panel p { color: var(--ct-ink-2); line-height: 1.7; }
body:not(.high-contrast) .info-panel a { color: var(--ct-brand-dk); font-weight: 600; }

/* 지도 바탕 — 원본은 크림색 */
body:not(.high-contrast) .skillmap-container,
body:not(.high-contrast) #root > .skill-map,
body:not(.high-contrast) .skillmap-page { background-color: var(--ct-paper) !important; }

/* 버튼 */
body:not(.high-contrast) .skillmap-container .common-button.primary,
body:not(.high-contrast) .info-panel .common-button.primary {
  background-color: var(--ct-brand) !important;
  color: #fff !important;
  border-radius: var(--ct-radius-s);
}

/* 활동 버튼의 위계
   ------------------------------------------------------------
   진행 중인 활동에는 '계속'과 '재시작'이 함께 뜨는데
   원본은 '계속'이 굵기 400, '재시작'이 700이라 중요도와 반대였습니다.
   게다가 둘 다 초록으로 칠해져 구분이 되지 않았습니다.
   '계속'을 채운 버튼으로, '재시작'은 테두리만 있는 보조 버튼으로 나눕니다.
   재시작은 작성한 코드가 지워지는 동작이라 눈에 덜 띄어야 맞습니다. */
body:not(.high-contrast) .info-panel .common-button.teal {
  background-color: var(--ct-brand) !important;
  border: 1px solid var(--ct-brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
body:not(.high-contrast) .info-panel .common-button.teal:hover {
  background-color: var(--ct-brand-dk) !important;
  border-color: var(--ct-brand-dk) !important;
}
body:not(.high-contrast) .info-panel .common-button.primary.inverted {
  background-color: transparent !important;
  border: 1.5px solid var(--ct-hair) !important;
  color: var(--ct-ink-2) !important;
  font-weight: 600 !important;
}
body:not(.high-contrast) .info-panel .common-button.primary.inverted:hover {
  border-color: var(--ct-ink-3) !important;
  color: var(--ct-ink) !important;
  background-color: transparent !important;
}
body:not(.high-contrast) .info-panel .common-button.teal .common-button-label,
body:not(.high-contrast) .info-panel .common-button.teal .common-button-flex {
  font-weight: 700 !important;
  color: #fff !important;
}
/* 앞서 '.common-button.primary의 글자는 흰색' 규칙을 넣어 두었는데,
   테두리만 있는 버튼에도 적용돼 글자가 흰 배경에 묻혀 사라졌습니다.
   여기서 되돌립니다. */
body:not(.high-contrast) .info-panel .common-button.primary.inverted .common-button-label,
body:not(.high-contrast) .info-panel .common-button.primary.inverted .common-button-flex,
body:not(.high-contrast) .info-panel .common-button.primary.inverted i {
  font-weight: 600 !important;
  color: var(--ct-ink-2) !important;
}
body:not(.high-contrast) .info-panel .common-button.primary.inverted:hover .common-button-label,
body:not(.high-contrast) .info-panel .common-button.primary.inverted:hover .common-button-flex {
  color: var(--ct-ink) !important;
}

/* 확인 대화상자(예: '활동을 다시 시작하시겠습니까?')
   ------------------------------------------------------------
   취소와 실행 버튼이 클래스까지 완전히 같아(common-button primary inverted)
   둘 다 초록으로 칠해졌습니다. 어느 쪽이 되돌리는 쪽인지 알 수 없습니다.
   클래스로는 구분할 수 없어 '버튼이 정확히 2개일 때 첫 번째'를 취소로 봅니다.
   pxt의 확인 대화상자는 취소가 항상 앞에 옵니다. */
body:not(.high-contrast) .common-modal-footer .common-button:first-child:nth-last-child(2),
body:not(.high-contrast) .common-modal .common-button.cancel {
  background-color: transparent !important;
  border: 1.5px solid var(--ct-hair) !important;
  font-weight: 600 !important;
}
body:not(.high-contrast) .common-modal-footer .common-button:first-child:nth-last-child(2) .common-button-label,
body:not(.high-contrast) .common-modal-footer .common-button:first-child:nth-last-child(2) .common-button-flex,
body:not(.high-contrast) .common-modal .common-button.cancel .common-button-label {
  color: var(--ct-ink-2) !important;
  font-weight: 600 !important;
}
body:not(.high-contrast) .common-modal-footer .common-button:first-child:nth-last-child(2):hover {
  border-color: var(--ct-ink-3) !important;
  background-color: transparent !important;
}
body:not(.high-contrast) .common-modal-footer .common-button:first-child:nth-last-child(2):hover .common-button-label {
  color: var(--ct-ink) !important;
}

/* 활동을 시작할 때 뜨는 로딩 화면
   원본은 밝은 회색 바탕에 자홍색(#aa278f) 진행 막대라
   사이트의 로딩 화면과 완전히 따로 놀았습니다.
   첫 진입 로딩(#loading)과 같은 결로 맞춥니다. */
body:not(.high-contrast) .makecode-frame-loader {
  background-color: var(--ct-void) !important;
  gap: .9rem;
}
/* 로고가 200x200이라 로딩 화면을 다 잡아먹었습니다. (이미지 자체는
   번들에서 옛 로고를 가리키고 있어 새 마크로 바꿨습니다) */
.makecode-frame-loader img {
  width: 5.5rem !important;
  height: 5.5rem !important;
  animation: ct-loader-pulse 1.4s ease-in-out infinite;
}
@keyframes ct-loader-pulse {
  0%, 100% { opacity: .45; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .makecode-frame-loader img { animation: none; opacity: 1; }
}
body:not(.high-contrast) .makecode-frame-loader-bar {
  --progress-bar-filled-color: var(--ct-brand-lt);
  --progress-bar-unfilled-color: var(--ct-surf);
  --progress-bar-border-color: var(--ct-line);
  height: .5rem;
  width: 13rem;
}
body:not(.high-contrast) .makecode-frame-loader-bar progress.common-progressbar {
  border-radius: 3px;
  border-width: 1px;
  height: .5rem;
}
body:not(.high-contrast) .makecode-frame-loader-text {
  color: var(--ct-dim-2);
  font-family: var(--ct-font);
  font-size: .85rem;
}

/* ------------------------------------------------------------
   원격 게임기 안내 (휴대폰 홈 화면에만 뜹니다)
   ------------------------------------------------------------ */
body:not(.high-contrast) #homescreen .ct-receiver-cta {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.15rem 1.25rem;
  border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius);
  background:
    linear-gradient(135deg, rgba(23,162,74,.16), transparent 60%),
    var(--ct-surf);
}
#homescreen .ct-receiver-cta-text strong {
  display: block;
  margin-bottom: .3rem;
  font-size: calc(1rem * var(--ct-scale));
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ct-dim);
}
#homescreen .ct-receiver-cta-text p {
  margin: 0;
  font-size: calc(.82rem * var(--ct-scale));
  line-height: 1.65;
  color: var(--ct-dim-2);
}
body:not(.high-contrast) #homescreen .ct-receiver-cta-btn {
  display: block;
  padding: .8rem 1rem;
  border-radius: var(--ct-radius-s);
  background: var(--ct-brand);
  color: #fff !important;
  font-size: calc(.9rem * var(--ct-scale));
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
body:not(.high-contrast) #homescreen .ct-receiver-cta-btn:hover {
  background: var(--ct-brand-dk);
}

/* ============================================================
   15. 단독 페이지 (개인정보처리방침 / 이용약관)
   ============================================================ */

.ct-doc {
  margin: 0; background: var(--ct-paper); color: var(--ct-ink);
  font-family: var(--ct-font); font-size: 16px; line-height: 1.75; word-break: keep-all;
}
.ct-doc .ct-head { background: var(--ct-brand); color: #fff; position: relative; }
.ct-doc .ct-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background-image: linear-gradient(90deg, var(--ct-brand-dark) 50%, transparent 50%);
  background-size: 8px 4px;
}
.ct-doc .ct-head-in {
  max-width: 760px; margin: 0 auto; padding: 18px 24px 22px;
  display: flex; align-items: center; gap: 10px;
}
.ct-doc .ct-head-in img { width: 30px; height: 30px; display: block; }
.ct-doc .ct-head-in a {
  color: #fff; text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: -.018em;
}
.ct-doc main { max-width: 760px; margin: 0 auto; padding: 44px 24px 96px; }
.ct-doc h1 {
  font-size: clamp(28px, 5vw, 38px); line-height: 1.25; letter-spacing: -.025em;
  font-weight: 800; margin: 0 0 10px; text-wrap: balance;
}
.ct-doc .ct-updated { font-family: var(--ct-mono); font-size: 12.5px; color: var(--ct-ink-3); margin: 0 0 36px; }
.ct-doc h2 {
  font-size: 20px; font-weight: 800; letter-spacing: -.018em;
  margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--ct-hair); text-wrap: balance;
}
.ct-doc h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.ct-doc p, .ct-doc li { color: var(--ct-ink-2); }
.ct-doc p { margin: 0 0 14px; }
.ct-doc ul, .ct-doc ol { margin: 0 0 16px; padding-left: 1.25em; }
.ct-doc li { margin-bottom: 6px; }
.ct-doc strong { color: var(--ct-ink); font-weight: 700; }
.ct-doc a { color: var(--ct-brand-dk); }
.ct-doc .ct-note {
  background: var(--ct-tint); border: 1px solid var(--ct-tint-line);
  border-left: 4px solid var(--ct-brand); border-radius: var(--ct-radius-s);
  padding: 16px 20px; margin: 0 0 20px;
}
.ct-doc .ct-note p:last-child { margin-bottom: 0; }
.ct-doc .ct-tablewrap {
  overflow-x: auto; border: 1px solid var(--ct-hair);
  border-radius: var(--ct-radius-s); background: var(--ct-card); margin: 0 0 20px;
}
.ct-doc table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
.ct-doc th, .ct-doc td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--ct-hair);
  vertical-align: top; color: var(--ct-ink-2);
}
.ct-doc th {
  background: var(--ct-tint); color: var(--ct-ink);
  font-weight: 700; font-size: 13px; white-space: nowrap;
}
.ct-doc tbody tr:last-child td { border-bottom: 0; }
.ct-doc .ct-foot {
  border-top: 1px solid var(--ct-hair); margin-top: 56px; padding-top: 22px;
  font-size: 13.5px; color: var(--ct-ink-3);
}
.ct-doc .ct-foot a { color: var(--ct-ink-2); }