/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-111934
* CODE     : Dev - EV00021082 , Prod - EV00008772
* FILE     : /kr/event/2026/01/05_pc_word/eventMainPcBack.jsp
* DESC     : 26년 아카데미 페스티벌 - 숨은 글자 찾기 게임
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/11/25				신우용				Created
************************************************************************************
**/


/* 이벤트 설정 */
* {
	--width: 1380;
}

.word-container * {
	font-family: 'Pretendard', sans-serif;
}

.word-container-inner {
	padding: calc(64 / var(--width) * 100%) 0;
}

.word-container .word-inner,
.word-container .event-inner {
	display: flex;
	width: calc(816 / var(--width) * 100%);
	margin: 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.word-container .word-inner.type2 {
	padding: calc(32 / 816 * 100%) 0;
	background-color: #F3F5F7;
	gap: 32px;
	border-radius: 8px;
}

.word-container .word-inner+.word-inner {
	margin-top: calc(64 / var(--width) * 100%);
}

.word-container .event-inner:first-of-type {
	margin-top: calc(64 / var(--width) * 100%);
}

.word-container .event-inner+.event-inner {
	margin-top: calc(24 / var(--width) * 100%);
}

.word-container .quiz-title {
	font-size: 24px;
	color: #111;
	line-height: 1.4;
	font-weight: 600;
  	text-align: center;
}

.word-container .quiz-action img {
	width: calc(370 / 816 * 100%);
	margin: 0 auto;
}

.word-container .word-inner .words {
	display: grid;
	width: calc(370 / 816 * 100%);
	min-height: 275px;
	margin: 0 auto;
	grid-template-columns: repeat(4, minmax(calc((100% - 48px) / 4), auto));
	gap: 16px;
}

.word-container .words .word-box {
	width: 100%;
	aspect-ratio: 1 / 1 auto;
}

.word-container .words .word-box button {
	display: inline-flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 28px;
	font-weight: 700;
	color: #382A2A;
	background-image: url('/kr/event/2026/01/05_pc_word/images/bg_word_view.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	transition: all .3s ease-in-out;
}

.word-container .words .word-box button:not(.pic):disabled {
	color: #ccc;
	opacity: .5;
}

.word-container .answer-group {
	display: flex;
	width: calc(464 / 816 * 100%);
	align-items: center;
	justify-content: center;
	column-gap: 16px;
}

.word-container .answer-group>input {
	display: inline-flex;
	width: 100%;
	aspect-ratio: 1 / 1 auto;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 36px;
	font-weight: 600;
	color: transparent;
	background-color: transparent;
	background-image: url('/kr/event/2026/01/05_pc_word/images/bg_word_blank.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	transition: background .3s ease-in-out, color .3s ease-in-out;
	transition-delay: 0s, 0.3s;
	cursor: auto;
}

.word-container .answer-group>input[aria-selected="true"] {
	background-image: url('/kr/event/2026/01/05_pc_word/images/bg_word_complete.png');
	color: #111;
}

.word-container .quiz-action .btn-wrap {
	display: flex;
	margin-top: 24px;
	gap: 0 8px;
	align-items: center;
	justify-content: center;
}

.word-container [class*="btn-primary"] {
	display: inline-flex;
	width: 260px;
	height: 56px;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid #111;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	color: #111;
}

.word-container .btn-primary-ok {
	color: #fff;
	background-color: #111;
}

.word-container .layer-input .chk-wrap input {
	left: 0;
}

.word-container #layerchk1-1:focus {
	outline: none;
}

.word-container .layer-input .chk-wrap input+label {
	color: #727780;
	letter-spacing: -0.48px;
	text-align: left;
}

.word-container .layer-input .chk-wrap input+label::after {
	background-image: url('/kr/event/2026/01/05_pc_word/images/ico_checkbox.svg');
}

.word-container .layer-input .chk-wrap input:checked+label::after {
	background-image: url('/kr/event/2026/01/05_pc_word/images/ico_checkbox_on.svg');
}


.word-container .btn-pop-open {
	text-decoration: underline;
	display: inline;
}

.word-container .btn-pop-open:hover {
	text-decoration-line: underline;
}

.word-container #layerchk1-1:focus+label:after {
	outline: 1px auto #000;
	outline-offset: 1px;
}

@media screen and (max-width: 1460px) {
	.word-container .quiz-title {
		font-size: calc(24 / 1480 * 100vw);
	}

	.word-container .word-inner .words {
		min-height: calc(275 / 1480 * 100vw);
		gap: calc(16 / 1480 * 100vw);
	}

	.word-container .words .word-box button {
		font-size: calc(28 / 1480 * 100vw);
	}

	.word-container .answer-group>input {
		font-size: calc(36 / 1480 * 100vw);
	}

	.word-container [class*="btn-primary"] {
		width: calc(260 / 1480 * 100vw);
		height: calc(56 / 1480 * 100vw);
		font-size: calc(16 / 1480 * 100vw);
	}

	.word-container .layer-input .chk-wrap input+label {
		font-size: calc(16 / 1480 * 100vw);
	}
}

@media screen and (max-width: 767px) {
	* {
		--width: 720;
	}

	.word-container .quiz-title {
		font-size: calc(20 / 390 * 100vw);
	}

	.word-container .word-inner,
	.word-container .event-inner {
		width: calc(350 / 390 * 100vw);
		gap: calc(30 / 390 * 100vw);
	}

	.word-container .word-inner+.word-inner {
		margin-top: calc(48 / 390 * 100vw);
	}

	.word-container .event-inner:first-of-type {
		margin-top: calc(48 / 390 * 100vw);
	}

	.word-container .event-inner+.event-inner {
		margin-top: calc(24 / 390 * 100vw);
	}

	.word-container .word-inner.type2 {
		padding: calc(32 / 390 * 100vw) calc(24 / 390 * 100vw);
		gap: calc(32 / 390 * 100vw);
	}

	.word-container .quiz-action img {
		width: 100%;
	}

	.word-container .word-inner .words {
		width: calc(272 / 390 * 100vw);
		min-height: calc(205 / 390 * 100vw);
		grid-template-columns: repeat(4, minmax(calc((100% - calc(24 / 390 * 100vw)) / 4), auto));
		gap: calc(8 / 390 * 100vw);
	}

	.word-container .words .word-box button {
		font-size: calc(22 / 390 * 100vw);
	}

	.word-container .answer-group {
		width: calc(340 / 390 * 100vw);
		column-gap: calc(10 / 390 * 100vw);
	}

	.word-container .answer-group>input {
		font-size: calc(22 / 390 * 100vw);
	}

	.word-container .quiz-action .btn-wrap {
		width: 100%;
		margin-top: calc(10 / 390 * 100vw);
		flex-direction: column;
		gap: calc(8 / 390 * 100vw) 0;
	}

	.word-container [class*="btn-primary"] {
		width: 100%;
		height: calc(48 / 390 * 100vw);
		font-size: calc(15 / 390 * 100vw);
	}

	.word-container .layer-input .chk-wrap input+label {
		padding-left: calc(24 / 390 * 100vw);
		font-size: calc(13 / 390 * 100vw);
	}

	.word-container .layer-input .chk-wrap input+label::after {
		top: calc(1 / 390 * 100vw);
		width: calc(20 / 390 * 100vw);
		height: calc(20 / 390 * 100vw);
	}
}