@charset "utf-8";

/* =========================================================
   정보보안협의회 세미나 (THE NEXT SECURITY FRONTIER)
   - 시안 기준: PC 1440px / Mobile 360px
   - --px 은 "시안상의 1px" 에 해당하는 길이.
     화면 폭에 비례해 커지고 줄어들기 때문에
     calc(시안값 * var(--px)) 형태로 사용한다.
   ========================================================= */

:root {
	--bg: #020510;
	--c-point: #a093d5;   /* 라벨/보조 텍스트 */
	--c-line: #8d80c2;    /* 구분선(밝은) */
	--c-border: #462ea3;  /* 표 테두리 */
	--c-cell: rgba(56, 34, 146, 0.4); /* 발표 셀 배경 */
	--c-topic: #fffcde;   /* 발표 주제 */
	--px: calc(min(100vw, 1440px) / 1440);
}

@media (max-width: 767px) {
	:root {
		--px: calc(min(100vw, 600px) / 360);
	}
}

html {
	background: var(--bg);
}

body {
	background: var(--bg);
	color: #fff;
	font-family: 'Spoqa Han Sans Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	font-weight: 400;
	letter-spacing: -0.025em;
	word-break: keep-all;
	/* overflow-x:hidden 을 body 에 주면 reset.css(html,body height:100%) 때문에
	   body 가 별도 스크롤 영역이 되어 window scroll 이벤트가 발생하지 않는다.
	   가로 넘침은 .seminar 의 overflow:hidden 으로 처리. */
}

img { max-width: none; border: 0; vertical-align: top; }

.seminar {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
}

/* ---------------------------------------------------------
   배경 비주얼
--------------------------------------------------------- */
.visual {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(1024 * var(--px));
	pointer-events: none;
}

.visual_frame {
	position: relative;
	width: calc(1440 * var(--px));
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.visual_img {
	position: absolute;
	top: 0;
	left: calc(-199 * var(--px));
	width: calc(1671 * var(--px));
	height: calc(941 * var(--px));
}

.fade {
	position: absolute;
}

.fade_bottom {
	left: 0;
	right: 0;
	top: calc(825 * var(--px));
	height: calc(199 * var(--px));
	background: linear-gradient(180deg, rgba(2, 5, 16, 0), var(--bg) 49%);
}

.fade_left,
.fade_right {
	top: 0;
	bottom: 0;
	width: calc(150 * var(--px));
}

.fade_left  { left: 0;  background: linear-gradient(270deg, rgba(2, 5, 16, 0), var(--bg) 47%); }
.fade_right { right: 0; background: linear-gradient(90deg, rgba(2, 5, 16, 0), var(--bg) 47%); }

/* ---------------------------------------------------------
   레이아웃
--------------------------------------------------------- */
.inner {
	position: relative;
	display: block;
	width: calc(1140 * var(--px));
	margin: 0 auto;
	padding-bottom: calc(230 * var(--px));
}

/* ---------------------------------------------------------
   히어로
--------------------------------------------------------- */
.hero { padding-top: calc(102 * var(--px)); }

.hero_label {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--px));
	font-size: calc(28 * var(--px));
	line-height: calc(36 * var(--px));
	font-weight: 500;
}

.hero_label::after {
	content: '';
	flex: none;
	position: relative;
	top: calc(-3 * var(--px));
	width: calc(650 * var(--px));
	height: 1px;
	background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0));
}

.hero_title {
	margin-top: calc(40 * var(--px));
	font-size: calc(86 * var(--px));
	line-height: calc(90 * var(--px));
	font-weight: 700;
	letter-spacing: -0.025em;
	white-space: nowrap;
	background: linear-gradient(180deg, #fff6d5, #b693fd);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* 그라데이션 텍스트는 text-shadow 대신 drop-shadow 사용 */
	filter: drop-shadow(0 calc(4 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.6));
}

.hero_sub {
	margin-top: calc(10 * var(--px));
	font-size: calc(40 * var(--px));
	line-height: calc(52 * var(--px));
	font-weight: 500;
	text-shadow: 0 calc(4 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.6);
}

/* 일시 / 장소 / 대상 */
.info {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--px));
	margin-top: calc(98 * var(--px));
	font-size: calc(30 * var(--px));
	line-height: calc(38 * var(--px));
	text-shadow: 0 calc(4 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.6);
}

.info_row {
	display: flex;
	align-items: center;
	gap: calc(24 * var(--px));
}

.info dt {
	display: flex;
	align-items: center;
	gap: calc(24 * var(--px));
	flex: none;
	color: var(--c-point);
	font-weight: 700;
}

.info dt::after {
	content: '';
	width: 2px;
	height: calc(24 * var(--px));
	background: var(--c-line);
}

.info dd { font-weight: 400; }
.info em { font-style: normal; color: var(--c-point); }

/* 안내 문구 (주차) */
.info_note {
	margin-top: calc(16 * var(--px));
	font-size: calc(26 * var(--px));
	line-height: 1;
	letter-spacing: -0.025em;
	color: #e6e6e6;
	white-space: pre;
	text-shadow: 0 calc(4 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------
   프로그램
--------------------------------------------------------- */
.program_title {
	margin-top: calc(114 * var(--px));
	font-size: calc(40 * var(--px));
	line-height: calc(52 * var(--px));
	font-weight: 700;
	text-shadow: 0 calc(4 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.6);
}

.tt {
	margin-top: calc(18 * var(--px));
	font-size: calc(28 * var(--px));
	line-height: 1.25;
}

/* 표 헤더 */
.tt_head {
	display: grid;
	grid-template-columns: calc(278 * var(--px)) calc(2 * var(--px)) 1fr;
	height: calc(70 * var(--px));
	border-top: calc(4 * var(--px)) solid var(--c-line);
	background: linear-gradient(180deg, #311b88, #452da3);
	color: #fbfeff;
	font-size: calc(30 * var(--px));
	font-weight: 700;
	text-align: center;
}

.tt_head_time,
.tt_head_body {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt_head_bar {
	background: linear-gradient(180deg,
		transparent 0, transparent 22.7%,
		var(--c-line) 22.7%, var(--c-line) 77.3%,
		transparent 77.3%);
}

/* 일반 행 */
.tt_row {
	display: grid;
	grid-template-columns: calc(280 * var(--px)) 1fr;
	min-height: calc(80 * var(--px));
}

.tt_time {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--px));
	padding: 0 calc(24 * var(--px));
	border-right: 2px solid var(--c-border);
	border-bottom: 2px solid var(--c-border);
}

.tt_time b {
	font-weight: 500;
	color: #fff;
}

.tt_time b + span {
	font-weight: 400;
	color: var(--c-point);
}

.tt_time_in {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--px));
}

.tt_tag { display: none; }

.tt_body {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--px));
	padding: 0 calc(24 * var(--px));
	border-bottom: 2px solid var(--c-border);
	color: #fff;
}

.tt_kind {
	flex: none;
	font-weight: 500;
	color: var(--c-point);
}

/* 마지막 행 (폐회) */
.tt_row_end .tt_time,
.tt_row_end .tt_body {
	border-bottom-width: calc(6 * var(--px));
	min-height: calc(80 * var(--px));
}

/* 발표 그룹 : 시간 | 발표(병합) | 세션 */
.tt_group {
	display: grid;
	grid-template-columns: calc(280 * var(--px)) calc(132 * var(--px)) 1fr;
}

.tt_label {
	grid-column: 2;
	grid-row: 1 / span var(--n);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(24 * var(--px));
	border-right: 2px solid var(--c-border);
	border-bottom: 2px solid var(--c-border);
	font-weight: 500;
	text-align: center;
}

.tt_item { display: contents; }

.tt_item .tt_time {
	grid-column: 1;
	min-height: calc(120 * var(--px));
	background: var(--c-cell);
}

.tt_session {
	grid-column: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(10 * var(--px));
	min-height: calc(120 * var(--px));
	padding: 0 calc(24 * var(--px));
	border-bottom: 2px solid var(--c-border);
	background: var(--c-cell);
}

.tt_session p:first-child { font-weight: 400; }
.tt_session .tt_kind { margin-right: calc(6 * var(--px)); }

.tt_topic {
	font-weight: 700;
	color: var(--c-topic);
}

/* ---------------------------------------------------------
   주최 / 주관
--------------------------------------------------------- */
.host {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: calc(100 * var(--px));
	font-size: calc(34 * var(--px));
	line-height: calc(44 * var(--px));
	letter-spacing: -0.025em;
}

.host_item {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--px));
}

.host_sub { /*margin-top: calc(14 * var(--px));*/ gap: calc(10 * var(--px)); }

.host_label {
	color: var(--c-point);
	font-weight: 400;
}

.host strong { font-weight: 700; }

.host_logo {
	width: calc(143 * var(--px));
	height: calc(61.4527 * var(--px));
	margin-top:-0.2em;
}

/* ---------------------------------------------------------
   참석 등록하기 버튼 (본문 내) / 플로팅 버튼
--------------------------------------------------------- */
.btn_apply,
.btn_floating_apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #7d69ff;
	border-radius: 12px;
	color: #fff;
	font-family: 'Pretendard', 'Spoqa Han Sans Neo', sans-serif;
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	transition: filter .2s;
}

.btn_apply:hover,
.btn_floating_apply:hover { filter: brightness(1.1); }

.btn_apply span,
.btn_floating_apply span { display: block; text-shadow:0 1px 4px rgba(0,0,0,0.16);}

/* PC : 정보 아래 본문 내 버튼 (시안 24:7 - 324 x 62, 텍스트 22px / padding 20 16) */
.btn_wrap { margin-top: calc(50 * var(--px)); }

.btn_apply {
	width: 324px;
	height: 62px;
	padding: 20px 16px;
	font-size: 22px;
	line-height: 1;
}

/* 하단 플로팅 : 스크롤 시 노출 / .inner(1140) 영역 안에서 우측 정렬 */
.floating_wrap {
	position: fixed;
	right: 0;
	bottom: 40px;
	left: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 24px 0;
	width: calc(1140 * var(--px));
	margin: 0 auto;
	transform: translateY(20px);
	transition: all 0.2s ease-in-out;
	opacity: 0;
	pointer-events: none;
}

.floating_wrap.active {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.floating_wrap .toTop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 100%;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.floating_wrap .toTop span { display: block; }
.floating_wrap .toTop img { width: 100%; height: 100%; }

.btn_floating_apply {
	height: 60px;
	padding: 0 28px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   Mobile (~767px) : 360px 시안 기준
   ========================================================= */
@media (max-width: 767px) {

	.visual { height: calc(323 * var(--px)); }
	.visual_frame { width: calc(360 * var(--px)); }

	.visual_img {
		left: calc(-138.74 * var(--px));
		width: calc(526.83 * var(--px));
		height: calc(296.68 * var(--px));
	}

	.fade_bottom {
		top: calc(260.1 * var(--px));
		height: calc(62.74 * var(--px));
	}

	.fade_left { display: none; }

	.fade_right {
		right: calc(-18 * var(--px));
		width: calc(47.29 * var(--px));
	}

	.inner {
		width: calc(320 * var(--px));
		/* 하단 고정 버튼에 가려지지 않도록 여백 확보 (고정값) */
		padding-bottom: 140px;
	}

	/* 헤더의 참석 등록하기 버튼은 모바일 시안에 없으므로 숨김 (하단 플로팅 버튼 사용) */
	.btn_wrap { display: none; }

	/* 플로팅 : 참석 등록하기는 하단에서 60px 띄워 항상 고정, 가로는 .inner 와 동일 */
	.floating_wrap {
		bottom: 60px;
		gap: 12px 0;
		width: calc(320 * var(--px));
		transform: none;
		opacity: 1;
		pointer-events: none;
	}

	/* 맨위로 버튼은 모바일에서 숨김 */
	.floating_wrap .toTop { display: none; }

	.btn_floating_apply {
		display: inline-flex;
		width: 100%;
		height: 54px;
		padding: 14px 28px;
		pointer-events: auto;
	}

	.hero { padding-top: calc(38 * var(--px)); }

	.hero_label {
		font-size: calc(14 * var(--px));
		line-height: calc(20 * var(--px));
	}
	.hero_label::after { display: none; }

	.hero_title {
		margin-top: calc(8 * var(--px));
		font-size: calc(32 * var(--px));
		line-height: calc(36 * var(--px));
	}

	.hero_sub {
		margin-top: calc(5 * var(--px));
		font-size: calc(16 * var(--px));
		line-height: calc(22 * var(--px));
	}

	.info {
		gap: calc(8 * var(--px));
		margin-top: calc(67 * var(--px));
		font-size: calc(12 * var(--px));
		line-height: calc(17 * var(--px));
	}
	.info_row,
	.info dt { gap: calc(8 * var(--px)); }
	.info dt::after { height: calc(12 * var(--px)); }

	.info_note {
		margin-top: calc(8 * var(--px));
		font-size: calc(11 * var(--px));
	}

	.program_title {
		margin-top: calc(34 * var(--px));
		font-size: calc(24 * var(--px));
		line-height: calc(32 * var(--px));
	}

	.tt {
		margin-top: calc(8 * var(--px));
		font-size: calc(12 * var(--px));
		line-height: calc(17 * var(--px));
	}

	.tt_head { display: none; }

	/* 일반 행 : 시간(진한 띠) → 내용 */
	.tt_row { display: block; min-height: 0; }

	.tt_time {
		gap: calc(4 * var(--px));
		padding: calc(6 * var(--px)) calc(12 * var(--px));
		border: 0;
		background: #16055a;
	}

	.tt_body {
		gap: calc(4 * var(--px));
		padding: calc(10 * var(--px)) calc(12 * var(--px));
		border: 0;
	}

	.tt_row_end .tt_time { border: 0; min-height: 0; }
	.tt_row_end .tt_body {
		min-height: 0;
		border-bottom: 2px solid var(--c-border);
	}

	/* 발표 그룹 : 시간 띠(오른쪽에 '발표') → 세션 */
	.tt_group { display: block; }
	.tt_label { display: none; }
	.tt_item { display: block; }

	.tt_item .tt_time {
		min-height: 0;
		justify-content: space-between;
		border-top: 2px solid var(--c-line);
		background: linear-gradient(180deg, #321c8a, #462ea3);
	}

	.tt_time_in { gap: calc(4 * var(--px)); }

	.tt_tag {
		display: block;
		font-weight: 500;
		color: #fff;
		text-align: right;
	}

	.tt_session {
		gap: calc(4 * var(--px));
		min-height: 0;
		padding: calc(10 * var(--px)) calc(12 * var(--px));
		border: 0;
	}

	.tt_session .tt_kind { margin-right: calc(4 * var(--px)); }

	/* 주최 / 주관 : 우측 정렬 */
	.host {
		flex-direction: column;
		align-items: flex-end;
		margin-top: calc(30 * var(--px));
		font-size: calc(14 * var(--px));
		line-height: calc(20 * var(--px));
	}

	.host_item { gap: 0; }
	.host_main { gap: calc(4 * var(--px)); }
	.host_sub { margin-top: calc(9 * var(--px)); gap: calc(4 * var(--px)); }

	.host_logo {
		width: calc(52 * var(--px));
		height: calc(22 * var(--px));
	}
}

/* 모바일 가로로 넓은 화면(601~767px) : 좌측 가장자리도 어둡게 */
@media (min-width: 601px) and (max-width: 767px) {
	.fade_left {
		display: block;
		width: calc(47.29 * var(--px));
	}
}