@charset "utf-8";
/* =========================================================================
 * 커뮤니티 > 이벤트 (www/community/event.jsp 전용)
 * Figma node 593:1741 (1920w light) — 원본은 큰 틀만 잡힌 상태라 디테일은 새로 짰다.
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 * 선택자는 모두 .evt 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ── 구성 ─────────────────────────────────────────────────────────────
 *   1 히어로 → 2 진행 중 이벤트 자동 슬라이드 배너 → 3 이벤트 목록(필터+카드)
 *   → 4 안내 문구 → 5 4대 강점 배너
 *
 * ── ⚠ 슬라이드 배너가 "흐릿해" 보이지 않게 한 장치 (사용자 요청) ────────
 *   ① 사진 배경 + 전면 어두운 오버레이 구조를 쓰지 않는다.
 *      Figma 원본은 스톡 사진 위에 오버레이를 깔아 사진도 카피도 탁했다 →
 *      브랜드 컬러 그라데이션 배너로 바꿔, 오버레이 자체가 필요 없게 만들었다.
 *   ② 전환 효과는 fade 가 아니라 slide 다. 크로스페이드는 두 장이 겹치는 구간에서
 *      반드시 반투명해져 흐릿하게 보인다.
 *   ③ blur / backdrop-filter / opacity 애니메이션을 배너 안에서 쓰지 않는다.
 *   ④ 텍스트에 transform 을 걸지 않는다(서브픽셀 렌더링이 깨져 글자가 뭉갠다).
 *   ※ 이벤트 사진은 배경이 아니라 우측 .evt_slide__img 카드로 얹는다(2026-09-16, 관리자 목록이미지 연동).
 * ========================================================================= */

/* headHtml·main_hero.css 에 없는 서체만 이 페이지에서 로드 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

.evt {
	--ev-green:      #3B5843;
	--ev-green-deep: #24402D;
	--ev-ink:        #1C1E1A;
	--ev-gold:       #C2A878;
	--ev-gold-deep:  #A8874F;
	--ev-cream:      #FBF9F2;
	--ev-line:       #E7E2D8;
	--ev-paper:      #FFFDF8;

	/* 타이포 스케일 */
	--ev-t-h1:   46px;   /* 히어로 타이틀 — 이 페이지 최대 크기 */
	--ev-t-h2:   40px;
	--ev-t-card: 21px;
	--ev-t-lead: 19px;
	--ev-t-body: 18px;
	--ev-t-txt:  16px;

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--ev-ink);
	background: #fff;
	overflow-x: clip;
}
.evt .evt_inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

.evt .evt_eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #6E8874;
}
.evt .evt_title {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: var(--ev-t-h2);
	line-height: 1.3;
	letter-spacing: -1.4px;
	color: var(--ev-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 1. 히어로
 * ========================================================================= */
.evt_hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 400px;
	padding: 104px 0 100px;
	text-align: center;
	background-color: #22402F;
	background-image:
		radial-gradient(124% 104% at 20% 4%, rgba(120,168,136,.34) 0%, rgba(120,168,136,0) 56%),
		radial-gradient(108% 92% at 92% 100%, rgba(6,20,12,.62) 0%, rgba(6,20,12,0) 62%),
		linear-gradient(146deg, #33553E 0%, #294733 38%, #1F3827 70%, #16281C 100%);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}
/* ⚠ 배경 이미지 없이 그라데이션만 쓴다(사용자 지시).
 *   텍스처를 얹지 말 것 — 형제 페이지들과 달리 이 히어로는 면 자체로 마감한다. */
.evt_hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(58% 76% at 50% 50%, rgba(6,20,12,.46) 0%, rgba(6,20,12,.18) 54%, rgba(6,20,12,0) 78%),
		linear-gradient(180deg, rgba(5,16,10,.40) 0%, rgba(5,16,10,0) 26%),
		linear-gradient(0deg,   rgba(5,16,10,.34) 0%, rgba(5,16,10,0) 22%);
	pointer-events: none;
}
.evt_hero > .evt_inner { position: relative; z-index: 1; width: 100%; }
.evt_hero__eyebrow {
	display: block;
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: rgba(232,244,234,.72);
}
.evt_hero__title {
	margin: 16px 0 0;
	font-weight: 800;
	font-size: var(--ev-t-h1);
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #F4FBF5;
}
.evt_hero__desc {
	margin: 20px auto 0;
	max-width: 780px;
	font-size: var(--ev-t-body);
	font-weight: 300;
	line-height: 1.8;
	color: rgba(232,244,234,.76);
	word-break: keep-all;
}

/* =========================================================================
 * 2. 진행 중 이벤트 — 자동 슬라이드 배너 (풀블리드)
 *    ⚠ 파일 상단 주석의 "흐릿하지 않게" 4개 원칙을 지킬 것.
 * ========================================================================= */
.evt_banner { position: relative; background: #F4F1EA; }
.evt_banner .swiper { width: 100%; }
.evt_slide {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 380px;
	padding: 64px 0;
	overflow: hidden;
	/* 톤은 슬라이드마다 CSS 변수로만 갈아끼운다(마크업에서 data-tone 지정) */
	background-image: linear-gradient(122deg, var(--sl-a) 0%, var(--sl-b) 46%, var(--sl-c) 100%);
	background-color: var(--sl-b);
}
.evt_slide[data-tone="green"]  { --sl-a: #3E6B4E; --sl-b: #2B5039; --sl-c: #1A3325; }
.evt_slide[data-tone="bronze"] { --sl-a: #6B563A; --sl-b: #4E3E29; --sl-c: #2E2418; }
.evt_slide[data-tone="aqua"]   { --sl-a: #2F6B70; --sl-b: #235055; --sl-c: #143336; }
/* 우측 장식 링 — 사진이 없는 자리를 비워두지 않고 브랜드 오브제로 채운다.
 * (실제 이벤트 사진이 확보되면 이 자리에 이미지를 얹으면 된다) */
.evt_slide::before {
	content: '';
	position: absolute;
	right: max(-160px, calc(50% - 900px));
	top: 50%;
	width: 520px;
	height: 520px;
	transform: translateY(-50%);
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.16);
	box-shadow:
		0 0 0 60px rgba(255,255,255,.045),
		inset 0 0 120px rgba(255,255,255,.06);
	pointer-events: none;
}
/* 모델 뒤 후광 — 컷아웃 인물이 어두운 면에서 뜨지 않고 자연스럽게 앉도록 */
.evt_slide::after {
	content: '';
	position: absolute;
	right: max(-20px, calc(50% - 700px));
	bottom: -10%;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 66%);
	pointer-events: none;
}
/* 이벤트 이미지 — 관리자 목록이미지(imagename1). 배치 규칙은 **원래 하드코딩 모델 컷(.evt_slide__model, model1/2.png)과 동일**하다
 * (2026-09-17 사용자 지시): 우측 하단 기준, 폭 400px, 높이 116%(배너보다 조금 크게 잡아 윗부분이 프레임 밖으로 이어짐), contain,
 * 프레임·그림자 없음, 768 이하에서는 숨김. 이미지가 없는 글은 마크업 자체를 안 그린다(더미 금지).
 * .evt_slide(position:relative, overflow:hidden) 의 직계 자식이다 — inner 안에 두면 슬라이드 바닥 기준을 잡을 수 없다.
 * ⚠ 이미지는 배너 전용 — 목록 카드(.evt_card)에는 넣지 않는다(사용자 지시). */
.evt_slide__img {
	position: absolute;
	right: max(0px, calc(50% - 610px));
	bottom: 0;
	z-index: 1;
	width: 400px;
	height: 116%;
	pointer-events: none;
}
.evt_slide__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}
/* 사진을 얹을 때 쓸 좌측 스크림(현재는 미사용 · 전면 오버레이 대신 이것만 쓸 것) */
.evt_slide__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10,20,14,.72) 0%, rgba(10,20,14,.34) 42%, rgba(10,20,14,0) 74%);
	pointer-events: none;
}
.evt_slide__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 40px;
}
.evt_slide__body { max-width: 640px; }
.evt_slide__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.evt_slide__tags span {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.22);
	font-size: 13px;
	font-weight: 600;
	color: #FFF;
}
/* 배너의 진행중 — 어두운 면 위라 카드와 달리 밝은 골드로 채운다(목록 배지와 같은 라이브 점) */
.evt_slide__tags .is-live {
	background: #E4C88E;
	border-color: #E4C88E;
	color: #2A2113;
	box-shadow: 0 2px 10px rgba(228,200,142,.34);
}
.evt_slide__tags .is-live::before {
	content: '';
	width: 5px;
	height: 5px;
	margin-right: 6px;
	border-radius: 50%;
	background: #6B4E17;
}
/* 배너의 오픈 예정(main=1 이면서 시작 전) — 밝은 면으로 구분 */
.evt_slide__tags .is-soon {
	background: rgba(255,255,255,.92);
	border-color: #FFF;
	color: #2B5039;
}
.evt_slide__eyebrow {
	display: block;
	margin: 20px 0 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: rgba(255,255,255,.66);
}
.evt_slide__title {
	margin: 10px 0 0;
	font-weight: 800;
	font-size: 42px;
	line-height: 1.24;
	letter-spacing: -1.6px;
	color: #FFF;
	word-break: keep-all;
}
.evt_slide__desc {
	margin: 16px 0 0;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255,255,255,.82);
	word-break: keep-all;
}
.evt_slide__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin: 30px 0 0;
}
.evt_slide__date {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .2px;
	color: rgba(255,255,255,.74);
}
.evt .evt_slide__more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 26px;
	border-radius: 999px;
	background: var(--ev-gold);
	font-size: 15px;
	font-weight: 700;
	color: #2A2113;
	text-decoration: none;
	transition: background .25s ease, gap .25s ease;
}
.evt .evt_slide__more:hover { background: #D6BC8C; gap: 14px; }
.evt .evt_slide__more i { font-style: normal; }

/* 페이지네이션 · 좌우 버튼 — 배너 위에 얹되 콘텐츠를 가리지 않게 */
.evt_banner .swiper-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 9px;
}
.evt_banner .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: rgba(255,255,255,.4);
	opacity: 1;
	transition: width .3s ease, background .3s ease;
}
.evt_banner .swiper-pagination-bullet-active { width: 28px; background: var(--ev-gold); }
.evt_banner .evt_nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 50%;
	background: rgba(255,255,255,.10);
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease;
}
.evt_banner .evt_nav:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.evt_banner .evt_nav::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	border: solid #fff;
	border-width: 1.6px 1.6px 0 0;
}
.evt_banner .evt_nav--prev { left: max(20px, calc(50% - 700px)); }
.evt_banner .evt_nav--next { right: max(20px, calc(50% - 700px)); }
.evt_banner .evt_nav--prev::before { transform: translate(-40%, -50%) rotate(-135deg); }
.evt_banner .evt_nav--next::before { transform: translate(-60%, -50%) rotate(45deg); }

/* =========================================================================
 * 3. 이벤트 목록 — 필터 칩 + 카드 그리드
 * ========================================================================= */
.evt_list { padding: 92px 0 100px; background: #fff; }
.evt_list__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 34px;
}
.evt_filter { display: flex; flex-wrap: wrap; gap: 8px; }
.evt_filter button {
	padding: 10px 20px;
	border: 1px solid var(--ev-line);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: rgba(28,30,26,.6);
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.evt_filter button:hover { border-color: rgba(59,88,67,.4); color: var(--ev-ink); }
.evt_filter button.is-on {
	background: var(--ev-green);
	border-color: var(--ev-green);
	color: #fff;
}
.evt_list__count {
	font-size: 15px;
	font-weight: 400;
	color: rgba(28,30,26,.5);
}
.evt_list__count b { font-weight: 700; color: var(--ev-ink); }

.evt_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}
.evt_card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 30px 26px;
	background: #fff;
	border: 1px solid var(--ev-line);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, border-color .38s ease;
}
.evt_card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--ev-green) 0%, #7FA089 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.evt_card:hover {
	transform: translateY(-4px);
	border-color: rgba(59,88,67,.28);
	box-shadow: 0 22px 44px rgba(28,30,26,.10);
}
.evt_card:hover::before { transform: scaleX(1); }
/* 카드 전체 클릭 — 상세(event_read)로. 마크업의 첫 자식 <a> 가 카드 면적을 덮는다(2026-09-17).
 * 카드 안에 다른 링크가 없으므로 이 방식이 가장 단순하다. 포커스 링은 카드 테두리로 보여 준다. */
.evt_card__cover { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.evt_card:has(.evt_card__cover:focus-visible) { outline: 2px solid var(--ev-green); outline-offset: 2px; }
.evt_card.is-hide { display: none; }
/* 종료된 이벤트는 한 톤 내려 목록에서 구분된다 */
.evt_card.is-done { background: #FAFAF8; }
.evt_card.is-done .evt_card__name,
.evt_card.is-done .evt_card__txt { color: rgba(28,30,26,.42); }

.evt_card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.evt_card__badges span {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -.2px;
}
/* 진행중 = 목록에서 가장 먼저 눈에 들어와야 하는 상태다.
 * 옅은 배경 + 같은 계열 글씨는 배지가 묻혀 보여서, 채워진 그린 + 흰 글씨로 올렸다.
 * 앞의 점은 "지금 살아 있는 이벤트"라는 신호 — 나머지 배지에는 붙이지 않는다. */
.evt_badge--live {
	background: #2E7A50;
	color: #fff;
	box-shadow: 0 2px 8px rgba(46,122,80,.28);
}
.evt_badge--live::before {
	content: '';
	width: 5px;
	height: 5px;
	margin-right: 6px;
	border-radius: 50%;
	background: #A8F0C4;
}
.evt_badge--soon  { background: rgba(194,168,120,.22); color: #8A6C33; }
.evt_badge--done  { background: rgba(28,30,26,.06);   color: rgba(28,30,26,.42); }
.evt_badge--type  { background: rgba(28,30,26,.05);   color: rgba(28,30,26,.55); }

.evt_card__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--ev-t-card);
	line-height: 1.4;
	letter-spacing: -.7px;
	color: var(--ev-ink);
	word-break: keep-all;
}
.evt_card__txt {
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(28,30,26,.58);
	word-break: keep-all;
}
.evt_card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 22px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ev-line);
}
.evt_card__date {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -.2px;
	color: var(--ev-gold-deep);
}
.evt_card.is-done .evt_card__date { color: rgba(28,30,26,.36); }
.evt_card__dday {
	flex: 0 0 auto;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.4px;
	color: rgba(28,30,26,.45);
}

/* 필터 결과 없음 */
.evt_empty {
	display: none;
	padding: 70px 0;
	text-align: center;
	font-size: var(--ev-t-txt);
	color: rgba(28,30,26,.45);
}
.evt_empty.is-on { display: block; }

/* 목록 페이저 — 2026-08-12 추가(모바일 전용). 버튼은 event.jsp 의 스크립트가 그린다.
 * ⚠ :empty 로 접는다 — 1페이지뿐이거나 데스크톱이면 스크립트가 내용을 비우므로 자리도 차지하지 않는다.
 * ⚠ 전후사진(.gl_pager__btn)과 같은 규격으로 맞춰 뒀다. 한쪽만 고치면 두 목록의 페이저가 갈린다. */
.evt_pager {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 34px 0 0;
}
.evt_pager:empty { display: none; }
.evt_pager__btn {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(28,30,26,.14);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	color: rgba(28,30,26,.7);
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.evt_pager__btn:hover:not(:disabled):not(.is-on) { border-color: var(--ev-green, #3B5843); color: var(--ev-green, #3B5843); }
.evt_pager__btn.is-on {
	border-color: var(--ev-green, #3B5843);
	background: var(--ev-green, #3B5843);
	color: #FFFDF8;
	cursor: default;
}
.evt_pager__btn:disabled { opacity: .35; cursor: default; }
.evt_pager__btn--nav { font-size: 17px; line-height: 1; padding: 0 10px; min-width: 36px; }

.evt_list__note {
	margin: 40px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(28,30,26,.42);
	word-break: keep-all;
}

/* =========================================================================
 * 4. 4대 강점 배너 — 형제 페이지와 동일 (원본 폰트 크기 32 / 13 유지 → 2026-08-10 설명문만 16px 로 상향)
 * ========================================================================= */
.evt_merit {
	padding: 58px 0 62px;
	background: #EFECE4 url('/img/community/event/cat_bg.jpg') center center / cover no-repeat;
}
.evt_merit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.evt_merit__item { text-align: center; }
.evt_merit__item strong {
	display: block;
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -.64px;
	color: var(--ev-ink);
}
.evt_merit__item p {
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -.3px;
	color: rgba(28,30,26,.55);
	word-break: keep-all;
}

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	.evt { --ev-t-h1: 42px; --ev-t-h2: 36px; }
	.evt_slide__title { font-size: 38px; }
	.evt_slide::before { width: 440px; height: 440px; }
}

@media all and (max-width: 1200px) {
	.evt { --ev-t-h1: 38px; --ev-t-h2: 33px; --ev-t-lead: 18px; --ev-t-body: 17px; }
	.evt_hero { min-height: 340px; padding: 84px 0 80px; }
	.evt_slide { min-height: 340px; padding: 56px 0; }
	.evt_slide__title { font-size: 34px; }
	.evt_slide::before { width: 360px; height: 360px; right: -120px; }
	.evt_slide::after { width: 380px; height: 380px; right: -60px; }
	.evt_slide__img { width: 300px; right: -10px; }
	.evt_slide__body { max-width: 520px; }
	.evt_list { padding: 76px 0 84px; }
	.evt_banner .evt_nav { display: none; }   /* 좁아지면 자동재생·스와이프로 충분 */
}

@media all and (max-width: 768px) {
	.evt { --ev-t-h1: 29px; --ev-t-h2: 26px; --ev-t-card: 19px; --ev-t-body: 16px; --ev-t-txt: 15px; }
	.evt .evt_inner { padding: 0 24px; }

	.evt_hero { min-height: 260px; padding: 58px 0 56px; }
	.evt_hero__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.evt_hero__desc { font-size: 15px; }
	.evt_hero__desc br { display: none; }

	.evt_slide { min-height: 300px; padding: 46px 0 62px; }
	.evt_slide__inner { padding: 0 24px; }
	.evt_slide__title { font-size: 26px; letter-spacing: -1px; }
	.evt_slide__desc { font-size: 15px; }
	.evt_slide__foot { gap: 14px; margin-top: 24px; }
	/* 좁은 화면에서는 모델·장식이 카피와 겹친다 → 카피 가독 우선으로 제거(원래 하드코딩 모델 컷과 동일) */
	.evt_slide::before,
	.evt_slide::after,
	.evt_slide__img { display: none; }
	.evt_slide__body { max-width: none; }

	.evt_list { padding: 56px 0 64px; }
	.evt_list__bar { margin-bottom: 24px; }
	.evt_filter button { padding: 8px 16px; font-size: 14px; }
	.evt_grid { grid-template-columns: 1fr; gap: 16px; }
	.evt_card { padding: 24px 22px 22px; }

	.evt_merit { padding: 44px 0 48px; }
	.evt_merit__grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
	.evt_merit__item strong { font-size: 26px; }
	.evt_merit__item p { font-size: 15px; }
}

@media all and (max-width: 480px) {
	.evt { --ev-t-h1: 25px; }
	.evt .evt_inner { padding: 0 18px; }
	.evt_slide__inner { padding: 0 18px; }
	.evt_slide__title { font-size: 23px; }
	.evt_merit__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * 6. 이벤트 상세 (community/event_read.jsp · 2026-09-17)
 *    목록과 같은 히어로·4대 강점을 재사용하고, 가운데 .evt_view 만 새로 둔다.
 *    본문(.evt_view__body)은 관리자 에디터 HTML 이라 요소 선택자로 폭·간격만 잡는다.
 * ========================================================================= */
.evt_read .evt_hero { min-height: 300px; padding: 84px 0 76px; }
.evt_view { padding: 72px 0 96px; background: #fff; }
.evt .evt_view__inner { max-width: 1000px; }   /* .evt .evt_inner(1320) 보다 우선하려면 .evt 접두 필수 */

.evt_view__head { padding: 0 0 30px; border-bottom: 1px solid var(--ev-line); }
.evt_view__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.evt_view__badges span {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -.2px;
}
.evt_view__title {
	margin: 0;
	font-weight: 800;
	font-size: var(--ev-t-h2);
	line-height: 1.28;
	letter-spacing: -1.4px;
	color: var(--ev-ink);
	word-break: keep-all;
}
.evt_view__meta { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 22px 0 0; }
.evt_view__meta-item { display: flex; align-items: center; gap: 12px; margin: 0; }
.evt_view__meta dt { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.2px; color: rgba(28,30,26,.5); }
.evt_view__meta dd { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.2px; color: var(--ev-ink); }
.evt_view__dday {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	font-family: 'Cormorant Garamond', serif;
	font-style: normal;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.2px;
	color: var(--ev-gold-deep);
	background: rgba(194,168,120,.16);
}
.evt_view__dday.is-done { color: rgba(28,30,26,.42); background: rgba(28,30,26,.06); }

.evt_view__movie { margin: 40px 0 0; border-radius: 12px; overflow: hidden; background: #000; }
.evt_view__movie video { display: block; width: 100%; max-height: 640px; }

/* 본문 — 에디터 HTML. 글꼴 크기는 에디터 인라인값을 존중하고 줄간격·여백·이미지 폭만 잡는다 */
.evt_view__body {
	padding: 44px 0 8px;
	font-size: var(--ev-t-txt);
	line-height: 1.85;
	color: rgba(28,30,26,.82);
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.evt_view__body p { margin: 0 0 1em; }
.evt_view__body img { max-width: 100%; height: auto; }
.evt_view__body table { max-width: 100%; border-collapse: collapse; }
.evt_view__body iframe, .evt_view__body video { max-width: 100%; }
.evt_view__body a { color: var(--ev-green); text-decoration: underline; }

.evt_view__files { margin: 40px 0 0; padding: 22px 26px; border: 1px solid var(--ev-line); border-radius: 12px; background: var(--ev-cream); }
.evt_view__files-title { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: -.2px; color: var(--ev-ink); }
.evt_view__files ul { margin: 0; padding: 0; list-style: none; }
.evt_view__files li + li { margin-top: 6px; }
.evt_view__files a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ev-ink); text-decoration: none; }
.evt_view__files a:hover span { text-decoration: underline; }
.evt_view__files a i { width: 14px; height: 14px; border: 1.5px solid var(--ev-gold-deep); border-radius: 3px; flex: 0 0 auto; }
.evt_view__files small { font-size: 13px; color: rgba(28,30,26,.45); }

/* 이전 / 목록 / 다음 */
.evt_view__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	margin: 56px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--ev-line);
}
.evt_view__nav-item { display: block; min-width: 0; text-decoration: none; color: inherit; }
.evt_view__nav-item--next { text-align: right; }
.evt_view__nav-item.is-empty { pointer-events: none; }
.evt_view__nav-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.2px; color: rgba(28,30,26,.5); }
.evt_view__nav-label i { font-style: normal; }
.evt_view__nav-title {
	display: block;
	margin: 6px 0 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.4px;
	color: var(--ev-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .25s ease;
}
.evt_view__nav-item:hover .evt_view__nav-title { color: var(--ev-green); }
.evt_view__list {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	padding: 13px 26px;
	border-radius: 999px;
	background: var(--ev-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.2px;
	text-decoration: none;
	transition: background .25s ease;
}
.evt_view__list:hover { background: var(--ev-green-deep); color: #fff; }

@media all and (max-width: 1200px) {
	.evt_read .evt_hero { min-height: 260px; padding: 72px 0 64px; }
	.evt_view { padding: 60px 0 80px; }
}
@media all and (max-width: 768px) {
	.evt_read .evt_hero { min-height: 200px; padding: 50px 0 46px; }
	.evt_view { padding: 40px 0 60px; }
	.evt_view__head { padding-bottom: 22px; }
	.evt_view__meta { gap: 8px 20px; margin-top: 16px; }
	.evt_view__body { padding-top: 30px; }
	.evt_view__files { padding: 18px 18px; }
	/* 모바일: 세로 나열 — 이전(좌) → 다음(우) → 목록 버튼(가운데). 없는 쪽은 숨긴다 */
	.evt_view__nav { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
	.evt_view__nav-item { width: 100%; }
	.evt_view__nav-item--prev { order: 1; }
	.evt_view__nav-item--next { order: 2; }
	.evt_view__list { order: 3; align-self: center; margin-top: 6px; }
	.evt_view__nav-item.is-empty { display: none; }
	.evt_view__nav-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@media (prefers-reduced-motion: reduce) {
	.evt_card,
	.evt_card::before,
	.evt .evt_slide__more { transition: none; }
	.evt_card:hover { transform: none; }
}