@charset "UTF-8";

/* ==========================================================================
   상세 본문 : 섹션 템플릿 (어드민에서 섹션 단위로 조립)
   ========================================================================== */
/* 최소 초기화 : 어드민 에디터처럼 사이트 공통 CSS 가 없는 곳에서도 같은 모양이 나오도록 */
.ins_body, .ins_body * { box-sizing: border-box; }
/*   :where() 로 감싸 구체성을 0 으로 만든다. 아래 템플릿 규칙이 항상 이기도록 */
.ins_body :where(ul, ol, li, dl, dt, dd, p, h2, h3, h4, h5, figure, figcaption, table) { margin: 0; padding: 0; }
.ins_body :where(ul, ol) { list-style: none; }
.ins_body :where(img) { max-width: 100%; }
.ins_body :where(a) { text-decoration: none; }

/* 본문 기준값 : 클래스를 두 번 써서 게시판 공통 래퍼(.board_view_mid .txt_wrap)보다 우선하게 함
   -> 프런트와 어드민 에디터가 같은 값을 쓰고, 값은 이 파일 한 곳에만 둔다 */
.ins_body.ins_body { box-sizing: border-box; max-width: 920px; padding: 40px 0 0;
	font-family: "SCDream", "Noto Sans KR", sans-serif; font-size: 17px; line-height: 1.7; color: #000;
	text-align: left; word-break: keep-all; }
.ins_body .ins_sec .ins_p,
.ins_body .ins_sec_html p { font-size: 16px; line-height: 1.7; color: #000; }   /* 공통 .txt_wrap p 를 이기려면 클래스 2개 필요 */
.ins_body .ins_sec + .ins_sec { margin-top: 24px; }   /* 섹션 간격 */
.ins_body .ins_sec > *:first-child { margin-top: 0; }
.ins_body .ins_sec > *:last-child { margin-bottom: 0; }

/* 리드문 */
.ins_body .ins_sec .ins_lead { margin-bottom: 40px; font-size: 18px; line-height: 1.7; color: #000; }   /* 기본값, 에디터에서 지정하면 그 색을 따름 */

/* 소제목 + 문단 */
.ins_tit { margin: 60px 0 20px; font-size: 20px; font-weight: 600; line-height: 1.4; color: #000; }
.ins_p { margin-top: 14px; }
/* 소제목 아래 강조 문구 (배경색은 어드민에서 지정 가능) */
.ins_body .ins_sec .ins_sub { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.7; color: #000; }
.ins_body .ins_sec .ins_sub span { padding-bottom: 3px; box-shadow: inset 0 -10px 0 var(--ins-sub-bg, #fbeada); }   /* 단색 형광펜, padding 만큼 아래로 내려감 */

/* 이미지 + 캡션 */
.ins_figure { margin: 40px 0; }
.ins_figure img { width: 100%; }
.ins_body .ins_sec img { margin-bottom: 0; }   /* 공통 .txt_wrap img 의 20px 제거 */
.ins_figure figcaption { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #666; text-align: right; }

/* 목차 */
.ins_toc { margin: 40px 0; padding: 24px; border-radius: 12px; background: #fff8ec; }
.ins_toc strong,
.ins_toc .tit { display: block; margin-bottom: 12px; font-size: 20px; font-weight: 600; line-height: 1.4; color: #000; }
.ins_toc ul { padding: 0 0 0 8px; }
.ins_toc li { position: relative; padding-left: 14px; font-size: 16px; line-height: 1.4; color: #000; }
.ins_toc li + li { margin-top: 12px; }
.ins_toc li:before { content: ""; position: absolute; top: 12px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #222; }

/* 정의 박스 */
.ins_callout { margin: 28px 0; padding: 24px; border-radius: 12px; background: #f3f2f5; }
.ins_tit + .ins_callout { margin-top: 0; }   /* 제목 바로 뒤에 올 때는 제목 여백만 쓴다 */
.ins_callout strong,
.ins_callout .tit { display: block; margin-bottom: 8px; font-size: 20px; font-weight: 600; line-height: 1.4; color: #000; }
.ins_callout p { font-size: 16px; line-height: 1.7; color: #000; }

/* 목록 : 불릿(list) · 번호(steps) 공용, 앞에 붙는 것만 다름 */
.ins_bullet,
.ins_steps { margin-top: 20px; padding-left: 8px; }
.ins_bullet li,
.ins_steps li { position: relative; }
.ins_bullet li + li,
.ins_steps li + li { margin-top: 12px; }
.ins_bullet strong,
.ins_bullet .tit,
.ins_steps strong,
.ins_steps .tit { font-size: 18px; font-weight: 600; line-height: 1.4; color: #000; }
.ins_bullet span,
.ins_steps span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.7; color: #000; }

.ins_bullet li { padding-left: 14px; }
.ins_bullet strong,
.ins_bullet .tit { display: block; }
.ins_bullet li:before { content: ""; position: absolute; top: 12px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #222; }
.ins_steps em { margin-right: 6px; font-style: normal; font-size: 18px; font-weight: 600; line-height: 1.4; color: #000; }

/* 표 + 출처 */
.ins_table { margin-top: 20px; }   /* PC 는 가로 스크롤 없음 */
/* 표 이름 : 화면에는 소제목만 보이고, 보조기기가 표로 건너뛸 때 읽을 값은 caption 에 숨겨 둔다
   display:none 은 접근성 트리에서도 빠지므로 쓰면 안 됨 */
.ins_body .ins_sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ins_table table { width: 100%; max-width: 100%; border-top: 1px solid #202b45; border-collapse: collapse; }
.ins_table th,
.ins_table td { padding: 16px 20px; border-bottom: 1px solid #d9d9d9; font-size: 16px; line-height: 1.4; text-align: left; }
.ins_table th { border-bottom-color: #202b45; background: #e6e6ec; font-weight: 600; color: #202b45; text-align: center; }
.ins_table th + th { border-left: 1px solid #fff; }   /* 헤더 칸 사이는 흰색 */
.ins_table td + td { border-left: 1px solid #d9d9d9; }
.ins_table td { color: #202b45; }
.ins_table tr:last-child td { border-bottom: 1px solid #202b45; }   /* 표 맨 아래 선 */
.ins_body .ins_sec .ins_source { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #666; text-align: right; }

/* 버튼 (관련 콘텐츠 등) */
.ins_link { margin: 0; }
.ins_link a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 1px solid #e3e4e9; border-radius: 16px; color: #202b45; background: #fcfcfd; transition: background .2s, border-color .2s; }
.ins_link a span { font-size: 16px; line-height: 1.4; }   /* 글자 크기는 span 기준 */
.ins_link a:after { content: ""; position: relative; top: 1px; flex: none; width: 20px; height: 20px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABhElEQVR4nOWY0W3CMBCGP6wMkG6QPveh7QTlpc+MAJ2AbuCwQTtB6QjdoGwQJiBswAiVJSNZkUlsxzGu+KVIjmI7n++Ouxyz6uGVnCXIXILMVSR4xwtQOc5tgH1KwEfg13PNHNilcnEZsKZKacEd8Aw8XXi+7nmWLAYbfXUlh+CGAEsdQ64BfgJ+HOcquNq4by7BFj2mrwNiqAY2nnBqfAS+bJNtP5Il8BEY4ATA9R7IZkHb6Vy1jQlnAzST6tZlA0cFwdlcfG+MfRNsdLgUiVqOgZsaUHrAHYxxklosPS13rjhlN6kXGbm1SeFiOTbmpgSUseFiAkpPOKmvQRVXgFsY81vge0oLLgPceufzgrGA89gxF9vFG6Ms9rrqWoAt8MYt98WCzCXIXILMJchcgn8GeDDGrv2wr1Tfc9bRNw/udQNe6spQRexN0PutjBw6uPfM8g/rWvfFU2vlUn1sMfipF6sTTqET8O5aGm0W7H4MxIzFVn/aK8gotThm/N1GmiE3/QF5bVAio28LkAAAAABJRU5ErkJggg==") center/contain no-repeat; }   /* 이름 뒤에 항상 아이콘 */
.ins_link a:hover { border-color: #b9bcc6; background: rgba(211, 213, 219, .35); }

/* FAQ */
.ins_faq { margin-top: 24px; }
.ins_sec_faq .ins_tit { color: #ff8400; }   /* FAQ 제목만 주황 */
.ins_faq .ins_faq_list { padding-left: 24px; border-left: 2px solid #ff8400; }
/* dt 는 헤딩을 자식으로 둘 수 없어(HTML 스펙) dl 대신 헤딩 + 문단으로 둔다. 모양은 그대로 */
.ins_faq .ins_faq_q,
.ins_faq .ins_faq_a { position: relative; padding-left: 24px; }
.ins_faq .ins_faq_q { margin: 0; padding-top: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: #202b45; }
.ins_faq .ins_faq_a { margin-bottom: 10px; padding-top: 12px; padding-bottom: 16px; border-bottom: 1px solid #d9d9d9; font-size: 16px; line-height: 1.5; color: #000; }
.ins_faq .ins_faq_a:last-child { margin-bottom: 0; border-bottom: 0; }   /* 마지막 줄은 선·여백 없음 */
.ins_faq .ins_faq_q:before,
.ins_faq .ins_faq_a:before { position: absolute; left: 0; font-size: 16px; font-weight: 600; line-height: inherit; }
.ins_faq .ins_faq_q:before { content: "Q."; top: 0; color: #202b45; }
.ins_faq .ins_faq_a:before { content: "A."; top: 12px; color: #202b45; }

/* 구분선 */
.ins_divider { width: 100%; height: 1px; margin: 40px 0; background: #d9d9d9; }
.ins_body .ins_sec_divider > .ins_divider { margin: 40px 0; }   /* 섹션 여백 정리 규칙의 예외 */
.ins_body .ins_sec_divider + .ins_sec { margin-top: 0; }        /* 섹션 간격 24 와 중복되지 않게 */

/* 각주 */
.ins_note { margin-top: 40px; }
.ins_note li { font-size: 14px; line-height: 1.5; color: #666; }
.ins_note li + li { margin-top: 8px; }

/* 어드민이 직접 넣은 HTML */
.ins_html { margin: 28px 0; }

/* 섹션 안에서는 템플릿 스타일이 에디터 인라인 스타일보다 우선 */
.ins_body .ins_sec span[style],
.ins_body .ins_sec font[style],
.ins_body .ins_sec font[size],
.ins_body .ins_sec font[color],
.ins_body .ins_sec p[style],
.ins_body .ins_sec div[style],
.ins_body .ins_sec li[style] {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	background-color: transparent !important;
}
/* 표는 너비·정렬을 인라인으로 쓰므로 글꼴 계열만 되돌린다 (배경·정렬은 건드리지 않음) */
.ins_body .ins_sec td[style],
.ins_body .ins_sec th[style] {
	font-family: inherit !important;
	font-size: inherit !important;
}
.ins_body .ins_sec .ins_sub span[style],
.ins_body .ins_sec .ins_sub span { background-color: transparent; }   /* 형광펜은 box-shadow 라 영향 없음 */

@media all and (max-width: 770px) {
	/* 720 기준 vw. 글자는 사이트 공통 모바일 스케일(3.33 = 본문, 4.44 = 제목)에 맞춤 */
	/* 테두리·라운드 같은 얇은 값은 px 유지 */

	.ins_body.ins_body { max-width: none; padding: 5.56vw 0 0; font-size: 3.33vw; letter-spacing: -0.04em; }   /* 모바일 전체 자간 */
	.ins_body .ins_sec .ins_p,
	.ins_body .ins_sec_html p { font-size: 3.33vw; }
	.ins_body .ins_sec + .ins_sec { margin-top: 10vw; }

	.ins_body .ins_sec .ins_lead { margin-bottom: 5.56vw; font-size: 3.33vw; }
	.ins_tit { margin: 0 0 5.56vw; font-size: 5vw; }
	.ins_p { margin-top: 2.92vw; }
	.ins_body .ins_sec .ins_sub { margin-top: 1.67vw; font-size: 3.33vw; }
	.ins_body .ins_sec .ins_sub span { padding-bottom: 0.62vw; box-shadow: inset 0 -2.08vw 0 var(--ins-sub-bg, #fbeada); }

	.ins_figure { margin: 8.33vw 0; }
	.ins_figure figcaption { margin-top: 1.67vw; font-size: 2.78vw; }
	.ins_body .ins_sec .ins_source { margin-top: 1.67vw; font-size: 2.78vw; }

	.ins_toc { margin: 8.33vw 0; padding: 4.44vw; border-radius: 1.67vw; }
	.ins_toc strong,
.ins_toc .tit { margin-bottom: 3.33vw; font-size: 5vw; }
	.ins_toc ul { padding-left: 1.67vw; }
	.ins_toc li { padding-left: 2.92vw; font-size: 3.33vw; }
	.ins_toc li + li { margin-top: 1.67vw; }
	.ins_toc li:before { top: 1.67vw; width: 0.83vw; height: 0.83vw; }

	.ins_callout { margin: 5.83vw 0; padding: 3.33vw; border-radius: 1.67vw; }
	.ins_callout strong,
.ins_callout .tit { margin-bottom: 1.11vw; font-size: 3.89vw; }
	.ins_callout p { font-size: 3.33vw; }

	.ins_bullet,
	.ins_steps { margin-top: 5.56vw; padding-left: 1.67vw; }
	.ins_bullet li + li,
	.ins_steps li + li { margin-top: 3.33vw; }
	.ins_bullet strong,
.ins_bullet .tit,
	.ins_steps strong,
.ins_steps .tit,
	.ins_steps em { font-size: 3.89vw; }
	.ins_bullet span,
	.ins_steps span { margin-top: 1.11vw; font-size: 3.33vw; }
	.ins_bullet li { padding-left: 2.92vw; }
	.ins_bullet li:before { top: 1.94vw; width: 1.04vw; height: 1.04vw; }
	.ins_steps em { margin-right: 1.25vw; }

	.ins_table { margin-top: 3.33vw; overflow-x: auto; }   /* 모바일만 가로 스크롤 */
	.ins_table table { max-width: none; min-width: 111vw; }
	.ins_table th,
	.ins_table td { padding: 1.67vw 2.22vw; font-size: 3.33vw; }

	.ins_link a { gap: 1.39vw; padding: 1.94vw 2.78vw; border-radius: 2.22vw; }
	.ins_link a span { font-size: 3.33vw; }
	.ins_link a:after { width: 4.44vw; height: 4.44vw; }

	.ins_faq { margin-top: 5vw; }
	.ins_faq .ins_faq_list { padding-left: 4.44vw; }
	.ins_faq .ins_faq_q,
	.ins_faq .ins_faq_a { padding-left: 5.56vw; }
	.ins_faq .ins_faq_q { font-size: 3.89vw; }
	.ins_faq .ins_faq_a { margin-bottom: 2.78vw; padding-top: 1.67vw; padding-bottom: 2.78vw; font-size: 3.33vw; }
	.ins_faq .ins_faq_q:before { font-size: 3.89vw; }
	.ins_faq .ins_faq_a:before { font-size: 3.33vw; top: 1.67vw; }

	.ins_divider,
	.ins_body .ins_sec_divider > .ins_divider { margin: 10vw 0; }

	.ins_note { margin-top: 5.56vw; }
	.ins_note li { font-size: 2.78vw; }
	.ins_note li + li { margin-top: 1.11vw; }
}