/* 컨테이너: 페이지 레이아웃 규칙 적용 */
.eventfilter{max-width:var(--layout-width); margin:0 auto; width:calc(100% - var(--layout-side-margin)); padding:var(--gap-140) 0; display:flex; justify-content: center;}

/* 리스트 가로 정렬 */
.eventfilter-list{display:flex;align-items:center;gap:var(--gap-40)}
.eventfilter-item{position:relative}

/* 구분자 | */
.eventfilter-item + .eventfilter-item::before{content:"";position:absolute;left:calc(-1 * var(--gap-20));top:50%;transform:translateY(-50%);width:1px;height:1em;background-color:var(--color-border);opacity:1}

/* 탭 버튼 기본/상태 */
.eventfilter-tab{background:transparent;border:0;cursor:pointer;font-size:var(--font-size-xlarge);line-height:1;color:#D2D8DF;font-weight:700;transition:color .2s}
.eventfilter-tab:hover{color:var(--color-dark)}
.eventfilter-tab.is-active{color:var(--color-dark)}

/* 반응형: 간격만 살짝 축소 */
@media (max-width:640px){
  .eventfilter-list{gap:var(--gap-20)}
  .eventfilter-item + .eventfilter-item::before{left:calc(-1 * var(--gap-15))}
}


section.event{max-width:var(--layout-width); margin:0 auto; width:calc(100% - var(--layout-side-margin)); padding-bottom:var(--gap-140);}
/* 리스트 그리드 */
.event-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-80); }
.event-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; background: var(--color-bright);}

/* 상태 배지(리본) */
.event-item .status { position: absolute; top: -14px; left: 24px; display: inline-flex; align-items: center; justify-content: center; height: 51px; font-size: var(--font-size-small); font-weight: 700; color: var(--color-bright); width:67px;}
.event-item .status > .inner-status{position:relative; width:100%; height: 100%;}
.event-item .status svg{position:absolute; z-index: 0; top:0; left:0; width:100%;}
.event-item .status p{position:absolute; z-index: 1; text-align: center; top:50%; left:50%; transform: translate(-50%,-50%);}
.event-item .status-planned svg{ fill: #C8AAAA; }
.event-item .status-in_progress svg{ fill: #C8B9AA; }
.event-item .status-completed svg{ fill: #C6C6C6; }

/* 카드 타이포 */
.event-item a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; text-decoration: none; color: inherit; padding: var(--gap-60) var(--gap-40) var(--gap-40); border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-bright); box-shadow: 15px 15px 25px rgba(0,0,0,.2); position: relative; transition: transform .25s; }
.event-item a:hover { transform: translateY(-4px); }
.event-item .content { flex: 1; display: flex; flex-direction: column; }
.event-item .title { margin: 0 0 var(--gap-30); font-size: var(--font-size-xlarge); font-weight: 800; line-height: 1.5; text-align: center; color: var(--color-dark); word-break: keep-all; }
.event-item .desc { margin: 0 0 var(--gap-60); font-size: var(--font-size-medium); line-height: 1.8; color: var(--color-font); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.event-item .info { margin-top: var(--gap-40); }
.event-item .date { margin: 0 0 var(--gap-10); font-size: var(--font-size-medium); font-weight: 700; text-align: center; color: var(--color-dark); }
.event-item .place { margin: 0; font-size: var(--font-size-medium); text-align: center; color: var(--color-dark); }

.emtpyMessage{font-size:var(--font-size-xlarge); font-weight: 500; text-align: center;}

.file-wrap{width:calc(100% - var(--layout-flax-margin)); margin:0 auto;  max-width:var(--layout-width);}

/* 반응형 */
@media (max-width: 1200px) { 
	.event-list { grid-template-columns: repeat(2, 1fr); gap: var(--gap-60); } 
}

@media (max-width: 768px) { 
	.event-item .status{top:-25px;}
}
@media (max-width: 640px) { 
	.event-item .status{top:-25px; width:50px;}
	.event .inner-wrap { padding: var(--gap-80) 0; } 
	.event .section-head { padding: var(--gap-30) 0 var(--gap-40); } 
	.event .title-kr { font-size: var(--font-size-xxlarge); } 
	.event-list { grid-template-columns: 1fr; gap: var(--gap-40); } 
	.event-item { padding: var(--gap-50) var(--gap-30) var(--gap-30); } 
	.event-item .desc { margin: 0 0 var(--gap-40); font-size: var(--font-size-normal); } 
}
@media (max-width: 420px) { 
	.event .title-en { font-size: var(--font-size-normal); } 
	.event-item .status{top:-25px; width:50px;}
}



/* ========== Event page (overview / schedule / participants) ========== */
/* 레이아웃 래퍼 규칙 */
.event-hero .inner-wrap{max-width:var(--layout-width);margin:0 auto;width:calc(100% - var(--layout-side-margin));padding-top:var(--gap-140);display:flex;flex-direction:column;align-items:center;}

/* 상태 배지: DB 상태값을 클래스에 그대로 사용 (completed / in_progress / planned) */
.event-status{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:9999px;font-size:var(--font-size-small);line-height:1;background-color:var(--color-border);color:var(--color-bright); margin-bottom:10px;}
.event-status.completed{background-color:#C6C6C6;color:var(--color-bright)}
.event-status.in_progress{background-color:#C8B9AA;color:var(--color-bright)}
.event-status.planned{background-color:#C8AAAA;color:var(--color-dark)}

/* 타이틀 */
.event-title{font-size:var(--font-size-xxxxlarge);font-weight:800;color:var(--color-dark);text-align:center;letter-spacing:-0.02em; margin-bottom:var(--gap-40);}

/* CTA 버튼 */
.event-cta{position:relative; z-index:0; display:inline-flex; align-items:center; gap:var(--gap-20); padding:14px 28px; border:1px solid var(--color-border); border-radius:10px; background:transparent; color:var(--color-dark); font-size:var(--font-size-normal); font-weight:600; line-height:1; overflow:hidden; cursor:pointer; transition:color .25s; margin-bottom:var(--gap-60);}
.event-cta .cta-icon svg{width:20px; height:20px; display:block; fill:currentColor; transition:inherit}

/* 오버레이: 콘텐츠 아래에 위치 */
.event-cta::before{content:""; position:absolute; inset:0 100% 0 0; background:#142543; transition:inset .35s ease; z-index:-1; pointer-events:none}
.event-cta:hover::before{inset:0 0 0 0}

/* 텍스트/아이콘을 오버레이 위로 */
.event-cta .cta-label, .event-cta .cta-icon{position:relative; z-index:1}
.event-cta:hover{color:var(--color-bright)}


.event-image-wrap{width:calc(100% - var(--layout-flex-margin)); max-width:300px; margin:0 auto; border:1px solid #d6d6d6; margin-top:var(--gap-50);}
.event-image-wrap > img{width:100%;}


/* 레이아웃 래퍼: section에는 두지 않고 inner-wrap에만 3종 + 수직 패딩 적용 */
.event-overview .inner-wrap,
.event-schedule .inner-wrap,
.event-participants .inner-wrap{max-width:var(--layout-width);margin:0 auto;width:calc(100% - var(--layout-side-margin));padding:var(--gap-140) 0}
.dot-line{max-width:var(--layout-width);margin:0 auto;width:calc(100% - var(--layout-side-margin)); height: 1px; border-top:dashed 1px#d6d6d6;}
/* 공통 좌측 사이드 + 우측 컨텐츠 배치 */
.ov-grid,.sc-grid,.pt-grid{display:flex;gap:var(--layout-flax-margin);align-items:flex-start; justify-content: space-between;}
.ov-aside,.sc-aside,.pt-aside{flex:0 0 200px}
.ov-step,.sc-step,.pt-step{font-size:var(--font-size-normal);color:var(--color-border);font-weight:900;}
.ov-title,.sc-title,.pt-title{font-size:var(--font-size-xlarge);font-weight:700;color:var(--color-dark)}

/* ========== 행사개요 테이블 ========== */
.ov-table{width:100%; max-width:900px; border-top:1px solid var(--color-border)}
.ov-table .row{display:grid;grid-template-columns:160px 1fr;gap:var(--gap-20);padding:18px 0;border-bottom:1px solid var(--color-border)}
.ov-table .th{color:var(--color-dark);font-size:var(--font-size-medium); font-weight: 500;}
.ov-table .td{color:var(--color-font);font-size:var(--font-size-medium); line-height:160%}

/* ========== 프로그램 진행 일정 ========== */
.sc-table{width:100%; max-width:900px;}
.sc-table .row{display:grid;grid-template-columns:160px 1fr;gap:var(--gap-20);padding-bottom:var(--gap-20)}
.sc-table .th{color:var(--color-dark); font-size:var(--font-size-medium); font-weight: 500;}
.sc-table .td{color:var(--color-dark); font-size:var(--font-size-medium); font-weight: 500;}
.sc-line{display:grid;grid-template-columns:120px 40px 1fr 160px; align-items:center;gap:var(--gap-20);padding:16px 0; border-top:1px solid var(--color-border)}
.sc-line:first-of-type{border-top:1px solid var(--color-border)}
.sc-time{font-size:var(--font-size-medium);color:var(--color-dark); font-weight: 500;}
.sc-duration{font-size:var(--font-size-medium);color:var(--color-dark);text-align:center; font-weight: 500;}
.sc-agenda{font-size:var(--font-size-medium);color:var(--color-font);line-height:160%}
.sc-remark{text-align:right;font-size:var(--font-size-medium);color:var(--color-font); word-break: keep-all;}

/* ========== 참여자 표 ========== */
.pt-table{width:100%;border-top:1px solid var(--color-border); max-width:900px;}
.pt-line{display:grid;grid-template-columns:200px 1fr 120px; align-items:center;padding:15px 0;border-bottom:1px solid var(--color-border)}
.pt-name{font-size:var(--font-size-medium);color:var(--color-dark);font-weight:600}
.pt-aff{font-size:var(--font-size-medium);color:var(--color-font);line-height:160%}
.pt-desc{text-align:right;font-size:var(--font-size-medium);color:var(--color-font); word-break: keep-all;}

/* ========== 페이지 상단 공통 헤더(필요 시) ========== */
.page-head{max-width:var(--layout-width);margin:0 auto;width:calc(100% - var(--layout-side-margin));padding-top:var(--gap-60)}
.title-kr{font-size:var(--font-size-xxxxlarge);font-weight:700;color:var(--color-dark)}

.btn-wrap{display: flex; justify-content: center; padding-bottom:var(--gap-140);}

/* ========== 반응형(루트 값이 줄어들므로 구조만 보완) ========== */
@media (max-width:768px){
  .ov-aside,.sc-aside,.pt-aside{flex:0 0 140px}
  .ov-table .row{grid-template-columns:120px 1fr}
  .sc-line{grid-template-columns:150px 60px 1fr 120px}
  .pt-line{grid-template-columns:160px 1fr 100px}
}
@media (max-width:640px){
  .ov-grid,.sc-grid,.pt-grid{flex-direction:column;gap:var(--gap-30)}
  .ov-aside,.sc-aside,.pt-aside{flex:0 0 auto}
  .ov-table .row{grid-template-columns:1fr}
  .ov-table .th{margin-bottom:6px}
  .sc-table .row{grid-template-columns:1fr}
  .sc-line{grid-template-columns:140px 50px 1fr;gap:var(--gap-15)}
  .sc-remark{grid-column:1/-1;text-align:left;padding-top:8px;color:var(--color-font)}
  .pt-line{grid-template-columns:1fr;gap:8px}
  .pt-desc{text-align:left;color:var(--color-font)}
}