/* ============================================================
   joyn-core-bridge.css — joyn-lms 코어 화면을 공통 디자인에 정렬
   (마크업/로직 무변경. 코어 클래스에만 작용하는 안전한 오버라이드 브리지)
   대상: 계정 대시보드(joyn-account)·강의상세(joyn-detail)·플레이어(joyn-lv)·
        편집기(jce/joyn-course-edit)·카탈로그(joyn-archive/joyn-course).
   ------------------------------------------------------------
   1) 모바일 가독성: 중요 텍스트 최소 14px (입력은 iOS 확대방지 16px)
   2) 공통 브랜드 인디고 정렬(--jl-brand)
   ============================================================ */

/* 공통 브랜드 = #4541FF (코어 member-ui·instructor-ui·archive·single-course가 이미 사용하는 사실상 표준) */
:root {
  --jl-brand:      #4541FF;
  --jl-brand-600:  #3530D8;
  --jl-brand-soft: #EEEEFF;
  --jl-accent:     #7C5CFF;
}

/* ---------- 0) 토큰 통일 — 계정 대시보드만 브랜드가 달라 "제각각"의 주범 ----------
   account: --jms-student #1976D2(블루) / --jms-instructor #6C4DDB → 브랜드 계열로 정렬.
   (역할 구분은 유지: 수강생=브랜드 인디고, 강사=바이올렛 액센트)                        */
:root {
  --jms-student:        #4541FF;
  --jms-student-soft:   rgba(69, 65, 255, .10);
  --jms-student-line:   rgba(69, 65, 255, .28);
  --jms-instructor:     #7C5CFF;
  --jms-instructor-soft: rgba(124, 92, 255, .10);
  --jms-instructor-line: rgba(124, 92, 255, .28);
}
/* 계정 대시보드 내비 아이콘도 동일 계열로 */
.joyn-account--member-ui { --joyn-nav-icon: #4541FF; }
.joyn-account--instructor-ui { --joyn-nav-icon: #7C5CFF; }

/* ============================================================
   A) 계정 대시보드 셸 → joyn-ui 앱 셸(좌측 사이드바 + 우측 콘텐츠)
   프로토타입 student/instructor-dashboard.html 과 구조 일치.
   코어가 topnav-scroll/icons 를 display:contents 로 평탄화해 두어
   topnav 를 column flex 로 바꾸면 그대로 사이드바가 된다. (PHP 무변경)
   ============================================================ */
@media (min-width: 768px) {
  .joyn-account--member-ui .joyn-account__layout,
  .joyn-account--instructor-ui .joyn-account__layout {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr);
    align-items: start;
    column-gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 48px !important;
  }
  /* topnav → 사이드바(.ju-side) */
  .joyn-account--member-ui .joyn-account__topnav--student,
  .joyn-account--instructor-ui .joyn-account__topnav--instructor {
    grid-column: 1;
    grid-row: 1 / span 99;
    position: sticky !important;
    top: 24px;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    background: var(--ju-surface, #fff) !important;
    border: 1px solid var(--ju-border, #e7e8f0) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 1px 3px rgba(20,22,40,.06) !important;
    padding: 14px 10px !important;
    margin: 24px 0 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
  /* 사이드바 브랜드 */
  .joyn-account--member-ui .joyn-account__topnav--student::before,
  .joyn-account--instructor-ui .joyn-account__topnav--instructor::before {
    content: "Joyn LMS";
    display: block;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
    color: var(--ju-text, #191c26);
    padding: 8px 12px 14px;
    border-bottom: 1px solid var(--ju-border-2, #eef0f5);
    margin-bottom: 8px;
  }
  /* nav 항목 → .ju-navitem */
  .joyn-account--member-ui .joyn-account__topnav-item--student,
  .joyn-account--member-ui .joyn-account__topnav-icon,
  .joyn-account--instructor-ui .joyn-account__topnav-item--instructor,
  .joyn-account--instructor-ui .joyn-account__topnav-icon {
    flex: none !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ju-text-2, #5a6072) !important;
    text-align: left !important;
  }
  .joyn-account--member-ui .joyn-account__topnav-item--student:hover,
  .joyn-account--member-ui .joyn-account__topnav-icon:hover,
  .joyn-account--instructor-ui .joyn-account__topnav-item--instructor:hover,
  .joyn-account--instructor-ui .joyn-account__topnav-icon:hover {
    background: var(--ju-surface-2, #f1f2f8) !important;
    color: var(--ju-text, #191c26) !important;
  }
  .joyn-account--member-ui .joyn-account__topnav-item--active,
  .joyn-account--member-ui .joyn-account__topnav-icon--active,
  .joyn-account--instructor-ui .joyn-account__topnav-item--active,
  .joyn-account--instructor-ui .joyn-account__topnav-icon--active {
    background: var(--ju-brand-soft, #EEEEFF) !important;
    color: var(--jl-brand) !important;
    font-weight: 700 !important;
  }
  .joyn-account--member-ui .joyn-account__topnav-item--student i,
  .joyn-account--member-ui .joyn-account__topnav-icon i,
  .joyn-account--instructor-ui .joyn-account__topnav-item--instructor i,
  .joyn-account--instructor-ui .joyn-account__topnav-icon i { font-size: 20px !important; }
  /* 아이콘 전용 항목 라벨(위시리스트 등) 좌측 정렬 */
  .joyn-account--member-ui .joyn-account__topnav-icon::after,
  .joyn-account--instructor-ui .joyn-account__topnav-icon::after { font-size: 14px !important; font-weight: 600 !important; }

  /* 나머지 콘텐츠 → 우측 열 */
  .joyn-account--member-ui .joyn-account__modebar,
  .joyn-account--member-ui .joyn-account__id-box,
  .joyn-account--member-ui .joyn-account__main,
  .joyn-account--instructor-ui .joyn-account__modebar,
  .joyn-account--instructor-ui .joyn-account__id-box,
  .joyn-account--instructor-ui .joyn-account__main { grid-column: 2; }
  .joyn-account--member-ui .joyn-account__modebar,
  .joyn-account--instructor-ui .joyn-account__modebar { margin-top: 24px; }
}

/* ---------- 1) 모바일 — 코어 중요 텍스트 14px ---------- */
@media (max-width: 640px) {
  /* 계정 대시보드 */
  .joyn-account__topnav-label, .joyn-account__id-label, .joyn-account__id-value,
  .joyn-account__id-summary-label, .joyn-account__id-summary-value,
  .joyn-account-stat__label, .joyn-account-gate__choice-t, .joyn-account-gate__choice-s,
  .joyn-students-by-course__title,
  /* 강의 상세 */
  .joyn-detail-tab, .joyn-detail-section-box-title, .joyn-detail-section-box-body,
  .joyn-detail-check-item, .joyn-detail-stat-label, .joyn-detail-enroll-btn,
  .joyn-detail-cohort-banner__title, .joyn-detail-cohort-banner__meta, .joyn-detail-cta-enrolled,
  /* 레슨 플레이어 */
  .joyn-lv-tab, .joyn-lv-lesson-title, .joyn-lv-lesson-body, .joyn-lv-attach-name,
  .joyn-lv-curr-item-title, .joyn-lv-nav-btn, .joyn-lv-complete-btn,
  /* 편집기(커리큘럼/레슨) */
  .jce-item__title, .jce-section__title, .jce-btn, .jce-panel__desc,
  .joyn-course-edit__nav-item, .joyn-lesson-edit__title,
  /* 폼·공통 */
  .joyn-form-group label, .joyn-form-hint, .joyn-checkbox-label, .joyn-radio-label,
  .joyn-btn, .joyn-lms .button, .joyn-status-message,
  /* 카탈로그 */
  .joyn-cat-chip, .joyn-section-head__title, .joyn-why-card__title, .joyn-why-card__desc {
    font-size: 14px;
  }
  /* 입력 필드만 iOS 포커스 자동확대 방지 위해 16px */
  .joyn-account input, .joyn-account select, .joyn-account textarea,
  .joyn-lms input, .joyn-lms select, .joyn-lms textarea,
  .joyn-form-input, .jce-field input, .jce-field select {
    font-size: 16px;
  }
}

/* ---------- 1.5) 커리큘럼 편집기(jce) — 브랜드 부재 정렬 ----------
   기존: .jce-btn--primary 가 회색(#5c6b7a)이라 주요 액션이 브랜드와 무관 + 아이콘 색 제각각.
   (원본이 !important 를 쓰므로 동일하게 !important 로 정렬)                        */
.jce-btn--primary {
  background: var(--jl-brand) !important;
  border-color: var(--jl-brand-600) !important;
  color: #fff !important;
}
.jce-btn--primary:hover:not(:disabled) { background: var(--jl-brand-600) !important; }
.jce-item__icon--lesson {
  background: rgba(69, 65, 255, .10) !important;
  color: var(--jl-brand) !important;
  border-color: rgba(69, 65, 255, .22) !important;
}
.jce-item__icon--quiz {
  background: rgba(124, 92, 255, .10) !important;
  color: var(--jl-accent) !important;
  border-color: rgba(124, 92, 255, .22) !important;
}

/* ---------- 2) 브랜드 인디고 정렬(공통 톤) ---------- */
/* 대표 액션/포인트가 코어 기본색과 다를 경우에만 부드럽게 정렬. 과한 재정의는 피함. */
.joyn-account__topnav-item--active { color: var(--jl-brand-600); }
.joyn-detail-enroll-btn:not([disabled]) { background: var(--jl-brand); }
.joyn-detail-enroll-btn:not([disabled]):hover { background: var(--jl-brand-600); }