/**
 * layout.css — 13.Seohyeon 헤더/푸터 레이아웃 스타일
 * 위치: /var/www/test_seohyeon/public/assets/css/layout.css
 * 역할: 헤더, 사이드드로어, 하단탭바, 푸터 스타일
 *       색상은 모두 theme.css 변수(--hd-*, --ft-*)를 사용
 *       직접 색상값 사용 금지 — theme.css에서 변경할 것
 * 수정이력:
 *   2026-03-08 최초 작성 (WBS 1-03 리팩토링)
 *   2026-03-09 v3.7 — hd-inner 1100px 래퍼 추가, GNB 제거,
 *                      PC 우측 사이드드로어, 모바일 하단탭바,
 *                      푸터 회사정보형으로 리디자인
 */

/* ══════════════════════════════════════════════
   HEADER — 풀블리드 배경 + 1100px 내부 정렬
══════════════════════════════════════════════ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--hd-bg);
	height: var(--header-h);
	border-bottom: 1px solid var(--hd-border);
	box-shadow: var(--hd-shadow);
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* 헤더 상단 글로우 라인 (Deep Ice에서 빛남) */
.site-header::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--blade) 30%,
		var(--blade) 70%,
		transparent 100%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
[data-theme="dark"] .site-header::before { opacity: 0.4; }

/* 헤더 내부 — 1100px 중앙정렬 래퍼 */
.hd-inner {
	max-width: 1100px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 24px;
}

/* ── 로고 ──────────────────────────────────── */
.hd-logo {
	display: inline-block;
	flex-shrink: 0;
	font-size: 0;
	text-decoration: none;
}
.hd-logo .num,
.hd-logo .dot,
.hd-logo .name {
	display: inline-block;
	vertical-align: middle;
}
.hd-logo .num {
	font-size: 24px;
	font-weight: 900;
	color: var(--hd-logo-num);
	letter-spacing: -1px;
	transition: color .35s ease;
}
.hd-logo .dot {
	font-size: 16px;
	color: var(--hd-logo-dot);
	padding-bottom:6px;
	font-weight:bolder;
	margin: 0 4px;
	transition: color .35s ease;
}
.hd-logo .name {
	padding-top: 2px;
	font-size: 13px;
	font-weight: 900;
	color: var(--hd-logo-name);
	letter-spacing: 2.5px;
	text-transform: uppercase;
	transition: color .35s ease;
}

/* ── 스페이서 (로고 우측 여백) ──────────────── */
.hd-spacer { flex: 1; }

/* ── 햄버거 버튼 — PC/모바일 공통 ──────────── */
.hd-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 8px;
	transition: background .15s;
}
.hd-burger:hover {
	background: var(--hd-burger-hover-bg, rgba(56,189,248,.08));
}
.hd-burger span {
	display: block;
	height: 2px;
	background: var(--hd-burger-color);
	border-radius: 2px;
	transition: all .25s cubic-bezier(.4,0,.2,1), background .35s ease;
}
/* 열렸을 때 X 모양 */
.hd-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hd-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════
   SIDE DRAWER — PC 우측 슬라이드 패널
══════════════════════════════════════════════ */

/* 오버레이 (드로어 뒤 어두운 배경) */
.drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 300;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            visibility .38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.drawer-overlay.open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* 드로어 패널 */
.side-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	background: var(--hd-drawer-bg);
	border-left: 1px solid var(--hd-drawer-border);
	z-index: 301;
	transform: translateX(100%);
	transition: transform .42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            background .35s ease,
	            border-color .35s ease;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 32px rgba(0,0,0,.18);
	overflow: hidden;
}
.side-drawer.open {
	transform: translateX(0);
}

/* 드로어 헤더 (닫기 버튼) */
.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	height: var(--header-h);
	border-bottom: 1px solid var(--hd-drawer-border);
	flex-shrink: 0;
}
.drawer-head-logo {
	font-size: 0;
	text-decoration: none;
}
.drawer-head-logo .num {
	display: inline-block;
	font-size: 20px;
	font-weight: 900;
	color: var(--hd-logo-num);
	letter-spacing: -1px;
}
.drawer-head-logo .dot {
	display: inline-block;
	font-size: 14px;
	color: var(--hd-logo-dot);
	margin: 0 3px;
}
.drawer-head-logo .name {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: var(--hd-logo-name);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	color: var(--hd-drawer-link);
	font-size: 20px;
	line-height: 1;
	transition: background .12s, color .12s, transform .4s cubic-bezier(.4,0,.2,1);
}
.drawer-close:hover {
	background: rgba(239,68,68,.1);
	color: #EF4444;
	transform: rotate(360deg);
}

/* 드로어 유저 영역 — 기본: 세로 배치 (비로그인) */
.drawer-user {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--hd-drawer-border);
	flex-shrink: 0;
}
.drawer-user-greeting {
	font-size: 13px;
	font-weight: 700;
	color: var(--hd-drawer-link);
	letter-spacing: -.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.drawer-user-nick {
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
}
.drawer-user-actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
	align-items: center;
}
/* 로그인 상태: greeting + 아바타 가로 배치 */
.drawer-user.is-logged {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.btn-drawer-my {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--hd-btn-my-bg);
	border: 1.5px solid var(--hd-btn-my-border);
	border-radius: 50%;
	overflow: hidden;
	text-decoration: none;
	flex-shrink: 0;
	transition: all .15s;
}
.btn-drawer-my:hover { opacity: .8; }

/* 프로필 이미지 아바타 */
.drawer-user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
/* 이미지 없을 때 텍스트 아바타 */
span.drawer-user-avatar-default {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--blade);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-drawer-login {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	background: var(--blade);
	color: #fff;
	border: 1px solid var(--blade);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, opacity .15s;
}
.btn-drawer-login:hover { opacity: .85; }

.btn-drawer-register {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	background: transparent;
	color: var(--text);
	border: 1.5px solid var(--blade);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all .15s;
}
.btn-drawer-register:hover {
	background: var(--blade);
	color: #fff;
}
/* 드로어 nav 목록 — 3단 구조 */
.drawer-nav {
	flex: 1;
	overflow-y: auto;
	padding: 14px 0 8px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ① 히어로 메뉴 (큰 카드) */
.drawer-hero {
	margin: 0 14px 14px;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	display: block;
	background: linear-gradient(135deg, #1a4a8a 0%, #1e6fbe 50%, #2ea7ff 100%);
	padding: 18px 18px 16px;
	position: relative;
	transition: transform .18s, box-shadow .18s;
	flex-shrink: 0;
}
.drawer-hero:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(46,167,255,0.35);
}
.drawer-hero-eyebrow {
	font-size: 10px;
	font-weight: 600;
	color: rgba(255,255,255,.65);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.drawer-hero-title {
	font-size: 22px;
	font-weight: 900;
	color: #fff;
	letter-spacing: -.5px;
	line-height: 1.2;
}
.drawer-hero-sub {
	font-size: 11px;
	color: rgba(255,255,255,.68);
	margin-top: 5px;
	line-height: 1.5;
}
.drawer-hero-icon {
	position: absolute;
	right: 16px;
	bottom: 14px;
	font-size: 1.5rem;
	color: rgba(255,255,255,.22);
}
.drawer-hero.active {
	box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 0 4px #2ea7ff;
}

/* ② 주요 메뉴 그리드 (3열) */
.drawer-main-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	flex-shrink: 0;
}
.drawer-main-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 13px 6px;
	background: transparent;
	border: 1px solid var(--hd-drawer-border);
	border-radius: 12px;
	text-decoration: none;
	color: var(--hd-drawer-link);
	cursor: pointer;
	/* 입체감을 위한 전환 설정 */
	transition: background .18s, border-color .18s, color .18s,
	            transform .18s cubic-bezier(.34,1.56,.64,1),
	            box-shadow .18s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	will-change: transform;
}
.drawer-main-item:hover {
	background: rgba(46,167,255,.10);
	border-color: var(--blade);
	color: var(--blade);
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 6px 16px rgba(46,167,255,.20), 0 2px 6px rgba(0,0,0,.08);
}
.drawer-main-item.active {
	background: rgba(46,167,255,.10);
	border-color: var(--blade);
	color: var(--blade);
	box-shadow: 0 0 0 2px rgba(46,167,255,.25);
}
.drawer-main-item:hover .drawer-main-icon,
.drawer-main-item.active .drawer-main-icon {
	color: var(--blade);
}
.drawer-main-icon {
	font-size: 1.25rem;
	color: var(--muted);
	line-height: 1;
	transition: color .18s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.drawer-main-item:hover .drawer-main-icon {
	transform: scale(1.15);
}
.drawer-main-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--muted);
	transition: color .18s;
}
.drawer-main-item:hover .drawer-main-label,
.drawer-main-item.active .drawer-main-label {
	color: var(--blade);
}

/* ③ 서브 메뉴 그리드 (4열) */
.drawer-sub-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding: 10px 14px;
	margin-bottom: 4px;
	position: relative;
}
.drawer-sub-grid::before {
	content: '';
	display: block;
	position: absolute;
	top: -8px;
	left: 14px;
	right: 14px;
	height: 1px;
	background: var(--hd-drawer-border);
}
.drawer-sub-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px 4px;
	background: transparent;
	border: 1px solid var(--hd-drawer-border);
	border-radius: 10px;
	text-decoration: none;
	color: var(--muted);
	cursor: pointer;
	transition: background .18s, border-color .18s, color .18s,
	            transform .18s cubic-bezier(.34,1.56,.64,1),
	            box-shadow .18s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	will-change: transform;
}
.drawer-sub-item:hover {
	background: rgba(46,167,255,.08);
	border-color: var(--blade);
	color: var(--blade);
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 5px 14px rgba(46,167,255,.18), 0 2px 5px rgba(0,0,0,.07);
}
.drawer-sub-item.active {
	background: rgba(46,167,255,.08);
	border-color: var(--blade);
	color: var(--blade);
	box-shadow: 0 0 0 2px rgba(46,167,255,.22);
}
.drawer-sub-item:hover .drawer-sub-icon,
.drawer-sub-item.active .drawer-sub-icon {
	color: var(--blade);
}
.drawer-sub-icon {
	font-size: 1rem;
	color: var(--muted);
	line-height: 1;
	transition: color .18s;
}
.drawer-sub-label {
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
	transition: color .18s;
}
.drawer-sub-item:hover .drawer-sub-label,
.drawer-sub-item.active .drawer-sub-label {
	color: var(--blade);
}

/* 하단 버튼 영역 (마이페이지 + 로그아웃) */
.drawer-bottom-bar {
	display: flex;
	gap: 8px;
	padding: 12px 14px 16px;
	border-top: 1px solid var(--hd-drawer-border);
	flex-shrink: 0;
}
.drawer-bottom-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	border-radius: 10px;
	border: 1px solid var(--hd-drawer-border);
	background: transparent;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: all .18s;
}
.drawer-bottom-btn:hover,
.drawer-bottom-btn.active {
	border-color: var(--blade);
	color: var(--blade);
	background: rgba(46,167,255,.08);
}

/* 기존 호환성 (혹시 남아있는 경우 대비) */
.drawer-divider {
	height: 1px;
	background: var(--hd-drawer-border);
	margin: 8px 16px;
}
.drawer-foot-links {
	padding: 4px 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex-shrink: 0;
}
.drawer-foot-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hd-drawer-link);
	text-decoration: none;
	border-radius: 8px;
	transition: all .12s;
}
.drawer-foot-link:hover {
	background: rgba(46,167,255,.07);
	color: var(--blade);
}
.drawer-foot-link.active {
	background: var(--hd-drawer-active-bg);
	color: var(--blade);
	font-weight: 600;
}

/* 드로어 하단 (로그아웃) */
.drawer-foot {
	padding: 8px 16px 16px;
	border-top: 1px solid var(--hd-drawer-border);
	flex-shrink: 0;
}
.btn-drawer-logout {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 12px;
	background: none;
	border: 1px solid var(--hd-drawer-border);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hd-drawer-link);
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: all .15s;
}
.btn-drawer-logout:hover {
	background: rgba(239,68,68,.08);
	color: #EF4444;
	border-color: rgba(239,68,68,.25);
}

/* ══════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR
══════════════════════════════════════════════ */
.bottom-tabbar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 64px;
	min-width: 320px;
	background: var(--hd-bg);
	border-top: 1px solid var(--hd-border);
	box-shadow: 0 -2px 12px rgba(0,0,0,.08);
	z-index: 190;
	transition: background .35s ease, border-color .35s ease;
}
.bottom-tabbar::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg,
		transparent, var(--blade) 40%,
		var(--blade) 60%, transparent);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
[data-theme="dark"] .bottom-tabbar::before { opacity: 0.2; }

.tab-bar-inner {
	display: flex;
	align-items: stretch;
	height: 100%;
	width: 100%;
}

/* 탭 아이템 */
.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	text-decoration: none;
	color: var(--muted);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3px;
	transition: color .2s;
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	padding-bottom: 2px;
}
.tab-item.active { color: var(--blade); }
.tab-item.active::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 24px; height: 2px;
	background: var(--blade);
	border-radius: 0 0 3px 3px;
}
/* 아이콘 — 기본 흑백, hover/active 컬러 */
.tab-icon {
	font-size: 18px;
	line-height: 1;
	filter: grayscale(1) opacity(.5);
	transition: filter .2s, transform .2s;
}
.tab-item:hover .tab-icon,
.tab-item.active .tab-icon {
	filter: grayscale(0) opacity(1);
	transform: translateY(-2px);
}
.tab-label {
	font-size: 10px;
	line-height: 1;
	letter-spacing: .2px;
}

/* 중앙 FAB */
.tab-item-fab {
	flex: 0 0 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.tab-fab-btn {
	width: 56px;
	height: 56px;
	background: var(--blade);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(56,189,248,.45);
	margin-top: -26px;
	transition: transform .15s, box-shadow .15s;
}
[data-theme="dark"] .tab-fab-btn {
	box-shadow: 0 4px 22px rgba(56,189,248,.6);
}
.tab-item-fab:hover .tab-fab-btn,
.tab-item-fab:active .tab-fab-btn {
	transform: scale(1.1);
	box-shadow: 0 6px 22px rgba(56,189,248,.55);
}
.tab-fab-btn span {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tab-fab-btn span i {
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: all .25s cubic-bezier(.4,0,.2,1);
}
.tab-item-fab.open .tab-fab-btn span i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tab-item-fab.open .tab-fab-btn span i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.tab-item-fab.open .tab-fab-btn span i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 모바일 콘텐츠 하단 패딩 */
.page-body { padding-bottom: 0; }

/* ══════════════════════════════════════════════
   FOOTER — 구 seohyeon 스타일
   InfinitySans 대형 타이포 + 파란 배경 + 흰 텍스트
══════════════════════════════════════════════ */
.site-footer {
	background: var(--ft-bg);
	border-top: 1px solid var(--ft-border);
	margin-top: auto;
	position: relative;
	transition: background .35s ease, border-color .35s ease;
}

.ft-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px 32px 0;
	position: relative;
}

/* ── 2분할 그리드 ─────────────────────────────── */
.ft-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding-bottom: 36px;
}

/* ── 좌측: 브랜드 슬로건 ───────────────────────── */
.ft-left {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
}
.ft-logo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	margin-bottom: 16px;
}
.ft-logo-num {
	font-size: 24px;
	font-weight: 900;
	color: var(--ft-title);
	letter-spacing: -1px;
	line-height: 1;
}
.ft-logo-dot {
	font-size: 14px;
	color: var(--ft-desc);
	padding-bottom:6px;
}
.ft-logo-name {
	padding-top:3px;
	font-size: 13px;
	font-weight: 900;
	color: var(--hd-logo-name);
	letter-spacing: 2.5px;
	text-transform: uppercase;
}
.ft-tagline {
	font-size: 20px;
	font-weight: 800;
	color: var(--ft-tag-line);
	line-height: 1.4;
	letter-spacing: -.3px;
	margin-bottom: 14px;
}
.ft-sub {
	font-size: 13px;
	color: var(--ft-desc);
	line-height: 2;
}

/* ── 우측: INFO + LINK 블록 ──────────────────── */
.ft-right {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.ft-block {}

/* 대형 타이포 타이틀 — InfinitySans */
.ft-block-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 12px;
	line-height: 1;
}
.ft-block-muted {
	font-family: 'InfinitySans', sans-serif;
	font-size: 20px;
	color: var(--ft-hidden-color);
	letter-spacing: 1px;
}
.ft-block-big {
	font-family: 'InfinitySans', sans-serif;
	font-size: 24px;
	font-weight: 900;
	color: var(--ft-title-big);
	letter-spacing: 3px;
}

/* INFO / LINK 리스트 */
.ft-info-list,
.ft-link-list {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ft-info-list li,
.ft-link-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 13px;
	color: var(--ft-desc);
	line-height: 1.6;
}
.ft-il-label {
	font-size: 13px;
	color: var(--ft-desc);
	letter-spacing: .5px;
	flex-shrink: 0;
	width: 130px;
}
.ft-link-list a {
	color: var(--ft-link);
	text-decoration: none;
	transition: color .13s;
}
.ft-link-list a:hover { color: var(--ft-link-hover); text-decoration: underline; }

/* 정책 링크 행 */
.ft-policy-row {
	display: flex !important;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.ft-policy-row a {
	font-size: 11.5px;
	color: var(--ft-link) !important;
	text-decoration: none;
	transition: color .13s;
}
.ft-policy-row a:hover { color: var(--ft-link-hover) !important; }
.ft-sep {
	font-size: 10px;
	color: var(--ft-desc);
	opacity: .4;
}

.ft-sns {
	display: flex;
	gap: 10px;
}
.ft-sns a {
	color: var(--ft-link);
	text-decoration: none;
	font-size: 16px;
	transition: color .13s, transform .13s;
}
.ft-sns a:hover {
	color: var(--ft-link-hover);
	transform: translateY(-2px);
}

/* ── 소속 팀 로고 ─────────────────────────────── */
.ft-team-logos {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-top: 20px;
}
.ft-team-logos a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	transition: transform .18s, opacity .18s;
	flex-shrink: 0;
}
.ft-team-logos a:hover {
	transform: scale(1.08);
	opacity: .85;
}
.ft-team-logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── 구분선 ──────────────────────────────────── */
.ft-divider-line {
	border: none;
	border-top: 1px solid var(--ft-copy-border);
	margin: 0;
}

/* ── 카피라이트 바 ──────────────────────────── */
.ft-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 0 30px;
	font-size: 12px;
	color: var(--ft-copy);
	transition: color .35s, border-color .35s;
}
.ft-bottom-right {
	font-size: 11px;
	opacity: .65;
}

/* ── 반응형 ─────────────────────────────────── */
@media (max-width: 680px) {
	.ft-inner { padding: 36px 20px 0; }
	.ft-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.ft-tagline   { font-size: 18px; }
	.ft-block-big { font-size: 24px; }
	.ft-il-label  { width: 130px; }
}

/* ══════════════════════════════════════════════
   MOBILE FULLSCREEN OVERLAY MENU
   — FAB 클릭 시 전체화면을 덮는 메뉴 레이어
══════════════════════════════════════════════ */
.mobile-menu-overlay {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: 0;
	z-index: 600;
	background: var(--hd-drawer-bg);
	overflow: hidden;
	min-width: 320px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity .38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            visibility .38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform .38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mobile-menu-overlay.open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* 오버레이 헤더 */
.mob-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	height: 56px;
	border-bottom: 1px solid var(--hd-drawer-border);
	flex-shrink: 0;
}
.mob-menu-logo {
	font-size: 0;
	text-decoration: none;
}
.mob-menu-logo .num {
	display: inline-block;
	font-size: 20px;
	font-weight: 900;
	color: var(--hd-logo-num);
	letter-spacing: -1px;
}
.mob-menu-logo .dot {
	display: inline-block;
	font-size: 14px;
	color: var(--hd-logo-dot);
	margin: 0 3px;
}
.mob-menu-logo .name {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: var(--hd-logo-name);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.mob-menu-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	color: var(--hd-drawer-link);
	font-size: 22px;
	line-height: 1;
	transition: background .12s, color .12s, transform .4s cubic-bezier(.4,0,.2,1);
}
.mob-menu-close:hover {
	background: rgba(239,68,68,.1);
	color: #EF4444;
	transform: rotate(360deg);
}

/* 유저 영역 */
.mob-menu-user {
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--hd-drawer-border);
	flex-shrink: 0;
}
.mob-menu-greeting {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 4px;
}
.mob-menu-nick {
	font-size: 18px;
	font-weight: 700;
	color: var(--hd-drawer-link);
}
.mob-menu-actions {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
.btn-mob-login {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	background: var(--blade);
	color: #fff;
	border: 1px solid var(--blade);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, opacity .15s;
}
.btn-mob-login:hover { opacity: .85; }
.btn-mob-register {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	background: transparent;
	color: var(--text);
	border: 1.5px solid var(--blade);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all .15s;
}
.btn-mob-register:hover {
	background: var(--blade);
	color: #fff;
}

/* 모바일 메뉴 목록 — 드로어와 동일한 3단 구조 클래스 재사용 */
.mob-menu-nav {
	flex: 1;
	overflow-y: auto;
	padding: 14px 0 8px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.mob-menu-divider {
	height: 1px;
	background: var(--hd-drawer-border);
	margin: 8px 16px;
}

/* 하단 로그아웃 (하위호환 — drawer-bottom-bar로 교체됨) */
.mob-menu-foot {
	padding: 8px 16px 20px;
	border-top: 1px solid var(--hd-drawer-border);
	flex-shrink: 0;
}
.btn-mob-logout {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 13px 14px;
	background: none;
	border: 1px solid var(--hd-drawer-border);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hd-drawer-link);
	cursor: pointer;
	font-family: inherit;
	transition: all .15s;
}
.btn-mob-logout:hover {
	background: rgba(239,68,68,.08);
	color: #EF4444;
	border-color: rgba(239,68,68,.25);
}

/* ── 반응형 ──────────────────────────────────── */
@media (max-width: 680px) {
	/* 모바일: 하단탭바 표시 */
	.bottom-tabbar { display: flex; align-items: stretch; }

	/* 모바일: 콘텐츠 하단에 탭바 높이 패딩 — 좌우/상단은 0 (mp-wrap이 엣지까지) */
	.page-body { padding-bottom: 64px; padding-left: 0; padding-right: 0; padding-top: 0; }

	/* 모바일: 헤더 slim */
	.site-header { height: 52px; }
	.hd-inner    { padding: 0 7px; }

	/* 모바일: PC 사이드드로어 숨김 — 전체화면 오버레이로 대체 */
	.side-drawer    { display: none !important; }
	.drawer-overlay { display: none !important; }

	/* 모바일: 전체화면 오버레이 — open 시 표시 (transition으로 처리) */
	.mobile-menu-overlay.open {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}

	/* 모바일: 탭바 균등 간격 */
	.tab-bar-inner  { padding: 0; }
	.tab-item       { flex: 1; min-width: 0; }
	.tab-item-fab   { flex: 0 0 72px; }

	/* 모바일: 푸터 — 탭바(64px) 가림 방지 */
	.site-footer {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}
	.ft-inner { padding: 24px 0 0; }

	/* 모바일: ft-grid 1열 — max-width로 중앙 수렴 */
	.ft-grid {
		gap: 20px;
		max-width: 420px;
		margin: 0 auto;
		padding: 0 7px 24px;
	}

	/* 모바일: ft-left */
	.ft-left { gap: 8px; }

	/* 모바일: ft-right — INFO/LINK 블록 사이 간격 */
	.ft-right { gap: 16px; }

	/* 모바일: 팀로고 */
	.ft-team-logos { gap: 12px; }

	/* 카피라이트 — max-width 맞춤, 두 줄 */
	.ft-divider-line {
		max-width: 420px;
		margin: 0 auto;
	}
	.ft-bottom {
		max-width: 420px;
		margin: 0 auto;
		padding: 12px 7px 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.ft-bottom-right { opacity: 1; }
}

@media (max-width: 400px) {
	.ft-biz-item { white-space: normal; }
}


/* ══════════════════════════════════════════════
   THEME TOGGLE — 드로어/모바일 메뉴 내 테마 전환 버튼
══════════════════════════════════════════════ */
.drawer-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px 10px 22px;
	border-bottom: 1px solid var(--hd-drawer-border);
	gap: 10px;
}

.dtt-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.dtt-btns {
	display: flex;
	gap: 4px;
}

.dtt-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	font-size: 11.5px;
	font-weight: 600;
	font-family: inherit;
	border-radius: 20px;
	border: 1px solid var(--hd-drawer-border);
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: all .18s ease;
	white-space: nowrap;
}

.dtt-btn i {
	font-size: 10px;
}

.dtt-btn:hover {
	background: var(--hd-drawer-active-bg);
	color: var(--blade);
	border-color: var(--blade);
}

/* 활성 상태 */
.dtt-btn.dtt-active {
	background: var(--blade);
	color: #fff;
	border-color: var(--blade);
}

/* 자동 버튼 활성 시 약간 다른 색 */
.dtt-btn.dtt-auto.dtt-active {
	background: var(--hd-drawer-active-bg);
	color: var(--blade);
	border-color: var(--blade);
}