/* 1. 폰트 정의 */
    @font-face {
      font-family: 'SchoolSafetyNotification';
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-R.woff2') format('woff2');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'SchoolSafetyNotification';
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-B.woff2') format('woff2');
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      font-family: 'Pretendard';
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'Pretendard';
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
      font-weight: 600;
      font-display: swap;
    }
    @font-face {
      font-family: 'Pretendard';
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      font-family: 'MaruBuri';
      src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2);
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'MaruBuri';
      src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2);
      font-weight: 700;
      font-display: swap;
    }

    /* 2. 조선·전통 문화 테마 변수 */
    :root {
      --bg-main: #F9F6F0;       /* 따뜻한 한지 미색 배경 */
      --text-main: #2C2724;     /* 깊은 먹색 */
      --text-muted: #554D46;    /* 보조 설명 먹색 */
      --accent-red: #8A3B29;    /* 단청 적토색 (강조, 헤더) */
      --accent-teal: #2E5B70;   /* 단청 청록색 (버튼, 링크, 배지) */
      --card-bg: #FFFFFF;       /* 카드 기본 배경 */
      --card-sub: #EFEAE1;      /* 보조 박스/안내 배경 */
      --border-color: #DDD4C7;  /* 경계선 */
      --radius: 12px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--bg-main) !important;
      color: var(--text-main) !important;
      font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
      line-height: 1.6;
      padding: 24px 16px;
      word-break: keep-all;
      user-select: none;
    }

    .container {
      max-width: 980px;
      margin: 0 auto;
    }

    /* 헤더 */
    header.main-header {
      border-bottom: 3px solid var(--accent-red);
      padding-bottom: 16px;
      margin-bottom: 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .lesson-tag {
      display: inline-block;
      background-color: var(--accent-teal);
      color: #ffffff !important;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 0.88rem;
      font-weight: 600;
      margin-bottom: 8px;
    }

    h1.main-title {
      font-family: 'SchoolSafetyNotification', sans-serif !important;
      color: var(--accent-red) !important;
      font-size: 1.85rem;
      font-weight: 700;
    }

    /* 활동 안내 박스 */
    .mission-box {
      background-color: var(--card-sub);
      border-left: 5px solid var(--accent-red);
      border-top: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      padding: 16px 20px;
      border-radius: 4px var(--radius) var(--radius) 4px;
      margin-bottom: 24px;
      font-size: 1.02rem;
      color: var(--text-main);
    }

    .mission-box strong {
      color: var(--accent-red);
    }

    /* 단원 탭 메뉴 */
    .unit-nav {
      display: flex;
      gap: 10px;
      margin-bottom: 24px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .unit-btn {
      padding: 10px 18px;
      border-radius: var(--radius);
      font-size: 0.95rem;
      font-weight: 700;
      border: 1px solid var(--border-color);
      background: var(--card-bg);
      color: var(--text-main);
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .unit-btn.active {
      color: #ffffff !important;
    }

    /* 카드 그리드 레이아웃 */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: 0 4px 6px rgba(44, 39, 36, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(44, 39, 36, 0.08);
    }

    .card .chasi-badge {
      display: inline-block;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .card h2 {
      font-family: 'SchoolSafetyNotification', sans-serif !important;
      font-size: 1.18rem;
      color: var(--text-main) !important;
      margin-bottom: 8px;
      padding-left: 8px;
      line-height: 1.4;
    }

    .card p {
      font-size: 0.92rem;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    /* 상호작용 버튼 */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
      background-color: var(--accent-teal);
      color: #ffffff !important;
      text-decoration: none;
      padding: 10px 16px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.92rem;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s ease;
      width: 100%;
    }

    .btn:hover {
      opacity: 0.9;
    }

    .btn.secondary {
      background-color: transparent;
      border: 1.5px solid var(--accent-teal);
      color: var(--accent-teal) !important;
    }

    .btn.secondary:hover {
      background-color: var(--card-sub);
    }

    .choice-marker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      background: var(--card-sub);
      border: 1px solid currentColor;
    }

    .choice-marker-0 {
      color: #2D6A4F;
      border-radius: 50%;
    }

    .choice-marker-1 {
      color: #8A3B29;
      border-radius: 6px;
    }

    .choice-marker-2 {
      color: #1D4ED8;
      border-radius: 50% 6px 50% 6px;
    }

    .btn.disabled {
      background-color: #E2DCD0 !important;
      color: #8C847B !important;
      cursor: default;
    }

    .serif-font {
      font-family: 'MaruBuri', serif !important;
    }
.simulator-action-info {
  margin-bottom: 8px;
  color: var(--text-main);
  font-size: 0.85rem;
  line-height: 1.5;
}

.simulator-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.simulator-action-group .btn {
  flex: 1 1 120px;
  min-height: 44px;
  padding: 7px 8px;
  font-size: 0.82rem;
}

/* Regular MUD 근거 기반 탐구 활동 */
.inquiry-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fffdf8;
  color: var(--text-main);
  /* 아이패드 가로(1180x820) 등 세로 공간이 좁은 화면에서 "판단 확인" 버튼이
     화면 밖으로 밀려나지 않도록, 패널 자체를 스크롤 영역으로 만들고
     제출 버튼을 그 안에서 하단 고정(sticky)한다. */
  max-height: min(54vh, 440px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.inquiry-heading {
  margin: 0 0 8px;
  font-size: 0.98rem;
  line-height: 1.45;
}

/* 근거 인벤토리: 접었을 땐 배지 한 줄, 펼치면 라벨 칩 목록. 세로를
   기본으로 늘리지 않으면서 "무엇을 모았는지"를 항상 열람 가능하게 한다. */
.inquiry-evidence-inventory {
  margin-bottom: 10px;
}

.inquiry-evidence-inventory summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f4ed;
  color: #24553f;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.inquiry-evidence-inventory summary::-webkit-details-marker {
  display: none;
}

.inquiry-evidence-inventory summary::after {
  content: '▾';
  font-size: 0.7rem;
}

.inquiry-evidence-inventory[open] summary::after {
  content: '▴';
}

.inquiry-evidence-inventory summary:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.25);
  outline-offset: 2px;
}

.inquiry-evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.inquiry-evidence-chip {
  padding: 4px 9px;
  border: 1px solid #b9d4c4;
  border-radius: 999px;
  background: #ffffff;
  color: #24553f;
  font-size: 0.76rem;
  line-height: 1.4;
}

.inquiry-evidence-chip-empty {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.inquiry-section {
  margin: 0 0 12px;
  padding: 10px;
  border-radius: 8px;
  background: var(--card-sub);
}

.inquiry-section:last-child {
  margin-bottom: 0;
}

.inquiry-section-title {
  margin: 0 0 7px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.inquiry-options,
.inquiry-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 7px;
}

.inquiry-option,
.inquiry-evidence,
.inquiry-move,
.inquiry-submit {
  min-height: 44px;
  border: 1.5px solid #5f776b;
  border-radius: 8px;
  background: #ffffff;
  color: #2c3d35;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
  cursor: pointer;
}

.inquiry-option,
.inquiry-evidence {
  padding: 8px 9px;
  text-align: left;
}

.inquiry-option:hover:not(:disabled),
.inquiry-option:focus-visible,
.inquiry-evidence:hover:not(:disabled),
.inquiry-evidence:focus-visible,
.inquiry-move:focus-visible,
.inquiry-submit:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.25);
  outline-offset: 2px;
}

.inquiry-option.is-selected,
.inquiry-evidence.is-selected,
.inquiry-evidence.is-viewed {
  border-color: #047857;
  background: #dff5e8;
  color: #174c36;
}

.inquiry-option:disabled,
.inquiry-evidence:disabled,
.inquiry-move:disabled,
.inquiry-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.inquiry-evidence-detail {
  margin: 8px 0 0;
  padding: 8px;
  border-left: 4px solid #059669;
  background: #ffffff;
  font-size: 0.8rem;
  line-height: 1.5;
}

.inquiry-sequence-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding-left: 25px;
}

.inquiry-sequence-card {
  padding: 8px;
  border: 1px solid #d7cec1;
  border-radius: 8px;
  background: #ffffff;
}

.inquiry-sequence-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.inquiry-sequence-controls {
  display: flex;
  gap: 6px;
}

.inquiry-move {
  flex: 1;
  min-width: 44px;
  padding: 5px 8px;
}

.inquiry-submit {
  width: 100%;
  margin-top: 9px;
  padding: 9px 12px;
  border-color: #047857;
  background: #047857;
  color: #ffffff;
  /* .inquiry-panel의 내부 스크롤 하단에 항상 붙어 있도록 한다. */
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -4px 10px rgba(20, 30, 25, 0.14);
}

.inquiry-error {
  margin: 0;
  color: #9f1239;
}

@media (max-width: 620px) {
  .inquiry-panel {
    padding: 9px;
  }

  .inquiry-options,
  .inquiry-evidence-grid {
    grid-template-columns: 1fr;
  }
}

/* 협동 MUD 파일럿 진입점 */
.cooperative-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid #D8C3A5;
  border-left: 5px solid #8A3B29;
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(135deg, #FFF9EF, #F4E7D2);
}

.cooperative-entry-tag {
  display: inline-block;
  margin-bottom: 5px;
  color: #8A3B29;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cooperative-entry h2 {
  margin-bottom: 5px;
  color: #3D2921;
  font-family: 'SchoolSafetyNotification', sans-serif;
  font-size: 1.2rem;
}

.cooperative-entry p {
  margin: 0;
  color: #554D46;
  font-size: 0.9rem;
}

.cooperative-entry-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 15px;
  border-radius: 8px;
  background: #2E5B70;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.cooperative-entry-link:hover,
.cooperative-entry-link:focus-visible {
  background: #23485A;
  outline: 3px solid rgba(46, 91, 112, 0.25);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .cooperative-entry {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .cooperative-entry-link {
    justify-content: center;
    width: 100%;
  }
}

/* 역사 미니게임: 유물 카드 짝맞추기 (3D 플립 카드) */
.card-flip-wrap {
  perspective: 1000px;
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.card-flip-inner.flipped {
  transform: rotateY(180deg);
}

.card-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
}

.card-flip-back {
  background: #1F1B19;
  border: 2px solid rgba(183, 121, 31, 0.4);
}

.card-flip-front {
  background: linear-gradient(135deg, #1F1B19, #14110F);
  border: 2px solid #B7791F;
  transform: rotateY(180deg);
}

.card-flip-inner.matched .card-flip-front {
  border-color: #2D6A4F;
  background: rgba(45, 106, 79, 0.25);
}

/* 확장 역사 활동: 타임머신 스토리 / 역사 미니게임 토글 스위치 */
.activity-toggle {
  display: flex;
  gap: 6px;
  background: #14110F;
  border: 1px solid #3D352E;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
  width: fit-content;
}

.activity-toggle-btn {
  border: none;
  background: transparent;
  color: #9B9088;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.activity-toggle-btn.active {
  background: #B7791F;
  color: #14110F;
}

/* 정규 32(실제 28)편 연대표 띠 (D-036, 라운드 9). 완료 화면의 이전/다음
   차시 이동 + 전체 진도 띠. 세 상태(완료/현재/미완료)는 색뿐 아니라
   기호(✓/●/○)로도 구분해 색각 이상에서도 읽히게 한다. */
.lesson-track-nav {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.lesson-track-nav-btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-sub);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.lesson-track-nav-btn.is-disabled {
  visibility: hidden;
}

.lesson-track-nav-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: #665F59;
}

.lesson-track-details {
  margin-top: 10px;
}

.lesson-track-details summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-teal);
  padding: 6px 0;
}

.lesson-track-head {
  margin-bottom: 6px;
}

.lesson-track-heading {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
}

.lesson-track-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.lesson-track-item {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  background: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-main);
}

.lesson-track-item.is-done {
  border-color: #047857;
  background: #dff5e8;
  color: #174c36;
}

.lesson-track-item.is-current {
  border-color: var(--accent-red);
  background: rgba(138, 59, 41, 0.1);
  color: var(--accent-red);
  box-shadow: 0 0 0 2px var(--accent-red) inset;
}

.lesson-track-item.is-todo {
  opacity: 0.72;
}

.lesson-track-mark {
  font-size: 0.85rem;
}

.lesson-track-title {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 연대표 띠 2단계(사양서 반영, 2026-09-21) --------------------------
   상태 구분은 색이 아니라 아이콘·테두리 종류·글자 라벨로 한다.
   '아직' 칸을 흐리게 하지 않는다(저시력 학생이 못 읽는다). */
.lesson-track-portal {
  margin: 0 0 22px;
}

.lesson-track-head {
  margin-bottom: 8px;
}

.lesson-track-heading {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
}

.lesson-track-caption {
  margin: 4px 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-sub, #5b5348);
}

.lesson-track-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.lesson-track-unit {
  flex: 0 0 auto;
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-sub, #5b5348);
}

.lesson-track-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: visible;
  padding-bottom: 2px;
}

.lesson-track-item {
  flex: 0 0 auto;
  min-width: 60px;
  min-height: 52px;
  gap: 1px;
  padding: 6px 8px;
  border: 1.5px solid var(--border-color);
  background: #ffffff;
  color: var(--text-main);
  line-height: 1.25;
}

.lesson-track-item.is-todo {
  opacity: 1;
  border-color: #cfc7ba;
}

.lesson-track-item.is-current {
  border: 2px dashed var(--accent-red);
  background: rgba(138, 59, 41, 0.08);
  color: var(--accent-red);
  box-shadow: none;
}

.lesson-track-era {
  font-size: 0.64rem;
  font-weight: 700;
  opacity: 0.85;
}

.lesson-track-state {
  font-size: 0.58rem;
  font-weight: 700;
}

.lesson-track-item.is-todo .lesson-track-state {
  display: none;
}

@media (max-width: 480px) {
  .lesson-track-row {
    display: block;
  }
  .lesson-track-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- 연대표 띠 접근성 보강 (Codex 감사 LT-02·LT-04·LT-05, 2026-09-21) --- */
.lesson-track-cell {
  display: inline-flex;
}

/* 완료한 편을 다시 열었을 때: 점선(지금)과 초록(완료)을 함께 보여 준다. */
.lesson-track-item.is-current-done {
  border: 2px dashed #047857;
  background: #dff5e8;
  color: #174c36;
}

/* 키보드 포커스를 브라우저 기본 외곽선에만 맡기지 않는다. */
.lesson-track-item:focus-visible,
.lesson-track-nav-btn:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}


/* === 2026-09-28 웹사이트 구성 정비 P1 (docs/plans/tasks_site_structure.md) === */

/* 1-2. 어두운 카드의 제목·설명. `.card h2`의 !important 먹색이 어두운 배경 위에서
   제목을 지워 버렸다(명암비 1.09:1). */
.card.card-dark h2 {
  color: #F7E7CE !important;
}
.card.card-dark p {
  color: #D9D0C7;
}

/* 1-1. 선택지가 잠겨 있을 때 먼저 할 일을 알려 준다. */
.choice-lock-hint {
  margin: 0 0 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--card-sub);
  border: 1px dashed var(--border-color);
  font-size: 0.85rem;
  color: var(--text-main);
}

/* 1-1. 좁은 화면에서 선택지 위로 옮겨진 시뮬레이터 카드(카드 안의 카드). */
#mn-interactive-card.mn-interactive-inline {
  margin: 14px 0;
  padding: 12px;
  box-shadow: none;
}

/* 1-4. 단원 탭: 넓은 화면에서는 세 탭을 한 줄에 나눠 담고 긴 이름은 줄바꿈한다. */
@media (min-width: 621px) {
  .unit-nav .unit-btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    line-height: 1.35;
  }
}
/* 좁은 화면에서는 가로 스크롤을 유지하되, 오른쪽이 흐려져 더 있음을 알린다. */
@media (max-width: 620px) {
  .unit-nav {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
}

/* 1-5. 골든벨 창의 닫기 버튼(오른쪽 위 고정)이 단원 탭과 겹치지 않게 탭을 내린다. */
#quiz-unit-tabs {
  margin-top: 36px;
}

/* === 2026-09-28 웹사이트 구성 정비 P2 === */

/* 2-1. 이어서 하기 카드: 고정 문장 과제 상자를 대신한다. */
.continue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-left: 6px solid var(--accent-teal);
  border-radius: var(--radius);
}
.continue-card:empty {
  display: none;
}
.continue-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 320px;
}
.continue-card-heading {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-teal);
}
.continue-card-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.continue-card-title {
  font-size: 1.12rem;
  color: var(--text-main);
  line-height: 1.4;
}
.continue-card-progress {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.continue-card .continue-card-btn {
  width: auto;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 22px;
  background: var(--accent-teal);
  text-decoration: none;
}

/* 2-2. 포털 구역 이동 버튼 */
.section-jump {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.section-jump-link {
  flex: 1 1 140px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.section-jump-link:hover,
.section-jump-link:focus-visible {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}
#section-lessons,
#section-more,
#section-cooperative {
  scroll-margin-top: 12px;
}
@media (max-width: 620px) {
  .continue-card .continue-card-btn {
    width: 100%;
  }
}