/* * crew_write.php 전용 스타일 */
.p_crew_write {
	background: transparent;
	min-height: 100vh;
	padding-bottom: 120px;
}

/* 임시저장 미리보기 박스 */
.cw_temp_preview {
    margin-top: 14px;
    background: linear-gradient(135deg, #f4fcf7 0%, #d8f0e0 100%);
    border-radius: 14px;
    padding: 14px 16px;
    text-align: left;
}

.cw_temp_preview__label {
    font-size: 12px;
    color: #005f4c;
    margin: 0 0 6px;
    font-weight: 500;
}

.cw_temp_preview__name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.cw_temp_preview__meta {
    display: block;
    font-size: 12px;
    color: #5a5a5a;
}

/* ============ 챔피언 X 안내 ============ */
.cw_guard {
	text-align: center;
	padding: 40px 20px 60px;
	max-width: 480px;
	margin: 0 auto;
}

.cw_guard__icon {
	font-size: 80px;
	margin-bottom: 16px;
}

.cw_guard__title {
	font-size: 22px;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0 0 12px;
	letter-spacing: -0.5px;
}

.cw_guard__desc {
	font-size: 14px;
	color: #5a5a5a;
	line-height: 1.7;
	margin: 0 0 32px;
}

.cw_guard__desc strong {
	color: #ff9500;
	font-weight: 500;
}

.cw_guard__card {
	background: linear-gradient(135deg, #fff8e6 0%, #ffe9c4 100%);
	border-radius: 20px;
	padding: 22px;
	margin-bottom: 28px;
	text-align: left;
}

.cw_guard__card_tit {
	font-size: 15px;
	font-weight: 500;
	color: #8a5500;
	margin: 0 0 14px;
}

.cw_guard__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cw_guard__list li {
	font-size: 14px;
	color: #5a4a00;
	padding: 8px 0;
	border-bottom: 0.5px dashed rgba(138, 85, 0, 0.2);
}

.cw_guard__list li:last-child { border-bottom: 0; }

.cw_guard__list li strong {
	color: #ff9500;
	font-weight: 500;
}

.cw_guard__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cw_guard__btn {
	padding: 14px 24px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
}

.cw_guard__btn--primary {
	background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(0, 95, 76, 0.25);
}

.cw_guard__btn--outline {
	background: #ffffff;
	color: #005f4c;
	border: 1.5px solid #005f4c;
}

/* ============ 진행도 ============ */
.cw_progress {
	margin: 18px 0 24px;
}

.cw_progress__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.cw_progress__step {
	font-size: 13px;
	color: #8a8a8a;
}

.cw_progress__current {
	color: #005f4c;
	font-weight: 500;
}

.cw_save_temp {
	background: #ffffff;
	border: 1px solid #005f4c;
	color: #005f4c;
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.cw_save_temp i { font-style: normal; }

.cw_progress__bar {
	height: 6px;
	background: #f0f2ee;
	border-radius: 100px;
	overflow: hidden;
}

.cw_progress__fill {
	height: 100%;
	background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
	border-radius: 100px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ 단계 ============ */
.cw_step { display: none; }
.cw_step.is_active {
	display: block;
	animation: cwFadeIn 0.3s ease;
}

@keyframes cwFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.cw_step__head { margin-bottom: 24px; }

.cw_step__title {
	font-size: 20px;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0 0 6px;
	letter-spacing: -0.5px;
	line-height: 1.3;
}

.cw_step__desc {
	font-size: 13px;
	color: #8a8a8a;
	margin: 0;
}

/* ============ STEP 1: 메인 카테고리 ============ */
.cw_main_cat {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.cw_main_cat__item {
	background: #ffffff;
	border: 1.5px solid #e8e8e8;
	border-radius: 18px;
	padding: 22px 14px;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	transition: all 0.15s;
}

.cw_main_cat__item:active { transform: scale(0.97); }

.cw_main_cat__item.is_active {
	background: linear-gradient(135deg, #f4fcf7 0%, #d8f0e0 100%);
	border-color: #005f4c;
	border-width: 2px;
}

.cw_main_cat__emoji {
	font-size: 36px;
	margin-bottom: 6px;
}

.cw_main_cat__name {
	font-size: 15px;
	font-weight: 500;
	color: #1a1a1a;
	margin-bottom: 3px;
}

.cw_main_cat__item.is_active .cw_main_cat__name { color: #005f4c; }

.cw_main_cat__sub {
	font-size: 11px;
	color: #8a8a8a;
}

.cw_sub_cat { animation: cwFadeIn 0.3s ease; }

.cw_sub_cat__label {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0 0 12px;
}

.cw_sub_cat__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.cw_sub_cat__item {
	background: #fafbf8;
	border: 1px solid #e8e8e8;
	border-radius: 14px;
	padding: 12px 6px;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	transition: all 0.15s;
}

.cw_sub_cat__item.is_active {
	background: linear-gradient(135deg, #f4fcf7 0%, #d8f0e0 100%);
	border-color: #005f4c;
}

.cw_sub_cat__emoji {
	font-size: 22px;
	margin-bottom: 4px;
}

.cw_sub_cat__name {
	font-size: 11px;
	color: #4a4a4a;
}

.cw_sub_cat__item.is_active .cw_sub_cat__name {
	color: #005f4c;
	font-weight: 500;
}

/* ============ 폼 필드 공통 ============ */
.cw_field { margin-bottom: 24px; }

.cw_field__label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
	margin-bottom: 8px;
}

.cw_field__required { color: #ff6b6b; }
.cw_field__optional { color: #8a8a8a; font-size: 12px; }

.cw_field__hint_top {
	font-size: 12px;
	color: #8a8a8a;
	margin-bottom: 10px;
	line-height: 1.5;
}

.cw_field__input_wrap {
	position: relative;
	border-bottom: 2px solid #005f4c;
	padding: 4px 0;
}

.cw_field__input {
	width: 100%;
	border: 0 !important;
	border-bottom: 0 !important;
	outline: none !important;
	padding: 8px 100px 8px 0;
	font-size: 16px;
	font-family: inherit;
	color: #1a1a1a;
	background: transparent;
	box-shadow: none !important;
}

.cw_field__input::placeholder { color: #b0b0b0; }

.cw_field__btn_inside {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #f0f2ee;
	color: #5a5a5a;
	border: none;
	padding: 6px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}

.cw_field__hint {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11px;
}

.cw_field__hint_msg { color: #8a8a8a; }
.cw_field__hint_msg.is_ok { color: #005f4c; font-weight: 500; }
.cw_field__hint_count { color: #b0b0b0; }
.cw_field__hint_count em { font-style: normal; color: #5a5a5a; }

/* Textarea 패딩 정상화 (AI 버튼 자리 빼기) */
.cw_field__textarea {
    width: 100%;
    background: #fafbf8;
    border: 1px solid #e8e8e8 !important;
    border-radius: 14px;
    padding: 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    line-height: 1.6;
    resize: vertical;
    min-height: 100px;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.cw_field__textarea:focus {
    border-color: #005f4c !important;
    background: #ffffff;
}

.cw_field__textarea::placeholder { color: #b0b0b0; }

/* AI 도와줘 버튼 - hint 아래 오른쪽 정렬 */
.cw_field__ai_btn {
    margin-top: 10px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fee500 0%, #fdc500 100%);
    color: #3c1e1e;
    border: none;
    padding: 9px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 10px rgba(254, 229, 0, 0.3);
    transition: all 0.15s;
}

.cw_field__ai_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(254, 229, 0, 0.4);
}

.cw_field__ai_btn:active {
    transform: scale(0.97);
}

.cw_field__ai_btn span { font-size: 15px; }

.cw_field__upload {
	background: #fafbf8;
	border: 2px dashed #d0d0d0;
	border-radius: 14px;
	padding: 24px 20px;
	text-align: center;
	transition: all 0.15s;
}

.cw_field__upload--big { padding: 40px 20px; }

.cw_field__upload:hover {
	border-color: #005f4c;
	background: #f4fcf7;
}

.cw_field__upload_label { cursor: pointer; display: block; }

.cw_field__upload_icon {
	font-size: 30px;
	margin-bottom: 6px;
}

.cw_field__upload--big .cw_field__upload_icon { font-size: 42px; }

.cw_field__upload_text {
	font-size: 13px;
	color: #4a4a4a;
	font-weight: 500;
	margin-bottom: 2px;
}

.cw_field__upload_sub {
	font-size: 11px;
	color: #8a8a8a;
}

/* ============ STEP 2: 활동 방식 ============ */
.cw_activity {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.cw_activity__btn {
	background: #fafbf8;
	border: 1.5px solid #e8e8e8;
	border-radius: 14px;
	padding: 14px 8px;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	transition: all 0.15s;
}

.cw_activity__btn.is_active {
	background: linear-gradient(135deg, #f4fcf7 0%, #d8f0e0 100%);
	border-color: #005f4c;
	border-width: 2px;
}

.cw_activity__emoji {
	font-size: 22px;
	margin-bottom: 4px;
}

.cw_activity__name {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
	margin-bottom: 2px;
}

.cw_activity__btn.is_active .cw_activity__name { color: #005f4c; }

.cw_activity__desc {
	font-size: 10px;
	color: #8a8a8a;
}

/* ============ STEP 2: 지역 ============ */
.cw_region_list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cw_region__btn {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	color: #4a4a4a;
	padding: 10px 14px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	position: relative;
	transition: all 0.15s;
}

.cw_region__btn.is_active {
	background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
	border-color: #005f4c;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 95, 76, 0.2);
}

.cw_region__btn.is_user {
	padding-left: 56px;
}

.cw_region__badge {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: #ff9500;
	color: #ffffff;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 6px;
	font-weight: 500;
}

/* ============ STEP 4: 대표 표현 탭 ============ */
.cw_repr_tabs {
	display: flex;
	background: #f0f2ee;
	padding: 4px;
	border-radius: 100px;
	margin-bottom: 18px;
}

.cw_repr_tab {
	flex: 1;
	background: transparent;
	border: none;
	padding: 10px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	color: #6a6a6a;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: all 0.15s;
}

.cw_repr_tab.is_active {
	background: #ffffff;
	color: #1a1a1a;
	font-weight: 500;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.cw_repr_content { display: none; }
.cw_repr_content.is_active { display: block; }

.cw_emoji_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.cw_emoji_btn {
	aspect-ratio: 1;
	background: #fafbf8;
	border: 1.5px solid #e8e8e8;
	border-radius: 14px;
	font-size: 26px;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
}

.cw_emoji_btn:hover { background: #f0f2ee; }

.cw_emoji_btn.is_active {
	background: linear-gradient(135deg, #f4fcf7 0%, #d8f0e0 100%);
	border-color: #005f4c;
	border-width: 2px;
	transform: scale(1.05);
}

.cw_color_grid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 8px;
}

/* 커스텀 컬러피커 */
.cw_color_btn--custom {
	background: linear-gradient(135deg, 
		#ff6b6b 0%, 
		#ffa500 16%, 
		#ffd700 33%, 
		#4ecdc4 50%, 
		#45b7d1 66%, 
		#a78bfa 83%, 
		#ec4899 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cw_color_btn--custom.is_active {
	transform: scale(1.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	border-color: #1a1a1a;
}

.cw_color_btn__plus {
	font-size: 16px;
	background: rgba(255, 255, 255, 0.85);
	width: 60%;
	height: 60%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cw_color_btn__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.cw_color_btn {
	aspect-ratio: 1;
	border: 2px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.15s;
	padding: 0;
}

.cw_color_btn.is_active {
	border-color: #005f4c;
	transform: scale(1.15);
	box-shadow: 0 4px 12px rgba(0, 95, 76, 0.2);
}

/* ============ 미리보기 카드 ============ */
.cw_preview { margin-top: 28px; }

.cw_preview__label {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0 0 10px;
}

.cw_preview__card {
    background: linear-gradient(135deg, #fff4d6 0%, #ffe9b3 100%);  /* 초기값 */
    border-radius: 18px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;  /* 색상 부드럽게 전환 */
}

/* 배경색 공통 영역 */
.cw_bg_section {
    margin-top: 20px;
}

.cw_preview__deco {
	position: absolute;
	border-radius: 50%;
	filter: blur(20px);
	pointer-events: none;
}

.cw_preview__deco--1 {
	top: -20px;
	right: -20px;
	width: 100px;
	height: 100px;
	background: rgba(255, 255, 255, 0.5);
}

.cw_preview__deco--2 {
	bottom: -15px;
	left: 30%;
	width: 60px;
	height: 60px;
	background: rgba(255, 200, 100, 0.3);
}

.cw_preview__badges {
	position: relative;
	z-index: 1;
	margin-bottom: 12px;
}

.cw_preview__badge_cat {
	display: inline-block;
	background: rgba(255, 255, 255, 0.7);
	color: #6a5500;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.cw_preview__inner {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
}

.cw_preview__thumb {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.7);
}

.cw_preview__txt { flex: 1; min-width: 0; }

.cw_preview__name {
	font-size: 16px;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0 0 4px;
}

.cw_preview__leader {
	font-size: 13px;
	color: #6a5500;
	margin: 0;
}

.cw_preview__meta {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 8px;
	font-size: 12px;
	color: #6a5500;
}

/* ============ 안내사항 ============ */
.cw_notice {
	background: #fff8e6;
	border-radius: 14px;
	padding: 14px 16px;
	margin-top: 20px;
	border: 1px solid rgba(255, 200, 100, 0.3);
}

.cw_notice__tit {
	font-size: 13px;
	font-weight: 500;
	color: #8a5500;
	margin: 0 0 8px;
}

.cw_notice__list {
	margin: 0;
	padding-left: 16px;
	font-size: 12px;
	color: #6a5500;
	line-height: 1.7;
}

.cw_notice__list li { margin-bottom: 2px; }

/* ============ 하단 네비 ============ */
.cw_nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid #f0f0f0;
	display: flex;
	gap: 8px;
	z-index: 90;
}

.cw_nav__btn {
	border: none;
	padding: 14px 24px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
}

.cw_nav__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cw_nav__btn--prev {
	background: #ffffff;
	border: 1.5px solid #e0e0e0;
	color: #6a6a6a;
}

.cw_nav__btn--next,
.cw_nav__btn--submit {
	flex: 1;
	background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(0, 95, 76, 0.22);
}

.cw_nav__btn--next:disabled,
.cw_nav__btn--submit:disabled {
	background: #c0c0c0;
	box-shadow: none;
}

/* ============ 토스트 ============ */
.cw_toast {
	position: fixed;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: rgba(0, 0, 0, 0.85);
	color: #ffffff;
	padding: 12px 24px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
	z-index: 9999;
	white-space: nowrap;
}

.cw_toast.is_show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* 이미지 업로드 미리보기 */
.cw_field__upload_label--preview {
    padding: 0 !important;
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

/* 업로드 미리보기 - 비율 유지 */
.cw_field__upload_preview {
    width: 100%;
    height: 240px;
    object-fit: contain;     /* ✅ 잘림 없음 */
    display: block;
    border-radius: 12px;
    background: #fafbf8;     /* 빈 공간 채울 배경색 */
}

/* 미리보기 카드 썸네일 - 비율 유지 */
.cw_preview__thumb {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: rgba(255, 255, 255, 0.7);  /* 빈 공간 채울 색 */
    overflow: hidden;
}

.cw_field__upload_overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ============================================
 * 📱 반응형
 * ============================================ */

/* 작은 폰 */
@media (max-width: 374px) {
	.cw_step__title { font-size: 18px; }
	.cw_main_cat__item { padding: 18px 12px; }
	.cw_main_cat__emoji { font-size: 30px; }
}

/* 태블릿 */
@media (min-width: 601px) and (max-width: 1024px) {
	.cw_step__title { font-size: 24px; }
	.cw_main_cat { grid-template-columns: repeat(4, 1fr); }
	.cw_sub_cat__grid { grid-template-columns: repeat(6, 1fr); }
	.cw_emoji_grid { grid-template-columns: repeat(8, 1fr); }
}

/* ============ PC ============ */
@media (min-width: 1025px) {
	.p_crew_write { padding-bottom: 140px; }

	.cw_progress { margin: 24px 0 32px; }
	.cw_progress__step { font-size: 14px; }

	.cw_step__head { margin-bottom: 36px; }
	.cw_step__title { font-size: 28px; }
	.cw_step__desc { font-size: 16px; }

	/* 메인 카테고리 4개 한 줄 */
	.cw_main_cat {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
		margin-bottom: 32px;
	}

	.cw_main_cat__item { padding: 32px 18px; }
	.cw_main_cat__emoji { font-size: 52px; }
	.cw_main_cat__name { font-size: 18px; }
	.cw_main_cat__sub { font-size: 13px; }

	/* 서브 카테고리 8개 한 줄 */
	.cw_sub_cat__label { font-size: 16px; margin-bottom: 16px; }
	.cw_sub_cat__grid {
		grid-template-columns: repeat(8, 1fr);
		gap: 12px;
	}
	.cw_sub_cat__item { padding: 18px 10px; }
	.cw_sub_cat__emoji { font-size: 30px; }
	.cw_sub_cat__name { font-size: 13px; }

	/* 필드 */
	.cw_field { margin-bottom: 32px; }
	.cw_field__label { font-size: 16px; margin-bottom: 12px; }
	.cw_field__input { font-size: 18px; padding: 12px 120px 12px 0; }
	.cw_field__textarea { font-size: 15px; min-height: 140px; padding: 18px 18px 60px; }
	.cw_field__hint_top { font-size: 13px; }
	.cw_field__btn_inside { font-size: 13px; padding: 8px 16px; }

	/* 활동 방식 */
	.cw_activity__btn { padding: 22px 14px; }
	.cw_activity__emoji { font-size: 34px; }
	.cw_activity__name { font-size: 16px; }
	.cw_activity__desc { font-size: 12px; }

	/* 지역 */
	.cw_region__btn { padding: 12px 18px; font-size: 14px; }
	.cw_region__btn.is_user { padding-left: 64px; }
	.cw_region__badge { font-size: 11px; padding: 3px 8px; left: 10px; }

	/* AI 버튼 */
	.cw_field__ai_btn { font-size: 13px; padding: 9px 18px; }

	/* 표현 탭 */
	.cw_repr_tab { padding: 14px; font-size: 15px; }

	/* 이모지/색상 */
	.cw_emoji_grid { grid-template-columns: repeat(8, 1fr); gap: 10px; }
	.cw_emoji_btn { font-size: 32px; }
  .cw_color_grid {
      grid-template-columns: repeat(9, 1fr);
      gap: 10px;
      max-width: 440px;  /* ← 전체 폭 제한 */
  }

  .cw_color_btn {
      max-width: 44px;   /* ← 개별 동그라미 크기 제한 */
      max-height: 44px;
      margin: 0 auto;
      width: 100%;
  }

  .cw_color_btn__plus {
      font-size: 14px;   /* PC 이모지도 작게 */
  }

	/* 미리보기 */
	.cw_preview { margin-top: 36px; }
	.cw_preview__label { font-size: 16px; margin-bottom: 14px; }
	.cw_preview__card { padding: 24px; max-width: 480px; }
	.cw_preview__thumb { width: 64px; height: 64px; font-size: 34px; }
	.cw_preview__name { font-size: 18px; }
	.cw_preview__leader { font-size: 14px; }
	.cw_preview__meta { font-size: 14px; }
	.cw_preview__badge_cat { font-size: 13px; padding: 5px 14px; }

	/* 안내사항 */
	.cw_notice { padding: 18px 22px; }
	.cw_notice__tit { font-size: 15px; }
	.cw_notice__list { font-size: 13px; }

	/* 하단 네비 */
	.cw_nav {
		padding: 18px 0;
		justify-content: center;
	}
	.cw_nav__btn { padding: 16px 36px; font-size: 16px; }
	.cw_nav__btn--next,
	.cw_nav__btn--submit { flex: 0 1 360px; }

	/* 안내 페이지 */
	.cw_guard { padding: 60px 20px 80px; max-width: 600px; }
	.cw_guard__icon { font-size: 100px; }
	.cw_guard__title { font-size: 28px; }
	.cw_guard__desc { font-size: 16px; }
	.cw_guard__card { padding: 28px; }
	.cw_guard__card_tit { font-size: 17px; }
	.cw_guard__list li { font-size: 15px; padding: 10px 0; }
	.cw_guard__buttons { flex-direction: row; justify-content: center; }
	.cw_guard__btn { padding: 16px 36px; font-size: 16px; min-width: 200px; }
}

/* * crew_schedule_write.php 전용 스타일 */
.csw_wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 13px 80px;
}
@media screen and (min-width: 1023.9px) {
    .csw_wrap { padding: 24px 0 100px; max-width: 760px; }
}

/* 상단 */
.csw_top {
    background: linear-gradient(180deg, #eafaef 0%, #ffffff 100%);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 95, 76, 0.1);
}
.csw_top_crew {
    display: flex;
    align-items: center;
    gap: 12px;
}
.csw_top_emoji {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0, 95, 76, 0.1);
}
.csw_top_label {
    font-size: 11px;
    color: #6a8a7e;
    margin-bottom: 2px;
}
.csw_top_name {
    font-size: 15px;
    font-weight: 600;
    color: #005f4c;
}

/* 섹션 */
.csw_section {
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.csw_section--highlight {
    background: linear-gradient(135deg, #fff8e6 0%, #fff3d4 100%);
    border-color: rgba(255, 200, 100, 0.3);
}
.csw_section--reward {
    background: linear-gradient(135deg, #f8fdfa 0%, #eafaef 100%);
    border-color: #cdeae4;
}

.csw_label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}
.csw_label em {
    color: #e74c5e;
    font-style: normal;
}
.csw_label_sub {
    display: block;
    font-size: 11px;
    color: #8f8f8f;
    font-weight: 400;
    margin-top: 3px;
}

/* 입력 */
.csw_input {
    width: 100%;
    background: #f8f9f7 !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    height: auto !important;
    outline: none;
    font-family: inherit;
    color: #1a1a1a;
    transition: all 0.15s;
}
.csw_input:focus {
    background: #fff !important;
    border-color: #005f4c !important;
    outline: none !important;
}
.csw_input_sub {
    margin-top: 8px;
    font-size: 13px !important;
}

.csw_textarea {
    width: 100%;
    background: #f8f9f7 !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    min-height: 100px;
    resize: vertical;
    outline: none;
    font-family: inherit;
    color: #1a1a1a;
}
.csw_textarea:focus {
    background: #fff !important;
    border-color: #005f4c !important;
    outline: none !important;
}
.csw_textarea_sm {
    min-height: 70px;
}

/* 날짜시간 */
.csw_dt_row {
    display: flex;
    gap: 8px;
}
.csw_input_date { flex: 2; }
.csw_input_time { flex: 1; }

.csw_dt_preview {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(0, 95, 76, 0.08);
    border-radius: 10px;
    font-size: 13px;
    color: #005f4c;
}
.csw_dt_preview strong {
    font-weight: 600;
}
.csw_dt_preview em {
    margin-left: auto;
    background: #005f4c;
    color: #fff;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
}
.csw_dt_emoji {
    font-size: 16px;
}

/* 보상 선택 */
.csw_reward_options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.csw_reward_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    background: #fff;
    border: 1.5px solid #e2e3e5;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.csw_reward_btn:hover {
    border-color: #005f4c;
}
.csw_reward_btn.is_active {
    background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
    border-color: #005f4c;
    box-shadow: 0 4px 12px rgba(0, 95, 76, 0.22);
}
.csw_reward_btn.is_active .csw_reward_pts,
.csw_reward_btn.is_active .csw_reward_label {
    color: #fff;
}
.csw_reward_emoji {
    font-size: 18px;
    line-height: 1;
}
.csw_reward_pts {
    font-size: 14px;
    font-weight: 700;
    color: #005f4c;
}
.csw_reward_label {
    font-size: 10px;
    color: #8f8f8f;
}

/* 저장 버튼 */
.csw_footer {
    margin-top: 20px;
}
.csw_submit_btn {
    width: 100%;
    background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 95, 76, 0.25);
    font-family: inherit;
    transition: all 0.15s;
}
.csw_submit_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 95, 76, 0.32);
}
.csw_submit_btn:active {
    transform: scale(0.98);
}

@media screen and (min-width: 1023.9px) {
    .csw_section { padding: 20px 22px; border-radius: 18px; }
    .csw_label { font-size: 15px; }
    .csw_input, .csw_textarea { font-size: 15px !important; }
    .csw_reward_pts { font-size: 15px; }
    .csw_reward_label { font-size: 11px; }
    .csw_submit_btn { padding: 18px; font-size: 16px; max-width: 360px; margin: 0 auto; display: block; }
}

/* 카카오맵 장소 검색 */
.csw_place_search {
    position: relative;
}
.csw_search_icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    font-style: normal;
}
.csw_search_results {
    margin-top: 6px;
    background: #fff;
    border: 1.5px solid #efefef;
    border-radius: 12px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.csw_result_item {
    padding: 12px 14px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.15s;
}
.csw_result_item:last-child { border-bottom: none; }
.csw_result_item:hover { background: #f8fdfa; }
.csw_result_name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 3px;
}
.csw_result_addr {
    font-size: 12px;
    color: #6a6a6a;
    margin-bottom: 4px;
}
.csw_result_cat {
    display: inline-block;
    background: #eafaef;
    color: #005f4c;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 500;
}
.csw_result_empty {
    padding: 20px;
    text-align: center;
    color: #8a8a8a;
    font-size: 13px;
}

.csw_selected_place {
    margin-top: 10px;
    background: linear-gradient(135deg, #f8fdfa 0%, #eafaef 100%);
    border: 1.5px solid #cdeae4;
    border-radius: 12px;
    overflow: hidden;
}
.csw_selected_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 8px;
}
.csw_selected_name {
    font-size: 14px;
    font-weight: 700;
    color: #005f4c;
    margin-bottom: 3px;
}
.csw_selected_addr {
    font-size: 11px;
    color: #6a8a7e;
}
.csw_selected_remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 95, 76, 0.1);
    color: #005f4c;
    border: none;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    font-family: inherit;
}
.csw_map_preview {
    width: 100%;
    height: 180px;
    background: #f0f0f0;
}

.csw_manual_input {
    margin-top: 10px;
}
.csw_manual_input summary {
    font-size: 12px;
    color: #6a6a6a;
    cursor: pointer;
    padding: 6px 0;
    list-style: none;
}
.csw_manual_input summary::-webkit-details-marker { display: none; }
.csw_manual_input[open] summary { color: #005f4c; }
.csw_manual_input summary:hover { color: #005f4c; }

/* * crew_schedule_detail.php 전용 스타일 */
 .csd_wrap { max-width: 720px; margin: 0 auto; padding: 14px 13px 100px; }

.csd_crew_chip_wrap { margin-bottom: 12px; }
.csd_crew_chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eafaef; color: #005f4c;
    padding: 6px 12px; border-radius: 100px;
    font-size: 12px; font-weight: 500; text-decoration: none;
}

/* 메인 박스 (날짜 + 정보) */
.csd_main {
    display: flex; gap: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fdfa 100%);
    border: 1px solid #cdeae4; border-radius: 18px;
    padding: 20px 18px; margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 95, 76, 0.06);
}
.csd_main.is_past {
    background: #f5f5f5;
    border-color: #e0e0e0;
    opacity: 0.85;
}
.csd_date_box {
    flex-shrink: 0; width: 78px;
    background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
    color: #fff; border-radius: 14px;
    padding: 12px 8px; text-align: center;
    box-shadow: 0 4px 12px rgba(0, 95, 76, 0.25);
}
.csd_main.is_past .csd_date_box {
    background: linear-gradient(135deg, #6a6a6a 0%, #8a8a8a 100%);
    box-shadow: none;
}
.csd_month { font-size: 11px; opacity: 0.85; }
.csd_day { font-size: 32px; font-weight: 800; line-height: 1; margin: 4px 0; }
.csd_dayname { font-size: 11px; opacity: 0.9; }

.csd_main_info { flex: 1; min-width: 0; }
.csd_title {
    font-size: 18px; font-weight: 700; color: #1a1a1a;
    margin: 0 0 10px; letter-spacing: -0.3px; line-height: 1.3;
}
.csd_time {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; color: #005f4c; font-weight: 600;
    margin-bottom: 10px;
}
.csd_place {
    display: flex; gap: 6px; align-items: flex-start;
}
.csd_place_icon { font-size: 14px; line-height: 1.4; flex-shrink: 0; }
.csd_place_name { font-size: 13px; color: #2d2d2d; font-weight: 500; }
.csd_place_addr { font-size: 11px; color: #8a8a8a; margin-top: 2px; }

/* 알림 박스 */
.csd_alert {
    display: flex; gap: 12px; align-items: center;
    padding: 14px 16px; border-radius: 14px;
    margin-bottom: 12px;
}
.csd_alert_emoji { font-size: 28px; flex-shrink: 0; line-height: 1; }
.csd_alert strong {
    display: block; font-size: 14px; font-weight: 700;
    margin-bottom: 3px; letter-spacing: -0.2px;
}
.csd_alert em { font-style: normal; font-size: 12px; }

.csd_alert--attend {
    background: linear-gradient(135deg, #eafaef 0%, #d4f4e2 100%);
    border: 1px solid rgba(0, 168, 120, 0.2);
}
.csd_alert--attend strong { color: #005f4c; }
.csd_alert--attend em { color: #2d5a4a; }

.csd_alert--invite {
    background: linear-gradient(135deg, #fff8e6 0%, #fff0c4 100%);
    border: 1px solid rgba(255, 149, 0, 0.25);
    animation: csd_pulse 2.5s ease-in-out infinite;
}
.csd_alert--invite strong { color: #c98800; }
.csd_alert--invite em { color: #8a7000; }
.csd_reward_pill {
    background: linear-gradient(135deg, #ff9500 0%, #ff7800 100%);
    color: #fff; padding: 2px 8px; border-radius: 100px;
    font-size: 11px; font-weight: 700; margin: 0 2px;
}

@keyframes csd_pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0); }
    50% { box-shadow: 0 0 0 6px rgba(255, 149, 0, 0.1); }
}

.csd_alert--need {
    background: linear-gradient(135deg, #f0f4ff 0%, #e0eaff 100%);
    border: 1px solid rgba(100, 130, 200, 0.2);
}
.csd_alert--need strong { color: #4a5e9e; }
.csd_alert--need em { color: #6a7eae; }

.csd_alert--past {
    background: #f5f5f5; border: 1px solid #e0e0e0;
}
.csd_alert--past strong { color: #6a6a6a; }
.csd_alert--past em { color: #8a8a8a; }

/* 모임장 한마디 */
.csd_leader_msg {
    background: linear-gradient(135deg, #fff8e6 0%, #ffefc4 100%);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: 14px; padding: 14px 16px;
    margin-bottom: 12px;
}
.csd_leader_head {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
}
.csd_leader_icon { font-size: 16px; }
.csd_leader_label {
    font-size: 12px; font-weight: 600; color: #c98800;
}
.csd_leader_text {
    font-size: 14px; color: #6a4500;
    line-height: 1.5; margin: 0;
    font-weight: 500; letter-spacing: -0.2px;
}

.csd_leader_msg--empty {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; padding: 12px 16px;
    border-style: dashed;
    transition: all 0.15s ease;
}
.csd_leader_msg--empty:hover {
    background: linear-gradient(135deg, #fff3d4 0%, #ffe8b3 100%);
}
.csd_leader_msg--empty span:nth-child(2) {
    flex: 1; font-size: 13px; color: #c98800; font-weight: 500;
}
.csd_leader_arrow {
    font-size: 18px; color: #c98800; font-weight: 700;
}

/* 설명 */
.csd_desc {
    background: #fff; border: 1px solid #efefef;
    border-radius: 14px; padding: 16px;
    margin-bottom: 12px;
}
.csd_desc_label {
    font-size: 13px; font-weight: 600; color: #005f4c;
    margin-bottom: 8px;
}
.csd_desc_text {
    font-size: 14px; color: #2d2d2d;
    line-height: 1.6; word-break: break-word;
}

/* 참석자 */
.csd_attendees {
    background: #fff; border: 1px solid #efefef;
    border-radius: 14px; padding: 16px;
    margin-bottom: 12px;
}
.csd_attendees_head {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 12px;
    font-size: 13px; font-weight: 600; color: #1a1a1a;
}
.csd_attendees_head strong { color: #005f4c; }
.csd_reward_badge {
    background: linear-gradient(135deg, #ff9500 0%, #ff7800 100%);
    color: #fff; padding: 4px 10px; border-radius: 100px;
    font-size: 11px; font-weight: 700;
}

.csd_no_attend {
    text-align: center; padding: 20px 0;
    color: #8a8a8a;
}
.csd_no_attend span { font-size: 32px; display: block; margin-bottom: 8px; }
.csd_no_attend p { font-size: 12px; margin: 0; line-height: 1.5; }

.csd_attendees_list {
    display: flex; gap: 12px;
    flex-wrap: wrap;
}
.csd_attendee {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    width: 56px;
}
.csd_att_avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.csd_att_name {
    font-size: 11px; color: #4a4a4a;
    text-align: center; max-width: 56px;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
}

/* 모임장 도구 */
.csd_leader_tools {
    background: linear-gradient(135deg, #fff 0%, #f8fdfa 100%);
    border: 1px solid #cdeae4; border-radius: 14px;
    padding: 14px 16px; margin-bottom: 12px;
}
.csd_tools_label {
    font-size: 12px; font-weight: 600;
    color: #005f4c; margin-bottom: 10px;
}
.csd_tools_row { display: flex; gap: 8px; }
.csd_tool_btn {
    flex: 1; padding: 10px 8px; background: #fff;
    border: 1.5px solid #efefef; border-radius: 10px;
    font-size: 12px; font-weight: 600; color: #4a4a4a;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center;
    justify-content: center; gap: 4px;
    transition: all 0.15s ease;
}
.csd_tool_btn:hover { border-color: #005f4c; color: #005f4c; }
.csd_tool_btn--danger:hover { border-color: #e74c5e; color: #e74c5e; }
.csd_tool_btn span { font-size: 14px; }

/* 액션 바 (하단 고정) */
.csd_action_bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-top: 1px solid #f0f0f0;
    padding: 12px 13px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 50;
}
.csd_action_btn {
    width: 100%; max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 14px; border: none;
    border-radius: 100px; font-size: 15px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: all 0.15s ease;
}
.csd_action_btn--attend {
    background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
    color: #fff; box-shadow: 0 4px 14px rgba(0, 95, 76, 0.3);
}
.csd_action_btn--attend em {
    font-style: normal; background: rgba(255,255,255,0.25);
    padding: 3px 9px; border-radius: 100px;
    font-size: 12px; margin-left: 4px;
}
.csd_action_btn--cancel {
    background: #f0f2ee; color: #4a4a4a;
}
.csd_action_btn--login {
    background: linear-gradient(135deg, #4a5e9e 0%, #6a7eae 100%);
    color: #fff; text-decoration: none;
    box-shadow: 0 4px 14px rgba(74, 94, 158, 0.25);
}
.csd_action_btn--login:hover { color: #fff; text-decoration: none; }

/* 참석 토스트 */
.csd_attend_toast {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    background: linear-gradient(135deg, #fff 0%, #eafaef 100%);
    border: 1.5px solid #d4f4e2;
    border-radius: 22px; padding: 24px 30px;
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    box-shadow: 0 20px 50px rgba(0, 95, 76, 0.3);
    z-index: 99999; min-width: 200px; text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.csd_attend_toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.csd_attend_toast span { font-size: 44px; }
.csd_attend_toast strong {
    font-size: 18px; color: #005f4c; font-weight: 800;
}
.csd_attend_toast em {
    font-style: normal; font-size: 13px; color: #6a8a7e;
}

/* 한마디 팝업 */
.csd_pop_emoji { font-size: 44px; text-align: center; margin-bottom: 8px; }
.csd_pop_title {
    text-align: center; font-size: 18px;
    font-weight: 700; margin: 0 0 4px; color: #1a1a1a;
}
.csd_pop_sub {
    text-align: center; font-size: 12px;
    color: #8a8a8a; margin: 0 0 14px; line-height: 1.5;
}
.csd_pop_textarea {
    width: 100%; min-height: 100px; padding: 12px 14px;
    border: 1.5px solid #efefef; border-radius: 12px;
    font-size: 14px; line-height: 1.6; font-family: inherit;
    resize: none; outline: none; color: #1a1a1a;
}
.csd_pop_textarea:focus { border-color: #005f4c; }

@media (min-width: 1024px) {
    .csd_wrap { padding: 24px 0 100px; max-width: 760px; }
    .csd_main { padding: 24px; }
    .csd_title { font-size: 22px; }
    .csd_action_btn { font-size: 16px; padding: 16px; }
}

/* 장소 정보 박스 */
.csd_place_info_box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 10px;
    border-bottom: 1px solid #f5f5f5;
}
.csd_place_info_text {
    flex: 1;
    min-width: 0;
}
.csd_place_info_name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.csd_place_info_addr {
    font-size: 12px;
    color: #6a6a6a;
}

/* 🗺️ 지도 섹션 */
.csd_map_section {
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}
.csd_map_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f5f5f5;
}
.csd_map_label {
    font-size: 13px;
    font-weight: 600;
    color: #005f4c;
}
.csd_map_directions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fee500 0%, #fdc500 100%);
    color: #3c1e1e;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(254, 229, 0, 0.25);
}
.csd_map_directions:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(254, 229, 0, 0.35);
    color: #3c1e1e;
    text-decoration: none;
}
.csd_map_box {
    width: 100%;
    height: 220px;
    background: #f5f5f5;
}

@media (min-width: 1024px) {
    .csd_map_box { height: 280px; }
}

 /* * crew_post_write.php 전용 스타일 */
.cpw_wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 13px 0;
  position: relative;
}

@media screen and (min-width: 1023.9px) {
  .cpw_wrap {
    padding: 24px 0 0;
    max-width: 760px;
  }
}

.cpw_top {
  background: linear-gradient(180deg, #eafaef 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 95, 76, 0.1);
}

.cpw_top_crew {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 95, 76, 0.12);
  margin-bottom: 10px;
}
.cpw_top_crew_emoji {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(0, 95, 76, 0.12);
  flex-shrink: 0;
}
.cpw_top_crew_info {
  flex: 1;
  min-width: 0;
}
.cpw_top_crew_label {
  font-size: 10px;
  color: #646464;
  margin-bottom: 1px;
}
.cpw_top_crew_name {
  font-size: 14px;
  font-weight: 600;
  color: #005f4c;
}

@media screen and (min-width: 1023.9px) {
  .cpw_top {
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 20px;
  }
  .cpw_top_crew_emoji {
    width: 44px;
    height: 44px;
    font-size: 24px;
    border-radius: 13px;
  }
  .cpw_top_crew_label { font-size: 12px; }
  .cpw_top_crew_name { font-size: 16px; }
}

/* 카테고리 버튼 */
.cpw_category_btn {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 95, 76, 0.15);
  border-radius: 12px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
}
.cpw_category_btn:hover {
  border-color: #005f4c;
  background: #f8fdfa;
}
.cpw_category_emoji {
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
}
.cpw_category_label {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  flex-shrink: 0;
}
.cpw_category_desc {
  flex: 1;
  font-size: 11px;
  color: #8f8f8f;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpw_chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid #8f8f8f;
  border-bottom: 2px solid #8f8f8f;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

@media screen and (min-width: 1023.9px) {
  .cpw_category_btn { padding: 14px 16px; border-radius: 14px; }
  .cpw_category_emoji { font-size: 22px; }
  .cpw_category_label { font-size: 15px; }
  .cpw_category_desc { font-size: 13px; }
}

/* ====== 본문 입력 카드 ====== */
.cpw_body {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 16px;
  padding: 18px;
  min-height: 320px;
  position: relative;
  margin-bottom: 14px;
}

@media screen and (min-width: 1023.9px) {
  .cpw_body {
    padding: 28px 30px;
    min-height: 420px;
    border-radius: 20px;
    margin-bottom: 18px;
  }
}

/* 제목 인풋 */
.cpw_title_input {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #efefef !important;
  border-radius: 0 !important;
  padding: 6px 0 10px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  height: auto !important;
  background: transparent !important;
  color: #1a1a1a;
  outline: none;
  font-family: inherit;
}
.cpw_title_input::placeholder {
  color: #c8c8c8;
  font-weight: 500;
}
.cpw_title_input:focus {
  outline: none !important;
  border-bottom-color: #005f4c !important;
}

@media screen and (min-width: 1023.9px) {
  .cpw_title_input {
    font-size: 19px !important;
    padding: 8px 0 12px !important;
  }
}

/* 본문 텍스트 영역 */
.cpw_content_input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  padding: 14px 0 30px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  min-height: 200px !important;
  resize: none;
  color: #2d2d2d;
  outline: none;
  font-family: inherit;
}
.cpw_content_input::placeholder {
  color: #c8c8c8;
}
.cpw_content_input:focus {
  outline: none !important;
}

@media screen and (min-width: 1023.9px) {
  .cpw_content_input {
    font-size: 15px !important;
    min-height: 260px !important;
    padding: 18px 0 34px !important;
  }
}

/* 글자수 (본문 박스 우측 하단 떠있는 형태) */
.cpw_char_count {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 11px;
  color: #b0b0b0;
  background: rgba(255, 255, 255, 0.92);
  padding: 2px 8px;
  border-radius: 8px;
  pointer-events: none;
  font-weight: 500;
}

@media screen and (min-width: 1023.9px) {
  .cpw_char_count {
    bottom: 14px;
    right: 20px;
    font-size: 12px;
  }
}

/* ====== 펼침형 모듈 공통 ====== */
.cpw_module {
  margin-top: 16px;
  padding: 14px;
  background: #fafafa;
  border-radius: 12px;
}
.cpw_module_label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #005f4c;
  margin-bottom: 10px;
}
.cpw_module_count {
  margin-left: auto;
  font-size: 11px;
  color: #8f8f8f;
  font-weight: 500;
}
.cpw_mod_icon {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
}
.cpw_mod_photo {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Crect x='2' y='3' width='12' height='10' rx='1.5' stroke='%23005f4c' stroke-width='1.3'/%3E%3Ccircle cx='6' cy='6.5' r='1' fill='%23005f4c'/%3E%3Cpath d='m2.5 11.5 3.5-3 4 3 3.5-2.5' stroke='%23005f4c' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cpw_mod_hash {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23005f4c' stroke-linecap='round' stroke-width='1.5' d='M6 2l-1 12M11 2l-1 12M2 6h12M2 11h12'/%3E%3C/svg%3E");
}
.cpw_mod_chart {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Crect x='2' y='6' width='3' height='8' fill='%23005f4c'/%3E%3Crect x='6.5' y='2' width='3' height='12' fill='%23005f4c'/%3E%3Crect x='11' y='9' width='3' height='5' fill='%23005f4c'/%3E%3C/svg%3E");
}

/* ====== 사진 갤러리 ====== */
.cpw_photos_list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.cpw_photos_list::-webkit-scrollbar { height: 4px; }
.cpw_photos_list::-webkit-scrollbar-thumb {
  background: rgba(0, 95, 76, 0.2);
  border-radius: 2px;
}
.cpw_photo_item {
  position: relative;
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: #efefef;
}
.cpw_photo_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cpw_photo_main {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 95, 76, 0.9);
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.cpw_photo_del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  border: none;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.cpw_photo_add {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border: 1.5px dashed #005f4c;
  background: #eafaef;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #005f4c;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
}
.cpw_photo_add_plus {
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath stroke='%23005f4c' stroke-linecap='round' stroke-width='2' d='M9 3v12M3 9h12'/%3E%3C/svg%3E");
}

@media screen and (min-width: 1023.9px) {
  .cpw_photo_item,
  .cpw_photo_add {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
  }
}

/* ====== 해시태그 ====== */
.cpw_hashtag_input_wrap {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.cpw_hashtag_input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 13px !important;
  outline: none;
  font-family: inherit;
}
.cpw_hashtag_input:focus { outline: none !important; }
.cpw_hashtag_list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cpw_hashtag_list:empty { display: none; }
.cpw_tag_chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #2d2d2d;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 14px;
  font-weight: 500;
}
.cpw_tag_x {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' viewBox='0 0 8 8'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='1.3' d='M1 1l6 6M7 1L1 7'/%3E%3C/svg%3E");
  cursor: pointer;
  opacity: 0.7;
}
.cpw_tag_x:hover { opacity: 1; }

/* ====== 장소 ====== */
.cpw_place_card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #efefef;
}
.cpw_pin_icon {
  width: 18px;
  height: 22px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' fill='none' viewBox='0 0 18 22'%3E%3Cpath fill='%23005f4c' d='M9 0a8 8 0 0 0-8 8c0 6 8 14 8 14s8-8 8-14a8 8 0 0 0-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-top: 2px;
}
.cpw_place_info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cpw_place_input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  height: auto !important;
  padding: 4px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none;
  font-family: inherit;
}
.cpw_place_input:focus { outline: none !important; }
.cpw_place_addr_input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  height: auto !important;
  padding: 2px 0 !important;
  font-size: 12px !important;
  color: #8f8f8f !important;
  outline: none;
  font-family: inherit;
}
.cpw_place_addr_input:focus { outline: none !important; }
.cpw_place_close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: #646464;
  font-size: 14px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  font-family: inherit;
}

/* ====== 투표 모듈 ====== */
.cpw_poll_module {
  background: #f8fdfa;
  border: 1.5px solid #cdeae4;
}
.cpw_poll_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cpw_poll_head .cpw_module_label {
  margin-bottom: 0;
}
.cpw_poll_close {
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(0, 95, 76, 0.1);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.cpw_close_x {
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath stroke='%23005f4c' stroke-linecap='round' stroke-width='1.5' d='M1 1l8 8M9 1L1 9'/%3E%3C/svg%3E");
}
.cpw_poll_title {
  width: 100%;
  background: #fff !important;
  border: 1px solid #cdeae4 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 42px !important;
  margin-bottom: 8px;
  outline: none;
  font-family: inherit;
}
.cpw_poll_title:focus {
  border-color: #005f4c !important;
  outline: none !important;
}
.cpw_poll_options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.cpw_poll_option {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cpw_poll_option input {
  flex: 1;
  background: #fff !important;
  border: 1px solid #e2e3e5 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  height: 38px !important;
  outline: none;
  font-family: inherit;
}
.cpw_poll_option input:focus {
  border-color: #005f4c !important;
  outline: none !important;
}
.cpw_poll_opt_del {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(224, 17, 0, 0.1);
  color: #e01100;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  font-family: inherit;
}
.cpw_poll_add {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed #005f4c;
  background: transparent;
  border-radius: 10px;
  color: #005f4c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cpw_poll_multi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid #cdeae4;
  font-size: 13px;
  color: #005f4c;
  font-weight: 500;
}

/* ============================================================
   ⭐ 하단 통합 박스 (액션바 + 게시하기) - 핵심
   ============================================================ */
.cpw_footer {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
}

@media screen and (min-width: 1023.9px) {
  .cpw_footer {
    border-radius: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  }
}

/* 액션바 (위쪽) */
.cpw_actionbar {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  border-bottom: 1px solid #f5f5f5;
}

.cpw_action {
  position: relative;
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 4px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: #646464;
  transition: all 0.2s ease;
  font-family: inherit;
}
.cpw_action:hover {
  background: rgba(0, 95, 76, 0.05);
}
.cpw_action.is_active {
  color: #005f4c;
  background: rgba(0, 95, 76, 0.08);
}

.cpw_act_icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.cpw_act_photo {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Crect x='3' y='4' width='16' height='14' rx='2' stroke='%23646464' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='9' r='1.5' fill='%23646464'/%3E%3Cpath d='m3.5 16 4-4 5 4 4-3 2 2' stroke='%23646464' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.is_active .cpw_act_photo {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Crect x='3' y='4' width='16' height='14' rx='2' stroke='%23005f4c' stroke-width='1.7'/%3E%3Ccircle cx='8' cy='9' r='1.5' fill='%23005f4c'/%3E%3Cpath d='m3.5 16 4-4 5 4 4-3 2 2' stroke='%23005f4c' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cpw_act_hash {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='%23646464' stroke-linecap='round' stroke-width='1.6' d='M8 3l-2 16M16 3l-2 16M3 8h16M3 14h16'/%3E%3C/svg%3E");
}
.is_active .cpw_act_hash {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='%23005f4c' stroke-linecap='round' stroke-width='1.8' d='M8 3l-2 16M16 3l-2 16M3 8h16M3 14h16'/%3E%3C/svg%3E");
}
.cpw_act_pin {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='%23646464' stroke-width='1.5' d='M11 2a7 7 0 0 0-7 7c0 5 7 11 7 11s7-6 7-11a7 7 0 0 0-7-7Z'/%3E%3Ccircle cx='11' cy='9' r='2.5' stroke='%23646464' stroke-width='1.5'/%3E%3C/svg%3E");
}
.is_active .cpw_act_pin {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Cpath fill='%23005f4c' d='M11 2a7 7 0 0 0-7 7c0 5 7 11 7 11s7-6 7-11a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}
.cpw_act_chart {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Crect x='3' y='10' width='4' height='9' fill='%23646464'/%3E%3Crect x='9' y='4' width='4' height='15' fill='%23646464'/%3E%3Crect x='15' y='13' width='4' height='6' fill='%23646464'/%3E%3C/svg%3E");
}
.is_active .cpw_act_chart {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Crect x='3' y='10' width='4' height='9' fill='%23005f4c'/%3E%3Crect x='9' y='4' width='4' height='15' fill='%23005f4c'/%3E%3Crect x='15' y='13' width='4' height='6' fill='%23005f4c'/%3E%3C/svg%3E");
}
.cpw_act_more {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='5' r='1.8' fill='%23646464'/%3E%3Ccircle cx='11' cy='11' r='1.8' fill='%23646464'/%3E%3Ccircle cx='11' cy='17' r='1.8' fill='%23646464'/%3E%3C/svg%3E");
}

.cpw_act_label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

@media screen and (min-width: 1023.9px) {
  .cpw_actionbar { padding: 14px 18px; }
  .cpw_action { padding: 10px 6px; gap: 4px; }
  .cpw_act_icon { width: 24px; height: 24px; }
  .cpw_act_label { font-size: 12px; }
}

.cpw_act_badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 18px);
  background: #e3a100;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
}
.cpw_act_dot {
  position: absolute;
  top: 6px;
  right: calc(50% - 14px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #005f4c;
  border: 1.5px solid #fff;
}

/* 게시하기 버튼 (아래쪽, 같은 박스) */
.cpw_submit_wrap {
  padding: 12px 14px 14px;
}

.cpw_submit_btn {
  width: 100%;
  background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 95, 76, 0.22);
  font-family: inherit;
  transition: all 0.15s ease;
}
.cpw_submit_btn:hover {
  box-shadow: 0 6px 18px rgba(0, 95, 76, 0.3);
  transform: translateY(-1px);
}
.cpw_submit_btn:active {
  transform: scale(0.98);
}

@media screen and (min-width: 1023.9px) {
  .cpw_submit_wrap { padding: 16px 20px 20px; }
  .cpw_submit_btn {
    padding: 16px;
    font-size: 16px;
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }
}

/* ============================================================
   ⭐ com_popup 표준 팝업 (카테고리 / 옵션)
   ============================================================ */
.pop_cpw_category .pop_container,
.pop_cpw_options .pop_container {
  max-width: 440px;
}

.pop_cpw_category .pop_tit,
.pop_cpw_options .pop_tit {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 4px;
}
.pop_cpw_category .pop_sub_tit,
.pop_cpw_options .pop_sub_tit {
  text-align: center;
  font-size: 13px;
  color: #8f8f8f;
  margin-bottom: 20px;
}

@media screen and (min-width: 1023.9px) {
  .pop_cpw_category .pop_tit,
  .pop_cpw_options .pop_tit { font-size: 20px; }
  .pop_cpw_category .pop_sub_tit,
  .pop_cpw_options .pop_sub_tit { font-size: 14px; margin-bottom: 24px; }
}

/* 카테고리 리스트 */
.cpw_cat_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cpw_cat_item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #efefef;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  font-family: inherit;
}
.cpw_cat_item:hover:not(.is_disabled) {
  border-color: #005f4c;
  background: #f8fdfa;
}
.cpw_cat_item.is_selected {
  border-color: #005f4c;
  background: #eafaef;
}
.cpw_cat_item.is_selected .cpw_cat_check {
  border-color: #005f4c;
  background: #005f4c;
  position: relative;
}
.cpw_cat_item.is_selected .cpw_cat_check::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
}
.cpw_cat_item.is_disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cpw_cat_emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.cpw_cat_text {
  flex: 1;
  min-width: 0;
}
.cpw_cat_label {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin-bottom: 2px;
}
.cpw_cat_desc {
  font-size: 11px;
  color: #8f8f8f;
}
.cpw_cat_check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d9d9d9;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

@media screen and (min-width: 1023.9px) {
  .cpw_cat_item { padding: 14px 18px; }
  .cpw_cat_emoji { font-size: 28px; }
  .cpw_cat_label { font-size: 15px; }
  .cpw_cat_desc { font-size: 12px; }
}

/* 옵션 시트 */
.cpw_opt_list {
  display: flex;
  flex-direction: column;
}
.cpw_opt_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #f5f5f5;
}
.cpw_opt_item:last-child { border-bottom: none; }
.cpw_opt_info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.cpw_opt_icon {
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.cpw_opt_pin {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='%23005f4c' stroke-width='1.5' stroke-linecap='round' d='M11 2v8M5 10h12l-3 3v6l-3-2-3 2v-6l-3-3Z'/%3E%3C/svg%3E");
}
.cpw_opt_comment {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='%23005f4c' stroke-width='1.5' stroke-linejoin='round' d='M3 4h16v11h-9l-4 3v-3H3V4Z'/%3E%3C/svg%3E");
}
.cpw_opt_users {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='8' r='3.5' stroke='%23005f4c' stroke-width='1.5'/%3E%3Cpath stroke='%23005f4c' stroke-width='1.5' d='M4 18a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}
.cpw_opt_title {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin-bottom: 2px;
}
.cpw_opt_sub {
  font-size: 11px;
  color: #8f8f8f;
}

@media screen and (min-width: 1023.9px) {
  .cpw_opt_icon { width: 24px; height: 24px; }
  .cpw_opt_title { font-size: 15px; }
  .cpw_opt_sub { font-size: 12px; }
}

/* ====== 스위치 토글 ====== */
.cpw_switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.cpw_switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cpw_switch_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #dfe5ed;
  border-radius: 22px;
  transition: 0.25s;
}
.cpw_switch_slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s;
}
.cpw_switch input:checked + .cpw_switch_slider {
  background: #005f4c;
}
.cpw_switch input:checked + .cpw_switch_slider::before {
  transform: translateX(18px);
}

/* ====== 🕐 투표 기간 ====== */
.cpw_poll_period {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #cdeae4;
}
.cpw_poll_period_label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #005f4c;
    margin-bottom: 10px;
}
.cpw_mod_clock {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23005f4c' stroke-width='1.5' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4v4l3 2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.cpw_poll_period_presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.cpw_period_btn {
    padding: 7px 13px;
    border: 1.5px solid #e2e3e5;
    background: #fff;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: #6a6a6a;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}
.cpw_period_btn:hover {
    border-color: #005f4c;
    color: #005f4c;
}
.cpw_period_btn.is_active {
    background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
    border-color: #005f4c;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 95, 76, 0.2);
}

.cpw_poll_period_custom {
    display: none;
    gap: 8px;
    margin-bottom: 10px;
}
.cpw_poll_period_custom[style*="flex"] {
    display: flex;
}
.cpw_period_date,
.cpw_period_time {
    flex: 1;
    background: #fff !important;
    border: 1.5px solid #cdeae4 !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    height: 38px !important;
    outline: none;
    font-family: inherit;
    color: #1a1a1a;
}
.cpw_period_date {
    flex: 1.5;
}
.cpw_period_time {
    flex: 1;
}
.cpw_period_date:focus,
.cpw_period_time:focus {
    border-color: #005f4c !important;
    outline: none !important;
}

.cpw_poll_period_preview {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 95, 76, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: #005f4c;
    font-weight: 500;
}
.cpw_period_preview_icon {
    font-size: 14px;
}

@media screen and (min-width: 1023.9px) {
    .cpw_period_btn { padding: 8px 16px; font-size: 13px; }
    .cpw_poll_period_preview { font-size: 13px; }
}

/* * crew_post_detail.php 전용 스타일 */
.cpd_wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 13px 80px;
  position: relative;
}
@media screen and (min-width: 1023.9px) {
  .cpd_wrap {
    padding: 24px 0 100px;
    max-width: 760px;
  }
}

/* ====== 🌱 모임 정보 알약 ====== */
.cpd_crew_chip_wrap {
  margin-bottom: 12px;
}
.cpd_crew_chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eafaef;
  color: #005f4c;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}
.cpd_crew_chip:hover {
  background: #d4f4e2;
  text-decoration: none;
  color: #005f4c;
}
.cpd_crew_chip_emoji {
  font-size: 14px;
  line-height: 1;
}
@media screen and (min-width: 1023.9px) {
  .cpd_crew_chip { padding: 7px 14px; font-size: 13px; }
}

/* ====== 👤 작성자 영역 ====== */
.cpd_author {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f5f5f5;
}
.cpd_author_avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.cpd_author_info {
  flex: 1;
  min-width: 0;
}
.cpd_author_top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.cpd_author_name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.cpd_author_role {
  font-size: 9px;
  background: rgba(255, 149, 0, 0.12);
  color: #ff9500;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
}
.cpd_author_meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8f8f8f;
}

/* 카테고리 뱃지 (우측) */
.cpd_cat_badge {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  align-self: center;
  letter-spacing: -0.2px;
}
@media screen and (min-width: 1023.9px) {
  .cpd_author { padding-bottom: 20px; margin-bottom: 20px; }
  .cpd_author_avatar { width: 48px; height: 48px; font-size: 22px; }
  .cpd_author_name { font-size: 15px; }
  .cpd_author_meta { font-size: 12px; }
  .cpd_cat_badge { font-size: 12px; padding: 6px 13px; }
}

/* ====== 📝 본문 ====== */
.cpd_body {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 6px solid #fafafa;
}
.cpd_title {
  font-size: 19px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 14px;
  line-height: 1.4;
  letter-spacing: -0.3px;
}
.cpd_content {
  font-size: 14px;
  color: #2d2d2d;
  line-height: 1.7;
  margin-bottom: 14px;
  word-break: break-word;
}
@media screen and (min-width: 1023.9px) {
  .cpd_title { font-size: 24px; margin-bottom: 18px; }
  .cpd_content { font-size: 16px; line-height: 1.8; margin-bottom: 18px; }
  .cpd_body { padding-bottom: 22px; margin-bottom: 22px; }
}

/* ====== 📸 사진 슬라이더 (인스타식) ====== */
.cpd_slider {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  margin-bottom: 14px;
  aspect-ratio: 4/3;
  user-select: none;
  -webkit-user-select: none;
}
.cpd_slider_track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cpd_slider_slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cpd_slider_slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cpd_slider_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.15s ease;
  font-family: inherit;
}
.cpd_slider_btn:hover { background: rgba(0, 0, 0, 0.7); }
.cpd_slider_btn--prev { left: 10px; }
.cpd_slider_btn--next { right: 10px; }
.cpd_chev {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.cpd_chev--left { transform: rotate(135deg); margin-right: -3px; }
.cpd_chev--right { transform: rotate(-45deg); margin-left: -3px; }

.cpd_slider_counter {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cpd_slider_dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.cpd_slider_dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}
.cpd_slider_dot.is_active {
  background: #fff;
  width: 18px;
  border-radius: 100px;
}

@media screen and (min-width: 1023.9px) {
  .cpd_slider {
    aspect-ratio: 16/10;
    border-radius: 18px;
  }
  .cpd_slider_btn { width: 40px; height: 40px; }
  .cpd_slider_counter { font-size: 12px; padding: 5px 13px; }
}

/* ====== 🏷️ 해시태그 ====== */
.cpd_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cpd_tag {
  background: #2d2d2d;
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 500;
}
@media screen and (min-width: 1023.9px) {
  .cpd_tag { font-size: 13px; padding: 5px 12px; }
}

/* ====== 📍 장소 카드 ====== */
.cpd_place {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f8fdfa;
  border: 1px solid #cdeae4;
  border-radius: 12px;
  padding: 12px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.cpd_place:hover {
  border-color: #005f4c;
  text-decoration: none;
}
.cpd_place_info {
  flex: 1;
  min-width: 0;
}
.cpd_place_name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 1px;
}
.cpd_place_addr {
  font-size: 11px;
  color: #8f8f8f;
}
@media screen and (min-width: 1023.9px) {
  .cpd_place_name { font-size: 15px; }
  .cpd_place_addr { font-size: 13px; }
}

/* ====== 좋아요/댓글/공유 액션바 ====== */
.cpd_actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 8px;
}

.cpd_act_like,
.cpd_act_comment,
.cpd_act_share,
.cpd_act_more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.15s ease;
}

.cpd_act_like {
  background: #f5f5f5;
  color: #646464;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
}
.cpd_act_like.is_active {
  background: linear-gradient(135deg, #ff6b6b 0%, #e74c5e 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(231, 76, 94, 0.25);
}
.cpd_act_like.is_active .cpd_icon_heart {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s-5-3-5-7.5C3 4 4.5 3 6 3c1 0 1.7.5 2 1.2C8.3 3.5 9 3 10 3c1.5 0 3 1 3 3.5C13 11 8 14 8 14z'/%3E%3C/svg%3E");
}

.cpd_act_comment {
  background: #f5f5f5;
  color: #646464;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 13px;
}

.cpd_act_share,
.cpd_act_more {
  background: #f5f5f5;
  color: #646464;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  justify-content: center;
  padding: 0;
}
.cpd_act_more {
  margin-left: auto;
}

@media screen and (min-width: 1023.9px) {
  .cpd_act_like, .cpd_act_comment {
    padding: 10px 20px;
    font-size: 14px;
  }
  .cpd_act_share, .cpd_act_more {
    width: 40px;
    height: 40px;
  }
}

/* ====== 💬 댓글 섹션 ====== */
.cpd_comments {
  background: #fafafa;
  margin: 0 -13px;
  padding: 16px 13px;
  border-radius: 0;
}
@media screen and (min-width: 1023.9px) {
  .cpd_comments {
    margin: 0;
    padding: 24px;
    border-radius: 16px;
  }
}

.cpd_comments_head {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}
.cpd_comments_head strong {
  color: #005f4c;
  font-weight: 700;
  margin-left: 2px;
}
@media screen and (min-width: 1023.9px) {
  .cpd_comments_head { font-size: 16px; margin-bottom: 20px; }
}

.cpd_comments_empty {
  text-align: center;
  padding: 30px 0;
  color: #aaa;
}
.cpd_comments_empty p {
  font-size: 13px;
  margin: 8px 0 0;
}

.cpd_comment_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cpd_comment_item {
  margin-bottom: 18px;
}
.cpd_comment_item:last-child {
  margin-bottom: 0;
}

.cpd_cmt_main {
  display: flex;
  gap: 10px;
}
.cpd_cmt_avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cpd_cmt_body {
  flex: 1;
  min-width: 0;
}
.cpd_cmt_bubble {
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
}
.cpd_cmt_bubble--reply {
  padding: 9px 11px;
  border-radius: 12px;
}

.cpd_cmt_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
  gap: 6px;
}
.cpd_cmt_head_left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.cpd_cmt_name {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
}
.cpd_cmt_name--sm {
  font-size: 11px;
}
.cpd_cmt_role {
  font-size: 9px;
  background: rgba(255, 149, 0, 0.12);
  color: #ff9500;
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 600;
}
.cpd_cmt_role--sm {
  font-size: 8px;
  padding: 1px 5px;
}
.cpd_cmt_text {
  font-size: 13px;
  color: #2d2d2d;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.cpd_cmt_text--sm {
  font-size: 12px;
}
.cpd_cmt_more {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #aaa;
  font-family: inherit;
  flex-shrink: 0;
}

.cpd_cmt_actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 12px 0;
  font-size: 11px;
  color: #8f8f8f;
}
.cpd_cmt_actions--reply {
  padding: 4px 11px 0;
  font-size: 10px;
  gap: 12px;
}
.cpd_cmt_time {
  font-weight: 500;
}
.cpd_cmt_like {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  font-weight: 500;
  color: #8f8f8f;
  font-size: inherit;
}
.cpd_cmt_like.is_active {
  color: #e74c5e;
  font-weight: 700;
}
.cpd_cmt_like.is_active .cpd_icon_heart_sm {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='%23e74c5e' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s-5-3-5-7.5C3 4 4.5 3 6 3c1 0 1.7.5 2 1.2C8.3 3.5 9 3 10 3c1.5 0 3 1 3 3.5C13 11 8 14 8 14z'/%3E%3C/svg%3E");
}
.cpd_cmt_reply {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-weight: 500;
  color: #646464;
  font-size: inherit;
}
.cpd_cmt_reply:hover { color: #005f4c; }

/* ↳ 대댓글 (들여쓰기 + 좌측 라인) */
.cpd_reply_list {
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid #e8e8e8;
}
.cpd_reply_item {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.cpd_reply_item:last-child {
  margin-bottom: 0;
}
.cpd_reply_avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.cpd_reply_body {
  flex: 1;
  min-width: 0;
}

@media screen and (min-width: 1023.9px) {
  .cpd_cmt_avatar { width: 38px; height: 38px; font-size: 17px; }
  .cpd_cmt_bubble { padding: 12px 14px; border-radius: 16px; }
  .cpd_cmt_name { font-size: 14px; }
  .cpd_cmt_text { font-size: 14px; line-height: 1.6; }
  .cpd_cmt_actions { font-size: 12px; padding: 6px 14px 0; }
  .cpd_reply_avatar { width: 30px; height: 30px; }
  .cpd_cmt_text--sm { font-size: 13px; }
}

/* ====== ⌨️ 댓글 입력바 (하단 고정) ====== */
.cpd_input_wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 0.5px solid #f0f0f0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
}
.cpd_input_inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 13px;
}
.cpd_reply_to {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eafaef;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #005f4c;
}
.cpd_reply_to strong {
  font-weight: 700;
}
.cpd_reply_to button {
  background: none;
  border: none;
  cursor: pointer;
  color: #005f4c;
  padding: 2px;
  font-family: inherit;
}

.cpd_input_row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cpd_input_row input {
  flex: 1;
  background: #f5f5f5;
  border: none;
  border-radius: 100px;
  padding: 11px 16px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  color: #1a1a1a;
}
.cpd_input_row input:focus {
  background: #eafaef;
}

.cpd_send_btn {
  background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 95, 76, 0.25);
  flex-shrink: 0;
  font-family: inherit;
  transition: all 0.15s ease;
}
.cpd_send_btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 95, 76, 0.35);
}
.cpd_send_btn:active {
  transform: scale(0.95);
}

@media screen and (min-width: 1023.9px) {
  .cpd_input_inner { padding: 16px; max-width: 760px; }
  .cpd_input_row input {
    padding: 13px 20px;
    font-size: 14px;
  }
  .cpd_send_btn { width: 44px; height: 44px; }
}

/* ====== 🎨 아이콘 (SVG 인라인) ====== */
.cpd_icon {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
.cpd_icon_eye {
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238f8f8f' stroke-width='1.5' viewBox='0 0 16 16'%3E%3Cpath d='M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E");
}
.cpd_icon_heart {
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23646464' stroke-width='1.7' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s-5-3-5-7.5C3 4 4.5 3 6 3c1 0 1.7.5 2 1.2C8.3 3.5 9 3 10 3c1.5 0 3 1 3 3.5C13 11 8 14 8 14z'/%3E%3C/svg%3E");
}
.cpd_icon_heart_sm {
  width: 13px; height: 13px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' stroke='%238f8f8f' stroke-width='1.7' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s-5-3-5-7.5C3 4 4.5 3 6 3c1 0 1.7.5 2 1.2C8.3 3.5 9 3 10 3c1.5 0 3 1 3 3.5C13 11 8 14 8 14z'/%3E%3C/svg%3E");
}
.cpd_icon_chat {
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23646464' stroke-width='1.7' viewBox='0 0 16 16'%3E%3Cpath d='M14 11a2 2 0 0 1-2 2H5l-3 3V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v7z'/%3E%3C/svg%3E");
}
.cpd_icon_chat_lg {
  width: 40px; height: 40px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='%23d0d0d0' stroke-width='1.5' viewBox='0 0 16 16'%3E%3Cpath d='M14 11a2 2 0 0 1-2 2H5l-3 3V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v7z'/%3E%3C/svg%3E");
}
.cpd_icon_share {
  width: 17px; height: 17px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none' stroke='%23646464' stroke-width='1.7' viewBox='0 0 16 16'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='4' cy='8' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cline x1='5.7' y1='7.2' x2='10.3' y2='4.8'/%3E%3Cline x1='5.7' y1='8.8' x2='10.3' y2='11.2'/%3E%3C/svg%3E");
}
.cpd_icon_dots {
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23646464' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='3' r='1.4'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3Ccircle cx='8' cy='13' r='1.4'/%3E%3C/svg%3E");
}
.cpd_icon_dots_sm {
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23aaa' viewBox='0 0 16 16'%3E%3Ccircle cx='3' cy='8' r='1.3'/%3E%3Ccircle cx='8' cy='8' r='1.3'/%3E%3Ccircle cx='13' cy='8' r='1.3'/%3E%3C/svg%3E");
}
.cpd_icon_pin_lg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23005f4c' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a6 6 0 0 0-6 6c0 4.5 6 10 6 10s6-5.5 6-10a6 6 0 0 0-6-6zm0 8.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.cpd_icon_ext {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 4px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23005f4c' stroke-width='1.5' viewBox='0 0 16 16'%3E%3Cpath d='M10 2h4v4M14 2L8 8M12 9v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4'/%3E%3C/svg%3E");
}
.cpd_icon_send {
  width: 17px; height: 17px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M2 14V2l13 6-13 6zm1.5-1.8 7.5-3.4L3.5 5.4v2.1L8 8 3.5 8.5v3.7z'/%3E%3C/svg%3E");
}
.cpd_icon_x_sm {
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23005f4c' stroke-width='1.8' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");
}

/* ============================================================
   ⭐ com_popup 시트 (수정/삭제 더보기)
   ============================================================ */
.pop_cpd_more .pop_container {
  max-width: 360px;
}
.cpd_sheet_list {
  display: flex;
  flex-direction: column;
}
.cpd_sheet_item {
  width: 100%;
  background: none;
  border: none;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-radius: 10px;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s ease;
}
.cpd_sheet_item:hover {
  background: #f8fdfa;
}
.cpd_sheet_item span {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}
.cpd_sheet_item--danger span {
  color: #e74c5e;
}
.cpd_sheet_icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.cpd_sheet_icon--edit {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23005f4c' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath d='M14 3l3 3-9 9H5v-3l9-9z'/%3E%3C/svg%3E");
}
.cpd_sheet_icon--trash {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23e74c5e' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath d='M3 5h14M8 5V3h4v2M5 5l1 12h8l1-12'/%3E%3C/svg%3E");
}
.cpd_sheet_icon--share {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23646464' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Ccircle cx='15' cy='5' r='2.5'/%3E%3Ccircle cx='5' cy='10' r='2.5'/%3E%3Ccircle cx='15' cy='15' r='2.5'/%3E%3Cline x1='7.1' y1='9' x2='12.9' y2='6'/%3E%3Cline x1='7.1' y1='11' x2='12.9' y2='14'/%3E%3C/svg%3E");
}
.cpd_sheet_icon--flag {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23e74c5e' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath d='M5 18V3M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
}
@media screen and (min-width: 1023.9px) {
  .cpd_sheet_item { padding: 16px 18px; }
  .cpd_sheet_item span { font-size: 15px; }
}

/* ============================================================
   ⭐ com_popup 댓글 수정 팝업
   ============================================================ */
.pop_cpd_edit .pop_container {
  max-width: 440px;
}
.pop_cpd_edit .pop_tit {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 14px;
}
.pop_cpd_edit textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border: 1.5px solid #efefef;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: none;
  outline: none;
  color: #1a1a1a;
}
.pop_cpd_edit textarea:focus {
  border-color: #005f4c;
}

/* 삭제 확인 팝업 보조 텍스트 */
.cpd_del_sub {
  text-align: center;
  font-size: 12px;
  color: #8f8f8f;
  margin: 6px 0 0;
}

/* ============================================
   🗳️ 투표 UI - <style> 안에 추가
   ============================================ */

.cpd_poll {
    background: linear-gradient(135deg, #fff8e6 0%, #fff3d4 100%);
    border: 1px solid rgba(255, 200, 100, 0.3);
    border-radius: 16px;
    padding: 18px 16px;
    margin-bottom: 16px;
}

.cpd_poll_head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.cpd_poll_emoji {
    font-size: 24px;
    line-height: 1;
}
.cpd_poll_title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
    flex: 1;
    word-break: break-word;
}

.cpd_poll_sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.cpd_poll_badge {
    background: rgba(255, 149, 0, 0.12);
    color: #c98800;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
}
.cpd_poll_badge--multi {
    background: rgba(0, 95, 76, 0.12);
    color: #005f4c;
}
.cpd_poll_voters {
    font-size: 12px;
    color: #6a5500;
    margin-left: auto;
}
.cpd_poll_voters strong {
    color: #005f4c;
    font-weight: 700;
}

.cpd_poll_options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.cpd_poll_opt {
    position: relative;
    background: #fff;
    border: 1.5px solid #ffe4b3;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s ease;
}
.cpd_poll_opt:hover {
    border-color: #ff9500;
    transform: translateY(-1px);
}
.cpd_poll_opt.is_selected {
    border-color: #005f4c;
    background: #f8fdfa;
}
.cpd_poll_opt.is_voted {
    border-color: #005f4c;
    background: #f8fdfa;
}
.cpd_poll_opt.is_top {
    border-color: #ff9500;
    background: linear-gradient(135deg, #fff8e6 0%, #ffefc4 100%);
}

/* 결과 바 (배경) */
.cpd_poll_opt_bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 168, 120, 0.12) 0%, rgba(0, 95, 76, 0.18) 100%);
    z-index: 0;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px 0 0 12px;
    width: 0;
}
.cpd_poll_options.is_voted .cpd_poll_opt_bar {
    /* 결과 모드일 때만 바 보임 */
}
.cpd_poll_opt.is_top .cpd_poll_opt_bar {
    background: linear-gradient(90deg, rgba(255, 149, 0, 0.18) 0%, rgba(255, 200, 100, 0.28) 100%);
}

/* 투표 전엔 바 숨김 */
.cpd_poll_options:not(.is_voted) .cpd_poll_opt_bar {
    width: 0 !important;
    opacity: 0;
}

.cpd_poll_opt_inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 8px;
}

.cpd_poll_opt_left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.cpd_poll_check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cpd_poll_box,
.cpd_poll_radio {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #c5c5c5;
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0;
}
.cpd_poll_box {
    border-radius: 4px;
}
.cpd_poll_radio {
    border-radius: 50%;
}

.cpd_poll_opt.is_selected .cpd_poll_box,
.cpd_poll_opt.is_voted .cpd_poll_box {
    background: #005f4c;
    border-color: #005f4c;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23ffffff' stroke-width='2.5' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.cpd_poll_opt.is_selected .cpd_poll_radio,
.cpd_poll_opt.is_voted .cpd_poll_radio {
    background: #005f4c;
    border-color: #005f4c;
    box-shadow: inset 0 0 0 3px #fff;
}

.cpd_poll_label {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
    word-break: break-word;
}
.cpd_poll_opt.is_top .cpd_poll_label {
    font-weight: 600;
}

.cpd_poll_voted_mark {
    font-style: normal;
    color: #005f4c;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.cpd_poll_opt_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}
.cpd_poll_percent {
    font-size: 14px;
    font-weight: 700;
    color: #005f4c;
    line-height: 1;
}
.cpd_poll_opt.is_top .cpd_poll_percent {
    color: #ff9500;
}
.cpd_poll_cnt {
    font-size: 10px;
    color: #8a8a8a;
}

/* 투표 전엔 % 숨김 */
.cpd_poll_options:not(.is_voted) .cpd_poll_opt_right {
    display: none;
}

.cpd_poll_actions {
    display: flex;
    gap: 8px;
}

.cpd_poll_btn {
    flex: 1;
    padding: 12px;
    border-radius: 100px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.cpd_poll_btn--vote {
    background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 95, 76, 0.22);
}
.cpd_poll_btn--vote:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 95, 76, 0.32);
}
.cpd_poll_btn--vote:disabled {
    background: #e0e0e0;
    color: #999;
    box-shadow: none;
    cursor: not-allowed;
}
.cpd_poll_btn--revote {
    background: #fff;
    color: #6a5500;
    border: 1.5px solid #ffd699;
}
.cpd_poll_btn--revote:hover {
    background: #fff8e6;
}
.cpd_poll_btn_icon {
    font-size: 16px;
    line-height: 1;
}

@media screen and (min-width: 1023.9px) {
    .cpd_poll { padding: 22px 20px; border-radius: 18px; }
    .cpd_poll_title { font-size: 19px; }
    .cpd_poll_label { font-size: 15px; }
    .cpd_poll_opt_inner { padding: 14px 16px; }
    .cpd_poll_percent { font-size: 15px; }
    .cpd_poll_btn { padding: 14px; font-size: 15px; }
}

/* 🕐 투표 마감 정보 */
.cpd_poll_remain {
    background: rgba(255, 149, 0, 0.15);
    color: #c98800;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
    flex-shrink: 0;
    animation: cpd_remain_pulse 2s ease-in-out infinite;
}
.cpd_poll_remain.is_ended {
    background: rgba(150, 150, 150, 0.15);
    color: #888;
    animation: none;
}

@keyframes cpd_remain_pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.cpd_poll_badge--time {
    background: rgba(0, 95, 76, 0.08) !important;
    color: #005f4c !important;
}

/* 종료된 투표 - 클릭 막기 */
.cpd_poll_options.is_ended .cpd_poll_opt {
    cursor: default;
    pointer-events: none;
}
.cpd_poll_options.is_ended .cpd_poll_opt:hover {
    border-color: #ffe4b3;
    transform: none;
}

.cpd_poll_ended_msg {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: rgba(150, 150, 150, 0.1);
    color: #888;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* ⏹️ 투표 종료 버튼 */
.cpd_poll_end_btn {
    margin-left: 6px;
    background: rgba(255, 107, 107, 0.1);
    color: #e74c5e;
    border: 1.5px solid rgba(231, 76, 94, 0.25);
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.cpd_poll_end_btn:hover {
    background: rgba(231, 76, 94, 0.15);
    border-color: #e74c5e;
    transform: translateY(-1px);
}
.cpd_poll_end_btn:active {
    transform: scale(0.95);
}
.cpd_poll_end_icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #e74c5e;
    border-radius: 2px;
}

/* 🔓 다시 열기 버튼 */
.cpd_poll_reopen_btn {
    margin-left: 6px;
    background: rgba(0, 95, 76, 0.1);
    color: #005f4c;
    border: 1.5px solid rgba(0, 95, 76, 0.25);
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.cpd_poll_reopen_btn:hover {
    background: rgba(0, 95, 76, 0.18);
    border-color: #005f4c;
}

/* 종료 확인 팝업 */
.PopConfirmPollEnd .pop_container {
    text-align: center;
}
.cpd_poll_end_emoji {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 14px;
    animation: cpd_poll_end_pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cpd_poll_end_pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* * crew_list.php 전용 스타일 */
.p_crew_list {
  background: transparent;
  min-height: 100vh;
  padding-bottom: 100px;
}
/* PC에서는 패딩 더 줄임 (푸터 바로 위로 붙게) */
@media (min-width: 1025px) {
  .p_crew_list {
    padding-bottom: 0;
  }
}
.crew_search {
  padding: 14px 0 4px;
  background: transparent;
}

.crew_search__box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 16px;
  background: #ffffff;
  border-radius: 100px;
  border: 1px solid #e8ebe5;
  height: 46px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.crew_search__ico {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}

.crew_search__input {
  flex: 1;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px;
  font-family: inherit;
  color: #1a1a1a;
  height: 100%;
  padding: 0;
  margin: 0;
  box-shadow: none !important;
}

.crew_search__input::placeholder { color: #b0b0b0; }

.crew_search__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #005f4c;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.crew_search__btn svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
}

/* ============ 상단 노란 배너 ============ */
.crew_banner {
  margin: 14px 0 4px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff8dc 0%, #ffeaa7 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.crew_banner__txt strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #5a4a00;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.crew_banner__txt em {
  font-size: 13px;
  color: #8a7000;
  font-style: normal;
  line-height: 1.5;
}

.crew_banner__deco {
  position: absolute;
  right: -6px;
  bottom: -12px;
  font-size: 70px;
  opacity: 0.5;
}

/* ============ 카테고리 (가로 스크롤) ============ */
.crew_cat {
  padding: 16px 0 8px;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

.crew_cat::-webkit-scrollbar { 
  display: none; 
  height: 0;
  width: 0;
}

.crew_cat__list {
  display: flex;
  gap: 14px;
  padding: 0 4px 4px;
  list-style: none;
  margin: 0;
  width: max-content;
}

.crew_cat__item { flex-shrink: 0; }

.crew_cat__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 56px;
  text-decoration: none;
}

.crew_cat__ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid transparent;
  transition: all 0.15s;
}

.crew_cat__item.active .crew_cat__ico { 
  border-color: #005f4c;
  transform: scale(1.05);
}

.crew_cat__name {
  font-size: 12px;
  color: #4a4a4a;
  white-space: nowrap;
}

.crew_cat__item.active .crew_cat__name {
  color: #005f4c;
  font-weight: 500;
}

/* ============ 카운트 + 정렬 ============ */
.crew_filter {
  padding: 14px 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crew_filter__count {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

.crew_filter__count strong {
  color: #005f4c;
  font-weight: 500;
}

.crew_sort {
  display: flex;
  gap: 4px;
  background: #f0f2ee;
  padding: 3px;
  border-radius: 100px;
}

.crew_sort__btn {
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 13px;
  color: #8a8a8a;
  text-decoration: none;
  transition: all 0.15s;
}

.crew_sort__btn.active {
  background: #ffffff;
  color: #1a1a1a;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ============ 랭킹 헤더 (인기순) ============ */
.crew_rank_head {
  margin: 0 0 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fff8dc 0%, #ffeaa7 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.crew_rank_head__emoji { font-size: 22px; }

.crew_rank_head__txt { flex: 1; }

.crew_rank_head__txt strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #5a4a00;
  margin-bottom: 2px;
}

.crew_rank_head__txt em {
  font-size: 12px;
  color: #8a7000;
  font-style: normal;
}

.crew_rank_head__info {
  font-size: 12px;
  color: #8a7000;
  text-decoration: none;
}

/* ============ 모임 카드 공통 ============ */
.crew_list { padding: 0; }

.crew_card {
  display: block;
  background: #ffffff;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  text-decoration: none;
  color: inherit;
  position: relative;
}

.crew_card:active {
  transform: scale(0.99);
  transition: transform 0.1s;
}

/* ============ 인기순 1등 카드 ============ */
.crew_card--first {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe0b3 100%);
  border: 1px solid #ffcc66;
  margin-top: 14px;
}

.crew_card--first__badge {
  position: absolute;
  top: -12px;
  left: 14px;
  background: #ff9500;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(255,149,0,0.3);
}

.crew_card--first .crew_card__top {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.crew_card--first .crew_card__thumb {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  flex-shrink: 0;
}

.crew_card--first .crew_card__name {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}

.crew_card--first .crew_card__leader {
  font-size: 12px;
  color: #8a7000;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.crew_card--first .crew_card__leader .crown { font-size: 13px; }

.crew_card--first .crew_card__meta {
  font-size: 12px;
  color: #8a7000;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crew_card--first .crew_card__meta .dot { color: #d4a017; }

.crew_card--first__score_box {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
}

.crew_card--first__score_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.crew_card--first__score_row .label {
  font-size: 12px;
  color: #5a4a00;
}

.crew_card--first__score_row .score {
  font-size: 20px;
  font-weight: 500;
  color: #ff9500;
}

.crew_card--first__score_row .score em {
  font-size: 13px;
  font-style: normal;
}

.crew_card--first__detail {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #8a7000;
}

/* ============ 인기순 2등 이하 (순위 + 박스형) ============ */
.crew_card--rank { display: block; }

.crew_card--rank .crew_card__top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.crew_card--rank .crew_card__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding-top: 2px;
}

.rank_num {
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}

.rank_num--1 { color: #ff9500; }
.rank_num--2 { color: #a8a8a8; }
.rank_num--3 { color: #cd9b67; }
.rank_num--4,
.rank_num--5,
.rank_num--6,
.rank_num--7,
.rank_num--8 { color: #c8c8c8; font-size: 24px; }

.crew_card__thumb--small {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}

.crew_card__info {
  flex: 1;
  min-width: 0;
}

.crew_card__name {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}

.crew_card--rank .crew_card__leader {
  font-size: 12px;
  color: #8a8a8a;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.crew_card--rank .crew_card__leader .crown { font-size: 13px; }

.crew_card--rank .crew_card__meta {
  font-size: 12px;
  color: #8a8a8a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crew_card--rank .crew_card__meta .dot { color: #d1d1d1; }

.crew_card--rank .crew_card__stats {
  display: none;
}

/* 인기순 점수 박스 (2분할) */
.crew_card__score_box {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fff8e6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.crew_card__score_box_left,
.crew_card__score_box_right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.crew_card__score_box_right {
  justify-content: flex-end;
  border-left: 1px solid #ffe4a3;
  padding-left: 12px;
}

.crew_card__score_box .label,
.crew_card__score_box .carbon-label {
  font-size: 12px;
  color: #8a7000;
}

.crew_card__score_box .score {
  font-size: 15px;
  font-weight: 500;
  color: #ff9500;
}

.crew_card__score_box .carbon-value {
  font-size: 15px;
  font-weight: 500;
  color: #005f4c;
}

/* ============ 최신순 카드 ============ */
.crew_card--latest {
  padding: 14px;
}

.crew_card--latest .crew_card__top {
  display: flex;
  gap: 12px;
}

.crew_card__thumb--latest {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  flex-shrink: 0;
}

.crew_card--latest .crew_card__info { flex: 1; min-width: 0; }

.crew_card__name_row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.crew_card--latest .crew_card__name {
  font-size: 16px;
  margin: 0;
}

.crew_card--latest .crew_card__leader {
  font-size: 12px;
  color: #8a8a8a;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.crew_card--latest .crew_card__leader .crown { font-size: 13px; }

.crew_card--latest .crew_card__meta {
  font-size: 12px;
  color: #8a8a8a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.crew_card--latest .crew_card__meta .dot { color: #d1d1d1; }

.crew_active {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #8a8a8a;
  font-size: 12px;
}

.crew_active.is_fresh {
  color: #005f4c;
  font-weight: 500;
}

/* 상태 뱃지 */
.crew_status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.crew_status--challenge { background: #ff6b6b; }
.crew_status--recruiting { background: #ff8c42; }
.crew_status--new { background: #4ecdc4; }

/* 탄소저감 박스 (최신순) */
.crew_card__carbon_box {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f0fbf5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crew_card__carbon_box .label {
  font-size: 12px;
  color: #4a4a4a;
}

.crew_card__carbon_box .value {
  font-size: 15px;
  font-weight: 500;
  color: #005f4c;
}

/* ============ crew_list.php FAB ============ */
.p_crew_list .crew_fab {
  position: fixed !important;
  right: 16px !important;
  bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  top: auto !important;
  left: auto !important;
  z-index: 999999 !important;

  background: rgba(0, 95, 76, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  color: #ffffff;
  padding: 14px 22px 14px 18px;
  border-radius: 100px;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 24px rgba(0, 95, 76, 0.35),
    0 2px 4px rgba(0, 95, 76, 0.15);

  border: 1px solid rgba(255, 255, 255, 0.15);

  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  white-space: nowrap;

  visibility: visible !important;
  opacity: 1;
  transform: translateY(0);

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    box-shadow 0.2s ease;
}

.p_crew_list .crew_fab.is_hidden {
  transform: translateY(120px);
  opacity: 0;
  pointer-events: none;
}

.p_crew_list .crew_fab:active {
  transform: scale(0.97);
}

.p_crew_list .crew_fab__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  margin-top: 0;
}

.p_crew_list .crew_fab__txt {
  font-size: 14px;
  font-weight: 500;
}

@media (min-width: 1025px) {
  .p_crew_list .crew_fab {
    right: max(80px, calc((100vw - 1620px) / 2 + 80px)) !important;
    bottom: 40px !important;
    padding: 16px 26px 16px 22px;
    font-size: 16px;
  }

  .p_crew_list .crew_fab__ico {
    width: 26px;
    height: 26px;
    font-size: 22px;
  }

  .p_crew_list .crew_fab__txt {
    font-size: 16px;
  }

  .p_crew_list .crew_fab:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 14px 32px rgba(0, 95, 76, 0.45),
      0 4px 8px rgba(0, 95, 76, 0.2);
  }

  .p_crew_list .crew_fab.is_hidden:hover {
    transform: translateY(120px);
  }
}
@media (max-width: 374px) {
  .p_crew_list .crew_fab {
    padding: 10px 16px 10px 14px;
    font-size: 13px;
  }

  .p_crew_list .crew_fab__ico {
    font-size: 16px;
  }

  .p_crew_list .crew_fab__txt {
    font-size: 13px;
  }
}
/* ============ 무한스크롤 ============ */
.crew_scroll_loader {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #8a8a8a;
  font-size: 13px;
}

.crew_spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: #005f4c;
  border-radius: 50%;
  animation: crew_spin 0.8s linear infinite;
}

@keyframes crew_spin {
  to { transform: rotate(360deg); }
}

.crew_spinner_txt {
  font-size: 13px;
  color: #8a8a8a;
}

.crew_scroll_end {
  padding: 24px 0 32px;
  text-align: center;
  font-size: 13px;
  color: #b0b0b0;
}

.crew_scroll_end span {
  display: inline-block;
  padding: 8px 16px;
  background: #f0f2ee;
  border-radius: 100px;
}


/* ============================================
 * 📱 반응형 (Responsive)
 * ============================================ */

/* ============ 작은 폰 (≤374px) ============ */
@media (max-width: 374px) {
  .crew_cat__ico { 
    width: 48px; 
    height: 48px; 
    font-size: 22px; 
  }
  
  .crew_cat__item a { min-width: 52px; }
  .crew_cat__list { gap: 12px; padding: 0 4px 4px; }
  .crew_cat__name { font-size: 12px; }
  
  .crew_card { padding: 12px; }
  
  .crew_card--first .crew_card__thumb,
  .crew_card__thumb--latest {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }
  
  .crew_card__thumb--small {
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
  
  .rank_num { font-size: 22px; }
  .rank_num--4,
  .rank_num--5,
  .rank_num--6,
  .rank_num--7,
  .rank_num--8 { font-size: 20px; }
  
  .crew_card--first__score_row .score { font-size: 18px; }
  .crew_card--first .crew_card__name { font-size: 15px; }
  .crew_card--latest .crew_card__name { font-size: 15px; }
  .crew_card__name { font-size: 14px; }
  
  .crew_card__score_box {
    padding: 10px 12px;
    gap: 10px;
  }
  
  .crew_card__score_box_right { padding-left: 10px; }
  
  .crew_card__score_box .score,
  .crew_card__score_box .carbon-value {
    font-size: 14px;
  }
  
  .crew_card__carbon_box .value { font-size: 14px; }
  
  .crew_banner { padding: 14px 16px; }
  .crew_banner__txt strong { font-size: 14px; }
  .crew_banner__deco { font-size: 56px; }
}

/* ============ 태블릿 (601~1024px) ============ */
@media (min-width: 601px) and (max-width: 1024px) {
  .crew_cat {
    -webkit-mask-image: none;
    mask-image: none;
  }
  
  /* 카테고리 가운데 정렬 + 간격 키움 */
  .crew_cat__list {
    width: auto;
    justify-content: center;
    gap: 24px;
  }
  
  .crew_cat__item a {
    gap: 8px;
    min-width: 70px;
  }
  
  /* 아이콘 키움 */
  .crew_cat__ico {
    width: 64px;
    height: 64px;
    font-size: 30px;
  }
  
  .crew_cat__name {
    font-size: 13px;
  }

  /* 카드 살짝 더 여유롭게 */
  .crew_card {
    padding: 18px;
    margin-bottom: 14px;
    border-radius: 20px;
  }
  
  /* 폰트 살짝 키움 */
  .crew_card--first .crew_card__name,
  .crew_card--latest .crew_card__name { 
    font-size: 18px; 
  }
  
  .crew_card__name { 
    font-size: 17px; 
  }
  
  /* 호버 효과 */
  .crew_card {
    transition: all 0.2s;
  }
  
  .crew_card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
}

/* ============================================
 * ============ PC (1025px 이상) ============
 * - 제목 24px / 서브타이틀 18px / 본문 16px
 * - 아이콘/썸네일 비례 확대
 * - 패딩/간격 여유롭게
 * ============================================ */
@media (min-width: 1025px) {

  /* ===== 검색창 ===== */
  .crew_search {
    padding: 24px 0 8px;
  }
  
  .crew_search__box {
    height: 56px;
    padding: 0 8px 0 20px;
    gap: 12px;
    border-radius: 100px;
  }
  
  .crew_search__ico {
    width: 20px;
    height: 20px;
  }
  
  .crew_search__input {
    font-size: 16px;
  }
  
  .crew_search__btn {
    width: 44px;
    height: 44px;
  }
  
  .crew_search__btn svg {
    width: 20px;
    height: 20px;
  }

  /* ===== 배너 (서브 타이틀 18px) ===== */
  .crew_banner {
    margin: 24px 0 8px;
    padding: 24px 32px;
    border-radius: 24px;
  }
  
  .crew_banner__txt strong {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .crew_banner__txt em {
    font-size: 16px;
    line-height: 1.6;
  }
  
  .crew_banner__deco {
    font-size: 100px;
    right: 20px;
    bottom: -10px;
  }

  /* ===== 카테고리 ===== */
.crew_cat {
  -webkit-mask-image: none;
  mask-image: none;
  padding: 32px 0 20px;
}

.crew_cat__list {
  width: 100%;
  justify-content: space-between;
  gap: 0;
  padding: 0;
}

.crew_cat__item {
  flex: 1;
}

.crew_cat__item a {
  gap: 12px;
  min-width: auto;
  width: 100%;
}

/* 아이콘 더 크게 */
.crew_cat__ico {
  width: 88px;
  height: 88px;
  font-size: 42px;
  border-width: 3px;
}

/* 카테고리 이름 키움 */
.crew_cat__name {
  font-size: 17px;
  font-weight: 500;
}

  /* ===== 카운트 + 정렬 (서브 타이틀 18px) ===== */
  .crew_filter {
    padding: 20px 0 16px;
  }
  
  .crew_filter__count {
    font-size: 18px;
  }
  
  .crew_sort {
    padding: 4px;
    gap: 4px;
  }
  
  .crew_sort__btn {
    padding: 8px 22px;
    font-size: 15px;
  }

  /* ===== 랭킹 헤더 ===== */
  .crew_rank_head {
    margin: 0 0 20px;
    padding: 18px 24px;
    border-radius: 18px;
    gap: 16px;
  }
  
  .crew_rank_head__emoji { font-size: 30px; }
  
  .crew_rank_head__txt strong {
    font-size: 16px;
    margin-bottom: 4px;
  }
  
  .crew_rank_head__txt em {
    font-size: 14px;
  }
  
  .crew_rank_head__info {
    font-size: 14px;
  }

  /* ===== 카드 공통 ===== */
  .crew_card {
    padding: 24px;
    margin-bottom: 16px;
    border-radius: 22px;
  }

  /* ===== 인기순 1등 카드 ===== */
  .crew_card--first {
    margin-top: 20px;
  }
  
  .crew_card--first__badge {
    top: -14px;
    left: 24px;
    padding: 6px 16px;
    font-size: 14px;
  }
  
  .crew_card--first .crew_card__top {
    gap: 20px;
    margin-top: 6px;
  }
  
  .crew_card--first .crew_card__thumb {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    font-size: 46px;
  }
  
  /* 1등 제목 24px */
  .crew_card--first .crew_card__name {
    font-size: 24px;
    margin: 0 0 8px;
  }
  
  /* 본문 16px */
  .crew_card--first .crew_card__leader {
    font-size: 16px;
    margin: 0 0 8px;
    gap: 6px;
  }
  
  .crew_card--first .crew_card__leader .crown { font-size: 18px; }
  
  .crew_card--first .crew_card__meta {
    font-size: 16px;
    gap: 8px;
  }
  
  .crew_card--first__score_box {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 16px;
  }
  
  .crew_card--first__score_row {
    margin-bottom: 10px;
  }
  
  .crew_card--first__score_row .label {
    font-size: 16px;
  }
  
  .crew_card--first__score_row .score {
    font-size: 28px;
  }
  
  .crew_card--first__score_row .score em {
    font-size: 16px;
  }
  
  .crew_card--first__detail {
    font-size: 14px;
  }

  /* ===== 인기순 2~5등 ===== */
  .crew_card--rank .crew_card__top {
    gap: 18px;
  }
  
  .crew_card--rank .crew_card__rank {
    min-width: 44px;
  }
  
  .rank_num {
    font-size: 36px;
  }
  
  .rank_num--4,
  .rank_num--5,
  .rank_num--6,
  .rank_num--7,
  .rank_num--8 { font-size: 32px; }
  
  .crew_card__thumb--small {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    font-size: 40px;
  }
  
  /* 제목 24px */
  .crew_card__name {
    font-size: 24px;
    margin: 0 0 8px;
  }
  
  /* 본문 16px */
  .crew_card--rank .crew_card__leader {
    font-size: 16px;
    margin: 0 0 6px;
    gap: 6px;
  }
  
  .crew_card--rank .crew_card__leader .crown { font-size: 17px; }
  
  .crew_card--rank .crew_card__meta {
    font-size: 16px;
    gap: 8px;
  }

  /* 인기순 점수 박스 */
  .crew_card__score_box {
    margin-top: 18px;
    padding: 18px 22px;
    border-radius: 16px;
    gap: 16px;
  }
  
  .crew_card__score_box_right {
    padding-left: 16px;
  }
  
  .crew_card__score_box .label,
  .crew_card__score_box .carbon-label {
    font-size: 16px;
  }
  
  .crew_card__score_box .score,
  .crew_card__score_box .carbon-value {
    font-size: 20px;
  }

  /* ===== 최신순 카드 ===== */
  .crew_card--latest {
    padding: 24px;
  }
  
  .crew_card--latest .crew_card__top {
    gap: 20px;
  }
  
  .crew_card__thumb--latest {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    font-size: 46px;
  }
  
  .crew_card__name_row {
    gap: 10px;
    margin-bottom: 8px;
  }
  
  /* 제목 24px */
  .crew_card--latest .crew_card__name {
    font-size: 24px;
  }
  
  /* 본문 16px */
  .crew_card--latest .crew_card__leader {
    font-size: 16px;
    margin: 0 0 8px;
    gap: 6px;
  }
  
  .crew_card--latest .crew_card__leader .crown { font-size: 18px; }
  
  .crew_card--latest .crew_card__meta {
    font-size: 16px;
    gap: 10px;
  }
  
  .crew_active {
    font-size: 16px;
    gap: 4px;
  }
  
  /* 상태 뱃지 */
  .crew_status {
    padding: 4px 12px;
    font-size: 14px;
  }
  
  /* 탄소저감 박스 */
  .crew_card__carbon_box {
    margin-top: 18px;
    padding: 18px 22px;
    border-radius: 16px;
  }
  
  .crew_card__carbon_box .label {
    font-size: 16px;
  }
  
  .crew_card__carbon_box .value {
    font-size: 20px;
  }

  /* ===== 무한스크롤 ===== */
  .crew_scroll_loader {
    padding: 32px 0;
    font-size: 15px;
  }
  
  .crew_spinner {
    width: 24px;
    height: 24px;
    border-width: 3px;
  }
  
  .crew_spinner_txt {
    font-size: 15px;
  }
  
  .crew_scroll_end {
    padding: 32px 0 40px;
    font-size: 15px;
  }
  
  .crew_scroll_end span {
    padding: 12px 24px;
    font-size: 15px;
  }

  /* ===== 호버 효과 ===== */
  .crew_card {
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .crew_card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }
  
  .crew_cat__item a {
    cursor: pointer;
  }
  
  .crew_cat__item a:hover .crew_cat__ico {
    transform: scale(1.08);
    transition: transform 0.15s;
  }
  
  .crew_search__box {
    transition: border-color 0.15s;
  }
  
  .crew_search__box:hover {
    border-color: #c8d0c2;
  }
  
  .crew_sort__btn {
    cursor: pointer;
  }
  
  .crew_sort__btn:hover:not(.active) {
    color: #1a1a1a;
  }
}

 /* * crew_detail.php 전용 스타일 */
body {
  background: #ffffff !important;
}

.p_crew_detail {
  background: #ffffff;
  padding-bottom: 40px;
}

.crew_detail__head {
  background: linear-gradient(135deg, #fffaf0 0%, #fff3dc 60%, #ffe8c0 100%);
  border-radius: 20px;
  padding: 22px 20px;
  margin: 16px 0 14px;
  position: relative;
  overflow: hidden;
}

.crew_detail__deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(25px);
  pointer-events: none;
}

.crew_detail__deco--1 {
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.55);
}

.crew_detail__deco--2 {
  bottom: -25px;
  left: 35%;
  width: 90px;
  height: 90px;
  background: rgba(255, 200, 100, 0.35);
}

.crew_detail__badges {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.crew_detail__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.crew_detail__badge--rank {
  background: rgba(255, 149, 0, 0.95);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.25);
}

.crew_detail__badge--cat {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #6a5500;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.crew_detail__head_inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.crew_detail__thumb {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 20px rgba(255, 149, 0, 0.12);
}

.crew_detail__head_txt {
  flex: 1;
  min-width: 0;
}

.crew_detail__name {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.crew_detail__leader {
  font-size: 14px;
  color: #6a5500;
  margin: 0;
  font-weight: 500;
}

.crew_detail__meta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #6a5500;
  align-items: center;
}

.crew_detail__meta_sep {
  color: rgba(106, 85, 0, 0.4);
}

.crew_detail__meta_active {
  color: #005f4c;
  font-weight: 500;
}

/* 활동 점수 박스 */
.crew_detail__score {
  background: linear-gradient(135deg, #f4fcf7 0%, #e8f7ee 60%, #d8f0e0 100%);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 95, 76, 0.08);
}

.crew_detail__score_deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
}

.crew_detail__score_deco--1 {
  top: -40px;
  right: -20px;
  width: 130px;
  height: 130px;
  background: rgba(0, 168, 120, 0.12);
}

.crew_detail__score_deco--2 {
  bottom: -30px;
  left: -20px;
  width: 90px;
  height: 90px;
  background: rgba(0, 95, 76, 0.1);
}

.crew_detail__score_top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.crew_detail__score_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.crew_detail__score_label,
.crew_detail__score_value {
  margin: 0;
}

.crew_detail__score_label {
  font-size: 13px;
  color: #4a6a5e;
  font-weight: 500;
  margin: 0 0 5px;
}

.crew_detail__score_value {
  font-size: 30px;
  font-weight: 700;
  background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.5px;
}

.crew_detail__score_value em {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  margin-left: 3px;
  -webkit-text-fill-color: #005f4c;
  background: none;
}

.crew_detail__score_rank_badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 149, 0, 0.3);
  color: #ff9500;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.crew_detail__score_stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.85);
}

.crew_detail__stat {
  text-align: center;
  padding: 0 4px;
}

.crew_detail__stat + .crew_detail__stat {
  border-left: 1px solid rgba(0, 95, 76, 0.1);
}

.crew_detail__stat_icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
}

.crew_detail__stat_label {
  font-size: 12px;
  color: #6a8a7e;
  margin-bottom: 3px;
}

.crew_detail__stat_value {
  font-size: 16px;
  font-weight: 600;
  color: #005f4c;
}

.crew_detail__stat_value em {
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  margin-left: 1px;
}

/* 액션 버튼 */
.crew_detail__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.crew_act_btn {
  border: none;
  padding: 13px 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.2px;
  white-space: nowrap;
  transition: all 0.15s;
}

.crew_act_btn span {
  font-size: 15px;
  line-height: 1;
}

.crew_act_btn--primary {
  flex: 1;
  background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 95, 76, 0.22);
}

.crew_act_btn--primary:active {
  transform: scale(0.97);
}

.crew_act_btn--joined {
  flex: 1;
  background: #e8ebe5;
  color: #4a4a4a;
}

.crew_act_btn--outline {
  background: #ffffff;
  color: #005f4c;
  border: 1.5px solid #005f4c;
}

.crew_act_btn--kakao {
  background: linear-gradient(135deg, #fee500 0%, #fdc500 100%);
  color: #3c1e1e;
  box-shadow: 0 6px 16px rgba(254, 229, 0, 0.25);
  padding: 13px 16px;
}

.crew_act_btn--kakao span {
  font-size: 16px;
}

/* 탭 */
.crew_detail__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 16px;
}

.crew_detail__tabs::-webkit-scrollbar {
  display: none;
  height: 0;
}

.crew_tab__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: #f5f7f3;
  color: #6a6a6a;
  transition: all 0.15s;
  white-space: nowrap;
}

.crew_tab__btn span {
  font-size: 14px;
  line-height: 1;
}

.crew_tab__btn.active {
  background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 95, 76, 0.22);
}

/* 섹션 */
.crew_detail__content { margin-top: 4px; }

.crew_sec {
  background: #fafbf8;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #f0f0f0;
}

.crew_sec__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.crew_sec__tit {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.2px;
}

.crew_sec__tit strong { color: #005f4c; font-weight: 600; }

.crew_sec__more {
  font-size: 13px;
  color: #005f4c;
  text-decoration: none;
  font-weight: 500;
}

.crew_sec__intro {
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.6;
}

/* 게시판 */
.crew_post_list { list-style: none; margin: 0; padding: 0; }

.crew_post_item {
  padding: 10px 0;
  font-size: 14px;
  color: #4a4a4a;
  border-bottom: 0.5px dashed #e8e8e8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crew_post_item:last-child { border-bottom: 0; padding-bottom: 0; }
.crew_post_item:first-child { padding-top: 0; }

.crew_post__notice {
  display: inline-block;
  background: #ffe4e1;
  color: #ff6b6b;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

.crew_post__title { font-size: 14px; color: #4a4a4a; }

.crew_post_list--full .crew_post_item--full {
  display: block;
  padding: 14px 0;
}

.crew_post__row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.crew_post__row .crew_post__title {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}

.crew_post__info {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: #8a8a8a;
  flex-wrap: wrap;
}

/* 일정 */
.crew_schedule_list { display: flex; flex-direction: column; gap: 10px; }

.crew_schedule_card {
  background: linear-gradient(135deg, #f0fbf5 0%, #e0f5e8 100%);
  border-left: 3px solid #005f4c;
  padding: 12px 14px;
  border-radius: 4px 12px 12px 4px;
}

.crew_schedule__date { font-size: 13px; color: #005f4c; font-weight: 500; margin-bottom: 4px; }
.crew_schedule__title { font-size: 15px; color: #1a1a1a; font-weight: 500; margin-bottom: 4px; }
.crew_schedule__location { font-size: 12px; color: #6a6a6a; }

.crew_schedule__btn {
  margin-top: 10px;
  background: #005f4c;
  color: #ffffff;
  border: none;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

/* 챌린지 */
.crew_challenge_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.crew_challenge_card {
  background: linear-gradient(135deg, #fff8e6 0%, #fff0c4 100%);
  padding: 14px 10px;
  border-radius: 14px;
  text-align: center;
  border: 1px solid rgba(255, 200, 100, 0.3);
}

.crew_challenge__emoji { font-size: 28px; margin-bottom: 4px; }
.crew_challenge__title { font-size: 13px; color: #8a7000; margin-bottom: 4px; }
.crew_challenge__participants { font-size: 14px; font-weight: 600; color: #ff9500; }

.crew_challenge_card--full { padding: 18px 12px; }

.crew_challenge__status {
  display: inline-block;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ff9500;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
}

/* 멤버 */
.crew_member_avatars { display: flex; gap: 6px; flex-wrap: wrap; }

.crew_avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  position: relative;
  color: #4a4a4a;
  font-weight: 600;
}

.crew_avatar__crown {
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: 14px;
    line-height: 1;
    background: #ffffff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.crew_avatar--lg .crew_avatar__crown {
    top: -4px;
    right: -2px;
    font-size: 16px;
}

.crew_avatar--more { background: #e8e8e8 !important; color: #888888; font-size: 12px; font-weight: 500; }
.crew_avatar--lg { width: 44px; height: 44px; font-size: 20px; }

.crew_member_list { display: flex; flex-direction: column; gap: 4px; }

.crew_member_row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 0.5px dashed #e8e8e8;
}

.crew_member_row:last-child { border-bottom: 0; }

.crew_member__info { flex: 1; }
.crew_member__name { font-size: 15px; font-weight: 500; color: #1a1a1a; margin: 0; }
.crew_member__role { font-size: 12px; color: #ff9500; margin: 2px 0 0; font-weight: 500; }

/* ============================================
 * 🌱 가입 확인 팝업 (모바일: 하단시트, PC: 가운데 모달)
 * ============================================ */
.crew_join_pop .pop_container {
	background: #ffffff;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 -10px 40px rgba(0, 95, 76, 0.15);
	
	/* 모바일 기본: 하단 시트 */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	border-radius: 24px 24px 0 0;
	transform: translateY(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.crew_join_pop.active .pop_container {
	transform: translateY(0);
}

.crew_join_pop .content_container {
	padding: 24px 24px 18px;
	text-align: center;
	background: linear-gradient(180deg, #f8fdfa 0%, #ffffff 100%);
	position: relative;
}

/* 상단 핸들바 (시트 느낌) */
.crew_join_pop .content_container::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background: #d0d6d2;
	border-radius: 100px;
}

.crew_join__emoji {
	font-size: 56px;
	line-height: 1;
	margin: 14px 0 12px;
	filter: drop-shadow(0 6px 16px rgba(0, 168, 120, 0.25));
	animation: crew_join_grow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes crew_join_grow {
	0% { transform: scale(0) rotate(-20deg); opacity: 0; }
	60% { transform: scale(1.2) rotate(10deg); }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

.crew_join__title {
	font-size: 21px;
	font-weight: 700;
	background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: -0.4px;
	margin-bottom: 4px;
}

.crew_join__subtitle {
	font-size: 13px;
	color: #6a8a7e;
	margin-bottom: 18px;
	letter-spacing: -0.2px;
}

.crew_join__crew_info {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 10px;
	background: #ffffff;
	border-radius: 100px;
	margin-bottom: 18px;
	border: 1.5px solid #d8f0e0;
	box-shadow: 0 4px 12px rgba(0, 95, 76, 0.06);
}

.crew_join__thumb {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.crew_join__crew_meta { text-align: left; }

.crew_join__crew_name {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0 0 2px;
	letter-spacing: -0.2px;
}

.crew_join__crew_detail {
	font-size: 11.5px;
	color: #8a8a8a;
	margin: 0;
}

.crew_join__benefit_box {
	background: linear-gradient(135deg, #eafaef 0%, #d4f4e2 100%);
	border-radius: 16px;
	padding: 12px 14px;
	text-align: left;
	border: 1px solid rgba(0, 95, 76, 0.08);
}

.crew_join__benefit_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
}

.crew_join__benefit_icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
	width: 24px;
	text-align: center;
}

.crew_join__benefit_txt {
	font-size: 13px;
	color: #2d5a4a;
	font-weight: 500;
	letter-spacing: -0.2px;
}

.crew_join__btns {
	display: flex;
	gap: 8px;
	padding: 16px 20px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom));
	background: #ffffff;
}

.crew_join__btn {
	flex: 1;
	padding: 14px 16px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: -0.2px;
	transition: all 0.15s;
}

.crew_join__btn--cancel {
	background: #f0f2ee;
	color: #8a8a8a;
}

.crew_join__btn--cancel:active { background: #e5e7e3; }

.crew_join__btn--confirm {
	background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(0, 95, 76, 0.28);
}

.crew_join__btn--confirm:active { transform: scale(0.97); }


/* ============================================
 * 😢 탈퇴 확인 팝업 (모바일: 하단시트, PC: 가운데 모달)
 * ============================================ */
.crew_leave_pop .pop_container {
	background: #ffffff;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
	
	/* 모바일 기본: 하단 시트 */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	border-radius: 24px 24px 0 0;
	transform: translateY(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.crew_leave_pop.active .pop_container {
	transform: translateY(0);
}

.crew_leave_pop .content_container {
	padding: 24px 24px 18px;
	text-align: center;
	position: relative;
}

/* 상단 핸들바 */
.crew_leave_pop .content_container::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background: #d0d6d2;
	border-radius: 100px;
}

.crew_leave__emoji {
	font-size: 48px;
	line-height: 1;
	margin: 14px 0 12px;
	filter: drop-shadow(0 4px 12px rgba(255, 149, 0, 0.2));
	animation: crew_leave_shake 0.5s ease-out;
}

@keyframes crew_leave_shake {
	0% { transform: scale(0.7); opacity: 0; }
	30% { transform: scale(1.1) rotate(-5deg); }
	60% { transform: scale(1) rotate(3deg); }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

.crew_leave__title {
	font-size: 19px;
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: -0.4px;
	margin-bottom: 14px;
}

.crew_leave__crew_info {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	background: linear-gradient(135deg, #f8fdfa 0%, #eafaef 100%);
	border-radius: 100px;
	margin-bottom: 18px;
	border: 1px solid rgba(0, 95, 76, 0.08);
}

.crew_leave__thumb {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.crew_leave__crew_name {
	font-size: 14px;
	font-weight: 500;
	color: #005f4c;
	letter-spacing: -0.2px;
}

.crew_leave__warn_box {
	background: linear-gradient(135deg, #fff8e6 0%, #fff3d4 100%);
	border-radius: 16px;
	padding: 14px 12px;
	text-align: left;
	border: 1px solid rgba(255, 149, 0, 0.15);
}

.crew_leave__warn_item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 6px 0;
}

.crew_leave__warn_item + .crew_leave__warn_item {
	border-top: 1px dashed rgba(255, 149, 0, 0.2);
}

.crew_leave__warn_icon {
	font-size: 20px;
	line-height: 1.2;
	flex-shrink: 0;
}

.crew_leave__warn_txt { flex: 1; }

.crew_leave__warn_txt strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #6a4500;
	letter-spacing: -0.2px;
	margin-bottom: 2px;
}

.crew_leave__warn_txt em {
	display: block;
	font-size: 11.5px;
	font-style: normal;
	color: #8a6500;
	line-height: 1.5;
}

.crew_leave__btns {
	display: flex;
	gap: 8px;
	padding: 16px 20px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom));
	background: #ffffff;
}

.crew_leave__btn {
	flex: 1;
	padding: 14px 16px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: -0.2px;
	transition: all 0.15s;
}

.crew_leave__btn--stay {
	background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 95, 76, 0.22);
}

.crew_leave__btn--stay:active { transform: scale(0.97); }

.crew_leave__btn--leave {
	background: #f0f2ee;
	color: #8a8a8a;
}

.crew_leave__btn--leave:active { background: #e5e7e3; }


/* PC: 가운데 모달로 변경 */
@media (min-width: 1025px) {
	.crew_join_pop .pop_container,
	.crew_leave_pop .pop_container {
		position: fixed;
		top: 50%;
		left: 50%;
		bottom: auto;
		right: auto;
		max-width: 440px;
		width: calc(100% - 40px);
		border-radius: 24px;
		transform: translate(-50%, -50%) scale(0.85);
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	}
	
	.crew_join_pop.active .pop_container,
	.crew_leave_pop.active .pop_container {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	
	/* PC에서 핸들바 숨김 */
	.crew_join_pop .content_container::before,
	.crew_leave_pop .content_container::before {
		display: none;
	}
	
	.crew_join_pop .content_container,
	.crew_leave_pop .content_container {
		padding: 36px 32px 22px;
	}
	
	.crew_join__emoji { font-size: 64px; margin: 0 0 16px; }
	.crew_join__title { font-size: 24px; }
	.crew_join__subtitle { font-size: 14px; margin-bottom: 22px; }
	.crew_join__benefit_box { padding: 16px 18px; }
	.crew_join__benefit_txt { font-size: 14px; }
	.crew_join__btns { padding: 20px 28px 28px; gap: 10px; }
	.crew_join__btn { padding: 15px 20px; font-size: 15px; }
	.crew_join__btn--confirm:hover { 
		transform: translateY(-1px); 
		box-shadow: 0 10px 24px rgba(0, 95, 76, 0.35); 
	}
	
	.crew_leave__emoji { font-size: 56px; margin: 0 0 16px; }
	.crew_leave__title { font-size: 22px; margin-bottom: 18px; }
	.crew_leave__warn_box { padding: 18px 16px; border-radius: 18px; }
	.crew_leave__warn_item { padding: 8px 0; gap: 12px; }
	.crew_leave__warn_icon { font-size: 22px; }
	.crew_leave__warn_txt strong { font-size: 14px; }
	.crew_leave__warn_txt em { font-size: 12.5px; }
	.crew_leave__btns { padding: 20px 28px 28px; gap: 10px; }
	.crew_leave__btn { padding: 15px 20px; font-size: 15px; }
	.crew_leave__btn--stay:hover { 
		transform: translateY(-1px); 
		box-shadow: 0 8px 20px rgba(0, 95, 76, 0.3); 
	}
}

/* 작은 폰 */
@media (max-width: 374px) {
	.crew_join__emoji { font-size: 48px; }
	.crew_join__title { font-size: 19px; }
	.crew_leave__emoji { font-size: 42px; }
	.crew_leave__title { font-size: 17px; }
	.crew_leave__warn_box { padding: 12px 10px; }
	.crew_leave__warn_txt strong { font-size: 12.5px; }
	.crew_leave__warn_txt em { font-size: 11px; }
}


/* ============================================
 * 🎉 가입 환영 토스트
 * ============================================ */
.crew_join_toast {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	opacity: 0;
	background: linear-gradient(135deg, #ffffff 0%, #eafaef 100%);
	padding: 20px 28px;
	border-radius: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	box-shadow: 0 20px 50px rgba(0, 95, 76, 0.25);
	border: 1.5px solid #d4f4e2;
	z-index: 99998;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	min-width: 220px;
	text-align: center;
}

.crew_join_toast.show {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.crew_join_toast__emoji {
	font-size: 40px;
	line-height: 1;
	margin-bottom: 4px;
	animation: crew_toast_bounce 0.8s ease-in-out infinite;
}

@keyframes crew_toast_bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.crew_join_toast strong {
	font-size: 18px;
	font-weight: 700;
	background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: -0.3px;
}

.crew_join_toast em {
	font-size: 13px;
	color: #6a8a7e;
	font-style: normal;
	letter-spacing: -0.2px;
}

/* 🌑 폭죽 검정 오버레이 */
.crew_confetti_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.85) 100%);
	z-index: 99997;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.crew_confetti_overlay.show {
	opacity: 1;
}


/* ============================================
 * 카카오 공유 팝업
 * ============================================ */
.crew_share_pop .pop_container {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.crew_share_pop.active .pop_container { transform: translateY(0); }

.crew_share__handle {
  width: 40px;
  height: 4px;
  background: #d0d0d0;
  border-radius: 100px;
  margin: 0 auto 16px;
}

.crew_share__title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
  color: #1a1a1a;
}

.crew_share__preview {
  background: #fafbf8;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  align-items: center;
}

.crew_share__thumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.crew_share__info { flex: 1; }

.crew_share__name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 2px;
}

.crew_share__meta { font-size: 12px; color: #8a8a8a; margin: 0; }

.crew_share__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.crew_share__opt { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }

.crew_share__opt_icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.crew_share__opt_label { font-size: 13px; color: #4a4a4a; }

.crew_share__cancel {
  width: 100%;
  background: #f5f5f5;
  color: #6a6a6a;
  padding: 12px;
  border-radius: 100px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}


/* ============================================
 * 반응형
 * ============================================ */

@media (max-width: 374px) {
  .crew_detail__head { padding: 18px 16px; }
  .crew_detail__thumb { width: 56px; height: 56px; font-size: 28px; }
  .crew_detail__name { font-size: 16px; }
  .crew_detail__leader { font-size: 13px; }
  .crew_detail__meta { font-size: 12px; }
  .crew_detail__score { padding: 16px; }
  .crew_detail__score_value { font-size: 26px; }
  .crew_act_btn { padding: 11px 14px; font-size: 13px; }
  .crew_tab__btn { padding: 7px 12px; font-size: 12px; }
  .crew_sec { padding: 14px; }
  .crew_sec__tit { font-size: 15px; }
  .crew_sec__intro { font-size: 13px; }
  .crew_post__title { font-size: 13px; }
  
  .crew_join__emoji { font-size: 48px; }
  .crew_join__title { font-size: 19px; }
  .crew_leave__emoji { font-size: 42px; }
  .crew_leave__title { font-size: 17px; }
  .crew_leave__warn_box { padding: 12px 10px; }
  .crew_leave__warn_txt strong { font-size: 12.5px; }
  .crew_leave__warn_txt em { font-size: 11px; }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .crew_detail__head { padding: 24px 22px; }
  .crew_detail__thumb { width: 72px; height: 72px; font-size: 36px; }
  .crew_detail__name { font-size: 20px; }
  .crew_detail__leader { font-size: 15px; }
  .crew_detail__meta { font-size: 14px; }
  .crew_detail__score_value { font-size: 32px; }
  .crew_detail__stat_value { font-size: 17px; }
}

@media (min-width: 1025px) {
  .p_crew_detail { padding-bottom: 60px; }
  .crew_detail__head { padding: 32px 36px; margin: 24px 0 18px; border-radius: 24px; }
  .crew_detail__deco--1 { top: -50px; right: -50px; width: 200px; height: 200px; }
  .crew_detail__deco--2 { bottom: -40px; left: 40%; width: 140px; height: 140px; }
  .crew_detail__badges { margin-bottom: 18px; }
  .crew_detail__badge { padding: 6px 14px; font-size: 14px; }
  .crew_detail__head_inner { gap: 20px; margin-bottom: 16px; }
  .crew_detail__thumb { width: 96px; height: 96px; border-radius: 24px; font-size: 48px; }
  .crew_detail__name { font-size: 26px; }
  .crew_detail__leader { font-size: 17px; margin-top: 2px; }
  .crew_detail__meta { font-size: 16px; gap: 12px; }
  .crew_detail__score { padding: 26px 32px; margin-bottom: 18px; border-radius: 22px; }
  .crew_detail__score_deco--1 { width: 200px; height: 200px; }
  .crew_detail__score_top { margin-bottom: 20px; }
  .crew_detail__score_label { font-size: 16px; margin-bottom: 6px; }
  .crew_detail__score_value { font-size: 42px; }
  .crew_detail__score_value em { font-size: 18px; }
  .crew_detail__score_rank_badge { padding: 7px 16px; font-size: 14px; }
  .crew_detail__score_stats { padding: 16px 12px; border-radius: 16px; }
  .crew_detail__stat_icon { font-size: 28px; margin-bottom: 6px; }
  .crew_detail__stat_label { font-size: 14px; margin-bottom: 4px; }
  .crew_detail__stat_value { font-size: 22px; }
  .crew_detail__stat_value em { font-size: 13px; }
  .crew_detail__actions { gap: 10px; margin-bottom: 20px; }
  .crew_act_btn { padding: 16px 26px; font-size: 16px; gap: 6px; }
  .crew_act_btn span { font-size: 18px; }
  .crew_act_btn:hover { transform: translateY(-2px); }
  .crew_act_btn--primary:hover { box-shadow: 0 10px 22px rgba(0, 95, 76, 0.32); }
  .crew_act_btn--kakao:hover { box-shadow: 0 10px 22px rgba(254, 229, 0, 0.35); }
  .crew_detail__tabs { gap: 10px; margin-bottom: 20px; }
  .crew_tab__btn { padding: 11px 24px; font-size: 16px; cursor: pointer; }
  .crew_tab__btn span { font-size: 18px; }
  .crew_tab__btn:hover:not(.active) { background: #e8ebe5; color: #1a1a1a; }
  .crew_sec { padding: 24px 28px; margin-bottom: 16px; border-radius: 20px; }
  .crew_sec__head { margin-bottom: 16px; }
  .crew_sec__tit { font-size: 20px; }
  .crew_sec__more { font-size: 15px; cursor: pointer; }
  .crew_sec__intro { font-size: 16px; line-height: 1.7; }
  .crew_post_item { padding: 14px 0; font-size: 16px; }
  .crew_post__title { font-size: 16px; }
  .crew_post__row .crew_post__title { font-size: 17px; }
  .crew_post__info { font-size: 14px; }
  .crew_schedule_card { padding: 18px 22px; border-left-width: 4px; }
  .crew_schedule__date { font-size: 15px; }
  .crew_schedule__title { font-size: 17px; }
  .crew_schedule__location { font-size: 14px; }
  .crew_schedule__btn { padding: 9px 18px; font-size: 14px; }
  .crew_challenge_grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .crew_challenge_card { padding: 22px 14px; border-radius: 16px; }
  .crew_challenge__emoji { font-size: 38px; }
  .crew_challenge__title { font-size: 15px; }
  .crew_challenge__participants { font-size: 17px; }
  .crew_avatar { width: 46px; height: 46px; font-size: 22px; }
  .crew_avatar--lg { width: 58px; height: 58px; font-size: 28px; }
  .crew_member__name { font-size: 17px; }
  .crew_member__role { font-size: 14px; }

  /* PC 가입/탈퇴 팝업 */
  .crew_join_pop .pop_container,
  .crew_leave_pop .pop_container {
    max-width: 440px;
  }
  
  .crew_join_pop .content_container,
  .crew_leave_pop .content_container {
    padding: 36px 32px 22px;
  }
  
  .crew_join__emoji { font-size: 64px; margin-bottom: 16px; }
  .crew_join__title { font-size: 24px; }
  .crew_join__subtitle { font-size: 14px; margin-bottom: 22px; }
  .crew_join__benefit_box { padding: 16px 18px; }
  .crew_join__benefit_txt { font-size: 14px; }
  .crew_join__btns { padding: 20px 28px 28px; gap: 10px; }
  .crew_join__btn { padding: 15px 20px; font-size: 15px; }
  .crew_join__btn--confirm:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 95, 76, 0.35); }
  
  .crew_leave__emoji { font-size: 56px; margin-bottom: 16px; }
  .crew_leave__title { font-size: 22px; margin-bottom: 18px; }
  .crew_leave__warn_box { padding: 18px 16px; border-radius: 18px; }
  .crew_leave__warn_item { padding: 8px 0; gap: 12px; }
  .crew_leave__warn_icon { font-size: 22px; }
  .crew_leave__warn_txt strong { font-size: 14px; }
  .crew_leave__warn_txt em { font-size: 12.5px; }
  .crew_leave__btns { padding: 20px 28px 28px; gap: 10px; }
  .crew_leave__btn { padding: 15px 20px; font-size: 15px; }
  .crew_leave__btn--stay:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 95, 76, 0.3); }
  
  /* 공유 팝업 PC */
  .crew_share_pop .pop_container {
    max-width: 420px;
    bottom: 50%;
    transform: translateY(50%) scale(0.9);
    opacity: 0;
    border-radius: 22px;
    transition: all 0.25s ease;
  }
  .crew_share_pop.active .pop_container { transform: translateY(50%) scale(1); opacity: 1; }
  .crew_share__handle { display: none; }
  .crew_share__title { font-size: 18px; }
  .crew_share__name { font-size: 16px; }
  .crew_share__opt_icon { width: 70px; height: 70px; font-size: 32px; }
  .crew_share__opt_label { font-size: 14px; }
}

/* ============================================
 * crew_detail.php FAB
 * ============================================ */
.p_crew_detail .crew_fab_wrap {
  position: fixed;
  right: 20px;
  bottom: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}

.p_crew_detail .crew_fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #005f4c 0%, #00785f 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 95, 76, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.p_crew_detail .crew_fab:active {
  transform: scale(0.92);
}

.p_crew_detail .crew_fab_icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.25s ease;
}

.p_crew_detail .crew_fab_wrap.is_open .crew_fab {
  background: linear-gradient(135deg, #2d2d2d 0%, #4a4a4a 100%);
  transform: rotate(45deg);
}

.p_crew_detail .crew_fab_wrap.is_open .crew_fab_icon::before {
  content: '+';
  font-size: 30px;
  font-weight: 300;
}

.p_crew_detail .crew_fab_wrap.is_open .crew_fab_icon {
  font-size: 0;
}

.p_crew_detail .crew_fab_menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.9);
  transform-origin: bottom right;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.p_crew_detail .crew_fab_wrap.is_open .crew_fab_menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.p_crew_detail .crew_fab_item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  background: #ffffff;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s;
}

.p_crew_detail .crew_fab_item:active {
  transform: scale(0.96);
}

.p_crew_detail .crew_fab_item:hover {
  background: #f8fdfa;
}

.p_crew_detail .crew_fab_emoji {
  font-size: 18px;
  line-height: 1;
}

.p_crew_detail .crew_fab_label {
  letter-spacing: -0.2px;
}

.p_crew_detail .crew_fab_backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 49;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.p_crew_detail .crew_fab_backdrop.is_open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1025px) {
  .p_crew_detail .crew_fab_wrap {
    right: 40px;
    bottom: 40px;
  }

  .p_crew_detail .crew_fab {
    width: 64px;
    height: 64px;
  }

  .p_crew_detail .crew_fab_icon {
    font-size: 26px;
  }

  .p_crew_detail .crew_fab_item {
    padding: 12px 20px 12px 14px;
    font-size: 15px;
  }

  .p_crew_detail .crew_fab_emoji {
    font-size: 20px;
  }
}
.p_crew_detail .crew_fab_label { 
  letter-spacing: -0.2px; 
}

.p_crew_detail .crew_fab_backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 49;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.p_crew_detail .crew_fab_backdrop.is_open { 
  opacity: 1; 
  visibility: visible; 
}

@media (min-width: 1025px) {
  .p_crew_detail .crew_fab_wrap { 
    right: 40px; 
    bottom: 40px; 
  }

  .p_crew_detail .crew_fab { 
    width: 64px; 
    height: 64px; 
  }

  .p_crew_detail .crew_fab_icon { 
    font-size: 26px; 
  }

  .p_crew_detail .crew_fab_item { 
    padding: 12px 20px 12px 14px; 
    font-size: 15px; 
  }

  .p_crew_detail .crew_fab_emoji { 
    font-size: 20px; 
  }
}
/* ============================================
 * 🔒 권한 제한 - 블러 + 로그인/가입 팝업
 * ============================================ */
.crew_locked_wrap {
    position: relative;
    transition: filter 0.3s ease;
}

.crew_locked_wrap.is_locked {
    filter: blur(8px) saturate(0.6);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0.7;
    cursor: pointer;
}

/* 모바일 기본: 하단 시트 (가입/탈퇴 팝업과 동일 패턴) */
.crew_login_pop .pop_container {
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 -10px 40px rgba(0, 95, 76, 0.15);
    
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.crew_login_pop.active .pop_container {
    transform: translateY(0);
}

.crew_login_pop .content_container {
    padding: 24px 24px 18px;
    text-align: center;
    background: linear-gradient(180deg, #f8fdfa 0%, #ffffff 100%);
    position: relative;
}

/* 핸들바 */
.crew_login_pop .content_container::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #d0d6d2;
    border-radius: 100px;
}

.crew_login__emoji {
    font-size: 56px;
    line-height: 1;
    margin: 14px 0 12px;
    filter: drop-shadow(0 6px 16px rgba(0, 168, 120, 0.2));
    animation: crew_login_wave 1.5s ease-in-out infinite;
}

@keyframes crew_login_wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

.crew_login__title {
    font-size: 21px;
    font-weight: 700;
    background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.4px;
    margin-bottom: 8px;
}

.crew_login__subtitle {
    font-size: 13px;
    color: #6a8a7e;
    margin-bottom: 18px;
    letter-spacing: -0.2px;
    line-height: 1.5;
}

.crew_login__crew_info {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 10px;
    background: #ffffff;
    border-radius: 100px;
    margin-bottom: 18px;
    border: 1.5px solid #d8f0e0;
    box-shadow: 0 4px 12px rgba(0, 95, 76, 0.06);
}

.crew_login__thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.crew_login__crew_meta {
    text-align: left;
}

.crew_login__crew_name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 2px;
    letter-spacing: -0.2px;
}

.crew_login__crew_detail {
    font-size: 11.5px;
    color: #8a8a8a;
    margin: 0;
}

.crew_login__benefit_box {
    background: linear-gradient(135deg, #eafaef 0%, #d4f4e2 100%);
    border-radius: 16px;
    padding: 12px 14px;
    text-align: left;
    border: 1px solid rgba(0, 95, 76, 0.08);
}

.crew_login__benefit_item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.crew_login__benefit_icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.crew_login__benefit_txt {
    font-size: 13px;
    color: #2d5a4a;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.crew_login__btns {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: #ffffff;
}

.crew_login__btn {
    flex: 1;
    padding: 14px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.2px;
    transition: all 0.15s;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crew_login__btn--cancel {
    background: #f0f2ee;
    color: #8a8a8a;
}

.crew_login__btn--cancel:active { background: #e5e7e3; }

.crew_login__btn--confirm {
    background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 95, 76, 0.28);
}

.crew_login__btn--confirm:active { transform: scale(0.97); }
.crew_login__btn--confirm:hover { color: #ffffff; text-decoration: none; }

/* PC: 가운데 모달 */
@media (min-width: 1025px) {
    .crew_login_pop .pop_container {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        max-width: 440px;
        width: calc(100% - 40px);
        border-radius: 24px;
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    }
    
    .crew_login_pop.active .pop_container {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    
    .crew_login_pop .content_container::before {
        display: none;
    }
    
    .crew_login_pop .content_container {
        padding: 36px 32px 22px;
    }
    
    .crew_login__emoji { font-size: 64px; margin: 0 0 16px; }
    .crew_login__title { font-size: 24px; }
    .crew_login__subtitle { font-size: 14px; margin-bottom: 22px; }
    .crew_login__benefit_box { padding: 16px 18px; }
    .crew_login__benefit_txt { font-size: 14px; }
    .crew_login__btns { padding: 20px 28px 28px; gap: 10px; }
    .crew_login__btn { padding: 15px 20px; font-size: 15px; }
    .crew_login__btn--confirm:hover { 
        transform: translateY(-1px); 
        box-shadow: 0 10px 24px rgba(0, 95, 76, 0.35); 
    }
    
    /* PC에서 블러 클릭 가능하도록 */
    .crew_locked_wrap.is_locked {
        cursor: pointer;
    }
    .crew_locked_wrap.is_locked:hover {
        filter: blur(7px) saturate(0.7);
    }
}

/* 작은 폰 */
@media (max-width: 374px) {
    .crew_login__emoji { font-size: 48px; }
    .crew_login__title { font-size: 19px; }
}

/* ============================================
 * 🔒 잠금 카드 (비로그인 / 미가입자용)
 * ============================================ */
.crew_locked_card {
    background: linear-gradient(135deg, #f8fdfa 0%, #eafaef 50%, #d4f4e2 100%);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    margin-top: 16px;
    border: 1px solid rgba(0, 95, 76, 0.08);
    box-shadow: 0 4px 20px rgba(0, 95, 76, 0.06);
    position: relative;
    overflow: hidden;
}

.crew_locked_card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(0, 168, 120, 0.08);
    border-radius: 50%;
    filter: blur(30px);
}

.crew_locked_card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255, 149, 0, 0.06);
    border-radius: 50%;
    filter: blur(28px);
}

.crew_locked_card__emoji {
    font-size: 60px;
    line-height: 1;
    margin-bottom: 16px;
    filter: drop-shadow(0 6px 16px rgba(0, 168, 120, 0.25));
    animation: crew_locked_float 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes crew_locked_float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.crew_locked_card__title {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.crew_locked_card__desc {
    font-size: 13px;
    color: #4a6a5e;
    line-height: 1.6;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.crew_locked_card__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.crew_locked_card__feat {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 95, 76, 0.08);
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    color: #2d5a4a;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.crew_locked_card__btn {
    background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.2px;
    box-shadow: 0 6px 18px rgba(0, 95, 76, 0.28);
    transition: all 0.15s;
    position: relative;
    z-index: 1;
    min-width: 180px;
}

.crew_locked_card__btn:active {
    transform: scale(0.97);
}

@media (min-width: 1025px) {
    .crew_locked_card {
        padding: 48px 32px;
    }
    .crew_locked_card__emoji { font-size: 72px; }
    .crew_locked_card__title { font-size: 24px; }
    .crew_locked_card__desc { font-size: 15px; margin-bottom: 24px; }
    .crew_locked_card__features { gap: 10px; margin-bottom: 28px; }
    .crew_locked_card__feat { font-size: 14px; padding: 12px 14px; }
    .crew_locked_card__btn { 
        padding: 16px 40px; 
        font-size: 16px; 
        min-width: 220px;
    }
    .crew_locked_card__btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0, 95, 76, 0.35);
    }
}

@media (max-width: 374px) {
    .crew_locked_card { padding: 24px 18px; }
    .crew_locked_card__emoji { font-size: 50px; }
    .crew_locked_card__title { font-size: 18px; }
    .crew_locked_card__features { grid-template-columns: 1fr; }
}

.crew_schedule_card_link { display: block; text-decoration: none; color: inherit; margin-bottom: 10px; }
.crew_schedule_card_link:hover { text-decoration: none; color: inherit; }
.crew_schedule_card_v2 {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #efefef;
  border-radius: 14px; padding: 14px; transition: all 0.15s ease;
}
.crew_schedule_card_link:hover .crew_schedule_card_v2 {
  border-color: #005f4c; box-shadow: 0 4px 12px rgba(0, 95, 76, 0.1);
}
.crew_schedule_card_link.is_past .crew_schedule_card_v2 { opacity: 0.6; }
.crew_schedule_date_v2 {
  flex-shrink: 0; width: 52px;
  background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
  color: #fff; border-radius: 10px;
  padding: 8px 4px; text-align: center;
}
.is_past .crew_schedule_date_v2 {
  background: linear-gradient(135deg, #6a6a6a 0%, #8a8a8a 100%);
}
.crew_sch_month { font-size: 10px; opacity: 0.85; }
.crew_sch_day { font-size: 22px; font-weight: 800; line-height: 1; margin-top: 2px; }
.crew_schedule_info_v2 { flex: 1; min-width: 0; }
.crew_schedule_title_v2 {
  font-size: 15px; font-weight: 600; color: #1a1a1a;
  margin-bottom: 4px; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crew_schedule_meta_v2 {
  font-size: 12px; color: #6a6a6a; margin-bottom: 6px;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.crew_schedule_badges_v2 { display: flex; gap: 4px; flex-wrap: wrap; }
.crew_sch_badge {
  padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 600;
}
.crew_sch_badge--upcoming { background: #eafaef; color: #005f4c; }
.crew_sch_badge--today {
  background: linear-gradient(135deg, #ff9500 0%, #ff7800 100%);
  color: #fff; animation: csd_today_pulse 1.5s ease-in-out infinite;
}
.crew_sch_badge--past { background: #f0f0f0; color: #8a8a8a; }
.crew_sch_badge--count { background: #fff8e6; color: #c98800; }
@keyframes csd_today_pulse { 50% { transform: scale(1.05); } }
.crew_sch_chevron {
  font-style: normal; font-size: 22px;
  color: #c0c0c0; font-weight: 300;
}

/* ============================================
 * 📎 채팅 파일 첨부
 * ============================================ */

/* 첨부 버튼 */
.crew_chat_attach_btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.crew_chat_attach_btn:hover {
    background: #f0f2ee;
}

.crew_chat_attach_icon {
    font-size: 16px;
    font-style: normal;
}

/* 이미지 미리보기 영역 */
.crew_chat_preview {
    margin-bottom: 8px;
    padding: 10px;
    background: #f5f7f3;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

.crew_chat_preview_list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.crew_chat_preview_list::-webkit-scrollbar {
    height: 4px;
}

.crew_chat_preview_item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
}

.crew_chat_preview_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crew_chat_preview_remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.crew_chat_preview_remove:active {
    background: rgba(0, 0, 0, 0.8);
}

/* ============================================
 * 📸 채팅 이미지 말풍선 (카톡 스타일)
 * ============================================ */

/* 이미지 컨테이너 - 항상 컴팩트하게 */
.crew_chat_images {
    display: grid;
    gap: 2px;
    border-radius: 14px;
    overflow: hidden;
    width: fit-content;
    max-width: 220px;
    cursor: pointer;
    align-self: flex-start;  /* 상대방: 왼쪽 정렬 */
}

/* 본인 메시지: 오른쪽 정렬 */
.crew_chat_msg.is_mine .crew_chat_images {
    align-self: flex-end;
}

/* 1장 */
.crew_chat_images--1 {
    grid-template-columns: 1fr;
    width: 180px;
    height: 180px;
}

/* 2장 */
.crew_chat_images--2 {
    grid-template-columns: 1fr 1fr;
    width: 220px;
    height: 110px;
}

/* 3장: 위 1개 + 아래 2개 */
.crew_chat_images--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 110px 110px;
    width: 220px;
}
.crew_chat_images--3 .crew_chat_img_item:first-child {
    grid-column: 1 / -1;
}

/* 4장: 2x2 */
.crew_chat_images--4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 110px 110px;
    width: 220px;
}

/* 5장: 위 2개 + 아래 3개 */
.crew_chat_images--5 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 110px 73px;
    width: 220px;
}
.crew_chat_images--5 .crew_chat_img_item:nth-child(1) {
    grid-column: 1 / span 2;
}

/* 개별 이미지 */
.crew_chat_img_item {
    overflow: hidden;
    background: #f0f0f0;
    cursor: pointer;
    transition: opacity 0.15s;
    position: relative;
}

.crew_chat_img_item:active {
    opacity: 0.7;
}

.crew_chat_img_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 이미지 + 텍스트 같이 있을 때 간격 */
.crew_chat_bubble_wrap .crew_chat_images + .crew_chat_bubble {
    margin-top: 4px;
}

@media (min-width: 1025px) {
    .crew_chat_images--1 {
        width: 220px;
        height: 220px;
    }
    .crew_chat_images--2,
    .crew_chat_images--3,
    .crew_chat_images--4,
    .crew_chat_images--5 {
        width: 280px;
    }
}

/* ============================================
 * 📸 채팅 이미지 갤러리 팝업 (com_popup 패턴)
 * ============================================ */

/* 팝업 컨테이너 - 풀스크린 */
.crew_gallery_pop .pop_container {
    background: rgba(0, 0, 0, 0.92);
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    margin: 0;
    transform: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 99999;
}

.crew_gallery_pop.active .pop_container {
    opacity: 1;
    transform: none;
}

.crew_gallery_pop .content_container {
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    background: transparent;
}

/* 닫기 버튼 */
.crew_gallery__close {
    position: absolute;
    top: 20px;
    right: 20px;
    top: calc(20px + env(safe-area-inset-top));
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 300;
    transition: all 0.15s;
}

.crew_gallery__close:hover,
.crew_gallery__close:active {
    background: rgba(255, 255, 255, 0.25);
}

/* 카운터 */
.crew_gallery__counter {
    position: absolute;
    top: 28px;
    top: calc(28px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 14px;
    border-radius: 100px;
    z-index: 10;
    letter-spacing: 0.3px;
}

/* 좌우 네비 버튼 */
.crew_gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 300;
    transition: all 0.15s;
}

.crew_gallery__nav:hover,
.crew_gallery__nav:active {
    background: rgba(255, 255, 255, 0.25);
}

.crew_gallery__nav--prev { left: 20px; }
.crew_gallery__nav--next { right: 20px; }

@media (max-width: 768px) {
    .crew_gallery__nav {
        width: 36px;
        height: 36px;
        font-size: 24px;
        background: rgba(255, 255, 255, 0.1);
    }
    .crew_gallery__nav--prev { left: 10px; }
    .crew_gallery__nav--next { right: 10px; }
}

/* 이미지 영역 */
.crew_gallery__viewport {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.crew_gallery__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
}

.crew_gallery__slide.active {
    display: flex;
    animation: gallery_fade_in 0.2s ease;
}

@keyframes gallery_fade_in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
    .crew_gallery__slide {
        padding: 60px 20px;
    }
}

.crew_gallery__slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-drag: none;
}

/* 하단 도트 */
.crew_gallery__dots {
    position: absolute;
    bottom: 30px;
    bottom: calc(30px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.crew_gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.2s;
}

.crew_gallery__dot.active {
    background: #ffffff;
    transform: scale(1.3);
}

/* bg_close 숨김 (어차피 전체가 검정이라 효과 없음) */
.crew_gallery_pop .bg_close {
    display: none;
}

/* ============================================
 * 🎯 리액션 칩 (메시지 아래)
 * ============================================ */
.crew_chat_reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.crew_chat_msg.is_mine .crew_chat_reactions {
    justify-content: flex-end;
}

.crew_reaction_chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 9px 4px 7px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 100px;
    font-size: 12px;
    color: #4a4a4a;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    line-height: 1;
    height: 22px;
    box-sizing: border-box;
}

.crew_reaction_chip:hover {
    background: #f5f7f3;
    transform: scale(1.05);
}

.crew_reaction_chip.is_mine {
    background: linear-gradient(135deg, #eafaef 0%, #d4f4e2 100%);
    border-color: #00a878;
    color: #005f4c;
    font-weight: 600;
}

.crew_reaction_chip__emoji {
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.crew_reaction_chip__count {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    padding-top: 1px;
}

/* 수정됨 표시 */
.crew_chat_edited {
    font-size: 10px;
    color: #b0b0b0;
    margin-left: 4px;
    font-style: italic;
}

.crew_chat_msg.is_mine .crew_chat_edited {
    color: rgba(255, 255, 255, 0.6);
}

/* 활성 메시지 (롱프레스 중) */
.crew_chat_msg.is_active .crew_chat_bubble,
.crew_chat_msg.is_active .crew_chat_images {
    box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.3);
}

/* ============================================
 * 🎯 리액션 바 (롱프레스 시 떠있음)
 * ============================================ */
.crew_reaction_bar {
    position: absolute;
    background: #ffffff;
    border-radius: 100px;
    padding: 6px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 9999;
    opacity: 0;
    transform: scale(0.85) translateY(8px);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid #f0f0f0;
}

.crew_reaction_bar.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.crew_reaction_btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: all 0.15s;
    font-family: inherit;
}

.crew_reaction_btn:hover {
    background: #f5f7f3;
    transform: scale(1.15);
}

.crew_reaction_btn:active {
    transform: scale(0.95);
}

.crew_reaction_btn--more {
    font-size: 18px;
    color: #6a6a6a;
}

.crew_reaction_bar__divider {
    width: 1px;
    height: 20px;
    background: #e0e0e0;
    margin: 0 2px;
}

/* ============================================
 * ⋯ 액션 팝업 (편집/삭제)
 * ============================================ */
.crew_action_pop .pop_container {
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.crew_action_pop.active .pop_container {
    transform: translateY(0);
}

.crew_action_pop .content_container {
    padding: 20px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    position: relative;
}

.crew_action__handle {
    width: 40px;
    height: 4px;
    background: #d0d6d2;
    border-radius: 100px;
    margin: 0 auto 14px;
}

.crew_action__title {
    text-align: center;
    font-size: 14px;
    color: #8a8a8a;
    margin-bottom: 12px;
    font-weight: 500;
}

.crew_action__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #f8fdfa;
    border: none;
    border-radius: 14px;
    margin-bottom: 6px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}

.crew_action__btn:active {
    background: #eafaef;
}

.crew_action__icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.crew_action__label {
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 500;
}

.crew_action__btn--delete .crew_action__label {
    color: #ff4444;
}

.crew_action__btn--cancel {
    background: #f0f2ee;
    justify-content: center;
    margin-top: 8px;
}

.crew_action__btn--cancel .crew_action__label {
    color: #8a8a8a;
}

@media (min-width: 1025px) {
    .crew_action_pop .pop_container {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        max-width: 400px;
        width: calc(100% - 40px);
        border-radius: 20px;
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0;
    }
    .crew_action_pop.active .pop_container {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    .crew_action__handle { display: none; }
}

/* ============================================
 * ✏️ 편집 팝업
 * ============================================ */
.crew_edit_pop .pop_container {
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.crew_edit_pop.active .pop_container {
    transform: translateY(0);
}

.crew_edit_pop .content_container {
    padding: 24px 20px 16px;
    position: relative;
}

.crew_edit__title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    text-align: center;
}

.crew_edit__textarea {
    width: 100%;
    min-height: 100px;
    max-height: 200px;
    padding: 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 14px;
    color: #1a1a1a;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
    line-height: 1.5;
}

.crew_edit__textarea:focus {
    border-color: #00a878;
}

.crew_edit__counter {
    text-align: right;
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 6px;
}

.crew_edit__btns {
    display: flex;
    gap: 8px;
    padding: 12px 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.crew_edit__btn {
    flex: 1;
    padding: 14px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.crew_edit__btn--cancel {
    background: #f0f2ee;
    color: #8a8a8a;
}

.crew_edit__btn--confirm {
    background: linear-gradient(135deg, #005f4c 0%, #00a878 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 95, 76, 0.28);
}

.crew_edit__btn--confirm:active {
    transform: scale(0.97);
}

@media (min-width: 1025px) {
    .crew_edit_pop .pop_container {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        max-width: 440px;
        width: calc(100% - 40px);
        border-radius: 20px;
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0;
    }
    .crew_edit_pop.active .pop_container {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* ============================================
 * 🗑️ 삭제 확인 팝업
 * ============================================ */
.crew_delete_pop .pop_container {
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.crew_delete_pop.active .pop_container {
    transform: translateY(0);
}

.crew_delete_pop .content_container {
    padding: 28px 24px 20px;
    text-align: center;
    position: relative;
}

.crew_delete__emoji {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
}

.crew_delete__title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.crew_delete__desc {
    font-size: 13px;
    color: #8a8a8a;
}

.crew_delete__btns {
    display: flex;
    gap: 8px;
    padding: 12px 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.crew_delete__btn {
    flex: 1;
    padding: 14px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.crew_delete__btn--cancel {
    background: #f0f2ee;
    color: #8a8a8a;
}

.crew_delete__btn--confirm {
    background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(255, 68, 68, 0.28);
}

.crew_delete__btn--confirm:active {
    transform: scale(0.97);
}

@media (min-width: 1025px) {
    .crew_delete_pop .pop_container {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        max-width: 400px;
        width: calc(100% - 40px);
        border-radius: 20px;
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0;
    }
    .crew_delete_pop.active .pop_container {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* ============================================
 * 👥 리액션 누른 사람 보기
 * ============================================ */
.crew_reaction_users_pop .pop_container {
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 70vh;
}

.crew_reaction_users_pop.active .pop_container {
    transform: translateY(0);
}

.crew_reaction_users_pop .content_container {
    padding: 16px 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    position: relative;
}

.crew_reaction_users__handle {
    width: 40px;
    height: 4px;
    background: #d0d6d2;
    border-radius: 100px;
    margin: 0 auto 14px;
}

.crew_reaction_users__title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.crew_reaction_users__title span:first-child {
    font-size: 22px;
    margin-right: 6px;
}

.crew_reaction_users__list {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 12px;
}

.crew_reaction_user_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 0.5px dashed #eaeaea;
}

.crew_reaction_user_item:last-child {
    border-bottom: 0;
}

.crew_reaction_user__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4f4e2 0%, #eafaef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #005f4c;
    flex-shrink: 0;
}

.crew_reaction_user__name {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
}

.crew_reaction_users__close {
    width: 100%;
    padding: 14px;
    background: #f0f2ee;
    color: #6a6a6a;
    border: none;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

@media (min-width: 1025px) {
    .crew_reaction_users_pop .pop_container {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        max-width: 420px;
        width: calc(100% - 40px);
        border-radius: 20px;
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0;
    }
    .crew_reaction_users_pop.active .pop_container {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    .crew_reaction_users__handle { display: none; }
}

/* ============================================
 * 💬 채팅 토스트 (성공 알림)
 * ============================================ */
.crew_chat_toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    z-index: 99999;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.crew_chat_toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
 * 🏆 활동 점수 안내 팝업
 * ============================================ */

/* ===== ℹ️ 안내 버튼 ===== */
.crew_score_info_btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px;            /* 5px 11px → 3px 8px */
    border: none;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;          /* 12px → 10px */
    font-size: 10.5px;            /* 12px → 10.5px */
    font-weight: 600;
    color: #005f4c;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    line-height: 1.4;
}
.crew_score_info_btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 95, 76, 0.15);
}
.crew_score_info_btn:active {
    transform: translateY(0);
}
/* ===== 팝업 컨테이너 ===== */
.crew_score_info_pop .pop_container {
    max-width: 480px;
    max-height: 85vh;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.crew_score_info_pop .content_container {
    padding: 24px 20px 16px;
    overflow-y: auto;
    flex: 1;
}

/* 핸들 (모바일 바텀시트 느낌) */
.crew_score_info__handle {
    width: 40px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: -8px auto 16px;
    display: none;
}

/* ===== 헤더 영역 ===== */
.crew_score_info__header {
    text-align: center;
    padding: 8px 0 20px;
    border-bottom: 1px dashed #e0e0e0;
    margin-bottom: 16px;
}

.crew_score_info__emoji {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 8px;
    animation: scoreEmojiPulse 2s ease-in-out infinite;
}

@keyframes scoreEmojiPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.crew_score_info__title {
    font-size: 19px;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
}

.crew_score_info__subtitle {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}
.crew_score_info__subtitle strong {
    color: #005f4c;
    font-weight: 700;
}

/* ===== 점수 규칙 리스트 ===== */
.crew_score_info__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.crew_score_info__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f8fbf9;
    border-radius: 12px;
    border: 1px solid #e8f0ec;
    transition: all 0.2s ease;
}
.crew_score_info__item:hover {
    background: #f0f8f3;
    border-color: #005f4c;
}

.crew_score_info__item_emoji {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
}

.crew_score_info__item_info {
    flex: 1;
    min-width: 0;
}

.crew_score_info__item_name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin-bottom: 2px;
}

.crew_score_info__item_limit {
    font-size: 11px;
    color: #999;
}

.crew_score_info__item_points {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    flex-shrink: 0;
}

.crew_score_info__point {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}
.crew_score_info__point--personal {
    background: #fff4d6;
    color: #b8860b;
}
.crew_score_info__point--crew {
    background: #d4f4e2;
    color: #005f4c;
}

.crew_score_info__empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 13px;
}

/* ===== 안내 박스 ===== */
.crew_score_info__notice {
    background: linear-gradient(135deg, #f0f8f3 0%, #fff8e1 100%);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crew_score_info__notice_item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #444;
    line-height: 1.5;
}

.crew_score_info__notice_icon {
    font-size: 14px;
    line-height: 1.5;
    flex-shrink: 0;
}

.crew_score_info__notice_txt {
    flex: 1;
}

/* ===== 닫기 버튼 ===== */
.crew_score_info__close {
    width: 100%;
    padding: 16px;
    border: none;
    background: #005f4c;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.crew_score_info__close:hover {
    background: #004a3a;
}
.crew_score_info__close:active {
    background: #003a2d;
}

/* ============================================
 * 📱 모바일 (1023.9px 이하)
 * ============================================ */
@media (max-width: 1023.9px) {
    .crew_score_info_pop .pop_container {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        margin-top: auto;
    }
    
    .crew_score_info__handle {
        display: block;
    }
    
    .crew_score_info__emoji {
        font-size: 36px;
    }
    
    .crew_score_info__title {
        font-size: 17px;
    }
    
    .crew_score_info__subtitle {
        font-size: 12.5px;
    }
    
    .crew_score_info__item {
        padding: 10px 12px;
    }
    
    .crew_score_info__item_emoji {
        font-size: 22px;
        width: 32px;
        height: 32px;
    }
    
    .crew_score_info__item_name {
        font-size: 13.5px;
    }
    
    .crew_score_info__point {
        font-size: 10.5px;
        padding: 2px 6px;
    }
}

/* ============================================
 * ✅ 채팅 탭 최종본
 * - 말풍선 안 보임 해결
 * - 모바일 입력창 하단 고정
 * - 말풍선 폭 튐 방지
 * - PC 입력창 static 처리
 * ============================================ */

/* 채팅 리스트 강제 표시 */
#crewChatList,
.crew_chat_list {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 채팅 전체 영역 */
.crew_chat_wrap {
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
}

/* 채팅 헤더 */
.crew_chat_wrap .crew_sec__head {
    padding: 16px !important;
    margin-bottom: 0 !important;
    background: #fafbf8 !important;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid #f0f0f0 !important;
}

/* 채팅 리스트 */
.crew_chat_list {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;

    height: calc(100dvh - 88px) !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-y: auto !important;
    padding: 10px 16px 8px !important;
    box-sizing: border-box !important;
}

/* 메시지 간격 */
.crew_chat_msg {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    margin-top: 6px !important;
}

.crew_chat_msg.is_mine {
    grid-template-columns: minmax(0, 1fr) !important;
}

.crew_chat_msg.is_grouped {
    margin-top: 4px !important;
}

.crew_chat_list > .crew_chat_msg:first-child,
.crew_chat_date_divider + .crew_chat_msg {
    margin-top: 0 !important;
}

/* 아바타 */
.crew_chat_avatar,
.crew_chat_avatar_placeholder {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;

    border-radius: 50% !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.crew_chat_avatar img,
.crew_chat_avatar_placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.crew_chat_msg.is_mine .crew_chat_avatar,
.crew_chat_msg.is_mine .crew_chat_avatar_placeholder {
    display: none !important;
}

/* 이름 */
.crew_chat_name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 4px !important;
}

.crew_chat_msg.is_mine .crew_chat_name {
    display: none !important;
}

/* 메시지 본문 */
.crew_chat_msg_body {
    grid-column: 2 !important;
    grid-row: 2 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;

    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.crew_chat_msg.is_mine .crew_chat_msg_body {
    grid-column: 1 !important;
    align-items: flex-end !important;
}

.crew_chat_msg.is_grouped .crew_chat_msg_body {
    grid-row: 1 / span 2 !important;
}

/* 말풍선 묶음 */
.crew_chat_bubble_wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;

    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(76vw, 520px) !important;
}

.crew_chat_msg.is_mine .crew_chat_bubble_wrap {
    align-items: flex-end !important;
    margin-left: auto !important;
}

/* 말풍선 + 시간 한 줄 */
.crew_chat_bubble_row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;

    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.crew_chat_msg.is_mine .crew_chat_bubble_row {
    flex-direction: row-reverse !important;
}

/* 실제 말풍선 */
.crew_chat_bubble {
    display: inline-block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: min(76vw, 520px) !important;

    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;

    background: #f0f2ee !important;
    color: #1a1a1a !important;

    font-size: 14px !important;
    line-height: 1.5 !important;

    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.crew_chat_msg.is_mine .crew_chat_bubble {
    align-self: flex-end !important;
    background: linear-gradient(135deg, #005f4c 0%, #00785f 100%) !important;
    color: #ffffff !important;
}

/* 시간 */
.crew_chat_time {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    color: #b0b0b0 !important;
}

/* 이미지 */
.crew_chat_images {
    align-self: flex-start !important;
    max-width: min(76vw, 280px) !important;
}

.crew_chat_msg.is_mine .crew_chat_images {
    align-self: flex-end !important;
}

/* 날짜 구분선 */
.crew_chat_date_divider {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 0 !important;
    margin: 4px 0 !important;
    width: 100% !important;
}

.crew_chat_date_divider span {
    background: rgba(0, 95, 76, 0.08) !important;
    color: #4a6a5e !important;
    padding: 5px 14px !important;
    border-radius: 100px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
}

/* 모바일 입력창 */
@media (max-width: 1024px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    body.has_chat_input,
    body.has_chat_input main,
    body.has_chat_input .p_crew_detail {
        padding-bottom: 0 !important;
    }

    .crew_chat_list {
        height: calc(100dvh - 78px) !important;
        min-height: 0 !important;
        padding-bottom: 6px !important;
    }

    .crew_chat_input_wrap {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;

        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;

        width: 100vw !important;
        min-height: 64px !important;

        background: #ffffff !important;
        border-top: 1px solid #e8e8e8 !important;
        border-radius: 0 !important;

        padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;

        z-index: 999999 !important;
        margin: 0 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    }

    .crew_chat_input_row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;

        background: #f5f7f3 !important;
        border-radius: 999px !important;
        padding: 6px 6px 6px 14px !important;
        box-sizing: border-box !important;
    }

    .crew_chat_attach_btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-shrink: 0 !important;
    }

    #crewChatInput {
        display: block !important;
        flex: 1 !important;
        min-width: 0 !important;
        height: 34px !important;

        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: #1a1a1a !important;
        font-size: 14px !important;
        font-family: inherit !important;
    }

    .crew_chat_send_btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-shrink: 0 !important;
    }

    #crewChatPreview {
        display: none !important;
    }

    #crewChatPreview[style*="block"],
    #crewChatPreview[style*="display: block"] {
        display: block !important;
    }
}

/* PC */
@media (min-width: 1025px) {
    .crew_chat_list {
        height: clamp(400px, calc(100vh - 300px), 900px) !important;
        min-height: 400px !important;
        padding: 20px 24px !important;
        border-radius: 0 !important;
    }

    .crew_chat_input_wrap {
        position: static !important;
        width: 100% !important;
        z-index: auto !important;

        padding: 10px 16px !important;
        padding-bottom: 10px !important;

        box-shadow: none !important;
        border-top: 1px solid #f0f0f0 !important;
        background: #ffffff !important;
        border-radius: 0 0 16px 16px !important;
        margin: 0 !important;
    }

    body.has_chat_input,
    body.has_chat_input main {
        padding-bottom: 0 !important;
    }

    .crew_chat_msg {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .crew_chat_msg.is_mine {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .crew_chat_avatar,
    .crew_chat_avatar_placeholder {
        width: 38px !important;
        height: 38px !important;

        border-radius: 50% !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .crew_chat_bubble {
        font-size: 15px !important;
        padding: 12px 16px !important;
        max-width: min(62vw, 520px) !important;
    }

    .crew_chat_bubble_wrap {
        max-width: min(62vw, 520px) !important;
    }
}