/* ========================================================
   GraPen 온라인 강의실 스타일시트
   디자인 시스템: Ash Purple Theme & Clean Rounded Layout
   ======================================================== */

:root {
  /* 그라데이션 및 메인 보라색 */
  --purple-grape: #300038;
  /* 로고 시작: 짙은 과일 포도 보라색 */
  --purple-mid: #702380;
  /* 중간 보라 */
  --purple-point: #6b26b8;
  /* 선택 메뉴 글자색 */
  --ash-purple-logo: #d1bfdf;
  /* 로고 끝: 밝은 애쉬 퍼플 */

  /* 애쉬 퍼플 (Ash Purple) 팔레트 */
  --ash-bg-app: #faf8fd;
  /* 전체 배경 */
  --ash-card-outer: #f6f3fb;
  /* 외곽 큰 둥근 박스 배경 */
  --ash-card-outer-border: #ded4ec;
  /* 외곽 박스 테두리 */

  --ash-box-top-bg: #ece5f6;
  /* 상단 칸 배경 */
  --ash-box-top-border: #d7c9ea;
  /* 상단 칸 테두리 */

  --ash-box-bottom-bg: #f3eef9;
  /* 하단 칸 배경 */
  --ash-box-bottom-border: #dcd0ef;
  /* 하단 칸 테두리 */

  --ash-inner-card: #ffffff;
  /* 카드 내부 화이트 강조 */
  --ash-tag-bg: #e5dbf4;
  /* 태그 배지 */
  --ash-text-dark: #312144;
  /* 진한 텍스트 */
  --ash-text-sub: #78698c;
  /* 보조 텍스트 */

  /* 구분선 및 기본 텍스트 */
  --very-light-gray-divider: #e9e9ee;
  /* 엄청 연한 회색 수직 선 */
  --text-unselected-gray: #93939e;
  /* 선택 안 된 메뉴 회색 */

  /* 폰트 */
  --font-logo: 'Outfit', sans-serif;
  --font-main: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-code: 'JetBrains Mono', monospace;
}

/* 0. 기본 리셋 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: var(--font-main);
  background-color: var(--ash-bg-app);
  color: var(--ash-text-dark);
  overflow-x: hidden;
  user-select: none;
}

/* ========================================================
   1. 전체 컨테이너 (좌우 2분할 구조)
   ======================================================== */
.grapen-app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: var(--ash-bg-app);
  overflow: hidden;
}

/* ========================================================
   2. 왼쪽 사이드바 영역
   ======================================================== */
.grapen-sidebar {
  width: 270px;
  min-width: 270px;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 32px 24px 24px 30px;
  z-index: 10;
}

/* (1) 좌측 상단 로고: GraPen */
/* 진한 보라색에서 시작해서 오른쪽으로 갈수록 애쉬 퍼플로 마무리되는 그라데이션 */
.logo-area {
  margin-bottom: 42px;
}

.grapen-logo {
  font-family: var(--font-logo);
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;

  /* 글자 그라데이션: 짙은 과일 포도 보라색(100%) -> 밝고 세련된 애쉬 퍼플(0%) 극명한 변화 */
  background: linear-gradient(90deg,
      #300038 0%,
      #4a0658 22%,
      #702380 48%,
      #9d5cae 74%,
      #d1bfdf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  transition: opacity 0.2s ease, transform 0.2s ease;
}

.grapen-logo:hover {
  opacity: 0.92;
  transform: scale(1.02);
}

/* (2) 메뉴 목록 네비게이션 */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

/* 커스텀 스크롤바 */
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: #e2e0e8;
  border-radius: 4px;
}

.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 메뉴 항목 공통 */
.nav-item {
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.nav-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
  transition: all 0.2s ease;
}

/* 선택 안 된 경우: 회색 글자 */
.nav-text {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-unselected-gray);
  letter-spacing: -0.01em;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

.nav-item-header:hover .nav-text {
  color: #665a78;
}

/* 선택된 경우: 밑줄과 함께 보라색 */
.nav-item.selected>.nav-item-header .nav-text {
  color: var(--purple-point);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--purple-point);
}

/* 드롭다운 화살표 */
.dropdown-chevron {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-unselected-gray);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.dropdown-chevron svg {
  width: 100%;
  height: 100%;
}

.nav-item.selected .dropdown-chevron {
  color: var(--purple-point);
}

.nav-item.open .dropdown-chevron {
  transform: rotate(180deg);
}

/* 하위 차시 목록 (드롭다운) */
.sub-lesson-menu {
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 6px 16px;
  animation: fadeInSubLesson 0.2s ease;
}

.nav-item.open .sub-lesson-menu {
  display: flex;
}

@keyframes fadeInSubLesson {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sub-lesson-item {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-unselected-gray);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.18s ease;
}

.sub-lesson-item:hover {
  color: #55446c;
  background-color: #f7f4fc;
}

/* 하위 차시가 선택되었을 때의 스타일 */
.sub-lesson-item.active-sub {
  color: var(--purple-point);
  font-weight: 700;
  background-color: #f0eaf8;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.8px;
  text-decoration-color: var(--purple-point);
}

/* ========================================================
   2-B. 2단계 및 3단계 중첩 드롭다운 (컴활 2급 특화)
   ======================================================== */
.nested-category-list {
  gap: 6px;
}

.nested-category-item {
  display: flex;
  flex-direction: column;
}

.nested-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  user-select: none;
  transition: all 0.18s ease;
}

.nested-category-header:hover {
  background-color: #f7f3fb;
}

.nested-category-text {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-unselected-gray);
  letter-spacing: -0.01em;
  transition: color 0.18s ease;
}

.nested-category-header:hover .nested-category-text {
  color: #55446c;
}

/* 2단계 작업 카테고리 선택 시: 보라색 + 밑줄 */
.nested-category-item.selected-category>.nested-category-header .nested-category-text {
  color: var(--purple-point);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--purple-point);
}

.nested-chevron {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-unselected-gray);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease;
}

.nested-chevron svg {
  width: 100%;
  height: 100%;
}

.nested-category-item.selected-category .nested-chevron {
  color: var(--purple-point);
}

.nested-category-item.open-nested .nested-chevron {
  transform: rotate(180deg);
}

/* 3단계 세부 실습 항목 리스트 */
.nested-sub-list {
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 5px 0 5px 12px;
  border-left: 1.5px solid #eae3f4;
  margin-left: 12px;
  margin-top: 2px;
  animation: fadeInSubLesson 0.2s ease;
}

.nested-category-item.open-nested .nested-sub-list {
  display: flex;
}

.nested-leaf-item {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-unselected-gray);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  transition: all 0.15s ease;
  letter-spacing: -0.01em;
}

.nested-leaf-item:hover {
  color: #4c3763;
  background-color: #f7f4fc;
}

/* 3단계 세부 항목 선택 시: 보라색 + 밑줄 */
.nested-leaf-item.selected-leaf {
  color: var(--purple-point);
  font-weight: 700;
  background-color: #f0eaf8;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.8px;
  text-decoration-color: var(--purple-point);
}

/* 사이드바 하단 정보 */
.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--very-light-gray-divider);
}

.sidebar-tip {
  font-size: 0.76rem;
  color: #a49cb0;
  line-height: 1.4;
}

/* ========================================================
   3. 엄청 연한 회색 수직 선 (Vertical Divider)
   ======================================================== */
.vertical-divider {
  width: 1px;
  min-width: 1px;
  height: 100%;
  background-color: var(--very-light-gray-divider);
}

/* ========================================================
   4. 오른쪽 공간 (사용자 스케치 반영 레이아웃)
   ======================================================== */
.grapen-main-content {
  flex: 1;
  height: 100%;
  padding: 24px 28px;
  display: flex;
  overflow: hidden;
}

/* [바깥 큰 둥근 외곽 박스 - 스케치의 가장 바깥 라운드 프레임] */
.ash-purple-outer-card {
  flex: 1;
  height: 100%;
  background: var(--ash-card-outer);
  border: 2px solid var(--ash-card-outer-border);
  border-radius: 30px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 36px rgba(92, 60, 128, 0.05);
  overflow: hidden;
}

/* --------------------------------------------------------
   [위쪽 칸] 가로로 긴 둥근 상단 칸 (헤더 / 정보 공간)
   -------------------------------------------------------- */
.ash-purple-top-box {
  height: 72px;
  min-height: 72px;
  background: var(--ash-box-top-bg);
  border: 1.5px solid var(--ash-box-top-border);
  border-radius: 18px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(115, 85, 150, 0.04);
  transition: all 0.25s ease;
}

.ash-purple-top-box:hover {
  border-color: #cbbae1;
}

.box-inner-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.active-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  margin-right: 16px;
}

.active-badge {
  font-size: 0.76rem;
  font-weight: 700;
  background: #ffffff;
  color: var(--purple-point);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--ash-box-top-border);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.active-subject-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ash-text-dark);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-status-group {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.65);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(203, 186, 225, 0.5);
  box-shadow: 0 2px 8px rgba(104, 42, 169, 0.04);
  backdrop-filter: blur(4px);
  z-index: 2;
  flex-shrink: 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--purple-point);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(112, 35, 128, 0.25);
  animation: pulseStatusDot 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseStatusDot {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(112, 35, 128, 0.22);
  }

  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 5px rgba(112, 35, 128, 0.38);
  }
}

.status-time {
  font-family: var(--font-code);
  font-size: 0.88rem;
  font-weight: 600;
  color: #4b3764;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --------------------------------------------------------
   [아래쪽 칸] 넓은 둥근 메인 칸 (화이트보드 / 본문 컨텐츠 공간)
   -------------------------------------------------------- */
.ash-purple-bottom-box {
  flex: 1;
  background: var(--ash-box-bottom-bg);
  border: 1.5px solid var(--ash-box-bottom-border);
  border-radius: 22px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 2px 6px rgba(115, 85, 150, 0.02);
  overflow: hidden;
  position: relative;
  transition: all 0.25s ease;
}

.ash-purple-bottom-box:hover {
  border-color: #d0c2e6;
}

.box-inner-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 컨텐츠 프리뷰 / 안내 카드 (중앙 메인 컨테이너) */
.content-placeholder-area {
  flex: 1;
  height: 100%;
  background: #ffffff;
  border: 1.5px solid #e7ddf5;
  border-radius: 18px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 8px 12px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  position: relative;
  box-shadow: 0 4px 18px rgba(104, 42, 169, 0.03);
  scrollbar-width: thin;
  scrollbar-color: #ded4ec transparent;
}

.content-placeholder-area::-webkit-scrollbar {
  width: 5px;
}

.content-placeholder-area::-webkit-scrollbar-track {
  background: transparent;
}

.content-placeholder-area::-webkit-scrollbar-thumb {
  background: #ded4ec;
  border-radius: 4px;
}

.content-placeholder-area::-webkit-scrollbar-thumb:hover {
  background: #cbbae1;
}

.empty-state-card {
  margin: auto;
  max-width: 520px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.empty-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #f1ebf9;
  color: var(--purple-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 4px 12px rgba(104, 42, 169, 0.08);
}

.empty-icon-wrap svg {
  width: 32px;
  height: 32px;
}

.empty-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ash-text-dark);
  letter-spacing: -0.02em;
}

.empty-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ash-text-sub);
  word-break: keep-all;
}

.empty-desc strong {
  color: var(--purple-point);
}

.lesson-tag-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.lesson-tag {
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--ash-tag-bg);
  color: #4b3666;
  padding: 4px 12px;
  border-radius: 12px;
}

/* ========================================================
   5. 반응형 미디어 쿼리
   ======================================================== */
@media (max-width: 900px) {
  .grapen-app-container {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .grapen-sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    padding: 20px;
  }

  .vertical-divider {
    width: 100%;
    height: 1px;
  }

  .grapen-main-content {
    height: auto;
    min-height: 600px;
    padding: 16px;
  }

  .ash-purple-outer-card {
    border-radius: 22px;
  }
}

/* ========================================================
   6. 강의실 인트로 뷰 (Python, C 등 공통 컴포넌트)
   ======================================================== */
.python-intro-view,
.c-intro-view,
.cpp-intro-view,
.java-intro-view,
.com2-intro-view,
.com2-basic-intro-view,
.com2-calc-intro-view,
.com2-analysis-intro-view,
.com2-etc-intro-view,
.course-intro-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 12px;
  box-sizing: border-box;
  overflow-y: auto;
  animation: fadeInCourseIntro 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInCourseIntro {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1. 상단 헤더 영역 (가운데 정렬) */
.py-intro-header {
  text-align: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.py-intro-title {
  font-size: 24px;
  font-weight: 800;
  color: #1e1b2e;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.py-intro-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: #78698c;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.py-intro-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.py-tag-chip {
  font-size: 12px;
  font-weight: 600;
  color: #6b26b8;
  background: #f0e6fa;
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid #e2d2f5;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
}

.py-tag-chip:hover {
  background: #e8d7f7;
  transform: translateY(-1px);
}

/* 2. 본문 영역 (좌우 2열 그리드 분할, 좌우 중앙 정렬 배치) */
.py-intro-body {
  width: 100%;
  max-width: 860px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.py-col {
  display: flex;
  flex-direction: column;
}

.py-col-title {
  font-size: 18px;
  font-weight: 800;
  color: #1e1b2e;
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

/* [왼쪽 열: 언어의 특징 카드 3개] */
.py-feature-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.py-feature-card {
  background: #ffffff;
  border: 1.5px solid #eae2f4;
  border-radius: 16px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 16px rgba(104, 42, 169, 0.04);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.py-feature-card:hover {
  border-color: #cdb9e7;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(104, 42, 169, 0.09);
}

.py-feature-icon-box {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.py-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e1b2e;
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}

.py-card-desc {
  font-size: 12px;
  font-weight: 500;
  color: #78698c;
  line-height: 1.45;
  word-break: keep-all;
}

/* [오른쪽 열: 현실의 활용처 2x2 그리드] */
.py-usecase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  justify-items: center;
}

.py-usecase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.py-usecase-item:hover {
  transform: translateY(-3px);
}

.py-circle-wrap {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(104, 42, 169, 0.07);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

.py-usecase-item:hover .py-circle-wrap {
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(104, 42, 169, 0.15);
}

/* 1) 인공지능 / 사이버네틱 서클 */
.py-circle-ai {
  background: radial-gradient(circle at 45% 45%, #182c5b 0%, #081226 65%, #030713 100%);
  border: 2px solid rgba(96, 165, 250, 0.45);
}

/* 1-B) C++ 대형 게임 서클 (딥 인디고/슬레이트) */
.py-circle-game {
  background: radial-gradient(circle at 45% 45%, #2a3356 0%, #171b30 70%, #0b0e1b 100%);
  border: 2px solid rgba(129, 140, 248, 0.45);
}

/* 1-C) C++ 고성능 금융 서클 (딥 다크 네이비) */
.py-circle-finance {
  background: radial-gradient(circle at 45% 45%, #0f1c33 0%, #080f1e 70%, #02060e 100%);
  border: 2px solid rgba(56, 189, 248, 0.45);
}

/* 2, 3, 4) 파스텔 라벤더 서클 */
.py-circle-pastel {
  background: #f1eaf8;
  border: 1.5px solid #ded3ee;
}

.py-usecase-label {
  font-size: 14px;
  font-weight: 700;
  color: #1e1b2e;
  text-align: center;
  letter-spacing: -0.01em;
}

/* ========================================================
   7. 컴활 2급 종합 과정 인트로 뷰 (실기 구성 & 합격 전략)
   ======================================================== */
.com2-intro-header {
  text-align: center;
  margin-top: auto;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.com2-intro-title {
  font-size: 24px;
  font-weight: 800;
  color: #1e1b2e;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.com2-intro-title-22 {
  font-size: 24px;
  font-weight: 800;
  color: #1e1b2e;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.com2-intro-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.com2-tag-chip {
  font-size: 12px;
  font-weight: 700;
  color: #6b26b8;
  background: #f3e8ff;
  padding: 3.5px 12px;
  border-radius: 14px;
  border: 1px solid #e9d5ff;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
}

.com2-tag-chip:hover {
  background: #e9d5ff;
  transform: translateY(-1px);
}

.com2-intro-body {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: auto;
}

.com2-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.com2-col-title {
  font-size: 18.5px;
  font-weight: 800;
  color: #1e1b2e;
  text-align: center;
  margin-bottom: 9px;
  letter-spacing: -0.02em;
}

.com2-col-title-17 {
  font-size: 18.5px;
  font-weight: 800;
  color: #1e1b2e;
  text-align: center;
  margin-bottom: 9px;
  height: 26px;
  line-height: 26px;
  letter-spacing: -0.02em;
}

.com2-card-border-2 {
  border-width: 2px !important;
}

.com2-card {
  display: flex;
  align-items: center;
  border-radius: 16px;
  padding: 10px 16px;
  border: 1.8px solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 72px;
  box-sizing: border-box;
}

.com2-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.com2-card-icon-box {
  width: 74px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-right: 1.5px solid rgba(0, 0, 0, 0.08);
  padding-right: 10px;
  margin-right: 14px;
  box-sizing: border-box;
}

.com2-card-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  flex: 1;
}

.com2-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #1e1b2e;
  margin-bottom: 3px;
  letter-spacing: -0.015em;
}

.com2-card-desc {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
  word-break: keep-all;
}

/* 컬러풀 테마 카드 */
.com2-card-sky {
  background-color: #f0f9ff;
  border-color: #7dd3fc;
}
.com2-card-sky:hover {
  border-color: #38bdf8;
}

.com2-card-emerald {
  background-color: #ecfdf5;
  border-color: #34d399;
}
.com2-card-emerald:hover {
  border-color: #10b981;
}

.com2-card-orange {
  background-color: #fff7ed;
  border-color: #fdba74;
}
.com2-card-orange:hover {
  border-color: #fb923c;
}

.com2-card-indigo {
  background-color: #eef2ff;
  border-color: #a5b4fc;
}
.com2-card-indigo:hover {
  border-color: #818cf8;
}

.com2-card-blue {
  background-color: #eff6ff;
  border-color: #93c5fd;
}
.com2-card-blue:hover {
  border-color: #60a5fa;
}

.com2-card-amber {
  background-color: #fffbeb;
  border-color: #fcd34d;
}
.com2-card-amber:hover {
  border-color: #fbbf24;
}

.com2-card-purple {
  background-color: #faf5ff;
  border-color: #d8b4fe;
}
.com2-card-purple:hover {
  border-color: #c084fc;
}

/* ========================================================
   8. 계산작업 인트로 뷰 (핵심 출제 함수군 & 실전 합격 전략 - 5단 카드)
   ======================================================== */
.com2-calc-intro-body {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: auto;
}

.com2-calc-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.com2-calc-card {
  display: flex;
  align-items: center;
  border-radius: 14px;
  padding: 6px 16px;
  border-width: 2px !important;
  border-style: solid;
  box-shadow: 0 1.5px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 58px;
  height: 58px;
  max-height: 58px;
  box-sizing: border-box;
}

.com2-calc-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.com2-calc-card-icon-box {
  width: 66px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-right: 1.5px solid rgba(0, 0, 0, 0.08);
  padding-right: 10px;
  margin-right: 12px;
  box-sizing: border-box;
}

.com2-calc-card-icon-box svg {
  max-width: 100%;
  max-height: 36px;
}

.com2-calc-card-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.com2-calc-card-title {
  font-size: 15.5px;
  font-weight: 800;
  color: #1e1b2e;
  margin-bottom: 2px;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.com2-calc-card-desc {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

/* ========================================================
   9. 분석작업 인트로 뷰 (실기 구성 & 감점 방지 - 6단 카드)
   ======================================================== */
.com2-card-pink {
  background-color: #fdf2f8;
  border-color: #f472b6;
}
.com2-card-pink:hover {
  border-color: #ec4899;
}

.com2-ana-intro-body {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: auto;
}

.com2-ana-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.com2-ana-card {
  display: flex;
  align-items: center;
  border-radius: 12px;
  padding: 5px 14px;
  border-width: 1.8px !important;
  border-style: solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 48px;
  height: 48px;
  max-height: 48px;
  box-sizing: border-box;
}

.com2-ana-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.com2-ana-card-icon-box {
  width: 58px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-right: 1.5px solid rgba(0, 0, 0, 0.08);
  padding-right: 8px;
  margin-right: 10px;
  box-sizing: border-box;
}

.com2-ana-card-icon-box svg {
  max-width: 100%;
  max-height: 30px;
}

.com2-ana-card-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.com2-ana-card-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #1e1b2e;
  margin-bottom: 2px;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.com2-ana-card-desc {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

/* ========================================================
   기본작업 & 기타작업 인트로 뷰 (좌우 4개 카드 완벽 대칭 동일 크기)
   ======================================================== */
.com2-basic-intro-view .com2-intro-body,
.com2-etc-intro-view .com2-intro-body {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-bottom: auto;
}

.com2-basic-intro-view .com2-col,
.com2-etc-intro-view .com2-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.com2-basic-intro-view .com2-col-title-17,
.com2-etc-intro-view .com2-col-title-17 {
  height: 26px;
  line-height: 26px;
  margin-bottom: 9px;
  font-size: 18.5px;
  font-weight: 800;
}

.com2-basic-intro-view .com2-card,
.com2-etc-intro-view .com2-card {
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  flex: 0 0 76px;
  padding: 9px 18px;
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
}

.com2-basic-intro-view .com2-card-icon-box,
.com2-etc-intro-view .com2-card-icon-box {
  width: 72px;
  height: 48px;
  padding-right: 12px;
  margin-right: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.com2-basic-intro-view .com2-card-icon-box svg,
.com2-etc-intro-view .com2-card-icon-box svg {
  max-width: 100%;
  max-height: 42px;
}

.com2-basic-intro-view .com2-card-text-box,
.com2-etc-intro-view .com2-card-text-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.com2-basic-intro-view .com2-card-title,
.com2-etc-intro-view .com2-card-title {
  font-size: 16.5px;
  font-weight: 800;
  margin-bottom: 3px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.com2-basic-intro-view .com2-card-desc,
.com2-etc-intro-view .com2-card-desc {
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

/* 반응형 모바일/태블릿 */
@media (max-width: 820px) {
  .py-intro-body,
  .com2-intro-body,
  .com2-calc-intro-body,
  .com2-ana-intro-body,
  .com2-basic-intro-view .com2-intro-body,
  .com2-etc-intro-view .com2-intro-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .python-intro-view,
  .c-intro-view,
  .cpp-intro-view,
  .java-intro-view,
  .com2-intro-view,
  .com2-basic-intro-view,
  .com2-calc-intro-view,
  .com2-analysis-intro-view,
  .com2-etc-intro-view,
  .course-intro-view {
    justify-content: flex-start;
    padding: 16px 12px;
  }
}

/* ========================================================
   7. 컴활 2급 6단계 네비게이션 바 & 하단 단계별 본문 콘텐츠
   ======================================================== */

/* (1) 컴활 2급 6단계 네비게이션 바 (상단바와 하단 하얀 칸 사이 배치) */
/* 상단 바와 하단 칸의 끝 지점에 맞게 100% 확장되며 양 끝에 이전/다음 버튼 배치 */
.step-nav-bar {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  z-index: 5;
  flex-shrink: 0;
  min-height: 42px;
  padding: 0;
  animation: fadeInStepNav 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInStepNav {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* '< 이전', '다음 >' 버튼 (상단 바와 하단 칸의 끝 지점에 맞게 각각 양끝 배치) */
.step-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  color: #4A3E5C;
  background: #ffffff;
  border: 1.5px solid #dcd4eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(98, 28, 203, 0.04);
  position: relative;
  z-index: 2;
}

.step-nav-btn:hover:not(:disabled) {
  color: #621CCB;
  border-color: #621CCB;
  background: #fbf9fd;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(98, 28, 203, 0.12);
}

.step-nav-btn:active:not(:disabled) {
  transform: translateY(0);
}

/* 비활성화(disabled): color: #B5B3B9, 클릭 방지 */
.step-nav-btn:disabled,
.step-nav-btn.disabled {
  color: #B5B3B9 !important;
  border-color: #ece9f2 !important;
  background: #f7f6f9 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.75;
}

.step-nav-arrow {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

/* 중앙 단계 인디케이터 컨테이너 (이전 버튼과 다음 버튼 사이 공간에서 가운데 정렬 고정) */
.step-indicator-group {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1.5px solid #ded5ec;
  box-shadow: 0 1px 4px rgba(98, 28, 203, 0.04);
  z-index: 1;
}

/* 중앙 단계 각 아이템 ('1'~'6', '복습' 또는 '예습', '1'~'4', '복습') */
.step-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 9999px;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 500;
  color: #A59DB1; /* 대기 상태: 흐릿한 회색 글씨 */
  background: transparent; /* 대기 상태: 배경 없음 */
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.step-nav-item:hover:not(.active) {
  color: #621CCB;
  background: rgba(241, 239, 247, 0.6);
}

/* 활성화 상태 (Active): 연한 보라색 배경 캡슐(#F1EFF7), 진한 포인트 보라색 글씨(#621CCB, bold) */
.step-nav-item.active {
  background: #F1EFF7 !important;
  color: #621CCB !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(98, 28, 203, 0.08);
}

/* (2) 하단 본문 콘텐츠 영역 연동 뷰 스타일 */
.com2-step-content-view {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeInStepContent 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInStepContent {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 단계 뷰 헤더 카드 */
.step-view-header-card {
  background: #ffffff;
  border: 1.5px solid #ded5ec;
  border-radius: 16px;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(98, 28, 203, 0.04);
}

.step-view-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-phase-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-phase-pill {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #F1EFF7;
  color: #621CCB;
  border: 1px solid #d9cfee;
}

.step-subject-subtext {
  font-size: 0.82rem;
  font-weight: 500;
  color: #8c7f9e;
}

.step-view-main-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #312144;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.step-view-desc {
  font-size: 0.88rem;
  color: #685a7b;
  line-height: 1.45;
  margin-top: 2px;
}

/* 세부 페이지 인디케이터 배지 */
.sub-badge-indicator {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9px;
  background: #f3effc;
  color: #621CCB;
  border: 1px solid #ded5ec;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  text-align: center;
}

/* 서브 네비게이터 컨테이너 (우측 배점 아래 배치) */
.sub-step-navigator-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 3px 9px;
  background: #fbf9fe;
  border: 1.5px solid #ded5ec;
  border-radius: 20px;
  width: fit-content;
  box-shadow: 0 1px 3px rgba(98, 28, 203, 0.04);
}

/* 양 끝 삼각형 모양 페이지 넘김 버튼 */
.sub-nav-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #ded5ec;
  background: #ffffff;
  color: #621CCB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(98, 28, 203, 0.05);
}

.sub-nav-btn:hover:not(:disabled) {
  background: #621CCB;
  color: #ffffff;
  border-color: #621CCB;
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(98, 28, 203, 0.25);
}

.sub-nav-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.sub-nav-btn:disabled,
.sub-nav-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #e5e0ed;
  color: #b5b3b9;
  background: #f6f4fa;
  box-shadow: none;
  transform: none;
}

/* 삼각형 아이콘 (SVG polygon) */
.sub-nav-triangle {
  width: 10px;
  height: 10px;
  fill: currentColor;
  display: block;
}

/* 보라색 동그라미들을 연결하는 트랙 */
.sub-dots-container {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 105px;
  height: 16px;
}

/* 동그라미 사이를 잇는 연결선 (-) */
.sub-dots-line {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: #ded5ec;
  z-index: 1;
  border-radius: 2px;
}

/* 동그라미 버튼 목록 */
.sub-dots-list {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 개별 동그라미 (비활성: ○) */
.sub-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #a78bfa;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(98, 28, 203, 0.08);
}

.sub-dot:hover:not(.active) {
  transform: scale(1.25);
  border-color: #621CCB;
  background: #f7f2ff;
}

/* 활성화된 동그라미 (해당 페이지: ●) */
.sub-dot.active {
  width: 12px;
  height: 12px;
  background: #621CCB;
  border-color: #621CCB;
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(98, 28, 203, 0.2), 0 2px 4px rgba(98, 28, 203, 0.3);
}

.step-view-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}

.step-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 10px;
  background: #faf7fd;
  border: 1px solid #ded5ec;
  font-size: 0.78rem;
  font-weight: 700;
  color: #621CCB;
  line-height: 1.2;
}

/* 본문 카드 그리드 */
.step-body-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.step-card {
  min-width: 0;
  background: #ffffff;
  border: 1.5px solid #e3dbee;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 2px 8px rgba(98, 28, 203, 0.03);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.2s ease;
}

.step-card:hover {
  border-color: #c9bde1;
  box-shadow: 0 4px 14px rgba(98, 28, 203, 0.06);
}

.step-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e8e2f0;
}

.step-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: #F1EFF7;
  color: #621CCB;
}

.step-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #312144;
}

/* 실습 이미지 캡처 뷰어 */
.sheet-image-preview-box {
  background: #faf8fd;
  border: 1.5px solid #ded5ec;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(98, 28, 203, 0.03);
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: 350px;
}

.sheet-action-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(98, 28, 203, 0.08);
  border: 1px solid #e3dbee;
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sheet-action-image:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(98, 28, 203, 0.16);
}

.image-zoom-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: #F1EFF7;
  color: #621CCB;
  border: 1px solid #d9cfee;
  cursor: pointer;
  transition: all 0.15s ease;
}

.image-zoom-pill:hover {
  background: #621CCB;
  color: #ffffff;
}

.image-zoom-overlay-hint {
  margin-top: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #8c7f9e;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 작업 지시문 헤더 뱃지 */
.instruction-header-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: #F1EFF7;
  color: #621CCB;
  border: 1px solid #d9cfee;
}

/* 작업 지시문 목록 (가변 줄 수 지원) */
.instruction-list-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.instruction-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 13px;
  border-radius: 10px;
  background: #faf8fd;
  border: 1px solid #ded5ec;
  transition: all 0.2s ease;
}

/* 첫 번째 줄 특별 강조 (왼쪽 사진과 연결되는 동작 강조) */
.instruction-item.highlight-bold {
  background: #f4effc;
  border: 1.5px solid #621CCB;
  box-shadow: 0 2px 8px rgba(98, 28, 203, 0.1);
  position: relative;
}

.instruction-item.highlight-bold::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #621CCB;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.instruction-badge-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.action-target-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: #621CCB;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 3px rgba(98, 28, 203, 0.25);
}

.instruction-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ede8f7;
  color: #621CCB;
  font-size: 0.76rem;
  font-weight: 700;
}

.instruction-text-col {
  flex: 1;
}

/* 글씨 색은 전부 보라색 */
.instruction-text {
  font-size: 0.92rem;
  color: #621CCB;
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  word-break: keep-all; /* 한글 단어 중간 분리 방지 */
}

/* 볼드 강조 타겟 */
.instruction-text.bold-target {
  font-weight: 800;
  font-size: 0.96rem;
  color: #5010af;
  line-height: 1.48;
}

/* (형식: ...) 구문: 한 줄에 들어갈 공간이 충분하면 같은 줄에 유지되고,
   공간이 모자라 중간에 잘릴 상황이면 통째로 다음 줄로 줄바꿈되어 한 줄에 온전히 표시 */
.instruction-format-clause {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
  word-break: keep-all;
  max-width: 100%;
}

/* 사진 동작 순서 컨테이너 (위로 맞춰 땡겨 올려서 배치 & 다중 항목 대비) */
.photo-steps-container {
  background: #faf8fd;
  border: 1.5px solid #ded5ec;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0; /* 지시사항 아래로 바짝 땡겨 올려 여유 공간 확보 */
  min-height: 96px; /* 내용이 비어있어도 칸 자체의 크기와 레이아웃 유지 */
  transition: all 0.2s ease;
}

.photo-steps-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e5ddf0;
}

.photo-steps-icon {
  font-size: 0.95rem;
}

.photo-steps-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #3b2152;
  margin: 0;
}

.photo-steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
}

/* 사진 동작 순서 내용이 비어있을 때 칸의 형태를 예쁘게 유지 */
.photo-steps-list:empty {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px dashed #ded5ec;
  border-radius: 8px;
}

.photo-steps-list:empty::after {
  content: '추후 내용이 추가될 예정입니다.';
  font-size: 0.85rem;
  color: #a59db1;
  font-weight: 500;
}

.photo-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e8e2f2;
  box-shadow: 0 1px 3px rgba(98, 28, 203, 0.04);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.photo-step-item:hover {
  border-color: #621CCB;
  transform: translateX(3px);
}

.photo-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #621CCB;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
}

.photo-step-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: #312144;
}

/* 이미지 원본 확대 모달 (라이트박스) */
.grapen-image-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.grapen-image-modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(33, 21, 52, 0.78);
  backdrop-filter: blur(5px);
}

.modal-dialog {
  position: relative;
  z-index: 100000;
  background: #ffffff;
  border-radius: 16px;
  max-width: 94vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
  border: 2px solid #621CCB;
  animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ded5ec;
  background: #faf8fd;
}

.modal-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #40285a;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #621CCB;
  cursor: pointer;
  line-height: 1;
  padding: 0 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.modal-close-btn:hover {
  background: #f1eff7;
}

.modal-body {
  padding: 14px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: calc(94vh - 65px);
  background: #fdfcfe;
}

.modal-large-img {
  max-width: 100%;
  max-height: calc(94vh - 95px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 스프레드시트 테이블 뷰어 */
.sheet-preview-box {
  background: #fdfdfe;
  border: 1px solid #ded8eb;
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.82rem;
}

.sheet-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.sheet-table th {
  background: #f1eff7;
  color: #621CCB;
  font-weight: 700;
  padding: 7px 10px;
  border-bottom: 1px solid #ddd5eb;
  border-right: 1px solid #eae4f3;
  font-size: 0.78rem;
}

.sheet-table th:last-child {
  border-right: none;
}

.sheet-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0ecf6;
  border-right: 1px solid #f0ecf6;
  color: #433556;
}

.sheet-table td:last-child {
  border-right: none;
}

.sheet-table tr:last-child td {
  border-bottom: none;
}

.sheet-table td.highlight-cell {
  background: #fcf6ff;
  color: #621CCB;
  font-weight: 700;
}

/* 가이드 목록 */
.step-guide-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-guide-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: #55446c;
  line-height: 1.45;
}

.step-guide-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: #F1EFF7;
  color: #621CCB;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 2px;
}

/* 코드/수식 블록 */
.formula-code-box {
  background: #faf8fd;
  border: 1.5px solid #ded5ec;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.formula-text {
  font-family: var(--font-code);
  font-size: 0.95rem;
  font-weight: 600;
  color: #621CCB;
}

.formula-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9382ab;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #ebe5f5;
}

/* 하단 단계 이동 안내 바 */
.step-bottom-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #ffffff;
  border: 1.5px solid #e6dfef;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(98, 28, 203, 0.03);
}

.step-bottom-info {
  font-size: 0.88rem;
  color: #7b6f8c;
}

.step-bottom-info strong {
  color: #621CCB;
}

.step-bottom-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  border: 1px solid #ded5ec;
  background: #ffffff;
  color: #55446c;
  cursor: pointer;
  transition: all 0.18s ease;
}

.step-jump-btn:hover {
  background: #F1EFF7;
  color: #621CCB;
  border-color: #cbbce3;
}

.step-jump-btn.primary {
  background: #621CCB;
  color: #ffffff;
  border-color: #621CCB;
}

.step-jump-btn.primary:hover {
  background: #5014a8;
  border-color: #5014a8;
}

/* ========================================================
   [신규 기능] 흰색 컨테이너 최하단 중앙 정렬 세부 페이지 네비게이션
   (이전 단계 버튼 | 1 / 4 페이지 번호 | 다음 단계 버튼)
   ======================================================== */
.step-bottom-sub-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px 8px;
  margin-top: 12px;
  width: 100%;
}

.com2-bottom-nav-btn,
.com2-side-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #ffffff;
  border: 1.5px solid #ded5ec;
  border-radius: 9999px;
  color: #621CCB;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(98, 28, 203, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.com2-bottom-nav-btn:hover:not(:disabled),
.com2-side-nav-btn:hover:not(:disabled) {
  background: #621CCB;
  color: #ffffff;
  border-color: #621CCB;
  box-shadow: 0 6px 22px rgba(98, 28, 203, 0.28);
  transform: translateY(-2px);
}

.com2-bottom-nav-btn:active:not(:disabled),
.com2-side-nav-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.com2-bottom-nav-btn.prev:hover:not(:disabled) .bottom-nav-arrow,
.com2-side-nav-btn.prev:hover:not(:disabled) .side-nav-arrow {
  transform: translateX(-3px);
}

.com2-bottom-nav-btn.next:hover:not(:disabled) .bottom-nav-arrow,
.com2-side-nav-btn.next:hover:not(:disabled) .side-nav-arrow {
  transform: translateX(3px);
}

.bottom-nav-arrow,
.side-nav-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-nav-label,
.side-nav-label {
  display: inline-block;
  line-height: 1;
}

.com2-bottom-nav-btn.disabled,
.com2-bottom-nav-btn:disabled,
.com2-side-nav-btn.disabled,
.com2-side-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  background: #f8f6fc;
  border-color: #e5dfed;
  color: #a59db1;
  box-shadow: none;
  transform: none;
}

/* 페이지 번호 배지 (예: 1 / 4) */
.step-bottom-page-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  padding: 9px 20px;
  background: #f8f6fc;
  border: 1.5px solid #ded5ec;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #55446e;
  letter-spacing: 0.02em;
  user-select: none;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 3px rgba(98, 28, 203, 0.04);
}

.step-bottom-page-badge .page-current {
  color: #621CCB;
  font-size: 1.05rem;
  font-weight: 800;
}

.step-bottom-page-badge .page-separator {
  color: #b2a6c3;
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0 1px;
}

.step-bottom-page-badge .page-total {
  color: #7a6e8c;
  font-size: 0.95rem;
  font-weight: 700;
}

/* 모바일 & 좁은 화면 반응형 스타일 */
@media (max-width: 680px) {
  .step-bottom-sub-nav {
    gap: 10px;
    padding: 12px 10px 4px;
  }

  .com2-bottom-nav-btn {
    padding: 9px 14px;
    font-size: 0.84rem;
  }

  .step-bottom-page-badge {
    min-width: 74px;
    padding: 8px 14px;
    font-size: 0.88rem;
  }
}

/* 반응형 화면(1200px, 980px 등)에서 상단 헤더 및 6단계 네비게이션 최적화 */
@media (max-width: 1200px) {
  .active-subject-title {
    font-size: 1.25rem;
  }

  .step-nav-btn {
    padding: 0 14px;
    height: 36px;
    font-size: 0.86rem;
  }

  .step-nav-item {
    min-width: 36px;
    height: 30px;
    padding: 0 10px;
    font-size: 0.85rem;
  }
}

@media (max-width: 980px) {
  .active-subject-title {
    font-size: 1.15rem;
  }

  .top-status-group {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .step-nav-btn {
    padding: 0 12px;
    height: 34px;
    font-size: 0.82rem;
  }

  .step-indicator-group {
    padding: 3px 4px;
    gap: 2px;
  }

  .step-nav-item {
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.8rem;
  }
}

@media (max-width: 640px) {
  .step-nav-btn {
    padding: 0 8px;
    font-size: 0.78rem;
    height: 32px;
  }

  .step-nav-item {
    min-width: 28px;
    height: 26px;
    padding: 0 6px;
    font-size: 0.75rem;
  }
}

/* ========================================================
   10. 화면 높이(Viewport Height)가 극단적으로 낮은 환경만 슬림 스크롤 지원
   (일반 데스크탑/노트북 화면에서는 큼직하고 웅장한 크기 100% 보장)
   ======================================================== */
@media (max-height: 580px) {
  .grapen-main-content {
    padding: 10px 14px;
  }

  .ash-purple-outer-card {
    padding: 10px;
    gap: 8px;
  }

  .ash-purple-top-box {
    height: 52px;
    min-height: 52px;
  }
}

/* ========================================================
   11. 프로그래밍 원페이지 개념+실습 뷰 (.code-lesson-view)
   - 스크롤 기반 원페이지 레이아웃
   - 상단 테두리 없는 깔끔한 본문 이론 영역
   - 하단 2분할 (다크 코드 블록 + 다크 콘솔 터미널) 워크스페이스
   - 은은한 구분선 및 최하단 도전 과제 카드
   ======================================================== */
.code-lesson-view {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 20px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 36px;
  animation: fadeInStepContent 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  min-height: max-content;
}

.code-lesson-view > * {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 차시 상단 타이틀 헤더 */
.lesson-page-header {
  padding-bottom: 12px;
  border-bottom: 2px solid #ede8f5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lesson-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lesson-subject-pill {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  background: #f1eff7;
  color: #621ccb;
  border: 1px solid #ded5ec;
}

.lesson-step-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9px;
  background: #ede8f7;
  color: #55446e;
}

.lesson-page-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #24143a;
  letter-spacing: -0.025em;
  margin: 2px 0 0;
  line-height: 1.3;
}

.lesson-page-desc {
  font-size: 0.94rem;
  color: #645778;
  line-height: 1.55;
  margin: 0;
}

/* 개념 섹션 블록 */
.concept-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1) 상단 개념/이론 영역 (테두리 없이 깔끔한 본문 스타일) */
.concept-theory {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.concept-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.concept-index-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 7px;
  background: #621ccb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(98, 28, 203, 0.2);
}

.concept-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #24143a;
  letter-spacing: -0.02em;
  margin: 0;
}

.concept-sub-heading {
  font-size: 1.02rem;
  font-weight: 700;
  color: #3b2a54;
  margin: 8px 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.concept-sub-heading::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #621ccb;
  border-radius: 2px;
}

/* 본문 불릿 리스트 */
.concept-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.concept-bullet-item {
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #4a3e5c;
  word-break: keep-all;
}

.concept-bullet-item::before {
  content: '•';
  position: absolute;
  left: 4px;
  top: 0;
  color: #8b5cf6;
  font-size: 1.15rem;
  font-weight: bold;
}

.concept-bullet-item strong {
  color: #24143a;
  font-weight: 700;
}

.concept-bullet-item code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.85rem;
  background: #f4effc;
  color: #621ccb;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid #e5daf3;
}

/* 비교/정리 표 (깔끔한 모던 테이블) */
.concept-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1.5px solid #ded5ec;
  box-shadow: 0 1px 4px rgba(98, 28, 203, 0.04);
  background: #ffffff;
  margin: 6px 0;
}

.concept-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}

.concept-table th {
  background: #fbf9fe;
  color: #4a3862;
  font-weight: 700;
  padding: 10px 16px;
  border-bottom: 1.5px solid #ded5ec;
  white-space: nowrap;
}

.concept-table td {
  padding: 11px 16px;
  border-bottom: 1px solid #f0eaf7;
  color: #443754;
  line-height: 1.5;
}

.concept-table tr:last-child td {
  border-bottom: none;
}

.concept-table tr:hover td {
  background: #faf7ff;
}

.concept-table code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.82rem;
  background: #f4effc;
  color: #621ccb;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #e7dff5;
}

/* 2) 하단 2분할 카드 영역 (그리드) */
.concept-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

/* 좌측: 코드 블록 (다크 카드) */
.code-card {
  background: #1e1e2e;
  border: 1.5px solid #313244;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.code-card-header {
  background: #181825;
  border-bottom: 1px solid #313244;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.code-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.code-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 5px;
  background: #313244;
  color: #cdd6f4;
}

.code-filename {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.8rem;
  color: #a6adc8;
  font-weight: 500;
}

.code-copy-btn {
  background: #313244;
  border: 1px solid #45475a;
  border-radius: 7px;
  color: #cdd6f4;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.code-copy-btn:hover {
  background: #45475a;
  color: #ffffff;
  border-color: #8b5cf6;
  transform: translateY(-1px);
}

.code-copy-btn.copied {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

.code-copy-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.code-card-body {
  padding: 14px 16px;
  overflow-x: hidden; /* 가로 스크롤바 완전 제거 및 좌우 흔들림 원천 차단 */
  flex: 1;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

.code-pre {
  margin: 0;
  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #cdd6f4;
  tab-size: 4;
  white-space: pre-wrap; /* 긴 코드/주석 줄바꿈으로 카드 너비에 완벽 고정 */
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 문법 강조 토큰 스타일 */
.tok-com { color: #6c7086; font-style: italic; }
.tok-str { color: #a6e3a1; font-weight: 500; }
.tok-kw  { color: #cba6f7; font-weight: 700; }
.tok-fn  { color: #89b4fa; font-weight: 600; }
.tok-num { color: #fab387; }
.tok-op  { color: #89dceb; }
.tok-typ { color: #f9e2af; font-weight: 600; }

/* 문법 강조 토큰 호환성 별칭 (token-* 대응) */
.token-keyword, .token-directive { color: #cba6f7; font-weight: 700; }
.token-string { color: #a6e3a1; font-weight: 500; }
.token-func { color: #89b4fa; font-weight: 600; }
.token-type { color: #f9e2af; font-weight: 600; }
.token-number { color: #fab387; }
.token-comment { color: #6c7086; font-style: italic; }
.token-operator { color: #89dceb; }


/* 우측: 실행 결과 터미널 카드 (다크/블랙 카드) */
.terminal-card {
  background: #11111b;
  border: 1.5px solid #28283d;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.terminal-card-header {
  background: #181825;
  border-bottom: 1px solid #28283d;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terminal-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dot.red    { background: #f38ba8; }
.terminal-dot.yellow { background: #f9e2af; }
.terminal-dot.green  { background: #a6e3a1; }

.terminal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7f849c;
  letter-spacing: 0.08em;
}

.terminal-card-body {
  padding: 14px 16px;
  overflow-x: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  color: #e2e8f0;
}

.terminal-card-body pre,
.terminal-card-body code {
  color: #e2e8f0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.88rem;
  line-height: 1.6;
}

.terminal-cmd {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.8rem;
  color: #6c7086;
  display: flex;
  align-items: center;
  gap: 6px;
}

.terminal-cmd-prompt {
  color: #a6e3a1;
  font-weight: bold;
}

.terminal-pre {
  margin: 0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 3) 개념 간 명확하고 선명한 회색 구분선 */
.concept-divider {
  display: block;
  width: 100%;
  height: 0;
  border: none;
  border-top: 1.5px solid #cbd5e1; /* 확실하고 선명한 모던 회색 실선 */
  margin: 10px 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 최하단 도전 과제 미션 카드 */
.lesson-mission-card {
  background: linear-gradient(135deg, #ffffff 0%, #fbf9fe 100%);
  border: 1.5px solid #8b5cf6;
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 6px 24px rgba(98, 28, 203, 0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: visible; /* 내부 콘텐츠가 잘리지 않도록 visible 설정 */
  margin-top: 8px;
  margin-bottom: 30px;
  flex-shrink: 0;
  min-height: max-content;
  box-sizing: border-box;
}

.mission-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.mission-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 8px;
  background: #621ccb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(98, 28, 203, 0.2);
}

.mission-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #24143a;
  margin: 0;
  letter-spacing: -0.02em;
}

.mission-desc-box {
  background: #f7f3fd;
  border: 1.5px solid #ded5ec;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.94rem;
  color: #3b2a54;
  line-height: 1.65;
}

.mission-desc-box strong {
  color: #621ccb;
}

.mission-body-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.mission-checklist-card {
  background: #ffffff;
  border: 1.5px solid #e5daf3;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(98, 28, 203, 0.04);
}

.mission-section-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #4a3862;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.mission-terminal-card {
  background: #11111b;
  border: 1.5px solid #28283d;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.mission-terminal-header {
  background: #181825;
  border-bottom: 1px solid #28283d;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mission-terminal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #a6adc8;
  letter-spacing: 0.08em;
}

.mission-terminal-body {
  padding: 16px 18px;
  flex: 1;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

.mission-pre,
.mission-terminal-card .terminal-pre {
  margin: 0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a6e3a1;
  white-space: pre-wrap;
}

/* 반응형 */
@media (max-width: 820px) {
  .concept-workspace-grid,
  .mission-body-grid {
    grid-template-columns: 1fr;
  }
}

/* 컴활 계산작업 문법 카드 및 팁 박스 */
.concept-syntax-card {
  background: #fbf9fe;
  border: 1.5px solid #ded5ec;
  border-left: 4px solid #7c3aed;
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.04);
}

.concept-syntax-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #7c3aed;
  letter-spacing: 0.05em;
}

.concept-syntax-code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e1b4b;
}

.syntax-req-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}

.syntax-req-pill.req {
  background: #ede9fe;
  color: #6d28d9;
}

.syntax-req-pill.opt {
  background: #f1f5f9;
  color: #64748b;
}

.concept-tip-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.6;
}

.tip-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.tip-content strong {
  color: #7c3aed;
}

/* ========================================================
   컴활 2급 미니 인터랙티브 엑셀 그리드 컴포넌트
   ======================================================== */
.mini-excel-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.06);
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Pretendard", sans-serif;
  margin-top: 4px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint;
}

/* 상단 수식 입력줄 (Formula Bar) */
.excel-formula-bar-wrap {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border-bottom: 1.5px solid #cbd5e1;
  padding: 6px 10px;
  gap: 8px;
  position: relative;
}

.excel-name-box {
  width: 70px;
  min-width: 70px;
  height: 28px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.excel-fx-divider {
  width: 1px;
  height: 20px;
  background: #cbd5e1;
}

.excel-fx-label {
  font-style: italic;
  font-weight: 800;
  font-size: 0.95rem;
  color: #7c5ca8;
  padding: 0 4px;
}

.excel-formula-input-wrap {
  flex: 1;
}

.excel-formula-input {
  width: 100%;
  height: 28px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Pretendard", sans-serif;
  font-size: 0.88rem;
  color: #0f172a;
  outline: none;
  transition: all 0.2s;
}

.excel-formula-input:focus {
  border-color: #7c5ca8;
  box-shadow: 0 0 0 2px rgba(124, 92, 168, 0.15);
}

/* 그리드 뷰포트 */
.excel-sheet-viewport {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 420px;
  background: #ffffff;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.excel-grid-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8rem;
}

/* 머리글 셀 */
.excel-corner-cell,
.excel-col-header,
.excel-row-header {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  user-select: none;
}

.excel-corner-cell {
  width: 38px;
  min-width: 38px;
  height: 26px;
}

.excel-col-header {
  height: 26px;
  width: 68px;
  min-width: 68px;
  box-sizing: border-box;
}

.excel-row-header {
  width: 38px;
  min-width: 38px;
  height: 26px;
}

.excel-col-header.active-header,
.excel-row-header.active-header {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  font-weight: 800;
}

/* 데이터 셀 */
.excel-cell {
  border: 1px solid #e2e8f0;
  padding: 3px 6px;
  height: 26px;
  min-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
  cursor: cell;
  position: relative;
  background: #ffffff;
}

.excel-cell.align-center {
  text-align: center;
}

.excel-cell.align-right {
  text-align: right;
}

.excel-cell.align-left {
  text-align: left;
}

.excel-cell.table-header-cell {
  background: #f8fafc;
  font-weight: 700;
  text-align: center;
}

/* 수식 작성 대상 셀 시각적 가이드 (GraPen 애쉬퍼플 테마) */
.excel-cell.formula-target-cell {
  background-color: #f3eef8 !important;
  border-color: #e5dbf0;
}

/* 마우스 호버 시 인터랙션 가이드 피드백 */
.excel-cell.formula-target-cell:not(.active-cell):hover {
  background-color: #ebe3f4 !important;
  border-color: #d8c7ea;
}

/* 포커스/활성(Active) 상태일 때도 은은한 퍼플 배경 유지 및 선명한 텍스트 가독성 */
.excel-cell.formula-target-cell.active-cell {
  background-color: #f5f0fa !important;
  color: #1e293b;
}

/* 다중 셀 드래그 범위 선택 시 */
.excel-cell.formula-target-cell.excel-range-selected {
  background-color: rgba(124, 92, 168, 0.20) !important;
}

/* 활성 셀 (포커스) */
.excel-cell.active-cell {
  outline: 2px solid #7c5ca8 !important;
  outline-offset: -1px;
  z-index: 5;
}

/* 일반 다중 셀 범위 드래그 선택 스타일 (애쉬퍼플 테마) */
.excel-cell.excel-range-selected {
  background-color: rgba(124, 92, 168, 0.12) !important;
}

.excel-cell.excel-range-selected.active-cell {
  background-color: #ffffff !important;
}

.excel-cell.active-cell::after,
.excel-fill-handle {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 6px;
  height: 6px;
  background: #7c5ca8;
  border: 1px solid #ffffff;
  z-index: 10;
  cursor: crosshair;
}

/* 채우기 드래그 대상 점선 박스 (외곽 점선 스타일) */
.excel-cell.fill-drag-target {
  background-color: rgba(124, 92, 168, 0.08) !important;
  z-index: 6;
}

/* 애쉬퍼플 기반 엑셀 8색 다중참조 테두리 및 배경색 팔레트 (행 높이 불변 box-shadow 적용) */
.excel-cell.arg-color-0 {
  box-shadow: inset 0 0 0 2px #7c5ca8 !important;
  background-color: rgba(124, 92, 168, 0.12) !important;
  z-index: 4;
}

.excel-cell.arg-color-1 {
  box-shadow: inset 0 0 0 2px #b35a68 !important;
  background-color: rgba(179, 90, 104, 0.12) !important;
  z-index: 4;
}

.excel-cell.arg-color-2 {
  box-shadow: inset 0 0 0 2px #4a8265 !important;
  background-color: rgba(74, 130, 101, 0.12) !important;
  z-index: 4;
}

.excel-cell.arg-color-3 {
  box-shadow: inset 0 0 0 2px #5865a8 !important;
  background-color: rgba(88, 101, 168, 0.12) !important;
  z-index: 4;
}

.excel-cell.arg-color-4 {
  box-shadow: inset 0 0 0 2px #a67343 !important;
  background-color: rgba(166, 115, 67, 0.12) !important;
  z-index: 4;
}

.excel-cell.arg-color-5 {
  box-shadow: inset 0 0 0 2px #46858a !important;
  background-color: rgba(70, 133, 138, 0.12) !important;
  z-index: 4;
}

.excel-cell.arg-color-6 {
  box-shadow: inset 0 0 0 2px #69487d !important;
  background-color: rgba(105, 72, 125, 0.12) !important;
  z-index: 4;
}

.excel-cell.arg-color-7 {
  box-shadow: inset 0 0 0 2px #52637a !important;
  background-color: rgba(82, 99, 122, 0.12) !important;
  z-index: 4;
}

/* 수식 글자 8색 애쉬 팔레트 매칭 */
.arg-text-0 { color: #7c5ca8; font-weight: 700; }
.arg-text-1 { color: #b35a68; font-weight: 700; }
.arg-text-2 { color: #4a8265; font-weight: 700; }
.arg-text-3 { color: #5865a8; font-weight: 700; }
.arg-text-4 { color: #a67343; font-weight: 700; }
.arg-text-5 { color: #46858a; font-weight: 700; }
.arg-text-6 { color: #69487d; font-weight: 700; }
.arg-text-7 { color: #52637a; font-weight: 700; }

/* 수식 자동완성 드롭다운 (IntelliSense) */
.excel-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 90px;
  width: 320px;
  max-height: 220px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 4px;
}

.excel-autocomplete-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.1s;
}

.excel-autocomplete-item:hover,
.excel-autocomplete-item.selected {
  background-color: #f3e8ff;
  color: #6b21a8;
}

.excel-auto-fx {
  font-style: italic;
  font-weight: 800;
  color: #7c3aed;
  margin-right: 8px;
  font-size: 0.85rem;
}

.excel-auto-name {
  font-weight: 700;
  font-family: inherit;
  margin-right: 8px;
  color: #1e293b;
}

.excel-auto-desc {
  font-size: 0.72rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 함수 시그니처 인수 안내 툴팁 */
.excel-signature-tooltip {
  position: absolute;
  top: 100%;
  left: 90px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 5px 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Pretendard", sans-serif;
  font-size: 0.78rem;
  color: #334155;
  z-index: 999;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.excel-sig-func {
  font-weight: 700;
  color: #1e293b;
}

.excel-sig-param {
  color: #64748b;
}

.excel-sig-param.active {
  color: #1e293b;
  font-weight: 800;
  text-decoration: underline;
  background-color: #ede9fe;
  padding: 1px 4px;
  border-radius: 3px;
}

/* 수식 문법 오류(괄호/따옴표 짝) 경고 토스트 */
.excel-syntax-error-toast {
  position: absolute;
  top: 100%;
  left: 90px;
  right: 10px;
  background: #fee2e2;
  border: 1px solid #f87171;
  border-radius: 6px;
  padding: 6px 12px;
  color: #991b1b;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1001;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
  animation: excelToastFadeIn 0.2s ease-out;
}

@keyframes excelToastFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 인라인 셀 편집기 */
.excel-cell-inline-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: #ffffff;
  padding: 3px 6px;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: inherit;
  box-sizing: border-box;
  z-index: 7;
}

/* 하단 시트 탭 & 상태 표시줄 */
.excel-sheet-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 4px 12px;
  font-size: 0.76rem;
}

.excel-sheet-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-bottom: 2px solid #7c3aed;
  border-radius: 4px 4px 0 0;
  font-weight: 700;
  color: #7c3aed;
}

.excel-status-info {
  color: #64748b;
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 수식 대상 셀 범례 칩 (Legend Chip) */
.excel-target-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b21a8;
  background: #f3eef8;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid #e5dbf0;
  letter-spacing: -0.01em;
  user-select: none;
}

.excel-target-legend .legend-color-box {
  width: 9px;
  height: 9px;
  background-color: #8b5cf6;
  border-radius: 2px;
  display: inline-block;
  opacity: 0.9;
}

/* 우측 채점 액션 카드 & 버튼 */
.excel-check-action-card {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-check-formula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
  transition: all 0.2s ease;
}

.btn-check-formula:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}

.btn-check-formula:active {
  transform: translateY(0);
}

.formula-feedback-box {
  display: none;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  animation: fadeInFeedback 0.25s ease-out;
}

.formula-feedback-box.show {
  display: block;
}

.formula-feedback-box.success {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
}

.formula-feedback-box.error {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #991b1b;
}

.formula-feedback-box.hint {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #92400e;
}

@keyframes fadeInFeedback {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   [계산작업 - 날짜/텍스트] 텍스트 추출 기본 반응형 카드 컴포넌트
   ======================================================== */
.concept-syntax-large-card {
  background: #fbf9fe;
  border: 1.5px solid #ded5ec;
  border-left: 5px solid #7c3aed;
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.syntax-large-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #7c3aed;
  letter-spacing: 0.05em;
}

.syntax-large-formula {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.28rem;
  font-weight: 700;
  color: #1e1b4b;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.syntax-token-base {
  font-family: 'JetBrains Mono', monospace;
  color: #1e1b4b;
  font-weight: 700;
}

.syntax-token-badge {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 0.94rem;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
}

.syntax-token-badge.blue {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1.5px solid #bfdbfe;
}

.syntax-token-badge.purple {
  background: #faf5ff;
  color: #6d28d9;
  border: 1.5px solid #e9d5ff;
}

.syntax-token-badge.red {
  background: #fef2f2;
  color: #dc2626;
  border: 1.5px solid #fecaca;
}

/* 2, 3, 4번 인수 카드 3분할 그리드 */
.arg-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.arg-card {
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.arg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.arg-card.blue {
  border: 1.5px solid #bfdbfe;
  background: #eff6ff;
}

.arg-card.red {
  border: 1.5px solid #fecaca;
  background: #fef2f2;
}

.arg-card.purple {
  border: 1.5px solid #e9d5ff;
  background: #faf5ff;
}

.arg-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.94rem;
}

.arg-card.blue .arg-card-header { color: #1d4ed8; }
.arg-card.red .arg-card-header { color: #b91c1c; }
.arg-card.purple .arg-card-header { color: #6d28d9; }

.arg-card-desc {
  font-size: 0.85rem;
  line-height: 1.5;
}

.arg-card.blue .arg-card-desc { color: #1e3a8a; }
.arg-card.red .arg-card-desc { color: #7f1d1d; }
.arg-card.purple .arg-card-desc { color: #581c87; }

/* 5번 핵심 설명 & 원리 박스 */
.concept-core-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.concept-core-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.concept-core-body {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.65;
  margin: 0;
}

.concept-warning-callout {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 0.88rem;
  color: #92400e;
  font-weight: 600;
  line-height: 1.55;
}

/* 6번 & 7번 하단 2열 그리드 */
.preview-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.preview-card {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.preview-card.excel-style {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
}

.preview-card.terminal-style {
  background: #1e1e2e;
  border: 1.5px solid #313244;
}

.preview-card-header {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.preview-card.excel-style .preview-card-header {
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
  color: #475569;
}

.preview-card.terminal-style .preview-card-header {
  background: #181825;
  border-bottom: 1px solid #313244;
  color: #a6adc8;
}

.preview-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 6번 미니 엑셀 표 */
.mini-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Pretendard', sans-serif;
  font-size: 0.86rem;
}

.mini-preview-table th, .mini-preview-table td {
  border: 1px solid #cbd5e1;
  padding: 8px 10px;
  text-align: center;
}

.mini-preview-table th.col-head {
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  font-size: 0.76rem;
}

.mini-preview-table th.row-head {
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  font-size: 0.76rem;
  width: 32px;
}

.mini-preview-table td.header-cell {
  background: #f1f5f9;
  font-weight: 600;
  color: #334155;
}

.mini-preview-table td.data-cell {
  background: #ffffff;
  color: #0f172a;
  font-family: 'Fira Code', monospace;
  font-size: 0.82rem;
}

/* 7번 터미널 출력 */
.terminal-output-content {
  font-family: 'Fira Code', monospace;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #cdd6f4;
  font-size: 0.88rem;
}

.terminal-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.terminal-label {
  color: #a6adc8;
  font-size: 0.8rem;
  min-width: 65px;
}

.terminal-formula {
  color: #89b4fa;
  font-weight: 600;
}

.terminal-val {
  color: #a6e3a1;
  font-weight: 700;
  font-size: 1rem;
}

.terminal-badge {
  background: rgba(166, 227, 161, 0.15);
  color: #a6e3a1;
  border: 1px solid #a6e3a1;
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 4px;
}

.terminal-desc {
  color: #9399b2;
  font-size: 0.8rem;
  font-family: 'Pretendard', sans-serif;
  line-height: 1.5;
  border-top: 1px dashed #45475a;
  padding-top: 8px;
  margin-top: 2px;
}

/* 우측 작업 지시사항 리스트 카드 */
.mission-directive-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.mission-directive-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.directive-badge {
  display: inline-flex;
  align-items: center;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}

.directive-text {
  font-size: 0.84rem;
  color: #334155;
  line-height: 1.45;
}

.directive-hint {
  font-family: 'Fira Code', monospace;
  font-size: 0.78rem;
  color: #64748b;
}

.directive-hint code {
  color: #7c3aed;
  background: #f5f3ff;
  padding: 1px 4px;
  border-radius: 3px;
}

@media (max-width: 900px) {
  .arg-cards-grid {
    grid-template-columns: 1fr;
  }
  .preview-2col-grid {
    grid-template-columns: 1fr;
  }
}

/* 3개 함수 순차 반복 렌더링 스타일 보강 */
.function-learning-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 4px;
}

.function-block-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #1e1b4b;
  margin: 8px 0 0 0;
  letter-spacing: -0.01em;
}

.function-pill-badge {
  background: #7c3aed;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arg-cards-grid.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.arg-cards-grid.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.syntax-large-formula {
  font-family: 'Fira Code', 'Pretendard', monospace;
  font-size: 1.3rem;
  font-weight: 800;
}

.syntax-token-badge {
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 0.96rem;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.syntax-token-badge.blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.syntax-token-badge.purple {
  background: #faf5ff;
  color: #7c3aed;
  border: 1px solid #e9d5ff;
}

.syntax-token-badge.red {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}



th.excel-col-header {
  cursor: col-resize;
  user-select: none;
  transition: background-color 0.15s ease;
}
th.excel-col-header:hover {
  background: #e2e8f0;
}
th.excel-row-header {
  cursor: row-resize;
  user-select: none;
  transition: background-color 0.15s ease;
}
th.excel-row-header:hover {
  background: #e2e8f0;
}

/* 초록색 뱃지 및 인수 카드 (FIND / SEARCH 시작위치용) */
.syntax-token-badge.green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.arg-card.green {
  border: 1.5px solid #a7f3d0;
  background: #ecfdf5;
}
.arg-card.green .arg-card-header {
  color: #059669;
}
.arg-card.green .arg-card-desc {
  color: #065f46;
}

.arg-cards-grid.col-1 {
  grid-template-columns: 1fr;
}

/* 4번 인수: 자주 / 마젠타 (Excel 5번 박스) */
.syntax-token-badge.magenta {
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
}
.arg-card.magenta {
  border: 1.5px solid #fbcfe8;
  background: #fdf2f8;
}
.arg-card.magenta .arg-card-header {
  color: #be185d;
}
.arg-card.magenta .arg-card-desc {
  color: #831843;
}

/* 5번 인수: 주황 / 갈색 (Excel 6번 박스) */
.syntax-token-badge.orange {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.arg-card.orange {
  border: 1.5px solid #fed7aa;
  background: #fff7ed;
}
.arg-card.orange .arg-card-header {
  color: #c2410c;
}
.arg-card.orange .arg-card-desc {
  color: #7c2d12;
}

/* 6번 인수: 청록 (Excel 7번 박스) */
.syntax-token-badge.teal {
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #99f6e4;
}
.arg-card.teal {
  border: 1.5px solid #99f6e4;
  background: #f0fdfa;
}
.arg-card.teal .arg-card-header {
  color: #0f766e;
}
.arg-card.teal .arg-card-desc {
  color: #134e4a;
}

/* ==========================================================================
   컴활 2급 계산작업 복습 - 오프라인 엑셀 연계 자동 채점 컴포넌트 스타일
   ========================================================================== */

.com2-offline-review-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #1e1b2e;
}

/* 1. 상단 대시보드 헤더 */
.com2-offline-review-header {
  background: #ffffff;
  border: 1.5px solid #ded5ec;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 3px 12px rgba(98, 28, 203, 0.05);
}

.com2-offline-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.com2-offline-badge {
  background: #7c3aed;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.com2-offline-category-crumb {
  font-size: 0.85rem;
  font-weight: 600;
  color: #8c7f9e;
}

.com2-offline-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #1e1b2e;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}

.com2-offline-subtitle {
  font-size: 0.92rem;
  font-weight: 500;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.com2-offline-divider {
  height: 1px;
  background: #e2e8f0;
  margin-top: 14px;
  width: 100%;
}

/* 2. 상단 5개 문제 카드 스택 (다크/블랙 카드 톤앤매너) */
.com2-offline-questions-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.com2-offline-quiz-card {
  background: #ffffff;
  border: 1.5px solid #ded5ec;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 3px 12px rgba(98, 28, 203, 0.05);
  transition: all 0.2s ease;
}

.com2-offline-quiz-card:hover {
  border-color: #8b5cf6;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.12);
}

.quiz-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.quiz-card-title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.quiz-card-number-badge {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #d8b4fe;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.quiz-card-title {
  font-size: 1.06rem;
  font-weight: 700;
  color: #1e1b2e;
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.01em;
}

.quiz-card-score-badge {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.quiz-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quiz-card-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #334155;
  font-size: 0.93rem;
  line-height: 1.6;
}

.bullet-arrow {
  color: #7c3aed;
  font-size: 0.78rem;
  margin-top: 4px;
  flex-shrink: 0;
}

.bullet-text {
  flex: 1;
}

/* 3. 하단 실습 워크플로우 */
.com2-offline-workflow-card {
  background: #ffffff;
  border: 1.5px solid #ded5ec;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(98, 28, 203, 0.05);
}

.workflow-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f1f5;
}

.workflow-icon {
  font-size: 1.5rem;
}

.workflow-main-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #1e1b2e;
  margin: 0 0 4px 0;
}

.workflow-sub-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #78698c;
  margin: 0;
}

.workflow-steps-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.workflow-step-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-num-pill {
  font-size: 0.78rem;
  font-weight: 800;
  color: #621ccb;
  background: #f1eff7;
  border: 1px solid #d9cfee;
  padding: 2px 10px;
  border-radius: 6px;
  align-self: flex-start;
}

/* [1단계: 초록색 다운로드 버튼] */
.excel-workflow-btn-download {
  width: 100%;
  background: #059669;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 15px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
  transition: all 0.2s ease;
}

.excel-workflow-btn-download:hover {
  background: #047857;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

.excel-workflow-btn-download:active {
  transform: translateY(0);
}

/* [2단계: 회색 파일 첨부 박스 (Drag & Drop Zone)] */
.excel-drop-zone {
  border: 2px dashed #9ca3af;
  border-radius: 14px;
  padding: 30px 24px;
  text-align: center;
  background: #f9fafb;
  cursor: pointer;
  transition: all 0.2s ease;
}

.excel-drop-zone:hover {
  border-color: #7c3aed;
  background: #fdfaff;
}

.excel-drop-zone.dragover {
  border-color: #7c3aed;
  background: #f5f3ff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
  transform: scale(1.005);
}

.drop-zone-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ede9fe;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px auto;
}

.drop-zone-main-text {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  margin: 0 0 6px 0;
}

.drop-zone-sub-text {
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
}

/* 업로드 완료 상태 표시 */
.excel-drop-zone.completed {
  background: #f0fdf4;
  border-color: #10b981;
  border-style: solid;
}

.uploaded-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px;
}

.uploaded-file-icon {
  font-size: 2rem;
}

.uploaded-file-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 180px;
}

.uploaded-file-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  word-break: break-all;
}

.uploaded-file-size {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 500;
}

.uploaded-success-badge {
  background: #10b981;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-reupload-file {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reupload-file:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* [3단계: 보라색 정답 확인 및 자동 채점 버튼] */
.excel-workflow-btn-grade {
  width: 100%;
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 1.15rem;
  font-weight: 800;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
  transition: all 0.2s ease;
}

.excel-workflow-btn-grade:not(:disabled):hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.excel-workflow-btn-grade:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
  box-shadow: none;
}

.btn-check-icon {
  font-size: 1.3rem;
  font-weight: 900;
}

/* 4. 자동 채점 결과 표시 카드 (다크/블랙 카드 톤앤매너) */
.excel-grading-result {
  animation: fadeInResult 0.3s ease-out;
}

@keyframes fadeInResult {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.grading-result-card {
  background: #11111b;
  border: 1.5px solid #28283d;
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.grading-result-header {
  border-bottom: 1px solid #28283d;
  padding-bottom: 22px;
  margin-bottom: 20px;
}

.result-score-block {
  text-align: center;
}

.result-score-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: -0.01em;
}

.result-score-number {
  margin: 10px 0 6px 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.score-current {
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.score-total {
  font-size: 1.3rem;
  font-weight: 700;
  color: #64748b;
}

.result-feedback-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 8px 0 0 0;
}

.grading-problems-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grading-problem-item {
  background: #181825;
  border: 1px solid #28283d;
  border-radius: 12px;
  padding: 16px 20px;
  transition: border-color 0.2s;
}

.grading-problem-item.pass {
  border-left: 5px solid #10b981;
}

.grading-problem-item.fail {
  border-left: 5px solid #ef4444;
}

.problem-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.problem-item-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 240px;
}

.problem-item-num {
  font-size: 0.82rem;
  font-weight: 800;
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.15);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.problem-item-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #f1f1f5;
  line-height: 1.45;
}

.problem-item-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-pill {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.status-pill.pass {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.status-pill.fail {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.btn-toggle-expl {
  background: #252538;
  border: 1px solid #3b3b55;
  color: #cbd5e1;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-toggle-expl:hover {
  background: #32324a;
  color: #ffffff;
  border-color: #6366f1;
}

.toggle-arrow {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}

.problem-expl-collapse {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #28283d;
}

.expl-inner-box {
  background: #0d0d15;
  border: 1px solid #232338;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expl-formula-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.expl-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #94a3b8;
}

.expl-code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #38bdf8;
  background: #181825;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #28283d;
}

.expl-desc-text {
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

/* 모바일 반응형 대응 */
@media (max-width: 768px) {
  .com2-offline-review-header {
    padding: 16px;
  }
  .com2-offline-title {
    font-size: 1.25rem;
  }
  .quiz-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .quiz-card-formula-criteria {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .excel-workflow-btn-download,
  .excel-workflow-btn-grade {
    font-size: 1rem;
    padding: 14px;
  }
  .uploaded-file-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .problem-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .problem-item-status {
    width: 100%;
    justify-content: space-between;
  }
}