/* ============================================================
   counsel.css — AI 채팅상담 (contact/ai_counsel.php)
   좁은 팝업 창(가로 500px 기준) 하나를 꽉 채우는 대화창.
   사이트 헤더·푸터가 없는 페이지라 여기서 바탕까지 정한다.
   ============================================================ */

html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: #fbfbff; }

.cs { height: 100%; }

.cs-chat {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;          /* 대화가 길어져도 아래 입력줄을 밀어내지 않게 */
	background: #fbfbff;
}

/* ---------- 머리띠 ---------- */
.cs-bar {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 0 12px 0 16px;
	background: linear-gradient(110deg, #2b1a63 0%, #6136d9 62%, #a13ad2 100%);
	color: var(--c-white);
}
.cs-bar__logo { flex: none; width: 112px; height: auto; }
.cs-bar__dot {
	flex: none;
	width: 7px;
	height: 7px;
	margin-left: 2px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}
.cs-bar__who {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cs-bar__close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.cs-bar__close svg { width: 20px; height: 20px; }
.cs-bar__close:hover { background: rgba(255, 255, 255, .16); color: var(--c-white); }

/* 상담원 연결 — 업체명·고객명을 받으면 counsel.js 가 연다 */
.cs-agent {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 11px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 300px;
	background: rgba(255, 255, 255, .12);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: var(--c-white);
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.cs-agent svg { width: 15px; height: 15px; }
.cs-agent:hover { background: rgba(255, 255, 255, .26); border-color: var(--c-white); }
.cs-agent.is-done {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .28);
	color: rgba(255, 255, 255, .6);
	cursor: default;
}
.cs-agent[hidden] { display: none; }

.cs-bar__dot.is-off {
	background: #cbd5e1;
	box-shadow: 0 0 0 3px rgba(203, 213, 225, .22);
}

/* ---------- 상담 가능 시간 ---------- */
.cs-hours {
	flex: none;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-bottom: 1px solid #ececf6;
	background: #fff8ec;
	font-size: 12px;
	line-height: 1.4;
	color: #7a5a1e;
	flex-wrap: wrap;
}
.cs-hours b { font-weight: 700; }
.cs-hours__mark {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d99a2b;
}
.cs-hours__set { color: #a08247; }
.cs-hours.is-open { background: #eefaf1; color: #2f5c3f; }
.cs-hours.is-open .cs-hours__mark { background: #1a9d4a; }
.cs-hours.is-open .cs-hours__set { color: #5c8a6c; }

/* ---------- 로그인 안내 ---------- */
.cs-note {
	flex: none;
	padding: 12px 16px;
	border-bottom: 1px solid #e8e8f4;
	background: #f4f2fe;
}
.cs-note p { margin: 0; font-size: 13px; line-height: 1.55; color: #45455c; }
.cs-note b { font-weight: 700; color: #2b1a63; }
.cs-note__act { display: flex; gap: 7px; margin-top: 9px !important; }
.cs-note__btn {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 300px;
	background: #6136d9;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--c-white);
	transition: background .2s ease;
}
.cs-note__btn:hover { background: #4d27b8; color: var(--c-white); }
.cs-note__btn--ghost {
	background: var(--c-white);
	border: 1px solid #cfc7ee;
	color: #6136d9;
}
.cs-note__btn--ghost:hover { background: #efeafc; color: #4d27b8; }
.cs-note__free { margin-top: 9px !important; font-size: 12px; color: #75758c; }

/* 로그인 상태 — 한 줄로 짧게 */
.cs-note--in {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: #eefaf1;
	border-bottom-color: #d5efdc;
}
.cs-note--in svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #1a9d4a; }
.cs-note--in p { font-size: 13px; color: #2f5c3f; }
.cs-note--in b { color: #14421f; }

/* ---------- 대화 ---------- */
.cs-log {
	flex: 1 1 auto;
	min-height: 0;
	padding: 18px 16px 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.cs-log::-webkit-scrollbar { width: 7px; }
.cs-log::-webkit-scrollbar-track { background: #eceef7; border-radius: 8px; }
.cs-log::-webkit-scrollbar-thumb { background: #c3c5da; border-radius: 8px; }

.cs-row { display: flex; gap: 9px; margin-bottom: 16px; }
.cs-row--me { justify-content: flex-end; }
.cs-av {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(150deg, #7175ec 0%, #ed35a4 100%);
	color: var(--c-white);
}
.cs-av svg { width: 18px; height: 18px; }
.cs-bubble-wrap { max-width: 82%; }
.cs-bubble {
	padding: 12px 15px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.6;
	word-break: break-word;
	white-space: pre-line;   /* 답장은 원문 한 줄이 앞에 붙어 온다 */
}
.cs-bubble--bot {
	background: var(--c-white);
	color: #14141e;
	border-top-left-radius: 4px;
	box-shadow: 0 3px 12px rgba(30, 30, 90, .07);
}
.cs-bubble--me {
	background: linear-gradient(120deg, #6136d9 0%, #8b4fed 100%);
	color: var(--c-white);
	border-bottom-right-radius: 4px;
}
/* 답장 — 원문을 위에 얹고 선을 하나 긋는다 */
.cs-quote {
	margin: 0 0 7px;
	padding: 0 0 6px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	font-size: 11.5px;
	line-height: 1.45;
	opacity: .58;
	/* 원문은 한 줄만 — 길면 … 으로 줄인다 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cs-bubble--me .cs-quote { border-bottom-color: rgba(255, 255, 255, .32); opacity: .7; }
/* 고친 말임을 숨기지 않는다 */
.cs-edited { margin-left: 6px; font-size: 11px; font-style: normal; opacity: .65; }

.cs-time { margin: 5px 2px 0; font-size: 11.5px; color: #9a9bb0; }
.cs-row--me .cs-time { text-align: right; }

/* 사람 상담원 — 안내 봇과 구분되게 초록 계열로 둔다 */
.cs-av--agent { background: linear-gradient(150deg, #23a06a 0%, #1a7f5a 100%); }
.cs-agentname { margin: 0 0 4px 2px; font-size: 12px; font-weight: 700; color: #1a7f5a; }
.cs-bubble--agent {
	background: #f0fbf5;
	color: #14141e;
	border: 1px solid #cdeddd;
	border-top-left-radius: 4px;
}

.cs-q {
	display: inline-flex;
	align-items: center;
	height: 20px;
	margin-right: 5px;
	padding: 0 8px;
	border-radius: 5px;
	background: rgba(97, 54, 217, .1);
	color: #6136d9;
	font-size: 11px;
	font-weight: 800;
}

.cs-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.cs-typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #b9bcd4;
	animation: cs-dot 1.2s ease-in-out infinite;
}
.cs-typing i:nth-child(2) { animation-delay: .15s; }
.cs-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cs-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: .5; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* 선택지 — 아바타 너비만큼만 들여쓴다 */
.cs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px 41px; }
.cs-chip {
	min-height: 34px;
	padding: 6px 14px;
	border: 1px solid #d9d9ec;
	border-radius: 300px;
	background: var(--c-white);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #14141e;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.cs-chip:hover { border-color: #6136d9; background: rgba(97, 54, 217, .07); color: #6136d9; }

/* 지난 상담을 되살렸을 때 그 끝을 알려 주는 줄 */
.cs-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 18px;
	font-size: 11.5px;
	color: #9a9bb0;
}
.cs-divider::before,
.cs-divider::after { content: ""; flex: 1; height: 1px; background: #e2e2ef; }

.cs-badges { margin: 9px 0; padding: 0; list-style: none; }
.cs-badges li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-weight: 600; }
.cs-badge__dot {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: linear-gradient(150deg, #7175ec 0%, #ed35a4 100%);
}

.cs-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px 41px; }
.cs-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(120deg, #6136d9 0%, #ed35a4 100%);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-white);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.cs-action--ghost { background: var(--c-white); border: 1px solid #d9d9ec; color: #14141e; }
.cs-action:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(97, 54, 217, .22); }

/* ---------- 입력줄 ---------- */
.cs-input {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px 14px;
	border-top: 1px solid #ececf6;
	background: var(--c-white);
}
.cs-input input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 16px;
	border: 1px solid #dfdfef;
	border-radius: 300px;
	background: #fbfbff;
	font-family: inherit;
	font-size: 14.5px;
	color: #14141e;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.cs-input input::placeholder { color: #a4a5ba; }
.cs-input input:focus-visible {
	outline: none;
	border-color: #6136d9;
	background: var(--c-white);
	box-shadow: 0 0 0 3px rgba(97, 54, 217, .14);
}
.cs-input input:disabled { background: #f2f2f8; color: #9a9bb0; }
.cs-input button {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(120deg, #6136d9 0%, #ed35a4 100%);
	color: var(--c-white);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.cs-input button svg { width: 20px; height: 20px; }
.cs-input button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(97, 54, 217, .3); }
.cs-input button:disabled { opacity: .4; cursor: default; }

/* 대화 중간에 놓는 「상담원 연결」 — 머리띠 단추와 같은 모양.
   머리띠는 어두운 바탕이라 흰 글씨였지만, 여기는 밝은 바탕이라 색만 뒤집는다. */
/* 단추가 왼쪽, 문구가 그 오른쪽 — 문구에서 '왼쪽 버튼' 이라 가리키므로 줄을 바꾸지 않는다 */
.cs-actions--inline { flex-wrap: nowrap; align-items: center; gap: 10px; }
.cs-agent--inline {
	height: 34px;
	padding: 0 14px;
	border-color: #cfc7ee;
	background: var(--c-white);
	color: #6136d9;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(97, 54, 217, .12);
}
.cs-agent--inline svg { width: 17px; height: 17px; }
.cs-agent--inline:hover { background: #f1ecff; border-color: #6136d9; }
.cs-hint { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.4; color: #75758c; }

/* 아주 좁은 창 */
@media (max-width: 380px) {
	.cs-bar { padding-left: 12px; }
	.cs-bar__logo { width: 92px; }
	.cs-agent span { display: none; }
	.cs-agent { padding: 0 9px; }
	.cs-chips, .cs-actions { margin-left: 0; }
	.cs-bubble-wrap { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-typing i { animation: none; }
	.cs-chip:hover, .cs-action:hover, .cs-input button:hover { transform: none; }
}

/* ---------- 오른쪽 단추 메뉴 ----------
   말풍선 위에서 오른쪽 단추를 누르면 뜬다(counsel.js). */
.cs-menu {
	position: fixed;
	z-index: 60;
	min-width: 134px;
	padding: 5px;
	border: 1px solid #e2ddf5;
	border-radius: 10px;
	background: var(--c-white);
	box-shadow: 0 10px 28px rgba(40, 20, 90, .18);
}
.cs-menu[hidden] { display: none; }
.cs-menu button {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	height: 33px;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: #14141e;
	text-align: left;
	cursor: pointer;
}
.cs-menu button:hover:not(:disabled) { background: #f2ecfe; }
.cs-menu button:disabled { color: #bab9ca; cursor: default; }
.cs-menu button i { flex: none; width: 15px; text-align: center; font-style: normal; font-size: 13px; opacity: .85; }
.cs-menu .sep { height: 1px; margin: 4px 6px; background: #efeefa; }
.cs-menu button.warn { color: #c0392b; }
.cs-menu button.warn:hover:not(:disabled) { background: #fdecea; }
/* 고른 말풍선은 잠깐 테두리로 표시해 둔다 */
.cs-bubble.is-picked { outline: 2px solid #8b4fed; outline-offset: 2px; }

/* ---------- 답장·수정 중임을 알리는 띠 ---------- */
.cs-comp {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-top: 1px solid #ececf6;
	background: #f4f0fe;
	font-size: 12px;
	color: #3a2b63;
}
.cs-comp[hidden] { display: none; }
.cs-comp b { flex: none; font-weight: bold; color: #4b21b0; }
.cs-comp span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #6b6382;
}
.cs-comp button {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ded4fa;
	color: #3a2b63;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

/* ---------- 짧은 알림 ---------- */
.cs-toast {
	position: fixed;
	left: 50%;
	bottom: 86px;
	transform: translateX(-50%);
	z-index: 70;
	padding: 8px 16px;
	border-radius: 300px;
	background: rgba(20, 20, 30, .9);
	color: var(--c-white);
	font-size: 12.5px;
}

/* ---------- 파일 첨부 단추 ---------- */
.cs-clip {
	flex: none;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid #e0dcf3;
	border-radius: 50%;
	background: var(--c-white);
	color: #6136d9;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.cs-clip svg { width: 19px; height: 19px; vertical-align: middle; }
.cs-clip:hover:not(:disabled) { background: #f2ecfe; border-color: #c9bcf3; }
.cs-clip:disabled { color: #c2c1d2; border-color: #ececf6; cursor: default; }
/* 올리는 중 — 잠깐 흐려 둔다 */
.cs-clip.is-busy { opacity: .45; pointer-events: none; }

/* ---------- 주고받은 파일 ---------- */
.cs-bubble--file { padding: 6px; }
.cs-file { display: block; width: 190px; max-width: 100%; }
.cs-file__shot {
	display: block;
	margin: 0 0 5px;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0, 0, 0, .06);
	line-height: 0;
}
.cs-file__shot img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.cs-file__row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border-radius: 9px;
	background: rgba(0, 0, 0, .05);
	color: inherit;
	text-decoration: none;
}
.cs-file__row:hover { background: rgba(0, 0, 0, .1); }
.cs-file__ico { flex: none; font-size: 17px; line-height: 1; }
.cs-file__body { flex: 1 1 auto; min-width: 0; }
.cs-file__body b {
	display: block;
	font-size: 12.5px;
	font-weight: bold;
	line-height: 1.35;
	/* 이름이 길어도 한 줄 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cs-file__body em { display: block; margin-top: 1px; font-size: 11px; font-style: normal; opacity: .62; }
/* 내가 보낸 파일은 보라 바탕이라 대비를 뒤집는다 */
.cs-bubble--me .cs-file__row { background: rgba(255, 255, 255, .18); }
.cs-bubble--me .cs-file__row:hover { background: rgba(255, 255, 255, .3); }
.cs-bubble--me .cs-file__shot { background: rgba(255, 255, 255, .18); }

/* ---------- 머리말 검색 단추 ---------- */
.cs-bar__find {
	flex: none;
	/* 닫기 단추와 같은 방식으로 가운데를 잡는다 — 안 그러면 아이콘이 왼쪽으로 쏠린다 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: var(--c-white);
	cursor: pointer;
}
.cs-bar__find svg { width: 16px; height: 16px; }
.cs-bar__find:hover { background: rgba(255, 255, 255, .28); }
.cs-bar__find.is-on { background: var(--c-white); color: #6136d9; }

/* ---------- 검색줄 ---------- */
.cs-find {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px 8px 12px;
	border-bottom: 1px solid #ececf6;
	background: #f6f3fe;
}
.cs-find[hidden] { display: none; }
.cs-find__ico { flex: none; width: 15px; height: 15px; color: #8b86a8; }
.cs-find input {
	flex: 1 1 auto;
	min-width: 0;
	height: 32px;
	padding: 0 11px;
	border: 1px solid #ddd6f6;
	border-radius: 300px;
	font-family: inherit;
	font-size: 12.5px;
	background: var(--c-white);
	color: #14141e;
}
.cs-find input:focus-visible { outline: none; border-color: #8b4fed; box-shadow: 0 0 0 3px rgba(97, 54, 217, .14); }
.cs-find input.none { border-color: #e8b6b0; background: #fdf3f2; }
.cs-find b { flex: none; min-width: 44px; font-size: 11.5px; font-weight: normal; color: #6b6382; text-align: center; }
.cs-find button {
	flex: none;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #ece5fd;
	color: #3a2b63;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
}
.cs-find button:hover:not(:disabled) { background: #ded4fa; }
.cs-find button:disabled { opacity: .35; cursor: default; }
.cs-find button.x { background: none; font-size: 16px; color: #8b86a8; }

/* 찾은 글자 */
mark.cs-hit { padding: 0 1px; border-radius: 2px; background: #ffe98a; color: #14141e; }
mark.cs-hit.on { background: #ff9f1a; color: var(--c-white); }
.cs-bubble--me mark.cs-hit { color: #14141e; }

/* ---------- 그림 크게 보기 ---------- */
.cs-lb {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	background: rgba(12, 10, 24, .93);
}
.cs-lb[hidden] { display: none; }
.cs-lb__bar {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	color: var(--c-white);
}
.cs-lb__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cs-lb__save {
	flex: none;
	padding: 6px 13px;
	border-radius: 300px;
	background: rgba(255, 255, 255, .18);
	color: var(--c-white);
	font-size: 12px;
	text-decoration: none;
}
.cs-lb__save:hover { background: rgba(255, 255, 255, .3); }
.cs-lb__x {
	flex: none;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: var(--c-white);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.cs-lb__wrap {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px 18px;
	overflow: auto;
}
.cs-lb__wrap img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ---------- 지운 말 ----------
   카카오톡처럼 자리는 남기고 지웠다는 것만 알린다 */
.cs-bubble--wiped {
	background: transparent;
	border: 1px dashed #cfcbe3;
	color: #9a9bb0;
	font-size: 12.5px;
	font-style: italic;
	box-shadow: none;
}
.cs-row--me .cs-bubble--wiped { border-color: #d3c8f2; }

/* ---------- 여러 줄 입력칸 ----------
   Enter 는 보내기, Shift+Enter 는 줄바꿈. 줄이 늘면 칸도 자란다(counsel.js). */
.cs-input { align-items: flex-end; }
.cs-input textarea {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	max-height: 110px;
	padding: 12px 16px;
	border: 1px solid #dfdfef;
	border-radius: 22px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	background: #f7f7fc;
	color: #14141e;
	resize: none;
	overflow-y: auto;
}
.cs-input textarea::placeholder { color: #a4a5ba; }
.cs-input textarea:focus-visible {
	outline: none;
	border-color: #6136d9;
	background: var(--c-white);
	box-shadow: 0 0 0 3px rgba(97, 54, 217, .14);
}
.cs-input textarea:disabled { background: #f2f2f8; color: #9a9bb0; }

/* ---------- 파일을 끌어다 놓을 때 ---------- */
.cs-drop {
	position: fixed;
	inset: 0;
	z-index: 75;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
	background: rgba(97, 54, 217, .14);
	backdrop-filter: blur(2px);
}
.cs-drop[hidden] { display: none; }
.cs-drop__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 340px;
	padding: 28px 20px;
	border: 2px dashed #8b4fed;
	border-radius: 16px;
	background: rgba(255, 255, 255, .96);
	color: #4b21b0;
	text-align: center;
}
.cs-drop__box svg { width: 32px; height: 32px; }
.cs-drop__box b { font-size: 14px; }
.cs-drop__box span { font-size: 12px; color: #7d76a0; }