/* ─── 12 Cobot 프로젝트 (아카데미 Theme Variable 기반) ─────────────── */

.cp-empty {
  padding: 40px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 14px;
}

/* ══ 1step: 스케치 컨테이너 ══════════════════════════════════════ */
.cp-sketch {
  padding: 16px 16px 112px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ── mission 브리핑 블록 ──────────────────────────────────────────── */
.cp-mission {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-brand) 7%, var(--color-bg-card));
  border: 1.5px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-mission::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--color-brand) 9%, transparent), transparent 60%);
  pointer-events: none;
}

.cp-mission-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-brand);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cp-mission-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.cp-mission-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.cp-mission-how {
  margin-top: 4px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--color-brand) 7%, var(--color-bg-hover));
  border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.cp-mission-how strong { color: var(--color-brand); font-weight: 700; }

.cp-flow-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-flow-card {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--color-border-main) 88%, var(--color-text-secondary));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-brand) 5%, transparent), transparent 58%),
    var(--color-bg-card);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.cp-flow-card:hover,
.cp-flow-card.is-active {
  transform: translateY(-1px);
  border-color: var(--color-brand);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.cp-flow-card.is-complete {
  border-color: color-mix(in srgb, #22c55e 72%, var(--color-border-main));
}

.cp-flow-card-num {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-brand);
  color: #001014;
  font-weight: 900;
  font-size: 13px;
}

[data-theme="light"] #pg-academy .cp-flow-card-num {
  color: #fff;
}

.cp-flow-card-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cp-flow-card-main strong {
  font-size: 14px;
  line-height: 1.25;
  color: var(--color-text-primary);
}

.cp-flow-card-main small {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.cp-flow-code-chip {
  justify-self: end;
  max-width: 170px;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand) 13%, var(--color-bg-hover));
  color: var(--color-brand);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .cp-flow-card {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
  }

  .cp-flow-code-chip {
    grid-column: 2;
    justify-self: start;
  }
}

/* ══ 스케치 푸터 ═════════════════════════════════════════════════ */
.cp-sketch-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  margin-top: 22px;
  padding: 12px 16px 14px;
  background: var(--color-bg-body, #080808);
  box-shadow: 0 -20px 0 var(--color-bg-body, #080808);
  border-top: 1px solid color-mix(in srgb, var(--color-border-main) 55%, transparent);
}

.cp-reset-btn,
.cp-check-btn,
.cp-next-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.1s;
}

.cp-reset-btn {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-main);
}

.cp-check-btn {
  background: var(--color-brand);
  color: #000;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.cp-next-btn {
  background: #22c55e;
  color: #03120a;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.28);
}

[data-theme="light"] .cp-check-btn,
[data-theme="light"] .cp-next-btn { color: #fff; }

.cp-reset-btn:hover,
.cp-check-btn:hover,
.cp-next-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── Result 배너 ─────────────────────────────────────────────────── */
.cp-check-result {
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.cp-result--ok      { background: rgba(34,197,94,.15);   color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.cp-result--partial { background: rgba(251,191,36,.1);   color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.cp-result--info    {
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  color: var(--color-brand);
  border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
}

/* ══ 2step: 코드 + 힌트 ══════════════════════════════════════════ */
.cp-code-view { display: flex; flex-direction: column; height: 100%; }

.cp-lang-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-main);
  flex-wrap: wrap;
}

/* cobot Coding Language 셀렉터: sidebar/typing dock와 동일한 nav-badge.lang-tag 디자인 사용.
   .cp-lang-btn은 클릭 영역 + active 강조만 담당하는 투명 래퍼. */
.cp-lang-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.cp-lang-btn .nav-badge.lang-tag {
  border: 1px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cp-lang-btn:hover:not(.active) .nav-badge.lang-tag {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.cp-lang-btn.active .nav-badge.lang-tag {
  border-color: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}

.cp-lang-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.cp-level-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-main);
  flex-wrap: wrap;
}

.cp-level-label { font-size: 12px; color: var(--color-text-secondary); margin-right: 4px; }

.cp-level-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border-main);
  background: transparent;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.cp-level-btn.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #000;
}

[data-theme="light"] .cp-level-btn.active { color: #fff; }

.cp-level-btn:hover:not(.active) {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.cp-level-desc { font-size: 12px; color: var(--color-text-secondary); margin-left: 8px; flex: 1; }

.cp-level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-border-main);
  background: var(--color-bg-card);
}

.cp-level-row .cp-code-toolbar {
  flex: 1;
  border-bottom: 0;
}

.cp-lang-select-wrap {
  display: none;
  align-items: center;
  gap: 6px;
  padding-right: 20px;
  white-space: nowrap;
}

.cp-lang-select-label {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.cp-lang-select {
  min-width: 118px;
  height: 30px;
  border: 1px solid var(--color-border-main);
  border-radius: 6px;
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-sans);
  padding: 0 8px;
}

.cp-code-body { flex: 1; overflow: hidden; }

.cp-code-split {
  display: grid;
  grid-template-columns: 1fr 240px;
  height: 100%;
  min-height: 340px;
}

.cp-code-editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--color-border-main);
}

.cp-editor-header {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border-main);
  font-size: 12px;
}

.cp-lang-dot { width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; }
.cp-lang-name { color: #3b82f6; font-weight: 600; }
.cp-file-name { color: var(--color-text-secondary); }

.cp-editor-goal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border-main);
  min-width: 0;
}

.cp-editor-goal-label {
  flex: 0 0 auto;
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 800;
}

.cp-editor-goal-text {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-code-lines {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 10px 0;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.7;
  user-select: text;
  -webkit-user-select: text;
}

.cp-line {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 0 8px 0 12px;
  border-left: 3px solid transparent;
  transition: background 0.2s;
}

.cp-code-lines--wrap .cp-line {
  align-items: start;
}

.cp-line--blank { height: 1.4em; }

.cp-line--highlight {
  background: color-mix(in srgb, var(--color-brand) 15%, transparent);
  border-left-color: var(--color-brand);
}

.cp-line--dim { opacity: 0.35; }

.cp-ln {
  width: 42px;
  min-width: 42px;
  color: var(--color-text-tertiary);
  font-size: 14px;
  line-height: inherit;
  text-align: right;
  margin-right: 0;
  user-select: none;
  -webkit-user-select: none;
  padding-top: 0;
}

.cp-ln::before {
  content: attr(data-line);
}

.cp-lc {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--color-text-primary);
  user-select: text;
  -webkit-user-select: text;
}

.cp-code-lines--wrap .cp-lc {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cp-line-marker {
  width: 14px;
  height: 14px;
  margin: 4px auto 0;
  border: 1.25px solid color-mix(in srgb, var(--color-border-main) 85%, var(--color-text-secondary));
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cp-line-marker:hover {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.cp-line-marker.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.cp-line.is-selected {
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  border-left-color: var(--color-brand);
}

@media (max-width: 980px) {
  .cp-tutor-bar {
    display: none;
  }

  .cp-lang-toolbar {
    display: none;
  }

  .cp-level-row {
    padding: 0 10px;
  }

  .cp-level-row .cp-code-toolbar {
    padding: 8px 0;
  }

  .cp-lang-select-wrap {
    display: inline-flex;
    padding-right: 0;
  }

  .cp-code-split--mem .cp-line {
    grid-template-columns: 28px 30px minmax(0, 1fr);
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .cp-code-split--mem .cp-line-marker {
    grid-column: 1;
    grid-row: 1;
    margin: 4px auto 0;
  }

  .cp-code-split--mem .cp-ln {
    grid-column: 2;
    grid-row: 1;
    width: 30px;
    min-width: 30px;
  }

  .cp-code-split--mem .cp-lc {
    grid-column: 3;
    grid-row: 1;
  }
}

.cp-code-view .c-comment { color: #64748B; opacity: 1; }
.cp-code-view .c-type { color: #0891B2; font-weight: 700; }
.cp-code-view .c-fn { color: #10B981; font-weight: 700; }
.cp-code-view .c-keyword { color: #7C3AED; font-weight: 700; }
.cp-code-view .c-num { color: #D97706; font-weight: 700; }
.cp-code-view .c-string { color: #DC2626; font-weight: 700; }
.cp-code-view .c-const { color: #EA580C; font-weight: 700; }

.cp-hint-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
  background: var(--color-bg-card);
}

.cp-hint-panel-hd { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 4px; }

.cp-hint-card {
  padding: 10px 12px;
  background: var(--color-bg-hover);
  border-radius: 8px;
  border: 1.5px solid var(--color-border-main);
  cursor: pointer;
  transition: all 0.15s;
}

.cp-hint-card:hover { border-color: var(--color-brand); }

.cp-hint-card.active {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-hover));
}

.cp-hint-num   { font-size: 10px; font-weight: 700; color: var(--color-brand); margin-bottom: 3px; }
.cp-hint-title { font-size: 12px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; }
.cp-hint-body  { font-size: 11px; color: var(--color-text-secondary); line-height: 1.5; }

.cp-sim-btn {
  padding: 9px;
  border-radius: 8px;
  border: none;
  background: var(--color-brand);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: auto;
  transition: opacity 0.15s;
}

[data-theme="light"] .cp-sim-btn { color: #fff; }
.cp-sim-btn:hover { opacity: 0.85; }

/* ══ 2step: 코딩 튜터 mission 바 ════════════════════════════════════ */
.cp-tutor-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-main);
  flex-wrap: wrap;
}

.cp-tutor-logo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
  padding: 4px 10px;
  border-radius: var(--border-radius-sm, 6px);
  white-space: nowrap;
}

.cp-tutor-goal {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border-main);
  border-radius: var(--border-radius-md, 8px);
  padding: 7px 14px;
  min-width: 0;
}

.cp-tutor-goal-label { font-size: 11px; color: var(--color-brand); font-weight: 700; white-space: nowrap; }
.cp-tutor-goal-text  { font-size: 13px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* 레벨 select 툴바 */
.cp-code-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border-main);
}

.cp-back-sketch-btn {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-main);
  border-radius: var(--border-radius-sm, 6px);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.cp-back-sketch-btn:hover { color: var(--color-text-primary); border-color: var(--color-border-light); }

.cp-toolbar-divider { color: var(--color-border-light); font-size: 11px; margin: 0 2px; user-select: none; }

.cp-code-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cp-code-split {
  flex: 1;
  min-height: 0;
}

.cp-code-editor,
.cp-hint-panel {
  min-height: 0;
}

.cp-editor-header {
  --cp-lang-color: #3b82f6;
}

.cp-lang-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cp-lang-color, #3b82f6);
  flex-shrink: 0;
}

.cp-lang-name {
  color: var(--cp-lang-color, #3b82f6);
  font-weight: 600;
}

.cp-file-name {
  color: var(--color-text-secondary);
}

/* ══ responsive: mobile ══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cp-ai-panel { right: 8px; width: calc(100vw - 16px); }
}

@media (max-width: 700px) {
  .cp-code-split { grid-template-columns: 1fr; }
  .cp-hint-panel { border-top: 1px solid var(--color-border-main); border-left: none; }
}