/* ==========================================================================
 * 강사가 만들어 준 HTML 의 «기본값» — shadow root 안에서만 쓰인다
 *
 * 어디에 쓰나: resources/views/shared/instructor-html.blade.php 가
 *   shadow root 안에서 <link> 로 불러온다. 그 안은 바깥 CSS 가 닿지 않으므로
 *   강사가 서식을 하나도 안 준 경우 브라우저 기본값(굵은 세리프 제목·좁은 줄간격)이 나온다.
 *   그래서 최소한의 읽을 만한 기본값을 여기서 준다.
 *
 * ⚠️ 왜 별도 파일인가: 이 규칙들은 우리 디자인 시스템(토큰·4배수 여백)의 대상이 아니다.
 *   shadow 안은 사이트 스타일과 격리된 별세계라 토큰을 참조할 수도 없다(CSS 변수는
 *   상속되지만 여기 값들은 강사 CSS 에 덮이는 «폴백» 이라 고정값이 맞다).
 *   Blade 안에 인라인으로 두었더니 뷰 검사(하드코딩 폰트·여백 4배수)에 걸렸다 —
 *   검사기가 «shadow 안» 을 구분하지 못하기 때문이다. 파일로 빼서 뜻을 분명히 한다.
 *
 * ⚠️ 강사 <style> 은 이 파일 «뒤» 에 온다. 그래서 겹치면 강사 쪽이 이긴다 —
 *   그것이 이 기능의 목적이다. 여기에 !important 를 쓰면 «HTML 을 그대로 넣을 수
 *   있다» 는 말이 거짓이 되므로 절대 쓰지 않는다.
 * ========================================================================== */

:host { display: block; color: #3A4256; font-size: 15px; line-height: 1.85; }

* { box-sizing: border-box; }

:first-child { margin-top: 0; }
:last-child { margin-bottom: 0; }

p { margin: 0 0 12px; }

h1, h2, h3, h4, h5, h6 { color: #10162B; font-weight: 800; line-height: 1.4; margin: 24px 0 8px; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
h4, h5, h6 { font-size: 15px; }

ul, ol { margin: 0 0 12px; padding-left: 24px; }
li { margin: 4px 0; }

a { color: #256EF4; text-decoration: underline; text-underline-offset: 2px; }
strong, b { font-weight: 700; color: #10162B; }

/* 강사는 자기 화면 폭을 기준으로 만든다 — 900px 그림 하나가 좁은 화면을 통째로 밀어낸다 */
img { max-width: 100%; height: auto; }

table { max-width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #E3E8F0; padding: 8px 12px; }
th { background: #F5F7FB; }

iframe { max-width: 100%; border: 0; }
hr { border: 0; border-top: 1px solid #E3E8F0; margin: 24px 0; }

/* 설명 편집기(SunEditor)가 넣은 그림 틀 — 편집기에서 보이던 배치대로 (2026-09-15)
 *   원본은 vendor/suneditor/suneditor-contents.min.css 인데 `.sun-editor-editable` 아래에만 걸려 있고,
 *   통째로 부르면 글자 크기·문단 여백까지 바뀌어 기존 설명 모양이 달라진다 — 그림 틀 규칙만 옮긴다.
 *   이 클래스들은 편집기가 넣은 요소에만 붙으므로 붙여넣은 HTML 에는 닿지 않는다.
 *   가운데·좌우 배치는 원본이 !important 로 여는 여백을 선택자를 좁혀 이긴다(이 파일은 !important 를 쓰지 않는다). */
.se-component { display: flex; margin: 0 0 10px; padding: 1px; }
.se-component > figure { display: block; margin: 0; padding: 0; min-width: 20px; direction: ltr; }
.se-component > figure > * { margin: 0; }
.se-image-container { height: auto; max-width: 100%; width: auto; }
.se-component.__se__float-left { float: left; margin-right: 4px; }
.se-component.__se__float-right { float: right; margin-left: 4px; }
.se-component.__se__float-center > figure,
.se-component.__se__float-left > figure,
.se-component.__se__float-right > figure { margin: auto; }