@charset "utf-8";
/* =====================================================================
 * bbalba — Summernote 보정 스타일
 *
 * 원칙: 에디터 기본 디자인을 갈아엎지 않는다. 이 파일이 하는 일은 셋뿐이다.
 *   1) 글꼴을 사이트 토큰(var(--font-body))에 맞춘다
 *   2) 🔴 폰에서 툴바 버튼을 44x44px 이상으로 키우고, 여러 줄로 접히더라도
 *      잘리거나 화면 밖으로 나가지 않게 한다
 *   3) ext/ 의 특수문자·이모지 팔레트 모양을 잡는다(칸 44x44px, 줄바꿈)
 *
 * ⚠️ 로드 순서: summernote-lite.min.css → 이 파일
 * ⚠️ 선택자는 전부 .note-editor / .note-popover 안으로 가둔다.
 *    사이트 다른 화면의 button·div 를 건드리면 안 된다.
 * =====================================================================
 */

/* ── 1. 글꼴 ───────────────────────────────────────────────────────── */
.note-editor.note-frame,
.note-editor .note-toolbar,
.note-editor .note-editable,
.note-editor .note-modal,
.note-popover.note-air-popover {
	font-family: var(--font-body, 'Pretendard', 'Apple SD Gothic Neo', sans-serif);
}

/* 공고 본문은 노안·야간 사용자가 많다. 기본 줄간격이 좁아 조금만 넓힌다. */
.note-editor .note-editable {
	line-height: 1.7;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 본문 영역이 너무 짧으면 폰에서 쓰기 힘들다(초기 높이는 초기화 코드의
   height 옵션이 정한다. 여기서는 최소치만 깔아둔다). */
.note-editor .note-editing-area .note-editable {
	min-height: 180px;
}


/* ── 2. 툴바 ───────────────────────────────────────────────────────── */
/* 버튼이 많아 한 줄에 안 들어간다. 접히게 하되 잘리지 않게 한다. */
.note-editor .note-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	overflow: visible;      /* 드롭다운이 잘리면 안 된다 */
	padding: 6px 6px 2px;
}
.note-editor .note-toolbar .note-btn-group {
	margin-right: 6px;
	margin-bottom: 4px;
	float: none;            /* flex 안에서 float 는 방해만 된다 */
}

/* 눌린 버튼은 사이트 파랑(#0e8ee8)으로. 기본 회색은 눌렸는지 잘 안 보인다. */
.note-editor .note-toolbar .note-btn-group > .note-btn.active {
	color: #0e8ee8;
	border-color: #0e8ee8;
	background-color: #eaf5fe;
}

/* 드롭다운이 화면 밖으로 나가지 않게. 본체가 오른쪽으로 넘칠 때 margin-left 를
   조정해 주지만, 메뉴 자체가 화면보다 넓으면 그걸로도 못 막는다. */
.note-editor .note-dropdown-menu,
.note-popover .note-dropdown-menu {
	max-width: calc(100vw - 20px);
	box-sizing: border-box;
}


/* ── 3. 🔴 폰: 터치영역 44x44px ────────────────────────────────────── */
/* 이 사이트는 업소가 폰으로 공고를 쓴다. 기본 버튼(약 30px)은 손가락으로
   못 누른다. 대상은 '툴바 버튼그룹의 직계 버튼'만 — 색상 팔레트의 색칩
   (.note-color-btn)까지 44px 로 키우면 팔레트가 화면 밖으로 나간다.
   색칩은 아래에서 따로 키운다. */
@media (max-width: 767px) {
	.note-editor .note-toolbar .note-btn-group > .note-btn {
		min-width: 44px;
		min-height: 44px;
		padding: 6px 10px;
		font-size: 15px;
		line-height: 1.2;
	}
	.note-editor .note-toolbar .note-btn-group > .note-btn .note-icon-caret {
		margin-left: 2px;
	}

	/* 드롭다운 메뉴 항목(글꼴·글자크기·문단 등)도 손가락으로 누른다. */
	.note-editor .note-dropdown-menu > .note-dropdown-item {
		min-height: 44px;
		padding: 11px 12px;
		font-size: 15px;
	}

	/* 색상(형광펜·글자색) 드롭다운.
	   기본은 배경색/글자색 팔레트 두 개가 좌우로 붙어 폭 350px 를 넘는다.
	   폰에서는 위아래로 세우고 색칩을 키운다(8칸 x 36px = 288px → 360px 화면에 들어간다).
	   ⚠️ 색칩은 44px 를 못 채운다. 한 줄 8칸 구조를 깨지 않으면서 360px 안에
	      넣으려면 36px 가 한계다. 툴바 버튼은 44px 를 지킨다. */
	.note-editor .note-toolbar .note-color .note-dropdown-menu {
		min-width: 0;
		width: calc(100vw - 24px);
		max-width: 320px;
		/* 배경색·글자색 팔레트를 위아래로 세우면 세로로 길어져(실측 610px)
		   화면 아래로 넘어간다. 잘리지 않게 안에서 스크롤시킨다. */
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette {
		display: block;
		width: 100%;
		margin: 0 0 6px;
	}
	.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette:first-child {
		margin: 0 0 6px;
	}
	.note-editor .note-toolbar .note-color-palette div .note-color-btn {
		width: 12.5%;   /* 한 줄 8칸 */
		height: 36px;
	}
	.note-editor .note-toolbar .note-color .note-dropdown-menu .note-color-row {
		height: 36px;
	}
	.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette-title,
	.note-editor .note-toolbar .note-color .note-dropdown-menu .note-color-reset,
	.note-editor .note-toolbar .note-color .note-dropdown-menu .note-color-select {
		width: 100%;
		box-sizing: border-box;
	}
	.note-editor .note-toolbar .note-color .note-dropdown-menu .note-color-reset,
	.note-editor .note-toolbar .note-color .note-dropdown-menu .note-color-select {
		min-height: 40px;
	}
}


/* ── 4. bbalba 팔레트(특수문자 Ω · 이모지) ─────────────────────────── */
/* ext/summernote-specialchar.js · ext/summernote-emoji.js 가 그리는 것 */

.note-editor .note-toolbar .note-bb-pal-toggle-label {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
}
.note-editor .note-toolbar .note-bb-pal-toggle-emoji {
	font-size: 17px;
	font-weight: 400;
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* 팔레트 본체.
   폭 336px = 안쪽 여백 12 + 44px 칸 7개(=308) + 칸 간격.
   화면이 좁으면 calc(100vw - 24px) 로 줄고, 칸은 줄바꿈된다. */
.note-editor .note-toolbar .note-bb-pal-menu {
	width: 336px;
	max-width: calc(100vw - 24px);
	min-width: 0;
	padding: 0;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	/* PC 는 한 줄에 10칸 */
	.note-editor .note-toolbar .note-bb-pal-menu {
		width: 474px;
	}
}

.note-editor .note-toolbar .note-bb-pal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 12px;
	border-bottom: 1px solid #e2e2e2;
	background: #f7f7f7;
	border-radius: 3px 3px 0 0;
}
.note-editor .note-toolbar .note-bb-pal-title {
	font-size: 13px;
	font-weight: 600;
	color: #333;
}
.note-editor .note-toolbar .note-bb-pal-close {
	width: 44px;
	height: 44px;
	margin: -8px -4px -8px 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #666;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	border-radius: 3px;
}
.note-editor .note-toolbar .note-bb-pal-close:hover,
.note-editor .note-toolbar .note-bb-pal-close:focus {
	background: #e8e8e8;
	color: #222;
}

/* 목록이 길어도 팝업이 화면 밖으로 넘치지 않게 세로 스크롤 */
.note-editor .note-toolbar .note-bb-pal-scroll {
	max-height: 54vh;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 4px 6px 8px;
}

.note-editor .note-toolbar .note-bb-pal-gname {
	padding: 8px 4px 4px;
	font-size: 12px;
	font-weight: 600;
	color: #888;
}

.note-editor .note-toolbar .note-bb-pal-body {
	display: flex;
	flex-wrap: wrap;      /* 🔴 좁으면 줄바꿈. 가로 스크롤은 만들지 않는다 */
	align-items: stretch;
}

/* 🔴 칸 하나가 44x44px. 폰에서 눌러야 하는 것이 이 작업의 목적이다. */
.note-editor .note-toolbar .note-bb-pal-item {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	color: #222;
	font-family: var(--font-body, 'Pretendard', 'Apple SD Gothic Neo', sans-serif);
	font-size: 19px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(14, 142, 232, .2);
}
.note-editor .note-toolbar .note-bb-pal-item:hover,
.note-editor .note-toolbar .note-bb-pal-item:focus {
	border-color: #0e8ee8;
	background: #eaf5fe;
	outline: none;
}
.note-editor .note-toolbar .note-bb-pal-item:active {
	background: #d4ebfc;
}

/* 이모지는 기기 기본 이모지 글꼴로 그린다(외부 이미지·CDN 을 쓰지 않는다). */
.note-editor .note-toolbar .note-bb-pal-emoji {
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-body, sans-serif);
	font-size: 21px;
}

/* ── 글에 넣은 이미지 ─────────────────────────────────────────────────
   🔴 업소들이 폰으로 찍은 사진을 그대로 올린다(가로 3000~4000px 이 흔하다).
      제한이 없으면 **글 쓰는 중에도, 올린 뒤 공고에서도 화면 밖으로 삐져나간다.**
   `max-width` 로 큰 것만 줄인다. `width:100%` 를 쓰면 작은 이미지까지 억지로 늘려
   흐려지므로 쓰지 않는다. `height:auto` 가 있어야 비율이 안 찌그러진다.
   ⚠️ 편집기 안과 실제 공고 화면(css/style.css 의 .employ_detail .job_tab1 img 등)이
      같은 규칙이어야 "쓸 때와 보일 때가 다르다" 는 말이 안 나온다. */
.note-editor .note-editable img {
	max-width: 100%;
	height: auto;
}