@charset "UTF-8";

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--primary-blue: #005694;
	--color-black: #000;
	--font-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	--font-logo: "GMarketSans", sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--text-primary: #333;
	--text-secondary: #222;
	--bg-white: #fff;
}

body {
	color: var(--text-primary);
	font-family: var(--font-base);
	font-weight: var(--fw-regular);
}

a {
	color: inherit;
	text-decoration: none;
}

/* ── 헤더 ── */
#header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100px;
	background: var(--bg-white);
	border-bottom: 1px solid #e0e0e0;
	z-index: 100;
	transition:
		top 0.35s ease,
		background 0.3s ease,
		border-color 0.3s ease;
}

#header.on {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.header-top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100px;
	padding: 0 40px;
	max-width: 1920px;
	margin: 0 auto;
}

.h-issue {
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	color: #222;
	font-weight: 400;
	line-height: 1.5;
	font-family: var(--font-logo);
}
.h-issue > * {
	display: block;
}
.h-issue .h-issue-vol {
	font-weight: 700;
}

.h-logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.h-logo a {
	display: block;
	font-family: var(--font-logo);
	font-size: clamp(22px, 2vw, 32px);
	font-weight: var(--fw-bold);
	color: var(--text-secondary);
}

.h-right {
	display: flex;
	align-items: center;
}

/* 햄버거 버튼 */
.btn-gnb-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 48px;
	height: 48px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.gnb-bar {
	display: block;
	width: 28px;
	height: 2px;
	background: var(--text-secondary);
	border-radius: 2px;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

.btn-gnb-toggle.is-open .gnb-bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.btn-gnb-toggle.is-open .gnb-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.btn-gnb-toggle.is-open .gnb-bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* ── GNB 패널 (PC: 헤더 아래 드롭다운) ── */
.gnb-panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: #f5f5f5;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0s linear 0.3s;
	z-index: 10;
}

#header.gnb-open .gnb-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0s linear 0s;
}

.gnb-panel-inner {
	padding: 60px clamp(40px, 11.5vw, 221px) 60px;
}

.gnb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: auto;
	row-gap: 60px;
	column-gap: 0;
}

/* 각 메뉴 아이템 */
.gnb-item a {
	display: block;
	padding: 8px 0 8px 25px;
	border-left: 1px solid #222;
}

.gnb-item a:hover .gnb-item-tit {
	color: var(--primary-blue);
}

.gnb-item-tit {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "GMarketSans", sans-serif;
	font-size: clamp(18px, 2.5vw, 34px);
	font-weight: 500;
	color: #222;
	transition: color 0.2s;
}

.gnb-item-tit::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 22px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22' viewBox='0 0 12 22' fill='none'%3E%3Cpath d='M1 1L11 11L1 21' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22' viewBox='0 0 12 22' fill='none'%3E%3Cpath d='M1 1L11 11L1 21' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gnb-item-desc {
	display: block;
	margin-top: 12px;
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	font-weight: 500;
	color: #666;
}

/* 하단 버튼 */
.gnb-actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 60px;
}

.gnb-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 178px;
	height: 42px;
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	font-weight: 400;
	border-radius: 0;
	transition: opacity 0.2s;
}
.gnb-action-btn:hover {
	opacity: 0.8;
}

.gnb-action-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
}

.gnb-action-btn a::after {
	content: "";
	display: block;
	width: 7px;
	height: 12px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1L6 6L1 11'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1L6 6L1 11'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gnb-action-btn--outline {
	border: 1px solid #ccc;
	color: #666;
}

.gnb-action-btn--fill {
	background: var(--primary-blue);
	color: #fff;
	border: 1px solid var(--primary-blue);
}

.btn-gnb-close {
	display: none;
}

/* GNB 오버레이 */
.gnb-overlay {
	display: none;
	position: fixed;
	top: 100px;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.45);
	z-index: 2;
}
.gnb-overlay.is-show {
	display: block;
}

/* ── 반응형 999px ── */
@media (max-width: 999px) {
	#header {
		height: 65px;
	}

	.header-top {
		height: 65px;
		padding: 0 10px;
	}

	/* 모바일: 패널이 오른쪽에서 슬라이드인 */
	.gnb-panel {
		position: fixed;
		top: 0;
		right: -100%;
		left: auto;
		width: 85vw;
		max-width: 360px;
		height: 100vh;
		max-height: none;
		opacity: 1;
		background: var(--bg-white);
		border-bottom: 0;
		border-left: 1px solid #e0e0e0;
		overflow-y: auto;
		transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 200;
		display: flex;
		flex-direction: column;
	}

	#header.gnb-open .gnb-panel {
		right: 0;
		max-height: none;
		transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.btn-gnb-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 14px;
		right: 16px;
		width: 40px;
		height: 40px;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.btn-gnb-close span {
		position: absolute;
		width: 22px;
		height: 2px;
		background: #333;
		border-radius: 2px;
	}
	.btn-gnb-close span:first-child {
		transform: rotate(45deg);
	}
	.btn-gnb-close span:last-child {
		transform: rotate(-45deg);
	}

	.gnb-panel-inner {
		padding: 70px 24px 40px;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.gnb-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.gnb-item a {
		display: flex;
		align-items: center;
		height: auto;
		padding: 20px 0;
		border-left: none;
		border-bottom: 1px solid #e0e0e0;
	}
	.gnb-item-tit::after {
		display: none;
	}

	.gnb-item-desc {
		display: none;
	}

	.gnb-actions {
		margin-top: 30px;
		flex-direction: row;
		gap: 12px;
	}

	.gnb-action-btn {
		flex: 1;
		width: auto;
		justify-content: center;
	}

	.gnb-overlay {
		top: 0;
	}
}

/* ── TOP 버튼 ── */
#btnTop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	position: fixed;
	right: 40px;
	bottom: 30px;
	width: 60px;
	height: 60px;
	background: rgba(50, 50, 50, 0.75);
	border-radius: 50%;
	color: #fff;
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	font-weight: var(--fw-medium);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 999;
}
#btnTop.is-show {
	opacity: 1;
	visibility: visible;
	bottom: 50px;
}
#btnTop:hover {
	background: #111;
	transform: translateY(-4px);
}

@media (max-width: 768px) {
	#btnTop {
		right: 16px;
	}
}

/* ── 푸터 ── */
#footer {
	background: #333;
}

.footer-inner {
	width: 100%;
}

.footer-main {
	display: flex;
	align-items: center;
	gap: 148px;
	padding: 50px 220px;
}

.footer-logo {
	flex-shrink: 0;
}

.footer-logo a {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.footer-logo img {
	display: block;
	height: 32px;
	width: auto;
}

.footer-logo-text {
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	font-weight: var(--fw-semibold);
	color: #eee;
}

.footer-info {
	flex: 1;
	min-width: 0;
}

.footer-webzine-nm {
	color: #eee;
	margin-bottom: 12px;
}

.footer-webzine-nm .nm-light {
	font-size: 18px;
	font-weight: 400;
}

.footer-webzine-nm .nm-bold {
	font-size: 18px;
	font-weight: 700;
}

.footer-webzine-nm .nm-vol {
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	font-weight: 400;
}

.footer-detail {
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	color: #999;
}

.footer-detail p {
	margin-bottom: 2px;
}
.footer-detail p:last-child {
	margin-bottom: 0;
}

.footer-right {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.footer-btns {
	display: flex;
	gap: 16px;
}

.footer-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 130px;
	height: 42px;
	padding: 0 16px;
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	font-weight: 400;
	border: 1px solid #ccc;
	border-radius: 0;
	color: #fff;
	transition: opacity 0.2s;
}
.footer-btn:hover {
	opacity: 0.75;
}

.footer-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
}

.footer-btn a::after {
	content: "";
	display: block;
	width: 7px;
	height: 12px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1L6 6L1 11'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1L6 6L1 11'/%3E%3C/svg%3E") no-repeat center / contain;
}

.footer-btn--fill {
	background: var(--primary-blue);
	border-color: var(--primary-blue);
}

.footer-sns {
	display: flex;
	gap: 16px;
}

.footer-sns-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #3d3d3d;
	transition: background 0.2s;
}
.footer-sns-btn--fb:hover {
	background: #1877f2;
}
.footer-sns-btn--ig:hover {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer-sns-btn--blog:hover {
	background: #03c75a;
}
.footer-sns-btn--yt:hover {
	background: #ff0000;
}

.footer-sns-btn::after {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	background: no-repeat center;
}

.footer-sns-btn--fb::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M16.3337 15.7499H19.2503L20.417 11.0833H16.3337V8.74992C16.3337 7.54825 16.3337 6.41659 18.667 6.41659H20.417V2.49659C20.0367 2.44642 18.6005 2.33325 17.0838 2.33325C13.9163 2.33325 11.667 4.26642 11.667 7.81659V11.0833H8.16699V15.7499H11.667V25.6666H16.3337V15.7499Z' fill='%23EEEEEE'/%3E%3C/svg%3E");
}

.footer-sns-btn--ig::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M9.09968 2.33325H18.8997C22.633 2.33325 25.6663 5.36659 25.6663 9.09992V18.8999C25.6663 20.6946 24.9534 22.4157 23.6844 23.6847C22.4154 24.9537 20.6943 25.6666 18.8997 25.6666H9.09968C5.36634 25.6666 2.33301 22.6333 2.33301 18.8999V9.09992C2.33301 7.30529 3.04592 5.58416 4.31492 4.31516C5.58391 3.04617 7.30504 2.33325 9.09968 2.33325ZM8.86634 4.66659C7.75243 4.66659 6.68415 5.10908 5.89649 5.89674C5.10884 6.68439 4.66634 7.75268 4.66634 8.86659V19.1333C4.66634 21.4549 6.54467 23.3333 8.86634 23.3333H19.133C20.2469 23.3333 21.3152 22.8908 22.1029 22.1031C22.8905 21.3155 23.333 20.2472 23.333 19.1333V8.86659C23.333 6.54492 21.4547 4.66659 19.133 4.66659H8.86634ZM20.1247 6.41659C20.5114 6.41659 20.8824 6.57023 21.1559 6.84372C21.4294 7.11721 21.583 7.48814 21.583 7.87492C21.583 8.26169 21.4294 8.63263 21.1559 8.90612C20.8824 9.17961 20.5114 9.33325 20.1247 9.33325C19.7379 9.33325 19.367 9.17961 19.0935 8.90612C18.82 8.63263 18.6663 8.26169 18.6663 7.87492C18.6663 7.48814 18.82 7.11721 19.0935 6.84372C19.367 6.57023 19.7379 6.41659 20.1247 6.41659ZM13.9997 8.16659C15.5468 8.16659 17.0305 8.78117 18.1245 9.87513C19.2184 10.9691 19.833 12.4528 19.833 13.9999C19.833 15.547 19.2184 17.0307 18.1245 18.1247C17.0305 19.2187 15.5468 19.8333 13.9997 19.8333C12.4526 19.8333 10.9688 19.2187 9.87489 18.1247C8.78092 17.0307 8.16634 15.547 8.16634 13.9999C8.16634 12.4528 8.78092 10.9691 9.87489 9.87513C10.9688 8.78117 12.4526 8.16659 13.9997 8.16659ZM13.9997 10.4999C13.0714 10.4999 12.1812 10.8687 11.5248 11.525C10.8684 12.1814 10.4997 13.0717 10.4997 13.9999C10.4997 14.9282 10.8684 15.8184 11.5248 16.4748C12.1812 17.1312 13.0714 17.4999 13.9997 17.4999C14.9279 17.4999 15.8182 17.1312 16.4745 16.4748C17.1309 15.8184 17.4997 14.9282 17.4997 13.9999C17.4997 13.0717 17.1309 12.1814 16.4745 11.525C15.8182 10.8687 14.9279 10.4999 13.9997 10.4999Z' fill='%23EEEEEE'/%3E%3C/svg%3E");
}

.footer-sns-btn--blog::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='22' viewBox='0 0 21 22' fill='none'%3E%3Cg clip-path='url(%23clip0_298_104)'%3E%3Cpath d='M20.3228 0H18.9795V22H20.3228V0Z' fill='%23EEEEEE'/%3E%3Cpath d='M7.64465 6.19757C6.08805 6.19757 4.65828 6.75679 3.51101 7.68499V1.56812H0V20.4318H3.51101V19.2903C4.65828 20.2185 6.08805 20.7778 7.64465 20.7778C11.4266 20.7778 14.4937 17.5147 14.4937 13.4848C14.4937 9.45491 11.4266 6.1918 7.64465 6.1918V6.19757ZM7.2065 17.6242C5.02725 17.6242 3.2631 15.7736 3.2631 13.4905C3.2631 11.2075 5.02725 9.3569 7.2065 9.3569C9.38574 9.3569 11.1499 11.2075 11.1499 13.4905C11.1499 15.7736 9.38574 17.6242 7.2065 17.6242Z' fill='%23EEEEEE'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_298_104'%3E%3Crect width='20.3223' height='22' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.footer-sns-btn--yt::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M11.6663 17.4999L17.7213 13.9999L11.6663 10.4999V17.4999ZM25.153 8.36492C25.3047 8.91325 25.4097 9.64825 25.4797 10.5816C25.5613 11.5149 25.5963 12.3199 25.5963 13.0199L25.6663 13.9999C25.6663 16.5549 25.4797 18.4333 25.153 19.6349C24.8613 20.6849 24.1847 21.3616 23.1347 21.6533C22.5863 21.8049 21.583 21.9099 20.043 21.9799C18.5263 22.0616 17.138 22.0966 15.8547 22.0966L13.9997 22.1666C9.11134 22.1666 6.06634 21.9799 4.86467 21.6533C3.81467 21.3616 3.13801 20.6849 2.84634 19.6349C2.69467 19.0866 2.58967 18.3516 2.51967 17.4183C2.43801 16.4849 2.40301 15.6799 2.40301 14.9799L2.33301 13.9999C2.33301 11.4449 2.51967 9.56659 2.84634 8.36492C3.13801 7.31492 3.81467 6.63825 4.86467 6.34659C5.41301 6.19492 6.41634 6.08992 7.95634 6.01992C9.47301 5.93825 10.8613 5.90325 12.1447 5.90325L13.9997 5.83325C18.888 5.83325 21.933 6.01992 23.1347 6.34659C24.1847 6.63825 24.8613 7.31492 25.153 8.36492Z' fill='%23EEEEEE'/%3E%3C/svg%3E");
}

.footer-copy {
	border-top: 1px solid #444;
	text-align: center;
	padding: 20px 0 40px;
	font-size: clamp(14px, calc(11px + 0.7vw), 18px);
	color: #666;
}

@media (max-width: 1400px) {
	.footer-main {
		gap: 60px;
		padding: 50px 60px;
	}
}

@media (max-width: 999px) {
	.footer-main {
		gap: 30px;
		padding: 40px 24px;
		flex-wrap: wrap;
	}
	.footer-right {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (max-width: 768px) {
	.footer-main {
		flex-direction: column;
		gap: 20px;
		padding: 32px 20px;
	}
	.footer-info {
		text-align: center;
	}
	.footer-right {
		flex-direction: column;
		align-items: center;
	}
	.footer-btns {
		flex-wrap: wrap;
	}
}

/* ── 공통 wrapper ── */
#containerWrap,
#m1Wrap {
	padding-top: 100px;
}

@media (max-width: 999px) {
	#containerWrap,
	#m1Wrap {
		padding-top: 65px;
	}
}